add the xml parse function

README.md

@@ -55,6 +55,12 @@
 
 ## 更新日志
 
+* 2021年2月1日，前端更新
+
+  * 发现bug，拖拽元件时，发现连线无法跟着移动
+  * 增加了对xml格式文件的电路解析info
+  * 将电路具体的解析info转换为spice网表电路功能待开发
+  * ![avatar](./Schematic/schematic2.png)
 * 2021年1月31日，前端更新
 
   * 增加了元件属性修改功能，增加了对属性的解析

Schematic/spice.xml

@@ -0,0 +1,50 @@
+<mxGraphModel>
+  <root>
+    <mxCell id="0" />
+    <mxCell id="1" parent="0" />
+    <mxCell id="4" value="Name=Vdd;Value=10 V;" style="shape=vdd;verticalLabelPosition=top;verticalAlign=bottom" vertex="1" parent="1">
+      <mxGeometry x="380" y="60" width="40" height="30" as="geometry" />
+    </mxCell>
+    <mxCell id="5" value="Name=Gnd;" style="shape=gnd;verticalLabelPosition=top;verticalAlign=bottom" vertex="1" parent="1">
+      <mxGeometry x="380" y="360" width="40" height="40" as="geometry" />
+    </mxCell>
+    <mxCell id="6" value="Name=NMOS;Length=100nm;Width=20nm;" style="shape=n_mosfet;verticalLabelPosition=top;verticalAlign=bottom" vertex="1" parent="1">
+      <mxGeometry x="330" y="260" width="60" height="60" as="geometry" />
+    </mxCell>
+    <mxCell id="7" value="Name=PMOS;Length=100nm;Width=20nm;" style="shape=p_mosfet;verticalLabelPosition=top;verticalAlign=bottom" vertex="1" parent="1">
+      <mxGeometry x="330" y="130" width="60" height="60" as="geometry" />
+    </mxCell>
+    <mxCell id="8" style="exitX=1;exitY=0.25;sourcePort=s;targetPort=s;" edge="1" parent="1" source="7" target="4">
+      <mxGeometry relative="1" as="geometry" />
+    </mxCell>
+    <mxCell id="9" style="exitX=1;exitY=0.75;sourcePort=d;targetPort=s;" edge="1" parent="1" source="7" target="6">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="400" y="270" />
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="10" style="exitX=1;exitY=0.75;sourcePort=d;targetPort=n;" edge="1" parent="1" source="6" target="5">
+      <mxGeometry relative="1" as="geometry" />
+    </mxCell>
+    <mxCell id="11" style="exitX=0;exitY=0.5;sourcePort=g;targetPort=g;" edge="1" parent="1" source="6" target="7">
+      <mxGeometry relative="1" as="geometry" />
+    </mxCell>
+    <mxCell id="12" value="Name=Pin;" style="shape=pin;verticalLabelPosition=top;verticalAlign=bottom" vertex="1" parent="1">
+      <mxGeometry x="160" y="210" width="40" height="40" as="geometry" />
+    </mxCell>
+    <mxCell id="13" style="exitX=1;exitY=0.5;sourcePort=e;" edge="1" parent="1" source="12" target="11">
+      <mxGeometry relative="1" as="geometry">
+        <mxPoint x="330" y="230" as="targetPoint" />
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="14" value="Name=Pout;" style="shape=pout;verticalLabelPosition=top;verticalAlign=bottom" vertex="1" parent="1">
+      <mxGeometry x="500" y="210" width="40" height="40" as="geometry" />
+    </mxCell>
+    <mxCell id="15" style="exitX=0;exitY=0.5;sourcePort=e;" edge="1" parent="1" source="14" target="9">
+      <mxGeometry relative="1" as="geometry">
+        <mxPoint x="400" y="230" as="targetPoint" />
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>

Schematic/template/schematic.html

@@ -217,23 +217,158 @@
 </script>
 
 <script type="text/javascript">
