Reintroduce multi-point arrows and add migration for it (#635)

* Revert "Revert "Feature: Multi Point Arrows (#338)" (#634)"

This reverts commit 3d2e59bfed.

* Convert old arrow spec to new one

* Remove unnecessary failchecks and fix context transform issue in retina displays

* Remove old points failcheck from getArrowAbsoluteBounds

* Remove all failchecks for old arrow

* remove the rest of unnecessary checks

* Set default values for the arrow during import

* Add translations

* fix restore using unmigrated elements for state computation

* don't use width/height when migrating from new arrow spec

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

src/actions/actionDeleteSelected.tsx

@@ -4,9 +4,10 @@ import { KEYS } from "../keys";
 
 export const actionDeleteSelected: Action = {
   name: "deleteSelectedElements",
-  perform: elements => {
+  perform: (elements, appState) => {
     return {
       elements: deleteSelectedElements(elements),
+      appState: { ...appState, elementType: "selection", multiElement: null },
     };
   },
   contextItemLabel: "labels.delete",

src/actions/actionFinalize.tsx

@@ -0,0 +1,27 @@
+import { Action } from "./types";
+import { KEYS } from "../keys";
+import { clearSelection } from "../scene";
+
+export const actionFinalize: Action = {
+  name: "finalize",
+  perform: (elements, appState) => {
+    if (window.document.activeElement instanceof HTMLElement) {
+      window.document.activeElement.blur();
+    }
+    return {
+      elements: clearSelection(elements),
+      appState: {
+        ...appState,
+        elementType: "selection",
+        draggingElement: null,
+        multiElement: null,
+      },
+    };
+  },
+  keyTest: (event, appState) =>
+    (event.key === KEYS.ESCAPE &&
+      !appState.draggingElement &&
+      appState.multiElement === null) ||
+    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
+      appState.multiElement !== null),
+};

src/actions/index.ts

@@ -23,6 +23,8 @@ export {
   actionClearCanvas,
 } from "./actionCanvas";
 
+export { actionFinalize } from "./actionFinalize";
+
 export {
   actionChangeProjectName,
   actionChangeExportBackground,

src/actions/manager.tsx

@@ -34,7 +34,7 @@ export class ActionManager implements ActionsManagerInterface {
     const data = Object.values(this.actions)
       .sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0))
       .filter(
-        action => action.keyTest && action.keyTest(event, elements, appState),
+        action => action.keyTest && action.keyTest(event, appState, elements),
       );
 
     if (data.length === 0) return null;

src/actions/types.ts

@@ -27,8 +27,8 @@ export interface Action {
   keyPriority?: number;
   keyTest?: (
     event: KeyboardEvent,
-    elements?: readonly ExcalidrawElement[],
-    appState?: AppState,
+    appState: AppState,
+    elements: readonly ExcalidrawElement[],
   ) => boolean;
   contextItemLabel?: string;
   contextMenuOrder?: number;