From d4a60fb62a61424baf67fb9f3fef83e1f7bb0f4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 22 Oct 2012 16:31:08 -0700 Subject: [PATCH] More SVG code refactoring. Follow coding conventions and fix some forgotten renamings. --- .../SVG Import/Circle and Oval Testing.html | 4 +- examples/SVG Import/Line Testing.html | 4 +- .../SVG Import/Multiple Paths Test 1.html | 4 +- .../SVG Import/Multiple Paths Test 2.html | 4 +- examples/SVG Import/Nested Groups Test.html | 4 +- examples/SVG Import/Rect Testing.html | 4 +- examples/SVG Import/Testing.html | 4 +- examples/SVG Import/Text Testing.html | 4 +- examples/SVG Import/Transform Testing.html | 4 +- src/svg/ExportSVG.js | 285 ++++++------- src/svg/ImportSVG.js | 402 +++++++++--------- test/tests/ImportSVG.js | 36 +- 12 files changed, 378 insertions(+), 381 deletions(-) diff --git a/examples/SVG Import/Circle and Oval Testing.html b/examples/SVG Import/Circle and Oval Testing.html index 47387c38..4523e0dd 100644 --- a/examples/SVG Import/Circle and Oval Testing.html +++ b/examples/SVG Import/Circle and Oval Testing.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Line Testing.html b/examples/SVG Import/Line Testing.html index 277811f4..9c594694 100644 --- a/examples/SVG Import/Line Testing.html +++ b/examples/SVG Import/Line Testing.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Multiple Paths Test 1.html b/examples/SVG Import/Multiple Paths Test 1.html index 5914a32b..9c5a1852 100644 --- a/examples/SVG Import/Multiple Paths Test 1.html +++ b/examples/SVG Import/Multiple Paths Test 1.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Multiple Paths Test 2.html b/examples/SVG Import/Multiple Paths Test 2.html index 89117566..f19fde4e 100644 --- a/examples/SVG Import/Multiple Paths Test 2.html +++ b/examples/SVG Import/Multiple Paths Test 2.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Nested Groups Test.html b/examples/SVG Import/Nested Groups Test.html index c7d60e69..57d4268c 100644 --- a/examples/SVG Import/Nested Groups Test.html +++ b/examples/SVG Import/Nested Groups Test.html @@ -12,8 +12,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Rect Testing.html b/examples/SVG Import/Rect Testing.html index 63f28112..6d5d2dc1 100644 --- a/examples/SVG Import/Rect Testing.html +++ b/examples/SVG Import/Rect Testing.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Testing.html b/examples/SVG Import/Testing.html index 678b86e8..e4a7607f 100644 --- a/examples/SVG Import/Testing.html +++ b/examples/SVG Import/Testing.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Text Testing.html b/examples/SVG Import/Text Testing.html index af17406f..5a012294 100644 --- a/examples/SVG Import/Text Testing.html +++ b/examples/SVG Import/Text Testing.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/examples/SVG Import/Transform Testing.html b/examples/SVG Import/Transform Testing.html index 7561ce96..63e88164 100644 --- a/examples/SVG Import/Transform Testing.html +++ b/examples/SVG Import/Transform Testing.html @@ -11,8 +11,8 @@ // strokeWidth: 2, // strokeCap: 'round' }; - var isvg = new ImportSvg; - isvg.importSVG(document.getElementById('svg')); + var isvg = new ImportSvg(); + isvg.importSvg(document.getElementById('svg')); diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js index 211bf1dc..7c8ba727 100644 --- a/src/svg/ExportSVG.js +++ b/src/svg/ExportSVG.js @@ -111,123 +111,124 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ var pointArray; var handleInArray; var handleOutArray; + var type; //finding the type of path to export - if(path.content) { + if (path.content) { type = 'text'; } else { //Values are only defined if the path is not text because // text does not have these values segArray = path.getSegments(); - pointArray = new Array(); - handleInArray = new Array(); - handleOutArray = new Array(); + pointArray = []; + handleInArray = []; + handleOutArray = []; for (i = 0; i < segArray.length; i++) { pointArray[i] = segArray[i].getPoint(); handleInArray[i] = segArray[i].getHandleIn(); handleOutArray[i] = segArray[i].getHandleOut(); } var exp = this; - var type = exp._determineType(path, segArray, pointArray, handleInArray, handleOutArray); + type = exp._determineType(path, segArray, pointArray, handleInArray, handleOutArray); } //switch statement that determines what type of SVG element to add to the SVG Object switch (type) { - case 'rect': - var width = pointArray[0].getDistance(pointArray[3], false); - var height = pointArray[0].getDistance(pointArray[1], false); - svgEle = document.createElementNS(this.NS, 'rect'); - svgEle.setAttribute('x', path.bounds.topLeft.getX()); - svgEle.setAttribute('y', path.bounds.topLeft.getY()); - svgEle.setAttribute('width', width); - svgEle.setAttribute('height', height); - break; - case 'roundRect': - //d variables and point are used to determine the rounded corners for the rounded rectangle - var dx1 = pointArray[1].getDistance(pointArray[6], false); - var dx2 = pointArray[0].getDistance(pointArray[7], false); - var dx3 = (dx1 - dx2) / 2; - var dy1 = pointArray[0].getDistance(pointArray[3], false); - var dy2 = pointArray[1].getDistance(pointArray[2], false); - var dy3 = (dy1 - dy2) / 2; - var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].getY() - dy3)); - var width = Math.round(dx1); - var height = Math.round(dy1); - var rx = pointArray[3].getX() - point.x; - var ry = pointArray[2].getY() - point.y; - svgEle = document.createElementNS(this.NS, 'rect'); - svgEle.setAttribute('x', path.bounds.topLeft.getX()); - svgEle.setAttribute('y', path.bounds.topLeft.getY()); - svgEle.setAttribute('rx', rx); - svgEle.setAttribute('ry', ry); - svgEle.setAttribute('width', width); - svgEle.setAttribute('height', height); - break; - case'line': - svgEle = document.createElementNS(this.NS, 'line'); - svgEle.setAttribute('x1', pointArray[0].getX()); - svgEle.setAttribute('y1', pointArray[0].getY()); - svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX()); - svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY()); - break; - case 'circle': - svgEle = document.createElementNS(this.NS, 'circle'); - var radius = (pointArray[0].getDistance(pointArray[2], false)) /2; - svgEle.setAttribute('cx', path.bounds.center.x); - svgEle.setAttribute('cy', path.bounds.center.y); - svgEle.setAttribute('r', radius); - break; - case 'ellipse': - svgEle = document.createElementNS(this.NS, 'ellipse'); - var radiusX = (pointArray[2].getDistance(pointArray[0], false)) / 2; - var radiusY = (pointArray[3].getDistance(pointArray[1], false)) /2; - svgEle.setAttribute('cx', path.bounds.center.x); - svgEle.setAttribute('cy', path.bounds.center.y); - svgEle.setAttribute('rx', radiusX); - svgEle.setAttribute('ry', radiusY); - break; - case 'polyline': - svgEle = document.createElementNS(this.NS, 'polyline'); - var pointString = ''; - for(i = 0; i < pointArray.length; ++i) { - pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; - } - svgEle.setAttribute('points', pointString); - break; - case 'polygon': - svgEle = document.createElementNS(this.NS, 'polygon'); - var pointString = ''; - for(i = 0; i < pointArray.length; ++i) { - pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; - } - svgEle.setAttribute('points', pointString); - break; - case 'text': - svgEle = document.createElementNS(this.NS, 'text'); - svgEle.setAttribute('x', path.getPoint().getX()); - svgEle.setAttribute('y', path.getPoint().getY()); - if(path.style.font != undefined) { - svgEle.setAttribute('font', path.style.font); - } - if(path.characterStyle.font != undefined) { - svgEle.setAttribute('font-family', path.characterStyle.font); - } - if(path.characterStyle.fontSize != undefined) { - svgEle.setAttribute('font-size',path.characterStyle.fontSize); - } - svgEle.textContent = path.getContent(); - break; - default: - svgEle = document.createElementNS(this.NS, 'path'); - svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray); - break; + case 'rect': + var width = pointArray[0].getDistance(pointArray[3], false); + var height = pointArray[0].getDistance(pointArray[1], false); + svgEle = document.createElementNS(this.NS, 'rect'); + svgEle.setAttribute('x', path.bounds.topLeft.getX()); + svgEle.setAttribute('y', path.bounds.topLeft.getY()); + svgEle.setAttribute('width', width); + svgEle.setAttribute('height', height); + break; + case 'roundRect': + //d variables and point are used to determine the rounded corners for the rounded rectangle + var dx1 = pointArray[1].getDistance(pointArray[6], false); + var dx2 = pointArray[0].getDistance(pointArray[7], false); + var dx3 = (dx1 - dx2) / 2; + var dy1 = pointArray[0].getDistance(pointArray[3], false); + var dy2 = pointArray[1].getDistance(pointArray[2], false); + var dy3 = (dy1 - dy2) / 2; + var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].getY() - dy3)); + var width = Math.round(dx1); + var height = Math.round(dy1); + var rx = pointArray[3].getX() - point.x; + var ry = pointArray[2].getY() - point.y; + svgEle = document.createElementNS(this.NS, 'rect'); + svgEle.setAttribute('x', path.bounds.topLeft.getX()); + svgEle.setAttribute('y', path.bounds.topLeft.getY()); + svgEle.setAttribute('rx', rx); + svgEle.setAttribute('ry', ry); + svgEle.setAttribute('width', width); + svgEle.setAttribute('height', height); + break; + case'line': + svgEle = document.createElementNS(this.NS, 'line'); + svgEle.setAttribute('x1', pointArray[0].getX()); + svgEle.setAttribute('y1', pointArray[0].getY()); + svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX()); + svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY()); + break; + case 'circle': + svgEle = document.createElementNS(this.NS, 'circle'); + var radius = (pointArray[0].getDistance(pointArray[2], false)) /2; + svgEle.setAttribute('cx', path.bounds.center.x); + svgEle.setAttribute('cy', path.bounds.center.y); + svgEle.setAttribute('r', radius); + break; + case 'ellipse': + svgEle = document.createElementNS(this.NS, 'ellipse'); + var radiusX = (pointArray[2].getDistance(pointArray[0], false)) / 2; + var radiusY = (pointArray[3].getDistance(pointArray[1], false)) /2; + svgEle.setAttribute('cx', path.bounds.center.x); + svgEle.setAttribute('cy', path.bounds.center.y); + svgEle.setAttribute('rx', radiusX); + svgEle.setAttribute('ry', radiusY); + break; + case 'polyline': + svgEle = document.createElementNS(this.NS, 'polyline'); + var pointString = ''; + for(i = 0; i < pointArray.length; ++i) { + pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; + } + svgEle.setAttribute('points', pointString); + break; + case 'polygon': + svgEle = document.createElementNS(this.NS, 'polygon'); + var pointString = ''; + for(i = 0; i < pointArray.length; ++i) { + pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; + } + svgEle.setAttribute('points', pointString); + break; + case 'text': + svgEle = document.createElementNS(this.NS, 'text'); + svgEle.setAttribute('x', path.getPoint().getX()); + svgEle.setAttribute('y', path.getPoint().getY()); + if (path.style.font != undefined) { + svgEle.setAttribute('font', path.style.font); + } + if (path.characterStyle.font != undefined) { + svgEle.setAttribute('font-family', path.characterStyle.font); + } + if (path.characterStyle.fontSize != undefined) { + svgEle.setAttribute('font-size',path.characterStyle.fontSize); + } + svgEle.textContent = path.getContent(); + break; + default: + svgEle = document.createElementNS(this.NS, 'path'); + svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray); + break; } //If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle //found by the determineIfTransformed method and make a path that accommodates for the transformed object - if(type != 'text' && type != undefined && type != 'polygon' && type != 'polyline' && type != 'line') { + if (type != 'text' && type != undefined && type != 'polygon' && type != 'polyline' && type != 'line') { //TODO: Need to implement exported transforms for circle, ellipse, and rectangles instead of //making them paths var angle = this._determineIfTransformed(path, pointArray, type) + 90; - if(angle != 0) { - if(type == 'rect' || type == 'roundRect') { + if (angle != 0) { + if (type == 'rect' || type == 'roundRect') { svgEle = document.createElementNS(this.NS, 'path'); svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray); } else { @@ -236,10 +237,10 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ } } } - if(type == 'text') { + if (type == 'text') { svgEle.setAttribute('transform','rotate(' + path.matrix.getRotation() + ',' + path.getPoint().getX() + ',' +path.getPoint().getY() +')'); } - if(path.id != undefined) { + if (path.id != undefined) { svgEle.setAttribute('id', path.id); } //checks if there is a stroke color in the passed in path @@ -254,30 +255,30 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ svgEle.setAttribute('fill', 'rgba(0,0,0,0)'); } //same thing as stroke color except with stroke width - if(path.strokeWidth != undefined){ + if (path.strokeWidth != undefined) { svgEle.setAttribute('stroke-width', path.strokeWidth); } //same thing as stroke color except with the path name - if(path.name != undefined) { + if (path.name != undefined) { svgEle.setAttribute('name', path.name); } //same thing as stroke color except with the strokeCap - if(path.strokeCap != undefined) { + if (path.strokeCap != undefined) { svgEle.setAttribute('stroke-linecap', path.strokeCap); } //same thing as stroke color except with the strokeJoin - if(path.strokeJoin != undefined) { + if (path.strokeJoin != undefined) { svgEle.setAttribute('stroke-linejoin', path.strokeJoin); } //same thing as stroke color except with the opacity - if(path.opacity != undefined) { + if (path.opacity != undefined) { svgEle.setAttribute('opacity', path.opacity); } //checks to see if there the dashArray is set, then adds the attribute if there is. - if(path.dashArray[0] != undefined) { + if (path.dashArray[0] != undefined) { var dashVals = ''; for (var i in path.dashArray) { - if(i != path.dashArray.length -1) { + if (i != path.dashArray.length -1) { dashVals += path.dashArray[i] + ", "; } else { dashVals += path.dashArray[i]; @@ -286,17 +287,17 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ svgEle.setAttribute('stroke-dasharray', dashVals); } //same thing as stroke color except with the dash offset - if(path.dashOffset != undefined) { + if (path.dashOffset != undefined) { svgEle.setAttribute('stroke-dashoffset', path.dashOffset); } //same thing as stroke color except with the miter limit - if(path.miterLimit != undefined) { + if (path.miterLimit != undefined) { svgEle.setAttribute('stroke-miterlimit', path.miterLimit); } //same thing as stroke color except with the visibility - if(path.visibility != undefined) { + if (path.visibility != undefined) { var visString = ''; - if(path.visibility) { + if (path.visibility) { visString = 'visible'; } else { visString = 'hidden'; @@ -316,25 +317,25 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ var topMidPathy; var topMidPath; switch (type) { - case 'rect': - topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2; - topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2; - topMidPath = new Point(topMidPathx, topMidPathy); - break; - case 'ellipse': - topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); - break; - case 'circle': - topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); - break; - case 'roundRect': - topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2; - topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2; - topMidPath = new Point(topMidPathx, topMidPathy); - break; - default: - //Nothing happens here - break; + case 'rect': + topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2; + topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2; + topMidPath = new Point(topMidPathx, topMidPathy); + break; + case 'ellipse': + topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); + break; + case 'circle': + topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); + break; + case 'roundRect': + topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2; + topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2; + topMidPath = new Point(topMidPathx, topMidPathy); + break; + default: + //Nothing happens here + break; } var deltaY = topMidPath.y - centerPoint.getY(); var deltaX = topMidPath.x - centerPoint.getX(); @@ -362,7 +363,7 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ y2 = pointArray[i + 1].getY(); handleOut1 = hOArray[i]; handleIn2 = hIArray[i+1]; - if(handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() ==0) { + if (handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() ==0) { //L is lineto, moving to a point with drawing pointString+= 'L' + x2 + ',' + y2 + ' '; } else { @@ -410,7 +411,7 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ var curves = false; var segHandleIn; var segHandleOut; - for( var i in segArray){ + for( var i in segArray) { //Checks for any curves (if the handles have values). Differentiates between straight objects(line, polyline, rect, and polygon) and //and objects with curves(circle, ellipse, roundedRectangle). segHandleIn = segArray[i].getHandleIn(); @@ -421,46 +422,46 @@ var ExportSvg = this.ExportSvg = Base.extend(/** @Lends ExportSvg# */{ //Checks for curves in the passed in segments //Checks if the type of the passed in path is a rounded rectangle, an ellipse, a circle, or if it's simply a path //If there aren't any curves (if curves = false), then it checks if the type is a rectangle, a polygon, a polyline, or simply a line. - if(curves){ - if(segArray.length == 8) { + if (curves) { + if (segArray.length == 8) { //if the distance between (point0 and point3) and (point7 and point4) are equal then it is a roundedRectangle dPoint12 = Math.round(pointArray[0].getDistance(pointArray[3], false)); dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4], false)); - if(dPoint12 == dPoint34) { + if (dPoint12 == dPoint34) { type = 'roundRect'; } - } else if(segArray.length == 4) { + } else if (segArray.length == 4) { //checks if the values of the point have values similar to circles and ellipses var checkPointValues = true; for(i = 0; i < pointArray.length && checkPointValues == true; i++) { - if(handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0 && Math.round(Math.abs(handleInArray[i].getX())) === Math.round(Math.abs(handleOutArray[i].getX())) && Math.round(Math.abs(handleInArray[i].getY())) === Math.round(Math.abs(handleOutArray[i].getY()))) { + if (handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0 && Math.round(Math.abs(handleInArray[i].getX())) === Math.round(Math.abs(handleOutArray[i].getX())) && Math.round(Math.abs(handleInArray[i].getY())) === Math.round(Math.abs(handleOutArray[i].getY()))) { checkPointValues = true; } else { checkPointValues = false; } } - if(checkPointValues == true) { + if (checkPointValues == true) { //if the distance between (point0 and point2) and (point1 and point3) are equal, then it is a circle var d1 = Math.round(pointArray[0].getDistance(pointArray[2], false)); var d2 = Math.round(pointArray[1].getDistance(pointArray[3], false)); - if(d1 == d2) { + if (d1 == d2) { type = 'circle'; } else { type = 'ellipse'; } } } - } else if(!curves) { - if(segArray.length == 4) { + } else if (!curves) { + if (segArray.length == 4) { //if the distance between (point0 and point1) and (point2 and point3) are equal, then it is a rectangle dPoint12 = Math.round(pointArray[0].getDistance(pointArray[1], false)); dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2], false)); - if(dPoint12 == dPoint34) { + if (dPoint12 == dPoint34) { type = 'rect'; } - } else if(segArray.length >= 3) { + } else if (segArray.length >= 3) { //If it is an object with more than 3 segments and the path is closed, it is a polygon - if(path.getClosed()) { + if (path.getClosed()) { type = 'polygon'; } else { type = 'polyline'; diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js index bbf89ab5..b7e2f15a 100644 --- a/src/svg/ImportSVG.js +++ b/src/svg/ImportSVG.js @@ -39,48 +39,47 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{ * @param {SVG DOM} svg An SVG DOM object with parameters * @return {item} A Paper.js layer */ - importSVG: function(svg) { + importSvg: function(svg) { var item; var symbol; switch (svg.nodeName.toLowerCase()) { - case 'line': - item = this._importLine(svg); - break; - case 'rect': - item = this._importRectangle(svg); - break; - case 'circle': - item = this._importCircle(svg); - break; - case 'ellipse': - item = this._importOval(svg); - break; - case 'g': - case 'svg': - item = this._importGroup(svg); - break; - case 'text': - item = this._importText(svg); - break; - case 'path': - item = this._importPath(svg); - break; - case 'polygon': - case 'polyline': - item = this._importPoly(svg); - break; - case 'symbol': - item = this._importGroup(svg); - this._importAttributesAndStyles(svg, item); - symbol = new Symbol(item); - item = null; - default: - //Not supported yet. + case 'line': + item = this._importLine(svg); + break; + case 'rect': + item = this._importRectangle(svg); + break; + case 'circle': + item = this._importCircle(svg); + break; + case 'ellipse': + item = this._importOval(svg); + break; + case 'g': + case 'svg': + item = this._importGroup(svg); + break; + case 'text': + item = this._importText(svg); + break; + case 'path': + item = this._importPath(svg); + break; + case 'polygon': + case 'polyline': + item = this._importPoly(svg); + break; + case 'symbol': + item = this._importGroup(svg); + this._importAttributesAndStyles(svg, item); + symbol = new Symbol(item); + item = null; + default: + // Not supported yet. } - if (item) { + if (item) this._importAttributesAndStyles(svg, item); - } return item; }, @@ -101,13 +100,11 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{ var child; for (var i in svg.childNodes) { child = svg.childNodes[i]; - if (child.nodeType != 1) { + if (child.nodeType != 1) continue; - } - item = this.importSVG(child); - if (item) { + item = this.importSvg(child); + if (item) group.addChild(item); - } } return group; @@ -282,7 +279,7 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{ var controlPoint; var prevCommand; var segmentTo; - for (var i = 0; i < segments.numberOfItems; ++i){ + for (var i = 0; i < segments.numberOfItems; ++i) { segment = segments.getItem(i); if (segment.pathSegType == SVGPathSeg.PATHSEG_UNKNOWN) { continue; @@ -295,75 +292,75 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{ segmentTo = new Point(segment.x, segment.y); segmentTo = segmentTo.add(relativeToPoint); switch (segment.pathSegType) { - case SVGPathSeg.PATHSEG_CLOSEPATH: - path.closePath(); - break; - case SVGPathSeg.PATHSEG_MOVETO_ABS: - case SVGPathSeg.PATHSEG_MOVETO_REL: - path.moveTo(segmentTo); - break; - case SVGPathSeg.PATHSEG_LINETO_ABS: - case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS: - case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS: - case SVGPathSeg.PATHSEG_LINETO_REL: - case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL: - case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL: - path.lineTo(segmentTo); - break; - case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS: - case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL: - path.cubicCurveTo( - relativeToPoint.add([segment.x1, segment.y1]), - relativeToPoint.add([segment.x2, segment.y2]), - segmentTo - ); - break; - case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS: - case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL: - path.quadraticCurveTo( - relativeToPoint.add([segment.x1, segment.y1]), - segmentTo - ); - break; - case SVGPathSeg.PATHSEG_ARC_ABS: - case SVGPathSeg.PATHSEG_ARC_REL: - //TODO: Implement Arcs. - //TODO: Requires changes in Paper.js's Path to do. - //TODO: http://www.w3.org/TR/SVG/implnote.html - break; - case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS: - case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL: - prevCommand = segments.getItem(i - 1); - controlPoint = new Point(prevCommand.x2, prevCommand.y2); - controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]); - controlPoint = controlPoint.add(path.lastSegment.point); - controlPoint = path.lastSegment.point.subtract(controlPoint); - controlPoint = path.lastSegment.point.add(controlPoint); - path.cubicCurveTo( - controlPoint, - relativeToPoint.add([segment.x2, segment.y2]), - segmentTo - ); - break; - case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: - case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: - for (j = i; j >= 0; --j) { - prevCommand = segments.getItem(j); - if (prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS || - prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL - ) { - controlPoint = new Point(prevCommand.x1, prevCommand.y1); - controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]); - controlPoint = controlPoint.add(path.segments[j].point); - break; - } + case SVGPathSeg.PATHSEG_CLOSEPATH: + path.closePath(); + break; + case SVGPathSeg.PATHSEG_MOVETO_ABS: + case SVGPathSeg.PATHSEG_MOVETO_REL: + path.moveTo(segmentTo); + break; + case SVGPathSeg.PATHSEG_LINETO_ABS: + case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS: + case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS: + case SVGPathSeg.PATHSEG_LINETO_REL: + case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL: + case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL: + path.lineTo(segmentTo); + break; + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS: + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL: + path.cubicCurveTo( + relativeToPoint.add([segment.x1, segment.y1]), + relativeToPoint.add([segment.x2, segment.y2]), + segmentTo + ); + break; + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS: + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL: + path.quadraticCurveTo( + relativeToPoint.add([segment.x1, segment.y1]), + segmentTo + ); + break; + case SVGPathSeg.PATHSEG_ARC_ABS: + case SVGPathSeg.PATHSEG_ARC_REL: + //TODO: Implement Arcs. + //TODO: Requires changes in Paper.js's Path to do. + //TODO: http://www.w3.org/TR/SVG/implnote.html + break; + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS: + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL: + prevCommand = segments.getItem(i - 1); + controlPoint = new Point(prevCommand.x2, prevCommand.y2); + controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]); + controlPoint = controlPoint.add(path.lastSegment.point); + controlPoint = path.lastSegment.point.subtract(controlPoint); + controlPoint = path.lastSegment.point.add(controlPoint); + path.cubicCurveTo( + controlPoint, + relativeToPoint.add([segment.x2, segment.y2]), + segmentTo + ); + break; + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: + for (j = i; j >= 0; --j) { + prevCommand = segments.getItem(j); + if (prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS || + prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL + ) { + controlPoint = new Point(prevCommand.x1, prevCommand.y1); + controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]); + controlPoint = controlPoint.add(path.segments[j].point); + break; } - for (j; j < i; ++j) { - controlPoint = path.segments[j].point.subtract(controlPoint); - controlPoint = path.segments[j].point.add(controlPoint); - } - path.quadraticCurveTo(controlPoint, segmentTo); - break; + } + for (j; j < i; ++j) { + controlPoint = path.segments[j].point.subtract(controlPoint); + controlPoint = path.segments[j].point.add(controlPoint); + } + path.quadraticCurveTo(controlPoint, segmentTo); + break; } } @@ -445,79 +442,79 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{ return; } switch (name) { - case 'id': - item.name = value; - break; - case 'fill': - if (value != 'none') { - item.fillColor = value; - } - break; - case 'stroke': - if (value != 'none') { - item.strokeColor = value; - } - break; - case 'stroke-width': - item.strokeWidth = parseFloat(value, 10); - break; - case 'stroke-linecap': - item.strokeCap = value; - break; - case 'stroke-linejoin': - item.strokeJoin = value; - break; - case 'stroke-dasharray': - value = value.replace(/px/g, ''); - value = value.replace(/, /g, ','); - value = value.replace(/ /g, ','); - value = value.split(','); - for (var i in value) { - value[i] = parseFloat(value[i], 10); - } - item.dashArray = value; - break; - case 'stroke-dashoffset': - item.dashOffset = parseFloat(value, 10); - break; - case 'stroke-miterlimit': - item.miterLimit = parseFloat(value, 10); - break; - case 'transform': - this._applyTransform(item, svg); - case 'opacity': - item.opacity = parseFloat(value, 10); - case 'visibility': - item.visibility = (value == 'visible') ? true : false; - break; - case 'font': - case 'font-family': - case 'font-size': - //Implemented in characterStyle below. - break; - default: - // Not supported yet. - break; + case 'id': + item.name = value; + break; + case 'fill': + if (value != 'none') { + item.fillColor = value; + } + break; + case 'stroke': + if (value != 'none') { + item.strokeColor = value; + } + break; + case 'stroke-width': + item.strokeWidth = parseFloat(value, 10); + break; + case 'stroke-linecap': + item.strokeCap = value; + break; + case 'stroke-linejoin': + item.strokeJoin = value; + break; + case 'stroke-dasharray': + value = value.replace(/px/g, ''); + value = value.replace(/, /g, ','); + value = value.replace(/ /g, ','); + value = value.split(','); + for (var i in value) { + value[i] = parseFloat(value[i], 10); + } + item.dashArray = value; + break; + case 'stroke-dashoffset': + item.dashOffset = parseFloat(value, 10); + break; + case 'stroke-miterlimit': + item.miterLimit = parseFloat(value, 10); + break; + case 'transform': + this._applyTransform(item, svg); + case 'opacity': + item.opacity = parseFloat(value, 10); + case 'visibility': + item.visibility = (value == 'visible') ? true : false; + break; + case 'font': + case 'font-family': + case 'font-size': + //Implemented in characterStyle below. + break; + default: + // Not supported yet. + break; } if (item.characterStyle) { switch (name) { - case 'font': - var text = document.createElement('span'); - text.style.font = value; - for (var i = 0; i < text.style.length; ++i) { - var n = text.style[i]; - this._applyAttributeOrStyle(n, text.style[n], item, svg); - } - break; - case 'font-family': - var fonts = value.split(','); - fonts[0] = fonts[0].replace(/^\s+|\s+$/g, ""); - item.characterStyle.font = fonts[0]; - break; - case 'font-size': - item.characterStyle.fontSize = parseFloat(value, 10); - break; - } + case 'font': + var text = document.createElement('span'); + text.style.font = value; + for (var i = 0; i < text.style.length; ++i) { + var n = text.style[i]; + this._applyAttributeOrStyle(n, text.style[n], item, svg); + } + break; + case 'font-family': + var fonts = value.split(','); + fonts[0] = fonts[0].replace(/^\s+|\s+$/g, ""); + item.characterStyle.font = fonts[0]; + break; + case 'font-size': + item.characterStyle.fontSize = parseFloat(value, 10); + break; + } } }, @@ -550,29 +547,28 @@ var ImportSvg = this.ImportSvg = Base.extend(/** @Lends ImportSvg# */{ transform.matrix.f ); switch (transform.type) { - case SVGTransform.SVG_TRANSFORM_TRANSLATE: - break; - case SVGTransform.SVG_TRANSFORM_SCALE: - break; - - //Compensate for SVG's theta rotation going the opposite direction - case SVGTransform.SVG_TRANSFORM_MATRIX: - var temp = transformMatrix.getShearX(); - transformMatrix.setShearX(transformMatrix.getShearY()); - transformMatrix.setShearY(temp); - break; - case SVGTransform.SVG_TRANSFORM_SKEWX: - transformMatrix.setShearX(transformMatrix.getShearY()); - transformMatrix.setShearY(0); - break; - case SVGTransform.SVG_TRANSFORM_SKEWY: - transformMatrix.setShearY(transformMatrix.getShearX()); - transformMatrix.setShearX(0); - break; - case SVGTransform.SVG_TRANSFORM_ROTATE: - transformMatrix.setShearX(transformMatrix.getShearX() * -1); - transformMatrix.setShearY(transformMatrix.getShearY() * -1); - break; + case SVGTransform.SVG_TRANSFORM_TRANSLATE: + break; + case SVGTransform.SVG_TRANSFORM_SCALE: + break; + //Compensate for SVG's theta rotation going the opposite direction + case SVGTransform.SVG_TRANSFORM_MATRIX: + var temp = transformMatrix.getShearX(); + transformMatrix.setShearX(transformMatrix.getShearY()); + transformMatrix.setShearY(temp); + break; + case SVGTransform.SVG_TRANSFORM_SKEWX: + transformMatrix.setShearX(transformMatrix.getShearY()); + transformMatrix.setShearY(0); + break; + case SVGTransform.SVG_TRANSFORM_SKEWY: + transformMatrix.setShearY(transformMatrix.getShearX()); + transformMatrix.setShearX(0); + break; + case SVGTransform.SVG_TRANSFORM_ROTATE: + transformMatrix.setShearX(transformMatrix.getShearX() * -1); + transformMatrix.setShearY(transformMatrix.getShearY() * -1); + break; } matrix.concatenate(transformMatrix); } diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js index 44487a1c..45d13460 100644 --- a/test/tests/ImportSVG.js +++ b/test/tests/ImportSVG.js @@ -31,7 +31,7 @@ test('make an svg line', function() { shape.setAttribute('y2', y2); var isvg = new ImportSvg(); - var importedLine = isvg.importSVG(shape); + var importedLine = isvg.importSvg(shape); var line = new Path.Line([x1, y1], [x2, y2]); @@ -47,7 +47,7 @@ test('make an svg line with invalid values', function() { shape.setAttribute('y2', null); var isvg = new ImportSvg(); - var importedLine = isvg.importSVG(shape); + var importedLine = isvg.importSvg(shape); var line = new Path.Line([0, 0], [0, 0]); @@ -68,7 +68,7 @@ test('compare rectangle values', function() { shape.setAttribute('height', height); var isvg = new ImportSvg(); - var importedRectangle = isvg.importSVG(shape); + var importedRectangle = isvg.importSvg(shape); var topLeft = new Point(x, y); var size = new Size(width, height); @@ -92,7 +92,7 @@ test('compare negative rectangle values', function() { shape.setAttribute('height', height); var isvg = new ImportSvg(); - var importedRectangle = isvg.importSVG(shape); + var importedRectangle = isvg.importSvg(shape); var topLeft = new Point(x, y); var size = new Size(width, height); var rectangle = new Rectangle(topLeft, size); @@ -112,7 +112,7 @@ test('compare invalid rectangle values', function() { shape.setAttribute('height', null); var isvg = new ImportSvg(); - var importedRectangle = isvg.importSVG(shape); + var importedRectangle = isvg.importSvg(shape); var topLeft = new Point(0, 0); var size = new Size(0, 0); @@ -139,7 +139,7 @@ test('compare round rectangle values', function() { shape.setAttribute('height', height); var isvg = new ImportSvg(); - var importedRectangle = isvg.importSVG(shape); + var importedRectangle = isvg.importSvg(shape); var topLeft = new Point(x, y); var size = new Size(width, height); @@ -167,7 +167,7 @@ test('compare negative round rectangle values', function() { shape.setAttribute('height', height); var isvg = new ImportSvg(); - var importedRectangle = isvg.importSVG(shape); + var importedRectangle = isvg.importSvg(shape); var topLeft = new Point(x, y); var size = new Size(width, height); @@ -195,7 +195,7 @@ test('compare invalid round rectangle values', function() { shape.setAttribute('height', height); var isvg = new ImportSvg(); - var importedRectangle = isvg.importSVG(shape); + var importedRectangle = isvg.importSvg(shape); var topLeft = new Point(x, y); var size = new Size(width, height); @@ -219,7 +219,7 @@ test('compare oval values', function() { shape.setAttribute('ry', ry); var isvg = new ImportSvg(); - var importedOval = isvg.importSVG(shape); + var importedOval = isvg.importSvg(shape); var center = new Point(cx, cy); var offset = new Point(rx, ry); @@ -247,7 +247,7 @@ test('compare negative oval values', function() { shape.setAttribute('ry', ry); var isvg = new ImportSvg(); - var importedOval = isvg.importSVG(shape); + var importedOval = isvg.importSvg(shape); var center = new Point(cx, cy); var offset = new Point(rx, ry); @@ -270,7 +270,7 @@ test('compare invalid oval values', function() { shape.setAttribute('ry', null); var isvg = new ImportSvg(); - var importedOval = isvg.importSVG(shape); + var importedOval = isvg.importSvg(shape); var center = new Point(0, 0); var offset = new Point(0, 0); @@ -295,7 +295,7 @@ test('compare circle values', function() { shape.setAttribute('r', r); var isvg = new ImportSvg(); - var importedCircle = isvg.importSVG(shape); + var importedCircle = isvg.importSvg(shape); var center = new Point(cx, cy); var circle = new Path.Circle(center, r); @@ -315,7 +315,7 @@ test('compare negative circle values', function() { shape.setAttribute('r', r); var isvg = new ImportSvg(); - var importedCircle = isvg.importSVG(shape); + var importedCircle = isvg.importSvg(shape); var center = new Point(cx, cy); var circle = new Path.Circle(center, r); @@ -333,7 +333,7 @@ test('compare invalid circle values', function() { shape.setAttribute('r', null); var isvg = new ImportSvg(); - var importedCircle = isvg.importSVG(shape); + var importedCircle = isvg.importSvg(shape); var center = new Point(0, 0); var circle = new Path.Circle(center, 0); @@ -349,7 +349,7 @@ test('compare polygon values', function() { shape.setAttribute('points', svgpoints); var isvg = new ImportSvg(); - var importedPolygon = isvg.importSVG(shape); + var importedPolygon = isvg.importSvg(shape); var poly = new Path(); var points = shape.points; @@ -376,7 +376,7 @@ test('compare negative polygon values', function() { shape.setAttribute('points', svgpoints); var isvg = new ImportSvg(); - var importedPolygon = isvg.importSVG(shape); + var importedPolygon = isvg.importSvg(shape); var poly = new Path(); var points = shape.points; @@ -403,7 +403,7 @@ test('compare polyline values', function() { shape.setAttribute('points', svgpoints); var isvg = new ImportSvg(); - var importedPolyline = isvg.importSVG(shape); + var importedPolyline = isvg.importSvg(shape); var poly = new Path(); var points = shape.points; @@ -430,7 +430,7 @@ test('compare polyline values', function() { shape.setAttribute('points', svgpoints); var isvg = new ImportSvg(); - var importedPolyline = isvg.importSVG(shape); + var importedPolyline = isvg.importSvg(shape); var poly = new Path(); var points = shape.points;