fix: Clamp legend height if it exceeds available space

ilyabo · ilyabo · commit 7ab86db56248 · 2026-01-07T15:14:23.000+01:00
Signed-off-by: Ilya Boyandin &lt;ilyabo@gmail.com&gt;
diff --git a/src/components/src/hooks/use-legend-position.ts b/src/components/src/hooks/use-legend-position.ts
@@ -11,12 +11,15 @@ type Params = {
   settings?: MapLegendControlSettings;
   onChangeSettings: (settings: Partial<MapLegendControlSettings>) => void;
   theme: Record<string, any>;
+  mapHeight?: number;
+  mapWidth?: number;
 };
 
 type ReturnType = {
   positionStyles: Record<string, unknown>;
   updatePosition: () => void;
   contentHeight: number;
+  maxContentHeight?: number;
   startResize: () => void;
   resize: (deltaY: number) => void;
 };
@@ -87,14 +90,23 @@ export default function useLegendPosition({
   isSidePanelShown,
   settings,
   onChangeSettings,
-  theme
+  theme,
+  mapHeight,
+  mapWidth
 }: Params): ReturnType {
   const pos = settings?.position ?? DEFAULT_POSITION;
   const contentHeight = settings?.contentHeight ?? -1;
   const positionStyles = useMemo(() => ({[pos.anchorX]: pos.x, [pos.anchorY]: pos.y}), [pos]);
   const startHeightRef = useRef(0);
   const sidePanelWidth = theme.sidePanel?.width || 0;
 
+  // Calculate dynamic max content height based on map root dimensions
+  const maxContentHeight = useMemo(() => {
+    if (!mapHeight) return undefined;
+    // Available height minus margins and header
+    return mapHeight - MARGIN.top - MARGIN.bottom - MAP_CONTROL_HEADER_FULL_HEIGHT;
+  }, [mapHeight]);
+
   const calcPosition = useCalcLegendPosition({
     legendContentRef,
     isSidePanelShown,
@@ -119,8 +131,17 @@ export default function useLegendPosition({
       if (root instanceof HTMLElement && legendContent) {
         const mapRootBounds = root.getBoundingClientRect();
         const legendRect = legendContent.getBoundingClientRect();
+        // Use maxContentHeight if available, otherwise fall back to viewport-based calculation
+        const maxHeight = maxContentHeight
+          ? Math.min(
+              maxContentHeight,
+              mapRootBounds.bottom -
+                (legendRect.top + MAP_CONTROL_HEADER_FULL_HEIGHT + MARGIN.bottom)
+            )
+          : mapRootBounds.bottom -
+            (legendRect.top + MAP_CONTROL_HEADER_FULL_HEIGHT + MARGIN.bottom);
         const nextHeight = Math.min(
-          mapRootBounds.bottom - (legendRect.top + MAP_CONTROL_HEADER_FULL_HEIGHT + MARGIN.bottom),
+          maxHeight,
           Math.max(MIN_CONTENT_HEIGHT, startHeightRef.current + deltaY)
         );
         onChangeSettings({contentHeight: nextHeight});
@@ -130,7 +151,7 @@ export default function useLegendPosition({
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [contentHeight, pos, onChangeSettings]
+    [contentHeight, pos, onChangeSettings, maxContentHeight]
   );
 
   // Shift when side panel is shown/hidden
@@ -151,5 +172,61 @@ export default function useLegendPosition({
     }
   }, [isSidePanelShown, onChangeSettings, sidePanelWidth]);
 
-  return {positionStyles, updatePosition, contentHeight, startResize, resize};
+  // Clamp position when map resizes to ensure legend stays within viewport
+  useEffect(() => {
+    if (!mapWidth || !mapHeight || !legendContentRef.current) return;
+
+    const legendContent = legendContentRef.current;
+    const legendRect = legendContent.getBoundingClientRect();
+    const currentPos = posRef.current;
+    const leftSidebarOffset = isSidePanelShown ? sidePanelWidth : 0;
+
+    let needsUpdate = false;
+    const newPos = {...currentPos};
+
+    // Clamp horizontal position
+    if (currentPos.anchorX === 'left') {
+      const maxX = mapWidth - legendRect.width - MARGIN.right;
+      const minX = leftSidebarOffset + MARGIN.left;
+      if (currentPos.x < minX) {
+        newPos.x = minX;
+        needsUpdate = true;
+      } else if (currentPos.x > maxX) {
+        newPos.x = maxX;
+        needsUpdate = true;
+      }
+    } else {
+      // anchorX === 'right'
+      const maxX = mapWidth - MARGIN.right;
+      const minX = legendRect.width + MARGIN.left;
+      if (currentPos.x < minX) {
+        newPos.x = minX;
+        needsUpdate = true;
+      } else if (currentPos.x > maxX) {
+        newPos.x = maxX;
+        needsUpdate = true;
+      }
+    }
+
+    // Clamp contentHeight if it exceeds available space
+    if (maxContentHeight && contentHeight > 0 && contentHeight > maxContentHeight) {
+      onChangeSettings({contentHeight: maxContentHeight});
+      needsUpdate = true;
+    }
+
+    if (needsUpdate) {
+      onChangeSettings({position: newPos});
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    mapWidth,
+    mapHeight,
+    contentHeight,
+    isSidePanelShown,
+    sidePanelWidth,
+    onChangeSettings,
+    maxContentHeight
+  ]);
+
+  return {positionStyles, updatePosition, contentHeight, maxContentHeight, startResize, resize};
 }
diff --git a/src/components/src/map/map-legend-panel.tsx b/src/components/src/map/map-legend-panel.tsx
@@ -37,7 +37,10 @@ import {restrictToWindowEdges} from '@dnd-kit/modifiers';
 const DRAG_RESIZE_ID = 'map-legend-resize';
 const DRAG_MOVE_ID = 'map-legend-move';
 
-const StyledDraggableLegendContent = styled.div<{contentHeight?: number}>`
+const StyledDraggableLegendContent = styled.div<{
+  contentHeight?: number;
+  maxContentHeight?: number;
+}>`
   position: absolute;
   outline: none;
   transition: border-color 0.2s ease-in-out;
@@ -67,7 +70,8 @@ const StyledDraggableLegendContent = styled.div<{contentHeight?: number}>`
     border-color: ${props => props.theme.activeColor};
   }
   .map-control__panel-content {
-    max-height: calc(100vh - 100px);
+    max-height: ${props =>
+      props.maxContentHeight ? `${props.maxContentHeight}px` : 'calc(100vh - 100px)'};
     ${props => (props.contentHeight ? `height: ${props.contentHeight}px;` : '')};
   }
   border-radius: 4px;
@@ -141,12 +145,13 @@ export type MapLegendPanelFactoryDeps = [
 
 type DraggableLegendContentProps = {
   contentHeight?: number;
+  maxContentHeight?: number;
   positionStyles: Record<string, unknown>;
   children: React.ReactNode;
 };
 
 const DraggableLegendContent = forwardRef((props: DraggableLegendContentProps, ref) => {
-  const {positionStyles, children} = props;
+  const {positionStyles, children, contentHeight, maxContentHeight} = props;
   const draggableMove = useDraggable({id: DRAG_MOVE_ID});
   const draggableResize = useDraggable({id: DRAG_RESIZE_ID});
   const refs = useMergeRefs([draggableMove.setNodeRef, ref]);
@@ -156,7 +161,8 @@ const DraggableLegendContent = forwardRef((props: DraggableLegendContentProps, r
       ref={refs}
       className={classnames('draggable-legend', {'is-dragging': isDragging})}
       style={{...positionStyles, transform: CSS.Translate.toString(draggableMove.transform)}}
-      contentHeight={props.contentHeight}
+      contentHeight={contentHeight}
+      maxContentHeight={maxContentHeight}
       {...draggableMove.attributes}
     >
       {children}
@@ -179,6 +185,7 @@ type DraggableLegendProps = PropsWithChildren<{
   isSidePanelShown: boolean;
   mapControls: MapControls;
   setMapControlSettings: typeof setMapControlSettings;
+  mapState?: MapState;
 }>;
 
 const DraggableLegend = withTheme(
@@ -187,6 +194,7 @@ const DraggableLegend = withTheme(
     children,
     mapControls,
     setMapControlSettings,
+    mapState,
     theme
   }: DraggableLegendProps & {theme: any}) => {
     const settings = mapControls?.mapLegend?.settings;
@@ -196,13 +204,16 @@ const DraggableLegend = withTheme(
       newSettings => setMapControlSettings('mapLegend', newSettings),
       [setMapControlSettings]
     );
-    const {positionStyles, updatePosition, startResize, resize, contentHeight} = useLegendPosition({
-      legendContentRef,
-      isSidePanelShown,
-      theme,
-      settings,
-      onChangeSettings
-    });
+    const {positionStyles, updatePosition, startResize, resize, contentHeight, maxContentHeight} =
+      useLegendPosition({
+        legendContentRef,
+        isSidePanelShown,
+        theme,
+        settings,
+        onChangeSettings,
+        mapHeight: mapState?.height,
+        mapWidth: mapState?.width
+      });
 
     const handleDragStart = useCallback(
       event => {
@@ -239,6 +250,7 @@ const DraggableLegend = withTheme(
           ref={legendContentRef}
           positionStyles={positionStyles}
           contentHeight={contentHeight}
+          maxContentHeight={maxContentHeight}
         >
           {children}
         </DraggableLegendContent>
@@ -413,6 +425,7 @@ const MapLegendPanelComponent = ({
               isSidePanelShown={isSidePanelShown}
               mapControls={mapControls}
               setMapControlSettings={setMapControlSettings}
+              mapState={mapState}
             >
               {legendPanel}
             </DraggableLegend>,
diff --git a/test/browser/components/hooks/use-legend-position.spec.js b/test/browser/components/hooks/use-legend-position.spec.js
@@ -56,4 +56,117 @@ describe('useLegendPosition', () => {
     );
     expect(positionStyles).toEqual({left: 100, top: 200});
   });
+
+  test('should calculate maxContentHeight from mapRootDimensions', () => {
+    const {
+      result: {
+        current: {maxContentHeight}
+      }
+    } = renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: document.querySelector('#map-legend-content')},
+        isSidePanelShown: false,
+        settings: {},
+        onChangeSettings: jest.fn(),
+        theme: THEME,
+        mapRootDimensions: {width: 800, height: 600}
+      })
+    );
+    // maxContentHeight = height - MARGIN.top - MARGIN.bottom - MAP_CONTROL_HEADER_FULL_HEIGHT
+    // = 600 - 10 - 30 - 34 = 526
+    expect(maxContentHeight).toBe(526);
+  });
+
+  test('should return undefined maxContentHeight when mapRootDimensions not provided', () => {
+    const {
+      result: {
+        current: {maxContentHeight}
+      }
+    } = renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: document.querySelector('#map-legend-content')},
+        isSidePanelShown: false,
+        settings: {},
+        onChangeSettings: jest.fn(),
+        theme: THEME
+      })
+    );
+    expect(maxContentHeight).toBeUndefined();
+  });
+
+  test('should clamp position when legend exceeds map bounds', () => {
+    const onChangeSettings = jest.fn();
+    const legendContent = document.querySelector('#map-legend-content');
+    // Mock getBoundingClientRect to simulate legend dimensions
+    legendContent.getBoundingClientRect = jest.fn(() => ({
+      width: 200,
+      height: 300,
+      top: 0,
+      left: 0,
+      bottom: 300,
+      right: 200
+    }));
+
+    renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: legendContent},
+        isSidePanelShown: false,
+        settings: {
+          position: {x: 1000, y: 1000, anchorX: 'left', anchorY: 'top'},
+          contentHeight: 300
+        },
+        onChangeSettings,
+        theme: THEME,
+        mapRootDimensions: {width: 800, height: 600}
+      })
+    );
+
+    // Should clamp position to stay within bounds
+    expect(onChangeSettings).toHaveBeenCalled();
+    const lastCall = onChangeSettings.mock.calls[onChangeSettings.mock.calls.length - 1][0];
+    expect(lastCall.position).toBeDefined();
+    // Position should be clamped within map bounds
+    if (lastCall.position) {
+      expect(lastCall.position.x).toBeLessThanOrEqual(800 - 200 - 10); // width - legendWidth - margin
+      expect(lastCall.position.y).toBeLessThanOrEqual(600 - 300 - 30); // height - legendHeight - margin
+    }
+  });
+
+  test('should clamp contentHeight when it exceeds maxContentHeight', () => {
+    const onChangeSettings = jest.fn();
+    const legendContent = document.querySelector('#map-legend-content');
+    legendContent.getBoundingClientRect = jest.fn(() => ({
+      width: 200,
+      height: 300,
+      top: 0,
+      left: 0,
+      bottom: 300,
+      right: 200
+    }));
+
+    renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: legendContent},
+        isSidePanelShown: false,
+        settings: {
+          position: {x: 100, y: 100, anchorX: 'left', anchorY: 'top'},
+          contentHeight: 1000 // Exceeds maxContentHeight
+        },
+        onChangeSettings,
+        theme: THEME,
+        mapRootDimensions: {width: 800, height: 600}
+      })
+    );
+
+    // Should clamp contentHeight to maxContentHeight (526)
+    expect(onChangeSettings).toHaveBeenCalled();
+    const callsWithContentHeight = onChangeSettings.mock.calls.filter(
+      call => call[0].contentHeight !== undefined
+    );
+    if (callsWithContentHeight.length > 0) {
+      expect(
+        callsWithContentHeight[callsWithContentHeight.length - 1][0].contentHeight
+      ).toBeLessThanOrEqual(526);
+    }
+  });
 });
