Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Replace the useSubtypes selection hook with a generic useSubtype hook

Browse Source
This commit is contained in:
Daniel J. Geiger 2023-09-23 15:54:27 -05:00
parent ec26aeead2
commit ef0fcc1537
4 changed files with 22 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
excalidraw-app/index.tsx
View File

@ -5,7 +5,7 @@ import { trackEvent } from "../src/analytics";
import { getDefaultAppState } from "../src/appState"; import { getDefaultAppState } from "../src/appState";
import { ErrorDialog } from "../src/components/ErrorDialog"; import { ErrorDialog } from "../src/components/ErrorDialog";
import { TopErrorBoundary } from "../src/components/TopErrorBoundary"; import { TopErrorBoundary } from "../src/components/TopErrorBoundary";
import { useSubtypes } from "../src/element/subtypes/use"; import { useMathSubtype } from "../src/element/subtypes/mathjax";
import { import {
APP_NAME, APP_NAME,
EVENT, EVENT,
@ -304,7 +304,7 @@ const ExcalidrawWrapper = () => {
const [excalidrawAPI, excalidrawRefCallback] = const [excalidrawAPI, excalidrawRefCallback] =
useCallbackRefState<ExcalidrawImperativeAPI>(); useCallbackRefState<ExcalidrawImperativeAPI>();
useSubtypes(excalidrawAPI); useMathSubtype(excalidrawAPI);
const [collabAPI] = useAtom(collabAPIAtom); const [collabAPI] = useAtom(collabAPIAtom);
const [, setCollabDialogShown] = useAtom(collabDialogShownAtom); const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);

18
src/element/subtypes/index.ts
View File

@ -1,7 +1,8 @@
import { useEffect } from "react";
import { ExcalidrawElement, ExcalidrawTextElement, NonDeleted } from "../types"; import { ExcalidrawElement, ExcalidrawTextElement, NonDeleted } from "../types";
import { getNonDeletedElements } from "../"; import { getNonDeletedElements } from "../";
import { getSelectedElements } from "../../scene"; import { getSelectedElements } from "../../scene";
import { AppState } from "../../types"; import { AppState, ExcalidrawImperativeAPI } from "../../types";
import { registerAuxLangData } from "../../i18n"; import { registerAuxLangData } from "../../i18n";
import { Action, ActionName, ActionPredicateFn } from "../../actions/types"; import { Action, ActionName, ActionPredicateFn } from "../../actions/types";
@ -472,3 +473,18 @@ export const checkRefreshOnSubtypeLoad = (
scenes.forEach((scene) => scene.informMutation()); scenes.forEach((scene) => scene.informMutation());
return refreshNeeded; return refreshNeeded;
}; };
export const useSubtype = (
api: ExcalidrawImperativeAPI | null,
record: SubtypeRecord,
subtypePrepFn: SubtypePrepFn,
) => {
useEffect(() => {
if (api) {
const prep = api.addSubtype(record, subtypePrepFn);
if (prep) {
addSubtypeMethods(record.subtype, prep.methods);
}
}
}, [api, record, subtypePrepFn]);
};

24
src/element/subtypes/mathjax/index.ts
View File

@ -1,6 +1,5 @@
import { useEffect } from "react";
import { ExcalidrawImperativeAPI } from "../../../types"; import { ExcalidrawImperativeAPI } from "../../../types";
import { addSubtypeMethods } from "../"; import { useSubtype } from "../";
import { getMathSubtypeRecord } from "./types"; import { getMathSubtypeRecord } from "./types";
import { prepareMathSubtype } from "./implementation"; import { prepareMathSubtype } from "./implementation";
@ -10,24 +9,7 @@ declare global {
} }
} }
export const MathJaxSubtype = "mathjax";
// The main hook to use the MathJax subtype // The main hook to use the MathJax subtype
export const useMathJaxSubtype = (api: ExcalidrawImperativeAPI | null) => { export const useMathSubtype = (api: ExcalidrawImperativeAPI | null) => {
const enabled = mathJaxEnabled; useSubtype(api, getMathSubtypeRecord(), prepareMathSubtype);
useEffect(() => {
if (enabled && api) {
const prep = api.addSubtype(getMathSubtypeRecord(), prepareMathSubtype);
if (prep) {
addSubtypeMethods(getMathSubtypeRecord().subtype, prep.methods);
}
}
}, [enabled, api]);
};
// Determine whether or not to do anything in `useMathJaxSubtype`
let mathJaxEnabled = false;
export const setMathJaxSubtypeEnabled = (enabled: boolean) => {
mathJaxEnabled = enabled;
}; };

43
src/element/subtypes/use.ts
View File

@ -1,43 +0,0 @@
import { Subtype } from ".";
import { ExcalidrawImperativeAPI } from "../../types";
import {
MathJaxSubtype,
setMathJaxSubtypeEnabled,
useMathJaxSubtype,
} from "./mathjax";
const validSubtypes: readonly Subtype[] = [MathJaxSubtype];
const subtypesUsed: Subtype[] = [];
// The main invocation hook for use in the UI
export const useSubtypes = (
api: ExcalidrawImperativeAPI | null,
subtypes?: Subtype[],
) => {
selectSubtypesToEnable(subtypes);
useMathJaxSubtype(api);
// Put calls like `useThisSubtype(api);` here
};
// This MUST be called before the `useSubtype` calls.
const selectSubtypesToEnable = (subtypes?: Subtype[]) => {
const subtypeList: Subtype[] = [];
if (subtypes === undefined) {
subtypeList.push(...validSubtypes);
} else {
subtypes.forEach(
(val) => validSubtypes.includes(val) && subtypeList.push(val),
);
}
while (subtypesUsed.length > 0) {
subtypesUsed.pop();
}
subtypesUsed.push(...subtypeList);
enableSelectedSubtypes();
};
const enableSelectedSubtypes = () => {
setMathJaxSubtypeEnabled(subtypesUsed.includes(MathJaxSubtype));
// Put lines here like
// `setThisSubtypeEnabled(subtypesUsed.includes(ThisSubtype));`
};