feat(core): init editor setting ui (#7878)

- init editor setting ui https://github.com/user-attachments/assets/c54f5816-ef05-4ac0-b11a-8ab7159f928c
toeverything · Aug 22, 2024 · b333cde · b333cde
1 parent 03c4d56
commit b333cde
Show file tree

Hide file tree

Showing 18 changed files with 1,325 additions and 2 deletions.
diff --git a/packages/common/infra/src/modules/feature-flag/constant.ts b/packages/common/infra/src/modules/feature-flag/constant.ts
@@ -91,6 +91,13 @@ export const AFFINE_FLAGS = {
     configurable: true,
     defaultState: false,
   },
+  enable_editor_settings: {
+    category: 'affine',
+    displayName: 'Editor Settings',
+    description: 'Enables editor settings.',
+    configurable: isCanaryBuild,
+    defaultState: false,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 export type AFFINE_FLAGS = typeof AFFINE_FLAGS;
diff --git a/...nd/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connecter.tsx b/...nd/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connecter.tsx
@@ -0,0 +1,183 @@
+import {
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  RadioGroup,
+  type RadioItem,
+  Slider,
+} from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import { useI18n } from '@affine/i18n';
+import { useMemo, useState } from 'react';
+
+import { menuTrigger, settingWrapper } from '../style.css';
+import { EdgelessSnapshot } from './snapshot';
+
+export const ConnecterSettings = () => {
+  const t = useI18n();
+
+  const [connecterStyle, setConnecterStyle] = useState<'general' | 'scribbled'>(
+    'general'
+  );
+  const [connectorShape, setConnectorShape] = useState<
+    'elbowed' | 'curve' | 'straight'
+  >('elbowed');
+  const [borderStyle, setBorderStyle] = useState<'solid' | 'dash'>('solid');
+  const [borderThickness, setBorderThickness] = useState<number[]>([3]);
+
+  const connecterStyleItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'general',
+        label: t['com.affine.settings.editorSettings.edgeless.style.general'](),
+      },
+      {
+        value: 'scribbled',
+        label:
+          t['com.affine.settings.editorSettings.edgeless.style.scribbled'](),
+      },
+    ],
+    [t]
+  );
+  const connecterShapeItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'elbowed',
+        label:
+          t[
+            'com.affine.settings.editorSettings.edgeless.connecter.connector-shape.elbowed'
+          ](),
+      },
+      {
+        value: 'curve',
+        label:
+          t[
+            'com.affine.settings.editorSettings.edgeless.connecter.connector-shape.curve'
+          ](),
+      },
+      {
+        value: 'straight',
+        label:
+          t[
+            'com.affine.settings.editorSettings.edgeless.connecter.connector-shape.straight'
+          ](),
+      },
+    ],
+    [t]
+  );
+  const borderStyleItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'solid',
+        label:
+          t['com.affine.settings.editorSettings.edgeless.note.border.solid'](),
+      },
+      {
+        value: 'dash',
+        label:
+          t['com.affine.settings.editorSettings.edgeless.note.border.dash'](),
+      },
+    ],
+    [t]
+  );
+  return (
+    <>
+      <EdgelessSnapshot
+        title={t['com.affine.settings.editorSettings.edgeless.connecter']()}
+        option={['mock-option']}
+        type="mock-type"
+      />
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.connecter.color'
+        ]()}
+        desc={''}
+      >
+        <Menu items={<MenuItem>Grey</MenuItem>}>
+          <MenuTrigger className={menuTrigger} disabled>
+            Grey
+          </MenuTrigger>
+        </Menu>
+      </SettingRow>
+      <SettingRow
+        name={t['com.affine.settings.editorSettings.edgeless.style']()}
+        desc={''}
+      >
+        <RadioGroup
+          items={connecterStyleItems}
+          value={connecterStyle}
+          width={250}
+          className={settingWrapper}
+          onChange={setConnecterStyle}
+        />
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.connecter.connector-shape'
+        ]()}
+        desc={''}
+      >
+        <RadioGroup
+          items={connecterShapeItems}
+          value={connectorShape}
+          width={250}
+          className={settingWrapper}
+          onChange={setConnectorShape}
+        />
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.connecter.border-style'
+        ]()}
+        desc={''}
+      >
+        <RadioGroup
+          items={borderStyleItems}
+          value={borderStyle}
+          width={250}
+          className={settingWrapper}
+          onChange={setBorderStyle}
+        />
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.connecter.border-thickness'
+        ]()}
+        desc={''}
+      >
+        <Slider
+          value={borderThickness}
+          onValueChange={setBorderThickness}
+          min={1}
+          max={5}
+          step={1}
+          nodes={[1, 2, 3, 4, 5]}
+        />
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.connecter.start-endpoint'
+        ]()}
+        desc={''}
+      >
+        <Menu items={<MenuItem>None</MenuItem>}>
+          <MenuTrigger className={menuTrigger} disabled>
+            None
+          </MenuTrigger>
+        </Menu>
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.connecter.end-endpoint'
+        ]()}
+        desc={''}
+      >
+        <Menu items={<MenuItem>Arrow</MenuItem>}>
+          <MenuTrigger className={menuTrigger} disabled>
+            Arrow
+          </MenuTrigger>
+        </Menu>
+      </SettingRow>
+    </>
+  );
+};
diff --git a/...end/core/src/components/affine/setting-modal/general-setting/editor/edgeless/edgeless.tsx b/...end/core/src/components/affine/setting-modal/general-setting/editor/edgeless/edgeless.tsx
@@ -0,0 +1,23 @@
+import { SettingWrapper } from '@affine/component/setting-components';
+import { useI18n } from '@affine/i18n';
+
+import { ConnecterSettings } from './connecter';
+import { MindMapSettings } from './mind-map';
+import { NoteSettings } from './note';
+import { PenSettings } from './pen';
+import { ShapeSettings } from './shape';
+import { TextSettings } from './text';
+
+export const Edgeless = () => {
+  const t = useI18n();
+  return (
+    <SettingWrapper title={t['com.affine.settings.editorSettings.edgeless']()}>
+      <NoteSettings />
+      <TextSettings />
+      <ShapeSettings />
+      <ConnecterSettings />
+      <PenSettings />
+      <MindMapSettings />
+    </SettingWrapper>
+  );
+};
diff --git a/...rontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/index.ts b/...rontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/index.ts
@@ -0,0 +1 @@
+export * from './edgeless';
diff --git a/...end/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx b/...end/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx
@@ -0,0 +1,79 @@
+import {
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  RadioGroup,
+  type RadioItem,
+} from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import { useI18n } from '@affine/i18n';
+import { useMemo, useState } from 'react';
+
+import { menuTrigger, settingWrapper } from '../style.css';
+import { EdgelessSnapshot } from './snapshot';
+
+export const MindMapSettings = () => {
+  const t = useI18n();
+  const [layoutValue, setLayoutValue] = useState<'left' | 'radial' | 'right'>(
+    'right'
+  );
+  const layoutValueItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'left',
+        label:
+          t[
+            'com.affine.settings.editorSettings.edgeless.mind-map.layout.left'
+          ](),
+      },
+      {
+        value: 'radial',
+        label:
+          t[
+            'com.affine.settings.editorSettings.edgeless.mind-map.layout.radial'
+          ](),
+      },
+      {
+        value: 'right',
+        label:
+          t[
+            'com.affine.settings.editorSettings.edgeless.mind-map.layout.right'
+          ](),
+      },
+    ],
+    [t]
+  );
+  return (
+    <>
+      <EdgelessSnapshot
+        title={t['com.affine.settings.editorSettings.edgeless.mind-map']()}
+        option={['mock-option']}
+        type="mock-type"
+      />
+      <SettingRow
+        name={t['com.affine.settings.editorSettings.edgeless.style']()}
+        desc={''}
+      >
+        <Menu items={<MenuItem>Style 1</MenuItem>}>
+          <MenuTrigger className={menuTrigger} disabled>
+            Style 1
+          </MenuTrigger>
+        </Menu>
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.edgeless.mind-map.layout'
+        ]()}
+        desc={''}
+      >
+        <RadioGroup
+          items={layoutValueItems}
+          value={layoutValue}
+          width={250}
+          className={settingWrapper}
+          onChange={setLayoutValue}
+        />
+      </SettingRow>
+    </>
+  );
+};