Login/Register
How to get the parent child relationship between connected mxgraph
Asked Answered
Solved javascriptjquerynode.jsmxgraph
G

1

13

I'm trying to get simplified relationship between connected mxgraph

Question: I'm trying to get the simplified relationship, once the graph is drawn.

i'm trying to get relationship between connected nodes in json.

Note: solution must work for every drawn state.

Here is codepen:

https://codepen.io/eabangalore/pen/pmELpL

i want to get the relationship from above code snippet.

Expected output (from drawn relationship):

[
  {"id":0,"parent":"#","text":"A","child":[{"cid":1,"connectionText":"Bangalore"}]},
  {"id":1,"parent":0,"text":"B","child":[{"cid":2,"connectionText":""}]},
  {"id":2,"parent":1,"text":"C","child":[{"cid":null,"connectionText":""}]}
];

Please refer codepen, as below snippet is not working.

<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
  Dynamic toolbar example for mxGraph. This example demonstrates changing the
  state of the toolbar at runtime.
-->
<html>
<head>
	<title>Toolbar example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory -->
  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    
    function setGraphData(){
      var graphState ={"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","value":"A","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"271.56251525878906","y":"82.44792175292969","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","value":"B","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"678.2291717529297","y":"106.89236450195312","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"4","value":"Bangalore","edge":"1","parent":"1","source":"2","target":"3"},"children":[{"tagName":"mxGeometry","attributes":{"relative":"1","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"5","value":"C","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"1013.7847747802734","y":"83.55902862548828","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"6","edge":"1","parent":"1","source":"3","target":"5"},"children":[{"tagName":"mxGeometry","attributes":{"relative":"1","as":"geometry"}}]}]}]};
      
      localStorage.setItem('graphState',JSON.stringify(graphState));
    }
    
    	function html2json(html){
		if(html.nodeType==3){
			return {
				"tagName":"#text",
				"content":html.textContent
			}
		}
		var element = {
			"tagName":html.tagName
		};

		if(html.getAttributeNames().length>0){
			element.attributes = html.getAttributeNames().reduce(
				function(acc,at){acc[at]=html.getAttribute(at); return acc;},
				{}
			);
		}

		if(html.childNodes.length>0){
			element.children = Array.from(html.childNodes)
				.filter(
					function(el){
						return el.nodeType!=3
						||el.textContent.trim().length>0
					})
				.map(function(el){return html2json(el);});
		}
		return element;
	}

	function json2html(json){
		var xmlDoc = document.implementation.createDocument(null, json.tagName);

		var addAttributes = function(jsonNode, node){
			if(jsonNode.attributes){
				Object.keys(jsonNode.attributes).map(
					function(name){
						node.setAttribute(name,jsonNode.attributes[name]);
					}
				);
			}
		}

		var addChildren = function(jsonNode,node){
			if(jsonNode.children){
				jsonNode.children.map(
					function(jsonChildNode){
						json2htmlNode(jsonChildNode,node);
					}
				);
			}
		}

		var json2htmlNode = function(jsonNode,parent){
			if(jsonNode.tagName=="#text"){
				return xmlDoc.createTextNode(jsonNode.content);
			}

			var node = xmlDoc.createElement(jsonNode.tagName);

			addAttributes(jsonNode,node);
			addChildren(jsonNode,node);

			parent.appendChild(node);
		}

		addAttributes(json,xmlDoc.firstElementChild);
		addChildren(json,xmlDoc.firstElementChild);

		return xmlDoc;
	}
  </script>

  <!-- Loads and initializes the library -->
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of the document (see below).
		function main()
		{
      setGraphData();
			// Checks if browser is supported
			if (!mxClient.isBrowserSupported())
			{
				// Displays an error message if the browser is
				// not supported.
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// Defines an icon for creating new connections in the connection handler.
				// This will automatically disable the highlighting of the source vertex.
				mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

				// Creates the div for the toolbar
				var tbContainer = document.createElement('div');
				tbContainer.style.position = 'absolute';
				tbContainer.style.overflow = 'hidden';
				tbContainer.style.padding = '2px';
				tbContainer.style.left = '0px';
				tbContainer.style.top = '0px';
				tbContainer.style.width = '24px';
				tbContainer.style.bottom = '0px';
				
				document.body.appendChild(tbContainer);
			
				// Creates new toolbar without event processing
				var toolbar = new mxToolbar(tbContainer);
				toolbar.enabled = false
				
				// Creates the div for the graph
				var container = document.createElement('div');
				container.style.position = 'absolute';
				container.style.overflow = 'hidden';
				container.style.left = '24px';
				container.style.top = '0px';
				container.style.right = '0px';
				container.style.bottom = '0px';
				container.style.background = 'url("editors/images/grid.gif")';

				document.body.appendChild(container);
				
				// Workaround for Internet Explorer ignoring certain styles
				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(tbContainer);
					new mxDivResizer(container);
				}
	
				// Creates the model and the graph inside the container
				// using the fastest rendering available on the browser
				var model = new mxGraphModel();
				var graph = new mxGraph(container, model);

				// Enables new connections in the graph
				graph.setConnectable(true);
				graph.setMultigraph(false);

				// Stops editing on enter or escape keypress
				var keyHandler = new mxKeyHandler(graph);
				var rubberband = new mxRubberband(graph);
				
				var addVertex = function(icon, w, h, style)
				{
					var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
					vertex.setVertex(true);
				
					var img = addToolbarItem(graph, toolbar, vertex, icon);
					img.enabled = true;
					
					graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
					{
						var tmp = graph.isSelectionEmpty();
						mxUtils.setOpacity(img, (tmp) ? 100 : 20);
						img.enabled = tmp;
					});
				};
				
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rectangle.gif', 100, 40, '');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/triangle.gif', 40, 40, 'shape=triangle');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/actor.gif', 30, 40, 'shape=actor');
        
        
       				// read state on load 
				if(window.localStorage.graphState){	
					var doc = json2html(JSON.parse(localStorage.graphState));	
					var dec = new mxCodec(doc);
					dec.decode(doc.documentElement, graph.getModel());
				}

				// save state on change
				graph.getModel().addListener('change',function(){
						var codec = new mxCodec();		
						window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
							graph.getModel()
						)));
				});
			}
		}

		function addToolbarItem(graph, toolbar, prototype, image)
		{
			// Function that is executed when the image is dropped on
			// the graph. The cell argument points to the cell under
			// the mousepointer if there is one.
			var funct = function(graph, evt, cell, x, y)
			{
				graph.stopEditing(false);

				var vertex = graph.getModel().cloneCell(prototype);
				vertex.geometry.x = x;
				vertex.geometry.y = y;
					
				graph.addCell(vertex);
				graph.setSelectionCell(vertex);
			}
			
			// Creates the image which is used as the drag icon (preview)
			var img = toolbar.addMode(null, image, function(evt, cell)
			{
				var pt = this.graph.getPointForEvent(evt);
				funct(graph, evt, cell, pt.x, pt.y);
			});
			
			// Disables dragging if element is disabled. This is a workaround
			// for wrong event order in IE. Following is a dummy listener that
			// is invoked as the last listener in IE.
			mxEvent.addListener(img, 'mousedown', function(evt)
			{
				// do nothing
			});
			
			// This listener is always called first before any other listener
			// in all browsers.
			mxEvent.addListener(img, 'mousedown', function(evt)
			{
				if (img.enabled == false)
				{
					mxEvent.consume(evt);
				}
			});
						
			mxUtils.makeDraggable(img, graph, funct);
			
			return img;
		}

	</script>
