Merge branch 'main' of github.com:le5le-com/visualization-design

src/views/components/Graphics.vue

@@ -27,6 +27,7 @@
               @dragstart="dragStart($event, iItem)"
               @drag="drag($event, iItem)"
               @dragend="dragEnd()"
+              @click.stop="dragStart($event, iItem)"
             >
               <t-image v-if="iItem.image" :src="iItem.image" fit="cover" />
               <div class="svg-box" v-else-if="iItem.svg" v-html="iItem.svg" />
@@ -43,56 +44,56 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { shapeLib, chartLib, formLib } from '@/services/defaults';
-import { getPngFolders, getPngs } from '@/services/png';
-import { getIconFolders, getIcons } from '@/services/icons';
-import { getComponents, getComponentsList } from '@/services/api';
-import { convertPen } from '@/services/upgrade';
-import { deepClone } from '@meta2d/core';
-import { isGif } from '@/services/utils';
-
-const activeGroup = ref('图形');
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { shapeLib, chartLib, formLib } from "@/services/defaults";
+import { getPngFolders, getPngs } from "@/services/png";
+import { getIconFolders, getIcons } from "@/services/icons";
+import { getComponents, getComponentsList } from "@/services/api";
+import { convertPen } from "@/services/upgrade";
+import { deepClone } from "@meta2d/core";
+import { isGif } from "@/services/utils";
+
+const activeGroup = ref("图形");
 const groups = reactive([
   {
-    icon: 'desktop',
-    name: '场景',
-    key: '',
+    icon: "desktop",
+    name: "场景",
+    key: "",
   },
   {
-    icon: 'root-list',
-    name: '模板',
-    key: '',
+    icon: "root-list",
+    name: "模板",
+    key: "",
   },
   {
-    icon: 'chart',
-    name: '图表',
-    key: 'chart',
+    icon: "chart",
+    name: "图表",
+    key: "chart",
   },
   {
-    icon: 'control-platform',
-    name: '控件',
-    key: '',
+    icon: "control-platform",
+    name: "控件",
+    key: "",
   },
   {
-    icon: 'image',
-    name: '素材',
-    key: '',
+    icon: "image",
+    name: "素材",
+    key: "",
   },
   {
-    icon: 'file-icon',
-    name: '图标',
-    key: '',
+    icon: "file-icon",
+    name: "图标",
+    key: "",
   },
   {
-    icon: 'chart-bubble',
-    name: '图形',
-    key: 'shape',
+    icon: "chart-bubble",
+    name: "图形",
+    key: "shape",
   },
   {
-    icon: 'app',
-    name: '我的',
-    key: '',
+    icon: "app",
+    name: "我的",
+    key: "",
   },
 ]);
 
