From c4d93783496e9a3e67c157d63c4a94dc654120bf Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Tue, 7 Mar 2017 12:22:48 +0100 Subject: [PATCH] Making initial changes for svg.js v3.0 - removed `SVG.Array.split()` function (#604) - removed workaround for browser bug with stroke-width (#560) - removed polyfills - removed `ungroup()` in favour of `flatten()` - gradients now have their corresponding nodename as type and not only radial/linear (#606) - `SVG.Path.pointAt()` correctly returns an `SVG.Point` now (#607) - replaced static reference to `masker` in `SVG.Mask` with the `masker()` method - replaced static reference to `clipper` in `SVG.ClipPath` with the `clipper()` method - replaced static reference to `targets` in `SVG.Mask` and `SVG.ClipPath` with the `targets()` method (all three #563) --- CHANGELOG.md | 18 ++++++++++---- src/array.js | 6 +---- src/attr.js | 5 ---- src/clip.js | 43 ++++++++++++++++----------------- src/element.js | 6 +---- src/{ungroup.js => flatten.js} | 8 +------ src/gradient.js | 7 ++---- src/mask.js | 44 ++++++++++++++++------------------ src/polyfill.js | 42 -------------------------------- src/selector.js | 13 ++++++++-- src/sugar.js | 4 ++-- 11 files changed, 72 insertions(+), 124 deletions(-) rename src/{ungroup.js => flatten.js} (84%) delete mode 100644 src/polyfill.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5313494..30f49a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,17 +11,27 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: ## UNRELEASED 3.0.0 ### Added -- added `'random'` option and `randomize()` method to `SVG.Color` -> __TODO!__ +- added `SVG.$()` and `SVG.$$()` which will query for one/all elements +- added `random` option and `randomize()` method to `SVG.Color` -> __TODO!__ - added `precision()` method to round numeric element attributes -> __TODO!__ - added specs for `SVG.FX` -> __TODO!__ +### Removed +- removed `SVG.Array.split()` function +- removed workaround for browser bug with stroke-width +- removed polyfills +- removed `ungroup()` in favour of `flatten()` +- removed `SVG.Set` -> __TODO!__ + ### Changed +- gradients now have there corresponding node as type and not only radial/linear +- `SVG.Path.pointAt()` correctly returns an `SVG.Point` now - made transform-methods relative as default (breaking change) - changed SVG() to use querySelector instead of getElementById (breaking change) -> __TODO!__ - made `parents()` method on `SVG.Element` return an instance of SVG.Set (breaking change) -> __TODO!__ -- replaced static reference to `masker` in `SVG.Mask` with the `masker()` method (breaking change) -> __TODO!__ -- replaced static reference to `clipper` in `SVG.ClipPath` with the `clipper()` method (breaking change) -> __TODO!__ -- replaced static reference to `targets` in `SVG.Mask` and `SVG.ClipPath` with the `targets()` method (breaking change) -> __TODO!__ +- replaced static reference to `masker` in `SVG.Mask` with the `masker()` method +- replaced static reference to `clipper` in `SVG.ClipPath` with the `clipper()` method +- replaced static reference to `targets` in `SVG.Mask` and `SVG.ClipPath` with the `targets()` method - moved all regexes to `SVG.regex` (in color, element, pointarray, style, transform and viewbox) -> __TODO!__ ### Fixed diff --git a/src/array.js b/src/array.js index 9947242..b532296 100644 --- a/src/array.js +++ b/src/array.js @@ -64,11 +64,7 @@ SVG.extend(SVG.Array, { // if already is an array, no need to parse it if (Array.isArray(array)) return array - return this.split(array) - } - // Strip unnecessary whitespace -, split: function(string) { - return string.trim().split(SVG.regex.delimiter).map(parseFloat) + return array.trim().split(SVG.regex.delimiter).map(parseFloat) } // Reverse array , reverse: function() { diff --git a/src/attr.js b/src/attr.js index 134ac19..c88d34c 100644 --- a/src/attr.js +++ b/src/attr.js @@ -28,11 +28,6 @@ SVG.extend(SVG.Element, { parseFloat(v) : v } else { - // BUG FIX: some browsers will render a stroke if a color is given even though stroke width is 0 - if (a == 'stroke-width') - this.attr('stroke', parseFloat(v) > 0 ? this._stroke : null) - else if (a == 'stroke') - this._stroke = v // convert image fill and stroke to patterns if (a == 'fill' || a == 'stroke') { diff --git a/src/clip.js b/src/clip.js index 2a92e44..70e2499 100644 --- a/src/clip.js +++ b/src/clip.js @@ -1,11 +1,6 @@ SVG.ClipPath = SVG.invent({ // Initialize node - create: function() { - this.constructor.call(this, SVG.create('clipPath')) - - // keep references to clipped elements - this.targets = [] - } + create: 'clipPath' // Inherit from , inherit: SVG.Container @@ -14,19 +9,22 @@ SVG.ClipPath = SVG.invent({ , extend: { // Unclip all clipped elements and remove itself remove: function() { - // unclip all targets - for (var i = this.targets.length - 1; i >= 0; i--) - if (this.targets[i]) - this.targets[i].unclip() - this.targets = [] + // unclip all targets + this.targets().each(function() { + this.unclip() + }) - // remove clipPath from parent + // remove clipPath from parent this.parent().removeElement(this) - + return this } + + , targets: function() { + return SVG.select('svg [clip-path*="' +this.id() +'"]') + } } - + // Add parent method , construct: { // Create clipping element @@ -40,19 +38,18 @@ SVG.ClipPath = SVG.invent({ SVG.extend(SVG.Element, { // Distribute clipPath to svg element clipWith: function(element) { - // use given clip or create a new one - this.clipper = element instanceof SVG.ClipPath ? element : this.parent().clip().add(element) + // use given clip or create a new one + var clipper = element instanceof SVG.ClipPath ? element : this.parent().clip().add(element) - // store reverence on self in mask - this.clipper.targets.push(this) - - // apply mask - return this.attr('clip-path', 'url("#' + this.clipper.attr('id') + '")') + // apply mask + return this.attr('clip-path', 'url("#' + clipper.attr('id') + '")') } // Unclip element , unclip: function() { - delete this.clipper return this.attr('clip-path', null) } - +, clipper: function() { + return this.reference('clip-path') + } + }) \ No newline at end of file diff --git a/src/element.js b/src/element.js index d22e742..37b324c 100644 --- a/src/element.js +++ b/src/element.js @@ -2,8 +2,7 @@ SVG.Element = SVG.invent({ // Initialize node create: function(node) { - // make stroke value accessible dynamically - this._stroke = SVG.defaults.attrs.stroke + // last fired event on node this._event = null // initialize data object @@ -13,9 +12,6 @@ SVG.Element = SVG.invent({ if (this.node = node) { this.type = node.nodeName this.node.instance = this - - // store current attribute value - this._stroke = node.getAttribute('stroke') || this._stroke } } diff --git a/src/ungroup.js b/src/flatten.js similarity index 84% rename from src/ungroup.js rename to src/flatten.js index 7f26915..2c62733 100644 --- a/src/ungroup.js +++ b/src/flatten.js @@ -1,6 +1,5 @@ SVG.extend(SVG.Parent, { - - ungroup: function(parent, depth) { + flatten: function(parent, depth) { if(depth === 0 || this instanceof SVG.Defs) return this parent = parent || (this instanceof SVG.Doc ? this : this.parent(SVG.Parent)) @@ -15,10 +14,5 @@ SVG.extend(SVG.Parent, { this.node.firstChild || this.remove() return this - }, - - flatten: function(parent, depth) { - return this.ungroup(parent, depth) } - }) \ No newline at end of file diff --git a/src/gradient.js b/src/gradient.js index 17145e6..a16c092 100644 --- a/src/gradient.js +++ b/src/gradient.js @@ -2,9 +2,6 @@ SVG.Gradient = SVG.invent({ // Initialize node create: function(type) { this.constructor.call(this, SVG.create(type + 'Gradient')) - - // store type - this.type = type } // Inherit from @@ -55,13 +52,13 @@ SVG.Gradient = SVG.invent({ SVG.extend(SVG.Gradient, SVG.FX, { // From position from: function(x, y) { - return (this._target || this).type == 'radial' ? + return (this._target || this).type == 'radialGradient' ? this.attr({ fx: new SVG.Number(x), fy: new SVG.Number(y) }) : this.attr({ x1: new SVG.Number(x), y1: new SVG.Number(y) }) } // To position , to: function(x, y) { - return (this._target || this).type == 'radial' ? + return (this._target || this).type == 'radialGradient' ? this.attr({ cx: new SVG.Number(x), cy: new SVG.Number(y) }) : this.attr({ x2: new SVG.Number(x), y2: new SVG.Number(y) }) } diff --git a/src/mask.js b/src/mask.js index 51e61e9..86951ad 100644 --- a/src/mask.js +++ b/src/mask.js @@ -1,11 +1,6 @@ SVG.Mask = SVG.invent({ // Initialize node - create: function() { - this.constructor.call(this, SVG.create('mask')) - - // keep references to masked elements - this.targets = [] - } + create: 'mask' // Inherit from , inherit: SVG.Container @@ -14,19 +9,22 @@ SVG.Mask = SVG.invent({ , extend: { // Unmask all masked elements and remove itself remove: function() { - // unmask all targets - for (var i = this.targets.length - 1; i >= 0; i--) - if (this.targets[i]) - this.targets[i].unmask() - this.targets = [] + // unmask all targets + this.targets().each(function() { + this.unmask() + }) - // remove mask from parent + // remove mask from parent this.parent().removeElement(this) - + return this } + + , targets: function() { + return SVG.select('svg [mask*="' +this.id() +'"]') + } } - + // Add parent method , construct: { // Create masking element @@ -40,19 +38,17 @@ SVG.Mask = SVG.invent({ SVG.extend(SVG.Element, { // Distribute mask to svg element maskWith: function(element) { - // use given mask or create a new one - this.masker = element instanceof SVG.Mask ? element : this.parent().mask().add(element) - - // store reverence on self in mask - this.masker.targets.push(this) - - // apply mask - return this.attr('mask', 'url("#' + this.masker.attr('id') + '")') + // use given mask or create a new one + var masker = element instanceof SVG.Mask ? element : this.parent().mask().add(element) + + // apply mask + return this.attr('mask', 'url("#' + masker.attr('id') + '")') } // Unmask element , unmask: function() { - delete this.masker return this.attr('mask', null) } - +, masker: function() { + return this.reference('mask') + } }) diff --git a/src/polyfill.js b/src/polyfill.js deleted file mode 100644 index 06ae0fd..0000000 --- a/src/polyfill.js +++ /dev/null @@ -1,42 +0,0 @@ -// Add CustomEvent to IE9 and IE10 -if (typeof CustomEvent !== 'function') { - // Code from: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent - var CustomEvent = function(event, options) { - options = options || { bubbles: false, cancelable: false, detail: undefined } - var e = document.createEvent('CustomEvent') - e.initCustomEvent(event, options.bubbles, options.cancelable, options.detail) - return e - } - - CustomEvent.prototype = window.Event.prototype - - window.CustomEvent = CustomEvent -} - -// requestAnimationFrame / cancelAnimationFrame Polyfill with fallback based on Paul Irish -(function(w) { - var lastTime = 0 - var vendors = ['moz', 'webkit'] - - for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - w.requestAnimationFrame = w[vendors[x] + 'RequestAnimationFrame'] - w.cancelAnimationFrame = w[vendors[x] + 'CancelAnimationFrame'] || - w[vendors[x] + 'CancelRequestAnimationFrame'] - } - - w.requestAnimationFrame = w.requestAnimationFrame || - function(callback) { - var currTime = new Date().getTime() - var timeToCall = Math.max(0, 16 - (currTime - lastTime)) - - var id = w.setTimeout(function() { - callback(currTime + timeToCall) - }, timeToCall) - - lastTime = currTime + timeToCall - return id - } - - w.cancelAnimationFrame = w.cancelAnimationFrame || w.clearTimeout; - -}(window)) \ No newline at end of file diff --git a/src/selector.js b/src/selector.js index fe87e4e..90a8714 100644 --- a/src/selector.js +++ b/src/selector.js @@ -13,10 +13,19 @@ SVG.select = function(query, parent) { ) } +SVG.$$ = function(query, parent) { + return SVG.utils.map((parent || document).querySelectorAll(query), function(node) { + return SVG.adopt(node) + }) +} + +SVG.$ = function(query, parent) { + return SVG.adopt((parent || document).querySelector(query)) +} + SVG.extend(SVG.Parent, { // Scoped select method select: function(query) { return SVG.select(query, this.node) } - -}) \ No newline at end of file +}) diff --git a/src/sugar.js b/src/sugar.js index e577ea7..d58c6c8 100644 --- a/src/sugar.js +++ b/src/sugar.js @@ -82,7 +82,7 @@ SVG.extend(SVG.Rect, SVG.Ellipse, SVG.Circle, SVG.Gradient, SVG.FX, { // Add x and y radius radius: function(x, y) { var type = (this._target || this).type; - return type == 'radial' || type == 'circle' ? + return type == 'radialGradient' || type == 'radialGradient' ? this.attr('r', new SVG.Number(x)) : this.rx(x).ry(y == null ? x : y) } @@ -95,7 +95,7 @@ SVG.extend(SVG.Path, { } // Get point at length , pointAt: function(length) { - return this.node.getPointAtLength(length) + return new SVG.Point(this.node.getPointAtLength(length)) } }) -- 2.39.5