administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-05 22:57:40 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix fit-to-screen drag card disappearing and swap icon

Browse Source 
handleFitDragStop now sorts dragged items by position to determine new
order, then recalculates all x/y coords into a strict dense grid instead
of spreading react-grid-layout's arbitrary y values — prevents cards from
being pushed off-screen after a drag.

Also replaces LuMaximize with LuScanBarcode for the fit-to-screen button.

https://claude.ai/code/session_01Cu7YDRKZrYX3sBs6g9w2dy
This commit is contained in:
Claude 2026-03-21 12:26:03 +00:00
parent 853978ed4d
commit 46334ec8be
No known key found for this signature in database
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/views/live/DraggableGridLayout.tsx
View File

@ -39,7 +39,7 @@ import { isDesktop, isMobile } from "react-device-detect";
import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer"; import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
import LivePlayer from "@/components/player/LivePlayer"; import LivePlayer from "@/components/player/LivePlayer";
import { IoClose, IoStatsChart } from "react-icons/io5"; import { IoClose, IoStatsChart } from "react-icons/io5";
import { LuLayoutDashboard, LuMaximize, LuPencil } from "react-icons/lu"; import { LuLayoutDashboard, LuScanBarcode, LuPencil } from "react-icons/lu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { EditGroupDialog } from "@/components/filter/CameraGroupSelector"; import { EditGroupDialog } from "@/components/filter/CameraGroupSelector";
import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state"; import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
@ -476,11 +476,21 @@ export default function DraggableGridLayout({
(newLayout: Layout) => { (newLayout: Layout) => {
if (!fitToScreen || !fitGridParams) return; if (!fitToScreen || !fitGridParams) return;
const w = fitGridParams.gridUnitsPerCam; const w = fitGridParams.gridUnitsPerCam;
const normalized = newLayout.map((item) => ({ const colsPerRow = fitGridParams.colsPerRow;
...item,
const sorted = [...newLayout].sort((a, b) => {
if (a.y !== b.y) return a.y - b.y;
return a.x - b.x;
});
const normalized = sorted.map((item, index) => ({
i: item.i,
x: (index % colsPerRow) * w,
y: Math.floor(index / colsPerRow) * w,
w, w,
h: w, h: w,
})); }));
setFitLayoutOverride(normalized); setFitLayoutOverride(normalized);
}, },
[fitToScreen, fitGridParams], [fitToScreen, fitGridParams],
@ -1125,7 +1135,7 @@ export default function DraggableGridLayout({
)} )}
onClick={() => setFitToScreen(!fitToScreen)} onClick={() => setFitToScreen(!fitToScreen)}
> >
<LuMaximize className="size-5 md:m-[6px]" /> <LuScanBarcode className="size-5 md:m-[6px]" />
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>