Add Canvas3D.setAttribs

CHANGELOG.md

@@ -4,8 +4,8 @@ All notable changes to this project will be documented in this file, following t
 Note that since we don't clearly distinguish between a public and private interfaces there will be changes in non-major versions that are potentially breaking. If we make breaking changes to less used interfaces we will highlight it in here.
 
 ## [Unreleased]
-
 - Update loading message in MVS Stories Viewer
+- Add `Canvas3D.setAttribs`
 
 ## [v5.2.0] - 2025-10-31
 - Handle transparency updates on ImagePass
@@ -17,7 +17,7 @@ Note that since we don't clearly distinguish between a public and private interf
   - Add clipping support for primitives
   - Support near camera distance
 
-## [v5.1.0] - 2025-10-25
+## [v5.1.2] - 2025-10-25
 - Fix createColorScaleByType when offsets are available
 - Get bond orders from non-standard CONECT records in PDB files
 - Remove outdated `gl_FrontFacing` workaround for buggy drivers

src/mol-canvas3d/canvas3d.ts

@@ -124,6 +124,9 @@ export const DefaultCanvas3DAttribs = {
     xr: DefaultXRManagerAttribs,
 };
 export type Canvas3DAttribs = typeof DefaultCanvas3DAttribs
+export type PartialCanvas3DAttribs = {
+    [K in keyof Canvas3DAttribs]?: Canvas3DAttribs[K] extends { name: string, params: any } ? Canvas3DAttribs[K] : Partial<Canvas3DAttribs[K]>
+}
 
 export { Canvas3DContext };
 
@@ -373,6 +376,7 @@ interface Canvas3D {
     readonly boundingSphere: Readonly<Sphere3D>
     readonly boundingSphereVisible: Readonly<Sphere3D>
     setProps(props: PartialCanvas3DProps | ((old: Canvas3DProps) => Partial<Canvas3DProps> | void), doNotRequestDraw?: boolean /* = false */): void
+    setAttribs(attribs: PartialCanvas3DAttribs): void
     getImagePass(props: Partial<ImageProps>): ImagePass
     getRenderObjects(): GraphicsRenderObject[]
 
@@ -515,7 +519,7 @@ namespace Canvas3D {
             }
         }
 
-        const xrManager = new XRManager(webgl, input, scene, camera, stereoCamera, helper.pointer, interactionHelper);
+        const xrManager = new XRManager(webgl, input, scene, camera, stereoCamera, helper.pointer, interactionHelper, p.xr, a.xr);
 
         const xr = {
             request: async () => {
@@ -1358,6 +1362,10 @@ namespace Canvas3D {
                     requestDraw();
                 }
             },
+            setAttribs: (attribs: PartialCanvas3DAttribs) => {
+                if (attribs.trackball) controls.setAttribs(attribs.trackball);
+                if (attribs.xr) xrManager.setAttribs(attribs.xr);
+            },
             getImagePass: (props: Partial<ImageProps> = {}) => {
                 return new ImagePass(webgl, assetManager, renderer, scene, camera, helper, props);
             },
@@ -1371,7 +1379,10 @@ namespace Canvas3D {
                 return getProps();
             },
             get attribs() {
-                return a;
+                return {
+                    trackball: controls.attribs,
+                    xr: xrManager.attribs,
+                };
             },
             get input() {
                 return input;

src/mol-canvas3d/helper/xr-manager.ts

@@ -90,11 +90,16 @@ export class XRManager {
     private hit: Vec3 | undefined = undefined;
 
     readonly props: XRManagerProps;
+    readonly attribs: XRManagerAttribs;
 
     setProps(props: Partial<XRManagerProps>) {
         Object.assign(this.props, props);
     }
 
+    setAttribs(attribs: Partial<XRManagerAttribs>) {
+        Object.assign(this.attribs, attribs);
+    }
+
     private intersect(camera: ICamera, view: Mat4, plane: Plane3D, targetRayPose: XRPose): { point: Vec3, screen: Vec2 } | undefined {
         const point = Vec3();
         const ray = getRayFromPose(targetRayPose, view);
@@ -310,6 +315,7 @@ export class XRManager {
 
     constructor(private webgl: WebGLContext, private input: InputObserver, private scene: Scene, private camera: Camera, private stereoCamera: StereoCamera, private pointerHelper: PointerHelper, private interactionHelper: Canvas3dInteractionHelper, props: Partial<XRManagerProps> = {}, attribs: Partial<XRManagerAttribs> = {}) {
         this.props = { ...PD.getDefaultValues(XRManagerParams), ...props };
+        this.attribs = { ...DefaultXRManagerAttribs, ...attribs };
 
         this.hoverSub = this.interactionHelper.events.hover.subscribe(({ position }) => {
             this.hit = position;
@@ -323,9 +329,9 @@ export class XRManager {
         this.checkSupported();
         navigator.xr?.addEventListener('devicechange', this.checkSupported);
 
-        const b = { ...DefaultXRManagerBindings, ...attribs.bindings };
-
         this.keyUpSub = input.keyUp.subscribe(({ code, modifiers, key }) => {
+            const b = this.attribs.bindings;
+
             if (Binding.matchKey(b.exit, code, modifiers, key)) {
                 this.end();
             }
@@ -336,6 +342,8 @@ export class XRManager {
         });
 
         this.gestureSub = input.gesture.subscribe(({ scale, button, modifiers }) => {
+            const b = this.attribs.bindings;
+
             if (Binding.match(b.gestureScale, button, modifiers)) {
                 this.setScaleFactor(scale);
             }