Skip to content

Commit

Permalink
feat: add mindmap and connector settings (#8198)
Browse files Browse the repository at this point in the history 
### What changed?
- Add `connector` label settings.
- Add `mindmap` style settings.
- Add skeleton loading placeholder.

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/31159d74-ef62-4c7f-b1d9-cde73047cf29.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/31159d74-ef62-4c7f-b1d9-cde73047cf29.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/31159d74-ef62-4c7f-b1d9-cde73047cf29.mov">录屏2024-09-11 16.30.17.mov</video>
  • Loading branch information
@akumatus
akumatus committed Sep 11, 2024
1 parent 85aa73b commit f126556
Show file tree
Hide file tree
Showing 8 changed files with 420 additions and 75 deletions.
254 changes: 253 additions & 1 deletion ...nd/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,23 @@ import { EditorSettingService } from '@affine/core/modules/editor-settting';
import { useI18n } from '@affine/i18n';
import {
ConnectorMode,
FontFamily,
FontFamilyMap,
FontStyle,
FontWeightMap,
LineColor,
LineColorMap,
PointStyle,
StrokeStyle,
TextAlign,
} from '@blocksuite/blocks';
import type { Doc } from '@blocksuite/store';
import { useFramework, useLiveData } from '@toeverything/infra';
import { useCallback, useMemo } from 'react';

import { DropdownMenu } from '../menu';
import { menuTrigger, settingWrapper } from '../style.css';
import { useColor } from '../utils';
import { sortedFontWeightEntries, useColor } from '../utils';
import { Point } from './point';
import { EdgelessSnapshot } from './snapshot';
import { getSurfaceBlock } from './utils';
Expand All @@ -31,6 +36,15 @@ enum ConnecterStyle {
Scribbled = 'scribbled',
}

enum ConnectorTextFontSize {
'16px' = '16',
'20px' = '20',
'24px' = '24',
'32px' = '32',
'40px' = '40',
'64px' = '64',
}

export const ConnectorSettings = () => {
const t = useI18n();
const framework = useFramework();
Expand Down Expand Up @@ -191,6 +205,150 @@ export const ConnectorSettings = () => {
});
}, [editorSetting, settings]);

const alignItems = useMemo<RadioItem[]>(
() => [
{
value: TextAlign.Left,
label:
t[
'com.affine.settings.editorSettings.edgeless.text.alignment.left'
](),
},
{
value: TextAlign.Center,
label:
t[
'com.affine.settings.editorSettings.edgeless.text.alignment.center'
](),
},
{
value: TextAlign.Right,
label:
t[
'com.affine.settings.editorSettings.edgeless.text.alignment.right'
](),
},
],
[t]
);

const textAlignment = settings.connector.labelStyle.textAlign;
const setTextAlignment = useCallback(
(value: TextAlign) => {
editorSetting.set('connector', {
labelStyle: {
textAlign: value,
},
});
},
[editorSetting]
);

const fontFamilyItems = useMemo(() => {
const { fontFamily } = settings.connector.labelStyle;
return Object.entries(FontFamily).map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', {
labelStyle: {
fontFamily: value,
},
});
};
const isSelected = fontFamily === value;
return (
<MenuItem key={name} onSelect={handler} selected={isSelected}>
{name}
</MenuItem>
);
});
}, [editorSetting, settings]);

const fontStyleItems = useMemo(() => {
const { fontStyle } = settings.connector.labelStyle;
return Object.entries(FontStyle).map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', {
labelStyle: {
fontStyle: value,
},
});
};
const isSelected = fontStyle === value;
return (
<MenuItem key={name} onSelect={handler} selected={isSelected}>
{name}
</MenuItem>
);
});
}, [editorSetting, settings]);

const fontWeightItems = useMemo(() => {
const { fontWeight } = settings.connector.labelStyle;
return sortedFontWeightEntries.map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', {
labelStyle: {
fontWeight: value,
},
});
};
const isSelected = fontWeight === value;
return (
<MenuItem key={name} onSelect={handler} selected={isSelected}>
{name}
</MenuItem>
);
});
}, [editorSetting, settings]);

const fontSizeItems = useMemo(() => {
const { fontSize } = settings.connector.labelStyle;
return Object.entries(ConnectorTextFontSize).map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', {
labelStyle: {
fontSize: Number(value),
},
});
};
const isSelected = fontSize === Number(value);
return (
<MenuItem key={name} onSelect={handler} selected={isSelected}>
{name}
</MenuItem>
);
});
}, [editorSetting, settings]);

const textColorItems = useMemo(() => {
const { color } = settings.connector.labelStyle;
return Object.entries(LineColor).map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', {
labelStyle: {
color: value,
},
});
};
const isSelected = color === value;
return (
<MenuItem
key={name}
onSelect={handler}
selected={isSelected}
prefix={<Point color={value} />}
>
{name}
</MenuItem>
);
});
}, [editorSetting, settings]);

const textColor = useMemo(() => {
const { color } = settings.connector.labelStyle;
return getColorFromMap(color, LineColorMap);
}, [getColorFromMap, settings]);

