drop

src/views/components/Graphics.vue

@@ -77,9 +77,7 @@
                 v-for="elem in item.list"
                 :draggable="true"
                 @dragstart="dragStart($event, elem)"
-                @drag="drag($event, elem)"
-                @dragend="dragEnd()"
-                @click.stop="dragStart($event, elem)"
+                @click.prevent="dragStart($event, elem)"
                 @dblclick.stop="open(elem)"
                 @contextmenu="onContextMenu($event, item, elem)"
               >
@@ -114,8 +112,6 @@
             v-for="elem in subGroups"
             :draggable="true"
             @dragstart="dragStart($event, elem)"
-            @drag="drag($event, elem)"
-            @dragend="dragEnd()"
             @click.stop="dragStart($event, elem)"
             @dblclick.stop="open(elem)"
           >
@@ -261,6 +257,8 @@ const materials = ref([]);
 const pngs = ref([]);
 const icons = ref([]);
 
+let dropped = false;
+
 const groupChange = async (name: string) => {
   activedPanel.value = [];
   activedGroup.value = name;
@@ -394,74 +392,83 @@ const getPrivateGroups = async () => {
 
 const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
   event.stopPropagation();
-
-  let data = null;
-
-  if (!item || (event instanceof DragEvent && !event.dataTransfer)) {
+  if (!item) {
     return;
   }
 
-  if (!item.draggable) {
-    data = item.data;
+  meta2d.canvas.addCaches = [];
+  dropped = false;
+
+  let data = null;
+  const id = item._id || item.id;
+  let isAsync: boolean;
+  if (item.draggable === false) {
+    // 场景
+    data = item.data || item;
   } else if (item['3d']) {
+    // 3D
     data = {
       name: 'iframe',
       width: 400,
       height: 300,
       externElement: true,
-      iframe: 'https://view3d.le5le.com/?id=' + (item._id || item.id),
+      iframe: 'https://view3d.le5le.com/?id=' + id,
     };
-  } else {
-    if (item._id && !item.componentDatas) {
-      let res: any = await getComponents(item._id);
-      item.component = true;
-      item.componentDatas = res.componentDatas;
-      item.componentData = res.componentData;
+  } else if (item.component) {
+    // 我的组件
+    if (!item.componentDatas && !item.componentData) {
+      isAsync = true;
+      const ret: any = await axios.post(`/api/data/le5leV-components/get`, {
+        id,
+      });
+      item.componentDatas = ret.componentDatas;
+      item.componentData = ret.componentData;
     }
-    if (!item.data && !item.component && item.image) {
-      let target: any = event.target;
-      target.children[0] && (target = target.children[0].children[0]);
-      // firefox naturalWidth svg 图片 可能是 0
-      const normalWidth = target.naturalWidth || target.width;
-      const normalHeight = target.naturalHeight || target.height;
-      const [name, lockedOnCombine] = isGif(item.image)
-        ? ['gif', 0]
-        : ['image', undefined];
-
-      data = {
-        name,
-        width: 100,
-        height: 100 * (normalHeight / normalWidth),
-        image: item.image,
-        imageRatio: true,
-        lockedOnCombine,
-      };
-    } else if (item.component) {
-      if (item.componentData) {
-        const pens = convertPen([item.componentData]);
-        data = deepClone(pens);
-      } else if (item.componentDatas) {
-        data = deepClone(item.componentDatas);
-      }
-    } else {
-      data = item.componentDatas || item.data;
+    if (item.componentData) {
+      const pens = convertPen([item.componentData]);
+      data = deepClone(pens);
+    } else if (item.componentDatas) {
+      data = deepClone(item.componentDatas);
     }
-  }
+  } else if (item.data) {
+    // 普通图元
+    data = item.data;
+  } else if (item.image) {
+    // 拖拽图片
+    let target: any = event.target;
+    target.children[0] && (target = target.children[0].children[0]);
+    // firefox naturalWidth svg 图片 可能是 0
+    const normalWidth = target.naturalWidth || target.width;
+    const normalHeight = target.naturalHeight || target.height;
+    const [name, lockedOnCombine] = isGif(item.image)
+      ? ['gif', 0]
+      : ['image', undefined];
 
-  if (event instanceof DragEvent) {
-    meta2d.canvas.addCaches = [];
-    event.dataTransfer?.setData('Meta2d', JSON.stringify(data));
+    data = {
+      name,
+      width: 100,
+      height: 100 * (normalHeight / normalWidth),
+      image: item.image,
+      imageRatio: true,
+      lockedOnCombine,
+    };
   } else {
-    if (!Array.isArray(data)) {
-      data = deepClone([data]);
-    }
-    meta2d.canvas.addCaches = data;
+    return;
   }
-};
 
-const drag = (event: DragEvent, item: any) => {};
+  if (!Array.isArray(data)) {
+    data = deepClone([data]);
+  }
+
+  !dropped && (meta2d.canvas.addCaches = data);
 
-const dragEnd = () => {};
+  if (event instanceof DragEvent) {
+    event.dataTransfer.setData(
+      'Meta2d',
+      isAsync ? undefined : JSON.stringify(data)
+    );
+  }
+};
 
 const dragstart = (event: any) => {
   event.target.style.opacity = 0.5;
@@ -472,7 +479,7 @@ const dragend = (event: any) => {
 };
 
 const open = async (item: any) => {
-  if (item.draggable !== false) {
+  if (!item || item.draggable !== false) {
     return;
   }
   router.push({
@@ -807,13 +814,23 @@ const delComponet = async () => {
   delDialog.show = false;
 };
 
+const drop = (obj: any) => {
+  dropped = true;
+
+  if (obj) {
+    Array.isArray(obj) && open(obj[0]);
+  } else {
+    MessagePlugin.warning('正在请求网络数据中，请稍后重试');
+  }
+};
+
 onMounted(() => {
   groupChange('场景');
   document.addEventListener('dragstart', dragstart, false);
   document.addEventListener('dragend', dragend, false);
 
   setTimeout(() => {
-    meta2d.on('drop', open);
+    meta2d.on('drop', drop);
   }, 2000);
 });
 
@@ -821,7 +838,7 @@ onUnmounted(() => {
   document.removeEventListener('dragstart', dragstart);
   document.removeEventListener('dragend', dragend);
 
-  meta2d.off('drop', open);
+  meta2d.off('drop', drop);
 });
 </script>
 <style lang="postcss" scoped>