react-panel-layout 0.5.2 → 0.6.1

package/src/modules/grid/trackUtils.ts

@@ -0,0 +1,146 @@
+/**
+ * @file Grid track sizing utilities.
+ */
+import type * as React from "react";
+import type { GridTrack } from "../../types";
+import { clampNumber } from "../../utils/math";
+import { measureGridTrackSizes, type GridDirection, type ParsedGap } from "../../utils/css";
+
+export type TrackDirection = GridDirection;
+
+export const createTrackKey = (direction: TrackDirection, index: number): string => {
+  return `${direction}-${index}`;
+};
+
+export const getTrackSize = (
+  track: GridTrack,
+  trackSizes: Record<string, number>,
+  direction: TrackDirection,
+  index: number,
+): string => {
+  const key = createTrackKey(direction, index);
+  const currentSize = trackSizes[key];
+  if (currentSize !== undefined) {
+    // Use minmax() to ensure the track can shrink if container is smaller
+    // This prevents overflow when container width is less than the resized size
+    const minSize = track.minSize ?? 0;
+    return `minmax(${minSize}px, ${currentSize}px)`;
+  }
+  return track.size;
+};
+
+export const buildTrackTemplateString = (
+  tracks: GridTrack[],
+  trackSizes: Record<string, number>,
+  direction: TrackDirection,
+): string => {
+  return tracks.map((track, index) => getTrackSize(track, trackSizes, direction, index)).join(" ");
+};
+
+export const extractInitialTrackSizes = (
+  tracks: GridTrack[],
+  direction: TrackDirection,
+): Record<string, number> => {
+  return tracks.reduce<Record<string, number>>((acc, track, index) => {
+    if (track.resizable && track.size.endsWith("px")) {
+      acc[createTrackKey(direction, index)] = parseInt(track.size, 10);
+    }
+    return acc;
+  }, {});
+};
+
+export type ResolveTrackSizeParams = {
+  trackSizes: Record<string, number>;
+  track: GridTrack;
+  direction: TrackDirection;
+  trackIndex: number;
+  containerRef: React.RefObject<HTMLElement | null> | undefined;
+};
+
+export const resolveCurrentTrackSize = ({
+  trackSizes,
+  track,
+  direction,
+  trackIndex,
+  containerRef,
+}: ResolveTrackSizeParams): number => {
+  const key = createTrackKey(direction, trackIndex);
+  const storedSize = trackSizes[key];
+
+  if (storedSize !== undefined) {
+    return storedSize;
+  }
+
+  // Try to measure actual rendered size from DOM
+  const measuredSizes = measureGridTrackSizes(containerRef?.current ?? null, direction);
+  const measuredSize = measuredSizes[trackIndex];
+  if (measuredSize !== undefined && measuredSize > 0) {
+    return measuredSize;
+  }
+
+  // Fallback: parse simple px value from track definition
+  if (track.size.endsWith("px")) {
+    return Number.parseInt(track.size, 10);
+  }
+
+  return 300;
+};
+
+const calculateOtherTracksMinSpace = (tracks: GridTrack[], excludeIndex: number): number => {
+  return tracks.reduce((sum, t, idx) => {
+    if (idx === excludeIndex) {
+      return sum;
+    }
+    // For fr tracks, assume minimum of 100px; for fixed tracks, use their minSize or parsed size
+    if (t.size.includes("fr")) {
+      return sum + 100;
+    }
+    return sum + (t.minSize ?? 50);
+  }, 0);
+};
+
+export type EffectiveMaxSizeParams = {
+  track: GridTrack;
+  tracks: GridTrack[];
+  trackIndex: number;
+  direction: TrackDirection;
+  containerRef: React.RefObject<HTMLElement | null> | undefined;
+  gapSizes: ParsedGap;
+};
+
+export const calculateEffectiveMaxSize = ({
+  track,
+  tracks,
+  trackIndex,
+  direction,
+  containerRef,
+  gapSizes,
+}: EffectiveMaxSizeParams): number | undefined => {
+  if (!containerRef?.current) {
+    return track.maxSize;
+  }
+
+  const containerSize =
+    direction === "col" ? containerRef.current.offsetWidth : containerRef.current.offsetHeight;
+
+  const otherTracksMinSpace = calculateOtherTracksMinSpace(tracks, trackIndex);
+
+  const gapCount = tracks.length - 1;
+  const gapSize = direction === "col" ? gapSizes.columnGap : gapSizes.rowGap;
+  const totalGapSpace = gapCount * gapSize;
+
+  const dynamicMax = containerSize - otherTracksMinSpace - totalGapSpace;
+
+  if (track.maxSize !== undefined) {
+    return Math.min(track.maxSize, dynamicMax);
+  }
+  return dynamicMax;
+};
+
+export const applyTrackConstraints = (
+  size: number,
+  minSize?: number,
+  maxSize?: number,
+): number => {
+  return clampNumber(size, minSize ?? Number.NEGATIVE_INFINITY, maxSize ?? Number.POSITIVE_INFINITY);
+};

