From 3837c8479169c417656c240c8f9d401dc88296d4 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 5 Sep 2024 08:30:01 +0000 Subject: [PATCH] feat(core): temporarily add page mode editor settings to appearance settings (#8090) Will remove it when editor settings is released. ![CleanShot 2024-09-04 at 18 19 29@2x](https://github.com/user-attachments/assets/2b2b75ff-acbf-4ca9-ae60-292e73663e13) --- .../general-setting/appearance/index.tsx | 3 ++ .../editor/edgeless/connector.tsx | 11 +++-- .../general-setting/editor/edgeless/note.tsx | 13 +++--- .../general-setting/editor/edgeless/pen.tsx | 39 +++++++++++----- .../general-setting/editor/edgeless/text.tsx | 11 +++-- .../general-setting/editor/utils.ts | 45 +++++++++++++++++++ 6 files changed, 97 insertions(+), 25 deletions(-) create mode 100644 packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx index 55e88e80d..90a76964f 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx @@ -13,6 +13,7 @@ import { useCallback, useMemo } from 'react'; import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting-helper'; import { LanguageMenu } from '../../../language-menu'; +import { Page } from '../editor/page'; import { DateFormatSetting } from './date-format-setting'; import { settingWrapper } from './style.css'; import { ThemeEditorSetting } from './theme-editor-setting'; @@ -119,6 +120,8 @@ export const AppearanceSettings = () => { ) : null} {runtimeConfig.enableThemeEditor ? : null} + {/* //TODO(@JimmFly): remove Page component when stable release */} + {runtimeConfig.enableNewSettingUnstableApi ? ( { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); + const getColorFromMap = useColor(); const connecterStyleItems = useMemo( () => [ @@ -133,8 +136,8 @@ export const ConnectorSettings = () => { const currentColor = useMemo(() => { const color = settings.connector.stroke; - return Object.entries(LineColor).find(([, value]) => value === color); - }, [settings]); + return getColorFromMap(color, LineColorMap); + }, [getColorFromMap, settings.connector.stroke]); const colorItems = useMemo(() => { const { stroke } = settings.connector; @@ -206,9 +209,9 @@ export const ConnectorSettings = () => { trigger={ } + prefix={} > - {currentColor[0]} + {currentColor.key} } /> diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx index 3f29bdc52..54eb847e2 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx @@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n'; import { createEnumMap, NoteBackgroundColor, + NoteBackgroundColorMap, NoteShadow, NoteShadowMap, StrokeStyle, @@ -20,6 +21,7 @@ import { useCallback, useMemo } from 'react'; import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper } from '../style.css'; +import { useColor } from '../utils'; import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; @@ -46,6 +48,7 @@ export const NoteSettings = () => { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); + const getColorFromMap = useColor(); const borderStyleItems = useMemo( () => [ @@ -160,10 +163,8 @@ export const NoteSettings = () => { const currentColor = useMemo(() => { const { background } = settings['affine:note']; - return Object.entries(NoteBackgroundColor).find( - ([, value]) => value === background - ); - }, [settings]); + return getColorFromMap(background, NoteBackgroundColorMap); + }, [getColorFromMap, settings]); return ( <> @@ -185,9 +186,9 @@ export const NoteSettings = () => { trigger={ } + prefix={} > - {currentColor[0]} + {currentColor.key} } /> diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx index 6b9b06971..78d5e35bd 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx @@ -2,12 +2,14 @@ import { MenuItem, MenuTrigger, Slider } from '@affine/component'; import { SettingRow } from '@affine/component/setting-components'; import { EditorSettingService } from '@affine/core/modules/editor-settting'; import { useI18n } from '@affine/i18n'; -import { LineColor } from '@blocksuite/blocks'; +import { LineColor, LineColorMap } from '@blocksuite/blocks'; import { useFramework, useLiveData } from '@toeverything/infra'; import { useCallback, useMemo } from 'react'; import { DropdownMenu } from '../menu'; import { menuTrigger } from '../style.css'; +import { useColor } from '../utils'; +import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; export const PenSettings = () => { @@ -15,6 +17,11 @@ export const PenSettings = () => { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); + const getColorFromMap = useColor(); + + const currentColor = useMemo(() => { + return getColorFromMap(settings.brush.color, LineColorMap); + }, [getColorFromMap, settings.brush.color]); const colorItems = useMemo(() => { const { color } = settings.brush; @@ -24,12 +31,17 @@ export const PenSettings = () => { }; const isSelected = color === value; return ( - + } + > {name} ); }); - }, [editorSetting, settings]); + }, [editorSetting, settings.brush]); const borderThickness = settings.brush.lineWidth; const setBorderThickness = useCallback( @@ -52,14 +64,19 @@ export const PenSettings = () => { name={t['com.affine.settings.editorSettings.edgeless.pen.color']()} desc={''} > - - {String(settings.brush.color)} - - } - /> + {currentColor ? ( + } + > + {currentColor.key} + + } + /> + ) : null} { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); + const getColorFromMap = useColor(); const alignItems = useMemo( () => [ @@ -134,8 +137,8 @@ export const TextSettings = () => { const currentColor = useMemo(() => { const { color } = settings['affine:edgeless-text']; - return Object.entries(LineColor).find(([, value]) => value === color); - }, [settings]); + return getColorFromMap(color, LineColorMap); + }, [getColorFromMap, settings]); return ( <> { trigger={ } + prefix={} > - {currentColor[0]} + {currentColor.key} } /> diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts new file mode 100644 index 000000000..25a9f93cb --- /dev/null +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts @@ -0,0 +1,45 @@ +import { useTheme } from 'next-themes'; + +function getColorFromMap( + color: string | { normal: string } | { light: string; dark: string }, + colorMap: { [key: string]: string }, + theme: 'light' | 'dark' = 'light' +): + | { + value: string; + key: string; + } + | undefined { + if (typeof color === 'string') { + return { value: color, key: colorMap[color] }; + } + + if ('normal' in color) { + return { + value: color.normal, + key: colorMap[color.normal], + }; + } + + if ('light' in color && 'dark' in color) { + return { + value: color[theme], + key: colorMap[color[theme]], + }; + } + + return undefined; +} + +export const useColor = () => { + const { resolvedTheme } = useTheme(); + return ( + color: string | { normal: string } | { light: string; dark: string }, + colorMap: { [key: string]: string } + ) => + getColorFromMap( + color, + colorMap, + resolvedTheme as 'light' | 'dark' | undefined + ); +};