131 lines
3.3 KiB
TypeScript
131 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Action,
|
|
ActionsManagerInterface,
|
|
UpdaterFn,
|
|
ActionName,
|
|
ActionResult,
|
|
} from "./types";
|
|
import { ExcalidrawElement } from "../element/types";
|
|
import { AppState, ExcalidrawProps } from "../types";
|
|
|
|
// This is the <App> component, but for now we don't care about anything but its
|
|
// `canvas` state.
|
|
type App = { canvas: HTMLCanvasElement | null; props: ExcalidrawProps };
|
|
|
|
export class ActionManager implements ActionsManagerInterface {
|
|
actions = {} as ActionsManagerInterface["actions"];
|
|
|
|
updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
|
|
|
|
getAppState: () => Readonly<AppState>;
|
|
getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
|
|
app: App;
|
|
|
|
constructor(
|
|
updater: UpdaterFn,
|
|
getAppState: () => AppState,
|
|
getElementsIncludingDeleted: () => readonly ExcalidrawElement[],
|
|
app: App,
|
|
) {
|
|
this.updater = (actionResult) => {
|
|
if (actionResult && "then" in actionResult) {
|
|
actionResult.then((actionResult) => {
|
|
return updater(actionResult);
|
|
});
|
|
} else {
|
|
return updater(actionResult);
|
|
}
|
|
};
|
|
this.getAppState = getAppState;
|
|
this.getElementsIncludingDeleted = getElementsIncludingDeleted;
|
|
this.app = app;
|
|
}
|
|
|
|
registerAction(action: Action) {
|
|
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))
|
|
.filter(
|
|
(action) =>
|
|
action.keyTest &&
|
|
action.keyTest(
|
|
event,
|
|
this.getAppState(),
|
|
this.getElementsIncludingDeleted(),
|
|
),
|
|
);
|
|
|
|
if (data.length === 0) {
|
|
return false;
|
|
}
|
|
const { viewModeEnabled } = this.getAppState();
|
|
if (viewModeEnabled) {
|
|
if (data[0].name !== "viewMode") {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
this.updater(
|
|
data[0].perform(
|
|
this.getElementsIncludingDeleted(),
|
|
this.getAppState(),
|
|
null,
|
|
this.app,
|
|
),
|
|
);
|
|
return true;
|
|
}
|
|
|
|
executeAction(action: Action) {
|
|
this.updater(
|
|
action.perform(
|
|
this.getElementsIncludingDeleted(),
|
|
this.getAppState(),
|
|
null,
|
|
this.app,
|
|
),
|
|
);
|
|
}
|
|
|
|
// Id is an attribute that we can use to pass in data like keys.
|
|
// This is needed for dynamically generated action components
|
|
// like the user list. We can use this key to extract more
|
|
// data from app state. This is an alternative to generic prop hell!
|
|
renderAction = (name: ActionName, id?: string) => {
|
|
if (this.actions[name] && "PanelComponent" in this.actions[name]) {
|
|
const action = this.actions[name];
|
|
const PanelComponent = action.PanelComponent!;
|
|
const updateData = (formState?: any) => {
|
|
this.updater(
|
|
action.perform(
|
|
this.getElementsIncludingDeleted(),
|
|
this.getAppState(),
|
|
formState,
|
|
this.app,
|
|
),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PanelComponent
|
|
elements={this.getElementsIncludingDeleted()}
|
|
appState={this.getAppState()}
|
|
updateData={updateData}
|
|
id={id}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
}
|