feat(editor): Overhaul node insert position computation in new canvas…

… (no-changelog) (#10637)
n8n-io · Sep 23, 2024 · cade792 · cade792
1 parent 504e8e5
commit cade792
Show file tree

Hide file tree

Showing 15 changed files with 793 additions and 471 deletions.
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
@@ -1805,6 +1805,7 @@ export type ToggleNodeCreatorOptions = {
 	createNodeActive: boolean;
 	source?: NodeCreatorOpenSource;
 	nodeCreatorView?: NodeFilterType;
+	hasAddedNodes?: boolean;
 };
 
 export type AppliedThemeOption = 'light' | 'dark';

diff --git a/packages/editor-ui/src/__tests__/mocks.ts b/packages/editor-ui/src/__tests__/mocks.ts
@@ -49,18 +49,18 @@ export const mockNode = ({
 }) => mock<INodeUi>({ id, name, type, position, disabled, issues, typeVersion, parameters });
 
 export const mockNodeTypeDescription = ({
-	name,
+	name = SET_NODE_TYPE,
 	version = 1,
 	credentials = [],
 	inputs = [NodeConnectionType.Main],
 	outputs = [NodeConnectionType.Main],
 }: {
-	name: INodeTypeDescription['name'];
+	name?: INodeTypeDescription['name'];
 	version?: INodeTypeDescription['version'];
 	credentials?: INodeTypeDescription['credentials'];
 	inputs?: INodeTypeDescription['inputs'];
 	outputs?: INodeTypeDescription['outputs'];
-}) =>
+} = {}) =>
 	mock<INodeTypeDescription>({
 		name,
 		displayName: name,

diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -23,7 +23,7 @@ const LazyNodeCreator = defineAsyncComponent(
 );
 
 const props = withDefaults(defineProps<Props>(), {
-	createNodeActive: false,
+	createNodeActive: false, // Determines if the node creator is open
 });
 
 const emit = defineEmits<{
@@ -88,13 +88,15 @@ function addStickyNote() {
 	emit('addNodes', getAddedNodesAndConnections([{ type: STICKY_NODE_TYPE, position }]));
 }
 
-function closeNodeCreator() {
-	emit('toggleNodeCreator', { createNodeActive: false });
+function closeNodeCreator(hasAddedNodes = false) {
+	if (props.createNodeActive) {
+		emit('toggleNodeCreator', { createNodeActive: false, hasAddedNodes });
+	}
 }
 
 function nodeTypeSelected(nodeTypes: string[]) {
 	emit('addNodes', getAddedNodesAndConnections(nodeTypes.map((type) => ({ type }))));
-	closeNodeCreator();
+	closeNodeCreator(true);
 }
 </script>
 

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -101,8 +101,8 @@ watch(
 );
 
 // Close node creator when the last view stacks is closed
-watch(viewStacksLength, (viewStacksLength) => {
-	if (viewStacksLength === 0) {
+watch(viewStacksLength, (value) => {
+	if (value === 0) {
 		emit('closeNodeCreator');
 		setShowScrim(false);
 	}

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -57,7 +57,11 @@ const emit = defineEmits<{
 	'create:connection:start': [handle: ConnectStartEvent];
 	'create:connection': [connection: Connection];
 	'create:connection:end': [connection: Connection, event?: MouseEvent];
-	'create:connection:cancelled': [handle: ConnectStartEvent, event?: MouseEvent];
+	'create:connection:cancelled': [
+		handle: ConnectStartEvent,
+		position: XYPosition,
+		event?: MouseEvent,
+	];
 	'click:connection:add': [connection: Connection];
 	'click:pane': [position: XYPosition];
 	'run:workflow': [];
@@ -227,7 +231,7 @@ function onConnectEnd(event?: MouseEvent) {
 	if (connectedHandle.value) {
 		emit('create:connection:end', connectedHandle.value, event);
 	} else if (connectingHandle.value) {
-		emit('create:connection:cancelled', connectingHandle.value, event);
+		emit('create:connection:cancelled', connectingHandle.value, getProjectedPosition(event), event);
 	}
 
 	connectedHandle.value = undefined;
@@ -291,14 +295,19 @@ function emitWithLastSelectedNode(emitFn: (id: string) => void) {
 const defaultZoom = 1;
 const zoom = ref(defaultZoom);
 
-function onClickPane(event: MouseEvent) {
+function getProjectedPosition(event?: MouseEvent) {
 	const bounds = viewportRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 };
-	const position = project({
-		x: event.offsetX - bounds.left,
-		y: event.offsetY - bounds.top,
+	const offsetX = event?.clientX ?? 0;
+	const offsetY = event?.clientY ?? 0;
+
+	return project({
+		x: offsetX - bounds.left,
+		y: offsetY - bounds.top,
 	});
+}
 
-	emit('click:pane', position);
+function onClickPane(event: MouseEvent) {
+	emit('click:pane', getProjectedPosition(event));
 }
 
 async function onFitView() {

diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -145,8 +145,8 @@ function openContextMenu(event: MouseEvent) {
 	 */
 
 	&.configuration {
-		--canvas-node--width: 76px;
-		--canvas-node--height: 76px;
+		--canvas-node--width: 80px;
+		--canvas-node--height: 80px;
 
 		background: var(--canvas-node--background, var(--node-type-supplemental-background));
 		border: var(--canvas-node-border-width) solid

diff --git a/packages/editor-ui/src/composables/__tests__/__snapshots__/useCanvasOperations.spec.ts.snap b/packages/editor-ui/src/composables/__tests__/__snapshots__/useCanvasOperations.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`useCanvasOperations > copyNodes > should copy nodes 1`] = `
       "parameters": {},
       "id": "1",
       "name": "Node 1",
-      "type": "type",
+      "type": "n8n-nodes-base.set",
       "position": [
         40,
         40
@@ -20,7 +20,7 @@ exports[`useCanvasOperations > copyNodes > should copy nodes 1`] = `
       "parameters": {},
       "id": "2",
       "name": "Node 2",
-      "type": "type",
+      "type": "n8n-nodes-base.set",
       "position": [
         40,
         40
@@ -44,7 +44,7 @@ exports[`useCanvasOperations > cutNodes > should copy and delete nodes 1`] = `
       "parameters": {},
       "id": "1",
       "name": "Node 1",
-      "type": "type",
+      "type": "n8n-nodes-base.set",
       "position": [
         40,
         40
@@ -55,7 +55,7 @@ exports[`useCanvasOperations > cutNodes > should copy and delete nodes 1`] = `
       "parameters": {},
       "id": "2",
       "name": "Node 2",
-      "type": "type",
+      "type": "n8n-nodes-base.set",
       "position": [
         40,
         40