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

package/es/core/toolOperation/ViewOperation.js

@@ -1,549 +1 @@
-import _ from 'lodash';
-import rgba from 'color-rgba';
-import DrawUtils from '../../utils/tool/DrawUtils.js';
-import AxisUtils from '../../utils/tool/AxisUtils.js';
-import RectUtils from '../../utils/tool/RectUtils.js';
-import PolygonUtils from '../../utils/tool/PolygonUtils.js';
-import MathUtils from '../../utils/MathUtils.js';
-import RenderDomClass from '../../utils/tool/RenderDomClass.js';
-import { ELineTypes, DEFAULT_FONT, SEGMENT_NUMBER } from '../../constant/tool.js';
-import { DEFAULT_TEXT_OFFSET, TEXT_ATTRIBUTE_OFFSET, DEFAULT_TEXT_SHADOW } from '../../constant/annotation.js';
-import ImgPosUtils from '../../utils/tool/ImgPosUtils.js';
-import { BasicToolOperation } from './basicToolOperation.js';
-import { pointCloudLidar2image } from '../pointCloud/matrix.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 newScope = 3;
-const DEFAULT_RADIUS = 3;
-const DEFAULT_STROKE_COLOR = "#6371FF";
-class ViewOperation extends BasicToolOperation {
-  constructor(props) {
-    super(__spreadProps(__spreadValues({}, props), {showDefaultCursor: true}));
-    this.style = {};
-    this.annotations = [];
-    this.connectionPoints = [];
-    this.getHoverRectID = (e) => {
-      var _a, _b;
-      const coordinate = this.getCoordinateUnderZoom(e);
-      const originCoordinate = AxisUtils.changePointByZoom(coordinate, 1 / this.zoom);
-      if (((_a = this.annotations) == null ? void 0 : _a.length) <= 0 || !((_b = this.annotations) == null ? void 0 : _b.length)) {
-        return;
-      }
-      let id = "";
-      let minArea = Number.MAX_SAFE_INTEGER;
-      for (let i = 0; i < this.annotations.length; i++) {
-        const annotation = this.annotations[i];
-        switch (annotation.type) {
-          case "rect": {
-            const rect = annotation.annotation;
-            if (RectUtils.isInRect(coordinate, rect, newScope, this.zoom)) {
-              const area = rect.width * rect.height;
-              if (area < minArea) {
-                id = rect.id;
-                minArea = area;
-              }
-            }
-            break;
-          }
-          case "polygon": {
-            const polygon = annotation.annotation;
-            if (PolygonUtils.isInPolygon(originCoordinate, polygon.pointList)) {
-              const area = PolygonUtils.getPolygonArea(polygon.pointList);
-              if (area < minArea) {
-                id = polygon.id;
-                minArea = area;
-              }
-            }
-            break;
-          }
-        }
-      }
-      return id;
-    };
-    var _a;
-    this.style = (_a = props.style) != null ? _a : {stroke: DEFAULT_STROKE_COLOR, thickness: 3};
-    this.annotations = props.annotations;
-    this.loading = false;
-    this.renderDomInstance = new RenderDomClass({
-      container: this.container,
-      height: this.canvas.height
-    });
-  }
-  clearConnectionPoints() {
-    this.connectionPoints = [];
-    this.render();
-  }
-  checkConnectionPoints(newAnnotations = this.annotations) {
-    var _a, _b;
-    if (this.connectPointsStatus) {
-      (_b = (_a = this.connectPointsStatus).close) == null ? void 0 : _b.call(_a);
-    }
-    this.emit("connectionPointsStatusUpdate", () => {
-      return new Promise((resolve) => {
-        const {promise, close} = MathUtils.getCollectionPointByAnnotationDataPromise(newAnnotations);
-        this.connectPointsStatus = {
-          close
-        };
-        promise.then((res) => {
-          this.connectionPoints = res.connectionPoints;
-          this.render();
-          this.connectPointsStatus = void 0;
-          resolve({connectionPoints: res.connectionPoints});
-        });
-      });
-    });
-  }
-  setLoading(loading) {
-    this.loading = loading;
-    this.render();
-  }
-  onMouseLeave() {
-    super.onMouseLeave();
-    this.mouseHoverID = void 0;
-    this.emit("onChange", "hover", []);
-  }
-  onMouseDown(e) {
-    if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
-      return true;
-    }
-    const newMouseSelectedID = this.mouseHoverID;
-    if (e.button === 0) {
-      let selectedID = [];
-      if (newMouseSelectedID) {
-        selectedID = [newMouseSelectedID];
-      }
-      this.emit("onChange", "selected", selectedID);
-      this.render();
-    }
-  }
-  onMouseMove(e) {
-    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
-      return;
-    }
-    const oldMouseHoverID = this.mouseHoverID;
-    const newMouseHoverID = this.getHoverRectID(e);
-    if (oldMouseHoverID !== newMouseHoverID) {
-      this.mouseHoverID = newMouseHoverID;
-      let hoverID = [];
-      if (newMouseHoverID) {
-        hoverID = [newMouseHoverID];
-      }
-      this.emit("onChange", "hover", hoverID);
-      this.render();
-    }
-  }
-  updateData(annotations) {
-    this.annotations = annotations;
-    this.render();
-  }
-  getSpecificStyle(obj) {
-    const specificStyle = _.pick(obj, ["stroke", "thickness", "fill", "radius"]);
-    const newStyle = __spreadValues(__spreadValues({}, this.style), specificStyle);
-    if (newStyle.stroke) {
-      Object.assign(newStyle, {
-        color: newStyle.stroke
-      });
-    }
-    return newStyle;
-  }
-  getFontStyle(obj, style) {
-    var _a, _b;
-    const fontSize = (_a = obj == null ? void 0 : obj.fontSize) != null ? _a : 14;
-    const fontFamily = (_b = obj == null ? void 0 : obj.fontFamily) != null ? _b : "Arial";
-    return __spreadProps(__spreadValues({}, DEFAULT_TEXT_SHADOW), {
-      color: style.stroke,
-      font: `normal normal 600 ${fontSize}px ${fontFamily}`
-    });
-  }
-  appendOffset({x, y}) {
-    return {x: x + DEFAULT_TEXT_OFFSET.offsetX, y: y + DEFAULT_TEXT_OFFSET.offsetY};
-  }
-  getRenderText(result, hiddenText = false) {
-    let headerText = "";
-    let bottomText = "";
-    if (!result || hiddenText === true) {
-      return {headerText, bottomText};
-    }
-    if (result == null ? void 0 : result.order) {
-      headerText = `${result.order}`;
-    }
-    if (result == null ? void 0 : result.label) {
-      if (headerText) {
-        headerText = `${headerText}_${result.label}`;
-      } else {
-        headerText = `${result.label}`;
-      }
-    }
-    if (result == null ? void 0 : result.attribute) {
-      if (headerText) {
-        headerText = `${headerText}  ${result.attribute}`;
-      } else {
-        headerText = `${result.attribute}`;
-      }
-    }
-    if (result == null ? void 0 : result.textAttribute) {
-      bottomText = result == null ? void 0 : result.textAttribute;
-    }
-    return {headerText, bottomText};
-  }
-  getReferenceOptions(isReference) {
-    return isReference ? {lineCap: "butt", lineDash: [20, 20]} : {};
-  }
-  focusPositionByPointList(pointList) {
-    const basicZone = MathUtils.calcViewportBoundaries(pointList);
-    const newBoundary = {
-      x: basicZone.left,
-      y: basicZone.top,
-      width: basicZone.right - basicZone.left,
-      height: basicZone.bottom - basicZone.top
-    };
-    const pos = ImgPosUtils.getBasicRecPos(this.imgNode, newBoundary, this.size, 0.5);
-    if (pos) {
-      this.setCurrentPos(pos.currentPos);
-      this.setCurrentPosStorage(pos.currentPos);
-      const {imgInfo} = this;
-      const {innerZoom} = this.innerPosAndZoom;
-      if (imgInfo) {
-        this.setImgInfo(__spreadProps(__spreadValues({}, imgInfo), {
-          width: imgInfo.width / innerZoom * pos.innerZoom,
-          height: imgInfo.height / innerZoom * pos.innerZoom
-        }));
-      }
-      this.setZoom(pos.innerZoom);
-      this.render();
-      this.renderBasicCanvas();
-    }
-  }
-  renderConnectionPoints() {
-    this.connectionPoints.forEach((point) => {
-      const renderPoint = AxisUtils.changePointByZoom(point, this.zoom, this.currentPos);
-      DrawUtils.drawCircleWithFill(this.canvas, renderPoint, 4, {color: "#fff"});
-      DrawUtils.drawCircleWithFill(this.canvas, renderPoint, 2, {color: "#000"});
-    });
-  }
-  getRenderStyle(annotation) {
-    const style = this.getSpecificStyle(annotation.annotation);
-    const fontStyle = this.getFontStyle(annotation.annotation, style);
-    return {
-      style,
-      fontStyle
-    };
-  }
-  renderLine(annotation) {
-    var _a, _b, _c;
-    if (annotation.type !== "line") {
-      return;
-    }
-    const {style, fontStyle} = this.getRenderStyle(annotation);
-    const line = annotation.annotation;
-    if (!(((_a = line == null ? void 0 : line.pointList) == null ? void 0 : _a.length) >= 2)) {
-      return;
-    }
-    const {lineType = ELineTypes.Line} = line;
-    const renderLineWithZoom = AxisUtils.changePointListByZoom((_b = line == null ? void 0 : line.pointList) != null ? _b : [], this.zoom, this.currentPos);
-    const lineRenderOptions = __spreadProps(__spreadValues(__spreadValues({}, style), this.getReferenceOptions(line == null ? void 0 : line.isReference)), {
-      lineType,
-      strokeColor: style.stroke
-    });
-    let newPointList = [];
-    if (line.showKeyPoint) {
-      newPointList = DrawUtils.drawPolygonWithKeyPoint(this.canvas, renderLineWithZoom, lineRenderOptions);
-    } else {
-      newPointList = DrawUtils.drawPolygon(this.canvas, renderLineWithZoom, lineRenderOptions);
-    }
-    const isShowDirection = (line == null ? void 0 : line.showDirection) === true && ((_c = line == null ? void 0 : line.pointList) == null ? void 0 : _c.length) >= 2;
-    if (isShowDirection) {
-      let startPoint = renderLineWithZoom[0];
-      let endPoint = MathUtils.getLineCenterPoint([renderLineWithZoom[0], renderLineWithZoom[1]]);
-      if (lineType === ELineTypes.Curve) {
-        const pos = Math.floor(SEGMENT_NUMBER / 2);
-        startPoint = newPointList[pos];
-        endPoint = newPointList[pos + 1];
-      }
-      DrawUtils.drawArrowByCanvas(this.canvas, startPoint, endPoint, {
-        color: style.stroke,
-        thickness: style.thickness
-      });
-      DrawUtils.drawCircle(this.canvas, renderLineWithZoom[0], style.thickness + 6, {
-        color: style.stroke,
-        thickness: style.thickness
-      });
-    }
-    const {headerText, bottomText} = this.getRenderText(line, line == null ? void 0 : line.hiddenText);
-    if (headerText) {
-      DrawUtils.drawText(this.canvas, this.appendOffset(renderLineWithZoom[0]), headerText, fontStyle);
-    }
-    if (bottomText) {
-      const endPoint = renderLineWithZoom[renderLineWithZoom.length - 1];
-      DrawUtils.drawText(this.canvas, this.appendOffset({x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y}), bottomText, fontStyle);
-    }
-  }
-  renderPolygon(annotation) {
-    var _a, _b, _c, _d, _e;
-    if (annotation.type !== "polygon") {
-      return;
-    }
-    const {style, fontStyle} = this.getRenderStyle(annotation);
-    const polygon = annotation.annotation;
-    if (!(((_a = polygon == null ? void 0 : polygon.pointList) == null ? void 0 : _a.length) >= 3)) {
-      return;
-    }
-    const {lineType = ELineTypes.Line} = polygon;
-    const renderPolygon = AxisUtils.changePointListByZoom((_b = polygon == null ? void 0 : polygon.pointList) != null ? _b : [], this.zoom, this.currentPos);
-    if (polygon.id === this.mouseHoverID || style.fill) {
-      const fillArr = rgba((_d = (_c = style == null ? void 0 : style.fill) != null ? _c : style == null ? void 0 : style.stroke) != null ? _d : DEFAULT_STROKE_COLOR);
-      const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
-      DrawUtils.drawPolygonWithFill(this.canvas, renderPolygon, {color: fill, lineType});
-    }
-    const polygonRenderOptions = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, style), {
-      isClose: true
-    }), this.getReferenceOptions(polygon == null ? void 0 : polygon.isReference)), {
-      lineType,
-      strokeColor: style.stroke
-    });
-    let newPointList = [];
-    if (polygon.showKeyPoint) {
-      newPointList = DrawUtils.drawPolygonWithKeyPoint(this.canvas, renderPolygon, polygonRenderOptions);
-    } else {
-      newPointList = DrawUtils.drawPolygon(this.canvas, renderPolygon, polygonRenderOptions);
-    }
-    const isShowDirection = (polygon == null ? void 0 : polygon.showDirection) === true && ((_e = polygon == null ? void 0 : polygon.pointList) == null ? void 0 : _e.length) >= 2;
-    if (isShowDirection) {
-      let startPoint = renderPolygon[0];
-      let endPoint = MathUtils.getLineCenterPoint([renderPolygon[0], renderPolygon[1]]);
-      if (lineType === ELineTypes.Curve) {
-        const pos = Math.floor(SEGMENT_NUMBER / 2);
-        startPoint = newPointList[pos];
-        endPoint = newPointList[pos + 1];
-      }
-      DrawUtils.drawArrowByCanvas(this.canvas, startPoint, endPoint, {
-        color: style.stroke,
-        thickness: style.thickness
-      });
-      DrawUtils.drawCircle(this.canvas, renderPolygon[0], style.thickness + 6, {
-        color: style.stroke,
-        thickness: style.thickness
-      });
-    }
-    const {headerText, bottomText} = this.getRenderText(polygon, polygon == null ? void 0 : polygon.hiddenText);
-    if (headerText) {
-      DrawUtils.drawText(this.canvas, this.appendOffset(renderPolygon[0]), headerText, fontStyle);
-    }
-    if (bottomText) {
-      const endPoint = renderPolygon[renderPolygon.length - 1];
-      DrawUtils.drawText(this.canvas, this.appendOffset({x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y}), bottomText, fontStyle);
-    }
-  }
-  renderSingleCuboid(annotation) {
-    var _a, _b;
-    const {style} = this.getRenderStyle(annotation);
-    const cuboid = annotation.annotation;
-    const fillArr = rgba((_b = (_a = style == null ? void 0 : style.fill) != null ? _a : style == null ? void 0 : style.stroke) != null ? _b : DEFAULT_STROKE_COLOR);
-    const fillColor = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
-    const strokeColor = style.stroke;
-    const transformCuboid = AxisUtils.changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
-    const {headerText, bottomText} = this.getRenderText(cuboid, cuboid == null ? void 0 : cuboid.hiddenText);
-    DrawUtils.drawCuboidWithText(this.canvas, transformCuboid, {strokeColor, fillColor, thickness: style.thickness}, {
-      config: this.config,
-      hiddenText: cuboid == null ? void 0 : cuboid.hiddenText,
-      headerText,
-      bottomText
-    });
-  }
-  renderBox3d(annotation) {
-    if (annotation.type !== "box3d") {
-      return;
-    }
-    const data = annotation.annotation;
-    const viewDataPointList = pointCloudLidar2image(data, data.calib);
-    const defaultViewStyle = {
-      fill: "transparent"
-    };
-    const extraData = _.pick(data, ["stroke", "thickness"]);
-    viewDataPointList.forEach((v, i) => {
-      const newAnnotation = __spreadValues(__spreadProps(__spreadValues({}, extraData), {
-        id: `${annotation.annotation.id}-${i}`,
-        pointList: v.pointList
-      }), defaultViewStyle);
-      switch (v.type) {
-        case "line":
-          this.renderLine({
-            type: "line",
-            annotation: newAnnotation
-          });
-          break;
-        case "polygon":
-          this.renderPolygon({
-            type: "polygon",
-            annotation: newAnnotation
-          });
-          break;
-      }
-    });
-  }
-  render() {
-    try {
-      super.render();
-      if (this.loading === true) {
-        return;
-      }
-      const globalDomTextAnnotation = this.annotations.filter((v) => v.type === "text" && v.annotation.position === "rt").map((v) => v.annotation);
-      this.renderDomInstance.render(globalDomTextAnnotation);
-      this.annotations.forEach((annotation) => {
-        var _a, _b, _c, _d, _e;
-        const style = this.getSpecificStyle(annotation.annotation);
-        const fontStyle = this.getFontStyle(annotation.annotation, style);
-        switch (annotation.type) {
-          case "rect": {
-            const rect = annotation.annotation;
-            const {hiddenText = false, isReference, hiddenRectSize = false} = rect;
-            const {zoom} = this;
-            const renderRect = AxisUtils.changeRectByZoom(rect, this.zoom, this.currentPos);
-            const {x, y, width, height} = renderRect;
-            if (rect.id === this.mouseHoverID || style.fill) {
-              const fillArr = rgba((_b = (_a = style == null ? void 0 : style.fill) != null ? _a : style == null ? void 0 : style.stroke) != null ? _b : DEFAULT_STROKE_COLOR);
-              const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
-              DrawUtils.drawRectWithFill(this.canvas, renderRect, {color: fill});
-            }
-            DrawUtils.drawRect(this.canvas, renderRect, __spreadValues(__spreadProps(__spreadValues({}, style), {
-              hiddenText: true
-            }), this.getReferenceOptions(isReference)));
-            const {headerText, bottomText} = this.getRenderText(rect, rect == null ? void 0 : rect.hiddenText);
-            if (headerText) {
-              DrawUtils.drawText(this.canvas, {x, y: y - 6}, headerText, __spreadValues({
-                textMaxWidth: 300
-              }, fontStyle));
-            }
-            const rectSize = `${Math.round(width / zoom)} * ${Math.round(height / zoom)}`;
-            const textSizeWidth = rectSize.length * 7;
-            if (!hiddenText && !hiddenRectSize) {
-              DrawUtils.drawText(this.canvas, {x: x + width - textSizeWidth, y: y + height + 15}, rectSize, fontStyle);
-            }
-            if (bottomText) {
-              const marginTop = 20;
-              const textWidth = Math.max(20, width - textSizeWidth);
-              DrawUtils.drawText(this.canvas, {x, y: y + height + marginTop}, rect.textAttribute, __spreadValues({
-                textMaxWidth: textWidth
-              }, fontStyle));
-            }
-            break;
-          }
-          case "polygon": {
-            this.renderPolygon(annotation);
-            break;
-          }
-          case "line": {
-            this.renderLine(annotation);
-            break;
-          }
-          case "point": {
-            const point = annotation.annotation;
-            const renderPoint = AxisUtils.changePointByZoom(point, this.zoom, this.currentPos);
-            const radius = (_c = style.radius) != null ? _c : DEFAULT_RADIUS;
-            DrawUtils.drawCircle(this.canvas, renderPoint, radius, style);
-            const {headerText, bottomText} = this.getRenderText(point, point == null ? void 0 : point.hiddenText);
-            if (headerText) {
-              DrawUtils.drawText(this.canvas, {x: renderPoint.x + radius / 2, y: renderPoint.y - radius - 4}, headerText, __spreadValues({
-                textAlign: "center"
-              }, fontStyle));
-            }
-            if (bottomText) {
-              DrawUtils.drawText(this.canvas, this.appendOffset({x: renderPoint.x + radius, y: renderPoint.y + radius + 24}), bottomText, fontStyle);
-            }
-            break;
-          }
-          case "text": {
-            const textAnnotation = annotation.annotation;
-            const {
-              text,
-              x,
-              y,
-              textMaxWidth,
-              color = "white",
-              background = "rgba(0, 0, 0, 0.6)",
-              lineHeight = 25,
-              font = DEFAULT_FONT,
-              position
-            } = textAnnotation;
-            const paddingTB = 10;
-            const paddingLR = 10;
-            const renderPoint = AxisUtils.changePointByZoom({x, y}, this.zoom, this.currentPos);
-            const {
-              width,
-              height,
-              fontHeight = 0
-            } = MathUtils.getTextArea(this.canvas, textAnnotation.text, textMaxWidth, font, lineHeight);
-            if (position === "rt") {
-              break;
-            }
-            DrawUtils.drawRectWithFill(this.canvas, {
-              x: renderPoint.x,
-              y: renderPoint.y,
-              width: width + paddingLR * 2,
-              height: height + paddingTB * 2,
-              id: "",
-              sourceID: "",
-              valid: true,
-              textAttribute: "",
-              attribute: ""
-            }, {
-              color: background
-            });
-            DrawUtils.drawText(this.canvas, {
-              x: renderPoint.x + paddingLR,
-              y: renderPoint.y + fontHeight + paddingTB
-            }, text, {
-              color,
-              lineHeight,
-              font,
-              textMaxWidth
-            });
-            break;
-          }
-          case "box3d": {
-            this.renderBox3d(annotation);
-            break;
-          }
-          case "cuboid": {
-            this.renderSingleCuboid(annotation);
-            break;
-          }
-          default: {
-            break;
-          }
-        }
-        (_e = (_d = annotation.annotation) == null ? void 0 : _d.renderEnhance) == null ? void 0 : _e.call(_d, {
-          ctx: this.ctx,
-          canvas: this.canvas,
-          currentPos: this.currentPos,
-          zoom: this.zoom,
-          data: annotation,
-          toolInstance: this
-        });
-      });
-      this.renderConnectionPoints();
-    } catch (e) {
-      console.error("ViewOperation Render Error", e);
-    }
-  }
-}
-
-export { ViewOperation as default };
+import M from"lodash";import E from"color-rgba";import h from"../../utils/tool/DrawUtils.js";import b from"../../utils/tool/AxisUtils.js";import Z from"../../utils/tool/RectUtils.js";import $ from"../../utils/tool/PolygonUtils.js";import C from"../../utils/MathUtils.js";import W from"../../utils/tool/RenderDomClass.js";import{ELineTypes as L,DEFAULT_FONT as j,SEGMENT_NUMBER as F}from"../../constant/tool.js";import{DEFAULT_TEXT_OFFSET as B,TEXT_ATTRIBUTE_OFFSET as A,DEFAULT_TEXT_SHADOW as H}from"../../constant/annotation.js";import N from"../../utils/tool/ImgPosUtils.js";import{BasicToolOperation as K}from"./basicToolOperation.js";import{pointCloudLidar2image as V}from"../pointCloud/matrix.js";var X=Object.defineProperty,G=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,U=Object.getOwnPropertySymbols,q=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,z=(P,t,e)=>t in P?X(P,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):P[t]=e,p=(P,t)=>{for(var e in t||(t={}))q.call(t,e)&&z(P,e,t[e]);if(U)for(var e of U(t))J.call(t,e)&&z(P,e,t[e]);return P},_=(P,t)=>G(P,Y(t));const Q=3,tt=3,I="#6371FF";class et extends K{constructor(t){super(_(p({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.getHoverRectID=o=>{var i,r;const c=this.getCoordinateUnderZoom(o),n=b.changePointByZoom(c,1/this.zoom);if(((i=this.annotations)==null?void 0:i.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let d="",s=Number.MAX_SAFE_INTEGER;for(let l=0;l<this.annotations.length;l++){const a=this.annotations[l];switch(a.type){case"rect":{const u=a.annotation;if(Z.isInRect(c,u,Q,this.zoom)){const f=u.width*u.height;f<s&&(d=u.id,s=f)}break}case"polygon":{const u=a.annotation;if($.isInPolygon(n,u.pointList)){const f=$.getPolygonArea(u.pointList);f<s&&(d=u.id,s=f)}break}}}return d};var e;this.style=(e=t.style)!=null?e:{stroke:I,thickness:3},this.annotations=t.annotations,this.loading=!1,this.renderDomInstance=new W({container:this.container,height:this.canvas.height})}clearConnectionPoints(){this.connectionPoints=[],this.render()}checkConnectionPoints(t=this.annotations){var e,o;this.connectPointsStatus&&((o=(e=this.connectPointsStatus).close)==null||o.call(e)),this.emit("connectionPointsStatusUpdate",()=>new Promise(i=>{const{promise:r,close:c}=C.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:c},r.then(n=>{this.connectionPoints=n.connectionPoints,this.render(),this.connectPointsStatus=void 0,i({connectionPoints:n.connectionPoints})})}))}setLoading(t){this.loading=t,this.render()}onMouseLeave(){super.onMouseLeave(),this.mouseHoverID=void 0,this.emit("onChange","hover",[])}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||!this.imgInfo)return!0;const e=this.mouseHoverID;if(t.button===0){let o=[];e&&(o=[e]),this.emit("onChange","selected",o),this.render()}}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const e=this.mouseHoverID,o=this.getHoverRectID(t);if(e!==o){this.mouseHoverID=o;let i=[];o&&(i=[o]),this.emit("onChange","hover",i),this.render()}}updateData(t){this.annotations=t,this.render()}getSpecificStyle(t){const e=M.pick(t,["stroke","thickness","fill","radius"]),o=p(p({},this.style),e);return o.stroke&&Object.assign(o,{color:o.stroke}),o}getFontStyle(t,e){var o,i;const r=(o=t==null?void 0:t.fontSize)!=null?o:14,c=(i=t==null?void 0:t.fontFamily)!=null?i:"Arial";return _(p({},H),{color:e.stroke,font:`normal normal 600 ${r}px ${c}`})}appendOffset({x:t,y:e}){return{x:t+B.offsetX,y:e+B.offsetY}}getRenderText(t,e=!1){let o="",i="";return!t||e===!0?{headerText:o,bottomText:i}:((t==null?void 0:t.order)&&(o=`${t.order}`),(t==null?void 0:t.label)&&(o?o=`${o}_${t.label}`:o=`${t.label}`),(t==null?void 0:t.attribute)&&(o?o=`${o}  ${t.attribute}`:o=`${t.attribute}`),(t==null?void 0:t.textAttribute)&&(i=t==null?void 0:t.textAttribute),{headerText:o,bottomText:i})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){const e=C.calcViewportBoundaries(t),o={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},i=N.getBasicRecPos(this.imgNode,o,this.size,.5);if(i){this.setCurrentPos(i.currentPos),this.setCurrentPosStorage(i.currentPos);const{imgInfo:r}=this,{innerZoom:c}=this.innerPosAndZoom;r&&this.setImgInfo(_(p({},r),{width:r.width/c*i.innerZoom,height:r.height/c*i.innerZoom})),this.setZoom(i.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=b.changePointByZoom(t,this.zoom,this.currentPos);h.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),h.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}getRenderStyle(t){const e=this.getSpecificStyle(t.annotation),o=this.getFontStyle(t.annotation,e);return{style:e,fontStyle:o}}renderLine(t){var e,o,i;if(t.type!=="line")return;const{style:r,fontStyle:c}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:d=L.Line}=n,s=b.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos),l=_(p(p({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:d,strokeColor:r.stroke});let a=[];if(n.showKeyPoint?a=h.drawPolygonWithKeyPoint(this.canvas,s,l):a=h.drawPolygon(this.canvas,s,l),(n==null?void 0:n.showDirection)===!0&&((i=n==null?void 0:n.pointList)==null?void 0:i.length)>=2){let v=s[0],m=C.getLineCenterPoint([s[0],s[1]]);if(d===L.Curve){const g=Math.floor(F/2);v=a[g],m=a[g+1]}h.drawArrowByCanvas(this.canvas,v,m,{color:r.stroke,thickness:r.thickness}),h.drawCircle(this.canvas,s[0],r.thickness+6,{color:r.stroke,thickness:r.thickness})}const{headerText:f,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(f&&h.drawText(this.canvas,this.appendOffset(s[0]),f,c),y){const v=s[s.length-1];h.drawText(this.canvas,this.appendOffset({x:v.x+A.x,y:v.y+A.y}),y,c)}}renderPolygon(t){var e,o,i,r,c;if(t.type!=="polygon")return;const{style:n,fontStyle:d}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:l=L.Line}=s,a=b.changePointListByZoom((o=s==null?void 0:s.pointList)!=null?o:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const g=E((r=(i=n==null?void 0:n.fill)!=null?i:n==null?void 0:n.stroke)!=null?r:I),x=`rgba(${g[0]}, ${g[1]}, ${g[2]},${g[3]*.8})`;h.drawPolygonWithFill(this.canvas,a,{color:x,lineType:l})}const u=_(p(_(p({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:l,strokeColor:n.stroke});let f=[];if(s.showKeyPoint?f=h.drawPolygonWithKeyPoint(this.canvas,a,u):f=h.drawPolygon(this.canvas,a,u),(s==null?void 0:s.showDirection)===!0&&((c=s==null?void 0:s.pointList)==null?void 0:c.length)>=2){let g=a[0],x=C.getLineCenterPoint([a[0],a[1]]);if(l===L.Curve){const w=Math.floor(F/2);g=f[w],x=f[w+1]}h.drawArrowByCanvas(this.canvas,g,x,{color:n.stroke,thickness:n.thickness}),h.drawCircle(this.canvas,a[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:v,bottomText:m}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(v&&h.drawText(this.canvas,this.appendOffset(a[0]),v,d),m){const g=a[a.length-1];h.drawText(this.canvas,this.appendOffset({x:g.x+A.x,y:g.y+A.y}),m,d)}}renderSingleCuboid(t){var e,o;const{style:i}=this.getRenderStyle(t),r=t.annotation,c=E((o=(e=i==null?void 0:i.fill)!=null?e:i==null?void 0:i.stroke)!=null?o:I),n=`rgba(${c[0]}, ${c[1]}, ${c[2]},${c[3]*.8})`,d=i.stroke,s=b.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:l,bottomText:a}=this.getRenderText(r,r==null?void 0:r.hiddenText);h.drawCuboidWithText(this.canvas,s,{strokeColor:d,fillColor:n,thickness:i.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:l,bottomText:a})}renderBox3d(t){if(t.type!=="box3d")return;const e=t.annotation,o=V(e,e.calib),i={fill:"transparent"},r=M.pick(e,["stroke","thickness"]);o.forEach((c,n)=>{const d=p(_(p({},r),{id:`${t.annotation.id}-${n}`,pointList:c.pointList}),i);switch(c.type){case"line":this.renderLine({type:"line",annotation:d});break;case"polygon":this.renderPolygon({type:"polygon",annotation:d});break}})}render(){try{if(super.render(),this.loading===!0)return;const t=this.annotations.filter(e=>e.type==="text"&&e.annotation.position==="rt").map(e=>e.annotation);this.renderDomInstance.render(t),this.annotations.forEach(e=>{var o,i,r,c,n;const d=this.getSpecificStyle(e.annotation),s=this.getFontStyle(e.annotation,d);switch(e.type){case"rect":{const l=e.annotation,{hiddenText:a=!1,isReference:u,hiddenRectSize:f=!1}=l,{zoom:y}=this,v=b.changeRectByZoom(l,this.zoom,this.currentPos),{x:m,y:g,width:x,height:w}=v;if(l.id===this.mouseHoverID||d.fill){const T=E((i=(o=d==null?void 0:d.fill)!=null?o:d==null?void 0:d.stroke)!=null?i:I),D=`rgba(${T[0]}, ${T[1]}, ${T[2]},${T[3]*.8})`;h.drawRectWithFill(this.canvas,v,{color:D})}h.drawRect(this.canvas,v,p(_(p({},d),{hiddenText:!0}),this.getReferenceOptions(u)));const{headerText:S,bottomText:R}=this.getRenderText(l,l==null?void 0:l.hiddenText);S&&h.drawText(this.canvas,{x:m,y:g-6},S,p({textMaxWidth:300},s));const k=`${Math.round(x/y)} * ${Math.round(w/y)}`,O=k.length*7;if(!a&&!f&&h.drawText(this.canvas,{x:m+x-O,y:g+w+15},k,s),R){const T=20,D=Math.max(20,x-O);h.drawText(this.canvas,{x:m,y:g+w+T},l.textAttribute,p({textMaxWidth:D},s))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const l=e.annotation,a=b.changePointByZoom(l,this.zoom,this.currentPos),u=(r=d.radius)!=null?r:tt;h.drawCircle(this.canvas,a,u,d);const{headerText:f,bottomText:y}=this.getRenderText(l,l==null?void 0:l.hiddenText);f&&h.drawText(this.canvas,{x:a.x+u/2,y:a.y-u-4},f,p({textAlign:"center"},s)),y&&h.drawText(this.canvas,this.appendOffset({x:a.x+u,y:a.y+u+24}),y,s);break}case"text":{const l=e.annotation,{text:a,x:u,y:f,textMaxWidth:y,color:v="white",background:m="rgba(0, 0, 0, 0.6)",lineHeight:g=25,font:x=j,position:w}=l,S=10,R=10,k=b.changePointByZoom({x:u,y:f},this.zoom,this.currentPos),{width:O,height:T,fontHeight:D=0}=C.getTextArea(this.canvas,l.text,y,x,g);if(w==="rt")break;h.drawRectWithFill(this.canvas,{x:k.x,y:k.y,width:O+R*2,height:T+S*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:m}),h.drawText(this.canvas,{x:k.x+R,y:k.y+D+S},a,{color:v,lineHeight:g,font:x,textMaxWidth:y});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}default:break}(n=(c=e.annotation)==null?void 0:c.renderEnhance)==null||n.call(c,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this})}),this.renderConnectionPoints()}catch(t){console.error("ViewOperation Render Error",t)}}}export{et as default};