@labelbee/lb-annotation 1.8.0 → 1.9.0-alpha.2

package/es/core/toolOperation/checkOperation.js

@@ -0,0 +1,206 @@
+import { cloneDeep } from 'lodash';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import RectUtils from '../../utils/tool/RectUtils.js';
+import TagUtil from '../../utils/tool/TagUtils.js';
+import { DEFAULT_TEXT_OFFSET } from '../../constant/annotation.js';
+import { EToolName } from '../../constant/tool.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import StyleUtils from '../../utils/tool/StyleUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+
+var __defProp = Object.defineProperty;
+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;
+};
+const TEXT_ATTRIBUTE_OFFSET = {
+  x: 8,
+  y: 26
+};
+const newScope = 2;
+class CheckOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.getHoverRectID = (e) => {
+      var _a, _b;
+      const coordinate = this.getCoordinateUnderZoom(e);
+      const currentShowList = (_b = (_a = this.resultList.find((v) => v.toolName === EToolName.Rect)) == null ? void 0 : _a.result) != null ? _b : [];
+      if (currentShowList.length > 0) {
+        const hoverList = currentShowList.filter((rect) => RectUtils.isInRect(coordinate, rect, newScope, this.zoom));
+        if (hoverList.length === 0) {
+          return "";
+        }
+        if (hoverList.length === 1) {
+          return hoverList[0].id;
+        }
+        if (hoverList.length > 1) {
+          const rectSizeList = hoverList.map((rect) => ({size: rect.width * rect.height, id: rect.id})).sort((a, b) => a.size - b.size);
+          return rectSizeList[0].id;
+        }
+      }
+      return "";
+    };
+    this.resultList = [];
+    this.hoverID = [];
+    this.fillID = [];
+    this.render = this.render.bind(this);
+    this.drawPolygon = this.drawPolygon.bind(this);
+    this.drawRect = this.drawRect.bind(this);
+    this.drawTag = this.drawTag.bind(this);
+    this.setShowDefaultCursor(true);
+    this.forbidOperation = true;
+  }
+  onMouseDown(e) {
+    var _a, _b;
+    if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return true;
+    }
+    const newMouseSelectedID = this.mouseHoverID;
+    const currentShowList = (_b = (_a = this.resultList.find((v) => v.toolName === EToolName.Rect)) == null ? void 0 : _a.result) != null ? _b : [];
+    if (e.button === 0) {
+      let selectedID = [newMouseSelectedID];
+      let isShow = true;
+      if (newMouseSelectedID && currentShowList.find((rect) => rect.id === newMouseSelectedID && (rect == null ? void 0 : rect.isSelected))) {
+        isShow = false;
+      }
+      if (!newMouseSelectedID) {
+        selectedID = currentShowList.map((rect) => rect.id);
+        isShow = false;
+      }
+      this.emit("setSelectedID", selectedID, isShow);
+      this.render();
+    }
+  }
+  updateRotate() {
+  }
+  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 = [newMouseHoverID];
+      if (!newMouseHoverID) {
+        hoverID = [];
+      }
+      this.emit("setHoverID", hoverID);
+      this.render();
+    }
+  }
+  setResult(result) {
+    this.resultList = cloneDeep(result);
+    this.render();
+  }
+  drawPolygon(polygonList, config) {
+    polygonList == null ? void 0 : polygonList.forEach((polygon) => {
+      var _a, _b, _c, _d, _e;
+      const toolColor = this.getColor(polygon.attribute, config);
+      const toolData = StyleUtils.getStrokeAndFill(toolColor, polygon.valid);
+      let thickness = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
+      if (this.hoverID.includes(polygon.id)) {
+        thickness = 4;
+        DrawUtils.drawPolygonWithFillAndLine(this.canvas, AxisUtils.changePointListByZoom(polygon.pointList, this.zoom, this.currentPos), {
+          fillColor: toolData.fill,
+          strokeColor: toolData.stroke,
+          pointColor: "white",
+          thickness,
+          lineCap: "round",
+          isClose: true,
+          lineType: config == null ? void 0 : config.lineType
+        });
+      } else {
+        DrawUtils.drawPolygon(this.canvas, AxisUtils.changePointListByZoom(polygon.pointList, this.zoom, this.currentPos), {
+          color: toolData.fill,
+          lineType: (_c = this.config) == null ? void 0 : _c.lineType,
+          thickness,
+          isClose: true
+        });
+      }
+      let showText = `${(_e = AttributeUtils.getAttributeShowText(polygon.attribute, (_d = config == null ? void 0 : config.attributeList) != null ? _d : [])) != null ? _e : ""}`;
+      if ((config == null ? void 0 : config.isShowOrder) && (polygon == null ? void 0 : polygon.order) > 0) {
+        showText = `${polygon.order} ${showText}`;
+      }
+      DrawUtils.drawText(this.canvas, AxisUtils.changePointByZoom(polygon.pointList[0], this.zoom, this.currentPos), showText, __spreadValues({
+        color: toolData.stroke
+      }, DEFAULT_TEXT_OFFSET));
+      const transformPointList = AxisUtils.changePointListByZoom(polygon.pointList || [], this.zoom, this.currentPos);
+      const endPoint = transformPointList[transformPointList.length - 1];
+      DrawUtils.drawText(this.canvas, {x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y}, polygon == null ? void 0 : polygon.textAttribute, __spreadValues({
+        color: toolData.stroke
+      }, DEFAULT_TEXT_OFFSET));
+    });
+  }
+  drawRect(rectList, config) {
+    rectList == null ? void 0 : rectList.forEach((rect) => {
+      let thickness = 1;
+      if (this.hoverID.includes(rect.id)) {
+        thickness = 3;
+      }
+      const toolColor = this.getColor(rect.attribute, config);
+      const renderRect = AxisUtils.changeRectByZoom(rect, this.zoom, this.currentPos);
+      DrawUtils.drawRect(this.canvas, renderRect, {
+        color: (rect == null ? void 0 : rect.valid) ? toolColor.valid.stroke : toolColor.invalid.stroke,
+        thickness
+      });
+      if (this.fillID.includes(rect.id)) {
+        DrawUtils.drawRectWithFill(this.canvas, renderRect, {
+          color: (rect == null ? void 0 : rect.valid) ? toolColor.valid.fill : toolColor.invalid.fill
+        });
+      }
+    });
+  }
+  drawTag(tagList, config) {
+    const tagInfoList = tagList.reduce((acc, cur) => {
+      return [
+        ...acc,
+        ...(config == null ? void 0 : config.inputList) ? TagUtil.getTagNameList(cur.result, config.inputList) : TagUtil.getTagnameListWithoutConfig(cur.result)
+      ];
+    }, []);
+    DrawUtils.drawTag(this.canvas, tagInfoList);
+  }
+  setHoverID(hoverID) {
+    this.hoverID = hoverID;
+    this.render();
+  }
+  setFillID(fillID) {
+    this.fillID = fillID;
+    this.render();
+  }
+  render() {
+    var _a;
+    super.render();
+    (_a = this.resultList) == null ? void 0 : _a.forEach((item) => {
+      switch (item == null ? void 0 : item.toolName) {
+        case EToolName.Rect:
+          this.drawRect(item.result, CommonToolUtils.jsonParser(item.config));
+          break;
+        case EToolName.Polygon:
+          this.drawPolygon(item.result, CommonToolUtils.jsonParser(item.config));
+          break;
+        case EToolName.Tag:
+          this.drawTag(item.result, CommonToolUtils.jsonParser(item.config));
+          break;
+      }
+    });
+  }
+  exportData() {
+    return [[], {}];
+  }
+}
+
+export { CheckOperation as default };

