diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index fdb31f72..87214b32 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -145,6 +145,7 @@ const changeFontSize = ( elements: readonly ExcalidrawElement[], appState: AppState, getNewFontSize: (element: ExcalidrawTextElement) => number, + fallbackValue?: ExcalidrawTextElement["fontSize"], ) => { const newFontSizes = new Set(); @@ -182,7 +183,7 @@ const changeFontSize = ( currentItemFontSize: newFontSizes.size === 1 ? [...newFontSizes][0] - : appState.currentItemFontSize, + : fallbackValue ?? appState.currentItemFontSize, }, commitToHistory: true, }; @@ -520,7 +521,7 @@ export const actionChangeOpacity = register({ export const actionChangeFontSize = register({ name: "changeFontSize", perform: (elements, appState, value) => { - return changeFontSize(elements, appState, () => value); + return changeFontSize(elements, appState, () => value, value); }, PanelComponent: ({ elements, appState, updateData }) => (
@@ -532,21 +533,25 @@ export const actionChangeFontSize = register({ value: 16, text: t("labels.small"), icon: , + testId: "fontSize-small", }, { value: 20, text: t("labels.medium"), icon: , + testId: "fontSize-medium", }, { value: 28, text: t("labels.large"), icon: , + testId: "fontSize-large", }, { value: 36, text: t("labels.veryLarge"), icon: , + testId: "fontSize-veryLarge", }, ]} value={getFormValue( diff --git a/src/components/ButtonIconSelect.tsx b/src/components/ButtonIconSelect.tsx index 53e14591..899ec150 100644 --- a/src/components/ButtonIconSelect.tsx +++ b/src/components/ButtonIconSelect.tsx @@ -7,7 +7,7 @@ export const ButtonIconSelect = ({ onChange, group, }: { - options: { value: T; text: string; icon: JSX.Element }[]; + options: { value: T; text: string; icon: JSX.Element; testId?: string }[]; value: T | null; onChange: (value: T) => void; group: string; @@ -24,6 +24,7 @@ export const ButtonIconSelect = ({ name={group} onChange={() => onChange(option.value)} checked={value === option.value} + data-testid={option.testId} /> {option.icon} diff --git a/src/tests/appState.test.tsx b/src/tests/appState.test.tsx index c3d3aaed..aa592492 100644 --- a/src/tests/appState.test.tsx +++ b/src/tests/appState.test.tsx @@ -1,8 +1,10 @@ -import { render, waitFor } from "./test-utils"; +import { queryByTestId, render, waitFor } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { API } from "./helpers/api"; import { getDefaultAppState } from "../appState"; import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants"; +import { Pointer, UI } from "./helpers/ui"; +import { ExcalidrawTextElement } from "../element/types"; const { h } = window; @@ -48,4 +50,26 @@ describe("appState", () => { expect(h.state.viewBackgroundColor).toBe("#000"); }); }); + + it("changing fontSize with text tool selected (no element created yet)", async () => { + const { container } = await render(, { + localStorageData: { + appState: { + currentItemFontSize: 30, + }, + }, + }); + + UI.clickTool("text"); + + expect(h.state.currentItemFontSize).toBe(30); + queryByTestId(container, "fontSize-small")!.click(); + expect(h.state.currentItemFontSize).toBe(16); + + const mouse = new Pointer("mouse"); + + mouse.clickAt(100, 100); + + expect((h.elements[0] as ExcalidrawTextElement).fontSize).toBe(16); + }); });