From 12ad13c7a8a129df1c2974308183d461c9cf57c8 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Sun, 24 Jan 2021 00:00:19 +0800 Subject: [PATCH] refactor: use normal html component to replace graph in sideBar --- .../core/src/common/previewCell/behavior.ts | 21 ---- .../core/src/common/previewCell/behavior.tsx | 18 ++++ .../core/src/common/previewCell/branch.ts | 29 ------ .../core/src/common/previewCell/branch.tsx | 32 ++++++ .../src/common/previewCell/index.module.less | 41 ++++++++ packages/core/src/common/previewCell/index.ts | 10 +- packages/core/src/common/previewCell/start.ts | 22 ----- .../core/src/common/previewCell/start.tsx | 18 ++++ .../src/mods/flowChart/createFlowChart.ts | 13 +-- .../core/src/mods/sideBar/index.module.less | 16 ++- packages/core/src/mods/sideBar/index.tsx | 99 +++++++------------ 11 files changed, 167 insertions(+), 152 deletions(-) delete mode 100644 packages/core/src/common/previewCell/behavior.ts create mode 100644 packages/core/src/common/previewCell/behavior.tsx delete mode 100644 packages/core/src/common/previewCell/branch.ts create mode 100644 packages/core/src/common/previewCell/branch.tsx create mode 100644 packages/core/src/common/previewCell/index.module.less delete mode 100644 packages/core/src/common/previewCell/start.ts create mode 100644 packages/core/src/common/previewCell/start.tsx diff --git a/packages/core/src/common/previewCell/behavior.ts b/packages/core/src/common/previewCell/behavior.ts deleted file mode 100644 index 286a437..0000000 --- a/packages/core/src/common/previewCell/behavior.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Shape } from '@antv/x6'; - -const schema = { - base: Shape.Rect, - shape: 'imove-behavior-preview', - top: 20, - width: 80, - height: 40, - label: '处理', - attrs: { - body: { - fill: '#AACCF7', - stroke: '#5E9CEE', - }, - label: { - fill: '#333', - }, - }, -}; - -export default schema; diff --git a/packages/core/src/common/previewCell/behavior.tsx b/packages/core/src/common/previewCell/behavior.tsx new file mode 100644 index 0000000..67ca80b --- /dev/null +++ b/packages/core/src/common/previewCell/behavior.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import styles from './index.module.less'; + +interface IProps { + title?: string; +} + +const Cell: React.FC = (props) => { + const { title = '处理', ...rest } = props; + return ( +
+ {title} +
+ ); +}; + +export default Cell; diff --git a/packages/core/src/common/previewCell/branch.ts b/packages/core/src/common/previewCell/branch.ts deleted file mode 100644 index 7c546b1..0000000 --- a/packages/core/src/common/previewCell/branch.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Shape } from '@antv/x6'; - -const schema = { - base: Shape.Polygon, - shape: 'imove-branch-preview', - top: 20, - width: 80, - height: 40, - label: '分支', - attrs: { - body: { - strokeWidth: 2, - stroke: '#333', - fill: '#FFFC7C', - refPoints: '0,10 10,0 20,10 10,20', - }, - label: { - refX: 0.5, - refY: 0.5, - text: '判断', - fill: '#333', - fontSize: 14, - textAnchor: 'middle', - textVerticalAnchor: 'middle', - }, - }, -}; - -export default schema; diff --git a/packages/core/src/common/previewCell/branch.tsx b/packages/core/src/common/previewCell/branch.tsx new file mode 100644 index 0000000..2fac1f2 --- /dev/null +++ b/packages/core/src/common/previewCell/branch.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import styles from './index.module.less'; + +interface IProps { + title?: string; +} + +const Cell: React.FC = (props) => { + const { title = '判断', ...rest } = props; + return ( +
+ + + + {title} +
+ ); +}; + +export default Cell; diff --git a/packages/core/src/common/previewCell/index.module.less b/packages/core/src/common/previewCell/index.module.less new file mode 100644 index 0000000..b73ca2a --- /dev/null +++ b/packages/core/src/common/previewCell/index.module.less @@ -0,0 +1,41 @@ +.circle { + display: flex; + justify-content: center; + align-items: center; + width: 60px; + height: 60px; + border-radius: 30px; + font-size: 11px; + color: #FFF; + background-color: #333; +} + +.rect { + display: flex; + justify-content: center; + align-items: center; + width: 60px; + height: 30px; + font-size: 11px; + color: #333; + background-color: #AACCF7; + border: 2px solid #5E9CEE; +} + +.diamond { + position: relative; + width: 60px; + height: 30px; + font-size: 11px; + + .text { + z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + line-height: 30px; + text-align: center; + } +} \ No newline at end of file diff --git a/packages/core/src/common/previewCell/index.ts b/packages/core/src/common/previewCell/index.ts index 5b0b56d..e32e2d4 100644 --- a/packages/core/src/common/previewCell/index.ts +++ b/packages/core/src/common/previewCell/index.ts @@ -2,10 +2,10 @@ import start from './start'; import branch from './branch'; import behavior from './behavior'; -const cellSchemaMap: { [key: string]: any } = { - 'imove-start-preview': start, - 'imove-branch-preview': branch, - 'imove-behavior-preview': behavior, +const cellMap: { [key: string]: any } = { + 'imove-start': start, + 'imove-branch': branch, + 'imove-behavior': behavior, }; -export default cellSchemaMap; +export default cellMap; diff --git a/packages/core/src/common/previewCell/start.ts b/packages/core/src/common/previewCell/start.ts deleted file mode 100644 index 98b14ef..0000000 --- a/packages/core/src/common/previewCell/start.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Shape } from '@antv/x6'; - -const schema = { - base: Shape.Circle, - shape: 'imove-start-preview', - top: 0, - width: 80, - height: 80, - label: '开始', - attrs: { - body: { - strokeWidth: 0, - stroke: '#333', - fill: '#333', - }, - label: { - fill: '#FFF', - }, - }, -}; - -export default schema; diff --git a/packages/core/src/common/previewCell/start.tsx b/packages/core/src/common/previewCell/start.tsx new file mode 100644 index 0000000..b32fd69 --- /dev/null +++ b/packages/core/src/common/previewCell/start.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import styles from './index.module.less'; + +interface IProps extends React.HTMLProps { + title?: string; +} + +const Cell: React.FC = (props) => { + const { title = '开始', ...rest } = props; + return ( +
+ {title} +
+ ); +}; + +export default Cell; diff --git a/packages/core/src/mods/flowChart/createFlowChart.ts b/packages/core/src/mods/flowChart/createFlowChart.ts index 396a3bd..d7a205f 100644 --- a/packages/core/src/mods/flowChart/createFlowChart.ts +++ b/packages/core/src/mods/flowChart/createFlowChart.ts @@ -2,18 +2,15 @@ import shortcuts from '../../common/shortcuts'; import { Cell, Edge, Graph, Node } from '@antv/x6'; import { MIN_ZOOM, MAX_ZOOM } from '../../common/const'; import baseCellSchemaMap from '../../common/baseCell'; -import previewCellSchemaMap from '../../common/previewCell'; import { getSelectedEdges } from '../../utils/flowChartUtils'; import { registerServerStorage } from './registerServerStorage'; import MiniMapSimpleNode from '../../components/miniMapSimpleNode'; -// X6 register base/preview cell shape -[baseCellSchemaMap, previewCellSchemaMap].forEach((schemas) => - Object.values(schemas).forEach((schema) => { - const { base, ...rest } = schema; - base.define(rest); - }), -); +// X6 register base cell shape +Object.values(baseCellSchemaMap).forEach((schema) => { + const { base, ...rest } = schema; + base.define(rest); +}); const registerEvents = (flowChart: Graph): void => { flowChart.on('node:added', (args) => { diff --git a/packages/core/src/mods/sideBar/index.module.less b/packages/core/src/mods/sideBar/index.module.less index afb1553..9cc324a 100644 --- a/packages/core/src/mods/sideBar/index.module.less +++ b/packages/core/src/mods/sideBar/index.module.less @@ -13,7 +13,17 @@ } } -.chart { - width: 100%; - min-width: 201px; +.panelContent { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + .cellWrapper { + display: flex; + justify-content: center; + align-items: center; + margin: 8px; + width: 60px; + height: 60px; + } } diff --git a/packages/core/src/mods/sideBar/index.tsx b/packages/core/src/mods/sideBar/index.tsx index 22eaffa..df635e2 100644 --- a/packages/core/src/mods/sideBar/index.tsx +++ b/packages/core/src/mods/sideBar/index.tsx @@ -1,35 +1,24 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import 'antd/es/collapse/style'; import styles from './index.module.less'; import { Collapse } from 'antd'; -import { Addon, Events, Graph, Node } from '@antv/x6'; -import previewCellSchemaMap from '../../common/previewCell'; +import { Addon, Graph, Node } from '@antv/x6'; +import cellMap from '../../common/previewCell'; const { Dnd } = Addon; const { Panel } = Collapse; -const CELL_SIZE = 80; -const CELL_SCALE = 0.7; const GENERAL_GROUP = { key: 'general', name: '通用元件', - cells: [ - 'imove-start-preview', - 'imove-branch-preview', - 'imove-behavior-preview', - ], -}; -const SHAPE_REFLECT_MAP: { [key: string]: string } = { - 'imove-start-preview': 'imove-start', - 'imove-branch-preview': 'imove-branch', - 'imove-behavior-preview': 'imove-behavior', + cellTypes: ['imove-start', 'imove-branch', 'imove-behavior'], }; interface IGroupItem { key: string; name: string; - cells: string[]; + cellTypes: string[]; } interface ISideBarProps { @@ -38,73 +27,55 @@ interface ISideBarProps { const SideBar: React.FC = (props) => { const { flowChart } = props; - const [dnd, setDnd] = useState(); const [groups, setGroups] = useState([]); + const dnd = useMemo(() => new Dnd({ target: flowChart, scaled: true }), [ + flowChart, + ]); // life useEffect(() => { // TODO: fetch to get custom group data setGroups([GENERAL_GROUP]); - setDnd(new Dnd({ target: flowChart, scaled: true })); }, []); return (
- {dnd && ( - - {groups.map((group) => ( - - - - ))} - - )} + + {groups.map((group) => ( + + + + ))} +
); }; interface IPanelContentProps { dnd: Addon.Dnd; - cells: string[]; + cellTypes: string[]; } const PanelContent: React.FC = (props) => { - const { dnd, cells } = props; - const ref = useRef(null); - useEffect(() => { - if (ref.current) { - const graph = new Graph({ - container: ref.current, - width: ref.current.offsetWidth, - height: Math.ceil(cells.length / 3) * CELL_SIZE * CELL_SCALE, - interacting: false, - preventDefaultBlankAction: false, - }); - cells.forEach((cell: any, index: number) => { - const rowIdx = Math.floor(index / 3); - const colIdx = index % 3; - const { top } = previewCellSchemaMap[cell] || {}; - graph.addNode({ - shape: cell, - x: colIdx * (CELL_SIZE + 16 / CELL_SCALE), - y: rowIdx * (CELL_SIZE + 16 / CELL_SCALE) + top, - }); - }); - graph.scale(CELL_SCALE, CELL_SCALE); - graph.on('cell:mousedown', (args: Events.EventArgs['cell:mousedown']) => { - const { node, e } = args; - let newNode = node; - if (SHAPE_REFLECT_MAP[node.shape]) { - newNode = Node.create({ shape: SHAPE_REFLECT_MAP[node.shape] }); - } - dnd.start(newNode, e); - }); - } - }, []); - return
; + const { dnd, cellTypes } = props; + const onMouseDown = (evt: any, cellType: string) => { + dnd.start(Node.create({ shape: cellType }), evt); + }; + return ( +
+ {cellTypes.map((cellType, index) => { + const Component = cellMap[cellType]; + return ( +
+ onMouseDown(evt, cellType)} /> +
+ ); + })} +
+ ); }; export default SideBar;