@vertexvis/viewer 0.10.2-canary.7 → 0.11.0

package/dist/esm/utils-5fe43b8a.js

@@ -0,0 +1,52 @@
+/**!
+ * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
+ */
+import { p as point, n as matrix, k as angle, g as rectangle } from './bundle.esm-d891316f.js';
+
+function createArrowheadPoints(start, end, arrowAngle = 60) {
+  const distance = point.distance(start, end);
+  const angle$1 = angle.normalize(angle.toDegrees(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(angle.toRadians(90 - arrowAngle));
+  const rotation = matrix.rotation(angle$1);
+  const arrowLeft = point.polar(sideLength, angle.toRadians(arrowAngle * 2));
+  const arrowRight = point.polar(sideLength, angle.toRadians(arrowAngle));
+  const arrowBase = point.polar(height, angle.toRadians(90));
+  return {
+    tip: end,
+    left: point.add(end, matrix.transformPoint(rotation, arrowLeft)),
+    right: point.add(end, matrix.transformPoint(rotation, arrowRight)),
+    base: point.add(end, 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' ? point.fromJson(value) : value;
+}
+
+function isVertexViewerCircleMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-CIRCLE');
+}
+function parseBounds(value) {
+  return typeof value === 'string' ? rectangle.fromJson(value) : value;
+}
+
+function parsePoints(value) {
+  return typeof value === 'string'
+    ? JSON.parse(value).map((values) => point.fromJson(JSON.stringify(values)))
+    : value;
+}
+function isVertexViewerFreeformMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-FREEFORM');
+}
+
+export { isVertexViewerCircleMarkup as a, isVertexViewerFreeformMarkup as b, createArrowheadPoints as c, arrowheadPointsToPolygonPoints as d, parseBounds as e, parsePoints as f, isVertexViewerArrowMarkup as i, parsePoint as p };

package/dist/esm/{utils-b857bd7c.js → utils-f8e0baf7.js}

@@ -1,8 +1,8 @@
 /**!
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
-import { o as objects, c as color } from './browser.esm-7dbdf78a.js';
-import './orientation-c3e2af18.js';
+import { o as objects, c as color } from './browser.esm-e4fb17dc.js';
+import './orientation-bb34b652.js';
 
 const defaultFlags = {
   throttleFrameDelivery: true,

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

@@ -2,12 +2,12 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-8d7400a7.js';
-import { k as __rest } from './bundle.esm-590d2273.js';
+import { j as __rest } from './bundle.esm-d891316f.js';
 import { a as commonjsGlobal, c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
-import { E as EventDispatcher } from './browser.esm-7dbdf78a.js';
-import { g as getElementBoundingClientRect, p as parseConfig } from './utils-b857bd7c.js';
+import { E as EventDispatcher } from './browser.esm-e4fb17dc.js';
+import { g as getElementBoundingClientRect, p as parseConfig } from './utils-f8e0baf7.js';
 import { w as writeDOM, r as readDOM } from './stencil-540d92eb.js';
-import './orientation-c3e2af18.js';
+import './orientation-bb34b652.js';
 
 window.requestIdleCallback =
     window.requestIdleCallback ||
@@ -9392,7 +9392,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/esm/vertex-viewer-dom-element_3.entry.js

@@ -2,10 +2,10 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8d7400a7.js';
-import { v as vector3, q as quaternion, m as matrix4, s as euler } from './bundle.esm-590d2273.js';
-import './orientation-c3e2af18.js';
-import { V as Viewport } from './viewport-8fea0743.js';
-import './browser.esm-7dbdf78a.js';
+import { v as vector3, q as quaternion, m as matrix4, s as euler } from './bundle.esm-d891316f.js';
+import './orientation-bb34b652.js';
+import { V as Viewport } from './viewport-d6f5cd7b.js';
+import './browser.esm-e4fb17dc.js';
 
 const viewerDomElementCss = ":host{position:absolute;pointer-events:none}:host(:not([interactions-off]))>*{pointer-events:auto}";
 

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

@@ -2,9 +2,9 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8d7400a7.js';
-import { i as angle, p as point, f as dimensions, g as rectangle } from './bundle.esm-590d2273.js';
-import { g as getMouseClientPosition } from './dom-43682375.js';
-import { p as parsePoint, c as createArrowheadPoints, b as arrowheadPointsToPolygonPoints, t as transformCircle, d as parseBounds } from './utils-a550c58f.js';
+import { k as angle, p as point, f as dimensions, g as rectangle } from './bundle.esm-d891316f.js';
+import { g as getMouseClientPosition } from './dom-d0877f90.js';
+import { p as parsePoint, c as createArrowheadPoints, d as arrowheadPointsToPolygonPoints, e as parseBounds, f as parsePoints } from './utils-5fe43b8a.js';
 import { c as classnames } from './index-455380d0.js';
 import './_commonjsHelpers-9943807e.js';
 
@@ -115,6 +115,66 @@ function translatePointToRelative(pt, canvasDimensions) {
   const scaleFactor = toRelativeScaleFactor(canvasDimensions);
   return point.scale(point.subtract(pt, 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) => point.add(point.scale(point.subtract(pt, original), bounds.width / (original.width || 1), bounds.height / (original.height || 1)), bounds));
+}
+function createRectangle(initialPoint, currentPoint, maintainAspectRatio) {
+  const bounds = 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 rectangle.create(fitBoundsX, fitBoundsY, fitBoundsSize, fitBoundsSize);
+  }
+  else {
+    return bounds;
+  }
+}
+function transformRectangle(bounds, start, current, anchor, maintainAspectRatio) {
+  const delta = point.subtract(current, start);
+  const { x: left, y: top, width: w, height: h } = bounds;
+  const right = left + w;
+  const bottom = top + h;
+  const topLeft = point.create(left, top);
+  const bottomLeft = point.create(left, bottom);
+  const topRight = point.create(right, top);
+  const bottomRight = point.create(right, bottom);
+  switch (anchor) {
+    case 'top-left':
+      return createRectangle(bottomRight, current, !!maintainAspectRatio);
+    case 'top':
+      return createRectangle(bottomRight, point.create(left, current.y), !!maintainAspectRatio);
+    case 'top-right':
+      return createRectangle(bottomLeft, current, !!maintainAspectRatio);
+    case 'right':
+      return createRectangle(bottomLeft, point.create(current.x, top), !!maintainAspectRatio);
+    case 'bottom-right':
+      return createRectangle(topLeft, current, !!maintainAspectRatio);
+    case 'bottom':
+      return createRectangle(topLeft, point.create(right, current.y), !!maintainAspectRatio);
+    case 'bottom-left':
+      return createRectangle(topRight, current, !!maintainAspectRatio);
+    case 'left':
+      return createRectangle(bottomRight, point.create(current.x, top), !!maintainAspectRatio);
+    case 'center':
+      return rectangle.create(bounds.x + delta.x, bounds.y + delta.y, bounds.width, bounds.height);
+  }
+}
 
 function getMarkupBoundingClientRect(element) {
   return element.getBoundingClientRect();
@@ -330,7 +390,7 @@ const ViewerMarkupCircle = class {
         this.startPosition != null &&
         this.elementBounds != null) {
         const position = translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
-        this.bounds = 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) => {
@@ -440,4 +500,206 @@ const ViewerMarkupCircle = class {
 };
 ViewerMarkupCircle.style = viewerMarkupCircleCss;
 
-export { ViewerMarkupArrow as vertex_viewer_markup_arrow, ViewerMarkupCircle as vertex_viewer_markup_circle };
+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) {
+    registerInstance(this, hostRef);
+    this.editBegin = createEvent(this, "editBegin", 7);
+    this.editEnd = createEvent(this, "editEnd", 7);
+    this.editCancel = 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(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(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 = 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 = 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 = 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 : parsePoints(this.pointsJson);
+    this.screenPoints = (_b = this.convertPointsToScreen()) !== null && _b !== void 0 ? _b : [];
+    this.bounds = (_c = this.bounds) !== null && _c !== void 0 ? _c : parseBounds(this.boundsJson);
+  }
+  render() {
+    if (this.screenPoints.length > 0 && this.elementBounds != null) {
+      return (h(Host, null, h("svg", { class: "svg" }, h("defs", null, h(SvgShadow, { id: "freeform-markup-shadow" })), h("g", { filter: "url(#freeform-markup-shadow)" }, 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 && (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 (h(Host, null, 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
+        ? point.create(Math.min(this.min.x, position.x), Math.min(this.min.y, position.y))
+        : position;
+    this.max =
+      this.max != null
+        ? point.create(Math.max(this.max.x, position.x), Math.max(this.max.y, position.y))
+        : position;
+    this.bounds = 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 getElement(this); }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "points": ["handlePointsJsonChange"],
+    "bounds": ["handleBoundsJsonChange"]
+  }; }
+};
+ViewerMarkupFreeform.style = viewerMarkupFreeformCss;
+
+export { ViewerMarkupArrow as vertex_viewer_markup_arrow, ViewerMarkupCircle as vertex_viewer_markup_circle, ViewerMarkupFreeform as vertex_viewer_markup_freeform };

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

@@ -3,10 +3,10 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d7400a7.js';
 import { s as stampTemplateWithId } from './templates-022199c1.js';
-import { a as isVertexViewerCircleMarkup, i as isVertexViewerArrowMarkup } from './utils-a550c58f.js';
-import { C as CircleMarkup, A as ArrowMarkup } from './markup-3ce3dccd.js';
-import './bundle.esm-590d2273.js';
-import './browser.esm-7dbdf78a.js';
+import { b as isVertexViewerFreeformMarkup, a as isVertexViewerCircleMarkup, i as isVertexViewerArrowMarkup } from './utils-5fe43b8a.js';
+import { F as FreeformMarkup, C as CircleMarkup, A as ArrowMarkup } from './markup-9b29aa94.js';
+import './bundle.esm-d891316f.js';
+import './browser.esm-e4fb17dc.js';
 
 const viewerMarkupToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
 
@@ -40,7 +40,15 @@ const ViewerMarkupTool = class {
     };
     this.handleMarkupEditEnd = () => {
       const { markupElement } = this.stateMap;
-      if (isVertexViewerCircleMarkup(markupElement)) {
+      if (isVertexViewerFreeformMarkup(markupElement)) {
+        const { points, bounds } = markupElement;
+        markupElement.points = undefined;
+        markupElement.bounds = undefined;
+        if (points != null && points.length > 0 && bounds != null) {
+          this.markupEnd.emit(new FreeformMarkup({ points, bounds }));
+        }
+      }
+      else if (isVertexViewerCircleMarkup(markupElement)) {
         const { bounds } = markupElement;
         markupElement.bounds = undefined;
         if (bounds != null) {
@@ -84,6 +92,12 @@ const ViewerMarkupTool = class {
   handleCircleTemplateIdChanged() {
     this.updateMarkupElement();
   }
+  /**
+   * @ignore
+   */
+  handleFreeformTemplateIdChanged() {
+    this.updateMarkupElement();
+  }
   /**
    * @ignore
    */
@@ -101,7 +115,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 (h(Host, null, h("slot", null)));
       }
       else {
@@ -130,6 +146,25 @@ const ViewerMarkupTool = class {
     }
     return document.createElement('vertex-viewer-markup-circle');
   }
+  createFreeformMarkupElement() {
+    if (this.freeformTemplateId != null) {
+      const element = stampTemplateWithId(window.document.body, this.freeformTemplateId, 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) {
@@ -141,9 +176,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);
@@ -159,6 +192,7 @@ const ViewerMarkupTool = class {
     "tool": ["handleToolChanged"],
     "arrowTemplateId": ["handleArrowTemplateIdChanged"],
     "circleTemplateId": ["handleCircleTemplateIdChanged"],
+    "freeformTemplateId": ["handleFreeformTemplateIdChanged"],
     "disabled": ["handleDisabledChanged"]
   }; }
 };

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

@@ -3,10 +3,10 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d7400a7.js';
 import { s as stampTemplateWithId } from './templates-022199c1.js';
-import { A as ArrowMarkup, C as CircleMarkup } from './markup-3ce3dccd.js';
-import { i as isVertexViewerArrowMarkup, a as isVertexViewerCircleMarkup } from './utils-a550c58f.js';
-import './bundle.esm-590d2273.js';
-import './browser.esm-7dbdf78a.js';
+import { A as ArrowMarkup, C as CircleMarkup, F as FreeformMarkup } from './markup-9b29aa94.js';
+import { i as isVertexViewerArrowMarkup, a as isVertexViewerCircleMarkup, b as isVertexViewerFreeformMarkup } from './utils-5fe43b8a.js';
+import './bundle.esm-d891316f.js';
+import './browser.esm-e4fb17dc.js';
 
 const viewerMarkupCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
 
@@ -52,6 +52,14 @@ const ViewerMarkup = class {
       el.bounds = bounds;
       return this.appendMarkupElement(el);
     }
+    else if (markup instanceof FreeformMarkup) {
+      const { bounds, points, id } = markup;
+      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}'.`);
     }
