fix(editor): Fix for missing node connections in dev environment (#4707)

* 🐛 Fixing connections not showing up in dev environment * 🐛 Fixing a bug when opening execution page directly
n8n-io · Nov 24, 2022 · b18ae18 · b18ae18
1 parent ee6ac5d
commit b18ae18
Show file tree

Hide file tree

Showing 10 changed files with 810 additions and 843 deletions.
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { getMidCanvasPosition } from '@/utils';
+import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
 import {DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, STICKY_NODE_TYPE} from "@/constants";
 import { mapStores } from "pinia";
 import { useUIStore } from "@/stores/ui";

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
@@ -58,7 +58,8 @@
 import Vue, { PropType } from 'vue';
 import { INodeTypeDescription } from 'n8n-workflow';
 
-import { isCommunityPackageName, getNewNodePosition, NODE_SIZE } from '@/utils';
+import { isCommunityPackageName } from '@/utils';
+import { getNewNodePosition, NODE_SIZE } from '@/utils/nodeViewUtils';
 import { COMMUNITY_NODES_INSTALLATION_DOCS_URL } from '@/constants';
 
 import NodeIcon from '@/components/NodeIcon.vue';

diff --git a/packages/editor-ui/src/mixins/mouseSelect.ts b/packages/editor-ui/src/mixins/mouseSelect.ts
@@ -3,11 +3,11 @@ import { INodeUi, XYPosition } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
-import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/utils';
 import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
+import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/utils/nodeViewUtils';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,

diff --git a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
@@ -1,6 +1,6 @@
 import mixins from 'vue-typed-mixins';
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
-import { getMousePosition } from '@/utils';
+import { getMousePosition } from '@/utils/nodeViewUtils';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 

diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts
@@ -3,17 +3,6 @@ import mixins from 'vue-typed-mixins';
 import { IJsPlumbInstance, IEndpointOptions, INodeUi, XYPosition } from '@/Interface';
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { NO_OP_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
-import {
-	ANCHOR_POSITIONS,
-	GRID_SIZE,
-	getInputEndpointUUID,
-	getOutputEndpointUUID,
-	getInputEndpointStyle,
-	getOutputEndpointStyle,
-	getInputNameOverlay,
-	getOutputNameOverlay,
-	getStyleTokenValue,
-} from '@/utils';
 
 import {
 	INodeTypeDescription,
@@ -22,6 +11,8 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from "@/stores/workflows";
 import { useNodeTypesStore } from "@/stores/nodeTypes";
+import * as NodeViewUtils from '@/utils/nodeViewUtils';
+import { getStyleTokenValue } from "@/utils";
 
 export const nodeBase = mixins(
 	deviceSupportHelpers,
@@ -91,15 +82,15 @@ export const nodeBase = mixins(
 				index = indexData[inputName];
 
 				// Get the position of the anchor depending on how many it has
-				const anchorPosition = ANCHOR_POSITIONS.input[nodeTypeData.inputs.length][index];
+				const anchorPosition = NodeViewUtils.ANCHOR_POSITIONS.input[nodeTypeData.inputs.length][index];
 
 				const newEndpointData: IEndpointOptions = {
-					uuid: getInputEndpointUUID(this.nodeId, index),
+					uuid:NodeViewUtils. getInputEndpointUUID(this.nodeId, index),
 					anchor: anchorPosition,
 					maxConnections: -1,
 					endpoint: 'Rectangle',
-					endpointStyle: getInputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
-					endpointHoverStyle: getInputEndpointStyle(nodeTypeData, '--color-primary'),
+					endpointStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
+					endpointHoverStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-primary'),
 					isSource: false,
 					isTarget: !this.isReadOnly && nodeTypeData.inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView,
 					parameters: {
@@ -119,7 +110,7 @@ export const nodeBase = mixins(
 				if (nodeTypeData.inputNames) {
 					// Apply input names if they got set
 					newEndpointData.overlays = [
-						getInputNameOverlay(nodeTypeData.inputNames[index]),
+						NodeViewUtils.getInputNameOverlay(nodeTypeData.inputNames[index]),
 					];
 				}
 
@@ -161,15 +152,15 @@ export const nodeBase = mixins(
 				index = indexData[inputName];
 
 				// Get the position of the anchor depending on how many it has
-				const anchorPosition = ANCHOR_POSITIONS.output[nodeTypeData.outputs.length][index];
+				const anchorPosition = NodeViewUtils.ANCHOR_POSITIONS.output[nodeTypeData.outputs.length][index];
 
 				const newEndpointData: IEndpointOptions = {
-					uuid: getOutputEndpointUUID(this.nodeId, index),
+					uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
 					anchor: anchorPosition,
 					maxConnections: -1,
 					endpoint: 'Dot',
-					endpointStyle: getOutputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
-					endpointHoverStyle: getOutputEndpointStyle(nodeTypeData, '--color-primary'),
+					endpointStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
+					endpointHoverStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-primary'),
 					isSource: true,
 					isTarget: false,
 					enabled: !this.isReadOnly,
@@ -186,7 +177,7 @@ export const nodeBase = mixins(
 				if (nodeTypeData.outputNames) {
 					// Apply output names if they got set
 					newEndpointData.overlays = [
-						getOutputNameOverlay(nodeTypeData.outputNames[index]),
+						NodeViewUtils.getOutputNameOverlay(nodeTypeData.outputNames[index]),
 					];
 				}
 
@@ -202,7 +193,7 @@ export const nodeBase = mixins(
 
 				if (!this.isReadOnly) {
 					const plusEndpointData: IEndpointOptions = {
-						uuid: getOutputEndpointUUID(this.nodeId, index),
+						uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
 						anchor: anchorPosition,
 						maxConnections: -1,
 						endpoint: 'N8nPlus',
@@ -250,7 +241,7 @@ export const nodeBase = mixins(
 			//       https://jsplumb.github.io/jsplumb/home.html
 			// Make nodes draggable
 			this.instance.draggable(this.nodeId, {
-				grid: [GRID_SIZE, GRID_SIZE],
+				grid: [NodeViewUtils.GRID_SIZE, NodeViewUtils.GRID_SIZE],
 				start: (params: { e: MouseEvent }) => {
 					if (this.isReadOnly === true) {
 						// Do not allow to move nodes in readOnly mode

diff --git a/packages/editor-ui/src/stores/canvas.ts b/packages/editor-ui/src/stores/canvas.ts
@@ -8,18 +8,14 @@ import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useUIStore } from '@/stores/ui';
 import { INodeUi, XYPosition } from '@/Interface';
 import {
-	DEFAULT_PLACEHOLDER_TRIGGER_BUTTON,
-	PLACEHOLDER_TRIGGER_NODE_SIZE,
-	getMidCanvasPosition,
-	getNewNodePosition,
-	getZoomToFit,
 	scaleBigger,
 	scaleReset,
 	scaleSmaller,
 } from '@/utils';
 import { START_NODE_TYPE } from '@/constants';
 import '@/plugins/N8nCustomConnectorType';
 import '@/plugins/PlusEndpointType';
+import { DEFAULT_PLACEHOLDER_TRIGGER_BUTTON, getMidCanvasPosition, getNewNodePosition, getZoomToFit, PLACEHOLDER_TRIGGER_NODE_SIZE } from '@/utils/nodeViewUtils';
 
 export const useCanvasStore = defineStore('canvas', () => {
 	const workflowStore = useWorkflowsStore();

diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
@@ -282,7 +282,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 			this.workflow.name = data.newName;
 
-			if (this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+			if (this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID && this.workflowsById[this.workflow.id]) {
 				this.workflowsById[this.workflow.id].name = data.newName;
 			}
 		},