-    function ParseAttribute(value)
+// 获取属性
+function ParseAttribute(value)
+{
+    value = value||"name=unknown;" ;
+    value = value.toLowerCase();
+    var attribute = {} ;
+    v = value.replace(" ","");
+    var v_split = v.split(";");
+    for(var i = 0; i<v_split.length; i++)
     {
-        value = value||"name=unknown;" ;
+        if(v_split[i].length > 0)
-        value = value.toLowerCase();
-        var attribute = {} ;
-        v = value.replace(" ","");
-        var v_split = v.split(";");
-        for(var i = 0; i<v_split.length; i++)
         {
-            if(v_split[i].length > 0)
+            var pro = v_split[i].split("=");
-            {
+            attribute[pro[0]] = pro[1];
-				var pro = v_split[i].split("=");
-				attribute[pro[0]] = pro[1];
-            }
         }
-        return attribute;
+    }
-    };
+    return attribute;
+};
+
+// 初步从xml中提取有用信息
+function ParseSpice(circuit_xml){
+    var encoder = new mxCodec();
+    var node = encoder.encode(circuit_xml);
+    var content = "";
+    var term = "";
+
+    let reg_1 = /<mxcell.+?\/>/ig;
+    let reg_2 = /<mxcell.+?\/mxcell>/ig;
+    let reg_3 = /<mxGeometry.+?\/>/ig;
+    let reg_4 = /<mxGeometry.+?<\/mxGeometry>/ig;
+    let reg_5 = /vertex="1"/ig;
+
+    let reg_id = /id="(.*?)"/i;
+    let reg_value = /value="(.+?)"/i;
+    let reg_style = /style="(.+?)"/i;
+    let reg_parent = /parent="(.+?)"/i;
+
+    let reg_edge = /edge="(.+?)"/i;
+    let reg_source = /source="(.+?)"/i;
+    let reg_target = /target="(.+?)"/i;
+
+
+    let element_list = [];
+    let wires_list = [];
+    let element = [];
+    let wires = [];
+    let result = {};
+
+    content += mxUtils.getXml(node);
+    // remove heading text
+    term = content.match(reg_1);
+    content = content.replace(term[0],'');
+    content = content.replace(term[1],'');
+    // remove each element_list's geometry
+    term = content.match(reg_2);
+    for(var i=0 ; i<term.length; i++){
+        var geometry = term[i].match(reg_4);
+        if(geometry != null){
+            term[i] = term[i].replace(geometry,'');
+        }
+        else{
+            geometry = term[i].match(reg_3);
+            term[i] = term[i].replace(geometry,'');
+        }
+    }
+    // remove some text
+    for(var i=0; i<term.length; i++){
+        term[i] = term[i].replace("<mxCell","");
+        term[i] = term[i].replace("</mxCell>","");
+        term[i] = term[i].replace(">","");
+    }
+
+    // divide term into element_list and wires_list
+    for(var i=0 ; i<term.length; i++){
+        var vertex = term[i].match(reg_5);
+        if(vertex != null){
+            term[i] = term[i].replace(vertex,"")
+            element_list.push(term[i]);
+        }
+        else{
+            wires_list.push(term[i]);
+        }
+    }
+    // full elements
+    for(var i=0; i<element_list.length; i++){
+        let ele = {};
+        let ele_v = {};
+        let ele_s = {};
+        let temp_ele ;
+        // get id
+        ele['id']     = element_list[i].match(reg_id)[1] ;
+        // get value
+        temp_ele = element_list[i].match(reg_value)[1] ;
+        temp_ele = temp_ele.split(";");
+        for(var j=0; j<temp_ele.length ;j++){
+            let tem = temp_ele[j].split("=");
+            ele_v[tem[0]] = tem[1];
+        }
+        ele['value']  = ele_v ;
+        // get style
+        temp_ele = element_list[i].match(reg_style)[1] ;
+        temp_ele = temp_ele.split(";");
+        for(var j=0; j<temp_ele.length; j++){
+            let tem = temp_ele[j].split("=");
+            ele_s[tem[0]] = tem[1];
+        }
+        ele['style']  = ele_s ;
+        // get parent
+        ele['parent'] = element_list[i].match(reg_parent)[1] ;
+
+        element.push(ele);
+    }
+    // full wires
+    for(var i=0; i<wires_list.length ; i++){
+        let ele = {};
+        let ele_s = {};
+        let temp_ele ;
+
+        // get id
+        ele['id'] = wires_list[i].match(reg_id)[1] ;
+
+        // get style
+        temp_ele = wires_list[i].match(reg_style)[1] ;
+        temp_ele = temp_ele.split(";");
+        for(var j=0; j<temp_ele.length; j++){
+            let tem = temp_ele[j].split("=");
+            ele_s[tem[0]] = tem[1];
+        }
+        ele['style']  = ele_s ;
+
+        // get edge
+        ele['edge'] = wires_list[i].match(reg_edge)[1];
+
+        // get source
+        ele['source'] = wires_list[i].match(reg_source)[1];
+
+        // get target
+        ele['target'] = wires_list[i].match(reg_target)[1];
+
+        wires.push(ele);
+    }
+
+    result['elements'] = element;
+    result['wires'] = wires;
+
+    return result ;
+};
+
+// 根据从xml提取出来的info生成spice网表
+function ExtractSpice(info){
+
+};
 
 </script>
 
