From 142bf28a7054561fb1893947c7e6de36429511bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Tue, 6 Nov 2012 13:07:18 -0800 Subject: [PATCH] Convert SvgExporter / SvgImporter code to function scopes that only expose functionality through methods on Item and Project. --- src/paper.js | 4 +- src/svg/{SvgExporter.js => SvgExport.js} | 85 ++++++++++----------- src/svg/{SvgImporter.js => SvgImport.js} | 66 ++++++++-------- test/tests/{SvgExporter.js => SvgExport.js} | 64 ++++++++-------- test/tests/{SvgImporter.js => SvgImport.js} | 34 ++++----- test/tests/load.js | 4 +- 6 files changed, 127 insertions(+), 130 deletions(-) rename src/svg/{SvgExporter.js => SvgExport.js} (90%) rename src/svg/{SvgImporter.js => SvgImport.js} (93%) rename test/tests/{SvgExporter.js => SvgExport.js} (91%) rename test/tests/{SvgImporter.js => SvgImport.js} (95%) diff --git a/src/paper.js b/src/paper.js index 76a89ac5..8ee5e96a 100644 --- a/src/paper.js +++ b/src/paper.js @@ -96,8 +96,8 @@ var paper = new function() { /*#*/ include('text/PointText.js'); /*#*/ include('svg/SvgStyles.js'); -/*#*/ include('svg/SvgExporter.js'); -/*#*/ include('svg/SvgImporter.js'); +/*#*/ include('svg/SvgExport.js'); +/*#*/ include('svg/SvgImport.js'); /*#*/ include('style/Style.js'); /*#*/ include('style/PathStyle.js'); diff --git a/src/svg/SvgExporter.js b/src/svg/SvgExport.js similarity index 90% rename from src/svg/SvgExporter.js rename to src/svg/SvgExport.js index 586a9187..c7fd13a8 100644 --- a/src/svg/SvgExporter.js +++ b/src/svg/SvgExport.js @@ -17,13 +17,10 @@ */ /** - * @name SvgExporter - * - * @class The SvgExporter object holds all the functionality to convert a - * Paper.js DOM to a SVG DOM. + * A function scope holding all the functionality needed to convert a + * Paper.js DOM to a Paper.js DOM. */ - -var SvgExporter = this.SvgExporter = new function() { +new function() { // Shortcut to Base.formatNumber var formatNumber = Base.formatNumber; @@ -207,7 +204,7 @@ var SvgExporter = this.SvgExporter = new function() { attrs.fill = 'none'; var svg = createElement('g', attrs); for (var i = 0, l = children.length; i < l; i++) - svg.appendChild(SvgExporter.exportItem(children[i])); + svg.appendChild(exportItem(children[i])); return svg; } @@ -365,42 +362,42 @@ var SvgExporter = this.SvgExporter = new function() { return setAttributes(svg, attrs); } - return /** @Lends SvgExporter */{ - /** - * Takes the selected Paper.js project and parses all of its layers and - * groups to be placed into SVG groups, converting the project into one - * SVG group. - * - * @function - * @param {Project} project a Paper.js project - * @return {SVGSVGElement} the imported project converted to an SVG project - */ - // TODO: Implement symbols and Gradients - exportProject: function(project) { - var svg = createElement('svg'), - layers = project.layers; - for (var i = 0, l = layers.length; i < l; i++) { - svg.appendChild(this.exportItem(layers[i])); - } - return svg; - }, - - exportItem: function(item) { - var exporter = exporters[item._type]; - var svg = exporter && exporter(item, item._type); - return svg && applyStyle(item, svg); + function exportProject(project) { + var svg = createElement('svg'), + layers = project.layers; + for (var i = 0, l = layers.length; i < l; i++) { + svg.appendChild(exportItem(layers[i])); } - }; + return svg; + } + + function exportItem(item) { + var exporter = exporters[item._type]; + var svg = exporter && exporter(item, item._type); + return svg && applyStyle(item, svg); + } + + Item.inject(/** @Lends Item# */{ + /** + * Exports the item and all its child items as an SVG DOM, all contained + * in one top level SVG group node. + * + * @return {SVGSVGElement} the item converted to an SVG node + */ + exportSvg: function() { + return exportItem(this); + } + }); + + Project.inject(/** @Lends Project# */{ + /** + * Exports the project and all its layers and child items as an SVG DOM, + * all contained in one top level SVG group node. + * + * @return {SVGSVGElement} the project converted to an SVG node + */ + exportSvg: function() { + return exportProject(this); + } + }); }; - -Item.inject({ - exportSvg: function() { - return SvgExporter.exportItem(this); - } -}); - -Project.inject({ - exportSvg: function() { - return SvgExporter.exportProject(this); - } -}); diff --git a/src/svg/SvgImporter.js b/src/svg/SvgImport.js similarity index 93% rename from src/svg/SvgImporter.js rename to src/svg/SvgImport.js index a4384211..39a6076a 100644 --- a/src/svg/SvgImporter.js +++ b/src/svg/SvgImport.js @@ -17,16 +17,10 @@ */ /** - * @name SvgImporter - * - * @class The SvgImporter object represents an object created using the SVG - * Canvas that will be converted into a Paper.js object. - * The SVG object is imported into Paper.js by converting it into items - * within groups. - * + * A function scope holding all the functionality needed to convert a SVG DOM + * to a Paper.js DOM. */ -var SvgImporter = this.SvgImporter = new function() { - +new function() { // Define a couple of helper functions to easily read values from SVG // objects, dealing with baseVal, and item lists. // index is option, and if passed, causes a lookup in a list. @@ -54,7 +48,7 @@ var SvgImporter = this.SvgImporter = new function() { for (var i = 0, l = nodes.length; i < l; i++) { var child = nodes[i]; if (child.nodeType == 1) { - var item = SvgImporter.importSvg(child); + var item = importSvg(child); if (item) { var parent = item.getParent(); if (parent && !(parent instanceof Layer)) @@ -417,34 +411,40 @@ var SvgImporter = this.SvgImporter = new function() { item.transform(matrix); } - return /** @Lends SvgImporter */{ + function importSvg(svg) { + var type = svg.nodeName.toLowerCase(), + importer = importers[type]; + var item = importer && importer(svg, type); + if (item) + applyAttributes(item, svg); + return item; + } + + + Item.inject(/** @Lends Item# */{ /** - * Creates a Paper.js item using data parsed from the selected - * SVG DOM node. + * Converts the passed svg node into a Paper.js item and adds it to the + * children of this item. * * @param {SVGSVGElement} svg the SVG DOM node to convert * @return {Item} the converted Paper.js item */ importSvg: function(svg) { - var type = svg.nodeName.toLowerCase(), - importer = importers[type]; - var item = importer && importer(svg, type); - if (item) - applyAttributes(item, svg); - return item; + return this.addChild(importSvg(svg)); } - }; + }); + + Project.inject(/** @Lends Project# */{ + /** + * Converts the passed svg node into a Paper.js item and adds it to the + * active layer of this project. + * + * @param {SVGSVGElement} svg the SVG DOM node to convert + * @return {Item} the converted Paper.js item + */ + importSvg: function(svg) { + this.activate(); + return importSvg(svg); + } + }); }; - -Item.inject({ - importSvg: function(svg) { - return this.addChild(SvgExporter.importSvg(svg)); - } -}); - -Project.inject({ - importSvg: function(svg) { - this.activate(); - return SvgImporter.importSvg(svg); - } -}); diff --git a/test/tests/SvgExporter.js b/test/tests/SvgExport.js similarity index 91% rename from test/tests/SvgExporter.js rename to test/tests/SvgExport.js index 95e6cddd..0fc83579 100644 --- a/test/tests/SvgExporter.js +++ b/test/tests/SvgExport.js @@ -1,22 +1,22 @@ /** -* Paper.js -* -* This file is part of Paper.js, a JavaScript Vector Graphics Library, -* based on Scriptographer.org and designed to be largely API compatible. -* http://paperjs.org/ -* http://scriptographer.org/ -* -* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey -* http://lehni.org/ & http://jonathanpuckey.com/ -* -* Distributed under the MIT license. See LICENSE file for details. -* -* All rights reserved. -* -* This test file created by Stetson-Team-Alpha -*/ + * Paper.js + * + * This file is part of Paper.js, a JavaScript Vector Graphics Library, + * based on Scriptographer.org and designed to be largely API compatible. + * http://paperjs.org/ + * http://scriptographer.org/ + * + * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey + * http://lehni.org/ & http://jonathanpuckey.com/ + * + * Distributed under the MIT license. See LICENSE file for details. + * + * All rights reserved. + * + * This test file was created by Stetson-Team-Alpha + */ -module('SvgExporter'); +module('SvgExport'); test('compare line path functions', function() { var svgns = 'http://www.w3.org/2000/svg'; @@ -32,7 +32,7 @@ test('compare line path functions', function() { var line = new Path.Line([x1, y1], [x2, y2]); - var exportedLine = SvgExporter.exportItem(line); + var exportedLine = line.exportSvg(); var shapex1 = shape.getAttribute('x1'); var shapey1 = shape.getAttribute('y1'); @@ -65,7 +65,7 @@ test('compare negative line path functions', function() { var line = new Path.Line([x1, y1], [x2, y2]); - var exportedLine = SvgExporter.exportItem(line); + var exportedLine = line.exportSvg(); var shapex1 = shape.getAttribute('x1'); var shapey1 = shape.getAttribute('y1'); @@ -98,7 +98,7 @@ test('compare invalid line path functions', function() { var line = new Path.Line([x1, y1], [x2, y2]); - var exportedLine = SvgExporter.exportItem(line); + var exportedLine = line.exportSvg(); var shapex1 = shape.getAttribute('x1'); var shapey1 = shape.getAttribute('y1'); @@ -133,7 +133,7 @@ test('compare invalid line path functions', function() { var size = new Size(100, 100); var path = new Path.Rectangle(point, size); - var exportedRectangle = SvgExporter.exportItem(path); + var exportedRectangle = path.exportSvg(); var shapex1 = shape.getAttribute('x'); var shapey1 = shape.getAttribute('y1'); @@ -168,7 +168,7 @@ test('compare negative rectangle values', function() { var size = new Size(width, height); var rect = new Rectangle(topLeft, size); - var exportedRectangle = SvgExporter.exportItem(rect); + var exportedRectangle = rect.exportSvg(); var shapex = shape.getAttribute('x'); var shapey = shape.getAttribute('y'); @@ -202,7 +202,7 @@ test('compare invalid rectangle values', function() { var size = new Size(width, height); var rect = new Rectangle(topLeft, size); - var exportedRectangle = SvgExporter.exportItem(rect); + var exportedRectangle = rect.exportSvg(); var shapex = shape.getAttribute('x'); var shapey = shape.getAttribute('y'); @@ -242,7 +242,7 @@ test('compare rounded rectangle values', function() { var rect = new Rectangle(topLeft, size); var roundRect = new Path.RoundRectangle(rect, cornerSize); - var exportedRectangle = SvgExporter.exportItem(rect); + var exportedRectangle = rect.exportSvg(); var shapex = shape.getAttribute('x'); var shapey = shape.getAttribute('y'); @@ -286,7 +286,7 @@ test('compare negative rounded rectangle values', function() { var rect = new Rectangle(topLeft, size); var roundRect = new Path.RoundRectangle(rect, cornerSize); - var exportedRectangle = SvgExporter.exportItem(rect); + var exportedRectangle = rect.exportSvg(); var shapex = shape.getAttribute('x'); var shapey = shape.getAttribute('y'); @@ -330,7 +330,7 @@ test('compare invalid rounded rectangle values', function() { var rect = new Rectangle(topLeft, size); var roundRect = new Path.RoundRectangle(rect, cornerSize); - var exportedRectangle = SvgExporter.exportItem(rect); + var exportedRectangle = rect.exportSvg(); var shapex = shape.getAttribute('x'); var shapey = shape.getAttribute('y'); @@ -372,7 +372,7 @@ test('compare ellipse values', function() { var rect = new Rectangle(topLeft, bottomRight); var ellipse = new Path.Ellipse(rect); - var exportedEllipse = SvgExporter.exportItem(ellipse); + var exportedEllipse = ellipse.exportSvg(); var shapecx = shape.getAttribute('cx'); var shapecy = shape.getAttribute('cy'); @@ -404,7 +404,7 @@ test('compare circle values', function() { var center = new Point(cx, cy); var circle = new Path.Circle(center, r); - var exportedCircle = SvgExporter.exportItem(circle); + var exportedCircle = circle.exportSvg(); var shapecx = shape.getAttribute('cx'); var shapecy = shape.getAttribute('cy'); @@ -440,7 +440,7 @@ test('compare polygon values', function() { poly.closePath(); } - var exportedPolygon = SvgExporter.exportItem(poly); + var exportedPolygon = poly.exportSvg(); var svgPoints = shape.getAttribute('points'); @@ -470,7 +470,7 @@ test('compare negative polygon values', function() { poly.closePath(); } - var exportedPolygon = SvgExporter.exportItem(poly); + var exportedPolygon = poly.exportSvg(); var svgPoints = shape.getAttribute('points'); @@ -500,7 +500,7 @@ test('compare polyline values', function() { poly.closePath(); } - var exportedPolygon = SvgExporter.exportItem(poly); + var exportedPolygon = poly.exportSvg(); var svgPoints = shape.getAttribute('points'); @@ -530,7 +530,7 @@ test('compare negative polyline values', function() { poly.closePath(); } - var exportedPolygon = SvgExporter.exportItem(poly); + var exportedPolygon = poly.exportSvg(); var svgPoints = shape.getAttribute('points'); diff --git a/test/tests/SvgImporter.js b/test/tests/SvgImport.js similarity index 95% rename from test/tests/SvgImporter.js rename to test/tests/SvgImport.js index 6a136a25..1f46fd8b 100644 --- a/test/tests/SvgImporter.js +++ b/test/tests/SvgImport.js @@ -1,22 +1,22 @@ /* -* Paper.js -* -* This file is part of Paper.js, a JavaScript Vector Graphics Library, -* based on Scriptographer.org and designed to be largely API compatible. -* http://paperjs.org/ -* http://scriptographer.org/ -* -* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey -* http://lehni.org/ & http://jonathanpuckey.com/ -* -* Distributed under the MIT license. See LICENSE file for details. -* -* All rights reserved. -* -* This test file created by Stetson-Team-Alpha -*/ + * Paper.js + * + * This file is part of Paper.js, a JavaScript Vector Graphics Library, + * based on Scriptographer.org and designed to be largely API compatible. + * http://paperjs.org/ + * http://scriptographer.org/ + * + * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey + * http://lehni.org/ & http://jonathanpuckey.com/ + * + * Distributed under the MIT license. See LICENSE file for details. + * + * All rights reserved. + * + * This test file was created by Stetson-Team-Alpha + */ -module('SvgImporter'); +module('SvgImport'); test('make an svg line', function() { var svgns = 'http://www.w3.org/2000/svg'; diff --git a/test/tests/load.js b/test/tests/load.js index 87feea22..e51973b2 100644 --- a/test/tests/load.js +++ b/test/tests/load.js @@ -28,5 +28,5 @@ /*#*/ include('HitResult.js'); -/*#*/ include('SvgImporter.js'); -/*#*/ include('SvgExporter.js'); +/*#*/ include('SvgImport.js'); +/*#*/ include('SvgExport.js');