feat: 修改需求，增加多选删除功能

profile/.env.xmfire

@@ -1,4 +1,4 @@
-VITE_PRIMARY='#409eff'
+VITE_PRIMARY='#D8000A'
 VITE_TITLE='绘图'
 VITE_ENTRY='/example/fuse/enter-mix.ts'
 VITE_ENTRY_EXAMPLE='./main.ts'

profile/.env.xmfiretest

@@ -1,4 +1,4 @@
-VITE_PRIMARY='#409eff'
+VITE_PRIMARY='#D8000A'
 VITE_TITLE='绘图'
 VITE_ENTRY='/example/fuse/enter-mix.ts'
 VITE_ENTRY_EXAMPLE='./main.ts'

public/static/kankan.html

@@ -66,7 +66,6 @@
       max-height: calc(100vh - 80px);
       overflow-y: auto;
       max-width: 30px;
-      overflow: hidden;
       text-overflow:ellipsis;
       white-space: nowrap;
     }

src/core/components/group/group.vue

@@ -9,7 +9,9 @@
     <PropertyUpdate
       show
       :name="propertyName"
+      :calDelete="true"
       :describes="descs"
+      @delete="deleteHandler"
       @change="changePropertyHandler"
       v-if="setPropertyDatas.length"
     />
@@ -28,7 +30,10 @@ import {
   GroupMatCtxItem,
 } from "./index.ts";
 import { useComponentStatus, useGetShapeBelong } from "@/core/hook/use-component.ts";
-import { useMouseShapeStatus } from "@/core/hook/use-mouse-status.ts";
+import {
+  useMouseShapesStatus,
+  useMouseShapeStatus,
+} from "@/core/hook/use-mouse-status.ts";
 import { useCustomTransformer } from "@/core/hook/use-transformer.ts";
 import { Rect } from "konva/lib/shapes/Rect";
 import { setShapeTransform } from "@/utils/shape.ts";
@@ -80,6 +85,22 @@ const similars = {
   形状: ["rectangle", "circle", "triangle", "polygon"],
 } as Record<string, ShapeType[]>;
 
+const shapesStatus = useMouseShapesStatus();
+const deleteHandler = () => {
+  const delItems = selectIds.value.map(getShapeBelong).filter((item) => !!item);
+  history.onceTrack(() => {
+    delItems.forEach((belong) => {
+      const compDelItem = components[belong.type].delItem;
+      if (compDelItem) {
+        compDelItem(store, belong.item as any, belong.childrenId);
+      } else if (!belong.childrenId) {
+        store.delItem(belong.type, belong.item.id);
+      }
+    });
+  });
+  shapesStatus.selects = [];
+};
+
 const propertyName = computed(() => {
   const types = new Set<ShapeType>();
   const names = new Set<string>();
@@ -150,14 +171,7 @@ const { shape, tData, data } = useComponentStatus<Rect, GroupData>({
       openSnap: false,
       getRepShape($shape) {
         const repShape = new Rect({ fill: themeColor, opacity: 0.3 });
-        const syncShape = () => {
-          autoUpdate.value && (prevMat = $shape.getTransform().copy());
-          console.log("sync");
-        };
-        // $shape.on("bound-change", syncShape);
-        syncShape();
         const update = () => {
-          console.log("update");
           repShape.x($shape.x());
           repShape.y($shape.y());
           repShape.width($shape.width());
@@ -165,10 +179,19 @@ const { shape, tData, data } = useComponentStatus<Rect, GroupData>({
           repShape.scale($shape.scale());
           repShape.rotation($shape.rotation());
         };
-        update();
+        const syncShape = () => {
+          if (autoUpdate.value) {
+            prevMat = $shape.getTransform().copy();
+            update();
+          }
+        };
+        $shape.on("bound-change", syncShape);
+        syncShape();
         return {
           shape: repShape,
-          update() {},
+          update() {
+            // update();
+          },
           destory() {
             $shape.off("bound-change", syncShape);
           },

src/core/components/group/temp-group.vue

@@ -1,6 +1,6 @@
 <template>
   <v-rect
-    :config="{ ...data, opacity: 0, zIndex: undefined, strokeScaleEnable: true }"
+    :config="{ ...data, opacity: 1, zIndex: undefined, strokeScaleEnable: true }"
     ref="shape"
   />
 </template>

src/core/components/line-icon/icon.vue

@@ -46,7 +46,7 @@ import {
   Pos,
   zeroEq,
 } from "@/utils/math.ts";
-import { copy } from "@/utils/shared.ts";
+import { asyncTimeout, copy } from "@/utils/shared.ts";
 import { useTestPoints } from "@/core/hook/use-debugger.ts";
 
 const props = defineProps<{ data: LineIconData }>();
@@ -165,7 +165,7 @@ const line = computed(() => getSnapLine(store, props.data));
 const history = useHistory();
 watch(
   () => ({
-    line: line.value && (copy(line.value) as Pos[]),
+    line: lineRaw.value && (copy(line.value) as Pos[]),
     width: lineRaw.value?.strokeWidth,
   }),
   (newv, oldv) => {
@@ -173,7 +173,6 @@ watch(
     const oldLine = oldv?.line;
     history.preventTrack(() => {
       if (!line) {
-        console.error("找不到line", props.data);
         return emit("delShape");
       }
       if (!oldLine) return;
@@ -227,7 +226,7 @@ watch(
       });
     });
   },
-  { immediate: true, flush: "post" }
+  { immediate: true, flush: "pre" }
 );
 operateMenus.splice(0, 2);
 operateMenus.splice(1, 2);

src/core/components/line/index.ts

@@ -2,7 +2,7 @@ import { lineVector, Pos, vectorAngle, verticalVector } from "@/utils/math.ts";
 import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
-import { inRevise, onlyId, rangMod } from "@/utils/shared.ts";
+import { copy, inRevise, onlyId, rangMod } from "@/utils/shared.ts";
 import { MathUtils } from "three";
 import { DrawStore, useStore } from "@/core/store/index.ts";
 import {

src/core/hook/use-component.ts

@@ -121,11 +121,11 @@ export const useComponentMenus = <T extends DrawItem>(
         );
         copyData.id = onlyId();
         emit("addShape", copyData);
+        status.actives = [];
         await asyncTimeout(100);
         const $stage = stage.value?.getNode();
         if (!$stage) return;
         const $shape = $stage.findOne<Shape>(`#${copyData.id}`);
-        console.log($shape?.id(), copyData.id, data.value.id);
         if ($shape) {
           status.actives = [$shape];
         }