diff --git a/src/hook/render/render-view.js b/src/hook/render/render-view.js new file mode 100644 index 0000000..2d8bdc4 --- /dev/null +++ b/src/hook/render/render-view.js @@ -0,0 +1,122 @@ +import * as d3 from 'd3'; +import { WireRender } from './wire'; +import { PortRender } from './port'; +import { InstantiationRender } from './instantiation'; +import { ConnectionRender } from './connection'; +import { CellRender } from './cell'; +import { CrossDotRender } from './cross-dot'; +import { globalLookup } from '../global'; + +export class RenderViewNode { + /** + * + * @param {d3.Selection} g + */ + constructor(g) { + this.g = g; + + /** + * @type {WireRender} + */ + this.wireRender = undefined; + + /** + * @type {CrossDotRender} + */ + this.crossDotRender = undefined; + + /** + * @type {CellRender} + */ + this.cellRender = undefined; + + /** + * @type {ConnectionRender} + */ + this.connectionRender = undefined; + + /** + * @type {InstantiationRender} + */ + this.instantiationRender = undefined; + + /** + * @type {PortRender} + */ + this.portRender = undefined; + + /** + * @type {Map} + */ + this.id2children = new Map; + } + + hasChild(id) { + return this.id2children.has(id); + } + + getChild(id) { + return this.id2children.get(id); + } + + setChild(id, node) { + this.id2children.set(id, node); + } + + /** + * @description 根据布局更新点的位置(不需要创建 DOM) + * @param {import('elkjs').ElkNode} layout + */ + updateNode(layout) { + const skinManager = globalLookup.skinManager; + for (const node of layout.children) { + const skin = skinManager.querySkin(node.renderName); + if (skin) { + this.cellRender.addUpdateDataItem(node); + } else { + if (node.renderType === 'port') { + this.portRender.addUpdateDataItem(node); + } else { + // 没有 skin 的器件或者端口 + this.instantiationRender.addUpdateDataItem(node); + } + } + + // for (const cellPort of node.ports || []) { + // this.connectionRender.addUpdateDataItem(cellPort, node); + // } + } + + this.portRender.update(); + this.instantiationRender.update(); + this.cellRender.update(); + // this.connectionRender.update(); + } + + /** + * @description 更新边(需要删除再创建 DOM) + * @param {import('elkjs').ElkNode} layout + */ + updateEdge(layout) { + this.wireRender.destroy(); + this.crossDotRender.destroy(); + + for (const edge of layout.edges) { + for (const section of edge.sections || []) { + const points = []; + points.push(section.startPoint); + for (const point of section.bendPoints || []) { + points.push(point); + } + points.push(section.endPoint); + this.wireRender.addAsD3DataItems(points, edge); + + // 制作线段 + + } + } + + this.wireRender.render(); + + } +} \ No newline at end of file diff --git a/src/hook/render/wire.js b/src/hook/render/wire.js index e72e486..a479151 100644 --- a/src/hook/render/wire.js +++ b/src/hook/render/wire.js @@ -137,7 +137,11 @@ export class WireRender { return `translate(${point.x},${point.y})`; } }); - transition = transition.on('end', renderOneAnimation); + transition = transition.on('end', function() { + if (id2animation.has(data.id)) { + renderOneAnimation(); + } + }); // 动画结束后重新启动动画 id2animation.set(data.id, { pivot,