VML drawing board ② script-VMLgraph. js and XMLtool. js

Script
*************
* VMLgraph. js
*************
Var xo = 0;
Var yo = 0;
Var ox = 80;
Var oy = 20;
Var dx = 0;
Var dy = 0;
Var drawKey = false;
Var itemID = 0;
Var ShapeItemNum = 0;
Var ShapeItemX = 0;
Var ShapeItemY = 0;
Var CurveItemNum = 0;
Var NodeDelete = false;
Var ToolBarNum = 2; // preset tool number
Var gradientX =-1;

Function cursor (k ){
Xo = event. clientX-ox;
Yo = event. clientY-oy;
If (k & xo> = 0 & yo> = 0)
Oxy. innerHTML = xo + "," + yo;
Else
Oxy. innerHTML = "";
If (drawKey ){
Paint ();
View. innerHTML = tree(canvas.doc umentElement, 0 );
}
}

Function setOverColor (v ){
If (! NodeDelete) return;
V. myColor = v. strokecolor;
If (v. strokecolor = "red ")
V. strokecolor = '#000000 ';
Else
V. strokecolor = '# ff0000 ';
}
Function setOutColor (v ){
If (! NodeDelete) return;
V. strokecolor = v. myColor;
View. innerHTML = tree(canvas.doc umentElement, 0 );
}
Function deleteNode (v ){
If (! NodeDelete) return;
Var id = v. id;
For (I = 0; I <canvas. selectNodes ("/* // *"). length; I ++ ){
Var node = canvas. selectNodes ("/* // *") [I];
If (node. getAttribute ("id") = id ){
Canvas.doc umentElement. childNodes [0]. removeChild (node );
View. innerHTML = tree(canvas.doc umentElement, 0 );
Return;
}
}
}

Function setElement (node ){
Node. setAttribute ("id") = itemID;
Node. setAttribute ("myColor") = "#";
Node. setAttribute ("onMouseOver") = "setOverColor (this )";
Node. setAttribute ("onMouseOut") = "setOutColor (this )";
Node. setAttribute ("onClick") = "deleteNode (this )";

Var subobjField = canvas. createElement ("v: stroke ");
SubobjField. setAttribute ("color") = color1.fillcolor;
SubobjField. setAttribute ("dashstyle") = dashstyle. dashstyle;
Node. appendChild (subobjField );
If (textbox. style. visibility = "visible" & txt. value. length ){
Var subobjField = canvas. createElement ("v: path ");
SubobjField. setAttribute ("textpathok") = "true ";
Node. appendChild (subobjField );
Var subobjField = canvas. createElement ("v: textpath ");
SubobjField. setAttribute ("on") = "true ";
SubobjField. setAttribute ("string") = txt. value;
SubobjField. setAttribute ("style") = "font: normal 16pt 'arial black '";
Node. appendChild (subobjField );
}
Canvas.doc umentElement. childNodes [0]. appendChild (node );
}

Function mouse_down (){
DrawKey = true;
Dx = xo;
Dy = yo;
ItemID ++;
If (ToolBarNum! = 7) ShapeItemNum = 0;
Switch (ToolBarNum ){
Case 3:
Var objField = canvas. createElement ("v: line ");
ObjField. setAttribute ("from") = xo + "," + yo;
ObjField. setAttribute ("to") = xo + "," + yo;
Return setElement (objField );
Case 4:
If (CurveItemNum = 0 ){
CurveItemNum = 1;
Var objField = canvas. createElement ("v: curve ");
ObjField. setAttribute ("from") = xo + "," + yo;
ObjField. setAttribute ("to") = xo + "," + yo;
ObjField. setAttribute ("control1") = xo + "," + yo;
ObjField. setAttribute ("control2") = xo + "," + yo;
Var subobjField = canvas. createElement ("v: fill ");
SubobjField. setAttribute ("opacity") = 0;
ObjField. appendChild (subobjField );
Return setElement (objField );
}
Return;
Case 9:
Var objField = canvas. createElement ("v: polyline ");
ObjField. setAttribute ("points") = xo + "," + yo + "" + xo + "," + yo;
Var subobjField = canvas. createElement ("v: fill ");
SubobjField. setAttribute ("opacity") = 0;
ObjField. appendChild (subobjField );
Return setElement (objField );
Case 7:
If (ShapeItemNum = 0 ){
Var objField = canvas. createElement ("v: shape ");
ObjField. setAttribute ("style") = "width: 500; height: 309 ";
ObjField. setAttribute ("path") = "m" + xo + "," + yo + "l" + xo + "," + yo;
ShapeItemX = xo;
ShapeItemY = yo;
} Else {
ObjField = canvas.doc umentElement. childNodes [0]. lastChild;
ObjField. setAttribute ("path") = objField. getAttribute ("path") + "" + xo + "," + yo;
Return;
}
ShapeItemNum ++;
Break;
Case 5:
Var objField = canvas. createElement ("v: rect ");
Break;
Case 6:
Var objField = canvas. createElement ("v: roundrect ");
ObjField. setAttribute ("arcsize") = 0.2;
Break;
Case 8:
Var objField = canvas. createElement ("v: oval ");
Break;
Case 10:
S = "";
S = tree(canvas.doc umentElement, 1 );
View. innerHTML = s;
Return;
Defaule:
DrawKey = false;
Return;
}
If (objField ){
If (ToolBarNum! = 7)
ObjField. setAttribute ("style") = "left:" + xo + "; top:" + yo + "; width: 0; height: 0 ;";
Var subobjField = canvas. createElement ("v: fill ");
SubobjField. setAttribute ("opacity") = gradientBar. opacity;
SubobjField. setAttribute ("angle") = gradientBar. angle;
SubobjField. setAttribute ("type") = gradientBar. type;
SubobjField. setAttribute ("color") = gradientBar. color. value;
SubobjField. setAttribute ("color2") = gradientBar. color2.value;
SubobjField. setAttribute ("colors") = gradientBar. colors. value;
SubobjField. setAttribute ("focusposition") = gradientBar. focusposition;
ObjField. appendChild (subobjField );
Return setElement (objField );
}
Return;
}

