120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
import React, { useEffect, useEffectEvent, useState } from 'react';
|
|
import { Layout, theme, Breadcrumb, Button, Space, Tree } from 'antd';
|
|
import Graph from './components/Graph';
|
|
import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
|
|
import { useKeysdownStore } from './stores/ArrayStore';
|
|
import {
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
SaveOutlined,
|
|
FolderOpenOutlined,
|
|
} from '@ant-design/icons';
|
|
import { saveConceptSketch } from './utils/saveGraph';
|
|
import { loadConceptSketch } from './utils/loadGraph';
|
|
import { useGraphLayersTreeStore } from './stores/TreeStore';
|
|
|
|
const { Header, Content, Sider } = Layout;
|
|
|
|
const App: React.FC = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
const [graphLevel, setGraphLevel] = useState<BreadcrumbItemType[]>([])
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const addKey = useKeysdownStore(state => state.add);
|
|
const removeKey = useKeysdownStore(state => state.remove);
|
|
const onKeydown = useEffectEvent((key: string) => {
|
|
addKey(key);
|
|
});
|
|
const onKeyUp = useEffectEvent((key: string) => {
|
|
removeKey(key);
|
|
})
|
|
document.addEventListener('keydown', (ev) => {
|
|
onKeydown(ev.key)
|
|
});
|
|
document.addEventListener('keyup', (ev) => {
|
|
onKeyUp(ev.key);
|
|
});
|
|
const treeData = useGraphLayersTreeStore(store => store.tree);
|
|
|
|
useEffect(() => {
|
|
console.info(treeData);
|
|
}, [treeData])
|
|
|
|
return (
|
|
<Layout>
|
|
<Sider trigger={null} collapsible collapsed={collapsed} collapsedWidth={0} style={{
|
|
background: colorBgContainer,
|
|
}}>
|
|
<Header style={{ padding: 0 }}></Header>
|
|
<Tree
|
|
checkable
|
|
treeData={treeData}
|
|
defaultExpandAll={true}
|
|
style={{
|
|
borderRadius: 0
|
|
}}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ padding: 0, background: colorBgContainer, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Space>
|
|
<div style={{ background: '#001529' }}>
|
|
<Button
|
|
type="text"
|
|
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
style={{
|
|
fontSize: '16px',
|
|
width: 32,
|
|
height: 32,
|
|
color: colorBgContainer,
|
|
}}
|
|
/>
|
|
</div>
|
|
<Breadcrumb items={graphLevel} />
|
|
</Space>
|
|
<div style={{ background: '#001529', display: 'flex' }}>
|
|
<Button
|
|
type="text"
|
|
icon={<FolderOpenOutlined />}
|
|
onClick={loadConceptSketch}
|
|
title="Load JSON"
|
|
style={{
|
|
fontSize: '16px',
|
|
width: 32,
|
|
height: 32,
|
|
color: colorBgContainer,
|
|
}}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<SaveOutlined />}
|
|
onClick={saveConceptSketch}
|
|
title="Save as JSON"
|
|
style={{
|
|
fontSize: '16px',
|
|
width: 32,
|
|
height: 32,
|
|
color: colorBgContainer,
|
|
}}
|
|
/>
|
|
</div>
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
margin: '8px 16px',
|
|
padding: 24,
|
|
minHeight: 280,
|
|
background: colorBgContainer,
|
|
borderRadius: '6px'
|
|
}}
|
|
>
|
|
<Graph setGraphPath={setGraphLevel} />
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default App; |