Spaces:
Build error
Build error
import * as d3 from 'd3'; | |
import * as _ from 'lodash-es'; | |
import { layout } from '../dagre/index.js'; | |
import { arrows, setArrows } from './arrows.js'; | |
import { createClusters, setCreateClusters } from './create-clusters.js'; | |
import { createEdgeLabels, setCreateEdgeLabels } from './create-edge-labels.js'; | |
import { createEdgePaths, setCreateEdgePaths } from './create-edge-paths.js'; | |
import { createNodes, setCreateNodes } from './create-nodes.js'; | |
import { positionClusters } from './position-clusters.js'; | |
import { positionEdgeLabels } from './position-edge-labels.js'; | |
import { positionNodes } from './position-nodes.js'; | |
import { shapes, setShapes } from './shapes.js'; | |
export { render }; | |
// This design is based on http://bost.ocks.org/mike/chart/. | |
function render() { | |
var fn = function (svg, g) { | |
preProcessGraph(g); | |
var outputGroup = createOrSelectGroup(svg, 'output'); | |
var clustersGroup = createOrSelectGroup(outputGroup, 'clusters'); | |
var edgePathsGroup = createOrSelectGroup(outputGroup, 'edgePaths'); | |
var edgeLabels = createEdgeLabels(createOrSelectGroup(outputGroup, 'edgeLabels'), g); | |
var nodes = createNodes(createOrSelectGroup(outputGroup, 'nodes'), g, shapes); | |
layout(g); | |
positionNodes(nodes, g); | |
positionEdgeLabels(edgeLabels, g); | |
createEdgePaths(edgePathsGroup, g, arrows); | |
var clusters = createClusters(clustersGroup, g); | |
positionClusters(clusters, g); | |
postProcessGraph(g); | |
}; | |
fn.createNodes = function (value) { | |
if (!arguments.length) return createNodes; | |
setCreateNodes(value); | |
return fn; | |
}; | |
fn.createClusters = function (value) { | |
if (!arguments.length) return createClusters; | |
setCreateClusters(value); | |
return fn; | |
}; | |
fn.createEdgeLabels = function (value) { | |
if (!arguments.length) return createEdgeLabels; | |
setCreateEdgeLabels(value); | |
return fn; | |
}; | |
fn.createEdgePaths = function (value) { | |
if (!arguments.length) return createEdgePaths; | |
setCreateEdgePaths(value); | |
return fn; | |
}; | |
fn.shapes = function (value) { | |
if (!arguments.length) return shapes; | |
setShapes(value); | |
return fn; | |
}; | |
fn.arrows = function (value) { | |
if (!arguments.length) return arrows; | |
setArrows(value); | |
return fn; | |
}; | |
return fn; | |
} | |
var NODE_DEFAULT_ATTRS = { | |
paddingLeft: 10, | |
paddingRight: 10, | |
paddingTop: 10, | |
paddingBottom: 10, | |
rx: 0, | |
ry: 0, | |
shape: 'rect', | |
}; | |
var EDGE_DEFAULT_ATTRS = { | |
arrowhead: 'normal', | |
curve: d3.curveLinear, | |
}; | |
function preProcessGraph(g) { | |
g.nodes().forEach(function (v) { | |
var node = g.node(v); | |
if (!_.has(node, 'label') && !g.children(v).length) { | |
node.label = v; | |
} | |
if (_.has(node, 'paddingX')) { | |
_.defaults(node, { | |
paddingLeft: node.paddingX, | |
paddingRight: node.paddingX, | |
}); | |
} | |
if (_.has(node, 'paddingY')) { | |
_.defaults(node, { | |
paddingTop: node.paddingY, | |
paddingBottom: node.paddingY, | |
}); | |
} | |
if (_.has(node, 'padding')) { | |
_.defaults(node, { | |
paddingLeft: node.padding, | |
paddingRight: node.padding, | |
paddingTop: node.padding, | |
paddingBottom: node.padding, | |
}); | |
} | |
_.defaults(node, NODE_DEFAULT_ATTRS); | |
_.each(['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'], function (k) { | |
node[k] = Number(node[k]); | |
}); | |
// Save dimensions for restore during post-processing | |
if (_.has(node, 'width')) { | |
node._prevWidth = node.width; | |
} | |
if (_.has(node, 'height')) { | |
node._prevHeight = node.height; | |
} | |
}); | |
g.edges().forEach(function (e) { | |
var edge = g.edge(e); | |
if (!_.has(edge, 'label')) { | |
edge.label = ''; | |
} | |
_.defaults(edge, EDGE_DEFAULT_ATTRS); | |
}); | |
} | |
function postProcessGraph(g) { | |
_.each(g.nodes(), function (v) { | |
var node = g.node(v); | |
// Restore original dimensions | |
if (_.has(node, '_prevWidth')) { | |
node.width = node._prevWidth; | |
} else { | |
delete node.width; | |
} | |
if (_.has(node, '_prevHeight')) { | |
node.height = node._prevHeight; | |
} else { | |
delete node.height; | |
} | |
delete node._prevWidth; | |
delete node._prevHeight; | |
}); | |
} | |
function createOrSelectGroup(root, name) { | |
var selection = root.select('g.' + name); | |
if (selection.empty()) { | |
selection = root.append('g').attr('class', name); | |
} | |
return selection; | |
} | |