feat:新增一键更新我的组件

src/services/updateC.ts

@@ -0,0 +1,104 @@
+import { deepClone, getAllChildren } from '@meta2d/core';
+
+import axios from 'axios';
+import { MessagePlugin } from 'tdesign-vue-next';
+export async function updateC() {
+  MessagePlugin.loading('正在更新...',2000);
+  const scale = meta2d.store.data.scale;
+  //所有需要更新的自定义组件
+  let cPens = meta2d.store.data.pens.filter(
+    (pen: any) => pen.name === 'combine' && pen.componentId
+  );
+  meta2d.canvas.opening = true;
+ // let replacePens = []; //所有需要替换
+//  cPens.forEach((pen) => {
+ //   replacePens.push(getAllChildren(pen, meta2d.store));
+ // });
+  let cMap = {};
+  cPens.forEach((pen: any) => {
+    if (!cMap[pen.componentId]) {
+      cMap[pen.componentId] = [];
+    }
+    cMap[pen.componentId].push(pen.id);
+  });
+  //let deletePens = [];
+  for (let key in cMap) {
+    const newData = await axios.post(`/api/data/v.component/get`, {
+      id: key,
+      projection: 'data,id,name',
+    });
+    if(!newData){
+      continue;
+    }
+    for (let i = 0; i < cMap[key].length; i++) {
+      let id = cMap[key][i];
+      let componentDatas = deepClone(newData.data.componentDatas);
+      componentDatas[0].componentId = key;
+      componentDatas.forEach((item)=>{
+          item.originId = item.id;
+      })
+      let beforeP:any = meta2d.store.pens[id];
+      let beforePens = deepClone(getAllChildren(beforeP, meta2d.store));
+      let rect = beforeP.calculative.worldRect; //meta2d.getPenRect(beforeP);
+      //更新新组件大小位置
+      componentDatas[0].width = rect.width/scale;
+      componentDatas[0].height = rect.height/scale;
+      componentDatas[0].x = rect.x;
+      componentDatas[0].y = rect.y;
+      // deletePens.push(beforeP);
+      //删除原组件
+      meta2d.delete([beforeP], true);
+
+      //更新新组件
+      //拖拽前ids
+      const beforeIds = componentDatas.map((pen) => pen.id);
+      await meta2d.canvas.dropPens(
+        componentDatas,
+        {
+          x: rect.x + rect.width / 2,
+          y: rect.y + rect.height / 2,
+        }
+      );
+      //拖拽前ids
+      const afterIds = componentDatas.map((pen) => pen.id);
+
+      // meta2d.addPens(deepClone(componentDatas));
+      let childrenMap = {};
+      componentDatas.forEach((pen) => {
+        let idIdx = afterIds.indexOf(pen.id);
+        let matchPen:any = beforePens.find((p: any) => p.originId ===beforeIds[idIdx]);
+        if (matchPen) {
+          //更新更新的图元id为原拖拽到画布的id
+          meta2d.changePenId(pen.id, matchPen.id);
+          childrenMap[pen.id] = matchPen.id;
+          if(matchPen.connectedLines){
+            //更新连接关系中的锚点id
+            for(let j=0;j<matchPen.anchors.length;j++){
+              let line = matchPen.connectedLines.find((_line)=>_line.anchor===matchPen.anchors[j].id);
+              if(line){
+                line.anchor = pen.anchors[j].id;
+              }
+            }
+          }
+          pen.connectedLines = deepClone(matchPen.connectedLines);
+        //  pen.originId = matchPen.originId;
+        }
+      });
+      meta2d.changePenId(componentDatas[0].id, beforeP.id);
+      componentDatas[0].connectedLines = deepClone(beforeP.connectedLines);
+      componentDatas[0].children = componentDatas[0].children.map((item) => {
+        if (childrenMap[item]) {
+          return childrenMap[item];
+        }else return item;
+      });
+     // componentDatas[0].originId = beforeP.originId;
+      //componentDatas[0].componentId = beforeP.componentId;
+      // meta2d.addPens(deepClone(componentDatas));
+    }
+  }
+  //删除原组件
+  // meta2d.delete(deletePens);
+  meta2d.inactive(); // dropPens默认会选中新添加的图元，这里取消选中
+  meta2d.render(true);
+  // MessagePlugin.closeAll();
+}

src/views/components/ContextMenu.vue

@@ -12,6 +12,7 @@
       </t-menu-item>
     </template>
     <template v-if="props.type === 'pen'">
+      <t-menu-item v-if="!selections.mode&&hasC()" value="updateC"> 一键更新我的组件 </t-menu-item>
       <t-menu-item :disabled="!selections.mode" value="top"> 置顶 </t-menu-item>
       <t-menu-item :disabled="!selections.mode" value="bottom">
         置底
@@ -64,6 +65,7 @@
 import { onMounted, ref } from 'vue';
 import { LockState, Pen, PenType } from '@meta2d/core';
 import { useSelection, SelectionMode } from '@/services/selections';
+import { updateC } from '@/services/updateC';
 
 const props = defineProps({
   type: String,
@@ -159,10 +161,18 @@ const onMenu = (val: string) => {
         }
       );
       break;
+    case 'updateC':
+      updateC();
+      break;
   }
 
   emit('changeVisible', false);
 };
+
+const hasC =() => {
+  return meta2d?.store.data.pens?.some((pen: Pen) => pen.name === "combine");
+}
+
 </script>
 
 <style lang="postcss" scoped>

src/views/components/Graphics.vue

@@ -1167,7 +1167,10 @@ const dragStart = async (event: DragEvent | MouseEvent|TouchEvent, item: any) =>
       const ret: any = await axios.post(`/api/data/v.component/get`, {
         id,
       });
-      
+      ret.data.componentDatas[0].componentId = id;
+      ret.data.componentDatas.forEach((item)=>{
+          item.originId = item.id;
+      });
       item.componentDatas = ret.data.componentDatas;
       item.componentData = ret.data.componentData;
     }