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/viewer/p-11cf755a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["SceneTreeError","details","children","h","class","message","link","Fragment","href","target","DEFAULT_SCENE_TREE_OP_ANIMATION_MS","async","showItem","viewer","id","suppliedCorrelationId","scene","elements","op","items","where","q","withItemId","show","execute","hideItem","hide","selectItem","append","all","deselect","select","selectRangeInSceneTree","start","end","withSceneTreeRange","selectFilterResults","filter","keys","exactMatch","removeHiddenResults","withMetadata","deselectItem","isolateItem","animationDurationMs","renderResult","camera","flyTo","render","animation","milliseconds","onAnimationCompleted","once","sceneTreeCss","MIN_CLEAR_UNUSED_DATA_MS","SceneTree","constructor","hostRef","this","overScanCount","configEnv","searchOptions","metadataSearchExactMatch","metadataSearchKeys","metadataKeys","operationAnimationDuration","rows","totalRows","showLoader","showEmptyResults","stateMap","componentLoaded","hasPartialFilterResults","refreshingResults","attemptingRetry","firstCellRendered","invalidateRows","forceUpdate","getLayoutElement","scrollToIndex","index","options","animate","position","i","Math","max","min","top","getScrollToPosition","scrollToPosition","behavior","undefined","scrollToItem","itemId","rowsBeforeExpand","_a","controller","expandParentNodes","Promise","resolve","layoutEl","handleLayoutRendered","removeEventListener","addEventListener","expandAll","collapseAll","expandItem","row","performRowOperation","node","expanded","expandNode","collapseItem","collapseNode","toggleExpandItem","toggleItemVisibility","visible","partiallyVisible","recurseParent","ancestors","fetchNodeAncestors","isInPath","_b","selectionPath","includes","nodeForRow","getNodeFromRowOrIndex","immediateParentNodeIsSelected","length","selected","nodeIsSelectedAndParentIsUnselected","nextNode","find","lastSelectedItemId","range","currentRowIndex","_c","previouslySelectedIndex","_d","map","hex","getRowAtIndex","getRowForItemId","getRowForEvent","event","clientY","errorDetails","getSceneTreeContainsElement","el","isSceneTreeTableCellElement","getRowAtClientY","layoutOffset","floor","scrollOffset","rowHeight","filterItems","term","optionsAsFilterOptions","columns","columnsToSearch","getMetadataSearchKeys","selectFilteredItems","definedMetadataKeys","shouldSearchExactMatch","shouldSearchRemoveHiddenItems","_f","_e","removeHiddenItems","fetchMetadataKeys","disconnectedCallback","viewerDisposable","dispose","viewerSceneReadyDisposable","cancel","connectedCallback","connectToViewer","componentWillLoad","sceneTreeHost","getConfig","network","client","SceneTreeAPIClient","flags","grpcUseStreamingWebSocketTransport","transport","webSocketSubscriptionTransportFactory","SceneTreeController","setMetadataKeys","onStateChangeDisposable","onStateChange","on","state","handleControllerStateChange","updateMissingViewerError","componentDidLoad","ensureLayoutDefined","updateLayoutElement","resizeObserver","ResizeObserver","observe","componentWillRender","Host","key","name","actionLabel","onAction","refreshFilter","renderError","size","code","SceneTreeErrorCode","SCENE_TREE_DISABLED","onClick","retryConnectToViewer","disabled","handleViewerChanged","newViewer","oldViewer","handleControllerChanged","newController","handleMetadataKeysChanged","viewerSelector","document","querySelector","clearMissingViewerError","handleSceneReady","attemptComputeCellHeight","SceneTreeErrorDetails","MISSING_VIEWER","scheduleClearUnusedData","idleCallbackId","window","cancelIdleCallback","requestIdleCallback","foo","remaining","timeRemaining","call","startIndex","viewportStartIndex","endIndex","viewportEndIndex","getPageIndexesForRange","invalidatePagesOutsideRange","shouldShowLoading","shouldShowEmptyResults","isPartialFilterResponse","isSearching","connection","type","connectionError","emit","DISCONNECTED","rowOrIndex","Error","isLoadedRow","handleSearch","detail","e","console","error","handleCellLoaded","firstRowRendered","constrainedIndex","viewportHeight","layoutHeight","rowCenterY","rowBottomY","parseAndValidateConfig","config","layout","createElement","innerHTML","appendChild","tree","rowData","debug","SCENE_ITEM_NAME_METADATA_KEY"],"sources":["src/components/scene-tree/errors.tsx","src/components/scene-tree/lib/viewer-ops.ts","src/components/scene-tree/scene-tree.css?tag=vertex-scene-tree&encapsulation=shadow","src/components/scene-tree/scene-tree.tsx"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\n\nimport { SceneTreeErrorDetails } from './lib/errors';\n\ninterface SceneTreeErrorProps {\n details: SceneTreeErrorDetails;\n}\n\nexport const SceneTreeError: FunctionalComponent<SceneTreeErrorProps> = (\n { details },\n children,\n) => {\n return (\n <div class=\"error\">\n <div class=\"error-section error-message\">\n <span>{details.message}</span>\n {details.link && (\n <Fragment>\n <span> See our </span>\n <a href={details.link} target=\"_blank\">\n documentation\n </a>{' '}\n <span> for more information.</span>\n </Fragment>\n )}\n </div>\n <div class=\"error-section\">{children}</div>\n </div>\n );\n};\n","export const DEFAULT_SCENE_TREE_OP_ANIMATION_MS = 500;\n\nexport interface ViewerItemOptions {\n suppliedCorrelationId?: string;\n}\nexport interface ViewerSelectItemOptions extends ViewerItemOptions {\n append?: boolean;\n range?: boolean;\n}\nexport interface ViewerIsolateItemOptions extends ViewerItemOptions {\n animationDurationMs?: number;\n}\n\nexport async function showItem(\n viewer: HTMLVertexViewerElement,\n id: string,\n { suppliedCorrelationId }: ViewerItemOptions = {},\n): Promise<void> {\n const scene = await viewer.scene();\n return scene\n .elements((op) => op.items.where((q) => q.withItemId(id)).show())\n .execute({ suppliedCorrelationId });\n}\n\nexport async function hideItem(\n viewer: HTMLVertexViewerElement,\n id: string,\n { suppliedCorrelationId }: ViewerItemOptions = {},\n): Promise<void> {\n const scene = await viewer.scene();\n return scene\n .elements((op) => op.items.where((q) => q.withItemId(id)).hide())\n .execute({\n suppliedCorrelationId,\n });\n}\n\nexport async function selectItem(\n viewer: HTMLVertexViewerElement,\n id: string,\n { append = false, suppliedCorrelationId }: ViewerSelectItemOptions,\n): Promise<void> {\n const scene = await viewer.scene();\n return scene\n .elements((op) => [\n ...(append ? [] : [op.items.where((q) => q.all()).deselect()]),\n op.items.where((q) => q.withItemId(id)).select(),\n ])\n .execute({ suppliedCorrelationId });\n}\n\nexport async function selectRangeInSceneTree(\n viewer: HTMLVertexViewerElement,\n start: number,\n end: number,\n { append = true, suppliedCorrelationId }: ViewerSelectItemOptions,\n): Promise<void> {\n const scene = await viewer.scene();\n return scene\n .elements((op) => [\n ...(append ? [] : [op.items.where((q) => q.all()).deselect()]),\n op.items.where((q) => q.withSceneTreeRange({ start, end })).select(),\n ])\n .execute({\n suppliedCorrelationId,\n });\n}\n\nexport async function selectFilterResults(\n viewer: HTMLVertexViewerElement,\n filter: string,\n keys: string[],\n exactMatch: boolean,\n removeHiddenResults: boolean,\n { append = false, suppliedCorrelationId }: ViewerSelectItemOptions,\n): Promise<void> {\n const scene = await viewer.scene();\n return scene\n .elements((op) => [\n ...(append ? [] : [op.items.where((q) => q.all()).deselect()]),\n op.items\n .where((q) =>\n q.withMetadata(filter, keys, exactMatch, removeHiddenResults),\n )\n .select(),\n ])\n .execute({\n suppliedCorrelationId,\n });\n}\n\nexport async function deselectItem(\n viewer: HTMLVertexViewerElement,\n id: string,\n { suppliedCorrelationId }: ViewerItemOptions = {},\n): Promise<void> {\n const scene = await viewer.scene();\n return scene\n .elements((op) => op.items.where((q) => q.withItemId(id)).deselect())\n .execute({\n suppliedCorrelationId,\n });\n}\n\nexport async function isolateItem(\n viewer: HTMLVertexViewerElement,\n id: string,\n { suppliedCorrelationId, animationDurationMs }: ViewerIsolateItemOptions = {},\n): Promise<void> {\n const scene = await viewer.scene();\n await scene\n .elements((op) => [\n op.items.where((q) => q.all()).hide(),\n op.items.where((q) => q.withItemId(id)).show(),\n ])\n .execute({\n suppliedCorrelationId,\n });\n const renderResult = await scene\n .camera()\n .flyTo((q) => q.withItemId(id))\n .render({\n animation: {\n milliseconds: animationDurationMs ?? DEFAULT_SCENE_TREE_OP_ANIMATION_MS,\n },\n });\n await renderResult.onAnimationCompleted.once();\n}\n","@import url('../../css/button.css');\n\n:host {\n /**\n * @prop --scene-tree-toolbar-separator: A CSS border value that specifies the\n * border between scene tree toolbars.\n */\n --scene-tree-toolbar-separator: 1px solid var(--neutral-300);\n\n /**\n * @prop --scene-tree-default-font-family: The default font family to use for displaying\n * text within a <vertex-scene-tree>. Defaults to `unset`.\n */\n --scene-tree-default-font-family: unset;\n\n /**\n * @prop --scene-tree-default-font-size: The default font size to use for displaying\n * text within a <vertex-scene-tree>. Defaults to `unset`.\n */\n --scene-tree-default-font-size: unset;\n\n /**\n * @prop --scene-tree-default-font-color: The default font color to use for displaying\n * text within a <vertex-scene-tree>. Defaults to `unset`.\n */\n --scene-tree-default-font-color: unset;\n\n /**\n * @prop --scene-tree-secondary-font-color: The secondary font color to use for displaying\n * secondary text within a <vertex-scene-tree>. Defaults to `unset`.\n */\n --scene-tree-secondary-font-color: unset;\n\n /**\n * @prop --scene-tree-selected-row-background-color: The background color to use when\n * displaying selected rows. This value always takes precedence if the row is selected.\n * Defaults to `unset`.\n */\n --scene-tree-selected-row-background-color: unset;\n\n /**\n * @prop --scene-tree-hovered-row-background-color: The background color to use when\n * displaying hovered rows. This value takes precedence only if the row is not selected.\n * Defaults to `unset`.\n */\n --scene-tree-hovered-row-background-color: unset;\n\n /**\n * @prop --scene-tree-row-background-color: The default background color to use for displaying\n * rows within a <vertex-scene-tree>. Defaults to `unset`, and will be overridden\n * by any depth specific background configuration.\n */\n --scene-tree-row-background-color: unset;\n\n /**\n * @prop --scene-tree-row-background-color-depth-n: The background color to use for n-depth\n * rows, where `n` is replaced with the desired depth. Defaults to `unset` for all\n * depths.\n *\n * @example\n * The following definition will cause all rows representing items at a depth of 1\n * to display with a red background, leaving all other depths unchanged.\n * \n * --scene-tree-row-background-color-depth-1: #ff0000\n */\n --scene-tree-row-background-color-depth-n: unset;\n\n\n /**\n * @prop --scene-tree-overlay-z-index: A CSS z-index value that will\n * set the z-index of the tree overlays. Defaults to 3000.\n */\n --scene-tree-overlay-z-index: 3000;\n\n width: 300px;\n height: 100%;\n user-select: none;\n -webkit-user-select: none;\n cursor: default;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.rows-scroll {\n position: relative;\n height: var(--scene-tree-row-height, 0);\n flex-grow: 1;\n}\n\n.rows {\n position: relative;\n}\n\n.row {\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n height: var(--scene-tree-row-height);\n padding: var(--scene-tree-row-padding);\n box-sizing: border-box;\n}\n\n.row:hover {\n background-color: var(--scene-tree-row-hover-color);\n}\n\n.row.is-selected {\n background-color: var(--scene-tree-row-selected-color);\n}\n\n.expand-toggle {\n cursor: pointer;\n width: 16px;\n}\n\n.row-text {\n margin-left: 0.25rem;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.visibility-btn {\n display: flex;\n align-items: center;\n visibility: hidden;\n padding: 4px;\n}\n\n.visibility-btn.is-hidden {\n visibility: visible;\n}\n\n.row:hover .visibility-btn {\n visibility: visible;\n}\n\n.error,\n.empty-results {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 0.875rem;\n width: 100%;\n height: 100%;\n padding: 1rem;\n box-sizing: border-box;\n justify-content: center;\n background-color: white;\n z-index: var(--scene-tree-overlay-z-index);\n}\n\n.error-section {\n margin-top: 1rem;\n}\n\n.error-message {\n text-align: center;\n}\n\n.search-toolbar,\nslot[name='header']::slotted(*) {\n border-bottom: var(--scene-tree-toolbar-separator);\n}\n\nslot[name='footer']::slotted(:not(:last-child)) {\n border-top: var(--scene-tree-toolbar-separator);\n}\n\n.header {\n display: flex;\n flex-direction: column;\n}\n\n.footer {\n display: flex;\n flex-direction: column;\n}\n\n.loading {\n position: absolute;\n top: 150px;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { ElementPool } from '@vertexvis/html-templates';\nimport { Node } from '@vertexvis/scene-tree-protos/scenetree/protos/domain_pb';\nimport { SceneTreeAPIClient } from '@vertexvis/scene-tree-protos/scenetree/protos/scene_tree_api_pb_service';\nimport { Disposable } from '@vertexvis/utils';\n\nimport {\n Config,\n parseAndValidateConfig,\n PartialConfig,\n} from '../../lib/config';\nimport { Environment } from '../../lib/environment';\nimport { isSceneTreeTableCellElement } from '../scene-tree-table-cell/utils';\nimport { SceneTreeError } from './errors';\nimport {\n FilterTreeOptions,\n SceneTreeController,\n SceneTreeState,\n} from './lib/controller';\nimport { getSceneTreeContainsElement } from './lib/dom';\nimport { SceneTreeErrorCode, SceneTreeErrorDetails } from './lib/errors';\nimport { webSocketSubscriptionTransportFactory } from './lib/grpc';\nimport { isLoadedRow, Row } from './lib/row';\nimport {\n deselectItem,\n hideItem,\n isolateItem,\n selectFilterResults,\n selectItem,\n selectRangeInSceneTree,\n showItem,\n} from './lib/viewer-ops';\nimport {\n FilterOptions,\n MetadataKey,\n RowArg,\n RowDataProvider,\n SCENE_ITEM_NAME_METADATA_KEY,\n SceneTreeOperationOptions,\n ScrollToOptions,\n SelectItemOptions,\n} from './types';\n\n/**\n * The minimum amount of time provided by requestIdleCallback to clear purged\n * data. A value too low may cause contention with browser rendering. A value\n * too high will cause too many items to be accumulated.\n */\nconst MIN_CLEAR_UNUSED_DATA_MS = 25;\n\ninterface StateMap {\n idleCallbackId?: number;\n resizeObserver?: ResizeObserver;\n componentLoaded: boolean;\n\n client?: SceneTreeAPIClient;\n jwt?: string;\n\n onStateChangeDisposable?: Disposable;\n subscribeDisposable?: Disposable;\n viewerDisposable?: Disposable;\n viewerSceneReadyDisposable?: Disposable;\n\n elementPool?: ElementPool;\n template?: HTMLTemplateElement;\n\n selectionPath?: string[];\n\n layoutEl?: HTMLVertexSceneTreeTableLayoutElement;\n}\n\ntype OperationHandler = (data: {\n viewer: HTMLVertexViewerElement;\n id: string;\n node: Node.AsObject;\n}) => void | Promise<void>;\n\n/**\n * @slot header - A slot that places content above the rows in the tree. By\n * default, a search toolbar will be placed in this slot. Elements can be\n * stacked by assigning multiple elements to this slot.\n * @slot footer - A slot that places content below the rows in the tree.\n * Elements can be stacked by assigning multiple elements to this slot.\n */\n@Component({\n tag: 'vertex-scene-tree',\n styleUrl: 'scene-tree.css',\n shadow: true,\n})\nexport class SceneTree {\n /**\n * The number of offscreen rows above and below the viewport to render. Having\n * a higher number reduces the chance of the browser not displaying a row\n * while scrolling.\n */\n @Prop()\n public overScanCount = 25;\n\n /**\n * A CSS selector that points to a `<vertex-viewer>` element. Either this\n * property or `viewer` must be set.\n */\n @Prop()\n public viewerSelector?: string;\n\n /**\n * An instance of a `<vertex-viewer>` element. Either this property or\n * `viewerSelector` must be set.\n */\n @Prop({ reflect: true, mutable: true })\n public viewer?: HTMLVertexViewerElement | null;\n\n /**\n * A callback that is invoked immediately before a row is about to be rendered.\n * This callback can return additional data that can be bound to in a\n * template.\n *\n * @example\n *\n * ```html\n * <script>\n * const table = document.querySelector('vertex-scene-tree-table');\n * table.rowData = (row) => {\n * return { func: () => console.log('row', row.node.name) };\n * }\n * </script>\n *\n * <vertex-scene-tree>\n * <vertex-scene-tree-table>\n * <vertex-scene-tree-table-column>\n * <template>\n * <button event:click=\"{{row.data.func}}\">Hi</button>\n * </template>\n * </vertex-scene-tree-table-column>\n * </vertex-scene-tree-table>\n * </vertex-scene-tree>\n * ```\n */\n @Prop()\n public rowData?: RowDataProvider;\n\n /**\n * An object to configure the scene tree.\n */\n @Prop()\n public config?: PartialConfig | string;\n\n /**\n * Sets the default environment for the viewer. This setting is used for\n * auto-configuring network hosts.\n *\n * Use the `config` property for manually setting hosts.\n */\n @Prop()\n public configEnv: Environment = 'platprod';\n\n @Prop({ mutable: true })\n public controller?: SceneTreeController;\n\n /**\n * A set of options to configure scene tree searching behavior.\n */\n @Prop({ mutable: true })\n public searchOptions: FilterOptions = {};\n\n /**\n * @deprecated Use `searchOptions`\n * Indicates whether the metadata search should use an exact match.\n */\n @Prop({ mutable: true })\n public metadataSearchExactMatch = false;\n\n /**\n * @deprecated Use `searchOptions`\n * A list of the metadata keys that a scene tree search should be performed on.\n */\n @Prop({ mutable: true })\n public metadataSearchKeys: MetadataKey[] = [];\n\n /**\n * A list of part metadata keys that will be made available to each row. This\n * metadata can be used for data binding inside the scene tree's template.\n *\n * **Note:** for the values of these metadata keys to be evaluated for search,\n * they must be provided to the `metadataSearchKeys` specified in the `searchOptions`.\n * Otherwise, the search will only be performed against the item name.\n */\n @Prop()\n public metadataKeys: MetadataKey[] = [];\n\n /**\n * The duration of operations with animations, in milliseconds, when a user performs\n * an action that results in an animation such as isolate. Defaults to 500ms.\n */\n @Prop()\n public operationAnimationDuration = 500;\n\n /**\n * An event that is emitted when this <vertex-scene-tree> encounters a connection\n * error.\n */\n @Event()\n public connectionError!: EventEmitter<SceneTreeErrorDetails>;\n\n /**\n * An event that is emitted when the first row of this <vertex-scene-tree> has\n * been rendered.\n */\n @Event()\n public firstRowRendered!: EventEmitter<void>;\n\n @State()\n private rows: Row[] = [];\n\n @State()\n private totalRows = 0;\n\n @State()\n private showLoader = false;\n\n @State()\n private showEmptyResults = false;\n\n /**\n * This stores internal state that you want to preserve across live-reloads,\n * but shouldn't trigger a refresh if the data changes. Marking this with\n * @State to allow to preserve state across live-reloads.\n */\n @State()\n private stateMap: StateMap = {\n componentLoaded: false,\n };\n\n @State()\n private errorDetails: SceneTreeErrorDetails | undefined;\n\n @State()\n private hasPartialFilterResults = false;\n\n @State()\n private refreshingResults = false;\n\n @State()\n private attemptingRetry = false;\n\n @Element()\n private el!: HTMLElement;\n\n private lastSelectedItemId?: string;\n private firstCellRendered = false;\n\n /**\n * Schedules a render of the rows in the scene tree. Useful if any custom\n * data in your scene tree has changed, and you want to update the row's\n * contents.\n *\n * **Note:** This is an asynchronous operation. The update may happen on the\n * next frame.\n */\n @Method()\n public async invalidateRows(): Promise<void> {\n forceUpdate(this.getLayoutElement());\n }\n\n /**\n * Scrolls the tree to the given row index.\n *\n * @param index An index of the row to scroll to.\n * @param options A set of options to configure the scrolling behavior.\n */\n @Method()\n public async scrollToIndex(\n index: number,\n options: ScrollToOptions = {},\n ): Promise<void> {\n const { animate, position = 'middle' } = options;\n const i = Math.max(0, Math.min(index, this.totalRows));\n\n const top = this.getScrollToPosition(i, position);\n\n await this.getLayoutElement().scrollToPosition(top, {\n behavior: animate ? 'smooth' : undefined,\n });\n }\n\n /**\n * Scrolls the tree to an item with the given ID. If the node for the item is\n * not expanded, the tree will expand each of its parent nodes.\n *\n * @param itemId An ID of an item to scroll to.\n * @param options A set of options to configure the scrolling behavior.\n * @returns A promise that resolves when the operation is finished.\n */\n @Method()\n public async scrollToItem(\n itemId: string,\n options: ScrollToOptions = {},\n ): Promise<void> {\n const rowsBeforeExpand = this.totalRows;\n const index = await this.controller?.expandParentNodes(itemId);\n\n if (index != null && rowsBeforeExpand !== this.totalRows) {\n return new Promise((resolve) => {\n const layoutEl = this.getLayoutElement();\n const handleLayoutRendered = async (): Promise<void> => {\n layoutEl.removeEventListener('layoutRendered', handleLayoutRendered);\n await this.scrollToIndex(index, options);\n resolve();\n };\n\n layoutEl.addEventListener('layoutRendered', handleLayoutRendered);\n });\n } else if (index != null) {\n await this.scrollToIndex(index, options);\n }\n }\n\n /**\n * Performs an API call to expand all nodes in the tree.\n */\n @Method()\n public async expandAll(): Promise<void> {\n await this.controller?.expandAll();\n }\n\n /**\n * Performs an API call to collapse all nodes in the tree.\n */\n @Method()\n public async collapseAll(): Promise<void> {\n await this.controller?.collapseAll();\n }\n\n /**\n * Performs an API call that will expand the node associated to the specified\n * row or row index.\n *\n * @param row A row, row index, or node to expand.\n */\n @Method()\n public async expandItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ id, node }) => {\n if (!node.expanded) {\n await this.controller?.expandNode(id);\n }\n });\n }\n\n /**\n * Performs an API call that will collapse the node associated to the\n * specified row or row index.\n *\n * @param row A row, row index, or node to collapse.\n */\n @Method()\n public async collapseItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ id, node }) => {\n if (node.expanded) {\n await this.controller?.collapseNode(id);\n }\n });\n }\n\n /**\n * Performs an API call that will either expand or collapse the node\n * associated to the given row or row index.\n *\n * @param row The row, row index, or node to collapse or expand.\n */\n @Method()\n public async toggleExpandItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ node }) => {\n if (node.expanded) {\n await this.collapseItem(node);\n } else {\n await this.expandItem(node);\n }\n });\n }\n\n /**\n * Performs an API call that will either hide or show the item associated to\n * the given row or row index.\n *\n * @param row The row, row index, or node to toggle visibility.\n */\n @Method()\n public async toggleItemVisibility(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ viewer, id, node }) => {\n if (node.visible || node.partiallyVisible) {\n await hideItem(viewer, id);\n } else {\n await showItem(viewer, id);\n }\n });\n }\n\n /**\n * Performs an API call that will hide the item associated to the given row\n * or row index.\n *\n * @param row The row, row index, or node to hide.\n */\n @Method()\n public async hideItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ viewer, id, node }) => {\n if (node.visible) {\n await hideItem(viewer, id);\n }\n });\n }\n\n /**\n * Performs an API call that will show the item associated to the given row\n * or row index.\n *\n * @param row The row, row index, or node to show.\n */\n @Method()\n public async showItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ viewer, id, node }) => {\n if (!node.visible) {\n await showItem(viewer, id);\n }\n });\n }\n\n /**\n * Performs an API call that will select the item associated to the given row\n * or row index.\n *\n * This method supports a `recurseParent` option that allows for recursively\n * selecting the next unselected parent node. This behavior is considered\n * stateful. Each call to `selectItem` will track the ancestry of the passed\n * in `rowArg`. If calling `selectItem` with a row not belonging to the\n * ancestry of a previous selection, then this method will perform a standard\n * selection.\n *\n * @param row The row, row index or node to select.\n * @param options A set of options to configure selection behavior.\n */\n @Method()\n public async selectItem(\n row: RowArg,\n { recurseParent, ...options }: SelectItemOptions = {},\n ): Promise<void> {\n await this.performRowOperation(row, async ({ viewer, id }) => {\n const ancestors = (await this.controller?.fetchNodeAncestors(id)) || [];\n\n // The parent node should be selected if recurseParent is true and either\n // the given node is in the selection path (so was intentionally selected by clicking in the tree)\n // or if the given node is selected, but its immediate parent is not. The second case covers the\n // situation that the given node was selected as part of a previous ancestor selection and the\n // user wishes to clear the selection list and only select the given node.\n const isInPath = this.stateMap.selectionPath?.includes(id);\n\n const nodeForRow = this.getNodeFromRowOrIndex(row);\n const immediateParentNodeIsSelected =\n ancestors.length > 0 ? ancestors[0].selected : true;\n const nodeIsSelectedAndParentIsUnselected =\n nodeForRow.selected && !immediateParentNodeIsSelected;\n\n if (recurseParent && (isInPath || nodeIsSelectedAndParentIsUnselected)) {\n const nextNode = ancestors.find(({ selected }) => !selected);\n if (nextNode != null) {\n await this.selectItem(nextNode, options);\n this.lastSelectedItemId = id;\n } else {\n await selectItem(viewer, id, options);\n this.lastSelectedItemId = id;\n }\n } else if (options.range && this.lastSelectedItemId != null) {\n const currentRowIndex = await this.controller?.expandParentNodes(id);\n const previouslySelectedIndex =\n await this.controller?.expandParentNodes(this.lastSelectedItemId);\n\n if (previouslySelectedIndex && currentRowIndex) {\n const start = Math.min(previouslySelectedIndex, currentRowIndex);\n const end = Math.max(previouslySelectedIndex, currentRowIndex);\n await selectRangeInSceneTree(viewer, start, end, options);\n }\n } else {\n await selectItem(viewer, id, options);\n this.lastSelectedItemId = id;\n }\n\n this.stateMap.selectionPath = [\n ...ancestors.map(({ id }) => id?.hex || ''),\n id,\n ];\n });\n }\n\n /**\n * Performs an API call that will deselect the item associated to the given\n * row or row index.\n *\n * @param row The row, row index, or node to deselect.\n */\n @Method()\n public async deselectItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ viewer, id, node }) => {\n if (node.selected) {\n this.lastSelectedItemId = undefined;\n await deselectItem(viewer, id);\n }\n });\n }\n\n /**\n * Performs an API call that will show only the item associated to\n * the given row or row index and fit the camera to the item's bounding box.\n *\n * @param row The row, row index, or node to isolate.\n */\n @Method()\n public async isolateItem(row: RowArg): Promise<void> {\n await this.performRowOperation(row, async ({ viewer, id }) => {\n await isolateItem(viewer, id, {\n animationDurationMs: this.operationAnimationDuration,\n });\n });\n }\n\n /**\n * Returns a row at the given index. If the row data has not been loaded,\n * returns `undefined`.\n *\n * @param index The index of the row.\n * @returns A row, or `undefined` if the row hasn't been loaded.\n */\n @Method()\n public async getRowAtIndex(index: number): Promise<Row> {\n return this.rows[index];\n }\n\n /**\n * Returns the row with the given id. If there is not a row\n * matching the id, returns `undefined`.\n *\n * @param itemId An ID of an item to return the row for.\n * @returns A row, or `undefined` if a corresponding row doesn't exist\n */\n @Method()\n public async getRowForItemId(itemId: string): Promise<Row | undefined> {\n const index = await this.controller?.expandParentNodes(itemId);\n if (index != null) {\n return this.rows[index];\n } else {\n return undefined;\n }\n }\n\n /**\n * Returns the row data from the given mouse or pointer event. The event must\n * originate from a `vertex-scene-tree-table-cell` contained by this element,\n * otherwise `undefined` is returned.\n *\n * @param event A mouse or pointer event that originated from this component.\n * @returns A row, or `undefined` if the row hasn't been loaded.\n */\n @Method()\n public async getRowForEvent(event: MouseEvent | PointerEvent): Promise<Row> {\n const { clientY, target } = event;\n\n if (\n target != null &&\n this.errorDetails == null &&\n getSceneTreeContainsElement(this.el, target as HTMLElement) &&\n isSceneTreeTableCellElement(target)\n ) {\n return this.getRowAtClientY(clientY);\n } else {\n return undefined;\n }\n }\n\n /**\n * Returns the row data from the given vertical client position.\n *\n * @param clientY The vertical client position.\n * @returns A row or `undefined` if the row hasn't been loaded.\n */\n @Method()\n public getRowAtClientY(clientY: number): Promise<Row> {\n const layoutEl = this.getLayoutElement();\n const top = layoutEl.layoutOffset;\n const index = Math.floor(\n (clientY - top + layoutEl.scrollOffset) / layoutEl.rowHeight,\n );\n return this.getRowAtIndex(index);\n }\n\n /**\n * Performs an async request that will filter the displayed items in the tree\n * that match the given term and options.\n *\n * @param term The filter term.\n * @param options The options to apply to the filter.\n * @returns A promise that completes when the request has completed. Note,\n * items are displayed asynchronously. So the displayed items may not reflect\n * the result of this filter when the promise completes.\n */\n @Method()\n public async filterItems(\n term: string,\n options: FilterTreeOptions = {},\n ): Promise<void> {\n const optionsAsFilterOptions: FilterOptions = {\n ...options,\n metadataSearchKeys: options.columns,\n };\n const columnsToSearch = this.getMetadataSearchKeys(optionsAsFilterOptions);\n\n return this.controller?.filter(term, {\n ...options,\n columns: columnsToSearch,\n });\n }\n\n /**\n * Performs an async request that will select the filtered items in the tree\n * that match the given term.\n *\n * @param term The filter term.\n * @returns A promise that completes when the request has completed.\n */\n @Method()\n public async selectFilteredItems(\n term: string,\n options?: SceneTreeOperationOptions,\n ): Promise<void> {\n if (this.viewer != null) {\n const metadataSearchKeys =\n this.searchOptions?.metadataSearchKeys ?? this.metadataSearchKeys;\n const definedMetadataKeys =\n metadataSearchKeys.length > 0 ? metadataSearchKeys : this.metadataKeys;\n\n const columnsToSearch =\n definedMetadataKeys.length > 0\n ? definedMetadataKeys\n : ['VERTEX_SCENE_ITEM_NAME'];\n\n const shouldSearchExactMatch =\n this.searchOptions?.exactMatch ?? this.metadataSearchExactMatch;\n const shouldSearchRemoveHiddenItems =\n this.searchOptions?.removeHiddenItems ?? false;\n\n await selectFilterResults(\n this.viewer,\n term,\n columnsToSearch,\n shouldSearchExactMatch,\n shouldSearchRemoveHiddenItems,\n {\n append: false,\n ...options,\n },\n );\n }\n }\n\n /**\n * Fetches the metadata keys that are available to the scene tree. Metadata\n * keys can be assigned to the scene tree using the `metadataKeys` property.\n * The scene tree will fetch this metadata and make these values available\n * for data binding.\n *\n * @returns A promise that resolves with the names of available keys.\n */\n @Method()\n public async fetchMetadataKeys(): Promise<MetadataKey[]> {\n return this.controller?.fetchMetadataKeys() ?? [];\n }\n\n /**\n * @ignore\n */\n protected disconnectedCallback(): void {\n this.stateMap.viewerDisposable?.dispose();\n this.stateMap.viewerSceneReadyDisposable?.dispose();\n this.controller?.cancel();\n }\n\n /**\n * @ignore\n */\n protected connectedCallback(): void {\n this.connectToViewer();\n }\n\n /**\n * @ignore\n */\n protected componentWillLoad(): void {\n if (this.controller == null) {\n const { sceneTreeHost } = this.getConfig().network;\n const client = new SceneTreeAPIClient(\n sceneTreeHost,\n this.getConfig().flags.grpcUseStreamingWebSocketTransport\n ? {\n transport: webSocketSubscriptionTransportFactory,\n }\n : undefined,\n );\n this.controller = new SceneTreeController(client, 100);\n this.controller?.setMetadataKeys(this.metadataKeys);\n }\n\n this.stateMap.onStateChangeDisposable = this.controller.onStateChange.on(\n (state) => this.handleControllerStateChange(state),\n );\n\n this.connectToViewer();\n this.updateMissingViewerError();\n }\n\n /**\n * @ignore\n */\n protected async componentDidLoad(): Promise<void> {\n this.ensureLayoutDefined();\n this.updateLayoutElement();\n\n const layoutEl = this.getLayoutElement();\n const resizeObserver = new ResizeObserver(() => {\n this.invalidateRows();\n });\n resizeObserver.observe(layoutEl);\n this.stateMap.resizeObserver = resizeObserver;\n\n this.stateMap.componentLoaded = true;\n\n this.controller?.setMetadataKeys(this.metadataKeys);\n }\n\n public componentWillRender(): void {\n // The controller can load data prior to the first render\n // ensure that this renders any time the state changes.\n this.updateLayoutElement();\n }\n\n /**\n * @ignore\n */\n protected render(): h.JSX.IntrinsicElements {\n return (\n <Host>\n <div class=\"header\">\n <slot name=\"header\">\n <vertex-scene-tree-toolbar class=\"search-toolbar\">\n <vertex-scene-tree-search controller={this.controller} />\n </vertex-scene-tree-toolbar>\n </slot>\n </div>\n\n <slot name=\"partial-filter-results-banner\">\n {this.hasPartialFilterResults && (\n <vertex-scene-tree-notification-banner\n message={\n this.refreshingResults\n ? 'Refreshing results...'\n : 'Data loading, refresh for more.'\n }\n actionLabel=\"Refresh\"\n onAction={() => this.controller?.refreshFilter()}\n />\n )}\n </slot>\n\n {this.errorDetails != null && this.renderError(this.errorDetails)}\n\n {this.errorDetails == null && (\n <div class=\"rows-scroll\">\n {this.showLoader && (\n <slot name=\"loading\">\n <vertex-viewer-spinner class=\"loading\" size=\"md\" />\n </slot>\n )}\n <slot />\n {this.showEmptyResults && (\n <slot name=\"empty-results\">\n <div class=\"empty-results\">No Results Found.</div>\n </slot>\n )}\n </div>\n )}\n\n <div class=\"footer\">\n <slot name=\"footer\" />\n </div>\n </Host>\n );\n }\n\n private renderError(details: SceneTreeErrorDetails): h.JSX.IntrinsicElements {\n if (details.code !== SceneTreeErrorCode.SCENE_TREE_DISABLED) {\n return (\n <SceneTreeError details={details}>\n <button\n class=\"button button-secondary\"\n onClick={() => this.retryConnectToViewer()}\n disabled={this.attemptingRetry}\n >\n Retry\n </button>\n </SceneTreeError>\n );\n } else {\n return <SceneTreeError details={details} />;\n }\n }\n\n /**\n * @ignore\n */\n @Watch('viewer')\n protected handleViewerChanged(\n newViewer: HTMLVertexViewerElement | undefined,\n oldViewer: HTMLVertexViewerElement | undefined,\n ): void {\n // StencilJS will invoke this callback even before the component has been\n // loaded. According to their docs, this shouldn't happen. Return if the\n // component hasn't been loaded.\n // See https://stenciljs.com/docs/reactive-data#watch-decorator\n if (!this.stateMap.componentLoaded) {\n return;\n }\n\n this.connectToViewer();\n }\n\n /**\n * @ignore\n */\n @Watch('controller')\n protected handleControllerChanged(newController: SceneTreeController): void {\n // StencilJS will invoke this callback even before the component has been\n // loaded. According to their docs, this shouldn't happen. Return if the\n // component hasn't been loaded.\n // See https://stenciljs.com/docs/reactive-data#watch-decorator\n if (!this.stateMap.componentLoaded) {\n return;\n }\n\n this.stateMap.onStateChangeDisposable?.dispose();\n\n this.stateMap.onStateChangeDisposable = newController.onStateChange.on(\n (state) => this.handleControllerStateChange(state),\n );\n\n newController.setMetadataKeys(this.metadataKeys);\n }\n\n /**\n * @ignore\n */\n @Watch('metadataKeys')\n protected handleMetadataKeysChanged(): void {\n this.controller?.setMetadataKeys(this.metadataKeys);\n }\n\n private retryConnectToViewer(): void {\n this.attemptingRetry = true;\n this.errorDetails = undefined;\n this.connectToViewer();\n }\n\n private connectToViewer(): void {\n this.stateMap.viewerDisposable?.dispose();\n this.stateMap.viewerSceneReadyDisposable?.dispose();\n\n if (this.viewer == null && this.viewerSelector != null) {\n this.viewer = document.querySelector(this.viewerSelector) as\n | HTMLVertexViewerElement\n | undefined;\n }\n\n if (this.viewer != null) {\n this.clearMissingViewerError();\n\n const handleSceneReady = async (): Promise<void> => {\n const layoutEl = this.getLayoutElement();\n\n await layoutEl.attemptComputeCellHeight();\n };\n\n this.viewer.addEventListener('sceneReady', handleSceneReady);\n this.stateMap.viewerDisposable = this.controller?.connectToViewer(\n this.viewer,\n );\n this.stateMap.viewerSceneReadyDisposable = {\n dispose: () =>\n this.viewer?.removeEventListener('sceneReady', handleSceneReady),\n };\n } else {\n this.attemptingRetry = false;\n if (this.stateMap.componentLoaded) {\n this.updateMissingViewerError();\n }\n }\n }\n\n private updateMissingViewerError(): void {\n if (this.viewer == null) {\n this.errorDetails = new SceneTreeErrorDetails(\n 'MISSING_VIEWER',\n SceneTreeErrorCode.MISSING_VIEWER,\n );\n }\n }\n\n private clearMissingViewerError(): void {\n if (this.errorDetails?.code === SceneTreeErrorCode.MISSING_VIEWER) {\n this.errorDetails = undefined;\n }\n }\n\n private scheduleClearUnusedData(): void {\n if (this.stateMap.idleCallbackId != null) {\n window.cancelIdleCallback(this.stateMap.idleCallbackId);\n }\n\n this.stateMap.idleCallbackId = window.requestIdleCallback((foo) => {\n const remaining = foo.timeRemaining?.();\n\n if (remaining == null || remaining >= MIN_CLEAR_UNUSED_DATA_MS) {\n const layoutEl = this.getLayoutElement();\n const startIndex = layoutEl.viewportStartIndex;\n const endIndex = layoutEl.viewportEndIndex;\n const [start, end] =\n this.controller?.getPageIndexesForRange(startIndex, endIndex) || [];\n\n if (start != null && end != null) {\n this.controller?.invalidatePagesOutsideRange(start, end, 50);\n }\n } else {\n this.scheduleClearUnusedData();\n }\n });\n }\n\n private handleControllerStateChange(state: SceneTreeState): void {\n this.showLoader = !!state.shouldShowLoading;\n this.showEmptyResults = !!state.shouldShowEmptyResults;\n this.rows = state.rows;\n this.totalRows = state.totalRows;\n this.hasPartialFilterResults = !!state.isPartialFilterResponse;\n this.refreshingResults = !!state.isSearching;\n\n if (state.connection.type === 'failure') {\n this.errorDetails = state.connection.details;\n this.connectionError.emit(state.connection.details);\n } else if (state.connection.type === 'disconnected') {\n this.errorDetails = new SceneTreeErrorDetails(\n 'DISCONNECTED',\n SceneTreeErrorCode.DISCONNECTED,\n );\n } else {\n this.errorDetails = undefined;\n }\n\n if (\n state.connection.type === 'connected' ||\n state.connection.type === 'failure'\n ) {\n this.attemptingRetry = false;\n }\n }\n\n private getNodeFromRowOrIndex(\n rowOrIndex: number | Row | Node.AsObject,\n ): Node.AsObject {\n const row =\n typeof rowOrIndex === 'number' ? this.rows[rowOrIndex] : rowOrIndex;\n\n if (row == null) {\n throw new Error(`Cannot perform scene tree operation. Row not found.`);\n }\n\n return isLoadedRow(row) ? row.node : row;\n }\n\n private async performRowOperation(\n rowOrIndex: number | Row | Node.AsObject,\n op: OperationHandler,\n ): Promise<void> {\n const node = this.getNodeFromRowOrIndex(rowOrIndex);\n\n if (node.id == null) {\n throw new Error(`Cannot perform scene tree operation. ID is undefined.`);\n }\n\n if (this.viewer == null) {\n throw new Error(\n `Cannot perform scene tree operation. Cannot get reference to viewer.`,\n );\n }\n\n await op({ viewer: this.viewer, id: node.id.hex, node });\n }\n\n @Listen('search')\n protected async handleSearch(event: CustomEvent<string>): Promise<void> {\n const columnsToSearch = this.getMetadataSearchKeys(this.searchOptions);\n\n const shouldSearchExactMatch =\n this.searchOptions?.exactMatch ?? this.metadataSearchExactMatch;\n const shouldSearchRemoveHiddenItems =\n this.searchOptions?.removeHiddenItems ?? false;\n\n try {\n await this.filterItems(event.detail, {\n columns: columnsToSearch,\n exactMatch: shouldSearchExactMatch,\n removeHiddenItems: shouldSearchRemoveHiddenItems,\n });\n } catch (e) {\n console.error('Failed to filter tree with exception: ', e);\n }\n }\n\n @Listen('cellLoaded')\n protected async handleCellLoaded(): Promise<void> {\n if (!this.firstCellRendered && this.rows.length > 0) {\n this.firstCellRendered = true;\n this.firstRowRendered.emit();\n }\n }\n\n private getScrollToPosition(\n index: number,\n position: ScrollToOptions['position'],\n ): number {\n const layoutEl = this.getLayoutElement();\n const constrainedIndex = Math.max(0, Math.min(index, this.totalRows - 1));\n const viewportHeight = layoutEl.layoutHeight ?? 0;\n const rowHeight = layoutEl.rowHeight;\n\n if (position === 'start') {\n return constrainedIndex * rowHeight;\n } else if (position === 'middle') {\n const rowCenterY = constrainedIndex * rowHeight + rowHeight / 2;\n return rowCenterY - viewportHeight / 2;\n } else {\n const rowBottomY = constrainedIndex * rowHeight + rowHeight;\n return rowBottomY - viewportHeight;\n }\n }\n\n private getConfig(): Config {\n return parseAndValidateConfig(this.configEnv, this.config);\n }\n\n private ensureLayoutDefined(): void {\n let layout = this.el.querySelector('vertex-scene-tree-table-layout');\n if (layout == null) {\n layout = document.createElement('vertex-scene-tree-table-layout');\n layout.innerHTML = `\n <vertex-scene-tree-table-column>\n <template>\n <vertex-scene-tree-table-cell prop:value=\"{{row.node.name}}\" expand-toggle isolate-button visibility-toggle></vertex-scene-tree-table-cell>\n </template>\n </vertex-scene-tree-table-column>\n `;\n\n this.el.appendChild(layout);\n }\n this.stateMap.layoutEl = layout;\n }\n\n private updateLayoutElement(): void {\n const layout = this.stateMap.layoutEl;\n if (layout != null) {\n layout.rows = this.rows;\n layout.tree = this.el as HTMLVertexSceneTreeElement;\n layout.totalRows = this.totalRows;\n layout.controller = this.controller;\n layout.rowData = this.rowData;\n } else if (!this.stateMap.componentLoaded && this.totalRows > 0) {\n console.debug(\n 'Scene tree has rows, but the component has not yet rendered',\n );\n }\n }\n\n private getLayoutElement(): HTMLVertexSceneTreeTableLayoutElement {\n if (this.stateMap.layoutEl != null) {\n return this.stateMap.layoutEl;\n } else {\n throw new Error('Layout element is undefined');\n }\n }\n\n private getMetadataSearchKeys(options: FilterOptions): string[] | undefined {\n const metadataSearchKeys =\n options?.metadataSearchKeys ?? this.metadataSearchKeys;\n const shouldSearchExactMatch =\n options?.exactMatch ?? this.metadataSearchExactMatch;\n\n if (shouldSearchExactMatch) {\n // If we're performing an exact match search, we want to include the searched\n // metadata keys if provided. In the case that none have been provided, simply\n // fall back the item name.\n const definedMetadataKeys =\n metadataSearchKeys.length > 0\n ? metadataSearchKeys\n : [SCENE_ITEM_NAME_METADATA_KEY];\n\n return definedMetadataKeys;\n } else if (metadataSearchKeys.length > 0) {\n // If we're not performing an exact match search, and a set of metadata keys\n // to search against have been provided, we want to include those in the request.\n return metadataSearchKeys;\n }\n\n // If we're not performing an exact match search, and we have no provided metadata\n // search keys, we can perform a name-only search, and omit the array of keys.\n return undefined;\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/viewer/{p-29d14611.entry.js → p-16775f7d.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{r as t,c as n,h as e,H as s,a as i}from"./p-CCVkga9Q.js";import{v as o,q as h,m as a,h as r}from"./p-CkIzrpO0.js";import{o as l}from"./p-Ct0GdHoc.js";import{M as d}from"./p-EsKoKfmx.js";import"./p-Dp56p_jX.js";import"./p-BAhfr1Nx.js";import{V as c}from"./p-BsBIynwj.js";import"./p-CG9AChtV.js";import"./p-C7dYsPFU.js";import"./p-Og6pwwEB.js";const u=()=>`:host{position:absolute;pointer-events:none;visibility:hidden}:host([hydrated]){visibility:hidden}:host(.ready){visibility:inherit}:host(:not([interactions-off]))>*{pointer-events:auto}`;const f=class{constructor(e){t(this,e);this.occlusionStateChanged=n(this,"occlusionStateChanged");this.detachedStateChanged=n(this,"detachedStateChanged");this.propertyChange=n(this,"propertyChange");this.position=o.origin();this.positionJson="";this.quaternion=h.create();this.quaternionJson="";this.scale=o.create(1,1,1);this.scaleJson="";this.matrix=a.makeIdentity();this.occlusionOff=false;this.occluded=false;this.detachedOff=true;this.detached=false;this.billboardOff=false;this.interactionsOff=false}handlePositionChange(){this.syncMatrix()}handlePositionJsonChanged(){this.syncPosition()}handleRotationChanged(){this.syncQuaternionWithRotation()}handleRotationJsonChanged(){this.syncRotation()}handleQuaternionChange(){this.syncMatrix()}handleQuaternionJsonChanged(){this.syncQuaternion()}handleScaleChange(){this.syncMatrix()}handleScaleJsonChanged(){this.syncScale()}handleMatrixChanged(t,n){if(!l.isEqual(t,n)){this.propertyChange.emit()}}connectedCallback(){this.syncProperties()}componentShouldUpdate(t,n,e){return e==="occluded"}handleOcclusionStateChanged(){this.occlusionStateChanged.emit(this.occluded)}handleDetachedStateChanged(){this.detachedStateChanged.emit(this.detached)}syncProperties(){this.syncPosition();this.syncRotation();this.syncQuaternion();this.syncScale();this.syncMatrix()}syncPosition(){this.position=this.positionJson.length>0?this.parseJson("positionJson",this.positionJson,o.fromJson):this.position}syncRotation(){this.rotation=this.rotationJson!=null&&this.rotationJson.length>0?this.parseJson("rotationJson",this.rotationJson,r.fromJson):this.rotation;this.syncQuaternionWithRotation()}syncQuaternionWithRotation(){this.quaternion=this.rotation!=null?h.fromEuler(this.rotation):this.quaternion}syncQuaternion(){this.quaternion=this.quaternionJson.length>0?this.parseJson("quaternionJson",this.quaternionJson,h.fromJson):this.quaternion}syncScale(){this.scale=this.scaleJson.length>0?this.parseJson("scaleJson",this.scaleJson,o.fromJson):this.scale}syncMatrix(){if(this.position!=null&&this.quaternion!=null&&this.scale!=null){this.matrix=a.makeTRS(this.position,this.quaternion,this.scale)}}parseJson(t,n,e){try{return e(n)}catch(n){console.warn(`Could not parse \`${t}\`. Invalid JSON.`);throw n}}render(){return e(s,{key:"bf50fa97cdf5d144f262f721d3adc778340dc913"},e("slot",{key:"46d2e88b7d3ec6daae905d8c509cbe1a2b0d0a12"}))}static get watchers(){return{position:[{handlePositionChange:1}],positionJson:[{handlePositionJsonChanged:1}],rotation:[{handleRotationChanged:1}],rotationJson:[{handleRotationJsonChanged:1}],quaternion:[{handleQuaternionChange:1}],quaternionJson:[{handleQuaternionJsonChanged:1}],scale:[{handleScaleChange:1}],scaleJson:[{handleScaleJsonChanged:1}],matrix:[{handleMatrixChanged:0}],occluded:[{handleOcclusionStateChanged:0}],detached:[{handleDetachedStateChanged:0}]}}};f.style=u();function p(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-DOM-ELEMENT"&&t.matrix!=null}function v(t){return(t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-DOM-GROUP"||t instanceof HTMLElement&&t.dataset.isDomGroupElement!=null)&&t.matrix!=null}const m=(t,n)=>e("div",{class:"root-2d"},n);function C(t,n,e,s,i){const o=g(t,n,s).sort(((t,n)=>t.distanceToCamera-n.distanceToCamera));for(let t=0;t<o.length;t++){const{element:n,worldMatrix:h,worldPosition:a}=o[t];const r=i==null;const l=r||!n.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(a,e));const d=r||!n.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(a,e));const c=x(a,s.projectionViewMatrix,e);w(n,c);y(n,t,o.length);C(n,h,e,s,i);n.occluded=l!==null&&l!==void 0?l:false;n.detached=d!==null&&d!==void 0?d:false;n.classList.add("ready")}}function g(t,n,e){const s=[];for(let i=0;i<t.children.length;i++){const h=t.children[i];if(v(h)){const t=a.multiply(n,h.matrix);s.push(...g(h,t,e))}else if(p(h)){const t=a.multiply(n,h.matrix);const i=o.fromMatrixPosition(t);const r=o.distanceSquared(e.position,i);s.push({element:h,worldMatrix:t,worldPosition:i,distanceToCamera:r})}else{s.push(...g(h,n,e))}}return s}function w(t,n){t.style.transform=[`translate(-50%, -50%)`,`translate(${n.x}px, ${n.y}px)`].join(" ")}function y(t,n,e){t.style.zIndex=`${e-n}`}function x(t,n,e){const s=o.transformMatrix(t,n);return e.transformVectorToViewport(s)}const E=({camera:t,viewport:n},s)=>{const i=a.toObject(t.projectionMatrix);const o=t.isOrthographic()?t.far*2/(t.fovHeight*2)*(n.height/2):i.m22*(n.height/2);const h=[`translateZ(${o}px)`,b(t.viewMatrix),`translate(${n.width/2}px, ${n.height/2}px)`].join(" ");return e("div",{class:"root-3d",style:{perspective:`${o}px`}},e("div",{class:"camera",style:{transform:h}},s))};function J(t,n,e,s,i){for(let o=0;o<t.children.length;o++){const h=t.children[o];if(p(h)){M(h,n,e,s,i)}else if(v(h)){R(h,n,e,s,i)}else{J(h,n,e,s,i)}}}function M(t,n,e,s,i){const h=a.multiply(n,t.matrix);const r=o.fromMatrixPosition(h);const l=i==null;const d=l||!t.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(r,e));t.occluded=d!==null&&d!==void 0?d:false;const c=l||!t.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(r,e));t.detached=c!==null&&c!==void 0?c:false;t.classList.add("ready");if(t.billboardOff){t.style.transform=P(h)}else{let n=s.viewMatrix;n=a.transpose(n);n=a.position(n,h);n=a.scale(n,t.scale);n[3]=0;n[7]=0;n[11]=0;n[15]=1;t.style.transform=P(n)}J(t,h,e,s,i)}function R(t,n,e,s,i){const o=a.multiply(n,t.matrix);J(t,o,e,s,i)}function b(t){const n=[S(t[0]),S(-t[1]),S(t[2]),S(t[3]),S(t[4]),S(-t[5]),S(t[6]),S(t[7]),S(t[8]),S(-t[9]),S(t[10]),S(t[11]),S(t[12]),S(-t[13]),S(t[14]),S(t[15])].join(", ");return`matrix3d(${n})`}function P(t){const n=[S(t[0]),S(t[1]),S(t[2]),S(t[3]),S(-t[4]),S(-t[5]),S(-t[6]),S(-t[7]),S(t[8]),S(t[9]),S(t[10]),S(t[11]),S(t[12]),S(t[13]),S(t[14]),S(t[15])].join(", ");return[`translate(-50%, -50%)`,`matrix3d(${n})`].join(" ")}function S(t){return Math.abs(t)<1e-10?0:t}const j=()=>`.sc-vertex-viewer-dom-renderer-h{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}.root-3d.sc-vertex-viewer-dom-renderer{width:100%;height:100%;pointer-events:inherit}.camera.sc-vertex-viewer-dom-renderer{transform-style:preserve-3d;pointer-events:inherit;width:100%;height:100%}`;const V=class{constructor(n){t(this,n);this.drawMode="3d";this.propagateEventsToViewer=true;this.viewport=new c(0,0);this.invalidateFrameCounter=0;this.interactionDisposables=[];this.handleViewerFrameDrawn=async()=>{this.updatePropsFromViewer()}}componentWillLoad(){var t;const n=new ResizeObserver((()=>this.handleResize()));n.observe(this.hostEl);const e=new MutationObserver((()=>this.handleChildrenChange()));e.observe(this.hostEl,{childList:true});this.handleViewerChange(this.viewer,undefined);if(((t=this.viewer)===null||t===void 0?void 0:t.frame)!=null){this.handleViewerFrameDrawn()}}render(){if(this.camera!=null){if(this.drawMode==="2d"){return e(s,null,e(m,null,e("slot",null)))}else{return e(s,null,e(E,{camera:this.camera,viewport:this.viewport},e("slot",null)))}}else{return e(s,null)}}componentWillRender(){this.updateElements()}handleViewerChange(t,n){n===null||n===void 0?void 0:n.removeEventListener("frameDrawn",this.handleViewerFrameDrawn);t===null||t===void 0?void 0:t.addEventListener("frameDrawn",this.handleViewerFrameDrawn);if(this.propagateEventsToViewer&&t!=null){this.handleEventPropagationToViewer(t)}}handlePropertyChange(){this.invalidateFrame()}invalidateFrame(){this.invalidateFrameCounter=this.invalidateFrameCounter+1}handleEventPropagationToViewer(t){this.interactionDisposables.forEach((t=>{t.dispose()}));this.interactionDisposables=[];t.getInteractionHandlers().then((t=>{t.forEach((t=>{if(t instanceof d){const n=t.registerAdditionalElement(this.hostEl);this.interactionDisposables=[...this.interactionDisposables,n]}}))}))}async updateElements(){const{viewport:t,camera:n}=this;const e=a.makeIdentity();if(n!=null){if(this.drawMode==="3d"){J(this.hostEl,e,t,n,this.depthBuffer)}else{C(this.hostEl,e,t,n,this.depthBuffer)}}}handleResize(){const t=this.hostEl.getBoundingClientRect();this.viewport=new c(t.width,t.height)}handleChildrenChange(){this.invalidateFrame()}async updatePropsFromViewer(){const{frame:t}=this.viewer||{};this.depthBuffer=await(t===null||t===void 0?void 0:t.depthBuffer());this.camera=t===null||t===void 0?void 0:t.scene.camera}get hostEl(){return i(this)}static get watchers(){return{viewer:[{handleViewerChange:0}]}}};V.style=j();export{f as vertex_viewer_dom_element,V as vertex_viewer_dom_renderer};
-//# sourceMappingURL=p-29d14611.entry.js.map
+import{r as t,c as n,h as e,H as s,a as i}from"./p-CCVkga9Q.js";import{v as o,q as h,m as a,h as r}from"./p-CkIzrpO0.js";import{o as l}from"./p-Ct0GdHoc.js";import{M as d}from"./p-EsKoKfmx.js";import"./p-Dp56p_jX.js";import"./p-BAhfr1Nx.js";import{V as c}from"./p-BsBIynwj.js";import"./p-CG9AChtV.js";import"./p-C7dYsPFU.js";import"./p-Og6pwwEB.js";const u=()=>`:host{position:absolute;pointer-events:none;visibility:hidden}:host([hydrated]){visibility:hidden}:host(.ready){visibility:inherit}:host(:not([interactions-off]))>*{pointer-events:auto}`;const f=class{constructor(e){t(this,e);this.occlusionStateChanged=n(this,"occlusionStateChanged");this.detachedStateChanged=n(this,"detachedStateChanged");this.propertyChange=n(this,"propertyChange");this.position=o.origin();this.positionJson="";this.quaternion=h.create();this.quaternionJson="";this.scale=o.create(1,1,1);this.scaleJson="";this.matrix=a.makeIdentity();this.occlusionOff=false;this.occluded=false;this.detachedOff=true;this.detached=false;this.billboardOff=false;this.interactionsOff=false}handlePositionChange(){this.syncMatrix()}handlePositionJsonChanged(){this.syncPosition()}handleRotationChanged(){this.syncQuaternionWithRotation()}handleRotationJsonChanged(){this.syncRotation()}handleQuaternionChange(){this.syncMatrix()}handleQuaternionJsonChanged(){this.syncQuaternion()}handleScaleChange(){this.syncMatrix()}handleScaleJsonChanged(){this.syncScale()}handleMatrixChanged(t,n){if(!l.isEqual(t,n)){this.propertyChange.emit()}}connectedCallback(){this.syncProperties()}componentShouldUpdate(t,n,e){return e==="occluded"}handleOcclusionStateChanged(){this.occlusionStateChanged.emit(this.occluded)}handleDetachedStateChanged(){this.detachedStateChanged.emit(this.detached)}syncProperties(){this.syncPosition();this.syncRotation();this.syncQuaternion();this.syncScale();this.syncMatrix()}syncPosition(){this.position=this.positionJson.length>0?this.parseJson("positionJson",this.positionJson,o.fromJson):this.position}syncRotation(){this.rotation=this.rotationJson!=null&&this.rotationJson.length>0?this.parseJson("rotationJson",this.rotationJson,r.fromJson):this.rotation;this.syncQuaternionWithRotation()}syncQuaternionWithRotation(){this.quaternion=this.rotation!=null?h.fromEuler(this.rotation):this.quaternion}syncQuaternion(){this.quaternion=this.quaternionJson.length>0?this.parseJson("quaternionJson",this.quaternionJson,h.fromJson):this.quaternion}syncScale(){this.scale=this.scaleJson.length>0?this.parseJson("scaleJson",this.scaleJson,o.fromJson):this.scale}syncMatrix(){if(this.position!=null&&this.quaternion!=null&&this.scale!=null){this.matrix=a.makeTRS(this.position,this.quaternion,this.scale)}}parseJson(t,n,e){try{return e(n)}catch(n){console.warn(`Could not parse \`${t}\`. Invalid JSON.`);throw n}}render(){return e(s,{key:"9f708ca2a98e38bf3d61551273f43c691ab55edf"},e("slot",{key:"510635ebdbe7bb9c73a8375b15c22f359a62c8e4"}))}static get watchers(){return{position:[{handlePositionChange:1}],positionJson:[{handlePositionJsonChanged:1}],rotation:[{handleRotationChanged:1}],rotationJson:[{handleRotationJsonChanged:1}],quaternion:[{handleQuaternionChange:1}],quaternionJson:[{handleQuaternionJsonChanged:1}],scale:[{handleScaleChange:1}],scaleJson:[{handleScaleJsonChanged:1}],matrix:[{handleMatrixChanged:0}],occluded:[{handleOcclusionStateChanged:0}],detached:[{handleDetachedStateChanged:0}]}}};f.style=u();function p(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-DOM-ELEMENT"&&t.matrix!=null}function v(t){return(t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-DOM-GROUP"||t instanceof HTMLElement&&t.dataset.isDomGroupElement!=null)&&t.matrix!=null}const m=(t,n)=>e("div",{class:"root-2d"},n);function C(t,n,e,s,i){const o=g(t,n,s).sort(((t,n)=>t.distanceToCamera-n.distanceToCamera));for(let t=0;t<o.length;t++){const{element:n,worldMatrix:h,worldPosition:a}=o[t];const r=i==null;const l=r||!n.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(a,e));const d=r||!n.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(a,e));const c=x(a,s.projectionViewMatrix,e);w(n,c);y(n,t,o.length);C(n,h,e,s,i);n.occluded=l!==null&&l!==void 0?l:false;n.detached=d!==null&&d!==void 0?d:false;n.classList.add("ready")}}function g(t,n,e){const s=[];for(let i=0;i<t.children.length;i++){const h=t.children[i];if(v(h)){const t=a.multiply(n,h.matrix);s.push(...g(h,t,e))}else if(p(h)){const t=a.multiply(n,h.matrix);const i=o.fromMatrixPosition(t);const r=o.distanceSquared(e.position,i);s.push({element:h,worldMatrix:t,worldPosition:i,distanceToCamera:r})}else{s.push(...g(h,n,e))}}return s}function w(t,n){t.style.transform=[`translate(-50%, -50%)`,`translate(${n.x}px, ${n.y}px)`].join(" ")}function y(t,n,e){t.style.zIndex=`${e-n}`}function x(t,n,e){const s=o.transformMatrix(t,n);return e.transformVectorToViewport(s)}const E=({camera:t,viewport:n},s)=>{const i=a.toObject(t.projectionMatrix);const o=t.isOrthographic()?t.far*2/(t.fovHeight*2)*(n.height/2):i.m22*(n.height/2);const h=[`translateZ(${o}px)`,R(t.viewMatrix),`translate(${n.width/2}px, ${n.height/2}px)`].join(" ");return e("div",{class:"root-3d",style:{perspective:`${o}px`}},e("div",{class:"camera",style:{transform:h}},s))};function J(t,n,e,s,i){for(let o=0;o<t.children.length;o++){const h=t.children[o];if(p(h)){b(h,n,e,s,i)}else if(v(h)){M(h,n,e,s,i)}else{J(h,n,e,s,i)}}}function b(t,n,e,s,i){const h=a.multiply(n,t.matrix);const r=o.fromMatrixPosition(h);const l=i==null;const d=l||!t.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(r,e));t.occluded=d!==null&&d!==void 0?d:false;const c=l||!t.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(r,e));t.detached=c!==null&&c!==void 0?c:false;t.classList.add("ready");if(t.billboardOff){t.style.transform=P(h)}else{let n=s.viewMatrix;n=a.transpose(n);n=a.position(n,h);n=a.scale(n,t.scale);n[3]=0;n[7]=0;n[11]=0;n[15]=1;t.style.transform=P(n)}J(t,h,e,s,i)}function M(t,n,e,s,i){const o=a.multiply(n,t.matrix);J(t,o,e,s,i)}function R(t){const n=[S(t[0]),S(-t[1]),S(t[2]),S(t[3]),S(t[4]),S(-t[5]),S(t[6]),S(t[7]),S(t[8]),S(-t[9]),S(t[10]),S(t[11]),S(t[12]),S(-t[13]),S(t[14]),S(t[15])].join(", ");return`matrix3d(${n})`}function P(t){const n=[S(t[0]),S(t[1]),S(t[2]),S(t[3]),S(-t[4]),S(-t[5]),S(-t[6]),S(-t[7]),S(t[8]),S(t[9]),S(t[10]),S(t[11]),S(t[12]),S(t[13]),S(t[14]),S(t[15])].join(", ");return[`translate(-50%, -50%)`,`matrix3d(${n})`].join(" ")}function S(t){return Math.abs(t)<1e-10?0:t}const j=()=>`.sc-vertex-viewer-dom-renderer-h{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}.root-3d.sc-vertex-viewer-dom-renderer{width:100%;height:100%;pointer-events:inherit}.camera.sc-vertex-viewer-dom-renderer{transform-style:preserve-3d;pointer-events:inherit;width:100%;height:100%}`;const V=class{constructor(n){t(this,n);this.drawMode="3d";this.propagateEventsToViewer=true;this.viewport=new c(0,0);this.invalidateFrameCounter=0;this.interactionDisposables=[];this.handleViewerFrameDrawn=async()=>{this.updatePropsFromViewer()}}componentWillLoad(){var t;const n=new ResizeObserver((()=>this.handleResize()));n.observe(this.hostEl);const e=new MutationObserver((()=>this.handleChildrenChange()));e.observe(this.hostEl,{childList:true});this.handleViewerChange(this.viewer,undefined);if(((t=this.viewer)===null||t===void 0?void 0:t.frame)!=null){this.handleViewerFrameDrawn()}}render(){if(this.camera!=null){if(this.drawMode==="2d"){return e(s,null,e(m,null,e("slot",null)))}else{return e(s,null,e(E,{camera:this.camera,viewport:this.viewport},e("slot",null)))}}else{return e(s,null)}}componentWillRender(){this.updateElements()}handleViewerChange(t,n){n===null||n===void 0?void 0:n.removeEventListener("frameDrawn",this.handleViewerFrameDrawn);t===null||t===void 0?void 0:t.addEventListener("frameDrawn",this.handleViewerFrameDrawn);if(this.propagateEventsToViewer&&t!=null){this.handleEventPropagationToViewer(t)}}handlePropertyChange(){this.invalidateFrame()}invalidateFrame(){this.invalidateFrameCounter=this.invalidateFrameCounter+1}handleEventPropagationToViewer(t){this.interactionDisposables.forEach((t=>{t.dispose()}));this.interactionDisposables=[];t.getInteractionHandlers().then((t=>{t.forEach((t=>{if(t instanceof d){const n=t.registerAdditionalElement(this.hostEl);this.interactionDisposables=[...this.interactionDisposables,n]}}))}))}async updateElements(){const{viewport:t,camera:n}=this;const e=a.makeIdentity();if(n!=null){if(this.drawMode==="3d"){J(this.hostEl,e,t,n,this.depthBuffer)}else{C(this.hostEl,e,t,n,this.depthBuffer)}}}handleResize(){const t=this.hostEl.getBoundingClientRect();this.viewport=new c(t.width,t.height)}handleChildrenChange(){this.invalidateFrame()}async updatePropsFromViewer(){const{frame:t}=this.viewer||{};this.depthBuffer=await(t===null||t===void 0?void 0:t.depthBuffer());this.camera=t===null||t===void 0?void 0:t.scene.camera}get hostEl(){return i(this)}static get watchers(){return{viewer:[{handleViewerChange:0}]}}};V.style=j();export{f as vertex_viewer_dom_element,V as vertex_viewer_dom_renderer};
+//# sourceMappingURL=p-16775f7d.entry.js.map

