feat(editor): mapping expressions from input table (#3864)

* implement tree render

* update styles

* implement slots

* fix recursive tree rendering

* make not recursive

* Revert "make not recursive"

f064fc14f4aa78573a8b978887076f5dfdb80d83

* enable dragging

* fix dragging name

* fix col bug

* update values and styles

* update style

* update colors

* update design

* add hover state

* add dragging behavior

* format file

* update pill text

* add depth field

* typo

* add avg height

* update event name

* update expr at distance

* add right margin always

* add space

* handle long values

* update types

* update messages

* update keys styling

* update spacing size

* fix hover bug

* update switch spacing

* fix wrap issue

* update spacing issues

* remove br

* update hoverable

* reduce event

* replace tree

* update prop name

* update tree story

* update tree

* refactor run data

* add unit tests

* add test for nodeclass

* remove number check

* bring back hook

* address review comments

* update margin

* update tests

* address max's feedback

* update tslint issues

* if empty, remove min width

* update spacing back

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

@@ -1,7 +1,8 @@
 <template>
-	<div
+	<component :is="tag"
 		:class="{[$style.dragging]: isDragging }"
 		@mousedown="onDragStart"
+		ref="wrapper"
 	>
 		<slot :isDragging="isDragging"></slot>
 
@@ -12,10 +13,10 @@
 				:style="draggableStyle"
 				v-show="isDragging"
 			>
-				<slot name="preview" :canDrop="canDrop"></slot>
+				<slot name="preview" :canDrop="canDrop" :el="draggingEl"></slot>
 			</div>
 		</Teleport>
-	</div>
+	</component>
 </template>
 
 <script lang="ts">
@@ -39,6 +40,13 @@ export default Vue.extend({
 		data: {
 			type: String,
 		},
+		tag: {
+			type: String,
+			default: 'div',
+		},
+		targetDataKey: {
+			type: String,
+		},
 	},
 	data() {
 		return {
@@ -47,6 +55,7 @@ export default Vue.extend({
 				x: -100,
 				y: -100,
 			},
+			draggingEl: null as null | HTMLElement,
 		};
 	},
 	computed: {
@@ -69,12 +78,21 @@ export default Vue.extend({
 				return;
 			}
 
+			const target = e.target as HTMLElement;
+			if (this.targetDataKey && target && target.dataset.target !== this.targetDataKey) {
+				return;
+			}
+
+			this.draggingEl = target;
+
 			e.preventDefault();
 			e.stopPropagation();
 			this.isDragging = true;
-			this.$store.commit('ui/draggableStartDragging', {type: this.type, data: this.data || ''});
 
-			this.$emit('dragstart');
+			const data = this.targetDataKey ? target.dataset.value : (this.data || '');
+			this.$store.commit('ui/draggableStartDragging', {type: this.type, data });
+
+			this.$emit('dragstart', this.draggingEl);
 			document.body.style.cursor = 'grabbing';
 
 			window.addEventListener('mousemove', this.onDrag);
@@ -112,8 +130,9 @@ export default Vue.extend({
 			window.removeEventListener('mouseup', this.onDragEnd);
 
 			setTimeout(() => {
-				this.$emit('dragend');
+				this.$emit('dragend', this.draggingEl);
 				this.isDragging = false;
+				this.draggingEl = null;
 				this.$store.commit('ui/draggableStopDragging');
 			}, 0);
 		},