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

package/dist/components/{p-DTWAiCst.js → p-BYYwcm7k.js}

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as o}from"./p-DmsAWRoU.js";import{g as n}from"./p-Tvs4yxd5.js";import{c as t}from"./p-C6gMOKYg.js";import{R as r,r as a}from"./p-Dru_6caB.js";const e=({bounds:e,offset:d,onTopLeftAnchorPointerDown:i,onLeftAnchorPointerDown:s,onTopRightAnchorPointerDown:c,onRightAnchorPointerDown:h,onBottomLeftAnchorPointerDown:b,onBottomAnchorPointerDown:u,onBottomRightAnchorPointerDown:m,onTopAnchorPointerDown:f,onCenterAnchorPointerDown:p})=>{const l=n.pad(e,6);const g=n.center(l);const D=d!=null?`translate(${d.x}px, ${d.y}px)`:undefined;return o("div",{class:"bounds-container"},o("div",{class:"bounds-outline",style:{top:`${l.y}px`,left:`${l.x}px`,width:`${l.width}px`,height:`${l.height}px`,transform:D}}),o(r,{transform:D,id:"bounding-box-2d-top-left-anchor",name:"top-left-anchor",point:a(l,"top-left"),onPointerDown:i},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-left-anchor",name:"left-anchor",point:a(l,"left"),onPointerDown:s},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-top-right-anchor",name:"top-right-anchor",point:a(l,"top-right"),onPointerDown:c},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-right-anchor",name:"right-anchor",point:a(l,"right"),onPointerDown:h},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-bottom-left-anchor",name:"bottom-left-anchor",point:a(l,"bottom-left"),onPointerDown:b},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-bottom-anchor",name:"bottom-anchor",point:a(l,"bottom"),onPointerDown:u},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-bottom-right-anchor",name:"bottom-right-anchor",point:a(l,"bottom-right"),onPointerDown:m},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-top-anchor",name:"top-anchor",point:a(l,"top"),onPointerDown:f},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-center-anchor",name:"center-anchor",point:g,onPointerDown:p},o("div",{class:t("bounds-default-anchor","bounds-center-anchor")})))};export{e as B};
-//# sourceMappingURL=p-DTWAiCst.js.map
+import{h as o}from"./p-DmsAWRoU.js";import{g as n}from"./p-Tvs4yxd5.js";import{c as t}from"./p-C6gMOKYg.js";import{R as r,r as a}from"./p-DXGQW235.js";const e=({bounds:e,offset:d,onTopLeftAnchorPointerDown:i,onLeftAnchorPointerDown:s,onTopRightAnchorPointerDown:c,onRightAnchorPointerDown:h,onBottomLeftAnchorPointerDown:b,onBottomAnchorPointerDown:u,onBottomRightAnchorPointerDown:m,onTopAnchorPointerDown:f,onCenterAnchorPointerDown:p})=>{const l=n.pad(e,6);const g=n.center(l);const D=d!=null?`translate(${d.x}px, ${d.y}px)`:undefined;return o("div",{class:"bounds-container"},o("div",{class:"bounds-outline",style:{top:`${l.y}px`,left:`${l.x}px`,width:`${l.width}px`,height:`${l.height}px`,transform:D}}),o(r,{transform:D,id:"bounding-box-2d-top-left-anchor",name:"top-left-anchor",point:a(l,"top-left"),onPointerDown:i},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-left-anchor",name:"left-anchor",point:a(l,"left"),onPointerDown:s},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-top-right-anchor",name:"top-right-anchor",point:a(l,"top-right"),onPointerDown:c},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-right-anchor",name:"right-anchor",point:a(l,"right"),onPointerDown:h},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-bottom-left-anchor",name:"bottom-left-anchor",point:a(l,"bottom-left"),onPointerDown:b},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-bottom-anchor",name:"bottom-anchor",point:a(l,"bottom"),onPointerDown:u},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-bottom-right-anchor",name:"bottom-right-anchor",point:a(l,"bottom-right"),onPointerDown:m},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-top-anchor",name:"top-anchor",point:a(l,"top"),onPointerDown:f},o("div",{class:t("bounds-default-anchor","bounds-edge-anchor")})),o(r,{transform:D,id:"bounding-box-2d-center-anchor",name:"center-anchor",point:g,onPointerDown:p},o("div",{class:t("bounds-default-anchor","bounds-center-anchor")})))};export{e as B};
+//# sourceMappingURL=p-BYYwcm7k.js.map