@@ -79,7 +87,9 @@ const ViewerMarkup = class {
    * @see {@link ViewerMarkup.getMarkupElement}
    */
   async getMarkupElements() {
-    return Array.from(this.hostEl.children).filter((e) => isVertexViewerArrowMarkup(e) || isVertexViewerCircleMarkup(e));
+    return Array.from(this.hostEl.children).filter((e) => isVertexViewerArrowMarkup(e) ||
+      isVertexViewerCircleMarkup(e) ||
+      isVertexViewerFreeformMarkup(e));
   }
   /**
    * Returns the markup element associated to the given ID.
@@ -195,6 +205,15 @@ const ViewerMarkup = class {
     }
     return document.createElement('vertex-viewer-markup-circle');
   }
+  createFreeformMarkupElement() {
+    if (this.freeformTemplateId != null) {
+      const element = stampTemplateWithId(window.document.body, this.freeformTemplateId, 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));
@@ -209,6 +228,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/esm/vertex-viewer-measurement-distance_2.entry.js

@@ -2,14 +2,14 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8d7400a7.js';
-import { i as angle, p as point, v as vector3, o as line3 } from './bundle.esm-590d2273.js';
-import { M as MeasurementUnits } from './orientation-c3e2af18.js';
-import { V as Viewport } from './viewport-8fea0743.js';
-import { M as MEASUREMENT_SNAP_DISTANCE, a as MEASUREMENT_LINE_CAP_LENGTH, t as translatePointToWorld, b as translateWorldPtToViewport, g as getViewingElementPositions } from './constants-083f6b2c.js';
-import { a as cssTransformCenterAt, g as getMouseClientPosition } from './dom-43682375.js';
+import { k as angle, p as point, v as vector3, o as line3 } from './bundle.esm-d891316f.js';
+import { M as MeasurementUnits } from './orientation-bb34b652.js';
+import { V as Viewport } from './viewport-d6f5cd7b.js';
+import { M as MEASUREMENT_SNAP_DISTANCE, a as MEASUREMENT_LINE_CAP_LENGTH, t as translatePointToWorld, b as translateWorldPtToViewport, g as getViewingElementPositions } from './constants-037e417f.js';
+import { a as cssTransformCenterAt, g as getMouseClientPosition } from './dom-d0877f90.js';
 import { c as classnames } from './index-455380d0.js';
-import { m as measurementCursor } from './cursors-39294365.js';
-import './browser.esm-7dbdf78a.js';
+import { m as measurementCursor } from './cursors-00835249.js';
+import './browser.esm-e4fb17dc.js';
 import './_commonjsHelpers-9943807e.js';
 
 function getMeasurementBoundingClientRect(el) {
@@ -232,7 +232,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 (h(Host, null, h("div", { class: "measurement" }, 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/esm/vertex-viewer-measurement-tool.entry.js

@@ -3,11 +3,11 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d7400a7.js';
 import { s as stampTemplateWithId } from './templates-022199c1.js';
-import './orientation-c3e2af18.js';
-import { D as DistanceMeasurement } from './measurement-78bd27fc.js';
-import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './constants-083f6b2c.js';
-import './browser.esm-7dbdf78a.js';
-import './bundle.esm-590d2273.js';
+import './orientation-bb34b652.js';
+import { D as DistanceMeasurement } from './measurement-8430d5d6.js';
+import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './constants-037e417f.js';
+import './browser.esm-e4fb17dc.js';
+import './bundle.esm-d891316f.js';
 
 const viewerMeasurementToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0}";
 

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

@@ -2,12 +2,12 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d7400a7.js';
-import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './constants-083f6b2c.js';
+import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './constants-037e417f.js';
 import { s as stampTemplateWithId } from './templates-022199c1.js';
-import './orientation-c3e2af18.js';
-import { D as DistanceMeasurement } from './measurement-78bd27fc.js';
-import './bundle.esm-590d2273.js';
-import './browser.esm-7dbdf78a.js';
+import './orientation-bb34b652.js';
+import { D as DistanceMeasurement } from './measurement-8430d5d6.js';
+import './bundle.esm-d891316f.js';
+import './browser.esm-e4fb17dc.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/esm/vertex-viewer-view-cube.entry.js

@@ -2,11 +2,11 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { h, F as Fragment, r as registerInstance, H as Host } from './index-8d7400a7.js';
-import { v as vector3, q as quaternion, s as euler } from './bundle.esm-590d2273.js';
+import { v as vector3, q as quaternion, s as euler } from './bundle.esm-d891316f.js';
 import { r as readDOM } from './stencil-540d92eb.js';
-import { O as Orientation, c as FramePerspectiveCamera, e as StandardView } from './orientation-c3e2af18.js';
+import { O as Orientation, c as FramePerspectiveCamera, e as StandardView } from './orientation-bb34b652.js';
 import { c as classnames } from './index-455380d0.js';
-import './browser.esm-7dbdf78a.js';
+import './browser.esm-e4fb17dc.js';
 import './_commonjsHelpers-9943807e.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars