From b1c31462b498ee50e8ed3a88b07ad4a302431d32 Mon Sep 17 00:00:00 2001 From: Ulrich-Matthias Schäfer Date: Sun, 13 Jan 2019 13:11:43 +0100 Subject: minor bugfix in bbox and performance changes --- CHANGELOG.md | 7 ++ bench/tests/10000-rects.js | 185 ++++++++++++++++++++++----------------------- package.json | 2 +- src/elements/Svg.js | 2 +- src/types/Box.js | 17 +++-- src/types/Color.js | 12 ++- 6 files changed, 118 insertions(+), 107 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4033f98..8207f4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: ==== +## [3.0.7] - 2018-01-12 + - fixed a bug in `isNulledBox()` and `domContains()` + - performance changes: + - replace `getElementsByTagName` with `querySelector` + - make Color check in `attr` more restrictive to prevent expensive `toString` + ## [3.0.6] - 2018-01-12 ### Fixed @@ -773,6 +779,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: +[3.0.7]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.7 [3.0.6]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.6 [3.0.5]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.5 [3.0.4]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.4 diff --git a/bench/tests/10000-rects.js b/bench/tests/10000-rects.js index d6ef518..e01eb95 100644 --- a/bench/tests/10000-rects.js +++ b/bench/tests/10000-rects.js @@ -1,5 +1,5 @@ SVG.bench.describe('Generate 10000 rects', function(bench) { - bench.test('using SVG.js v2.5.3', function() { + bench.test('using SVG.js v3.0.6', function() { for (var i = 0; i < 10000; i++) bench.draw.rect(100,100) }) @@ -17,95 +17,94 @@ SVG.bench.describe('Generate 10000 rects', function(bench) { }) }) -// -// SVG.bench.describe('Generate 10000 rects with fill', function(bench) { -// bench.test('using SVG.js v2.5.3', function() { -// for (var i = 0; i < 10000; i++) -// bench.draw.rect(100,100).fill('#f06') -// }) -// bench.test('using vanilla js', function() { -// for (var i = 0; i < 10000; i++) { -// var rect = document.createElementNS(SVG.ns, 'rect') -// rect.setAttributeNS(null, 'height', 100) -// rect.setAttributeNS(null, 'width', 100) -// rect.setAttributeNS(null, 'fill', '#f06') -// bench.raw.appendChild(rect) -// } -// }) -// bench.test('using Snap.svg v0.5.1', function() { -// for (var i = 0; i < 10000; i++) -// bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') -// }) -// }) -// -// -// SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) { -// bench.test('using SVG.js v2.5.3', function() { -// for (var i = 0; i < 10000; i++) -// bench.draw.rect(100,100).move(50,50).fill('#f06') -// }) -// bench.test('using vanilla js', function() { -// for (var i = 0; i < 10000; i++) { -// var rect = document.createElementNS(SVG.ns, 'rect') -// rect.setAttributeNS(null, 'height', 100) -// rect.setAttributeNS(null, 'width', 100) -// rect.setAttributeNS(null, 'fill', '#f06') -// rect.setAttributeNS(null, 'x', 50) -// rect.setAttributeNS(null, 'y', 50) -// bench.raw.appendChild(rect) -// } -// }) -// bench.test('using Snap.svg v0.5.1', function() { -// for (var i = 0; i < 10000; i++) -// bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') -// }) -// }) -// -// -// SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) { -// bench.test('using SVG.js v2.5.3', function() { -// for (var i = 0; i < 10000; i++) { -// var g = bench.draw.gradient('linear', function(add) { -// add.stop(0, '#000') -// add.stop(0.25, '#f00') -// add.stop(1, '#fff') -// }) -// -// bench.draw.rect(100,100).fill(g) -// } -// }) -// bench.test('using vanilla js', function() { -// for (var i = 0; i < 10000; i++) { -// var g = document.createElementNS(SVG.ns, 'linearGradient') -// var stop = document.createElementNS(SVG.ns, 'stop') -// stop.setAttributeNS(null, 'offset', '0%') -// stop.setAttributeNS(null, 'color', '#000') -// g.appendChild(stop) -// stop = document.createElementNS(SVG.ns, 'stop') -// stop.setAttributeNS(null, 'offset', '25%') -// stop.setAttributeNS(null, 'color', '#f00') -// g.appendChild(stop) -// stop = document.createElementNS(SVG.ns, 'stop') -// stop.setAttributeNS(null, 'offset', '100%') -// stop.setAttributeNS(null, 'color', '#fff') -// g.appendChild(stop) -// bench.raw.appendChild(g) -// -// var rect = document.createElementNS(SVG.ns, 'rect') -// rect.setAttributeNS(null, 'height', 100) -// rect.setAttributeNS(null, 'width', 100) -// rect.setAttributeNS(null, 'fill', '#f06') -// bench.raw.appendChild(rect) -// } -// }) -// bench.test('using Snap.svg v0.5.1', function() { -// for (var i = 0; i < 10000; i++) { -// var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff") -// -// bench.snap.rect(50, 50, 100, 100).attr({ -// fill: g -// }) -// } -// }) -// }) -// + +SVG.bench.describe('Generate 10000 rects with fill', function(bench) { + bench.test('using SVG.js v3.0.6', function() { + for (var i = 0; i < 10000; i++) + bench.draw.rect(100,100).fill('#f06') + }) + bench.test('using vanilla js', function() { + for (var i = 0; i < 10000; i++) { + var rect = document.createElementNS(SVG.ns, 'rect') + rect.setAttributeNS(null, 'height', 100) + rect.setAttributeNS(null, 'width', 100) + rect.setAttributeNS(null, 'fill', '#f06') + bench.raw.appendChild(rect) + } + }) + bench.test('using Snap.svg v0.5.1', function() { + for (var i = 0; i < 10000; i++) + bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') + }) +}) + + +SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) { + bench.test('using SVG.js v3.0.6', function() { + for (var i = 0; i < 10000; i++) + bench.draw.rect(100,100).move(50,50).fill('#f06') + }) + bench.test('using vanilla js', function() { + for (var i = 0; i < 10000; i++) { + var rect = document.createElementNS(SVG.ns, 'rect') + rect.setAttributeNS(null, 'height', 100) + rect.setAttributeNS(null, 'width', 100) + rect.setAttributeNS(null, 'fill', '#f06') + rect.setAttributeNS(null, 'x', 50) + rect.setAttributeNS(null, 'y', 50) + bench.raw.appendChild(rect) + } + }) + bench.test('using Snap.svg v0.5.1', function() { + for (var i = 0; i < 10000; i++) + bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') + }) +}) + + +SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) { + bench.test('using SVG.js v3.0.6', function() { + for (var i = 0; i < 10000; i++) { + var g = bench.draw.gradient('linear', function(add) { + add.stop(0, '#000') + add.stop(0.25, '#f00') + add.stop(1, '#fff') + }) + + bench.draw.rect(100,100).fill(g) + } + }) + bench.test('using vanilla js', function() { + for (var i = 0; i < 10000; i++) { + var g = document.createElementNS(SVG.ns, 'linearGradient') + var stop = document.createElementNS(SVG.ns, 'stop') + stop.setAttributeNS(null, 'offset', '0%') + stop.setAttributeNS(null, 'color', '#000') + g.appendChild(stop) + stop = document.createElementNS(SVG.ns, 'stop') + stop.setAttributeNS(null, 'offset', '25%') + stop.setAttributeNS(null, 'color', '#f00') + g.appendChild(stop) + stop = document.createElementNS(SVG.ns, 'stop') + stop.setAttributeNS(null, 'offset', '100%') + stop.setAttributeNS(null, 'color', '#fff') + g.appendChild(stop) + bench.raw.appendChild(g) + + var rect = document.createElementNS(SVG.ns, 'rect') + rect.setAttributeNS(null, 'height', 100) + rect.setAttributeNS(null, 'width', 100) + rect.setAttributeNS(null, 'fill', '#f06') + bench.raw.appendChild(rect) + } + }) + bench.test('using Snap.svg v0.5.1', function() { + for (var i = 0; i < 10000; i++) { + var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff") + + bench.snap.rect(50, 50, 100, 100).attr({ + fill: g + }) + } + }) +}) diff --git a/package.json b/package.json index 841133d..65966ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@svgdotjs/svg.js", - "version": "3.0.6", + "version": "3.0.7", "description": "A lightweight library for manipulating and animating SVG.", "url": "https://svgdotjs.github.io/", "homepage": "https://svgdotjs.github.io/", diff --git a/src/elements/Svg.js b/src/elements/Svg.js index 53b488c..f96a5f8 100644 --- a/src/elements/Svg.js +++ b/src/elements/Svg.js @@ -42,7 +42,7 @@ export default class Svg extends Container { defs () { if (!this.isRoot()) return this.root().defs() - return adopt(this.node.getElementsByTagName('defs')[0]) + return adopt(this.node.querySelector('defs')) || this.put(new Defs()) } diff --git a/src/types/Box.js b/src/types/Box.js index 8cbda30..90979d2 100644 --- a/src/types/Box.js +++ b/src/types/Box.js @@ -7,17 +7,18 @@ import Point from './Point.js' import parser from '../modules/core/parser.js' function isNulledBox (box) { - return !box.w && !box.h && !box.x && !box.y + return !box.width && !box.height && !box.x && !box.y } function domContains (node) { - return (globals.document.documentElement.contains || function (node) { - // This is IE - it does not support contains() for top-level SVGs - while (node.parentNode) { - node = node.parentNode - } - return node === document - }).call(globals.document.documentElement, node) + return node === globals.document + || (globals.document.documentElement.contains || function (node) { + // This is IE - it does not support contains() for top-level SVGs + while (node.parentNode) { + node = node.parentNode + } + return node === globals.document + }).call(globals.document.documentElement, node) } export default class Box { diff --git a/src/types/Color.js b/src/types/Color.js index 93ca570..74f20df 100644 --- a/src/types/Color.js +++ b/src/types/Color.js @@ -423,11 +423,11 @@ export default class Color { // Test if given value is a color string static test (color) { - color += '' - return isHex.test(color) || isRgb.test(color) + return (typeof color === 'string') + && (isHex.test(color) || isRgb.test(color)) } - // Test if given value is a rgb object + // Test if given value is an rgb object static isRgb (color) { return color && typeof color.r === 'number' && typeof color.g === 'number' @@ -436,6 +436,10 @@ export default class Color { // Test if given value is a color static isColor (color) { - return this.isRgb(color) || this.test(color) + return color && ( + color instanceof Color + || this.isRgb(color) + || this.test(color) + ) } } -- cgit v1.2.3