improvement: do not reset to selection for draw tool (#2721)

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/actionFinalize.tsx

@@ -118,11 +118,14 @@ export const actionFinalize = register({
         );
       }
 
-      if (!appState.elementLocked) {
+      if (!appState.elementLocked && appState.elementType !== "draw") {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
     }
-    if (!appState.elementLocked || !multiPointElement) {
+    if (
+      (!appState.elementLocked && appState.elementType !== "draw") ||
+      !multiPointElement
+    ) {
       resetCursor();
     }
     return {
@@ -130,7 +133,8 @@ export const actionFinalize = register({
       appState: {
         ...appState,
         elementType:
-          appState.elementLocked && multiPointElement
+          (appState.elementLocked || appState.elementType === "draw") &&
+          multiPointElement
             ? appState.elementType
             : "selection",
         draggingElement: null,
@@ -139,7 +143,9 @@ export const actionFinalize = register({
         startBoundElement: null,
         suggestedBindings: [],
         selectedElementIds:
-          multiPointElement && !appState.elementLocked
+          multiPointElement &&
+          !appState.elementLocked &&
+          appState.elementType !== "draw"
             ? {
                 ...appState.selectedElementIds,
                 [multiPointElement.id]: true,

src/components/App.tsx

@@ -3141,7 +3141,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
-          if (!elementLocked) {
+          if (!elementLocked && elementType !== "draw") {
             resetCursor();
             this.setState((prevState) => ({
               draggingElement: null,
@@ -3288,7 +3288,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         return;
       }
 
-      if (!elementLocked && draggingElement) {
+      if (!elementLocked && elementType !== "draw" && draggingElement) {
         this.setState((prevState) => ({
           selectedElementIds: {
             ...prevState.selectedElementIds,
@@ -3312,7 +3312,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         );
       }
 
-      if (!elementLocked) {
+      if (!elementLocked && elementType !== "draw") {
         resetCursor();
         this.setState({
           draggingElement: null,

src/packages/excalidraw/CHANGELOG.md

@@ -43,6 +43,7 @@ Please add the latest change on the top under the correct section.
 
 ### Improvements
 
+- Do not reset to selection when using the draw tool [#2721](https://github.com/excalidraw/excalidraw/pull/2721)
 - Display proper tooltip for 2-point lines during resize, and normalize modifier key labels in hints [#2655](https://github.com/excalidraw/excalidraw/pull/2655)
 - Improve error message around importing images [#2619](https://github.com/excalidraw/excalidraw/pull/2619)
 - Add tooltip with icon for embedding scenes [#2532](https://github.com/excalidraw/excalidraw/pull/2532)

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -6364,7 +6364,7 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
+  "elementType": "draw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -6392,7 +6392,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {
-    "id7": true,
+    "id7": false,
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
@@ -8082,7 +8082,7 @@ Object {
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
-          "id7": true,
+          "id7": false,
         },
         "viewBackgroundColor": "#ffffff",
       },
@@ -10433,7 +10433,7 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
+  "elementType": "draw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10461,7 +10461,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {
-    "id0": true,
+    "id0": false,
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
@@ -10546,7 +10546,7 @@ Object {
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
-          "id0": true,
+          "id0": false,
         },
         "viewBackgroundColor": "#ffffff",
       },
@@ -11489,7 +11489,7 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
+  "elementType": "draw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -11517,7 +11517,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {
-    "id0": true,
+    "id0": false,
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
@@ -11602,7 +11602,7 @@ Object {
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
-          "id0": true,
+          "id0": false,
         },
         "viewBackgroundColor": "#ffffff",
       },

src/tests/regressionTests.test.tsx

@@ -150,22 +150,26 @@ describe("regression tests", () => {
     expect(API.getSelectedElement().id).not.toEqual(prevSelectedId);
   });
 
-  for (const [keys, shape] of [
+  for (const [keys, shape, shouldSelect] of [
-    [`2${KEYS.R}`, "rectangle"],
+    [`2${KEYS.R}`, "rectangle", true],
-    [`3${KEYS.D}`, "diamond"],
+    [`3${KEYS.D}`, "diamond", true],
-    [`4${KEYS.E}`, "ellipse"],
+    [`4${KEYS.E}`, "ellipse", true],
-    [`5${KEYS.A}`, "arrow"],
+    [`5${KEYS.A}`, "arrow", true],
-    [`6${KEYS.L}`, "line"],
+    [`6${KEYS.L}`, "line", true],
-    [`7${KEYS.X}`, "draw"],
+    [`7${KEYS.X}`, "draw", false],
-  ] as [string, ExcalidrawElement["type"]][]) {
+  ] as [string, ExcalidrawElement["type"], boolean][]) {
     for (const key of keys) {
       it(`key ${key} selects ${shape} tool`, () => {
         Keyboard.keyPress(key);
 
+        expect(h.state.elementType).toBe(shape);
+
         mouse.down(10, 10);
         mouse.up(10, 10);
 
-        expect(API.getSelectedElement().type).toBe(shape);
+        if (shouldSelect) {
+          expect(API.getSelectedElement().type).toBe(shape);
+        }
       });
     }
   }