Merge pull request #1470 from silx-kit/overlays

Let `Overlay` overflow canvas bounds by default
silx-kit · Aug 21, 2023 · e44a1d8 · e44a1d8
2 parents f5540e9 + 38ba9a6
commit e44a1d8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/apps/storybook/src/Overlay.stories.tsx b/apps/storybook/src/Overlay.stories.tsx
@@ -1,4 +1,4 @@
-import { Overlay, Pan, VisCanvas, Zoom } from '@h5web/lib';
+import { Overlay, Pan, ResetZoomButton, VisCanvas, Zoom } from '@h5web/lib';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import FillHeight from './decorators/FillHeight';
@@ -26,18 +26,26 @@ export const Default = {
       >
         <Zoom />
         <Pan />
+        <ResetZoomButton />
         <Overlay
           {...args}
           style={{
             background:
               'linear-gradient(135deg, #444cf715 25%, transparent 25%) -20px 0/ 40px 40px, linear-gradient(225deg, #444cf715 25%, transparent 25%) -20px 0/ 40px 40px, linear-gradient(315deg, #444cf715 25%, transparent 25%) 0px 0/ 40px 40px, linear-gradient(45deg, #444cf715 25%, #e5e5f715 25%) 0px 0/ 40px 40px',
           }}
         >
-          <p style={{ position: 'absolute', top: 0, left: 10 }}>
-            This HTML overlay fills the canvas but lets pointer events through.
-            It appears above the axis system's grid and is not affected by
-            panning/zooming (unlike <code>Annotation</code>).
-          </p>
+          <div style={{ padding: '0 1rem', maxWidth: '60%', minWidth: '15em' }}>
+            <p>
+              This HTML overlay fills the canvas but lets pointer events
+              through. Unlike <code>Annotation</code>, it is not affected by
+              panning/zooming.
+            </p>
+            <p>
+              By default, children of <code>Overlay</code> can overflow the
+              bounds of the canvas. This can be changed with:{' '}
+              <code>{`<Overlay style={{ overflow: 'hidden' }} />`}</code>
+            </p>
+          </div>
         </Overlay>
       </VisCanvas>
     );

diff --git a/packages/lib/src/vis/shared/Overlay.tsx b/packages/lib/src/vis/shared/Overlay.tsx
@@ -13,7 +13,7 @@ function Overlay(props: PropsWithChildren<Props>) {
   const { canvasSize } = useVisCanvasContext();
 
   return (
-    <Html>
+    <Html overflowCanvas>
       <div
         className={className}
         style={{