fix: LEAP-1615: LEAP-456: Fix tool unselect

web/libs/editor/src/components/Toolbar/Toolbar.jsx

@@ -1,13 +1,15 @@
 import { useMemo, useState } from "react";
-import { Block, Elem } from "../../utils/bem";
-import "./Toolbar.scss";
-import "./Tool.scss";
-import "./FlyoutMenu.scss";
+import { inject, observer } from "mobx-react";
+
 import { useWindowSize } from "../../common/Utils/useWindowSize";
+import { Block, cn, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
-import { inject, observer } from "mobx-react";
-import { ToolbarProvider } from "./ToolbarContext";
 import { Tool } from "./Tool";
+import { ToolbarProvider } from "./ToolbarContext";
+
+import "./FlyoutMenu.scss";
+import "./Tool.scss";
+import "./Toolbar.scss";
 
 export const Toolbar = inject("store")(
   observer(({ store, tools, expanded }) => {
@@ -110,9 +112,12 @@ const SmartTools = observer(({ tools }) => {
             ) : null
           }
           controls={selected.controls}
-          onClick={() => {
+          onClick={(e) => {
             let nextIndex = selectedIndex + 1;
 
+            // if that's a smart button in extra block, it's already selected
+            if (e.target.closest(`.${cn("tool").elem("extra")}`)) return;
+
             if (!hasSelected) nextIndex = 0;
             else if (nextIndex >= tools.length) nextIndex = 0;
 

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

@@ -123,12 +123,12 @@ class ToolsManager {
 
     if (selected) {
       this.unselectAll();
-      if (tool.setSelected) tool.setSelected(true);
+      tool.setSelected?.(true);
     } else {
       const drawingTool = this.findDrawingTool();
 
       if (drawingTool) return this.selectTool(drawingTool, true);
-      if (tool.setSelected) tool.setSelected(false);
+      this.selectTool(this._default_tool, true);
     }
   }
 

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

@@ -1,26 +1,38 @@
+import { observer } from "mobx-react";
 import { types } from "mobx-state-tree";
 
-import BaseTool from "./Base";
-import ToolMixin from "../mixins/Tool";
-import { AnnotationMixin } from "../mixins/AnnotationMixin";
 import { IconMoveTool } from "../assets/icons";
+import { Tool } from "../components/Toolbar/Tool";
+import { AnnotationMixin } from "../mixins/AnnotationMixin";
+import ToolMixin from "../mixins/Tool";
 import { FF_LSDV_4930, isFF } from "../utils/feature-flags";
+import BaseTool from "./Base";
+
+const ToolView = observer(({ item }) => {
+  return (
+    <Tool
+      ariaLabel="move"
+      active={item.selected}
+      icon={<IconMoveTool />}
+      label="Move"
+      shortcut={item.shortcut}
+      extraShortcuts={item.extraShortcuts}
+      onClick={() => {
+        item.manager.selectTool(item, !item.selected);
+      }}
+    />
+  );
+});
 
 const _Tool = types
   .model("SelectionTool", {
     shortcut: "V",
     group: "control",
   })
-  .views(() => {
+  .views((self) => {
     return {
-      get isSeparated() {
-        return true;
-      },
-      get viewTooltip() {
-        return "Move";
-      },
-      get iconComponent() {
-        return IconMoveTool;
+      get viewClass() {
+        return () => <ToolView item={self} />;
       },
       get useTransformer() {
         return true;