@vertexvis/viewer 0.24.5-canary.4 → 0.24.5-canary.6

package/dist/cjs/{utils-2897cd29.js → utils-ff17f8d4.js}

@@ -142,18 +142,35 @@ function createLineAnchorStylePoints(start, end, triangleArrowAngle = 65, lineAr
     radius: radius,
   };
 }
-function arrowheadPointsToPolygonPoints(points) {
-  return [
-    points.tip,
-    points.arrowTriangle.rightPoint,
-    points.base,
-    points.arrowTriangle.leftPoint,
-  ]
+function arrowheadPointsToPolygonPoints(points, scale = 1) {
+  const scaledRight = scalePointProportional(points.tip, points.arrowTriangle.rightPoint, scale);
+  const scaledLeft = scalePointProportional(points.tip, points.arrowTriangle.leftPoint, scale);
+  const scaledBase = scalePointProportional(points.tip, points.base, scale);
+  return [points.tip, scaledRight, scaledBase, scaledLeft]
     .map((pt) => `${pt.x},${pt.y}`)
     .join(' ');
 }
-function arrowheadPointsToPathPoints(points) {
-  return `M${points.arrowLine.rightPoint.x} ${points.arrowLine.rightPoint.y} L${points.tip.x} ${points.tip.y} L${points.arrowLine.leftPoint.x} ${points.arrowLine.leftPoint.y} L${points.tip.x} ${points.tip.y} Z`;
+function arrowheadPointsToPathPoints(points, scale = 1) {
+  const scaledRight = scalePointProportional(points.tip, points.arrowLine.rightPoint, scale);
+  const scaledLeft = scalePointProportional(points.tip, points.arrowLine.leftPoint, scale);
+  return `M${scaledRight.x} ${scaledRight.y} L${points.tip.x} ${points.tip.y} L${scaledLeft.x} ${scaledLeft.y} L${points.tip.x} ${points.tip.y} Z`;
+}
+function arrowheadPointsToHashPoints(points, scale = 1) {
+  const scaledRight = scalePointProportional(points.tip, points.hash.rightPoint, scale);
+  const scaledLeft = scalePointProportional(points.tip, points.hash.leftPoint, scale);
+  return {
+    x1: scaledRight.x,
+    y1: scaledRight.y,
+    x2: scaledLeft.x,
+    y2: scaledLeft.y,
+  };
+}
+function arrowheadPointsToCirclePoints(points, scale = 1) {
+  return {
+    cx: points.tip.x,
+    cy: points.tip.y,
+    r: points.radius * scale,
+  };
 }
 function isVertexViewerArrowMarkup(el) {
   return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-ARROW');
@@ -161,6 +178,9 @@ function isVertexViewerArrowMarkup(el) {
 function parsePoint(value) {
   return typeof value === 'string' ? fromJson(value) : value;
 }
+function scalePointProportional(basePoint, scaledPoint, scale) {
+  return add(basePoint, scaleProportional(subtract(scaledPoint, basePoint), scale));
+}
 
 function isVertexViewerCircleMarkup(el) {
   return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-CIRCLE');
@@ -178,6 +198,8 @@ function isVertexViewerFreeformMarkup(el) {
   return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-FREEFORM');
 }
 
+exports.arrowheadPointsToCirclePoints = arrowheadPointsToCirclePoints;
+exports.arrowheadPointsToHashPoints = arrowheadPointsToHashPoints;
 exports.arrowheadPointsToPathPoints = arrowheadPointsToPathPoints;
 exports.arrowheadPointsToPolygonPoints = arrowheadPointsToPolygonPoints;
 exports.createLineAnchorStylePoints = createLineAnchorStylePoints;
@@ -188,4 +210,4 @@ exports.parseBounds = parseBounds;
 exports.parsePoint = parsePoint;
 exports.parsePoints = parsePoints;
 
-//# sourceMappingURL=utils-2897cd29.js.map
+//# sourceMappingURL=utils-ff17f8d4.js.map

package/dist/cjs/utils-ff17f8d4.js.map

@@ -0,0 +1 @@
+{"file":"utils-ff17f8d4.js","mappings":"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","names":["Point.orthogonalVector","Point.normalDirectionVector","Point.subtract","Point.add","Point.scaleProportional","distance","Point.distance","Angle","Point.fromJson","Rectangle","Point"],"sources":["../geometry/src/point.ts","./src/components/viewer-markup-arrow/utils.ts","./src/components/viewer-markup-circle/utils.ts","./src/components/viewer-markup-freeform/utils.ts"],"sourcesContent":["import * as Angle from './angle';\nimport { lerp as lerpNumber } from './math';\n\n/**\n * A `Point` represents a cartesian coordinate with a horizontal and vertical\n * position or length.\n */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Returns a new `Point` with the given horizontal and vertical position.\n */\nexport function create(x = 0, y = 0): Point {\n  return { x, y };\n}\n\n/**\n * Converts a polar coordinate (length and angle) into a Cartesian coordinate.\n */\nexport function polar(length: number, radians: Angle.Angle): Point {\n  const x = Math.cos(radians) * length;\n  const y = Math.sin(radians) * length;\n  return create(x, y);\n}\n\n/**\n * Returns the distance between two points.\n */\nexport function distance(a: Point, b: Point): number {\n  const delta = subtract(a, b);\n  return Math.sqrt(delta.x * delta.x + delta.y * delta.y);\n}\n\n/**\n * Returns a new `Point` where `b` is subtracted from `a`.\n */\nexport function subtract(a: Point, b: Point): Point {\n  return { x: a.x - b.x, y: a.y - b.y };\n}\n\n/**\n * Returns a new `Point` where `b` is added to `a`.\n */\nexport function add(a: Point, b: Point): Point {\n  return { x: a.x + b.x, y: a.y + b.y };\n}\n\n/**\n * Returns `true` if the `x` and `y` positions of `a` and `b` are equal.\n */\nexport function isEqual(a: Point, b: Point): boolean {\n  return a.x === b.x && a.y === b.y;\n}\n\n/**\n * Performs a linear interpolation between `a` and `b` and returns the result.\n * The value of `t` is clamped between `[0, 1]`.\n *\n * @param a The start value.\n * @param b The end value.\n * @param t A value between 0 and 1.\n * @returns A point between `a` and `b`.\n */\nexport function lerp(a: Point, b: Point, t: number): Point {\n  return {\n    x: lerpNumber(a.x, b.x, t),\n    y: lerpNumber(a.y, b.y, t),\n  };\n}\n\n/**\n * Returns a new `Point` where `x` and `y` are inverted.\n */\nexport function negate(pt: Point): Point {\n  return create(-pt.x, -pt.y);\n}\n\n/**\n * Returns a new `Point` where `x` and `y` are multiplied by the given scale\n * factors.\n */\nexport function scale(pt: Point, scaleX: number, scaleY: number): Point {\n  return {\n    x: pt.x * scaleX,\n    y: pt.y * scaleY,\n  };\n}\n\n/**\n * Returns a new `Point` where `x` and `y` are multiplied by the given scale\n * factor.\n */\nexport function scaleProportional(pt: Point, scale: number): Point {\n  return {\n    x: pt.x * scale,\n    y: pt.y * scale,\n  };\n}\n\n/**\n * Returns the magnitude of a point.\n */\nexport function magnitude(pt: Point): number {\n  return Math.sqrt(pt.x * pt.x + pt.y * pt.y);\n}\n\n/**\n * Transforms a vector into the corresponding normal (unit) vector.\n */\nexport function normalizeVector(pt: Point): Point {\n  const magnitudeOfPoint = magnitude(pt);\n  if (magnitudeOfPoint === 0) {\n    return create(0, 0);\n  } else {\n    return scaleProportional(pt, 1 / magnitudeOfPoint);\n  }\n}\n\n/**\n * Returns a new normal (unit) vector pointing between the two given points.\n */\nexport function normalDirectionVector(ptA: Point, ptB: Point): Point {\n  return normalizeVector(subtract(ptB, ptA));\n}\n\n/**\n * Returns a vector orthogonal to the vector between the two given points.\n */\nexport function orthogonalVector(ptA: Point, ptB: Point): Point {\n  const unitVectorBetweenPoints = normalDirectionVector(ptA, ptB);\n\n  // Handle vectors that are parallel to the x or y axis\n  if (unitVectorBetweenPoints.x === 0 || unitVectorBetweenPoints.y === 0) {\n    return create(-1 * unitVectorBetweenPoints.y, unitVectorBetweenPoints.x);\n  }\n\n  if (\n    Math.abs(unitVectorBetweenPoints.x) > Math.abs(unitVectorBetweenPoints.y)\n  ) {\n    const vectorXValue = 1 - Math.pow(unitVectorBetweenPoints.x, 2);\n    const vectorYValue =\n      -1 * unitVectorBetweenPoints.x * unitVectorBetweenPoints.y;\n    return normalizeVector(create(vectorXValue, vectorYValue));\n  } else {\n    const vectorXValue =\n      -1 * unitVectorBetweenPoints.x * unitVectorBetweenPoints.y;\n    const vectorYValue = 1 - Math.pow(unitVectorBetweenPoints.y, 2);\n    return normalizeVector(create(vectorXValue, vectorYValue));\n  }\n}\n\n/**\n * Parses a JSON string representation of a Point and returns an object.\n *\n * @param json A JSON string, either in the form `[x,y]` or `{\"x\": 0, \"y\": 0}`\n * @returns A parsed Point.\n */\nexport function fromJson(json: string): Point {\n  const obj = JSON.parse(json);\n  if (Array.isArray(obj)) {\n    const [x, y] = obj;\n    return create(x, y);\n  } else {\n    const { x, y } = obj;\n    return create(x, y);\n  }\n}\n","import { Angle } from '@vertexvis/geometry';\n\nimport * as Point from '../../../../geometry/src/point';\n\nexport type LineAnchorStyle =\n  | 'arrow-triangle'\n  | 'arrow-line'\n  | 'dot'\n  | 'hash'\n  | 'none';\n\nexport interface LineAnchorStylePoints {\n  tip: Point.Point;\n  base: Point.Point;\n  arrowTriangle: ArrowheadPoints;\n  arrowLine: ArrowheadPoints;\n  hash: ArrowheadPoints;\n  radius: number;\n}\n\nexport interface ArrowheadPoints {\n  leftPoint: Point.Point;\n  rightPoint: Point.Point;\n}\n\nexport interface LinePoints {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n}\n\nexport interface CirclePoints {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport function createArrowheadPoints(\n  start: Point.Point,\n  end: Point.Point,\n  arrowSideLength: number,\n  arrowHeadTheta: number\n): ArrowheadPoints {\n  const arrowOrthogonalVector = Point.orthogonalVector(start, end);\n  const normalizedDirection = Point.normalDirectionVector(start, end);\n\n  const arrowLeft = Point.subtract(\n    end,\n    Point.add(\n      Point.scaleProportional(\n        normalizedDirection,\n        arrowSideLength * Math.cos(arrowHeadTheta)\n      ),\n      Point.scaleProportional(\n        arrowOrthogonalVector,\n        arrowSideLength * Math.sin(arrowHeadTheta)\n      )\n    )\n  );\n  const arrowRight = Point.subtract(\n    end,\n    Point.subtract(\n      Point.scaleProportional(\n        normalizedDirection,\n        arrowSideLength * Math.cos(arrowHeadTheta)\n      ),\n      Point.scaleProportional(\n        arrowOrthogonalVector,\n        arrowSideLength * Math.sin(arrowHeadTheta)\n      )\n    )\n  );\n\n  return {\n    leftPoint: arrowLeft,\n    rightPoint: arrowRight,\n  };\n}\n\nexport function createLineAnchorStylePoints(\n  start: Point.Point,\n  end: Point.Point,\n  triangleArrowAngle = 65,\n  lineArrowAngle = 85\n): LineAnchorStylePoints {\n  // Adjust the size of the end style to the distance between the start and end points\n  const distance = Point.distance(start, end);\n  const arrowHeadHeight = Math.max(4, Math.min(16, distance * 0.25));\n  const hashHeight = Math.max(4, Math.min(12, distance * 0.16));\n  const radius = Math.min(5, distance * 0.1);\n\n  // Triangle arrow position\n  const triangleArrowRelativeHeight = arrowHeadHeight / distance;\n  const triangleArrowBasePosition = Point.add(\n    Point.scaleProportional(end, 1 - triangleArrowRelativeHeight),\n    Point.scaleProportional(start, triangleArrowRelativeHeight)\n  );\n  const triangleArrowTheta = Angle.toRadians(triangleArrowAngle / 2);\n  const triangleArrowSideLength =\n    arrowHeadHeight / Math.cos(triangleArrowTheta);\n  const triangleArrow = createArrowheadPoints(\n    start,\n    end,\n    triangleArrowSideLength,\n    triangleArrowTheta\n  );\n\n  // Line arrow position\n  const lineArrowTheta = Angle.toRadians(lineArrowAngle / 2);\n  const lineArrowSideLength = arrowHeadHeight / Math.cos(lineArrowTheta);\n  const lineArrow = createArrowheadPoints(\n    start,\n    end,\n    lineArrowSideLength,\n    lineArrowTheta\n  );\n\n  // Hash position\n  // Setting the arrowHeadAngle to 90 degrees results in a\n  // straight hash mark perpendicular to the direction of the line\n  const hashLineTheta = Angle.toRadians(90);\n  const hashLine = createArrowheadPoints(start, end, hashHeight, hashLineTheta);\n\n  return {\n    tip: end,\n    base: triangleArrowBasePosition,\n    arrowTriangle: triangleArrow,\n    arrowLine: lineArrow,\n    hash: hashLine,\n    radius: radius,\n  };\n}\n\nexport function arrowheadPointsToPolygonPoints(\n  points: LineAnchorStylePoints,\n  scale = 1\n): string {\n  const scaledRight = scalePointProportional(\n    points.tip,\n    points.arrowTriangle.rightPoint,\n    scale\n  );\n  const scaledLeft = scalePointProportional(\n    points.tip,\n    points.arrowTriangle.leftPoint,\n    scale\n  );\n  const scaledBase = scalePointProportional(points.tip, points.base, scale);\n\n  return [points.tip, scaledRight, scaledBase, scaledLeft]\n    .map((pt) => `${pt.x},${pt.y}`)\n    .join(' ');\n}\n\nexport function arrowheadPointsToPathPoints(\n  points: LineAnchorStylePoints,\n  scale = 1\n): string {\n  const scaledRight = scalePointProportional(\n    points.tip,\n    points.arrowLine.rightPoint,\n    scale\n  );\n  const scaledLeft = scalePointProportional(\n    points.tip,\n    points.arrowLine.leftPoint,\n    scale\n  );\n\n  return `M${scaledRight.x} ${scaledRight.y} L${points.tip.x} ${points.tip.y} L${scaledLeft.x} ${scaledLeft.y} L${points.tip.x} ${points.tip.y} Z`;\n}\n\nexport function arrowheadPointsToHashPoints(\n  points: LineAnchorStylePoints,\n  scale = 1\n): LinePoints {\n  const scaledRight = scalePointProportional(\n    points.tip,\n    points.hash.rightPoint,\n    scale\n  );\n  const scaledLeft = scalePointProportional(\n    points.tip,\n    points.hash.leftPoint,\n    scale\n  );\n\n  return {\n    x1: scaledRight.x,\n    y1: scaledRight.y,\n    x2: scaledLeft.x,\n    y2: scaledLeft.y,\n  };\n}\n\nexport function arrowheadPointsToCirclePoints(\n  points: LineAnchorStylePoints,\n  scale = 1\n): CirclePoints {\n  return {\n    cx: points.tip.x,\n    cy: points.tip.y,\n    r: points.radius * scale,\n  };\n}\n\nexport function isVertexViewerArrowMarkup(\n  el: unknown\n): el is HTMLVertexViewerMarkupArrowElement {\n  return (\n    el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-ARROW'\n  );\n}\n\nexport function parsePoint(\n  value: string | Point.Point | undefined\n): Point.Point | undefined {\n  return typeof value === 'string' ? Point.fromJson(value) : value;\n}\n\nexport function scalePointProportional(\n  basePoint: Point.Point,\n  scaledPoint: Point.Point,\n  scale: number\n): Point.Point {\n  return Point.add(\n    basePoint,\n    Point.scaleProportional(Point.subtract(scaledPoint, basePoint), scale)\n  );\n}\n","import { Rectangle } from '@vertexvis/geometry';\n\nexport function isVertexViewerCircleMarkup(\n  el: unknown\n): el is HTMLVertexViewerMarkupCircleElement {\n  return (\n    el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-CIRCLE'\n  );\n}\n\nexport function parseBounds(\n  value: string | Rectangle.Rectangle | undefined\n): Rectangle.Rectangle | undefined {\n  return typeof value === 'string' ? Rectangle.fromJson(value) : value;\n}\n","import { Point } from '@vertexvis/geometry';\n\nexport function parsePoints(\n  value: string | Point.Point[] | undefined\n): Point.Point[] | undefined {\n  return typeof value === 'string'\n    ? JSON.parse(value).map((values: number[]) =>\n        Point.fromJson(JSON.stringify(values))\n      )\n    : value;\n}\n\nexport function isVertexViewerFreeformMarkup(\n  el: unknown\n): el is HTMLVertexViewerMarkupFreeformElement {\n  return (\n    el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-FREEFORM'\n  );\n}\n"],"version":3}

package/dist/cjs/vertex-viewer-markup-arrow_3.cjs.entry.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0abd8b0b.js');
 const dom$1 = require('./dom-85958197.js');
+const stencil = require('./stencil-40ef9119.js');
 const dom = require('./dom-fd009abb.js');
 const bundle_esm = require('./bundle.esm-6a7f35c7.js');
-const utils = require('./utils-2897cd29.js');
+const utils = require('./utils-ff17f8d4.js');
 const index$1 = require('./index-bdd914aa.js');
 require('./_commonjsHelpers-03d93eda.js');
 
@@ -306,7 +307,7 @@ const BoundingBox1d = ({ start, end, offset, onStartAnchorPointerDown, onCenterA
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-center-anchor') }))));
 };
 
-const viewerMarkupArrowCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-arrow-line-stroke-color:var(--red-800);--viewer-markup-arrow-line-stroke-width:4;--viewer-markup-arrow-head-stroke-color:var(--red-800);--viewer-markup-arrow-head-stroke-width:4;--viewer-markup-arrow-head-fill-color:var(--red-800);--viewer-markup-arrow-head-fill-opacity:1;--viewer-markup-arrow-bounds-cap-border-color:var(--blue-400);--viewer-markup-arrow-bounds-cap-border-width:1px;--viewer-markup-arrow-bounds-cap-background-color:white;--viewer-markup-arrow-bounds-center-anchor-border-color:white;--viewer-markup-arrow-bounds-center-anchor-border-width:1px;--viewer-markup-arrow-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-arrow-bounds-outline-width:1px;--viewer-markup-arrow-bounds-outline-color:var(--blue-400);--viewer-markup-arrow-bounds-anchor-width:9px;--viewer-markup-arrow-bounds-anchor-height:9px}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.line{pointer-events:auto;stroke:var(--viewer-markup-arrow-line-stroke-color);stroke-width:var(--viewer-markup-arrow-line-stroke-width);cursor:default}.head{pointer-events:auto;stroke:var(--viewer-markup-arrow-head-stroke-color);stroke-width:var(--viewer-markup-arrow-head-stroke-width);fill:var(--viewer-markup-arrow-head-fill-color);fill-opacity:var(--viewer-markup-arrow-head-fill-opacity);cursor:default}.bounds-line{pointer-events:auto;stroke:var(--viewer-markup-arrow-bounds-outline-color);stroke-width:var(--viewer-markup-arrow-bounds-outline-width)}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-arrow-bounds-anchor-width);height:var(--viewer-markup-arrow-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-arrow-bounds-center-anchor-border-width);border-color:var(--viewer-markup-arrow-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-center-anchor-background-color)}.bounds-cap-anchor{border-width:var(--viewer-markup-arrow-bounds-cap-border-width);border-color:var(--viewer-markup-arrow-bounds-cap-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-cap-background-color)}";
+const viewerMarkupArrowCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-arrow-line-stroke-color:var(--red-800);--viewer-markup-arrow-line-stroke-width:4px;--viewer-markup-arrow-head-stroke-color:var(--red-800);--viewer-markup-arrow-head-stroke-width:4px;--viewer-markup-arrow-head-fill-color:var(--red-800);--viewer-markup-arrow-head-fill-opacity:1;--viewer-markup-arrow-bounds-cap-border-color:var(--blue-400);--viewer-markup-arrow-bounds-cap-border-width:1px;--viewer-markup-arrow-bounds-cap-background-color:white;--viewer-markup-arrow-bounds-center-anchor-border-color:white;--viewer-markup-arrow-bounds-center-anchor-border-width:1px;--viewer-markup-arrow-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-arrow-bounds-outline-width:1px;--viewer-markup-arrow-bounds-outline-color:var(--blue-400);--viewer-markup-arrow-bounds-anchor-width:9px;--viewer-markup-arrow-bounds-anchor-height:9px;--viewer-markup-arrow-scale:1}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.line{pointer-events:auto;stroke:var(--viewer-markup-arrow-line-stroke-color);stroke-width:calc(var(--viewer-markup-arrow-line-stroke-width) * var(--viewer-markup-arrow-scale));cursor:default}.head{pointer-events:auto;stroke:var(--viewer-markup-arrow-head-stroke-color);stroke-width:calc(var(--viewer-markup-arrow-head-stroke-width) * var(--viewer-markup-arrow-scale));fill:var(--viewer-markup-arrow-head-fill-color);fill-opacity:var(--viewer-markup-arrow-head-fill-opacity);cursor:default}.bounds-line{pointer-events:auto;stroke:var(--viewer-markup-arrow-bounds-outline-color);stroke-width:var(--viewer-markup-arrow-bounds-outline-width)}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-arrow-bounds-anchor-width);height:var(--viewer-markup-arrow-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-arrow-bounds-center-anchor-border-width);border-color:var(--viewer-markup-arrow-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-center-anchor-background-color)}.bounds-cap-anchor{border-width:var(--viewer-markup-arrow-bounds-cap-border-width);border-color:var(--viewer-markup-arrow-bounds-cap-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-cap-background-color)}";
 
 const ViewerMarkupArrow = class {
   constructor(hostRef) {
@@ -326,6 +327,13 @@ const ViewerMarkupArrow = class {
      * - `none`: Markup will not be centered (default).
      */
     this.centeringBehavior = 'none';
+    /**
+     * The scale to render this markup at. This value is used to scale the element's bounds
+     * along with any `offset` to determine the final computed coordinates.
+     *
+     * When provided, all computed coordinates will be scaled by this amount.
+     */
+    this.scale = 1;
     /**
      * The style of the starting anchor. This defaults to none.
      */
@@ -404,6 +412,12 @@ const ViewerMarkupArrow = class {
       window.removeEventListener('pointerdown', this.handleWindowPointerDown);
     }
   }
+  handleScaleChange() {
+    stencil.writeDOM(() => {
+      var _a, _b;
+      this.hostEl.style.setProperty('--viewer-markup-arrow-scale', (_b = (_a = this.scale) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '1');
+    });
+  }
   updateViewport() {
     const rect = dom.getMarkupBoundingClientRect(this.hostEl);
     this.elementBounds = rect;
@@ -414,30 +428,31 @@ const ViewerMarkupArrow = class {
   }
   renderLineAnchorStyle(anchorStyle, arrowheadPoints) {
     if (anchorStyle === 'arrow-triangle') {
-      return (index.h("polygon", { id: "line-anchor-arrow-triangle", class: "head", points: utils.arrowheadPointsToPolygonPoints(arrowheadPoints) }));
+      return (index.h("polygon", { id: "line-anchor-arrow-triangle", class: "head", points: utils.arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale) }));
     }
     else if (anchorStyle === 'arrow-line') {
-      return (index.h("path", { id: "line-anchor-arrow-line", class: "head", d: utils.arrowheadPointsToPathPoints(arrowheadPoints) }));
+      return (index.h("path", { id: "line-anchor-arrow-line", class: "head", d: utils.arrowheadPointsToPathPoints(arrowheadPoints, this.scale) }));
     }
     else if (anchorStyle === 'hash') {
-      return (index.h("line", { id: "line-anchor-hash", class: "head", x1: arrowheadPoints.hash.leftPoint.x, y1: arrowheadPoints.hash.leftPoint.y, x2: arrowheadPoints.hash.rightPoint.x, y2: arrowheadPoints.hash.rightPoint.y }));
+      const hashPoints = utils.arrowheadPointsToHashPoints(arrowheadPoints, this.scale);
+      return index.h("line", { id: "line-anchor-hash", class: "head", ...hashPoints });
     }
     else if (anchorStyle === 'dot') {
-      return (index.h("circle", { id: "line-anchor-circle", class: "head", cx: arrowheadPoints.tip.x, cy: arrowheadPoints.tip.y, r: arrowheadPoints.radius }));
+      const circlePoints = utils.arrowheadPointsToCirclePoints(arrowheadPoints, this.scale);
+      return index.h("circle", { id: "line-anchor-circle", class: "head", ...circlePoints });
     }
     else {
       return index.h("div", null);
     }
   }
   render() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (this.start != null && this.end != null && this.elementBounds != null) {
       const elementBounds = this.elementBounds;
-      const effectiveScale = (_a = this.scale) !== null && _a !== void 0 ? _a : 1;
-      const offsetX = ((_c = (_b = this.offset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) / dom$1.getWindowDevicePixelRatio();
-      const offsetY = ((_e = (_d = this.offset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0) / dom$1.getWindowDevicePixelRatio();
-      const screenStart = translatePointToScreen(this.start, elementBounds, this.originatingViewport, this.centeringBehavior, effectiveScale);
-      const screenEnd = translatePointToScreen(this.end, elementBounds, this.originatingViewport, this.centeringBehavior, effectiveScale);
+      const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / dom$1.getWindowDevicePixelRatio();
+      const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / dom$1.getWindowDevicePixelRatio();
+      const screenStart = translatePointToScreen(this.start, elementBounds, this.originatingViewport, this.centeringBehavior, this.scale);
+      const screenEnd = translatePointToScreen(this.end, elementBounds, this.originatingViewport, this.centeringBehavior, this.scale);
       if (isValidPointData(screenStart, screenEnd)) {
         const arrowheadStartPoints = utils.createLineAnchorStylePoints(screenEnd, screenStart);
         const arrowheadEndPoints = utils.createLineAnchorStylePoints(screenStart, screenEnd);
@@ -456,7 +471,8 @@ const ViewerMarkupArrow = class {
     "viewer": ["handleViewerChanged"],
     "start": ["handleStartJsonChange"],
     "end": ["handleEndJsonChange"],
-    "mode": ["handleModeChange"]
+    "mode": ["handleModeChange"],
+    "scale": ["handleScaleChange"]
   }; }
 };
 ViewerMarkupArrow.style = viewerMarkupArrowCss;
@@ -559,7 +575,7 @@ const BoundingBox2d = ({ bounds, offset, onTopLeftAnchorPointerDown, onLeftAncho
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-center-anchor') }))));
 };
 
-const viewerMarkupCircleCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-circle-ellipse-stroke-color:var(--red-700);--viewer-markup-circle-ellipse-stroke-width:4;--viewer-markup-circle-ellipse-fill-color:none;--viewer-markup-circle-ellipse-fill-opacity:0;--viewer-markup-circle-bounds-outline-border-color:var(--blue-400);--viewer-markup-circle-bounds-outline-border-width:1px;--viewer-markup-circle-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-circle-bounds-edge-anchor-border-width:1px;--viewer-markup-circle-bounds-edge-anchor-background-color:white;--viewer-markup-circle-bounds-center-anchor-border-color:white;--viewer-markup-circle-bounds-center-anchor-border-width:1px;--viewer-markup-circle-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-circle-bounds-anchor-width:9px;--viewer-markup-circle-bounds-anchor-height:9px}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.ellipse{pointer-events:auto;stroke:var(--viewer-markup-circle-ellipse-stroke-color);stroke-width:var(--viewer-markup-circle-ellipse-stroke-width);fill:var(--viewer-markup-circle-ellipse-fill-color);fill-opacity:var(--viewer-markup-circle-ellipse-fill-opacity);cursor:default}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-circle-bounds-outline-border-width);border-color:var(--viewer-markup-circle-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-circle-bounds-anchor-width);height:var(--viewer-markup-circle-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-circle-bounds-center-anchor-border-width);border-color:var(--viewer-markup-circle-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-circle-bounds-center-anchor-background-color)}.bounds-edge-anchor{border-width:var(--viewer-markup-circle-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-circle-bounds-edge-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-circle-bounds-edge-anchor-background-color)}";
+const viewerMarkupCircleCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-circle-ellipse-stroke-color:var(--red-700);--viewer-markup-circle-ellipse-stroke-width:4px;--viewer-markup-circle-ellipse-fill-color:none;--viewer-markup-circle-ellipse-fill-opacity:0;--viewer-markup-circle-bounds-outline-border-color:var(--blue-400);--viewer-markup-circle-bounds-outline-border-width:1px;--viewer-markup-circle-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-circle-bounds-edge-anchor-border-width:1px;--viewer-markup-circle-bounds-edge-anchor-background-color:white;--viewer-markup-circle-bounds-center-anchor-border-color:white;--viewer-markup-circle-bounds-center-anchor-border-width:1px;--viewer-markup-circle-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-circle-bounds-anchor-width:9px;--viewer-markup-circle-bounds-anchor-height:9px;--viewer-markup-circle-scale:1}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.ellipse{pointer-events:auto;stroke:var(--viewer-markup-circle-ellipse-stroke-color);stroke-width:calc(var(--viewer-markup-circle-ellipse-stroke-width) * var(--viewer-markup-circle-scale));fill:var(--viewer-markup-circle-ellipse-fill-color);fill-opacity:var(--viewer-markup-circle-ellipse-fill-opacity);cursor:default}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-circle-bounds-outline-border-width);border-color:var(--viewer-markup-circle-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-circle-bounds-anchor-width);height:var(--viewer-markup-circle-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-circle-bounds-center-anchor-border-width);border-color:var(--viewer-markup-circle-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-circle-bounds-center-anchor-background-color)}.bounds-edge-anchor{border-width:var(--viewer-markup-circle-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-circle-bounds-edge-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-circle-bounds-edge-anchor-background-color)}";
 
 const ViewerMarkupCircle = class {
   constructor(hostRef) {
@@ -587,6 +603,13 @@ const ViewerMarkupCircle = class {
      * - `none`: Markup will not be centered (default).
      */
     this.centeringBehavior = 'none';
+    /**
+     * The scale to render this markup at. This value is used to scale the element's bounds
+     * along with any `offset` to determine the final computed coordinates.
+     *
+     * When provided, all computed coordinates will be scaled by this amount.
+     */
+    this.scale = 1;
     this.interactionHandler = new CircleMarkupInteractionHandler(this.hostEl, this.interactionBegin, this.interactionEnd);
     this.handleWindowPointerDown = (event) => {
       if (isValidStartEvent(event)) {
@@ -646,6 +669,11 @@ const ViewerMarkupCircle = class {
       window.removeEventListener('pointerdown', this.handleWindowPointerDown);
     }
   }
+  handleScaleChange() {
+    stencil.writeDOM(() => {
+      this.hostEl.style.setProperty('--viewer-markup-circle-scale', this.scale.toString());
+    });
+  }
   updateViewport() {
     const rect = dom.getMarkupBoundingClientRect(this.hostEl);
     this.elementBounds = rect;
@@ -655,13 +683,12 @@ const ViewerMarkupCircle = class {
     this.bounds = (_a = this.bounds) !== null && _a !== void 0 ? _a : utils.parseBounds(this.boundsJson);
   }
   render() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (this.bounds != null && this.elementBounds != null) {
-      const effectiveScale = (_a = this.scale) !== null && _a !== void 0 ? _a : 1;
-      const relativeBounds = translateRectToScreen(this.bounds, this.elementBounds, this.originatingViewport, this.centeringBehavior, effectiveScale);
+      const relativeBounds = translateRectToScreen(this.bounds, this.elementBounds, this.originatingViewport, this.centeringBehavior, this.scale);
       const center = bundle_esm.rectangle.center(relativeBounds);
-      const offsetX = ((_c = (_b = this.offset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) / dom$1.getWindowDevicePixelRatio();
-      const offsetY = ((_e = (_d = this.offset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0) / dom$1.getWindowDevicePixelRatio();
+      const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / dom$1.getWindowDevicePixelRatio();
+      const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / dom$1.getWindowDevicePixelRatio();
       return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "circle-shadow" })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#circle-shadow)" }, index.h("ellipse", { class: "ellipse", cx: center.x, cy: center.y, rx: relativeBounds.width / 2, ry: relativeBounds.height / 2, stroke: '#000ff0', "stroke-width": 4, fill: 'none' }))), this.mode === 'edit' && (index.h(BoundingBox2d, { bounds: relativeBounds, offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
     }
     else {
@@ -672,7 +699,8 @@ const ViewerMarkupCircle = class {
   static get watchers() { return {
     "viewer": ["handleViewerChanged"],
     "bounds": ["handleBoundsJsonChange"],
-    "mode": ["handleModeChange"]
+    "mode": ["handleModeChange"],
+    "scale": ["handleScaleChange"]
   }; }
 };
 ViewerMarkupCircle.style = viewerMarkupCircleCss;
@@ -777,7 +805,7 @@ class FreeformMarkupInteractionHandler extends MarkupInteractionHandler {
   }
 }
 
-const viewerMarkupFreeformCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-freeform-stroke-color:var(--red-800);--viewer-markup-freeform-stroke-width:4;--viewer-markup-freeform-line-join:round;--viewer-markup-freeform-line-cap:round;--viewer-markup-freeform-bounds-outline-border-color:var(--blue-400);--viewer-markup-freeform-bounds-outline-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-freeform-bounds-edge-anchor-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-background-color:white;--viewer-markup-freeform-bounds-center-anchor-border-color:white;--viewer-markup-freeform-bounds-center-anchor-border-width:1px;--viewer-markup-freeform-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-freeform-bounds-anchor-width:9px;--viewer-markup-freeform-bounds-anchor-height:9px}.svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.path{pointer-events:auto;cursor:default;stroke:var(--viewer-markup-freeform-stroke-color);stroke-width:var(--viewer-markup-freeform-stroke-width);stroke-linejoin:var(--viewer-markup-freeform-line-join);stroke-linecap:var(--viewer-markup-freeform-line-cap)}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-freeform-bounds-outline-border-width);border-color:var(--viewer-markup-freeform-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-freeform-bounds-anchor-width);height:var(--viewer-markup-freeform-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-freeform-bounds-center-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-freeform-bounds-center-anchor-background-color)}.bounds-edge-anchor{border-width:var(--viewer-markup-freeform-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-edge-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-freeform-bounds-edge-anchor-background-color)}";
+const viewerMarkupFreeformCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-freeform-stroke-color:var(--red-800);--viewer-markup-freeform-stroke-width:4px;--viewer-markup-freeform-line-join:round;--viewer-markup-freeform-line-cap:round;--viewer-markup-freeform-bounds-outline-border-color:var(--blue-400);--viewer-markup-freeform-bounds-outline-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-freeform-bounds-edge-anchor-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-background-color:white;--viewer-markup-freeform-bounds-center-anchor-border-color:white;--viewer-markup-freeform-bounds-center-anchor-border-width:1px;--viewer-markup-freeform-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-freeform-bounds-anchor-width:9px;--viewer-markup-freeform-bounds-anchor-height:9px;--viewer-markup-freeform-scale:1}.svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.path{pointer-events:auto;cursor:default;stroke:var(--viewer-markup-freeform-stroke-color);stroke-width:calc(var(--viewer-markup-freeform-stroke-width) * var(--viewer-markup-freeform-scale));stroke-linejoin:var(--viewer-markup-freeform-line-join);stroke-linecap:var(--viewer-markup-freeform-line-cap)}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-freeform-bounds-outline-border-width);border-color:var(--viewer-markup-freeform-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-freeform-bounds-anchor-width);height:var(--viewer-markup-freeform-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-freeform-bounds-center-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-freeform-bounds-center-anchor-background-color)}.bounds-edge-anchor{border-width:var(--viewer-markup-freeform-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-edge-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-freeform-bounds-edge-anchor-background-color)}";
 
 const ViewerMarkupFreeform = class {
   constructor(hostRef) {
@@ -805,6 +833,13 @@ const ViewerMarkupFreeform = class {
      * - `none`: Markup will not be centered (default).
      */
     this.centeringBehavior = 'none';
+    /**
+     * The scale to render this markup at. This value is used to scale the element's bounds
+     * along with any `offset` to determine the final computed coordinates.
+     *
+     * When provided, all computed coordinates will be scaled by this amount.
+     */
+    this.scale = 1;
     this.screenPoints = [];
     this.interactionHandler = new FreeformMarkupInteractionHandler(this.hostEl, this.interactionBegin, this.interactionEnd);
     this.handleWindowPointerDown = (event) => {
@@ -859,6 +894,11 @@ const ViewerMarkupFreeform = class {
   recomputePointsFromProps() {
     this.updatePointsFromProps();
   }
+  handleScaleChange() {
+    stencil.writeDOM(() => {
+      this.hostEl.style.setProperty('--viewer-markup-freeform-scale', this.scale.toString());
+    });
+  }
   handleModeChange() {
     if (this.mode !== 'create') {
       window.removeEventListener('pointerdown', this.handleWindowPointerDown);
@@ -877,11 +917,11 @@ const ViewerMarkupFreeform = class {
     this.bounds = (_c = this.bounds) !== null && _c !== void 0 ? _c : utils.parseBounds(this.boundsJson);
   }
   render() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (this.screenPoints.length > 0 && this.elementBounds != null) {
       const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / dom$1.getWindowDevicePixelRatio();
       const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / dom$1.getWindowDevicePixelRatio();
-      return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "freeform-markup-shadow" })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#freeform-markup-shadow)" }, index.h("path", { class: "path", d: this.screenPoints.reduce((d, pt) => `${d}L${pt.x},${pt.y}`, `M${this.screenPoints[0].x},${this.screenPoints[0].y}`), fill: "none" }))), this.mode === 'edit' && this.bounds != null && (index.h(BoundingBox2d, { bounds: translateRectToScreen(this.bounds, this.elementBounds, this.originatingViewport, this.centeringBehavior, (_e = this.scale) !== null && _e !== void 0 ? _e : 1), offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+      return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "freeform-markup-shadow" })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#freeform-markup-shadow)" }, index.h("path", { class: "path", d: this.screenPoints.reduce((d, pt) => `${d}L${pt.x},${pt.y}`, `M${this.screenPoints[0].x},${this.screenPoints[0].y}`), fill: "none" }))), this.mode === 'edit' && this.bounds != null && (index.h(BoundingBox2d, { bounds: translateRectToScreen(this.bounds, this.elementBounds, this.originatingViewport, this.centeringBehavior, this.scale), offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
     }
     else {
       return (index.h(index.Host, null, index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));
@@ -891,10 +931,7 @@ const ViewerMarkupFreeform = class {
     var _a;
     const elementBounds = this.elementBounds;
     if (elementBounds != null) {
-      return (_a = this.points) === null || _a === void 0 ? void 0 : _a.map((pt) => {
-        var _a;
-        return translatePointToScreen(pt, elementBounds, this.originatingViewport, this.centeringBehavior, (_a = this.scale) !== null && _a !== void 0 ? _a : 1);
-      });
+      return (_a = this.points) === null || _a === void 0 ? void 0 : _a.map((pt) => translatePointToScreen(pt, elementBounds, this.originatingViewport, this.centeringBehavior, this.scale));
     }
   }
   get hostEl() { return index.getElement(this); }
@@ -902,7 +939,7 @@ const ViewerMarkupFreeform = class {
     "viewer": ["handleViewerChanged"],
     "originatingViewport": ["recomputePointsFromProps"],
     "offset": ["recomputePointsFromProps"],
-    "scale": ["recomputePointsFromProps"],
+    "scale": ["recomputePointsFromProps", "handleScaleChange"],
     "bounds": ["recomputePointsFromProps"],
     "points": ["recomputePointsFromProps"],
     "mode": ["handleModeChange"]