Add points to multi arrows in real time (#697)

* Add points to multi arrows in real time

* Fix linter issues

* Clear unecessary values from local storage

src/actions/actionFinalize.tsx

@@ -8,6 +8,13 @@ export const actionFinalize: Action = {
     if (window.document.activeElement instanceof HTMLElement) {
       window.document.activeElement.blur();
     }
+    if (appState.multiElement) {
+      appState.multiElement.points = appState.multiElement.points.slice(
+        0,
+        appState.multiElement.points.length - 1,
+      );
+      appState.multiElement.shape = null;
+    }
     return {
       elements: clearSelection(elements),
       appState: {

src/appState.ts

@@ -30,6 +30,18 @@ export function getDefaultAppState(): AppState {
   };
 }
 
+export function clearAppStateForLocalStorage(appState: AppState) {
+  const {
+    draggingElement,
+    resizingElement,
+    multiElement,
+    editingElement,
+    isResizing,
+    ...exportedState
+  } = appState;
+  return exportedState;
+}
+
 export function cleanAppStateForExport(appState: AppState) {
   return {
     viewBackgroundColor: appState.viewBackgroundColor,

src/index.tsx

@@ -1074,7 +1074,6 @@ export class App extends React.Component<any, AppState> {
                   multiElement.isSelected = true;
                   multiElement.points.push([x - rx, y - ry]);
                   multiElement.shape = null;
-                  this.setState({ draggingElement: multiElement });
                 } else {
                   element.isSelected = false;
                   element.points.push([0, 0]);
@@ -1548,7 +1547,13 @@ export class App extends React.Component<any, AppState> {
                   if (draggingElement!.points.length > 1) {
                     history.resumeRecording();
                   }
-                  if (!draggingOccurred && !multiElement) {
+                  if (!draggingOccurred && draggingElement && !multiElement) {
+                    const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+                    draggingElement.points.push([
+                      x - draggingElement.x,
+                      y - draggingElement.y,
+                    ]);
+                    draggingElement.shape = null;
                     this.setState({ multiElement: this.state.draggingElement });
                   } else if (draggingOccurred && !multiElement) {
                     this.state.draggingElement!.isSelected = true;
@@ -1751,13 +1756,28 @@ export class App extends React.Component<any, AppState> {
                 return;
               }
               const hasDeselectedButton = Boolean(e.buttons);
+
+              const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+              if (this.state.multiElement) {
+                const { multiElement } = this.state;
+                const originX = multiElement.x;
+                const originY = multiElement.y;
+                const points = multiElement.points;
+                const pnt = points[points.length - 1];
+                pnt[0] = x - originX;
+                pnt[1] = y - originY;
+                multiElement.shape = null;
+                this.setState({});
+                return;
+              }
+
               if (
                 hasDeselectedButton ||
                 this.state.elementType !== "selection"
               ) {
                 return;
               }
-              const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+
               const selectedElements = elements.filter(e => e.isSelected)
                 .length;
               if (selectedElements === 1) {

src/scene/data.ts

@@ -1,6 +1,10 @@
 import { ExcalidrawElement } from "../element/types";
 
-import { getDefaultAppState, cleanAppStateForExport } from "../appState";
+import {
+  getDefaultAppState,
+  cleanAppStateForExport,
+  clearAppStateForLocalStorage,
+} from "../appState";
 
 import { AppState } from "../types";
 import { ExportType, PreviousScene } from "./types";
@@ -358,10 +362,13 @@ export function restoreFromLocalStorage() {
 
 export function saveToLocalStorage(
   elements: readonly ExcalidrawElement[],
-  state: AppState,
+  appState: AppState,
 ) {
   localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(elements));
-  localStorage.setItem(LOCAL_STORAGE_KEY_STATE, JSON.stringify(state));
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY_STATE,
+    JSON.stringify(clearAppStateForLocalStorage(appState)),
+  );
 }
 
 /**