Import Button added

1 files changed, 530 insertions, 23 deletions

diff --git a/index.html b/index.html
index 554ff15..4ff538b 100644..100755
--- a/index.html
+++ b/index.html
@@ -15,7 +15,6 @@
 
     <script type="text/javascript" src="details.js"></script>
     <script type="text/javascript" src="setup.js"></script>
-    <script type="text/javascript" src="combined.js"></script>
     <script type="text/javascript">
 
         // Stores edgeState for every recently created edge in updateFixedTerminalPoint() function
@@ -76,7 +75,6 @@
                     diagram.
                 */
                 var diagRoot = new XcosDiagram(null, model, null);
-
                 graph.setPanning(true);
                 graph.setConnectable(true);
                 graph.setConnectableEdges(true);
@@ -1037,7 +1035,7 @@
 				 exportXML : 2 arguments
 				 exportXcos: 3 arguments
 				 */
-				function displayXMLorXcos() {
+				function displayXMLorXcos(){
 					var textarea = document.createElement('textarea');
 					textarea.style.width = '400px';
 					textarea.style.height = '400px';
@@ -1100,6 +1098,447 @@
 					showModalWindow(graph, 'Xcos', textarea, 410, 440);
 				});
 
+				/*
+	        		Maverick
+	        		Adding a new button to import an Xcos diagram to our GUI and perform the simulation 
+	        		on the remote server.
+	        		The flow of control is as follows:
+	        		The entire XML document is traversed, beginning from the root node.
+	        		The document is traversed three times: 
+	        		1. All the blocks are appended on the graph. 
+	        		2. All the ports are added to the blocks.
+	        		3. All the links are made.
+
+	        		Old ids are the ones which can be found from the imported file but when the blocks are added 
+                	to the graph mxGraph assigns new ids to them. 
+                	Careful mapping needs to be done between these two ids.
+        		*/
+                editor.addAction('importXcos', function(editor, cell) {
+                    var xml = '';
+                    var div = document.createElement('div');
+                    var node = document.createElement('form');
+                    div.setAttribute("id", "tempdiv");
+                    div.setAttribute("style", "height:200;width:200");
+                    var fileNode=document.createElement('input');
+                    fileNode.type='file'; 
+                    if(window.File && window.FileReader && window.Blob && window.FileList)
+                    {
+                        console.log("supported");
+                    }
+                    else
+                    {
+                        alert('This browser doesn\'t support this feature.');
+                    }
+                    
+                    node.id = "tempform";
+                    node.appendChild(fileNode);
+                    var ta = document.createElement('textarea');
+                    ta.setAttribute("rows", "15");
+                    ta.setAttribute("cols", "60");
+                    ta.setAttribute("name", "tarea");
+                    node.appendChild(ta);
+                    var btn = document.createElement('button');
+                    var btn = document.createElement("button");
+                    btn.innerHTML = 'Submit';
+                    btn.type = "button";
+                    btn.name = "submit";
+                    node.appendChild(btn);
+                    
+
+                    fileNode.addEventListener('change', function(evt){
+                        
+                        var f=evt.target.files[0];
+                        var r = new FileReader();
+                        r.onload = function(e) { 
+                        var contents = e.target.result;
+                       /* console.log( "Got the file.n" 
+                              +"name: " + f.name + "n"
+                              +"type: " + f.type + "n"
+                              +"size: " + f.size + " bytesn"
+                              + "starts with: " + contents.substr(0, contents.indexOf("n"))
+                        );  */
+                        xml=contents;
+                        xml = xml.replace(/\n*/, '');
+                        xml = xml.replace(/>\s*</g, '><');
+                        xml = xml.replace(/<!--[\s\S]*?-->/g,'');
+                        ta.value=xml;
+                        //console.log(xml);
+                      }
+                      
+                      r.readAsText(f);
+                    }, false);
+
+                    /*
+                    	Maverick
+                    	A dictionary is used to perform the mapping between the old ids and the new ids.
+                    	See explanation at the beginning of the function!!!
+                    */
+                    var dict={};
+
+                    btn.onclick = function() {
+                        //console.log(xml);
+                        //xml=ta.value;
+                        /*var xmlqr = ta.value,
+                          xmlDoc = $.parseXML( xmlqr ),
+                          $xmlqr = $( xmlDoc );
+                          console.log("printing");
+                          console.log(xmlqr);*/
+
+
+                        /*
+                        	Maverick
+							The following regular expressions are used to format the imported Xcos XML
+							according to the format that is recognized by the mxCodec decoder.
+                        */  
+                        // xml = xml.replace(/\n*/, '');
+                        // xml = xml.replace(/>\s*</g, '><');
+                        //console.log(xml);
+                        wind.destroy();
+
+                        graph.model.beginUpdate();
+                        try {
+                            var parent = graph.getDefaultParent();
+                            var doc = mxUtils.parseXml(xml);
+                            var codec = new mxCodec(doc);
+                            //var elt = doc.documentElement.firstChild.firstChild.firstChild;
+
+                            var rootNode=doc.documentElement;
+
+                            /*
+                        		Maverick
+                        		Extracting 'Setup Window' values from Xcos diagram and setting the same 
+                        		on the new diagram.
+                        	*/
+                            var defaultProperties = setup("get");
+							var propertiesObject = {};
+
+			                for (var key in defaultProperties) {
+			                	//console.log(key);
+			                    if (defaultProperties.hasOwnProperty(key)) {
+			                    	console.log(defaultProperties[key][1]);
+			                        propertiesObject[defaultProperties[key][1]] = rootNode.getAttribute(defaultProperties[key][1]);
+
+			                        
+			                        /*    
+			                        	Maverick
+			                            Adding the corresponding attributes to the <XcosDiagram> tag.
+			                        */
+			                        diagRoot[defaultProperties[key][1]] = rootNode.getAttribute(defaultProperties[key][1]);
+			                    }
+			                }
+
+			                setup("set", propertiesObject);
+			               
+			            
+                            
+                            while(rootNode.nodeName!='root')
+                            {
+                            	console.log(rootNode.nodeName);
+								/*
+                            		Maverick
+                            		Extracting 'Set Context' values from Xcos diagram and setting the same 
+                            		on the new diagram.
+                            	*/
+                            	if(rootNode.nodeName=='Array'){
+                            		console.log("if");
+                            		var contextValues=[];
+                            		
+                            		var contextChild=rootNode.firstChild;
+                            		
+                            		while(contextChild!=null){
+                            			contextValues.push(contextChild.getAttribute('value'));
+                            			contextChild=contextChild.nextSibling;
+                            		}
+                            		
+                            		diagRoot.context = contextValues;
+					                diagRoot.context.scilabClass = "String[]";
+					                handleContext("set", contextValues);
+					                rootNode=rootNode.nextSibling;
+                            	}
+                            	else{
+                            		console.log('else');
+                            		rootNode=rootNode.firstChild;
+                            	}	
+                            	console.log(rootNode.nodeName);
+                            }
+                            //console.log(elt);
+                            var cells = [];
+                            elt=rootNode.firstChild;
+                            while (elt != null) {
+                            	var curNodeName=elt.nodeName;
+                            	//console.log(curNodeName);
+								//cells.push(codec.decode(elt));
+                                var cell = codec.decode(elt);
+                                //console.log(cell);
+                                var curId=elt.getAttribute('id');
+                          
+                                /*
+                                	Maverick
+                                	Finding the mxGeometry node for all the nodes.
+                                */
+                                var geometryNode = elt.firstChild;
+                                var geometryCell = null;
+                               
+                                if (geometryNode != null) {
+                                    while (geometryNode!=null && geometryNode.nodeName != 'mxGeometry') {
+                                    	geometryNode = geometryNode.nextSibling;
+                                    }
+                                    if(geometryNode!=null){
+                                    	geometryCell = codec.decode(geometryNode);
+                                	}
+                                }
+                            	/*
+	                            	Maverick
+	                            	Adding the blocks.
+	                                Finding out the constructor names for all the blocks which are not a port or a link.
+	                                Ports will be automatically handled with the respective constructor calls.
+                                */
+                            	if(!(curNodeName.endsWith('Link') || curNodeName.endsWith('Port'))){
+                            		var ifaceFuncName=cell.interfaceFunctionName;
+                            		console.log(curNodeName);
+									/*
+	                            		Maverick
+	                            		The following data structure is used to store the information required for each block
+	                            		to the subsequent mapping.
+                            		*/
+                            		var tempObj=new Object();                                    
+                                    tempObj.inputArray=[];
+                                    tempObj.outputArray=[];
+                                    tempObj.controlArray=[];
+                                    tempObj.commandArray=[];
+                                    tempObj.inputIds=[];
+                                    tempObj.outputIds=[];
+                                    tempObj.controlIds=[];
+                                    tempObj.commandIds=[];
+                                    
+
+	                            	var details_instance = null;
+	                                if (ifaceFuncName != null) {
+	                                	//Constructor call
+	                                	console.log(ifaceFuncName);
+	                                    details_instance = new window[ifaceFuncName]();
+	                                }
+	                                if (details_instance != null) {
+	                                    var details = details_instance.define();
+	                                    var enc = new mxCodec(mxUtils.createXmlDocument());
+	                                    var node = enc.encode(details);
+
+	                                    //var label = getImgHTML(ifaceFuncName);
+	                                    var temp = enc.encode(parent);
+	                                    /*node.setAttribute('label', label);*/
+	                                    /*
+					                     * @jiteshjha
+					                    */
+
+					                    // Get the stylesheet for the graph
+					                    var stylesheet = graph.getStylesheet();
+					                    console.log(elt.getAttribute('style'));
+					                    // From the stylesheet, get the style of the particular block
+                                        var styleName=elt.getAttribute('style');
+                                        if(styleName.indexOf(';') != -1) {
+                                            styleName = styleName.substring(0, styleName.indexOf(';'));
+                                        }
+					                    var style = stylesheet.styles[styleName];
+
+
+					                    /*
+					                     * When a particular block is loaded for the first time,
+					                     * the image in the style of the block will be a path to the image.
+					                     * Set the label in the style property of the block has a html image,
+					                     * and set the image in the style property as null
+					                     *
+					                     * NOTE: Since the image of any block need not be changed for
+					                     *       for every movement of that block, the image must be
+					                     *       set only once.
+					                     */
+					                    if(style != null && style['image'] != null) {
+
+					                      // Make label as a image html element
+					                      var label = '<img src="' + style['image'] + '" height="80" width="80">';
+
+					                      // Set label
+					                      style['label'] = label;
+
+					                      // Set image as null
+					                      style['image'] = null;
+
+					                      // Add the label as a part of node
+					                      node.setAttribute('label', label);
+					                    }
+
+					                    /*
+					                     * If a particular block with image tag in it's style property
+					                     * has been invoked already, the image tag would be null for any
+					                     * successive instances of the same block. Hence, set the label
+					                     * from the label tag in style which was set when that blockModel
+					                     * was invoked on the first time.
+					                     */
+					                    if(style!= null && style['label'] != null) {
+
+					                      // Set label from the label field in the style property
+					                      node.setAttribute('label', style['label']);
+					                    }
+	                                    node.setAttribute('parent', temp.getAttribute('id'));
+	                                    var i, arr = [];
+	                                    var blockModel = details_instance.x.model;
+	                                    var graphics = details_instance.x.graphics;
+
+
+	                                    var v1 = graph.insertVertex(graph.getDefaultParent(), null, node, geometryCell.x, geometryCell.y,80, 80, ifaceFuncName);
+	                                    // @Chhavi: Additional attribute to store the block's instance
+	                                    v1.blockInstance = createInstanceTag(details_instance);
+	                                    tempObj.newId=v1.id;
+	                                    console.log(curId);
+										dict[curId]=tempObj;
+	                                    console.log(dict[curId]);
+	                                    //findAndCreatePorts(graph,v1,doc,curId,codec);
+	                                    //createPorts(graph, v1, inputPorts, controlPorts, outputPorts, commandPorts);
+	                                    //console.log(v1);
+	                                    v1.setConnectable(false);
+	                                }
+									
+									/*
+	                                	Maverick
+	                                	Handling SplitBlock in a different manner.
+	                                */
+	                                if(curNodeName=='SplitBlock'){
+	                                	// (x-5, y-5.5) is the offset to correct the position of split-block
+						                var v1 = graph.insertVertex(graph.getDefaultParent(), null, '', geometryCell.x - 5, geometryCell.y - 5.5, 10, 10, 'Split', false);
+						                tempObj.newId=v1.id;
+										dict[curId]=tempObj;
+										v1.setConnectable(false);
+	                                }
+	                            }
+
+	                            if(curNodeName.endsWith('Port'))
+                               	{
+                               		//console.log("port: " + curNodeName + " " + curId);
+                               		var oldParentId=elt.getAttribute('parent');
+                               		var newParentObj=dict[oldParentId];
+                               		var newParentId=newParentObj.newId;
+                               		console.log(graph.getModel().getCell(newParentId));
+                               		var newParentCell=graph.getModel().getCell(newParentId);
+                               		if(curNodeName=='ExplicitInputPort'){
+                               			newParentObj.inputArray.push('E');
+                               			newParentObj.inputIds.push(curId);
+                               		}
+                               		if(curNodeName=='ImplicitInputPort'){
+                               			newParentObj.inputArray.push('I');
+                               			newParentObj.inputIds.push(curId);
+                               		}
+                               		if(curNodeName=='ExplicitOutputPort'){
+                               			newParentObj.outputArray.push('E');
+                               			newParentObj.outputIds.push(curId);
+                               		}
+                               		if(curNodeName=='ImplicitOutputPort'){
+                               			newParentObj.outputArray.push('I');
+                               			newParentObj.outputIds.push(curId);
+                               		}
+                               		if(curNodeName=='CommandPort'){
+                               			newParentObj.commandArray.push('COMMAND');
+                               			newParentObj.commandIds.push(curId);
+                               		}
+                               		if(curNodeName=='ControlPort'){
+                               			newParentObj.controlArray.push('CONTROL');
+                               			newParentObj.controlIds.push(curId);
+                               		}
+                               	}
+                      			//console.log(newParentObj.inputIds);
+	                            //To continue traversal of all the nodes.
+	                            elt=elt.nextSibling;
+                        	}
+							
+							/*
+                        		Maverick
+                        		Adding the ports.
+                        	*/
+                        	//elt=doc.documentElement.firstChild.firstChild.firstChild;
+                        	elt=rootNode.firstChild;
+                        	while(elt!=null)
+                        	{
+                        		var curNodeName=elt.nodeName;
+                        		/*
+                        			Maverick
+                        			Handling all the ports of a given block collectively.
+                        		*/
+                        		if(!(curNodeName.endsWith('Port')||curNodeName.endsWith('Link'))){
+                        			var curId=elt.getAttribute('id');
+                        			var newParentObj=dict[curId];
+                        			if(newParentObj!=null){
+	                        			var newParentId=newParentObj.newId;
+	                               		//console.log(graph.getModel().getCell(newParentId));
+	                               		var newParentCell=graph.getModel().getCell(newParentId); 
+	                               		createPorts(graph, newParentCell, newParentObj.inputArray, newParentObj.controlArray, newParentObj.outputArray, newParentObj.commandArray, newParentObj, dict);		
+                               		}                        
+                        		}
+                        		elt=elt.nextSibling;
+                        	}
+
+                        	/*
+								Maverick
+								Connecting the links. 
+                        	*/
+                        	//elt=doc.documentElement.firstChild.firstChild.firstChild;
+                        	elt=rootNode.firstChild;
+                        	while(elt!=null){
+                        		var curNodeName=elt.nodeName;
+                        		if(curNodeName.endsWith('Link')){
+                        			console.log(curNodeName);
+                        			var pointsArray=[];
+                        			var newSourceObj=dict[elt.getAttribute('source')];
+                        			var newTargetObj=dict[elt.getAttribute('target')];
+                        			console.log(newSourceObj);
+                        			console.log(newTargetObj);
+                        			var newSourceCell=graph.getModel().getCell(newSourceObj.newId);
+                        			var newTargetCell=graph.getModel().getCell(newTargetObj.newId);
+
+                        			var childNode=elt.firstChild;
+                        			if(childNode!=null){
+                        				if(childNode.nodeName=='mxGeometry'){
+                        					var tempNode=childNode.firstChild;
+                        					if(tempNode!=null){
+	                        					if(tempNode.nodeName=='mxPoint'){
+	                        						pointsArray.push(new mxPoint(tempNode.getAttribute('x'),tempNode.getAttribute('y')));
+	                        					}
+	                        					else{
+	                        						if(tempNode.nodeName=='Array'){
+	                        							var pointNode=tempNode.firstChild;
+	                        							while(pointNode!=null){
+	                        								pointsArray.push(new mxPoint(pointNode.getAttribute('x'), pointNode.getAttribute('y')));
+	                        								pointNode=pointNode.nextSibling;
+	                        							}
+	                        						}
+	                        					}
+                        					}
+                        				}
+                        			}
+                        			console.log(newSourceCell);
+	                         		console.log(newTargetCell);
+	                         		for(var i in pointsArray){
+	                         			console.log(pointsArray[i]);
+	                         		}
+	                         		createEdgeObject(graph, newSourceCell, newTargetCell, null);
+                         		}
+                         		elt=elt.nextSibling;
+                        	}
+
+                        } finally {
+                            graph.model.endUpdate();
+                        }
+
+                    }
+
+                    //node.appendChild('br');
+
+                    div.appendChild(node);
+                    //div.appendChild('br');
+                    console.log(div);
+                    node.style.visibility = "visible";
+                    var wind = showModalWindow(graph, 'Set Context', div, 450, 300);
+                });
+
+				
+				addToolbarButton(editor, toolbar, 'importXcos', 'Import Xcos', 'images/export1.png');
 				addToolbarButton(editor, toolbar, 'exportXML', 'Export XML', 'images/export1.png');
 				addToolbarButton(editor, toolbar, 'exportXcos', 'Export Xcos', 'images/export1.png');
 