@@ -580,34 +715,57 @@ function showOutline(graph)
                 var node = encoder.encode(graph.getModel());
                 mxUtils.popup(mxUtils.getPrettyXml(node), true);
             }));
-            
+
-			document.body.appendChild(mxUtils.button('Create toolbar entry from selection', function()
+
+
+            // Extract SPICE model
+			document.body.appendChild(mxUtils.button('Show SPICE', function()
 			{
-                if (!graph.isSelectionEmpty())
+                let content = '';
-					{
+                var node = ParseSpice(graph.getModel()); 
-						// Creates a copy of the selection array to preserve its state
+                for(var i=0; i<node['elements'].length; i++){
-						var cells = graph.getSelectionCells();
+                    content += node['elements'][i]['id'] + '\t';
-						var bounds = graph.getView().getBounds(cells);
+                    content += node['elements'][i]['value']['Name'] + '\t';
+                    content += node['elements'][i]['style']['shape'] + '\n';
+                };
+
+                for(var i=0; i<node['wires'].length; i++){
+                    content += node['wires'][i]['id'] + '\t';
+                    content += node['wires'][i]['style']['sourcePort'] +'\t';
+                    content += node['wires'][i]['source'] + '\t';
+                    content += node['wires'][i]['target'] + '\n';
+                };
+
+                mxUtils.popup(content, true);
+            }));     
+
+			// document.body.appendChild(mxUtils.button('Create toolbar entry from selection', function()
+			// {
+            //     if (!graph.isSelectionEmpty())
+			// 		{
+			// 			// Creates a copy of the selection array to preserve its state
+			// 			var cells = graph.getSelectionCells();
+			// 			var bounds = graph.getView().getBounds(cells);
 						
-						// Function that is executed when the image is dropped on
+			// 			// Function that is executed when the image is dropped on
-						// the graph. The cell argument points to the cell under
+			// 			// the graph. The cell argument points to the cell under
-						// the mousepointer if there is one.
+			// 			// the mousepointer if there is one.
-						var funct = function(graph, evt, cell)
+			// 			var funct = function(graph, evt, cell)
-						{
+			// 			{
-							graph.stopEditing(false);
+			// 				graph.stopEditing(false);
 			
-							var pt = graph.getPointForEvent(evt);
+			// 				var pt = graph.getPointForEvent(evt);
-							var dx = pt.x - bounds.x;
+			// 				var dx = pt.x - bounds.x;
-							var dy = pt.y - bounds.y;
+			// 				var dy = pt.y - bounds.y;
 							
-							graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
+			// 				graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
-						}
+			// 			}
 			
-						// Creates the image which is used as the drag icon (preview)
+			// 			// Creates the image which is used as the drag icon (preview)
-						var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
+			// 			var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
-						mxUtils.makeDraggable(img, graph, funct);
+			// 			mxUtils.makeDraggable(img, graph, funct);
-					}
+			// 		}
-			}));
+			// }));
 
 			// Wire-mode
 			var checkbox = document.createElement('input');