diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 5fc9587b..464c0ee7 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -2111,7 +2111,11 @@ function svg_edit_setup() { $.each(keyval.split('/'), function(i, key) { $(document).bind('keydown', {combi: key, disableInInput: disInInp}, function(e) { fn(); - if(pd) e.preventDefault(); + if(pd) { + e.preventDefault(); + } + // Prevent default on ALL keys? + return false; }); }); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 9731ccf9..2256791b 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -16,16 +16,21 @@ * ensure undo/redo works perfectly */ -var isOpera = !!window.opera; -var isWebkit = navigator.userAgent.indexOf("AppleWebKit") != -1; if(!window.console) { window.console = {}; window.console.log = function(str) {}; window.console.dir = function(str) {}; + + if(window.opera) { + window.console.log = function(str) {opera.postError(str);} + } } -if( isOpera ) { - window.console.log = function(str) {opera.postError(str);} -} + +function SvgCanvas(container) +{ + +var isOpera = !!window.opera; +var isWebkit = navigator.userAgent.indexOf("AppleWebKit") != -1; var uiStrings = { "pathNodeTooltip":"Drag node to move it. Double-click node to change segment type", @@ -58,11 +63,9 @@ var svgWhiteList = { "switch": ["id", "requiredFeatures", "systemLanguage"], "svg": ["id", "height", "requiredFeatures", "systemLanguage", "transform", "viewBox", "width", "xmlns", "xmlns:xlink"], "text": ["fill", "fill-opacity", "fill-rule", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "systemLanguage", "transform", "text-anchor", "x", "xml:space", "y"], - "title": [], + "title": [] }; -function SvgCanvas(c) -{ // console.log('Start profiling') // setTimeout(function() { @@ -83,9 +86,11 @@ var fromXml = function(str) { return $('
').html(str).text(); }; -var pathFuncsStrs = ['Moveto','Lineto','CurvetoCubic','CurvetoQuadratic','Arc','LinetoHorizontal','LinetoVertical','CurvetoCubicSmooth','CurvetoQuadraticSmooth'] var pathFuncs = [0,'ClosePath']; -$.each(pathFuncsStrs,function(i,s){pathFuncs.push(s+'Abs');pathFuncs.push(s+'Rel');}); +(function() { + var pathFuncsStrs = ['Moveto','Lineto','CurvetoCubic','CurvetoQuadratic','Arc','LinetoHorizontal','LinetoVertical','CurvetoCubicSmooth','CurvetoQuadraticSmooth']; + $.each(pathFuncsStrs,function(i,s){pathFuncs.push(s+'Abs');pathFuncs.push(s+'Rel');}); +}()); // These command objects are used for the Undo/Redo stack // attrs contains the values that the attributes had before the change @@ -94,14 +99,14 @@ function ChangeElementCommand(elem, attrs, text) { this.text = text ? ("Change " + elem.tagName + " " + text) : ("Change " + elem.tagName); this.newValues = {}; this.oldValues = attrs; - for (attr in attrs) { + for (var attr in attrs) { if (attr == "#text") this.newValues[attr] = elem.textContent; else this.newValues[attr] = elem.getAttribute(attr); } this.apply = function() { var bChangedTransform = false; - for( attr in this.newValues ) { + for(var attr in this.newValues ) { if (this.newValues[attr]) { if (attr == "#text") this.elem.textContent = this.newValues[attr]; else this.elem.setAttribute(attr, this.newValues[attr]); @@ -137,7 +142,7 @@ function ChangeElementCommand(elem, attrs, text) { this.unapply = function() { var bChangedTransform = false; - for( attr in this.oldValues ) { + for(var attr in this.oldValues ) { if (this.oldValues[attr]) { if (attr == "#text") this.elem.textContent = this.oldValues[attr]; else this.elem.setAttribute(attr, this.oldValues[attr]); @@ -363,7 +368,7 @@ function BatchCommand(text) { }) ); // add the corner grips - for (dir in this.selectorGrips) { + for (var dir in this.selectorGrips) { this.selectorGrips[dir] = this.selectorGroup.appendChild( addSvgElementFromJson({ "element": "circle", @@ -389,7 +394,7 @@ function BatchCommand(text) { this.rotateGrip.setAttribute("display", bShow); this.rotateGripConnector.setAttribute("display", bShow); var elem = this.selectedElement; - for (dir in this.selectorGrips) { + for (var dir in this.selectorGrips) { this.selectorGrips[dir].setAttribute("display", bShow); } if(elem) this.updateGripCursors(canvas.getRotationAngle(elem)); @@ -400,7 +405,7 @@ function BatchCommand(text) { var dir_arr = []; var steps = Math.round(angle / 45); if(steps < 0) steps += 8; - for (dir in this.selectorGrips) { + for (var dir in this.selectorGrips) { dir_arr.push(dir); } while(steps > 0) { @@ -408,7 +413,7 @@ function BatchCommand(text) { steps--; } var i = 0; - for (dir in this.selectorGrips) { + for (var dir in this.selectorGrips) { this.selectorGrips[dir].setAttribute('style', ("cursor:" + dir_arr[i] + "-resize")); i++; }; @@ -510,7 +515,7 @@ function BatchCommand(text) { }; if(selected == selectedElements[0]) { - for(dir in gripCoords) { + for(var dir in gripCoords) { var coords = gripCoords[dir]; assignAttributes(selectedGrips[dir], { cx: coords[0], cy: coords[1] @@ -799,7 +804,7 @@ function BatchCommand(text) { var handle = null; if (!window.opera) svgroot.suspendRedraw(suspendLength); - for (i in attrs) { + for (var i in attrs) { var ns = (i.substr(0,4) == "xml:" ? xmlns : i.substr(0,6) == "xlink:" ? xlinkns : null); node.setAttributeNS(ns, i, attrs[i]); @@ -812,24 +817,24 @@ function BatchCommand(text) { // makes resulting SVG smaller var cleanupElement = function(element) { var handle = svgroot.suspendRedraw(60); - if (element.getAttribute('fill-opacity') == '1') - element.removeAttribute('fill-opacity'); - if (element.getAttribute('opacity') == '1') - element.removeAttribute('opacity'); - if (element.getAttribute('stroke') == 'none') - element.removeAttribute('stroke'); - if (element.getAttribute('stroke-dasharray') == 'none') - element.removeAttribute('stroke-dasharray'); - if (element.getAttribute('stroke-opacity') == '1') - element.removeAttribute('stroke-opacity'); - if (element.getAttribute('stroke-width') == '1') - element.removeAttribute('stroke-width'); - if (element.getAttribute('rx') == '0') - element.removeAttribute('rx') - if (element.getAttribute('ry') == '0') - element.removeAttribute('ry') - if (element.getAttribute('display') == 'inline') - element.removeAttribute('display'); + var defaults = { + 'fill-opacity':1, + 'opacity':1, + 'stroke':'none', + 'stroke-dasharray':'none', + 'stroke-opacity':1, + 'stroke-width':1, + 'rx':0, + 'ry':0, + 'display':'inline' + } + for(var attr in defaults) { + var val = defaults[attr]; + if(element.getAttribute(attr) == val) { + element.removeAttribute(attr); + } + } + svgroot.unsuspendRedraw(handle); }; @@ -854,12 +859,11 @@ function BatchCommand(text) { // TODO: declare the variables and set them as null, then move this setup stuff to // an initialization function - probably just use clear() var canvas = this; - var container = c; var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var xmlns = "http://www.w3.org/XML/1998/namespace"; var idprefix = "svg_"; - var svgdoc = c.ownerDocument; + var svgdoc = container.ownerDocument; var svgroot = svgdoc.createElementNS(svgns, "svg"); svgroot.setAttribute("width", 640); svgroot.setAttribute("height", 480); @@ -873,16 +877,20 @@ function BatchCommand(text) { svgcontent.setAttribute("xmlns", svgns); svgcontent.setAttribute("xmlns:xlink", xlinkns); svgroot.appendChild(svgcontent); - // TODO: make this string optional and set by the client - // TODO: make sure this is always at the top of the SVG file right underneath the