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

Browse source
This commit is contained in:
Ryan Di 2025-03-21 14:12:44 +11:00
parent 2a826f8162
commit ea4f653c44
2 changed files with 50 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

47
packages/excalidraw/components/App.tsx
View file

@ -391,7 +391,11 @@ import {
getMinTextElementWidth,
} from "../element/textMeasurements";
import ShapeSwitch, { shapeSwitchAtom } from "./ShapeSwitch";
import ShapeSwitch, {
GENERIC_SWITCHABLE_SHAPES,
LINEAR_SWITCHABLE_SHAPES,
shapeSwitchAtom,
} from "./ShapeSwitch";
import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
import BraveMeasureTextError from "./BraveMeasureTextError";
@ -4116,25 +4120,29 @@ class App extends React.Component<AppProps, AppState> {
if (event.key === KEYS.ESCAPE) {
editorJotaiStore.set(shapeSwitchAtom, null);
} else if (event.key === KEYS.SLASH || event.key === KEYS.TAB) {
if (editorJotaiStore.get(shapeSwitchAtom) === "panel") {
if (isGenericSwitchable) {
const index = ["rectangle", "diamond", "ellipse"].indexOf(
selectedElements[0].type,
);
const nextType = ["rectangle", "diamond", "ellipse"][
(index + 1) % 3
] as ToolType;
event.preventDefault();
if (editorJotaiStore.get(shapeSwitchAtom)?.type === "panel") {
const index = isGenericSwitchable
? GENERIC_SWITCHABLE_SHAPES.indexOf(selectedElements[0].type)
: LINEAR_SWITCHABLE_SHAPES.indexOf(selectedElements[0].type);
const nextType = (
isGenericSwitchable
? GENERIC_SWITCHABLE_SHAPES[
(index + 1) % GENERIC_SWITCHABLE_SHAPES.length
]
: LINEAR_SWITCHABLE_SHAPES[
(index + 1) % LINEAR_SWITCHABLE_SHAPES.length
]
) as ToolType;
this.setActiveTool({ type: nextType });
} else if (isLinearSwitchable) {
const index = ["arrow", "line"].indexOf(
selectedElements[0].type,
);
const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType;
this.setActiveTool({ type: nextType });
}
}
editorJotaiStore.set(shapeSwitchAtom, "panel");
editorJotaiStore.set(shapeSwitchAtom, {
type: "panel",
});
}
}
@ -4700,7 +4708,10 @@ class App extends React.Component<AppProps, AppState> {
});
}
editorJotaiStore.set(shapeSwitchAtom, "hint");
editorJotaiStore.set(shapeSwitchAtom, {
type: "hint",
id: firstNode.id,
});
}
this.flowChartCreator.clear();

49
packages/excalidraw/components/ShapeSwitch.tsx
View file

@ -31,7 +31,20 @@ import type { ToolType } from "../types";
const GAP_HORIZONTAL = 8;
const GAP_VERTICAL = 10;
export const shapeSwitchAtom = atom<"hint" | "panel" | null>(null);
export const GENERIC_SWITCHABLE_SHAPES = ["rectangle", "diamond", "ellipse"];
export const LINEAR_SWITCHABLE_SHAPES = ["line", "arrow"];
export const shapeSwitchAtom = atom<
| {
type: "hint";
id: string;
}
| {
type: "panel";
}
| null
>(null);
const ShapeSwitch = ({ app }: { app: App }) => {
const [shapeSwitch, setShapeSwitch] = useAtom(shapeSwitchAtom);
@ -46,8 +59,13 @@ const ShapeSwitch = ({ app }: { app: App }) => {
);
const firstElement = selectedElements[0];
if (shapeSwitch.type === "hint" && firstElement.id !== shapeSwitch.id) {
setShapeSwitch(null);
return null;
}
if (firstElement && selectedElements.length === 1) {
switch (shapeSwitch) {
switch (shapeSwitch.type) {
case "hint":
return <Hint app={app} element={firstElement} />;
case "panel":
@ -64,13 +82,6 @@ const ShapeSwitch = ({ app }: { app: App }) => {
const Hint = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
const [, setShapeSwitch] = useAtom(shapeSwitchAtom);
const hintRef = useRef<HTMLDivElement>(null);
const initialElementRef = useRef(element);
useEffect(() => {
if (element !== initialElementRef.current) {
setShapeSwitch(null);
}
}, [element, setShapeSwitch]);
useEffect(() => {
const hint = hintRef.current;
@ -90,10 +101,6 @@ const Hint = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
};
}, [setShapeSwitch]);
if (element !== initialElementRef.current) {
return null;
}
const [x1, y1, , , cx, cy] = getElementAbsoluteCoords(
element,
app.scene.getNonDeletedElementsMap(),
@ -140,22 +147,6 @@ const Hint = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
};
const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
const [shapeSwitch, setShapeSwitch] = useAtom(shapeSwitchAtom);
const isMounted = useRef(true);
useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
requestAnimationFrame(() => {
if (!isMounted.current && shapeSwitch === "panel") {
setShapeSwitch(null);
}
});
};
}, [shapeSwitch, setShapeSwitch]);
const [x1, , , y2, cx, cy] = getElementAbsoluteCoords(
element,
app.scene.getNonDeletedElementsMap(),