package/es/core/toolOperation/eventListener.js

@@ -0,0 +1,35 @@
+class EventListener {
+  constructor() {
+    this._events = new Map();
+  }
+  on(eventName, callback) {
+    const existEvents = this._events.get(eventName) || [];
+    if (!existEvents.some((fn) => fn === callback)) {
+      this._events.set(eventName, existEvents.concat(callback));
+    }
+  }
+  singleOn(eventName, callback) {
+    this._events.set(eventName, [callback]);
+  }
+  emit(eventName, ...args) {
+    const listener = this._events.get(eventName);
+    if (listener) {
+      listener.forEach((fn) => {
+        if (fn) {
+          fn(...args);
+        }
+      });
+    }
+  }
+  unbind(eventName, callback) {
+    const existEvents = this._events.get(eventName);
+    if (existEvents) {
+      this._events.set(eventName, existEvents.filter((fn) => fn !== callback));
+    }
+  }
+  unbindAll(eventName) {
+    this._events.delete(eventName);
+  }
+}
+
+export { EventListener as default };

package/es/core/toolOperation/measureOperation.js

@@ -0,0 +1,39 @@
+import { RectOperation } from './rectOperation.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 config = {
+  textConfigurable: false,
+  attributeConfigurable: true,
+  attributeList: []
+};
+class MeasureOperation extends RectOperation {
+  constructor(props) {
+    super(__spreadProps(__spreadValues({}, props), {config: JSON.stringify(config)}));
+  }
+  setSelectedIdAfterAddingDrawingRect() {
+    if (!this.drawingRect) {
+      return;
+    }
+    this.setSelectedRectID(this.drawingRect.id);
+  }
+}
+
+export { MeasureOperation as default };

