From d7105072839019632212d6863a29d0e359b04020 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 30 Jan 2024 13:08:53 +0530 Subject: [PATCH] move actionChangeFontSize as well --- .../actions/actionChangeFontSize.tsx | 84 +++++++++++++++++++ .../actions/actionDecreaseFontSize.ts | 26 ++++++ .../actions/actionIncreaseFontSize.ts | 21 +++++ .../excalidraw/actions/actionProperties.tsx | 70 ---------------- packages/excalidraw/actions/index.ts | 10 +-- .../actions/{actionFontSize.ts => utils.ts} | 49 +---------- packages/excalidraw/element/textWysiwyg.tsx | 6 +- 7 files changed, 142 insertions(+), 124 deletions(-) create mode 100644 packages/excalidraw/actions/actionChangeFontSize.tsx create mode 100644 packages/excalidraw/actions/actionDecreaseFontSize.ts create mode 100644 packages/excalidraw/actions/actionIncreaseFontSize.ts rename packages/excalidraw/actions/{actionFontSize.ts => utils.ts} (61%) diff --git a/packages/excalidraw/actions/actionChangeFontSize.tsx b/packages/excalidraw/actions/actionChangeFontSize.tsx new file mode 100644 index 000000000..e521b2108 --- /dev/null +++ b/packages/excalidraw/actions/actionChangeFontSize.tsx @@ -0,0 +1,84 @@ +import { ButtonIconSelect } from "../components/ButtonIconSelect"; +import { + FontSizeExtraLargeIcon, + FontSizeLargeIcon, + FontSizeMediumIcon, + FontSizeSmallIcon, +} from "../components/icons"; +import { DEFAULT_FONT_SIZE } from "../constants"; +import { isTextElement } from "../element"; +import { getBoundTextElement } from "../element/textElement"; +import { t } from "../i18n"; +import { changeFontSize } from "./utils"; +import { getFormValue } from "./actionProperties"; +import { register } from "./register"; + +export const actionChangeFontSize = register({ + name: "changeFontSize", + trackEvent: false, + perform: (elements, appState, value, app) => { + return changeFontSize(elements, appState, app, () => value, value); + }, + PanelComponent: ({ elements, appState, updateData, app }) => ( +
+ {t("labels.fontSize")} + { + if (isTextElement(element)) { + return element.fontSize; + } + const boundTextElement = getBoundTextElement( + element, + app.scene.getNonDeletedElementsMap(), + ); + if (boundTextElement) { + return boundTextElement.fontSize; + } + return null; + }, + (element) => + isTextElement(element) || + getBoundTextElement( + element, + app.scene.getNonDeletedElementsMap(), + ) !== null, + (hasSelection) => + hasSelection + ? null + : appState.currentItemFontSize || DEFAULT_FONT_SIZE, + )} + onChange={(value) => updateData(value)} + /> +
+ ), +}); diff --git a/packages/excalidraw/actions/actionDecreaseFontSize.ts b/packages/excalidraw/actions/actionDecreaseFontSize.ts new file mode 100644 index 000000000..668567e81 --- /dev/null +++ b/packages/excalidraw/actions/actionDecreaseFontSize.ts @@ -0,0 +1,26 @@ +import { KEYS } from "../keys"; + +import { register } from "./register"; +import { changeFontSize, FONT_SIZE_RELATIVE_INCREASE_STEP } from "./utils"; + +export const actionDecreaseFontSize = register({ + name: "decreaseFontSize", + trackEvent: false, + perform: (elements, appState, value, app) => { + return changeFontSize(elements, appState, app, (element) => + Math.round( + // get previous value before relative increase (doesn't work fully + // due to rounding and float precision issues) + (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize, + ), + ); + }, + keyTest: (event) => { + return ( + event[KEYS.CTRL_OR_CMD] && + event.shiftKey && + // KEYS.COMMA needed for MacOS + (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA) + ); + }, +}); diff --git a/packages/excalidraw/actions/actionIncreaseFontSize.ts b/packages/excalidraw/actions/actionIncreaseFontSize.ts new file mode 100644 index 000000000..39f6766ec --- /dev/null +++ b/packages/excalidraw/actions/actionIncreaseFontSize.ts @@ -0,0 +1,21 @@ +import { KEYS } from "../keys"; +import { register } from "./register"; +import { changeFontSize, FONT_SIZE_RELATIVE_INCREASE_STEP } from "./utils"; + +export const actionIncreaseFontSize = register({ + name: "increaseFontSize", + trackEvent: false, + perform: (elements, appState, value, app) => { + return changeFontSize(elements, appState, app, (element) => + Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)), + ); + }, + keyTest: (event) => { + return ( + event[KEYS.CTRL_OR_CMD] && + event.shiftKey && + // KEYS.PERIOD needed for MacOS + (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD) + ); + }, +}); diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index cbf5dc86f..820f0bb45 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -525,76 +525,6 @@ export const actionChangeOpacity = register({ ), }); -export const actionChangeFontSize = register({ - name: "changeFontSize", - trackEvent: false, - perform: (elements, appState, value, app) => { - return changeFontSize(elements, appState, app, () => value, value); - }, - PanelComponent: ({ elements, appState, updateData, app }) => ( -
- {t("labels.fontSize")} - { - if (isTextElement(element)) { - return element.fontSize; - } - const boundTextElement = getBoundTextElement( - element, - app.scene.getNonDeletedElementsMap(), - ); - if (boundTextElement) { - return boundTextElement.fontSize; - } - return null; - }, - (element) => - isTextElement(element) || - getBoundTextElement( - element, - app.scene.getNonDeletedElementsMap(), - ) !== null, - (hasSelection) => - hasSelection - ? null - : appState.currentItemFontSize || DEFAULT_FONT_SIZE, - )} - onChange={(value) => updateData(value)} - /> -
- ), -}); - export const actionChangeFontFamily = register({ name: "changeFontFamily", trackEvent: false, diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts index 1b047af97..31afd2524 100644 --- a/packages/excalidraw/actions/index.ts +++ b/packages/excalidraw/actions/index.ts @@ -14,16 +14,16 @@ export { actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, - actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, actionChangeVerticalAlign, } from "./actionProperties"; -export { - actionDecreaseFontSize, - actionIncreaseFontSize, -} from "./actionFontSize"; +export { actionDecreaseFontSize } from "./actionDecreaseFontSize"; + +export { actionIncreaseFontSize } from "./actionIncreaseFontSize"; + +export { actionChangeFontSize } from "./actionChangeFontSize"; export { actionChangeViewBackgroundColor, diff --git a/packages/excalidraw/actions/actionFontSize.ts b/packages/excalidraw/actions/utils.ts similarity index 61% rename from packages/excalidraw/actions/actionFontSize.ts rename to packages/excalidraw/actions/utils.ts index 84fa176fa..1fa8e3a23 100644 --- a/packages/excalidraw/actions/actionFontSize.ts +++ b/packages/excalidraw/actions/utils.ts @@ -1,12 +1,11 @@ -import { newElementWith } from ".."; +import { mutateElement, newElementWith } from ".."; import { isTextElement, redrawTextBoundingBox } from "../element"; +import { isBoundToContainer } from "../element/typeChecks"; import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types"; -import { KEYS } from "../keys"; import { AppClassProperties, AppState } from "../types"; import { changeProperty } from "./actionProperties"; -import { register } from "./register"; -const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1; +export const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1; const offsetElementAfterFontResize = ( prevElement: ExcalidrawTextElement, @@ -32,7 +31,7 @@ const offsetElementAfterFontResize = ( ); }; -const changeFontSize = ( +export const changeFontSize = ( elements: readonly ExcalidrawElement[], appState: AppState, app: AppClassProperties, @@ -79,43 +78,3 @@ const changeFontSize = ( commitToHistory: true, }; }; - -export const actionDecreaseFontSize = register({ - name: "decreaseFontSize", - trackEvent: false, - perform: (elements, appState, value, app) => { - return changeFontSize(elements, appState, app, (element) => - Math.round( - // get previous value before relative increase (doesn't work fully - // due to rounding and float precision issues) - (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize, - ), - ); - }, - keyTest: (event) => { - return ( - event[KEYS.CTRL_OR_CMD] && - event.shiftKey && - // KEYS.COMMA needed for MacOS - (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA) - ); - }, -}); - -export const actionIncreaseFontSize = register({ - name: "increaseFontSize", - trackEvent: false, - perform: (elements, appState, value, app) => { - return changeFontSize(elements, appState, app, (element) => - Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)), - ); - }, - keyTest: (event) => { - return ( - event[KEYS.CTRL_OR_CMD] && - event.shiftKey && - // KEYS.PERIOD needed for MacOS - (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD) - ); - }, -}); diff --git a/packages/excalidraw/element/textWysiwyg.tsx b/packages/excalidraw/element/textWysiwyg.tsx index 02beec021..961276e61 100644 --- a/packages/excalidraw/element/textWysiwyg.tsx +++ b/packages/excalidraw/element/textWysiwyg.tsx @@ -36,14 +36,12 @@ import { computeBoundTextPosition, getBoundTextElement, } from "./textElement"; -import { - actionDecreaseFontSize, - actionIncreaseFontSize, -} from "../actions/actionFontSize"; +import { actionDecreaseFontSize } from "../actions/actionDecreaseFontSize"; import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas"; import App from "../components/App"; import { LinearElementEditor } from "./linearElementEditor"; import { parseClipboard } from "../clipboard"; +import { actionIncreaseFontSize } from "../actions"; const getTransform = ( width: number,