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/actionExport.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Action } from "./types";
+import { EditableText } from "../components/EditableText";
+import { saveAsJSON, loadFromJSON } from "../scene";
+
+export const actionChangeProjectName: Action = {
+  name: "changeProjectName",
+  perform: (elements, appState, value) => {
+    return { appState: { ...appState, name: value } };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <>
+      <h5>Name</h5>
+      {appState.name && (
+        <EditableText
+          value={appState.name}
+          onChange={(name: string) => updateData(name)}
+        />
+      )}
+    </>
+  )
+};
+
+export const actionChangeExportBackground: Action = {
+  name: "changeExportBackground",
+  perform: (elements, appState, value) => {
+    return { appState: { ...appState, exportBackground: value } };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <label>
+      <input
+        type="checkbox"
+        checked={appState.exportBackground}
+        onChange={e => {
+          updateData(e.target.checked);
+        }}
+      />
+      background
+    </label>
+  )
+};
+
+export const actionSaveScene: Action = {
+  name: "saveScene",
+  perform: (elements, appState, value) => {
+    saveAsJSON(elements, appState.name);
+    return {};
+  },
+  PanelComponent: ({ updateData }) => (
+    <button onClick={() => updateData(null)}>Save as...</button>
+  )
+};
+
+export const actionLoadScene: Action = {
+  name: "loadScene",
+  perform: (elements, appState, loadedElements) => {
+    return { elements: loadedElements };
+  },
+  PanelComponent: ({ updateData }) => (
+    <button
+      onClick={() => {
+        loadFromJSON().then(({ elements }) => {
+          updateData(elements);
+        });
+      }}
+    >
+      Load file...
+    </button>
+  )
+};