@vertexvis/viewer 1.0.0-testing.6 → 1.0.0-testing.8

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

@@ -11,7 +11,17 @@ export const RelativeAnchor = ({ id, transform, rotation, name, point, onPointer
             transform: `rotateZ(${rotation !== null && rotation !== void 0 ? rotation : 0}deg)`,
         } }, h("slot", { name: name }, children)))));
 };
-export const SvgShadow = ({ id }) => {
-    return (h("filter", { id: id }, h("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "2" }), h("feOffset", { dx: "0", dy: "1", result: "offsetblur" }), h("feFlood", { "flood-color": "#000000", "flood-opacity": "0.25" }), h("feComposite", { in2: "offsetblur", operator: "in" }), h("feMerge", null, h("feMergeNode", null), h("feMergeNode", { in: "SourceGraphic" }))));
+export const SvgShadow = ({ id, scale, }) => {
+    // Scale default values for a `<filter>` element by the provided scale.
+    // This prevents the filter area from being too small when scale is greater than 1,
+    // and uses the default values for a scale less than 1 to prevent the same issue.
+    // See https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter
+    // for more details on the default values used here.
+    const effectiveScale = scale !== null && scale !== void 0 ? scale : 1;
+    const xOffset = Math.max(10, 10 * effectiveScale);
+    const yOffset = Math.max(10, 10 * effectiveScale);
+    const width = Math.max(120, 110 * effectiveScale + xOffset);
+    const height = Math.max(120, 110 * effectiveScale + yOffset);
+    return (h("filter", { id: id, filterUnits: "userSpaceOnUse", x: `${-xOffset}%`, y: `${-yOffset}%`, width: `${width}%`, height: `${height}%` }, h("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "2" }), h("feOffset", { dx: "0", dy: "1", result: "offsetblur" }), h("feFlood", { "flood-color": "#000000", "flood-opacity": "0.25" }), h("feComposite", { in2: "offsetblur", operator: "in" }), h("feMerge", null, h("feMergeNode", null), h("feMergeNode", { in: "SourceGraphic" }))));
 };
 //# sourceMappingURL=viewer-markup-components.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-markup-components.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup/viewer-markup-components.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAYvD,MAAM,CAAC,MAAM,cAAc,GAA6C,CACtE,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,EACvD,QAAQ,EACR,EAAE;IACF,OAAO,CACL,WACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE;YACL,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;YACnB,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;SACrB,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAC/C,aAAa,EAAE,aAAa;QAE5B,WAAK,KAAK,EAAE,EAAE,SAAS,EAAE;YACvB,WACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;oBACL,SAAS,EAAE,WAAW,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,MAAM;iBAC1C;gBAED,YAAM,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAQ,CAC/B,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,SAAS,GAAwC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;IACvE,OAAO,CACL,cAAQ,EAAE,EAAE,EAAE;QACZ,sBAAgB,EAAE,EAAC,aAAa,EAAC,YAAY,EAAC,GAAG,GAAG;QACpD,gBAAU,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,YAAY,GAAG;QAC9C,8BAAqB,SAAS,mBAAe,MAAM,GAAG;QACtD,mBAAa,GAAG,EAAC,YAAY,EAAC,QAAQ,EAAC,IAAI,GAAG;QAC9C;YACE,sBAAe;YACf,mBAAa,EAAE,EAAC,eAAe,GAAG,CAC1B,CACH,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nexport interface RelativeAnchorProps {\n  id?: string;\n  transform?: string;\n  rotation?: number;\n  name: string;\n  point: Point.Point;\n  onPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const RelativeAnchor: FunctionalComponent<RelativeAnchorProps> = (\n  { id, transform, rotation, name, point, onPointerDown },\n  children\n) => {\n  return (\n    <div\n      id={id}\n      class=\"bounds-anchor-position\"\n      style={{\n        top: `${point.y}px`,\n        left: `${point.x}px`,\n      }}\n      onTouchStart={(event) => event.preventDefault()}\n      onPointerDown={onPointerDown}\n    >\n      <div style={{ transform }}>\n        <div\n          class=\"bounds-anchor\"\n          style={{\n            transform: `rotateZ(${rotation ?? 0}deg)`,\n          }}\n        >\n          <slot name={name}>{children}</slot>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface SvgShadowProps {\n  id: string;\n}\n\nexport const SvgShadow: FunctionalComponent<SvgShadowProps> = ({ id }) => {\n  return (\n    <filter id={id}>\n      <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n      <feOffset dx=\"0\" dy=\"1\" result=\"offsetblur\" />\n      <feFlood flood-color=\"#000000\" flood-opacity=\"0.25\" />\n      <feComposite in2=\"offsetblur\" operator=\"in\" />\n      <feMerge>\n        <feMergeNode />\n        <feMergeNode in=\"SourceGraphic\" />\n      </feMerge>\n    </filter>\n  );\n};\n"]}
+{"version":3,"file":"viewer-markup-components.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup/viewer-markup-components.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAYvD,MAAM,CAAC,MAAM,cAAc,GAA6C,CACtE,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,EACvD,QAAQ,EACR,EAAE;IACF,OAAO,CACL,WACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE;YACL,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;YACnB,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;SACrB,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAC/C,aAAa,EAAE,aAAa;QAE5B,WAAK,KAAK,EAAE,EAAE,SAAS,EAAE;YACvB,WACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;oBACL,SAAS,EAAE,WAAW,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,MAAM;iBAC1C;gBAED,YAAM,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAQ,CAC/B,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,SAAS,GAAwC,CAAC,EAC7D,EAAE,EACF,KAAK,GACN,EAAE,EAAE;IACH,uEAAuE;IACvE,mFAAmF;IACnF,iFAAiF;IACjF,gFAAgF;IAChF,oDAAoD;IACpD,MAAM,cAAc,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IAE7D,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,WAAW,EAAC,gBAAgB,EAC5B,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,EACjB,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,EACjB,KAAK,EAAE,GAAG,KAAK,GAAG,EAClB,MAAM,EAAE,GAAG,MAAM,GAAG;QAEpB,sBAAgB,EAAE,EAAC,aAAa,EAAC,YAAY,EAAC,GAAG,GAAG;QACpD,gBAAU,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,YAAY,GAAG;QAC9C,8BAAqB,SAAS,mBAAe,MAAM,GAAG;QACtD,mBAAa,GAAG,EAAC,YAAY,EAAC,QAAQ,EAAC,IAAI,GAAG;QAC9C;YACE,sBAAe;YACf,mBAAa,EAAE,EAAC,eAAe,GAAG,CAC1B,CACH,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nexport interface RelativeAnchorProps {\n  id?: string;\n  transform?: string;\n  rotation?: number;\n  name: string;\n  point: Point.Point;\n  onPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const RelativeAnchor: FunctionalComponent<RelativeAnchorProps> = (\n  { id, transform, rotation, name, point, onPointerDown },\n  children\n) => {\n  return (\n    <div\n      id={id}\n      class=\"bounds-anchor-position\"\n      style={{\n        top: `${point.y}px`,\n        left: `${point.x}px`,\n      }}\n      onTouchStart={(event) => event.preventDefault()}\n      onPointerDown={onPointerDown}\n    >\n      <div style={{ transform }}>\n        <div\n          class=\"bounds-anchor\"\n          style={{\n            transform: `rotateZ(${rotation ?? 0}deg)`,\n          }}\n        >\n          <slot name={name}>{children}</slot>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface SvgShadowProps {\n  id: string;\n  scale?: number;\n}\n\nexport const SvgShadow: FunctionalComponent<SvgShadowProps> = ({\n  id,\n  scale,\n}) => {\n  // Scale default values for a `<filter>` element by the provided scale.\n  // This prevents the filter area from being too small when scale is greater than 1,\n  // and uses the default values for a scale less than 1 to prevent the same issue.\n  // See https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter\n  // for more details on the default values used here.\n  const effectiveScale = scale ?? 1;\n  const xOffset = Math.max(10, 10 * effectiveScale);\n  const yOffset = Math.max(10, 10 * effectiveScale);\n  const width = Math.max(120, 110 * effectiveScale + xOffset);\n  const height = Math.max(120, 110 * effectiveScale + yOffset);\n\n  return (\n    <filter\n      id={id}\n      filterUnits=\"userSpaceOnUse\"\n      x={`${-xOffset}%`}\n      y={`${-yOffset}%`}\n      width={`${width}%`}\n      height={`${height}%`}\n    >\n      <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n      <feOffset dx=\"0\" dy=\"1\" result=\"offsetblur\" />\n      <feFlood flood-color=\"#000000\" flood-opacity=\"0.25\" />\n      <feComposite in2=\"offsetblur\" operator=\"in\" />\n      <feMerge>\n        <feMergeNode />\n        <feMergeNode in=\"SourceGraphic\" />\n      </feMerge>\n    </filter>\n  );\n};\n"]}

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

@@ -153,7 +153,7 @@ export class ViewerMarkupArrow {
             if (isValidPointData(screenStart, screenEnd)) {
                 const arrowheadStartPoints = createLineAnchorStylePoints(screenEnd, screenStart);
                 const arrowheadEndPoints = createLineAnchorStylePoints(screenStart, screenEnd);
-                return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "arrow-shadow" })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#arrow-shadow)" }, this.renderLineAnchorStyle(this.startLineAnchorStyle, arrowheadStartPoints), h("line", { id: "arrow-line", class: "line", x1: arrowheadEndPoints.tip.x, y1: arrowheadEndPoints.tip.y, x2: arrowheadStartPoints.tip.x, y2: arrowheadStartPoints.tip.y }), this.renderLineAnchorStyle(this.endLineAnchorStyle, arrowheadEndPoints)), this.mode === 'edit' && (h("g", { transform: `translate(${offsetX} ${offsetY})` }, 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, offset: { x: offsetX, y: offsetY }, 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 }))));
+                return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "arrow-shadow", scale: this.scale })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#arrow-shadow)" }, this.renderLineAnchorStyle(this.startLineAnchorStyle, arrowheadStartPoints), h("line", { id: "arrow-line", class: "line", x1: arrowheadEndPoints.tip.x, y1: arrowheadEndPoints.tip.y, x2: arrowheadStartPoints.tip.x, y2: arrowheadStartPoints.tip.y }), this.renderLineAnchorStyle(this.endLineAnchorStyle, arrowheadEndPoints)), this.mode === 'edit' && (h("g", { transform: `translate(${offsetX} ${offsetY})` }, 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, offset: { x: offsetX, y: offsetY }, 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);

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-markup-arrow.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EACL,6BAA6B,EAC7B,2BAA2B,EAC3B,2BAA2B,EAC3B,8BAA8B,EAC9B,2BAA2B,EAG3B,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAcjE,MAAM,OAAO,iBAAiB;IAL9B;QA4DE;;;;;;;;;;WAUG;QAEI,sBAAiB,GAA4B,MAAM,CAAC;QAW3D;;;;;WAKG;QAEI,UAAK,GAAG,CAAC,CAAC;QAEjB;;WAEG;QAEI,yBAAoB,GAAoB,MAAM,CAAC;QAEtD;;WAEG;QAEI,uBAAkB,GAAoB,gBAAgB,CAAC;QAE9D;;;;;;WAMG;QAEI,SAAI,GAA0B,EAAE,CAAC;QAsChC,uBAAkB,GAAG,IAAI,6BAA6B,CAC5D,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,cAAc,CACpB,CAAC;QAoPM,4BAAuB,GAAG,CAAC,KAAmB,EAAQ,EAAE;YAC9D,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;KACH;IAzPC;;OAEG;IACO,iBAAiB;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAES,gBAAgB;QACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAC/D,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE5B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAES,kBAAkB;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAES,oBAAoB;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAGM,KAAK,CAAC,OAAO;;QAClB,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,EAAE,CAAC;QACtC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QAEvC,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAC1E,CAAC;IAED;;OAEG;IAEO,KAAK,CAAC,mBAAmB,CACjC,SAAmC;;QAEnC,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,EAAE,CAAC;QACtC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QAEvC,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,qBAAqB,GAAG,MAAM,SAAS,CAAC,0BAA0B,CACrE,IAAI,CAAC,kBAAkB,CACxB,CAAC;QACJ,CAAC;IACH,CAAC;IAGS,qBAAqB;QAC7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGS,mBAAmB;QAC3B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGS,gBAAgB;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAGS,iBAAiB;QACzB,QAAQ,CAAC,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAC3B,6BAA6B,EAC7B,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,mCAAI,GAAG,CAC9B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,MAAM,IAAI,GAAG,2BAA2B,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5B,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,CAAC;IAEO,qBAAqB,CAC3B,WAA4B,EAC5B,eAAsC;QAEtC,IAAI,WAAW,KAAK,gBAAgB,EAAE,CAAC;YACrC,OAAO,CACL,eACE,EAAE,EAAC,4BAA4B,EAC/B,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,8BAA8B,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,GACnE,CACH,CAAC;QACJ,CAAC;aAAM,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;YACxC,OAAO,CACL,YACE,EAAE,EAAC,wBAAwB,EAC3B,KAAK,EAAC,MAAM,EACZ,CAAC,EAAE,2BAA2B,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,GAC3D,CACH,CAAC;QACJ,CAAC;aAAM,IAAI,WAAW,KAAK,MAAM,EAAE,CAAC;YAClC,MAAM,UAAU,GAAG,2BAA2B,CAC5C,eAAe,EACf,IAAI,CAAC,KAAK,CACX,CAAC;YAEF,OAAO,YAAM,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,MAAM,KAAK,UAAU,GAAI,CAAC;QACrE,CAAC;aAAM,IAAI,WAAW,KAAK,KAAK,EAAE,CAAC;YACjC,MAAM,YAAY,GAAG,6BAA6B,CAChD,eAAe,EACf,IAAI,CAAC,KAAK,CACX,CAAC;YAEF,OAAO,cAAQ,EAAE,EAAC,oBAAoB,EAAC,KAAK,EAAC,MAAM,KAAK,YAAY,GAAI,CAAC;QAC3E,CAAC;aAAM,CAAC;YACN,OAAO,cAAO,CAAC;QACjB,CAAC;IACH,CAAC;IAEM,MAAM;;QACX,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,EAAE,CAAC;YACzE,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YACzC,MAAM,OAAO,GAAG,CAAC,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,CAAC,mCAAI,CAAC,CAAC,GAAG,yBAAyB,EAAE,CAAC;YACpE,MAAM,OAAO,GAAG,CAAC,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,CAAC,mCAAI,CAAC,CAAC,GAAG,yBAAyB,EAAE,CAAC;YACpE,MAAM,WAAW,GAAG,sBAAsB,CACxC,IAAI,CAAC,KAAK,EACV,aAAa,EACb,IAAI,CAAC,mBAAmB,EACxB,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,KAAK,CACX,CAAC;YACF,MAAM,SAAS,GAAG,sBAAsB,CACtC,IAAI,CAAC,GAAG,EACR,aAAa,EACb,IAAI,CAAC,mBAAmB,EACxB,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,KAAK,CACX,CAAC;YAEF,IAAI,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,CAAC;gBAC7C,MAAM,oBAAoB,GAAG,2BAA2B,CACtD,SAAS,EACT,WAAW,CACZ,CAAC;gBACF,MAAM,kBAAkB,GAAG,2BAA2B,CACpD,WAAW,EACX,SAAS,CACV,CAAC;gBAEF,OAAO,CACL,EAAC,IAAI;oBACH,WAAK,KAAK,EAAC,KAAK,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB;wBAClD;4BACE,EAAC,SAAS,IAAC,EAAE,EAAC,cAAc,GAAG,CAC1B;wBACP,SACE,SAAS,EAAE,aAAa,OAAO,IAAI,OAAO,GAAG,EAC7C,MAAM,EAAC,oBAAoB;4BAE1B,IAAI,CAAC,qBAAqB,CACzB,IAAI,CAAC,oBAAoB,EACzB,oBAAoB,CACrB;4BACD,YACE,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAC5B,EAAE,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAC5B,EAAE,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC,EAC9B,EAAE,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC,GAC9B;4BACD,IAAI,CAAC,qBAAqB,CACzB,IAAI,CAAC,kBAAkB,EACvB,kBAAkB,CACnB,CACC;wBACH,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,SAAG,SAAS,EAAE,aAAa,OAAO,IAAI,OAAO,GAAG;4BAC9C,YACE,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAC,aAAa,EACnB,EAAE,EAAE,WAAW,CAAC,CAAC,EACjB,EAAE,EAAE,WAAW,CAAC,CAAC,EACjB,EAAE,EAAE,SAAS,CAAC,CAAC,EACf,EAAE,EAAE,SAAS,CAAC,CAAC,GACf,CACA,CACL,CACG;oBACL,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,EAAC,aAAa,IACZ,KAAK,EAAE,WAAW,EAClB,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,EAClC,wBAAwB,EAAE,CAAC,KAAK,EAAE,EAAE,CAClC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,EAEpD,yBAAyB,EAAE,CAAC,KAAK,EAAE,EAAE,CACnC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,EAErD,sBAAsB,EAAE,CAAC,KAAK,EAAE,EAAE,CAChC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,GAElD,CACH;oBACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CACzB,WACE,KAAK,EAAC,gBAAgB,EACtB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACR,CACI,CACR,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,EAAC,IAAI,OAAQ,CAAC;YACvB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CACL,EAAC,IAAI;gBACH,WACE,KAAK,EAAC,gBAAgB,EACtB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACF,CACR,CAAC;QACJ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWF","sourcesContent":["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 { Dimensions, Point } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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  arrowheadPointsToCirclePoints,\n  arrowheadPointsToHashPoints,\n  arrowheadPointsToPathPoints,\n  arrowheadPointsToPolygonPoints,\n  createLineAnchorStylePoints,\n  LineAnchorStyle,\n  LineAnchorStylePoints,\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * The style of the starting anchor. This defaults to none.\n   */\n  @Prop({ mutable: true })\n  public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n  /**\n   * The style of the ending anchor. This defaults to 'arrow-triangle.'\n   */\n  @Prop({ mutable: true })\n  public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\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 interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-arrow-scale',\n        this.scale?.toString() ?? '1'\n      );\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  private renderLineAnchorStyle(\n    anchorStyle: LineAnchorStyle,\n    arrowheadPoints: LineAnchorStylePoints\n  ): h.JSX.IntrinsicElements {\n    if (anchorStyle === 'arrow-triangle') {\n      return (\n        <polygon\n          id=\"line-anchor-arrow-triangle\"\n          class=\"head\"\n          points={arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'arrow-line') {\n      return (\n        <path\n          id=\"line-anchor-arrow-line\"\n          class=\"head\"\n          d={arrowheadPointsToPathPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'hash') {\n      const hashPoints = arrowheadPointsToHashPoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <line id=\"line-anchor-hash\" class=\"head\" {...hashPoints} />;\n    } else if (anchorStyle === 'dot') {\n      const circlePoints = arrowheadPointsToCirclePoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <circle id=\"line-anchor-circle\" class=\"head\" {...circlePoints} />;\n    } else {\n      return <div />;\n    }\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.start != null && this.end != null && this.elementBounds != null) {\n      const elementBounds = this.elementBounds;\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n      const screenStart = translatePointToScreen(\n        this.start,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const screenEnd = translatePointToScreen(\n        this.end,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n\n      if (isValidPointData(screenStart, screenEnd)) {\n        const arrowheadStartPoints = createLineAnchorStylePoints(\n          screenEnd,\n          screenStart\n        );\n        const arrowheadEndPoints = createLineAnchorStylePoints(\n          screenStart,\n          screenEnd\n        );\n\n        return (\n          <Host>\n            <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n              <defs>\n                <SvgShadow id=\"arrow-shadow\" />\n              </defs>\n              <g\n                transform={`translate(${offsetX} ${offsetY})`}\n                filter=\"url(#arrow-shadow)\"\n              >\n                {this.renderLineAnchorStyle(\n                  this.startLineAnchorStyle,\n                  arrowheadStartPoints\n                )}\n                <line\n                  id=\"arrow-line\"\n                  class=\"line\"\n                  x1={arrowheadEndPoints.tip.x}\n                  y1={arrowheadEndPoints.tip.y}\n                  x2={arrowheadStartPoints.tip.x}\n                  y2={arrowheadStartPoints.tip.y}\n                />\n                {this.renderLineAnchorStyle(\n                  this.endLineAnchorStyle,\n                  arrowheadEndPoints\n                )}\n              </g>\n              {this.mode === 'edit' && (\n                <g transform={`translate(${offsetX} ${offsetY})`}>\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                </g>\n              )}\n            </svg>\n            {this.mode === 'edit' && (\n              <BoundingBox1d\n                start={screenStart}\n                end={screenEnd}\n                offset={{ x: offsetX, y: offsetY }}\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,"file":"viewer-markup-arrow.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { Dimensions, Point } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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  arrowheadPointsToCirclePoints,\n  arrowheadPointsToHashPoints,\n  arrowheadPointsToPathPoints,\n  arrowheadPointsToPolygonPoints,\n  createLineAnchorStylePoints,\n  LineAnchorStyle,\n  LineAnchorStylePoints,\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * The style of the starting anchor. This defaults to none.\n   */\n  @Prop({ mutable: true })\n  public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n  /**\n   * The style of the ending anchor. This defaults to 'arrow-triangle.'\n   */\n  @Prop({ mutable: true })\n  public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\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 interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-arrow-scale',\n        this.scale?.toString() ?? '1'\n      );\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  private renderLineAnchorStyle(\n    anchorStyle: LineAnchorStyle,\n    arrowheadPoints: LineAnchorStylePoints\n  ): h.JSX.IntrinsicElements {\n    if (anchorStyle === 'arrow-triangle') {\n      return (\n        <polygon\n          id=\"line-anchor-arrow-triangle\"\n          class=\"head\"\n          points={arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'arrow-line') {\n      return (\n        <path\n          id=\"line-anchor-arrow-line\"\n          class=\"head\"\n          d={arrowheadPointsToPathPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'hash') {\n      const hashPoints = arrowheadPointsToHashPoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <line id=\"line-anchor-hash\" class=\"head\" {...hashPoints} />;\n    } else if (anchorStyle === 'dot') {\n      const circlePoints = arrowheadPointsToCirclePoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <circle id=\"line-anchor-circle\" class=\"head\" {...circlePoints} />;\n    } else {\n      return <div />;\n    }\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.start != null && this.end != null && this.elementBounds != null) {\n      const elementBounds = this.elementBounds;\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n      const screenStart = translatePointToScreen(\n        this.start,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const screenEnd = translatePointToScreen(\n        this.end,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n\n      if (isValidPointData(screenStart, screenEnd)) {\n        const arrowheadStartPoints = createLineAnchorStylePoints(\n          screenEnd,\n          screenStart\n        );\n        const arrowheadEndPoints = createLineAnchorStylePoints(\n          screenStart,\n          screenEnd\n        );\n\n        return (\n          <Host>\n            <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n              <defs>\n                <SvgShadow id=\"arrow-shadow\" scale={this.scale} />\n              </defs>\n              <g\n                transform={`translate(${offsetX} ${offsetY})`}\n                filter=\"url(#arrow-shadow)\"\n              >\n                {this.renderLineAnchorStyle(\n                  this.startLineAnchorStyle,\n                  arrowheadStartPoints\n                )}\n                <line\n                  id=\"arrow-line\"\n                  class=\"line\"\n                  x1={arrowheadEndPoints.tip.x}\n                  y1={arrowheadEndPoints.tip.y}\n                  x2={arrowheadStartPoints.tip.x}\n                  y2={arrowheadStartPoints.tip.y}\n                />\n                {this.renderLineAnchorStyle(\n                  this.endLineAnchorStyle,\n                  arrowheadEndPoints\n                )}\n              </g>\n              {this.mode === 'edit' && (\n                <g transform={`translate(${offsetX} ${offsetY})`}>\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                </g>\n              )}\n            </svg>\n            {this.mode === 'edit' && (\n              <BoundingBox1d\n                start={screenStart}\n                end={screenEnd}\n                offset={{ x: offsetX, y: offsetY }}\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"]}

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

@@ -119,7 +119,7 @@ export class ViewerMarkupCircle {
             const center = Rectangle.center(relativeBounds);
             const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / getWindowDevicePixelRatio();
             const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / getWindowDevicePixelRatio();
-            return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "circle-shadow" })), h("g", { transform: `translate(${offsetX} ${offsetY})`, 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, offset: { x: offsetX, y: offsetY }, 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 }))));
+            return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "circle-shadow", scale: this.scale })), h("g", { transform: `translate(${offsetX} ${offsetY})`, 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, offset: { x: offsetX, y: offsetY }, 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 })));

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-markup-circle.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup-circle/viewer-markup-circle.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-circle-scale',\n        this.scale.toString()\n      );\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        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const center = Rectangle.center(relativeBounds);\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#circle-shadow)\"\n            >\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              offset={{ x: offsetX, y: offsetY }}\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,"file":"viewer-markup-circle.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup-circle/viewer-markup-circle.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-circle-scale',\n        this.scale.toString()\n      );\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        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const center = Rectangle.center(relativeBounds);\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" scale={this.scale} />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#circle-shadow)\"\n            >\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              offset={{ x: offsetX, y: offsetY }}\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"]}

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

@@ -121,7 +121,7 @@ export class ViewerMarkupFreeform {
         if (this.screenPoints.length > 0 && this.elementBounds != null) {
             const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / getWindowDevicePixelRatio();
             const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / getWindowDevicePixelRatio();
-            return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "freeform-markup-shadow" })), h("g", { transform: `translate(${offsetX} ${offsetY})`, 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, this.originatingViewport, this.centeringBehavior, this.scale), offset: { x: offsetX, y: offsetY }, 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 }))));
+            return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "freeform-markup-shadow", scale: this.scale })), h("g", { transform: `translate(${offsetX} ${offsetY})`, 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, this.originatingViewport, this.centeringBehavior, this.scale), offset: { x: offsetX, y: offsetY }, 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 })));

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-markup-freeform.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup-freeform/viewer-markup-freeform.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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('originatingViewport')\n  @Watch('offset')\n  @Watch('scale')\n  @Watch('bounds')\n  @Watch('points')\n  protected recomputePointsFromProps(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-freeform-scale',\n        this.scale.toString()\n      );\n    });\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      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"freeform-markup-shadow\" />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#freeform-markup-shadow)\"\n            >\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(\n                this.bounds,\n                this.elementBounds,\n                this.originatingViewport,\n                this.centeringBehavior,\n                this.scale\n              )}\n              offset={{ x: offsetX, y: offsetY }}\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(\n          pt,\n          elementBounds,\n          this.originatingViewport,\n          this.centeringBehavior,\n          this.scale\n        )\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"viewer-markup-freeform.js","sourceRoot":"","sources":["../../../../../src/components/viewer-markup-freeform/viewer-markup-freeform.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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('originatingViewport')\n  @Watch('offset')\n  @Watch('scale')\n  @Watch('bounds')\n  @Watch('points')\n  protected recomputePointsFromProps(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-freeform-scale',\n        this.scale.toString()\n      );\n    });\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      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"freeform-markup-shadow\" scale={this.scale} />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#freeform-markup-shadow)\"\n            >\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(\n                this.bounds,\n                this.elementBounds,\n                this.originatingViewport,\n                this.centeringBehavior,\n                this.scale\n              )}\n              offset={{ x: offsetX, y: offsetY }}\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(\n          pt,\n          elementBounds,\n          this.originatingViewport,\n          this.centeringBehavior,\n          this.scale\n        )\n      );\n    }\n  }\n}\n"]}

