✨ Added snapping to grid. Changed how draggable ghost follows the cur…

…sor.

packages/editor-ui/src/components/NodeCreator/ItemIterator.vue

@@ -21,7 +21,7 @@
 					:lastNode="
 						index === elements.length - 1 || elements[index + 1].type !== 'node'
 					"
-					@click="emit('selected', item, $event)"
+					@click="$emit('selected', item)"
 					@dragstart="emit('dragstart', item, $event)"
 					@dragend="emit('dragend', item, $event)"
 				/>

packages/editor-ui/src/components/NodeCreator/MainPanel.vue

@@ -1,7 +1,16 @@
 <template>
 	<div @click="onClickInside" class="container">
 		<SlideTransition>
-			<SubcategoryPanel v-if="activeSubcategory" :elements="subcategorizedNodes" :title="activeSubcategory.properties.subcategory" :activeIndex="activeSubcategoryIndex" @close="onSubcategoryClose" @selected="selected" />
+			<SubcategoryPanel
+				v-if="activeSubcategory"
+				:elements="subcategorizedNodes"
+				:title="activeSubcategory.properties.subcategory"
+				:activeIndex="activeSubcategoryIndex"
+				@close="onSubcategoryClose"
+				@selected="selected"
+				@dragstart="emitDragEvent('nodeTypeDragStart', $event)"
+				@dragend="emitDragEvent('nodeTypeDragEnd', $event)"
+			/>
 		</SlideTransition>
 		<div class="main-panel">
 			<SearchBar
@@ -23,8 +32,8 @@
 					:activeIndex="activeIndex"
 					:transitionsEnabled="true"
 					@selected="selected"
-					@dragstart="emitNodeEvent('nodeTypeDragStart', $event)"
-					@dragend="emitNodeEvent('nodeTypeDragEnd', $event)"
+					@dragstart="emitDragEvent('nodeTypeDragStart', $event)"
+					@dragend="emitDragEvent('nodeTypeDragEnd', $event)"
 				/>
 			</div>
 			<div
@@ -35,8 +44,8 @@
 					:elements="filteredNodeTypes"
 					:activeIndex="activeIndex"
 					@selected="selected"
-					@dragstart="emitNodeEvent('nodeTypeDragStart', $event)"
-					@dragend="emitNodeEvent('nodeTypeDragEnd', $event)"
+					@dragstart="emitDragEvent('nodeTypeDragStart', $event)"
+					@dragend="emitDragEvent('nodeTypeDragEnd', $event)"
 				/>
 			</div>
 			<NoResults
@@ -62,8 +71,6 @@ import { INodeCreateElement, INodeItemProps, ISubcategoryItemProps } from '@/Int
 import { ALL_NODE_FILTER, CORE_NODES_CATEGORY, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER } from '@/constants';
 import SlideTransition from '../transitions/SlideTransition.vue';
 import { matchesNodeType, matchesSelectType } from './helpers';
-import {INodeTypeDescription} from "n8n-workflow";
-
 
 export default mixins(externalHooks).extend({
 	name: 'NodeCreateList',
@@ -241,9 +248,9 @@ export default mixins(externalHooks).extend({
 				this.selected(activeNodeType);
 			}
 		},
-		selected({ element, event }: { element: INodeCreateElement, event: MouseEvent }) {
+		selected(element: INodeCreateElement) {
 			if (element.type === 'node') {
-				this.emitNodeEvent('nodeTypeSelected', { element, event });
+				this.$emit('nodeTypeSelected', (element.properties as INodeItemProps).nodeType.name);
 			} else if (element.type === 'category') {
 				this.onCategorySelected(element.category);
 			} else if (element.type === 'subcategory') {
@@ -280,7 +287,7 @@ export default mixins(externalHooks).extend({
 			this.searchEventBus.$emit('focus');
 		},
 
-		emitNodeEvent(eventName: string, { element, event }: { element: INodeCreateElement, event: Event }) {
+		emitDragEvent(eventName: string, { element, event }: { element: INodeCreateElement, event: Event }) {
 			this.$emit(eventName, {
 				nodeTypeName: (element.properties as INodeItemProps).nodeType.name,
 				event,

packages/editor-ui/src/components/NodeCreator/NodeCreator.vue

@@ -98,7 +98,7 @@ export default Vue.extend({
 				this.$emit('closeNodeCreator');
 			}
 		},
-		nodeTypeSelected ({ nodeTypeName }: { nodeTypeName: string }) {
+		nodeTypeSelected (nodeTypeName: string) {
 			this.$emit('nodeTypeSelected', nodeTypeName);
 		},
 		nodeTypeDragStart (event: { nodeTypeName: string, event: DragEvent }) {

packages/editor-ui/src/components/NodeCreator/NodeItem.vue

@@ -16,7 +16,7 @@
 					}}
 				</span>
 				<span :class="$style['trigger-icon']">
-					<TriggerIcon v-if="$options.isTrigger(nodeType)" />
+					<TriggerIcon v-if="isTrigger" />
 				</span>
 			</div>
 			<div :class="$style.description">
@@ -27,7 +27,8 @@
 				}}
 			</div>
 
-			<div :class="$style.draggable" ref="draggable" v-show="dragging">
+			<div :class="$style['draggable-data-transfer']" ref="draggableDataTransfer" />
+			<div :class="$style.draggable" :style="{ top: `${draggablePosition.y}px`, left: `${draggablePosition.x}px` }" ref="draggable" v-show="dragging">
 				<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
 			</div>
 		</div>
@@ -36,15 +37,23 @@
 
 <script lang="ts">
 
+import { getNewNodePosition } from '@/views/canvasHelpers';
 import Vue from 'vue';
-import { INodeTypeDescription } from 'n8n-workflow';
 
 import NodeIcon from '../NodeIcon.vue';
 import TriggerIcon from '../TriggerIcon.vue';
 
 Vue.component('NodeIcon', NodeIcon);
 Vue.component('TriggerIcon', TriggerIcon);
 
+interface Data {
+	dragging: boolean;
+	draggablePosition: {
+		x: number;
+		y: number;
+	};
+}
+
 export default Vue.extend({
 	name: 'NodeItem',
 	props: [
@@ -53,32 +62,70 @@ export default Vue.extend({
 		'nodeType',
 		'bordered',
 	],
-	data(): { dragging: boolean; } {
+	data(): Data {
 		return {
 			dragging: false,
+			draggablePosition: {
+				x: -100,
+				y: -100,
+			},
 		};
 	},
 	computed: {
-		shortNodeType() {
+		shortNodeType(): string {
 			return this.$locale.shortNodeType(this.nodeType.name);
 		},
+		isTrigger (): boolean {
+			return this.nodeType.group.includes('trigger');
+		},
+	},
+	mounted() {
+		/**
+		 * Workaround for firefox, that doesn't attach the pageX and pageY coordinates to "ondrag" event.
+		 * All browsers attach the correct page coordinates to the "dragover" event.
+		 * @bug https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+		 */
+		document.addEventListener("dragover", this.onDragOver);
+	},
+	destroyed() {
+		document.removeEventListener("dragover", this.onDragOver);
 	},
 	methods: {
-		onDragStart(event: DragEvent) {
+		onDragStart(event: DragEvent): void {
+			const { pageX: x, pageY: y } = event;
+
 			this.$emit('dragstart', event);
+
+			if (event.dataTransfer) {
+				event.dataTransfer.setDragImage(this.$refs.draggableDataTransfer as Element, 0, 0);
+			}
+
 			this.$data.dragging = true;
+			this.$data.draggablePosition = { x, y };
+		},
+		onDragOver(event: DragEvent): void {
+			if (!this.dragging || event.pageX === 0 && event.pageY === 0) {
+				return;
+			}
+
+			const [x,y] = getNewNodePosition([], [event.pageX, event.pageY]);
 
-			event.dataTransfer!.setDragImage(this.$refs.draggable as Element, 0, 0);
+			this.$data.draggablePosition = { x, y };
 		},
-		onDragEnd(event: Event) {
-			this.$emit('dragend', event);
+		onDragEnd(event: DragEvent): void {
+			this.$emit('dragend', {
+				...event,
+
+				// Safari and Firefox return incorrect values for "dragend" event,
+				// override with last known value
+				pageX: this.$data.draggablePosition.x,
+				pageY: this.$data.draggablePosition.y,
+			});
+
 			this.$data.dragging = false;
+			this.$data.draggablePosition = { x: -100, y: -100 };
 		},
 	},
-	// @ts-ignore
-	isTrigger (nodeType: INodeTypeDescription): boolean {
-		return nodeType.group.includes('trigger');
-	},
 });
 </script>
 
@@ -130,13 +177,18 @@ export default Vue.extend({
 	width: 100px;
 	height: 100px;
 	position: fixed;
-	top: -100px;
-	left: -100px;
+	z-index: 1;
+	opacity: 0.66;
 	border: 2px solid var(--color-foreground-xdark);
 	border-radius: var(--border-radius-large);
 	background-color: var(--color-background-xlight);
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
+
+.draggable-data-transfer {
+	width: 1px;
+	height: 1px;
+}
 </style>

packages/editor-ui/src/components/NodeCreator/SubcategoryPanel.vue

@@ -13,7 +13,9 @@
 			<ItemIterator
 				:elements="elements"
 				:activeIndex="activeIndex"
-				@selected="selected"
+				@selected="$emit('selected', $event)"
+				@dragstart="$emit('dragstart', $event)"
+				@dragend="$emit('dragend', $event)"
 			/>
 		</div>
 	</div>
@@ -38,9 +40,6 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		selected({ element }: { element: INodeCreateElement }) {
-			this.$emit('selected', element);
-		},
 		onBackArrowClick() {
 			this.$emit('close');
 		},

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

@@ -1429,6 +1429,8 @@ export default mixins(
 			async addNodeButton (nodeTypeName: string, options: AddNodeOptions = {
 				openDataDisplay: true,
 			}) {
+				console.log(options.position);
+
 				if (this.editAllowedCheck() === false) {
 					return;
 				}