@labelbee/lb-annotation 1.13.1-alpha.0 → 1.13.1

package/es/core/pointCloud/render/index.js

@@ -0,0 +1,131 @@
+import * as THREE from 'three';
+import { colorArr, toolStyleConverter } from '@labelbee/lb-utils';
+import DrawUtils from '../../../utils/tool/DrawUtils.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class PointCloudRender {
+  constructor({store, on, unbind, nextTick, config}) {
+    this.clearStash = () => {
+      var _a, _b;
+      const pointsGeo = this.scene.getObjectByName((_b = (_a = this.store.cacheSegData) == null ? void 0 : _a.id) != null ? _b : "");
+      if (pointsGeo) {
+        pointsGeo.removeFromParent();
+        this.render3d();
+      }
+    };
+    this.generateNewPoints = (segmentData) => {
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute("position", new THREE.BufferAttribute(segmentData.points, 3));
+      const pointsMaterial = new THREE.PointsMaterial({color: this.getCurrentColor(segmentData.attribute), size: 10});
+      const newPoints = new THREE.Points(geometry, pointsMaterial);
+      newPoints.name = segmentData.id;
+      this.store.scene.add(newPoints);
+      this.render3d();
+    };
+    this.updateNewPoints = (segmentData) => {
+      var _a;
+      const originPoints = this.store.scene.getObjectByName((_a = segmentData == null ? void 0 : segmentData.id) != null ? _a : "");
+      if (originPoints && segmentData) {
+        originPoints.geometry.setAttribute("position", new THREE.Float32BufferAttribute(segmentData.points, 3));
+        originPoints.material = new THREE.PointsMaterial({
+          color: this.getCurrentColor(segmentData.attribute),
+          size: 10
+        });
+        originPoints.geometry.attributes.position.needsUpdate = true;
+        this.render3d();
+      }
+    };
+    this.updatePointsColor = (segmentData = this.store.cacheSegData) => {
+      var _a;
+      const originPoints = this.store.scene.getObjectByName((_a = segmentData == null ? void 0 : segmentData.id) != null ? _a : "");
+      if (originPoints && segmentData) {
+        segmentData.attribute = this.store.currentAttribute;
+        originPoints.material = new THREE.PointsMaterial({
+          color: this.getCurrentColor(segmentData.attribute),
+          size: 10
+        });
+        this.render3d();
+      }
+    };
+    this.render3d = () => {
+      this.store.renderer.render(this.store.scene, this.store.camera);
+    };
+    this.store = store;
+    this.on = on;
+    this.unbind = unbind;
+    this.nextTick = nextTick;
+    this.config = config;
+    this.initMsg();
+    this.animate();
+    this.generateNewPoints = this.generateNewPoints.bind(this);
+    this.clearStash = this.clearStash.bind(this);
+    this.render3d = this.render3d.bind(this);
+    this.updateNewPoints = this.updateNewPoints.bind(this);
+    this.updatePointsColor = this.updatePointsColor.bind(this);
+  }
+  get scene() {
+    return this.store.scene;
+  }
+  getCurrentColor(attribute = this.store.currentAttribute) {
+    if (!attribute || !this.config) {
+      return colorArr[0].hexString;
+    }
+    const {fill} = toolStyleConverter.getColorFromConfig({attribute}, __spreadProps(__spreadValues({}, this.config), {attributeConfigurable: true}), {});
+    return fill;
+  }
+  initMsg() {
+    this.on("addNewPointsCloud", this.generateNewPoints);
+    this.on("updateNewPoints", this.updateNewPoints);
+    this.on("clearStashRender", this.clearStash);
+    this.on("reRender3d", this.render3d);
+  }
+  unbindMsg() {
+    this.unbind("addNewPointsCloud", this.generateNewPoints);
+    this.unbind("updateNewPoints", this.updateNewPoints);
+    this.unbind("clearStashRender", this.clearStash);
+    this.unbind("reRender3d", this.render3d);
+  }
+  get canvas2d() {
+    return this.store.canvas2d;
+  }
+  clearCanvasMouse() {
+    var _a, _b;
+    (_b = (_a = this.canvas2d) == null ? void 0 : _a.getContext("2d")) == null ? void 0 : _b.clearRect(0, 0, this.store.containerWidth, this.store.containerHeight);
+  }
+  renderCanvas2dPolygon() {
+    var _a;
+    if (((_a = this.store.polygon2d) == null ? void 0 : _a.length) > 0 && this.canvas2d) {
+      DrawUtils.drawPolygon(this.canvas2d, this.store.polygon2d, {
+        isClose: false,
+        color: this.getCurrentColor(),
+        thickness: 4
+      });
+    }
+  }
+  animate() {
+    requestAnimationFrame(this.animate.bind(this));
+    this.clearCanvasMouse();
+    this.renderCanvas2dPolygon();
+    this.nextTick();
+  }
+}
+
+export { PointCloudRender as default };

package/es/core/pointCloud/segmentation.js

