jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix antialiasing caused by <svg> width/height 100%

This commit is contained in:
Keavon Chambers 2021-07-25 17:25:39 -07:00
parent ce889e3472
commit 5c7fe243bf
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/web/src/components/panels/Document.vue
View File

@ -112,7 +112,7 @@
</LayoutCol>
<LayoutCol :class="'canvas-area'">
<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove" ref="canvas">
<svg v-html="viewportSvg"></svg>
<svg v-html="viewportSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
</div>
</LayoutCol>
<LayoutCol :class="'bar-area'">
@ -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,