</head>

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();" >
</body>
</html>

please help me thanks in advance!!!

Giro answered 7/5, 2019 at 17:53 Comment(0)
P
4

Check out this CodePen link which has the modified version of the snippet you gave. In it, you can add new elements and change texts and see an updated json string representing the relationships in the graph: https://codepen.io/tien-q-nguyen2/pen/GaQXBO

I also edited the function a little from the first time I posted this answer.

Note: based on the expected output you put in the original question, there is only one parent per vertex element ({"id":1,"parent":0 <= in the example you gave), so if there are multiple nodes pointing to the same child , the child's parent property will only refer to the first parent's id. I can change the parent's property to be an array that can keep multiple parent's ids if you want.

function getNodesFrom(graph){
    var cells = graph.getModel().cells;

    var vertices = [], edges = [];
    for (var key in cells) {
        if (cells[key].isVertex()){
            vertices.push(cells[key]);
        } 
        else if (cells[key].isEdge()){
            edges.push(cells[key]);
        }
    }

    var simpleVertices = [], simpleEdges = [];
    var newIndex = 0;
    var newIndexOf = [];
    vertices.forEach(function(vertex){
        simpleVertices.push({id: newIndex, value: vertex.value});
        newIndexOf[vertex.id] = newIndex++;
    });
    edges.forEach(function(edge){
        if (edge.target === null || edge.source === null) return;
        simpleEdges.push({
            parentId: newIndexOf[edge.source.id], 
            childId: newIndexOf[edge.target.id], 
            value: edge.value
        });
    });

    var edgesForParentIndex = [];
    var edgesForChildIndex = [];
    simpleEdges.forEach(function(edge){
        if (edgesForParentIndex[edge.parentId] === undefined){
            edgesForParentIndex[edge.parentId] = [];
        }
        edgesForParentIndex[edge.parentId].push(edge);

        if (edgesForChildIndex[edge.childId] === undefined){
            edgesForChildIndex[edge.childId] = [];
        }
        edgesForChildIndex[edge.childId].push(edge);
    });

    var nodes = [];
    simpleVertices.forEach(function(vertex){
        var node = {};
        node.id = vertex.id;
        if (edgesForChildIndex[node.id] === undefined){
            node.parent = '#';
        } else {
            node.parent = edgesForChildIndex[node.id][0].parentId;
        }
        node.text = (vertex.value === undefined || vertex.value === null) ? '' : vertex.value;
        node.child = [];
        if (edgesForParentIndex[node.id] === undefined){
            node.child.push({cid: null, connectionText: ""});
        } else {
            edgesForParentIndex[node.id].forEach(function(edge){
                var text = (edge.value === undefined || edge.value === null) ? '' : edge.value;
                node.child.push({cid: edge.childId, connectionText: text});
            });
        }
        nodes.push(node);
    });

    return nodes;
}
Polydeuces answered 23/5, 2019 at 5:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.