♻️ Simplified drag and drop code and cleaned up prop-drilling.

n8n-io · Apr 15, 2022 · cef0e98 · cef0e98
1 parent cc5f99b
commit cef0e98
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 56 deletions.
diff --git a/packages/editor-ui/src/components/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/NodeCreator/MainPanel.vue
@@ -12,8 +12,6 @@
 				:activeIndex="activeSubcategoryIndex"
 				@close="onSubcategoryClose"
 				@selected="selected"
-				@dragstart="emitDragEvent('nodeTypeDragStart', $event)"
-				@dragend="emitDragEvent('nodeTypeDragEnd', $event)"
 			/>
 		</SlideTransition>
 		<div class="main-panel">
@@ -36,8 +34,6 @@
 					:activeIndex="activeIndex"
 					:transitionsEnabled="true"
 					@selected="selected"
-					@dragstart="emitDragEvent('nodeTypeDragStart', $event)"
-					@dragend="emitDragEvent('nodeTypeDragEnd', $event)"
 				/>
 			</div>
 			<div
@@ -48,8 +44,6 @@
 					:elements="filteredNodeTypes"
 					:activeIndex="activeIndex"
 					@selected="selected"
-					@dragstart="emitDragEvent('nodeTypeDragStart', $event)"
-					@dragend="emitDragEvent('nodeTypeDragEnd', $event)"
 				/>
 			</div>
 			<NoResults
