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
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { Action } from "./types";
|
|
import {
|
|
moveOneLeft,
|
|
moveOneRight,
|
|
moveAllLeft,
|
|
moveAllRight
|
|
} from "../zindex";
|
|
import { getSelectedIndices } from "../scene";
|
|
import { META_KEY } from "../keys";
|
|
|
|
export const actionSendBackward: Action = {
|
|
name: "sendBackward",
|
|
perform: (elements, appState) => {
|
|
return {
|
|
elements: moveOneLeft([...elements], getSelectedIndices(elements)),
|
|
appState
|
|
};
|
|
},
|
|
contextItemLabel: "Send Backward",
|
|
keyPriority: 40,
|
|
keyTest: event =>
|
|
event[META_KEY] && event.shiftKey && event.altKey && event.code === "KeyB",
|
|
PanelComponent: ({ updateData }) => (
|
|
<button type="button" onClick={e => updateData(null)}>
|
|
Send backward
|
|
</button>
|
|
)
|
|
};
|
|
|
|
export const actionBringForward: Action = {
|
|
name: "bringForward",
|
|
perform: (elements, appState) => {
|
|
return {
|
|
elements: moveOneRight([...elements], getSelectedIndices(elements)),
|
|
appState
|
|
};
|
|
},
|
|
contextItemLabel: "Bring Forward",
|
|
keyPriority: 40,
|
|
keyTest: event =>
|
|
event[META_KEY] && event.shiftKey && event.altKey && event.code === "KeyF",
|
|
PanelComponent: ({ updateData }) => (
|
|
<button type="button" onClick={e => updateData(null)}>
|
|
Bring Forward
|
|
</button>
|
|
)
|
|
};
|
|
|
|
export const actionSendToBack: Action = {
|
|
name: "sendToBack",
|
|
perform: (elements, appState) => {
|
|
return {
|
|
elements: moveAllLeft([...elements], getSelectedIndices(elements)),
|
|
appState
|
|
};
|
|
},
|
|
contextItemLabel: "Send to Back",
|
|
keyTest: event => event[META_KEY] && event.shiftKey && event.code === "KeyB",
|
|
PanelComponent: ({ updateData }) => (
|
|
<button type="button" onClick={e => updateData(null)}>
|
|
Send to Back
|
|
</button>
|
|
)
|
|
};
|
|
|
|
export const actionBringToFront: Action = {
|
|
name: "bringToFront",
|
|
perform: (elements, appState) => {
|
|
return {
|
|
elements: moveAllRight([...elements], getSelectedIndices(elements)),
|
|
appState
|
|
};
|
|
},
|
|
contextItemLabel: "Bring to Front",
|
|
keyTest: event => event[META_KEY] && event.shiftKey && event.code === "KeyF",
|
|
PanelComponent: ({ updateData }) => (
|
|
<button type="button" onClick={e => updateData(null)}>
|
|
Bring to Front
|
|
</button>
|
|
)
|
|
};
|