@pacem/pacem 1.0.0-euler → 1.0.0-galois

package/dist/docs/pacem-ui.json

@@ -12846,6 +12846,102 @@
                       "isAbstract": false,
                       "name": "disconnectedCallback"
                     },
+                    {
+                      "kind": "Method",
+                      "canonicalReference": "@pacem/pacem-ui!Components.UI.PacemMenuCursorElement#propertyChangedCallback:member(1)",
+                      "docComment": "",
+                      "excerptTokens": [
+                        {
+                          "kind": "Content",
+                          "text": "propertyChangedCallback(name: "
+                        },
+                        {
+                          "kind": "Content",
+                          "text": "string"
+                        },
+                        {
+                          "kind": "Content",
+                          "text": ", old: "
+                        },
+                        {
+                          "kind": "Content",
+                          "text": "any"
+                        },
+                        {
+                          "kind": "Content",
+                          "text": ", val: "
+                        },
+                        {
+                          "kind": "Content",
+                          "text": "any"
+                        },
+                        {
+                          "kind": "Content",
+                          "text": ", first: "
+                        },
+                        {
+                          "kind": "Content",
+                          "text": "boolean"
+                        },
+                        {
+                          "kind": "Content",
+                          "text": "): "
+                        },
+                        {
+                          "kind": "Content",
+                          "text": "void"
+                        },
+                        {
+                          "kind": "Content",
+                          "text": ";"
+                        }
+                      ],
+                      "isStatic": false,
+                      "returnTypeTokenRange": {
+                        "startIndex": 9,
+                        "endIndex": 10
+                      },
+                      "releaseTag": "Public",
+                      "isProtected": false,
+                      "overloadIndex": 1,
+                      "parameters": [
+                        {
+                          "parameterName": "name",
+                          "parameterTypeTokenRange": {
+                            "startIndex": 1,
+                            "endIndex": 2
+                          },
+                          "isOptional": false
+                        },
+                        {
+                          "parameterName": "old",
+                          "parameterTypeTokenRange": {
+                            "startIndex": 3,
+                            "endIndex": 4
+                          },
+                          "isOptional": false
+                        },
+                        {
+                          "parameterName": "val",
+                          "parameterTypeTokenRange": {
+                            "startIndex": 5,
+                            "endIndex": 6
+                          },
+                          "isOptional": false
+                        },
+                        {
+                          "parameterName": "first",
+                          "parameterTypeTokenRange": {
+                            "startIndex": 7,
+                            "endIndex": 8
+                          },
+                          "isOptional": false
+                        }
+                      ],
+                      "isOptional": false,
+                      "isAbstract": false,
+                      "name": "propertyChangedCallback"
+                    },
                     {
                       "kind": "Method",
                       "canonicalReference": "@pacem/pacem-ui!Components.UI.PacemMenuCursorElement#viewActivatedCallback:member(1)",

package/dist/typings/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem v1.0.0-euler (https://js.pacem.it)
+ * @pacem/pacem v1.0.0-galois (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -8168,9 +8168,11 @@ declare class PacemHierarchyElement extends PacemBaseElement {
     private _buildHierarchyItemDomId;
     private _itemCreate;
     private _itemRemove;
+    private _disposeBinders;
+    private _disposeBindersAndTargets;
     private _setupItemTemplate;
     private _compileHierarchy;
-    private _cleanupHierarchy;
+    private _tidyUpHierarchy;
     private _dragInitHandler;
     private _dragStartHandler;
     private _dragHandler;
@@ -9116,6 +9118,8 @@ declare class PacemMenuCursorElement extends Components_2.PacemElement {
     viewActivatedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    propertyChangedCallback(name: string, old: any, val: any, first: boolean): void;
+    private _findAnchorAndScrollItIntoView;
     private _onPathChange;
 }
 

package/dist/vscode.html-custom.json

@@ -359,7 +359,7 @@
       "name": "pacem-3d-orbit-camera",
       "description": {
         "kind": "markdown",
-        "value": "**@pacem/pacem-3d**\n\nTries to attach a new {@link OrbitCameraBehavior} to the provided element, if the element is a proper renderable and it is ready. @param element @returns / static tryAttach(element: any, config?: OrbitCameraConfiguration): OrbitCameraBehavior | null { config ??= DEFAULT_CONFIGURATION; const canvas = findCameraStage(element)?.stage; if (!Utils.isNull(canvas)) { const { position, lookAt } = <Camera>element; if (Utils.isNull(position) || Utils.isNull(lookAt) || Vector3D.areClose(position, lookAt)) { return null; } return new OrbitCameraBehavior(element, config); } else { return null; } } /** State of the current configuration, obtained from the interaction inputs. */ private _input: OrbitCameraInputState = { /** Zoom/scale */ rho: 0, /** Azimuth (rotation around x axis in webgpu) */ theta: 0, /** Polar (rotation around y axis in webgpu) */ phi: 0, /** pan/offset x*/ x: 0, /** pan/offset y*/ y: 0, }; /** Sibling state of {@link _input} that comes helpful when inertia is involved. */ private _progress: OrbitCameraInputState = { rho: 0, theta: 0, phi: 0, x: 0, y: 0, }; get configuration() { return this._config; } set configuration(v: OrbitCameraConfiguration) { this._config = v; } #panning: boolean; #rotating: boolean; private _startHandler = (evt: PointerEvent) => { const { rotation, pan } = this._config; const isMouse = evt.pointerType === 'mouse'; const rotating = rotation.enabled && isMouse && evt.button === rotation.button && CustomEventUtils.matchModifiers(evt, rotation.modifiers); const panning = pan.enabled && isMouse && evt.button === pan.button && CustomEventUtils.matchModifiers(evt, pan.modifiers); if (!rotating && !panning) { return; } this.#rotating = rotating; if (this.#panning = panning) { // build current state from the current camera configuration this._currentState = OrbitCameraBehavior._buildState(this._camera); // reset pan offsets Utils.extend(this._input, Vector3D.zero()); this._progress.x = this._progress.y = 0; } avoidHandler(evt); window.addEventListener('pointerup', this._endHandler, false); window.addEventListener('pointermove', this._moveHandler, false); window.addEventListener('contextmenu', this._avoidHandler, false); }; private _avoidHandler = (evt: Event) => avoidHandler(evt); private _endHandler = (evt: PointerEvent) => { avoidHandler(evt); // delay the listener removals a bit (~frame) window.setTimeout(() => { window.removeEventListener('pointerup', this._endHandler); window.removeEventListener('pointermove', this._moveHandler); window.removeEventListener('contextmenu', this._avoidHandler); }, 20); }; private _zoomHandler = (evt: WheelEvent) => { const { zoom } = this._config; const zooming = zoom.enabled && CustomEventUtils.matchModifiers(evt, zoom.modifiers); if (!zooming) { return; } avoidHandler(evt); const coords = this._input; coords.rho -= Math.sign(evt.deltaY); }; private _moveHandler = (evt: PointerEvent) => { avoidHandler(evt); const { height, width } = this._scene.size; const coords = this._input; const size = Math.min(height, width); if (this.#rotating) { // rotation const f0 = -ROTATION_FACTOR * 360 / size; const { phi, theta } = coords; const { maxPolar, minPolar, maxAzimuth, minAzimuth } = this._config; coords.phi = (phi + evt.movementX * f0).clamp(minPolar, maxPolar); coords.theta = (theta + evt.movementY * f0).clamp(minAzimuth, maxAzimuth); } else if (this.#panning) { // pan const f0 = this._currentState.radius / size; coords.x += -evt.movementX * f0; coords.y += evt.movementY * f0; } }; private _getSafeAzimuth({ theta }: Partial<Spherical>): number { return OrbitCameraBehavior._modAngle(theta); } private _getSafePolar({ phi }: Partial<Spherical>): number { return OrbitCameraBehavior._modAngle(phi); } private static _modAngle(deg: number): number { while (deg < 0) { deg += 360; } return deg % 360; } private static _getViewXYZ(state: OrbitCameraState): { right: Vector3D, up: Vector3D, versor: Vector3D } { const { versor, up: initUp } = state; const right = Vector3D.cross(versor, initUp); const up = Vector3D.cross(right, versor); Vector3D.normalize(right); Vector3D.normalize(up); return { right, up, versor }; } #updating: boolean; private _update() { if (this.#updating) { return; } this.#updating = true; const camera = this._camera; const { radius, versor, target: initTarget, up: initUp } = this._initialState; const { target: trackedLookAt } = this._currentState; const { theta, phi, rho, x, y } = this._input; const progress = this._progress; const { theta: theta_, phi: phi_, rho: rho_, x: x_, y: y_ } = progress; const rotated = Math.abs(phi_ - phi) > EPSILON || Math.abs(theta_ - theta) > EPSILON, zoomed = Math.abs(rho_ - rho) > EPSILON, panned = Math.abs(x - x_) > EPSILON || Math.abs(y - y_) > EPSILON; if (zoomed || rotated || panned) { const inertia = typeof this._config.inertia === 'boolean' ? (this._config.inertia ? FRICTION_FACTOR : 0) : this._config.inertia; const inertiaSpecified = inertia > 0 && inertia < 1; const { right, up } = OrbitCameraBehavior._getViewXYZ(this._initialState); // setup position let newPosition: Vector3D = initTarget; let newUp: Vector3D = initUp; let newLookAt: Vector3D = trackedLookAt; //if (zoomed) { 2 let rho0 = rho_; if (inertiaSpecified) { rho0 += (rho - rho_) * inertia; } else { rho0 = rho; } progress.rho = rho0; const scale = Math.pow(.95, rho0 * ZOOM_FACTOR); const zoom = Vector3D.scale(versor, -scale * radius); newPosition = Vector3D.add(newPosition, zoom); //} //if (rotated) { 3 let phi0 = phi_; let theta0 = theta_; if (inertiaSpecified) { phi0 += (phi - phi_) * inertia; theta0 += (theta - theta_) * inertia; } else { phi0 = phi; theta0 = theta; } const PHI = this._getSafePolar({ phi: progress.phi = phi0 }); const THETA = this._getSafeAzimuth({ theta: progress.theta = theta0 }); // pivot of the rotation matrix should be the center of the bounding sphere const pivot = Vector3D.negate(initTarget); let m = Matrix3D.translate(Matrix3D.identity(), pivot); const qy = Quaternion.fromAxisAngle(up, PHI); const qx = Quaternion.fromAxisAngle(right, THETA); const rot = Matrix3D.multiply(Quaternion.toRotationMatrix(qx), Quaternion.toRotationMatrix(qy)); m = Matrix3D.multiply(m, rot); m = Matrix3D.translate(m, Vector3D.negate(pivot)); newPosition = Matrix3D.transform(newPosition, m); newUp = Matrix3D.transform(newUp, Matrix3D.clone(m, m0 => { m0.offsetX = m0.offsetY = m0.offsetZ = 0; })); //} //if (panned){ 1 const x1 = x_, y1 = y_; let x0 = x1, y0 = y1; if (inertiaSpecified) { x0 += (x - x1) * inertia; y0 += (y - y1) * inertia; } else { x0 = x; y0 = y; } progress.x = x0; progress.y = y0; const { right: currentRight, up: currentUp } = OrbitCameraBehavior._getViewXYZ(this._currentState); const r = Vector3D.scale(currentRight, x0), u = Vector3D.scale(currentUp, y0); const offset = Vector3D.add(r, u); newLookAt = Vector3D.add(trackedLookAt, offset); camera.lookAt = newLookAt; camera.position = newPosition; // Vector3D.add(newPosition, Vector3D.subtract(initTarget, newLookAt)); camera.up = newUp; // notify something has changed about the target renderable camera.flags.push(StalePropertyFlag.Camera); } this.#updating = false; } private _renderHandler = (_: Event) => { this._update(); }; /** Detaches and removes handlers and resources. */ dispose() { const canvas = this._canvas, scene = this._scene; if (!Utils.isNull(canvas)) { canvas.removeEventListener('pointerdown', this._startHandler); canvas.removeEventListener('wheel', this._zoomHandler); } scene.removeEventListener('render', this._renderHandler, false); } } /** `<pacem-3d-orbit-camera>`: a behavior element that, applied to a {@link Pacem3DCameraElement}, attaches pointer/wheel driven orbit (rotate/pan/zoom around a target) interaction by instantiating and configuring an {@link OrbitCameraBehavior} for each decorated element."
+        "value": "**@pacem/pacem-3d**\n\nTries to attach a new {@link OrbitCameraBehavior} to the provided element, if the element is a proper renderable and it is ready. @param element @returns / static tryAttach(element: any, config?: OrbitCameraConfiguration): OrbitCameraBehavior | null { config ??= DEFAULT_CONFIGURATION; const canvas = findCameraStage(element)?.stage; if (!Utils.isNull(canvas)) { const { position, lookAt } = <Camera>element; if (Utils.isNull(position) || Utils.isNull(lookAt) || Vector3D.areClose(position, lookAt)) { return null; } return new OrbitCameraBehavior(element, config); } else { return null; } } /** State of the current configuration, obtained from the interaction inputs. */ private _input: OrbitCameraInputState = { /** Zoom/scale */ rho: 0, /** Azimuth (rotation around x axis in webgpu) */ theta: 0, /** Polar (rotation around y axis in webgpu) */ phi: 0, /** pan/offset x*/ x: 0, /** pan/offset y*/ y: 0, }; /** Sibling state of {@link _input} that comes helpful when inertia is involved. */ private _progress: OrbitCameraInputState = { rho: 0, theta: 0, phi: 0, x: 0, y: 0, }; get configuration() { return this._config; } set configuration(v: OrbitCameraConfiguration) { this._config = v; } #panning: boolean; #rotating: boolean; #handle: number; private _startHandler = (evt: PointerEvent) => { const { rotation, pan } = this._config; const isMouse = evt.pointerType === 'mouse'; const rotating = rotation.enabled && isMouse && evt.button === rotation.button && CustomEventUtils.matchModifiers(evt, rotation.modifiers); const panning = pan.enabled && isMouse && evt.button === pan.button && CustomEventUtils.matchModifiers(evt, pan.modifiers); if (!rotating && !panning) { return; } this.#rotating = rotating; if (this.#panning = panning) { // build current state from the current camera configuration this._currentState = OrbitCameraBehavior._buildState(this._camera); // reset pan offsets Utils.extend(this._input, Vector3D.zero()); this._progress.x = this._progress.y = 0; } avoidHandler(evt); window.clearTimeout(this.#handle); window.addEventListener('pointerup', this._endHandler, false); window.addEventListener('pointermove', this._moveHandler, false); window.addEventListener('contextmenu', this._avoidHandler, false); }; private _avoidHandler = (evt: Event) => avoidHandler(evt); private _endHandler = (evt: PointerEvent) => { avoidHandler(evt); // delay the listener removals a bit (~frame) this.#handle = window.setTimeout(() => { window.removeEventListener('pointerup', this._endHandler); window.removeEventListener('pointermove', this._moveHandler); window.removeEventListener('contextmenu', this._avoidHandler); }, 20); }; private _zoomHandler = (evt: WheelEvent) => { const { zoom } = this._config; const zooming = zoom.enabled && CustomEventUtils.matchModifiers(evt, zoom.modifiers); if (!zooming) { return; } avoidHandler(evt); const coords = this._input; coords.rho -= Math.sign(evt.deltaY); }; private _moveHandler = (evt: PointerEvent) => { avoidHandler(evt); const { height, width } = this._scene.size; const coords = this._input; const size = Math.min(height, width); if (this.#rotating) { // rotation const f0 = -ROTATION_FACTOR * 360 / size; const { phi, theta } = coords; const { maxPolar, minPolar, maxAzimuth, minAzimuth } = this._config; coords.phi = (phi + evt.movementX * f0).clamp(minPolar, maxPolar); coords.theta = (theta + evt.movementY * f0).clamp(minAzimuth, maxAzimuth); } else if (this.#panning) { // pan const f0 = this._currentState.radius / size; coords.x += -evt.movementX * f0; coords.y += evt.movementY * f0; } }; private _getSafeAzimuth({ theta }: Partial<Spherical>): number { return OrbitCameraBehavior._modAngle(theta); } private _getSafePolar({ phi }: Partial<Spherical>): number { return OrbitCameraBehavior._modAngle(phi); } private static _modAngle(deg: number): number { while (deg < 0) { deg += 360; } return deg % 360; } private static _getViewXYZ(state: OrbitCameraState): { right: Vector3D, up: Vector3D, versor: Vector3D } { const { versor, up: initUp } = state; const right = Vector3D.cross(versor, initUp); const up = Vector3D.cross(right, versor); Vector3D.normalize(right); Vector3D.normalize(up); return { right, up, versor }; } #updating: boolean; private _update() { if (this.#updating) { return; } this.#updating = true; const camera = this._camera; const { radius, versor, target: initTarget, up: initUp } = this._initialState; const { target: trackedLookAt } = this._currentState; const { theta, phi, rho, x, y } = this._input; const progress = this._progress; const { theta: theta_, phi: phi_, rho: rho_, x: x_, y: y_ } = progress; const rotated = Math.abs(phi_ - phi) > EPSILON || Math.abs(theta_ - theta) > EPSILON, zoomed = Math.abs(rho_ - rho) > EPSILON, panned = Math.abs(x - x_) > EPSILON || Math.abs(y - y_) > EPSILON; if (zoomed || rotated || panned) { const inertia = typeof this._config.inertia === 'boolean' ? (this._config.inertia ? FRICTION_FACTOR : 0) : this._config.inertia; const inertiaSpecified = inertia > 0 && inertia < 1; const { right, up } = OrbitCameraBehavior._getViewXYZ(this._initialState); // setup position let newPosition: Vector3D = initTarget; let newUp: Vector3D = initUp; let newLookAt: Vector3D = trackedLookAt; //if (zoomed) { 2 let rho0 = rho_; if (inertiaSpecified) { rho0 += (rho - rho_) * inertia; } else { rho0 = rho; } progress.rho = rho0; const scale = Math.pow(.95, rho0 * ZOOM_FACTOR); const zoom = Vector3D.scale(versor, -scale * radius); newPosition = Vector3D.add(newPosition, zoom); //} //if (rotated) { 3 let phi0 = phi_; let theta0 = theta_; if (inertiaSpecified) { phi0 += (phi - phi_) * inertia; theta0 += (theta - theta_) * inertia; } else { phi0 = phi; theta0 = theta; } const PHI = this._getSafePolar({ phi: progress.phi = phi0 }); const THETA = this._getSafeAzimuth({ theta: progress.theta = theta0 }); // pivot of the rotation matrix should be the center of the bounding sphere const pivot = Vector3D.negate(initTarget); let m = Matrix3D.translate(Matrix3D.identity(), pivot); const qy = Quaternion.fromAxisAngle(up, PHI); const qx = Quaternion.fromAxisAngle(right, THETA); const rot = Matrix3D.multiply(Quaternion.toRotationMatrix(qx), Quaternion.toRotationMatrix(qy)); m = Matrix3D.multiply(m, rot); m = Matrix3D.translate(m, Vector3D.negate(pivot)); newPosition = Matrix3D.transform(newPosition, m); newUp = Matrix3D.transform(newUp, Matrix3D.clone(m, m0 => { m0.offsetX = m0.offsetY = m0.offsetZ = 0; })); //} //if (panned){ 1 const x1 = x_, y1 = y_; let x0 = x1, y0 = y1; if (inertiaSpecified) { x0 += (x - x1) * inertia; y0 += (y - y1) * inertia; } else { x0 = x; y0 = y; } progress.x = x0; progress.y = y0; const { right: currentRight, up: currentUp } = OrbitCameraBehavior._getViewXYZ(this._currentState); const r = Vector3D.scale(currentRight, x0), u = Vector3D.scale(currentUp, y0); const offset = Vector3D.add(r, u); newLookAt = Vector3D.add(trackedLookAt, offset); camera.lookAt = newLookAt; camera.position = newPosition; // Vector3D.add(newPosition, Vector3D.subtract(initTarget, newLookAt)); camera.up = newUp; // notify something has changed about the target renderable camera.flags.push(StalePropertyFlag.Camera); } this.#updating = false; } private _renderHandler = (_: Event) => { this._update(); }; /** Detaches and removes handlers and resources. */ dispose() { const canvas = this._canvas, scene = this._scene; if (!Utils.isNull(canvas)) { canvas.removeEventListener('pointerdown', this._startHandler); canvas.removeEventListener('wheel', this._zoomHandler); } scene.removeEventListener('render', this._renderHandler, false); } } /** `<pacem-3d-orbit-camera>`: a behavior element that, applied to a {@link Pacem3DCameraElement}, attaches pointer/wheel driven orbit (rotate/pan/zoom around a target) interaction by instantiating and configuring an {@link OrbitCameraBehavior} for each decorated element."
       },
       "attributes": [
         {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-euler",
+  "version": "1.0.0-galois",
   "name": "@pacem/pacem",
   "workspaces": [
     "packages/*"