fix: 修改不动尺寸bound显示问题

src/app/liantong/icon.ts

@@ -28,10 +28,10 @@ for (const key in svgs) {
     const svgAct = pathsToActShape({
       paths: svgs[key],
       size: [1000, 800],
-      realWidth: 50,
+      realWidth: 100,
       offset: [0, 100],
       strokeWidth: 5,
-      fixed: false,
+      fixed: true,
       strokeColor: "#000000",
     });
 

src/app/liantong/index.ts

@@ -77,6 +77,7 @@ export const createBoard = (
       board.bound.setSize(dom.offsetWidth, dom.offsetHeight);
     },
     get room() {
+      console.log(getRoom().attrib);
       return getRoom();
     },
   };

src/board/env.ts

@@ -1,4 +1,6 @@
-export const DEV = false;
+export let DEV = false;
+
+export const changeEnv = (dev: boolean) => (DEV = dev);
 export const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 export const hasTouchEvents =
   "ontouchstart" in window ||

src/board/packages/container.ts

@@ -99,10 +99,19 @@ export class Container<
         types[key],
         this,
         (instance) => {
+          const entity = instance as Entity;
           if (!this.entrys[key]) {
             this.entrys[key] = [];
           }
-          this.entrys[key].push(instance);
+          this.entrys[key].push(entity);
+          const destory = entity.destory.bind(entity);
+          entity.destory = () => {
+            destory();
+            const ndx = this.entrys[key].indexOf(entity);
+            if (~ndx) {
+              this.entrys[key].splice(ndx, 1);
+            }
+          };
         },
         (instance) => {
           if (!instance.actShape?.active) return;

src/board/packages/whole-line/editable/edit-whole-line.ts

@@ -11,12 +11,14 @@ import {
   fixWholeLineConfig,
   getWholeLineLine,
   getWholeLineLinesRawByPoint,
+  getWholeLinePolygonLinesByPoint,
   getWholeLinePolygonPoints,
   getWholeLinePolygonRaw,
   mergeWholeLinePointsByPoint,
   penWholeLinePoygonsEditWithHelperShapesMouse,
   repeatMoveWholeLineLine,
   spliceWholeLineLineByPoint,
+  updateConstant,
   wholeLineDelPolygon,
 } from "../service";
 import {
@@ -42,7 +44,7 @@ export class EditWholeLine<
     EntityDragHandlers<WholeLineLineAttrib, (move: number[]) => void>
   >;
   pointDragHandler: Required<
-    EntityDragHandlers<WholeLinePointAttrib, number[]>
+    EntityDragHandlers<WholeLinePointAttrib, number[][][]>
   >;
 
   diffRedraw() {
@@ -95,7 +97,7 @@ export class EditWholeLine<
           quotePoint: true,
           autoClose: false,
           tree: this.container,
-          adsorbRadius: 10,
+          adsorbRadius: getRealAbsoluteSize(this.shape, [5, 5], true)[0],
           config: this.attrib,
           changePolygon: (pid) => {
             if (pid) {
@@ -104,6 +106,7 @@ export class EditWholeLine<
           },
           quitHandler: () => {
             this.container.bus.emit("dataChangeAfter");
+            this.endCreatePolygon = null;
             for (const pid of prePolygonIds) {
               const polygonAttrib = getWholeLinePolygonRaw(this.attrib, pid);
               if (!polygonAttrib) return;
@@ -134,6 +137,7 @@ export class EditWholeLine<
   }
 
   pointAfterHandler(pointAttrib: WholeLinePointAttrib) {
+    updateConstant(getRealAbsoluteSize(this.container.stage, [1, 1], true)[0]);
     const merge = mergeWholeLinePointsByPoint(this.attrib, pointAttrib.id);
     spliceWholeLineLineByPoint(
       this.attrib,
@@ -143,6 +147,7 @@ export class EditWholeLine<
   }
 
   lineAfterHandler(lineAttrib: WholeLineLineAttrib) {
+    updateConstant(getRealAbsoluteSize(this.container.stage, [1, 1], true)[0]);
     for (let i = 0; i < lineAttrib.pointIds.length; i++) {
       spliceWholeLineLineByPoint(this.attrib, lineAttrib.pointIds[i]);
     }
@@ -150,6 +155,7 @@ export class EditWholeLine<
   }
 
   polygonAfterHandler(polygonAttrib: WholeLinePolygonAttrib) {
+    updateConstant(getRealAbsoluteSize(this.container.stage, [1, 1], true)[0]);
     getWholeLinePolygonPoints(this.attrib, polygonAttrib.id).forEach(
       (attrib) => {
         if (this.attrib.points.includes(attrib)) {
@@ -183,21 +189,38 @@ export class EditWholeLine<
 
     this.pointDragHandler = {
       readyHandler: (attrib) => {
-        // this.container.tempDraw(...this.getChildByPointsAttrib([attrib]));
         this.container.bus.emit("dataChangeBefore");
-        return [attrib.x, attrib.y];
+        const polygons = getWholeLinePolygonLinesByPoint(
+          this.attrib,
+          attrib.id
+        );
+        const pointsArray = polygons.map(({ polygonId }) => {
+          let points = getWholeLinePolygonPoints(this.attrib, polygonId);
+          const startNdx = points.indexOf(attrib);
+          points = [
+            ...points.slice(startNdx, points.length - 1),
+            ...points.slice(0, startNdx),
+          ];
+          return points.map((point) => [point.x, point.y]);
+        });
+        return pointsArray;
       },
-      moveHandler: (pointAttrib, move) => {
+      moveHandler: (pointAttrib, move, pointsArray) => {
         const exclusionIds = getWholeLineLinesRawByPoint(
           this.attrib,
           pointAttrib
         ).map((line) => WholeLineLine.namespace + line.id);
         exclusionIds.push(WholeLinePoint.namespace + pointAttrib.id);
 
-        const [radius] = getRealAbsoluteSize(this.container.stage, [10, 10]);
+        const [radius] = getRealAbsoluteSize(
+          this.container.stage,
+          [10, 10],
+          true
+        );
         const [radiusInner] = getRealAbsoluteSize(
           this.container.stage,
-          [500, 500]
+          [500, 500],
+          true
         );
 
         const position = getAdsorbPosition({
@@ -205,6 +228,7 @@ export class EditWholeLine<
           position: move,
           radius,
           radiusInner,
+          pointsArray,
           exclusionIds: exclusionIds,
         });
         pointAttrib.x = position[0];

src/board/packages/whole-line/editable/pen-whole-line.ts

@@ -193,6 +193,7 @@ export class PenEditWholeLine<
     const { helperInfo: helperInfoRaw, destory: mouseDestory } =
       penWholeLinePoygonsEditWithHelperMouse({
         ...props,
+        closeAutoQuit: true,
         tree: this.container,
         autoClose: this.autoClose,
         config: this.attrib,

src/board/packages/whole-line/service/constant.ts

@@ -1,5 +1,10 @@
 // 点位相同距离
-export const WHOLE_LINE_POINT_EQ_DIST = 0.001;
+export let WHOLE_LINE_POINT_EQ_DIST = 0.001;
 
 // 需要合并距离
-export const WHOLE_LINE_POINT_MERGE_DIST = 10;
+export let WHOLE_LINE_POINT_MERGE_DIST = 10;
+
+export const updateConstant = (scale: number) => {
+  WHOLE_LINE_POINT_EQ_DIST *= scale;
+  WHOLE_LINE_POINT_MERGE_DIST *= scale;
+};

src/board/packages/whole-line/service/whole-line-edit.ts

@@ -6,7 +6,12 @@ import {
   WholeLinePolygonAttrib,
 } from "../view";
 import { KonvaEventObject } from "konva/lib/Node";
-import { getFlatChildren, round, shapeParentsEq } from "../../../shared";
+import {
+  getFlatChildren,
+  getRealAbsoluteSize,
+  round,
+  shapeParentsEq,
+} from "../../../shared";
 import {
   wholeLineAddPoint,
   wholeLineFixLineAddPoint,
@@ -250,13 +255,15 @@ export const penWholeLinePoygonsEdit = <
         return continuous(evt);
       }
     } else if (prevId) {
+      const [offset] = getRealAbsoluteSize(tree.stage, [4, 4], true);
       const prev = getWholeLinePoint(config, prevId);
       if (
         !(
-          Math.abs(pointAttrib.x - prev.x) > 4 ||
-          Math.abs(pointAttrib.y - prev.y) > 4
+          Math.abs(pointAttrib.x - prev.x) > offset ||
+          Math.abs(pointAttrib.y - prev.y) > offset
         )
       ) {
+        console.log(offset, pointAttrib, prev);
         return { change, isClose };
       }
 

src/board/packages/whole-line/service/whole-line-helper.ts

@@ -35,7 +35,10 @@ export type WholeLineHelperInfoAL = ReturnType<
 export const penWholeLinePoygonsEditWithHelperMouse = <
   P extends Omit<WholeLinePointAttrib, "id">
 >(
-  props: PenWholeLinePoygonsEditProps<P> & { quitHandler?: () => void }
+  props: PenWholeLinePoygonsEditProps<P> & {
+    quitHandler?: () => void;
+    closeAutoQuit?: boolean;
+  }
 ) => {
   const copyAttrib = () =>
     JSON.parse(JSON.stringify(props.config)) as WholeLineAttrib<P & Attrib>;
@@ -80,16 +83,17 @@ export const penWholeLinePoygonsEditWithHelperMouse = <
 
   let prevOffset: { x: number; y: number };
   const clickHandler = (evt: KonvaEventObject<any>) => {
+    const [offset] = getRealAbsoluteSize(stage, [4, 4], true);
     if (
       prevOffset &&
-      Math.abs(evt.evt.offsetX - prevOffset.x) < 4 &&
-      Math.abs(evt.evt.offsetY - prevOffset.y) < 4
+      Math.abs(evt.evt.offsetX - prevOffset.x) < offset &&
+      Math.abs(evt.evt.offsetY - prevOffset.y) < offset
     ) {
       return;
     } else {
       const { isClose } = edit.continuous(evt);
       syncHelper();
-      if (isClose) {
+      if (isClose && props.closeAutoQuit) {
         leaveEditMode();
       }
       prevOffset = null;

src/board/packages/whole-line/style.ts

@@ -108,7 +108,6 @@ export const polygonShapeFactory = (props: PolygonShapeProps = {}) => {
     fill = "#" + color.getHexString();
   }
 
-  console.log(fill);
   const group = new Group();
   const path = new Line({
     closed: true,

src/board/plugins/camera-plugin.ts

@@ -226,6 +226,7 @@ export class CameraQueryPlugin {
     mat.decompose(translate, quaternion, scale);
     // 将四元数转换为欧拉角
     const euler = new Euler().setFromQuaternion(quaternion, "XYZ");
+    console.log(euler, scale, translate);
     // 提取绕Z轴的旋转，即二维旋转角度
     const rotationZ = euler.z; // 在Three.js中，角度是以弧度表示的
 

src/board/shared/act.ts

@@ -27,7 +27,7 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
         data,
         id: `path-${ndx}`,
         name: `path`,
-        strokeScaleEnabled: false,
+        strokeScaleEnabled: !!props.fixed,
         stroke: strokeColor,
         fill: strokeColor,
         scale: { x: scale, y: scale },

src/board/shared/adsorb.ts

@@ -166,12 +166,11 @@ export const getAdsorbCrossPosition = ({
   points,
 }: AdsorbSelfLinesProps) => {
   if (!points?.length) return;
-
   if (points.length === 1) {
     const point = points[0];
     const refLines = [
-      [point[0] - 50, point[1], point[0] + 100, point[1]],
-      [point[0], point[1] - 50, point[0], point[1] + 50],
+      [point[0] - 1, point[1], point[0] + 1, point[1]],
+      [point[0], point[1] - 1, point[0], point[1] + 1],
     ];
     return getAdsorbLinePositionRaw({ position, refLines, angle });
   }

src/board/shared/shape-helper.ts

@@ -27,9 +27,13 @@ export function getTfScaleFactors(tf: Transform) {
   return { x: scaleX, y: scaleY };
 }
 
-export const getRealAbsoluteSize = (shape: Node, size: number[]) => {
+export const getRealAbsoluteSize = (
+  shape: Node,
+  size: number[],
+  includeSelf = false
+) => {
   let current = shape;
-  let scale = { x: 1, y: 1 };
+  let scale = includeSelf ? shape.scale() : { x: 1, y: 1 };
   while ((current = current.parent)) {
     const cScale = current.scale();
 

src/board/shared/shape-mose.ts

@@ -8,10 +8,12 @@ import { KonvaEventObject } from "konva/lib/Node";
 let mouseDisabled = false;
 const dragShapes: (Shape | Group)[] = [];
 export const disableMouse = () => {
+  console.log("disable mose");
   mouseDisabled = true;
   dragShapes.forEach((shape) => shape.draggable(false));
 };
 export const enableMouse = () => {
+  console.log("enable mose");
   mouseDisabled = false;
   dragShapes.forEach((shape) => shape.draggable(true));
 };

src/components/query-board/index.vue

@@ -35,7 +35,10 @@ import { EditWholeLine } from "../../board/packages";
 import storeData from "./storeData.json";
 import { ElButton } from "element-plus";
 import { createBoard, EditPoi } from "../../app/liantong";
+import { changeEnv } from "../../board/env";
+import { Matrix4 } from "three";
 
+changeEnv(true);
 withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number }>(), {
   width: 320,
   height: 150,
@@ -44,11 +47,32 @@ withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number
 type Board = ReturnType<typeof createBoard>;
 
 const board = createBoard();
-board.bound.autoBound(60);
+board.bound.setBound([-9.0754444, -5.6740986, 9.0754444, 5.6740986]);
+const mat = new Matrix4();
+mat.fromArray([
+  1,
+  0,
+  -0,
+  0,
+  -0,
+  0.00009999999949994454,
+  -0.999999995,
+  0,
+  0,
+  0.999999995,
+  0.00009999999949994454,
+  0,
+  0,
+  10,
+  0,
+  1,
+]);
+
+board.bound.setCameraMat(new Matrix4().makeRotationX(-Math.PI / 2).multiply(mat));
 
 setTimeout(() => {
-  board.setData(storeData);
-  board.bound.autoBound(60);
+  // board.setData(storeData);
+  // board.bound.autoBound(60);
 }, 500);
 
 const activeEntity = shallowRef<EditPoi>();

src/components/query-board/storeData.json

@@ -1,42 +1,37 @@
 {
   "rooms": [
     {
-      "id": "1",
+      "id": "0",
       "points": [
         {
-          "x": 360,
-          "y": 232,
+          "x": -2.506408799670238,
+          "y": -840.768063181097,
           "id": "2"
         },
         {
-          "x": 773,
-          "y": 206,
+          "x": -2.506408799670201,
+          "y": -652.7722602090475,
           "id": "3"
         },
         {
-          "x": 734,
-          "y": 455,
+          "x": 5.169935762901897,
+          "y": -730.7705188889404,
           "id": "4"
         },
         {
-          "x": 339,
-          "y": 440,
+          "x": -2.5064087996702518,
+          "y": -966.7652502793854,
           "id": "5"
-        },
-        {
-          "x": 688,
-          "y": 606,
-          "id": "8"
-        },
-        {
-          "x": 443,
-          "y": 594,
-          "id": "9"
-        },
+        }
+      ],
+      "polygons": [
         {
-          "x": 556.8756799999999,
-          "y": 448.27376,
-          "id": "10"
+          "id": "2",
+          "lineIds": [
+            "2",
+            "3",
+            "4"
+          ]
         }
       ],
       "lines": [
@@ -55,80 +50,14 @@
           ]
         },
         {
-          "id": "5",
-          "pointIds": [
-            "5",
-            "2"
-          ]
-        },
-        {
-          "id": "8",
-          "pointIds": [
-            "8",
-            "9"
-          ]
-        },
-        {
-          "id": "10",
-          "pointIds": [
-            "9",
-            "10"
-          ]
-        },
-        {
-          "id": "12",
+          "id": "4",
           "pointIds": [
             "4",
-            "10"
-          ]
-        },
-        {
-          "id": "13",
-          "pointIds": [
-            "10",
             "5"
           ]
-        },
-        {
-          "id": "14",
-          "pointIds": [
-            "10",
-            "8"
-          ]
-        }
-      ],
-      "polygons": [
-        {
-          "id": "2",
-          "lineIds": [
-            "2",
-            "3",
-            "12",
-            "13",
-            "5"
-          ]
-        },
-        {
-          "id": "3",
-          "lineIds": [
-            "10",
-            "14",
-            "8"
-          ]
-        },
-        {
-          "id": "4",
-          "lineIds": []
         }
       ]
     }
   ],
-  "pois": [
-    {
-      "id": "2",
-      "x": 360,
-      "y": 232,
-      "type": "bgsjg"
-    }
-  ]
+  "pois": []
 }