fix(editor): Fix initial node and sticky insert position in new canva…

…s (no-changelog) (n8n-io#10153)

packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue

@@ -2,7 +2,7 @@
 /* eslint-disable vue/no-multiple-template-root */
 import { useCanvasNode } from '@/composables/useCanvasNode';
 import type { CanvasNodeStickyNoteRender } from '@/types';
-import { ref, computed } from 'vue';
+import { ref, computed, useCssModule } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import type { OnResize } from '@vue-flow/node-resizer/dist/types';
 import type { XYPosition } from '@vue-flow/core';
@@ -17,10 +17,17 @@ const emit = defineEmits<{
 	dblclick: [event: MouseEvent];
 }>();
 
-const { id, render } = useCanvasNode();
+const $style = useCssModule();
+
+const { id, isSelected, render } = useCanvasNode();
 
 const renderOptions = computed(() => render.value.options as CanvasNodeStickyNoteRender['options']);
 
+const classes = computed(() => ({
+	[$style.sticky]: true,
+	[$style.selected]: isSelected.value,
+}));
+
 /**
  * Resizing
  */
@@ -68,10 +75,10 @@ function onDoubleClick(event: MouseEvent) {
 	<N8nSticky
 		v-bind="$attrs"
 		:id="id"
+		:class="classes"
 		data-test-id="canvas-sticky-note-node"
 		:height="renderOptions.height"
 		:width="renderOptions.width"
-		:class="$style.sticky"
 		:model-value="renderOptions.content"
 		:background="renderOptions.color"
 		:edit-mode="isActive"
@@ -84,5 +91,14 @@ function onDoubleClick(event: MouseEvent) {
 <style lang="scss" module>
 .sticky {
 	position: relative;
+
+	/**
+	 * State classes
+	 * The reverse order defines the priority in case multiple states are active
+	 */
+
+	&.selected {
+		box-shadow: 0 0 0 4px var(--color-canvas-selected);
+	}
 }
 </style>

packages/editor-ui/src/views/NodeView.v2.vue

@@ -29,7 +29,7 @@ import type {
 	ToggleNodeCreatorOptions,
 	XYPosition,
 } from '@/Interface';
-import type { Connection } from '@vue-flow/core';
+import type { Connection, ViewportTransform } from '@vue-flow/core';
 import type {
 	CanvasConnectionCreateData,
 	CanvasNode,
@@ -135,7 +135,7 @@ const templatesStore = useTemplatesStore();
 
 const canvasEventBus = createEventBus();
 
-const lastClickPosition = ref<XYPosition>([450, 450]);
+const lastClickPosition = ref<XYPosition>([0, 0]);
 
 const { runWorkflow, stopCurrentExecution, stopWaitingForWebhook } = useRunWorkflow({ router });
 const {
@@ -1303,6 +1303,13 @@ async function onSaveFromWithinExecutionDebug() {
  * Canvas
  */
 
+const viewportTransform = ref<ViewportTransform>({ x: 0, y: 0, zoom: 1 });
+
+function onViewportChange(event: ViewportTransform) {
+	viewportTransform.value = event;
+	uiStore.nodeViewOffsetPosition = [event.x, event.y];
+}
+
 function fitView() {
 	setTimeout(() => canvasEventBus.emit('fitView'));
 }
@@ -1500,6 +1507,7 @@ onBeforeUnmount(() => {
 		@run:workflow="onRunWorkflow"
 		@save:workflow="onSaveWorkflow"
 		@create:workflow="onCreateWorkflow"
+		@viewport-change="onViewportChange"
 	>
 		<div :class="$style.executionButtons">
 			<CanvasRunWorkflowButton
@@ -1528,7 +1536,7 @@ onBeforeUnmount(() => {
 			<NodeCreation
 				v-if="!isCanvasReadOnly"
 				:create-node-active="uiStore.isCreateNodeActive"
-				:node-view-scale="1"
+				:node-view-scale="viewportTransform.zoom"
 				@toggle-node-creator="onOpenNodeCreator"
 				@add-nodes="onAddNodesAndConnections"
 			/>