fix: 1

public/static/kankan.html

@@ -27,7 +27,6 @@
   <script>
     const params = new URLSearchParams(location.search)
     const env = params.get('env')
-    console.log(env)
     let host = 'http://192.168.0.25'
     if (env === 'prod') {
       host = ''
@@ -52,8 +51,9 @@
       init()
     }
 
-    const init = () => {
+    const init = async () => {
       if (loadPackCount < 2) return;
+      await setTimeout(() => {}, 1000)
       var kankan = new KanKan({
         dom: '#scene',
         num: params.get('m'),

src/core/components/icon/icon.vue

@@ -93,11 +93,6 @@ const { shape, tData, data, operateMenus, describes } = useComponentStatus({
 });
 
 const status = useMouseShapeStatus(shape);
-watchEffect(() => {
-  if (status.value.active) {
-    console.error(props.data);
-  }
-});
 if (props.data.fixScreen) {
   const other = ref({ rotate: 0 });
   mergeDescribes(other, {}, ["rotate"], describes);

src/core/components/line/use-draw.ts

@@ -369,6 +369,8 @@ export const normalLineData = (data: LineData, ctx: NLineDataCtx) => {
     ...Object.values(ctx.update.points),
   ];
 
+
+  // 合并相同点
   for (const p2 of changePoints) {
     const ndx = data.points.findIndex((item) => item.id === p2.id);
     if (!~ndx) continue;
@@ -383,6 +385,16 @@ export const normalLineData = (data: LineData, ctx: NLineDataCtx) => {
     }
   }
 
+  // 删除线a b 点一样的线段
+  for (let i = 0; i < data.lines.length; i++) {
+    const line = data.lines[i]
+    if (line.a === line.b) {
+      data.lines.splice(i--, 1)
+    }
+  }
+
+
+  // 删除游离点
   const pointIds = Object.values(ctx.del.lines).flatMap(item => [item.a, item.b])
   pointIds.push(...Object.keys(ctx.add.points))
   const linePointIds = data.lines.flatMap(item => [item.a, item.b])
@@ -392,6 +404,5 @@ export const normalLineData = (data: LineData, ctx: NLineDataCtx) => {
       ~ndx && data.points.splice(ndx, 1)
     }
   }
-
   return deduplicateLines(data);
 };

src/core/hook/use-selection.ts

@@ -28,12 +28,7 @@ import {
 import { EntityShape } from "@/deconstruction";
 import { Util } from "konva/lib/Util";
 import { useViewerInvertTransform } from "./use-viewer";
-import {
-  debounce,
-  diffArrayChange,
-  mergeFuns,
-  onlyId,
-} from "@/utils/shared";
+import { debounce, diffArrayChange, mergeFuns, onlyId } from "@/utils/shared";
 import { IRect } from "konva/lib/types";
 import { useMouseShapesStatus } from "./use-mouse-status";
 import Icon from "../components/icon/temp-icon.vue";
@@ -45,6 +40,7 @@ import { Stage } from "konva/lib/Stage";
 import { useOnComponentBoundChange } from "./use-component";
 import { useHistory } from "./use-history";
 import { isRectContained } from "@/utils/math";
+import { useTransformer } from "./use-transformer";
 
 const normalSelectIds = (
   store: DrawStore,
@@ -121,6 +117,7 @@ export const useSelection = installGlobalVar(() => {
   const stage = useStage();
   const operMode = useOperMode();
   const selections = ref<EntityShape[]>();
+  const transformer = useTransformer();
 
   let shapeBoxs: IRect[] = [];
   let shapes: EntityShape[] = [];
@@ -130,8 +127,15 @@ export const useSelection = installGlobalVar(() => {
     selections.value = [];
 
     for (let i = 0; i < shapeBoxs.length; i++) {
-      if (Util.haveIntersection(boxRect, shapeBoxs[i]) && !isRectContained(shapeBoxs[i], boxRect))
-        selections.value.push(shapes[i]);
+      if (
+        Util.haveIntersection(boxRect, shapeBoxs[i]) &&
+        !isRectContained(shapeBoxs[i], boxRect) &&
+        shapes[i] !== toRaw(transformer)
+      ) {
+        if (!selections.value.includes(shapes[i])) {
+          selections.value.push(shapes[i]);
+        }
+      }
     }
   };
 
@@ -247,7 +251,7 @@ const useWatchSelection = () => {
     watch(
       () => status.selects,
       (shapes) => {
-        const fShapes = Array.from(new Set(shapes))
+        const fShapes = Array.from(new Set(shapes));
         const { added, deleted } = diffArrayChange(shapes, fShapes);
         if (added.length || deleted.length) {
           status.selects = fShapes;
@@ -261,7 +265,7 @@ const useWatchSelection = () => {
     delShapes,
     watchSelection,
   };
-}
+};
 
 const useWatchSelectionGroup = () => {
   const stage = useStage();
@@ -356,7 +360,7 @@ export const useSelectionRevise = () => {
     }
   );
 
-  const ids = computed(() => status.selects.map((item) => item.id()));
+  const ids = computed(() => [...new Set(status.selects.map((item) => item.id()))]);
   const groupConfig = {
     id: onlyId(),
     createTime: Date.now(),

src/core/hook/use-transformer.ts

@@ -266,6 +266,8 @@ export const useShapeDrag = (shape: Ref<DC<EntityShape> | undefined>) => {
       }
     };
     const leave = () => {
+      stopMove && stopMove()
+      stopMove = null
       if (start) {
         offset.value = void 0;
         mode.pop();
@@ -275,29 +277,40 @@ export const useShapeDrag = (shape: Ref<DC<EntityShape> | undefined>) => {
       }
     };
 
-    shape.draggable(true);
-    shape.dragBoundFunc((_, ev) => {
-      if (!start) {
-        // enter(conversion(getOffset(ev, dom)));
-        return shape.absolutePosition();
-      } else if (can.dragMode) {
-        const end = conversion(getOffset(ev, dom));
-        offset.value = {
-          x: end.x - start.x,
-          y: end.y - start.y,
-        };
-      }
-      return shape.absolutePosition();
-    });
-
+    // shape.draggable(true);
+    // shape.dragBoundFunc((_, ev) => {
+    //   if (!start) {
+    //     // enter(conversion(getOffset(ev, dom)));
+    //     return shape.absolutePosition();
+    //   } else if (can.dragMode) {
+    //     const end = conversion(getOffset(ev, dom));
+    //     offset.value = {
+    //       x: end.x - start.x,
+    //       y: end.y - start.y,
+    //     };
+    //   }
+    //   return shape.absolutePosition();
+    // });
+
+    let stopMove: (() => void) | null = null
     shape.on("pointerdown.mouse-drag", (ev) => {
       if (ev.evt.button !== 0) return;
       enter(conversion(getOffset(ev.evt)));
+      stopMove = listener(document.documentElement, "pointermove", (ev) => {
+        if (start && can.dragMode) {
+          const end = conversion(getOffset(ev, dom));
+
+          offset.value = {
+            x: end.x - start.x,
+            y: end.y - start.y,
+          };
+        }
+      })
     });
 
     return mergeFuns([
       () => {
-        shape.draggable(false);
+        // shape.draggable(false);
         shape.off("pointerdown.mouse-drag");
         start && leave();
       },
@@ -312,7 +325,7 @@ export const useShapeDrag = (shape: Ref<DC<EntityShape> | undefined>) => {
   watch(
     () =>
       (can.editMode || mode.include(Mode.update)) &&
-      (status.value.active || status.value.hover) &&
+      (status.value.active || status.value.press || status.value.hover) &&
       !result.isPause,
     (canEdit, _, onCleanup) => {
       canEdit && onCleanup(init(shape.value!.getNode()));
@@ -530,7 +543,7 @@ export const useShapeTransformer = <T extends EntityShape>(
         watch(
           () =>
             (can.editMode || mode.include(Mode.update)) &&
-            (status.value.active || status.value.hover),
+            (status.value.active || status.value.hover || status.value.press),
           (canEdit, _, onCleanup) => {
             if (canEdit) {
               const stop = init(shape.getNode());

src/utils/event.ts

@@ -126,7 +126,7 @@ export const getTouchScaleProps = (ev: TouchEvent, dom = ev.target! as HTMLEleme
 };
 
 export const getOffset = (ev: MouseEvent | TouchEvent, dom = ev.target! as HTMLElement, ndx = 0) => {
-	const event = ev instanceof TouchEvent ? ev.changedTouches[ndx] : ev
+	const event: any = (window.TouchEvent && ev instanceof window.TouchEvent) ? ev.changedTouches[ndx] : ev
 	const rect = dom.getBoundingClientRect();
 	const offsetX = event.clientX - rect.left;
 	const offsetY = event.clientY - rect.top;