mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-05 22:57:40 +03:00
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:
parent
be1a19bccd
commit
853978ed4d
@ -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}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user