clear selection from copied/duplicatated group (#1973)

Co-authored-by: rene_mbp <harryloveslearning@googlemail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/actionDuplicateSelection.tsx

@@ -10,6 +10,7 @@ import { t } from "../i18n";
 import { getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement } from "../element/mutateElement";
+import { selectGroupsForSelectedElements } from "../groups";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -50,28 +51,39 @@ export const actionDuplicateSelection = register({
     }
 
     const groupIdMap = new Map();
+    const newElements: ExcalidrawElement[] = [];
+    const finalElements = elements.reduce(
+      (acc: Array<ExcalidrawElement>, element: ExcalidrawElement) => {
+        if (appState.selectedElementIds[element.id]) {
+          const newElement = duplicateElement(
+            appState.editingGroupId,
+            groupIdMap,
+            element,
+            {
+              x: element.x + 10,
+              y: element.y + 10,
+            },
+          );
+          newElements.push(newElement);
+          return acc.concat([element, newElement]);
+        }
+        return acc.concat(element);
+      },
+      [],
+    );
     return {
-      appState,
-      elements: elements.reduce(
-        (acc: Array<ExcalidrawElement>, element: ExcalidrawElement) => {
-          if (appState.selectedElementIds[element.id]) {
-            const newElement = duplicateElement(
-              appState.editingGroupId,
-              groupIdMap,
-              element,
-              {
-                x: element.x + 10,
-                y: element.y + 10,
-              },
-            );
-            appState.selectedElementIds[newElement.id] = true;
-            delete appState.selectedElementIds[element.id];
-            return acc.concat([element, newElement]);
-          }
-          return acc.concat(element);
+      appState: selectGroupsForSelectedElements(
+        {
+          ...appState,
+          selectedGroupIds: {},
+          selectedElementIds: newElements.reduce((acc, element) => {
+            acc[element.id] = true;
+            return acc;
+          }, {} as any),
         },
-        [],
+        getNonDeletedElements(finalElements),
       ),
+      elements: finalElements,
       commitToHistory: true,
     };
   },

src/actions/manager.tsx

@@ -15,7 +15,7 @@ export class ActionManager implements ActionsManagerInterface {
 
   updater: UpdaterFn;
 
-  getAppState: () => AppState;
+  getAppState: () => Readonly<AppState>;
 
   getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
 

src/actions/types.ts

@@ -14,7 +14,7 @@ export type ActionResult =
 
 type ActionFn = (
   elements: readonly ExcalidrawElement[],
-  appState: AppState,
+  appState: Readonly<AppState>,
   formData: any,
 ) => ActionResult;
 

src/components/App.tsx

@@ -956,19 +956,25 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         y: element.y + dy - minY,
       });
     });
-
     this.scene.replaceAllElements([
       ...this.scene.getElementsIncludingDeleted(),
       ...newElements,
     ]);
     history.resumeRecording();
-    this.setState({
-      isLibraryOpen: false,
-      selectedElementIds: newElements.reduce((map, element) => {
-        map[element.id] = true;
-        return map;
-      }, {} as any),
-    });
+    this.setState(
+      selectGroupsForSelectedElements(
+        {
+          ...this.state,
+          isLibraryOpen: false,
+          selectedElementIds: newElements.reduce((map, element) => {
+            map[element.id] = true;
+            return map;
+          }, {} as any),
+          selectedGroupIds: {},
+        },
+        this.scene.getElements(),
+      ),
+    );
   };
 
   private addTextFromPaste(text: any) {