fix: 修改需求

src/app/liantong/index.ts

@@ -53,6 +53,12 @@ export const createBoard = (
   return {
     ...board,
     bus,
+    clear() {
+      board.setData({
+        rooms: [{ id: "0", points: [], polygons: [], lines: [] }],
+        pois: [],
+      } as any);
+    },
     addPoi(type: string) {
       board.tree.bus.emit("dataChangeBefore");
       const { promise, interrupt } = addEntityAttrib(board.tree, (pos) => {
@@ -77,7 +83,6 @@ export const createBoard = (
       board.bound.setSize(dom.offsetWidth, dom.offsetHeight);
     },
     get room() {
-      console.log(getRoom().attrib);
       return getRoom();
     },
   };

src/board/packages/container.ts

@@ -11,6 +11,8 @@ import { Shape } from "konva/lib/Shape";
 import { Group } from "konva/lib/Group";
 import { getAbsoluteTransform } from "../shared";
 import mitt, { Emitter } from "mitt";
+import { Euler, MathUtils, Matrix4, Quaternion, Vector3 } from "three";
+import { constantFactory } from "./view-constant";
 
 export type ContainerProps<
   T extends string = string,
@@ -226,4 +228,26 @@ export class Container<
       }
     }
   }
+
+  constant = constantFactory();
+
+  updateViewMat(mat: Matrix4) {
+    const translate = new Vector3();
+    const quaternion = new Quaternion();
+    const scale = new Vector3();
+
+    mat.decompose(translate, quaternion, scale);
+    // 将四元数转换为欧拉角
+    const euler = new Euler().setFromQuaternion(quaternion, "XYZ");
+    // 提取绕Z轴的旋转，即二维旋转角度
+    const rotationZ = euler.z; // 在Three.js中，角度是以弧度表示的
+
+    // 更新Konva Stage的位置和缩放
+    this.stage.position({ x: translate.x, y: translate.y });
+    this.stage.scale({ x: scale.x, y: scale.y });
+    this.stage.rotation(MathUtils.radToDeg(rotationZ));
+    this.redraw();
+
+    this.constant.updateConstantScale(Math.min(scale.x, scale.y));
+  }
 }

src/board/packages/entity.ts

@@ -94,6 +94,7 @@ export abstract class Entity<
       this.attrib
     );
     this.props.reactive || this.diffRedraw();
+    console.error("setAttrib");
   }
 
   private destoryReactive: () => void;

src/board/packages/view-constant.ts

@@ -0,0 +1,37 @@
+export let currentConstant: { [key in string]: number };
+
+export const constantFactory = () => {
+  const constant: { [key in string]: number } = {};
+  const initConstant: { [key in string]: number } = {};
+
+  const addConstant = (key: string, value: number) => {
+    constant[key] = value;
+    initConstant[key] = value;
+  };
+
+  const updateConstantScale = (scale: number) => {
+    for (const key in constant) {
+      constant[key] = initConstant[key] / scale;
+    }
+  };
+
+  // 点位相同距离
+  addConstant("WHOLE_LINE_POINT_EQ_DIST", 0.001);
+  // 需要合并距离
+  addConstant("WHOLE_LINE_POINT_MERGE_DIST", 10);
+  // 需要合并距离
+  addConstant("WHOLE_LINE_POINT_CHECK_DIST", 500);
+
+  return {
+    addConstant,
+    updateConstantScale,
+    use() {
+      currentConstant = constant;
+    },
+    unuse() {
+      if (currentConstant === constant) {
+        currentConstant = null;
+      }
+    },
+  };
+};

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

