From e0c6357576fa02f148bfc4e2f6f78bbea5ffde7f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alexgrozav@Alexs-MacBook-Pro.local>
Date: Tue, 12 Apr 2022 14:20:34 +0300
Subject: [PATCH] :sparkles: Added node draggable placeholder.

---
 .../src/components/NodeCreator/NodeItem.vue   | 33 ++++++++++++++-----
 packages/editor-ui/src/views/NodeView.vue     |  7 +---
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
index 8bff3b056a8d4..9f8461b7e72ab 100644
--- a/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
+++ b/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
@@ -26,6 +26,10 @@
 					})
 				}}
 			</div>
+
+			<div :class="$style.draggable" ref="draggable" v-show="dragging">
+				<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -49,6 +53,11 @@ export default Vue.extend({
 		'nodeType',
 		'bordered',
 	],
+	data(): { dragging: boolean; } {
+		return {
+			dragging: false,
+		};
+	},
 	computed: {
 		shortNodeType() {
 			return this.$locale.shortNodeType(this.nodeType.name);
@@ -57,18 +66,13 @@ export default Vue.extend({
 	methods: {
 		onDragStart(event: DragEvent) {
 			this.$emit('dragstart', event);
+			this.$data.dragging = true;
 
-			const placeholder = document.createElement('div');
-			placeholder.innerText = 'DRAG MEEEE';
-			placeholder.style.position = "absolute";
-			document.body.appendChild(placeholder);
-
-			console.log(this.nodeType);
-
-			event.dataTransfer!.setDragImage(placeholder, 0, 0);
+			event.dataTransfer!.setDragImage(this.$refs.draggable as Element, 0, 0);
 		},
 		onDragEnd(event: Event) {
 			this.$emit('dragend', event);
+			this.$data.dragging = false;
 		},
 	},
 	// @ts-ignore
@@ -122,4 +126,17 @@ export default Vue.extend({
 	display: flex;
 }
 
+.draggable {
+	width: 100px;
+	height: 100px;
+	position: fixed;
+	top: -100px;
+	left: -100px;
+	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;
+}
 </style>
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index ae94ffb488959..9aa07a4413afe 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1323,13 +1323,8 @@ export default mixins(
 				// when pulling new connection from node or injecting into a connection
 				const lastSelectedNode = this.lastSelectedNode;
 
-				console.log(this.lastClickPosition, options.position, CanvasHelpers.GRID_SIZE, CanvasHelpers.NODE_SIZE);
-
 				if (options.position) {
-					newNodeData.position = CanvasHelpers.getNewNodePosition(this.nodes, [
-						options.position[0] - CanvasHelpers.NODE_SIZE / 2,
-						options.position[1] - CanvasHelpers.NODE_SIZE / 2,
-					]);
+					newNodeData.position = CanvasHelpers.getNewNodePosition(this.nodes, options.position);
 				} else if (lastSelectedNode) {
 					const lastSelectedConnection = this.lastSelectedConnection;
 					if (lastSelectedConnection) { // set when injecting into a connection