| | |
| | | kapmaprender = () => { |
| | | const { card } = this.state |
| | | |
| | | preWork() |
| | | |
| | | // #region 初始化画布 |
| | | const graph = new Graph({ |
| | | container: document.getElementById(card.uuid + 'container'), |
| | |
| | | target: graph, |
| | | stencilGraphWidth: 200, |
| | | stencilGraphHeight: 180, |
| | | collapsable: true, |
| | | // collapsable: true, |
| | | groups: [ |
| | | { |
| | | title: '基础流程图', |
| | | title: '通用节点', |
| | | name: 'group1', |
| | | }, |
| | | { |
| | |
| | | rowHeight: 55, |
| | | }, |
| | | }) |
| | | document.getElementById('stencil').appendChild(stencil.container) |
| | | document.getElementById(card.uuid + 'stencil').appendChild(stencil.container) |
| | | // #endregion |
| | | |
| | | // #region 快捷键与事件 |
| | |
| | | }), |
| | | ) |
| | | stencil.load(imageNodes, 'group2') |
| | | // #endregion |
| | | |
| | | function preWork() { |
| | | // 这里协助演示的代码,在实际项目中根据实际情况进行调整 |
| | | const container = document.getElementById(card.uuid + 'canvas') |
| | | const stencilContainer = document.createElement('div') |
| | | stencilContainer.id = 'stencil' |
| | | stencilContainer.classList.add('mk-stencil') |
| | | const graphContainer = document.createElement('div') |
| | | graphContainer.id = card.uuid + 'container' |
| | | graphContainer.classList.add('mk-container') |
| | | container.appendChild(stencilContainer) |
| | | container.appendChild(graphContainer) |
| | | } |
| | | } |
| | | |
| | | updateComponent = (card) => { |
| | | if (this.state.card && (!is(fromJS(card.plot), fromJS(this.state.card.plot)) || !is(fromJS(card.style), fromJS(this.state.card.style)))) { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(() => { |
| | | this.viewrender() |
| | | }, 150) |
| | | } |
| | | |
| | | card.width = card.plot.width |
| | | card.name = card.plot.name |
| | | card.subtype = card.plot.subtype |
| | |
| | | </Popover> |
| | | <NormalHeader config={card} updateComponent={this.updateComponent}/> |
| | | <div className="canvas" style={{width: '100%', minHeight: card.plot.height, height: card.plot.height}} id={card.uuid + 'canvas'}> |
| | | <div id={card.uuid + 'stencil'} className="mk-stencil"></div> |
| | | <div id={card.uuid + 'container'} className="mk-container"></div> |
| | | </div> |
| | | <div className="component-name"> |
| | | <div className="center"> |