med-viewer-sdk 0.1.24 → 0.1.26

package/dist/med-viewer-sdk.mjs

@@ -12794,6 +12794,15 @@ const CSS_VAR_MAP = {
 function cssVar(key) {
   return `var(${CSS_VAR_MAP[key]})`;
 }
+const GLOBAL_ANNO_EDITOR_KEYS = [
+  "annoEditorBg",
+  "annoEditorText",
+  "annoEditorBorder",
+  "annoEditorInputBg",
+  "annoEditorBtnBg",
+  "annoEditorBtnHoverBg",
+  "annoEditorBtnColor"
+];
 class ThemeManager {
   constructor(container, themeConfig) {
     __publicField(this, "container");
@@ -12830,6 +12839,7 @@ class ThemeManager {
   }
   /**
    * 将主题颜色应用为 CSS 变量到容器元素
+   * 同时将 annoEditor* 相关变量提升到 :root，供 .r6o-editor（挂载在 body 下）使用
    */
   applyTheme(colors) {
     const keys = Object.keys(CSS_VAR_MAP);
@@ -12837,6 +12847,9 @@ class ThemeManager {
       const value = colors[key];
       if (value !== void 0) {
         this.container.style.setProperty(CSS_VAR_MAP[key], value);
+        if (GLOBAL_ANNO_EDITOR_KEYS.includes(key)) {
+          document.documentElement.style.setProperty(CSS_VAR_MAP[key], value);
+        }
       }
     });
   }
@@ -12874,6 +12887,9 @@ class ThemeManager {
     const keys = Object.keys(CSS_VAR_MAP);
     keys.forEach((key) => {
       this.container.style.removeProperty(CSS_VAR_MAP[key]);
+      if (GLOBAL_ANNO_EDITOR_KEYS.includes(key)) {
+        document.documentElement.style.removeProperty(CSS_VAR_MAP[key]);
+      }
     });
   }
 }
@@ -12882,6 +12898,7 @@ class AnnoAnnotator extends BaseAnnotator {
     super(engine);
     __publicField(this, "anno");
     __publicField(this, "listeners", /* @__PURE__ */ new Map());
+    __publicField(this, "injectedStyleEl", null);
     this.anno = Annotorious(this.engine.viewer, {
       ...config
       // 可以在此配置样式、偏好等
@@ -12936,7 +12953,10 @@ class AnnoAnnotator extends BaseAnnotator {
     this.anno.clearAnnotations();
   }
   destroy() {
+    var _a2;
     this.anno.destroy();
+    (_a2 = this.injectedStyleEl) == null ? void 0 : _a2.remove();
+    this.injectedStyleEl = null;
   }
   initEvents(config) {
     if (config.onCreateAnnotation) {
@@ -12973,11 +12993,9 @@ class AnnoAnnotator extends BaseAnnotator {
     }
   }
   injectStyles() {
-    const styleId = "med-anno-v2-7-17-overrides";
-    if (document.getElementById(styleId))
-      return;
     const style = document.createElement("style");
-    style.id = styleId;
+    style.setAttribute("data-med-anno-instance", "true");
+    this.injectedStyleEl = style;
     style.innerHTML = `
       /* ── 标注手柄 ── */
       .a9s-handle .a9s-handle-inner {
@@ -14150,442 +14168,234 @@ function t(path) {
   }
   return typeof value === "string" ? value : path;
 }
+function getCurrentLocale() {
+  return currentLocale;
+}
 function getWithUnit(value, unitSuffix) {
-  return value.toFixed(2) + "μ" + unitSuffix;
+  const isArea = unitSuffix.includes("²");
+  const baseSuffix = unitSuffix.replace("²", "");
+  if (isArea) {
+    if (value >= 1e12) {
+      return (value / 1e12).toFixed(2) + " " + baseSuffix + "²";
+    }
+    if (value >= 1e6) {
+      return (value / 1e6).toFixed(2) + " m" + baseSuffix + "²";
+    }
+    return value.toFixed(2) + " μ" + baseSuffix + "²";
+  } else {
+    if (value >= 1e6) {
+      return (value / 1e6).toFixed(2) + " " + baseSuffix;
+    }
+    if (value >= 1e3) {
+      return (value / 1e3).toFixed(2) + " m" + baseSuffix;
+    }
+    return value.toFixed(2) + " μ" + baseSuffix;
+  }
 }
-function pixelsToPerMeter(value, pixelsPerMeter) {
-  let nweValue = value / pixelsPerMeter;
-  return nweValue * 1e6;
+function pixelsToMicrons(value, pixelsPerMeter) {
+  return value / pixelsPerMeter * 1e6;
+}
+function computePolygonArea(pts) {
+  let sum = 0;
+  for (let i2 = 0; i2 < pts.length - 1; i2++) {
+    const [x1, y1] = pts[i2];
+    const [x2, y2] = pts[i2 + 1];
+    sum += x1 * y2 - x2 * y1;
+  }
+  return Math.abs(sum / 2);
 }
 const ShapeLabelsFormatter = (pixelsPerMeter, showMeasure) => (annotation) => {
   var _a2;
   const bodies = Array.isArray(annotation.body) ? annotation.body : [annotation.body];
-  let toolName = (_a2 = annotation.target.renderedVia) == null ? void 0 : _a2.name;
-  if (!showMeasure) {
+  let toolName = ((_a2 = annotation.target.renderedVia) == null ? void 0 : _a2.name) ?? null;
+  if (!showMeasure)
     toolName = null;
-  }
   const foreignObject = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "foreignObject"
   );
   foreignObject.setAttribute("width", "1px");
   foreignObject.setAttribute("height", "1px");
-  const firstTag = bodies.find((b2) => b2.purpose == "commenting");
+  const firstTag = bodies.find((b2) => (b2 == null ? void 0 : b2.purpose) === "commenting");
+  const wrapLabel = (rows, remark) => {
+    const remarkRow = remark ? `<p>${t("annotation.remark")}:&nbsp;&nbsp;${remark}</p>` : "";
+    return `<div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
+  <div class="a9s-shape-label">
+    ${rows.map((r2) => `<p>${r2}</p>`).join("")}
+    ${remarkRow}
+  </div>
+</div>`;
+  };
   switch (toolName) {
-    case "line":
-      console.log("line", annotation.target.selector.value);
-      let lineDiv = document.createElement("div");
-      lineDiv.innerHTML = annotation.target.selector.value;
-      let line = lineDiv.getElementsByTagName("line")[0];
-      let x1 = pixelsToPerMeter(
-        Number(line.getAttribute("x1")),
-        pixelsPerMeter
-      );
-      let y1 = pixelsToPerMeter(
-        Number(line.getAttribute("y1")),
-        pixelsPerMeter
-      );
-      let x2 = pixelsToPerMeter(
-        Number(line.getAttribute("x2")),
-        pixelsPerMeter
+    case "line": {
+      const div = document.createElement("div");
+      div.innerHTML = annotation.target.selector.value;
+      const el = div.getElementsByTagName("line")[0];
+      const x1 = pixelsToMicrons(Number(el.getAttribute("x1")), pixelsPerMeter);
+      const y1 = pixelsToMicrons(Number(el.getAttribute("y1")), pixelsPerMeter);
+      const x2 = pixelsToMicrons(Number(el.getAttribute("x2")), pixelsPerMeter);
+      const y2 = pixelsToMicrons(Number(el.getAttribute("y2")), pixelsPerMeter);
+      const len = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+      foreignObject.innerHTML = wrapLabel(
+        [`${t("annotation.length")}:&nbsp;&nbsp;${getWithUnit(len, "m")}`],
+        firstTag == null ? void 0 : firstTag.value
       );
-      let y2 = pixelsToPerMeter(
-        Number(line.getAttribute("y2")),
-        pixelsPerMeter
-      );
-      let len = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-      if (firstTag) {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-<div  class="a9s-shape-label" >
-      <p >
-       ${t(`annotation.length`)}:&nbsp;&nbsp;${getWithUnit(
-          len,
-          "m"
-        )}&nbsp;&nbsp; </p> <p >
-       ${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      } else {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-
-    <div class="a9s-shape-label" >
-      <p>
-       ${t(`annotation.length`)}:&nbsp;&nbsp;${getWithUnit(len, "m")}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      }
       break;
-    case "rect":
-      let reg = new RegExp("xywh=pixel:", "g");
-      let str = annotation.target.selector.value.replace(reg, "");
-      let point = str.split(",");
-      const rectWidth = pixelsToPerMeter(Number(point[2]), pixelsPerMeter);
-      const rectHeight = pixelsToPerMeter(Number(point[3]), pixelsPerMeter);
-      const rectPerimeter = 2 * (rectWidth + rectHeight);
-      const rectArea = rectWidth * rectHeight;
-      if (firstTag) {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-
-    <div class="a9s-shape-label">
-      <p>
-      ${t(`annotation.width`)}:&nbsp;&nbsp;${getWithUnit(
-          rectWidth,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-
-
-      ${t(`annotation.height`)}:&nbsp;&nbsp;${getWithUnit(
-          rectHeight,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          rectPerimeter,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          rectArea,
-          "m²"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      } else {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-    <div class="a9s-shape-label">
-      <p >
-      ${t(`annotation.width`)}:&nbsp;&nbsp;${getWithUnit(
-          rectWidth,
-          "m"
-        )}&nbsp;&nbsp;</p>  <p>
-      ${t(`annotation.height`)}:&nbsp;&nbsp;${getWithUnit(
-          rectHeight,
-          "m"
-        )}&nbsp;&nbsp;</p>  <p>
-        ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          rectPerimeter,
-          "m"
-        )}&nbsp;&nbsp;</p>  <p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(rectArea, "m²")}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      }
-      break;
-    case "circle":
-      let circleDiv = document.createElement("div");
-      console.log(annotation);
-      circleDiv.innerHTML = annotation.target.selector.value;
-      let circle = circleDiv.getElementsByTagName("circle")[0];
-      const circleRadius = pixelsToPerMeter(
-        Number(circle.getAttribute("r")),
-        pixelsPerMeter
+    }
+    case "rect": {
+      const str = annotation.target.selector.value.replace(/xywh=pixel:/g, "");
+      const parts = str.split(",");
+      const rw = pixelsToMicrons(Number(parts[2]), pixelsPerMeter);
+      const rh = pixelsToMicrons(Number(parts[3]), pixelsPerMeter);
+      const rp = 2 * (rw + rh);
+      const ra = rw * rh;
+      foreignObject.innerHTML = wrapLabel(
+        [
+          `${t("annotation.width")}:&nbsp;&nbsp;${getWithUnit(rw, "m")}`,
+          `${t("annotation.height")}:&nbsp;&nbsp;${getWithUnit(rh, "m")}`,
+          `${t("annotation.perimeter")}:&nbsp;&nbsp;${getWithUnit(rp, "m")}`,
+          `${t("annotation.area")}:&nbsp;&nbsp;${getWithUnit(ra, "m²")}`
+        ],
+        firstTag == null ? void 0 : firstTag.value
       );
-      const circleCircumference = 2 * Math.PI * circleRadius;
-      const circleArea = Math.PI * Math.pow(circleRadius, 2);
-      if (firstTag) {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-
-    <div class="a9s-shape-label">
-      <p>
-      ${t(`annotation.radius`)}:&nbsp;&nbsp;${getWithUnit(
-          circleRadius,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-       ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          circleCircumference,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          circleArea,
-          "m²"
-        )}&nbsp;&nbsp;</p><p>
-       ${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      } else {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-    <div class="a9s-shape-label"> 
-      <p>
-      ${t(`annotation.radius`)}:&nbsp;&nbsp;${getWithUnit(
-          circleRadius,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-        ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          circleCircumference,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          circleArea,
-          "m²"
-        )}&nbsp;&nbsp;
-     
-      </p>
-      </div>
-    </div>`;
-      }
       break;
-    case "ellipse":
-      let ellipseDiv = document.createElement("div");
-      ellipseDiv.innerHTML = annotation.target.selector.value;
-      let ellipse = ellipseDiv.getElementsByTagName("ellipse")[0];
-      let rx = pixelsToPerMeter(
-        Number(ellipse.getAttribute("rx")),
-        pixelsPerMeter
+    }
+    case "circle": {
+      const div = document.createElement("div");
+      div.innerHTML = annotation.target.selector.value;
+      const el = div.getElementsByTagName("circle")[0];
+      const r2 = pixelsToMicrons(Number(el.getAttribute("r")), pixelsPerMeter);
+      const circum = 2 * Math.PI * r2;
+      const area = Math.PI * r2 * r2;
+      foreignObject.innerHTML = wrapLabel(
+        [
+          `${t("annotation.radius")}:&nbsp;&nbsp;${getWithUnit(r2, "m")}`,
+          `${t("annotation.perimeter")}:&nbsp;&nbsp;${getWithUnit(circum, "m")}`,
+          `${t("annotation.area")}:&nbsp;&nbsp;${getWithUnit(area, "m²")}`
+        ],
+        firstTag == null ? void 0 : firstTag.value
       );
-      let ry = pixelsToPerMeter(
-        Number(ellipse.getAttribute("ry")),
-        pixelsPerMeter
+      break;
+    }
+    case "ellipse": {
+      const div = document.createElement("div");
+      div.innerHTML = annotation.target.selector.value;
+      const el = div.getElementsByTagName("ellipse")[0];
+      const rx = pixelsToMicrons(Number(el.getAttribute("rx")), pixelsPerMeter);
+      const ry = pixelsToMicrons(Number(el.getAttribute("ry")), pixelsPerMeter);
+      const majorAxis = Math.max(rx, ry);
+      const minorAxis = Math.min(rx, ry);
+      const perim = Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
+      const area = Math.PI * rx * ry;
+      foreignObject.innerHTML = wrapLabel(
+        [
+          `${t("annotation.majorAxis")}:&nbsp;&nbsp;${getWithUnit(majorAxis, "m")}`,
+          `${t("annotation.minorAxis")}:&nbsp;&nbsp;${getWithUnit(minorAxis, "m")}`,
+          `${t("annotation.perimeter")}:&nbsp;&nbsp;${getWithUnit(perim, "m")}`,
+          `${t("annotation.area")}:&nbsp;&nbsp;${getWithUnit(area, "m²")}`
+        ],
+        firstTag == null ? void 0 : firstTag.value
       );
-      let majorAxis = null;
-      let minorAxis = null;
-      if (rx >= ry) {
-        majorAxis = rx;
-        minorAxis = ry;
-      } else {
-        majorAxis = ry;
-        minorAxis = rx;
-      }
-      const ellipsePerimeter = Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
-      const ellipseArea = Math.PI * rx * ry;
-      if (firstTag) {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-    <div class="a9s-shape-label">
-      <p>
-      ${t(`annotation.majorAxis`)}:&nbsp;&nbsp;${getWithUnit(
-          majorAxis,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-
-       ${t(`annotation.minorAxis`)}:&nbsp;&nbsp;${getWithUnit(
-          minorAxis,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          ellipsePerimeter,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          ellipseArea,
-          "m²"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      } else {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-    <div class="a9s-shape-label">
-      <p>
-      ${t(`annotation.majorAxis`)}:&nbsp;&nbsp;${getWithUnit(
-          majorAxis,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-    
-       ${t(`annotation.minorAxis`)}:&nbsp;&nbsp;${getWithUnit(
-          minorAxis,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-        ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          ellipsePerimeter,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          ellipseArea,
-          "m²"
-        )}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      }
       break;
-    case "polygon":
-      let polygonDiv = document.createElement("div");
-      polygonDiv.innerHTML = annotation.target.selector.value;
-      let polygon = polygonDiv.getElementsByTagName("polygon")[0];
-      let pointsAttribute = polygon.getAttribute("points");
-      const points = pointsAttribute.split(" ").map((point2) => {
-        const [x3, y3] = point2.split(",").map(parseFloat);
-        return {
-          x: pixelsToPerMeter(x3, pixelsPerMeter),
-          y: pixelsToPerMeter(y3, pixelsPerMeter)
-        };
+    }
+    case "polygon": {
+      const div = document.createElement("div");
+      div.innerHTML = annotation.target.selector.value;
+      const el = div.getElementsByTagName("polygon")[0];
+      const pts = (el.getAttribute("points") ?? "").trim().split(/\s+/).map((p2) => {
+        const [x2, y2] = p2.split(",").map(parseFloat);
+        return [
+          pixelsToMicrons(x2, pixelsPerMeter),
+          pixelsToMicrons(y2, pixelsPerMeter)
+        ];
       });
-      let polygonPerimeter = 0;
-      for (let i2 = 0; i2 < points.length; i2++) {
-        const currentPoint = points[i2];
-        const nextPoint = points[(i2 + 1) % points.length];
-        const dx = nextPoint.x - currentPoint.x;
-        const dy = nextPoint.y - currentPoint.y;
-        polygonPerimeter += Math.sqrt(dx * dx + dy * dy);
-      }
-      let polygonArea = 0;
-      for (let i2 = 0; i2 < points.length; i2++) {
-        const currentPoint = points[i2];
-        const nextPoint = points[(i2 + 1) % points.length];
-        polygonArea += currentPoint.x * nextPoint.y - nextPoint.x * currentPoint.y;
-      }
-      polygonArea = Math.abs(polygonArea) / 2;
-      if (firstTag) {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-    <div class="a9s-shape-label">
-      <p>
-       ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          polygonPerimeter,
-          "m"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          polygonArea,
-          "m²"
-        )}&nbsp;&nbsp;</p> <p>
-       ${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      } else {
-        foreignObject.innerHTML = `
-    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-
-    <div class="a9s-shape-label">
-      <p>
-        ${t(`annotation.perimeter`)}:&nbsp;&nbsp;${getWithUnit(
-          polygonPerimeter,
-          "m"
-        )}&nbsp;&nbsp;</p><p>
-       ${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(
-          polygonArea,
-          "m²"
-        )}&nbsp;&nbsp;
-      </p>
-      </div>
-    </div>`;
-      }
+      let polyPerim = 0;
+      for (let i2 = 0; i2 < pts.length; i2++) {
+        const [ax, ay] = pts[i2];
+        const [bx, by] = pts[(i2 + 1) % pts.length];
+        polyPerim += Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
+      }
+      const polyArea = computePolygonArea(pts);
+      foreignObject.innerHTML = wrapLabel(
+        [
+          `${t("annotation.perimeter")}:&nbsp;&nbsp;${getWithUnit(polyPerim, "m")}`,
+          `${t("annotation.area")}:&nbsp;&nbsp;${getWithUnit(polyArea, "m²")}`
+        ],
+        firstTag == null ? void 0 : firstTag.value
+      );
       break;
-    case "freehand":
-      let computeFreehandArea = function(freehandPoints2) {
-        let sum = 0;
-        for (let i2 = 0; i2 < freehandPoints2.length - 1; i2++) {
-          const [x12, y12] = freehandPoints2[i2];
-          const [x22, y22] = freehandPoints2[i2 + 1];
-          sum += x12 * y22 - x22 * y12;
-        }
-        return Math.abs(sum / 2);
-      };
-      let pathDiv = document.createElement("div");
-      pathDiv.innerHTML = annotation.target.selector.value;
-      let path = pathDiv.getElementsByTagName("path")[0];
-      let d2 = path.getAttribute("d");
-      const properties = new N(d2);
-      let pixelPerimeter = properties.getTotalLength();
-      let steps = 300;
-      let freehandPoints = [];
+    }
+    case "freehand": {
+      const div = document.createElement("div");
+      div.innerHTML = annotation.target.selector.value;
+      const el = div.getElementsByTagName("path")[0];
+      const d2 = el.getAttribute("d") ?? "";
+      const props = new N(d2);
+      const pixelPerim = props.getTotalLength();
+      const steps = 300;
+      const fhPts = [];
       for (let i2 = 0; i2 <= steps; i2++) {
-        let pos = properties.getPointAtLength(i2 / steps * pixelPerimeter);
-        freehandPoints.push([pos.x, pos.y]);
-      }
-      let areaPixel = computeFreehandArea(freehandPoints);
-      let realPerimeter = pixelsToPerMeter(pixelPerimeter, pixelsPerMeter);
-      let pixelToMicro = pixelsToPerMeter(1, pixelsPerMeter);
-      let realArea = areaPixel * pixelToMicro * pixelToMicro;
-      if (firstTag) {
-        foreignObject.innerHTML = `
-          <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-            <div class="a9s-shape-label">
-              <p>${t(`annotation.length`)}:&nbsp;&nbsp;${getWithUnit(realPerimeter, "m")}</p>
-              <p>${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(realArea, "m²")}</p>
-              <p>${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}</p>
-            </div>
-          </div>`;
-      } else {
-        foreignObject.innerHTML = `
-          <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-            <div class="a9s-shape-label">
-              <p>${t(`annotation.length`)}:&nbsp;&nbsp;${getWithUnit(realPerimeter, "m")}</p>
-              <p>${t(`annotation.area`)}:&nbsp;&nbsp;${getWithUnit(realArea, "m²")}</p>
-            </div>
-          </div>`;
-      }
+        const pos = props.getPointAtLength(i2 / steps * pixelPerim);
+        fhPts.push([pos.x, pos.y]);
+      }
+      const areaPixel = computePolygonArea(fhPts);
+      const realPerim = pixelsToMicrons(pixelPerim, pixelsPerMeter);
+      const pixelToMicro = pixelsToMicrons(1, pixelsPerMeter);
+      const realArea = areaPixel * pixelToMicro * pixelToMicro;
+      foreignObject.innerHTML = wrapLabel(
+        [
+          `${t("annotation.length")}:&nbsp;&nbsp;${getWithUnit(realPerim, "m")}`,
+          `${t("annotation.area")}:&nbsp;&nbsp;${getWithUnit(realArea, "m²")}`
+        ],
+        firstTag == null ? void 0 : firstTag.value
+      );
       break;
+    }
     default:
       if (firstTag) {
-        foreignObject.innerHTML = `
-            <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
-            <div class="a9s-shape-label">
-              <p>
-               ${t(`annotation.remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
-              </p>
-              </div>
-            </div>`;
+        foreignObject.innerHTML = wrapLabel(
+          [],
+          firstTag.value
+        );
       }
   }
-  return {
-    element: foreignObject
-  };
+  return { element: foreignObject };
 };
-const injectShapeLabelStyles = () => {
+function injectShapeLabelStyles() {
   const styleId = "med-anno-default-shapeLabelsFormatter-overrides";
   if (document.getElementById(styleId))
     return;
   const style = document.createElement("style");
   style.id = styleId;
   style.innerHTML = `
-          
 .a9s-annotationlayer .a9s-formatter-el,
 .a9s-annotationlayer .a9s-formatter-el foreignObject {
   overflow: visible;
   pointer-events: none;
 }
-
 .a9s-annotationlayer .a9s-formatter-el foreignObject .a9s-shape-label-wrapper {
   position: relative;
   transform: translateY(-100%);
   padding-bottom: 4px;
 }
-
-.a9s-annotationlayer
-  .a9s-formatter-el
-  foreignObject
-  .a9s-shape-label-wrapper
-  .a9s-shape-label {
+.a9s-annotationlayer .a9s-formatter-el foreignObject .a9s-shape-label-wrapper .a9s-shape-label {
   display: inline-block;
   max-width: 24vw !important;
   color: #000;
-  /* min-width: 10vw !important; */
-
   word-wrap: break-word;
   word-break: keep-all;
-  /* white-space: nowrap;  */
-
   padding: 3px 5px;
   margin-bottom: 2px;
   background-color: rgba(255, 255, 255, 0.85);
   border-radius: 3px;
   font-size: 14px;
 }
-
-.a9s-annotationlayer
-  .a9s-formatter-el
-  foreignObject
-  .a9s-shape-label-wrapper
-  .a9s-shape-label
-  p {
+.a9s-annotationlayer .a9s-formatter-el foreignObject .a9s-shape-label-wrapper .a9s-shape-label p {
   margin: 5px !important;
 }
-    `;
+  `;
   document.head.appendChild(style);
-};
+}
 var MagnificationPosition = /* @__PURE__ */ ((MagnificationPosition2) => {
   MagnificationPosition2["TOP_LEFT"] = "TOP_LEFT";
   MagnificationPosition2["TOP_CENTER"] = "TOP_CENTER";
@@ -16060,6 +15870,12 @@ var ToolbarPosition = /* @__PURE__ */ ((ToolbarPosition2) => {
   return ToolbarPosition2;
 })(ToolbarPosition || {});
 const createAnnoDropdownContent = (engine, hide) => {
+  if (!engine.anno) {
+    const tip = document.createElement("div");
+    tip.className = "med-toolbar-dropdown-inner med-plugin-unavailable";
+    tip.innerHTML = `<p>标注插件未启用，请在 plugins.annotorious 中开启</p>`;
+    return tip;
+  }
   const container = document.createElement("div");
   container.className = "med-toolbar-dropdown-inner";
   let selectedColor = "#ff0000";
@@ -16124,6 +15940,12 @@ const debounce = (fn, delay) => {
 };
 const createColorAdjustDropdownContent = (engine, hide) => {
   var _a2;
+  if (!engine.colorAdjust) {
+    const tip = document.createElement("div");
+    tip.className = "med-toolbar-dropdown-inner med-plugin-unavailable";
+    tip.innerHTML = `<p>颜色调整插件未启用，请在 plugins.colorAdjust 中开启</p>`;
+    return tip;
+  }
   const container = document.createElement("div");
   container.className = "med-toolbar-dropdown-inner med-color-adjust-dropdown";
   if (engine.anno)
@@ -16465,9 +16287,13 @@ const DEFAULT_BUTTONS = [
     icon: buttonSelection,
     label: t("toolbar.screenshot"),
     onClick: (engine, hide) => {
-      var _a2;
+      if (!engine.selection) {
+        console.warn("[MedToolbar] 截图插件未启用，请在 plugins.selection 中开启");
+        hide();
+        return;
+      }
       console.log("selection toggleState");
-      (_a2 = engine.selection) == null ? void 0 : _a2.toggleState();
+      engine.selection.toggleState();
       if (engine.anno) {
         engine.anno.setEnabled(false);
       }
@@ -17010,6 +16836,17 @@ class MedToolbar {
       .med-reset-btn:hover {
         background: ${cssVar("dangerBgHigh")};
       }
+      .med-plugin-unavailable {
+        min-width: 200px;
+        padding: 16px 12px;
+        text-align: center;
+      }
+      .med-plugin-unavailable p {
+        margin: 0;
+        font-size: 13px;
+        color: ${cssVar("textMuted")};
+        line-height: 1.5;
+      }
     `;
     document.head.appendChild(style);
   }
@@ -17099,6 +16936,7 @@ class MedViewerEngine {
     this.options = options;
     this.viewer = OpenSeadragon(osdOptions);
     this.themeManager = new ThemeManager(this.viewer.element, options.theme);
+    this.injectNavigatorStyles();
     this.viewer.addOnceHandler("open", () => {
       this.viewer.viewport.goHome();
       this.emit("ready");
@@ -17325,6 +17163,27 @@ class MedViewerEngine {
     var _a2;
     return ((_a2 = this.themeManager) == null ? void 0 : _a2.getColors()) ?? null;
   }
+  getThemeName() {
+    var _a2;
+    return ((_a2 = this.themeManager) == null ? void 0 : _a2.getThemeName()) ?? null;
+  }
+  /**
+   * 为 Navigator 小图添加圆角样式
+   */
+  injectNavigatorStyles() {
+    const STYLE_ID2 = "med-navigator-styles";
+    if (document.getElementById(STYLE_ID2))
+      return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID2;
+    style.textContent = `
+      .navigator {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    `;
+    document.head.appendChild(style);
+  }
   /**
    * 销毁引擎与所有插件
    */
@@ -17355,6 +17214,9 @@ class MedViewerEngine {
       ;
     console.log(`[MedEngine] Locale changed to ${locale}`);
   }
+  getLocale() {
+    return getCurrentLocale();
+  }
 }
 const MedViewer = defineComponent({
   name: "MedViewer",