@@ -1109,10 +1548,10 @@
 
 				editor.addAction('simulate', function (editor, cell) {
 					var diagram = getXcosDiagram(editor, cell);
-
+					
 					var blob = new Blob([diagram], {type: 'text/plain'});
 					var xhr = new XMLHttpRequest();
-					xhr.open('POST','ScilabServlet', true);
+					xhr.open('POST','servlet/SciExec', true);
 					xhr.onload = function() {
 						// Create basic structure for the form
 						var content = document.createElement('div');
@@ -1128,11 +1567,11 @@
 						paragraph.innerHTML = xhr.responseText;
 						content.appendChild(paragraph);
 
-
-						 //var img = document.createElement("img");
-						 //img.src = "data:image/;base64,"+xhr.responseText;
-						 //content.appendChild(img);
-
+						 
+						 var img = document.createElement("img");
+						 img.src = xhr.responseText;
+						 content.appendChild(img);
+						
 						var wind = showModalWindow(graph, 'Properties', content, 1000, 1000);
 					};
 					xhr.onreadystatechange = function(){
@@ -1315,7 +1754,7 @@
 
 
         function XcosDiagram(context, model, attributes) {
-            this.context = context;
+        	this.context = context;
             this.model = model;
             this.finalIntegrationTime = attributes;
         }
@@ -2191,7 +2630,7 @@
 
                     // Get the stylesheet for the graph
                     var stylesheet = graph.getStylesheet();
-
+                    console.log(name);
                     // From the stylesheet, get the style of the particular block
                     var style = stylesheet.styles[name];
 
@@ -2308,20 +2747,39 @@
         };
 
         // Create ports
-        function createPorts(graph, block, left, top, right, bottom) {
-            createInputPorts(graph, block, left, top);
-            createOutputPorts(graph, block, right, bottom);
+        /*
+        	Maverick
+        	Modified the createPorts funtion so that it can be used while creating ports from 
+        	a given Xcos diagram. 
+        	New parameters are the parentObj where the port is supposed to be added and a dictionary
+        	object which contains the mapping between the newly assigned Ids and imported Ids.
+        */
+        function createPorts(graph, block, left, top, right, bottom, parentObj, dict) {   
+        	
+        	createInputPorts(graph, block, left, top, parentObj, dict);
+        	createOutputPorts(graph, block, right, bottom, parentObj, dict);  
+      
         }
 
-        function createInputPorts(graph, block, leftArray, topArray) {
+        function createInputPorts(graph, block, leftArray, topArray, parentObj, dict) {
+        	
             var topNumber = topArray.length;
             var leftNumber = leftArray.length;
+         
             if (leftNumber != 0) {
                 for (var i = 1; i <= leftNumber; i++) {
+         
                     var x = 0;
                     var y = (i / (leftNumber + 1)).toFixed(4);
                     var portType = leftArray[i - 1];
-                    createInputPort(graph, block, x, y, portType, 'left', i);
+                    //console.log(parentObj.inputIds);
+                    if(parentObj!=null){
+                    	createInputPort(graph, block, x, y, portType, 'left', i, dict, parentObj.inputIds);
+                	}
+                	else{
+                		createInputPort(graph, block, x, y, portType, 'left', i);
+                	}
+                	
                 }
             }
             if (topNumber != 0) {
@@ -2329,12 +2787,20 @@
                     var x = (i / (topNumber + 1)).toFixed(4);
                     var y = 0;
                     var portType = topArray[i - 1];
-                    createInputPort(graph, block, x, y, portType, 'top', i);
+                    //console.log(parentObj.controlIds);
+                    if(parentObj!=null){
+                   		createInputPort(graph, block, x, y, portType, 'top', i, dict, parentObj.controlIds);
+                	}
+                	else{
+                		createInputPort(graph, block, x, y, portType, 'top', i);
+                	}
                 }
             }
+           
         };
 
-        function createOutputPorts(graph, block, rightArray, bottomArray) {
+        function createOutputPorts(graph, block, rightArray, bottomArray, parentObj, dict) {
+        	
             var bottomNumber = bottomArray.length;
             var rightNumber = rightArray.length;
             if (rightNumber != 0) {
@@ -2342,7 +2808,13 @@
                     var x = 1;
                     var y = (i / (rightNumber + 1)).toFixed(4);
                     var portType = rightArray[i - 1];
-                    createOutputPort(graph, block, x, y, portType, 'right', i);
+                    //console.log(parentObj.outputIds);
+                    if(parentObj!=null){
+                    	createOutputPort(graph, block, x, y, portType, 'right', i, dict, parentObj.outputIds);
+                	}
+                	else{
+                		createOutputPort(graph, block, x, y, portType, 'right', i);
+                	}
                 }
             }
             if (bottomNumber != 0) {
@@ -2350,12 +2822,20 @@
                     var x = (i / (bottomNumber + 1)).toFixed(4);
                     var y = 1;
                     var portType = bottomArray[i - 1];
-                    createOutputPort(graph, block, x, y, portType, 'bottom', i);
+                    //console.log(parentObj.commandIds);
+                    if(parentObj!=null){
+                    	createOutputPort(graph, block, x, y, portType, 'bottom', i, dict, parentObj.commandIds);
+                	}
+                	else{
+                		createOutputPort(graph, block, x, y, portType, 'bottom', i);
+                	}
                 }
             }
+       
         };
 
-        function createInputPort(graph, block, x, y, portType, position, ordering) {
+        function createInputPort(graph, block, x, y, portType, position, ordering, dict, idArray) {
+       
             var port = null;
             if (portType == 'COMMAND') {
                 port = graph.insertVertex(block, null, 'CommandPort', x, y, 10, 10, 'CommandPort', true);
@@ -2373,11 +2853,25 @@
                     port.geometry.offset = new mxPoint(-10, -6);
                 }
                 port.ordering = ordering;
+
+                if(dict!=null){
+                	var obj=new Object();
+                	obj.newId=port.id;
+            		obj.oldId=idArray[ordering-1];
+            		//console.log(idArray[ordering-1]);
+                	dict[idArray[ordering-1]]=obj;
+                }
+
+                if(block.style=='Split'){
+                	port.setVisible(false);
+                	port.setConnectable(false);
+                }
             }
         };
 
-        function createOutputPort(graph, block, x, y, portType, position, ordering) {
+        function createOutputPort(graph, block, x, y, portType, position, ordering, dict, idArray) {
             var port = null;
+            
             if (portType == 'COMMAND') {
                 port = graph.insertVertex(block, null, 'CommandPort', x, y, 10, 10, 'CommandPort', true);
             } else if (portType == 'CONTROL') {
@@ -2395,6 +2889,19 @@
                     port.geometry.offset = new mxPoint(0, -6);
                 }
                 port.ordering = ordering;
+
+                if(dict!=null){
+                	var obj=new Object();
+                	obj.newId=port.id;
+                	obj.oldId=idArray[ordering-1];
+                	//console.log(idArray[ordering-1]);
+                	dict[idArray[ordering-1]]=obj;
+                }
+
+                 if(block.style=='Split'){
+                	port.setVisible(false);
+                	port.setConnectable(false);
+                }
             }
         };