package/dist/components/{p-CjiOj-dT.js → p-5_uPLHD2.js}

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{t as e,p as i,H as r,d as t,h as o,e as s}from"./p-DmsAWRoU.js";import{g as n}from"./p-Tvs4yxd5.js";import{g as h,a}from"./p-BSYTUXcE.js";import{w as l}from"./p-Ss6piqGD.js";import{g as c}from"./p-Bg-uS9BH.js";import{M as d,t as u,l as p,d as v,m as w,n as b,S as m}from"./p-Dru_6caB.js";import{B as f}from"./p-DTWAiCst.js";class g extends d{constructor(e,i,r){super();this.markupEl=e;this.interactionBegin=i;this.interactionEnd=r;this.anchor="bottom-right"}editAnchor(e,i){if(this.markupEl.mode==="edit"){this.anchor=e;this.resizeBounds=this.markupEl.bounds;this.startInteraction(i)}}startInteraction(e){this.handleInteractionAttempt(e)}computeBoundingRect(){return c(this.markupEl)}handleInteractionAttempt(e){var i;if(this.markupEl.mode!==""&&this.pointerId==null&&this.elementBounds!=null){const r=u(h(e,this.elementBounds),this.elementBounds);this.pointerId=e.pointerId;this.startPosition=r;this.markupEl.bounds=(i=this.markupEl.bounds)!==null&&i!==void 0?i:n.create(r.x,r.y,0,0);this.resizeBounds=this.markupEl.bounds;this.interactionBegin.emit();this.acceptInteraction()}}handleInteractionMove(e){var i;if(this.markupEl.bounds!=null&&this.startPosition!=null&&this.elementBounds!=null&&this.pointerId===e.pointerId){const r=u(h(e,this.elementBounds),this.elementBounds);this.markupEl.bounds=p((i=this.resizeBounds)!==null&&i!==void 0?i:this.markupEl.bounds,this.startPosition,r,this.anchor,e.shiftKey)}}handleInteractionEnd(e){var i,r;if(this.pointerId===e.pointerId){if(this.markupEl.mode!==""&&this.markupEl.bounds!=null&&((i=this.markupEl.bounds)===null||i===void 0?void 0:i.width)>0&&((r=this.markupEl.bounds)===null||r===void 0?void 0:r.height)>0){this.anchor="bottom-right";const e=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:e})}else{this.markupEl.bounds=undefined}this.pointerId=undefined}}}const k=()=>`: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:4px;--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;--viewer-markup-circle-scale:1}.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:calc(     var(--viewer-markup-circle-ellipse-stroke-width) *       var(--viewer-markup-circle-scale)   );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 x=i(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.interactionBegin=t(this,"interactionBegin");this.interactionEnd=t(this,"interactionEnd");this.viewRendered=t(this,"viewRendered");this.mode="";this.centeringBehavior="none";this.scale=1;this.interactionHandler=new g(this.hostEl,this.interactionBegin,this.interactionEnd);this.handleWindowPointerDown=e=>{if(v(e)){this.interactionHandler.startInteraction(e)}};this.handleTouchStart=e=>{e.preventDefault()}}componentWillLoad(){this.updateViewport();this.handleViewerChanged(this.viewer);this.updateBoundsFromProps()}componentDidLoad(){this.updateBoundsFromProps();const e=new ResizeObserver((()=>this.updateViewport()));e.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 e;(e=this.registeredHandler)===null||e===void 0?void 0:e.dispose();this.registeredHandler=undefined;window.removeEventListener("pointerdown",this.handleWindowPointerDown)}async handleViewerChanged(e){var i;(i=this.registeredHandler)===null||i===void 0?void 0:i.dispose();this.registeredHandler=undefined;if(e!=null){this.registeredHandler=await e.registerInteractionHandler(this.interactionHandler)}}handleBoundsJsonChange(){this.updateBoundsFromProps()}handleModeChange(){if(this.mode!=="create"){window.removeEventListener("pointerdown",this.handleWindowPointerDown)}}handleScaleChange(){l((()=>{this.hostEl.style.setProperty("--viewer-markup-circle-scale",this.scale.toString())}))}updateViewport(){const e=c(this.hostEl);this.elementBounds=e}updateBoundsFromProps(){var e;this.bounds=(e=this.bounds)!==null&&e!==void 0?e:w(this.boundsJson)}render(){var e,i,r,t;if(this.bounds!=null&&this.elementBounds!=null){const h=b(this.bounds,this.elementBounds,this.originatingViewport,this.centeringBehavior,this.scale);const l=n.center(h);const c=((i=(e=this.offset)===null||e===void 0?void 0:e.x)!==null&&i!==void 0?i:0)/a();const d=((t=(r=this.offset)===null||r===void 0?void 0:r.y)!==null&&t!==void 0?t:0)/a();return o(s,null,o("svg",{class:"svg",onTouchStart:this.handleTouchStart},o("defs",null,o(m,{id:"circle-shadow"})),o("g",{transform:`translate(${c} ${d})`,filter:"url(#circle-shadow)"},o("ellipse",{class:"ellipse",cx:l.x,cy:l.y,rx:h.width/2,ry:h.height/2,stroke:"#000ff0","stroke-width":4,fill:"none"}))),this.mode==="edit"&&o(f,{bounds:h,offset:{x:c,y:d},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"&&o("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}else{return o(s,null,o("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],bounds:[{handleBoundsJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}}static get style(){return k()}},[1,"vertex-viewer-markup-circle",{bounds:[1040],boundsJson:[1,"bounds"],mode:[513],viewer:[16],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],elementBounds:[32],dispose:[64]},undefined,{viewer:[{handleViewerChanged:0}],bounds:[{handleBoundsJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const i=["vertex-viewer-markup-circle"];i.forEach((i=>{switch(i){case"vertex-viewer-markup-circle":if(!customElements.get(e(i))){customElements.define(e(i),x)}break}}))}y();export{x as V,y as d};
-//# sourceMappingURL=p-CjiOj-dT.js.map
+import{t as e,p as i,H as r,d as t,h as o,e as s}from"./p-DmsAWRoU.js";import{g as n}from"./p-Tvs4yxd5.js";import{g as h,a}from"./p-BSYTUXcE.js";import{w as l}from"./p-Ss6piqGD.js";import{g as c}from"./p-Bg-uS9BH.js";import{M as d,t as u,l as p,d as v,m as w,n as b,S as m}from"./p-DXGQW235.js";import{B as f}from"./p-BYYwcm7k.js";class g extends d{constructor(e,i,r){super();this.markupEl=e;this.interactionBegin=i;this.interactionEnd=r;this.anchor="bottom-right"}editAnchor(e,i){if(this.markupEl.mode==="edit"){this.anchor=e;this.resizeBounds=this.markupEl.bounds;this.startInteraction(i)}}startInteraction(e){this.handleInteractionAttempt(e)}computeBoundingRect(){return c(this.markupEl)}handleInteractionAttempt(e){var i;if(this.markupEl.mode!==""&&this.pointerId==null&&this.elementBounds!=null){const r=u(h(e,this.elementBounds),this.elementBounds);this.pointerId=e.pointerId;this.startPosition=r;this.markupEl.bounds=(i=this.markupEl.bounds)!==null&&i!==void 0?i:n.create(r.x,r.y,0,0);this.resizeBounds=this.markupEl.bounds;this.interactionBegin.emit();this.acceptInteraction()}}handleInteractionMove(e){var i;if(this.markupEl.bounds!=null&&this.startPosition!=null&&this.elementBounds!=null&&this.pointerId===e.pointerId){const r=u(h(e,this.elementBounds),this.elementBounds);this.markupEl.bounds=p((i=this.resizeBounds)!==null&&i!==void 0?i:this.markupEl.bounds,this.startPosition,r,this.anchor,e.shiftKey)}}handleInteractionEnd(e){var i,r;if(this.pointerId===e.pointerId){if(this.markupEl.mode!==""&&this.markupEl.bounds!=null&&((i=this.markupEl.bounds)===null||i===void 0?void 0:i.width)>0&&((r=this.markupEl.bounds)===null||r===void 0?void 0:r.height)>0){this.anchor="bottom-right";const e=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:e})}else{this.markupEl.bounds=undefined}this.pointerId=undefined}}}const k=()=>`: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:4px;--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;--viewer-markup-circle-scale:1}.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:calc(     var(--viewer-markup-circle-ellipse-stroke-width) *       var(--viewer-markup-circle-scale)   );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 x=i(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.interactionBegin=t(this,"interactionBegin");this.interactionEnd=t(this,"interactionEnd");this.viewRendered=t(this,"viewRendered");this.mode="";this.centeringBehavior="none";this.scale=1;this.interactionHandler=new g(this.hostEl,this.interactionBegin,this.interactionEnd);this.handleWindowPointerDown=e=>{if(v(e)){this.interactionHandler.startInteraction(e)}};this.handleTouchStart=e=>{e.preventDefault()}}componentWillLoad(){this.updateViewport();this.handleViewerChanged(this.viewer);this.updateBoundsFromProps()}componentDidLoad(){this.updateBoundsFromProps();const e=new ResizeObserver((()=>this.updateViewport()));e.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 e;(e=this.registeredHandler)===null||e===void 0?void 0:e.dispose();this.registeredHandler=undefined;window.removeEventListener("pointerdown",this.handleWindowPointerDown)}async handleViewerChanged(e){var i;(i=this.registeredHandler)===null||i===void 0?void 0:i.dispose();this.registeredHandler=undefined;if(e!=null){this.registeredHandler=await e.registerInteractionHandler(this.interactionHandler)}}handleBoundsJsonChange(){this.updateBoundsFromProps()}handleModeChange(){if(this.mode!=="create"){window.removeEventListener("pointerdown",this.handleWindowPointerDown)}}handleScaleChange(){l((()=>{this.hostEl.style.setProperty("--viewer-markup-circle-scale",this.scale.toString())}))}updateViewport(){const e=c(this.hostEl);this.elementBounds=e}updateBoundsFromProps(){var e;this.bounds=(e=this.bounds)!==null&&e!==void 0?e:w(this.boundsJson)}render(){var e,i,r,t;if(this.bounds!=null&&this.elementBounds!=null){const h=b(this.bounds,this.elementBounds,this.originatingViewport,this.centeringBehavior,this.scale);const l=n.center(h);const c=((i=(e=this.offset)===null||e===void 0?void 0:e.x)!==null&&i!==void 0?i:0)/a();const d=((t=(r=this.offset)===null||r===void 0?void 0:r.y)!==null&&t!==void 0?t:0)/a();return o(s,null,o("svg",{class:"svg",onTouchStart:this.handleTouchStart},o("defs",null,o(m,{id:"circle-shadow",scale:this.scale})),o("g",{transform:`translate(${c} ${d})`,filter:"url(#circle-shadow)"},o("ellipse",{class:"ellipse",cx:l.x,cy:l.y,rx:h.width/2,ry:h.height/2,stroke:"#000ff0","stroke-width":4,fill:"none"}))),this.mode==="edit"&&o(f,{bounds:h,offset:{x:c,y:d},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"&&o("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}else{return o(s,null,o("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],bounds:[{handleBoundsJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}}static get style(){return k()}},[1,"vertex-viewer-markup-circle",{bounds:[1040],boundsJson:[1,"bounds"],mode:[513],viewer:[16],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],elementBounds:[32],dispose:[64]},undefined,{viewer:[{handleViewerChanged:0}],bounds:[{handleBoundsJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const i=["vertex-viewer-markup-circle"];i.forEach((i=>{switch(i){case"vertex-viewer-markup-circle":if(!customElements.get(e(i))){customElements.define(e(i),x)}break}}))}y();export{x as V,y as d};
+//# sourceMappingURL=p-5_uPLHD2.js.map

package/dist/components/{p-CjiOj-dT.js.map → p-5_uPLHD2.js.map}

@@ -1 +1 @@
-{"version":3,"names":["CircleMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","super","this","anchor","editAnchor","event","mode","resizeBounds","bounds","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","position","translatePointToRelative","getMouseClientPosition","startPosition","_a","Rectangle","create","x","y","emit","acceptInteraction","handleInteractionMove","transformRectangle","shiftKey","handleInteractionEnd","width","_b","height","newlyCreatedMarkup","markup","undefined","viewerMarkupCircleCss","ViewerMarkupCircle","__stencil_proxyCustomElement","HTMLElement","registerHost","centeringBehavior","scale","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","updateBoundsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","componentDidRender","viewRendered","disconnectedCallback","dispose","registeredHandler","removeEventListener","newViewer","registerInteractionHandler","handleBoundsJsonChange","handleModeChange","handleScaleChange","writeDOM","style","setProperty","toString","rect","parseBounds","boundsJson","render","relativeBounds","translateRectToScreen","originatingViewport","center","offsetX","offset","getWindowDevicePixelRatio","offsetY","_d","_c","h","Host","class","onTouchStart","SvgShadow","id","transform","filter","cx","cy","rx","ry","stroke","fill","BoundingBox2d","onTopLeftAnchorPointerDown","e","onTopRightAnchorPointerDown","onTopAnchorPointerDown","onBottomLeftAnchorPointerDown","onBottomRightAnchorPointerDown","onBottomAnchorPointerDown","onLeftAnchorPointerDown","onRightAnchorPointerDown","onCenterAnchorPointerDown"],"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 { MarkupInteraction } from '../../lib/types/markup';\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 interactionBegin: EventEmitter<void>,\n    private readonly interactionEnd: EventEmitter<MarkupInteraction>\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.interactionBegin.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\n        const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n        this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\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   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-circle-ellipse-stroke-width: 4px;\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   * @prop --viewer-markup-circle-scale: A number that specifies the scale of the circle.\n   * This is used to scale the circle's stroke width. Defaults to 1, and is managed internally\n   * by the component.\n   */\n  --viewer-markup-circle-scale: 1;\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: calc(\n    var(--viewer-markup-circle-ellipse-stroke-width) *\n      var(--viewer-markup-circle-scale)\n  );\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(\n    --viewer-markup-circle-bounds-center-anchor-background-color\n  );\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(\n    --viewer-markup-circle-bounds-edge-anchor-background-color\n  );\n}\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 { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-circle-scale',\n        this.scale.toString()\n      );\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        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const center = Rectangle.center(relativeBounds);\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#circle-shadow)\"\n            >\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              offset={{ x: offsetX, y: offsetY }}\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CircleMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","super","this","anchor","editAnchor","event","mode","resizeBounds","bounds","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","position","translatePointToRelative","getMouseClientPosition","startPosition","_a","Rectangle","create","x","y","emit","acceptInteraction","handleInteractionMove","transformRectangle","shiftKey","handleInteractionEnd","width","_b","height","newlyCreatedMarkup","markup","undefined","viewerMarkupCircleCss","ViewerMarkupCircle","__stencil_proxyCustomElement","HTMLElement","registerHost","centeringBehavior","scale","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","updateBoundsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","componentDidRender","viewRendered","disconnectedCallback","dispose","registeredHandler","removeEventListener","newViewer","registerInteractionHandler","handleBoundsJsonChange","handleModeChange","handleScaleChange","writeDOM","style","setProperty","toString","rect","parseBounds","boundsJson","render","relativeBounds","translateRectToScreen","originatingViewport","center","offsetX","offset","getWindowDevicePixelRatio","offsetY","_d","_c","h","Host","class","onTouchStart","SvgShadow","id","transform","filter","cx","cy","rx","ry","stroke","fill","BoundingBox2d","onTopLeftAnchorPointerDown","e","onTopRightAnchorPointerDown","onTopAnchorPointerDown","onBottomLeftAnchorPointerDown","onBottomRightAnchorPointerDown","onBottomAnchorPointerDown","onLeftAnchorPointerDown","onRightAnchorPointerDown","onCenterAnchorPointerDown"],"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 { MarkupInteraction } from '../../lib/types/markup';\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 interactionBegin: EventEmitter<void>,\n    private readonly interactionEnd: EventEmitter<MarkupInteraction>\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.interactionBegin.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\n        const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n        this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\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   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-circle-ellipse-stroke-width: 4px;\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   * @prop --viewer-markup-circle-scale: A number that specifies the scale of the circle.\n   * This is used to scale the circle's stroke width. Defaults to 1, and is managed internally\n   * by the component.\n   */\n  --viewer-markup-circle-scale: 1;\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: calc(\n    var(--viewer-markup-circle-ellipse-stroke-width) *\n      var(--viewer-markup-circle-scale)\n  );\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(\n    --viewer-markup-circle-bounds-center-anchor-background-color\n  );\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(\n    --viewer-markup-circle-bounds-edge-anchor-background-color\n  );\n}\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 { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\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   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\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.interactionBegin,\n    this.interactionEnd\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  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-circle-scale',\n        this.scale.toString()\n      );\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        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const center = Rectangle.center(relativeBounds);\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" scale={this.scale} />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#circle-shadow)\"\n            >\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              offset={{ x: offsetX, y: offsetY }}\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"],"mappings":"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","ignoreList":[]}