Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Draggable grid layout bugfixes (#11777)

Browse Source 
* Maintain aspect ratio when overdragging

* add existing x value

* Better handle portrait and wide cam aspect ratios
This commit is contained in:
Josh Hawkins 2024-06-06 07:26:02 -05:00 committed by GitHub
parent 53fa64fd14
commit 8cc170f027
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/index.css
View File

@ -171,4 +171,10 @@
.react-resizable-handle {
z-index: 30;
background-image: none !important;
}
.react-grid-item.react-grid-placeholder {
border: 3px solid #a00000 !important;
opacity: 0.5 !important;
}

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

@ -94,6 +94,7 @@ export default function DraggableGridLayout({
// editing
const [editGroup, setEditGroup] = useState(false);
const [showCircles, setShowCircles] = useState(true);
useEffect(() => {
setEditGroup(false);
@ -115,6 +116,7 @@ export default function DraggableGridLayout({
}
// save layout to idb
setGridLayout(currentLayout);
setShowCircles(true);
},
[setGridLayout, isGridLayoutLoaded, gridLayout, currentGridLayout],
);
@ -321,13 +323,37 @@ export default function DraggableGridLayout({
const heightDiff = layoutItem.h - oldLayoutItem.h;
const widthDiff = layoutItem.w - oldLayoutItem.w;
const changeCoef = oldLayoutItem.w / oldLayoutItem.h;
if (Math.abs(heightDiff) < Math.abs(widthDiff) || layoutItem.w == 12) {
layoutItem.h = layoutItem.w / changeCoef;
placeholder.h = layoutItem.w / changeCoef;
let newWidth, newHeight;
if (Math.abs(heightDiff) < Math.abs(widthDiff)) {
newHeight = Math.round(layoutItem.w / changeCoef);
newWidth = Math.round(newHeight * changeCoef);
} else {
layoutItem.w = layoutItem.h * changeCoef;
placeholder.w = layoutItem.h * changeCoef;
newWidth = Math.round(layoutItem.h * changeCoef);
newHeight = Math.round(newWidth / changeCoef);
}
// Ensure dimensions maintain aspect ratio and fit within the grid
if (layoutItem.x + newWidth > 12) {
newWidth = 12 - layoutItem.x;
newHeight = Math.round(newWidth / changeCoef);
}
if (changeCoef == 0.5) {
// portrait
newHeight = Math.ceil(newHeight / 2) * 2;
} else if (changeCoef == 2) {
// pano/wide
newHeight = Math.ceil(newHeight * 2) / 2;
}
newWidth = Math.round(newHeight * changeCoef);
layoutItem.w = newWidth;
layoutItem.h = newHeight;
placeholder.w = layoutItem.w;
placeholder.h = layoutItem.h;
};
return (
@ -378,6 +404,7 @@ export default function DraggableGridLayout({
resizeHandles={isEditMode ? ["sw", "nw", "se", "ne"] : []}
onDragStop={handleLayoutChange}
onResize={handleResize}
onResizeStart={() => setShowCircles(false)}
onResizeStop={handleLayoutChange}
>
{includeBirdseye && birdseyeConfig?.enabled && (
@ -385,13 +412,14 @@ export default function DraggableGridLayout({
key="birdseye"
className={cn(
isEditMode &&
showCircles &&
"outline outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
)}
birdseyeConfig={birdseyeConfig}
liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
onClick={() => onSelectCamera("birdseye")}
>
{isEditMode && <CornerCircles />}
{isEditMode && showCircles && <CornerCircles />}
</BirdseyeLivePlayerGridItem>
)}
{cameras.map((camera) => {
@ -412,6 +440,7 @@ export default function DraggableGridLayout({
"rounded-lg bg-black md:rounded-2xl",
grow,
isEditMode &&
showCircles &&
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
)}
windowVisible={
@ -423,7 +452,7 @@ export default function DraggableGridLayout({
!isEditMode && onSelectCamera(camera.name);
}}
>
{isEditMode && <CornerCircles />}
{isEditMode && showCircles && <CornerCircles />}
</LivePlayerGridItem>
);
})}