a bit hacky, but non-flickering drawings are worth it for a demo

AllenInstitute · May 1, 2024 · fcda333 · fcda333
1 parent 8856a33
commit fcda333
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/apps/layers/src/demo.ts b/apps/layers/src/demo.ts
@@ -67,6 +67,7 @@ export class Demo {
     canvas: HTMLCanvasElement;
     mouse: 'up' | 'down'
     mode: 'draw' | 'pan'
+    // drawSrc:'cur'|'prev';
     mousePos: vec2;
     cache: AsyncDataCache<string, string, CacheEntry>;
     imgRenderer: ReturnType<typeof buildImageRenderer>;
@@ -86,6 +87,7 @@ export class Demo {
         this.mousePos = [0, 0]
         this.layers = [];
         this.mode = 'pan'
+        // this.drawSrc = 'cur';
         this.selectedLayer = 0;
         this.pathRenderer = buildPathRenderer(regl);
         this.plotRenderer = buildRenderer(regl);
@@ -460,7 +462,7 @@ export class Demo {
                         ...settings,
                         renderer: renderers[layer.type],
                     }
-                })
+                },this.mode==='pan') // dont cancel while drawing
             } else if (layer.type === 'volumeGrid') {
                 layer.render.onChange({
                     data: layer.data,
@@ -586,6 +588,13 @@ export class Demo {
                     this.uiChange();
                 }
             }
+            // if(e.key==='c'){
+            //     this.drawSrc='cur'
+            //     this.requestReRender();
+            // }else if(e.key==='p'){
+            //     this.drawSrc='prev'
+            //     this.requestReRender();
+            // }
         }
     }
 
@@ -607,7 +616,8 @@ export class Demo {
                 })
             }
             // annotations are often transparent and dont do well...
-            if (layer.render.renderingInProgress() && layer.type !== 'annotationGrid') {
+            if (
+                layer.render.renderingInProgress() && layer.type !== 'annotationGrid') {
                 // draw our incoming frame overtop the old!
                 const cur = layer.render.getRenderResults('cur')
                 if (cur.bounds) {

diff --git a/apps/layers/src/layer.ts b/apps/layers/src/layer.ts
@@ -44,9 +44,9 @@ export class ReglLayer2D<Renderable, RenderSettings extends RequiredSettings> {
     onChange(props: {
         readonly data: Readonly<Renderable>;
         readonly settings: Readonly<RenderSettings>
-    }) {
+    }, cancel:boolean=true) {
 
-        if (this.runningFrame) {
+        if (cancel && this.runningFrame) {
             this.runningFrame.cancelFrame();
             this.runningFrame = null;
             const { readFrom, writeTo } = this.buffers;
@@ -75,7 +75,10 @@ export class ReglLayer2D<Renderable, RenderSettings extends RequiredSettings> {
                     case 'finished':
                     case 'finished_synchronously':
                         this.buffers = swapBuffers(this.buffers);
-                        this.regl.clear({ framebuffer: this.buffers.writeTo.texture, color: [0, 0, 0, 0], depth: 1 })
+                        // only erase... if we would have cancelled...
+                        if(cancel){
+                            this.regl.clear({ framebuffer: this.buffers.writeTo.texture, color: [0, 0, 0, 0], depth: 1 })
+                        }
                         this.runningFrame = null;
                         break;
                 }