diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue index f85ce9b0..3f6cfb87 100644 --- a/client/web/src/components/panels/Document.vue +++ b/client/web/src/components/panels/Document.vue @@ -112,7 +112,7 @@
- +
@@ -183,9 +183,14 @@ background: var(--color-1-nearblack); width: 100%; height: 100%; + // Allows the SVG to be placed at explicit integer values of width and height to prevent non-pixel-perfect SVG scaling + position: relative; + overflow: hidden; svg { background: #ffffff; + position: absolute; + // Fallback values if JS hasn't set these to integers yet width: 100%; height: 100%; } @@ -229,9 +234,18 @@ const wasm = import("@/../wasm/pkg"); export default defineComponent({ methods: { async viewportResize() { + const canvas = this.$refs.canvas as HTMLElement; + // Get the width and height rounded up to the nearest even number because resizing is centered and dividing an odd number by 2 for centering causes antialiasing + let width = Math.ceil(parseFloat(getComputedStyle(canvas).width)); + if (width % 2 === 1) width += 1; + let height = Math.ceil(parseFloat(getComputedStyle(canvas).height)); + if (height % 2 === 1) height += 1; + + this.canvasSvgWidth = `${width}px`; + this.canvasSvgHeight = `${height}px`; + const { viewport_resize } = await wasm; - const canvas = this.$refs.canvas as HTMLDivElement; - viewport_resize(canvas.clientWidth, canvas.clientHeight); + viewport_resize(width, height); }, async canvasMouseDown(e: MouseEvent) { const { on_mouse_down } = await wasm; @@ -333,6 +347,8 @@ export default defineComponent({ data() { return { viewportSvg: "", + canvasSvgWidth: "100%", + canvasSvgHeight: "100%", activeTool: "Select", documentModeEntries, documentModeSelectionIndex: 0,