npm - @vertexvis/viewer - Versions diffs - 1.1.1-testing.3 → 1.1.1-testing.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (456) hide show

package/dist/components/vertex-viewer-box-query-tool.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["VolumeIntersectionQueryInteractionHandler","constructor","controller","this","handleDragBegin","bind","handleDrag","handleDragEnd","enabled","initialize","element","api","addEventListener","addCrosshairCursor","dispose","_a","removeEventListener","window","_b","crosshairCursorDisposable","_c","waitCursorDisposable","undefined","disable","enable","event","isPrimaryMouseButtonClick","isInteracting","elementBounds","getBoundingClientRect","setStartPoint","getMouseClientPosition","setEndPoint","addWaitCursor","execute","buttons","addCursor","boxQueryCursor","viewerBoxQueryToolCss","ViewerBoxQueryTool","__stencil_proxyCustomElement","HTMLElement","registerHost","operationType","handleScreenBoundsChanged","handleExecuteStarted","handleExecuteComplete","componentWillLoad","model","VolumeIntersectionQueryModel","mode","screenBoundsChangedDisposable","onScreenBoundsChanged","handleViewerChanged","viewer","handleControllerChange","handleDefaultOperationChange","disconnectedCallback","reset","operationStartedDisposable","_d","operationCompleteDisposable","deregisterInteractionHandler","newViewer","VolumeIntersectionQueryController","registerInteractionHandler","updatedOperationType","setDefaultClearAndSelectOperation","setDefaultSelectOperation","setDefaultDeselectOperation","handleModeChange","updatedMode","setMode","onExecuteStarted","onExecuteComplete","controllerChanged","emit","render","h","Host","key","details","class","style","left","screenBounds","x","top","y","width","height","name","updateTypeAttribute","type","interactionHandler","interactionHandlerDisposable","hostEl","setAttribute","setOperationTransform","builder","select","setAdditionalTransforms","op","items","where","q","withSelected","deselect"],"sources":["src/lib/volume-intersection/interactions.ts","src/components/viewer-box-query-tool/viewer-box-query-tool.css?tag=vertex-viewer-box-query-tool&encapsulation=shadow","src/components/viewer-box-query-tool/viewer-box-query-tool.tsx"],"sourcesContent":["import { Disposable } from '@vertexvis/utils';\n\nimport { boxQueryCursor } from '../cursors';\nimport { getMouseClientPosition } from '../dom';\nimport { InteractionApi } from '../interactions';\nimport { InteractionHandler } from '../interactions/interactionHandler';\nimport { VolumeIntersectionQueryController } from './controller';\n\nexport class VolumeIntersectionQueryInteractionHandler implements InteractionHandler {\n private element?: HTMLElement;\n private api?: InteractionApi;\n private isInteracting?: boolean;\n private enabled?: boolean;\n private elementBounds?: DOMRect;\n private crosshairCursorDisposable?: Disposable;\n private waitCursorDisposable?: Disposable;\n\n public constructor(private controller: VolumeIntersectionQueryController) {\n this.handleDragBegin = this.handleDragBegin.bind(this);\n this.handleDrag = this.handleDrag.bind(this);\n this.handleDragEnd = this.handleDragEnd.bind(this);\n\n this.enabled = true;\n }\n\n public initialize(element: HTMLElement, api: InteractionApi): void {\n this.element = element;\n this.api = api;\n\n this.element.addEventListener('pointerdown', this.handleDragBegin);\n this.addCrosshairCursor();\n }\n\n public dispose(): void {\n this.element?.removeEventListener('pointerdown', this.handleDragBegin);\n window.removeEventListener('pointermove', this.handleDrag);\n window.removeEventListener('pointerup', this.handleDragEnd);\n this.crosshairCursorDisposable?.dispose();\n this.waitCursorDisposable?.dispose();\n\n this.element = undefined;\n this.api = undefined;\n this.enabled = true;\n }\n\n public disable(): void {\n this.enabled = false;\n }\n\n public enable(): void {\n this.enabled = true;\n }\n\n private handleDragBegin(event: PointerEvent): void {\n if (\n this.enabled &&\n this.isPrimaryMouseButtonClick(event) &&\n !this.isInteracting\n ) {\n this.elementBounds = this.element?.getBoundingClientRect();\n this.isInteracting = true;\n this.controller.setStartPoint(\n getMouseClientPosition(event, this.elementBounds),\n );\n\n window.addEventListener('pointermove', this.handleDrag);\n window.addEventListener('pointerup', this.handleDragEnd);\n }\n }\n\n private handleDrag(event: PointerEvent): void {\n if (this.enabled) {\n this.controller.setEndPoint(\n getMouseClientPosition(event, this.elementBounds),\n );\n }\n }\n\n private async handleDragEnd(): Promise<void> {\n this.isInteracting = false;\n\n window.removeEventListener('pointermove', this.handleDrag);\n window.removeEventListener('pointerup', this.handleDragEnd);\n\n this.crosshairCursorDisposable?.dispose();\n if (this.enabled) {\n this.addWaitCursor();\n try {\n await this.controller.execute();\n } finally {\n this.waitCursorDisposable?.dispose();\n this.addCrosshairCursor();\n }\n }\n }\n\n private isPrimaryMouseButtonClick(event: PointerEvent): boolean {\n return event.buttons === 1;\n }\n\n private addCrosshairCursor(): void {\n this.crosshairCursorDisposable?.dispose();\n this.crosshairCursorDisposable = this.api?.addCursor(boxQueryCursor);\n }\n\n private addWaitCursor(): void {\n this.waitCursorDisposable?.dispose();\n this.waitCursorDisposable = this.api?.addCursor('wait');\n }\n}\n",":host {\n /*\n @prop --viewer-box-query-outline-exclusive-color: A CSS color that\n * specifies the color of box for an exclusive query. This will\n * be used in combination with `--viewer-box-query-outline-fill-opacity`\n * for the background color of the box. Defaults to `#0099cc`.\n /\n --viewer-box-query-outline-exclusive-color: #0099cc;\n /\n @prop --viewer-box-query-outline-exclusive-border-style: A border\n * style that specifies the type of border to display around the box for an\n * exclusive query. Defaults to `solid`.\n /\n --viewer-box-query-outline-exclusive-border-style: solid;\n /\n @prop --viewer-box-query-outline-inclusive-color: A CSS color that\n * specifies the color of box for an inclusive query. This will\n * be used in combination with `--viewer-box-query-outline-fill-opacity`\n * for the background color of the box. Defaults to `#00cc00`.\n /\n --viewer-box-query-outline-inclusive-color: #00cc00;\n /\n @prop --viewer-box-query-outline-inclusive-border-style: A border\n * style that specifies the type of border to display around the box for an\n * inclusive query. Defaults to `dashed`.\n /\n --viewer-box-query-outline-inclusive-border-style: dashed;\n /\n @prop --viewer-box-query-outline-border-radius: A CSS length that\n * specifies the border radius of the drawn box. Defaults to `0.25rem`.\n /\n --viewer-box-query-outline-border-radius: 0.25rem;\n /\n @prop--viewer-box-query-outline-fill-opacity: A number between \n * 0 and 1 that specifies the opacity of the background of the drawn box.\n * Defaults to `0.25`.\n /\n --viewer-box-query-outline-fill-opacity: 0.25;\n}\n\n.bounds {\n position: absolute;\n}\n\n.outline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: var(--viewer-box-query-outline-border-radius);\n}\n\n:host([exclusive=\"true\"]) .outline {\n border: 3px var(--viewer-box-query-outline-exclusive-border-style) var(--viewer-box-query-outline-exclusive-color);\n}\n\n:host([inclusive=\"true\"]) .outline {\n border: 3px var(--viewer-box-query-outline-inclusive-border-style) var(--viewer-box-query-outline-inclusive-color);\n}\n\n.fill {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: var(--viewer-box-query-outline-fill-opacity);\n border-radius: var(--viewer-box-query-outline-border-radius);\n}\n\n:host([exclusive=\"true\"]) .fill {\n background-color: var(--viewer-box-query-outline-exclusive-color);\n}\n\n:host([inclusive=\"true\"]) .fill {\n background-color: var(--viewer-box-query-outline-inclusive-color);\n}","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { VolumeIntersectionQueryController } from '../../lib/volume-intersection/controller';\nimport { VolumeIntersectionQueryInteractionHandler } from '../../lib/volume-intersection/interactions';\nimport {\n QueryType,\n VolumeIntersectionQueryDetails,\n VolumeIntersectionQueryModel,\n} from '../../lib/volume-intersection/model';\nimport {\n VolumeIntersectionQueryMode,\n VolumeIntersectionQueryType,\n} from './types';\n\n/\n The `ViewerBoxQueryTool` allows for the drawing of a \"box\" on screen to represent\n * a query for items in a specific area of the viewer. This tool then allows for an\n * operation to be performed on the items contained (exclusive) by the box or both\n * contained by and intersecting with (inclusive) the box.\n /\n@Component({\n tag: 'vertex-viewer-box-query-tool',\n styleUrl: 'viewer-box-query-tool.css',\n shadow: true,\n})\nexport class ViewerBoxQueryTool {\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 controller that is responsible for performing operations using the\n * volume intersection query defined by the drawn box and updating the model.\n /\n @Prop({ mutable: true })\n public controller?: VolumeIntersectionQueryController;\n\n /\n The model that contains the points representing the corners of the box\n * displayed on screen, the type of the query to be performed, and methods\n * for setting these values.\n /\n @Prop({ mutable: true })\n public model?: VolumeIntersectionQueryModel;\n\n /\n The default operation to perform when a drag has completed and the intersection\n * query will be run. Defaults to `clearAndSelect`, and can be changed to `select` or `deselect`.\n \n `clearAndSelect` will clear all existing selection, and select the results of the query.\n * `select` will maintain existing selection, and select the results of the query.\n * `deselect` will maintain existing selection, and deselect the results of the query.\n \n The operation behavior for this intersection query tool can also be changed by\n * providing a custom implementation of the `VolumeIntersectionQueryController`, or\n * by using the `setOperationTransform` method of the default controller.\n /\n @Prop()\n public operationType: VolumeIntersectionQueryType = 'clearAndSelect';\n\n /\n An optional value to specify a singular mode of intersection query. This value\n * defaults to `undefined`, which will indicate that both `exclusive` and `inclusive`\n * queries should be made, with `inclusive` being represented by a left to right\n * drag behavior and `exclusive` being represented by a right to left drag.\n \n Setting this value to `inclusive` will cause dragging left to right and left to right\n * to result in an `inclusive` query, and the box will only be styled for `inclusive` queries.\n \n Setting this value to `exclusive` will cause dragging left to right and left to right\n * to result in an `exclusive` query, and the box will only be styled for `exclusive` queries.\n /\n @Prop()\n public mode?: VolumeIntersectionQueryMode;\n\n @State()\n private details?: VolumeIntersectionQueryDetails;\n\n /\n Event emitted when the `VolumeIntersectionQueryController` associated with this tool changes.\n /\n @Event()\n public controllerChanged!: EventEmitter<VolumeIntersectionQueryController>;\n\n @Element()\n private hostEl!: HTMLVertexViewerBoxQueryToolElement;\n\n private interactionHandler?: VolumeIntersectionQueryInteractionHandler;\n private interactionHandlerDisposable?: Disposable;\n\n private operationStartedDisposable?: Disposable;\n private operationCompleteDisposable?: Disposable;\n private screenBoundsChangedDisposable?: Disposable;\n\n public constructor() {\n this.handleScreenBoundsChanged = this.handleScreenBoundsChanged.bind(this);\n this.handleExecuteStarted = this.handleExecuteStarted.bind(this);\n this.handleExecuteComplete = this.handleExecuteComplete.bind(this);\n }\n\n public componentWillLoad(): void {\n this.model = this.model ?? new VolumeIntersectionQueryModel(this.mode);\n\n this.screenBoundsChangedDisposable = this.model.onScreenBoundsChanged(\n this.handleScreenBoundsChanged,\n );\n\n this.handleViewerChanged(this.viewer);\n this.handleControllerChange(this.controller);\n this.handleDefaultOperationChange(this.operationType);\n }\n\n public disconnectedCallback(): void {\n this.model?.reset();\n this.screenBoundsChangedDisposable?.dispose();\n this.operationStartedDisposable?.dispose();\n this.operationCompleteDisposable?.dispose();\n this.deregisterInteractionHandler();\n }\n\n /\n @ignore\n /\n @Watch('viewer')\n protected handleViewerChanged(newViewer?: HTMLVertexViewerElement): void {\n this.deregisterInteractionHandler();\n\n if (this.model != null && newViewer != null) {\n this.controller = new VolumeIntersectionQueryController(\n this.model,\n newViewer,\n );\n this.handleDefaultOperationChange(this.operationType);\n this.registerInteractionHandler(this.controller, newViewer);\n }\n }\n\n /\n @ignore\n /\n @Watch('operationType')\n protected handleDefaultOperationChange(\n updatedOperationType: VolumeIntersectionQueryType,\n ): void {\n switch (updatedOperationType) {\n case 'clearAndSelect':\n this.setDefaultClearAndSelectOperation();\n break;\n case 'select':\n this.setDefaultSelectOperation();\n break;\n case 'deselect':\n this.setDefaultDeselectOperation();\n break;\n }\n }\n\n /\n @ignore\n /\n @Watch('mode')\n protected handleModeChange(updatedMode?: VolumeIntersectionQueryMode): void {\n this.model?.setMode(updatedMode);\n }\n\n /\n @ignore\n /\n @Watch('controller')\n protected handleControllerChange(\n controller?: VolumeIntersectionQueryController,\n ): void {\n this.operationStartedDisposable?.dispose();\n this.operationCompleteDisposable?.dispose();\n\n this.operationStartedDisposable = controller?.onExecuteStarted(\n this.handleExecuteStarted,\n );\n this.operationStartedDisposable = controller?.onExecuteComplete(\n this.handleExecuteComplete,\n );\n\n this.controllerChanged.emit(this.controller);\n }\n\n /\n @ignore\n */\n protected render(): h.JSX.IntrinsicElements {\n return (\n <Host>\n <vertex-viewer-layer>\n {this.details != null && (\n <div\n class=\"bounds\"\n style={{\n left: `${this.details.screenBounds.x}px`,\n top: `${this.details.screenBounds.y}px`,\n width: `${this.details.screenBounds.width}px`,\n height: `${this.details.screenBounds.height}px`,\n }}\n >\n <slot name=\"bounds\">\n <div class=\"outline\"></div>\n <div class=\"fill\"></div>\n </slot>\n </div>\n )}\n </vertex-viewer-layer>\n </Host>\n );\n }\n\n private handleScreenBoundsChanged(\n details?: VolumeIntersectionQueryDetails,\n ): void {\n this.details = details;\n\n this.updateTypeAttribute(details?.type);\n }\n\n private handleExecuteStarted(): void {\n this.interactionHandler?.disable();\n }\n\n private handleExecuteComplete(): void {\n this.interactionHandler?.enable();\n }\n\n private async registerInteractionHandler(\n controller: VolumeIntersectionQueryController,\n viewer: HTMLVertexViewerElement,\n ): Promise<void> {\n this.interactionHandler = new VolumeIntersectionQueryInteractionHandler(\n controller,\n );\n this.interactionHandlerDisposable = await viewer.registerInteractionHandler(\n this.interactionHandler,\n );\n }\n\n private deregisterInteractionHandler(): void {\n this.interactionHandlerDisposable?.dispose();\n this.interactionHandler?.dispose();\n this.interactionHandler = undefined;\n }\n\n private updateTypeAttribute(type?: QueryType): void {\n this.hostEl.setAttribute('inclusive', `${type === 'inclusive'}`);\n this.hostEl.setAttribute('exclusive', `${type === 'exclusive'}`);\n }\n\n private setDefaultClearAndSelectOperation(): void {\n this.controller?.setOperationTransform((builder) => builder.select());\n this.controller?.setAdditionalTransforms([\n (op) => op.items.where((q) => q.withSelected()).deselect(),\n ]);\n }\n\n private setDefaultSelectOperation(): void {\n this.controller?.setOperationTransform((builder) => builder.select());\n this.controller?.setAdditionalTransforms([]);\n }\n\n private setDefaultDeselectOperation(): void {\n this.controller?.setOperationTransform((builder) => builder.deselect());\n this.controller?.setAdditionalTransforms([]);\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["VolumeIntersectionQueryInteractionHandler","constructor","controller","this","handleDragBegin","bind","handleDrag","handleDragEnd","enabled","initialize","element","api","addEventListener","addCrosshairCursor","dispose","_a","removeEventListener","window","_b","crosshairCursorDisposable","_c","waitCursorDisposable","undefined","disable","enable","event","isPrimaryMouseButtonClick","isInteracting","elementBounds","getBoundingClientRect","setStartPoint","getMouseClientPosition","setEndPoint","addWaitCursor","execute","buttons","addCursor","boxQueryCursor","viewerBoxQueryToolCss","ViewerBoxQueryTool","__stencil_proxyCustomElement","HTMLElement","registerHost","operationType","handleScreenBoundsChanged","handleExecuteStarted","handleExecuteComplete","componentWillLoad","model","VolumeIntersectionQueryModel","mode","screenBoundsChangedDisposable","onScreenBoundsChanged","handleViewerChanged","viewer","handleControllerChange","handleDefaultOperationChange","disconnectedCallback","reset","operationStartedDisposable","_d","operationCompleteDisposable","deregisterInteractionHandler","newViewer","VolumeIntersectionQueryController","registerInteractionHandler","updatedOperationType","setDefaultClearAndSelectOperation","setDefaultSelectOperation","setDefaultDeselectOperation","handleModeChange","updatedMode","setMode","onExecuteStarted","onExecuteComplete","controllerChanged","emit","render","h","Host","key","details","class","style","left","screenBounds","x","top","y","width","height","name","updateTypeAttribute","type","interactionHandler","interactionHandlerDisposable","hostEl","setAttribute","setOperationTransform","builder","select","setAdditionalTransforms","op","items","where","q","withSelected","deselect"],"sources":["src/lib/volume-intersection/interactions.ts","src/components/viewer-box-query-tool/viewer-box-query-tool.css?tag=vertex-viewer-box-query-tool&encapsulation=shadow","src/components/viewer-box-query-tool/viewer-box-query-tool.tsx"],"sourcesContent":["import { Disposable } from '@vertexvis/utils';\n\nimport { boxQueryCursor } from '../cursors';\nimport { getMouseClientPosition } from '../dom';\nimport { InteractionApi } from '../interactions';\nimport { InteractionHandler } from '../interactions/interactionHandler';\nimport { VolumeIntersectionQueryController } from './controller';\n\nexport class VolumeIntersectionQueryInteractionHandler implements InteractionHandler {\n private element?: HTMLElement;\n private api?: InteractionApi;\n private isInteracting?: boolean;\n private enabled?: boolean;\n private elementBounds?: DOMRect;\n private crosshairCursorDisposable?: Disposable;\n private waitCursorDisposable?: Disposable;\n\n public constructor(private controller: VolumeIntersectionQueryController) {\n this.handleDragBegin = this.handleDragBegin.bind(this);\n this.handleDrag = this.handleDrag.bind(this);\n this.handleDragEnd = this.handleDragEnd.bind(this);\n\n this.enabled = true;\n }\n\n public initialize(element: HTMLElement, api: InteractionApi): void {\n this.element = element;\n this.api = api;\n\n this.element.addEventListener('pointerdown', this.handleDragBegin);\n this.addCrosshairCursor();\n }\n\n public dispose(): void {\n this.element?.removeEventListener('pointerdown', this.handleDragBegin);\n window.removeEventListener('pointermove', this.handleDrag);\n window.removeEventListener('pointerup', this.handleDragEnd);\n this.crosshairCursorDisposable?.dispose();\n this.waitCursorDisposable?.dispose();\n\n this.element = undefined;\n this.api = undefined;\n this.enabled = true;\n }\n\n public disable(): void {\n this.enabled = false;\n }\n\n public enable(): void {\n this.enabled = true;\n }\n\n private handleDragBegin(event: PointerEvent): void {\n if (\n this.enabled &&\n this.isPrimaryMouseButtonClick(event) &&\n !this.isInteracting\n ) {\n this.elementBounds = this.element?.getBoundingClientRect();\n this.isInteracting = true;\n this.controller.setStartPoint(\n getMouseClientPosition(event, this.elementBounds),\n );\n\n window.addEventListener('pointermove', this.handleDrag);\n window.addEventListener('pointerup', this.handleDragEnd);\n }\n }\n\n private handleDrag(event: PointerEvent): void {\n if (this.enabled) {\n this.controller.setEndPoint(\n getMouseClientPosition(event, this.elementBounds),\n );\n }\n }\n\n private async handleDragEnd(): Promise<void> {\n this.isInteracting = false;\n\n window.removeEventListener('pointermove', this.handleDrag);\n window.removeEventListener('pointerup', this.handleDragEnd);\n\n this.crosshairCursorDisposable?.dispose();\n if (this.enabled) {\n this.addWaitCursor();\n try {\n await this.controller.execute();\n } finally {\n this.waitCursorDisposable?.dispose();\n this.addCrosshairCursor();\n }\n }\n }\n\n private isPrimaryMouseButtonClick(event: PointerEvent): boolean {\n return event.buttons === 1;\n }\n\n private addCrosshairCursor(): void {\n this.crosshairCursorDisposable?.dispose();\n this.crosshairCursorDisposable = this.api?.addCursor(boxQueryCursor);\n }\n\n private addWaitCursor(): void {\n this.waitCursorDisposable?.dispose();\n this.waitCursorDisposable = this.api?.addCursor('wait');\n }\n}\n",":host {\n /*\n @prop --viewer-box-query-outline-exclusive-color: A CSS color that\n * specifies the color of box for an exclusive query. This will\n * be used in combination with `--viewer-box-query-outline-fill-opacity`\n * for the background color of the box. Defaults to `#0099cc`.\n /\n --viewer-box-query-outline-exclusive-color: #0099cc;\n /\n @prop --viewer-box-query-outline-exclusive-border-style: A border\n * style that specifies the type of border to display around the box for an\n * exclusive query. Defaults to `solid`.\n /\n --viewer-box-query-outline-exclusive-border-style: solid;\n /\n @prop --viewer-box-query-outline-inclusive-color: A CSS color that\n * specifies the color of box for an inclusive query. This will\n * be used in combination with `--viewer-box-query-outline-fill-opacity`\n * for the background color of the box. Defaults to `#00cc00`.\n /\n --viewer-box-query-outline-inclusive-color: #00cc00;\n /\n @prop --viewer-box-query-outline-inclusive-border-style: A border\n * style that specifies the type of border to display around the box for an\n * inclusive query. Defaults to `dashed`.\n /\n --viewer-box-query-outline-inclusive-border-style: dashed;\n /\n @prop --viewer-box-query-outline-border-radius: A CSS length that\n * specifies the border radius of the drawn box. Defaults to `0.25rem`.\n /\n --viewer-box-query-outline-border-radius: 0.25rem;\n /\n @prop--viewer-box-query-outline-fill-opacity: A number between \n * 0 and 1 that specifies the opacity of the background of the drawn box.\n * Defaults to `0.25`.\n /\n --viewer-box-query-outline-fill-opacity: 0.25;\n}\n\n.bounds {\n position: absolute;\n}\n\n.outline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: var(--viewer-box-query-outline-border-radius);\n}\n\n:host([exclusive='true']) .outline {\n border: 3px var(--viewer-box-query-outline-exclusive-border-style)\n var(--viewer-box-query-outline-exclusive-color);\n}\n\n:host([inclusive='true']) .outline {\n border: 3px var(--viewer-box-query-outline-inclusive-border-style)\n var(--viewer-box-query-outline-inclusive-color);\n}\n\n.fill {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: var(--viewer-box-query-outline-fill-opacity);\n border-radius: var(--viewer-box-query-outline-border-radius);\n}\n\n:host([exclusive='true']) .fill {\n background-color: var(--viewer-box-query-outline-exclusive-color);\n}\n\n:host([inclusive='true']) .fill {\n background-color: var(--viewer-box-query-outline-inclusive-color);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { VolumeIntersectionQueryController } from '../../lib/volume-intersection/controller';\nimport { VolumeIntersectionQueryInteractionHandler } from '../../lib/volume-intersection/interactions';\nimport {\n QueryType,\n VolumeIntersectionQueryDetails,\n VolumeIntersectionQueryModel,\n} from '../../lib/volume-intersection/model';\nimport {\n VolumeIntersectionQueryMode,\n VolumeIntersectionQueryType,\n} from './types';\n\n/\n The `ViewerBoxQueryTool` allows for the drawing of a \"box\" on screen to represent\n * a query for items in a specific area of the viewer. This tool then allows for an\n * operation to be performed on the items contained (exclusive) by the box or both\n * contained by and intersecting with (inclusive) the box.\n /\n@Component({\n tag: 'vertex-viewer-box-query-tool',\n styleUrl: 'viewer-box-query-tool.css',\n shadow: true,\n})\nexport class ViewerBoxQueryTool {\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 controller that is responsible for performing operations using the\n * volume intersection query defined by the drawn box and updating the model.\n /\n @Prop({ mutable: true })\n public controller?: VolumeIntersectionQueryController;\n\n /\n The model that contains the points representing the corners of the box\n * displayed on screen, the type of the query to be performed, and methods\n * for setting these values.\n /\n @Prop({ mutable: true })\n public model?: VolumeIntersectionQueryModel;\n\n /\n The default operation to perform when a drag has completed and the intersection\n * query will be run. Defaults to `clearAndSelect`, and can be changed to `select` or `deselect`.\n \n `clearAndSelect` will clear all existing selection, and select the results of the query.\n * `select` will maintain existing selection, and select the results of the query.\n * `deselect` will maintain existing selection, and deselect the results of the query.\n \n The operation behavior for this intersection query tool can also be changed by\n * providing a custom implementation of the `VolumeIntersectionQueryController`, or\n * by using the `setOperationTransform` method of the default controller.\n /\n @Prop()\n public operationType: VolumeIntersectionQueryType = 'clearAndSelect';\n\n /\n An optional value to specify a singular mode of intersection query. This value\n * defaults to `undefined`, which will indicate that both `exclusive` and `inclusive`\n * queries should be made, with `inclusive` being represented by a left to right\n * drag behavior and `exclusive` being represented by a right to left drag.\n \n Setting this value to `inclusive` will cause dragging left to right and left to right\n * to result in an `inclusive` query, and the box will only be styled for `inclusive` queries.\n \n Setting this value to `exclusive` will cause dragging left to right and left to right\n * to result in an `exclusive` query, and the box will only be styled for `exclusive` queries.\n /\n @Prop()\n public mode?: VolumeIntersectionQueryMode;\n\n @State()\n private details?: VolumeIntersectionQueryDetails;\n\n /\n Event emitted when the `VolumeIntersectionQueryController` associated with this tool changes.\n /\n @Event()\n public controllerChanged!: EventEmitter<VolumeIntersectionQueryController>;\n\n @Element()\n private hostEl!: HTMLVertexViewerBoxQueryToolElement;\n\n private interactionHandler?: VolumeIntersectionQueryInteractionHandler;\n private interactionHandlerDisposable?: Disposable;\n\n private operationStartedDisposable?: Disposable;\n private operationCompleteDisposable?: Disposable;\n private screenBoundsChangedDisposable?: Disposable;\n\n public constructor() {\n this.handleScreenBoundsChanged = this.handleScreenBoundsChanged.bind(this);\n this.handleExecuteStarted = this.handleExecuteStarted.bind(this);\n this.handleExecuteComplete = this.handleExecuteComplete.bind(this);\n }\n\n public componentWillLoad(): void {\n this.model = this.model ?? new VolumeIntersectionQueryModel(this.mode);\n\n this.screenBoundsChangedDisposable = this.model.onScreenBoundsChanged(\n this.handleScreenBoundsChanged,\n );\n\n this.handleViewerChanged(this.viewer);\n this.handleControllerChange(this.controller);\n this.handleDefaultOperationChange(this.operationType);\n }\n\n public disconnectedCallback(): void {\n this.model?.reset();\n this.screenBoundsChangedDisposable?.dispose();\n this.operationStartedDisposable?.dispose();\n this.operationCompleteDisposable?.dispose();\n this.deregisterInteractionHandler();\n }\n\n /\n @ignore\n /\n @Watch('viewer')\n protected handleViewerChanged(newViewer?: HTMLVertexViewerElement): void {\n this.deregisterInteractionHandler();\n\n if (this.model != null && newViewer != null) {\n this.controller = new VolumeIntersectionQueryController(\n this.model,\n newViewer,\n );\n this.handleDefaultOperationChange(this.operationType);\n this.registerInteractionHandler(this.controller, newViewer);\n }\n }\n\n /\n @ignore\n /\n @Watch('operationType')\n protected handleDefaultOperationChange(\n updatedOperationType: VolumeIntersectionQueryType,\n ): void {\n switch (updatedOperationType) {\n case 'clearAndSelect':\n this.setDefaultClearAndSelectOperation();\n break;\n case 'select':\n this.setDefaultSelectOperation();\n break;\n case 'deselect':\n this.setDefaultDeselectOperation();\n break;\n }\n }\n\n /\n @ignore\n /\n @Watch('mode')\n protected handleModeChange(updatedMode?: VolumeIntersectionQueryMode): void {\n this.model?.setMode(updatedMode);\n }\n\n /\n @ignore\n /\n @Watch('controller')\n protected handleControllerChange(\n controller?: VolumeIntersectionQueryController,\n ): void {\n this.operationStartedDisposable?.dispose();\n this.operationCompleteDisposable?.dispose();\n\n this.operationStartedDisposable = controller?.onExecuteStarted(\n this.handleExecuteStarted,\n );\n this.operationStartedDisposable = controller?.onExecuteComplete(\n this.handleExecuteComplete,\n );\n\n this.controllerChanged.emit(this.controller);\n }\n\n /\n @ignore\n */\n protected render(): h.JSX.IntrinsicElements {\n return (\n <Host>\n <vertex-viewer-layer>\n {this.details != null && (\n <div\n class=\"bounds\"\n style={{\n left: `${this.details.screenBounds.x}px`,\n top: `${this.details.screenBounds.y}px`,\n width: `${this.details.screenBounds.width}px`,\n height: `${this.details.screenBounds.height}px`,\n }}\n >\n <slot name=\"bounds\">\n <div class=\"outline\"></div>\n <div class=\"fill\"></div>\n </slot>\n </div>\n )}\n </vertex-viewer-layer>\n </Host>\n );\n }\n\n private handleScreenBoundsChanged(\n details?: VolumeIntersectionQueryDetails,\n ): void {\n this.details = details;\n\n this.updateTypeAttribute(details?.type);\n }\n\n private handleExecuteStarted(): void {\n this.interactionHandler?.disable();\n }\n\n private handleExecuteComplete(): void {\n this.interactionHandler?.enable();\n }\n\n private async registerInteractionHandler(\n controller: VolumeIntersectionQueryController,\n viewer: HTMLVertexViewerElement,\n ): Promise<void> {\n this.interactionHandler = new VolumeIntersectionQueryInteractionHandler(\n controller,\n );\n this.interactionHandlerDisposable = await viewer.registerInteractionHandler(\n this.interactionHandler,\n );\n }\n\n private deregisterInteractionHandler(): void {\n this.interactionHandlerDisposable?.dispose();\n this.interactionHandler?.dispose();\n this.interactionHandler = undefined;\n }\n\n private updateTypeAttribute(type?: QueryType): void {\n this.hostEl.setAttribute('inclusive', `${type === 'inclusive'}`);\n this.hostEl.setAttribute('exclusive', `${type === 'exclusive'}`);\n }\n\n private setDefaultClearAndSelectOperation(): void {\n this.controller?.setOperationTransform((builder) => builder.select());\n this.controller?.setAdditionalTransforms([\n (op) => op.items.where((q) => q.withSelected()).deselect(),\n ]);\n }\n\n private setDefaultSelectOperation(): void {\n this.controller?.setOperationTransform((builder) => builder.select());\n this.controller?.setAdditionalTransforms([]);\n }\n\n private setDefaultDeselectOperation(): void {\n this.controller?.setOperationTransform((builder) => builder.deselect());\n this.controller?.setAdditionalTransforms([]);\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/vertex-viewer-button.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-C--Voxln.js";const t=o;const n=s;export{t as VertexViewerButton,n as defineCustomElement};
+import{V as o,d as s}from"./p-DUo-H-nW.js";const t=o;const n=s;export{t as VertexViewerButton,n as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-button.js.map

package/dist/components/vertex-viewer-default-toolbar.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{t as e,p as r,H as t,h as o}from"./p-Bb32XUUS.js";import{d as a}from"./p-C--Voxln.js";import{d as i}from"./p-Bkm6H5uq.js";import{d as s}from"./p-BAsg2_dY.js";import{d as n}from"./p-Dva0y9cX.js";import{d as l}from"./p-dGLnP5K-.js";const d=()=>`:host{--viewer-toolbar-group-gap:0.5rem;--viewer-toolbar-group-background:rgba(245, 245, 245, 0.95);--viewer-toolbar-group-border-radius:0.25rem;--viewer-toolbar-group-box-shadow:-1px 0 2px rgba(0, 0, 0, 0.12),     1px 0 2px rgba(0, 0, 0, 0.13);--viewer-toolbar-group-padding:0.25rem;--viewer-toolbar-group-item-gap:0.25rem}.group{background:var(--viewer-toolbar-group-background);border-radius:var(--viewer-toolbar-group-border-radius);box-shadow:var(--viewer-toolbar-group-box-shadow);padding:var(--viewer-toolbar-group-padding)}.group[data-direction='horizontal']:not(:first-child){margin-left:var(--viewer-toolbar-group-gap)}.group[data-direction='horizontal'] .group-item:not(:first-child){margin-left:var(--viewer-toolbar-group-item-gap)}.group[data-direction='vertical']:not(:first-child){margin-top:var(--viewer-toolbar-group-gap)}.group[data-direction='vertical'] .group-item:not(:first-child){margin-top:var(--viewer-toolbar-group-item-gap)}.btn{color:var(--neutral-800);padding:0.125rem;border-radius:0.125rem}.btn:hover{background:var(--neutral-300)}`;const v=r(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.placement="bottom-center";this.direction="horizontal";this.animationsDisabled=false;this.animationMs=1e3}render(){return o("vertex-viewer-toolbar",{key:"349bf96991062154e2e7666bbbecd3d66310e69f",placement:this.placement,direction:this.direction},o("vertex-viewer-toolbar-group",{key:"6982b3cb19276e09484c52d8baaa825a7339f371",class:"group",direction:this.direction,"data-direction":this.direction},o("vertex-viewer-button",{key:"77e0f4332b4997c433d2f28b5b9917cc9bea9a12",class:"group-item btn","data-testid":"fit-all-btn",onClick:()=>this.viewAll()},o("vertex-viewer-icon",{key:"75f085b6c0443ba658e795f74a579cf70e1af2da",class:"icon",name:"fit-all",size:"md"}))))}async viewAll(){var e;const r=await((e=this.viewer)===null||e===void 0?void 0:e.scene());const t=this.animationsDisabled?undefined:{milliseconds:this.animationMs};r===null||r===void 0?void 0:r.camera().viewAll().render({animation:t})}static get style(){return d()}},[1,"vertex-viewer-default-toolbar",{viewer:[16],placement:[1],direction:[1],animationsDisabled:[4,"animations-disabled"],animationMs:[2,"animation-ms"]}]);function c(){if(typeof customElements==="undefined"){return}const r=["vertex-viewer-default-toolbar","vertex-viewer-button","vertex-viewer-icon","vertex-viewer-layer","vertex-viewer-toolbar","vertex-viewer-toolbar-group"];r.forEach((r=>{switch(r){case"vertex-viewer-default-toolbar":if(!customElements.get(e(r))){customElements.define(e(r),v)}break;case"vertex-viewer-button":if(!customElements.get(e(r))){a()}break;case"vertex-viewer-icon":if(!customElements.get(e(r))){i()}break;case"vertex-viewer-layer":if(!customElements.get(e(r))){s()}break;case"vertex-viewer-toolbar":if(!customElements.get(e(r))){n()}break;case"vertex-viewer-toolbar-group":if(!customElements.get(e(r))){l()}break}}))}c();const b=v;const u=c;export{b as VertexViewerDefaultToolbar,u as defineCustomElement};
+import{t as e,p as r,H as t,h as o}from"./p-Bb32XUUS.js";import{d as a}from"./p-DUo-H-nW.js";import{d as i}from"./p-Bkm6H5uq.js";import{d as s}from"./p-BAsg2_dY.js";import{d as n}from"./p-Dva0y9cX.js";import{d as l}from"./p-dGLnP5K-.js";const d=()=>`:host{--viewer-toolbar-group-gap:0.5rem;--viewer-toolbar-group-background:rgba(245, 245, 245, 0.95);--viewer-toolbar-group-border-radius:0.25rem;--viewer-toolbar-group-box-shadow:-1px 0 2px rgba(0, 0, 0, 0.12), 1px 0 2px rgba(0, 0, 0, 0.13);--viewer-toolbar-group-padding:0.25rem;--viewer-toolbar-group-item-gap:0.25rem}.group{background:var(--viewer-toolbar-group-background);border-radius:var(--viewer-toolbar-group-border-radius);box-shadow:var(--viewer-toolbar-group-box-shadow);padding:var(--viewer-toolbar-group-padding)}.group[data-direction='horizontal']:not(:first-child){margin-left:var(--viewer-toolbar-group-gap)}.group[data-direction='horizontal'] .group-item:not(:first-child){margin-left:var(--viewer-toolbar-group-item-gap)}.group[data-direction='vertical']:not(:first-child){margin-top:var(--viewer-toolbar-group-gap)}.group[data-direction='vertical'] .group-item:not(:first-child){margin-top:var(--viewer-toolbar-group-item-gap)}.btn{color:var(--neutral-800);padding:0.125rem;border-radius:0.125rem}.btn:hover{background:var(--neutral-300)}`;const v=r(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.placement="bottom-center";this.direction="horizontal";this.animationsDisabled=false;this.animationMs=1e3}render(){return o("vertex-viewer-toolbar",{key:"349bf96991062154e2e7666bbbecd3d66310e69f",placement:this.placement,direction:this.direction},o("vertex-viewer-toolbar-group",{key:"6982b3cb19276e09484c52d8baaa825a7339f371",class:"group",direction:this.direction,"data-direction":this.direction},o("vertex-viewer-button",{key:"f7831cc2d418cd77b05493fd0e657b21f300648c","aria-label":"Fit all",class:"group-item btn","data-testid":"fit-all-btn",onClick:()=>this.viewAll()},o("vertex-viewer-icon",{key:"adaa5a960e61b8b931634c350d3b1ef233243886",class:"icon",name:"fit-all",size:"md"}))))}async viewAll(){var e;const r=await((e=this.viewer)===null||e===void 0?void 0:e.scene());const t=this.animationsDisabled?undefined:{milliseconds:this.animationMs};r===null||r===void 0?void 0:r.camera().viewAll().render({animation:t})}static get style(){return d()}},[1,"vertex-viewer-default-toolbar",{viewer:[16],placement:[1],direction:[1],animationsDisabled:[4,"animations-disabled"],animationMs:[2,"animation-ms"]}]);function c(){if(typeof customElements==="undefined"){return}const r=["vertex-viewer-default-toolbar","vertex-viewer-button","vertex-viewer-icon","vertex-viewer-layer","vertex-viewer-toolbar","vertex-viewer-toolbar-group"];r.forEach((r=>{switch(r){case"vertex-viewer-default-toolbar":if(!customElements.get(e(r))){customElements.define(e(r),v)}break;case"vertex-viewer-button":if(!customElements.get(e(r))){a()}break;case"vertex-viewer-icon":if(!customElements.get(e(r))){i()}break;case"vertex-viewer-layer":if(!customElements.get(e(r))){s()}break;case"vertex-viewer-toolbar":if(!customElements.get(e(r))){n()}break;case"vertex-viewer-toolbar-group":if(!customElements.get(e(r))){l()}break}}))}c();const b=v;const u=c;export{b as VertexViewerDefaultToolbar,u as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-default-toolbar.js.map

package/dist/components/vertex-viewer-default-toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["viewerDefaultToolbarCss","ViewerDefaultToolbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","placement","direction","animationsDisabled","animationMs","render","h","key","class","onClick","viewAll","name","size","scene","_a","viewer","animation","undefined","milliseconds","camera"],"sources":["src/components/viewer-default-toolbar/viewer-default-toolbar.css?tag=vertex-viewer-default-toolbar&encapsulation=shadow","src/components/viewer-default-toolbar/viewer-default-toolbar.tsx"],"sourcesContent":[":host {\n /*\n @prop --viewer-toolbar-group-gap: The spacing between each toolbar group.\n * Defaults to `0.5rem`.\n /\n --viewer-toolbar-group-gap: 0.5rem;\n\n /\n @prop --viewer-toolbar-group-background: The background to apply to each\n * group in the toolbar. Defaults to `rgba(245, 245, 245, 0.95)`\n /\n --viewer-toolbar-group-background: rgba(245, 245, 245, 0.95);\n\n /\n @prop --viewer-toolbar-group-border-radius: The corner radius to apply to\n * each group in the toolbar. Defaults to `0.25rem`.\n /\n --viewer-toolbar-group-border-radius: 0.25rem;\n\n /\n @prop --viewer-toolbar-group-box-shadow: The shadow to apply to each group\n * in the toolbar. Defaults to `-1px 0 2px rgba(0, 0, 0, 0.12), 1px 0 2px rgba(0, 0, 0, 0.13)`.\n /\n --viewer-toolbar-group-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.12)~~,\n~~ 1px 0 2px rgba(0, 0, 0, 0.13);\n\n /\n @prop --viewer-toolbar-group-padding: The padding to apply to each group in\n * the toolbar. Defaults to `0.25rem`.\n /\n --viewer-toolbar-group-padding: 0.25rem;\n\n /\n @prop --viewer-toolbar-group-item-gap: The spacing between each item within\n * a toolbar group. Defaults to `0.25rem`.\n /\n --viewer-toolbar-group-item-gap: 0.25rem;\n}\n\n.group {\n background: var(--viewer-toolbar-group-background);\n border-radius: var(--viewer-toolbar-group-border-radius);\n box-shadow: var(--viewer-toolbar-group-box-shadow);\n padding: var(--viewer-toolbar-group-padding);\n}\n\n.group[data-direction='horizontal']:not(:first-child) {\n margin-left: var(--viewer-toolbar-group-gap);\n}\n\n.group[data-direction='horizontal'] .group-item:not(:first-child) {\n margin-left: var(--viewer-toolbar-group-item-gap);\n}\n\n.group[data-direction='vertical']:not(:first-child) {\n margin-top: var(--viewer-toolbar-group-gap);\n}\n\n.group[data-direction='vertical'] .group-item:not(:first-child) {\n margin-top: var(--viewer-toolbar-group-item-gap);\n}\n\n.btn {\n color: var(--neutral-800);\n padding: 0.125rem;\n border-radius: 0.125rem;\n}\n\n.btn:hover {\n background: var(--neutral-300);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { ViewerToolbarPlacement } from '../viewer-toolbar/types';\nimport { ViewerToolbarGroupDirection } from '../viewer-toolbar-group/types';\n\n@Component({\n tag: 'vertex-viewer-default-toolbar',\n styleUrl: 'viewer-default-toolbar.css',\n shadow: true,\n})\nexport class ViewerDefaultToolbar {\n /\n An instance of the viewer that operations will be performed on. If\n * contained within a `<vertex-viewer>` element, this property will\n * automatically be wired.\n /\n @Prop()\n public viewer?: HTMLVertexViewerElement;\n\n /\n Specifies where the toolbar is positioned.\n /\n @Prop()\n public placement: ViewerToolbarPlacement = 'bottom-center';\n\n /\n Specifies the direction that UI elements are placed.\n /\n @Prop()\n public direction: ViewerToolbarGroupDirection = 'horizontal';\n\n /\n Indicates whether animations will be used when performing camera\n * operations. Defaults to `true`.\n /\n @Prop()\n public animationsDisabled = false;\n\n /\n The duration of animations, in milliseconds. Defaults to `1000`.\n */\n @Prop()\n public animationMs = 1000;\n\n public render(): h.JSX.IntrinsicElements {\n return (\n <vertex-viewer-toolbar\n placement={this.placement}\n direction={this.direction}\n >\n <vertex-viewer-toolbar-group\n class=\"group\"\n direction={this.direction}\n data-direction={this.direction}\n >\n <vertex-viewer-button\n class=\"group-item btn\"\n data-testid=\"fit-all-btn\"\n onClick={() => this.viewAll()}\n >\n <vertex-viewer-icon class=\"icon\" name=\"fit-all\" size=\"md\" />\n </vertex-viewer-button>\n </vertex-viewer-toolbar-group>\n </vertex-viewer-toolbar>\n );\n }\n\n private async viewAll(): Promise<void> {\n const scene = await this.viewer?.scene();\n const animation = this.animationsDisabled\n ? undefined\n : { milliseconds: this.animationMs };\n scene?.camera().viewAll().render({ animation });\n }\n}\n"],"mappings":";;;6OAAA,MAAMA,EAA0B,IAAM,~~yiC~~,MCUzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,kEAkBSC,KAAAC,UAAoC,gBAMpCD,KAAAE,UAAyC,aAOzCF,KAAAG,mBAAqB,MAMrBH,KAAAI,YAAc,~~GAgCtB~~,~~CA9BQ~~,MAAAC,GACL,OACEC,EAAA,yBAAAC,IAAA,2CACEN,UAAWD,KAAKC,UAChBC,UAAWF,KAAKE,WAEhBI,EAAA,+BAAAC,IAAA,2CACEC,MAAM,QACNN,UAAWF,KAAKE,UAAS,iBACTF,KAAKE,WAErBI,EAAA,wBAAAC,IAAA,~~2CACEC~~,MAAM,iBAAgB,cACV,cACZC,QAAS,IAAMT,KAAKU,WAEpBJ,EAAA,sBAAAC,IAAA,2CAAoBC,MAAM,OAAOG,KAAK,UAAUC,KAAK,S,CAOvD,aAAMF,G,MACZ,MAAMG,SAAcC,EAAAd,KAAKe,UAAM,MAAAD,SAAA,SAAAA,EAAED,SACjC,MAAMG,EAAYhB,KAAKG,mBACnBc,UACA,CAAEC,aAAclB,KAAKI,aACzBS,IAAK,MAALA,SAAK,SAALA,EAAOM,SAAST,UAAUL,OAAO,CAAEW,a","ignoreList":[]}
1	+ {"version":3,"names":["viewerDefaultToolbarCss","ViewerDefaultToolbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","placement","direction","animationsDisabled","animationMs","render","h","key","class","onClick","viewAll","name","size","scene","_a","viewer","animation","undefined","milliseconds","camera"],"sources":["src/components/viewer-default-toolbar/viewer-default-toolbar.css?tag=vertex-viewer-default-toolbar&encapsulation=shadow","src/components/viewer-default-toolbar/viewer-default-toolbar.tsx"],"sourcesContent":[":host {\n /*\n @prop --viewer-toolbar-group-gap: The spacing between each toolbar group.\n * Defaults to `0.5rem`.\n /\n --viewer-toolbar-group-gap: 0.5rem;\n\n /\n @prop --viewer-toolbar-group-background: The background to apply to each\n * group in the toolbar. Defaults to `rgba(245, 245, 245, 0.95)`\n /\n --viewer-toolbar-group-background: rgba(245, 245, 245, 0.95);\n\n /\n @prop --viewer-toolbar-group-border-radius: The corner radius to apply to\n * each group in the toolbar. Defaults to `0.25rem`.\n /\n --viewer-toolbar-group-border-radius: 0.25rem;\n\n /\n @prop --viewer-toolbar-group-box-shadow: The shadow to apply to each group\n * in the toolbar. Defaults to `-1px 0 2px rgba(0, 0, 0, 0.12), 1px 0 2px rgba(0, 0, 0, 0.13)`.\n /\n --viewer-toolbar-group-box-shadow:\n -1px 0 2px rgba(0, 0, 0, 0.12), 1px 0 2px rgba(0, 0, 0, 0.13);\n\n /\n @prop --viewer-toolbar-group-padding: The padding to apply to each group in\n * the toolbar. Defaults to `0.25rem`.\n /\n --viewer-toolbar-group-padding: 0.25rem;\n\n /\n @prop --viewer-toolbar-group-item-gap: The spacing between each item within\n * a toolbar group. Defaults to `0.25rem`.\n /\n --viewer-toolbar-group-item-gap: 0.25rem;\n}\n\n.group {\n background: var(--viewer-toolbar-group-background);\n border-radius: var(--viewer-toolbar-group-border-radius);\n box-shadow: var(--viewer-toolbar-group-box-shadow);\n padding: var(--viewer-toolbar-group-padding);\n}\n\n.group[data-direction='horizontal']:not(:first-child) {\n margin-left: var(--viewer-toolbar-group-gap);\n}\n\n.group[data-direction='horizontal'] .group-item:not(:first-child) {\n margin-left: var(--viewer-toolbar-group-item-gap);\n}\n\n.group[data-direction='vertical']:not(:first-child) {\n margin-top: var(--viewer-toolbar-group-gap);\n}\n\n.group[data-direction='vertical'] .group-item:not(:first-child) {\n margin-top: var(--viewer-toolbar-group-item-gap);\n}\n\n.btn {\n color: var(--neutral-800);\n padding: 0.125rem;\n border-radius: 0.125rem;\n}\n\n.btn:hover {\n background: var(--neutral-300);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { ViewerToolbarPlacement } from '../viewer-toolbar/types';\nimport { ViewerToolbarGroupDirection } from '../viewer-toolbar-group/types';\n\n@Component({\n tag: 'vertex-viewer-default-toolbar',\n styleUrl: 'viewer-default-toolbar.css',\n shadow: true,\n})\nexport class ViewerDefaultToolbar {\n /\n An instance of the viewer that operations will be performed on. If\n * contained within a `<vertex-viewer>` element, this property will\n * automatically be wired.\n /\n @Prop()\n public viewer?: HTMLVertexViewerElement;\n\n /\n Specifies where the toolbar is positioned.\n /\n @Prop()\n public placement: ViewerToolbarPlacement = 'bottom-center';\n\n /\n Specifies the direction that UI elements are placed.\n /\n @Prop()\n public direction: ViewerToolbarGroupDirection = 'horizontal';\n\n /\n Indicates whether animations will be used when performing camera\n * operations. Defaults to `true`.\n /\n @Prop()\n public animationsDisabled = false;\n\n /\n The duration of animations, in milliseconds. Defaults to `1000`.\n */\n @Prop()\n public animationMs = 1000;\n\n public render(): h.JSX.IntrinsicElements {\n return (\n <vertex-viewer-toolbar\n placement={this.placement}\n direction={this.direction}\n >\n <vertex-viewer-toolbar-group\n class=\"group\"\n direction={this.direction}\n data-direction={this.direction}\n >\n <vertex-viewer-button\n aria-label=\"Fit all\"\n class=\"group-item btn\"\n data-testid=\"fit-all-btn\"\n onClick={() => this.viewAll()}\n >\n <vertex-viewer-icon class=\"icon\" name=\"fit-all\" size=\"md\" />\n </vertex-viewer-button>\n </vertex-viewer-toolbar-group>\n </vertex-viewer-toolbar>\n );\n }\n\n private async viewAll(): Promise<void> {\n const scene = await this.viewer?.scene();\n const animation = this.animationsDisabled\n ? undefined\n : { milliseconds: this.animationMs };\n scene?.camera().viewAll().render({ animation });\n }\n}\n"],"mappings":";;;6OAAA,MAAMA,EAA0B,IAAM,qiC,MCUzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,kEAkBSC,KAAAC,UAAoC,gBAMpCD,KAAAE,UAAyC,aAOzCF,KAAAG,mBAAqB,MAMrBH,KAAAI,YAAc,GAiCtB,CA/BQ,MAAAC,GACL,OACEC,EAAA,yBAAAC,IAAA,2CACEN,UAAWD,KAAKC,UAChBC,UAAWF,KAAKE,WAEhBI,EAAA,+BAAAC,IAAA,2CACEC,MAAM,QACNN,UAAWF,KAAKE,UAAS,iBACTF,KAAKE,WAErBI,EAAA,wBAAAC,IAAA,wDACa,UACXC,MAAM,iBAAgB,cACV,cACZC,QAAS,IAAMT,KAAKU,WAEpBJ,EAAA,sBAAAC,IAAA,2CAAoBC,MAAM,OAAOG,KAAK,UAAUC,KAAK,S,CAOvD,aAAMF,G,MACZ,MAAMG,SAAcC,EAAAd,KAAKe,UAAM,MAAAD,SAAA,SAAAA,EAAED,SACjC,MAAMG,EAAYhB,KAAKG,mBACnBc,UACA,CAAEC,aAAclB,KAAKI,aACzBS,IAAK,MAALA,SAAK,SAALA,EAAOM,SAAST,UAAUL,OAAO,CAAEW,a","ignoreList":[]}

package/dist/components/vertex-viewer-dom-element.js CHANGED Viewed

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

package/dist/components/vertex-viewer-dom-group.js CHANGED Viewed

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

package/dist/components/vertex-viewer-dom-renderer.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-CMdP8O-G.js";const t=o;const p=s;export{t as VertexViewerDomRenderer,p as defineCustomElement};
+import{V as o,d as s}from"./p-Ca253f0h.js";const t=o;const a=s;export{t as VertexViewerDomRenderer,a as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-dom-renderer.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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