Merge pull request #1471 from silx-kit/out-of-r3froot

Move SVG overlay and floating toolbar out of `r3fRoot`
silx-kit · Aug 21, 2023 · 7bfbe65 · 7bfbe65
2 parents e44a1d8 + b4b7bf2
commit 7bfbe65
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 26 deletions.
diff --git a/cypress/snapshots/app.cy.ts/auxspectrum.snap.png b/cypress/snapshots/app.cy.ts/auxspectrum.snap.png
diff --git a/packages/lib/src/vis/shared/VisCanvas.module.css b/packages/lib/src/vis/shared/VisCanvas.module.css
@@ -47,7 +47,8 @@
    * they intercept events before they can reach the canvas. We can't stack them
    * explicitly without creating a new stacking context, which would break the
    * stacking order. So we disable pointer events instead and restore them only
-   * on the `canvas` and on specific interactive elements, like the floating toolbar.
+   * on the `canvas`. Consumers may restore pointer events on specific elements
+   * (annotations, SVG elements, etc.) to make them interactive.
    */
   pointer-events: none;
 }
@@ -68,10 +69,9 @@
 }
 
 .floatingToolbar {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  display: flex;
+  grid-area: canvas;
+  justify-self: end;
+  align-self: end;
   z-index: var(--h5w-zi-floatingToolbar);
-  pointer-events: auto;
+  display: flex;
 }
diff --git a/packages/lib/src/vis/shared/VisCanvas.tsx b/packages/lib/src/vis/shared/VisCanvas.tsx
@@ -5,7 +5,6 @@ import InteractionsProvider from '../../interactions/InteractionsProvider';
 import type { Aspect, AxisConfig } from '../models';
 import { getAxisOffsets, getVisRatio } from '../utils';
 import AxisSystem from './AxisSystem';
-import Html from './Html';
 import R3FCanvas from './R3FCanvas';
 import RatioEnforcer from './RatioEnforcer';
 import ThresholdAdjuster from './ThresholdAdjuster';
@@ -49,8 +48,10 @@ function VisCanvas(props: PropsWithChildren<Props>) {
       })
     : NO_OFFSETS;
 
-  const [svgOverlay, setSvgOverlay] = useState<SVGSVGElement>();
-  const [floatingToolbar, setFloatingToolbar] = useState<HTMLDivElement>();
+  const [svgOverlay, setSvgOverlay] = useState<SVGSVGElement | null>(null);
+  const [floatingToolbar, setFloatingToolbar] = useState<HTMLDivElement | null>(
+    null,
+  );
 
   return (
     <div
@@ -79,21 +80,16 @@ function VisCanvas(props: PropsWithChildren<Props>) {
               <ThresholdAdjuster value={raycasterThreshold} />
             )}
           </VisCanvasProvider>
-
-          <Html>
-            <svg
-              ref={(elem) => setSvgOverlay(elem || undefined)}
-              className={styles.svgOverlay}
-            />
-          </Html>
-          <Html>
-            <div
-              ref={(elem) => setFloatingToolbar(elem || undefined)}
-              className={styles.floatingToolbar}
-            />
-          </Html>
         </R3FCanvas>
+
+        <svg
+          ref={setSvgOverlay}
+          className={styles.svgOverlay}
+          overflow="hidden"
+        />
       </div>
+
+      <div ref={setFloatingToolbar} className={styles.floatingToolbar} />
     </div>
   );
 }

diff --git a/packages/lib/src/vis/shared/VisCanvasProvider.tsx b/packages/lib/src/vis/shared/VisCanvasProvider.tsx
@@ -29,8 +29,8 @@ export interface VisCanvasContextValue {
   getVisibleDomains: (camera: Camera) => VisibleDomains;
 
   // For internal use only
-  svgOverlay: SVGSVGElement | undefined;
-  floatingToolbar: HTMLDivElement | undefined;
+  svgOverlay: SVGSVGElement | null;
+  floatingToolbar: HTMLDivElement | null;
 }
 
 const VisCanvasContext = createContext({} as VisCanvasContextValue);
@@ -43,8 +43,8 @@ interface Props {
   visRatio: number | undefined;
   abscissaConfig: AxisConfig;
   ordinateConfig: AxisConfig;
-  svgOverlay: SVGSVGElement | undefined;
-  floatingToolbar: HTMLDivElement | undefined;
+  svgOverlay: SVGSVGElement | null;
+  floatingToolbar: HTMLDivElement | null;
 }
 
 function VisCanvasProvider(props: PropsWithChildren<Props>) {