Skip to content

Commit 142bf28

Browse files
lehnilehni
committed
Convert SvgExporter / SvgImporter code to function scopes that only expose functionality through methods on Item and Project.
1 parent b6c0f26 commit 142bf28

6 files changed

Lines changed: 125 additions & 128 deletions

File tree

‎src/paper.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ var paper = new function() {
9696
/*#*/ include('text/PointText.js');
9797

9898
/*#*/ include('svg/SvgStyles.js');
99-
/*#*/ include('svg/SvgExporter.js');
100-
/*#*/ include('svg/SvgImporter.js');
99+
/*#*/ include('svg/SvgExport.js');
100+
/*#*/ include('svg/SvgImport.js');
101101

102102
/*#*/ include('style/Style.js');
103103
/*#*/ include('style/PathStyle.js');

src/svg/SvgExporter.js renamed to src/svg/SvgExport.js

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,10 @@
1717
*/
1818

1919
/**
20-
* @name SvgExporter
21-
*
22-
* @class The SvgExporter object holds all the functionality to convert a
23-
* Paper.js DOM to a SVG DOM.
20+
* A function scope holding all the functionality needed to convert a
21+
* Paper.js DOM to a Paper.js DOM.
2422
*/
25-
26-
var SvgExporter = this.SvgExporter = new function() {
23+
new function() {
2724

2825
// Shortcut to Base.formatNumber
2926
var formatNumber = Base.formatNumber;
@@ -207,7 +204,7 @@ var SvgExporter = this.SvgExporter = new function() {
207204
attrs.fill = 'none';
208205
var svg = createElement('g', attrs);
209206
for (var i = 0, l = children.length; i < l; i++)
210-
svg.appendChild(SvgExporter.exportItem(children[i]));
207+
svg.appendChild(exportItem(children[i]));
211208
return svg;
212209
}
213210

@@ -365,42 +362,42 @@ var SvgExporter = this.SvgExporter = new function() {
365362
return setAttributes(svg, attrs);
366363
}
367364

368-
return /** @Lends SvgExporter */{
365+
function exportProject(project) {
366+
var svg = createElement('svg'),
367+
layers = project.layers;
368+
for (var i = 0, l = layers.length; i < l; i++) {
369+
svg.appendChild(exportItem(layers[i]));
370+
}
371+
return svg;
372+
}
373+
374+
function exportItem(item) {
375+
var exporter = exporters[item._type];
376+
var svg = exporter && exporter(item, item._type);
377+
return svg && applyStyle(item, svg);
378+
}
379+
380+
Item.inject(/** @Lends Item# */{
369381
/**
370-
* Takes the selected Paper.js project and parses all of its layers and
371-
* groups to be placed into SVG groups, converting the project into one
372-
* SVG group.
382+
* Exports the item and all its child items as an SVG DOM, all contained
383+
* in one top level SVG group node.
373384
*
374-
* @function
375-
* @param {Project} project a Paper.js project
376-
* @return {SVGSVGElement} the imported project converted to an SVG project
385+
* @return {SVGSVGElement} the item converted to an SVG node
377386
*/
378-
// TODO: Implement symbols and Gradients
379-
exportProject: function(project) {
380-
var svg = createElement('svg'),
381-
layers = project.layers;
382-
for (var i = 0, l = layers.length; i < l; i++) {
383-
svg.appendChild(this.exportItem(layers[i]));
384-
}
385-
return svg;
386-
},
387+
exportSvg: function() {
388+
return exportItem(this);
389+
}
390+
});
387391

388-
exportItem: function(item) {
389-
var exporter = exporters[item._type];
390-
var svg = exporter && exporter(item, item._type);
391-
return svg && applyStyle(item, svg);
392+
Project.inject(/** @Lends Project# */{
393+
/**
394+
* Exports the project and all its layers and child items as an SVG DOM,
395+
* all contained in one top level SVG group node.
396+
*
397+
* @return {SVGSVGElement} the project converted to an SVG node
398+
*/
399+
exportSvg: function() {
400+
return exportProject(this);
392401
}
393-
};
402+
});
394403
};
395-
396-
Item.inject({
397-
exportSvg: function() {
398-
return SvgExporter.exportItem(this);
399-
}
400-
});
401-
402-
Project.inject({
403-
exportSvg: function() {
404-
return SvgExporter.exportProject(this);
405-
}
406-
});

src/svg/SvgImporter.js renamed to src/svg/SvgImport.js

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,10 @@
1717
*/
1818

1919
/**
20-
* @name SvgImporter
21-
*
22-
* @class The SvgImporter object represents an object created using the SVG
23-
* Canvas that will be converted into a Paper.js object.
24-
* The SVG object is imported into Paper.js by converting it into items
25-
* within groups.
26-
*
20+
* A function scope holding all the functionality needed to convert a SVG DOM
21+
* to a Paper.js DOM.
2722
*/
28-
var SvgImporter = this.SvgImporter = new function() {
29-
23+
new function() {
3024
// Define a couple of helper functions to easily read values from SVG
3125
// objects, dealing with baseVal, and item lists.
3226
// index is option, and if passed, causes a lookup in a list.
@@ -54,7 +48,7 @@ var SvgImporter = this.SvgImporter = new function() {
5448
for (var i = 0, l = nodes.length; i < l; i++) {
5549
var child = nodes[i];
5650
if (child.nodeType == 1) {
57-
var item = SvgImporter.importSvg(child);
51+
var item = importSvg(child);
5852
if (item) {
5953
var parent = item.getParent();
6054
if (parent && !(parent instanceof Layer))
@@ -417,34 +411,40 @@ var SvgImporter = this.SvgImporter = new function() {
417411
item.transform(matrix);
418412
}
419413

420-
return /** @Lends SvgImporter */{
414+
function importSvg(svg) {
415+
var type = svg.nodeName.toLowerCase(),
416+
importer = importers[type];
417+
var item = importer && importer(svg, type);
418+
if (item)
419+
applyAttributes(item, svg);
420+
return item;
421+
}
422+
423+
424+
Item.inject(/** @Lends Item# */{
421425
/**
422-
* Creates a Paper.js item using data parsed from the selected
423-
* SVG DOM node.
426+
* Converts the passed svg node into a Paper.js item and adds it to the
427+
* children of this item.
424428
*
425429
* @param {SVGSVGElement} svg the SVG DOM node to convert
426430
* @return {Item} the converted Paper.js item
427431
*/
428432
importSvg: function(svg) {
429-
var type = svg.nodeName.toLowerCase(),
430-
importer = importers[type];
431-
var item = importer && importer(svg, type);
432-
if (item)
433-
applyAttributes(item, svg);
434-
return item;
433+
return this.addChild(importSvg(svg));
435434
}
436-
};
437-
};
438-
439-
Item.inject({
440-
importSvg: function(svg) {
441-
return this.addChild(SvgExporter.importSvg(svg));
442-
}
443-
});
435+
});
444436

445-
Project.inject({
446-
importSvg: function(svg) {
447-
this.activate();
448-
return SvgImporter.importSvg(svg);
449-
}
450-
});
437+
Project.inject(/** @Lends Project# */{
438+
/**
439+
* Converts the passed svg node into a Paper.js item and adds it to the
440+
* active layer of this project.
441+
*
442+
* @param {SVGSVGElement} svg the SVG DOM node to convert
443+
* @return {Item} the converted Paper.js item
444+
*/
445+
importSvg: function(svg) {
446+
this.activate();
447+
return importSvg(svg);
448+
}
449+
});
450+
};

test/tests/SvgExporter.js renamed to test/tests/SvgExport.js

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
/**
2-
* Paper.js
3-
*
4-
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
5-
* based on Scriptographer.org and designed to be largely API compatible.
6-
* http://paperjs.org/
7-
* http://scriptographer.org/
8-
*
9-
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
10-
* http://lehni.org/ & http://jonathanpuckey.com/
11-
*
12-
* Distributed under the MIT license. See LICENSE file for details.
13-
*
14-
* All rights reserved.
15-
*
16-
* This test file created by Stetson-Team-Alpha
17-
*/
18-
19-
module('SvgExporter');
2+
* Paper.js
3+
*
4+
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
5+
* based on Scriptographer.org and designed to be largely API compatible.
6+
* http://paperjs.org/
7+
* http://scriptographer.org/
8+
*
9+
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
10+
* http://lehni.org/ & http://jonathanpuckey.com/
11+
*
12+
* Distributed under the MIT license. See LICENSE file for details.
13+
*
14+
* All rights reserved.
15+
*
16+
* This test file was created by Stetson-Team-Alpha
17+
*/
18+
19+
module('SvgExport');
2020

2121
test('compare line path functions', function() {
2222
var svgns = 'http://www.w3.org/2000/svg';
@@ -32,7 +32,7 @@ test('compare line path functions', function() {
3232

3333
var line = new Path.Line([x1, y1], [x2, y2]);
3434

35-
var exportedLine = SvgExporter.exportItem(line);
35+
var exportedLine = line.exportSvg();
3636

3737
var shapex1 = shape.getAttribute('x1');
3838
var shapey1 = shape.getAttribute('y1');
@@ -65,7 +65,7 @@ test('compare negative line path functions', function() {
6565

6666
var line = new Path.Line([x1, y1], [x2, y2]);
6767

68-
var exportedLine = SvgExporter.exportItem(line);
68+
var exportedLine = line.exportSvg();
6969

7070
var shapex1 = shape.getAttribute('x1');
7171
var shapey1 = shape.getAttribute('y1');
@@ -98,7 +98,7 @@ test('compare invalid line path functions', function() {
9898

9999
var line = new Path.Line([x1, y1], [x2, y2]);
100100

101-
var exportedLine = SvgExporter.exportItem(line);
101+
var exportedLine = line.exportSvg();
102102

103103
var shapex1 = shape.getAttribute('x1');
104104
var shapey1 = shape.getAttribute('y1');
@@ -133,7 +133,7 @@ test('compare invalid line path functions', function() {
133133
var size = new Size(100, 100);
134134
var path = new Path.Rectangle(point, size);
135135
136-
var exportedRectangle = SvgExporter.exportItem(path);
136+
var exportedRectangle = path.exportSvg();
137137
138138
var shapex1 = shape.getAttribute('x');
139139
var shapey1 = shape.getAttribute('y1');
@@ -168,7 +168,7 @@ test('compare negative rectangle values', function() {
168168
var size = new Size(width, height);
169169
var rect = new Rectangle(topLeft, size);
170170
171-
var exportedRectangle = SvgExporter.exportItem(rect);
171+
var exportedRectangle = rect.exportSvg();
172172
173173
var shapex = shape.getAttribute('x');
174174
var shapey = shape.getAttribute('y');
@@ -202,7 +202,7 @@ test('compare invalid rectangle values', function() {
202202
var size = new Size(width, height);
203203
var rect = new Rectangle(topLeft, size);
204204
205-
var exportedRectangle = SvgExporter.exportItem(rect);
205+
var exportedRectangle = rect.exportSvg();
206206
207207
var shapex = shape.getAttribute('x');
208208
var shapey = shape.getAttribute('y');
@@ -242,7 +242,7 @@ test('compare rounded rectangle values', function() {
242242
var rect = new Rectangle(topLeft, size);
243243
var roundRect = new Path.RoundRectangle(rect, cornerSize);
244244
245-
var exportedRectangle = SvgExporter.exportItem(rect);
245+
var exportedRectangle = rect.exportSvg();
246246
247247
var shapex = shape.getAttribute('x');
248248
var shapey = shape.getAttribute('y');
@@ -286,7 +286,7 @@ test('compare negative rounded rectangle values', function() {
286286
var rect = new Rectangle(topLeft, size);
287287
var roundRect = new Path.RoundRectangle(rect, cornerSize);
288288
289-
var exportedRectangle = SvgExporter.exportItem(rect);
289+
var exportedRectangle = rect.exportSvg();
290290
291291
var shapex = shape.getAttribute('x');
292292
var shapey = shape.getAttribute('y');
@@ -330,7 +330,7 @@ test('compare invalid rounded rectangle values', function() {
330330
var rect = new Rectangle(topLeft, size);
331331
var roundRect = new Path.RoundRectangle(rect, cornerSize);
332332
333-
var exportedRectangle = SvgExporter.exportItem(rect);
333+
var exportedRectangle = rect.exportSvg();
334334
335335
var shapex = shape.getAttribute('x');
336336
var shapey = shape.getAttribute('y');
@@ -372,7 +372,7 @@ test('compare ellipse values', function() {
372372
var rect = new Rectangle(topLeft, bottomRight);
373373
var ellipse = new Path.Ellipse(rect);
374374

375-
var exportedEllipse = SvgExporter.exportItem(ellipse);
375+
var exportedEllipse = ellipse.exportSvg();
376376

377377
var shapecx = shape.getAttribute('cx');
378378
var shapecy = shape.getAttribute('cy');
@@ -404,7 +404,7 @@ test('compare circle values', function() {
404404
var center = new Point(cx, cy);
405405
var circle = new Path.Circle(center, r);
406406

407-
var exportedCircle = SvgExporter.exportItem(circle);
407+
var exportedCircle = circle.exportSvg();
408408

409409
var shapecx = shape.getAttribute('cx');
410410
var shapecy = shape.getAttribute('cy');
@@ -440,7 +440,7 @@ test('compare polygon values', function() {
440440
poly.closePath();
441441
}
442442

443-
var exportedPolygon = SvgExporter.exportItem(poly);
443+
var exportedPolygon = poly.exportSvg();
444444

445445
var svgPoints = shape.getAttribute('points');
446446

@@ -470,7 +470,7 @@ test('compare negative polygon values', function() {
470470
poly.closePath();
471471
}
472472

473-
var exportedPolygon = SvgExporter.exportItem(poly);
473+
var exportedPolygon = poly.exportSvg();
474474

475475
var svgPoints = shape.getAttribute('points');
476476

@@ -500,7 +500,7 @@ test('compare polyline values', function() {
500500
poly.closePath();
501501
}
502502

503-
var exportedPolygon = SvgExporter.exportItem(poly);
503+
var exportedPolygon = poly.exportSvg();
504504

505505
var svgPoints = shape.getAttribute('points');
506506

@@ -530,7 +530,7 @@ test('compare negative polyline values', function() {
530530
poly.closePath();
531531
}
532532

533-
var exportedPolygon = SvgExporter.exportItem(poly);
533+
var exportedPolygon = poly.exportSvg();
534534

535535
var svgPoints = shape.getAttribute('points');
536536

0 commit comments

Comments
 (0)