@vertexvis/viewer 1.0.2-canary.2 → 1.0.2-canary.4

package/dist/components/p-C-VWDW9n.js.map

@@ -1 +1 @@
-{"version":3,"names":["CircleMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","scalingOptions","super","this","anchor","editAnchor","event","mode","resizeBounds","bounds","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","position","translatePointToRelative","getMouseClientPosition","originatingViewport","centeringBehavior","scale","offset","startPosition","_a","Rectangle","create","x","y","emit","acceptInteraction","handleInteractionMove","transformRectangle","shiftKey","handleInteractionEnd","width","_b","height","newlyCreatedMarkup","markup","undefined","viewerMarkupCircleCss","ViewerMarkupCircle","__stencil_proxyCustomElement","HTMLElement","registerHost","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","handleScaleChange","handleScalingConfigurationChange","updateBoundsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","disconnectedCallback","dispose","registeredHandler","removeEventListener","newViewer","registerBasicInteractionHandler","handleBoundsJsonChange","handleModeChange","updateScalingOptions","writeDOM","style","setProperty","toString","rect","parseBounds","boundsJson","render","relativeBounds","translateRectToScreen","center","offsetX","getWindowDevicePixelRatio","offsetY","_d","_c","h","Host","class","onTouchStart","SvgShadow","id","transform","filter","cx","cy","rx","ry","stroke","fill","BoundingBox2d","onTopLeftAnchorPointerDown","e","onTopRightAnchorPointerDown","onTopAnchorPointerDown","onBottomLeftAnchorPointerDown","onBottomRightAnchorPointerDown","onBottomAnchorPointerDown","onLeftAnchorPointerDown","onRightAnchorPointerDown","onCenterAnchorPointerDown"],"sources":["src/components/viewer-markup-circle/interactions.ts","src/components/viewer-markup-circle/viewer-markup-circle.css?tag=vertex-viewer-markup-circle&encapsulation=shadow","src/components/viewer-markup-circle/viewer-markup-circle.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point, Rectangle } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport {\n  MarkupInteractionHandler,\n  MarkupInteractionHandlerScalingOptions,\n} from '../../lib/markup/interactions';\nimport { MarkupInteraction } from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  BoundingBox2dAnchorPosition,\n  transformRectangle,\n  translatePointToRelative,\n} from '../viewer-markup/markup-utils';\n\nexport class CircleMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private startPosition?: Point.Point;\n  private resizeBounds?: Rectangle.Rectangle;\n\n  private anchor: BoundingBox2dAnchorPosition = 'bottom-right';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupCircleElement,\n    private readonly interactionBegin: EventEmitter<void>,\n    private readonly interactionEnd: EventEmitter<MarkupInteraction>,\n    scalingOptions?: MarkupInteractionHandlerScalingOptions\n  ) {\n    super(scalingOptions);\n  }\n\n  public editAnchor(\n    anchor: BoundingBox2dAnchorPosition,\n    event: PointerEvent\n  ): void {\n    if (this.markupEl.mode === 'edit') {\n      this.anchor = anchor;\n      this.resizeBounds = this.markupEl.bounds;\n      this.startInteraction(event);\n    }\n  }\n\n  public startInteraction(event: PointerEvent): void {\n    this.handleInteractionAttempt(event);\n  }\n\n  protected computeBoundingRect(): DOMRect {\n    return getMarkupBoundingClientRect(this.markupEl);\n  }\n\n  protected handleInteractionAttempt(event: PointerEvent): void {\n    if (\n      this.markupEl.mode !== '' &&\n      this.pointerId == null &&\n      this.elementBounds != null\n    ) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds,\n        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset\n      );\n      this.pointerId = event.pointerId;\n      this.startPosition = position;\n      this.markupEl.bounds =\n        this.markupEl.bounds ?? Rectangle.create(position.x, position.y, 0, 0);\n      this.resizeBounds = this.markupEl.bounds;\n\n      this.interactionBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (\n      this.markupEl.bounds != null &&\n      this.startPosition != null &&\n      this.elementBounds != null &&\n      this.pointerId === event.pointerId\n    ) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds,\n        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset\n      );\n\n      this.markupEl.bounds = transformRectangle(\n        this.resizeBounds ?? this.markupEl.bounds,\n        this.startPosition,\n        position,\n        this.anchor,\n        event.shiftKey\n      );\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      if (\n        this.markupEl.mode !== '' &&\n        this.markupEl.bounds != null &&\n        this.markupEl.bounds?.width > 0 &&\n        this.markupEl.bounds?.height > 0\n      ) {\n        this.anchor = 'bottom-right';\n\n        const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n        this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\n      } else {\n        this.markupEl.bounds = undefined;\n      }\n\n      this.pointerId = undefined;\n    }\n  }\n}\n",":host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  /**\n   * @prop --viewer-markup-circle-ellipse-stroke-color: A CSS color that\n   * specifies the color of the circle's outline.\n   */\n  --viewer-markup-circle-ellipse-stroke-color: var(--red-700);\n  /**\n   * @prop --viewer-markup-circle-ellipse-stroke-width: A CSS length that\n   * specifies the width of the circle's outline.\n   *\n   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-circle-ellipse-stroke-width: 4px;\n  /**\n   * @prop --viewer-markup-circle-ellipse-fill-color: A CSS color that\n   * specifies the color of the circle's fill.\n   */\n  --viewer-markup-circle-ellipse-fill-color: none;\n  /**\n   * @prop --viewer-markup-circle-ellipse-fill-opacity: A number between\n   * 0 and 1 that specifies the opacity of the circle's fill.\n   */\n  --viewer-markup-circle-ellipse-fill-opacity: 0;\n  /**\n   * @prop --viewer-markup-circle-bounds-outline-border-color: A CSS color that\n   * specifies the color of the circle's selected bounding box border.\n   */\n  --viewer-markup-circle-bounds-outline-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-outline-border-width: A CSS length that\n   * specifies the width of the circle's selected bounding box border.\n   */\n  --viewer-markup-circle-bounds-outline-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-edge-anchor-border-color: A CSS color that\n   * specifies the color of the edge and corner resize anchors' borders.\n   */\n  --viewer-markup-circle-bounds-edge-anchor-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-edge-anchor-border-width: A CSS length that\n   * specifies the width of the edge and corner resize anchors' borders.\n   */\n  --viewer-markup-circle-bounds-edge-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-edge-anchor-background-color: A CSS color that\n   * specifies the background color of the edge and corner resize anchors.\n   */\n  --viewer-markup-circle-bounds-edge-anchor-background-color: white;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-border-color: A CSS color that\n   * specifies the color of the center reposition anchor's border.\n   */\n  --viewer-markup-circle-bounds-center-anchor-border-color: white;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-border-width: A CSS length that\n   * specifies the width of the center reposition anchor's border.\n   */\n  --viewer-markup-circle-bounds-center-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-background-color: A CSS color that\n   * specifies the background color of the center reposition anchor.\n   */\n  --viewer-markup-circle-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-anchor-width: A CSS length that\n   * specifies the width of the resize and reposition anchors.\n   */\n  --viewer-markup-circle-bounds-anchor-width: 9px;\n  /**\n   * @prop --viewer-markup-circle-bounds-anchor-height: A CSS length that\n   * specifies the height of the resize and reposition anchors.\n   */\n  --viewer-markup-circle-bounds-anchor-height: 9px;\n  /**\n   * @prop --viewer-markup-circle-scale: A number that specifies the scale of the circle.\n   * This is used to scale the circle's stroke width. Defaults to 1, and is managed internally\n   * by the component.\n   */\n  --viewer-markup-circle-scale: 1;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n}\n\n.create-overlay {\n  pointer-events: auto;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n}\n\n.ellipse {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-circle-ellipse-stroke-color);\n  stroke-width: calc(\n    var(--viewer-markup-circle-ellipse-stroke-width) *\n      var(--viewer-markup-circle-scale)\n  );\n  fill: var(--viewer-markup-circle-ellipse-fill-color);\n  fill-opacity: var(--viewer-markup-circle-ellipse-fill-opacity);\n  cursor: default;\n}\n\n.bounds-container {\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.bounds-outline {\n  position: absolute;\n  border-width: var(--viewer-markup-circle-bounds-outline-border-width);\n  border-color: var(--viewer-markup-circle-bounds-outline-border-color);\n  border-style: solid;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-anchor-position {\n  position: absolute;\n  transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n  pointer-events: auto;\n  cursor: default;\n  user-select: none;\n}\n\n.bounds-default-anchor {\n  width: var(--viewer-markup-circle-bounds-anchor-width);\n  height: var(--viewer-markup-circle-bounds-anchor-height);\n  box-sizing: border-box;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n  border-radius: 100%;\n  border-width: var(--viewer-markup-circle-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-circle-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(\n    --viewer-markup-circle-bounds-center-anchor-background-color\n  );\n}\n\n.bounds-edge-anchor {\n  border-width: var(--viewer-markup-circle-bounds-edge-anchor-border-width);\n  border-color: var(--viewer-markup-circle-bounds-edge-anchor-border-color);\n  border-style: solid;\n  background-color: var(\n    --viewer-markup-circle-bounds-edge-anchor-background-color\n  );\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { BasicViewer, Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidStartEvent,\n  translateRectToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { CircleMarkupInteractionHandler } from './interactions';\nimport { parseBounds } from './utils';\nimport { BoundingBox2d } from './viewer-markup-circle-components';\n\n/**\n * The supported markup modes.\n *\n * @see {@link ViewerMarkupCircleMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupCircleMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-circle',\n  styleUrl: 'viewer-markup-circle.css',\n  shadow: true,\n})\nexport class ViewerMarkupCircle {\n  /**\n   * The bounds of the circle. Can either be an instance of a `Rectangle` or\n   * a JSON string representation in the format of `[x, y, width, height]` or\n   * `{\"x\": 0, \"y\": 0, \"width\": 10, \"height\": 10}`.\n   *\n   * Bounds are expected to have relative coordinates, with `[x, y]` from `[-0.5, 0.5]`\n   * and `[width, height]` from `[0, 1]`, e.g. `[0, 0, 0.25, 0.25]`corresponds to a circle\n   * with a diameter of one fourth the viewport's smallest size in the center of the viewport.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public bounds?: Rectangle.Rectangle;\n\n  /**\n   * The bounds of the circle. Can either be an instance of a `Rectangle` or\n   * a JSON string representation in the format of `[x, y, width, height]` or\n   * `{\"x\": 0, \"y\": 0, \"width\": 0.1, \"height\": 0.1}`.\n   *\n   * Bounds are expected to have relative coordinates, with `[x, y]` from `[-0.5, 0.5]`\n   * and `[width, height]` from `[0, 1]`, e.g. `[0, 0, 0.25, 0.25]`corresponds to a circle\n   * with a diameter of one fourth the viewport's smallest size in the center of the viewport.\n   */\n  @Prop({ attribute: 'bounds' })\n  public boundsJson?: string;\n\n  /**\n   * A mode that specifies how the markup component should behave. When\n   * unset, the component will not respond to interactions with the handles.\n   * When `edit`, the markup anchors are interactive and the user is able\n   * to reposition them. When `create`, anytime the user clicks on the canvas,\n   * a new markup will be performed.\n   */\n  @Prop({ reflect: true })\n  public mode: ViewerMarkupCircleMode = '';\n\n  /**\n   * The viewer to connect to markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: BasicViewer;\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  @Element()\n  private hostEl!: HTMLVertexViewerMarkupCircleElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  private interactionHandler = new CircleMarkupInteractionHandler(\n    this.hostEl,\n    this.interactionBegin,\n    this.interactionEnd,\n    {\n      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    }\n  );\n\n  private registeredHandler?: Disposable;\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.updateViewport();\n    this.handleViewerChanged(this.viewer);\n    this.handleScaleChange();\n    this.handleScalingConfigurationChange();\n    this.updateBoundsFromProps();\n  }\n\n  protected componentDidLoad(): void {\n    this.updateBoundsFromProps();\n\n    const resize = new ResizeObserver(() => this.updateViewport());\n    resize.observe(this.hostEl);\n\n    if (this.mode === 'create') {\n      window.addEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.dispose();\n  }\n\n  @Method()\n  public async dispose(): Promise<void> {\n    this.registeredHandler?.dispose();\n    this.registeredHandler = undefined;\n\n    window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected async handleViewerChanged(newViewer?: BasicViewer): Promise<void> {\n    this.registeredHandler?.dispose();\n    this.registeredHandler = undefined;\n\n    if (newViewer != null) {\n      this.registeredHandler = await newViewer.registerBasicInteractionHandler(\n        this.interactionHandler\n      );\n    }\n  }\n\n  @Watch('bounds')\n  protected handleBoundsJsonChange(): void {\n    this.updateBoundsFromProps();\n  }\n\n  @Watch('mode')\n  protected handleModeChange(): void {\n    if (this.mode !== 'create') {\n      window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  @Watch('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  @Watch('scale')\n  protected handleScalingConfigurationChange(): void {\n    this.interactionHandler.updateScalingOptions({\n      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    });\n  }\n\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-circle-scale',\n        this.scale.toString()\n      );\n    });\n  }\n\n  private updateViewport(): void {\n    const rect = getMarkupBoundingClientRect(this.hostEl);\n    this.elementBounds = rect;\n  }\n\n  private updateBoundsFromProps(): void {\n    this.bounds = this.bounds ?? parseBounds(this.boundsJson);\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (\n      this.bounds != null &&\n      this.elementBounds != null &&\n      this.elementBounds.width > 0 &&\n      this.elementBounds.height > 0\n    ) {\n      const relativeBounds = translateRectToScreen(\n        this.bounds,\n        this.elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale\n      );\n      const center = Rectangle.center(relativeBounds);\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" scale={this.scale} />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#circle-shadow)\"\n            >\n              <ellipse\n                class=\"ellipse\"\n                cx={center.x}\n                cy={center.y}\n                rx={relativeBounds.width / 2}\n                ry={relativeBounds.height / 2}\n                stroke={'#000ff0'}\n                stroke-width={4}\n                fill={'none'}\n              />\n            </g>\n          </svg>\n          {this.mode === 'edit' && (\n            <BoundingBox2d\n              bounds={relativeBounds}\n              offset={{ x: offsetX, y: offsetY }}\n              onTopLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top-left', e)\n              }\n              onTopRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top-right', e)\n              }\n              onTopAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top', e)\n              }\n              onBottomLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom-left', e)\n              }\n              onBottomRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom-right', e)\n              }\n              onBottomAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom', e)\n              }\n              onLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('left', e)\n              }\n              onRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('right', e)\n              }\n              onCenterAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('center', e)\n              }\n            />\n          )}\n          {this.mode === 'create' && (\n            <div\n              class=\"create-overlay\"\n              onTouchStart={this.handleTouchStart}\n            ></div>\n          )}\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div\n            class=\"create-overlay\"\n            onTouchStart={this.handleTouchStart}\n          ></div>\n        </Host>\n      );\n    }\n  }\n\n  private handleWindowPointerDown = (event: PointerEvent): void => {\n    if (isValidStartEvent(event)) {\n      this.interactionHandler.startInteraction(event);\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent): void => {\n    event.preventDefault();\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CircleMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","scalingOptions","super","this","anchor","editAnchor","event","mode","resizeBounds","bounds","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","position","translatePointToRelative","getMouseClientPosition","originatingViewport","centeringBehavior","scale","offset","startPosition","_a","Rectangle","create","x","y","emit","acceptInteraction","handleInteractionMove","transformRectangle","shiftKey","handleInteractionEnd","width","_b","height","newlyCreatedMarkup","markup","undefined","viewerMarkupCircleCss","ViewerMarkupCircle","__stencil_proxyCustomElement","HTMLElement","registerHost","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","handleScaleChange","handleScalingConfigurationChange","updateBoundsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","disconnectedCallback","dispose","registeredHandler","removeEventListener","newViewer","registerBasicInteractionHandler","handleBoundsJsonChange","handleModeChange","updateScalingOptions","writeDOM","style","setProperty","toString","rect","parseBounds","boundsJson","render","relativeBounds","translateRectToScreen","center","offsetX","getWindowDevicePixelRatio","offsetY","_d","_c","h","Host","class","onTouchStart","SvgShadow","id","transform","filter","cx","cy","rx","ry","stroke","fill","BoundingBox2d","onTopLeftAnchorPointerDown","e","onTopRightAnchorPointerDown","onTopAnchorPointerDown","onBottomLeftAnchorPointerDown","onBottomRightAnchorPointerDown","onBottomAnchorPointerDown","onLeftAnchorPointerDown","onRightAnchorPointerDown","onCenterAnchorPointerDown"],"sources":["src/components/viewer-markup-circle/interactions.ts","src/components/viewer-markup-circle/viewer-markup-circle.css?tag=vertex-viewer-markup-circle&encapsulation=shadow","src/components/viewer-markup-circle/viewer-markup-circle.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point, Rectangle } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport {\n  MarkupInteractionHandler,\n  MarkupInteractionHandlerScalingOptions,\n} from '../../lib/markup/interactions';\nimport { MarkupInteraction } from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  BoundingBox2dAnchorPosition,\n  transformRectangle,\n  translatePointToRelative,\n} from '../viewer-markup/markup-utils';\n\nexport class CircleMarkupInteractionHandler extends MarkupInteractionHandler {\n  private pointerId?: number;\n  private startPosition?: Point.Point;\n  private resizeBounds?: Rectangle.Rectangle;\n\n  private anchor: BoundingBox2dAnchorPosition = 'bottom-right';\n\n  public constructor(\n    private readonly markupEl: HTMLVertexViewerMarkupCircleElement,\n    private readonly interactionBegin: EventEmitter<void>,\n    private readonly interactionEnd: EventEmitter<MarkupInteraction>,\n    scalingOptions?: MarkupInteractionHandlerScalingOptions,\n  ) {\n    super(scalingOptions);\n  }\n\n  public editAnchor(\n    anchor: BoundingBox2dAnchorPosition,\n    event: PointerEvent,\n  ): void {\n    if (this.markupEl.mode === 'edit') {\n      this.anchor = anchor;\n      this.resizeBounds = this.markupEl.bounds;\n      this.startInteraction(event);\n    }\n  }\n\n  public startInteraction(event: PointerEvent): void {\n    this.handleInteractionAttempt(event);\n  }\n\n  protected computeBoundingRect(): DOMRect {\n    return getMarkupBoundingClientRect(this.markupEl);\n  }\n\n  protected handleInteractionAttempt(event: PointerEvent): void {\n    if (\n      this.markupEl.mode !== '' &&\n      this.pointerId == null &&\n      this.elementBounds != null\n    ) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds,\n        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset,\n      );\n      this.pointerId = event.pointerId;\n      this.startPosition = position;\n      this.markupEl.bounds =\n        this.markupEl.bounds ?? Rectangle.create(position.x, position.y, 0, 0);\n      this.resizeBounds = this.markupEl.bounds;\n\n      this.interactionBegin.emit();\n      this.acceptInteraction();\n    }\n  }\n\n  protected handleInteractionMove(event: PointerEvent): void {\n    if (\n      this.markupEl.bounds != null &&\n      this.startPosition != null &&\n      this.elementBounds != null &&\n      this.pointerId === event.pointerId\n    ) {\n      const position = translatePointToRelative(\n        getMouseClientPosition(event, this.elementBounds),\n        this.elementBounds,\n        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset,\n      );\n\n      this.markupEl.bounds = transformRectangle(\n        this.resizeBounds ?? this.markupEl.bounds,\n        this.startPosition,\n        position,\n        this.anchor,\n        event.shiftKey,\n      );\n    }\n  }\n\n  protected handleInteractionEnd(event: PointerEvent): void {\n    if (this.pointerId === event.pointerId) {\n      if (\n        this.markupEl.mode !== '' &&\n        this.markupEl.bounds != null &&\n        this.markupEl.bounds?.width > 0 &&\n        this.markupEl.bounds?.height > 0\n      ) {\n        this.anchor = 'bottom-right';\n\n        const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n        this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\n      } else {\n        this.markupEl.bounds = undefined;\n      }\n\n      this.pointerId = undefined;\n    }\n  }\n}\n",":host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  /**\n   * @prop --viewer-markup-circle-ellipse-stroke-color: A CSS color that\n   * specifies the color of the circle's outline.\n   */\n  --viewer-markup-circle-ellipse-stroke-color: var(--red-700);\n  /**\n   * @prop --viewer-markup-circle-ellipse-stroke-width: A CSS length that\n   * specifies the width of the circle's outline.\n   *\n   * Note that this is scaled by the component's scale factor, so providing a scale\n   * other than 1 will result in a different stroke width.\n   */\n  --viewer-markup-circle-ellipse-stroke-width: 4px;\n  /**\n   * @prop --viewer-markup-circle-ellipse-fill-color: A CSS color that\n   * specifies the color of the circle's fill.\n   */\n  --viewer-markup-circle-ellipse-fill-color: none;\n  /**\n   * @prop --viewer-markup-circle-ellipse-fill-opacity: A number between\n   * 0 and 1 that specifies the opacity of the circle's fill.\n   */\n  --viewer-markup-circle-ellipse-fill-opacity: 0;\n  /**\n   * @prop --viewer-markup-circle-bounds-outline-border-color: A CSS color that\n   * specifies the color of the circle's selected bounding box border.\n   */\n  --viewer-markup-circle-bounds-outline-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-outline-border-width: A CSS length that\n   * specifies the width of the circle's selected bounding box border.\n   */\n  --viewer-markup-circle-bounds-outline-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-edge-anchor-border-color: A CSS color that\n   * specifies the color of the edge and corner resize anchors' borders.\n   */\n  --viewer-markup-circle-bounds-edge-anchor-border-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-edge-anchor-border-width: A CSS length that\n   * specifies the width of the edge and corner resize anchors' borders.\n   */\n  --viewer-markup-circle-bounds-edge-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-edge-anchor-background-color: A CSS color that\n   * specifies the background color of the edge and corner resize anchors.\n   */\n  --viewer-markup-circle-bounds-edge-anchor-background-color: white;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-border-color: A CSS color that\n   * specifies the color of the center reposition anchor's border.\n   */\n  --viewer-markup-circle-bounds-center-anchor-border-color: white;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-border-width: A CSS length that\n   * specifies the width of the center reposition anchor's border.\n   */\n  --viewer-markup-circle-bounds-center-anchor-border-width: 1px;\n  /**\n   * @prop --viewer-markup-circle-bounds-center-anchor-background-color: A CSS color that\n   * specifies the background color of the center reposition anchor.\n   */\n  --viewer-markup-circle-bounds-center-anchor-background-color: var(--blue-400);\n  /**\n   * @prop --viewer-markup-circle-bounds-anchor-width: A CSS length that\n   * specifies the width of the resize and reposition anchors.\n   */\n  --viewer-markup-circle-bounds-anchor-width: 9px;\n  /**\n   * @prop --viewer-markup-circle-bounds-anchor-height: A CSS length that\n   * specifies the height of the resize and reposition anchors.\n   */\n  --viewer-markup-circle-bounds-anchor-height: 9px;\n  /**\n   * @prop --viewer-markup-circle-scale: A number that specifies the scale of the circle.\n   * This is used to scale the circle's stroke width. Defaults to 1, and is managed internally\n   * by the component.\n   */\n  --viewer-markup-circle-scale: 1;\n}\n\n.svg {\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n}\n\n.create-overlay {\n  pointer-events: auto;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n}\n\n.ellipse {\n  pointer-events: auto;\n  stroke: var(--viewer-markup-circle-ellipse-stroke-color);\n  stroke-width: calc(\n    var(--viewer-markup-circle-ellipse-stroke-width) *\n      var(--viewer-markup-circle-scale)\n  );\n  fill: var(--viewer-markup-circle-ellipse-fill-color);\n  fill-opacity: var(--viewer-markup-circle-ellipse-fill-opacity);\n  cursor: default;\n}\n\n.bounds-container {\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.bounds-outline {\n  position: absolute;\n  border-width: var(--viewer-markup-circle-bounds-outline-border-width);\n  border-color: var(--viewer-markup-circle-bounds-outline-border-color);\n  border-style: solid;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-anchor-position {\n  position: absolute;\n  transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n  pointer-events: auto;\n  cursor: default;\n  user-select: none;\n}\n\n.bounds-default-anchor {\n  width: var(--viewer-markup-circle-bounds-anchor-width);\n  height: var(--viewer-markup-circle-bounds-anchor-height);\n  box-sizing: border-box;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n  border-radius: 100%;\n  border-width: var(--viewer-markup-circle-bounds-center-anchor-border-width);\n  border-color: var(--viewer-markup-circle-bounds-center-anchor-border-color);\n  border-style: solid;\n  background-color: var(\n    --viewer-markup-circle-bounds-center-anchor-background-color\n  );\n}\n\n.bounds-edge-anchor {\n  border-width: var(--viewer-markup-circle-bounds-edge-anchor-border-width);\n  border-color: var(--viewer-markup-circle-bounds-edge-anchor-border-color);\n  border-style: solid;\n  background-color: var(\n    --viewer-markup-circle-bounds-edge-anchor-background-color\n  );\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\nimport { BasicViewer, Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n  MarkupCenteringBehavior,\n  MarkupInteraction,\n} from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n  isValidStartEvent,\n  translateRectToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { CircleMarkupInteractionHandler } from './interactions';\nimport { parseBounds } from './utils';\nimport { BoundingBox2d } from './viewer-markup-circle-components';\n\n/**\n * The supported markup modes.\n *\n * @see {@link ViewerMarkupCircleMode.mode} - For more details about modes.\n */\nexport type ViewerMarkupCircleMode = 'edit' | 'create' | '';\n\n@Component({\n  tag: 'vertex-viewer-markup-circle',\n  styleUrl: 'viewer-markup-circle.css',\n  shadow: true,\n})\nexport class ViewerMarkupCircle {\n  /**\n   * The bounds of the circle. Can either be an instance of a `Rectangle` or\n   * a JSON string representation in the format of `[x, y, width, height]` or\n   * `{\"x\": 0, \"y\": 0, \"width\": 10, \"height\": 10}`.\n   *\n   * Bounds are expected to have relative coordinates, with `[x, y]` from `[-0.5, 0.5]`\n   * and `[width, height]` from `[0, 1]`, e.g. `[0, 0, 0.25, 0.25]`corresponds to a circle\n   * with a diameter of one fourth the viewport's smallest size in the center of the viewport.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public bounds?: Rectangle.Rectangle;\n\n  /**\n   * The bounds of the circle. Can either be an instance of a `Rectangle` or\n   * a JSON string representation in the format of `[x, y, width, height]` or\n   * `{\"x\": 0, \"y\": 0, \"width\": 0.1, \"height\": 0.1}`.\n   *\n   * Bounds are expected to have relative coordinates, with `[x, y]` from `[-0.5, 0.5]`\n   * and `[width, height]` from `[0, 1]`, e.g. `[0, 0, 0.25, 0.25]`corresponds to a circle\n   * with a diameter of one fourth the viewport's smallest size in the center of the viewport.\n   */\n  @Prop({ attribute: 'bounds' })\n  public boundsJson?: string;\n\n  /**\n   * A mode that specifies how the markup component should behave. When\n   * unset, the component will not respond to interactions with the handles.\n   * When `edit`, the markup anchors are interactive and the user is able\n   * to reposition them. When `create`, anytime the user clicks on the canvas,\n   * a new markup will be performed.\n   */\n  @Prop({ reflect: true })\n  public mode: ViewerMarkupCircleMode = '';\n\n  /**\n   * The viewer to connect to markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: BasicViewer;\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  @Element()\n  private hostEl!: HTMLVertexViewerMarkupCircleElement;\n\n  @State()\n  private elementBounds?: DOMRect;\n\n  private interactionHandler = new CircleMarkupInteractionHandler(\n    this.hostEl,\n    this.interactionBegin,\n    this.interactionEnd,\n    {\n      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    },\n  );\n\n  private registeredHandler?: Disposable;\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.updateViewport();\n    this.handleViewerChanged(this.viewer);\n    this.handleScaleChange();\n    this.handleScalingConfigurationChange();\n    this.updateBoundsFromProps();\n  }\n\n  protected componentDidLoad(): void {\n    this.updateBoundsFromProps();\n\n    const resize = new ResizeObserver(() => this.updateViewport());\n    resize.observe(this.hostEl);\n\n    if (this.mode === 'create') {\n      window.addEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.dispose();\n  }\n\n  @Method()\n  public async dispose(): Promise<void> {\n    this.registeredHandler?.dispose();\n    this.registeredHandler = undefined;\n\n    window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected async handleViewerChanged(newViewer?: BasicViewer): Promise<void> {\n    this.registeredHandler?.dispose();\n    this.registeredHandler = undefined;\n\n    if (newViewer != null) {\n      this.registeredHandler = await newViewer.registerBasicInteractionHandler(\n        this.interactionHandler,\n      );\n    }\n  }\n\n  @Watch('bounds')\n  protected handleBoundsJsonChange(): void {\n    this.updateBoundsFromProps();\n  }\n\n  @Watch('mode')\n  protected handleModeChange(): void {\n    if (this.mode !== 'create') {\n      window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n    }\n  }\n\n  @Watch('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  @Watch('scale')\n  protected handleScalingConfigurationChange(): void {\n    this.interactionHandler.updateScalingOptions({\n      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    });\n  }\n\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    writeDOM(() => {\n      this.hostEl.style.setProperty(\n        '--viewer-markup-circle-scale',\n        this.scale.toString(),\n      );\n    });\n  }\n\n  private updateViewport(): void {\n    const rect = getMarkupBoundingClientRect(this.hostEl);\n    this.elementBounds = rect;\n  }\n\n  private updateBoundsFromProps(): void {\n    this.bounds = this.bounds ?? parseBounds(this.boundsJson);\n  }\n\n  public render(): h.JSX.IntrinsicElements {\n    if (\n      this.bounds != null &&\n      this.elementBounds != null &&\n      this.elementBounds.width > 0 &&\n      this.elementBounds.height > 0\n    ) {\n      const relativeBounds = translateRectToScreen(\n        this.bounds,\n        this.elementBounds,\n        this.originatingViewport,\n        this.centeringBehavior,\n        this.scale,\n      );\n      const center = Rectangle.center(relativeBounds);\n      const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n      const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n\n      return (\n        <Host>\n          <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n            <defs>\n              <SvgShadow id=\"circle-shadow\" scale={this.scale} />\n            </defs>\n            <g\n              transform={`translate(${offsetX} ${offsetY})`}\n              filter=\"url(#circle-shadow)\"\n            >\n              <ellipse\n                class=\"ellipse\"\n                cx={center.x}\n                cy={center.y}\n                rx={relativeBounds.width / 2}\n                ry={relativeBounds.height / 2}\n                stroke={'#000ff0'}\n                stroke-width={4}\n                fill={'none'}\n              />\n            </g>\n          </svg>\n          {this.mode === 'edit' && (\n            <BoundingBox2d\n              bounds={relativeBounds}\n              offset={{ x: offsetX, y: offsetY }}\n              onTopLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top-left', e)\n              }\n              onTopRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top-right', e)\n              }\n              onTopAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('top', e)\n              }\n              onBottomLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom-left', e)\n              }\n              onBottomRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom-right', e)\n              }\n              onBottomAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('bottom', e)\n              }\n              onLeftAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('left', e)\n              }\n              onRightAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('right', e)\n              }\n              onCenterAnchorPointerDown={(e) =>\n                this.interactionHandler.editAnchor('center', e)\n              }\n            />\n          )}\n          {this.mode === 'create' && (\n            <div\n              class=\"create-overlay\"\n              onTouchStart={this.handleTouchStart}\n            ></div>\n          )}\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div\n            class=\"create-overlay\"\n            onTouchStart={this.handleTouchStart}\n          ></div>\n        </Host>\n      );\n    }\n  }\n\n  private handleWindowPointerDown = (event: PointerEvent): void => {\n    if (isValidStartEvent(event)) {\n      this.interactionHandler.startInteraction(event);\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent): void => {\n    event.preventDefault();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-C79PxobX.js.map

@@ -1 +1 @@
-{"version":3,"names":["FreeformMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","scalingOptions","super","this","anchor","handleResizeInteractionMove","event","resizeStartPosition","elementBounds","resizeBounds","resizePoints","position","translatePointToRelative","getMouseClientPosition","originatingViewport","centeringBehavior","scale","offset","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","screenPoints","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","handleScaleChange","handleScalingConfigurationChange","updatePointsFromProps","componentDidLoad","resize","ResizeObserver","observe","disconnectedCallback","dispose","registeredInteraction","newViewer","registerBasicInteractionHandler","recomputePointsFromProps","updateScalingOptions","writeDOM","style","setProperty","toString","handleModeChange","rect","convertPointsToScreen","parsePoints","pointsJson","_b","_c","parseBounds","boundsJson","render","width","height","offsetX","getWindowDevicePixelRatio","offsetY","_d","h","Host","class","onTouchStart","SvgShadow","id","transform","filter","d","reduce","pt","fill","BoundingBox2d","translateRectToScreen","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 {\n  MarkupInteractionHandler,\n  MarkupInteractionHandlerScalingOptions,\n} 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    scalingOptions?: MarkupInteractionHandlerScalingOptions\n  ) {\n    super(scalingOptions);\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset\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          this.scalingOptions.originatingViewport,\n          this.scalingOptions.centeringBehavior,\n          this.scalingOptions.scale,\n          this.scalingOptions.offset\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset\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 { BasicViewer, 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?: BasicViewer;\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  @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      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    }\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.handleScaleChange();\n    this.handleScalingConfigurationChange();\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 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(newViewer?: BasicViewer): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    if (newViewer != null) {\n      this.registeredInteraction =\n        await newViewer.registerBasicInteractionHandler(\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('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  @Watch('scale')\n  protected handleScalingConfigurationChange(): void {\n    this.interactionHandler.updateScalingOptions({\n      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    });\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 (\n      this.screenPoints.length > 0 &&\n      this.elementBounds != null &&\n      this.elementBounds.width > 0 &&\n      this.elementBounds.height > 0\n    ) {\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":[]}
+{"version":3,"names":["FreeformMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","scalingOptions","super","this","anchor","handleResizeInteractionMove","event","resizeStartPosition","elementBounds","resizeBounds","resizePoints","position","translatePointToRelative","getMouseClientPosition","originatingViewport","centeringBehavior","scale","offset","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","screenPoints","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","handleScaleChange","handleScalingConfigurationChange","updatePointsFromProps","componentDidLoad","resize","ResizeObserver","observe","disconnectedCallback","dispose","registeredInteraction","newViewer","registerBasicInteractionHandler","recomputePointsFromProps","updateScalingOptions","writeDOM","style","setProperty","toString","handleModeChange","rect","convertPointsToScreen","parsePoints","pointsJson","_b","_c","parseBounds","boundsJson","render","width","height","offsetX","getWindowDevicePixelRatio","offsetY","_d","h","Host","class","onTouchStart","SvgShadow","id","transform","filter","d","reduce","pt","fill","BoundingBox2d","translateRectToScreen","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 {\n  MarkupInteractionHandler,\n  MarkupInteractionHandlerScalingOptions,\n} 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    scalingOptions?: MarkupInteractionHandlerScalingOptions,\n  ) {\n    super(scalingOptions);\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset,\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset,\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset,\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          this.scalingOptions.originatingViewport,\n          this.scalingOptions.centeringBehavior,\n          this.scalingOptions.scale,\n          this.scalingOptions.offset,\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        this.scalingOptions.originatingViewport,\n        this.scalingOptions.centeringBehavior,\n        this.scalingOptions.scale,\n        this.scalingOptions.offset,\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 { BasicViewer, 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?: BasicViewer;\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  @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      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    },\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.handleScaleChange();\n    this.handleScalingConfigurationChange();\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 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(newViewer?: BasicViewer): Promise<void> {\n    this.registeredInteraction?.dispose();\n    this.registeredInteraction = undefined;\n\n    if (newViewer != null) {\n      this.registeredInteraction =\n        await newViewer.registerBasicInteractionHandler(\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('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  @Watch('scale')\n  protected handleScalingConfigurationChange(): void {\n    this.interactionHandler.updateScalingOptions({\n      scale: this.scale,\n      offset: this.offset,\n      originatingViewport: this.originatingViewport,\n      centeringBehavior: this.centeringBehavior,\n    });\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 (\n      this.screenPoints.length > 0 &&\n      this.elementBounds != null &&\n      this.elementBounds.width > 0 &&\n      this.elementBounds.height > 0\n    ) {\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":";;;4WAiBM,MAAOA,UAAyCC,EAWpD,WAAAC,CACmBC,EACAC,EACAC,EACjBC,GAEAC,MAAMD,GALWE,KAAAL,WACAK,KAAAJ,mBACAI,KAAAH,iBALXG,KAAAC,OAAsC,eA0HtCD,KAAAE,4BAA+BC,IACrC,GACEH,KAAKI,qBAAuB,MAC5BJ,KAAKK,eAAiB,MACtBL,KAAKM,cAAgB,MACrBN,KAAKO,cAAgB,KACrB,CACA,MAAMC,EAAWC,EACfC,EAAuBP,EAAOH,KAAKK,eACnCL,KAAKK,cACLL,KAAKF,eAAea,oBACpBX,KAAKF,eAAec,kBACpBZ,KAAKF,eAAee,MACpBb,KAAKF,eAAegB,QAGtB,MAAMC,EAAgBC,EACpBhB,KAAKM,aACLN,KAAKI,oBACLI,EACAR,KAAKC,OACLE,EAAMc,UAGRjB,KAAKL,SAASuB,OAASC,EACrBnB,KAAKO,aACLP,KAAKM,aACLS,GAEFf,KAAKL,SAASyB,OAASL,C,GAInBf,KAAAqB,2BAA8BlB,IACpCmB,OAAOC,oBAAoB,cAAevB,KAAKE,6BAC/CoB,OAAOC,oBAAoB,YAAavB,KAAKqB,4BAE7CrB,KAAKM,aAAekB,UAEpB,MAAMC,EAAqBzB,KAAKL,SAAS+B,OAAS,OAClD1B,KAAKH,eAAe8B,KAAK,CAAEC,OAAQ5B,KAAKL,SAAU8B,sBAAqB,C,CAvJlE,UAAAI,CACL5B,EACAE,GAEA,GAAIH,KAAKL,SAAS+B,OAAS,QAAU1B,KAAKK,eAAiB,KAAM,CAC/DL,KAAKM,aAAeN,KAAKL,SAASyB,OAClCpB,KAAKO,aAAeP,KAAKL,SAASuB,OAClClB,KAAKC,OAASA,EACdD,KAAKI,oBAAsBK,EACzBC,EAAuBP,EAAOH,KAAKK,eACnCL,KAAKK,cACLL,KAAKF,eAAea,oBACpBX,KAAKF,eAAec,kBACpBZ,KAAKF,eAAee,MACpBb,KAAKF,eAAegB,QAGtBQ,OAAOQ,iBAAiB,cAAe9B,KAAKE,6BAC5CoB,OAAOQ,iBAAiB,YAAa9B,KAAKqB,2B,EAIvC,gBAAAU,CAAiB5B,GACtBH,KAAKgC,yBAAyB7B,E,CAGtB,mBAAA8B,GACR,OAAOC,EAA4BlC,KAAKL,S,CAGhC,wBAAAqC,CAAyB7B,G,MACjC,GACEH,KAAKL,SAAS+B,OAAS,IACvB1B,KAAKmC,WAAa,MAClBnC,KAAKK,eAAiB,KACtB,CACAL,KAAKmC,UAAYhC,EAAMgC,UACvB,MAAMC,EAAiB1B,EAAuBP,EAAOH,KAAKK,eAC1D,MAAMG,EAAWC,EACf2B,EACApC,KAAKK,cACLL,KAAKF,eAAea,oBACpBX,KAAKF,eAAec,kBACpBZ,KAAKF,eAAee,MACpBb,KAAKF,eAAegB,QAEtBd,KAAKqC,gBAAgB7B,GACrBR,KAAKL,SAASuB,QAASoB,EAAAtC,KAAKL,SAASuB,UAAM,MAAAoB,SAAA,EAAAA,EAAI,CAAC9B,GAEhDR,KAAKJ,iBAAiB+B,OACtB3B,KAAKuC,mB,EAIC,qBAAAC,CAAsBrC,GAC9B,GACEH,KAAKmC,YAAchC,EAAMgC,WACzBnC,KAAKL,SAASuB,QAAU,MACxBlB,KAAKK,eAAiB,KACtB,CACA,MAAM+B,EAAiB1B,EAAuBP,EAAOH,KAAKK,eAC1D,MAAMG,EAAWC,EACf2B,EACApC,KAAKK,cACLL,KAAKF,eAAea,oBACpBX,KAAKF,eAAec,kBACpBZ,KAAKF,eAAee,MACpBb,KAAKF,eAAegB,QAEtBd,KAAKqC,gBAAgB7B,GACrBR,KAAKL,SAASuB,OAAS,IAAIlB,KAAKL,SAASuB,OAAQV,E,EAI3C,oBAAAiC,CAAqBtC,GAC7B,GAAIH,KAAKmC,YAAchC,EAAMgC,UAAW,CACtC,GACEnC,KAAKL,SAAS+B,OAAS,IACvB1B,KAAKL,SAASuB,QAAU,MACxBlB,KAAKL,SAASuB,OAAOwB,OAAS,GAC9B1C,KAAKK,eAAiB,KACtB,CACA,MAAM+B,EAAiB1B,EACrBP,EACAH,KAAKK,eAEP,MAAMG,EAAWC,EACf2B,EACApC,KAAKK,cACLL,KAAKF,eAAea,oBACpBX,KAAKF,eAAec,kBACpBZ,KAAKF,eAAee,MACpBb,KAAKF,eAAegB,QAGtBd,KAAKqC,gBAAgB7B,GAErBR,KAAKL,SAASuB,OAAS,IAAIlB,KAAKL,SAASuB,OAAQV,GAEjD,MAAMiB,EAAqBzB,KAAKL,SAAS+B,OAAS,OAClD1B,KAAKH,eAAe8B,KAAK,CAAEC,OAAQ5B,KAAKL,SAAU8B,sB,KAC7C,CACLzB,KAAKL,SAASuB,OAASM,S,CAGzBxB,KAAK2C,IAAMnB,UACXxB,KAAK4C,IAAMpB,UACXxB,KAAKmC,UAAYX,S,EA+Cb,eAAAa,CAAgB7B,GACtBR,KAAK2C,IACH3C,KAAK2C,KAAO,KACRE,EAAMC,OACJC,KAAKJ,IAAI3C,KAAK2C,IAAIK,EAAGxC,EAASwC,GAC9BD,KAAKJ,IAAI3C,KAAK2C,IAAIM,EAAGzC,EAASyC,IAEhCzC,EACNR,KAAK4C,IACH5C,KAAK4C,KAAO,KACRC,EAAMC,OACJC,KAAKH,IAAI5C,KAAK4C,IAAII,EAAGxC,EAASwC,GAC9BD,KAAKH,IAAI5C,KAAK4C,IAAIK,EAAGzC,EAASyC,IAEhCzC,EACNR,KAAKL,SAASyB,OAAS8B,EAAUJ,OAC/B9C,KAAK2C,IAAIK,EACThD,KAAK2C,IAAIM,EACTjD,KAAK4C,IAAII,EAAIhD,KAAK2C,IAAIK,EACtBhD,KAAK4C,IAAIK,EAAIjD,KAAK2C,IAAIM,E,EClN5B,MAAME,EAA0B,IAAM,4oF,MC6CzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAA5D,CAAA6D,G,gKA4DSvD,KAAA0B,KAAiC,GAiCjC1B,KAAAY,kBAA6C,OAkB7CZ,KAAAa,MAAQ,EAuBPb,KAAAwD,aAA8B,GAE9BxD,KAAAyD,mBAAqB,IAAIjE,EAC/BQ,KAAK0D,OACL1D,KAAKJ,iBACLI,KAAKH,eACL,CACEgB,MAAOb,KAAKa,MACZC,OAAQd,KAAKc,OACbH,oBAAqBX,KAAKW,oBAC1BC,kBAAmBZ,KAAKY,oBAkMpBZ,KAAA2D,wBAA2BxD,IACjC,GAAIyD,EAAkBzD,GAAQ,CAC5BH,KAAKyD,mBAAmB1B,iBAAiB5B,E,GAIrCH,KAAA6D,iBAAoB1D,IAC1BA,EAAM2D,gBAAgB,CAiBzB,CAjNW,iBAAAC,GACR/D,KAAKgE,iBACLhE,KAAKiE,oBAAoBjE,KAAKkE,QAC9BlE,KAAKmE,oBACLnE,KAAKoE,mCACLpE,KAAKqE,uB,CAGG,gBAAAC,GACR,MAAMC,EAAS,IAAIC,gBAAe,IAAMxE,KAAKgE,mBAC7CO,EAAOE,QAAQzE,KAAK0D,QAEpB,GAAI1D,KAAK0B,OAAS,SAAU,CAC1BJ,OAAOQ,iBAAiB,cAAe9B,KAAK2D,wB,EAItC,oBAAAe,GACR1E,KAAK2E,S,CAIA,aAAMA,G,OACXrC,EAAAtC,KAAK4E,yBAAqB,MAAAtC,SAAA,SAAAA,EAAEqC,UAC5B3E,KAAK4E,sBAAwBpD,UAE7BF,OAAOC,oBAAoB,cAAevB,KAAK2D,wB,CAOvC,yBAAMM,CAAoBY,G,OAClCvC,EAAAtC,KAAK4E,yBAAqB,MAAAtC,SAAA,SAAAA,EAAEqC,UAC5B3E,KAAK4E,sBAAwBpD,UAE7B,GAAIqD,GAAa,KAAM,CACrB7E,KAAK4E,4BACGC,EAAUC,gCACd9E,KAAKyD,mB,EAUH,wBAAAsB,GACR/E,KAAKqE,uB,CAOG,gCAAAD,GACRpE,KAAKyD,mBAAmBuB,qBAAqB,CAC3CnE,MAAOb,KAAKa,MACZC,OAAQd,KAAKc,OACbH,oBAAqBX,KAAKW,oBAC1BC,kBAAmBZ,KAAKY,mB,CAKlB,iBAAAuD,GACRc,GAAS,KACPjF,KAAK0D,OAAOwB,MAAMC,YAChB,iCACAnF,KAAKa,MAAMuE,WACZ,G,CAKK,gBAAAC,GACR,GAAIrF,KAAK0B,OAAS,SAAU,CAC1BJ,OAAOC,oBAAoB,cAAevB,KAAK2D,wB,EAI3C,cAAAK,G,MACN,MAAMsB,EAAOpD,EAA4BlC,KAAK0D,QAC9C1D,KAAKK,cAAgBiF,EACrBtF,KAAKwD,cAAelB,EAAAtC,KAAKuF,2BAAuB,MAAAjD,SAAA,EAAAA,EAAItC,KAAKwD,Y,CAGnD,qBAAAa,G,UACNrE,KAAKkB,QAASoB,EAAAtC,KAAKkB,UAAM,MAAAoB,SAAA,EAAAA,EAAIkD,EAAYxF,KAAKyF,YAC9CzF,KAAKwD,cAAekC,EAAA1F,KAAKuF,2BAAuB,MAAAG,SAAA,EAAAA,EAAI,GACpD1F,KAAKoB,QAASuE,EAAA3F,KAAKoB,UAAM,MAAAuE,SAAA,EAAAA,EAAIC,EAAY5F,KAAK6F,W,CAGzC,MAAAC,G,YACL,GACE9F,KAAKwD,aAAad,OAAS,GAC3B1C,KAAKK,eAAiB,MACtBL,KAAKK,cAAc0F,MAAQ,GAC3B/F,KAAKK,cAAc2F,OAAS,EAC5B,CACA,MAAMC,IAAWP,GAAApD,EAAAtC,KAAKc,UAAM,MAAAwB,SAAA,SAAAA,EAAEU,KAAC,MAAA0C,SAAA,EAAAA,EAAI,GAAKQ,IACxC,MAAMC,IAAWC,GAAAT,EAAA3F,KAAKc,UAAM,MAAA6E,SAAA,SAAAA,EAAE1C,KAAC,MAAAmD,SAAA,EAAAA,EAAI,GAAKF,IAExC,OACEG,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,MAAMC,aAAcxG,KAAK6D,kBAClCwC,EAAA,YACEA,EAACI,EAAS,CAACC,GAAG,yBAAyB7F,MAAOb,KAAKa,SAErDwF,EAAA,KACEM,UAAW,aAAaV,KAAWE,KACnCS,OAAO,gCAEPP,EAAA,QACEE,MAAM,OACNM,EAAG7G,KAAKwD,aAAasD,QACnB,CAACD,EAAGE,IAAO,GAAGF,KAAKE,EAAG/D,KAAK+D,EAAG9D,KAC9B,IAAIjD,KAAKwD,aAAa,GAAGR,KAAKhD,KAAKwD,aAAa,GAAGP,KAErD+D,KAAK,WAIVhH,KAAK0B,OAAS,QAAU1B,KAAKoB,QAAU,MACtCiF,EAACY,EAAa,CACZ7F,OAAQ8F,EACNlH,KAAKoB,OACLpB,KAAKK,cACLL,KAAKW,oBACLX,KAAKY,kBACLZ,KAAKa,OAEPC,OAAQ,CAAEkC,EAAGiD,EAAShD,EAAGkD,GACzBgB,2BAA6BC,GAC3BpH,KAAKyD,mBAAmB5B,WAAW,WAAYuF,GAEjDC,4BAA8BD,GAC5BpH,KAAKyD,mBAAmB5B,WAAW,YAAauF,GAElDE,uBAAyBF,GACvBpH,KAAKyD,mBAAmB5B,WAAW,MAAOuF,GAE5CG,8BAAgCH,GAC9BpH,KAAKyD,mBAAmB5B,WAAW,cAAeuF,GAEpDI,+BAAiCJ,GAC/BpH,KAAKyD,mBAAmB5B,WAAW,eAAgBuF,GAErDK,0BAA4BL,GAC1BpH,KAAKyD,mBAAmB5B,WAAW,SAAUuF,GAE/CM,wBAA0BN,GACxBpH,KAAKyD,mBAAmB5B,WAAW,OAAQuF,GAE7CO,yBAA2BP,GACzBpH,KAAKyD,mBAAmB5B,WAAW,QAASuF,GAE9CQ,0BAA4BR,GAC1BpH,KAAKyD,mBAAmB5B,WAAW,SAAUuF,KAIlDpH,KAAK0B,OAAS,UACb2E,EAAA,OACEE,MAAM,iBACNC,aAAcxG,KAAK6D,mB,KAKtB,CACL,OACEwC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAM,iBACNC,aAAcxG,KAAK6D,mB,EAiBrB,qBAAA0B,G,MACN,MAAMlF,EAAgBL,KAAKK,cAC3B,GAAIA,GAAiB,KAAM,CACzB,OAAOiC,EAAAtC,KAAKkB,UAAM,MAAAoB,SAAA,SAAAA,EAAEuF,KAAKd,GACvBe,EACEf,EACA1G,EACAL,KAAKW,oBACLX,KAAKY,kBACLZ,KAAKa,Q","ignoreList":[]}