var util = require("../../util"); var DataSet = require('../../DataSet'); var DataView = require('../../DataView'); import Node from "./components/Node"; class NodesHandler { constructor(body, images, groups, layoutEngine) { this.body = body; this.images = images; this.groups = groups; this.layoutEngine = layoutEngine; // create the node API in the body container this.body.functions.createNode = this.create.bind(this); this.nodesListeners = { 'add': (event, params) => {this.add(params.items);}, 'update': (event, params) => {this.update(params.items, params.data);}, 'remove': (event, params) => {this.remove(params.items);} }; this.options = {}; this.defaultOptions = { borderWidth: 1, borderWidthSelected: undefined, color: { border: '#2B7CE9', background: '#97C2FC', highlight: { border: '#2B7CE9', background: '#D2E5FF' }, hover: { border: '#2B7CE9', background: '#D2E5FF' } }, fixed: { x:false, y:false }, font: { color: '#343434', size: 14, // px face: 'arial', background: 'none', stroke: 0, // px strokeColor: '#ffffff', align: 'horizontal' }, group: undefined, hidden: false, icon: { face: 'FontAwesome', //'FontAwesome', code: undefined, //'\uf007', size: 50, //50, color:'#2B7CE9' //'#aa00ff' }, image: undefined, // --> URL label: undefined, level: undefined, mass: 1, physics: true, scaling: { min: 10, max: 30, label: { enabled: true, min: 14, max: 30, maxVisible: 30, drawThreshold: 3 }, customScalingFunction: function (min,max,total,value) { if (max === min) { return 0.5; } else { var scale = 1 / (max - min); return Math.max(0,(value - min)*scale); } } }, shape: 'ellipse', size: 25, value: 1, x: undefined, y: undefined }; util.extend(this.options, this.defaultOptions); } setOptions(options) { if (options) { util.selectiveNotDeepExtend(['color'], this.options, options); if (options.color) { let parsedColor = util.parseColor(options.color); if (parsedColor.border !== undefined) {this.options.color.border = parsedColor.border;} if (parsedColor.background !== undefined) {this.options.color.background = parsedColor.background;} if (parsedColor.highlight.border !== undefined) {this.options.color.highlight.border = parsedColor.highlight.border;} if (parsedColor.highlight.background !== undefined) {this.options.color.highlight.background = parsedColor.highlight.background;} if (parsedColor.hover.border !== undefined) {this.options.color.hover.border = parsedColor.hover.border;} if (parsedColor.hover.background !== undefined) {this.options.color.hover.background = parsedColor.hover.background;} } // update the shape in all nodes if (options.shape !== undefined) { for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { this.body.nodes[nodeId].updateShape(); } } } // update the shape size in all nodes if (options.font !== undefined) { for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { this.body.nodes[nodeId].updateLabelModule(); this.body.nodes[nodeId]._reset(); } } } // update the shape size in all nodes if (options.size !== undefined) { for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { this.body.nodes[nodeId]._reset(); } } } // update the state of the variables if needed if (options.hidden !== undefined || options.physics !== undefined) { this.body.emitter.emit('_dataChanged'); } } } /** * Set a data set with nodes for the network * @param {Array | DataSet | DataView} nodes The data containing the nodes. * @private */ setData(nodes, doNotEmit = false) { var oldNodesData = this.body.data.nodes; if (nodes instanceof DataSet || nodes instanceof DataView) { this.body.data.nodes = nodes; } else if (Array.isArray(nodes)) { this.body.data.nodes = new DataSet(); this.body.data.nodes.add(nodes); } else if (!nodes) { this.body.data.nodes = new DataSet(); } else { throw new TypeError('Array or DataSet expected'); } if (oldNodesData) { // unsubscribe from old dataset util.forEach(this.nodesListeners, function (callback, event) { oldNodesData.off(event, callback); }); } // remove drawn nodes this.body.nodes = {}; if (this.body.data.nodes) { // subscribe to new dataset var me = this; util.forEach(this.nodesListeners, function (callback, event) { me.body.data.nodes.on(event, callback); }); // draw all new nodes var ids = this.body.data.nodes.getIds(); this.add(ids, true); } if (doNotEmit === false) { this.body.emitter.emit("_dataChanged"); } } /** * Add nodes * @param {Number[] | String[]} ids * @private */ add(ids, doNotEmit = false) { var id; var newNodes = []; for (var i = 0; i < ids.length; i++) { id = ids[i]; var properties = this.body.data.nodes.get(id); var node = this.create(properties);; newNodes.push(node); this.body.nodes[id] = node; // note: this may replace an existing node } this.layoutEngine.positionInitially(newNodes); if (doNotEmit === false) { this.body.emitter.emit("_dataChanged"); } } /** * Update existing nodes, or create them when not yet existing * @param {Number[] | String[]} ids * @private */ update(ids, changedData) { var nodes = this.body.nodes; var dataChanged = false; for (var i = 0; i < ids.length; i++) { var id = ids[i]; var node = nodes[id]; var data = changedData[i]; if (node !== undefined) { // update node node.setOptions(data, this.constants); } else { dataChanged = true; // create node node = this.create(properties); nodes[id] = node; } } if (dataChanged === true) { this.body.emitter.emit("_dataChanged"); } else { this.body.emitter.emit("_dataUpdated"); } } /** * Remove existing nodes. If nodes do not exist, the method will just ignore it. * @param {Number[] | String[]} ids * @private */ remove(ids) { var nodes = this.body.nodes; for (let i = 0; i < ids.length; i++) { var id = ids[i]; delete nodes[id]; } this.body.emitter.emit("_dataChanged"); } create(properties, constructorClass = Node) { return new constructorClass(properties, this.body, this.images, this.groups, this.options) } } export default NodesHandler;