diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index bc3604046..a6489ce3b 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -395,6 +395,7 @@ import ShapeSwitch, { GENERIC_SWITCHABLE_SHAPES, LINEAR_SWITCHABLE_SHAPES, shapeSwitchAtom, + shapeSwitchFontSizeAtom, } from "./ShapeSwitch"; import { activeConfirmDialogAtom } from "./ActiveConfirmDialog"; @@ -4143,6 +4144,18 @@ class App extends React.Component { editorJotaiStore.set(shapeSwitchAtom, { type: "panel", }); + if (!editorJotaiStore.get(shapeSwitchFontSizeAtom)) { + const boundText = getBoundTextElement( + firstElement, + this.scene.getNonDeletedElementsMap(), + ); + if (boundText && isGenericSwitchable) { + editorJotaiStore.set(shapeSwitchFontSizeAtom, { + fontSize: boundText.fontSize, + elementType: firstElement.type, + }); + } + } } } @@ -4829,7 +4842,26 @@ class App extends React.Component { : firstElement.roundness, }); - if (firstElement.boundElements?.some((e) => e.type === "text")) { + const boundText = getBoundTextElement( + firstElement, + this.scene.getNonDeletedElementsMap(), + ); + if (boundText) { + if ( + editorJotaiStore.get(shapeSwitchFontSizeAtom)?.elementType === + tool.type + ) { + mutateElement( + boundText, + { + fontSize: + editorJotaiStore.get(shapeSwitchFontSizeAtom)?.fontSize ?? + boundText.fontSize, + }, + false, + ); + } + this.startTextEditing({ sceneX: firstElement.x + firstElement.width / 2, sceneY: firstElement.y + firstElement.height / 2, diff --git a/packages/excalidraw/components/ShapeSwitch.tsx b/packages/excalidraw/components/ShapeSwitch.tsx index 0ffd4a12c..6444754ee 100644 --- a/packages/excalidraw/components/ShapeSwitch.tsx +++ b/packages/excalidraw/components/ShapeSwitch.tsx @@ -45,11 +45,18 @@ export const shapeSwitchAtom = atom< } | null >(null); +export const shapeSwitchFontSizeAtom = atom<{ + fontSize: number; + elementType: "rectangle" | "diamond" | "ellipse"; +} | null>(null); const ShapeSwitch = ({ app }: { app: App }) => { const [shapeSwitch, setShapeSwitch] = useAtom(shapeSwitchAtom); + const [, setShapeSwitchFontSize] = useAtom(shapeSwitchFontSizeAtom); + // clear if not active if (!shapeSwitch) { + setShapeSwitchFontSize(null); return null; } @@ -59,24 +66,29 @@ const ShapeSwitch = ({ app }: { app: App }) => { ); const firstElement = selectedElements[0]; - if (shapeSwitch.type === "hint" && firstElement.id !== shapeSwitch.id) { + const isSingleSelected = firstElement && selectedElements.length === 1; + + // clear if hint target no longer matches + if (shapeSwitch.type === "hint" && firstElement?.id !== shapeSwitch.id) { setShapeSwitch(null); return null; } - if (firstElement && selectedElements.length === 1) { - switch (shapeSwitch.type) { - case "hint": - return ; - case "panel": - return ; - default: - return null; - } + if (!isSingleSelected) { + setShapeSwitch(null); + return null; } - setShapeSwitch(null); - return null; + const props = { app, element: firstElement }; + + switch (shapeSwitch.type) { + case "hint": + return ; + case "panel": + return ; + default: + return null; + } }; const Hint = ({ app, element }: { app: App; element: ExcalidrawElement }) => {