| | |
| | | } |
| | | } |
| | | }, |
| | | // { |
| | | // inherit: 'rect', |
| | | // width: 66, |
| | | // height: 36, |
| | | // attrs: { |
| | | // body: { |
| | | // strokeWidth: 0, |
| | | // fill: 'transparent' |
| | | // }, |
| | | // text: { |
| | | // fontSize: 12, |
| | | // fill: '#262626' |
| | | // } |
| | | // } |
| | | // }, |
| | | true |
| | | ) |
| | | |
| | |
| | | if (BData) { |
| | | BID = BData.$BID || '' |
| | | } |
| | | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | BID: BID || '', |
| | |
| | | showPorts(ports, false) |
| | | }) |
| | | |
| | | graph.on('node:click', ({ e, x, y, node, view }) => { |
| | | graph.on('node:click', ({ node }) => { |
| | | this.selectNode = node |
| | | |
| | | this.setState({node: node.store.data}) |
| | | }) |
| | | graph.on('edge:click', ({ e, x, y, edge, view }) => { |
| | | graph.on('edge:click', ({ edge }) => { |
| | | this.selectNode = edge |
| | | |
| | | this.setState({node: edge.store.data}) |
| | | |
| | | graph.clearTransformWidgets() |
| | | }) |
| | | graph.on('blank:click', ({ e, x, y }) => { |
| | | graph.on('blank:click', () => { |
| | | this.selectNode = null |
| | | |
| | | this.setState({node: null}) |
| | |
| | | }) |
| | | |
| | | const p3 = graph.createNode({ |
| | | shape: 'mk-text', |
| | | label: '文本' |
| | | shape: 'mk-text' |
| | | }) |
| | | |
| | | stencil.load([p1, p2, p3], 'group2') |
| | |
| | | }) |
| | | |
| | | graph |
| | | .use(new Transform({ |
| | | resizing: true, |
| | | rotating: true |
| | | })) |
| | | .use(new Selection()) |
| | | .use(new Snapline()) |
| | | .use(new Snapline({ |
| | | enabled: true, |
| | | filter: (Graph) => Graph.prop('shape') !== 'lane' |
| | | })) |
| | | .use(new Keyboard()) |
| | | .use(new Clipboard()) |
| | | .use(new History()) |
| | |
| | | graph.bindKey(['meta+c', 'ctrl+c'], () => { |
| | | const cells = graph.getSelectedCells() |
| | | if (cells.length) { |
| | | graph.copy(cells) |
| | | if (cells[0].prop('shape') !== 'lane' && cells[0].prop('shape') !== 'edge') { |
| | | graph.copy(cells) |
| | | } |
| | | } |
| | | return false |
| | | }) |
| | | graph.bindKey(['meta+x', 'ctrl+x'], () => { |
| | | const cells = graph.getSelectedCells() |
| | | if (cells.length) { |
| | | graph.cut(cells) |
| | | if (cells[0].prop('shape') !== 'lane' && cells[0].prop('shape') !== 'edge') { |
| | | graph.cut(cells) |
| | | } |
| | | } |
| | | return false |
| | | }) |
| | |
| | | graph.bindKey(['backspace', 'delete'], () => { |
| | | const cells = graph.getSelectedCells() |
| | | if (cells.length) { |
| | | graph.removeCells(cells) |
| | | this.selectNode = null |
| | | this.setState({node: null}) |
| | | |
| | | if (cells[0].prop('shape') === 'lane') { |
| | | graph.startBatch('delete-lane') |
| | | |
| | | graph.removeCells(cells) |
| | | this.deleteLane(cells[0], graph) |
| | | |
| | | graph.stopBatch('delete-lane') |
| | | } else { |
| | | graph.removeCells(cells) |
| | | } |
| | | } |
| | | }) |
| | | |
| | |
| | | showPorts(ports, false) |
| | | }) |
| | | |
| | | graph.on('node:added', ({ cell, index, options }) => { |
| | | graph.on('node:added', ({ cell }) => { |
| | | if (cell.prop('shape') === 'lane') { |
| | | if (cell.prop('zIndex') === 0) return |
| | | |
| | | graph.startBatch('add-lane') |
| | | |
| | | this.addLane(cell, graph) |
| | |
| | | if (num <= 1) { |
| | | message.warning('请添加泳道!') |
| | | graph.removeCells([cell]) |
| | | } else { |
| | | } else if (!cell.prop('parent')) { |
| | | this.addNode(cell, graph) |
| | | } |
| | | } |
| | | }) |
| | | graph.on('node:click', ({ e, x, y, node, view }) => { |
| | | graph.on('node:click', ({ node }) => { |
| | | this.selectNode = node |
| | | this.setState({node: node.store.data}) |
| | | |
| | | if (node.prop('shape') === 'lane') { |
| | | graph.clearTransformWidgets() |
| | | } |
| | | }) |
| | | graph.on('edge:click', ({ e, x, y, edge, view }) => { |
| | | graph.on('edge:click', ({ edge }) => { |
| | | this.selectNode = edge |
| | | this.setState({node: edge.store.data}) |
| | | |
| | | graph.clearTransformWidgets() |
| | | }) |
| | | graph.on('blank:click', ({ e, x, y }) => { |
| | | graph.on('blank:click', () => { |
| | | this.selectNode = null |
| | | |
| | | this.setState({node: null}) |
| | |
| | | }) |
| | | |
| | | const p3 = graph.createNode({ |
| | | shape: 'mk-text', |
| | | label: '文本' |
| | | shape: 'mk-text' |
| | | }) |
| | | |
| | | stencil.load([p1, p2, p3], 'group2') |
| | |
| | | // }, {padding: 20}) |
| | | } |
| | | |
| | | deleteLane = (cell, graph) => { |
| | | let id = cell.id |
| | | |
| | | let nodes = graph.getNodes() |
| | | let cells = [] |
| | | |
| | | nodes.forEach(item => { |
| | | if (item.prop('shape') === 'lane') return |
| | | |
| | | if (item.prop('parent') === id) { |
| | | cells.push(item) |
| | | } |
| | | }) |
| | | |
| | | graph.removeCells(cells) |
| | | |
| | | this.resetlane(cell.id, cell.prop('position/x'), -cell.prop('size/width')) |
| | | } |
| | | |
| | | addLane = (cell, graph) => { |
| | | const { config } = this.state |
| | | |
| | |
| | | } |
| | | |
| | | let height = 400 |
| | | |
| | | if (typeof(config.plot.height) === 'number' || /px/.test(config.plot.height)) { |
| | | height = parseInt(config.plot.height) |
| | | } |