diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue index c19751ac6720c..83205a87c718e 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" @@ -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, @@ -83,11 +85,12 @@ export default Vue.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() { @@ -105,6 +108,9 @@ export default Vue.extend({ window.addEventListener('resize', this.setTotalWidth); this.$emit('init', { position: this.mainPanelDimensions.relativeLeft }); + setTimeout(() => { + this.initialized = true; + }, 0); }, destroyed() { window.removeEventListener('resize', this.setTotalWidth); @@ -295,6 +301,11 @@ export default Vue.extend({ onResizeEnd() { this.storePositionData(); }, + onResizeDebounced(data: { direction: string, x: number, width: number}) { + if (this.initialized) { + this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data); + } + }, onResize({ direction, x, width }: { direction: string, x: number, width: number}) { const relativeDistance = this.pxToRelativeWidth(x); const relativeWidth = this.pxToRelativeWidth(width); diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 1b29d3afeb28d..bc267b452c222 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -2,7 +2,7 @@
-
+
@@ -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,19 @@ export default mixins( }); }, + onClick(event: MouseEvent) { + this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: true }, event); + }, + + onClickDebounced(event: MouseEvent) { + const isDoubleClick = event.detail >= 2; + if (isDoubleClick) { + this.setNodeActive(); + } else { + this.mouseLeftClick(event); + } + }, + setNodeActive () { this.$store.commit('setActiveNode', this.data.name); this.pinDataDiscoveryTooltipVisible = false; 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: { diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index ea29864a8508e..ddbe77b00b11c 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: 100 }, value); + }, valueChanged (value: NodeParameterValueType | {} | Date) { if (this.parameter.name === 'nodeCredentialType') { this.activeCredentialType = value as string;