med-viewer-sdk 0.1.0

package/src/plugins/ShapeLabelsFormatter.js

@@ -0,0 +1,435 @@
+const pathDataParser = require("path-data-parser");
+import { svgPathProperties } from "svg-path-properties";
+
+import i18n from "@/lang";
+function getWithUnit(value, unitSuffix) {
+  // if (value < 0.000001) {
+  //   return (value * 1000000000).toFixed(2) + "n" + unitSuffix;
+  // }
+  // if (value < 0.001) {
+  return value.toFixed(2) + "μ" + unitSuffix;
+  // }
+  // if (value < 1) {
+  // return (value * 1000).toFixed(2) + "m" + unitSuffix;
+  // }
+  // if (value >= 1000) {
+  //   return (value / 1000).toFixed(2) + "k" + unitSuffix;
+  // }
+  // return value + " " + unitSuffix;
+}
+function pixelsToPerMeter(value, config) {
+  let nweValue = value / config.scalebarInstance.pixelsPerMeter;
+
+  return nweValue * 1000000;
+}
+
+const ShapeLabelsFormatter = (config, ShowMeasure) => (annotation) => {
+  const bodies = Array.isArray(annotation.body)
+    ? annotation.body
+    : [annotation.body];
+
+  let toolName = annotation.target.renderedVia?.name;
+  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((b) => b.purpose == "commenting");
+
+  switch (toolName) {
+    case "line":
+      let lineDiv = document.createElement("div");
+      lineDiv.innerHTML = annotation.target.selector.value;
+      let line = lineDiv.getElementsByTagName("line")[0];
+      let x1 = pixelsToPerMeter(Number(line.getAttribute("x1")), config);
+      let y1 = pixelsToPerMeter(Number(line.getAttribute("y1")), config);
+      let x2 = pixelsToPerMeter(Number(line.getAttribute("x2")), config);
+      let y2 = pixelsToPerMeter(Number(line.getAttribute("y2")), config);
+      let len = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+      // realLen = getWithUnit((len / config.scalebarInstance.pixelsPerMeter), 'm');
+      if (firstTag) {
+        foreignObject.innerHTML = `
+    <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
+<div  class="a9s-shape-label" >
+      <p >
+       ${i18n.t(`length`)}:&nbsp;&nbsp;${getWithUnit(
+          len,
+          "m",
+        )}&nbsp;&nbsp; </p> <p >
+       ${i18n.t(`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>
+       ${i18n.t(`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]), config); // 请根据你的实际情况替换为正确的半径值
+      const rectHeight = pixelsToPerMeter(Number(point[3]), config); // 替换为正确的高度值
+
+      // 计算${i18n.t(`perimeter`)}
+      const rectPerimeter = 2 * (rectWidth + rectHeight);
+
+      // 计算${i18n.t(`area`)}
+      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>
+      ${i18n.t(`width`)}:&nbsp;&nbsp;${getWithUnit(
+          rectWidth,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+
+
+      ${i18n.t(`height`)}:&nbsp;&nbsp;${getWithUnit(
+          rectHeight,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          rectPerimeter,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(
+          rectArea,
+          "m²",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`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 >
+      ${i18n.t(`width`)}:&nbsp;&nbsp;${getWithUnit(
+          rectWidth,
+          "m",
+        )}&nbsp;&nbsp;</p>  <p>
+      ${i18n.t(`height`)}:&nbsp;&nbsp;${getWithUnit(
+          rectHeight,
+          "m",
+        )}&nbsp;&nbsp;</p>  <p>
+        ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          rectPerimeter,
+          "m",
+        )}&nbsp;&nbsp;</p>  <p>
+       ${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(rectArea, "m²")}&nbsp;&nbsp;
+      </p>
+      </div>
+    </div>`;
+      }
+      break;
+    case "circle":
+      let circleDiv = document.createElement("div");
+      circleDiv.innerHTML = annotation.target.selector.value;
+      let circle = circleDiv.getElementsByTagName("circle")[0];
+      const circleRadius = pixelsToPerMeter(
+        Number(circle.getAttribute("r")),
+        config,
+      ); // 请根据你的实际情况替换为正确的半径值
+
+      // 计算${i18n.t(`perimeter`)}
+      const circleCircumference = 2 * Math.PI * circleRadius;
+      // 计算${i18n.t(`area`)}
+      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>
+      ${i18n.t(`radius`)}:&nbsp;&nbsp;${getWithUnit(
+          circleRadius,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+       ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          circleCircumference,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+       ${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(
+          circleArea,
+          "m²",
+        )}&nbsp;&nbsp;</p><p>
+       ${i18n.t(`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>
+      ${i18n.t(`radius`)}:&nbsp;&nbsp;${getWithUnit(
+          circleRadius,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+        ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          circleCircumference,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+       ${i18n.t(`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")), config);
+      let ry = pixelsToPerMeter(Number(ellipse.getAttribute("ry")), config);
+      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)));
+
+      // 计算${i18n.t(`area`)}
+      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>
+      ${i18n.t(`majorAxis`)}:&nbsp;&nbsp;${getWithUnit(
+          majorAxis,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+
+       ${i18n.t(`minorAxis`)}:&nbsp;&nbsp;${getWithUnit(
+          minorAxis,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          ellipsePerimeter,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(
+          ellipseArea,
+          "m²",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`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>
+      ${i18n.t(`majorAxis`)}:&nbsp;&nbsp;${getWithUnit(
+          majorAxis,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+    
+       ${i18n.t(`minorAxis`)}:&nbsp;&nbsp;${getWithUnit(
+          minorAxis,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+        ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          ellipsePerimeter,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+       ${i18n.t(`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((point) => {
+        const [x, y] = point.split(",").map(parseFloat);
+        return {
+          x: pixelsToPerMeter(x, config),
+          y: pixelsToPerMeter(y, config),
+        };
+      });
+
+      // 计算${i18n.t(`perimeter`)}
+      let polygonPerimeter = 0;
+      for (let i = 0; i < points.length; i++) {
+        const currentPoint = points[i];
+        const nextPoint = points[(i + 1) % points.length];
+        const dx = nextPoint.x - currentPoint.x;
+        const dy = nextPoint.y - currentPoint.y;
+        polygonPerimeter += Math.sqrt(dx * dx + dy * dy);
+      }
+
+      // 计算${i18n.t(`area`)}
+      let polygonArea = 0;
+      for (let i = 0; i < points.length; i++) {
+        const currentPoint = points[i];
+        const nextPoint = points[(i + 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>
+       ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          polygonPerimeter,
+          "m",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(
+          polygonArea,
+          "m²",
+        )}&nbsp;&nbsp;</p> <p>
+       ${i18n.t(`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>
+        ${i18n.t(`perimeter`)}:&nbsp;&nbsp;${getWithUnit(
+          polygonPerimeter,
+          "m",
+        )}&nbsp;&nbsp;</p><p>
+       ${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(
+          polygonArea,
+          "m²",
+        )}&nbsp;&nbsp;
+      </p>
+      </div>
+    </div>`;
+      }
+
+      break;
+    case "freehand":
+      // 解析 path
+      let pathDiv = document.createElement("div");
+      pathDiv.innerHTML = annotation.target.selector.value;
+
+      let path = pathDiv.getElementsByTagName("path")[0];
+      let d = path.getAttribute("d");
+
+      // 使用 svg-path-properties 解析曲线
+      const properties = new svgPathProperties(d);
+
+      // 周长（像素）
+      let pixelPerimeter = properties.getTotalLength();
+
+      // 离散化路径为点（越多越精确）
+      let steps = 300; // 建议 200~500
+      let freehandPoints = [];
+      for (let i = 0; i <= steps; i++) {
+        let pos = properties.getPointAtLength((i / steps) * pixelPerimeter);
+        freehandPoints.push([pos.x, pos.y]);
+      }
+
+      // 计算面积（鞋带公式）
+      let areaPixel = computeFreehandArea(freehandPoints);
+
+      // 转换单位（你的 config）
+      let realPerimeter = pixelsToPerMeter(pixelPerimeter, config);
+
+      // 面积单位转换（像素² → μm²）
+      // pixelsToPerMeter(1) = 1 像素对应多少 μm
+      let pixelToMicro = pixelsToPerMeter(1, config);
+      let realArea = areaPixel * pixelToMicro * pixelToMicro;
+
+      // 鞋带公式
+      function computeFreehandArea(freehandPoints) {
+        let sum = 0;
+        for (let i = 0; i < freehandPoints.length - 1; i++) {
+          const [x1, y1] = freehandPoints[i];
+          const [x2, y2] = freehandPoints[i + 1];
+          sum += x1 * y2 - x2 * y1;
+        }
+        return Math.abs(sum / 2);
+      }
+
+      if (firstTag) {
+        foreignObject.innerHTML = `
+          <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label-wrapper">
+            <div class="a9s-shape-label">
+              <p>${i18n.t(`length`)}:&nbsp;&nbsp;${getWithUnit(realPerimeter, "m")}</p>
+              <p>${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(realArea, "m²")}</p>
+              <p>${i18n.t(`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>${i18n.t(`length`)}:&nbsp;&nbsp;${getWithUnit(realPerimeter, "m")}</p>
+              <p>${i18n.t(`area`)}:&nbsp;&nbsp;${getWithUnit(realArea, "m²")}</p>
+            </div>
+          </div>`;
+      }
+
+      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>
+               ${i18n.t(`remark`)}:&nbsp;&nbsp;${firstTag.value}&nbsp;&nbsp;
+              </p>
+              </div>
+            </div>`;
+      }
+    // 如果没有与表达式相同的值，则执行该代码
+  }
+
+  return {
+    element: foreignObject,
+  };
+};
+
+export default ShapeLabelsFormatter;