import React, {useState, useEffect, useRef} 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'; 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', }; interface IGroupItem { key: string; name: string; cells: string[]; } interface ISideBarProps { flowChart: Graph; } const SideBar: React.FC = props => { const {flowChart} = props; const [dnd, setDnd] = useState(); const [groups, setGroups] = useState([]); // life useEffect(() => { // TODO: fetch to get custom group data setGroups([GENERAL_GROUP]); setDnd(new Dnd({target: flowChart, scaled: true})); }, []); return (
{dnd && ( {groups.map(group => ( ))} )}
); }; interface IPanelContentProps { dnd: Addon.Dnd; cells: 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
; }; export default SideBar;