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/actions/actionCanvas.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Action } from "./types";
+import { ColorPicker } from "../components/ColorPicker";
+
+export const actionChangeViewBackgroundColor: Action = {
+  name: "changeViewBackgroundColor",
+  perform: (elements, appState, value) => {
+    return { appState: { ...appState, viewBackgroundColor: value } };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <>
+      <h5>Canvas Background Color</h5>
+      <ColorPicker
+        color={appState.viewBackgroundColor}
+        onChange={color => updateData(color)}
+      />
+    </>
+  )
+};
+
+export const actionClearCanvas: Action = {
+  name: "clearCanvas",
+  perform: (elements, appState, value) => {
+    return {
+      elements: [],
+      appState: {
+        ...appState,
+        viewBackgroundColor: "#ffffff",
+        scrollX: 0,
+        scrollY: 0
+      }
+    };
+  },
+  PanelComponent: ({ updateData }) => (
+    <button
+      type="button"
+      onClick={() => {
+        if (window.confirm("This will clear the whole canvas. Are you sure?")) {
+          updateData(null);
+        }
+      }}
+      title="Clear the canvas & reset background color"
+    >
+      Clear canvas
+    </button>
+  )
+};