package/dist/viewer/p-16775f7d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["viewerDomElementCss","ViewerDomElement","constructor","hostRef","this","position","Vector3","origin","positionJson","quaternion","Quaternion","create","quaternionJson","scale","scaleJson","matrix","Matrix4","makeIdentity","occlusionOff","occluded","detachedOff","detached","billboardOff","interactionsOff","handlePositionChange","syncMatrix","handlePositionJsonChanged","syncPosition","handleRotationChanged","syncQuaternionWithRotation","handleRotationJsonChanged","syncRotation","handleQuaternionChange","handleQuaternionJsonChanged","syncQuaternion","handleScaleChange","handleScaleJsonChanged","syncScale","handleMatrixChanged","newMatrix","oldMatrix","Objects","isEqual","propertyChange","emit","connectedCallback","syncProperties","componentShouldUpdate","newValue","oldValue","prop","handleOcclusionStateChanged","occlusionStateChanged","handleDetachedStateChanged","detachedStateChanged","length","parseJson","fromJson","rotation","rotationJson","Euler","fromEuler","makeTRS","propName","value","parse","e","console","warn","render","h","Host","key","isVertexViewerDomElement","el","HTMLElement","nodeName","isVertexViewerDomGroup","dataset","isDomGroupElement","Renderer2d","_","children","class","update2d","hostEl","parentWorldMatrix","viewport","camera","depthBuffer","elements","getElementDepths","sort","a","b","distanceToCamera","i","element","worldMatrix","worldPosition","depthBufferIsNull","isOccluded","isDetached","screenPt","getScreenPosition","projectionViewMatrix","updateTransform","updateDepth","classList","add","results","child","multiply","push","fromMatrixPosition","distanceSquared","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","getElementCssMatrix","m","transpose","epsilon","values","Math","abs","viewerDomRendererCss","ViewerDomRenderer","drawMode","propagateEventsToViewer","Viewport","invalidateFrameCounter","interactionDisposables","handleViewerFrameDrawn","async","updatePropsFromViewer","componentWillLoad","resized","ResizeObserver","handleResize","observe","mutation","MutationObserver","handleChildrenChange","childList","handleViewerChange","viewer","undefined","_a","frame","componentWillRender","updateElements","newViewer","oldViewer","removeEventListener","addEventListener","handleEventPropagationToViewer","handlePropertyChange","invalidateFrame","forEach","disposable","dispose","getInteractionHandlers","then","handlers","handler","MultiElementInteractionHandler","registerAdditionalElement","bounds","getBoundingClientRect","scene"],"sources":["src/components/viewer-dom-element/viewer-dom-element.css?tag=vertex-viewer-dom-element&encapsulation=shadow","src/components/viewer-dom-element/viewer-dom-element.tsx","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":[":host {\n position: absolute;\n pointer-events: none;\n visibility: hidden;\n}\n\n/* Ignore Stencil's hydrated prop in favor of a custom `ready` selector. This\n * prevents flashing of elements before Stencil has a time to position the\n * element in 3D space.\n */\n:host([hydrated]) {\n visibility: hidden;\n}\n\n:host(.ready) {\n visibility: inherit;\n}\n\n:host(:not([interactions-off])) > * {\n pointer-events: auto;\n}\n","/* eslint-disable @typescript-eslint/member-ordering */\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { Euler, Matrix4, Quaternion, Vector3 } from '@vertexvis/geometry';\nimport { Objects } from '@vertexvis/utils';\n\nimport { HTMLDomRendererPositionableElement } from '../../interfaces';\n\n/**\n * The `ViewerDomElement` is responsible for managing a\n * `<vertex-viewer-dom-element>` element. These elements are intended to be\n * added as children to a `<vertex-viewer-dom-renderer>` and represent an\n * individual DOM element within a local 3D scene.\n */\n@Component({\n tag: 'vertex-viewer-dom-element',\n styleUrl: 'viewer-dom-element.css',\n shadow: true,\n})\nexport class ViewerDomElement implements HTMLDomRendererPositionableElement {\n /**\n * The local 3D position of where this element is located.\n */\n @Prop({ mutable: true, attribute: null })\n public position: Vector3.Vector3 = Vector3.origin();\n\n /**\n * @ignore\n */\n @Watch('position', { immediate: true })\n protected handlePositionChange(): void {\n this.syncMatrix();\n }\n\n /**\n * The local 3D position of where this element is located, as a JSON string.\n * JSON representation can either be in the format of `[x, y, z]` or `{\"x\": 0,\n * \"y\": 0, \"z\": 0}`.\n */\n @Prop({ attribute: 'position' })\n public positionJson = '';\n\n /**\n * @ignore\n */\n @Watch('positionJson', { immediate: true })\n protected handlePositionJsonChanged(): void {\n this.syncPosition();\n }\n\n /**\n * The local rotation of this element in Euler angles.\n */\n @Prop({ mutable: true, attribute: null })\n public rotation?: Euler.Euler;\n\n /**\n * @ignore\n */\n @Watch('rotation', { immediate: true })\n protected handleRotationChanged(): void {\n this.syncQuaternionWithRotation();\n }\n\n /**\n * The local rotation of this element in Euler angles, as a JSON string. JSON\n * representation can either be `[x, y, z, order]` or `{\"x\": 0, \"y\": 0, \"z\":\n * 0, \"order\": \"xyz\"}`.\n */\n @Prop({ attribute: 'rotation' })\n public rotationJson?: string;\n\n /**\n * @ignore\n */\n @Watch('rotationJson', { immediate: true })\n protected handleRotationJsonChanged(): void {\n this.syncRotation();\n }\n\n /**\n * The local rotation of this element.\n */\n @Prop({ mutable: true, attribute: null })\n public quaternion: Quaternion.Quaternion = Quaternion.create();\n\n /**\n * @ignore\n */\n @Watch('quaternion', { immediate: true })\n protected handleQuaternionChange(): void {\n this.syncMatrix();\n }\n\n /**\n * The local quaternion rotation of this element, as a JSON string. JSON\n * representation can either be `[x, y, z, w]` or `{\"x\": 0, \"y\": 0, \"z\":\n * 0, \"w\": 1}`.\n */\n @Prop({ attribute: 'quaternion' })\n public quaternionJson = '';\n\n /**\n * @ignore\n */\n @Watch('quaternionJson', { immediate: true })\n protected handleQuaternionJsonChanged(): void {\n this.syncQuaternion();\n }\n\n /**\n * The local scale of this element.\n */\n @Prop({ mutable: true, attribute: null })\n public scale: Vector3.Vector3 = Vector3.create(1, 1, 1);\n\n /**\n * @ignore\n */\n @Watch('scale', { immediate: true })\n protected handleScaleChange(): void {\n this.syncMatrix();\n }\n\n /**\n * The local scale of this element, as a JSON string. JSON string\n * representation can either be in the format of `[x, y, z]` or `{\"x\": 0, \"y\":\n * 0, \"z\": 0}`.\n */\n @Prop({ attribute: 'scale' })\n public scaleJson = '';\n\n /**\n * @ignore\n */\n @Watch('scaleJson', { immediate: true })\n protected handleScaleJsonChanged(): void {\n this.syncScale();\n }\n\n /**\n * @ignore\n */\n @Watch('matrix')\n protected handleMatrixChanged(\n newMatrix: Matrix4.Matrix4,\n oldMatrix: Matrix4.Matrix4,\n ): void {\n if (!Objects.isEqual(newMatrix, oldMatrix)) {\n this.propertyChange.emit();\n }\n }\n\n /**\n * The local matrix of this element.\n */\n @Prop({ mutable: true, attribute: null })\n public matrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n /**\n * Disables occlusion testing for this element. Defaults to enabled. When\n * enabled, the elements position will be tested against the current depth\n * buffer. If the position is occluded, then the `occluded` attribute will be\n * set.\n */\n @Prop()\n public occlusionOff = false;\n\n /**\n * Indicates if the element is hidden by geometry. This property can be used\n * with a CSS selector to modify the appearance of the element when its\n * occluded.\n *\n * @example\n *\n * ```html\n * <style>\n * vertex-viewer-dom-element[occluded] {\n * opacity: 0;\n * }\n * </style>\n * ```\n */\n @Prop({ reflect: true })\n public occluded = false;\n\n /**\n * Dispatched when the occlusion state is changed.\n */\n @Event({ bubbles: true })\n public occlusionStateChanged!: EventEmitter<boolean>;\n\n /**\n * **EXPERIMENTAL**\n * Disables detached testing for this element. Defaults to disabled. When\n * enabled, the elements position will be tested against the current depth\n * buffer. If the position is detached, then the `detached` attribute will be\n * set.\n */\n @Prop()\n public detachedOff = true;\n\n /**\n * **EXPERIMENTAL**\n * Indicates if the element is detached from geometry. This property can be used\n * with a CSS selector to modify the appearance of the element when its\n * detached.\n *\n * @example\n *\n * ```html\n * <style>\n * vertex-viewer-dom-element[detached] {\n * opacity: 0;\n * }\n * </style>\n * ```\n */\n @Prop({ reflect: true })\n public detached = false;\n\n /**\n * **EXPERIMENTAL**\n * Dispatched when the detached state is changed.\n */\n @Event({ bubbles: true })\n public detachedStateChanged!: EventEmitter<boolean>;\n\n /**\n * Disables the billboarding behavior of the element. When billboarding is\n * enabled, the element will always be oriented towards the screen.\n */\n @Prop()\n public billboardOff = false;\n\n /**\n * Disables interaction events from children.\n */\n @Prop({ reflect: true })\n public interactionsOff = false;\n\n /**\n * An event that is emitted when any property on the dom group changes\n */\n @Event({ bubbles: true })\n public propertyChange!: EventEmitter<void>;\n\n /**\n * @ignore\n */\n protected connectedCallback(): void {\n this.syncProperties();\n }\n\n /**\n * @ignore\n */\n protected componentShouldUpdate(\n newValue: unknown,\n oldValue: unknown,\n prop: string,\n ): boolean {\n return prop === 'occluded';\n }\n\n /**\n * @ignore\n */\n @Watch('occluded')\n protected handleOcclusionStateChanged(): void {\n this.occlusionStateChanged.emit(this.occluded);\n }\n\n /**\n * @ignore\n */\n @Watch('detached')\n protected handleDetachedStateChanged(): void {\n this.detachedStateChanged.emit(this.detached);\n }\n\n private syncProperties(): void {\n this.syncPosition();\n this.syncRotation();\n this.syncQuaternion();\n this.syncScale();\n this.syncMatrix();\n }\n\n private syncPosition(): void {\n this.position =\n this.positionJson.length > 0\n ? this.parseJson('positionJson', this.positionJson, Vector3.fromJson)\n : this.position;\n }\n\n private syncRotation(): void {\n this.rotation =\n this.rotationJson != null && this.rotationJson.length > 0\n ? this.parseJson('rotationJson', this.rotationJson, Euler.fromJson)\n : this.rotation;\n this.syncQuaternionWithRotation();\n }\n\n private syncQuaternionWithRotation(): void {\n this.quaternion =\n this.rotation != null\n ? Quaternion.fromEuler(this.rotation)\n : this.quaternion;\n }\n\n private syncQuaternion(): void {\n this.quaternion =\n this.quaternionJson.length > 0\n ? this.parseJson(\n 'quaternionJson',\n this.quaternionJson,\n Quaternion.fromJson,\n )\n : this.quaternion;\n }\n\n private syncScale(): void {\n this.scale =\n this.scaleJson.length > 0\n ? this.parseJson('scaleJson', this.scaleJson, Vector3.fromJson)\n : this.scale;\n }\n\n private syncMatrix(): void {\n if (\n this.position != null &&\n this.quaternion != null &&\n this.scale != null\n ) {\n this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\n }\n }\n\n private parseJson<T>(\n propName: string,\n value: string,\n parse: (str: string) => T,\n ): T {\n try {\n return parse(value);\n } catch (e) {\n console.warn(`Could not parse \\`${propName}\\`. Invalid JSON.`);\n throw e;\n }\n }\n\n /**\n * @ignore\n */\n protected render(): h.JSX.IntrinsicElements {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n","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/viewer/{p-5a85cae5.entry.js → p-1eb636f8.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as i,F as t,r as e}from"./p-CCVkga9Q.js";import{p as n,m as o,v as s}from"./p-CkIzrpO0.js";import"./p-_93RRNxT.js";import"./p-CVWO4w6b.js";import"./p-ChqXy0cG.js";import"./p-BNuMPeJ8.js";import"./p-ux1ckSDN.js";import"./p-Og6pwwEB.js";import"./p-Dp56p_jX.js";import"./p-BDvACHun.js";import"./p-BAhfr1Nx.js";import{V as r}from"./p-BsBIynwj.js";import{g as a,i as l,b as d,P as p,a as h,c}from"./p-BIkuvTVH.js";import{c as v}from"./p-Dw4-tG-V.js";import"./p--8q6LyIm.js";import"./p-Ct0GdHoc.js";import"./p-CG9AChtV.js";import"./p-CiSHWNC4.js";const u=({pin:e,selected:n,occluded:o,detached:s})=>{const{primaryColor:r}=a(e);return i(t,null,d(e)&&i("div",{id:"pin-anchor",class:v("pin-anchor",{selected:n,"pin-occluded":o,"pin-detached":s}),style:{background:r}}),l(e)&&i("vertex-viewer-icon",{name:"pin-fill",size:"lg",class:v("pin",{"pin-selected":n,"pin-occluded":o,"pin-detached":s}),style:{color:r}}))};function b(i,t,e){const o={x:i.x+e.width/2,y:i.y};const s={x:i.x+e.width/2,y:i.y+e.height};const r={x:i.x+e.width,y:i.y+e.height/2};const a={x:i.x,y:i.y+e.height/2};const l=[o,s,a,r];const d=l.map((i=>n.distance(i,t)));const p=d.indexOf(Math.min(...d));return l[p]}const w=()=>`:host{--viewer-annotations-pin-primary-color:var(--blue-700);--viewer-annotations-pin-accent-color:var(--blue-200);--viewer-annotations-pin-dot-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-font-size:0.75rem;--viewer-annotations-pin-selected-stroke:var(--white);--viewer-annotations-pin-selected-border:2px solid var(--white);--viewer-annotations-pin-label-border:2px solid var(--black);--viewer-annotations-pin-selected-stroke:var(--white);font-size:var(--viewer-annotations-pin-font-size);position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}.pin-anchor{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;width:9px;height:9px;box-sizing:border-box;border:var(--viewer-annotations-pin-label-border);background:var(--viewer-annotations-pin-dot-color);pointer-events:auto;cursor:pointer}.selected{width:13px;height:13px;border:var(--viewer-annotations-pin-selected-border)}.pin{color:var(--viewer-annotations-pin-color);cursor:pointer;transition:opacity 0.3s ease-in;transform:translate(0px, -12px)}.pin-selected{stroke-width:1;stroke:var(--viewer-annotations-pin-selected-stroke)}.pin-occluded{opacity:.3;transition:opacity 0.3s ease-in}.pin-detached{visibility:hidden}`;const f=class{constructor(i){e(this,i);this.matrix=o.makeIdentity();this.projectionViewMatrix=o.makeIdentity();this.pinModel=new p;this.selected=false;this.occluded=false;this.detached=false;this.invalidateStateCounter=0;this.invalidateState=()=>{this.invalidateStateCounter=this.invalidateStateCounter+1}}componentWillLoad(){if(this.pinController==null){this.pinController=new h(this.pinModel)}}componentDidLoad(){var i;this.setLabelObserver();if(this.selected){(i=this.labelEl)===null||i===void 0?void 0:i.setFocus()}}async handleOcclusionStateChanged(i){this.occluded=i.detail}async handleDetachedStateChanged(i){this.detached=i.detail}disconnectedCallback(){var i,t;(i=this.labelEl)===null||i===void 0?void 0:i.removeEventListener("labelChanged",this.invalidateState);(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){var e;if(this.pin==null){throw new Error("Unable to draw pin")}const{pinPoint:n,labelPoint:o}=this.computePinPoints(this.pin);return i(t,{key:"e3a02afe3d6a71677e15a9b4d31251970cb9a85e"},i("vertex-viewer-dom-element",{key:"182ec8f3fb4440045d8d9afef16dcb182087e4dd","data-testid":`drawn-pin-${this.pin.id}`,position:this.pin.worldPosition,onPointerDown:async()=>{var i;await((i=this.labelEl)===null||i===void 0?void 0:i.submit());this.selectPin();this.handleAnchorPointerDown()},detachedOff:false},i(u,{key:"53368cba2d76f71dbdb367760ede137d4b1c3a9e",pin:this.pin,selected:this.selected,occluded:this.occluded,detached:this.detached})),d(this.pin)&&!this.occluded&&!this.detached&&i(t,{key:"5318ed3e3afb2680ec4c4b2050dfb34b663ebd08"},i("vertex-viewer-pin-label-line",{key:"a84145a009f83969b47deef61649d65dd594d1ce",id:`pin-label-line-${(e=this.pin)===null||e===void 0?void 0:e.id}`,pinPoint:n,pin:this.pin,labelPoint:o,onPointerDown:()=>this.selectPin()}),i("vertex-viewer-pin-label",{key:"efce5f94d0e1e7e3803b089a94f0e23671a0f6f4",pin:this.pin,ref:i=>this.labelEl=i,elementBounds:this.elementBounds,pinController:this.pinController,onPointerDown:()=>this.selectPin()})))}setLabelObserver(){if(this.labelEl!=null){this.labelEl.addEventListener("labelChanged",this.invalidateState);this.resizeObserver=new ResizeObserver((()=>this.invalidateState()));this.resizeObserver.observe(this.labelEl)}}computePinPoints(i){if(this.elementBounds!=null&&this.pin!=null){return d(this.pin)&&this.pin.label.point!=null?this.computeTextPinPoints(this.pin,this.elementBounds):this.computeDefaultPinPoints(this.pin,this.elementBounds)}return{pinPoint:i.worldPosition}}computeDefaultPinPoints(i,t){return{pinPoint:this.getFromWorldPosition(i.worldPosition,this.projectionViewMatrix,t)}}computeTextPinPoints(i,t){var e,n,o,s;const{pinPoint:r}=this.computeDefaultPinPoints(i,t);const a=c(i.label.point,t);const l=((n=(e=this.labelEl)===null||e===void 0?void 0:e.firstElementChild)===null||n===void 0?void 0:n.clientWidth)||0;const d=((s=(o=this.labelEl)===null||o===void 0?void 0:o.firstElementChild)===null||s===void 0?void 0:s.clientHeight)||0;return{pinPoint:r,labelPoint:b(a,r,{width:l,height:d})}}handleAnchorPointerDown(){var i,t;if(this.elementBounds!=null&&((i=this.pinController)===null||i===void 0?void 0:i.getToolMode())==="edit"&&this.pin!=null){(t=this.pinController)===null||t===void 0?void 0:t.setDraggable({id:this.pin.id})}}selectPin(){var i,t;(i=this.pinController)===null||i===void 0?void 0:i.setSelectedPinId((t=this.pin)===null||t===void 0?void 0:t.id)}getFromWorldPosition(i,t,e){const n=s.transformMatrix(i,t);return r.fromDimensions(e).transformVectorToViewport(n)}};f.style=w();export{f as vertex_viewer_pin_group};
-//# sourceMappingURL=p-5a85cae5.entry.js.map
+import{h as i,F as t,r as e}from"./p-CCVkga9Q.js";import{p as n,m as o,v as s}from"./p-CkIzrpO0.js";import"./p-_93RRNxT.js";import"./p-CVWO4w6b.js";import"./p-ChqXy0cG.js";import"./p-BNuMPeJ8.js";import"./p-ux1ckSDN.js";import"./p-Og6pwwEB.js";import"./p-Dp56p_jX.js";import"./p-BDvACHun.js";import"./p-BAhfr1Nx.js";import{V as r}from"./p-BsBIynwj.js";import{g as a,i as l,b as d,P as p,a as h,c}from"./p-BIkuvTVH.js";import{c as v}from"./p-Dw4-tG-V.js";import"./p--8q6LyIm.js";import"./p-Ct0GdHoc.js";import"./p-CG9AChtV.js";import"./p-CiSHWNC4.js";const u=({pin:e,selected:n,occluded:o,detached:s})=>{const{primaryColor:r}=a(e);return i(t,null,d(e)&&i("div",{id:"pin-anchor",class:v("pin-anchor",{selected:n,"pin-occluded":o,"pin-detached":s}),style:{background:r}}),l(e)&&i("vertex-viewer-icon",{name:"pin-fill",size:"lg",class:v("pin",{"pin-selected":n,"pin-occluded":o,"pin-detached":s}),style:{color:r}}))};function b(i,t,e){const o={x:i.x+e.width/2,y:i.y};const s={x:i.x+e.width/2,y:i.y+e.height};const r={x:i.x+e.width,y:i.y+e.height/2};const a={x:i.x,y:i.y+e.height/2};const l=[o,s,a,r];const d=l.map((i=>n.distance(i,t)));const p=d.indexOf(Math.min(...d));return l[p]}const w=()=>`:host{--viewer-annotations-pin-primary-color:var(--blue-700);--viewer-annotations-pin-accent-color:var(--blue-200);--viewer-annotations-pin-dot-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-font-size:0.75rem;--viewer-annotations-pin-selected-stroke:var(--white);--viewer-annotations-pin-selected-border:2px solid var(--white);--viewer-annotations-pin-label-border:2px solid var(--black);--viewer-annotations-pin-selected-stroke:var(--white);font-size:var(--viewer-annotations-pin-font-size);position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}.pin-anchor{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;width:9px;height:9px;box-sizing:border-box;border:var(--viewer-annotations-pin-label-border);background:var(--viewer-annotations-pin-dot-color);pointer-events:auto;cursor:pointer}.selected{width:13px;height:13px;border:var(--viewer-annotations-pin-selected-border)}.pin{color:var(--viewer-annotations-pin-color);cursor:pointer;transition:opacity 0.3s ease-in;transform:translate(0px, -12px)}.pin-selected{stroke-width:1;stroke:var(--viewer-annotations-pin-selected-stroke)}.pin-occluded{opacity:.3;transition:opacity 0.3s ease-in}.pin-detached{visibility:hidden}`;const f=class{constructor(i){e(this,i);this.matrix=o.makeIdentity();this.projectionViewMatrix=o.makeIdentity();this.pinModel=new p;this.selected=false;this.occluded=false;this.detached=false;this.invalidateStateCounter=0;this.invalidateState=()=>{this.invalidateStateCounter=this.invalidateStateCounter+1}}componentWillLoad(){if(this.pinController==null){this.pinController=new h(this.pinModel)}}componentDidLoad(){var i;this.setLabelObserver();if(this.selected){(i=this.labelEl)===null||i===void 0?void 0:i.setFocus()}}async handleOcclusionStateChanged(i){this.occluded=i.detail}async handleDetachedStateChanged(i){this.detached=i.detail}disconnectedCallback(){var i,t;(i=this.labelEl)===null||i===void 0?void 0:i.removeEventListener("labelChanged",this.invalidateState);(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){var e;if(this.pin==null){throw new Error("Unable to draw pin")}const{pinPoint:n,labelPoint:o}=this.computePinPoints(this.pin);return i(t,{key:"3275077c2f3febce611262f97ad52424381eeeaf"},i("vertex-viewer-dom-element",{key:"95c6a4cadb1b0437b0a8c9d9e8a4c8b6612bad44","data-testid":`drawn-pin-${this.pin.id}`,position:this.pin.worldPosition,onPointerDown:async()=>{var i;await((i=this.labelEl)===null||i===void 0?void 0:i.submit());this.selectPin();this.handleAnchorPointerDown()},detachedOff:false},i(u,{key:"cf3f679745095b62a6d8dacd705ee4f6093e3773",pin:this.pin,selected:this.selected,occluded:this.occluded,detached:this.detached})),d(this.pin)&&!this.occluded&&!this.detached&&i(t,{key:"b3f3318043cf62dc50021e5af93a333412ddffbb"},i("vertex-viewer-pin-label-line",{key:"ccb1e7184620f7d1d1a497066ea70c6e79ac6807",id:`pin-label-line-${(e=this.pin)===null||e===void 0?void 0:e.id}`,pinPoint:n,pin:this.pin,labelPoint:o,onPointerDown:()=>this.selectPin()}),i("vertex-viewer-pin-label",{key:"ad4d024b1b1b50aedd70cc35ad16abbca3aef827",pin:this.pin,ref:i=>this.labelEl=i,elementBounds:this.elementBounds,pinController:this.pinController,onPointerDown:()=>this.selectPin()})))}setLabelObserver(){if(this.labelEl!=null){this.labelEl.addEventListener("labelChanged",this.invalidateState);this.resizeObserver=new ResizeObserver((()=>this.invalidateState()));this.resizeObserver.observe(this.labelEl)}}computePinPoints(i){if(this.elementBounds!=null&&this.pin!=null){return d(this.pin)&&this.pin.label.point!=null?this.computeTextPinPoints(this.pin,this.elementBounds):this.computeDefaultPinPoints(this.pin,this.elementBounds)}return{pinPoint:i.worldPosition}}computeDefaultPinPoints(i,t){return{pinPoint:this.getFromWorldPosition(i.worldPosition,this.projectionViewMatrix,t)}}computeTextPinPoints(i,t){var e,n,o,s;const{pinPoint:r}=this.computeDefaultPinPoints(i,t);const a=c(i.label.point,t);const l=((n=(e=this.labelEl)===null||e===void 0?void 0:e.firstElementChild)===null||n===void 0?void 0:n.clientWidth)||0;const d=((s=(o=this.labelEl)===null||o===void 0?void 0:o.firstElementChild)===null||s===void 0?void 0:s.clientHeight)||0;return{pinPoint:r,labelPoint:b(a,r,{width:l,height:d})}}handleAnchorPointerDown(){var i,t;if(this.elementBounds!=null&&((i=this.pinController)===null||i===void 0?void 0:i.getToolMode())==="edit"&&this.pin!=null){(t=this.pinController)===null||t===void 0?void 0:t.setDraggable({id:this.pin.id})}}selectPin(){var i,t;(i=this.pinController)===null||i===void 0?void 0:i.setSelectedPinId((t=this.pin)===null||t===void 0?void 0:t.id)}getFromWorldPosition(i,t,e){const n=s.transformMatrix(i,t);return r.fromDimensions(e).transformVectorToViewport(n)}};f.style=w();export{f as vertex_viewer_pin_group};
+//# sourceMappingURL=p-1eb636f8.entry.js.map

package/dist/viewer/p-1eb636f8.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["PinRenderer","pin","selected","occluded","detached","primaryColor","getPinColors","h","Fragment","isTextPin","id","class","classNames","style","background","isIconPin","name","size","color","getClosestCenterToPoint","boxPoint","pointToMeasure","dimensions","topPoint","x","width","y","bottomPoint","height","rightPoint","leftPoint","candidates","distances","map","candidate","Point","distance","candidateIndex","indexOf","Math","min","viewerPinGroupCss","ViewerPinGroup","constructor","hostRef","this","matrix","Matrix4","makeIdentity","projectionViewMatrix","pinModel","PinModel","invalidateStateCounter","invalidateState","componentWillLoad","pinController","PinController","componentDidLoad","setLabelObserver","_a","labelEl","setFocus","handleOcclusionStateChanged","event","detail","handleDetachedStateChanged","disconnectedCallback","removeEventListener","_b","resizeObserver","disconnect","render","Error","pinPoint","labelPoint","computePinPoints","key","position","worldPosition","onPointerDown","async","submit","selectPin","handleAnchorPointerDown","detachedOff","ref","el","elementBounds","addEventListener","ResizeObserver","observe","label","point","computeTextPinPoints","computeDefaultPinPoints","getFromWorldPosition","screenPosition","translatePointToScreen","labelWidth","firstElementChild","clientWidth","labelHeight","_d","_c","clientHeight","getToolMode","setDraggable","setSelectedPinId","pt","ndcPt","Vector3","transformMatrix","Viewport","fromDimensions","transformVectorToViewport"],"sources":["src/components/viewer-pin-group/pin-renderer.tsx","src/components/viewer-pin-group/utils.ts","src/components/viewer-pin-group/viewer-pin-group.css?tag=vertex-viewer-pin-group","src/components/viewer-pin-group/viewer-pin-group.tsx"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { getPinColors, isIconPin, isTextPin, Pin } from '../../lib/pins/model';\n\ninterface PinRendererProps {\n pin?: Pin;\n selected: boolean;\n occluded: boolean;\n detached: boolean;\n}\n\nexport const PinRenderer: FunctionalComponent<PinRendererProps> = ({\n pin,\n selected,\n occluded,\n detached,\n}) => {\n const { primaryColor } = getPinColors(pin);\n\n return (\n <Fragment>\n {isTextPin(pin) && (\n <div\n id=\"pin-anchor\"\n class={classNames('pin-anchor', {\n selected: selected,\n 'pin-occluded': occluded,\n 'pin-detached': detached,\n })}\n style={{\n background: primaryColor,\n }}\n ></div>\n )}\n\n {isIconPin(pin) && (\n <vertex-viewer-icon\n name=\"pin-fill\"\n size=\"lg\"\n class={classNames('pin', {\n 'pin-selected': selected,\n 'pin-occluded': occluded,\n 'pin-detached': detached,\n })}\n style={{\n color: primaryColor,\n }}\n />\n )}\n </Fragment>\n );\n};\n","import { Dimensions, Point } from '@vertexvis/geometry';\n\nexport function getClosestCenterToPoint(\n boxPoint: Point.Point,\n pointToMeasure: Point.Point,\n dimensions: Dimensions.Dimensions,\n): Point.Point {\n const topPoint = {\n x: boxPoint.x + dimensions.width / 2,\n y: boxPoint.y,\n };\n\n const bottomPoint = {\n x: boxPoint.x + dimensions.width / 2,\n y: boxPoint.y + dimensions.height,\n };\n\n const rightPoint = {\n x: boxPoint.x + dimensions.width,\n y: boxPoint.y + dimensions.height / 2,\n };\n\n const leftPoint = {\n x: boxPoint.x,\n y: boxPoint.y + dimensions.height / 2,\n };\n\n const candidates = [topPoint, bottomPoint, leftPoint, rightPoint];\n\n const distances = candidates.map((candidate) =>\n Point.distance(candidate, pointToMeasure),\n );\n\n const candidateIndex = distances.indexOf(Math.min(...distances));\n return candidates[candidateIndex];\n}\n",":host {\n\n /**\n * @prop --viewer-annotations-pin-primary-color: A CSS color that\n * specifies the primary color for the pins. This value gets used for the dot color \n * and borders\n */\n --viewer-annotations-pin-primary-color: var(--blue-700);\n\n /**\n * @prop --viewer-annotations-pin-accent-color: A CSS color that\n * specifies the accent color for the pins. This value gets used for background colors\n * \n */\n\n --viewer-annotations-pin-accent-color: var(--blue-200);\n /**\n * @prop viewer-annotations-pin-dot-color: A CSS color that\n * specifies the color of the anchor dot\n */\n --viewer-annotations-pin-dot-color: var(--viewer-annotations-pin-primary-color);\n\n /**\n * @prop --viewer-annotations-pin-color: A CSS color that\n * specifies the color of the pin\n */\n --viewer-annotations-pin-color: var(--viewer-annotations-pin-primary-color);\n\n /**\n * @prop --viewer-annotations-pin-font-size: A CSS property to specify\n the font size of the pin\n */\n --viewer-annotations-pin-font-size: 0.75rem;\n\n /**\n * @prop --viewer-annotations-pin-selected-stroke: A CSS color that\n * specifies the stroke color of a selected pin\n */\n --viewer-annotations-pin-selected-stroke: var(--white);\n\n /**\n * @prop --viewer-annotations-pin-selected-border: A CSS color that\n * specifies the border of a selected pin\n */\n --viewer-annotations-pin-selected-border: 2px solid var(--white);\n\n /**\n * @prop --viewer-annotations-pin-label-border: A CSS color that\n * specifies the border of a text pin anchor\n */\n --viewer-annotations-pin-label-border: 2px solid var(--black);\n\n /**\n * @prop --viewer-annotations-pin-selected-border: A CSS color that\n * specifies the stroke of a selected default pin\n */\n --viewer-annotations-pin-selected-stroke: var(--white);\n\n font-size: var(--viewer-annotations-pin-font-size);\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.pin-anchor {\n position: absolute;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n display: block;\n width: 9px;\n height: 9px;\n box-sizing: border-box;\n border: var(--viewer-annotations-pin-label-border);\n background: var(--viewer-annotations-pin-dot-color);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.selected {\n width: 13px;\n height: 13px;\n border: var(--viewer-annotations-pin-selected-border)\n}\n\n.pin {\n color: var(--viewer-annotations-pin-color);\n cursor: pointer;\n transition: opacity 0.3s ease-in;\n\n /**\n * Place bottom point of the pin at the location instead of the middle of the pin\n */\n transform: translate(0px, -12px);\n}\n\n.pin-selected {\n stroke-width: 1;\n stroke: var(--viewer-annotations-pin-selected-stroke);\n}\n\n.pin-occluded {\n opacity: .3;\n transition: opacity 0.3s ease-in;\n}\n\n.pin-detached {\n visibility: hidden;\n}","import {\n Component,\n Fragment,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n JSX,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { Dimensions, Matrix4, Point, Vector3 } from '@vertexvis/geometry';\n\nimport { Viewport } from '../..';\nimport { PinController } from '../../lib/pins/controller';\nimport { isTextPin, Pin, TextPin } from '../../lib/pins/model';\nimport { PinModel } from '../../lib/pins/model';\nimport { translatePointToScreen } from '../viewer-pin-tool/utils';\nimport { PinRenderer } from './pin-renderer';\nimport { getClosestCenterToPoint } from './utils';\n\ninterface ComputedPoints {\n pinPoint: Point.Point;\n labelPoint?: Point.Point;\n}\n\n@Component({\n tag: 'vertex-viewer-pin-group',\n styleUrl: 'viewer-pin-group.css',\n shadow: false,\n})\nexport class ViewerPinGroup {\n /**\n * The pin to draw for the group\n */\n @Prop()\n public pin?: Pin;\n\n /**\n * The local matrix of this element.\n */\n @Prop({ mutable: true, attribute: null })\n public matrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n /**\n * Projection view matrix used for computing the position of the pin line\n */\n @Prop()\n public projectionViewMatrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n /**\n * The dimensions of the canvas for the pins\n */\n @Prop({ mutable: true })\n public elementBounds?: DOMRect;\n\n /**\n * The model that contains the entities and outcomes from performing pin operations\n */\n @Prop()\n public pinModel: PinModel = new PinModel();\n\n /**\n * The controller that drives behavior for pin operations\n */\n @Prop({ mutable: true })\n public pinController?: PinController;\n\n /**\n * Whether the pin is \"selected\"\n */\n @Prop()\n public selected = false;\n\n /**\n * @internal\n * Whether the pin is occluded\n */\n @Prop({ mutable: true, reflect: true })\n public occluded = false;\n\n /**\n * @internal\n * Whether the pin is detached\n */\n @Prop({ mutable: true, reflect: true })\n public detached = false;\n\n @State()\n private invalidateStateCounter = 0;\n\n private labelEl: HTMLVertexViewerPinLabelElement | undefined;\n\n private resizeObserver?: ResizeObserver;\n\n protected componentWillLoad(): void {\n if (this.pinController == null) {\n this.pinController = new PinController(this.pinModel);\n }\n }\n\n protected componentDidLoad(): void {\n this.setLabelObserver();\n\n if (this.selected) {\n this.labelEl?.setFocus();\n }\n }\n\n /**\n * @ignore\n */\n @Listen('occlusionStateChanged')\n protected async handleOcclusionStateChanged(\n event: CustomEvent<boolean>,\n ): Promise<void> {\n this.occluded = event.detail;\n }\n\n /**\n * @ignore\n */\n @Listen('detachedStateChanged')\n protected async handleDetachedStateChanged(\n event: CustomEvent<boolean>,\n ): Promise<void> {\n this.detached = event.detail;\n }\n\n protected disconnectedCallback(): void {\n this.labelEl?.removeEventListener('labelChanged', this.invalidateState);\n this.resizeObserver?.disconnect();\n }\n\n protected render(): JSX.Element {\n if (this.pin == null) {\n throw new Error('Unable to draw pin');\n }\n\n const { pinPoint, labelPoint } = this.computePinPoints(this.pin);\n\n return (\n <Fragment>\n <vertex-viewer-dom-element\n data-testid={`drawn-pin-${this.pin.id}`}\n position={this.pin.worldPosition}\n onPointerDown={async () => {\n await this.labelEl?.submit();\n this.selectPin();\n this.handleAnchorPointerDown();\n }}\n detachedOff={false}\n >\n <PinRenderer\n pin={this.pin}\n selected={this.selected}\n occluded={this.occluded}\n detached={this.detached}\n />\n </vertex-viewer-dom-element>\n\n {isTextPin(this.pin) && !this.occluded && !this.detached && (\n <Fragment>\n <vertex-viewer-pin-label-line\n id={`pin-label-line-${this.pin?.id}`}\n pinPoint={pinPoint}\n pin={this.pin}\n labelPoint={labelPoint}\n onPointerDown={() => this.selectPin()}\n ></vertex-viewer-pin-label-line>\n\n <vertex-viewer-pin-label\n pin={this.pin}\n ref={(el) => (this.labelEl = el)}\n elementBounds={this.elementBounds}\n pinController={this.pinController}\n onPointerDown={() => this.selectPin()}\n ></vertex-viewer-pin-label>\n </Fragment>\n )}\n </Fragment>\n );\n }\n\n private invalidateState = (): void => {\n this.invalidateStateCounter = this.invalidateStateCounter + 1;\n };\n\n private setLabelObserver(): void {\n if (this.labelEl != null) {\n this.labelEl.addEventListener('labelChanged', this.invalidateState);\n\n this.resizeObserver = new ResizeObserver(() => this.invalidateState());\n this.resizeObserver.observe(this.labelEl);\n }\n }\n\n private computePinPoints(pin: Pin): ComputedPoints {\n if (this.elementBounds != null && this.pin != null) {\n return isTextPin(this.pin) && this.pin.label.point != null\n ? this.computeTextPinPoints(this.pin, this.elementBounds)\n : this.computeDefaultPinPoints(this.pin, this.elementBounds);\n }\n\n return { pinPoint: pin.worldPosition };\n }\n\n private computeDefaultPinPoints(\n pin: Pin,\n elementBounds: DOMRect,\n ): ComputedPoints {\n return {\n pinPoint: this.getFromWorldPosition(\n pin.worldPosition,\n this.projectionViewMatrix,\n elementBounds,\n ),\n };\n }\n\n private computeTextPinPoints(\n pin: TextPin,\n elementBounds: DOMRect,\n ): ComputedPoints {\n const { pinPoint } = this.computeDefaultPinPoints(pin, elementBounds);\n\n const screenPosition = translatePointToScreen(\n pin.label.point,\n elementBounds,\n );\n\n const labelWidth = this.labelEl?.firstElementChild?.clientWidth || 0;\n const labelHeight = this.labelEl?.firstElementChild?.clientHeight || 0;\n\n return {\n pinPoint,\n labelPoint: getClosestCenterToPoint(screenPosition, pinPoint, {\n width: labelWidth,\n height: labelHeight,\n }),\n };\n }\n\n private handleAnchorPointerDown(): void {\n if (\n this.elementBounds != null &&\n this.pinController?.getToolMode() === 'edit' &&\n this.pin != null\n ) {\n this.pinController?.setDraggable({ id: this.pin.id });\n }\n }\n\n private selectPin(): void {\n this.pinController?.setSelectedPinId(this.pin?.id);\n }\n\n private getFromWorldPosition(\n pt: Vector3.Vector3,\n projectionViewMatrix: Matrix4.Matrix4,\n dimensions: Dimensions.Dimensions,\n ): Point.Point {\n const ndcPt = Vector3.transformMatrix(pt, projectionViewMatrix);\n return Viewport.fromDimensions(dimensions).transformVectorToViewport(ndcPt);\n }\n}\n"],"mappings":";;;siBAaO,MAAMA,EAAqD,EAChEC,MACAC,WACAC,WACAC,eAEA,MAAMC,aAAEA,GAAiBC,EAAaL,GAEtC,OACEM,EAACC,EAAQ,KACNC,EAAUR,IACTM,EAAA,OACEG,GAAG,aACHC,MAAOC,EAAW,aAAc,CAC9BV,SAAUA,EACV,eAAgBC,EAChB,eAAgBC,IAElBS,MAAO,CACLC,WAAYT,KAKjBU,EAAUd,IACTM,EAAA,sBACES,KAAK,WACLC,KAAK,KACLN,MAAOC,EAAW,MAAO,CACvB,eAAgBV,EAChB,eAAgBC,EAChB,eAAgBC,IAElBS,MAAO,CACLK,MAAOb,KAIJ,E,SCjDCc,EACdC,EACAC,EACAC,GAEA,MAAMC,EAAW,CACfC,EAAGJ,EAASI,EAAIF,EAAWG,MAAQ,EACnCC,EAAGN,EAASM,GAGd,MAAMC,EAAc,CAClBH,EAAGJ,EAASI,EAAIF,EAAWG,MAAQ,EACnCC,EAAGN,EAASM,EAAIJ,EAAWM,QAG7B,MAAMC,EAAa,CACjBL,EAAGJ,EAASI,EAAIF,EAAWG,MAC3BC,EAAGN,EAASM,EAAIJ,EAAWM,OAAS,GAGtC,MAAME,EAAY,CAChBN,EAAGJ,EAASI,EACZE,EAAGN,EAASM,EAAIJ,EAAWM,OAAS,GAGtC,MAAMG,EAAa,CAACR,EAAUI,EAAaG,EAAWD,GAEtD,MAAMG,EAAYD,EAAWE,KAAKC,GAChCC,EAAMC,SAASF,EAAWb,KAG5B,MAAMgB,EAAiBL,EAAUM,QAAQC,KAAKC,OAAOR,IACrD,OAAOD,EAAWM,EACpB,CCnCA,MAAMI,EAAoB,IAAM,0zC,MC8BnBC,EAAc,MAL3B,WAAAC,CAAAC,G,UAgBSC,KAAAC,OAA0BC,EAAQC,eAMlCH,KAAAI,qBAAwCF,EAAQC,eAYhDH,KAAAK,SAAqB,IAAIC,EAYzBN,KAAA3C,SAAW,MAOX2C,KAAA1C,SAAW,MAOX0C,KAAAzC,SAAW,MAGVyC,KAAAO,uBAAyB,EA+FzBP,KAAAQ,gBAAkB,KACxBR,KAAKO,uBAAyBP,KAAKO,uBAAyB,CAAC,CAgFhE,CA1KW,iBAAAE,GACR,GAAIT,KAAKU,eAAiB,KAAM,CAC9BV,KAAKU,cAAgB,IAAIC,EAAcX,KAAKK,S,EAItC,gBAAAO,G,MACRZ,KAAKa,mBAEL,GAAIb,KAAK3C,SAAU,EACjByD,EAAAd,KAAKe,WAAO,MAAAD,SAAA,SAAAA,EAAEE,U,EAQR,iCAAMC,CACdC,GAEAlB,KAAK1C,SAAW4D,EAAMC,M,CAOd,gCAAMC,CACdF,GAEAlB,KAAKzC,SAAW2D,EAAMC,M,CAGd,oBAAAE,G,SACRP,EAAAd,KAAKe,WAAO,MAAAD,SAAA,SAAAA,EAAEQ,oBAAoB,eAAgBtB,KAAKQ,kBACvDe,EAAAvB,KAAKwB,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,Y,CAGb,MAAAC,G,MACR,GAAI1B,KAAK5C,KAAO,KAAM,CACpB,MAAM,IAAIuE,MAAM,qB,CAGlB,MAAMC,SAAEA,EAAQC,WAAEA,GAAe7B,KAAK8B,iBAAiB9B,KAAK5C,KAE5D,OACEM,EAACC,EAAQ,CAAAoE,IAAA,4CACPrE,EAAA,6BAAAqE,IAAA,yDACe,aAAa/B,KAAK5C,IAAIS,KACnCmE,SAAUhC,KAAK5C,IAAI6E,cACnBC,cAAeC,U,aACPrB,EAAAd,KAAKe,WAAO,MAAAD,SAAA,SAAAA,EAAEsB,UACpBpC,KAAKqC,YACLrC,KAAKsC,yBAAyB,EAEhCC,YAAa,OAEb7E,EAACP,EAAW,CAAA4E,IAAA,2CACV3E,IAAK4C,KAAK5C,IACVC,SAAU2C,KAAK3C,SACfC,SAAU0C,KAAK1C,SACfC,SAAUyC,KAAKzC,YAIlBK,EAAUoC,KAAK5C,OAAS4C,KAAK1C,WAAa0C,KAAKzC,UAC9CG,EAACC,EAAQ,CAAAoE,IAAA,4CACPrE,EAAA,gCAAAqE,IAAA,2CACElE,GAAI,mBAAkBiD,EAAAd,KAAK5C,OAAG,MAAA0D,SAAA,SAAAA,EAAEjD,KAChC+D,SAAUA,EACVxE,IAAK4C,KAAK5C,IACVyE,WAAYA,EACZK,cAAe,IAAMlC,KAAKqC,cAG5B3E,EAAA,2BAAAqE,IAAA,2CACE3E,IAAK4C,KAAK5C,IACVoF,IAAMC,GAAQzC,KAAKe,QAAU0B,EAC7BC,cAAe1C,KAAK0C,cACpBhC,cAAeV,KAAKU,cACpBwB,cAAe,IAAMlC,KAAKqC,e,CAY9B,gBAAAxB,GACN,GAAIb,KAAKe,SAAW,KAAM,CACxBf,KAAKe,QAAQ4B,iBAAiB,eAAgB3C,KAAKQ,iBAEnDR,KAAKwB,eAAiB,IAAIoB,gBAAe,IAAM5C,KAAKQ,oBACpDR,KAAKwB,eAAeqB,QAAQ7C,KAAKe,Q,EAI7B,gBAAAe,CAAiB1E,GACvB,GAAI4C,KAAK0C,eAAiB,MAAQ1C,KAAK5C,KAAO,KAAM,CAClD,OAAOQ,EAAUoC,KAAK5C,MAAQ4C,KAAK5C,IAAI0F,MAAMC,OAAS,KAClD/C,KAAKgD,qBAAqBhD,KAAK5C,IAAK4C,KAAK0C,eACzC1C,KAAKiD,wBAAwBjD,KAAK5C,IAAK4C,KAAK0C,c,CAGlD,MAAO,CAAEd,SAAUxE,EAAI6E,c,CAGjB,uBAAAgB,CACN7F,EACAsF,GAEA,MAAO,CACLd,SAAU5B,KAAKkD,qBACb9F,EAAI6E,cACJjC,KAAKI,qBACLsC,G,CAKE,oBAAAM,CACN5F,EACAsF,G,YAEA,MAAMd,SAAEA,GAAa5B,KAAKiD,wBAAwB7F,EAAKsF,GAEvD,MAAMS,EAAiBC,EACrBhG,EAAI0F,MAAMC,MACVL,GAGF,MAAMW,IAAa9B,GAAAT,EAAAd,KAAKe,WAAO,MAAAD,SAAA,SAAAA,EAAEwC,qBAAiB,MAAA/B,SAAA,SAAAA,EAAEgC,cAAe,EACnE,MAAMC,IAAcC,GAAAC,EAAA1D,KAAKe,WAAO,MAAA2C,SAAA,SAAAA,EAAEJ,qBAAiB,MAAAG,SAAA,SAAAA,EAAEE,eAAgB,EAErE,MAAO,CACL/B,WACAC,WAAYvD,EAAwB6E,EAAgBvB,EAAU,CAC5DhD,MAAOyE,EACPtE,OAAQyE,I,CAKN,uBAAAlB,G,QACN,GACEtC,KAAK0C,eAAiB,QACtB5B,EAAAd,KAAKU,iBAAa,MAAAI,SAAA,SAAAA,EAAE8C,iBAAkB,QACtC5D,KAAK5C,KAAO,KACZ,EACAmE,EAAAvB,KAAKU,iBAAa,MAAAa,SAAA,SAAAA,EAAEsC,aAAa,CAAEhG,GAAImC,KAAK5C,IAAIS,I,EAI5C,SAAAwE,G,SACNvB,EAAAd,KAAKU,iBAAa,MAAAI,SAAA,SAAAA,EAAEgD,kBAAiBvC,EAAAvB,KAAK5C,OAAG,MAAAmE,SAAA,SAAAA,EAAE1D,G,CAGzC,oBAAAqF,CACNa,EACA3D,EACA3B,GAEA,MAAMuF,EAAQC,EAAQC,gBAAgBH,EAAI3D,GAC1C,OAAO+D,EAASC,eAAe3F,GAAY4F,0BAA0BL,E","ignoreList":[]}

package/dist/viewer/{p-e993f300.entry.js → p-228d1d43.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{r as e,c as t,h as i,H as n,a as s}from"./p-CCVkga9Q.js";import{p as r}from"./p-CkIzrpO0.js";import{s as a}from"./p-DRh4_Z-g.js";import{A as o,C as h,F as d}from"./p-C0gbdp9W.js";import{i as l,a as c,b as u}from"./p-C9Cqbq6H.js";import"./p-Ct0GdHoc.js";import"./p-CG9AChtV.js";const p=()=>`:host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}`;const f=class{constructor(i){e(this,i);this.markupAdded=t(this,"markupAdded");this.markupChanged=t(this,"markupChanged");this.markupRemoved=t(this,"markupRemoved");this.markupSelectionChanged=t(this,"markupSelectionChanged");this.tool="arrow";this.disabled=false;this.selectNew=false;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.centeringBehavior="none";this.scale=1;this.handleSlotChange=()=>{this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()};this.handlePointerMove=e=>{if(this.pointerDownPosition!=null&&r.distance(this.pointerDownPosition,r.create(e.clientX,e.clientY))>2){this.toSelectMarkupId=undefined}};this.handlePointerUp=async e=>{if(!this.disabled){const t=e.target;const i=await this.getMarkupElements();const n=i.find((e=>e===t));if((n===null||n===void 0?void 0:n.id)!=null&&n.id!==""&&n.id===this.toSelectMarkupId){this.selectedMarkupId=t.id}else if(this.pointerDownPosition!=null&&r.distance(this.pointerDownPosition,r.create(e.clientX,e.clientY))<=2){this.selectedMarkupId=undefined}this.toSelectMarkupId=undefined;this.pointerDownPosition=undefined}window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}}disconnectedCallback(){window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}async addMarkup(e){if(e instanceof o){const{start:t,end:i,id:n}=e;const s=this.createArrowMarkupElement();this.appendMarkupElement(s);s.id=n;s.start=t;s.end=i;s.startLineAnchorStyle=this.startLineAnchorStyle;s.endLineAnchorStyle=this.endLineAnchorStyle;return s}else if(e instanceof h){const{bounds:t,id:i}=e;const n=this.createCircleMarkupElement();this.appendMarkupElement(n);n.id=i;n.bounds=t;return n}else if(e instanceof d){const{bounds:t,points:i,id:n}=e;const s=this.createFreeformMarkupElement();this.appendMarkupElement(s);s.id=n;s.points=i;s.bounds=t;return s}else{throw new Error(`Cannot add markup. Unknown type '${e}'.`)}}async removeMarkup(e){const t=await this.getMarkupElement(e);if(t!=null){t.remove();this.markupRemoved.emit(t)}return t}async getMarkupElements(){return Array.from(this.hostEl.children).filter((e=>l(e)||c(e)||u(e)))}async getMarkupElement(e){const t=await this.getMarkupElements();return t.find((t=>t.id===e))}async handleSelectedMarkupIdChanged(){const e=await this.getMarkupElements();e.forEach((e=>{if(e.id===this.selectedMarkupId){e.mode="edit";this.markupSelectionChanged.emit(e)}else{e.mode=""}}));if(this.selectedMarkupId==null){this.markupSelectionChanged.emit(undefined)}}handlePropertyChanged(){this.updatePropsOnMarkupTool()}async handleViewerChanged(e){this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()}handleDisabledChanged(){this.updatePropsOnMarkupTool()}async handleStartLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.startLineAnchorStyle=this.startLineAnchorStyle;this.markupChanged.emit(e)}}async handleEndLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.endLineAnchorStyle=this.endLineAnchorStyle;this.markupChanged.emit(e)}}async handleMarkupEnd(e){var t;const i=e;const n=await this.addMarkup(i.detail);if(typeof n.componentOnReady==="function"){await n.componentOnReady()}if(this.selectNew){this.selectedMarkupId=i.detail.id}(t=this.getMarkupTool())===null||t===void 0?void 0:t.reset()}async handleMarkupUpdated(e){const t=e;if(!t.detail.newlyCreatedMarkup){this.markupChanged.emit(t.detail.markup)}}async handleMarkupPointerDown(e){if(!this.disabled){const t=e.target;const i=await this.getMarkupElements();const n=i.find((e=>e===t));if((n===null||n===void 0?void 0:n.id)!=null&&(n===null||n===void 0?void 0:n.id)!==""){this.toSelectMarkupId=t.id}this.pointerDownPosition=r.create(e.clientX,e.clientY);window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}componentDidLoad(){this.updatePropsOnMarkupTool()}render(){return i(n,{key:"e30960d136c0fcb8bd65f0d123cf639c5d0c591b"},i("slot",{key:"2bffaeb54dbc2e20056d9ddbf96d50b1720ff55a",onSlotchange:this.handleSlotChange}))}appendMarkupElement(e){this.updatePropsOnMarkup(e);this.hostEl.appendChild(e);this.markupAdded.emit(e);return e}createArrowMarkupElement(){if(this.arrowTemplateId!=null){const e=a(window.document.body,this.arrowTemplateId,l,(()=>console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`)),(()=>console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-arrow")}createCircleMarkupElement(){if(this.circleTemplateId!=null){const e=a(window.document.body,this.circleTemplateId,c,(()=>console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`)),(()=>console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-circle")}createFreeformMarkupElement(){if(this.freeformTemplateId!=null){const e=a(window.document.body,this.freeformTemplateId,u,(()=>console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`)),(()=>console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-freeform")}async updatePropsOnMarkups(){const e=await this.getMarkupElements();e.forEach((e=>this.updatePropsOnMarkup(e)))}updatePropsOnMarkup(e){e.viewer=this.viewer;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale;e.classList.add("viewer-markup__markup")}updatePropsOnMarkupTool(){const e=this.getMarkupTool();if(e!=null){e.disabled=this.disabled;e.arrowTemplateId=this.arrowTemplateId;e.circleTemplateId=this.circleTemplateId;e.freeformTemplateId=this.freeformTemplateId;e.tool=this.tool;e.viewer=this.viewer;e.startLineAnchorStyle=this.startLineAnchorStyle;e.endLineAnchorStyle=this.endLineAnchorStyle;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale}}getMarkupTool(){return this.hostEl.querySelector("vertex-viewer-markup-tool")}async getSelectedArrowMarkup(){if(this.selectedMarkupId!=null){const e=await this.getMarkupElement(this.selectedMarkupId);return l(e)?e:undefined}}get hostEl(){return s(this)}static get watchers(){return{selectedMarkupId:[{handleSelectedMarkupIdChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],viewer:[{handleViewerChanged:0}],originatingViewport:[{handleViewerChanged:0}],centeringBehavior:[{handleViewerChanged:0}],offset:[{handleViewerChanged:0}],scale:[{handleViewerChanged:0}],disabled:[{handleDisabledChanged:0}],startLineAnchorStyle:[{handleStartLineAnchorStyleChanged:0}],endLineAnchorStyle:[{handleEndLineAnchorStyleChanged:0}]}}};f.style=p();export{f as vertex_viewer_markup};
-//# sourceMappingURL=p-e993f300.entry.js.map
+import{r as e,c as t,h as i,H as n,a as s}from"./p-CCVkga9Q.js";import{p as r}from"./p-CkIzrpO0.js";import{s as a}from"./p-DRh4_Z-g.js";import{A as o,C as h,F as l}from"./p-C0gbdp9W.js";import{i as d,a as c,b as u}from"./p-C9Cqbq6H.js";import"./p-Ct0GdHoc.js";import"./p-CG9AChtV.js";const p=()=>`:host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}`;const f=class{constructor(i){e(this,i);this.markupAdded=t(this,"markupAdded");this.markupChanged=t(this,"markupChanged");this.markupRemoved=t(this,"markupRemoved");this.markupSelectionChanged=t(this,"markupSelectionChanged");this.tool="arrow";this.disabled=false;this.selectNew=false;this.startLineAnchorStyle="none";this.endLineAnchorStyle="arrow-triangle";this.centeringBehavior="none";this.scale=1;this.handleSlotChange=()=>{this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()};this.handlePointerMove=e=>{if(this.pointerDownPosition!=null&&r.distance(this.pointerDownPosition,r.create(e.clientX,e.clientY))>2){this.toSelectMarkupId=undefined}};this.handlePointerUp=async e=>{if(!this.disabled){const t=e.target;const i=await this.getMarkupElements();const n=i.find((e=>e===t));if((n===null||n===void 0?void 0:n.id)!=null&&n.id!==""&&n.id===this.toSelectMarkupId){this.selectedMarkupId=t.id}else if(this.pointerDownPosition!=null&&r.distance(this.pointerDownPosition,r.create(e.clientX,e.clientY))<=2){this.selectedMarkupId=undefined}this.toSelectMarkupId=undefined;this.pointerDownPosition=undefined}window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}}disconnectedCallback(){window.removeEventListener("pointerup",this.handlePointerUp);window.removeEventListener("pointermove",this.handlePointerMove)}async addMarkup(e){if(e instanceof o){const{start:t,end:i,id:n}=e;const s=this.createArrowMarkupElement();this.appendMarkupElement(s);s.id=n;s.start=t;s.end=i;s.startLineAnchorStyle=this.startLineAnchorStyle;s.endLineAnchorStyle=this.endLineAnchorStyle;return s}else if(e instanceof h){const{bounds:t,id:i}=e;const n=this.createCircleMarkupElement();this.appendMarkupElement(n);n.id=i;n.bounds=t;return n}else if(e instanceof l){const{bounds:t,points:i,id:n}=e;const s=this.createFreeformMarkupElement();this.appendMarkupElement(s);s.id=n;s.points=i;s.bounds=t;return s}else{throw new Error(`Cannot add markup. Unknown type '${e}'.`)}}async removeMarkup(e){const t=await this.getMarkupElement(e);if(t!=null){t.remove();this.markupRemoved.emit(t)}return t}async getMarkupElements(){return Array.from(this.hostEl.children).filter((e=>d(e)||c(e)||u(e)))}async getMarkupElement(e){const t=await this.getMarkupElements();return t.find((t=>t.id===e))}async handleSelectedMarkupIdChanged(){const e=await this.getMarkupElements();e.forEach((e=>{if(e.id===this.selectedMarkupId){e.mode="edit";this.markupSelectionChanged.emit(e)}else{e.mode=""}}));if(this.selectedMarkupId==null){this.markupSelectionChanged.emit(undefined)}}handlePropertyChanged(){this.updatePropsOnMarkupTool()}async handleViewerChanged(e){this.updatePropsOnMarkupTool();this.updatePropsOnMarkups()}handleDisabledChanged(){this.updatePropsOnMarkupTool()}async handleStartLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.startLineAnchorStyle=this.startLineAnchorStyle;this.markupChanged.emit(e)}}async handleEndLineAnchorStyleChanged(){this.updatePropsOnMarkupTool();const e=await this.getSelectedArrowMarkup();if(e!=null){e.endLineAnchorStyle=this.endLineAnchorStyle;this.markupChanged.emit(e)}}async handleMarkupEnd(e){var t;const i=e;const n=await this.addMarkup(i.detail);if(typeof n.componentOnReady==="function"){await n.componentOnReady()}if(this.selectNew){this.selectedMarkupId=i.detail.id}(t=this.getMarkupTool())===null||t===void 0?void 0:t.reset()}async handleMarkupUpdated(e){const t=e;if(!t.detail.newlyCreatedMarkup){this.markupChanged.emit(t.detail.markup)}}async handleMarkupPointerDown(e){if(!this.disabled){const t=e.target;const i=await this.getMarkupElements();const n=i.find((e=>e===t));if((n===null||n===void 0?void 0:n.id)!=null&&(n===null||n===void 0?void 0:n.id)!==""){this.toSelectMarkupId=t.id}this.pointerDownPosition=r.create(e.clientX,e.clientY);window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}componentDidLoad(){this.updatePropsOnMarkupTool()}render(){return i(n,{key:"6e5d1d248b208a23b131f097692cf0cf1ca6ad29"},i("slot",{key:"b1318c9faea745daf6eab83b4715923b529ffe72",onSlotchange:this.handleSlotChange}))}appendMarkupElement(e){this.updatePropsOnMarkup(e);this.hostEl.appendChild(e);this.markupAdded.emit(e);return e}createArrowMarkupElement(){if(this.arrowTemplateId!=null){const e=a(window.document.body,this.arrowTemplateId,d,(()=>console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`)),(()=>console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-arrow")}createCircleMarkupElement(){if(this.circleTemplateId!=null){const e=a(window.document.body,this.circleTemplateId,c,(()=>console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`)),(()=>console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-circle")}createFreeformMarkupElement(){if(this.freeformTemplateId!=null){const e=a(window.document.body,this.freeformTemplateId,u,(()=>console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`)),(()=>console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`)));if(e!=null){return e}}return document.createElement("vertex-viewer-markup-freeform")}async updatePropsOnMarkups(){const e=await this.getMarkupElements();e.forEach((e=>this.updatePropsOnMarkup(e)))}updatePropsOnMarkup(e){e.viewer=this.viewer;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale;e.classList.add("viewer-markup__markup")}updatePropsOnMarkupTool(){const e=this.getMarkupTool();if(e!=null){e.disabled=this.disabled;e.arrowTemplateId=this.arrowTemplateId;e.circleTemplateId=this.circleTemplateId;e.freeformTemplateId=this.freeformTemplateId;e.tool=this.tool;e.viewer=this.viewer;e.startLineAnchorStyle=this.startLineAnchorStyle;e.endLineAnchorStyle=this.endLineAnchorStyle;e.originatingViewport=this.originatingViewport;e.centeringBehavior=this.centeringBehavior;e.offset=this.offset;e.scale=this.scale}}getMarkupTool(){return this.hostEl.querySelector("vertex-viewer-markup-tool")}async getSelectedArrowMarkup(){if(this.selectedMarkupId!=null){const e=await this.getMarkupElement(this.selectedMarkupId);return d(e)?e:undefined}}get hostEl(){return s(this)}static get watchers(){return{selectedMarkupId:[{handleSelectedMarkupIdChanged:0}],arrowTemplateId:[{handlePropertyChanged:0}],circleTemplateId:[{handlePropertyChanged:0}],freeformTemplateId:[{handlePropertyChanged:0}],tool:[{handlePropertyChanged:0}],viewer:[{handleViewerChanged:0}],originatingViewport:[{handleViewerChanged:0}],centeringBehavior:[{handleViewerChanged:0}],offset:[{handleViewerChanged:0}],scale:[{handleViewerChanged:0}],disabled:[{handleDisabledChanged:0}],startLineAnchorStyle:[{handleStartLineAnchorStyleChanged:0}],endLineAnchorStyle:[{handleEndLineAnchorStyleChanged:0}]}}};f.style=p();export{f as vertex_viewer_markup};
+//# sourceMappingURL=p-228d1d43.entry.js.map

package/dist/viewer/p-228d1d43.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["viewerMarkupCss","ViewerMarkup","constructor","hostRef","this","tool","disabled","selectNew","startLineAnchorStyle","endLineAnchorStyle","centeringBehavior","scale","handleSlotChange","updatePropsOnMarkupTool","updatePropsOnMarkups","handlePointerMove","event","pointerDownPosition","Point","distance","create","clientX","clientY","toSelectMarkupId","undefined","handlePointerUp","async","el","target","markups","getMarkupElements","markup","find","m","id","selectedMarkupId","window","removeEventListener","disconnectedCallback","addMarkup","ArrowMarkup","start","end","createArrowMarkupElement","appendMarkupElement","CircleMarkup","bounds","createCircleMarkupElement","FreeformMarkup","points","createFreeformMarkupElement","Error","removeMarkup","getMarkupElement","remove","markupRemoved","emit","Array","from","hostEl","children","filter","e","isVertexViewerArrowMarkup","isVertexViewerCircleMarkup","isVertexViewerFreeformMarkup","handleSelectedMarkupIdChanged","forEach","mode","markupSelectionChanged","handlePropertyChanged","handleViewerChanged","newViewer","handleDisabledChanged","handleStartLineAnchorStyleChanged","selectedArrow","getSelectedArrowMarkup","markupChanged","handleEndLineAnchorStyleChanged","handleMarkupEnd","detail","componentOnReady","_a","getMarkupTool","reset","handleMarkupUpdated","newlyCreatedMarkup","handleMarkupPointerDown","addEventListener","componentDidLoad","render","h","Host","key","onSlotchange","updatePropsOnMarkup","appendChild","markupAdded","arrowTemplateId","element","stampTemplateWithId","document","body","console","warn","createElement","circleTemplateId","freeformTemplateId","viewer","originatingViewport","offset","classList","add","querySelector","selected"],"sources":["src/components/viewer-markup/viewer-markup.css?tag=vertex-viewer-markup&encapsulation=shadow","src/components/viewer-markup/viewer-markup.tsx"],"sourcesContent":[":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","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Dimensions, Point } from '@vertexvis/geometry';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n ArrowMarkup,\n CircleMarkup,\n FreeformMarkup,\n Markup,\n MarkupCenteringBehavior,\n MarkupInteraction,\n} from '../../lib/types/markup';\nimport {\n isVertexViewerArrowMarkup,\n LineAnchorStyle,\n} from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\nimport { ViewerMarkupToolType } from '../viewer-markup-tool/viewer-markup-tool';\n\n@Component({\n tag: 'vertex-viewer-markup',\n styleUrl: 'viewer-markup.css',\n shadow: true,\n})\nexport class ViewerMarkup {\n /**\n * An HTML template that describes the HTML to use for new arrow\n * markup. It's expected that the template contains a\n * `<vertex-viewer-markup-arrow>`.\n */\n @Prop()\n public arrowTemplateId?: string;\n\n /**\n * An HTML template that describes the HTML to use for new circle\n * markup. It's expected that the template contains a\n * `<vertex-viewer-markup-circle>`.\n */\n @Prop()\n public circleTemplateId?: string;\n\n /**\n * An HTML template that describes the HTML to use for new freeform\n * markup. It's expected that the template contains a\n * `<vertex-viewer-markup-freeform>`.\n */\n @Prop()\n public freeformTemplateId?: string;\n\n /**\n * The type of markup to perform.\n */\n @Prop()\n public tool: ViewerMarkupToolType = 'arrow';\n\n /**\n * If `true`, disables adding or editing of markup through user\n * interaction.\n */\n @Prop()\n public disabled = false;\n\n /**\n * The viewer to connect to markup. If nested within a <vertex-viewer>,\n * this property will be populated automatically.\n */\n @Prop()\n public viewer?: HTMLVertexViewerElement;\n\n /**\n * The ID of the markup that is selected.\n */\n @Prop({ mutable: true })\n public selectedMarkupId?: string;\n\n /**\n * Indicates if new markup should be automatically selected.\n */\n @Prop()\n public selectNew = false;\n\n /**\n * The style of the starting anchor. This defaults to none.\n */\n @Prop({ mutable: true })\n public startLineAnchorStyle: LineAnchorStyle = 'none';\n\n /**\n * The style of the ending anchor. This defaults to 'arrow-triangle.'\n */\n @Prop({ mutable: true })\n public endLineAnchorStyle: LineAnchorStyle = 'arrow-triangle';\n\n /**\n * The original viewport dimensions where this markup was created. This value is used\n * to determine where the markup should be rendered relative to the current viewport,\n * enabling some markup to appear \"off-screen\".\n *\n * When provided, all NDC values will be considered relative to this viewport.\n */\n @Prop()\n public originatingViewport?: Dimensions.Dimensions;\n\n /**\n * Defines the behavior of the provided markup when the originating viewport is smaller\n * than the current viewport, or is scaled to a size smaller than the current viewport\n * using the `scale` property.\n *\n * Options:\n * - `x-only`: Markup will be centered horizontally, but not vertically.\n * - `y-only`: Markup will be centered vertically, but not horizontally.\n * - `both`: Markup will be centered both horizontally and vertically.\n * - `none`: Markup will not be centered (default).\n */\n @Prop()\n public centeringBehavior: MarkupCenteringBehavior = 'none';\n\n /**\n * The current offset of the visible viewport. This value is used to determine where\n * markup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n *\n * When provided, all computed coordinates will be offset by this amount.\n */\n @Prop()\n public offset?: Point.Point;\n\n /**\n * The scale to render this markup at. This value is used to scale the element's bounds\n * along with any `offset` to determine the final computed coordinates.\n *\n * When provided, all computed coordinates will be scaled by this amount.\n */\n @Prop()\n public scale = 1;\n\n /**\n * Dispatched when a new markup is added, either through user interaction\n * or programmatically.\n */\n @Event()\n public markupAdded!: EventEmitter<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n >;\n\n /**\n * Dispatched when an existing piece of markup is changed, either through user interaction\n * or programmatically.\n */\n @Event()\n public markupChanged!: EventEmitter<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n >;\n\n /**\n * Dispatched when a markup is removed, either through user\n * interaction or programmatically.\n */\n @Event()\n public markupRemoved!: EventEmitter<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n >;\n\n /**\n * Dispatched when markup selection changes. Will either be the\n * selected element or `undefined` indicating that selection\n * was cleared.\n */\n @Event()\n public markupSelectionChanged!: EventEmitter<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n | undefined\n >;\n\n @Element()\n private hostEl!: HTMLElement;\n\n @State()\n private toSelectMarkupId?: string;\n\n @State()\n private pointerDownPosition?: Point.Point;\n\n protected disconnectedCallback(): void {\n window.removeEventListener('pointerup', this.handlePointerUp);\n window.removeEventListener('pointermove', this.handlePointerMove);\n }\n\n /**\n * Adds a new markup as a child to this component. A new markup\n * component will be created from the template specified by\n * `arrow-template-id`, `circle-template-id`, or if undefined\n * a default element will be created.\n *\n * @param markup The markup to add.\n * @returns The markup element that was created.\n * @see {@link arrowTemplateId}\n * @see {@link circleTemplateId}\n */\n @Method()\n public async addMarkup(\n markup: Markup,\n ): Promise<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n > {\n if (markup instanceof ArrowMarkup) {\n const { start, end, id } = markup;\n\n const el = this.createArrowMarkupElement();\n this.appendMarkupElement(el);\n el.id = id;\n el.start = start;\n el.end = end;\n el.startLineAnchorStyle = this.startLineAnchorStyle;\n el.endLineAnchorStyle = this.endLineAnchorStyle;\n\n return el;\n } else if (markup instanceof CircleMarkup) {\n const { bounds, id } = markup;\n\n const el = this.createCircleMarkupElement();\n this.appendMarkupElement(el);\n el.id = id;\n el.bounds = bounds;\n\n return el;\n } else if (markup instanceof FreeformMarkup) {\n const { bounds, points, id } = markup;\n\n const el = this.createFreeformMarkupElement();\n this.appendMarkupElement(el);\n el.id = id;\n el.points = points;\n el.bounds = bounds;\n\n return el;\n } else {\n throw new Error(`Cannot add markup. Unknown type '${markup}'.`);\n }\n }\n\n /**\n * Removes a markup with the given ID, and returns the HTML element\n * associated to the markup. Returns `undefined` if no markup is\n * found.\n *\n * @param id The ID of the markup to remove.\n * @returns The markup element, or undefined.\n */\n @Method()\n public async removeMarkup(\n id: string,\n ): Promise<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n | undefined\n > {\n const markup = await this.getMarkupElement(id);\n\n if (markup != null) {\n markup.remove();\n this.markupRemoved.emit(markup);\n }\n\n return markup;\n }\n\n /**\n * Returns a list of markup elements that are children of this component.\n *\n * @returns A list of all markups.\n * @see {@link getMarkupElement}\n */\n @Method()\n public async getMarkupElements(): Promise<\n Array<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n >\n > {\n return Array.from(this.hostEl.children).filter(\n (e) =>\n isVertexViewerArrowMarkup(e) ||\n isVertexViewerCircleMarkup(e) ||\n isVertexViewerFreeformMarkup(e),\n ) as Array<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n >;\n }\n\n /**\n * Returns the markup element associated to the given ID.\n *\n * @param id The ID of the markup element to return.\n * @returns A markup element, or `undefined`.\n * @see {@link getMarkupElements}\n */\n @Method()\n public async getMarkupElement(\n id: string,\n ): Promise<\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement\n | undefined\n > {\n const markup = await this.getMarkupElements();\n return markup.find((el) => el.id === id);\n }\n\n /**\n * @ignore\n */\n @Watch('selectedMarkupId')\n protected async handleSelectedMarkupIdChanged(): Promise<void> {\n const markup = await this.getMarkupElements();\n markup.forEach((m) => {\n if (m.id === this.selectedMarkupId) {\n m.mode = 'edit';\n this.markupSelectionChanged.emit(m);\n } else {\n m.mode = '';\n }\n });\n\n if (this.selectedMarkupId == null) {\n this.markupSelectionChanged.emit(undefined);\n }\n }\n\n /**\n * @ignore\n */\n @Watch('arrowTemplateId')\n @Watch('circleTemplateId')\n @Watch('freeformTemplateId')\n @Watch('tool')\n protected handlePropertyChanged(): void {\n this.updatePropsOnMarkupTool();\n }\n\n /**\n * @ignore\n */\n @Watch('viewer')\n @Watch('originatingViewport')\n @Watch('centeringBehavior')\n @Watch('offset')\n @Watch('scale')\n protected async handleViewerChanged(\n newViewer: HTMLVertexViewerElement | undefined,\n ): Promise<void> {\n this.updatePropsOnMarkupTool();\n this.updatePropsOnMarkups();\n }\n\n /**\n * @ignore\n */\n @Watch('disabled')\n protected handleDisabledChanged(): void {\n this.updatePropsOnMarkupTool();\n }\n\n /**\n * @ignore\n */\n @Watch('startLineAnchorStyle')\n protected async handleStartLineAnchorStyleChanged(): Promise<void> {\n this.updatePropsOnMarkupTool();\n\n // If a piece of arrow markup is currently selected, then update its anchor style\n const selectedArrow = await this.getSelectedArrowMarkup();\n if (selectedArrow != null) {\n selectedArrow.startLineAnchorStyle = this.startLineAnchorStyle;\n this.markupChanged.emit(selectedArrow);\n }\n }\n\n /**\n * @ignore\n */\n @Watch('endLineAnchorStyle')\n protected async handleEndLineAnchorStyleChanged(): Promise<void> {\n this.updatePropsOnMarkupTool();\n\n // If a piece of arrow markup is currently selected, then update its anchor style\n const selectedArrow = await this.getSelectedArrowMarkup();\n\n if (selectedArrow != null) {\n selectedArrow.endLineAnchorStyle = this.endLineAnchorStyle;\n this.markupChanged.emit(selectedArrow);\n }\n }\n\n /**\n * @ignore\n */\n @Listen('markupEnd')\n protected async handleMarkupEnd(event: CustomEvent<Markup>): Promise<void> {\n const e = event as CustomEvent<Markup>;\n const el = await this.addMarkup(e.detail);\n if (typeof el.componentOnReady === 'function') {\n await el.componentOnReady();\n }\n if (this.selectNew) {\n this.selectedMarkupId = e.detail.id;\n }\n this.getMarkupTool()?.reset();\n }\n\n /**\n * @ignore\n */\n @Listen('interactionEnd')\n protected async handleMarkupUpdated(\n event: CustomEvent<MarkupInteraction>,\n ): Promise<void> {\n const e = event as CustomEvent<MarkupInteraction>;\n\n // Do not emit the markupChanged event if the markup was just created\n if (!e.detail.newlyCreatedMarkup) {\n this.markupChanged.emit(e.detail.markup);\n }\n }\n\n /**\n * @ignore\n */\n @Listen('pointerdown')\n protected async handleMarkupPointerDown(event: PointerEvent): Promise<void> {\n if (!this.disabled) {\n const el = event.target as Element;\n const markups = await this.getMarkupElements();\n const markup = markups.find((m) => m === el);\n if (markup?.id != null && markup?.id !== '') {\n this.toSelectMarkupId = el.id;\n }\n this.pointerDownPosition = Point.create(event.clientX, event.clientY);\n\n window.addEventListener('pointermove', this.handlePointerMove);\n window.addEventListener('pointerup', this.handlePointerUp);\n }\n }\n\n /**\n * @ignore\n */\n protected componentDidLoad(): void {\n this.updatePropsOnMarkupTool();\n }\n\n /**\n * @ignore\n */\n protected render(): h.JSX.IntrinsicElements {\n return (\n <Host>\n <slot onSlotchange={this.handleSlotChange} />\n </Host>\n );\n }\n\n private handleSlotChange = (): void => {\n this.updatePropsOnMarkupTool();\n this.updatePropsOnMarkups();\n };\n\n private handlePointerMove = (event: PointerEvent): void => {\n if (\n this.pointerDownPosition != null &&\n Point.distance(\n this.pointerDownPosition,\n Point.create(event.clientX, event.clientY),\n ) > 2\n ) {\n this.toSelectMarkupId = undefined;\n }\n };\n\n private handlePointerUp = async (event: PointerEvent): Promise<void> => {\n if (!this.disabled) {\n const el = event.target as Element;\n const markups = await this.getMarkupElements();\n const markup = markups.find((m) => m === el);\n if (\n markup?.id != null &&\n markup.id !== '' &&\n markup.id === this.toSelectMarkupId\n ) {\n this.selectedMarkupId = el.id;\n } else if (\n this.pointerDownPosition != null &&\n Point.distance(\n this.pointerDownPosition,\n Point.create(event.clientX, event.clientY),\n ) <= 2\n ) {\n this.selectedMarkupId = undefined;\n }\n this.toSelectMarkupId = undefined;\n this.pointerDownPosition = undefined;\n }\n\n window.removeEventListener('pointerup', this.handlePointerUp);\n window.removeEventListener('pointermove', this.handlePointerMove);\n };\n\n private appendMarkupElement(\n el:\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupFreeformElement,\n ):\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupFreeformElement {\n this.updatePropsOnMarkup(el);\n this.hostEl.appendChild(el);\n this.markupAdded.emit(el);\n\n return el;\n }\n\n private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n if (this.arrowTemplateId != null) {\n const element = stampTemplateWithId(\n window.document.body,\n this.arrowTemplateId,\n isVertexViewerArrowMarkup,\n () =>\n console.warn(\n `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`,\n ),\n () =>\n console.warn(\n `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`,\n ),\n );\n\n if (element != null) {\n return element;\n }\n }\n\n return document.createElement('vertex-viewer-markup-arrow');\n }\n\n private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n if (this.circleTemplateId != null) {\n const element = stampTemplateWithId(\n window.document.body,\n this.circleTemplateId,\n isVertexViewerCircleMarkup,\n () =>\n console.warn(\n `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`,\n ),\n () =>\n console.warn(\n `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`,\n ),\n );\n\n if (element != null) {\n return element;\n }\n }\n\n return document.createElement('vertex-viewer-markup-circle');\n }\n\n private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n if (this.freeformTemplateId != null) {\n const element = stampTemplateWithId(\n window.document.body,\n this.freeformTemplateId,\n isVertexViewerFreeformMarkup,\n () =>\n console.warn(\n `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`,\n ),\n () =>\n console.warn(\n `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`,\n ),\n );\n\n if (element != null) {\n return element;\n }\n }\n\n return document.createElement('vertex-viewer-markup-freeform');\n }\n\n private async updatePropsOnMarkups(): Promise<void> {\n const markup = await this.getMarkupElements();\n markup.forEach((m) => this.updatePropsOnMarkup(m));\n }\n\n private updatePropsOnMarkup(\n element:\n | HTMLVertexViewerMarkupArrowElement\n | HTMLVertexViewerMarkupCircleElement\n | HTMLVertexViewerMarkupFreeformElement,\n ): void {\n element.viewer = this.viewer;\n element.originatingViewport = this.originatingViewport;\n element.centeringBehavior = this.centeringBehavior;\n element.offset = this.offset;\n element.scale = this.scale;\n element.classList.add('viewer-markup__markup');\n }\n\n private updatePropsOnMarkupTool(): void {\n const tool = this.getMarkupTool();\n if (tool != null) {\n tool.disabled = this.disabled;\n tool.arrowTemplateId = this.arrowTemplateId;\n tool.circleTemplateId = this.circleTemplateId;\n tool.freeformTemplateId = this.freeformTemplateId;\n tool.tool = this.tool;\n tool.viewer = this.viewer;\n tool.startLineAnchorStyle = this.startLineAnchorStyle;\n tool.endLineAnchorStyle = this.endLineAnchorStyle;\n tool.originatingViewport = this.originatingViewport;\n tool.centeringBehavior = this.centeringBehavior;\n tool.offset = this.offset;\n tool.scale = this.scale;\n }\n }\n\n private getMarkupTool(): HTMLVertexViewerMarkupToolElement | undefined {\n return this.hostEl.querySelector('vertex-viewer-markup-tool') as\n | HTMLVertexViewerMarkupToolElement\n | undefined;\n }\n\n private async getSelectedArrowMarkup(): Promise<\n HTMLVertexViewerMarkupArrowElement | undefined\n > {\n if (this.selectedMarkupId != null) {\n const selected = await this.getMarkupElement(this.selectedMarkupId);\n\n return isVertexViewerArrowMarkup(selected) ? selected : undefined;\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}