From 1b57f8c7e29c4731845bd950fb6ef1edb2708e9b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 9 Nov 2023 05:42:19 -0700
Subject: [PATCH] Show error when clicking on image before mask (#8547)

---
 web/src/routes/CameraMap.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/CameraMap.jsx b/web/src/routes/CameraMap.jsx
index 6beaff2f5..a7b96e851 100644
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@@ -353,6 +353,7 @@ ${Object.keys(objectMaskPoints)
             snap={snap}
             width={width}
             height={height}
+            setError={setError}
           />
         </div>
         <div className="max-w-xs">
@@ -434,7 +435,7 @@ function boundedSize(value, maxValue, snap) {
   return newValue;
 }
 
-function EditableMask({ onChange, points, scale, snap, width, height }) {
+function EditableMask({ onChange, points, scale, snap, width, height, setError }) {
   const boundingRef = useRef(null);
 
   const handleMovePoint = useCallback(
@@ -455,6 +456,11 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
   // Add a new point between the closest two other points
   const handleAddPoint = useCallback(
     (event) => {
+      if (!points) {
+        setError('You must choose an item to edit or add a new item before adding a point.');
+        return
+      }
+
       const { offsetX, offsetY } = event;
       const scaledX = boundedSize((offsetX - MaskInset) / scale, width, snap);
       const scaledY = boundedSize((offsetY - MaskInset) / scale, height, snap);
@@ -474,7 +480,7 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
       newPoints.splice(index, 0, newPoint);
       onChange(newPoints);
     },
-    [height, width, scale, points, onChange, snap]
+    [height, width, scale, points, onChange, snap, setError]
   );
 
   const handleRemovePoint = useCallback(