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

web/src/CameraMap.jsx

@@ -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}