fix: LEAP-1947: Fix interactive view all FF in image tag case

web/libs/editor/src/core/Tree.tsx

@@ -221,7 +221,8 @@ function renderItem(ref: IAnyStateTreeNode, annotation: IAnnotation, includeKey
   if (isFF(FF_DEV_3391)) {
     if (!annotation) return null;
 
-    el = annotation.ids.get(cleanUpId(ref.id ?? ref.name));
+    // The part `|| el` is a hack to allow it to work with Image regions. For some reason, it uses this function for rendering
+    el = annotation.ids.get(cleanUpId(ref.id ?? ref.name)) || el;
   }
 
   if (!el) {

web/libs/editor/src/core/feature-flags/flags.json

@@ -1,7 +1,6 @@
 {
   "ff_front_DEV_1713_audio_ui_150222_short": false,
   "ff_front_dev_2715_audio_3_280722_short": true,
-  "fflag_fix_front_dev_3391_interactive_view_all": false,
   "fflag_feat_front_dev_3873_labeling_ui_improvements_short": true,
   "fflag_fix_front_lsdv_4620_memory_leaks_100723_short": false
 }

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

@@ -1,5 +1,7 @@
+import { ff } from "@humansignal/core";
 import { getEnv, getRoot, types } from "mobx-state-tree";
 import { cloneNode } from "../core/Helpers";
+import { FF_DEV_3391 } from "../utils/feature-flags";
 import { AnnotationMixin } from "./AnnotationMixin";
 
 const ToolMixin = types
@@ -10,6 +12,12 @@ const ToolMixin = types
   })
   .views((self) => ({
     get obj() {
+      if (ff.isActive(FF_DEV_3391)) {
+        const root = self.manager?.root;
+        if (root?.annotationStore.selected) {
+          return root.annotationStore.selected.names.get(self.manager?.name);
+        }
+      }
       return self.manager?.obj ?? getEnv(self).object;
     },
 
@@ -18,6 +26,15 @@ const ToolMixin = types
     },
 
     get control() {
+      if (ff.isActive(FF_DEV_3391)) {
+        const control = getEnv(self).control;
+        const { name } = control;
+        const root = self.manager?.root;
+        if (root?.annotationStore.selected) {
+          return root.annotationStore.selected.names.get(name);
+        }
+        return control;
+      }
       return getEnv(self).control;
     },
 

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

@@ -1,10 +1,15 @@
+import { ff } from "@humansignal/core";
 import { types } from "mobx-state-tree";
 import ToolsManager from "../tools/Manager";
 import * as Tools from "../tools";
+import { FF_DEV_3391 } from "../utils/feature-flags";
 
 export const ToolManagerMixin = types.model().actions((self) => {
   return {
     afterAttach() {
+      if (ff.isActive(FF_DEV_3391) && !self.annotation) {
+        return;
+      }
       const toolNames = self.toolNames ?? [];
       const manager = ToolsManager.getInstance({ name: self.toname });
       const env = { manager, control: self };

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

@@ -174,8 +174,10 @@ const _Annotation = types
 
     const updateIds = (item) => {
       const children = item.children?.map(updateIds);
+      const imageEntities = item.imageEntities?.map(updateIds);
 
       if (children) item = { ...item, children };
+      if (imageEntities) item = { ...item, imageEntities };
       if (item.id) item = { ...item, id: `${item.name ?? item.id}@${sn.id}` };
       // @todo fallback for tags with name as id:
       // if (item.name) item = { ...item, name: item.name + "@" + sn.id };

web/libs/editor/src/tags/object/Image/Image.js

@@ -1,3 +1,4 @@
+import { ff } from "@humansignal/core";
 import { inject } from "mobx-react";
 import { destroy, getRoot, getType, types } from "mobx-state-tree";
 
@@ -16,6 +17,7 @@ import ToolsManager from "../../../tools/Manager";
 import { parseValue } from "../../../utils/data";
 import {
   FF_DEV_3377,
+  FF_DEV_3391,
   FF_DEV_3793,
   FF_LSDV_4583,
   FF_LSDV_4583_6,
@@ -567,7 +569,11 @@ const Model = types
       };
     },
   }))
-
+  .volatile((self) => {
+    return {
+      manager: null,
+    };
+  })
   // actions for the tools
   .actions((self) => {
     const manager = ToolsManager.getInstance({ name: self.name });
@@ -577,18 +583,19 @@ const Model = types
       if (!self.store.task) return;
 
       const parsedValue = self.multiImage ? self.parsedValueList : self.parsedValue;
+      const idPostfix = self.annotation ? `@${self.annotation.id}` : "";
 
       if (Array.isArray(parsedValue)) {
         parsedValue.forEach((src, index) => {
           self.imageEntities.push({
-            id: `${self.name}#${index}`,
+            id: `${self.name}#${index}${idPostfix}`,
             src,
             index,
           });
         });
       } else {
         self.imageEntities.push({
-          id: `${self.name}#0`,
+          id: `${self.name}#0${idPostfix}`,
           src: parsedValue,
           index: 0,
         });
@@ -598,6 +605,9 @@ const Model = types
     }
 
     function afterAttach() {
+      if (ff.isActive(FF_DEV_3391) && !self.annotation) {
+        return;
+      }
       if (self.selectioncontrol) manager.addTool("MoveTool", Tools.Selection.create({}, env));
 
       if (self.zoomcontrol) manager.addTool("ZoomPanTool", Tools.Zoom.create({}, env));

web/libs/editor/src/tools/Manager.js

@@ -43,6 +43,10 @@ class ToolsManager {
     return window.localStorage.getItem(`selected-tool:${this.name}`);
   }
 
+  get root() {
+    return root;
+  }
+
   get obj() {
     return root.annotationStore.names.get(this.name);
   }