smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor (#862)

Browse source 
* Initial factoring out of parts of the LayerUI component

2360 → 2224 LOC

* Create a Section component

* Break up src/index.tsx

* Refactor actions to reduce duplication, fix CSS

Also consolidate icons

* Move scene/data.ts to its own directory

* Fix accidental reverts, banish further single-character variables

* ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR

* Further refactoring the icons file

* Log all errors

* Pointer Event polyfill to make the tests work

* add test hooks & fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Jed Fox 2020-03-07 10:20:38 -05:00 • committed by GitHub
parent 1a6431a04a
commit c6a0cfc2b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 3498 additions and 3372 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/actions/actionCanvas.tsx
View file

@ -1,5 +1,4 @@
import React from "react";
import { Action } from "./types";
import { ColorPicker } from "../components/ColorPicker";
import { getDefaultAppState } from "../appState";
import { trash, zoomIn, zoomOut, resetZoom } from "../components/icons";
@ -8,8 +7,9 @@ import { t } from "../i18n";
import { getNormalizedZoom } from "../scene";
import { KEYS } from "../keys";
import useIsMobile from "../is-mobile";
import { register } from "./register";
export const actionChangeViewBackgroundColor: Action = {
export const actionChangeViewBackgroundColor = register({
name: "changeViewBackgroundColor",
perform: (_, appState, value) => {
return { appState: { ...appState, viewBackgroundColor: value } };
@ -27,9 +27,9 @@ export const actionChangeViewBackgroundColor: Action = {
);
},
commitToHistory: () => true,
};
});
export const actionClearCanvas: Action = {
export const actionClearCanvas = register({
name: "clearCanvas",
commitToHistory: () => true,
perform: () => {
@ -56,7 +56,7 @@ export const actionClearCanvas: Action = {
}}
/>
),
};
});
const ZOOM_STEP = 0.1;
@ -69,9 +69,9 @@ const KEY_CODES = {
NUM_ZERO: "Numpad0",
};
export const actionZoomIn: Action = {
export const actionZoomIn = register({
name: "zoomIn",
perform: (elements, appState) => {
perform: (_elements, appState) => {
return {
appState: {
...appState,
@ -93,11 +93,11 @@ export const actionZoomIn: Action = {
keyTest: event =>
(event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) &&
(event[KEYS.META] || event.shiftKey),
};
});
export const actionZoomOut: Action = {
export const actionZoomOut = register({
name: "zoomOut",
perform: (elements, appState) => {
perform: (_elements, appState) => {
return {
appState: {
...appState,
@ -119,11 +119,11 @@ export const actionZoomOut: Action = {
keyTest: event =>
(event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) &&
(event[KEYS.META] || event.shiftKey),
};
});
export const actionResetZoom: Action = {
export const actionResetZoom = register({
name: "resetZoom",
perform: (elements, appState) => {
perform: (_elements, appState) => {
return {
appState: {
...appState,
@ -145,4 +145,4 @@ export const actionResetZoom: Action = {
keyTest: event =>
(event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
(event[KEYS.META] || event.shiftKey),
};
});

6
src/actions/actionDeleteSelected.tsx
View file

@ -1,12 +1,12 @@
import { Action } from "./types";
import { deleteSelectedElements, isSomeElementSelected } from "../scene";
import { KEYS } from "../keys";
import { ToolButton } from "../components/ToolButton";
import React from "react";
import { trash } from "../components/icons";
import { t } from "../i18n";
import { register } from "./register";
export const actionDeleteSelected: Action = {
export const actionDeleteSelected = register({
name: "deleteSelectedElements",
perform: (elements, appState) => {
return {
@ -28,4 +28,4 @@ export const actionDeleteSelected: Action = {
visible={isSomeElementSelected(elements)}
/>
),
};
});

24
src/actions/actionExport.tsx
View file

@ -1,15 +1,15 @@
import React from "react";
import { Action } from "./types";
import { ProjectName } from "../components/ProjectName";
import { saveAsJSON, loadFromJSON } from "../scene";
import { saveAsJSON, loadFromJSON } from "../data";
import { load, save } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import useIsMobile from "../is-mobile";
import { register } from "./register";
export const actionChangeProjectName: Action = {
export const actionChangeProjectName = register({
name: "changeProjectName",
perform: (elements, appState, value) => {
perform: (_elements, appState, value) => {
return { appState: { ...appState, name: value } };
},
PanelComponent: ({ appState, updateData }) => (
@ -19,11 +19,11 @@ export const actionChangeProjectName: Action = {
onChange={(name: string) => updateData(name)}
/>
),
};
});
export const actionChangeExportBackground: Action = {
export const actionChangeExportBackground = register({
name: "changeExportBackground",
perform: (elements, appState, value) => {
perform: (_elements, appState, value) => {
return { appState: { ...appState, exportBackground: value } };
},
PanelComponent: ({ appState, updateData }) => (
@ -36,9 +36,9 @@ export const actionChangeExportBackground: Action = {
{t("labels.withBackground")}
</label>
),
};
});
export const actionSaveScene: Action = {
export const actionSaveScene = register({
name: "saveScene",
perform: (elements, appState, value) => {
saveAsJSON(elements, appState).catch(error => console.error(error));
@ -54,9 +54,9 @@ export const actionSaveScene: Action = {
onClick={() => updateData(null)}
/>
),
};
});
export const actionLoadScene: Action = {
export const actionLoadScene = register({
name: "loadScene",
perform: (
elements,
@ -81,4 +81,4 @@ export const actionLoadScene: Action = {
}}
/>
),
};
});

6
src/actions/actionFinalize.tsx
View file

@ -1,4 +1,3 @@
import { Action } from "./types";
import { KEYS } from "../keys";
import { clearSelection } from "../scene";
import { isInvisiblySmallElement } from "../element";
@ -7,8 +6,9 @@ import React from "react";
import { ToolButton } from "../components/ToolButton";
import { done } from "../components/icons";
import { t } from "../i18n";
import { register } from "./register";
export const actionFinalize: Action = {
export const actionFinalize = register({
name: "finalize",
perform: (elements, appState) => {
let newElements = clearSelection(elements);
@ -63,4 +63,4 @@ export const actionFinalize: Action = {
visible={appState.multiElement != null}
/>
),
};
});

57
src/actions/actionHistory.tsx
View file

@ -10,33 +10,36 @@ import { KEYS } from "../keys";
const writeData = (
appState: AppState,
data: { elements: ExcalidrawElement[]; appState: AppState } | null,
updater: () => { elements: ExcalidrawElement[]; appState: AppState } | null,
) => {
if (data !== null) {
return {
elements: data.elements,
appState: { ...appState, ...data.appState },
};
}
return {};
};
const testUndo = (shift: boolean) => (
event: KeyboardEvent,
appState: AppState,
) => event[KEYS.META] && /z/i.test(event.key) && event.shiftKey === shift;
export const createUndoAction: (h: SceneHistory) => Action = history => ({
name: "undo",
perform: (_, appState) =>
if (
[
appState.multiElement,
appState.resizingElement,
appState.editingElement,
appState.draggingElement,
].every(x => x === null)
? writeData(appState, history.undoOnce())
: {},
].some(Boolean)
) {
const data = updater();
return data === null
? {}
: {
elements: data.elements,
appState: { ...appState, ...data.appState },
};
}
return {};
};
const testUndo = (shift: boolean) => (event: KeyboardEvent) =>
event[KEYS.META] && /z/i.test(event.key) && event.shiftKey === shift;
type ActionCreator = (history: SceneHistory) => Action;
export const createUndoAction: ActionCreator = history => ({
name: "undo",
perform: (_, appState) => writeData(appState, () => history.undoOnce()),
keyTest: testUndo(false),
PanelComponent: ({ updateData }) => (
<ToolButton
@ -49,17 +52,9 @@ export const createUndoAction: (h: SceneHistory) => Action = history => ({
commitToHistory: () => false,
});
export const createRedoAction: (h: SceneHistory) => Action = history => ({
export const createRedoAction: ActionCreator = history => ({
name: "redo",
perform: (_, appState) =>
[
appState.multiElement,
appState.resizingElement,
appState.editingElement,
appState.draggingElement,
].every(x => x === null)
? writeData(appState, history.redoOnce())
: {},
perform: (_, appState) => writeData(appState, () => history.redoOnce()),
keyTest: testUndo(true),
PanelComponent: ({ updateData }) => (
<ToolButton

10
src/actions/actionMenu.tsx
View file

@ -1,11 +1,11 @@
import { Action } from "./types";
import React from "react";
import { menu, palette } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { showSelectedShapeActions } from "../element";
import { register } from "./register";
export const actionToggleCanvasMenu: Action = {
export const actionToggleCanvasMenu = register({
name: "toggleCanvasMenu",
perform: (_, appState) => ({
appState: {
@ -22,9 +22,9 @@ export const actionToggleCanvasMenu: Action = {
selected={appState.openMenu === "canvas"}
/>
),
};
});
export const actionToggleEditMenu: Action = {
export const actionToggleEditMenu = register({
name: "toggleEditMenu",
perform: (_elements, appState) => ({
appState: {
@ -42,4 +42,4 @@ export const actionToggleEditMenu: Action = {
selected={appState.openMenu === "shape"}
/>
),
};
});

34
src/actions/actionProperties.tsx
View file

@ -1,5 +1,4 @@
import React from "react";
import { Action } from "./types";
import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
import {
getCommonAttributeOfSelectedElements,
@ -11,6 +10,7 @@ import { ColorPicker } from "../components/ColorPicker";
import { AppState } from "../../src/types";
import { t } from "../i18n";
import { DEFAULT_FONT } from "../appState";
import { register } from "./register";
const changeProperty = (
elements: readonly ExcalidrawElement[],
@ -39,7 +39,7 @@ const getFormValue = function<T>(
);
};
export const actionChangeStrokeColor: Action = {
export const actionChangeStrokeColor = register({
name: "changeStrokeColor",
perform: (elements, appState, value) => {
return {
@ -68,9 +68,9 @@ export const actionChangeStrokeColor: Action = {
/>
</>
),
};
});
export const actionChangeBackgroundColor: Action = {
export const actionChangeBackgroundColor = register({
name: "changeBackgroundColor",
perform: (elements, appState, value) => {
return {
@ -99,9 +99,9 @@ export const actionChangeBackgroundColor: Action = {
/>
</>
),
};
});
export const actionChangeFillStyle: Action = {
export const actionChangeFillStyle = register({
name: "changeFillStyle",
perform: (elements, appState, value) => {
return {
@ -136,9 +136,9 @@ export const actionChangeFillStyle: Action = {
/>
</fieldset>
),
};
});
export const actionChangeStrokeWidth: Action = {
export const actionChangeStrokeWidth = register({
name: "changeStrokeWidth",
perform: (elements, appState, value) => {
return {
@ -171,9 +171,9 @@ export const actionChangeStrokeWidth: Action = {
/>
</fieldset>
),
};
});
export const actionChangeSloppiness: Action = {
export const actionChangeSloppiness = register({
name: "changeSloppiness",
perform: (elements, appState, value) => {
return {
@ -206,9 +206,9 @@ export const actionChangeSloppiness: Action = {
/>
</fieldset>
),
};
});
export const actionChangeOpacity: Action = {
export const actionChangeOpacity = register({
name: "changeOpacity",
perform: (elements, appState, value) => {
return {
@ -255,9 +255,9 @@ export const actionChangeOpacity: Action = {
/>
</label>
),
};
});
export const actionChangeFontSize: Action = {
export const actionChangeFontSize = register({
name: "changeFontSize",
perform: (elements, appState, value) => {
return {
@ -304,9 +304,9 @@ export const actionChangeFontSize: Action = {
/>
</fieldset>
),
};
});
export const actionChangeFontFamily: Action = {
export const actionChangeFontFamily = register({
name: "changeFontFamily",
perform: (elements, appState, value) => {
return {
@ -352,4 +352,4 @@ export const actionChangeFontFamily: Action = {
/>
</fieldset>
),
};
});

6
src/actions/actionSelectAll.ts
View file

@ -1,7 +1,7 @@
import { Action } from "./types";
import { KEYS } from "../keys";
import { register } from "./register";
export const actionSelectAll: Action = {
export const actionSelectAll = register({
name: "selectAll",
perform: elements => {
return {
@ -10,4 +10,4 @@ export const actionSelectAll: Action = {
},
contextItemLabel: "labels.selectAll",
keyTest: event => event[KEYS.META] && event.key === "a",
};
});

10
src/actions/actionStyles.ts
View file

@ -1,4 +1,3 @@
import { Action } from "./types";
import {
isTextElement,
isExcalidrawElement,
@ -6,10 +5,11 @@ import {
} from "../element";
import { KEYS } from "../keys";
import { DEFAULT_FONT } from "../appState";
import { register } from "./register";
let copiedStyles: string = "{}";
export const actionCopyStyles: Action = {
export const actionCopyStyles = register({
name: "copyStyles",
perform: elements => {
const element = elements.find(el => el.isSelected);
@ -21,9 +21,9 @@ export const actionCopyStyles: Action = {
contextItemLabel: "labels.copyStyles",
keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "C",
contextMenuOrder: 0,
};
});
export const actionPasteStyles: Action = {
export const actionPasteStyles = register({
name: "pasteStyles",
perform: elements => {
const pastedElement = JSON.parse(copiedStyles);
@ -57,4 +57,4 @@ export const actionPasteStyles: Action = {
contextItemLabel: "labels.pasteStyles",
keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "V",
contextMenuOrder: 1,
};
});

103
src/actions/actionZindex.tsx
View file

@ -1,5 +1,4 @@
import React from "react";
import { Action } from "./types";
import {
moveOneLeft,
moveOneRight,
@ -9,73 +8,15 @@ import {
import { getSelectedIndices } from "../scene";
import { KEYS } from "../keys";
import { t } from "../i18n";
import { register } from "./register";
import {
sendBackward,
bringToFront,
sendToBack,
bringForward,
} from "../components/icons";
const ACTIVE_ELEM_COLOR = "#ffa94d"; // OC ORANGE 4
const ICONS = {
bringForward: (
<svg viewBox="0 0 24 24">
<path
d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
stroke="#000"
strokeWidth="2"
/>
<path
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
</svg>
),
sendBackward: (
<svg viewBox="0 0 24 24">
<path
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
<path
d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
stroke="#000"
strokeWidth="2"
/>
</svg>
),
bringToFront: (
<svg viewBox="0 0 24 24">
<path
d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
stroke="#000"
strokeWidth="2"
/>
<path
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
</svg>
),
sendToBack: (
<svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
<path
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
<path
d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
stroke="#000"
strokeWidth="2"
/>
</svg>
),
};
export const actionSendBackward: Action = {
export const actionSendBackward = register({
name: "sendBackward",
perform: (elements, appState) => {
return {
@ -91,15 +32,15 @@ export const actionSendBackward: Action = {
<button
type="button"
className="zIndexButton"
onClick={event => updateData(null)}
onClick={() => updateData(null)}
title={t("labels.sendBackward")}
>
{ICONS.sendBackward}
{sendBackward}
</button>
),
};
});
export const actionBringForward: Action = {
export const actionBringForward = register({
name: "bringForward",
perform: (elements, appState) => {
return {
@ -115,15 +56,15 @@ export const actionBringForward: Action = {
<button
type="button"
className="zIndexButton"
onClick={event => updateData(null)}
onClick={() => updateData(null)}
title={t("labels.bringForward")}
>
{ICONS.bringForward}
{bringForward}
</button>
),
};
});
export const actionSendToBack: Action = {
export const actionSendToBack = register({
name: "sendToBack",
perform: (elements, appState) => {
return {
@ -138,15 +79,15 @@ export const actionSendToBack: Action = {
<button
type="button"
className="zIndexButton"
onClick={event => updateData(null)}
onClick={() => updateData(null)}
title={t("labels.sendToBack")}
>
{ICONS.sendToBack}
{sendToBack}
</button>
),
};
});
export const actionBringToFront: Action = {
export const actionBringToFront = register({
name: "bringToFront",
perform: (elements, appState) => {
return {
@ -164,7 +105,7 @@ export const actionBringToFront: Action = {
onClick={event => updateData(null)}
title={t("labels.bringToFront")}
>
{ICONS.bringToFront}
{bringToFront}
</button>
),
};
});

1
src/actions/index.ts
View file

@ -1,4 +1,3 @@
export { ActionManager } from "./manager";
export { actionDeleteSelected } from "./actionDeleteSelected";
export {
actionBringForward,

8
src/actions/manager.tsx
View file

@ -32,6 +32,10 @@ export class ActionManager implements ActionsManagerInterface {
this.actions[action.name] = action;
}
registerAll(actions: readonly Action[]) {
actions.forEach(action => this.registerAction(action));
}
handleKeyDown(event: KeyboardEvent) {
const data = Object.values(this.actions)
.sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0))
@ -79,7 +83,7 @@ export class ActionManager implements ActionsManagerInterface {
}));
}
renderAction(name: string) {
renderAction = (name: string) => {
if (this.actions[name] && "PanelComponent" in this.actions[name]) {
const action = this.actions[name];
const PanelComponent = action.PanelComponent!;
@ -103,5 +107,5 @@ export class ActionManager implements ActionsManagerInterface {
}
return null;
}
};
}

8
src/actions/register.ts Normal file
View file

@ -0,0 +1,8 @@
import { Action } from "./types";
export let actions: readonly Action[] = [];
export function register(action: Action): Action {
actions = actions.concat(action);
return action;
}