@@ -18,7 +18,6 @@ import {
   penWholeLinePoygonsEditWithHelperShapesMouse,
   repeatMoveWholeLineLine,
   spliceWholeLineLineByPoint,
-  updateConstant,
   wholeLineDelPolygon,
 } from "../service";
 import {
@@ -29,7 +28,8 @@ import {
 } from "../../../shared/shape-mose";
 import { ShapeType } from "../../../type";
 import { getAdsorbPosition } from "../../../shared/adsorb";
-import { getRealAbsoluteSize } from "../../../shared";
+import { currentConstant } from "../../view-constant";
+import mitt from "mitt";
 
 export class EditWholeLine<
   W extends WholeLineAttrib = WholeLineAttrib,
@@ -85,41 +85,52 @@ export class EditWholeLine<
   private endCreatePolygon: () => void;
   createPolygon() {
     disableMouse();
+    this.container.constant.use();
     const prePolygonIds: Set<string> = new Set();
     let interrupt = false;
 
     this.endCreatePolygon && this.endCreatePolygon();
     this.container.bus.emit("dataChangeBefore");
 
+    const bus = mitt<{ penStart: void }>();
+    let emited = false;
+
     const promise = new Promise<string>((resolve) => {
       this.endCreatePolygon = penWholeLinePoygonsEditWithHelperShapesMouse(
         {
           quotePoint: true,
           autoClose: false,
           tree: this.container,
-          adsorbRadius: getRealAbsoluteSize(this.shape, [5, 5], true)[0],
+          adsorbRadius: currentConstant.WHOLE_LINE_POINT_MERGE_DIST,
           config: this.attrib,
           changePolygon: (pid) => {
+            console.log("changePolygon", pid);
             if (pid) {
               prePolygonIds.add(pid);
             }
           },
+          onChange(change) {
+            if (!emited && change.pointChange.add.length) {
+              bus.emit("penStart");
+              emited = true;
+            }
+          },
           quitHandler: () => {
             this.container.bus.emit("dataChangeAfter");
             this.endCreatePolygon = null;
             for (const pid of prePolygonIds) {
               const polygonAttrib = getWholeLinePolygonRaw(this.attrib, pid);
-              if (!polygonAttrib) return;
+              if (!polygonAttrib) continue;
 
               if (!interrupt) {
                 this.polygonAfterHandler(polygonAttrib);
               } else {
                 wholeLineDelPolygon(this.attrib, pid);
               }
-
-              resolve(interrupt ? "cancel" : "submit");
             }
+            resolve(interrupt ? "cancel" : "submit");
             enableMouse();
+            this.container.constant.unuse();
           },
         },
         this.shape
@@ -127,6 +138,7 @@ export class EditWholeLine<
     });
 
     return {
+      bus,
       submit: this.endCreatePolygon.bind(this),
       cancel: () => {
         interrupt = true;
@@ -137,25 +149,27 @@ export class EditWholeLine<
   }
 
   pointAfterHandler(pointAttrib: WholeLinePointAttrib) {
-    updateConstant(getRealAbsoluteSize(this.container.stage, [1, 1], true)[0]);
+    this.container.constant.use();
     const merge = mergeWholeLinePointsByPoint(this.attrib, pointAttrib.id);
     spliceWholeLineLineByPoint(
       this.attrib,
       merge?.info.main.id || pointAttrib.id
     );
     fixWholeLineConfig(this.attrib);
+    this.container.constant.unuse();
   }
 
   lineAfterHandler(lineAttrib: WholeLineLineAttrib) {
-    updateConstant(getRealAbsoluteSize(this.container.stage, [1, 1], true)[0]);
+    this.container.constant.use();
     for (let i = 0; i < lineAttrib.pointIds.length; i++) {
       spliceWholeLineLineByPoint(this.attrib, lineAttrib.pointIds[i]);
     }
     fixWholeLineConfig(this.attrib);
+    this.container.constant.unuse();
   }
 
   polygonAfterHandler(polygonAttrib: WholeLinePolygonAttrib) {
-    updateConstant(getRealAbsoluteSize(this.container.stage, [1, 1], true)[0]);
+    this.container.constant.use();
     getWholeLinePolygonPoints(this.attrib, polygonAttrib.id).forEach(
       (attrib) => {
         if (this.attrib.points.includes(attrib)) {
@@ -164,6 +178,7 @@ export class EditWholeLine<
       }
     );
     fixWholeLineConfig(this.attrib);
+    this.container.constant.unuse();
   }
 
   init() {
@@ -189,6 +204,7 @@ export class EditWholeLine<
 
     this.pointDragHandler = {
       readyHandler: (attrib) => {
+        this.container.constant.use();
         this.container.bus.emit("dataChangeBefore");
         const polygons = getWholeLinePolygonLinesByPoint(
           this.attrib,
@@ -198,7 +214,7 @@ export class EditWholeLine<
           let points = getWholeLinePolygonPoints(this.attrib, polygonId);
           const startNdx = points.indexOf(attrib);
           points = [
-            ...points.slice(startNdx, points.length - 1),
+            ...points.slice(startNdx + 1, points.length - 1),
             ...points.slice(0, startNdx),
           ];
           return points.map((point) => [point.x, point.y]);
@@ -212,22 +228,11 @@ export class EditWholeLine<
         ).map((line) => WholeLineLine.namespace + line.id);
         exclusionIds.push(WholeLinePoint.namespace + pointAttrib.id);
 
-        const [radius] = getRealAbsoluteSize(
-          this.container.stage,
-          [10, 10],
-          true
-        );
-        const [radiusInner] = getRealAbsoluteSize(
-          this.container.stage,
-          [500, 500],
-          true
-        );
-
         const position = getAdsorbPosition({
           tree: this.container,
           position: move,
-          radius,
-          radiusInner,
+          radius: currentConstant.WHOLE_LINE_POINT_MERGE_DIST,
+          radiusInner: currentConstant.WHOLE_LINE_POINT_CHECK_DIST,
           pointsArray,
           exclusionIds: exclusionIds,
         });
@@ -235,6 +240,7 @@ export class EditWholeLine<
         pointAttrib.y = position[1];
       },
       endHandler: (attrib) => {
+        this.container.constant.unuse();
         this.pointAfterHandler(attrib);
         this.container.bus.emit("dataChangeAfter");
       },

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

@@ -1,4 +1,3 @@
-export * from "./constant";
 export * from "./whole-line-base";
 export * from "./whole-line-tear-merge";
 export * from "./whole-line-mouse";

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

@@ -35,9 +35,11 @@ export type PenWholeLinePoygonsEditProps<
   P extends Omit<WholeLinePointAttrib, "id">
 > = {
   tree: Container;
+  onChange?: (change: WholeLineChange) => void;
   config: WholeLineAttrib<P & Attrib>;
   polygonId?: string;
   adsorbRadius?: number;
+  closeAutoQuit?: boolean;
   pointAttribFactory?: (pos: number[]) => Omit<P, "id">;
   quotePoint?: boolean;
   canOper?: (
@@ -64,6 +66,7 @@ export const penWholeLinePoygonsEdit = <
   canOper,
   adsorbRadius,
   canDelPoint,
+  closeAutoQuit,
   changePolygon,
   autoClose,
 }: PenWholeLinePoygonsEditProps<P>) => {
@@ -75,18 +78,15 @@ export const penWholeLinePoygonsEdit = <
         y: pos[1],
       } as P));
 
-  const useedIds: string[] = [];
   const getPolygonAttrib = (polygonId: string) => {
     if (!polygonId) {
-      const id = generateWholeLinePoygonId(config, useedIds);
+      const id = generateWholeLinePoygonId(config);
       config.polygons.push({
         id,
         lineIds: [],
       });
-      useedIds.push(id);
       return config.polygons[config.polygons.length - 1];
     } else {
-      useedIds.push(polygonId);
       return config.polygons.find(({ id }) => id === polygonId);
     }
   };
@@ -178,11 +178,12 @@ export const penWholeLinePoygonsEdit = <
             const prev = getWholeLinePoint(config, prevId);
             points.push([prev.x, prev.y]);
           }
+          console.log(points, [...points].reverse());
           position = getAdsorbPosition({
             tree,
             pixel,
             radius: adsorbRadius,
-            points,
+            points: [...points].reverse(),
           });
         } else {
           position = tree.getRealFromStage(pixel);
@@ -240,6 +241,14 @@ export const penWholeLinePoygonsEdit = <
       delete pointAttrib.id;
     }
 
+    const afterHandler = (iChange: WholeLineChange) => {
+      // 线段闭合重新启一个多边形
+      if (!closeAutoQuit && isClose) {
+        start(null);
+      }
+      return { change: iChange, isClose };
+    };
+
     if (polyginAttrib.lineIds.length > 0) {
       if (newMode) {
         const mChange = wholeLinePolygonLastAddPoint(
@@ -248,7 +257,7 @@ export const penWholeLinePoygonsEdit = <
           pointAttrib
         ).change;
         // 持续添加模式
-        return { change: mergeChange(change, mChange), isClose };
+        return afterHandler(mergeChange(change, mChange));
       } else {
         // 直接当成新建操作
         start(null);
@@ -263,8 +272,7 @@ export const penWholeLinePoygonsEdit = <
           Math.abs(pointAttrib.y - prev.y) > offset
         )
       ) {
-        console.log(offset, pointAttrib, prev);
-        return { change, isClose };
+        return afterHandler(change);
       }
 
       const { line, change: mChange } = wholeLineAddLineByPointIds(config, [
@@ -289,12 +297,12 @@ export const penWholeLinePoygonsEdit = <
       });
       polyginAttrib.lineIds.push(line.id);
       prevId = null;
-      return { change, isClose };
+      return afterHandler(change);
     } else {
       const addPoint = wholeLineAddPoint(config, pointAttrib)!;
       prevId = addPoint.id;
       change.pointChange.add.push(addPoint);
-      return { change, isClose };
+      return afterHandler(change);
     }
   };
 

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

@@ -46,6 +46,7 @@ export const penWholeLinePoygonsEditWithHelperMouse = <
   const edit = penWholeLinePoygonsEdit({ ...props });
   const helper = penWholeLinePoygonsEdit({
     ...props,
+    closeAutoQuit: true,
     changePolygon: undefined,
     config: copyAttrib(),
   });
@@ -91,11 +92,12 @@ export const penWholeLinePoygonsEditWithHelperMouse = <
     ) {
       return;
     } else {
-      const { isClose } = edit.continuous(evt);
+      const { isClose, change } = edit.continuous(evt);
       syncHelper();
       if (isClose && props.closeAutoQuit) {
         leaveEditMode();
       }
+      props.onChange && props.onChange(change);
       prevOffset = null;
     }
   };
@@ -291,7 +293,6 @@ export const penWholeLinePoygonsEditWithHelperShapesMouse = <
       ...props,
       quitHandler: () => {
         stopWatchHelper();
-        console.log("结束了");
         props.quitHandler && props.quitHandler();
       },
     });

src/board/packages/whole-line/service/whole-line-tear-merge.ts

@@ -17,10 +17,7 @@ import {
   WholeLineLineAttrib,
   WholeLinePointAttrib,
 } from "../view/";
-import {
-  WHOLE_LINE_POINT_EQ_DIST,
-  WHOLE_LINE_POINT_MERGE_DIST,
-} from "./constant";
+import { currentConstant } from "../../view-constant";
 import {
   generateWholeLineLineId,
   generateWholeLinePointId,
@@ -134,7 +131,7 @@ export const repeatableWholeLineLineIntersections = (
               }
             }
             let point: WholeLinePointAttrib;
-            if (minDist <= WHOLE_LINE_POINT_EQ_DIST) {
+            if (minDist <= currentConstant.WHOLE_LINE_POINT_EQ_DIST) {
               point = addedPonts[minNdx];
             } else {
               point = pushPoint({ x: intersection[0], y: intersection[1] });
@@ -402,7 +399,7 @@ export const getWholeLinePointMerge = (
     (oPoint) =>
       !processedPoints.includes(oPoint) &&
       getLineDist([oPoint.x, oPoint.y], [point.x, point.y]) <
-        WHOLE_LINE_POINT_MERGE_DIST
+        currentConstant.WHOLE_LINE_POINT_MERGE_DIST
   );
   if (!processPoints.length) {
     return null;
@@ -744,7 +741,7 @@ export const fixWholeLineConfig = (config: WholeLineAttrib) => {
         getLineDist(
           [currentLine[0].x, currentLine[0].y],
           [currentLine[1].x, currentLine[1].y]
-        ) < WHOLE_LINE_POINT_MERGE_DIST
+        ) < currentConstant.WHOLE_LINE_POINT_MERGE_DIST
       ) {
         wholeLineReplacePoint(config, [currentLine[0].id], currentLine[1].id);
         j--;
@@ -754,7 +751,6 @@ export const fixWholeLineConfig = (config: WholeLineAttrib) => {
       // const currentLine = getWholeLinePoints(config, current.pointIds);
       // const nextLine = getWholeLinePoints(config, current.pointIds);
     }
-
     if (polygon.lineIds.length === 0) {
       console.log("del polygon");
       config.polygons.splice(i--, 1);
@@ -778,12 +774,11 @@ export const fixWholeLineConfig = (config: WholeLineAttrib) => {
       id: lineId,
       pointIds: pointAttribs.map(({ id }) => id),
     });
-    console.log(lineId, id);
     config.polygons.push({
       id,
       lineIds: [lineId],
     });
   });
 
-  console.log(delLines);
+  console.log("===>", delLines);
 };

src/board/plugins/camera-plugin.ts

@@ -1,6 +1,7 @@
-import { Euler, MathUtils, Matrix4, Quaternion, Vector3 } from "three";
+import { Matrix4, Vector3 } from "three";
 import { Container } from "../packages";
 import { openShapeDrag } from "../shared";
+import mitt from "mitt";
 
 export type CameraQueryPluginProps = {
   move?: boolean;
@@ -17,6 +18,7 @@ export class CameraQueryPlugin {
   props: Omit<CameraQueryPluginProps, "bound">;
   cameraMat: Matrix4;
   clipMat: Matrix4 = new Matrix4();
+  bus = mitt<{ cameraChange: number[] }>();
 
   constructor(props: CameraQueryPluginProps = {}) {
     this.props = props;
@@ -125,6 +127,7 @@ export class CameraQueryPlugin {
       initMat = initMat.multiply(new Matrix4().fromArray(mat));
     }
     this.setCameraMat(initMat);
+    this.bus.emit("cameraChange", this.cameraMat.toArray());
   }
 
   setCameraMat(mat: number[] | Matrix4) {
@@ -217,23 +220,6 @@ export class CameraQueryPlugin {
   }
 
   update() {
-    const { stage } = this.tree;
-    const translate = new Vector3();
-    const quaternion = new Quaternion();
-    const scale = new Vector3();
-    const mat = this.clipMat.clone().multiply(this.cameraMat);
-
-    mat.decompose(translate, quaternion, scale);
-    // 将四元数转换为欧拉角
-    const euler = new Euler().setFromQuaternion(quaternion, "XYZ");
-    console.log(euler, scale, translate);
-    // 提取绕Z轴的旋转，即二维旋转角度
-    const rotationZ = euler.z; // 在Three.js中，角度是以弧度表示的
-
-    // 更新Konva Stage的位置和缩放
-    stage.position({ x: translate.x, y: translate.y });
-    stage.scale({ x: scale.x, y: scale.y });
-    stage.rotation(MathUtils.radToDeg(rotationZ));
-    this.tree.redraw();
+    this.tree.updateViewMat(this.clipMat.clone().multiply(this.cameraMat));
   }
 }

src/board/shared/adsorb.ts

@@ -91,7 +91,7 @@ export const getAdsorbLinePosition = ({
       );
     })
     .map((ref) => {
-      return ref.points();
+      return [...ref.points(), ref.id()] as any;
     });
   return getAdsorbLinePositionRaw({ position, refLines, angle });
 };
