Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

feat(web): make it possible to add to object masks

Browse Source
This commit is contained in:
Paul Armstrong 2021-01-26 07:37:12 -08:00 committed by Blake Blackshear
parent d4e512c1fc
commit 75a01f657e
1 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/CameraMap.jsx
View File

@ -198,7 +198,7 @@ ${Object.keys(zonePoints)
const handleRemoveObjectMask = useCallback(
(key, subkey) => {
const newObjectMaskPoints = { ...objectMaskPoints };
delete newObjectMaskPoints[key];
delete newObjectMaskPoints[key][subkey];
setObjectMaskPoints(newObjectMaskPoints);
},
[objectMaskPoints, setObjectMaskPoints]
@ -218,6 +218,20 @@ ${Object.keys(objectMaskPoints)
.join('\n')}`);
}, [objectMaskPoints]);
const handleAddToObjectMask = useCallback(
(key) => {
const newObjectMaskPoints = { ...objectMaskPoints, [key]: [...objectMaskPoints[key], []] };
setObjectMaskPoints(newObjectMaskPoints);
setEditing({
set: newObjectMaskPoints,
key,
subkey: newObjectMaskPoints[key].length - 1,
fn: setObjectMaskPoints,
});
},
[objectMaskPoints, setObjectMaskPoints, setEditing]
);
const handleChangeSnap = useCallback(
(id, value) => {
setSnap(value);
@ -281,6 +295,7 @@ ${Object.keys(objectMaskPoints)
isMulti
editing={editing}
title="Object masks"
onAdd={handleAddToObjectMask}
onCopy={handleCopyObjectMasks}
onCreate={handleAddObjectMask}
onEdit={handleEditObjectMask}
@ -410,6 +425,7 @@ function MaskValues({
isMulti = false,
editing,
title,
onAdd,
onCopy,
onCreate,
onEdit,
@ -451,6 +467,14 @@ function MaskValues({
[onRemove]
);
const handleAdd = useCallback(
(event) => {
const { key } = event.target.dataset;
onAdd(key);
},
[onAdd]
);
return (
<Box className="overflow-hidden" onmouseover={handleMousein} onmouseout={handleMouseout}>
<div class="flex space-x-4">
@ -467,15 +491,20 @@ function MaskValues({
return (
<div>
{` ${mainkey}:\n mask:\n`}
{onAdd && showButtons ? (
<Button className="absolute -mt-12 right-0 font-sans" data-key={mainkey} onClick={handleAdd}>
{`Add to ${mainkey}`}
</Button>
) : null}
{points[mainkey].map((item, subkey) => (
<Item
mainkey={mainkey}
subkey={subkey}
editing={editing}
handleEdit={handleEdit}
handleRemove={handleRemove}
points={item}
showButtons={showButtons}
handleRemove={handleRemove}
yamlKeyPrefix={yamlKeyPrefix}
/>
))}
@ -486,10 +515,11 @@ function MaskValues({
<Item
mainkey={mainkey}
editing={editing}
handleAdd={onAdd ? handleAdd : undefined}
handleEdit={handleEdit}
handleRemove={handleRemove}
points={points[mainkey]}
showButtons={showButtons}
handleRemove={handleRemove}
yamlKeyPrefix={yamlKeyPrefix}
/>
);
@ -500,7 +530,7 @@ function MaskValues({
);
}
function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handleRemove, yamlKeyPrefix }) {
function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handleAdd, handleRemove, yamlKeyPrefix }) {
return (
<span
data-key={mainkey}