mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
feat(editor): Migrate Design System and Editor UI to Vue 3 (#6476)
* feat: remove vue-fragment (no-changelog) * feat: partial design-system migration * feat: migrate info-accordion and info-tip components * feat: migrate several components to vue 3 * feat: migrated several components * feat: migrate several components * feat: migrate several components * feat: migrate several components * feat: re-exported all design system components * fix: fix design for popper components * fix: editor kind of working, lots of issues to fix * fix: fix several vue 3 migration issues * fix: replace @change with @update:modelValue in several places * fix: fix translation linking * fix: fix inline-edit input * fix: fix ndv and dialog design * fix: update parameter input event bindings * fix: rename deprecated lifecycle methods * fix: fix json view mapping * build: update lock file * fix(editor): revisit last conflict with master and fix issues * fix(editor): revisit last conflict with master and fix issues * fix: fix expression editor bug causing code mirror to no longer be reactive * fix: fix resource locator bug * fix: fix vue-agile integration * fix: remove global import for vue-agile * fix: replace element-plus buttons with n8n-buttons everywhere * fix(editor): Fix various element-plus styles (#6571) * fix(editor): Fix various element-plus styles Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Remove debugging code Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Address PR comments Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): Fix loading in production mode [Vue 3] (#6578) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): First round of e2e tests fixes with Vue 3 (#6579) * fix(editor): Fix broken smoke and workflow list e2e tests * ✔️ Fix failing canvas action tests. Updating some selectors used in credentials and workflow tests * feat: add vue 3 eslint rules and fix issues * fix: fix tags-dropdown * fix: fix white-space issues caused by i18n-t * fix: rename non-generic click events * fix: fix search in resources list layout * fix: fix datatable paginator * fix: fix popper select caret and dropdown size * fix: add width to action-dropdown * fix: fix workflow settings icon not being hidden * fix: refactor newly added code * fix: fix merge issue * fix: fix ndv credentials watcher * fix: fix workflow saving and grabber notch * fix: fix nodes list panel transition * fix: fix node title visibility * fix: fix data unpinning * fix: fix value access * fix: show input panel only if trigger panel enabled or not trigger node * fix: fix tags dropdown and executions status spcing * fix(editor): Prevent execution list to load back when leaving the route (#6697) fix(editor): prevent execution list to load back when leaving the route * fix: fix drawer visibility * fix: fix expression toggle padding * fix: fix expressions editor styling * chore: prepare for testing * fix: fix styling for el-button without patching * test: fix unit tests in design-system * test: fix most unit tests * fix: remove import cycle. * fix: fix personalization modal tests * fix further resource mapper test adjustments * fix: fix multiple tests and n8n-route attr duplication * fix: fix source control tets * fix: fixed remaining unit tests * fix: fix workflows and credentials e2e tests * fix: fix localizeNodeNames * fix: update ndv e2e tests * fix: fix popper left placement arrow * fix: fix 5-ndv e2e tests * fix: fix 6-code-node e2e tests * fix(editor): Drop click outside directive from NodeCreator (#6716) * fix(editor): Drop click outside directive from NodeCreator * fix(editor): make sure mouseup outside is unbound at least before the component is unmounted * fix: fix 10-settings-log-streaming e2e tests * fix: fix node redrawing * fix: fix tooltip buttons styling * fix: fix varous e2e suites * fix: fix 15-scheduler-node e2e suite * fix: fix route watcher * fix: fixed param name update and credential edit * feat: update event names * refactor: Remove deprecated `$data` (#6576) Co-authored-by: Alex Grozav <alex@grozav.com> * fix: fix 17-sharing e2e suite * fix: fix tags dropdown * fix: fix tags manager * fix(editor): move :deep selectors to a separate scoped style block * fix: fix sticky component and inline text edit * fix: update e2e tests * fix: remove button override references * fix(editor): Adjust spacing in templates for Vue 3 (#6744) * fix(editor): Adjust spacing in templates * fix: Undo unneeded change * fix: Undo unneeded change * fix(editor): Adjust NDV height for Vue 3 (#6742) fix(editor): Adjust NDV height * fix(editor): Restore collapsed sidebar items for Vue 3 (#6743) fix(editor): Restore collapsed sidebar items * fix: fix linting issues * fix: fix design-system deps * fix: post-merge fixes * fix: update tests * fix: increase timeout for executionslist tets * chore: fix linting issue * fix: fix 14-mapping e2e tests in ci * fix: re-enable tests * fix: fix workflow duplication e2e tests after tags update * fix(editor): Change component prop to be typed * fix: fix tags dropdown in duplicate wf modal * fix: fix focus behaviour in tags selector * fix: fix tag creation * fix: fix log streaming e2e race condition * fix(editor): Fix Vue 3 linting issues (#6748) * fix(editor): Fix Vue 3 linting issues Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix MainSidebar linter issues * revert pnpm lock * update pnpm lock file --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Some css fixes for vue3 branch (#6749) * ✨ Fixing filter button height * ✨ Update input modal button position * ✨ Updating tags styling * ✨ Fix event logging settings spacing * 👕 Fixing lint errors * fix: fix linting issues * Revert to `// eslint-disable-next-line @typescript-eslint/no-misused-promises` disabling of mixins init Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix css issue * fix(editor): Lint fix * fix(editor): Fix settings initialisation (#6750) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix initial settings loading * fix: replace realClick with click force * fix: fix randomly failing mapping e2e tests * fix(editor): Fix menu item event handling * fix: fix resource filters dropdown events (#6752) * fix: fix resource filters dropdown events * fix: remove teleported:false * fix: fix event selection event naming (#6753) * fix: removed console.log (#6754) * fix: rever await nextTick changes * fix: redo linting changes * fix(editor): Redraw node connections if adding more than one node to canvas (#6755) * fix(editor): Redraw node connections if adding more than one node to canvas Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Update position before connection two nodes * Lint fix --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Fix `ResourceMapper` unit tests (#6758) * ✔️ Fix matching columns test * ✔️ Fix multiple matching columns test * ✔️ Removing `skip` from the last test * fix: Allow pasting a big workflow (#6760) * fix: pasting a big workflow * chore: update comment * refactor: move try/catch to function * refactor: move try/catch to function * fix(editor): Fix modal layer width * fix: fix position changes * fix: undo it.only * fix: make undo/redo multiple steps more verbose * fix: Fix value survey styles (#6764) * fix: fix value survey styles * fix: lint * Revert "fix: lint" 72869c431f1448861df021be041b61c62f1e3118 * fix: lint * fix(editor): Fix collapsed sub menu * fix: Fix drawer animation (#6767) fix: drawer animation * fix(editor): Fix source control buttons (#6769) * fix(editor): Fix App loading & auth (#6768) * fix(editor): Fix App loading & auth Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Await promises Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Fix eslint error Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Csaba Tuncsik <csaba@n8n.io> Co-authored-by: OlegIvaniv <me@olegivaniv.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
Alex Grozav
@@ -41,49 +41,45 @@
|
||||
@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
|
||||
data-test-id="canvas-add-button"
|
||||
/>
|
||||
<template v-for="nodeData in nodes">
|
||||
<node
|
||||
v-if="nodeData.type !== STICKY_NODE_TYPE"
|
||||
@duplicateNode="duplicateNode"
|
||||
@deselectAllNodes="deselectAllNodes"
|
||||
@deselectNode="nodeDeselectedByName"
|
||||
@nodeSelected="nodeSelectedByName"
|
||||
@removeNode="(name) => removeNode(name, true)"
|
||||
@runWorkflow="onRunNode"
|
||||
@moved="onNodeMoved"
|
||||
@run="onNodeRun"
|
||||
:key="`${nodeData.id}_node`"
|
||||
:name="nodeData.name"
|
||||
:isReadOnly="isReadOnlyRoute || readOnlyEnv"
|
||||
:instance="instance"
|
||||
:isActive="!!activeNode && activeNode.name === nodeData.name"
|
||||
:hideActions="pullConnActive"
|
||||
:isProductionExecutionPreview="isProductionExecutionPreview"
|
||||
>
|
||||
<template #custom-tooltip>
|
||||
<span
|
||||
v-text="
|
||||
$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</node>
|
||||
<sticky
|
||||
v-else
|
||||
@deselectAllNodes="deselectAllNodes"
|
||||
@deselectNode="nodeDeselectedByName"
|
||||
@nodeSelected="nodeSelectedByName"
|
||||
@removeNode="(name) => removeNode(name, true)"
|
||||
:key="`${nodeData.id}_sticky`"
|
||||
:name="nodeData.name"
|
||||
:isReadOnly="isReadOnlyRoute || readOnlyEnv"
|
||||
:instance="instance"
|
||||
:isActive="!!activeNode && activeNode.name === nodeData.name"
|
||||
:nodeViewScale="nodeViewScale"
|
||||
:gridSize="GRID_SIZE"
|
||||
:hideActions="pullConnActive"
|
||||
/>
|
||||
</template>
|
||||
<node
|
||||
v-for="nodeData in nodesToRender"
|
||||
@duplicateNode="duplicateNode"
|
||||
@deselectAllNodes="deselectAllNodes"
|
||||
@deselectNode="nodeDeselectedByName"
|
||||
@nodeSelected="nodeSelectedByName"
|
||||
@removeNode="(name) => removeNode(name, true)"
|
||||
@runWorkflow="onRunNode"
|
||||
@moved="onNodeMoved"
|
||||
@run="onNodeRun"
|
||||
:key="`${nodeData.id}_node`"
|
||||
:name="nodeData.name"
|
||||
:isReadOnly="isReadOnlyRoute || readOnlyEnv"
|
||||
:instance="instance"
|
||||
:isActive="!!activeNode && activeNode.name === nodeData.name"
|
||||
:hideActions="pullConnActive"
|
||||
:isProductionExecutionPreview="isProductionExecutionPreview"
|
||||
>
|
||||
<template #custom-tooltip>
|
||||
<span
|
||||
v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
|
||||
/>
|
||||
</template>
|
||||
</node>
|
||||
<sticky
|
||||
v-for="stickyData in stickiesToRender"
|
||||
@deselectAllNodes="deselectAllNodes"
|
||||
@deselectNode="nodeDeselectedByName"
|
||||
@nodeSelected="nodeSelectedByName"
|
||||
@removeNode="(name) => removeNode(name, true)"
|
||||
:key="`${stickyData.id}_sticky`"
|
||||
:name="stickyData.name"
|
||||
:isReadOnly="isReadOnlyRoute || readOnlyEnv"
|
||||
:instance="instance"
|
||||
:isActive="!!activeNode && activeNode.name === stickyData.name"
|
||||
:nodeViewScale="nodeViewScale"
|
||||
:gridSize="GRID_SIZE"
|
||||
:hideActions="pullConnActive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<node-details-view
|
||||
@@ -94,14 +90,18 @@
|
||||
@stopExecution="stopExecution"
|
||||
@saveKeyboardShortcut="onSaveKeyboardShortcut"
|
||||
/>
|
||||
<node-creation
|
||||
v-if="!isReadOnlyRoute && !readOnlyEnv"
|
||||
:create-node-active="createNodeActive"
|
||||
:node-view-scale="nodeViewScale"
|
||||
@toggleNodeCreator="onToggleNodeCreator"
|
||||
@addNode="onAddNode"
|
||||
/>
|
||||
<canvas-controls />
|
||||
<Suspense>
|
||||
<NodeCreation
|
||||
v-if="!isReadOnlyRoute && !readOnlyEnv"
|
||||
:create-node-active="createNodeActive"
|
||||
:node-view-scale="nodeViewScale"
|
||||
@toggleNodeCreator="onToggleNodeCreator"
|
||||
@addNode="onAddNode"
|
||||
/>
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<CanvasControls />
|
||||
</Suspense>
|
||||
<div class="workflow-execute-wrapper" v-if="!isReadOnlyRoute && !readOnlyEnv">
|
||||
<span
|
||||
@mouseenter="showTriggerMissingToltip(true)"
|
||||
@@ -168,7 +168,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, { defineComponent } from 'vue';
|
||||
import { defineAsyncComponent, defineComponent, nextTick } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
|
||||
import type {
|
||||
@@ -185,7 +185,7 @@ import {
|
||||
EVENT_CONNECTION_MOVED,
|
||||
INTERCEPT_BEFORE_DROP,
|
||||
} from '@jsplumb/core';
|
||||
import type { MessageBoxInputData } from 'element-ui/types/message-box';
|
||||
import type { MessageBoxInputData } from 'element-plus';
|
||||
|
||||
import {
|
||||
FIRST_ONBOARDING_PROMPT_TIMEOUT,
|
||||
@@ -315,7 +315,7 @@ import {
|
||||
N8nPlusEndpointType,
|
||||
EVENT_PLUS_ENDPOINT_CLICK,
|
||||
} from '@/plugins/endpoints/N8nPlusEndpointType';
|
||||
import type { ElNotificationComponent } from 'element-ui/types/notification';
|
||||
import type { ElNotification } from 'element-plus';
|
||||
import { sourceControlEventBus } from '@/event-bus/source-control';
|
||||
|
||||
interface AddNodeOptions {
|
||||
@@ -323,8 +323,8 @@ interface AddNodeOptions {
|
||||
dragAndDrop?: boolean;
|
||||
}
|
||||
|
||||
const NodeCreation = async () => import('@/components/Node/NodeCreation.vue');
|
||||
const CanvasControls = async () => import('@/components/CanvasControls.vue');
|
||||
const NodeCreation = defineAsyncComponent(async () => import('@/components/Node/NodeCreation.vue'));
|
||||
const CanvasControls = defineAsyncComponent(async () => import('@/components/CanvasControls.vue'));
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NodeView',
|
||||
@@ -346,14 +346,17 @@ export default defineComponent({
|
||||
CanvasControls,
|
||||
},
|
||||
setup(props) {
|
||||
const locale = useI18n();
|
||||
|
||||
return {
|
||||
locale,
|
||||
...useCanvasMouseSelect(),
|
||||
...useGlobalLinkActions(),
|
||||
...useTitleChange(),
|
||||
...useToast(),
|
||||
...useMessage(),
|
||||
...useUniqueNodeName(),
|
||||
...useI18n(),
|
||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
...workflowRun.setup?.(props),
|
||||
};
|
||||
},
|
||||
@@ -372,6 +375,7 @@ export default defineComponent({
|
||||
from.params.name !== to.params.name &&
|
||||
// Both 'new' and __EMPTY__ are new workflow names, so ignore them when detecting if wf changed
|
||||
!(from.params.name === 'new' && this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID) &&
|
||||
!(from.name === VIEWS.NEW_WORKFLOW) &&
|
||||
// Also ignore if workflow id changes when saving new workflow
|
||||
to.params.action !== 'workflowSave';
|
||||
const isOpeningTemplate = to.name === VIEWS.TEMPLATE_IMPORT;
|
||||
@@ -453,7 +457,7 @@ export default defineComponent({
|
||||
if (from.name === VIEWS.NEW_WORKFLOW) {
|
||||
// Replace the current route with the new workflow route
|
||||
// before navigating to the new route when saving new workflow.
|
||||
this.$router.replace(
|
||||
await this.$router.replace(
|
||||
{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
|
||||
() => {
|
||||
// We can't use next() here since vue-router
|
||||
@@ -494,7 +498,7 @@ export default defineComponent({
|
||||
useHistoryStore,
|
||||
),
|
||||
nativelyNumberSuffixedDefaults(): string[] {
|
||||
return this.rootStore.nativelyNumberSuffixedDefaults;
|
||||
return this.nodeTypesStore.nativelyNumberSuffixedDefaults;
|
||||
},
|
||||
currentUser(): IUser | null {
|
||||
return this.usersStore.currentUser;
|
||||
@@ -519,6 +523,12 @@ export default defineComponent({
|
||||
nodes(): INodeUi[] {
|
||||
return this.workflowsStore.allNodes;
|
||||
},
|
||||
nodesToRender(): INodeUi[] {
|
||||
return this.workflowsStore.allNodes.filter((node) => node.type !== STICKY_NODE_TYPE);
|
||||
},
|
||||
stickiesToRender(): INodeUi[] {
|
||||
return this.workflowsStore.allNodes.filter((node) => node.type === STICKY_NODE_TYPE);
|
||||
},
|
||||
runButtonText(): string {
|
||||
if (!this.workflowRunning) {
|
||||
return this.$locale.baseText('nodeView.runButtonText.executeWorkflow');
|
||||
@@ -624,7 +634,7 @@ export default defineComponent({
|
||||
isProductionExecutionPreview: false,
|
||||
enterTimer: undefined as undefined | ReturnType<typeof setTimeout>,
|
||||
exitTimer: undefined as undefined | ReturnType<typeof setTimeout>,
|
||||
readOnlyNotification: null as null | ElNotificationComponent,
|
||||
readOnlyNotification: null as null | ElNotification,
|
||||
// jsplumb automatically deletes all loose connections which is in turn recorded
|
||||
// in undo history as a user action.
|
||||
// This should prevent automatically removed connections from populating undo stack
|
||||
@@ -632,14 +642,6 @@ export default defineComponent({
|
||||
NODE_CREATOR_OPEN_SOURCES,
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.resetWorkspace();
|
||||
// Make sure the event listeners get removed again else we
|
||||
// could add up with them registered multiple times
|
||||
document.removeEventListener('keydown', this.keyDown);
|
||||
document.removeEventListener('keyup', this.keyUp);
|
||||
this.unregisterCustomAction('showNodeCreator');
|
||||
},
|
||||
methods: {
|
||||
editAllowedCheck(): boolean {
|
||||
if (this.readOnlyNotification?.visible) {
|
||||
@@ -779,10 +781,9 @@ export default defineComponent({
|
||||
deepCopy(data.workflowData.nodes),
|
||||
deepCopy(data.workflowData.connections),
|
||||
);
|
||||
this.$nextTick(() => {
|
||||
this.canvasStore.zoomToFit();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
});
|
||||
await this.$nextTick();
|
||||
this.canvasStore.zoomToFit();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
void this.$externalHooks().run('execution.open', {
|
||||
workflowId: data.workflowData.id,
|
||||
workflowName: data.workflowData.name,
|
||||
@@ -850,9 +851,8 @@ export default defineComponent({
|
||||
this.workflowsStore.setWorkflowPinData(data.workflow.pinData);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.canvasStore.zoomToFit();
|
||||
});
|
||||
await this.$nextTick();
|
||||
this.canvasStore.zoomToFit();
|
||||
},
|
||||
async openWorkflowTemplate(templateId: string) {
|
||||
this.startLoading();
|
||||
@@ -876,7 +876,7 @@ export default defineComponent({
|
||||
}
|
||||
} catch (error) {
|
||||
this.showError(error, this.$locale.baseText('nodeView.couldntImportWorkflow'));
|
||||
void this.$router.replace({ name: VIEWS.NEW_WORKFLOW });
|
||||
await this.$router.replace({ name: VIEWS.NEW_WORKFLOW });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -889,14 +889,13 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
this.blankRedirect = true;
|
||||
void this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
|
||||
await this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
|
||||
|
||||
await this.addNodes(data.workflow.nodes, data.workflow.connections);
|
||||
this.workflowData = (await this.workflowsStore.getNewWorkflowData(data.name)) || {};
|
||||
this.$nextTick(() => {
|
||||
this.canvasStore.zoomToFit();
|
||||
this.uiStore.stateIsDirty = true;
|
||||
});
|
||||
await this.$nextTick();
|
||||
this.canvasStore.zoomToFit();
|
||||
this.uiStore.stateIsDirty = true;
|
||||
|
||||
void this.$externalHooks().run('template.open', {
|
||||
templateId,
|
||||
@@ -1938,7 +1937,7 @@ export default defineComponent({
|
||||
newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, position);
|
||||
}
|
||||
|
||||
const localizedName = this.localizeNodeName(newNodeData.name, newNodeData.type);
|
||||
const localizedName = this.locale.localizeNodeName(newNodeData.name, newNodeData.type);
|
||||
|
||||
newNodeData.name = this.uniqueNodeName(localizedName);
|
||||
|
||||
@@ -2074,7 +2073,7 @@ export default defineComponent({
|
||||
|
||||
// If a node is last selected then connect between the active and its child ones
|
||||
if (lastSelectedNode) {
|
||||
await Vue.nextTick();
|
||||
await this.$nextTick();
|
||||
|
||||
if (lastSelectedConnection && lastSelectedConnection.__meta) {
|
||||
this.__deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
|
||||
@@ -2749,7 +2748,7 @@ export default defineComponent({
|
||||
const newNodeData = deepCopy(this.getNodeDataToSave(node));
|
||||
newNodeData.id = uuid();
|
||||
|
||||
const localizedName = this.localizeNodeName(newNodeData.name, newNodeData.type);
|
||||
const localizedName = this.locale.localizeNodeName(newNodeData.name, newNodeData.type);
|
||||
|
||||
newNodeData.name = this.uniqueNodeName(localizedName);
|
||||
|
||||
@@ -3047,7 +3046,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
void nextTick(() => {
|
||||
// Suspend drawing
|
||||
this.instance?.setSuspendDrawing(true);
|
||||
(this.instance?.endpointsByElement[node.id] || [])
|
||||
@@ -3069,7 +3068,8 @@ export default defineComponent({
|
||||
if (trackHistory) {
|
||||
this.historyStore.pushCommandToUndo(new RemoveNodeCommand(node));
|
||||
}
|
||||
}, 0); // allow other events to finish like drag stop
|
||||
}); // allow other events to finish like drag stop
|
||||
|
||||
if (trackHistory && trackBulk) {
|
||||
const recordingTimeout = waitForNewConnection ? 100 : 0;
|
||||
setTimeout(() => {
|
||||
@@ -3099,7 +3099,7 @@ export default defineComponent({
|
||||
);
|
||||
|
||||
// Wait till it had time to display
|
||||
await Vue.nextTick();
|
||||
await this.$nextTick();
|
||||
|
||||
// Get the input and select the text in it
|
||||
const nameInput = document.querySelector('.rename-prompt .el-input__inner') as
|
||||
@@ -3153,7 +3153,7 @@ export default defineComponent({
|
||||
this.workflowsStore.removeAllNodes({ removePinData: false, setStateDirty: true });
|
||||
|
||||
// Wait a tick that the old nodes had time to get removed
|
||||
await Vue.nextTick();
|
||||
await this.$nextTick();
|
||||
|
||||
// Add the new updated nodes
|
||||
await this.addNodes(Object.values(workflow.nodes), workflow.connectionsBySourceNode, false);
|
||||
@@ -3311,7 +3311,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
// Wait for the node to be rendered
|
||||
await Vue.nextTick();
|
||||
await this.$nextTick();
|
||||
|
||||
// Suspend drawing
|
||||
this.instance?.setSuspendDrawing(true);
|
||||
@@ -3401,7 +3401,7 @@ export default defineComponent({
|
||||
|
||||
oldName = node.name;
|
||||
|
||||
const localized = this.localizeNodeName(node.name, node.type);
|
||||
const localized = this.locale.localizeNodeName(node.name, node.type);
|
||||
|
||||
newName = this.uniqueNodeName(localized, newNodeNames);
|
||||
|
||||
@@ -3558,14 +3558,11 @@ export default defineComponent({
|
||||
// Reset nodes
|
||||
this.deleteEveryEndpoint();
|
||||
|
||||
// Make sure that if there is a waiting test-webhook that it gets removed
|
||||
if (this.executionWaitingForWebhook) {
|
||||
// Make sure that if there is a waiting test-webhook that
|
||||
// it gets removed
|
||||
this.restApi()
|
||||
.removeTestWebhook(this.workflowsStore.workflowId)
|
||||
.catch(() => {
|
||||
// Ignore all errors
|
||||
});
|
||||
try {
|
||||
void this.workflowsStore.removeTestWebhook(this.workflowsStore.workflowId);
|
||||
} catch (error) {}
|
||||
}
|
||||
this.workflowsStore.resetState();
|
||||
this.uiStore.removeActiveAction('workflowRunning');
|
||||
@@ -3764,14 +3761,10 @@ export default defineComponent({
|
||||
// exist
|
||||
const actionWatcher = this.workflowsStore.$onAction(({ name, after, args }) => {
|
||||
if (name === 'addNode' && args[0].type === nodeTypeName) {
|
||||
after(() => {
|
||||
after(async () => {
|
||||
const lastAddedNode = this.nodes[this.nodes.length - 1];
|
||||
const previouslyAddedNode = this.nodes[this.nodes.length - 2];
|
||||
|
||||
this.$nextTick(() =>
|
||||
this.connectTwoNodes(previouslyAddedNode.name, 0, lastAddedNode.name, 0),
|
||||
);
|
||||
|
||||
// Position the added node to the right side of the previously added one
|
||||
lastAddedNode.position = [
|
||||
previouslyAddedNode.position[0] +
|
||||
@@ -3779,6 +3772,9 @@ export default defineComponent({
|
||||
NodeViewUtils.GRID_SIZE,
|
||||
previouslyAddedNode.position[1],
|
||||
];
|
||||
await this.$nextTick();
|
||||
this.connectTwoNodes(previouslyAddedNode.name, 0, lastAddedNode.name, 0);
|
||||
|
||||
actionWatcher();
|
||||
});
|
||||
}
|
||||
@@ -3845,7 +3841,7 @@ export default defineComponent({
|
||||
this.readOnlyEnv &&
|
||||
[VIEWS.NEW_WORKFLOW, VIEWS.TEMPLATE_IMPORT].includes(this.$route.name)
|
||||
) {
|
||||
this.$nextTick(async () => {
|
||||
void this.$nextTick(async () => {
|
||||
this.resetWorkspace();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
|
||||
@@ -4025,7 +4021,13 @@ export default defineComponent({
|
||||
dataPinningEventBus.off('unpin-data', this.removePinDataConnections);
|
||||
nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
|
||||
},
|
||||
destroyed() {
|
||||
beforeUnmount() {
|
||||
// Make sure the event listeners get removed again else we
|
||||
// could add up with them registered multiple times
|
||||
document.removeEventListener('keydown', this.keyDown);
|
||||
document.removeEventListener('keyup', this.keyUp);
|
||||
this.unregisterCustomAction('showNodeCreator');
|
||||
|
||||
this.resetWorkspace();
|
||||
this.instance.unbind();
|
||||
this.instance.destroy();
|
||||
|
||||
Reference in New Issue
Block a user