Feature: Action System (#298)

* Add Action System

- Add keyboard test
- Add context menu label
- Add PanelComponent

* Show context menu items based on actions

* Add render action feature

- Replace bringForward etc buttons with action manager render functions

* Move all property changes and canvas into actions

* Remove unnecessary functions and add forgotten force update when elements array change

* Extract export operations into actions

* Add elements and app state as arguments to `keyTest` function

* Add key priorities

- Sort actions by key priority when handling key presses

* Extract copy/paste styles

* Add Context Menu Item order

- Sort context menu items based on menu item order parameter

* Remove unnecessary functions from App component

src/components/panels/PanelCanvas.tsx

@@ -1,33 +1,39 @@
 import React from "react";
 
-import { ColorPicker } from "../ColorPicker";
 import { Panel } from "../Panel";
+import { ActionManager } from "../../actions";
+import { ExcalidrawElement } from "../../element/types";
+import { AppState } from "../../types";
+import { UpdaterFn } from "../../actions/types";
 
 interface PanelCanvasProps {
-  viewBackgroundColor: string;
-  onViewBackgroundColorChange: (val: string) => void;
-  onClearCanvas: React.MouseEventHandler;
+  actionManager: ActionManager;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState;
+  syncActionResult: UpdaterFn;
 }
 
 export const PanelCanvas: React.FC<PanelCanvasProps> = ({
-  viewBackgroundColor,
-  onViewBackgroundColorChange,
-  onClearCanvas
+  actionManager,
+  elements,
+  appState,
+  syncActionResult
 }) => {
   return (
     <Panel title="Canvas">
-      <h5>Canvas Background Color</h5>
-      <ColorPicker
-        color={viewBackgroundColor}
-        onChange={color => onViewBackgroundColorChange(color)}
-      />
-      <button
-        type="button"
-        onClick={onClearCanvas}
-        title="Clear the canvas & reset background color"
-      >
-        Clear canvas
-      </button>
+      {actionManager.renderAction(
+        "changeViewBackgroundColor",
+        elements,
+        appState,
+        syncActionResult
+      )}
+
+      {actionManager.renderAction(
+        "clearCanvas",
+        elements,
+        appState,
+        syncActionResult
+      )}
     </Panel>
   );
 };

src/components/panels/PanelExport.tsx

@@ -1,18 +1,19 @@
 import React from "react";
-import { EditableText } from "../EditableText";
 import { Panel } from "../Panel";
 import { ExportType } from "../../scene/types";
 
 import "./panelExport.scss";
+import { ActionManager } from "../../actions";
+import { ExcalidrawElement } from "../../element/types";
+import { AppState } from "../../types";
+import { UpdaterFn } from "../../actions/types";
 
 interface PanelExportProps {
-  projectName: string;
-  onProjectNameChange: (name: string) => void;
+  actionManager: ActionManager;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState;
+  syncActionResult: UpdaterFn;
   onExportCanvas: (type: ExportType) => void;
-  exportBackground: boolean;
-  onExportBackgroundChange: (val: boolean) => void;
-  onSaveScene: React.MouseEventHandler;
-  onLoadScene: React.MouseEventHandler;
 }
 
 // fa-clipboard
@@ -32,23 +33,20 @@ const probablySupportsClipboard =
   "ClipboardItem" in window;
 
 export const PanelExport: React.FC<PanelExportProps> = ({
-  projectName,
-  exportBackground,
-  onProjectNameChange,
-  onExportBackgroundChange,
-  onSaveScene,
-  onLoadScene,
+  actionManager,
+  elements,
+  appState,
+  syncActionResult,
   onExportCanvas
 }) => {
   return (
     <Panel title="Export">
       <div className="panelColumn">
-        <h5>Name</h5>
-        {projectName && (
-          <EditableText
-            value={projectName}
-            onChange={(name: string) => onProjectNameChange(name)}
-          />
+        {actionManager.renderAction(
+          "changeProjectName",
+          elements,
+          appState,
+          syncActionResult
         )}
         <h5>Image</h5>
         <div className="panelExport-imageButtons">
@@ -68,19 +66,26 @@ export const PanelExport: React.FC<PanelExportProps> = ({
             </button>
           )}
         </div>
-        <label>
-          <input
-            type="checkbox"
-            checked={exportBackground}
-            onChange={e => {
-              onExportBackgroundChange(e.target.checked);
-            }}
-          />
-          background
-        </label>
+        {actionManager.renderAction(
+          "changeExportBackground",
+          elements,
+          appState,
+          syncActionResult
+        )}
+
         <h5>Scene</h5>
-        <button onClick={onSaveScene}>Save as...</button>
-        <button onClick={onLoadScene}>Load file...</button>
+        {actionManager.renderAction(
+          "saveScene",
+          elements,
+          appState,
+          syncActionResult
+        )}
+        {actionManager.renderAction(
+          "loadScene",
+          elements,
+          appState,
+          syncActionResult
+        )}
       </div>
     </Panel>
   );

src/components/panels/PanelSelection.tsx

@@ -1,33 +1,49 @@
 import React from "react";
+import { ActionManager } from "../../actions";
+import { ExcalidrawElement } from "../../element/types";
+import { AppState } from "../../types";
+import { UpdaterFn } from "../../actions/types";
 
 interface PanelSelectionProps {
-  onBringForward: React.MouseEventHandler;
-  onBringToFront: React.MouseEventHandler;
-  onSendBackward: React.MouseEventHandler;
-  onSendToBack: React.MouseEventHandler;
+  actionManager: ActionManager;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState;
+  syncActionResult: UpdaterFn;
 }
 
 export const PanelSelection: React.FC<PanelSelectionProps> = ({
-  onBringForward,
-  onBringToFront,
-  onSendBackward,
-  onSendToBack
+  actionManager,
+  elements,
+  appState,
+  syncActionResult
 }) => {
   return (
     <div>
       <div className="buttonList">
-        <button type="button" onClick={onBringForward}>
-          Bring forward
-        </button>
-        <button type="button" onClick={onBringToFront}>
-          Bring to front
-        </button>
-        <button type="button" onClick={onSendBackward}>
-          Send backward
-        </button>
-        <button type="button" onClick={onSendToBack}>
-          Send to back
-        </button>
+        {actionManager.renderAction(
+          "bringForward",
+          elements,
+          appState,
+          syncActionResult
+        )}
+        {actionManager.renderAction(
+          "bringToFront",
+          elements,
+          appState,
+          syncActionResult
+        )}
+        {actionManager.renderAction(
+          "sendBackward",
+          elements,
+          appState,
+          syncActionResult
+        )}
+        {actionManager.renderAction(
+          "sendToBack",
+          elements,
+          appState,
+          syncActionResult
+        )}
       </div>
     </div>
   );