From ee71f951364dc50dc63c6610bfb6c427dfe4dd31 Mon Sep 17 00:00:00 2001
From: Moritz Heckmann <77104411+dvmoritzschoefl@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:08:28 +0100
Subject: [PATCH] feat: Use pixel content values from resize observer (#640)

* Used 'new' pixel content values from resize observer

* docs: update deprecation hint

* refactor: move scalefactor

* refactor: inline `entry` variable

* Added feature detection

* Rounded pixel values

---------

Co-authored-by: Holger Stitz <holger.stitz@datavisyn.io>
---
 src/vis/vishooks/hooks/useCanvas.ts | 40 +++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/vis/vishooks/hooks/useCanvas.ts b/src/vis/vishooks/hooks/useCanvas.ts
index 84643732c..43c8b71ea 100644
--- a/src/vis/vishooks/hooks/useCanvas.ts
+++ b/src/vis/vishooks/hooks/useCanvas.ts
@@ -6,6 +6,8 @@ export function useCanvas<ContextId extends '2d' | 'webgl' | 'bitmaprenderer' |
   const [state, setState] = useSetState({
     width: 0,
     height: 0,
+    pixelContentWidth: 0,
+    pixelContentHeight: 0,
     context: null as ContextId extends '2d'
       ? CanvasRenderingContext2D
       : ContextId extends 'webgl'
@@ -26,8 +28,25 @@ export function useCanvas<ContextId extends '2d' | 'webgl' | 'bitmaprenderer' |
     },
     register: (element) => {
       const observer = new ResizeObserver((entries) => {
-        if (entries[0]) {
-          const newDimensions = entries[0].contentRect;
+        const entry = entries[0];
+
+        if (entry) {
+          const newDimensions = entry.contentRect;
+
+          let pixelContentWidth = 0;
+          let pixelContentHeight = 0;
+
+          if ('devicePixelContentBoxSize' in entry && entry.devicePixelContentBoxSize?.[0]) {
+            // Feature is present
+            const { inlineSize, blockSize } = entry.devicePixelContentBoxSize[0];
+
+            pixelContentWidth = inlineSize;
+            pixelContentHeight = blockSize;
+          } else {
+            // Feature is not supported, round the canvas pixel buffer to an integer value that most likely snaps to the physical pixels
+            pixelContentWidth = Math.round(newDimensions.width * scaleFactor);
+            pixelContentHeight = Math.round(newDimensions.height * scaleFactor);
+          }
 
           setState((previous) => {
             if (previous.width === newDimensions.width && previous.height === newDimensions.height && previous.context) {
@@ -35,6 +54,8 @@ export function useCanvas<ContextId extends '2d' | 'webgl' | 'bitmaprenderer' |
             }
 
             return {
+              pixelContentWidth,
+              pixelContentHeight,
               width: newDimensions.width,
               height: newDimensions.height,
               context: previous.context ? previous.context : (element.getContext(props?.contextId ?? '2d') as any),
@@ -54,9 +75,18 @@ export function useCanvas<ContextId extends '2d' | 'webgl' | 'bitmaprenderer' |
     contentWidth: state.width,
     contentHeight: state.height,
 
-    // Suggested dimensions for the canvas
-    width: state.width * scaleFactor,
-    height: state.height * scaleFactor,
+    /**
+     * @deprecated Use `pixelContentWidth` instead
+     */
+    width: state.pixelContentWidth,
+
+    /**
+     * @deprecated Use `pixelContentHeight` instead
+     */
+    height: state.pixelContentHeight,
+
+    pixelContentWidth: state.pixelContentWidth,
+    pixelContentHeight: state.pixelContentHeight,
 
     context: state.context,
     ratio: scaleFactor,