@labelbee/lb-annotation 1.14.0-alpha.2 → 1.14.0-alpha.3

package/es/core/pointCloud/matrix.js

@@ -1 +1,109 @@
-import*as p from"three";import{MatrixUtils as x,PointCloudUtils as w}from"@labelbee/lb-utils";import _ from"../../utils/uuid.js";var g=Object.defineProperty,h=Object.defineProperties,z=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,O=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable,M=(r,t,e)=>t in r?g(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,P=(r,t)=>{for(var e in t||(t={}))O.call(t,e)&&M(r,e,t[e]);if(m)for(var e of m(t))T.call(t,e)&&M(r,e,t[e]);return r},V=(r,t)=>h(r,z(t));function u(r){return new p.Matrix4().set(...r)}function d(r,t,e){const o=x.transferMatrix34FromKitti2Three(r),n=x.transferMatrix33FromKitti2Three(t),a=x.transferMatrix34FromKitti2Three(e),l=u(o),c=u(n),s=u(a);return{composeMatrix4:s.clone().premultiply(c).premultiply(l),PM:l,RM:c,TM:s}}function y(r,t,e){var o;const n=new p.Vector3(r.x,r.y,(o=r==null?void 0:r.z)!=null?o:1),a=new p.Matrix4().makeRotationZ(e),l=new p.Matrix4().makeTranslation(t.x,t.y,t.z),c=new p.Matrix4().makeTranslation(-t.x,-t.y,-t.z);return n.clone().applyMatrix4(c).applyMatrix4(a).applyMatrix4(l)}function v(r,t){const o=new p.Vector4(r.x,r.y,r.z).applyMatrix4(t);if(o.z<0)return;const n=1/o.z,a=new p.Matrix4().set(n,0,0,0,0,n,0,0,0,0,n,0,0,0,0,1);return o.applyMatrix4(a)}function R(r){const{center:t,width:e,height:o,depth:n,rotation:a}=r,l=[{x:t.x+e/2,y:t.y-o/2},{x:t.x+e/2,y:t.y+o/2},{x:t.x-e/2,y:t.y+o/2},{x:t.x-e/2,y:t.y-o/2}].map(i=>{const f=y(i,t,a);return{x:f.x,y:f.y}}),c=t.z+n/2,s=t.z-n/2;return V(P({},r),{polygonPointList:l,zMax:c,zMin:s})}function b(r,t){const e=w.getAllViewData(r),{P:o,R:n,T:a}=t,{composeMatrix4:l}=d(o,n,a);return e.map(s=>({type:s.type,pointList:s.pointList.map(i=>y(i,r.center,r.rotation)).map(i=>v(i,l)).map(i=>{if(!!i)return{id:_(),x:i==null?void 0:i.x,y:i==null?void 0:i.y}}).filter(i=>i!==void 0)})).filter(s=>s.pointList.length!==0)}export{u as createThreeMatrix4,R as getCuboidFromPointCloudBox,v as lidar2image,b as pointCloudLidar2image,y as rotatePoint,d as transferKitti2Matrix};
+import * as THREE from 'three';
+import { MatrixUtils, PointCloudUtils } from '@labelbee/lb-utils';
+import uuid from '../../utils/uuid.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));
+function createThreeMatrix4(matrix4) {
+  return new THREE.Matrix4().set(...matrix4);
+}
+function transferKitti2Matrix(P, R, T) {
+  const PMA = MatrixUtils.transferMatrix34FromKitti2Three(P);
+  const RMA = MatrixUtils.transferMatrix33FromKitti2Three(R);
+  const TMA = MatrixUtils.transferMatrix34FromKitti2Three(T);
+  const PM = createThreeMatrix4(PMA);
+  const RM = createThreeMatrix4(RMA);
+  const TM = createThreeMatrix4(TMA);
+  return {
+    composeMatrix4: TM.clone().premultiply(RM).premultiply(PM),
+    PM,
+    RM,
+    TM
+  };
+}
+function rotatePoint(points, centerPoint, rotationZ) {
+  var _a;
+  const pointVector = new THREE.Vector3(points.x, points.y, (_a = points == null ? void 0 : points.z) != null ? _a : 1);
+  const Rz = new THREE.Matrix4().makeRotationZ(rotationZ);
+  const TFrom = new THREE.Matrix4().makeTranslation(centerPoint.x, centerPoint.y, centerPoint.z);
+  const TBack = new THREE.Matrix4().makeTranslation(-centerPoint.x, -centerPoint.y, -centerPoint.z);
+  return pointVector.clone().applyMatrix4(TBack).applyMatrix4(Rz).applyMatrix4(TFrom);
+}
+function lidar2image(point, composeMatrix4) {
+  const vector = new THREE.Vector4(point.x, point.y, point.z);
+  const newV = vector.applyMatrix4(composeMatrix4);
+  if (newV.z < 0) {
+    return void 0;
+  }
+  const z = 1 / newV.z;
+  const fixMatrix4 = new THREE.Matrix4().set(z, 0, 0, 0, 0, z, 0, 0, 0, 0, z, 0, 0, 0, 0, 1);
+  return newV.applyMatrix4(fixMatrix4);
+}
+function getCuboidFromPointCloudBox(boxParams) {
+  const {center, width, height, depth, rotation} = boxParams;
+  const polygonPointList = [
+    {
+      x: center.x + width / 2,
+      y: center.y - height / 2
+    },
+    {
+      x: center.x + width / 2,
+      y: center.y + height / 2
+    },
+    {
+      x: center.x - width / 2,
+      y: center.y + height / 2
+    },
+    {
+      x: center.x - width / 2,
+      y: center.y - height / 2
+    }
+  ].map((v) => {
+    const vector = rotatePoint(v, center, rotation);
+    return {
+      x: vector.x,
+      y: vector.y
+    };
+  });
+  const zMax = center.z + depth / 2;
+  const zMin = center.z - depth / 2;
+  return __spreadProps(__spreadValues({}, boxParams), {
+    polygonPointList,
+    zMax,
+    zMin
+  });
+}
+function pointCloudLidar2image(boxParams, cameraMatrix) {
+  const allViewData = PointCloudUtils.getAllViewData(boxParams);
+  const {P, R, T} = cameraMatrix;
+  const {composeMatrix4} = transferKitti2Matrix(P, R, T);
+  const transferViewData = allViewData.map((viewData) => ({
+    type: viewData.type,
+    pointList: viewData.pointList.map((point) => rotatePoint(point, boxParams.center, boxParams.rotation)).map((point) => lidar2image(point, composeMatrix4)).map((point) => {
+      if (!point) {
+        return void 0;
+      }
+      return {id: uuid(), x: point == null ? void 0 : point.x, y: point == null ? void 0 : point.y};
+    }).filter((v) => v !== void 0)
+  })).filter((v) => v.pointList.length !== 0);
+  return transferViewData;
+}
+
+export { createThreeMatrix4, getCuboidFromPointCloudBox, lidar2image, pointCloudLidar2image, rotatePoint, transferKitti2Matrix };

package/es/core/pointCloud/segmentation.js

@@ -0,0 +1,120 @@
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import * as THREE from 'three';
+import Sse3dLassoSelector from './selector/Sse3dLassoSelector.js';
+
+class PointCloudSegmentOperation {
+  constructor(props) {
+    this.pointer = new THREE.Vector2();
+    this._forbidRender = false;
+    this.polygon = [];
+    this.startX = NaN;
+    this.startY = NaN;
+    this.onMouseMove = (iev) => {
+      const coord = this.getCoordinate(iev);
+      this.pointer.x = coord.x / this.dom.clientWidth * 2 - 1;
+      this.pointer.y = -(coord.y / this.dom.clientHeight) * 2 + 1;
+      const ev = {
+        offsetX: iev.offsetX,
+        offsetY: iev.offsetY,
+        pageX: iev.pageX,
+        pageY: iev.pageY,
+        which: iev.buttons === 2 ? 3 : 0
+      };
+      this.selector.mouseDrag(ev);
+    };
+    this.onMouseDown = (iev) => {
+      this._forbidRender = true;
+      const ev = {
+        offsetX: iev.offsetX,
+        offsetY: iev.offsetY,
+        pageX: iev.pageX,
+        pageY: iev.pageY,
+        which: iev.buttons === 2 ? 3 : 0
+      };
+      this.selector.mouseDown(ev);
+    };
+    this.onMouseUp = (iev) => {
+      const ev = {
+        offsetX: iev.offsetX,
+        offsetY: iev.offsetY,
+        pageX: iev.pageX,
+        pageY: iev.pageY,
+        which: iev.buttons === 2 ? 3 : 0
+      };
+      this.selector.mouseUp(ev);
+    };
+    this.render = ({camera, scene}) => {
+      const originPolygon = this.selector.polygon;
+      const polygon = [];
+      if (originPolygon.length > 0 && this.mouseCanvas) {
+        for (let i = 0; i < originPolygon.length; i += 2) {
+          polygon.push({
+            x: originPolygon[i * 2],
+            y: originPolygon[i * 2 + 1]
+          });
+        }
+        console.log("polygon", polygon);
+        DrawUtils.drawPolygon(this.mouseCanvas, polygon, {isClose: false, color: "red"});
+      }
+    };
+    this.dom = props.dom;
+    this.selector = new Sse3dLassoSelector(this);
+    const canvas = document.createElement("canvas");
+    canvas.id = "canvasMouse";
+    this.updateCanvasBasicStyle(canvas, {width: this.dom.clientWidth, height: this.dom.clientHeight}, 10);
+    this.dom.appendChild(canvas);
+    canvas.addEventListener("pointermove", this.onMouseMove);
+    canvas.addEventListener("pointerdown", this.onMouseDown);
+    canvas.addEventListener("pointerup", this.onMouseUp);
+    canvas.oncontextmenu = (e) => {
+      e.preventDefault();
+    };
+    canvas.getContext("2d");
+    this.mouseCanvas = canvas;
+    this.getPointsInPolygon = props.getPointsInPolygon;
+    this.setupRaycaster();
+    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);
+  }
+  updateCanvasBasicStyle(canvas, size, zIndex) {
+    const pixel = 2;
+    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} `;
+  }
+  addMorePoint(scene) {
+    scene.add(this._highlight_Point);
+    scene.add(this._temp);
+  }
+  getCoordinate(e) {
+    const bounding = this.dom.getBoundingClientRect();
+    return {
+      x: e.clientX - bounding.left,
+      y: e.clientY - bounding.top
+    };
+  }
+  setupRaycaster() {
+    const boundingBox = {x: 10, y: 10, z: 10};
+    const numberOfPoints = 10;
+    this.raycaster = new THREE.Raycaster();
+    const threshold = Math.cbrt(boundingBox.x * boundingBox.y * boundingBox.z / numberOfPoints) / 3;
+    if (this.raycaster) {
+      this.raycaster.params.Points.threshold = threshold;
+      this.raycaster.linePrecision = 0.1;
+    }
+  }
+}
+
+export { PointCloudSegmentOperation };

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

@@ -0,0 +1,24 @@
+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.getPointsInPolygon(this.polygon);
+      this.polygon.length = 0;
+    }
+  }
+  mouseDrag(ev) {
+    console.log("ev", ev.which);
+    if (ev.which === 3) {
+      this.pushPoint(ev.offsetX, ev.offsetY);
+      this.scene.emitRender(true);
+    }
+  }
+}
+
+export { Sse3dLassoSelector as default };

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

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

package/es/core/scheduler.js

@@ -1 +1,228 @@
-import{getConfig as f,styleDefaultConfig as L}from"../constant/defaultConfig.js";import{getCurrentOperation as y}from"../utils/tool/EnhanceCommonToolUtils.js";import{BasicToolOperation as v}from"./toolOperation/basicToolOperation.js";const D=e=>{const t=document.createElement("canvas");t.width=e.width,t.height=e.height;const i=t.getContext("2d");return i?(i.fillStyle="transparent",i.fillRect(0,0,e.width,e.height),t.toDataURL()):""},p=(e,t,i)=>{const o=e[t];return e[t]=e[i],e[i]=o,e},g=class{static isSingleTool(e){return!this.isHybridTool(e)}static isHybridTool(e){return Array.isArray(e)}};let u=g;u.getTopToolName=e=>g.isHybridTool(e)?e[e.length-1]:e;class I{constructor(t){this.toolOperationList=[],this.toolOperationDom=[],this.toolOperationNameList=[];var i,o;this.init(),this.container=t.container,this.size=t.size,this.imgNode=t.imgNode,this.config=(i=t.config)!=null?i:JSON.stringify(f(u.getTopToolName(t.toolName))),this.style=(o=t.style)!=null?o:L}setImgNode(t,i){this.toolOperationList.forEach(o=>{o.setImgNode(t,i)})}setImgAttribute(t){this.toolOperationList.forEach(i=>{i.setImgAttribute(t)})}setSize(t){this.toolOperationList.forEach(i=>{i.setSize(t)})}syncPosition(t,i,o,s){this.toolOperationList.forEach(a=>{s!==a&&(a.setCurrentPos(t),a.setZoom(i),a.setImgInfo(o),a.renderBasicCanvas(),a.render())})}get defaultSize(){var t,i;return{width:((t=this.imgNode)==null?void 0:t.width)||this.size.width,height:((i=this.imgNode)==null?void 0:i.height)||this.size.height}}createDom(){const{width:t,height:i}=this.defaultSize,o=window.document.createElement("div");o.style.position="absolute",o.style.left="0",o.style.top="0",o.style.width=`${t}px`,o.style.height=`${i}px`;const s=this.toolOperationList.length+1;return o.style.zIndex=`${s}`,o}getEmptyImage(t,i){const o=D({width:t,height:i}),s=new Image;return s.src=o,s}createOperation(t,i,o){var s;const{width:a,height:l}=this.defaultSize,r=this.createDom(),d=this.getEmptyImage(a,l),h={container:r,size:this.size,config:(s=this==null?void 0:this.config)!=null?s:"{}",drawOutSideTarget:!1,style:this.style,imgNode:i||d,hiddenImg:!!t};o&&Object.assign(h,o);let n;if(!t)n=new v(h),r.style.zIndex="0",n.init();else{const c=y(t);if(!c)return;n=new c(h)}return n==null||n.init(),n.canvas.id=t!=null?t:"basicCanvas",n.on("dragMove",({currentPos:c,zoom:m,imgInfo:O})=>{this.syncPosition(c,m,O,n)}),n.on("renderZoom",(c,m,O)=>{c&&m&&this.syncPosition(m,c,O,n)}),t?(this.container.appendChild(r),this.toolOperationList.push(n),this.toolOperationNameList.push(t),this.toolOperationDom.push(r),n):(this.container.insertBefore(r,this.container.childNodes[0]),this.toolOperationList.unshift(n),this.toolOperationDom.unshift(r),n)}switchLastTwoCanvas(){if(this.toolOperationDom.length<3){console.error("switchLastTwoCanvas is just used the layer which has 3 canvas");return}const t=this.toolOperationDom.length,i=t-1,o=t-2,s=this.toolOperationDom[i],a=this.toolOperationDom[o];if(!(!a||!s))return s.style.zIndex=`${i-1}`,a.style.zIndex=`${i}`,this.toolOperationList[i].clearActiveStatus(),this.toolOperationList[i].clearCursorLine(),this.toolOperationList[i].render(),this.toolOperationList=p(this.toolOperationList,i,o),this.toolOperationDom=p(this.toolOperationDom,i,o),this.toolOperationList[i]}getFirstToolOperation(){return this.toolOperationList.length>1?this.toolOperationList[1]:this.toolOperationList[0]}switchToCanvas(t){var i,o,s,a;const l=this.toolOperationNameList.indexOf(t);if(l<0||this.toolOperationList.length<1||l>this.toolOperationDom.length-1)return;const r=this.toolOperationDom.length-1,d=this.toolOperationDom[l],h=this.toolOperationDom[r];if(!d||!h)return;const n=h.style.zIndex;return h.style.zIndex=`${d.style.zIndex}`,d.style.zIndex=`${n}`,(o=(i=this.toolOperationList[r]).clearActiveStatus)==null||o.call(i),(a=(s=this.toolOperationList[r]).clearCursorLine)==null||a.call(s),this.toolOperationList[r].render(),this.toolOperationList=p(this.toolOperationList,r,l),this.toolOperationDom=p(this.toolOperationDom,r,l),this.toolOperationNameList=p(this.toolOperationNameList,r,l),this.toolOperationList[r]}updateDataByToolName(t,i){const o=this.toolOperationNameList.indexOf(t);o>=0&&this.toolOperationList[o].setResult(i)}clearStatusAndResult(){this.toolOperationList.forEach(t=>{var i;(i=t.clearActiveStatus)==null||i.call(t),t.clearResult()})}destroyAllLayer(){this.toolOperationList.forEach(t=>{t.destroyCanvas(),this.init()})}init(){this.toolOperationList=[],this.toolOperationDom=[]}}export{u as HybridToolUtils,I as ToolScheduler};
+import { getConfig, styleDefaultConfig } from '../constant/defaultConfig.js';
+import { getCurrentOperation } from '../utils/tool/EnhanceCommonToolUtils.js';
+import { BasicToolOperation } from './toolOperation/basicToolOperation.js';
+
+const createEmptyImage = (size) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = size.width;
+  canvas.height = size.height;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.fillStyle = "transparent";
+    ctx.fillRect(0, 0, size.width, size.height);
+    return canvas.toDataURL();
+  }
+  return "";
+};
+const arraySwap = (array, index1, index2) => {
+  const a = array[index1];
+  array[index1] = array[index2];
+  array[index2] = a;
+  return array;
+};
+const _HybridToolUtils = class {
+  static isSingleTool(toolName) {
+    return !this.isHybridTool(toolName);
+  }
+  static isHybridTool(toolName) {
+    return Array.isArray(toolName);
+  }
+};
+let HybridToolUtils = _HybridToolUtils;
+HybridToolUtils.getTopToolName = (toolName) => {
+  return _HybridToolUtils.isHybridTool(toolName) ? toolName[toolName.length - 1] : toolName;
+};
+class ToolScheduler {
+  constructor(props) {
+    this.toolOperationList = [];
+    this.toolOperationDom = [];
+    this.toolOperationNameList = [];
+    var _a, _b;
+    this.init();
+    this.container = props.container;
+    this.size = props.size;
+    this.imgNode = props.imgNode;
+    this.config = (_a = props.config) != null ? _a : JSON.stringify(getConfig(HybridToolUtils.getTopToolName(props.toolName)));
+    this.style = (_b = props.style) != null ? _b : styleDefaultConfig;
+  }
+  setImgNode(imgNode, basicImgInfo) {
+    this.toolOperationList.forEach((toolInstance) => {
+      toolInstance.setImgNode(imgNode, basicImgInfo);
+    });
+  }
+  setImgAttribute(imgAttribute) {
+    this.toolOperationList.forEach((toolInstance) => {
+      toolInstance.setImgAttribute(imgAttribute);
+    });
+  }
+  setSize(size) {
+    this.toolOperationList.forEach((toolInstance) => {
+      toolInstance.setSize(size);
+    });
+  }
+  syncPosition(currentPos, zoom, imgInfo, currentToolInstance) {
+    this.toolOperationList.forEach((toolInstance) => {
+      if (currentToolInstance === toolInstance) {
+        return;
+      }
+      toolInstance.setCurrentPos(currentPos);
+      toolInstance.setZoom(zoom);
+      toolInstance.setImgInfo(imgInfo);
+      toolInstance.renderBasicCanvas();
+      toolInstance.render();
+    });
+  }
+  get defaultSize() {
+    var _a, _b;
+    return {
+      width: ((_a = this.imgNode) == null ? void 0 : _a.width) || this.size.width,
+      height: ((_b = this.imgNode) == null ? void 0 : _b.height) || this.size.height
+    };
+  }
+  createDom() {
+    const {width, height} = this.defaultSize;
+    const dom = window.document.createElement("div");
+    dom.style.position = "absolute";
+    dom.style.left = "0";
+    dom.style.top = "0";
+    dom.style.width = `${width}px`;
+    dom.style.height = `${height}px`;
+    const zIndex = this.toolOperationList.length + 1;
+    dom.style.zIndex = `${zIndex}`;
+    return dom;
+  }
+  getEmptyImage(width, height) {
+    const imgSrc = createEmptyImage({width, height});
+    const emptyImgNode = new Image();
+    emptyImgNode.src = imgSrc;
+    return emptyImgNode;
+  }
+  createOperation(tool, imgNode, config) {
+    var _a;
+    const {width, height} = this.defaultSize;
+    const dom = this.createDom();
+    const emptyImgNode = this.getEmptyImage(width, height);
+    const defaultData = {
+      container: dom,
+      size: this.size,
+      config: (_a = this == null ? void 0 : this.config) != null ? _a : "{}",
+      drawOutSideTarget: false,
+      style: this.style,
+      imgNode: imgNode || emptyImgNode,
+      hiddenImg: !!tool
+    };
+    if (config) {
+      Object.assign(defaultData, config);
+    }
+    let toolInstance;
+    if (!tool) {
+      toolInstance = new BasicToolOperation(defaultData);
+      dom.style.zIndex = "0";
+      toolInstance.init();
+    } else {
+      const ToolOperation = getCurrentOperation(tool);
+      if (!ToolOperation) {
+        return;
+      }
+      toolInstance = new ToolOperation(defaultData);
+    }
+    toolInstance == null ? void 0 : toolInstance.init();
+    toolInstance.canvas.id = tool != null ? tool : "basicCanvas";
+    toolInstance.on("dragMove", ({currentPos, zoom, imgInfo}) => {
+      this.syncPosition(currentPos, zoom, imgInfo, toolInstance);
+    });
+    toolInstance.on("renderZoom", (zoom, currentPos, imgInfo) => {
+      if (zoom && currentPos) {
+        this.syncPosition(currentPos, zoom, imgInfo, toolInstance);
+      }
+    });
+    if (!tool) {
+      this.container.insertBefore(dom, this.container.childNodes[0]);
+      this.toolOperationList.unshift(toolInstance);
+      this.toolOperationDom.unshift(dom);
+      return toolInstance;
+    }
+    this.container.appendChild(dom);
+    this.toolOperationList.push(toolInstance);
+    this.toolOperationNameList.push(tool);
+    this.toolOperationDom.push(dom);
+    return toolInstance;
+  }
+  switchLastTwoCanvas() {
+    if (this.toolOperationDom.length < 3) {
+      console.error("switchLastTwoCanvas is just used the layer which has 3 canvas");
+      return;
+    }
+    const len = this.toolOperationDom.length;
+    const lastOneIndex = len - 1;
+    const last2SecondIndex = len - 2;
+    const lastOneDom = this.toolOperationDom[lastOneIndex];
+    const last2SecondDom = this.toolOperationDom[last2SecondIndex];
+    if (!last2SecondDom || !lastOneDom) {
+      return;
+    }
+    lastOneDom.style.zIndex = `${lastOneIndex - 1}`;
+    last2SecondDom.style.zIndex = `${lastOneIndex}`;
+    this.toolOperationList[lastOneIndex].clearActiveStatus();
+    this.toolOperationList[lastOneIndex].clearCursorLine();
+    this.toolOperationList[lastOneIndex].render();
+    this.toolOperationList = arraySwap(this.toolOperationList, lastOneIndex, last2SecondIndex);
+    this.toolOperationDom = arraySwap(this.toolOperationDom, lastOneIndex, last2SecondIndex);
+    return this.toolOperationList[lastOneIndex];
+  }
+  getFirstToolOperation() {
+    if (this.toolOperationList.length > 1) {
+      return this.toolOperationList[1];
+    }
+    return this.toolOperationList[0];
+  }
+  switchToCanvas(toolName) {
+    var _a, _b, _c, _d;
+    const chosenIndex = this.toolOperationNameList.indexOf(toolName);
+    if (chosenIndex < 0 || this.toolOperationList.length < 1 || chosenIndex > this.toolOperationDom.length - 1) {
+      return;
+    }
+    const lastOneIndex = this.toolOperationDom.length - 1;
+    const chosenDom = this.toolOperationDom[chosenIndex];
+    const lastOneDom = this.toolOperationDom[lastOneIndex];
+    if (!chosenDom || !lastOneDom) {
+      return;
+    }
+    const temp = lastOneDom.style.zIndex;
+    lastOneDom.style.zIndex = `${chosenDom.style.zIndex}`;
+    chosenDom.style.zIndex = `${temp}`;
+    (_b = (_a = this.toolOperationList[lastOneIndex]).clearActiveStatus) == null ? void 0 : _b.call(_a);
+    (_d = (_c = this.toolOperationList[lastOneIndex]).clearCursorLine) == null ? void 0 : _d.call(_c);
+    this.toolOperationList[lastOneIndex].render();
+    this.toolOperationList = arraySwap(this.toolOperationList, lastOneIndex, chosenIndex);
+    this.toolOperationDom = arraySwap(this.toolOperationDom, lastOneIndex, chosenIndex);
+    this.toolOperationNameList = arraySwap(this.toolOperationNameList, lastOneIndex, chosenIndex);
+    return this.toolOperationList[lastOneIndex];
+  }
+  updateDataByToolName(toolName, result) {
+    const operationIndex = this.toolOperationNameList.indexOf(toolName);
+    if (operationIndex >= 0) {
+      const operationInstance = this.toolOperationList[operationIndex];
+      operationInstance.setResult(result);
+    }
+  }
+  clearStatusAndResult() {
+    this.toolOperationList.forEach((toolInstance) => {
+      var _a;
+      (_a = toolInstance.clearActiveStatus) == null ? void 0 : _a.call(toolInstance);
+      toolInstance.clearResult();
+    });
+  }
+  destroyAllLayer() {
+    this.toolOperationList.forEach((toolInstance) => {
+      toolInstance.destroyCanvas();
+      this.init();
+    });
+  }
+  init() {
+    this.toolOperationList = [];
+    this.toolOperationDom = [];
+  }
+}
+
+export { HybridToolUtils, ToolScheduler };