@lvce-editor/virtual-dom 2.4.0 → 2.6.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;
@@ -664,17 +696,7 @@ const getEventListenerArgs = (params, event) => {
 const isInputElement = element => {
   return element instanceof HTMLInputElement;
 };
-const getDragTargetIndex = target => {
-  if (target.dataset.index) {
-    return Number.parseInt(target.dataset.index);
-  }
-  const parentNode = target.closest('[data-index]');
-  if (!parentNode) {
-    return -1;
-  }
-  // @ts-ignore
-  return Number.parseInt(parentNode.dataset.index);
-};
+
 const preventEventsMaybe = (info, event) => {
   if (info.preventDefault === 2) {
     if (!isInputElement(event.target)) {
@@ -686,17 +708,6 @@ const preventEventsMaybe = (info, event) => {
   if (info.stopPropagation) {
     event.stopPropagation();
   }
-  if (event.dataTransfer) {
-    const index = getDragTargetIndex(event.target);
-    if (info.dragInfo) {
-      for (const item of info.dragInfo) {
-        event.dataTransfer.setData(item.type, item.data + index);
-      }
-    }
-    if (info.dragEffect) {
-      event.dataTransfer.effectAllowed = info.dragEffect;
-    }
-  }
 };
 
 const createFn = info => {
@@ -707,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.4.0",
+  "version": "2.6.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/IsInputElement/IsInputElement.ts

@@ -0,0 +1,3 @@
+export const isInputElement = (element: HTMLElement): boolean => {
+  return element instanceof HTMLInputElement
+}

package/src/parts/PreventEventsMaybe/PreventEventsMaybe.ts

@@ -1,18 +1,4 @@
-const isInputElement = (element: HTMLElement): boolean => {
-  return element instanceof HTMLInputElement
-}
-
-const getDragTargetIndex = (target: HTMLElement): number => {
-  if (target.dataset.index) {
-    return Number.parseInt(target.dataset.index)
-  }
-  const parentNode = target.closest('[data-index]')
-  if (!parentNode) {
-    return -1
-  }
-  // @ts-ignore
-  return Number.parseInt(parentNode.dataset.index)
-}
+import { isInputElement } from '../IsInputElement/IsInputElement.ts'
 
 export const preventEventsMaybe = (info: any, event: any): void => {
   if (info.preventDefault === 2) {
@@ -25,15 +11,4 @@ export const preventEventsMaybe = (info: any, event: any): void => {
   if (info.stopPropagation) {
     event.stopPropagation()
   }
-  if (event.dataTransfer) {
-    const index = getDragTargetIndex(event.target)
-    if (info.dragInfo) {
-      for (const item of info.dragInfo) {
-        event.dataTransfer.setData(item.type, item.data + index)
-      }
-    }
-    if (info.dragEffect) {
-      event.dataTransfer.effectAllowed = info.dragEffect
-    }
-  }
 }

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)
+}