package/es/core/toolOperation/pointCloud2dOperation.js

@@ -0,0 +1,197 @@
+import { ESortDirection } from '../../constant/annotation.js';
+import { EPolygonPattern } from '../../constant/tool.js';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import PolygonUtils from '../../utils/tool/PolygonUtils.js';
+import StyleUtils from '../../utils/tool/StyleUtils.js';
+import PolygonOperation from './polygonOperation.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class PointCloud2dOperation extends PolygonOperation {
+  constructor(props) {
+    super(props);
+    this.selectedIDs = [];
+    this.rightMouseUp = (e) => {
+      if (this.drawingPointList.length > 0) {
+        this.addDrawingPointToPolygonList();
+        return;
+      }
+      if (e.ctrlKey && this.hoverID) {
+        this.emit("addSelectedIDs", this.hoverID);
+      } else {
+        this.emit("setSelectedIDs", this.hoverID);
+      }
+    };
+    this.onKeyDown = () => {
+    };
+    this.onKeyUp = () => {
+    };
+    this.renderSingleSelectedPolygon = (selectedPolygon) => {
+      var _a;
+      if (this.selectedPolygons) {
+        const toolColor = this.getColor(selectedPolygon.attribute);
+        const toolData = StyleUtils.getStrokeAndFill(toolColor, selectedPolygon.valid, {isSelected: true});
+        const polygon = AxisUtils.changePointListByZoom(selectedPolygon.pointList, this.zoom, this.currentPos);
+        DrawUtils.drawSelectedPolygonWithFillAndLine(this.canvas, polygon, {
+          fillColor: "transparent",
+          strokeColor: toolData.stroke,
+          pointColor: "white",
+          thickness: 2,
+          lineCap: "round",
+          isClose: true,
+          lineType: (_a = this.config) == null ? void 0 : _a.lineType
+        });
+        if (selectedPolygon.isRect === true && this.showDirectionLine === true) {
+          this.renderRectPolygonDirection(polygon);
+        }
+      }
+    };
+    var _a, _b;
+    this.showDirectionLine = (_a = props.showDirectionLine) != null ? _a : true;
+    this.forbidAddNew = (_b = props.forbidAddNew) != null ? _b : false;
+  }
+  get getSelectedIDs() {
+    return this.selectedIDs;
+  }
+  setSelectedIDs(selectedIDs) {
+    this.selectedIDs = selectedIDs;
+    this.setSelectedID(this.selectedIDs.length === 1 ? this.selectedIDs[0] : "");
+    this.render();
+  }
+  deleteSelectedID() {
+    super.deleteSelectedID();
+    this.selectedIDs = [];
+    this.emit("deleteSelectedIDs");
+  }
+  get selectedPolygons() {
+    return PolygonUtils.getPolygonByIDs(this.polygonList, this.selectedIDs);
+  }
+  getLineColor() {
+    return "rgba(0, 255, 255, 0.5)";
+  }
+  renderStaticPolygon() {
+    var _a;
+    if (this.isHidden === false) {
+      (_a = this.polygonList) == null ? void 0 : _a.forEach((polygon) => {
+        var _a2, _b, _c;
+        if ([...this.selectedIDs, this.editPolygonID].includes(polygon.id)) {
+          return;
+        }
+        const {attribute} = polygon;
+        const toolColor = this.getColor(attribute);
+        const toolData = StyleUtils.getStrokeAndFill(toolColor, polygon.valid);
+        const transformPointList = AxisUtils.changePointListByZoom(polygon.pointList || [], this.zoom, this.currentPos);
+        DrawUtils.drawPolygonWithFillAndLine(this.canvas, transformPointList, {
+          fillColor: "transparent",
+          strokeColor: toolData.stroke,
+          pointColor: "white",
+          thickness: (_b = (_a2 = this.style) == null ? void 0 : _a2.width) != null ? _b : 2,
+          lineCap: "round",
+          isClose: true,
+          lineType: (_c = this.config) == null ? void 0 : _c.lineType
+        });
+        if (polygon.isRect === true && this.showDirectionLine === true) {
+          this.renderRectPolygonDirection(transformPointList);
+        }
+      });
+    }
+  }
+  renderSelectedPolygon() {
+    var _a;
+    (_a = this.selectedPolygons) == null ? void 0 : _a.forEach((polygon) => {
+      this.renderSingleSelectedPolygon(polygon);
+    });
+  }
+  renderRectPolygonDirection(polygon) {
+    if (polygon.length < 2) {
+      return;
+    }
+    DrawUtils.drawLine(this.canvas, polygon[0], polygon[1], {
+      color: "red",
+      thickness: 3
+    });
+  }
+  get currentPolygonListByPattern() {
+    return this.polygonList.filter((v) => {
+      if (this.pattern === EPolygonPattern.Rect) {
+        return v.isRect === true;
+      }
+      if (this.pattern === EPolygonPattern.Normal) {
+        return v.isRect !== true;
+      }
+      return true;
+    });
+  }
+  getHoverID(e) {
+    var _a;
+    const coordinate = this.getCoordinateUnderZoom(e);
+    const currentPolygonList = this.currentPolygonListByPattern;
+    const polygonListWithZoom = currentPolygonList.map((polygon) => __spreadProps(__spreadValues({}, polygon), {
+      pointList: AxisUtils.changePointListByZoom(polygon.pointList, this.zoom)
+    }));
+    return PolygonUtils.getHoverPolygonID(coordinate, polygonListWithZoom, 10, (_a = this.config) == null ? void 0 : _a.lineType);
+  }
+  switchToNextPolygon(sort = ESortDirection.ascend) {
+    if (this.drawingPointList.length > 0) {
+      return;
+    }
+    const sortList = this.currentPolygonListByPattern.map((v) => {
+      var _a, _b, _c, _d;
+      return __spreadProps(__spreadValues({}, v), {
+        x: (_b = (_a = v.pointList[0]) == null ? void 0 : _a.x) != null ? _b : 0,
+        y: (_d = (_c = v.pointList[0]) == null ? void 0 : _c.y) != null ? _d : 0
+      });
+    });
+    const nextSelectedResult = CommonToolUtils.getNextSelectedRectID(sortList, sort, this.selectedID);
+    if (nextSelectedResult) {
+      this.setSelectedIDs([nextSelectedResult.id]);
+    }
+    this.render();
+    return [nextSelectedResult.id];
+  }
+  setSelectedIdAfterAddingDrawing(newID) {
+    if (this.drawingPointList.length === 0) {
+      return;
+    }
+    this.setSelectedID(newID);
+  }
+  setSelectedID(newID) {
+    var _a, _b;
+    const oldID = this.selectedID;
+    if (newID !== oldID && oldID) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!newID) {
+      (_b = this._textAttributInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedID = newID;
+    this.render();
+  }
+  addPointInDrawing(e) {
+    if (this.forbidAddNew) {
+      return;
+    }
+    super.addPointInDrawing(e);
+  }
+}
+
+export { PointCloud2dOperation as default };