fix: BROS-841: fix lock for unfinished polygons (#9572)

Co-authored-by: borisheartex <boris@humansignal.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: borisheartex <borisheartex@users.noreply.github.com>

Author: 3 people

web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx

@@ -143,19 +143,21 @@ const RegionAction: FC<any> = observer(({ region, annotation, editMode, onEditMo
         {!region.isReadOnly() && entityButtons}
       </div>
       <div className={cn("region-actions").elem("group").mod({ align: "right" }).toClassName()}>
-        <LockButton
-          item={region}
-          annotation={region?.annotation}
-          hovered={true}
-          locked={region?.locked}
-          onClick={() => region.setLocked(!region.locked)}
-          displayedHotkey="region:lock"
-          variant="neutral"
-          look="string"
-          aria-label="Unlock Region"
-          tooltip="Unlock Region"
-        />
-        {region.hideable && (
+        {!region.incomplete && (
+          <LockButton
+            item={region}
+            annotation={region?.annotation}
+            hovered={true}
+            locked={region?.locked}
+            onClick={() => region.setLocked(!region.locked)}
+            displayedHotkey="region:lock"
+            variant="neutral"
+            look="string"
+            aria-label="Unlock Region"
+            tooltip="Unlock Region"
+          />
+        )}
+        {!region.incomplete && region.hideable && (
           <RegionActionButton
             aria-label={`${region.hidden ? "Show" : "Hide"} selected region`}
             variant="neutral"

web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx

@@ -388,7 +388,6 @@ const RootTitle: FC<any> = observer(
     isArea,
     ...props
   }) => {
-    const hovered = item?.highlighted;
     const [collapsed, setCollapsed] = useState(false);
 
     const controls = useMemo(() => {
@@ -529,32 +528,36 @@ const RegionControls: FC<RegionControlsProps> = injector(
               <RegionContextMenu item={item} />
             </div>
           )}
-          <div className={cn("outliner-item").elem("control").mod({ type: "lock" }).toClassName()}>
-            <LockButton
-              item={item}
-              annotation={item?.annotation}
-              hovered={hovered}
-              locked={item?.locked}
-              onClick={onToggleLocked}
-              variant="neutral"
-              look="string"
-              tooltip={item?.locked ? "Unlock Region" : "Lock Region"}
-            />
-          </div>
-          <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
-            <RegionControlButton
-              variant="neutral"
-              look="string"
-              onClick={onToggleHidden}
-              style={hidden ? undefined : { display: "none" }}
-            >
-              {hidden ? (
-                <IconEyeClosed style={{ width: 20, height: 20 }} />
-              ) : (
-                <IconEyeOpened style={{ width: 20, height: 20 }} />
-              )}
-            </RegionControlButton>
-          </div>
+          {!item?.incomplete && (
+            <div className={cn("outliner-item").elem("control").mod({ type: "lock" }).toClassName()}>
+              <LockButton
+                item={item}
+                annotation={item?.annotation}
+                hovered={hovered}
+                locked={item?.locked}
+                onClick={onToggleLocked}
+                variant="neutral"
+                look="string"
+                tooltip={item?.locked ? "Unlock Region" : "Lock Region"}
+              />
+            </div>
+          )}
+          {!item?.incomplete && (
+            <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
+              <RegionControlButton
+                variant="neutral"
+                look="string"
+                onClick={onToggleHidden}
+                style={hidden ? undefined : { display: "none" }}
+              >
+                {hidden ? (
+                  <IconEyeClosed style={{ width: 20, height: 20 }} />
+                ) : (
+                  <IconEyeOpened style={{ width: 20, height: 20 }} />
+                )}
+              </RegionControlButton>
+            </div>
+          )}
           {hasControls && (
             <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
               <RegionControlButton variant="neutral" look="string" onClick={onToggleCollapsed}>

web/libs/editor/src/mixins/Regions.js

@@ -152,6 +152,7 @@ const RegionsMixin = types
       },
 
       setLocked(locked) {
+        if (self.incomplete === true) return;
         if (locked instanceof Function) {
           self.locked = locked(self.locked);
         } else {
@@ -232,6 +233,10 @@ const RegionsMixin = types
       },
 
       toggleHidden(e, isFiltered = false) {
+        if (self.incomplete === true) {
+          e && e.stopPropagation();
+          return;
+        }
         if (!isFiltered) self.filtered = false;
         self.hidden = !self.hidden;
         e && e.stopPropagation();

web/libs/editor/src/regions/PolygonRegion.jsx

@@ -67,6 +67,9 @@ const Model = types
     get flattenedPoints() {
       return getFlattenedPoints(this.points);
     },
+    get incomplete() {
+      return !self.closed;
+    },
   }))
   .actions((self) => {
     return {

web/libs/editor/src/regions/__tests__/PolygonRegion.test.jsx

@@ -23,8 +23,8 @@ jest.mock("../../tags/object/Image", () => {
           return 100;
         },
       }))
-      .actions((self) => ({
-        createSerializedResult(region, value) {
+      .actions(() => ({
+        createSerializedResult(_region, value) {
           return {
             value: { ...value },
             original_width: 100,
@@ -62,7 +62,7 @@ const TestRoot = types
       results: [],
     }),
   })
-  .views((self) => ({
+  .views(() => ({
     get canvasToInternalX() {
       return (x) => x;
     },
@@ -73,8 +73,8 @@ const TestRoot = types
       return () => false;
     },
   }))
-  .actions((self) => ({
-    createSerializedResult(region, value) {
+  .actions(() => ({
+    createSerializedResult(_region, value) {
       return {
         value: { ...value },
         original_width: 100,

web/libs/editor/src/stores/Annotation/Annotation.js

@@ -510,12 +510,14 @@ const _Annotation = types
 
     lockSelectedRegions() {
       for (const region of self.selectedRegions) {
+        if (region.incomplete === true) continue;
         region.setLocked(!region.locked);
       }
     },
 
     hideSelectedRegions() {
       for (const region of self.selectedRegions) {
+        if (region.incomplete === true) continue;
         region.toggleHidden();
       }
     },