@@ -1,30 +1,73 @@
-import * as THREE from 'three';
+import { EPointCloudSegmentStatus } from '@labelbee/lb-utils';
+import LassoSelector from './selector/lassoSelector.js';
+import CircleSelector from './selector/circleSelector.js';
 
 class PointCloudSegmentOperation {
   constructor(props) {
-    this.pointer = new THREE.Vector2();
-    this.onMouseMove = (e) => {
-      const coord = this.getCoordinate(e);
-      this.pointer.x = coord.x / this.dom.clientWidth * 2 - 1;
-      this.pointer.y = -(coord.y / this.dom.clientHeight) * 2 + 1;
-      this.emitRender();
+    this.onMouseMove = (iev) => {
+      if (this.store.isCheckStatus || this.store.isReadyStatus) {
+        this.store.updateMouse({x: iev.offsetX, y: iev.offsetY});
+      }
+      if (this.isForbid) {
+        return;
+      }
+      const ev = {
+        offsetX: iev.offsetX,
+        offsetY: iev.offsetY,
+        button: iev.buttons
+      };
+      this.currentTool.mouseMove(ev);
+    };
+    this.onMouseDown = (iev) => {
+      if (this.isForbid) {
+        return;
+      }
+      this.currentTool.mouseDown(iev);
+    };
+    this.onMouseUp = (iev) => {
+      if (this.isForbid || this.store.orbiting === true) {
+        return;
+      }
+      if (this.baseMouseDown(iev)) {
+        return;
+      }
+      this.currentTool.mouseUp(iev);
+    };
+    this.baseMouseDown = (e) => {
+      switch (e.button) {
+        case 0:
+          if (this.store.isReadyStatus || this.store.isCheckStatus) {
+            this.store.checkPoints();
+            return true;
+          }
+          break;
+      }
+    };
+    this._raycasting = () => {
+      if ([EPointCloudSegmentStatus.Ready, EPointCloudSegmentStatus.Check].includes(this.store.segmentStatus)) {
+        const {mouse, camera, raycaster} = this.store;
+        raycaster.setFromCamera(mouse, camera);
+        const intersects = raycaster.intersectObjects(this.store.allSegmentPoints, false);
+        const intersect = intersects[0];
+        if (intersect) {
+          this.store.highlightPoints(intersect.object);
+        } else {
+          this.store.resetAllSegDataSizeAndRender();
+          this.store.resetHoverPointsID();
+        }
+      }
     };
     this.dom = props.dom;
-    this.raycaster = new THREE.Raycaster();
-    this.dom.addEventListener("pointermove", this.onMouseMove);
-    const geometry = new THREE.BufferGeometry();
-    const pointsMaterial = new THREE.PointsMaterial({size: 10, color: "red"});
-    geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array([0, 0, 0]), 3));
-    this._highlight_Point = new THREE.Points(geometry, pointsMaterial);
-    this.emitRender = props.render;
-    const geometry2 = new THREE.BufferGeometry();
-    const pointsMaterial2 = new THREE.PointsMaterial({size: 5, color: "white"});
-    geometry2.setAttribute("position", new THREE.BufferAttribute(new Float32Array([0, 0, 0]), 3));
-    this._temp = new THREE.Points(geometry2, pointsMaterial2);
-  }
-  addMorePoint(scene) {
-    scene.add(this._highlight_Point);
-    scene.add(this._temp);
+    this.store = props.store;
+    this.lassoSelector = new LassoSelector(this.store);
+    this.circleSelector = new CircleSelector(this.store);
+    this.currentTool = this.circleSelector;
+    this.currentToolName = "CircleSelector";
+    this.dom.addEventListener("pointermove", this.onMouseMove.bind(this));
+    this.dom.addEventListener("pointerdown", this.onMouseDown.bind(this));
+    this.dom.addEventListener("pointerup", this.onMouseUp.bind(this));
+    this.updateSelector2Lasso = this.updateSelector2Lasso.bind(this);
+    this.updateSelector2Circle = this.updateSelector2Circle.bind(this);
   }
   getCoordinate(e) {
     const bounding = this.dom.getBoundingClientRect();
@@ -33,17 +76,19 @@ class PointCloudSegmentOperation {
       y: e.clientY - bounding.top
     };
   }
-  render({camera, scene}) {
-    this.raycaster.setFromCamera(this.pointer, camera);
-    const intersects = this.raycaster.intersectObjects(scene.children, false);
-    console.log("intersects", intersects[0]);
-    const default_Point = new THREE.Vector3(0, 0, 0);
-    if (intersects.length > 0) {
-      const intersect = intersects[0];
-      this._highlight_Point.position.copy(intersect.point);
-    } else {
-      this._highlight_Point.position.copy(default_Point);
-    }
+  get forbidOperation() {
+    return this.store.forbidOperation;
+  }
+  get isForbid() {
+    return this.forbidOperation;
+  }
+  updateSelector2Lasso() {
+    this.currentTool = this.lassoSelector;
+    this.currentToolName = "LassoSelector";
+  }
+  updateSelector2Circle() {
+    this.currentTool = this.circleSelector;
+    this.currentToolName = "CircleSelector";
   }
 }
 

package/es/core/pointCloud/selector/Sse3dLassoSelector.js

@@ -0,0 +1,23 @@
+import Sse3dSelector from './Sse3dSelector.js';
+
+class Sse3dLassoSelector extends Sse3dSelector {
+  mouseDown(ev) {
+    if (ev.which === 3) {
+      this.pushPoint(ev.offsetX, ev.offsetY);
+    }
+  }
+  mouseUp(ev) {
+    if (ev.which === 3) {
+      this.scene.store.getPointsInPolygon(this.polygon);
+      this.polygon = [];
+      this.scene.store.syncPolygon2d([]);
+    }
+  }
+  mouseDrag(ev) {
+    if (ev.which === 3) {
+      this.pushPoint(ev.offsetX, ev.offsetY);
+    }
+  }
+}
+
+export { Sse3dLassoSelector as default };

package/es/core/pointCloud/selector/Sse3dSelector.js

@@ -0,0 +1,15 @@
+class Sse3dSelector {
+  constructor(scene) {
+    this.scene = scene;
+    this.polygon = [];
+  }
+  pushPoint(x, y) {
+    this.polygon.push([x, y]);
+    this.scene.store.syncPolygon2d(this.polygon);
+  }
+  deactivate() {
+    this.polygon = [];
+  }
+}
+
+export { Sse3dSelector as default };

package/es/core/pointCloud/selector/circleSelector.js

@@ -0,0 +1,39 @@
+import DefaultSelector from './selector.js';
+
+class CircleSelector extends DefaultSelector {
+  constructor() {
+    super(...arguments);
+    this.radius = 20;
+  }
+  mouseDown(ev) {
+    if (ev.button === 2) {
+      this.pushPoint(ev.offsetX, ev.offsetY);
+      this.startX = ev.offsetX;
+      this.startY = ev.offsetY;
+    }
+  }
+  mouseUp(ev) {
+    if (ev.button === 2) {
+      this.store.getPointsInPolygon(this.polygon2d);
+      this.polygon2d.length = 0;
+      this.startX = this.startY = NaN;
+    }
+  }
+  mouseMove(ev) {
+    if (ev.button === 2 && this.startX && this.startY) {
+      this.polygon2d.length = 0;
+      const precision = 64;
+      const PI2 = Math.PI * 2;
+      const ox = this.startX;
+      const oy = this.startY;
+      const nx = ev.offsetX;
+      const ny = ev.offsetY;
+      const r = Math.sqrt((nx - ox) * (nx - ox) + (ny - oy) * (ny - oy));
+      for (let a = 0; a < PI2; a += PI2 / precision) {
+        this.pushPoint(ox + r * Math.cos(a), oy - r * Math.sin(a));
+      }
+    }
+  }
+}
+
+export { CircleSelector as default };

package/es/core/pointCloud/selector/lassoSelector.js