package/src/modules/grid/useGridPlacements.ts

@@ -0,0 +1,143 @@
+/**
+ * @file Hooks for deriving grid placements and layer collections.
+ */
+import * as React from "react";
+import type { LayerDefinition, PanelLayoutConfig } from "../../types";
+
+type GridPlacement = {
+  gridArea: string;
+  gridRow: string;
+  gridColumn: string;
+};
+
+const computeGridPlacements = (areas: PanelLayoutConfig["areas"]): Map<string, GridPlacement> => {
+  type Bounds = {
+    rowStart: number;
+    rowEnd: number;
+    colStart: number;
+    colEnd: number;
+  };
+
+  const boundsByArea = new Map<string, Bounds>();
+
+  areas.forEach((row, rowIndex) => {
+    row.forEach((area, colIndex) => {
+      if (!area || area === ".") {
+        return;
+      }
+
+      const existing = boundsByArea.get(area);
+      if (existing) {
+        const nextBounds: Bounds = {
+          rowStart: Math.min(existing.rowStart, rowIndex),
+          rowEnd: Math.max(existing.rowEnd, rowIndex),
+          colStart: Math.min(existing.colStart, colIndex),
+          colEnd: Math.max(existing.colEnd, colIndex),
+        };
+
+        boundsByArea.set(area, nextBounds);
+        return;
+      }
+
+      const initialBounds: Bounds = {
+        rowStart: rowIndex,
+        rowEnd: rowIndex,
+        colStart: colIndex,
+        colEnd: colIndex,
+      };
+
+      boundsByArea.set(area, initialBounds);
+    });
+  });
+
+  const placements = new Map<string, GridPlacement>();
+  boundsByArea.forEach((bounds, area) => {
+    const rowStart = bounds.rowStart + 1;
+    const rowEnd = bounds.rowEnd + 2;
+    const colStart = bounds.colStart + 1;
+    const colEnd = bounds.colEnd + 2;
+
+    const placement: GridPlacement = {
+      gridArea: area,
+      gridRow: `${rowStart} / ${rowEnd}`,
+      gridColumn: `${colStart} / ${colEnd}`,
+    };
+
+    placements.set(area, placement);
+  });
+
+  return placements;
+};
+
+const normalizeLayerForGrid = (
+  layer: LayerDefinition,
+  placements: Map<string, GridPlacement>,
+): LayerDefinition => {
+  const mode = layer.positionMode ?? "grid";
+  if (mode !== "grid") {
+    return layer;
+  }
+
+  const placementKey = layer.gridArea ?? layer.id;
+  const placement = placements.get(placementKey);
+
+  if (!placement) {
+    return layer;
+  }
+
+  const needsGridArea = !layer.gridArea;
+  const needsRow = !layer.gridRow;
+  const needsColumn = !layer.gridColumn;
+
+  if (!needsGridArea && !needsRow && !needsColumn) {
+    return layer;
+  }
+
+  return {
+    ...layer,
+    gridArea: needsGridArea ? placement.gridArea : layer.gridArea,
+    gridRow: needsRow ? placement.gridRow : layer.gridRow,
+    gridColumn: needsColumn ? placement.gridColumn : layer.gridColumn,
+  };
+};
+
+export const useGridPlacements = (
+  config: PanelLayoutConfig,
+  layers: LayerDefinition[],
+): {
+  normalizedLayers: LayerDefinition[];
+  visibleLayers: LayerDefinition[];
+  regularLayers: LayerDefinition[];
+  layerById: Map<string, LayerDefinition>;
+} => {
+  const placements = React.useMemo(() => computeGridPlacements(config.areas), [config.areas]);
+
+  const normalizedLayers = React.useMemo(() => {
+    return layers.map((layer) => normalizeLayerForGrid(layer, placements));
+  }, [layers, placements]);
+
+  const visibleLayers = React.useMemo(
+    () => normalizedLayers.filter((layer) => layer.visible !== false),
+    [normalizedLayers],
+  );
+
+  const regularLayers = React.useMemo(
+    () => visibleLayers.filter((layer) => !layer.drawer),
+    [visibleLayers],
+  );
+
+  const layerById = React.useMemo(() => {
+    const map = new Map<string, LayerDefinition>();
+    normalizedLayers.forEach((layer) => {
+      map.set(layer.id, layer);
+    });
+    return map;
+  }, [normalizedLayers]);
+
+  return {
+    normalizedLayers,
+    visibleLayers,
+    regularLayers,
+    layerById,
+  };
+};

