'use strict'; let util = require('../../util'); import NetworkUtil from '../NetworkUtil'; class LayoutEngine { constructor(body) { this.body = body; this.initialRandomSeed = Math.round(Math.random() * 1000000); this.randomSeed = this.initialRandomSeed; this.options = {}; this.optionsBackup = {}; this.defaultOptions = { randomSeed: undefined, improvedLayout: true, hierarchical: { enabled:false, levelSeparation: 150, direction: 'UD', // UD, DU, LR, RL sortMethod: 'hubsize' // hubsize, directed } }; util.extend(this.options, this.defaultOptions); this.bindEventListeners(); } bindEventListeners() { this.body.emitter.on('_dataChanged', () => { this.setupHierarchicalLayout(); }); this.body.emitter.on('_dataLoaded', () => { this.layoutNetwork(); }); this.body.emitter.on('_resetHierarchicalLayout', () => { this.setupHierarchicalLayout(); }); } setOptions(options, allOptions) { if (options !== undefined) { let prevHierarchicalState = this.options.hierarchical.enabled; util.selectiveDeepExtend(["randomSeed", "improvedLayout"],this.options, options); util.mergeOptions(this.options, options, 'hierarchical'); if (options.randomSeed !== undefined) {this.initialRandomSeed = options.randomSeed;} if (this.options.hierarchical.enabled === true) { if (prevHierarchicalState === true) { // refresh the overridden options for nodes and edges. this.body.emitter.emit('refresh', true); } // make sure the level separation is the right way up if (this.options.hierarchical.direction === 'RL' || this.options.hierarchical.direction === 'DU') { if (this.options.hierarchical.levelSeparation > 0) { this.options.hierarchical.levelSeparation *= -1; } } else { if (this.options.hierarchical.levelSeparation < 0) { this.options.hierarchical.levelSeparation *= -1; } } this.body.emitter.emit('_resetHierarchicalLayout'); // because the hierarchical system needs it's own physics and smooth curve settings, we adapt the other options if needed. return this.adaptAllOptionsForHierarchicalLayout(allOptions); } else { if (prevHierarchicalState === true) { // refresh the overridden options for nodes and edges. this.body.emitter.emit('refresh'); return util.deepExtend(allOptions,this.optionsBackup); } } } return allOptions; } adaptAllOptionsForHierarchicalLayout(allOptions) { if (this.options.hierarchical.enabled === true) { // set the physics if (allOptions.physics === undefined || allOptions.physics === true) { allOptions.physics = {solver: 'hierarchicalRepulsion'}; this.optionsBackup.physics = {solver:'barnesHut'}; } else if (typeof allOptions.physics === 'object') { this.optionsBackup.physics = {solver:'barnesHut'}; if (allOptions.physics.solver !== undefined) { this.optionsBackup.physics = {solver:allOptions.physics.solver}; } allOptions.physics['solver'] = 'hierarchicalRepulsion'; } else if (allOptions.physics !== false) { this.optionsBackup.physics = {solver:'barnesHut'}; allOptions.physics['solver'] = 'hierarchicalRepulsion'; } // get the type of static smooth curve in case it is required let type = 'horizontal'; if (this.options.hierarchical.direction === 'RL' || this.options.hierarchical.direction === 'LR') { type = 'vertical'; } // disable smooth curves if nothing is defined. If smooth curves have been turned on, turn them into static smooth curves. if (allOptions.edges === undefined) { this.optionsBackup.edges = {smooth:{enabled:true, type:'dynamic'}}; allOptions.edges = {smooth: false}; } else if (allOptions.edges.smooth === undefined) { this.optionsBackup.edges = {smooth:{enabled:true, type:'dynamic'}}; allOptions.edges.smooth = false; } else { if (typeof allOptions.edges.smooth === 'boolean') { this.optionsBackup.edges = {smooth:allOptions.edges.smooth}; allOptions.edges.smooth = {enabled: allOptions.edges.smooth, type:type} } else { // allow custom types except for dynamic if (allOptions.edges.smooth.type !== undefined && allOptions.edges.smooth.type !== 'dynamic') { type = allOptions.edges.smooth.type; } this.optionsBackup.edges = { smooth: allOptions.edges.smooth.enabled === undefined ? true : allOptions.edges.smooth.enabled, type:allOptions.edges.smooth.type === undefined ? 'dynamic' : allOptions.edges.smooth.type, roundness: allOptions.edges.smooth.roundness === undefined ? 0.5 : allOptions.edges.smooth.roundness, forceDirection: allOptions.edges.smooth.forceDirection === undefined ? false : allOptions.edges.smooth.forceDirection }; allOptions.edges.smooth = { enabled: allOptions.edges.smooth.enabled === undefined ? true : allOptions.edges.smooth.enabled, type:type, roundness: allOptions.edges.smooth.roundness === undefined ? 0.5 : allOptions.edges.smooth.roundness, forceDirection: allOptions.edges.smooth.forceDirection === undefined ? false : allOptions.edges.smooth.forceDirection } } } // force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth. this.body.emitter.emit('_forceDisableDynamicCurves', type); } return allOptions; } seededRandom() { let x = Math.sin(this.randomSeed++) * 10000; return x - Math.floor(x); } positionInitially(nodesArray) { if (this.options.hierarchical.enabled !== true) { this.randomSeed = this.initialRandomSeed; for (let i = 0; i < nodesArray.length; i++) { let node = nodesArray[i]; let radius = 10 * 0.1 * nodesArray.length + 10; let angle = 2 * Math.PI * this.seededRandom(); if (node.x === undefined) { node.x = radius * Math.cos(angle); } if (node.y === undefined) { node.y = radius * Math.sin(angle); } } } } /** * Use Kamada Kawai to position nodes. This is quite a heavy algorithm so if there are a lot of nodes we * cluster them first to reduce the amount. */ layoutNetwork() { if (this.options.hierarchical.enabled !== true && this.options.improvedLayout === true) { // first check if we should Kamada Kawai to layout. The threshold is if less than half of the visible // nodes have predefined positions we use this. let positionDefined = 0; for (let i = 0; i < this.body.nodeIndices.length; i++) { let node = this.body.nodes[this.body.nodeIndices[i]]; if (node.predefinedPosition === true) { positionDefined += 1; } } // if less than half of the nodes have a predefined position we continue if (positionDefined < 0.5 * this.body.nodeIndices.length) { let MAX_LEVELS = 10; let level = 0; let clusterThreshold = 100; // if there are a lot of nodes, we cluster before we run the algorithm. if (this.body.nodeIndices.length > clusterThreshold) { let startLength = this.body.nodeIndices.length; while (this.body.nodeIndices.length > clusterThreshold) { //console.time("clustering") level += 1; let before = this.body.nodeIndices.length; // if there are many nodes we do a hubsize cluster if (level % 3 === 0) { this.body.modules.clustering.clusterBridges(); } else { this.body.modules.clustering.clusterOutliers(); } let after = this.body.nodeIndices.length; if ((before == after && level % 3 !== 0) || level > MAX_LEVELS) { this._declusterAll(); this.body.emitter.emit("_layoutFailed"); console.info("This network could not be positioned by this version of the improved layout algorithm. Please disable improvedLayout for better performance."); return; } //console.timeEnd("clustering") //console.log(level,after) } // increase the size of the edges this.body.modules.kamadaKawai.setOptions({springLength: Math.max(150, 2 * startLength)}) } // position the system for these nodes and edges this.body.modules.kamadaKawai.solve(this.body.nodeIndices, this.body.edgeIndices, true); // shift to center point this._shiftToCenter(); // perturb the nodes a little bit to force the physics to kick in let offset = 70; for (let i = 0; i < this.body.nodeIndices.length; i++) { this.body.nodes[this.body.nodeIndices[i]].x += (0.5 - this.seededRandom())*offset; this.body.nodes[this.body.nodeIndices[i]].y += (0.5 - this.seededRandom())*offset; } // uncluster all clusters this._declusterAll(); // reposition all bezier nodes. this.body.emitter.emit("_repositionBezierNodes"); } } } /** * Move all the nodes towards to the center so gravitational pull wil not move the nodes away from view * @private */ _shiftToCenter() { let range = NetworkUtil.getRangeCore(this.body.nodes, this.body.nodeIndices); let center = NetworkUtil.findCenter(range); for (let i = 0; i < this.body.nodeIndices.length; i++) { this.body.nodes[this.body.nodeIndices[i]].x -= center.x; this.body.nodes[this.body.nodeIndices[i]].y -= center.y; } } _declusterAll() { let clustersPresent = true; while (clustersPresent === true) { clustersPresent = false; for (let i = 0; i < this.body.nodeIndices.length; i++) { if (this.body.nodes[this.body.nodeIndices[i]].isCluster === true) { clustersPresent = true; this.body.modules.clustering.openCluster(this.body.nodeIndices[i], {}, false); } } if (clustersPresent === true) { this.body.emitter.emit('_dataChanged'); } } } getSeed() { return this.initialRandomSeed; } /** * This is the main function to layout the nodes in a hierarchical way. * It checks if the node details are supplied correctly * * @private */ setupHierarchicalLayout() { if (this.options.hierarchical.enabled === true && this.body.nodeIndices.length > 0) { // get the size of the largest hubs and check if the user has defined a level for a node. let node, nodeId; let definedLevel = false; let undefinedLevel = false; this.hierarchicalLevels = {}; this.lastNodeOnLevel = {}; this.hierarchicalParents = {}; this.hierarchicalChildren = {}; this.hierarchicalTrees = {}; this.treeIndex = -1; this.whiteSpaceReductionFactor = 0.5; this.nodeSpacing = 100; this.treeSpacing = 2 * this.nodeSpacing; this.distributionOrdering = {}; this.distributionIndex = {}; this.distributionOrderingPresence = {}; for (nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { node = this.body.nodes[nodeId]; if (node.options.level !== undefined) { definedLevel = true; this.hierarchicalLevels[nodeId] = node.options.level; } else { undefinedLevel = true; } } } // if the user defined some levels but not all, alert and run without hierarchical layout if (undefinedLevel === true && definedLevel === true) { throw new Error('To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.'); return; } else { // define levels if undefined by the users. Based on hubsize. if (undefinedLevel === true) { if (this.options.hierarchical.sortMethod === 'hubsize') { this._determineLevelsByHubsize(); } else if (this.options.hierarchical.sortMethod === 'directed') { this._determineLevelsDirected(); } else if (this.options.hierarchical.sortMethod === 'custom') { this._determineLevelsCustomCallback(); } } // check the distribution of the nodes per level. let distribution = this._getDistribution(); // get the parent children relations. this._generateMap(); // place the nodes on the canvas. this._placeNodesByHierarchy(distribution); // condense the whitespace. this._condenseHierarchy(distribution); // shift to center so gravity does not have to do much this._shiftToCenter(); } } } /** * @private */ _condenseHierarchy(distribution) { // first we have some methods to help shifting trees around. // the main method to shift the trees let shiftTrees = () => { let treeSizes = getTreeSizes(); for (let i = 0; i < treeSizes.length - 1; i++) { let diff = treeSizes[i].max - treeSizes[i+1].min; if (diff !== this.treeSpacing) { shiftTree(i + 1, diff - this.treeSpacing); } } }; // shift a single tree by an offset let shiftTree = (index, offset) => { for (let nodeId in this.hierarchicalTrees) { if (this.hierarchicalTrees.hasOwnProperty(nodeId)) { if (this.hierarchicalTrees[nodeId] === index) { this._setPositionForHierarchy(this.body.nodes[nodeId], offset, undefined, true); } } } }; // get the width of a tree let getTreeSize = (index) => { let min = 1e9; let max = -1e9; for (let nodeId in this.hierarchicalTrees) { if (this.hierarchicalTrees.hasOwnProperty(nodeId)) { if (this.hierarchicalTrees[nodeId] === index) { let pos = this._getPositionForHierarchy(this.body.nodes[nodeId]); min = Math.min(pos, min); max = Math.max(pos, max); } } } return [min, max]; }; // get the width of all trees let getTreeSizes = () => { let treeWidths = []; for (let i = 0; i < this.treeIndex; i++) { treeWidths.push(getTreeSize(i)); } return treeWidths; }; // get a map of all nodes in this branch let getBranchNodes = (source, map) => { map[source.id] = true; if (this.hierarchicalParents[source.id]) { let children = this.hierarchicalParents[source.id].children; if (children.length > 0) { for (let i = 0; i < children.length; i++) { getBranchNodes(this.body.nodes[children[i]], map); } } } }; // get a min max width as well as the maximum movement space it has on either sides // we use min max terminology because width and height can interchange depending on the direction of the layout let getBranchBoundary = (branchMap, maxLevel = 1e9) => { let minSpace = 1e9; let maxSpace = -1e9; let min = 1e9; let max = -1e9; for (let branchNode in branchMap) { if (branchMap.hasOwnProperty(branchNode)) { let node = this.body.nodes[branchNode]; let level = this.hierarchicalLevels[node.id]; let index = this.distributionIndex[node.id]; let position = this._getPositionForHierarchy(this.body.nodes[node.id]); // if this is the node at the side, there is no previous node if (index != 0) { let prevNode = this.distributionOrdering[level][index - 1]; if (branchMap[prevNode.id] === undefined) { let prevPos = this._getPositionForHierarchy(prevNode); minSpace = Math.min(minSpace, position - prevPos); } } // if this is the node at the end there is no next node if (index != this.distributionOrdering[level].length - 1) { let nextNode = this.distributionOrdering[level][index + 1]; if (branchMap[nextNode.id] === undefined) { let nextPos = this._getPositionForHierarchy(nextNode); maxSpace = Math.max(maxSpace, nextPos - position); } } // the width is only relevant for the levels two nodes have in common. This is why we filter on this. if (level <= maxLevel) { min = Math.min(position, min); max = Math.max(position, max); } } } // if there was no next node, the max space is infinite (1e9 ~ close enough) maxSpace = maxSpace < 0 ? 1e9 : maxSpace; return [min, max, minSpace, maxSpace]; }; // get the maximum level of a branch. let getMaxLevel = (nodeId) => { let level = this.hierarchicalLevels[nodeId]; if (this.hierarchicalParents[nodeId]) { let children = this.hierarchicalParents[nodeId].children; if (children.length > 0) { for (let i = 0; i < children.length; i++) { level = Math.max(level,getMaxLevel(children[i])); } } } return level; }; // check what the maximum level is these nodes have in common. let getCollisionLevel = (node1, node2) => { let maxLevel1 = getMaxLevel(node1.id); let maxLevel2 = getMaxLevel(node2.id); return Math.min(maxLevel1, maxLevel2); }; // check if two nodes have the same parent(s) let hasSameParent = (node1, node2) => { let parents1 = this.hierarchicalChildren[node1.id]; let parents2 = this.hierarchicalChildren[node2.id]; if (parents1 === undefined || parents2 === undefined) { return false; } parents1 = parents1.parents; parents2 = parents2.parents; for (let i = 0; i < parents1.length; i++) { for (let j = 0; j < parents2.length; j++) { if (parents1[i] == parents2[j]) { return true; } } } return false; }; // condense elements. These can be nodes or branches depending on the callback. let shiftElementsCloser = (callback, levels, centerParents) => { for (let i = 0; i < levels.length; i++) { let level = levels[i]; let levelNodes = this.distributionOrdering[level]; if (levelNodes.length > 1) { for (let i = 0; i < levelNodes.length - 1; i++) { if (hasSameParent(levelNodes[i],levelNodes[i+1]) === true) { if (this.hierarchicalTrees[levelNodes[i].id] === this.hierarchicalTrees[levelNodes[i+1].id]) { callback(levelNodes[i],levelNodes[i+1], centerParents); } }} } } }; // Global var in this scope to define when the movement has stopped. let stillShifting = false; // callback for shifting branches let branchShiftCallback = (node1, node2, centerParent = false) => { //window.CALLBACKS.push(() => { let pos1 = this._getPositionForHierarchy(node1); let pos2 = this._getPositionForHierarchy(node2); let diffAbs = Math.abs(pos2 - pos1); //console.log("NOW CHEcKING:", node1.id, node2.id, diffAbs); if (diffAbs > this.nodeSpacing) { let branchNodes1 = {}; branchNodes1[node1.id] = true; let branchNodes2 = {}; branchNodes2[node2.id] = true; getBranchNodes(node1, branchNodes1); getBranchNodes(node2, branchNodes2); // check the largest distance between the branches let maxLevel = getCollisionLevel(node1, node2); let [min1,max1, minSpace1, maxSpace1] = getBranchBoundary(branchNodes1, maxLevel); let [min2,max2, minSpace2, maxSpace2] = getBranchBoundary(branchNodes2, maxLevel); //console.log(node1.id, getBranchBoundary(branchNodes1, maxLevel), node2.id, getBranchBoundary(branchNodes2, maxLevel), maxLevel); let diffBranch = Math.abs(max1 - min2); if (diffBranch > this.nodeSpacing) { let offset = max1 - min2 + this.nodeSpacing; if (offset < -minSpace2 + this.nodeSpacing) { offset = -minSpace2 + this.nodeSpacing; //console.log("RESETTING OFFSET", max1 - min2 + this.nodeSpacing, -minSpace2, offset); } if (offset < 0) { //console.log("SHIFTING", node2.id, offset); this._shiftBlock(node2.id, offset); stillShifting = true; if (centerParent === true) this._centerParent(node2); } } } //this.body.emitter.emit("_redraw");}) }; // callback for shifting individual nodes let unitShiftCallback = (node1, node2, centerParent) => { //window.CALLBACKS.push(() => { let pos1 = this._getPositionForHierarchy(node1); let pos2 = this._getPositionForHierarchy(node2); let diffAbs = Math.abs(pos2 - pos1); //console.log("NOW CHEcKING:", node1.id, node2.id, diffAbs); if (diffAbs > this.nodeSpacing) { let diff = (pos1 + this.nodeSpacing - pos2) * this.whiteSpaceReductionFactor; if (diff != 0) { stillShifting = true; } let factor = node2.edges.length / (node1.edges.length + node2.edges.length); this._setPositionForHierarchy(node2, pos2 + factor * diff, undefined, true); this._setPositionForHierarchy(node1, pos1 - (1-factor) * diff, undefined, true); if (centerParent === true) { this._centerParent(node2); } } //this.body.emitter.emit("_redraw");}) }; // method to shift all nodes closer together iteratively let shiftUnitsCloser = (iterations) => { let levels = Object.keys(this.distributionOrdering); for (let i = 0; i < iterations; i++) { stillShifting = false; shiftElementsCloser(unitShiftCallback, levels, false); if (stillShifting !== true) { //console.log("FINISHED shiftUnitsCloser IN " + i); break; } } //console.log("FINISHED shiftUnitsCloser IN " + iterations); }; // method to remove whitespace between branches. Because we do bottom up, we can center the parents. let shiftBranchesCloserBottomUp = (iterations) => { let levels = Object.keys(this.distributionOrdering); levels = levels.reverse(); for (let i = 0; i < iterations; i++) { stillShifting = false; shiftElementsCloser(branchShiftCallback, levels, true); if (stillShifting !== true) { //console.log("FINISHED shiftBranchesCloserBottomUp IN " + i); break; } } }; // center all parents let centerAllParents = () => { for (let node in this.body.nodes) { this._centerParent(this.body.nodes[node]); } }; // the actual work is done here. shiftBranchesCloserBottomUp(5); centerAllParents(); shiftUnitsCloser(2); shiftTrees(); } /** * We use this method to center a parent node and check if it does not cross other nodes when it does. * @param node * @private */ _centerParent(node) { if (this.hierarchicalChildren[node.id]) { let parents = this.hierarchicalChildren[node.id].parents; for (var i = 0; i < parents.length; i++) { let parentId = parents[i]; let parentNode = this.body.nodes[parentId]; if (this.hierarchicalParents[parentId]) { // get the range of the children let minPos = 1e9; let maxPos = -1e9; let children = this.hierarchicalParents[parentId].children; if (children.length > 0) { for (let i = 0; i < children.length; i++) { let childNode = this.body.nodes[children[i]]; minPos = Math.min(minPos, this._getPositionForHierarchy(childNode)); maxPos = Math.max(maxPos, this._getPositionForHierarchy(childNode)); } } let level = this.hierarchicalLevels[parentId]; let index = this.distributionIndex[parentId]; let position = this._getPositionForHierarchy(parentNode); let minSpace = 1e9; let maxSpace = 1e9; if (index != 0) { let prevNode = this.distributionOrdering[level][index - 1]; let prevPos = this._getPositionForHierarchy(prevNode); minSpace = position - prevPos; } if (index != this.distributionOrdering[level].length - 1) { let nextNode = this.distributionOrdering[level][index + 1]; let nextPos = this._getPositionForHierarchy(nextNode); maxSpace = Math.min(maxSpace, nextPos - position); } let newPosition = 0.5 * (minPos + maxPos); if (newPosition < position + maxSpace && newPosition > position - minSpace) { this._setPositionForHierarchy(parentNode, newPosition, undefined, true); } } } } } /** * This function places the nodes on the canvas based on the hierarchial distribution. * * @param {Object} distribution | obtained by the function this._getDistribution() * @private */ _placeNodesByHierarchy(distribution) { this.positionedNodes = {}; // start placing all the level 0 nodes first. Then recursively position their branches. for (let level in distribution) { if (distribution.hasOwnProperty(level)) { // sort nodes in level by position: let nodeArray = Object.keys(distribution[level]); nodeArray = this._indexArrayToNodes(nodeArray); this._sortNodeArray(nodeArray); for (let i = 0; i < nodeArray.length; i++) { let node = nodeArray[i]; if (this.positionedNodes[node.id] === undefined) { this._setPositionForHierarchy(node, this.nodeSpacing * i, level); this.positionedNodes[node.id] = true; this._placeBranchNodes(node.id, level); } } } } } /** * Receives an array with node indices and returns an array with the actual node references. Used for sorting based on * node properties. * @param idArray */ _indexArrayToNodes(idArray) { let array = []; for (let i = 0; i < idArray.length; i++) { array.push(this.body.nodes[idArray[i]]) } return array; } /** * This function get the distribution of levels based on hubsize * * @returns {Object} * @private */ _getDistribution() { let distribution = {}; let nodeId, node; // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time. // the fix of X is removed after the x value has been set. for (nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { node = this.body.nodes[nodeId]; let level = this.hierarchicalLevels[nodeId] === undefined ? 0 : this.hierarchicalLevels[nodeId]; if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { node.y = this.options.hierarchical.levelSeparation * level; node.options.fixed.y = true; } else { node.x = this.options.hierarchical.levelSeparation * level; node.options.fixed.x = true; } if (distribution[level] === undefined) { distribution[level] = {}; } distribution[level][nodeId] = node; } } return distribution; } /** * Get the hubsize from all remaining unlevelled nodes. * * @returns {number} * @private */ _getHubSize() { let hubSize = 0; for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { let node = this.body.nodes[nodeId]; if (this.hierarchicalLevels[nodeId] === undefined) { hubSize = node.edges.length < hubSize ? hubSize : node.edges.length; } } } return hubSize; } /** * this function allocates nodes in levels based on the recursive branching from the largest hubs. * * @param hubsize * @private */ _determineLevelsByHubsize() { let hubSize = 1; let levelDownstream = (nodeA, nodeB) => { if (this.hierarchicalLevels[nodeB.id] === undefined) { // set initial level if (this.hierarchicalLevels[nodeA.id] === undefined) { this.hierarchicalLevels[nodeA.id] = 0; } // set level this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] + 1; } }; while (hubSize > 0) { // determine hubs hubSize = this._getHubSize(); if (hubSize === 0) break; for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { let node = this.body.nodes[nodeId]; if (node.edges.length === hubSize) { this._crawlNetwork(levelDownstream,nodeId); } } } } } /** * TODO: release feature * @private */ _determineLevelsCustomCallback() { let minLevel = 100000; // TODO: this should come from options. let customCallback = function(nodeA, nodeB, edge) { }; let levelByDirection = (nodeA, nodeB, edge) => { let levelA = this.hierarchicalLevels[nodeA.id]; // set initial level if (levelA === undefined) {this.hierarchicalLevels[nodeA.id] = minLevel;} let diff = customCallback( NetworkUtil.cloneOptions(nodeA,'node'), NetworkUtil.cloneOptions(nodeB,'node'), NetworkUtil.cloneOptions(edge,'edge') ); this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] + diff; }; this._crawlNetwork(levelByDirection); this._setMinLevelToZero(); } /** * this function allocates nodes in levels based on the direction of the edges * * @param hubsize * @private */ _determineLevelsDirected() { let minLevel = 10000; let levelByDirection = (nodeA, nodeB, edge) => { let levelA = this.hierarchicalLevels[nodeA.id]; // set initial level if (levelA === undefined) {this.hierarchicalLevels[nodeA.id] = minLevel;} if (edge.toId == nodeB.id) { this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] + 1; } else { this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] - 1; } }; this._crawlNetwork(levelByDirection); this._setMinLevelToZero(); } /** * Small util method to set the minimum levels of the nodes to zero. * @private */ _setMinLevelToZero() { let minLevel = 1e9; // get the minimum level for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { minLevel = Math.min(this.hierarchicalLevels[nodeId], minLevel); } } // subtract the minimum from the set so we have a range starting from 0 for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { this.hierarchicalLevels[nodeId] -= minLevel; } } } /** * Update the bookkeeping of parent and child. * @param parentNodeId * @param childNodeId * @private */ _generateMap() { let fillInRelations = (parentNode, childNode) => { if (this.hierarchicalLevels[childNode.id] > this.hierarchicalLevels[parentNode.id]) { let parentNodeId = parentNode.id; let childNodeId = childNode.id; if (this.hierarchicalParents[parentNodeId] === undefined) { this.hierarchicalParents[parentNodeId] = {children: [], amount: 0}; } this.hierarchicalParents[parentNodeId].children.push(childNodeId); if (this.hierarchicalChildren[childNodeId] === undefined) { this.hierarchicalChildren[childNodeId] = {parents: [], amount: 0}; } this.hierarchicalChildren[childNodeId].parents.push(parentNodeId); } }; this._crawlNetwork(fillInRelations); } /** * Crawl over the entire network and use a callback on each node couple that is connected to each other. * @param callback | will receive nodeA nodeB and the connecting edge. A and B are unique. * @param startingNodeId * @private */ _crawlNetwork(callback = function() {}, startingNodeId) { let progress = {}; let crawler = (node) => { if (progress[node.id] === undefined) { progress[node.id] = true; let childNode; for (let i = 0; i < node.edges.length; i++) { if (node.edges[i].toId === node.id) {childNode = node.edges[i].from;} else {childNode = node.edges[i].to;} if (node.id !== childNode.id) { callback(node, childNode, node.edges[i]); crawler(childNode); } } } }; // we can crawl from a specific node or over all nodes. if (startingNodeId === undefined) { for (let i = 0; i < this.body.nodeIndices.length; i++) { let node = this.body.nodes[this.body.nodeIndices[i]]; crawler(node); } } else { let node = this.body.nodes[startingNodeId]; if (node === undefined) { console.error("Node not found:", startingNodeId); return; } crawler(node); } } /** * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes * on a X position that ensures there will be no overlap. * * @param parentId * @param parentLevel * @private */ _placeBranchNodes(parentId, parentLevel) { // if this is not a parent, cancel the placing. This can happen with multiple parents to one child. if (this.hierarchicalParents[parentId] === undefined) { return; } // get a list of childNodes let childNodes = []; for (let i = 0; i < this.hierarchicalParents[parentId].children.length; i++) { childNodes.push(this.body.nodes[this.hierarchicalParents[parentId].children[i]]); } // use the positions to order the nodes. this._sortNodeArray(childNodes); // position the childNodes for (let i = 0; i < childNodes.length; i++) { let childNode = childNodes[i]; let childNodeLevel = this.hierarchicalLevels[childNode.id]; // check if the child node is below the parent node and if it has already been positioned. if (childNodeLevel > parentLevel && this.positionedNodes[childNode.id] === undefined) { // get the amount of space required for this node. If parent the width is based on the amount of children. let pos; // we get the X or Y values we need and store them in pos and previousPos. The get and set make sure we get X or Y if (i === 0) {pos = this._getPositionForHierarchy(this.body.nodes[parentId]);} else {pos = this._getPositionForHierarchy(childNodes[i-1]) + this.nodeSpacing;} this._setPositionForHierarchy(childNode, pos, childNodeLevel); // if overlap has been detected, we shift the branch if (this.lastNodeOnLevel[childNodeLevel] !== undefined) { let previousPos = this._getPositionForHierarchy(this.body.nodes[this.lastNodeOnLevel[childNodeLevel]]); if (pos - previousPos < this.nodeSpacing) { let diff = (previousPos + this.nodeSpacing) - pos; let sharedParent = this._findCommonParent(this.lastNodeOnLevel[childNodeLevel], childNode.id); this._shiftBlock(sharedParent.withChild, diff); } } // store change in position. this.lastNodeOnLevel[childNodeLevel] = childNode.id; this.positionedNodes[childNode.id] = true; this._placeBranchNodes(childNode.id, childNodeLevel); } else { return; } } // center the parent nodes. let minPos = 1e9; let maxPos = -1e9; for (let i = 0; i < childNodes.length; i++) { let childNodeId = childNodes[i].id; minPos = Math.min(minPos, this._getPositionForHierarchy(this.body.nodes[childNodeId])); maxPos = Math.max(maxPos, this._getPositionForHierarchy(this.body.nodes[childNodeId])); } this._setPositionForHierarchy(this.body.nodes[parentId], 0.5 * (minPos + maxPos), parentLevel); } /** * Shift a branch a certain distance * @param parentId * @param diff * @private */ _shiftBlock(parentId, diff) { if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { this.body.nodes[parentId].x += diff; } else { this.body.nodes[parentId].y += diff; } if (this.hierarchicalParents[parentId] !== undefined) { for (let i = 0; i < this.hierarchicalParents[parentId].children.length; i++) { this._shiftBlock(this.hierarchicalParents[parentId].children[i], diff); } } } /** * Find a common parent between branches. * @param childA * @param childB * @returns {{foundParent, withChild}} * @private */ _findCommonParent(childA,childB) { let parents = {}; let iterateParents = (parents,child) => { if (this.hierarchicalChildren[child] !== undefined) { for (let i = 0; i < this.hierarchicalChildren[child].parents.length; i++) { let parent = this.hierarchicalChildren[child].parents[i]; parents[parent] = true; iterateParents(parents, parent) } } }; let findParent = (parents, child) => { if (this.hierarchicalChildren[child] !== undefined) { for (let i = 0; i < this.hierarchicalChildren[child].parents.length; i++) { let parent = this.hierarchicalChildren[child].parents[i]; if (parents[parent] !== undefined) { return {foundParent:parent, withChild:child}; } let branch = findParent(parents, parent); if (branch.foundParent !== null) { return branch; } } } return {foundParent:null, withChild:child}; }; iterateParents(parents, childA); return findParent(parents, childB); } /** * Abstract the getting of the position so we won't have to repeat the check for direction all the time * @param node * @param position * @param level * @private */ _setPositionForHierarchy(node, position, level, doNotUpdate = false) { if (doNotUpdate !== true) { if (this.distributionOrdering[level] === undefined) { this.distributionOrdering[level] = []; this.distributionOrderingPresence[level] = {}; } if (this.distributionOrderingPresence[level][node.id] === undefined) { this.distributionOrdering[level].push(node); this.distributionIndex[node.id] = this.distributionOrdering[level].length - 1; } this.distributionOrderingPresence[level][node.id] = true; if (this.hierarchicalTrees[node.id] === undefined) { if (this.hierarchicalChildren[node.id] !== undefined) { let tree = 1; // get the lowest tree denominator. for (let i = 0; i < this.hierarchicalChildren[node.id].parents.length; i++) { let parentId = this.hierarchicalChildren[node.id].parents[i]; if (this.hierarchicalTrees[parentId] !== undefined) { //tree = Math.min(tree,this.hierarchicalTrees[parentId]); tree = this.hierarchicalTrees[parentId]; } } //for (let i = 0; i < this.hierarchicalChildren.parents.length; i++) { // let parentId = this.hierarchicalChildren.parents[i]; // this.hierarchicalTrees[parentId] = tree; //} this.hierarchicalTrees[node.id] = tree; } else { this.hierarchicalTrees[node.id] = ++this.treeIndex; } } } if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { node.x = position; } else { node.y = position; } } /** * Abstract the getting of the position of a node so we do not have to repeat the direction check all the time. * @param node * @returns {number|*} * @private */ _getPositionForHierarchy(node) { if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { return node.x; } else { return node.y; } } /** * Use the x or y value to sort the array, allowing users to specify order. * @param nodeArray * @private */ _sortNodeArray(nodeArray) { if (nodeArray.length > 1) { if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { nodeArray.sort(function (a, b) { return a.x - b.x; }) } else { nodeArray.sort(function (a, b) { return a.y - b.y; }) } } } } export default LayoutEngine;