Merge pull request #649 from kitsuyui/fix-treemap-rounding

Keep the pixel values as floating point numbers in Treemap

examples/storybook/package.json

@@ -12,32 +12,32 @@
     "@kitsuyui/react-dekamoji": "workspace:^",
     "@kitsuyui/react-editablelabel": "workspace:^",
     "@kitsuyui/react-measure": "workspace:^",
+    "@kitsuyui/react-physical-size": "workspace:^",
     "@kitsuyui/react-stopwatch": "workspace:^",
     "@kitsuyui/react-style-bulma": "workspace:^",
     "@kitsuyui/react-tab": "workspace:^",
     "@kitsuyui/react-textfield": "workspace:^",
     "@kitsuyui/react-timer": "workspace:^",
     "@kitsuyui/react-treemap": "workspace:^",
     "@kitsuyui/react-wavebox": "workspace:^",
-    "@kitsuyui/react-physical-size": "workspace:^",
-    "@playwright/test": "^1.45.1",
-    "@storybook/addon-essentials": "^8.2.2",
-    "@storybook/addon-interactions": "^8.2.2",
-    "@storybook/addon-links": "^8.2.2",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
-    "@storybook/blocks": "^8.2.2",
-    "@storybook/react": "^8.2.2",
-    "@storybook/react-webpack5": "^8.2.2",
-    "@storybook/test": "^8.2.2",
-    "@storybook/test-runner": "^0.19.0",
-    "@swc/cli": "^0.4.0",
-    "@swc/core": "^1.6.13",
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
+    "@playwright/test": "^1.48.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@storybook/test-runner": "^0.19.1",
+    "@swc/cli": "^0.5.0",
+    "@swc/core": "^1.9.1",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.2.2",
+    "storybook": "^8.4.2",
     "storybook-addon-swc": "^1.2.0"
   },
   "scripts": {

examples/storybook/stories/treemap/Direction.stories.tsx

@@ -34,7 +34,7 @@ const ExampleView = () => {
             borderBottom: rect.continueDirection.down ? continueBorderStyle : uncontinueBorderStyle,
         }}>
             {`(x, y): (${rect.x}, ${rect.y})`}<br />
-            {`W×H: ${rect.w}×${rect.h}`}<br />
+            {`W×H: ${rect.w | 0}×${rect.h | 0}`}<br />
             {`index: ${rect.index}`}<br />
             {`previousDirection: ${rect.previousDirection}`}<br />
             {`nextDirection: ${rect.nextDirection}`}<br />

packages/treemap/src/treemap.tsx

@@ -125,7 +125,7 @@ export const Treemap = (props: {
       boustrophedon
     )
     setInAreas(
-      ia.map((r) => ({ x: r.x | 0, y: r.y | 0, w: r.w | 0, h: r.h | 0 }))
+      ia.map((r) => ({ x: r.x, y: r.y, w: r.w, h: r.h }))
     )
   }, [
     width,
@@ -174,6 +174,13 @@ const TreemapByRect = (props: { items: RectItem[] }) => {
             style={{
               position: 'absolute',
               overflow: 'hidden',
+              /*
+               * The following pixel values are not rounded. There are two reasons for this
+               * - Due to the concept of Device Pixel Ratio (DPR), 1px in CSS may not match 1px in reality
+               * - Due to CSS zoom and browser zoom features, pixel values may change
+               * Rounding may cause gaps in the display in these cases.
+               * Therefore, I keep the pixel values as floating point numbers.
+               */
               width: `${w}px`,
               height: `${h}px`,
               left: `${x}px`,