Merge pull request #167 from molstar/multi-canvas3d

Multi-canvas support for PluginContext

src/mol-canvas3d/canvas3d.ts

@@ -61,11 +61,17 @@ export const Canvas3DParams = {
     }, { pivot: 'radius' }),
     viewport: PD.MappedStatic('canvas', {
         canvas: PD.Group({}),
-        custom: PD.Group({
+        'static-frame': PD.Group({
             x: PD.Numeric(0),
             y: PD.Numeric(0),
             width: PD.Numeric(128),
             height: PD.Numeric(128)
+        }),
+        'relative-frame': PD.Group({
+            x: PD.Numeric(0.33, { min: 0, max: 1, step: 0.01 }),
+            y: PD.Numeric(0.33, { min: 0, max: 1, step: 0.01 }),
+            width: PD.Numeric(0.5, { min: 0.01, max: 1, step: 0.01 }),
+            height: PD.Numeric(0.5, { min: 0.01, max: 1, step: 0.01 })
         })
     }),
 
@@ -805,12 +811,21 @@ namespace Canvas3D {
                 y = 0;
                 width = gl.drawingBufferWidth;
                 height = gl.drawingBufferHeight;
-            } else {
+            } else if (p.viewport.name === 'static-frame') {
                 x = p.viewport.params.x * webgl.pixelRatio;
-                y = p.viewport.params.y * webgl.pixelRatio;
-                width = p.viewport.params.width * webgl.pixelRatio;
                 height = p.viewport.params.height * webgl.pixelRatio;
+                y = gl.drawingBufferHeight - height - p.viewport.params.y * webgl.pixelRatio;
+                width = p.viewport.params.width * webgl.pixelRatio;
+            } else if (p.viewport.name === 'relative-frame') {
+                x = Math.round(p.viewport.params.x * gl.drawingBufferWidth);
+                height = Math.round(p.viewport.params.height * gl.drawingBufferHeight);
+                y = Math.round(gl.drawingBufferHeight - height - p.viewport.params.y * gl.drawingBufferHeight);
+                width = Math.round(p.viewport.params.width * gl.drawingBufferWidth);
+                // if (x + width >= gl.drawingBufferWidth) width = gl.drawingBufferWidth - x;
+                // if (y + height >= gl.drawingBufferHeight) height = gl.drawingBufferHeight - y - 1;
+                // console.log({ x, y, width, height });
             }
+
         }
 
         function syncViewport() {

src/mol-canvas3d/passes/pick.ts

@@ -128,8 +128,8 @@ export class PickHelper {
         this.pickX = Math.ceil(x * this.pickScale);
         this.pickY = Math.ceil(y * this.pickScale);
 
-        const pickWidth = Math.ceil(width * this.pickScale);
-        const pickHeight = Math.ceil(height * this.pickScale);
+        const pickWidth = Math.floor(width * this.pickScale);
+        const pickHeight = Math.floor(height * this.pickScale);
 
         if (pickWidth !== this.pickWidth || pickHeight !== this.pickHeight) {
             this.pickWidth = pickWidth;

src/mol-plugin/context.ts

@@ -184,17 +184,21 @@ export class PluginContext {
      */
     readonly customState: unknown = Object.create(null);
 
-    initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement) {
+    initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement, canvas3dContext?: Canvas3DContext) {
         try {
             this.layout.setRoot(container);
             if (this.spec.layout && this.spec.layout.initial) this.layout.setProps(this.spec.layout.initial);
 
-            const antialias = !(this.config.get(PluginConfig.General.DisableAntialiasing) ?? false);
-            const preserveDrawingBuffer = !(this.config.get(PluginConfig.General.DisablePreserveDrawingBuffer) ?? false);
-            const pixelScale = this.config.get(PluginConfig.General.PixelScale) || 1;
-            const pickScale = this.config.get(PluginConfig.General.PickScale) || 0.25;
-            const enableWboit = this.config.get(PluginConfig.General.EnableWboit) || false;
-            (this.canvas3dContext as Canvas3DContext) = Canvas3DContext.fromCanvas(canvas, { antialias, preserveDrawingBuffer, pixelScale, pickScale, enableWboit });
+            if (canvas3dContext) {
+                (this.canvas3dContext as Canvas3DContext) = canvas3dContext;
+            } else {
+                const antialias = !(this.config.get(PluginConfig.General.DisableAntialiasing) ?? false);
+                const preserveDrawingBuffer = !(this.config.get(PluginConfig.General.DisablePreserveDrawingBuffer) ?? false);
+                const pixelScale = this.config.get(PluginConfig.General.PixelScale) || 1;
+                const pickScale = this.config.get(PluginConfig.General.PickScale) || 0.25;
+                const enableWboit = this.config.get(PluginConfig.General.EnableWboit) || false;
+                (this.canvas3dContext as Canvas3DContext) = Canvas3DContext.fromCanvas(canvas, { antialias, preserveDrawingBuffer, pixelScale, pickScale, enableWboit });
+            }
             (this.canvas3d as Canvas3D) = Canvas3D.create(this.canvas3dContext!);
             this.canvas3dInit.next(true);
             let props = this.spec.canvas3d;