fix(editor): Fix sticky duplication and position bug (#3755)

* fix bug when inserting sticky * center sticky on insert * export as const
n8n-io · Jul 26, 2022 · 92614c8 · 92614c8
1 parent 1a7318b
commit 92614c8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
@@ -289,3 +289,6 @@ export const TEST_PIN_DATA = [
 	},
 ];
 export const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$node`, `$binary`, `$data`, `$env`, `$json`, `$now`, `$parameters`, `$position`, `$resumeWebhookUrl`, `$runIndex`, `$today`, `$workflow`, '$parameter'];
+
+export const DEFAULT_STICKY_HEIGHT = 160;
+export const DEFAULT_STICKY_WIDTH = 240;
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -72,7 +72,7 @@
 				/>
 				<div
 					:class="['add-sticky-button', showStickyButton ? 'visible-button' : '']"
-					@click="nodeTypeSelected(STICKY_NODE_TYPE)"
+					@click="addStickyNote"
 				>
 					<n8n-icon-button
 						size="medium"
@@ -154,7 +154,7 @@ import {
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, OnConnectionBindInfo } from 'jsplumb';
-import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, QUICKSTART_NOTE_NAME, START_NODE_TYPE, STICKY_NODE_TYPE, VIEWS, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
+import { DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, QUICKSTART_NOTE_NAME, START_NODE_TYPE, STICKY_NODE_TYPE, VIEWS, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -227,6 +227,7 @@ interface AddNodeOptions {
 	dragAndDrop?: boolean;
 }
 
+
 export default mixins(
 	copyPaste,
 	externalHooks,
@@ -1371,6 +1372,22 @@ export default mixins(
 				this.createNodeActive = false;
 			},
 
+			addStickyNote() {
+				if (document.activeElement) {
+					(document.activeElement as HTMLElement).blur();
+				}
+
+				const offset: [number, number] = [...(this.$store.getters.getNodeViewOffsetPosition as [number, number])];
+
+				const position = CanvasHelpers.getMidCanvasPosition(this.nodeViewScale, offset);
+				position[0] -= DEFAULT_STICKY_WIDTH / 2;
+				position[1] -= DEFAULT_STICKY_HEIGHT / 2;
+
+				this.addNodeButton(STICKY_NODE_TYPE, {
+					position,
+				});
+			},
+
 			nodeTypeSelected (nodeTypeName: string) {
 				this.addNodeButton(nodeTypeName);
 				this.createNodeActive = false;

diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -474,6 +474,10 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
 	];
 };
 
+export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
+	return getRelativePosition((window.innerWidth - SIDEBAR_WIDTH) / 2, (window.innerHeight - HEADER_HEIGHT) / 2, scale, offset);
+};
+
 export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
 	const squareSize = GRID_SIZE * scale;
 	const dotSize = 1 * scale;