package/src/modules/grid/useGridTracks.ts

@@ -0,0 +1,156 @@
+/**
+ * @file Track sizing and resize handle hooks for the grid layout.
+ */
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
+import type { PanelLayoutConfig } from "../../types";
+import { parseGapValue, type ParsedGap } from "../../utils/css";
+import {
+  type TrackDirection,
+  createTrackKey,
+  buildTrackTemplateString,
+  extractInitialTrackSizes,
+  resolveCurrentTrackSize,
+  calculateEffectiveMaxSize,
+  applyTrackConstraints,
+} from "./trackUtils";
+import {
+  type TrackHandleConfig,
+  computeColumnResizeHandles,
+  computeRowResizeHandles,
+} from "./resizeHandles";
+
+// Re-export types for external consumers
+export type { TrackHandleConfig } from "./resizeHandles";
+export type { TrackDirection } from "./trackUtils";
+
+const getGapStyle = (gap?: string): React.CSSProperties => {
+  return gap !== undefined ? { gap } : {};
+};
+
+/**
+ * Merges new track sizes with existing ones, preserving user-resized values.
+ * Only applies initial values for newly added tracks.
+ */
+const mergeTrackSizes = (
+  prev: Record<string, number>,
+  initialSizes: Record<string, number>,
+): Record<string, number> | null => {
+  const nextKeys = Object.keys(initialSizes);
+
+  // Preserve existing values; use initial values only for new tracks
+  const merged: Record<string, number> = {};
+  for (const key of nextKeys) {
+    merged[key] = prev[key] ?? initialSizes[key];
+  }
+
+  // Check if there are any changes
+  const prevKeys = Object.keys(prev);
+  const keysChangedByLength = prevKeys.length !== nextKeys.length;
+  const keysChangedByMissing = prevKeys.some(
+    (key) => !Object.prototype.hasOwnProperty.call(merged, key),
+  );
+  const keysChanged = keysChangedByLength ? true : keysChangedByMissing;
+  const valuesChanged = nextKeys.some((key) => prev[key] !== merged[key]);
+
+  const hasChanges = keysChanged ? true : valuesChanged;
+  return hasChanges ? merged : null;
+};
+
+export const useGridTracks = (
+  config: PanelLayoutConfig,
+  styleProp?: React.CSSProperties,
+  containerRef?: React.RefObject<HTMLElement | null>,
+): {
+  columnHandles: TrackHandleConfig[];
+  rowHandles: TrackHandleConfig[];
+  gapSizes: ParsedGap;
+  gridStyle: React.CSSProperties;
+  handleResize: (direction: TrackDirection, trackIndex: number, delta: number) => void;
+} => {
+  const [trackSizes, setTrackSizes] = React.useState<Record<string, number>>(() => ({
+    ...extractInitialTrackSizes(config.columns, "col"),
+    ...extractInitialTrackSizes(config.rows, "row"),
+  }));
+
+  useIsomorphicLayoutEffect(() => {
+    const initialSizes = {
+      ...extractInitialTrackSizes(config.columns, "col"),
+      ...extractInitialTrackSizes(config.rows, "row"),
+    };
+
+    setTrackSizes((prev) => {
+      const merged = mergeTrackSizes(prev, initialSizes);
+      return merged ?? prev;
+    });
+  }, [config.columns, config.rows]);
+
+  const areasString = React.useMemo(() => {
+    return config.areas.map((row) => `"${row.join(" ")}"`).join(" ");
+  }, [config.areas]);
+
+  const gapSizes = React.useMemo(() => parseGapValue(config.gap), [config.gap]);
+
+  const columnHandles = React.useMemo(
+    () => computeColumnResizeHandles(config.columns, config.areas),
+    [config.columns, config.areas],
+  );
+
+  const rowHandles = React.useMemo(
+    () => computeRowResizeHandles(config.rows, config.areas),
+    [config.rows, config.areas],
+  );
+
+  const gridStyle = React.useMemo((): React.CSSProperties => {
+    return {
+      ...config.style,
+      ...styleProp,
+      gridTemplateAreas: areasString,
+      gridTemplateRows: buildTrackTemplateString(config.rows, trackSizes, "row"),
+      gridTemplateColumns: buildTrackTemplateString(config.columns, trackSizes, "col"),
+      ...getGapStyle(config.gap),
+    };
+  }, [areasString, config.columns, config.gap, config.rows, config.style, styleProp, trackSizes]);
+
+  const handleResize = React.useCallback(
+    (direction: TrackDirection, trackIndex: number, delta: number) => {
+      const tracks = direction === "row" ? config.rows : config.columns;
+      const track = tracks[trackIndex];
+      if (!track || !track.resizable) {
+        return;
+      }
+
+      const currentSize = resolveCurrentTrackSize({
+        trackSizes,
+        track,
+        direction,
+        trackIndex,
+        containerRef,
+      });
+      const effectiveMaxSize = calculateEffectiveMaxSize({
+        track,
+        tracks,
+        trackIndex,
+        direction,
+        containerRef,
+        gapSizes,
+      });
+
+      const key = createTrackKey(direction, trackIndex);
+      setTrackSizes((prev) => {
+        const newSize = currentSize + delta;
+        const constrained = applyTrackConstraints(newSize, track.minSize, effectiveMaxSize);
+        return { ...prev, [key]: constrained };
+      });
+    },
+    [config.columns, config.rows, trackSizes, containerRef, gapSizes],
+  );
+
+  return {
+    columnHandles,
+    rowHandles,
+    gapSizes,
+    gridStyle,
+    handleResize,
+  };
+};

package/src/modules/grid/useLayerDragHandle.ts

@@ -0,0 +1,16 @@
+/**
+ * @file Hook for retrieving draggable handle props for the current layer.
+ */
+import * as React from "react";
+import { useGridLayoutContext, type GridLayerHandleProps } from "./GridLayoutContext";
+import { useLayerInstance } from "./LayerInstanceContext";
+
+export const useLayerDragHandle = (): GridLayerHandleProps => {
+  const { layerId } = useLayerInstance();
+  const { getLayerHandleProps } = useGridLayoutContext();
+
+  return React.useMemo(() => {
+    return getLayerHandleProps(layerId);
+  }, [getLayerHandleProps, layerId]);
+};
+