package/dist/components/{p-C2vaYcRL.js → p-CCg_OPx0.js}

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{t as e,p as t,H as o,d as r,h as i,e as s}from"./p-DmsAWRoU.js";import{g as n,a as h}from"./p-BSYTUXcE.js";import{w as a}from"./p-Ss6piqGD.js";import{g as d}from"./p-Bg-uS9BH.js";import{M as u,t as l,l as c,o as p,d as m,q as f,m as v,n as w,S as b,c as g}from"./p-Dru_6caB.js";import{B as k}from"./p-DTWAiCst.js";import{p as P,g as x}from"./p-Tvs4yxd5.js";class D extends u{constructor(e,t,o){super();this.markupEl=e;this.interactionBegin=t;this.interactionEnd=o;this.anchor="bottom-right";this.handleResizeInteractionMove=e=>{if(this.resizeStartPosition!=null&&this.elementBounds!=null&&this.resizeBounds!=null&&this.resizePoints!=null){const t=l(n(e,this.elementBounds),this.elementBounds);const o=c(this.resizeBounds,this.resizeStartPosition,t,this.anchor,e.shiftKey);this.markupEl.points=p(this.resizePoints,this.resizeBounds,o);this.markupEl.bounds=o}};this.handleResizeInteractionEnd=e=>{window.removeEventListener("pointermove",this.handleResizeInteractionMove);window.removeEventListener("pointerup",this.handleResizeInteractionEnd);this.resizeBounds=undefined;const t=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:t})}}editAnchor(e,t){if(this.markupEl.mode==="edit"&&this.elementBounds!=null){this.resizeBounds=this.markupEl.bounds;this.resizePoints=this.markupEl.points;this.anchor=e;this.resizeStartPosition=l(n(t,this.elementBounds),this.elementBounds);window.addEventListener("pointermove",this.handleResizeInteractionMove);window.addEventListener("pointerup",this.handleResizeInteractionEnd)}}startInteraction(e){this.handleInteractionAttempt(e)}computeBoundingRect(){return d(this.markupEl)}handleInteractionAttempt(e){var t;if(this.markupEl.mode!==""&&this.pointerId==null&&this.elementBounds!=null){this.pointerId=e.pointerId;const o=n(e,this.elementBounds);const r=l(o,this.elementBounds);this.updateMinAndMax(r);this.markupEl.points=(t=this.markupEl.points)!==null&&t!==void 0?t:[r];this.interactionBegin.emit();this.acceptInteraction()}}handleInteractionMove(e){if(this.pointerId===e.pointerId&&this.markupEl.points!=null&&this.elementBounds!=null){const t=n(e,this.elementBounds);const o=l(t,this.elementBounds);this.updateMinAndMax(o);this.markupEl.points=[...this.markupEl.points,o]}}handleInteractionEnd(e){if(this.pointerId===e.pointerId){if(this.markupEl.mode!==""&&this.markupEl.points!=null&&this.markupEl.points.length>2&&this.elementBounds!=null){const t=n(e,this.elementBounds);const o=l(t,this.elementBounds);this.updateMinAndMax(o);this.markupEl.points=[...this.markupEl.points,o];const r=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:r})}else{this.markupEl.points=undefined}this.min=undefined;this.max=undefined;this.pointerId=undefined}}updateMinAndMax(e){this.min=this.min!=null?P.create(Math.min(this.min.x,e.x),Math.min(this.min.y,e.y)):e;this.max=this.max!=null?P.create(Math.max(this.max.x,e.x),Math.max(this.max.y,e.y)):e;this.markupEl.bounds=x.create(this.min.x,this.min.y,this.max.x-this.min.x,this.max.y-this.min.y)}}const y=()=>`:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-freeform-stroke-color:var(--red-800);--viewer-markup-freeform-stroke-width:4px;--viewer-markup-freeform-line-join:round;--viewer-markup-freeform-line-cap:round;--viewer-markup-freeform-bounds-outline-border-color:var(--blue-400);--viewer-markup-freeform-bounds-outline-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-freeform-bounds-edge-anchor-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-background-color:white;--viewer-markup-freeform-bounds-center-anchor-border-color:white;--viewer-markup-freeform-bounds-center-anchor-border-width:1px;--viewer-markup-freeform-bounds-center-anchor-background-color:var(     --blue-400   );--viewer-markup-freeform-bounds-anchor-width:9px;--viewer-markup-freeform-bounds-anchor-height:9px;--viewer-markup-freeform-scale:1}.svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.path{pointer-events:auto;cursor:default;stroke:var(--viewer-markup-freeform-stroke-color);stroke-width:calc(     var(--viewer-markup-freeform-stroke-width) *       var(--viewer-markup-freeform-scale)   );stroke-linejoin:var(--viewer-markup-freeform-line-join);stroke-linecap:var(--viewer-markup-freeform-line-cap)}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-freeform-bounds-outline-border-width);border-color:var(--viewer-markup-freeform-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-freeform-bounds-anchor-width);height:var(--viewer-markup-freeform-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-freeform-bounds-center-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-center-anchor-border-color);border-style:solid;background-color:var(     --viewer-markup-freeform-bounds-center-anchor-background-color   )}.bounds-edge-anchor{border-width:var(--viewer-markup-freeform-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-edge-anchor-border-color);border-style:solid;background-color:var(     --viewer-markup-freeform-bounds-edge-anchor-background-color   )}`;const A=t(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.interactionBegin=r(this,"interactionBegin");this.interactionEnd=r(this,"interactionEnd");this.viewRendered=r(this,"viewRendered");this.mode="";this.centeringBehavior="none";this.scale=1;this.screenPoints=[];this.interactionHandler=new D(this.hostEl,this.interactionBegin,this.interactionEnd);this.handleWindowPointerDown=e=>{if(m(e)){this.interactionHandler.startInteraction(e)}};this.handleTouchStart=e=>{e.preventDefault()}}componentWillLoad(){this.updateViewport();this.handleViewerChanged(this.viewer);this.updatePointsFromProps()}componentDidLoad(){const e=new ResizeObserver((()=>this.updateViewport()));e.observe(this.hostEl);if(this.mode==="create"){window.addEventListener("pointerdown",this.handleWindowPointerDown)}}componentDidRender(){if(this.mode===""){this.viewRendered.emit()}}disconnectedCallback(){this.dispose()}async dispose(){var e;(e=this.registeredInteraction)===null||e===void 0?void 0:e.dispose();this.registeredInteraction=undefined;window.removeEventListener("pointerdown",this.handleWindowPointerDown)}async handleViewerChanged(e){var t;(t=this.registeredInteraction)===null||t===void 0?void 0:t.dispose();this.registeredInteraction=undefined;if(e!=null){this.registeredInteraction=await e.registerInteractionHandler(this.interactionHandler)}}recomputePointsFromProps(){this.updatePointsFromProps()}handleScaleChange(){a((()=>{this.hostEl.style.setProperty("--viewer-markup-freeform-scale",this.scale.toString())}))}handleModeChange(){if(this.mode!=="create"){window.removeEventListener("pointerdown",this.handleWindowPointerDown)}}updateViewport(){var e;const t=d(this.hostEl);this.elementBounds=t;this.screenPoints=(e=this.convertPointsToScreen())!==null&&e!==void 0?e:this.screenPoints}updatePointsFromProps(){var e,t,o;this.points=(e=this.points)!==null&&e!==void 0?e:f(this.pointsJson);this.screenPoints=(t=this.convertPointsToScreen())!==null&&t!==void 0?t:[];this.bounds=(o=this.bounds)!==null&&o!==void 0?o:v(this.boundsJson)}render(){var e,t,o,r;if(this.screenPoints.length>0&&this.elementBounds!=null){const n=((t=(e=this.offset)===null||e===void 0?void 0:e.x)!==null&&t!==void 0?t:0)/h();const a=((r=(o=this.offset)===null||o===void 0?void 0:o.y)!==null&&r!==void 0?r:0)/h();return i(s,null,i("svg",{class:"svg",onTouchStart:this.handleTouchStart},i("defs",null,i(b,{id:"freeform-markup-shadow"})),i("g",{transform:`translate(${n} ${a})`,filter:"url(#freeform-markup-shadow)"},i("path",{class:"path",d:this.screenPoints.reduce(((e,t)=>`${e}L${t.x},${t.y}`),`M${this.screenPoints[0].x},${this.screenPoints[0].y}`),fill:"none"}))),this.mode==="edit"&&this.bounds!=null&&i(k,{bounds:w(this.bounds,this.elementBounds,this.originatingViewport,this.centeringBehavior,this.scale),offset:{x:n,y:a},onTopLeftAnchorPointerDown:e=>this.interactionHandler.editAnchor("top-left",e),onTopRightAnchorPointerDown:e=>this.interactionHandler.editAnchor("top-right",e),onTopAnchorPointerDown:e=>this.interactionHandler.editAnchor("top",e),onBottomLeftAnchorPointerDown:e=>this.interactionHandler.editAnchor("bottom-left",e),onBottomRightAnchorPointerDown:e=>this.interactionHandler.editAnchor("bottom-right",e),onBottomAnchorPointerDown:e=>this.interactionHandler.editAnchor("bottom",e),onLeftAnchorPointerDown:e=>this.interactionHandler.editAnchor("left",e),onRightAnchorPointerDown:e=>this.interactionHandler.editAnchor("right",e),onCenterAnchorPointerDown:e=>this.interactionHandler.editAnchor("center",e)}),this.mode==="create"&&i("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}else{return i(s,null,i("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}}convertPointsToScreen(){var e;const t=this.elementBounds;if(t!=null){return(e=this.points)===null||e===void 0?void 0:e.map((e=>g(e,t,this.originatingViewport,this.centeringBehavior,this.scale)))}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],originatingViewport:[{recomputePointsFromProps:0}],offset:[{recomputePointsFromProps:0}],scale:[{recomputePointsFromProps:0},{handleScaleChange:0}],bounds:[{recomputePointsFromProps:0}],points:[{recomputePointsFromProps:0}],mode:[{handleModeChange:0}]}}static get style(){return y()}},[1,"vertex-viewer-markup-freeform",{points:[1040],pointsJson:[1,"points"],bounds:[1040],boundsJson:[1,"bounds"],mode:[513],viewer:[16],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],elementBounds:[32],screenPoints:[32],dispose:[64]},undefined,{viewer:[{handleViewerChanged:0}],originatingViewport:[{recomputePointsFromProps:0}],offset:[{recomputePointsFromProps:0}],scale:[{recomputePointsFromProps:0},{handleScaleChange:0}],bounds:[{recomputePointsFromProps:0}],points:[{recomputePointsFromProps:0}],mode:[{handleModeChange:0}]}]);function C(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-markup-freeform"];t.forEach((t=>{switch(t){case"vertex-viewer-markup-freeform":if(!customElements.get(e(t))){customElements.define(e(t),A)}break}}))}C();export{A as V,C as d};
-//# sourceMappingURL=p-C2vaYcRL.js.map
+import{t as e,p as t,H as o,d as r,h as i,e as s}from"./p-DmsAWRoU.js";import{g as n,a as h}from"./p-BSYTUXcE.js";import{w as a}from"./p-Ss6piqGD.js";import{g as d}from"./p-Bg-uS9BH.js";import{M as u,t as l,l as c,o as p,d as m,q as f,m as v,n as w,S as b,c as g}from"./p-DXGQW235.js";import{B as k}from"./p-BYYwcm7k.js";import{p as P,g as x}from"./p-Tvs4yxd5.js";class y extends u{constructor(e,t,o){super();this.markupEl=e;this.interactionBegin=t;this.interactionEnd=o;this.anchor="bottom-right";this.handleResizeInteractionMove=e=>{if(this.resizeStartPosition!=null&&this.elementBounds!=null&&this.resizeBounds!=null&&this.resizePoints!=null){const t=l(n(e,this.elementBounds),this.elementBounds);const o=c(this.resizeBounds,this.resizeStartPosition,t,this.anchor,e.shiftKey);this.markupEl.points=p(this.resizePoints,this.resizeBounds,o);this.markupEl.bounds=o}};this.handleResizeInteractionEnd=e=>{window.removeEventListener("pointermove",this.handleResizeInteractionMove);window.removeEventListener("pointerup",this.handleResizeInteractionEnd);this.resizeBounds=undefined;const t=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:t})}}editAnchor(e,t){if(this.markupEl.mode==="edit"&&this.elementBounds!=null){this.resizeBounds=this.markupEl.bounds;this.resizePoints=this.markupEl.points;this.anchor=e;this.resizeStartPosition=l(n(t,this.elementBounds),this.elementBounds);window.addEventListener("pointermove",this.handleResizeInteractionMove);window.addEventListener("pointerup",this.handleResizeInteractionEnd)}}startInteraction(e){this.handleInteractionAttempt(e)}computeBoundingRect(){return d(this.markupEl)}handleInteractionAttempt(e){var t;if(this.markupEl.mode!==""&&this.pointerId==null&&this.elementBounds!=null){this.pointerId=e.pointerId;const o=n(e,this.elementBounds);const r=l(o,this.elementBounds);this.updateMinAndMax(r);this.markupEl.points=(t=this.markupEl.points)!==null&&t!==void 0?t:[r];this.interactionBegin.emit();this.acceptInteraction()}}handleInteractionMove(e){if(this.pointerId===e.pointerId&&this.markupEl.points!=null&&this.elementBounds!=null){const t=n(e,this.elementBounds);const o=l(t,this.elementBounds);this.updateMinAndMax(o);this.markupEl.points=[...this.markupEl.points,o]}}handleInteractionEnd(e){if(this.pointerId===e.pointerId){if(this.markupEl.mode!==""&&this.markupEl.points!=null&&this.markupEl.points.length>2&&this.elementBounds!=null){const t=n(e,this.elementBounds);const o=l(t,this.elementBounds);this.updateMinAndMax(o);this.markupEl.points=[...this.markupEl.points,o];const r=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:r})}else{this.markupEl.points=undefined}this.min=undefined;this.max=undefined;this.pointerId=undefined}}updateMinAndMax(e){this.min=this.min!=null?P.create(Math.min(this.min.x,e.x),Math.min(this.min.y,e.y)):e;this.max=this.max!=null?P.create(Math.max(this.max.x,e.x),Math.max(this.max.y,e.y)):e;this.markupEl.bounds=x.create(this.min.x,this.min.y,this.max.x-this.min.x,this.max.y-this.min.y)}}const D=()=>`:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-freeform-stroke-color:var(--red-800);--viewer-markup-freeform-stroke-width:4px;--viewer-markup-freeform-line-join:round;--viewer-markup-freeform-line-cap:round;--viewer-markup-freeform-bounds-outline-border-color:var(--blue-400);--viewer-markup-freeform-bounds-outline-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-border-color:var(--blue-400);--viewer-markup-freeform-bounds-edge-anchor-border-width:1px;--viewer-markup-freeform-bounds-edge-anchor-background-color:white;--viewer-markup-freeform-bounds-center-anchor-border-color:white;--viewer-markup-freeform-bounds-center-anchor-border-width:1px;--viewer-markup-freeform-bounds-center-anchor-background-color:var(     --blue-400   );--viewer-markup-freeform-bounds-anchor-width:9px;--viewer-markup-freeform-bounds-anchor-height:9px;--viewer-markup-freeform-scale:1}.svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.path{pointer-events:auto;cursor:default;stroke:var(--viewer-markup-freeform-stroke-color);stroke-width:calc(     var(--viewer-markup-freeform-stroke-width) *       var(--viewer-markup-freeform-scale)   );stroke-linejoin:var(--viewer-markup-freeform-line-join);stroke-linecap:var(--viewer-markup-freeform-line-cap)}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-outline{position:absolute;border-width:var(--viewer-markup-freeform-bounds-outline-border-width);border-color:var(--viewer-markup-freeform-bounds-outline-border-color);border-style:solid;box-shadow:0 0 3px rgba(0, 0, 0, 0.3)}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-freeform-bounds-anchor-width);height:var(--viewer-markup-freeform-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-freeform-bounds-center-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-center-anchor-border-color);border-style:solid;background-color:var(     --viewer-markup-freeform-bounds-center-anchor-background-color   )}.bounds-edge-anchor{border-width:var(--viewer-markup-freeform-bounds-edge-anchor-border-width);border-color:var(--viewer-markup-freeform-bounds-edge-anchor-border-color);border-style:solid;background-color:var(     --viewer-markup-freeform-bounds-edge-anchor-background-color   )}`;const M=t(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.interactionBegin=r(this,"interactionBegin");this.interactionEnd=r(this,"interactionEnd");this.viewRendered=r(this,"viewRendered");this.mode="";this.centeringBehavior="none";this.scale=1;this.screenPoints=[];this.interactionHandler=new y(this.hostEl,this.interactionBegin,this.interactionEnd);this.handleWindowPointerDown=e=>{if(m(e)){this.interactionHandler.startInteraction(e)}};this.handleTouchStart=e=>{e.preventDefault()}}componentWillLoad(){this.updateViewport();this.handleViewerChanged(this.viewer);this.updatePointsFromProps()}componentDidLoad(){const e=new ResizeObserver((()=>this.updateViewport()));e.observe(this.hostEl);if(this.mode==="create"){window.addEventListener("pointerdown",this.handleWindowPointerDown)}}componentDidRender(){if(this.mode===""){this.viewRendered.emit()}}disconnectedCallback(){this.dispose()}async dispose(){var e;(e=this.registeredInteraction)===null||e===void 0?void 0:e.dispose();this.registeredInteraction=undefined;window.removeEventListener("pointerdown",this.handleWindowPointerDown)}async handleViewerChanged(e){var t;(t=this.registeredInteraction)===null||t===void 0?void 0:t.dispose();this.registeredInteraction=undefined;if(e!=null){this.registeredInteraction=await e.registerInteractionHandler(this.interactionHandler)}}recomputePointsFromProps(){this.updatePointsFromProps()}handleScaleChange(){a((()=>{this.hostEl.style.setProperty("--viewer-markup-freeform-scale",this.scale.toString())}))}handleModeChange(){if(this.mode!=="create"){window.removeEventListener("pointerdown",this.handleWindowPointerDown)}}updateViewport(){var e;const t=d(this.hostEl);this.elementBounds=t;this.screenPoints=(e=this.convertPointsToScreen())!==null&&e!==void 0?e:this.screenPoints}updatePointsFromProps(){var e,t,o;this.points=(e=this.points)!==null&&e!==void 0?e:f(this.pointsJson);this.screenPoints=(t=this.convertPointsToScreen())!==null&&t!==void 0?t:[];this.bounds=(o=this.bounds)!==null&&o!==void 0?o:v(this.boundsJson)}render(){var e,t,o,r;if(this.screenPoints.length>0&&this.elementBounds!=null){const n=((t=(e=this.offset)===null||e===void 0?void 0:e.x)!==null&&t!==void 0?t:0)/h();const a=((r=(o=this.offset)===null||o===void 0?void 0:o.y)!==null&&r!==void 0?r:0)/h();return i(s,null,i("svg",{class:"svg",onTouchStart:this.handleTouchStart},i("defs",null,i(b,{id:"freeform-markup-shadow",scale:this.scale})),i("g",{transform:`translate(${n} ${a})`,filter:"url(#freeform-markup-shadow)"},i("path",{class:"path",d:this.screenPoints.reduce(((e,t)=>`${e}L${t.x},${t.y}`),`M${this.screenPoints[0].x},${this.screenPoints[0].y}`),fill:"none"}))),this.mode==="edit"&&this.bounds!=null&&i(k,{bounds:w(this.bounds,this.elementBounds,this.originatingViewport,this.centeringBehavior,this.scale),offset:{x:n,y:a},onTopLeftAnchorPointerDown:e=>this.interactionHandler.editAnchor("top-left",e),onTopRightAnchorPointerDown:e=>this.interactionHandler.editAnchor("top-right",e),onTopAnchorPointerDown:e=>this.interactionHandler.editAnchor("top",e),onBottomLeftAnchorPointerDown:e=>this.interactionHandler.editAnchor("bottom-left",e),onBottomRightAnchorPointerDown:e=>this.interactionHandler.editAnchor("bottom-right",e),onBottomAnchorPointerDown:e=>this.interactionHandler.editAnchor("bottom",e),onLeftAnchorPointerDown:e=>this.interactionHandler.editAnchor("left",e),onRightAnchorPointerDown:e=>this.interactionHandler.editAnchor("right",e),onCenterAnchorPointerDown:e=>this.interactionHandler.editAnchor("center",e)}),this.mode==="create"&&i("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}else{return i(s,null,i("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}}convertPointsToScreen(){var e;const t=this.elementBounds;if(t!=null){return(e=this.points)===null||e===void 0?void 0:e.map((e=>g(e,t,this.originatingViewport,this.centeringBehavior,this.scale)))}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],originatingViewport:[{recomputePointsFromProps:0}],offset:[{recomputePointsFromProps:0}],scale:[{recomputePointsFromProps:0},{handleScaleChange:0}],bounds:[{recomputePointsFromProps:0}],points:[{recomputePointsFromProps:0}],mode:[{handleModeChange:0}]}}static get style(){return D()}},[1,"vertex-viewer-markup-freeform",{points:[1040],pointsJson:[1,"points"],bounds:[1040],boundsJson:[1,"bounds"],mode:[513],viewer:[16],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],elementBounds:[32],screenPoints:[32],dispose:[64]},undefined,{viewer:[{handleViewerChanged:0}],originatingViewport:[{recomputePointsFromProps:0}],offset:[{recomputePointsFromProps:0}],scale:[{recomputePointsFromProps:0},{handleScaleChange:0}],bounds:[{recomputePointsFromProps:0}],points:[{recomputePointsFromProps:0}],mode:[{handleModeChange:0}]}]);function A(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-markup-freeform"];t.forEach((t=>{switch(t){case"vertex-viewer-markup-freeform":if(!customElements.get(e(t))){customElements.define(e(t),M)}break}}))}A();export{M as V,A as d};
+//# sourceMappingURL=p-CCg_OPx0.js.map

package/dist/components/{p-C2vaYcRL.js.map → p-CCg_OPx0.js.map}

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

package/dist/components/{p-rAFiyecT.js → p-D40K0qiO.js}

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as r,t as e,p as t,H as o,d as n,e as i}from"./p-DmsAWRoU.js";import{g as s,a}from"./p-BSYTUXcE.js";import{w as h}from"./p-Ss6piqGD.js";import{g as d}from"./p-Bg-uS9BH.js";import{M as l,t as c,c as u,R as w,d as p,p as v,e as b,f as m,g as f,h as k,j as g,k as x,S as y}from"./p-Dru_6caB.js";import{p as C,a as S}from"./p-Tvs4yxd5.js";import{c as D}from"./p-C6gMOKYg.js";class A extends l{constructor(r,e,t){super();this.markupEl=r;this.interactionBegin=e;this.interactionEnd=t;this.anchor="end"}editAnchor(r,e){if(this.markupEl.mode==="edit"){this.anchor=r;this.startInteraction(e)}}startInteraction(r){this.handleInteractionAttempt(r)}computeBoundingRect(){return d(this.markupEl)}handleInteractionAttempt(r){var e;if(this.markupEl.mode!==""&&this.pointerId==null&&this.elementBounds!=null){this.pointerId=r.pointerId;this.markupEl.start=(e=this.markupEl.start)!==null&&e!==void 0?e:c(s(r,this.elementBounds),this.elementBounds);this.interactionBegin.emit();this.acceptInteraction()}}handleInteractionMove(r){if(this.elementBounds!=null&&this.pointerId===r.pointerId){const e=c(s(r,this.elementBounds),this.elementBounds);if(this.anchor==="start"){this.markupEl.start=e}else if(this.anchor==="end"){this.markupEl.end=e}else if(this.markupEl.start!=null&&this.markupEl.end!=null){const r=C.create((this.markupEl.start.x+this.markupEl.end.x)/2,(this.markupEl.start.y+this.markupEl.end.y)/2);const t=r.x-e.x;const o=r.y-e.y;this.markupEl.start=C.create(this.markupEl.start.x-t,this.markupEl.start.y-o);this.markupEl.end=C.create(this.markupEl.end.x-t,this.markupEl.end.y-o)}}}handleInteractionEnd(r){if(this.pointerId===r.pointerId){const r=this.markupEl.start!=null&&this.elementBounds!=null?u(this.markupEl.start,this.elementBounds):undefined;const e=this.markupEl.end!=null&&this.elementBounds!=null?u(this.markupEl.end,this.elementBounds):undefined;if(this.markupEl.mode!==""&&r!=null&&e!=null&&C.distance(r,e)>=2){const r=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:r})}else{this.markupEl.start=undefined;this.markupEl.end=undefined}this.pointerId=undefined}}}const E=({start:e,end:t,offset:o,onStartAnchorPointerDown:n,onCenterAnchorPointerDown:i,onEndAnchorPointerDown:s})=>{const a=S.normalize(S.toDegrees(S.fromPoints(e,t))-270);const h=C.create((e.x+t.x)/2,(e.y+t.y)/2);const d=o!=null?`translate(${o.x}px, ${o.y}px)`:undefined;return r("div",{class:"bounds-container"},r(w,{transform:d,id:"bounding-box-1d-start-anchor",name:"start-anchor",rotation:a,point:e,onPointerDown:n},r("div",{class:D("bounds-default-anchor","bounds-cap-anchor")})),r(w,{transform:d,id:"bounding-box-1d-end-anchor",name:"end-anchor",rotation:a,point:t,onPointerDown:s},r("div",{class:D("bounds-default-anchor","bounds-cap-anchor")})),r(w,{transform:d,id:"bounding-box-1d-center-anchor",name:"center-anchor",point:h,onPointerDown:i},r("div",{class:D("bounds-default-anchor","bounds-center-anchor")})))};const P=()=>`:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-arrow-line-stroke-color:var(--red-800);--viewer-markup-arrow-line-stroke-width:4px;--viewer-markup-arrow-head-stroke-color:var(--red-800);--viewer-markup-arrow-head-stroke-width:4px;--viewer-markup-arrow-head-fill-color:var(--red-800);--viewer-markup-arrow-head-fill-opacity:1;--viewer-markup-arrow-bounds-cap-border-color:var(--blue-400);--viewer-markup-arrow-bounds-cap-border-width:1px;--viewer-markup-arrow-bounds-cap-background-color:white;--viewer-markup-arrow-bounds-center-anchor-border-color:white;--viewer-markup-arrow-bounds-center-anchor-border-width:1px;--viewer-markup-arrow-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-arrow-bounds-outline-width:1px;--viewer-markup-arrow-bounds-outline-color:var(--blue-400);--viewer-markup-arrow-bounds-anchor-width:9px;--viewer-markup-arrow-bounds-anchor-height:9px;--viewer-markup-arrow-scale:1}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.line{pointer-events:auto;stroke:var(--viewer-markup-arrow-line-stroke-color);stroke-width:calc(     var(--viewer-markup-arrow-line-stroke-width) *       var(--viewer-markup-arrow-scale)   );cursor:default}.head{pointer-events:auto;stroke:var(--viewer-markup-arrow-head-stroke-color);stroke-width:calc(     var(--viewer-markup-arrow-head-stroke-width) *       var(--viewer-markup-arrow-scale)   );fill:var(--viewer-markup-arrow-head-fill-color);fill-opacity:var(--viewer-markup-arrow-head-fill-opacity);cursor:default}.bounds-line{pointer-events:auto;stroke:var(--viewer-markup-arrow-bounds-outline-color);stroke-width:var(--viewer-markup-arrow-bounds-outline-width)}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-arrow-bounds-anchor-width);height:var(--viewer-markup-arrow-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-arrow-bounds-center-anchor-border-width);border-color:var(--viewer-markup-arrow-bounds-center-anchor-border-color);border-style:solid;background-color:var(     --viewer-markup-arrow-bounds-center-anchor-background-color   )}.bounds-cap-anchor{border-width:var(--viewer-markup-arrow-bounds-cap-border-width);border-color:var(--viewer-markup-arrow-bounds-cap-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-cap-background-color)}`;const j=t(class e extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.interactionBegin=n(this,"interactionBegin");this.interactionEnd=n(this,"interactionEnd");this.viewRendered=n(this,"viewRendered");this.centeringBehavior="none";this.scale=1;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.mode="";this.interactionHandler=new A(this.hostEl,this.interactionBegin,this.interactionEnd);this.handleWindowPointerDown=r=>{if(p(r)){this.interactionHandler.startInteraction(r)}};this.handleTouchStart=r=>{r.preventDefault()}}componentWillLoad(){this.updateViewport();this.handleViewerChanged(this.viewer);this.updatePointsFromProps()}componentDidLoad(){this.updatePointsFromProps();const r=new ResizeObserver((()=>this.updateViewport()));r.observe(this.hostEl);if(this.mode==="create"){window.addEventListener("pointerdown",this.handleWindowPointerDown)}}componentDidRender(){if(this.mode===""){this.viewRendered.emit()}}disconnectedCallback(){this.dispose()}async dispose(){var r;(r=this.registeredInteraction)===null||r===void 0?void 0:r.dispose();this.registeredInteraction=undefined;window.removeEventListener("pointerdown",this.handleWindowPointerDown)}async handleViewerChanged(r){var e;(e=this.registeredInteraction)===null||e===void 0?void 0:e.dispose();this.registeredInteraction=undefined;if(r!=null){this.registeredInteraction=await r.registerInteractionHandler(this.interactionHandler)}}handleStartJsonChange(){this.updatePointsFromProps()}handleEndJsonChange(){this.updatePointsFromProps()}handleModeChange(){if(this.mode!=="create"){window.removeEventListener("pointerdown",this.handleWindowPointerDown)}}handleScaleChange(){h((()=>{var r,e;this.hostEl.style.setProperty("--viewer-markup-arrow-scale",(e=(r=this.scale)===null||r===void 0?void 0:r.toString())!==null&&e!==void 0?e:"1")}))}updateViewport(){const r=d(this.hostEl);this.elementBounds=r}updatePointsFromProps(){this.start=this.start||v(this.startJson);this.end=this.end||v(this.endJson)}renderLineAnchorStyle(e,t){if(e==="arrow-triangle"){return r("polygon",{id:"line-anchor-arrow-triangle",class:"head",points:b(t,this.scale)})}else if(e==="arrow-line"){return r("path",{id:"line-anchor-arrow-line",class:"head",d:m(t,this.scale)})}else if(e==="hash"){const e=f(t,this.scale);return r("line",{id:"line-anchor-hash",class:"head",...e})}else if(e==="dot"){const e=k(t,this.scale);return r("circle",{id:"line-anchor-circle",class:"head",...e})}else{return r("div",null)}}render(){var e,t,o,n;if(this.start!=null&&this.end!=null&&this.elementBounds!=null){const s=this.elementBounds;const h=((t=(e=this.offset)===null||e===void 0?void 0:e.x)!==null&&t!==void 0?t:0)/a();const d=((n=(o=this.offset)===null||o===void 0?void 0:o.y)!==null&&n!==void 0?n:0)/a();const l=u(this.start,s,this.originatingViewport,this.centeringBehavior,this.scale);const c=u(this.end,s,this.originatingViewport,this.centeringBehavior,this.scale);if(g(l,c)){const e=x(c,l);const t=x(l,c);return r(i,null,r("svg",{class:"svg",onTouchStart:this.handleTouchStart},r("defs",null,r(y,{id:"arrow-shadow"})),r("g",{transform:`translate(${h} ${d})`,filter:"url(#arrow-shadow)"},this.renderLineAnchorStyle(this.startLineAnchorStyle,e),r("line",{id:"arrow-line",class:"line",x1:t.tip.x,y1:t.tip.y,x2:e.tip.x,y2:e.tip.y}),this.renderLineAnchorStyle(this.endLineAnchorStyle,t)),this.mode==="edit"&&r("g",{transform:`translate(${h} ${d})`},r("line",{id:"bounding-box-1d-line",class:"bounds-line",x1:l.x,y1:l.y,x2:c.x,y2:c.y}))),this.mode==="edit"&&r(E,{start:l,end:c,offset:{x:h,y:d},onStartAnchorPointerDown:r=>this.interactionHandler.editAnchor("start",r),onCenterAnchorPointerDown:r=>this.interactionHandler.editAnchor("center",r),onEndAnchorPointerDown:r=>this.interactionHandler.editAnchor("end",r)}),this.mode==="create"&&r("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}else{return r(i,null)}}else{return r(i,null,r("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],start:[{handleStartJsonChange:0}],end:[{handleEndJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}}static get style(){return P()}},[1,"vertex-viewer-markup-arrow",{start:[1040],startJson:[1,"start"],end:[1040],endJson:[1,"end"],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],startLineAnchorStyle:[1025,"start-line-anchor-style"],endLineAnchorStyle:[1025,"end-line-anchor-style"],mode:[513],viewer:[16],elementBounds:[32],dispose:[64]},undefined,{viewer:[{handleViewerChanged:0}],start:[{handleStartJsonChange:0}],end:[{handleEndJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}]);function B(){if(typeof customElements==="undefined"){return}const r=["vertex-viewer-markup-arrow"];r.forEach((r=>{switch(r){case"vertex-viewer-markup-arrow":if(!customElements.get(e(r))){customElements.define(e(r),j)}break}}))}B();export{j as V,B as d};
-//# sourceMappingURL=p-rAFiyecT.js.map
+import{h as r,t as e,p as t,H as o,d as n,e as i}from"./p-DmsAWRoU.js";import{g as s,a}from"./p-BSYTUXcE.js";import{w as h}from"./p-Ss6piqGD.js";import{g as d}from"./p-Bg-uS9BH.js";import{M as l,t as c,c as u,R as w,d as p,p as v,e as b,f as m,g as f,h as k,j as g,k as x,S as y}from"./p-DXGQW235.js";import{p as C,a as S}from"./p-Tvs4yxd5.js";import{c as D}from"./p-C6gMOKYg.js";class A extends l{constructor(r,e,t){super();this.markupEl=r;this.interactionBegin=e;this.interactionEnd=t;this.anchor="end"}editAnchor(r,e){if(this.markupEl.mode==="edit"){this.anchor=r;this.startInteraction(e)}}startInteraction(r){this.handleInteractionAttempt(r)}computeBoundingRect(){return d(this.markupEl)}handleInteractionAttempt(r){var e;if(this.markupEl.mode!==""&&this.pointerId==null&&this.elementBounds!=null){this.pointerId=r.pointerId;this.markupEl.start=(e=this.markupEl.start)!==null&&e!==void 0?e:c(s(r,this.elementBounds),this.elementBounds);this.interactionBegin.emit();this.acceptInteraction()}}handleInteractionMove(r){if(this.elementBounds!=null&&this.pointerId===r.pointerId){const e=c(s(r,this.elementBounds),this.elementBounds);if(this.anchor==="start"){this.markupEl.start=e}else if(this.anchor==="end"){this.markupEl.end=e}else if(this.markupEl.start!=null&&this.markupEl.end!=null){const r=C.create((this.markupEl.start.x+this.markupEl.end.x)/2,(this.markupEl.start.y+this.markupEl.end.y)/2);const t=r.x-e.x;const o=r.y-e.y;this.markupEl.start=C.create(this.markupEl.start.x-t,this.markupEl.start.y-o);this.markupEl.end=C.create(this.markupEl.end.x-t,this.markupEl.end.y-o)}}}handleInteractionEnd(r){if(this.pointerId===r.pointerId){const r=this.markupEl.start!=null&&this.elementBounds!=null?u(this.markupEl.start,this.elementBounds):undefined;const e=this.markupEl.end!=null&&this.elementBounds!=null?u(this.markupEl.end,this.elementBounds):undefined;if(this.markupEl.mode!==""&&r!=null&&e!=null&&C.distance(r,e)>=2){const r=this.markupEl.mode!=="edit";this.interactionEnd.emit({markup:this.markupEl,newlyCreatedMarkup:r})}else{this.markupEl.start=undefined;this.markupEl.end=undefined}this.pointerId=undefined}}}const E=({start:e,end:t,offset:o,onStartAnchorPointerDown:n,onCenterAnchorPointerDown:i,onEndAnchorPointerDown:s})=>{const a=S.normalize(S.toDegrees(S.fromPoints(e,t))-270);const h=C.create((e.x+t.x)/2,(e.y+t.y)/2);const d=o!=null?`translate(${o.x}px, ${o.y}px)`:undefined;return r("div",{class:"bounds-container"},r(w,{transform:d,id:"bounding-box-1d-start-anchor",name:"start-anchor",rotation:a,point:e,onPointerDown:n},r("div",{class:D("bounds-default-anchor","bounds-cap-anchor")})),r(w,{transform:d,id:"bounding-box-1d-end-anchor",name:"end-anchor",rotation:a,point:t,onPointerDown:s},r("div",{class:D("bounds-default-anchor","bounds-cap-anchor")})),r(w,{transform:d,id:"bounding-box-1d-center-anchor",name:"center-anchor",point:h,onPointerDown:i},r("div",{class:D("bounds-default-anchor","bounds-center-anchor")})))};const P=()=>`:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-markup-arrow-line-stroke-color:var(--red-800);--viewer-markup-arrow-line-stroke-width:4px;--viewer-markup-arrow-head-stroke-color:var(--red-800);--viewer-markup-arrow-head-stroke-width:4px;--viewer-markup-arrow-head-fill-color:var(--red-800);--viewer-markup-arrow-head-fill-opacity:1;--viewer-markup-arrow-bounds-cap-border-color:var(--blue-400);--viewer-markup-arrow-bounds-cap-border-width:1px;--viewer-markup-arrow-bounds-cap-background-color:white;--viewer-markup-arrow-bounds-center-anchor-border-color:white;--viewer-markup-arrow-bounds-center-anchor-border-width:1px;--viewer-markup-arrow-bounds-center-anchor-background-color:var(--blue-400);--viewer-markup-arrow-bounds-outline-width:1px;--viewer-markup-arrow-bounds-outline-color:var(--blue-400);--viewer-markup-arrow-bounds-anchor-width:9px;--viewer-markup-arrow-bounds-anchor-height:9px;--viewer-markup-arrow-scale:1}.svg{pointer-events:none;width:100%;height:100%}.create-overlay{pointer-events:auto;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.line{pointer-events:auto;stroke:var(--viewer-markup-arrow-line-stroke-color);stroke-width:calc(     var(--viewer-markup-arrow-line-stroke-width) *       var(--viewer-markup-arrow-scale)   );cursor:default}.head{pointer-events:auto;stroke:var(--viewer-markup-arrow-head-stroke-color);stroke-width:calc(     var(--viewer-markup-arrow-head-stroke-width) *       var(--viewer-markup-arrow-scale)   );fill:var(--viewer-markup-arrow-head-fill-color);fill-opacity:var(--viewer-markup-arrow-head-fill-opacity);cursor:default}.bounds-line{pointer-events:auto;stroke:var(--viewer-markup-arrow-bounds-outline-color);stroke-width:var(--viewer-markup-arrow-bounds-outline-width)}.bounds-container{pointer-events:none;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.bounds-anchor-position{position:absolute;transform:translate(-50%, -50%)}.bounds-anchor{pointer-events:auto;cursor:default;user-select:none}.bounds-default-anchor{width:var(--viewer-markup-arrow-bounds-anchor-width);height:var(--viewer-markup-arrow-bounds-anchor-height);box-sizing:border-box;box-shadow:0 0 2px rgba(0, 0, 0, 0.3)}.bounds-center-anchor{border-radius:100%;border-width:var(--viewer-markup-arrow-bounds-center-anchor-border-width);border-color:var(--viewer-markup-arrow-bounds-center-anchor-border-color);border-style:solid;background-color:var(     --viewer-markup-arrow-bounds-center-anchor-background-color   )}.bounds-cap-anchor{border-width:var(--viewer-markup-arrow-bounds-cap-border-width);border-color:var(--viewer-markup-arrow-bounds-cap-border-color);border-style:solid;background-color:var(--viewer-markup-arrow-bounds-cap-background-color)}`;const j=t(class e extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.interactionBegin=n(this,"interactionBegin");this.interactionEnd=n(this,"interactionEnd");this.viewRendered=n(this,"viewRendered");this.centeringBehavior="none";this.scale=1;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.mode="";this.interactionHandler=new A(this.hostEl,this.interactionBegin,this.interactionEnd);this.handleWindowPointerDown=r=>{if(p(r)){this.interactionHandler.startInteraction(r)}};this.handleTouchStart=r=>{r.preventDefault()}}componentWillLoad(){this.updateViewport();this.handleViewerChanged(this.viewer);this.updatePointsFromProps()}componentDidLoad(){this.updatePointsFromProps();const r=new ResizeObserver((()=>this.updateViewport()));r.observe(this.hostEl);if(this.mode==="create"){window.addEventListener("pointerdown",this.handleWindowPointerDown)}}componentDidRender(){if(this.mode===""){this.viewRendered.emit()}}disconnectedCallback(){this.dispose()}async dispose(){var r;(r=this.registeredInteraction)===null||r===void 0?void 0:r.dispose();this.registeredInteraction=undefined;window.removeEventListener("pointerdown",this.handleWindowPointerDown)}async handleViewerChanged(r){var e;(e=this.registeredInteraction)===null||e===void 0?void 0:e.dispose();this.registeredInteraction=undefined;if(r!=null){this.registeredInteraction=await r.registerInteractionHandler(this.interactionHandler)}}handleStartJsonChange(){this.updatePointsFromProps()}handleEndJsonChange(){this.updatePointsFromProps()}handleModeChange(){if(this.mode!=="create"){window.removeEventListener("pointerdown",this.handleWindowPointerDown)}}handleScaleChange(){h((()=>{var r,e;this.hostEl.style.setProperty("--viewer-markup-arrow-scale",(e=(r=this.scale)===null||r===void 0?void 0:r.toString())!==null&&e!==void 0?e:"1")}))}updateViewport(){const r=d(this.hostEl);this.elementBounds=r}updatePointsFromProps(){this.start=this.start||v(this.startJson);this.end=this.end||v(this.endJson)}renderLineAnchorStyle(e,t){if(e==="arrow-triangle"){return r("polygon",{id:"line-anchor-arrow-triangle",class:"head",points:b(t,this.scale)})}else if(e==="arrow-line"){return r("path",{id:"line-anchor-arrow-line",class:"head",d:m(t,this.scale)})}else if(e==="hash"){const e=f(t,this.scale);return r("line",{id:"line-anchor-hash",class:"head",...e})}else if(e==="dot"){const e=k(t,this.scale);return r("circle",{id:"line-anchor-circle",class:"head",...e})}else{return r("div",null)}}render(){var e,t,o,n;if(this.start!=null&&this.end!=null&&this.elementBounds!=null){const s=this.elementBounds;const h=((t=(e=this.offset)===null||e===void 0?void 0:e.x)!==null&&t!==void 0?t:0)/a();const d=((n=(o=this.offset)===null||o===void 0?void 0:o.y)!==null&&n!==void 0?n:0)/a();const l=u(this.start,s,this.originatingViewport,this.centeringBehavior,this.scale);const c=u(this.end,s,this.originatingViewport,this.centeringBehavior,this.scale);if(g(l,c)){const e=x(c,l);const t=x(l,c);return r(i,null,r("svg",{class:"svg",onTouchStart:this.handleTouchStart},r("defs",null,r(y,{id:"arrow-shadow",scale:this.scale})),r("g",{transform:`translate(${h} ${d})`,filter:"url(#arrow-shadow)"},this.renderLineAnchorStyle(this.startLineAnchorStyle,e),r("line",{id:"arrow-line",class:"line",x1:t.tip.x,y1:t.tip.y,x2:e.tip.x,y2:e.tip.y}),this.renderLineAnchorStyle(this.endLineAnchorStyle,t)),this.mode==="edit"&&r("g",{transform:`translate(${h} ${d})`},r("line",{id:"bounding-box-1d-line",class:"bounds-line",x1:l.x,y1:l.y,x2:c.x,y2:c.y}))),this.mode==="edit"&&r(E,{start:l,end:c,offset:{x:h,y:d},onStartAnchorPointerDown:r=>this.interactionHandler.editAnchor("start",r),onCenterAnchorPointerDown:r=>this.interactionHandler.editAnchor("center",r),onEndAnchorPointerDown:r=>this.interactionHandler.editAnchor("end",r)}),this.mode==="create"&&r("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}else{return r(i,null)}}else{return r(i,null,r("div",{class:"create-overlay",onTouchStart:this.handleTouchStart}))}}get hostEl(){return this}static get watchers(){return{viewer:[{handleViewerChanged:0}],start:[{handleStartJsonChange:0}],end:[{handleEndJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}}static get style(){return P()}},[1,"vertex-viewer-markup-arrow",{start:[1040],startJson:[1,"start"],end:[1040],endJson:[1,"end"],originatingViewport:[16],centeringBehavior:[1,"centering-behavior"],offset:[16],scale:[2],startLineAnchorStyle:[1025,"start-line-anchor-style"],endLineAnchorStyle:[1025,"end-line-anchor-style"],mode:[513],viewer:[16],elementBounds:[32],dispose:[64]},undefined,{viewer:[{handleViewerChanged:0}],start:[{handleStartJsonChange:0}],end:[{handleEndJsonChange:0}],mode:[{handleModeChange:0}],scale:[{handleScaleChange:0}]}]);function J(){if(typeof customElements==="undefined"){return}const r=["vertex-viewer-markup-arrow"];r.forEach((r=>{switch(r){case"vertex-viewer-markup-arrow":if(!customElements.get(e(r))){customElements.define(e(r),j)}break}}))}J();export{j as V,J as d};
+//# sourceMappingURL=p-D40K0qiO.js.map

package/dist/components/{p-rAFiyecT.js.map → p-D40K0qiO.js.map}

@@ -1 +1 @@
-{"version":3,"names":["ArrowMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","super","this","anchor","editAnchor","event","mode","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","start","_a","translatePointToRelative","getMouseClientPosition","emit","acceptInteraction","handleInteractionMove","position","end","center","Point","create","x","y","xDifference","yDifference","handleInteractionEnd","screenStart","translatePointToScreen","undefined","screenEnd","distance","newlyCreatedMarkup","markup","BoundingBox1d","offset","onStartAnchorPointerDown","onCenterAnchorPointerDown","onEndAnchorPointerDown","angle","Angle","normalize","toDegrees","fromPoints","transform","h","class","RelativeAnchor","id","name","rotation","point","onPointerDown","classNames","viewerMarkupArrowCss","ViewerMarkupArrow","__stencil_proxyCustomElement","HTMLElement","registerHost","centeringBehavior","scale","startLineAnchorStyle","endLineAnchorStyle","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","updatePointsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","componentDidRender","viewRendered","disconnectedCallback","dispose","registeredInteraction","removeEventListener","newViewer","registerInteractionHandler","handleStartJsonChange","handleEndJsonChange","handleModeChange","handleScaleChange","writeDOM","style","setProperty","_b","toString","rect","parsePoint","startJson","endJson","renderLineAnchorStyle","anchorStyle","arrowheadPoints","points","arrowheadPointsToPolygonPoints","d","arrowheadPointsToPathPoints","hashPoints","arrowheadPointsToHashPoints","circlePoints","arrowheadPointsToCirclePoints","render","offsetX","getWindowDevicePixelRatio","offsetY","_d","_c","originatingViewport","isValidPointData","arrowheadStartPoints","createLineAnchorStylePoints","arrowheadEndPoints","Host","onTouchStart","SvgShadow","filter","x1","tip","y1","x2","y2"],"sources":["src/components/viewer-markup-arrow/interactions.ts","src/components/viewer-markup-arrow/viewer-markup-arrow-components.tsx","src/components/viewer-markup-arrow/viewer-markup-arrow.css?tag=vertex-viewer-markup-arrow&encapsulation=shadow","src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { MarkupInteractionHandler } from '../../lib/markup/interactions';\nimport { MarkupInteraction } from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  translatePointToRelative,\n  translatePointToScreen,\n} from '../viewer-markup/markup-utils';\n\ntype ViewerMarkupArrowEditAnchor = 'start' | 'end' | 'center';\n\nexport class ArrowMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private anchor: ViewerMarkupArrowEditAnchor = 'end';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupArrowElement,\n    private readonly interactionBegin: EventEmitter<void>,\n    private readonly interactionEnd: EventEmitter<MarkupInteraction>\n  ) {\n    super();\n  }\n\n  public editAnchor(\n    anchor: ViewerMarkupArrowEditAnchor,\n    event: PointerEvent\n  ): void {\n    if (this.markupEl.mode === 'edit') {\n      this.anchor = anchor;\n      this.startInteraction(event);\n    }\n  }\n\n  public startInteraction(event: PointerEvent): void {\n    this.handleInteractionAttempt(event);\n  }\n\n  protected computeBoundingRect(): DOMRect {\n    return getMarkupBoundingClientRect(this.markupEl);\n  }\n\n  protected handleInteractionAttempt(event: PointerEvent): void {\n    if (\n      this.markupEl.mode !== '' &&\n      this.pointerId == null &&\n      this.elementBounds != null\n    ) {\n      this.pointerId = event.pointerId;\n      this.markupEl.start =\n        this.markupEl.start ??\n        translatePointToRelative(\n          getMouseClientPosition(event, this.elementBounds),\n          this.elementBounds\n        );\n\n      this.interactionBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (this.elementBounds != null && this.pointerId === event.pointerId) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n      if (this.anchor === 'start') {\n        this.markupEl.start = position;\n      } else if (this.anchor === 'end') {\n        this.markupEl.end = position;\n      } else if (this.markupEl.start != null && this.markupEl.end != null) {\n        const center = Point.create(\n          (this.markupEl.start.x + this.markupEl.end.x) / 2,\n          (this.markupEl.start.y + this.markupEl.end.y) / 2\n        );\n        const xDifference = center.x - position.x;\n        const yDifference = center.y - position.y;\n\n        this.markupEl.start = Point.create(\n          this.markupEl.start.x - xDifference,\n          this.markupEl.start.y - yDifference\n        );\n        this.markupEl.end = Point.create(\n          this.markupEl.end.x - xDifference,\n          this.markupEl.end.y - yDifference\n        );\n      }\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      const screenStart =\n        this.markupEl.start != null && this.elementBounds != null\n          ? translatePointToScreen(this.markupEl.start, this.elementBounds)\n          : undefined;\n      const screenEnd =\n        this.markupEl.end != null && this.elementBounds != null\n          ? translatePointToScreen(this.markupEl.end, this.elementBounds)\n          : undefined;\n\n      if (\n        this.markupEl.mode !== '' &&\n        screenStart != null &&\n        screenEnd != null &&\n        Point.distance(screenStart, screenEnd) >= 2\n      ) {\n        const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n        this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\n      } else {\n        this.markupEl.start = undefined;\n        this.markupEl.end = undefined;\n      }\n\n      this.pointerId = undefined;\n    }\n  }\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Angle, Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { RelativeAnchor } from '../viewer-markup/viewer-markup-components';\n\nexport interface BoundingBox1dProps {\n  start: Point.Point;\n  end: Point.Point;\n  offset?: Point.Point;\n  onStartAnchorPointerDown?: (event: PointerEvent) => void;\n  onCenterAnchorPointerDown?: (event: PointerEvent) => void;\n  onEndAnchorPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const BoundingBox1d: FunctionalComponent<BoundingBox1dProps> = ({\n  start,\n  end,\n  offset,\n  onStartAnchorPointerDown,\n  onCenterAnchorPointerDown,\n  onEndAnchorPointerDown,\n}) => {\n  const angle = Angle.normalize(\n    Angle.toDegrees(Angle.fromPoints(start, end)) - 270\n  );\n  const center = Point.create((start.x + end.x) / 2, (start.y + end.y) / 2);\n  const transform =\n    offset != null ? `translate(${offset.x}px, ${offset.y}px)` : undefined;\n\n  return (\n    <div class=\"bounds-container\">\n      <RelativeAnchor\n        transform={transform}\n        id=\"bounding-box-1d-start-anchor\"\n        name=\"start-anchor\"\n        rotation={angle}\n        point={start}\n        onPointerDown={onStartAnchorPointerDown}\n      >\n        <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n      </RelativeAnchor>\n      <RelativeAnchor\n        transform={transform}\n        id=\"bounding-box-1d-end-anchor\"\n        name=\"end-anchor\"\n        rotation={angle}\n        point={end}\n        onPointerDown={onEndAnchorPointerDown}\n      >\n        <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n      </RelativeAnchor>\n      <RelativeAnchor\n        transform={transform}\n        id=\"bounding-box-1d-center-anchor\"\n        name=\"center-anchor\"\n        point={center}\n        onPointerDown={onCenterAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-center-anchor')}\n        />\n      </RelativeAnchor>\n    </div>\n  );\n};\n",":host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  /**\n   * @prop --viewer-markup-arrow-line-stroke-color: A CSS color that\n   * specifies the color of the arrow line's outline.\n   */\n  --viewer-markup-arrow-line-stroke-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-line-stroke-width: A CSS length that\n   * specifies the width of the arrow line's outline.\n   *\n   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-arrow-line-stroke-width: 4px;\n  /**\n   * @prop --viewer-markup-arrow-head-stroke-color: A CSS color that\n   * specifies the color of the arrow head's outline.\n   */\n  --viewer-markup-arrow-head-stroke-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-head-stroke-width: A CSS length that\n   * specifies the width of the arrow head's outline.\n   *\n   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-arrow-head-stroke-width: 4px;\n  /**\n   * @prop --viewer-markup-arrow-head-fill-color: A CSS color that\n   * specifies the color of the arrow head's fill.\n   */\n  --viewer-markup-arrow-head-fill-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-head-fill-opacity: A number between\n   * 0 and 1 that specifies the opacity of the arrow head's fill.\n   */\n  --viewer-markup-arrow-head-fill-opacity: 1;\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-border-color: A CSS color that\n   * specifies the color of arrow start/end resize anchors' border.\n   */\n  --viewer-markup-arrow-bounds-cap-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-border-width: A CSS length that\n   * specifies the width of arrow start/end resize anchors' border.\n   */\n  --viewer-markup-arrow-bounds-cap-border-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-background-color: A CSS color that\n   * specifies the background color of the arrow start/end resize anchors.\n   */\n  --viewer-markup-arrow-bounds-cap-background-color: white;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-border-color: A CSS color that\n   * specifies the color of the center resize anchor's border.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-border-color: white;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-border-width: A CSS length that\n   * specifies the width of the center resize anchor's border.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-background-color: A CSS color that\n   * specifies the background color of the center resize anchor.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-outline-width: A CSS color that\n   * specifies the width of the selected arrow outline.\n   */\n  --viewer-markup-arrow-bounds-outline-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-outline-color: A CSS color that\n   * specifies the color of selected arrow outline.\n   */\n  --viewer-markup-arrow-bounds-outline-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-anchor-width: A CSS length that\n   * specifies the width of the resize and reposition anchors.\n   */\n  --viewer-markup-arrow-bounds-anchor-width: 9px;\n  /**\n    * @prop --viewer-markup-arrow-bounds-anchor-height: A CSS length that\n    * specifies the height of the resize and reposition anchors.\n    */\n  --viewer-markup-arrow-bounds-anchor-height: 9px;\n  /**\n    * @prop --viewer-markup-arrow-scale: A number that specifies the scale of the arrow.\n    * This is used to scale the arrow's stroke width. Defaults to 1, and is managed internally\n    * by the component.\n    */\n  --viewer-markup-arrow-scale: 1;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n}\n\n.create-overlay {\n  pointer-events: auto;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n}\n\n.line {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-line-stroke-color);\n  stroke-width: calc(\n    var(--viewer-markup-arrow-line-stroke-width) *\n      var(--viewer-markup-arrow-scale)\n  );\n  cursor: default;\n}\n\n.head {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-head-stroke-color);\n  stroke-width: calc(\n    var(--viewer-markup-arrow-head-stroke-width) *\n      var(--viewer-markup-arrow-scale)\n  );\n  fill: var(--viewer-markup-arrow-head-fill-color);\n  fill-opacity: var(--viewer-markup-arrow-head-fill-opacity);\n  cursor: default;\n}\n\n.bounds-line {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-bounds-outline-color);\n  stroke-width: var(--viewer-markup-arrow-bounds-outline-width);\n}\n\n.bounds-container {\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.bounds-anchor-position {\n  position: absolute;\n  transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n  pointer-events: auto;\n  cursor: default;\n  user-select: none;\n}\n\n.bounds-default-anchor {\n  width: var(--viewer-markup-arrow-bounds-anchor-width);\n  height: var(--viewer-markup-arrow-bounds-anchor-height);\n  box-sizing: border-box;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n  border-radius: 100%;\n  border-width: var(--viewer-markup-arrow-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-arrow-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(\n    --viewer-markup-arrow-bounds-center-anchor-background-color\n  );\n}\n\n.bounds-cap-anchor {\n  border-width: var(--viewer-markup-arrow-bounds-cap-border-width);\n  border-color: var(--viewer-markup-arrow-bounds-cap-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-arrow-bounds-cap-background-color);\n}\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 { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidPointData,\n  isValidStartEvent,\n  translatePointToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { ArrowMarkupInteractionHandler } from './interactions';\nimport {\n  arrowheadPointsToCirclePoints,\n  arrowheadPointsToHashPoints,\n  arrowheadPointsToPathPoints,\n  arrowheadPointsToPolygonPoints,\n  createLineAnchorStylePoints,\n  LineAnchorStyle,\n  LineAnchorStylePoints,\n  parsePoint,\n} from './utils';\nimport { BoundingBox1d } from './viewer-markup-arrow-components';\n\n/**\n * The supported arrow markup modes.\n *\n * @see {@link ViewerMarkupArrowMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupArrowMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-arrow',\n  styleUrl: 'viewer-markup-arrow.css',\n  shadow: true,\n})\nexport class ViewerMarkupArrow {\n  /**\n   * The position of the starting anchor. Can either be an instance of a\n   * `Point` or a JSON string representation in the format of `[x, y]` or\n   * `{\"x\": 0, \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public start?: Point.Point;\n\n  /**\n   * The position of the starting anchor, as a JSON string. Can either be an\n   * instance of a `Point` or a JSON string representation in the format of\n   * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ attribute: 'start' })\n  public startJson?: string;\n\n  /**\n   * The position of the ending anchor. Can either be an instance of a `Point`\n   * or a JSON string representation in the format of `[x, y]` or `{\"x\": 0,\n   * \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ mutable: true })\n  public end?: Point.Point;\n\n  /**\n   * The position of the ending anchor, as a JSON string. Can either be an\n   * instance of a `Point` or a JSON string representation in the format of\n   * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ attribute: 'end' })\n  public endJson?: string;\n\n  /**\n   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * The style of the starting anchor. This defaults to none.\n   */\n  @Prop({ mutable: true })\n  public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n  /**\n   * The style of the ending anchor. This defaults to 'arrow-triangle.'\n   */\n  @Prop({ mutable: true })\n  public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n  /**\n   * A mode that specifies how the markup component should behave. When\n   * unset, the component will not respond to interactions with the handles.\n   * When `edit`, the markup anchors are interactive and the user is able\n   * to reposition them. When `create`, anytime the user clicks on the canvas,\n   * a new markup will be performed.\n   */\n  @Prop({ reflect: true })\n  public mode: ViewerMarkupArrowMode = '';\n\n  /**\n   * The viewer to connect to markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\n\n  /**\n   * An event that is dispatched when this markup element is in view\n   * mode (`this.mode === \"\"`), and it completes a rerender.\n   */\n  @Event({ bubbles: true })\n  public viewRendered!: EventEmitter<void>;\n\n  @Element()\n  private hostEl!: HTMLVertexViewerMarkupArrowElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  private interactionHandler = new ArrowMarkupInteractionHandler(\n    this.hostEl,\n    this.interactionBegin,\n    this.interactionEnd\n  );\n\n  private registeredInteraction?: Disposable;\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.updateViewport();\n    this.handleViewerChanged(this.viewer);\n    this.updatePointsFromProps();\n  }\n\n  protected componentDidLoad(): void {\n    this.updatePointsFromProps();\n\n    const resize = new ResizeObserver(() => this.updateViewport());\n    resize.observe(this.hostEl);\n\n    if (this.mode === 'create') {\n      window.addEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  protected componentDidRender(): void {\n    if (this.mode === '') {\n      this.viewRendered.emit();\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.dispose();\n  }\n\n  @Method()\n  public async dispose(): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected async handleViewerChanged(\n    newViewer?: HTMLVertexViewerElement\n  ): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    if (newViewer != null) {\n      this.registeredInteraction = await newViewer.registerInteractionHandler(\n        this.interactionHandler\n      );\n    }\n  }\n\n  @Watch('start')\n  protected handleStartJsonChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('end')\n  protected handleEndJsonChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('mode')\n  protected handleModeChange(): void {\n    if (this.mode !== 'create') {\n      window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-arrow-scale',\n        this.scale?.toString() ?? '1'\n      );\n    });\n  }\n\n  private updateViewport(): void {\n    const rect = getMarkupBoundingClientRect(this.hostEl);\n    this.elementBounds = rect;\n  }\n\n  private updatePointsFromProps(): void {\n    this.start = this.start || parsePoint(this.startJson);\n    this.end = this.end || parsePoint(this.endJson);\n  }\n\n  private renderLineAnchorStyle(\n    anchorStyle: LineAnchorStyle,\n    arrowheadPoints: LineAnchorStylePoints\n  ): h.JSX.IntrinsicElements {\n    if (anchorStyle === 'arrow-triangle') {\n      return (\n        <polygon\n          id=\"line-anchor-arrow-triangle\"\n          class=\"head\"\n          points={arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'arrow-line') {\n      return (\n        <path\n          id=\"line-anchor-arrow-line\"\n          class=\"head\"\n          d={arrowheadPointsToPathPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'hash') {\n      const hashPoints = arrowheadPointsToHashPoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <line id=\"line-anchor-hash\" class=\"head\" {...hashPoints} />;\n    } else if (anchorStyle === 'dot') {\n      const circlePoints = arrowheadPointsToCirclePoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <circle id=\"line-anchor-circle\" class=\"head\" {...circlePoints} />;\n    } else {\n      return <div />;\n    }\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.start != null && this.end != null && this.elementBounds != null) {\n      const elementBounds = this.elementBounds;\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n      const screenStart = translatePointToScreen(\n        this.start,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const screenEnd = translatePointToScreen(\n        this.end,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n\n      if (isValidPointData(screenStart, screenEnd)) {\n        const arrowheadStartPoints = createLineAnchorStylePoints(\n          screenEnd,\n          screenStart\n        );\n        const arrowheadEndPoints = createLineAnchorStylePoints(\n          screenStart,\n          screenEnd\n        );\n\n        return (\n          <Host>\n            <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n              <defs>\n                <SvgShadow id=\"arrow-shadow\" />\n              </defs>\n              <g\n                transform={`translate(${offsetX} ${offsetY})`}\n                filter=\"url(#arrow-shadow)\"\n              >\n                {this.renderLineAnchorStyle(\n                  this.startLineAnchorStyle,\n                  arrowheadStartPoints\n                )}\n                <line\n                  id=\"arrow-line\"\n                  class=\"line\"\n                  x1={arrowheadEndPoints.tip.x}\n                  y1={arrowheadEndPoints.tip.y}\n                  x2={arrowheadStartPoints.tip.x}\n                  y2={arrowheadStartPoints.tip.y}\n                />\n                {this.renderLineAnchorStyle(\n                  this.endLineAnchorStyle,\n                  arrowheadEndPoints\n                )}\n              </g>\n              {this.mode === 'edit' && (\n                <g transform={`translate(${offsetX} ${offsetY})`}>\n                  <line\n                    id=\"bounding-box-1d-line\"\n                    class=\"bounds-line\"\n                    x1={screenStart.x}\n                    y1={screenStart.y}\n                    x2={screenEnd.x}\n                    y2={screenEnd.y}\n                  />\n                </g>\n              )}\n            </svg>\n            {this.mode === 'edit' && (\n              <BoundingBox1d\n                start={screenStart}\n                end={screenEnd}\n                offset={{ x: offsetX, y: offsetY }}\n                onStartAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('start', event)\n                }\n                onCenterAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('center', event)\n                }\n                onEndAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('end', event)\n                }\n              />\n            )}\n            {this.mode === 'create' && (\n              <div\n                class=\"create-overlay\"\n                onTouchStart={this.handleTouchStart}\n              ></div>\n            )}\n          </Host>\n        );\n      } else {\n        return <Host></Host>;\n      }\n    } else {\n      return (\n        <Host>\n          <div\n            class=\"create-overlay\"\n            onTouchStart={this.handleTouchStart}\n          ></div>\n        </Host>\n      );\n    }\n  }\n\n  private handleWindowPointerDown = (event: PointerEvent): void => {\n    if (isValidStartEvent(event)) {\n      this.interactionHandler.startInteraction(event);\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent): void => {\n    event.preventDefault();\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ArrowMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","super","this","anchor","editAnchor","event","mode","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","start","_a","translatePointToRelative","getMouseClientPosition","emit","acceptInteraction","handleInteractionMove","position","end","center","Point","create","x","y","xDifference","yDifference","handleInteractionEnd","screenStart","translatePointToScreen","undefined","screenEnd","distance","newlyCreatedMarkup","markup","BoundingBox1d","offset","onStartAnchorPointerDown","onCenterAnchorPointerDown","onEndAnchorPointerDown","angle","Angle","normalize","toDegrees","fromPoints","transform","h","class","RelativeAnchor","id","name","rotation","point","onPointerDown","classNames","viewerMarkupArrowCss","ViewerMarkupArrow","__stencil_proxyCustomElement","HTMLElement","registerHost","centeringBehavior","scale","startLineAnchorStyle","endLineAnchorStyle","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","updatePointsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","componentDidRender","viewRendered","disconnectedCallback","dispose","registeredInteraction","removeEventListener","newViewer","registerInteractionHandler","handleStartJsonChange","handleEndJsonChange","handleModeChange","handleScaleChange","writeDOM","style","setProperty","_b","toString","rect","parsePoint","startJson","endJson","renderLineAnchorStyle","anchorStyle","arrowheadPoints","points","arrowheadPointsToPolygonPoints","d","arrowheadPointsToPathPoints","hashPoints","arrowheadPointsToHashPoints","circlePoints","arrowheadPointsToCirclePoints","render","offsetX","getWindowDevicePixelRatio","offsetY","_d","_c","originatingViewport","isValidPointData","arrowheadStartPoints","createLineAnchorStylePoints","arrowheadEndPoints","Host","onTouchStart","SvgShadow","filter","x1","tip","y1","x2","y2"],"sources":["src/components/viewer-markup-arrow/interactions.ts","src/components/viewer-markup-arrow/viewer-markup-arrow-components.tsx","src/components/viewer-markup-arrow/viewer-markup-arrow.css?tag=vertex-viewer-markup-arrow&encapsulation=shadow","src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { MarkupInteractionHandler } from '../../lib/markup/interactions';\nimport { MarkupInteraction } from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  translatePointToRelative,\n  translatePointToScreen,\n} from '../viewer-markup/markup-utils';\n\ntype ViewerMarkupArrowEditAnchor = 'start' | 'end' | 'center';\n\nexport class ArrowMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private anchor: ViewerMarkupArrowEditAnchor = 'end';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupArrowElement,\n    private readonly interactionBegin: EventEmitter<void>,\n    private readonly interactionEnd: EventEmitter<MarkupInteraction>\n  ) {\n    super();\n  }\n\n  public editAnchor(\n    anchor: ViewerMarkupArrowEditAnchor,\n    event: PointerEvent\n  ): void {\n    if (this.markupEl.mode === 'edit') {\n      this.anchor = anchor;\n      this.startInteraction(event);\n    }\n  }\n\n  public startInteraction(event: PointerEvent): void {\n    this.handleInteractionAttempt(event);\n  }\n\n  protected computeBoundingRect(): DOMRect {\n    return getMarkupBoundingClientRect(this.markupEl);\n  }\n\n  protected handleInteractionAttempt(event: PointerEvent): void {\n    if (\n      this.markupEl.mode !== '' &&\n      this.pointerId == null &&\n      this.elementBounds != null\n    ) {\n      this.pointerId = event.pointerId;\n      this.markupEl.start =\n        this.markupEl.start ??\n        translatePointToRelative(\n          getMouseClientPosition(event, this.elementBounds),\n          this.elementBounds\n        );\n\n      this.interactionBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (this.elementBounds != null && this.pointerId === event.pointerId) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds\n      );\n      if (this.anchor === 'start') {\n        this.markupEl.start = position;\n      } else if (this.anchor === 'end') {\n        this.markupEl.end = position;\n      } else if (this.markupEl.start != null && this.markupEl.end != null) {\n        const center = Point.create(\n          (this.markupEl.start.x + this.markupEl.end.x) / 2,\n          (this.markupEl.start.y + this.markupEl.end.y) / 2\n        );\n        const xDifference = center.x - position.x;\n        const yDifference = center.y - position.y;\n\n        this.markupEl.start = Point.create(\n          this.markupEl.start.x - xDifference,\n          this.markupEl.start.y - yDifference\n        );\n        this.markupEl.end = Point.create(\n          this.markupEl.end.x - xDifference,\n          this.markupEl.end.y - yDifference\n        );\n      }\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      const screenStart =\n        this.markupEl.start != null && this.elementBounds != null\n          ? translatePointToScreen(this.markupEl.start, this.elementBounds)\n          : undefined;\n      const screenEnd =\n        this.markupEl.end != null && this.elementBounds != null\n          ? translatePointToScreen(this.markupEl.end, this.elementBounds)\n          : undefined;\n\n      if (\n        this.markupEl.mode !== '' &&\n        screenStart != null &&\n        screenEnd != null &&\n        Point.distance(screenStart, screenEnd) >= 2\n      ) {\n        const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n        this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\n      } else {\n        this.markupEl.start = undefined;\n        this.markupEl.end = undefined;\n      }\n\n      this.pointerId = undefined;\n    }\n  }\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Angle, Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { RelativeAnchor } from '../viewer-markup/viewer-markup-components';\n\nexport interface BoundingBox1dProps {\n  start: Point.Point;\n  end: Point.Point;\n  offset?: Point.Point;\n  onStartAnchorPointerDown?: (event: PointerEvent) => void;\n  onCenterAnchorPointerDown?: (event: PointerEvent) => void;\n  onEndAnchorPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const BoundingBox1d: FunctionalComponent<BoundingBox1dProps> = ({\n  start,\n  end,\n  offset,\n  onStartAnchorPointerDown,\n  onCenterAnchorPointerDown,\n  onEndAnchorPointerDown,\n}) => {\n  const angle = Angle.normalize(\n    Angle.toDegrees(Angle.fromPoints(start, end)) - 270\n  );\n  const center = Point.create((start.x + end.x) / 2, (start.y + end.y) / 2);\n  const transform =\n    offset != null ? `translate(${offset.x}px, ${offset.y}px)` : undefined;\n\n  return (\n    <div class=\"bounds-container\">\n      <RelativeAnchor\n        transform={transform}\n        id=\"bounding-box-1d-start-anchor\"\n        name=\"start-anchor\"\n        rotation={angle}\n        point={start}\n        onPointerDown={onStartAnchorPointerDown}\n      >\n        <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n      </RelativeAnchor>\n      <RelativeAnchor\n        transform={transform}\n        id=\"bounding-box-1d-end-anchor\"\n        name=\"end-anchor\"\n        rotation={angle}\n        point={end}\n        onPointerDown={onEndAnchorPointerDown}\n      >\n        <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n      </RelativeAnchor>\n      <RelativeAnchor\n        transform={transform}\n        id=\"bounding-box-1d-center-anchor\"\n        name=\"center-anchor\"\n        point={center}\n        onPointerDown={onCenterAnchorPointerDown}\n      >\n        <div\n          class={classNames('bounds-default-anchor', 'bounds-center-anchor')}\n        />\n      </RelativeAnchor>\n    </div>\n  );\n};\n",":host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  /**\n   * @prop --viewer-markup-arrow-line-stroke-color: A CSS color that\n   * specifies the color of the arrow line's outline.\n   */\n  --viewer-markup-arrow-line-stroke-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-line-stroke-width: A CSS length that\n   * specifies the width of the arrow line's outline.\n   *\n   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-arrow-line-stroke-width: 4px;\n  /**\n   * @prop --viewer-markup-arrow-head-stroke-color: A CSS color that\n   * specifies the color of the arrow head's outline.\n   */\n  --viewer-markup-arrow-head-stroke-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-head-stroke-width: A CSS length that\n   * specifies the width of the arrow head's outline.\n   *\n   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-arrow-head-stroke-width: 4px;\n  /**\n   * @prop --viewer-markup-arrow-head-fill-color: A CSS color that\n   * specifies the color of the arrow head's fill.\n   */\n  --viewer-markup-arrow-head-fill-color: var(--red-800);\n  /**\n   * @prop --viewer-markup-arrow-head-fill-opacity: A number between\n   * 0 and 1 that specifies the opacity of the arrow head's fill.\n   */\n  --viewer-markup-arrow-head-fill-opacity: 1;\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-border-color: A CSS color that\n   * specifies the color of arrow start/end resize anchors' border.\n   */\n  --viewer-markup-arrow-bounds-cap-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-border-width: A CSS length that\n   * specifies the width of arrow start/end resize anchors' border.\n   */\n  --viewer-markup-arrow-bounds-cap-border-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-cap-background-color: A CSS color that\n   * specifies the background color of the arrow start/end resize anchors.\n   */\n  --viewer-markup-arrow-bounds-cap-background-color: white;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-border-color: A CSS color that\n   * specifies the color of the center resize anchor's border.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-border-color: white;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-border-width: A CSS length that\n   * specifies the width of the center resize anchor's border.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-center-anchor-background-color: A CSS color that\n   * specifies the background color of the center resize anchor.\n   */\n  --viewer-markup-arrow-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-outline-width: A CSS color that\n   * specifies the width of the selected arrow outline.\n   */\n  --viewer-markup-arrow-bounds-outline-width: 1px;\n  /**\n   * @prop --viewer-markup-arrow-bounds-outline-color: A CSS color that\n   * specifies the color of selected arrow outline.\n   */\n  --viewer-markup-arrow-bounds-outline-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-arrow-bounds-anchor-width: A CSS length that\n   * specifies the width of the resize and reposition anchors.\n   */\n  --viewer-markup-arrow-bounds-anchor-width: 9px;\n  /**\n    * @prop --viewer-markup-arrow-bounds-anchor-height: A CSS length that\n    * specifies the height of the resize and reposition anchors.\n    */\n  --viewer-markup-arrow-bounds-anchor-height: 9px;\n  /**\n    * @prop --viewer-markup-arrow-scale: A number that specifies the scale of the arrow.\n    * This is used to scale the arrow's stroke width. Defaults to 1, and is managed internally\n    * by the component.\n    */\n  --viewer-markup-arrow-scale: 1;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n}\n\n.create-overlay {\n  pointer-events: auto;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n}\n\n.line {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-line-stroke-color);\n  stroke-width: calc(\n    var(--viewer-markup-arrow-line-stroke-width) *\n      var(--viewer-markup-arrow-scale)\n  );\n  cursor: default;\n}\n\n.head {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-head-stroke-color);\n  stroke-width: calc(\n    var(--viewer-markup-arrow-head-stroke-width) *\n      var(--viewer-markup-arrow-scale)\n  );\n  fill: var(--viewer-markup-arrow-head-fill-color);\n  fill-opacity: var(--viewer-markup-arrow-head-fill-opacity);\n  cursor: default;\n}\n\n.bounds-line {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-arrow-bounds-outline-color);\n  stroke-width: var(--viewer-markup-arrow-bounds-outline-width);\n}\n\n.bounds-container {\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.bounds-anchor-position {\n  position: absolute;\n  transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n  pointer-events: auto;\n  cursor: default;\n  user-select: none;\n}\n\n.bounds-default-anchor {\n  width: var(--viewer-markup-arrow-bounds-anchor-width);\n  height: var(--viewer-markup-arrow-bounds-anchor-height);\n  box-sizing: border-box;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n  border-radius: 100%;\n  border-width: var(--viewer-markup-arrow-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-arrow-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(\n    --viewer-markup-arrow-bounds-center-anchor-background-color\n  );\n}\n\n.bounds-cap-anchor {\n  border-width: var(--viewer-markup-arrow-bounds-cap-border-width);\n  border-color: var(--viewer-markup-arrow-bounds-cap-border-color);\n  border-style: solid;\n  background-color: var(--viewer-markup-arrow-bounds-cap-background-color);\n}\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 { Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidPointData,\n  isValidStartEvent,\n  translatePointToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { ArrowMarkupInteractionHandler } from './interactions';\nimport {\n  arrowheadPointsToCirclePoints,\n  arrowheadPointsToHashPoints,\n  arrowheadPointsToPathPoints,\n  arrowheadPointsToPolygonPoints,\n  createLineAnchorStylePoints,\n  LineAnchorStyle,\n  LineAnchorStylePoints,\n  parsePoint,\n} from './utils';\nimport { BoundingBox1d } from './viewer-markup-arrow-components';\n\n/**\n * The supported arrow markup modes.\n *\n * @see {@link ViewerMarkupArrowMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupArrowMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-arrow',\n  styleUrl: 'viewer-markup-arrow.css',\n  shadow: true,\n})\nexport class ViewerMarkupArrow {\n  /**\n   * The position of the starting anchor. Can either be an instance of a\n   * `Point` or a JSON string representation in the format of `[x, y]` or\n   * `{\"x\": 0, \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public start?: Point.Point;\n\n  /**\n   * The position of the starting anchor, as a JSON string. Can either be an\n   * instance of a `Point` or a JSON string representation in the format of\n   * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ attribute: 'start' })\n  public startJson?: string;\n\n  /**\n   * The position of the ending anchor. Can either be an instance of a `Point`\n   * or a JSON string representation in the format of `[x, y]` or `{\"x\": 0,\n   * \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ mutable: true })\n  public end?: Point.Point;\n\n  /**\n   * The position of the ending anchor, as a JSON string. Can either be an\n   * instance of a `Point` or a JSON string representation in the format of\n   * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n   *\n   * Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n   * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n   */\n  @Prop({ attribute: 'end' })\n  public endJson?: string;\n\n  /**\n   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * The style of the starting anchor. This defaults to none.\n   */\n  @Prop({ mutable: true })\n  public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n  /**\n   * The style of the ending anchor. This defaults to 'arrow-triangle.'\n   */\n  @Prop({ mutable: true })\n  public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n  /**\n   * A mode that specifies how the markup component should behave. When\n   * unset, the component will not respond to interactions with the handles.\n   * When `edit`, the markup anchors are interactive and the user is able\n   * to reposition them. When `create`, anytime the user clicks on the canvas,\n   * a new markup will be performed.\n   */\n  @Prop({ reflect: true })\n  public mode: ViewerMarkupArrowMode = '';\n\n  /**\n   * The viewer to connect to markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * An event that is dispatched anytime the user begins interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when the user has finished interacting with the\n   * markup.\n   */\n  @Event({ bubbles: true })\n  public interactionEnd!: EventEmitter<MarkupInteraction>;\n\n  /**\n   * An event that is dispatched when this markup element is in view\n   * mode (`this.mode === \"\"`), and it completes a rerender.\n   */\n  @Event({ bubbles: true })\n  public viewRendered!: EventEmitter<void>;\n\n  @Element()\n  private hostEl!: HTMLVertexViewerMarkupArrowElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  private interactionHandler = new ArrowMarkupInteractionHandler(\n    this.hostEl,\n    this.interactionBegin,\n    this.interactionEnd\n  );\n\n  private registeredInteraction?: Disposable;\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.updateViewport();\n    this.handleViewerChanged(this.viewer);\n    this.updatePointsFromProps();\n  }\n\n  protected componentDidLoad(): void {\n    this.updatePointsFromProps();\n\n    const resize = new ResizeObserver(() => this.updateViewport());\n    resize.observe(this.hostEl);\n\n    if (this.mode === 'create') {\n      window.addEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  protected componentDidRender(): void {\n    if (this.mode === '') {\n      this.viewRendered.emit();\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.dispose();\n  }\n\n  @Method()\n  public async dispose(): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected async handleViewerChanged(\n    newViewer?: HTMLVertexViewerElement\n  ): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    if (newViewer != null) {\n      this.registeredInteraction = await newViewer.registerInteractionHandler(\n        this.interactionHandler\n      );\n    }\n  }\n\n  @Watch('start')\n  protected handleStartJsonChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('end')\n  protected handleEndJsonChange(): void {\n    this.updatePointsFromProps();\n  }\n\n  @Watch('mode')\n  protected handleModeChange(): void {\n    if (this.mode !== 'create') {\n      window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-arrow-scale',\n        this.scale?.toString() ?? '1'\n      );\n    });\n  }\n\n  private updateViewport(): void {\n    const rect = getMarkupBoundingClientRect(this.hostEl);\n    this.elementBounds = rect;\n  }\n\n  private updatePointsFromProps(): void {\n    this.start = this.start || parsePoint(this.startJson);\n    this.end = this.end || parsePoint(this.endJson);\n  }\n\n  private renderLineAnchorStyle(\n    anchorStyle: LineAnchorStyle,\n    arrowheadPoints: LineAnchorStylePoints\n  ): h.JSX.IntrinsicElements {\n    if (anchorStyle === 'arrow-triangle') {\n      return (\n        <polygon\n          id=\"line-anchor-arrow-triangle\"\n          class=\"head\"\n          points={arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'arrow-line') {\n      return (\n        <path\n          id=\"line-anchor-arrow-line\"\n          class=\"head\"\n          d={arrowheadPointsToPathPoints(arrowheadPoints, this.scale)}\n        />\n      );\n    } else if (anchorStyle === 'hash') {\n      const hashPoints = arrowheadPointsToHashPoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <line id=\"line-anchor-hash\" class=\"head\" {...hashPoints} />;\n    } else if (anchorStyle === 'dot') {\n      const circlePoints = arrowheadPointsToCirclePoints(\n        arrowheadPoints,\n        this.scale\n      );\n\n      return <circle id=\"line-anchor-circle\" class=\"head\" {...circlePoints} />;\n    } else {\n      return <div />;\n    }\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (this.start != null && this.end != null && this.elementBounds != null) {\n      const elementBounds = this.elementBounds;\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n      const screenStart = translatePointToScreen(\n        this.start,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const screenEnd = translatePointToScreen(\n        this.end,\n        elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n\n      if (isValidPointData(screenStart, screenEnd)) {\n        const arrowheadStartPoints = createLineAnchorStylePoints(\n          screenEnd,\n          screenStart\n        );\n        const arrowheadEndPoints = createLineAnchorStylePoints(\n          screenStart,\n          screenEnd\n        );\n\n        return (\n          <Host>\n            <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n              <defs>\n                <SvgShadow id=\"arrow-shadow\" scale={this.scale} />\n              </defs>\n              <g\n                transform={`translate(${offsetX} ${offsetY})`}\n                filter=\"url(#arrow-shadow)\"\n              >\n                {this.renderLineAnchorStyle(\n                  this.startLineAnchorStyle,\n                  arrowheadStartPoints\n                )}\n                <line\n                  id=\"arrow-line\"\n                  class=\"line\"\n                  x1={arrowheadEndPoints.tip.x}\n                  y1={arrowheadEndPoints.tip.y}\n                  x2={arrowheadStartPoints.tip.x}\n                  y2={arrowheadStartPoints.tip.y}\n                />\n                {this.renderLineAnchorStyle(\n                  this.endLineAnchorStyle,\n                  arrowheadEndPoints\n                )}\n              </g>\n              {this.mode === 'edit' && (\n                <g transform={`translate(${offsetX} ${offsetY})`}>\n                  <line\n                    id=\"bounding-box-1d-line\"\n                    class=\"bounds-line\"\n                    x1={screenStart.x}\n                    y1={screenStart.y}\n                    x2={screenEnd.x}\n                    y2={screenEnd.y}\n                  />\n                </g>\n              )}\n            </svg>\n            {this.mode === 'edit' && (\n              <BoundingBox1d\n                start={screenStart}\n                end={screenEnd}\n                offset={{ x: offsetX, y: offsetY }}\n                onStartAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('start', event)\n                }\n                onCenterAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('center', event)\n                }\n                onEndAnchorPointerDown={(event) =>\n                  this.interactionHandler.editAnchor('end', event)\n                }\n              />\n            )}\n            {this.mode === 'create' && (\n              <div\n                class=\"create-overlay\"\n                onTouchStart={this.handleTouchStart}\n              ></div>\n            )}\n          </Host>\n        );\n      } else {\n        return <Host></Host>;\n      }\n    } else {\n      return (\n        <Host>\n          <div\n            class=\"create-overlay\"\n            onTouchStart={this.handleTouchStart}\n          ></div>\n        </Host>\n      );\n    }\n  }\n\n  private handleWindowPointerDown = (event: PointerEvent): void => {\n    if (isValidStartEvent(event)) {\n      this.interactionHandler.startInteraction(event);\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent): void => {\n    event.preventDefault();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-Dru_6caB.js → p-DXGQW235.js}

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{a as t,g as n,p as o,e as s}from"./p-Tvs4yxd5.js";import{h as r}from"./p-DmsAWRoU.js";function e(t=0,n=0){return{x:t,y:n}}function c(t,n){const o=i(t,n);return Math.sqrt(o.x*o.x+o.y*o.y)}function i(t,n){return{x:t.x-n.x,y:t.y-n.y}}function u(t,n){return{x:t.x+n.x,y:t.y+n.y}}function a(t,n){return{x:t.x*n,y:t.y*n}}function f(t){return Math.sqrt(t.x*t.x+t.y*t.y)}function h(t){const n=f(t);if(n===0){return e(0,0)}else{return a(t,1/n)}}function l(t,n){return h(i(n,t))}function d(t,n){const o=l(t,n);if(o.x===0||o.y===0){return e(-1*o.y,o.x)}if(Math.abs(o.x)>Math.abs(o.y)){const t=1-Math.pow(o.x,2);const n=-1*o.x*o.y;return h(e(t,n))}else{const t=-1*o.x*o.y;const n=1-Math.pow(o.y,2);return h(e(t,n))}}function p(t){const n=JSON.parse(t);if(Array.isArray(n)){const[t,o]=n;return e(t,o)}else{const{x:t,y:o}=n;return e(t,o)}}function M(t,n,o,s){const r=d(t,n);const e=l(t,n);const c=i(n,u(a(e,o*Math.cos(s)),a(r,o*Math.sin(s))));const f=i(n,i(a(e,o*Math.cos(s)),a(r,o*Math.sin(s))));return{leftPoint:c,rightPoint:f}}function m(n,o,s=65,r=85){const e=c(n,o);const i=Math.max(4,Math.min(16,e*.25));const f=Math.max(4,Math.min(12,e*.16));const h=Math.min(5,e*.1);const l=i/e;const d=u(a(o,1-l),a(n,l));const p=t.toRadians(s/2);const m=i/Math.cos(p);const y=M(n,o,m,p);const g=t.toRadians(r/2);const w=i/Math.cos(g);const E=M(n,o,w,g);const R=t.toRadians(90);const b=M(n,o,f,R);return{tip:o,base:d,arrowTriangle:y,arrowLine:E,hash:b,radius:h}}function y(t,n=1){const o=x(t.tip,t.arrowTriangle.rightPoint,n);const s=x(t.tip,t.arrowTriangle.leftPoint,n);const r=x(t.tip,t.base,n);return[t.tip,o,r,s].map((t=>`${t.x},${t.y}`)).join(" ")}function g(t,n=1){const o=x(t.tip,t.arrowLine.rightPoint,n);const s=x(t.tip,t.arrowLine.leftPoint,n);return`M${o.x} ${o.y} L${t.tip.x} ${t.tip.y} L${s.x} ${s.y} L${t.tip.x} ${t.tip.y} Z`}function w(t,n=1){const o=x(t.tip,t.hash.rightPoint,n);const s=x(t.tip,t.hash.leftPoint,n);return{x1:o.x,y1:o.y,x2:s.x,y2:s.y}}function E(t,n=1){return{cx:t.tip.x,cy:t.tip.y,r:t.radius*n}}function R(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-MARKUP-ARROW"}function b(t){return typeof t==="string"?p(t):t}function x(t,n,o){return u(t,a(i(n,t),o))}function $(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-MARKUP-CIRCLE"}function v(t){return typeof t==="string"?n.fromJson(t):t}function N(t){return typeof t==="string"?JSON.parse(t).map((t=>o.fromJson(JSON.stringify(t)))):t}function T(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-MARKUP-FREEFORM"}function L(t,s){switch(s){case"top-left":return o.create(t.x,t.y);case"top":return o.create(t.x+t.width/2,t.y);case"top-right":return o.create(t.x+t.width,t.y);case"right":return o.create(t.x+t.width,t.y+t.height/2);case"bottom-right":return o.create(t.x+t.width,t.y+t.height);case"bottom":return o.create(t.x+t.width/2,t.y+t.height);case"bottom-left":return o.create(t.x,t.y+t.height);case"left":return o.create(t.x,t.y+t.height/2);case"center":return n.center(t)}}function A(t,n,r=n,e="none",c=1){const i=Math.min(n.width/r.width,n.height/r.height);const u=i*c;const a=C(r);const f=o.add(o.scale(t,a,a),s.center(r));const h=r.width*u;const l=r.height*u;const d=e==="both"||e==="x-only"?Math.max(0,(n.width-h)/2):0;const p=e==="both"||e==="y-only"?Math.max(0,(n.height-l)/2):0;return o.create(f.x*u+d,f.y*u+p)}function O(t,n,o=n,r=1){const e=Math.min(n.width/o.width,n.height/o.height);const c=e*r;const i=C(o);const u=s.scale(i,i,t);return s.scale(c,c,u)}function P(t,o,s,r="none",e=1){const c=A(t,o,s,r,e);const i=O(t,o,s,e);return n.fromPointAndDimensions(c,i)}function S(t,n){const r=1/C(n);const e=o.scale(o.subtract(t,s.center(n)),r,r);return e}function V(t,n,s){return t.map((t=>o.add(o.scale(o.subtract(t,n),s.width/(n.width||1),s.height/(n.height||1)),s)))}function I(t,o,s){const r=n.fromPoints(t,o);if(s){const s=Math.max(r.width,r.height);const e=r.height>r.width;const c=o.x<=t.x;const i=o.y<=t.y;const u=c?e?t.x-s:o.x:t.x;const a=i?e?o.y:t.y-s:t.y;return n.create(u,a,s,s)}else{return r}}function W(t,s,r,e,c){const i=o.subtract(r,s);const{x:u,y:a,width:f,height:h}=t;const l=u+f;const d=a+h;const p=o.create(u,a);const M=o.create(u,d);const m=o.create(l,a);const y=o.create(l,d);switch(e){case"top-left":return I(y,r,!!c);case"top":return I(y,o.create(u,r.y),!!c);case"top-right":return I(M,r,!!c);case"right":return I(M,o.create(r.x,a),!!c);case"bottom-right":return I(p,r,!!c);case"bottom":return I(p,o.create(l,r.y),!!c);case"bottom-left":return I(m,r,!!c);case"left":return I(y,o.create(r.x,a),!!c);case"center":return n.create(t.x+i.x,t.y+i.y,t.width,t.height)}}function D(t){return R(t)||$(t)||T(t)}function U(...t){return t.every((t=>!isNaN(t.x)&&!isNaN(t.y)))}function j(t){const n=t.target;return D(n)&&n.mode!=="edit"}function C(t){return t.height}const F=({id:t,transform:n,rotation:o,name:s,point:e,onPointerDown:c},i)=>r("div",{id:t,class:"bounds-anchor-position",style:{top:`${e.y}px`,left:`${e.x}px`},onTouchStart:t=>t.preventDefault(),onPointerDown:c},r("div",{style:{transform:n}},r("div",{class:"bounds-anchor",style:{transform:`rotateZ(${o!==null&&o!==void 0?o:0}deg)`}},r("slot",{name:s},i))));const H=({id:t})=>r("filter",{id:t},r("feGaussianBlur",{in:"SourceAlpha",stdDeviation:"2"}),r("feOffset",{dx:"0",dy:"1",result:"offsetblur"}),r("feFlood",{"flood-color":"#000000","flood-opacity":"0.25"}),r("feComposite",{in2:"offsetblur",operator:"in"}),r("feMerge",null,r("feMergeNode",null),r("feMergeNode",{in:"SourceGraphic"})));class J{constructor(){this.handlePointerDown=t=>{this.handleInteractionAttempt(t)};this.handlePointerMove=t=>{this.handleInteractionMove(t)};this.handlePointerUp=t=>{window.removeEventListener("pointermove",this.handlePointerMove);window.removeEventListener("pointerup",this.handlePointerUp);this.handleInteractionEnd(t)};this.resizeObserver=new ResizeObserver((([t])=>{this.elementBounds=this.computeBoundingRect()}))}initialize(t,n){this.element=t;this.api=n;this.elementBounds=this.computeBoundingRect();this.resizeObserver.observe(this.element);this.element.addEventListener("pointerdown",this.handlePointerDown)}dispose(){var t;this.resizeObserver.disconnect();(t=this.element)===null||t===void 0?void 0:t.removeEventListener("pointerdown",this.handlePointerDown);this.element=undefined;this.api=undefined}acceptInteraction(){window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}export{J as M,F as R,H as S,$ as a,T as b,A as c,j as d,y as e,g as f,w as g,E as h,R as i,U as j,m as k,W as l,v as m,P as n,V as o,b as p,N as q,L as r,S as t};
-//# sourceMappingURL=p-Dru_6caB.js.map
+import{a as t,g as n,p as o,e as s}from"./p-Tvs4yxd5.js";import{h as r}from"./p-DmsAWRoU.js";function e(t=0,n=0){return{x:t,y:n}}function c(t,n){const o=i(t,n);return Math.sqrt(o.x*o.x+o.y*o.y)}function i(t,n){return{x:t.x-n.x,y:t.y-n.y}}function u(t,n){return{x:t.x+n.x,y:t.y+n.y}}function a(t,n){return{x:t.x*n,y:t.y*n}}function f(t){return Math.sqrt(t.x*t.x+t.y*t.y)}function h(t){const n=f(t);if(n===0){return e(0,0)}else{return a(t,1/n)}}function l(t,n){return h(i(n,t))}function d(t,n){const o=l(t,n);if(o.x===0||o.y===0){return e(-1*o.y,o.x)}if(Math.abs(o.x)>Math.abs(o.y)){const t=1-Math.pow(o.x,2);const n=-1*o.x*o.y;return h(e(t,n))}else{const t=-1*o.x*o.y;const n=1-Math.pow(o.y,2);return h(e(t,n))}}function p(t){const n=JSON.parse(t);if(Array.isArray(n)){const[t,o]=n;return e(t,o)}else{const{x:t,y:o}=n;return e(t,o)}}function M(t,n,o,s){const r=d(t,n);const e=l(t,n);const c=i(n,u(a(e,o*Math.cos(s)),a(r,o*Math.sin(s))));const f=i(n,i(a(e,o*Math.cos(s)),a(r,o*Math.sin(s))));return{leftPoint:c,rightPoint:f}}function m(n,o,s=65,r=85){const e=c(n,o);const i=Math.max(4,Math.min(16,e*.25));const f=Math.max(4,Math.min(12,e*.16));const h=Math.min(5,e*.1);const l=i/e;const d=u(a(o,1-l),a(n,l));const p=t.toRadians(s/2);const m=i/Math.cos(p);const y=M(n,o,m,p);const g=t.toRadians(r/2);const w=i/Math.cos(g);const E=M(n,o,w,g);const R=t.toRadians(90);const $=M(n,o,f,R);return{tip:o,base:d,arrowTriangle:y,arrowLine:E,hash:$,radius:h}}function y(t,n=1){const o=x(t.tip,t.arrowTriangle.rightPoint,n);const s=x(t.tip,t.arrowTriangle.leftPoint,n);const r=x(t.tip,t.base,n);return[t.tip,o,r,s].map((t=>`${t.x},${t.y}`)).join(" ")}function g(t,n=1){const o=x(t.tip,t.arrowLine.rightPoint,n);const s=x(t.tip,t.arrowLine.leftPoint,n);return`M${o.x} ${o.y} L${t.tip.x} ${t.tip.y} L${s.x} ${s.y} L${t.tip.x} ${t.tip.y} Z`}function w(t,n=1){const o=x(t.tip,t.hash.rightPoint,n);const s=x(t.tip,t.hash.leftPoint,n);return{x1:o.x,y1:o.y,x2:s.x,y2:s.y}}function E(t,n=1){return{cx:t.tip.x,cy:t.tip.y,r:t.radius*n}}function R(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-MARKUP-ARROW"}function $(t){return typeof t==="string"?p(t):t}function x(t,n,o){return u(t,a(i(n,t),o))}function b(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-MARKUP-CIRCLE"}function v(t){return typeof t==="string"?n.fromJson(t):t}function N(t){return typeof t==="string"?JSON.parse(t).map((t=>o.fromJson(JSON.stringify(t)))):t}function T(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-MARKUP-FREEFORM"}function L(t,s){switch(s){case"top-left":return o.create(t.x,t.y);case"top":return o.create(t.x+t.width/2,t.y);case"top-right":return o.create(t.x+t.width,t.y);case"right":return o.create(t.x+t.width,t.y+t.height/2);case"bottom-right":return o.create(t.x+t.width,t.y+t.height);case"bottom":return o.create(t.x+t.width/2,t.y+t.height);case"bottom-left":return o.create(t.x,t.y+t.height);case"left":return o.create(t.x,t.y+t.height/2);case"center":return n.center(t)}}function O(t,n,r=n,e="none",c=1){const i=Math.min(n.width/r.width,n.height/r.height);const u=i*c;const a=C(r);const f=o.add(o.scale(t,a,a),s.center(r));const h=r.width*u;const l=r.height*u;const d=e==="both"||e==="x-only"?Math.max(0,(n.width-h)/2):0;const p=e==="both"||e==="y-only"?Math.max(0,(n.height-l)/2):0;return o.create(f.x*u+d,f.y*u+p)}function S(t,n,o=n,r=1){const e=Math.min(n.width/o.width,n.height/o.height);const c=e*r;const i=C(o);const u=s.scale(i,i,t);return s.scale(c,c,u)}function A(t,o,s,r="none",e=1){const c=O(t,o,s,r,e);const i=S(t,o,s,e);return n.fromPointAndDimensions(c,i)}function P(t,n){const r=1/C(n);const e=o.scale(o.subtract(t,s.center(n)),r,r);return e}function U(t,n,s){return t.map((t=>o.add(o.scale(o.subtract(t,n),s.width/(n.width||1),s.height/(n.height||1)),s)))}function V(t,o,s){const r=n.fromPoints(t,o);if(s){const s=Math.max(r.width,r.height);const e=r.height>r.width;const c=o.x<=t.x;const i=o.y<=t.y;const u=c?e?t.x-s:o.x:t.x;const a=i?e?o.y:t.y-s:t.y;return n.create(u,a,s,s)}else{return r}}function I(t,s,r,e,c){const i=o.subtract(r,s);const{x:u,y:a,width:f,height:h}=t;const l=u+f;const d=a+h;const p=o.create(u,a);const M=o.create(u,d);const m=o.create(l,a);const y=o.create(l,d);switch(e){case"top-left":return V(y,r,!!c);case"top":return V(y,o.create(u,r.y),!!c);case"top-right":return V(M,r,!!c);case"right":return V(M,o.create(r.x,a),!!c);case"bottom-right":return V(p,r,!!c);case"bottom":return V(p,o.create(l,r.y),!!c);case"bottom-left":return V(m,r,!!c);case"left":return V(y,o.create(r.x,a),!!c);case"center":return n.create(t.x+i.x,t.y+i.y,t.width,t.height)}}function W(t){return R(t)||b(t)||T(t)}function D(...t){return t.every((t=>!isNaN(t.x)&&!isNaN(t.y)))}function j(t){const n=t.target;return W(n)&&n.mode!=="edit"}function C(t){return t.height}const F=({id:t,transform:n,rotation:o,name:s,point:e,onPointerDown:c},i)=>r("div",{id:t,class:"bounds-anchor-position",style:{top:`${e.y}px`,left:`${e.x}px`},onTouchStart:t=>t.preventDefault(),onPointerDown:c},r("div",{style:{transform:n}},r("div",{class:"bounds-anchor",style:{transform:`rotateZ(${o!==null&&o!==void 0?o:0}deg)`}},r("slot",{name:s},i))));const H=({id:t,scale:n})=>{const o=n!==null&&n!==void 0?n:1;const s=Math.max(10,10*o);const e=Math.max(10,10*o);const c=Math.max(120,110*o+s);const i=Math.max(120,110*o+e);return r("filter",{id:t,filterUnits:"userSpaceOnUse",x:`${-s}%`,y:`${-e}%`,width:`${c}%`,height:`${i}%`},r("feGaussianBlur",{in:"SourceAlpha",stdDeviation:"2"}),r("feOffset",{dx:"0",dy:"1",result:"offsetblur"}),r("feFlood",{"flood-color":"#000000","flood-opacity":"0.25"}),r("feComposite",{in2:"offsetblur",operator:"in"}),r("feMerge",null,r("feMergeNode",null),r("feMergeNode",{in:"SourceGraphic"})))};class J{constructor(){this.handlePointerDown=t=>{this.handleInteractionAttempt(t)};this.handlePointerMove=t=>{this.handleInteractionMove(t)};this.handlePointerUp=t=>{window.removeEventListener("pointermove",this.handlePointerMove);window.removeEventListener("pointerup",this.handlePointerUp);this.handleInteractionEnd(t)};this.resizeObserver=new ResizeObserver((([t])=>{this.elementBounds=this.computeBoundingRect()}))}initialize(t,n){this.element=t;this.api=n;this.elementBounds=this.computeBoundingRect();this.resizeObserver.observe(this.element);this.element.addEventListener("pointerdown",this.handlePointerDown)}dispose(){var t;this.resizeObserver.disconnect();(t=this.element)===null||t===void 0?void 0:t.removeEventListener("pointerdown",this.handlePointerDown);this.element=undefined;this.api=undefined}acceptInteraction(){window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}export{J as M,F as R,H as S,b as a,T as b,O as c,j as d,y as e,g as f,w as g,E as h,R as i,D as j,m as k,I as l,v as m,A as n,U as o,$ as p,N as q,L as r,P as t};
+//# sourceMappingURL=p-DXGQW235.js.map