mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
SVG: Rename 'SVG' prefix to 'Svg'
- To make it clear it's not browser-provided functionality - To reflect how DomElement / DomEvent are already named, for the same reason
This commit is contained in:
parent
519898357f
commit
af5984747f
9 changed files with 38 additions and 38 deletions
|
@ -111,10 +111,10 @@ var paper = function(window, undefined) {
|
||||||
/*#*/ }
|
/*#*/ }
|
||||||
|
|
||||||
/*#*/ if (__options.svg) {
|
/*#*/ if (__options.svg) {
|
||||||
/*#*/ include('svg/SVGNode.js');
|
/*#*/ include('svg/SvgNode.js');
|
||||||
/*#*/ include('svg/SVGStyles.js');
|
/*#*/ include('svg/SvgStyles.js');
|
||||||
/*#*/ include('svg/SVGExport.js');
|
/*#*/ include('svg/SvgExport.js');
|
||||||
/*#*/ include('svg/SVGImport.js');
|
/*#*/ include('svg/SvgImport.js');
|
||||||
/*#*/ }
|
/*#*/ }
|
||||||
|
|
||||||
/*#*/ if (__options.paperScript) {
|
/*#*/ if (__options.paperScript) {
|
||||||
|
|
|
@ -61,16 +61,16 @@ new function() {
|
||||||
function exportGroup(item, options) {
|
function exportGroup(item, options) {
|
||||||
var attrs = getTransform(item._matrix),
|
var attrs = getTransform(item._matrix),
|
||||||
children = item._children;
|
children = item._children;
|
||||||
var node = SVGNode.create('g', attrs, formatter);
|
var node = SvgNode.create('g', attrs, formatter);
|
||||||
for (var i = 0, l = children.length; i < l; i++) {
|
for (var i = 0, l = children.length; i < l; i++) {
|
||||||
var child = children[i];
|
var child = children[i];
|
||||||
var childNode = exportSVG(child, options);
|
var childNode = exportSVG(child, options);
|
||||||
if (childNode) {
|
if (childNode) {
|
||||||
if (child.isClipMask()) {
|
if (child.isClipMask()) {
|
||||||
var clip = SVGNode.create('clipPath');
|
var clip = SvgNode.create('clipPath');
|
||||||
clip.appendChild(childNode);
|
clip.appendChild(childNode);
|
||||||
setDefinition(child, clip, 'clip');
|
setDefinition(child, clip, 'clip');
|
||||||
SVGNode.set(node, {
|
SvgNode.set(node, {
|
||||||
'clip-path': 'url(#' + clip.id + ')'
|
'clip-path': 'url(#' + clip.id + ')'
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -92,7 +92,7 @@ new function() {
|
||||||
attrs.height = size.height;
|
attrs.height = size.height;
|
||||||
attrs.href = options.embedImages === false && image && image.src
|
attrs.href = options.embedImages === false && image && image.src
|
||||||
|| item.toDataURL();
|
|| item.toDataURL();
|
||||||
return SVGNode.create('image', attrs, formatter);
|
return SvgElement.create('image', attrs, formatter);
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportPath(item, options) {
|
function exportPath(item, options) {
|
||||||
|
@ -129,7 +129,7 @@ new function() {
|
||||||
type = 'path';
|
type = 'path';
|
||||||
attrs.d = item.getPathData(null, options.precision);
|
attrs.d = item.getPathData(null, options.precision);
|
||||||
}
|
}
|
||||||
return SVGNode.create(type, attrs, formatter);
|
return SvgElement.create(type, attrs, formatter);
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportShape(item) {
|
function exportShape(item) {
|
||||||
|
@ -156,7 +156,7 @@ new function() {
|
||||||
attrs.ry = radius.height;
|
attrs.ry = radius.height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return SVGNode.create(type, attrs, formatter);
|
return SvgElement.create(type, attrs, formatter);
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportCompoundPath(item, options) {
|
function exportCompoundPath(item, options) {
|
||||||
|
@ -164,7 +164,7 @@ new function() {
|
||||||
var data = item.getPathData(null, options.precision);
|
var data = item.getPathData(null, options.precision);
|
||||||
if (data)
|
if (data)
|
||||||
attrs.d = data;
|
attrs.d = data;
|
||||||
return SVGNode.create('path', attrs, formatter);
|
return SvgElement.create('path', attrs, formatter);
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportSymbolItem(item, options) {
|
function exportSymbolItem(item, options) {
|
||||||
|
@ -174,7 +174,7 @@ new function() {
|
||||||
definitionItem = definition._item,
|
definitionItem = definition._item,
|
||||||
bounds = definitionItem.getBounds();
|
bounds = definitionItem.getBounds();
|
||||||
if (!node) {
|
if (!node) {
|
||||||
node = SVGNode.create('symbol', {
|
node = SvgElement.create('symbol', {
|
||||||
viewBox: formatter.rectangle(bounds)
|
viewBox: formatter.rectangle(bounds)
|
||||||
});
|
});
|
||||||
node.appendChild(exportSVG(definitionItem, options));
|
node.appendChild(exportSVG(definitionItem, options));
|
||||||
|
@ -186,7 +186,7 @@ new function() {
|
||||||
attrs.width = bounds.width;
|
attrs.width = bounds.width;
|
||||||
attrs.height = bounds.height;
|
attrs.height = bounds.height;
|
||||||
attrs.overflow = 'visible';
|
attrs.overflow = 'visible';
|
||||||
return SVGNode.create('use', attrs, formatter);
|
return SvgElement.create('use', attrs, formatter);
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportGradient(color) {
|
function exportGradient(color) {
|
||||||
|
@ -194,7 +194,7 @@ new function() {
|
||||||
// we need to create a separate gradient object for each gradient,
|
// we need to create a separate gradient object for each gradient,
|
||||||
// even when they share the same gradient defintion.
|
// even when they share the same gradient defintion.
|
||||||
// http://www.svgopen.org/2011/papers/20-Separating_gradients_from_geometry/
|
// http://www.svgopen.org/2011/papers/20-Separating_gradients_from_geometry/
|
||||||
// TODO: Implement gradient merging in SVGImport
|
// TODO: Implement gradient merging in SvgImport
|
||||||
var gradientNode = getDefinition(color, 'color');
|
var gradientNode = getDefinition(color, 'color');
|
||||||
if (!gradientNode) {
|
if (!gradientNode) {
|
||||||
var gradient = color.getGradient(),
|
var gradient = color.getGradient(),
|
||||||
|
@ -223,7 +223,7 @@ new function() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
attrs.gradientUnits = 'userSpaceOnUse';
|
attrs.gradientUnits = 'userSpaceOnUse';
|
||||||
gradientNode = SVGNode.create((radial ? 'radial' : 'linear')
|
gradientNode = SvgElement.create((radial ? 'radial' : 'linear')
|
||||||
+ 'Gradient', attrs, formatter);
|
+ 'Gradient', attrs, formatter);
|
||||||
var stops = gradient._stops;
|
var stops = gradient._stops;
|
||||||
for (var i = 0, l = stops.length; i < l; i++) {
|
for (var i = 0, l = stops.length; i < l; i++) {
|
||||||
|
@ -239,7 +239,7 @@ new function() {
|
||||||
if (alpha < 1)
|
if (alpha < 1)
|
||||||
attrs['stop-opacity'] = alpha;
|
attrs['stop-opacity'] = alpha;
|
||||||
gradientNode.appendChild(
|
gradientNode.appendChild(
|
||||||
SVGNode.create('stop', attrs, formatter));
|
SvgElement.create('stop', attrs, formatter));
|
||||||
}
|
}
|
||||||
setDefinition(color, gradientNode, 'color');
|
setDefinition(color, gradientNode, 'color');
|
||||||
}
|
}
|
||||||
|
@ -247,7 +247,7 @@ new function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function exportText(item) {
|
function exportText(item) {
|
||||||
var node = SVGNode.create('text', getTransform(item._matrix, true),
|
var node = SvgElement.create('text', getTransform(item._matrix, true),
|
||||||
formatter);
|
formatter);
|
||||||
node.textContent = item._content;
|
node.textContent = item._content;
|
||||||
return node;
|
return node;
|
||||||
|
@ -272,7 +272,7 @@ new function() {
|
||||||
if (item._name != null)
|
if (item._name != null)
|
||||||
attrs.id = item._name;
|
attrs.id = item._name;
|
||||||
|
|
||||||
Base.each(SVGStyles, function(entry) {
|
Base.each(SvgStyles, function(entry) {
|
||||||
// Get a given style only if it differs from the value on the parent
|
// Get a given style only if it differs from the value on the parent
|
||||||
// (A layer or group which can have style values in SVG).
|
// (A layer or group which can have style values in SVG).
|
||||||
var get = entry.get,
|
var get = entry.get,
|
||||||
|
@ -313,7 +313,7 @@ new function() {
|
||||||
if (!item._visible)
|
if (!item._visible)
|
||||||
attrs.visibility = 'hidden';
|
attrs.visibility = 'hidden';
|
||||||
|
|
||||||
return SVGNode.set(node, attrs, formatter);
|
return SvgElement.set(node, attrs, formatter);
|
||||||
}
|
}
|
||||||
|
|
||||||
var definitions;
|
var definitions;
|
||||||
|
@ -349,10 +349,10 @@ new function() {
|
||||||
// we actually have svgs.
|
// we actually have svgs.
|
||||||
if (!defs) {
|
if (!defs) {
|
||||||
if (!svg) {
|
if (!svg) {
|
||||||
svg = SVGNode.create('svg');
|
svg = SvgElement.create('svg');
|
||||||
svg.appendChild(node);
|
svg.appendChild(node);
|
||||||
}
|
}
|
||||||
defs = svg.insertBefore( SVGNode.create('defs'),
|
defs = svg.insertBefore(SvgElement.create('defs'),
|
||||||
svg.firstChild);
|
svg.firstChild);
|
||||||
}
|
}
|
||||||
defs.appendChild(definitions.svgs[i]);
|
defs.appendChild(definitions.svgs[i]);
|
||||||
|
@ -401,21 +401,21 @@ new function() {
|
||||||
var children = this._children,
|
var children = this._children,
|
||||||
view = this.getView(),
|
view = this.getView(),
|
||||||
size = view.getViewSize(),
|
size = view.getViewSize(),
|
||||||
node = SVGNode.create('svg', {
|
node = SvgElement.create('svg', {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: size.width,
|
width: size.width,
|
||||||
height: size.height,
|
height: size.height,
|
||||||
version: '1.1',
|
version: '1.1',
|
||||||
xmlns: SVGNode.xmlns,
|
xmlns: SvgElement.xmlns,
|
||||||
'xmlns:xlink': SVGNode.xlink
|
'xmlns:xlink': SvgElement.xlink
|
||||||
}, formatter),
|
}, formatter),
|
||||||
parent = node,
|
parent = node,
|
||||||
matrix = view._matrix;
|
matrix = view._matrix;
|
||||||
// If the view has a transformation, wrap all layers in a group with
|
// If the view has a transformation, wrap all layers in a group with
|
||||||
// that transformation applied to.
|
// that transformation applied to.
|
||||||
if (!matrix.isIdentity())
|
if (!matrix.isIdentity())
|
||||||
parent = node.appendChild( SVGNode.create('g',
|
parent = node.appendChild(SvgElement.create('g',
|
||||||
getTransform(matrix), formatter));
|
getTransform(matrix), formatter));
|
||||||
for (var i = 0, l = children.length; i < l; i++)
|
for (var i = 0, l = children.length; i < l; i++)
|
||||||
parent.appendChild(exportSVG(children[i], options, true));
|
parent.appendChild(exportSVG(children[i], options, true));
|
|
@ -20,7 +20,7 @@ new function() {
|
||||||
// index is option, and if passed, causes a lookup in a list.
|
// index is option, and if passed, causes a lookup in a list.
|
||||||
|
|
||||||
function getValue(node, name, isString, allowNull) {
|
function getValue(node, name, isString, allowNull) {
|
||||||
var value = SVGNode.get(node, name);
|
var value = SvgElement.get(node, name);
|
||||||
// Interpret value as number. Never return NaN, but 0 instead.
|
// Interpret value as number. Never return NaN, but 0 instead.
|
||||||
// If the value is a sequence of numbers, parseFloat will
|
// If the value is a sequence of numbers, parseFloat will
|
||||||
// return the first occurring number, which is enough for now.
|
// return the first occurring number, which is enough for now.
|
||||||
|
@ -186,7 +186,7 @@ new function() {
|
||||||
// at the end. This parent node also helps fix a bug on IE.
|
// at the end. This parent node also helps fix a bug on IE.
|
||||||
var body = document.body,
|
var body = document.body,
|
||||||
// No need to inherit styles on Node.js
|
// No need to inherit styles on Node.js
|
||||||
parent = !paper.agent.node && SVGNode.create('svg');
|
parent = !paper.agent.node && SvgElement.create('svg');
|
||||||
if (parent) {
|
if (parent) {
|
||||||
body.appendChild(parent);
|
body.appendChild(parent);
|
||||||
// If no stroke-width is set, IE/Edge appears to have a
|
// If no stroke-width is set, IE/Edge appears to have a
|
||||||
|
@ -381,9 +381,9 @@ new function() {
|
||||||
// since transform needs to be applied after fill color, as transformations
|
// since transform needs to be applied after fill color, as transformations
|
||||||
// can affect gradient fills.
|
// can affect gradient fills.
|
||||||
// Use Base.set() to control sequence of attributes and have all entries in
|
// Use Base.set() to control sequence of attributes and have all entries in
|
||||||
// SVGStyles (e.g. 'stroke') before the additional attributes below (e.g.
|
// SvgStyles (e.g. 'stroke') before the additional attributes below (e.g.
|
||||||
// 'stroke-opacity'). See issue #694.
|
// 'stroke-opacity'). See issue #694.
|
||||||
var attributes = Base.set(Base.each(SVGStyles, function(entry) {
|
var attributes = Base.set(Base.each(SvgStyles, function(entry) {
|
||||||
this[entry.attribute] = function(item, value) {
|
this[entry.attribute] = function(item, value) {
|
||||||
item[entry.set](convertValue(value, entry.type, entry.fromSVG));
|
item[entry.set](convertValue(value, entry.type, entry.fromSVG));
|
||||||
// When applying gradient colors to shapes, we need to offset
|
// When applying gradient colors to shapes, we need to offset
|
|
@ -11,11 +11,11 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @name SVGNode
|
* @name SvgElement
|
||||||
* @namespace
|
* @namespace
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
var SVGNode = new function() {
|
var SvgElement = new function() {
|
||||||
// SVG related namespaces
|
// SVG related namespaces
|
||||||
var svg = 'http://www.w3.org/2000/svg',
|
var svg = 'http://www.w3.org/2000/svg',
|
||||||
xmlns = 'http://www.w3.org/2000/xmlns',
|
xmlns = 'http://www.w3.org/2000/xmlns',
|
||||||
|
@ -53,7 +53,7 @@ var SVGNode = new function() {
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
return /** @lends SVGNode */{
|
return /** @lends SvgElement */{
|
||||||
// Export namespaces
|
// Export namespaces
|
||||||
svg: svg,
|
svg: svg,
|
||||||
xmlns: xmlns,
|
xmlns: xmlns,
|
|
@ -10,7 +10,7 @@
|
||||||
* All rights reserved.
|
* All rights reserved.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var SVGStyles = Base.each({
|
var SvgStyles = Base.each({
|
||||||
// Fill
|
// Fill
|
||||||
fillColor: ['fill', 'color'],
|
fillColor: ['fill', 'color'],
|
||||||
fillRule: ['fill-rule', 'string'],
|
fillRule: ['fill-rule', 'string'],
|
|
@ -426,7 +426,7 @@ var getFunctionMessage = function(func) {
|
||||||
|
|
||||||
var createSVG = function(str, attrs) {
|
var createSVG = function(str, attrs) {
|
||||||
if (attrs) {
|
if (attrs) {
|
||||||
// Similar to SVGNode.create():
|
// Similar to SvgElement.create():
|
||||||
var node = document.createElementNS('http://www.w3.org/2000/svg', str);
|
var node = document.createElementNS('http://www.w3.org/2000/svg', str);
|
||||||
for (var key in attrs)
|
for (var key in attrs)
|
||||||
node.setAttribute(key, attrs[key]);
|
node.setAttribute(key, attrs[key]);
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
* All rights reserved.
|
* All rights reserved.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
QUnit.module('SVGExport');
|
QUnit.module('SvgExport');
|
||||||
|
|
||||||
test('Export SVG line', function() {
|
test('Export SVG line', function() {
|
||||||
var attrs = {
|
var attrs = {
|
|
@ -10,7 +10,7 @@
|
||||||
* All rights reserved.
|
* All rights reserved.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
QUnit.module('SVGImport');
|
QUnit.module('SvgImport');
|
||||||
|
|
||||||
test('Import SVG line', function() {
|
test('Import SVG line', function() {
|
||||||
var attrs = {
|
var attrs = {
|
|
@ -61,5 +61,5 @@
|
||||||
|
|
||||||
/*#*/ include('JSON.js');
|
/*#*/ include('JSON.js');
|
||||||
|
|
||||||
/*#*/ include('SVGImport.js');
|
/*#*/ include('SvgImport.js');
|
||||||
/*#*/ include('SVGExport.js');
|
/*#*/ include('SvgExport.js');
|
||||||
|
|
Loading…
Reference in a new issue