const getElements = useCallback((doc: Doc) => {
const surface = getSurfaceBlock(doc);
return surface?.getElementsByType('connector') || [];
Expand Down Expand Up @@ -309,6 +467,100 @@ export const ConnectorSettings = () => {
}
/>
</SettingRow>
<SettingRow
name={t[
'com.affine.settings.editorSettings.edgeless.shape.text-color'
]()}
desc={''}
>
{textColor ? (
<DropdownMenu
items={textColorItems}
trigger={
<MenuTrigger
className={menuTrigger}
prefix={<Point color={textColor.value} />}
>
{textColor.key}
</MenuTrigger>
}
/>
) : null}
</SettingRow>
<SettingRow
name={t[
'com.affine.settings.editorSettings.edgeless.text.font-family'
]()}
desc={''}
>
<DropdownMenu
items={fontFamilyItems}
trigger={
<MenuTrigger className={menuTrigger}>
{FontFamilyMap[settings.connector.labelStyle.fontFamily]}
</MenuTrigger>
}
/>
</SettingRow>
<SettingRow
name={t[
'com.affine.settings.editorSettings.edgeless.shape.font-size'
]()}
desc={''}
>
<DropdownMenu
items={fontSizeItems}
trigger={
<MenuTrigger className={menuTrigger}>
{settings.connector.labelStyle.fontSize + 'px'}
</MenuTrigger>
}
/>
</SettingRow>
<SettingRow
name={t[
'com.affine.settings.editorSettings.edgeless.text.font-style'
]()}
desc={''}
>
<DropdownMenu
items={fontStyleItems}
trigger={
<MenuTrigger className={menuTrigger}>
{settings.connector.labelStyle.fontStyle}
</MenuTrigger>
}
/>
</SettingRow>
<SettingRow
name={t[
'com.affine.settings.editorSettings.edgeless.text.font-weight'
]()}
desc={''}
>
<DropdownMenu
items={fontWeightItems}
trigger={
<MenuTrigger className={menuTrigger}>
{FontWeightMap[settings.connector.labelStyle.fontWeight]}
</MenuTrigger>
}
/>
</SettingRow>
<SettingRow
name={t[
'com.affine.settings.editorSettings.edgeless.shape.text-alignment'
]()}
desc={''}
>
<RadioGroup
items={alignItems}
value={textAlignment}
width={250}
className={settingWrapper}
onChange={setTextAlignment}
/>
</SettingRow>
</>
);
};
47 changes: 34 additions & 13 deletions ...e/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/connector.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"type": "page",
"meta": {
"id": "v4nxnq2Al2",
"id": "gJEFfmo4QJ",
"title": "",
"createDate": 1725459565290,
"createDate": 1726038448921,
"tags": []
},
"blocks": {
"type": "block",
"id": "eDFE5HokPO",
"id": "orzKfiHevj",
"flavour": "affine:page",
"version": 2,
"props": {
Expand All @@ -20,37 +20,58 @@
"children": [
{
"type": "block",
"id": "ZksVPLRI0K",
"id": "-48EmppaxI",
"flavour": "affine:surface",
"version": 5,
"props": {
"elements": {
"hdqh5vFnzj": {
"m_PwyyI76y": {
"index": "a0",
"seed": 263456687,
"seed": 44330892,
"frontEndpointStyle": "None",
"labelOffset": {
"distance": 0.5,
"anchor": "center"
},
"labelStyle": {
"color": "--affine-palette-line-black",
"fontSize": 16,
"fontFamily": "blocksuite:surface:Inter",
"fontWeight": "400",
"fontStyle": "normal",
"textAlign": "center"
},
"labelXYWH": [235.6484375, 65.23828125, 200, 20],
"mode": 2,
"rearEndpointStyle": "Arrow",
"rough": false,
"roughness": 1.4,
"source": {
"position": [196.0625, 145.84765625]
"position": [120.8515625, 146.44921875]
},
"stroke": "--affine-palette-line-grey",
"strokeStyle": "solid",
"strokeWidth": 2,
"target": {
"position": [418.5859375, 52.13671875]
"position": [387.4453125, 4.02734375]
},
"text": {
"affine:surface:text": true,
"delta": [
{
"insert": "label"
}
]
},
"type": "connector",
"id": "hdqh5vFnzj"
"id": "m_PwyyI76y"
}
}
},
"children": [
{
"type": "block",
"id": "TNgzGwq6Ct",
"id": "-6UhNH7qhy",
"flavour": "affine:frame",
"version": 1,
"props": {
Expand All @@ -63,10 +84,10 @@
]
},
"background": "--affine-palette-transparent",
"xywh": "[-13.38671875,-4.5625,739.3828125,192.51171875]",
"index": "a0",
"xywh": "[-12.04296875,-49.66796875,542.9765625,248.3984375]",
"index": "Zz",
"childElementIds": {
"hdqh5vFnzj": true
"m_PwyyI76y": true
}
},
"children": []
Expand Down
Loading

0 comments on commit f126556

Please sign in to comment.