@@ -120,6 +120,7 @@ export const getAdsorbLinePositionRaw = ({
       let angle = MathUtils.radToDeg(
         getLine2Angle(refLine, [...start, ...position])
       );
+
       return (angle + 360) % 360;
     });
 
@@ -187,12 +188,16 @@ export const getAdsorbSelfLinesPosition = ({
   angle,
 }: AdsorbSelfLinesProps) => {
   if (!points?.length) return;
+  // 当前位置始终在第一个点
 
-  const last = points.slice(points.length - 2).flatMap((a) => a);
-  const first = points.slice(0, 2).flatMap((a) => a);
+  const last = points.slice(0, 2).flatMap((a) => a);
+  const first = points
+    .slice(points.length - 2, points.length)
+    .flatMap((a) => a);
   const vlines = [
-    createLineByDire(getVerticaLineDire(last), [last[2], last[3]], 10),
-    createLineByDire(getVerticaLineDire(first), [first[0], last[1]], 10),
+    last,
+    // createLineByDire(getVerticaLineDire(last), [last[2], last[3]], 10),
+    createLineByDire(getVerticaLineDire(first), [first[2], first[3]], 10),
   ];
 
   // 垂直最后一段
@@ -242,8 +247,8 @@ export const getAdsorbPosition = (props: AdsorbProps) => {
     }
   }
 
