From a7cd9d5bf00eab6cd1f6611a1427558f4eb920b3 Mon Sep 17 00:00:00 2001 From: charangirijala Date: Fri, 8 Nov 2024 19:14:14 +0530 Subject: [PATCH] changes for dragger-resize-issue --- .../lwc/splitscreen/splitscreen.js | 75 +++++++++++++++++-- .../detailedLogViewer/detailedLogViewer.js | 24 +++--- .../lwc/logAnalysisView/logAnalysisView.html | 7 +- .../lwc/logAnalysisView/logAnalysisView.js | 42 ++++++++--- ...lysis_Viewer_State.messageChannel-meta.xml | 11 +++ 5 files changed, 129 insertions(+), 30 deletions(-) diff --git a/force-app/main/default/lwc/UtilityComponents/lwc/splitscreen/splitscreen.js b/force-app/main/default/lwc/UtilityComponents/lwc/splitscreen/splitscreen.js index 6f0bdbb..c5102b0 100644 --- a/force-app/main/default/lwc/UtilityComponents/lwc/splitscreen/splitscreen.js +++ b/force-app/main/default/lwc/UtilityComponents/lwc/splitscreen/splitscreen.js @@ -1,30 +1,88 @@ -import { LightningElement, track, api } from "lwc"; +import { LightningElement, track, wire } from "lwc"; +import { + subscribe, + publish, + APPLICATION_SCOPE, + MessageContext +} from "lightning/messageService"; +import LOG_ANALYSIS_STATE from "@salesforce/messageChannel/Log_Analysis_Viewer_State__c"; export default class Splitscreen extends LightningElement { - @api closeLog; - @api fullScreen; + closeLog; + msgChannelSub = null; + fullScreen; @track leftWidth = 50; isResizing = false; + @wire(MessageContext) + messageContext; + connectedCallback() { + if (!this.msgChannelSub) { + this.subscribeToMessageChannel(); + } + } + renderedCallback() { + if (this.fullScreen === false && !this.isResizing) { + this.leftWidth = 50; + } + } + subscribeToMessageChannel() { + if (!this.msgChannelSub) { + this.msgChannelSub = subscribe( + this.messageContext, + LOG_ANALYSIS_STATE, + (message) => { + this.setVars(message); + }, + { scope: APPLICATION_SCOPE } + ); + } + } + setVars(message) { + if (message.closeLog !== null) { + this.closeLog = message.closeLog; + } + if (message.fullScreen !== null) { + this.fullScreen = message.fullScreen; + } + } //changes for close and fullscreen buttons get leftSectionStyle() { if (this.closeLog) { + // console.log("LeftWidth: 100%"); + this.leftWidth = 100; return "width: 100%;"; } else if (!this.fullScreen) { + // console.log("LeftWidth: ", this.leftWidth); return `width: ${this.leftWidth}%;`; } + // console.log("LeftWidth: ", 0); + this.leftWidth = 0; return "width: 0%;"; } //changes for close and fullscreen buttons get rightSectionStyle() { - if (this.closeLog) { return 'width: 0%;' } - else if (!this.fullScreen) { return `width: ${100 - this.leftWidth}%;` } - else { return 'width: 100%;' } + if (this.closeLog) { + return "width: 0%;"; + } else if (!this.fullScreen) { + return `width: ${100 - this.leftWidth}%;`; + } + return "width: 100%;"; } startResize(event) { this.isResizing = true; + + if (this.closeLog === null || this.closeLog === true) { + const payload = { closeLog: false }; + publish(this.messageContext, LOG_ANALYSIS_STATE, payload); + } + if (this.fullScreen === null || this.fullScreen === true) { + const payload = { fullScreen: false }; + publish(this.messageContext, LOG_ANALYSIS_STATE, payload); + } event.preventDefault(); + // console.log("Resizing Started"); window.addEventListener("mousemove", this.resize.bind(this)); window.addEventListener("mouseup", this.stopResize.bind(this)); } @@ -33,8 +91,11 @@ export default class Splitscreen extends LightningElement { if (!this.isResizing) return; const containerWidth = this.template.querySelector(".split-screen").offsetWidth; + // console.log("Container width: " + containerWidth); + // console.log("Mouse X: " + event.clientX); const newLeftWidth = (event.clientX / containerWidth) * 100; - this.leftWidth = Math.max(10, Math.min(90, newLeftWidth)); + this.leftWidth = Math.max(0, Math.min(100, newLeftWidth)); + // console.log("Left width: " + this.leftWidth + "%"); } stopResize() { diff --git a/force-app/main/default/lwc/detailedLogViewer/detailedLogViewer.js b/force-app/main/default/lwc/detailedLogViewer/detailedLogViewer.js index 5cd797b..84f30d8 100644 --- a/force-app/main/default/lwc/detailedLogViewer/detailedLogViewer.js +++ b/force-app/main/default/lwc/detailedLogViewer/detailedLogViewer.js @@ -11,7 +11,7 @@ import LOG_ANALYSIS_STATE from "@salesforce/messageChannel/Log_Analysis_Viewer_S import { api, LightningElement, wire } from "lwc"; export default class DetailedLogViewer extends LightningElement { - minimize=true + minimize = false; @api idLimitMin; @api idLimitMax; logIdSubs = null; @@ -28,15 +28,16 @@ export default class DetailedLogViewer extends LightningElement { } //changes for fullscreen button - get iconName(){ - return this.minimize ? "utility:new_window" : "utility:minimize_window"; + get iconName() { + return this.minimize ? "utility:minimize_window" : "utility:new_window"; } - fullscreen(){ + fullscreen() { console.log("[detailedLogViewer.js] Going Full Screen"); - this.dispatchEvent(new CustomEvent("fullscreen",{ - detail:{isFullScreen:this.minimize} - })); - this.minimize=!(this.minimize); + this.minimize = !this.minimize; + const payload = { + fullScreen: this.minimize + }; + publish(this.messageContext, LOG_ANALYSIS_STATE, payload); } connectedCallback() { @@ -47,14 +48,17 @@ export default class DetailedLogViewer extends LightningElement { this.logIdSubs = subscribe( this.messageContext, LOG_ANALYSIS_STATE, - (message) => this.setLogId(message), + (message) => this.setVars(message), { scope: APPLICATION_SCOPE } ); } } - setLogId(message) { + setVars(message) { this.logId = message.logId; + if (message.fullScreen !== null) { + this.minimize = message.fullScreen; + } } recheckLimits() { const id = parseInt(this.logId); diff --git a/force-app/main/default/lwc/logAnalysisView/logAnalysisView.html b/force-app/main/default/lwc/logAnalysisView/logAnalysisView.html index 142e44c..220d9f1 100644 --- a/force-app/main/default/lwc/logAnalysisView/logAnalysisView.html +++ b/force-app/main/default/lwc/logAnalysisView/logAnalysisView.html @@ -1,6 +1,6 @@