@labelbee/lb-annotation 1.8.0 → 1.8.1-alpha.0

package/es/core/toolOperation/TextToolOperation.js

@@ -0,0 +1,129 @@
+import uuid from '../../utils/uuid.js';
+import EKeyCode from '../../constant/keyCode.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+
+class TextToolOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.getSingleResult = (sourceID) => {
+      const initValue = {};
+      if (this.config.configList.length > 0) {
+        this.config.configList.forEach((i) => {
+          var _a;
+          initValue[i.key] = (_a = i.default) != null ? _a : "";
+        });
+      }
+      return {value: initValue, id: uuid(), sourceID: sourceID != null ? sourceID : CommonToolUtils.getSourceID()};
+    };
+    this.getInitResultList = (dataSourceStep, basicResultList) => {
+      if (dataSourceStep > 0) {
+        return basicResultList.map((i) => this.getSingleResult(i.id));
+      }
+      return [this.getSingleResult()];
+    };
+    this.textList = [];
+    this.setShowDefaultCursor(true);
+    this.setConfig(props.config);
+    this.initTextDisplayContainer();
+  }
+  get dataList() {
+    return this.textList;
+  }
+  get textValueContainerID() {
+    return "textValueContainer";
+  }
+  get textValueContainer() {
+    return document.getElementById(this.textValueContainerID);
+  }
+  get currentPageResult() {
+    return this.textList;
+  }
+  setResult(textResultList) {
+    var _a;
+    this.textList = textResultList;
+    this.toggleTextContainerVisible(true);
+    const values = (_a = this.textList[0]) == null ? void 0 : _a.value;
+    if (values) {
+      Object.keys(values).forEach((k) => {
+        this.renderText(k, values[k]);
+      });
+    }
+    this.emit("valueUpdated");
+    this.toggleTextContainerVisible(!!values);
+  }
+  updateTextValue(k, v) {
+    this.textList[0].value[k] = v;
+    this.renderText(k, v);
+    this.emit("valueUpdated");
+  }
+  renderText(key, value) {
+    const textDom = document.getElementById(`textKey${key}`);
+    if (textDom) {
+      textDom.innerText = value;
+    }
+  }
+  getTextDomID(key) {
+    return `textKey${key}`;
+  }
+  initTextDisplayContainer() {
+    const dom = document.createElement("div");
+    const domStyle = {
+      position: "absolute",
+      right: "0",
+      top: "0",
+      "z-index": "20",
+      "max-width": "20%",
+      "font-family": "SourceHanSansCN-Regular",
+      background: "rgb(102, 230, 255)",
+      color: "white",
+      "word-break": "break-all",
+      "line-height": "24px",
+      "white-space": "pre-wrap",
+      "max-height": "80%",
+      "overflow-y": "auto",
+      opacity: "0.6"
+    };
+    dom.setAttribute("style", Object.keys(domStyle).reduce((pre, key) => {
+      pre += `${key}: ${domStyle[key]};`;
+      return pre;
+    }, ""));
+    dom.setAttribute("id", this.textValueContainerID);
+    this.config.configList.forEach((i) => {
+      const div = document.createElement("div");
+      const label = document.createElement("div");
+      const value = document.createElement("div");
+      div.setAttribute("style", "padding: 8px 16px");
+      label.innerText = `${i.key}:`;
+      value.innerText = "";
+      value.setAttribute("id", this.getTextDomID(i.key));
+      div.appendChild(label);
+      div.appendChild(value);
+      dom.appendChild(div);
+    });
+    this.container.appendChild(dom);
+  }
+  exportData() {
+    return [this.textList, this.basicImgInfo];
+  }
+  destroyCanvas() {
+    super.destroyCanvas();
+    if (this.textValueContainer) {
+      this.container.removeChild(this.textValueContainer);
+    }
+  }
+  onKeyDown(e) {
+    super.onKeyDown(e);
+    if (e.keyCode === EKeyCode.Z) {
+      this.toggleTextContainerVisible();
+    }
+  }
+  toggleTextContainerVisible(isVisible) {
+    if (this.textValueContainer) {
+      const display = (isVisible !== void 0 ? !isVisible : this.textValueContainer.style.display === "block") ? "none" : "block";
+      this.textValueContainer.style.display = display;
+    }
+  }
+}
+
+export { TextToolOperation as default };

