@lvce-editor/virtual-dom 2.5.0 → 2.7.0

package/dist/index.js

@@ -577,6 +577,38 @@ const addFileHandle = fileHandle => {
   return add(promise);
 };
 
+const setDragImage = (dataTransfer, label) => {
+  const dragImage = document.createElement('div');
+  dragImage.className = 'DragImage';
+  dragImage.textContent = label;
+  document.body.append(dragImage);
+  dataTransfer.setDragImage(dragImage, -10, -10);
+  const handleTimeOut = () => {
+    dragImage.remove();
+  };
+  setTimeout(handleTimeOut, 0);
+};
+
+const applyDragInfoMaybe = event => {
+  const {
+    target,
+    dataTransfer
+  } = event;
+  if (dataTransfer) {
+    const uid = getComponentUid(target);
+    const dragInfo = getDragInfo(uid);
+    if (!dragInfo) {
+      return;
+    }
+    for (const item of dragInfo) {
+      dataTransfer.setData(item.type, item.data);
+    }
+    if (dragInfo.label) {
+      setDragImage(dataTransfer, dragInfo.label);
+    }
+  }
+};
+
 let ignore = false;
 const startIgnore = () => {
   ignore = true;
@@ -676,16 +708,6 @@ const preventEventsMaybe = (info, event) => {
   if (info.stopPropagation) {
     event.stopPropagation();
   }
-  if (event.dataTransfer) {
-    const uid = getComponentUid(event.target);
-    const dragInfo = getDragInfo(uid);
-    if (!dragInfo) {
-      return;
-    }
-    for (const item of info.dragInfo) {
-      event.dataTransfer.setData(item.type, item.data);
-    }
-  }
 };
 
 const createFn = info => {
@@ -696,6 +718,7 @@ const createFn = info => {
     const uid = getComponentUidFromEvent(event);
     const args = getEventListenerArgs(info.params, event);
     preventEventsMaybe(info, event);
+    applyDragInfoMaybe(event);
     if (args.length === 0) {
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/parts/ApplyDragInfoMaybe/ApplyDragInfoMaybe.ts

@@ -0,0 +1,20 @@
+import { getComponentUid } from '../ComponentUid/ComponentUid.ts'
+import { getDragInfo } from '../DragInfo/DragInfo.ts'
+import { setDragImage } from '../SetDragImage/SetDragImage.ts'
+
+export const applyDragInfoMaybe = (event: any): void => {
+  const { target, dataTransfer } = event
+  if (dataTransfer) {
+    const uid = getComponentUid(target)
+    const dragInfo = getDragInfo(uid)
+    if (!dragInfo) {
+      return
+    }
+    for (const item of dragInfo) {
+      dataTransfer.setData(item.type, item.data)
+    }
+    if (dragInfo.label) {
+      setDragImage(dataTransfer, dragInfo.label)
+    }
+  }
+}

package/src/parts/CreateEventListenerFunction/CreateEventListenerFunction.ts

@@ -1,3 +1,4 @@
+import { applyDragInfoMaybe } from '../ApplyDragInfoMaybe/ApplyDragInfoMaybe.ts'
 import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
 import * as EventState from '../EventState/EventState.ts'
 import * as GetEventListenerArgs from '../GetEventListenerArgs/GetEventListenerArgs.ts'
@@ -13,6 +14,7 @@ export const createFn = (info): any => {
     const uid = ComponentUid.getComponentUidFromEvent(event)
     const args = GetEventListenerArgs.getEventListenerArgs(info.params, event)
     preventEventsMaybe(info, event)
+    applyDragInfoMaybe(event)
     if (args.length === 0) {
       return
     }

package/src/parts/PreventEventsMaybe/PreventEventsMaybe.ts

@@ -1,5 +1,3 @@
-import { getComponentUid } from '../ComponentUid/ComponentUid.ts'
-import { getDragInfo } from '../DragInfo/DragInfo.ts'
 import { isInputElement } from '../IsInputElement/IsInputElement.ts'
 
 export const preventEventsMaybe = (info: any, event: any): void => {
@@ -13,14 +11,4 @@ export const preventEventsMaybe = (info: any, event: any): void => {
   if (info.stopPropagation) {
     event.stopPropagation()
   }
-  if (event.dataTransfer) {
-    const uid = getComponentUid(event.target)
-    const dragInfo = getDragInfo(uid)
-    if (!dragInfo) {
-      return
-    }
-    for (const item of info.dragInfo) {
-      event.dataTransfer.setData(item.type, item.data)
-    }
-  }
 }

package/src/parts/SetDragImage/SetDragImage.ts

@@ -0,0 +1,14 @@
+export const setDragImage = (
+  dataTransfer: DataTransfer,
+  label: string,
+): void => {
+  const dragImage = document.createElement('div')
+  dragImage.className = 'DragImage'
+  dragImage.textContent = label
+  document.body.append(dragImage)
+  dataTransfer.setDragImage(dragImage, -10, -10)
+  const handleTimeOut = (): void => {
+    dragImage.remove()
+  }
+  setTimeout(handleTimeOut, 0)
+}