mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
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
This commit is contained in:
Gasim Gasimzada
Christopher Chedeau
parent
c253c0b635
commit
f465121f9b
15 changed files with 967 additions and 430 deletions
|
|
@ -2,55 +2,36 @@ import React from "react";
|
|||
import { PanelTools } from "./panels/PanelTools";
|
||||
import { Panel } from "./Panel";
|
||||
import { PanelSelection } from "./panels/PanelSelection";
|
||||
import { PanelColor } from "./panels/PanelColor";
|
||||
import {
|
||||
hasBackground,
|
||||
someElementIsSelected,
|
||||
getSelectedAttribute,
|
||||
hasStroke,
|
||||
hasText,
|
||||
loadFromJSON,
|
||||
saveAsJSON,
|
||||
exportCanvas,
|
||||
deleteSelectedElements
|
||||
exportCanvas
|
||||
} from "../scene";
|
||||
import { ButtonSelect } from "./ButtonSelect";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { redrawTextBoundingBox, isTextElement } from "../element";
|
||||
import { PanelCanvas } from "./panels/PanelCanvas";
|
||||
import { PanelExport } from "./panels/PanelExport";
|
||||
import { ExportType } from "../scene/types";
|
||||
import { AppState } from "../types";
|
||||
import { ActionManager } from "../actions";
|
||||
import { UpdaterFn } from "../actions/types";
|
||||
|
||||
interface SidePanelProps {
|
||||
actionManager: ActionManager;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
onToolChange: (elementType: string) => void;
|
||||
changeProperty: (
|
||||
callback: (element: ExcalidrawElement) => ExcalidrawElement
|
||||
) => void;
|
||||
moveAllLeft: () => void;
|
||||
moveOneLeft: () => void;
|
||||
moveAllRight: () => void;
|
||||
moveOneRight: () => void;
|
||||
onClearCanvas: React.MouseEventHandler;
|
||||
onUpdateAppState: (name: string, value: any) => void;
|
||||
syncActionResult: UpdaterFn;
|
||||
appState: AppState;
|
||||
onUpdateElements: (elements: readonly ExcalidrawElement[]) => void;
|
||||
onToolChange: (elementType: string) => void;
|
||||
canvas: HTMLCanvasElement;
|
||||
}
|
||||
|
||||
export const SidePanel: React.FC<SidePanelProps> = ({
|
||||
actionManager,
|
||||
syncActionResult,
|
||||
elements,
|
||||
onToolChange,
|
||||
changeProperty,
|
||||
moveAllLeft,
|
||||
moveOneLeft,
|
||||
moveAllRight,
|
||||
moveOneRight,
|
||||
onClearCanvas,
|
||||
onUpdateAppState,
|
||||
appState,
|
||||
onUpdateElements,
|
||||
canvas
|
||||
}) => {
|
||||
return (
|
||||
|
|
@ -63,209 +44,101 @@ export const SidePanel: React.FC<SidePanelProps> = ({
|
|||
/>
|
||||
<Panel title="Selection" hide={!someElementIsSelected(elements)}>
|
||||
<PanelSelection
|
||||
onBringForward={moveOneRight}
|
||||
onBringToFront={moveAllRight}
|
||||
onSendBackward={moveOneLeft}
|
||||
onSendToBack={moveAllLeft}
|
||||
actionManager={actionManager}
|
||||
syncActionResult={syncActionResult}
|
||||
elements={elements}
|
||||
appState={appState}
|
||||
/>
|
||||
|
||||
<PanelColor
|
||||
title="Stroke Color"
|
||||
onColorChange={(color: string) => {
|
||||
changeProperty(element => ({
|
||||
...element,
|
||||
strokeColor: color
|
||||
}));
|
||||
onUpdateAppState("currentItemStrokeColor", color);
|
||||
}}
|
||||
colorValue={getSelectedAttribute(
|
||||
elements,
|
||||
element => element.strokeColor
|
||||
)}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeStrokeColor",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
{hasBackground(elements) && (
|
||||
<>
|
||||
<PanelColor
|
||||
title="Background Color"
|
||||
onColorChange={(color: string) => {
|
||||
changeProperty(element => ({
|
||||
...element,
|
||||
backgroundColor: color
|
||||
}));
|
||||
onUpdateAppState("currentItemBackgroundColor", color);
|
||||
}}
|
||||
colorValue={getSelectedAttribute(
|
||||
elements,
|
||||
element => element.backgroundColor
|
||||
)}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeBackgroundColor",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
<h5>Fill</h5>
|
||||
<ButtonSelect
|
||||
options={[
|
||||
{ value: "solid", text: "Solid" },
|
||||
{ value: "hachure", text: "Hachure" },
|
||||
{ value: "cross-hatch", text: "Cross-hatch" }
|
||||
]}
|
||||
value={getSelectedAttribute(
|
||||
elements,
|
||||
element => element.fillStyle
|
||||
)}
|
||||
onChange={value => {
|
||||
changeProperty(element => ({
|
||||
...element,
|
||||
fillStyle: value
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeFillStyle",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasStroke(elements) && (
|
||||
<>
|
||||
<h5>Stroke Width</h5>
|
||||
<ButtonSelect
|
||||
options={[
|
||||
{ value: 1, text: "Thin" },
|
||||
{ value: 2, text: "Bold" },
|
||||
{ value: 4, text: "Extra Bold" }
|
||||
]}
|
||||
value={getSelectedAttribute(
|
||||
elements,
|
||||
element => element.strokeWidth
|
||||
)}
|
||||
onChange={value => {
|
||||
changeProperty(element => ({
|
||||
...element,
|
||||
strokeWidth: value
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeStrokeWidth",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
<h5>Sloppiness</h5>
|
||||
<ButtonSelect
|
||||
options={[
|
||||
{ value: 0, text: "Draftsman" },
|
||||
{ value: 1, text: "Artist" },
|
||||
{ value: 3, text: "Cartoonist" }
|
||||
]}
|
||||
value={getSelectedAttribute(
|
||||
elements,
|
||||
element => element.roughness
|
||||
)}
|
||||
onChange={value =>
|
||||
changeProperty(element => ({
|
||||
...element,
|
||||
roughness: value
|
||||
}))
|
||||
}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeSloppiness",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasText(elements) && (
|
||||
<>
|
||||
<h5>Font size</h5>
|
||||
<ButtonSelect
|
||||
options={[
|
||||
{ value: 16, text: "Small" },
|
||||
{ value: 20, text: "Medium" },
|
||||
{ value: 28, text: "Large" },
|
||||
{ value: 36, text: "Very Large" }
|
||||
]}
|
||||
value={getSelectedAttribute(
|
||||
elements,
|
||||
element =>
|
||||
isTextElement(element) && +element.font.split("px ")[0]
|
||||
)}
|
||||
onChange={value =>
|
||||
changeProperty(element => {
|
||||
if (isTextElement(element)) {
|
||||
element.font = `${value}px ${element.font.split("px ")[1]}`;
|
||||
redrawTextBoundingBox(element);
|
||||
}
|
||||
{actionManager.renderAction(
|
||||
"changeFontSize",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
return element;
|
||||
})
|
||||
}
|
||||
/>
|
||||
<h5>Font familly</h5>
|
||||
<ButtonSelect
|
||||
options={[
|
||||
{ value: "Virgil", text: "Virgil" },
|
||||
{ value: "Helvetica", text: "Helvetica" },
|
||||
{ value: "Courier", text: "Courier" }
|
||||
]}
|
||||
value={getSelectedAttribute(
|
||||
elements,
|
||||
element =>
|
||||
isTextElement(element) && element.font.split("px ")[1]
|
||||
)}
|
||||
onChange={value =>
|
||||
changeProperty(element => {
|
||||
if (isTextElement(element)) {
|
||||
element.font = `${element.font.split("px ")[0]}px ${value}`;
|
||||
redrawTextBoundingBox(element);
|
||||
}
|
||||
|
||||
return element;
|
||||
})
|
||||
}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeFontFamily",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<h5>Opacity</h5>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
onChange={event => {
|
||||
changeProperty(element => ({
|
||||
...element,
|
||||
opacity: +event.target.value
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
getSelectedAttribute(elements, element => element.opacity) ||
|
||||
0 /* Put the opacity at 0 if there are two conflicting ones */
|
||||
}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeOpacity",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
onUpdateElements(deleteSelectedElements(elements));
|
||||
}}
|
||||
>
|
||||
Delete selected
|
||||
</button>
|
||||
{actionManager.renderAction(
|
||||
"deleteSelectedElements",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</Panel>
|
||||
<PanelCanvas
|
||||
onClearCanvas={onClearCanvas}
|
||||
onViewBackgroundColorChange={value => {
|
||||
onUpdateAppState("viewBackgroundColor", value);
|
||||
}}
|
||||
viewBackgroundColor={appState.viewBackgroundColor}
|
||||
actionManager={actionManager}
|
||||
syncActionResult={syncActionResult}
|
||||
elements={elements}
|
||||
appState={appState}
|
||||
/>
|
||||
<PanelExport
|
||||
projectName={appState.name}
|
||||
onProjectNameChange={name => {
|
||||
onUpdateAppState("name", name);
|
||||
}}
|
||||
actionManager={actionManager}
|
||||
syncActionResult={syncActionResult}
|
||||
elements={elements}
|
||||
appState={appState}
|
||||
onExportCanvas={(type: ExportType) =>
|
||||
exportCanvas(type, elements, canvas, appState)
|
||||
}
|
||||
exportBackground={appState.exportBackground}
|
||||
onExportBackgroundChange={value => {
|
||||
onUpdateAppState("exportBackground", value);
|
||||
}}
|
||||
onSaveScene={() => saveAsJSON(elements, appState.name)}
|
||||
onLoadScene={() =>
|
||||
loadFromJSON().then(({ elements }) => {
|
||||
onUpdateElements(elements);
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,33 +1,39 @@
|
|||
import React from "react";
|
||||
|
||||
import { ColorPicker } from "../ColorPicker";
|
||||
import { Panel } from "../Panel";
|
||||
import { ActionManager } from "../../actions";
|
||||
import { ExcalidrawElement } from "../../element/types";
|
||||
import { AppState } from "../../types";
|
||||
import { UpdaterFn } from "../../actions/types";
|
||||
|
||||
interface PanelCanvasProps {
|
||||
viewBackgroundColor: string;
|
||||
onViewBackgroundColorChange: (val: string) => void;
|
||||
onClearCanvas: React.MouseEventHandler;
|
||||
actionManager: ActionManager;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
appState: AppState;
|
||||
syncActionResult: UpdaterFn;
|
||||
}
|
||||
|
||||
export const PanelCanvas: React.FC<PanelCanvasProps> = ({
|
||||
viewBackgroundColor,
|
||||
onViewBackgroundColorChange,
|
||||
onClearCanvas
|
||||
actionManager,
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
}) => {
|
||||
return (
|
||||
<Panel title="Canvas">
|
||||
<h5>Canvas Background Color</h5>
|
||||
<ColorPicker
|
||||
color={viewBackgroundColor}
|
||||
onChange={color => onViewBackgroundColorChange(color)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClearCanvas}
|
||||
title="Clear the canvas & reset background color"
|
||||
>
|
||||
Clear canvas
|
||||
</button>
|
||||
{actionManager.renderAction(
|
||||
"changeViewBackgroundColor",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
{actionManager.renderAction(
|
||||
"clearCanvas",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
import React from "react";
|
||||
import { EditableText } from "../EditableText";
|
||||
import { Panel } from "../Panel";
|
||||
import { ExportType } from "../../scene/types";
|
||||
|
||||
import "./panelExport.scss";
|
||||
import { ActionManager } from "../../actions";
|
||||
import { ExcalidrawElement } from "../../element/types";
|
||||
import { AppState } from "../../types";
|
||||
import { UpdaterFn } from "../../actions/types";
|
||||
|
||||
interface PanelExportProps {
|
||||
projectName: string;
|
||||
onProjectNameChange: (name: string) => void;
|
||||
actionManager: ActionManager;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
appState: AppState;
|
||||
syncActionResult: UpdaterFn;
|
||||
onExportCanvas: (type: ExportType) => void;
|
||||
exportBackground: boolean;
|
||||
onExportBackgroundChange: (val: boolean) => void;
|
||||
onSaveScene: React.MouseEventHandler;
|
||||
onLoadScene: React.MouseEventHandler;
|
||||
}
|
||||
|
||||
// fa-clipboard
|
||||
|
|
@ -32,23 +33,20 @@ const probablySupportsClipboard =
|
|||
"ClipboardItem" in window;
|
||||
|
||||
export const PanelExport: React.FC<PanelExportProps> = ({
|
||||
projectName,
|
||||
exportBackground,
|
||||
onProjectNameChange,
|
||||
onExportBackgroundChange,
|
||||
onSaveScene,
|
||||
onLoadScene,
|
||||
actionManager,
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult,
|
||||
onExportCanvas
|
||||
}) => {
|
||||
return (
|
||||
<Panel title="Export">
|
||||
<div className="panelColumn">
|
||||
<h5>Name</h5>
|
||||
{projectName && (
|
||||
<EditableText
|
||||
value={projectName}
|
||||
onChange={(name: string) => onProjectNameChange(name)}
|
||||
/>
|
||||
{actionManager.renderAction(
|
||||
"changeProjectName",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
<h5>Image</h5>
|
||||
<div className="panelExport-imageButtons">
|
||||
|
|
@ -68,19 +66,26 @@ export const PanelExport: React.FC<PanelExportProps> = ({
|
|||
</button>
|
||||
)}
|
||||
</div>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={exportBackground}
|
||||
onChange={e => {
|
||||
onExportBackgroundChange(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
background
|
||||
</label>
|
||||
{actionManager.renderAction(
|
||||
"changeExportBackground",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
|
||||
<h5>Scene</h5>
|
||||
<button onClick={onSaveScene}>Save as...</button>
|
||||
<button onClick={onLoadScene}>Load file...</button>
|
||||
{actionManager.renderAction(
|
||||
"saveScene",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
{actionManager.renderAction(
|
||||
"loadScene",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,33 +1,49 @@
|
|||
import React from "react";
|
||||
import { ActionManager } from "../../actions";
|
||||
import { ExcalidrawElement } from "../../element/types";
|
||||
import { AppState } from "../../types";
|
||||
import { UpdaterFn } from "../../actions/types";
|
||||
|
||||
interface PanelSelectionProps {
|
||||
onBringForward: React.MouseEventHandler;
|
||||
onBringToFront: React.MouseEventHandler;
|
||||
onSendBackward: React.MouseEventHandler;
|
||||
onSendToBack: React.MouseEventHandler;
|
||||
actionManager: ActionManager;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
appState: AppState;
|
||||
syncActionResult: UpdaterFn;
|
||||
}
|
||||
|
||||
export const PanelSelection: React.FC<PanelSelectionProps> = ({
|
||||
onBringForward,
|
||||
onBringToFront,
|
||||
onSendBackward,
|
||||
onSendToBack
|
||||
actionManager,
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="buttonList">
|
||||
<button type="button" onClick={onBringForward}>
|
||||
Bring forward
|
||||
</button>
|
||||
<button type="button" onClick={onBringToFront}>
|
||||
Bring to front
|
||||
</button>
|
||||
<button type="button" onClick={onSendBackward}>
|
||||
Send backward
|
||||
</button>
|
||||
<button type="button" onClick={onSendToBack}>
|
||||
Send to back
|
||||
</button>
|
||||
{actionManager.renderAction(
|
||||
"bringForward",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
{actionManager.renderAction(
|
||||
"bringToFront",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
{actionManager.renderAction(
|
||||
"sendBackward",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
{actionManager.renderAction(
|
||||
"sendToBack",
|
||||
elements,
|
||||
appState,
|
||||
syncActionResult
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue