diff --git a/packages/core/src/index.module.less b/packages/core/src/index.module.less deleted file mode 100644 index a2dce57..0000000 --- a/packages/core/src/index.module.less +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index 85cfb64..8495c40 100644 --- a/packages/core/src/index.tsx +++ b/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 = props => { }; return ( -
-
-
- -
- - -
- -
-
+ + + ); }; diff --git a/packages/core/src/mods/header/connectStatus/index.tsx b/packages/core/src/mods/header/connectStatus/index.tsx index 36f2cdc..3fec80d 100644 --- a/packages/core/src/mods/header/connectStatus/index.tsx +++ b/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 = (props) => { // life useEffect(() => { - if(flowChart) { - confirmToSync(); - const timer = setInterval(syncLocal, PULSE_RATE); - return () => clearInterval(timer); - } - }, [flowChart]); + confirmToSync(); + const timer = setInterval(syncLocal, PULSE_RATE); + return () => clearInterval(timer); + }, []); // network const syncLocal = () => { @@ -56,8 +54,7 @@ const ConnectStatus: React.FC = (props) => { title: '本地连接成功,是否将数据同步至当前项目?', onOk() { try { - console.log(props.flowChart); - flowChart && flowChart.fromJSON(dsl); + flowChart.fromJSON(dsl); } catch(err) { message.error('同步失败!'); } diff --git a/packages/core/src/mods/header/index.module.less b/packages/core/src/mods/header/index.module.less index 91ff433..5ee6c3e 100644 --- a/packages/core/src/mods/header/index.module.less +++ b/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 { diff --git a/packages/core/src/mods/header/index.tsx b/packages/core/src/mods/header/index.tsx index 5cdf62a..584e0fa 100644 --- a/packages/core/src/mods/header/index.tsx +++ b/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 = props => { diff --git a/packages/core/src/mods/layout/index.module.less b/packages/core/src/mods/layout/index.module.less new file mode 100644 index 0000000..e3b5798 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/packages/core/src/mods/layout/index.tsx b/packages/core/src/mods/layout/index.tsx new file mode 100644 index 0000000..59501a5 --- /dev/null +++ b/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; + SideBar: React.FC; + ToolBar: React.FC; + SettingBar: React.FC; +} + +const Layout: React.FC = (props) => { + + const {flowChart, Header, SideBar, ToolBar, SettingBar} = props; + + let header, sideBar, toolBar, settingBar; + if(flowChart) { + header =
; + sideBar = ; + toolBar = ; + settingBar = ; + } + + return ( +
+
+ {header} +
+
+
+ {sideBar} +
+
+
+ {toolBar} +
+ {props.children} +
+
+ {settingBar} +
+
+
+ ); +}; + +export default Layout; diff --git a/packages/core/src/mods/settingBar/index.module.less b/packages/core/src/mods/settingBar/index.module.less index 0296448..7042041 100644 --- a/packages/core/src/mods/settingBar/index.module.less +++ b/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; diff --git a/packages/core/src/mods/settingBar/index.tsx b/packages/core/src/mods/settingBar/index.tsx index af01c9b..10ca803 100644 --- a/packages/core/src/mods/settingBar/index.tsx +++ b/packages/core/src/mods/settingBar/index.tsx @@ -12,46 +12,41 @@ import {Graph} from '@antv/x6'; const {TabPane} = Tabs; interface IProps { - flowChart: Graph | undefined; + flowChart: Graph; } const SettingBar: React.FC = 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) { + }, []); + + const nodes = flowChart.getSelectedCells().filter(v => v.shape !== 'edge'); + if(nodes.length === 1) { + return ( +
+ + + + + + + + +
+ ); + } else { return (
); - } else { - const nodes = flowChart.getSelectedCells().filter(v => v.shape !== 'edge'); - if(nodes.length === 1) { - return ( -
- - - - - - - - -
- ); - } else { - return ( -
- -
- ); - } } }; diff --git a/packages/core/src/mods/sideBar/index.module.less b/packages/core/src/mods/sideBar/index.module.less index 40150b1..a1840f5 100644 --- a/packages/core/src/mods/sideBar/index.module.less +++ b/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 { diff --git a/packages/core/src/mods/sideBar/index.tsx b/packages/core/src/mods/sideBar/index.tsx index 46d6adb..9380c01 100644 --- a/packages/core/src/mods/sideBar/index.tsx +++ b/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 = props => { +const SideBar: React.FC = props => { const {flowChart} = props; const [dnd, setDnd] = useState(); @@ -42,20 +42,16 @@ const SideBar: React.FC = props => { useEffect(() => { // TODO: fetch to get custom group data setGroups([GENERAL_GROUP]); + setDnd(new Dnd({target: flowChart, scaled: true})); }, []); - useEffect(() => { - if(flowChart) { - setDnd(new Dnd({target: flowChart, scaled: true})); - } - }, [flowChart]); return (
- {flowChart && dnd && ( + {dnd && ( {groups.map(group => ( - + ))} @@ -67,14 +63,13 @@ const SideBar: React.FC = props => { interface IPanelContentProps { dnd: Addon.Dnd; cells: string[]; - flowChart: Graph; } const PanelContent: React.FC = props => { - const {dnd, cells, flowChart} = props; + const {dnd, cells} = props; const ref = useRef(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 = props => { dnd.start(newNode, e); }); } - }, [flowChart]); + }, []); return
; }; diff --git a/packages/core/src/mods/toolBar/index.module.less b/packages/core/src/mods/toolBar/index.module.less index 1c45ff7..25b44e2 100644 --- a/packages/core/src/mods/toolBar/index.module.less +++ b/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; } } diff --git a/packages/core/src/mods/toolBar/index.tsx b/packages/core/src/mods/toolBar/index.tsx index 9c598aa..e374771 100644 --- a/packages/core/src/mods/toolBar/index.tsx +++ b/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 = 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 (
- {flowChart && widgets.map((group, index) => ( + {widgets.map((group, index) => (
{group.map((ToolItem, index) => { return ;