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

package/es/utils/tool/PolygonUtils.js

@@ -0,0 +1,453 @@
+import { polygon, difference, union } from '@turf/turf';
+import { ERotateDirection } from '../../constant/annotation.js';
+import CommonToolUtils from './CommonToolUtils.js';
+import { ELineTypes, SEGMENT_NUMBER } from '../../constant/tool.js';
+import AxisUtils from './AxisUtils.js';
+import MathUtils from '../MathUtils.js';
+import LineToolUtils from './LineToolUtils.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;
+};
+class PolygonUtils {
+  static getHoverPolygonID(checkPoint, polygonPoints, scope = 3, lineType = ELineTypes.Line) {
+    let hoverPolygonID = "";
+    let minSize = Infinity;
+    const axisList = AxisUtils.axisArea(checkPoint, scope);
+    polygonPoints.forEach((p) => {
+      if (p.pointList) {
+        axisList.forEach((v) => {
+          const size = this.calcPolygonSize(p.pointList);
+          if (this.isInPolygon(v, p.pointList, lineType) && size < minSize) {
+            hoverPolygonID = p.id;
+            minSize = size;
+          }
+        });
+      }
+    });
+    return hoverPolygonID;
+  }
+  static calcPolygonSize(pointList = []) {
+    if ((pointList == null ? void 0 : pointList.length) <= 2) {
+      return 0;
+    }
+    const len = pointList.length;
+    const size = pointList.reduce((acc, cur, index, src) => {
+      const nextVal = src[(index + 1) % len];
+      return acc + cur.x * nextVal.y - nextVal.x * cur.y;
+    }, 0);
+    return Math.abs(size) / 2;
+  }
+  static isInPolygon(checkPoint, polygonPoints, lineType = ELineTypes.Line) {
+    let counter = 0;
+    let i;
+    let xinters;
+    let p1;
+    let p2;
+    polygonPoints = [...polygonPoints];
+    if (lineType === ELineTypes.Curve) {
+      polygonPoints = this.createSmoothCurvePoints(polygonPoints.reduce((acc, cur) => {
+        return [...acc, cur.x, cur.y];
+      }, []), 0.5, true, 20);
+    }
+    [p1] = polygonPoints;
+    const pointCount = polygonPoints.length;
+    for (i = 1; i <= pointCount; i++) {
+      p2 = polygonPoints[i % pointCount];
+      if (checkPoint.x > Math.min(p1.x, p2.x) && checkPoint.x <= Math.max(p1.x, p2.x)) {
+        if (checkPoint.y <= Math.max(p1.y, p2.y)) {
+          if (p1.x !== p2.x) {
+            xinters = (checkPoint.x - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
+            if (p1.y === p2.y || checkPoint.y <= xinters) {
+              counter++;
+            }
+          }
+        }
+      }
+      p1 = p2;
+    }
+    if (counter % 2 === 0) {
+      return false;
+    }
+    return true;
+  }
+  static createSmoothCurvePointsFromPointList(pointList, numberOfSegments = SEGMENT_NUMBER) {
+    const newPoints = this.createSmoothCurvePoints(pointList.reduce((acc, cur) => {
+      return [...acc, cur.x, cur.y];
+    }, []), 0.5, false, numberOfSegments);
+    return newPoints.map((p, i) => {
+      var _a;
+      const pos = i / (SEGMENT_NUMBER + 1);
+      const v = Math.floor(pos);
+      const data = (_a = pointList[v]) != null ? _a : {};
+      if (v === pos) {
+        return __spreadValues(__spreadValues({}, data), p);
+      }
+      return __spreadValues({
+        specialEdge: data.specialEdge
+      }, p);
+    });
+  }
+  static createSmoothCurvePoints(points, tension = 0.5, closed = false, numberOfSegments = SEGMENT_NUMBER) {
+    if (points.length < 4) {
+      return points;
+    }
+    const result = [];
+    const ps = points.slice(0);
+    let x;
+    let y;
+    let t1x;
+    let t2x;
+    let t1y;
+    let t2y;
+    let c1;
+    let c2;
+    let c3;
+    let c4;
+    let st;
+    let t;
+    let i;
+    if (closed) {
+      ps.unshift(points[points.length - 1]);
+      ps.unshift(points[points.length - 2]);
+      ps.unshift(points[points.length - 1]);
+      ps.unshift(points[points.length - 2]);
+      ps.push(points[0]);
+      ps.push(points[1]);
+    } else {
+      ps.unshift(points[1]);
+      ps.unshift(points[0]);
+      ps.push(points[points.length - 2]);
+      ps.push(points[points.length - 1]);
+    }
+    for (i = 2; i < ps.length - 4; i += 2) {
+      t1x = (ps[i + 2] - ps[i - 2]) * tension;
+      t2x = (ps[i + 4] - ps[i - 0]) * tension;
+      t1y = (ps[i + 3] - ps[i - 1]) * tension;
+      t2y = (ps[i + 5] - ps[i + 1]) * tension;
+      for (t = 0; t <= numberOfSegments; t++) {
+        st = t / numberOfSegments;
+        c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1;
+        c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2);
+        c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st;
+        c4 = Math.pow(st, 3) - Math.pow(st, 2);
+        x = c1 * ps[i] + c2 * ps[i + 2] + c3 * t1x + c4 * t2x;
+        y = c1 * ps[i + 1] + c2 * ps[i + 3] + c3 * t1y + c4 * t2y;
+        result.push(x);
+        result.push(y);
+      }
+    }
+    const formatResult = [];
+    for (let j = 0; j < result.length - 1; j += 2) {
+      formatResult.push({
+        x: result[j],
+        y: result[j + 1]
+      });
+    }
+    if (closed) {
+      for (let m = 0; m < numberOfSegments + 1; m++) {
+        const d = formatResult.shift();
+        formatResult.push(d);
+      }
+    }
+    return formatResult;
+  }
+  static getPolygonByID(polygonList, id) {
+    return polygonList.find((p) => p.id === id);
+  }
+  static getHoverEdgeIndex(checkPoint, pointList, lineType = ELineTypes.Line, scope = 3) {
+    let points = [...pointList];
+    if (lineType === ELineTypes.Curve) {
+      points = this.createSmoothCurvePoints(pointList.reduce((acc, cur) => {
+        return [...acc, cur.x, cur.y];
+      }, []), 0.5, true, SEGMENT_NUMBER);
+    } else if (lineType === ELineTypes.Line) {
+      points.push(points[0]);
+    }
+    let edgeIndex = -1;
+    let minLength = scope;
+    for (let i = 0; i < points.length - 1; i++) {
+      const {length} = MathUtils.getFootOfPerpendicular(checkPoint, points[i], points[i + 1]);
+      if (length < minLength) {
+        edgeIndex = i;
+        minLength = length;
+      }
+    }
+    if (edgeIndex === -1) {
+      return -1;
+    }
+    if (lineType === ELineTypes.Curve) {
+      return Math.floor(edgeIndex / SEGMENT_NUMBER);
+    }
+    return edgeIndex;
+  }
+  static getClosestPoint(coordinate, polygonList, lineType = ELineTypes.Line, range = 3, option) {
+    var _a;
+    let hasClosed = false;
+    const isClose = (_a = option == null ? void 0 : option.isClose) != null ? _a : true;
+    let closestPolygonID = "";
+    let closestEdgeIndex = -1;
+    let min = Infinity;
+    let dropFoot = coordinate;
+    const numberOfSegments = 20;
+    let isCloseNode = false;
+    polygonList.forEach((v) => {
+      if (isCloseNode) {
+        return;
+      }
+      if (!v.pointList) {
+        return;
+      }
+      switch (lineType) {
+        case ELineTypes.Line:
+          {
+            const allLine = CommonToolUtils.findAllLine(v.pointList, isClose);
+            allLine.forEach((line, lineIndex) => {
+              if (isCloseNode) {
+                return;
+              }
+              let {length, footPoint} = MathUtils.getFootOfPerpendicular(coordinate, line.point1, line.point2);
+              const twoPointDistance1 = MathUtils.getLineLength(line.point1, coordinate);
+              const twoPointDistance2 = MathUtils.getLineLength(line.point2, coordinate);
+              if (twoPointDistance1 < range * 2) {
+                footPoint = line.point1;
+                length = twoPointDistance1;
+                isCloseNode = true;
+              }
+              if (twoPointDistance2 < range * 2) {
+                footPoint = line.point2;
+                length = twoPointDistance2;
+                isCloseNode = true;
+              }
+              if (length < min && length < range) {
+                closestPolygonID = v.id;
+                closestEdgeIndex = lineIndex;
+                min = length;
+                dropFoot = footPoint;
+                hasClosed = true;
+              }
+            });
+          }
+          break;
+        case ELineTypes.Curve:
+          {
+            const points = this.createSmoothCurvePoints(v.pointList.reduce((acc, cur) => {
+              return [...acc, cur.x, cur.y];
+            }, []), 0.5, isClose, numberOfSegments);
+            for (let i = 0; i < points.length - 1; i++) {
+              const {length, footPoint} = MathUtils.getFootOfPerpendicular(coordinate, points[i], points[i + 1]);
+              if (length < min && length < range) {
+                closestPolygonID = v.id;
+                closestEdgeIndex = Math.floor(i / (numberOfSegments + 1));
+                min = length;
+                dropFoot = footPoint;
+                hasClosed = true;
+              }
+            }
+          }
+          break;
+      }
+    });
+    return {dropFoot, closestEdgeIndex, closestPolygonID, hasClosed};
+  }
+  static isPointListInPolygon(pointList, polygonPoints, lineType = ELineTypes.Line) {
+    return pointList.every((v) => this.isInPolygon(v, polygonPoints, lineType));
+  }
+  static isPointListOutSidePolygon(pointList, polygonPoints, lineType = ELineTypes.Line) {
+    return pointList.some((v) => !this.isInPolygon(v, polygonPoints, lineType));
+  }
+  static getPolygonArea(pointList) {
+    let total = 0;
+    for (let i = 0, l = pointList.length; i < l; i++) {
+      const addX = pointList[i].x;
+      const addY = pointList[i === pointList.length - 1 ? 0 : i + 1].y;
+      const subX = pointList[i === pointList.length - 1 ? 0 : i + 1].x;
+      const subY = pointList[i].y;
+      total += addX * addY * 0.5;
+      total -= subX * subY * 0.5;
+    }
+    return Math.abs(total);
+  }
+  static updatePolygonByRotate(direction, angle = 1, pointList) {
+    let rotate = 1;
+    if (direction === ERotateDirection.Anticlockwise) {
+      rotate = -1;
+    }
+    rotate *= angle;
+    return MathUtils.rotateRectPointList(rotate, pointList);
+  }
+  static deletePolygonLastPoint(acc, cur, index, array) {
+    if (index === array.length - 1) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        x: cur[0],
+        y: cur[1]
+      }
+    ];
+  }
+  static concatBeginAndEnd(array) {
+    if (array.length < 1) {
+      return array;
+    }
+    return [...array, array[0]];
+  }
+  static segmentPolygonByPolygon(pointList, polygonList) {
+    var _a, _b;
+    try {
+      let selectedPolygon = polygon([[...PolygonUtils.concatBeginAndEnd(pointList.map((v) => [v.x, v.y]))]]);
+      polygonList.forEach((v) => {
+        const backgroundPolygon = polygon([[...PolygonUtils.concatBeginAndEnd(v.pointList.map((p) => [p.x, p.y]))]]);
+        const diff = difference(selectedPolygon, backgroundPolygon);
+        if (diff) {
+          selectedPolygon = diff;
+        }
+      });
+      const resultList = (_b = (_a = selectedPolygon == null ? void 0 : selectedPolygon.geometry) == null ? void 0 : _a.coordinates.map((p) => {
+        var _a2;
+        if (((_a2 = selectedPolygon == null ? void 0 : selectedPolygon.geometry) == null ? void 0 : _a2.type) === "MultiPolygon") {
+          return p[0].reduce(PolygonUtils.deletePolygonLastPoint, []);
+        }
+        return p.reduce(PolygonUtils.deletePolygonLastPoint, []);
+      })) != null ? _b : [];
+      return resultList.reduce((acc, pointLists) => {
+        const len = pointLists.length;
+        const newPointList = pointLists.filter((point, i) => {
+          const nextIndex = (i + 1) % len;
+          if (AxisUtils.getIsInScope(point, pointLists[nextIndex], 1)) {
+            return false;
+          }
+          return true;
+        });
+        if (newPointList.length < 3) {
+          return acc;
+        }
+        return [...acc, newPointList];
+      }, []);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  static getPolygonPointList(selectedPolygonID, polygonList) {
+    const p = polygonList.find((v) => v.id === selectedPolygonID);
+    if (p && p.pointList && p.pointList.length > 0) {
+      return p.pointList;
+    }
+    return [];
+  }
+  static getWrapPolygonIndex(pointList, polygonList) {
+    return polygonList.findIndex((p) => PolygonUtils.isPointListInPolygon(pointList, p.pointList));
+  }
+  static clipPolygonFromWrapPolygon(pointList, wrapPointList) {
+    const wrapDirection = PolygonUtils.isPolygonClosewise(wrapPointList);
+    const selectedDirection = PolygonUtils.isPolygonClosewise(pointList);
+    const linkIndex = PolygonUtils.getClosePointDistanceFromPolygon(pointList[0], wrapPointList);
+    const linkPoint = wrapPointList[linkIndex];
+    let newPointList = [
+      ...wrapPointList.slice(0, linkIndex),
+      linkPoint,
+      ...pointList,
+      pointList[0],
+      ...wrapPointList.slice(linkIndex, wrapPointList.length)
+    ];
+    if (wrapDirection === selectedDirection) {
+      newPointList = [
+        ...wrapPointList.slice(0, linkIndex),
+        linkPoint,
+        pointList[0],
+        ...pointList.reverse(),
+        ...wrapPointList.slice(linkIndex, wrapPointList.length)
+      ];
+    }
+    return newPointList;
+  }
+  static isPolygonClosewise(p) {
+    const n = p.length;
+    let i;
+    let j;
+    let k;
+    let count = 0;
+    let z;
+    if (n < 3) {
+      return 0;
+    }
+    for (i = 0; i < n; i++) {
+      j = (i + 1) % n;
+      k = (i + 2) % n;
+      z = (p[j].x - p[i].x) * (p[k].y - p[j].y);
+      z -= (p[j].y - p[i].y) * (p[k].x - p[j].x);
+      if (z < 0) {
+        count--;
+      } else if (z > 0) {
+        count++;
+      }
+    }
+    if (count > 0) {
+      return 1;
+    }
+    if (count < 0) {
+      return -1;
+    }
+    return 0;
+  }
+  static getClosePointDistanceFromPolygon(point, pointList) {
+    let minLen = Number.MAX_SAFE_INTEGER;
+    let index = -1;
+    pointList.forEach((p, i) => {
+      const distance = LineToolUtils.calcDistance(point, p);
+      if (distance < minLen) {
+        minLen = distance;
+        index = i;
+      }
+    });
+    return index;
+  }
+  static combinePolygonWithPolygon(selectedPolygon, combinedPolygon) {
+    var _a, _b;
+    try {
+      const turfSelectedPolygon = polygon([
+        [...PolygonUtils.concatBeginAndEnd(selectedPolygon.pointList.map((v) => [v.x, v.y]))]
+      ]);
+      const turfCombinedPolygon = polygon([
+        [...PolygonUtils.concatBeginAndEnd(combinedPolygon.pointList.map((v) => [v.x, v.y]))]
+      ]);
+      const unionPolygon = union(turfSelectedPolygon, turfCombinedPolygon);
+      const unionList = [];
+      const newPolygon = selectedPolygon;
+      if (((_b = (_a = unionPolygon == null ? void 0 : unionPolygon.geometry) == null ? void 0 : _a.coordinates) == null ? void 0 : _b.length) === 1) {
+        unionList.push(combinedPolygon.id);
+        const pointList = unionPolygon == null ? void 0 : unionPolygon.geometry.coordinates.map((p) => {
+          var _a2;
+          if (((_a2 = unionPolygon == null ? void 0 : unionPolygon.geometry) == null ? void 0 : _a2.type) === "MultiPolygon") {
+            return p[0].reduce(PolygonUtils.deletePolygonLastPoint, []);
+          }
+          return p.reduce(PolygonUtils.deletePolygonLastPoint, []);
+        })[0];
+        newPolygon.pointList = pointList;
+      }
+      return {
+        newPolygon,
+        unionList
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+
+export { PolygonUtils as default };

package/es/utils/tool/RectUtils.js

@@ -0,0 +1,153 @@
+import AxisUtils from './AxisUtils.js';
+import CommonToolUtils from './CommonToolUtils.js';
+import { isInPolygon } from './polygonTool.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 RectUtils {
+  static composeResult(result, currentStep, resultList, stepList, basicImgInfo) {
+    try {
+      const data = JSON.parse(result);
+      const currentStepInfo = CommonToolUtils.getCurrentStepInfo(currentStep, stepList);
+      const {dataSourceStep} = currentStepInfo;
+      const stepName = `step_${currentStepInfo.step}`;
+      Object.assign(data, basicImgInfo);
+      if (data[stepName]) {
+        const info = data[stepName];
+        if (info.result) {
+          info.result = resultList;
+          return JSON.stringify(data);
+        }
+        return JSON.stringify(__spreadProps(__spreadValues({}, data), {
+          [stepName]: __spreadProps(__spreadValues({}, data[stepName]), {
+            result: resultList
+          })
+        }));
+      }
+      return JSON.stringify(__spreadProps(__spreadValues({}, data), {
+        [stepName]: {
+          dataSourceStep,
+          toolName: currentStepInfo.tool,
+          result: resultList
+        }
+      }));
+    } catch (e) {
+      return result;
+    }
+  }
+  static changeCoordinateByRotate(rect, rotate, imgSize) {
+    const {x, y, width, height} = rect;
+    const leftTopCoordinate = AxisUtils.changeCoordinateByRotate({x, y}, rotate, imgSize);
+    switch (rotate % 360) {
+      case 90:
+        return __spreadProps(__spreadValues({}, rect), {
+          x: leftTopCoordinate.x - height,
+          y: leftTopCoordinate.y,
+          width: height,
+          height: width
+        });
+      case 180:
+        return __spreadProps(__spreadValues({}, rect), {
+          x: leftTopCoordinate.x - width,
+          y: leftTopCoordinate.y - height
+        });
+      case 270:
+        return __spreadProps(__spreadValues({}, rect), {
+          x: leftTopCoordinate.x,
+          y: leftTopCoordinate.y - width,
+          width: height,
+          height: width
+        });
+      default:
+        return rect;
+    }
+  }
+  static translateRect2Points(rect) {
+    const {x, y, width, height} = rect;
+    return [
+      {
+        x,
+        y
+      },
+      {
+        x: x + width,
+        y
+      },
+      {
+        x: x + width,
+        y: y + height
+      },
+      {
+        x,
+        y: y + height
+      }
+    ];
+  }
+  static translatePoints2Rect(points, basicRect) {
+    if (points.length !== 4) {
+      return;
+    }
+    const {x, y} = points[0];
+    const width = points[1].x - points[0].x;
+    const height = points[2].y - points[1].y;
+    return __spreadProps(__spreadValues({}, basicRect), {
+      x,
+      y,
+      width,
+      height
+    });
+  }
+  static getRectPointList(rect, zoom = 1) {
+    return [
+      {x: rect.x * zoom, y: rect.y * zoom},
+      {x: (rect.x + rect.width) * zoom, y: rect.y * zoom},
+      {x: (rect.x + rect.width) * zoom, y: (rect.y + rect.height) * zoom},
+      {x: rect.x * zoom, y: (rect.y + rect.height) * zoom}
+    ];
+  }
+  static getRectEdgeList(rect, zoom = 1) {
+    const pointList = this.getRectPointList(rect, zoom);
+    const len = pointList.length;
+    return pointList.map((v, i) => {
+      return {
+        begin: v,
+        end: pointList[(i + 1) % len]
+      };
+    });
+  }
+  static isInRect(coordinate, rect, scope = 0, zoom = 1) {
+    return coordinate.x >= rect.x * zoom - scope && coordinate.x <= (rect.x + rect.width) * zoom + scope && coordinate.y >= rect.y * zoom - scope && coordinate.y <= (rect.y + rect.height) * zoom + scope;
+  }
+  static getRectUnderZoom(rect, zoom = 1) {
+    const {x, y, width, height} = rect;
+    return __spreadProps(__spreadValues({}, rect), {
+      x: x * zoom,
+      y: y * zoom,
+      width: width * zoom,
+      height: height * zoom
+    });
+  }
+  static isRectNotInPolygon(rect, polygonPointList) {
+    const rectPointList = this.getRectPointList(rect);
+    return rectPointList.some((p) => !isInPolygon(p, polygonPointList));
+  }
+}
+
+export { RectUtils as default };

package/es/utils/tool/RenderDomClass.js

@@ -0,0 +1,68 @@
+import DrawUtils from './DrawUtils.js';
+import StyleUtils from './StyleUtils.js';
+
+class RenderDomClass {
+  constructor(props) {
+    this._domMap = new Map();
+    this._container = props.container;
+    this._height = props.height;
+  }
+  wheelChange(e) {
+    e.stopPropagation();
+  }
+  clearTag(id) {
+    const parentNode = this._container;
+    const oldDom = window.self.document.getElementById(id);
+    if (oldDom && parentNode && parentNode.contains(oldDom)) {
+      oldDom.removeEventListener("wheel", this.wheelChange);
+      parentNode == null ? void 0 : parentNode.removeChild(oldDom);
+    }
+  }
+  render(annotations) {
+    const oldKeys = Array.from(this._domMap.keys());
+    const newKeys = annotations.map((v) => v.id);
+    annotations.forEach((v) => {
+      const {text, textMaxWidth, color = "white", background = "rgba(0, 0, 0, 0.6)", style} = v;
+      if (this._domMap.has(v.id)) {
+        const dom = this._domMap.get(v.id);
+        if (dom) {
+          dom.innerHTML = text;
+        }
+      } else {
+        const dom = DrawUtils.drawTagByDom(this._container, text, v.id);
+        if (dom) {
+          dom.setAttribute("style", `
+              position: absolute;
+              top: 0;
+              right: 0;
+              z-index: 20;
+              padding: 8px 20px;
+              font-size: 15px;
+              max-width: ${textMaxWidth}px;
+              color: ${color};
+              text-align: left;
+              line-height: 32px;
+              word-break: break-all;
+              white-space: pre-wrap;
+              background: ${background};
+              opacity: 0.9;
+              max-height: ${this._height * 0.8}px;
+              overflow-y: scroll;
+              clear: both;
+              ${StyleUtils.getStyle2String(style)}
+            `);
+          dom.addEventListener("wheel", this.wheelChange);
+          this._domMap.set(v.id, dom);
+        }
+      }
+    });
+    oldKeys.forEach((key) => {
+      if (newKeys.indexOf(key) === -1) {
+        this.clearTag(key);
+        this._domMap.delete(key);
+      }
+    });
+  }
+}
+
+export { RenderDomClass as default };

package/es/utils/tool/RenderDomUtils.js

@@ -0,0 +1,29 @@
+import Locale from '../../locales/index.js';
+import { EMessage } from '../../locales/constants.js';
+
+class RenderDomUtils {
+  static renderInvalidPage(container, size, lang) {
+    const invalidDOM = document.createElement("div");
+    invalidDOM.setAttribute("style", `
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: ${size.width}px;
+        height: ${size.height}px;
+        background: rgba(255, 87, 34, 1);
+        overflow: hidden;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30px;
+        opacity: 0.7;
+        z-index: 30;
+      `);
+    invalidDOM.innerHTML = Locale.getMessagesByLocale(EMessage.InvalidImage, lang);
+    container.appendChild(invalidDOM);
+    return invalidDOM;
+  }
+}
+
+export { RenderDomUtils as default };