feat(editor): Support adding nodes via drag and drop from node creator on new canvas (#12197)

packages/editor-ui/src/components/canvas/Canvas.vue

@@ -8,7 +8,6 @@ import type {
 } from '@/types';
 import type { Connection, XYPosition, NodeDragEvent, GraphNode } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition, MarkerType } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import Node from './elements/nodes/CanvasNode.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
@@ -25,7 +24,7 @@ import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { CanvasKey } from '@/constants';
 import { onKeyDown, onKeyUp, useThrottleFn } from '@vueuse/core';
 import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
-import CanvasBackgroundStripedPattern from './elements/CanvasBackgroundStripedPattern.vue';
+import CanvasBackground from './elements/background/CanvasBackground.vue';
 import { useCanvasTraversal } from '@/composables/useCanvasTraversal';
 import { NodeConnectionType } from 'n8n-workflow';
 
@@ -65,6 +64,7 @@ const emit = defineEmits<{
 	'run:workflow': [];
 	'save:workflow': [];
 	'create:workflow': [];
+	'drag-and-drop': [position: XYPosition, event: DragEvent];
 }>();
 
 const props = withDefaults(
@@ -535,6 +535,20 @@ function onContextMenuAction(action: ContextMenuAction, nodeIds: string[]) {
 	}
 }
 
+/**
+ * Drag and drop
+ */
+
+function onDragOver(event: DragEvent) {
+	event.preventDefault();
+}
+
+function onDrop(event: DragEvent) {
+	const position = getProjectedPosition(event);
+
+	emit('drag-and-drop', position, event);
+}
+
 /**
  * Minimap
  */
@@ -626,6 +640,7 @@ provide(CanvasKey, {
 		:id="id"
 		:nodes="nodes"
 		:edges="connections"
+		:class="classes"
 		:apply-changes="false"
 		:connection-line-options="{ markerEnd: MarkerType.ArrowClosed }"
 		:connection-radius="60"
@@ -635,7 +650,6 @@ provide(CanvasKey, {
 		:snap-grid="[GRID_SIZE, GRID_SIZE]"
 		:min-zoom="0"
 		:max-zoom="4"
-		:class="classes"
 		:selection-key-code="selectionKeyCode"
 		:pan-activation-key-code="panningKeyCode"
 		:disable-keyboard-a11y="true"
@@ -649,6 +663,8 @@ provide(CanvasKey, {
 		@move-end="onPaneMoveEnd"
 		@node-drag-stop="onNodeDragStop"
 		@selection-drag-stop="onSelectionDragStop"
+		@dragover="onDragOver"
+		@drop="onDrop"
 	>
 		<template #node-canvas-node="nodeProps">
 			<Node
@@ -687,16 +703,7 @@ provide(CanvasKey, {
 
 		<CanvasArrowHeadMarker :id="arrowHeadMarkerId" />
 
-		<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="GRID_SIZE">
-			<template v-if="readOnly" #pattern-container="patternProps">
-				<CanvasBackgroundStripedPattern
-					:id="patternProps.id"
-					:x="viewport.x"
-					:y="viewport.y"
-					:zoom="viewport.zoom"
-				/>
-			</template>
-		</Background>
+		<CanvasBackground :viewport="viewport" :striped="readOnly" />
 
 		<Transition name="minimap">
 			<MiniMap
@@ -736,6 +743,8 @@ provide(CanvasKey, {
 
 <style lang="scss" module>
 .canvas {
+	width: 100%;
+	height: 100%;
 	opacity: 0;
 
 	&.ready {