Prevent annotations and other Html elements from overflowing canvas

axelboc · axelboc · commit eaecc6b6895b · 2022-05-09T16:26:28.000+02:00
diff --git a/packages/lib/src/vis/shared/AxisSystem.module.css b/packages/lib/src/vis/shared/AxisSystem.module.css
@@ -1,4 +1,6 @@
 .axisSystem {
+  position: absolute;
+  pointer-events: none;
   display: grid;
   grid-template-areas:
     '. top-axis .'
diff --git a/packages/lib/src/vis/shared/AxisSystem.tsx b/packages/lib/src/vis/shared/AxisSystem.tsx
@@ -6,7 +6,7 @@ import { getVisibleDomains } from '../utils';
 import Axis from './Axis';
 import styles from './AxisSystem.module.css';
 import { useAxisSystemContext } from './AxisSystemProvider';
-import Overlay from './Overlay';
+import Html from './Html';
 
 interface Props {
   axisOffsets: AxisOffsets;
@@ -16,6 +16,7 @@ interface Props {
 function AxisSystem(props: Props) {
   const { axisOffsets, title } = props;
 
+  const gl = useThree((state) => state.gl);
   const canvasSize = useThree((state) => state.size);
   const { width, height } = canvasSize;
 
@@ -26,35 +27,38 @@ function AxisSystem(props: Props) {
   );
 
   return (
-    <Overlay
-      className={styles.axisSystem}
-      style={{
-        // Take over space reserved for axis by VisCanvas
-        top: -axisOffsets.top,
-        left: -axisOffsets.left,
-        width: width + axisOffsets.left + axisOffsets.right,
-        height: height + axisOffsets.bottom + axisOffsets.top,
-        gridTemplateColumns: `${axisOffsets.left}px 1fr ${axisOffsets.right}px`,
-        gridTemplateRows: `${axisOffsets.top}px 1fr ${axisOffsets.bottom}px`,
-      }}
-    >
-      {title && <p className={styles.title}>{title}</p>}
-      <Axis
-        type="abscissa"
-        config={abscissaConfig}
-        domain={xVisibleDomain}
-        canvasSize={canvasSize}
-        svgSize={{ width, height: axisOffsets.bottom }}
-      />
-      <Axis
-        type="ordinate"
-        config={ordinateConfig}
-        domain={yVisibleDomain}
-        canvasSize={canvasSize}
-        svgSize={{ width: axisOffsets.left, height }}
-        flipAxis
-      />
-    </Overlay>
+    // Append to `canvasWrapper` instead of default container `r3fRoot`, which hides overflow
+    <Html container={gl.domElement.parentElement?.parentElement || undefined}>
+      <div
+        className={styles.axisSystem}
+        style={{
+          // Take over space reserved for axis by VisCanvas
+          top: -axisOffsets.top,
+          left: -axisOffsets.left,
+          width: width + axisOffsets.left + axisOffsets.right,
+          height: height + axisOffsets.bottom + axisOffsets.top,
+          gridTemplateColumns: `${axisOffsets.left}px 1fr ${axisOffsets.right}px`,
+          gridTemplateRows: `${axisOffsets.top}px 1fr ${axisOffsets.bottom}px`,
+        }}
+      >
+        {title && <p className={styles.title}>{title}</p>}
+        <Axis
+          type="abscissa"
+          config={abscissaConfig}
+          domain={xVisibleDomain}
+          canvasSize={canvasSize}
+          svgSize={{ width, height: axisOffsets.bottom }}
+        />
+        <Axis
+          type="ordinate"
+          config={ordinateConfig}
+          domain={yVisibleDomain}
+          canvasSize={canvasSize}
+          svgSize={{ width: axisOffsets.left, height }}
+          flipAxis
+        />
+      </div>
+    </Html>
   );
 }
 
diff --git a/packages/lib/src/vis/shared/VisCanvas.module.css b/packages/lib/src/vis/shared/VisCanvas.module.css
@@ -5,20 +5,18 @@
 }
 
 .canvasWrapper {
+  position: relative; /* for axis system */
   width: 100%; /* fill container by default (unless size is passed in JSX) */
   height: 100%;
   margin: 0 auto;
 }
 
 .r3fRoot {
-  overflow: visible !important; /* show child axis grid, which is bigger than canvas */
   background-color: var(--h5w-canvas--bgColor, transparent);
 }
 
 .floatingToolbar {
   position: absolute;
-  top: auto !important;
-  left: auto !important;
   right: 0;
   bottom: 0;
   display: flex;
diff --git a/packages/lib/src/vis/shared/VisCanvas.tsx b/packages/lib/src/vis/shared/VisCanvas.tsx
@@ -8,7 +8,6 @@ import type { AxisConfig } from '../models';
 import { getSizeToFit, getAxisOffsets } from '../utils';
 import AxisSystem from './AxisSystem';
 import AxisSystemProvider from './AxisSystemProvider';
-import Html from './Html';
 import RatioEnforcer from './RatioEnforcer';
 import ViewportCenterer from './ViewportCenterer';
 import styles from './VisCanvas.module.css';
@@ -81,15 +80,14 @@ function VisCanvas(props: PropsWithChildren<Props>) {
                 {children}
                 <ViewportCenterer />
                 <RatioEnforcer visRatio={visRatio} />
-                <Html>
-                  <div
-                    ref={(elem) => setFloatingToolbar(elem || undefined)}
-                    className={styles.floatingToolbar}
-                  />
-                </Html>
               </InteractionsProvider>
             </AxisSystemProvider>
           </Canvas>
+
+          <div
+            ref={(elem) => setFloatingToolbar(elem || undefined)}
+            className={styles.floatingToolbar}
+          />
         </div>
       )}
     </div>

Original file line number	Diff line number	Diff line change
`@@ -5,20 +5,18 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.canvasWrapper {`
	`8`	`+ position: relative; /* for axis system */`
`8`	`9`	`width: 100%; /* fill container by default (unless size is passed in JSX) */`
`9`	`10`	`height: 100%;`
`10`	`11`	`margin: 0 auto;`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`.r3fRoot {`
`14`		`- overflow: visible !important; /* show child axis grid, which is bigger than canvas */`
`15`	`15`	`background-color: var(--h5w-canvas--bgColor, transparent);`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.floatingToolbar {`
`19`	`19`	`position: absolute;`
`20`		`- top: auto !important;`
`21`		`- left: auto !important;`
`22`	`20`	`right: 0;`
`23`	`21`	`bottom: 0;`
`24`	`22`	`display: flex;`