From c00d1cf10752bb178bdc136f046eb7ddb2c70627 Mon Sep 17 00:00:00 2001 From: Pavol Rusnak Date: Mon, 1 Jun 2009 17:35:22 +0000 Subject: [PATCH] start with cleaning up the code git-svn-id: http://svg-edit.googlecode.com/svn/trunk@12 eee81c28-f429-11dd-99c0-75d572ba1ddd --- blank.svg | 5 - blanksvg.js | 517 -------------------------------- canvas.js | 495 ++++++++++++++++++++++++++++++ canvas.svg | 5 + circle.png => images/circle.png | Bin clear.png => images/clear.png | Bin delete.png => images/delete.png | Bin line.png => images/line.png | Bin none.png => images/none.png | Bin path.png => images/path.png | Bin rect.png => images/rect.png | Bin select.png => images/select.png | Bin submit.png => images/submit.png | Bin svg-editor.css | 2 +- svg-editor.html | 29 +- svg-editor.js | 36 +-- 16 files changed, 534 insertions(+), 555 deletions(-) delete mode 100644 blank.svg delete mode 100644 blanksvg.js create mode 100644 canvas.js create mode 100644 canvas.svg rename circle.png => images/circle.png (100%) rename clear.png => images/clear.png (100%) rename delete.png => images/delete.png (100%) rename line.png => images/line.png (100%) rename none.png => images/none.png (100%) rename path.png => images/path.png (100%) rename rect.png => images/rect.png (100%) rename select.png => images/select.png (100%) rename submit.png => images/submit.png (100%) diff --git a/blank.svg b/blank.svg deleted file mode 100644 index 983e7b80..00000000 --- a/blank.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/blanksvg.js b/blanksvg.js deleted file mode 100644 index c7c25f40..00000000 --- a/blanksvg.js +++ /dev/null @@ -1,517 +0,0 @@ - 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=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\n"; - } - else - { - out += " />\n"; - } - - } - return out; -} - -function SVGsubmit_svg(){ - var str = "\n\n"; - str = str + SvgToString(SVGRoot , 0); - top.serializeHandler(str); -} diff --git a/canvas.js b/canvas.js new file mode 100644 index 00000000..f07444ba --- /dev/null +++ b/canvas.js @@ -0,0 +1,495 @@ +var canvas = null; + +function svgCanvasInit(event) { + canvas = new svgCanvas(event.target.ownerDocument); + top.svgCanvas = canvas; +} + +function svgCanvas(doc) { + +// functions + + this.assignAttributes = function(node, attrs) { + for (i in attrs) { + node.setAttributeNS(null, i, attrs[i]); + } + } + +this.create_svg_element_by_json = function(data) { + var shape = this.svgdoc.createElementNS(this.svgns, data.element); + this.assignAttributes(shape, data.Attr); + this.svgdoc.documentElement.appendChild(shape); +} + +this.svgToString = function(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=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\n"; + } + else + { + out += " />\n"; + } + + } + return out; +} + + + +// constructor + this.svgdoc = doc; + this.svgroot = this.svgdoc.documentElement; + this.svgns = "http://www.w3.org/2000/svg"; + this.d_attr = "" ; + this.signature_started = 0 ; + this.obj_num = 1 ; + this.rect_x = null ; + this.rect_y = null ; + this.current_draw_element = "path" ; + this.current_draw_element_fill = "none" ; + this.current_draw_element_stroke_width = "1px" ; + this.current_draw_element_stroke = "black" ; + this.freehand_min_x = null ; + this.freehand_max_x = null ; + this.freehand_min_y = null ; + this.freehand_max_y = null ; + + this.assignAttributes(this.svgroot, { + "onmouseup": "canvas.mouseUp(evt)", + "onmousedown": "canvas.mouseDown(evt)", + "onmousemove": "canvas.mouseMove(evt)" + }); + + this.serialize = function(handler) { + var str = "\n\n"; + str = str + this.svgToString(this.svgroot, 0); + handler(str); + } + +this.clear = function() { + 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++; + } + } +} + +this.setMode = function(name) { + this.current_draw_element = name; +} + + +this.setStrokeColor = function(color) { + this.current_draw_element_stroke = color; +} + +this.setFillColor = function(color) { + this.current_draw_element_fill = color; +} + +this.setStrokeColor = function(val) { + this.current_draw_element_stroke_width = val; +} + +this.mouseUp = function(evt) +{ + + if (this.signature_started == 1 ) + { + this.signature_started = 0 ; + + switch (this.current_draw_element) + { + case "select": + var element = this.svgdoc.getElementById("rect_" + this.obj_num); + element.parentNode.removeChild(element); + break; + case "path": + this.d_attr = 0 ; + var element = this.svgdoc.getElementById("path_" + this.obj_num); + element.setAttribute("stroke-opacity", 1.0); + this.obj_num++; + break; + case "line": + var element = this.svgdoc.getElementById("line_" + this.obj_num); + element.setAttribute("stroke-opacity", 1.0); + this.obj_num++; + break; + case "square": + case "rect": + var element = this.svgdoc.getElementById("rect_" + this.obj_num); + element.setAttribute("fill-opacity", 1.0); + element.setAttribute("stroke-opacity", 1.0); + this.obj_num++; + break; + case "circle": + case "ellipse": + var element = this.svgdoc.getElementById("ellipse_" + this.obj_num); + element.setAttribute("fill-opacity", 1.0); + element.setAttribute("stroke-opacity", 1.0); + this.obj_num++; + break; + case "fhellipse": + this.d_attr = 0 ; + + var element = this.svgdoc.getElementById("path_" + this.obj_num); + element.parentNode.removeChild(element); + + this.create_svg_element_by_json({ + "element": "ellipse", + "Attr": { + "cx": (this.freehand_min_x + this.freehand_max_x ) / 2, + "cy": (this.freehand_min_y + this.freehand_max_y ) / 2, + "rx": (this.freehand_max_x - this.freehand_min_x ) / 2 + "px", + "ry": (this.freehand_max_y - this.freehand_min_y ) / 2 + "px", + "id": "ellipse_" + this.obj_num, + "fill": this.current_draw_element_fill, + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width + } + }); + this.obj_num++; + break; + case "fhrect": + this.d_attr = 0 ; + + var element = this.svgdoc.getElementById("path_" + this.obj_num); + element.parentNode.removeChild(element); + + this.create_svg_element_by_json({ + "element": "rect", + "Attr": { + "x": this.freehand_min_x, + "y": this.freehand_min_y, + "width": (this.freehand_max_x - this.freehand_min_x ) + "px", + "height": (this.freehand_max_y - this.freehand_min_y ) + "px", + "id": "rect_" + this.obj_num, + "fill": this.current_draw_element_fill, + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width + } + }); + this.obj_num = obj_num + 1 ; + break; + } + + } + +} + + +this.mouseDown = function(evt) +{ + + var x = evt.pageX; + var y = evt.pageY; + + switch (this.current_draw_element) + { + case "select": + this.signature_started = 1 ; + this.rect_x = x ; + this.rect_y = y ; + this.create_svg_element_by_json({ + "element": "rect", + "Attr": { + "x": x, + "y": y, + "width": "1px", + "height": "1px", + "id": "rect_" + this.obj_num, + "fill": 'none', + "stroke": 'black', + "stroke-width": '1px', + "stroke-dasharray": "2,2" + } + }); + break; + case "fhellipse": + this.d_attr = "M" + x + " " + y + " "; + this.signature_started = 1 ; + + this.create_svg_element_by_json({ + "element": "path", + "Attr": { + "d": this.d_attr, + "id": "path_" + this.obj_num, + "fill": "none", + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width, + "stroke-opacity": 0.5 + } + + }); + + this.freehand_min_x = x ; + this.freehand_max_x = x ; + this.freehand_min_y = y ; + this.freehand_max_y = y ; + + break; + case "fhrect": + this.d_attr = "M" + x + " " + y + " "; + this.signature_started = 1 ; + + this.create_svg_element_by_json({ + "element": "path", + "Attr": { + "d": this.d_attr, + "id": "path_" + this.obj_num, + "fill": "none", + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width, + "stroke-opacity": 0.5 + } + + }); + + this.freehand_min_x = x ; + this.freehand_max_x = x ; + this.freehand_min_y = y ; + this.freehand_max_y = y ; + + break; + case "path": + this.d_attr = "M" + x + " " + y + " "; + this.signature_started = 1 ; + + this.create_svg_element_by_json({ + "element": "path", + "Attr": { + "d": this.d_attr, + "id": "path_" + this.obj_num, + "fill": "none", + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width, + "stroke-opacity": 0.5 + } + + }); + + break; + case "square": + case "rect": + this.signature_started = 1 ; + this.rect_x = x ; + this.rect_y = y ; + create_svg_element_by_json({ + "element": "rect", + "Attr": { + "x": x, + "y": y, + "width": "1px", + "height": "1px", + "id": "rect_" + this.obj_num, + "fill": this.current_draw_element_fill, + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width, + "fill-opacity": 0.5, + "stroke-opacity": 0.5 + } + + }); + break; + case "line": + this.signature_started = 1 ; + + this.create_svg_element_by_json({ + "element": "line", + "Attr": { + "x1": this.x, + "y1": this.y, + "x2": this.x + 1 + "px", + "y2": this.y + 1 + "px", + "id": "line_" + this.obj_num, + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width, + "stroke-opacity": 0.5 + } + + }); + break; + case "circle": + case "ellipse": + this.signature_started = 1 ; + this.create_svg_element_by_json({ + "element": "ellipse", + "Attr": { + "cx": x, + "cy": y, + "rx": 1 + "px", + "ry": 1 + "px", + "id": "ellipse_" + this.obj_num, + "fill": this.current_draw_element_fill, + "stroke": this.current_draw_element_stroke, + "stroke-width": this.current_draw_element_stroke_width, + "fill-opacity": 0.5, + "stroke-opacity": 0.5 + } + }); + break; + case "delete": + var T=evt.target + if(this.svgroot == evt.target ) return ; + T.parentNode.removeChild(T); + break; + } + + +} + +this.mouseMove = function(evt) +{ + if (this.signature_started == 1 ) + { + var x = evt.pageX; + var y = evt.pageY; + + + switch (this.current_draw_element) + { + case "path": + + this.d_attr = this.d_attr + "L" + x + " " + y + " "; + var shape = this.svgdoc.getElementById("path_" + this.obj_num); + shape.setAttributeNS(null, "d", this.d_attr); + break; + + case "line": + var shape = this.svgdoc.getElementById("line_" + this.obj_num); + shape.setAttributeNS(null, "x2", x); + shape.setAttributeNS(null, "y2", y); + break; + + case "square": + + var shape = this.svgdoc.getElementById("rect_" + this.obj_num); + var size = Math.max( Math.abs(x-this.rect_x) , Math.abs(y-this.rect_y) ); + + shape.setAttributeNS(null, "width", this.size); + shape.setAttributeNS(null, "height", this.size); + if(rect_x < x ){ + shape.setAttributeNS(null, "x", this.rect_x); + }else{ + shape.setAttributeNS(null, "x", this.rect_x - size); + } + if(rect_y < y ){ + shape.setAttributeNS(null, "y", this.rect_y); + }else{ + shape.setAttributeNS(null, "y", this.rect_y - size); + } + + break; + case "select": + case "rect": + + var shape = this.svgdoc.getElementById("rect_" + this.obj_num); + + if(rect_x < x ){ + shape.setAttributeNS(null, "x", this.rect_x); + shape.setAttributeNS(null, "width", x - this.rect_x); + }else{ + shape.setAttributeNS(null, "x", x); + shape.setAttributeNS(null, "width", this.rect_x - x); + } + if(rect_y < y ){ + shape.setAttributeNS(null, "y", this.rect_y); + shape.setAttributeNS(null, "height", y - this.rect_y); + }else{ + shape.setAttributeNS(null, "y", y); + shape.setAttributeNS(null, "height", this.rect_y - y); + } + + break; + case "circle": + var shape = this.svgdoc.getElementById("ellipse_" + this.obj_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 = this.svgdoc.getElementById("ellipse_" + this.obj_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": + this.d_attr = this.d_attr + "L" + x + " " + y + " "; + var shape = this.svgdoc.getElementById("path_" + this.obj_num); + shape.setAttributeNS(null, "d", this.d_attr); + + this.freehand_min_x = Math.min(x , this.freehand_min_x ) ; + this.freehand_max_x = Math.max(x , this.freehand_max_x ) ; + this.freehand_min_y = Math.min(y , this.freehand_min_y ) ; + this.freehand_max_y = Math.max(y , this.freehand_max_y ) ; + break; + + case "fhrect": + this.d_attr = this.d_attr + "L" + x + " " + y + " "; + var shape = this.svgdoc.getElementById("path_" + this.obj_num); + shape.setAttributeNS(null, "d", this.d_attr); + + this.freehand_min_x = Math.min(x , this.freehand_min_x ) ; + this.freehand_max_x = Math.max(x , this.freehand_max_x ) ; + this.freehand_min_y = Math.min(y , this.freehand_min_y ) ; + this.freehand_max_y = Math.max(y , this.freehand_max_y ) ; + break; + + } + + } +} + +} diff --git a/canvas.svg b/canvas.svg new file mode 100644 index 00000000..6aacb8df --- /dev/null +++ b/canvas.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/circle.png b/images/circle.png similarity index 100% rename from circle.png rename to images/circle.png diff --git a/clear.png b/images/clear.png similarity index 100% rename from clear.png rename to images/clear.png diff --git a/delete.png b/images/delete.png similarity index 100% rename from delete.png rename to images/delete.png diff --git a/line.png b/images/line.png similarity index 100% rename from line.png rename to images/line.png diff --git a/none.png b/images/none.png similarity index 100% rename from none.png rename to images/none.png diff --git a/path.png b/images/path.png similarity index 100% rename from path.png rename to images/path.png diff --git a/rect.png b/images/rect.png similarity index 100% rename from rect.png rename to images/rect.png diff --git a/select.png b/images/select.png similarity index 100% rename from select.png rename to images/select.png diff --git a/submit.png b/images/submit.png similarity index 100% rename from submit.png rename to images/submit.png diff --git a/svg-editor.css b/svg-editor.css index 9f9e4ae7..4651d988 100644 --- a/svg-editor.css +++ b/svg-editor.css @@ -21,7 +21,7 @@ } #fill_color { - background: url('none.png'); + background: url('images/none.png'); } #stroke_color { diff --git a/svg-editor.html b/svg-editor.html index ddfd3283..f0be931f 100644 --- a/svg-editor.html +++ b/svg-editor.html @@ -4,6 +4,7 @@ +SVG-edit demo @@ -12,21 +13,21 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + +
Fill @@ -51,8 +52,8 @@
- - + + diff --git a/svg-editor.js b/svg-editor.js index c8807e5e..8ff97df8 100644 --- a/svg-editor.js +++ b/svg-editor.js @@ -1,84 +1,84 @@ var palette = ["#000000","#202020","#404040","#606060","#808080","#A0A0A0","#C0C0C0","#E0E0E0","#FFFFFF","#800000","#FF0000","#808000","#FFFF00","#008000","#00FF00","#008080","#00FFFF","#000080","#0000FF","#800080","#FF00FF","#2B0000","#550000","#800000","#AA0000","#D40000","#FF0000","#FF2A2A","#FF5555","#FF8080","#FFAAAA","#FFD5D5","#280B0B","#501616","#782121","#A02C2C","#C83737","#D35F5F","#DE8787","#E9AFAF","#F4D7D7","#241C1C","#483737","#6C5353","#916F6F","#AC9393","#C8B7B7","#E3DBDB","#2B1100","#552200","#803300","#AA4400","#D45500","#FF6600","#FF7F2A","#FF9955","#FFB380","#FFCCAA","#FFE6D5","#28170B","#502D16","#784421","#A05A2C","#C87137","#D38D5F","#DEAA87","#E9C6AF","#F4E3D7","#241F1C","#483E37","#6C5D53","#917C6F","#AC9D93","#C8BEB7","#E3DEDB","#2B2200","#554400","#806600","#AA8800","#D4AA00","#FFCC00","#FFD42A","#FFDD55","#FFE680","#FFEEAA","#FFF6D5","#28220B","#504416","#786721","#A0892C","#C8AB37","#D3BC5F","#DECD87","#E9DDAF","#F4EED7","#24221C","#484537","#6C6753","#918A6F","#ACA793","#C8C4B7","#E3E2DB","#222B00","#445500","#668000","#88AA00","#AAD400","#CCFF00","#D4FF2A","#DDFF55","#E5FF80","#EEFFAA","#F6FFD5","#22280B","#445016","#677821","#89A02C","#ABC837","#BCD35F","#CDDE87","#DDE9AF","#EEF4D7","#22241C","#454837","#676C53","#8A916F","#A7AC93","#C4C8B7","#E2E3DB","#112B00","#225500","#338000","#44AA00","#55D400","#66FF00","#7FFF2A","#99FF55","#B3FF80","#CCFFAA","#E5FFD5","#17280B","#2D5016","#447821","#5AA02C","#71C837","#8DD35F","#AADE87","#C6E9AF","#E3F4D7","#1F241C","#3E4837","#5D6C53","#7C916F","#9DAC93","#BEC8B7","#DEE3DB","#002B00","#005500","#008000","#00AA00","#00D400","#00FF00","#2AFF2A","#55FF55","#80FF80","#AAFFAA","#D5FFD5","#0B280B","#165016","#217821","#2CA02C","#37C837","#5FD35F","#87DE87","#AFE9AF","#D7F4D7","#1C241C","#374837","#536C53","#6F916F","#93AC93","#B7C8B7","#DBE3DB","#002B11","#005522","#008033","#00AA44","#00D455","#00FF66","#2AFF80","#55FF99","#80FFB3","#AAFFCC","#D5FFE6","#0B2817","#16502D","#217844","#2CA05A","#37C871","#5FD38D","#87DEAA","#AFE9C6","#D7F4E3","#1C241F","#37483E","#536C5D","#6F917C","#93AC9D","#B7C8BE","#DBE3DE","#002B22","#005544","#008066","#00AA88","#00D4AA","#00FFCC","#2AFFD5","#55FFDD","#80FFE6","#AAFFEE","#D5FFF6","#0B2822","#165044","#217867","#2CA089","#37C8AB","#5FD3BC","#87DECD","#AFE9DD","#D7F4EE","#1C2422","#374845","#536C67","#6F918A","#93ACA7","#B7C8C4","#DBE3E2","#00222B","#004455","#006680","#0088AA","#00AAD4","#00CCFF","#2AD4FF","#55DDFF","#80E5FF","#AAEEFF","#D5F6FF","#0B2228","#164450","#216778","#2C89A0","#37ABC8","#5FBCD3","#87CDDE","#AFDDE9","#D7EEF4","#1C2224","#374548","#53676C","#6F8A91","#93A7AC","#B7C4C8","#DBE2E3","#00112B","#002255","#003380","#0044AA","#0055D4","#0066FF","#2A7FFF","#5599FF","#80B3FF","#AACCFF","#D5E5FF","#0B1728","#162D50","#214478","#2C5AA0","#3771C8","#5F8DD3","#87AADE","#AFC6E9","#D7E3F4","#1C1F24","#373E48","#535D6C","#6F7C91","#939DAC","#B7BEC8","#DBDEE3","#00002B","#000055","#000080","#0000AA","#0000D4","#0000FF","#2A2AFF","#5555FF","#8080FF","#AAAAFF","#D5D5FF","#0B0B28","#161650","#212178","#2C2CA0","#3737C8","#5F5FD3","#8787DE","#AFAFE9","#D7D7F4","#1C1C24","#373748","#53536C","#6F6F91","#9393AC","#B7B7C8","#DBDBE3","#11002B","#220055","#330080","#4400AA","#5500D4","#6600FF","#7F2AFF","#9955FF","#B380FF","#CCAAFF","#E5D5FF","#170B28","#2D1650","#442178","#5A2CA0","#7137C8","#8D5FD3","#AA87DE","#C6AFE9","#E3D7F4","#1F1C24","#3E3748","#5D536C","#7C6F91","#9D93AC","#BEB7C8","#DEDBE3","#22002B","#440055","#660080","#8800AA","#AA00D4","#CC00FF","#D42AFF","#DD55FF","#E580FF","#EEAAFF","#F6D5FF","#220B28","#441650","#672178","#892CA0","#AB37C8","#BC5FD3","#CD87DE","#DDAFE9","#EED7F4","#221C24","#453748","#67536C","#8A6F91","#A793AC","#C4B7C8","#E2DBE3","#2B0022","#550044","#800066","#AA0088","#D400AA","#FF00CC","#FF2AD4","#FF55DD","#FF80E5","#FFAAEE","#FFD5F6","#280B22","#501644","#782167","#A02C89","#C837AB","#D35FBC","#DE87CD","#E9AFDD","#F4D7EE","#241C22","#483745","#6C5367","#916F8A","#AC93A7","#C8B7C4","#E3DBE2","#2B0011","#550022","#800033","#AA0044","#D40055","#FF0066","#FF2A7F","#FF5599","#FF80B2","#FFAACC","#FFD5E5","#280B17","#50162D","#782144","#A02C5A","#C83771","#D35F8D","#DE87AA","#E9AFC6","#F4D7E3","#241C1F","#48373E","#6C535D","#916F7C","#AC939D","#C8B7BE","#E3DBDE"] $(document).ready(function(){ - var str = '
' + var str = '
' $.each(palette, function(i,item){ str += '
'; }); $('#palette').append(str); $('#stroke_width').change(function(){ - window.set_stroke_width(this.options[this.selectedIndex].value); + svgCanvas.setStrokeColor(this.options[this.selectedIndex].value); }); $('.palette_item').click(function(){ color = $(this).css('background-color'); if (color == 'transparent') { color = 'none'; - $('#fill_color').css('background', 'url(\'none.png\')'); + $('#fill_color').css('background', 'url(\'images/none.png\')'); } else { $('#fill_color').css('background', color); } - window.set_fill_color(color); + svgCanvas.setFillColor(color); }); $('.palette_item').rightClick(function(){ color = $(this).css('background-color'); if (color == 'transparent') { color = 'none'; - $('#stroke_color').css('background', 'url(\'none.png\')'); + $('#stroke_color').css('background', 'url(\'images/none.png\')'); } else { $('#stroke_color').css('background', color); } - window.set_stroke_color(color); + svgCanvas.setStrokeColor(color); }); $('#tool_select').click(function(){ - window.set_draw_mode('select'); + svgCanvas.setMode('select'); }); $('#tool_path').click(function(){ - window.set_draw_mode('path'); + svgCanvas.setMode('path'); }); $('#tool_line').click(function(){ - window.set_draw_mode('line'); + svgCanvas.setMode('line'); }); $('#tool_square').click(function(){ - window.set_draw_mode('square'); + svgCanvas.setMode('square'); }); $('#tool_rect').click(function(){ - window.set_draw_mode('rect'); + svgCanvas.setMode('rect'); }); $('#tool_fhrect').click(function(){ - window.set_draw_mode('fhrect'); + svgCanvas.setMode('fhrect'); }); $('#tool_circle').click(function(){ - window.set_draw_mode('circle'); + svgCanvas.setMode('circle'); }); $('#tool_ellipse').click(function(){ - window.set_draw_mode('ellipse'); + svgCanvas.setMode('ellipse'); }); $('#tool_fhellipse').click(function(){ - window.set_draw_mode('fhellipse'); + svgCanvas.setMode('fhellipse'); }); $('#tool_delete').click(function(){ - window.set_draw_mode('delete'); + svgCanvas.setMode('delete'); }); $('#tool_clear').click(function(){ - window.clear_svg(); + svgCanvas.clear(); }); $('#tool_submit').click(function(){ - window.submit_svg(); + svgCanvas.serialize(serializeHandler); }); })