@vertexvis/viewer 0.21.1-testing.8 → 0.21.1-testing.9
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.
- package/dist/cjs/vertex-viewer-dom-element_2.cjs.entry.js +14 -7
- package/dist/cjs/vertex-viewer-dom-element_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/viewer-dom-renderer/renderer2d.js +7 -2
- package/dist/collection/components/viewer-dom-renderer/renderer2d.js.map +1 -1
- package/dist/collection/components/viewer-dom-renderer/renderer3d.js +5 -2
- package/dist/collection/components/viewer-dom-renderer/renderer3d.js.map +1 -1
- package/dist/collection/components/viewer-dom-renderer/viewer-dom-renderer.js +2 -3
- package/dist/collection/components/viewer-dom-renderer/viewer-dom-renderer.js.map +1 -1
- package/dist/components/viewer-dom-renderer.js +14 -7
- package/dist/components/viewer-dom-renderer.js.map +1 -1
- package/dist/esm/vertex-viewer-dom-element_2.entry.js +14 -7
- package/dist/esm/vertex-viewer-dom-element_2.entry.js.map +1 -1
- package/dist/viewer/p-e97527a1.entry.js +5 -0
- package/dist/viewer/p-e97527a1.entry.js.map +1 -0
- package/dist/viewer/viewer.esm.js +1 -1
- package/package.json +7 -7
- package/dist/viewer/p-63adf163.entry.js +0 -5
- package/dist/viewer/p-63adf163.entry.js.map +0 -1
|
@@ -286,8 +286,13 @@ function update2d(hostEl, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
|
286
286
|
const elements = getElementDepths(hostEl, parentWorldMatrix, camera).sort((a, b) => a.distanceToCamera - b.distanceToCamera);
|
|
287
287
|
for (let i = 0; i < elements.length; i++) {
|
|
288
288
|
const { element, worldMatrix, worldPosition } = elements[i];
|
|
289
|
-
const
|
|
290
|
-
const
|
|
289
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
290
|
+
const occluded = depthBufferIsNull ||
|
|
291
|
+
(!element.occlusionOff &&
|
|
292
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(worldPosition, viewport)));
|
|
293
|
+
const detached = depthBufferIsNull ||
|
|
294
|
+
(!element.detachedOff &&
|
|
295
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(worldPosition, viewport)));
|
|
291
296
|
const screenPt = getScreenPosition(worldPosition, camera.projectionViewMatrix, viewport);
|
|
292
297
|
updateTransform(element, screenPt);
|
|
293
298
|
updateDepth(element, i, elements.length);
|
|
@@ -367,9 +372,12 @@ function update3d(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
|
367
372
|
function updateElement(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
368
373
|
const worldMatrix = bundle_esm.matrix4.multiply(parentWorldMatrix, element.matrix);
|
|
369
374
|
const positionWorld = bundle_esm.vector3.fromMatrixPosition(worldMatrix);
|
|
370
|
-
const
|
|
375
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
376
|
+
const occluded = depthBufferIsNull ||
|
|
377
|
+
(!element.occlusionOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(positionWorld, viewport)));
|
|
371
378
|
element.occluded = occluded !== null && occluded !== void 0 ? occluded : false;
|
|
372
|
-
const detached =
|
|
379
|
+
const detached = depthBufferIsNull ||
|
|
380
|
+
(!element.detachedOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(positionWorld, viewport)));
|
|
373
381
|
element.detached = detached !== null && detached !== void 0 ? detached : false;
|
|
374
382
|
element.classList.add('ready');
|
|
375
383
|
if (element.billboardOff) {
|
|
@@ -529,9 +537,8 @@ const ViewerDomRenderer = class {
|
|
|
529
537
|
this.invalidateFrame();
|
|
530
538
|
}
|
|
531
539
|
async updatePropsFromViewer() {
|
|
532
|
-
const { frame
|
|
533
|
-
this.depthBuffer =
|
|
534
|
-
depthBuffers === 'all' ? await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer()) : undefined;
|
|
540
|
+
const { frame } = this.viewer || {};
|
|
541
|
+
this.depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
|
|
535
542
|
this.camera = frame === null || frame === void 0 ? void 0 : frame.scene.camera;
|
|
536
543
|
}
|
|
537
544
|
get hostEl() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"vertex-viewer-dom-element.vertex-viewer-dom-renderer.entry.cjs.js","mappings":"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","names":["Vector3","Quaternion","Matrix4","Objects","Euler","h","Host","Viewport"],"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')\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')\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')\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')\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')\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')\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')\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')\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 this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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 occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(worldPosition, viewport);\n const detached =\n !element.detachedOff && 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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\n depthBuffer: DepthBuffer | undefined\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n\n const positionWorld = Vector3.fromMatrixPosition(worldMatrix);\n const occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(positionWorld, viewport);\n element.occluded = occluded ?? false;\n const detached =\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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, depthBuffers } = this.viewer || {};\n\n this.depthBuffer =\n depthBuffers === 'all' ? await frame?.depthBuffer() : undefined;\n this.camera = frame?.scene.camera;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"vertex-viewer-dom-element.vertex-viewer-dom-renderer.entry.cjs.js","mappings":"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","names":["Vector3","Quaternion","Matrix4","Objects","Euler","h","Host","Viewport"],"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')\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')\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')\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')\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')\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')\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')\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')\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 this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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"],"version":3}
|
|
@@ -13,8 +13,13 @@ export function update2d(hostEl, parentWorldMatrix, viewport, camera, depthBuffe
|
|
|
13
13
|
const elements = getElementDepths(hostEl, parentWorldMatrix, camera).sort((a, b) => a.distanceToCamera - b.distanceToCamera);
|
|
14
14
|
for (let i = 0; i < elements.length; i++) {
|
|
15
15
|
const { element, worldMatrix, worldPosition } = elements[i];
|
|
16
|
-
const
|
|
17
|
-
const
|
|
16
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
17
|
+
const occluded = depthBufferIsNull ||
|
|
18
|
+
(!element.occlusionOff &&
|
|
19
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(worldPosition, viewport)));
|
|
20
|
+
const detached = depthBufferIsNull ||
|
|
21
|
+
(!element.detachedOff &&
|
|
22
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(worldPosition, viewport)));
|
|
18
23
|
const screenPt = getScreenPosition(worldPosition, camera.projectionViewMatrix, viewport);
|
|
19
24
|
updateTransform(element, screenPt);
|
|
20
25
|
updateDepth(element, i, elements.length);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer2d.js","sourceRoot":"","sources":["../../../../../src/components/viewer-dom-renderer/renderer2d.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAS,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAI9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AASnE,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;EAC7D,OAAO,WAAK,KAAK,EAAC,SAAS,IAAE,QAAQ,CAAO,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,UAAU,QAAQ,CACtB,MAAmB,EACnB,iBAAkC,EAClC,QAAkB,EAClB,MAA+B,EAC/B,WAAoC;EAEpC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC,IAAI,CACvE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,gBAAgB,CAClD,CAAC;EAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACxC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,MAAM,QAAQ,GACZ,CAAC,OAAO,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"renderer2d.js","sourceRoot":"","sources":["../../../../../src/components/viewer-dom-renderer/renderer2d.tsx"],"names":[],"mappings":"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","sourcesContent":["// 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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices\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"]}
|
|
@@ -36,9 +36,12 @@ export function update3d(element, parentWorldMatrix, viewport, camera, depthBuff
|
|
|
36
36
|
function updateElement(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
37
37
|
const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);
|
|
38
38
|
const positionWorld = Vector3.fromMatrixPosition(worldMatrix);
|
|
39
|
-
const
|
|
39
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
40
|
+
const occluded = depthBufferIsNull ||
|
|
41
|
+
(!element.occlusionOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(positionWorld, viewport)));
|
|
40
42
|
element.occluded = occluded !== null && occluded !== void 0 ? occluded : false;
|
|
41
|
-
const detached =
|
|
43
|
+
const detached = depthBufferIsNull ||
|
|
44
|
+
(!element.detachedOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(positionWorld, viewport)));
|
|
42
45
|
element.detached = detached !== null && detached !== void 0 ? detached : false;
|
|
43
46
|
element.classList.add('ready');
|
|
44
47
|
if (element.billboardOff) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer3d.js","sourceRoot":"","sources":["../../../../../src/components/viewer-dom-renderer/renderer3d.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAIvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAOnE,MAAM,CAAC,MAAM,UAAU,GAA+B,CACpD,EAAE,MAAM,EAAE,QAAQ,EAAE,EACpB,QAAQ,EACR,EAAE;EACF,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;EAC1D,MAAM,IAAI,GAAG,MAAM,CAAC,cAAc,EAAE;IAClC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,CAAC,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;EACxC,MAAM,eAAe,GAAG;IACtB,cAAc,IAAI,KAAK;IACvB,kBAAkB,CAAC,MAAM,CAAC,UAAU,CAAC;IACrC,aAAa,QAAQ,CAAC,KAAK,GAAG,CAAC,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK;GAC/D,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EAEZ,OAAO,CACL,WAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,IAAI,EAAE;IACtD,WAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,IACtD,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,QAAQ,CACtB,OAAoB,EACpB,iBAAkC,EAClC,QAAkB,EAClB,MAA+B,EAC/B,WAAoC;EAEpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IAChD,MAAM,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAgB,CAAC;IAC9C,IAAI,wBAAwB,CAAC,EAAE,CAAC,EAAE;MAChC,aAAa,CACX,EAAuC,EACvC,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,WAAW,CACZ,CAAC;KACH;SAAM,IAAI,sBAAsB,CAAC,EAAE,CAAC,EAAE;MACrC,WAAW,CAAC,EAAE,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;KACnE;SAAM;MACL,QAAQ,CAAC,EAAE,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;KAChE;GACF;AACH,CAAC;AAED,SAAS,aAAa,CACpB,OAA0C,EAC1C,iBAAkC,EAClC,QAAkB,EAClB,MAA+B,EAC/B,WAAoC;EAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;EAExE,MAAM,aAAa,GAAG,OAAO,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;EAC9D,MAAM,QAAQ,GACZ,CAAC,OAAO,CAAC,YAAY,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAA,CAAC;
|
|
1
|
+
{"version":3,"file":"renderer3d.js","sourceRoot":"","sources":["../../../../../src/components/viewer-dom-renderer/renderer3d.tsx"],"names":[],"mappings":"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","sourcesContent":["// 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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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"]}
|
|
@@ -103,9 +103,8 @@ export class ViewerDomRenderer {
|
|
|
103
103
|
this.invalidateFrame();
|
|
104
104
|
}
|
|
105
105
|
async updatePropsFromViewer() {
|
|
106
|
-
const { frame
|
|
107
|
-
this.depthBuffer =
|
|
108
|
-
depthBuffers === 'all' ? await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer()) : undefined;
|
|
106
|
+
const { frame } = this.viewer || {};
|
|
107
|
+
this.depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
|
|
109
108
|
this.camera = frame === null || frame === void 0 ? void 0 : frame.scene.camera;
|
|
110
109
|
}
|
|
111
110
|
static get is() { return "vertex-viewer-dom-renderer"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"viewer-dom-renderer.js","sourceRoot":"","sources":["../../../../../src/components/viewer-dom-renderer/viewer-dom-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAe,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAIpD;;;;GAIG;AAOH,MAAM,OAAO,iBAAiB;EAN9B;IAOE;;;;;;OAMG;IAEI,aAAQ,GAA8B,IAAI,CAAC;IA4B1C,aAAQ,GAAa,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAGxC,2BAAsB,GAAG,CAAC,CAAC;IA6F3B,2BAAsB,GAAG,KAAK,IAAmB,EAAE;MACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"viewer-dom-renderer.js","sourceRoot":"","sources":["../../../../../src/components/viewer-dom-renderer/viewer-dom-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\n\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 * 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 @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\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 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"]}
|
|
@@ -26,8 +26,13 @@ function update2d(hostEl, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
|
26
26
|
const elements = getElementDepths(hostEl, parentWorldMatrix, camera).sort((a, b) => a.distanceToCamera - b.distanceToCamera);
|
|
27
27
|
for (let i = 0; i < elements.length; i++) {
|
|
28
28
|
const { element, worldMatrix, worldPosition } = elements[i];
|
|
29
|
-
const
|
|
30
|
-
const
|
|
29
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
30
|
+
const occluded = depthBufferIsNull ||
|
|
31
|
+
(!element.occlusionOff &&
|
|
32
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(worldPosition, viewport)));
|
|
33
|
+
const detached = depthBufferIsNull ||
|
|
34
|
+
(!element.detachedOff &&
|
|
35
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(worldPosition, viewport)));
|
|
31
36
|
const screenPt = getScreenPosition(worldPosition, camera.projectionViewMatrix, viewport);
|
|
32
37
|
updateTransform(element, screenPt);
|
|
33
38
|
updateDepth(element, i, elements.length);
|
|
@@ -107,9 +112,12 @@ function update3d(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
|
107
112
|
function updateElement(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
108
113
|
const worldMatrix = matrix4.multiply(parentWorldMatrix, element.matrix);
|
|
109
114
|
const positionWorld = vector3.fromMatrixPosition(worldMatrix);
|
|
110
|
-
const
|
|
115
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
116
|
+
const occluded = depthBufferIsNull ||
|
|
117
|
+
(!element.occlusionOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(positionWorld, viewport)));
|
|
111
118
|
element.occluded = occluded !== null && occluded !== void 0 ? occluded : false;
|
|
112
|
-
const detached =
|
|
119
|
+
const detached = depthBufferIsNull ||
|
|
120
|
+
(!element.detachedOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(positionWorld, viewport)));
|
|
113
121
|
element.detached = detached !== null && detached !== void 0 ? detached : false;
|
|
114
122
|
element.classList.add('ready');
|
|
115
123
|
if (element.billboardOff) {
|
|
@@ -270,9 +278,8 @@ const ViewerDomRenderer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
270
278
|
this.invalidateFrame();
|
|
271
279
|
}
|
|
272
280
|
async updatePropsFromViewer() {
|
|
273
|
-
const { frame
|
|
274
|
-
this.depthBuffer =
|
|
275
|
-
depthBuffers === 'all' ? await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer()) : undefined;
|
|
281
|
+
const { frame } = this.viewer || {};
|
|
282
|
+
this.depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
|
|
276
283
|
this.camera = frame === null || frame === void 0 ? void 0 : frame.scene.camera;
|
|
277
284
|
}
|
|
278
285
|
get hostEl() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"viewer-dom-renderer.js","mappings":"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","names":["Matrix4","Vector3"],"sources":["./src/components/viewer-dom-element/utils.ts","./src/components/viewer-dom-group/utils.ts","./src/components/viewer-dom-renderer/renderer2d.tsx","./src/components/viewer-dom-renderer/renderer3d.tsx","./src/components/viewer-dom-renderer/viewer-dom-renderer.css?tag=vertex-viewer-dom-renderer&encapsulation=scoped","./src/components/viewer-dom-renderer/viewer-dom-renderer.tsx"],"sourcesContent":["export function isVertexViewerDomElement(\n el: unknown\n): el is HTMLVertexViewerDomElementElement {\n return (\n el instanceof HTMLElement &&\n el.nodeName === 'VERTEX-VIEWER-DOM-ELEMENT' &&\n (el as HTMLVertexViewerDomElementElement).matrix != null\n );\n}\n","export function isVertexViewerDomGroup(\n el: unknown\n): el is HTMLVertexViewerDomGroupElement {\n return (\n ((el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-GROUP') ||\n (el instanceof HTMLElement && el.dataset.isDomGroupElement != null)) &&\n (el as HTMLVertexViewerDomGroupElement).matrix != null\n );\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Matrix4, Point, Vector3 } from '@vertexvis/geometry';\n\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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 occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(worldPosition, viewport);\n const detached =\n !element.detachedOff && 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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\n depthBuffer: DepthBuffer | undefined\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n\n const positionWorld = Vector3.fromMatrixPosition(worldMatrix);\n const occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(positionWorld, viewport);\n element.occluded = occluded ?? false;\n const detached =\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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, depthBuffers } = this.viewer || {};\n\n this.depthBuffer =\n depthBuffers === 'all' ? await frame?.depthBuffer() : undefined;\n this.camera = frame?.scene.camera;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"viewer-dom-renderer.js","mappings":"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","names":["Matrix4","Vector3"],"sources":["./src/components/viewer-dom-element/utils.ts","./src/components/viewer-dom-group/utils.ts","./src/components/viewer-dom-renderer/renderer2d.tsx","./src/components/viewer-dom-renderer/renderer3d.tsx","./src/components/viewer-dom-renderer/viewer-dom-renderer.css?tag=vertex-viewer-dom-renderer&encapsulation=scoped","./src/components/viewer-dom-renderer/viewer-dom-renderer.tsx"],"sourcesContent":["export function isVertexViewerDomElement(\n el: unknown\n): el is HTMLVertexViewerDomElementElement {\n return (\n el instanceof HTMLElement &&\n el.nodeName === 'VERTEX-VIEWER-DOM-ELEMENT' &&\n (el as HTMLVertexViewerDomElementElement).matrix != null\n );\n}\n","export function isVertexViewerDomGroup(\n el: unknown\n): el is HTMLVertexViewerDomGroupElement {\n return (\n ((el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-GROUP') ||\n (el instanceof HTMLElement && el.dataset.isDomGroupElement != null)) &&\n (el as HTMLVertexViewerDomGroupElement).matrix != null\n );\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Matrix4, Point, Vector3 } from '@vertexvis/geometry';\n\nimport { DepthBuffer, Viewport } from '../../lib/types';\nimport { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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"],"version":3}
|
|
@@ -282,8 +282,13 @@ function update2d(hostEl, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
|
282
282
|
const elements = getElementDepths(hostEl, parentWorldMatrix, camera).sort((a, b) => a.distanceToCamera - b.distanceToCamera);
|
|
283
283
|
for (let i = 0; i < elements.length; i++) {
|
|
284
284
|
const { element, worldMatrix, worldPosition } = elements[i];
|
|
285
|
-
const
|
|
286
|
-
const
|
|
285
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
286
|
+
const occluded = depthBufferIsNull ||
|
|
287
|
+
(!element.occlusionOff &&
|
|
288
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(worldPosition, viewport)));
|
|
289
|
+
const detached = depthBufferIsNull ||
|
|
290
|
+
(!element.detachedOff &&
|
|
291
|
+
(depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(worldPosition, viewport)));
|
|
287
292
|
const screenPt = getScreenPosition(worldPosition, camera.projectionViewMatrix, viewport);
|
|
288
293
|
updateTransform(element, screenPt);
|
|
289
294
|
updateDepth(element, i, elements.length);
|
|
@@ -363,9 +368,12 @@ function update3d(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
|
363
368
|
function updateElement(element, parentWorldMatrix, viewport, camera, depthBuffer) {
|
|
364
369
|
const worldMatrix = matrix4.multiply(parentWorldMatrix, element.matrix);
|
|
365
370
|
const positionWorld = vector3.fromMatrixPosition(worldMatrix);
|
|
366
|
-
const
|
|
371
|
+
const depthBufferIsNull = depthBuffer == null;
|
|
372
|
+
const occluded = depthBufferIsNull ||
|
|
373
|
+
(!element.occlusionOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isOccluded(positionWorld, viewport)));
|
|
367
374
|
element.occluded = occluded !== null && occluded !== void 0 ? occluded : false;
|
|
368
|
-
const detached =
|
|
375
|
+
const detached = depthBufferIsNull ||
|
|
376
|
+
(!element.detachedOff && (depthBuffer === null || depthBuffer === void 0 ? void 0 : depthBuffer.isDetached(positionWorld, viewport)));
|
|
369
377
|
element.detached = detached !== null && detached !== void 0 ? detached : false;
|
|
370
378
|
element.classList.add('ready');
|
|
371
379
|
if (element.billboardOff) {
|
|
@@ -525,9 +533,8 @@ const ViewerDomRenderer = class {
|
|
|
525
533
|
this.invalidateFrame();
|
|
526
534
|
}
|
|
527
535
|
async updatePropsFromViewer() {
|
|
528
|
-
const { frame
|
|
529
|
-
this.depthBuffer =
|
|
530
|
-
depthBuffers === 'all' ? await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer()) : undefined;
|
|
536
|
+
const { frame } = this.viewer || {};
|
|
537
|
+
this.depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
|
|
531
538
|
this.camera = frame === null || frame === void 0 ? void 0 : frame.scene.camera;
|
|
532
539
|
}
|
|
533
540
|
get hostEl() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"vertex-viewer-dom-element.vertex-viewer-dom-renderer.entry.js","mappings":"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","names":["Vector3","Quaternion","Matrix4","Objects","Euler"],"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')\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')\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')\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')\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')\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')\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')\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')\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 this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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 occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(worldPosition, viewport);\n const detached =\n !element.detachedOff && 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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\n depthBuffer: DepthBuffer | undefined\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n\n const positionWorld = Vector3.fromMatrixPosition(worldMatrix);\n const occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(positionWorld, viewport);\n element.occluded = occluded ?? false;\n const detached =\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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, depthBuffers } = this.viewer || {};\n\n this.depthBuffer =\n depthBuffers === 'all' ? await frame?.depthBuffer() : undefined;\n this.camera = frame?.scene.camera;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"vertex-viewer-dom-element.vertex-viewer-dom-renderer.entry.js","mappings":"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","names":["Vector3","Quaternion","Matrix4","Objects","Euler"],"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')\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')\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')\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')\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')\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')\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')\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')\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 this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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"],"version":3}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Copyright (c) 2024 Vertex Software LLC. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import{r as t,c as n,h as e,H as s,g as i}from"./p-e541044a.js";import{v as o,q as a,m as h,x as r}from"./p-26198b53.js";import{o as l}from"./p-81d5a971.js";import"./p-cd9b486d.js";import"./p-d312d59a.js";import{V as d}from"./p-95827eb0.js";import"./p-a30a8324.js";import"./p-88c19f38.js";const c=":host{position:absolute;pointer-events:none;visibility:hidden}:host(.hydrated){visibility:hidden}:host(.ready){visibility:inherit}:host(:not([interactions-off]))>*{pointer-events:auto}";const u=class{constructor(e){t(this,e);this.occlusionStateChanged=n(this,"occlusionStateChanged",7);this.detachedStateChanged=n(this,"detachedStateChanged",7);this.propertyChange=n(this,"propertyChange",7);this.position=o.origin();this.positionJson="";this.quaternion=a.create();this.quaternionJson="";this.scale=o.create(1,1,1);this.scaleJson="";this.matrix=h.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?a.fromEuler(this.rotation):this.quaternion}syncQuaternion(){this.quaternion=this.quaternionJson.length>0?this.parseJson("quaternionJson",this.quaternionJson,a.fromJson):this.quaternion}syncScale(){this.scale=this.scaleJson.length>0?this.parseJson("scaleJson",this.scaleJson,o.fromJson):this.scale}syncMatrix(){this.matrix=h.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,null,e("slot",null))}static get watchers(){return{position:["handlePositionChange"],positionJson:["handlePositionJsonChanged"],rotation:["handleRotationChanged"],rotationJson:["handleRotationJsonChanged"],quaternion:["handleQuaternionChange"],quaternionJson:["handleQuaternionJsonChanged"],scale:["handleScaleChange"],scaleJson:["handleScaleJsonChanged"],matrix:["handleMatrixChanged"],occluded:["handleOcclusionStateChanged"],detached:["handleDetachedStateChanged"]}}};u.style=c;function v(t){return t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-DOM-ELEMENT"&&t.matrix!=null}function f(t){return(t instanceof HTMLElement&&t.nodeName==="VERTEX-VIEWER-DOM-GROUP"||t instanceof HTMLElement&&t.dataset.isDomGroupElement!=null)&&t.matrix!=null}const p=(t,n)=>e("div",{class:"root-2d"},n);function m(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:a,worldPosition:h}=o[t];const r=i==null;const l=r||!n.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(h,e));const d=r||!n.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(h,e));const c=y(h,s.projectionViewMatrix,e);C(n,c);w(n,t,o.length);m(n,a,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 a=t.children[i];if(f(a)){const t=h.multiply(n,a.matrix);s.push(...g(a,t,e))}else if(v(a)){const t=h.multiply(n,a.matrix);const i=o.fromMatrixPosition(t);const r=o.distanceSquared(e.position,i);s.push({element:a,worldMatrix:t,worldPosition:i,distanceToCamera:r})}else{s.push(...g(a,n,e))}}return s}function C(t,n){t.style.transform=[`translate(-50%, -50%)`,`translate(${n.x}px, ${n.y}px)`].join(" ")}function w(t,n,e){t.style.zIndex=`${e-n}`}function y(t,n,e){const s=o.transformMatrix(t,n);return e.transformVectorToViewport(s)}const x=({camera:t,viewport:n},s)=>{const i=h.toObject(t.projectionMatrix);const o=t.isOrthographic()?t.far*2/(t.fovHeight*2)*(n.height/2):i.m22*(n.height/2);const a=[`translateZ(${o}px)`,M(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:a}},s))};function J(t,n,e,s,i){for(let o=0;o<t.children.length;o++){const a=t.children[o];if(v(a)){E(a,n,e,s,i)}else if(f(a)){R(a,n,e,s,i)}else{J(a,n,e,s,i)}}}function E(t,n,e,s,i){const a=h.multiply(n,t.matrix);const r=o.fromMatrixPosition(a);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=S(a)}else{let n=s.viewMatrix;n=h.transpose(n);n=h.position(n,a);n=h.scale(n,t.scale);n[3]=0;n[7]=0;n[11]=0;n[15]=1;t.style.transform=S(n)}J(t,a,e,s,i)}function R(t,n,e,s,i){const o=h.multiply(n,t.matrix);J(t,o,e,s,i)}function M(t){const n=[b(t[0]),b(-t[1]),b(t[2]),b(t[3]),b(t[4]),b(-t[5]),b(t[6]),b(t[7]),b(t[8]),b(-t[9]),b(t[10]),b(t[11]),b(t[12]),b(-t[13]),b(t[14]),b(t[15])].join(", ");return`matrix3d(${n})`}function S(t){const n=[b(t[0]),b(t[1]),b(t[2]),b(t[3]),b(-t[4]),b(-t[5]),b(-t[6]),b(-t[7]),b(t[8]),b(t[9]),b(t[10]),b(t[11]),b(t[12]),b(t[13]),b(t[14]),b(t[15])].join(", ");return[`translate(-50%, -50%)`,`matrix3d(${n})`].join(" ")}function b(t){return Math.abs(t)<1e-10?0:t}const P=".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 $=class{constructor(n){t(this,n);this.drawMode="3d";this.viewport=new d(0,0);this.invalidateFrameCounter=0;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(p,null,e("slot",null)))}else{return e(s,null,e(x,{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)}handlePropertyChange(){this.invalidateFrame()}invalidateFrame(){this.invalidateFrameCounter=this.invalidateFrameCounter+1}async updateElements(){const{viewport:t,camera:n}=this;const e=h.makeIdentity();if(n!=null){if(this.drawMode==="3d"){J(this.hostEl,e,t,n,this.depthBuffer)}else{m(this.hostEl,e,t,n,this.depthBuffer)}}}handleResize(){const t=this.hostEl.getBoundingClientRect();this.viewport=new d(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"]}}};$.style=P;export{u as vertex_viewer_dom_element,$ as vertex_viewer_dom_renderer};
|
|
5
|
+
//# sourceMappingURL=p-e97527a1.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"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"],"names":["viewerDomElementCss","ViewerDomElement","[object Object]","hostRef","this","position","Vector3","origin","positionJson","quaternion","Quaternion","create","quaternionJson","scale","scaleJson","matrix","Matrix4","makeIdentity","occlusionOff","occluded","detachedOff","detached","billboardOff","interactionsOff","syncMatrix","syncPosition","syncQuaternionWithRotation","syncRotation","syncQuaternion","syncScale","newMatrix","oldMatrix","Objects","isEqual","propertyChange","emit","syncProperties","newValue","oldValue","prop","occlusionStateChanged","detachedStateChanged","length","parseJson","fromJson","rotation","rotationJson","Euler","fromEuler","makeTRS","propName","value","parse","e","console","warn","h","Host","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","Viewport","invalidateFrameCounter","handleViewerFrameDrawn","async","updatePropsFromViewer","resized","ResizeObserver","handleResize","observe","mutation","MutationObserver","handleChildrenChange","childList","handleViewerChange","viewer","undefined","_a","frame","updateElements","newViewer","oldViewer","removeEventListener","addEventListener","invalidateFrame","bounds","getBoundingClientRect","scene"],"mappings":"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","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')\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')\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')\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')\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')\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')\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')\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')\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 this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Copyright (c) 2024 Vertex Software LLC. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import{d as e,N as t,w as n,p as a,b as r}from"./p-e541044a.js";import{g as i}from"./p-446bdb50.js";import"./p-88c19f38.js";const o=e=>`__sc_import_${e.replace(/\s|-/g,"_")}`;const s=()=>{const r=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t));const i="";const o={};if(i!==""){o.resourcesUrl=new URL(".",i).href}else{o.resourcesUrl=new URL(".",new URL(r.getAttribute("data-resources-url")||r.src,n.location.href)).href;{l(o.resourcesUrl,r)}if(!n.customElements){return __sc_import_viewer("./p-093f9bdb.js").then((()=>o))}}return a(o)};const l=(a,r)=>{const i=o(t);try{n[i]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const o=new Map;n[i]=t=>{const s=new URL(t,a).href;let l=o.get(s);if(!l){const t=e.createElement("script");t.type="module";t.crossOrigin=r.crossOrigin;t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${i}.m = m;`],{type:"application/javascript"}));l=new Promise((e=>{t.onload=()=>{e(n[i].m);t.remove()}}));o.set(s,l);e.head.appendChild(t)}return l}}};s().then((e=>{i();return r(JSON.parse('[["p-b4bd626d",[[1,"vertex-viewer-pin-tool",{"pinController":[1040],"pinModel":[16],"viewer":[16],"tool":[1025],"mode":[1025],"primaryColor":[1025,"primary-color"],"accentColor":[1025,"accent-color"],"pins":[32],"selectedPinId":[32],"elementBounds":[32],"projectionViewMatrix":[32]}]]],["p-07d8e93f",[[1,"vertex-scene-tree",{"overScanCount":[2,"over-scan-count"],"viewerSelector":[1,"viewer-selector"],"viewer":[1040],"rowData":[16],"config":[1],"configEnv":[1,"config-env"],"controller":[1040],"searchOptions":[1040],"metadataSearchExactMatch":[1028,"metadata-search-exact-match"],"metadataSearchKeys":[1040],"metadataKeys":[16],"rows":[32],"totalRows":[32],"showLoader":[32],"showEmptyResults":[32],"stateMap":[32],"errorDetails":[32],"attemptingRetry":[32],"invalidateRows":[64],"scrollToIndex":[64],"scrollToItem":[64],"expandAll":[64],"collapseAll":[64],"expandItem":[64],"collapseItem":[64],"toggleExpandItem":[64],"toggleItemVisibility":[64],"hideItem":[64],"showItem":[64],"selectItem":[64],"deselectItem":[64],"getRowAtIndex":[64],"getRowForEvent":[64],"getRowAtClientY":[64],"filterItems":[64],"selectFilteredItems":[64],"fetchMetadataKeys":[64]},[[0,"search","handleSearch"],[0,"cellLoaded","handleCellLoaded"]]]]],["p-56ca4f9b",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["p-6301bb69",[[1,"vertex-viewer-markup",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"selectedMarkupId":[1025,"selected-markup-id"],"selectNew":[4,"select-new"],"startLineAnchorStyle":[1025,"start-line-anchor-style"],"endLineAnchorStyle":[1025,"end-line-anchor-style"],"toSelectMarkupId":[32],"pointerDownPosition":[32],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[0,"interactionEnd","handleMarkupUpdated"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["p-db619362",[[1,"vertex-viewer-markup-tool",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"startLineAnchorStyle":[1025,"start-line-anchor-style"],"endLineAnchorStyle":[1025,"end-line-anchor-style"],"stateMap":[32],"reset":[64]}]]],["p-2f953ed6",[[1,"vertex-viewer-view-cube",{"xPositiveLabel":[1,"x-positive-label"],"xNegativeLabel":[1,"x-negative-label"],"yPositiveLabel":[1,"y-positive-label"],"yNegativeLabel":[1,"y-negative-label"],"zPositiveLabel":[1,"z-positive-label"],"zNegativeLabel":[1,"z-negative-label"],"standardViewsOff":[4,"standard-views-off"],"viewAll":[4,"view-all"],"animationDuration":[2,"animation-duration"],"triadOff":[4,"triad-off"],"worldOrientation":[1040],"camera":[1040],"viewer":[16],"boxLength":[32],"triadPosition":[32]}]]],["p-04e623a5",[[1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start-json"],"end":[1040],"endJson":[1,"end-json"],"distance":[1026],"showAxisReferenceLines":[4,"show-axis-reference-lines"],"snapDistance":[2,"snap-distance"],"units":[1],"fractionalDigits":[2,"fractional-digits"],"labelFormatter":[16],"anchorLabelOffset":[2,"anchor-label-offset"],"lineCapLength":[2,"line-cap-length"],"mode":[513],"interactingAnchor":[1537,"interacting-anchor"],"invalid":[1540],"camera":[16],"hitProvider":[16],"indicatorPt":[1040],"viewer":[16],"measurementModel":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32],"measurementUnits":[32],"computeElementMetrics":[64]}]]],["p-b56bff22",[[1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementOverlays":[16],"measurementController":[1040],"measurableEntityTypes":[16],"viewer":[16],"configEnv":[1,"config-env"],"config":[1]}]]],["p-519f8718",[[1,"vertex-viewer-annotation-callout",{"data":[16],"iconSize":[1,"icon-size"]}]]],["p-42d9df54",[[1,"vertex-viewer-box-query-tool",{"viewer":[16],"controller":[1040],"model":[1040],"operationType":[1,"operation-type"],"mode":[1],"details":[32]}]]],["p-c4016928",[[1,"vertex-viewer-walk-mode-tool",{"viewer":[16],"controller":[1040],"model":[1040],"teleportMode":[1,"teleport-mode"],"enabled":[4]}]]],["p-53a95446",[[1,"vertex-scene-tree-table-cell",{"node":[16],"tree":[16],"value":[1],"placeholder":[1],"hovered":[1028],"isScrolling":[4,"is-scrolling"],"expandToggle":[4,"expand-toggle"],"visibilityToggle":[4,"visibility-toggle"],"selectionHandler":[16],"visibilityHandler":[16],"expansionHandler":[16],"hoverController":[16]}]]],["p-109f49a3",[[1,"vertex-scene-tree-table-column",{"initialWidth":[2,"initial-width"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"]}]]],["p-ca00f349",[[1,"vertex-scene-tree-table-header"]]],["p-bbeeb724",[[1,"vertex-scene-tree-table-resize-divider",{"dragging":[32]}]]],["p-29a85362",[[1,"vertex-scene-tree-toolbar-group"]]],["p-c55a7156",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"deviceId":[1025,"device-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"cameraType":[1537,"camera-type"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"token":[1025],"depthBuffers":[1,"depth-buffers"],"phantom":[16],"noDefaultLights":[4,"no-default-lights"],"enableTemporalRefinement":[4,"enable-temporal-refinement"],"experimentalRenderingOptions":[1,"experimental-rendering-options"],"featureLines":[16],"selectionHighlighting":[16],"featureHighlighting":[16],"featureMaps":[1,"feature-maps"],"resizeDebounce":[2,"resize-debounce"],"frame":[1040],"stream":[1040],"stencilBuffer":[1040],"viewport":[1040],"annotations":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget_DEPRECATED":[64],"addCursor":[64],"getInteractionHandlers":[64],"getKeyInteractions":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64]},[[0,"tap","handleTapEvent"]]]]],["p-c24e154f",[[1,"vertex-viewer-hit-result-indicator",{"viewer":[16],"position":[1040],"normal":[1040]}]]],["p-94ff60ee",[[1,"vertex-viewer-measurement-details",{"measurementModel":[16],"measurementOverlays":[16],"measurementOutcome":[1040],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"resultTypes":[16],"overlay":[32],"distanceMeasurementUnits":[32],"angleMeasurementUnits":[32],"areaMeasurementUnits":[32]}]]],["p-c31d61dc",[[1,"vertex-viewer-transform-widget",{"viewer":[16],"position":[1040],"rotation":[1040],"controller":[1040],"xRotationDisabled":[1028,"x-rotation-disabled"],"yRotationDisabled":[1028,"y-rotation-disabled"],"zRotationDisabled":[1028,"z-rotation-disabled"],"xTranslationDisabled":[1028,"x-translation-disabled"],"yTranslationDisabled":[1028,"y-translation-disabled"],"zTranslationDisabled":[1028,"z-translation-disabled"],"showInputs":[4,"show-inputs"],"distanceUnit":[1,"distance-unit"],"angleUnit":[1,"angle-unit"],"decimalPlaces":[2,"decimal-places"],"EXPERIMENTAL_undoKeybindings":[4,"e-x-p-e-r-i-m-e-n-t-a-l_undo-keybindings"],"hovered":[1040],"inputPosition":[32],"inputValue":[32],"isEndingTransform":[32],"inputShouldFocus":[32],"EXPERIMENTAL_undo":[64]}]]],["p-abf37f5f",[[0,"vertex-viewer-pin-group",{"pin":[16],"matrix":[1040],"projectionViewMatrix":[16],"elementBounds":[1040],"pinModel":[16],"pinController":[16],"selected":[4],"occluded":[1540],"detached":[1540],"invalidateStateCounter":[32]},[[0,"occlusionStateChanged","handleOcclusionStateChanged"],[0,"detachedStateChanged","handleDetachedStateChanged"]]]]],["p-203f6d5b",[[6,"vertex-viewer-dom-group",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040]}]]],["p-bbffb5bc",[[1,"vertex-viewer-teleport-tool",{"viewer":[16],"mode":[1025],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"],"controller":[1040],"model":[1040]}]]],["p-42e8b894",[[1,"vertex-viewer-spinner",{"size":[1]}]]],["p-098d1c23",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"controller":[16],"value":[1025],"focused":[32],"isSearching":[32],"setFocus":[64],"clear":[64]}],[1,"vertex-scene-tree-table-layout",{"tree":[16],"controller":[16],"rows":[16],"totalRows":[2,"total-rows"],"rowHeight":[1026,"row-height"],"overScanCount":[2,"over-scan-count"],"rowData":[16],"layoutOffset":[1026,"layout-offset"],"scrollOffset":[1026,"scroll-offset"],"layoutHeight":[1026,"layout-height"],"layoutWidth":[1026,"layout-width"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"columnGridLayout":[32],"columnGridFixedLayout":[32],"isComputingCellHeight":[32],"lastDividerPointerPosition":[32],"resizingColumnIndex":[32],"isScrolling":[32],"scrollTimer":[32],"stateMap":[32],"scrollToPosition":[64]}],[1,"vertex-scene-tree-toolbar"]]],["p-ac727de0",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["p-79a15f12",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["p-c5402beb",[[0,"vertex-viewer-pin-label",{"pin":[16],"elementBounds":[16],"value":[1025],"pinController":[16],"focused":[32],"computedScreenPosition":[32],"textareaRows":[32],"contentElBounds":[32],"setFocus":[64]}],[0,"vertex-viewer-pin-label-line",{"pinPoint":[16],"labelPoint":[16],"pin":[16]}]]],["p-e014b960",[[1,"vertex-viewer-measurement-overlays",{"measurementOverlays":[16],"camera":[1040],"viewer":[16],"overlays":[32]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]],["p-63adf163",[[6,"vertex-viewer-dom-renderer",{"drawMode":[1,"draw-mode"],"viewer":[16],"camera":[1040],"depthBuffer":[1040],"viewport":[32],"invalidateFrameCounter":[32]},[[0,"propertyChange","handlePropertyChange"]]],[1,"vertex-viewer-dom-element",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040],"occlusionOff":[4,"occlusion-off"],"occluded":[516],"detachedOff":[4,"detached-off"],"detached":[516],"billboardOff":[4,"billboard-off"],"interactionsOff":[516,"interactions-off"]}]]],["p-03cc9627",[[1,"vertex-viewer-markup-arrow",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"startLineAnchorStyle":[1025,"start-line-anchor-style"],"endLineAnchorStyle":[1025,"end-line-anchor-style"],"mode":[513],"viewer":[16],"elementBounds":[32],"dispose":[64]}],[1,"vertex-viewer-markup-circle",{"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"dispose":[64]}],[1,"vertex-viewer-markup-freeform",{"points":[1040],"pointsJson":[1,"points"],"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"screenPoints":[32],"dispose":[64]}]]],["p-ea8be7db",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]]]'),e)}));
|
|
4
|
+
import{d as e,N as t,w as n,p as a,b as r}from"./p-e541044a.js";import{g as i}from"./p-446bdb50.js";import"./p-88c19f38.js";const o=e=>`__sc_import_${e.replace(/\s|-/g,"_")}`;const s=()=>{const r=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t));const i="";const o={};if(i!==""){o.resourcesUrl=new URL(".",i).href}else{o.resourcesUrl=new URL(".",new URL(r.getAttribute("data-resources-url")||r.src,n.location.href)).href;{l(o.resourcesUrl,r)}if(!n.customElements){return __sc_import_viewer("./p-093f9bdb.js").then((()=>o))}}return a(o)};const l=(a,r)=>{const i=o(t);try{n[i]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const o=new Map;n[i]=t=>{const s=new URL(t,a).href;let l=o.get(s);if(!l){const t=e.createElement("script");t.type="module";t.crossOrigin=r.crossOrigin;t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${i}.m = m;`],{type:"application/javascript"}));l=new Promise((e=>{t.onload=()=>{e(n[i].m);t.remove()}}));o.set(s,l);e.head.appendChild(t)}return l}}};s().then((e=>{i();return r(JSON.parse('[["p-b4bd626d",[[1,"vertex-viewer-pin-tool",{"pinController":[1040],"pinModel":[16],"viewer":[16],"tool":[1025],"mode":[1025],"primaryColor":[1025,"primary-color"],"accentColor":[1025,"accent-color"],"pins":[32],"selectedPinId":[32],"elementBounds":[32],"projectionViewMatrix":[32]}]]],["p-07d8e93f",[[1,"vertex-scene-tree",{"overScanCount":[2,"over-scan-count"],"viewerSelector":[1,"viewer-selector"],"viewer":[1040],"rowData":[16],"config":[1],"configEnv":[1,"config-env"],"controller":[1040],"searchOptions":[1040],"metadataSearchExactMatch":[1028,"metadata-search-exact-match"],"metadataSearchKeys":[1040],"metadataKeys":[16],"rows":[32],"totalRows":[32],"showLoader":[32],"showEmptyResults":[32],"stateMap":[32],"errorDetails":[32],"attemptingRetry":[32],"invalidateRows":[64],"scrollToIndex":[64],"scrollToItem":[64],"expandAll":[64],"collapseAll":[64],"expandItem":[64],"collapseItem":[64],"toggleExpandItem":[64],"toggleItemVisibility":[64],"hideItem":[64],"showItem":[64],"selectItem":[64],"deselectItem":[64],"getRowAtIndex":[64],"getRowForEvent":[64],"getRowAtClientY":[64],"filterItems":[64],"selectFilteredItems":[64],"fetchMetadataKeys":[64]},[[0,"search","handleSearch"],[0,"cellLoaded","handleCellLoaded"]]]]],["p-56ca4f9b",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["p-6301bb69",[[1,"vertex-viewer-markup",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"selectedMarkupId":[1025,"selected-markup-id"],"selectNew":[4,"select-new"],"startLineAnchorStyle":[1025,"start-line-anchor-style"],"endLineAnchorStyle":[1025,"end-line-anchor-style"],"toSelectMarkupId":[32],"pointerDownPosition":[32],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[0,"interactionEnd","handleMarkupUpdated"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["p-db619362",[[1,"vertex-viewer-markup-tool",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"startLineAnchorStyle":[1025,"start-line-anchor-style"],"endLineAnchorStyle":[1025,"end-line-anchor-style"],"stateMap":[32],"reset":[64]}]]],["p-2f953ed6",[[1,"vertex-viewer-view-cube",{"xPositiveLabel":[1,"x-positive-label"],"xNegativeLabel":[1,"x-negative-label"],"yPositiveLabel":[1,"y-positive-label"],"yNegativeLabel":[1,"y-negative-label"],"zPositiveLabel":[1,"z-positive-label"],"zNegativeLabel":[1,"z-negative-label"],"standardViewsOff":[4,"standard-views-off"],"viewAll":[4,"view-all"],"animationDuration":[2,"animation-duration"],"triadOff":[4,"triad-off"],"worldOrientation":[1040],"camera":[1040],"viewer":[16],"boxLength":[32],"triadPosition":[32]}]]],["p-04e623a5",[[1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start-json"],"end":[1040],"endJson":[1,"end-json"],"distance":[1026],"showAxisReferenceLines":[4,"show-axis-reference-lines"],"snapDistance":[2,"snap-distance"],"units":[1],"fractionalDigits":[2,"fractional-digits"],"labelFormatter":[16],"anchorLabelOffset":[2,"anchor-label-offset"],"lineCapLength":[2,"line-cap-length"],"mode":[513],"interactingAnchor":[1537,"interacting-anchor"],"invalid":[1540],"camera":[16],"hitProvider":[16],"indicatorPt":[1040],"viewer":[16],"measurementModel":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32],"measurementUnits":[32],"computeElementMetrics":[64]}]]],["p-b56bff22",[[1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementOverlays":[16],"measurementController":[1040],"measurableEntityTypes":[16],"viewer":[16],"configEnv":[1,"config-env"],"config":[1]}]]],["p-519f8718",[[1,"vertex-viewer-annotation-callout",{"data":[16],"iconSize":[1,"icon-size"]}]]],["p-42d9df54",[[1,"vertex-viewer-box-query-tool",{"viewer":[16],"controller":[1040],"model":[1040],"operationType":[1,"operation-type"],"mode":[1],"details":[32]}]]],["p-c4016928",[[1,"vertex-viewer-walk-mode-tool",{"viewer":[16],"controller":[1040],"model":[1040],"teleportMode":[1,"teleport-mode"],"enabled":[4]}]]],["p-53a95446",[[1,"vertex-scene-tree-table-cell",{"node":[16],"tree":[16],"value":[1],"placeholder":[1],"hovered":[1028],"isScrolling":[4,"is-scrolling"],"expandToggle":[4,"expand-toggle"],"visibilityToggle":[4,"visibility-toggle"],"selectionHandler":[16],"visibilityHandler":[16],"expansionHandler":[16],"hoverController":[16]}]]],["p-109f49a3",[[1,"vertex-scene-tree-table-column",{"initialWidth":[2,"initial-width"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"]}]]],["p-ca00f349",[[1,"vertex-scene-tree-table-header"]]],["p-bbeeb724",[[1,"vertex-scene-tree-table-resize-divider",{"dragging":[32]}]]],["p-29a85362",[[1,"vertex-scene-tree-toolbar-group"]]],["p-c55a7156",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"deviceId":[1025,"device-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"cameraType":[1537,"camera-type"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"token":[1025],"depthBuffers":[1,"depth-buffers"],"phantom":[16],"noDefaultLights":[4,"no-default-lights"],"enableTemporalRefinement":[4,"enable-temporal-refinement"],"experimentalRenderingOptions":[1,"experimental-rendering-options"],"featureLines":[16],"selectionHighlighting":[16],"featureHighlighting":[16],"featureMaps":[1,"feature-maps"],"resizeDebounce":[2,"resize-debounce"],"frame":[1040],"stream":[1040],"stencilBuffer":[1040],"viewport":[1040],"annotations":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget_DEPRECATED":[64],"addCursor":[64],"getInteractionHandlers":[64],"getKeyInteractions":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64]},[[0,"tap","handleTapEvent"]]]]],["p-c24e154f",[[1,"vertex-viewer-hit-result-indicator",{"viewer":[16],"position":[1040],"normal":[1040]}]]],["p-94ff60ee",[[1,"vertex-viewer-measurement-details",{"measurementModel":[16],"measurementOverlays":[16],"measurementOutcome":[1040],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"resultTypes":[16],"overlay":[32],"distanceMeasurementUnits":[32],"angleMeasurementUnits":[32],"areaMeasurementUnits":[32]}]]],["p-c31d61dc",[[1,"vertex-viewer-transform-widget",{"viewer":[16],"position":[1040],"rotation":[1040],"controller":[1040],"xRotationDisabled":[1028,"x-rotation-disabled"],"yRotationDisabled":[1028,"y-rotation-disabled"],"zRotationDisabled":[1028,"z-rotation-disabled"],"xTranslationDisabled":[1028,"x-translation-disabled"],"yTranslationDisabled":[1028,"y-translation-disabled"],"zTranslationDisabled":[1028,"z-translation-disabled"],"showInputs":[4,"show-inputs"],"distanceUnit":[1,"distance-unit"],"angleUnit":[1,"angle-unit"],"decimalPlaces":[2,"decimal-places"],"EXPERIMENTAL_undoKeybindings":[4,"e-x-p-e-r-i-m-e-n-t-a-l_undo-keybindings"],"hovered":[1040],"inputPosition":[32],"inputValue":[32],"isEndingTransform":[32],"inputShouldFocus":[32],"EXPERIMENTAL_undo":[64]}]]],["p-abf37f5f",[[0,"vertex-viewer-pin-group",{"pin":[16],"matrix":[1040],"projectionViewMatrix":[16],"elementBounds":[1040],"pinModel":[16],"pinController":[16],"selected":[4],"occluded":[1540],"detached":[1540],"invalidateStateCounter":[32]},[[0,"occlusionStateChanged","handleOcclusionStateChanged"],[0,"detachedStateChanged","handleDetachedStateChanged"]]]]],["p-203f6d5b",[[6,"vertex-viewer-dom-group",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040]}]]],["p-bbffb5bc",[[1,"vertex-viewer-teleport-tool",{"viewer":[16],"mode":[1025],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"],"controller":[1040],"model":[1040]}]]],["p-42e8b894",[[1,"vertex-viewer-spinner",{"size":[1]}]]],["p-098d1c23",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"controller":[16],"value":[1025],"focused":[32],"isSearching":[32],"setFocus":[64],"clear":[64]}],[1,"vertex-scene-tree-table-layout",{"tree":[16],"controller":[16],"rows":[16],"totalRows":[2,"total-rows"],"rowHeight":[1026,"row-height"],"overScanCount":[2,"over-scan-count"],"rowData":[16],"layoutOffset":[1026,"layout-offset"],"scrollOffset":[1026,"scroll-offset"],"layoutHeight":[1026,"layout-height"],"layoutWidth":[1026,"layout-width"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"columnGridLayout":[32],"columnGridFixedLayout":[32],"isComputingCellHeight":[32],"lastDividerPointerPosition":[32],"resizingColumnIndex":[32],"isScrolling":[32],"scrollTimer":[32],"stateMap":[32],"scrollToPosition":[64]}],[1,"vertex-scene-tree-toolbar"]]],["p-ac727de0",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["p-79a15f12",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["p-c5402beb",[[0,"vertex-viewer-pin-label",{"pin":[16],"elementBounds":[16],"value":[1025],"pinController":[16],"focused":[32],"computedScreenPosition":[32],"textareaRows":[32],"contentElBounds":[32],"setFocus":[64]}],[0,"vertex-viewer-pin-label-line",{"pinPoint":[16],"labelPoint":[16],"pin":[16]}]]],["p-e014b960",[[1,"vertex-viewer-measurement-overlays",{"measurementOverlays":[16],"camera":[1040],"viewer":[16],"overlays":[32]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]],["p-e97527a1",[[6,"vertex-viewer-dom-renderer",{"drawMode":[1,"draw-mode"],"viewer":[16],"camera":[1040],"depthBuffer":[1040],"viewport":[32],"invalidateFrameCounter":[32]},[[0,"propertyChange","handlePropertyChange"]]],[1,"vertex-viewer-dom-element",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040],"occlusionOff":[4,"occlusion-off"],"occluded":[516],"detachedOff":[4,"detached-off"],"detached":[516],"billboardOff":[4,"billboard-off"],"interactionsOff":[516,"interactions-off"]}]]],["p-03cc9627",[[1,"vertex-viewer-markup-arrow",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"startLineAnchorStyle":[1025,"start-line-anchor-style"],"endLineAnchorStyle":[1025,"end-line-anchor-style"],"mode":[513],"viewer":[16],"elementBounds":[32],"dispose":[64]}],[1,"vertex-viewer-markup-circle",{"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"dispose":[64]}],[1,"vertex-viewer-markup-freeform",{"points":[1040],"pointsJson":[1,"points"],"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"screenPoints":[32],"dispose":[64]}]]],["p-ea8be7db",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]]]'),e)}));
|
|
5
5
|
//# sourceMappingURL=viewer.esm.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertexvis/viewer",
|
|
3
|
-
"version": "0.21.1-testing.
|
|
3
|
+
"version": "0.21.1-testing.9",
|
|
4
4
|
"description": "The Vertex SDK for viewing models.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Vertex Developers <support@vertexvis.com> (https://developer.vertexvis.com)",
|
|
@@ -50,12 +50,12 @@
|
|
|
50
50
|
"@stencil/core": "^2.16.1",
|
|
51
51
|
"@types/classnames": "^2.3.1",
|
|
52
52
|
"@vertexvis/frame-streaming-protos": "^0.13.2",
|
|
53
|
-
"@vertexvis/geometry": "0.21.1-testing.
|
|
54
|
-
"@vertexvis/html-templates": "0.21.1-testing.
|
|
53
|
+
"@vertexvis/geometry": "0.21.1-testing.9",
|
|
54
|
+
"@vertexvis/html-templates": "0.21.1-testing.9",
|
|
55
55
|
"@vertexvis/scene-tree-protos": "^0.1.21",
|
|
56
56
|
"@vertexvis/scene-view-protos": "^0.3.2",
|
|
57
|
-
"@vertexvis/stream-api": "0.21.1-testing.
|
|
58
|
-
"@vertexvis/utils": "0.21.1-testing.
|
|
57
|
+
"@vertexvis/stream-api": "0.21.1-testing.9",
|
|
58
|
+
"@vertexvis/utils": "0.21.1-testing.9",
|
|
59
59
|
"@vertexvis/web-workers": "^0.1.0",
|
|
60
60
|
"camel-case": "^4.1.2",
|
|
61
61
|
"classnames": "^2.3.1",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"@vertexvis/eslint-config-vertexvis-typescript": "^0.5.0",
|
|
84
84
|
"@vertexvis/rollup-plugin-web-workers": "^0.1.0",
|
|
85
85
|
"@vertexvis/typescript-config-vertexvis": "1.1.0",
|
|
86
|
-
"@vertexwebsdk/build": "0.21.1-testing.
|
|
86
|
+
"@vertexwebsdk/build": "0.21.1-testing.9",
|
|
87
87
|
"abortcontroller-polyfill": "^1.7.3",
|
|
88
88
|
"chance": "^1.1.8",
|
|
89
89
|
"eslint": "^8.17.0",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"typedoc": "^0.22.17",
|
|
99
99
|
"typescript": "^4.5.4"
|
|
100
100
|
},
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "45177b99623f408954e0517b7d8ed706c5b7fc67"
|
|
102
102
|
}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Copyright (c) 2024 Vertex Software LLC. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import{r as t,c as e,h as n,H as s,g as i}from"./p-e541044a.js";import{v as o,q as a,m as h,x as r}from"./p-26198b53.js";import{o as l}from"./p-81d5a971.js";import"./p-cd9b486d.js";import"./p-d312d59a.js";import{V as d}from"./p-95827eb0.js";import"./p-a30a8324.js";import"./p-88c19f38.js";const c=":host{position:absolute;pointer-events:none;visibility:hidden}:host(.hydrated){visibility:hidden}:host(.ready){visibility:inherit}:host(:not([interactions-off]))>*{pointer-events:auto}";const u=class{constructor(n){t(this,n);this.occlusionStateChanged=e(this,"occlusionStateChanged",7);this.detachedStateChanged=e(this,"detachedStateChanged",7);this.propertyChange=e(this,"propertyChange",7);this.position=o.origin();this.positionJson="";this.quaternion=a.create();this.quaternionJson="";this.scale=o.create(1,1,1);this.scaleJson="";this.matrix=h.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,e){if(!l.isEqual(t,e)){this.propertyChange.emit()}}connectedCallback(){this.syncProperties()}componentShouldUpdate(t,e,n){return n==="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?a.fromEuler(this.rotation):this.quaternion}syncQuaternion(){this.quaternion=this.quaternionJson.length>0?this.parseJson("quaternionJson",this.quaternionJson,a.fromJson):this.quaternion}syncScale(){this.scale=this.scaleJson.length>0?this.parseJson("scaleJson",this.scaleJson,o.fromJson):this.scale}syncMatrix(){this.matrix=h.makeTRS(this.position,this.quaternion,this.scale)}parseJson(t,e,n){try{return n(e)}catch(e){console.warn(`Could not parse \`${t}\`. Invalid JSON.`);throw e}}render(){return n(s,null,n("slot",null))}static get watchers(){return{position:["handlePositionChange"],positionJson:["handlePositionJsonChanged"],rotation:["handleRotationChanged"],rotationJson:["handleRotationJsonChanged"],quaternion:["handleQuaternionChange"],quaternionJson:["handleQuaternionJsonChanged"],scale:["handleScaleChange"],scaleJson:["handleScaleJsonChanged"],matrix:["handleMatrixChanged"],occluded:["handleOcclusionStateChanged"],detached:["handleDetachedStateChanged"]}}};u.style=c;function f(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 p=(t,e)=>n("div",{class:"root-2d"},e);function m(t,e,n,s,i){const o=g(t,e,s).sort(((t,e)=>t.distanceToCamera-e.distanceToCamera));for(let t=0;t<o.length;t++){const{element:e,worldMatrix:a,worldPosition:h}=o[t];const r=!e.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(h,n));const l=!e.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(h,n));const d=y(h,s.projectionViewMatrix,n);C(e,d);w(e,t,o.length);m(e,a,n,s,i);e.occluded=r!==null&&r!==void 0?r:false;e.detached=l!==null&&l!==void 0?l:false;e.classList.add("ready")}}function g(t,e,n){const s=[];for(let i=0;i<t.children.length;i++){const a=t.children[i];if(v(a)){const t=h.multiply(e,a.matrix);s.push(...g(a,t,n))}else if(f(a)){const t=h.multiply(e,a.matrix);const i=o.fromMatrixPosition(t);const r=o.distanceSquared(n.position,i);s.push({element:a,worldMatrix:t,worldPosition:i,distanceToCamera:r})}else{s.push(...g(a,e,n))}}return s}function C(t,e){t.style.transform=[`translate(-50%, -50%)`,`translate(${e.x}px, ${e.y}px)`].join(" ")}function w(t,e,n){t.style.zIndex=`${n-e}`}function y(t,e,n){const s=o.transformMatrix(t,e);return n.transformVectorToViewport(s)}const x=({camera:t,viewport:e},s)=>{const i=h.toObject(t.projectionMatrix);const o=t.isOrthographic()?t.far*2/(t.fovHeight*2)*(e.height/2):i.m22*(e.height/2);const a=[`translateZ(${o}px)`,M(t.viewMatrix),`translate(${e.width/2}px, ${e.height/2}px)`].join(" ");return n("div",{class:"root-3d",style:{perspective:`${o}px`}},n("div",{class:"camera",style:{transform:a}},s))};function J(t,e,n,s,i){for(let o=0;o<t.children.length;o++){const a=t.children[o];if(f(a)){E(a,e,n,s,i)}else if(v(a)){R(a,e,n,s,i)}else{J(a,e,n,s,i)}}}function E(t,e,n,s,i){const a=h.multiply(e,t.matrix);const r=o.fromMatrixPosition(a);const l=!t.occlusionOff&&(i===null||i===void 0?void 0:i.isOccluded(r,n));t.occluded=l!==null&&l!==void 0?l:false;const d=!t.detachedOff&&(i===null||i===void 0?void 0:i.isDetached(r,n));t.detached=d!==null&&d!==void 0?d:false;t.classList.add("ready");if(t.billboardOff){t.style.transform=S(a)}else{let e=s.viewMatrix;e=h.transpose(e);e=h.position(e,a);e=h.scale(e,t.scale);e[3]=0;e[7]=0;e[11]=0;e[15]=1;t.style.transform=S(e)}J(t,a,n,s,i)}function R(t,e,n,s,i){const o=h.multiply(e,t.matrix);J(t,o,n,s,i)}function M(t){const e=[b(t[0]),b(-t[1]),b(t[2]),b(t[3]),b(t[4]),b(-t[5]),b(t[6]),b(t[7]),b(t[8]),b(-t[9]),b(t[10]),b(t[11]),b(t[12]),b(-t[13]),b(t[14]),b(t[15])].join(", ");return`matrix3d(${e})`}function S(t){const e=[b(t[0]),b(t[1]),b(t[2]),b(t[3]),b(-t[4]),b(-t[5]),b(-t[6]),b(-t[7]),b(t[8]),b(t[9]),b(t[10]),b(t[11]),b(t[12]),b(t[13]),b(t[14]),b(t[15])].join(", ");return[`translate(-50%, -50%)`,`matrix3d(${e})`].join(" ")}function b(t){return Math.abs(t)<1e-10?0:t}const P=".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 $=class{constructor(e){t(this,e);this.drawMode="3d";this.viewport=new d(0,0);this.invalidateFrameCounter=0;this.handleViewerFrameDrawn=async()=>{this.updatePropsFromViewer()}}componentWillLoad(){var t;const e=new ResizeObserver((()=>this.handleResize()));e.observe(this.hostEl);const n=new MutationObserver((()=>this.handleChildrenChange()));n.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 n(s,null,n(p,null,n("slot",null)))}else{return n(s,null,n(x,{camera:this.camera,viewport:this.viewport},n("slot",null)))}}else{return n(s,null)}}componentWillRender(){this.updateElements()}handleViewerChange(t,e){e===null||e===void 0?void 0:e.removeEventListener("frameDrawn",this.handleViewerFrameDrawn);t===null||t===void 0?void 0:t.addEventListener("frameDrawn",this.handleViewerFrameDrawn)}handlePropertyChange(){this.invalidateFrame()}invalidateFrame(){this.invalidateFrameCounter=this.invalidateFrameCounter+1}async updateElements(){const{viewport:t,camera:e}=this;const n=h.makeIdentity();if(e!=null){if(this.drawMode==="3d"){J(this.hostEl,n,t,e,this.depthBuffer)}else{m(this.hostEl,n,t,e,this.depthBuffer)}}}handleResize(){const t=this.hostEl.getBoundingClientRect();this.viewport=new d(t.width,t.height)}handleChildrenChange(){this.invalidateFrame()}async updatePropsFromViewer(){const{frame:t,depthBuffers:e}=this.viewer||{};this.depthBuffer=e==="all"?await(t===null||t===void 0?void 0:t.depthBuffer()):undefined;this.camera=t===null||t===void 0?void 0:t.scene.camera}get hostEl(){return i(this)}static get watchers(){return{viewer:["handleViewerChange"]}}};$.style=P;export{u as vertex_viewer_dom_element,$ as vertex_viewer_dom_renderer};
|
|
5
|
-
//# sourceMappingURL=p-63adf163.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"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"],"names":["viewerDomElementCss","ViewerDomElement","[object Object]","hostRef","this","position","Vector3","origin","positionJson","quaternion","Quaternion","create","quaternionJson","scale","scaleJson","matrix","Matrix4","makeIdentity","occlusionOff","occluded","detachedOff","detached","billboardOff","interactionsOff","syncMatrix","syncPosition","syncQuaternionWithRotation","syncRotation","syncQuaternion","syncScale","newMatrix","oldMatrix","Objects","isEqual","propertyChange","emit","syncProperties","newValue","oldValue","prop","occlusionStateChanged","detachedStateChanged","length","parseJson","fromJson","rotation","rotationJson","Euler","fromEuler","makeTRS","propName","value","parse","e","console","warn","h","Host","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","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","Viewport","invalidateFrameCounter","handleViewerFrameDrawn","async","updatePropsFromViewer","resized","ResizeObserver","handleResize","observe","mutation","MutationObserver","handleChildrenChange","childList","handleViewerChange","viewer","undefined","_a","frame","updateElements","newViewer","oldViewer","removeEventListener","addEventListener","invalidateFrame","bounds","getBoundingClientRect","depthBuffers","scene"],"mappings":"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","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')\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')\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')\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')\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')\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')\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')\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')\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 this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\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 { FrameCameraWithMatrices } 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: FrameCameraWithMatrices,\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 occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(worldPosition, viewport);\n const detached =\n !element.detachedOff && 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: FrameCameraWithMatrices\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 { FrameCameraWithMatrices } from '../../lib/types/frame';\nimport { isVertexViewerDomElement } from '../viewer-dom-element/utils';\nimport { isVertexViewerDomGroup } from '../viewer-dom-group/utils';\n\ninterface Props {\n camera: FrameCameraWithMatrices;\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: FrameCameraWithMatrices,\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: FrameCameraWithMatrices,\n depthBuffer: DepthBuffer | undefined\n): void {\n const worldMatrix = Matrix4.multiply(parentWorldMatrix, element.matrix);\n\n const positionWorld = Vector3.fromMatrixPosition(worldMatrix);\n const occluded =\n !element.occlusionOff && depthBuffer?.isOccluded(positionWorld, viewport);\n element.occluded = occluded ?? false;\n const detached =\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: FrameCameraWithMatrices,\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';\n\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 * 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 @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\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 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, depthBuffers } = this.viewer || {};\n\n this.depthBuffer =\n depthBuffers === 'all' ? await frame?.depthBuffer() : undefined;\n this.camera = frame?.scene.camera;\n }\n}\n"]}
|