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;