-  if ((refPosition = getAdsorbLinePosition({ ...props, position }))) {
-    return refPosition;
-  }
+  // if ((refPosition = getAdsorbLinePosition({ ...props, position }))) {
+  //   return refPosition;
+  // }
   return position;
 };

src/board/shared/entity-utils.ts

@@ -7,7 +7,7 @@ import { getTouchOffset } from "./act";
 import { createLineByDire, getDireDist } from "./math";
 import { inRevise } from "./public";
 import { disableMouse, enableMouse } from "./shape-mose";
-import { generateId, getChangeAllPoart } from "./util";
+import { generateId, getChangeAllPoart, getChangePart } from "./util";
 
 const getExtendsProps = (parent: Entity<any, any>) => {
   return parent
@@ -89,18 +89,17 @@ export const incEntitysFactoryGenerate = <
 
   return (attribsRaw: T | T[]) => {
     const attribs = Array.isArray(attribsRaw) ? attribsRaw : [attribsRaw];
-    const { addPort, delPort, changePort } = getChangeAllPoart(
-      attribs,
-      oldAttribs
-    );
 
-    const dels = delPort.map(destory);
-    const adds = addPort.map((id) => add(findAttrib(attribs, id)));
+    const { addPort, delPort } = getChangePart(attribs, oldAttribs);
+    const changePort = [];
+
+    const dels = delPort.map((d) => destory(d.id));
+    const adds = addPort.map((d) => add(findAttrib(attribs, d.id)));
 
     const upds = changePort.map((id) => {
+      console.log("update", id);
       const newAttrib = findAttrib(attribs, id);
       if (inRevise(newAttrib, cache[id].attrib)) {
-        console.log("setAttrib");
         cache[id].setAttrib(findAttrib(attribs, id));
       }
       return cache[id];

src/board/shared/math.ts

@@ -241,7 +241,6 @@ export const getLineRelationship = (line1: number[], line2: number[]) => {
     );
 
     if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
-      console.log(ua, ub);
       return RelationshipEnum.Intersect; // 两线段相交
     } else {
       return RelationshipEnum.ExtendIntersect; // 延长可相交

src/components/query-board/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <ElButton @click="board.clear()"> 清除 </ElButton>
     <ElButton :disabled="!board.history.state.hasUndo" @click="board.history.undo()">
       撤销
     </ElButton>
@@ -36,7 +37,6 @@ 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 }>(), {
@@ -48,31 +48,9 @@ type Board = ReturnType<typeof createBoard>;
 
 const board = createBoard();
 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);
 }, 500);
 
 const activeEntity = shallowRef<EditPoi>();
@@ -81,6 +59,9 @@ board.bus.on("activePoi", (entity) => (activeEntity.value = entity));
 const drawing = shallowRef<ReturnType<EditWholeLine["createPolygon"]>>();
 const drawHandler = () => {
   drawing.value = board.room.createPolygon();
+  drawing.value.bus.on("penStart", () => {
+    console.log("开始绘画");
+  });
   drawing.value.promise.then((result) => {
     console.log(result);
     drawing.value = null;

src/components/query-board/storeData.json

@@ -22,6 +22,21 @@
           "x": -2.5064087996702518,
           "y": -966.7652502793854,
           "id": "5"
+        },
+        {
+          "x": -3.859266647766991,
+          "y": -2.5111666543689317,
+          "id": "6"
+        },
+        {
+          "x": 2.5199777654368916,
+          "y": -2.511166654368933,
+          "id": "7"
+        },
+        {
+          "x": 2.519977765436893,
+          "y": 2.616899987184465,
+          "id": "8"
         }
       ],
       "polygons": [
@@ -32,6 +47,14 @@
             "3",
             "4"
           ]
+        },
+        {
+          "id": "3",
+          "lineIds": [
+            "5",
+            "6",
+            "7"
+          ]
         }
       ],
       "lines": [
@@ -55,6 +78,27 @@
             "4",
             "5"
           ]
+        },
+        {
+          "id": "5",
+          "pointIds": [
+            "6",
+            "7"
+          ]
+        },
+        {
+          "id": "6",
+          "pointIds": [
+            "7",
+            "8"
+          ]
+        },
+        {
+          "id": "7",
+          "pointIds": [
+            "8",
+            "6"
+          ]
         }
       ]
     }