feat(editor): Add drag and drop data mapping (#3708)

* commit package lock

* refactor param options out

* use action toggle

* handle click on toggle

* update color toggle

* fix toggle

* show options

* update expression color

* update pointer

* fix readonly

* fix readonly

* fix expression spacing

* refactor input label

* show icon for headers

* center icon

* fix multi params

* add credential options

* increase spacing

* update expression view

* update transition

* update el padding

* rename side to options

* fix label overflow

* fix bug with unnessary lines

* add overlay

* fix bug affecting other pages

* clean up spacing

* rename

* update icon size

* fix toggle in users

* clean up func

* clean up css

* use css var

* fix overlay bug

* clean up input

* clean up input

* clean up unnessary css

* revert

* update quotes

* rename method

* remove console errors

* refactor data table

* add drag button

* make hoverable cells

* add drag hint

* disabel for output panel

* add drag

* disable for readonly

* Add dragging

* add draggable pill

* add mapping targets

* remove font color

* Transferable

* fix linting issue

* teleport component

* fix line

* disable for readonly

* fix position of data pill

* fix position of data pill

* ignore import

* add droppable state

* remove draggable key

* update bg color

* add value drop

* use direct input

* remove transition

* add animation

* shorten name

* handle empty value

* fix switch bug

* fix up animation

* add notification

* add hint

* add tooltip

* show draggable hintm

* fix multiple expre

* fix hoverable

* keep options on focus

* increase timeouts

* fix bug in set node

* add transition on hover out

* fix tooltip onboarding bug

* only update expression if changes

* add open delay

* fix header highlight issue

* update text

* dont show tooltip always

* update docs url

* update ee border

* add sticky behav

* hide error highlight if dropping

* switch out grip icon

* increase timeout

* add delay

* show hint on execprev

* add telemetry event

* add telemetry event

* add telemetry event

* fire event on hint showing

* fix telemetry event

* add path

* fix drag hint issue

* decrease bottom margin

* update mapping keys

* remove file

* hide overflow

* sort params

* add space

* prevent scrolling

* remove dropshadow

* force cursor

* address some comments

* add thead tbody

* add size opt

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

@@ -4,37 +4,106 @@
 		@mousedown="onDragStart"
 	>
 		<slot :isDragging="isDragging"></slot>
+
+		<Teleport to="body">
+			<div
+				ref="draggable"
+				:class="$style.draggable"
+				:style="draggableStyle"
+				v-show="isDragging"
+			>
+				<slot name="preview" :canDrop="canDrop"></slot>
+			</div>
+		</Teleport>
 	</div>
 </template>
 
 <script lang="ts">
+import { XYPosition } from '@/Interface';
 import Vue from 'vue';
 
+// @ts-ignore
+import Teleport from 'vue2-teleport';
+
 export default Vue.extend({
+	components: {
+		Teleport,
+	},
+	props: {
+		disabled: {
+			type: Boolean,
+		},
+		type: {
+			type: String,
+		},
+		data: {
+			type: String,
+		},
+	},
 	data() {
 		return {
 			isDragging: false,
+			draggablePosition: {
+				x: -100,
+				y: -100,
+			},
 		};
 	},
+	computed: {
+		draggableStyle(): { top: string; left: string; } {
+			return {
+				top: `${this.draggablePosition.y}px`,
+				left: `${this.draggablePosition.x}px`,
+			};
+		},
+		canDrop(): boolean {
+			return this.$store.getters['ui/canDraggableDrop'];
+		},
+		stickyPosition(): XYPosition | null {
+			return this.$store.getters['ui/draggableStickyPos'];
+		},
+	},
 	methods: {
-		onDragStart(e: MouseEvent) {
+		onDragStart(e: DragEvent) {
+			if (this.disabled) {
+				return;
+			}
+
 			e.preventDefault();
 			e.stopPropagation();
 			this.isDragging = true;
+			this.$store.commit('ui/draggableStartDragging', {type: this.type, data: this.data || ''});
 
 			this.$emit('dragstart');
 			document.body.style.cursor = 'grabbing';
 
 			window.addEventListener('mousemove', this.onDrag);
 			window.addEventListener('mouseup', this.onDragEnd);
+
+			this.draggablePosition = { x: e.pageX, y: e.pageY };
 		},
 		onDrag(e: MouseEvent) {
+			if (this.disabled) {
+				return;
+			}
+
 			e.preventDefault();
 			e.stopPropagation();
 
-			this.$emit('drag', {x: e.pageX, y: e.pageY});
+			if (this.canDrop && this.stickyPosition) {
+				this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1]};
+			}
+			else {
+				this.draggablePosition = { x: e.pageX, y: e.pageY };
+			}
+
+			this.$emit('drag', this.draggablePosition);
 		},
 		onDragEnd(e: MouseEvent) {
+			if (this.disabled) {
+				return;
+			}
+
 			e.preventDefault();
 			e.stopPropagation();
 
@@ -45,6 +114,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				this.$emit('dragend');
 				this.isDragging = false;
+				this.$store.commit('ui/draggableStopDragging');
 			}, 0);
 		},
 	},
@@ -56,4 +126,14 @@ export default Vue.extend({
 	visibility: visible;
 	cursor: grabbing;
 }
+
+.draggable {
+	position: fixed;
+	z-index: 9999999;
+}
+
+.draggable-data-transfer {
+	width: 0px;
+	height: 0px;
+}
 </style>