perfect_graphics

src/services/api.ts

@@ -53,3 +53,13 @@ export async function getLe5le2d(id: string) {
     id,
   });
 }
+
+export async function getComponents(id: string) {
+  return await axios.post(`/data/le5le2d-components/get`, {
+    id,
+  });
+}
+
+export async function getComponentsList(data: any, config: any) {
+  return await axios.post("/data/le5le2d-components/list", data, config);
+}

src/services/png.ts

@@ -34,7 +34,8 @@ export async function getPngs(name: string) {
           : fname
         : fname,
       pinyin: globalThis.fileJson ? fname : null,
-      image: cdn + normalFolder + name + "/" + f.name,
+      // image: cdn + normalFolder + name + "/" + f.name,
+      image: normalFolder + name + "/" + f.name,
     };
   });
 }

src/views/components/Graphics.vue

@@ -17,13 +17,9 @@
           {{ group.name }}
         </div>
       </div>
-      <div class="list">
-        <t-collapse @change="handlePanelChange">
-          <t-collapse-panel
-            :value="item.name"
-            :header="item.name"
-            v-for="item in showList"
-          >
+      <div class="list" :class="showType === 1 ? 'two-list' : ''">
+        <t-collapse v-model:value="panelValue" @change="handlePanelChange">
+          <t-collapse-panel :header="item.name" v-for="item in showList">
             <div
               class="show-item"
               v-for="iItem in item.list"
@@ -47,9 +43,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { shapeLib, chartLib, formLib } from "@/services/defaults";
-import { getPngFolders } from "@/services/png";
+import { getPngFolders, getPngs } from "@/services/png";
+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([
@@ -97,7 +97,41 @@ const groups = reactive([
 
 const getSceneLib = () => {};
 
-const getCommponentsLib = () => {};
+const getCommponentsLib = async () => {
+  const data = {
+    projection: {
+      image: 1,
+      _id: 1,
+      name: 1,
+      folder: 1,
+    },
+  };
+  const config = {
+    params: {
+      current: 1,
+      pageSize: 100,
+    },
+  };
+  const res: any = await getComponentsList(data, config);
+  const folderMap: any = {};
+  res.list?.map((item: any) => {
+    if (!folderMap[item.folder]) {
+      folderMap[item.folder] = [];
+    }
+
+    folderMap[item.folder].push(item);
+  });
+  let list = [];
+  for (let key in folderMap) {
+    list.push({
+      name: key === "undefined" ? "未分类" : key,
+      show: true,
+      list: folderMap[key],
+    });
+  }
+
+  return list;
+};
 
 const getMaterialLib = async () => {
   const [pngs] = await Promise.all([getPngFolders()]);
@@ -107,10 +141,15 @@ const getMaterialLib = async () => {
 let materialLib: any[] = [];
 
 const groupChange = async (name: string) => {
+  panelValue.value = [];
   activeGroup.value = name;
+  showType.value = 0;
   switch (name) {
-    case "图形":
-      showList.value = shapeLib;
+    case "场景":
+      showList.value = [];
+      break;
+    case "模版":
+      showList.value = [];
       break;
     case "图表":
       showList.value = chartLib;
@@ -125,24 +164,100 @@ const groupChange = async (name: string) => {
       console.log(materialLib);
       showList.value = materialLib;
       break;
+    case "图标":
+      showList.value = [];
+      break;
+    case "图形":
+      showList.value = shapeLib;
+      break;
+    case "我的":
+      showList.value = await getCommponentsLib();
+      showType.value = 1;
+      break;
   }
 };
 
 const showList = ref<any[]>([]);
-
-const handlePanelChange = (e) => {
-  console.log("change", e);
+const showType = ref(0);
+const panelValue = ref([]);
+const handlePanelChange = (e: any) => {
+  // console.log("change", e,panelValue.value);
+  // if (activeGroup.value === '素材') {
+  //   const data:any = materialLib[e[0]];
+  //   console.log("data", data.name);
+  //   if (!data.list || data.list.length === 0) {
+  //     data.list = getPngs(globalThis.folderJson?data.pinyin:data.name)
+  //   }
+  // }
 };
 
-const dragStart = (event: DragEvent, item: any) => {
+watch(
+  () => panelValue.value,
+  async (newV: any[], oldV: any[]) => {
+    const newOpen: any = [];
+    for (let v of newV) {
+      !oldV.includes(v) && newOpen.push(v);
+    }
+    if (newOpen.length === 0) {
+      return;
+    }
+    console.log(newOpen);
+    if (activeGroup.value === "素材") {
+      const data: any = materialLib[newOpen[0]];
+      console.log("data", data.name);
+      if (!data.list || data.list.length === 0) {
+        data.list = await getPngs(
+          globalThis.folderJson ? data.pinyin : data.name
+        );
+        console.log(materialLib);
+        showList.value = deepClone(materialLib);
+      }
+    }
+  }
+);
+
+const dragStart = async (event: DragEvent, item: any) => {
+  // console.log('drag', item);
+  console.log(event);
+
   if (!item || !event.dataTransfer) {
     return;
   }
-
-  event.dataTransfer.setData(
-    "Meta2d",
-    JSON.stringify(item.componentData || item.data)
-  );
+  if (item._id && !item.componentDatas) {
+    let res: any = await getComponents(item._id);
+    item.component = true;
+    item.componentDatas = res.componentDatas;
+    item.componentData = res.componentData;
+  }
+  if (!item.data && !item.componentData && 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];
+    event.dataTransfer.setData(
+      "Meta2d",
+      JSON.stringify({
+        name,
+        width: 100,
+        height: 100 * (normalHeight / normalWidth),
+        image: item.image,
+        imageRatio: true,
+        lockedOnCombine,
+      })
+    );
+  } else if (item.componentData) {
+    const pens = convertPen([item.componentData]);
+    meta2d.canvas.addCaches = deepClone(pens);
+  } else {
+    event.dataTransfer.setData(
+      "Meta2d",
+      JSON.stringify(item.componentDatas || item.data)
+    );
+  }
   event.stopPropagation();
 };
 
@@ -237,13 +352,23 @@ onUnmounted(() => {
       }
       .show-item {
         /* padding: 10px; */
-
+        &:hover {
+          cursor: pointer;
+        }
         p {
           /* margin-top: 10px; */
-          height: 10px;
-          line-height: 10px;
+          /* height: 10px;
+          line-height: 10px; */
           text-align: center;
           font-size: 12px;
+          height: 28px;
+          line-height: 14px;
+        }
+        .t-image__wrapper {
+          margin: 10px 14px;
+          height: 32px;
+          width: 32px;
+          background: #fff0;
         }
 
         /* i {
@@ -266,6 +391,25 @@ onUnmounted(() => {
         }
       }
     }
+
+    .two-list {
+      :deep(.t-collapse-panel__content) {
+        padding: 8px;
+        grid-template-columns: 116px 116px;
+        grid-template-rows: 136px;
+      }
+      .show-item {
+        p {
+          margin-top: 10px;
+          margin-bottom: 12px;
+        }
+        .t-image__wrapper {
+          width: 88px;
+          height: 88px;
+          margin-left: 14px;
+        }
+      }
+    }
   }
 }
 </style>

src/views/components/View.vue

@@ -207,7 +207,7 @@ const { dot, setDot, getDot } = useDot();
 const { selections } = useSelection();
 
 const meta2dOptions: Options = {
-  cdn: "https://assets.le5lecdn.com",
+  // cdn: "https://assets.le5lecdn.com",
   rule: true,
   background: "#1e2430",
   x: 32,