+ DBG draw box over graph nodes in BiAuditGraph

SE/se-lib/Route/UrlAction/BiAuditGraph.php.network-graph.js

@@ -414,10 +414,53 @@ var p5UI__NetworkGraph = createReactClass({
 		var data = { nodes: this.state.visibleNodesSet, edges: this.state.allEdgesSet };
 		DBG && console.log('DBG:componentDidMount data', { data });
 		this._network = new vis.Network(this._visOutputRef, data, defaultNetworkGraphOptions);
+		this._network.on('stabilized', this.handleNetworkStabilized);
 		if (this.props.onZoom) this._network.on('zoom', this.props.onZoom)
 		this.setState({ initialized: true });
 		this._unsubscribe = this.props.store.subscribe(this._storeUpdated)
 	},
+	handleNetworkStabilized: function (event) {
+		// _network.getBoundingBox( nodeId ) // @return { top, left, bottom, right }
+		var _nodes = this.state.visibleNodesSet;
+		var _network = this._network;
+		if (_nodes) {
+			this.fitToContainer();
+			// > 1. using getBoundingBox
+			// var nodeCoords = _nodes.getIds().map( function (nodeId) {
+			// 	var coords = _network.getBoundingBox( nodeId );
+			// 	// <gml:boundedBy>
+			// 	// 	<gml:Envelope>
+			// 	// 		<gml:lowerCorner>1.0 1.0</gml:lowerCorner>
+			// 	// 		<gml:upperCorner>1.0 1.0</gml:upperCorner>
+			// 	// 	</gml:Envelope>
+			// 	// </gml:boundedBy>
+			// 	var envelope = {
+			// 		upperCorner: _network.canvasToDOM({ x: coords.left, y: coords.top }),
+			// 		lowerCorner: _network.canvasToDOM({ x: coords.right, y: coords.bottom }),
+			// 	};
+			// 	DBG_drawBox(envelope, _nodes.get(nodeId).label);
+			// 	return Object.assign( { nodeId: nodeId }, _nodes.get(nodeId), envelope )
+			// } );
+			// > 2. using getPositions
+			// var nodeCoords = _network.getPositions()
+			// > 3. using storePositions
+			_network.storePositions() // updates x,y in _nodes // NOTE: trigger stabilisation, so may be stabilized event again
+			var nodeCoords = _nodes.getIds().map( function (nodeId) {
+				var node = _nodes.get(nodeId)
+				var domPosition = _network.canvasToDOM({ x: node.x, y: node.y })
+				var canvasPos = _network.body.container.getBoundingClientRect()
+				var envelope = {
+					upperCorner: { x: canvasPos.x + domPosition.x - 10, y: canvasPos.y + domPosition.y - 10 },
+					lowerCorner: { x: canvasPos.x + domPosition.x + 10, y: canvasPos.y + domPosition.y + 10 },
+				};
+				DBG && DBG_drawBox(envelope, _nodes.get(nodeId).label);
+				return Object.assign( { nodeId: nodeId }, node, { position: domPosition, envelope: envelope } )
+			} )
+			DBG && console.log("DBG:stabilized nodeCoords", { nodeCoords });
+		}
+
+		DBG && console.log("DBG:stabilized", { event, network: this._network, nodes: this.state.visibleNodesSet, edges: this.state.allEdgesSet });
+	},
 	_storeUpdated: function () {
 		this.setState( this.getStateFromStore() )
 	},
@@ -593,6 +636,19 @@ var p5UI__RaportOutputPanel = createReactClass({
 	}
 })
 
+function DBG_drawBox(envelope, label) { // envelope: { upperCorner, lowerCorner }
+	var box = document.createElement('div')
+	box.style.position = "absolute"
+	box.style.backgroundColor = "red"
+	box.style.opacity = 0.3
+	box.title = label
+	box.style.top = '' + envelope.upperCorner.y + 'px'
+	box.style.left = '' + envelope.upperCorner.x + 'px'
+	box.style.height = '' + envelope.lowerCorner.y - envelope.upperCorner.y + 'px'
+	box.style.width = '' + envelope.lowerCorner.x - envelope.upperCorner.x + 'px'
+	document.body.appendChild(box)
+}
+
 ReactDOM.render(
 	h(p5UI__RaportOutputPanel, {
 		raportId: RAPORT_ID,