fix: support pixel density & responsiveness (#33)

Author: mateuszJS

src/WebGPU/canvasSizeObserver.ts

@@ -17,14 +17,26 @@ export default function canvasSizeObserver(
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
       const canvas = entry.target as HTMLCanvasElement
-      const width = entry.contentBoxSize[0].inlineSize | 0
-      const height = entry.contentBoxSize[0].blockSize | 0
+      // Safari does not support devicePixelContentBoxSize
+      const width =
+        entry.devicePixelContentBoxSize[0].inlineSize ||
+        entry.contentBoxSize[0].inlineSize * devicePixelRatio
+      const height =
+        entry.devicePixelContentBoxSize[0].blockSize ||
+        entry.contentBoxSize[0].blockSize * devicePixelRatio
+
       updateCanvasSize(canvas, width, height, device)
       callback()
     }
   })
-  observer.observe(canvas)
+
+  try {
+    observer.observe(canvas, { box: 'device-pixel-content-box' })
+  } catch {
+    observer.observe(canvas, { box: 'content-box' })
+  }
 
   // observer calls it anyway but it just happens late enough that user see a flicker
+  // it it just displayed for a brief second, so we don't play with devicePixelContentBoxSize or devicePixelRatio
   updateCanvasSize(canvas, canvas.clientWidth, canvas.clientHeight, device)
 }

src/WebGPU/pointer.ts

@@ -54,7 +54,7 @@ export default function initMouseController(
 
     const move = () => {
       updatePointer(e)
-      on_pointer_move(pointer.x, canvas.height - pointer.y)
+      on_pointer_move(pointer.x, canvas.clientHeight - pointer.y)
     }
     if (pointer.afterPickEventsQueue.length > 0) {
       pointer.afterPickEventsQueue.push({
@@ -72,7 +72,7 @@ export default function initMouseController(
     updatePointer(e)
     pointer.afterPickEventsQueue.push({
       requireNewPick: true,
-      cb: on_pointer_down.bind(null, pointer.x, canvas.height - pointer.y),
+      cb: on_pointer_down.bind(null, pointer.x, canvas.clientHeight - pointer.y),
     })
   })
 

src/getCanvasMatrix.ts

@@ -3,9 +3,9 @@ import mat4 from 'utils/mat4'
 export default function getCanvasMatrix(canvas: HTMLCanvasElement) {
   const matrix = mat4.ortho(
     0, // left
-    canvas.clientWidth, // right
+    canvas.width, // right
     0, // bottom
-    canvas.clientHeight, // top
+    canvas.height, // top
     1, // near
     -1 // far
   )

src/logic/transform_ui.zig

@@ -227,8 +227,8 @@ pub fn get_transform_ui(
             const icon_size = thickness - 5.0;
             const msdf_data = Msdf.get_msdf_vertex_data(
                 Msdf.IconId.rotate,
-                p1.x - icon_size * 0.5 - 0.5,
-                p1.y - icon_size * 0.5 + 0.5,
+                p1.x - icon_size * 0.5 - 0.25,
+                p1.y - icon_size * 0.5 + 0.75,
                 icon_size,
                 if (hovered_elem_id == transform_line.id) black else white,
             );

src/run.ts

@@ -24,8 +24,8 @@ export default function runCreator(
   textures: TextureSource[],
   onEmptyEvents: VoidFunction // call when there is no more events to process
 ): VoidFunction {
-  const canvasMatrix = getCanvasMatrix(canvas)
   let canvasPass: GPURenderPassEncoder
+  let canvasMatrix: Float32Array
 
   const pickManager = new PickManager(device)
   let pickMatrix: Float32Array
@@ -68,6 +68,8 @@ export default function runCreator(
 
     const canvasDescriptor = getCanvasRenderDescriptor(context, device)
     canvasPass = encoder.beginRenderPass(canvasDescriptor)
+    canvasMatrix = getCanvasMatrix(canvas)
+
     canvas_render()
     canvasPass.end()