Function mouse_up (){
DrawKey = false;
If (CurveItemNum> 0) CurveItemNum ++;
If (CurveItemNum> 3) CurveItemNum = 0;
If (ToolBarNum = 7 ){
If (Math. abs (xo-ShapeItemX) <2 & Math. abs (yo-ShapeItemY) <2 ){
ShapeItemNum = 0;
Element = canvas.doc umentElement. childNodes [0]. lastChild;
Var regerp =/[0-9] +, [0-9] + $/
Var str = Element. getAttribute ("path ");
Element. setAttribute ("path") = str. replace (regerp, "x e ");
View. innerHTML = tree(canvas.doc umentElement, 0 );
}
}
}

Function paint (){
Element = canvas.doc umentElement. childNodes [0]. lastChild;
Var x0, y0, x1, y1;
X0 = Math. min (dx, xo );
Y0 = Math. min (dy, yo );
X1 = Math. max (dx, xo );
Y1 = Math. max (dy, yo );
Var box = "left:" + x0 + "; top:" + y0 + "; width:" + (x1-x0) + "; height:" + (y1-y0) + "; ";
Switch (ToolBarNum ){
Case 4:
If (CurveItemNum = 2 ){
Element. setAttribute ("control1") = xo + "," + yo;
Element. setAttribute ("control2") = Element. getAttribute ("");
Break;
}
If (CurveItemNum = 3 ){
Element. setAttribute ("control2") = xo + "," + yo;
Break;
}
Case 3:
Element. setAttribute ("to") = xo + "," + yo;
Break;
Case 7:
Var regerp =/[0-9] +, [0-9] + $/
Var str = Element. getAttribute ("path ");
Element. setAttribute ("path") = str. replace (regerp, xo + "," + yo );
Break;
Case 5:
Case 6:
Case 8:
Var regerp =/left. + height: [0-9] + ;/
Var str = Element. getAttribute ("style ");
Element. setAttribute ("style") = str. replace (regerp, box );
Break;
Case 9:
Var regerp =/[0-9] +, [0-9] + $/
Var str = Element. getAttribute ("points ");
Element. setAttribute ("points") = str + "" + xo + "," + yo;
Break;
Defaule:
Break;
}

}

Function init (){
Tool_box_refresh (); // initial Toolbar
View. innerHTML = tree(canvas.doc umentElement); // initial drawing Area
Color. innerHTML = tree (tools. selectNodes ("*/colorbar") [0]); // select the initial color
Linebox. innerHTML = tree (tools. selectNodes ("*/linebox") [0]); // select the initial line type
GradientBox. innerHTML = tree (tools. selectNodes ("*/gradient") [0]); // fill the initial
}

// Draw the toolbar
Function tool_box_refresh (){
Var buffer = "";
Var I;
For (I = 0; I <tools. selectNodes ("*/toolbar"). length; I ++ ){
Var node = tools. selectNodes ("*/toolbar") [I];
Var id = node. getAttribute ("id ");
Node. childNodes [0]. setAttribute ("onClick") = "tool_box_select (" + id + ", this. title )";
Var node1 = node. selectNodes ("*/v: rect") [0];
If (id = ToolBarNum ){
Node1.setAttribute ("fillcolor") = "# ffcccc"
Node1.setAttribute ("strokecolor") = "# ff0000"
} Else {
Node1.setAttribute ("fillcolor") = "# ffffff"
Node1.setAttribute ("strokecolor") = "#000000"
}
Buffer + = tree (node. childNodes [0]);
}
Toolbox. innerHTML = buffer;
}

// Select a tool
Function tool_box_select (v, t ){
Var key = ToolBarNum;
ToolBarNum = v;
Tool_box_refresh ();
Hoke ();
If (v = 7 ){
If (key = 7 & ShapeItemNum> 0 ){
Element = canvas.doc umentElement. childNodes [0]. lastChild;
Var str = Element. getAttribute ("path ");
Element. setAttribute ("path") = str + "x e ";
View. innerHTML = tree(canvas.doc umentElement, 0 );
ShapeItemNum = 0;
}
}
If (v = 10)
If (textbox. style. visibility = "hidden ")
Textbox. style. visibility = "visible ";
Else
Textbox. style. visibility = "hidden ";
NodeDelete = false;
If (v = 1 ){
NodeDelete = true;
View. innerHTML = tree(canvas.doc umentElement, 0 );
}
}