@@ -0,0 +1,22 @@
+import DefaultSelector from './selector.js';
+
+class LassoSelector extends DefaultSelector {
+  mouseDown(ev) {
+    if (ev.button === 2) {
+      this.pushPoint(ev.offsetX, ev.offsetY);
+    }
+  }
+  mouseUp(ev) {
+    if (ev.button === 2) {
+      this.store.getPointsInPolygon(this.polygon2d);
+      this.updatePolygon2d([]);
+    }
+  }
+  mouseMove(ev) {
+    if (ev.button === 2) {
+      this.pushPoint(ev.offsetX, ev.offsetY);
+    }
+  }
+}
+
+export { LassoSelector as default };

package/es/core/pointCloud/selector/selector.js

@@ -0,0 +1,16 @@
+class DefaultSelector {
+  constructor(store) {
+    this.store = store;
+    this.polygon2d = [];
+  }
+  pushPoint(x, y) {
+    this.polygon2d.push({x, y});
+    this.store.syncPolygon2d(this.polygon2d);
+  }
+  updatePolygon2d(polygon2d) {
+    this.polygon2d = polygon2d;
+    this.store.syncPolygon2d(this.polygon2d);
+  }
+}
+
+export { DefaultSelector as default };

package/es/core/pointCloud/store/fsm.js

@@ -0,0 +1,41 @@
+import { EPointCloudSegmentStatus } from '@labelbee/lb-utils';
+
+class PointCloudFSM {
+  constructor() {
+    this.segmentStatus = EPointCloudSegmentStatus.Ready;
+  }
+  statusToggle() {
+    switch (this.segmentStatus) {
+      case EPointCloudSegmentStatus.Ready:
+        this.segmentStatus = EPointCloudSegmentStatus.Check;
+        break;
+      case EPointCloudSegmentStatus.Check:
+        this.segmentStatus = EPointCloudSegmentStatus.Edit;
+        break;
+      case EPointCloudSegmentStatus.Edit:
+        this.segmentStatus = EPointCloudSegmentStatus.Ready;
+        break;
+      default: {
+        console.error("Error Status in PointCloudSegmentFSM");
+      }
+    }
+  }
+  updateStatus2Edit() {
+    this.segmentStatus = EPointCloudSegmentStatus.Edit;
+  }
+  updateStatus2Check() {
+    this.segmentStatus = EPointCloudSegmentStatus.Check;
+  }
+  get isReadyStatus() {
+    return this.segmentStatus === EPointCloudSegmentStatus.Ready;
+  }
+  get isCheckStatus() {
+    return this.segmentStatus === EPointCloudSegmentStatus.Check;
+  }
+  get isEditStatus() {
+    return this.segmentStatus === EPointCloudSegmentStatus.Edit;
+  }
+}
+const instance = new PointCloudFSM();
+
+export { instance as default };

package/es/core/pointCloud/store/index.js

