@vertexvis/viewer 1.1.1-testing.3 → 1.1.1-testing.5

package/dist/components/vertex-viewer-hit-result-indicator.js

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{t as i,p as t,H as s,h as n,e}from"./p-Bb32XUUS.js";import{v as h,m as o,q as l,r,a}from"./p-CZZALKHT.js";import{w as c,r as d}from"./p-Cd7kap5W.js";import{M as u,R as v,r as p,s as f,T as m,c as w,a as g,A as b,b as C}from"./p-CfTvpqud.js";function N(i,t){return i.getPropertyValue(t).trim().replace(/["']*/g,"")}function y(i,t,s,n){const e=h.multiplyByTransformMatrixRowMajor(s,o.makeRotation(l.fromMatrixRotation(i)));const c=h.fromMatrixPosition(i);const d=Math.abs(h.dot(e,h.up()))===1?h.left():h.normalize(h.cross(e,h.up()));const v=h.normalize(h.cross(d,e));const p=r.create({origin:c,direction:d});const f=r.create({origin:c,direction:v});const m=h.rotateAboutAxis(a.toRadians(45),r.at(p,-n),e,c);const w=h.rotateAboutAxis(a.toRadians(45),r.at(f,-n),e,c);const g=h.rotateAboutAxis(a.toRadians(45),r.at(f,n),e,c);const b=h.rotateAboutAxis(a.toRadians(45),r.at(p,n),e,c);const C=[m,w,b,g];return new u(!Number.isNaN(d.x),[m,w,b,g],C.map((i=>h.multiplyByTransformMatrixColumnMajor(i,t.projectionViewMatrix))),(i=>h.distance(c,i)))}function O(i,t,s,n){const e=h.multiplyByTransformMatrixRowMajor(s,o.makeRotation(l.fromMatrixRotation(i)));const c=h.fromMatrixPosition(i);const d=h.normalize(h.cross(e,h.normalize(t.viewVector)));const v=h.normalize(h.cross(e,d));const p=r.create({origin:c,direction:d});const f=r.create({origin:c,direction:v});const m=r.at(p,-n);const w=r.at(f,-n);const g=r.at(f,n);const b=r.at(p,n);const C=h.rotateAboutAxis(a.toRadians(45),m,e,c);const N=h.rotateAboutAxis(a.toRadians(45),w,e,c);const y=h.rotateAboutAxis(a.toRadians(45),g,e,c);const O=h.rotateAboutAxis(a.toRadians(45),b,e,c);const x=[m,C,w,N,b,O,g,y];return new u(!Number.isNaN(d.x),x,x.map((i=>h.multiplyByTransformMatrixColumnMajor(i,t.projectionViewMatrix))),(i=>h.distance(c,i)))}const x=.4;const E=5;const S=.75;class $ extends v{constructor(i,t={},s={}){super(i);this.arrowFillColor=t.arrow;this.planeFillColor=t.plane;this.outlineColor=t.outline;this.planeOpacity=s.plane}updateTransformAndNormal(i,t){var s;this.transform=i;this.normal=t;if(i!=null&&t!=null&&this.frame!=null){this.updateAndDraw()}else{this.clear();(s=this.reglFrameDisposable)===null||s===void 0?void 0:s.cancel();this.reglFrameDisposable=undefined}}updateColors(i){var t,s,n,e,h,o,l,r,a;this.arrowFillColor=(t=i.arrow)!==null&&t!==void 0?t:this.arrowFillColor;this.planeFillColor=(s=i.plane)!==null&&s!==void 0?s:this.planeFillColor;this.outlineColor=(n=i.outline)!==null&&n!==void 0?n:this.outlineColor;(e=this.arrow)===null||e===void 0?void 0:e.updateFillColor(this.arrowFillColor);(h=this.plane)===null||h===void 0?void 0:h.updateFillColor(this.planeFillColor);(o=this.arrow)===null||o===void 0?void 0:o.updateOutlineColor(this.outlineColor);(l=this.plane)===null||l===void 0?void 0:l.updateOutlineColor(this.outlineColor);(r=this.point)===null||r===void 0?void 0:r.updateOutlineColor(this.outlineColor);(a=this.axis)===null||a===void 0?void 0:a.updateOutlineColor(this.outlineColor)}updateOpacities(i){this.planeOpacity=i.plane}hasData(){return this.transform!=null&&this.normal!=null}createOrUpdateElements(){if(this.transform!=null&&this.normal!=null&&this.frame!=null){if(this.arrow==null){this.createElements(this.transform,this.normal,this.frame)}else{this.updateElements(this.transform,this.normal,this.frame)}}}createElements(i,t,s){this.reglCommand=p({canvas:this.canvasElement,extensions:"angle_instanced_arrays"});const{createShape:n}=f(this.reglCommand);const e=this.computeTriangleSize(h.fromMatrixPosition(i),s);this.arrow=new m(n,"hit-normal-arrow",w(i,s.scene.camera,t,e),this.outlineColor,this.arrowFillColor);this.plane=new g(n,"hit-plane",y(i,s.scene.camera,t,e*E),this.outlineColor,this.planeFillColor,{opacity:this.getPlaneOpacity(),depth:.5});this.point=new g(n,"hit-position",O(i,s.scene.camera,t,e*x),this.outlineColor,this.outlineColor,{join:"round",depth:1});this.axis=new b(n,"hit-normal-axis",C(i,s.scene.camera,this.arrow),this.outlineColor,this.arrowFillColor);this.availableElements=[this.arrow,this.point,this.plane,this.axis]}updateElements(i,t,s){var n;const e=this.computeTriangleSize(h.fromMatrixPosition(i),s);if(this.arrow!=null){this.arrow.updatePoints(w(i,s.scene.camera,t,e));(n=this.axis)===null||n===void 0?void 0:n.updatePoints(C(i,s.scene.camera,this.arrow))}if(this.plane!=null){this.plane.updatePoints(y(i,s.scene.camera,t,e*E))}if(this.point!=null){this.point.updatePoints(O(i,s.scene.camera,t,e*x))}}getPlaneOpacity(){if(this.planeOpacity!=null){return typeof this.planeOpacity==="string"?Number.parseFloat(this.planeOpacity):this.planeOpacity}return S}}const J=()=>`:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-hit-result-indicator-arrow-color:#0099cc;--viewer-hit-result-indicator-plane-color:#0099cc;--viewer-hit-result-indicator-outline-color:#000000;--viewer-hit-result-indicator-plane-opacity:0.75}.indicator{position:absolute;top:0;left:0}`;const j=t(class i extends s{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.arrowColor="#0099cc";this.planeColor="#0099cc";this.outlineColor="#000000";this.planeOpacity=S;this.handleViewerFrameDrawn=()=>{this.updatePropsFromViewer()};this.handleViewerDimensionsChange=()=>{c((()=>{if(this.viewer!=null&&this.canvasRef!=null){this.canvasRef.width=this.viewer.viewport.width;this.canvasRef.height=this.viewer.viewport.height;this.updateAndRedrawIndicator()}}))};this.handleResize=()=>{if(this.canvasRef!=null){this.updateAndRedrawIndicator()}};this.updatePropsFromViewer=()=>{const{frame:i}=this.viewer||{};if(i!=null){const t=this.getIndicator();t.updateFrame(i)}};this.setupIndicator=i=>{var t,s;console.debug(`Initializing hit indicator. [initial-position=${JSON.stringify(this.position)}, initial-normal=${JSON.stringify(this.normal)} has-initial-frame=${((t=this.viewer)===null||t===void 0?void 0:t.frame)!=null}]`);this.indicator=new $(i,{arrow:this.arrowColor,plane:this.planeColor},{plane:this.planeOpacity});this.transform=this.createTransform();this.indicator.updateTransformAndNormal(this.transform,this.normal);if(((s=this.viewer)===null||s===void 0?void 0:s.frame)!=null){this.indicator.updateFrame(this.viewer.frame)}return this.indicator};this.updateAndRedrawIndicator=()=>{d((()=>{this.getIndicator().updateAndDraw()}))};this.createTransform=()=>{if(this.position!=null){return o.makeTranslation(this.position)}};this.getIndicator=()=>{if(this.indicator==null&&this.canvasRef!=null){return this.setupIndicator(this.canvasRef)}else if(this.indicator!=null){return this.indicator}else{throw new Error("Hit indicator was not initialized. The canvas element may not have been initialized.")}}}componentDidLoad(){this.handleViewerChanged(this.viewer,undefined);this.canvasResizeObserver=new ResizeObserver(this.handleResize);if(this.canvasRef!=null){this.canvasResizeObserver.observe(this.canvasRef);this.setupIndicator(this.canvasRef)}d((()=>{var i,t;const s=window.getComputedStyle(this.hostEl);this.arrowColor=N(s,"--viewer-hit-result-indicator-arrow-color");this.planeColor=N(s,"--viewer-hit-result-indicator-plane-color");this.outlineColor=N(s,"--viewer-hit-result-indicator-outline-color");this.planeOpacity=s.getPropertyValue("--viewer-hit-result-indicator-plane-opacity").trim();(i=this.indicator)===null||i===void 0?void 0:i.updateColors({arrow:this.arrowColor,plane:this.planeColor,outline:this.outlineColor});(t=this.indicator)===null||t===void 0?void 0:t.updateOpacities({plane:this.planeOpacity})}))}disconnectedCallback(){var i,t;(i=this.canvasResizeObserver)===null||i===void 0?void 0:i.disconnect();(t=this.indicator)===null||t===void 0?void 0:t.dispose()}handleViewerChanged(i,t){t===null||t===void 0?void 0:t.removeEventListener("frameDrawn",this.handleViewerFrameDrawn);t===null||t===void 0?void 0:t.removeEventListener("dimensionschange",this.handleViewerDimensionsChange);i===null||i===void 0?void 0:i.addEventListener("frameDrawn",this.handleViewerFrameDrawn);i===null||i===void 0?void 0:i.addEventListener("dimensionschange",this.handleViewerDimensionsChange)}handlePositionChanged(i,t){var s;this.transform=this.createTransform();console.debug(`Updating indicator position [previous=${JSON.stringify(t)}, current=${JSON.stringify(i)}]`);(s=this.indicator)===null||s===void 0?void 0:s.updateTransformAndNormal(this.transform,this.normal)}handleNormalChanged(i,t){var s;console.debug(`Updating indicator normal [previous=${JSON.stringify(t)}, current=${JSON.stringify(i)}]`);if(i){(s=this.indicator)===null||s===void 0?void 0:s.updateTransformAndNormal(this.transform,this.normal)}}render(){var i,t;return n(e,{key:"7553f25f76e20a766789b42fceb2d0c6024f48c3"},n("canvas",{key:"e9415c4ae604cdf3799f81e1eccfa5feab1210de",ref:i=>{this.canvasRef=i},class:"indicator",width:(i=this.viewer)===null||i===void 0?void 0:i.viewport.width,height:(t=this.viewer)===null||t===void 0?void 0:t.viewport.height}))}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],position:[{handlePositionChanged:0}],normal:[{handleNormalChanged:0}]}}static get style(){return J()}},[1,"vertex-viewer-hit-result-indicator",{viewer:[16],position:[1040],normal:[1040]},undefined,{viewer:[{handleViewerChanged:0}],position:[{handlePositionChanged:0}],normal:[{handleNormalChanged:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-hit-result-indicator"];t.forEach((t=>{switch(t){case"vertex-viewer-hit-result-indicator":if(!customElements.get(i(t))){customElements.define(i(t),j)}break}}))}k();const T=j;const U=k;export{T as VertexViewerHitResultIndicator,U as defineCustomElement};
+import{t as i,p as t,H as s,h as n,e}from"./p-Bb32XUUS.js";import{v as h,m as o,q as l,r,a}from"./p-2UsvOTHJ.js";import{w as c,r as d}from"./p-Cd7kap5W.js";import{M as u,R as v,r as p,s as f,T as m,c as w,a as g,A as b,b as N}from"./p-KidjtXKE.js";function C(i,t){return i.getPropertyValue(t).trim().replace(/["']*/g,"")}function y(i,t,s,n){const e=h.multiplyByTransformMatrixRowMajor(s,o.makeRotation(l.fromMatrixRotation(i)));const c=h.fromMatrixPosition(i);const d=Math.abs(h.dot(e,h.up()))===1?h.left():h.normalize(h.cross(e,h.up()));const v=h.normalize(h.cross(d,e));const p=r.create({origin:c,direction:d});const f=r.create({origin:c,direction:v});const m=h.rotateAboutAxis(a.toRadians(45),r.at(p,-n),e,c);const w=h.rotateAboutAxis(a.toRadians(45),r.at(f,-n),e,c);const g=h.rotateAboutAxis(a.toRadians(45),r.at(f,n),e,c);const b=h.rotateAboutAxis(a.toRadians(45),r.at(p,n),e,c);const N=[m,w,b,g];return new u(!Number.isNaN(d.x),[m,w,b,g],N.map((i=>h.multiplyByTransformMatrixColumnMajor(i,t.projectionViewMatrix))),(i=>h.distance(c,i)))}function O(i,t,s,n){const e=h.multiplyByTransformMatrixRowMajor(s,o.makeRotation(l.fromMatrixRotation(i)));const c=h.fromMatrixPosition(i);const d=h.normalize(h.cross(e,h.normalize(t.viewVector)));const v=h.normalize(h.cross(e,d));const p=r.create({origin:c,direction:d});const f=r.create({origin:c,direction:v});const m=r.at(p,-n);const w=r.at(f,-n);const g=r.at(f,n);const b=r.at(p,n);const N=h.rotateAboutAxis(a.toRadians(45),m,e,c);const C=h.rotateAboutAxis(a.toRadians(45),w,e,c);const y=h.rotateAboutAxis(a.toRadians(45),g,e,c);const O=h.rotateAboutAxis(a.toRadians(45),b,e,c);const E=[m,N,w,C,b,O,g,y];return new u(!Number.isNaN(d.x),E,E.map((i=>h.multiplyByTransformMatrixColumnMajor(i,t.projectionViewMatrix))),(i=>h.distance(c,i)))}const E=.4;const x=5;const S=.75;class J extends v{constructor(i,t={},s={}){super(i);this.arrowFillColor=t.arrow;this.planeFillColor=t.plane;this.outlineColor=t.outline;this.planeOpacity=s.plane}updateTransformAndNormal(i,t){var s;this.transform=i;this.normal=t;if(i!=null&&t!=null&&this.frame!=null){this.updateAndDraw()}else{this.clear();(s=this.reglFrameDisposable)===null||s===void 0?void 0:s.cancel();this.reglFrameDisposable=undefined}}updateColors(i){var t,s,n,e,h,o,l,r,a;this.arrowFillColor=(t=i.arrow)!==null&&t!==void 0?t:this.arrowFillColor;this.planeFillColor=(s=i.plane)!==null&&s!==void 0?s:this.planeFillColor;this.outlineColor=(n=i.outline)!==null&&n!==void 0?n:this.outlineColor;(e=this.arrow)===null||e===void 0?void 0:e.updateFillColor(this.arrowFillColor);(h=this.plane)===null||h===void 0?void 0:h.updateFillColor(this.planeFillColor);(o=this.arrow)===null||o===void 0?void 0:o.updateOutlineColor(this.outlineColor);(l=this.plane)===null||l===void 0?void 0:l.updateOutlineColor(this.outlineColor);(r=this.point)===null||r===void 0?void 0:r.updateOutlineColor(this.outlineColor);(a=this.axis)===null||a===void 0?void 0:a.updateOutlineColor(this.outlineColor)}updateOpacities(i){this.planeOpacity=i.plane}hasData(){return this.transform!=null&&this.normal!=null}createOrUpdateElements(){if(this.transform!=null&&this.normal!=null&&this.frame!=null){if(this.arrow==null){this.createElements(this.transform,this.normal,this.frame)}else{this.updateElements(this.transform,this.normal,this.frame)}}}createElements(i,t,s){this.reglCommand=p({canvas:this.canvasElement,extensions:"angle_instanced_arrays"});const{createShape:n}=f(this.reglCommand);const e=this.computeTriangleSize(h.fromMatrixPosition(i),s);this.arrow=new m(n,"hit-normal-arrow",w(i,s.scene.camera,t,e),this.outlineColor,this.arrowFillColor);this.plane=new g(n,"hit-plane",y(i,s.scene.camera,t,e*x),this.outlineColor,this.planeFillColor,{opacity:this.getPlaneOpacity(),depth:.5});this.point=new g(n,"hit-position",O(i,s.scene.camera,t,e*E),this.outlineColor,this.outlineColor,{join:"round",depth:1});this.axis=new b(n,"hit-normal-axis",N(i,s.scene.camera,this.arrow),this.outlineColor,this.arrowFillColor);this.availableElements=[this.arrow,this.point,this.plane,this.axis]}updateElements(i,t,s){var n;const e=this.computeTriangleSize(h.fromMatrixPosition(i),s);if(this.arrow!=null){this.arrow.updatePoints(w(i,s.scene.camera,t,e));(n=this.axis)===null||n===void 0?void 0:n.updatePoints(N(i,s.scene.camera,this.arrow))}if(this.plane!=null){this.plane.updatePoints(y(i,s.scene.camera,t,e*x))}if(this.point!=null){this.point.updatePoints(O(i,s.scene.camera,t,e*E))}}getPlaneOpacity(){if(this.planeOpacity!=null){return typeof this.planeOpacity==="string"?Number.parseFloat(this.planeOpacity):this.planeOpacity}return S}}const $=()=>`:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-hit-result-indicator-arrow-color:#0099cc;--viewer-hit-result-indicator-plane-color:#0099cc;--viewer-hit-result-indicator-outline-color:#000000;--viewer-hit-result-indicator-plane-opacity:0.75}.indicator{position:absolute;top:0;left:0}`;const j=t(class i extends s{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.arrowColor="#0099cc";this.planeColor="#0099cc";this.outlineColor="#000000";this.planeOpacity=S;this.handleViewerFrameDrawn=()=>{this.updatePropsFromViewer()};this.handleViewerDimensionsChange=()=>{c((()=>{if(this.viewer!=null&&this.canvasRef!=null){this.canvasRef.width=this.viewer.viewport.width;this.canvasRef.height=this.viewer.viewport.height;this.updateAndRedrawIndicator()}}))};this.handleResize=()=>{if(this.canvasRef!=null){this.updateAndRedrawIndicator()}};this.updatePropsFromViewer=()=>{const{frame:i}=this.viewer||{};if(i!=null){const t=this.getIndicator();t.updateFrame(i)}};this.setupIndicator=i=>{var t,s;console.debug(`Initializing hit indicator. [initial-position=${JSON.stringify(this.position)}, initial-normal=${JSON.stringify(this.normal)} has-initial-frame=${((t=this.viewer)===null||t===void 0?void 0:t.frame)!=null}]`);this.indicator=new J(i,{arrow:this.arrowColor,plane:this.planeColor},{plane:this.planeOpacity});this.transform=this.createTransform();this.indicator.updateTransformAndNormal(this.transform,this.normal);if(((s=this.viewer)===null||s===void 0?void 0:s.frame)!=null){this.indicator.updateFrame(this.viewer.frame)}return this.indicator};this.updateAndRedrawIndicator=()=>{d((()=>{this.getIndicator().updateAndDraw()}))};this.createTransform=()=>{if(this.position!=null){return o.makeTranslation(this.position)}};this.getIndicator=()=>{if(this.indicator==null&&this.canvasRef!=null){return this.setupIndicator(this.canvasRef)}else if(this.indicator!=null){return this.indicator}else{throw new Error("Hit indicator was not initialized. The canvas element may not have been initialized.")}}}componentDidLoad(){this.handleViewerChanged(this.viewer,undefined);this.canvasResizeObserver=new ResizeObserver(this.handleResize);if(this.canvasRef!=null){this.canvasResizeObserver.observe(this.canvasRef);this.setupIndicator(this.canvasRef)}d((()=>{var i,t;const s=window.getComputedStyle(this.hostEl);this.arrowColor=C(s,"--viewer-hit-result-indicator-arrow-color");this.planeColor=C(s,"--viewer-hit-result-indicator-plane-color");this.outlineColor=C(s,"--viewer-hit-result-indicator-outline-color");this.planeOpacity=s.getPropertyValue("--viewer-hit-result-indicator-plane-opacity").trim();(i=this.indicator)===null||i===void 0?void 0:i.updateColors({arrow:this.arrowColor,plane:this.planeColor,outline:this.outlineColor});(t=this.indicator)===null||t===void 0?void 0:t.updateOpacities({plane:this.planeOpacity})}))}disconnectedCallback(){var i,t;(i=this.canvasResizeObserver)===null||i===void 0?void 0:i.disconnect();(t=this.indicator)===null||t===void 0?void 0:t.dispose()}handleViewerChanged(i,t){t===null||t===void 0?void 0:t.removeEventListener("frameDrawn",this.handleViewerFrameDrawn);t===null||t===void 0?void 0:t.removeEventListener("dimensionschange",this.handleViewerDimensionsChange);i===null||i===void 0?void 0:i.addEventListener("frameDrawn",this.handleViewerFrameDrawn);i===null||i===void 0?void 0:i.addEventListener("dimensionschange",this.handleViewerDimensionsChange)}handlePositionChanged(i,t){var s;this.transform=this.createTransform();console.debug(`Updating indicator position [previous=${JSON.stringify(t)}, current=${JSON.stringify(i)}]`);(s=this.indicator)===null||s===void 0?void 0:s.updateTransformAndNormal(this.transform,this.normal)}handleNormalChanged(i,t){var s;console.debug(`Updating indicator normal [previous=${JSON.stringify(t)}, current=${JSON.stringify(i)}]`);if(i){(s=this.indicator)===null||s===void 0?void 0:s.updateTransformAndNormal(this.transform,this.normal)}}render(){var i,t;return n(e,{key:"7553f25f76e20a766789b42fceb2d0c6024f48c3"},n("canvas",{key:"e9415c4ae604cdf3799f81e1eccfa5feab1210de",ref:i=>{this.canvasRef=i},class:"indicator",width:(i=this.viewer)===null||i===void 0?void 0:i.viewport.width,height:(t=this.viewer)===null||t===void 0?void 0:t.viewport.height}))}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],position:[{handlePositionChanged:0}],normal:[{handleNormalChanged:0}]}}static get style(){return $()}},[1,"vertex-viewer-hit-result-indicator",{viewer:[16],position:[1040],normal:[1040]},undefined,{viewer:[{handleViewerChanged:0}],position:[{handlePositionChanged:0}],normal:[{handleNormalChanged:0}]}]);function U(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-hit-result-indicator"];t.forEach((t=>{switch(t){case"vertex-viewer-hit-result-indicator":if(!customElements.get(i(t))){customElements.define(i(t),j)}break}}))}U();const k=j;const z=U;export{k as VertexViewerHitResultIndicator,z as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-hit-result-indicator.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-DCTZZ5Rd.js";const t=o;const p=s;export{t as VertexViewerMarkupArrow,p as defineCustomElement};
+import{V as o,d as s}from"./p-DjQ6RXWP.js";const t=o;const p=s;export{t as VertexViewerMarkupArrow,p as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-markup-arrow.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as s,d as o}from"./p-BC777sCK.js";const t=s;const p=o;export{t as VertexViewerMarkupCircle,p as defineCustomElement};
+import{V as s,d as o}from"./p-UJR-ixsy.js";const t=s;const p=o;export{t as VertexViewerMarkupCircle,p as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-markup-circle.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as s,d as o}from"./p-Dzs4u_ZY.js";const t=s;const p=o;export{t as VertexViewerMarkupFreeform,p as defineCustomElement};
+import{V as s,d as o}from"./p-CABws4i9.js";const t=s;const p=o;export{t as VertexViewerMarkupFreeform,p as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-markup-freeform.js.map

package/dist/components/vertex-viewer-markup-tool.js

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{t as e,p as t,H as r,d as n,h as i,e as a}from"./p-Bb32XUUS.js";import{s as o}from"./p-DRh4_Z-g.js";import{F as s,C as l,A as h}from"./p-avWSFTeP.js";import{b as d,a as c,i as u}from"./p-taOlygmc.js";import{d as m}from"./p-DCTZZ5Rd.js";import{d as f}from"./p-BC777sCK.js";import{d as p}from"./p-Dzs4u_ZY.js";const g=()=>`:host{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}:host([elevated=""]){z-index:100}`;const w=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.markupBegin=n(this,"markupBegin");this.markupEnd=n(this,"markupEnd");this.tool="arrow";this.disabled=false;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.centeringBehavior="none";this.scale=1;this.stateMap={};this.handleMarkupInteractionBegin=()=>{this.markupBegin.emit()};this.handleMarkupInteractionEnd=()=>{const{markupElement:e}=this.stateMap;if(d(e)){const{points:t,bounds:r}=e;if(t!=null&&t.length>0&&r!=null){this.markupEnd.emit(new s({points:t,bounds:r}))}}else if(c(e)){const{bounds:t}=e;if(t!=null){this.markupEnd.emit(new l({bounds:t}))}}else if(u(e)){const{start:t,end:r}=e;if(t!=null&&r!=null){this.markupEnd.emit(new h({start:t,end:r}))}}}}async handleViewerChanged(){if(this.stateMap.markupElement!=null){this.stateMap.markupElement.viewer=this.viewer}}handlePropertyChanged(){this.updateMarkupElement()}handleScalingConfigurationChanged(){this.updateMarkupElement()}componentDidLoad(){this.updateMarkupElement()}async reset(){const{markupElement:e}=this.stateMap;if(d(e)){e.points=undefined;e.bounds=undefined;e.mode="create"}else if(c(e)){e.bounds=undefined;e.mode="create"}else if(u(e)){e.start=undefined;e.end=undefined;e.mode="create"}}render(){if(!this.disabled){if(this.tool==="arrow"||this.tool==="circle"||this.tool==="freeform"){return i(a,null,i("slot",null))}else{return i(a,null,`Unsupported tool type '${this.tool}'.`)}}else{return i(a,null)}}createArrowMarkupElement(){if(this.arrowTemplateId!=null){const e=o(window.document.body,this.arrowTemplateId,u,(()=>console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`)),(()=>console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-arrow")}createCircleMarkupElement(){if(this.circleTemplateId!=null){const e=o(window.document.body,this.circleTemplateId,c,(()=>console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`)),(()=>console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-circle")}createFreeformMarkupElement(){if(this.freeformTemplateId!=null){const e=o(window.document.body,this.freeformTemplateId,d,(()=>console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`)),(()=>console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-freeform")}createNewMarkupElement(){switch(this.tool){case"arrow":return this.createArrowMarkupElement();case"circle":return this.createCircleMarkupElement();case"freeform":return this.createFreeformMarkupElement()}}updateMarkupElement(){const{markupElement:e}=this.stateMap;if(e!=null){e.remove();e.dispose();e.viewer=undefined;e.removeEventListener("interactionBegin",this.handleMarkupInteractionBegin);e.removeEventListener("interactionEnd",this.handleMarkupInteractionEnd)}if(!this.disabled){const e=this.createNewMarkupElement();this.hostEl.append(e);if(this.tool==="arrow"){e.startLineAnchorStyle=this.startLineAnchorStyle;e.endLineAnchorStyle=this.endLineAnchorStyle}e.mode="create";e.viewer=this.viewer;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale;e.addEventListener("interactionBegin",this.handleMarkupInteractionBegin);e.addEventListener("interactionEnd",this.handleMarkupInteractionEnd);this.stateMap.markupElement=e}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],disabled:[{handlePropertyChanged:0}],endLineAnchorStyle:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],startLineAnchorStyle:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],scale:[{handleScalingConfigurationChanged:0}],offset:[{handleScalingConfigurationChanged:0}],originatingViewport:[{handleScalingConfigurationChanged:0}],centeringBehavior:[{handleScalingConfigurationChanged:0}]}}static get style(){return g()}},[257,"vertex-viewer-markup-tool",{arrowTemplateId:[1,"arrow-template-id"],circleTemplateId:[1,"circle-template-id"],freeformTemplateId:[1,"freeform-template-id"],tool:[1],disabled:[4],viewer:[16],startLineAnchorStyle:[1025,"start-line-anchor-style"],endLineAnchorStyle:[1025,"end-line-anchor-style"],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],stateMap:[32],reset:[64]},undefined,{viewer:[{handleViewerChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],disabled:[{handlePropertyChanged:0}],endLineAnchorStyle:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],startLineAnchorStyle:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],scale:[{handleScalingConfigurationChanged:0}],offset:[{handleScalingConfigurationChanged:0}],originatingViewport:[{handleScalingConfigurationChanged:0}],centeringBehavior:[{handleScalingConfigurationChanged:0}]}]);function C(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-markup-tool","vertex-viewer-markup-arrow","vertex-viewer-markup-circle","vertex-viewer-markup-freeform"];t.forEach((t=>{switch(t){case"vertex-viewer-markup-tool":if(!customElements.get(e(t))){customElements.define(e(t),w)}break;case"vertex-viewer-markup-arrow":if(!customElements.get(e(t))){m()}break;case"vertex-viewer-markup-circle":if(!customElements.get(e(t))){f()}break;case"vertex-viewer-markup-freeform":if(!customElements.get(e(t))){p()}break}}))}C();const v=w;const k=C;export{v as VertexViewerMarkupTool,k as defineCustomElement};
+import{t as e,p as t,H as r,d as n,h as i,e as a}from"./p-Bb32XUUS.js";import{s as o}from"./p-DRh4_Z-g.js";import{F as s,C as l,A as h}from"./p-JvS9LLoO.js";import{b as d,a as c,i as u}from"./p-Cs2aiMUK.js";import{d as f}from"./p-DjQ6RXWP.js";import{d as m}from"./p-UJR-ixsy.js";import{d as p}from"./p-CABws4i9.js";const g=()=>`:host{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}:host([elevated='']){z-index:100}`;const w=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.markupBegin=n(this,"markupBegin");this.markupEnd=n(this,"markupEnd");this.tool="arrow";this.disabled=false;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.centeringBehavior="none";this.scale=1;this.stateMap={};this.handleMarkupInteractionBegin=()=>{this.markupBegin.emit()};this.handleMarkupInteractionEnd=()=>{const{markupElement:e}=this.stateMap;if(d(e)){const{points:t,bounds:r}=e;if(t!=null&&t.length>0&&r!=null){this.markupEnd.emit(new s({points:t,bounds:r}))}}else if(c(e)){const{bounds:t}=e;if(t!=null){this.markupEnd.emit(new l({bounds:t}))}}else if(u(e)){const{start:t,end:r}=e;if(t!=null&&r!=null){this.markupEnd.emit(new h({start:t,end:r}))}}}}async handleViewerChanged(){if(this.stateMap.markupElement!=null){this.stateMap.markupElement.viewer=this.viewer}}handlePropertyChanged(){this.updateMarkupElement()}handleScalingConfigurationChanged(){this.updateMarkupElement()}componentDidLoad(){this.updateMarkupElement()}async reset(){const{markupElement:e}=this.stateMap;if(d(e)){e.points=undefined;e.bounds=undefined;e.mode="create"}else if(c(e)){e.bounds=undefined;e.mode="create"}else if(u(e)){e.start=undefined;e.end=undefined;e.mode="create"}}render(){if(!this.disabled){if(this.tool==="arrow"||this.tool==="circle"||this.tool==="freeform"){return i(a,null,i("slot",null))}else{return i(a,null,`Unsupported tool type '${this.tool}'.`)}}else{return i(a,null)}}createArrowMarkupElement(){if(this.arrowTemplateId!=null){const e=o(window.document.body,this.arrowTemplateId,u,(()=>console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`)),(()=>console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-arrow")}createCircleMarkupElement(){if(this.circleTemplateId!=null){const e=o(window.document.body,this.circleTemplateId,c,(()=>console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`)),(()=>console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-circle")}createFreeformMarkupElement(){if(this.freeformTemplateId!=null){const e=o(window.document.body,this.freeformTemplateId,d,(()=>console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`)),(()=>console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-freeform")}createNewMarkupElement(){switch(this.tool){case"arrow":return this.createArrowMarkupElement();case"circle":return this.createCircleMarkupElement();case"freeform":return this.createFreeformMarkupElement()}}updateMarkupElement(){const{markupElement:e}=this.stateMap;if(e!=null){e.remove();e.dispose();e.viewer=undefined;e.removeEventListener("interactionBegin",this.handleMarkupInteractionBegin);e.removeEventListener("interactionEnd",this.handleMarkupInteractionEnd)}if(!this.disabled){const e=this.createNewMarkupElement();this.hostEl.append(e);if(this.tool==="arrow"){e.startLineAnchorStyle=this.startLineAnchorStyle;e.endLineAnchorStyle=this.endLineAnchorStyle}e.mode="create";e.viewer=this.viewer;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale;e.addEventListener("interactionBegin",this.handleMarkupInteractionBegin);e.addEventListener("interactionEnd",this.handleMarkupInteractionEnd);this.stateMap.markupElement=e}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],disabled:[{handlePropertyChanged:0}],endLineAnchorStyle:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],startLineAnchorStyle:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],scale:[{handleScalingConfigurationChanged:0}],offset:[{handleScalingConfigurationChanged:0}],originatingViewport:[{handleScalingConfigurationChanged:0}],centeringBehavior:[{handleScalingConfigurationChanged:0}]}}static get style(){return g()}},[257,"vertex-viewer-markup-tool",{arrowTemplateId:[1,"arrow-template-id"],circleTemplateId:[1,"circle-template-id"],freeformTemplateId:[1,"freeform-template-id"],tool:[1],disabled:[4],viewer:[16],startLineAnchorStyle:[1025,"start-line-anchor-style"],endLineAnchorStyle:[1025,"end-line-anchor-style"],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],stateMap:[32],reset:[64]},undefined,{viewer:[{handleViewerChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],disabled:[{handlePropertyChanged:0}],endLineAnchorStyle:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],startLineAnchorStyle:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],scale:[{handleScalingConfigurationChanged:0}],offset:[{handleScalingConfigurationChanged:0}],originatingViewport:[{handleScalingConfigurationChanged:0}],centeringBehavior:[{handleScalingConfigurationChanged:0}]}]);function C(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-markup-tool","vertex-viewer-markup-arrow","vertex-viewer-markup-circle","vertex-viewer-markup-freeform"];t.forEach((t=>{switch(t){case"vertex-viewer-markup-tool":if(!customElements.get(e(t))){customElements.define(e(t),w)}break;case"vertex-viewer-markup-arrow":if(!customElements.get(e(t))){f()}break;case"vertex-viewer-markup-circle":if(!customElements.get(e(t))){m()}break;case"vertex-viewer-markup-freeform":if(!customElements.get(e(t))){p()}break}}))}C();const v=w;const k=C;export{v as VertexViewerMarkupTool,k as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-markup-tool.js.map

package/dist/components/vertex-viewer-markup-tool.js.map

@@ -1 +1 @@
-{"version":3,"names":["viewerMarkupToolCss","ViewerMarkupTool","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tool","disabled","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","stateMap","handleMarkupInteractionBegin","markupBegin","emit","handleMarkupInteractionEnd","markupElement","isVertexViewerFreeformMarkup","points","bounds","length","markupEnd","FreeformMarkup","isVertexViewerCircleMarkup","CircleMarkup","isVertexViewerArrowMarkup","start","end","ArrowMarkup","handleViewerChanged","viewer","handlePropertyChanged","updateMarkupElement","handleScalingConfigurationChanged","componentDidLoad","reset","undefined","mode","render","h","Host","createArrowMarkupElement","arrowTemplateId","element","stampTemplateWithId","window","document","body","console","warn","createElement","createCircleMarkupElement","circleTemplateId","createFreeformMarkupElement","freeformTemplateId","createNewMarkupElement","remove","dispose","removeEventListener","newMarkupElement","hostEl","append","originatingViewport","offset","addEventListener"],"sources":["src/components/viewer-markup-tool/viewer-markup-tool.css?tag=vertex-viewer-markup-tool&encapsulation=shadow","src/components/viewer-markup-tool/viewer-markup-tool.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n:host([elevated=\"\"]) {\n  z-index: 100;\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 } from '@vertexvis/geometry';\nimport { BasicViewer } from '@vertexvis/utils';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n  MarkupCenteringBehavior,\n} from '../../lib/types/markup';\nimport {\n  isVertexViewerArrowMarkup,\n  LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\n\n/**\n * The types of markup that can be performed by this tool.\n */\nexport type ViewerMarkupToolType = 'arrow' | 'circle' | 'freeform';\n\ninterface StateMap {\n  markupElement?:\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement;\n}\n\n@Component({\n  tag: 'vertex-viewer-markup-tool',\n  styleUrl: 'viewer-markup-tool.css',\n  shadow: true,\n})\nexport class ViewerMarkupTool {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * Disables markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup.\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?: BasicViewer;\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   * 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 when a user begins a new markup.\n   */\n  @Event({ bubbles: true })\n  public markupBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when a user has finished their markup.\n   */\n  @Event({ bubbles: true })\n  public markupEnd!: EventEmitter<Markup>;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  /**\n   * Captures internal state that you want to preserve across dev refreshes, but\n   * don't want to trigger a render when the state changes.\n   */\n  @State()\n  private stateMap: StateMap = {};\n\n  @Watch('viewer')\n  protected async handleViewerChanged(): Promise<void> {\n    if (this.stateMap.markupElement != null) {\n      this.stateMap.markupElement.viewer = this.viewer;\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  @Watch('circleTemplateId')\n  @Watch('disabled')\n  @Watch('endLineAnchorStyle')\n  @Watch('freeformTemplateId')\n  @Watch('startLineAnchorStyle')\n  @Watch('tool')\n  protected handlePropertyChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  @Watch('scale')\n  @Watch('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  protected handleScalingConfigurationChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * Resets the state of the internally managed markup element\n   * to allow for creating a new markup. This state is automatically\n   * managed when this element is placed as a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Method()\n  public async reset(): Promise<void> {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      markupElement.points = undefined;\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      markupElement.start = undefined;\n      markupElement.end = undefined;\n      markupElement.mode = 'create';\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    if (!this.disabled) {\n      if (\n        this.tool === 'arrow' ||\n        this.tool === 'circle' ||\n        this.tool === 'freeform'\n      ) {\n        return (\n          <Host>\n            <slot />\n          </Host>\n        );\n      } else {\n        return <Host>{`Unsupported tool type '${this.tool}'.`}</Host>;\n      }\n    } else {\n      return <Host></Host>;\n    }\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`,\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`,\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`,\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private createNewMarkupElement():\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    switch (this.tool) {\n      case 'arrow':\n        return this.createArrowMarkupElement();\n      case 'circle':\n        return this.createCircleMarkupElement();\n      case 'freeform':\n        return this.createFreeformMarkupElement();\n    }\n  }\n\n  private updateMarkupElement(): void {\n    const { markupElement } = this.stateMap;\n    if (markupElement != null) {\n      markupElement.remove();\n      markupElement.dispose();\n      markupElement.viewer = undefined;\n      markupElement.removeEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin,\n      );\n      markupElement.removeEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd,\n      );\n    }\n\n    if (!this.disabled) {\n      const newMarkupElement = this.createNewMarkupElement();\n      this.hostEl.append(newMarkupElement);\n\n      if (this.tool === 'arrow') {\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).startLineAnchorStyle = this.startLineAnchorStyle;\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).endLineAnchorStyle = this.endLineAnchorStyle;\n      }\n\n      newMarkupElement.mode = 'create';\n      newMarkupElement.viewer = this.viewer;\n      newMarkupElement.originatingViewport = this.originatingViewport;\n      newMarkupElement.centeringBehavior = this.centeringBehavior;\n      newMarkupElement.offset = this.offset;\n      newMarkupElement.scale = this.scale;\n      newMarkupElement.addEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin,\n      );\n      newMarkupElement.addEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd,\n      );\n      this.stateMap.markupElement = newMarkupElement;\n    }\n  }\n\n  private handleMarkupInteractionBegin = (): void => {\n    this.markupBegin.emit();\n  };\n\n  private handleMarkupInteractionEnd = (): void => {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      const { points, bounds } = markupElement;\n\n      if (points != null && points.length > 0 && bounds != null) {\n        this.markupEnd.emit(new FreeformMarkup({ points, bounds }));\n      }\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      const { bounds } = markupElement;\n\n      if (bounds != null) {\n        this.markupEnd.emit(new CircleMarkup({ bounds }));\n      }\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      const { start, end } = markupElement;\n\n      if (start != null && end != null) {\n        this.markupEnd.emit(new ArrowMarkup({ start, end }));\n      }\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["viewerMarkupToolCss","ViewerMarkupTool","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tool","disabled","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","stateMap","handleMarkupInteractionBegin","markupBegin","emit","handleMarkupInteractionEnd","markupElement","isVertexViewerFreeformMarkup","points","bounds","length","markupEnd","FreeformMarkup","isVertexViewerCircleMarkup","CircleMarkup","isVertexViewerArrowMarkup","start","end","ArrowMarkup","handleViewerChanged","viewer","handlePropertyChanged","updateMarkupElement","handleScalingConfigurationChanged","componentDidLoad","reset","undefined","mode","render","h","Host","createArrowMarkupElement","arrowTemplateId","element","stampTemplateWithId","window","document","body","console","warn","createElement","createCircleMarkupElement","circleTemplateId","createFreeformMarkupElement","freeformTemplateId","createNewMarkupElement","remove","dispose","removeEventListener","newMarkupElement","hostEl","append","originatingViewport","offset","addEventListener"],"sources":["src/components/viewer-markup-tool/viewer-markup-tool.css?tag=vertex-viewer-markup-tool&encapsulation=shadow","src/components/viewer-markup-tool/viewer-markup-tool.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n:host([elevated='']) {\n  z-index: 100;\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 } from '@vertexvis/geometry';\nimport { BasicViewer } from '@vertexvis/utils';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n  MarkupCenteringBehavior,\n} from '../../lib/types/markup';\nimport {\n  isVertexViewerArrowMarkup,\n  LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\n\n/**\n * The types of markup that can be performed by this tool.\n */\nexport type ViewerMarkupToolType = 'arrow' | 'circle' | 'freeform';\n\ninterface StateMap {\n  markupElement?:\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement;\n}\n\n@Component({\n  tag: 'vertex-viewer-markup-tool',\n  styleUrl: 'viewer-markup-tool.css',\n  shadow: true,\n})\nexport class ViewerMarkupTool {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * Disables markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup.\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?: BasicViewer;\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   * 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 when a user begins a new markup.\n   */\n  @Event({ bubbles: true })\n  public markupBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when a user has finished their markup.\n   */\n  @Event({ bubbles: true })\n  public markupEnd!: EventEmitter<Markup>;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  /**\n   * Captures internal state that you want to preserve across dev refreshes, but\n   * don't want to trigger a render when the state changes.\n   */\n  @State()\n  private stateMap: StateMap = {};\n\n  @Watch('viewer')\n  protected async handleViewerChanged(): Promise<void> {\n    if (this.stateMap.markupElement != null) {\n      this.stateMap.markupElement.viewer = this.viewer;\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  @Watch('circleTemplateId')\n  @Watch('disabled')\n  @Watch('endLineAnchorStyle')\n  @Watch('freeformTemplateId')\n  @Watch('startLineAnchorStyle')\n  @Watch('tool')\n  protected handlePropertyChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  @Watch('scale')\n  @Watch('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  protected handleScalingConfigurationChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * Resets the state of the internally managed markup element\n   * to allow for creating a new markup. This state is automatically\n   * managed when this element is placed as a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Method()\n  public async reset(): Promise<void> {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      markupElement.points = undefined;\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      markupElement.start = undefined;\n      markupElement.end = undefined;\n      markupElement.mode = 'create';\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    if (!this.disabled) {\n      if (\n        this.tool === 'arrow' ||\n        this.tool === 'circle' ||\n        this.tool === 'freeform'\n      ) {\n        return (\n          <Host>\n            <slot />\n          </Host>\n        );\n      } else {\n        return <Host>{`Unsupported tool type '${this.tool}'.`}</Host>;\n      }\n    } else {\n      return <Host></Host>;\n    }\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`,\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`,\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`,\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private createNewMarkupElement():\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    switch (this.tool) {\n      case 'arrow':\n        return this.createArrowMarkupElement();\n      case 'circle':\n        return this.createCircleMarkupElement();\n      case 'freeform':\n        return this.createFreeformMarkupElement();\n    }\n  }\n\n  private updateMarkupElement(): void {\n    const { markupElement } = this.stateMap;\n    if (markupElement != null) {\n      markupElement.remove();\n      markupElement.dispose();\n      markupElement.viewer = undefined;\n      markupElement.removeEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin,\n      );\n      markupElement.removeEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd,\n      );\n    }\n\n    if (!this.disabled) {\n      const newMarkupElement = this.createNewMarkupElement();\n      this.hostEl.append(newMarkupElement);\n\n      if (this.tool === 'arrow') {\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).startLineAnchorStyle = this.startLineAnchorStyle;\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).endLineAnchorStyle = this.endLineAnchorStyle;\n      }\n\n      newMarkupElement.mode = 'create';\n      newMarkupElement.viewer = this.viewer;\n      newMarkupElement.originatingViewport = this.originatingViewport;\n      newMarkupElement.centeringBehavior = this.centeringBehavior;\n      newMarkupElement.offset = this.offset;\n      newMarkupElement.scale = this.scale;\n      newMarkupElement.addEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin,\n      );\n      newMarkupElement.addEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd,\n      );\n      this.stateMap.markupElement = newMarkupElement;\n    }\n  }\n\n  private handleMarkupInteractionBegin = (): void => {\n    this.markupBegin.emit();\n  };\n\n  private handleMarkupInteractionEnd = (): void => {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      const { points, bounds } = markupElement;\n\n      if (points != null && points.length > 0 && bounds != null) {\n        this.markupEnd.emit(new FreeformMarkup({ points, bounds }));\n      }\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      const { bounds } = markupElement;\n\n      if (bounds != null) {\n        this.markupEnd.emit(new CircleMarkup({ bounds }));\n      }\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      const { start, end } = markupElement;\n\n      if (start != null && end != null) {\n        this.markupEnd.emit(new ArrowMarkup({ start, end }));\n      }\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{t as e,p as t,H as n,d as i,h as r,e as a}from"./p-Bb32XUUS.js";import{p as s}from"./p-CZZALKHT.js";import{s as o}from"./p-DRh4_Z-g.js";import{A as h,C as d,F as l}from"./p-avWSFTeP.js";import{i as c,a as p,b as u}from"./p-taOlygmc.js";import{d as m}from"./p-DCTZZ5Rd.js";import{d as f}from"./p-BC777sCK.js";import{d as w}from"./p-Dzs4u_ZY.js";const g=()=>`:host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}`;const k=t(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.markupAdded=i(this,"markupAdded");this.markupChanged=i(this,"markupChanged");this.markupRemoved=i(this,"markupRemoved");this.markupSelectionChanged=i(this,"markupSelectionChanged");this.tool="arrow";this.disabled=false;this.selectNew=false;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.centeringBehavior="none";this.scale=1;this.handleSlotChange=()=>{this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()};this.handlePointerMove=e=>{if(this.pointerDownPosition!=null&&s.distance(this.pointerDownPosition,s.create(e.clientX,e.clientY))>2){this.toSelectMarkupId=undefined}};this.handlePointerUp=async e=>{if(!this.disabled){const t=e.target;const n=await this.getMarkupElements();const i=n.find((e=>e===t));if((i===null||i===void 0?void 0:i.id)!=null&&i.id!==""&&i.id===this.toSelectMarkupId){this.selectedMarkupId=t.id}else if(this.pointerDownPosition!=null&&s.distance(this.pointerDownPosition,s.create(e.clientX,e.clientY))<=2){this.selectedMarkupId=undefined}this.toSelectMarkupId=undefined;this.pointerDownPosition=undefined}window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}}disconnectedCallback(){window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}async addMarkup(e){if(e instanceof h){const{start:t,end:n,id:i}=e;const r=this.createArrowMarkupElement();this.appendMarkupElement(r);r.id=i;r.start=t;r.end=n;r.startLineAnchorStyle=this.startLineAnchorStyle;r.endLineAnchorStyle=this.endLineAnchorStyle;return r}else if(e instanceof d){const{bounds:t,id:n}=e;const i=this.createCircleMarkupElement();this.appendMarkupElement(i);i.id=n;i.bounds=t;return i}else if(e instanceof l){const{bounds:t,points:n,id:i}=e;const r=this.createFreeformMarkupElement();this.appendMarkupElement(r);r.id=i;r.points=n;r.bounds=t;return r}else{throw new Error(`Cannot add markup. Unknown type '${e}'.`)}}async removeMarkup(e){const t=await this.getMarkupElement(e);if(t!=null){t.remove();this.markupRemoved.emit(t)}return t}async getMarkupElements(){return Array.from(this.hostEl.children).filter((e=>c(e)||p(e)||u(e)))}async getMarkupElement(e){const t=await this.getMarkupElements();return t.find((t=>t.id===e))}async handleSelectedMarkupIdChanged(){const e=await this.getMarkupElements();e.forEach((e=>{if(e.id===this.selectedMarkupId){e.mode="edit";this.markupSelectionChanged.emit(e)}else{e.mode=""}}));if(this.selectedMarkupId==null){this.markupSelectionChanged.emit(undefined)}}handlePropertyChanged(){this.updatePropsOnMarkupTool()}async handleViewerChanged(e){this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()}handleDisabledChanged(){this.updatePropsOnMarkupTool()}async handleStartLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.startLineAnchorStyle=this.startLineAnchorStyle;this.markupChanged.emit(e)}}async handleEndLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.endLineAnchorStyle=this.endLineAnchorStyle;this.markupChanged.emit(e)}}async handleMarkupEnd(e){var t;const n=e;const i=await this.addMarkup(n.detail);if(typeof i.componentOnReady==="function"){await i.componentOnReady()}if(this.selectNew){this.selectedMarkupId=n.detail.id}(t=this.getMarkupTool())===null||t===void 0?void 0:t.reset()}async handleMarkupUpdated(e){const t=e;if(!t.detail.newlyCreatedMarkup){this.markupChanged.emit(t.detail.markup)}}async handleMarkupPointerDown(e){if(!this.disabled){const t=e.target;const n=await this.getMarkupElements();const i=n.find((e=>e===t));if((i===null||i===void 0?void 0:i.id)!=null&&(i===null||i===void 0?void 0:i.id)!==""){this.toSelectMarkupId=t.id}this.pointerDownPosition=s.create(e.clientX,e.clientY);window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}componentDidLoad(){this.updatePropsOnMarkupTool()}render(){return r(a,{key:"6e5d1d248b208a23b131f097692cf0cf1ca6ad29"},r("slot",{key:"b1318c9faea745daf6eab83b4715923b529ffe72",onSlotchange:this.handleSlotChange}))}appendMarkupElement(e){this.updatePropsOnMarkup(e);this.hostEl.appendChild(e);this.markupAdded.emit(e);return e}createArrowMarkupElement(){if(this.arrowTemplateId!=null){const e=o(window.document.body,this.arrowTemplateId,c,(()=>console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`)),(()=>console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-arrow")}createCircleMarkupElement(){if(this.circleTemplateId!=null){const e=o(window.document.body,this.circleTemplateId,p,(()=>console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`)),(()=>console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-circle")}createFreeformMarkupElement(){if(this.freeformTemplateId!=null){const e=o(window.document.body,this.freeformTemplateId,u,(()=>console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`)),(()=>console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-freeform")}async updatePropsOnMarkups(){const e=await this.getMarkupElements();e.forEach((e=>this.updatePropsOnMarkup(e)))}updatePropsOnMarkup(e){e.viewer=this.viewer;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale;e.classList.add("viewer-markup__markup")}updatePropsOnMarkupTool(){const e=this.getMarkupTool();if(e!=null){e.disabled=this.disabled;e.arrowTemplateId=this.arrowTemplateId;e.circleTemplateId=this.circleTemplateId;e.freeformTemplateId=this.freeformTemplateId;e.tool=this.tool;e.viewer=this.viewer;e.startLineAnchorStyle=this.startLineAnchorStyle;e.endLineAnchorStyle=this.endLineAnchorStyle;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale}}getMarkupTool(){return this.hostEl.querySelector("vertex-viewer-markup-tool")}async getSelectedArrowMarkup(){if(this.selectedMarkupId!=null){const e=await this.getMarkupElement(this.selectedMarkupId);return c(e)?e:undefined}}get hostEl(){return this}static get watchers(){return{selectedMarkupId:[{handleSelectedMarkupIdChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],viewer:[{handleViewerChanged:0}],originatingViewport:[{handleViewerChanged:0}],centeringBehavior:[{handleViewerChanged:0}],offset:[{handleViewerChanged:0}],scale:[{handleViewerChanged:0}],disabled:[{handleDisabledChanged:0}],startLineAnchorStyle:[{handleStartLineAnchorStyleChanged:0}],endLineAnchorStyle:[{handleEndLineAnchorStyleChanged:0}]}}static get style(){return g()}},[257,"vertex-viewer-markup",{arrowTemplateId:[1,"arrow-template-id"],circleTemplateId:[1,"circle-template-id"],freeformTemplateId:[1,"freeform-template-id"],tool:[1],disabled:[4],viewer:[16],selectedMarkupId:[1025,"selected-markup-id"],selectNew:[4,"select-new"],startLineAnchorStyle:[1025,"start-line-anchor-style"],endLineAnchorStyle:[1025,"end-line-anchor-style"],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],toSelectMarkupId:[32],pointerDownPosition:[32],addMarkup:[64],removeMarkup:[64],getMarkupElements:[64],getMarkupElement:[64]},[[0,"markupEnd","handleMarkupEnd"],[0,"interactionEnd","handleMarkupUpdated"],[1,"pointerdown","handleMarkupPointerDown"]],{selectedMarkupId:[{handleSelectedMarkupIdChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],viewer:[{handleViewerChanged:0}],originatingViewport:[{handleViewerChanged:0}],centeringBehavior:[{handleViewerChanged:0}],offset:[{handleViewerChanged:0}],scale:[{handleViewerChanged:0}],disabled:[{handleDisabledChanged:0}],startLineAnchorStyle:[{handleStartLineAnchorStyleChanged:0}],endLineAnchorStyle:[{handleEndLineAnchorStyleChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-markup","vertex-viewer-markup-arrow","vertex-viewer-markup-circle","vertex-viewer-markup-freeform"];t.forEach((t=>{switch(t){case"vertex-viewer-markup":if(!customElements.get(e(t))){customElements.define(e(t),k)}break;case"vertex-viewer-markup-arrow":if(!customElements.get(e(t))){m()}break;case"vertex-viewer-markup-circle":if(!customElements.get(e(t))){f()}break;case"vertex-viewer-markup-freeform":if(!customElements.get(e(t))){w()}break}}))}v();const y=k;const C=v;export{y as VertexViewerMarkup,C as defineCustomElement};
+import{t as e,p as t,H as n,d as i,h as r,e as a}from"./p-Bb32XUUS.js";import{p as s}from"./p-2UsvOTHJ.js";import{s as o}from"./p-DRh4_Z-g.js";import{A as h,C as d,F as l}from"./p-JvS9LLoO.js";import{i as c,a as p,b as u}from"./p-Cs2aiMUK.js";import{d as m}from"./p-DjQ6RXWP.js";import{d as f}from"./p-UJR-ixsy.js";import{d as w}from"./p-CABws4i9.js";const k=()=>`:host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}`;const g=t(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.markupAdded=i(this,"markupAdded");this.markupChanged=i(this,"markupChanged");this.markupRemoved=i(this,"markupRemoved");this.markupSelectionChanged=i(this,"markupSelectionChanged");this.tool="arrow";this.disabled=false;this.selectNew=false;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.centeringBehavior="none";this.scale=1;this.handleSlotChange=()=>{this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()};this.handlePointerMove=e=>{if(this.pointerDownPosition!=null&&s.distance(this.pointerDownPosition,s.create(e.clientX,e.clientY))>2){this.toSelectMarkupId=undefined}};this.handlePointerUp=async e=>{if(!this.disabled){const t=e.target;const n=await this.getMarkupElements();const i=n.find((e=>e===t));if((i===null||i===void 0?void 0:i.id)!=null&&i.id!==""&&i.id===this.toSelectMarkupId){this.selectedMarkupId=t.id}else if(this.pointerDownPosition!=null&&s.distance(this.pointerDownPosition,s.create(e.clientX,e.clientY))<=2){this.selectedMarkupId=undefined}this.toSelectMarkupId=undefined;this.pointerDownPosition=undefined}window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}}disconnectedCallback(){window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}async addMarkup(e){if(e instanceof h){const{start:t,end:n,id:i}=e;const r=this.createArrowMarkupElement();this.appendMarkupElement(r);r.id=i;r.start=t;r.end=n;r.startLineAnchorStyle=this.startLineAnchorStyle;r.endLineAnchorStyle=this.endLineAnchorStyle;return r}else if(e instanceof d){const{bounds:t,id:n}=e;const i=this.createCircleMarkupElement();this.appendMarkupElement(i);i.id=n;i.bounds=t;return i}else if(e instanceof l){const{bounds:t,points:n,id:i}=e;const r=this.createFreeformMarkupElement();this.appendMarkupElement(r);r.id=i;r.points=n;r.bounds=t;return r}else{throw new Error(`Cannot add markup. Unknown type '${e}'.`)}}async removeMarkup(e){const t=await this.getMarkupElement(e);if(t!=null){t.remove();this.markupRemoved.emit(t)}return t}async getMarkupElements(){return Array.from(this.hostEl.children).filter((e=>c(e)||p(e)||u(e)))}async getMarkupElement(e){const t=await this.getMarkupElements();return t.find((t=>t.id===e))}async handleSelectedMarkupIdChanged(){const e=await this.getMarkupElements();e.forEach((e=>{if(e.id===this.selectedMarkupId){e.mode="edit";this.markupSelectionChanged.emit(e)}else{e.mode=""}}));if(this.selectedMarkupId==null){this.markupSelectionChanged.emit(undefined)}}handlePropertyChanged(){this.updatePropsOnMarkupTool()}async handleViewerChanged(e){this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()}handleDisabledChanged(){this.updatePropsOnMarkupTool()}async handleStartLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.startLineAnchorStyle=this.startLineAnchorStyle;this.markupChanged.emit(e)}}async handleEndLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.endLineAnchorStyle=this.endLineAnchorStyle;this.markupChanged.emit(e)}}async handleMarkupEnd(e){var t;const n=e;const i=await this.addMarkup(n.detail);if(typeof i.componentOnReady==="function"){await i.componentOnReady()}if(this.selectNew){this.selectedMarkupId=n.detail.id}(t=this.getMarkupTool())===null||t===void 0?void 0:t.reset()}async handleMarkupUpdated(e){const t=e;if(!t.detail.newlyCreatedMarkup){this.markupChanged.emit(t.detail.markup)}}async handleMarkupPointerDown(e){if(!this.disabled){const t=e.target;const n=await this.getMarkupElements();const i=n.find((e=>e===t));if((i===null||i===void 0?void 0:i.id)!=null&&(i===null||i===void 0?void 0:i.id)!==""){this.toSelectMarkupId=t.id}this.pointerDownPosition=s.create(e.clientX,e.clientY);window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}componentDidLoad(){this.updatePropsOnMarkupTool()}render(){return r(a,{key:"6e5d1d248b208a23b131f097692cf0cf1ca6ad29"},r("slot",{key:"b1318c9faea745daf6eab83b4715923b529ffe72",onSlotchange:this.handleSlotChange}))}appendMarkupElement(e){this.updatePropsOnMarkup(e);this.hostEl.appendChild(e);this.markupAdded.emit(e);return e}createArrowMarkupElement(){if(this.arrowTemplateId!=null){const e=o(window.document.body,this.arrowTemplateId,c,(()=>console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`)),(()=>console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-arrow")}createCircleMarkupElement(){if(this.circleTemplateId!=null){const e=o(window.document.body,this.circleTemplateId,p,(()=>console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`)),(()=>console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-circle")}createFreeformMarkupElement(){if(this.freeformTemplateId!=null){const e=o(window.document.body,this.freeformTemplateId,u,(()=>console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`)),(()=>console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-freeform")}async updatePropsOnMarkups(){const e=await this.getMarkupElements();e.forEach((e=>this.updatePropsOnMarkup(e)))}updatePropsOnMarkup(e){e.viewer=this.viewer;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale;e.classList.add("viewer-markup__markup")}updatePropsOnMarkupTool(){const e=this.getMarkupTool();if(e!=null){e.disabled=this.disabled;e.arrowTemplateId=this.arrowTemplateId;e.circleTemplateId=this.circleTemplateId;e.freeformTemplateId=this.freeformTemplateId;e.tool=this.tool;e.viewer=this.viewer;e.startLineAnchorStyle=this.startLineAnchorStyle;e.endLineAnchorStyle=this.endLineAnchorStyle;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale}}getMarkupTool(){return this.hostEl.querySelector("vertex-viewer-markup-tool")}async getSelectedArrowMarkup(){if(this.selectedMarkupId!=null){const e=await this.getMarkupElement(this.selectedMarkupId);return c(e)?e:undefined}}get hostEl(){return this}static get watchers(){return{selectedMarkupId:[{handleSelectedMarkupIdChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],viewer:[{handleViewerChanged:0}],originatingViewport:[{handleViewerChanged:0}],centeringBehavior:[{handleViewerChanged:0}],offset:[{handleViewerChanged:0}],scale:[{handleViewerChanged:0}],disabled:[{handleDisabledChanged:0}],startLineAnchorStyle:[{handleStartLineAnchorStyleChanged:0}],endLineAnchorStyle:[{handleEndLineAnchorStyleChanged:0}]}}static get style(){return k()}},[257,"vertex-viewer-markup",{arrowTemplateId:[1,"arrow-template-id"],circleTemplateId:[1,"circle-template-id"],freeformTemplateId:[1,"freeform-template-id"],tool:[1],disabled:[4],viewer:[16],selectedMarkupId:[1025,"selected-markup-id"],selectNew:[4,"select-new"],startLineAnchorStyle:[1025,"start-line-anchor-style"],endLineAnchorStyle:[1025,"end-line-anchor-style"],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],toSelectMarkupId:[32],pointerDownPosition:[32],addMarkup:[64],removeMarkup:[64],getMarkupElements:[64],getMarkupElement:[64]},[[0,"markupEnd","handleMarkupEnd"],[0,"interactionEnd","handleMarkupUpdated"],[1,"pointerdown","handleMarkupPointerDown"]],{selectedMarkupId:[{handleSelectedMarkupIdChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],viewer:[{handleViewerChanged:0}],originatingViewport:[{handleViewerChanged:0}],centeringBehavior:[{handleViewerChanged:0}],offset:[{handleViewerChanged:0}],scale:[{handleViewerChanged:0}],disabled:[{handleDisabledChanged:0}],startLineAnchorStyle:[{handleStartLineAnchorStyleChanged:0}],endLineAnchorStyle:[{handleEndLineAnchorStyleChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-markup","vertex-viewer-markup-arrow","vertex-viewer-markup-circle","vertex-viewer-markup-freeform"];t.forEach((t=>{switch(t){case"vertex-viewer-markup":if(!customElements.get(e(t))){customElements.define(e(t),g)}break;case"vertex-viewer-markup-arrow":if(!customElements.get(e(t))){m()}break;case"vertex-viewer-markup-circle":if(!customElements.get(e(t))){f()}break;case"vertex-viewer-markup-freeform":if(!customElements.get(e(t))){w()}break}}))}v();const y=g;const C=v;export{y as VertexViewerMarkup,C as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-markup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["viewerMarkupCss","ViewerMarkup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tool","disabled","selectNew","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","handleSlotChange","updatePropsOnMarkupTool","updatePropsOnMarkups","handlePointerMove","event","pointerDownPosition","Point","distance","create","clientX","clientY","toSelectMarkupId","undefined","handlePointerUp","async","el","target","markups","getMarkupElements","markup","find","m","id","selectedMarkupId","window","removeEventListener","disconnectedCallback","addMarkup","ArrowMarkup","start","end","createArrowMarkupElement","appendMarkupElement","CircleMarkup","bounds","createCircleMarkupElement","FreeformMarkup","points","createFreeformMarkupElement","Error","removeMarkup","getMarkupElement","remove","markupRemoved","emit","Array","from","hostEl","children","filter","e","isVertexViewerArrowMarkup","isVertexViewerCircleMarkup","isVertexViewerFreeformMarkup","handleSelectedMarkupIdChanged","forEach","mode","markupSelectionChanged","handlePropertyChanged","handleViewerChanged","newViewer","handleDisabledChanged","handleStartLineAnchorStyleChanged","selectedArrow","getSelectedArrowMarkup","markupChanged","handleEndLineAnchorStyleChanged","handleMarkupEnd","detail","componentOnReady","_a","getMarkupTool","reset","handleMarkupUpdated","newlyCreatedMarkup","handleMarkupPointerDown","addEventListener","componentDidLoad","render","h","Host","key","onSlotchange","updatePropsOnMarkup","appendChild","markupAdded","arrowTemplateId","element","stampTemplateWithId","document","body","console","warn","createElement","circleTemplateId","freeformTemplateId","viewer","originatingViewport","offset","classList","add","querySelector","selected"],"sources":["src/components/viewer-markup/viewer-markup.css?tag=vertex-viewer-markup&encapsulation=shadow","src/components/viewer-markup/viewer-markup.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\nimport {\n  isVertexViewerArrowMarkup,\n  LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\nimport { ViewerMarkupToolType } from '../viewer-markup-tool/viewer-markup-tool';\n\n@Component({\n  tag: 'vertex-viewer-markup',\n  styleUrl: 'viewer-markup.css',\n  shadow: true,\n})\nexport class ViewerMarkup {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup to perform.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * If `true`, disables adding or editing of markup through user\n   * interaction.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup. If nested within a <vertex-viewer>,\n   * this property will be populated automatically.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * The ID of the markup that is selected.\n   */\n  @Prop({ mutable: true })\n  public selectedMarkupId?: string;\n\n  /**\n   * Indicates if new markup should be automatically selected.\n   */\n  @Prop()\n  public selectNew = false;\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   * 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   * Dispatched when a new markup is added, either through user interaction\n   * or programmatically.\n   */\n  @Event()\n  public markupAdded!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when an existing piece of markup is changed, either through user interaction\n   * or programmatically.\n   */\n  @Event()\n  public markupChanged!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when a markup is removed, either through user\n   * interaction or programmatically.\n   */\n  @Event()\n  public markupRemoved!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when markup selection changes. Will either be the\n   * selected element or `undefined` indicating that selection\n   * was cleared.\n   */\n  @Event()\n  public markupSelectionChanged!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  >;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  @State()\n  private toSelectMarkupId?: string;\n\n  @State()\n  private pointerDownPosition?: Point.Point;\n\n  protected disconnectedCallback(): void {\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointermove', this.handlePointerMove);\n  }\n\n  /**\n   * Adds a new markup as a child to this component. A new markup\n   * component will be created from the template specified by\n   * `arrow-template-id`, `circle-template-id`, or if undefined\n   * a default element will be created.\n   *\n   * @param markup The markup to add.\n   * @returns The markup element that was created.\n   * @see {@link arrowTemplateId}\n   * @see {@link circleTemplateId}\n   */\n  @Method()\n  public async addMarkup(\n    markup: Markup,\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  > {\n    if (markup instanceof ArrowMarkup) {\n      const { start, end, id } = markup;\n\n      const el = this.createArrowMarkupElement();\n      this.appendMarkupElement(el);\n      el.id = id;\n      el.start = start;\n      el.end = end;\n      el.startLineAnchorStyle = this.startLineAnchorStyle;\n      el.endLineAnchorStyle = this.endLineAnchorStyle;\n\n      return el;\n    } else if (markup instanceof CircleMarkup) {\n      const { bounds, id } = markup;\n\n      const el = this.createCircleMarkupElement();\n      this.appendMarkupElement(el);\n      el.id = id;\n      el.bounds = bounds;\n\n      return el;\n    } else if (markup instanceof FreeformMarkup) {\n      const { bounds, points, id } = markup;\n\n      const el = this.createFreeformMarkupElement();\n      this.appendMarkupElement(el);\n      el.id = id;\n      el.points = points;\n      el.bounds = bounds;\n\n      return el;\n    } else {\n      throw new Error(`Cannot add markup. Unknown type '${markup}'.`);\n    }\n  }\n\n  /**\n   * Removes a markup with the given ID, and returns the HTML element\n   * associated to the markup. Returns `undefined` if no markup is\n   * found.\n   *\n   * @param id The ID of the markup to remove.\n   * @returns The markup element, or undefined.\n   */\n  @Method()\n  public async removeMarkup(\n    id: string,\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  > {\n    const markup = await this.getMarkupElement(id);\n\n    if (markup != null) {\n      markup.remove();\n      this.markupRemoved.emit(markup);\n    }\n\n    return markup;\n  }\n\n  /**\n   * Returns a list of markup elements that are children of this component.\n   *\n   * @returns A list of all markups.\n   * @see {@link getMarkupElement}\n   */\n  @Method()\n  public async getMarkupElements(): Promise<\n    Array<\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement\n    >\n  > {\n    return Array.from(this.hostEl.children).filter(\n      (e) =>\n        isVertexViewerArrowMarkup(e) ||\n        isVertexViewerCircleMarkup(e) ||\n        isVertexViewerFreeformMarkup(e),\n    ) as Array<\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement\n    >;\n  }\n\n  /**\n   * Returns the markup element associated to the given ID.\n   *\n   * @param id The ID of the markup element to return.\n   * @returns A markup element, or `undefined`.\n   * @see {@link getMarkupElements}\n   */\n  @Method()\n  public async getMarkupElement(\n    id: string,\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  > {\n    const markup = await this.getMarkupElements();\n    return markup.find((el) => el.id === id);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('selectedMarkupId')\n  protected async handleSelectedMarkupIdChanged(): Promise<void> {\n    const markup = await this.getMarkupElements();\n    markup.forEach((m) => {\n      if (m.id === this.selectedMarkupId) {\n        m.mode = 'edit';\n        this.markupSelectionChanged.emit(m);\n      } else {\n        m.mode = '';\n      }\n    });\n\n    if (this.selectedMarkupId == null) {\n      this.markupSelectionChanged.emit(undefined);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  @Watch('circleTemplateId')\n  @Watch('freeformTemplateId')\n  @Watch('tool')\n  protected handlePropertyChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  @Watch('offset')\n  @Watch('scale')\n  protected async handleViewerChanged(\n    newViewer: HTMLVertexViewerElement | undefined,\n  ): Promise<void> {\n    this.updatePropsOnMarkupTool();\n    this.updatePropsOnMarkups();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('disabled')\n  protected handleDisabledChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('startLineAnchorStyle')\n  protected async handleStartLineAnchorStyleChanged(): Promise<void> {\n    this.updatePropsOnMarkupTool();\n\n    // If a piece of arrow markup is currently selected, then update its anchor style\n    const selectedArrow = await this.getSelectedArrowMarkup();\n    if (selectedArrow != null) {\n      selectedArrow.startLineAnchorStyle = this.startLineAnchorStyle;\n      this.markupChanged.emit(selectedArrow);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('endLineAnchorStyle')\n  protected async handleEndLineAnchorStyleChanged(): Promise<void> {\n    this.updatePropsOnMarkupTool();\n\n    // If a piece of arrow markup is currently selected, then update its anchor style\n    const selectedArrow = await this.getSelectedArrowMarkup();\n\n    if (selectedArrow != null) {\n      selectedArrow.endLineAnchorStyle = this.endLineAnchorStyle;\n      this.markupChanged.emit(selectedArrow);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('markupEnd')\n  protected async handleMarkupEnd(event: CustomEvent<Markup>): Promise<void> {\n    const e = event as CustomEvent<Markup>;\n    const el = await this.addMarkup(e.detail);\n    if (typeof el.componentOnReady === 'function') {\n      await el.componentOnReady();\n    }\n    if (this.selectNew) {\n      this.selectedMarkupId = e.detail.id;\n    }\n    this.getMarkupTool()?.reset();\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('interactionEnd')\n  protected async handleMarkupUpdated(\n    event: CustomEvent<MarkupInteraction>,\n  ): Promise<void> {\n    const e = event as CustomEvent<MarkupInteraction>;\n\n    // Do not emit the markupChanged event if the markup was just created\n    if (!e.detail.newlyCreatedMarkup) {\n      this.markupChanged.emit(e.detail.markup);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('pointerdown')\n  protected async handleMarkupPointerDown(event: PointerEvent): Promise<void> {\n    if (!this.disabled) {\n      const el = event.target as Element;\n      const markups = await this.getMarkupElements();\n      const markup = markups.find((m) => m === el);\n      if (markup?.id != null && markup?.id !== '') {\n        this.toSelectMarkupId = el.id;\n      }\n      this.pointerDownPosition = Point.create(event.clientX, event.clientY);\n\n      window.addEventListener('pointermove', this.handlePointerMove);\n      window.addEventListener('pointerup', this.handlePointerUp);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <slot onSlotchange={this.handleSlotChange} />\n      </Host>\n    );\n  }\n\n  private handleSlotChange = (): void => {\n    this.updatePropsOnMarkupTool();\n    this.updatePropsOnMarkups();\n  };\n\n  private handlePointerMove = (event: PointerEvent): void => {\n    if (\n      this.pointerDownPosition != null &&\n      Point.distance(\n        this.pointerDownPosition,\n        Point.create(event.clientX, event.clientY),\n      ) > 2\n    ) {\n      this.toSelectMarkupId = undefined;\n    }\n  };\n\n  private handlePointerUp = async (event: PointerEvent): Promise<void> => {\n    if (!this.disabled) {\n      const el = event.target as Element;\n      const markups = await this.getMarkupElements();\n      const markup = markups.find((m) => m === el);\n      if (\n        markup?.id != null &&\n        markup.id !== '' &&\n        markup.id === this.toSelectMarkupId\n      ) {\n        this.selectedMarkupId = el.id;\n      } else if (\n        this.pointerDownPosition != null &&\n        Point.distance(\n          this.pointerDownPosition,\n          Point.create(event.clientX, event.clientY),\n        ) <= 2\n      ) {\n        this.selectedMarkupId = undefined;\n      }\n      this.toSelectMarkupId = undefined;\n      this.pointerDownPosition = undefined;\n    }\n\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointermove', this.handlePointerMove);\n  };\n\n  private appendMarkupElement(\n    el:\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupFreeformElement,\n  ):\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    this.updatePropsOnMarkup(el);\n    this.hostEl.appendChild(el);\n    this.markupAdded.emit(el);\n\n    return el;\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`,\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`,\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`,\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private async updatePropsOnMarkups(): Promise<void> {\n    const markup = await this.getMarkupElements();\n    markup.forEach((m) => this.updatePropsOnMarkup(m));\n  }\n\n  private updatePropsOnMarkup(\n    element:\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement,\n  ): void {\n    element.viewer = this.viewer;\n    element.originatingViewport = this.originatingViewport;\n    element.centeringBehavior = this.centeringBehavior;\n    element.offset = this.offset;\n    element.scale = this.scale;\n    element.classList.add('viewer-markup__markup');\n  }\n\n  private updatePropsOnMarkupTool(): void {\n    const tool = this.getMarkupTool();\n    if (tool != null) {\n      tool.disabled = this.disabled;\n      tool.arrowTemplateId = this.arrowTemplateId;\n      tool.circleTemplateId = this.circleTemplateId;\n      tool.freeformTemplateId = this.freeformTemplateId;\n      tool.tool = this.tool;\n      tool.viewer = this.viewer;\n      tool.startLineAnchorStyle = this.startLineAnchorStyle;\n      tool.endLineAnchorStyle = this.endLineAnchorStyle;\n      tool.originatingViewport = this.originatingViewport;\n      tool.centeringBehavior = this.centeringBehavior;\n      tool.offset = this.offset;\n      tool.scale = this.scale;\n    }\n  }\n\n  private getMarkupTool(): HTMLVertexViewerMarkupToolElement | undefined {\n    return this.hostEl.querySelector('vertex-viewer-markup-tool') as\n      | HTMLVertexViewerMarkupToolElement\n      | undefined;\n  }\n\n  private async getSelectedArrowMarkup(): Promise<\n    HTMLVertexViewerMarkupArrowElement | undefined\n  > {\n    if (this.selectedMarkupId != null) {\n      const selected = await this.getMarkupElement(this.selectedMarkupId);\n\n      return isVertexViewerArrowMarkup(selected) ? selected : undefined;\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["viewerMarkupCss","ViewerMarkup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tool","disabled","selectNew","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","handleSlotChange","updatePropsOnMarkupTool","updatePropsOnMarkups","handlePointerMove","event","pointerDownPosition","Point","distance","create","clientX","clientY","toSelectMarkupId","undefined","handlePointerUp","async","el","target","markups","getMarkupElements","markup","find","m","id","selectedMarkupId","window","removeEventListener","disconnectedCallback","addMarkup","ArrowMarkup","start","end","createArrowMarkupElement","appendMarkupElement","CircleMarkup","bounds","createCircleMarkupElement","FreeformMarkup","points","createFreeformMarkupElement","Error","removeMarkup","getMarkupElement","remove","markupRemoved","emit","Array","from","hostEl","children","filter","e","isVertexViewerArrowMarkup","isVertexViewerCircleMarkup","isVertexViewerFreeformMarkup","handleSelectedMarkupIdChanged","forEach","mode","markupSelectionChanged","handlePropertyChanged","handleViewerChanged","newViewer","handleDisabledChanged","handleStartLineAnchorStyleChanged","selectedArrow","getSelectedArrowMarkup","markupChanged","handleEndLineAnchorStyleChanged","handleMarkupEnd","detail","componentOnReady","_a","getMarkupTool","reset","handleMarkupUpdated","newlyCreatedMarkup","handleMarkupPointerDown","addEventListener","componentDidLoad","render","h","Host","key","onSlotchange","updatePropsOnMarkup","appendChild","markupAdded","arrowTemplateId","element","stampTemplateWithId","document","body","console","warn","createElement","circleTemplateId","freeformTemplateId","viewer","originatingViewport","offset","classList","add","querySelector","selected"],"sources":["src/components/viewer-markup/viewer-markup.css?tag=vertex-viewer-markup&encapsulation=shadow","src/components/viewer-markup/viewer-markup.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\nimport {\n  isVertexViewerArrowMarkup,\n  LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\nimport { ViewerMarkupToolType } from '../viewer-markup-tool/viewer-markup-tool';\n\n@Component({\n  tag: 'vertex-viewer-markup',\n  styleUrl: 'viewer-markup.css',\n  shadow: true,\n})\nexport class ViewerMarkup {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup to perform.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * If `true`, disables adding or editing of markup through user\n   * interaction.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup. If nested within a <vertex-viewer>,\n   * this property will be populated automatically.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * The ID of the markup that is selected.\n   */\n  @Prop({ mutable: true })\n  public selectedMarkupId?: string;\n\n  /**\n   * Indicates if new markup should be automatically selected.\n   */\n  @Prop()\n  public selectNew = false;\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   * 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   * Dispatched when a new markup is added, either through user interaction\n   * or programmatically.\n   */\n  @Event()\n  public markupAdded!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when an existing piece of markup is changed, either through user interaction\n   * or programmatically.\n   */\n  @Event()\n  public markupChanged!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when a markup is removed, either through user\n   * interaction or programmatically.\n   */\n  @Event()\n  public markupRemoved!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when markup selection changes. Will either be the\n   * selected element or `undefined` indicating that selection\n   * was cleared.\n   */\n  @Event()\n  public markupSelectionChanged!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  >;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  @State()\n  private toSelectMarkupId?: string;\n\n  @State()\n  private pointerDownPosition?: Point.Point;\n\n  protected disconnectedCallback(): void {\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointermove', this.handlePointerMove);\n  }\n\n  /**\n   * Adds a new markup as a child to this component. A new markup\n   * component will be created from the template specified by\n   * `arrow-template-id`, `circle-template-id`, or if undefined\n   * a default element will be created.\n   *\n   * @param markup The markup to add.\n   * @returns The markup element that was created.\n   * @see {@link arrowTemplateId}\n   * @see {@link circleTemplateId}\n   */\n  @Method()\n  public async addMarkup(\n    markup: Markup,\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  > {\n    if (markup instanceof ArrowMarkup) {\n      const { start, end, id } = markup;\n\n      const el = this.createArrowMarkupElement();\n      this.appendMarkupElement(el);\n      el.id = id;\n      el.start = start;\n      el.end = end;\n      el.startLineAnchorStyle = this.startLineAnchorStyle;\n      el.endLineAnchorStyle = this.endLineAnchorStyle;\n\n      return el;\n    } else if (markup instanceof CircleMarkup) {\n      const { bounds, id } = markup;\n\n      const el = this.createCircleMarkupElement();\n      this.appendMarkupElement(el);\n      el.id = id;\n      el.bounds = bounds;\n\n      return el;\n    } else if (markup instanceof FreeformMarkup) {\n      const { bounds, points, id } = markup;\n\n      const el = this.createFreeformMarkupElement();\n      this.appendMarkupElement(el);\n      el.id = id;\n      el.points = points;\n      el.bounds = bounds;\n\n      return el;\n    } else {\n      throw new Error(`Cannot add markup. Unknown type '${markup}'.`);\n    }\n  }\n\n  /**\n   * Removes a markup with the given ID, and returns the HTML element\n   * associated to the markup. Returns `undefined` if no markup is\n   * found.\n   *\n   * @param id The ID of the markup to remove.\n   * @returns The markup element, or undefined.\n   */\n  @Method()\n  public async removeMarkup(\n    id: string,\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  > {\n    const markup = await this.getMarkupElement(id);\n\n    if (markup != null) {\n      markup.remove();\n      this.markupRemoved.emit(markup);\n    }\n\n    return markup;\n  }\n\n  /**\n   * Returns a list of markup elements that are children of this component.\n   *\n   * @returns A list of all markups.\n   * @see {@link getMarkupElement}\n   */\n  @Method()\n  public async getMarkupElements(): Promise<\n    Array<\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement\n    >\n  > {\n    return Array.from(this.hostEl.children).filter(\n      (e) =>\n        isVertexViewerArrowMarkup(e) ||\n        isVertexViewerCircleMarkup(e) ||\n        isVertexViewerFreeformMarkup(e),\n    ) as Array<\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement\n    >;\n  }\n\n  /**\n   * Returns the markup element associated to the given ID.\n   *\n   * @param id The ID of the markup element to return.\n   * @returns A markup element, or `undefined`.\n   * @see {@link getMarkupElements}\n   */\n  @Method()\n  public async getMarkupElement(\n    id: string,\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  > {\n    const markup = await this.getMarkupElements();\n    return markup.find((el) => el.id === id);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('selectedMarkupId')\n  protected async handleSelectedMarkupIdChanged(): Promise<void> {\n    const markup = await this.getMarkupElements();\n    markup.forEach((m) => {\n      if (m.id === this.selectedMarkupId) {\n        m.mode = 'edit';\n        this.markupSelectionChanged.emit(m);\n      } else {\n        m.mode = '';\n      }\n    });\n\n    if (this.selectedMarkupId == null) {\n      this.markupSelectionChanged.emit(undefined);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  @Watch('circleTemplateId')\n  @Watch('freeformTemplateId')\n  @Watch('tool')\n  protected handlePropertyChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  @Watch('offset')\n  @Watch('scale')\n  protected async handleViewerChanged(\n    newViewer: HTMLVertexViewerElement | undefined,\n  ): Promise<void> {\n    this.updatePropsOnMarkupTool();\n    this.updatePropsOnMarkups();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('disabled')\n  protected handleDisabledChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('startLineAnchorStyle')\n  protected async handleStartLineAnchorStyleChanged(): Promise<void> {\n    this.updatePropsOnMarkupTool();\n\n    // If a piece of arrow markup is currently selected, then update its anchor style\n    const selectedArrow = await this.getSelectedArrowMarkup();\n    if (selectedArrow != null) {\n      selectedArrow.startLineAnchorStyle = this.startLineAnchorStyle;\n      this.markupChanged.emit(selectedArrow);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('endLineAnchorStyle')\n  protected async handleEndLineAnchorStyleChanged(): Promise<void> {\n    this.updatePropsOnMarkupTool();\n\n    // If a piece of arrow markup is currently selected, then update its anchor style\n    const selectedArrow = await this.getSelectedArrowMarkup();\n\n    if (selectedArrow != null) {\n      selectedArrow.endLineAnchorStyle = this.endLineAnchorStyle;\n      this.markupChanged.emit(selectedArrow);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('markupEnd')\n  protected async handleMarkupEnd(event: CustomEvent<Markup>): Promise<void> {\n    const e = event as CustomEvent<Markup>;\n    const el = await this.addMarkup(e.detail);\n    if (typeof el.componentOnReady === 'function') {\n      await el.componentOnReady();\n    }\n    if (this.selectNew) {\n      this.selectedMarkupId = e.detail.id;\n    }\n    this.getMarkupTool()?.reset();\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('interactionEnd')\n  protected async handleMarkupUpdated(\n    event: CustomEvent<MarkupInteraction>,\n  ): Promise<void> {\n    const e = event as CustomEvent<MarkupInteraction>;\n\n    // Do not emit the markupChanged event if the markup was just created\n    if (!e.detail.newlyCreatedMarkup) {\n      this.markupChanged.emit(e.detail.markup);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('pointerdown')\n  protected async handleMarkupPointerDown(event: PointerEvent): Promise<void> {\n    if (!this.disabled) {\n      const el = event.target as Element;\n      const markups = await this.getMarkupElements();\n      const markup = markups.find((m) => m === el);\n      if (markup?.id != null && markup?.id !== '') {\n        this.toSelectMarkupId = el.id;\n      }\n      this.pointerDownPosition = Point.create(event.clientX, event.clientY);\n\n      window.addEventListener('pointermove', this.handlePointerMove);\n      window.addEventListener('pointerup', this.handlePointerUp);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <slot onSlotchange={this.handleSlotChange} />\n      </Host>\n    );\n  }\n\n  private handleSlotChange = (): void => {\n    this.updatePropsOnMarkupTool();\n    this.updatePropsOnMarkups();\n  };\n\n  private handlePointerMove = (event: PointerEvent): void => {\n    if (\n      this.pointerDownPosition != null &&\n      Point.distance(\n        this.pointerDownPosition,\n        Point.create(event.clientX, event.clientY),\n      ) > 2\n    ) {\n      this.toSelectMarkupId = undefined;\n    }\n  };\n\n  private handlePointerUp = async (event: PointerEvent): Promise<void> => {\n    if (!this.disabled) {\n      const el = event.target as Element;\n      const markups = await this.getMarkupElements();\n      const markup = markups.find((m) => m === el);\n      if (\n        markup?.id != null &&\n        markup.id !== '' &&\n        markup.id === this.toSelectMarkupId\n      ) {\n        this.selectedMarkupId = el.id;\n      } else if (\n        this.pointerDownPosition != null &&\n        Point.distance(\n          this.pointerDownPosition,\n          Point.create(event.clientX, event.clientY),\n        ) <= 2\n      ) {\n        this.selectedMarkupId = undefined;\n      }\n      this.toSelectMarkupId = undefined;\n      this.pointerDownPosition = undefined;\n    }\n\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointermove', this.handlePointerMove);\n  };\n\n  private appendMarkupElement(\n    el:\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupFreeformElement,\n  ):\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    this.updatePropsOnMarkup(el);\n    this.hostEl.appendChild(el);\n    this.markupAdded.emit(el);\n\n    return el;\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`,\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`,\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`,\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private async updatePropsOnMarkups(): Promise<void> {\n    const markup = await this.getMarkupElements();\n    markup.forEach((m) => this.updatePropsOnMarkup(m));\n  }\n\n  private updatePropsOnMarkup(\n    element:\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement,\n  ): void {\n    element.viewer = this.viewer;\n    element.originatingViewport = this.originatingViewport;\n    element.centeringBehavior = this.centeringBehavior;\n    element.offset = this.offset;\n    element.scale = this.scale;\n    element.classList.add('viewer-markup__markup');\n  }\n\n  private updatePropsOnMarkupTool(): void {\n    const tool = this.getMarkupTool();\n    if (tool != null) {\n      tool.disabled = this.disabled;\n      tool.arrowTemplateId = this.arrowTemplateId;\n      tool.circleTemplateId = this.circleTemplateId;\n      tool.freeformTemplateId = this.freeformTemplateId;\n      tool.tool = this.tool;\n      tool.viewer = this.viewer;\n      tool.startLineAnchorStyle = this.startLineAnchorStyle;\n      tool.endLineAnchorStyle = this.endLineAnchorStyle;\n      tool.originatingViewport = this.originatingViewport;\n      tool.centeringBehavior = this.centeringBehavior;\n      tool.offset = this.offset;\n      tool.scale = this.scale;\n    }\n  }\n\n  private getMarkupTool(): HTMLVertexViewerMarkupToolElement | undefined {\n    return this.hostEl.querySelector('vertex-viewer-markup-tool') as\n      HTMLVertexViewerMarkupToolElement | undefined;\n  }\n\n  private async getSelectedArrowMarkup(): Promise<\n    HTMLVertexViewerMarkupArrowElement | undefined\n  > {\n    if (this.selectedMarkupId != null) {\n      const selected = await this.getMarkupElement(this.selectedMarkupId);\n\n      return isVertexViewerArrowMarkup(selected) ? selected : undefined;\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/vertex-viewer-measurement-details.js

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as e,F as t,t as s,p as n,H as r,e as i}from"./p-Bb32XUUS.js";import"./p-BKQMbekH.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-5kcpg4MZ.js";import{D as a,A as l,h as o}from"./p-DjrtwKcK.js";import{M as d}from"./p-BY3lpCm6.js";import{v as u}from"./p-CZZALKHT.js";import{c as h}from"./p-C6gMOKYg.js";import{_ as m}from"./p-C-NyjLsm.js";function v(e){return e.toLowerCase()}var c=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g];var f=/[^A-Z0-9]+/gi;function g(e,t){if(t===void 0){t={}}var s=t.splitRegexp,n=s===void 0?c:s,r=t.stripRegexp,i=r===void 0?f:r,a=t.transform,l=a===void 0?v:a,o=t.delimiter,d=o===void 0?" ":o;var u=p(p(e,n,"$1\0$2"),i,"\0");var h=0;var m=u.length;while(u.charAt(h)==="\0")h++;while(u.charAt(m-1)==="\0")m--;return u.slice(h,m).split("\0").map(l).join(d)}function p(e,t,s){if(t instanceof RegExp)return e.replace(t,s);return t.reduce((function(e,t){return e.replace(t,s)}),e)}function y(e,t){if(t===void 0){t={}}return g(e,m({delimiter:"."},t))}function w(e,t){if(t===void 0){t={}}return y(e,m({delimiter:"-"},t))}const M=({label:t,...s},n)=>e("div",{...s,class:"measurement-details-entry"},e("div",{class:h("measurement-details-entry-label",w(t))},t,":"),n);const b=({result:s,formatter:n,overlays:r,onShowOverlay:i,onHideOverlay:a})=>{const l=u.subtract(s.point1,s.point2);return e(t,null,e(M,{label:"Dist",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addLineFromResult(s)),onMouseLeave:a},n(s.distance)),e(M,{label:"X",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addDistanceVectorFromResult(s)),onMouseLeave:a},n(l.x)),e(M,{label:"Y",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addDistanceVectorFromResult(s)),onMouseLeave:a},n(l.y)),e(M,{label:"Z",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addDistanceVectorFromResult(s)),onMouseLeave:a},n(l.z)))};const C=({result:t,formatter:s})=>e(M,{label:"Angle"},s(t.angle));const U=({result:t,formatter:s})=>e(M,{label:"Parallel Dist"},s(t.distance));const x=({result:t,formatter:s})=>e(M,{label:"Area"},s(t.area));const A=()=>`:host{display:flex;flex-direction:column;--viewer-measurement-details-x-color:red;--viewer-measurement-details-y-color:var(--green-500);--viewer-measurement-details-z-color:blue}.measurement-details-entry{display:flex;align-items:center}.measurement-details-entry-label{user-select:none;padding-right:0.25rem}.measurement-details-entry-label.x{color:var(--viewer-measurement-details-x-color)}.measurement-details-entry-label.y{color:var(--viewer-measurement-details-y-color)}.measurement-details-entry-label.z{color:var(--viewer-measurement-details-z-color)}`;const O=n(class t extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.measurementModel=new d;this.distanceUnits="millimeters";this.angleUnits="degrees";this.fractionalDigits=2;this.distanceMeasurementUnits=new a(this.distanceUnits);this.angleMeasurementUnits=new l(this.angleUnits);this.areaMeasurementUnits=new o(this.distanceUnits);this.handleShowOverlay=e=>{this.overlay=e};this.handleHideOverlay=()=>{var e;(e=this.overlay)===null||e===void 0?void 0:e.dispose()};this.handleOutcomeChange=()=>{this.updateStateFromModel()}}connectedCallback(){this.handleMeasurementModelChanged()}disconnectedCallback(){var e;(e=this.onOutcomeChangedHandler)===null||e===void 0?void 0:e.dispose()}handleDistanceUnitsChanged(){this.distanceMeasurementUnits=new a(this.distanceUnits);this.areaMeasurementUnits=new o(this.distanceUnits)}handleAngleUnitsChanged(){this.angleMeasurementUnits=new l(this.angleUnits)}handleMeasurementModelChanged(){var e,t;(e=this.onOutcomeChangedHandler)===null||e===void 0?void 0:e.dispose();this.onOutcomeChangedHandler=(t=this.measurementModel)===null||t===void 0?void 0:t.onOutcomeChanged(this.handleOutcomeChange);this.updateStateFromModel()}handleResultTypesChanged(){this.updateStateFromModel()}render(){var t,s;const n=e=>{var t,s;return(s=(t=this.resultTypes)===null||t===void 0?void 0:t.includes(e.type))!==null&&s!==void 0?s:true};const r=((s=(t=this.measurementOutcome)===null||t===void 0?void 0:t.results)!==null&&s!==void 0?s:[]).filter(n);return e(i,null,this.renderResult("planar-angle",r,(t=>e(C,{result:t,overlays:this.measurementOverlays,formatter:this.makeAngleFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))),this.renderResult("planar-distance",r,(t=>e(U,{result:t,overlays:this.measurementOverlays,formatter:this.makeDistanceFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))),this.renderResult("surface-area",r,(t=>e(x,{result:t,overlays:this.measurementOverlays,formatter:this.makeAreaFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))),this.renderResult("minimum-distance",r,(t=>e(b,{result:t,overlays:this.measurementOverlays,formatter:this.makeDistanceFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))))}updateStateFromModel(){var e;this.measurementOutcome=(e=this.measurementModel)===null||e===void 0?void 0:e.getOutcome()}renderResult(e,t,s){const n=this.getResultForType(e,t);return n!=null?s(n):undefined}getResultForType(e,t){return t.find((t=>t.type===e))}makeDistanceFormatter(){return this.makeFormatter((e=>this.distanceMeasurementUnits.convertWorldValueToReal(e)),this.distanceMeasurementUnits.unit,this.distanceFormatter)}makeAngleFormatter(){return this.makeFormatter((e=>this.angleMeasurementUnits.convertTo(e)),this.angleMeasurementUnits.unit,this.angleFormatter)}makeAreaFormatter(){return this.makeFormatter((e=>this.areaMeasurementUnits.convertWorldValueToReal(e)),this.areaMeasurementUnits.unit,this.areaFormatter)}makeFormatter(e,t,s){return n=>{const r=e(n);if(s!=null){return s(r)}else{return this.formatValue(r,t)}}}formatValue(e,t){var s,n;const r=e.toFixed(this.fractionalDigits);const i=(n=(s=this.measurementOutcome)===null||s===void 0?void 0:s.isApproximate)!==null&&n!==void 0?n:false;return`${i?"~"+r:r} ${t.abbreviatedName}`}static get watchers(){return{distanceUnits:[{handleDistanceUnitsChanged:1}],angleUnits:[{handleAngleUnitsChanged:1}],measurementModel:[{handleMeasurementModelChanged:1}],resultTypes:[{handleResultTypesChanged:0}]}}static get style(){return A()}},[1,"vertex-viewer-measurement-details",{measurementModel:[16],measurementOverlays:[16],measurementOutcome:[1040],distanceUnits:[1,"distance-units"],angleUnits:[1,"angle-units"],fractionalDigits:[2,"fractional-digits"],distanceFormatter:[16],angleFormatter:[16],areaFormatter:[16],resultTypes:[16],overlay:[32],distanceMeasurementUnits:[32],angleMeasurementUnits:[32],areaMeasurementUnits:[32]},undefined,{distanceUnits:[{handleDistanceUnitsChanged:1}],angleUnits:[{handleAngleUnitsChanged:1}],measurementModel:[{handleMeasurementModelChanged:1}],resultTypes:[{handleResultTypesChanged:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["vertex-viewer-measurement-details"];e.forEach((e=>{switch(e){case"vertex-viewer-measurement-details":if(!customElements.get(s(e))){customElements.define(s(e),O)}break}}))}j();const F=O;const k=j;export{F as VertexViewerMeasurementDetails,k as defineCustomElement};
+import{h as e,F as t,t as s,p as n,H as r,e as i}from"./p-Bb32XUUS.js";import"./p-BCuMPvZO.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-5kcpg4MZ.js";import{D as a,A as l,h as o}from"./p-BjvjKoy7.js";import{M as u}from"./p-BY3lpCm6.js";import{v as d}from"./p-2UsvOTHJ.js";import{c as h}from"./p-C6gMOKYg.js";import{_ as m}from"./p-C-NyjLsm.js";function v(e){return e.toLowerCase()}var c=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g];var f=/[^A-Z0-9]+/gi;function g(e,t){if(t===void 0){t={}}var s=t.splitRegexp,n=s===void 0?c:s,r=t.stripRegexp,i=r===void 0?f:r,a=t.transform,l=a===void 0?v:a,o=t.delimiter,u=o===void 0?" ":o;var d=p(p(e,n,"$1\0$2"),i,"\0");var h=0;var m=d.length;while(d.charAt(h)==="\0")h++;while(d.charAt(m-1)==="\0")m--;return d.slice(h,m).split("\0").map(l).join(u)}function p(e,t,s){if(t instanceof RegExp)return e.replace(t,s);return t.reduce((function(e,t){return e.replace(t,s)}),e)}function y(e,t){if(t===void 0){t={}}return g(e,m({delimiter:"."},t))}function w(e,t){if(t===void 0){t={}}return y(e,m({delimiter:"-"},t))}const M=({label:t,...s},n)=>e("div",{...s,class:"measurement-details-entry"},e("div",{class:h("measurement-details-entry-label",w(t))},t,":"),n);const b=({result:s,formatter:n,overlays:r,onShowOverlay:i,onHideOverlay:a})=>{const l=d.subtract(s.point1,s.point2);return e(t,null,e(M,{label:"Dist",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addLineFromResult(s)),onMouseLeave:a},n(s.distance)),e(M,{label:"X",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addDistanceVectorFromResult(s)),onMouseLeave:a},n(l.x)),e(M,{label:"Y",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addDistanceVectorFromResult(s)),onMouseLeave:a},n(l.y)),e(M,{label:"Z",onMouseEnter:()=>i(r===null||r===void 0?void 0:r.addDistanceVectorFromResult(s)),onMouseLeave:a},n(l.z)))};const C=({result:t,formatter:s})=>e(M,{label:"Angle"},s(t.angle));const U=({result:t,formatter:s})=>e(M,{label:"Parallel Dist"},s(t.distance));const O=({result:t,formatter:s})=>e(M,{label:"Area"},s(t.area));const j=()=>`:host{display:flex;flex-direction:column;--viewer-measurement-details-x-color:red;--viewer-measurement-details-y-color:var(--green-500);--viewer-measurement-details-z-color:blue}.measurement-details-entry{display:flex;align-items:center}.measurement-details-entry-label{user-select:none;padding-right:0.25rem}.measurement-details-entry-label.x{color:var(--viewer-measurement-details-x-color)}.measurement-details-entry-label.y{color:var(--viewer-measurement-details-y-color)}.measurement-details-entry-label.z{color:var(--viewer-measurement-details-z-color)}`;const x=n(class t extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.measurementModel=new u;this.distanceUnits="millimeters";this.angleUnits="degrees";this.fractionalDigits=2;this.distanceMeasurementUnits=new a(this.distanceUnits);this.angleMeasurementUnits=new l(this.angleUnits);this.areaMeasurementUnits=new o(this.distanceUnits);this.handleShowOverlay=e=>{this.overlay=e};this.handleHideOverlay=()=>{var e;(e=this.overlay)===null||e===void 0?void 0:e.dispose()};this.handleOutcomeChange=()=>{this.updateStateFromModel()}}connectedCallback(){this.handleMeasurementModelChanged()}disconnectedCallback(){var e;(e=this.onOutcomeChangedHandler)===null||e===void 0?void 0:e.dispose()}handleDistanceUnitsChanged(){this.distanceMeasurementUnits=new a(this.distanceUnits);this.areaMeasurementUnits=new o(this.distanceUnits)}handleAngleUnitsChanged(){this.angleMeasurementUnits=new l(this.angleUnits)}handleMeasurementModelChanged(){var e,t;(e=this.onOutcomeChangedHandler)===null||e===void 0?void 0:e.dispose();this.onOutcomeChangedHandler=(t=this.measurementModel)===null||t===void 0?void 0:t.onOutcomeChanged(this.handleOutcomeChange);this.updateStateFromModel()}handleResultTypesChanged(){this.updateStateFromModel()}render(){var t,s;const n=e=>{var t,s;return(s=(t=this.resultTypes)===null||t===void 0?void 0:t.includes(e.type))!==null&&s!==void 0?s:true};const r=((s=(t=this.measurementOutcome)===null||t===void 0?void 0:t.results)!==null&&s!==void 0?s:[]).filter(n);return e(i,null,this.renderResult("planar-angle",r,(t=>e(C,{result:t,overlays:this.measurementOverlays,formatter:this.makeAngleFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))),this.renderResult("planar-distance",r,(t=>e(U,{result:t,overlays:this.measurementOverlays,formatter:this.makeDistanceFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))),this.renderResult("surface-area",r,(t=>e(O,{result:t,overlays:this.measurementOverlays,formatter:this.makeAreaFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))),this.renderResult("minimum-distance",r,(t=>e(b,{result:t,overlays:this.measurementOverlays,formatter:this.makeDistanceFormatter(),onShowOverlay:this.handleShowOverlay,onHideOverlay:this.handleHideOverlay}))))}updateStateFromModel(){var e;this.measurementOutcome=(e=this.measurementModel)===null||e===void 0?void 0:e.getOutcome()}renderResult(e,t,s){const n=this.getResultForType(e,t);return n!=null?s(n):undefined}getResultForType(e,t){return t.find((t=>t.type===e))}makeDistanceFormatter(){return this.makeFormatter((e=>this.distanceMeasurementUnits.convertWorldValueToReal(e)),this.distanceMeasurementUnits.unit,this.distanceFormatter)}makeAngleFormatter(){return this.makeFormatter((e=>this.angleMeasurementUnits.convertTo(e)),this.angleMeasurementUnits.unit,this.angleFormatter)}makeAreaFormatter(){return this.makeFormatter((e=>this.areaMeasurementUnits.convertWorldValueToReal(e)),this.areaMeasurementUnits.unit,this.areaFormatter)}makeFormatter(e,t,s){return n=>{const r=e(n);if(s!=null){return s(r)}else{return this.formatValue(r,t)}}}formatValue(e,t){var s,n;const r=e.toFixed(this.fractionalDigits);const i=(n=(s=this.measurementOutcome)===null||s===void 0?void 0:s.isApproximate)!==null&&n!==void 0?n:false;return`${i?"~"+r:r} ${t.abbreviatedName}`}static get watchers(){return{distanceUnits:[{handleDistanceUnitsChanged:1}],angleUnits:[{handleAngleUnitsChanged:1}],measurementModel:[{handleMeasurementModelChanged:1}],resultTypes:[{handleResultTypesChanged:0}]}}static get style(){return j()}},[1,"vertex-viewer-measurement-details",{measurementModel:[16],measurementOverlays:[16],measurementOutcome:[1040],distanceUnits:[1,"distance-units"],angleUnits:[1,"angle-units"],fractionalDigits:[2,"fractional-digits"],distanceFormatter:[16],angleFormatter:[16],areaFormatter:[16],resultTypes:[16],overlay:[32],distanceMeasurementUnits:[32],angleMeasurementUnits:[32],areaMeasurementUnits:[32]},undefined,{distanceUnits:[{handleDistanceUnitsChanged:1}],angleUnits:[{handleAngleUnitsChanged:1}],measurementModel:[{handleMeasurementModelChanged:1}],resultTypes:[{handleResultTypesChanged:0}]}]);function A(){if(typeof customElements==="undefined"){return}const e=["vertex-viewer-measurement-details"];e.forEach((e=>{switch(e){case"vertex-viewer-measurement-details":if(!customElements.get(s(e))){customElements.define(s(e),x)}break}}))}A();const F=x;const k=A;export{F as VertexViewerMeasurementDetails,k as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-measurement-details.js.map

package/dist/components/vertex-viewer-measurement-distance.js

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as t,t as e,p as i,H as n,d as s,e as r}from"./p-Bb32XUUS.js";import{v as a,a as o,p as h,l}from"./p-CZZALKHT.js";import{m as d}from"./p-DxMDDbmh.js";import{b as c,g as u}from"./p-BqeEZXPn.js";import"./p-BKQMbekH.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-5kcpg4MZ.js";import{o as m,D as v}from"./p-DjrtwKcK.js";import{M as p}from"./p-BY3lpCm6.js";import{M as w}from"./p-CxzyM08j.js";import{m as f}from"./p-mpsCUvSn.js";import{V as g}from"./p-EG7pMA2M.js";import{E as b,m as y}from"./p-CDM7zNn0.js";import{d as C,g as E}from"./p-DnVcQAR9.js";import{c as M}from"./p-C6gMOKYg.js";import{d as P}from"./p-oDn1DcWj.js";const x=16;const D=10;function k(t){return t.getBoundingClientRect()}class j{constructor(t,e,i,n){this.stencil=t;this.depthBuffer=e;this.viewport=i;this.camera=n}hitTest(t){const e=this.viewport.transformPointToFrame(t,this.depthBuffer);if(this.stencil!=null){const i=this.viewport.transformPointToFrame(t,this.stencil);return this.stencil.hitTest(i)||this.depthBuffer.hitTest(e)}else{return this.depthBuffer.hitTest(e)}}snapToNearestPixel(t,e){if(this.stencil!=null){const i=this.viewport.transformPointToFrame(t,this.stencil);const n=this.stencil.snapToNearestPixel(i,e);return this.viewport.transformPointToViewport(n,this.stencil)}else{return t}}transformPointToWorld(t,{ignoreHitTest:e=false}={}){const i=this.pickDepthBuffer(t);if(i!=null){return this.viewport.transformPointToWorldSpace(t,i)}else if(e){return this.viewport.transformPointToWorldSpace(t,this.depthBuffer)}}pickDepthBuffer(t){if(this.stencil!=null){const e=this.viewport.transformPointToFrame(t,this.stencil);if(this.stencil.hitTest(e)){return this.stencil.depthBuffer}}const e=this.viewport.transformPointToFrame(t,this.depthBuffer);return this.depthBuffer.hitTest(e)?this.depthBuffer:undefined}}class A{constructor(t){this.model=t}newMeasurement(t,e){const i=e.hitTester().transformPointToWorld(t);return i!=null?new I(t,i,this.model):undefined}editMeasurement(t){const e=this.model.getMeasurement();if(e==null){throw new Error("Cannot edit measurement. Measurement is empty.")}return t==="start"?new B(e,this.model):new T(e,this.model)}clearIndicator(){this.model.setIndicator(undefined)}moveIndicator(t,e){const i=e.hitTester().transformPointToWorld(t);this.model.setIndicator(i);return i!=null}}class S{constructor(){this.measurementChanged=new b;this.indicatorChanged=new b}static empty(){return new S}getMeasurement(){return this.measurement}setMeasurement(t){if(this.measurement!==t){this.measurement=t;this.measurementChanged.emit(t)}}setMeasurementFromValues(t,e,i){if(t!=null&&e!=null){const n=i?V(t,e):O(t,e);this.setMeasurement(n)}else{this.setMeasurement(undefined)}}onMeasurementChanged(t){return this.measurementChanged.on(t)}getIndicator(){return this.indicator}setIndicator(t){if(this.indicator!==t){this.indicator=t;this.indicatorChanged.emit(t)}}onIndicatorChanged(t){return this.indicatorChanged.on(t)}}class I{constructor(t,e,i){this.pt=t;this.world=e;this.model=i;this.hitWorldValid=true;this.preventUpdate=false}fetchStartIfMissing(t){if(this.pendingStart==null){this.pendingStart=this.fetchStart(t)}}async fetchStart(t){const e=await t.raycaster();const i=await H(e,this.pt);if(i==null){const e=t.hitTester().transformPointToWorld(this.pt);this.hitWorld=e;this.hitWorldValid=false}else{this.hitWorld=i;this.hitWorldValid=true}}update(t,e){var i;if(!this.preventUpdate){this.fetchStartIfMissing(e);const n=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});const s=e.hitTester().hitTest(t);const r=(i=this.hitWorld)!==null&&i!==void 0?i:this.world;if(n==null){throw new Error("Cannot update new measurement interaction. End point is empty.")}else if(!this.hitWorldValid||!s){this.model.setIndicator(n);this.setMeasurement(O(r,n))}else{this.model.setIndicator(n);this.setMeasurement(V(r,n))}}}async finish(t,e){var i;this.preventUpdate=true;this.fetchStartIfMissing(e);await this.pendingStart;this.model.setIndicator(undefined);const n=await e.raycaster();const s=await H(n,t);const r=(i=this.hitWorld)!==null&&i!==void 0?i:this.world;this.preventUpdate=false;if(s==null){const i=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});if(i==null){throw new Error("Cannot complete new measurement interaction. End point is empty.")}return this.setMeasurement(O(r,i))}else if(!this.hitWorldValid){return this.setMeasurement(O(r,s))}else{return this.setMeasurement(V(r,s))}}setMeasurement(t){this.model.setMeasurement(t);return t}}class L{constructor(t,e){this.measurement=t;this.model=e}update(t,e){const i=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});const n=e.hitTester().hitTest(t);if(i==null){throw new Error("Cannot update new measurement interaction. End point is empty.")}else if(!n){this.model.setIndicator(i);this.setMeasurement(this.getInvalidMeasurement(i))}else{this.model.setIndicator(i);this.setMeasurement(this.getValidMeasurement(i))}}async finish(t,e){const i=await e.raycaster();const n=await H(i,t);this.model.setIndicator(undefined);if(n==null){const i=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});if(i==null){throw new Error("Cannot complete edit measurement interaction. End point is empty.")}return this.setMeasurement(this.getInvalidMeasurement(i))}else{return this.setMeasurement(this.getValidMeasurement(n))}}setMeasurement(t){this.model.setMeasurement(t);return t}}class B extends L{constructor(t,e){super(t,e)}getInvalidMeasurement(t){return O(t,this.measurement.end)}getValidMeasurement(t){return V(t,this.measurement.end)}}class T extends L{constructor(t,e){super(t,e)}getInvalidMeasurement(t){return O(this.measurement.start,t)}getValidMeasurement(t){return V(this.measurement.start,t)}}async function H(t,e){var i;const n=await t.hitItems(e);const[s]=(i=n===null||n===void 0?void 0:n.hits)!==null&&i!==void 0?i:[];if((s===null||s===void 0?void 0:s.hitPoint)!=null){const t=m(s.hitPoint);if(y.isInvalid(t)){throw new Error(`Invalid hit response [${t.errors.join(",")}]`)}return t}else return undefined}function V(t,e){return{start:t,end:e,distance:a.distance(t,e),valid:true}}function O(t,e){return{start:t,end:e,valid:false}}const U=({startPt:e,endPt:i,centerPt:n,indicatorPt:s,distance:r,anchorLabelOffset:a,lineCapLength:l,linePointerEvents:d,hideStartAnchor:u,hideEndAnchor:m,onStartAnchorPointerDown:v,onEndAnchorPointerDown:p})=>{const w=e!=null&&i!=null?o.fromPoints(e,i):undefined;const f=w!=null&&e!=null&&a!=null?h.add(e,h.polar(-a,w)):undefined;const g=w!=null&&i!=null&&a!=null?h.add(i,h.polar(a,w)):undefined;return t("div",null,e!=null&&i!=null&&t("vertex-viewer-measurement-line",{class:M("line",{"hide-start-line-cap":u,"hide-end-line-cap":m}),start:e,end:i,capLength:l,pointerEvents:d}),!u&&e!=null&&t("div",{id:"start-anchor",class:"anchor anchor-start",style:{transform:c(e)},onPointerDown:v},t("slot",{name:"start-anchor"},t("div",{class:"anchor-placeholder"}))),!u&&f&&t("div",{class:"anchor-label anchor-label-start",style:{transform:c(f)}},t("slot",{name:"start-label"})),!m&&i!=null&&t("div",{id:"end-anchor",class:"anchor anchor-end",style:{transform:c(i)},onPointerDown:p},t("slot",{name:"end-anchor"},t("div",{class:"anchor-placeholder"}))),!m&&g&&t("div",{class:"anchor-label anchor-label-end",style:{transform:c(g)}},t("slot",{name:"end-label"})),n!=null&&t("div",{id:"label",class:"distance-label",style:{transform:c(n)}},r),s!=null&&t("div",{class:"indicator",style:{transform:c(s)}},t("slot",{name:"indicator"},t("div",{class:"indicator-placeholder"}))))};const z=()=>`:host{--viewer-measurement-distance-accent-color:var(--neutral-900);--viewer-measurement-distance-contrast-color:var(--white);--viewer-measurement-distance-invalid-accent-color:var(--red-600);--viewer-measurement-distance-invalid-contrast-color:var(--white);--viewer-measurement-distance-line-stroke-width:1.25px;--viewer-measurement-distance-line-fill-width:2px;--viewer-measurement-distance-distance-border:1px solid     var(--viewer-measurement-distance-accent-color);--viewer-measurement-distance-distance-border-radius:0.25rem;--viewer-measurement-distance-distance-padding:0.375rem 0.5rem;color:var(--viewer-measurement-distance-accent-color);font-size:0.75rem;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}:host([invalid]:not([invalid='false'])){--viewer-measurement-distance-accent-color:var(     --viewer-measurement-distance-invalid-accent-color   ) !important;--viewer-measurement-distance-contrast-color:var(     --viewer-measurement-distance-invalid-contrast-color   ) !important}.line{--viewer-measurement-line-stroke:var(     --viewer-measurement-distance-contrast-color   );--viewer-measurement-line-stroke-opacity:0.75;--viewer-measurement-line-stroke-width:var(     --viewer-measurement-distance-line-stroke-width   );--viewer-measurement-line-fill:var(     --viewer-measurement-distance-accent-color   );--viewer-measurement-line-fill-width:var(     --viewer-measurement-distance-line-fill-width   );position:absolute;width:100%;height:100%}.anchor{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;pointer-events:auto}:host([interacting-anchor='start']) .anchor-start,:host([interacting-anchor='start']) .anchor-label-start{visibility:hidden}.hide-start-line-cap,:host([interacting-anchor='start']) .line{--viewer-measurement-line-start-cap-visibility:hidden}:host([interacting-anchor='end']) .anchor-end,:host([interacting-anchor='end']) .anchor-label-end{visibility:hidden}.hide-end-line-cap,:host([interacting-anchor='end']) .line{--viewer-measurement-line-end-cap-visibility:hidden}.anchor-label{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;pointer-events:auto}:host(:not([mode=''])){cursor:inherit}:host(:not([mode=''])) .anchor{cursor:move}:host([mode='']) .anchor{visibility:hidden}.anchor-placeholder{background:var(--viewer-measurement-distance-contrast-color);width:12px;height:12px;border-radius:50%;box-sizing:border-box}:host(:not([mode=''])) .anchor-placeholder{border:2px solid var(--viewer-measurement-distance-accent-color);background:var(--viewer-measurement-distance-contrast-color)}:host([mode='']) .distance-label{color:var(--viewer-measurement-distance-contrast-color);background:var(--viewer-measurement-distance-accent-color)}.distance-label{position:absolute;background:var(--viewer-measurement-distance-contrast-color);border:var(--viewer-measurement-distance-distance-border);border-radius:var(--viewer-measurement-distance-distance-border-radius);padding:var(--viewer-measurement-distance-distance-padding);pointer-events:auto}.indicator{position:absolute}.indicator-placeholder{background:var(--viewer-measurement-distance-accent-color);border:1px solid var(--viewer-measurement-distance-contrast-color);width:6px;height:6px;border-radius:50%;box-sizing:border-box}`;const K=3;const F=i(class e extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.editBegin=s(this,"editBegin");this.editEnd=s(this,"editEnd");this.showAxisReferenceLines=false;this.snapDistance=x;this.units="millimeters";this.fractionalDigits=2;this.anchorLabelOffset=20;this.lineCapLength=D;this.mode="";this.interactingAnchor="none";this.invalid=false;this.measurementModel=new p;this.viewport=new g(0,0);this.interactionCount=0;this.invalidateStateCounter=0;this.stateMap={};this.measurementUnits=new v(this.units);this.model=S.empty();this.controller=new A(this.model);this.overlays=new w;this.isUserInteractingWithModel=false;this.handleFrameDrawn=()=>{this.invalidateState()};this.clearIndicator=()=>{this.controller.clearIndicator()};this.updateStartAnchor=async t=>{await this.getStencilBuffer();if(this.interactionCount===0){const e=u(t,this.elementBounds);const i=this.snapPoint(e,t);await this.updateIndicator(i)}};this.newMeasurement=t=>{if(this.interactionCount===0&&t.button===0){const e=t=>{const e=()=>{window.removeEventListener("pointerup",i);window.removeEventListener("pointermove",n)};const i=async()=>{e();t()};const n=t=>{if(t.buttons>0){e()}};window.addEventListener("pointermove",n);window.addEventListener("pointerup",i)};const i=t=>{let e=h.create(0,0);const i=i=>{const n=h.distance(e,u(i,this.elementBounds));if(n>=K){t()}};const n=()=>{window.removeEventListener("pointermove",i);window.removeEventListener("pointerup",s)};const s=()=>n();const r=t=>{e=u(t,this.elementBounds);window.addEventListener("pointermove",i);window.addEventListener("pointerup",s)};window.addEventListener("pointerdown",r);return{dispose:()=>window.removeEventListener("pointerdown",r)}};const n=()=>{const t=i((()=>{var t;this.isUserInteractingWithModel=true;(t=this.stateMap.hoverCursor)===null||t===void 0?void 0:t.dispose()}));const e=()=>{window.removeEventListener("pointermove",n);window.removeEventListener("pointerup",s);t.dispose()};const n=this.createInteractionMoveHandler();const s=async t=>{var i;if(t.button===0){if(this.isUserInteractingWithModel){this.isUserInteractingWithModel=false}else{const n=this.getHitProvider();if(n!=null){const s=u(t,this.elementBounds);const r=this.snapPoint(s,t);await((i=this.interaction)===null||i===void 0?void 0:i.finish(r,n));e();this.updateMeasurementPropsFromModel();this.endEditing()}}}};this.beginEditing("replace","end");this.newInteractionHandler={dispose:e};window.addEventListener("pointermove",n);window.addEventListener("pointerup",s)};const s=this.getHitProvider();if(s!=null){const i=u(t,this.elementBounds);const r=this.snapPoint(i,t);this.interaction=this.controller.newMeasurement(r,s);if(this.interaction!=null){e(n)}}}}}async computeElementMetrics(){var t,e,i;const n=(t=this.hostEl.shadowRoot)===null||t===void 0?void 0:t.getElementById("start-anchor");const s=(e=this.hostEl.shadowRoot)===null||e===void 0?void 0:e.getElementById("end-anchor");const r=(i=this.hostEl.shadowRoot)===null||i===void 0?void 0:i.getElementById("label");if(n!=null&&s!=null&&r!=null){return{startAnchor:n.getBoundingClientRect(),endAnchor:s.getBoundingClientRect(),label:r.getBoundingClientRect()}}else{return undefined}}connectedCallback(){this.setDepthBuffers()}disconnectedCallback(){var t,e;(t=this.stateMap.hoverCursor)===null||t===void 0?void 0:t.dispose();(e=this.newInteractionHandler)===null||e===void 0?void 0:e.dispose();this.resetDepthBuffers()}async componentWillLoad(){this.updatePropsFromJson();this.model.setMeasurementFromValues(this.start,this.end,!this.invalid);await this.getStencilBuffer();this.updateViewport();this.setDepthBuffers();await this.handleViewerChanged(this.viewer);await this.handleModeChanged();await this.computePropsAndState();this.model.onIndicatorChanged((t=>{this.indicatorPt=t}))}componentDidLoad(){const t=new ResizeObserver((()=>this.updateViewport()));t.observe(this.hostEl)}async componentWillUpdate(){await this.computePropsAndState()}render(){return t(r,{key:"58113224139c37a54bf9329ed27e6a8983d5cccd"},this.showAxisReferenceLines&&t("vertex-viewer-measurement-overlays",{key:"d2166c4a965761f472f5b3323844d82980baa29f",measurementOverlays:this.overlays,viewer:this.viewer}),this.renderMeasurement())}renderMeasurement(){const e=this.computeElementPositions();const{startPt:i,endPt:n,labelPt:s,indicatorPt:r,hideStart:a,hideEnd:o}=e;const h=this.formatDistance(this.distance);if(this.mode==="edit"||this.mode==="replace"){return t(U,{startPt:i,endPt:n,centerPt:s,indicatorPt:r,distance:h,anchorLabelOffset:this.anchorLabelOffset,lineCapLength:this.lineCapLength,hideStartAnchor:a,hideEndAnchor:o,onStartAnchorPointerDown:this.handleEditAnchor("start"),onEndAnchorPointerDown:this.handleEditAnchor("end")})}else{return t(U,{startPt:i,endPt:n,centerPt:s,indicatorPt:this.indicatorPt,distance:h,hideStartAnchor:a,hideEndAnchor:o,anchorLabelOffset:this.anchorLabelOffset,lineCapLength:this.lineCapLength,linePointerEvents:"painted"})}}async handleViewerChanged(t,e){if(e!=null){e.removeEventListener("frameDrawn",this.handleFrameDrawn);await this.removeInteractionListeners(e)}if(t!=null){t.addEventListener("frameDrawn",this.handleFrameDrawn);await this.addInteractionListeners(t)}}handleUnitsChanged(){this.measurementUnits=new v(this.units)}handleCameraChanged(){this.updateCamera()}async handleModeChanged(){var t;if(this.mode===""){(t=this.stateMap.hoverCursor)===null||t===void 0?void 0:t.dispose()}if(this.viewer!=null){await this.removeInteractionListeners(this.viewer);await this.addInteractionListeners(this.viewer)}}handleStartChanged(){this.updateInteractionModel()}handleEndChanged(){this.updateInteractionModel()}handleInvalidChanged(){this.updateInteractionModel()}async computePropsAndState(){this.updateCamera();await this.updateDepthBuffer();this.updateMeasurementPropsFromModel();this.updateOverlays()}updateOverlays(){var t;(t=this.overlay)===null||t===void 0?void 0:t.dispose();if(this.showAxisReferenceLines&&this.interactionCount===0&&!this.invalid&&this.start!=null&&this.end!=null){this.overlay=this.overlays.addDistanceVector(this.start,this.end)}}async setCursor(t){var e,i;(e=this.stateMap.hoverCursor)===null||e===void 0?void 0:e.dispose();if(!this.isUserInteractingWithModel){this.stateMap.hoverCursor=await((i=this.viewer)===null||i===void 0?void 0:i.addCursor(t))}}computeElementPositions(){if(this.mode==="replace"){return this.computeReplaceElementPositions()}else{return this.computeEditOrViewElementPositions()}}computeEditOrViewElementPositions(){const t=this.model.getMeasurement();if(this.internalCamera!=null&&t!=null){return this.computeLineElementPositions(l.create(t))}else{return{}}}computeReplaceElementPositions(){if(this.internalCamera!=null){const t=this.model.getMeasurement();const e=t!=null?this.computeLineElementPositions(l.create(t)):{};const i=this.indicatorPt!=null?{indicatorPt:this.viewport.transformWorldToViewport(this.indicatorPt,this.internalCamera.projectionViewMatrix)}:{};return{...e,...i}}else{return{}}}computeLineElementPositions(t){if(this.internalCamera!=null){return E(t,this.interactingAnchor,{viewport:this.viewport,camera:this.internalCamera})}else{return{}}}updateCamera(){var t,e;this.internalCamera=this.camera||((e=(t=this.viewer)===null||t===void 0?void 0:t.frame)===null||e===void 0?void 0:e.scene.camera)}async updateDepthBuffer(){var t,e;this.stateMap.depthBuffer=await((e=(t=this.viewer)===null||t===void 0?void 0:t.frame)===null||e===void 0?void 0:e.depthBuffer())}updateViewport(){const t=k(this.hostEl);this.viewport=new g(t.width,t.height);this.elementBounds=t}updatePropsFromJson(){var t,e;this.start=R((t=this.startJson)!==null&&t!==void 0?t:this.start);this.end=R((e=this.endJson)!==null&&e!==void 0?e:this.end)}updateInteractionModel(){this.model.setMeasurementFromValues(this.start,this.end,!this.invalid)}invalidateState(){this.invalidateStateCounter=this.invalidateStateCounter+1}async addInteractionListeners(t){const e=await t.getInteractionTarget_DEPRECATED();if(this.mode==="replace"){e.addEventListener("pointermove",this.updateStartAnchor);e.addEventListener("pointerdown",this.newMeasurement);e.addEventListener("pointerleave",this.clearIndicator)}}async removeInteractionListeners(t){const e=await t.getInteractionTarget_DEPRECATED();e.removeEventListener("pointermove",this.updateStartAnchor);e.removeEventListener("pointerdown",this.newMeasurement);e.removeEventListener("pointerleave",this.clearIndicator)}handleEditAnchor(t){if(this.mode==="edit"||this.mode==="replace"){const e=this.createInteractionMoveHandler();const i=async t=>{var n;const s=this.getHitProvider();if(s!=null){window.removeEventListener("pointermove",e);window.removeEventListener("pointerup",i);const r=u(t,this.elementBounds);const a=this.snapPoint(r,t);await((n=this.interaction)===null||n===void 0?void 0:n.finish(a,s));this.updateMeasurementPropsFromModel();this.endEditing()}};return async n=>{await this.getStencilBuffer();if(n.button===0){this.beginEditing("edit",t);this.interaction=this.controller.editMeasurement(t);window.addEventListener("pointermove",e);window.addEventListener("pointerup",i)}}}}createInteractionMoveHandler(){return async t=>{var e;const i=this.getHitProvider();if(this.elementBounds!=null&&i!=null){t.preventDefault();await this.getStencilBuffer();const n=u(t,this.elementBounds);const s=this.snapPoint(n,t);(e=this.interaction)===null||e===void 0?void 0:e.update(s,i);this.updateMeasurementPropsFromModel()}}}async getStencilBuffer(){var t;const e=await((t=this.viewer)===null||t===void 0?void 0:t.stencilBuffer.latestAfterInteraction());this.stateMap.stencil=e}snapPoint(t,e){const i=this.getHitProvider();if(i!=null&&!e.shiftKey){const e=Math.max(0,this.snapDistance);return i.hitTester().snapToNearestPixel(t,e)}return t}formatDistance(t){const e=t!=null?this.measurementUnits.convertWorldValueToReal(t):undefined;if(this.labelFormatter!=null){return this.labelFormatter(e)}else{const t=this.measurementUnits.unit.abbreviatedName;return e==null?"---":`~${e.toFixed(this.fractionalDigits)} ${t}`}}beginEditing(t,e){if(this.interactionCount===0){this.interactingAnchor=e;this.editBegin.emit({type:t,anchor:e})}this.interactionCount=this.interactionCount+1}endEditing(){if(this.interactionCount===1){const t=this.model.getMeasurement();this.interactingAnchor="none";this.updateMeasurementModel();if(t!=null){this.editEnd.emit(t)}}this.interactionCount=this.interactionCount-1}updateMeasurementModel(){this.measurementModel.clearOutcome();if(!this.invalid&&this.start!=null&&this.end!=null){this.measurementModel.setOutcome({isApproximate:true,results:[f(this.start,this.end)]})}}getHitProvider(){if(this.hitProvider==null){const t=this.getHitTester();const e=this.viewer;if(e!=null&&t!=null){return{hitTester:()=>t,raycaster:async()=>(await e.scene()).raycaster()}}}else return this.hitProvider}getHitTester(){const{stencil:t,depthBuffer:e}=this.stateMap;if(e!=null){return new j(t,e,this.viewport,this.internalCamera)}}updateMeasurementPropsFromModel(){const t=this.model.getMeasurement();this.start=t===null||t===void 0?void 0:t.start;this.end=t===null||t===void 0?void 0:t.end;this.distance=t===null||t===void 0?void 0:t.distance;this.invalid=t!=null&&!t.valid}async updateIndicator(t){var e;const i=this.getHitProvider();const n=i==null||!this.controller.moveIndicator(t,i);if(n){(e=this.stateMap.hoverCursor)===null||e===void 0?void 0:e.dispose()}else{await this.setCursor(d)}}setDepthBuffers(){if(this.mode!=null&&this.viewer!=null&&this.viewer.depthBuffers==null){this.stateMap.shouldClearDepthBuffers=true;this.viewer.depthBuffers="final"}}resetDepthBuffers(){if(this.stateMap.shouldClearDepthBuffers&&this.viewer!=null){this.viewer.depthBuffers=undefined;this.stateMap.shouldClearDepthBuffers=undefined}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],units:[{handleUnitsChanged:1}],camera:[{handleCameraChanged:0}],mode:[{handleModeChanged:0}],start:[{handleStartChanged:0}],end:[{handleEndChanged:0}],invalid:[{handleInvalidChanged:0}]}}static get style(){return z()}},[1,"vertex-viewer-measurement-distance",{start:[1040],startJson:[1,"start-json"],end:[1040],endJson:[1,"end-json"],distance:[1026],showAxisReferenceLines:[4,"show-axis-reference-lines"],snapDistance:[2,"snap-distance"],units:[1],fractionalDigits:[2,"fractional-digits"],labelFormatter:[16],anchorLabelOffset:[2,"anchor-label-offset"],lineCapLength:[2,"line-cap-length"],mode:[513],interactingAnchor:[1537,"interacting-anchor"],invalid:[1540],camera:[16],hitProvider:[16],indicatorPt:[1040],viewer:[16],measurementModel:[16],viewport:[32],elementBounds:[32],interactionCount:[32],internalCamera:[32],invalidateStateCounter:[32],stateMap:[32],measurementUnits:[32],computeElementMetrics:[64]},undefined,{viewer:[{handleViewerChanged:0}],units:[{handleUnitsChanged:1}],camera:[{handleCameraChanged:0}],mode:[{handleModeChanged:0}],start:[{handleStartChanged:0}],end:[{handleEndChanged:0}],invalid:[{handleInvalidChanged:0}]}]);function R(t){return typeof t==="string"?a.fromJson(t):t}function W(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-measurement-distance","vertex-viewer-measurement-line","vertex-viewer-measurement-overlays"];t.forEach((t=>{switch(t){case"vertex-viewer-measurement-distance":if(!customElements.get(e(t))){customElements.define(e(t),F)}break;case"vertex-viewer-measurement-line":if(!customElements.get(e(t))){P()}break;case"vertex-viewer-measurement-overlays":if(!customElements.get(e(t))){C()}break}}))}W();const Z=F;const J=W;export{Z as VertexViewerMeasurementDistance,J as defineCustomElement};
+import{h as t,t as e,p as i,H as n,d as s,e as r}from"./p-Bb32XUUS.js";import{v as a,a as o,p as h,l}from"./p-2UsvOTHJ.js";import{m as d}from"./p-DxMDDbmh.js";import{b as c,g as u}from"./p-CPROw2BU.js";import"./p-BCuMPvZO.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-5kcpg4MZ.js";import{o as m,D as v}from"./p-BjvjKoy7.js";import{M as p}from"./p-BY3lpCm6.js";import{M as w}from"./p-DyL2wWm6.js";import{m as f}from"./p-_qi2VkC2.js";import{V as g}from"./p-CeZe0Qql.js";import{E as b,m as y}from"./p-CDM7zNn0.js";import{d as C,g as E}from"./p-CTi-0-dI.js";import{c as P}from"./p-C6gMOKYg.js";import{d as M}from"./p-BZDn1Vuv.js";const x=16;const D=10;function k(t){return t.getBoundingClientRect()}class j{constructor(t,e,i,n){this.stencil=t;this.depthBuffer=e;this.viewport=i;this.camera=n}hitTest(t){const e=this.viewport.transformPointToFrame(t,this.depthBuffer);if(this.stencil!=null){const i=this.viewport.transformPointToFrame(t,this.stencil);return this.stencil.hitTest(i)||this.depthBuffer.hitTest(e)}else{return this.depthBuffer.hitTest(e)}}snapToNearestPixel(t,e){if(this.stencil!=null){const i=this.viewport.transformPointToFrame(t,this.stencil);const n=this.stencil.snapToNearestPixel(i,e);return this.viewport.transformPointToViewport(n,this.stencil)}else{return t}}transformPointToWorld(t,{ignoreHitTest:e=false}={}){const i=this.pickDepthBuffer(t);if(i!=null){return this.viewport.transformPointToWorldSpace(t,i)}else if(e){return this.viewport.transformPointToWorldSpace(t,this.depthBuffer)}}pickDepthBuffer(t){if(this.stencil!=null){const e=this.viewport.transformPointToFrame(t,this.stencil);if(this.stencil.hitTest(e)){return this.stencil.depthBuffer}}const e=this.viewport.transformPointToFrame(t,this.depthBuffer);return this.depthBuffer.hitTest(e)?this.depthBuffer:undefined}}class I{constructor(t){this.model=t}newMeasurement(t,e){const i=e.hitTester().transformPointToWorld(t);return i!=null?new L(t,i,this.model):undefined}editMeasurement(t){const e=this.model.getMeasurement();if(e==null){throw new Error("Cannot edit measurement. Measurement is empty.")}return t==="start"?new B(e,this.model):new O(e,this.model)}clearIndicator(){this.model.setIndicator(undefined)}moveIndicator(t,e){const i=e.hitTester().transformPointToWorld(t);this.model.setIndicator(i);return i!=null}}class A{constructor(){this.measurementChanged=new b;this.indicatorChanged=new b}static empty(){return new A}getMeasurement(){return this.measurement}setMeasurement(t){if(this.measurement!==t){this.measurement=t;this.measurementChanged.emit(t)}}setMeasurementFromValues(t,e,i){if(t!=null&&e!=null){const n=i?V(t,e):H(t,e);this.setMeasurement(n)}else{this.setMeasurement(undefined)}}onMeasurementChanged(t){return this.measurementChanged.on(t)}getIndicator(){return this.indicator}setIndicator(t){if(this.indicator!==t){this.indicator=t;this.indicatorChanged.emit(t)}}onIndicatorChanged(t){return this.indicatorChanged.on(t)}}class L{constructor(t,e,i){this.pt=t;this.world=e;this.model=i;this.hitWorldValid=true;this.preventUpdate=false}fetchStartIfMissing(t){if(this.pendingStart==null){this.pendingStart=this.fetchStart(t)}}async fetchStart(t){const e=await t.raycaster();const i=await T(e,this.pt);if(i==null){const e=t.hitTester().transformPointToWorld(this.pt);this.hitWorld=e;this.hitWorldValid=false}else{this.hitWorld=i;this.hitWorldValid=true}}update(t,e){var i;if(!this.preventUpdate){this.fetchStartIfMissing(e);const n=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});const s=e.hitTester().hitTest(t);const r=(i=this.hitWorld)!==null&&i!==void 0?i:this.world;if(n==null){throw new Error("Cannot update new measurement interaction. End point is empty.")}else if(!this.hitWorldValid||!s){this.model.setIndicator(n);this.setMeasurement(H(r,n))}else{this.model.setIndicator(n);this.setMeasurement(V(r,n))}}}async finish(t,e){var i;this.preventUpdate=true;this.fetchStartIfMissing(e);await this.pendingStart;this.model.setIndicator(undefined);const n=await e.raycaster();const s=await T(n,t);const r=(i=this.hitWorld)!==null&&i!==void 0?i:this.world;this.preventUpdate=false;if(s==null){const i=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});if(i==null){throw new Error("Cannot complete new measurement interaction. End point is empty.")}return this.setMeasurement(H(r,i))}else if(!this.hitWorldValid){return this.setMeasurement(H(r,s))}else{return this.setMeasurement(V(r,s))}}setMeasurement(t){this.model.setMeasurement(t);return t}}class S{constructor(t,e){this.measurement=t;this.model=e}update(t,e){const i=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});const n=e.hitTester().hitTest(t);if(i==null){throw new Error("Cannot update new measurement interaction. End point is empty.")}else if(!n){this.model.setIndicator(i);this.setMeasurement(this.getInvalidMeasurement(i))}else{this.model.setIndicator(i);this.setMeasurement(this.getValidMeasurement(i))}}async finish(t,e){const i=await e.raycaster();const n=await T(i,t);this.model.setIndicator(undefined);if(n==null){const i=e.hitTester().transformPointToWorld(t,{ignoreHitTest:true});if(i==null){throw new Error("Cannot complete edit measurement interaction. End point is empty.")}return this.setMeasurement(this.getInvalidMeasurement(i))}else{return this.setMeasurement(this.getValidMeasurement(n))}}setMeasurement(t){this.model.setMeasurement(t);return t}}class B extends S{constructor(t,e){super(t,e)}getInvalidMeasurement(t){return H(t,this.measurement.end)}getValidMeasurement(t){return V(t,this.measurement.end)}}class O extends S{constructor(t,e){super(t,e)}getInvalidMeasurement(t){return H(this.measurement.start,t)}getValidMeasurement(t){return V(this.measurement.start,t)}}async function T(t,e){var i;const n=await t.hitItems(e);const[s]=(i=n===null||n===void 0?void 0:n.hits)!==null&&i!==void 0?i:[];if((s===null||s===void 0?void 0:s.hitPoint)!=null){const t=m(s.hitPoint);if(y.isInvalid(t)){throw new Error(`Invalid hit response [${t.errors.join(",")}]`)}return t}else return undefined}function V(t,e){return{start:t,end:e,distance:a.distance(t,e),valid:true}}function H(t,e){return{start:t,end:e,valid:false}}const U=({startPt:e,endPt:i,centerPt:n,indicatorPt:s,distance:r,anchorLabelOffset:a,lineCapLength:l,linePointerEvents:d,hideStartAnchor:u,hideEndAnchor:m,onStartAnchorPointerDown:v,onEndAnchorPointerDown:p})=>{const w=e!=null&&i!=null?o.fromPoints(e,i):undefined;const f=w!=null&&e!=null&&a!=null?h.add(e,h.polar(-a,w)):undefined;const g=w!=null&&i!=null&&a!=null?h.add(i,h.polar(a,w)):undefined;return t("div",null,e!=null&&i!=null&&t("vertex-viewer-measurement-line",{class:P("line",{"hide-start-line-cap":u,"hide-end-line-cap":m}),start:e,end:i,capLength:l,pointerEvents:d}),!u&&e!=null&&t("div",{id:"start-anchor",class:"anchor anchor-start",style:{transform:c(e)},onPointerDown:v},t("slot",{name:"start-anchor"},t("div",{class:"anchor-placeholder"}))),!u&&f&&t("div",{class:"anchor-label anchor-label-start",style:{transform:c(f)}},t("slot",{name:"start-label"})),!m&&i!=null&&t("div",{id:"end-anchor",class:"anchor anchor-end",style:{transform:c(i)},onPointerDown:p},t("slot",{name:"end-anchor"},t("div",{class:"anchor-placeholder"}))),!m&&g&&t("div",{class:"anchor-label anchor-label-end",style:{transform:c(g)}},t("slot",{name:"end-label"})),n!=null&&t("div",{id:"label",class:"distance-label",style:{transform:c(n)}},r),s!=null&&t("div",{class:"indicator",style:{transform:c(s)}},t("slot",{name:"indicator"},t("div",{class:"indicator-placeholder"}))))};const z=()=>`:host{--viewer-measurement-distance-accent-color:var(--neutral-900);--viewer-measurement-distance-contrast-color:var(--white);--viewer-measurement-distance-invalid-accent-color:var(--red-600);--viewer-measurement-distance-invalid-contrast-color:var(--white);--viewer-measurement-distance-line-stroke-width:1.25px;--viewer-measurement-distance-line-fill-width:2px;--viewer-measurement-distance-distance-border:1px solid     var(--viewer-measurement-distance-accent-color);--viewer-measurement-distance-distance-border-radius:0.25rem;--viewer-measurement-distance-distance-padding:0.375rem 0.5rem;color:var(--viewer-measurement-distance-accent-color);font-size:0.75rem;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}:host([invalid]:not([invalid='false'])){--viewer-measurement-distance-accent-color:var(     --viewer-measurement-distance-invalid-accent-color   ) !important;--viewer-measurement-distance-contrast-color:var(     --viewer-measurement-distance-invalid-contrast-color   ) !important}.line{--viewer-measurement-line-stroke:var(     --viewer-measurement-distance-contrast-color   );--viewer-measurement-line-stroke-opacity:0.75;--viewer-measurement-line-stroke-width:var(     --viewer-measurement-distance-line-stroke-width   );--viewer-measurement-line-fill:var(     --viewer-measurement-distance-accent-color   );--viewer-measurement-line-fill-width:var(     --viewer-measurement-distance-line-fill-width   );position:absolute;width:100%;height:100%}.anchor{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;pointer-events:auto}:host([interacting-anchor='start']) .anchor-start,:host([interacting-anchor='start']) .anchor-label-start{visibility:hidden}.hide-start-line-cap,:host([interacting-anchor='start']) .line{--viewer-measurement-line-start-cap-visibility:hidden}:host([interacting-anchor='end']) .anchor-end,:host([interacting-anchor='end']) .anchor-label-end{visibility:hidden}.hide-end-line-cap,:host([interacting-anchor='end']) .line{--viewer-measurement-line-end-cap-visibility:hidden}.anchor-label{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;pointer-events:auto}:host(:not([mode=''])){cursor:inherit}:host(:not([mode=''])) .anchor{cursor:move}:host([mode='']) .anchor{visibility:hidden}.anchor-placeholder{background:var(--viewer-measurement-distance-contrast-color);width:12px;height:12px;border-radius:50%;box-sizing:border-box}:host(:not([mode=''])) .anchor-placeholder{border:2px solid var(--viewer-measurement-distance-accent-color);background:var(--viewer-measurement-distance-contrast-color)}:host([mode='']) .distance-label{color:var(--viewer-measurement-distance-contrast-color);background:var(--viewer-measurement-distance-accent-color)}.distance-label{position:absolute;background:var(--viewer-measurement-distance-contrast-color);border:var(--viewer-measurement-distance-distance-border);border-radius:var(--viewer-measurement-distance-distance-border-radius);padding:var(--viewer-measurement-distance-distance-padding);pointer-events:auto}.indicator{position:absolute}.indicator-placeholder{background:var(--viewer-measurement-distance-accent-color);border:1px solid var(--viewer-measurement-distance-contrast-color);width:6px;height:6px;border-radius:50%;box-sizing:border-box}`;const F=3;const R=i(class e extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.editBegin=s(this,"editBegin");this.editEnd=s(this,"editEnd");this.showAxisReferenceLines=false;this.snapDistance=x;this.units="millimeters";this.fractionalDigits=2;this.anchorLabelOffset=20;this.lineCapLength=D;this.mode="";this.interactingAnchor="none";this.invalid=false;this.measurementModel=new p;this.viewport=new g(0,0);this.interactionCount=0;this.invalidateStateCounter=0;this.stateMap={};this.measurementUnits=new v(this.units);this.model=A.empty();this.controller=new I(this.model);this.overlays=new w;this.isUserInteractingWithModel=false;this.handleFrameDrawn=()=>{this.invalidateState()};this.clearIndicator=()=>{this.controller.clearIndicator()};this.updateStartAnchor=async t=>{await this.getStencilBuffer();if(this.interactionCount===0){const e=u(t,this.elementBounds);const i=this.snapPoint(e,t);await this.updateIndicator(i)}};this.newMeasurement=t=>{if(this.interactionCount===0&&t.button===0){const e=t=>{const e=()=>{window.removeEventListener("pointerup",i);window.removeEventListener("pointermove",n)};const i=async()=>{e();t()};const n=t=>{if(t.buttons>0){e()}};window.addEventListener("pointermove",n);window.addEventListener("pointerup",i)};const i=t=>{let e=h.create(0,0);const i=i=>{const n=h.distance(e,u(i,this.elementBounds));if(n>=F){t()}};const n=()=>{window.removeEventListener("pointermove",i);window.removeEventListener("pointerup",s)};const s=()=>n();const r=t=>{e=u(t,this.elementBounds);window.addEventListener("pointermove",i);window.addEventListener("pointerup",s)};window.addEventListener("pointerdown",r);return{dispose:()=>window.removeEventListener("pointerdown",r)}};const n=()=>{const t=i((()=>{var t;this.isUserInteractingWithModel=true;(t=this.stateMap.hoverCursor)===null||t===void 0?void 0:t.dispose()}));const e=()=>{window.removeEventListener("pointermove",n);window.removeEventListener("pointerup",s);t.dispose()};const n=this.createInteractionMoveHandler();const s=async t=>{var i;if(t.button===0){if(this.isUserInteractingWithModel){this.isUserInteractingWithModel=false}else{const n=this.getHitProvider();if(n!=null){const s=u(t,this.elementBounds);const r=this.snapPoint(s,t);await((i=this.interaction)===null||i===void 0?void 0:i.finish(r,n));e();this.updateMeasurementPropsFromModel();this.endEditing()}}}};this.beginEditing("replace","end");this.newInteractionHandler={dispose:e};window.addEventListener("pointermove",n);window.addEventListener("pointerup",s)};const s=this.getHitProvider();if(s!=null){const i=u(t,this.elementBounds);const r=this.snapPoint(i,t);this.interaction=this.controller.newMeasurement(r,s);if(this.interaction!=null){e(n)}}}}}async computeElementMetrics(){var t,e,i;const n=(t=this.hostEl.shadowRoot)===null||t===void 0?void 0:t.getElementById("start-anchor");const s=(e=this.hostEl.shadowRoot)===null||e===void 0?void 0:e.getElementById("end-anchor");const r=(i=this.hostEl.shadowRoot)===null||i===void 0?void 0:i.getElementById("label");if(n!=null&&s!=null&&r!=null){return{startAnchor:n.getBoundingClientRect(),endAnchor:s.getBoundingClientRect(),label:r.getBoundingClientRect()}}else{return undefined}}connectedCallback(){this.setDepthBuffers()}disconnectedCallback(){var t,e;(t=this.stateMap.hoverCursor)===null||t===void 0?void 0:t.dispose();(e=this.newInteractionHandler)===null||e===void 0?void 0:e.dispose();this.resetDepthBuffers()}async componentWillLoad(){this.updatePropsFromJson();this.model.setMeasurementFromValues(this.start,this.end,!this.invalid);await this.getStencilBuffer();this.updateViewport();this.setDepthBuffers();await this.handleViewerChanged(this.viewer);await this.handleModeChanged();await this.computePropsAndState();this.model.onIndicatorChanged((t=>{this.indicatorPt=t}))}componentDidLoad(){const t=new ResizeObserver((()=>this.updateViewport()));t.observe(this.hostEl)}async componentWillUpdate(){await this.computePropsAndState()}render(){return t(r,{key:"58113224139c37a54bf9329ed27e6a8983d5cccd"},this.showAxisReferenceLines&&t("vertex-viewer-measurement-overlays",{key:"d2166c4a965761f472f5b3323844d82980baa29f",measurementOverlays:this.overlays,viewer:this.viewer}),this.renderMeasurement())}renderMeasurement(){const e=this.computeElementPositions();const{startPt:i,endPt:n,labelPt:s,indicatorPt:r,hideStart:a,hideEnd:o}=e;const h=this.formatDistance(this.distance);if(this.mode==="edit"||this.mode==="replace"){return t(U,{startPt:i,endPt:n,centerPt:s,indicatorPt:r,distance:h,anchorLabelOffset:this.anchorLabelOffset,lineCapLength:this.lineCapLength,hideStartAnchor:a,hideEndAnchor:o,onStartAnchorPointerDown:this.handleEditAnchor("start"),onEndAnchorPointerDown:this.handleEditAnchor("end")})}else{return t(U,{startPt:i,endPt:n,centerPt:s,indicatorPt:this.indicatorPt,distance:h,hideStartAnchor:a,hideEndAnchor:o,anchorLabelOffset:this.anchorLabelOffset,lineCapLength:this.lineCapLength,linePointerEvents:"painted"})}}async handleViewerChanged(t,e){if(e!=null){e.removeEventListener("frameDrawn",this.handleFrameDrawn);await this.removeInteractionListeners(e)}if(t!=null){t.addEventListener("frameDrawn",this.handleFrameDrawn);await this.addInteractionListeners(t)}}handleUnitsChanged(){this.measurementUnits=new v(this.units)}handleCameraChanged(){this.updateCamera()}async handleModeChanged(){var t;if(this.mode===""){(t=this.stateMap.hoverCursor)===null||t===void 0?void 0:t.dispose()}if(this.viewer!=null){await this.removeInteractionListeners(this.viewer);await this.addInteractionListeners(this.viewer)}}handleStartChanged(){this.updateInteractionModel()}handleEndChanged(){this.updateInteractionModel()}handleInvalidChanged(){this.updateInteractionModel()}async computePropsAndState(){this.updateCamera();await this.updateDepthBuffer();this.updateMeasurementPropsFromModel();this.updateOverlays()}updateOverlays(){var t;(t=this.overlay)===null||t===void 0?void 0:t.dispose();if(this.showAxisReferenceLines&&this.interactionCount===0&&!this.invalid&&this.start!=null&&this.end!=null){this.overlay=this.overlays.addDistanceVector(this.start,this.end)}}async setCursor(t){var e,i;(e=this.stateMap.hoverCursor)===null||e===void 0?void 0:e.dispose();if(!this.isUserInteractingWithModel){this.stateMap.hoverCursor=await((i=this.viewer)===null||i===void 0?void 0:i.addCursor(t))}}computeElementPositions(){if(this.mode==="replace"){return this.computeReplaceElementPositions()}else{return this.computeEditOrViewElementPositions()}}computeEditOrViewElementPositions(){const t=this.model.getMeasurement();if(this.internalCamera!=null&&t!=null){return this.computeLineElementPositions(l.create(t))}else{return{}}}computeReplaceElementPositions(){if(this.internalCamera!=null){const t=this.model.getMeasurement();const e=t!=null?this.computeLineElementPositions(l.create(t)):{};const i=this.indicatorPt!=null?{indicatorPt:this.viewport.transformWorldToViewport(this.indicatorPt,this.internalCamera.projectionViewMatrix)}:{};return{...e,...i}}else{return{}}}computeLineElementPositions(t){if(this.internalCamera!=null){return E(t,this.interactingAnchor,{viewport:this.viewport,camera:this.internalCamera})}else{return{}}}updateCamera(){var t,e;this.internalCamera=this.camera||((e=(t=this.viewer)===null||t===void 0?void 0:t.frame)===null||e===void 0?void 0:e.scene.camera)}async updateDepthBuffer(){var t,e;this.stateMap.depthBuffer=await((e=(t=this.viewer)===null||t===void 0?void 0:t.frame)===null||e===void 0?void 0:e.depthBuffer())}updateViewport(){const t=k(this.hostEl);this.viewport=new g(t.width,t.height);this.elementBounds=t}updatePropsFromJson(){var t,e;this.start=J((t=this.startJson)!==null&&t!==void 0?t:this.start);this.end=J((e=this.endJson)!==null&&e!==void 0?e:this.end)}updateInteractionModel(){this.model.setMeasurementFromValues(this.start,this.end,!this.invalid)}invalidateState(){this.invalidateStateCounter=this.invalidateStateCounter+1}async addInteractionListeners(t){const e=await t.getInteractionTarget_DEPRECATED();if(this.mode==="replace"){e.addEventListener("pointermove",this.updateStartAnchor);e.addEventListener("pointerdown",this.newMeasurement);e.addEventListener("pointerleave",this.clearIndicator)}}async removeInteractionListeners(t){const e=await t.getInteractionTarget_DEPRECATED();e.removeEventListener("pointermove",this.updateStartAnchor);e.removeEventListener("pointerdown",this.newMeasurement);e.removeEventListener("pointerleave",this.clearIndicator)}handleEditAnchor(t){if(this.mode==="edit"||this.mode==="replace"){const e=this.createInteractionMoveHandler();const i=async t=>{var n;const s=this.getHitProvider();if(s!=null){window.removeEventListener("pointermove",e);window.removeEventListener("pointerup",i);const r=u(t,this.elementBounds);const a=this.snapPoint(r,t);await((n=this.interaction)===null||n===void 0?void 0:n.finish(a,s));this.updateMeasurementPropsFromModel();this.endEditing()}};return async n=>{await this.getStencilBuffer();if(n.button===0){this.beginEditing("edit",t);this.interaction=this.controller.editMeasurement(t);window.addEventListener("pointermove",e);window.addEventListener("pointerup",i)}}}}createInteractionMoveHandler(){return async t=>{var e;const i=this.getHitProvider();if(this.elementBounds!=null&&i!=null){t.preventDefault();await this.getStencilBuffer();const n=u(t,this.elementBounds);const s=this.snapPoint(n,t);(e=this.interaction)===null||e===void 0?void 0:e.update(s,i);this.updateMeasurementPropsFromModel()}}}async getStencilBuffer(){var t;const e=await((t=this.viewer)===null||t===void 0?void 0:t.stencilBuffer.latestAfterInteraction());this.stateMap.stencil=e}snapPoint(t,e){const i=this.getHitProvider();if(i!=null&&!e.shiftKey){const e=Math.max(0,this.snapDistance);return i.hitTester().snapToNearestPixel(t,e)}return t}formatDistance(t){const e=t!=null?this.measurementUnits.convertWorldValueToReal(t):undefined;if(this.labelFormatter!=null){return this.labelFormatter(e)}else{const t=this.measurementUnits.unit.abbreviatedName;return e==null?"---":`~${e.toFixed(this.fractionalDigits)} ${t}`}}beginEditing(t,e){if(this.interactionCount===0){this.interactingAnchor=e;this.editBegin.emit({type:t,anchor:e})}this.interactionCount=this.interactionCount+1}endEditing(){if(this.interactionCount===1){const t=this.model.getMeasurement();this.interactingAnchor="none";this.updateMeasurementModel();if(t!=null){this.editEnd.emit(t)}}this.interactionCount=this.interactionCount-1}updateMeasurementModel(){this.measurementModel.clearOutcome();if(!this.invalid&&this.start!=null&&this.end!=null){this.measurementModel.setOutcome({isApproximate:true,results:[f(this.start,this.end)]})}}getHitProvider(){if(this.hitProvider==null){const t=this.getHitTester();const e=this.viewer;if(e!=null&&t!=null){return{hitTester:()=>t,raycaster:async()=>(await e.scene()).raycaster()}}}else return this.hitProvider}getHitTester(){const{stencil:t,depthBuffer:e}=this.stateMap;if(e!=null){return new j(t,e,this.viewport,this.internalCamera)}}updateMeasurementPropsFromModel(){const t=this.model.getMeasurement();this.start=t===null||t===void 0?void 0:t.start;this.end=t===null||t===void 0?void 0:t.end;this.distance=t===null||t===void 0?void 0:t.distance;this.invalid=t!=null&&!t.valid}async updateIndicator(t){var e;const i=this.getHitProvider();const n=i==null||!this.controller.moveIndicator(t,i);if(n){(e=this.stateMap.hoverCursor)===null||e===void 0?void 0:e.dispose()}else{await this.setCursor(d)}}setDepthBuffers(){if(this.mode!=null&&this.viewer!=null&&this.viewer.depthBuffers==null){this.stateMap.shouldClearDepthBuffers=true;this.viewer.depthBuffers="final"}}resetDepthBuffers(){if(this.stateMap.shouldClearDepthBuffers&&this.viewer!=null){this.viewer.depthBuffers=undefined;this.stateMap.shouldClearDepthBuffers=undefined}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],units:[{handleUnitsChanged:1}],camera:[{handleCameraChanged:0}],mode:[{handleModeChanged:0}],start:[{handleStartChanged:0}],end:[{handleEndChanged:0}],invalid:[{handleInvalidChanged:0}]}}static get style(){return z()}},[1,"vertex-viewer-measurement-distance",{start:[1040],startJson:[1,"start-json"],end:[1040],endJson:[1,"end-json"],distance:[1026],showAxisReferenceLines:[4,"show-axis-reference-lines"],snapDistance:[2,"snap-distance"],units:[1],fractionalDigits:[2,"fractional-digits"],labelFormatter:[16],anchorLabelOffset:[2,"anchor-label-offset"],lineCapLength:[2,"line-cap-length"],mode:[513],interactingAnchor:[1537,"interacting-anchor"],invalid:[1540],camera:[16],hitProvider:[16],indicatorPt:[1040],viewer:[16],measurementModel:[16],viewport:[32],elementBounds:[32],interactionCount:[32],internalCamera:[32],invalidateStateCounter:[32],stateMap:[32],measurementUnits:[32],computeElementMetrics:[64]},undefined,{viewer:[{handleViewerChanged:0}],units:[{handleUnitsChanged:1}],camera:[{handleCameraChanged:0}],mode:[{handleModeChanged:0}],start:[{handleStartChanged:0}],end:[{handleEndChanged:0}],invalid:[{handleInvalidChanged:0}]}]);function J(t){return typeof t==="string"?a.fromJson(t):t}function W(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-measurement-distance","vertex-viewer-measurement-line","vertex-viewer-measurement-overlays"];t.forEach((t=>{switch(t){case"vertex-viewer-measurement-distance":if(!customElements.get(e(t))){customElements.define(e(t),R)}break;case"vertex-viewer-measurement-line":if(!customElements.get(e(t))){M()}break;case"vertex-viewer-measurement-overlays":if(!customElements.get(e(t))){C()}break}}))}W();const Z=R;const K=W;export{Z as VertexViewerMeasurementDistance,K as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-measurement-distance.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-oDn1DcWj.js";const t=o;const c=s;export{t as VertexViewerMeasurementLine,c as defineCustomElement};
+import{V as o,d as s}from"./p-BZDn1Vuv.js";const t=o;const n=s;export{t as VertexViewerMeasurementLine,n as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-measurement-line.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-DnVcQAR9.js";const t=o;const c=s;export{t as VertexViewerMeasurementOverlays,c as defineCustomElement};
+import{V as o,d as s}from"./p-CTi-0-dI.js";const t=o;const p=s;export{t as VertexViewerMeasurementOverlays,p as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-measurement-overlays.js.map