npm - @vertexvis/viewer - Versions diffs - 1.0.2-canary.3 → 1.0.2-canary.4 - Mend

@vertexvis/viewer 1.0.2-canary.3 → 1.0.2-canary.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 (501) hide show

package/dist/components/p-BCOD9yfw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["isVertexViewerDomElement","el","HTMLElement","nodeName","matrix","isVertexViewerDomGroup","dataset","isDomGroupElement","Renderer2d","_","children","h","class","update2d","hostEl","parentWorldMatrix","viewport","camera","depthBuffer","elements","getElementDepths","sort","a","b","distanceToCamera","i","length","element","worldMatrix","worldPosition","depthBufferIsNull","occluded","occlusionOff","isOccluded","detached","detachedOff","isDetached","screenPt","getScreenPosition","projectionViewMatrix","updateTransform","updateDepth","classList","add","results","child","Matrix4","multiply","push","Vector3","fromMatrixPosition","distanceSquared","position","relativePt","style","transform","x","y","join","index","elementCount","zIndex","pt","ndcPt","transformMatrix","transformVectorToViewport","Renderer3d","pMatrix","toObject","projectionMatrix","fovY","isOrthographic","far","fovHeight","height","m22","cameraTransform","getCameraCssMatrix","viewMatrix","width","perspective","update3d","updateElement","updateGroup","positionWorld","billboardOff","getElementCssMatrix","m","transpose","scale","epsilon","values","value","Math","abs","viewerDomRendererCss","ViewerDomRenderer","__stencil_proxyCustomElement","constructor","registerHost","this","drawMode","propagateEventsToViewer","Viewport","invalidateFrameCounter","interactionDisposables","handleViewerFrameDrawn","async","updatePropsFromViewer","componentWillLoad","resized","ResizeObserver","handleResize","observe","mutation","MutationObserver","handleChildrenChange","childList","handleViewerChange","viewer","undefined","_a","frame","render","Host","componentWillRender","updateElements","newViewer","oldViewer","removeEventListener","addEventListener","handleEventPropagationToViewer","handlePropertyChange","invalidateFrame","forEach","disposable","dispose","getInteractionHandlers","then","handlers","handler","MultiElementInteractionHandler","registerAdditionalElement","makeIdentity","bounds","getBoundingClientRect","scene"],"sources":["src/components/viewer-dom-element/utils.ts","src/components/viewer-dom-group/utils.ts","src/components/viewer-dom-renderer/renderer2d.tsx","src/components/viewer-dom-renderer/renderer3d.tsx","src/components/viewer-dom-renderer/viewer-dom-renderer.css?tag=vertex-viewer-dom-renderer&encapsulation=scoped","src/components/viewer-dom-renderer/viewer-dom-renderer.tsx"],"sourcesContent":["export function isVertexViewerDomElement(\n el: unknown\n): el is HTMLVertexViewerDomElementElement {\n return (\n el instanceof HTMLElement &&\n el.nodeName === 'VERTEX-VIEWER-DOM-ELEMENT' &&\n (el as HTMLVertexViewerDomElementElement).matrix != null\n );\n}\n","export function isVertexViewerDomGroup(\n el: unknown\n): el is HTMLVertexViewerDomGroupElement {\n return (\n ((el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-GROUP') \|\|\n (el instanceof HTMLElement && el.dataset.isDomGroupElement != null)) &&\n (el as HTMLVertexViewerDomGroupElement).matrix != null\n );\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Matrix4, Point, Vector3 } from '@vertexvis/geometry';\n\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraBase } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface ElementData {\n element: HTMLVertexViewerDomElementElement;\n worldMatrix: Matrix4.Matrix4;\n worldPosition: Vector3.Vector3;\n distanceToCamera: number;\n}\n\nexport const Renderer2d: FunctionalComponent = (_, children) => {\n return <div class=\"root-2d\">{children}</div>;\n};\n\nexport function update2d(\n hostEl: HTMLElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined\n): void {\n const elements = getElementDepths(hostEl, parentWorldMatrix, camera).sort(\n (a, b) => a.distanceToCamera - b.distanceToCamera\n );\n\n for (let i = 0; i < elements.length; i++) {\n const { element, worldMatrix, worldPosition } = elements[i];\n\n const depthBufferIsNull = depthBuffer == null;\n const occluded =\n depthBufferIsNull \|\|\n (!element.occlusionOff &&\n depthBuffer?.isOccluded(worldPosition, viewport));\n const detached =\n depthBufferIsNull \|\|\n (!element.detachedOff &&\n depthBuffer?.isDetached(worldPosition, viewport));\n const screenPt = getScreenPosition(\n worldPosition,\n camera.projectionViewMatrix,\n viewport\n );\n\n updateTransform(element, screenPt);\n updateDepth(element, i, elements.length);\n update2d(element, worldMatrix, viewport, camera, depthBuffer);\n\n element.occluded = occluded ?? false;\n element.detached = detached ?? false;\n element.classList.add('ready');\n }\n}\n\nfunction getElementDepths(\n element: HTMLElement,\n parentWorldMatrix: Matrix4.Matrix4,\n camera: FrameCameraBase\n): ElementData[] {\n const results = [] as ElementData[];\n\n for (let i = 0; i < element.children.length; i++) {\n const child = element.children[i] as HTMLElement;\n\n if (isVertexViewerDomGroup(child)) {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, child.matrix);\n results.push(...getElementDepths(child, worldMatrix, camera));\n } else if (isVertexViewerDomElement(child)) {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, child.matrix);\n const worldPosition = Vector3.fromMatrixPosition(worldMatrix);\n const distanceToCamera = Vector3.distanceSquared(\n camera.position,\n worldPosition\n );\n results.push({\n element: child,\n worldMatrix,\n worldPosition,\n distanceToCamera,\n });\n } else {\n results.push(...getElementDepths(child, parentWorldMatrix, camera));\n }\n }\n\n return results;\n}\n\nfunction updateTransform(\n element: HTMLVertexViewerDomElementElement,\n relativePt: Point.Point\n): void {\n element.style.transform = [\n `translate(-50%, -50%)`,\n `translate(${relativePt.x}px, ${relativePt.y}px)`,\n ].join(' ');\n}\n\nfunction updateDepth(\n element: HTMLVertexViewerDomElementElement,\n index: number,\n elementCount: number\n): void {\n element.style.zIndex = `${elementCount - index}`;\n}\n\nfunction getScreenPosition(\n pt: Vector3.Vector3,\n projectionViewMatrix: Matrix4.Matrix4,\n viewport: Viewport\n): Point.Point {\n const ndcPt = Vector3.transformMatrix(pt, projectionViewMatrix);\n return viewport.transformVectorToViewport(ndcPt);\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Matrix4, Vector3 } from '@vertexvis/geometry';\n\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraBase } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraBase;\n viewport: Viewport;\n}\n\nexport const Renderer3d: FunctionalComponent<Props> = (\n { camera, viewport },\n children\n) => {\n const pMatrix = Matrix4.toObject(camera.projectionMatrix);\n const fovY = camera.isOrthographic()\n ? ((camera.far * 2) / (camera.fovHeight * 2)) * (viewport.height / 2)\n : pMatrix.m22 * (viewport.height / 2);\n const cameraTransform = [\n `translateZ(${fovY}px)`,\n getCameraCssMatrix(camera.viewMatrix),\n `translate(${viewport.width / 2}px, ${viewport.height / 2}px)`,\n ].join(' ');\n\n return (\n <div class=\"root-3d\" style={{ perspective: `${fovY}px` }}>\n <div class=\"camera\" style={{ transform: cameraTransform }}>\n {children}\n </div>\n </div>\n );\n};\n\nexport function update3d(\n element: HTMLElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined\n): void {\n for (let i = 0; i < element.children.length; i++) {\n const el = element.children[i] as HTMLElement;\n if (isVertexViewerDomElement(el)) {\n updateElement(\n el as HTMLVertexViewerDomElementElement,\n parentWorldMatrix,\n viewport,\n camera,\n depthBuffer\n );\n } else if (isVertexViewerDomGroup(el)) {\n updateGroup(el, parentWorldMatrix, viewport, camera, depthBuffer);\n } else {\n update3d(el, parentWorldMatrix, viewport, camera, depthBuffer);\n }\n }\n}\n\nfunction updateElement(\n element: HTMLVertexViewerDomElementElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n\n const positionWorld = Vector3.fromMatrixPosition(worldMatrix);\n const depthBufferIsNull = depthBuffer == null;\n const occluded =\n depthBufferIsNull \|\|\n (!element.occlusionOff && depthBuffer?.isOccluded(positionWorld, viewport));\n element.occluded = occluded ?? false;\n const detached =\n depthBufferIsNull \|\|\n (!element.detachedOff && depthBuffer?.isDetached(positionWorld, viewport));\n element.detached = detached ?? false;\n element.classList.add('ready');\n\n if (element.billboardOff) {\n element.style.transform = getElementCssMatrix(worldMatrix);\n } else {\n let m = camera.viewMatrix;\n m = Matrix4.transpose(m);\n m = Matrix4.position(m, worldMatrix);\n m = Matrix4.scale(m, element.scale);\n\n m[3] = 0;\n m[7] = 0;\n m[11] = 0;\n m[15] = 1;\n\n element.style.transform = getElementCssMatrix(m);\n }\n\n update3d(element, worldMatrix, viewport, camera, depthBuffer);\n}\n\nfunction updateGroup(\n element: HTMLVertexViewerDomGroupElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n update3d(element, worldMatrix, viewport, camera, depthBuffer);\n}\n\nfunction getCameraCssMatrix(viewMatrix: Matrix4.Matrix4): string {\n const elements = [\n epsilon(viewMatrix[0]),\n epsilon(-viewMatrix[1]),\n epsilon(viewMatrix[2]),\n epsilon(viewMatrix[3]),\n epsilon(viewMatrix[4]),\n epsilon(-viewMatrix[5]),\n epsilon(viewMatrix[6]),\n epsilon(viewMatrix[7]),\n epsilon(viewMatrix[8]),\n epsilon(-viewMatrix[9]),\n epsilon(viewMatrix[10]),\n epsilon(viewMatrix[11]),\n epsilon(viewMatrix[12]),\n epsilon(-viewMatrix[13]),\n epsilon(viewMatrix[14]),\n epsilon(viewMatrix[15]),\n ].join(', ');\n return `matrix3d(${elements})`;\n}\n\nfunction getElementCssMatrix(matrix: Matrix4.Matrix4): string {\n const values = [\n epsilon(matrix[0]),\n epsilon(matrix[1]),\n epsilon(matrix[2]),\n epsilon(matrix[3]),\n epsilon(-matrix[4]),\n epsilon(-matrix[5]),\n epsilon(-matrix[6]),\n epsilon(-matrix[7]),\n epsilon(matrix[8]),\n epsilon(matrix[9]),\n epsilon(matrix[10]),\n epsilon(matrix[11]),\n epsilon(matrix[12]),\n epsilon(matrix[13]),\n epsilon(matrix[14]),\n epsilon(matrix[15]),\n ].join(', ');\n\n return [`translate(-50%, -50%)`, `matrix3d(${values})`].join(' ');\n}\n\nfunction epsilon(value: number): number {\n return Math.abs(value) < 1e-10 ? 0 : value;\n}\n",":host {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.root-3d {\n width: 100%;\n height: 100%;\n pointer-events: inherit;\n}\n\n.camera {\n transform-style: preserve-3d;\n pointer-events: inherit;\n width: 100%;\n height: 100%;\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Matrix4 } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { MultiElementInteractionHandler } from '../../lib/interactions/multiElementInteractionHandler';\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraBase } from '../../lib/types/frame';\nimport { Renderer2d, update2d } from './renderer2d';\nimport { Renderer3d, update3d } from './renderer3d';\n\nexport type ViewerDomRendererDrawMode = '2d' \| '3d';\n\n/*\n The `ViewerDomRenderer` is responsible for managing a\n * `<vertex-viewer-dom-renderer>` element. This element supports drawing DOM\n * objects in a local 3D scene that is synced with a remote rendered scene.\n /\n@Component({\n tag: 'vertex-viewer-dom-renderer',\n styleUrl: 'viewer-dom-renderer.css',\n shadow: false,\n scoped: true,\n})\nexport class ViewerDomRenderer {\n /\n Specifies the drawing mode for the renderer.\n \n When in `3d` mode, elements are positioned using CSS 3D transforms and will\n * scale and rotate with the camera. In `2d` mode, a simpler 2D transform is\n * used, and elements will not scale or rotate with camera changes.\n /\n @Prop()\n public drawMode: ViewerDomRendererDrawMode = '3d';\n\n /\n Specifies whether to propagate events to the viewer's interaction handlers\n \n When `true` this <vertex-viewer-dom-renderer> will be registered as a valid event target\n * for the viewer. This enables camera interactions to be initiated from elements within this renderer.\n \n When `false` this <vertex-viewer-dom-renderer> will not be registered as a target\n * for the viewer.\n /\n @Prop()\n public propagateEventsToViewer = true;\n\n /\n The viewer synced to this renderer. This property will automatically be\n * assigned if the renderer is a child of `<vertex-viewer>`.\n /\n @Prop()\n public viewer?: HTMLVertexViewerElement;\n\n /\n The current camera of the frame.\n \n This property will automatically be set when supplying a viewer to the\n * component, or when added as a child to `<vertex-viewer>`.\n /\n @Prop({ mutable: true })\n public camera?: FrameCameraBase;\n\n /\n The current depth buffer of the frame.\n \n This property will automatically be set when supplying a viewer to the\n * component, or when added as a child to `<vertex-viewer>`.\n /\n @Prop({ mutable: true })\n public depthBuffer?: DepthBuffer;\n\n @State()\n private viewport: Viewport = new Viewport(0, 0);\n\n @State()\n private invalidateFrameCounter = 0;\n\n @State()\n private interactionDisposables: Disposable[] = [];\n\n @Element()\n private hostEl!: HTMLElement;\n\n /\n @ignore\n /\n protected componentWillLoad(): void {\n const resized = new ResizeObserver(() => this.handleResize());\n resized.observe(this.hostEl);\n\n const mutation = new MutationObserver(() => this.handleChildrenChange());\n mutation.observe(this.hostEl, { childList: true });\n\n this.handleViewerChange(this.viewer, undefined);\n\n if (this.viewer?.frame != null) {\n this.handleViewerFrameDrawn();\n }\n }\n\n /\n @ignore\n /\n public render(): h.JSX.IntrinsicElements {\n if (this.camera != null) {\n if (this.drawMode === '2d') {\n return (\n <Host>\n <Renderer2d>\n <slot></slot>\n </Renderer2d>\n </Host>\n );\n } else {\n return (\n <Host>\n <Renderer3d camera={this.camera} viewport={this.viewport}>\n <slot></slot>\n </Renderer3d>\n </Host>\n );\n }\n } else {\n return <Host></Host>;\n }\n }\n\n /\n @ignore\n /\n protected componentWillRender(): void {\n this.updateElements();\n }\n\n /\n @ignore\n /\n @Watch('viewer')\n protected handleViewerChange(\n newViewer: HTMLVertexViewerElement \| undefined,\n oldViewer: HTMLVertexViewerElement \| undefined\n ): void {\n oldViewer?.removeEventListener('frameDrawn', this.handleViewerFrameDrawn);\n newViewer?.addEventListener('frameDrawn', this.handleViewerFrameDrawn);\n\n if (this.propagateEventsToViewer && newViewer != null) {\n this.handleEventPropagationToViewer(newViewer);\n }\n }\n\n /\n @ignore\n /\n @Listen('propertyChange')\n protected handlePropertyChange(): void {\n this.invalidateFrame();\n }\n\n private invalidateFrame(): void {\n this.invalidateFrameCounter = this.invalidateFrameCounter + 1;\n }\n\n /\n disposes any existing disposables, and registers new handlers on the newly provided viewer.\n * @param newViewer\n */\n private handleEventPropagationToViewer(\n newViewer: HTMLVertexViewerElement\n ): void {\n this.interactionDisposables.forEach((disposable) => {\n disposable.dispose();\n });\n\n this.interactionDisposables = [];\n\n newViewer.getInteractionHandlers().then((handlers) => {\n handlers.forEach((handler) => {\n if (handler instanceof MultiElementInteractionHandler) {\n const disposable = handler.registerAdditionalElement(this.hostEl);\n\n this.interactionDisposables = [\n ...this.interactionDisposables,\n disposable,\n ];\n }\n });\n });\n }\n\n private async updateElements(): Promise<void> {\n const { viewport, camera } = this;\n const worldMatrix = Matrix4.makeIdentity();\n\n if (camera != null) {\n if (this.drawMode === '3d') {\n update3d(this.hostEl, worldMatrix, viewport, camera, this.depthBuffer);\n } else {\n update2d(this.hostEl, worldMatrix, viewport, camera, this.depthBuffer);\n }\n }\n }\n\n private handleViewerFrameDrawn = async (): Promise<void> => {\n this.updatePropsFromViewer();\n };\n\n private handleResize(): void {\n const bounds = this.hostEl.getBoundingClientRect();\n this.viewport = new Viewport(bounds.width, bounds.height);\n }\n\n private handleChildrenChange(): void {\n this.invalidateFrame();\n }\n\n private async updatePropsFromViewer(): Promise<void> {\n const { frame } = this.viewer \|\| {};\n\n this.depthBuffer = await frame?.depthBuffer();\n this.camera = frame?.scene.camera;\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["isVertexViewerDomElement","el","HTMLElement","nodeName","matrix","isVertexViewerDomGroup","dataset","isDomGroupElement","Renderer2d","_","children","h","class","update2d","hostEl","parentWorldMatrix","viewport","camera","depthBuffer","elements","getElementDepths","sort","a","b","distanceToCamera","i","length","element","worldMatrix","worldPosition","depthBufferIsNull","occluded","occlusionOff","isOccluded","detached","detachedOff","isDetached","screenPt","getScreenPosition","projectionViewMatrix","updateTransform","updateDepth","classList","add","results","child","Matrix4","multiply","push","Vector3","fromMatrixPosition","distanceSquared","position","relativePt","style","transform","x","y","join","index","elementCount","zIndex","pt","ndcPt","transformMatrix","transformVectorToViewport","Renderer3d","pMatrix","toObject","projectionMatrix","fovY","isOrthographic","far","fovHeight","height","m22","cameraTransform","getCameraCssMatrix","viewMatrix","width","perspective","update3d","updateElement","updateGroup","positionWorld","billboardOff","getElementCssMatrix","m","transpose","scale","epsilon","values","value","Math","abs","viewerDomRendererCss","ViewerDomRenderer","__stencil_proxyCustomElement","constructor","registerHost","this","drawMode","propagateEventsToViewer","Viewport","invalidateFrameCounter","interactionDisposables","handleViewerFrameDrawn","async","updatePropsFromViewer","componentWillLoad","resized","ResizeObserver","handleResize","observe","mutation","MutationObserver","handleChildrenChange","childList","handleViewerChange","viewer","undefined","_a","frame","render","Host","componentWillRender","updateElements","newViewer","oldViewer","removeEventListener","addEventListener","handleEventPropagationToViewer","handlePropertyChange","invalidateFrame","forEach","disposable","dispose","getInteractionHandlers","then","handlers","handler","MultiElementInteractionHandler","registerAdditionalElement","makeIdentity","bounds","getBoundingClientRect","scene"],"sources":["src/components/viewer-dom-element/utils.ts","src/components/viewer-dom-group/utils.ts","src/components/viewer-dom-renderer/renderer2d.tsx","src/components/viewer-dom-renderer/renderer3d.tsx","src/components/viewer-dom-renderer/viewer-dom-renderer.css?tag=vertex-viewer-dom-renderer&encapsulation=scoped","src/components/viewer-dom-renderer/viewer-dom-renderer.tsx"],"sourcesContent":["export function isVertexViewerDomElement(\n el: unknown,\n): el is HTMLVertexViewerDomElementElement {\n return (\n el instanceof HTMLElement &&\n el.nodeName === 'VERTEX-VIEWER-DOM-ELEMENT' &&\n (el as HTMLVertexViewerDomElementElement).matrix != null\n );\n}\n","export function isVertexViewerDomGroup(\n el: unknown,\n): el is HTMLVertexViewerDomGroupElement {\n return (\n ((el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-GROUP') \|\|\n (el instanceof HTMLElement && el.dataset.isDomGroupElement != null)) &&\n (el as HTMLVertexViewerDomGroupElement).matrix != null\n );\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Matrix4, Point, Vector3 } from '@vertexvis/geometry';\n\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraBase } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface ElementData {\n element: HTMLVertexViewerDomElementElement;\n worldMatrix: Matrix4.Matrix4;\n worldPosition: Vector3.Vector3;\n distanceToCamera: number;\n}\n\nexport const Renderer2d: FunctionalComponent = (_, children) => {\n return <div class=\"root-2d\">{children}</div>;\n};\n\nexport function update2d(\n hostEl: HTMLElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined,\n): void {\n const elements = getElementDepths(hostEl, parentWorldMatrix, camera).sort(\n (a, b) => a.distanceToCamera - b.distanceToCamera,\n );\n\n for (let i = 0; i < elements.length; i++) {\n const { element, worldMatrix, worldPosition } = elements[i];\n\n const depthBufferIsNull = depthBuffer == null;\n const occluded =\n depthBufferIsNull \|\|\n (!element.occlusionOff &&\n depthBuffer?.isOccluded(worldPosition, viewport));\n const detached =\n depthBufferIsNull \|\|\n (!element.detachedOff &&\n depthBuffer?.isDetached(worldPosition, viewport));\n const screenPt = getScreenPosition(\n worldPosition,\n camera.projectionViewMatrix,\n viewport,\n );\n\n updateTransform(element, screenPt);\n updateDepth(element, i, elements.length);\n update2d(element, worldMatrix, viewport, camera, depthBuffer);\n\n element.occluded = occluded ?? false;\n element.detached = detached ?? false;\n element.classList.add('ready');\n }\n}\n\nfunction getElementDepths(\n element: HTMLElement,\n parentWorldMatrix: Matrix4.Matrix4,\n camera: FrameCameraBase,\n): ElementData[] {\n const results = [] as ElementData[];\n\n for (let i = 0; i < element.children.length; i++) {\n const child = element.children[i] as HTMLElement;\n\n if (isVertexViewerDomGroup(child)) {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, child.matrix);\n results.push(...getElementDepths(child, worldMatrix, camera));\n } else if (isVertexViewerDomElement(child)) {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, child.matrix);\n const worldPosition = Vector3.fromMatrixPosition(worldMatrix);\n const distanceToCamera = Vector3.distanceSquared(\n camera.position,\n worldPosition,\n );\n results.push({\n element: child,\n worldMatrix,\n worldPosition,\n distanceToCamera,\n });\n } else {\n results.push(...getElementDepths(child, parentWorldMatrix, camera));\n }\n }\n\n return results;\n}\n\nfunction updateTransform(\n element: HTMLVertexViewerDomElementElement,\n relativePt: Point.Point,\n): void {\n element.style.transform = [\n `translate(-50%, -50%)`,\n `translate(${relativePt.x}px, ${relativePt.y}px)`,\n ].join(' ');\n}\n\nfunction updateDepth(\n element: HTMLVertexViewerDomElementElement,\n index: number,\n elementCount: number,\n): void {\n element.style.zIndex = `${elementCount - index}`;\n}\n\nfunction getScreenPosition(\n pt: Vector3.Vector3,\n projectionViewMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n): Point.Point {\n const ndcPt = Vector3.transformMatrix(pt, projectionViewMatrix);\n return viewport.transformVectorToViewport(ndcPt);\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Matrix4, Vector3 } from '@vertexvis/geometry';\n\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraBase } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraBase;\n viewport: Viewport;\n}\n\nexport const Renderer3d: FunctionalComponent<Props> = (\n { camera, viewport },\n children,\n) => {\n const pMatrix = Matrix4.toObject(camera.projectionMatrix);\n const fovY = camera.isOrthographic()\n ? ((camera.far * 2) / (camera.fovHeight * 2)) * (viewport.height / 2)\n : pMatrix.m22 * (viewport.height / 2);\n const cameraTransform = [\n `translateZ(${fovY}px)`,\n getCameraCssMatrix(camera.viewMatrix),\n `translate(${viewport.width / 2}px, ${viewport.height / 2}px)`,\n ].join(' ');\n\n return (\n <div class=\"root-3d\" style={{ perspective: `${fovY}px` }}>\n <div class=\"camera\" style={{ transform: cameraTransform }}>\n {children}\n </div>\n </div>\n );\n};\n\nexport function update3d(\n element: HTMLElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined,\n): void {\n for (let i = 0; i < element.children.length; i++) {\n const el = element.children[i] as HTMLElement;\n if (isVertexViewerDomElement(el)) {\n updateElement(\n el as HTMLVertexViewerDomElementElement,\n parentWorldMatrix,\n viewport,\n camera,\n depthBuffer,\n );\n } else if (isVertexViewerDomGroup(el)) {\n updateGroup(el, parentWorldMatrix, viewport, camera, depthBuffer);\n } else {\n update3d(el, parentWorldMatrix, viewport, camera, depthBuffer);\n }\n }\n}\n\nfunction updateElement(\n element: HTMLVertexViewerDomElementElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined,\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n\n const positionWorld = Vector3.fromMatrixPosition(worldMatrix);\n const depthBufferIsNull = depthBuffer == null;\n const occluded =\n depthBufferIsNull \|\|\n (!element.occlusionOff && depthBuffer?.isOccluded(positionWorld, viewport));\n element.occluded = occluded ?? false;\n const detached =\n depthBufferIsNull \|\|\n (!element.detachedOff && depthBuffer?.isDetached(positionWorld, viewport));\n element.detached = detached ?? false;\n element.classList.add('ready');\n\n if (element.billboardOff) {\n element.style.transform = getElementCssMatrix(worldMatrix);\n } else {\n let m = camera.viewMatrix;\n m = Matrix4.transpose(m);\n m = Matrix4.position(m, worldMatrix);\n m = Matrix4.scale(m, element.scale);\n\n m[3] = 0;\n m[7] = 0;\n m[11] = 0;\n m[15] = 1;\n\n element.style.transform = getElementCssMatrix(m);\n }\n\n update3d(element, worldMatrix, viewport, camera, depthBuffer);\n}\n\nfunction updateGroup(\n element: HTMLVertexViewerDomGroupElement,\n parentWorldMatrix: Matrix4.Matrix4,\n viewport: Viewport,\n camera: FrameCameraBase,\n depthBuffer: DepthBuffer \| undefined,\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n update3d(element, worldMatrix, viewport, camera, depthBuffer);\n}\n\nfunction getCameraCssMatrix(viewMatrix: Matrix4.Matrix4): string {\n const elements = [\n epsilon(viewMatrix[0]),\n epsilon(-viewMatrix[1]),\n epsilon(viewMatrix[2]),\n epsilon(viewMatrix[3]),\n epsilon(viewMatrix[4]),\n epsilon(-viewMatrix[5]),\n epsilon(viewMatrix[6]),\n epsilon(viewMatrix[7]),\n epsilon(viewMatrix[8]),\n epsilon(-viewMatrix[9]),\n epsilon(viewMatrix[10]),\n epsilon(viewMatrix[11]),\n epsilon(viewMatrix[12]),\n epsilon(-viewMatrix[13]),\n epsilon(viewMatrix[14]),\n epsilon(viewMatrix[15]),\n ].join(', ');\n return `matrix3d(${elements})`;\n}\n\nfunction getElementCssMatrix(matrix: Matrix4.Matrix4): string {\n const values = [\n epsilon(matrix[0]),\n epsilon(matrix[1]),\n epsilon(matrix[2]),\n epsilon(matrix[3]),\n epsilon(-matrix[4]),\n epsilon(-matrix[5]),\n epsilon(-matrix[6]),\n epsilon(-matrix[7]),\n epsilon(matrix[8]),\n epsilon(matrix[9]),\n epsilon(matrix[10]),\n epsilon(matrix[11]),\n epsilon(matrix[12]),\n epsilon(matrix[13]),\n epsilon(matrix[14]),\n epsilon(matrix[15]),\n ].join(', ');\n\n return [`translate(-50%, -50%)`, `matrix3d(${values})`].join(' ');\n}\n\nfunction epsilon(value: number): number {\n return Math.abs(value) < 1e-10 ? 0 : value;\n}\n",":host {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.root-3d {\n width: 100%;\n height: 100%;\n pointer-events: inherit;\n}\n\n.camera {\n transform-style: preserve-3d;\n pointer-events: inherit;\n width: 100%;\n height: 100%;\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Matrix4 } from '@vertexvis/geometry';\nimport { Disposable } from '@vertexvis/utils';\n\nimport { MultiElementInteractionHandler } from '../../lib/interactions/multiElementInteractionHandler';\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraBase } from '../../lib/types/frame';\nimport { Renderer2d, update2d } from './renderer2d';\nimport { Renderer3d, update3d } from './renderer3d';\n\nexport type ViewerDomRendererDrawMode = '2d' \| '3d';\n\n/*\n The `ViewerDomRenderer` is responsible for managing a\n * `<vertex-viewer-dom-renderer>` element. This element supports drawing DOM\n * objects in a local 3D scene that is synced with a remote rendered scene.\n /\n@Component({\n tag: 'vertex-viewer-dom-renderer',\n styleUrl: 'viewer-dom-renderer.css',\n shadow: false,\n scoped: true,\n})\nexport class ViewerDomRenderer {\n /\n Specifies the drawing mode for the renderer.\n \n When in `3d` mode, elements are positioned using CSS 3D transforms and will\n * scale and rotate with the camera. In `2d` mode, a simpler 2D transform is\n * used, and elements will not scale or rotate with camera changes.\n /\n @Prop()\n public drawMode: ViewerDomRendererDrawMode = '3d';\n\n /\n Specifies whether to propagate events to the viewer's interaction handlers\n \n When `true` this <vertex-viewer-dom-renderer> will be registered as a valid event target\n * for the viewer. This enables camera interactions to be initiated from elements within this renderer.\n \n When `false` this <vertex-viewer-dom-renderer> will not be registered as a target\n * for the viewer.\n /\n @Prop()\n public propagateEventsToViewer = true;\n\n /\n The viewer synced to this renderer. This property will automatically be\n * assigned if the renderer is a child of `<vertex-viewer>`.\n /\n @Prop()\n public viewer?: HTMLVertexViewerElement;\n\n /\n The current camera of the frame.\n \n This property will automatically be set when supplying a viewer to the\n * component, or when added as a child to `<vertex-viewer>`.\n /\n @Prop({ mutable: true })\n public camera?: FrameCameraBase;\n\n /\n The current depth buffer of the frame.\n \n This property will automatically be set when supplying a viewer to the\n * component, or when added as a child to `<vertex-viewer>`.\n /\n @Prop({ mutable: true })\n public depthBuffer?: DepthBuffer;\n\n @State()\n private viewport: Viewport = new Viewport(0, 0);\n\n @State()\n private invalidateFrameCounter = 0;\n\n @State()\n private interactionDisposables: Disposable[] = [];\n\n @Element()\n private hostEl!: HTMLElement;\n\n /\n @ignore\n /\n protected componentWillLoad(): void {\n const resized = new ResizeObserver(() => this.handleResize());\n resized.observe(this.hostEl);\n\n const mutation = new MutationObserver(() => this.handleChildrenChange());\n mutation.observe(this.hostEl, { childList: true });\n\n this.handleViewerChange(this.viewer, undefined);\n\n if (this.viewer?.frame != null) {\n this.handleViewerFrameDrawn();\n }\n }\n\n /\n @ignore\n /\n public render(): h.JSX.IntrinsicElements {\n if (this.camera != null) {\n if (this.drawMode === '2d') {\n return (\n <Host>\n <Renderer2d>\n <slot></slot>\n </Renderer2d>\n </Host>\n );\n } else {\n return (\n <Host>\n <Renderer3d camera={this.camera} viewport={this.viewport}>\n <slot></slot>\n </Renderer3d>\n </Host>\n );\n }\n } else {\n return <Host></Host>;\n }\n }\n\n /\n @ignore\n /\n protected componentWillRender(): void {\n this.updateElements();\n }\n\n /\n @ignore\n /\n @Watch('viewer')\n protected handleViewerChange(\n newViewer: HTMLVertexViewerElement \| undefined,\n oldViewer: HTMLVertexViewerElement \| undefined,\n ): void {\n oldViewer?.removeEventListener('frameDrawn', this.handleViewerFrameDrawn);\n newViewer?.addEventListener('frameDrawn', this.handleViewerFrameDrawn);\n\n if (this.propagateEventsToViewer && newViewer != null) {\n this.handleEventPropagationToViewer(newViewer);\n }\n }\n\n /\n @ignore\n /\n @Listen('propertyChange')\n protected handlePropertyChange(): void {\n this.invalidateFrame();\n }\n\n private invalidateFrame(): void {\n this.invalidateFrameCounter = this.invalidateFrameCounter + 1;\n }\n\n /\n disposes any existing disposables, and registers new handlers on the newly provided viewer.\n * @param newViewer\n */\n private handleEventPropagationToViewer(\n newViewer: HTMLVertexViewerElement,\n ): void {\n this.interactionDisposables.forEach((disposable) => {\n disposable.dispose();\n });\n\n this.interactionDisposables = [];\n\n newViewer.getInteractionHandlers().then((handlers) => {\n handlers.forEach((handler) => {\n if (handler instanceof MultiElementInteractionHandler) {\n const disposable = handler.registerAdditionalElement(this.hostEl);\n\n this.interactionDisposables = [\n ...this.interactionDisposables,\n disposable,\n ];\n }\n });\n });\n }\n\n private async updateElements(): Promise<void> {\n const { viewport, camera } = this;\n const worldMatrix = Matrix4.makeIdentity();\n\n if (camera != null) {\n if (this.drawMode === '3d') {\n update3d(this.hostEl, worldMatrix, viewport, camera, this.depthBuffer);\n } else {\n update2d(this.hostEl, worldMatrix, viewport, camera, this.depthBuffer);\n }\n }\n }\n\n private handleViewerFrameDrawn = async (): Promise<void> => {\n this.updatePropsFromViewer();\n };\n\n private handleResize(): void {\n const bounds = this.hostEl.getBoundingClientRect();\n this.viewport = new Viewport(bounds.width, bounds.height);\n }\n\n private handleChildrenChange(): void {\n this.invalidateFrame();\n }\n\n private async updatePropsFromViewer(): Promise<void> {\n const { frame } = this.viewer \|\| {};\n\n this.depthBuffer = await frame?.depthBuffer();\n this.camera = frame?.scene.camera;\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BHAaIoH5.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Viewport","constructor","width","height","this","center","Dimensions","dimensions","fromDimensions","transformNdcPointToViewport","ndc","Point","create","x","y","transformVectorToViewport","transformWorldToViewport","worldPt","projectionViewMatrix","Vector3","transformMatrix","transformPointToViewport","pt","image","scaleX","scaleY","calculateFrameScale","scale","transformPointToFrame","transformPointToWorldSpace","depthBuffer","fallbackNormalizedDepth","depthPt","ray","transformPointToRay","camera","getWorldPoint","transformScreenPointToNdc","isPerspective","origin","fromMatrixPosition","worldMatrix","lookAtPoint","transformNdcToWorldSpace","projectionMatrixInverse","direction","normalize","subtract","Ray","viewVector","screenPt","framePt","imageAttr","frameDimensions","calculateDrawRect","Rectangle","imageRect","viewport","fit","containFit"],"sources":["src/lib/types/viewport.ts"],"sourcesContent":["import {\n Dimensions,\n Matrix4,\n Point,\n Ray,\n Rectangle,\n Vector3,\n} from '@vertexvis/geometry';\n\nimport { DepthBuffer } from './depthBuffer';\nimport type { FrameCameraBase, FrameImageLike } from './frame';\n\n/*\n A `Viewport` represents the drawing area in the viewer.\n \n When a frame is received from the rendering pipeline, it might not be the\n * same dimensions of the viewport because of an interactive frame or because of\n * bandwidth limitations or other performance reasons.\n \n The viewport contains methods to scale an image to the viewport, as well as\n * translate 2D coordinates between the viewport and the frame.\n /\nexport class Viewport implements Dimensions.Dimensions {\n /\n The center point of the viewport.\n /\n public readonly center: Point.Point;\n\n public constructor(\n /\n The width of the viewport.\n /\n public readonly width: number,\n\n /\n The height of the viewport.\n /\n public readonly height: number\n ) {\n this.center = Dimensions.center(this.dimensions);\n }\n\n /\n Returns a new viewport with the given dimensions.\n * @param dimensions The dimensions of the viewport\n * @returns A new viewport.\n /\n public static fromDimensions(dimensions: Dimensions.Dimensions): Viewport {\n return new Viewport(dimensions.width, dimensions.height);\n }\n\n /\n Transforms a normalized device coordinate to a 2D point within the\n * viewport.\n \n @param ndc A 2D point in NDC.\n * @returns A 2D point in the coordinate space of the viewport.\n /\n public transformNdcPointToViewport(ndc: Point.Point): Point.Point {\n return Point.create(\n ndc.x this.center.x + this.center.x,\n -ndc.y * this.center.y + this.center.y\n );\n }\n\n /*\n Transforms a normalized device coordinate to a 2D point within the\n * viewport.\n \n @param ndc A 3D point in NDC.\n * @returns A 2D point in the coordinate space of the viewport.\n /\n public transformVectorToViewport(ndc: Vector3.Vector3): Point.Point {\n return this.transformNdcPointToViewport(ndc);\n }\n\n /\n Transforms a world point to 2D point in viewport space.\n \n @param worldPt The world point to transform.\n * @param projectionViewMatrix The projection matrix to transform a 3D point to 2D point.\n * @returns A point in viewport space.\n /\n public transformWorldToViewport(\n worldPt: Vector3.Vector3,\n projectionViewMatrix: Matrix4.Matrix4\n ): Point.Point {\n const ndc = Vector3.transformMatrix(worldPt, projectionViewMatrix);\n return this.transformVectorToViewport(ndc);\n }\n\n public transformPointToViewport(\n pt: Point.Point,\n image: FrameImageLike\n ): Point.Point {\n const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n return Point.scale(pt, 1 scaleX, 1 * scaleY);\n }\n\n /*\n Transforms a point in viewport coordinate space to a point in a frame's\n * coordinate space.\n \n @param pt A point in viewport coordinate space.\n * @param image An image of a frame.\n * @returns A point in the coordinate space of the frame.\n /\n public transformPointToFrame(\n pt: Point.Point,\n image: FrameImageLike\n ): Point.Point {\n const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n return Point.scale(pt, 1 / scaleX, 1 / scaleY);\n }\n\n /\n Transforms a point in viewport coordinates to a point in world space\n * coordinates. This method expects a depth buffer in order to compute a value\n * for the Z axis.\n \n @param pt A point in viewport coordinates.\n * @param depthBuffer A depth buffer for computing the Z axis.\n * @param fallbackNormalizedDepth A fallback value if the depth is the max\n * depth value, or cannot be determined.\n * @returns\n /\n public transformPointToWorldSpace(\n pt: Point.Point,\n depthBuffer: DepthBuffer,\n fallbackNormalizedDepth?: number\n ): Vector3.Vector3 {\n const depthPt = this.transformPointToFrame(pt, depthBuffer);\n const ray = this.transformPointToRay(pt, depthBuffer, depthBuffer.camera);\n return depthBuffer.getWorldPoint(depthPt, ray, fallbackNormalizedDepth);\n }\n\n /\n Transforms a point in viewport coordinates to a ray.\n \n For perspective cameras, the returned ray will have an\n * origin that is at the position of the camera with a direction\n * that is pointing into world space away from the camera.\n \n For orthographic cameras, the returned ray will have an\n * origin that is at the world point of viewport coordinate\n * with a direction that is pointing into world space away\n * from the camera.\n \n @param pt A point in viewport coordinates.\n * @param image An image of a frame.\n * @param camera A camera used to determine orientation of the scene.\n * @returns A ray\n /\n public transformPointToRay(\n pt: Point.Point,\n image: FrameImageLike,\n camera: FrameCameraBase\n ): Ray.Ray {\n const ndc = this.transformScreenPointToNdc(pt, image);\n\n // Calculate the ray depending on the camera type\n if (camera.isPerspective()) {\n const origin = Vector3.fromMatrixPosition(camera.worldMatrix);\n const lookAtPoint = Vector3.transformNdcToWorldSpace(\n Vector3.create(ndc.x, ndc.y, 0.5),\n camera.worldMatrix,\n camera.projectionMatrixInverse\n );\n const direction = Vector3.normalize(\n Vector3.subtract(lookAtPoint, origin)\n );\n return Ray.create({ origin, direction });\n } else {\n const origin = Vector3.transformNdcToWorldSpace(\n Vector3.create(ndc.x, ndc.y, 0),\n camera.worldMatrix,\n camera.projectionMatrixInverse\n );\n return Ray.create({\n origin,\n direction: Vector3.normalize(camera.viewVector),\n });\n }\n }\n\n /\n Maps a screen point to normalized device coordinates (NDC). A screen point\n * at 0,0 represents the top-left of the viewport.\n \n @param screenPt A screen point.\n /\n public transformScreenPointToNdc(\n screenPt: Point.Point,\n image: FrameImageLike\n ): Point.Point {\n const framePt = this.transformPointToFrame(screenPt, image);\n return Point.create(\n (framePt.x / image.imageAttr.frameDimensions.width) 2 - 1,\n -(framePt.y / image.imageAttr.frameDimensions.height) * 2 + 1\n );\n }\n\n /*\n Computes a rectangle that is scaled correctly to be drawn within the\n * viewport.\n \n @param image The image to be drawn.\n * @param imageDimensions The dimensions of the received image.\n * @returns A rectangle.\n */\n public calculateDrawRect(image: FrameImageLike): Rectangle.Rectangle {\n const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n return Rectangle.scale(image.imageAttr.imageRect, scaleX, scaleY);\n }\n\n private calculateFrameScale(image: FrameImageLike): Point.Point {\n const { frameDimensions: dimensions } = image.imageAttr;\n\n const imageRect = Rectangle.fromDimensions(dimensions);\n const viewport = Rectangle.fromDimensions(this.dimensions);\n const fit = Rectangle.containFit(viewport, imageRect);\n\n const scaleX = fit.width / imageRect.width;\n const scaleY = fit.height / imageRect.height;\n\n return Point.create(scaleX, scaleY);\n }\n\n public get dimensions(): Dimensions.Dimensions {\n return Dimensions.create(this.width, this.height);\n }\n}\n"],"mappings":";;;sEAsBaA,EAMX,WAAAC,CAIkBC,EAKAC,GALAC,KAAAF,QAKAE,KAAAD,SAEhBC,KAAKC,OAASC,EAAWD,OAAOD,KAAKG,W,CAQhC,qBAAOC,CAAeD,GAC3B,OAAO,IAAIP,EAASO,EAAWL,MAAOK,EAAWJ,O,CAU5C,2BAAAM,CAA4BC,GACjC,OAAOC,EAAMC,OACXF,EAAIG,EAAIT,KAAKC,OAAOQ,EAAIT,KAAKC,OAAOQ,GACnCH,EAAII,EAAIV,KAAKC,OAAOS,EAAIV,KAAKC,OAAOS,E,CAWlC,yBAAAC,CAA0BL,GAC/B,OAAON,KAAKK,4BAA4BC,E,CAUnC,wBAAAM,CACLC,EACAC,GAEA,MAAMR,EAAMS,EAAQC,gBAAgBH,EAASC,GAC7C,OAAOd,KAAKW,0BAA0BL,E,CAGjC,wBAAAW,CACLC,EACAC,GAEA,MAAQV,EAAGW,EAAQV,EAAGW,GAAWrB,KAAKsB,oBAAoBH,GAC1D,OAAOZ,EAAMgB,MAAML,EAAI,EAAIE,EAAQ,EAAIC,E,CAWlC,qBAAAG,CACLN,EACAC,GAEA,MAAQV,EAAGW,EAAQV,EAAGW,GAAWrB,KAAKsB,oBAAoBH,GAC1D,OAAOZ,EAAMgB,MAAML,EAAI,EAAIE,EAAQ,EAAIC,E,CAclC,0BAAAI,CACLP,EACAQ,EACAC,GAEA,MAAMC,EAAU5B,KAAKwB,sBAAsBN,EAAIQ,GAC/C,MAAMG,EAAM7B,KAAK8B,oBAAoBZ,EAAIQ,EAAaA,EAAYK,QAClE,OAAOL,EAAYM,cAAcJ,EAASC,EAAKF,E,CAoB1C,mBAAAG,CACLZ,EACAC,EACAY,GAEA,MAAMzB,EAAMN,KAAKiC,0BAA0Bf,EAAIC,GAG/C,GAAIY,EAAOG,gBAAiB,CAC1B,MAAMC,EAASpB,EAAQqB,mBAAmBL,EAAOM,aACjD,MAAMC,EAAcvB,EAAQwB,yBAC1BxB,EAAQP,OAAOF,EAAIG,EAAGH,EAAII,EAAG,IAC7BqB,EAAOM,YACPN,EAAOS,yBAET,MAAMC,EAAY1B,EAAQ2B,UACxB3B,EAAQ4B,SAASL,EAAaH,IAEhC,OAAOS,EAAIpC,OAAO,CAAE2B,SAAQM,a,KACvB,CACL,MAAMN,EAASpB,EAAQwB,yBACrBxB,EAAQP,OAAOF,EAAIG,EAAGH,EAAII,EAAG,GAC7BqB,EAAOM,YACPN,EAAOS,yBAET,OAAOI,EAAIpC,OAAO,CAChB2B,SACAM,UAAW1B,EAAQ2B,UAAUX,EAAOc,a,EAWnC,yBAAAZ,CACLa,EACA3B,GAEA,MAAM4B,EAAU/C,KAAKwB,sBAAsBsB,EAAU3B,GACrD,OAAOZ,EAAMC,OACVuC,EAAQtC,EAAIU,EAAM6B,UAAUC,gBAAgBnD,MAAS,EAAI,IACxDiD,EAAQrC,EAAIS,EAAM6B,UAAUC,gBAAgBlD,QAAU,EAAI,E,CAYzD,iBAAAmD,CAAkB/B,GACvB,MAAQV,EAAGW,EAAQV,EAAGW,GAAWrB,KAAKsB,oBAAoBH,GAC1D,OAAOgC,EAAU5B,MAAMJ,EAAM6B,UAAUI,UAAWhC,EAAQC,E,CAGpD,mBAAAC,CAAoBH,GAC1B,MAAQ8B,gBAAiB9C,GAAegB,EAAM6B,UAE9C,MAAMI,EAAYD,EAAU/C,eAAeD,GAC3C,MAAMkD,EAAWF,EAAU/C,eAAeJ,KAAKG,YAC/C,MAAMmD,EAAMH,EAAUI,WAAWF,EAAUD,GAE3C,MAAMhC,EAASkC,EAAIxD,MAAQsD,EAAUtD,MACrC,MAAMuB,EAASiC,EAAIvD,OAASqD,EAAUrD,OAEtC,OAAOQ,EAAMC,OAAOY,EAAQC,E,CAG9B,cAAWlB,GACT,OAAOD,EAAWM,OAAOR,KAAKF,MAAOE,KAAKD,O","ignoreList":[]}
1	+ {"version":3,"names":["Viewport","constructor","width","height","this","center","Dimensions","dimensions","fromDimensions","transformNdcPointToViewport","ndc","Point","create","x","y","transformVectorToViewport","transformWorldToViewport","worldPt","projectionViewMatrix","Vector3","transformMatrix","transformPointToViewport","pt","image","scaleX","scaleY","calculateFrameScale","scale","transformPointToFrame","transformPointToWorldSpace","depthBuffer","fallbackNormalizedDepth","depthPt","ray","transformPointToRay","camera","getWorldPoint","transformScreenPointToNdc","isPerspective","origin","fromMatrixPosition","worldMatrix","lookAtPoint","transformNdcToWorldSpace","projectionMatrixInverse","direction","normalize","subtract","Ray","viewVector","screenPt","framePt","imageAttr","frameDimensions","calculateDrawRect","Rectangle","imageRect","viewport","fit","containFit"],"sources":["src/lib/types/viewport.ts"],"sourcesContent":["import {\n Dimensions,\n Matrix4,\n Point,\n Ray,\n Rectangle,\n Vector3,\n} from '@vertexvis/geometry';\n\nimport { DepthBuffer } from './depthBuffer';\nimport type { FrameCameraBase, FrameImageLike } from './frame';\n\n/*\n A `Viewport` represents the drawing area in the viewer.\n \n When a frame is received from the rendering pipeline, it might not be the\n * same dimensions of the viewport because of an interactive frame or because of\n * bandwidth limitations or other performance reasons.\n \n The viewport contains methods to scale an image to the viewport, as well as\n * translate 2D coordinates between the viewport and the frame.\n /\nexport class Viewport implements Dimensions.Dimensions {\n /\n The center point of the viewport.\n /\n public readonly center: Point.Point;\n\n public constructor(\n /\n The width of the viewport.\n /\n public readonly width: number,\n\n /\n The height of the viewport.\n /\n public readonly height: number,\n ) {\n this.center = Dimensions.center(this.dimensions);\n }\n\n /\n Returns a new viewport with the given dimensions.\n * @param dimensions The dimensions of the viewport\n * @returns A new viewport.\n /\n public static fromDimensions(dimensions: Dimensions.Dimensions): Viewport {\n return new Viewport(dimensions.width, dimensions.height);\n }\n\n /\n Transforms a normalized device coordinate to a 2D point within the\n * viewport.\n \n @param ndc A 2D point in NDC.\n * @returns A 2D point in the coordinate space of the viewport.\n /\n public transformNdcPointToViewport(ndc: Point.Point): Point.Point {\n return Point.create(\n ndc.x this.center.x + this.center.x,\n -ndc.y * this.center.y + this.center.y,\n );\n }\n\n /*\n Transforms a normalized device coordinate to a 2D point within the\n * viewport.\n \n @param ndc A 3D point in NDC.\n * @returns A 2D point in the coordinate space of the viewport.\n /\n public transformVectorToViewport(ndc: Vector3.Vector3): Point.Point {\n return this.transformNdcPointToViewport(ndc);\n }\n\n /\n Transforms a world point to 2D point in viewport space.\n \n @param worldPt The world point to transform.\n * @param projectionViewMatrix The projection matrix to transform a 3D point to 2D point.\n * @returns A point in viewport space.\n /\n public transformWorldToViewport(\n worldPt: Vector3.Vector3,\n projectionViewMatrix: Matrix4.Matrix4,\n ): Point.Point {\n const ndc = Vector3.transformMatrix(worldPt, projectionViewMatrix);\n return this.transformVectorToViewport(ndc);\n }\n\n public transformPointToViewport(\n pt: Point.Point,\n image: FrameImageLike,\n ): Point.Point {\n const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n return Point.scale(pt, 1 scaleX, 1 * scaleY);\n }\n\n /*\n Transforms a point in viewport coordinate space to a point in a frame's\n * coordinate space.\n \n @param pt A point in viewport coordinate space.\n * @param image An image of a frame.\n * @returns A point in the coordinate space of the frame.\n /\n public transformPointToFrame(\n pt: Point.Point,\n image: FrameImageLike,\n ): Point.Point {\n const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n return Point.scale(pt, 1 / scaleX, 1 / scaleY);\n }\n\n /\n Transforms a point in viewport coordinates to a point in world space\n * coordinates. This method expects a depth buffer in order to compute a value\n * for the Z axis.\n \n @param pt A point in viewport coordinates.\n * @param depthBuffer A depth buffer for computing the Z axis.\n * @param fallbackNormalizedDepth A fallback value if the depth is the max\n * depth value, or cannot be determined.\n * @returns\n /\n public transformPointToWorldSpace(\n pt: Point.Point,\n depthBuffer: DepthBuffer,\n fallbackNormalizedDepth?: number,\n ): Vector3.Vector3 {\n const depthPt = this.transformPointToFrame(pt, depthBuffer);\n const ray = this.transformPointToRay(pt, depthBuffer, depthBuffer.camera);\n return depthBuffer.getWorldPoint(depthPt, ray, fallbackNormalizedDepth);\n }\n\n /\n Transforms a point in viewport coordinates to a ray.\n \n For perspective cameras, the returned ray will have an\n * origin that is at the position of the camera with a direction\n * that is pointing into world space away from the camera.\n \n For orthographic cameras, the returned ray will have an\n * origin that is at the world point of viewport coordinate\n * with a direction that is pointing into world space away\n * from the camera.\n \n @param pt A point in viewport coordinates.\n * @param image An image of a frame.\n * @param camera A camera used to determine orientation of the scene.\n * @returns A ray\n /\n public transformPointToRay(\n pt: Point.Point,\n image: FrameImageLike,\n camera: FrameCameraBase,\n ): Ray.Ray {\n const ndc = this.transformScreenPointToNdc(pt, image);\n\n // Calculate the ray depending on the camera type\n if (camera.isPerspective()) {\n const origin = Vector3.fromMatrixPosition(camera.worldMatrix);\n const lookAtPoint = Vector3.transformNdcToWorldSpace(\n Vector3.create(ndc.x, ndc.y, 0.5),\n camera.worldMatrix,\n camera.projectionMatrixInverse,\n );\n const direction = Vector3.normalize(\n Vector3.subtract(lookAtPoint, origin),\n );\n return Ray.create({ origin, direction });\n } else {\n const origin = Vector3.transformNdcToWorldSpace(\n Vector3.create(ndc.x, ndc.y, 0),\n camera.worldMatrix,\n camera.projectionMatrixInverse,\n );\n return Ray.create({\n origin,\n direction: Vector3.normalize(camera.viewVector),\n });\n }\n }\n\n /\n Maps a screen point to normalized device coordinates (NDC). A screen point\n * at 0,0 represents the top-left of the viewport.\n \n @param screenPt A screen point.\n /\n public transformScreenPointToNdc(\n screenPt: Point.Point,\n image: FrameImageLike,\n ): Point.Point {\n const framePt = this.transformPointToFrame(screenPt, image);\n return Point.create(\n (framePt.x / image.imageAttr.frameDimensions.width) 2 - 1,\n -(framePt.y / image.imageAttr.frameDimensions.height) * 2 + 1,\n );\n }\n\n /*\n Computes a rectangle that is scaled correctly to be drawn within the\n * viewport.\n \n @param image The image to be drawn.\n * @param imageDimensions The dimensions of the received image.\n * @returns A rectangle.\n */\n public calculateDrawRect(image: FrameImageLike): Rectangle.Rectangle {\n const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n return Rectangle.scale(image.imageAttr.imageRect, scaleX, scaleY);\n }\n\n private calculateFrameScale(image: FrameImageLike): Point.Point {\n const { frameDimensions: dimensions } = image.imageAttr;\n\n const imageRect = Rectangle.fromDimensions(dimensions);\n const viewport = Rectangle.fromDimensions(this.dimensions);\n const fit = Rectangle.containFit(viewport, imageRect);\n\n const scaleX = fit.width / imageRect.width;\n const scaleY = fit.height / imageRect.height;\n\n return Point.create(scaleX, scaleY);\n }\n\n public get dimensions(): Dimensions.Dimensions {\n return Dimensions.create(this.width, this.height);\n }\n}\n"],"mappings":";;;sEAsBaA,EAMX,WAAAC,CAIkBC,EAKAC,GALAC,KAAAF,QAKAE,KAAAD,SAEhBC,KAAKC,OAASC,EAAWD,OAAOD,KAAKG,W,CAQhC,qBAAOC,CAAeD,GAC3B,OAAO,IAAIP,EAASO,EAAWL,MAAOK,EAAWJ,O,CAU5C,2BAAAM,CAA4BC,GACjC,OAAOC,EAAMC,OACXF,EAAIG,EAAIT,KAAKC,OAAOQ,EAAIT,KAAKC,OAAOQ,GACnCH,EAAII,EAAIV,KAAKC,OAAOS,EAAIV,KAAKC,OAAOS,E,CAWlC,yBAAAC,CAA0BL,GAC/B,OAAON,KAAKK,4BAA4BC,E,CAUnC,wBAAAM,CACLC,EACAC,GAEA,MAAMR,EAAMS,EAAQC,gBAAgBH,EAASC,GAC7C,OAAOd,KAAKW,0BAA0BL,E,CAGjC,wBAAAW,CACLC,EACAC,GAEA,MAAQV,EAAGW,EAAQV,EAAGW,GAAWrB,KAAKsB,oBAAoBH,GAC1D,OAAOZ,EAAMgB,MAAML,EAAI,EAAIE,EAAQ,EAAIC,E,CAWlC,qBAAAG,CACLN,EACAC,GAEA,MAAQV,EAAGW,EAAQV,EAAGW,GAAWrB,KAAKsB,oBAAoBH,GAC1D,OAAOZ,EAAMgB,MAAML,EAAI,EAAIE,EAAQ,EAAIC,E,CAclC,0BAAAI,CACLP,EACAQ,EACAC,GAEA,MAAMC,EAAU5B,KAAKwB,sBAAsBN,EAAIQ,GAC/C,MAAMG,EAAM7B,KAAK8B,oBAAoBZ,EAAIQ,EAAaA,EAAYK,QAClE,OAAOL,EAAYM,cAAcJ,EAASC,EAAKF,E,CAoB1C,mBAAAG,CACLZ,EACAC,EACAY,GAEA,MAAMzB,EAAMN,KAAKiC,0BAA0Bf,EAAIC,GAG/C,GAAIY,EAAOG,gBAAiB,CAC1B,MAAMC,EAASpB,EAAQqB,mBAAmBL,EAAOM,aACjD,MAAMC,EAAcvB,EAAQwB,yBAC1BxB,EAAQP,OAAOF,EAAIG,EAAGH,EAAII,EAAG,IAC7BqB,EAAOM,YACPN,EAAOS,yBAET,MAAMC,EAAY1B,EAAQ2B,UACxB3B,EAAQ4B,SAASL,EAAaH,IAEhC,OAAOS,EAAIpC,OAAO,CAAE2B,SAAQM,a,KACvB,CACL,MAAMN,EAASpB,EAAQwB,yBACrBxB,EAAQP,OAAOF,EAAIG,EAAGH,EAAII,EAAG,GAC7BqB,EAAOM,YACPN,EAAOS,yBAET,OAAOI,EAAIpC,OAAO,CAChB2B,SACAM,UAAW1B,EAAQ2B,UAAUX,EAAOc,a,EAWnC,yBAAAZ,CACLa,EACA3B,GAEA,MAAM4B,EAAU/C,KAAKwB,sBAAsBsB,EAAU3B,GACrD,OAAOZ,EAAMC,OACVuC,EAAQtC,EAAIU,EAAM6B,UAAUC,gBAAgBnD,MAAS,EAAI,IACxDiD,EAAQrC,EAAIS,EAAM6B,UAAUC,gBAAgBlD,QAAU,EAAI,E,CAYzD,iBAAAmD,CAAkB/B,GACvB,MAAQV,EAAGW,EAAQV,EAAGW,GAAWrB,KAAKsB,oBAAoBH,GAC1D,OAAOgC,EAAU5B,MAAMJ,EAAM6B,UAAUI,UAAWhC,EAAQC,E,CAGpD,mBAAAC,CAAoBH,GAC1B,MAAQ8B,gBAAiB9C,GAAegB,EAAM6B,UAE9C,MAAMI,EAAYD,EAAU/C,eAAeD,GAC3C,MAAMkD,EAAWF,EAAU/C,eAAeJ,KAAKG,YAC/C,MAAMmD,EAAMH,EAAUI,WAAWF,EAAUD,GAE3C,MAAMhC,EAASkC,EAAIxD,MAAQsD,EAAUtD,MACrC,MAAMuB,EAASiC,EAAIvD,OAASqD,EAAUrD,OAEtC,OAAOQ,EAAMC,OAAOY,EAAQC,E,CAG9B,cAAWlB,GACT,OAAOD,EAAWM,OAAOR,KAAKF,MAAOE,KAAKD,O","ignoreList":[]}

package/dist/components/{p-Doltf1wO.js → p-BOJJZ1cN.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as e,F as t,t as r,p as s,H as a,e as n}from"./p-Bb32XUUS.js";import"./p-D12q-fpW.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-BoB09nlv.js";import"./p-B9R0QWr4.js";import{M as i}from"./p-CkjXRDNL.js";import{l as o,p as l}from"./p-DDQcM-So.js";import{d as m}from"./p-DNtS2F8J.js";function v(e,t){const{camera:r,viewport:s}=t;const a=r.isPointBehindNear(e.start);const n=r.isPointBehindNear(e.end);if(a||n){const t=r.intersectLineWithNear(e);const i=o.create({start:a&&t!=null?t:e.start,end:n&&t!=null?t:e.end});const l=o.transformMatrix(i,r.projectionViewMatrix);return{start:s.transformVectorToViewport(l.start),end:s.transformVectorToViewport(l.end),hideStart:a,hideEnd:n}}else{const t=o.transformMatrix(e,r.projectionViewMatrix);return{start:s.transformVectorToViewport(t.start),end:s.transformVectorToViewport(t.end),hideStart:false,hideEnd:false}}}function c(e,t,r){const{start:s,end:a,hideStart:n,hideEnd:i}=v(e,r);const o=l.lerp(s,a,.5);const m=t!=="none"?d(e,t,r):undefined;return{startPt:s,endPt:a,labelPt:o,indicatorPt:m,hideStart:n,hideEnd:i}}function d(e,t,r){return r.viewport.transformWorldToViewport(t==="start"?e.start:e.end,r.camera.projectionViewMatrix)}const u=({overlay:t,viewport:r,camera:s})=>{if(t.type==="line"){return e(h,{overlay:t,viewport:r,camera:s})}else{return e(p,{overlay:t,viewport:r,camera:s})}};const h=({overlay:t,camera:r,viewport:s})=>{const{start:a,end:n}=v(t,{camera:r,viewport:s});return e("vertex-viewer-measurement-line",{class:"measurement-line",start:a,end:n})};const p=({overlay:{x:r,y:s,z:a},camera:n,viewport:i})=>{const o={camera:n,viewport:i};const{start:l,end:m}=v(r,o);const{start:c,end:d}=v(s,o);const{start:u,end:h}=v(a,o);return e(t,null,e("vertex-viewer-measurement-line",{class:"measurement-line distance-vector-x",start:l,end:m}),e("vertex-viewer-measurement-line",{class:"measurement-line distance-vector-y",start:c,end:d}),e("vertex-viewer-measurement-line",{class:"measurement-line distance-vector-z",start:u,end:h}))};const w=()=>`:host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;--viewer-measurement-overlays-x-axis-color:var(--x-axis-color);--viewer-measurement-overlays-y-axis-color:var(--y-axis-color);--viewer-measurement-overlays-z-axis-color:var(--z-axis-color)}.measurement-line{position:absolute;width:100%;height:100%}.measurement-line.distance-vector-x{--viewer-measurement-line-fill:var(     --viewer-measurement-overlays-x-axis-color   )}.measurement-line.distance-vector-y{--viewer-measurement-line-fill:var(     --viewer-measurement-overlays-y-axis-color   )}.measurement-line.distance-vector-z{--viewer-measurement-line-fill:var(     --viewer-measurement-overlays-z-axis-color   )}`;const f=s(class t extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.measurementOverlays=new i;this.overlays=[];this.updateCamera=()=>{var e,t;this.camera=(t=(e=this.viewer)===null||e===void 0?void 0:e.frame)===null||t===void 0?void 0:t.scene.camera}}handleMeasurementOverlaysChanged(){this.removeModelListeners();this.addModelListeners();this.updateOverlays()}handleViewerChanged(e,t){this.removeViewerListeners(t);this.addViewerListeners();this.updateCamera()}componentWillLoad(){this.addModelListeners();this.addViewerListeners();this.updateOverlays();this.updateCamera()}addModelListeners(){this.onOverlaysChangedListener=this.measurementOverlays.onOverlaysChanged((()=>this.updateOverlays()))}removeModelListeners(){var e;(e=this.onOverlaysChangedListener)===null||e===void 0?void 0:e.dispose();this.onOverlaysChangedListener=undefined}addViewerListeners(){var e;(e=this.viewer)===null||e===void 0?void 0:e.addEventListener("frameReceived",this.updateCamera)}removeViewerListeners(e){e===null||e===void 0?void 0:e.removeEventListener("frameReceived",this.updateCamera)}updateOverlays(){this.overlays=this.measurementOverlays.getOverlays()}render(){return e(n,{key:"fbda189899fa87c57b11615693d1319eee341fea"},this.overlays.map((t=>{if(this.camera!=null&&this.viewer!=null){return e(u,{overlay:t,viewport:this.viewer.viewport,camera:this.camera})}})))}static get watchers(){return{measurementOverlays:[{handleMeasurementOverlaysChanged:0}],viewer:[{handleViewerChanged:0}]}}static get style(){return w()}},[1,"vertex-viewer-measurement-overlays",{measurementOverlays:[16],camera:[1040],viewer:[16],overlays:[32]},undefined,{measurementOverlays:[{handleMeasurementOverlaysChanged:0}],viewer:[{handleViewerChanged:0}]}]);function y(){if(typeof customElements==="undefined"){return}const e=["vertex-viewer-measurement-overlays","vertex-viewer-measurement-line"];e.forEach((e=>{switch(e){case"vertex-viewer-measurement-overlays":if(!customElements.get(r(e))){customElements.define(r(e),f)}break;case"vertex-viewer-measurement-line":if(!customElements.get(r(e))){m()}break}}))}y();export{f as V,y as d,c as g};
-//# sourceMappingURL=p-Doltf1wO.js.map
+import{h as e,F as t,t as r,p as s,H as a,e as n}from"./p-Bb32XUUS.js";import"./p-D12q-fpW.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-BoB09nlv.js";import"./p-B9R0QWr4.js";import{M as i}from"./p-CkjXRDNL.js";import{l as o,p as l}from"./p-DDQcM-So.js";import{d as m}from"./p-B156bTbY.js";function v(e,t){const{camera:r,viewport:s}=t;const a=r.isPointBehindNear(e.start);const n=r.isPointBehindNear(e.end);if(a||n){const t=r.intersectLineWithNear(e);const i=o.create({start:a&&t!=null?t:e.start,end:n&&t!=null?t:e.end});const l=o.transformMatrix(i,r.projectionViewMatrix);return{start:s.transformVectorToViewport(l.start),end:s.transformVectorToViewport(l.end),hideStart:a,hideEnd:n}}else{const t=o.transformMatrix(e,r.projectionViewMatrix);return{start:s.transformVectorToViewport(t.start),end:s.transformVectorToViewport(t.end),hideStart:false,hideEnd:false}}}function c(e,t,r){const{start:s,end:a,hideStart:n,hideEnd:i}=v(e,r);const o=l.lerp(s,a,.5);const m=t!=="none"?d(e,t,r):undefined;return{startPt:s,endPt:a,labelPt:o,indicatorPt:m,hideStart:n,hideEnd:i}}function d(e,t,r){return r.viewport.transformWorldToViewport(t==="start"?e.start:e.end,r.camera.projectionViewMatrix)}const u=({overlay:t,viewport:r,camera:s})=>{if(t.type==="line"){return e(h,{overlay:t,viewport:r,camera:s})}else{return e(p,{overlay:t,viewport:r,camera:s})}};const h=({overlay:t,camera:r,viewport:s})=>{const{start:a,end:n}=v(t,{camera:r,viewport:s});return e("vertex-viewer-measurement-line",{class:"measurement-line",start:a,end:n})};const p=({overlay:{x:r,y:s,z:a},camera:n,viewport:i})=>{const o={camera:n,viewport:i};const{start:l,end:m}=v(r,o);const{start:c,end:d}=v(s,o);const{start:u,end:h}=v(a,o);return e(t,null,e("vertex-viewer-measurement-line",{class:"measurement-line distance-vector-x",start:l,end:m}),e("vertex-viewer-measurement-line",{class:"measurement-line distance-vector-y",start:c,end:d}),e("vertex-viewer-measurement-line",{class:"measurement-line distance-vector-z",start:u,end:h}))};const w=()=>`:host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;--viewer-measurement-overlays-x-axis-color:var(--x-axis-color);--viewer-measurement-overlays-y-axis-color:var(--y-axis-color);--viewer-measurement-overlays-z-axis-color:var(--z-axis-color)}.measurement-line{position:absolute;width:100%;height:100%}.measurement-line.distance-vector-x{--viewer-measurement-line-fill:var(     --viewer-measurement-overlays-x-axis-color   )}.measurement-line.distance-vector-y{--viewer-measurement-line-fill:var(     --viewer-measurement-overlays-y-axis-color   )}.measurement-line.distance-vector-z{--viewer-measurement-line-fill:var(     --viewer-measurement-overlays-z-axis-color   )}`;const f=s(class t extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.measurementOverlays=new i;this.overlays=[];this.updateCamera=()=>{var e,t;this.camera=(t=(e=this.viewer)===null||e===void 0?void 0:e.frame)===null||t===void 0?void 0:t.scene.camera}}handleMeasurementOverlaysChanged(){this.removeModelListeners();this.addModelListeners();this.updateOverlays()}handleViewerChanged(e,t){this.removeViewerListeners(t);this.addViewerListeners();this.updateCamera()}componentWillLoad(){this.addModelListeners();this.addViewerListeners();this.updateOverlays();this.updateCamera()}addModelListeners(){this.onOverlaysChangedListener=this.measurementOverlays.onOverlaysChanged((()=>this.updateOverlays()))}removeModelListeners(){var e;(e=this.onOverlaysChangedListener)===null||e===void 0?void 0:e.dispose();this.onOverlaysChangedListener=undefined}addViewerListeners(){var e;(e=this.viewer)===null||e===void 0?void 0:e.addEventListener("frameReceived",this.updateCamera)}removeViewerListeners(e){e===null||e===void 0?void 0:e.removeEventListener("frameReceived",this.updateCamera)}updateOverlays(){this.overlays=this.measurementOverlays.getOverlays()}render(){return e(n,{key:"965a86f907cfe18797db57f488d38ac29bae8682"},this.overlays.map((t=>{if(this.camera!=null&&this.viewer!=null){return e(u,{overlay:t,viewport:this.viewer.viewport,camera:this.camera})}})))}static get watchers(){return{measurementOverlays:[{handleMeasurementOverlaysChanged:0}],viewer:[{handleViewerChanged:0}]}}static get style(){return w()}},[1,"vertex-viewer-measurement-overlays",{measurementOverlays:[16],camera:[1040],viewer:[16],overlays:[32]},undefined,{measurementOverlays:[{handleMeasurementOverlaysChanged:0}],viewer:[{handleViewerChanged:0}]}]);function y(){if(typeof customElements==="undefined"){return}const e=["vertex-viewer-measurement-overlays","vertex-viewer-measurement-line"];e.forEach((e=>{switch(e){case"vertex-viewer-measurement-overlays":if(!customElements.get(r(e))){customElements.define(r(e),f)}break;case"vertex-viewer-measurement-line":if(!customElements.get(r(e))){m()}break}}))}y();export{f as V,y as d,c as g};
+//# sourceMappingURL=p-BOJJZ1cN.js.map

package/dist/components/p-BOJJZ1cN.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["translateWorldLineToViewport","line","params","camera","viewport","isStartBehindCamera","isPointBehindNear","start","isEndBehindCamera","end","pt","intersectLineWithNear","newLine","Line3","create","ndc","transformMatrix","projectionViewMatrix","transformVectorToViewport","hideStart","hideEnd","getViewingElementPositions","interactingAnchor","startPt","endPt","labelPt","Point","lerp","indicatorPt","getIndicatorPtForAnchor","undefined","anchor","transformWorldToViewport","MeasurementOverlayView","overlay","type","h","LineOverlayView","DistanceVectorOverlayView","class","x","y","z","xs","xe","ys","ye","zs","ze","Fragment","viewerMeasurementOverlaysCss","ViewerMeasurementOverlays","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","measurementOverlays","MeasurementOverlayManager","overlays","updateCamera","_b","_a","viewer","frame","scene","handleMeasurementOverlaysChanged","removeModelListeners","addModelListeners","updateOverlays","handleViewerChanged","newViewer","oldViewer","removeViewerListeners","addViewerListeners","componentWillLoad","onOverlaysChangedListener","onOverlaysChanged","dispose","addEventListener","removeEventListener","getOverlays","render","Host","key","map"],"sources":["src/components/viewer-measurement-distance/utils.ts","src/components/viewer-measurement-overlays/viewer-measurement-overlays-components.tsx","src/components/viewer-measurement-overlays/viewer-measurement-overlays.css?tag=vertex-viewer-measurement-overlays&encapsulation=shadow","src/components/viewer-measurement-overlays/viewer-measurement-overlays.tsx"],"sourcesContent":["import { Line3, Point } from '@vertexvis/geometry';\n\nimport { FrameCameraBase, Viewport } from '../../lib/types';\n\nexport type Anchor = 'start' | 'end';\n\nexport interface MeasurementElementPositions {\n startPt?: Point.Point;\n endPt?: Point.Point;\n labelPt?: Point.Point;\n indicatorPt?: Point.Point;\n hideStart?: boolean;\n hideEnd?: boolean;\n}\n\nexport interface RenderParams {\n viewport: Viewport;\n camera: FrameCameraBase;\n}\n\nexport function translateWorldLineToViewport(\n line: Line3.Line3,\n params: RenderParams,\n): {\n start: Point.Point;\n end: Point.Point;\n hideStart: boolean;\n hideEnd: boolean;\n} {\n const { camera, viewport } = params;\n\n const isStartBehindCamera = camera.isPointBehindNear(line.start);\n const isEndBehindCamera = camera.isPointBehindNear(line.end);\n\n // If either the start or end of the line is behind the camera, then we need\n // to truncate the line so it can be presented correctly. You cannot use a\n // projection matrix to compute a point behind the near plane.\n if (isStartBehindCamera || isEndBehindCamera) {\n const pt = camera.intersectLineWithNear(line);\n const newLine = Line3.create({\n start: isStartBehindCamera && pt != null ? pt : line.start,\n end: isEndBehindCamera && pt != null ? pt : line.end,\n });\n\n const ndc = Line3.transformMatrix(newLine, camera.projectionViewMatrix);\n return {\n start: viewport.transformVectorToViewport(ndc.start),\n end: viewport.transformVectorToViewport(ndc.end),\n hideStart: isStartBehindCamera,\n hideEnd: isEndBehindCamera,\n };\n } else {\n const ndc = Line3.transformMatrix(line, camera.projectionViewMatrix);\n return {\n start: viewport.transformVectorToViewport(ndc.start),\n end: viewport.transformVectorToViewport(ndc.end),\n hideStart: false,\n hideEnd: false,\n };\n }\n}\n\nexport function getViewingElementPositions(\n line: Line3.Line3,\n interactingAnchor: Anchor | 'none',\n params: RenderParams,\n): MeasurementElementPositions {\n const {\n start: startPt,\n end: endPt,\n hideStart,\n hideEnd,\n } = translateWorldLineToViewport(line, params);\n const labelPt = Point.lerp(startPt, endPt, 0.5);\n const indicatorPt =\n interactingAnchor !== 'none'\n ? getIndicatorPtForAnchor(line, interactingAnchor, params)\n : undefined;\n\n return { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd };\n}\n\nexport function isVertexViewerDistanceMeasurement(\n el: unknown,\n): el is HTMLVertexViewerMeasurementDistanceElement {\n return (\n el instanceof HTMLElement &&\n el.nodeName === 'VERTEX-VIEWER-MEASUREMENT-DISTANCE'\n );\n}\n\nfunction getIndicatorPtForAnchor(\n line: Line3.Line3,\n anchor: Anchor,\n params: RenderParams,\n): Point.Point {\n return params.viewport.transformWorldToViewport(\n anchor === 'start' ? line.start : line.end,\n params.camera.projectionViewMatrix,\n );\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\n\nimport {\n DistanceVectorOverlay,\n LineOverlay,\n MeasurementOverlay,\n} from '../../lib/measurement';\nimport { FrameCameraBase, Viewport } from '../../lib/types';\nimport {\n RenderParams,\n translateWorldLineToViewport,\n} from '../viewer-measurement-distance/utils';\n\ninterface MeasurementOverlayViewProps<O extends MeasurementOverlay> {\n overlay: O;\n viewport: Viewport;\n camera: FrameCameraBase;\n}\n\nexport const MeasurementOverlayView: FunctionalComponent<\n MeasurementOverlayViewProps<MeasurementOverlay>\n> = ({ overlay, viewport, camera }) => {\n if (overlay.type === 'line') {\n return (\n <LineOverlayView overlay={overlay} viewport={viewport} camera={camera} />\n );\n } else {\n return (\n <DistanceVectorOverlayView\n overlay={overlay}\n viewport={viewport}\n camera={camera}\n />\n );\n }\n};\n\nconst LineOverlayView: FunctionalComponent<\n MeasurementOverlayViewProps<LineOverlay>\n> = ({ overlay, camera, viewport }) => {\n const { start, end } = translateWorldLineToViewport(overlay, {\n camera,\n viewport,\n });\n\n return (\n <vertex-viewer-measurement-line\n class=\"measurement-line\"\n start={start}\n end={end}\n />\n );\n};\n\nconst DistanceVectorOverlayView: FunctionalComponent<\n MeasurementOverlayViewProps<DistanceVectorOverlay>\n> = ({ overlay: { x, y, z }, camera, viewport }) => {\n const params: RenderParams = { camera, viewport };\n\n const { start: xs, end: xe } = translateWorldLineToViewport(x, params);\n const { start: ys, end: ye } = translateWorldLineToViewport(y, params);\n const { start: zs, end: ze } = translateWorldLineToViewport(z, params);\n\n return (\n <Fragment>\n <vertex-viewer-measurement-line\n class=\"measurement-line distance-vector-x\"\n start={xs}\n end={xe}\n />\n <vertex-viewer-measurement-line\n class=\"measurement-line distance-vector-y\"\n start={ys}\n end={ye}\n />\n <vertex-viewer-measurement-line\n class=\"measurement-line distance-vector-z\"\n start={zs}\n end={ze}\n />\n </Fragment>\n );\n};\n",":host {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n\n /**\n * @prop --viewer-measurement-overlays-x-axis-color: A CSS color for overlays\n * representing the X axis.\n */\n --viewer-measurement-overlays-x-axis-color: var(--x-axis-color);\n\n /**\n * @prop --viewer-measurement-overlays-y-axis-color: A CSS color for overlays\n * representing the Y axis.\n */\n --viewer-measurement-overlays-y-axis-color: var(--y-axis-color);\n\n /**\n * @prop --viewer-measurement-overlays-z-axis-color: A CSS color for overlays\n * representing the Z axis.\n */\n --viewer-measurement-overlays-z-axis-color: var(--z-axis-color);\n}\n\n.measurement-line {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.measurement-line.distance-vector-x {\n --viewer-measurement-line-fill: var(\n --viewer-measurement-overlays-x-axis-color\n );\n}\n\n.measurement-line.distance-vector-y {\n --viewer-measurement-line-fill: var(\n --viewer-measurement-overlays-y-axis-color\n );\n}\n\n.measurement-line.distance-vector-z {\n --viewer-measurement-line-fill: var(\n --viewer-measurement-overlays-z-axis-color\n );\n}\n","/* eslint-disable @typescript-eslint/member-ordering */\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\n\nimport {\n MeasurementOverlay,\n MeasurementOverlayManager,\n} from '../../lib/measurement';\nimport { FrameCameraBase } from '../../lib/types';\nimport { MeasurementOverlayView } from './viewer-measurement-overlays-components';\n\n@Component({\n tag: 'vertex-viewer-measurement-overlays',\n styleUrl: 'viewer-measurement-overlays.css',\n shadow: true,\n})\nexport class ViewerMeasurementOverlays {\n /**\n * The model that contains the overlays to present.\n */\n @Prop()\n public measurementOverlays = new MeasurementOverlayManager();\n\n private onOverlaysChangedListener?: Disposable;\n\n /**\n * @ignore\n */\n @Watch('measurementOverlays')\n protected handleMeasurementOverlaysChanged(): void {\n this.removeModelListeners();\n this.addModelListeners();\n\n this.updateOverlays();\n }\n\n /**\n * @internal\n */\n @Prop({ mutable: true })\n public camera?: FrameCameraBase;\n\n /**\n * The viewer that this component is bound to.\n */\n @Prop()\n public viewer?: HTMLVertexViewerElement;\n\n /**\n * @ignore\n */\n @Watch('viewer')\n protected handleViewerChanged(\n newViewer?: HTMLVertexViewerElement,\n oldViewer?: HTMLVertexViewerElement,\n ): void {\n this.removeViewerListeners(oldViewer);\n this.addViewerListeners();\n\n this.updateCamera();\n }\n\n @State()\n private overlays: MeasurementOverlay[] = [];\n\n /**\n * @ignore\n */\n protected componentWillLoad(): void {\n this.addModelListeners();\n this.addViewerListeners();\n\n this.updateOverlays();\n this.updateCamera();\n }\n\n private addModelListeners(): void {\n this.onOverlaysChangedListener = this.measurementOverlays.onOverlaysChanged(\n () => this.updateOverlays(),\n );\n }\n\n private removeModelListeners(): void {\n this.onOverlaysChangedListener?.dispose();\n this.onOverlaysChangedListener = undefined;\n }\n\n private addViewerListeners(): void {\n this.viewer?.addEventListener('frameReceived', this.updateCamera);\n }\n\n private removeViewerListeners(viewer?: HTMLVertexViewerElement): void {\n viewer?.removeEventListener('frameReceived', this.updateCamera);\n }\n\n private updateCamera = (): void => {\n this.camera = this.viewer?.frame?.scene.camera;\n };\n\n private updateOverlays(): void {\n this.overlays = this.measurementOverlays.getOverlays();\n }\n\n /**\n * @ignore\n */\n protected render(): h.JSX.IntrinsicElements {\n return (\n <Host>\n {this.overlays.map((overlay) => {\n if (this.camera != null && this.viewer != null) {\n return (\n <MeasurementOverlayView\n overlay={overlay}\n viewport={this.viewer.viewport}\n camera={this.camera}\n />\n );\n }\n })}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BkHp-aAR.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["ArrowMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","scalingOptions","super","this","anchor","editAnchor","event","mode","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","start","_a","translatePointToRelative","getMouseClientPosition","originatingViewport","centeringBehavior","scale","offset","emit","acceptInteraction","handleInteractionMove","position","end","center","Point","create","x","y","xDifference","yDifference","handleInteractionEnd","screenStart","translatePointToScreen","undefined","screenEnd","distance","newlyCreatedMarkup","markup","BoundingBox1d","onStartAnchorPointerDown","onCenterAnchorPointerDown","onEndAnchorPointerDown","angle","Angle","normalize","toDegrees","fromPoints","transform","h","class","RelativeAnchor","id","name","rotation","point","onPointerDown","classNames","viewerMarkupArrowCss","ViewerMarkupArrow","__stencil_proxyCustomElement","HTMLElement","registerHost","startLineAnchorStyle","endLineAnchorStyle","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","handleScaleChange","handleScalingConfigurationChange","updatePointsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","disconnectedCallback","dispose","registeredInteraction","removeEventListener","newViewer","registerBasicInteractionHandler","handleStartJsonChange","handleEndJsonChange","handleModeChange","updateScalingOptions","writeDOM","style","setProperty","_b","toString","rect","parsePoint","startJson","endJson","renderLineAnchorStyle","anchorStyle","arrowheadPoints","points","arrowheadPointsToPolygonPoints","d","arrowheadPointsToPathPoints","hashPoints","arrowheadPointsToHashPoints","circlePoints","arrowheadPointsToCirclePoints","render","width","height","offsetX","getWindowDevicePixelRatio","offsetY","_d","_c","isValidPointData","arrowheadStartPoints","createLineAnchorStylePoints","arrowheadEndPoints","Host","onTouchStart","SvgShadow","filter","x1","tip","y1","x2","y2"],"sources":["src/components/viewer-markup-arrow/interactions.ts","src/components/viewer-markup-arrow/viewer-markup-arrow-components.tsx","src/components/viewer-markup-arrow/viewer-markup-arrow.css?tag=vertex-viewer-markup-arrow&encapsulation=shadow","src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport {\n MarkupInteractionHandler,\n MarkupInteractionHandlerScalingOptions,\n} from '../../lib/markup/interactions';\nimport { MarkupInteraction } from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-markup/markup-utils';\n\ntype ViewerMarkupArrowEditAnchor = 'start' \| 'end' \| 'center';\n\nexport class ArrowMarkupInteractionHandler extends MarkupInteractionHandler {\n private pointerId?: number;\n private anchor: ViewerMarkupArrowEditAnchor = 'end';\n\n public constructor(\n private readonly markupEl: HTMLVertexViewerMarkupArrowElement,\n private readonly interactionBegin: EventEmitter<void>,\n private readonly interactionEnd: EventEmitter<MarkupInteraction>,\n scalingOptions?: MarkupInteractionHandlerScalingOptions\n ) {\n super(scalingOptions);\n }\n\n public editAnchor(\n anchor: ViewerMarkupArrowEditAnchor,\n event: PointerEvent\n ): void {\n if (this.markupEl.mode === 'edit') {\n this.anchor = anchor;\n this.startInteraction(event);\n }\n }\n\n public startInteraction(event: PointerEvent): void {\n this.handleInteractionAttempt(event);\n }\n\n protected computeBoundingRect(): DOMRect {\n return getMarkupBoundingClientRect(this.markupEl);\n }\n\n protected handleInteractionAttempt(event: PointerEvent): void {\n if (\n this.markupEl.mode !== '' &&\n this.pointerId == null &&\n this.elementBounds != null\n ) {\n this.pointerId = event.pointerId;\n this.markupEl.start =\n this.markupEl.start ??\n translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds,\n this.scalingOptions.originatingViewport,\n this.scalingOptions.centeringBehavior,\n this.scalingOptions.scale,\n this.scalingOptions.offset\n );\n\n this.interactionBegin.emit();\n this.acceptInteraction();\n }\n }\n\n protected handleInteractionMove(event: PointerEvent): void {\n if (this.elementBounds != null && this.pointerId === event.pointerId) {\n const position = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds,\n this.scalingOptions.originatingViewport,\n this.scalingOptions.centeringBehavior,\n this.scalingOptions.scale,\n this.scalingOptions.offset\n );\n if (this.anchor === 'start') {\n this.markupEl.start = position;\n } else if (this.anchor === 'end') {\n this.markupEl.end = position;\n } else if (this.markupEl.start != null && this.markupEl.end != null) {\n const center = Point.create(\n (this.markupEl.start.x + this.markupEl.end.x) / 2,\n (this.markupEl.start.y + this.markupEl.end.y) / 2\n );\n const xDifference = center.x - position.x;\n const yDifference = center.y - position.y;\n\n this.markupEl.start = Point.create(\n this.markupEl.start.x - xDifference,\n this.markupEl.start.y - yDifference\n );\n this.markupEl.end = Point.create(\n this.markupEl.end.x - xDifference,\n this.markupEl.end.y - yDifference\n );\n }\n }\n }\n\n protected handleInteractionEnd(event: PointerEvent): void {\n if (this.pointerId === event.pointerId) {\n const screenStart =\n this.markupEl.start != null && this.elementBounds != null\n ? translatePointToScreen(this.markupEl.start, this.elementBounds)\n : undefined;\n const screenEnd =\n this.markupEl.end != null && this.elementBounds != null\n ? translatePointToScreen(this.markupEl.end, this.elementBounds)\n : undefined;\n\n if (\n this.markupEl.mode !== '' &&\n screenStart != null &&\n screenEnd != null &&\n Point.distance(screenStart, screenEnd) >= 2\n ) {\n const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\n } else {\n this.markupEl.start = undefined;\n this.markupEl.end = undefined;\n }\n\n this.pointerId = undefined;\n }\n }\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Angle, Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { RelativeAnchor } from '../viewer-markup/viewer-markup-components';\n\nexport interface BoundingBox1dProps {\n start: Point.Point;\n end: Point.Point;\n offset?: Point.Point;\n onStartAnchorPointerDown?: (event: PointerEvent) => void;\n onCenterAnchorPointerDown?: (event: PointerEvent) => void;\n onEndAnchorPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const BoundingBox1d: FunctionalComponent<BoundingBox1dProps> = ({\n start,\n end,\n offset,\n onStartAnchorPointerDown,\n onCenterAnchorPointerDown,\n onEndAnchorPointerDown,\n}) => {\n const angle = Angle.normalize(\n Angle.toDegrees(Angle.fromPoints(start, end)) - 270\n );\n const center = Point.create((start.x + end.x) / 2, (start.y + end.y) / 2);\n const transform =\n offset != null ? `translate(${offset.x}px, ${offset.y}px)` : undefined;\n\n return (\n <div class=\"bounds-container\">\n <RelativeAnchor\n transform={transform}\n id=\"bounding-box-1d-start-anchor\"\n name=\"start-anchor\"\n rotation={angle}\n point={start}\n onPointerDown={onStartAnchorPointerDown}\n >\n <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n </RelativeAnchor>\n <RelativeAnchor\n transform={transform}\n id=\"bounding-box-1d-end-anchor\"\n name=\"end-anchor\"\n rotation={angle}\n point={end}\n onPointerDown={onEndAnchorPointerDown}\n >\n <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n </RelativeAnchor>\n <RelativeAnchor\n transform={transform}\n id=\"bounding-box-1d-center-anchor\"\n name=\"center-anchor\"\n point={center}\n onPointerDown={onCenterAnchorPointerDown}\n >\n <div\n class={classNames('bounds-default-anchor', 'bounds-center-anchor')}\n />\n </RelativeAnchor>\n </div>\n );\n};\n",":host {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n /*\n @prop --viewer-markup-arrow-line-stroke-color: A CSS color that\n * specifies the color of the arrow line's outline.\n /\n --viewer-markup-arrow-line-stroke-color: var(--red-800);\n /\n @prop --viewer-markup-arrow-line-stroke-width: A CSS length that\n * specifies the width of the arrow line's outline.\n \n Note that this is scaled by the component's scale factor, so providing a scale\n * other than 1 will result in a different stroke width.\n /\n --viewer-markup-arrow-line-stroke-width: 4px;\n /\n @prop --viewer-markup-arrow-head-stroke-color: A CSS color that\n * specifies the color of the arrow head's outline.\n /\n --viewer-markup-arrow-head-stroke-color: var(--red-800);\n /\n @prop --viewer-markup-arrow-head-stroke-width: A CSS length that\n * specifies the width of the arrow head's outline.\n \n Note that this is scaled by the component's scale factor, so providing a scale\n * other than 1 will result in a different stroke width.\n /\n --viewer-markup-arrow-head-stroke-width: 4px;\n /\n @prop --viewer-markup-arrow-head-fill-color: A CSS color that\n * specifies the color of the arrow head's fill.\n /\n --viewer-markup-arrow-head-fill-color: var(--red-800);\n /\n @prop --viewer-markup-arrow-head-fill-opacity: A number between\n * 0 and 1 that specifies the opacity of the arrow head's fill.\n /\n --viewer-markup-arrow-head-fill-opacity: 1;\n /\n @prop --viewer-markup-arrow-bounds-cap-border-color: A CSS color that\n * specifies the color of arrow start/end resize anchors' border.\n /\n --viewer-markup-arrow-bounds-cap-border-color: var(--blue-400);\n /\n @prop --viewer-markup-arrow-bounds-cap-border-width: A CSS length that\n * specifies the width of arrow start/end resize anchors' border.\n /\n --viewer-markup-arrow-bounds-cap-border-width: 1px;\n /\n @prop --viewer-markup-arrow-bounds-cap-background-color: A CSS color that\n * specifies the background color of the arrow start/end resize anchors.\n /\n --viewer-markup-arrow-bounds-cap-background-color: white;\n /\n @prop --viewer-markup-arrow-bounds-center-anchor-border-color: A CSS color that\n * specifies the color of the center resize anchor's border.\n /\n --viewer-markup-arrow-bounds-center-anchor-border-color: white;\n /\n @prop --viewer-markup-arrow-bounds-center-anchor-border-width: A CSS length that\n * specifies the width of the center resize anchor's border.\n /\n --viewer-markup-arrow-bounds-center-anchor-border-width: 1px;\n /\n @prop --viewer-markup-arrow-bounds-center-anchor-background-color: A CSS color that\n * specifies the background color of the center resize anchor.\n /\n --viewer-markup-arrow-bounds-center-anchor-background-color: var(--blue-400);\n /\n @prop --viewer-markup-arrow-bounds-outline-width: A CSS color that\n * specifies the width of the selected arrow outline.\n /\n --viewer-markup-arrow-bounds-outline-width: 1px;\n /\n @prop --viewer-markup-arrow-bounds-outline-color: A CSS color that\n * specifies the color of selected arrow outline.\n /\n --viewer-markup-arrow-bounds-outline-color: var(--blue-400);\n /\n @prop --viewer-markup-arrow-bounds-anchor-width: A CSS length that\n * specifies the width of the resize and reposition anchors.\n /\n --viewer-markup-arrow-bounds-anchor-width: 9px;\n /\n @prop --viewer-markup-arrow-bounds-anchor-height: A CSS length that\n * specifies the height of the resize and reposition anchors.\n /\n --viewer-markup-arrow-bounds-anchor-height: 9px;\n /\n @prop --viewer-markup-arrow-scale: A number that specifies the scale of the arrow.\n * This is used to scale the arrow's stroke width. Defaults to 1, and is managed internally\n * by the component.\n /\n --viewer-markup-arrow-scale: 1;\n}\n\n.svg {\n pointer-events: none;\n width: 100%;\n height: 100%;\n}\n\n.create-overlay {\n pointer-events: auto;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n}\n\n.line {\n pointer-events: auto;\n stroke: var(--viewer-markup-arrow-line-stroke-color);\n stroke-width: calc(\n var(--viewer-markup-arrow-line-stroke-width) \n var(--viewer-markup-arrow-scale)\n );\n cursor: default;\n}\n\n.head {\n pointer-events: auto;\n stroke: var(--viewer-markup-arrow-head-stroke-color);\n stroke-width: calc(\n var(--viewer-markup-arrow-head-stroke-width) \n var(--viewer-markup-arrow-scale)\n );\n fill: var(--viewer-markup-arrow-head-fill-color);\n fill-opacity: var(--viewer-markup-arrow-head-fill-opacity);\n cursor: default;\n}\n\n.bounds-line {\n pointer-events: auto;\n stroke: var(--viewer-markup-arrow-bounds-outline-color);\n stroke-width: var(--viewer-markup-arrow-bounds-outline-width);\n}\n\n.bounds-container {\n pointer-events: none;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n\n.bounds-anchor-position {\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n pointer-events: auto;\n cursor: default;\n user-select: none;\n}\n\n.bounds-default-anchor {\n width: var(--viewer-markup-arrow-bounds-anchor-width);\n height: var(--viewer-markup-arrow-bounds-anchor-height);\n box-sizing: border-box;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n border-radius: 100%;\n border-width: var(--viewer-markup-arrow-bounds-center-anchor-border-width);\n border-color: var(--viewer-markup-arrow-bounds-center-anchor-border-color);\n border-style: solid;\n background-color: var(\n --viewer-markup-arrow-bounds-center-anchor-background-color\n );\n}\n\n.bounds-cap-anchor {\n border-width: var(--viewer-markup-arrow-bounds-cap-border-width);\n border-color: var(--viewer-markup-arrow-bounds-cap-border-color);\n border-style: solid;\n background-color: var(--viewer-markup-arrow-bounds-cap-background-color);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\nimport { BasicViewer, Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n MarkupCenteringBehavior,\n MarkupInteraction,\n} from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n isValidPointData,\n isValidStartEvent,\n translatePointToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { ArrowMarkupInteractionHandler } from './interactions';\nimport {\n arrowheadPointsToCirclePoints,\n arrowheadPointsToHashPoints,\n arrowheadPointsToPathPoints,\n arrowheadPointsToPolygonPoints,\n createLineAnchorStylePoints,\n LineAnchorStyle,\n LineAnchorStylePoints,\n parsePoint,\n} from './utils';\nimport { BoundingBox1d } from './viewer-markup-arrow-components';\n\n/\n The supported arrow markup modes.\n \n @see {@link ViewerMarkupArrowMode.mode} - For more details about modes.\n /\nexport type ViewerMarkupArrowMode = 'edit' \| 'create' \| '';\n\n@Component({\n tag: 'vertex-viewer-markup-arrow',\n styleUrl: 'viewer-markup-arrow.css',\n shadow: true,\n})\nexport class ViewerMarkupArrow {\n /\n The position of the starting anchor. Can either be an instance of a\n * `Point` or a JSON string representation in the format of `[x, y]` or\n * `{\"x\": 0, \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ mutable: true, attribute: null })\n public start?: Point.Point;\n\n /\n The position of the starting anchor, as a JSON string. Can either be an\n * instance of a `Point` or a JSON string representation in the format of\n * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ attribute: 'start' })\n public startJson?: string;\n\n /\n The position of the ending anchor. Can either be an instance of a `Point`\n * or a JSON string representation in the format of `[x, y]` or `{\"x\": 0,\n * \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ mutable: true })\n public end?: Point.Point;\n\n /\n The position of the ending anchor, as a JSON string. Can either be an\n * instance of a `Point` or a JSON string representation in the format of\n * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ attribute: 'end' })\n public endJson?: string;\n\n /\n The original viewport dimensions where this markup was created. This value is used\n * to determine where the markup should be rendered relative to the current viewport,\n * enabling some markup to appear \"off-screen\".\n \n When provided, all NDC values will be considered relative to this viewport.\n /\n @Prop()\n public originatingViewport?: Dimensions.Dimensions;\n\n /\n Defines the behavior of the provided markup when the originating viewport is smaller\n * than the current viewport, or is scaled to a size smaller than the current viewport\n * using the `scale` property.\n \n Options:\n * - `x-only`: Markup will be centered horizontally, but not vertically.\n * - `y-only`: Markup will be centered vertically, but not horizontally.\n * - `both`: Markup will be centered both horizontally and vertically.\n * - `none`: Markup will not be centered (default).\n /\n @Prop()\n public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n /\n The current offset of the visible viewport. This value is used to determine where\n * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n \n When provided, all computed coordinates will be offset by this amount.\n /\n @Prop()\n public offset?: Point.Point;\n\n /\n The scale to render this markup at. This value is used to scale the element's bounds\n * along with any `offset` to determine the final computed coordinates.\n \n When provided, all computed coordinates will be scaled by this amount.\n /\n @Prop()\n public scale = 1;\n\n /\n The style of the starting anchor. This defaults to none.\n /\n @Prop({ mutable: true })\n public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n /\n The style of the ending anchor. This defaults to 'arrow-triangle.'\n /\n @Prop({ mutable: true })\n public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n /\n A mode that specifies how the markup component should behave. When\n * unset, the component will not respond to interactions with the handles.\n * When `edit`, the markup anchors are interactive and the user is able\n * to reposition them. When `create`, anytime the user clicks on the canvas,\n * a new markup will be performed.\n /\n @Prop({ reflect: true })\n public mode: ViewerMarkupArrowMode = '';\n\n /\n The viewer to connect to markups.\n \n This property will automatically be set when a child of a\n * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n /\n @Prop()\n public viewer?: BasicViewer;\n\n /\n An event that is dispatched anytime the user begins interacting with the\n * markup.\n /\n @Event({ bubbles: true })\n public interactionBegin!: EventEmitter<void>;\n\n /\n An event that is dispatched when the user has finished interacting with the\n * markup.\n /\n @Event({ bubbles: true })\n public interactionEnd!: EventEmitter<MarkupInteraction>;\n\n @Element()\n private hostEl!: HTMLVertexViewerMarkupArrowElement;\n\n @State()\n private elementBounds?: DOMRect;\n\n private interactionHandler = new ArrowMarkupInteractionHandler(\n this.hostEl,\n this.interactionBegin,\n this.interactionEnd,\n {\n scale: this.scale,\n offset: this.offset,\n originatingViewport: this.originatingViewport,\n centeringBehavior: this.centeringBehavior,\n }\n );\n\n private registeredInteraction?: Disposable;\n\n /\n @ignore\n /\n protected componentWillLoad(): void {\n this.updateViewport();\n this.handleViewerChanged(this.viewer);\n this.handleScaleChange();\n this.handleScalingConfigurationChange();\n this.updatePointsFromProps();\n }\n\n protected componentDidLoad(): void {\n this.updatePointsFromProps();\n\n const resize = new ResizeObserver(() => this.updateViewport());\n resize.observe(this.hostEl);\n\n if (this.mode === 'create') {\n window.addEventListener('pointerdown', this.handleWindowPointerDown);\n }\n }\n\n protected disconnectedCallback(): void {\n this.dispose();\n }\n\n @Method()\n public async dispose(): Promise<void> {\n this.registeredInteraction?.dispose();\n this.registeredInteraction = undefined;\n\n window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n }\n\n /\n @ignore\n */\n @Watch('viewer')\n protected async handleViewerChanged(newViewer?: BasicViewer): Promise<void> {\n this.registeredInteraction?.dispose();\n this.registeredInteraction = undefined;\n\n if (newViewer != null) {\n this.registeredInteraction =\n await newViewer.registerBasicInteractionHandler(\n this.interactionHandler\n );\n }\n }\n\n @Watch('start')\n protected handleStartJsonChange(): void {\n this.updatePointsFromProps();\n }\n\n @Watch('end')\n protected handleEndJsonChange(): void {\n this.updatePointsFromProps();\n }\n\n @Watch('mode')\n protected handleModeChange(): void {\n if (this.mode !== 'create') {\n window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n }\n }\n\n @Watch('offset')\n @Watch('originatingViewport')\n @Watch('centeringBehavior')\n @Watch('scale')\n protected handleScalingConfigurationChange(): void {\n this.interactionHandler.updateScalingOptions({\n scale: this.scale,\n offset: this.offset,\n originatingViewport: this.originatingViewport,\n centeringBehavior: this.centeringBehavior,\n });\n }\n\n @Watch('scale')\n protected handleScaleChange(): void {\n writeDOM(() => {\n this.hostEl.style.setProperty(\n '--viewer-markup-arrow-scale',\n this.scale?.toString() ?? '1'\n );\n });\n }\n\n private updateViewport(): void {\n const rect = getMarkupBoundingClientRect(this.hostEl);\n this.elementBounds = rect;\n }\n\n private updatePointsFromProps(): void {\n this.start = this.start \|\| parsePoint(this.startJson);\n this.end = this.end \|\| parsePoint(this.endJson);\n }\n\n private renderLineAnchorStyle(\n anchorStyle: LineAnchorStyle,\n arrowheadPoints: LineAnchorStylePoints\n ): h.JSX.IntrinsicElements {\n if (anchorStyle === 'arrow-triangle') {\n return (\n <polygon\n id=\"line-anchor-arrow-triangle\"\n class=\"head\"\n points={arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale)}\n />\n );\n } else if (anchorStyle === 'arrow-line') {\n return (\n <path\n id=\"line-anchor-arrow-line\"\n class=\"head\"\n d={arrowheadPointsToPathPoints(arrowheadPoints, this.scale)}\n />\n );\n } else if (anchorStyle === 'hash') {\n const hashPoints = arrowheadPointsToHashPoints(\n arrowheadPoints,\n this.scale\n );\n\n return <line id=\"line-anchor-hash\" class=\"head\" {...hashPoints} />;\n } else if (anchorStyle === 'dot') {\n const circlePoints = arrowheadPointsToCirclePoints(\n arrowheadPoints,\n this.scale\n );\n\n return <circle id=\"line-anchor-circle\" class=\"head\" {...circlePoints} />;\n } else {\n return <div />;\n }\n }\n\n public render(): h.JSX.IntrinsicElements {\n if (\n this.start != null &&\n this.end != null &&\n this.elementBounds != null &&\n this.elementBounds.width > 0 &&\n this.elementBounds.height > 0\n ) {\n const elementBounds = this.elementBounds;\n const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n const screenStart = translatePointToScreen(\n this.start,\n elementBounds,\n this.originatingViewport,\n this.centeringBehavior,\n this.scale\n );\n const screenEnd = translatePointToScreen(\n this.end,\n elementBounds,\n this.originatingViewport,\n this.centeringBehavior,\n this.scale\n );\n\n if (isValidPointData(screenStart, screenEnd)) {\n const arrowheadStartPoints = createLineAnchorStylePoints(\n screenEnd,\n screenStart\n );\n const arrowheadEndPoints = createLineAnchorStylePoints(\n screenStart,\n screenEnd\n );\n\n return (\n <Host>\n <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n <defs>\n <SvgShadow id=\"arrow-shadow\" scale={this.scale} />\n </defs>\n <g\n transform={`translate(${offsetX} ${offsetY})`}\n filter=\"url(#arrow-shadow)\"\n >\n {this.renderLineAnchorStyle(\n this.startLineAnchorStyle,\n arrowheadStartPoints\n )}\n <line\n id=\"arrow-line\"\n class=\"line\"\n x1={arrowheadEndPoints.tip.x}\n y1={arrowheadEndPoints.tip.y}\n x2={arrowheadStartPoints.tip.x}\n y2={arrowheadStartPoints.tip.y}\n />\n {this.renderLineAnchorStyle(\n this.endLineAnchorStyle,\n arrowheadEndPoints\n )}\n </g>\n {this.mode === 'edit' && (\n <g transform={`translate(${offsetX} ${offsetY})`}>\n <line\n id=\"bounding-box-1d-line\"\n class=\"bounds-line\"\n x1={screenStart.x}\n y1={screenStart.y}\n x2={screenEnd.x}\n y2={screenEnd.y}\n />\n </g>\n )}\n </svg>\n {this.mode === 'edit' && (\n <BoundingBox1d\n start={screenStart}\n end={screenEnd}\n offset={{ x: offsetX, y: offsetY }}\n onStartAnchorPointerDown={(event) =>\n this.interactionHandler.editAnchor('start', event)\n }\n onCenterAnchorPointerDown={(event) =>\n this.interactionHandler.editAnchor('center', event)\n }\n onEndAnchorPointerDown={(event) =>\n this.interactionHandler.editAnchor('end', event)\n }\n />\n )}\n {this.mode === 'create' && (\n <div\n class=\"create-overlay\"\n onTouchStart={this.handleTouchStart}\n ></div>\n )}\n </Host>\n );\n } else {\n return <Host></Host>;\n }\n } else {\n return (\n <Host>\n <div\n class=\"create-overlay\"\n onTouchStart={this.handleTouchStart}\n ></div>\n </Host>\n );\n }\n }\n\n private handleWindowPointerDown = (event: PointerEvent): void => {\n if (isValidStartEvent(event)) {\n this.interactionHandler.startInteraction(event);\n }\n };\n\n private handleTouchStart = (event: TouchEvent): void => {\n event.preventDefault();\n };\n}\n"],"mappings":";;;uXAiBM,MAAOA,UAAsCC,EAIjD,WAAAC,CACmBC,EACAC,EACAC,EACjBC,GAEAC,MAAMD,GALWE,KAAAL,WACAK,KAAAJ,mBACAI,KAAAH,iBALXG,KAAAC,OAAsC,K,CAWvC,UAAAC,CACLD,EACAE,GAEA,GAAIH,KAAKL,SAASS,OAAS,OAAQ,CACjCJ,KAAKC,OAASA,EACdD,KAAKK,iBAAiBF,E,EAInB,gBAAAE,CAAiBF,GACtBH,KAAKM,yBAAyBH,E,CAGtB,mBAAAI,GACR,OAAOC,EAA4BR,KAAKL,S,CAGhC,wBAAAW,CAAyBH,G,MACjC,GACEH,KAAKL,SAASS,OAAS,IACvBJ,KAAKS,WAAa,MAClBT,KAAKU,eAAiB,KACtB,CACAV,KAAKS,UAAYN,EAAMM,UACvBT,KAAKL,SAASgB,OACZC,EAAAZ,KAAKL,SAASgB,SAAK,MAAAC,SAAA,EAAAA,EACnBC,EACEC,EAAuBX,EAAOH,KAAKU,eACnCV,KAAKU,cACLV,KAAKF,eAAeiB,oBACpBf,KAAKF,eAAekB,kBACpBhB,KAAKF,eAAemB,MACpBjB,KAAKF,eAAeoB,QAGxBlB,KAAKJ,iBAAiBuB,OACtBnB,KAAKoB,mB,EAIC,qBAAAC,CAAsBlB,GAC9B,GAAIH,KAAKU,eAAiB,MAAQV,KAAKS,YAAcN,EAAMM,UAAW,CACpE,MAAMa,EAAWT,EACfC,EAAuBX,EAAOH,KAAKU,eACnCV,KAAKU,cACLV,KAAKF,eAAeiB,oBACpBf,KAAKF,eAAekB,kBACpBhB,KAAKF,eAAemB,MACpBjB,KAAKF,eAAeoB,QAEtB,GAAIlB,KAAKC,SAAW,QAAS,CAC3BD,KAAKL,SAASgB,MAAQW,C,MACjB,GAAItB,KAAKC,SAAW,MAAO,CAChCD,KAAKL,SAAS4B,IAAMD,C,MACf,GAAItB,KAAKL,SAASgB,OAAS,MAAQX,KAAKL,SAAS4B,KAAO,KAAM,CACnE,MAAMC,EAASC,EAAMC,QAClB1B,KAAKL,SAASgB,MAAMgB,EAAI3B,KAAKL,SAAS4B,IAAII,GAAK,GAC/C3B,KAAKL,SAASgB,MAAMiB,EAAI5B,KAAKL,SAAS4B,IAAIK,GAAK,GAElD,MAAMC,EAAcL,EAAOG,EAAIL,EAASK,EACxC,MAAMG,EAAcN,EAAOI,EAAIN,EAASM,EAExC5B,KAAKL,SAASgB,MAAQc,EAAMC,OAC1B1B,KAAKL,SAASgB,MAAMgB,EAAIE,EACxB7B,KAAKL,SAASgB,MAAMiB,EAAIE,GAE1B9B,KAAKL,SAAS4B,IAAME,EAAMC,OACxB1B,KAAKL,SAAS4B,IAAII,EAAIE,EACtB7B,KAAKL,SAAS4B,IAAIK,EAAIE,E,GAMpB,oBAAAC,CAAqB5B,GAC7B,GAAIH,KAAKS,YAAcN,EAAMM,UAAW,CACtC,MAAMuB,EACJhC,KAAKL,SAASgB,OAAS,MAAQX,KAAKU,eAAiB,KACjDuB,EAAuBjC,KAAKL,SAASgB,MAAOX,KAAKU,eACjDwB,UACN,MAAMC,EACJnC,KAAKL,SAAS4B,KAAO,MAAQvB,KAAKU,eAAiB,KAC/CuB,EAAuBjC,KAAKL,SAAS4B,IAAKvB,KAAKU,eAC/CwB,UAEN,GACElC,KAAKL,SAASS,OAAS,IACvB4B,GAAe,MACfG,GAAa,MACbV,EAAMW,SAASJ,EAAaG,IAAc,EAC1C,CACA,MAAME,EAAqBrC,KAAKL,SAASS,OAAS,OAClDJ,KAAKH,eAAesB,KAAK,CAAEmB,OAAQtC,KAAKL,SAAU0C,sB,KAC7C,CACLrC,KAAKL,SAASgB,MAAQuB,UACtBlC,KAAKL,SAAS4B,IAAMW,S,CAGtBlC,KAAKS,UAAYyB,S,GCjHhB,MAAMK,EAAyD,EACpE5B,QACAY,MACAL,SACAsB,2BACAC,4BACAC,6BAEA,MAAMC,EAAQC,EAAMC,UAClBD,EAAME,UAAUF,EAAMG,WAAWpC,EAAOY,IAAQ,KAElD,MAAMC,EAASC,EAAMC,QAAQf,EAAMgB,EAAIJ,EAAII,GAAK,GAAIhB,EAAMiB,EAAIL,EAAIK,GAAK,GACvE,MAAMoB,EACJ9B,GAAU,KAAO,aAAaA,EAAOS,QAAQT,EAAOU,OAASM,UAE/D,OACEe,EAAA,OAAKC,MAAM,oBACTD,EAACE,EAAc,CACbH,UAAWA,EACXI,GAAG,+BACHC,KAAK,eACLC,SAAUX,EACVY,MAAO5C,EACP6C,cAAehB,GAEfS,EAAA,OAAKC,MAAOO,EAAW,wBAAyB,wBAElDR,EAACE,EAAc,CACbH,UAAWA,EACXI,GAAG,6BACHC,KAAK,aACLC,SAAUX,EACVY,MAAOhC,EACPiC,cAAed,GAEfO,EAAA,OAAKC,MAAOO,EAAW,wBAAyB,wBAElDR,EAACE,EAAc,CACbH,UAAWA,EACXI,GAAG,gCACHC,KAAK,gBACLE,MAAO/B,EACPgC,cAAef,GAEfQ,EAAA,OACEC,MAAOO,EAAW,wBAAyB,2BAG3C,EChEV,MAAMC,EAAuB,IAAM,itF,MCqDtBC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAnE,CAAAoE,G,gKAwES9D,KAAAgB,kBAA6C,OAkB7ChB,KAAAiB,MAAQ,EAMRjB,KAAA+D,qBAAwC,OAMxC/D,KAAAgE,mBAAsC,iBAUtChE,KAAAI,KAA8B,GA+B7BJ,KAAAiE,mBAAqB,IAAIzE,EAC/BQ,KAAKkE,OACLlE,KAAKJ,iBACLI,KAAKH,eACL,CACEoB,MAAOjB,KAAKiB,MACZC,OAAQlB,KAAKkB,OACbH,oBAAqBf,KAAKe,oBAC1BC,kBAAmBhB,KAAKgB,oBAoQpBhB,KAAAmE,wBAA2BhE,IACjC,GAAIiE,EAAkBjE,GAAQ,CAC5BH,KAAKiE,mBAAmB5D,iBAAiBF,E,GAIrCH,KAAAqE,iBAAoBlE,IAC1BA,EAAMmE,gBAAgB,CAEzB,CApQW,iBAAAC,GACRvE,KAAKwE,iBACLxE,KAAKyE,oBAAoBzE,KAAK0E,QAC9B1E,KAAK2E,oBACL3E,KAAK4E,mCACL5E,KAAK6E,uB,CAGG,gBAAAC,GACR9E,KAAK6E,wBAEL,MAAME,EAAS,IAAIC,gBAAe,IAAMhF,KAAKwE,mBAC7CO,EAAOE,QAAQjF,KAAKkE,QAEpB,GAAIlE,KAAKI,OAAS,SAAU,CAC1B8E,OAAOC,iBAAiB,cAAenF,KAAKmE,wB,EAItC,oBAAAiB,GACRpF,KAAKqF,S,CAIA,aAAMA,G,OACXzE,EAAAZ,KAAKsF,yBAAqB,MAAA1E,SAAA,SAAAA,EAAEyE,UAC5BrF,KAAKsF,sBAAwBpD,UAE7BgD,OAAOK,oBAAoB,cAAevF,KAAKmE,wB,CAOvC,yBAAMM,CAAoBe,G,OAClC5E,EAAAZ,KAAKsF,yBAAqB,MAAA1E,SAAA,SAAAA,EAAEyE,UAC5BrF,KAAKsF,sBAAwBpD,UAE7B,GAAIsD,GAAa,KAAM,CACrBxF,KAAKsF,4BACGE,EAAUC,gCACdzF,KAAKiE,mB,EAMH,qBAAAyB,GACR1F,KAAK6E,uB,CAIG,mBAAAc,GACR3F,KAAK6E,uB,CAIG,gBAAAe,GACR,GAAI5F,KAAKI,OAAS,SAAU,CAC1B8E,OAAOK,oBAAoB,cAAevF,KAAKmE,wB,EAQzC,gCAAAS,GACR5E,KAAKiE,mBAAmB4B,qBAAqB,CAC3C5E,MAAOjB,KAAKiB,MACZC,OAAQlB,KAAKkB,OACbH,oBAAqBf,KAAKe,oBAC1BC,kBAAmBhB,KAAKgB,mB,CAKlB,iBAAA2D,GACRmB,GAAS,K,QACP9F,KAAKkE,OAAO6B,MAAMC,YAChB,+BACAC,GAAArF,EAAAZ,KAAKiB,SAAK,MAAAL,SAAA,SAAAA,EAAEsF,cAAU,MAAAD,SAAA,EAAAA,EAAI,IAC3B,G,CAIG,cAAAzB,GACN,MAAM2B,EAAO3F,EAA4BR,KAAKkE,QAC9ClE,KAAKU,cAAgByF,C,CAGf,qBAAAtB,GACN7E,KAAKW,MAAQX,KAAKW,OAASyF,EAAWpG,KAAKqG,WAC3CrG,KAAKuB,IAAMvB,KAAKuB,KAAO6E,EAAWpG,KAAKsG,Q,CAGjC,qBAAAC,CACNC,EACAC,GAEA,GAAID,IAAgB,iBAAkB,CACpC,OACEvD,EAAA,WACEG,GAAG,6BACHF,MAAM,OACNwD,OAAQC,EAA+BF,EAAiBzG,KAAKiB,Q,MAG5D,GAAIuF,IAAgB,aAAc,CACvC,OACEvD,EAAA,QACEG,GAAG,yBACHF,MAAM,OACN0D,EAAGC,EAA4BJ,EAAiBzG,KAAKiB,Q,MAGpD,GAAIuF,IAAgB,OAAQ,CACjC,MAAMM,EAAaC,EACjBN,EACAzG,KAAKiB,OAGP,OAAOgC,EAAA,QAAMG,GAAG,mBAAmBF,MAAM,UAAW4D,G,MAC/C,GAAIN,IAAgB,MAAO,CAChC,MAAMQ,EAAeC,EACnBR,EACAzG,KAAKiB,OAGP,OAAOgC,EAAA,UAAQG,GAAG,qBAAqBF,MAAM,UAAW8D,G,KACnD,CACL,OAAO/D,EAAA,W,EAIJ,MAAAiE,G,YACL,GACElH,KAAKW,OAAS,MACdX,KAAKuB,KAAO,MACZvB,KAAKU,eAAiB,MACtBV,KAAKU,cAAcyG,MAAQ,GAC3BnH,KAAKU,cAAc0G,OAAS,EAC5B,CACA,MAAM1G,EAAgBV,KAAKU,cAC3B,MAAM2G,IAAWpB,GAAArF,EAAAZ,KAAKkB,UAAM,MAAAN,SAAA,SAAAA,EAAEe,KAAC,MAAAsE,SAAA,EAAAA,EAAI,GAAKqB,IACxC,MAAMC,IAAWC,GAAAC,EAAAzH,KAAKkB,UAAM,MAAAuG,SAAA,SAAAA,EAAE7F,KAAC,MAAA4F,SAAA,EAAAA,EAAI,GAAKF,IACxC,MAAMtF,EAAcC,EAClBjC,KAAKW,MACLD,EACAV,KAAKe,oBACLf,KAAKgB,kBACLhB,KAAKiB,OAEP,MAAMkB,EAAYF,EAChBjC,KAAKuB,IACLb,EACAV,KAAKe,oBACLf,KAAKgB,kBACLhB,KAAKiB,OAGP,GAAIyG,EAAiB1F,EAAaG,GAAY,CAC5C,MAAMwF,EAAuBC,EAC3BzF,EACAH,GAEF,MAAM6F,EAAqBD,EACzB5F,EACAG,GAGF,OACEc,EAAC6E,EAAI,KACH7E,EAAA,OAAKC,MAAM,MAAM6E,aAAc/H,KAAKqE,kBAClCpB,EAAA,YACEA,EAAC+E,EAAS,CAAC5E,GAAG,eAAenC,MAAOjB,KAAKiB,SAE3CgC,EAAA,KACED,UAAW,aAAaqE,KAAWE,KACnCU,OAAO,sBAENjI,KAAKuG,sBACJvG,KAAK+D,qBACL4D,GAEF1E,EAAA,QACEG,GAAG,aACHF,MAAM,OACNgF,GAAIL,EAAmBM,IAAIxG,EAC3ByG,GAAIP,EAAmBM,IAAIvG,EAC3ByG,GAAIV,EAAqBQ,IAAIxG,EAC7B2G,GAAIX,EAAqBQ,IAAIvG,IAE9B5B,KAAKuG,sBACJvG,KAAKgE,mBACL6D,IAGH7H,KAAKI,OAAS,QACb6C,EAAA,KAAGD,UAAW,aAAaqE,KAAWE,MACpCtE,EAAA,QACEG,GAAG,uBACHF,MAAM,cACNgF,GAAIlG,EAAYL,EAChByG,GAAIpG,EAAYJ,EAChByG,GAAIlG,EAAUR,EACd2G,GAAInG,EAAUP,MAKrB5B,KAAKI,OAAS,QACb6C,EAACV,EAAa,CACZ5B,MAAOqB,EACPT,IAAKY,EACLjB,OAAQ,CAAES,EAAG0F,EAASzF,EAAG2F,GACzB/E,yBAA2BrC,GACzBH,KAAKiE,mBAAmB/D,WAAW,QAASC,GAE9CsC,0BAA4BtC,GAC1BH,KAAKiE,mBAAmB/D,WAAW,SAAUC,GAE/CuC,uBAAyBvC,GACvBH,KAAKiE,mBAAmB/D,WAAW,MAAOC,KAI/CH,KAAKI,OAAS,UACb6C,EAAA,OACEC,MAAM,iBACN6E,aAAc/H,KAAKqE,mB,KAKtB,CACL,OAAOpB,EAAC6E,EAAI,K,MAET,CACL,OACE7E,EAAC6E,EAAI,KACH7E,EAAA,OACEC,MAAM,iBACN6E,aAAc/H,KAAKqE,mB","ignoreList":[]}
1	+ {"version":3,"names":["ArrowMarkupInteractionHandler","MarkupInteractionHandler","constructor","markupEl","interactionBegin","interactionEnd","scalingOptions","super","this","anchor","editAnchor","event","mode","startInteraction","handleInteractionAttempt","computeBoundingRect","getMarkupBoundingClientRect","pointerId","elementBounds","start","_a","translatePointToRelative","getMouseClientPosition","originatingViewport","centeringBehavior","scale","offset","emit","acceptInteraction","handleInteractionMove","position","end","center","Point","create","x","y","xDifference","yDifference","handleInteractionEnd","screenStart","translatePointToScreen","undefined","screenEnd","distance","newlyCreatedMarkup","markup","BoundingBox1d","onStartAnchorPointerDown","onCenterAnchorPointerDown","onEndAnchorPointerDown","angle","Angle","normalize","toDegrees","fromPoints","transform","h","class","RelativeAnchor","id","name","rotation","point","onPointerDown","classNames","viewerMarkupArrowCss","ViewerMarkupArrow","__stencil_proxyCustomElement","HTMLElement","registerHost","startLineAnchorStyle","endLineAnchorStyle","interactionHandler","hostEl","handleWindowPointerDown","isValidStartEvent","handleTouchStart","preventDefault","componentWillLoad","updateViewport","handleViewerChanged","viewer","handleScaleChange","handleScalingConfigurationChange","updatePointsFromProps","componentDidLoad","resize","ResizeObserver","observe","window","addEventListener","disconnectedCallback","dispose","registeredInteraction","removeEventListener","newViewer","registerBasicInteractionHandler","handleStartJsonChange","handleEndJsonChange","handleModeChange","updateScalingOptions","writeDOM","style","setProperty","_b","toString","rect","parsePoint","startJson","endJson","renderLineAnchorStyle","anchorStyle","arrowheadPoints","points","arrowheadPointsToPolygonPoints","d","arrowheadPointsToPathPoints","hashPoints","arrowheadPointsToHashPoints","circlePoints","arrowheadPointsToCirclePoints","render","width","height","offsetX","getWindowDevicePixelRatio","offsetY","_d","_c","isValidPointData","arrowheadStartPoints","createLineAnchorStylePoints","arrowheadEndPoints","Host","onTouchStart","SvgShadow","filter","x1","tip","y1","x2","y2"],"sources":["src/components/viewer-markup-arrow/interactions.ts","src/components/viewer-markup-arrow/viewer-markup-arrow-components.tsx","src/components/viewer-markup-arrow/viewer-markup-arrow.css?tag=vertex-viewer-markup-arrow&encapsulation=shadow","src/components/viewer-markup-arrow/viewer-markup-arrow.tsx"],"sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport {\n MarkupInteractionHandler,\n MarkupInteractionHandlerScalingOptions,\n} from '../../lib/markup/interactions';\nimport { MarkupInteraction } from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-markup/markup-utils';\n\ntype ViewerMarkupArrowEditAnchor = 'start' \| 'end' \| 'center';\n\nexport class ArrowMarkupInteractionHandler extends MarkupInteractionHandler {\n private pointerId?: number;\n private anchor: ViewerMarkupArrowEditAnchor = 'end';\n\n public constructor(\n private readonly markupEl: HTMLVertexViewerMarkupArrowElement,\n private readonly interactionBegin: EventEmitter<void>,\n private readonly interactionEnd: EventEmitter<MarkupInteraction>,\n scalingOptions?: MarkupInteractionHandlerScalingOptions,\n ) {\n super(scalingOptions);\n }\n\n public editAnchor(\n anchor: ViewerMarkupArrowEditAnchor,\n event: PointerEvent,\n ): void {\n if (this.markupEl.mode === 'edit') {\n this.anchor = anchor;\n this.startInteraction(event);\n }\n }\n\n public startInteraction(event: PointerEvent): void {\n this.handleInteractionAttempt(event);\n }\n\n protected computeBoundingRect(): DOMRect {\n return getMarkupBoundingClientRect(this.markupEl);\n }\n\n protected handleInteractionAttempt(event: PointerEvent): void {\n if (\n this.markupEl.mode !== '' &&\n this.pointerId == null &&\n this.elementBounds != null\n ) {\n this.pointerId = event.pointerId;\n this.markupEl.start =\n this.markupEl.start ??\n translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds,\n this.scalingOptions.originatingViewport,\n this.scalingOptions.centeringBehavior,\n this.scalingOptions.scale,\n this.scalingOptions.offset,\n );\n\n this.interactionBegin.emit();\n this.acceptInteraction();\n }\n }\n\n protected handleInteractionMove(event: PointerEvent): void {\n if (this.elementBounds != null && this.pointerId === event.pointerId) {\n const position = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds,\n this.scalingOptions.originatingViewport,\n this.scalingOptions.centeringBehavior,\n this.scalingOptions.scale,\n this.scalingOptions.offset,\n );\n if (this.anchor === 'start') {\n this.markupEl.start = position;\n } else if (this.anchor === 'end') {\n this.markupEl.end = position;\n } else if (this.markupEl.start != null && this.markupEl.end != null) {\n const center = Point.create(\n (this.markupEl.start.x + this.markupEl.end.x) / 2,\n (this.markupEl.start.y + this.markupEl.end.y) / 2,\n );\n const xDifference = center.x - position.x;\n const yDifference = center.y - position.y;\n\n this.markupEl.start = Point.create(\n this.markupEl.start.x - xDifference,\n this.markupEl.start.y - yDifference,\n );\n this.markupEl.end = Point.create(\n this.markupEl.end.x - xDifference,\n this.markupEl.end.y - yDifference,\n );\n }\n }\n }\n\n protected handleInteractionEnd(event: PointerEvent): void {\n if (this.pointerId === event.pointerId) {\n const screenStart =\n this.markupEl.start != null && this.elementBounds != null\n ? translatePointToScreen(this.markupEl.start, this.elementBounds)\n : undefined;\n const screenEnd =\n this.markupEl.end != null && this.elementBounds != null\n ? translatePointToScreen(this.markupEl.end, this.elementBounds)\n : undefined;\n\n if (\n this.markupEl.mode !== '' &&\n screenStart != null &&\n screenEnd != null &&\n Point.distance(screenStart, screenEnd) >= 2\n ) {\n const newlyCreatedMarkup = this.markupEl.mode !== 'edit';\n this.interactionEnd.emit({ markup: this.markupEl, newlyCreatedMarkup });\n } else {\n this.markupEl.start = undefined;\n this.markupEl.end = undefined;\n }\n\n this.pointerId = undefined;\n }\n }\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Angle, Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { RelativeAnchor } from '../viewer-markup/viewer-markup-components';\n\nexport interface BoundingBox1dProps {\n start: Point.Point;\n end: Point.Point;\n offset?: Point.Point;\n onStartAnchorPointerDown?: (event: PointerEvent) => void;\n onCenterAnchorPointerDown?: (event: PointerEvent) => void;\n onEndAnchorPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const BoundingBox1d: FunctionalComponent<BoundingBox1dProps> = ({\n start,\n end,\n offset,\n onStartAnchorPointerDown,\n onCenterAnchorPointerDown,\n onEndAnchorPointerDown,\n}) => {\n const angle = Angle.normalize(\n Angle.toDegrees(Angle.fromPoints(start, end)) - 270,\n );\n const center = Point.create((start.x + end.x) / 2, (start.y + end.y) / 2);\n const transform =\n offset != null ? `translate(${offset.x}px, ${offset.y}px)` : undefined;\n\n return (\n <div class=\"bounds-container\">\n <RelativeAnchor\n transform={transform}\n id=\"bounding-box-1d-start-anchor\"\n name=\"start-anchor\"\n rotation={angle}\n point={start}\n onPointerDown={onStartAnchorPointerDown}\n >\n <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n </RelativeAnchor>\n <RelativeAnchor\n transform={transform}\n id=\"bounding-box-1d-end-anchor\"\n name=\"end-anchor\"\n rotation={angle}\n point={end}\n onPointerDown={onEndAnchorPointerDown}\n >\n <div class={classNames('bounds-default-anchor', 'bounds-cap-anchor')} />\n </RelativeAnchor>\n <RelativeAnchor\n transform={transform}\n id=\"bounding-box-1d-center-anchor\"\n name=\"center-anchor\"\n point={center}\n onPointerDown={onCenterAnchorPointerDown}\n >\n <div\n class={classNames('bounds-default-anchor', 'bounds-center-anchor')}\n />\n </RelativeAnchor>\n </div>\n );\n};\n",":host {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n /*\n @prop --viewer-markup-arrow-line-stroke-color: A CSS color that\n * specifies the color of the arrow line's outline.\n /\n --viewer-markup-arrow-line-stroke-color: var(--red-800);\n /\n @prop --viewer-markup-arrow-line-stroke-width: A CSS length that\n * specifies the width of the arrow line's outline.\n \n Note that this is scaled by the component's scale factor, so providing a scale\n * other than 1 will result in a different stroke width.\n /\n --viewer-markup-arrow-line-stroke-width: 4px;\n /\n @prop --viewer-markup-arrow-head-stroke-color: A CSS color that\n * specifies the color of the arrow head's outline.\n /\n --viewer-markup-arrow-head-stroke-color: var(--red-800);\n /\n @prop --viewer-markup-arrow-head-stroke-width: A CSS length that\n * specifies the width of the arrow head's outline.\n \n Note that this is scaled by the component's scale factor, so providing a scale\n * other than 1 will result in a different stroke width.\n /\n --viewer-markup-arrow-head-stroke-width: 4px;\n /\n @prop --viewer-markup-arrow-head-fill-color: A CSS color that\n * specifies the color of the arrow head's fill.\n /\n --viewer-markup-arrow-head-fill-color: var(--red-800);\n /\n @prop --viewer-markup-arrow-head-fill-opacity: A number between\n * 0 and 1 that specifies the opacity of the arrow head's fill.\n /\n --viewer-markup-arrow-head-fill-opacity: 1;\n /\n @prop --viewer-markup-arrow-bounds-cap-border-color: A CSS color that\n * specifies the color of arrow start/end resize anchors' border.\n /\n --viewer-markup-arrow-bounds-cap-border-color: var(--blue-400);\n /\n @prop --viewer-markup-arrow-bounds-cap-border-width: A CSS length that\n * specifies the width of arrow start/end resize anchors' border.\n /\n --viewer-markup-arrow-bounds-cap-border-width: 1px;\n /\n @prop --viewer-markup-arrow-bounds-cap-background-color: A CSS color that\n * specifies the background color of the arrow start/end resize anchors.\n /\n --viewer-markup-arrow-bounds-cap-background-color: white;\n /\n @prop --viewer-markup-arrow-bounds-center-anchor-border-color: A CSS color that\n * specifies the color of the center resize anchor's border.\n /\n --viewer-markup-arrow-bounds-center-anchor-border-color: white;\n /\n @prop --viewer-markup-arrow-bounds-center-anchor-border-width: A CSS length that\n * specifies the width of the center resize anchor's border.\n /\n --viewer-markup-arrow-bounds-center-anchor-border-width: 1px;\n /\n @prop --viewer-markup-arrow-bounds-center-anchor-background-color: A CSS color that\n * specifies the background color of the center resize anchor.\n /\n --viewer-markup-arrow-bounds-center-anchor-background-color: var(--blue-400);\n /\n @prop --viewer-markup-arrow-bounds-outline-width: A CSS color that\n * specifies the width of the selected arrow outline.\n /\n --viewer-markup-arrow-bounds-outline-width: 1px;\n /\n @prop --viewer-markup-arrow-bounds-outline-color: A CSS color that\n * specifies the color of selected arrow outline.\n /\n --viewer-markup-arrow-bounds-outline-color: var(--blue-400);\n /\n @prop --viewer-markup-arrow-bounds-anchor-width: A CSS length that\n * specifies the width of the resize and reposition anchors.\n /\n --viewer-markup-arrow-bounds-anchor-width: 9px;\n /\n @prop --viewer-markup-arrow-bounds-anchor-height: A CSS length that\n * specifies the height of the resize and reposition anchors.\n /\n --viewer-markup-arrow-bounds-anchor-height: 9px;\n /\n @prop --viewer-markup-arrow-scale: A number that specifies the scale of the arrow.\n * This is used to scale the arrow's stroke width. Defaults to 1, and is managed internally\n * by the component.\n /\n --viewer-markup-arrow-scale: 1;\n}\n\n.svg {\n pointer-events: none;\n width: 100%;\n height: 100%;\n}\n\n.create-overlay {\n pointer-events: auto;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n cursor: crosshair;\n}\n\n.line {\n pointer-events: auto;\n stroke: var(--viewer-markup-arrow-line-stroke-color);\n stroke-width: calc(\n var(--viewer-markup-arrow-line-stroke-width) \n var(--viewer-markup-arrow-scale)\n );\n cursor: default;\n}\n\n.head {\n pointer-events: auto;\n stroke: var(--viewer-markup-arrow-head-stroke-color);\n stroke-width: calc(\n var(--viewer-markup-arrow-head-stroke-width) \n var(--viewer-markup-arrow-scale)\n );\n fill: var(--viewer-markup-arrow-head-fill-color);\n fill-opacity: var(--viewer-markup-arrow-head-fill-opacity);\n cursor: default;\n}\n\n.bounds-line {\n pointer-events: auto;\n stroke: var(--viewer-markup-arrow-bounds-outline-color);\n stroke-width: var(--viewer-markup-arrow-bounds-outline-width);\n}\n\n.bounds-container {\n pointer-events: none;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n\n.bounds-anchor-position {\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\n.bounds-anchor {\n pointer-events: auto;\n cursor: default;\n user-select: none;\n}\n\n.bounds-default-anchor {\n width: var(--viewer-markup-arrow-bounds-anchor-width);\n height: var(--viewer-markup-arrow-bounds-anchor-height);\n box-sizing: border-box;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.bounds-center-anchor {\n border-radius: 100%;\n border-width: var(--viewer-markup-arrow-bounds-center-anchor-border-width);\n border-color: var(--viewer-markup-arrow-bounds-center-anchor-border-color);\n border-style: solid;\n background-color: var(\n --viewer-markup-arrow-bounds-center-anchor-background-color\n );\n}\n\n.bounds-cap-anchor {\n border-width: var(--viewer-markup-arrow-bounds-cap-border-width);\n border-color: var(--viewer-markup-arrow-bounds-cap-border-color);\n border-style: solid;\n background-color: var(--viewer-markup-arrow-bounds-cap-background-color);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\nimport { BasicViewer, Disposable } from '@vertexvis/utils';\n\nimport { getWindowDevicePixelRatio } from '../../lib/dom';\nimport { writeDOM } from '../../lib/stencil';\nimport {\n MarkupCenteringBehavior,\n MarkupInteraction,\n} from '../../lib/types/markup';\nimport { getMarkupBoundingClientRect } from '../viewer-markup/dom';\nimport {\n isValidPointData,\n isValidStartEvent,\n translatePointToScreen,\n} from '../viewer-markup/markup-utils';\nimport { SvgShadow } from '../viewer-markup/viewer-markup-components';\nimport { ArrowMarkupInteractionHandler } from './interactions';\nimport {\n arrowheadPointsToCirclePoints,\n arrowheadPointsToHashPoints,\n arrowheadPointsToPathPoints,\n arrowheadPointsToPolygonPoints,\n createLineAnchorStylePoints,\n LineAnchorStyle,\n LineAnchorStylePoints,\n parsePoint,\n} from './utils';\nimport { BoundingBox1d } from './viewer-markup-arrow-components';\n\n/\n The supported arrow markup modes.\n \n @see {@link ViewerMarkupArrowMode.mode} - For more details about modes.\n /\nexport type ViewerMarkupArrowMode = 'edit' \| 'create' \| '';\n\n@Component({\n tag: 'vertex-viewer-markup-arrow',\n styleUrl: 'viewer-markup-arrow.css',\n shadow: true,\n})\nexport class ViewerMarkupArrow {\n /\n The position of the starting anchor. Can either be an instance of a\n * `Point` or a JSON string representation in the format of `[x, y]` or\n * `{\"x\": 0, \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ mutable: true, attribute: null })\n public start?: Point.Point;\n\n /\n The position of the starting anchor, as a JSON string. Can either be an\n * instance of a `Point` or a JSON string representation in the format of\n * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ attribute: 'start' })\n public startJson?: string;\n\n /\n The position of the ending anchor. Can either be an instance of a `Point`\n * or a JSON string representation in the format of `[x, y]` or `{\"x\": 0,\n * \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ mutable: true })\n public end?: Point.Point;\n\n /\n The position of the ending anchor, as a JSON string. Can either be an\n * instance of a `Point` or a JSON string representation in the format of\n * `[x, y]` or `{\"x\": 0, \"y\": 0}`.\n \n Points are expected to be relative coordinates from `[-0.5, 0.5]`,\n * e.g. `[0, 0]` corresponds to a point in the center of the viewport.\n /\n @Prop({ attribute: 'end' })\n public endJson?: string;\n\n /\n The original viewport dimensions where this markup was created. This value is used\n * to determine where the markup should be rendered relative to the current viewport,\n * enabling some markup to appear \"off-screen\".\n \n When provided, all NDC values will be considered relative to this viewport.\n /\n @Prop()\n public originatingViewport?: Dimensions.Dimensions;\n\n /\n Defines the behavior of the provided markup when the originating viewport is smaller\n * than the current viewport, or is scaled to a size smaller than the current viewport\n * using the `scale` property.\n \n Options:\n * - `x-only`: Markup will be centered horizontally, but not vertically.\n * - `y-only`: Markup will be centered vertically, but not horizontally.\n * - `both`: Markup will be centered both horizontally and vertically.\n * - `none`: Markup will not be centered (default).\n /\n @Prop()\n public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n /\n The current offset of the visible viewport. This value is used to determine where\n * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n \n When provided, all computed coordinates will be offset by this amount.\n /\n @Prop()\n public offset?: Point.Point;\n\n /\n The scale to render this markup at. This value is used to scale the element's bounds\n * along with any `offset` to determine the final computed coordinates.\n \n When provided, all computed coordinates will be scaled by this amount.\n /\n @Prop()\n public scale = 1;\n\n /\n The style of the starting anchor. This defaults to none.\n /\n @Prop({ mutable: true })\n public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n /\n The style of the ending anchor. This defaults to 'arrow-triangle.'\n /\n @Prop({ mutable: true })\n public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n /\n A mode that specifies how the markup component should behave. When\n * unset, the component will not respond to interactions with the handles.\n * When `edit`, the markup anchors are interactive and the user is able\n * to reposition them. When `create`, anytime the user clicks on the canvas,\n * a new markup will be performed.\n /\n @Prop({ reflect: true })\n public mode: ViewerMarkupArrowMode = '';\n\n /\n The viewer to connect to markups.\n \n This property will automatically be set when a child of a\n * `<vertex-viewer-markup>` or `<vertex-viewer>` element.\n /\n @Prop()\n public viewer?: BasicViewer;\n\n /\n An event that is dispatched anytime the user begins interacting with the\n * markup.\n /\n @Event({ bubbles: true })\n public interactionBegin!: EventEmitter<void>;\n\n /\n An event that is dispatched when the user has finished interacting with the\n * markup.\n /\n @Event({ bubbles: true })\n public interactionEnd!: EventEmitter<MarkupInteraction>;\n\n @Element()\n private hostEl!: HTMLVertexViewerMarkupArrowElement;\n\n @State()\n private elementBounds?: DOMRect;\n\n private interactionHandler = new ArrowMarkupInteractionHandler(\n this.hostEl,\n this.interactionBegin,\n this.interactionEnd,\n {\n scale: this.scale,\n offset: this.offset,\n originatingViewport: this.originatingViewport,\n centeringBehavior: this.centeringBehavior,\n },\n );\n\n private registeredInteraction?: Disposable;\n\n /\n @ignore\n /\n protected componentWillLoad(): void {\n this.updateViewport();\n this.handleViewerChanged(this.viewer);\n this.handleScaleChange();\n this.handleScalingConfigurationChange();\n this.updatePointsFromProps();\n }\n\n protected componentDidLoad(): void {\n this.updatePointsFromProps();\n\n const resize = new ResizeObserver(() => this.updateViewport());\n resize.observe(this.hostEl);\n\n if (this.mode === 'create') {\n window.addEventListener('pointerdown', this.handleWindowPointerDown);\n }\n }\n\n protected disconnectedCallback(): void {\n this.dispose();\n }\n\n @Method()\n public async dispose(): Promise<void> {\n this.registeredInteraction?.dispose();\n this.registeredInteraction = undefined;\n\n window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n }\n\n /\n @ignore\n */\n @Watch('viewer')\n protected async handleViewerChanged(newViewer?: BasicViewer): Promise<void> {\n this.registeredInteraction?.dispose();\n this.registeredInteraction = undefined;\n\n if (newViewer != null) {\n this.registeredInteraction =\n await newViewer.registerBasicInteractionHandler(\n this.interactionHandler,\n );\n }\n }\n\n @Watch('start')\n protected handleStartJsonChange(): void {\n this.updatePointsFromProps();\n }\n\n @Watch('end')\n protected handleEndJsonChange(): void {\n this.updatePointsFromProps();\n }\n\n @Watch('mode')\n protected handleModeChange(): void {\n if (this.mode !== 'create') {\n window.removeEventListener('pointerdown', this.handleWindowPointerDown);\n }\n }\n\n @Watch('offset')\n @Watch('originatingViewport')\n @Watch('centeringBehavior')\n @Watch('scale')\n protected handleScalingConfigurationChange(): void {\n this.interactionHandler.updateScalingOptions({\n scale: this.scale,\n offset: this.offset,\n originatingViewport: this.originatingViewport,\n centeringBehavior: this.centeringBehavior,\n });\n }\n\n @Watch('scale')\n protected handleScaleChange(): void {\n writeDOM(() => {\n this.hostEl.style.setProperty(\n '--viewer-markup-arrow-scale',\n this.scale?.toString() ?? '1',\n );\n });\n }\n\n private updateViewport(): void {\n const rect = getMarkupBoundingClientRect(this.hostEl);\n this.elementBounds = rect;\n }\n\n private updatePointsFromProps(): void {\n this.start = this.start \|\| parsePoint(this.startJson);\n this.end = this.end \|\| parsePoint(this.endJson);\n }\n\n private renderLineAnchorStyle(\n anchorStyle: LineAnchorStyle,\n arrowheadPoints: LineAnchorStylePoints,\n ): h.JSX.IntrinsicElements {\n if (anchorStyle === 'arrow-triangle') {\n return (\n <polygon\n id=\"line-anchor-arrow-triangle\"\n class=\"head\"\n points={arrowheadPointsToPolygonPoints(arrowheadPoints, this.scale)}\n />\n );\n } else if (anchorStyle === 'arrow-line') {\n return (\n <path\n id=\"line-anchor-arrow-line\"\n class=\"head\"\n d={arrowheadPointsToPathPoints(arrowheadPoints, this.scale)}\n />\n );\n } else if (anchorStyle === 'hash') {\n const hashPoints = arrowheadPointsToHashPoints(\n arrowheadPoints,\n this.scale,\n );\n\n return <line id=\"line-anchor-hash\" class=\"head\" {...hashPoints} />;\n } else if (anchorStyle === 'dot') {\n const circlePoints = arrowheadPointsToCirclePoints(\n arrowheadPoints,\n this.scale,\n );\n\n return <circle id=\"line-anchor-circle\" class=\"head\" {...circlePoints} />;\n } else {\n return <div />;\n }\n }\n\n public render(): h.JSX.IntrinsicElements {\n if (\n this.start != null &&\n this.end != null &&\n this.elementBounds != null &&\n this.elementBounds.width > 0 &&\n this.elementBounds.height > 0\n ) {\n const elementBounds = this.elementBounds;\n const offsetX = (this.offset?.x ?? 0) / getWindowDevicePixelRatio();\n const offsetY = (this.offset?.y ?? 0) / getWindowDevicePixelRatio();\n const screenStart = translatePointToScreen(\n this.start,\n elementBounds,\n this.originatingViewport,\n this.centeringBehavior,\n this.scale,\n );\n const screenEnd = translatePointToScreen(\n this.end,\n elementBounds,\n this.originatingViewport,\n this.centeringBehavior,\n this.scale,\n );\n\n if (isValidPointData(screenStart, screenEnd)) {\n const arrowheadStartPoints = createLineAnchorStylePoints(\n screenEnd,\n screenStart,\n );\n const arrowheadEndPoints = createLineAnchorStylePoints(\n screenStart,\n screenEnd,\n );\n\n return (\n <Host>\n <svg class=\"svg\" onTouchStart={this.handleTouchStart}>\n <defs>\n <SvgShadow id=\"arrow-shadow\" scale={this.scale} />\n </defs>\n <g\n transform={`translate(${offsetX} ${offsetY})`}\n filter=\"url(#arrow-shadow)\"\n >\n {this.renderLineAnchorStyle(\n this.startLineAnchorStyle,\n arrowheadStartPoints,\n )}\n <line\n id=\"arrow-line\"\n class=\"line\"\n x1={arrowheadEndPoints.tip.x}\n y1={arrowheadEndPoints.tip.y}\n x2={arrowheadStartPoints.tip.x}\n y2={arrowheadStartPoints.tip.y}\n />\n {this.renderLineAnchorStyle(\n this.endLineAnchorStyle,\n arrowheadEndPoints,\n )}\n </g>\n {this.mode === 'edit' && (\n <g transform={`translate(${offsetX} ${offsetY})`}>\n <line\n id=\"bounding-box-1d-line\"\n class=\"bounds-line\"\n x1={screenStart.x}\n y1={screenStart.y}\n x2={screenEnd.x}\n y2={screenEnd.y}\n />\n </g>\n )}\n </svg>\n {this.mode === 'edit' && (\n <BoundingBox1d\n start={screenStart}\n end={screenEnd}\n offset={{ x: offsetX, y: offsetY }}\n onStartAnchorPointerDown={(event) =>\n this.interactionHandler.editAnchor('start', event)\n }\n onCenterAnchorPointerDown={(event) =>\n this.interactionHandler.editAnchor('center', event)\n }\n onEndAnchorPointerDown={(event) =>\n this.interactionHandler.editAnchor('end', event)\n }\n />\n )}\n {this.mode === 'create' && (\n <div\n class=\"create-overlay\"\n onTouchStart={this.handleTouchStart}\n ></div>\n )}\n </Host>\n );\n } else {\n return <Host></Host>;\n }\n } else {\n return (\n <Host>\n <div\n class=\"create-overlay\"\n onTouchStart={this.handleTouchStart}\n ></div>\n </Host>\n );\n }\n }\n\n private handleWindowPointerDown = (event: PointerEvent): void => {\n if (isValidStartEvent(event)) {\n this.interactionHandler.startInteraction(event);\n }\n };\n\n private handleTouchStart = (event: TouchEvent): void => {\n event.preventDefault();\n };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Bkm6H5uq.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["viewerIconCss","ViewerIcon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","render","name","renderSvgIcon","h","d","transform","Fragment","content","Host","class","classname","xmlns","viewBox"],"sources":["src/components/viewer-icon/viewer-icon.css?tag=vertex-viewer-icon&encapsulation=shadow","src/components/viewer-icon/viewer-icon.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 1em;\n height: 1em;\n fill: currentColor;\n}\n\n:host(.size-sm) {\n font-size: 16px;\n}\n\n:host(.size-md) {\n font-size: 24px;\n}\n\n:host(.size-lg) {\n font-size: 32px;\n}\n\nsvg {\n display: block;\n width: 100%;\n height: 100%;\n}\n","import { Component, Fragment, h, Host, Prop } from '@stencil/core';\nimport classname from 'classnames';\n\n/*\n The names of the icons that the `<vertex-viewer-icon>` element can display.\n /\nexport type ViewerIconName =\n \| 'chevron-down'\n \| 'chevron-right'\n \| 'close-circle'\n \| 'comment-filled'\n \| 'comment-show'\n \| 'eye-half'\n \| 'eye-half-dotted'\n \| 'eye-open'\n \| 'fit-all'\n \| 'info'\n \| 'locate'\n \| 'lock'\n \| 'pin-fill'\n \| 'search';\n\n/\n The predefined sizes for icons.\n /\nexport type ViewerIconSize = 'sm' \| 'md' \| 'lg' \| undefined;\n\n@Component({\n tag: 'vertex-viewer-icon',\n styleUrl: 'viewer-icon.css',\n shadow: true,\n})\nexport class ViewerIcon {\n /\n The name of the icon to render.\n /\n @Prop()\n public name?: ViewerIconName;\n\n /\n The size of the icon. Can be `'sm' \| 'md' \| 'lg' \| undefined`. Predefined\n * sizes are set to:\n \n * `sm`: 16px\n * * `md`: 24px\n * * `lg`: 32px\n \n A custom size can be supplied by setting this field to `undefined` and\n * setting `font-size` through CSS. Defaults to `md`.\n */\n @Prop()\n public size?: ViewerIconSize = 'md';\n\n public render(): h.JSX.IntrinsicElements {\n switch (this.name) {\n case 'chevron-down':\n return this.renderSvgIcon(\n <path\n d=\"M11.88,9.17l-3.5-4a.51.51,0,0,0-.76,0l-3.5,4A.5.5,0,0,0,4.5,10h7a.5.5,0,0,0,.38-.83Z\"\n transform=\"rotate(180 8 8)\"\n ~~/>\~~n );\n case 'chevron-right':\n return this.renderSvgIcon(\n <path d=\"M10.83,7.62l-4-3.5A.5.5,0,0,0,6,4.5v7a.5.5,0,0,0,.83.38l4-3.5a.51.51,0,0,0,0-.76Z\" ~~/>\~~n );\n case 'close-circle':\n return this.renderSvgIcon(\n <path d=\"M8 1a7 7 0 107 7 7 7 0 00-7-7zm2.85 9.15a.49.49 0 01-.7.7L8 8.71l-2.15 2.14a.49.49 0 01-.7-.7L7.29 8 5.15 5.85a.49.49 0 01.7-.7L8 7.29l2.15-2.14a.49.49 0 01.7.7L8.71 8z\" ~~/>\~~n );\n case 'comment-filled':\n return this.renderSvgIcon(\n <path d=\"M13.5,2H2.5c-.8,0-1.5.7-1.5,1.5v7c0,.8.7,1.5,1.5,1.5h5.8l2.9,2.9c.1.1.4.2.5.1.2-.1.3-.3.3-.5v-2.5h1.5c.8,0,1.5-.7,1.5-1.5V3.5c0-.8-.7-1.5-1.5-1.5Z\" ~~/>\~~n );\n case 'comment-show':\n return this.renderSvgIcon(\n <path d=\"M11.5,8h-7a.5.5,0,0,0,0,1h7a.5.5,0,0,0,0-1Zm0-3h-7a.5.5,0,0,0,0,1h7a.5.5,0,0,0,0-1Zm2-3H2.5A1.5,1.5,0,0,0,1,3.5v7A1.5,1.5,0,0,0,2.5,12H8.29l2.86,2.85a.47.47,0,0,0,.54.11A.5.5,0,0,0,12,14.5V12h1.5A1.5,1.5,0,0,0,15,10.5v-7A1.5,1.5,0,0,0,13.5,2Zm.5,8.5a.5.5,0,0,1-.5.5h-2a.51.51,0,0,0-.5.5v1.79L8.85,11.15A.47.47,0,0,0,8.5,11h-6a.5.5,0,0,1-.5-.5v-7A.5.5,0,0,1,2.5,3h11a.5.5,0,0,1,.5.5Z\" ~~/>\~~n );\n case 'eye-half':\n return this.renderSvgIcon(\n <path d=\"M13.35 2.65a.48.48 0 00-.7 0l-.78.77a8.71 8.71 0 00-8.52.41A6.57 6.57 0 00.51 7.89v.22a6.58 6.58 0 002.71 4l-.57.58a.49.49 0 00.7.7l10-10a.48.48 0 000-.74zM9.73 5.56a3 3 0 00-4.17 4.17l-1.62 1.62A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.67 7.67 0 013.12.67zm3.61-1.2l-.72.72A5.45 5.45 0 0114.47 8a5.49 5.49 0 01-2.37 3.33A7.52 7.52 0 018 12.5a8.15 8.15 0 01-2.41-.38l-.78.78a8.9 8.9 0 003.19.6 8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.56 6.56 0 00-2.15-3.53z\" ~~/>\~~n );\n case 'eye-half-dotted':\n return this.renderSvgIcon(\n <Fragment>\n <path d=\"M4.12 11.46A5.62 5.62 0 011.52 8 5.57 5.57 0 013.9 4.67 7.52 7.52 0 018 3.5a7.7 7.7 0 013.33.75l.74-.74A8.67 8.67 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.54 6.54 0 002.88 4.08z\" />\n <path d=\"M8 5a3 3 0 00-3 3 3 3 0 00.69 1.89l4.2-4.2A3 3 0 008 5zM5.88 5.88zM9.2 12.41a.51.51 0 00-.42.57.5.5 0 00.56.42.5.5 0 00.43-.57.51.51 0 00-.57-.42zM6.77 12.41a.5.5 0 00-.57.42.49.49 0 00.41.57.5.5 0 10.15-1zM14.48 5.61a.5.5 0 00-.7-.12.49.49 0 00-.12.69.5.5 0 00.82-.57zM11.5 11.68a.5.5 0 00-.22.67.51.51 0 00.68.22.5.5 0 00-.46-.89zM15.07 7.77a.52.52 0 00-.62.35.51.51 0 00.35.62.5.5 0 00.61-.35.52.52 0 00-.34-.62zM13.36 10.21a.5.5 0 10.76.64.49.49 0 00-.06-.7.51.51 0 00-.7.06z\" />\n </Fragment>\n );\n case 'eye-open':\n return this.renderSvgIcon(\n <path d=\"M8 5a3 3 0 103 3 3 3 0 00-3-3zm4.65-1.17A8.53 8.53 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.57 6.57 0 002.84 4.06A8.53 8.53 0 008 13.5a8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.57 6.57 0 00-2.84-4.06zm-.55 7.5A7.52 7.52 0 018 12.5a7.52 7.52 0 01-4.1-1.17A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.52 7.52 0 014.1 1.17A5.49 5.49 0 0114.47 8a5.49 5.49 0 01-2.37 3.33z\" ~~/>\~~n );\n case 'fit-all':\n return this.renderSvgIcon(\n <path d=\"M6.15,9.15l-2.5,2.5L2,10v4H6L4.35,12.35l2.5-2.5a.49.49,0,0,0-.7-.7Zm-1.8-5.5L6,2H2V6L3.65,4.35l2.5,2.5a.49.49,0,0,0,.7-.7ZM10,2l1.65,1.65-2.5,2.5a.49.49,0,0,0,.7.7l2.5-2.5L14,6V2ZM9.85,9.15a.49.49,0,0,0-.7.7l2.5,2.5L10,14h4V10l-1.65,1.65Z\" ~~/>\~~n );\n case 'info':\n return this.renderSvgIcon(\n <path d=\"M8,15A7,7,0,1,0,1,8,7,7,0,0,0,8,15ZM3.73,3.77A6,6,0,1,1,2,8,6,6,0,0,1,3.73,3.77ZM8,12a.5.5,0,0,0,.5-.5v-5a.5.5,0,0,0-1,0v5A.5.5,0,0,0,8,12ZM8,5a.51.51,0,1,0-.35-.15A.47.47,0,0,0,8,5Z\" ~~/>\~~n );\n case 'locate':\n return this.renderSvgIcon(\n <path d=\"M8,2a6,6,0,0,1,6,6,6,6,0,0,1,-6,6,6,6,0,0,1,-6,-6,6,6,0,0,1,6,-6ZM8,13a5,5,0,0,0,5,-5,5,5,0,0,0,-5,-5,5,5,0,0,0,-5,5,5,5,0,0,0,5,5ZM8,5a3,3,0,0,1,3,3,3,3,0,0,1,-3,3,3,3,0,0,1,-3,-3,3,3,0,0,1,3,-3ZM7.5,2v-1.5a.3,.3,0,0,1,1,0v1.5ZM7.5,14v1.5a.3,.3,0,0,0,1,0v-1.5ZM14,7.5h1.5a.3,.3,0,0,1,0,1h-1.5ZM2,7.5h-1.5a.3,.3,0,0,0,0,1h1.5ZM8,16v-5ZM16,8h-5ZM0,8h4Z\" ~~/>\~~n );\n case 'lock':\n return this.renderSvgIcon(\n <path d=\"M13.85 6.15A.47.47 0 0 0 13.5 6H12V5a4 4 0 1 0-8 0v1H2.5a.47.47 0 0 0-.35.15.47.47 0 0 0-.15.35v8a.47.47 0 0 0 .15.35.47.47 0 0 0 .35.15h11a.51.51 0 0 0 .5-.5v-8a.47.47 0 0 0-.15-.35ZM5 5a3 3 0 1 1 6 0v1H5V5Zm8 9H3V7h10v7Zm-5.5-3.15V12a.5.5 0 1 0 1 0v-1.15a1 1 0 1 0-1 0Z\" ~~/>\~~n );\n case 'pin-fill':\n return this.renderSvgIcon(\n <path d=\"M8,.55A5.9,5.9,0,0,0,2.1,6.44a9.14,9.14,0,0,0,2.66,6.24,11.44,11.44,0,0,0,1.93,1.65,7.43,7.43,0,0,0,.73.44l.28.12a.78.78,0,0,0,.6,0,6.65,6.65,0,0,0,1.34-.79,11.79,11.79,0,0,0,2.76-2.88,8.59,8.59,0,0,0,1.5-4.78A5.9,5.9,0,0,0,8,.55ZM8,8.44a2,2,0,1,1,2-2A2,2,0,0,1,8,8.44Z\" ~~/>\~~n );\n case 'search':\n return this.renderSvgIcon(\n <path d=\"M14.85 14.15l-4-4a.37.37 0 00-.2-.12 5.45 5.45 0 10-.62.62.37.37 0 00.12.2l4 4a.49.49 0 00.7-.7zM9.71 9.71a4.51 4.51 0 01-6.42 0 4.51 4.51 0 010-6.42 4.51 4.51 0 016.42 0 4.51 4.51 0 010 6.42z\" ~~/>\~~n );\n default:\n return <svg />;\n }\n }\n\n private renderSvgIcon(\n content: h.JSX.IntrinsicElements\n ): h.JSX.IntrinsicElements {\n return (\n <Host\n class={classname({\n 'size-sm': this.size === 'sm',\n 'size-md': this.size === 'md',\n 'size-lg': this.size === 'lg',\n })}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n {content}\n </svg>\n </Host>\n );\n }\n}\n"],"mappings":";;;2GAAA,MAAMA,EAAgB,IAAM,2M,MCgCfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,kEAwBSC,KAAAC,KAAwB,IAwFhC,CAtFQ,MAAAC,GACL,OAAQF,KAAKG,MACX,IAAK,eACH,OAAOH,KAAKI,cACVC,EAAA,QACEC,EAAE,uFACFC,UAAU,qBAGhB,IAAK,gBACH,OAAOP,KAAKI,cACVC,EAAA,QAAMC,EAAE,uFAEZ,IAAK,eACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,8KAEZ,IAAK,iBACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,wJAEZ,IAAK,eACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,oYAEZ,IAAK,WACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,ufAEZ,IAAK,kBACH,OAAON,KAAKI,cACVC,EAACG,EAAQ,KACPH,EAAA,QAAMC,EAAE,6MACRD,EAAA,QAAMC,EAAE,seAGd,IAAK,WACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,+aAEZ,IAAK,UACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,oPAEZ,IAAK,OACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,4LAEZ,IAAK,SACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,qWAEZ,IAAK,OACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,qRAEZ,IAAK,WACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,mRAEZ,IAAK,SACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,sMAEZ,QACE,OAAOD,EAAA,Y,CAIL,aAAAD,CACNK,GAEA,OACEJ,EAACK,EAAI,CACHC,MAAOC,EAAU,CACf,UAAWZ,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,QAG3BI,EAAA,OAAKQ,MAAM,6BAA6BC,QAAQ,aAC7CL,G","ignoreList":[]}
1	+ {"version":3,"names":["viewerIconCss","ViewerIcon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","render","name","renderSvgIcon","h","d","transform","Fragment","content","Host","class","classname","xmlns","viewBox"],"sources":["src/components/viewer-icon/viewer-icon.css?tag=vertex-viewer-icon&encapsulation=shadow","src/components/viewer-icon/viewer-icon.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 1em;\n height: 1em;\n fill: currentColor;\n}\n\n:host(.size-sm) {\n font-size: 16px;\n}\n\n:host(.size-md) {\n font-size: 24px;\n}\n\n:host(.size-lg) {\n font-size: 32px;\n}\n\nsvg {\n display: block;\n width: 100%;\n height: 100%;\n}\n","import { Component, Fragment, h, Host, Prop } from '@stencil/core';\nimport classname from 'classnames';\n\n/*\n The names of the icons that the `<vertex-viewer-icon>` element can display.\n /\nexport type ViewerIconName =\n \| 'chevron-down'\n \| 'chevron-right'\n \| 'close-circle'\n \| 'comment-filled'\n \| 'comment-show'\n \| 'eye-half'\n \| 'eye-half-dotted'\n \| 'eye-open'\n \| 'fit-all'\n \| 'info'\n \| 'locate'\n \| 'lock'\n \| 'pin-fill'\n \| 'search';\n\n/\n The predefined sizes for icons.\n /\nexport type ViewerIconSize = 'sm' \| 'md' \| 'lg' \| undefined;\n\n@Component({\n tag: 'vertex-viewer-icon',\n styleUrl: 'viewer-icon.css',\n shadow: true,\n})\nexport class ViewerIcon {\n /\n The name of the icon to render.\n /\n @Prop()\n public name?: ViewerIconName;\n\n /\n The size of the icon. Can be `'sm' \| 'md' \| 'lg' \| undefined`. Predefined\n * sizes are set to:\n \n * `sm`: 16px\n * * `md`: 24px\n * * `lg`: 32px\n \n A custom size can be supplied by setting this field to `undefined` and\n * setting `font-size` through CSS. Defaults to `md`.\n */\n @Prop()\n public size?: ViewerIconSize = 'md';\n\n public render(): h.JSX.IntrinsicElements {\n switch (this.name) {\n case 'chevron-down':\n return this.renderSvgIcon(\n <path\n d=\"M11.88,9.17l-3.5-4a.51.51,0,0,0-.76,0l-3.5,4A.5.5,0,0,0,4.5,10h7a.5.5,0,0,0,.38-.83Z\"\n transform=\"rotate(180 8 8)\"\n />,\n );\n case 'chevron-right':\n return this.renderSvgIcon(\n <path d=\"M10.83,7.62l-4-3.5A.5.5,0,0,0,6,4.5v7a.5.5,0,0,0,.83.38l4-3.5a.51.51,0,0,0,0-.76Z\" />,\n );\n case 'close-circle':\n return this.renderSvgIcon(\n <path d=\"M8 1a7 7 0 107 7 7 7 0 00-7-7zm2.85 9.15a.49.49 0 01-.7.7L8 8.71l-2.15 2.14a.49.49 0 01-.7-.7L7.29 8 5.15 5.85a.49.49 0 01.7-.7L8 7.29l2.15-2.14a.49.49 0 01.7.7L8.71 8z\" />,\n );\n case 'comment-filled':\n return this.renderSvgIcon(\n <path d=\"M13.5,2H2.5c-.8,0-1.5.7-1.5,1.5v7c0,.8.7,1.5,1.5,1.5h5.8l2.9,2.9c.1.1.4.2.5.1.2-.1.3-.3.3-.5v-2.5h1.5c.8,0,1.5-.7,1.5-1.5V3.5c0-.8-.7-1.5-1.5-1.5Z\" />,\n );\n case 'comment-show':\n return this.renderSvgIcon(\n <path d=\"M11.5,8h-7a.5.5,0,0,0,0,1h7a.5.5,0,0,0,0-1Zm0-3h-7a.5.5,0,0,0,0,1h7a.5.5,0,0,0,0-1Zm2-3H2.5A1.5,1.5,0,0,0,1,3.5v7A1.5,1.5,0,0,0,2.5,12H8.29l2.86,2.85a.47.47,0,0,0,.54.11A.5.5,0,0,0,12,14.5V12h1.5A1.5,1.5,0,0,0,15,10.5v-7A1.5,1.5,0,0,0,13.5,2Zm.5,8.5a.5.5,0,0,1-.5.5h-2a.51.51,0,0,0-.5.5v1.79L8.85,11.15A.47.47,0,0,0,8.5,11h-6a.5.5,0,0,1-.5-.5v-7A.5.5,0,0,1,2.5,3h11a.5.5,0,0,1,.5.5Z\" />,\n );\n case 'eye-half':\n return this.renderSvgIcon(\n <path d=\"M13.35 2.65a.48.48 0 00-.7 0l-.78.77a8.71 8.71 0 00-8.52.41A6.57 6.57 0 00.51 7.89v.22a6.58 6.58 0 002.71 4l-.57.58a.49.49 0 00.7.7l10-10a.48.48 0 000-.74zM9.73 5.56a3 3 0 00-4.17 4.17l-1.62 1.62A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.67 7.67 0 013.12.67zm3.61-1.2l-.72.72A5.45 5.45 0 0114.47 8a5.49 5.49 0 01-2.37 3.33A7.52 7.52 0 018 12.5a8.15 8.15 0 01-2.41-.38l-.78.78a8.9 8.9 0 003.19.6 8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.56 6.56 0 00-2.15-3.53z\" />,\n );\n case 'eye-half-dotted':\n return this.renderSvgIcon(\n <Fragment>\n <path d=\"M4.12 11.46A5.62 5.62 0 011.52 8 5.57 5.57 0 013.9 4.67 7.52 7.52 0 018 3.5a7.7 7.7 0 013.33.75l.74-.74A8.67 8.67 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.54 6.54 0 002.88 4.08z\" />\n <path d=\"M8 5a3 3 0 00-3 3 3 3 0 00.69 1.89l4.2-4.2A3 3 0 008 5zM5.88 5.88zM9.2 12.41a.51.51 0 00-.42.57.5.5 0 00.56.42.5.5 0 00.43-.57.51.51 0 00-.57-.42zM6.77 12.41a.5.5 0 00-.57.42.49.49 0 00.41.57.5.5 0 10.15-1zM14.48 5.61a.5.5 0 00-.7-.12.49.49 0 00-.12.69.5.5 0 00.82-.57zM11.5 11.68a.5.5 0 00-.22.67.51.51 0 00.68.22.5.5 0 00-.46-.89zM15.07 7.77a.52.52 0 00-.62.35.51.51 0 00.35.62.5.5 0 00.61-.35.52.52 0 00-.34-.62zM13.36 10.21a.5.5 0 10.76.64.49.49 0 00-.06-.7.51.51 0 00-.7.06z\" />\n </Fragment>,\n );\n case 'eye-open':\n return this.renderSvgIcon(\n <path d=\"M8 5a3 3 0 103 3 3 3 0 00-3-3zm4.65-1.17A8.53 8.53 0 008 2.5a8.53 8.53 0 00-4.65 1.33A6.57 6.57 0 00.51 7.89v.22a6.57 6.57 0 002.84 4.06A8.53 8.53 0 008 13.5a8.53 8.53 0 004.65-1.33 6.57 6.57 0 002.84-4.06v-.22a6.57 6.57 0 00-2.84-4.06zm-.55 7.5A7.52 7.52 0 018 12.5a7.52 7.52 0 01-4.1-1.17A5.49 5.49 0 011.53 8 5.49 5.49 0 013.9 4.67 7.52 7.52 0 018 3.5a7.52 7.52 0 014.1 1.17A5.49 5.49 0 0114.47 8a5.49 5.49 0 01-2.37 3.33z\" />,\n );\n case 'fit-all':\n return this.renderSvgIcon(\n <path d=\"M6.15,9.15l-2.5,2.5L2,10v4H6L4.35,12.35l2.5-2.5a.49.49,0,0,0-.7-.7Zm-1.8-5.5L6,2H2V6L3.65,4.35l2.5,2.5a.49.49,0,0,0,.7-.7ZM10,2l1.65,1.65-2.5,2.5a.49.49,0,0,0,.7.7l2.5-2.5L14,6V2ZM9.85,9.15a.49.49,0,0,0-.7.7l2.5,2.5L10,14h4V10l-1.65,1.65Z\" />,\n );\n case 'info':\n return this.renderSvgIcon(\n <path d=\"M8,15A7,7,0,1,0,1,8,7,7,0,0,0,8,15ZM3.73,3.77A6,6,0,1,1,2,8,6,6,0,0,1,3.73,3.77ZM8,12a.5.5,0,0,0,.5-.5v-5a.5.5,0,0,0-1,0v5A.5.5,0,0,0,8,12ZM8,5a.51.51,0,1,0-.35-.15A.47.47,0,0,0,8,5Z\" />,\n );\n case 'locate':\n return this.renderSvgIcon(\n <path d=\"M8,2a6,6,0,0,1,6,6,6,6,0,0,1,-6,6,6,6,0,0,1,-6,-6,6,6,0,0,1,6,-6ZM8,13a5,5,0,0,0,5,-5,5,5,0,0,0,-5,-5,5,5,0,0,0,-5,5,5,5,0,0,0,5,5ZM8,5a3,3,0,0,1,3,3,3,3,0,0,1,-3,3,3,3,0,0,1,-3,-3,3,3,0,0,1,3,-3ZM7.5,2v-1.5a.3,.3,0,0,1,1,0v1.5ZM7.5,14v1.5a.3,.3,0,0,0,1,0v-1.5ZM14,7.5h1.5a.3,.3,0,0,1,0,1h-1.5ZM2,7.5h-1.5a.3,.3,0,0,0,0,1h1.5ZM8,16v-5ZM16,8h-5ZM0,8h4Z\" />,\n );\n case 'lock':\n return this.renderSvgIcon(\n <path d=\"M13.85 6.15A.47.47 0 0 0 13.5 6H12V5a4 4 0 1 0-8 0v1H2.5a.47.47 0 0 0-.35.15.47.47 0 0 0-.15.35v8a.47.47 0 0 0 .15.35.47.47 0 0 0 .35.15h11a.51.51 0 0 0 .5-.5v-8a.47.47 0 0 0-.15-.35ZM5 5a3 3 0 1 1 6 0v1H5V5Zm8 9H3V7h10v7Zm-5.5-3.15V12a.5.5 0 1 0 1 0v-1.15a1 1 0 1 0-1 0Z\" />,\n );\n case 'pin-fill':\n return this.renderSvgIcon(\n <path d=\"M8,.55A5.9,5.9,0,0,0,2.1,6.44a9.14,9.14,0,0,0,2.66,6.24,11.44,11.44,0,0,0,1.93,1.65,7.43,7.43,0,0,0,.73.44l.28.12a.78.78,0,0,0,.6,0,6.65,6.65,0,0,0,1.34-.79,11.79,11.79,0,0,0,2.76-2.88,8.59,8.59,0,0,0,1.5-4.78A5.9,5.9,0,0,0,8,.55ZM8,8.44a2,2,0,1,1,2-2A2,2,0,0,1,8,8.44Z\" />,\n );\n case 'search':\n return this.renderSvgIcon(\n <path d=\"M14.85 14.15l-4-4a.37.37 0 00-.2-.12 5.45 5.45 0 10-.62.62.37.37 0 00.12.2l4 4a.49.49 0 00.7-.7zM9.71 9.71a4.51 4.51 0 01-6.42 0 4.51 4.51 0 010-6.42 4.51 4.51 0 016.42 0 4.51 4.51 0 010 6.42z\" />,\n );\n default:\n return <svg />;\n }\n }\n\n private renderSvgIcon(\n content: h.JSX.IntrinsicElements,\n ): h.JSX.IntrinsicElements {\n return (\n <Host\n class={classname({\n 'size-sm': this.size === 'sm',\n 'size-md': this.size === 'md',\n 'size-lg': this.size === 'lg',\n })}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n {content}\n </svg>\n </Host>\n );\n }\n}\n"],"mappings":";;;2GAAA,MAAMA,EAAgB,IAAM,2M,MCgCfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,kEAwBSC,KAAAC,KAAwB,IAwFhC,CAtFQ,MAAAC,GACL,OAAQF,KAAKG,MACX,IAAK,eACH,OAAOH,KAAKI,cACVC,EAAA,QACEC,EAAE,uFACFC,UAAU,qBAGhB,IAAK,gBACH,OAAOP,KAAKI,cACVC,EAAA,QAAMC,EAAE,uFAEZ,IAAK,eACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,8KAEZ,IAAK,iBACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,wJAEZ,IAAK,eACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,oYAEZ,IAAK,WACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,ufAEZ,IAAK,kBACH,OAAON,KAAKI,cACVC,EAACG,EAAQ,KACPH,EAAA,QAAMC,EAAE,6MACRD,EAAA,QAAMC,EAAE,seAGd,IAAK,WACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,+aAEZ,IAAK,UACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,oPAEZ,IAAK,OACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,4LAEZ,IAAK,SACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,qWAEZ,IAAK,OACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,qRAEZ,IAAK,WACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,mRAEZ,IAAK,SACH,OAAON,KAAKI,cACVC,EAAA,QAAMC,EAAE,sMAEZ,QACE,OAAOD,EAAA,Y,CAIL,aAAAD,CACNK,GAEA,OACEJ,EAACK,EAAI,CACHC,MAAOC,EAAU,CACf,UAAWZ,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,QAG3BI,EAAA,OAAKQ,MAAM,6BAA6BC,QAAQ,aAC7CL,G","ignoreList":[]}