@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

package/dist/cjs/vertex-viewer-dom-group.cjs.entry.js

@@ -0,0 +1,191 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4138aa2c.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const browser_esm = require('./browser.esm-0bcdc581.js');
+
+const viewerDomGroupCss = ":host{display:block;transform-style:preserve-3d}";
+
+let ViewerDomGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.propertyChange = index.createEvent(this, "propertyChange", 7);
+    /**
+     * The local 3D position of where this element is located.
+     */
+    this.position = bundle_esm.vector3.origin();
+    /**
+     * The local 3D position of where this element is located, as a JSON string.
+     * JSON representation can either be in the format of `[x, y, z]` or `{"x": 0,
+     * "y": 0, "z": 0}`.
+     */
+    this.positionJson = '';
+    /**
+     * The local rotation of this element.
+     */
+    this.quaternion = bundle_esm.quaternion.create();
+    /**
+     * The local rotation of this element, as a JSON string. JSON
+     * representation can either be `[x, y, z, w]` or `{"x": 0, "y": 0, "z":
+     * 0, "w": 1}`.
+     */
+    this.quaternionJson = '';
+    /**
+     * The local scale of this element.
+     */
+    this.scale = bundle_esm.vector3.create(1, 1, 1);
+    /**
+     * The local scale of this element, as a JSON string. JSON string
+     * representation can either be in the format of `[x, y, z]` or `{"x": 0, "y":
+     * 0, "z": 0}`.
+     */
+    this.scaleJson = '';
+    /**
+     * The local matrix of this element.
+     */
+    this.matrix = bundle_esm.matrix4.makeIdentity();
+  }
+  /**
+   * @ignore
+   */
+  handlePositionChange() {
+    this.syncMatrix();
+  }
+  /**
+   * @ignore
+   */
+  handlePositionJsonChanged() {
+    this.syncPosition();
+  }
+  /**
+   * @ignore
+   */
+  handleRotationChanged() {
+    this.syncQuaternionWithRotation();
+  }
+  /**
+   * @ignore
+   */
+  handleRotationJsonChanged() {
+    this.syncRotation();
+  }
+  /**
+   * @ignore
+   */
+  handleQuaternionChange() {
+    this.syncMatrix();
+  }
+  /**
+   * @ignore
+   */
+  handleQuaternionJsonChanged() {
+    this.syncQuaternion();
+  }
+  /**
+   * @ignore
+   */
+  handleScaleChange() {
+    this.syncMatrix();
+  }
+  /**
+   * @ignore
+   */
+  handleScaleJsonChanged() {
+    this.syncScale();
+  }
+  /**
+   * @ignore
+   */
+  handleMatrixChanged(newMatrix, oldMatrix) {
+    if (!browser_esm.objects.isEqual(newMatrix, oldMatrix)) {
+      this.propertyChange.emit();
+    }
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.syncProperties();
+  }
+  /**
+   * @ignore
+   */
+  componentShouldUpdate() {
+    return false;
+  }
+  syncProperties() {
+    this.syncPosition();
+    this.syncRotation();
+    this.syncQuaternion();
+    this.syncScale();
+    this.syncMatrix();
+  }
+  syncPosition() {
+    this.position =
+      this.positionJson.length > 0
+        ? this.parseJson('positionJson', this.positionJson, bundle_esm.vector3.fromJson)
+        : this.position;
+  }
+  syncRotation() {
+    this.rotation =
+      this.rotationJson != null && this.rotationJson.length > 0
+        ? this.parseJson('rotationJson', this.rotationJson, bundle_esm.euler.fromJson)
+        : this.rotation;
+    this.syncQuaternionWithRotation();
+  }
+  syncQuaternionWithRotation() {
+    this.quaternion =
+      this.rotation != null
+        ? bundle_esm.quaternion.fromEuler(this.rotation)
+        : this.quaternion;
+  }
+  syncQuaternion() {
+    this.quaternion =
+      this.quaternionJson.length > 0
+        ? this.parseJson('quaternionJson', this.quaternionJson, bundle_esm.quaternion.fromJson)
+        : this.quaternion;
+  }
+  syncScale() {
+    this.scale =
+      this.scaleJson.length > 0
+        ? this.parseJson('scaleJson', this.scaleJson, bundle_esm.vector3.fromJson)
+        : this.scale;
+  }
+  syncMatrix() {
+    this.matrix = bundle_esm.matrix4.makeTRS(this.position, this.quaternion, this.scale);
+  }
+  parseJson(propName, value, parse) {
+    try {
+      return parse(value);
+    }
+    catch (e) {
+      console.warn(`Could not parse \`${propName}\`. Invalid JSON.`);
+      throw e;
+    }
+  }
+  /**
+   * @ignore
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  static get watchers() { return {
+    "position": ["handlePositionChange"],
+    "positionJson": ["handlePositionJsonChanged"],
+    "rotation": ["handleRotationChanged"],
+    "rotationJson": ["handleRotationJsonChanged"],
+    "quaternion": ["handleQuaternionChange"],
+    "quaternionJson": ["handleQuaternionJsonChanged"],
+    "scale": ["handleScaleChange"],
+    "scaleJson": ["handleScaleJsonChanged"],
+    "matrix": ["handleMatrixChanged"]
+  }; }
+};
+ViewerDomGroup.style = viewerDomGroupCss;
+
+exports.vertex_viewer_dom_group = ViewerDomGroup;

package/dist/cjs/vertex-viewer-icon.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const index$1 = require('./index-3bc6bac0.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-4138aa2c.js');
+const index$1 = require('./index-b9d13137.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 const viewerIconCss = ":host{display:inline-block;width:1em;height:1em;fill:currentColor}:host(.size-sm){font-size:16px}:host(.size-md){font-size:24px}:host(.size-lg){font-size:32px}svg{display:block;width:100%;height:100%}";
 
@@ -52,6 +52,9 @@ let ViewerIcon = class {
     else if (this.name === 'close-circle') {
       return this.renderSvgIcon(index.h("path", { d: "M8 1a7 7 0 107 7 7 7 0 00-7-7zm2.85 9.15a.49.49 0 01-.7.7L8 8.71l-2.15 2.14a.49.49 0 01-.7-.7L7.29 8 5.15 5.85a.49.49 0 01.7-.7L8 7.29l2.15-2.14a.49.49 0 01.7.7L8.71 8z" }));
     }
+    else if (this.name === 'pin-fill') {
+      return this.renderSvgIcon(index.h("path", { d: "M8,.55A5.9,5.9,0,0,0,2.1,6.44a9.14,9.14,0,0,0,2.66,6.24,11.44,11.44,0,0,0,1.93,1.65,7.43,7.43,0,0,0,.73.44l.28.12a.78.78,0,0,0,.6,0,6.65,6.65,0,0,0,1.34-.79,11.79,11.79,0,0,0,2.76-2.88,8.59,8.59,0,0,0,1.5-4.78A5.9,5.9,0,0,0,8,.55ZM8,8.44a2,2,0,1,1,2-2A2,2,0,0,1,8,8.44Z" }));
+    }
     else {
       return index.h("svg", null);
     }

package/dist/cjs/vertex-viewer-layer.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 
 const viewerLayerCss = ":host{pointer-events:none;overflow:hidden}:host(:not([stretch-off])){position:absolute;left:0;right:0;top:0;bottom:0}";
 

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

@@ -5,161 +5,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
-const dom = require('./dom-57ef84e9.js');
-const utils = require('./utils-6397efca.js');
-const index$1 = require('./index-3bc6bac0.js');
-require('./_commonjsHelpers-537d719a.js');
-
-function getMarkupBoundingClientRect(element) {
-  return element.getBoundingClientRect();
-}
-
-function getBoundingBox2dAnchorPosition(rect, position) {
-  switch (position) {
-    case 'top-left':
-      return bundle_esm.point.create(rect.x, rect.y);
-    case 'top':
-      return bundle_esm.point.create(rect.x + rect.width / 2, rect.y);
-    case 'top-right':
-      return bundle_esm.point.create(rect.x + rect.width, rect.y);
-    case 'right':
-      return bundle_esm.point.create(rect.x + rect.width, rect.y + rect.height / 2);
-    case 'bottom-right':
-      return bundle_esm.point.create(rect.x + rect.width, rect.y + rect.height);
-    case 'bottom':
-      return bundle_esm.point.create(rect.x + rect.width / 2, rect.y + rect.height);
-    case 'bottom-left':
-      return bundle_esm.point.create(rect.x, rect.y + rect.height);
-    case 'left':
-      return bundle_esm.point.create(rect.x, rect.y + rect.height / 2);
-    case 'center':
-      return bundle_esm.rectangle.center(rect);
-  }
-}
-/**
- * Returns the scale factor to convert screen coordinates to canvas coordinates.
- *
- * Scale factor is determined by taking the shortest side of the given
- * dimension. This behavior ensures that relative units are consistent in
- * non-square aspect ratios.
- *
- * @see toRelativeScaleFactor
- */
-function toScreenScaleFactor(dimensions) {
-  return Math.min(dimensions.width, dimensions.height);
-}
-/**
- * Returns the scale factor to convert canvas coordinates to screen coordinates.
- *
- * Scale factor is determined by taking the shortest side of the given
- * dimension. This behavior ensures that relative units are consistent in
- * non-square aspect ratios.
- *
- * @see toScreenScaleFactor
- */
-function toRelativeScaleFactor(dimensions) {
-  return 1 / toScreenScaleFactor(dimensions);
-}
-function translatePointToScreen(pt, canvasDimensions) {
-  const scaleFactor = toScreenScaleFactor(canvasDimensions);
-  return bundle_esm.point.add(bundle_esm.point.scale(pt, scaleFactor, scaleFactor), bundle_esm.dimensions.center(canvasDimensions));
-}
-function translateDimensionsToScreen(dimensions, canvasDimensions) {
-  const scaleFactor = toScreenScaleFactor(canvasDimensions);
-  return bundle_esm.dimensions.scale(scaleFactor, scaleFactor, dimensions);
-}
-/**
- * Translates a rectangle in relative units, to a rectangle in screen units.
- *
- * Shape coordinates are persisted in relative units, so they can be presented
- * at any size.
- */
-function translateRectToScreen(rect, canvasDimensions) {
-  const position = translatePointToScreen(rect, canvasDimensions);
-  const dimensions = translateDimensionsToScreen(rect, canvasDimensions);
-  return bundle_esm.rectangle.fromPointAndDimensions(position, dimensions);
-}
-/**
- * Translates a point in screen units, to a point in relative units.
- */
-function translatePointToRelative(pt, canvasDimensions) {
-  const scaleFactor = toRelativeScaleFactor(canvasDimensions);
-  return bundle_esm.point.scale(bundle_esm.point.subtract(pt, bundle_esm.dimensions.center(canvasDimensions)), scaleFactor, scaleFactor);
-}
-/**
- * Translates a set of points in relative `original` units to
- * points in relative `bounds` units.
- */
-function translatePointsToBounds(points, original, bounds) {
-  return points.map((pt) => bundle_esm.point.add(bundle_esm.point.scale(bundle_esm.point.subtract(pt, original), bounds.width / (original.width || 1), bounds.height / (original.height || 1)), bounds));
-}
-function createRectangle(initialPoint, currentPoint, maintainAspectRatio) {
-  const bounds = bundle_esm.rectangle.fromPoints(initialPoint, currentPoint);
-  if (maintainAspectRatio) {
-    const fitBoundsSize = Math.max(bounds.width, bounds.height);
-    const isPortrait = bounds.height > bounds.width;
-    const currentIsLeftOfInitial = currentPoint.x <= initialPoint.x;
-    const currentIsAboveInitial = currentPoint.y <= initialPoint.y;
-    const fitBoundsX = currentIsLeftOfInitial
-      ? isPortrait
-        ? initialPoint.x - fitBoundsSize
-        : currentPoint.x
-      : initialPoint.x;
-    const fitBoundsY = currentIsAboveInitial
-      ? isPortrait
-        ? currentPoint.y
-        : initialPoint.y - fitBoundsSize
-      : initialPoint.y;
-    return bundle_esm.rectangle.create(fitBoundsX, fitBoundsY, fitBoundsSize, fitBoundsSize);
-  }
-  else {
-    return bounds;
-  }
-}
-function transformRectangle(bounds, start, current, anchor, maintainAspectRatio) {
-  const delta = bundle_esm.point.subtract(current, start);
-  const { x: left, y: top, width: w, height: h } = bounds;
-  const right = left + w;
-  const bottom = top + h;
-  const topLeft = bundle_esm.point.create(left, top);
-  const bottomLeft = bundle_esm.point.create(left, bottom);
-  const topRight = bundle_esm.point.create(right, top);
-  const bottomRight = bundle_esm.point.create(right, bottom);
-  switch (anchor) {
-    case 'top-left':
-      return createRectangle(bottomRight, current, !!maintainAspectRatio);
-    case 'top':
-      return createRectangle(bottomRight, bundle_esm.point.create(left, current.y), !!maintainAspectRatio);
-    case 'top-right':
-      return createRectangle(bottomLeft, current, !!maintainAspectRatio);
-    case 'right':
-      return createRectangle(bottomLeft, bundle_esm.point.create(current.x, top), !!maintainAspectRatio);
-    case 'bottom-right':
-      return createRectangle(topLeft, current, !!maintainAspectRatio);
-    case 'bottom':
-      return createRectangle(topLeft, bundle_esm.point.create(right, current.y), !!maintainAspectRatio);
-    case 'bottom-left':
-      return createRectangle(topRight, current, !!maintainAspectRatio);
-    case 'left':
-      return createRectangle(bottomRight, bundle_esm.point.create(current.x, top), !!maintainAspectRatio);
-    case 'center':
-      return bundle_esm.rectangle.create(bounds.x + delta.x, bounds.y + delta.y, bounds.width, bounds.height);
-  }
-}
-function isVertexViewerMarkupElement(el) {
-  return (utils.isVertexViewerArrowMarkup(el) ||
-    utils.isVertexViewerCircleMarkup(el) ||
-    utils.isVertexViewerFreeformMarkup(el));
-}
-function isValidPointData(...points) {
-  return points.every((pt) => !isNaN(pt.x) && !isNaN(pt.y));
-}
-function isValidStartEvent(event) {
-  const el = event.target;
-  return isVertexViewerMarkupElement(el) && el.mode !== 'edit';
-}
+const index = require('./index-4138aa2c.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const dom = require('./dom-8d90bfaf.js');
+const dom$1 = require('./dom-d1bbd67c.js');
+const utils = require('./utils-78928e4e.js');
+const utils$1 = require('./utils-b157b0af.js');
+const index$1 = require('./index-b9d13137.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const RelativeAnchor = ({ id, rotation, name, point, onPointerDown }, children) => {
@@ -227,7 +80,7 @@ let ViewerMarkupArrow = class {
     };
     this.updatePoints = (event) => {
       if (this.elementBounds != null && this.pointerId === event.pointerId) {
-        const position = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+        const position = utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
         if (this.editAnchor === 'start') {
           this.start = position;
         }
@@ -244,7 +97,7 @@ let ViewerMarkupArrow = class {
       }
     };
     this.handleWindowPointerDown = (event) => {
-      if (isValidStartEvent(event)) {
+      if (utils.isValidStartEvent(event)) {
         this.startMarkup(event);
       }
     };
@@ -258,7 +111,7 @@ let ViewerMarkupArrow = class {
         this.pointerId == null) {
         this.pointerId = event.pointerId;
         this.start =
-          (_a = this.start) !== null && _a !== void 0 ? _a : translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+          (_a = this.start) !== null && _a !== void 0 ? _a : utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
         this.editBegin.emit();
         this.addDrawingInteractionListeners();
       }
@@ -266,10 +119,10 @@ let ViewerMarkupArrow = class {
     this.endMarkup = (event) => {
       if (this.pointerId === event.pointerId) {
         const screenStart = this.start != null && this.elementBounds != null
-          ? translatePointToScreen(this.start, this.elementBounds)
+          ? utils.translatePointToScreen(this.start, this.elementBounds)
           : undefined;
         const screenEnd = this.end != null && this.elementBounds != null
-          ? translatePointToScreen(this.end, this.elementBounds)
+          ? utils.translatePointToScreen(this.end, this.elementBounds)
           : undefined;
         if (this.mode !== '' &&
           screenStart != null &&
@@ -340,20 +193,20 @@ let ViewerMarkupArrow = class {
     }
   }
   updateViewport() {
-    const rect = getMarkupBoundingClientRect(this.hostEl);
+    const rect = dom$1.getMarkupBoundingClientRect(this.hostEl);
     this.elementBounds = rect;
   }
   updatePointsFromProps() {
-    this.start = this.start || utils.parsePoint(this.startJson);
-    this.end = this.end || utils.parsePoint(this.endJson);
+    this.start = this.start || utils$1.parsePoint(this.startJson);
+    this.end = this.end || utils$1.parsePoint(this.endJson);
   }
   render() {
     if (this.start != null && this.end != null && this.elementBounds != null) {
-      const screenStart = translatePointToScreen(this.start, this.elementBounds);
-      const screenEnd = translatePointToScreen(this.end, this.elementBounds);
-      const arrowheadPoints = utils.createArrowheadPoints(screenStart, screenEnd);
-      if (isValidPointData(screenStart, screenEnd)) {
-        return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "arrow-shadow" })), index.h("g", { filter: "url(#arrow-shadow)" }, index.h("polygon", { id: "arrow-head", class: "head", points: utils.arrowheadPointsToPolygonPoints(arrowheadPoints) }), index.h("line", { id: "arrow-line", class: "line", x1: screenStart.x, y1: screenStart.y, x2: arrowheadPoints.base.x, y2: arrowheadPoints.base.y }), this.mode === 'edit' && (index.h("line", { id: "bounding-box-1d-line", class: "bounds-line", x1: screenStart.x, y1: screenStart.y, x2: screenEnd.x, y2: screenEnd.y })))), this.mode === 'edit' && (index.h(BoundingBox1d, { start: screenStart, end: screenEnd, onStartAnchorPointerDown: this.editStartPoint, onCenterAnchorPointerDown: this.editCenterPoint, onEndAnchorPointerDown: this.editEndPoint })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+      const screenStart = utils.translatePointToScreen(this.start, this.elementBounds);
+      const screenEnd = utils.translatePointToScreen(this.end, this.elementBounds);
+      const arrowheadPoints = utils$1.createArrowheadPoints(screenStart, screenEnd);
+      if (utils.isValidPointData(screenStart, screenEnd)) {
+        return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "arrow-shadow" })), index.h("g", { filter: "url(#arrow-shadow)" }, index.h("polygon", { id: "arrow-head", class: "head", points: utils$1.arrowheadPointsToPolygonPoints(arrowheadPoints) }), index.h("line", { id: "arrow-line", class: "line", x1: screenStart.x, y1: screenStart.y, x2: arrowheadPoints.base.x, y2: arrowheadPoints.base.y }), this.mode === 'edit' && (index.h("line", { id: "bounding-box-1d-line", class: "bounds-line", x1: screenStart.x, y1: screenStart.y, x2: screenEnd.x, y2: screenEnd.y })))), this.mode === 'edit' && (index.h(BoundingBox1d, { start: screenStart, end: screenEnd, onStartAnchorPointerDown: this.editStartPoint, onCenterAnchorPointerDown: this.editCenterPoint, onEndAnchorPointerDown: this.editEndPoint })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
       }
       else {
         return index.h(index.Host, null);
@@ -404,21 +257,21 @@ const BoundingBox2d = ({ bounds, onTopLeftAnchorPointerDown, onLeftAnchorPointer
         width: `${padded.width}px`,
         height: `${padded.height}px`,
       } }),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-top-left-anchor", name: "top-left-anchor", point: getBoundingBox2dAnchorPosition(padded, 'top-left'), onPointerDown: onTopLeftAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-top-left-anchor", name: "top-left-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'top-left'), onPointerDown: onTopLeftAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-left-anchor", name: "left-anchor", point: getBoundingBox2dAnchorPosition(padded, 'left'), onPointerDown: onLeftAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-left-anchor", name: "left-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'left'), onPointerDown: onLeftAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-top-right-anchor", name: "top-right-anchor", point: getBoundingBox2dAnchorPosition(padded, 'top-right'), onPointerDown: onTopRightAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-top-right-anchor", name: "top-right-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'top-right'), onPointerDown: onTopRightAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-right-anchor", name: "right-anchor", point: getBoundingBox2dAnchorPosition(padded, 'right'), onPointerDown: onRightAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-right-anchor", name: "right-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'right'), onPointerDown: onRightAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-bottom-left-anchor", name: "bottom-left-anchor", point: getBoundingBox2dAnchorPosition(padded, 'bottom-left'), onPointerDown: onBottomLeftAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-bottom-left-anchor", name: "bottom-left-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'bottom-left'), onPointerDown: onBottomLeftAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-bottom-anchor", name: "bottom-anchor", point: getBoundingBox2dAnchorPosition(padded, 'bottom'), onPointerDown: onBottomAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-bottom-anchor", name: "bottom-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'bottom'), onPointerDown: onBottomAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-bottom-right-anchor", name: "bottom-right-anchor", point: getBoundingBox2dAnchorPosition(padded, 'bottom-right'), onPointerDown: onBottomRightAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-bottom-right-anchor", name: "bottom-right-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'bottom-right'), onPointerDown: onBottomRightAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
-    index.h(RelativeAnchor, { id: "bounding-box-2d-top-anchor", name: "top-anchor", point: getBoundingBox2dAnchorPosition(padded, 'top'), onPointerDown: onTopAnchorPointerDown },
+    index.h(RelativeAnchor, { id: "bounding-box-2d-top-anchor", name: "top-anchor", point: utils.getBoundingBox2dAnchorPosition(padded, 'top'), onPointerDown: onTopAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
     index.h(RelativeAnchor, { id: "bounding-box-2d-center-anchor", name: "center-anchor", point: center, onPointerDown: onCenterAnchorPointerDown },
       index.h("div", { class: index$1.classnames('bounds-default-anchor', 'bounds-center-anchor') }))));
@@ -452,12 +305,12 @@ let ViewerMarkupCircle = class {
         this.startPosition != null &&
         this.elementBounds != null &&
         this.pointerId === event.pointerId) {
-        const position = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
-        this.bounds = transformRectangle((_a = this.resizeBounds) !== null && _a !== void 0 ? _a : this.bounds, this.startPosition, position, this.editAnchor, event.shiftKey);
+        const position = utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+        this.bounds = utils.transformRectangle((_a = this.resizeBounds) !== null && _a !== void 0 ? _a : this.bounds, this.startPosition, position, this.editAnchor, event.shiftKey);
       }
     };
     this.handleWindowPointerDown = (event) => {
-      if (isValidStartEvent(event)) {
+      if (utils.isValidStartEvent(event)) {
         this.startMarkup(event);
       }
     };
@@ -469,7 +322,7 @@ let ViewerMarkupCircle = class {
       if (this.mode !== '' &&
         this.elementBounds != null &&
         this.pointerId == null) {
-        const position = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+        const position = utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
         this.pointerId = event.pointerId;
         this.startPosition = position;
         this.bounds =
@@ -548,16 +401,16 @@ let ViewerMarkupCircle = class {
     }
   }
   updateViewport() {
-    const rect = getMarkupBoundingClientRect(this.hostEl);
+    const rect = dom$1.getMarkupBoundingClientRect(this.hostEl);
     this.elementBounds = rect;
   }
   updateBoundsFromProps() {
     var _a;
-    this.bounds = (_a = this.bounds) !== null && _a !== void 0 ? _a : utils.parseBounds(this.boundsJson);
+    this.bounds = (_a = this.bounds) !== null && _a !== void 0 ? _a : utils$1.parseBounds(this.boundsJson);
   }
   render() {
     if (this.bounds != null && this.elementBounds != null) {
-      const relativeBounds = translateRectToScreen(this.bounds, this.elementBounds);
+      const relativeBounds = utils.translateRectToScreen(this.bounds, this.elementBounds);
       const center = bundle_esm.rectangle.center(relativeBounds);
       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", { 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, onTopLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top-left'), onTopRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top-right'), onTopAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top'), onBottomLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom-left'), onBottomRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom-right'), onBottomAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom'), onLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'left'), onRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'right'), onCenterAnchorPointerDown: (e) => this.updateEditAnchor(e, 'center') })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
     }
@@ -613,7 +466,7 @@ let ViewerMarkupFreeform = class {
     this.editAnchor = 'bottom-right';
     this.screenPoints = [];
     this.handleWindowPointerDown = (event) => {
-      if (isValidStartEvent(event)) {
+      if (utils.isValidStartEvent(event)) {
         this.startMarkup(event);
       }
     };
@@ -625,7 +478,7 @@ let ViewerMarkupFreeform = class {
         this.resizeBounds = this.bounds;
         this.resizePoints = this.points;
         this.editAnchor = anchor;
-        this.resizeStartPosition = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+        this.resizeStartPosition = utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
         this.addEditingInteractionListeners();
       }
     };
@@ -635,9 +488,9 @@ let ViewerMarkupFreeform = class {
         this.elementBounds != null &&
         this.resizeBounds != null &&
         this.resizePoints != null) {
-        const position = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
-        const updatedBounds = transformRectangle(this.resizeBounds, this.resizeStartPosition, position, this.editAnchor, event.shiftKey);
-        this.points = translatePointsToBounds(this.resizePoints, this.resizeBounds, updatedBounds);
+        const position = utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+        const updatedBounds = utils.transformRectangle(this.resizeBounds, this.resizeStartPosition, position, this.editAnchor, event.shiftKey);
+        this.points = utils.translatePointsToBounds(this.resizePoints, this.resizeBounds, updatedBounds);
         this.screenPoints = (_a = this.convertPointsToScreen()) !== null && _a !== void 0 ? _a : this.screenPoints;
         this.bounds = updatedBounds;
       }
@@ -647,7 +500,7 @@ let ViewerMarkupFreeform = class {
         this.points != null &&
         this.elementBounds != null) {
         const screenPosition = dom.getMouseClientPosition(event, this.elementBounds);
-        const position = translatePointToRelative(screenPosition, this.elementBounds);
+        const position = utils.translatePointToRelative(screenPosition, this.elementBounds);
         this.updateMinAndMax(position);
         this.points = [...this.points, position];
         this.screenPoints = [...this.screenPoints, screenPosition];
@@ -660,7 +513,7 @@ let ViewerMarkupFreeform = class {
         this.elementBounds != null) {
         this.pointerId = event.pointerId;
         const screenPosition = dom.getMouseClientPosition(event, this.elementBounds);
-        const position = translatePointToRelative(screenPosition, this.elementBounds);
+        const position = utils.translatePointToRelative(screenPosition, this.elementBounds);
         this.updateMinAndMax(position);
         this.points = (_a = this.points) !== null && _a !== void 0 ? _a : [position];
         this.screenPoints = (_b = this.screenPoints) !== null && _b !== void 0 ? _b : [screenPosition];
@@ -675,7 +528,7 @@ let ViewerMarkupFreeform = class {
           this.points.length > 2 &&
           this.elementBounds != null) {
           const screenPosition = dom.getMouseClientPosition(event, this.elementBounds);
-          const position = translatePointToRelative(screenPosition, this.elementBounds);
+          const position = utils.translatePointToRelative(screenPosition, this.elementBounds);
           this.updateMinAndMax(position);
           this.points = [...this.points, position];
           this.screenPoints = [...this.screenPoints, screenPosition];
@@ -750,19 +603,19 @@ let ViewerMarkupFreeform = class {
   }
   updateViewport() {
     var _a;
-    const rect = getMarkupBoundingClientRect(this.hostEl);
+    const rect = dom$1.getMarkupBoundingClientRect(this.hostEl);
     this.elementBounds = rect;
     this.screenPoints = (_a = this.convertPointsToScreen()) !== null && _a !== void 0 ? _a : this.screenPoints;
   }
   updatePointsFromProps() {
     var _a, _b, _c;
-    this.points = (_a = this.points) !== null && _a !== void 0 ? _a : utils.parsePoints(this.pointsJson);
+    this.points = (_a = this.points) !== null && _a !== void 0 ? _a : utils$1.parsePoints(this.pointsJson);
     this.screenPoints = (_b = this.convertPointsToScreen()) !== null && _b !== void 0 ? _b : [];
-    this.bounds = (_c = this.bounds) !== null && _c !== void 0 ? _c : utils.parseBounds(this.boundsJson);
+    this.bounds = (_c = this.bounds) !== null && _c !== void 0 ? _c : utils$1.parseBounds(this.boundsJson);
   }
   render() {
     if (this.screenPoints.length > 0 && this.elementBounds != null) {
-      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", { 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), onTopLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top-left'), onTopRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top-right'), onTopAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top'), onBottomLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom-left'), onBottomRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom-right'), onBottomAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom'), onLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'left'), onRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'right'), onCenterAnchorPointerDown: (e) => this.updateEditAnchor(e, 'center') })), 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", { 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: utils.translateRectToScreen(this.bounds, this.elementBounds), onTopLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top-left'), onTopRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top-right'), onTopAnchorPointerDown: (e) => this.updateEditAnchor(e, 'top'), onBottomLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom-left'), onBottomRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom-right'), onBottomAnchorPointerDown: (e) => this.updateEditAnchor(e, 'bottom'), onLeftAnchorPointerDown: (e) => this.updateEditAnchor(e, 'left'), onRightAnchorPointerDown: (e) => this.updateEditAnchor(e, 'right'), onCenterAnchorPointerDown: (e) => this.updateEditAnchor(e, 'center') })), 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 })));
@@ -815,7 +668,7 @@ let ViewerMarkupFreeform = class {
     var _a;
     const elementBounds = this.elementBounds;
     if (elementBounds != null) {
-      return (_a = this.points) === null || _a === void 0 ? void 0 : _a.map((pt) => translatePointToScreen(pt, elementBounds));
+      return (_a = this.points) === null || _a === void 0 ? void 0 : _a.map((pt) => utils.translatePointToScreen(pt, elementBounds));
     }
   }
   get hostEl() { return index.getElement(this); }

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

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 const templates = require('./templates-e57b3741.js');
-const markup = require('./markup-7f7de5f2.js');
-const utils = require('./utils-6397efca.js');
-require('./bundle.esm-618a5fe9.js');
-require('./browser.esm-075810bf.js');
+const markup = require('./markup-f7e61d16.js');
+const utils = require('./utils-b157b0af.js');
+require('./bundle.esm-22b6f2d6.js');
+require('./browser.esm-0bcdc581.js');
 
 const viewerMarkupToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}:host([elevated=\"\"]){z-index:100}";