Add methods to Item and Project to directly use SvgImporter / Exporter functionality.

examples/SVG Export/Circle Testing.html

@@ -25,13 +25,8 @@
 		var path = new Path.Circle(new Point(50, 50), 25);
 		path.fillColor = 'red';
 		
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		console.log(output);
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild (output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Empty Path Testing.html

@@ -19,13 +19,8 @@
 		var path2 = new Path(segments);
 		path2.strokeColor = 'yellow';
 		
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		console.log(output);
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild (output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Line Testing.html

@@ -34,13 +34,8 @@
 		line3.strokeColor = "yellow";
 		line3.strokeWidth = "5";
 		
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		console.log(output);
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild(output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Random Path Testing.html

@@ -32,13 +32,8 @@
 		var path = new Path.Star(center, points, radius1, radius2);
 		path.fillColor = 'black';
 		
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		console.log(output);
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild(output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Rect and Attribute Testing.html

@@ -46,13 +46,8 @@
 		path4.strokeColor= 'yellow';
 		path4.fillColor='purple';
 		
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		console.log(output);
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild(output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Rotated Primitives.html

@@ -34,12 +34,8 @@
 		rect.fillColor = 'yellow';
 		rect.rotate(-20);
 
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild (output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Text Testing.html

@@ -38,12 +38,8 @@
 			c.fillColor = colors[i];
 		}		
 
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild (output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Transform Test 1.html

@@ -22,13 +22,8 @@
 			clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
 		};
 
-		var output = SvgExporter.exportProject(project);
+		document.getElementById('svg').appendChild(project.exportSvg());
-		console.log(output);
-		var test = document.getElementById('svg')
-		test.innerHTML = "";
-		test.appendChild (output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Export/Transform Test 2.html

@@ -19,12 +19,9 @@
 		copy.strokeColor = 'red';
 		copy.rotate(-45);
 		copy.scale(0.5);
-		var output = SvgExporter.exportProject(project);
+
-		var test = document.getElementById('svg')
+		document.getElementById('svg').appendChild(project.exportSvg());
-		test.innerHTML = "";
-		test.appendChild (output);   
 	</script>
-	<svg id="svg" style="width: 500px; height: 500px">
+	<svg id="svg" style="width: 500px; height: 500px"></svg>
-	</svg>
 </body>
 </html>

examples/SVG Import/Circle and Ellipse Testing.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Line Testing.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Multiple Paths Test 1.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Multiple Paths Test 2.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Nested Groups Test.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Rect Testing.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Testing.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

examples/SVG Import/Text Testing.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>

examples/SVG Import/Transform Testing.html

@@ -6,12 +6,7 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
+		project.importSvg(document.getElementById('svg'));
-				// strokeColor: 'black',
-				// strokeWidth: 2,
-				// strokeCap: 'round'
-		};
-		SvgImporter.importSvg(document.getElementById('svg'));
 	</script>
 </head>
 <body>	

src/svg/SvgExporter.js

@@ -392,3 +392,15 @@ var SvgExporter = this.SvgExporter = new function() {
 		}
 	};
 };
+
+Item.inject({
+	exportSvg: function() {
+		return SvgExporter.exportItem(this);
+	}
+});
+
+Project.inject({
+	exportSvg: function() {
+		return SvgExporter.exportProject(this);
+	}
+});

src/svg/SvgImporter.js

@@ -435,3 +435,16 @@ var SvgImporter = this.SvgImporter = new function() {
 		}
 	};
 };
+
+Item.inject({
+	importSvg: function(svg) {
+		return this.addChild(SvgExporter.importSvg(svg));
+	}
+});
+
+Project.inject({
+	importSvg: function(svg) {
+		this.activate();
+		return SvgImporter.importSvg(svg);
+	}
+});

test/tests/SvgImporter.js

@@ -30,7 +30,7 @@ test('make an svg line', function() {
 	shape.setAttribute('x2', x2);
 	shape.setAttribute('y2', y2);
 
-	var importedLine = SvgImporter.importSvg(shape);
+	var importedLine = project.importSvg(shape);
 
 	var line = new Path.Line([x1, y1], [x2, y2]);
 
@@ -45,7 +45,7 @@ test('make an svg line with invalid values', function() {
 	shape.setAttribute('x2', null);
 	shape.setAttribute('y2', null);
 
-	var importedLine = SvgImporter.importSvg(shape);
+	var importedLine = project.importSvg(shape);
 
 	var line = new Path.Line([0, 0], [0, 0]);
 
@@ -64,7 +64,7 @@ test('compare rectangle values', function() {
 	shape.setAttribute('width', width);
 	shape.setAttribute('height', height);
 
-	var importedRectangle = SvgImporter.importSvg(shape);
+	var importedRectangle = project.importSvg(shape);
 
 	var topLeft = new Point(x, y);
 	var size = new Size(width, height);
@@ -87,7 +87,7 @@ test('compare negative rectangle values', function() {
 	shape.setAttribute('width', width);
 	shape.setAttribute('height', height);
 
-	var importedRectangle = SvgImporter.importSvg(shape);
+	var importedRectangle = project.importSvg(shape);
 		var topLeft = new Point(x, y);
 		var size = new Size(width, height);
 		var rectangle = new Rectangle(topLeft, size);
@@ -106,7 +106,7 @@ test('compare invalid rectangle values', function() {
 	shape.setAttribute('width', null);
 	shape.setAttribute('height', null);
 
-	var importedRectangle = SvgImporter.importSvg(shape);
+	var importedRectangle = project.importSvg(shape);
 	
 	var topLeft = new Point(0, 0);
 	var size = new Size(0, 0);
@@ -132,7 +132,7 @@ test('compare round rectangle values', function() {
 	shape.setAttribute('width', width);
 	shape.setAttribute('height', height);
 
-	var importedRectangle = SvgImporter.importSvg(shape);
+	var importedRectangle = project.importSvg(shape);
 
 	var topLeft = new Point(x, y);
 	var size = new Size(width, height);
@@ -159,7 +159,7 @@ test('compare negative round rectangle values', function() {
 	shape.setAttribute('width', width);
 	shape.setAttribute('height', height);
 
-	var importedRectangle = SvgImporter.importSvg(shape);
+	var importedRectangle = project.importSvg(shape);
 
 	var topLeft = new Point(x, y);
 	var size = new Size(width, height);
@@ -186,7 +186,7 @@ test('compare invalid round rectangle values', function() {
 	shape.setAttribute('width', width);
 	shape.setAttribute('height', height);
 
-	var importedRectangle = SvgImporter.importSvg(shape);
+	var importedRectangle = project.importSvg(shape);
 
 	var topLeft = new Point(x, y);
 	var size = new Size(width, height);
@@ -209,7 +209,7 @@ test('compare ellipse values', function() {
 	shape.setAttribute('rx', rx);
 	shape.setAttribute('ry', ry);
 
-	var importedEllipse = SvgImporter.importSvg(shape);
+	var importedEllipse = project.importSvg(shape);
 
 	var center = new Point(cx, cy);
 	var offset = new Point(rx, ry);
@@ -234,7 +234,7 @@ test('compare negative ellipse values', function() {
 	shape.setAttribute('rx', rx);
 	shape.setAttribute('ry', ry);
 
-	var importedEllipse = SvgImporter.importSvg(shape);
+	var importedEllipse = project.importSvg(shape);
 
 	var center = new Point(cx, cy);
 	var offset = new Point(rx, ry);
@@ -255,7 +255,7 @@ test('compare invalid ellipse values', function() {
 	shape.setAttribute('rx', null);
 	shape.setAttribute('ry', null);
 
-	var importedEllipse = SvgImporter.importSvg(shape);
+	var importedEllipse = project.importSvg(shape);
 
 	var center = new Point(0, 0);
 	var offset = new Point(0, 0);
@@ -278,7 +278,7 @@ test('compare circle values', function() {
 	shape.setAttribute('cy', cy);
 	shape.setAttribute('r', r);
 
-	var importedCircle = SvgImporter.importSvg(shape);
+	var importedCircle = project.importSvg(shape);
 
 	var center = new Point(cx, cy);
 	var circle = new Path.Circle(center, r);
@@ -296,7 +296,7 @@ test('compare negative circle values', function() {
 	shape.setAttribute('cy', cy);
 	shape.setAttribute('r', r);
 
-	var importedCircle = SvgImporter.importSvg(shape);
+	var importedCircle = project.importSvg(shape);
 
 	var center = new Point(cx, cy);
 	var circle = new Path.Circle(center, r);
@@ -312,7 +312,7 @@ test('compare invalid circle values', function() {
 	shape.setAttribute('cy', null);
 	shape.setAttribute('r', null);
 
-	var importedCircle = SvgImporter.importSvg(shape);
+	var importedCircle = project.importSvg(shape);
 
 	var center = new Point(0, 0);
 	var circle = new Path.Circle(center, 0);
@@ -327,7 +327,7 @@ test('compare polygon values', function() {
 	var svgpoints = "100,10 40,180 190,60 10,60 160,180";
 	shape.setAttribute('points', svgpoints);
 
-	var importedPolygon = SvgImporter.importSvg(shape);
+	var importedPolygon = project.importSvg(shape);
 
 	var poly = new Path();
 	var points = shape.points;
@@ -348,7 +348,7 @@ test('compare negative polygon values', function() {
 	var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
 	shape.setAttribute('points', svgpoints);
 
-	var importedPolygon = SvgImporter.importSvg(shape);
+	var importedPolygon = project.importSvg(shape);
 
 	var poly = new Path();
 	var points = shape.points;
@@ -369,7 +369,7 @@ test('compare polyline values', function() {
 	var svgpoints = "5,5 45,45 5,45 45,5";
 	shape.setAttribute('points', svgpoints);
 
-	var importedPolyline = SvgImporter.importSvg(shape);
+	var importedPolyline = project.importSvg(shape);
 
 	var poly = new Path();
 	var points = shape.points;
@@ -390,7 +390,7 @@ test('compare negative polyline values', function() {
 	var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
 	shape.setAttribute('points', svgpoints);
 
-	var importedPolyline = SvgImporter.importSvg(shape);
+	var importedPolyline = project.importSvg(shape);
 
 	var poly = new Path();
 	var points = shape.points;