mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Rename 'svg' variables to more meaningful 'node'.
This commit is contained in:
Jürg Lehni
parent
de4e928045
commit
199fc046bf
2 changed files with 94 additions and 94 deletions
|
|
@ -241,23 +241,23 @@ new function() {
|
|||
attrs['font-family'] = style._font;
|
||||
if (style._fontSize != null)
|
||||
attrs['font-size'] = style._fontSize;
|
||||
var svg = createElement('text', attrs);
|
||||
svg.textContent = item._content;
|
||||
return svg;
|
||||
var node = createElement('text', attrs);
|
||||
node.textContent = item._content;
|
||||
return node;
|
||||
}
|
||||
|
||||
function exportPath(path) {
|
||||
var segments = path._segments,
|
||||
center = path.getPosition(true),
|
||||
type = determineType(path, segments),
|
||||
angle = determineAngle(path, segments, type, center),
|
||||
function exportPath(item) {
|
||||
var segments = item._segments,
|
||||
center = item.getPosition(true),
|
||||
type = determineType(item, segments),
|
||||
angle = determineAngle(item, segments, type, center),
|
||||
attrs;
|
||||
switch (type) {
|
||||
case 'empty':
|
||||
return null;
|
||||
case 'path':
|
||||
attrs = {
|
||||
d: getPath(path)
|
||||
d: getPath(item)
|
||||
};
|
||||
break;
|
||||
case 'polyline':
|
||||
|
|
@ -356,17 +356,17 @@ new function() {
|
|||
function exportPlacedSymbol(item) {
|
||||
var attrs = getTransform(item, true),
|
||||
symbol = item.getSymbol(),
|
||||
symbolSvg = getDefinition(symbol);
|
||||
symbolNode = getDefinition(symbol);
|
||||
definition = symbol.getDefinition(),
|
||||
bounds = definition.getBounds();
|
||||
if (!symbolSvg) {
|
||||
symbolSvg = createElement('symbol', {
|
||||
if (!symbolNode) {
|
||||
symbolNode = createElement('symbol', {
|
||||
viewBox: formatRectangle(bounds)
|
||||
});
|
||||
symbolSvg.appendChild(exportSvg(definition));
|
||||
setDefinition(symbol, symbolSvg, 'symbol');
|
||||
symbolNode.appendChild(exportSvg(definition));
|
||||
setDefinition(symbol, symbolNode, 'symbol');
|
||||
}
|
||||
attrs.href = '#' + symbolSvg.id;
|
||||
attrs.href = '#' + symbolNode.id;
|
||||
attrs.x += bounds.x;
|
||||
attrs.y += bounds.y;
|
||||
attrs.width = formatFloat(bounds.width);
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ new function() {
|
|||
// objects, dealing with baseVal, and item lists.
|
||||
// index is option, and if passed, causes a lookup in a list.
|
||||
|
||||
function getValue(svg, key, allowNull, index) {
|
||||
// svg[key].baseVal will even be set if the svg did not define the
|
||||
function getValue(node, key, allowNull, index) {
|
||||
// node[key].baseVal will even be set if the node did not define the
|
||||
// attribute, so if allowNull is true, we need to also check
|
||||
// svg.getAttribute(key) == null
|
||||
var base = (!allowNull || svg.getAttribute(key) != null)
|
||||
&& svg[key] && svg[key].baseVal;
|
||||
// node.getAttribute(key) == null
|
||||
var base = (!allowNull || node.getAttribute(key) != null)
|
||||
&& node[key] && node[key].baseVal;
|
||||
// Note: String values are unfortunately not stored in base.value, but
|
||||
// in base directly, so we need to check both, also on item lists, using
|
||||
// Base.pick(base.value, base)
|
||||
|
|
@ -37,16 +37,16 @@ new function() {
|
|||
: null;
|
||||
}
|
||||
|
||||
function getPoint(svg, x, y, allowNull, index) {
|
||||
x = getValue(svg, x, allowNull, index);
|
||||
y = getValue(svg, y, allowNull, index);
|
||||
function getPoint(node, x, y, allowNull, index) {
|
||||
x = getValue(node, x, allowNull, index);
|
||||
y = getValue(node, y, allowNull, index);
|
||||
return allowNull && x == null && y == null ? null
|
||||
: Point.create(x || 0, y || 0);
|
||||
}
|
||||
|
||||
function getSize(svg, w, h, allowNull, index) {
|
||||
w = getValue(svg, w, allowNull, index);
|
||||
h = getValue(svg, h, allowNull, index);
|
||||
function getSize(node, w, h, allowNull, index) {
|
||||
w = getValue(node, w, allowNull, index);
|
||||
h = getValue(node, h, allowNull, index);
|
||||
return allowNull && w == null && h == null ? null
|
||||
: Size.create(w || 0, h || 0);
|
||||
}
|
||||
|
|
@ -70,8 +70,8 @@ new function() {
|
|||
|
||||
// Define importer functions for various SVG node types
|
||||
|
||||
function importGroup(svg, type) {
|
||||
var nodes = svg.childNodes,
|
||||
function importGroup(node, type) {
|
||||
var nodes = node.childNodes,
|
||||
compound = type === 'clippath',
|
||||
group = compound ? new CompoundPath() : new Group();
|
||||
|
||||
|
|
@ -99,9 +99,9 @@ new function() {
|
|||
return group;
|
||||
}
|
||||
|
||||
function importPoly(svg, type) {
|
||||
function importPoly(node, type) {
|
||||
var path = new Path(),
|
||||
points = svg.points;
|
||||
points = node.points;
|
||||
path.moveTo(points.getItem(0));
|
||||
for (var i = 1, l = points.numberOfItems; i < l; i++)
|
||||
path.lineTo(points.getItem(i));
|
||||
|
|
@ -110,9 +110,9 @@ new function() {
|
|||
return path;
|
||||
}
|
||||
|
||||
function importPath(svg) {
|
||||
function importPath(node) {
|
||||
var path = new Path(),
|
||||
list = svg.pathSegList,
|
||||
list = node.pathSegList,
|
||||
compoundPath, lastPoint;
|
||||
for (var i = 0, l = list.numberOfItems; i < l; i++) {
|
||||
var segment = list.getItem(i),
|
||||
|
|
@ -213,8 +213,8 @@ new function() {
|
|||
return compoundPath || path;
|
||||
}
|
||||
|
||||
function importGradient(svg, type) {
|
||||
var nodes = svg.childNodes,
|
||||
function importGradient(node, type) {
|
||||
var nodes = node.childNodes,
|
||||
stops = [];
|
||||
for (var i = 0, l = nodes.length; i < l; i++) {
|
||||
var node = nodes[i];
|
||||
|
|
@ -226,17 +226,17 @@ new function() {
|
|||
origin, destination, highlight;
|
||||
if (isRadial) {
|
||||
gradient.type = 'radial';
|
||||
origin = getPoint(svg, 'cx', 'cy');
|
||||
destination = origin.add(getValue(svg, 'r'), 0);
|
||||
highlight = getPoint(svg, 'fx', 'fy', true);
|
||||
origin = getPoint(node, 'cx', 'cy');
|
||||
destination = origin.add(getValue(node, 'r'), 0);
|
||||
highlight = getPoint(node, 'fx', 'fy', true);
|
||||
} else {
|
||||
origin = getPoint(svg, 'x1', 'y1');
|
||||
destination = getPoint(svg, 'x2', 'y2');
|
||||
origin = getPoint(node, 'x1', 'y1');
|
||||
destination = getPoint(node, 'x2', 'y2');
|
||||
}
|
||||
// We don't return the GradientColor, since we only need a reference to
|
||||
// it in definitions, which is created in applyAttributes()
|
||||
applyAttributes(
|
||||
new GradientColor(gradient, origin, destination, highlight), svg);
|
||||
new GradientColor(gradient, origin, destination, highlight), node);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -258,32 +258,32 @@ new function() {
|
|||
radialgradient: importGradient,
|
||||
|
||||
// http://www.w3.org/TR/SVG/struct.html#ImageElement
|
||||
image: function (svg) {
|
||||
var raster = new Raster(getValue(svg, 'href'));
|
||||
image: function (node) {
|
||||
var raster = new Raster(getValue(node, 'href'));
|
||||
raster.attach('load', function() {
|
||||
var size = getSize(svg, 'width', 'height');
|
||||
var size = getSize(node, 'width', 'height');
|
||||
this.setSize(size);
|
||||
// Since x and y start from the top left of an image, add
|
||||
// half of its size:
|
||||
this.translate(getPoint(svg, 'x', 'y').add(size.divide(2)));
|
||||
this.translate(getPoint(node, 'x', 'y').add(size.divide(2)));
|
||||
});
|
||||
return raster;
|
||||
},
|
||||
|
||||
// http://www.w3.org/TR/SVG/struct.html#SymbolElement
|
||||
symbol: function(svg, type) {
|
||||
return new Symbol(applyAttributes(importGroup(svg, type), svg));
|
||||
symbol: function(node, type) {
|
||||
return new Symbol(applyAttributes(importGroup(node, type), node));
|
||||
},
|
||||
|
||||
// http://www.w3.org/TR/SVG/struct.html#DefsElement
|
||||
defs: importGroup,
|
||||
|
||||
// http://www.w3.org/TR/SVG/struct.html#UseElement
|
||||
use: function(svg, type) {
|
||||
use: function(node, type) {
|
||||
// Note the namespaced xlink:href attribute is just called href
|
||||
// as a property on svg.
|
||||
// as a property on node.
|
||||
// TODO: Should getValue become namespace aware?
|
||||
var id = (getValue(svg, 'href') || '').substring(1),
|
||||
var id = (getValue(node, 'href') || '').substring(1),
|
||||
definition = definitions[id];
|
||||
// Use place if we're dealing with a symbol:
|
||||
return definition
|
||||
|
|
@ -294,36 +294,36 @@ new function() {
|
|||
},
|
||||
|
||||
// http://www.w3.org/TR/SVG/shapes.html#InterfaceSVGCircleElement
|
||||
circle: function(svg) {
|
||||
return new Path.Circle(getPoint(svg, 'cx', 'cy'),
|
||||
getValue(svg, 'r'));
|
||||
circle: function(node) {
|
||||
return new Path.Circle(getPoint(node, 'cx', 'cy'),
|
||||
getValue(node, 'r'));
|
||||
},
|
||||
|
||||
// http://www.w3.org/TR/SVG/shapes.html#InterfaceSVGEllipseElement
|
||||
ellipse: function(svg) {
|
||||
var center = getPoint(svg, 'cx', 'cy'),
|
||||
radius = getSize(svg, 'rx', 'ry');
|
||||
ellipse: function(node) {
|
||||
var center = getPoint(node, 'cx', 'cy'),
|
||||
radius = getSize(node, 'rx', 'ry');
|
||||
return new Path.Ellipse(new Rectangle(center.subtract(radius),
|
||||
center.add(radius)));
|
||||
},
|
||||
|
||||
// http://www.w3.org/TR/SVG/shapes.html#RectElement
|
||||
rect: function(svg) {
|
||||
var point = getPoint(svg, 'x', 'y'),
|
||||
size = getSize(svg, 'width', 'height'),
|
||||
radius = getSize(svg, 'rx', 'ry');
|
||||
rect: function(node) {
|
||||
var point = getPoint(node, 'x', 'y'),
|
||||
size = getSize(node, 'width', 'height'),
|
||||
radius = getSize(node, 'rx', 'ry');
|
||||
// If radius is 0, Path.RoundRectangle automatically produces a
|
||||
// normal rectangle for us.
|
||||
return new Path.RoundRectangle(new Rectangle(point, size), radius);
|
||||
},
|
||||
|
||||
// http://www.w3.org/TR/SVG/shapes.html#LineElement
|
||||
line: function(svg) {
|
||||
return new Path.Line(getPoint(svg, 'x1', 'y1'),
|
||||
getPoint(svg, 'x2', 'y2'));
|
||||
line: function(node) {
|
||||
return new Path.Line(getPoint(node, 'x1', 'y1'),
|
||||
getPoint(node, 'x2', 'y2'));
|
||||
},
|
||||
|
||||
text: function(svg) {
|
||||
text: function(node) {
|
||||
// Not supported by Paper.js
|
||||
// x: multiple values for x
|
||||
// y: multiple values for y
|
||||
|
|
@ -332,9 +332,9 @@ new function() {
|
|||
// TODO: Support for these is missing in Paper.js right now
|
||||
// rotate: character rotation
|
||||
// lengthAdjust:
|
||||
var text = new PointText(getPoint(svg, 'x', 'y', false, 0)
|
||||
.add(getPoint(svg, 'dx', 'dy', false, 0)));
|
||||
text.setContent(svg.textContent || '');
|
||||
var text = new PointText(getPoint(node, 'x', 'y', false, 0)
|
||||
.add(getPoint(node, 'dx', 'dy', false, 0)));
|
||||
text.setContent(node.textContent || '');
|
||||
return text;
|
||||
}
|
||||
};
|
||||
|
|
@ -343,19 +343,19 @@ new function() {
|
|||
* Converts various SVG styles and attributes into Paper.js styles and
|
||||
* attributes and applies them to the passed item.
|
||||
*
|
||||
* @param {SVGSVGElement} svg an SVG node to read style and attributes from.
|
||||
* @param {SVGSVGElement} node an SVG node to read style and attributes from.
|
||||
* @param {Item} item the item to apply the style and attributes to.
|
||||
*/
|
||||
function applyAttributes(item, svg) {
|
||||
function applyAttributes(item, node) {
|
||||
// SVG attributes can be set both as styles and direct node attributes,
|
||||
// so we need to parse both
|
||||
for (var i = 0, l = svg.style.length; i < l; i++) {
|
||||
var name = svg.style[i];
|
||||
item = applyAttribute(item, svg, name, svg.style[Base.camelize(name)]);
|
||||
for (var i = 0, l = node.style.length; i < l; i++) {
|
||||
var name = node.style[i];
|
||||
item = applyAttribute(item, node, name, node.style[Base.camelize(name)]);
|
||||
}
|
||||
for (var i = 0, l = svg.attributes.length; i < l; i++) {
|
||||
var attr = svg.attributes[i];
|
||||
item = applyAttribute(item, svg, attr.name, attr.value);
|
||||
for (var i = 0, l = node.attributes.length; i < l; i++) {
|
||||
var attr = node.attributes[i];
|
||||
item = applyAttribute(item, node, attr.name, attr.value);
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
|
@ -363,12 +363,12 @@ new function() {
|
|||
/**
|
||||
* Parses an SVG style attibute and applies it to a Paper.js item.
|
||||
*
|
||||
* @param {SVGSVGElement} svg an SVG node
|
||||
* @param {SVGSVGElement} node an SVG node
|
||||
* @param {Item} item the item to apply the style or attribute to.
|
||||
* @param {String} name an SVG style name
|
||||
* @param value the value of the SVG style
|
||||
*/
|
||||
function applyAttribute(item, svg, name, value) {
|
||||
function applyAttribute(item, node, name, value) {
|
||||
if (value == null)
|
||||
return item;
|
||||
var entry = SvgStyles.attributes[name];
|
||||
|
|
@ -389,7 +389,7 @@ new function() {
|
|||
// http://www.w3.org/TR/SVG/types.html#DataTypeTransformList
|
||||
case 'gradientTransform':
|
||||
case 'transform':
|
||||
var transforms = svg[name].baseVal,
|
||||
var transforms = node[name].baseVal,
|
||||
matrix = new Matrix();
|
||||
for (var i = 0, l = transforms.numberOfItems; i < l; i++) {
|
||||
var mx = transforms.getItem(i).matrix;
|
||||
|
|
@ -426,7 +426,7 @@ new function() {
|
|||
case 'font-size':
|
||||
// http://www.w3.org/TR/SVG/text.html#TextAnchorProperty
|
||||
case 'text-anchor':
|
||||
applyTextAttribute(item, svg, name, value);
|
||||
applyTextAttribute(item, node, name, value);
|
||||
break;
|
||||
// http://www.w3.org/TR/SVG/pservers.html#StopColorProperty
|
||||
case 'stop-color':
|
||||
|
|
@ -444,7 +444,7 @@ new function() {
|
|||
break;
|
||||
var values = convertValue(value, 'array'),
|
||||
rectangle = Rectangle.create.apply(this, values),
|
||||
size = getSize(svg, 'width', 'height', true),
|
||||
size = getSize(node, 'width', 'height', true),
|
||||
scale = size ? rectangle.getSize().divide(size) : 1,
|
||||
offset = rectangle.getPoint(),
|
||||
matrix = new Matrix().translate(offset).scale(scale);
|
||||
|
|
@ -460,7 +460,7 @@ new function() {
|
|||
return item;
|
||||
}
|
||||
|
||||
function applyTextAttribute(item, svg, name, value) {
|
||||
function applyTextAttribute(item, node, name, value) {
|
||||
if (item instanceof TextItem) {
|
||||
switch (name) {
|
||||
case 'font':
|
||||
|
|
@ -469,7 +469,7 @@ new function() {
|
|||
text.style.font = value;
|
||||
for (var i = 0; i < text.style.length; i++) {
|
||||
var name = text.style[i];
|
||||
item = applyAttribute(item, svg, name, text.style[name]);
|
||||
item = applyAttribute(item, node, name, text.style[name]);
|
||||
}
|
||||
break;
|
||||
case 'font-family':
|
||||
|
|
@ -491,7 +491,7 @@ new function() {
|
|||
// might be TextItems explicitely.
|
||||
var children = item._children;
|
||||
for (var i = 0, l = children.length; i < l; i++) {
|
||||
applyTextAttribute(children[i], svg, name, value);
|
||||
applyTextAttribute(children[i], node, name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -502,11 +502,11 @@ new function() {
|
|||
return match && definitions[match[1]];
|
||||
}
|
||||
|
||||
function importSvg(svg, clearDefs) {
|
||||
var type = svg.nodeName.toLowerCase(),
|
||||
function importSvg(node, clearDefs) {
|
||||
var type = node.nodeName.toLowerCase(),
|
||||
importer = importers[type],
|
||||
item = importer && importer(svg, type);
|
||||
item = item && applyAttributes(item, svg);
|
||||
item = importer && importer(node, type);
|
||||
item = item && applyAttributes(item, node);
|
||||
// Clear definitions at the end of import?
|
||||
if (clearDefs)
|
||||
definitions = {};
|
||||
|
|
@ -516,28 +516,28 @@ new function() {
|
|||
|
||||
Item.inject(/** @lends Item# */{
|
||||
/**
|
||||
* Converts the passed svg node into a Paper.js item and adds it to the
|
||||
* Converts the passed node node into a Paper.js item and adds it to the
|
||||
* children of this item.
|
||||
*
|
||||
* @param {SVGSVGElement} svg the SVG DOM node to convert
|
||||
* @param {SVGSVGElement} node the SVG DOM node to convert
|
||||
* @return {Item} the converted Paper.js item
|
||||
*/
|
||||
importSvg: function(svg) {
|
||||
return this.addChild(importSvg(svg, true));
|
||||
importSvg: function(node) {
|
||||
return this.addChild(importSvg(node, true));
|
||||
}
|
||||
});
|
||||
|
||||
Project.inject(/** @lends Project# */{
|
||||
/**
|
||||
* Converts the passed svg node into a Paper.js item and adds it to the
|
||||
* Converts the passed node 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
|
||||
* @param {SVGSVGElement} node the SVG DOM node to convert
|
||||
* @return {Item} the converted Paper.js item
|
||||
*/
|
||||
importSvg: function(svg) {
|
||||
importSvg: function(node) {
|
||||
this.activate();
|
||||
return importSvg(svg, true);
|
||||
return importSvg(node, true);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue