6b2ff6f7f7
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@10 eee81c28-f429-11dd-99c0-75d572ba1ddd
518 lines
14 KiB
JavaScript
518 lines
14 KiB
JavaScript
SVGDocument = null;
|
|
SVGRoot = null;
|
|
var svgns = "http://www.w3.org/2000/svg";
|
|
|
|
top.clear_svg = SVGclear_svg ;
|
|
top.set_draw_mode = SVGset_draw_mode ;
|
|
top.submit_svg = SVGsubmit_svg ;
|
|
top.set_stroke_color = SVGset_stroke_color;
|
|
top.set_fill_color = SVGset_fill_color;
|
|
top.set_stroke_width = SVGset_stroke_width ;
|
|
|
|
var d_attr = "" ;
|
|
var signature_started = 0 ;
|
|
var path_elememt = 0 ;
|
|
var path_num = 1 ;
|
|
var rect_num = 1 ;
|
|
var line_num = 1 ;
|
|
var ellipse_num = 1 ;
|
|
var rect_x = null ;
|
|
var rect_y = null ;
|
|
var current_draw_element = "path" ;
|
|
var current_draw_element_fill = "none" ;
|
|
var current_draw_element_stroke_width = "1px" ;
|
|
var current_draw_element_stroke = "black" ;
|
|
var freehand_min_x = null ;
|
|
var freehand_max_x = null ;
|
|
var freehand_min_y = null ;
|
|
var freehand_max_y = null ;
|
|
var freehand_min_x = null ;
|
|
var freehand_max_x = null ;
|
|
var freehand_min_y = null ;
|
|
var freehand_max_y = null ;
|
|
|
|
function SVGset_draw_mode(ele_name) {
|
|
current_draw_element = ele_name;
|
|
}
|
|
|
|
function SVGset_stroke_color(col_hex){
|
|
current_draw_element_stroke = col_hex;
|
|
}
|
|
|
|
function SVGset_fill_color(col_hex){
|
|
current_draw_element_fill = col_hex;
|
|
}
|
|
|
|
function SVGset_stroke_width(val){
|
|
current_draw_element_stroke_width = val;
|
|
}
|
|
|
|
function Initialize(LoadEvent)
|
|
{
|
|
SVGDocument = LoadEvent.target.ownerDocument;
|
|
SVGRoot = SVGDocument.documentElement ;
|
|
var Attr={
|
|
"onmouseup":"fun_mouseUP(evt)",
|
|
"onmousedown":"fun_mouseDOWN(evt)",
|
|
"onmousemove":"fun_mouseMOVE(evt)"
|
|
}
|
|
assignAttr(SVGRoot,Attr);
|
|
}
|
|
|
|
function fun_mouseUP(evt)
|
|
{
|
|
|
|
if (signature_started == 1 )
|
|
{
|
|
signature_started = 0 ;
|
|
|
|
switch (current_draw_element)
|
|
{
|
|
case "select":
|
|
var element = SVGDocument.getElementById("rect_" + rect_num);
|
|
element.parentNode.removeChild(element);
|
|
break;
|
|
case "path":
|
|
d_attr = 0 ;
|
|
var element = SVGDocument.getElementById("path_" + path_num);
|
|
element.setAttribute("stroke-opacity", 1.0);
|
|
path_num = path_num + 1 ;
|
|
break;
|
|
case "line":
|
|
var element = SVGDocument.getElementById("line_" + line_num);
|
|
element.setAttribute("stroke-opacity", 1.0);
|
|
line_num = line_num + 1 ;
|
|
break;
|
|
case "square":
|
|
case "rect":
|
|
var element = SVGDocument.getElementById("rect_" + rect_num);
|
|
element.setAttribute("fill-opacity", 1.0);
|
|
element.setAttribute("stroke-opacity", 1.0);
|
|
rect_num = rect_num + 1 ;
|
|
break;
|
|
case "circle":
|
|
case "ellipse":
|
|
var element = SVGDocument.getElementById("ellipse_" + ellipse_num);
|
|
element.setAttribute("fill-opacity", 1.0);
|
|
element.setAttribute("stroke-opacity", 1.0);
|
|
ellipse_num = ellipse_num + 1 ;
|
|
break;
|
|
case "fhellipse":
|
|
d_attr = 0 ;
|
|
|
|
var element = SVGDocument.getElementById("path_" + path_num);
|
|
element.parentNode.removeChild(element);
|
|
|
|
create_svg_element_by_json({
|
|
"element": "ellipse",
|
|
"Attr": {
|
|
"cx": (freehand_min_x + freehand_max_x ) / 2,
|
|
"cy": (freehand_min_y + freehand_max_y ) / 2,
|
|
"rx": (freehand_max_x - freehand_min_x ) / 2 + "px",
|
|
"ry": (freehand_max_y - freehand_min_y ) / 2 + "px",
|
|
"id": "ellipse_" + ellipse_num,
|
|
"fill": current_draw_element_fill,
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width
|
|
}
|
|
});
|
|
ellipse_num = ellipse_num + 1 ;
|
|
break;
|
|
case "fhrect":
|
|
d_attr = 0 ;
|
|
|
|
var element = SVGDocument.getElementById("path_" + path_num);
|
|
element.parentNode.removeChild(element);
|
|
|
|
create_svg_element_by_json({
|
|
"element": "rect",
|
|
"Attr": {
|
|
"x": freehand_min_x,
|
|
"y": freehand_min_y,
|
|
"width": (freehand_max_x - freehand_min_x ) + "px",
|
|
"height": (freehand_max_y - freehand_min_y ) + "px",
|
|
"id": "rect_" + rect_num,
|
|
"fill": current_draw_element_fill,
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width
|
|
}
|
|
});
|
|
rect_num = rect_num + 1 ;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function fun_mouseDOWN(evt)
|
|
{
|
|
|
|
var x = evt.pageX;
|
|
var y = evt.pageY;
|
|
|
|
switch (current_draw_element)
|
|
{
|
|
case "select":
|
|
signature_started = 1 ;
|
|
rect_x = x ;
|
|
rect_y = y ;
|
|
create_svg_element_by_json({
|
|
"element": "rect",
|
|
"Attr": {
|
|
"x": x,
|
|
"y": y,
|
|
"width": "1px",
|
|
"height": "1px",
|
|
"id": "rect_" + rect_num,
|
|
"fill": 'none',
|
|
"stroke": 'black',
|
|
"stroke-width": '1px',
|
|
"stroke-dasharray": "2,2"
|
|
}
|
|
});
|
|
break;
|
|
case "fhellipse":
|
|
d_attr = "M" + x + " " + y + " ";
|
|
signature_started = 1 ;
|
|
|
|
create_svg_element_by_json({
|
|
"element": "path",
|
|
"Attr": {
|
|
"d": d_attr,
|
|
"id": "path_" + path_num,
|
|
"fill": "none",
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width,
|
|
"stroke-opacity": 0.5
|
|
}
|
|
|
|
});
|
|
|
|
freehand_min_x = x ;
|
|
freehand_max_x = x ;
|
|
freehand_min_y = y ;
|
|
freehand_max_y = y ;
|
|
|
|
break;
|
|
case "fhrect":
|
|
d_attr = "M" + x + " " + y + " ";
|
|
signature_started = 1 ;
|
|
|
|
create_svg_element_by_json({
|
|
"element": "path",
|
|
"Attr": {
|
|
"d": d_attr,
|
|
"id": "path_" + path_num,
|
|
"fill": "none",
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width,
|
|
"stroke-opacity": 0.5
|
|
}
|
|
|
|
});
|
|
|
|
freehand_min_x = x ;
|
|
freehand_max_x = x ;
|
|
freehand_min_y = y ;
|
|
freehand_max_y = y ;
|
|
|
|
break;
|
|
case "path":
|
|
d_attr = "M" + x + " " + y + " ";
|
|
signature_started = 1 ;
|
|
|
|
create_svg_element_by_json({
|
|
"element": "path",
|
|
"Attr": {
|
|
"d": d_attr,
|
|
"id": "path_" + path_num,
|
|
"fill": "none",
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width,
|
|
"stroke-opacity": 0.5
|
|
}
|
|
|
|
});
|
|
|
|
break;
|
|
case "square":
|
|
case "rect":
|
|
signature_started = 1 ;
|
|
rect_x = x ;
|
|
rect_y = y ;
|
|
create_svg_element_by_json({
|
|
"element": "rect",
|
|
"Attr": {
|
|
"x": x,
|
|
"y": y,
|
|
"width": "1px",
|
|
"height": "1px",
|
|
"id": "rect_" + rect_num,
|
|
"fill": current_draw_element_fill,
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width,
|
|
"fill-opacity": 0.5,
|
|
"stroke-opacity": 0.5
|
|
}
|
|
|
|
});
|
|
break;
|
|
case "line":
|
|
signature_started = 1 ;
|
|
|
|
create_svg_element_by_json({
|
|
"element": "line",
|
|
"Attr": {
|
|
"x1": x,
|
|
"y1": y,
|
|
"x2": x + 1 + "px",
|
|
"y2": y + 1 + "px",
|
|
"id": "line_" + line_num,
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width,
|
|
"stroke-opacity": 0.5
|
|
}
|
|
|
|
});
|
|
break;
|
|
case "circle":
|
|
case "ellipse":
|
|
signature_started = 1 ;
|
|
create_svg_element_by_json({
|
|
"element": "ellipse",
|
|
"Attr": {
|
|
"cx": x,
|
|
"cy": y,
|
|
"rx": 1 + "px",
|
|
"ry": 1 + "px",
|
|
"id": "ellipse_" + ellipse_num,
|
|
"fill": current_draw_element_fill,
|
|
"stroke": current_draw_element_stroke,
|
|
"stroke-width": current_draw_element_stroke_width,
|
|
"fill-opacity": 0.5,
|
|
"stroke-opacity": 0.5
|
|
}
|
|
});
|
|
break;
|
|
case "delete":
|
|
var T=evt.target
|
|
if(SVGRoot == evt.target ) return ;
|
|
T.parentNode.removeChild(T);
|
|
break;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function fun_mouseMOVE(evt)
|
|
{
|
|
if (signature_started == 1 )
|
|
{
|
|
var x = evt.pageX;
|
|
var y = evt.pageY;
|
|
|
|
|
|
switch (current_draw_element)
|
|
{
|
|
case "path":
|
|
|
|
d_attr = d_attr + "L" + x + " " + y + " ";
|
|
var shape = SVGDocument.getElementById("path_" + path_num);
|
|
shape.setAttributeNS(null, "d", d_attr);
|
|
break;
|
|
|
|
case "line":
|
|
var shape = SVGDocument.getElementById("line_" + line_num);
|
|
shape.setAttributeNS(null, "x2", x);
|
|
shape.setAttributeNS(null, "y2", y);
|
|
break;
|
|
|
|
case "square":
|
|
|
|
var shape = SVGDocument.getElementById("rect_" + rect_num);
|
|
var size = Math.max( Math.abs(x-rect_x) , Math.abs(y-rect_y) );
|
|
|
|
shape.setAttributeNS(null, "width", size);
|
|
shape.setAttributeNS(null, "height", size);
|
|
if(rect_x < x ){
|
|
shape.setAttributeNS(null, "x", rect_x);
|
|
}else{
|
|
shape.setAttributeNS(null, "x", rect_x - size);
|
|
}
|
|
if(rect_y < y ){
|
|
shape.setAttributeNS(null, "y", rect_y);
|
|
}else{
|
|
shape.setAttributeNS(null, "y", rect_y - size);
|
|
}
|
|
|
|
break;
|
|
case "select":
|
|
case "rect":
|
|
|
|
var shape = SVGDocument.getElementById("rect_" + rect_num);
|
|
|
|
if(rect_x < x ){
|
|
shape.setAttributeNS(null, "x", rect_x);
|
|
shape.setAttributeNS(null, "width", x - rect_x);
|
|
}else{
|
|
shape.setAttributeNS(null, "x", x);
|
|
shape.setAttributeNS(null, "width", rect_x - x);
|
|
}
|
|
if(rect_y < y ){
|
|
shape.setAttributeNS(null, "y", rect_y);
|
|
shape.setAttributeNS(null, "height", y - rect_y);
|
|
}else{
|
|
shape.setAttributeNS(null, "y", y);
|
|
shape.setAttributeNS(null, "height", rect_y - y);
|
|
}
|
|
|
|
break;
|
|
case "circle":
|
|
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
|
|
var cx = shape.getAttributeNS(null, "cx");
|
|
var cy = shape.getAttributeNS(null, "cy");
|
|
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
|
|
|
|
shape.setAttributeNS(null, "rx", rad);
|
|
shape.setAttributeNS(null, "ry", rad);
|
|
break;
|
|
case "ellipse":
|
|
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
|
|
var cx = shape.getAttributeNS(null, "cx");
|
|
var cy = shape.getAttributeNS(null, "cy");
|
|
|
|
shape.setAttributeNS(null, "rx", Math.abs(x-cx));
|
|
shape.setAttributeNS(null, "ry", Math.abs(y-cy));
|
|
break;
|
|
|
|
case "fhellipse":
|
|
d_attr = d_attr + "L" + x + " " + y + " ";
|
|
var shape = SVGDocument.getElementById("path_" + path_num);
|
|
shape.setAttributeNS(null, "d", d_attr);
|
|
|
|
freehand_min_x = min_of(x , freehand_min_x ) ;
|
|
freehand_max_x = max_of(x , freehand_max_x ) ;
|
|
freehand_min_y = min_of(y , freehand_min_y ) ;
|
|
freehand_max_y = max_of(y , freehand_max_y ) ;
|
|
break;
|
|
|
|
case "fhrect":
|
|
d_attr = d_attr + "L" + x + " " + y + " ";
|
|
var shape = SVGDocument.getElementById("path_" + path_num);
|
|
shape.setAttributeNS(null, "d", d_attr);
|
|
|
|
freehand_min_x = min_of(x , freehand_min_x ) ;
|
|
freehand_max_x = max_of(x , freehand_max_x ) ;
|
|
freehand_min_y = min_of(y , freehand_min_y ) ;
|
|
freehand_max_y = max_of(y , freehand_max_y ) ;
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function min_of(a ,b){
|
|
if (a < b ) { return a ;}
|
|
else {return b ;}
|
|
}
|
|
function max_of(a ,b){
|
|
if (a > b ) { return a ;}
|
|
else {return b ;}
|
|
}
|
|
|
|
|
|
function create_svg_element_by_json(data)
|
|
{
|
|
var shape = SVGDocument.createElementNS(svgns, data.element);
|
|
assignAttr(shape, data.Attr);
|
|
SVGDocument.documentElement.appendChild(shape);
|
|
|
|
}
|
|
|
|
function assignAttr(Node,Attr){
|
|
for (i in Attr) {
|
|
Node.setAttributeNS(null, i, Attr[i]);
|
|
}
|
|
}
|
|
|
|
|
|
function SVGclear_svg()
|
|
{
|
|
var Nodes = SVGRoot.childNodes ;
|
|
var Length = SVGRoot.childNodes.length ;
|
|
var i = 0 ;
|
|
for(var Rep=0; Rep< Length; Rep++){
|
|
if(Nodes[i].nodeType == 1){
|
|
Nodes[i].parentNode.removeChild(Nodes[i]);
|
|
}
|
|
else{
|
|
i++;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function SvgToString(elem , indent)
|
|
{
|
|
var out = "" ;
|
|
if (elem)
|
|
{
|
|
var attrs = elem.attributes;
|
|
var attr;
|
|
var i;
|
|
var childs = elem.childNodes;
|
|
|
|
// don't include scripts in output svg
|
|
if (elem.nodeName == "script") return "";
|
|
|
|
for (i=0; i<indent; i++) out += " ";
|
|
out += "<" + elem.nodeName;
|
|
for (i=attrs.length-1; i>=0; i--)
|
|
{
|
|
attr = attrs.item(i);
|
|
// don't include events in output svg
|
|
if (attr.nodeName == "onload" ||
|
|
attr.nodeName == "onmousedown" ||
|
|
attr.nodeName == "onmousemove" ||
|
|
attr.nodeName == "onmouseup") continue;
|
|
out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
|
|
}
|
|
|
|
if (elem.hasChildNodes())
|
|
{
|
|
out += ">\n";
|
|
indent++;
|
|
for (i=0; i<childs.length; i++)
|
|
{
|
|
if (childs.item(i).nodeType == 1) // element node
|
|
out = out + SvgToString(childs.item(i) ,indent);
|
|
else if (childs.item(i).nodeType == 3) // text node
|
|
{
|
|
for (j=0; j<indent; j++) out += " ";
|
|
out += childs.item(i).nodeValue + "\n";
|
|
}
|
|
}
|
|
indent--;
|
|
for (i=0; i<indent; i++) out += " ";
|
|
out += "</" + elem.nodeName + ">\n";
|
|
}
|
|
else
|
|
{
|
|
out += " />\n";
|
|
}
|
|
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function SVGsubmit_svg(){
|
|
var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
|
|
str = str + SvgToString(SVGRoot , 0);
|
|
top.serializeHandler(str);
|
|
}
|