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}