fix(preview): removes redundant resolution display and keeps preview …

…in view (#904)

* fix: keeps preview in view

* fix: removes redundant resolution display

src/application/worker/loop.js

@@ -361,15 +361,6 @@ function loop(delta, features, fftOutput) {
         debugCanvas.width,
         debugCanvas.height
       );
-      debugContext.font = "32px monospace";
-      debugContext.textBaseline = "hanging";
-      debugContext.fillStyle = "#fff";
-      debugContext.globalCompositeOperation = "difference";
-      debugContext.fillText(
-        `${canvasToDebug.context.canvas.width} × ${canvasToDebug.context.canvas.height}`,
-        10,
-        10
-      );
     }
   }
 

src/components/Preview.vue

@@ -26,7 +26,7 @@
       </Select>
     </c>
 
-    <c span="1..">
+    <c span="1.." class="canvas-container">
       <canvas ref="canvas"></canvas>
     </c>
   </grid>
@@ -41,7 +41,7 @@ export default {
   },
 
   mounted() {
-    const { canvas, container } = this.$refs;
+    const { canvas } = this.$refs;
     const offscreen = canvas.transferControlToOffscreen();
 
     this.$modV.$worker.postMessage(
@@ -61,7 +61,7 @@ export default {
 
         this.resize(entries);
       });
-    }).observe(container);
+    }).observe(canvas);
 
     this.$modV.store.commit("outputs/TOGGLE_DEBUG", true);
   },
@@ -107,17 +107,31 @@ export default {
         identifier: "outputs/resizeDebug",
         payload: { width }
       });
+
+      // this.$refs.canvas.style.width = `${e[0].contentRect.width}px`;
+      // this.$refs.canvas.style.height = `${e[0].contentRect.height}px`;
     }
   }
 };
 </script>
 
 <style scoped>
 .preview {
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  height: 100%;
+}
+
+.canvas-container {
+  height: 100%;
+  flex-grow: 1;
+  min-height: 0;
 }
 
 canvas {
+  object-fit: contain;
   width: 100%;
+  height: 100%;
 }
 </style>