feat: DEV-1414: Add setting to preserve selected tool in image segmentation (#420)

* Add setting to preserve selected tool in image segmentation

* Fight race conditions on tools init

* Fix default tool behavior

* Properly destroy LSF

Co-authored-by: hlomzik <[email protected]>
Co-authored-by: niklub <[email protected]>

Author: 3 people

src/LabelStudio.js

@@ -10,6 +10,7 @@ import { toCamelCase } from "strman";
 import { isDefined } from "./utils/utilities";
 import { Hotkey } from "./core/Hotkey";
 import defaultOptions from './defaultOptions';
+import { destroy } from "mobx-state-tree";
 
 configure({
   isolateGlobalState: true,
@@ -69,6 +70,7 @@ export class LabelStudio {
 
     const destructor = () => {
       unmountComponentAtNode(rootElement);
+      destroy(this.store);
     };
 
     this.destroy = destructor;

src/components/Settings/Settings.js

@@ -125,6 +125,10 @@ export default observer(({ store }) => {
           <Checkbox checked={store.settings.showLineNumbers} onChange={store.settings.toggleShowLineNumbers}>
             Show line numbers for Text
           </Checkbox>
+          <br />
+          <Checkbox checked={store.settings.preserveSelectedTool} onChange={store.settings.togglepreserveSelectedTool}>
+            Remember Selected Tool
+          </Checkbox>
 
           {/* <br /> */}
           {/* <Checkbox */}

src/env/development.js

@@ -64,7 +64,7 @@ import { TimeSeriesSingle } from "../examples/timeseries_single";
  */
 // import { AllTypes } from "../examples/all_types";
 
-const data = VideoRectangles;
+const data = ImageTools;
 
 function getData(task) {
   if (task && task.data) {

src/mixins/Tool.js

@@ -1,4 +1,4 @@
-import { getEnv, types } from "mobx-state-tree";
+import { getEnv, getRoot, types } from "mobx-state-tree";
 import { cloneNode, restoreNewsnapshot } from "../core/Helpers";
 import { AnnotationMixin } from "./AnnotationMixin";
 
@@ -10,7 +10,7 @@ const ToolMixin = types
   })
   .views(self => ({
     get obj() {
-      return self.manager?.obj;
+      return self.manager?.obj ?? getEnv(self).object;
     },
 
     get manager() {
@@ -25,6 +25,10 @@ const ToolMixin = types
       return () => null;
     },
 
+    get fullName() {
+      return self.toolName + (self.dynamic ? '-dynamic' : '');
+    },
+
     get clonedStates() {
       const states = [self.control];
       const activeStates = states
@@ -55,11 +59,34 @@ const ToolMixin = types
     get extraShortcuts() {
       return {};
     },
+
+    get shouldPreserveSelectedState() {
+      try {
+        const settings = getRoot(self.obj).settings;
+
+        return settings.preserveSelectedTool;
+      } catch (err) {
+        console.log('something is missing');
+        return false;
+      }
+    },
+
+    get isPreserved() {
+      return window.localStorage.getItem(`selected-tool:${self.obj?.name}`) === self.fullName;
+    },
   }))
   .actions(self => ({
-    setSelected(val) {
-      self.selected = val;
+    setSelected(selected) {
+      self.selected = selected;
       self.afterUpdateSelected();
+
+      if (selected && self.obj) {
+        const storeName = `selected-tool:${self.obj.name}`;
+
+        if (self.shouldPreserveSelectedState) {
+          window.localStorage.setItem(storeName, self.fullName);
+        }
+      }
     },
 
     afterUpdateSelected() {},

src/stores/AppStore.js

@@ -669,5 +669,8 @@ export default types
       addAnnotationToTaskHistory,
       nextTask,
       prevTask,
+      beforeDestroy() {
+        ToolsManager.removeAllTools();
+      },
     };
   });

src/stores/SettingsStore.js

@@ -55,6 +55,8 @@ const SettingsModel = types
 
     showPredictionsPanel: types.optional(types.boolean, true),
     // showScore: types.optional(types.boolean, false),
+
+    preserveSelectedTool: types.optional(types.boolean, true),
   })
   .views(self => ({
     get annotation() {
@@ -139,6 +141,10 @@ const SettingsModel = types
       self.enableAutoSave = !self.enableAutoSave;
     },
 
+    togglepreserveSelectedTool() {
+      self.preserveSelectedTool = !self.preserveSelectedTool;
+    },
+
     toggleHotkeys() {
       self.enableHotkeys = !self.enableHotkeys;
       if (self.enableHotkeys) {

src/tags/control/Label.js

@@ -164,8 +164,9 @@ const Model = types.model({
       const selectedTool = manager.findSelectedTool();
       const sameType = (tool && selectedTool) ? getType(selectedTool).name === getType(tool).name : false;
       const sameLabel = selectedTool ? tool?.control?.name === selectedTool?.control?.name : false;
+      const isNotSameTool = selectedTool && (!sameType || !sameLabel);
 
-      if (tool && (!selectedTool || (selectedTool && (!sameType || !sameLabel)))) {
+      if (tool && (isNotSameTool || !selectedTool)) {
         manager.selectTool(tool, true);
       }
     }

src/tags/object/Image.js

@@ -422,32 +422,30 @@ const Model = types.model({
   // actions for the tools
   .actions(self => {
     const manager = ToolsManager.getInstance({ name: self.name });
-    const env = { manager, control: self };
+    const env = { manager, control: self, object: self };
 
-    manager.reload({ name: self.name });
-
-    function afterCreate() {
+    function afterAttach() {
       if (self.selectioncontrol)
-        manager.addTool("selection", Tools.Selection.create({}, env));
+        manager.addTool("MoveTool", Tools.Selection.create({}, env));
 
       if (self.zoomcontrol)
-        manager.addTool("zoom", Tools.Zoom.create({}, env));
+        manager.addTool("ZoomPanTool", Tools.Zoom.create({}, env));
 
       if (self.brightnesscontrol)
-        manager.addTool("brightness", Tools.Brightness.create({}, env));
+        manager.addTool("BrightnessTool", Tools.Brightness.create({}, env));
 
       if (self.contrastcontrol)
-        manager.addTool("contrast", Tools.Contrast.create({}, env));
+        manager.addTool("ContrastTool", Tools.Contrast.create({}, env));
 
       if (self.rotatecontrol)
-        manager.addTool("rotate", Tools.Rotate.create({}, env));
+        manager.addTool("RotateTool", Tools.Rotate.create({}, env));
     }
 
     function getToolsManager() {
       return manager;
     }
 
-    return { afterCreate, getToolsManager };
+    return { afterAttach, getToolsManager };
   }).extend((self) => {
     let skipInteractions = false;
 

src/tools/Manager.js

@@ -31,28 +31,44 @@ class ToolsManager {
     INSTANCES.forEach((manager) => manager.removeAllTools());
   }
 
-  constructor({ name } = {}) {
+  constructor({
+    name,
+  } = {}) {
     this.name = name;
     this.tools = {};
     this._default_tool = null;
   }
 
+  get preservedTool() {
+    return window.localStorage.getItem(`selected-tool:${this.name}`);
+  }
+
   get obj() {
     return root.annotationStore.names.get(this.name);
   }
 
-  addTool(name, tool, prefix = guidGenerator()) {
+  addTool(toolName, tool, prefix = guidGenerator()) {
     if (tool.smart && tool.smartOnly) return;
-    // todo: It seems that key is using only for storing,
+    // todo: It seems that key is used only for storing,
     // but not for finding tools, so may be there might
     // be an array instead of an object
+    const name = tool.toolName ?? toolName;
     const key = `${prefix}#${name}`;
 
     this.tools[key] = tool;
 
-    if (tool.default && !this._default_tool && !this.hasSelected) {
-      this._default_tool = tool;
-      if (tool.setSelected) tool.setSelected(true);
+    if (tool.default && !this._default_tool) this._default_tool = tool;
+
+    if (this.preservedTool && tool.shouldPreserveSelectedState) {
+      if (tool.fullName === this.preservedTool && tool.setSelected) {
+        this.unselectAll();
+        this.selectTool(tool, true);
+      }
+      return;
+    }
+
+    if (this._default_tool && !this.hasSelected) {
+      this.selectTool(this._default_tool, true);
     }
   }
 
@@ -70,8 +86,8 @@ class ToolsManager {
     }
   }
 
-  selectTool(tool, value) {
-    if (value) {
+  selectTool(tool, selected) {
+    if (selected) {
       this.unselectAll();
       if (tool.setSelected) tool.setSelected(true);
     } else {