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

package/es/utils/tool/DrawUtils.js

@@ -0,0 +1,424 @@
+import { ELineTypes, SEGMENT_NUMBER, DEFAULT_FONT } from '../../constant/tool.js';
+import PolygonUtils from './PolygonUtils.js';
+import UnitUtils from './UnitUtils.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_ZOOM = 1;
+const DEFAULT_CURRENT_POS = {
+  x: 0,
+  y: 0
+};
+const DEFAULT_ROTATE = 0;
+const DEFAULT_COLOR = "";
+class DrawUtils {
+  static drawLine(canvas, startPoint, endPoint, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR, thickness = 1, lineCap = "round"} = options;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = lineCap;
+    ctx.beginPath();
+    ctx.moveTo(startPoint.x, startPoint.y);
+    ctx.lineTo(endPoint.x + 1, endPoint.y + 1);
+    ctx.stroke();
+    ctx.restore();
+  }
+  static drawRect(canvas, rect, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR, thickness = 1, lineCap = "round", hiddenText = false, lineDash} = options;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = lineCap;
+    if (Array.isArray(lineDash)) {
+      ctx.setLineDash(lineDash);
+    }
+    ctx.fillStyle = color;
+    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    if (hiddenText === false) {
+      let showText = "";
+      if (rect.attribute) {
+        showText = `${showText}  ${rect.attribute}`;
+      }
+      this.drawText(canvas, {x: rect.x, y: rect.y - 5}, showText);
+      if (rect.textAttribute) {
+        const text = `${~~rect.width} * ${~~rect.height}`;
+        const textSizeWidth = text.length * 7;
+        const marginTop = 0;
+        const textWidth = Math.max(20, rect.width - textSizeWidth);
+        this.drawText(canvas, {x: rect.x, y: rect.y + rect.height + 20 + marginTop}, rect.textAttribute, {
+          textMaxWidth: textWidth
+        });
+      }
+    }
+    ctx.restore();
+  }
+  static drawRectWithFill(canvas, rect, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR} = options;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    ctx.restore();
+  }
+  static drawTagByDom(parent, text, id) {
+    const parentNode = parent;
+    if (!((text == null ? void 0 : text.length) > 0)) {
+      return;
+    }
+    const dom = document.createElement("div");
+    dom.innerHTML = text;
+    dom.setAttribute("id", id);
+    parentNode == null ? void 0 : parentNode.appendChild(dom);
+    return dom;
+  }
+  static drawTag(canvas, tagList) {
+    var _a;
+    const parentNode = canvas == null ? void 0 : canvas.parentNode;
+    const oldDom = window.self.document.getElementById("tagToolTag");
+    if (oldDom && parentNode && parentNode.contains(oldDom)) {
+      parentNode == null ? void 0 : parentNode.removeChild(oldDom);
+    }
+    if (!((tagList == null ? void 0 : tagList.length) > 0)) {
+      return;
+    }
+    const dom = document.createElement("div");
+    dom.innerHTML = (_a = tagList.reduce((acc, cur) => {
+      return `${acc}${cur.keyName}: ${cur.value.join(` \u3001 `)}
+`;
+    }, "")) != null ? _a : "";
+    dom.setAttribute("id", "tagToolTag");
+    parentNode == null ? void 0 : parentNode.appendChild(dom);
+    return dom;
+  }
+  static drawLineWithPointList(canvas, pointList, options = {}) {
+    if (pointList.length < 2) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    const {
+      color = DEFAULT_COLOR,
+      thickness = 1,
+      lineCap = "round",
+      lineType = ELineTypes.Line,
+      lineDash,
+      hoverEdgeIndex
+    } = options;
+    ctx.save();
+    const setStyle = () => {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = thickness;
+      ctx.lineCap = lineCap;
+      if (Array.isArray(lineDash)) {
+        ctx.setLineDash(lineDash);
+      } else {
+        ctx.setLineDash([]);
+      }
+    };
+    setStyle();
+    if (lineType === ELineTypes.Curve) {
+      if (hoverEdgeIndex !== void 0 && hoverEdgeIndex > -1) {
+        pointList.push(pointList[0]);
+      }
+      pointList = PolygonUtils.createSmoothCurvePointsFromPointList([...pointList], SEGMENT_NUMBER);
+      if (hoverEdgeIndex !== void 0 && hoverEdgeIndex > -1) {
+        pointList = pointList.slice((SEGMENT_NUMBER + 1) * hoverEdgeIndex, (SEGMENT_NUMBER + 1) * (hoverEdgeIndex + 1));
+      }
+    } else if (hoverEdgeIndex !== void 0 && hoverEdgeIndex > -1) {
+      pointList = [...pointList, pointList[0]];
+      pointList = pointList.slice(hoverEdgeIndex, hoverEdgeIndex + 2);
+    }
+    const specialEdgeList = [];
+    ctx.beginPath();
+    ctx.moveTo(pointList[0].x, pointList[0].y);
+    for (let i = 0; i < pointList.length - 1; i++) {
+      if (pointList[i].specialEdge) {
+        specialEdgeList.push({
+          i1: i,
+          i2: i + 1
+        });
+      }
+      ctx.lineTo(pointList[i + 1].x, pointList[i + 1].y);
+    }
+    ctx.stroke();
+    ctx.save();
+    ctx.lineWidth = thickness * 0.8;
+    ctx.lineCap = "butt";
+    ctx.strokeStyle = "white";
+    ctx.setLineDash([3, 3]);
+    specialEdgeList.forEach((v) => {
+      const point1 = pointList[v.i1];
+      const point2 = pointList[v.i2];
+      ctx.beginPath();
+      ctx.moveTo(point1.x, point1.y);
+      ctx.lineTo(point2.x, point2.y);
+      ctx.stroke();
+    });
+    ctx.restore();
+    const DEFAULT_SPECIAL_POINT_RADIUS = 4;
+    const DEFAULT_BORDER = 2;
+    pointList.forEach((p) => {
+      if (p.specialPoint) {
+        this.drawSpecialPoint(canvas, p, DEFAULT_SPECIAL_POINT_RADIUS + DEFAULT_BORDER, color);
+        this.drawSpecialPoint(canvas, p, DEFAULT_SPECIAL_POINT_RADIUS, "white");
+      }
+    });
+    ctx.restore();
+    return pointList;
+  }
+  static drawCircle(canvas, anchorPoint, radius, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {
+      startAngleDeg = 0,
+      endAngleDeg = 360,
+      thickness = 1,
+      color = DEFAULT_COLOR,
+      fill = DEFAULT_COLOR
+    } = options;
+    const startAngleRad = UnitUtils.deg2rad(startAngleDeg);
+    const endAngleRad = UnitUtils.deg2rad(endAngleDeg);
+    ctx.save();
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = thickness;
+    ctx.arc(anchorPoint.x, anchorPoint.y, radius, startAngleRad, endAngleRad, false);
+    ctx.stroke();
+    if (fill) {
+      ctx.fill();
+    }
+    ctx.closePath();
+    ctx.restore();
+  }
+  static drawCircleWithFill(canvas, anchorPoint, radius = 3, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR} = options;
+    ctx.save();
+    const startAngleRad = UnitUtils.deg2rad(0);
+    const endAngleRad = UnitUtils.deg2rad(360);
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(anchorPoint.x, anchorPoint.y, radius, startAngleRad, endAngleRad, false);
+    ctx.fill();
+    ctx.restore();
+  }
+  static drawSpecialPoint(canvas, point, pointRadius = 6, fillStyle) {
+    const ctx = canvas.getContext("2d");
+    const {x, y} = point;
+    ctx.save();
+    ctx.beginPath();
+    ctx.fillStyle = fillStyle;
+    const newPointRadius = pointRadius * 1.5;
+    const xl = newPointRadius * Math.sqrt(3) / 2;
+    const yl = newPointRadius / 2;
+    ctx.moveTo(x, y - newPointRadius);
+    ctx.lineTo(x - xl, y + yl);
+    ctx.lineTo(x + xl, y + yl);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+  static drawPolygon(canvas, pointList, options = {}) {
+    const {isClose = false, lineType = ELineTypes.Line} = options;
+    if (isClose === true) {
+      pointList = [...pointList, pointList[0]];
+    }
+    if (lineType === ELineTypes.Curve) {
+      pointList = PolygonUtils.createSmoothCurvePointsFromPointList([...pointList]);
+    }
+    this.drawLineWithPointList(canvas, pointList, __spreadProps(__spreadValues({}, options), {
+      lineType: ELineTypes.Line
+    }));
+    return pointList;
+  }
+  static drawPolygonWithFill(canvas, pointList, options = {}) {
+    if (pointList.length < 2) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR, lineType = ELineTypes.Line} = options;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    if (lineType === ELineTypes.Curve) {
+      pointList = PolygonUtils.createSmoothCurvePointsFromPointList([...pointList, pointList[0]]);
+    }
+    const [startPoint, ...otherPointList] = pointList;
+    ctx.moveTo(startPoint.x, startPoint.y);
+    otherPointList.forEach((point) => {
+      ctx.lineTo(point.x, point.y);
+    });
+    ctx.fill();
+    ctx.restore();
+    return pointList;
+  }
+  static drawPolygonWithFillAndLine(canvas, pointList, options = {}) {
+    const {strokeColor, fillColor, thickness, lineCap, isClose, lineType} = options;
+    const newPointList = this.drawPolygon(canvas, pointList, {
+      color: strokeColor,
+      thickness,
+      lineCap,
+      isClose,
+      lineType
+    });
+    this.drawPolygonWithFill(canvas, pointList, {color: fillColor, lineType});
+    return newPointList;
+  }
+  static drawPolygonWithKeyPoint(canvas, pointList, options = {}) {
+    const {pointColor = "white", strokeColor} = options;
+    const newPointList = this.drawPolygon(canvas, pointList, options);
+    newPointList.forEach((point) => {
+      this.drawCircleWithFill(canvas, point, 4, {color: strokeColor});
+      this.drawCircleWithFill(canvas, point, 3, {color: pointColor});
+    });
+    return newPointList;
+  }
+  static drawSelectedPolygonWithFillAndLine(canvas, pointList, options = {}) {
+    const {pointColor = "white", strokeColor} = options;
+    const newPointList = this.drawPolygonWithFillAndLine(canvas, pointList, options);
+    newPointList.forEach((point) => {
+      this.drawCircleWithFill(canvas, point, 4, {color: strokeColor});
+      this.drawCircleWithFill(canvas, point, 3, {color: pointColor});
+    });
+    return newPointList;
+  }
+  static drawText(canvas, startPoint, text, options = {}) {
+    if (!text) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    const {
+      color = DEFAULT_COLOR,
+      font = DEFAULT_FONT,
+      shadowColor = "",
+      shadowBlur = 0,
+      shadowOffsetX = 0,
+      shadowOffsetY = 0,
+      textMaxWidth = 164,
+      offsetX = 0,
+      offsetY = 0,
+      textAlign = "start",
+      lineHeight
+    } = options;
+    ctx.save();
+    ctx.textAlign = textAlign;
+    ctx.fillStyle = color != null ? color : "white";
+    ctx.font = font;
+    ctx.shadowColor = shadowColor;
+    ctx.shadowOffsetX = shadowOffsetX;
+    ctx.shadowOffsetY = shadowOffsetY;
+    ctx.shadowBlur = shadowBlur;
+    this.wrapText(canvas, `${text}`, startPoint.x + offsetX, startPoint.y + offsetY, textMaxWidth, lineHeight);
+    ctx.restore();
+  }
+  static wrapText(canvas, text, x, y, maxWidth, lineHeight) {
+    if (typeof text !== "string" || typeof x !== "number" || typeof y !== "number") {
+      return;
+    }
+    const context = canvas.getContext("2d");
+    if (typeof maxWidth === "undefined") {
+      maxWidth = canvas && canvas.width || 300;
+    }
+    if (typeof lineHeight === "undefined") {
+      lineHeight = canvas && parseInt(window.getComputedStyle(canvas).lineHeight, 10) || parseInt(window.getComputedStyle(document.body).lineHeight, 10);
+    }
+    const arrParagraph = text.split("\n");
+    for (let i = 0; i < arrParagraph.length; i++) {
+      const arrText = arrParagraph[i].split("");
+      let line = "";
+      for (let n = 0; n < arrText.length; n++) {
+        const testLine = line + arrText[n];
+        const metrics = context.measureText(testLine);
+        const testWidth = metrics.width;
+        if (!maxWidth) {
+          maxWidth = 300;
+        }
+        if (testWidth > maxWidth && n > 0) {
+          context.fillText(line, x, y);
+          line = arrText[n];
+          y += lineHeight;
+        } else {
+          line = testLine;
+        }
+      }
+      context.fillText(line, x, y);
+      y += lineHeight;
+    }
+  }
+  static drawArrow(ctx, startPoint, endPoint, options = {}) {
+    const {color = DEFAULT_COLOR, thickness = 1, lineCap = "round", theta = 30, headLen = 10} = options;
+    const angle = Math.atan2(startPoint.y - endPoint.y, startPoint.x - endPoint.x) * 180 / Math.PI;
+    const angle1 = (angle + theta) * Math.PI / 180;
+    const angle2 = (angle - theta) * Math.PI / 180;
+    const topX = headLen * Math.cos(angle1);
+    const topY = headLen * Math.sin(angle1);
+    const botX = headLen * Math.cos(angle2);
+    const botY = headLen * Math.sin(angle2);
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = lineCap;
+    ctx.beginPath();
+    ctx.moveTo(endPoint.x + topX, endPoint.y + topY);
+    ctx.lineTo(endPoint.x, endPoint.y);
+    ctx.lineTo(endPoint.x + botX, endPoint.y + botY);
+    ctx.stroke();
+    ctx.restore();
+  }
+  static drawArrowByCanvas(canvas, startPoint, endPoint, options = {}) {
+    const ctx = canvas.getContext("2d");
+    this.drawArrow(ctx, startPoint, endPoint, options);
+  }
+}
+DrawUtils.drawImg = (canvas, imgNode, options = {}) => {
+  const ctx = canvas.getContext("2d");
+  const {zoom = DEFAULT_ZOOM, currentPos = DEFAULT_CURRENT_POS, rotate = DEFAULT_ROTATE, imgAttribute} = options;
+  ctx.save();
+  switch (rotate) {
+    case 0:
+      ctx.translate(currentPos.x, currentPos.y);
+      break;
+    case 90:
+      ctx.translate(currentPos.x + imgNode.height * zoom, currentPos.y);
+      ctx.rotate(90 * Math.PI / 180);
+      break;
+    case 180:
+      ctx.translate(currentPos.x + imgNode.width * zoom, currentPos.y + imgNode.height * zoom);
+      ctx.rotate(Math.PI);
+      break;
+    case 270:
+      ctx.translate(currentPos.x, currentPos.y + imgNode.width * zoom);
+      ctx.rotate(270 * Math.PI / 180);
+      break;
+    default:
+      ctx.translate(currentPos.x, currentPos.y);
+      break;
+  }
+  if (imgAttribute) {
+    const {contrast, saturation, brightness} = imgAttribute;
+    ctx.filter = `saturate(${saturation + 100}%) contrast(${contrast + 100}%) brightness(${brightness + 100}%)`;
+  }
+  ctx.drawImage(imgNode, 0, 0, imgNode.width * zoom, imgNode.height * zoom);
+  ctx.restore();
+};
+
+export { DrawUtils as default };

