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

…in view (#904) * fix: keeps preview in view * fix: removes redundant resolution display
vcync · May 4, 2024 · cb955ae · cb955ae
1 parent c1fedad
commit cb955ae
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/application/worker/loop.js b/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
- );
  }
  }
 

diff --git a/src/components/Preview.vue b/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>