@@ -126,7 +127,7 @@ const getCommponentsLib = async () => {
   let list = [];
   for (let key in folderMap) {
     list.push({
-      name: key === 'undefined' ? '未分类' : key,
+      name: key === "undefined" ? "未分类" : key,
       show: true,
       list: folderMap[key],
     });
@@ -137,7 +138,7 @@ const getCommponentsLib = async () => {
 
 const getMaterialLib = async () => {
   const pngs = await getPngFolders();
-  console.log('png', pngs);
+  console.log("png", pngs);
   return pngs;
 };
 let materialLib: any[] = [];
@@ -155,35 +156,35 @@ const groupChange = async (name: string) => {
   activeGroup.value = name;
   showType.value = 0;
   switch (name) {
-    case '场景':
+    case "场景":
       showList.value = [];
       break;
-    case '模版':
+    case "模版":
       showList.value = [];
       break;
-    case '图表':
+    case "图表":
       showList.value = chartLib;
       break;
-    case '控件':
+    case "控件":
       showList.value = formLib;
       break;
-    case '素材':
+    case "素材":
       if (materialLib.length === 0) {
         materialLib = await getMaterialLib();
       }
       console.log(materialLib);
       showList.value = materialLib;
       break;
-    case '图标':
+    case "图标":
       if (iconsLib.length === 0) {
         iconsLib = await getIconsLib();
       }
       showList.value = iconsLib;
       break;
-    case '图形':
+    case "图形":
       showList.value = shapeLib;
       break;
-    case '我的':
+    case "我的":
       showList.value = await getCommponentsLib();
       showType.value = 1;
       break;
@@ -194,7 +195,7 @@ const showList = ref<any[]>([]);
 const showType = ref(0);
 const panelValue = ref([]);
 const handlePanelChange = (e: any) => {
-  console.log('e', e);
+  console.log("e", e);
   // console.log("change", e,panelValue.value);
   // if (activeGroup.value === '素材') {
   //   const data:any = materialLib[e[0]];
@@ -217,9 +218,9 @@ watch(
       return;
     }
     console.log(newOpen);
-    if (activeGroup.value === '素材') {
+    if (activeGroup.value === "素材") {
       const data: any = materialLib[newOpen[0]];
-      console.log('data', data, newOpen[0]);
+      console.log("data", data, newOpen[0]);
       if (!data.list || data.list.length === 0) {
         data.list = await getPngs(
           globalThis.folderJson ? data.pinyin : data.name
@@ -227,7 +228,7 @@ watch(
         console.log(materialLib);
         showList.value = deepClone(materialLib);
       }
-    } else if (activeGroup.value === '图标') {
+    } else if (activeGroup.value === "图标") {
       const data: any = iconsLib[newOpen[0]];
       if (!data.list || data.list.length === 0) {
         data.list = await getIcons(
@@ -239,13 +240,11 @@ watch(
   }
 );
 
-const dragStart = async (event: DragEvent, item: any) => {
-  // console.log('drag', item);
-  console.log(event, item);
-
-  if (!item || !event.dataTransfer) {
+const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
+  if (!item || (event instanceof DragEvent && !event.dataTransfer)) {
     return;
   }
+  let data = null;
   if (item._id && !item.componentDatas) {
     let res: any = await getComponents(item._id);
     item.component = true;
@@ -259,33 +258,35 @@ const dragStart = async (event: DragEvent, item: any) => {
     const normalWidth = target.naturalWidth || target.width;
     const normalHeight = target.naturalHeight || target.height;
     const [name, lockedOnCombine] = isGif(item.image)
-      ? ['gif', 0]
-      : ['image', undefined];
-    event.dataTransfer.setData(
-      'Meta2d',
-      JSON.stringify({
-        name,
-        width: 100,
-        height: 100 * (normalHeight / normalWidth),
-        image: item.image,
-        imageRatio: true,
-        lockedOnCombine,
-      })
-    );
+      ? ["gif", 0]
+      : ["image", undefined];
+
+    data = {
+      name,
+      width: 100,
+      height: 100 * (normalHeight / normalWidth),
+      image: item.image,
+      imageRatio: true,
+      lockedOnCombine,
+    };
   } else if (item.component) {
-    console.log('comp', item.componentDatas, item.componentData);
     if (item.componentData) {
       const pens = convertPen([item.componentData]);
-      meta2d.canvas.addCaches = deepClone(pens);
+      data = deepClone(pens);
     } else if (item.componentDatas) {
-      console.log('进入');
-      meta2d.canvas.addCaches = deepClone(item.componentDatas);
+      data = deepClone(item.componentDatas);
     }
   } else {
-    event.dataTransfer.setData(
-      'Meta2d',
-      JSON.stringify(item.componentDatas || item.data)
-    );
+    data = item.componentDatas || item.data;
+  }
+  if (event instanceof DragEvent) {
+    meta2d.canvas.addCaches = [];
+    event.dataTransfer?.setData("Meta2d", JSON.stringify(data));
+  } else {
+    if (!Array.isArray(data)) {
+      data = deepClone([data]);
+    }
+    meta2d.canvas.addCaches = data;
   }
   event.stopPropagation();
 };
@@ -310,14 +311,14 @@ const getGraphics = async () => {
 };
 
 onMounted(() => {
-  groupChange('图形');
-  document.removeEventListener('dragstart', dragstart);
-  document.removeEventListener('dragend', dragend);
+  groupChange("图形");
+  document.removeEventListener("dragstart", dragstart);
+  document.removeEventListener("dragend", dragend);
 });
 
 onUnmounted(() => {
-  document.addEventListener('dragstart', dragstart, false);
-  document.addEventListener('dragend', dragend, false);
+  document.addEventListener("dragstart", dragstart, false);
+  document.addEventListener("dragend", dragend, false);
 });
 </script>
 <style lang="postcss" scoped>