package/es/utils/tool/EnhanceCommonToolUtils.js

@@ -0,0 +1 @@
+import{EToolName as o,ECheckModel as n}from"../../constant/tool.js";import a from"../../core/toolOperation/checkOperation.js";import i from"../../core/toolOperation/polygonOperation.js";import{RectOperation as p}from"../../core/toolOperation/rectOperation.js";import c from"../../core/toolOperation/tagOperation.js";import m from"../../core/toolOperation/LineToolOperation.js";import s from"../../core/toolOperation/pointOperation.js";import l from"../../core/toolOperation/TextToolOperation.js";import O from"../../core/toolOperation/segmentByRect.js";import T from"./CommonToolUtils.js";const e=t=>{switch(t){case o.Rect:case o.RectTrack:return p;case o.SegmentByRect:return O;case o.Tag:return c;case o.Polygon:return i;case n.Check:return a;case o.Line:return m;case o.Point:return s;case o.Text:return l;default:throw new Error("not match tool")}};class r extends T{}r.getCurrentOperation=e;export{r as default,e as getCurrentOperation};

package/es/utils/tool/ImgPosUtils.js

@@ -0,0 +1,56 @@
+class ImgPosUtils {
+  static getInitImgPos(canvasSize, imgSize, rotate = 0, zoomRatio = 1, isOriginalSize = false) {
+    if (rotate === 90 || rotate === 270) {
+      imgSize = {
+        width: imgSize.height,
+        height: imgSize.width
+      };
+    }
+    const wScale = canvasSize.width * zoomRatio / imgSize.width;
+    const hScale = canvasSize.height * zoomRatio / imgSize.height;
+    let scale = isOriginalSize ? 1 : Math.min(wScale, hScale);
+    const currentPos = {
+      x: (canvasSize.width - imgSize.width * scale) / 2,
+      y: (canvasSize.height - imgSize.height * scale) / 2
+    };
+    const width = imgSize.width * scale;
+    const height = imgSize.height * scale;
+    if (isOriginalSize) {
+      scale = 1;
+    }
+    return {
+      zoom: scale,
+      currentPos,
+      imgInfo: {width, height}
+    };
+  }
+  static getBasicRecPos(imgNode, basicRect, size, shrinkRatio = 0.9, zoomRatio = 1, isOriginalSize = false) {
+    if (basicRect && imgNode) {
+      const {x, y, height, width} = basicRect;
+      let initZoom = size.height / height;
+      if (width / height > size.width / size.height) {
+        initZoom = size.width / width;
+      }
+      const zoom = isOriginalSize ? 1 : initZoom * shrinkRatio * zoomRatio;
+      const viewCenter = {
+        x: size.width / 2,
+        y: size.height / 2
+      };
+      const imgCenter = {
+        x: (x + width / 2) * zoom,
+        y: (y + height / 2) * zoom
+      };
+      const currentPos = {
+        x: viewCenter.x - imgCenter.x,
+        y: viewCenter.y - imgCenter.y
+      };
+      return {
+        currentPos,
+        innerZoom: zoom
+      };
+    }
+    return false;
+  }
+}
+
+export { ImgPosUtils as default };