Allow drag reordering in Fit to Screen mode

In fitToScreen mode, drag is now enabled so users can reorder cameras
while in edit mode. A fitLayoutOverride state captures the new order
after each drag, normalizing w/h back to gridUnitsPerCam to prevent
size changes. The override resets automatically when the camera list or
grid parameters change.

https://claude.ai/code/session_01Cu7YDRKZrYX3sBs6g9w2dy
This commit is contained in:
Claude 2026-03-21 11:53:49 +00:00
parent be1a19bccd
commit 853978ed4d
No known key found for this signature in database

View File

@ -466,7 +466,32 @@ export default function DraggableGridLayout({
})); }));
}, [fitToScreen, fitGridParams, cameras, includeBirdseye, birdseyeConfig]); }, [fitToScreen, fitGridParams, cameras, includeBirdseye, birdseyeConfig]);
const activeGridLayout = fitToScreen && fitLayout ? fitLayout : currentGridLayout; const [fitLayoutOverride, setFitLayoutOverride] = useState<Layout | undefined>();
useEffect(() => {
setFitLayoutOverride(undefined);
}, [fitGridParams, cameras, includeBirdseye]);
const handleFitDragStop = useCallback(
(newLayout: Layout) => {
if (!fitToScreen || !fitGridParams) return;
const w = fitGridParams.gridUnitsPerCam;
const normalized = newLayout.map((item) => ({
...item,
w,
h: w,
}));
setFitLayoutOverride(normalized);
},
[fitToScreen, fitGridParams],
);
const activeGridLayout = useMemo(() => {
if (fitToScreen) {
return fitLayoutOverride ?? fitLayout ?? currentGridLayout;
}
return currentGridLayout;
}, [fitToScreen, fitLayoutOverride, fitLayout, currentGridLayout]);
const handleResize = ( const handleResize = (
_layout: Layout, _layout: Layout,
@ -837,9 +862,9 @@ export default function DraggableGridLayout({
handles: isEditMode && !fitToScreen ? ["sw", "nw", "se", "ne"] : [], handles: isEditMode && !fitToScreen ? ["sw", "nw", "se", "ne"] : [],
}} }}
dragConfig={{ dragConfig={{
enabled: isEditMode && !fitToScreen, enabled: isEditMode,
}} }}
onDragStop={handleLayoutChange} onDragStop={fitToScreen ? handleFitDragStop : handleLayoutChange}
onResize={handleResize} onResize={handleResize}
onResizeStart={() => setShowCircles(false)} onResizeStart={() => setShowCircles(false)}
onResizeStop={handleLayoutChange} onResizeStop={handleLayoutChange}