From 434cb3b5e419489c615e84523709209fb37b7eff Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 19 Oct 2022 18:09:52 +0200 Subject: [PATCH 01/14] debounce clicks --- packages/editor-ui/src/components/Node.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 1b29d3afeb28d..c7ffa28917876 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -112,6 +112,7 @@ import mixins from 'vue-typed-mixins'; import { get } from 'lodash'; import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers'; import { INodeUi, XYPosition } from '@/Interface'; +import { debounceHelper } from './mixins/debounce'; export default mixins( externalHooks, @@ -119,6 +120,7 @@ export default mixins( nodeHelpers, workflowHelpers, pinData, + debounceHelper, ).extend({ name: 'Node', components: { @@ -426,6 +428,18 @@ export default mixins( }); }, + onClick(event: MouseEvent, doubleClick = false) { + this.callDebounced('onClickDebounced', { deounceTime: 50, trailing: true }, event, doubleClick); + }, + + onClickDebounced(event: MouseEvent, doubleClick: boolean) { + if (doubleClick) { + this.setNodeActive(); + } else { + this.mouseLeftClick(event); + } + }, + setNodeActive () { this.$store.commit('setActiveNode', this.data.name); this.pinDataDiscoveryTooltipVisible = false; From 5b8a24b747817a9cb9ab8caa792437aa1e81df7e Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 19 Oct 2022 18:27:29 +0200 Subject: [PATCH 02/14] debounce correctly --- packages/editor-ui/src/components/Node.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index c7ffa28917876..6e11a506be5de 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -2,7 +2,7 @@
-
+
@@ -428,12 +428,12 @@ export default mixins( }); }, - onClick(event: MouseEvent, doubleClick = false) { - this.callDebounced('onClickDebounced', { deounceTime: 50, trailing: true }, event, doubleClick); + onClick(event: MouseEvent) { + this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: true }, event); }, - onClickDebounced(event: MouseEvent, doubleClick: boolean) { - if (doubleClick) { + onClickDebounced(event: MouseEvent) { + if (event.detail === 2) { this.setNodeActive(); } else { this.mouseLeftClick(event); From 5d5c78270ae1c424961031a2a1d44c76fc542733 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 19 Oct 2022 18:44:16 +0200 Subject: [PATCH 03/14] debounce resize --- packages/editor-ui/src/components/NDVDraggablePanels.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue index c19751ac6720c..b23f251e6190c 100644 --- a/packages/editor-ui/src/components/NDVDraggablePanels.vue +++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue @@ -47,6 +47,8 @@ import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH, } from '@/constants'; +import mixins from 'vue-typed-mixins'; +import { debounceHelper } from './mixins/debounce'; const SIDE_MARGIN = 24; @@ -63,7 +65,7 @@ const initialMainPanelWidth:{ [key: string]: number } = { wide: MAIN_NODE_PANEL_WIDTH * 2, }; -export default Vue.extend({ +export default mixins(debounceHelper).extend({ name: 'NDVDraggablePanels', components: { PanelDragButton, @@ -295,6 +297,9 @@ export default Vue.extend({ onResizeEnd() { this.storePositionData(); }, + onResizeDebounced(data: { direction: string, x: number, width: number}) { + this.callDebounced('onResize', { debounceTime: 50, trailing: true }, data); + }, onResize({ direction, x, width }: { direction: string, x: number, width: number}) { const relativeDistance = this.pxToRelativeWidth(x); const relativeWidth = this.pxToRelativeWidth(width); From e5f83efa0fad3132a50d972277de8e7a80e8f01a Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 19 Oct 2022 18:51:45 +0200 Subject: [PATCH 04/14] if initialized avoid --- .../editor-ui/src/components/NDVDraggablePanels.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue index b23f251e6190c..7b346d813fab1 100644 --- a/packages/editor-ui/src/components/NDVDraggablePanels.vue +++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue @@ -12,7 +12,7 @@ :width="relativeWidthToPx(mainPanelDimensions.relativeWidth)" :minWidth="MIN_PANEL_WIDTH" :gridSize="20" - @resize="onResize" + @resize="onResizeDebounced" @resizestart="onResizeStart" @resizeend="onResizeEnd" :supportedDirections="supportedResizeDirections" @@ -85,11 +85,12 @@ export default mixins(debounceHelper).extend({ default: () => ({}), }, }, - data(): { windowWidth: number, isDragging: boolean, MIN_PANEL_WIDTH: number} { + data(): { windowWidth: number, isDragging: boolean, MIN_PANEL_WIDTH: number, initialized: boolean} { return { windowWidth: 1, isDragging: false, MIN_PANEL_WIDTH, + initialized: false, }; }, mounted() { @@ -107,6 +108,9 @@ export default mixins(debounceHelper).extend({ window.addEventListener('resize', this.setTotalWidth); this.$emit('init', { position: this.mainPanelDimensions.relativeLeft }); + setTimeout(() => { + this.initialized = true; + }, 0); }, destroyed() { window.removeEventListener('resize', this.setTotalWidth); @@ -298,7 +302,9 @@ export default mixins(debounceHelper).extend({ this.storePositionData(); }, onResizeDebounced(data: { direction: string, x: number, width: number}) { - this.callDebounced('onResize', { debounceTime: 50, trailing: true }, data); + if (this.initialized) { + this.callDebounced('onResize', { debounceTime: 15, trailing: true }, data); + } }, onResize({ direction, x, width }: { direction: string, x: number, width: number}) { const relativeDistance = this.pxToRelativeWidth(x); From ec7168582b11ac037e735d240976ec6eb6e0e622 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 19 Oct 2022 18:59:05 +0200 Subject: [PATCH 05/14] set watcher fixes --- .../editor-ui/src/components/NodeDetailsView.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index 0047f992d630c..22d372738e063 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -352,7 +352,9 @@ export default mixins( this.avgOutputRowHeight = 0; this.avgInputRowHeight = 0; - this.$store.commit('ui/setNDVSessionId'); + setTimeout(() => { + this.$store.commit('ui/setNDVSessionId'); + }, 0); this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()), }); @@ -397,10 +399,14 @@ export default mixins( this.runInputIndex = -1; }, inputNodeName(nodeName: string | undefined) { - this.$store.commit('ui/setInputNodeName', nodeName); + setTimeout(() => { + this.$store.commit('ui/setInputNodeName', nodeName); + }, 0); }, inputRun() { - this.$store.commit('ui/setInputRunIndex', this.inputRun); + setTimeout(() => { + this.$store.commit('ui/setInputRunIndex', this.inputRun); + }, 0); }, }, methods: { From e73d072979bbf479ec65068473b1577ed677d113 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 09:46:02 +0200 Subject: [PATCH 06/14] add deboucne for setting values --- packages/editor-ui/src/components/ParameterInput.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index ea29864a8508e..3f3240349ba24 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -73,7 +73,7 @@ :mode="node.parameters.mode" :jsCode="node.parameters.jsCode" :isReadOnly="isReadOnly" - @valueChanged="valueChanged" + @valueChanged="valueChangedDebounced" />
@@ -336,12 +336,14 @@ import { CUSTOM_API_CALL_KEY } from '@/constants'; import { mapGetters } from 'vuex'; import { CODE_NODE_TYPE } from '@/constants'; import { PropType } from 'vue'; +import { debounceHelper } from './mixins/debounce'; export default mixins( externalHooks, nodeHelpers, showMessage, workflowHelpers, + debounceHelper, ) .extend({ name: 'parameter-input', @@ -922,6 +924,9 @@ export default mixins( this.$emit('textInput', parameterData); }, + valueChangedDebounced (value: NodeParameterValueType | {} | Date) { + this.callDebounced('valueChanged', { debounceTime: 50 }, value); + }, valueChanged (value: NodeParameterValueType | {} | Date) { if (this.parameter.name === 'nodeCredentialType') { this.activeCredentialType = value as string; From 7eaa1ac38c8149d5be581eeb33e1a594e1f6f7d6 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 09:50:39 +0200 Subject: [PATCH 07/14] increase debounce --- packages/editor-ui/src/components/ParameterInput.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 3f3240349ba24..ddbe77b00b11c 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -925,7 +925,7 @@ export default mixins( this.$emit('textInput', parameterData); }, valueChangedDebounced (value: NodeParameterValueType | {} | Date) { - this.callDebounced('valueChanged', { debounceTime: 50 }, value); + this.callDebounced('valueChanged', { debounceTime: 100 }, value); }, valueChanged (value: NodeParameterValueType | {} | Date) { if (this.parameter.name === 'nodeCredentialType') { From 3a46e50c17a07163b7c6a15e2f6f77d0c5032c83 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 10:04:20 +0200 Subject: [PATCH 08/14] reset workspace for memory issues --- packages/editor-ui/src/views/NodeView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 9c6508d028820..8c4e813a75729 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -3041,6 +3041,7 @@ export default mixins( resetWorkspace() { // Reset nodes this.deleteEveryEndpoint(); + this.instance.reset(); if (this.executionWaitingForWebhook === true) { // Make sure that if there is a waiting test-webhook that From 72a00e438f823d4ba9c73f88d253b2b1d8f0fcaa Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 15:09:22 +0200 Subject: [PATCH 09/14] address comment --- packages/editor-ui/src/components/Node.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 6e11a506be5de..3dc5ed04278c9 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -433,7 +433,8 @@ export default mixins( }, onClickDebounced(event: MouseEvent) { - if (event.detail === 2) { + const isDoubleClick = event.detail > 2; + if (isDoubleClick) { this.setNodeActive(); } else { this.mouseLeftClick(event); From a462b68a79e9d3914c9ca0be1641b87ddad859e0 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 15:10:13 +0200 Subject: [PATCH 10/14] decrease debounce time --- packages/editor-ui/src/components/NDVDraggablePanels.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue index 7b346d813fab1..83205a87c718e 100644 --- a/packages/editor-ui/src/components/NDVDraggablePanels.vue +++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue @@ -303,7 +303,7 @@ export default mixins(debounceHelper).extend({ }, onResizeDebounced(data: { direction: string, x: number, width: number}) { if (this.initialized) { - this.callDebounced('onResize', { debounceTime: 15, trailing: true }, data); + this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data); } }, onResize({ direction, x, width }: { direction: string, x: number, width: number}) { From cc9d191577f6b2cd69a26d800eca5ca259d2ebea Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 15:14:48 +0200 Subject: [PATCH 11/14] decrease debounce time --- packages/editor-ui/src/components/Node.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 3dc5ed04278c9..7a556052f7bae 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -429,7 +429,7 @@ export default mixins( }, onClick(event: MouseEvent) { - this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: true }, event); + this.callDebounced('onClickDebounced', { debounceTime: 250, trailing: true }, event); }, onClickDebounced(event: MouseEvent) { From f42e1594922c6f211e0dd42bb5d59d3b5d5426c6 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 15:20:12 +0200 Subject: [PATCH 12/14] clean up --- packages/editor-ui/src/components/Node.vue | 2 +- packages/editor-ui/src/views/NodeView.vue | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 7a556052f7bae..87d05cfa7d173 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -429,7 +429,7 @@ export default mixins( }, onClick(event: MouseEvent) { - this.callDebounced('onClickDebounced', { debounceTime: 250, trailing: true }, event); + this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: false }, event); }, onClickDebounced(event: MouseEvent) { diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 8c4e813a75729..9c6508d028820 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -3041,7 +3041,6 @@ export default mixins( resetWorkspace() { // Reset nodes this.deleteEveryEndpoint(); - this.instance.reset(); if (this.executionWaitingForWebhook === true) { // Make sure that if there is a waiting test-webhook that From e5aacaddf24da0a2adef98d4be1fba60b505b868 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 15:29:56 +0200 Subject: [PATCH 13/14] revert back to trailing --- packages/editor-ui/src/components/Node.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 87d05cfa7d173..3dc5ed04278c9 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -429,7 +429,7 @@ export default mixins( }, onClick(event: MouseEvent) { - this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: false }, event); + this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: true }, event); }, onClickDebounced(event: MouseEvent) { From f0293c70964497340780573636afd4cc688c25d9 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Thu, 20 Oct 2022 15:34:20 +0200 Subject: [PATCH 14/14] support dbl --- packages/editor-ui/src/components/Node.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 3dc5ed04278c9..bc267b452c222 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -433,7 +433,7 @@ export default mixins( }, onClickDebounced(event: MouseEvent) { - const isDoubleClick = event.detail > 2; + const isDoubleClick = event.detail >= 2; if (isDoubleClick) { this.setNodeActive(); } else {