package/es/core/toolOperation/ViewOperation.js

@@ -0,0 +1,414 @@
+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 { DEFAULT_FONT, ELineTypes, SEGMENT_NUMBER } from '../../constant/tool.js';
+import { DEFAULT_TEXT_OFFSET, TEXT_ATTRIBUTE_OFFSET, DEFAULT_TEXT_SHADOW } from '../../constant/annotation.js';
+import { BasicToolOperation } from './basicToolOperation.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
+    });
+  }
+  checkConnectionPoints(newAnnotations = this.annotations) {
+    const {connectionPoints} = MathUtils.getCollectionPointByAnnotationData(newAnnotations);
+    this.connectionPoints = 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]} : {};
+  }
+  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"});
+    });
+  }
+  render() {
+    try {
+      super.render();
+      if (this.loading === true) {
+        return;
+      }
+      this.renderDomInstance.render(this.annotations.filter((v) => v.type === "text" && v.annotation.position === "rt").map((v) => v.annotation));
+      this.annotations.forEach((annotation) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+        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} = 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) {
+              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": {
+            const polygon = annotation.annotation;
+            if (!(((_c = polygon == null ? void 0 : polygon.pointList) == null ? void 0 : _c.length) >= 3)) {
+              return;
+            }
+            const {lineType = ELineTypes.Line} = polygon;
+            const renderPolygon = AxisUtils.changePointListByZoom((_d = polygon == null ? void 0 : polygon.pointList) != null ? _d : [], this.zoom, this.currentPos);
+            if (polygon.id === this.mouseHoverID || style.fill) {
+              const fillArr = rgba((_f = (_e = style == null ? void 0 : style.fill) != null ? _e : style == null ? void 0 : style.stroke) != null ? _f : 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 && ((_g = polygon == null ? void 0 : polygon.pointList) == null ? void 0 : _g.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);
+            }
+            break;
+          }
+          case "line": {
+            const line = annotation.annotation;
+            if (!(((_h = line == null ? void 0 : line.pointList) == null ? void 0 : _h.length) >= 2)) {
+              return;
+            }
+            const {lineType = ELineTypes.Line} = line;
+            const renderLine = AxisUtils.changePointListByZoom((_i = line == null ? void 0 : line.pointList) != null ? _i : [], this.zoom, this.currentPos);
+            const newPointList = DrawUtils.drawPolygon(this.canvas, renderLine, __spreadProps(__spreadValues(__spreadValues({}, style), this.getReferenceOptions(line == null ? void 0 : line.isReference)), {
+              lineType
+            }));
+            const isShowDirection = (line == null ? void 0 : line.showDirection) === true && ((_j = line == null ? void 0 : line.pointList) == null ? void 0 : _j.length) > 2;
+            if (isShowDirection) {
+              let startPoint = renderLine[0];
+              let endPoint = MathUtils.getLineCenterPoint([renderLine[0], renderLine[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, renderLine[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(renderLine[0]), headerText, fontStyle);
+            }
+            if (bottomText) {
+              const endPoint = renderLine[renderLine.length - 1];
+              DrawUtils.drawText(this.canvas, this.appendOffset({x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y}), bottomText, fontStyle);
+            }
+            break;
+          }
+          case "point": {
+            const point = annotation.annotation;
+            const renderPoint = AxisUtils.changePointByZoom(point, this.zoom, this.currentPos);
+            const radius = (_k = style.radius) != null ? _k : 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;
+          }
+          default: {
+          }
+        }
+        (_m = (_l = annotation.annotation) == null ? void 0 : _l.renderEnhance) == null ? void 0 : _m.call(_l, {
+          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 };