fix: workaround for mobx to work correctly with modemanager

src/components/ToolMenu/index.tsx

@@ -33,14 +33,14 @@ export const ToolMenu = observer(() => {
         Icon={NearMeIcon}
         onClick={() => modeManager.activateMode(Select)}
         size={theme.customVars.toolMenu.height}
-        isActive={modeManager.currentMode instanceof Select}
+        isActive={modeManager.currentMode?.instance instanceof Select}
       />
       <MenuItem
         name="Pan"
         Icon={PanToolIcon}
         onClick={() => modeManager.activateMode(Pan)}
         size={theme.customVars.toolMenu.height}
-        isActive={modeManager.currentMode instanceof Pan}
+        isActive={modeManager.currentMode?.instance instanceof Pan}
       />
       <MenuItem
         name="Zoom in"

src/modes/ModeManager.ts

@@ -1,15 +1,17 @@
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, action } from "mobx";
+import autobind from "auto-bind";
 import { Renderer } from "../renderer/Renderer";
 import { ModeBase } from "./ModeBase";
 import { Mouse } from "./types";
 
 export class ModeManager {
+  // mobx requires all properties to be initialised explicitly (i.e. prop = undefined)
   renderer?: Renderer = undefined;
   currentMode?: {
     instance: ModeBase;
     class: typeof ModeBase;
-  };
-  lastMode?: typeof ModeBase;
+  } = undefined;
+  lastMode?: typeof ModeBase = undefined;
   mouse: Mouse = {
     position: { x: 0, y: 0 },
     delta: null,
@@ -17,6 +19,7 @@ export class ModeManager {
 
   constructor() {
     makeAutoObservable(this);
+    autobind(this);
   }
 
   setRenderer(renderer: Renderer) {
@@ -37,8 +40,7 @@ export class ModeManager {
     this.currentMode = {
       instance: new Mode({
         renderer: this.renderer,
-        activateMode: this.activateMode.bind(this),
-        deactivate: this.deactivate.bind(this),
+        activateMode: this.activateMode,
       }),
       class: Mode,
     };
@@ -47,12 +49,6 @@ export class ModeManager {
     this.currentMode.instance.entry(this.mouse);
   }
 
-  deactivate() {
-    if (!this.lastMode) return;
-
-    this.activateMode(this.lastMode);
-  }
-
   onMouseEvent(eventName: string, mouse: Mouse) {
     this.mouse = mouse;
 
@@ -62,6 +58,6 @@ export class ModeManager {
   send(eventName: string, params?: any) {
     // TODO: Improve typings below
     // @ts-ignore
-    this.currentMode.instance?.[eventName]?.(params);
+    this.currentMode?.instance[eventName]?.(params);
   }
 }

src/modes/SelectNode.ts

@@ -1,4 +1,5 @@
 import { ModeBase } from "./ModeBase";
+import { Select } from "../modes/Select";
 import { Mouse, ModeContext } from "./types";
 import { Node } from "../renderer/elements/Node";
 
@@ -21,6 +22,6 @@ export class SelectNode extends ModeBase {
   }
 
   MOUSE_UP() {
-    this.ctx.deactivate();
+    this.ctx.activateMode(Select);
   }
 }

src/modes/types.ts

@@ -20,5 +20,4 @@ export interface Mouse {
 export interface ModeContext {
   renderer: Renderer;
   activateMode: ModeManager["activateMode"];
-  deactivate: ModeManager["deactivate"];
 }