// Color Selection
// Var setcolorkey = color1;
Function setcolor (c ){
Var setcolorkey = color1;
Setcolorkey. fillcolor = c;
}

Function gradientColor (v ){
V. fillcolor = color1.fillcolor;
GradientRefresh ();
Return;
Var m = tools.doc umentElement. selectNodes ("/*/gradient // v: shape"). length;
Var node = tools.doc umentElement. selectNodes ("/*/gradient // v: shape ");
For (I = 0; I <m; I ++ ){
If (node [I]. getAttribute ("id") = v. id)
Node [I]. setAttribute ("fillcolor") = color1.fillcolor;
}
GradientRefresh ();
}
Function gradientPoint (v ){
If (gradientX <0)
GradientX = xo-508-parseInt (v. style. left );
N = xo-508-gradientX;
If (n <8) n = 8;
If (n> 108) n = 108;
V. style. left = n;
GradientRefresh ();
}
Function anglePoint (v ){
Angle. style. left = Math. floor (xo-516)/25) * 25 + 8;
GradientRefresh ();
}
Function opacityPoint (v ){
Opacity. style. left = Math. floor (xo-516)/25) * 25 + 8;
GradientRefresh ();
}
Function settype (v ){
If (v. style. borderColor = "black ")
V. style. borderColor = "red ";
Else
V. style. borderColor = "black ";
GradientRefresh ();
}
Function setGradientX (){
GradientX =-1;
}

Function gradientRefresh (){
Var m = (parseInt (gradient4.style. left)-parseInt (gradient1.style. left ));
Var n1 = (parseInt (gradient2.style. left)-parseInt (gradient1.style. left)/m * 100;
Var n2 = (parseInt (gradient3.style. left)-parseInt (gradient1.style. left)/m * 100;
GradientBar. color. value = gradient1.fillcolor;
GradientBar. color2.value = gradient4.fillcolor;
If (type3.style. borderColor = "black ")
GradientBar. colors. value = ",";
Else
GradientBar. colors. value = n1 + "%" + gradient2.fillcolor + "," + n2 + "%" + gradient3.fillcolor;
If (type1.style. borderColor = "black ")
GradientBar. type = "solid ";
Else
GradientBar. type = "gradient ";
If (type2.style. borderColor = "red ")
GradientBar. type = "gradientradial ";
N1 = (parseInt (focus1.style. left)-8)/m * 100;
N2 = (parseInt (focus2.style. left)-8)/m * 100;
GradientBar. focusposition. value = n1 + "%," + n2 + "% ";
GradientBar. angle = (parseInt (angle. style. left)-8) * 3.6;
GradientBar. opacity = (parseInt (opacity. style. left)-8)/m
}

*************
* XMLtool. js
*************

// Transfer the XML document to the server
Function saveXML ()
{
Var xmlHTTP = new ActiveXObject ("Microsoft. XMLHTTP ");
XmlHTTP. open ("POST", "server. php", false); // server. ASP is used when asp is used.
XmlHTTP. setRequestHeader ("Contrn-type", "text/xml ");
XmlHTTP. setRequestHeader ("Contrn-charset", "gb2312 ");

XmlHTTP.send(tree(canvas.doc umentElement ));
Var s = xmlHTTP. responseText;
Minview. innerHTML = s. replace (/WIDTH: 500; HEIGHT: 300/, "WIDTH: 120; HEIGHT: 72 ")
If (xmlHTTP. responseText. indexOf ("Error :")! =-1 ){
Alert (xmlHTTP. responseText );
}
}

// Traverse the xml Object and parse the core function set of xml
Function tree (Element, debug ){
Var buffer = "";
Var node = "";
If (Element. nodeType! = 3 ){
Node = Element;
Buffer + = onElement (Element, debug );
}
If (Element. nodeType = 3)
Buffer + = onData (Element );
If (Element. hasChildNodes ){
For (var I = 0; I <Element. childNodes. length; I ++ ){
Buffer + = tree (Element. childNodes (I), debug );
}
}
If (node)
Buffer + = endElement (node, debug );
Return buffer;
}

/***** Modify the following three functions as needed *****/
// Traverse the xml Object-start the node
Function onElement (Element, debug ){
Var buffer = (debug? "<": "<") + Element. nodeName;
N = Element. attributes. length
If (n> 0) {// if the node has Parameters
For (var I = 0; I <n; I ++)
Buffer + = ''+ Element. attributes (I). name + '= \"' + Element. attributes (I). value + '"';
}
Buffer + = debug? ">": "> ";
Return buffer;
}

// Traverse xml Object-end of Node
Function endElement (Element, debug ){
Return (debug? "</": "</") + Element. nodeName + (debug? "> <Br>": "> ");
}

// Traverse the xml Object-node data
Function onData (Element ){
Return Element. nodeValue
}