@@ -0,0 +1,376 @@
+import * as THREE from 'three';
+import { EPointCloudSegmentMode, EPointCloudSegmentCoverMode, PointCloudUtils } from '@labelbee/lb-utils';
+import { isInPolygon } from '../../../utils/tool/polygonTool.js';
+import uuid from '../../../utils/uuid.js';
+import instance from './fsm.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const DEFAULT_PREFIX = "LABELBEE_CANVAS_";
+class PointCloudStore {
+  constructor({container, scene, camera, renderer, emit, on, unbind}) {
+    this.canvas2d = null;
+    this.polygon2d = [];
+    this.forbidOperation = false;
+    this.raycaster = new THREE.Raycaster();
+    this.mouse = new THREE.Vector2();
+    this.cloudData = new Map();
+    this.segmentData = new Map();
+    this.hoverPointsID = "";
+    this.segmentMode = EPointCloudSegmentMode.Add;
+    this.segmentCoverMode = EPointCloudSegmentCoverMode.Cover;
+    this.updatePointCloud = false;
+    this.addPointCloud = false;
+    this.orbiting = false;
+    this.currentAttribute = "";
+    this.pointCloudObjectName = "pointCloud";
+    this.updateCoverPoints = (coverPoints = new Float32Array([])) => {
+      this.segmentData.forEach((seg, id) => {
+        var _a;
+        if (id !== ((_a = this.cacheSegData) == null ? void 0 : _a.id)) {
+          const newPoints = this.splitPointsFromPoints(seg.points, coverPoints);
+          seg.points = newPoints;
+          const originPoints = this.scene.getObjectByName(id);
+          if (originPoints) {
+            originPoints.geometry.setAttribute("position", new THREE.Float32BufferAttribute(newPoints, 3));
+            originPoints.geometry.attributes.position.needsUpdate = true;
+          }
+        }
+      });
+      this.emit("reRender3d");
+    };
+    this.container = container;
+    this.scene = scene;
+    this.camera = camera;
+    this.renderer = renderer;
+    this.emit = emit;
+    this.on = on;
+    this.unbind = unbind;
+    this.createCanvas2d();
+    this.clearStash = this.clearStash.bind(this);
+    this.addStash2Store = this.addStash2Store.bind(this);
+    this.updateCheck2Edit = this.updateCheck2Edit.bind(this);
+    this.setAttribute = this.setAttribute.bind(this);
+    this.setSegmentMode = this.setSegmentMode.bind(this);
+    this.setSegmentCoverMode = this.setSegmentCoverMode.bind(this);
+    this.initMsg();
+    this.setupRaycaster();
+  }
+  initMsg() {
+    this.on("clearStash", this.clearStash);
+    this.on("addStash2Store", this.addStash2Store);
+    this.on("updateCheck2Edit", this.updateCheck2Edit);
+    this.on("setSegmentMode", this.setSegmentMode);
+    this.on("setSegmentCoverMode", this.setSegmentCoverMode);
+  }
+  unbindMsg() {
+    this.unbind("clearStash", this.clearStash);
+    this.unbind("addStash2Store", this.addStash2Store);
+    this.unbind("updateCheck2Edit", this.updateCheck2Edit);
+    this.unbind("setSegmentMode", this.setSegmentMode);
+    this.unbind("setSegmentCoverMode", this.setSegmentCoverMode);
+  }
+  get containerWidth() {
+    return this.container.clientWidth;
+  }
+  get containerHeight() {
+    return this.container.clientHeight;
+  }
+  get allSegmentPoints() {
+    return this.scene.children.filter((v) => v.type === "Points" && v.name !== this.pointCloudObjectName);
+  }
+  get segmentStatus() {
+    return instance.segmentStatus;
+  }
+  get isReadyStatus() {
+    return instance.isReadyStatus;
+  }
+  get isCheckStatus() {
+    return instance.isCheckStatus;
+  }
+  get isEditStatus() {
+    return instance.isEditStatus;
+  }
+  statusToggle() {
+    instance.statusToggle();
+  }
+  updateStatus2Edit() {
+    instance.updateStatus2Edit();
+  }
+  createCanvas(id) {
+    const canvas = document.createElement("canvas");
+    canvas.id = id;
+    this.updateCanvasBasicStyle(canvas, {width: this.containerWidth, height: this.containerHeight}, 10);
+    return canvas;
+  }
+  createCanvas2d() {
+    this.canvas2d = this.createCanvas(`${DEFAULT_PREFIX}2d`);
+    this.container.appendChild(this.canvas2d);
+  }
+  setupRaycaster() {
+    this.raycaster.params = {
+      Mesh: {},
+      Line: {threshold: 1},
+      LOD: {},
+      Points: {threshold: 0.2},
+      Sprite: {}
+    };
+  }
+  setHoverPointsID(id) {
+    this.hoverPointsID = id;
+  }
+  setSegmentMode(mode) {
+    this.segmentMode = mode;
+  }
+  setSegmentCoverMode(coverMode) {
+    this.segmentCoverMode = coverMode;
+  }
+  updateCanvasBasicStyle(canvas, size, zIndex) {
+    const pixel = 1;
+    canvas.style.position = "absolute";
+    canvas.width = size.width * pixel;
+    canvas.height = size.height * pixel;
+    canvas.style.width = `${size.width}px`;
+    canvas.style.height = `${size.height}px`;
+    canvas.style.left = "0";
+    canvas.style.top = "0";
+    canvas.style.zIndex = `${zIndex} `;
+  }
+  syncPolygon2d(polygon2d) {
+    this.polygon2d = polygon2d;
+  }
+  getPointsInPolygon(originPolygon) {
+    var _a, _b, _c;
+    const polygon = originPolygon;
+    const originPoints = this.scene.getObjectByName(this.pointCloudObjectName);
+    const cloudDataArrayLike = (_c = (_b = (_a = originPoints == null ? void 0 : originPoints.geometry) == null ? void 0 : _a.attributes) == null ? void 0 : _b.position) == null ? void 0 : _c.array;
+    if (cloudDataArrayLike) {
+      const len = cloudDataArrayLike.length;
+      const vertices = [];
+      const covers = [];
+      for (let i = 0; i < len; i += 3) {
+        const vector3d = new THREE.Vector3(cloudDataArrayLike[i], cloudDataArrayLike[i + 1], cloudDataArrayLike[i + 2]);
+        vector3d.project(this.camera);
+        const projection = {x: 0, y: 0};
+        projection.x = Math.round(vector3d.x * this.container.clientWidth / 2 + this.container.clientWidth / 2);
+        projection.y = Math.round(-vector3d.y * this.container.clientHeight / 2 + this.container.clientHeight / 2);
+        const isIn = isInPolygon(projection, polygon);
+        if (isIn) {
+          const x = cloudDataArrayLike[i];
+          const y = cloudDataArrayLike[i + 1];
+          const z = cloudDataArrayLike[i + 2];
+          const key = PointCloudUtils.getCloudKeys(x, y, z);
+          if (this.segmentMode === EPointCloudSegmentMode.Remove) {
+            this.cloudData.get(key).visible = false;
+            vertices.push(cloudDataArrayLike[i], cloudDataArrayLike[i + 1], cloudDataArrayLike[i + 2]);
+          }
+          if (this.segmentMode === EPointCloudSegmentMode.Add) {
+            if (this.segmentCoverMode === EPointCloudSegmentCoverMode.Cover) {
+              vertices.push(cloudDataArrayLike[i], cloudDataArrayLike[i + 1], cloudDataArrayLike[i + 2]);
+              if (this.cloudData.get(key).visible === true) {
+                covers.push(cloudDataArrayLike[i], cloudDataArrayLike[i + 1], cloudDataArrayLike[i + 2]);
+              }
+            }
+            if (this.segmentCoverMode === EPointCloudSegmentCoverMode.Uncover) {
+              if (this.cloudData.get(key).visible === false) {
+                vertices.push(cloudDataArrayLike[i], cloudDataArrayLike[i + 1], cloudDataArrayLike[i + 2]);
+              }
+            }
+            if (this.cloudData.get(key).visible === false) {
+              this.cloudData.get(key).visible = true;
+            }
+          }
+        }
+      }
+      const verticesArray = new Float32Array(vertices);
+      const coversArray = new Float32Array(covers);
+      this.updateStatusBySelector(verticesArray, coversArray);
+    }
+  }
+  updateStatusBySelector(verticesArray, coversArray) {
+    switch (this.segmentMode) {
+      case EPointCloudSegmentMode.Add:
+        if (this.cacheSegData) {
+          const {points, coverPoints = new Float32Array([])} = this.cacheSegData;
+          const combinedLength = points.length + verticesArray.length;
+          const combined = new Float32Array(combinedLength);
+          combined.set(points, 0);
+          combined.set(verticesArray, points.length);
+          const coverCombinedLength = coverPoints.length + coversArray.length;
+          const coverCombined = new Float32Array(coverCombinedLength);
+          coverCombined.set(coverPoints, 0);
+          coverCombined.set(coversArray, coverPoints.length);
+          this.cacheSegData = __spreadProps(__spreadValues({}, this.cacheSegData), {
+            points: combined,
+            coverPoints: coverCombined
+          });
+          this.emit("updateNewPoints", this.cacheSegData);
+        } else {
+          this.cacheSegData = {
+            id: uuid(),
+            attribute: this.currentAttribute,
+            points: verticesArray,
+            coverPoints: coversArray
+          };
+          this.emit("addNewPointsCloud", this.cacheSegData);
+        }
+        break;
+      case EPointCloudSegmentMode.Remove:
+        if (this.cacheSegData) {
+          const {points} = this.cacheSegData;
+          this.cacheSegData = __spreadProps(__spreadValues({}, this.cacheSegData), {
+            points: this.splitPointsFromPoints(points, verticesArray)
+          });
+          this.emit("updateNewPoints", this.cacheSegData);
+        }
+        break;
+    }
+    this.updateStatus2Edit();
+    this.emit("syncPointCloudStatus", {
+      segmentStatus: this.segmentStatus,
+      cacheSegData: this.cacheSegData
+    });
+  }
+  splitPointsFromPoints(originPoints, splitPoints) {
+    const splitMap = new Map();
+    for (let i = 0; i < splitPoints.length; i += 3) {
+      splitMap.set(PointCloudUtils.getCloudKeys(splitPoints[i], splitPoints[i + 1], splitPoints[i + 2]), 1);
+    }
+    const result = [];
+    for (let i = 0; i < originPoints.length; i += 3) {
+      const key = PointCloudUtils.getCloudKeys(originPoints[i], originPoints[i + 1], originPoints[i + 2]);
+      if (!splitMap.has(key)) {
+        result.push(originPoints[i], originPoints[i + 1], originPoints[i + 2]);
+      }
+    }
+    return new Float32Array(result);
+  }
+  syncPointCloudStatus() {
+    this.statusToggle();
+    const {segmentStatus, cacheSegData} = this;
+    this.emit("syncPointCloudStatus", {segmentStatus, cacheSegData});
+  }
+  addStash2Store() {
+    if (this.isEditStatus && this.cacheSegData) {
+      if (this.cacheSegData.coverPoints && this.cacheSegData.coverPoints.length !== 0) {
+        this.updateCoverPoints(this.cacheSegData.coverPoints);
+      }
+      delete this.cacheSegData.coverPoints;
+      this.segmentData.set(this.cacheSegData.id, this.cacheSegData);
+      this.cacheSegData = void 0;
+      this.syncPointCloudStatus();
+    }
+  }
+  updateCloudDataStatus(points, status) {
+    for (let i = 0; i < points.length; i += 3) {
+      const x = points[i];
+      const y = points[i + 1];
+      const z = points[i + 2];
+      const key = PointCloudUtils.getCloudKeys(x, y, z);
+      const data = this.cloudData.get(key);
+      Object.keys(status).forEach((k) => {
+        data[k] = status[k];
+      });
+    }
+  }
+  clearStash() {
+    if (this.isEditStatus && this.cacheSegData) {
+      this.updateCloudDataStatus(this.cacheSegData.points, {visible: false});
+      if (this.segmentData.has(this.cacheSegData.id)) {
+        const originSegmentData = this.segmentData.get(this.cacheSegData.id);
+        if (originSegmentData) {
+          this.emit("updateNewPoints", originSegmentData);
+          this.updateCloudDataStatus(originSegmentData == null ? void 0 : originSegmentData.points, {visible: true});
+        }
+      } else {
+        this.emit("clearStashRender");
+      }
+      this.cacheSegData = void 0;
+      this.syncPointCloudStatus();
+    }
+  }
+  updateCheck2Edit() {
+    if (this.isCheckStatus) {
+      this.syncPointCloudStatus();
+    }
+  }
+  checkPoints() {
+    const hoverPoints = this.segmentData.get(this.hoverPointsID);
+    if (hoverPoints) {
+      this.cacheSegData = __spreadProps(__spreadValues({}, hoverPoints), {
+        points: new Float32Array(hoverPoints.points)
+      });
+      instance.updateStatus2Check();
+      this.emit("syncPointCloudStatus", {
+        segmentStatus: this.segmentStatus,
+        cacheSegData: this.cacheSegData
+      });
+    }
+  }
+  editPoints() {
+    const hoverPoints = this.segmentData.get(this.hoverPointsID);
+    if (hoverPoints) {
+      this.cacheSegData = __spreadProps(__spreadValues({}, hoverPoints), {
+        points: new Float32Array(hoverPoints.points)
+      });
+      this.emit("updateNewPoints");
+      this.syncPointCloudStatus();
+    }
+  }
+  setForbidOperation(forbidOperation) {
+    this.forbidOperation = forbidOperation;
+  }
+  updateMouse(offset) {
+    const x = offset.x / this.containerWidth * 2 - 1;
+    const y = -(offset.y / this.containerHeight) * 2 + 1;
+    this.mouse.setX(x);
+    this.mouse.setY(y);
+  }
+  resetAllSegDataSize() {
+    this.allSegmentPoints.forEach((points) => {
+      var _a;
+      if (((_a = this.cacheSegData) == null ? void 0 : _a.id) === points.name) {
+        return;
+      }
+      points.material.size = 5;
+    });
+  }
+  resetHoverPointsID() {
+    this.hoverPointsID = "";
+  }
+  resetAllSegDataSizeAndRender() {
+    this.resetAllSegDataSize();
+    this.emit("reRender3d");
+  }
+  highlightPoints(newPoints) {
+    if (!(this.isCheckStatus || this.isReadyStatus)) {
+      return;
+    }
+    this.resetAllSegDataSize();
+    newPoints.material.size = 10;
+    this.hoverPointsID = newPoints.name;
+    this.emit("reRender3d");
+  }
+  setAttribute(attribute) {
+    this.currentAttribute = attribute;
+  }
+}
+
+export { PointCloudStore as default };

