f465121f9b
* 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
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
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
|
|
};
|