Merge pull request #924 from silx-kit/fix-dynamic-layout

Support switching VisCanvas's sizing behaviour dynamically
silx-kit · Jan 12, 2022 · 62e10cf · 62e10cf
2 parents c411203 + a5ff684
commit 62e10cf
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 31 deletions.
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@h5web/lib": "workspace:*",
     "@h5web/shared": "workspace:*",
-    "@react-hookz/web": "12.0.0",
+    "@react-hookz/web": "12.1.1",
     "@react-three/fiber": "7.0.24",
     "ndarray": "1.0.19",
     "normalize.css": "8.0.1",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@h5web/lib": "workspace:*",
-    "@react-hookz/web": "12.0.0",
+    "@react-hookz/web": "12.1.1",
     "@react-three/fiber": "7.0.24",
     "axios": "0.24.0",
     "d3-format": "3.1.0",

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -40,7 +40,7 @@
     "three": ">=0.120"
   },
   "dependencies": {
-    "@react-hookz/web": "12.0.0",
+    "@react-hookz/web": "12.1.1",
     "@visx/axis": "2.4.0",
     "@visx/grid": "2.4.0",
     "@visx/scale": "2.2.2",

diff --git a/packages/lib/src/vis/shared/VisCanvas.tsx b/packages/lib/src/vis/shared/VisCanvas.tsx
@@ -27,7 +27,7 @@ function VisCanvas(props: PropsWithChildren<Props>) {
   } = props;
 
   const shouldMeasure = !!canvasRatio;
-  const [areaSize, areaRef] = useMeasure<HTMLDivElement>();
+  const [areaSize, areaRef] = useMeasure<HTMLDivElement>(shouldMeasure);
   const canvasSize = areaSize && getSizeToFit(areaSize, canvasRatio);
 
   const axisOffsets = getAxisOffsets({
@@ -38,7 +38,7 @@ function VisCanvas(props: PropsWithChildren<Props>) {
 
   return (
     <div
-      ref={shouldMeasure ? areaRef : undefined} // unfortunately, this isn't enough to start/stop measuring dynamically https://github.com/react-hookz/web/issues/523
+      ref={areaRef}
       className={styles.canvasArea}
       style={{
         paddingBottom: axisOffsets.bottom,
@@ -48,7 +48,10 @@ function VisCanvas(props: PropsWithChildren<Props>) {
       }}
     >
       {(!shouldMeasure || canvasSize) && (
-        <div className={styles.canvasWrapper} style={canvasSize}>
+        <div
+          className={styles.canvasWrapper}
+          style={shouldMeasure ? canvasSize : undefined}
+        >
           <Canvas
             className={styles.r3fRoot}
             orthographic

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml