add the xml parse function

main
ColsonZhang 2021-02-01 20:26:04 +08:00
parent 47d498871f
commit fdb64b61c0
4 changed files with 251 additions and 37 deletions

View File

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

BIN
Schematic/schematic2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 237 KiB

50
Schematic/spice.xml Normal file
View File

@ -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>

View File

@ -217,8 +217,9 @@
</script>
<script type="text/javascript">
function ParseAttribute(value)
{
// 获取属性
function ParseAttribute(value)
{
value = value||"name=unknown;" ;
value = value.toLowerCase();
var attribute = {} ;
@ -233,7 +234,141 @@
}
}
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>
@ -581,34 +716,57 @@ function showOutline(graph)
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())
{
// Creates a copy of the selection array to preserve its state
var cells = graph.getSelectionCells();
var bounds = graph.getView().getBounds(cells);
let content = '';
var node = ParseSpice(graph.getModel());
for(var i=0; i<node['elements'].length; i++){
content += node['elements'][i]['id'] + '\t';
content += node['elements'][i]['value']['Name'] + '\t';
content += node['elements'][i]['style']['shape'] + '\n';
};
// 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)
{
graph.stopEditing(false);
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';
};
var pt = graph.getPointForEvent(evt);
var dx = pt.x - bounds.x;
var dy = pt.y - bounds.y;
graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
}
// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
mxUtils.makeDraggable(img, graph, funct);
}
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
// // the graph. The cell argument points to the cell under
// // the mousepointer if there is one.
// var funct = function(graph, evt, cell)
// {
// graph.stopEditing(false);
// var pt = graph.getPointForEvent(evt);
// var dx = pt.x - bounds.x;
// var dy = pt.y - bounds.y;
// graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
// }
// // Creates the image which is used as the drag icon (preview)
// var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
// mxUtils.makeDraggable(img, graph, funct);
// }
// }));
// Wire-mode
var checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');