Aligns arrowhead schemas (#2517)

src/actions/actionProperties.tsx

@@ -667,10 +667,9 @@ export const actionChangeArrowhead = register({
       }),
       appState: {
         ...appState,
-        currentItemArrowheads: {
+        [value.position === "start"
-          ...appState.currentItemArrowheads,
+          ? "currentItemStartArrowhead"
-          [value.position]: value.type,
+          : "currentItemEndArrowhead"]: value.type,
-        },
       },
       commitToHistory: true,
     };
@@ -731,8 +730,8 @@ export const actionChangeArrowhead = register({
               (element) =>
                 isLinearElement(element) && canHaveArrowheads(element.type)
                   ? element.startArrowhead
-                  : appState.currentItemArrowheads.start,
+                  : appState.currentItemStartArrowhead,
-              appState.currentItemArrowheads.start,
+              appState.currentItemStartArrowhead,
             )}
             onChange={(value) => updateData({ position: "start", type: value })}
           />
@@ -786,8 +785,8 @@ export const actionChangeArrowhead = register({
               (element) =>
                 isLinearElement(element) && canHaveArrowheads(element.type)
                   ? element.endArrowhead
-                  : appState.currentItemArrowheads.end,
+                  : appState.currentItemEndArrowhead,
-              appState.currentItemArrowheads.end,
+              appState.currentItemEndArrowhead,
             )}
             onChange={(value) => updateData({ position: "end", type: value })}
           />

src/appState.ts

@@ -39,7 +39,8 @@ export const getDefaultAppState = (): Omit<
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
     currentItemStrokeSharpness: "sharp",
     currentItemLinearStrokeSharpness: "round",
-    currentItemArrowheads: { start: null, end: "arrow" },
+    currentItemStartArrowhead: null,
+    currentItemEndArrowhead: "arrow",
     viewBackgroundColor: oc.white,
     scrollX: 0 as FlooredNumber,
     scrollY: 0 as FlooredNumber,
@@ -104,7 +105,8 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemTextAlign: { browser: true, export: false },
   currentItemStrokeSharpness: { browser: true, export: false },
   currentItemLinearStrokeSharpness: { browser: true, export: false },
-  currentItemArrowheads: { browser: true, export: false },
+  currentItemStartArrowhead: { browser: true, export: false },
+  currentItemEndArrowhead: { browser: true, export: false },
   cursorButton: { browser: true, export: false },
   cursorX: { browser: true, export: false },
   cursorY: { browser: true, export: false },

src/components/App.tsx

@@ -2578,12 +2578,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         elementType === "draw" ? null : this.state.gridSize,
       );
 
-      // If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
+      /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
-      // If so, we want it to be null/"arrow". If the linear item is not an arrow, we want it
+			 If so, we want it to be null for start and "arrow" for end. If the linear item is not 
-      // to be null/null. Otherwise, we want it to use the currentItemArrowheads values.
+			 an arrow, we want it to be null for both. Otherwise, we want it to use the 
-      const { start, end } = this.state.currentItemArrowheads;
+			 values from appState. */
+
+      const { currentItemStartArrowhead, currentItemEndArrowhead } = this.state;
       const [startArrowhead, endArrowhead] =
-        elementType === "arrow" ? [start, end] : [null, null];
+        elementType === "arrow"
+          ? [currentItemStartArrowhead, currentItemEndArrowhead]
+          : [null, null];
 
       const element = newLinearElement({
         type: elementType,

src/types.ts

@@ -61,10 +61,8 @@ export type AppState = {
   currentItemFontSize: number;
   currentItemTextAlign: TextAlign;
   currentItemStrokeSharpness: ExcalidrawElement["strokeSharpness"];
-  currentItemArrowheads: {
+  currentItemStartArrowhead: Arrowhead | null;
-    start: Arrowhead | null;
+  currentItemEndArrowhead: Arrowhead | null;
-    end: Arrowhead | null;
-  };
   currentItemLinearStrokeSharpness: ExcalidrawElement["strokeSharpness"];
   viewBackgroundColor: string;
   scrollX: FlooredNumber;