package/es/core/toolOperation/Selection.js

@@ -0,0 +1,101 @@
+import _ from 'lodash';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+
+class Selection {
+  constructor(toolInstance) {
+    if (!toolInstance) {
+      console.error("MultipleSelect is require a tool instance");
+    }
+    this._selectedIDs = [];
+    this.toolInstance = toolInstance;
+  }
+  get selectedIDs() {
+    return this._selectedIDs;
+  }
+  get selectedID() {
+    return this._selectedIDs.length === 1 ? this._selectedIDs[0] : void 0;
+  }
+  get visibleDataList() {
+    const {dataList, attributeLockList, basicResult} = this.toolInstance;
+    const [showingDataList] = CommonToolUtils.getRenderResultList(dataList, CommonToolUtils.getSourceID(basicResult), attributeLockList);
+    return showingDataList;
+  }
+  get dataList() {
+    return this.toolInstance.dataList;
+  }
+  set selectedIDs(selectedIDs) {
+    var _a;
+    (_a = this.toolInstance._textAttributeInstance) == null ? void 0 : _a.selectedIDsChanged(this.selectedIDs, selectedIDs);
+    this._selectedIDs = selectedIDs;
+    this.toolInstance.render();
+  }
+  updateSelectedIDs(selectedID) {
+    if (!selectedID) {
+      this._selectedIDs = [];
+      return;
+    }
+    if (this.selectedIDs.includes(selectedID)) {
+      this.selectedIDs = this.selectedIDs.filter((id) => id !== selectedID);
+    } else {
+      this.selectedIDs = [...this.selectedIDs, selectedID];
+    }
+  }
+  setSelectedIDs(id, isAppend = false) {
+    if (isAppend) {
+      this.updateSelectedIDs(id);
+      return;
+    }
+    this.selectedIDs = id ? [id] : [];
+  }
+  hardSetSelectedIDs(ids) {
+    this.selectedIDs = ids;
+  }
+  selectAll() {
+    this.selectedIDs = this.visibleDataList.map((i) => i.id);
+    this.toolInstance.render();
+  }
+  toStashDataList() {
+    if (this.selectedIDs.length > 0) {
+      this.stashDataList = _.cloneDeep(this.dataList.filter((i) => this.selectedIDs.includes(i.id)));
+    }
+  }
+  toUnStashDataList() {
+    if (this.stashDataList) {
+      const _stashDataList = this.stashDataList;
+      this.stashDataList = void 0;
+      return _stashDataList;
+    }
+    return void 0;
+  }
+  mergeStashData(setDataList) {
+    const stashList = this.toUnStashDataList();
+    if (!stashList) {
+      return;
+    }
+    const mergedDataList = _(this.dataList).keyBy("id").merge(_.keyBy(stashList, "id")).values().value();
+    setDataList(mergedDataList);
+    this.toolInstance.render();
+  }
+  isIdSelected(id) {
+    return this.selectedIDs.includes(id);
+  }
+  triggerKeyboardEvent(e, setDataList) {
+    if (e.ctrlKey) {
+      if (e.key === "v") {
+        this.mergeStashData(setDataList);
+        return true;
+      }
+      if (e.key === "a") {
+        this.selectAll();
+        return true;
+      }
+      if (e.key === "c") {
+        this.toStashDataList();
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export { Selection as default };

package/es/core/toolOperation/cuboidOperation.js

@@ -1,7 +1,7 @@
 import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
 import AxisUtils from '../../utils/tool/AxisUtils.js';
 import uuid from '../../utils/uuid.js';
-import { getCuboidHoverRange, getPlainPointsByDiagonalPoints, getPointsByBottomRightPoint, getCuboidDragMove, isCuboidWithInLimits, getHighlightPoints, getCuboidTextAttributeOffset, getToggleDirectionButtonOffset } from '../../utils/tool/CuboidUtils.js';
+import { getCuboidHoverRange, getPlainPointsByDiagonalPoints, getPointsByBottomRightPoint, getCuboidDragMove, isCuboidWithInLimits, getHighlightPoints, getHighlightLines, getToggleDirectionButtonOffset, getCuboidTextAttributeOffset } from '../../utils/tool/CuboidUtils.js';
 import PolygonUtils from '../../utils/tool/PolygonUtils.js';
 import { EDragStatus, EDragTarget, ECuboidDirection } from '../../constant/annotation.js';
 import AttributeUtils from '../../utils/tool/AttributeUtils.js';
@@ -75,6 +75,10 @@ class CuboidOperation extends BasicToolOperation {
     this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
     this.updateSelectedTextAttribute = this.updateSelectedTextAttribute.bind(this);
   }
+  get selectedText() {
+    var _a, _b;
+    return (_b = (_a = this.selectedCuboid) == null ? void 0 : _a.textAttribute) != null ? _b : "";
+  }
   destroy() {
     super.destroy();
     if (this._textAttributeInstance) {
@@ -123,18 +127,20 @@ class CuboidOperation extends BasicToolOperation {
       return cuboid;
     });
   }
-  getColorToRender(attribute, valid) {
+  getStylesToRender(attribute, valid) {
+    var _a, _b;
     const toolColor = this.getColor(attribute);
     const strokeColor = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
     const fillColor = valid ? toolColor == null ? void 0 : toolColor.valid.fill : toolColor == null ? void 0 : toolColor.invalid.fill;
-    return {strokeColor, toolColor, fillColor};
+    const lineWidth = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
+    return {strokeColor, toolColor, fillColor, lineWidth};
   }
   getCurrentSelectedData() {
     const {selectedCuboid} = this;
     if (!selectedCuboid) {
       return;
     }
-    const {strokeColor: color} = this.getColorToRender(selectedCuboid.attribute, selectedCuboid.valid);
+    const {strokeColor: color} = this.getStylesToRender(selectedCuboid.attribute, selectedCuboid.valid);
     return {
       width: TEXT_MAX_WIDTH,
       textAttribute: selectedCuboid.textAttribute,
@@ -155,7 +161,7 @@ class CuboidOperation extends BasicToolOperation {
     }
   }
   setResult(cuboidList) {
-    this.clearDrawingStatus();
+    this.clearActiveStatus();
     this.setCuboidList(cuboidList);
     this.render();
   }
@@ -164,7 +170,8 @@ class CuboidOperation extends BasicToolOperation {
   }
   clearResult() {
     this.setCuboidList([], true);
-    this.setSelectedID(void 0);
+    this.deleteSelectedID();
+    this.render();
   }
   exportData() {
     const {cuboidList} = this;
@@ -247,6 +254,15 @@ class CuboidOperation extends BasicToolOperation {
           this.render();
         }
         break;
+      case EKeyCode.Delete:
+        if (this.selectedID) {
+          this.deleteCuboid(this.selectedID);
+        }
+        break;
+      case EKeyCode.Z:
+        this.setIsHidden(!this.isHidden);
+        this.render();
+        break;
       case EKeyCode.F:
         if (this.selectedID) {
           this.setCuboidValidAndRender(this.selectedID);
@@ -445,6 +461,13 @@ class CuboidOperation extends BasicToolOperation {
     };
     this.firstClickCoord = __spreadValues({}, coordinate);
     this.drawingStatus = 2;
+    if (this.config.textConfigurable) {
+      let textAttribute = "";
+      textAttribute = AttributeUtils.getTextAttribute(this.cuboidList.filter((cuboid) => CommonToolUtils.isSameSourceID(cuboid.sourceID, basicSourceID)), this.config.textCheckType);
+      this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+        textAttribute
+      });
+    }
   }
   closeNewDrawingFrontPlane() {
     this.drawingStatus = 3;
@@ -464,12 +487,19 @@ class CuboidOperation extends BasicToolOperation {
     this.clearDrawingStatus();
     this.render();
   }
+  deleteSelectedID() {
+    this.setSelectedID("");
+  }
   clearDrawingStatus() {
     if (this.drawingCuboid) {
       this.drawingCuboid = void 0;
       this.drawingStatus = 1;
     }
   }
+  clearActiveStatus() {
+    this.clearDrawingStatus();
+    this.deleteSelectedID();
+  }
   rightMouseUp(e) {
     const {hoverID, hoverCuboid} = this.getHoverData(e);
     this.setSelectedID(hoverID);
@@ -481,60 +511,42 @@ class CuboidOperation extends BasicToolOperation {
     }
     this.render();
   }
-  renderSingleCuboid(cuboid) {
-    var _a, _b, _c, _d;
+  renderHighlightCuboidCom(cuboid) {
     const transformCuboid = AxisUtils.changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
     const isHover = transformCuboid.id === this.hoverID;
     const isSelected = transformCuboid.id === this.selectedID;
-    const {strokeColor, fillColor} = this.getColorToRender(transformCuboid.attribute, transformCuboid.valid);
-    const textColor = strokeColor;
-    const lineWidth = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
-    const {hiddenText = false} = this.style;
+    const {strokeColor, lineWidth} = this.getStylesToRender(transformCuboid.attribute, transformCuboid.valid);
     const defaultStyle = {
       color: strokeColor,
       thickness: lineWidth
     };
-    const {backPoints, frontPoints, textAttribute} = transformCuboid;
-    const frontPointsSizeWidth = frontPoints.br.x - frontPoints.bl.x;
-    DrawUtils.drawCuboid(this.canvas, transformCuboid, {strokeColor, fillColor, thickness: lineWidth});
     if (isHover || isSelected) {
       const hoverPointList = getHighlightPoints(transformCuboid);
       hoverPointList.forEach((data) => {
         DrawUtils.drawCircleWithFill(this.canvas, data.point, 5, __spreadValues({}, defaultStyle));
       });
       if (isSelected) {
+        const highlightLine = getHighlightLines(transformCuboid);
+        highlightLine.forEach((line) => {
+          DrawUtils.drawLine(this.canvas, line.p1, line.p2, {color: strokeColor, thickness: lineWidth + 2});
+        });
         hoverPointList.forEach((data) => {
           DrawUtils.drawCircleWithFill(this.canvas, data.point, 3, {color: "white"});
         });
       }
     }
-    let showText = "";
-    if (((_c = this.config) == null ? void 0 : _c.isShowOrder) && transformCuboid.order && (transformCuboid == null ? void 0 : transformCuboid.order) > 0) {
-      showText = `${transformCuboid.order}`;
-    }
-    if (transformCuboid.attribute) {
-      showText = `${showText}  ${AttributeUtils.getAttributeShowText(transformCuboid.attribute, (_d = this.config) == null ? void 0 : _d.attributeList)}`;
-    }
-    if (!hiddenText && backPoints) {
-      DrawUtils.drawText(this.canvas, {x: backPoints.tl.x, y: backPoints.tl.y - 5}, showText, {
-        color: strokeColor,
-        textMaxWidth: 300
-      });
-    }
-    const textPosition = getCuboidTextAttributeOffset({
-      cuboid,
-      currentPos: this.currentPos,
-      zoom: this.zoom,
-      topOffset: 16,
-      leftOffset: 0
+  }
+  renderSingleCuboid(cuboid) {
+    var _a, _b;
+    const transformCuboid = AxisUtils.changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
+    const {strokeColor, fillColor} = this.getStylesToRender(transformCuboid.attribute, transformCuboid.valid);
+    const lineWidth = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
+    const {hiddenText = false} = this.style;
+    DrawUtils.drawCuboidWithText(this.canvas, transformCuboid, {strokeColor, fillColor, thickness: lineWidth}, {
+      config: this.config,
+      hiddenText,
+      selectedID: this.selectedID
     });
-    if (!hiddenText && textAttribute && cuboid.id !== this.selectedID) {
-      const textWidth = Math.max(20, frontPointsSizeWidth * 0.8);
-      DrawUtils.drawText(this.canvas, {x: textPosition.left, y: textPosition.top}, textAttribute, {
-        color: textColor,
-        textMaxWidth: textWidth
-      });
-    }
     this.renderTextAttribute();
   }
   setDefaultAttribute(defaultAttribute) {
@@ -544,6 +556,13 @@ class CuboidOperation extends BasicToolOperation {
       this.changeStyle(defaultAttribute);
       this.emit("changeAttributeSidebar");
       const {selectedCuboid} = this;
+      if (this._textAttributeInstance) {
+        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(this.defaultAttribute)) {
+          this._textAttributeInstance.clearTextAttribute();
+        } else {
+          this._textAttributeInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
+        }
+      }
       if (selectedCuboid) {
         this.setCuboidList(this.cuboidList.map((v) => {
           if (v.id === this.selectedID) {
@@ -555,6 +574,7 @@ class CuboidOperation extends BasicToolOperation {
         }));
         this.history.pushHistory(this.cuboidList);
         this.render();
+        return;
       }
       if (this.drawingCuboid) {
         this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
@@ -562,22 +582,15 @@ class CuboidOperation extends BasicToolOperation {
         });
         this.render();
       }
-      if (this._textAttributeInstance) {
-        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(this.defaultAttribute)) {
-          this._textAttributeInstance.clearTextAttribute();
-          return;
-        }
-        this._textAttributeInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
-      }
     }
   }
   renderToggleButton() {
     const {selectedCuboid} = this;
-    if (!this.ctx || this.config.textConfigurable !== true || !selectedCuboid) {
+    if (!this.ctx || !selectedCuboid) {
       return;
     }
     const {attribute, valid} = selectedCuboid;
-    const {strokeColor: color} = this.getColorToRender(attribute, valid);
+    const {strokeColor: color} = this.getStylesToRender(attribute, valid);
     if (!this.toggleButtonInstance) {
       this.toggleButtonInstance = new CuboidToggleButtonClass({
         container: this.container,
@@ -602,7 +615,7 @@ class CuboidOperation extends BasicToolOperation {
     if (!this.ctx || this.config.textConfigurable === false || !selectedCuboid) {
       return;
     }
-    const {strokeColor: color} = this.getColorToRender(selectedCuboid.attribute, selectedCuboid.valid);
+    const {strokeColor: color} = this.getStylesToRender(selectedCuboid.attribute, selectedCuboid.valid);
     const {attribute, textAttribute, frontPoints} = selectedCuboid;
     const offset = getCuboidTextAttributeOffset({
       cuboid: selectedCuboid,
@@ -636,13 +649,16 @@ class CuboidOperation extends BasicToolOperation {
     }
   }
   renderStatic() {
-    this.cuboidList.forEach((cuboid) => this.renderSingleCuboid(cuboid));
+    if (!this.isHidden) {
+      this.currentShowList.forEach((cuboid) => this.renderSingleCuboid(cuboid));
+    }
   }
   renderSelected() {
     var _a;
     const {selectedCuboid} = this;
     if (selectedCuboid) {
       this.renderSingleCuboid(selectedCuboid);
+      this.renderHighlightCuboidCom(selectedCuboid);
       this.renderToggleButton();
     } else {
       (_a = this.toggleButtonInstance) == null ? void 0 : _a.clearCuboidButtonDOM();
@@ -677,7 +693,7 @@ class CuboidOperation extends BasicToolOperation {
     }
     (_a = this.highlightInfo) == null ? void 0 : _a.forEach((data) => {
       var _a2, _b;
-      const {strokeColor} = this.getColorToRender(data.originCuboid.attribute, data.originCuboid.valid);
+      const {strokeColor} = this.getStylesToRender(data.originCuboid.attribute, data.originCuboid.valid);
       const thickness = 8;
       switch (data.type) {
         case "point":

package/es/utils/tool/CuboidUtils.js

@@ -489,78 +489,95 @@ function getNewPointsAfterOffset({
     backPoints: newBackPoints
   };
 }
+function moveCuboidByCuboid({offset, cuboid}) {
+  const {frontPoints, backPoints} = cuboid;
+  const newFrontPoints = Object.entries(frontPoints).reduce((acc, [key, point]) => {
+    return __spreadProps(__spreadValues({}, acc), {
+      [key]: {
+        x: point.x + offset.x,
+        y: point.y + offset.y
+      }
+    });
+  }, {});
+  const newBackPoints = Object.entries(backPoints).reduce((acc, [key, point]) => {
+    return __spreadProps(__spreadValues({}, acc), {
+      [key]: {
+        x: point.x + offset.x,
+        y: point.y + offset.y
+      }
+    });
+  }, {});
+  return {
+    frontPoints: newFrontPoints,
+    backPoints: newBackPoints
+  };
+}
+function moveCuboidByLine({
+  offset,
+  cuboid,
+  positions
+}) {
+  const {frontPoints, backPoints} = cuboid;
+  return getNewPointsAfterOffset({
+    offset,
+    frontPoints,
+    backPoints,
+    positions
+  });
+}
+function moveCuboidByPoints({
+  offset,
+  cuboid,
+  positions
+}) {
+  if (!(positions == null ? void 0 : positions[0])) {
+    return;
+  }
+  const {frontPoints, backPoints} = cuboid;
+  const pointPosition = positions[0];
+  const isFrontPlain = pointPosition.plain === ECuboidPlain.Front;
+  const movePoints = isFrontPlain ? frontPoints : backPoints;
+  let movePoint = movePoints[pointPosition.position];
+  const diagonalPoint = movePoints[DIAGONAL_POINT[pointPosition.position]];
+  if (!movePoint || !diagonalPoint) {
+    return;
+  }
+  movePoint = Vector.add(movePoint, offset);
+  const newPlainsPoints = getPlainPointsByDiagonalPoints(movePoint, diagonalPoint);
+  const getNewPlainPoints = isFrontPlain ? getBackPointsByFrontPoints : getFrontPointsByBackPoints;
+  let payload = {
+    frontPoints,
+    backPoints: newPlainsPoints
+  };
+  if (isFrontPlain) {
+    payload = {
+      frontPoints: newPlainsPoints,
+      backPoints
+    };
+  }
+  return getNewPlainPoints(payload);
+}
 function getCuboidDragMove({
   offset,
   cuboid,
   dragTarget,
   positions
 }) {
-  const {frontPoints, backPoints} = cuboid;
   switch (dragTarget) {
     case EDragTarget.Cuboid: {
-      const newFrontPoints = Object.entries(frontPoints).reduce((acc, [key, point]) => {
-        return __spreadProps(__spreadValues({}, acc), {
-          [key]: {
-            x: point.x + offset.x,
-            y: point.y + offset.y
-          }
-        });
-      }, {});
-      const newBackPoints = Object.entries(backPoints).reduce((acc, [key, point]) => {
-        return __spreadProps(__spreadValues({}, acc), {
-          [key]: {
-            x: point.x + offset.x,
-            y: point.y + offset.y
-          }
-        });
-      }, {});
-      return __spreadProps(__spreadValues({}, cuboid), {
-        frontPoints: newFrontPoints,
-        backPoints: newBackPoints
-      });
+      const newCuboidPoints = moveCuboidByCuboid({offset, cuboid});
+      return __spreadValues(__spreadValues({}, cuboid), newCuboidPoints);
     }
     case EDragTarget.Line: {
-      const {frontPoints: newFrontPoints, backPoints: newBackPoints} = getNewPointsAfterOffset({
-        offset,
-        frontPoints,
-        backPoints,
-        positions
-      });
-      return __spreadProps(__spreadValues({}, cuboid), {
-        frontPoints: newFrontPoints,
-        backPoints: newBackPoints
-      });
+      const newCuboidPoints = moveCuboidByLine({offset, cuboid, positions});
+      return __spreadValues(__spreadValues({}, cuboid), newCuboidPoints);
     }
     case EDragTarget.Point: {
-      if (!(positions == null ? void 0 : positions[0])) {
-        return;
-      }
-      const pointPosition = positions[0];
-      const isFrontPlain = pointPosition.plain === ECuboidPlain.Front;
-      const movePoints = isFrontPlain ? frontPoints : backPoints;
-      let movePoint = movePoints[pointPosition.position];
-      const diagonalPoint = movePoints[DIAGONAL_POINT[pointPosition.position]];
-      if (!movePoint || !diagonalPoint) {
-        return;
+      const newCuboidPoints = moveCuboidByPoints({cuboid, offset, positions});
+      if (newCuboidPoints) {
+        return __spreadValues(__spreadValues({}, cuboid), newCuboidPoints);
       }
-      movePoint = Vector.add(movePoint, offset);
-      const newPlainsPoints = getPlainPointsByDiagonalPoints(movePoint, diagonalPoint);
-      const getNewPlainPoints = isFrontPlain ? getBackPointsByFrontPoints : getFrontPointsByBackPoints;
-      let payload = {
-        frontPoints,
-        backPoints: newPlainsPoints
-      };
-      if (isFrontPlain) {
-        payload = {
-          frontPoints: newPlainsPoints,
-          backPoints
-        };
-      }
-      const {frontPoints: newFrontPoints, backPoints: newBackPoints} = getNewPlainPoints(payload);
-      return __spreadProps(__spreadValues({}, cuboid), {
-        frontPoints: newFrontPoints,
-        backPoints: newBackPoints
-      });
+      break;
     }
     default: {
       console.error("No DragTarget");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-annotation",
-  "version": "1.13.1-alpha.0",
+  "version": "1.13.1",
   "description": "Annotation tool collection",
   "keywords": [
     "annotation",
@@ -92,11 +92,11 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@labelbee/lb-utils": "^1.6.1-alpha.0",
+    "@labelbee/lb-utils": "^1.6.1",
     "@turf/turf": "5.1.6",
     "color-rgba": "^2.3.0",
     "lodash": "^4.17.20",
     "three": ">=0.141.0"
   },
-  "gitHead": "d97831322bbab5c86cb12a1abadd0a34d351ab9f"
+  "gitHead": "c95b85c66f2aa6de4a53a2745765c043e7ab113d"
 }