From c302478282feff2efa5d67dfde6459a1333e2935 Mon Sep 17 00:00:00 2001 From: "Ivan Hrynevytskyi (FE-underwriting)" <83350900+im-ihrynevytskyi@users.noreply.github.com> Date: Tue, 31 May 2022 16:01:22 +0300 Subject: [PATCH] added ability to resize panels (#3092) Co-authored-by: Ivan Hrynevytskyi --- .../activities/flowchart/flowchart.scss | 3 +- .../src/components/designer/panel/panel.scss | 2 +- .../src/components/designer/panel/panel.tsx | 79 ++++++++++++++++--- .../src/components/designer/panel/resize.ts | 49 ++++++++++++ .../workflow-editor/workflow-editor.scss | 16 ++-- 5 files changed, 129 insertions(+), 20 deletions(-) create mode 100644 src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss index 503f5eac1..8d57cfb2c 100644 --- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss +++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss @@ -2,6 +2,7 @@ &.x6-graph-scroller-pannable[data-panning='false'] { cursor: default; } + width: calc(100vw - var(--activity-editor-width) - var(--activity-picker-width)) !important; } .x6-widget-selection-box { @@ -22,4 +23,4 @@ padding-bottom: 12px; border: 2px solid #34D399; box-shadow: none; -} +} \ No newline at end of file diff --git a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss index 294867193..8fa05598d 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss +++ b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss @@ -16,4 +16,4 @@ top: 0; display: none; } -} +} \ No newline at end of file diff --git a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx index 49743824b..5031ea357 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx @@ -1,5 +1,6 @@ -import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core'; -import {PanelPosition, PanelStateChangedArgs} from './models'; +import { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'; +import { PanelPosition, PanelStateChangedArgs } from './models'; +import { applyResize } from './resize'; @Component({ tag: 'elsa-panel', @@ -9,10 +10,53 @@ export class Panel { @Prop() position: PanelPosition = PanelPosition.Left; @Event() expandedStateChanged: EventEmitter; @State() isExpanded: boolean = true; + dragging = false; private onToggleClick = () => { + if (this.isExpanded) { + applyResize({ position: this.position, isHide: true }); + } else { + applyResize({ position: this.position, isDefault: true }); + } this.isExpanded = !this.isExpanded; - this.expandedStateChanged.emit({expanded: this.isExpanded}); + this.expandedStateChanged.emit({ expanded: this.isExpanded }); + }; + + onBodyMouseUp = () => { + if (this.dragging) { + this.clearJSEvents(); + } + }; + + componentWillLoad() { + document.addEventListener('mouseup', this.onBodyMouseUp); + applyResize({ position: this.position, isDefault: true }); + } + + disconnectedCallback() { + document.removeEventListener('mouseup', this.onBodyMouseUp); + } + + clearJSEvents() { + const body = document.body; + this.dragging = false; + body.removeEventListener('mousemove', this.resize); + } + + resize = (e: MouseEvent) => { + if (this.position === PanelPosition.Right) { + applyResize({ position: PanelPosition.Right, width: document.body.clientWidth - e.pageX }); + } + if (this.position === PanelPosition.Left) { + applyResize({ position: PanelPosition.Left, width: e.pageX }); + } + }; + + onDragBarMouseDown = (e: MouseEvent) => { + e.preventDefault(); + const body = document.body; + this.dragging = true; + body.addEventListener('mousemove', this.resize); }; render() { @@ -34,19 +78,32 @@ export class Panel { const toggleCssClass = toggleClassMap[position]; - return ( - + const dragBarClass = position === PanelPosition.Left ? 'right-0' : 'left-0'; + return ( + +
- +
this.onToggleClick()}> - - - + + +
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts b/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts new file mode 100644 index 000000000..646136dde --- /dev/null +++ b/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts @@ -0,0 +1,49 @@ +import { PanelPosition } from './models'; + +type ApplyResizeParams = { + position: PanelPosition; + isDefault?: boolean; + isHide?: boolean; + width?: number; +}; + +const positionToLocalStorage = { + [PanelPosition.Right]: 'LS/rightPanelWidth', + [PanelPosition.Left]: 'LS/leftPanelWidth', +}; + +const positionToCssVariable = { + [PanelPosition.Right]: '--activity-editor-width', + [PanelPosition.Left]: '--activity-picker-width', +}; + +const positionToDefaultWidth = { + [PanelPosition.Right]: 580, + [PanelPosition.Left]: 300, +}; + +function getPanelDefaultWidth(position: PanelPosition) { + return localStorage.getItem(positionToLocalStorage[position]) || positionToDefaultWidth[position]; +} + +function updatePanelDefaultWidth(position: PanelPosition, width: number) { + return localStorage.setItem(positionToLocalStorage[position], width.toString()); +} + +export function applyResize({ position, isDefault, isHide, width }: ApplyResizeParams) { + const root = document.querySelector(':root'); + + if (isHide) { + root.style.setProperty(positionToCssVariable[position], '0'); + return; + } + + if (isDefault) { + root.style.setProperty(positionToCssVariable[position], `${getPanelDefaultWidth(position)}px`); + return; + } + + root.style.setProperty(positionToCssVariable[position], `${width}px`); + updatePanelDefaultWidth(position, width); + return; +} diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-editor/workflow-editor.scss b/src/designer/elsa-workflows-designer/src/components/designer/workflow-editor/workflow-editor.scss index 08b2ec3d3..bb7b3b924 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-editor/workflow-editor.scss +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-editor/workflow-editor.scss @@ -1,19 +1,21 @@ -$activity-picker-width: 300px; -$activity-editor-width: 580px; +:root { + --activity-editor-width: 580px; + --activity-picker-width: 300px; +} elsa-canvas { - left: $activity-picker-width; + left: var(--activity-picker-width); top: 0; - right: $activity-editor-width; + right: var(--activity-editor-width); bottom: 0; } elsa-panel.panel-state-expanded.elsa-activity-picker-container { - width: $activity-picker-width; + width: var(--activity-picker-width); } elsa-panel.panel-state-expanded.elsa-activity-editor-container { - width: $activity-editor-width; + width: var(--activity-editor-width); right: 0; left: unset; } @@ -38,4 +40,4 @@ elsa-panel.panel-state-expanded.elsa-activity-editor-container { elsa-canvas { right: 0; } -} +} \ No newline at end of file