@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

package/dist/components/viewer-markup-freeform.js

@@ -0,0 +1,251 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getMarkupBoundingClientRect } from './dom2.js';
+import { M as MarkupInteractionHandler, t as translatePointToRelative, h as transformRectangle, l as translatePointsToBounds, d as isValidStartEvent, m as parsePoints, j as parseBounds, S as SvgShadow, k as translateRectToScreen, c as translatePointToScreen } from './interactions.js';
+import { B as BoundingBox2d } from './viewer-markup-circle-components.js';
+import { p as point, e as rectangle } from './bundle.esm.js';
+import { g as getMouseClientPosition } from './dom.js';
+
+class FreeformMarkupInteractionHandler extends MarkupInteractionHandler {
+  constructor(markupEl, editBegin, editEnd) {
+    super();
+    this.markupEl = markupEl;
+    this.editBegin = editBegin;
+    this.editEnd = editEnd;
+    this.anchor = 'bottom-right';
+    this.handleResizeInteractionMove = (event) => {
+      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.anchor, event.shiftKey);
+        this.markupEl.points = translatePointsToBounds(this.resizePoints, this.resizeBounds, updatedBounds);
+        this.markupEl.bounds = updatedBounds;
+      }
+    };
+    this.handleResizeInteractionEnd = (event) => {
+      window.removeEventListener('pointermove', this.handleResizeInteractionMove);
+      window.removeEventListener('pointerup', this.handleResizeInteractionEnd);
+      this.resizeBounds = undefined;
+      this.editEnd.emit();
+    };
+  }
+  editAnchor(anchor, event) {
+    if (this.markupEl.mode === 'edit' && this.elementBounds != null) {
+      this.resizeBounds = this.markupEl.bounds;
+      this.resizePoints = this.markupEl.points;
+      this.anchor = anchor;
+      this.resizeStartPosition = translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+      window.addEventListener('pointermove', this.handleResizeInteractionMove);
+      window.addEventListener('pointerup', this.handleResizeInteractionEnd);
+    }
+  }
+  startInteraction(event) {
+    this.handleInteractionAttempt(event);
+  }
+  computeBoundingRect() {
+    return getMarkupBoundingClientRect(this.markupEl);
+  }
+  handleInteractionAttempt(event) {
+    var _a;
+    if (this.markupEl.mode !== '' &&
+      this.pointerId == null &&
+      this.elementBounds != null) {
+      this.pointerId = event.pointerId;
+      const screenPosition = getMouseClientPosition(event, this.elementBounds);
+      const position = translatePointToRelative(screenPosition, this.elementBounds);
+      this.updateMinAndMax(position);
+      this.markupEl.points = (_a = this.markupEl.points) !== null && _a !== void 0 ? _a : [position];
+      this.editBegin.emit();
+      this.acceptInteraction();
+    }
+  }
+  handleInteractionMove(event) {
+    if (this.pointerId === event.pointerId &&
+      this.markupEl.points != null &&
+      this.elementBounds != null) {
+      const screenPosition = getMouseClientPosition(event, this.elementBounds);
+      const position = translatePointToRelative(screenPosition, this.elementBounds);
+      this.updateMinAndMax(position);
+      this.markupEl.points = [...this.markupEl.points, position];
+    }
+  }
+  handleInteractionEnd(event) {
+    if (this.pointerId === event.pointerId) {
+      if (this.markupEl.mode !== '' &&
+        this.markupEl.points != null &&
+        this.markupEl.points.length > 2 &&
+        this.elementBounds != null) {
+        const screenPosition = getMouseClientPosition(event, this.elementBounds);
+        const position = translatePointToRelative(screenPosition, this.elementBounds);
+        this.updateMinAndMax(position);
+        this.markupEl.points = [...this.markupEl.points, position];
+        this.editEnd.emit();
+      }
+      else {
+        this.markupEl.points = undefined;
+      }
+      this.min = undefined;
+      this.max = undefined;
+      this.pointerId = undefined;
+    }
+  }
+  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.markupEl.bounds = rectangle.create(this.min.x, this.min.y, this.max.x - this.min.x, this.max.y - this.min.y);
+  }
+}
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.editBegin = createEvent(this, "editBegin", 7);
+    this.editEnd = createEvent(this, "editEnd", 7);
+    this.viewRendered = createEvent(this, "viewRendered", 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.screenPoints = [];
+    this.interactionHandler = new FreeformMarkupInteractionHandler(this.hostEl, this.editBegin, this.editEnd);
+    this.handleWindowPointerDown = (event) => {
+      if (isValidStartEvent(event)) {
+        this.interactionHandler.startInteraction(event);
+      }
+    };
+    this.handleTouchStart = (event) => {
+      event.preventDefault();
+    };
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.updateViewport();
+    this.handleViewerChanged(this.viewer);
+    this.updatePointsFromProps();
+  }
+  componentDidLoad() {
+    const resize = new ResizeObserver(() => this.updateViewport());
+    resize.observe(this.hostEl);
+    if (this.mode === 'create') {
+      window.addEventListener('pointerdown', this.handleWindowPointerDown);
+    }
+  }
+  componentDidRender() {
+    if (this.mode === '') {
+      this.viewRendered.emit();
+    }
+  }
+  disconnectedCallback() {
+    this.dispose();
+  }
+  async dispose() {
+    var _a;
+    (_a = this.registeredInteraction) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.registeredInteraction = undefined;
+    window.removeEventListener('pointerdown', this.handleWindowPointerDown);
+  }
+  /**
+   * @ignore
+   */
+  async handleViewerChanged(newViewer) {
+    var _a;
+    (_a = this.registeredInteraction) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.registeredInteraction = undefined;
+    if (newViewer != null) {
+      this.registeredInteraction = await newViewer.registerInteractionHandler(this.interactionHandler);
+    }
+  }
+  handlePointsChange() {
+    this.updatePointsFromProps();
+  }
+  handleBoundsChange() {
+    this.updatePointsFromProps();
+  }
+  handleModeChange() {
+    if (this.mode !== 'create') {
+      window.removeEventListener('pointerdown', this.handleWindowPointerDown);
+    }
+  }
+  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", onTouchStart: this.handleTouchStart }, 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.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+    }
+    else {
+      return (h(Host, null, h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));
+    }
+  }
+  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 this; }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "points": ["handlePointsChange"],
+    "bounds": ["handleBoundsChange"],
+    "mode": ["handleModeChange"]
+  }; }
+  static get style() { return viewerMarkupFreeformCss; }
+}, [1, "vertex-viewer-markup-freeform", {
+    "points": [1040],
+    "pointsJson": [1, "points"],
+    "bounds": [1040],
+    "boundsJson": [1, "bounds"],
+    "mode": [513],
+    "viewer": [16],
+    "elementBounds": [32],
+    "screenPoints": [32],
+    "dispose": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-markup-freeform"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-markup-freeform":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerMarkupFreeform);
+      }
+      break;
+  } });
+}
+
+export { ViewerMarkupFreeform as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-markup-freeform.js.map

package/dist/components/viewer-markup-freeform.js.map

@@ -0,0 +1 @@
+{"file":"viewer-markup-freeform.js","mappings":"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","names":["Point","Rectangle"],"sources":["./src/components/viewer-markup-freeform/interactions.ts","./src/components/viewer-markup-freeform/viewer-markup-freeform.css?tag=vertex-viewer-markup-freeform&encapsulation=shadow","./src/components/viewer-markup-freeform/viewer-markup-freeform.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point, Rectangle } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { MarkupInteractionHandler } from '../../lib/markup/interactions';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  BoundingBox2dAnchorPosition,\n  transformRectangle,\n  translatePointsToBounds,\n  translatePointToRelative,\n} from '../viewer-markup/markup-utils';\n\nexport class FreeformMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private min?: Point.Point;\n  private max?: Point.Point;\n\n  private resizeBounds?: Rectangle.Rectangle;\n  private resizePoints?: Point.Point[];\n  private resizeStartPosition?: Point.Point;\n\n  private anchor: BoundingBox2dAnchorPosition = 'bottom-right';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupFreeformElement,\n    private readonly editBegin: EventEmitter<void>,\n    private readonly editEnd: EventEmitter<void>\n  ) {\n    super();\n  }\n\n  public editAnchor(\n    anchor: BoundingBox2dAnchorPosition,\n    event: PointerEvent\n  ): void {\n    if (this.markupEl.mode === 'edit' && this.elementBounds != null) {\n      this.resizeBounds = this.markupEl.bounds;\n      this.resizePoints = this.markupEl.points;\n      this.anchor = anchor;\n      this.resizeStartPosition = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n\n      window.addEventListener('pointermove', this.handleResizeInteractionMove);\n      window.addEventListener('pointerup', this.handleResizeInteractionEnd);\n    }\n  }\n\n  public startInteraction(event: PointerEvent): void {\n    this.handleInteractionAttempt(event);\n  }\n\n  protected computeBoundingRect(): DOMRect {\n    return getMarkupBoundingClientRect(this.markupEl);\n  }\n\n  protected handleInteractionAttempt(event: PointerEvent): void {\n    if (\n      this.markupEl.mode !== '' &&\n      this.pointerId == null &&\n      this.elementBounds != null\n    ) {\n      this.pointerId = event.pointerId;\n      const screenPosition = getMouseClientPosition(event, this.elementBounds);\n      const position = translatePointToRelative(\n        screenPosition,\n        this.elementBounds\n      );\n      this.updateMinAndMax(position);\n      this.markupEl.points = this.markupEl.points ?? [position];\n\n      this.editBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (\n      this.pointerId === event.pointerId &&\n      this.markupEl.points != null &&\n      this.elementBounds != null\n    ) {\n      const screenPosition = getMouseClientPosition(event, this.elementBounds);\n      const position = translatePointToRelative(\n        screenPosition,\n        this.elementBounds\n      );\n      this.updateMinAndMax(position);\n      this.markupEl.points = [...this.markupEl.points, position];\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      if (\n        this.markupEl.mode !== '' &&\n        this.markupEl.points != null &&\n        this.markupEl.points.length > 2 &&\n        this.elementBounds != null\n      ) {\n        const screenPosition = getMouseClientPosition(\n          event,\n          this.elementBounds\n        );\n        const position = translatePointToRelative(\n          screenPosition,\n          this.elementBounds\n        );\n\n        this.updateMinAndMax(position);\n\n        this.markupEl.points = [...this.markupEl.points, position];\n        this.editEnd.emit();\n      } else {\n        this.markupEl.points = undefined;\n      }\n\n      this.min = undefined;\n      this.max = undefined;\n      this.pointerId = undefined;\n    }\n  }\n\n  private handleResizeInteractionMove = (event: PointerEvent): void => {\n    if (\n      this.resizeStartPosition != null &&\n      this.elementBounds != null &&\n      this.resizeBounds != null &&\n      this.resizePoints != null\n    ) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n\n      const updatedBounds = transformRectangle(\n        this.resizeBounds,\n        this.resizeStartPosition,\n        position,\n        this.anchor,\n        event.shiftKey\n      );\n\n      this.markupEl.points = translatePointsToBounds(\n        this.resizePoints,\n        this.resizeBounds,\n        updatedBounds\n      );\n      this.markupEl.bounds = updatedBounds;\n    }\n  };\n\n  private handleResizeInteractionEnd = (event: PointerEvent): void => {\n    window.removeEventListener('pointermove', this.handleResizeInteractionMove);\n    window.removeEventListener('pointerup', this.handleResizeInteractionEnd);\n\n    this.resizeBounds = undefined;\n    this.editEnd.emit();\n  };\n\n  private updateMinAndMax(position: Point.Point): void {\n    this.min =\n      this.min != null\n        ? Point.create(\n            Math.min(this.min.x, position.x),\n            Math.min(this.min.y, position.y)\n          )\n        : position;\n    this.max =\n      this.max != null\n        ? Point.create(\n            Math.max(this.max.x, position.x),\n            Math.max(this.max.y, position.y)\n          )\n        : position;\n    this.markupEl.bounds = Rectangle.create(\n      this.min.x,\n      this.min.y,\n      this.max.x - this.min.x,\n      this.max.y - this.min.y\n    );\n  }\n}\n",":host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  /**\n   * @prop --viewer-markup-freeform-stroke-color: A CSS color that\n   * specifies the color of the freeform line.\n   */\n  --viewer-markup-freeform-stroke-color: var(--red-800);\n  /**\n    * @prop --viewer-markup-freeform-stroke-width: A CSS length that\n    * specifies the width of the freeform line.\n    */\n  --viewer-markup-freeform-stroke-width: 4;\n  /**\n    * @prop --viewer-markup-freeform-line-join: The join behavior between\n    * the lines making up this freeform markup. Defaults to `round`.\n    */\n  --viewer-markup-freeform-line-join: round;\n  /**\n    * @prop --viewer-markup-freeform-line-cap: The cap behavior for\n    * the lines making up this freeform markup. Defaults to `round`.\n    */\n  --viewer-markup-freeform-line-cap: round;\n  /**\n   * @prop --viewer-markup-freeform-bounds-outline-border-color: A CSS color that\n   * specifies the color of the circle's selected bounding box border.\n   */\n  --viewer-markup-freeform-bounds-outline-border-color: var(--blue-400);\n  /**\n    * @prop --viewer-markup-freeform-bounds-outline-border-width: A CSS length that\n    * specifies the width of the circle's selected bounding box border.\n    */\n  --viewer-markup-freeform-bounds-outline-border-width: 1px;\n  /**\n    * @prop --viewer-markup-freeform-bounds-edge-anchor-border-color: A CSS color that\n    * specifies the color of the edge and corner resize anchors' borders.\n    */\n  --viewer-markup-freeform-bounds-edge-anchor-border-color: var(--blue-400);\n  /**\n    * @prop --viewer-markup-freeform-bounds-edge-anchor-border-width: A CSS length that\n    * specifies the width of the edge and corner resize anchors' borders.\n    */\n  --viewer-markup-freeform-bounds-edge-anchor-border-width: 1px;\n  /**\n    * @prop --viewer-markup-freeform-bounds-edge-anchor-background-color: A CSS color that\n    * specifies the background color of the edge and corner resize anchors.\n    */\n  --viewer-markup-freeform-bounds-edge-anchor-background-color: white;\n  /**\n    * @prop --viewer-markup-freeform-bounds-center-anchor-border-color: A CSS color that\n    * specifies the color of the center reposition anchor's border.\n    */\n  --viewer-markup-freeform-bounds-center-anchor-border-color: white;\n  /**\n    * @prop --viewer-markup-freeform-bounds-center-anchor-border-width: A CSS length that\n    * specifies the width of the center reposition anchor's border.\n    */\n  --viewer-markup-freeform-bounds-center-anchor-border-width: 1px;\n  /**\n    * @prop --viewer-markup-freeform-bounds-center-anchor-background-color: A CSS color that\n    * specifies the background color of the center reposition anchor.\n    */\n  --viewer-markup-freeform-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n    * @prop --viewer-markup-freeform-bounds-anchor-width: A CSS length that\n    * specifies the width of the resize and reposition anchors.\n    */\n  --viewer-markup-freeform-bounds-anchor-width: 9px;\n  /**\n    * @prop --viewer-markup-freeform-bounds-anchor-height: A CSS length that\n    * specifies the height of the resize and reposition anchors.\n    */\n  --viewer-markup-freeform-bounds-anchor-height: 9px;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.path {\n  pointer-events: auto;\n  cursor: default;\n  stroke: var(--viewer-markup-freeform-stroke-color);\n  stroke-width: var(--viewer-markup-freeform-stroke-width);\n  stroke-linejoin: var(--viewer-markup-freeform-line-join);\n  stroke-linecap: var(--viewer-markup-freeform-line-cap);\n}\n\n.create-overlay {\n  pointer-events: auto;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n}\n\n.bounds-container {\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.bounds-outline {\n  position: absolute;\n  border-width: var(--viewer-markup-freeform-bounds-outline-border-width);\n  border-color: var(--viewer-markup-freeform-bounds-outline-border-color);\n  border-style: solid;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-anchor-position {\n  position: absolute;\n  transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n  pointer-events: auto;\n  cursor: default;\n  user-select: none;\n}\n\n.bounds-default-anchor {\n  width: var(--viewer-markup-freeform-bounds-anchor-width);\n  height: var(--viewer-markup-freeform-bounds-anchor-height);\n  box-sizing: border-box;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n  border-radius: 100%;\n  border-width: var(--viewer-markup-freeform-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-freeform-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-freeform-bounds-center-anchor-background-color);\n}\n\n.bounds-edge-anchor {\n  border-width: var(--viewer-markup-freeform-bounds-edge-anchor-border-width);\n  border-color: var(--viewer-markup-freeform-bounds-edge-anchor-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-freeform-bounds-edge-anchor-background-color);\n}","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidStartEvent,\n  translatePointToScreen,\n  translateRectToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { parseBounds } from '../viewer-markup-circle/utils';\nimport { BoundingBox2d } from '../viewer-markup-circle/viewer-markup-circle-components';\nimport { FreeformMarkupInteractionHandler } from './interactions';\nimport { parsePoints } from './utils';\n\n/**\n * The supported markup modes.\n *\n * @see {@link ViewerMarkupFreeformMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupFreeformMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-freeform',\n  styleUrl: 'viewer-markup-freeform.css',\n  shadow: true,\n})\nexport class ViewerMarkupFreeform {\n  /**\n   * The positions of the various points of this freeform markup. Can either be an array of\n   * `Point`s or a JSON string representation in the format of `[[x1, y1], [x2, y2]]` or\n   * `[{\"x\": 0, \"y\": 0}, {\"x\": 0, \"y\": 0}]`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public points?: Point.Point[];\n\n  /**\n   * The positions of the various points of this freeform markup. Can either be an array of\n   * `Point`s or a JSON string representation in the format of `[[x1, y1], [x2, y2]]` or\n   * `[{\"x\": 0, \"y\": 0}, {\"x\": 0, \"y\": 0}]`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ attribute: 'points' })\n  public pointsJson?: string;\n\n  /**\n   * The bounds of the freeform. Can either be an instance of a `Rectangle` or\n   * a JSON string representation in the format of `[x, y, width, height]` or\n   * `{\"x\": 0, \"y\": 0, \"width\": 10, \"height\": 10}`.\n   *\n   * Bounds are expected to have relative coordinates, with `[x, y]` from `[-0.5, 0.5]`\n   * and `[width, height]` from `[0, 1]`, e.g. `[0, 0, 0.25, 0.25]`corresponds to a freeform\n   * with a diameter of one fourth the viewport's smallest size in the center of the viewport.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public bounds?: Rectangle.Rectangle;\n\n  /**\n   * The bounds of the freeform. Can either be an instance of a `Rectangle` or\n   * a JSON string representation in the format of `[x, y, width, height]` or\n   * `{\"x\": 0, \"y\": 0, \"width\": 0.1, \"height\": 0.1}`.\n   *\n   * Bounds are expected to have relative coordinates, with `[x, y]` from `[-0.5, 0.5]`\n   * and `[width, height]` from `[0, 1]`, e.g. `[0, 0, 0.25, 0.25]`corresponds to a freeform\n   * with a diameter of one fourth the viewport's smallest size in the center of the viewport.\n   */\n  @Prop({ attribute: 'bounds' })\n  public boundsJson?: string;\n\n  /**\n   * A mode that specifies how the markup component should behave. When\n   * unset, the component will not respond to interactions with the handles.\n   * When `edit`, the markup anchors are interactive and the user is able\n   * to reposition them. When `create`, anytime the user clicks on the canvas,\n   * a new markup will be performed.\n   */\n  @Prop({ reflect: true })\n  public mode: ViewerMarkupFreeformMode = '';\n\n  /**\n   * The viewer to connect to markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * An event that is dispatched anytime the user begins editing the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public editBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished editing the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public editEnd!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when this markup element is in view\n   * mode (`this.mode === \"\"`), and it completes a rerender.\n   */\n  @Event({ bubbles: true })\n  public viewRendered!: EventEmitter<void>;\n\n  @Element()\n  private hostEl!: HTMLVertexViewerMarkupFreeformElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  @State()\n  private screenPoints: Point.Point[] = [];\n\n  private interactionHandler = new FreeformMarkupInteractionHandler(\n    this.hostEl,\n    this.editBegin,\n    this.editEnd\n  );\n\n  private registeredInteraction?: Disposable;\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.updateViewport();\n    this.handleViewerChanged(this.viewer);\n    this.updatePointsFromProps();\n  }\n\n  protected componentDidLoad(): void {\n    const resize = new ResizeObserver(() => this.updateViewport());\n    resize.observe(this.hostEl);\n\n    if (this.mode === 'create') {\n      window.addEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  protected componentDidRender(): void {\n    if (this.mode === '') {\n      this.viewRendered.emit();\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.dispose();\n  }\n\n  @Method()\n  public async dispose(): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected async handleViewerChanged(\n    newViewer?: HTMLVertexViewerElement\n  ): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    if (newViewer != null) {\n      this.registeredInteraction = await newViewer.registerInteractionHandler(\n        this.interactionHandler\n      );\n    }\n  }\n\n  @Watch('points')\n  protected handlePointsChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('bounds')\n  protected handleBoundsChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('mode')\n  protected handleModeChange(): void {\n    if (this.mode !== 'create') {\n      window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  private updateViewport(): void {\n    const rect = getMarkupBoundingClientRect(this.hostEl);\n    this.elementBounds = rect;\n    this.screenPoints = this.convertPointsToScreen() ?? this.screenPoints;\n  }\n\n  private updatePointsFromProps(): void {\n    this.points = this.points ?? parsePoints(this.pointsJson);\n    this.screenPoints = this.convertPointsToScreen() ?? [];\n    this.bounds = this.bounds ?? parseBounds(this.boundsJson);\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.screenPoints.length > 0 && this.elementBounds != null) {\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"freeform-markup-shadow\" />\n            </defs>\n            <g filter=\"url(#freeform-markup-shadow)\">\n              <path\n                class=\"path\"\n                d={this.screenPoints.reduce(\n                  (d, pt) => `${d}L${pt.x},${pt.y}`,\n                  `M${this.screenPoints[0].x},${this.screenPoints[0].y}`\n                )}\n                fill=\"none\"\n              />\n            </g>\n          </svg>\n          {this.mode === 'edit' && this.bounds != null && (\n            <BoundingBox2d\n              bounds={translateRectToScreen(this.bounds, this.elementBounds)}\n              onTopLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top-left', e)\n              }\n              onTopRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top-right', e)\n              }\n              onTopAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top', e)\n              }\n              onBottomLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom-left', e)\n              }\n              onBottomRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom-right', e)\n              }\n              onBottomAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom', e)\n              }\n              onLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('left', e)\n              }\n              onRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('right', e)\n              }\n              onCenterAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('center', e)\n              }\n            />\n          )}\n          {this.mode === 'create' && (\n            <div\n              class=\"create-overlay\"\n              onTouchStart={this.handleTouchStart}\n            ></div>\n          )}\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div\n            class=\"create-overlay\"\n            onTouchStart={this.handleTouchStart}\n          ></div>\n        </Host>\n      );\n    }\n  }\n\n  private handleWindowPointerDown = (event: PointerEvent): void => {\n    if (isValidStartEvent(event)) {\n      this.interactionHandler.startInteraction(event);\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent): void => {\n    event.preventDefault();\n  };\n\n  private convertPointsToScreen(): Point.Point[] | undefined {\n    const elementBounds = this.elementBounds;\n    if (elementBounds != null) {\n      return this.points?.map((pt) =>\n        translatePointToScreen(pt, elementBounds)\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/components/viewer-measurement-line.js

@@ -0,0 +1,77 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as point, c as angle } from './bundle.esm.js';
+
+const viewerMeasurementLineCss = ":host{display:block;--viewer-measurement-line-stroke:var(--white);--viewer-measurement-line-stroke-opacity:0.75;--viewer-measurement-line-stroke-width:1.25px;--viewer-measurement-line-fill:var(--neutral-900);--viewer-measurement-line-fill-width:2px;--viewer-measurement-line-start-cap-visibility:initial;--viewer-measurement-line-end-cap-visibility:initial}svg{width:100%;height:100%}.line-stroke{stroke-width:calc(\n    var(--viewer-measurement-line-fill-width) +\n      var(--viewer-measurement-line-stroke-width)\n  );stroke:var(--viewer-measurement-line-stroke);opacity:var(--viewer-measurement-line-stroke-opacity)}.line-fill{stroke-width:var(--viewer-measurement-line-fill-width);stroke:var(--viewer-measurement-line-fill)}.start-cap{visibility:var(--viewer-measurement-line-start-cap-visibility)}.end-cap{visibility:var(--viewer-measurement-line-end-cap-visibility)}";
+
+const ViewerMeasurementLine = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * A point that specifies the starting point of the line.
+     */
+    this.start = point.create();
+    /**
+     * A point that specifies the ending point of the line.
+     */
+    this.end = point.create();
+    /**
+     * A length of the line cap. The line cap is a line at each end of a line.
+     */
+    this.capLength = 0;
+    /**
+     * The type of [SVG pointer
+     * events](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events)
+     * that the line should respond to.
+     */
+    this.pointerEvents = 'none';
+  }
+  /**
+   * @ignore
+   */
+  render() {
+    const angle$1 = angle.fromPoints(this.start, this.end);
+    const lineFillEndCaps = getEndCapPoints(this.start, this.end, angle$1, this.capLength);
+    const lineStrokeEndCaps = getEndCapPoints(this.start, this.end, angle$1, this.capLength + 1);
+    return (h("svg", null, h("g", { class: "line-stroke", "pointer-events": this.pointerEvents }, h("line", { class: "line", x1: this.start.x, y1: this.start.y, x2: this.end.x, y2: this.end.y }), h("line", { class: "start-cap", x1: lineStrokeEndCaps.startEndCap.start.x, y1: lineStrokeEndCaps.startEndCap.start.y, x2: lineStrokeEndCaps.startEndCap.end.x, y2: lineStrokeEndCaps.startEndCap.end.y }), h("line", { class: "end-cap", x1: lineStrokeEndCaps.endEndCap.start.x, y1: lineStrokeEndCaps.endEndCap.start.y, x2: lineStrokeEndCaps.endEndCap.end.x, y2: lineStrokeEndCaps.endEndCap.end.y })), h("g", { class: "line-fill", "pointer-events": this.pointerEvents }, h("line", { class: "line", x1: this.start.x, y1: this.start.y, x2: this.end.x, y2: this.end.y }), h("line", { class: "start-cap", x1: lineFillEndCaps.startEndCap.start.x, y1: lineFillEndCaps.startEndCap.start.y, x2: lineFillEndCaps.startEndCap.end.x, y2: lineFillEndCaps.startEndCap.end.y }), h("line", { class: "end-cap", x1: lineFillEndCaps.endEndCap.start.x, y1: lineFillEndCaps.endEndCap.start.y, x2: lineFillEndCaps.endEndCap.end.x, y2: lineFillEndCaps.endEndCap.end.y }))));
+  }
+  static get style() { return viewerMeasurementLineCss; }
+}, [1, "vertex-viewer-measurement-line", {
+    "start": [16],
+    "end": [16],
+    "capLength": [2, "cap-length"],
+    "pointerEvents": [1, "pointer-events"]
+  }]);
+function getEndCapPoints(start, end, angle, length) {
+  return {
+    startEndCap: getPerpendicularLine(start, angle, length),
+    endEndCap: getPerpendicularLine(end, angle, length),
+  };
+}
+function getPerpendicularLine(pt, angle, length) {
+  const perpAngle = angle + Math.PI / 2;
+  const start = point.add(pt, point.polar(length / 2, perpAngle));
+  const end = point.add(pt, point.polar(length / 2, perpAngle + Math.PI));
+  return { start, end };
+}
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-measurement-line"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-measurement-line":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerMeasurementLine);
+      }
+      break;
+  } });
+}
+
+export { ViewerMeasurementLine as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-measurement-line.js.map

package/dist/components/viewer-measurement-line.js.map

@@ -0,0 +1 @@
+{"file":"viewer-measurement-line.js","mappings":"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","names":["Point","angle","Angle"],"sources":["./src/components/viewer-measurement-line/viewer-measurement-line.css?tag=vertex-viewer-measurement-line&encapsulation=shadow","./src/components/viewer-measurement-line/viewer-measurement-line.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  /**\n   * @prop --viewer-measurement-line-stroke: An SVG stroke that specifies the\n   * color stroke of the line.\n   */\n  --viewer-measurement-line-stroke: var(--white);\n\n  /**\n   * @prop --viewer-measurement-line-stroke-opacity: An SVG stroke that\n   * specifies the stroke opacity of the line.\n   */\n  --viewer-measurement-line-stroke-opacity: 0.75;\n\n  /**\n    * @prop --viewer-measurement-line-stroke-width: A CSS length that specifies\n    * the width of the stroke.\n    */\n  --viewer-measurement-line-stroke-width: 1.25px;\n\n  /**\n   * @prop --viewer-measurement-line-fill: An SVG stroke that specifies the\n   * color fill of the line.\n   */\n  --viewer-measurement-line-fill: var(--neutral-900);\n\n  /**\n   * @prop --viewer-measurement-line-fill-width: A CSS length that specifies\n   * the width of the fill.\n   */\n  --viewer-measurement-line-fill-width: 2px;\n\n  /**\n   * @prop --viewer-measurement-line-start-cap-visibility: An CSS visibility\n   * value for the cap at the start of the line.\n   */\n  --viewer-measurement-line-start-cap-visibility: initial;\n\n  /**\n   * @prop --viewer-measurement-line-end-cap-visibility: An CSS visibility value\n   * for the cap at the end of the line.\n   */\n  --viewer-measurement-line-end-cap-visibility: initial;\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n}\n\n.line-stroke {\n  stroke-width: calc(\n    var(--viewer-measurement-line-fill-width) +\n      var(--viewer-measurement-line-stroke-width)\n  );\n  stroke: var(--viewer-measurement-line-stroke);\n  opacity: var(--viewer-measurement-line-stroke-opacity);\n}\n\n.line-fill {\n  stroke-width: var(--viewer-measurement-line-fill-width);\n  stroke: var(--viewer-measurement-line-fill);\n}\n\n.start-cap {\n  visibility: var(--viewer-measurement-line-start-cap-visibility);\n}\n\n.end-cap {\n  visibility: var(--viewer-measurement-line-end-cap-visibility);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Angle, Point } from '@vertexvis/geometry';\n\n@Component({\n  tag: 'vertex-viewer-measurement-line',\n  styleUrl: 'viewer-measurement-line.css',\n  shadow: true,\n})\nexport class ViewerMeasurementLine {\n  /**\n   * A point that specifies the starting point of the line.\n   */\n  @Prop()\n  public start: Point.Point = Point.create();\n\n  /**\n   * A point that specifies the ending point of the line.\n   */\n  @Prop()\n  public end: Point.Point = Point.create();\n\n  /**\n   * A length of the line cap. The line cap is a line at each end of a line.\n   */\n  @Prop()\n  public capLength = 0;\n\n  /**\n   * The type of [SVG pointer\n   * events](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events)\n   * that the line should respond to.\n   */\n  @Prop()\n  public pointerEvents = 'none';\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    const angle = Angle.fromPoints(this.start, this.end);\n    const lineFillEndCaps = getEndCapPoints(\n      this.start,\n      this.end,\n      angle,\n      this.capLength\n    );\n    const lineStrokeEndCaps = getEndCapPoints(\n      this.start,\n      this.end,\n      angle,\n      this.capLength + 1\n    );\n\n    return (\n      <svg>\n        <g class=\"line-stroke\" pointer-events={this.pointerEvents}>\n          <line\n            class=\"line\"\n            x1={this.start.x}\n            y1={this.start.y}\n            x2={this.end.x}\n            y2={this.end.y}\n          />\n\n          <line\n            class=\"start-cap\"\n            x1={lineStrokeEndCaps.startEndCap.start.x}\n            y1={lineStrokeEndCaps.startEndCap.start.y}\n            x2={lineStrokeEndCaps.startEndCap.end.x}\n            y2={lineStrokeEndCaps.startEndCap.end.y}\n          />\n\n          <line\n            class=\"end-cap\"\n            x1={lineStrokeEndCaps.endEndCap.start.x}\n            y1={lineStrokeEndCaps.endEndCap.start.y}\n            x2={lineStrokeEndCaps.endEndCap.end.x}\n            y2={lineStrokeEndCaps.endEndCap.end.y}\n          />\n        </g>\n\n        <g class=\"line-fill\" pointer-events={this.pointerEvents}>\n          <line\n            class=\"line\"\n            x1={this.start.x}\n            y1={this.start.y}\n            x2={this.end.x}\n            y2={this.end.y}\n          />\n\n          <line\n            class=\"start-cap\"\n            x1={lineFillEndCaps.startEndCap.start.x}\n            y1={lineFillEndCaps.startEndCap.start.y}\n            x2={lineFillEndCaps.startEndCap.end.x}\n            y2={lineFillEndCaps.startEndCap.end.y}\n          />\n\n          <line\n            class=\"end-cap\"\n            x1={lineFillEndCaps.endEndCap.start.x}\n            y1={lineFillEndCaps.endEndCap.start.y}\n            x2={lineFillEndCaps.endEndCap.end.x}\n            y2={lineFillEndCaps.endEndCap.end.y}\n          />\n        </g>\n      </svg>\n    );\n  }\n}\n\ninterface EndCapPoints {\n  start: Point.Point;\n  end: Point.Point;\n}\n\ninterface LinePoints {\n  startEndCap: EndCapPoints;\n  endEndCap: EndCapPoints;\n}\n\nfunction getEndCapPoints(\n  start: Point.Point,\n  end: Point.Point,\n  angle: number,\n  length: number\n): LinePoints {\n  return {\n    startEndCap: getPerpendicularLine(start, angle, length),\n    endEndCap: getPerpendicularLine(end, angle, length),\n  };\n}\n\nfunction getPerpendicularLine(\n  pt: Point.Point,\n  angle: number,\n  length: number\n): { start: Point.Point; end: Point.Point } {\n  const perpAngle = angle + Math.PI / 2;\n  const start = Point.add(pt, Point.polar(length / 2, perpAngle));\n  const end = Point.add(pt, Point.polar(length / 2, perpAngle + Math.PI));\n  return { start, end };\n}\n"],"version":3}

package/dist/components/viewer-measurement-overlays.js

@@ -0,0 +1,184 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { h, Fragment, proxyCustomElement, HTMLElement as HTMLElement$1, Host } from '@stencil/core/internal/client';
+import './mapper.js';
+import './wrappers_pb.js';
+import './streamAttributes.js';
+import { M as MeasurementOverlayManager } from './overlays.js';
+import { p as point, l as line3 } from './bundle.esm.js';
+import { d as defineCustomElement$1 } from './viewer-measurement-line.js';
+
+function translateWorldLineToViewport(line, params) {
+  const { camera, viewport } = params;
+  const isStartBehindCamera = camera.isPointBehindNear(line.start);
+  const isEndBehindCamera = camera.isPointBehindNear(line.end);
+  // If either the start or end of the line is behind the camera, then we need
+  // to truncate the line so it can be presented correctly. You cannot use a
+  // projection matrix to compute a point behind the near plane.
+  if (isStartBehindCamera || isEndBehindCamera) {
+    const pt = camera.intersectLineWithNear(line);
+    const newLine = line3.create({
+      start: isStartBehindCamera && pt != null ? pt : line.start,
+      end: isEndBehindCamera && pt != null ? pt : line.end,
+    });
+    const ndc = line3.transformMatrix(newLine, camera.projectionViewMatrix);
+    return {
+      start: viewport.transformVectorToViewport(ndc.start),
+      end: viewport.transformVectorToViewport(ndc.end),
+      hideStart: isStartBehindCamera,
+      hideEnd: isEndBehindCamera,
+    };
+  }
+  else {
+    const ndc = line3.transformMatrix(line, camera.projectionViewMatrix);
+    return {
+      start: viewport.transformVectorToViewport(ndc.start),
+      end: viewport.transformVectorToViewport(ndc.end),
+      hideStart: false,
+      hideEnd: false,
+    };
+  }
+}
+function getViewingElementPositions(line, interactingAnchor, params) {
+  const { start: startPt, end: endPt, hideStart, hideEnd, } = translateWorldLineToViewport(line, params);
+  const labelPt = point.lerp(startPt, endPt, 0.5);
+  const indicatorPt = interactingAnchor !== 'none'
+    ? getIndicatorPtForAnchor(line, interactingAnchor, params)
+    : undefined;
+  return { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd };
+}
+function getIndicatorPtForAnchor(line, anchor, params) {
+  return params.viewport.transformWorldToViewport(anchor === 'start' ? line.start : line.end, params.camera.projectionViewMatrix);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const MeasurementOverlayView = ({ overlay, viewport, camera }) => {
+  if (overlay.type === 'line') {
+    return (h(LineOverlayView, { overlay: overlay, viewport: viewport, camera: camera }));
+  }
+  else {
+    return (h(DistanceVectorOverlayView, { overlay: overlay, viewport: viewport, camera: camera }));
+  }
+};
+const LineOverlayView = ({ overlay, camera, viewport }) => {
+  const { start, end } = translateWorldLineToViewport(overlay, {
+    camera,
+    viewport,
+  });
+  return (h("vertex-viewer-measurement-line", { class: "measurement-line", start: start, end: end }));
+};
+const DistanceVectorOverlayView = ({ overlay: { x, y, z }, camera, viewport }) => {
+  const params = { camera, viewport };
+  const { start: xs, end: xe } = translateWorldLineToViewport(x, params);
+  const { start: ys, end: ye } = translateWorldLineToViewport(y, params);
+  const { start: zs, end: ze } = translateWorldLineToViewport(z, params);
+  return (h(Fragment, null,
+    h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-x", start: xs, end: xe }),
+    h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-y", start: ys, end: ye }),
+    h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-z", start: zs, end: ze })));
+};
+
+const viewerMeasurementOverlaysCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;--viewer-measurement-overlays-x-axis-color:var(--x-axis-color);--viewer-measurement-overlays-y-axis-color:var(--y-axis-color);--viewer-measurement-overlays-z-axis-color:var(--z-axis-color)}.measurement-line{position:absolute;width:100%;height:100%}.measurement-line.distance-vector-x{--viewer-measurement-line-fill:var(\n    --viewer-measurement-overlays-x-axis-color\n  )}.measurement-line.distance-vector-y{--viewer-measurement-line-fill:var(\n    --viewer-measurement-overlays-y-axis-color\n  )}.measurement-line.distance-vector-z{--viewer-measurement-line-fill:var(\n    --viewer-measurement-overlays-z-axis-color\n  )}";
+
+const ViewerMeasurementOverlays = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The model that contains the overlays to present.
+     */
+    this.measurementOverlays = new MeasurementOverlayManager();
+    this.overlays = [];
+    this.updateCamera = () => {
+      var _a, _b;
+      this.camera = (_b = (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.frame) === null || _b === void 0 ? void 0 : _b.scene.camera;
+    };
+  }
+  /**
+   * @ignore
+   */
+  handleMeasurementOverlaysChanged() {
+    this.removeModelListeners();
+    this.addModelListeners();
+    this.updateOverlays();
+  }
+  /**
+   * @ignore
+   */
+  handleViewerChanged(newViewer, oldViewer) {
+    this.removeViewerListeners(oldViewer);
+    this.addViewerListeners();
+    this.updateCamera();
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.addModelListeners();
+    this.addViewerListeners();
+    this.updateOverlays();
+    this.updateCamera();
+  }
+  addModelListeners() {
+    this.onOverlaysChangedListener = this.measurementOverlays.onOverlaysChanged(() => this.updateOverlays());
+  }
+  removeModelListeners() {
+    var _a;
+    (_a = this.onOverlaysChangedListener) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.onOverlaysChangedListener = undefined;
+  }
+  addViewerListeners() {
+    var _a;
+    (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.addEventListener('frameReceived', this.updateCamera);
+  }
+  removeViewerListeners(viewer) {
+    viewer === null || viewer === void 0 ? void 0 : viewer.removeEventListener('frameReceived', this.updateCamera);
+  }
+  updateOverlays() {
+    this.overlays = this.measurementOverlays.getOverlays();
+  }
+  /**
+   * @ignore
+   */
+  render() {
+    return (h(Host, null, this.overlays.map((overlay) => {
+      if (this.camera != null && this.viewer != null) {
+        return (h(MeasurementOverlayView, { overlay: overlay, viewport: this.viewer.viewport, camera: this.camera }));
+      }
+    })));
+  }
+  static get watchers() { return {
+    "measurementOverlays": ["handleMeasurementOverlaysChanged"],
+    "viewer": ["handleViewerChanged"]
+  }; }
+  static get style() { return viewerMeasurementOverlaysCss; }
+}, [1, "vertex-viewer-measurement-overlays", {
+    "measurementOverlays": [16],
+    "camera": [1040],
+    "viewer": [16],
+    "overlays": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-measurement-overlays", "vertex-viewer-measurement-line"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-measurement-overlays":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerMeasurementOverlays);
+      }
+      break;
+    case "vertex-viewer-measurement-line":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ViewerMeasurementOverlays as V, defineCustomElement as d, getViewingElementPositions as g };
+
+//# sourceMappingURL=viewer-measurement-overlays.js.map

package/dist/components/viewer-measurement-overlays.js.map

@@ -0,0 +1 @@
+{"file":"viewer-measurement-overlays.js","mappings":"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","names":["Line3","Point"],"sources":["./src/components/viewer-measurement-distance/utils.ts","./src/components/viewer-measurement-overlays/viewer-measurement-overlays-components.tsx","./src/components/viewer-measurement-overlays/viewer-measurement-overlays.css?tag=vertex-viewer-measurement-overlays&encapsulation=shadow","./src/components/viewer-measurement-overlays/viewer-measurement-overlays.tsx"],"sourcesContent":["import { Line3, Point } from '@vertexvis/geometry';\n\nimport { FrameCameraBase, Viewport } from '../../lib/types';\n\nexport type Anchor = 'start' | 'end';\n\nexport interface MeasurementElementPositions {\n  startPt?: Point.Point;\n  endPt?: Point.Point;\n  labelPt?: Point.Point;\n  indicatorPt?: Point.Point;\n  hideStart?: boolean;\n  hideEnd?: boolean;\n}\n\nexport interface RenderParams {\n  viewport: Viewport;\n  camera: FrameCameraBase;\n}\n\nexport function translateWorldLineToViewport(\n  line: Line3.Line3,\n  params: RenderParams\n): {\n  start: Point.Point;\n  end: Point.Point;\n  hideStart: boolean;\n  hideEnd: boolean;\n} {\n  const { camera, viewport } = params;\n\n  const isStartBehindCamera = camera.isPointBehindNear(line.start);\n  const isEndBehindCamera = camera.isPointBehindNear(line.end);\n\n  // If either the start or end of the line is behind the camera, then we need\n  // to truncate the line so it can be presented correctly. You cannot use a\n  // projection matrix to compute a point behind the near plane.\n  if (isStartBehindCamera || isEndBehindCamera) {\n    const pt = camera.intersectLineWithNear(line);\n    const newLine = Line3.create({\n      start: isStartBehindCamera && pt != null ? pt : line.start,\n      end: isEndBehindCamera && pt != null ? pt : line.end,\n    });\n\n    const ndc = Line3.transformMatrix(newLine, camera.projectionViewMatrix);\n    return {\n      start: viewport.transformVectorToViewport(ndc.start),\n      end: viewport.transformVectorToViewport(ndc.end),\n      hideStart: isStartBehindCamera,\n      hideEnd: isEndBehindCamera,\n    };\n  } else {\n    const ndc = Line3.transformMatrix(line, camera.projectionViewMatrix);\n    return {\n      start: viewport.transformVectorToViewport(ndc.start),\n      end: viewport.transformVectorToViewport(ndc.end),\n      hideStart: false,\n      hideEnd: false,\n    };\n  }\n}\n\nexport function getViewingElementPositions(\n  line: Line3.Line3,\n  interactingAnchor: Anchor | 'none',\n  params: RenderParams\n): MeasurementElementPositions {\n  const {\n    start: startPt,\n    end: endPt,\n    hideStart,\n    hideEnd,\n  } = translateWorldLineToViewport(line, params);\n  const labelPt = Point.lerp(startPt, endPt, 0.5);\n  const indicatorPt =\n    interactingAnchor !== 'none'\n      ? getIndicatorPtForAnchor(line, interactingAnchor, params)\n      : undefined;\n\n  return { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd };\n}\n\nexport function isVertexViewerDistanceMeasurement(\n  el: unknown\n): el is HTMLVertexViewerMeasurementDistanceElement {\n  return (\n    el instanceof HTMLElement &&\n    el.nodeName === 'VERTEX-VIEWER-MEASUREMENT-DISTANCE'\n  );\n}\n\nfunction getIndicatorPtForAnchor(\n  line: Line3.Line3,\n  anchor: Anchor,\n  params: RenderParams\n): Point.Point {\n  return params.viewport.transformWorldToViewport(\n    anchor === 'start' ? line.start : line.end,\n    params.camera.projectionViewMatrix\n  );\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\n\nimport {\n  DistanceVectorOverlay,\n  LineOverlay,\n  MeasurementOverlay,\n} from '../../lib/measurement';\nimport { FrameCameraBase, Viewport } from '../../lib/types';\nimport {\n  RenderParams,\n  translateWorldLineToViewport,\n} from '../viewer-measurement-distance/utils';\n\ninterface MeasurementOverlayViewProps<O extends MeasurementOverlay> {\n  overlay: O;\n  viewport: Viewport;\n  camera: FrameCameraBase;\n}\n\nexport const MeasurementOverlayView: FunctionalComponent<\n  MeasurementOverlayViewProps<MeasurementOverlay>\n> = ({ overlay, viewport, camera }) => {\n  if (overlay.type === 'line') {\n    return (\n      <LineOverlayView overlay={overlay} viewport={viewport} camera={camera} />\n    );\n  } else {\n    return (\n      <DistanceVectorOverlayView\n        overlay={overlay}\n        viewport={viewport}\n        camera={camera}\n      />\n    );\n  }\n};\n\nconst LineOverlayView: FunctionalComponent<\n  MeasurementOverlayViewProps<LineOverlay>\n> = ({ overlay, camera, viewport }) => {\n  const { start, end } = translateWorldLineToViewport(overlay, {\n    camera,\n    viewport,\n  });\n\n  return (\n    <vertex-viewer-measurement-line\n      class=\"measurement-line\"\n      start={start}\n      end={end}\n    />\n  );\n};\n\nconst DistanceVectorOverlayView: FunctionalComponent<\n  MeasurementOverlayViewProps<DistanceVectorOverlay>\n> = ({ overlay: { x, y, z }, camera, viewport }) => {\n  const params: RenderParams = { camera, viewport };\n\n  const { start: xs, end: xe } = translateWorldLineToViewport(x, params);\n  const { start: ys, end: ye } = translateWorldLineToViewport(y, params);\n  const { start: zs, end: ze } = translateWorldLineToViewport(z, params);\n\n  return (\n    <Fragment>\n      <vertex-viewer-measurement-line\n        class=\"measurement-line distance-vector-x\"\n        start={xs}\n        end={xe}\n      />\n      <vertex-viewer-measurement-line\n        class=\"measurement-line distance-vector-y\"\n        start={ys}\n        end={ye}\n      />\n      <vertex-viewer-measurement-line\n        class=\"measurement-line distance-vector-z\"\n        start={zs}\n        end={ze}\n      />\n    </Fragment>\n  );\n};\n",":host {\n  display: block;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n\n  /**\n   * @prop --viewer-measurement-overlays-x-axis-color: A CSS color for overlays\n   * representing the X axis.\n   */\n  --viewer-measurement-overlays-x-axis-color: var(--x-axis-color);\n\n  /**\n    * @prop --viewer-measurement-overlays-y-axis-color: A CSS color for overlays\n    * representing the Y axis.\n    */\n  --viewer-measurement-overlays-y-axis-color: var(--y-axis-color);\n\n  /**\n    * @prop --viewer-measurement-overlays-z-axis-color: A CSS color for overlays\n    * representing the Z axis.\n    */\n  --viewer-measurement-overlays-z-axis-color: var(--z-axis-color);\n}\n\n.measurement-line {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.measurement-line.distance-vector-x {\n  --viewer-measurement-line-fill: var(\n    --viewer-measurement-overlays-x-axis-color\n  );\n}\n\n.measurement-line.distance-vector-y {\n  --viewer-measurement-line-fill: var(\n    --viewer-measurement-overlays-y-axis-color\n  );\n}\n\n.measurement-line.distance-vector-z {\n  --viewer-measurement-line-fill: var(\n    --viewer-measurement-overlays-z-axis-color\n  );\n}\n","/* eslint-disable @typescript-eslint/member-ordering */\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\n\nimport {\n  MeasurementOverlay,\n  MeasurementOverlayManager,\n} from '../../lib/measurement';\nimport { FrameCameraBase } from '../../lib/types';\nimport { MeasurementOverlayView } from './viewer-measurement-overlays-components';\n\n@Component({\n  tag: 'vertex-viewer-measurement-overlays',\n  styleUrl: 'viewer-measurement-overlays.css',\n  shadow: true,\n})\nexport class ViewerMeasurementOverlays {\n  /**\n   * The model that contains the overlays to present.\n   */\n  @Prop()\n  public measurementOverlays = new MeasurementOverlayManager();\n\n  private onOverlaysChangedListener?: Disposable;\n\n  /**\n   * @ignore\n   */\n  @Watch('measurementOverlays')\n  protected handleMeasurementOverlaysChanged(): void {\n    this.removeModelListeners();\n    this.addModelListeners();\n\n    this.updateOverlays();\n  }\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true })\n  public camera?: FrameCameraBase;\n\n  /**\n   * The viewer that this component is bound to.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected handleViewerChanged(\n    newViewer?: HTMLVertexViewerElement,\n    oldViewer?: HTMLVertexViewerElement\n  ): void {\n    this.removeViewerListeners(oldViewer);\n    this.addViewerListeners();\n\n    this.updateCamera();\n  }\n\n  @State()\n  private overlays: MeasurementOverlay[] = [];\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.addModelListeners();\n    this.addViewerListeners();\n\n    this.updateOverlays();\n    this.updateCamera();\n  }\n\n  private addModelListeners(): void {\n    this.onOverlaysChangedListener = this.measurementOverlays.onOverlaysChanged(\n      () => this.updateOverlays()\n    );\n  }\n\n  private removeModelListeners(): void {\n    this.onOverlaysChangedListener?.dispose();\n    this.onOverlaysChangedListener = undefined;\n  }\n\n  private addViewerListeners(): void {\n    this.viewer?.addEventListener('frameReceived', this.updateCamera);\n  }\n\n  private removeViewerListeners(viewer?: HTMLVertexViewerElement): void {\n    viewer?.removeEventListener('frameReceived', this.updateCamera);\n  }\n\n  private updateCamera = (): void => {\n    this.camera = this.viewer?.frame?.scene.camera;\n  };\n\n  private updateOverlays(): void {\n    this.overlays = this.measurementOverlays.getOverlays();\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        {this.overlays.map((overlay) => {\n          if (this.camera != null && this.viewer != null) {\n            return (\n              <MeasurementOverlayView\n                overlay={overlay}\n                viewport={this.viewer.viewport}\n                camera={this.camera}\n              />\n            );\n          }\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}