@@ -290,21 +284,6 @@ export default mixins(externalHooks).extend({
 		onClickInside() {
 			this.searchEventBus.$emit('focus');
 		},
-
-		emitDragEvent(eventName: string, { element, event }: { element: INodeCreateElement, event: DragEvent }) {
-			// Abort drag end event propagation if dropped inside nodes panel
-			if (eventName === 'nodeTypeDragEnd') {
-				const mainPanelContainerBoundingRect = (this.$refs.mainPanelContainer as Element).getBoundingClientRect();
-				if (event.pageX >= mainPanelContainerBoundingRect.x && event.pageY >= mainPanelContainerBoundingRect.y) {
-					return;
-				}
-			}
-
-			this.$emit(eventName, {
-				nodeTypeName: (element.properties as INodeItemProps).nodeType.name,
-				event,
-			});
-		},
 	},
 	async mounted() {
 		this.$nextTick(() => {

diff --git a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
@@ -1,11 +1,16 @@
 <template>
 	<div>
 		<SlideTransition>
-			<div class="node-creator" v-if="active" v-click-outside="onClickOutside">
+			<div
+				v-if="active"
+				class="node-creator"
+				ref="nodeCreator"
+			 	v-click-outside="onClickOutside"
+			 	@dragover="onDragOver"
+			 	@drop="onDrop"
+			>
 				<MainPanel
 					@nodeTypeSelected="nodeTypeSelected"
-					@nodeTypeDragStart="nodeTypeDragStart"
-					@nodeTypeDragEnd="nodeTypeDragEnd"
 					:categorizedItems="categorizedItems"
 					:categoriesWithNodes="categoriesWithNodes"
 					:searchItems="searchItems"
@@ -101,12 +106,22 @@ export default Vue.extend({
 		nodeTypeSelected (nodeTypeName: string) {
 			this.$emit('nodeTypeSelected', nodeTypeName);
 		},
-		nodeTypeDragStart (event: { nodeTypeName: string, event: DragEvent }) {
-			this.$emit('nodeTypeDragStart', event);
+		onDragOver(event: DragEvent) {
+			event.preventDefault();
 		},
-		nodeTypeDragEnd (event: { nodeTypeName: string, event: DragEvent }) {
-			this.$emit('closeNodeCreator');
-			this.$emit('nodeTypeDragEnd', event);
+		onDrop(event: DragEvent) {
+			if (!event.dataTransfer) {
+				return;
+			}
+
+			const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
+			const nodeCreatorBoundingRect = (this.$refs.nodeCreator as Element).getBoundingClientRect();
+
+			// Abort drag end event propagation if dropped inside nodes panel
+			if (nodeTypeName && event.pageX >= nodeCreatorBoundingRect.x && event.pageY >= nodeCreatorBoundingRect.y) {
+				event.stopPropagation();
+				return;
+			}
 		},
 	},
 	watch: {

diff --git a/packages/editor-ui/src/components/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
@@ -53,14 +53,6 @@ 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: [
@@ -69,7 +61,7 @@ export default Vue.extend({
 		'nodeType',
 		'bordered',
 	],
-	data(): Data {
+	data() {
 		return {
 			dragging: false,
 			draggablePosition: {
@@ -98,10 +90,10 @@ export default Vue.extend({
 		 * 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);
+		document.body.addEventListener("dragover", this.onDragOver);
 	},
 	destroyed() {
-		document.removeEventListener("dragover", this.onDragOver);
+		document.body.removeEventListener("dragover", this.onDragOver);
 	},
 	methods: {
 		onDragStart(event: DragEvent): void {
@@ -110,6 +102,9 @@ export default Vue.extend({
 			this.$emit('dragstart', event);
 
 			if (event.dataTransfer) {
+				event.dataTransfer.effectAllowed = "copy";
+				event.dataTransfer.dropEffect = "copy";
+				event.dataTransfer.setData('nodeTypeName', this.nodeType.name);
 				event.dataTransfer.setDragImage(this.$refs.draggableDataTransfer as Element, 0, 0);
 			}
 
@@ -126,14 +121,7 @@ export default Vue.extend({
 			this.draggablePosition = { x, y };
 		},
 		onDragEnd(event: DragEvent): void {
-			this.$emit('dragend', {
-				...event,
-
-				// Safari and Firefox return incorrect values for "dragend" event,
-				// override with last known value
-				pageX: this.draggablePosition.x,
-				pageY: this.draggablePosition.y,
-			});
+			this.$emit('dragend', event);
 
 			this.dragging = false;
 			setTimeout(() => {

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -1,5 +1,9 @@
 <template>
-	<div class="node-view-root">
+	<div
+		class="node-view-root"
+	 	@dragover="onDragOver"
+	 	@drop="onDrop"
+	>
 		<div
 			class="node-view-wrapper"
 			:class="workflowClasses"
@@ -44,7 +48,6 @@
 		<node-creator
 			:active="createNodeActive"
 			@nodeTypeSelected="nodeTypeSelected"
-			@nodeTypeDragEnd="nodeTypeDragEnd"
 			@closeNodeCreator="closeNodeCreator"
 		/>
 		<div :class="{ 'zoom-menu': true, 'regular-zoom-menu': !isDemo, 'demo-zoom-menu': isDemo, expanded: !sidebarMenuCollapsed }">
@@ -1237,12 +1240,25 @@ export default mixins(
 				this.createNodeActive = false;
 			},
 
-			nodeTypeDragEnd ({ nodeTypeName, event }: { nodeTypeName: string, event: DragEvent }) {
-				this.addNodeButton(nodeTypeName, {
-					position: this.getMousePositionWithinNodeView(event),
-					dragAndDrop: true,
-				});
-				this.createNodeActive = false;
+			onDragOver(event: Event) {
+				event.preventDefault();
+			},
+
+			onDrop(event: DragEvent) {
+				if (!event.dataTransfer) {
+					return;
+				}
+
+				const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
+				if (nodeTypeName) {
+					const mousePosition = this.getMousePositionWithinNodeView(event);
+
+					this.addNodeButton(nodeTypeName, {
+						position: [mousePosition[0] - CanvasHelpers.NODE_SIZE / 2, mousePosition[1] - CanvasHelpers.NODE_SIZE / 2],
+						dragAndDrop: true,
+					});
+					this.createNodeActive = false;
+				}
 			},
 
 			nodeDeselectedByName (nodeName: string) {