Merge pull request #50 from adobe-webplatform/crop

Implement user defined cropping with width and height in svgOMG
adobe-research · Mar 5, 2015 · 1941bc5 · 1941bc5
2 parents 37c06cc + 5edef8c
commit 1941bc5
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 29 deletions.
diff --git a/main.js b/main.js
@@ -172,14 +172,16 @@
             targetHeight,
             docId,
             compId,
-            constrainToDocBounds;
+            constrainToDocBounds,
+            cropRect;
 
         compId = params.compId;
         layerSpec = params.layerSpec;
         layerScale = params.layerScale;
         targetWidth = params.targetWidth;
         targetHeight = params.targetHeight;
         constrainToDocBounds = params.constrainToDocBounds;
+        cropRect = params.cropRect;
         docId = params.documentId;
 
         generator.evaluateJSXString("app.activeDocument.id").then(function (activeDocId) {
@@ -203,7 +205,8 @@
                                     scale: layerScale,
                                     targetWidth: targetWidth,
                                     targetHeight: targetHeight,
-                                    constrainToDocBounds: constrainToDocBounds
+                                    constrainToDocBounds: constrainToDocBounds,
+                                    cropRect: cropRect
                                 }, svgWriterErrors);
 
                             deferedResult.resolve({

diff --git a/svgWriterPreprocessor.js b/svgWriterPreprocessor.js
@@ -302,36 +302,58 @@
 
         var finalizePreprocessing = function (ctx) {
             var bnds = ctx.contentBounds,
-                docBounds = ctx.docBounds;
-            if (ctx.config.trimToArtBounds) {
-                if (bnds) {
-                    // FIXME: We rounded the document size before. However, this causes visual problems
-                    // with small viewports or viewBoxes. Move back to more precise dimensions for now.
-                    if (ctx.config.constrainToDocBounds) {
-                        bnds.left = Math.max(0, bnds.left || 0);
-                        bnds.right = Math.min(docBounds.right, bnds.right || 0);
-                        bnds.top = Math.max(0, bnds.top || 0);
-                        bnds.bottom = Math.min(docBounds.bottom, bnds.bottom || 0);
-                    } else {
-                        bnds.left = bnds.left || 0;
-                        bnds.right = bnds.right || 0;
-                        bnds.top = bnds.top || 0;
-                        bnds.bottom = bnds.bottom || 0;
-                    }
+                docBounds = ctx.docBounds,
+                w,
+                h,
+                cropRect = ctx.config.cropRect;
 
-                    ctx._shiftContentX = -bnds.left;
-                    ctx._shiftContentY = -bnds.top;
+            if (!ctx.config.trimToArtBounds || !bnds) {
+                return;
+            }
 
-                    if (ctx.svgOM && ctx.viewBox) {
-                        ctx.viewBox.left = 0;
-                        ctx.viewBox.top = 0;
-                        ctx.viewBox.right = bnds.right - bnds.left;
-                        ctx.viewBox.bottom = bnds.bottom - bnds.top;
-                    } else {
-                        console.log("no viewBox");
-                    }
-                }
+            // FIXME: We rounded the document size before. However, this causes visual problems
+            // with small viewports or viewBoxes. Move back to more precise dimensions for now.
+            if (ctx.config.constrainToDocBounds) {
+                bnds.left = Math.max(0, bnds.left || 0);
+                bnds.right = Math.min(docBounds.right, bnds.right || 0);
+                bnds.top = Math.max(0, bnds.top || 0);
+                bnds.bottom = Math.min(docBounds.bottom, bnds.bottom || 0);
+            } else {
+                bnds.left = bnds.left || 0;
+                bnds.right = bnds.right || 0;
+                bnds.top = bnds.top || 0;
+                bnds.bottom = bnds.bottom || 0;
             }
+
+            ctx._shiftContentX = -bnds.left;
+            ctx._shiftContentY = -bnds.top;
+
+            if (!ctx.viewBox) {
+                console.log("no viewBox");
+                return;
+            }
+
+            ctx.viewBox.left = 0;
+            ctx.viewBox.top = 0;
+            ctx.viewBox.right = bnds.right - bnds.left;
+            ctx.viewBox.bottom = bnds.bottom - bnds.top;
+
+            w = ctx.viewBox.right;
+            h = ctx.viewBox.bottom;
+
+            // Clip to crop boundaries.
+            // FIXME: Do we want to allow cropping without trimToArtBounds set?
+            if (!cropRect ||
+                cropRect.width == w &&
+                cropRect.height == h) {
+                return;
+            }
+
+            ctx.viewBox.right = cropRect.width;
+            ctx.viewBox.bottom = cropRect.height;
+
+            ctx._shiftContentX += (cropRect.width - w) / 2;
+            ctx._shiftContentY += (cropRect.height - h) / 2;
         };
 
         this.processSVGNode = function (ctx, nested, sibling) {

diff --git a/tests/svgWriterPrerocessor.test.js b/tests/svgWriterPrerocessor.test.js
@@ -144,6 +144,34 @@ describe('SVGWriterPreprocessor', function (){
                     }
                 ]
             },
+            svgOM3 = {
+                global: {
+                    viewBox: {
+                        left: 0,
+                        right: 400,
+                        top: 0,
+                        bottom: 400
+                    }
+                },
+                children:[
+                    {
+                        type: "shape",
+                        shapeBounds: {
+                            left: 100,
+                            right: 200,
+                            top: 100,
+                            bottom: 200
+                        },
+                        shape: {
+                            type: "rect",
+                            x: 100,
+                            y: 100,
+                            width: 100,
+                            height: 100
+                        }
+                    }
+                ]
+            },
             ctx = {
                 svgOM: svgOM,
                 currentOMNode: svgOM,
@@ -171,6 +199,24 @@ describe('SVGWriterPreprocessor', function (){
                 config: {
                     trimToArtBounds: true
                 }
+            },
+            ctx3 = {
+                svgOM: svgOM3,
+                currentOMNode: svgOM3,
+                contentBounds: {},
+                viewBox: {
+                    left: 0,
+                    right: 400,
+                    top: 0,
+                    bottom: 400
+                },
+                config: {
+                    cropRect: {
+                        width: 200,
+                        height: 200
+                    },
+                    trimToArtBounds: true
+                }
             };
 
         svgWriterPreprocessor.processSVGOM(ctx);
@@ -191,6 +237,15 @@ describe('SVGWriterPreprocessor', function (){
         expect(ctx2.viewBox.left).to.equal(0);
         expect(ctx2.viewBox.right).to.equal(141.42000000000002);
         expect(ctx2.viewBox.bottom).to.equal(141.42000000000002);
+
+        svgWriterPreprocessor.processSVGOM(ctx3);
+
+        expect(ctx3.viewBox.top).to.equal(0);
+        expect(ctx3.viewBox.left).to.equal(0);
+        expect(ctx3.viewBox.right).to.equal(200);
+        expect(ctx3.viewBox.bottom).to.equal(200);
+        expect(ctx3.svgOM.children[0].shape.x).to.equal(50);
+        expect(ctx3.svgOM.children[0].shape.y).to.equal(50);
 
         /*
         //if we don't shift bounds...