Browse Source

refactor: use layout to avoid flowChart being undefined

master
smallstonesk 4 years ago
parent
commit
0ef34c1c22
  1. 22
      packages/core/src/index.module.less
  2. 20
      packages/core/src/index.tsx
  3. 9
      packages/core/src/mods/header/connectStatus/index.tsx
  4. 7
      packages/core/src/mods/header/index.module.less
  5. 2
      packages/core/src/mods/header/index.tsx
  6. 44
      packages/core/src/mods/layout/index.module.less
  7. 54
      packages/core/src/mods/layout/index.tsx
  8. 3
      packages/core/src/mods/settingBar/index.module.less
  9. 21
      packages/core/src/mods/settingBar/index.tsx
  10. 3
      packages/core/src/mods/sideBar/index.module.less
  11. 23
      packages/core/src/mods/sideBar/index.tsx
  12. 5
      packages/core/src/mods/toolBar/index.module.less
  13. 15
      packages/core/src/mods/toolBar/index.tsx

22
packages/core/src/index.module.less

@ -1,22 +0,0 @@
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.body {
flex: 1;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
.full {
flex: 1;
display: flex;
flex-direction: column;
}
}
}

20
packages/core/src/index.tsx

@ -1,9 +1,9 @@
import React, {useState} from 'react';
import '@antv/x6/dist/x6.css';
import styles from './index.module.less';
import {Graph} from '@antv/x6';
import Layout from './mods/layout';
import Header from './mods/header';
import SideBar from './mods/sideBar';
import ToolBar from './mods/toolBar';
@ -32,17 +32,15 @@ const Core: React.FC<IProps> = props => {
};
return (
<div className={styles.container}>
<Header flowChart={flowChart}/>
<div className={styles.body}>
<SideBar flowChart={flowChart}/>
<div className={styles.full}>
<ToolBar flowChart={flowChart}/>
<Layout
flowChart={flowChart}
Header={Header}
SideBar={SideBar}
ToolBar={ToolBar}
SettingBar={SettingBar}
>
<FlowChart onReady={onFlowChartReady}/>
</div>
<SettingBar flowChart={flowChart}/>
</div>
</div>
</Layout>
);
};

9
packages/core/src/mods/header/connectStatus/index.tsx

@ -16,7 +16,7 @@ enum Status {
}
interface IProps {
flowChart: Graph | undefined;
flowChart: Graph;
}
const PULSE_RATE = 10 * 1000; // try to connect to local servet per 10 seconds
@ -30,12 +30,10 @@ const ConnectStatus: React.FC<IProps> = (props) => {
// life
useEffect(() => {
if(flowChart) {
confirmToSync();
const timer = setInterval(syncLocal, PULSE_RATE);
return () => clearInterval(timer);
}
}, [flowChart]);
}, []);
// network
const syncLocal = () => {
@ -56,8 +54,7 @@ const ConnectStatus: React.FC<IProps> = (props) => {
title: '本地连接成功,是否将数据同步至当前项目?',
onOk() {
try {
console.log(props.flowChart);
flowChart && flowChart.fromJSON(dsl);
flowChart.fromJSON(dsl);
} catch(err) {
message.error('同步失败!');
}

7
packages/core/src/mods/header/index.module.less

@ -1,11 +1,12 @@
.container {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 48px;
line-height: 48px;
align-items: center;
width: 100%;
height: 100%;
background-color: #FEFEFE;
border-bottom: 1px solid #D9D9D9;
}
.titleText {

2
packages/core/src/mods/header/index.tsx

@ -6,7 +6,7 @@ import {Graph} from '@antv/x6';
import ConnectStatus from './connectStatus';
interface IProps {
flowChart: Graph | undefined;
flowChart: Graph;
}
const Header: React.FC<IProps> = props => {

44
packages/core/src/mods/layout/index.module.less

@ -0,0 +1,44 @@
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.header {
width: 100%;
height: 48px;
border-bottom: 1px solid #D9D9D9;
}
.body {
flex: 1;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
.sideBar {
width: 235px;
border-right: 1px solid #D9D9D9;
}
.full {
flex: 1;
display: flex;
flex-direction: column;
.toolBar {
height: 43px;
}
}
.settingBar {
width: 350px;
height: 100%;
border-left: 1px solid #D9D9D9;
}
}
}

54
packages/core/src/mods/layout/index.tsx

@ -0,0 +1,54 @@
import React from 'react';
import styles from './index.module.less';
import {Graph} from '@antv/x6';
interface ISubComponentProps {
flowChart: Graph;
}
interface IProps {
flowChart: Graph | undefined;
Header: React.FC<ISubComponentProps>;
SideBar: React.FC<ISubComponentProps>;
ToolBar: React.FC<ISubComponentProps>;
SettingBar: React.FC<ISubComponentProps>;
}
const Layout: React.FC<IProps> = (props) => {
const {flowChart, Header, SideBar, ToolBar, SettingBar} = props;
let header, sideBar, toolBar, settingBar;
if(flowChart) {
header = <Header flowChart={flowChart}/>;
sideBar = <SideBar flowChart={flowChart}/>;
toolBar = <ToolBar flowChart={flowChart}/>;
settingBar = <SettingBar flowChart={flowChart}/>;
}
return (
<div className={styles.container}>
<div className={styles.header}>
{header}
</div>
<div className={styles.body}>
<div className={styles.sideBar}>
{sideBar}
</div>
<div className={styles.full}>
<div className={styles.toolBar}>
{toolBar}
</div>
{props.children}
</div>
<div className={styles.settingBar}>
{settingBar}
</div>
</div>
</div>
);
};
export default Layout;

3
packages/core/src/mods/settingBar/index.module.less

@ -2,9 +2,8 @@
display: flex;
flex-direction: column;
width: 350px;
width: 100%;
height: 100%;
border-left: 1px solid #D9D9D9;
&.center {
justify-content: center;

21
packages/core/src/mods/settingBar/index.tsx

@ -12,25 +12,21 @@ import {Graph} from '@antv/x6';
const {TabPane} = Tabs;
interface IProps {
flowChart: Graph | undefined;
flowChart: Graph;
}
const SettingBar: React.FC<IProps> = props => {
const {flowChart} = props;
const [ignored, forceUpdate] = useReducer(n => n + 1, 0);
const forceUpdate = useReducer(n => n + 1, 0)[1];
useEffect(() => {
flowChart && flowChart.on('settingBar:forceUpdate', forceUpdate);
flowChart.on('settingBar:forceUpdate', forceUpdate);
return () => {
flowChart && flowChart.off('settingBar:forceUpdate');
flowChart.off('settingBar:forceUpdate');
};
}, [flowChart]);
if(!flowChart) {
return (
<div className={`${styles.container} ${styles.center}`}>
<Empty description={'请选择一个节点'} image={Empty.PRESENTED_IMAGE_SIMPLE}/>
</div>
);
} else {
}, []);
const nodes = flowChart.getSelectedCells().filter(v => v.shape !== 'edge');
if(nodes.length === 1) {
return (
@ -52,7 +48,6 @@ const SettingBar: React.FC<IProps> = props => {
</div>
);
}
}
};
export default SettingBar;

3
packages/core/src/mods/sideBar/index.module.less

@ -1,7 +1,6 @@
.container {
width: 235px;
border-right: 1px solid #D9D9D9;
width: 100%;
:global {
.ant-collapse > .ant-collapse-item > .ant-collapse-header {

23
packages/core/src/mods/sideBar/index.tsx

@ -28,11 +28,11 @@ interface IGroupItem {
cells: string[];
}
interface ISideBarPorps {
flowChart: Graph | undefined;
interface ISideBarProps {
flowChart: Graph;
}
const SideBar: React.FC<ISideBarPorps> = props => {
const SideBar: React.FC<ISideBarProps> = props => {
const {flowChart} = props;
const [dnd, setDnd] = useState<Addon.Dnd>();
@ -42,20 +42,16 @@ const SideBar: React.FC<ISideBarPorps> = props => {
useEffect(() => {
// TODO: fetch to get custom group data
setGroups([GENERAL_GROUP]);
}, []);
useEffect(() => {
if(flowChart) {
setDnd(new Dnd({target: flowChart, scaled: true}));
}
}, [flowChart]);
}, []);
return (
<div className={styles.container}>
{flowChart && dnd && (
{dnd && (
<Collapse className={styles.collapse} defaultActiveKey={['general', 'custom']}>
{groups.map(group => (
<Panel key={group.key} header={group.name}>
<PanelContent dnd={dnd} cells={group.cells} flowChart={flowChart}/>
<PanelContent dnd={dnd} cells={group.cells}/>
</Panel>
))}
</Collapse>
@ -67,14 +63,13 @@ const SideBar: React.FC<ISideBarPorps> = props => {
interface IPanelContentProps {
dnd: Addon.Dnd;
cells: string[];
flowChart: Graph;
}
const PanelContent: React.FC<IPanelContentProps> = props => {
const {dnd, cells, flowChart} = props;
const {dnd, cells} = props;
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if(ref.current && flowChart) {
if(ref.current) {
const graph = new Graph({
container: ref.current,
width: ref.current.offsetWidth,
@ -102,7 +97,7 @@ const PanelContent: React.FC<IPanelContentProps> = props => {
dnd.start(newNode, e);
});
}
}, [flowChart]);
}, []);
return <div className={styles.chart} ref={ref}/>;
};

5
packages/core/src/mods/toolBar/index.module.less

@ -4,7 +4,8 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 43px;
width: 100%;
height: 100%;
background-color: #FAFAFA;
border-bottom: 1px solid #D9D9D9;
@ -13,7 +14,7 @@
flex-direction: row;
align-items: center;
padding: 0 4px;
height: 43px;
height: 100%;
border-right: 1px solid #D9D9D9;
}
}

15
packages/core/src/mods/toolBar/index.tsx

@ -7,21 +7,24 @@ import {Graph} from '@antv/x6';
import widgets from './widgets';
interface IProps {
flowChart: Graph | undefined;
flowChart: Graph;
}
const ToolBar: React.FC<IProps> = props => {
const {flowChart} = props;
const [ignored, forceUpdate] = useReducer(n => n + 1, 0);
const forceUpdate = useReducer(n => n + 1, 0)[1];
useEffect(() => {
flowChart && flowChart.on('toolBar:forceUpdate', forceUpdate);
flowChart.on('toolBar:forceUpdate', forceUpdate);
return () => {
flowChart && flowChart.off('toolBar:forceUpdate');
flowChart.off('toolBar:forceUpdate');
};
}, [flowChart]);
}, []);
return (
<div className={styles.container}>
{flowChart && widgets.map((group, index) => (
{widgets.map((group, index) => (
<div key={index} className={styles.group}>
{group.map((ToolItem, index) => {
return <ToolItem key={index} flowChart={flowChart}/>;

Loading…
Cancel
Save