From b04f852667a05cf4195210c620f5d688357b7cbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 09:38:42 -0800 Subject: [PATCH 1/7] Rename convertStringTo() to convertValue(), and add missing break statement. --- src/svg/SvgImport.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index 544e74fa..7aa13747 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -40,16 +40,16 @@ new function() { return Size.create(getValue(svg, w, index), getValue(svg, h, index)); } - // Converts a string value to the specified type - function convertStringTo(value, type) { - return (value === 'none' + // Converts a string attribute value to the specified type + function convertValue(value, type) { + return value === 'none' ? null : type === 'number' ? parseFloat(value, 10) : type === 'array' ? value.split(/[\s,]+/g).map(parseFloat) : type === 'color' && getDefinition(value) - || value); + || value; } function getSvgRadius(svg) { @@ -373,7 +373,7 @@ new function() { return item; var entry = SvgStyles.attributes[name]; if (entry) { - item._style[entry.set](convertStringTo(value, entry.type)); + item._style[entry.set](convertValue(value, entry.type)); } else { switch (name) { case 'id': @@ -435,13 +435,11 @@ new function() { break; // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute case 'viewBox': - var values = convertStringTo(value, 'array'), + var values = convertValue(value, 'array'), rectangle = Rectangle.create.apply(this, values); // TODO: how to deal with the svg element? - if (!name == 'svg') + if (name !== 'svg') (item.getDefinition ? item.getDefinition() : item).setBounds(rectangle); - default: - // Not supported yet. break; } } From 1376d75e61bbb34d200cdf7e7c0a8f3830ed5aa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 09:41:58 -0800 Subject: [PATCH 2/7] SvgImporter: Shorten percentage code. --- src/svg/SvgImport.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index 7aa13747..f0940200 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -424,9 +424,8 @@ new function() { break; // http://www.w3.org/TR/SVG/pservers.html#StopElementOffsetAttribute case 'offset': - var isPercentage = value[value.length - 1] == '%'; - value = parseFloat(isPercentage ? value.slice(0, -1) : value, 10); - item.setRampPoint(isPercentage ? value / 100 : value); + var percentage = value.match(/(.*)%$/); + item.setRampPoint(percentage ? percentage[1] / 100 : value); break; case 'xlink:href': var definition = definitions[value.substr(1)]; From 0da2baa61734b5f4c1de0ea752d6172d3ce63a13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 09:42:51 -0800 Subject: [PATCH 3/7] Prefer String#substring() over #substr(). Using both in the lib seems confusing. --- src/svg/SvgImport.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index f0940200..5ed083b4 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -428,7 +428,7 @@ new function() { item.setRampPoint(percentage ? percentage[1] / 100 : value); break; case 'xlink:href': - var definition = definitions[value.substr(1)]; + var definition = definitions[value.substring(1)]; // Use place if we're dealing with a symbol: item = definition.place ? definition.place() : definition.clone(); break; From df76e0feb839ea0bfcba3ad430106ed3171d7321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 09:47:07 -0800 Subject: [PATCH 4/7] SvgImporter: Replace SVG getter functions with their more explicit direct calls. --- src/svg/SvgImport.js | 54 ++++++++++++-------------------------------- 1 file changed, 14 insertions(+), 40 deletions(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index 5ed083b4..42696f48 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -52,34 +52,6 @@ new function() { || value; } - function getSvgRadius(svg) { - return getValue(svg, 'r'); - } - - function getSvgOrigin(svg) { - return getPoint(svg, 'x1', 'y1'); - } - - function getSvgDestination(svg) { - return getPoint(svg, 'x2', 'y2'); - } - - function getSvgCenter(svg) { - return getPoint(svg, 'cx', 'cy'); - } - - function getSvgPoint(svg, index) { - return getPoint(svg, 'x', 'y', index); - } - - function getSvgRadiusSize(svg) { - return getSize(svg, 'rx', 'ry'); - } - - function getSvgSize(svg) { - return getSize(svg, 'width', 'height'); - } - // Define importer functions for various SVG node types function importGroup(svg, type) { @@ -241,15 +213,15 @@ new function() { origin, destination, highlight; if (isRadial) { gradient.type = 'radial'; - origin = getSvgCenter(svg); - destination = origin.add(getSvgRadius(svg), 0); + origin = getPoint(svg, 'cx', 'cy'); + destination = origin.add(getValue(svg, 'r'), 0); var fx = svg.getAttribute('fx'); if (fx) { highlight = getPoint(svg, 'fx', 'fy'); } } else { - origin = getSvgOrigin(svg); - destination = getSvgDestination(svg); + origin = getPoint(svg, 'x1', 'y1'); + destination = getPoint(svg, 'x2', 'y2'); } var gradientColor = new GradientColor(gradient, origin, destination, highlight); applyAttributes(gradientColor, svg); @@ -292,22 +264,23 @@ new function() { // http://www.w3.org/TR/SVG/shapes.html#InterfaceSVGCircleElement circle: function(svg) { - return new Path.Circle(getSvgCenter(svg), getSvgRadius(svg)); + return new Path.Circle(getPoint(svg, 'cx', 'cy'), + getValue(svg, 'r')); }, // http://www.w3.org/TR/SVG/shapes.html#InterfaceSVGEllipseElement ellipse: function(svg) { - var center = getSvgCenter(svg), - radius = getSvgRadiusSize(svg); + var center = getPoint(svg, 'cx', 'cy'), + radius = getSize(svg, '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 = getSvgPoint(svg), - size = getSvgSize(svg), - radius = getSvgRadiusSize(svg); + var point = getPoint(svg, 'x', 'y'), + size = getSize(svg, 'width', 'height'), + radius = getSize(svg, 'rx', 'ry'); // If radius is 0, Path.RoundRectangle automatically produces a // normal rectangle for us. return new Path.RoundRectangle(new Rectangle(point, size), radius); @@ -315,7 +288,8 @@ new function() { // http://www.w3.org/TR/SVG/shapes.html#LineElement line: function(svg) { - return new Path.Line(getOrigin(svg), getDestination(svg)); + return new Path.Line(getPoint(svg, 'x1', 'y1'), + getPoint(svg, 'x2', 'y2')); }, text: function(svg) { @@ -327,7 +301,7 @@ new function() { // TODO: Support for these is missing in Paper.js right now // rotate: character rotation // lengthAdjust: - var text = new PointText(getSvgPoint(svg, 0) + var text = new PointText(getPoint(svg, 'x', 'y', 0) .add(getPoint(svg, 'dx', 'dy', 0))); text.content = svg.textContent || ''; return text; From 61c8f7630955b43bd4b1c4eb33821b7be94e1574 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 15:01:13 -0800 Subject: [PATCH 5/7] Move all import function references to the top of importers list. --- src/svg/SvgImport.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index 42696f48..a4a6a62c 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -245,6 +245,10 @@ new function() { polyline: importPoly, // http://www.w3.org/TR/SVG/paths.html path: importPath, + // http://www.w3.org/TR/SVG/pservers.html#LinearGradients + lineargradient: importGradient, + // http://www.w3.org/TR/SVG/pservers.html#RadialGradients + radialgradient: importGradient, // http://www.w3.org/TR/SVG/struct.html#SymbolElement symbol: function(svg, type) { @@ -305,9 +309,7 @@ new function() { .add(getPoint(svg, 'dx', 'dy', 0))); text.content = svg.textContent || ''; return text; - }, - lineargradient: importGradient, - radialgradient: importGradient + } }; /** From 203c9b16caa293b8a009179207dba61e4392c3b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 15:01:32 -0800 Subject: [PATCH 6/7] Remove need for svg.getAttribute('fx') check. --- src/svg/SvgImport.js | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index a4a6a62c..9782b892 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -25,19 +25,24 @@ 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, index) { - var base = svg[key].baseVal; - return index !== undefined - ? index < base.numberOfItems ? base.getItem(index).value || 0 : 0 - : base.value || 0; + function getValue(svg, key, allowNull, index) { + var base = svg[key].baseVal, + value = index !== undefined + ? index < base.numberOfItems ? base.getItem(index).value : null + : base.value; + return !allowNull && value == null ? 0 : value; } - function getPoint(svg, x, y, index) { - return Point.create(getValue(svg, x, index), getValue(svg, y, index)); + function getPoint(svg, x, y, allowNull, index) { + x = getValue(svg, x, allowNull, index); + y = getValue(svg, y, allowNull, index); + return x == null && y == null ? null : Point.create(x || 0, y || 0); } - function getSize(svg, w, h, index) { - return Size.create(getValue(svg, w, index), getValue(svg, h, index)); + function getSize(svg, w, h, allowNull, index) { + w = getValue(svg, w, allowNull, index); + h = getValue(svg, h, allowNull, index); + return w == null && h == null ? null : Size.create(w || 0, h || 0); } // Converts a string attribute value to the specified type @@ -215,10 +220,7 @@ new function() { gradient.type = 'radial'; origin = getPoint(svg, 'cx', 'cy'); destination = origin.add(getValue(svg, 'r'), 0); - var fx = svg.getAttribute('fx'); - if (fx) { - highlight = getPoint(svg, 'fx', 'fy'); - } + highlight = getPoint(svg, 'fx', 'fy', true); } else { origin = getPoint(svg, 'x1', 'y1'); destination = getPoint(svg, 'x2', 'y2'); @@ -305,8 +307,8 @@ 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', 0) - .add(getPoint(svg, 'dx', 'dy', 0))); + var text = new PointText(getPoint(svg, 'x', 'y', false, 0) + .add(getPoint(svg, 'dx', 'dy', false, 0))); text.content = svg.textContent || ''; return text; } From e6913e001350a370a189079a9d0414897b61206a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 8 Nov 2012 15:08:06 -0800 Subject: [PATCH 7/7] Shorten importGradient() code. --- src/svg/SvgImport.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index 9782b892..8b56f1a5 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -207,11 +207,8 @@ new function() { stops = []; for (var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; - if (node.nodeType == 1) { - var stop = new GradientStop(); - applyAttributes(stop, node); - stops.push(stop); - } + if (node.nodeType == 1) + stops.push(applyAttributes(new GradientStop(), node)); } var gradient = new Gradient(stops), isRadial = type == 'radialgradient',