@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

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

@@ -0,0 +1,235 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { g as getMarkupBoundingClientRect } from './dom2.js';
+import { M as MarkupInteractionHandler, t as translatePointToRelative, c as translatePointToScreen, R as RelativeAnchor, d as isValidStartEvent, p as parsePoint, e as createArrowheadPoints, f as isValidPointData, S as SvgShadow, g as arrowheadPointsToPolygonPoints } from './interactions.js';
+import { p as point, c as angle } from './bundle.esm.js';
+import { g as getMouseClientPosition } from './dom.js';
+import { c as classnames } from './index2.js';
+
+class ArrowMarkupInteractionHandler extends MarkupInteractionHandler {
+  constructor(markupEl, editBegin, editEnd) {
+    super();
+    this.markupEl = markupEl;
+    this.editBegin = editBegin;
+    this.editEnd = editEnd;
+    this.anchor = 'end';
+  }
+  editAnchor(anchor, event) {
+    if (this.markupEl.mode === 'edit') {
+      this.anchor = anchor;
+      this.startInteraction(event);
+    }
+  }
+  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;
+      this.markupEl.start =
+        (_a = this.markupEl.start) !== null && _a !== void 0 ? _a : translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+      this.editBegin.emit();
+      this.acceptInteraction();
+    }
+  }
+  handleInteractionMove(event) {
+    if (this.elementBounds != null && this.pointerId === event.pointerId) {
+      const position = translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+      if (this.anchor === 'start') {
+        this.markupEl.start = position;
+      }
+      else if (this.anchor === 'end') {
+        this.markupEl.end = position;
+      }
+      else if (this.markupEl.start != null && this.markupEl.end != null) {
+        const center = point.create((this.markupEl.start.x + this.markupEl.end.x) / 2, (this.markupEl.start.y + this.markupEl.end.y) / 2);
+        const xDifference = center.x - position.x;
+        const yDifference = center.y - position.y;
+        this.markupEl.start = point.create(this.markupEl.start.x - xDifference, this.markupEl.start.y - yDifference);
+        this.markupEl.end = point.create(this.markupEl.end.x - xDifference, this.markupEl.end.y - yDifference);
+      }
+    }
+  }
+  handleInteractionEnd(event) {
+    if (this.pointerId === event.pointerId) {
+      const screenStart = this.markupEl.start != null && this.elementBounds != null
+        ? translatePointToScreen(this.markupEl.start, this.elementBounds)
+        : undefined;
+      const screenEnd = this.markupEl.end != null && this.elementBounds != null
+        ? translatePointToScreen(this.markupEl.end, this.elementBounds)
+        : undefined;
+      if (this.markupEl.mode !== '' &&
+        screenStart != null &&
+        screenEnd != null &&
+        point.distance(screenStart, screenEnd) >= 2) {
+        this.editEnd.emit();
+      }
+      else {
+        this.markupEl.start = undefined;
+        this.markupEl.end = undefined;
+      }
+      this.pointerId = undefined;
+    }
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const BoundingBox1d = ({ start, end, onStartAnchorPointerDown, onCenterAnchorPointerDown, onEndAnchorPointerDown, }) => {
+  const angle$1 = angle.normalize(angle.toDegrees(angle.fromPoints(start, end)) - 270);
+  const center = point.create((start.x + end.x) / 2, (start.y + end.y) / 2);
+  return (h("div", { class: "bounds-container" },
+    h(RelativeAnchor, { id: "bounding-box-1d-start-anchor", name: "start-anchor", rotation: angle$1, point: start, onPointerDown: onStartAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-cap-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-1d-end-anchor", name: "end-anchor", rotation: angle$1, point: end, onPointerDown: onEndAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-cap-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-1d-center-anchor", name: "center-anchor", point: center, onPointerDown: onCenterAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-center-anchor') }))));
+};
+
+const viewerMarkupArrowCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-arrow-line-stroke-color:var(--red-800);--viewer-markup-arrow-line-stroke-width:4;--viewer-markup-arrow-head-stroke-color:var(--red-800);--viewer-markup-arrow-head-stroke-width:4;--viewer-markup-arrow-head-fill-color:var(--red-800);--viewer-markup-arrow-head-fill-opacity:1;--viewer-markup-arrow-bounds-cap-border-color:var(--blue-400);--viewer-markup-arrow-bounds-cap-border-width:1px;--viewer-markup-arrow-bounds-cap-background-color:white;--viewer-markup-arrow-bounds-center-anchor-border-color:white;--viewer-markup-arrow-bounds-center-anchor-border-width:1px;--viewer-markup-arrow-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-arrow-bounds-outline-width:1px;--viewer-markup-arrow-bounds-outline-color:var(--blue-400);--viewer-markup-arrow-bounds-anchor-width:9px;--viewer-markup-arrow-bounds-anchor-height:9px}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.line{pointer-events:auto;stroke:var(--viewer-markup-arrow-line-stroke-color);stroke-width:var(--viewer-markup-arrow-line-stroke-width);cursor:default}.head{pointer-events:auto;stroke:var(--viewer-markup-arrow-head-stroke-color);stroke-width:var(--viewer-markup-arrow-head-stroke-width);fill:var(--viewer-markup-arrow-head-fill-color);fill-opacity:var(--viewer-markup-arrow-head-fill-opacity);cursor:default}.bounds-line{pointer-events:auto;stroke:var(--viewer-markup-arrow-bounds-outline-color);stroke-width:var(--viewer-markup-arrow-bounds-outline-width)}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-arrow-bounds-anchor-width);height:var(--viewer-markup-arrow-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-arrow-bounds-center-anchor-border-width);border-color:var(--viewer-markup-arrow-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-center-anchor-background-color)}.bounds-cap-anchor{border-width:var(--viewer-markup-arrow-bounds-cap-border-width);border-color:var(--viewer-markup-arrow-bounds-cap-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-cap-background-color)}";
+
+const ViewerMarkupArrow = /*@__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.interactionHandler = new ArrowMarkupInteractionHandler(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() {
+    this.updatePointsFromProps();
+    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);
+    }
+  }
+  handleStartJsonChange() {
+    this.updatePointsFromProps();
+  }
+  handleEndJsonChange() {
+    this.updatePointsFromProps();
+  }
+  handleModeChange() {
+    if (this.mode !== 'create') {
+      window.removeEventListener('pointerdown', this.handleWindowPointerDown);
+    }
+  }
+  updateViewport() {
+    const rect = getMarkupBoundingClientRect(this.hostEl);
+    this.elementBounds = rect;
+  }
+  updatePointsFromProps() {
+    this.start = this.start || parsePoint(this.startJson);
+    this.end = this.end || parsePoint(this.endJson);
+  }
+  render() {
+    if (this.start != null && this.end != null && this.elementBounds != null) {
+      const screenStart = translatePointToScreen(this.start, this.elementBounds);
+      const screenEnd = translatePointToScreen(this.end, this.elementBounds);
+      const arrowheadPoints = createArrowheadPoints(screenStart, screenEnd);
+      if (isValidPointData(screenStart, screenEnd)) {
+        return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "arrow-shadow" })), h("g", { filter: "url(#arrow-shadow)" }, h("polygon", { id: "arrow-head", class: "head", points: arrowheadPointsToPolygonPoints(arrowheadPoints) }), h("line", { id: "arrow-line", class: "line", x1: screenStart.x, y1: screenStart.y, x2: arrowheadPoints.base.x, y2: arrowheadPoints.base.y }), this.mode === 'edit' && (h("line", { id: "bounding-box-1d-line", class: "bounds-line", x1: screenStart.x, y1: screenStart.y, x2: screenEnd.x, y2: screenEnd.y })))), this.mode === 'edit' && (h(BoundingBox1d, { start: screenStart, end: screenEnd, onStartAnchorPointerDown: (event) => this.interactionHandler.editAnchor('start', event), onCenterAnchorPointerDown: (event) => this.interactionHandler.editAnchor('center', event), onEndAnchorPointerDown: (event) => this.interactionHandler.editAnchor('end', event) })), this.mode === 'create' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+      }
+      else {
+        return h(Host, null);
+      }
+    }
+    else {
+      return (h(Host, null, h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));
+    }
+  }
+  get hostEl() { return this; }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "start": ["handleStartJsonChange"],
+    "end": ["handleEndJsonChange"],
+    "mode": ["handleModeChange"]
+  }; }
+  static get style() { return viewerMarkupArrowCss; }
+}, [1, "vertex-viewer-markup-arrow", {
+    "start": [1040],
+    "startJson": [1, "start"],
+    "end": [1040],
+    "endJson": [1, "end"],
+    "mode": [513],
+    "viewer": [16],
+    "elementBounds": [32],
+    "dispose": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-markup-arrow"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-markup-arrow":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerMarkupArrow);
+      }
+      break;
+  } });
+}
+
+export { ViewerMarkupArrow as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-markup-arrow.js.map

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

@@ -0,0 +1 @@
+{"file":"viewer-markup-arrow.js","mappings":"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","names":["Point","angle","Angle","classNames"],"sources":["./src/components/viewer-markup-arrow/interactions.ts","./src/components/viewer-markup-arrow/viewer-markup-arrow-components.tsx","./src/components/viewer-markup-arrow/viewer-markup-arrow.css?tag=vertex-viewer-markup-arrow&encapsulation=shadow","./src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { MarkupInteractionHandler } from '../../lib/markup/interactions';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  translatePointToRelative,\n  translatePointToScreen,\n} from '../viewer-markup/markup-utils';\n\ntype ViewerMarkupArrowEditAnchor = 'start' | 'end' | 'center';\n\nexport class ArrowMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private anchor: ViewerMarkupArrowEditAnchor = 'end';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupArrowElement,\n    private readonly editBegin: EventEmitter<void>,\n    private readonly editEnd: EventEmitter<void>\n  ) {\n    super();\n  }\n\n  public editAnchor(\n    anchor: ViewerMarkupArrowEditAnchor,\n    event: PointerEvent\n  ): void {\n    if (this.markupEl.mode === 'edit') {\n      this.anchor = anchor;\n      this.startInteraction(event);\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      this.markupEl.start =\n        this.markupEl.start ??\n        translatePointToRelative(\n          getMouseClientPosition(event, this.elementBounds),\n          this.elementBounds\n        );\n\n      this.editBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (this.elementBounds != null && this.pointerId === event.pointerId) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n      if (this.anchor === 'start') {\n        this.markupEl.start = position;\n      } else if (this.anchor === 'end') {\n        this.markupEl.end = position;\n      } else if (this.markupEl.start != null && this.markupEl.end != null) {\n        const center = Point.create(\n          (this.markupEl.start.x + this.markupEl.end.x) / 2,\n          (this.markupEl.start.y + this.markupEl.end.y) / 2\n        );\n        const xDifference = center.x - position.x;\n        const yDifference = center.y - position.y;\n\n        this.markupEl.start = Point.create(\n          this.markupEl.start.x - xDifference,\n          this.markupEl.start.y - yDifference\n        );\n        this.markupEl.end = Point.create(\n          this.markupEl.end.x - xDifference,\n          this.markupEl.end.y - yDifference\n        );\n      }\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      const screenStart =\n        this.markupEl.start != null && this.elementBounds != null\n          ? translatePointToScreen(this.markupEl.start, this.elementBounds)\n          : undefined;\n      const screenEnd =\n        this.markupEl.end != null && this.elementBounds != null\n          ? translatePointToScreen(this.markupEl.end, this.elementBounds)\n          : undefined;\n\n      if (\n        this.markupEl.mode !== '' &&\n        screenStart != null &&\n        screenEnd != null &&\n        Point.distance(screenStart, screenEnd) >= 2\n      ) {\n        this.editEnd.emit();\n      } else {\n        this.markupEl.start = undefined;\n        this.markupEl.end = undefined;\n      }\n\n      this.pointerId = undefined;\n    }\n  }\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Angle, Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { RelativeAnchor } from '../viewer-markup/viewer-markup-components';\n\nexport interface BoundingBox1dProps {\n  start: Point.Point;\n  end: Point.Point;\n  onStartAnchorPointerDown?: (event: PointerEvent) => void;\n  onCenterAnchorPointerDown?: (event: PointerEvent) => void;\n  onEndAnchorPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const BoundingBox1d: FunctionalComponent<BoundingBox1dProps> = ({\n  start,\n  end,\n  onStartAnchorPointerDown,\n  onCenterAnchorPointerDown,\n  onEndAnchorPointerDown,\n}) => {\n  const angle = Angle.normalize(\n    Angle.toDegrees(Angle.fromPoints(start, end)) - 270\n  );\n  const center = Point.create((start.x + end.x) / 2, (start.y + end.y) / 2);\n\n  return (\n    <div class=\"bounds-container\">\n      <RelativeAnchor\n        id=\"bounding-box-1d-start-anchor\"\n        name=\"start-anchor\"\n        rotation={angle}\n        point={start}\n        onPointerDown={onStartAnchorPointerDown}\n      >\n        <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-1d-end-anchor\"\n        name=\"end-anchor\"\n        rotation={angle}\n        point={end}\n        onPointerDown={onEndAnchorPointerDown}\n      >\n        <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-1d-center-anchor\"\n        name=\"center-anchor\"\n        point={center}\n        onPointerDown={onCenterAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-center-anchor')}\n        />\n      </RelativeAnchor>\n    </div>\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-arrow-line-stroke-color: A CSS color that\n   * specifies the color of the arrow line's outline.\n   */\n  --viewer-markup-arrow-line-stroke-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-line-stroke-width: A CSS length that\n   * specifies the width of the arrow line's outline.\n   */\n  --viewer-markup-arrow-line-stroke-width: 4;\n  /**\n   * @prop --viewer-markup-arrow-head-stroke-color: A CSS color that\n   * specifies the color of the arrow head's outline.\n   */\n  --viewer-markup-arrow-head-stroke-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-head-stroke-width: A CSS length that\n   * specifies the width of the arrow head's outline.\n   */\n  --viewer-markup-arrow-head-stroke-width: 4;\n  /**\n   * @prop --viewer-markup-arrow-head-fill-color: A CSS color that\n   * specifies the color of the arrow head's fill.\n   */\n  --viewer-markup-arrow-head-fill-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-head-fill-opacity: A number between \n   * 0 and 1 that specifies the opacity of the arrow head's fill.\n   */\n  --viewer-markup-arrow-head-fill-opacity: 1;\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-border-color: A CSS color that\n   * specifies the color of arrow start/end resize anchors' border.\n   */\n  --viewer-markup-arrow-bounds-cap-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-border-width: A CSS length that\n   * specifies the width of arrow start/end resize anchors' border.\n   */\n  --viewer-markup-arrow-bounds-cap-border-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-background-color: A CSS color that\n   * specifies the background color of the arrow start/end resize anchors.\n   */\n  --viewer-markup-arrow-bounds-cap-background-color: white;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-border-color: A CSS color that\n   * specifies the color of the center resize anchor's border.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-border-color: white;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-border-width: A CSS length that\n   * specifies the width of the center resize anchor's border.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-background-color: A CSS color that\n   * specifies the background color of the center resize anchor.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-outline-width: A CSS color that\n   * specifies the width of the selected arrow outline.\n   */\n  --viewer-markup-arrow-bounds-outline-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-outline-color: A CSS color that\n   * specifies the color of selected arrow outline.\n   */\n  --viewer-markup-arrow-bounds-outline-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-anchor-width: A CSS length that\n   * specifies the width of the resize and reposition anchors.\n   */\n   --viewer-markup-arrow-bounds-anchor-width: 9px;\n   /**\n    * @prop --viewer-markup-arrow-bounds-anchor-height: A CSS length that\n    * specifies the height of the resize and reposition anchors.\n    */\n   --viewer-markup-arrow-bounds-anchor-height: 9px;\n  ;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\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.line {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-line-stroke-color);\n  stroke-width: var(--viewer-markup-arrow-line-stroke-width);\n  cursor: default;\n}\n\n.head {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-head-stroke-color);\n  stroke-width: var(--viewer-markup-arrow-head-stroke-width);\n  fill: var(--viewer-markup-arrow-head-fill-color);\n  fill-opacity: var(--viewer-markup-arrow-head-fill-opacity);\n  cursor: default;\n}\n\n.bounds-line {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-bounds-outline-color);\n  stroke-width: var(--viewer-markup-arrow-bounds-outline-width);\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-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-arrow-bounds-anchor-width);\n  height: var(--viewer-markup-arrow-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-arrow-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-arrow-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-arrow-bounds-center-anchor-background-color);\n}\n\n.bounds-cap-anchor {\n  border-width: var(--viewer-markup-arrow-bounds-cap-border-width);\n  border-color: var(--viewer-markup-arrow-bounds-cap-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-arrow-bounds-cap-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 } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidPointData,\n  isValidStartEvent,\n  translatePointToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { ArrowMarkupInteractionHandler } from './interactions';\nimport {\n  arrowheadPointsToPolygonPoints,\n  createArrowheadPoints,\n  parsePoint,\n} from './utils';\nimport { BoundingBox1d } from './viewer-markup-arrow-components';\n\n/**\n * The supported arrow markup modes.\n *\n * @see {@link ViewerMarkupArrowMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupArrowMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-arrow',\n  styleUrl: 'viewer-markup-arrow.css',\n  shadow: true,\n})\nexport class ViewerMarkupArrow {\n  /**\n   * The position of the starting anchor. Can either be an instance of a\n   * `Point` or a JSON string representation in the format of `[x, y]` or\n   * `{\"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 start?: Point.Point;\n\n  /**\n   * The position of the starting anchor, as a JSON string. Can either be an\n   * instance of a `Point` or a JSON string representation in the format of\n   * `[x, y]` or `{\"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: 'start' })\n  public startJson?: string;\n\n  /**\n   * The position of the ending anchor. Can either be an instance of a `Point`\n   * or a JSON string representation in the format of `[x, y]` or `{\"x\": 0,\n   * \"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 })\n  public end?: Point.Point;\n\n  /**\n   * The position of the ending anchor, as a JSON string. Can either be an\n   * instance of a `Point` or a JSON string representation in the format of\n   * `[x, y]` or `{\"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: 'end' })\n  public endJson?: 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: ViewerMarkupArrowMode = '';\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!: HTMLVertexViewerMarkupArrowElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  private interactionHandler = new ArrowMarkupInteractionHandler(\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    this.updatePointsFromProps();\n\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('start')\n  protected handleStartJsonChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('end')\n  protected handleEndJsonChange(): 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  }\n\n  private updatePointsFromProps(): void {\n    this.start = this.start || parsePoint(this.startJson);\n    this.end = this.end || parsePoint(this.endJson);\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.start != null && this.end != null && this.elementBounds != null) {\n      const screenStart = translatePointToScreen(\n        this.start,\n        this.elementBounds\n      );\n      const screenEnd = translatePointToScreen(this.end, this.elementBounds);\n      const arrowheadPoints = createArrowheadPoints(screenStart, screenEnd);\n\n      if (isValidPointData(screenStart, screenEnd)) {\n        return (\n          <Host>\n            <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n              <defs>\n                <SvgShadow id=\"arrow-shadow\" />\n              </defs>\n              <g filter=\"url(#arrow-shadow)\">\n                <polygon\n                  id=\"arrow-head\"\n                  class=\"head\"\n                  points={arrowheadPointsToPolygonPoints(arrowheadPoints)}\n                />\n                <line\n                  id=\"arrow-line\"\n                  class=\"line\"\n                  x1={screenStart.x}\n                  y1={screenStart.y}\n                  x2={arrowheadPoints.base.x}\n                  y2={arrowheadPoints.base.y}\n                />\n                {this.mode === 'edit' && (\n                  <line\n                    id=\"bounding-box-1d-line\"\n                    class=\"bounds-line\"\n                    x1={screenStart.x}\n                    y1={screenStart.y}\n                    x2={screenEnd.x}\n                    y2={screenEnd.y}\n                  />\n                )}\n              </g>\n            </svg>\n            {this.mode === 'edit' && (\n              <BoundingBox1d\n                start={screenStart}\n                end={screenEnd}\n                onStartAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('start', event)\n                }\n                onCenterAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('center', event)\n                }\n                onEndAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('end', event)\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 <Host></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"],"version":3}

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

@@ -0,0 +1,42 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { h } from '@stencil/core/internal/client';
+import { e as rectangle } from './bundle.esm.js';
+import { c as classnames } from './index2.js';
+import { R as RelativeAnchor, n as getBoundingBox2dAnchorPosition } from './interactions.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const BoundingBox2d = ({ bounds, onTopLeftAnchorPointerDown, onLeftAnchorPointerDown, onTopRightAnchorPointerDown, onRightAnchorPointerDown, onBottomLeftAnchorPointerDown, onBottomAnchorPointerDown, onBottomRightAnchorPointerDown, onTopAnchorPointerDown, onCenterAnchorPointerDown, }) => {
+  const padded = rectangle.pad(bounds, 6);
+  const center = rectangle.center(padded);
+  return (h("div", { class: "bounds-container" },
+    h("div", { class: "bounds-outline", style: {
+        top: `${padded.y}px`,
+        left: `${padded.x}px`,
+        width: `${padded.width}px`,
+        height: `${padded.height}px`,
+      } }),
+    h(RelativeAnchor, { id: "bounding-box-2d-top-left-anchor", name: "top-left-anchor", point: getBoundingBox2dAnchorPosition(padded, 'top-left'), onPointerDown: onTopLeftAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-left-anchor", name: "left-anchor", point: getBoundingBox2dAnchorPosition(padded, 'left'), onPointerDown: onLeftAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-top-right-anchor", name: "top-right-anchor", point: getBoundingBox2dAnchorPosition(padded, 'top-right'), onPointerDown: onTopRightAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-right-anchor", name: "right-anchor", point: getBoundingBox2dAnchorPosition(padded, 'right'), onPointerDown: onRightAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-bottom-left-anchor", name: "bottom-left-anchor", point: getBoundingBox2dAnchorPosition(padded, 'bottom-left'), onPointerDown: onBottomLeftAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-bottom-anchor", name: "bottom-anchor", point: getBoundingBox2dAnchorPosition(padded, 'bottom'), onPointerDown: onBottomAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-bottom-right-anchor", name: "bottom-right-anchor", point: getBoundingBox2dAnchorPosition(padded, 'bottom-right'), onPointerDown: onBottomRightAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-top-anchor", name: "top-anchor", point: getBoundingBox2dAnchorPosition(padded, 'top'), onPointerDown: onTopAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-edge-anchor') })),
+    h(RelativeAnchor, { id: "bounding-box-2d-center-anchor", name: "center-anchor", point: center, onPointerDown: onCenterAnchorPointerDown },
+      h("div", { class: classnames('bounds-default-anchor', 'bounds-center-anchor') }))));
+};
+
+export { BoundingBox2d as B };
+
+//# sourceMappingURL=viewer-markup-circle-components.js.map

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

@@ -0,0 +1 @@
+{"file":"viewer-markup-circle-components.js","mappings":"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","names":["Rectangle","classNames"],"sources":["./src/components/viewer-markup-circle/viewer-markup-circle-components.tsx"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Rectangle } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getBoundingBox2dAnchorPosition } from '../viewer-markup/markup-utils';\nimport { RelativeAnchor } from '../viewer-markup/viewer-markup-components';\n\nexport interface BoundingBox2dProps {\n  bounds: Rectangle.Rectangle;\n  onTopLeftAnchorPointerDown?: (event: PointerEvent) => void;\n  onLeftAnchorPointerDown?: (event: PointerEvent) => void;\n  onTopRightAnchorPointerDown?: (event: PointerEvent) => void;\n  onRightAnchorPointerDown?: (event: PointerEvent) => void;\n  onBottomLeftAnchorPointerDown?: (event: PointerEvent) => void;\n  onBottomAnchorPointerDown?: (event: PointerEvent) => void;\n  onBottomRightAnchorPointerDown?: (event: PointerEvent) => void;\n  onTopAnchorPointerDown?: (event: PointerEvent) => void;\n  onCenterAnchorPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const BoundingBox2d: FunctionalComponent<BoundingBox2dProps> = ({\n  bounds,\n  onTopLeftAnchorPointerDown,\n  onLeftAnchorPointerDown,\n  onTopRightAnchorPointerDown,\n  onRightAnchorPointerDown,\n  onBottomLeftAnchorPointerDown,\n  onBottomAnchorPointerDown,\n  onBottomRightAnchorPointerDown,\n  onTopAnchorPointerDown,\n  onCenterAnchorPointerDown,\n}) => {\n  const padded = Rectangle.pad(bounds, 6);\n  const center = Rectangle.center(padded);\n\n  return (\n    <div class=\"bounds-container\">\n      <div\n        class=\"bounds-outline\"\n        style={{\n          top: `${padded.y}px`,\n          left: `${padded.x}px`,\n          width: `${padded.width}px`,\n          height: `${padded.height}px`,\n        }}\n      ></div>\n      <RelativeAnchor\n        id=\"bounding-box-2d-top-left-anchor\"\n        name=\"top-left-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'top-left')}\n        onPointerDown={onTopLeftAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-left-anchor\"\n        name=\"left-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'left')}\n        onPointerDown={onLeftAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-top-right-anchor\"\n        name=\"top-right-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'top-right')}\n        onPointerDown={onTopRightAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-right-anchor\"\n        name=\"right-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'right')}\n        onPointerDown={onRightAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-bottom-left-anchor\"\n        name=\"bottom-left-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'bottom-left')}\n        onPointerDown={onBottomLeftAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-bottom-anchor\"\n        name=\"bottom-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'bottom')}\n        onPointerDown={onBottomAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-bottom-right-anchor\"\n        name=\"bottom-right-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'bottom-right')}\n        onPointerDown={onBottomRightAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-top-anchor\"\n        name=\"top-anchor\"\n        point={getBoundingBox2dAnchorPosition(padded, 'top')}\n        onPointerDown={onTopAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-edge-anchor')}\n        />\n      </RelativeAnchor>\n      <RelativeAnchor\n        id=\"bounding-box-2d-center-anchor\"\n        name=\"center-anchor\"\n        point={center}\n        onPointerDown={onCenterAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-center-anchor')}\n        />\n      </RelativeAnchor>\n    </div>\n  );\n};\n"],"version":3}

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

@@ -0,0 +1,201 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { e as rectangle } from './bundle.esm.js';
+import { g as getMarkupBoundingClientRect } from './dom2.js';
+import { M as MarkupInteractionHandler, t as translatePointToRelative, h as transformRectangle, d as isValidStartEvent, j as parseBounds, k as translateRectToScreen, S as SvgShadow } from './interactions.js';
+import { g as getMouseClientPosition } from './dom.js';
+import { B as BoundingBox2d } from './viewer-markup-circle-components.js';
+
+class CircleMarkupInteractionHandler extends MarkupInteractionHandler {
+  constructor(markupEl, editBegin, editEnd) {
+    super();
+    this.markupEl = markupEl;
+    this.editBegin = editBegin;
+    this.editEnd = editEnd;
+    this.anchor = 'bottom-right';
+  }
+  editAnchor(anchor, event) {
+    if (this.markupEl.mode === 'edit') {
+      this.anchor = anchor;
+      this.resizeBounds = this.markupEl.bounds;
+      this.startInteraction(event);
+    }
+  }
+  startInteraction(event) {
+    this.handleInteractionAttempt(event);
+  }
+  computeBoundingRect() {
+    return getMarkupBoundingClientRect(this.markupEl);
+  }
+  handleInteractionAttempt(event) {
+    var _a;
+    if (this.markupEl.mode !== '' &&
+      this.pointerId == null &&
+      this.elementBounds != null) {
+      const position = translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+      this.pointerId = event.pointerId;
+      this.startPosition = position;
+      this.markupEl.bounds =
+        (_a = this.markupEl.bounds) !== null && _a !== void 0 ? _a : rectangle.create(position.x, position.y, 0, 0);
+      this.resizeBounds = this.markupEl.bounds;
+      this.editBegin.emit();
+      this.acceptInteraction();
+    }
+  }
+  handleInteractionMove(event) {
+    var _a;
+    if (this.markupEl.bounds != null &&
+      this.startPosition != null &&
+      this.elementBounds != null &&
+      this.pointerId === event.pointerId) {
+      const position = translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+      this.markupEl.bounds = transformRectangle((_a = this.resizeBounds) !== null && _a !== void 0 ? _a : this.markupEl.bounds, this.startPosition, position, this.anchor, event.shiftKey);
+    }
+  }
+  handleInteractionEnd(event) {
+    var _a, _b;
+    if (this.pointerId === event.pointerId) {
+      if (this.markupEl.mode !== '' &&
+        this.markupEl.bounds != null &&
+        ((_a = this.markupEl.bounds) === null || _a === void 0 ? void 0 : _a.width) > 0 &&
+        ((_b = this.markupEl.bounds) === null || _b === void 0 ? void 0 : _b.height) > 0) {
+        this.anchor = 'bottom-right';
+        this.editEnd.emit();
+      }
+      else {
+        this.markupEl.bounds = undefined;
+      }
+      this.pointerId = undefined;
+    }
+  }
+}
+
+const viewerMarkupCircleCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-circle-ellipse-stroke-color:var(--red-700);--viewer-markup-circle-ellipse-stroke-width:4;--viewer-markup-circle-ellipse-fill-color:none;--viewer-markup-circle-ellipse-fill-opacity:0;--viewer-markup-circle-bounds-outline-border-color:var(--blue-400);--viewer-markup-circle-bounds-outline-border-width:1px;--viewer-markup-circle-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-circle-bounds-edge-anchor-border-width:1px;--viewer-markup-circle-bounds-edge-anchor-background-color:white;--viewer-markup-circle-bounds-center-anchor-border-color:white;--viewer-markup-circle-bounds-center-anchor-border-width:1px;--viewer-markup-circle-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-circle-bounds-anchor-width:9px;--viewer-markup-circle-bounds-anchor-height:9px}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.ellipse{pointer-events:auto;stroke:var(--viewer-markup-circle-ellipse-stroke-color);stroke-width:var(--viewer-markup-circle-ellipse-stroke-width);fill:var(--viewer-markup-circle-ellipse-fill-color);fill-opacity:var(--viewer-markup-circle-ellipse-fill-opacity);cursor:default}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-circle-bounds-outline-border-width);border-color:var(--viewer-markup-circle-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-circle-bounds-anchor-width);height:var(--viewer-markup-circle-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-circle-bounds-center-anchor-border-width);border-color:var(--viewer-markup-circle-bounds-center-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-circle-bounds-center-anchor-background-color)}.bounds-edge-anchor{border-width:var(--viewer-markup-circle-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-circle-bounds-edge-anchor-border-color);border-style:solid;background-color:var(--viewer-markup-circle-bounds-edge-anchor-background-color)}";
+
+const ViewerMarkupCircle = /*@__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.interactionHandler = new CircleMarkupInteractionHandler(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.updateBoundsFromProps();
+  }
+  componentDidLoad() {
+    this.updateBoundsFromProps();
+    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.registeredHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.registeredHandler = undefined;
+    window.removeEventListener('pointerdown', this.handleWindowPointerDown);
+  }
+  /**
+   * @ignore
+   */
+  async handleViewerChanged(newViewer) {
+    var _a;
+    (_a = this.registeredHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.registeredHandler = undefined;
+    if (newViewer != null) {
+      this.registeredHandler = await newViewer.registerInteractionHandler(this.interactionHandler);
+    }
+  }
+  handleBoundsJsonChange() {
+    this.updateBoundsFromProps();
+  }
+  handleModeChange() {
+    if (this.mode !== 'create') {
+      window.removeEventListener('pointerdown', this.handleWindowPointerDown);
+    }
+  }
+  updateViewport() {
+    const rect = getMarkupBoundingClientRect(this.hostEl);
+    this.elementBounds = rect;
+  }
+  updateBoundsFromProps() {
+    var _a;
+    this.bounds = (_a = this.bounds) !== null && _a !== void 0 ? _a : parseBounds(this.boundsJson);
+  }
+  render() {
+    if (this.bounds != null && this.elementBounds != null) {
+      const relativeBounds = translateRectToScreen(this.bounds, this.elementBounds);
+      const center = rectangle.center(relativeBounds);
+      return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "circle-shadow" })), h("g", { filter: "url(#circle-shadow)" }, h("ellipse", { class: "ellipse", cx: center.x, cy: center.y, rx: relativeBounds.width / 2, ry: relativeBounds.height / 2, stroke: '#000ff0', "stroke-width": 4, fill: 'none' }))), this.mode === 'edit' && (h(BoundingBox2d, { bounds: relativeBounds, 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 })));
+    }
+  }
+  get hostEl() { return this; }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "bounds": ["handleBoundsJsonChange"],
+    "mode": ["handleModeChange"]
+  }; }
+  static get style() { return viewerMarkupCircleCss; }
+}, [1, "vertex-viewer-markup-circle", {
+    "bounds": [1040],
+    "boundsJson": [1, "bounds"],
+    "mode": [513],
+    "viewer": [16],
+    "elementBounds": [32],
+    "dispose": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-markup-circle"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-markup-circle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerMarkupCircle);
+      }
+      break;
+  } });
+}
+
+export { ViewerMarkupCircle as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-markup-circle.js.map

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

@@ -0,0 +1 @@
+{"file":"viewer-markup-circle.js","mappings":"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","names":["Rectangle"],"sources":["./src/components/viewer-markup-circle/interactions.ts","./src/components/viewer-markup-circle/viewer-markup-circle.css?tag=vertex-viewer-markup-circle&encapsulation=shadow","./src/components/viewer-markup-circle/viewer-markup-circle.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  translatePointToRelative,\n} from '../viewer-markup/markup-utils';\n\nexport class CircleMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private startPosition?: Point.Point;\n  private resizeBounds?: Rectangle.Rectangle;\n\n  private anchor: BoundingBox2dAnchorPosition = 'bottom-right';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupCircleElement,\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') {\n      this.anchor = anchor;\n      this.resizeBounds = this.markupEl.bounds;\n      this.startInteraction(event);\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      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n      this.pointerId = event.pointerId;\n      this.startPosition = position;\n      this.markupEl.bounds =\n        this.markupEl.bounds ?? Rectangle.create(position.x, position.y, 0, 0);\n      this.resizeBounds = this.markupEl.bounds;\n\n      this.editBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (\n      this.markupEl.bounds != null &&\n      this.startPosition != null &&\n      this.elementBounds != null &&\n      this.pointerId === event.pointerId\n    ) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n\n      this.markupEl.bounds = transformRectangle(\n        this.resizeBounds ?? this.markupEl.bounds,\n        this.startPosition,\n        position,\n        this.anchor,\n        event.shiftKey\n      );\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      if (\n        this.markupEl.mode !== '' &&\n        this.markupEl.bounds != null &&\n        this.markupEl.bounds?.width > 0 &&\n        this.markupEl.bounds?.height > 0\n      ) {\n        this.anchor = 'bottom-right';\n        this.editEnd.emit();\n      } else {\n        this.markupEl.bounds = undefined;\n      }\n\n      this.pointerId = undefined;\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-circle-ellipse-stroke-color: A CSS color that\n   * specifies the color of the circle's outline.\n   */\n  --viewer-markup-circle-ellipse-stroke-color: var(--red-700);\n  /**\n   * @prop --viewer-markup-circle-ellipse-stroke-width: A CSS length that\n   * specifies the width of the circle's outline.\n   */\n  --viewer-markup-circle-ellipse-stroke-width: 4;\n  /**\n   * @prop --viewer-markup-circle-ellipse-fill-color: A CSS color that\n   * specifies the color of the circle's fill.\n   */\n  --viewer-markup-circle-ellipse-fill-color: none;\n  /**\n   * @prop --viewer-markup-circle-ellipse-fill-opacity: A number between \n   * 0 and 1 that specifies the opacity of the circle's fill.\n   */\n  --viewer-markup-circle-ellipse-fill-opacity: 0;\n  /**\n   * @prop --viewer-markup-circle-bounds-outline-border-color: A CSS color that\n   * specifies the color of the circle's selected bounding box border.\n   */\n  --viewer-markup-circle-bounds-outline-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-outline-border-width: A CSS length that\n   * specifies the width of the circle's selected bounding box border.\n   */\n  --viewer-markup-circle-bounds-outline-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-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-circle-bounds-edge-anchor-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-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-circle-bounds-edge-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-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-circle-bounds-edge-anchor-background-color: white;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-border-color: A CSS color that\n   * specifies the color of the center reposition anchor's border.\n   */\n  --viewer-markup-circle-bounds-center-anchor-border-color: white;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-border-width: A CSS length that\n   * specifies the width of the center reposition anchor's border.\n   */\n  --viewer-markup-circle-bounds-center-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-background-color: A CSS color that\n   * specifies the background color of the center reposition anchor.\n   */\n  --viewer-markup-circle-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-anchor-width: A CSS length that\n   * specifies the width of the resize and reposition anchors.\n   */\n  --viewer-markup-circle-bounds-anchor-width: 9px;\n  /**\n   * @prop --viewer-markup-circle-bounds-anchor-height: A CSS length that\n   * specifies the height of the resize and reposition anchors.\n   */\n  --viewer-markup-circle-bounds-anchor-height: 9px;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\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.ellipse {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-circle-ellipse-stroke-color);\n  stroke-width: var(--viewer-markup-circle-ellipse-stroke-width);\n  fill: var(--viewer-markup-circle-ellipse-fill-color);\n  fill-opacity: var(--viewer-markup-circle-ellipse-fill-opacity);\n  cursor: default;\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-circle-bounds-outline-border-width);\n  border-color: var(--viewer-markup-circle-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-circle-bounds-anchor-width);\n  height: var(--viewer-markup-circle-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-circle-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-circle-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-circle-bounds-center-anchor-background-color);\n}\n\n.bounds-edge-anchor {\n  border-width: var(--viewer-markup-circle-bounds-edge-anchor-border-width);\n  border-color: var(--viewer-markup-circle-bounds-edge-anchor-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-circle-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 { Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidStartEvent,\n  translateRectToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { CircleMarkupInteractionHandler } from './interactions';\nimport { parseBounds } from './utils';\nimport { BoundingBox2d } from './viewer-markup-circle-components';\n\n/**\n * The supported markup modes.\n *\n * @see {@link ViewerMarkupCircleMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupCircleMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-circle',\n  styleUrl: 'viewer-markup-circle.css',\n  shadow: true,\n})\nexport class ViewerMarkupCircle {\n  /**\n   * The bounds of the circle. 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 circle\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 circle. 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 circle\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: ViewerMarkupCircleMode = '';\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!: HTMLVertexViewerMarkupCircleElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  private interactionHandler = new CircleMarkupInteractionHandler(\n    this.hostEl,\n    this.editBegin,\n    this.editEnd\n  );\n\n  private registeredHandler?: Disposable;\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.updateViewport();\n    this.handleViewerChanged(this.viewer);\n    this.updateBoundsFromProps();\n  }\n\n  protected componentDidLoad(): void {\n    this.updateBoundsFromProps();\n\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.registeredHandler?.dispose();\n    this.registeredHandler = 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.registeredHandler?.dispose();\n    this.registeredHandler = undefined;\n\n    if (newViewer != null) {\n      this.registeredHandler = await newViewer.registerInteractionHandler(\n        this.interactionHandler\n      );\n    }\n  }\n\n  @Watch('bounds')\n  protected handleBoundsJsonChange(): void {\n    this.updateBoundsFromProps();\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  }\n\n  private updateBoundsFromProps(): void {\n    this.bounds = this.bounds ?? parseBounds(this.boundsJson);\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.bounds != null && this.elementBounds != null) {\n      const relativeBounds = translateRectToScreen(\n        this.bounds,\n        this.elementBounds\n      );\n      const center = Rectangle.center(relativeBounds);\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" />\n            </defs>\n            <g filter=\"url(#circle-shadow)\">\n              <ellipse\n                class=\"ellipse\"\n                cx={center.x}\n                cy={center.y}\n                rx={relativeBounds.width / 2}\n                ry={relativeBounds.height / 2}\n                stroke={'#000ff0'}\n                stroke-width={4}\n                fill={'none'}\n              />\n            </g>\n          </svg>\n          {this.mode === 'edit' && (\n            <BoundingBox2d\n              bounds={relativeBounds}\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"],"version":3}