@vertexvis/viewer 0.10.2-canary.7 → 0.11.0

package/dist/cjs/{utils-6933381f.js → utils-414e6cfe.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-const browser_esm = require('./browser.esm-ae55f058.js');
-require('./orientation-42cc9e8d.js');
+const browser_esm = require('./browser.esm-17419694.js');
+require('./orientation-09d0f3ef.js');
 
 const defaultFlags = {
   throttleFrameDelivery: true,

package/dist/cjs/utils-440f0f7d.js

@@ -0,0 +1,61 @@
+/**!
+ * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+const bundle_esm = require('./bundle.esm-b79513ef.js');
+
+function createArrowheadPoints(start, end, arrowAngle = 60) {
+  const distance = bundle_esm.point.distance(start, end);
+  const angle = bundle_esm.angle.normalize(bundle_esm.angle.toDegrees(bundle_esm.angle.fromPoints(start, end)) - 270);
+  // Adjust the arrow height in relation to the distance between the to and from
+  // points. Uses a min and max size so the arrow doesn't become cartoonish.
+  const height = Math.max(4, Math.min(16, distance * 0.25));
+  const sideLength = height / Math.cos(bundle_esm.angle.toRadians(90 - arrowAngle));
+  const rotation = bundle_esm.matrix.rotation(angle);
+  const arrowLeft = bundle_esm.point.polar(sideLength, bundle_esm.angle.toRadians(arrowAngle * 2));
+  const arrowRight = bundle_esm.point.polar(sideLength, bundle_esm.angle.toRadians(arrowAngle));
+  const arrowBase = bundle_esm.point.polar(height, bundle_esm.angle.toRadians(90));
+  return {
+    tip: end,
+    left: bundle_esm.point.add(end, bundle_esm.matrix.transformPoint(rotation, arrowLeft)),
+    right: bundle_esm.point.add(end, bundle_esm.matrix.transformPoint(rotation, arrowRight)),
+    base: bundle_esm.point.add(end, bundle_esm.matrix.transformPoint(rotation, arrowBase)),
+  };
+}
+function arrowheadPointsToPolygonPoints(points) {
+  return [points.tip, points.right, points.base, points.left]
+    .map((pt) => `${pt.x},${pt.y}`)
+    .join(' ');
+}
+function isVertexViewerArrowMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-ARROW');
+}
+function parsePoint(value) {
+  return typeof value === 'string' ? bundle_esm.point.fromJson(value) : value;
+}
+
+function isVertexViewerCircleMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-CIRCLE');
+}
+function parseBounds(value) {
+  return typeof value === 'string' ? bundle_esm.rectangle.fromJson(value) : value;
+}
+
+function parsePoints(value) {
+  return typeof value === 'string'
+    ? JSON.parse(value).map((values) => bundle_esm.point.fromJson(JSON.stringify(values)))
+    : value;
+}
+function isVertexViewerFreeformMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-FREEFORM');
+}
+
+exports.arrowheadPointsToPolygonPoints = arrowheadPointsToPolygonPoints;
+exports.createArrowheadPoints = createArrowheadPoints;
+exports.isVertexViewerArrowMarkup = isVertexViewerArrowMarkup;
+exports.isVertexViewerCircleMarkup = isVertexViewerCircleMarkup;
+exports.isVertexViewerFreeformMarkup = isVertexViewerFreeformMarkup;
+exports.parseBounds = parseBounds;
+exports.parsePoint = parsePoint;
+exports.parsePoints = parsePoints;

package/dist/cjs/vertex-scene-tree.cjs.entry.js

@@ -6,12 +6,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
-const bundle_esm = require('./bundle.esm-c457ad4d.js');
+const bundle_esm = require('./bundle.esm-b79513ef.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const browser_esm = require('./browser.esm-ae55f058.js');
-const utils = require('./utils-6933381f.js');
+const browser_esm = require('./browser.esm-17419694.js');
+const utils = require('./utils-414e6cfe.js');
 const stencil = require('./stencil-60732441.js');
-require('./orientation-42cc9e8d.js');
+require('./orientation-09d0f3ef.js');
 
 window.requestIdleCallback =
     window.requestIdleCallback ||
@@ -9396,7 +9396,8 @@ const SceneTree = class {
       (_a = this.stateMap.viewerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     if (newViewer != null) {
-      this.stateMap.viewerDisposable = (_b = this.controller) === null || _b === void 0 ? void 0 : _b.connectToViewer(newViewer);
+      this.stateMap.viewerDisposable =
+        (_b = this.controller) === null || _b === void 0 ? void 0 : _b.connectToViewer(newViewer);
     }
   }
   /**

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

@@ -6,10 +6,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
-const bundle_esm = require('./bundle.esm-c457ad4d.js');
-require('./orientation-42cc9e8d.js');
-const viewport = require('./viewport-e69f8223.js');
-require('./browser.esm-ae55f058.js');
+const bundle_esm = require('./bundle.esm-b79513ef.js');
+require('./orientation-09d0f3ef.js');
+const viewport = require('./viewport-fc405a48.js');
+require('./browser.esm-17419694.js');
 
 const viewerDomElementCss = ":host{position:absolute;pointer-events:none}:host(:not([interactions-off]))>*{pointer-events:auto}";
 

package/dist/cjs/{vertex-viewer-markup-arrow_2.cjs.entry.js → vertex-viewer-markup-arrow_3.cjs.entry.js}

@@ -6,9 +6,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
-const bundle_esm = require('./bundle.esm-c457ad4d.js');
-const dom = require('./dom-cdb50ebc.js');
-const utils = require('./utils-96f244e1.js');
+const bundle_esm = require('./bundle.esm-b79513ef.js');
+const dom = require('./dom-40804039.js');
+const utils = require('./utils-440f0f7d.js');
 const index$1 = require('./index-3bc6bac0.js');
 require('./_commonjsHelpers-537d719a.js');
 
@@ -119,6 +119,66 @@ 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 getMarkupBoundingClientRect(element) {
   return element.getBoundingClientRect();
@@ -334,7 +394,7 @@ const ViewerMarkupCircle = class {
         this.startPosition != null &&
         this.elementBounds != null) {
         const position = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
-        this.bounds = utils.transformCircle((_a = this.resizeBounds) !== null && _a !== void 0 ? _a : this.bounds, this.startPosition, position, this.editAnchor, event.shiftKey);
+        this.bounds = transformRectangle((_a = this.resizeBounds) !== null && _a !== void 0 ? _a : this.bounds, this.startPosition, position, this.editAnchor, event.shiftKey);
       }
     };
     this.startMarkup = (event) => {
@@ -444,5 +504,208 @@ const ViewerMarkupCircle = class {
 };
 ViewerMarkupCircle.style = viewerMarkupCircleCss;
 
+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 ViewerMarkupFreeform = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.editBegin = index.createEvent(this, "editBegin", 7);
+    this.editEnd = index.createEvent(this, "editEnd", 7);
+    this.editCancel = index.createEvent(this, "editCancel", 7);
+    /**
+     * A mode that specifies how the markup component should behave. When
+     * unset, the component will not respond to interactions with the handles.
+     * When `edit`, the markup anchors are interactive and the user is able
+     * to reposition them. When `create`, anytime the user clicks on the canvas,
+     * a new markup will be performed.
+     */
+    this.mode = '';
+    this.editAnchor = 'bottom-right';
+    this.screenPoints = [];
+    this.updateEditAnchor = (event, anchor) => {
+      if (this.elementBounds != null) {
+        this.resizeBounds = this.bounds;
+        this.resizePoints = this.points;
+        this.editAnchor = anchor;
+        this.resizeStartPosition = translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+        this.addEditingInteractionListeners();
+      }
+    };
+    this.updateBounds = (event) => {
+      var _a;
+      if (this.resizeStartPosition != null &&
+        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);
+        this.screenPoints = (_a = this.convertPointsToScreen()) !== null && _a !== void 0 ? _a : this.screenPoints;
+        this.bounds = updatedBounds;
+      }
+    };
+    this.updatePoints = (event) => {
+      if (this.points != null && this.elementBounds != null) {
+        const screenPosition = dom.getMouseClientPosition(event, this.elementBounds);
+        const position = translatePointToRelative(screenPosition, this.elementBounds);
+        this.updateMinAndMax(position);
+        this.points = [...this.points, position];
+        this.screenPoints = [...this.screenPoints, screenPosition];
+      }
+    };
+    this.startMarkup = (event) => {
+      var _a, _b;
+      if (this.mode !== '' && this.elementBounds != null) {
+        const screenPosition = dom.getMouseClientPosition(event, this.elementBounds);
+        const position = 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];
+        this.editBegin.emit();
+        this.addDrawingInteractionListeners();
+      }
+    };
+    this.endMarkup = (event) => {
+      if (this.mode !== '' &&
+        this.points != null &&
+        this.points.length > 1 &&
+        this.elementBounds != null) {
+        const screenPosition = dom.getMouseClientPosition(event, this.elementBounds);
+        const position = translatePointToRelative(screenPosition, this.elementBounds);
+        this.updateMinAndMax(position);
+        this.points = [...this.points, position];
+        this.screenPoints = [...this.screenPoints, screenPosition];
+        this.editEnd.emit();
+      }
+      else {
+        this.points = undefined;
+        this.editCancel.emit();
+      }
+      this.min = undefined;
+      this.max = undefined;
+      this.removeDrawingInteractionListeners();
+    };
+    this.endEdit = () => {
+      this.resizeBounds = undefined;
+      this.removeEditingInteractionListeners();
+      this.editEnd.emit();
+    };
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.updateViewport();
+    this.handleViewerChanged(this.viewer);
+    this.updatePointsFromProps();
+  }
+  componentDidLoad() {
+    this.updatePointsFromProps();
+    const resize = new ResizeObserver(() => this.updateViewport());
+    resize.observe(this.hostEl);
+  }
+  async dispose() {
+    if (this.viewer != null) {
+      this.removeInteractionListeners(this.viewer);
+    }
+    this.removeDrawingInteractionListeners();
+  }
+  /**
+   * @ignore
+   */
+  handleViewerChanged(newViewer, oldViewer) {
+    if (oldViewer != null) {
+      this.removeInteractionListeners(oldViewer);
+    }
+    if (newViewer != null) {
+      this.addInteractionListeners(newViewer);
+    }
+  }
+  handlePointsJsonChange() {
+    this.updatePointsFromProps();
+  }
+  handleBoundsJsonChange() {
+    this.updatePointsFromProps();
+  }
+  updateViewport() {
+    var _a;
+    const rect = 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.screenPoints = (_b = this.convertPointsToScreen()) !== null && _b !== void 0 ? _b : [];
+    this.bounds = (_c = this.bounds) !== null && _c !== void 0 ? _c : utils.parseBounds(this.boundsJson);
+  }
+  render() {
+    if (this.screenPoints.length > 0 && this.elementBounds != null) {
+      return (index.h(index.Host, null, index.h("svg", { class: "svg" }, 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') }))));
+    }
+    else {
+      return (index.h(index.Host, null, index.h("div", { class: "create-overlay", onPointerDown: (event) => this.startMarkup(event) })));
+    }
+  }
+  async addInteractionListeners(viewer) {
+    const interactionTarget = await viewer.getInteractionTarget();
+    if (this.mode === 'create') {
+      interactionTarget.addEventListener('pointerdown', this.startMarkup);
+    }
+  }
+  async addDrawingInteractionListeners() {
+    if (this.mode !== '') {
+      window.addEventListener('pointermove', this.updatePoints);
+      window.addEventListener('pointerup', this.endMarkup);
+    }
+  }
+  async addEditingInteractionListeners() {
+    if (this.mode === 'edit') {
+      window.addEventListener('pointermove', this.updateBounds);
+      window.addEventListener('pointerup', this.endEdit);
+    }
+  }
+  async removeInteractionListeners(viewer) {
+    const interactionTarget = await viewer.getInteractionTarget();
+    interactionTarget.removeEventListener('pointerdown', this.startMarkup);
+  }
+  async removeDrawingInteractionListeners() {
+    window.removeEventListener('pointermove', this.updatePoints);
+    window.removeEventListener('pointerup', this.endMarkup);
+  }
+  async removeEditingInteractionListeners() {
+    if (this.mode === 'edit') {
+      window.removeEventListener('pointermove', this.updateBounds);
+      window.removeEventListener('pointerup', this.endEdit);
+    }
+  }
+  updateMinAndMax(position) {
+    this.min =
+      this.min != null
+        ? bundle_esm.point.create(Math.min(this.min.x, position.x), Math.min(this.min.y, position.y))
+        : position;
+    this.max =
+      this.max != null
+        ? bundle_esm.point.create(Math.max(this.max.x, position.x), Math.max(this.max.y, position.y))
+        : position;
+    this.bounds = bundle_esm.rectangle.create(this.min.x, this.min.y, this.max.x - this.min.x, this.max.y - this.min.y);
+  }
+  convertPointsToScreen() {
+    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));
+    }
+  }
+  get hostEl() { return index.getElement(this); }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "points": ["handlePointsJsonChange"],
+    "bounds": ["handleBoundsJsonChange"]
+  }; }
+};
+ViewerMarkupFreeform.style = viewerMarkupFreeformCss;
+
 exports.vertex_viewer_markup_arrow = ViewerMarkupArrow;
 exports.vertex_viewer_markup_circle = ViewerMarkupCircle;
+exports.vertex_viewer_markup_freeform = ViewerMarkupFreeform;

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
 const templates = require('./templates-e57b3741.js');
-const utils = require('./utils-96f244e1.js');
-const markup = require('./markup-3dac4cef.js');
-require('./bundle.esm-c457ad4d.js');
-require('./browser.esm-ae55f058.js');
+const utils = require('./utils-440f0f7d.js');
+const markup = require('./markup-e84a143f.js');
+require('./bundle.esm-b79513ef.js');
+require('./browser.esm-17419694.js');
 
 const viewerMarkupToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
 
@@ -44,7 +44,15 @@ const ViewerMarkupTool = class {
     };
     this.handleMarkupEditEnd = () => {
       const { markupElement } = this.stateMap;
-      if (utils.isVertexViewerCircleMarkup(markupElement)) {
+      if (utils.isVertexViewerFreeformMarkup(markupElement)) {
+        const { points, bounds } = markupElement;
+        markupElement.points = undefined;
+        markupElement.bounds = undefined;
+        if (points != null && points.length > 0 && bounds != null) {
+          this.markupEnd.emit(new markup.FreeformMarkup({ points, bounds }));
+        }
+      }
+      else if (utils.isVertexViewerCircleMarkup(markupElement)) {
         const { bounds } = markupElement;
         markupElement.bounds = undefined;
         if (bounds != null) {
@@ -88,6 +96,12 @@ const ViewerMarkupTool = class {
   handleCircleTemplateIdChanged() {
     this.updateMarkupElement();
   }
+  /**
+   * @ignore
+   */
+  handleFreeformTemplateIdChanged() {
+    this.updateMarkupElement();
+  }
   /**
    * @ignore
    */
@@ -105,7 +119,9 @@ const ViewerMarkupTool = class {
    */
   render() {
     if (!this.disabled) {
-      if (this.tool === 'arrow' || this.tool === 'circle') {
+      if (this.tool === 'arrow' ||
+        this.tool === 'circle' ||
+        this.tool === 'freeform') {
         return (index.h(index.Host, null, index.h("slot", null)));
       }
       else {
@@ -134,6 +150,25 @@ const ViewerMarkupTool = class {
     }
     return document.createElement('vertex-viewer-markup-circle');
   }
+  createFreeformMarkupElement() {
+    if (this.freeformTemplateId != null) {
+      const element = templates.stampTemplateWithId(window.document.body, this.freeformTemplateId, utils.isVertexViewerFreeformMarkup, () => console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`), () => console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`));
+      if (element != null) {
+        return element;
+      }
+    }
+    return document.createElement('vertex-viewer-markup-freeform');
+  }
+  createNewMarkupElement() {
+    switch (this.tool) {
+      case 'arrow':
+        return this.createArrowMarkupElement();
+      case 'circle':
+        return this.createCircleMarkupElement();
+      case 'freeform':
+        return this.createFreeformMarkupElement();
+    }
+  }
   updateMarkupElement() {
     const { markupElement } = this.stateMap;
     if (markupElement != null) {
@@ -145,9 +180,7 @@ const ViewerMarkupTool = class {
       markupElement.removeEventListener('editCancel', this.handleMarkupEditCancel);
     }
     if (!this.disabled) {
-      const newMarkupElement = this.tool === 'arrow'
-        ? this.createArrowMarkupElement()
-        : this.createCircleMarkupElement();
+      const newMarkupElement = this.createNewMarkupElement();
       newMarkupElement.mode = 'create';
       newMarkupElement.viewer = this.viewer;
       newMarkupElement.addEventListener('editBegin', this.handleMarkupEditBegin);
@@ -163,6 +196,7 @@ const ViewerMarkupTool = class {
     "tool": ["handleToolChanged"],
     "arrowTemplateId": ["handleArrowTemplateIdChanged"],
     "circleTemplateId": ["handleCircleTemplateIdChanged"],
+    "freeformTemplateId": ["handleFreeformTemplateIdChanged"],
     "disabled": ["handleDisabledChanged"]
   }; }
 };

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
 const templates = require('./templates-e57b3741.js');
-const markup = require('./markup-3dac4cef.js');
-const utils = require('./utils-96f244e1.js');
-require('./bundle.esm-c457ad4d.js');
-require('./browser.esm-ae55f058.js');
+const markup = require('./markup-e84a143f.js');
+const utils = require('./utils-440f0f7d.js');
+require('./bundle.esm-b79513ef.js');
+require('./browser.esm-17419694.js');
 
 const viewerMarkupCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
 
@@ -56,6 +56,14 @@ const ViewerMarkup = class {
       el.bounds = bounds;
       return this.appendMarkupElement(el);
     }
+    else if (markup$1 instanceof markup.FreeformMarkup) {
+      const { bounds, points, id } = markup$1;
+      const el = this.createFreeformMarkupElement();
+      el.id = id;
+      el.points = points;
+      el.bounds = bounds;
+      return this.appendMarkupElement(el);
+    }
     else {
       throw new Error(`Cannot add markup. Unknown type '${markup$1}'.`);
     }
@@ -83,7 +91,9 @@ const ViewerMarkup = class {
    * @see {@link ViewerMarkup.getMarkupElement}
    */
   async getMarkupElements() {
-    return Array.from(this.hostEl.children).filter((e) => utils.isVertexViewerArrowMarkup(e) || utils.isVertexViewerCircleMarkup(e));
+    return Array.from(this.hostEl.children).filter((e) => utils.isVertexViewerArrowMarkup(e) ||
+      utils.isVertexViewerCircleMarkup(e) ||
+      utils.isVertexViewerFreeformMarkup(e));
   }
   /**
    * Returns the markup element associated to the given ID.
@@ -199,6 +209,15 @@ const ViewerMarkup = class {
     }
     return document.createElement('vertex-viewer-markup-circle');
   }
+  createFreeformMarkupElement() {
+    if (this.freeformTemplateId != null) {
+      const element = templates.stampTemplateWithId(window.document.body, this.freeformTemplateId, utils.isVertexViewerFreeformMarkup, () => console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`), () => console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`));
+      if (element != null) {
+        return element;
+      }
+    }
+    return document.createElement('vertex-viewer-markup-freeform');
+  }
   async updatePropsOnMarkups() {
     const markup = await this.getMarkupElements();
     markup.forEach((m) => this.updatePropsOnMarkup(m));
@@ -213,6 +232,7 @@ const ViewerMarkup = class {
       tool.disabled = this.disabled;
       tool.arrowTemplateId = this.arrowTemplateId;
       tool.circleTemplateId = this.circleTemplateId;
+      tool.freeformTemplateId = this.freeformTemplateId;
       tool.tool = this.tool;
       tool.viewer = this.viewer;
     }

package/dist/cjs/vertex-viewer-measurement-distance_2.cjs.entry.js

@@ -6,14 +6,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
-const bundle_esm = require('./bundle.esm-c457ad4d.js');
-const orientation = require('./orientation-42cc9e8d.js');
-const viewport = require('./viewport-e69f8223.js');
-const constants = require('./constants-4277684a.js');
-const dom = require('./dom-cdb50ebc.js');
+const bundle_esm = require('./bundle.esm-b79513ef.js');
+const orientation = require('./orientation-09d0f3ef.js');
+const viewport = require('./viewport-fc405a48.js');
+const constants = require('./constants-1d65ed39.js');
+const dom = require('./dom-40804039.js');
 const index$1 = require('./index-3bc6bac0.js');
-const cursors = require('./cursors-b93b43ef.js');
-require('./browser.esm-ae55f058.js');
+const cursors = require('./cursors-8aaf500f.js');
+require('./browser.esm-17419694.js');
 require('./_commonjsHelpers-537d719a.js');
 
 function getMeasurementBoundingClientRect(el) {
@@ -236,7 +236,7 @@ const ViewerMeasurementDistance = class {
    */
   render() {
     const positions = this.computeElementPositions();
-    const { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd, } = positions;
+    const { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd } = positions;
     const distance = this.formatDistance(this.distance);
     if (this.mode === 'edit') {
       return (index.h(index.Host, null, index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, onStartAnchorPointerDown: this.handleEditAnchor('start'), onEndAnchorPointerDown: this.handleEditAnchor('end') }))));

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

@@ -7,11 +7,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
 const templates = require('./templates-e57b3741.js');
-require('./orientation-42cc9e8d.js');
-const measurement = require('./measurement-b494bf55.js');
-const constants = require('./constants-4277684a.js');
-require('./browser.esm-ae55f058.js');
-require('./bundle.esm-c457ad4d.js');
+require('./orientation-09d0f3ef.js');
+const measurement = require('./measurement-4579193b.js');
+const constants = require('./constants-1d65ed39.js');
+require('./browser.esm-17419694.js');
+require('./bundle.esm-b79513ef.js');
 
 const viewerMeasurementToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0}";
 

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

@@ -6,12 +6,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
-const constants = require('./constants-4277684a.js');
+const constants = require('./constants-1d65ed39.js');
 const templates = require('./templates-e57b3741.js');
-require('./orientation-42cc9e8d.js');
-const measurement = require('./measurement-b494bf55.js');
-require('./bundle.esm-c457ad4d.js');
-require('./browser.esm-ae55f058.js');
+require('./orientation-09d0f3ef.js');
+const measurement = require('./measurement-4579193b.js');
+require('./bundle.esm-b79513ef.js');
+require('./browser.esm-17419694.js');
 
 const viewerMeasurementsCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}::slotted(.viewer-measurements__measurement[mode='']){cursor:pointer}::slotted(.viewer-measurements__measurement[mode='edit']){z-index:1}::slotted(.viewer-measurements__measurement[interacting-anchor='start']),::slotted(.viewer-measurements__measurement[interacting-anchor='end']),::slotted(vertex-viewer-measurement-tool[is-measuring]){z-index:2}";
 

package/dist/cjs/vertex-viewer-view-cube.cjs.entry.js

@@ -6,11 +6,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b9ad5cb.js');
-const bundle_esm = require('./bundle.esm-c457ad4d.js');
+const bundle_esm = require('./bundle.esm-b79513ef.js');
 const stencil = require('./stencil-60732441.js');
-const orientation = require('./orientation-42cc9e8d.js');
+const orientation = require('./orientation-09d0f3ef.js');
 const index$1 = require('./index-3bc6bac0.js');
-require('./browser.esm-ae55f058.js');
+require('./browser.esm-17419694.js');
 require('./_commonjsHelpers-537d719a.js');
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars