Merge pull request #142 from WebPA/absolute-path-data

Absolute path data from PS

svgOMGenerator.js

@@ -127,6 +127,12 @@
                         svgNode.id = writer.ID.getUnique("artboard");
                         writer.setArtboard(svgNode.id, svgNode.name, layer.artboard.artboardRect);
                     }
+                    // Either all layers are descendants of artboards or there are
+                    // no artboards. Use this for path shapes.
+                    // If there are artboards, elements seem to be relative to the first artboard.
+                    if (!writer.currentArtboardRect) {
+                        writer.currentArtboardRect = layer.artboard.artboardRect;
+                    }
                     // falls through
                 case "group":
                     if (!justTraverse) {

svgOMGeneratorShapes.js

@@ -19,7 +19,9 @@
 
     var omgStyles = require("./svgOMGeneratorStyles.js"),
         Utils = require("./utils.js"),
-        round2 = Utils.round2;
+        round2 = Utils.round2,
+        offsetX = 0,
+        offsetY = 0;
 
     function SVGOMGeneratorShapes() {
 
@@ -40,6 +42,57 @@
                     bnds[i][1] + (bnds[(i + 1) % 4][1] - bnds[i][1]) / 2];
         }
 
+        function writeCurveToPath (previousPoint, currentPoint) {
+            var controlPoint,
+                lastPoint,
+                pathData = "";
+
+            lastPoint = previousPoint.forward ? previousPoint.forward : previousPoint.anchor;
+            pathData += " C" + (lastPoint.x + offsetX) + " " + (lastPoint.y + offsetY) + " ";
+            controlPoint = currentPoint.backward ? currentPoint.backward : currentPoint.anchor;
+            pathData += (controlPoint.x + offsetX) + " " + (controlPoint.y + offsetY) + " ";
+            pathData += (currentPoint.anchor.x + offsetX) + " " + (currentPoint.anchor.y + offsetY);
+            return pathData;
+        }
+
+        function generateSVGSubPathStream (subComponent) {
+            var points = subComponent.points,
+                closedSubpath = !!subComponent.closedSubpath,
+                pathData = "",
+                i = 0;
+
+            for (; points && i < points.length; ++i) {
+                if (!i) {
+                    pathData = "M" + (points[i].anchor.x + offsetX) + " " + (points[i].anchor.y + offsetY);
+                } else {
+                    pathData += writeCurveToPath(points[i - 1], points[i]);
+                }
+            }
+            if (closedSubpath && points.length) {
+                pathData += writeCurveToPath(points[points.length - 1], points[0]);
+                pathData += "Z";
+            }
+            return pathData;
+        }
+
+        function generateSVGPathStream (path) {
+            var pathData = "";
+
+            for (var i = 0; i < path.pathComponents.length; ++i) {
+                if (!path.pathComponents[i].subpathListKey) {
+                    // FIXME: Generator versions before 1.3.0 do not provide path data. Some
+                    // tests were not transformed to the new format. Either fix those
+                    // JSON files or replace them. Return the rawPathData stream for now.
+                    return path.rawPathData;
+                }
+                for (var j = 0; j < path.pathComponents[i].subpathListKey.length; ++j) {
+                    pathData += generateSVGSubPathStream(path.pathComponents[i].subpathListKey[j]);
+                }
+            }
+
+            return pathData;
+        }
+
         this.inferTransformForShape = function (svgNode, layer, points, type) {
 
             var unshiftedRectBounds = [[layer.bounds.left, layer.bounds.top],
@@ -192,9 +245,19 @@
 
                 svgNode.visualBounds = layer.boundsWithFX || layer.bounds;
 
+                // If the path is on an artboard, it is relative to it and we
+                // need to apply the offset of the artboard.
+                if (writer.currentArtboardRect) {
+                    offsetX = writer.currentArtboardRect.left;
+                    offsetY = writer.currentArtboardRect.top;
+                } else {
+                    offsetX = 0;
+                    offsetY = 0;
+                }
+
                 svgNode.shape = {
                     type: "path",
-                    path: pathData
+                    path: generateSVGPathStream(path)
                 };
 
                 omgStyles.addStylingData(svgNode, layer, path.bounds, writer);

svgWriterGradient.js

@@ -135,8 +135,14 @@
                     id: gradientID
                 });
 
-            offsetX = (ctx._shiftContentX || 0) + (ctx._shiftCropRectX || 0);
-            offsetY = (ctx._shiftContentY || 0) + (ctx._shiftCropRectY || 0);
+            // FIXME: This check is because we do not shift points of paths
+            // but translate the whole path including paint servers.
+            // In the future we may shift the points and remove this special
+            // case.
+            if (omIn.type == "shape" && omIn.shape.type != "path") {
+                offsetX = (ctx._shiftContentX || 0) + (ctx._shiftCropRectX || 0);
+                offsetY = (ctx._shiftContentY || 0) + (ctx._shiftCropRectY || 0);
+            }
 
             if (!stops) {
                 console.warn("encountered gradient with no stops");

svgWriterPreprocessor.js

@@ -205,11 +205,9 @@
                     shape.y2 += offsetY;
                     break;
                 case "path":
-                    if (ctx._shiftCropRectX || ctx._shiftCropRectY) {
-                        omIn.transform = matrix.createMatrix();
-                        omIn.transformTX = ctx._shiftCropRectX || 0;
-                        omIn.transformTY = ctx._shiftCropRectY || 0;
-                    }
+                    omIn.transform = matrix.createMatrix();
+                    omIn.transformTX = offsetX;
+                    omIn.transformTY = offsetY;
                     break;
                 case "polygon":
                     // Fall through