mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Convert SvgExporter / SvgImporter code to function scopes that only expose functionality through methods on Item and Project.
This commit is contained in:
Jürg Lehni
parent
b6c0f261ee
commit
142bf28a70
6 changed files with 127 additions and 130 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
@ -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');
|
||||
|
||||
|
|
@ -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';
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
|
||||
/*#*/ include('HitResult.js');
|
||||
|
||||
/*#*/ include('SvgImporter.js');
|
||||
/*#*/ include('SvgExporter.js');
|
||||
/*#*/ include('SvgImport.js');
|
||||
/*#*/ include('SvgExport.js');
|
||||
|
|
|
|||
Loading…
Reference in a new issue