diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index b70e55f1..07072bae 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -1,7 +1,6 @@ import React from "react"; import { AppState } from "../../src/types"; import { ButtonIconSelect } from "../components/ButtonIconSelect"; -import { ButtonSelect } from "../components/ButtonSelect"; import { ColorPicker } from "../components/ColorPicker"; import { IconPicker } from "../components/IconPicker"; import { @@ -21,6 +20,16 @@ import { StrokeStyleDottedIcon, StrokeStyleSolidIcon, StrokeWidthIcon, + FontSizeSmallIcon, + FontSizeMediumIcon, + FontSizeLargeIcon, + FontSizeExtraLargeIcon, + FontFamilyHandDrawnIcon, + FontFamilyNormalIcon, + FontFamilyCodeIcon, + TextAlignLeftIcon, + TextAlignCenterIcon, + TextAlignRightIcon, } from "../components/icons"; import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from "../constants"; import { @@ -413,13 +422,29 @@ export const actionChangeFontSize = register({ PanelComponent: ({ elements, appState, updateData }) => (
{t("labels.fontSize")} - , + }, + { + value: 20, + text: t("labels.medium"), + icon: , + }, + { + value: 28, + text: t("labels.large"), + icon: , + }, + { + value: 36, + text: t("labels.veryLarge"), + icon: , + }, ]} value={getFormValue( elements, @@ -456,16 +481,28 @@ export const actionChangeFontFamily = register({ }; }, PanelComponent: ({ elements, appState, updateData }) => { - const options: { value: FontFamily; text: string }[] = [ - { value: 1, text: t("labels.handDrawn") }, - { value: 2, text: t("labels.normal") }, - { value: 3, text: t("labels.code") }, + const options: { value: FontFamily; text: string; icon: JSX.Element }[] = [ + { + value: 1, + text: t("labels.handDrawn"), + icon: , + }, + { + value: 2, + text: t("labels.normal"), + icon: , + }, + { + value: 3, + text: t("labels.code"), + icon: , + }, ]; return (
{t("labels.fontFamily")} - + group="font-family" options={options} value={getFormValue( @@ -506,12 +543,24 @@ export const actionChangeTextAlign = register({ PanelComponent: ({ elements, appState, updateData }) => (
{t("labels.textAlign")} - + group="text-align" options={[ - { value: "left", text: t("labels.left") }, - { value: "center", text: t("labels.center") }, - { value: "right", text: t("labels.right") }, + { + value: "left", + text: t("labels.left"), + icon: , + }, + { + value: "center", + text: t("labels.center"), + icon: , + }, + { + value: "right", + text: t("labels.right"), + icon: , + }, ]} value={getFormValue( elements, diff --git a/src/components/icons.tsx b/src/components/icons.tsx index df2dffcc..48fa45cd 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -794,3 +794,121 @@ export const ArrowheadBarIcon = React.memo( { width: 40, height: 20 }, ), ); + +export const FontSizeSmallIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 47, height: 77 }, + ), +); + +export const FontSizeMediumIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 77, height: 75 }, + ), +); + +export const FontSizeLargeIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 45, height: 75 }, + ), +); + +export const FontSizeExtraLargeIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 120, height: 75 }, + ), +); + +export const FontFamilyHandDrawnIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 448, height: 512 }, + ), +); + +export const FontFamilyNormalIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + <> + + + , + { width: 70, height: 78 }, + ), +); + +export const FontFamilyCodeIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + <> + + , + { width: 640, height: 512 }, + ), +); + +export const TextAlignLeftIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 448, height: 512 }, + ), +); + +export const TextAlignCenterIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 448, height: 512 }, + ), +); + +export const TextAlignRightIcon = React.memo( + ({ theme }: { theme: "light" | "dark" }) => + createIcon( + , + { width: 448, height: 512 }, + ), +); diff --git a/src/css/styles.scss b/src/css/styles.scss index 863b11cc..4fd03820 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -222,7 +222,8 @@ align-items: center; svg { width: 36px; - height: 18px; + height: 14px; + padding: 2px; opacity: 0.6; } &.active svg { diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 93ef78d0..862a9577 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -207,7 +207,8 @@ export const textWysiwyg = ({ // prevent blur when changing properties from the menu const onPointerDown = (event: MouseEvent) => { if ( - event.target instanceof HTMLElement && + (event.target instanceof HTMLElement || + event.target instanceof SVGElement) && event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) && !isWritableElement(event.target) ) { diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index a0bba4f4..b87f5fa8 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -607,7 +607,7 @@ describe("regression tests", () => { it("updates fontSize & fontFamily appState", () => { UI.clickTool("text"); expect(h.state.currentItemFontFamily).toEqual(1); // Virgil - fireEvent.click(screen.getByText(/code/i)); + fireEvent.click(screen.getByTitle(/code/i)); expect(h.state.currentItemFontFamily).toEqual(3); // Cascadia });