diff --git a/src/svg/SvgExporter.js b/src/svg/SvgExporter.js index 16c86236..8abc64bb 100644 --- a/src/svg/SvgExporter.js +++ b/src/svg/SvgExporter.js @@ -50,10 +50,7 @@ var SvgExporter = this.SvgExporter = new function() { function exportItem(path) { var svg; //Getting all of the segments(a point, a HandleIn and a HandleOut) in the path - var segArray; - var pointArray; - var handleInArray; - var handleOutArray; + var segments; var type; //finding the type of path to export if (path.content) { @@ -61,22 +58,14 @@ var SvgExporter = this.SvgExporter = new function() { } else { //Values are only defined if the path is not text because // text does not have these values - segArray = path.getSegments(); - pointArray = []; - handleInArray = []; - handleOutArray = []; - for (var i = 0; i < segArray.length; i++) { - pointArray[i] = segArray[i].getPoint(); - handleInArray[i] = segArray[i].getHandleIn(); - handleOutArray[i] = segArray[i].getHandleOut(); - } - type = determineType(path, segArray, pointArray, handleInArray, handleOutArray); + segments = path.getSegments(); + type = determineType(path, segments); } //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]); - var height = pointArray[0].getDistance(pointArray[1]); + var width = segments[0]._point.getDistance(segments[3]._point); + var height = segments[0]._point.getDistance(segments[1]._point); svg = createElement('rect'); svg.setAttribute('x', path.bounds.topLeft.getX()); svg.setAttribute('y', path.bounds.topLeft.getY()); @@ -85,17 +74,17 @@ var SvgExporter = this.SvgExporter = new function() { 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]); - var dx2 = pointArray[0].getDistance(pointArray[7]); + var dx1 = segments[1]._point.getDistance(segments[6]._point); + var dx2 = segments[0]._point.getDistance(segments[7]._point); var dx3 = (dx1 - dx2) / 2; - var dy1 = pointArray[0].getDistance(pointArray[3]); - var dy2 = pointArray[1].getDistance(pointArray[2]); + var dy1 = segments[0]._point.getDistance(segments[3]._point); + var dy2 = segments[1]._point.getDistance(segments[2]._point); var dy3 = (dy1 - dy2) / 2; - var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].getY() - dy3)); + var point = new Point((segments[3]._point.getX() - dx3), (segments[2]._point.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; + var rx = segments[3]._point.getX() - point.x; + var ry = segments[2]._point.getY() - point.y; svg = createElement('rect'); svg.setAttribute('x', path.bounds.topLeft.getX()); svg.setAttribute('y', path.bounds.topLeft.getY()); @@ -106,22 +95,22 @@ var SvgExporter = this.SvgExporter = new function() { break; case'line': svg = createElement('line'); - svg.setAttribute('x1', pointArray[0].getX()); - svg.setAttribute('y1', pointArray[0].getY()); - svg.setAttribute('x2', pointArray[pointArray.length - 1].getX()); - svg.setAttribute('y2', pointArray[pointArray.length - 1].getY()); + svg.setAttribute('x1', segments[0]._point.getX()); + svg.setAttribute('y1', segments[0]._point.getY()); + svg.setAttribute('x2', segments[segments.length - 1]._point.getX()); + svg.setAttribute('y2', segments[segments.length - 1]._point.getY()); break; case 'circle': svg = createElement('circle'); - var radius = (pointArray[0].getDistance(pointArray[2])) /2; + var radius = (segments[0]._point.getDistance(segments[2]._point)) /2; svg.setAttribute('cx', path.bounds.center.x); svg.setAttribute('cy', path.bounds.center.y); svg.setAttribute('r', radius); break; case 'ellipse': svg = createElement('ellipse'); - var radiusX = pointArray[2].getDistance(pointArray[0]) / 2; - var radiusY = pointArray[3].getDistance(pointArray[1]) /2; + var radiusX = segments[2]._point.getDistance(segments[0]._point) / 2; + var radiusY = segments[3]._point.getDistance(segments[1]._point) /2; svg.setAttribute('cx', path.bounds.center.x); svg.setAttribute('cy', path.bounds.center.y); svg.setAttribute('rx', radiusX); @@ -130,16 +119,16 @@ var SvgExporter = this.SvgExporter = new function() { case 'polyline': svg = createElement('polyline'); var pointString = ''; - for(var i = 0; i < pointArray.length; i++) { - pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; + for(var i = 0; i < segments.length; i++) { + pointString += segments[i]._point.getX() + ',' + segments[i]._point.getY() + ' '; } svg.setAttribute('points', pointString); break; case 'polygon': svg = createElement('polygon'); var pointString = ''; - for(i = 0; i < pointArray.length; i++) { - pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' '; + for(i = 0; i < segments.length; i++) { + pointString += segments[i]._point.getX() + ',' + segments[i]._point.getY() + ' '; } svg.setAttribute('points', pointString); break; @@ -156,7 +145,7 @@ var SvgExporter = this.SvgExporter = new function() { svg.textContent = path.getContent(); break; default: - svg = pathSetup(path, pointArray, handleInArray, handleOutArray); + svg = pathSetup(path, segments); break; } //If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle @@ -164,12 +153,12 @@ var SvgExporter = this.SvgExporter = new function() { 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 = determineIfTransformed(path, pointArray, type) + 90; + var angle = determineIfTransformed(path, segments, type) + 90; if (angle != 0) { if (type == 'rect' || type == 'roundrect') { - svg = pathSetup(path, pointArray, handleInArray, handleOutArray); + svg = pathSetup(path, segments); } else { - svg = pathSetup(path, pointArray, handleInArray, handleOutArray); + svg = pathSetup(path, segments); } } } @@ -191,7 +180,7 @@ var SvgExporter = this.SvgExporter = new function() { }; // Determines whether the object has been transformed or not through finding the angle - function determineIfTransformed(path, pointArray, type) { + function determineIfTransformed(path, segments, type) { var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2; var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2; var topMidBound = new Point(topMidBoundx, topMidBoundy); @@ -201,19 +190,19 @@ var SvgExporter = this.SvgExporter = new function() { var topMidPath; switch (type) { case 'rect': - topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2; - topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2; + topMidPathx = (segments[1]._point.getX() + segments[2]._point.getX() )/2; + topMidPathy = (segments[1]._point.getY() + segments[2]._point.getY() )/2; topMidPath = new Point(topMidPathx, topMidPathy); break; case 'ellipse': - topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); + topMidPath = new Point(segments[1]._point.getX(), segments[1]._point.getY()); break; case 'circle': - topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY()); + topMidPath = new Point(segments[1]._point.getX(), segments[1]._point.getY()); break; case 'roundrect': - topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2; - topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2; + topMidPathx = (segments[3]._point.getX() + segments[4]._point.getX())/2; + topMidPathy = (segments[3]._point.getY() + segments[4]._point.getY())/2; topMidPath = new Point(topMidPathx, topMidPathy); break; default: @@ -226,20 +215,20 @@ var SvgExporter = this.SvgExporter = new function() { return angleInDegrees; } - function pathSetup(path, pointArray, hIArray, hOArray) { + function pathSetup(path, segments) { var svgPath = createElement('path'); var pointString = ''; // pointstring is formatted in the way the SVG XML will be reading. // Namely, a point and the way to traverse to that point. - pointString += 'M' + pointArray[0].getX() + ',' + pointArray[0].getY() + ' '; + pointString += 'M' + segments[0]._point.getX() + ',' + segments[0]._point.getY() + ' '; //Checks 2 points and the angles in between the 2 points - for (i = 0; i < pointArray.length-1; i++) { - var x1 = pointArray[i].getX(), - y1 = pointArray[i].getY(), - x2 = pointArray[i + 1].getX(), - y2 = pointArray[i + 1].getY(), - handleOut1 = hOArray[i], - handleIn2 = hIArray[i+1]; + for (i = 0; i < segments.length-1; i++) { + var x1 = segments[i]._point.getX(), + y1 = segments[i]._point.getY(), + x2 = segments[i + 1]._point.getX(), + y2 = segments[i + 1]._point.getY(), + handleOut1 = segments[i]._handleOut, + handleIn2 = segments[i+1]._handleIn; 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 + ' '; @@ -250,14 +239,14 @@ var SvgExporter = this.SvgExporter = new function() { pointString += (x2 - x1) + ',' + (y2 - y1) + ' '; } } - if (!hOArray[hOArray.length - 1].equals([0, 0]) && !hIArray[0].equals([0, 0])) { - var handleOut1 = hOArray[hOArray.length - 1], - handleIn2 = hIArray[0], + if (!segments[segments.length - 1]._handleOut.equals([0, 0]) && !segments[0]._handleIn.equals([0, 0])) { + var handleOut1 = segments[segments.length - 1]._handleOut, + handleIn2 = segments[0]._handleIn, // Bezier curve from last point to first - x1 = pointArray[pointArray.length - 1].getX(), - y1 = pointArray[pointArray.length - 1].getY(), - x2 = pointArray[0].getX(), - y2 = pointArray[0].getY(); + x1 = segments[segments.length - 1]._point.getX(), + y1 = segments[segments.length - 1]._point.getY(), + x2 = segments[0]._point.getX(), + y2 = segments[0]._point.getY(); pointString += 'c' + (handleOut1.getX()) + ',' + (handleOut1.getY()) + ' '; pointString += (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' '; pointString += (x2 - x1) + ',' + (y2 - y1) + ' '; @@ -273,7 +262,7 @@ var SvgExporter = this.SvgExporter = new function() { /** * Checks the type SVG object created by converting from Paper.js */ - function determineType(path, segArray, pointArray, handleInArray, handleOutArray) { + function determineType(path, segments) { var type; var dPoint12; var dPoint34; @@ -281,15 +270,15 @@ var SvgExporter = this.SvgExporter = new function() { // between straight objects (line, polyline, rect, and polygon) and // objects with curves(circle, ellipse, roundedRectangle). if (path.isPolygon()) { - if (segArray.length == 4) { + if (segments.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])); - dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2])); + dPoint12 = Math.round(segments[0]._point.getDistance(segments[1]._point)); + dPoint34 = Math.round(segments[3]._point.getDistance(segments[2]._point)); if (dPoint12 == dPoint34) { type = 'rect'; } - } else if (segArray.length >= 3) { + } else if (segments.length >= 3) { //If it is an object with more than 3 segments and the path is closed, it is a polygon if (path.getClosed()) { type = 'polygon'; @@ -301,22 +290,22 @@ var SvgExporter = this.SvgExporter = new function() { type = 'line'; } } else { - if (segArray.length == 8) { + if (segments.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])); - dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4])); + dPoint12 = Math.round(segments[0]._point.getDistance(segments[3]._point)); + dPoint34 = Math.round(segments[7]._point.getDistance(segments[4]._point)); if (dPoint12 == dPoint34) { type = 'roundrect'; } - } else if (segArray.length == 4) { + } else if (segments.length == 4) { // Check if the values of the point have values similar to // circles and ellipses. var checkPointValues = true; - for (i = 0; i < pointArray.length && checkPointValues; 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()))) { + for (i = 0; i < segments.length && checkPointValues; i++) { + if (segments[i]._handleIn.getX() != 0 || segments[i]._handleIn.getY() != 0 + && Math.round(Math.abs(segments[i]._handleIn.getX())) === Math.round(Math.abs(segments[i]._handleOut.getX())) + && Math.round(Math.abs(segments[i]._handleIn.getY())) === Math.round(Math.abs(segments[i]._handleOut.getY()))) { checkPointValues = true; } else { checkPointValues = false; @@ -325,8 +314,8 @@ var SvgExporter = this.SvgExporter = new function() { if (checkPointValues) { // 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])); - var d2 = Math.round(pointArray[1].getDistance(pointArray[3])); + var d1 = Math.round(segments[0]._point.getDistance(segments[2]._point)); + var d2 = Math.round(segments[1]._point.getDistance(segments[3]._point)); if (d1 == d2) { type = 'circle'; } else {