✨ Added drag and drop animation. Added event cancellation when droppi…

…ng node on main panel.
n8n-io · Apr 14, 2022 · 3764773 · 3764773
1 parent c592d43
commit 3764773
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 19 deletions.
diff --git a/packages/editor-ui/src/components/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/NodeCreator/MainPanel.vue
@@ -1,5 +1,9 @@
 <template>
-	<div @click="onClickInside" class="container">
+	<div
+		class="container"
+		ref="mainPanelContainer"
+		@click="onClickInside"
+	>
 		<SlideTransition>
 			<SubcategoryPanel
 				v-if="activeSubcategory"
@@ -287,7 +291,15 @@ export default mixins(externalHooks).extend({
 			this.searchEventBus.$emit('focus');
 		},
 
-		emitDragEvent(eventName: string, { element, event }: { element: INodeCreateElement, event: Event }) {
+		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,

diff --git a/packages/editor-ui/src/components/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
@@ -28,9 +28,16 @@
 			</div>
 
 			<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>
+			<transition name="node-item-transition">
+				<div
+					:class="$style.draggable"
+					:style="draggableStyle"
+					ref="draggable"
+					v-show="dragging"
+				>
+					<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
+				</div>
+			</transition>
 		</div>
 	</div>
 </template>
@@ -78,6 +85,12 @@ export default Vue.extend({
 		isTrigger (): boolean {
 			return this.nodeType.group.includes('trigger');
 		},
+		draggableStyle(): { top: string; left: string; } {
+			return {
+				top: `${this.draggablePosition.y}px`,
+				left: `${this.draggablePosition.x}px`,
+			};
+		},
 	},
 	mounted() {
 		/**
@@ -100,8 +113,8 @@ export default Vue.extend({
 				event.dataTransfer.setDragImage(this.$refs.draggableDataTransfer as Element, 0, 0);
 			}
 
-			this.$data.dragging = true;
-			this.$data.draggablePosition = { x, y };
+			this.dragging = true;
+			this.draggablePosition = { x, y };
 		},
 		onDragOver(event: DragEvent): void {
 			if (!this.dragging || event.pageX === 0 && event.pageY === 0) {
@@ -110,20 +123,22 @@ export default Vue.extend({
 
 			const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
 
-			this.$data.draggablePosition = { x, y };
+			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.$data.draggablePosition.x,
-				pageY: this.$data.draggablePosition.y,
+				pageX: this.draggablePosition.x,
+				pageY: this.draggablePosition.y,
 			});
 
-			this.$data.dragging = false;
-			this.$data.draggablePosition = { x: -100, y: -100 };
+			this.dragging = false;
+			setTimeout(() => {
+				this.draggablePosition = { x: -100, y: -100 };
+			}, 300);
 		},
 	},
 });
@@ -192,3 +207,20 @@ export default Vue.extend({
 	height: 1px;
 }
 </style>
+
+<style lang="scss" scoped>
+.node-item-transition {
+	&-enter-active,
+	&-leave-active {
+		transition-property: opacity, transform;
+		transition-duration: 300ms;
+		transition-timing-function: ease;
+	}
+
+	&-enter,
+	&-leave-to {
+		opacity: 0;
+		transform: scale(0);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -184,8 +184,8 @@ import '../plugins/N8nCustomConnectorType';
 import '../plugins/PlusEndpointType';
 
 interface AddNodeOptions {
-	openDataDisplay?: boolean;
 	position?: XYPosition;
+	dragAndDrop?: boolean;
 }
 
 export default mixins(
@@ -1243,6 +1243,7 @@ export default mixins(
 			nodeTypeDragEnd ({ nodeTypeName, event }: { nodeTypeName: string, event: DragEvent }) {
 				this.addNodeButton(nodeTypeName, {
 					position: this.getMousePositionWithinNodeView(event),
+					dragAndDrop: true,
 				});
 				this.createNodeActive = false;
 			},
@@ -1383,7 +1384,11 @@ export default mixins(
 				this.$store.commit('setStateDirty', true);
 
 				this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
-				this.$telemetry.trackNodesPanel('nodeView.addNodeButton', { node_type: nodeTypeName, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.trackNodesPanel('nodeView.addNodeButton', {
+					node_type: nodeTypeName,
+					workflow_id: this.$store.getters.workflowId,
+					drag_and_drop: options.dragAndDrop,
+				} as IDataObject);
 
 				// Automatically deselect all nodes and select the current one and also active
 				// current node
@@ -1426,11 +1431,7 @@ export default mixins(
 
 				this.__addConnection(connectionData, true);
 			},
-			async addNodeButton (nodeTypeName: string, options: AddNodeOptions = {
-				openDataDisplay: true,
-			}) {
-				console.log(options.position);
-
+			async addNodeButton (nodeTypeName: string, options: AddNodeOptions = {}) {
 				if (this.editAllowedCheck() === false) {
 					return;
 				}