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

package/dist/viewer/p-6e3a6bbd.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["getComputedStyle","el","window","viewerPinLabelCss","VertexPinLabel","constructor","hostRef","this","value","focused","textareaRows","computeContentSize","readDOM","contentEl","contentElBounds","getBoundingClientRect","computedStyles","Math","max","ceil","parseFloat","getPropertyValue","handleInputKeyDown","event","stopPropagation","key","ctrlKey","metaKey","shiftKey","preventDefault","submit","handlePointerDown","elementBounds","buttons","relativePointerDownPosition","translatePointToRelative","getMouseClientPosition","pinPointerDownPosition","_a","pin","label","point","addEventListener","handlePointerMove","handlePointerUp","relative","relativeDelta","Point","subtract","myUpdatedPin","add","undefined","pinController","updatePin","computeScreenPosition","getToolMode","pointerDownScreen","translatePointToScreen","distanceBetweenStartAndEndPoint","distance","labelFocused","emit","_b","id","removeEventListener","handleTextBlur","handleTextInput","input","target","setFocus","inputEl","focus","_c","labelBlurred","text","watchFocusChange","labelChanged","setSelectedPinId","watchPinChange","watchElementBoundsChange","componentWillLoad","PinController","PinModel","componentDidLoad","resizeObserver","ResizeObserver","contentResizeObserver","hostEl","observe","disconnectedCallback","disconnect","componentDidRender","render","primaryColor","accentColor","getPinColors","h","Host","class","classNames","onPointerDown","style","top","computedScreenPosition","y","toString","left","x","minWidth","computeMinWidth","maxWidth","computeMaxWidth","maxHeight","computeMaxHeight","borderColor","background","disabled","ref","rows","onKeyDown","onInput","onBlur","hiddenContent","includes","split","reduce","res","str","expected","width","computeRemainingWidth","computeRemainingHeight","height","isTextPin","viewerPinLabelLineCss","VertexPinLabelLine","stroke","x1","labelPoint","y1","x2","pinPoint","y2","_d"],"sources":["src/components/viewer-pin-label/utils.ts","src/components/viewer-pin-label/viewer-pin-label.css?tag=vertex-viewer-pin-label","src/components/viewer-pin-label/viewer-pin-label.tsx","src/components/viewer-pin-label-line/viewer-pin-label-line.css?tag=vertex-viewer-pin-label-line","src/components/viewer-pin-label-line/viewer-pin-label-line.tsx"],"sourcesContent":["export function getComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  return window.getComputedStyle(el);\n}\n",":host {\n  /**\n   * @prop --viewer-annotations-pin-label-background-color: A CSS color that\n   * specifies the color of the label background\n   */\n  --viewer-annotations-pin-label-background-color: var(--viewer-annotations-pin-accent-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-color: A CSS color that\n   * specifies the color of the label's border\n   */\n  --viewer-annotations-pin-label-border-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-focused-border-color: A CSS color that\n   * specifies the color of the label's border when focused. \n   */\n   --viewer-annotations-pin-label-focused-border-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-color: A CSS color that\n   * specifies the color of the label \n   */\n  --viewer-annotations-pin-label-color: var(--white);\n\n  /**\n   * @prop --viewer-annotations-pin-label-padding-y: A var that\n   * specifies the vertical padding of the label\n   */\n  --viewer-annotations-pin-label-padding-y: 0.375em;\n\n  /**\n   * @prop --viewer-annotations-pin-label-padding-x: A var that\n   * specifies the horizontal padding of the label\n   */\n  --viewer-annotations-pin-label-padding-x:  0.5em;\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-width: A CSS length that\n   * specifies the width of the border on this label. Defaults to `2px`.\n   */\n  --viewer-annotations-pin-label-border-width: 2px;\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-style: A CSS variable that\n   * specifies the style of border on this label. Defaults to `solid`.\n   */\n  --viewer-annotations-pin-label-border-style: solid;\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-radius: A var that\n   * specifies the border radius of the label\n   */\n  --viewer-annotations-pin-label-border-radius: 0.25em;\n\n  /**\n   * @prop --viewer-annotations-pin-label-min-width: A CSS length that\n   * specifies the minimum width of the label. Defaults to `2rem`.\n   */\n  --viewer-annotations-pin-label-min-width: 2rem;\n\n  /**\n   * @prop --viewer-annotations-pin-label-max-width: A CSS length that\n   * specifies the maximum width of the label. Defaults to `25rem`.\n   */\n  --viewer-annotations-pin-label-max-width: 25rem;\n\n  /**\n   * @prop --viewer-annotations-pin-label-max-height: A CSS length that\n   * specifies the maximum height of the label. Defaults to `50rem`.\n   */\n   --viewer-annotations-pin-label-max-height: 50rem;\n\n  overflow: hidden;\n  pointer-events: none;\n}\n\n:host([mode='']) .pin-label {\n  color: var(--viewer-annotations-pin-label-color);\n  background: var(--viewer-annotations-pin-label-background-color);\n}\n\n.pin-label-text {\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n\n.pin-label-input-wrapper {\n  display: flex;\n  position: absolute;\n  pointer-events: auto;\n  box-sizing: border-box;\n  min-width: var(--viewer-annotations-pin-label-min-width);\n  max-width: var(--viewer-annotations-pin-label-max-width);\n  max-height: var(--viewer-annotations-pin-label-max-height);\n  background: var(--viewer-annotations-pin-label-background-color);\n  border-width: var(--viewer-annotations-pin-label-border-width);\n  border-style: var(--viewer-annotations-pin-label-border-style);\n  border-color: var(--viewer-annotations-pin-label-border-color);\n  border-radius: var(--viewer-annotations-pin-label-border-radius);\n}\n\n.pin-label-input-wrapper.focused {\n  min-width: var(--viewer-annotations-pin-label-max-width);\n  border-color: var(--viewer-annotations-pin-label-focused-border-color);\n}\n\n.pin-input-drag-target {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n\n.pin-label-input {\n  resize: none;\n  position: relative;\n  outline: none;\n  border: none;\n  word-break: break-word;\n  padding: 0 0 0 0;\n  background-color: transparent;\n  margin: var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);\n  width: var(--viewer-annotations-pin-label-min-width);\n  flex-grow: 1;\n  overflow: hidden;\n  max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n\n.pin-label-input.readonly {\n  pointer-events: auto;\n  color: black;\n  cursor: pointer;\n}\n\n.pin-label-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: auto;\n  height: auto;\n  box-sizing: border-box;\n  border-width: var(--viewer-annotations-pin-label-border-width);\n  border-style: var(--viewer-annotations-pin-label-border-style);\n  border-color: var(--viewer-annotations-pin-label-border-color);\n  margin: var(--viewer-annotations-pin-label-padding-y) 0;\n  padding: 0 var(--viewer-annotations-pin-label-padding-x);\n  max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  JSX,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n  getPinColors,\n  isTextPin,\n  PinModel,\n  TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n  translatePointToRelative,\n  translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n  tag: 'vertex-viewer-pin-label',\n  styleUrl: 'viewer-pin-label.css',\n  shadow: false,\n})\nexport class VertexPinLabel {\n  /**\n   * The pin to draw for the group\n   */\n  @Prop()\n  public pin?: TextPin;\n\n  /**\n   * The dimensions of the canvas for the pins\n   */\n  @Prop()\n  public elementBounds?: DOMRect;\n\n  /**\n   * The current text value of the component. Value is updated on user\n   * interaction.\n   */\n  @Prop({ mutable: true })\n  public value = '';\n\n  /**\n   * The controller that drives behavior for pin operations\n   */\n  @Prop({ mutable: true })\n  public pinController?: PinController;\n\n  /**\n   * @internal\n   */\n  @Event({ bubbles: true })\n  public labelChanged!: EventEmitter<void>;\n\n  /**\n   * Emitted whenever the label is focused, with the ID of the\n   * associated pin (or undefined if no pin is provided).\n   */\n  @Event({ bubbles: true })\n  public labelFocused!: EventEmitter<string | undefined>;\n\n  /**\n   * Emitted whenever the label is blurred, with the ID of the\n   * associated pin (or undefined if no pin is provided).\n   */\n  @Event({ bubbles: true })\n  public labelBlurred!: EventEmitter<string | undefined>;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  @State()\n  private focused = false;\n\n  @State()\n  private computedScreenPosition?: Point.Point;\n\n  @State()\n  private textareaRows = 1;\n\n  @State()\n  private contentElBounds?: DOMRect;\n\n  private relativePointerDownPosition?: Point.Point;\n  private pinPointerDownPosition?: Point.Point;\n\n  private inputEl?: HTMLTextAreaElement;\n  private contentEl?: HTMLDivElement;\n\n  private resizeObserver?: ResizeObserver;\n  private contentResizeObserver?: ResizeObserver;\n\n  /**\n   * Gives focus to the component's internal text input.\n   */\n  @Method()\n  public async setFocus(): Promise<void> {\n    // HTMLInputElement.focus() doesn't exist in tests.\n    if (typeof this.inputEl?.focus === 'function') {\n      this.focused = true;\n      this.labelFocused.emit(this.pin?.id);\n      this.inputEl?.focus();\n    }\n  }\n\n  /**\n   * @internal\n   * submits the current text, unfocuses the input and emits the blur event to consumers\n   */\n  @Method()\n  public async submit(): Promise<void> {\n    this.focused = false;\n    this.labelBlurred.emit(this.pin?.id);\n    if (this.pin != null) {\n      this.pinController?.updatePin({\n        ...this.pin,\n        label: {\n          point: this.pin.label.point,\n          text: this.value,\n        },\n      });\n    }\n  }\n\n  @Watch('focused')\n  protected watchFocusChange(): void {\n    this.labelChanged.emit();\n\n    if (this.focused) {\n      this.pinController?.setSelectedPinId(this.pin?.id);\n    }\n  }\n\n  @Watch('pin')\n  protected watchPinChange(): void {\n    this.value = this.pin?.label.text ?? '';\n    this.computeScreenPosition();\n  }\n\n  @Watch('elementBounds')\n  protected watchElementBoundsChange(): void {\n    this.computeScreenPosition();\n  }\n\n  protected componentWillLoad(): void {\n    this.value = this.pin?.label.text ?? '';\n    this.computeScreenPosition();\n\n    if (this.pinController == null) {\n      this.pinController = new PinController(new PinModel());\n    }\n  }\n\n  protected componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.labelChanged.emit();\n    });\n\n    this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n    if (this.hostEl != null) {\n      this.resizeObserver.observe(this.hostEl);\n    }\n\n    if (this.contentEl != null) {\n      this.contentResizeObserver.observe(this.contentEl);\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    this.contentResizeObserver?.disconnect();\n  }\n\n  protected componentDidRender(): void {\n    if (this.focused && this.inputEl != null) {\n      this.setFocus();\n    }\n  }\n\n  protected render(): JSX.Element {\n    const { primaryColor, accentColor } = getPinColors(this.pin);\n    return (\n      <Host>\n        <div\n          class={classNames('pin-label-input-wrapper', {\n            focused: this.focused,\n          })}\n          onPointerDown={this.handlePointerDown}\n          style={{\n            top: `${this.computedScreenPosition?.y.toString() || 0}px`,\n            left: `${this.computedScreenPosition?.x.toString() || 0}px`,\n            minWidth: this.computeMinWidth(),\n            maxWidth: this.computeMaxWidth(),\n            maxHeight: this.computeMaxHeight(),\n            borderColor: primaryColor,\n            background: accentColor,\n          }}\n        >\n          <textarea\n            id={`pin-label-input-${this.pin?.id}`}\n            class={classNames('pin-label-input', 'pin-label-text', {\n              ['readonly']: !this.focused,\n            })}\n            disabled={!this.focused}\n            ref={(ref) => (this.inputEl = ref)}\n            value={this.value}\n            rows={this.textareaRows}\n            onKeyDown={this.handleInputKeyDown}\n            onInput={this.handleTextInput}\n            onBlur={this.handleTextBlur}\n          />\n          {/* This corrects for a behavior in Firefox where setting the `disabled` attribute to true */}\n          {/* prevents any events from propagating. */}\n          {!this.focused && (\n            <div\n              class=\"pin-input-drag-target\"\n              onPointerDown={this.handlePointerDown}\n            />\n          )}\n        </div>\n        <div\n          ref={(el) => (this.contentEl = el)}\n          class={classNames('pin-label-text', 'pin-label-hidden')}\n          style={{\n            maxWidth: this.computeMaxWidth(),\n            maxHeight: this.computeMaxHeight(),\n          }}\n        >\n          {this.hiddenContent()}\n        </div>\n      </Host>\n    );\n  }\n\n  private hiddenContent(): Array<string | HTMLBRElement> {\n    // This corrects some inconsistencies in how a newline character\n    // is represented in a div. Leveraging `<br>`s results in a more\n    // consistent representation of the newlines in a textarea.\n    return this.value.includes('\\n')\n      ? this.value\n          .split('\\n')\n          .reduce(\n            (res, str) => [...res, str, <br />],\n            [] as Array<string | HTMLBRElement>\n          )\n      : [this.value];\n  }\n\n  private computeMinWidth(): string {\n    if (this.contentElBounds != null) {\n      const expected = `${this.contentElBounds.width + 8}px`;\n\n      return `min(${expected}, ${this.computeMaxWidth()})`;\n    } else {\n      return `var(--viewer-annotations-pin-label-min-width)`;\n    }\n  }\n\n  private computeMaxWidth(): string {\n    const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n    return `min(${expected}, ${this.computeRemainingWidth()})`;\n  }\n\n  private computeMaxHeight(): string {\n    const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n    return `min(${expected}, ${this.computeRemainingHeight()})`;\n  }\n\n  private computeRemainingWidth(): string {\n    return `calc(${this.elementBounds?.width.toString() || 0}px - ${\n      this.computedScreenPosition?.x.toString() || 0\n    }px)`;\n  }\n\n  private computeRemainingHeight(): string {\n    return `calc(${this.elementBounds?.height.toString() || 0}px - ${\n      this.computedScreenPosition?.y.toString() || 0\n    }px)`;\n  }\n\n  private computeScreenPosition(): void {\n    this.computedScreenPosition =\n      isTextPin(this.pin) &&\n      this.elementBounds != null &&\n      this.pin.label.point != null\n        ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n        : undefined;\n  }\n\n  private computeContentSize = (): void => {\n    readDOM(() => {\n      if (this.contentEl != null) {\n        this.contentElBounds = this.contentEl.getBoundingClientRect();\n        const computedStyles = getComputedStyle(this.contentEl);\n        this.textareaRows = Math.max(\n          1,\n          Math.ceil(\n            (parseFloat(computedStyles.getPropertyValue('height')) -\n              parseFloat(computedStyles.getPropertyValue('borderWidth')) * 2) /\n              parseFloat(computedStyles.getPropertyValue('lineHeight'))\n          )\n        );\n      }\n    });\n  };\n\n  private handleInputKeyDown = (event: KeyboardEvent): void => {\n    event.stopPropagation();\n    if (\n      event.key === 'Enter' &&\n      (event.ctrlKey || event.metaKey || event.shiftKey)\n    ) {\n      this.textareaRows += 1;\n      this.value += '\\n';\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      this.submit();\n    }\n  };\n\n  private handlePointerDown = (event: PointerEvent): void => {\n    if (!this.focused) {\n      if (this.elementBounds != null) {\n        if (event.buttons !== 2) {\n          event.preventDefault();\n          event.stopPropagation();\n        }\n        this.relativePointerDownPosition = translatePointToRelative(\n          getMouseClientPosition(event, this.elementBounds),\n          this.elementBounds\n        );\n        this.pinPointerDownPosition = this.pin?.label.point;\n\n        window.addEventListener('pointermove', this.handlePointerMove);\n        window.addEventListener('pointerup', this.handlePointerUp);\n      }\n    }\n  };\n\n  private handlePointerMove = (event: PointerEvent): void => {\n    if (\n      this.elementBounds != null &&\n      this.relativePointerDownPosition &&\n      this.pinPointerDownPosition != null\n    ) {\n      // Prevent selection of any text while interacting with the label\n      event.preventDefault();\n      event.stopPropagation();\n\n      const point = getMouseClientPosition(event, this.elementBounds);\n      const relative = translatePointToRelative(point, this.elementBounds);\n\n      const relativeDelta = Point.subtract(\n        relative,\n        this.relativePointerDownPosition\n      );\n\n      const myUpdatedPin =\n        this.pin != null\n          ? {\n              ...this.pin,\n              label: {\n                ...this.pin.label,\n                point: Point.add(this.pinPointerDownPosition, relativeDelta),\n              },\n            }\n          : undefined;\n\n      if (myUpdatedPin) {\n        this.pinController?.updatePin(myUpdatedPin);\n        this.computeScreenPosition();\n      }\n    }\n  };\n\n  private handlePointerUp = (event: PointerEvent): void => {\n    if (\n      this.pinController?.getToolMode() === 'edit' &&\n      this.relativePointerDownPosition != null &&\n      this.elementBounds != null\n    ) {\n      const pointerDownScreen = translatePointToScreen(\n        this.relativePointerDownPosition,\n        this.elementBounds\n      );\n      const distanceBetweenStartAndEndPoint = Point.distance(\n        pointerDownScreen,\n        getMouseClientPosition(event, this.elementBounds)\n      );\n\n      if (distanceBetweenStartAndEndPoint <= 2) {\n        this.focused = true;\n        this.labelFocused.emit(this.pin?.id);\n      }\n    }\n\n    this.relativePointerDownPosition = undefined;\n    this.pinPointerDownPosition = undefined;\n\n    window.removeEventListener('pointermove', this.handlePointerMove);\n    window.removeEventListener('pointerup', this.handlePointerUp);\n  };\n\n  private handleTextBlur = (): void => {\n    this.submit();\n  };\n\n  private handleTextInput = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n  };\n}\n","\n:host {\n  /**\n   * @prop  --viewer-annotations-pin-label-line-color: A CSS color that\n   * specifies the color of the label line\n   */\n   --viewer-annotations-pin-label-line-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-line-width: A CSS color that\n   * specifies the width of the label line\n   */\n   --viewer-annotations-pin-label-line-width: 1;\n\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.label-line {\n  pointer-events: auto;\n  stroke: var(--viewer-annotations-pin-label-line-color);\n  stroke-width: var( --viewer-annotations-pin-label-line-width);\n  cursor: default;\n}\n\n.svg {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  pointer-events: none;\n  height: 100%;\n  width: 100%;\n}\n","import {\n  Component,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  JSX,\n  Prop,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getPinColors, Pin } from '../../lib/pins/model';\n\n@Component({\n  tag: 'vertex-viewer-pin-label-line',\n  styleUrl: 'viewer-pin-label-line.css',\n  shadow: false,\n})\nexport class VertexPinLabelLine {\n  @Prop()\n  public pinPoint: Point.Point | undefined;\n\n  @Prop()\n  public labelPoint: Point.Point | undefined;\n\n  @Prop()\n  public pin: Pin | undefined;\n\n  protected render(): JSX.Element {\n    const { primaryColor } = getPinColors(this.pin);\n    return (\n      <Host>\n        <svg class=\"svg\">\n          <line\n            class=\"label-line\"\n            style={{\n              stroke: primaryColor,\n            }}\n            x1={this.labelPoint?.x}\n            y1={this.labelPoint?.y}\n            x2={this.pinPoint?.x}\n            y2={this.pinPoint?.y}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["getComputedStyle","el","window","viewerPinLabelCss","VertexPinLabel","constructor","hostRef","this","value","focused","textareaRows","computeContentSize","readDOM","contentEl","contentElBounds","getBoundingClientRect","computedStyles","Math","max","ceil","parseFloat","getPropertyValue","handleInputKeyDown","event","stopPropagation","key","ctrlKey","metaKey","shiftKey","preventDefault","submit","handlePointerDown","elementBounds","buttons","relativePointerDownPosition","translatePointToRelative","getMouseClientPosition","pinPointerDownPosition","_a","pin","label","point","addEventListener","handlePointerMove","handlePointerUp","relative","relativeDelta","Point","subtract","myUpdatedPin","add","undefined","pinController","updatePin","computeScreenPosition","getToolMode","pointerDownScreen","translatePointToScreen","distanceBetweenStartAndEndPoint","distance","labelFocused","emit","_b","id","removeEventListener","handleTextBlur","handleTextInput","input","target","setFocus","inputEl","focus","_c","labelBlurred","text","watchFocusChange","labelChanged","setSelectedPinId","watchPinChange","watchElementBoundsChange","componentWillLoad","PinController","PinModel","componentDidLoad","resizeObserver","ResizeObserver","contentResizeObserver","hostEl","observe","disconnectedCallback","disconnect","componentDidRender","render","primaryColor","accentColor","getPinColors","h","Host","class","classNames","onPointerDown","style","top","computedScreenPosition","y","toString","left","x","minWidth","computeMinWidth","maxWidth","computeMaxWidth","maxHeight","computeMaxHeight","borderColor","background","disabled","ref","rows","onKeyDown","onInput","onBlur","hiddenContent","includes","split","reduce","res","str","expected","width","computeRemainingWidth","computeRemainingHeight","height","isTextPin","viewerPinLabelLineCss","VertexPinLabelLine","stroke","x1","labelPoint","y1","x2","pinPoint","y2","_d"],"sources":["src/components/viewer-pin-label/utils.ts","src/components/viewer-pin-label/viewer-pin-label.css?tag=vertex-viewer-pin-label","src/components/viewer-pin-label/viewer-pin-label.tsx","src/components/viewer-pin-label-line/viewer-pin-label-line.css?tag=vertex-viewer-pin-label-line","src/components/viewer-pin-label-line/viewer-pin-label-line.tsx"],"sourcesContent":["export function getComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  return window.getComputedStyle(el);\n}\n",":host {\n  /**\n   * @prop --viewer-annotations-pin-label-background-color: A CSS color that\n   * specifies the color of the label background\n   */\n  --viewer-annotations-pin-label-background-color: var(--viewer-annotations-pin-accent-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-color: A CSS color that\n   * specifies the color of the label's border\n   */\n  --viewer-annotations-pin-label-border-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-focused-border-color: A CSS color that\n   * specifies the color of the label's border when focused. \n   */\n   --viewer-annotations-pin-label-focused-border-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-color: A CSS color that\n   * specifies the color of the label \n   */\n  --viewer-annotations-pin-label-color: var(--white);\n\n  /**\n   * @prop --viewer-annotations-pin-label-padding-y: A var that\n   * specifies the vertical padding of the label\n   */\n  --viewer-annotations-pin-label-padding-y: 0.375em;\n\n  /**\n   * @prop --viewer-annotations-pin-label-padding-x: A var that\n   * specifies the horizontal padding of the label\n   */\n  --viewer-annotations-pin-label-padding-x:  0.5em;\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-width: A CSS length that\n   * specifies the width of the border on this label. Defaults to `2px`.\n   */\n  --viewer-annotations-pin-label-border-width: 2px;\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-style: A CSS variable that\n   * specifies the style of border on this label. Defaults to `solid`.\n   */\n  --viewer-annotations-pin-label-border-style: solid;\n\n  /**\n   * @prop --viewer-annotations-pin-label-border-radius: A var that\n   * specifies the border radius of the label\n   */\n  --viewer-annotations-pin-label-border-radius: 0.25em;\n\n  /**\n   * @prop --viewer-annotations-pin-label-min-width: A CSS length that\n   * specifies the minimum width of the label. Defaults to `2rem`.\n   */\n  --viewer-annotations-pin-label-min-width: 2rem;\n\n  /**\n   * @prop --viewer-annotations-pin-label-max-width: A CSS length that\n   * specifies the maximum width of the label. Defaults to `25rem`.\n   */\n  --viewer-annotations-pin-label-max-width: 25rem;\n\n  /**\n   * @prop --viewer-annotations-pin-label-max-height: A CSS length that\n   * specifies the maximum height of the label. Defaults to `50rem`.\n   */\n   --viewer-annotations-pin-label-max-height: 50rem;\n\n  overflow: hidden;\n  pointer-events: none;\n}\n\n:host([mode='']) .pin-label {\n  color: var(--viewer-annotations-pin-label-color);\n  background: var(--viewer-annotations-pin-label-background-color);\n}\n\n.pin-label-text {\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n\n.pin-label-input-wrapper {\n  display: flex;\n  position: absolute;\n  pointer-events: auto;\n  box-sizing: border-box;\n  min-width: var(--viewer-annotations-pin-label-min-width);\n  max-width: var(--viewer-annotations-pin-label-max-width);\n  max-height: var(--viewer-annotations-pin-label-max-height);\n  background: var(--viewer-annotations-pin-label-background-color);\n  border-width: var(--viewer-annotations-pin-label-border-width);\n  border-style: var(--viewer-annotations-pin-label-border-style);\n  border-color: var(--viewer-annotations-pin-label-border-color);\n  border-radius: var(--viewer-annotations-pin-label-border-radius);\n}\n\n.pin-label-input-wrapper.focused {\n  min-width: var(--viewer-annotations-pin-label-max-width);\n  border-color: var(--viewer-annotations-pin-label-focused-border-color);\n}\n\n.pin-input-drag-target {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n\n.pin-label-input {\n  resize: none;\n  position: relative;\n  outline: none;\n  border: none;\n  word-break: break-word;\n  padding: 0 0 0 0;\n  background-color: transparent;\n  margin: var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);\n  width: var(--viewer-annotations-pin-label-min-width);\n  flex-grow: 1;\n  overflow: hidden;\n  max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n\n.pin-label-input.readonly {\n  pointer-events: auto;\n  color: black;\n  cursor: pointer;\n}\n\n.pin-label-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: auto;\n  height: auto;\n  box-sizing: border-box;\n  border-width: var(--viewer-annotations-pin-label-border-width);\n  border-style: var(--viewer-annotations-pin-label-border-style);\n  border-color: var(--viewer-annotations-pin-label-border-color);\n  margin: var(--viewer-annotations-pin-label-padding-y) 0;\n  padding: 0 var(--viewer-annotations-pin-label-padding-x);\n  max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  JSX,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n  getPinColors,\n  isTextPin,\n  PinModel,\n  TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n  translatePointToRelative,\n  translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n  tag: 'vertex-viewer-pin-label',\n  styleUrl: 'viewer-pin-label.css',\n  shadow: false,\n})\nexport class VertexPinLabel {\n  /**\n   * The pin to draw for the group\n   */\n  @Prop()\n  public pin?: TextPin;\n\n  /**\n   * The dimensions of the canvas for the pins\n   */\n  @Prop()\n  public elementBounds?: DOMRect;\n\n  /**\n   * The current text value of the component. Value is updated on user\n   * interaction.\n   */\n  @Prop({ mutable: true })\n  public value = '';\n\n  /**\n   * The controller that drives behavior for pin operations\n   */\n  @Prop({ mutable: true })\n  public pinController?: PinController;\n\n  /**\n   * @internal\n   */\n  @Event({ bubbles: true })\n  public labelChanged!: EventEmitter<void>;\n\n  /**\n   * Emitted whenever the label is focused, with the ID of the\n   * associated pin (or undefined if no pin is provided).\n   */\n  @Event({ bubbles: true })\n  public labelFocused!: EventEmitter<string | undefined>;\n\n  /**\n   * Emitted whenever the label is blurred, with the ID of the\n   * associated pin (or undefined if no pin is provided).\n   */\n  @Event({ bubbles: true })\n  public labelBlurred!: EventEmitter<string | undefined>;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  @State()\n  private focused = false;\n\n  @State()\n  private computedScreenPosition?: Point.Point;\n\n  @State()\n  private textareaRows = 1;\n\n  @State()\n  private contentElBounds?: DOMRect;\n\n  private relativePointerDownPosition?: Point.Point;\n  private pinPointerDownPosition?: Point.Point;\n\n  private inputEl?: HTMLTextAreaElement;\n  private contentEl?: HTMLDivElement;\n\n  private resizeObserver?: ResizeObserver;\n  private contentResizeObserver?: ResizeObserver;\n\n  /**\n   * Gives focus to the component's internal text input.\n   */\n  @Method()\n  public async setFocus(): Promise<void> {\n    // HTMLInputElement.focus() doesn't exist in tests.\n    if (typeof this.inputEl?.focus === 'function') {\n      this.focused = true;\n      this.labelFocused.emit(this.pin?.id);\n      this.inputEl?.focus();\n    }\n  }\n\n  /**\n   * @internal\n   * submits the current text, unfocuses the input and emits the blur event to consumers\n   */\n  @Method()\n  public async submit(): Promise<void> {\n    this.focused = false;\n    this.labelBlurred.emit(this.pin?.id);\n    if (this.pin != null) {\n      this.pinController?.updatePin({\n        ...this.pin,\n        label: {\n          point: this.pin.label.point,\n          text: this.value,\n        },\n      });\n    }\n  }\n\n  @Watch('focused')\n  protected watchFocusChange(): void {\n    this.labelChanged.emit();\n\n    if (this.focused) {\n      this.pinController?.setSelectedPinId(this.pin?.id);\n    }\n  }\n\n  @Watch('pin')\n  protected watchPinChange(): void {\n    this.value = this.pin?.label.text ?? '';\n    this.computeScreenPosition();\n  }\n\n  @Watch('elementBounds')\n  protected watchElementBoundsChange(): void {\n    this.computeScreenPosition();\n  }\n\n  protected componentWillLoad(): void {\n    this.value = this.pin?.label.text ?? '';\n    this.computeScreenPosition();\n\n    if (this.pinController == null) {\n      this.pinController = new PinController(new PinModel());\n    }\n  }\n\n  protected componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.labelChanged.emit();\n    });\n\n    this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n    if (this.hostEl != null) {\n      this.resizeObserver.observe(this.hostEl);\n    }\n\n    if (this.contentEl != null) {\n      this.contentResizeObserver.observe(this.contentEl);\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    this.contentResizeObserver?.disconnect();\n  }\n\n  protected componentDidRender(): void {\n    if (this.focused && this.inputEl != null) {\n      this.setFocus();\n    }\n  }\n\n  protected render(): JSX.Element {\n    const { primaryColor, accentColor } = getPinColors(this.pin);\n    return (\n      <Host>\n        <div\n          class={classNames('pin-label-input-wrapper', {\n            focused: this.focused,\n          })}\n          onPointerDown={this.handlePointerDown}\n          style={{\n            top: `${this.computedScreenPosition?.y.toString() || 0}px`,\n            left: `${this.computedScreenPosition?.x.toString() || 0}px`,\n            minWidth: this.computeMinWidth(),\n            maxWidth: this.computeMaxWidth(),\n            maxHeight: this.computeMaxHeight(),\n            borderColor: primaryColor,\n            background: accentColor,\n          }}\n        >\n          <textarea\n            id={`pin-label-input-${this.pin?.id}`}\n            class={classNames('pin-label-input', 'pin-label-text', {\n              ['readonly']: !this.focused,\n            })}\n            disabled={!this.focused}\n            ref={(ref) => (this.inputEl = ref)}\n            value={this.value}\n            rows={this.textareaRows}\n            onKeyDown={this.handleInputKeyDown}\n            onInput={this.handleTextInput}\n            onBlur={this.handleTextBlur}\n          />\n          {/* This corrects for a behavior in Firefox where setting the `disabled` attribute to true */}\n          {/* prevents any events from propagating. */}\n          {!this.focused && (\n            <div\n              class=\"pin-input-drag-target\"\n              onPointerDown={this.handlePointerDown}\n            />\n          )}\n        </div>\n        <div\n          ref={(el) => (this.contentEl = el)}\n          class={classNames('pin-label-text', 'pin-label-hidden')}\n          style={{\n            maxWidth: this.computeMaxWidth(),\n            maxHeight: this.computeMaxHeight(),\n          }}\n        >\n          {this.hiddenContent()}\n        </div>\n      </Host>\n    );\n  }\n\n  private hiddenContent(): Array<string | HTMLBRElement> {\n    // This corrects some inconsistencies in how a newline character\n    // is represented in a div. Leveraging `<br>`s results in a more\n    // consistent representation of the newlines in a textarea.\n    return this.value.includes('\\n')\n      ? this.value\n          .split('\\n')\n          .reduce(\n            (res, str) => [...res, str, <br />],\n            [] as Array<string | HTMLBRElement>,\n          )\n      : [this.value];\n  }\n\n  private computeMinWidth(): string {\n    if (this.contentElBounds != null) {\n      const expected = `${this.contentElBounds.width + 8}px`;\n\n      return `min(${expected}, ${this.computeMaxWidth()})`;\n    } else {\n      return `var(--viewer-annotations-pin-label-min-width)`;\n    }\n  }\n\n  private computeMaxWidth(): string {\n    const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n    return `min(${expected}, ${this.computeRemainingWidth()})`;\n  }\n\n  private computeMaxHeight(): string {\n    const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n    return `min(${expected}, ${this.computeRemainingHeight()})`;\n  }\n\n  private computeRemainingWidth(): string {\n    return `calc(${this.elementBounds?.width.toString() || 0}px - ${\n      this.computedScreenPosition?.x.toString() || 0\n    }px)`;\n  }\n\n  private computeRemainingHeight(): string {\n    return `calc(${this.elementBounds?.height.toString() || 0}px - ${\n      this.computedScreenPosition?.y.toString() || 0\n    }px)`;\n  }\n\n  private computeScreenPosition(): void {\n    this.computedScreenPosition =\n      isTextPin(this.pin) &&\n      this.elementBounds != null &&\n      this.pin.label.point != null\n        ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n        : undefined;\n  }\n\n  private computeContentSize = (): void => {\n    readDOM(() => {\n      if (this.contentEl != null) {\n        this.contentElBounds = this.contentEl.getBoundingClientRect();\n        const computedStyles = getComputedStyle(this.contentEl);\n        this.textareaRows = Math.max(\n          1,\n          Math.ceil(\n            (parseFloat(computedStyles.getPropertyValue('height')) -\n              parseFloat(computedStyles.getPropertyValue('borderWidth')) * 2) /\n              parseFloat(computedStyles.getPropertyValue('lineHeight')),\n          ),\n        );\n      }\n    });\n  };\n\n  private handleInputKeyDown = (event: KeyboardEvent): void => {\n    event.stopPropagation();\n    if (\n      event.key === 'Enter' &&\n      (event.ctrlKey || event.metaKey || event.shiftKey)\n    ) {\n      this.textareaRows += 1;\n      this.value += '\\n';\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      this.submit();\n    }\n  };\n\n  private handlePointerDown = (event: PointerEvent): void => {\n    if (!this.focused) {\n      if (this.elementBounds != null) {\n        if (event.buttons !== 2) {\n          event.preventDefault();\n          event.stopPropagation();\n        }\n        this.relativePointerDownPosition = translatePointToRelative(\n          getMouseClientPosition(event, this.elementBounds),\n          this.elementBounds,\n        );\n        this.pinPointerDownPosition = this.pin?.label.point;\n\n        window.addEventListener('pointermove', this.handlePointerMove);\n        window.addEventListener('pointerup', this.handlePointerUp);\n      }\n    }\n  };\n\n  private handlePointerMove = (event: PointerEvent): void => {\n    if (\n      this.elementBounds != null &&\n      this.relativePointerDownPosition &&\n      this.pinPointerDownPosition != null\n    ) {\n      // Prevent selection of any text while interacting with the label\n      event.preventDefault();\n      event.stopPropagation();\n\n      const point = getMouseClientPosition(event, this.elementBounds);\n      const relative = translatePointToRelative(point, this.elementBounds);\n\n      const relativeDelta = Point.subtract(\n        relative,\n        this.relativePointerDownPosition,\n      );\n\n      const myUpdatedPin =\n        this.pin != null\n          ? {\n              ...this.pin,\n              label: {\n                ...this.pin.label,\n                point: Point.add(this.pinPointerDownPosition, relativeDelta),\n              },\n            }\n          : undefined;\n\n      if (myUpdatedPin) {\n        this.pinController?.updatePin(myUpdatedPin);\n        this.computeScreenPosition();\n      }\n    }\n  };\n\n  private handlePointerUp = (event: PointerEvent): void => {\n    if (\n      this.pinController?.getToolMode() === 'edit' &&\n      this.relativePointerDownPosition != null &&\n      this.elementBounds != null\n    ) {\n      const pointerDownScreen = translatePointToScreen(\n        this.relativePointerDownPosition,\n        this.elementBounds,\n      );\n      const distanceBetweenStartAndEndPoint = Point.distance(\n        pointerDownScreen,\n        getMouseClientPosition(event, this.elementBounds),\n      );\n\n      if (distanceBetweenStartAndEndPoint <= 2) {\n        this.focused = true;\n        this.labelFocused.emit(this.pin?.id);\n      }\n    }\n\n    this.relativePointerDownPosition = undefined;\n    this.pinPointerDownPosition = undefined;\n\n    window.removeEventListener('pointermove', this.handlePointerMove);\n    window.removeEventListener('pointerup', this.handlePointerUp);\n  };\n\n  private handleTextBlur = (): void => {\n    this.submit();\n  };\n\n  private handleTextInput = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n  };\n}\n","\n:host {\n  /**\n   * @prop  --viewer-annotations-pin-label-line-color: A CSS color that\n   * specifies the color of the label line\n   */\n   --viewer-annotations-pin-label-line-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-line-width: A CSS color that\n   * specifies the width of the label line\n   */\n   --viewer-annotations-pin-label-line-width: 1;\n\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.label-line {\n  pointer-events: auto;\n  stroke: var(--viewer-annotations-pin-label-line-color);\n  stroke-width: var( --viewer-annotations-pin-label-line-width);\n  cursor: default;\n}\n\n.svg {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  pointer-events: none;\n  height: 100%;\n  width: 100%;\n}\n","import {\n  Component,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  JSX,\n  Prop,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getPinColors, Pin } from '../../lib/pins/model';\n\n@Component({\n  tag: 'vertex-viewer-pin-label-line',\n  styleUrl: 'viewer-pin-label-line.css',\n  shadow: false,\n})\nexport class VertexPinLabelLine {\n  @Prop()\n  public pinPoint: Point.Point | undefined;\n\n  @Prop()\n  public labelPoint: Point.Point | undefined;\n\n  @Prop()\n  public pin: Pin | undefined;\n\n  protected render(): JSX.Element {\n    const { primaryColor } = getPinColors(this.pin);\n    return (\n      <Host>\n        <svg class=\"svg\">\n          <line\n            class=\"label-line\"\n            style={{\n              stroke: primaryColor,\n            }}\n            x1={this.labelPoint?.x}\n            y1={this.labelPoint?.y}\n            x2={this.pinPoint?.x}\n            y2={this.pinPoint?.y}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/viewer/p-7f388b45.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["viewerMarkupToolCss","ViewerMarkupTool","constructor","hostRef","this","tool","disabled","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","stateMap","handleMarkupInteractionBegin","markupBegin","emit","handleMarkupInteractionEnd","markupElement","isVertexViewerFreeformMarkup","points","bounds","length","markupEnd","FreeformMarkup","isVertexViewerCircleMarkup","CircleMarkup","isVertexViewerArrowMarkup","start","end","ArrowMarkup","handleViewerChanged","viewer","handlePropertyChanged","updateMarkupElement","handleScalingConfigurationChanged","componentDidLoad","reset","undefined","mode","render","h","Host","createArrowMarkupElement","arrowTemplateId","element","stampTemplateWithId","window","document","body","console","warn","createElement","createCircleMarkupElement","circleTemplateId","createFreeformMarkupElement","freeformTemplateId","createNewMarkupElement","remove","dispose","removeEventListener","newMarkupElement","hostEl","append","originatingViewport","offset","addEventListener"],"sources":["src/components/viewer-markup-tool/viewer-markup-tool.css?tag=vertex-viewer-markup-tool&encapsulation=shadow","src/components/viewer-markup-tool/viewer-markup-tool.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n:host([elevated=\"\"]) {\n  z-index: 100;\n}","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\nimport { BasicViewer } from '@vertexvis/utils';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n  MarkupCenteringBehavior,\n} from '../../lib/types/markup';\nimport {\n  isVertexViewerArrowMarkup,\n  LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\n\n/**\n * The types of markup that can be performed by this tool.\n */\nexport type ViewerMarkupToolType = 'arrow' | 'circle' | 'freeform';\n\ninterface StateMap {\n  markupElement?:\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement;\n}\n\n@Component({\n  tag: 'vertex-viewer-markup-tool',\n  styleUrl: 'viewer-markup-tool.css',\n  shadow: true,\n})\nexport class ViewerMarkupTool {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * Disables markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: BasicViewer;\n\n  /**\n   * The style of the starting anchor. This defaults to none.\n   */\n  @Prop({ mutable: true })\n  public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n  /**\n   * The style of the ending anchor. This defaults to 'arrow-triangle.'\n   */\n  @Prop({ mutable: true })\n  public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n  /**\n   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched when a user begins a new markup.\n   */\n  @Event({ bubbles: true })\n  public markupBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when a user has finished their markup.\n   */\n  @Event({ bubbles: true })\n  public markupEnd!: EventEmitter<Markup>;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  /**\n   * Captures internal state that you want to preserve across dev refreshes, but\n   * don't want to trigger a render when the state changes.\n   */\n  @State()\n  private stateMap: StateMap = {};\n\n  @Watch('viewer')\n  protected async handleViewerChanged(): Promise<void> {\n    if (this.stateMap.markupElement != null) {\n      this.stateMap.markupElement.viewer = this.viewer;\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  @Watch('circleTemplateId')\n  @Watch('disabled')\n  @Watch('endLineAnchorStyle')\n  @Watch('freeformTemplateId')\n  @Watch('startLineAnchorStyle')\n  @Watch('tool')\n  protected handlePropertyChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  @Watch('scale')\n  @Watch('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  protected handleScalingConfigurationChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * Resets the state of the internally managed markup element\n   * to allow for creating a new markup. This state is automatically\n   * managed when this element is placed as a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Method()\n  public async reset(): Promise<void> {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      markupElement.points = undefined;\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      markupElement.start = undefined;\n      markupElement.end = undefined;\n      markupElement.mode = 'create';\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    if (!this.disabled) {\n      if (\n        this.tool === 'arrow' ||\n        this.tool === 'circle' ||\n        this.tool === 'freeform'\n      ) {\n        return (\n          <Host>\n            <slot />\n          </Host>\n        );\n      } else {\n        return <Host>{`Unsupported tool type '${this.tool}'.`}</Host>;\n      }\n    } else {\n      return <Host></Host>;\n    }\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`\n          )\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`\n          )\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`\n          )\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private createNewMarkupElement():\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    switch (this.tool) {\n      case 'arrow':\n        return this.createArrowMarkupElement();\n      case 'circle':\n        return this.createCircleMarkupElement();\n      case 'freeform':\n        return this.createFreeformMarkupElement();\n    }\n  }\n\n  private updateMarkupElement(): void {\n    const { markupElement } = this.stateMap;\n    if (markupElement != null) {\n      markupElement.remove();\n      markupElement.dispose();\n      markupElement.viewer = undefined;\n      markupElement.removeEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin\n      );\n      markupElement.removeEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd\n      );\n    }\n\n    if (!this.disabled) {\n      const newMarkupElement = this.createNewMarkupElement();\n      this.hostEl.append(newMarkupElement);\n\n      if (this.tool === 'arrow') {\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).startLineAnchorStyle = this.startLineAnchorStyle;\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).endLineAnchorStyle = this.endLineAnchorStyle;\n      }\n\n      newMarkupElement.mode = 'create';\n      newMarkupElement.viewer = this.viewer;\n      newMarkupElement.originatingViewport = this.originatingViewport;\n      newMarkupElement.centeringBehavior = this.centeringBehavior;\n      newMarkupElement.offset = this.offset;\n      newMarkupElement.scale = this.scale;\n      newMarkupElement.addEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin\n      );\n      newMarkupElement.addEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd\n      );\n      this.stateMap.markupElement = newMarkupElement;\n    }\n  }\n\n  private handleMarkupInteractionBegin = (): void => {\n    this.markupBegin.emit();\n  };\n\n  private handleMarkupInteractionEnd = (): void => {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      const { points, bounds } = markupElement;\n\n      if (points != null && points.length > 0 && bounds != null) {\n        this.markupEnd.emit(new FreeformMarkup({ points, bounds }));\n      }\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      const { bounds } = markupElement;\n\n      if (bounds != null) {\n        this.markupEnd.emit(new CircleMarkup({ bounds }));\n      }\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      const { start, end } = markupElement;\n\n      if (start != null && end != null) {\n        this.markupEnd.emit(new ArrowMarkup({ start, end }));\n      }\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["viewerMarkupToolCss","ViewerMarkupTool","constructor","hostRef","this","tool","disabled","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","stateMap","handleMarkupInteractionBegin","markupBegin","emit","handleMarkupInteractionEnd","markupElement","isVertexViewerFreeformMarkup","points","bounds","length","markupEnd","FreeformMarkup","isVertexViewerCircleMarkup","CircleMarkup","isVertexViewerArrowMarkup","start","end","ArrowMarkup","handleViewerChanged","viewer","handlePropertyChanged","updateMarkupElement","handleScalingConfigurationChanged","componentDidLoad","reset","undefined","mode","render","h","Host","createArrowMarkupElement","arrowTemplateId","element","stampTemplateWithId","window","document","body","console","warn","createElement","createCircleMarkupElement","circleTemplateId","createFreeformMarkupElement","freeformTemplateId","createNewMarkupElement","remove","dispose","removeEventListener","newMarkupElement","hostEl","append","originatingViewport","offset","addEventListener"],"sources":["src/components/viewer-markup-tool/viewer-markup-tool.css?tag=vertex-viewer-markup-tool&encapsulation=shadow","src/components/viewer-markup-tool/viewer-markup-tool.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n:host([elevated=\"\"]) {\n  z-index: 100;\n}","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\nimport { BasicViewer } from '@vertexvis/utils';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n  MarkupCenteringBehavior,\n} from '../../lib/types/markup';\nimport {\n  isVertexViewerArrowMarkup,\n  LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\n\n/**\n * The types of markup that can be performed by this tool.\n */\nexport type ViewerMarkupToolType = 'arrow' | 'circle' | 'freeform';\n\ninterface StateMap {\n  markupElement?:\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement;\n}\n\n@Component({\n  tag: 'vertex-viewer-markup-tool',\n  styleUrl: 'viewer-markup-tool.css',\n  shadow: true,\n})\nexport class ViewerMarkupTool {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * Disables markups.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup.\n   *\n   * This property will automatically be set when a child of a\n   * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n   */\n  @Prop()\n  public viewer?: BasicViewer;\n\n  /**\n   * The style of the starting anchor. This defaults to none.\n   */\n  @Prop({ mutable: true })\n  public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n  /**\n   * The style of the ending anchor. This defaults to 'arrow-triangle.'\n   */\n  @Prop({ mutable: true })\n  public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n  /**\n   * The original viewport dimensions where this markup was created. This value is used\n   * to determine where the markup should be rendered relative to the current viewport,\n   * enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all NDC values will be considered relative to this viewport.\n   */\n  @Prop()\n  public originatingViewport?: Dimensions.Dimensions;\n\n  /**\n   * Defines the behavior of the provided markup when the originating viewport is smaller\n   * than the current viewport, or is scaled to a size smaller than the current viewport\n   * using the `scale` property.\n   *\n   * Options:\n   * - `x-only`: Markup will be centered horizontally, but not vertically.\n   * - `y-only`: Markup will be centered vertically, but not horizontally.\n   * - `both`: Markup will be centered both horizontally and vertically.\n   * - `none`: Markup will not be centered (default).\n   */\n  @Prop()\n  public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n  /**\n   * The current offset of the visible viewport. This value is used to determine where\n   * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n   *\n   * When provided, all computed coordinates will be offset by this amount.\n   */\n  @Prop()\n  public offset?: Point.Point;\n\n  /**\n   * The scale to render this markup at. This value is used to scale the element's bounds\n   * along with any `offset` to determine the final computed coordinates.\n   *\n   * When provided, all computed coordinates will be scaled by this amount.\n   */\n  @Prop()\n  public scale = 1;\n\n  /**\n   * An event that is dispatched when a user begins a new markup.\n   */\n  @Event({ bubbles: true })\n  public markupBegin!: EventEmitter<void>;\n\n  /**\n   * An event that is dispatched when a user has finished their markup.\n   */\n  @Event({ bubbles: true })\n  public markupEnd!: EventEmitter<Markup>;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  /**\n   * Captures internal state that you want to preserve across dev refreshes, but\n   * don't want to trigger a render when the state changes.\n   */\n  @State()\n  private stateMap: StateMap = {};\n\n  @Watch('viewer')\n  protected async handleViewerChanged(): Promise<void> {\n    if (this.stateMap.markupElement != null) {\n      this.stateMap.markupElement.viewer = this.viewer;\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  @Watch('circleTemplateId')\n  @Watch('disabled')\n  @Watch('endLineAnchorStyle')\n  @Watch('freeformTemplateId')\n  @Watch('startLineAnchorStyle')\n  @Watch('tool')\n  protected handlePropertyChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  @Watch('scale')\n  @Watch('offset')\n  @Watch('originatingViewport')\n  @Watch('centeringBehavior')\n  protected handleScalingConfigurationChanged(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updateMarkupElement();\n  }\n\n  /**\n   * Resets the state of the internally managed markup element\n   * to allow for creating a new markup. This state is automatically\n   * managed when this element is placed as a child of a\n   * `<vertex-viewer-markup>` element.\n   */\n  @Method()\n  public async reset(): Promise<void> {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      markupElement.points = undefined;\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      markupElement.bounds = undefined;\n      markupElement.mode = 'create';\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      markupElement.start = undefined;\n      markupElement.end = undefined;\n      markupElement.mode = 'create';\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    if (!this.disabled) {\n      if (\n        this.tool === 'arrow' ||\n        this.tool === 'circle' ||\n        this.tool === 'freeform'\n      ) {\n        return (\n          <Host>\n            <slot />\n          </Host>\n        );\n      } else {\n        return <Host>{`Unsupported tool type '${this.tool}'.`}</Host>;\n      }\n    } else {\n      return <Host></Host>;\n    }\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`,\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`,\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`,\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`,\n          ),\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private createNewMarkupElement():\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    switch (this.tool) {\n      case 'arrow':\n        return this.createArrowMarkupElement();\n      case 'circle':\n        return this.createCircleMarkupElement();\n      case 'freeform':\n        return this.createFreeformMarkupElement();\n    }\n  }\n\n  private updateMarkupElement(): void {\n    const { markupElement } = this.stateMap;\n    if (markupElement != null) {\n      markupElement.remove();\n      markupElement.dispose();\n      markupElement.viewer = undefined;\n      markupElement.removeEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin,\n      );\n      markupElement.removeEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd,\n      );\n    }\n\n    if (!this.disabled) {\n      const newMarkupElement = this.createNewMarkupElement();\n      this.hostEl.append(newMarkupElement);\n\n      if (this.tool === 'arrow') {\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).startLineAnchorStyle = this.startLineAnchorStyle;\n        (\n          newMarkupElement as HTMLVertexViewerMarkupArrowElement\n        ).endLineAnchorStyle = this.endLineAnchorStyle;\n      }\n\n      newMarkupElement.mode = 'create';\n      newMarkupElement.viewer = this.viewer;\n      newMarkupElement.originatingViewport = this.originatingViewport;\n      newMarkupElement.centeringBehavior = this.centeringBehavior;\n      newMarkupElement.offset = this.offset;\n      newMarkupElement.scale = this.scale;\n      newMarkupElement.addEventListener(\n        'interactionBegin',\n        this.handleMarkupInteractionBegin,\n      );\n      newMarkupElement.addEventListener(\n        'interactionEnd',\n        this.handleMarkupInteractionEnd,\n      );\n      this.stateMap.markupElement = newMarkupElement;\n    }\n  }\n\n  private handleMarkupInteractionBegin = (): void => {\n    this.markupBegin.emit();\n  };\n\n  private handleMarkupInteractionEnd = (): void => {\n    const { markupElement } = this.stateMap;\n    if (isVertexViewerFreeformMarkup(markupElement)) {\n      const { points, bounds } = markupElement;\n\n      if (points != null && points.length > 0 && bounds != null) {\n        this.markupEnd.emit(new FreeformMarkup({ points, bounds }));\n      }\n    } else if (isVertexViewerCircleMarkup(markupElement)) {\n      const { bounds } = markupElement;\n\n      if (bounds != null) {\n        this.markupEnd.emit(new CircleMarkup({ bounds }));\n      }\n    } else if (isVertexViewerArrowMarkup(markupElement)) {\n      const { start, end } = markupElement;\n\n      if (start != null && end != null) {\n        this.markupEnd.emit(new ArrowMarkup({ start, end }));\n      }\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/viewer/p-89544066.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["TeleportInteractionHandler","constructor","model","animationConfiguration","this","rectObserver","ElementRectObserver","handlePointerDown","bind","handlePointerUp","handleEnabledChange","handleTeleportModeChange","enabledChangeDisposable","onEnabledChange","dispose","disable","_a","element","undefined","api","disconnect","initialize","observe","getEnabled","setAnimations","config","enable","teleportModeChangeDisposable","onTeleportModeChange","addEventListener","getTeleportMode","_b","cursorDisposable","_c","removeEventListener","event","downPosition","getMouseClientPosition","rect","downButtons","buttons","window","mode","threshold","pixelThreshold","point","isRightClick","hasModifier","shiftKey","altKey","metaKey","ctrlKey","Point","distance","teleportToHit","teleportTowardHit","teleportAndAlign","beginInteraction","isInteracting","endInteraction","worldPoint","getWorldPointFromViewport","mouseRay","getRayFromPoint","teleportDistancePercentage","teleportCollisionDistance","getConfiguration","teleportDistanceScalar","performInteraction","camera","boundingBox","stepDistance","Math","max","Vector3","toArray","BoundingBox","lengths","positionPlane","Plane","fromNormalAndCoplanarPoint","up","position","projectedWorldPoint","projectPoint","distanceToWorldPoint","mouseRayAtWorldPoint","Ray","create","origin","nextPosition","at","update","lookAt","add","subtract","projectedNextStep","getWorldPointWithFallback","shortestBoundingBoxLength","shortestLength","heightScalar","getTeleportHeightPercentage","cameraPlane","projectedHitPosition","rayToHitPosition","direction","normalize","distanceToHitPosition","distanceToLookAt","newPosition","newPositionViewVectorRay","viewVector","hits","hitItems","hit","hitNormal","hitPoint","upRay","alignTo","fn","transformCamera","renderConfiguration","enabled","addCursor","min","animation","milliseconds","durationMs","viewerTeleportToolCss","ViewerTeleportTool","hostRef","animationsDisabled","animationMs","WalkModeModel","stateMap","componentWillLoad","setupController","setupInteractionHandler","setDepthBuffers","connectedCallback","disconnectedCallback","clearInteractionHandler","resetDepthBuffers","handleModeChange","controller","setTeleportMode","handleViewerChanged","handleAnimationMsChanged","interactionHandler","handleAnimationsDisabledChanged","handleControllerChanged","controllerChanged","emit","handleModelChanged","render","h","Host","key","WalkModeController","updateModel","viewer","depthBuffers","shouldClearDepthBuffers","interactionHandlerDisposable","registerInteractionHandler"],"sources":["src/lib/teleportation/interactions.ts","src/components/viewer-teleport-tool/viewer-teleport-tool.css?tag=vertex-viewer-teleport-tool&encapsulation=shadow","src/components/viewer-teleport-tool/viewer-teleport-tool.tsx"],"sourcesContent":["import { BoundingBox, Plane, Point, Ray, Vector3 } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getMouseClientPosition } from '../dom';\nimport { ElementRectObserver } from '../elementRectObserver';\nimport {\n  CameraTransform,\n  InteractionApi,\n  InteractionHandler,\n} from '../interactions';\nimport { Camera, CameraRenderOptions } from '../scenes';\nimport { ViewerTeleportMode, WalkModeModel } from '../walk-mode/model';\n\nexport interface AnimationConfiguration {\n  durationMs: number;\n}\n\nexport class TeleportInteractionHandler implements InteractionHandler {\n  private api?: InteractionApi;\n  private element?: HTMLElement;\n\n  private rectObserver = new ElementRectObserver();\n\n  private downPosition?: Point.Point;\n  private downButtons?: number;\n\n  private enabledChangeDisposable?: Disposable;\n  private teleportModeChangeDisposable?: Disposable;\n  private cursorDisposable?: Disposable;\n\n  public constructor(\n    private model: WalkModeModel,\n    private animationConfiguration?: AnimationConfiguration\n  ) {\n    this.handlePointerDown = this.handlePointerDown.bind(this);\n    this.handlePointerUp = this.handlePointerUp.bind(this);\n    this.handleEnabledChange = this.handleEnabledChange.bind(this);\n    this.handleTeleportModeChange = this.handleTeleportModeChange.bind(this);\n\n    this.enabledChangeDisposable = this.model.onEnabledChange(\n      this.handleEnabledChange\n    );\n  }\n\n  public dispose(): void {\n    this.disable();\n    this.enabledChangeDisposable?.dispose();\n\n    this.element = undefined;\n    this.api = undefined;\n\n    this.rectObserver.disconnect();\n  }\n\n  public initialize(element: HTMLElement, api: InteractionApi): void {\n    this.element = element;\n    this.api = api;\n\n    this.rectObserver.observe(element);\n\n    this.handleEnabledChange(this.model.getEnabled());\n  }\n\n  public setAnimations(config?: AnimationConfiguration): void {\n    this.animationConfiguration = config;\n  }\n\n  public enable(): void {\n    this.disable();\n\n    this.teleportModeChangeDisposable = this.model.onTeleportModeChange(\n      this.handleTeleportModeChange\n    );\n    this.element?.addEventListener('pointerdown', this.handlePointerDown);\n\n    this.handleTeleportModeChange(this.model.getTeleportMode());\n  }\n\n  public disable(): void {\n    this.teleportModeChangeDisposable?.dispose();\n    this.cursorDisposable?.dispose();\n\n    this.element?.removeEventListener('pointerdown', this.handlePointerDown);\n  }\n\n  private async handlePointerDown(event: PointerEvent): Promise<void> {\n    this.downPosition = getMouseClientPosition(event, this.rectObserver.rect);\n    this.downButtons = event.buttons;\n\n    window.addEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private async handlePointerUp(event: PointerEvent): Promise<void> {\n    const mode = this.model.getTeleportMode();\n    const threshold = this.api?.pixelThreshold() ?? 2;\n    const point = getMouseClientPosition(event, this.rectObserver.rect);\n    const isRightClick = this.downButtons === 2;\n    const hasModifier =\n      event.shiftKey || event.altKey || event.metaKey || event.ctrlKey;\n\n    if (\n      mode != null &&\n      this.downPosition != null &&\n      Point.distance(this.downPosition, point) <= threshold &&\n      !isRightClick &&\n      !hasModifier\n    ) {\n      switch (mode) {\n        case 'teleport':\n          return this.teleportToHit(point);\n        case 'teleport-toward':\n          return this.teleportTowardHit(point);\n        case 'teleport-and-align':\n          return this.teleportAndAlign(point);\n      }\n    }\n\n    this.downPosition = undefined;\n\n    window.removeEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private async beginInteraction(): Promise<void> {\n    if (!this.api?.isInteracting()) {\n      await this.api?.beginInteraction();\n    }\n  }\n\n  private async endInteraction(): Promise<void> {\n    await this.api?.endInteraction();\n  }\n\n  private async teleportTowardHit(point: Point.Point): Promise<void> {\n    const worldPoint = await this.api?.getWorldPointFromViewport(point);\n    const mouseRay = this.api?.getRayFromPoint(point);\n\n    if (mouseRay != null) {\n      const { teleportDistancePercentage, teleportCollisionDistance } =\n        this.model.getConfiguration();\n      const teleportDistanceScalar = teleportDistancePercentage / 100;\n\n      return this.performInteraction(({ camera, boundingBox }) => {\n        const stepDistance =\n          Math.max(...Vector3.toArray(BoundingBox.lengths(boundingBox))) *\n          teleportDistanceScalar;\n\n        const positionPlane = Plane.fromNormalAndCoplanarPoint(\n          camera.up,\n          camera.position\n        );\n        const projectedWorldPoint = Plane.projectPoint(\n          positionPlane,\n          worldPoint ?? camera.position\n        );\n        const distanceToWorldPoint = Vector3.distance(\n          camera.position,\n          projectedWorldPoint\n        );\n\n        if (\n          distanceToWorldPoint < stepDistance &&\n          distanceToWorldPoint > teleportCollisionDistance * 1.1\n        ) {\n          const mouseRayAtWorldPoint = Ray.create({\n            ...mouseRay,\n            origin: projectedWorldPoint,\n          });\n          const nextPosition = Plane.projectPoint(\n            positionPlane,\n            Ray.at(mouseRayAtWorldPoint, -teleportCollisionDistance)\n          );\n\n          return camera.update({\n            position: nextPosition,\n            lookAt: Vector3.add(\n              camera.lookAt,\n              Vector3.subtract(nextPosition, camera.position)\n            ),\n          });\n        } else {\n          const projectedNextStep = Plane.projectPoint(\n            positionPlane,\n            Ray.at(mouseRay, stepDistance)\n          );\n\n          return camera.update({\n            position: projectedNextStep,\n            lookAt: Vector3.add(\n              camera.lookAt,\n              Vector3.subtract(projectedNextStep, camera.position)\n            ),\n          });\n        }\n      });\n    }\n  }\n\n  private async teleportToHit(point: Point.Point): Promise<void> {\n    const worldPoint = await this.getWorldPointWithFallback(point);\n\n    if (worldPoint != null) {\n      return this.performInteraction(({ camera, boundingBox }) => {\n        const shortestBoundingBoxLength = this.shortestLength(boundingBox);\n        const heightScalar = this.model.getTeleportHeightPercentage() / 100;\n\n        const cameraPlane = Plane.fromNormalAndCoplanarPoint(\n          camera.up,\n          camera.position\n        );\n        const projectedHitPosition = Plane.projectPoint(\n          cameraPlane,\n          worldPoint\n        );\n\n        const rayToHitPosition = Ray.create({\n          origin: camera.position,\n          direction: Vector3.normalize(\n            Vector3.subtract(projectedHitPosition, camera.position)\n          ),\n        });\n        const distanceToHitPosition = Vector3.distance(\n          camera.position,\n          projectedHitPosition\n        );\n        const distanceToLookAt = Vector3.distance(\n          camera.position,\n          camera.lookAt\n        );\n\n        const newPosition = Ray.at(\n          rayToHitPosition,\n          distanceToHitPosition - shortestBoundingBoxLength * heightScalar\n        );\n        const newPositionViewVectorRay = Ray.create({\n          origin: newPosition,\n          direction: Vector3.normalize(camera.viewVector),\n        });\n\n        return camera.update({\n          position: newPosition,\n          lookAt: Ray.at(newPositionViewVectorRay, distanceToLookAt),\n        });\n      });\n    }\n  }\n\n  private async teleportAndAlign(point: Point.Point): Promise<void> {\n    const hits = await this.api?.hitItems(point);\n    const hit = hits != null ? hits[0] : undefined;\n\n    if (hit?.hitNormal != null && hit?.hitPoint) {\n      await this.performInteraction(({ camera, boundingBox }) => {\n        const shortestBoundingBoxLength = this.shortestLength(boundingBox);\n        const heightScalar = this.model.getTeleportHeightPercentage() / 100;\n\n        const upRay = Ray.create({\n          origin: hit.hitPoint as Vector3.Vector3,\n          direction: hit.hitNormal as Vector3.Vector3,\n        });\n\n        return camera.alignTo(\n          Ray.at(upRay, shortestBoundingBoxLength * heightScalar),\n          hit.hitNormal as Vector3.Vector3\n        );\n      });\n    }\n  }\n\n  private async performInteraction(fn: CameraTransform<Camera>): Promise<void> {\n    await this.beginInteraction();\n    await this.api?.transformCamera(fn, this.renderConfiguration());\n    await this.endInteraction();\n  }\n\n  private async getWorldPointWithFallback(\n    point: Point.Point\n  ): Promise<Vector3.Vector3 | undefined> {\n    const worldPoint = await this.api?.getWorldPointFromViewport(point);\n\n    if (worldPoint == null) {\n      const hits = await this.api?.hitItems(point);\n      const hit = hits != null ? hits[0] : undefined;\n\n      return hit?.hitPoint != null\n        ? (hit.hitPoint as Vector3.Vector3)\n        : worldPoint;\n    }\n    return worldPoint;\n  }\n\n  private handleEnabledChange(enabled: boolean): void {\n    if (enabled) {\n      this.enable();\n    } else {\n      this.disable();\n    }\n  }\n\n  private handleTeleportModeChange(mode?: ViewerTeleportMode): void {\n    this.cursorDisposable?.dispose();\n\n    if (mode != null) {\n      this.cursorDisposable = this.api?.addCursor('crosshair');\n    }\n  }\n\n  private shortestLength(boundingBox: BoundingBox.BoundingBox): number {\n    return Math.min(...Vector3.toArray(BoundingBox.lengths(boundingBox)));\n  }\n\n  private renderConfiguration(): CameraRenderOptions {\n    return this.animationConfiguration != null\n      ? { animation: { milliseconds: this.animationConfiguration.durationMs } }\n      : {};\n  }\n}\n",":host {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  JSX,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { TeleportInteractionHandler } from '../../lib/teleportation/interactions';\nimport { WalkModeController } from '../../lib/walk-mode/controller';\nimport { ViewerTeleportMode, WalkModeModel } from '../../lib/walk-mode/model';\n\ninterface StateMap {\n  shouldClearDepthBuffers?: boolean;\n}\n\n/**\n * The `<vertex-viewer-teleport-tool>` allows for click-based \"teleportation\"\n * around a model, which is particularly useful for walking through a model.\n * This tool is automatically included as part of the <vertex-viewer-walk-mode-tool>.\n */\n@Component({\n  tag: 'vertex-viewer-teleport-tool',\n  styleUrl: 'viewer-teleport-tool.css',\n  shadow: true,\n})\nexport class ViewerTeleportTool {\n  /**\n   * The viewer that this component is bound to. This is automatically assigned\n   * if added to the light-dom of a parent viewer element.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * The type of teleportation to perform when clicking.\n   *\n   * `teleport` - the camera's `position` is moved to the location of the hit result\n   * constrained by the plane represented by the camera's current `position` and `up`\n   * vectors.\n   *\n   * `teleport-and-align` - the camera's `position`, `lookAt`, and `up` vectors are updated\n   * to align to the plane represented by the hit result's position and normal.\n   *\n   * `teleport-toward` - the camera's `position` is moved a fixed distance toward the location of the\n   * hit result constrained by the plane represented by the camera's current `position` and `up`\n   * vectors.\n   *\n   * `undefined` - no teleportation will occur when clicking.\n   *\n   * Defaults to `undefined`.\n   */\n  @Prop({ mutable: true })\n  public mode?: ViewerTeleportMode;\n\n  /**\n   * Indicates whether animations will be used when performing camera\n   * operations. Defaults to `false`.\n   */\n  @Prop()\n  public animationsDisabled = false;\n\n  /**\n   * The duration of animations, in milliseconds. Defaults to `500`.\n   */\n  @Prop()\n  public animationMs?: number = 500;\n\n  @Prop({ mutable: true })\n  public controller?: WalkModeController;\n\n  @Prop({ mutable: true })\n  public model: WalkModeModel = new WalkModeModel();\n\n  /**\n   * Event emitted when the `WalkModeController` associated with this tool changes.\n   */\n  @Event()\n  public controllerChanged!: EventEmitter<WalkModeController>;\n\n  private interactionHandlerDisposable?: Disposable;\n  private interactionHandler?: TeleportInteractionHandler;\n\n  private stateMap: StateMap = {};\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.setupController();\n    this.setupInteractionHandler();\n    this.setDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  protected connectedCallback(): void {\n    this.setupInteractionHandler();\n    this.setDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  protected disconnectedCallback(): void {\n    this.clearInteractionHandler();\n    this.resetDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('mode')\n  protected handleModeChange(): void {\n    this.controller?.setTeleportMode(this.mode);\n\n    if (this.mode != null) {\n      this.setDepthBuffers();\n    } else {\n      this.resetDepthBuffers();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected handleViewerChanged(): void {\n    this.clearInteractionHandler();\n    this.setupInteractionHandler();\n    this.setDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('animationMs')\n  protected handleAnimationMsChanged(): void {\n    if (this.animationMs != null) {\n      this.interactionHandler?.setAnimations({ durationMs: this.animationMs });\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('animationsDisabled')\n  protected handleAnimationsDisabledChanged(): void {\n    if (this.animationsDisabled) {\n      this.interactionHandler?.setAnimations(undefined);\n    } else if (this.animationMs != null) {\n      this.interactionHandler?.setAnimations({ durationMs: this.animationMs });\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('controller')\n  protected handleControllerChanged(): void {\n    this.setupInteractionHandler();\n    this.setupController();\n    this.controllerChanged.emit(this.controller);\n  }\n\n  @Watch('model')\n  protected handleModelChanged(): void {\n    this.setupController();\n    this.clearInteractionHandler();\n    this.setupInteractionHandler();\n  }\n\n  protected render(): JSX.Element {\n    return <Host></Host>;\n  }\n\n  private setupController(): void {\n    if (this.controller == null) {\n      this.controller = new WalkModeController(this.model);\n      this.controller.setTeleportMode(this.mode);\n      this.controllerChanged.emit(this.controller);\n    } else {\n      this.controller.setTeleportMode(this.mode);\n      this.controller.updateModel(this.model);\n    }\n  }\n\n  private setDepthBuffers(): void {\n    if (\n      this.mode != null &&\n      this.viewer != null &&\n      this.viewer.depthBuffers == null\n    ) {\n      this.stateMap.shouldClearDepthBuffers = true;\n      this.viewer.depthBuffers = 'final';\n    }\n  }\n\n  private resetDepthBuffers(): void {\n    if (this.stateMap.shouldClearDepthBuffers && this.viewer != null) {\n      this.viewer.depthBuffers = undefined;\n      this.stateMap.shouldClearDepthBuffers = undefined;\n    }\n  }\n\n  private clearInteractionHandler(): void {\n    this.interactionHandlerDisposable?.dispose();\n    this.interactionHandlerDisposable = undefined;\n    this.interactionHandler?.dispose();\n    this.interactionHandler = undefined;\n  }\n\n  private async setupInteractionHandler(): Promise<void> {\n    if (this.interactionHandler == null) {\n      this.interactionHandler = new TeleportInteractionHandler(\n        this.model,\n        !this.animationsDisabled && this.animationMs != null\n          ? { durationMs: this.animationMs }\n          : undefined\n      );\n\n      this.interactionHandlerDisposable =\n        await this.viewer?.registerInteractionHandler(this.interactionHandler);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["TeleportInteractionHandler","constructor","model","animationConfiguration","this","rectObserver","ElementRectObserver","handlePointerDown","bind","handlePointerUp","handleEnabledChange","handleTeleportModeChange","enabledChangeDisposable","onEnabledChange","dispose","disable","_a","element","undefined","api","disconnect","initialize","observe","getEnabled","setAnimations","config","enable","teleportModeChangeDisposable","onTeleportModeChange","addEventListener","getTeleportMode","_b","cursorDisposable","_c","removeEventListener","event","downPosition","getMouseClientPosition","rect","downButtons","buttons","window","mode","threshold","pixelThreshold","point","isRightClick","hasModifier","shiftKey","altKey","metaKey","ctrlKey","Point","distance","teleportToHit","teleportTowardHit","teleportAndAlign","beginInteraction","isInteracting","endInteraction","worldPoint","getWorldPointFromViewport","mouseRay","getRayFromPoint","teleportDistancePercentage","teleportCollisionDistance","getConfiguration","teleportDistanceScalar","performInteraction","camera","boundingBox","stepDistance","Math","max","Vector3","toArray","BoundingBox","lengths","positionPlane","Plane","fromNormalAndCoplanarPoint","up","position","projectedWorldPoint","projectPoint","distanceToWorldPoint","mouseRayAtWorldPoint","Ray","create","origin","nextPosition","at","update","lookAt","add","subtract","projectedNextStep","getWorldPointWithFallback","shortestBoundingBoxLength","shortestLength","heightScalar","getTeleportHeightPercentage","cameraPlane","projectedHitPosition","rayToHitPosition","direction","normalize","distanceToHitPosition","distanceToLookAt","newPosition","newPositionViewVectorRay","viewVector","hits","hitItems","hit","hitNormal","hitPoint","upRay","alignTo","fn","transformCamera","renderConfiguration","enabled","addCursor","min","animation","milliseconds","durationMs","viewerTeleportToolCss","ViewerTeleportTool","hostRef","animationsDisabled","animationMs","WalkModeModel","stateMap","componentWillLoad","setupController","setupInteractionHandler","setDepthBuffers","connectedCallback","disconnectedCallback","clearInteractionHandler","resetDepthBuffers","handleModeChange","controller","setTeleportMode","handleViewerChanged","handleAnimationMsChanged","interactionHandler","handleAnimationsDisabledChanged","handleControllerChanged","controllerChanged","emit","handleModelChanged","render","h","Host","key","WalkModeController","updateModel","viewer","depthBuffers","shouldClearDepthBuffers","interactionHandlerDisposable","registerInteractionHandler"],"sources":["src/lib/teleportation/interactions.ts","src/components/viewer-teleport-tool/viewer-teleport-tool.css?tag=vertex-viewer-teleport-tool&encapsulation=shadow","src/components/viewer-teleport-tool/viewer-teleport-tool.tsx"],"sourcesContent":["import { BoundingBox, Plane, Point, Ray, Vector3 } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { getMouseClientPosition } from '../dom';\nimport { ElementRectObserver } from '../elementRectObserver';\nimport {\n  CameraTransform,\n  InteractionApi,\n  InteractionHandler,\n} from '../interactions';\nimport { Camera, CameraRenderOptions } from '../scenes';\nimport { ViewerTeleportMode, WalkModeModel } from '../walk-mode/model';\n\nexport interface AnimationConfiguration {\n  durationMs: number;\n}\n\nexport class TeleportInteractionHandler implements InteractionHandler {\n  private api?: InteractionApi;\n  private element?: HTMLElement;\n\n  private rectObserver = new ElementRectObserver();\n\n  private downPosition?: Point.Point;\n  private downButtons?: number;\n\n  private enabledChangeDisposable?: Disposable;\n  private teleportModeChangeDisposable?: Disposable;\n  private cursorDisposable?: Disposable;\n\n  public constructor(\n    private model: WalkModeModel,\n    private animationConfiguration?: AnimationConfiguration,\n  ) {\n    this.handlePointerDown = this.handlePointerDown.bind(this);\n    this.handlePointerUp = this.handlePointerUp.bind(this);\n    this.handleEnabledChange = this.handleEnabledChange.bind(this);\n    this.handleTeleportModeChange = this.handleTeleportModeChange.bind(this);\n\n    this.enabledChangeDisposable = this.model.onEnabledChange(\n      this.handleEnabledChange,\n    );\n  }\n\n  public dispose(): void {\n    this.disable();\n    this.enabledChangeDisposable?.dispose();\n\n    this.element = undefined;\n    this.api = undefined;\n\n    this.rectObserver.disconnect();\n  }\n\n  public initialize(element: HTMLElement, api: InteractionApi): void {\n    this.element = element;\n    this.api = api;\n\n    this.rectObserver.observe(element);\n\n    this.handleEnabledChange(this.model.getEnabled());\n  }\n\n  public setAnimations(config?: AnimationConfiguration): void {\n    this.animationConfiguration = config;\n  }\n\n  public enable(): void {\n    this.disable();\n\n    this.teleportModeChangeDisposable = this.model.onTeleportModeChange(\n      this.handleTeleportModeChange,\n    );\n    this.element?.addEventListener('pointerdown', this.handlePointerDown);\n\n    this.handleTeleportModeChange(this.model.getTeleportMode());\n  }\n\n  public disable(): void {\n    this.teleportModeChangeDisposable?.dispose();\n    this.cursorDisposable?.dispose();\n\n    this.element?.removeEventListener('pointerdown', this.handlePointerDown);\n  }\n\n  private async handlePointerDown(event: PointerEvent): Promise<void> {\n    this.downPosition = getMouseClientPosition(event, this.rectObserver.rect);\n    this.downButtons = event.buttons;\n\n    window.addEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private async handlePointerUp(event: PointerEvent): Promise<void> {\n    const mode = this.model.getTeleportMode();\n    const threshold = this.api?.pixelThreshold() ?? 2;\n    const point = getMouseClientPosition(event, this.rectObserver.rect);\n    const isRightClick = this.downButtons === 2;\n    const hasModifier =\n      event.shiftKey || event.altKey || event.metaKey || event.ctrlKey;\n\n    if (\n      mode != null &&\n      this.downPosition != null &&\n      Point.distance(this.downPosition, point) <= threshold &&\n      !isRightClick &&\n      !hasModifier\n    ) {\n      switch (mode) {\n        case 'teleport':\n          return this.teleportToHit(point);\n        case 'teleport-toward':\n          return this.teleportTowardHit(point);\n        case 'teleport-and-align':\n          return this.teleportAndAlign(point);\n      }\n    }\n\n    this.downPosition = undefined;\n\n    window.removeEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private async beginInteraction(): Promise<void> {\n    if (!this.api?.isInteracting()) {\n      await this.api?.beginInteraction();\n    }\n  }\n\n  private async endInteraction(): Promise<void> {\n    await this.api?.endInteraction();\n  }\n\n  private async teleportTowardHit(point: Point.Point): Promise<void> {\n    const worldPoint = await this.api?.getWorldPointFromViewport(point);\n    const mouseRay = this.api?.getRayFromPoint(point);\n\n    if (mouseRay != null) {\n      const { teleportDistancePercentage, teleportCollisionDistance } =\n        this.model.getConfiguration();\n      const teleportDistanceScalar = teleportDistancePercentage / 100;\n\n      return this.performInteraction(({ camera, boundingBox }) => {\n        const stepDistance =\n          Math.max(...Vector3.toArray(BoundingBox.lengths(boundingBox))) *\n          teleportDistanceScalar;\n\n        const positionPlane = Plane.fromNormalAndCoplanarPoint(\n          camera.up,\n          camera.position,\n        );\n        const projectedWorldPoint = Plane.projectPoint(\n          positionPlane,\n          worldPoint ?? camera.position,\n        );\n        const distanceToWorldPoint = Vector3.distance(\n          camera.position,\n          projectedWorldPoint,\n        );\n\n        if (\n          distanceToWorldPoint < stepDistance &&\n          distanceToWorldPoint > teleportCollisionDistance * 1.1\n        ) {\n          const mouseRayAtWorldPoint = Ray.create({\n            ...mouseRay,\n            origin: projectedWorldPoint,\n          });\n          const nextPosition = Plane.projectPoint(\n            positionPlane,\n            Ray.at(mouseRayAtWorldPoint, -teleportCollisionDistance),\n          );\n\n          return camera.update({\n            position: nextPosition,\n            lookAt: Vector3.add(\n              camera.lookAt,\n              Vector3.subtract(nextPosition, camera.position),\n            ),\n          });\n        } else {\n          const projectedNextStep = Plane.projectPoint(\n            positionPlane,\n            Ray.at(mouseRay, stepDistance),\n          );\n\n          return camera.update({\n            position: projectedNextStep,\n            lookAt: Vector3.add(\n              camera.lookAt,\n              Vector3.subtract(projectedNextStep, camera.position),\n            ),\n          });\n        }\n      });\n    }\n  }\n\n  private async teleportToHit(point: Point.Point): Promise<void> {\n    const worldPoint = await this.getWorldPointWithFallback(point);\n\n    if (worldPoint != null) {\n      return this.performInteraction(({ camera, boundingBox }) => {\n        const shortestBoundingBoxLength = this.shortestLength(boundingBox);\n        const heightScalar = this.model.getTeleportHeightPercentage() / 100;\n\n        const cameraPlane = Plane.fromNormalAndCoplanarPoint(\n          camera.up,\n          camera.position,\n        );\n        const projectedHitPosition = Plane.projectPoint(\n          cameraPlane,\n          worldPoint,\n        );\n\n        const rayToHitPosition = Ray.create({\n          origin: camera.position,\n          direction: Vector3.normalize(\n            Vector3.subtract(projectedHitPosition, camera.position),\n          ),\n        });\n        const distanceToHitPosition = Vector3.distance(\n          camera.position,\n          projectedHitPosition,\n        );\n        const distanceToLookAt = Vector3.distance(\n          camera.position,\n          camera.lookAt,\n        );\n\n        const newPosition = Ray.at(\n          rayToHitPosition,\n          distanceToHitPosition - shortestBoundingBoxLength * heightScalar,\n        );\n        const newPositionViewVectorRay = Ray.create({\n          origin: newPosition,\n          direction: Vector3.normalize(camera.viewVector),\n        });\n\n        return camera.update({\n          position: newPosition,\n          lookAt: Ray.at(newPositionViewVectorRay, distanceToLookAt),\n        });\n      });\n    }\n  }\n\n  private async teleportAndAlign(point: Point.Point): Promise<void> {\n    const hits = await this.api?.hitItems(point);\n    const hit = hits != null ? hits[0] : undefined;\n\n    if (hit?.hitNormal != null && hit?.hitPoint) {\n      await this.performInteraction(({ camera, boundingBox }) => {\n        const shortestBoundingBoxLength = this.shortestLength(boundingBox);\n        const heightScalar = this.model.getTeleportHeightPercentage() / 100;\n\n        const upRay = Ray.create({\n          origin: hit.hitPoint as Vector3.Vector3,\n          direction: hit.hitNormal as Vector3.Vector3,\n        });\n\n        return camera.alignTo(\n          Ray.at(upRay, shortestBoundingBoxLength * heightScalar),\n          hit.hitNormal as Vector3.Vector3,\n        );\n      });\n    }\n  }\n\n  private async performInteraction(fn: CameraTransform<Camera>): Promise<void> {\n    await this.beginInteraction();\n    await this.api?.transformCamera(fn, this.renderConfiguration());\n    await this.endInteraction();\n  }\n\n  private async getWorldPointWithFallback(\n    point: Point.Point,\n  ): Promise<Vector3.Vector3 | undefined> {\n    const worldPoint = await this.api?.getWorldPointFromViewport(point);\n\n    if (worldPoint == null) {\n      const hits = await this.api?.hitItems(point);\n      const hit = hits != null ? hits[0] : undefined;\n\n      return hit?.hitPoint != null\n        ? (hit.hitPoint as Vector3.Vector3)\n        : worldPoint;\n    }\n    return worldPoint;\n  }\n\n  private handleEnabledChange(enabled: boolean): void {\n    if (enabled) {\n      this.enable();\n    } else {\n      this.disable();\n    }\n  }\n\n  private handleTeleportModeChange(mode?: ViewerTeleportMode): void {\n    this.cursorDisposable?.dispose();\n\n    if (mode != null) {\n      this.cursorDisposable = this.api?.addCursor('crosshair');\n    }\n  }\n\n  private shortestLength(boundingBox: BoundingBox.BoundingBox): number {\n    return Math.min(...Vector3.toArray(BoundingBox.lengths(boundingBox)));\n  }\n\n  private renderConfiguration(): CameraRenderOptions {\n    return this.animationConfiguration != null\n      ? { animation: { milliseconds: this.animationConfiguration.durationMs } }\n      : {};\n  }\n}\n",":host {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  JSX,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { TeleportInteractionHandler } from '../../lib/teleportation/interactions';\nimport { WalkModeController } from '../../lib/walk-mode/controller';\nimport { ViewerTeleportMode, WalkModeModel } from '../../lib/walk-mode/model';\n\ninterface StateMap {\n  shouldClearDepthBuffers?: boolean;\n}\n\n/**\n * The `<vertex-viewer-teleport-tool>` allows for click-based \"teleportation\"\n * around a model, which is particularly useful for walking through a model.\n * This tool is automatically included as part of the <vertex-viewer-walk-mode-tool>.\n */\n@Component({\n  tag: 'vertex-viewer-teleport-tool',\n  styleUrl: 'viewer-teleport-tool.css',\n  shadow: true,\n})\nexport class ViewerTeleportTool {\n  /**\n   * The viewer that this component is bound to. This is automatically assigned\n   * if added to the light-dom of a parent viewer element.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * The type of teleportation to perform when clicking.\n   *\n   * `teleport` - the camera's `position` is moved to the location of the hit result\n   * constrained by the plane represented by the camera's current `position` and `up`\n   * vectors.\n   *\n   * `teleport-and-align` - the camera's `position`, `lookAt`, and `up` vectors are updated\n   * to align to the plane represented by the hit result's position and normal.\n   *\n   * `teleport-toward` - the camera's `position` is moved a fixed distance toward the location of the\n   * hit result constrained by the plane represented by the camera's current `position` and `up`\n   * vectors.\n   *\n   * `undefined` - no teleportation will occur when clicking.\n   *\n   * Defaults to `undefined`.\n   */\n  @Prop({ mutable: true })\n  public mode?: ViewerTeleportMode;\n\n  /**\n   * Indicates whether animations will be used when performing camera\n   * operations. Defaults to `false`.\n   */\n  @Prop()\n  public animationsDisabled = false;\n\n  /**\n   * The duration of animations, in milliseconds. Defaults to `500`.\n   */\n  @Prop()\n  public animationMs?: number = 500;\n\n  @Prop({ mutable: true })\n  public controller?: WalkModeController;\n\n  @Prop({ mutable: true })\n  public model: WalkModeModel = new WalkModeModel();\n\n  /**\n   * Event emitted when the `WalkModeController` associated with this tool changes.\n   */\n  @Event()\n  public controllerChanged!: EventEmitter<WalkModeController>;\n\n  private interactionHandlerDisposable?: Disposable;\n  private interactionHandler?: TeleportInteractionHandler;\n\n  private stateMap: StateMap = {};\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.setupController();\n    this.setupInteractionHandler();\n    this.setDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  protected connectedCallback(): void {\n    this.setupInteractionHandler();\n    this.setDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  protected disconnectedCallback(): void {\n    this.clearInteractionHandler();\n    this.resetDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('mode')\n  protected handleModeChange(): void {\n    this.controller?.setTeleportMode(this.mode);\n\n    if (this.mode != null) {\n      this.setDepthBuffers();\n    } else {\n      this.resetDepthBuffers();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected handleViewerChanged(): void {\n    this.clearInteractionHandler();\n    this.setupInteractionHandler();\n    this.setDepthBuffers();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('animationMs')\n  protected handleAnimationMsChanged(): void {\n    if (this.animationMs != null) {\n      this.interactionHandler?.setAnimations({ durationMs: this.animationMs });\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('animationsDisabled')\n  protected handleAnimationsDisabledChanged(): void {\n    if (this.animationsDisabled) {\n      this.interactionHandler?.setAnimations(undefined);\n    } else if (this.animationMs != null) {\n      this.interactionHandler?.setAnimations({ durationMs: this.animationMs });\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('controller')\n  protected handleControllerChanged(): void {\n    this.setupInteractionHandler();\n    this.setupController();\n    this.controllerChanged.emit(this.controller);\n  }\n\n  @Watch('model')\n  protected handleModelChanged(): void {\n    this.setupController();\n    this.clearInteractionHandler();\n    this.setupInteractionHandler();\n  }\n\n  protected render(): JSX.Element {\n    return <Host></Host>;\n  }\n\n  private setupController(): void {\n    if (this.controller == null) {\n      this.controller = new WalkModeController(this.model);\n      this.controller.setTeleportMode(this.mode);\n      this.controllerChanged.emit(this.controller);\n    } else {\n      this.controller.setTeleportMode(this.mode);\n      this.controller.updateModel(this.model);\n    }\n  }\n\n  private setDepthBuffers(): void {\n    if (\n      this.mode != null &&\n      this.viewer != null &&\n      this.viewer.depthBuffers == null\n    ) {\n      this.stateMap.shouldClearDepthBuffers = true;\n      this.viewer.depthBuffers = 'final';\n    }\n  }\n\n  private resetDepthBuffers(): void {\n    if (this.stateMap.shouldClearDepthBuffers && this.viewer != null) {\n      this.viewer.depthBuffers = undefined;\n      this.stateMap.shouldClearDepthBuffers = undefined;\n    }\n  }\n\n  private clearInteractionHandler(): void {\n    this.interactionHandlerDisposable?.dispose();\n    this.interactionHandlerDisposable = undefined;\n    this.interactionHandler?.dispose();\n    this.interactionHandler = undefined;\n  }\n\n  private async setupInteractionHandler(): Promise<void> {\n    if (this.interactionHandler == null) {\n      this.interactionHandler = new TeleportInteractionHandler(\n        this.model,\n        !this.animationsDisabled && this.animationMs != null\n          ? { durationMs: this.animationMs }\n          : undefined,\n      );\n\n      this.interactionHandlerDisposable =\n        await this.viewer?.registerInteractionHandler(this.interactionHandler);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}