fix(editor): fix performance issues when opening node or editing code node with a lot of data (#4388)

* debounce clicks

* debounce correctly

* debounce resize

* if initialized avoid

* set watcher fixes

* add deboucne for setting values

* increase debounce

* reset workspace for memory issues

* address comment

* decrease debounce time

* decrease debounce time

* clean up

* revert back to trailing

* support dbl
This commit is contained in:
Mutasem Aldmour
2022-10-20 15:45:58 +02:00
committed by GitHub
parent e83b9bd983
commit 356a42a187
4 changed files with 45 additions and 8 deletions

View File

@@ -2,7 +2,7 @@
<div class="node-wrapper" :style="nodePosition" :id="nodeId">
<div class="select-background" v-show="isSelected"></div>
<div :class="{'node-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}" :data-name="data.name" :ref="data.name">
<div :class="nodeClass" :style="nodeStyle" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd">
<div :class="nodeClass" :style="nodeStyle" @click.left="onClick" v-touch:start="touchStart" v-touch:end="touchEnd">
<div v-if="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
<div v-if="hasIssues" class="node-issues">
<n8n-tooltip placement="bottom" >
@@ -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;