From f38d3ee67401a18bb39cad0ce83b6fd5e963d5a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Wed, 14 May 2014 13:29:20 +0200
Subject: [PATCH] Handle view size and transformation correctly when exporting
 SVG.

Closes #277.
---
 src/svg/SVGExport.js | 43 ++++++++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/svg/SVGExport.js b/src/svg/SVGExport.js
index db5d2c07..75e9bfa1 100644
--- a/src/svg/SVGExport.js
+++ b/src/svg/SVGExport.js
@@ -38,8 +38,9 @@ new function() {
 			document.createElementNS('http://www.w3.org/2000/svg', tag), attrs);
 	}
 
-	function getTransform(item, attrs, coordinates, center) {
-		var matrix = item._matrix,
+	function getTransform(matrix, coordinates, center) {
+		// Use new Base() so we can use Base#set() on it.
+		var attrs = new Base(),
 			trans = matrix.getTranslation();
 		if (coordinates) {
 			// If the item suppports x- and y- coordinates, we're taking out the
@@ -78,7 +79,7 @@ new function() {
 	}
 
 	function exportGroup(item, options) {
-		var attrs = getTransform(item, {}),
+		var attrs = getTransform(item._matrix),
 			children = item._children;
 		var node = createElement('g', attrs);
 		for (var i = 0, l = children.length; i < l; i++) {
@@ -101,7 +102,7 @@ new function() {
 	}
 
 	function exportRaster(item) {
-		var attrs = getTransform(item, {}, true),
+		var attrs = getTransform(item._matrix, true),
 			size = item.getSize();
 		// Take into account that rasters are centered:
 		attrs.x -= size.width / 2;
@@ -120,7 +121,7 @@ new function() {
 		}
 		var segments = item._segments,
 			type,
-			attrs;
+			attrs = getTransform(item._matrix);
 		if (segments.length === 0)
 			return null;
 		if (item.isPolygon()) {
@@ -129,32 +130,29 @@ new function() {
 				var parts = [];
 				for(i = 0, l = segments.length; i < l; i++)
 					parts.push(formatter.point(segments[i]._point));
-				attrs = {
-					points: parts.join(' ')
-				};
+				attrs.points = parts.join(' ');
 			} else {
 				type = 'line';
 				var first = segments[0]._point,
 					last = segments[segments.length - 1]._point;
-				attrs = {
+				attrs.set({
 					x1: first.x,
 					y1: first.y,
 					x2: last.x,
 					y2: last.y
-				};
+				});
 			}
 		} else {
 			type = 'path';
-			var data = item.getPathData(null, options.precision);
-			attrs = data && { d: data };
+			attrs.d = item.getPathData(null, options.precision);
 		}
-		return createElement(type, getTransform(item, attrs));
+		return createElement(type, attrs);
 	}
 
 	function exportShape(item) {
 		var type = item._type,
 			radius = item._radius,
-			attrs = getTransform(item, {}, true, type !== 'rectangle');
+			attrs = getTransform(item._matrix, true, type !== 'rectangle');
 		if (type === 'rectangle') {
 			type = 'rect'; // SVG
 			var size = item._size,
@@ -179,7 +177,7 @@ new function() {
 	}
 
 	function exportCompoundPath(item, options) {
-		var attrs = getTransform(item, {});
+		var attrs = getTransform(item._matrix);
 		var data = item.getPathData(null, options.precision);
 		if (data)
 			attrs.d = data;
@@ -187,7 +185,7 @@ new function() {
 	}
 
 	function exportPlacedSymbol(item, options) {
-		var attrs = getTransform(item, {}, true),
+		var attrs = getTransform(item._matrix, true),
 			symbol = item.getSymbol(),
 			symbolNode = getDefinition(symbol, 'symbol'),
 			definition = symbol.getDefinition(),
@@ -264,7 +262,7 @@ new function() {
 	}
 
 	function exportText(item) {
-		var node = createElement('text', getTransform(item, {}, true));
+		var node = createElement('text', getTransform(item._matrix, true));
 		node.textContent = item._content;
 		return node;
 	}
@@ -413,7 +411,8 @@ new function() {
 		exportSVG: function(options) {
 			options = setOptions(options);
 			var layers = this.layers,
-				size = this.getView().getSize(),
+				view = this.getView(),
+				size = view.getViewSize(),
 				node = createElement('svg', {
 					x: 0,
 					y: 0,
@@ -422,7 +421,13 @@ new function() {
 					version: '1.1',
 					xmlns: 'http://www.w3.org/2000/svg',
 					'xmlns:xlink': 'http://www.w3.org/1999/xlink'
-				});
+				}),
+				matrix = view._matrix;
+			// If the view has a transformation, wrap all layers in a group with
+			// that transformation applied to.
+			if (!matrix.isIdentity())
+				node = node.appendChild(
+						createElement('g', getTransform(matrix)));
 			for (var i = 0, l = layers.length; i < l; i++)
 				node.appendChild(exportSVG(layers[i], options));
 			return exportDefinitions(node, options);