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/actionStyles.ts

@@ -0,0 +1,50 @@
+import { Action } from "./types";
+import { isTextElement, redrawTextBoundingBox } from "../element";
+import { META_KEY } from "../keys";
+
+let copiedStyles: string = "{}";
+
+export const actionCopyStyles: Action = {
+  name: "copyStyles",
+  perform: elements => {
+    const element = elements.find(el => el.isSelected);
+    if (element) {
+      copiedStyles = JSON.stringify(element);
+    }
+    return {};
+  },
+  contextItemLabel: "Copy Styles",
+  keyTest: event => event[META_KEY] && event.shiftKey && event.code === "KeyC",
+  contextMenuOrder: 0
+};
+
+export const actionPasteStyles: Action = {
+  name: "pasteStyles",
+  perform: elements => {
+    const pastedElement = JSON.parse(copiedStyles);
+    return {
+      elements: elements.map(element => {
+        if (element.isSelected) {
+          const newElement = {
+            ...element,
+            backgroundColor: pastedElement?.backgroundColor,
+            strokeWidth: pastedElement?.strokeWidth,
+            strokeColor: pastedElement?.strokeColor,
+            fillStyle: pastedElement?.fillStyle,
+            opacity: pastedElement?.opacity,
+            roughness: pastedElement?.roughness
+          };
+          if (isTextElement(newElement)) {
+            newElement.font = pastedElement?.font;
+            redrawTextBoundingBox(newElement);
+          }
+          return newElement;
+        }
+        return element;
+      })
+    };
+  },
+  contextItemLabel: "Paste Styles",
+  keyTest: event => event[META_KEY] && event.shiftKey && event.code === "KeyV",
+  contextMenuOrder: 1
+};