Skip to content

Commit a9477ae

Browse files
WeiWendaWeiWenda
committed
图谱笔记增加自动布局功能
1 parent fa36db6 commit a9477ae

File tree

7 files changed

+72
-42
lines changed

7 files changed

+72
-42
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "EffectNote",
3-
"version": "0.6.1",
3+
"version": "0.6.2",
44
"private": true,
55
"homepage": "/",
66
"author": "weiwenda",
@@ -98,7 +98,7 @@
9898
"@types/ws": "0.0.41",
9999
"@wangeditor/editor": "^5.1.23",
100100
"@wangeditor/editor-for-react": "^1.0.6",
101-
"@weiwenda/excalidraw": "0.17.1-effectnote-3",
101+
"@weiwenda/excalidraw": "^0.17.1-effecnote-4",
102102
"antd": "^5.10.2",
103103
"electron": "26.0.0",
104104
"electron-builder": "^22.14.13",

‎public/images/layout_ltr.png

4.92 KB
Loading

‎public/images/layout_rtl.png

4.65 KB
Loading

‎public/images/layout_tree.png

3.74 KB
Loading

‎src/components/pkb-producer/App.scss

+4
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,10 @@
115115
--color-primary-darkest: #e64980;
116116
--color-primary-light: #fcc2d7;
117117

118+
.footer-layout {
119+
background: var(--color-surface-low)
120+
}
121+
118122
button.custom-element {
119123
width: 2rem;
120124
height: 2rem;

‎src/components/pkb-producer/index.tsx

+64-38
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Children, cloneElement, useCallback, useEffect, useRef, useState} from 'react';
22
import type * as TExcalidraw from '@weiwenda/excalidraw';
3-
import {newElementWith, serializeLibraryAsJSON, useI18n} from '@weiwenda/excalidraw';
3+
import {Footer, newElementWith, serializeLibraryAsJSON, useI18n} from '@weiwenda/excalidraw';
44
import { parseMermaidToExcalidraw } from '@excalidraw/mermaid-to-excalidraw';
55

66
import $ from 'jquery';
@@ -40,7 +40,7 @@ import {
4040
AppstoreAddOutlined,
4141
BranchesOutlined, CloudUploadOutlined,
4242
EditOutlined,
43-
FileSearchOutlined,
43+
ApartmentOutlined,
4444
FilterOutlined,
4545
MergeOutlined,
4646
NodeIndexOutlined,
@@ -102,6 +102,7 @@ export default function PkbProducer({
102102
const [boardX, setBoardX] = useState(70);
103103
const [boardY, setBoardY] = useState(17);
104104
const [showFilter, setShowFilter] = useState(session.clientStore.getClientSetting('curPkbShowFilter'));
105+
const [showLayout, setShowLayout] = useState(session.clientStore.getClientSetting('curPkbShowLayout'));
105106
const [showDetail, setShowDetail] = useState(session.clientStore.getClientSetting('curPkbShowDetail'));
106107
const [showShapes, setShowShapes] = useState(session.clientStore.getClientSetting('curPkbShowShapes'));
107108
const [showSelectedShapeActions, setShowSelectedShapeActions] = useState(session.clientStore.getClientSetting('curPkbShowSelectedShapeActions'));
@@ -140,6 +141,7 @@ export default function PkbProducer({
140141
setShowShapes(savedContent.tools?.showShapes ?? showShapes);
141142
setShowDetail(savedContent.tools?.showDetail ?? showDetail);
142143
setShowFilter(savedContent.tools?.showFilter ?? showFilter);
144+
setShowLayout(savedContent.tools?.showLayout ?? showLayout);
143145
setShowSelectedShapeActions(savedContent.tools?.showSelectedShapeActions ?? showSelectedShapeActions);
144146
// @ts-ignore
145147
const blob = new Blob([savedContent.libraryItems || serializeLibraryAsJSON(initialData.libraryItems)],
@@ -231,6 +233,7 @@ export default function PkbProducer({
231233
setShowLibrary(session.clientStore.getClientSetting('curPkbShowLibrary'));
232234
setShowShapes(session.clientStore.getClientSetting('curPkbShowShapes'));
233235
setShowFilter(session.clientStore.getClientSetting('curPkbShowFilter'));
236+
setShowLayout(session.clientStore.getClientSetting('curPkbShowLayout'));
234237
setShowDetail(session.clientStore.getClientSetting('curPkbShowDetail'));
235238
setShowSelectedShapeActions(session.clientStore.getClientSetting('curPkbShowSelectedShapeActions'));
236239
const convertedElements = convertToExcalidrawElements(elements);
@@ -327,6 +330,7 @@ export default function PkbProducer({
327330
session.clientStore.setClientSetting('curPkbScrollY', state.scrollY);
328331
session.clientStore.setClientSetting('curPkbShowLibrary', showLibrary);
329332
session.clientStore.setClientSetting('curPkbShowFilter', showFilter);
333+
session.clientStore.setClientSetting('curPkbShowLayout', showLayout);
330334
session.clientStore.setClientSetting('curPkbShowDetail', showDetail);
331335
session.clientStore.setClientSetting('curPkbShowShapes', showShapes);
332336
session.clientStore.setClientSetting('curPkbShowSelectedShapeActions', showSelectedShapeActions);
@@ -362,6 +366,48 @@ export default function PkbProducer({
362366
validateEmbeddable: true,
363367
},
364368
<>
369+
{excalidrawAPI && showLayout && (
370+
<Footer>
371+
<Flex style={{paddingLeft: '5px'}} gap={5} wrap={'wrap'} align={'center'}>
372+
<Button className={'footer-layout'} onClick={() => {
373+
doAutoLayout('org.eclipse.elk.layered', 'NETWORK_SIMPLEX'
374+
, 'RIGHT', excalidrawAPI?.getSceneElements()!).then(elements => {
375+
excalidrawAPI?.updateScene({
376+
elements: elements
377+
});
378+
});
379+
}}>
380+
<img style={{position: 'relative', top: '2px'}}
381+
onClick={e => e.preventDefault()}
382+
src={`${process.env.PUBLIC_URL}/images/layout_ltr.png`} height={18} />
383+
</Button>
384+
<Button className={'footer-layout'} onClick={() => {
385+
doAutoLayout('org.eclipse.elk.layered', 'NETWORK_SIMPLEX'
386+
, 'LEFT', excalidrawAPI?.getSceneElements()!).then(elements => {
387+
excalidrawAPI?.updateScene({
388+
elements: elements
389+
});
390+
});
391+
}}>
392+
<img style={{position: 'relative', top: '2px'}}
393+
onClick={e => e.preventDefault()}
394+
src={`${process.env.PUBLIC_URL}/images/layout_rtl.png`} height={18} />
395+
</Button>
396+
<Button className={'footer-layout'} onClick={() => {
397+
doAutoLayout('org.eclipse.elk.mrtree', ''
398+
, '', excalidrawAPI?.getSceneElements()!).then(elements => {
399+
excalidrawAPI?.updateScene({
400+
elements: elements
401+
});
402+
});
403+
}}>
404+
<img style={{position: 'relative', top: '2px'}}
405+
onClick={e => e.preventDefault()}
406+
src={`${process.env.PUBLIC_URL}/images/layout_tree.png`} height={18} />
407+
</Button>
408+
</Flex>
409+
</Footer>
410+
)}
365411
<WelcomeScreen />
366412
{
367413
(showFilter || showSelectedShapeActions) &&
@@ -395,34 +441,6 @@ export default function PkbProducer({
395441
{/* </Tag.CheckableTag>*/}
396442
{/* ))}*/}
397443
{/*</Flex>*/}
398-
<div className={'operation-title'}>自动布局</div>
399-
<Flex className={'operation-options'} gap={5} wrap={'wrap'}>
400-
<Button type='primary' onClick={() => {
401-
// setLanguage({ code: 'zh-CN', label: '简体中文' });
402-
// doAutoLayout('org.eclipse.elk.layered', 'NETWORK_SIMPLEX'
403-
// , 'RIGHT', excalidrawAPI?.getSceneElements()!).then(elements => {
404-
// excalidrawAPI?.updateScene({
405-
// elements: elements
406-
// });
407-
// });
408-
}}>Layer LTR</Button>
409-
<Button type='primary' onClick={() => {
410-
doAutoLayout('org.eclipse.elk.layered', 'NETWORK_SIMPLEX'
411-
, 'LEFT', excalidrawAPI?.getSceneElements()!).then(elements => {
412-
excalidrawAPI?.updateScene({
413-
elements: elements
414-
});
415-
});
416-
}}>Layer RTL</Button>
417-
<Button type='primary' onClick={() => {
418-
doAutoLayout('org.eclipse.elk.mrtree', ''
419-
, '', excalidrawAPI?.getSceneElements()!).then(elements => {
420-
excalidrawAPI?.updateScene({
421-
elements: elements
422-
});
423-
});
424-
}}>Tree</Button>
425-
</Flex>
426444
<div className={'operation-title'}>节点形状</div>
427445
<Flex className={'operation-options'} gap={5} wrap={'wrap'} >
428446
{['rectangle', 'diamond', 'ellipse', 'text'].map<React.ReactNode>((tag) => (
@@ -763,6 +781,7 @@ export default function PkbProducer({
763781
showLibrary,
764782
showShapes,
765783
showFilter,
784+
showLayout,
766785
showSelectedShapeActions
767786
}
768787
}, undefined, 2)};
@@ -805,6 +824,7 @@ export default function PkbProducer({
805824
showDetail,
806825
showShapes,
807826
showFilter,
827+
showLayout,
808828
showSelectedShapeActions
809829
}
810830
}, undefined, 2)};
@@ -842,21 +862,27 @@ export default function PkbProducer({
842862
onSelect={() => setShowLibrary(!showLibrary)}>
843863
素材库
844864
</MainMenu.Item>
845-
<MainMenu.Item icon={<FilterOutlined />}
846-
shortcut={showFilter ? 'ON' : 'OFF'}
847-
onSelect={() => setShowFilter(!showFilter)}>
848-
节点选择工具
865+
<MainMenu.Item icon={<ApartmentOutlined />}
866+
shortcut={showLayout ? 'ON' : 'OFF'}
867+
onSelect={() => setShowLayout(!showLayout)}>
868+
自动布局工具
869+
</MainMenu.Item>
870+
<MainMenu.Item icon={<EditOutlined />}
871+
shortcut={showSelectedShapeActions ? 'ON' : 'OFF'}
872+
onSelect={() => setShowSelectedShapeActions(!showSelectedShapeActions)}>
873+
样式编辑工具
849874
</MainMenu.Item>
850875
<MainMenu.Item icon={<ProfileOutlined />}
851876
shortcut={showDetail ? 'ON' : 'OFF'}
852877
onSelect={() => setShowDetail(!showDetail)}>
853878
节点内容工具
854879
</MainMenu.Item>
855-
<MainMenu.Item icon={<EditOutlined />}
856-
shortcut={showSelectedShapeActions ? 'ON' : 'OFF'}
857-
onSelect={() => setShowSelectedShapeActions(!showSelectedShapeActions)}>
858-
样式编辑工具
880+
<MainMenu.Item icon={<FilterOutlined />}
881+
shortcut={showFilter ? 'ON' : 'OFF'}
882+
onSelect={() => setShowFilter(!showFilter)}>
883+
节点选择工具
859884
</MainMenu.Item>
885+
860886
{/*<MainMenu.DefaultItems.Socials />*/}
861887
{/*<MainMenu.Separator />*/}
862888
{/*<MainMenu.DefaultItems.ToggleTheme*/}

‎src/share/ts/datastore.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export type ClientSettings = Theme & {
3636
curPkbZoom: number,
3737
curPkbShowLibrary: boolean,
3838
curPkbShowDetail: boolean,
39-
curPkbShowSearch: boolean,
39+
curPkbShowLayout: boolean,
4040
curPkbShowFilter: boolean,
4141
curPkbShowShapes: boolean,
4242
curPkbShowSelectedShapeActions: boolean,
@@ -68,7 +68,7 @@ const default_client_settings: ClientSettings =
6868
curPkbZoom: 1,
6969
curPkbShowLibrary: false,
7070
curPkbShowDetail: true,
71-
curPkbShowSearch: true,
71+
curPkbShowLayout: true,
7272
curPkbShowFilter: false,
7373
curPkbShowShapes: true,
7474
curPkbShowSelectedShapeActions: false,

0 commit comments

Comments
 (0)