/** @jsx jsx */ import { useState } from 'react'; import { jsx, css } from '@emotion/core'; import styled from '@emotion/styled'; import { Graph, Cell } from '@antv/x6'; import { Collapse, Form, Input } from 'antd'; import 'antd/lib/form/style'; import 'antd/lib/input/style'; const { Panel } = Collapse; const { Item } = Form; const Header = styled.h3` margin-bottom: 0; padding-left: 20px; height: 36px; line-height: 36px; font-size: 12px; color: #555; border-bottom: 1px solid #ddd; `; const SettingCollapse = styled(Collapse)` font-size: 14px; border: none; > .ant-collapse-item > .ant-collapse-header { height: 36px; line-height: 12px; font-size: 12px; color: #666; } `; interface SettingProps { graph: Graph; } const Setting = ({ graph }: SettingProps): JSX.Element => { const [cell, setCell] = useState | null>(null); graph.on('selection:changed', () => { const cells = graph.getSelectedCells(); setCell(cells.length > 0 ? cells[0] : null); }); let cellType = ''; if (cell) { if (cell.isNode()) { cellType = cell.data.type.toUpperCase(); } else { cellType = 'EDGE'; } } else { cellType = 'FLOW'; } return (
{cellType}
{cell && cell.isNode() && ['decision', 'action'].includes(cell.data.type) && (
{ console.log(`first: ${cell.data.label}`); cell.data.label = e.target.value.trim(); console.log(`then: ${cell.data.label}`); graph.setCellData(cell, cell.data); }} />
)}
); }; export default Setting;