diff options
39 files changed, 7329 insertions, 6597 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index ecdc100..f7d7625 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: - added `isRoot()` on `SVG.Doc` (#809) - added `random` option and `randomize()` method to `SVG.Color` -> __TODO!__ - added `precision()` method to round numeric element attributes -> __TODO!__ +- added a linter during the npm build process +- added `npm build:dev` to let you develop without getting too annoyed ### Removed - removed `SVG.Array.split()` function @@ -63,7 +65,9 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: - default constructor now has an optional `node` argument which is used to consruct the object e.g. `new SVG.Rect(rectNode)` - SVG.Elements constructor now tries to import svgjs:data from the node - `SVG.on()` calls the listener in the context of the passed object. el.on always uses the svg.js object as context -- `SVG.on()/off()` and `el.on()/off()` now accepts multiple comma or space seperated events e.g. "mousedown, foo bar" (#727) +- `SVG.on()/off()` and `el.on()/off()` now accepts multiple comma or space separated events e.g. "mousedown, foo bar" (#727) +- Matrices now apply transformations like `scale`, `translate`, etc... by left multiplying them to simplify transformations +- Transforming an element is now much simpler - merged `SVG.Doc` and `SVG.Nested`, added `isRoot()` on `SVG.Doc()` (#809) ### Fixed @@ -27,3 +27,49 @@ SVG.js is licensed under the terms of the MIT License. Check [https://svgdotjs.github.io](https://svgdotjs.github.io/) to learn more. [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=pay%40woutfierens.com&lc=US&item_name=SVG.JS¤cy_code=EUR&bn=PP-DonationsBF%3Abtn_donate_74x21.png%3ANonHostedGuest) + +## Development + +To develop svg.js, you have a few commands available to you. Firstly, you should clone this repo, then cd into the folder with this README and run: + + npm install + +You'll now have all the dev dependencies installed, and you'll be ready to build the bundle. Once you've made your changes just run: + + npm run build + +This will build svg.js and make a distribution in the `/dist` folder. While developing, this may not be so convenient as the build will fail if you have any linting errors, refer to the [standard coding styleguide](https://standardjs.com/) for style we use, linters are available for most popular text editors as well. + +However, because we were too nice to put you through the pain of always having to work with a linter, we added a gentle mode that you can use by running: + + npm run build:dev + +This will only warn you about linting errors and give you useful feedback about possible errors you may have in your code (but this is no substitute for tests). Please make sure that **before making any pull requests**, you pass all of our tests and can build with `npm run build` first. + +> ⚠️⚠️⚠️ WARNING ⚠️⚠️⚠️ +> This library still uses es5, so if you do anything like using `let`, it will +> probably break, and you probably won't be able to figure out why. This is +> only a temporary trouble 🙃 We will fix it as soon as we can! +> +> The linter is ready for es6, but the build process is not, so if you get an +> error and the linter says nothing; check for es6iness 😍 + +### Testing + +This will set up everything. While you are working, you should make sure your changes pass all of our tests, so just run: + + npm run test + +Or just launch the jasmine test runner from `/spec/SpecRunner.html`. Its good to try the spec runner on a few different browsers. + +### Performance + +You can run performance tests by making a new benchmarks, look in the `/bench` folder and just add a new js file with the test you want to make. We include a few examples in the repo to make it easy for you to make your own. + +### Playgrounds + +If you would like a simple sandbox that you can use + +## Pull Requests + +We welcome any pull requests and will try our hardest to review them as soon as possible. If you need any help or would like to chat, check out our [gitter group](https://gitter.im/svgdotjs/svg.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge), we are always happy to see new users! diff --git a/bench/svg.bench.js b/bench/svg.bench.js index 5b9541e..50ef547 100644 --- a/bench/svg.bench.js +++ b/bench/svg.bench.js @@ -1,56 +1,55 @@ -;( function() { +/* global Snap */ +;(function () { SVG.bench = { // Initalize test store - _chain: [] - , _before: function() {} - , _after: function() {} - , draw: SVG().addTo('#draw') - , snap: Snap(100, 100) - , raw: document.getElementById('native') + _chain: [], + _before: function () {}, + _after: function () {}, + draw: SVG().addTo('#draw'), + snap: Snap(100, 100), + raw: document.getElementById('native'), // Add descriptor - , describe: function(name, closure) { + describe: function (name, closure) { this._chain.push({ - name: name - , run: closure + name: name, + run: closure }) return this - } + }, // Add test - , test: function(name, run) { + test: function (name, run) { // run test - var start = ( new Date ).getTime() + var start = (new Date()).getTime() run() - this.write( name, ( new Date ).getTime() - start ) + this.write(name, (new Date()).getTime() - start) // clear everything this.clear() - } + }, // Skip test - , skip: function(name, run) { - this.write( name, false ) - } + skip: function (name, run) { + this.write(name, false) + }, // Run tests - , run: function() { + run: function () { this.pad() - + for (var h, i = 0, il = this._chain.length; i < il; i++) { - var h = document.createElement('h1') + h = document.createElement('h1') h.innerHTML = this._chain[i].name - this.pad().appendChild(h) - this._chain[i].run(this) } - } - + }, + // Write result - , write: function(name, ms) { + write: function (name, ms) { var test = document.createElement('div') if (typeof ms === 'number') { @@ -60,14 +59,14 @@ test.className = 'test skipped' test.innerHTML = name + ' (skipped)' } - + this.pad().appendChild(test) return this - } + }, // Reference writable element - , pad: function() { + pad: function () { var pad = document.getElementById('pad') if (!pad) { @@ -76,15 +75,15 @@ } return pad - } + }, // Clear canvasses - , clear: function() { - while(this.raw.hasChildNodes()) + clear: function () { + while (this.raw.hasChildNodes()) { this.raw.removeChild(this.raw.lastChild) + } this.draw.clear() this.snap.clear() } } - -})();
\ No newline at end of file +})() diff --git a/dist/svg.js b/dist/svg.js index 01c2c45..bcfca12 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,5266 +6,5472 @@ * @copyright Wout Fierens <wout@mick-wout.com> * @license MIT * -* BUILT: Sat Mar 03 2018 11:57:42 GMT+0100 (Mitteleuropäische Zeit) +* BUILT: Sun Mar 04 2018 20:57:30 GMT+1100 (AEDT) */; -
-(function(root, factory) {
- /* istanbul ignore next */
- if (typeof define === 'function' && define.amd) {
- define(function(){
- return factory(root, root.document)
- })
- } else if (typeof exports === 'object') {
- module.exports = root.document ? factory(root, root.document) : function(w){ return factory(w, w.document) }
- } else {
- root.SVG = factory(root, root.document)
- }
-}(typeof window !== "undefined" ? window : this, function(window, document) {
-
-// Check that our browser supports svg
-var supported = !! document.createElementNS &&
- !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect
-
-// If we don't support svg, just exit without doing anything
-if (!supported)
- return {supported: false}
-
-// Otherwise, the library will be here
-/* global createElement, capitalize */
-/* eslint-disable new-cap */
-
-// The main wrapping element
-var SVG = this.SVG = function (element) {
- if (SVG.supported) {
- element = createElement(element)
- return element
- }
-}
-
-// Svg must be supported if we reached this stage
-SVG.supported = true
-
-// Default namespaces
-SVG.ns = 'http://www.w3.org/2000/svg'
-SVG.xmlns = 'http://www.w3.org/2000/xmlns/'
-SVG.xlink = 'http://www.w3.org/1999/xlink'
-SVG.svgjs = 'http://svgjs.com/svgjs'
-
-// Element id sequence
-SVG.did = 1000
-
-// Get next named element id
-SVG.eid = function (name) {
- return 'Svgjs' + capitalize(name) + (SVG.did++)
-}
-
-// Method for element creation
-SVG.create = function (name) {
- // create element
- return document.createElementNS(this.ns, name)
-}
-
-// Method for extending objects
-SVG.extend = function (modules, methods) {
- var key, i
-
- modules = Array.isArray(modules) ? modules : [modules]
-
- for (i = modules.length - 1; i >= 0; i--) {
- if (modules[i]) {
- for (key in methods) {
- modules[i].prototype[key] = methods[key]
- }
- }
- }
-}
-
-// Invent new element
-SVG.invent = function (config) {
- // Create element initializer
- var initializer = typeof config.create === 'function' ? config.create
- : function (node) {
- this.constructor(node || SVG.create(config.create))
- }
-
- // Inherit prototype
- if (config.inherit) {
- initializer.prototype = new config.inherit()
- }
-
- // Extend with methods
- if (config.extend) {
- SVG.extend(initializer, config.extend)
- }
-
- // Attach construct method to parent
- if (config.construct) { SVG.extend(config.parent || SVG.Container, config.construct) }
-
- return initializer
-}
-
-// Adopt existing svg elements
-SVG.adopt = function (node) {
- // check for presence of node
- if (!node) return null
-
- // make sure a node isn't already adopted
- if (node.instance instanceof SVG.Element) return node.instance
-
- if (!(node instanceof window.SVGElement)) {
- return new SVG.HtmlNode(node)
- }
-
- // initialize variables
- var element
-
- // adopt with element-specific settings
- if (node.nodeName === 'svg') {
- element = new SVG.Doc(node)
- } else if (node.nodeName === 'linearGradient' || node.nodeName === 'radialGradient') {
- element = new SVG.Gradient(node)
- } else if (SVG[capitalize(node.nodeName)]) {
- element = new SVG[capitalize(node.nodeName)](node)
- } else {
- element = new SVG.Parent(node)
- }
-
- return element
-}
- -// Storage for regular expressions
-SVG.regex = {
- // Parse unit value
- numberAndUnit: /^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,
-
- // Parse hex value
- hex: /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
-
- // Parse rgb value
- rgb: /rgb\((\d+),(\d+),(\d+)\)/,
-
- // Parse reference id
- reference: /#([a-z0-9\-_]+)/i,
-
- // splits a transformation chain
- transforms: /\)\s*,?\s*/,
-
- // Whitespace
- whitespace: /\s/g,
-
- // Test hex value
- isHex: /^#[a-f0-9]{3,6}$/i,
-
- // Test rgb value
- isRgb: /^rgb\(/,
-
- // Test css declaration
- isCss: /[^:]+:[^;]+;?/,
-
- // Test for blank string
- isBlank: /^(\s+)?$/,
-
- // Test for numeric string
- isNumber: /^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,
-
- // Test for percent value
- isPercent: /^-?[\d.]+%$/,
-
- // Test for image url
- isImage: /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,
-
- // split at whitespace and comma
- delimiter: /[\s,]+/,
-
- // The following regex are used to parse the d attribute of a path
-
- // Matches all hyphens which are not after an exponent
- hyphen: /([^e])-/gi,
-
- // Replaces and tests for all path letters
- pathLetters: /[MLHVCSQTAZ]/gi,
-
- // yes we need this one, too
- isPathLetter: /[MLHVCSQTAZ]/i,
-
- // matches 0.154.23.45
- numbersWithDots: /((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,
-
- // matches .
- dots: /\./g
-}
- -SVG.utils = {
- // Map function
- map: function (array, block) {
- var i
- var il = array.length
- var result = []
-
- for (i = 0; i < il; i++) {
- result.push(block(array[i]))
- }
-
- return result
- },
-
- // Filter function
- filter: function (array, block) {
- var i
- var il = array.length
- var result = []
-
- for (i = 0; i < il; i++) {
- if (block(array[i])) { result.push(array[i]) }
- }
-
- return result
- },
-
- // Degrees to radians
- radians: function (d) {
- return d % 360 * Math.PI / 180
- },
-
- // Radians to degrees
- degrees: function (r) {
- return r * 180 / Math.PI % 360
- },
-
- filterSVGElements: function (nodes) {
- return this.filter(nodes, function (el) { return el instanceof window.SVGElement })
- }
-
-}
- -
-SVG.defaults = {
-
- // Default attribute values
- attrs: {
-
- // fill and stroke
- 'fill-opacity': 1,
- 'stroke-opacity': 1,
- 'stroke-width': 0,
- 'stroke-linejoin': 'miter',
- 'stroke-linecap': 'butt',
- fill: '#000000',
- stroke: '#000000',
- opacity: 1,
-
- // position
- x: 0,
- y: 0,
- cx: 0,
- cy: 0,
-
- // size
- width: 0,
- height: 0,
-
- // radius
- r: 0,
- rx: 0,
- ry: 0,
-
- // gradient
- offset: 0,
- 'stop-opacity': 1,
- 'stop-color': '#000000',
-
- // text
- 'font-size': 16,
- 'font-family': 'Helvetica, Arial, sans-serif',
- 'text-anchor': 'start'
- }
-}
- -/* globals fullHex, compToHex */
-
-// Module for color convertions
-SVG.Color = function (color) {
- var match
-
- // initialize defaults
- this.r = 0
- this.g = 0
- this.b = 0
-
- if (!color) return
-
- // parse color
- if (typeof color === 'string') {
- if (SVG.regex.isRgb.test(color)) {
- // get rgb values
- match = SVG.regex.rgb.exec(color.replace(SVG.regex.whitespace, ''))
-
- // parse numeric values
- this.r = parseInt(match[1])
- this.g = parseInt(match[2])
- this.b = parseInt(match[3])
- } else if (SVG.regex.isHex.test(color)) {
- // get hex values
- match = SVG.regex.hex.exec(fullHex(color))
-
- // parse numeric values
- this.r = parseInt(match[1], 16)
- this.g = parseInt(match[2], 16)
- this.b = parseInt(match[3], 16)
- }
- } else if (typeof color === 'object') {
- this.r = color.r
- this.g = color.g
- this.b = color.b
- }
-}
-
-SVG.extend(SVG.Color, {
- // Default to hex conversion
- toString: function () {
- return this.toHex()
- },
- // Build hex value
- toHex: function () {
- return '#' +
- compToHex(this.r) +
- compToHex(this.g) +
- compToHex(this.b)
- },
- // Build rgb value
- toRgb: function () {
- return 'rgb(' + [this.r, this.g, this.b].join() + ')'
- },
- // Calculate true brightness
- brightness: function () {
- return (this.r / 255 * 0.30) +
- (this.g / 255 * 0.59) +
- (this.b / 255 * 0.11)
- },
- // Make color morphable
- morph: function (color) {
- this.destination = new SVG.Color(color)
-
- return this
- },
- // Get morphed color at given position
- at: function (pos) {
- // make sure a destination is defined
- if (!this.destination) return this
-
- // normalise pos
- pos = pos < 0 ? 0 : pos > 1 ? 1 : pos
-
- // generate morphed color
- return new SVG.Color({
- r: ~~(this.r + (this.destination.r - this.r) * pos),
- g: ~~(this.g + (this.destination.g - this.g) * pos),
- b: ~~(this.b + (this.destination.b - this.b) * pos)
- })
- }
-
-})
-
-// Testers
-
-// Test if given value is a color string
-SVG.Color.test = function (color) {
- color += ''
- return SVG.regex.isHex.test(color) ||
- SVG.regex.isRgb.test(color)
-}
-
-// Test if given value is a rgb object
-SVG.Color.isRgb = function (color) {
- return color && typeof color.r === 'number' &&
- typeof color.g === 'number' &&
- typeof color.b === 'number'
-}
-
-// Test if given value is a color
-SVG.Color.isColor = function (color) {
- return SVG.Color.isRgb(color) || SVG.Color.test(color)
-}
- -/* global arrayClone */
-
-// Module for array conversion
-SVG.Array = function (array, fallback) {
- array = (array || []).valueOf()
-
- // if array is empty and fallback is provided, use fallback
- if (array.length === 0 && fallback) {
- array = fallback.valueOf()
- }
-
- // parse array
- this.value = this.parse(array)
-}
-
-SVG.extend(SVG.Array, {
- // Make array morphable
- morph: function (array) {
- this.destination = this.parse(array)
-
- // normalize length of arrays
- if (this.value.length !== this.destination.length) {
- var lastValue = this.value[this.value.length - 1]
- var lastDestination = this.destination[this.destination.length - 1]
-
- while (this.value.length > this.destination.length) {
- this.destination.push(lastDestination)
- }
- while (this.value.length < this.destination.length) {
- this.value.push(lastValue)
- }
- }
-
- return this
- },
- // Clean up any duplicate points
- settle: function () {
- // find all unique values
- for (var i = 0, il = this.value.length, seen = []; i < il; i++) {
- if (seen.indexOf(this.value[i]) === -1) {
- seen.push(this.value[i])
- }
- }
-
- // set new value
- this.value = seen
- return seen
- },
- // Get morphed array at given position
- at: function (pos) {
- // make sure a destination is defined
- if (!this.destination) return this
-
- // generate morphed array
- for (var i = 0, il = this.value.length, array = []; i < il; i++) {
- array.push(this.value[i] + (this.destination[i] - this.value[i]) * pos)
- }
-
- return new SVG.Array(array)
- },
- // Convert array to string
- toString: function () {
- return this.value.join(' ')
- },
- // Real value
- valueOf: function () {
- return this.value
- },
- // Parse whitespace separated string
- parse: function (array) {
- array = array.valueOf()
-
- // if already is an array, no need to parse it
- if (Array.isArray(array)) return array
-
- return array.trim().split(SVG.regex.delimiter).map(parseFloat)
- },
- // Reverse array
- reverse: function () {
- this.value.reverse()
-
- return this
- },
- clone: function () {
- var clone = new this.constructor()
- clone.value = arrayClone(this.value)
- return clone
- }
-})
- -
-// Poly points array
-SVG.PointArray = function (array, fallback) {
- SVG.Array.call(this, array, fallback || [[0, 0]])
-}
-
-// Inherit from SVG.Array
-SVG.PointArray.prototype = new SVG.Array()
-SVG.PointArray.prototype.constructor = SVG.PointArray
-
-SVG.extend(SVG.PointArray, {
- // Convert array to string
- toString: function () {
- // convert to a poly point string
- for (var i = 0, il = this.value.length, array = []; i < il; i++) {
- array.push(this.value[i].join(','))
- }
-
- return array.join(' ')
- },
-
- // Convert array to line object
- toLine: function () {
- return {
- x1: this.value[0][0],
- y1: this.value[0][1],
- x2: this.value[1][0],
- y2: this.value[1][1]
- }
- },
-
- // Get morphed array at given position
- at: function (pos) {
- // make sure a destination is defined
- if (!this.destination) return this
-
- // generate morphed point string
- for (var i = 0, il = this.value.length, array = []; i < il; i++) {
- array.push([
- this.value[i][0] + (this.destination[i][0] - this.value[i][0]) * pos,
- this.value[i][1] + (this.destination[i][1] - this.value[i][1]) * pos
- ])
- }
-
- return new SVG.PointArray(array)
- },
-
- // Parse point string and flat array
- parse: function (array) {
- var points = []
-
- array = array.valueOf()
-
- // if it is an array
- if (Array.isArray(array)) {
- // and it is not flat, there is no need to parse it
- if (Array.isArray(array[0])) {
- return array
- }
- } else { // Else, it is considered as a string
- // parse points
- array = array.trim().split(SVG.regex.delimiter).map(parseFloat)
- }
-
- // validate points - https://svgwg.org/svg2-draft/shapes.html#DataTypePoints
- // Odd number of coordinates is an error. In such cases, drop the last odd coordinate.
- if (array.length % 2 !== 0) array.pop()
-
- // wrap points in two-tuples and parse points as floats
- for (var i = 0, len = array.length; i < len; i = i + 2) {
- points.push([ array[i], array[i + 1] ])
- }
-
- return points
- },
-
- // Move point string
- move: function (x, y) {
- var box = this.bbox()
-
- // get relative offset
- x -= box.x
- y -= box.y
-
- // move every point
- if (!isNaN(x) && !isNaN(y)) {
- for (var i = this.value.length - 1; i >= 0; i--) {
- this.value[i] = [this.value[i][0] + x, this.value[i][1] + y]
- }
- }
-
- return this
- },
- // Resize poly string
- size: function (width, height) {
- var i
- var box = this.bbox()
-
- // recalculate position of all points according to new size
- for (i = this.value.length - 1; i >= 0; i--) {
- if (box.width) this.value[i][0] = ((this.value[i][0] - box.x) * width) / box.width + box.x
- if (box.height) this.value[i][1] = ((this.value[i][1] - box.y) * height) / box.height + box.y
- }
-
- return this
- },
-
- // Get bounding box of points
- bbox: function () {
- var maxX = -Infinity
- var maxY = -Infinity
- var minX = Infinity
- var minY = Infinity
- this.value.forEach(function (el) {
- maxX = Math.max(el[0], maxX)
- maxY = Math.max(el[1], maxY)
- minX = Math.min(el[0], minX)
- minY = Math.min(el[1], minY)
- })
- return {x: minX, y: minY, width: maxX - minX, height: maxY - minY}
- }
-})
- -/* globals arrayToString, pathRegReplace */
-
-var pathHandlers = {
- M: function (c, p, p0) {
- p.x = p0.x = c[0]
- p.y = p0.y = c[1]
-
- return ['M', p.x, p.y]
- },
- L: function (c, p) {
- p.x = c[0]
- p.y = c[1]
- return ['L', c[0], c[1]]
- },
- H: function (c, p) {
- p.x = c[0]
- return ['H', c[0]]
- },
- V: function (c, p) {
- p.y = c[0]
- return ['V', c[0]]
- },
- C: function (c, p) {
- p.x = c[4]
- p.y = c[5]
- return ['C', c[0], c[1], c[2], c[3], c[4], c[5]]
- },
- S: function (c, p) {
- p.x = c[2]
- p.y = c[3]
- return ['S', c[0], c[1], c[2], c[3]]
- },
- Q: function (c, p) {
- p.x = c[2]
- p.y = c[3]
- return ['Q', c[0], c[1], c[2], c[3]]
- },
- T: function (c, p) {
- p.x = c[0]
- p.y = c[1]
- return ['T', c[0], c[1]]
- },
- Z: function (c, p, p0) {
- p.x = p0.x
- p.y = p0.y
- return ['Z']
- },
- A: function (c, p) {
- p.x = c[5]
- p.y = c[6]
- return ['A', c[0], c[1], c[2], c[3], c[4], c[5], c[6]]
- }
-}
-
-var mlhvqtcsaz = 'mlhvqtcsaz'.split('')
-
-for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) {
- pathHandlers[mlhvqtcsaz[i]] = (function (i) {
- return function (c, p, p0) {
- if (i === 'H') c[0] = c[0] + p.x
- else if (i === 'V') c[0] = c[0] + p.y
- else if (i === 'A') {
- c[5] = c[5] + p.x
- c[6] = c[6] + p.y
- } else {
- for (var j = 0, jl = c.length; j < jl; ++j) {
- c[j] = c[j] + (j % 2 ? p.y : p.x)
- }
- }
-
- return pathHandlers[i](c, p, p0)
- }
- })(mlhvqtcsaz[i].toUpperCase())
-}
-
-// Path points array
-SVG.PathArray = function (array, fallback) {
- SVG.Array.call(this, array, fallback || [['M', 0, 0]])
-}
-
-// Inherit from SVG.Array
-SVG.PathArray.prototype = new SVG.Array()
-SVG.PathArray.prototype.constructor = SVG.PathArray
-
-SVG.extend(SVG.PathArray, {
- // Convert array to string
- toString: function () {
- return arrayToString(this.value)
- },
- // Move path string
- move: function (x, y) {
- // get bounding box of current situation
- var box = this.bbox()
-
- // get relative offset
- x -= box.x
- y -= box.y
-
- if (!isNaN(x) && !isNaN(y)) {
- // move every point
- for (var l, i = this.value.length - 1; i >= 0; i--) {
- l = this.value[i][0]
-
- if (l === 'M' || l === 'L' || l === 'T') {
- this.value[i][1] += x
- this.value[i][2] += y
- } else if (l === 'H') {
- this.value[i][1] += x
- } else if (l === 'V') {
- this.value[i][1] += y
- } else if (l === 'C' || l === 'S' || l === 'Q') {
- this.value[i][1] += x
- this.value[i][2] += y
- this.value[i][3] += x
- this.value[i][4] += y
-
- if (l === 'C') {
- this.value[i][5] += x
- this.value[i][6] += y
- }
- } else if (l === 'A') {
- this.value[i][6] += x
- this.value[i][7] += y
- }
- }
- }
-
- return this
- },
- // Resize path string
- size: function (width, height) {
- // get bounding box of current situation
- var box = this.bbox()
- var i, l
-
- // recalculate position of all points according to new size
- for (i = this.value.length - 1; i >= 0; i--) {
- l = this.value[i][0]
-
- if (l === 'M' || l === 'L' || l === 'T') {
- this.value[i][1] = ((this.value[i][1] - box.x) * width) / box.width + box.x
- this.value[i][2] = ((this.value[i][2] - box.y) * height) / box.height + box.y
- } else if (l === 'H') {
- this.value[i][1] = ((this.value[i][1] - box.x) * width) / box.width + box.x
- } else if (l === 'V') {
- this.value[i][1] = ((this.value[i][1] - box.y) * height) / box.height + box.y
- } else if (l === 'C' || l === 'S' || l === 'Q') {
- this.value[i][1] = ((this.value[i][1] - box.x) * width) / box.width + box.x
- this.value[i][2] = ((this.value[i][2] - box.y) * height) / box.height + box.y
- this.value[i][3] = ((this.value[i][3] - box.x) * width) / box.width + box.x
- this.value[i][4] = ((this.value[i][4] - box.y) * height) / box.height + box.y
-
- if (l === 'C') {
- this.value[i][5] = ((this.value[i][5] - box.x) * width) / box.width + box.x
- this.value[i][6] = ((this.value[i][6] - box.y) * height) / box.height + box.y
- }
- } else if (l === 'A') {
- // resize radii
- this.value[i][1] = (this.value[i][1] * width) / box.width
- this.value[i][2] = (this.value[i][2] * height) / box.height
-
- // move position values
- this.value[i][6] = ((this.value[i][6] - box.x) * width) / box.width + box.x
- this.value[i][7] = ((this.value[i][7] - box.y) * height) / box.height + box.y
- }
- }
-
- return this
- },
- // Test if the passed path array use the same path data commands as this path array
- equalCommands: function (pathArray) {
- var i, il, equalCommands
-
- pathArray = new SVG.PathArray(pathArray)
-
- equalCommands = this.value.length === pathArray.value.length
- for (i = 0, il = this.value.length; equalCommands && i < il; i++) {
- equalCommands = this.value[i][0] === pathArray.value[i][0]
- }
-
- return equalCommands
- },
- // Make path array morphable
- morph: function (pathArray) {
- pathArray = new SVG.PathArray(pathArray)
-
- if (this.equalCommands(pathArray)) {
- this.destination = pathArray
- } else {
- this.destination = null
- }
-
- return this
- },
- // Get morphed path array at given position
- at: function (pos) {
- // make sure a destination is defined
- if (!this.destination) return this
-
- var sourceArray = this.value
- var destinationArray = this.destination.value
- var array = []
- var pathArray = new SVG.PathArray()
- var i, il, j, jl
-
- // Animate has specified in the SVG spec
- // See: https://www.w3.org/TR/SVG11/paths.html#PathElement
- for (i = 0, il = sourceArray.length; i < il; i++) {
- array[i] = [sourceArray[i][0]]
- for (j = 1, jl = sourceArray[i].length; j < jl; j++) {
- array[i][j] = sourceArray[i][j] + (destinationArray[i][j] - sourceArray[i][j]) * pos
- }
- // For the two flags of the elliptical arc command, the SVG spec say:
- // Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true
- // Elliptical arc command as an array followed by corresponding indexes:
- // ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]
- // 0 1 2 3 4 5 6 7
- if (array[i][0] === 'A') {
- array[i][4] = +(array[i][4] !== 0)
- array[i][5] = +(array[i][5] !== 0)
- }
- }
-
- // Directly modify the value of a path array, this is done this way for performance
- pathArray.value = array
- return pathArray
- },
- // Absolutize and parse path to array
- parse: function (array) {
- // if it's already a patharray, no need to parse it
- if (array instanceof SVG.PathArray) return array.valueOf()
-
- // prepare for parsing
- var s
- var paramCnt = { 'M': 2, 'L': 2, 'H': 1, 'V': 1, 'C': 6, 'S': 4, 'Q': 4, 'T': 2, 'A': 7, 'Z': 0 }
-
- if (typeof array === 'string') {
- array = array
- .replace(SVG.regex.numbersWithDots, pathRegReplace) // convert 45.123.123 to 45.123 .123
- .replace(SVG.regex.pathLetters, ' $& ') // put some room between letters and numbers
- .replace(SVG.regex.hyphen, '$1 -') // add space before hyphen
- .trim() // trim
- .split(SVG.regex.delimiter) // split into array
- } else {
- array = array.reduce(function (prev, curr) {
- return [].concat.call(prev, curr)
- }, [])
- }
-
- // array now is an array containing all parts of a path e.g. ['M', '0', '0', 'L', '30', '30' ...]
- var result = []
- var p = new SVG.Point()
- var p0 = new SVG.Point()
- var index = 0
- var len = array.length
-
- do {
- // Test if we have a path letter
- if (SVG.regex.isPathLetter.test(array[index])) {
- s = array[index]
- ++index
- // If last letter was a move command and we got no new, it defaults to [L]ine
- } else if (s === 'M') {
- s = 'L'
- } else if (s === 'm') {
- s = 'l'
- }
-
- result.push(pathHandlers[s].call(null,
- array.slice(index, (index = index + paramCnt[s.toUpperCase()])).map(parseFloat),
- p, p0
- )
- )
- } while (len > index)
-
- return result
- },
- // Get bounding box of path
- bbox: function () {
- SVG.parser().path.setAttribute('d', this.toString())
- return SVG.parser.nodes.path.getBBox()
- }
-
-})
- -
-// Module for unit convertions
-SVG.Number = SVG.invent({
- // Initialize
- create: function (value, unit) {
- // initialize defaults
- this.value = 0
- this.unit = unit || ''
-
- // parse value
- if (typeof value === 'number') {
- // ensure a valid numeric value
- this.value = isNaN(value) ? 0 : !isFinite(value) ? (value < 0 ? -3.4e+38 : +3.4e+38) : value
- } else if (typeof value === 'string') {
- unit = value.match(SVG.regex.numberAndUnit)
-
- if (unit) {
- // make value numeric
- this.value = parseFloat(unit[1])
-
- // normalize
- if (unit[5] === '%') { this.value /= 100 } else if (unit[5] === 's') {
- this.value *= 1000
- }
-
- // store unit
- this.unit = unit[5]
- }
- } else {
- if (value instanceof SVG.Number) {
- this.value = value.valueOf()
- this.unit = value.unit
- }
- }
- },
- // Add methods
- extend: {
- // Stringalize
- toString: function () {
- return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6
- : this.unit === 's' ? this.value / 1e3
- : this.value
- ) + this.unit
- },
- toJSON: function () {
- return this.toString()
- }, // Convert to primitive
- valueOf: function () {
- return this.value
- },
- // Add number
- plus: function (number) {
- number = new SVG.Number(number)
- return new SVG.Number(this + number, this.unit || number.unit)
- },
- // Subtract number
- minus: function (number) {
- number = new SVG.Number(number)
- return new SVG.Number(this - number, this.unit || number.unit)
- },
- // Multiply number
- times: function (number) {
- number = new SVG.Number(number)
- return new SVG.Number(this * number, this.unit || number.unit)
- },
- // Divide number
- divide: function (number) {
- number = new SVG.Number(number)
- return new SVG.Number(this / number, this.unit || number.unit)
- },
- // Convert to different unit
- to: function (unit) {
- var number = new SVG.Number(this)
-
- if (typeof unit === 'string') {
- number.unit = unit
- }
-
- return number
- },
- // Make number morphable
- morph: function (number) {
- this.destination = new SVG.Number(number)
-
- if (number.relative) {
- this.destination.value += this.value
- }
-
- return this
- },
- // Get morphed number at given position
- at: function (pos) {
- // Make sure a destination is defined
- if (!this.destination) return this
-
- // Generate new morphed number
- return new SVG.Number(this.destination)
- .minus(this)
- .times(pos)
- .plus(this)
- }
-
- }
-})
- -/* global createElement */
-
-SVG.HtmlNode = SVG.invent({
- create: function (element) {
- this.node = element
- },
-
- extend: {
- add: function (element, i) {
- element = createElement(element)
-
- if (element.node !== this.node.children[i]) {
- this.node.insertBefore(element.node, this.node.children[i] || null)
- }
-
- return this
- },
-
- put: function (element, i) {
- this.add(element, i)
- return element
- }
- }
-})
- -/* global proportionalSize, assignNewId, createElement, matches, is */
-
-SVG.Element = SVG.invent({
- // Initialize node
- create: function (node) {
- // event listener
- this.events = {}
-
- // initialize data object
- this.dom = {}
-
- // create circular reference
- this.node = node
- if (this.node) {
- this.type = node.nodeName
- this.node.instance = this
- this.events = node.events || {}
-
- if (node.hasAttribute('svgjs:data')) {
- // pull svgjs data from the dom (getAttributeNS doesn't work in html5)
- this.setData(JSON.parse(node.getAttribute('svgjs:data')) || {})
- }
- }
- },
-
- // Add class methods
- extend: {
- // Move over x-axis
- x: function (x) {
- return this.attr('x', x)
- },
-
- // Move over y-axis
- y: function (y) {
- return this.attr('y', y)
- },
-
- // Move by center over x-axis
- cx: function (x) {
- return x == null ? this.x() + this.width() / 2 : this.x(x - this.width() / 2)
- },
-
- // Move by center over y-axis
- cy: function (y) {
- return y == null ? this.y() + this.height() / 2 : this.y(y - this.height() / 2)
- },
-
- // Move element to given x and y values
- move: function (x, y) {
- return this.x(x).y(y)
- },
-
- // Move element by its center
- center: function (x, y) {
- return this.cx(x).cy(y)
- },
-
- // Set width of element
- width: function (width) {
- return this.attr('width', width)
- },
-
- // Set height of element
- height: function (height) {
- return this.attr('height', height)
- },
-
- // Set element size to given width and height
- size: function (width, height) {
- var p = proportionalSize(this, width, height)
-
- return this
- .width(new SVG.Number(p.width))
- .height(new SVG.Number(p.height))
- },
-
- // Clone element
- clone: function (parent) {
- // write dom data to the dom so the clone can pickup the data
- this.writeDataToDom()
-
- // clone element and assign new id
- var clone = assignNewId(this.node.cloneNode(true))
-
- // insert the clone in the given parent or after myself
- if (parent) parent.add(clone)
- else this.after(clone)
-
- return clone
- },
-
- // Remove element
- remove: function () {
- if (this.parent()) { this.parent().removeElement(this) }
-
- return this
- },
-
- // Replace element
- replace: function (element) {
- this.after(element).remove()
-
- return element
- },
-
- // Add element to given container and return self
- addTo: function (parent) {
- return createElement(parent).put(this)
- },
-
- // Add element to given container and return container
- putIn: function (parent) {
- return createElement(parent).add(this)
- },
-
- // Get / set id
- id: function (id) {
- // generate new id if no id set
- if (typeof id === 'undefined' && !this.node.id) {
- this.node.id = SVG.eid(this.type)
- }
-
- // dont't set directly width this.node.id to make `null` work correctly
- return this.attr('id', id)
- },
-
- // Checks whether the given point inside the bounding box of the element
- inside: function (x, y) {
- var box = this.bbox()
-
- return x > box.x &&
- y > box.y &&
- x < box.x + box.width &&
- y < box.y + box.height
- },
-
- // Show element
- show: function () {
- return this.css('display', '')
- },
-
- // Hide element
- hide: function () {
- return this.css('display', 'none')
- },
-
- // Is element visible?
- visible: function () {
- return this.css('display') !== 'none'
- },
-
- // Return id on string conversion
- toString: function () {
- return this.id()
- },
-
- // Return array of classes on the node
- classes: function () {
- var attr = this.attr('class')
- return attr == null ? [] : attr.trim().split(SVG.regex.delimiter)
- },
-
- // Return true if class exists on the node, false otherwise
- hasClass: function (name) {
- return this.classes().indexOf(name) !== -1
- },
-
- // Add class to the node
- addClass: function (name) {
- if (!this.hasClass(name)) {
- var array = this.classes()
- array.push(name)
- this.attr('class', array.join(' '))
- }
-
- return this
- },
-
- // Remove class from the node
- removeClass: function (name) {
- if (this.hasClass(name)) {
- this.attr('class', this.classes().filter(function (c) {
- return c !== name
- }).join(' '))
- }
-
- return this
- },
-
- // Toggle the presence of a class on the node
- toggleClass: function (name) {
- return this.hasClass(name) ? this.removeClass(name) : this.addClass(name)
- },
-
- // Get referenced element form attribute value
- reference: function (attr) {
- return SVG.get(this.attr(attr))
- },
-
- // Returns the parent element instance
- parent: function (type) {
- var parent = this
-
- // check for parent
- if (!parent.node.parentNode) return null
-
- // get parent element
- parent = SVG.adopt(parent.node.parentNode)
-
- if (!type) return parent
-
- // loop trough ancestors if type is given
- while (parent && parent.node instanceof window.SVGElement) {
- if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent
- parent = SVG.adopt(parent.node.parentNode)
- }
- },
-
- // Get parent document
- doc: function () {
- var p = this.parent(SVG.Doc)
- return p && p.doc()
- },
-
- // Get defs
- defs: function () {
- return this.doc().defs()
- },
-
- // return array of all ancestors of given type up to the root svg
- parents: function (type) {
- var parents = []
- var parent = this
-
- do {
- parent = parent.parent(type)
- if (!parent || !parent.node) break
-
- parents.push(parent)
- } while (parent.parent)
-
- return parents
- },
-
- // matches the element vs a css selector
- matches: function (selector) {
- return matches(this.node, selector)
- },
-
- // Returns the svg node to call native svg methods on it
- native: function () {
- return this.node
- },
-
- // Import raw svg
- svg: function (svg) {
- var well, len
-
- // act as a setter if svg is given
- if (svg && this instanceof SVG.Parent) {
- // create temporary holder
- well = document.createElementNS(SVG.ns, 'svg')
- // dump raw svg
- well.innerHTML = svg
-
- // transplant nodes
- for (len = well.children.length; len--;) {
- this.node.appendChild(well.firstElementChild)
- }
-
- // otherwise act as a getter
- } else {
- // write svgjs data to the dom
- this.writeDataToDom()
-
- return this.node.outerHTML
- }
-
- return this
- },
-
- // write svgjs data to the dom
- writeDataToDom: function () {
- // dump variables recursively
- if (this.is(SVG.Parent)) {
- this.each(function () {
- this.writeDataToDom()
- })
- }
-
- // remove previously set data
- this.node.removeAttribute('svgjs:data')
-
- if (Object.keys(this.dom).length) {
- this.node.setAttribute('svgjs:data', JSON.stringify(this.dom)) // see #428
- }
- return this
- },
-
- // set given data to the elements data property
- setData: function (o) {
- this.dom = o
- return this
- },
- is: function (obj) {
- return is(this, obj)
- }
- }
-})
- -SVG.easing = {
- '-': function (pos) { return pos },
- '<>': function (pos) { return -Math.cos(pos * Math.PI) / 2 + 0.5 },
- '>': function (pos) { return Math.sin(pos * Math.PI / 2) },
- '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }
-}
-
-SVG.morph = function (pos) {
- return function (from, to) {
- return new SVG.MorphObj(from, to).at(pos)
- }
-}
-
-SVG.Situation = SVG.invent({
-
- create: function (o) {
- this.init = false
- this.reversed = false
- this.reversing = false
-
- this.duration = new SVG.Number(o.duration).valueOf()
- this.delay = new SVG.Number(o.delay).valueOf()
-
- this.start = +new Date() + this.delay
- this.finish = this.start + this.duration
- this.ease = o.ease
-
- // this.loop is incremented from 0 to this.loops
- // it is also incremented when in an infinite loop (when this.loops is true)
- this.loop = 0
- this.loops = false
-
- this.animations = {
- // functionToCall: [list of morphable objects]
- // e.g. move: [SVG.Number, SVG.Number]
- }
-
- this.attrs = {
- // holds all attributes which are not represented from a function svg.js provides
- // e.g. someAttr: SVG.Number
- }
-
- this.styles = {
- // holds all styles which should be animated
- // e.g. fill-color: SVG.Color
- }
-
- this.transforms = [
- // holds all transformations as transformation objects
- // e.g. [SVG.Rotate, SVG.Translate, SVG.Matrix]
- ]
-
- this.once = {
- // functions to fire at a specific position
- // e.g. "0.5": function foo(){}
- }
- }
-
-})
-
-SVG.FX = SVG.invent({
-
- create: function (element) {
- this._target = element
- this.situations = []
- this.active = false
- this.situation = null
- this.paused = false
- this.lastPos = 0
- this.pos = 0
- // The absolute position of an animation is its position in the context of its complete duration (including delay and loops)
- // When performing a delay, absPos is below 0 and when performing a loop, its value is above 1
- this.absPos = 0
- this._speed = 1
- },
-
- extend: {
-
- /**
- * sets or returns the target of this animation
- * @param o object || number In case of Object it holds all parameters. In case of number its the duration of the animation
- * @param ease function || string Function which should be used for easing or easing keyword
- * @param delay Number indicating the delay before the animation starts
- * @return target || this
- */
- animate: function (o, ease, delay) {
- if (typeof o === 'object') {
- ease = o.ease
- delay = o.delay
- o = o.duration
- }
-
- var situation = new SVG.Situation({
- duration: o || 1000,
- delay: delay || 0,
- ease: SVG.easing[ease || '-'] || ease
- })
-
- this.queue(situation)
-
- return this
- },
-
- /**
- * sets a delay before the next element of the queue is called
- * @param delay Duration of delay in milliseconds
- * @return this.target()
- */
- delay: function (delay) {
- // The delay is performed by an empty situation with its duration
- // attribute set to the duration of the delay
- var situation = new SVG.Situation({
- duration: delay,
- delay: 0,
- ease: SVG.easing['-']
- })
-
- return this.queue(situation)
- },
-
- /**
- * sets or returns the target of this animation
- * @param null || target SVG.Element which should be set as new target
- * @return target || this
- */
- target: function (target) {
- if (target && target instanceof SVG.Element) {
- this._target = target
- return this
- }
-
- return this._target
- },
-
- // returns the absolute position at a given time
- timeToAbsPos: function (timestamp) {
- return (timestamp - this.situation.start) / (this.situation.duration / this._speed)
- },
-
- // returns the timestamp from a given absolute positon
- absPosToTime: function (absPos) {
- return this.situation.duration / this._speed * absPos + this.situation.start
- },
-
- // starts the animationloop
- startAnimFrame: function () {
- this.stopAnimFrame()
- this.animationFrame = window.requestAnimationFrame(function () { this.step() }.bind(this))
- },
-
- // cancels the animationframe
- stopAnimFrame: function () {
- window.cancelAnimationFrame(this.animationFrame)
- },
-
- // kicks off the animation - only does something when the queue is currently not active and at least one situation is set
- start: function () {
- // dont start if already started
- if (!this.active && this.situation) {
- this.active = true
- this.startCurrent()
- }
-
- return this
- },
-
- // start the current situation
- startCurrent: function () {
- this.situation.start = +new Date() + this.situation.delay / this._speed
- this.situation.finish = this.situation.start + this.situation.duration / this._speed
- return this.initAnimations().step()
- },
-
- /**
- * adds a function / Situation to the animation queue
- * @param fn function / situation to add
- * @return this
- */
- queue: function (fn) {
- if (typeof fn === 'function' || fn instanceof SVG.Situation) {
- this.situations.push(fn)
- }
-
- if (!this.situation) this.situation = this.situations.shift()
-
- return this
- },
-
- /**
- * pulls next element from the queue and execute it
- * @return this
- */
- dequeue: function () {
- // stop current animation
- this.stop()
-
- // get next animation from queue
- this.situation = this.situations.shift()
-
- if (this.situation) {
- if (this.situation instanceof SVG.Situation) {
- this.start()
- } else {
- // If it is not a SVG.Situation, then it is a function, we execute it
- this.situation(this)
- }
- }
-
- return this
- },
-
- // updates all animations to the current state of the element
- // this is important when one property could be changed from another property
- initAnimations: function () {
- var i, j, source
- var s = this.situation
-
- if (s.init) return this
-
- for (i in s.animations) {
- source = this.target()[i]()
-
- if (!Array.isArray(source)) {
- source = [source]
- }
-
- if (!Array.isArray(s.animations[i])) {
- s.animations[i] = [s.animations[i]]
- }
-
- // if(s.animations[i].length > source.length) {
- // source.concat = source.concat(s.animations[i].slice(source.length, s.animations[i].length))
- // }
-
- for (j = source.length; j--;) {
- // The condition is because some methods return a normal number instead
- // of a SVG.Number
- if (s.animations[i][j] instanceof SVG.Number) {
- source[j] = new SVG.Number(source[j])
- }
-
- s.animations[i][j] = source[j].morph(s.animations[i][j])
- }
- }
-
- for (i in s.attrs) {
- s.attrs[i] = new SVG.MorphObj(this.target().attr(i), s.attrs[i])
- }
-
- for (i in s.styles) {
- s.styles[i] = new SVG.MorphObj(this.target().css(i), s.styles[i])
- }
-
- s.initialTransformation = this.target().matrixify()
-
- s.init = true
- return this
- },
-
- clearQueue: function () {
- this.situations = []
- return this
- },
-
- clearCurrent: function () {
- this.situation = null
- return this
- },
-
- /** stops the animation immediately
- * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately.
- * @param clearQueue A Boolean indicating whether to remove queued animation as well.
- * @return this
- */
- stop: function (jumpToEnd, clearQueue) {
- var active = this.active
- this.active = false
-
- if (clearQueue) {
- this.clearQueue()
- }
-
- if (jumpToEnd && this.situation) {
- // initialize the situation if it was not
- !active && this.startCurrent()
- this.atEnd()
- }
-
- this.stopAnimFrame()
-
- return this.clearCurrent()
- },
-
- /** resets the element to the state where the current element has started
- * @return this
- */
- reset: function () {
- if (this.situation) {
- var temp = this.situation
- this.stop()
- this.situation = temp
- this.atStart()
- }
- return this
- },
-
- // Stop the currently-running animation, remove all queued animations, and complete all animations for the element.
- finish: function () {
- this.stop(true, false)
-
- while (this.dequeue().situation && this.stop(true, false));
-
- this.clearQueue().clearCurrent()
-
- return this
- },
-
- // set the internal animation pointer at the start position, before any loops, and updates the visualisation
- atStart: function () {
- return this.at(0, true)
- },
-
- // set the internal animation pointer at the end position, after all the loops, and updates the visualisation
- atEnd: function () {
- if (this.situation.loops === true) {
- // If in a infinite loop, we end the current iteration
- this.situation.loops = this.situation.loop + 1
- }
-
- if (typeof this.situation.loops === 'number') {
- // If performing a finite number of loops, we go after all the loops
- return this.at(this.situation.loops, true)
- } else {
- // If no loops, we just go at the end
- return this.at(1, true)
- }
- },
-
- // set the internal animation pointer to the specified position and updates the visualisation
- // if isAbsPos is true, pos is treated as an absolute position
- at: function (pos, isAbsPos) {
- var durDivSpd = this.situation.duration / this._speed
-
- this.absPos = pos
- // If pos is not an absolute position, we convert it into one
- if (!isAbsPos) {
- if (this.situation.reversed) this.absPos = 1 - this.absPos
- this.absPos += this.situation.loop
- }
-
- this.situation.start = +new Date() - this.absPos * durDivSpd
- this.situation.finish = this.situation.start + durDivSpd
-
- return this.step(true)
- },
-
- /**
- * sets or returns the speed of the animations
- * @param speed null || Number The new speed of the animations
- * @return Number || this
- */
- speed: function (speed) {
- if (speed === 0) return this.pause()
-
- if (speed) {
- this._speed = speed
- // We use an absolute position here so that speed can affect the delay before the animation
- return this.at(this.absPos, true)
- } else return this._speed
- },
-
- // Make loopable
- loop: function (times, reverse) {
- var c = this.last()
-
- // store total loops
- c.loops = (times != null) ? times : true
- c.loop = 0
-
- if (reverse) c.reversing = true
- return this
- },
-
- // pauses the animation
- pause: function () {
- this.paused = true
- this.stopAnimFrame()
-
- return this
- },
-
- // unpause the animation
- play: function () {
- if (!this.paused) return this
- this.paused = false
- // We use an absolute position here so that the delay before the animation can be paused
- return this.at(this.absPos, true)
- },
-
- /**
- * toggle or set the direction of the animation
- * true sets direction to backwards while false sets it to forwards
- * @param reversed Boolean indicating whether to reverse the animation or not (default: toggle the reverse status)
- * @return this
- */
- reverse: function (reversed) {
- var c = this.last()
-
- if (typeof reversed === 'undefined') c.reversed = !c.reversed
- else c.reversed = reversed
-
- return this
- },
-
- /**
- * returns a float from 0-1 indicating the progress of the current animation
- * @param eased Boolean indicating whether the returned position should be eased or not
- * @return number
- */
- progress: function (easeIt) {
- return easeIt ? this.situation.ease(this.pos) : this.pos
- },
-
- /**
- * adds a callback function which is called when the current animation is finished
- * @param fn Function which should be executed as callback
- * @return number
- */
- after: function (fn) {
- var c = this.last()
- function wrapper (e) {
- if (e.detail.situation === c) {
- fn.call(this, c)
- this.off('finished.fx', wrapper) // prevent memory leak
- }
- }
-
- this.target().on('finished.fx', wrapper)
-
- return this._callStart()
- },
-
- // adds a callback which is called whenever one animation step is performed
- during: function (fn) {
- var c = this.last()
- function wrapper (e) {
- if (e.detail.situation === c) {
- fn.call(this, e.detail.pos, SVG.morph(e.detail.pos), e.detail.eased, c)
- }
- }
-
- // see above
- this.target().off('during.fx', wrapper).on('during.fx', wrapper)
-
- this.after(function () {
- this.off('during.fx', wrapper)
- })
-
- return this._callStart()
- },
-
- // calls after ALL animations in the queue are finished
- afterAll: function (fn) {
- var wrapper = function wrapper (e) {
- fn.call(this)
- this.off('allfinished.fx', wrapper)
- }
-
- // see above
- this.target().off('allfinished.fx', wrapper).on('allfinished.fx', wrapper)
-
- return this._callStart()
- },
-
- // calls on every animation step for all animations
- duringAll: function (fn) {
- var wrapper = function (e) {
- fn.call(this, e.detail.pos, SVG.morph(e.detail.pos), e.detail.eased, e.detail.situation)
- }
-
- this.target().off('during.fx', wrapper).on('during.fx', wrapper)
-
- this.afterAll(function () {
- this.off('during.fx', wrapper)
- })
-
- return this._callStart()
- },
-
- last: function () {
- return this.situations.length ? this.situations[this.situations.length - 1] : this.situation
- },
-
- // adds one property to the animations
- add: function (method, args, type) {
- this.last()[type || 'animations'][method] = args
- return this._callStart()
- },
-
- /** perform one step of the animation
- * @param ignoreTime Boolean indicating whether to ignore time and use position directly or recalculate position based on time
- * @return this
- */
- step: function (ignoreTime) {
- // convert current time to an absolute position
- if (!ignoreTime) this.absPos = this.timeToAbsPos(+new Date())
-
- // This part convert an absolute position to a position
- if (this.situation.loops !== false) {
- var absPos, absPosInt, lastLoop
-
- // If the absolute position is below 0, we just treat it as if it was 0
- absPos = Math.max(this.absPos, 0)
- absPosInt = Math.floor(absPos)
-
- if (this.situation.loops === true || absPosInt < this.situation.loops) {
- this.pos = absPos - absPosInt
- lastLoop = this.situation.loop
- this.situation.loop = absPosInt
- } else {
- this.absPos = this.situation.loops
- this.pos = 1
- // The -1 here is because we don't want to toggle reversed when all the loops have been completed
- lastLoop = this.situation.loop - 1
- this.situation.loop = this.situation.loops
- }
-
- if (this.situation.reversing) {
- // Toggle reversed if an odd number of loops as occured since the last call of step
- this.situation.reversed = this.situation.reversed !== Boolean((this.situation.loop - lastLoop) % 2)
- }
- } else {
- // If there are no loop, the absolute position must not be above 1
- this.absPos = Math.min(this.absPos, 1)
- this.pos = this.absPos
- }
-
- // while the absolute position can be below 0, the position must not be below 0
- if (this.pos < 0) this.pos = 0
-
- if (this.situation.reversed) this.pos = 1 - this.pos
-
- // apply easing
- var eased = this.situation.ease(this.pos)
-
- // call once-callbacks
- for (var i in this.situation.once) {
- if (i > this.lastPos && i <= eased) {
- this.situation.once[i].call(this.target(), this.pos, eased)
- delete this.situation.once[i]
- }
- }
-
- // fire during callback with position, eased position and current situation as parameter
- if (this.active) this.target().fire('during', {pos: this.pos, eased: eased, fx: this, situation: this.situation})
-
- // the user may call stop or finish in the during callback
- // so make sure that we still have a valid situation
- if (!this.situation) {
- return this
- }
-
- // apply the actual animation to every property
- this.eachAt()
-
- // do final code when situation is finished
- if ((this.pos === 1 && !this.situation.reversed) || (this.situation.reversed && this.pos === 0)) {
- // stop animation callback
- this.stopAnimFrame()
-
- // fire finished callback with current situation as parameter
- this.target().fire('finished', {fx: this, situation: this.situation})
-
- if (!this.situations.length) {
- this.target().fire('allfinished')
-
- // Recheck the length since the user may call animate in the afterAll callback
- if (!this.situations.length) {
- this.target().off('.fx') // there shouldnt be any binding left, but to make sure...
- this.active = false
- }
- }
-
- // start next animation
- if (this.active) this.dequeue()
- else this.clearCurrent()
- } else if (!this.paused && this.active) {
- // we continue animating when we are not at the end
- this.startAnimFrame()
- }
-
- // save last eased position for once callback triggering
- this.lastPos = eased
- return this
- },
-
- // calculates the step for every property and calls block with it
- eachAt: function () {
- var i, len, at
- var self = this
- var target = this.target()
- var s = this.situation
-
- // apply animations which can be called trough a method
- for (i in s.animations) {
- at = [].concat(s.animations[i]).map(function (el) {
- return typeof el !== 'string' && el.at ? el.at(s.ease(self.pos), self.pos) : el
- })
-
- target[i].apply(target, at)
- }
-
- // apply animation which has to be applied with attr()
- for (i in s.attrs) {
- at = [i].concat(s.attrs[i]).map(function (el) {
- return typeof el !== 'string' && el.at ? el.at(s.ease(self.pos), self.pos) : el
- })
-
- target.attr.apply(target, at)
- }
-
- // apply animation which has to be applied with css()
- for (i in s.styles) {
- at = [i].concat(s.styles[i]).map(function (el) {
- return typeof el !== 'string' && el.at ? el.at(s.ease(self.pos), self.pos) : el
- })
-
- target.css.apply(target, at)
- }
-
- // animate initialTransformation which has to be chained
- if (s.transforms.length) {
- // get initial initialTransformation
- at = s.initialTransformation
- for (i = 0, len = s.transforms.length; i < len; i++) {
- // get next transformation in chain
- var a = s.transforms[i]
-
- // multiply matrix directly
- if (a instanceof SVG.Matrix) {
- if (a.relative) {
- at = at.multiply(new SVG.Matrix().morph(a).at(s.ease(this.pos)))
- } else {
- at = at.morph(a).at(s.ease(this.pos))
- }
- continue
- }
-
- // when transformation is absolute we have to reset the needed transformation first
- if (!a.relative) {
- a.undo(at.extract())
- }
-
- // and reapply it after
- at = at.multiply(a.at(s.ease(this.pos)))
- }
-
- // set new matrix on element
- target.matrix(at)
- }
-
- return this
- },
-
- // adds an once-callback which is called at a specific position and never again
- once: function (pos, fn, isEased) {
- var c = this.last()
- if (!isEased) pos = c.ease(pos)
-
- c.once[pos] = fn
-
- return this
- },
-
- _callStart: function () {
- setTimeout(function () { this.start() }.bind(this), 0)
- return this
- }
-
- },
-
- parent: SVG.Element,
-
- // Add method to parent elements
- construct: {
- // Get fx module or create a new one, then animate with given duration and ease
- animate: function (o, ease, delay) {
- return (this.fx || (this.fx = new SVG.FX(this))).animate(o, ease, delay)
- },
- delay: function (delay) {
- return (this.fx || (this.fx = new SVG.FX(this))).delay(delay)
- },
- stop: function (jumpToEnd, clearQueue) {
- if (this.fx) {
- this.fx.stop(jumpToEnd, clearQueue)
- }
-
- return this
- },
- finish: function () {
- if (this.fx) {
- this.fx.finish()
- }
-
- return this
- },
- // Pause current animation
- pause: function () {
- if (this.fx) {
- this.fx.pause()
- }
-
- return this
- },
- // Play paused current animation
- play: function () {
- if (this.fx) { this.fx.play() }
-
- return this
- },
- // Set/Get the speed of the animations
- speed: function (speed) {
- if (this.fx) {
- if (speed == null) { return this.fx.speed() } else { this.fx.speed(speed) }
- }
-
- return this
- }
- }
-
-})
-
-// MorphObj is used whenever no morphable object is given
-SVG.MorphObj = SVG.invent({
-
- create: function (from, to) {
- // prepare color for morphing
- if (SVG.Color.isColor(to)) return new SVG.Color(from).morph(to)
- // prepare value list for morphing
- if (SVG.regex.delimiter.test(from)) return new SVG.Array(from).morph(to)
- // prepare number for morphing
- if (SVG.regex.numberAndUnit.test(to)) return new SVG.Number(from).morph(to)
-
- // prepare for plain morphing
- this.value = from
- this.destination = to
- },
-
- extend: {
- at: function (pos, real) {
- return real < 1 ? this.value : this.destination
- },
-
- valueOf: function () {
- return this.value
- }
- }
-
-})
-
-SVG.extend(SVG.FX, {
- // Add animatable attributes
- attr: function (a, v, relative) {
- // apply attributes individually
- if (typeof a === 'object') {
- for (var key in a) {
- this.attr(key, a[key])
- }
- } else {
- this.add(a, v, 'attrs')
- }
-
- return this
- },
- // Add animatable styles
- css: function (s, v) {
- if (typeof s === 'object') {
- for (var key in s) {
- this.css(key, s[key])
- }
- } else {
- this.add(s, v, 'styles')
- }
-
- return this
- },
- // Animatable x-axis
- x: function (x, relative) {
- if (this.target() instanceof SVG.G) {
- this.transform({x: x}, relative)
- return this
- }
-
- var num = new SVG.Number(x)
- num.relative = relative
- return this.add('x', num)
- },
- // Animatable y-axis
- y: function (y, relative) {
- if (this.target() instanceof SVG.G) {
- this.transform({y: y}, relative)
- return this
- }
-
- var num = new SVG.Number(y)
- num.relative = relative
- return this.add('y', num)
- },
- // Animatable center x-axis
- cx: function (x) {
- return this.add('cx', new SVG.Number(x))
- },
- // Animatable center y-axis
- cy: function (y) {
- return this.add('cy', new SVG.Number(y))
- },
- // Add animatable move
- move: function (x, y) {
- return this.x(x).y(y)
- },
- // Add animatable center
- center: function (x, y) {
- return this.cx(x).cy(y)
- },
- // Add animatable size
- size: function (width, height) {
- if (this.target() instanceof SVG.Text) {
- // animate font size for Text elements
- this.attr('font-size', width)
- } else {
- // animate bbox based size for all other elements
- var box
-
- if (!width || !height) {
- box = this.target().bbox()
- }
-
- if (!width) {
- width = box.width / box.height * height
- }
-
- if (!height) {
- height = box.height / box.width * width
- }
-
- this.add('width', new SVG.Number(width))
- .add('height', new SVG.Number(height))
- }
-
- return this
- },
- // Add animatable width
- width: function (width) {
- return this.add('width', new SVG.Number(width))
- },
- // Add animatable height
- height: function (height) {
- return this.add('height', new SVG.Number(height))
- },
- // Add animatable plot
- plot: function (a, b, c, d) {
- // Lines can be plotted with 4 arguments
- if (arguments.length === 4) {
- return this.plot([a, b, c, d])
- }
-
- return this.add('plot', new (this.target().MorphArray)(a))
- },
- // Add leading method
- leading: function (value) {
- return this.target().leading
- ? this.add('leading', new SVG.Number(value))
- : this
- },
- // Add animatable viewbox
- viewbox: function (x, y, width, height) {
- if (this.target() instanceof SVG.Container) {
- this.add('viewbox', new SVG.Box(x, y, width, height))
- }
-
- return this
- },
- update: function (o) {
- if (this.target() instanceof SVG.Stop) {
- if (typeof o === 'number' || o instanceof SVG.Number) {
- return this.update({
- offset: arguments[0],
- color: arguments[1],
- opacity: arguments[2]
- })
- }
-
- if (o.opacity != null) this.attr('stop-opacity', o.opacity)
- if (o.color != null) this.attr('stop-color', o.color)
- if (o.offset != null) this.attr('offset', o.offset)
- }
-
- return this
- }
-})
- -/* global abcdef, arrayToMatrix, deltaTransformPoint, parseMatrix */
-
-SVG.Matrix = SVG.invent({
- // Initialize
- create: function (source) {
- var base = arrayToMatrix([1, 0, 0, 1, 0, 0])
- var i
-
- // ensure source as object
- source = source instanceof SVG.Element ? source.matrixify()
- : typeof source === 'string' ? arrayToMatrix(source.split(SVG.regex.delimiter).map(parseFloat))
- : arguments.length === 6 ? arrayToMatrix([].slice.call(arguments))
- : Array.isArray(source) ? arrayToMatrix(source)
- : typeof source === 'object' ? source
- : base
-
- // merge source
- for (i = abcdef.length - 1; i >= 0; --i) {
- this[abcdef[i]] = source[abcdef[i]] != null
- ? source[abcdef[i]]
- : base[abcdef[i]]
- }
- },
-
- // Add methods
- extend: {
- // Extract individual transformations
- extract: function () {
- // find delta transform points
- var px = deltaTransformPoint(this, 0, 1)
- var py = deltaTransformPoint(this, 1, 0)
- var skewX = 180 / Math.PI * Math.atan2(px.y, px.x) - 90
-
- return {
- // translation
- x: this.e,
- y: this.f,
- transformedX: (this.e * Math.cos(skewX * Math.PI / 180) + this.f * Math.sin(skewX * Math.PI / 180)) / Math.sqrt(this.a * this.a + this.b * this.b),
- transformedY: (this.f * Math.cos(skewX * Math.PI / 180) + this.e * Math.sin(-skewX * Math.PI / 180)) / Math.sqrt(this.c * this.c + this.d * this.d),
- // skew
- skewX: -skewX,
- skewY: 180 / Math.PI * Math.atan2(py.y, py.x),
- // scale
- scaleX: Math.sqrt(this.a * this.a + this.b * this.b),
- scaleY: Math.sqrt(this.c * this.c + this.d * this.d),
- // rotation
- rotation: skewX,
- a: this.a,
- b: this.b,
- c: this.c,
- d: this.d,
- e: this.e,
- f: this.f,
- matrix: new SVG.Matrix(this)
- }
- },
- // Clone matrix
- clone: function () {
- return new SVG.Matrix(this)
- },
- // Morph one matrix into another
- morph: function (matrix) {
- // store new destination
- this.destination = new SVG.Matrix(matrix)
-
- return this
- },
- // Get morphed matrix at a given position
- at: function (pos) {
- // make sure a destination is defined
- if (!this.destination) return this
-
- // calculate morphed matrix at a given position
- var matrix = new SVG.Matrix({
- a: this.a + (this.destination.a - this.a) * pos,
- b: this.b + (this.destination.b - this.b) * pos,
- c: this.c + (this.destination.c - this.c) * pos,
- d: this.d + (this.destination.d - this.d) * pos,
- e: this.e + (this.destination.e - this.e) * pos,
- f: this.f + (this.destination.f - this.f) * pos
- })
-
- return matrix
- },
- // Multiplies by given matrix
- multiply: function (matrix) {
- return new SVG.Matrix(this.native().multiply(parseMatrix(matrix).native()))
- },
- // Inverses matrix
- inverse: function () {
- return new SVG.Matrix(this.native().inverse())
- },
- // Translate matrix
- translate: function (x, y) {
- return new SVG.Matrix(this.native().translate(x || 0, y || 0))
- },
- // Scale matrix
- scale: function (x, y, cx, cy) {
- // support uniformal scale
- if (arguments.length === 1) {
- y = x
- } else if (arguments.length === 3) {
- cy = cx
- cx = y
- y = x
- }
-
- return this.around(cx, cy, new SVG.Matrix(x, 0, 0, y, 0, 0))
- },
- // Rotate matrix
- rotate: function (r, cx, cy) {
- // convert degrees to radians
- r = SVG.utils.radians(r)
-
- return this.around(cx, cy, new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0))
- },
- // Flip matrix on x or y, at a given offset
- flip: function (a, o) {
- return a === 'x' ? this.scale(-1, 1, o, 0)
- : a === 'y' ? this.scale(1, -1, 0, o)
- : this.scale(-1, -1, a, o != null ? o : a)
- },
- // Skew
- skew: function (x, y, cx, cy) {
- // support uniformal skew
- if (arguments.length === 1) {
- y = x
- } else if (arguments.length === 3) {
- cy = cx
- cx = y
- y = x
- }
-
- // convert degrees to radians
- x = SVG.utils.radians(x)
- y = SVG.utils.radians(y)
-
- return this.around(cx, cy, new SVG.Matrix(1, Math.tan(y), Math.tan(x), 1, 0, 0))
- },
- // SkewX
- skewX: function (x, cx, cy) {
- return this.skew(x, 0, cx, cy)
- },
- // SkewY
- skewY: function (y, cx, cy) {
- return this.skew(0, y, cx, cy)
- },
- // Transform around a center point
- around: function (cx, cy, matrix) {
- return this
- .multiply(new SVG.Matrix(1, 0, 0, 1, cx || 0, cy || 0))
- .multiply(matrix)
- .multiply(new SVG.Matrix(1, 0, 0, 1, -cx || 0, -cy || 0))
- },
- // Convert to native SVGMatrix
- native: function () {
- // create new matrix
- var matrix = SVG.parser.nodes.svg.node.createSVGMatrix()
-
- // update with current values
- for (var i = abcdef.length - 1; i >= 0; i--) {
- matrix[abcdef[i]] = this[abcdef[i]]
- }
-
- return matrix
- },
- // Convert matrix to string
- toString: function () {
- return 'matrix(' + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ')'
- }
- },
-
- // Define parent
- parent: SVG.Element,
-
- // Add parent method
- construct: {
- // Get current matrix
- ctm: function () {
- return new SVG.Matrix(this.node.getCTM())
- },
- // Get current screen matrix
- screenCTM: function () {
- /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537
- This is needed because FF does not return the transformation matrix
- for the inner coordinate system when getScreenCTM() is called on nested svgs.
- However all other Browsers do that */
- if (this instanceof SVG.Doc && !this.isRoot()) {
- var rect = this.rect(1, 1)
- var m = rect.node.getScreenCTM()
- rect.remove()
- return new SVG.Matrix(m)
- }
- return new SVG.Matrix(this.node.getScreenCTM())
- }
- }
-})
- -
-SVG.Point = SVG.invent({
- // Initialize
- create: function (x, y) {
- var base = {x: 0, y: 0}
- var source
-
- // ensure source as object
- source = Array.isArray(x) ? {x: x[0], y: x[1]}
- : typeof x === 'object' ? {x: x.x, y: x.y}
- : x != null ? {x: x, y: (y != null ? y : x)}
- : base // If y has no value, then x is used has its value
-
- // merge source
- this.x = source.x
- this.y = source.y
- },
-
- // Add methods
- extend: {
- // Clone point
- clone: function () {
- return new SVG.Point(this)
- },
- // Morph one point into another
- morph: function (x, y) {
- // store new destination
- this.destination = new SVG.Point(x, y)
-
- return this
- },
- // Get morphed point at a given position
- at: function (pos) {
- // make sure a destination is defined
- if (!this.destination) return this
-
- // calculate morphed matrix at a given position
- var point = new SVG.Point({
- x: this.x + (this.destination.x - this.x) * pos,
- y: this.y + (this.destination.y - this.y) * pos
- })
-
- return point
- },
- // Convert to native SVGPoint
- native: function () {
- // create new point
- var point = SVG.parser.nodes.svg.node.createSVGPoint()
-
- // update with current values
- point.x = this.x
- point.y = this.y
-
- return point
- },
- // transform point with matrix
- transform: function (matrix) {
- return new SVG.Point(this.native().matrixTransform(matrix.native()))
- }
- }
-})
-
-SVG.extend(SVG.Element, {
-
- // Get point
- point: function (x, y) {
- return new SVG.Point(x, y).transform(this.screenCTM().inverse())
- }
-
-})
- -SVG.extend(SVG.Element, {
- // Set svg element attribute
- attr: function (a, v, n) {
- // act as full getter
- if (a == null) {
- // get an object of attributes
- a = {}
- v = this.node.attributes
- for (n = v.length - 1; n >= 0; n--) {
- a[v[n].nodeName] = SVG.regex.isNumber.test(v[n].nodeValue)
- ? parseFloat(v[n].nodeValue)
- : v[n].nodeValue
- }
- return a
- } else if (typeof a === 'object') {
- // apply every attribute individually if an object is passed
- for (v in a) this.attr(v, a[v])
- } else if (v === null) {
- // remove value
- this.node.removeAttribute(a)
- } else if (v == null) {
- // act as a getter if the first and only argument is not an object
- v = this.node.getAttribute(a)
- return v == null ? SVG.defaults.attrs[a]
- : SVG.regex.isNumber.test(v) ? parseFloat(v)
- : v
- } else {
- // convert image fill and stroke to patterns
- if (a === 'fill' || a === 'stroke') {
- if (SVG.regex.isImage.test(v)) {
- v = this.doc().defs().image(v)
- }
-
- if (v instanceof SVG.Image) {
- v = this.doc().defs().pattern(0, 0, function () {
- this.add(v)
- })
- }
- }
-
- // ensure correct numeric values (also accepts NaN and Infinity)
- if (typeof v === 'number') {
- v = new SVG.Number(v)
- } else if (SVG.Color.isColor(v)) {
- // ensure full hex color
- v = new SVG.Color(v)
- } else if (Array.isArray(v)) {
- // parse array values
- v = new SVG.Array(v)
- }
-
- // if the passed attribute is leading...
- if (a === 'leading') {
- // ... call the leading method instead
- if (this.leading) {
- this.leading(v)
- }
- } else {
- // set given attribute on node
- typeof n === 'string' ? this.node.setAttributeNS(n, a, v.toString())
- : this.node.setAttribute(a, v.toString())
- }
-
- // rebuild if required
- if (this.rebuild && (a === 'font-size' || a === 'x')) {
- this.rebuild(a, v)
- }
- }
-
- return this
- }
-})
- -/* global ensureCentre, capitalize, arrayToMatrix */
-
-SVG.extend(SVG.Element, {
- // Add transformations
- transform: function (o, relative) {
- // get target in case of the fx module, otherwise reference this
- var target = this
- var matrix, bbox
-
- // act as a getter
- if (typeof o !== 'object') {
- // get current matrix
- matrix = new SVG.Matrix(target).extract()
-
- return typeof o === 'string' ? matrix[o] : matrix
- }
-
- // get current matrix
- matrix = new SVG.Matrix(target)
-
- // ensure relative flag
- relative = !!relative || !!o.relative
-
- // act on matrix
- if (o.a != null) {
- matrix = relative
- ? matrix.multiply(new SVG.Matrix(o))
- : new SVG.Matrix(o)
-
- // act on rotation
- } else if (o.rotation != null) {
- // ensure centre point
- ensureCentre(o, target)
-
- // apply transformation
- matrix = relative
- ? matrix.rotate(o.rotation, o.cx, o.cy)
- : matrix.rotate(o.rotation - matrix.extract().rotation, o.cx, o.cy)
-
- // act on scale
- } else if (o.scale != null || o.scaleX != null || o.scaleY != null) {
- // ensure centre point
- ensureCentre(o, target)
-
- // ensure scale values on both axes
- o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1
- o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1
-
- if (!relative) {
- // absolute; multiply inversed values
- var e = matrix.extract()
- o.scaleX = o.scaleX * 1 / e.scaleX
- o.scaleY = o.scaleY * 1 / e.scaleY
- }
-
- matrix = matrix.scale(o.scaleX, o.scaleY, o.cx, o.cy)
-
- // act on skew
- } else if (o.skew != null || o.skewX != null || o.skewY != null) {
- // ensure centre point
- ensureCentre(o, target)
-
- // ensure skew values on both axes
- o.skewX = o.skew != null ? o.skew : o.skewX != null ? o.skewX : 0
- o.skewY = o.skew != null ? o.skew : o.skewY != null ? o.skewY : 0
-
- if (!relative) {
- // absolute; reset skew values
- var el = matrix.extract()
- matrix = matrix.multiply(new SVG.Matrix().skew(el.skewX, el.skewY, el.cx, el.cy).inverse())
- }
-
- matrix = matrix.skew(o.skewX, o.skewY, o.cx, o.cy)
-
- // act on flip
- } else if (o.flip) {
- if (o.flip === 'x' || o.flip === 'y') {
- o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset
- } else {
- if (o.offset == null) {
- bbox = target.bbox()
- o.flip = bbox.cx
- o.offset = bbox.cy
- } else {
- o.flip = o.offset
- }
- }
-
- matrix = new SVG.Matrix().flip(o.flip, o.offset)
-
- // act on translate
- } else if (o.x != null || o.y != null) {
- if (relative) {
- // relative
- matrix = matrix.translate(o.x, o.y)
- } else {
- // absolute
- if (o.x != null) matrix.e = o.x
- if (o.y != null) matrix.f = o.y
- }
- }
-
- return this.attr('transform', matrix)
- }
-})
-
-SVG.extend(SVG.FX, {
- transform: function (o, relative) {
- // get target in case of the fx module, otherwise reference this
- var target = this.target()
- var matrix, bbox
-
- // act as a getter
- if (typeof o !== 'object') {
- // get current matrix
- matrix = new SVG.Matrix(target).extract()
- return typeof o === 'string' ? matrix[o] : matrix
- }
-
- // ensure relative flag
- relative = !!relative || !!o.relative
-
- // act on matrix
- if (o.a != null) {
- matrix = new SVG.Matrix(o)
-
- // act on rotation
- } else if (o.rotation != null) {
- // ensure centre point
- ensureCentre(o, target)
-
- // apply transformation
- matrix = new SVG.Rotate(o.rotation, o.cx, o.cy)
-
- // act on scale
- } else if (o.scale != null || o.scaleX != null || o.scaleY != null) {
- // ensure centre point
- ensureCentre(o, target)
-
- // ensure scale values on both axes
- o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1
- o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1
-
- matrix = new SVG.Scale(o.scaleX, o.scaleY, o.cx, o.cy)
-
- // act on skew
- } else if (o.skewX != null || o.skewY != null) {
- // ensure centre point
- ensureCentre(o, target)
-
- // ensure skew values on both axes
- o.skewX = o.skewX != null ? o.skewX : 0
- o.skewY = o.skewY != null ? o.skewY : 0
-
- matrix = new SVG.Skew(o.skewX, o.skewY, o.cx, o.cy)
-
- // act on flip
- } else if (o.flip) {
- if (o.flip === 'x' || o.flip === 'y') {
- o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset
- } else {
- if (o.offset == null) {
- bbox = target.bbox()
- o.flip = bbox.cx
- o.offset = bbox.cy
- } else {
- o.flip = o.offset
- }
- }
-
- matrix = new SVG.Matrix().flip(o.flip, o.offset)
-
- // act on translate
- } else if (o.x != null || o.y != null) {
- matrix = new SVG.Translate(o.x, o.y)
- }
-
- if (!matrix) return this
-
- matrix.relative = relative
-
- this.last().transforms.push(matrix)
-
- return this._callStart()
- }
-})
-
-SVG.extend(SVG.Element, {
- // Reset all transformations
- untransform: function () {
- return this.attr('transform', null)
- },
- // merge the whole transformation chain into one matrix and returns it
- matrixify: function () {
- var matrix = (this.attr('transform') || '')
- // split transformations
- .split(SVG.regex.transforms).slice(0, -1).map(function (str) {
- // generate key => value pairs
- var kv = str.trim().split('(')
- return [kv[0], kv[1].split(SVG.regex.delimiter).map(function (str) { return parseFloat(str) })]
- })
- // merge every transformation into one matrix
- .reduce(function (matrix, transform) {
- if (transform[0] === 'matrix') return matrix.multiply(arrayToMatrix(transform[1]))
- return matrix[transform[0]].apply(matrix, transform[1])
- }, new SVG.Matrix())
-
- return matrix
- },
- // add an element to another parent without changing the visual representation on the screen
- toParent: function (parent) {
- if (this === parent) return this
- var ctm = this.screenCTM()
- var pCtm = parent.screenCTM().inverse()
-
- this.addTo(parent).untransform().transform(pCtm.multiply(ctm))
-
- return this
- },
- // same as above with parent equals root-svg
- toDoc: function () {
- return this.toParent(this.doc())
- }
-
-})
-
-SVG.Transformation = SVG.invent({
-
- create: function (source, inversed) {
- if (arguments.length > 1 && typeof inversed !== 'boolean') {
- return this.constructor.bind(this)([].slice.call(arguments))
- }
-
- var i, len
- if (Array.isArray(source)) {
- for (i = 0, len = this.arguments.length; i < len; ++i) {
- this[this.arguments[i]] = source[i]
- }
- } else if (typeof source === 'object') {
- for (i = 0, len = this.arguments.length; i < len; ++i) {
- this[this.arguments[i]] = source[this.arguments[i]]
- }
- }
-
- this.inversed = false
-
- if (inversed === true) {
- this.inversed = true
- }
- },
-
- extend: {
-
- arguments: [],
- method: '',
-
- at: function (pos) {
- var params = []
-
- for (var i = 0, len = this.arguments.length; i < len; ++i) {
- params.push(this[this.arguments[i]])
- }
-
- var m = this._undo || new SVG.Matrix()
-
- m = new SVG.Matrix().morph(SVG.Matrix.prototype[this.method].apply(m, params)).at(pos)
-
- return this.inversed ? m.inverse() : m
- },
-
- undo: function (o) {
- for (var i = 0, len = this.arguments.length; i < len; ++i) {
- o[this.arguments[i]] = typeof this[this.arguments[i]] === 'undefined' ? 0 : o[this.arguments[i]]
- }
-
- // The method SVG.Matrix.extract which was used before calling this
- // method to obtain a value for the parameter o doesn't return a cx and
- // a cy so we use the ones that were provided to this object at its creation
- o.cx = this.cx
- o.cy = this.cy
-
- this._undo = new SVG[capitalize(this.method)](o, true).at(1)
- return this
- }
-
- }
-
-})
-
-SVG.Translate = SVG.invent({
-
- parent: SVG.Matrix,
- inherit: SVG.Transformation,
-
- create: function (source, inversed) {
- this.constructor.apply(this, [].slice.call(arguments))
- },
-
- extend: {
- arguments: ['transformedX', 'transformedY'],
- method: 'translate'
- }
-
-})
-
-SVG.Rotate = SVG.invent({
-
- parent: SVG.Matrix,
- inherit: SVG.Transformation,
-
- create: function (source, inversed) {
- this.constructor.apply(this, [].slice.call(arguments))
- },
-
- extend: {
- arguments: ['rotation', 'cx', 'cy'],
- method: 'rotate',
- at: function (pos) {
- var m = new SVG.Matrix().rotate(new SVG.Number().morph(this.rotation - (this._undo ? this._undo.rotation : 0)).at(pos), this.cx, this.cy)
- return this.inversed ? m.inverse() : m
- },
- undo: function (o) {
- this._undo = o
- return this
- }
- }
-
-})
-
-SVG.Scale = SVG.invent({
-
- parent: SVG.Matrix,
- inherit: SVG.Transformation,
-
- create: function (source, inversed) {
- this.constructor.apply(this, [].slice.call(arguments))
- },
-
- extend: {
- arguments: ['scaleX', 'scaleY', 'cx', 'cy'],
- method: 'scale'
- }
-
-})
-
-SVG.Skew = SVG.invent({
-
- parent: SVG.Matrix,
- inherit: SVG.Transformation,
-
- create: function (source, inversed) {
- this.constructor.apply(this, [].slice.call(arguments))
- },
-
- extend: {
- arguments: ['skewX', 'skewY', 'cx', 'cy'],
- method: 'skew'
- }
-})
- -/* global camelCase */
-
-SVG.extend(SVG.Element, {
- // Dynamic style generator
- css: function (s, v) {
- var ret = {}
- var t, i
- if (arguments.length === 0) {
- // get full style as object
- this.node.style.cssText.split(/\s*;\s*/).filter(function (el) { return !!el.length }).forEach(function (el) {
- t = el.split(/\s*:\s*/)
- ret[t[0]] = t[1]
- })
- return ret
- }
-
- if (arguments.length < 2) {
- // get style properties in the array
- if (Array.isArray(s)) {
- for (i = s.length; i--;) {
- ret[camelCase(s[i])] = this.node.style[camelCase(s[i])]
- }
- return ret
- }
-
- // get style for property
- if (typeof s === 'string') {
- return this.node.style[camelCase(s)]
- }
-
- // set styles in object
- if (typeof s === 'object') {
- for (i in s) {
- // set empty string if null/undefined/'' was given
- this.node.style[camelCase(i)] = (s[i] == null || SVG.regex.isBlank.test(s[i])) ? '' : s[i]
- }
- }
- }
-
- // set style for property
- if (arguments.length === 2) {
- this.node.style[camelCase(s)] = (v == null || SVG.regex.isBlank.test(v)) ? '' : v
- }
-
- return this
- }
-})
- -/* global createElement */
-
-SVG.Parent = SVG.invent({
- // Initialize node
- create: function (node) {
- this.constructor(node)
- },
-
- // Inherit from
- inherit: SVG.Element,
-
- // Add class methods
- extend: {
- // Returns all child elements
- children: function () {
- return SVG.utils.map(this.node.children, function (node) {
- return SVG.adopt(node)
- })
- },
- // Add given element at a position
- add: function (element, i) {
- element = createElement(element)
-
- if (element.node !== this.node.children[i]) {
- this.node.insertBefore(element.node, this.node.children[i] || null)
- }
-
- return this
- },
- // Basically does the same as `add()` but returns the added element instead
- put: function (element, i) {
- this.add(element, i)
- return element.instance || element
- },
- // Checks if the given element is a child
- has: function (element) {
- return this.index(element) >= 0
- },
- // Gets index of given element
- index: function (element) {
- return [].slice.call(this.node.children).indexOf(element.node)
- },
- // Get a element at the given index
- get: function (i) {
- return SVG.adopt(this.node.children[i])
- },
- // Get first child
- first: function () {
- return this.get(0)
- },
- // Get the last child
- last: function () {
- return this.get(this.node.children.length - 1)
- },
- // Iterates over all children and invokes a given block
- each: function (block, deep) {
- var children = this.children()
- var i, il
-
- for (i = 0, il = children.length; i < il; i++) {
- if (children[i] instanceof SVG.Element) {
- block.apply(children[i], [i, children])
- }
-
- if (deep && (children[i] instanceof SVG.Parent)) {
- children[i].each(block, deep)
- }
- }
-
- return this
- },
- // Remove a given child
- removeElement: function (element) {
- this.node.removeChild(element.node)
-
- return this
- },
- // Remove all elements in this container
- clear: function () {
- // remove children
- while (this.node.hasChildNodes()) {
- this.node.removeChild(this.node.lastChild)
- }
-
- // remove defs reference
- delete this._defs
-
- return this
- }
- }
-
-})
- -SVG.extend(SVG.Parent, {
- flatten: function (parent) {
- // flattens is only possible for nested svgs and groups
- if (!(this instanceof SVG.G || this instanceof SVG.Doc)) {
- return this
- }
-
- parent = parent || (this instanceof SVG.Doc && this.isRoot() ? this : this.parent(SVG.Parent))
-
- this.each(function () {
- if (this instanceof SVG.Defs) return this
- if (this instanceof SVG.Parent) return this.flatten(parent)
- return this.toParent(parent)
- })
-
- // we need this so that SVG.Doc does not get removed
- this.node.firstElementChild || this.remove()
-
- return this
- },
- ungroup: function (parent) {
- // ungroup is only possible for nested svgs and groups
- if (!(this instanceof SVG.G || (this instanceof SVG.Doc && !this.isRoot()))) {
- return this
- }
-
- parent = parent || this.parent(SVG.Parent)
-
- this.each(function () {
- return this.toParent(parent)
- })
-
- // we need this so that SVG.Doc does not get removed
- this.remove()
-
- return this
- }
-})
- -SVG.Container = SVG.invent({
- // Initialize node
- create: function (node) {
- this.constructor(node)
- },
-
- // Inherit from
- inherit: SVG.Parent
-})
- -// Add events to elements
-
-;[ 'click',
- 'dblclick',
- 'mousedown',
- 'mouseup',
- 'mouseover',
- 'mouseout',
- 'mousemove',
- 'mouseenter',
- 'mouseleave',
- 'touchstart',
- 'touchmove',
- 'touchleave',
- 'touchend',
- 'touchcancel' ].forEach(function (event) {
- // add event to SVG.Element
- SVG.Element.prototype[event] = function (f) {
- // bind event to element rather than element node
- SVG.on(this, event, f)
- return this
- }
- })
-
-SVG.listenerId = 0
-
-// Add event binder in the SVG namespace
-SVG.on = function (node, events, listener, binding, options) {
- var l = listener.bind(binding || node)
- var n = node instanceof SVG.Element ? node.node : node
-
- // ensure instance object for nodes which are not adopted
- n.instance = n.instance || {events: {}}
-
- var bag = n.instance.events
-
- // add id to listener
- if (!listener._svgjsListenerId) { listener._svgjsListenerId = ++SVG.listenerId }
-
- events.split(SVG.regex.delimiter).forEach(function (event) {
- var ev = event.split('.')[0]
- var ns = event.split('.')[1] || '*'
-
- // ensure valid object
- bag[ev] = bag[ev] || {}
- bag[ev][ns] = bag[ev][ns] || {}
-
- // reference listener
- bag[ev][ns][listener._svgjsListenerId] = l
-
- // add listener
- n.addEventListener(ev, l, options || false)
- })
-}
-
-// Add event unbinder in the SVG namespace
-SVG.off = function (node, events, listener, options) {
- var n = node instanceof SVG.Element ? node.node : node
- if (!n.instance) return
-
- // listener can be a function or a number
- if (typeof listener === 'function') {
- listener = listener._svgjsListenerId
- if (!listener) return
- }
-
- var bag = n.instance.events
-
- ;(events || '').split(SVG.regex.delimiter).forEach(function (event) {
- var ev = event && event.split('.')[0]
- var ns = event && event.split('.')[1]
- var namespace, l
-
- if (listener) {
- // remove listener reference
- if (bag[ev] && bag[ev][ns || '*']) {
- // removeListener
- n.removeEventListener(ev, bag[ev][ns || '*'][listener], options || false)
-
- delete bag[ev][ns || '*'][listener]
- }
- } else if (ev && ns) {
- // remove all listeners for a namespaced event
- if (bag[ev] && bag[ev][ns]) {
- for (l in bag[ev][ns]) { SVG.off(n, [ev, ns].join('.'), l) }
-
- delete bag[ev][ns]
- }
- } else if (ns) {
- // remove all listeners for a specific namespace
- for (event in bag) {
- for (namespace in bag[event]) {
- if (ns === namespace) { SVG.off(n, [event, ns].join('.')) }
- }
- }
- } else if (ev) {
- // remove all listeners for the event
- if (bag[ev]) {
- for (namespace in bag[ev]) { SVG.off(n, [ev, namespace].join('.')) }
-
- delete bag[ev]
- }
- } else {
- // remove all listeners on a given node
- for (event in bag) { SVG.off(n, event) }
-
- n.instance.events = {}
- }
- })
-}
-
-SVG.extend(SVG.Element, {
- // Bind given event to listener
- on: function (event, listener, binding, options) {
- SVG.on(this, event, listener, binding, options)
- return this
- },
- // Unbind event from listener
- off: function (event, listener) {
- SVG.off(this.node, event, listener)
- return this
- },
- dispatch: function (event, data) {
- // Dispatch event
- if (event instanceof window.Event) {
- this.node.dispatchEvent(event)
- } else {
- this.node.dispatchEvent(event = new window.CustomEvent(event, {detail: data, cancelable: true}))
- }
- return event
- },
- // Fire given event
- fire: function (event, data) {
- this.dispatch(event, data)
- return this
- }
-})
- -SVG.Defs = SVG.invent({
- // Initialize node
- create: 'defs',
-
- // Inherit from
- inherit: SVG.Container
-})
- -SVG.G = SVG.invent({
- // Initialize node
- create: 'g',
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Move over x-axis
- x: function (x) {
- return x == null ? this.transform('x') : this.transform({ x: x - this.x() }, true)
- },
- // Move over y-axis
- y: function (y) {
- return y == null ? this.transform('y') : this.transform({ y: y - this.y() }, true)
- },
- // Move by center over x-axis
- cx: function (x) {
- return x == null ? this.gbox().cx : this.x(x - this.gbox().width / 2)
- },
- // Move by center over y-axis
- cy: function (y) {
- return y == null ? this.gbox().cy : this.y(y - this.gbox().height / 2)
- },
- gbox: function () {
- var bbox = this.bbox()
- var trans = this.transform()
-
- bbox.x += trans.x
- bbox.x2 += trans.x
- bbox.cx += trans.x
-
- bbox.y += trans.y
- bbox.y2 += trans.y
- bbox.cy += trans.y
-
- return bbox
- }
- },
-
- // Add parent method
- construct: {
- // Create a group element
- group: function () {
- return this.put(new SVG.G())
- }
- }
-})
- -// ### This module adds backward / forward functionality to elements.
-
-//
-SVG.extend(SVG.Element, {
- // Get all siblings, including myself
- siblings: function () {
- return this.parent().children()
- },
-
- // Get the curent position siblings
- position: function () {
- return this.parent().index(this)
- },
-
- // Get the next element (will return null if there is none)
- next: function () {
- return this.siblings()[this.position() + 1]
- },
-
- // Get the next element (will return null if there is none)
- prev: function () {
- return this.siblings()[this.position() - 1]
- },
-
- // Send given element one step forward
- forward: function () {
- var i = this.position() + 1
- var p = this.parent()
-
- // move node one step forward
- p.removeElement(this).add(this, i)
-
- // make sure defs node is always at the top
- if (p instanceof SVG.Doc) {
- p.node.appendChild(p.defs().node)
- }
-
- return this
- },
-
- // Send given element one step backward
- backward: function () {
- var i = this.position()
-
- if (i > 0) {
- this.parent().removeElement(this).add(this, i - 1)
- }
-
- return this
- },
-
- // Send given element all the way to the front
- front: function () {
- var p = this.parent()
-
- // Move node forward
- p.node.appendChild(this.node)
-
- // Make sure defs node is always at the top
- if (p instanceof SVG.Doc) {
- p.node.appendChild(p.defs().node)
- }
-
- return this
- },
-
- // Send given element all the way to the back
- back: function () {
- if (this.position() > 0) {
- this.parent().removeElement(this).add(this, 0)
- }
-
- return this
- },
-
- // Inserts a given element before the targeted element
- before: function (element) {
- element.remove()
-
- var i = this.position()
-
- this.parent().add(element, i)
-
- return this
- },
-
- // Insters a given element after the targeted element
- after: function (element) {
- element.remove()
-
- var i = this.position()
-
- this.parent().add(element, i + 1)
-
- return this
- }
-})
- -SVG.Mask = SVG.invent({
- // Initialize node
- create: 'mask',
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Unmask all masked elements and remove itself
- remove: function () {
- // unmask all targets
- this.targets().forEach(function (el) {
- el.unmask()
- })
-
- // remove mask from parent
- return SVG.Element.prototype.remove.call(this)
- },
-
- targets: function () {
- return SVG.select('svg [mask*="' + this.id() + '"]')
- }
- },
-
- // Add parent method
- construct: {
- // Create masking element
- mask: function () {
- return this.defs().put(new SVG.Mask())
- }
- }
-})
-
-SVG.extend(SVG.Element, {
- // Distribute mask to svg element
- maskWith: function (element) {
- // 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.id() + '")')
- },
- // Unmask element
- unmask: function () {
- return this.attr('mask', null)
- },
- masker: function () {
- return this.reference('mask')
- }
-})
- -SVG.ClipPath = SVG.invent({
- // Initialize node
- create: 'clipPath',
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Unclip all clipped elements and remove itself
- remove: function () {
- // unclip all targets
- this.targets().forEach(function (el) {
- el.unclip()
- })
-
- // remove clipPath from parent
- return SVG.Element.prototype.remove.call(this)
- },
-
- targets: function () {
- return SVG.select('svg [clip-path*="' + this.id() + '"]')
- }
- },
-
- // Add parent method
- construct: {
- // Create clipping element
- clip: function () {
- return this.defs().put(new SVG.ClipPath())
- }
- }
-})
-
-//
-SVG.extend(SVG.Element, {
- // Distribute clipPath to svg element
- clipWith: function (element) {
- // use given clip or create a new one
- var clipper = element instanceof SVG.ClipPath ? element : this.parent().clip().add(element)
-
- // apply mask
- return this.attr('clip-path', 'url("#' + clipper.id() + '")')
- },
- // Unclip element
- unclip: function () {
- return this.attr('clip-path', null)
- },
- clipper: function () {
- return this.reference('clip-path')
- }
-
-})
- -SVG.Gradient = SVG.invent({
- // Initialize node
- create: function (type) {
- this.constructor(typeof type === 'object' ? type : SVG.create(type + 'Gradient'))
- },
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Add a color stop
- stop: function (offset, color, opacity) {
- return this.put(new SVG.Stop()).update(offset, color, opacity)
- },
- // Update gradient
- update: function (block) {
- // remove all stops
- this.clear()
-
- // invoke passed block
- if (typeof block === 'function') {
- block.call(this, this)
- }
-
- return this
- },
- // Return the fill id
- url: function () {
- return 'url(#' + this.id() + ')'
- },
- // Alias string convertion to fill
- toString: function () {
- return this.url()
- },
- // custom attr to handle transform
- attr: function (a, b, c) {
- if (a === 'transform') a = 'gradientTransform'
- return SVG.Container.prototype.attr.call(this, a, b, c)
- }
- },
-
- // Add parent method
- construct: {
- // Create gradient element in defs
- gradient: function (type, block) {
- return this.defs().gradient(type, block)
- }
- }
-})
-
-// Add animatable methods to both gradient and fx module
-SVG.extend([SVG.Gradient, SVG.FX], {
- // From position
- from: function (x, y) {
- 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 === '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) })
- }
-})
-
-// Base gradient generation
-SVG.extend(SVG.Defs, {
- // define gradient
- gradient: function (type, block) {
- return this.put(new SVG.Gradient(type)).update(block)
- }
-
-})
-
-SVG.Stop = SVG.invent({
- // Initialize node
- create: 'stop',
-
- // Inherit from
- inherit: SVG.Element,
-
- // Add class methods
- extend: {
- // add color stops
- update: function (o) {
- if (typeof o === 'number' || o instanceof SVG.Number) {
- o = {
- offset: arguments[0],
- color: arguments[1],
- opacity: arguments[2]
- }
- }
-
- // set attributes
- if (o.opacity != null) this.attr('stop-opacity', o.opacity)
- if (o.color != null) this.attr('stop-color', o.color)
- if (o.offset != null) this.attr('offset', new SVG.Number(o.offset))
-
- return this
- }
- }
-
-})
- -SVG.Pattern = SVG.invent({
- // Initialize node
- create: 'pattern',
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Return the fill id
- url: function () {
- return 'url(#' + this.id() + ')'
- },
- // Update pattern by rebuilding
- update: function (block) {
- // remove content
- this.clear()
-
- // invoke passed block
- if (typeof block === 'function') {
- block.call(this, this)
- }
-
- return this
- },
- // Alias string convertion to fill
- toString: function () {
- return this.url()
- },
- // custom attr to handle transform
- attr: function (a, b, c) {
- if (a === 'transform') a = 'patternTransform'
- return SVG.Container.prototype.attr.call(this, a, b, c)
- }
-
- },
-
- // Add parent method
- construct: {
- // Create pattern element in defs
- pattern: function (width, height, block) {
- return this.defs().pattern(width, height, block)
- }
- }
-})
-
-SVG.extend(SVG.Defs, {
- // Define gradient
- pattern: function (width, height, block) {
- return this.put(new SVG.Pattern()).update(block).attr({
- x: 0,
- y: 0,
- width: width,
- height: height,
- patternUnits: 'userSpaceOnUse'
- })
- }
-
-})
- -SVG.Doc = SVG.invent({
- // Initialize node
- create: function (node) {
- this.constructor(node || SVG.create('svg'))
-
- // set svg element attributes and ensure defs node
- this.namespace()
- },
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- isRoot: function () {
- return !this.node.parentNode || !(this.node.parentNode instanceof window.SVGElement) || this.node.parentNode.nodeName === '#document'
- },
- // Check if this is a root svg. If not, call docs from this element
- doc: function () {
- if (this.isRoot()) return this
- return SVG.Element.prototype.doc.call(this)
- },
- // Add namespaces
- namespace: function () {
- if (!this.isRoot()) return this.doc().namespace()
- return this
- .attr({ xmlns: SVG.ns, version: '1.1' })
- .attr('xmlns:xlink', SVG.xlink, SVG.xmlns)
- .attr('xmlns:svgjs', SVG.svgjs, SVG.xmlns)
- },
- // Creates and returns defs element
- defs: function () {
- if (!this.isRoot()) return this.doc().defs()
- return SVG.adopt(this.node.getElementsByTagName('defs')[0]) || this.put(new SVG.Defs())
- },
- // custom parent method
- parent: function (type) {
- if (this.isRoot()) {
- return this.node.parentNode.nodeName === '#document' ? null : this.node.parentNode
- }
-
- return SVG.Element.prototype.parent.call(this, type)
- },
- // Removes the doc from the DOM
- remove: function () {
- if (!this.isRoot()) {
- return SVG.Element.prototype.remove.call(this)
- }
-
- if (this.parent()) {
- this.parent().removeChild(this.node)
- }
-
- return this
- },
- clear: function () {
- // remove children
- while (this.node.hasChildNodes()) {
- this.node.removeChild(this.node.lastChild)
- }
- return this
- }
- },
- construct: {
- // Create nested svg document
- nested: function () {
- return this.put(new SVG.Doc())
- }
- }
-})
- -
-SVG.Shape = SVG.invent({
- // Initialize node
- create: function (node) {
- this.constructor(node)
- },
-
- // Inherit from
- inherit: SVG.Element
-})
- -
-SVG.Bare = SVG.invent({
- // Initialize
- create: function (element, inherit) {
- // construct element
- this.constructor(SVG.create(element))
-
- // inherit custom methods
- if (inherit) {
- for (var method in inherit.prototype) {
- if (typeof inherit.prototype[method] === 'function') {
- this[method] = inherit.prototype[method]
- }
- }
- }
- },
-
- // Inherit from
- inherit: SVG.Element,
-
- // Add methods
- extend: {
- // Insert some plain text
- words: function (text) {
- // remove contents
- while (this.node.hasChildNodes()) {
- this.node.removeChild(this.node.lastChild)
- }
-
- // create text node
- this.node.appendChild(document.createTextNode(text))
-
- return this
- }
- }
-})
-
-SVG.extend(SVG.Parent, {
- // Create an element that is not described by SVG.js
- element: function (element, inherit) {
- return this.put(new SVG.Bare(element, inherit))
- }
-})
- -
-SVG.Symbol = SVG.invent({
- // Initialize node
- create: 'symbol',
-
- // Inherit from
- inherit: SVG.Container,
-
- construct: {
- // create symbol
- symbol: function () {
- return this.put(new SVG.Symbol())
- }
- }
-})
- -
-SVG.Use = SVG.invent({
- // Initialize node
- create: 'use',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add class methods
- extend: {
- // Use element as a reference
- element: function (element, file) {
- // Set lined element
- return this.attr('href', (file || '') + '#' + element, SVG.xlink)
- }
- },
-
- // Add parent method
- construct: {
- // Create a use element
- use: function (element, file) {
- return this.put(new SVG.Use()).element(element, file)
- }
- }
-})
- -
-SVG.Rect = SVG.invent({
- // Initialize node
- create: 'rect',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add parent method
- construct: {
- // Create a rect element
- rect: function (width, height) {
- return this.put(new SVG.Rect()).size(width, height)
- }
- }
-})
- -/* global proportionalSize */
-
-SVG.Circle = SVG.invent({
- // Initialize node
- create: 'circle',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add parent method
- construct: {
- // Create circle element, based on ellipse
- circle: function (size) {
- return this.put(new SVG.Circle()).rx(new SVG.Number(size).divide(2)).move(0, 0)
- }
- }
-})
-
-SVG.extend([SVG.Circle, SVG.FX], {
- // Radius x value
- rx: function (rx) {
- return this.attr('r', rx)
- },
- // Alias radius x value
- ry: function (ry) {
- return this.rx(ry)
- }
-})
-
-SVG.Ellipse = SVG.invent({
- // Initialize node
- create: 'ellipse',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add parent method
- construct: {
- // Create an ellipse
- ellipse: function (width, height) {
- return this.put(new SVG.Ellipse()).size(width, height).move(0, 0)
- }
- }
-})
-
-SVG.extend([SVG.Ellipse, SVG.Rect, SVG.FX], {
- // Radius x value
- rx: function (rx) {
- return this.attr('rx', rx)
- },
- // Radius y value
- ry: function (ry) {
- return this.attr('ry', ry)
- }
-})
-
-// Add common method
-SVG.extend([SVG.Circle, SVG.Ellipse], {
- // Move over x-axis
- x: function (x) {
- return x == null ? this.cx() - this.rx() : this.cx(x + this.rx())
- },
- // Move over y-axis
- y: function (y) {
- return y == null ? this.cy() - this.ry() : this.cy(y + this.ry())
- },
- // Move by center over x-axis
- cx: function (x) {
- return x == null ? this.attr('cx') : this.attr('cx', x)
- },
- // Move by center over y-axis
- cy: function (y) {
- return y == null ? this.attr('cy') : this.attr('cy', y)
- },
- // Set width of element
- width: function (width) {
- return width == null ? this.rx() * 2 : this.rx(new SVG.Number(width).divide(2))
- },
- // Set height of element
- height: function (height) {
- return height == null ? this.ry() * 2 : this.ry(new SVG.Number(height).divide(2))
- },
- // Custom size function
- size: function (width, height) {
- var p = proportionalSize(this, width, height)
-
- return this
- .rx(new SVG.Number(p.width).divide(2))
- .ry(new SVG.Number(p.height).divide(2))
- }
-})
- -/* global proportionalSize */
-
-SVG.Line = SVG.invent({
- // Initialize node
- create: 'line',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add class methods
- extend: {
- // Get array
- array: function () {
- return new SVG.PointArray([
- [ this.attr('x1'), this.attr('y1') ],
- [ this.attr('x2'), this.attr('y2') ]
- ])
- },
- // Overwrite native plot() method
- plot: function (x1, y1, x2, y2) {
- if (x1 == null) {
- return this.array()
- } else if (typeof y1 !== 'undefined') {
- x1 = { x1: x1, y1: y1, x2: x2, y2: y2 }
- } else {
- x1 = new SVG.PointArray(x1).toLine()
- }
-
- return this.attr(x1)
- },
- // Move by left top corner
- move: function (x, y) {
- return this.attr(this.array().move(x, y).toLine())
- },
- // Set element size to given width and height
- size: function (width, height) {
- var p = proportionalSize(this, width, height)
- return this.attr(this.array().size(p.width, p.height).toLine())
- }
- },
-
- // Add parent method
- construct: {
- // Create a line element
- line: function (x1, y1, x2, y2) {
- // make sure plot is called as a setter
- // x1 is not necessarily a number, it can also be an array, a string and a SVG.PointArray
- return SVG.Line.prototype.plot.apply(
- this.put(new SVG.Line())
- , x1 != null ? [x1, y1, x2, y2] : [0, 0, 0, 0]
- )
- }
- }
-})
- -/* global proportionalSize */
-
-SVG.Polyline = SVG.invent({
- // Initialize node
- create: 'polyline',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add parent method
- construct: {
- // Create a wrapped polyline element
- polyline: function (p) {
- // make sure plot is called as a setter
- return this.put(new SVG.Polyline()).plot(p || new SVG.PointArray())
- }
- }
-})
-
-SVG.Polygon = SVG.invent({
- // Initialize node
- create: 'polygon',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add parent method
- construct: {
- // Create a wrapped polygon element
- polygon: function (p) {
- // make sure plot is called as a setter
- return this.put(new SVG.Polygon()).plot(p || new SVG.PointArray())
- }
- }
-})
-
-// Add polygon-specific functions
-SVG.extend([SVG.Polyline, SVG.Polygon], {
- // Get array
- array: function () {
- return this._array || (this._array = new SVG.PointArray(this.attr('points')))
- },
-
- // Plot new path
- plot: function (p) {
- return (p == null) ? this.array()
- : this.clear().attr('points', typeof p === 'string' ? p
- : (this._array = new SVG.PointArray(p)))
- },
-
- // Clear array cache
- clear: function () {
- delete this._array
- return this
- },
-
- // Move by left top corner
- move: function (x, y) {
- return this.attr('points', this.array().move(x, y))
- },
-
- // Set element size to given width and height
- size: function (width, height) {
- var p = proportionalSize(this, width, height)
- return this.attr('points', this.array().size(p.width, p.height))
- }
-})
- -// unify all point to point elements
-SVG.extend([SVG.Line, SVG.Polyline, SVG.Polygon], {
- // Define morphable array
- MorphArray: SVG.PointArray,
- // Move by left top corner over x-axis
- x: function (x) {
- return x == null ? this.bbox().x : this.move(x, this.bbox().y)
- },
- // Move by left top corner over y-axis
- y: function (y) {
- return y == null ? this.bbox().y : this.move(this.bbox().x, y)
- },
- // Set width of element
- width: function (width) {
- var b = this.bbox()
-
- return width == null ? b.width : this.size(width, b.height)
- },
- // Set height of element
- height: function (height) {
- var b = this.bbox()
-
- return height == null ? b.height : this.size(b.width, height)
- }
-})
- -/* global proportionalSize */
-
-SVG.Path = SVG.invent({
- // Initialize node
- create: 'path',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add class methods
- extend: {
- // Define morphable array
- MorphArray: SVG.PathArray,
- // Get array
- array: function () {
- return this._array || (this._array = new SVG.PathArray(this.attr('d')))
- },
- // Plot new path
- plot: function (d) {
- return (d == null) ? this.array()
- : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new SVG.PathArray(d)))
- },
- // Clear array cache
- clear: function () {
- delete this._array
- return this
- },
- // Move by left top corner
- move: function (x, y) {
- return this.attr('d', this.array().move(x, y))
- },
- // Move by left top corner over x-axis
- x: function (x) {
- return x == null ? this.bbox().x : this.move(x, this.bbox().y)
- },
- // Move by left top corner over y-axis
- y: function (y) {
- return y == null ? this.bbox().y : this.move(this.bbox().x, y)
- },
- // Set element size to given width and height
- size: function (width, height) {
- var p = proportionalSize(this, width, height)
- return this.attr('d', this.array().size(p.width, p.height))
- },
- // Set width of element
- width: function (width) {
- return width == null ? this.bbox().width : this.size(width, this.bbox().height)
- },
- // Set height of element
- height: function (height) {
- return height == null ? this.bbox().height : this.size(this.bbox().width, height)
- }
- },
-
- // Add parent method
- construct: {
- // Create a wrapped path element
- path: function (d) {
- // make sure plot is called as a setter
- return this.put(new SVG.Path()).plot(d || new SVG.PathArray())
- }
- }
-})
- -SVG.Image = SVG.invent({
- // Initialize node
- create: 'image',
-
- // Inherit from
- inherit: SVG.Shape,
-
- // Add class methods
- extend: {
- // (re)load image
- load: function (url, callback) {
- if (!url) return this
-
- var img = new window.Image()
-
- SVG.on(img, 'load', function (e) {
- var p = this.parent(SVG.Pattern)
-
- // ensure image size
- if (this.width() === 0 && this.height() === 0) {
- this.size(img.width, img.height)
- }
-
- if (p instanceof SVG.Pattern) {
- // ensure pattern size if not set
- if (p.width() === 0 && p.height() === 0) {
- p.size(this.width(), this.height())
- }
- }
-
- if (typeof callback === 'function') {
- callback.call(this, {
- width: img.width,
- height: img.height,
- ratio: img.width / img.height,
- url: url
- })
- }
- }, this)
-
- SVG.on(img, 'load error', function () {
- // dont forget to unbind memory leaking events
- SVG.off(img)
- })
-
- return this.attr('href', (img.src = url), SVG.xlink)
- }
- },
-
- // Add parent method
- construct: {
- // create image element, load image and set its size
- image: function (source, callback) {
- return this.put(new SVG.Image()).size(0, 0).load(source, callback)
- }
- }
-})
- -SVG.Text = SVG.invent({
- // Initialize node
- create: function (node) {
- this.constructor(node || SVG.create('text'))
- this.dom.leading = new SVG.Number(1.3) // store leading value for rebuilding
- this._rebuild = true // enable automatic updating of dy values
- this._build = false // disable build mode for adding multiple lines
-
- // set default font
- this.attr('font-family', SVG.defaults.attrs['font-family'])
- },
-
- // Inherit from
- inherit: SVG.Parent,
-
- // Add class methods
- extend: {
- // Move over x-axis
- x: function (x) {
- // act as getter
- if (x == null) {
- return this.attr('x')
- }
-
- return this.attr('x', x)
- },
- // Move over y-axis
- y: function (y) {
- var oy = this.attr('y')
- var o = typeof oy === 'number' ? oy - this.bbox().y : 0
-
- // act as getter
- if (y == null) {
- return typeof oy === 'number' ? oy - o : oy
- }
-
- return this.attr('y', typeof y === 'number' ? y + o : y)
- },
- // Move center over x-axis
- cx: function (x) {
- return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2)
- },
- // Move center over y-axis
- cy: function (y) {
- return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2)
- },
- // Set the text content
- text: function (text) {
- // act as getter
- if (text === undefined) {
- var children = this.node.childNodes
- var firstLine = 0
- text = ''
-
- for (var i = 0, len = children.length; i < len; ++i) {
- // skip textPaths - they are no lines
- if (children[i].nodeName === 'textPath') {
- if (i === 0) firstLine = 1
- continue
- }
-
- // add newline if its not the first child and newLined is set to true
- if (i !== firstLine && children[i].nodeType !== 3 && SVG.adopt(children[i]).dom.newLined === true) {
- text += '\n'
- }
-
- // add content of this node
- text += children[i].textContent
- }
-
- return text
- }
-
- // remove existing content
- this.clear().build(true)
-
- if (typeof text === 'function') {
- // call block
- text.call(this, this)
- } else {
- // store text and make sure text is not blank
- text = text.split('\n')
-
- // build new lines
- for (var j = 0, jl = text.length; j < jl; j++) {
- this.tspan(text[j]).newLine()
- }
- }
-
- // disable build mode and rebuild lines
- return this.build(false).rebuild()
- },
- // Set / get leading
- leading: function (value) {
- // act as getter
- if (value == null) {
- return this.dom.leading
- }
-
- // act as setter
- this.dom.leading = new SVG.Number(value)
-
- return this.rebuild()
- },
- // Rebuild appearance type
- rebuild: function (rebuild) {
- // store new rebuild flag if given
- if (typeof rebuild === 'boolean') {
- this._rebuild = rebuild
- }
-
- // define position of all lines
- if (this._rebuild) {
- var self = this
- var blankLineOffset = 0
- var dy = this.dom.leading * new SVG.Number(this.attr('font-size'))
-
- this.each(function () {
- if (this.dom.newLined) {
- this.attr('x', self.attr('x'))
-
- if (this.text() === '\n') {
- blankLineOffset += dy
- } else {
- this.attr('dy', dy + blankLineOffset)
- blankLineOffset = 0
- }
- }
- })
-
- this.fire('rebuild')
- }
-
- return this
- },
- // Enable / disable build mode
- build: function (build) {
- this._build = !!build
- return this
- },
- // overwrite method from parent to set data properly
- setData: function (o) {
- this.dom = o
- this.dom.leading = new SVG.Number(o.leading || 1.3)
- return this
- }
- },
-
- // Add parent method
- construct: {
- // Create text element
- text: function (text) {
- return this.put(new SVG.Text()).text(text)
- },
- // Create plain text element
- plain: function (text) {
- return this.put(new SVG.Text()).plain(text)
- }
- }
-
-})
-
-SVG.Tspan = SVG.invent({
- // Initialize node
- create: 'tspan',
-
- // Inherit from
- inherit: SVG.Parent,
-
- // Add class methods
- extend: {
- // Set text content
- text: function (text) {
- if (text == null) return this.node.textContent + (this.dom.newLined ? '\n' : '')
-
- typeof text === 'function' ? text.call(this, this) : this.plain(text)
-
- return this
- },
- // Shortcut dx
- dx: function (dx) {
- return this.attr('dx', dx)
- },
- // Shortcut dy
- dy: function (dy) {
- return this.attr('dy', dy)
- },
- // Create new line
- newLine: function () {
- // fetch text parent
- var t = this.parent(SVG.Text)
-
- // mark new line
- this.dom.newLined = true
-
- // apply new position
- return this.dy(t.dom.leading * t.attr('font-size')).attr('x', t.x())
- }
- }
-})
-
-SVG.extend([SVG.Text, SVG.Tspan], {
- // Create plain text node
- plain: function (text) {
- // clear if build mode is disabled
- if (this._build === false) {
- this.clear()
- }
-
- // create text node
- this.node.appendChild(document.createTextNode(text))
-
- return this
- },
- // Create a tspan
- tspan: function (text) {
- var tspan = new SVG.Tspan()
-
- // clear if build mode is disabled
- if (!this._build) {
- this.clear()
- }
-
- // add new tspan
- this.node.appendChild(tspan.node)
-
- return tspan.text(text)
- },
- // FIXME: Does this also work for textpath?
- // Get length of text element
- length: function () {
- return this.node.getComputedTextLength()
- }
-})
- -SVG.TextPath = SVG.invent({
- // Initialize node
- create: 'textPath',
-
- // Inherit from
- inherit: SVG.Text,
-
- // Define parent class
- parent: SVG.Parent,
-
- // Add parent method
- extend: {
- MorphArray: SVG.PathArray,
- // return the array of the path track element
- array: function () {
- var track = this.track()
-
- return track ? track.array() : null
- },
- // Plot path if any
- plot: function (d) {
- var track = this.track()
- var pathArray = null
-
- if (track) {
- pathArray = track.plot(d)
- }
-
- return (d == null) ? pathArray : this
- },
- // Get the path element
- track: function () {
- return this.reference('href')
- }
- },
- construct: {
- textPath: function (text, path) {
- return this.defs().path(path).text(text).addTo(this)
- }
- }
-})
-
-SVG.extend([SVG.Text], {
- // Create path for text to run on
- path: function (track) {
- var path = new SVG.TextPath()
-
- // if d is a path, reuse it
- if (!(track instanceof SVG.Path)) {
- // create path element
- track = this.doc().defs().path(track)
- }
-
- // link textPath to path and add content
- path.attr('href', '#' + track, SVG.xlink)
-
- // add textPath element as child node and return textPath
- return this.put(path)
- },
- // Todo: make this plural?
- // Get the textPath children
- textPath: function () {
- return this.select('textPath')
- }
-})
-
-SVG.extend([SVG.Path], {
- // creates a textPath from this path
- text: function (text) {
- if (text instanceof SVG.Text) {
- var txt = text.text()
- return text.clear().path(this).text(txt)
- }
- return this.parent().put(new SVG.Text()).path(this).text(text)
- }
- // TODO: Maybe add `targets` to get all textPaths associated with this path
-})
- -SVG.A = SVG.invent({
- // Initialize node
- create: 'a',
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Link url
- to: function (url) {
- return this.attr('href', url, SVG.xlink)
- },
- // Link target attribute
- target: function (target) {
- return this.attr('target', target)
- }
- },
-
- // Add parent method
- construct: {
- // Create a hyperlink element
- link: function (url) {
- return this.put(new SVG.A()).to(url)
- }
- }
-})
-
-SVG.extend(SVG.Element, {
- // Create a hyperlink element
- linkTo: function (url) {
- var link = new SVG.A()
-
- if (typeof url === 'function') { url.call(link, link) } else {
- link.to(url)
- }
-
- return this.parent().put(link).put(this)
- }
-
-})
- -SVG.Marker = SVG.invent({
- // Initialize node
- create: 'marker',
-
- // Inherit from
- inherit: SVG.Container,
-
- // Add class methods
- extend: {
- // Set width of element
- width: function (width) {
- return this.attr('markerWidth', width)
- },
- // Set height of element
- height: function (height) {
- return this.attr('markerHeight', height)
- },
- // Set marker refX and refY
- ref: function (x, y) {
- return this.attr('refX', x).attr('refY', y)
- },
- // Update marker
- update: function (block) {
- // remove all content
- this.clear()
-
- // invoke passed block
- if (typeof block === 'function') { block.call(this, this) }
-
- return this
- },
- // Return the fill id
- toString: function () {
- return 'url(#' + this.id() + ')'
- }
- },
-
- // Add parent method
- construct: {
- marker: function (width, height, block) {
- // Create marker element in defs
- return this.defs().marker(width, height, block)
- }
- }
-
-})
-
-SVG.extend(SVG.Defs, {
- // Create marker
- marker: function (width, height, block) {
- // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto
- return this.put(new SVG.Marker())
- .size(width, height)
- .ref(width / 2, height / 2)
- .viewbox(0, 0, width, height)
- .attr('orient', 'auto')
- .update(block)
- }
-
-})
-
-SVG.extend([SVG.Line, SVG.Polyline, SVG.Polygon, SVG.Path], {
- // Create and attach markers
- marker: function (marker, width, height, block) {
- var attr = ['marker']
-
- // Build attribute name
- if (marker !== 'all') attr.push(marker)
- attr = attr.join('-')
-
- // Set marker attribute
- marker = arguments[1] instanceof SVG.Marker
- ? arguments[1]
- : this.doc().marker(width, height, block)
-
- return this.attr(attr, marker)
- }
-})
- -// Define list of available attributes for stroke and fill
-var sugar = {
- stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'],
- fill: ['color', 'opacity', 'rule'],
- prefix: function (t, a) {
- return a === 'color' ? t : t + '-' + a
- }
-}
-
-// Add sugar for fill and stroke
-;['fill', 'stroke'].forEach(function (m) {
- var extension = {}
- var i
-
- extension[m] = function (o) {
- if (typeof o === 'undefined') {
- return this
- }
- if (typeof o === 'string' || SVG.Color.isRgb(o) || (o && typeof o.fill === 'function')) {
- this.attr(m, o)
- } else {
- // set all attributes from sugar.fill and sugar.stroke list
- for (i = sugar[m].length - 1; i >= 0; i--) {
- if (o[sugar[m][i]] != null) {
- this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]])
- }
- }
- }
-
- return this
- }
-
- SVG.extend([SVG.Element, SVG.FX], extension)
-})
-
-SVG.extend([SVG.Element, SVG.FX], {
- // Map rotation to transform
- rotate: function (d, cx, cy) {
- return this.transform({ rotation: d, cx: cx, cy: cy })
- },
- // Map skew to transform
- skew: function (x, y, cx, cy) {
- return arguments.length === 1 || arguments.length === 3
- ? this.transform({ skew: x, cx: y, cy: cx })
- : this.transform({ skewX: x, skewY: y, cx: cx, cy: cy })
- },
- // Map scale to transform
- scale: function (x, y, cx, cy) {
- return arguments.length === 1 || arguments.length === 3
- ? this.transform({ scale: x, cx: y, cy: cx })
- : this.transform({ scaleX: x, scaleY: y, cx: cx, cy: cy })
- },
- // Map translate to transform
- translate: function (x, y) {
- return this.transform({ x: x, y: y })
- },
- // Map flip to transform
- flip: function (a, o) {
- o = typeof a === 'number' ? a : o
- return this.transform({ flip: a || 'both', offset: o })
- },
- // Map matrix to transform
- matrix: function (m) {
- return this.attr('transform', new SVG.Matrix(arguments.length === 6 ? [].slice.call(arguments) : m))
- },
- // Opacity
- opacity: function (value) {
- return this.attr('opacity', value)
- },
- // Relative move over x axis
- dx: function (x) {
- return this.x(new SVG.Number(x).plus(this instanceof SVG.FX ? 0 : this.x()), true)
- },
- // Relative move over y axis
- dy: function (y) {
- return this.y(new SVG.Number(y).plus(this instanceof SVG.FX ? 0 : this.y()), true)
- },
- // Relative move over x and y axes
- dmove: function (x, y) {
- return this.dx(x).dy(y)
- }
-})
-
-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 === 'radialGradient' || type === 'radialGradient'
- ? this.attr('r', new SVG.Number(x))
- : this.rx(x).ry(y == null ? x : y)
- }
-})
-
-SVG.extend(SVG.Path, {
- // Get path length
- length: function () {
- return this.node.getTotalLength()
- },
- // Get point at length
- pointAt: function (length) {
- return new SVG.Point(this.node.getPointAtLength(length))
- }
-})
-
-SVG.extend([SVG.Parent, SVG.Text, SVG.Tspan, SVG.FX], {
- // Set font
- font: function (a, v) {
- if (typeof a === 'object') {
- for (v in a) this.font(v, a[v])
- }
-
- return a === 'leading'
- ? this.leading(v)
- : a === 'anchor'
- ? this.attr('text-anchor', v)
- : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style'
- ? this.attr('font-' + a, v)
- : this.attr(a, v)
- }
-})
- -
-SVG.extend(SVG.Element, {
- // Store data values on svg nodes
- data: function (a, v, r) {
- if (typeof a === 'object') {
- for (v in a) {
- this.data(v, a[v])
- }
- } else if (arguments.length < 2) {
- try {
- return JSON.parse(this.attr('data-' + a))
- } catch (e) {
- return this.attr('data-' + a)
- }
- } else {
- this.attr('data-' + a,
- v === null ? null
- : r === true || typeof v === 'string' || typeof v === 'number' ? v
- : JSON.stringify(v)
- )
- }
-
- return this
- }
-})
- -
-SVG.extend(SVG.Element, {
- // Remember arbitrary data
- remember: function (k, v) {
- // remember every item in an object individually
- if (typeof arguments[0] === 'object') {
- for (var key in k) {
- this.remember(key, k[key])
- }
- } else if (arguments.length === 1) {
- // retrieve memory
- return this.memory()[k]
- } else {
- // store memory
- this.memory()[k] = v
- }
-
- return this
- },
-
- // Erase a given memory
- forget: function () {
- if (arguments.length === 0) {
- this._memory = {}
- } else {
- for (var i = arguments.length - 1; i >= 0; i--) {
- delete this.memory()[arguments[i]]
- }
- }
- return this
- },
-
- // Initialize or return local memory object
- memory: function () {
- return this._memory || (this._memory = {})
- }
-})
- -/* global idFromReference */
-
-// Method for getting an element by id
-SVG.get = function (id) {
- var node = document.getElementById(idFromReference(id) || id)
- return SVG.adopt(node)
-}
-
-// Select elements by query string
-SVG.select = function (query, parent) {
- return SVG.utils.map((parent || document).querySelectorAll(query), function (node) {
- return SVG.adopt(node)
- })
-}
-
-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)
- }
-})
- -/* eslint no-unused-vars: 0 */
-
-function createElement (element, makeNested) {
- if (element instanceof SVG.Element) return element
-
- if (typeof element === 'object') {
- return SVG.adopt(element)
- }
-
- if (element == null) {
- return new SVG.Doc()
- }
-
- if (typeof element === 'string' && element.charAt(0) !== '<') {
- return SVG.adopt(document.querySelector(element))
- }
-
- var node = SVG.create('svg')
- node.innerHTML = element
-
- element = SVG.adopt(node.firstElementChild)
-
- return element
-}
-
-function isNulledBox (box) {
- return !box.w && !box.h && !box.x && !box.y
-}
-
-function domContains (node) {
- return (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(document.documentElement, node)
-}
-
-function pathRegReplace (a, b, c, d) {
- return c + d.replace(SVG.regex.dots, ' .')
-}
-
-// creates deep clone of array
-function arrayClone (arr) {
- var clone = arr.slice(0)
- for (var i = clone.length; i--;) {
- if (Array.isArray(clone[i])) {
- clone[i] = arrayClone(clone[i])
- }
- }
- return clone
-}
-
-// tests if a given element is instance of an object
-function is (el, obj) {
- return el instanceof obj
-}
-
-// tests if a given selector matches an element
-function matches (el, selector) {
- return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
-}
-
-// Convert dash-separated-string to camelCase
-function camelCase (s) {
- return s.toLowerCase().replace(/-(.)/g, function (m, g) {
- return g.toUpperCase()
- })
-}
-
-// Capitalize first letter of a string
-function capitalize (s) {
- return s.charAt(0).toUpperCase() + s.slice(1)
-}
-
-// Ensure to six-based hex
-function fullHex (hex) {
- return hex.length === 4
- ? [ '#',
- hex.substring(1, 2), hex.substring(1, 2),
- hex.substring(2, 3), hex.substring(2, 3),
- hex.substring(3, 4), hex.substring(3, 4)
- ].join('')
- : hex
-}
-
-// Component to hex value
-function compToHex (comp) {
- var hex = comp.toString(16)
- return hex.length === 1 ? '0' + hex : hex
-}
-
-// Calculate proportional width and height values when necessary
-function proportionalSize (element, width, height) {
- if (width == null || height == null) {
- var box = element.bbox()
-
- if (width == null) {
- width = box.width / box.height * height
- } else if (height == null) {
- height = box.height / box.width * width
- }
- }
-
- return {
- width: width,
- height: height
- }
-}
-
-// Delta transform point
-function deltaTransformPoint (matrix, x, y) {
- return {
- x: x * matrix.a + y * matrix.c + 0,
- y: x * matrix.b + y * matrix.d + 0
- }
-}
-
-// Map matrix array to object
-function arrayToMatrix (a) {
- return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] }
-}
-
-// Parse matrix if required
-function parseMatrix (matrix) {
- if (!(matrix instanceof SVG.Matrix)) {
- matrix = new SVG.Matrix(matrix)
- }
-
- return matrix
-}
-
-// Add centre point to transform object
-function ensureCentre (o, target) {
- o.cx = o.cx == null ? target.bbox().cx : o.cx
- o.cy = o.cy == null ? target.bbox().cy : o.cy
-}
-
-// PathArray Helpers
-function arrayToString (a) {
- for (var i = 0, il = a.length, s = ''; i < il; i++) {
- s += a[i][0]
-
- if (a[i][1] != null) {
- s += a[i][1]
-
- if (a[i][2] != null) {
- s += ' '
- s += a[i][2]
-
- if (a[i][3] != null) {
- s += ' '
- s += a[i][3]
- s += ' '
- s += a[i][4]
-
- if (a[i][5] != null) {
- s += ' '
- s += a[i][5]
- s += ' '
- s += a[i][6]
-
- if (a[i][7] != null) {
- s += ' '
- s += a[i][7]
- }
- }
- }
- }
- }
- }
-
- return s + ' '
-}
-
-// Deep new id assignment
-function assignNewId (node) {
- // do the same for SVG child nodes as well
- for (var i = node.children.length - 1; i >= 0; i--) {
- assignNewId(node.children[i])
- }
-
- if (node.id) {
- return SVG.adopt(node).id(SVG.eid(node.nodeName))
- }
-
- return SVG.adopt(node)
-}
-
-// Add more bounding box properties
-function fullBox (b) {
- if (b.x == null) {
- b.x = 0
- b.y = 0
- b.width = 0
- b.height = 0
- }
-
- b.w = b.width
- b.h = b.height
- b.x2 = b.x + b.width
- b.y2 = b.y + b.height
- b.cx = b.x + b.width / 2
- b.cy = b.y + b.height / 2
-
- return b
-}
-
-// Get id from reference string
-function idFromReference (url) {
- var m = (url || '').toString().match(SVG.regex.reference)
-
- if (m) return m[1]
-}
-
-// Create matrix array for looping
-var abcdef = 'abcdef'.split('')
- -/* globals fullBox, domContains, isNulledBox, Exception */
-
-SVG.Box = SVG.invent({
- create: function (source) {
- var base = [0, 0, 0, 0]
- source = typeof source === 'string' ? source.split(SVG.regex.delimiter).map(parseFloat)
- : Array.isArray(source) ? source
- : typeof source === 'object' ? [source.left != null ? source.left
- : source.x, source.top != null ? source.top : source.y, source.width, source.height]
- : arguments.length === 4 ? [].slice.call(arguments)
- : base
-
- this.x = source[0]
- this.y = source[1]
- this.width = source[2]
- this.height = source[3]
-
- // add center, right, bottom...
- fullBox(this)
- },
- extend: {
- // Merge rect box with another, return a new instance
- merge: function (box) {
- var x = Math.min(this.x, box.x)
- var y = Math.min(this.y, box.y)
-
- return new SVG.Box(
- x, y,
- Math.max(this.x + this.width, box.x + box.width) - x,
- Math.max(this.y + this.height, box.y + box.height) - y
- )
- },
-
- transform: function (m) {
- var xMin = Infinity
- var xMax = -Infinity
- var yMin = Infinity
- var yMax = -Infinity
-
- var pts = [
- new SVG.Point(this.x, this.y),
- new SVG.Point(this.x2, this.y),
- new SVG.Point(this.x, this.y2),
- new SVG.Point(this.x2, this.y2)
- ]
-
- pts.forEach(function (p) {
- p = p.transform(m)
- xMin = Math.min(xMin, p.x)
- xMax = Math.max(xMax, p.x)
- yMin = Math.min(yMin, p.y)
- yMax = Math.max(yMax, p.y)
- })
-
- return new SVG.Box(
- xMin, yMin,
- xMax - xMin,
- yMax - yMin
- )
- },
-
- addOffset: function () {
- // offset by window scroll position, because getBoundingClientRect changes when window is scrolled
- this.x += window.pageXOffset
- this.y += window.pageYOffset
- return this
- },
- toString: function () {
- return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height
- },
- morph: function (x, y, width, height) {
- this.destination = new SVG.Box(x, y, width, height)
- return this
- },
-
- at: function (pos) {
- if (!this.destination) return this
-
- return new SVG.Box(
- this.x + (this.destination.x - this.x) * pos
- , this.y + (this.destination.y - this.y) * pos
- , this.width + (this.destination.width - this.width) * pos
- , this.height + (this.destination.height - this.height) * pos
- )
- }
- },
-
- // Define Parent
- parent: SVG.Element,
-
- // Constructor
- construct: {
- // Get bounding box
- bbox: function () {
- var box
-
- try {
- // find native bbox
- box = this.node.getBBox()
-
- if (isNulledBox(box) && !domContains(this.node)) {
- throw new Exception('Element not in the dom')
- }
- } catch (e) {
- try {
- var clone = this.clone(SVG.parser().svg).show()
- box = clone.node.getBBox()
- clone.remove()
- } catch (e) {
- console.warn('Getting a bounding box of this element is not possible')
- }
- }
-
- return new SVG.Box(box)
- },
-
- rbox: function (el) {
- // IE11 throws an error when element not in dom
- try {
- var box = new SVG.Box(this.node.getBoundingClientRect())
- if (el) return box.transform(el.screenCTM().inverse())
- return box.addOffset()
- } catch (e) {
- return new SVG.Box()
- }
- }
- }
-})
-
-SVG.extend([SVG.Doc, SVG.Symbol, SVG.Image, SVG.Pattern, SVG.Marker, SVG.ForeignObject, SVG.View], {
- viewbox: function (x, y, width, height) {
- // act as getter
- if (x == null) return new SVG.Box(this.attr('viewBox'))
-
- // act as setter
- return this.attr('viewBox', new SVG.Box(x, y, width, height))
- }
-})
- -
-SVG.parser = function () {
- var b
-
- if (!SVG.parser.nodes.svg.node.parentNode) {
- b = document.body || document.documentElement
- SVG.parser.nodes.svg.addTo(b)
- }
-
- return SVG.parser.nodes
-}
-
-SVG.parser.nodes = {
- svg: SVG().size(2, 0).css({
- opacity: 0,
- position: 'absolute',
- left: '-100%',
- top: '-100%',
- overflow: 'hidden'
- })
-}
-
-SVG.parser.nodes.path = SVG.parser.nodes.svg.path().node
-
-
-return SVG
-
-}));
\ No newline at end of file + +(function(root, factory) { + /* istanbul ignore next */ + if (typeof define === 'function' && define.amd) { + define(function(){ + return factory(root, root.document) + }) + } else if (typeof exports === 'object') { + module.exports = root.document ? factory(root, root.document) : function(w){ return factory(w, w.document) } + } else { + root.SVG = factory(root, root.document) + } +}(typeof window !== "undefined" ? window : this, function(window, document) { + +// Check that our browser supports svg +var supported = !! document.createElementNS && + !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect + +// If we don't support svg, just exit without doing anything +if (!supported) + return {supported: false} + +// Otherwise, the library will be here +/* global createElement, capitalize */ +/* eslint-disable new-cap */ + +// The main wrapping element +var SVG = this.SVG = function (element) { + if (SVG.supported) { + element = createElement(element) + return element + } +} + +// Svg must be supported if we reached this stage +SVG.supported = true + +// Default namespaces +SVG.ns = 'http://www.w3.org/2000/svg' +SVG.xmlns = 'http://www.w3.org/2000/xmlns/' +SVG.xlink = 'http://www.w3.org/1999/xlink' +SVG.svgjs = 'http://svgjs.com/svgjs' + +// Element id sequence +SVG.did = 1000 + +// Get next named element id +SVG.eid = function (name) { + return 'Svgjs' + capitalize(name) + (SVG.did++) +} + +// Method for element creation +SVG.create = function (name) { + // create element + return document.createElementNS(this.ns, name) +} + +// Method for extending objects +SVG.extend = function (modules, methods) { + var key, i + + modules = Array.isArray(modules) ? modules : [modules] + + for (i = modules.length - 1; i >= 0; i--) { + if (modules[i]) { + for (key in methods) { + modules[i].prototype[key] = methods[key] + } + } + } +} + +// Invent new element +SVG.invent = function (config) { + // Create element initializer + var initializer = typeof config.create === 'function' ? config.create + : function (node) { + this.constructor(node || SVG.create(config.create)) + } + + // Inherit prototype + if (config.inherit) { + initializer.prototype = new config.inherit() + } + + // Extend with methods + if (config.extend) { + SVG.extend(initializer, config.extend) + } + + // Attach construct method to parent + if (config.construct) { SVG.extend(config.parent || SVG.Container, config.construct) } + + return initializer +} + +// Adopt existing svg elements +SVG.adopt = function (node) { + // check for presence of node + if (!node) return null + + // make sure a node isn't already adopted + if (node.instance instanceof SVG.Element) return node.instance + + if (!(node instanceof window.SVGElement)) { + return new SVG.HtmlNode(node) + } + + // initialize variables + var element + + // adopt with element-specific settings + if (node.nodeName === 'svg') { + element = new SVG.Doc(node) + } else if (node.nodeName === 'linearGradient' || node.nodeName === 'radialGradient') { + element = new SVG.Gradient(node) + } else if (SVG[capitalize(node.nodeName)]) { + element = new SVG[capitalize(node.nodeName)](node) + } else { + element = new SVG.Parent(node) + } + + return element +} + +// Storage for regular expressions +SVG.regex = { + // Parse unit value + numberAndUnit: /^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i, + + // Parse hex value + hex: /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i, + + // Parse rgb value + rgb: /rgb\((\d+),(\d+),(\d+)\)/, + + // Parse reference id + reference: /#([a-z0-9\-_]+)/i, + + // splits a transformation chain + transforms: /\)\s*,?\s*/, + + // Whitespace + whitespace: /\s/g, + + // Test hex value + isHex: /^#[a-f0-9]{3,6}$/i, + + // Test rgb value + isRgb: /^rgb\(/, + + // Test css declaration + isCss: /[^:]+:[^;]+;?/, + + // Test for blank string + isBlank: /^(\s+)?$/, + + // Test for numeric string + isNumber: /^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i, + + // Test for percent value + isPercent: /^-?[\d.]+%$/, + + // Test for image url + isImage: /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i, + + // split at whitespace and comma + delimiter: /[\s,]+/, + + // The following regex are used to parse the d attribute of a path + + // Matches all hyphens which are not after an exponent + hyphen: /([^e])-/gi, + + // Replaces and tests for all path letters + pathLetters: /[MLHVCSQTAZ]/gi, + + // yes we need this one, too + isPathLetter: /[MLHVCSQTAZ]/i, + + // matches 0.154.23.45 + numbersWithDots: /((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi, + + // matches . + dots: /\./g +} + + +SVG.utils = { + // Map function + map: function (array, block) { + var i + var il = array.length + var result = [] + + for (i = 0; i < il; i++) { + result.push(block(array[i])) + } + + return result + }, + + // Filter function + filter: function (array, block) { + var i + var il = array.length + var result = [] + + for (i = 0; i < il; i++) { + if (block(array[i])) { result.push(array[i]) } + } + + return result + }, + + // Degrees to radians + radians: function (d) { + return d % 360 * Math.PI / 180 + }, + + // Radians to degrees + degrees: function (r) { + return r * 180 / Math.PI % 360 + }, + + filterSVGElements: function (nodes) { + return this.filter(nodes, function (el) { return el instanceof window.SVGElement }) + } + +} + + +SVG.defaults = { + + // Default attribute values + attrs: { + + // fill and stroke + 'fill-opacity': 1, + 'stroke-opacity': 1, + 'stroke-width': 0, + 'stroke-linejoin': 'miter', + 'stroke-linecap': 'butt', + fill: '#000000', + stroke: '#000000', + opacity: 1, + + // position + x: 0, + y: 0, + cx: 0, + cy: 0, + + // size + width: 0, + height: 0, + + // radius + r: 0, + rx: 0, + ry: 0, + + // gradient + offset: 0, + 'stop-opacity': 1, + 'stop-color': '#000000', + + // text + 'font-size': 16, + 'font-family': 'Helvetica, Arial, sans-serif', + 'text-anchor': 'start' + } +} + +/* globals fullHex, compToHex */ + +// Module for color convertions +SVG.Color = function (color) { + var match + + // initialize defaults + this.r = 0 + this.g = 0 + this.b = 0 + + if (!color) return + + // parse color + if (typeof color === 'string') { + if (SVG.regex.isRgb.test(color)) { + // get rgb values + match = SVG.regex.rgb.exec(color.replace(SVG.regex.whitespace, '')) + + // parse numeric values + this.r = parseInt(match[1]) + this.g = parseInt(match[2]) + this.b = parseInt(match[3]) + } else if (SVG.regex.isHex.test(color)) { + // get hex values + match = SVG.regex.hex.exec(fullHex(color)) + + // parse numeric values + this.r = parseInt(match[1], 16) + this.g = parseInt(match[2], 16) + this.b = parseInt(match[3], 16) + } + } else if (typeof color === 'object') { + this.r = color.r + this.g = color.g + this.b = color.b + } +} + +SVG.extend(SVG.Color, { + // Default to hex conversion + toString: function () { + return this.toHex() + }, + // Build hex value + toHex: function () { + return '#' + + compToHex(this.r) + + compToHex(this.g) + + compToHex(this.b) + }, + // Build rgb value + toRgb: function () { + return 'rgb(' + [this.r, this.g, this.b].join() + ')' + }, + // Calculate true brightness + brightness: function () { + return (this.r / 255 * 0.30) + + (this.g / 255 * 0.59) + + (this.b / 255 * 0.11) + }, + // Make color morphable + morph: function (color) { + this.destination = new SVG.Color(color) + + return this + }, + // Get morphed color at given position + at: function (pos) { + // make sure a destination is defined + if (!this.destination) return this + + // normalise pos + pos = pos < 0 ? 0 : pos > 1 ? 1 : pos + + // generate morphed color + return new SVG.Color({ + r: ~~(this.r + (this.destination.r - this.r) * pos), + g: ~~(this.g + (this.destination.g - this.g) * pos), + b: ~~(this.b + (this.destination.b - this.b) * pos) + }) + } + +}) + +// Testers + +// Test if given value is a color string +SVG.Color.test = function (color) { + color += '' + return SVG.regex.isHex.test(color) || + SVG.regex.isRgb.test(color) +} + +// Test if given value is a rgb object +SVG.Color.isRgb = function (color) { + return color && typeof color.r === 'number' && + typeof color.g === 'number' && + typeof color.b === 'number' +} + +// Test if given value is a color +SVG.Color.isColor = function (color) { + return SVG.Color.isRgb(color) || SVG.Color.test(color) +} + +/* global arrayClone */ + +// Module for array conversion +SVG.Array = function (array, fallback) { + array = (array || []).valueOf() + + // if array is empty and fallback is provided, use fallback + if (array.length === 0 && fallback) { + array = fallback.valueOf() + } + + // parse array + this.value = this.parse(array) +} + +SVG.extend(SVG.Array, { + // Make array morphable + morph: function (array) { + this.destination = this.parse(array) + + // normalize length of arrays + if (this.value.length !== this.destination.length) { + var lastValue = this.value[this.value.length - 1] + var lastDestination = this.destination[this.destination.length - 1] + + while (this.value.length > this.destination.length) { + this.destination.push(lastDestination) + } + while (this.value.length < this.destination.length) { + this.value.push(lastValue) + } + } + + return this + }, + // Clean up any duplicate points + settle: function () { + // find all unique values + for (var i = 0, il = this.value.length, seen = []; i < il; i++) { + if (seen.indexOf(this.value[i]) === -1) { + seen.push(this.value[i]) + } + } + + // set new value + this.value = seen + return seen + }, + // Get morphed array at given position + at: function (pos) { + // make sure a destination is defined + if (!this.destination) return this + + // generate morphed array + for (var i = 0, il = this.value.length, array = []; i < il; i++) { + array.push(this.value[i] + (this.destination[i] - this.value[i]) * pos) + } + + return new SVG.Array(array) + }, + // Convert array to string + toString: function () { + return this.value.join(' ') + }, + // Real value + valueOf: function () { + return this.value + }, + // Parse whitespace separated string + parse: function (array) { + array = array.valueOf() + + // if already is an array, no need to parse it + if (Array.isArray(array)) return array + + return array.trim().split(SVG.regex.delimiter).map(parseFloat) + }, + // Reverse array + reverse: function () { + this.value.reverse() + + return this + }, + clone: function () { + var clone = new this.constructor() + clone.value = arrayClone(this.value) + return clone + } +}) + + +// Poly points array +SVG.PointArray = function (array, fallback) { + SVG.Array.call(this, array, fallback || [[0, 0]]) +} + +// Inherit from SVG.Array +SVG.PointArray.prototype = new SVG.Array() +SVG.PointArray.prototype.constructor = SVG.PointArray + +SVG.extend(SVG.PointArray, { + // Convert array to string + toString: function () { + // convert to a poly point string + for (var i = 0, il = this.value.length, array = []; i < il; i++) { + array.push(this.value[i].join(',')) + } + + return array.join(' ') + }, + + // Convert array to line object + toLine: function () { + return { + x1: this.value[0][0], + y1: this.value[0][1], + x2: this.value[1][0], + y2: this.value[1][1] + } + }, + + // Get morphed array at given position + at: function (pos) { + // make sure a destination is defined + if (!this.destination) return this + + // generate morphed point string + for (var i = 0, il = this.value.length, array = []; i < il; i++) { + array.push([ + this.value[i][0] + (this.destination[i][0] - this.value[i][0]) * pos, + this.value[i][1] + (this.destination[i][1] - this.value[i][1]) * pos + ]) + } + + return new SVG.PointArray(array) + }, + + // Parse point string and flat array + parse: function (array) { + var points = [] + + array = array.valueOf() + + // if it is an array + if (Array.isArray(array)) { + // and it is not flat, there is no need to parse it + if (Array.isArray(array[0])) { + return array + } + } else { // Else, it is considered as a string + // parse points + array = array.trim().split(SVG.regex.delimiter).map(parseFloat) + } + + // validate points - https://svgwg.org/svg2-draft/shapes.html#DataTypePoints + // Odd number of coordinates is an error. In such cases, drop the last odd coordinate. + if (array.length % 2 !== 0) array.pop() + + // wrap points in two-tuples and parse points as floats + for (var i = 0, len = array.length; i < len; i = i + 2) { + points.push([ array[i], array[i + 1] ]) + } + + return points + }, + + // Move point string + move: function (x, y) { + var box = this.bbox() + + // get relative offset + x -= box.x + y -= box.y + + // move every point + if (!isNaN(x) && !isNaN(y)) { + for (var i = this.value.length - 1; i >= 0; i--) { + this.value[i] = [this.value[i][0] + x, this.value[i][1] + y] + } + } + + return this + }, + // Resize poly string + size: function (width, height) { + var i + var box = this.bbox() + + // recalculate position of all points according to new size + for (i = this.value.length - 1; i >= 0; i--) { + if (box.width) this.value[i][0] = ((this.value[i][0] - box.x) * width) / box.width + box.x + if (box.height) this.value[i][1] = ((this.value[i][1] - box.y) * height) / box.height + box.y + } + + return this + }, + + // Get bounding box of points + bbox: function () { + var maxX = -Infinity + var maxY = -Infinity + var minX = Infinity + var minY = Infinity + this.value.forEach(function (el) { + maxX = Math.max(el[0], maxX) + maxY = Math.max(el[1], maxY) + minX = Math.min(el[0], minX) + minY = Math.min(el[1], minY) + }) + return {x: minX, y: minY, width: maxX - minX, height: maxY - minY} + } +}) + +/* globals arrayToString, pathRegReplace */ + +var pathHandlers = { + M: function (c, p, p0) { + p.x = p0.x = c[0] + p.y = p0.y = c[1] + + return ['M', p.x, p.y] + }, + L: function (c, p) { + p.x = c[0] + p.y = c[1] + return ['L', c[0], c[1]] + }, + H: function (c, p) { + p.x = c[0] + return ['H', c[0]] + }, + V: function (c, p) { + p.y = c[0] + return ['V', c[0]] + }, + C: function (c, p) { + p.x = c[4] + p.y = c[5] + return ['C', c[0], c[1], c[2], c[3], c[4], c[5]] + }, + S: function (c, p) { + p.x = c[2] + p.y = c[3] + return ['S', c[0], c[1], c[2], c[3]] + }, + Q: function (c, p) { + p.x = c[2] + p.y = c[3] + return ['Q', c[0], c[1], c[2], c[3]] + }, + T: function (c, p) { + p.x = c[0] + p.y = c[1] + return ['T', c[0], c[1]] + }, + Z: function (c, p, p0) { + p.x = p0.x + p.y = p0.y + return ['Z'] + }, + A: function (c, p) { + p.x = c[5] + p.y = c[6] + return ['A', c[0], c[1], c[2], c[3], c[4], c[5], c[6]] + } +} + +var mlhvqtcsaz = 'mlhvqtcsaz'.split('') + +for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) { + pathHandlers[mlhvqtcsaz[i]] = (function (i) { + return function (c, p, p0) { + if (i === 'H') c[0] = c[0] + p.x + else if (i === 'V') c[0] = c[0] + p.y + else if (i === 'A') { + c[5] = c[5] + p.x + c[6] = c[6] + p.y + } else { + for (var j = 0, jl = c.length; j < jl; ++j) { + c[j] = c[j] + (j % 2 ? p.y : p.x) + } + } + + return pathHandlers[i](c, p, p0) + } + })(mlhvqtcsaz[i].toUpperCase()) +} + +// Path points array +SVG.PathArray = function (array, fallback) { + SVG.Array.call(this, array, fallback || [['M', 0, 0]]) +} + +// Inherit from SVG.Array +SVG.PathArray.prototype = new SVG.Array() +SVG.PathArray.prototype.constructor = SVG.PathArray + +SVG.extend(SVG.PathArray, { + // Convert array to string + toString: function () { + return arrayToString(this.value) + }, + // Move path string + move: function (x, y) { + // get bounding box of current situation + var box = this.bbox() + + // get relative offset + x -= box.x + y -= box.y + + if (!isNaN(x) && !isNaN(y)) { + // move every point + for (var l, i = this.value.length - 1; i >= 0; i--) { + l = this.value[i][0] + + if (l === 'M' || l === 'L' || l === 'T') { + this.value[i][1] += x + this.value[i][2] += y + } else if (l === 'H') { + this.value[i][1] += x + } else if (l === 'V') { + this.value[i][1] += y + } else if (l === 'C' || l === 'S' || l === 'Q') { + this.value[i][1] += x + this.value[i][2] += y + this.value[i][3] += x + this.value[i][4] += y + + if (l === 'C') { + this.value[i][5] += x + this.value[i][6] += y + } + } else if (l === 'A') { + this.value[i][6] += x + this.value[i][7] += y + } + } + } + + return this + }, + // Resize path string + size: function (width, height) { + // get bounding box of current situation + var box = this.bbox() + var i, l + + // recalculate position of all points according to new size + for (i = this.value.length - 1; i >= 0; i--) { + l = this.value[i][0] + + if (l === 'M' || l === 'L' || l === 'T') { + this.value[i][1] = ((this.value[i][1] - box.x) * width) / box.width + box.x + this.value[i][2] = ((this.value[i][2] - box.y) * height) / box.height + box.y + } else if (l === 'H') { + this.value[i][1] = ((this.value[i][1] - box.x) * width) / box.width + box.x + } else if (l === 'V') { + this.value[i][1] = ((this.value[i][1] - box.y) * height) / box.height + box.y + } else if (l === 'C' || l === 'S' || l === 'Q') { + this.value[i][1] = ((this.value[i][1] - box.x) * width) / box.width + box.x + this.value[i][2] = ((this.value[i][2] - box.y) * height) / box.height + box.y + this.value[i][3] = ((this.value[i][3] - box.x) * width) / box.width + box.x + this.value[i][4] = ((this.value[i][4] - box.y) * height) / box.height + box.y + + if (l === 'C') { + this.value[i][5] = ((this.value[i][5] - box.x) * width) / box.width + box.x + this.value[i][6] = ((this.value[i][6] - box.y) * height) / box.height + box.y + } + } else if (l === 'A') { + // resize radii + this.value[i][1] = (this.value[i][1] * width) / box.width + this.value[i][2] = (this.value[i][2] * height) / box.height + + // move position values + this.value[i][6] = ((this.value[i][6] - box.x) * width) / box.width + box.x + this.value[i][7] = ((this.value[i][7] - box.y) * height) / box.height + box.y + } + } + + return this + }, + // Test if the passed path array use the same path data commands as this path array + equalCommands: function (pathArray) { + var i, il, equalCommands + + pathArray = new SVG.PathArray(pathArray) + + equalCommands = this.value.length === pathArray.value.length + for (i = 0, il = this.value.length; equalCommands && i < il; i++) { + equalCommands = this.value[i][0] === pathArray.value[i][0] + } + + return equalCommands + }, + // Make path array morphable + morph: function (pathArray) { + pathArray = new SVG.PathArray(pathArray) + + if (this.equalCommands(pathArray)) { + this.destination = pathArray + } else { + this.destination = null + } + + return this + }, + // Get morphed path array at given position + at: function (pos) { + // make sure a destination is defined + if (!this.destination) return this + + var sourceArray = this.value + var destinationArray = this.destination.value + var array = [] + var pathArray = new SVG.PathArray() + var i, il, j, jl + + // Animate has specified in the SVG spec + // See: https://www.w3.org/TR/SVG11/paths.html#PathElement + for (i = 0, il = sourceArray.length; i < il; i++) { + array[i] = [sourceArray[i][0]] + for (j = 1, jl = sourceArray[i].length; j < jl; j++) { + array[i][j] = sourceArray[i][j] + (destinationArray[i][j] - sourceArray[i][j]) * pos + } + // For the two flags of the elliptical arc command, the SVG spec say: + // Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true + // Elliptical arc command as an array followed by corresponding indexes: + // ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y] + // 0 1 2 3 4 5 6 7 + if (array[i][0] === 'A') { + array[i][4] = +(array[i][4] !== 0) + array[i][5] = +(array[i][5] !== 0) + } + } + + // Directly modify the value of a path array, this is done this way for performance + pathArray.value = array + return pathArray + }, + // Absolutize and parse path to array + parse: function (array) { + // if it's already a patharray, no need to parse it + if (array instanceof SVG.PathArray) return array.valueOf() + + // prepare for parsing + var s + var paramCnt = { 'M': 2, 'L': 2, 'H': 1, 'V': 1, 'C': 6, 'S': 4, 'Q': 4, 'T': 2, 'A': 7, 'Z': 0 } + + if (typeof array === 'string') { + array = array + .replace(SVG.regex.numbersWithDots, pathRegReplace) // convert 45.123.123 to 45.123 .123 + .replace(SVG.regex.pathLetters, ' $& ') // put some room between letters and numbers + .replace(SVG.regex.hyphen, '$1 -') // add space before hyphen + .trim() // trim + .split(SVG.regex.delimiter) // split into array + } else { + array = array.reduce(function (prev, curr) { + return [].concat.call(prev, curr) + }, []) + } + + // array now is an array containing all parts of a path e.g. ['M', '0', '0', 'L', '30', '30' ...] + var result = [] + var p = new SVG.Point() + var p0 = new SVG.Point() + var index = 0 + var len = array.length + + do { + // Test if we have a path letter + if (SVG.regex.isPathLetter.test(array[index])) { + s = array[index] + ++index + // If last letter was a move command and we got no new, it defaults to [L]ine + } else if (s === 'M') { + s = 'L' + } else if (s === 'm') { + s = 'l' + } + + result.push(pathHandlers[s].call(null, + array.slice(index, (index = index + paramCnt[s.toUpperCase()])).map(parseFloat), + p, p0 + ) + ) + } while (len > index) + + return result + }, + // Get bounding box of path + bbox: function () { + SVG.parser().path.setAttribute('d', this.toString()) + return SVG.parser.nodes.path.getBBox() + } + +}) + + +// Module for unit convertions +SVG.Number = SVG.invent({ + // Initialize + create: function (value, unit) { + // initialize defaults + this.value = 0 + this.unit = unit || '' + + // parse value + if (typeof value === 'number') { + // ensure a valid numeric value + this.value = isNaN(value) ? 0 : !isFinite(value) ? (value < 0 ? -3.4e+38 : +3.4e+38) : value + } else if (typeof value === 'string') { + unit = value.match(SVG.regex.numberAndUnit) + + if (unit) { + // make value numeric + this.value = parseFloat(unit[1]) + + // normalize + if (unit[5] === '%') { this.value /= 100 } else if (unit[5] === 's') { + this.value *= 1000 + } + + // store unit + this.unit = unit[5] + } + } else { + if (value instanceof SVG.Number) { + this.value = value.valueOf() + this.unit = value.unit + } + } + }, + // Add methods + extend: { + // Stringalize + toString: function () { + return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6 + : this.unit === 's' ? this.value / 1e3 + : this.value + ) + this.unit + }, + toJSON: function () { + return this.toString() + }, // Convert to primitive + valueOf: function () { + return this.value + }, + // Add number + plus: function (number) { + number = new SVG.Number(number) + return new SVG.Number(this + number, this.unit || number.unit) + }, + // Subtract number + minus: function (number) { + number = new SVG.Number(number) + return new SVG.Number(this - number, this.unit || number.unit) + }, + // Multiply number + times: function (number) { + number = new SVG.Number(number) + return new SVG.Number(this * number, this.unit || number.unit) + }, + // Divide number + divide: function (number) { + number = new SVG.Number(number) + return new SVG.Number(this / number, this.unit || number.unit) + }, + // Convert to different unit + to: function (unit) { + var number = new SVG.Number(this) + + if (typeof unit === 'string') { + number.unit = unit + } + + return number + }, + // Make number morphable + morph: function (number) { + this.destination = new SVG.Number(number) + + if (number.relative) { + this.destination.value += this.value + } + + return this + }, + // Get morphed number at given position + at: function (pos) { + // Make sure a destination is defined + if (!this.destination) return this + + // Generate new morphed number + return new SVG.Number(this.destination) + .minus(this) + .times(pos) + .plus(this) + } + + } +}) + +/* global createElement */ + +SVG.HtmlNode = SVG.invent({ + create: function (element) { + this.node = element + }, + + extend: { + add: function (element, i) { + element = createElement(element) + + if (element.node !== this.node.children[i]) { + this.node.insertBefore(element.node, this.node.children[i] || null) + } + + return this + }, + + put: function (element, i) { + this.add(element, i) + return element + } + } +}) + +/* global proportionalSize, assignNewId, createElement, matches, is */ + +SVG.Element = SVG.invent({ + // Initialize node + create: function (node) { + // event listener + this.events = {} + + // initialize data object + this.dom = {} + + // create circular reference + this.node = node + if (this.node) { + this.type = node.nodeName + this.node.instance = this + this.events = node.events || {} + + if (node.hasAttribute('svgjs:data')) { + // pull svgjs data from the dom (getAttributeNS doesn't work in html5) + this.setData(JSON.parse(node.getAttribute('svgjs:data')) || {}) + } + } + }, + + // Add class methods + extend: { + // Move over x-axis + x: function (x) { + return this.attr('x', x) + }, + + // Move over y-axis + y: function (y) { + return this.attr('y', y) + }, + + // Move by center over x-axis + cx: function (x) { + return x == null ? this.x() + this.width() / 2 : this.x(x - this.width() / 2) + }, + + // Move by center over y-axis + cy: function (y) { + return y == null ? this.y() + this.height() / 2 : this.y(y - this.height() / 2) + }, + + // Move element to given x and y values + move: function (x, y) { + return this.x(x).y(y) + }, + + // Move element by its center + center: function (x, y) { + return this.cx(x).cy(y) + }, + + // Set width of element + width: function (width) { + return this.attr('width', width) + }, + + // Set height of element + height: function (height) { + return this.attr('height', height) + }, + + // Set element size to given width and height + size: function (width, height) { + var p = proportionalSize(this, width, height) + + return this + .width(new SVG.Number(p.width)) + .height(new SVG.Number(p.height)) + }, + + // Clone element + clone: function (parent) { + // write dom data to the dom so the clone can pickup the data + this.writeDataToDom() + + // clone element and assign new id + var clone = assignNewId(this.node.cloneNode(true)) + + // insert the clone in the given parent or after myself + if (parent) parent.add(clone) + else this.after(clone) + + return clone + }, + + // Remove element + remove: function () { + if (this.parent()) { this.parent().removeElement(this) } + + return this + }, + + // Replace element + replace: function (element) { + this.after(element).remove() + + return element + }, + + // Add element to given container and return self + addTo: function (parent) { + return createElement(parent).put(this) + }, + + // Add element to given container and return container + putIn: function (parent) { + return createElement(parent).add(this) + }, + + // Get / set id + id: function (id) { + // generate new id if no id set + if (typeof id === 'undefined' && !this.node.id) { + this.node.id = SVG.eid(this.type) + } + + // dont't set directly width this.node.id to make `null` work correctly + return this.attr('id', id) + }, + + // Checks whether the given point inside the bounding box of the element + inside: function (x, y) { + var box = this.bbox() + + return x > box.x && + y > box.y && + x < box.x + box.width && + y < box.y + box.height + }, + + // Show element + show: function () { + return this.css('display', '') + }, + + // Hide element + hide: function () { + return this.css('display', 'none') + }, + + // Is element visible? + visible: function () { + return this.css('display') !== 'none' + }, + + // Return id on string conversion + toString: function () { + return this.id() + }, + + // Return array of classes on the node + classes: function () { + var attr = this.attr('class') + return attr == null ? [] : attr.trim().split(SVG.regex.delimiter) + }, + + // Return true if class exists on the node, false otherwise + hasClass: function (name) { + return this.classes().indexOf(name) !== -1 + }, + + // Add class to the node + addClass: function (name) { + if (!this.hasClass(name)) { + var array = this.classes() + array.push(name) + this.attr('class', array.join(' ')) + } + + return this + }, + + // Remove class from the node + removeClass: function (name) { + if (this.hasClass(name)) { + this.attr('class', this.classes().filter(function (c) { + return c !== name + }).join(' ')) + } + + return this + }, + + // Toggle the presence of a class on the node + toggleClass: function (name) { + return this.hasClass(name) ? this.removeClass(name) : this.addClass(name) + }, + + // Get referenced element form attribute value + reference: function (attr) { + return SVG.get(this.attr(attr)) + }, + + // Returns the parent element instance + parent: function (type) { + var parent = this + + // check for parent + if (!parent.node.parentNode) return null + + // get parent element + parent = SVG.adopt(parent.node.parentNode) + + if (!type) return parent + + // loop trough ancestors if type is given + while (parent && parent.node instanceof window.SVGElement) { + if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent + parent = SVG.adopt(parent.node.parentNode) + } + }, + + // Get parent document + doc: function () { + var p = this.parent(SVG.Doc) + return p && p.doc() + }, + + // Get defs + defs: function () { + return this.doc().defs() + }, + + // return array of all ancestors of given type up to the root svg + parents: function (type) { + var parents = [] + var parent = this + + do { + parent = parent.parent(type) + if (!parent || !parent.node) break + + parents.push(parent) + } while (parent.parent) + + return parents + }, + + // matches the element vs a css selector + matches: function (selector) { + return matches(this.node, selector) + }, + + // Returns the svg node to call native svg methods on it + native: function () { + return this.node + }, + + // Import raw svg + svg: function (svg) { + var well, len + + // act as a setter if svg is given + if (svg && this instanceof SVG.Parent) { + // create temporary holder + well = document.createElementNS(SVG.ns, 'svg') + // dump raw svg + well.innerHTML = svg + + // transplant nodes + for (len = well.children.length; len--;) { + this.node.appendChild(well.firstElementChild) + } + + // otherwise act as a getter + } else { + // write svgjs data to the dom + this.writeDataToDom() + + return this.node.outerHTML + } + + return this + }, + + // write svgjs data to the dom + writeDataToDom: function () { + // dump variables recursively + if (this.is(SVG.Parent)) { + this.each(function () { + this.writeDataToDom() + }) + } + + // remove previously set data + this.node.removeAttribute('svgjs:data') + + if (Object.keys(this.dom).length) { + this.node.setAttribute('svgjs:data', JSON.stringify(this.dom)) // see #428 + } + return this + }, + + // set given data to the elements data property + setData: function (o) { + this.dom = o + return this + }, + is: function (obj) { + return is(this, obj) + } + } +}) + +SVG.easing = { + '-': function (pos) { return pos }, + '<>': function (pos) { return -Math.cos(pos * Math.PI) / 2 + 0.5 }, + '>': function (pos) { return Math.sin(pos * Math.PI / 2) }, + '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 } +} + +SVG.morph = function (pos) { + return function (from, to) { + return new SVG.MorphObj(from, to).at(pos) + } +} + +SVG.Situation = SVG.invent({ + + create: function (o) { + this.init = false + this.reversed = false + this.reversing = false + + this.duration = new SVG.Number(o.duration).valueOf() + this.delay = new SVG.Number(o.delay).valueOf() + + this.start = +new Date() + this.delay + this.finish = this.start + this.duration + this.ease = o.ease + + // this.loop is incremented from 0 to this.loops + // it is also incremented when in an infinite loop (when this.loops is true) + this.loop = 0 + this.loops = false + + this.animations = { + // functionToCall: [list of morphable objects] + // e.g. move: [SVG.Number, SVG.Number] + } + + this.attrs = { + // holds all attributes which are not represented from a function svg.js provides + // e.g. someAttr: SVG.Number + } + + this.styles = { + // holds all styles which should be animated + // e.g. fill-color: SVG.Color + } + + this.transforms = [ + // holds all transformations as transformation objects + // e.g. [SVG.Rotate, SVG.Translate, SVG.Matrix] + ] + + this.once = { + // functions to fire at a specific position + // e.g. "0.5": function foo(){} + } + } + +}) + +SVG.FX = SVG.invent({ + + create: function (element) { + this._target = element + this.situations = [] + this.active = false + this.situation = null + this.paused = false + this.lastPos = 0 + this.pos = 0 + // The absolute position of an animation is its position in the context of its complete duration (including delay and loops) + // When performing a delay, absPos is below 0 and when performing a loop, its value is above 1 + this.absPos = 0 + this._speed = 1 + }, + + extend: { + + /** + * sets or returns the target of this animation + * @param o object || number In case of Object it holds all parameters. In case of number its the duration of the animation + * @param ease function || string Function which should be used for easing or easing keyword + * @param delay Number indicating the delay before the animation starts + * @return target || this + */ + animate: function (o, ease, delay) { + if (typeof o === 'object') { + ease = o.ease + delay = o.delay + o = o.duration + } + + var situation = new SVG.Situation({ + duration: o || 1000, + delay: delay || 0, + ease: SVG.easing[ease || '-'] || ease + }) + + this.queue(situation) + + return this + }, + + /** + * sets a delay before the next element of the queue is called + * @param delay Duration of delay in milliseconds + * @return this.target() + */ + delay: function (delay) { + // The delay is performed by an empty situation with its duration + // attribute set to the duration of the delay + var situation = new SVG.Situation({ + duration: delay, + delay: 0, + ease: SVG.easing['-'] + }) + + return this.queue(situation) + }, + + /** + * sets or returns the target of this animation + * @param null || target SVG.Element which should be set as new target + * @return target || this + */ + target: function (target) { + if (target && target instanceof SVG.Element) { + this._target = target + return this + } + + return this._target + }, + + // returns the absolute position at a given time + timeToAbsPos: function (timestamp) { + return (timestamp - this.situation.start) / (this.situation.duration / this._speed) + }, + + // returns the timestamp from a given absolute positon + absPosToTime: function (absPos) { + return this.situation.duration / this._speed * absPos + this.situation.start + }, + + // starts the animationloop + startAnimFrame: function () { + this.stopAnimFrame() + this.animationFrame = window.requestAnimationFrame(function () { this.step() }.bind(this)) + }, + + // cancels the animationframe + stopAnimFrame: function () { + window.cancelAnimationFrame(this.animationFrame) + }, + + // kicks off the animation - only does something when the queue is currently not active and at least one situation is set + start: function () { + // dont start if already started + if (!this.active && this.situation) { + this.active = true + this.startCurrent() + } + + return this + }, + + // start the current situation + startCurrent: function () { + this.situation.start = +new Date() + this.situation.delay / this._speed + this.situation.finish = this.situation.start + this.situation.duration / this._speed + return this.initAnimations().step() + }, + + /** + * adds a function / Situation to the animation queue + * @param fn function / situation to add + * @return this + */ + queue: function (fn) { + if (typeof fn === 'function' || fn instanceof SVG.Situation) { + this.situations.push(fn) + } + + if (!this.situation) this.situation = this.situations.shift() + + return this + }, + + /** + * pulls next element from the queue and execute it + * @return this + */ + dequeue: function () { + // stop current animation + this.stop() + + // get next animation from queue + this.situation = this.situations.shift() + + if (this.situation) { + if (this.situation instanceof SVG.Situation) { + this.start() + } else { + // If it is not a SVG.Situation, then it is a function, we execute it + this.situation(this) + } + } + + return this + }, + + // updates all animations to the current state of the element + // this is important when one property could be changed from another property + initAnimations: function () { + var i, j, source + var s = this.situation + + if (s.init) return this + + for (i in s.animations) { + source = this.target()[i]() + + if (!Array.isArray(source)) { + source = [source] + } + + if (!Array.isArray(s.animations[i])) { + s.animations[i] = [s.animations[i]] + } + + // if(s.animations[i].length > source.length) { + // source.concat = source.concat(s.animations[i].slice(source.length, s.animations[i].length)) + // } + + for (j = source.length; j--;) { + // The condition is because some methods return a normal number instead + // of a SVG.Number + if (s.animations[i][j] instanceof SVG.Number) { + source[j] = new SVG.Number(source[j]) + } + + s.animations[i][j] = source[j].morph(s.animations[i][j]) + } + } + + for (i in s.attrs) { + s.attrs[i] = new SVG.MorphObj(this.target().attr(i), s.attrs[i]) + } + + for (i in s.styles) { + s.styles[i] = new SVG.MorphObj(this.target().css(i), s.styles[i]) + } + + s.initialTransformation = this.target().matrixify() + + s.init = true + return this + }, + + clearQueue: function () { + this.situations = [] + return this + }, + + clearCurrent: function () { + this.situation = null + return this + }, + + /** stops the animation immediately + * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. + * @param clearQueue A Boolean indicating whether to remove queued animation as well. + * @return this + */ + stop: function (jumpToEnd, clearQueue) { + var active = this.active + this.active = false + + if (clearQueue) { + this.clearQueue() + } + + if (jumpToEnd && this.situation) { + // initialize the situation if it was not + !active && this.startCurrent() + this.atEnd() + } + + this.stopAnimFrame() + + return this.clearCurrent() + }, + + /** resets the element to the state where the current element has started + * @return this + */ + reset: function () { + if (this.situation) { + var temp = this.situation + this.stop() + this.situation = temp + this.atStart() + } + return this + }, + + // Stop the currently-running animation, remove all queued animations, and complete all animations for the element. + finish: function () { + this.stop(true, false) + + while (this.dequeue().situation && this.stop(true, false)); + + this.clearQueue().clearCurrent() + + return this + }, + + // set the internal animation pointer at the start position, before any loops, and updates the visualisation + atStart: function () { + return this.at(0, true) + }, + + // set the internal animation pointer at the end position, after all the loops, and updates the visualisation + atEnd: function () { + if (this.situation.loops === true) { + // If in a infinite loop, we end the current iteration + this.situation.loops = this.situation.loop + 1 + } + + if (typeof this.situation.loops === 'number') { + // If performing a finite number of loops, we go after all the loops + return this.at(this.situation.loops, true) + } else { + // If no loops, we just go at the end + return this.at(1, true) + } + }, + + // set the internal animation pointer to the specified position and updates the visualisation + // if isAbsPos is true, pos is treated as an absolute position + at: function (pos, isAbsPos) { + var durDivSpd = this.situation.duration / this._speed + + this.absPos = pos + // If pos is not an absolute position, we convert it into one + if (!isAbsPos) { + if (this.situation.reversed) this.absPos = 1 - this.absPos + this.absPos += this.situation.loop + } + + this.situation.start = +new Date() - this.absPos * durDivSpd + this.situation.finish = this.situation.start + durDivSpd + + return this.step(true) + }, + + /** + * sets or returns the speed of the animations + * @param speed null || Number The new speed of the animations + * @return Number || this + */ + speed: function (speed) { + if (speed === 0) return this.pause() + + if (speed) { + this._speed = speed + // We use an absolute position here so that speed can affect the delay before the animation + return this.at(this.absPos, true) + } else return this._speed + }, + + // Make loopable + loop: function (times, reverse) { + var c = this.last() + + // store total loops + c.loops = (times != null) ? times : true + c.loop = 0 + + if (reverse) c.reversing = true + return this + }, + + // pauses the animation + pause: function () { + this.paused = true + this.stopAnimFrame() + + return this + }, + + // unpause the animation + play: function () { + if (!this.paused) return this + this.paused = false + // We use an absolute position here so that the delay before the animation can be paused + return this.at(this.absPos, true) + }, + + /** + * toggle or set the direction of the animation + * true sets direction to backwards while false sets it to forwards + * @param reversed Boolean indicating whether to reverse the animation or not (default: toggle the reverse status) + * @return this + */ + reverse: function (reversed) { + var c = this.last() + + if (typeof reversed === 'undefined') c.reversed = !c.reversed + else c.reversed = reversed + + return this + }, + + /** + * returns a float from 0-1 indicating the progress of the current animation + * @param eased Boolean indicating whether the returned position should be eased or not + * @return number + */ + progress: function (easeIt) { + return easeIt ? this.situation.ease(this.pos) : this.pos + }, + + /** + * adds a callback function which is called when the current animation is finished + * @param fn Function which should be executed as callback + * @return number + */ + after: function (fn) { + var c = this.last() + function wrapper (e) { + if (e.detail.situation === c) { + fn.call(this, c) + this.off('finished.fx', wrapper) // prevent memory leak + } + } + + this.target().on('finished.fx', wrapper) + + return this._callStart() + }, + + // adds a callback which is called whenever one animation step is performed + during: function (fn) { + var c = this.last() + function wrapper (e) { + if (e.detail.situation === c) { + fn.call(this, e.detail.pos, SVG.morph(e.detail.pos), e.detail.eased, c) + } + } + + // see above + this.target().off('during.fx', wrapper).on('during.fx', wrapper) + + this.after(function () { + this.off('during.fx', wrapper) + }) + + return this._callStart() + }, + + // calls after ALL animations in the queue are finished + afterAll: function (fn) { + var wrapper = function wrapper (e) { + fn.call(this) + this.off('allfinished.fx', wrapper) + } + + // see above + this.target().off('allfinished.fx', wrapper).on('allfinished.fx', wrapper) + + return this._callStart() + }, + + // calls on every animation step for all animations + duringAll: function (fn) { + var wrapper = function (e) { + fn.call(this, e.detail.pos, SVG.morph(e.detail.pos), e.detail.eased, e.detail.situation) + } + + this.target().off('during.fx', wrapper).on('during.fx', wrapper) + + this.afterAll(function () { + this.off('during.fx', wrapper) + }) + + return this._callStart() + }, + + last: function () { + return this.situations.length ? this.situations[this.situations.length - 1] : this.situation + }, + + // adds one property to the animations + add: function (method, args, type) { + this.last()[type || 'animations'][method] = args + return this._callStart() + }, + + /** perform one step of the animation + * @param ignoreTime Boolean indicating whether to ignore time and use position directly or recalculate position based on time + * @return this + */ + step: function (ignoreTime) { + // convert current time to an absolute position + if (!ignoreTime) this.absPos = this.timeToAbsPos(+new Date()) + + // This part convert an absolute position to a position + if (this.situation.loops !== false) { + var absPos, absPosInt, lastLoop + + // If the absolute position is below 0, we just treat it as if it was 0 + absPos = Math.max(this.absPos, 0) + absPosInt = Math.floor(absPos) + + if (this.situation.loops === true || absPosInt < this.situation.loops) { + this.pos = absPos - absPosInt + lastLoop = this.situation.loop + this.situation.loop = absPosInt + } else { + this.absPos = this.situation.loops + this.pos = 1 + // The -1 here is because we don't want to toggle reversed when all the loops have been completed + lastLoop = this.situation.loop - 1 + this.situation.loop = this.situation.loops + } + + if (this.situation.reversing) { + // Toggle reversed if an odd number of loops as occured since the last call of step + this.situation.reversed = this.situation.reversed !== Boolean((this.situation.loop - lastLoop) % 2) + } + } else { + // If there are no loop, the absolute position must not be above 1 + this.absPos = Math.min(this.absPos, 1) + this.pos = this.absPos + } + + // while the absolute position can be below 0, the position must not be below 0 + if (this.pos < 0) this.pos = 0 + + if (this.situation.reversed) this.pos = 1 - this.pos + + // apply easing + var eased = this.situation.ease(this.pos) + + // call once-callbacks + for (var i in this.situation.once) { + if (i > this.lastPos && i <= eased) { + this.situation.once[i].call(this.target(), this.pos, eased) + delete this.situation.once[i] + } + } + + // fire during callback with position, eased position and current situation as parameter + if (this.active) this.target().fire('during', {pos: this.pos, eased: eased, fx: this, situation: this.situation}) + + // the user may call stop or finish in the during callback + // so make sure that we still have a valid situation + if (!this.situation) { + return this + } + + // apply the actual animation to every property + this.eachAt() + + // do final code when situation is finished + if ((this.pos === 1 && !this.situation.reversed) || (this.situation.reversed && this.pos === 0)) { + // stop animation callback + this.stopAnimFrame() + + // fire finished callback with current situation as parameter + this.target().fire('finished', {fx: this, situation: this.situation}) + + if (!this.situations.length) { + this.target().fire('allfinished') + + // Recheck the length since the user may call animate in the afterAll callback + if (!this.situations.length) { + this.target().off('.fx') // there shouldnt be any binding left, but to make sure... + this.active = false + } + } + + // start next animation + if (this.active) this.dequeue() + else this.clearCurrent() + } else if (!this.paused && this.active) { + // we continue animating when we are not at the end + this.startAnimFrame() + } + + // save last eased position for once callback triggering + this.lastPos = eased + return this + }, + + // calculates the step for every property and calls block with it + eachAt: function () { + var i, at + var self = this + var target = this.target() + var s = this.situation + + // apply animations which can be called trough a method + for (i in s.animations) { + at = [].concat(s.animations[i]).map(function (el) { + return typeof el !== 'string' && el.at ? el.at(s.ease(self.pos), self.pos) : el + }) + + target[i].apply(target, at) + } + + // apply animation which has to be applied with attr() + for (i in s.attrs) { + at = [i].concat(s.attrs[i]).map(function (el) { + return typeof el !== 'string' && el.at ? el.at(s.ease(self.pos), self.pos) : el + }) + + target.attr.apply(target, at) + } + + // apply animation which has to be applied with css() + for (i in s.styles) { + at = [i].concat(s.styles[i]).map(function (el) { + return typeof el !== 'string' && el.at ? el.at(s.ease(self.pos), self.pos) : el + }) + + target.css.apply(target, at) + } + + // animate initialTransformation which has to be chained + if (s.transforms.length) { + + // TODO: ANIMATE THE TRANSFORMS + + // // get initial initialTransformation + // at = s.initialTransformation + // for(i = 0, len = s.transforms.length; i < len; i++){ + // + // // get next transformation in chain + // var a = s.transforms[i] + // + // // multiply matrix directly + // if(a instanceof SVG.Matrix){ + // + // if(a.relative){ + // at = at.multiply(new SVG.Matrix().morph(a).at(s.ease(this.pos))) + // }else{ + // at = at.morph(a).at(s.ease(this.pos)) + // } + // continue + // } + // + // // when transformation is absolute we have to reset the needed transformation first + // if(!a.relative) + // a.undo(at.decompose()) + // + // // and reapply it after + // at = at.multiply(a.at(s.ease(this.pos))) + // + // } + // + // // set new matrix on element + // target.matrix(at) + } + + return this + }, + + // adds an once-callback which is called at a specific position and never again + once: function (pos, fn, isEased) { + var c = this.last() + if (!isEased) pos = c.ease(pos) + + c.once[pos] = fn + + return this + }, + + _callStart: function () { + setTimeout(function () { this.start() }.bind(this), 0) + return this + } + + }, + + parent: SVG.Element, + + // Add method to parent elements + construct: { + // Get fx module or create a new one, then animate with given duration and ease + animate: function (o, ease, delay) { + return (this.fx || (this.fx = new SVG.FX(this))).animate(o, ease, delay) + }, + delay: function (delay) { + return (this.fx || (this.fx = new SVG.FX(this))).delay(delay) + }, + stop: function (jumpToEnd, clearQueue) { + if (this.fx) { + this.fx.stop(jumpToEnd, clearQueue) + } + + return this + }, + finish: function () { + if (this.fx) { + this.fx.finish() + } + + return this + }, + // Pause current animation + pause: function () { + if (this.fx) { + this.fx.pause() + } + + return this + }, + // Play paused current animation + play: function () { + if (this.fx) { this.fx.play() } + + return this + }, + // Set/Get the speed of the animations + speed: function (speed) { + if (this.fx) { + if (speed == null) { return this.fx.speed() } else { this.fx.speed(speed) } + } + + return this + } + } + +}) + +// MorphObj is used whenever no morphable object is given +SVG.MorphObj = SVG.invent({ + + create: function (from, to) { + // prepare color for morphing + if (SVG.Color.isColor(to)) return new SVG.Color(from).morph(to) + // prepare value list for morphing + if (SVG.regex.delimiter.test(from)) return new SVG.Array(from).morph(to) + // prepare number for morphing + if (SVG.regex.numberAndUnit.test(to)) return new SVG.Number(from).morph(to) + + // prepare for plain morphing + this.value = from + this.destination = to + }, + + extend: { + at: function (pos, real) { + return real < 1 ? this.value : this.destination + }, + + valueOf: function () { + return this.value + } + } + +}) + +SVG.extend(SVG.FX, { + // Add animatable attributes + attr: function (a, v, relative) { + // apply attributes individually + if (typeof a === 'object') { + for (var key in a) { + this.attr(key, a[key]) + } + } else { + this.add(a, v, 'attrs') + } + + return this + }, + // Add animatable styles + css: function (s, v) { + if (typeof s === 'object') { + for (var key in s) { + this.css(key, s[key]) + } + } else { + this.add(s, v, 'styles') + } + + return this + }, + // Animatable x-axis + x: function (x, relative) { + if (this.target() instanceof SVG.G) { + this.transform({x: x}, relative) + return this + } + + var num = new SVG.Number(x) + num.relative = relative + return this.add('x', num) + }, + // Animatable y-axis + y: function (y, relative) { + if (this.target() instanceof SVG.G) { + this.transform({y: y}, relative) + return this + } + + var num = new SVG.Number(y) + num.relative = relative + return this.add('y', num) + }, + // Animatable center x-axis + cx: function (x) { + return this.add('cx', new SVG.Number(x)) + }, + // Animatable center y-axis + cy: function (y) { + return this.add('cy', new SVG.Number(y)) + }, + // Add animatable move + move: function (x, y) { + return this.x(x).y(y) + }, + // Add animatable center + center: function (x, y) { + return this.cx(x).cy(y) + }, + // Add animatable size + size: function (width, height) { + if (this.target() instanceof SVG.Text) { + // animate font size for Text elements + this.attr('font-size', width) + } else { + // animate bbox based size for all other elements + var box + + if (!width || !height) { + box = this.target().bbox() + } + + if (!width) { + width = box.width / box.height * height + } + + if (!height) { + height = box.height / box.width * width + } + + this.add('width', new SVG.Number(width)) + .add('height', new SVG.Number(height)) + } + + return this + }, + // Add animatable width + width: function (width) { + return this.add('width', new SVG.Number(width)) + }, + // Add animatable height + height: function (height) { + return this.add('height', new SVG.Number(height)) + }, + // Add animatable plot + plot: function (a, b, c, d) { + // Lines can be plotted with 4 arguments + if (arguments.length === 4) { + return this.plot([a, b, c, d]) + } + + return this.add('plot', new (this.target().MorphArray)(a)) + }, + // Add leading method + leading: function (value) { + return this.target().leading + ? this.add('leading', new SVG.Number(value)) + : this + }, + // Add animatable viewbox + viewbox: function (x, y, width, height) { + if (this.target() instanceof SVG.Container) { + this.add('viewbox', new SVG.Box(x, y, width, height)) + } + + return this + }, + update: function (o) { + if (this.target() instanceof SVG.Stop) { + if (typeof o === 'number' || o instanceof SVG.Number) { + return this.update({ + offset: arguments[0], + color: arguments[1], + opacity: arguments[2] + }) + } + + if (o.opacity != null) this.attr('stop-opacity', o.opacity) + if (o.color != null) this.attr('stop-color', o.color) + if (o.offset != null) this.attr('offset', o.offset) + } + + return this + } +}) + +/* global abcdef, arrayToMatrix, parseMatrix, closeEnough */ + +SVG.Matrix = SVG.invent({ + // Initialize + create: function (source) { + var base = arrayToMatrix([1, 0, 0, 1, 0, 0]) + var i + + // ensure source as object + source = source instanceof SVG.Element ? source.matrixify() + : typeof source === 'string' ? arrayToMatrix(source.split(SVG.regex.delimiter).map(parseFloat)) + : arguments.length === 6 ? arrayToMatrix([].slice.call(arguments)) + : Array.isArray(source) ? arrayToMatrix(source) + : typeof source === 'object' ? source + : base + + // merge source + for (i = abcdef.length - 1; i >= 0; --i) { + this[abcdef[i]] = source[abcdef[i]] != null + ? source[abcdef[i]] + : base[abcdef[i]] + } + }, + + // Add methods + extend: { + + // Clones this matrix + clone: function () { + return new SVG.Matrix(this) + }, + + // Transform a matrix into another matrix by manipulating the space + transform: function (o) { + // Get all of the parameters required to form the matrix + var flipX = o.flip && (o.flip === 'x' || o.flip === 'both') ? -1 : 1 + var flipY = o.flip && (o.flip === 'y' || o.flip === 'both') ? -1 : 1 + var skewX = o.skew && o.skew.length ? o.skew[0] + : isFinite(o.skew) ? o.skew + : isFinite(o.skewX) ? o.skewX + : 0 + var skewY = o.skew && o.skew.length ? o.skew[1] + : isFinite(o.skew) ? o.skew + : isFinite(o.skewY) ? o.skewY + : 0 + var scaleX = o.scale && o.scale.length ? o.scale[0] * flipX + : isFinite(o.scale) ? o.scale * flipX + : isFinite(o.scaleX) ? o.scaleX * flipX + : flipX + var scaleY = o.scale && o.scale.length ? o.scale[1] * flipY + : isFinite(o.scale) ? o.scale * flipY + : isFinite(o.scaleY) ? o.scaleY * flipY + : flipY + var shear = o.shear || 0 + var theta = o.rotate || 0 + var ox = o.origin && o.origin.length ? o.origin[0] : o.ox || 0 + var oy = o.origin && o.origin.length ? o.origin[1] : o.oy || 0 + var px = o.position && o.position.length ? o.position[0] : o.px + var py = o.position && o.position.length ? o.position[1] : o.py + var tx = o.translate && o.translate.length ? o.translate[0] : o.tx || 0 + var ty = o.translate && o.translate.length ? o.translate[1] : o.ty || 0 + var rx = o.relative && o.relative.length ? o.relative[0] : o.rx || 0 + var ry = o.relative && o.relative.length ? o.relative[1] : o.ry || 0 + var currentTransform = new SVG.Matrix(this) + + // Construct the resulting matrix + var transformer = new SVG.Matrix() + .translate(-ox, -oy) + .scale(scaleX, scaleY) + .skew(skewX, skewY) + .shear(shear) + .rotate(theta) + .translate(ox, oy) + .translate(rx, ry) + .lmultiply(currentTransform) + + // If we want the origin at a particular place, we force it there + if (isFinite(px) && isFinite(py)) { + // Figure out where the origin went and the delta to get there + var p = new SVG.Point(ox - rx, oy - ry).transform(transformer) + var dx = px - p.x + var dy = py - p.y + + // Apply another translation + transformer = transformer.translate(dx, dy) + } + + // We can apply translations after everything else + transformer = transformer.translate(tx, ty) + return transformer + }, + + // Applies a matrix defined by its affine parameters + compose: function (o) { + // Get the parameters + var sx = o.scaleX || 1 + var sy = o.scaleY || 1 + var lam = o.shear || 0 + var theta = o.rotate || 0 + var tx = o.translateX || 0 + var ty = o.translateY || 0 + + // Apply the standard matrix + var result = new SVG.Matrix() + .scale(sx, sy) + .shear(lam) + .rotate(theta) + .translate(tx, ty) + .lmultiply(this) + return result + }, + + // Decomposes this matrix into its affine parameters + decompose: function () { + // Get the parameters from the matrix + var a = this.a + var b = this.b + var c = this.c + var d = this.d + var e = this.e + var f = this.f + + // Figure out if the winding direction is clockwise or counterclockwise + var determinant = a * d - b * c + var ccw = determinant > 0 ? 1 : -1 + + // Since we only shear in x, we can use the x basis to get the x scale + // and the rotation of the resulting matrix + var sx = ccw * Math.sqrt(a * a + b * b) + var theta = 180 / Math.PI * Math.atan2(ccw * b, ccw * a) + + // We can then solve the y basis vector simultaneously to get the other + // two affine parameters directly from these parameters + var lam = (a * c + b * d) / determinant + var sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a)) + + // Construct the decomposition and return it + return { + // Return the affine parameters + scaleX: sx, + scaleY: sy, + shear: lam, + rotate: theta, + translateX: e, + translateY: f, + + // Return the matrix parameters + matrix: new SVG.Matrix(this), + a: this.a, + b: this.b, + c: this.c, + d: this.d, + e: this.e, + f: this.f + } + }, + + // Morph one matrix into another + morph: function (matrix) { + // Store new destination + this.destination = new SVG.Matrix(matrix) + return this + }, + + // Get morphed matrix at a given position + at: function (pos) { + // Make sure a destination is defined + if (!this.destination) return this + + // Calculate morphed matrix at a given position + var matrix = new SVG.Matrix({ + a: this.a + (this.destination.a - this.a) * pos, + b: this.b + (this.destination.b - this.b) * pos, + c: this.c + (this.destination.c - this.c) * pos, + d: this.d + (this.destination.d - this.d) * pos, + e: this.e + (this.destination.e - this.e) * pos, + f: this.f + (this.destination.f - this.f) * pos + }) + + return matrix + }, + + // Left multiplies by the given matrix + multiply: function (matrix) { + // Get the matrices + var l = this + var r = parseMatrix(matrix) + + // Work out the product directly + var a = l.a * r.a + l.c * r.b + var b = l.b * r.a + l.d * r.b + var c = l.a * r.c + l.c * r.d + var d = l.b * r.c + l.d * r.d + var e = l.e + l.a * r.e + l.c * r.f + var f = l.f + l.b * r.e + l.d * r.f + + // Form the matrix and return it + var product = new SVG.Matrix(a, b, c, d, e, f) + return product + }, + + lmultiply: function (matrix) { + var l = parseMatrix(matrix) + return l.multiply(this) + }, + + // Inverses matrix + inverse: function () { + return new SVG.Matrix(this.native().inverse()) + }, + + // Translate matrix + translate: function (x, y) { + var translation = new SVG.Matrix(this) + translation.e += x || 0 + translation.f += y || 0 + return translation + }, + + // Scale matrix + scale: function (x, y, cx, cy) { + // Support uniform scaling + if (arguments.length === 1) { + y = x + } else if (arguments.length === 3) { + cy = cx + cx = y + y = x + } + + // Rotate the current matrix + var scale = new SVG.Matrix(x, 0, 0, y, 0, 0) + var matrix = this.around(cx, cy, scale) + return matrix + }, + + // Rotate matrix + rotate: function (r, cx, cy) { + // Convert degrees to radians + r = SVG.utils.radians(r) + + // Construct the rotation matrix + var rotation = new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0) + var matrix = this.around(cx, cy, rotation) + return matrix + }, + + // Flip matrix on x or y, at a given offset + flip: function (axis, around) { + return axis === 'x' ? this.scale(-1, 1, around, 0) + : axis === 'y' ? this.scale(1, -1, 0, around) + : this.scale(-1, -1, axis, around || axis) // Define an x, y flip point + }, + + // Shear matrix + shear: function (a, cx, cy) { + var shear = new SVG.Matrix(1, 0, a, 1, 0, 0) + var matrix = this.around(cx, cy, shear) + return matrix + }, + + // Skew Matrix + skew: function (x, y, cx, cy) { + // support uniformal skew + if (arguments.length === 1) { + y = x + } else if (arguments.length === 3) { + cy = cx + cx = y + y = x + } + + // Convert degrees to radians + x = SVG.utils.radians(x) + y = SVG.utils.radians(y) + + // Construct the matrix + var skew = new SVG.Matrix(1, Math.tan(y), Math.tan(x), 1, 0, 0) + var matrix = this.around(cx, cy, skew) + return matrix + }, + + // SkewX + skewX: function (x, cx, cy) { + return this.skew(x, 0, cx, cy) + }, + + // SkewY + skewY: function (y, cx, cy) { + return this.skew(0, y, cx, cy) + }, + + // Transform around a center point + around: function (cx, cy, matrix) { + var dx = cx || 0 + var dy = cy || 0 + return this.translate(-dx, -dy).lmultiply(matrix).translate(dx, dy) + }, + + // Convert to native SVGMatrix + native: function () { + // create new matrix + var matrix = SVG.parser.nodes.svg.node.createSVGMatrix() + + // update with current values + for (var i = abcdef.length - 1; i >= 0; i--) { + matrix[abcdef[i]] = this[abcdef[i]] + } + + return matrix + }, + + // Check if two matrices are equal + equals: function (other) { + var comp = parseMatrix(other) + return closeEnough(this.a, comp.a) && closeEnough(this.b, comp.b) && + closeEnough(this.c, comp.c) && closeEnough(this.d, comp.d) && + closeEnough(this.e, comp.e) && closeEnough(this.f, comp.f) + }, + + // Convert matrix to string + toString: function () { + return 'matrix(' + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ')' + } + }, + + // Define parent + parent: SVG.Element, + + // Add parent method + construct: { + // Get current matrix + ctm: function () { + return new SVG.Matrix(this.node.getCTM()) + }, + // Get current screen matrix + screenCTM: function () { + /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537 + This is needed because FF does not return the transformation matrix + for the inner coordinate system when getScreenCTM() is called on nested svgs. + However all other Browsers do that */ + if (this instanceof SVG.Doc && !this.isRoot()) { + var rect = this.rect(1, 1) + var m = rect.node.getScreenCTM() + rect.remove() + return new SVG.Matrix(m) + } + return new SVG.Matrix(this.node.getScreenCTM()) + } + } +}) + + +SVG.Point = SVG.invent({ + // Initialize + create: function (x, y) { + var base = {x: 0, y: 0} + var source + + // ensure source as object + source = Array.isArray(x) ? {x: x[0], y: x[1]} + : typeof x === 'object' ? {x: x.x, y: x.y} + : x != null ? {x: x, y: (y != null ? y : x)} + : base // If y has no value, then x is used has its value + + // merge source + this.x = source.x + this.y = source.y + }, + + // Add methods + extend: { + // Clone point + clone: function () { + return new SVG.Point(this) + }, + + // Morph one point into another + morph: function (x, y) { + // store new destination + this.destination = new SVG.Point(x, y) + return this + }, + + // Get morphed point at a given position + at: function (pos) { + // make sure a destination is defined + if (!this.destination) return this + + // calculate morphed matrix at a given position + var point = new SVG.Point({ + x: this.x + (this.destination.x - this.x) * pos, + y: this.y + (this.destination.y - this.y) * pos + }) + return point + }, + + // Convert to native SVGPoint + native: function () { + // create new point + var point = SVG.parser.nodes.svg.node.createSVGPoint() + + // update with current values + point.x = this.x + point.y = this.y + return point + }, + + // transform point with matrix + transform: function (matrix) { + return new SVG.Point(this.native().matrixTransform(matrix.native())) + } + } +}) + +SVG.extend(SVG.Element, { + + // Get point + point: function (x, y) { + return new SVG.Point(x, y).transform(this.screenCTM().inverse()) + } +}) + +SVG.extend(SVG.Element, { + // Set svg element attribute + attr: function (a, v, n) { + // act as full getter + if (a == null) { + // get an object of attributes + a = {} + v = this.node.attributes + for (n = v.length - 1; n >= 0; n--) { + a[v[n].nodeName] = SVG.regex.isNumber.test(v[n].nodeValue) + ? parseFloat(v[n].nodeValue) + : v[n].nodeValue + } + return a + } else if (typeof a === 'object') { + // apply every attribute individually if an object is passed + for (v in a) this.attr(v, a[v]) + } else if (v === null) { + // remove value + this.node.removeAttribute(a) + } else if (v == null) { + // act as a getter if the first and only argument is not an object + v = this.node.getAttribute(a) + return v == null ? SVG.defaults.attrs[a] + : SVG.regex.isNumber.test(v) ? parseFloat(v) + : v + } else { + // convert image fill and stroke to patterns + if (a === 'fill' || a === 'stroke') { + if (SVG.regex.isImage.test(v)) { + v = this.doc().defs().image(v) + } + + if (v instanceof SVG.Image) { + v = this.doc().defs().pattern(0, 0, function () { + this.add(v) + }) + } + } + + // ensure correct numeric values (also accepts NaN and Infinity) + if (typeof v === 'number') { + v = new SVG.Number(v) + } else if (SVG.Color.isColor(v)) { + // ensure full hex color + v = new SVG.Color(v) + } else if (Array.isArray(v)) { + // parse array values + v = new SVG.Array(v) + } + + // if the passed attribute is leading... + if (a === 'leading') { + // ... call the leading method instead + if (this.leading) { + this.leading(v) + } + } else { + // set given attribute on node + typeof n === 'string' ? this.node.setAttributeNS(n, a, v.toString()) + : this.node.setAttribute(a, v.toString()) + } + + // rebuild if required + if (this.rebuild && (a === 'font-size' || a === 'x')) { + this.rebuild(a, v) + } + } + + return this + } +}) + +/* global arrayToMatrix */ + +SVG.extend(SVG.Element, { + // Reset all transformations + untransform: function () { + return this.attr('transform', null) + }, + + // merge the whole transformation chain into one matrix and returns it + matrixify: function () { + var matrix = (this.attr('transform') || '') + // split transformations + .split(SVG.regex.transforms).slice(0, -1).map(function (str) { + // generate key => value pairs + var kv = str.trim().split('(') + return [kv[0], + kv[1].split(SVG.regex.delimiter) + .map(function (str) { return parseFloat(str) }) + ] + }) + .reverse() + // merge every transformation into one matrix + .reduce(function (matrix, transform) { + if (transform[0] === 'matrix') { + return matrix.lmultiply(arrayToMatrix(transform[1])) + } + return matrix[transform[0]].apply(matrix, transform[1]) + }, new SVG.Matrix()) + + return matrix + }, + + // add an element to another parent without changing the visual representation on the screen + toParent: function (parent) { + if (this === parent) return this + var ctm = this.screenCTM() + var pCtm = parent.screenCTM().inverse() + + this.addTo(parent).untransform().transform(pCtm.multiply(ctm)) + + return this + }, + + // same as above with parent equals root-svg + toDoc: function () { + return this.toParent(this.doc()) + } +}) + +SVG.extend(SVG.Element, { + + // Add transformations + transform: function (o, cyOrRel) { + // Get the bounding box of the element with no transformations applied + var bbox = this.bbox() + + // Act as a getter if no object was passed + if (o == null || typeof o === 'string') { + var decomposed = new SVG.Matrix(this).decompose() + return decomposed[o] || decomposed + + // Let the user pass in a matrix as well + } else if (o.a != null) { + // Construct a matrix from the first parameter + var matrix = new SVG.Matrix(o) + + // If we have a relative matrix, we just apply the old matrix + if (cyOrRel != null) { + var oldMatrix = new SVG.Matrix(this) + matrix = matrix.multiply(oldMatrix) + } + + // Apply the matrix directly + return this.attr('transform', matrix) + + // Allow the user to define the origin with a string + } else if (typeof o.origin === 'string' || + (o.origin == null && o.ox == null && o.oy == null) + ) { + // Get the bounding box and string to use in our calculations + var string = typeof o.origin === 'string' + ? o.origin.toLowerCase().trim() + : 'center' // We want the center by default + var height = bbox.height + var width = bbox.width + var x = bbox.x + var y = bbox.y + + // Set the bounds eg : "bottom-left", "Top right", "middle" etc... + o.ox = string.includes('left') ? x + : string.includes('right') ? x + width + : x + width / 2 + o.oy = string.includes('top') ? y + : string.includes('bottom') ? y + height + : y + height / 2 + + // Make sure we only pass ox and oy + o.origin = null + } + + // The user can pass a boolean, an SVG.Element or an SVG.Matrix or nothing + var result = new SVG.Matrix(cyOrRel === true ? this : cyOrRel).transform(o) + var matrixString = result.toString() + + // Apply the result directly to this matrix + return this.attr('transform', matrixString) + } +}) + +SVG.extend(SVG.FX, { + transform: function (o, relative) { + + // // get target in case of the fx module, otherwise reference this + // var target = this.target() + // , matrix, bbox + // + // // act as a getter + // if (typeof o !== 'object') { + // // get current matrix + // matrix = new SVG.Matrix(target).extract() + // + // return typeof o === 'string' ? matrix[o] : matrix + // } + // + // // ensure relative flag + // relative = !!relative || !!o.relative + // + // // act on matrix + // if (o.a != null) { + // matrix = new SVG.Matrix(o) + // + // // act on rotation + // } else if (o.rotation != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // apply transformation + // matrix = new SVG.Rotate(o.rotation, o.cx, o.cy) + // + // // act on scale + // } else if (o.scale != null || o.scaleX != null || o.scaleY != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // ensure scale values on both axes + // o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 + // o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 + // + // matrix = new SVG.Scale(o.scaleX, o.scaleY, o.cx, o.cy) + // + // // act on skew + // } else if (o.skewX != null || o.skewY != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // ensure skew values on both axes + // o.skewX = o.skewX != null ? o.skewX : 0 + // o.skewY = o.skewY != null ? o.skewY : 0 + // + // matrix = new SVG.Skew(o.skewX, o.skewY, o.cx, o.cy) + // + // // act on flip + // } else if (o.flip) { + // if(o.flip == 'x' || o.flip == 'y') { + // o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset + // } else { + // if(o.offset == null) { + // bbox = target.bbox() + // o.flip = bbox.cx + // o.offset = bbox.cy + // } else { + // o.flip = o.offset + // } + // } + // + // matrix = new SVG.Matrix().flip(o.flip, o.offset) + // + // // act on translate + // } else if (o.x != null || o.y != null) { + // matrix = new SVG.Translate(o.x, o.y) + // } + // + // if(!matrix) return this + // + // matrix.relative = relative + // + // this.last().transforms.push(matrix) + // + // return this._callStart() + // } + // // ensure scale values on both axes + // o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 + // o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 + // + // matrix = new SVG.Scale(o.scaleX, o.scaleY, o.cx, o.cy) + // + // // act on skew + // } else if (o.skewX != null || o.skewY != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // ensure skew values on both axes + // o.skewX = o.skewX != null ? o.skewX : 0 + // o.skewY = o.skewY != null ? o.skewY : 0 + // + // matrix = new SVG.Skew(o.skewX, o.skewY, o.cx, o.cy) + // + // // act on flip + // } else if (o.flip) { + // if (o.flip === 'x' || o.flip === 'y') { + // o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset + // } else { + // if (o.offset == null) { + // bbox = target.bbox() + // o.flip = bbox.cx + // o.offset = bbox.cy + // } else { + // o.flip = o.offset + // } + // } + // + // matrix = new SVG.Matrix().flip(o.flip, o.offset) + // + // // act on translate + // } else if (o.x != null || o.y != null) { + // matrix = new SVG.Translate(o.x, o.y) + // } + // + // if (!matrix) return this + // + // matrix.relative = relative + // + // this.last().transforms.push(matrix) + // + // return this._callStart() + } +}) + +// TODO: DESTROY +// ======= +// +// +// SVG.Transformation = SVG.invent({ +// +// create: function(source, inversed){ +// +// if(arguments.length > 1 && typeof inversed != 'boolean'){ +// return this.constructor.call(this, [].slice.call(arguments)) +// } +// +// if(Array.isArray(source)){ +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// this[this.arguments[i]] = source[i] +// } +// } else if(typeof source == 'object'){ +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// this[this.arguments[i]] = source[this.arguments[i]] +// } +// } +// +// this.inversed = false +// +// if(inversed === true){ +// this.inversed = true +// } +// +// } +// +// , extend: { +// +// arguments: [] +// , method: '' +// +// , at: function(pos){ +// +// var params = [] +// +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// params.push(this[this.arguments[i]]) +// } +// +// var m = this._undo || new SVG.Matrix() +// +// m = new SVG.Matrix().morph(SVG.Matrix.prototype[this.method].apply(m, params)).at(pos) +// +// return this.inversed ? m.inverse() : m +// +// } +// +// , undo: function(o){ +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// o[this.arguments[i]] = typeof this[this.arguments[i]] == 'undefined' ? 0 : o[this.arguments[i]] +// } +// +// // The method SVG.Matrix.extract which was used before calling this +// // method to obtain a value for the parameter o doesn't return a cx and +// // a cy so we use the ones that were provided to this object at its creation +// o.cx = this.cx +// o.cy = this.cy +// +// this._undo = new SVG[capitalize(this.method)](o, true).at(1) +// +// return this +// } +// +// } +// +// }) +// +// SVG.Translate = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['transformedX', 'transformedY'] +// , method: 'translate' +// } +// +// }) +// +// SVG.Rotate = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['rotation', 'cx', 'cy'] +// , method: 'rotate' +// , at: function(pos){ +// var m = new SVG.Matrix().rotate(new SVG.Number().morph(this.rotation - (this._undo ? this._undo.rotation : 0)).at(pos), this.cx, this.cy) +// return this.inversed ? m.inverse() : m +// } +// , undo: function(o){ +// this._undo = o +// return this +// } +// } +// +// }) +// +// SVG.Scale = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['scaleX', 'scaleY', 'cx', 'cy'] +// , method: 'scale' +// } +// +// }) +// +// SVG.Skew = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['skewX', 'skewY', 'cx', 'cy'] +// , method: 'skew' +// } +// +// }) + +/* global camelCase */ + +SVG.extend(SVG.Element, { + // Dynamic style generator + css: function (s, v) { + var ret = {} + var t, i + if (arguments.length === 0) { + // get full style as object + this.node.style.cssText.split(/\s*;\s*/).filter(function (el) { return !!el.length }).forEach(function (el) { + t = el.split(/\s*:\s*/) + ret[t[0]] = t[1] + }) + return ret + } + + if (arguments.length < 2) { + // get style properties in the array + if (Array.isArray(s)) { + for (i = s.length; i--;) { + ret[camelCase(s[i])] = this.node.style[camelCase(s[i])] + } + return ret + } + + // get style for property + if (typeof s === 'string') { + return this.node.style[camelCase(s)] + } + + // set styles in object + if (typeof s === 'object') { + for (i in s) { + // set empty string if null/undefined/'' was given + this.node.style[camelCase(i)] = (s[i] == null || SVG.regex.isBlank.test(s[i])) ? '' : s[i] + } + } + } + + // set style for property + if (arguments.length === 2) { + this.node.style[camelCase(s)] = (v == null || SVG.regex.isBlank.test(v)) ? '' : v + } + + return this + } +}) + +/* global createElement */ + +SVG.Parent = SVG.invent({ + // Initialize node + create: function (node) { + this.constructor(node) + }, + + // Inherit from + inherit: SVG.Element, + + // Add class methods + extend: { + // Returns all child elements + children: function () { + return SVG.utils.map(this.node.children, function (node) { + return SVG.adopt(node) + }) + }, + // Add given element at a position + add: function (element, i) { + element = createElement(element) + + if (element.node !== this.node.children[i]) { + this.node.insertBefore(element.node, this.node.children[i] || null) + } + + return this + }, + // Basically does the same as `add()` but returns the added element instead + put: function (element, i) { + this.add(element, i) + return element.instance || element + }, + // Checks if the given element is a child + has: function (element) { + return this.index(element) >= 0 + }, + // Gets index of given element + index: function (element) { + return [].slice.call(this.node.children).indexOf(element.node) + }, + // Get a element at the given index + get: function (i) { + return SVG.adopt(this.node.children[i]) + }, + // Get first child + first: function () { + return this.get(0) + }, + // Get the last child + last: function () { + return this.get(this.node.children.length - 1) + }, + // Iterates over all children and invokes a given block + each: function (block, deep) { + var children = this.children() + var i, il + + for (i = 0, il = children.length; i < il; i++) { + if (children[i] instanceof SVG.Element) { + block.apply(children[i], [i, children]) + } + + if (deep && (children[i] instanceof SVG.Parent)) { + children[i].each(block, deep) + } + } + + return this + }, + // Remove a given child + removeElement: function (element) { + this.node.removeChild(element.node) + + return this + }, + // Remove all elements in this container + clear: function () { + // remove children + while (this.node.hasChildNodes()) { + this.node.removeChild(this.node.lastChild) + } + + // remove defs reference + delete this._defs + + return this + } + } + +}) + +SVG.extend(SVG.Parent, { + flatten: function (parent) { + // flattens is only possible for nested svgs and groups + if (!(this instanceof SVG.G || this instanceof SVG.Doc)) { + return this + } + + parent = parent || (this instanceof SVG.Doc && this.isRoot() ? this : this.parent(SVG.Parent)) + + this.each(function () { + if (this instanceof SVG.Defs) return this + if (this instanceof SVG.Parent) return this.flatten(parent) + return this.toParent(parent) + }) + + // we need this so that SVG.Doc does not get removed + this.node.firstElementChild || this.remove() + + return this + }, + ungroup: function (parent) { + // ungroup is only possible for nested svgs and groups + if (!(this instanceof SVG.G || (this instanceof SVG.Doc && !this.isRoot()))) { + return this + } + + parent = parent || this.parent(SVG.Parent) + + this.each(function () { + return this.toParent(parent) + }) + + // we need this so that SVG.Doc does not get removed + this.remove() + + return this + } +}) + +SVG.Container = SVG.invent({ + // Initialize node + create: function (node) { + this.constructor(node) + }, + + // Inherit from + inherit: SVG.Parent +}) + +// Add events to elements + +;[ 'click', + 'dblclick', + 'mousedown', + 'mouseup', + 'mouseover', + 'mouseout', + 'mousemove', + 'mouseenter', + 'mouseleave', + 'touchstart', + 'touchmove', + 'touchleave', + 'touchend', + 'touchcancel' ].forEach(function (event) { + // add event to SVG.Element + SVG.Element.prototype[event] = function (f) { + // bind event to element rather than element node + SVG.on(this, event, f) + return this + } + }) + +SVG.listenerId = 0 + +// Add event binder in the SVG namespace +SVG.on = function (node, events, listener, binding, options) { + var l = listener.bind(binding || node) + var n = node instanceof SVG.Element ? node.node : node + + // ensure instance object for nodes which are not adopted + n.instance = n.instance || {events: {}} + + var bag = n.instance.events + + // add id to listener + if (!listener._svgjsListenerId) { listener._svgjsListenerId = ++SVG.listenerId } + + events.split(SVG.regex.delimiter).forEach(function (event) { + var ev = event.split('.')[0] + var ns = event.split('.')[1] || '*' + + // ensure valid object + bag[ev] = bag[ev] || {} + bag[ev][ns] = bag[ev][ns] || {} + + // reference listener + bag[ev][ns][listener._svgjsListenerId] = l + + // add listener + n.addEventListener(ev, l, options || false) + }) +} + +// Add event unbinder in the SVG namespace +SVG.off = function (node, events, listener, options) { + var n = node instanceof SVG.Element ? node.node : node + if (!n.instance) return + + // listener can be a function or a number + if (typeof listener === 'function') { + listener = listener._svgjsListenerId + if (!listener) return + } + + var bag = n.instance.events + + ;(events || '').split(SVG.regex.delimiter).forEach(function (event) { + var ev = event && event.split('.')[0] + var ns = event && event.split('.')[1] + var namespace, l + + if (listener) { + // remove listener reference + if (bag[ev] && bag[ev][ns || '*']) { + // removeListener + n.removeEventListener(ev, bag[ev][ns || '*'][listener], options || false) + + delete bag[ev][ns || '*'][listener] + } + } else if (ev && ns) { + // remove all listeners for a namespaced event + if (bag[ev] && bag[ev][ns]) { + for (l in bag[ev][ns]) { SVG.off(n, [ev, ns].join('.'), l) } + + delete bag[ev][ns] + } + } else if (ns) { + // remove all listeners for a specific namespace + for (event in bag) { + for (namespace in bag[event]) { + if (ns === namespace) { SVG.off(n, [event, ns].join('.')) } + } + } + } else if (ev) { + // remove all listeners for the event + if (bag[ev]) { + for (namespace in bag[ev]) { SVG.off(n, [ev, namespace].join('.')) } + + delete bag[ev] + } + } else { + // remove all listeners on a given node + for (event in bag) { SVG.off(n, event) } + + n.instance.events = {} + } + }) +} + +SVG.extend(SVG.Element, { + // Bind given event to listener + on: function (event, listener, binding, options) { + SVG.on(this, event, listener, binding, options) + return this + }, + // Unbind event from listener + off: function (event, listener) { + SVG.off(this.node, event, listener) + return this + }, + dispatch: function (event, data) { + // Dispatch event + if (event instanceof window.Event) { + this.node.dispatchEvent(event) + } else { + this.node.dispatchEvent(event = new window.CustomEvent(event, {detail: data, cancelable: true})) + } + return event + }, + // Fire given event + fire: function (event, data) { + this.dispatch(event, data) + return this + } +}) + +SVG.Defs = SVG.invent({ + // Initialize node + create: 'defs', + + // Inherit from + inherit: SVG.Container +}) + +SVG.G = SVG.invent({ + // Initialize node + create: 'g', + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Move over x-axis + x: function (x) { + return x == null ? this.transform().e : this.translate(x - this.gbox().x, 0) + }, + // Move over y-axis + y: function (y) { + return y == null ? this.transform().f : this.translate(0, y - this.gbox().y) + }, + // Move by center over x-axis + cx: function (x) { + return x == null ? this.gbox().cx : this.x(x - this.gbox().width / 2) + }, + // Move by center over y-axis + cy: function (y) { + return y == null ? this.gbox().cy : this.y(y - this.gbox().height / 2) + }, + gbox: function () { + var bbox = this.bbox() + var trans = this.transform() + + bbox.x += trans.e + bbox.x2 += trans.e + bbox.cx += trans.e + + bbox.y += trans.f + bbox.y2 += trans.f + bbox.cy += trans.f + + return bbox + } + }, + + // Add parent method + construct: { + // Create a group element + group: function () { + return this.put(new SVG.G()) + } + } +}) + +// ### This module adds backward / forward functionality to elements. + +// +SVG.extend(SVG.Element, { + // Get all siblings, including myself + siblings: function () { + return this.parent().children() + }, + + // Get the curent position siblings + position: function () { + return this.parent().index(this) + }, + + // Get the next element (will return null if there is none) + next: function () { + return this.siblings()[this.position() + 1] + }, + + // Get the next element (will return null if there is none) + prev: function () { + return this.siblings()[this.position() - 1] + }, + + // Send given element one step forward + forward: function () { + var i = this.position() + 1 + var p = this.parent() + + // move node one step forward + p.removeElement(this).add(this, i) + + // make sure defs node is always at the top + if (p instanceof SVG.Doc) { + p.node.appendChild(p.defs().node) + } + + return this + }, + + // Send given element one step backward + backward: function () { + var i = this.position() + + if (i > 0) { + this.parent().removeElement(this).add(this, i - 1) + } + + return this + }, + + // Send given element all the way to the front + front: function () { + var p = this.parent() + + // Move node forward + p.node.appendChild(this.node) + + // Make sure defs node is always at the top + if (p instanceof SVG.Doc) { + p.node.appendChild(p.defs().node) + } + + return this + }, + + // Send given element all the way to the back + back: function () { + if (this.position() > 0) { + this.parent().removeElement(this).add(this, 0) + } + + return this + }, + + // Inserts a given element before the targeted element + before: function (element) { + element.remove() + + var i = this.position() + + this.parent().add(element, i) + + return this + }, + + // Insters a given element after the targeted element + after: function (element) { + element.remove() + + var i = this.position() + + this.parent().add(element, i + 1) + + return this + } +}) + +SVG.Mask = SVG.invent({ + // Initialize node + create: 'mask', + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Unmask all masked elements and remove itself + remove: function () { + // unmask all targets + this.targets().forEach(function (el) { + el.unmask() + }) + + // remove mask from parent + return SVG.Element.prototype.remove.call(this) + }, + + targets: function () { + return SVG.select('svg [mask*="' + this.id() + '"]') + } + }, + + // Add parent method + construct: { + // Create masking element + mask: function () { + return this.defs().put(new SVG.Mask()) + } + } +}) + +SVG.extend(SVG.Element, { + // Distribute mask to svg element + maskWith: function (element) { + // 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.id() + '")') + }, + // Unmask element + unmask: function () { + return this.attr('mask', null) + }, + masker: function () { + return this.reference('mask') + } +}) + +SVG.ClipPath = SVG.invent({ + // Initialize node + create: 'clipPath', + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Unclip all clipped elements and remove itself + remove: function () { + // unclip all targets + this.targets().forEach(function (el) { + el.unclip() + }) + + // remove clipPath from parent + return SVG.Element.prototype.remove.call(this) + }, + + targets: function () { + return SVG.select('svg [clip-path*="' + this.id() + '"]') + } + }, + + // Add parent method + construct: { + // Create clipping element + clip: function () { + return this.defs().put(new SVG.ClipPath()) + } + } +}) + +// +SVG.extend(SVG.Element, { + // Distribute clipPath to svg element + clipWith: function (element) { + // use given clip or create a new one + var clipper = element instanceof SVG.ClipPath ? element : this.parent().clip().add(element) + + // apply mask + return this.attr('clip-path', 'url("#' + clipper.id() + '")') + }, + // Unclip element + unclip: function () { + return this.attr('clip-path', null) + }, + clipper: function () { + return this.reference('clip-path') + } + +}) + +SVG.Gradient = SVG.invent({ + // Initialize node + create: function (type) { + this.constructor(typeof type === 'object' ? type : SVG.create(type + 'Gradient')) + }, + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Add a color stop + stop: function (offset, color, opacity) { + return this.put(new SVG.Stop()).update(offset, color, opacity) + }, + // Update gradient + update: function (block) { + // remove all stops + this.clear() + + // invoke passed block + if (typeof block === 'function') { + block.call(this, this) + } + + return this + }, + // Return the fill id + url: function () { + return 'url(#' + this.id() + ')' + }, + // Alias string convertion to fill + toString: function () { + return this.url() + }, + // custom attr to handle transform + attr: function (a, b, c) { + if (a === 'transform') a = 'gradientTransform' + return SVG.Container.prototype.attr.call(this, a, b, c) + } + }, + + // Add parent method + construct: { + // Create gradient element in defs + gradient: function (type, block) { + return this.defs().gradient(type, block) + } + } +}) + +// Add animatable methods to both gradient and fx module +SVG.extend([SVG.Gradient, SVG.FX], { + // From position + from: function (x, y) { + 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 === '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) }) + } +}) + +// Base gradient generation +SVG.extend(SVG.Defs, { + // define gradient + gradient: function (type, block) { + return this.put(new SVG.Gradient(type)).update(block) + } + +}) + +SVG.Stop = SVG.invent({ + // Initialize node + create: 'stop', + + // Inherit from + inherit: SVG.Element, + + // Add class methods + extend: { + // add color stops + update: function (o) { + if (typeof o === 'number' || o instanceof SVG.Number) { + o = { + offset: arguments[0], + color: arguments[1], + opacity: arguments[2] + } + } + + // set attributes + if (o.opacity != null) this.attr('stop-opacity', o.opacity) + if (o.color != null) this.attr('stop-color', o.color) + if (o.offset != null) this.attr('offset', new SVG.Number(o.offset)) + + return this + } + } + +}) + +SVG.Pattern = SVG.invent({ + // Initialize node + create: 'pattern', + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Return the fill id + url: function () { + return 'url(#' + this.id() + ')' + }, + // Update pattern by rebuilding + update: function (block) { + // remove content + this.clear() + + // invoke passed block + if (typeof block === 'function') { + block.call(this, this) + } + + return this + }, + // Alias string convertion to fill + toString: function () { + return this.url() + }, + // custom attr to handle transform + attr: function (a, b, c) { + if (a === 'transform') a = 'patternTransform' + return SVG.Container.prototype.attr.call(this, a, b, c) + } + + }, + + // Add parent method + construct: { + // Create pattern element in defs + pattern: function (width, height, block) { + return this.defs().pattern(width, height, block) + } + } +}) + +SVG.extend(SVG.Defs, { + // Define gradient + pattern: function (width, height, block) { + return this.put(new SVG.Pattern()).update(block).attr({ + x: 0, + y: 0, + width: width, + height: height, + patternUnits: 'userSpaceOnUse' + }) + } + +}) + +SVG.Doc = SVG.invent({ + // Initialize node + create: function (node) { + this.constructor(node || SVG.create('svg')) + + // set svg element attributes and ensure defs node + this.namespace() + }, + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + isRoot: function () { + return !this.node.parentNode || !(this.node.parentNode instanceof window.SVGElement) || this.node.parentNode.nodeName === '#document' + }, + // Check if this is a root svg. If not, call docs from this element + doc: function () { + if (this.isRoot()) return this + return SVG.Element.prototype.doc.call(this) + }, + // Add namespaces + namespace: function () { + if (!this.isRoot()) return this.doc().namespace() + return this + .attr({ xmlns: SVG.ns, version: '1.1' }) + .attr('xmlns:xlink', SVG.xlink, SVG.xmlns) + .attr('xmlns:svgjs', SVG.svgjs, SVG.xmlns) + }, + // Creates and returns defs element + defs: function () { + if (!this.isRoot()) return this.doc().defs() + return SVG.adopt(this.node.getElementsByTagName('defs')[0]) || this.put(new SVG.Defs()) + }, + // custom parent method + parent: function (type) { + if (this.isRoot()) { + return this.node.parentNode.nodeName === '#document' ? null : this.node.parentNode + } + + return SVG.Element.prototype.parent.call(this, type) + }, + // Removes the doc from the DOM + remove: function () { + if (!this.isRoot()) { + return SVG.Element.prototype.remove.call(this) + } + + if (this.parent()) { + this.parent().removeChild(this.node) + } + + return this + }, + clear: function () { + // remove children + while (this.node.hasChildNodes()) { + this.node.removeChild(this.node.lastChild) + } + return this + } + }, + construct: { + // Create nested svg document + nested: function () { + return this.put(new SVG.Doc()) + } + } +}) + + +SVG.Shape = SVG.invent({ + // Initialize node + create: function (node) { + this.constructor(node) + }, + + // Inherit from + inherit: SVG.Element +}) + + +SVG.Bare = SVG.invent({ + // Initialize + create: function (element, inherit) { + // construct element + this.constructor(SVG.create(element)) + + // inherit custom methods + if (inherit) { + for (var method in inherit.prototype) { + if (typeof inherit.prototype[method] === 'function') { + this[method] = inherit.prototype[method] + } + } + } + }, + + // Inherit from + inherit: SVG.Element, + + // Add methods + extend: { + // Insert some plain text + words: function (text) { + // remove contents + while (this.node.hasChildNodes()) { + this.node.removeChild(this.node.lastChild) + } + + // create text node + this.node.appendChild(document.createTextNode(text)) + + return this + } + } +}) + +SVG.extend(SVG.Parent, { + // Create an element that is not described by SVG.js + element: function (element, inherit) { + return this.put(new SVG.Bare(element, inherit)) + } +}) + + +SVG.Symbol = SVG.invent({ + // Initialize node + create: 'symbol', + + // Inherit from + inherit: SVG.Container, + + construct: { + // create symbol + symbol: function () { + return this.put(new SVG.Symbol()) + } + } +}) + + +SVG.Use = SVG.invent({ + // Initialize node + create: 'use', + + // Inherit from + inherit: SVG.Shape, + + // Add class methods + extend: { + // Use element as a reference + element: function (element, file) { + // Set lined element + return this.attr('href', (file || '') + '#' + element, SVG.xlink) + } + }, + + // Add parent method + construct: { + // Create a use element + use: function (element, file) { + return this.put(new SVG.Use()).element(element, file) + } + } +}) + + +SVG.Rect = SVG.invent({ + // Initialize node + create: 'rect', + + // Inherit from + inherit: SVG.Shape, + + // Add parent method + construct: { + // Create a rect element + rect: function (width, height) { + return this.put(new SVG.Rect()).size(width, height) + } + } +}) + +/* global proportionalSize */ + +SVG.Circle = SVG.invent({ + // Initialize node + create: 'circle', + + // Inherit from + inherit: SVG.Shape, + + // Add parent method + construct: { + // Create circle element, based on ellipse + circle: function (size) { + return this.put(new SVG.Circle()).rx(new SVG.Number(size).divide(2)).move(0, 0) + } + } +}) + +SVG.extend([SVG.Circle, SVG.FX], { + // Radius x value + rx: function (rx) { + return this.attr('r', rx) + }, + // Alias radius x value + ry: function (ry) { + return this.rx(ry) + } +}) + +SVG.Ellipse = SVG.invent({ + // Initialize node + create: 'ellipse', + + // Inherit from + inherit: SVG.Shape, + + // Add parent method + construct: { + // Create an ellipse + ellipse: function (width, height) { + return this.put(new SVG.Ellipse()).size(width, height).move(0, 0) + } + } +}) + +SVG.extend([SVG.Ellipse, SVG.Rect, SVG.FX], { + // Radius x value + rx: function (rx) { + return this.attr('rx', rx) + }, + // Radius y value + ry: function (ry) { + return this.attr('ry', ry) + } +}) + +// Add common method +SVG.extend([SVG.Circle, SVG.Ellipse], { + // Move over x-axis + x: function (x) { + return x == null ? this.cx() - this.rx() : this.cx(x + this.rx()) + }, + // Move over y-axis + y: function (y) { + return y == null ? this.cy() - this.ry() : this.cy(y + this.ry()) + }, + // Move by center over x-axis + cx: function (x) { + return x == null ? this.attr('cx') : this.attr('cx', x) + }, + // Move by center over y-axis + cy: function (y) { + return y == null ? this.attr('cy') : this.attr('cy', y) + }, + // Set width of element + width: function (width) { + return width == null ? this.rx() * 2 : this.rx(new SVG.Number(width).divide(2)) + }, + // Set height of element + height: function (height) { + return height == null ? this.ry() * 2 : this.ry(new SVG.Number(height).divide(2)) + }, + // Custom size function + size: function (width, height) { + var p = proportionalSize(this, width, height) + + return this + .rx(new SVG.Number(p.width).divide(2)) + .ry(new SVG.Number(p.height).divide(2)) + } +}) + +/* global proportionalSize */ + +SVG.Line = SVG.invent({ + // Initialize node + create: 'line', + + // Inherit from + inherit: SVG.Shape, + + // Add class methods + extend: { + // Get array + array: function () { + return new SVG.PointArray([ + [ this.attr('x1'), this.attr('y1') ], + [ this.attr('x2'), this.attr('y2') ] + ]) + }, + + // Overwrite native plot() method + plot: function (x1, y1, x2, y2) { + if (x1 == null) { + return this.array() + } else if (typeof y1 !== 'undefined') { + x1 = { x1: x1, y1: y1, x2: x2, y2: y2 } + } else { + x1 = new SVG.PointArray(x1).toLine() + } + + return this.attr(x1) + }, + + // Move by left top corner + move: function (x, y) { + return this.attr(this.array().move(x, y).toLine()) + }, + + // Set element size to given width and height + size: function (width, height) { + var p = proportionalSize(this, width, height) + return this.attr(this.array().size(p.width, p.height).toLine()) + } + }, + + // Add parent method + construct: { + // Create a line element + line: function (x1, y1, x2, y2) { + // make sure plot is called as a setter + // x1 is not necessarily a number, it can also be an array, a string and a SVG.PointArray + return SVG.Line.prototype.plot.apply( + this.put(new SVG.Line()) + , x1 != null ? [x1, y1, x2, y2] : [0, 0, 0, 0] + ) + } + } +}) + +/* global proportionalSize */ + +SVG.Polyline = SVG.invent({ + // Initialize node + create: 'polyline', + + // Inherit from + inherit: SVG.Shape, + + // Add parent method + construct: { + // Create a wrapped polyline element + polyline: function (p) { + // make sure plot is called as a setter + return this.put(new SVG.Polyline()).plot(p || new SVG.PointArray()) + } + } +}) + +SVG.Polygon = SVG.invent({ + // Initialize node + create: 'polygon', + + // Inherit from + inherit: SVG.Shape, + + // Add parent method + construct: { + // Create a wrapped polygon element + polygon: function (p) { + // make sure plot is called as a setter + return this.put(new SVG.Polygon()).plot(p || new SVG.PointArray()) + } + } +}) + +// Add polygon-specific functions +SVG.extend([SVG.Polyline, SVG.Polygon], { + // Get array + array: function () { + return this._array || (this._array = new SVG.PointArray(this.attr('points'))) + }, + + // Plot new path + plot: function (p) { + return (p == null) ? this.array() + : this.clear().attr('points', typeof p === 'string' ? p + : (this._array = new SVG.PointArray(p))) + }, + + // Clear array cache + clear: function () { + delete this._array + return this + }, + + // Move by left top corner + move: function (x, y) { + return this.attr('points', this.array().move(x, y)) + }, + + // Set element size to given width and height + size: function (width, height) { + var p = proportionalSize(this, width, height) + return this.attr('points', this.array().size(p.width, p.height)) + } +}) + +// unify all point to point elements +SVG.extend([SVG.Line, SVG.Polyline, SVG.Polygon], { + // Define morphable array + MorphArray: SVG.PointArray, + // Move by left top corner over x-axis + x: function (x) { + return x == null ? this.bbox().x : this.move(x, this.bbox().y) + }, + // Move by left top corner over y-axis + y: function (y) { + return y == null ? this.bbox().y : this.move(this.bbox().x, y) + }, + // Set width of element + width: function (width) { + var b = this.bbox() + + return width == null ? b.width : this.size(width, b.height) + }, + // Set height of element + height: function (height) { + var b = this.bbox() + + return height == null ? b.height : this.size(b.width, height) + } +}) + +/* global proportionalSize */ + +SVG.Path = SVG.invent({ + // Initialize node + create: 'path', + + // Inherit from + inherit: SVG.Shape, + + // Add class methods + extend: { + // Define morphable array + MorphArray: SVG.PathArray, + // Get array + array: function () { + return this._array || (this._array = new SVG.PathArray(this.attr('d'))) + }, + // Plot new path + plot: function (d) { + return (d == null) ? this.array() + : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new SVG.PathArray(d))) + }, + // Clear array cache + clear: function () { + delete this._array + return this + }, + // Move by left top corner + move: function (x, y) { + return this.attr('d', this.array().move(x, y)) + }, + // Move by left top corner over x-axis + x: function (x) { + return x == null ? this.bbox().x : this.move(x, this.bbox().y) + }, + // Move by left top corner over y-axis + y: function (y) { + return y == null ? this.bbox().y : this.move(this.bbox().x, y) + }, + // Set element size to given width and height + size: function (width, height) { + var p = proportionalSize(this, width, height) + return this.attr('d', this.array().size(p.width, p.height)) + }, + // Set width of element + width: function (width) { + return width == null ? this.bbox().width : this.size(width, this.bbox().height) + }, + // Set height of element + height: function (height) { + return height == null ? this.bbox().height : this.size(this.bbox().width, height) + } + }, + + // Add parent method + construct: { + // Create a wrapped path element + path: function (d) { + // make sure plot is called as a setter + return this.put(new SVG.Path()).plot(d || new SVG.PathArray()) + } + } +}) + +SVG.Image = SVG.invent({ + // Initialize node + create: 'image', + + // Inherit from + inherit: SVG.Shape, + + // Add class methods + extend: { + // (re)load image + load: function (url, callback) { + if (!url) return this + + var img = new window.Image() + + SVG.on(img, 'load', function (e) { + var p = this.parent(SVG.Pattern) + + // ensure image size + if (this.width() === 0 && this.height() === 0) { + this.size(img.width, img.height) + } + + if (p instanceof SVG.Pattern) { + // ensure pattern size if not set + if (p.width() === 0 && p.height() === 0) { + p.size(this.width(), this.height()) + } + } + + if (typeof callback === 'function') { + callback.call(this, { + width: img.width, + height: img.height, + ratio: img.width / img.height, + url: url + }) + } + }, this) + + SVG.on(img, 'load error', function () { + // dont forget to unbind memory leaking events + SVG.off(img) + }) + + return this.attr('href', (img.src = url), SVG.xlink) + } + }, + + // Add parent method + construct: { + // create image element, load image and set its size + image: function (source, callback) { + return this.put(new SVG.Image()).size(0, 0).load(source, callback) + } + } +}) + +SVG.Text = SVG.invent({ + // Initialize node + create: function (node) { + this.constructor(node || SVG.create('text')) + this.dom.leading = new SVG.Number(1.3) // store leading value for rebuilding + this._rebuild = true // enable automatic updating of dy values + this._build = false // disable build mode for adding multiple lines + + // set default font + this.attr('font-family', SVG.defaults.attrs['font-family']) + }, + + // Inherit from + inherit: SVG.Parent, + + // Add class methods + extend: { + // Move over x-axis + x: function (x) { + // act as getter + if (x == null) { + return this.attr('x') + } + + return this.attr('x', x) + }, + // Move over y-axis + y: function (y) { + var oy = this.attr('y') + var o = typeof oy === 'number' ? oy - this.bbox().y : 0 + + // act as getter + if (y == null) { + return typeof oy === 'number' ? oy - o : oy + } + + return this.attr('y', typeof y === 'number' ? y + o : y) + }, + // Move center over x-axis + cx: function (x) { + return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2) + }, + // Move center over y-axis + cy: function (y) { + return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2) + }, + // Set the text content + text: function (text) { + // act as getter + if (text === undefined) { + var children = this.node.childNodes + var firstLine = 0 + text = '' + + for (var i = 0, len = children.length; i < len; ++i) { + // skip textPaths - they are no lines + if (children[i].nodeName === 'textPath') { + if (i === 0) firstLine = 1 + continue + } + + // add newline if its not the first child and newLined is set to true + if (i !== firstLine && children[i].nodeType !== 3 && SVG.adopt(children[i]).dom.newLined === true) { + text += '\n' + } + + // add content of this node + text += children[i].textContent + } + + return text + } + + // remove existing content + this.clear().build(true) + + if (typeof text === 'function') { + // call block + text.call(this, this) + } else { + // store text and make sure text is not blank + text = text.split('\n') + + // build new lines + for (var j = 0, jl = text.length; j < jl; j++) { + this.tspan(text[j]).newLine() + } + } + + // disable build mode and rebuild lines + return this.build(false).rebuild() + }, + // Set / get leading + leading: function (value) { + // act as getter + if (value == null) { + return this.dom.leading + } + + // act as setter + this.dom.leading = new SVG.Number(value) + + return this.rebuild() + }, + // Rebuild appearance type + rebuild: function (rebuild) { + // store new rebuild flag if given + if (typeof rebuild === 'boolean') { + this._rebuild = rebuild + } + + // define position of all lines + if (this._rebuild) { + var self = this + var blankLineOffset = 0 + var dy = this.dom.leading * new SVG.Number(this.attr('font-size')) + + this.each(function () { + if (this.dom.newLined) { + this.attr('x', self.attr('x')) + + if (this.text() === '\n') { + blankLineOffset += dy + } else { + this.attr('dy', dy + blankLineOffset) + blankLineOffset = 0 + } + } + }) + + this.fire('rebuild') + } + + return this + }, + // Enable / disable build mode + build: function (build) { + this._build = !!build + return this + }, + // overwrite method from parent to set data properly + setData: function (o) { + this.dom = o + this.dom.leading = new SVG.Number(o.leading || 1.3) + return this + } + }, + + // Add parent method + construct: { + // Create text element + text: function (text) { + return this.put(new SVG.Text()).text(text) + }, + // Create plain text element + plain: function (text) { + return this.put(new SVG.Text()).plain(text) + } + } + +}) + +SVG.Tspan = SVG.invent({ + // Initialize node + create: 'tspan', + + // Inherit from + inherit: SVG.Parent, + + // Add class methods + extend: { + // Set text content + text: function (text) { + if (text == null) return this.node.textContent + (this.dom.newLined ? '\n' : '') + + typeof text === 'function' ? text.call(this, this) : this.plain(text) + + return this + }, + // Shortcut dx + dx: function (dx) { + return this.attr('dx', dx) + }, + // Shortcut dy + dy: function (dy) { + return this.attr('dy', dy) + }, + // Create new line + newLine: function () { + // fetch text parent + var t = this.parent(SVG.Text) + + // mark new line + this.dom.newLined = true + + // apply new position + return this.dy(t.dom.leading * t.attr('font-size')).attr('x', t.x()) + } + } +}) + +SVG.extend([SVG.Text, SVG.Tspan], { + // Create plain text node + plain: function (text) { + // clear if build mode is disabled + if (this._build === false) { + this.clear() + } + + // create text node + this.node.appendChild(document.createTextNode(text)) + + return this + }, + // Create a tspan + tspan: function (text) { + var tspan = new SVG.Tspan() + + // clear if build mode is disabled + if (!this._build) { + this.clear() + } + + // add new tspan + this.node.appendChild(tspan.node) + + return tspan.text(text) + }, + // FIXME: Does this also work for textpath? + // Get length of text element + length: function () { + return this.node.getComputedTextLength() + } +}) + +SVG.TextPath = SVG.invent({ + // Initialize node + create: 'textPath', + + // Inherit from + inherit: SVG.Text, + + // Define parent class + parent: SVG.Parent, + + // Add parent method + extend: { + MorphArray: SVG.PathArray, + // return the array of the path track element + array: function () { + var track = this.track() + + return track ? track.array() : null + }, + // Plot path if any + plot: function (d) { + var track = this.track() + var pathArray = null + + if (track) { + pathArray = track.plot(d) + } + + return (d == null) ? pathArray : this + }, + // Get the path element + track: function () { + return this.reference('href') + } + }, + construct: { + textPath: function (text, path) { + return this.defs().path(path).text(text).addTo(this) + } + } +}) + +SVG.extend([SVG.Text], { + // Create path for text to run on + path: function (track) { + var path = new SVG.TextPath() + + // if d is a path, reuse it + if (!(track instanceof SVG.Path)) { + // create path element + track = this.doc().defs().path(track) + } + + // link textPath to path and add content + path.attr('href', '#' + track, SVG.xlink) + + // add textPath element as child node and return textPath + return this.put(path) + }, + // Todo: make this plural? + // Get the textPath children + textPath: function () { + return this.select('textPath') + } +}) + +SVG.extend([SVG.Path], { + // creates a textPath from this path + text: function (text) { + if (text instanceof SVG.Text) { + var txt = text.text() + return text.clear().path(this).text(txt) + } + return this.parent().put(new SVG.Text()).path(this).text(text) + } + // TODO: Maybe add `targets` to get all textPaths associated with this path +}) + +SVG.A = SVG.invent({ + // Initialize node + create: 'a', + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Link url + to: function (url) { + return this.attr('href', url, SVG.xlink) + }, + // Link target attribute + target: function (target) { + return this.attr('target', target) + } + }, + + // Add parent method + construct: { + // Create a hyperlink element + link: function (url) { + return this.put(new SVG.A()).to(url) + } + } +}) + +SVG.extend(SVG.Element, { + // Create a hyperlink element + linkTo: function (url) { + var link = new SVG.A() + + if (typeof url === 'function') { url.call(link, link) } else { + link.to(url) + } + + return this.parent().put(link).put(this) + } + +}) + +SVG.Marker = SVG.invent({ + // Initialize node + create: 'marker', + + // Inherit from + inherit: SVG.Container, + + // Add class methods + extend: { + // Set width of element + width: function (width) { + return this.attr('markerWidth', width) + }, + // Set height of element + height: function (height) { + return this.attr('markerHeight', height) + }, + // Set marker refX and refY + ref: function (x, y) { + return this.attr('refX', x).attr('refY', y) + }, + // Update marker + update: function (block) { + // remove all content + this.clear() + + // invoke passed block + if (typeof block === 'function') { block.call(this, this) } + + return this + }, + // Return the fill id + toString: function () { + return 'url(#' + this.id() + ')' + } + }, + + // Add parent method + construct: { + marker: function (width, height, block) { + // Create marker element in defs + return this.defs().marker(width, height, block) + } + } + +}) + +SVG.extend(SVG.Defs, { + // Create marker + marker: function (width, height, block) { + // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto + return this.put(new SVG.Marker()) + .size(width, height) + .ref(width / 2, height / 2) + .viewbox(0, 0, width, height) + .attr('orient', 'auto') + .update(block) + } + +}) + +SVG.extend([SVG.Line, SVG.Polyline, SVG.Polygon, SVG.Path], { + // Create and attach markers + marker: function (marker, width, height, block) { + var attr = ['marker'] + + // Build attribute name + if (marker !== 'all') attr.push(marker) + attr = attr.join('-') + + // Set marker attribute + marker = arguments[1] instanceof SVG.Marker + ? arguments[1] + : this.doc().marker(width, height, block) + + return this.attr(attr, marker) + } +}) + +// Define list of available attributes for stroke and fill +var sugar = { + stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'], + fill: ['color', 'opacity', 'rule'], + prefix: function (t, a) { + return a === 'color' ? t : t + '-' + a + } +} + +// Add sugar for fill and stroke +;['fill', 'stroke'].forEach(function (m) { + var extension = {} + var i + + extension[m] = function (o) { + if (typeof o === 'undefined') { + return this + } + if (typeof o === 'string' || SVG.Color.isRgb(o) || (o && typeof o.fill === 'function')) { + this.attr(m, o) + } else { + // set all attributes from sugar.fill and sugar.stroke list + for (i = sugar[m].length - 1; i >= 0; i--) { + if (o[sugar[m][i]] != null) { + this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]]) + } + } + } + + return this + } + + SVG.extend([SVG.Element, SVG.FX], extension) +}) + +SVG.extend([SVG.Element, SVG.FX], { + // Let the user set the matrix directly + matrix: function (mat, b, c, d, e, f) { + var matrix = new SVG.Matrix(arguments.length > 1 ? [mat, b, c, d, e, f] : mat) + return this.attr('transform', matrix) + }, + + // Map rotation to transform + rotate: function (angle, cx, cy) { + return this.transform({rotate: angle, origin: [cx, cy]}, true) + }, + + // Map skew to transform + skew: function (x, y, cx, cy) { + return arguments.length === 1 || arguments.length === 3 + ? this.transform({skew: x, origin: [y, cx]}, true) + : this.transform({skew: [x, y], origin: [cx, cy]}, true) + }, + + shear: function (lam, cx, cy) { + return this.transform({shear: lam, origin: [cx, cy]}, true) + }, + + // Map scale to transform + scale: function (x, y, cx, cy) { + return arguments.length === 1 || arguments.length === 3 + ? this.transform({ scale: x, origin: [y, cx] }, true) + : this.transform({ scale: [x, y], origin: [cx, cy] }, true) + }, + + // Map translate to transform + translate: function (x, y) { + return this.transform({ translate: [x, y] }, true) + }, + + // Map relative translations to transform + relative: function (x, y) { + return this.transform({ relative: [x, y] }, true) + }, + + // Map flip to transform + flip: function (direction, around) { + var directionString = typeof direction === 'string' ? direction + : isFinite(direction) ? 'both' + : 'both' + var origin = (direction === 'both' && isFinite(around)) ? [around, around] + : (direction === 'x') ? [around, 0] + : (direction === 'y') ? [0, around] + : isFinite(direction) ? [direction, direction] + : [0, 0] + this.transform({flip: directionString, origin: origin}, true) + }, + + // Opacity + opacity: function (value) { + return this.attr('opacity', value) + }, + + // Relative move over x axis + dx: function (x) { + return this.x(new SVG.Number(x).plus(this instanceof SVG.FX ? 0 : this.x()), true) + }, + + // Relative move over y axis + dy: function (y) { + return this.y(new SVG.Number(y).plus(this instanceof SVG.FX ? 0 : this.y()), true) + }, + + // Relative move over x and y axes + dmove: function (x, y) { + return this.dx(x).dy(y) + } +}) + +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 === 'radialGradient' || type === 'radialGradient' + ? this.attr('r', new SVG.Number(x)) + : this.rx(x).ry(y == null ? x : y) + } +}) + +SVG.extend(SVG.Path, { + // Get path length + length: function () { + return this.node.getTotalLength() + }, + // Get point at length + pointAt: function (length) { + return new SVG.Point(this.node.getPointAtLength(length)) + } +}) + +SVG.extend([SVG.Parent, SVG.Text, SVG.Tspan, SVG.FX], { + // Set font + font: function (a, v) { + if (typeof a === 'object') { + for (v in a) this.font(v, a[v]) + } + + return a === 'leading' + ? this.leading(v) + : a === 'anchor' + ? this.attr('text-anchor', v) + : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style' + ? this.attr('font-' + a, v) + : this.attr(a, v) + } +}) + + +SVG.extend(SVG.Element, { + // Store data values on svg nodes + data: function (a, v, r) { + if (typeof a === 'object') { + for (v in a) { + this.data(v, a[v]) + } + } else if (arguments.length < 2) { + try { + return JSON.parse(this.attr('data-' + a)) + } catch (e) { + return this.attr('data-' + a) + } + } else { + this.attr('data-' + a, + v === null ? null + : r === true || typeof v === 'string' || typeof v === 'number' ? v + : JSON.stringify(v) + ) + } + + return this + } +}) + + +SVG.extend(SVG.Element, { + // Remember arbitrary data + remember: function (k, v) { + // remember every item in an object individually + if (typeof arguments[0] === 'object') { + for (var key in k) { + this.remember(key, k[key]) + } + } else if (arguments.length === 1) { + // retrieve memory + return this.memory()[k] + } else { + // store memory + this.memory()[k] = v + } + + return this + }, + + // Erase a given memory + forget: function () { + if (arguments.length === 0) { + this._memory = {} + } else { + for (var i = arguments.length - 1; i >= 0; i--) { + delete this.memory()[arguments[i]] + } + } + return this + }, + + // Initialize or return local memory object + memory: function () { + return this._memory || (this._memory = {}) + } +}) + +/* global idFromReference */ + +// Method for getting an element by id +SVG.get = function (id) { + var node = document.getElementById(idFromReference(id) || id) + return SVG.adopt(node) +} + +// Select elements by query string +SVG.select = function (query, parent) { + return SVG.utils.map((parent || document).querySelectorAll(query), function (node) { + return SVG.adopt(node) + }) +} + +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) + } +}) + +/* eslint no-unused-vars: 0 */ + +function createElement (element, makeNested) { + if (element instanceof SVG.Element) return element + + if (typeof element === 'object') { + return SVG.adopt(element) + } + + if (element == null) { + return new SVG.Doc() + } + + if (typeof element === 'string' && element.charAt(0) !== '<') { + return SVG.adopt(document.querySelector(element)) + } + + var node = SVG.create('svg') + node.innerHTML = element + + element = SVG.adopt(node.firstElementChild) + + return element +} + +function isNulledBox (box) { + return !box.w && !box.h && !box.x && !box.y +} + +function domContains (node) { + return (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(document.documentElement, node) +} + +function pathRegReplace (a, b, c, d) { + return c + d.replace(SVG.regex.dots, ' .') +} + +// creates deep clone of array +function arrayClone (arr) { + var clone = arr.slice(0) + for (var i = clone.length; i--;) { + if (Array.isArray(clone[i])) { + clone[i] = arrayClone(clone[i]) + } + } + return clone +} + +// tests if a given element is instance of an object +function is (el, obj) { + return el instanceof obj +} + +// tests if a given selector matches an element +function matches (el, selector) { + return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector) +} + +// Convert dash-separated-string to camelCase +function camelCase (s) { + return s.toLowerCase().replace(/-(.)/g, function (m, g) { + return g.toUpperCase() + }) +} + +// Capitalize first letter of a string +function capitalize (s) { + return s.charAt(0).toUpperCase() + s.slice(1) +} + +// Ensure to six-based hex +function fullHex (hex) { + return hex.length === 4 + ? [ '#', + hex.substring(1, 2), hex.substring(1, 2), + hex.substring(2, 3), hex.substring(2, 3), + hex.substring(3, 4), hex.substring(3, 4) + ].join('') + : hex +} + +// Component to hex value +function compToHex (comp) { + var hex = comp.toString(16) + return hex.length === 1 ? '0' + hex : hex +} + +// Calculate proportional width and height values when necessary +function proportionalSize (element, width, height) { + if (width == null || height == null) { + var box = element.bbox() + + if (width == null) { + width = box.width / box.height * height + } else if (height == null) { + height = box.height / box.width * width + } + } + + return { + width: width, + height: height + } +} + +// Map matrix array to object +function arrayToMatrix (a) { + return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] } +} + +// Parse matrix if required +function parseMatrix (matrix) { + if (!(matrix instanceof SVG.Matrix)) { + matrix = new SVG.Matrix(matrix) + } + + return matrix +} + +// Add centre point to transform object +function ensureCentre (o, target) { + o.cx = o.cx == null ? target.bbox().cx : o.cx + o.cy = o.cy == null ? target.bbox().cy : o.cy +} + +// PathArray Helpers +function arrayToString (a) { + for (var i = 0, il = a.length, s = ''; i < il; i++) { + s += a[i][0] + + if (a[i][1] != null) { + s += a[i][1] + + if (a[i][2] != null) { + s += ' ' + s += a[i][2] + + if (a[i][3] != null) { + s += ' ' + s += a[i][3] + s += ' ' + s += a[i][4] + + if (a[i][5] != null) { + s += ' ' + s += a[i][5] + s += ' ' + s += a[i][6] + + if (a[i][7] != null) { + s += ' ' + s += a[i][7] + } + } + } + } + } + } + + return s + ' ' +} + +// Deep new id assignment +function assignNewId (node) { + // do the same for SVG child nodes as well + for (var i = node.children.length - 1; i >= 0; i--) { + assignNewId(node.children[i]) + } + + if (node.id) { + return SVG.adopt(node).id(SVG.eid(node.nodeName)) + } + + return SVG.adopt(node) +} + +// Add more bounding box properties +function fullBox (b) { + if (b.x == null) { + b.x = 0 + b.y = 0 + b.width = 0 + b.height = 0 + } + + b.w = b.width + b.h = b.height + b.x2 = b.x + b.width + b.y2 = b.y + b.height + b.cx = b.x + b.width / 2 + b.cy = b.y + b.height / 2 + + return b +} + +// Get id from reference string +function idFromReference (url) { + var m = (url || '').toString().match(SVG.regex.reference) + + if (m) return m[1] +} + +// Create matrix array for looping +var abcdef = 'abcdef'.split('') + +function closeEnough (a, b, threshold) { + return Math.abs(b - a) < (threshold || 1e-6) +} + +/* globals fullBox, domContains, isNulledBox, Exception */ + +SVG.Box = SVG.invent({ + create: function (source) { + var base = [0, 0, 0, 0] + source = typeof source === 'string' ? source.split(SVG.regex.delimiter).map(parseFloat) + : Array.isArray(source) ? source + : typeof source === 'object' ? [source.left != null ? source.left + : source.x, source.top != null ? source.top : source.y, source.width, source.height] + : arguments.length === 4 ? [].slice.call(arguments) + : base + + this.x = source[0] + this.y = source[1] + this.width = source[2] + this.height = source[3] + + // add center, right, bottom... + fullBox(this) + }, + extend: { + // Merge rect box with another, return a new instance + merge: function (box) { + var x = Math.min(this.x, box.x) + var y = Math.min(this.y, box.y) + + return new SVG.Box( + x, y, + Math.max(this.x + this.width, box.x + box.width) - x, + Math.max(this.y + this.height, box.y + box.height) - y + ) + }, + + transform: function (m) { + var xMin = Infinity + var xMax = -Infinity + var yMin = Infinity + var yMax = -Infinity + + var pts = [ + new SVG.Point(this.x, this.y), + new SVG.Point(this.x2, this.y), + new SVG.Point(this.x, this.y2), + new SVG.Point(this.x2, this.y2) + ] + + pts.forEach(function (p) { + p = p.transform(m) + xMin = Math.min(xMin, p.x) + xMax = Math.max(xMax, p.x) + yMin = Math.min(yMin, p.y) + yMax = Math.max(yMax, p.y) + }) + + return new SVG.Box( + xMin, yMin, + xMax - xMin, + yMax - yMin + ) + }, + + addOffset: function () { + // offset by window scroll position, because getBoundingClientRect changes when window is scrolled + this.x += window.pageXOffset + this.y += window.pageYOffset + return this + }, + toString: function () { + return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height + }, + morph: function (x, y, width, height) { + this.destination = new SVG.Box(x, y, width, height) + return this + }, + + at: function (pos) { + if (!this.destination) return this + + return new SVG.Box( + this.x + (this.destination.x - this.x) * pos + , this.y + (this.destination.y - this.y) * pos + , this.width + (this.destination.width - this.width) * pos + , this.height + (this.destination.height - this.height) * pos + ) + } + }, + + // Define Parent + parent: SVG.Element, + + // Constructor + construct: { + // Get bounding box + bbox: function () { + var box + + try { + // find native bbox + box = this.node.getBBox() + + if (isNulledBox(box) && !domContains(this.node)) { + throw new Exception('Element not in the dom') + } + } catch (e) { + try { + var clone = this.clone(SVG.parser().svg).show() + box = clone.node.getBBox() + clone.remove() + } catch (e) { + console.warn('Getting a bounding box of this element is not possible') + } + } + + return new SVG.Box(box) + }, + + rbox: function (el) { + // IE11 throws an error when element not in dom + try { + var box = new SVG.Box(this.node.getBoundingClientRect()) + if (el) return box.transform(el.screenCTM().inverse()) + return box.addOffset() + } catch (e) { + return new SVG.Box() + } + } + } +}) + +SVG.extend([SVG.Doc, SVG.Symbol, SVG.Image, SVG.Pattern, SVG.Marker, SVG.ForeignObject, SVG.View], { + viewbox: function (x, y, width, height) { + // act as getter + if (x == null) return new SVG.Box(this.attr('viewBox')) + + // act as setter + return this.attr('viewBox', new SVG.Box(x, y, width, height)) + } +}) + + +SVG.parser = function () { + var b + + if (!SVG.parser.nodes.svg.node.parentNode) { + b = document.body || document.documentElement + SVG.parser.nodes.svg.addTo(b) + } + + return SVG.parser.nodes +} + +SVG.parser.nodes = { + svg: SVG().size(2, 0).css({ + opacity: 0, + position: 'absolute', + left: '-100%', + top: '-100%', + overflow: 'hidden' + }) +} + +SVG.parser.nodes.path = SVG.parser.nodes.svg.path().node + + +return SVG + +}));
\ No newline at end of file diff --git a/dist/svg.min.js b/dist/svg.min.js index d644e90..5b12fe6 100644 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1,2 +1,2 @@ -/*! svg.js v3.0.0 MIT*/;!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t,t.document)}):"object"==typeof exports?module.exports=t.document?e(t,t.document):function(t){return e(t,t.document)}:t.SVG=e(t,t.document)}("undefined"!=typeof window?window:this,function(t,e){function n(t,n){if(t instanceof P.Element)return t;if("object"==typeof t)return P.adopt(t);if(null==t)return new P.Doc;if("string"==typeof t&&"<"!==t.charAt(0))return P.adopt(e.querySelector(t));var i=P.create("svg");return i.innerHTML=t,t=P.adopt(i.firstElementChild)}function i(t){return!(t.w||t.h||t.x||t.y)}function r(t){return(e.documentElement.contains||function(t){for(;t.parentNode;)t=t.parentNode;return t===e}).call(e.documentElement,t)}function s(t,e,n,i){return n+i.replace(P.regex.dots," .")}function o(t){for(var e=t.slice(0),n=e.length;n--;)Array.isArray(e[n])&&(e[n]=o(e[n]));return e}function a(t,e){return t instanceof e}function h(t,e){return(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}function u(t){return t.toLowerCase().replace(/-(.)/g,function(t,e){return e.toUpperCase()})}function l(t){return t.charAt(0).toUpperCase()+t.slice(1)}function c(t){return 4===t.length?["#",t.substring(1,2),t.substring(1,2),t.substring(2,3),t.substring(2,3),t.substring(3,4),t.substring(3,4)].join(""):t}function f(t){var e=t.toString(16);return 1===e.length?"0"+e:e}function d(t,e,n){if(null==e||null==n){var i=t.bbox();null==e?e=i.width/i.height*n:null==n&&(n=i.height/i.width*e)}return{width:e,height:n}}function p(t,e,n){return{x:e*t.a+n*t.c+0,y:e*t.b+n*t.d+0}}function m(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}function x(t){return t instanceof P.Matrix||(t=new P.Matrix(t)),t}function y(t,e){t.cx=null==t.cx?e.bbox().cx:t.cx,t.cy=null==t.cy?e.bbox().cy:t.cy}function v(t){for(var e=0,n=t.length,i="";e<n;e++)i+=t[e][0],null!=t[e][1]&&(i+=t[e][1],null!=t[e][2]&&(i+=" ",i+=t[e][2],null!=t[e][3]&&(i+=" ",i+=t[e][3],i+=" ",i+=t[e][4],null!=t[e][5]&&(i+=" ",i+=t[e][5],i+=" ",i+=t[e][6],null!=t[e][7]&&(i+=" ",i+=t[e][7])))));return i+" "}function g(t){for(var e=t.children.length-1;e>=0;e--)g(t.children[e]);return t.id?P.adopt(t).id(P.eid(t.nodeName)):P.adopt(t)}function w(t){return null==t.x&&(t.x=0,t.y=0,t.width=0,t.height=0),t.w=t.width,t.h=t.height,t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function b(t){var e=(t||"").toString().match(P.regex.reference);if(e)return e[1]}if(!e.createElementNS||!e.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect)return{supported:!1};var P=this.SVG=function(t){if(P.supported)return t=n(t)};P.supported=!0,P.ns="http://www.w3.org/2000/svg",P.xmlns="http://www.w3.org/2000/xmlns/",P.xlink="http://www.w3.org/1999/xlink",P.svgjs="http://svgjs.com/svgjs",P.did=1e3,P.eid=function(t){return"Svgjs"+l(t)+P.did++},P.create=function(t){return e.createElementNS(this.ns,t)},P.extend=function(t,e){var n,i;for(t=Array.isArray(t)?t:[t],i=t.length-1;i>=0;i--)if(t[i])for(n in e)t[i].prototype[n]=e[n]},P.invent=function(t){var e="function"==typeof t.create?t.create:function(e){this.constructor(e||P.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&P.extend(e,t.extend),t.construct&&P.extend(t.parent||P.Container,t.construct),e},P.adopt=function(e){if(!e)return null;if(e.instance instanceof P.Element)return e.instance;if(!(e instanceof t.SVGElement))return new P.HtmlNode(e);return"svg"===e.nodeName?new P.Doc(e):"linearGradient"===e.nodeName||"radialGradient"===e.nodeName?new P.Gradient(e):P[l(e.nodeName)]?new(P[l(e.nodeName)])(e):new P.Parent(e)},P.regex={numberAndUnit:/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,transforms:/\)\s*,?\s*/,whitespace:/\s/g,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,isPercent:/^-?[\d.]+%$/,isImage:/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,delimiter:/[\s,]+/,hyphen:/([^e])-/gi,pathLetters:/[MLHVCSQTAZ]/gi,isPathLetter:/[MLHVCSQTAZ]/i,numbersWithDots:/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,dots:/\./g},P.utils={map:function(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)r.push(e(t[n]));return r},filter:function(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)e(t[n])&&r.push(t[n]);return r},radians:function(t){return t%360*Math.PI/180},degrees:function(t){return 180*t/Math.PI%360},filterSVGElements:function(e){return this.filter(e,function(e){return e instanceof t.SVGElement})}},P.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"}},P.Color=function(t){var e;this.r=0,this.g=0,this.b=0,t&&("string"==typeof t?P.regex.isRgb.test(t)?(e=P.regex.rgb.exec(t.replace(P.regex.whitespace,"")),this.r=parseInt(e[1]),this.g=parseInt(e[2]),this.b=parseInt(e[3])):P.regex.isHex.test(t)&&(e=P.regex.hex.exec(c(t)),this.r=parseInt(e[1],16),this.g=parseInt(e[2],16),this.b=parseInt(e[3],16)):"object"==typeof t&&(this.r=t.r,this.g=t.g,this.b=t.b))},P.extend(P.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+f(this.r)+f(this.g)+f(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new P.Color(t),this},at:function(t){return this.destination?(t=t<0?0:t>1?1:t,new P.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),P.Color.test=function(t){return t+="",P.regex.isHex.test(t)||P.regex.isRgb.test(t)},P.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},P.Color.isColor=function(t){return P.Color.isRgb(t)||P.Color.test(t)},P.Array=function(t,e){t=(t||[]).valueOf(),0===t.length&&e&&(t=e.valueOf()),this.value=this.parse(t)},P.extend(P.Array,{morph:function(t){if(this.destination=this.parse(t),this.value.length!==this.destination.length){for(var e=this.value[this.value.length-1],n=this.destination[this.destination.length-1];this.value.length>this.destination.length;)this.destination.push(n);for(;this.value.length<this.destination.length;)this.value.push(e)}return this},settle:function(){for(var t=0,e=this.value.length,n=[];t<e;t++)-1===n.indexOf(this.value[t])&&n.push(this.value[t]);return this.value=n,n},at:function(t){if(!this.destination)return this;for(var e=0,n=this.value.length,i=[];e<n;e++)i.push(this.value[e]+(this.destination[e]-this.value[e])*t);return new P.Array(i)},toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:t.trim().split(P.regex.delimiter).map(parseFloat)},reverse:function(){return this.value.reverse(),this},clone:function(){var t=new this.constructor;return t.value=o(this.value),t}}),P.PointArray=function(t,e){P.Array.call(this,t,e||[[0,0]])},P.PointArray.prototype=new P.Array,P.PointArray.prototype.constructor=P.PointArray,P.extend(P.PointArray,{toString:function(){for(var t=0,e=this.value.length,n=[];t<e;t++)n.push(this.value[t].join(","));return n.join(" ")},toLine:function(){return{x1:this.value[0][0],y1:this.value[0][1],x2:this.value[1][0],y2:this.value[1][1]}},at:function(t){if(!this.destination)return this;for(var e=0,n=this.value.length,i=[];e<n;e++)i.push([this.value[e][0]+(this.destination[e][0]-this.value[e][0])*t,this.value[e][1]+(this.destination[e][1]-this.value[e][1])*t]);return new P.PointArray(i)},parse:function(t){var e=[];if(t=t.valueOf(),Array.isArray(t)){if(Array.isArray(t[0]))return t}else t=t.trim().split(P.regex.delimiter).map(parseFloat);t.length%2!=0&&t.pop();for(var n=0,i=t.length;n<i;n+=2)e.push([t[n],t[n+1]]);return e},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i=this.value.length-1;i>=0;i--)this.value[i]=[this.value[i][0]+t,this.value[i][1]+e];return this},size:function(t,e){var n,i=this.bbox();for(n=this.value.length-1;n>=0;n--)i.width&&(this.value[n][0]=(this.value[n][0]-i.x)*t/i.width+i.x),i.height&&(this.value[n][1]=(this.value[n][1]-i.y)*e/i.height+i.y);return this},bbox:function(){var t=-1/0,e=-1/0,n=1/0,i=1/0;return this.value.forEach(function(r){t=Math.max(r[0],t),e=Math.max(r[1],e),n=Math.min(r[0],n),i=Math.min(r[1],i)}),{x:n,y:i,width:t-n,height:e-i}}});for(var M={M:function(t,e,n){return e.x=n.x=t[0],e.y=n.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},S:function(t,e){return e.x=t[2],e.y=t[3],["S",t[0],t[1],t[2],t[3]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},T:function(t,e){return e.x=t[0],e.y=t[1],["T",t[0],t[1]]},Z:function(t,e,n){return e.x=n.x,e.y=n.y,["Z"]},A:function(t,e){return e.x=t[5],e.y=t[6],["A",t[0],t[1],t[2],t[3],t[4],t[5],t[6]]}},A="mlhvqtcsaz".split(""),N=0,C=A.length;N<C;++N)M[A[N]]=function(t){return function(e,n,i){if("H"===t)e[0]=e[0]+n.x;else if("V"===t)e[0]=e[0]+n.y;else if("A"===t)e[5]=e[5]+n.x,e[6]=e[6]+n.y;else for(var r=0,s=e.length;r<s;++r)e[r]=e[r]+(r%2?n.y:n.x);return M[t](e,n,i)}}(A[N].toUpperCase());P.PathArray=function(t,e){P.Array.call(this,t,e||[["M",0,0]])},P.PathArray.prototype=new P.Array,P.PathArray.prototype.constructor=P.PathArray,P.extend(P.PathArray,{toString:function(){return v(this.value)},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i,r=this.value.length-1;r>=0;r--)i=this.value[r][0],"M"===i||"L"===i||"T"===i?(this.value[r][1]+=t,this.value[r][2]+=e):"H"===i?this.value[r][1]+=t:"V"===i?this.value[r][1]+=e:"C"===i||"S"===i||"Q"===i?(this.value[r][1]+=t,this.value[r][2]+=e,this.value[r][3]+=t,this.value[r][4]+=e,"C"===i&&(this.value[r][5]+=t,this.value[r][6]+=e)):"A"===i&&(this.value[r][6]+=t,this.value[r][7]+=e);return this},size:function(t,e){var n,i,r=this.bbox();for(n=this.value.length-1;n>=0;n--)i=this.value[n][0],"M"===i||"L"===i||"T"===i?(this.value[n][1]=(this.value[n][1]-r.x)*t/r.width+r.x,this.value[n][2]=(this.value[n][2]-r.y)*e/r.height+r.y):"H"===i?this.value[n][1]=(this.value[n][1]-r.x)*t/r.width+r.x:"V"===i?this.value[n][1]=(this.value[n][1]-r.y)*e/r.height+r.y:"C"===i||"S"===i||"Q"===i?(this.value[n][1]=(this.value[n][1]-r.x)*t/r.width+r.x,this.value[n][2]=(this.value[n][2]-r.y)*e/r.height+r.y,this.value[n][3]=(this.value[n][3]-r.x)*t/r.width+r.x,this.value[n][4]=(this.value[n][4]-r.y)*e/r.height+r.y,"C"===i&&(this.value[n][5]=(this.value[n][5]-r.x)*t/r.width+r.x,this.value[n][6]=(this.value[n][6]-r.y)*e/r.height+r.y)):"A"===i&&(this.value[n][1]=this.value[n][1]*t/r.width,this.value[n][2]=this.value[n][2]*e/r.height,this.value[n][6]=(this.value[n][6]-r.x)*t/r.width+r.x,this.value[n][7]=(this.value[n][7]-r.y)*e/r.height+r.y);return this},equalCommands:function(t){var e,n,i;for(t=new P.PathArray(t),i=this.value.length===t.value.length,e=0,n=this.value.length;i&&e<n;e++)i=this.value[e][0]===t.value[e][0];return i},morph:function(t){return t=new P.PathArray(t),this.equalCommands(t)?this.destination=t:this.destination=null,this},at:function(t){if(!this.destination)return this;var e,n,i,r,s=this.value,o=this.destination.value,a=[],h=new P.PathArray;for(e=0,n=s.length;e<n;e++){for(a[e]=[s[e][0]],i=1,r=s[e].length;i<r;i++)a[e][i]=s[e][i]+(o[e][i]-s[e][i])*t;"A"===a[e][0]&&(a[e][4]=+(0!==a[e][4]),a[e][5]=+(0!==a[e][5]))}return h.value=a,h},parse:function(t){if(t instanceof P.PathArray)return t.valueOf();var e,n={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};t="string"==typeof t?t.replace(P.regex.numbersWithDots,s).replace(P.regex.pathLetters," $& ").replace(P.regex.hyphen,"$1 -").trim().split(P.regex.delimiter):t.reduce(function(t,e){return[].concat.call(t,e)},[]);var i=[],r=new P.Point,o=new P.Point,a=0,h=t.length;do{P.regex.isPathLetter.test(t[a])?(e=t[a],++a):"M"===e?e="L":"m"===e&&(e="l"),i.push(M[e].call(null,t.slice(a,a+=n[e.toUpperCase()]).map(parseFloat),r,o))}while(h>a);return i},bbox:function(){return P.parser().path.setAttribute("d",this.toString()),P.parser.nodes.path.getBBox()}}),P.Number=P.invent({create:function(t,e){this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-3.4e38:3.4e38:"string"==typeof t?(e=t.match(P.regex.numberAndUnit))&&(this.value=parseFloat(e[1]),"%"===e[5]?this.value/=100:"s"===e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof P.Number&&(this.value=t.valueOf(),this.unit=t.unit)},extend:{toString:function(){return("%"===this.unit?~~(1e8*this.value)/1e6:"s"===this.unit?this.value/1e3:this.value)+this.unit},toJSON:function(){return this.toString()},valueOf:function(){return this.value},plus:function(t){return t=new P.Number(t),new P.Number(this+t,this.unit||t.unit)},minus:function(t){return t=new P.Number(t),new P.Number(this-t,this.unit||t.unit)},times:function(t){return t=new P.Number(t),new P.Number(this*t,this.unit||t.unit)},divide:function(t){return t=new P.Number(t),new P.Number(this/t,this.unit||t.unit)},to:function(t){var e=new P.Number(this);return"string"==typeof t&&(e.unit=t),e},morph:function(t){return this.destination=new P.Number(t),t.relative&&(this.destination.value+=this.value),this},at:function(t){return this.destination?new P.Number(this.destination).minus(this).times(t).plus(this):this}}}),P.HtmlNode=P.invent({create:function(t){this.node=t},extend:{add:function(t,e){return t=n(t),t.node!==this.node.children[e]&&this.node.insertBefore(t.node,this.node.children[e]||null),this},put:function(t,e){return this.add(t,e),t}}}),P.Element=P.invent({create:function(t){this.events={},this.dom={},this.node=t,this.node&&(this.type=t.nodeName,this.node.instance=this,this.events=t.events||{},t.hasAttribute("svgjs:data")&&this.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}))},extend:{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var n=d(this,t,e);return this.width(new P.Number(n.width)).height(new P.Number(n.height))},clone:function(t){this.writeDataToDom();var e=g(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return n(t).put(this)},putIn:function(t){return n(t).add(this)},id:function(t){return void 0!==t||this.node.id||(this.node.id=P.eid(this.type)),this.attr("id",t)},inside:function(t,e){var n=this.bbox();return t>n.x&&e>n.y&&t<n.x+n.width&&e<n.y+n.height},show:function(){return this.css("display","")},hide:function(){return this.css("display","none")},visible:function(){return"none"!==this.css("display")},toString:function(){return this.id()},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(P.regex.delimiter)},hasClass:function(t){return-1!==this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){return this.hasClass(t)&&this.attr("class",this.classes().filter(function(e){return e!==t}).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return P.get(this.attr(t))},parent:function(e){var n=this;if(!n.node.parentNode)return null;if(n=P.adopt(n.node.parentNode),!e)return n;for(;n&&n.node instanceof t.SVGElement;){if("string"==typeof e?n.matches(e):n instanceof e)return n;n=P.adopt(n.node.parentNode)}},doc:function(){var t=this.parent(P.Doc);return t&&t.doc()},defs:function(){return this.doc().defs()},parents:function(t){var e=[],n=this;do{if(!(n=n.parent(t))||!n.node)break;e.push(n)}while(n.parent);return e},matches:function(t){return h(this.node,t)},native:function(){return this.node},svg:function(t){var n,i;if(!(t&&this instanceof P.Parent))return this.writeDataToDom(),this.node.outerHTML;for(n=e.createElementNS(P.ns,"svg"),n.innerHTML=t,i=n.children.length;i--;)this.node.appendChild(n.firstElementChild);return this},writeDataToDom:function(){return this.is(P.Parent)&&this.each(function(){this.writeDataToDom()}),this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),this},setData:function(t){return this.dom=t,this},is:function(t){return a(this,t)}}}),P.easing={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)}},P.morph=function(t){return function(e,n){return new P.MorphObj(e,n).at(t)}},P.Situation=P.invent({create:function(t){this.init=!1,this.reversed=!1,this.reversing=!1,this.duration=new P.Number(t.duration).valueOf(),this.delay=new P.Number(t.delay).valueOf(),this.start=+new Date+this.delay,this.finish=this.start+this.duration,this.ease=t.ease,this.loop=0,this.loops=!1,this.animations={},this.attrs={},this.styles={},this.transforms=[],this.once={}}}),P.FX=P.invent({create:function(t){this._target=t,this.situations=[],this.active=!1,this.situation=null,this.paused=!1,this.lastPos=0,this.pos=0,this.absPos=0,this._speed=1},extend:{animate:function(t,e,n){"object"==typeof t&&(e=t.ease,n=t.delay,t=t.duration);var i=new P.Situation({duration:t||1e3,delay:n||0,ease:P.easing[e||"-"]||e});return this.queue(i),this},delay:function(t){var e=new P.Situation({duration:t,delay:0,ease:P.easing["-"]});return this.queue(e)},target:function(t){return t&&t instanceof P.Element?(this._target=t,this):this._target},timeToAbsPos:function(t){return(t-this.situation.start)/(this.situation.duration/this._speed)},absPosToTime:function(t){return this.situation.duration/this._speed*t+this.situation.start},startAnimFrame:function(){this.stopAnimFrame(),this.animationFrame=t.requestAnimationFrame(function(){this.step()}.bind(this))},stopAnimFrame:function(){t.cancelAnimationFrame(this.animationFrame)},start:function(){return!this.active&&this.situation&&(this.active=!0,this.startCurrent()),this},startCurrent:function(){return this.situation.start=+new Date+this.situation.delay/this._speed,this.situation.finish=this.situation.start+this.situation.duration/this._speed,this.initAnimations().step()},queue:function(t){return("function"==typeof t||t instanceof P.Situation)&&this.situations.push(t),this.situation||(this.situation=this.situations.shift()),this},dequeue:function(){return this.stop(),this.situation=this.situations.shift(),this.situation&&(this.situation instanceof P.Situation?this.start():this.situation(this)),this},initAnimations:function(){var t,e,n,i=this.situation;if(i.init)return this;for(t in i.animations)for(n=this.target()[t](),Array.isArray(n)||(n=[n]),Array.isArray(i.animations[t])||(i.animations[t]=[i.animations[t]]),e=n.length;e--;)i.animations[t][e]instanceof P.Number&&(n[e]=new P.Number(n[e])),i.animations[t][e]=n[e].morph(i.animations[t][e]);for(t in i.attrs)i.attrs[t]=new P.MorphObj(this.target().attr(t),i.attrs[t]);for(t in i.styles)i.styles[t]=new P.MorphObj(this.target().css(t),i.styles[t]);return i.initialTransformation=this.target().matrixify(),i.init=!0,this},clearQueue:function(){return this.situations=[],this},clearCurrent:function(){return this.situation=null,this},stop:function(t,e){var n=this.active;return this.active=!1,e&&this.clearQueue(),t&&this.situation&&(!n&&this.startCurrent(),this.atEnd()),this.stopAnimFrame(),this.clearCurrent()},reset:function(){if(this.situation){var t=this.situation;this.stop(),this.situation=t,this.atStart()}return this},finish:function(){for(this.stop(!0,!1);this.dequeue().situation&&this.stop(!0,!1););return this.clearQueue().clearCurrent(),this},atStart:function(){return this.at(0,!0)},atEnd:function(){return!0===this.situation.loops&&(this.situation.loops=this.situation.loop+1),"number"==typeof this.situation.loops?this.at(this.situation.loops,!0):this.at(1,!0)},at:function(t,e){var n=this.situation.duration/this._speed;return this.absPos=t,e||(this.situation.reversed&&(this.absPos=1-this.absPos),this.absPos+=this.situation.loop),this.situation.start=+new Date-this.absPos*n,this.situation.finish=this.situation.start+n,this.step(!0)},speed:function(t){return 0===t?this.pause():t?(this._speed=t,this.at(this.absPos,!0)):this._speed},loop:function(t,e){var n=this.last();return n.loops=null==t||t,n.loop=0,e&&(n.reversing=!0),this},pause:function(){return this.paused=!0,this.stopAnimFrame(),this},play:function(){return this.paused?(this.paused=!1,this.at(this.absPos,!0)):this},reverse:function(t){var e=this.last();return e.reversed=void 0===t?!e.reversed:t,this},progress:function(t){return t?this.situation.ease(this.pos):this.pos},after:function(t){function e(i){i.detail.situation===n&&(t.call(this,n),this.off("finished.fx",e))}var n=this.last();return this.target().on("finished.fx",e),this._callStart()},during:function(t){function e(e){e.detail.situation===n&&t.call(this,e.detail.pos,P.morph(e.detail.pos),e.detail.eased,n)}var n=this.last();return this.target().off("during.fx",e).on("during.fx",e),this.after(function(){this.off("during.fx",e)}),this._callStart()},afterAll:function(t){var e=function e(n){t.call(this),this.off("allfinished.fx",e)};return this.target().off("allfinished.fx",e).on("allfinished.fx",e),this._callStart()},duringAll:function(t){var e=function(e){t.call(this,e.detail.pos,P.morph(e.detail.pos),e.detail.eased,e.detail.situation)};return this.target().off("during.fx",e).on("during.fx",e),this.afterAll(function(){this.off("during.fx",e)}),this._callStart()},last:function(){return this.situations.length?this.situations[this.situations.length-1]:this.situation},add:function(t,e,n){return this.last()[n||"animations"][t]=e,this._callStart()},step:function(t){if(t||(this.absPos=this.timeToAbsPos(+new Date)),!1!==this.situation.loops){var e,n,i;e=Math.max(this.absPos,0),n=Math.floor(e),!0===this.situation.loops||n<this.situation.loops?(this.pos=e-n,i=this.situation.loop,this.situation.loop=n):(this.absPos=this.situation.loops,this.pos=1,i=this.situation.loop-1,this.situation.loop=this.situation.loops),this.situation.reversing&&(this.situation.reversed=this.situation.reversed!==Boolean((this.situation.loop-i)%2))}else this.absPos=Math.min(this.absPos,1),this.pos=this.absPos;this.pos<0&&(this.pos=0),this.situation.reversed&&(this.pos=1-this.pos);var r=this.situation.ease(this.pos);for(var s in this.situation.once)s>this.lastPos&&s<=r&&(this.situation.once[s].call(this.target(),this.pos,r),delete this.situation.once[s]);return this.active&&this.target().fire("during",{pos:this.pos,eased:r,fx:this,situation:this.situation}),this.situation?(this.eachAt(),1===this.pos&&!this.situation.reversed||this.situation.reversed&&0===this.pos?(this.stopAnimFrame(),this.target().fire("finished",{fx:this,situation:this.situation}),this.situations.length||(this.target().fire("allfinished"),this.situations.length||(this.target().off(".fx"),this.active=!1)),this.active?this.dequeue():this.clearCurrent()):!this.paused&&this.active&&this.startAnimFrame(),this.lastPos=r,this):this},eachAt:function(){var t,e,n,i=this,r=this.target(),s=this.situation;for(t in s.animations)n=[].concat(s.animations[t]).map(function(t){return"string"!=typeof t&&t.at?t.at(s.ease(i.pos),i.pos):t}),r[t].apply(r,n);for(t in s.attrs)n=[t].concat(s.attrs[t]).map(function(t){return"string"!=typeof t&&t.at?t.at(s.ease(i.pos),i.pos):t}),r.attr.apply(r,n);for(t in s.styles)n=[t].concat(s.styles[t]).map(function(t){return"string"!=typeof t&&t.at?t.at(s.ease(i.pos),i.pos):t}),r.css.apply(r,n);if(s.transforms.length){for(n=s.initialTransformation,t=0,e=s.transforms.length;t<e;t++){var o=s.transforms[t];o instanceof P.Matrix?n=o.relative?n.multiply((new P.Matrix).morph(o).at(s.ease(this.pos))):n.morph(o).at(s.ease(this.pos)):(o.relative||o.undo(n.extract()),n=n.multiply(o.at(s.ease(this.pos))))}r.matrix(n)}return this},once:function(t,e,n){var i=this.last();return n||(t=i.ease(t)),i.once[t]=e,this},_callStart:function(){return setTimeout(function(){this.start()}.bind(this),0),this}},parent:P.Element,construct:{animate:function(t,e,n){return(this.fx||(this.fx=new P.FX(this))).animate(t,e,n)},delay:function(t){return(this.fx||(this.fx=new P.FX(this))).delay(t)},stop:function(t,e){return this.fx&&this.fx.stop(t,e),this},finish:function(){return this.fx&&this.fx.finish(),this},pause:function(){return this.fx&&this.fx.pause(),this},play:function(){return this.fx&&this.fx.play(),this},speed:function(t){if(this.fx){if(null==t)return this.fx.speed();this.fx.speed(t)}return this}}}),P.MorphObj=P.invent({create:function(t,e){return P.Color.isColor(e)?new P.Color(t).morph(e):P.regex.delimiter.test(t)?new P.Array(t).morph(e):P.regex.numberAndUnit.test(e)?new P.Number(t).morph(e):(this.value=t,void(this.destination=e))},extend:{at:function(t,e){return e<1?this.value:this.destination},valueOf:function(){return this.value}}}),P.extend(P.FX,{attr:function(t,e,n){if("object"==typeof t)for(var i in t)this.attr(i,t[i]);else this.add(t,e,"attrs");return this},css:function(t,e){if("object"==typeof t)for(var n in t)this.css(n,t[n]);else this.add(t,e,"styles");return this},x:function(t,e){if(this.target()instanceof P.G)return this.transform({x:t},e),this;var n=new P.Number(t);return n.relative=e,this.add("x",n)},y:function(t,e){if(this.target()instanceof P.G)return this.transform({y:t},e),this;var n=new P.Number(t);return n.relative=e,this.add("y",n)},cx:function(t){return this.add("cx",new P.Number(t))},cy:function(t){return this.add("cy",new P.Number(t))},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){if(this.target()instanceof P.Text)this.attr("font-size",t);else{var n;t&&e||(n=this.target().bbox()),t||(t=n.width/n.height*e),e||(e=n.height/n.width*t),this.add("width",new P.Number(t)).add("height",new P.Number(e))}return this},width:function(t){return this.add("width",new P.Number(t))},height:function(t){return this.add("height",new P.Number(t))},plot:function(t,e,n,i){return 4===arguments.length?this.plot([t,e,n,i]):this.add("plot",new(this.target().MorphArray)(t))},leading:function(t){return this.target().leading?this.add("leading",new P.Number(t)):this},viewbox:function(t,e,n,i){return this.target()instanceof P.Container&&this.add("viewbox",new P.Box(t,e,n,i)),this},update:function(t){if(this.target()instanceof P.Stop){if("number"==typeof t||t instanceof P.Number)return this.update({offset:arguments[0],color:arguments[1],opacity:arguments[2]});null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",t.offset)}return this}}),P.Matrix=P.invent({create:function(t){var e,n=m([1,0,0,1,0,0]);for(t=t instanceof P.Element?t.matrixify():"string"==typeof t?m(t.split(P.regex.delimiter).map(parseFloat)):6===arguments.length?m([].slice.call(arguments)):Array.isArray(t)?m(t):"object"==typeof t?t:n,e=S.length-1;e>=0;--e)this[S[e]]=null!=t[S[e]]?t[S[e]]:n[S[e]]},extend:{extract:function(){var t=p(this,0,1),e=p(this,1,0),n=180/Math.PI*Math.atan2(t.y,t.x)-90;return{x:this.e,y:this.f,transformedX:(this.e*Math.cos(n*Math.PI/180)+this.f*Math.sin(n*Math.PI/180))/Math.sqrt(this.a*this.a+this.b*this.b),transformedY:(this.f*Math.cos(n*Math.PI/180)+this.e*Math.sin(-n*Math.PI/180))/Math.sqrt(this.c*this.c+this.d*this.d),skewX:-n,skewY:180/Math.PI*Math.atan2(e.y,e.x),scaleX:Math.sqrt(this.a*this.a+this.b*this.b),scaleY:Math.sqrt(this.c*this.c+this.d*this.d),rotation:n,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f,matrix:new P.Matrix(this)}},clone:function(){return new P.Matrix(this)},morph:function(t){return this.destination=new P.Matrix(t),this},at:function(t){return this.destination?new P.Matrix({a:this.a+(this.destination.a-this.a)*t,b:this.b+(this.destination.b-this.b)*t,c:this.c+(this.destination.c-this.c)*t,d:this.d+(this.destination.d-this.d)*t,e:this.e+(this.destination.e-this.e)*t,f:this.f+(this.destination.f-this.f)*t}):this},multiply:function(t){return new P.Matrix(this.native().multiply(x(t).native()))},inverse:function(){return new P.Matrix(this.native().inverse())},translate:function(t,e){return new P.Matrix(this.native().translate(t||0,e||0))},scale:function(t,e,n,i){return 1===arguments.length?e=t:3===arguments.length&&(i=n,n=e,e=t),this.around(n,i,new P.Matrix(t,0,0,e,0,0))},rotate:function(t,e,n){return t=P.utils.radians(t),this.around(e,n,new P.Matrix(Math.cos(t),Math.sin(t),-Math.sin(t),Math.cos(t),0,0))},flip:function(t,e){return"x"===t?this.scale(-1,1,e,0):"y"===t?this.scale(1,-1,0,e):this.scale(-1,-1,t,null!=e?e:t)},skew:function(t,e,n,i){return 1===arguments.length?e=t:3===arguments.length&&(i=n,n=e,e=t),t=P.utils.radians(t),e=P.utils.radians(e),this.around(n,i,new P.Matrix(1,Math.tan(e),Math.tan(t),1,0,0))},skewX:function(t,e,n){return this.skew(t,0,e,n)},skewY:function(t,e,n){return this.skew(0,t,e,n)},around:function(t,e,n){return this.multiply(new P.Matrix(1,0,0,1,t||0,e||0)).multiply(n).multiply(new P.Matrix(1,0,0,1,-t||0,-e||0))},native:function(){for(var t=P.parser.nodes.svg.node.createSVGMatrix(),e=S.length-1;e>=0;e--)t[S[e]]=this[S[e]];return t},toString:function(){return"matrix("+this.a+","+this.b+","+this.c+","+this.d+","+this.e+","+this.f+")"}},parent:P.Element,construct:{ctm:function(){return new P.Matrix(this.node.getCTM())},screenCTM:function(){if(this instanceof P.Doc&&!this.isRoot()){var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new P.Matrix(e)}return new P.Matrix(this.node.getScreenCTM())}}}),P.Point=P.invent({create:function(t,e){var n,i={x:0,y:0};n=Array.isArray(t)?{x:t[0],y:t[1]}:"object"==typeof t?{x:t.x,y:t.y}:null!=t?{x:t,y:null!=e?e:t}:i,this.x=n.x,this.y=n.y},extend:{clone:function(){return new P.Point(this)},morph:function(t,e){return this.destination=new P.Point(t,e),this},at:function(t){return this.destination?new P.Point({x:this.x+(this.destination.x-this.x)*t,y:this.y+(this.destination.y-this.y)*t}):this},native:function(){var t=P.parser.nodes.svg.node.createSVGPoint();return t.x=this.x,t.y=this.y,t},transform:function(t){return new P.Point(this.native().matrixTransform(t.native()))}}}),P.extend(P.Element,{point:function(t,e){return new P.Point(t,e).transform(this.screenCTM().inverse())}}),P.extend(P.Element,{attr:function(t,e,n){if(null==t){for(t={},e=this.node.attributes,n=e.length-1;n>=0;n--)t[e[n].nodeName]=P.regex.isNumber.test(e[n].nodeValue)?parseFloat(e[n].nodeValue):e[n].nodeValue;return t}if("object"==typeof t)for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return e=this.node.getAttribute(t),null==e?P.defaults.attrs[t]:P.regex.isNumber.test(e)?parseFloat(e):e;"fill"!==t&&"stroke"!==t||(P.regex.isImage.test(e)&&(e=this.doc().defs().image(e)),e instanceof P.Image&&(e=this.doc().defs().pattern(0,0,function(){this.add(e)}))),"number"==typeof e?e=new P.Number(e):P.Color.isColor(e)?e=new P.Color(e):Array.isArray(e)&&(e=new P.Array(e)),"leading"===t?this.leading&&this.leading(e):"string"==typeof n?this.node.setAttributeNS(n,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!==t&&"x"!==t||this.rebuild(t,e)}return this}}),P.extend(P.Element,{transform:function(t,e){var n,i,r=this -;if("object"!=typeof t)return n=new P.Matrix(r).extract(),"string"==typeof t?n[t]:n;if(n=new P.Matrix(r),e=!!e||!!t.relative,null!=t.a)n=e?n.multiply(new P.Matrix(t)):new P.Matrix(t);else if(null!=t.rotation)y(t,r),n=e?n.rotate(t.rotation,t.cx,t.cy):n.rotate(t.rotation-n.extract().rotation,t.cx,t.cy);else if(null!=t.scale||null!=t.scaleX||null!=t.scaleY){if(y(t,r),t.scaleX=null!=t.scale?t.scale:null!=t.scaleX?t.scaleX:1,t.scaleY=null!=t.scale?t.scale:null!=t.scaleY?t.scaleY:1,!e){var s=n.extract();t.scaleX=1*t.scaleX/s.scaleX,t.scaleY=1*t.scaleY/s.scaleY}n=n.scale(t.scaleX,t.scaleY,t.cx,t.cy)}else if(null!=t.skew||null!=t.skewX||null!=t.skewY){if(y(t,r),t.skewX=null!=t.skew?t.skew:null!=t.skewX?t.skewX:0,t.skewY=null!=t.skew?t.skew:null!=t.skewY?t.skewY:0,!e){var o=n.extract();n=n.multiply((new P.Matrix).skew(o.skewX,o.skewY,o.cx,o.cy).inverse())}n=n.skew(t.skewX,t.skewY,t.cx,t.cy)}else t.flip?("x"===t.flip||"y"===t.flip?t.offset=null==t.offset?r.bbox()["c"+t.flip]:t.offset:null==t.offset?(i=r.bbox(),t.flip=i.cx,t.offset=i.cy):t.flip=t.offset,n=(new P.Matrix).flip(t.flip,t.offset)):null==t.x&&null==t.y||(e?n=n.translate(t.x,t.y):(null!=t.x&&(n.e=t.x),null!=t.y&&(n.f=t.y)));return this.attr("transform",n)}}),P.extend(P.FX,{transform:function(t,e){var n,i,r=this.target();return"object"!=typeof t?(n=new P.Matrix(r).extract(),"string"==typeof t?n[t]:n):(e=!!e||!!t.relative,null!=t.a?n=new P.Matrix(t):null!=t.rotation?(y(t,r),n=new P.Rotate(t.rotation,t.cx,t.cy)):null!=t.scale||null!=t.scaleX||null!=t.scaleY?(y(t,r),t.scaleX=null!=t.scale?t.scale:null!=t.scaleX?t.scaleX:1,t.scaleY=null!=t.scale?t.scale:null!=t.scaleY?t.scaleY:1,n=new P.Scale(t.scaleX,t.scaleY,t.cx,t.cy)):null!=t.skewX||null!=t.skewY?(y(t,r),t.skewX=null!=t.skewX?t.skewX:0,t.skewY=null!=t.skewY?t.skewY:0,n=new P.Skew(t.skewX,t.skewY,t.cx,t.cy)):t.flip?("x"===t.flip||"y"===t.flip?t.offset=null==t.offset?r.bbox()["c"+t.flip]:t.offset:null==t.offset?(i=r.bbox(),t.flip=i.cx,t.offset=i.cy):t.flip=t.offset,n=(new P.Matrix).flip(t.flip,t.offset)):null==t.x&&null==t.y||(n=new P.Translate(t.x,t.y)),n?(n.relative=e,this.last().transforms.push(n),this._callStart()):this)}}),P.extend(P.Element,{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(P.regex.transforms).slice(0,-1).map(function(t){var e=t.trim().split("(");return[e[0],e[1].split(P.regex.delimiter).map(function(t){return parseFloat(t)})]}).reduce(function(t,e){return"matrix"===e[0]?t.multiply(m(e[1])):t[e[0]].apply(t,e[1])},new P.Matrix)},toParent:function(t){if(this===t)return this;var e=this.screenCTM(),n=t.screenCTM().inverse();return this.addTo(t).untransform().transform(n.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())}}),P.Transformation=P.invent({create:function(t,e){if(arguments.length>1&&"boolean"!=typeof e)return this.constructor.bind(this)([].slice.call(arguments));var n,i;if(Array.isArray(t))for(n=0,i=this.arguments.length;n<i;++n)this[this.arguments[n]]=t[n];else if("object"==typeof t)for(n=0,i=this.arguments.length;n<i;++n)this[this.arguments[n]]=t[this.arguments[n]];this.inversed=!1,!0===e&&(this.inversed=!0)},extend:{arguments:[],method:"",at:function(t){for(var e=[],n=0,i=this.arguments.length;n<i;++n)e.push(this[this.arguments[n]]);var r=this._undo||new P.Matrix;return r=(new P.Matrix).morph(P.Matrix.prototype[this.method].apply(r,e)).at(t),this.inversed?r.inverse():r},undo:function(t){for(var e=0,n=this.arguments.length;e<n;++e)t[this.arguments[e]]=void 0===this[this.arguments[e]]?0:t[this.arguments[e]];return t.cx=this.cx,t.cy=this.cy,this._undo=new(P[l(this.method)])(t,!0).at(1),this}}}),P.Translate=P.invent({parent:P.Matrix,inherit:P.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["transformedX","transformedY"],method:"translate"}}),P.Rotate=P.invent({parent:P.Matrix,inherit:P.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["rotation","cx","cy"],method:"rotate",at:function(t){var e=(new P.Matrix).rotate((new P.Number).morph(this.rotation-(this._undo?this._undo.rotation:0)).at(t),this.cx,this.cy);return this.inversed?e.inverse():e},undo:function(t){return this._undo=t,this}}}),P.Scale=P.invent({parent:P.Matrix,inherit:P.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["scaleX","scaleY","cx","cy"],method:"scale"}}),P.Skew=P.invent({parent:P.Matrix,inherit:P.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["skewX","skewY","cx","cy"],method:"skew"}}),P.extend(P.Element,{css:function(t,e){var n,i,r={};if(0===arguments.length)return this.node.style.cssText.split(/\s*;\s*/).filter(function(t){return!!t.length}).forEach(function(t){n=t.split(/\s*:\s*/),r[n[0]]=n[1]}),r;if(arguments.length<2){if(Array.isArray(t)){for(i=t.length;i--;)r[u(t[i])]=this.node.style[u(t[i])];return r}if("string"==typeof t)return this.node.style[u(t)];if("object"==typeof t)for(i in t)this.node.style[u(i)]=null==t[i]||P.regex.isBlank.test(t[i])?"":t[i]}return 2===arguments.length&&(this.node.style[u(t)]=null==e||P.regex.isBlank.test(e)?"":e),this}}),P.Parent=P.invent({create:function(t){this.constructor(t)},inherit:P.Element,extend:{children:function(){return P.utils.map(this.node.children,function(t){return P.adopt(t)})},add:function(t,e){return t=n(t),t.node!==this.node.children[e]&&this.node.insertBefore(t.node,this.node.children[e]||null),this},put:function(t,e){return this.add(t,e),t.instance||t},has:function(t){return this.index(t)>=0},index:function(t){return[].slice.call(this.node.children).indexOf(t.node)},get:function(t){return P.adopt(this.node.children[t])},first:function(){return this.get(0)},last:function(){return this.get(this.node.children.length-1)},each:function(t,e){var n,i,r=this.children();for(n=0,i=r.length;n<i;n++)r[n]instanceof P.Element&&t.apply(r[n],[n,r]),e&&r[n]instanceof P.Parent&&r[n].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this}}}),P.extend(P.Parent,{flatten:function(t){return this instanceof P.G||this instanceof P.Doc?(t=t||(this instanceof P.Doc&&this.isRoot()?this:this.parent(P.Parent)),this.each(function(){return this instanceof P.Defs?this:this instanceof P.Parent?this.flatten(t):this.toParent(t)}),this.node.firstElementChild||this.remove(),this):this},ungroup:function(t){return this instanceof P.G||this instanceof P.Doc&&!this.isRoot()?(t=t||this.parent(P.Parent),this.each(function(){return this.toParent(t)}),this.remove(),this):this}}),P.Container=P.invent({create:function(t){this.constructor(t)},inherit:P.Parent}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach(function(t){P.Element.prototype[t]=function(e){return P.on(this,t,e),this}}),P.listenerId=0,P.on=function(t,e,n,i,r){var s=n.bind(i||t),o=t instanceof P.Element?t.node:t;o.instance=o.instance||{events:{}};var a=o.instance.events;n._svgjsListenerId||(n._svgjsListenerId=++P.listenerId),e.split(P.regex.delimiter).forEach(function(t){var e=t.split(".")[0],i=t.split(".")[1]||"*";a[e]=a[e]||{},a[e][i]=a[e][i]||{},a[e][i][n._svgjsListenerId]=s,o.addEventListener(e,s,r||!1)})},P.off=function(t,e,n,i){var r=t instanceof P.Element?t.node:t;if(r.instance&&("function"!=typeof n||(n=n._svgjsListenerId))){var s=r.instance.events;(e||"").split(P.regex.delimiter).forEach(function(t){var e,o,a=t&&t.split(".")[0],h=t&&t.split(".")[1];if(n)s[a]&&s[a][h||"*"]&&(r.removeEventListener(a,s[a][h||"*"][n],i||!1),delete s[a][h||"*"][n]);else if(a&&h){if(s[a]&&s[a][h]){for(o in s[a][h])P.off(r,[a,h].join("."),o);delete s[a][h]}}else if(h)for(t in s)for(e in s[t])h===e&&P.off(r,[t,h].join("."));else if(a){if(s[a]){for(e in s[a])P.off(r,[a,e].join("."));delete s[a]}}else{for(t in s)P.off(r,t);r.instance.events={}}})}},P.extend(P.Element,{on:function(t,e,n,i){return P.on(this,t,e,n,i),this},off:function(t,e){return P.off(this.node,t,e),this},dispatch:function(e,n){return e instanceof t.Event?this.node.dispatchEvent(e):this.node.dispatchEvent(e=new t.CustomEvent(e,{detail:n,cancelable:!0})),e},fire:function(t,e){return this.dispatch(t,e),this}}),P.Defs=P.invent({create:"defs",inherit:P.Container}),P.G=P.invent({create:"g",inherit:P.Container,extend:{x:function(t){return null==t?this.transform("x"):this.transform({x:t-this.x()},!0)},y:function(t){return null==t?this.transform("y"):this.transform({y:t-this.y()},!0)},cx:function(t){return null==t?this.gbox().cx:this.x(t-this.gbox().width/2)},cy:function(t){return null==t?this.gbox().cy:this.y(t-this.gbox().height/2)},gbox:function(){var t=this.bbox(),e=this.transform();return t.x+=e.x,t.x2+=e.x,t.cx+=e.x,t.y+=e.y,t.y2+=e.y,t.cy+=e.y,t}},construct:{group:function(){return this.put(new P.G)}}}),P.extend(P.Element,{siblings:function(){return this.parent().children()},position:function(){return this.parent().index(this)},next:function(){return this.siblings()[this.position()+1]},prev:function(){return this.siblings()[this.position()-1]},forward:function(){var t=this.position()+1,e=this.parent();return e.removeElement(this).add(this,t),e instanceof P.Doc&&e.node.appendChild(e.defs().node),this},backward:function(){var t=this.position();return t>0&&this.parent().removeElement(this).add(this,t-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),t instanceof P.Doc&&t.node.appendChild(t.defs().node),this},back:function(){return this.position()>0&&this.parent().removeElement(this).add(this,0),this},before:function(t){t.remove();var e=this.position();return this.parent().add(t,e),this},after:function(t){t.remove();var e=this.position();return this.parent().add(t,e+1),this}}),P.Mask=P.invent({create:"mask",inherit:P.Container,extend:{remove:function(){return this.targets().forEach(function(t){t.unmask()}),P.Element.prototype.remove.call(this)},targets:function(){return P.select('svg [mask*="'+this.id()+'"]')}},construct:{mask:function(){return this.defs().put(new P.Mask)}}}),P.extend(P.Element,{maskWith:function(t){var e=t instanceof P.Mask?t:this.parent().mask().add(t);return this.attr("mask",'url("#'+e.id()+'")')},unmask:function(){return this.attr("mask",null)},masker:function(){return this.reference("mask")}}),P.ClipPath=P.invent({create:"clipPath",inherit:P.Container,extend:{remove:function(){return this.targets().forEach(function(t){t.unclip()}),P.Element.prototype.remove.call(this)},targets:function(){return P.select('svg [clip-path*="'+this.id()+'"]')}},construct:{clip:function(){return this.defs().put(new P.ClipPath)}}}),P.extend(P.Element,{clipWith:function(t){var e=t instanceof P.ClipPath?t:this.parent().clip().add(t);return this.attr("clip-path",'url("#'+e.id()+'")')},unclip:function(){return this.attr("clip-path",null)},clipper:function(){return this.reference("clip-path")}}),P.Gradient=P.invent({create:function(t){this.constructor("object"==typeof t?t:P.create(t+"Gradient"))},inherit:P.Container,extend:{stop:function(t,e,n){return this.put(new P.Stop).update(t,e,n)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},url:function(){return"url(#"+this.id()+")"},toString:function(){return this.url()},attr:function(t,e,n){return"transform"===t&&(t="gradientTransform"),P.Container.prototype.attr.call(this,t,e,n)}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),P.extend([P.Gradient,P.FX],{from:function(t,e){return"radialGradient"===(this._target||this).type?this.attr({fx:new P.Number(t),fy:new P.Number(e)}):this.attr({x1:new P.Number(t),y1:new P.Number(e)})},to:function(t,e){return"radialGradient"===(this._target||this).type?this.attr({cx:new P.Number(t),cy:new P.Number(e)}):this.attr({x2:new P.Number(t),y2:new P.Number(e)})}}),P.extend(P.Defs,{gradient:function(t,e){return this.put(new P.Gradient(t)).update(e)}}),P.Stop=P.invent({create:"stop",inherit:P.Element,extend:{update:function(t){return("number"==typeof t||t instanceof P.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new P.Number(t.offset)),this}}}),P.Pattern=P.invent({create:"pattern",inherit:P.Container,extend:{url:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.url()},attr:function(t,e,n){return"transform"===t&&(t="patternTransform"),P.Container.prototype.attr.call(this,t,e,n)}},construct:{pattern:function(t,e,n){return this.defs().pattern(t,e,n)}}}),P.extend(P.Defs,{pattern:function(t,e,n){return this.put(new P.Pattern).update(n).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),P.Doc=P.invent({create:function(t){this.constructor(t||P.create("svg")),this.namespace()},inherit:P.Container,extend:{isRoot:function(){return!(this.node.parentNode&&this.node.parentNode instanceof t.SVGElement&&"#document"!==this.node.parentNode.nodeName)},doc:function(){return this.isRoot()?this:P.Element.prototype.doc.call(this)},namespace:function(){return this.isRoot()?this.attr({xmlns:P.ns,version:"1.1"}).attr("xmlns:xlink",P.xlink,P.xmlns).attr("xmlns:svgjs",P.svgjs,P.xmlns):this.doc().namespace()},defs:function(){return this.isRoot()?P.adopt(this.node.getElementsByTagName("defs")[0])||this.put(new P.Defs):this.doc().defs()},parent:function(t){return this.isRoot()?"#document"===this.node.parentNode.nodeName?null:this.node.parentNode:P.Element.prototype.parent.call(this,t)},remove:function(){return this.isRoot()?(this.parent()&&this.parent().removeChild(this.node),this):P.Element.prototype.remove.call(this)},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this}},construct:{nested:function(){return this.put(new P.Doc)}}}),P.Shape=P.invent({create:function(t){this.constructor(t)},inherit:P.Element}),P.Bare=P.invent({create:function(t,e){if(this.constructor(P.create(t)),e)for(var n in e.prototype)"function"==typeof e.prototype[n]&&(this[n]=e.prototype[n])},inherit:P.Element,extend:{words:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.node.appendChild(e.createTextNode(t)),this}}}),P.extend(P.Parent,{element:function(t,e){return this.put(new P.Bare(t,e))}}),P.Symbol=P.invent({create:"symbol",inherit:P.Container,construct:{symbol:function(){return this.put(new P.Symbol)}}}),P.Use=P.invent({create:"use",inherit:P.Shape,extend:{element:function(t,e){return this.attr("href",(e||"")+"#"+t,P.xlink)}},construct:{use:function(t,e){return this.put(new P.Use).element(t,e)}}}),P.Rect=P.invent({create:"rect",inherit:P.Shape,construct:{rect:function(t,e){return this.put(new P.Rect).size(t,e)}}}),P.Circle=P.invent({create:"circle",inherit:P.Shape,construct:{circle:function(t){return this.put(new P.Circle).rx(new P.Number(t).divide(2)).move(0,0)}}}),P.extend([P.Circle,P.FX],{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),P.Ellipse=P.invent({create:"ellipse",inherit:P.Shape,construct:{ellipse:function(t,e){return this.put(new P.Ellipse).size(t,e).move(0,0)}}}),P.extend([P.Ellipse,P.Rect,P.FX],{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),P.extend([P.Circle,P.Ellipse],{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t)},width:function(t){return null==t?2*this.rx():this.rx(new P.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new P.Number(t).divide(2))},size:function(t,e){var n=d(this,t,e);return this.rx(new P.Number(n.width).divide(2)).ry(new P.Number(n.height).divide(2))}}),P.Line=P.invent({create:"line",inherit:P.Shape,extend:{array:function(){return new P.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,n,i){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:n,y2:i}:new P.PointArray(t).toLine(),this.attr(t))},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var n=d(this,t,e);return this.attr(this.array().size(n.width,n.height).toLine())}},construct:{line:function(t,e,n,i){return P.Line.prototype.plot.apply(this.put(new P.Line),null!=t?[t,e,n,i]:[0,0,0,0])}}}),P.Polyline=P.invent({create:"polyline",inherit:P.Shape,construct:{polyline:function(t){return this.put(new P.Polyline).plot(t||new P.PointArray)}}}),P.Polygon=P.invent({create:"polygon",inherit:P.Shape,construct:{polygon:function(t){return this.put(new P.Polygon).plot(t||new P.PointArray)}}}),P.extend([P.Polyline,P.Polygon],{array:function(){return this._array||(this._array=new P.PointArray(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new P.PointArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var n=d(this,t,e);return this.attr("points",this.array().size(n.width,n.height))}}),P.extend([P.Line,P.Polyline,P.Polygon],{MorphArray:P.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),P.Path=P.invent({create:"path",inherit:P.Shape,extend:{MorphArray:P.PathArray,array:function(){return this._array||(this._array=new P.PathArray(this.attr("d")))},plot:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new P.PathArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("d",this.array().move(t,e))},x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},size:function(t,e){var n=d(this,t,e);return this.attr("d",this.array().size(n.width,n.height))},width:function(t){return null==t?this.bbox().width:this.size(t,this.bbox().height)},height:function(t){return null==t?this.bbox().height:this.size(this.bbox().width,t)}},construct:{path:function(t){return this.put(new P.Path).plot(t||new P.PathArray)}}}),P.Image=P.invent({create:"image",inherit:P.Shape,extend:{load:function(e,n){if(!e)return this;var i=new t.Image;return P.on(i,"load",function(t){var r=this.parent(P.Pattern);0===this.width()&&0===this.height()&&this.size(i.width,i.height),r instanceof P.Pattern&&0===r.width()&&0===r.height()&&r.size(this.width(),this.height()),"function"==typeof n&&n.call(this,{width:i.width,height:i.height,ratio:i.width/i.height,url:e})},this),P.on(i,"load error",function(){P.off(i)}),this.attr("href",i.src=e,P.xlink)}},construct:{image:function(t,e){return this.put(new P.Image).size(0,0).load(t,e)}}}),P.Text=P.invent({create:function(t){this.constructor(t||P.create("text")),this.dom.leading=new P.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",P.defaults.attrs["font-family"])},inherit:P.Parent,extend:{x:function(t){return null==t?this.attr("x"):this.attr("x",t)},y:function(t){var e=this.attr("y"),n="number"==typeof e?e-this.bbox().y:0;return null==t?"number"==typeof e?e-n:e:this.attr("y","number"==typeof t?t+n:t)},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)},text:function(t){if(void 0===t){var e=this.node.childNodes,n=0;t="";for(var i=0,r=e.length;i<r;++i)"textPath"!==e[i].nodeName?(i!==n&&3!==e[i].nodeType&&!0===P.adopt(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent):0===i&&(n=1);return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{t=t.split("\n");for(var s=0,o=t.length;s<o;s++)this.tspan(t[s]).newLine()}return this.build(!1).rebuild()},leading:function(t){return null==t?this.dom.leading:(this.dom.leading=new P.Number(t),this.rebuild())},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,n=0,i=this.dom.leading*new P.Number(this.attr("font-size"));this.each(function(){this.dom.newLined&&(this.attr("x",e.attr("x")),"\n"===this.text()?n+=i:(this.attr("dy",i+n),n=0))}),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this},setData:function(t){return this.dom=t,this.dom.leading=new P.Number(t.leading||1.3),this}},construct:{text:function(t){return this.put(new P.Text).text(t)},plain:function(t){return this.put(new P.Text).plain(t)}}}),P.Tspan=P.invent({create:"tspan",inherit:P.Parent,extend:{text:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.parent(P.Text);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}}),P.extend([P.Text,P.Tspan],{plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(e.createTextNode(t)),this},tspan:function(t){var e=new P.Tspan;return this._build||this.clear(),this.node.appendChild(e.node),e.text(t)},length:function(){return this.node.getComputedTextLength()}}),P.TextPath=P.invent({create:"textPath",inherit:P.Text,parent:P.Parent,extend:{MorphArray:P.PathArray,array:function(){var t=this.track();return t?t.array():null},plot:function(t){var e=this.track(),n=null;return e&&(n=e.plot(t)),null==t?n:this},track:function(){return this.reference("href")}},construct:{textPath:function(t,e){return this.defs().path(e).text(t).addTo(this)}}}),P.extend([P.Text],{path:function(t){var e=new P.TextPath;return t instanceof P.Path||(t=this.doc().defs().path(t)),e.attr("href","#"+t,P.xlink),this.put(e)},textPath:function(){return this.select("textPath")}}),P.extend([P.Path],{text:function(t){if(t instanceof P.Text){var e=t.text();return t.clear().path(this).text(e)}return this.parent().put(new P.Text).path(this).text(t)}}),P.A=P.invent({create:"a",inherit:P.Container,extend:{to:function(t){return this.attr("href",t,P.xlink)},target:function(t){return this.attr("target",t)}},construct:{link:function(t){return this.put(new P.A).to(t)}}}),P.extend(P.Element,{linkTo:function(t){var e=new P.A;return"function"==typeof t?t.call(e,e):e.to(t),this.parent().put(e).put(this)}}),P.Marker=P.invent({create:"marker",inherit:P.Container,extend:{width:function(t){return this.attr("markerWidth",t)},height:function(t){return this.attr("markerHeight",t)},ref:function(t,e){return this.attr("refX",t).attr("refY",e)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return"url(#"+this.id()+")"}},construct:{marker:function(t,e,n){return this.defs().marker(t,e,n)}}}),P.extend(P.Defs,{marker:function(t,e,n){return this.put(new P.Marker).size(t,e).ref(t/2,e/2).viewbox(0,0,t,e).attr("orient","auto").update(n)}}),P.extend([P.Line,P.Polyline,P.Polygon,P.Path],{marker:function(t,e,n,i){var r=["marker"];return"all"!==t&&r.push(t),r=r.join("-"),t=arguments[1]instanceof P.Marker?arguments[1]:this.doc().marker(e,n,i),this.attr(r,t)}});var k={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"===e?t:t+"-"+e}};["fill","stroke"].forEach(function(t){var e,n={};n[t]=function(n){if(void 0===n)return this;if("string"==typeof n||P.Color.isRgb(n)||n&&"function"==typeof n.fill)this.attr(t,n);else for(e=k[t].length-1;e>=0;e--)null!=n[k[t][e]]&&this.attr(k.prefix(t,k[t][e]),n[k[t][e]]);return this},P.extend([P.Element,P.FX],n)}),P.extend([P.Element,P.FX],{rotate:function(t,e,n){return this.transform({rotation:t,cx:e,cy:n})},skew:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({skew:t,cx:e,cy:n}):this.transform({skewX:t,skewY:e,cx:n,cy:i})},scale:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({scale:t,cx:e,cy:n}):this.transform({scaleX:t,scaleY:e,cx:n,cy:i})},translate:function(t,e){return this.transform({x:t,y:e})},flip:function(t,e){return e="number"==typeof t?t:e,this.transform({flip:t||"both",offset:e})},matrix:function(t){return this.attr("transform",new P.Matrix(6===arguments.length?[].slice.call(arguments):t))},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new P.Number(t).plus(this instanceof P.FX?0:this.x()),!0)},dy:function(t){return this.y(new P.Number(t).plus(this instanceof P.FX?0:this.y()),!0)},dmove:function(t,e){return this.dx(t).dy(e)}}),P.extend([P.Rect,P.Ellipse,P.Circle,P.Gradient,P.FX],{radius:function(t,e){var n=(this._target||this).type;return"radialGradient"===n||"radialGradient"===n?this.attr("r",new P.Number(t)):this.rx(t).ry(null==e?t:e)}}),P.extend(P.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return new P.Point(this.node.getPointAtLength(t))}}),P.extend([P.Parent,P.Text,P.Tspan,P.FX],{font:function(t,e){if("object"==typeof t)for(e in t)this.font(e,t[e]);return"leading"===t?this.leading(e):"anchor"===t?this.attr("text-anchor",e):"size"===t||"family"===t||"weight"===t||"stretch"===t||"variant"===t||"style"===t?this.attr("font-"+t,e):this.attr(t,e)}}),P.extend(P.Element,{data:function(t,e,n){if("object"==typeof t)for(e in t)this.data(e,t[e]);else if(arguments.length<2)try{return JSON.parse(this.attr("data-"+t))}catch(e){return this.attr("data-"+t)}else this.attr("data-"+t,null===e?null:!0===n||"string"==typeof e||"number"==typeof e?e:JSON.stringify(e));return this}}),P.extend(P.Element,{remember:function(t,e){if("object"==typeof arguments[0])for(var n in t)this.remember(n,t[n]);else{if(1===arguments.length)return this.memory()[t];this.memory()[t]=e}return this},forget:function(){if(0===arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),P.get=function(t){var n=e.getElementById(b(t)||t);return P.adopt(n)},P.select=function(t,n){return P.utils.map((n||e).querySelectorAll(t),function(t){return P.adopt(t)})},P.$$=function(t,n){return P.utils.map((n||e).querySelectorAll(t),function(t){return P.adopt(t)})},P.$=function(t,n){return P.adopt((n||e).querySelector(t))},P.extend(P.Parent,{select:function(t){return P.select(t,this.node)}});var S="abcdef".split("");return P.Box=P.invent({create:function(t){var e=[0,0,0,0];t="string"==typeof t?t.split(P.regex.delimiter).map(parseFloat):Array.isArray(t)?t:"object"==typeof t?[null!=t.left?t.left:t.x,null!=t.top?t.top:t.y,t.width,t.height]:4===arguments.length?[].slice.call(arguments):e,this.x=t[0],this.y=t[1],this.width=t[2],this.height=t[3],w(this)},extend:{merge:function(t){var e=Math.min(this.x,t.x),n=Math.min(this.y,t.y);return new P.Box(e,n,Math.max(this.x+this.width,t.x+t.width)-e,Math.max(this.y+this.height,t.y+t.height)-n)},transform:function(t){var e=1/0,n=-1/0,i=1/0,r=-1/0;return[new P.Point(this.x,this.y),new P.Point(this.x2,this.y),new P.Point(this.x,this.y2),new P.Point(this.x2,this.y2)].forEach(function(s){s=s.transform(t),e=Math.min(e,s.x),n=Math.max(n,s.x),i=Math.min(i,s.y),r=Math.max(r,s.y)}),new P.Box(e,i,n-e,r-i)},addOffset:function(){return this.x+=t.pageXOffset,this.y+=t.pageYOffset,this},toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height},morph:function(t,e,n,i){return this.destination=new P.Box(t,e,n,i),this},at:function(t){return this.destination?new P.Box(this.x+(this.destination.x-this.x)*t,this.y+(this.destination.y-this.y)*t,this.width+(this.destination.width-this.width)*t,this.height+(this.destination.height-this.height)*t):this}},parent:P.Element,construct:{bbox:function(){var t;try{if(t=this.node.getBBox(),i(t)&&!r(this.node))throw new Exception("Element not in the dom")}catch(n){try{var e=this.clone(P.parser().svg).show();t=e.node.getBBox(),e.remove()}catch(t){console.warn("Getting a bounding box of this element is not possible")}}return new P.Box(t)},rbox:function(t){try{var e=new P.Box(this.node.getBoundingClientRect());return t?e.transform(t.screenCTM().inverse()):e.addOffset()}catch(t){return new P.Box}}}}),P.extend([P.Doc,P.Symbol,P.Image,P.Pattern,P.Marker,P.ForeignObject,P.View],{viewbox:function(t,e,n,i){return null==t?new P.Box(this.attr("viewBox")):this.attr("viewBox",new P.Box(t,e,n,i))}}),P.parser=function(){var t;return P.parser.nodes.svg.node.parentNode||(t=e.body||e.documentElement,P.parser.nodes.svg.addTo(t)),P.parser.nodes},P.parser.nodes={svg:P().size(2,0).css({opacity:0,position:"absolute",left:"-100%",top:"-100%",overflow:"hidden"})},P.parser.nodes.path=P.parser.nodes.svg.path().node,P});
\ No newline at end of file +/*! svg.js v3.0.0 MIT*/;!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t,t.document)}):"object"==typeof exports?module.exports=t.document?e(t,t.document):function(t){return e(t,t.document)}:t.SVG=e(t,t.document)}("undefined"!=typeof window?window:this,function(t,e){function n(t,n){if(t instanceof b.Element)return t;if("object"==typeof t)return b.adopt(t);if(null==t)return new b.Doc;if("string"==typeof t&&"<"!==t.charAt(0))return b.adopt(e.querySelector(t));var i=b.create("svg");return i.innerHTML=t,t=b.adopt(i.firstElementChild)}function i(t){return!(t.w||t.h||t.x||t.y)}function r(t){return(e.documentElement.contains||function(t){for(;t.parentNode;)t=t.parentNode;return t===e}).call(e.documentElement,t)}function s(t,e,n,i){return n+i.replace(b.regex.dots," .")}function o(t){for(var e=t.slice(0),n=e.length;n--;)Array.isArray(e[n])&&(e[n]=o(e[n]));return e}function a(t,e){return t instanceof e}function h(t,e){return(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}function u(t){return t.toLowerCase().replace(/-(.)/g,function(t,e){return e.toUpperCase()})}function l(t){return t.charAt(0).toUpperCase()+t.slice(1)}function c(t){return 4===t.length?["#",t.substring(1,2),t.substring(1,2),t.substring(2,3),t.substring(2,3),t.substring(3,4),t.substring(3,4)].join(""):t}function f(t){var e=t.toString(16);return 1===e.length?"0"+e:e}function d(t,e,n){if(null==e||null==n){var i=t.bbox();null==e?e=i.width/i.height*n:null==n&&(n=i.height/i.width*e)}return{width:e,height:n}}function p(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}function m(t){return t instanceof b.Matrix||(t=new b.Matrix(t)),t}function v(t){for(var e=0,n=t.length,i="";e<n;e++)i+=t[e][0],null!=t[e][1]&&(i+=t[e][1],null!=t[e][2]&&(i+=" ",i+=t[e][2],null!=t[e][3]&&(i+=" ",i+=t[e][3],i+=" ",i+=t[e][4],null!=t[e][5]&&(i+=" ",i+=t[e][5],i+=" ",i+=t[e][6],null!=t[e][7]&&(i+=" ",i+=t[e][7])))));return i+" "}function x(t){for(var e=t.children.length-1;e>=0;e--)x(t.children[e]);return t.id?b.adopt(t).id(b.eid(t.nodeName)):b.adopt(t)}function g(t){return null==t.x&&(t.x=0,t.y=0,t.width=0,t.height=0),t.w=t.width,t.h=t.height,t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function y(t){var e=(t||"").toString().match(b.regex.reference);if(e)return e[1]}function w(t,e,n){return Math.abs(e-t)<(n||1e-6)}if(!e.createElementNS||!e.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect)return{supported:!1};var b=this.SVG=function(t){if(b.supported)return t=n(t)};b.supported=!0,b.ns="http://www.w3.org/2000/svg",b.xmlns="http://www.w3.org/2000/xmlns/",b.xlink="http://www.w3.org/1999/xlink",b.svgjs="http://svgjs.com/svgjs",b.did=1e3,b.eid=function(t){return"Svgjs"+l(t)+b.did++},b.create=function(t){return e.createElementNS(this.ns,t)},b.extend=function(t,e){var n,i;for(t=Array.isArray(t)?t:[t],i=t.length-1;i>=0;i--)if(t[i])for(n in e)t[i].prototype[n]=e[n]},b.invent=function(t){var e="function"==typeof t.create?t.create:function(e){this.constructor(e||b.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&b.extend(e,t.extend),t.construct&&b.extend(t.parent||b.Container,t.construct),e},b.adopt=function(e){if(!e)return null;if(e.instance instanceof b.Element)return e.instance;if(!(e instanceof t.SVGElement))return new b.HtmlNode(e);return"svg"===e.nodeName?new b.Doc(e):"linearGradient"===e.nodeName||"radialGradient"===e.nodeName?new b.Gradient(e):b[l(e.nodeName)]?new(b[l(e.nodeName)])(e):new b.Parent(e)},b.regex={numberAndUnit:/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,transforms:/\)\s*,?\s*/,whitespace:/\s/g,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,isPercent:/^-?[\d.]+%$/,isImage:/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,delimiter:/[\s,]+/,hyphen:/([^e])-/gi,pathLetters:/[MLHVCSQTAZ]/gi,isPathLetter:/[MLHVCSQTAZ]/i,numbersWithDots:/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,dots:/\./g},b.utils={map:function(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)r.push(e(t[n]));return r},filter:function(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)e(t[n])&&r.push(t[n]);return r},radians:function(t){return t%360*Math.PI/180},degrees:function(t){return 180*t/Math.PI%360},filterSVGElements:function(e){return this.filter(e,function(e){return e instanceof t.SVGElement})}},b.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"}},b.Color=function(t){var e;this.r=0,this.g=0,this.b=0,t&&("string"==typeof t?b.regex.isRgb.test(t)?(e=b.regex.rgb.exec(t.replace(b.regex.whitespace,"")),this.r=parseInt(e[1]),this.g=parseInt(e[2]),this.b=parseInt(e[3])):b.regex.isHex.test(t)&&(e=b.regex.hex.exec(c(t)),this.r=parseInt(e[1],16),this.g=parseInt(e[2],16),this.b=parseInt(e[3],16)):"object"==typeof t&&(this.r=t.r,this.g=t.g,this.b=t.b))},b.extend(b.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+f(this.r)+f(this.g)+f(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new b.Color(t),this},at:function(t){return this.destination?(t=t<0?0:t>1?1:t,new b.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),b.Color.test=function(t){return t+="",b.regex.isHex.test(t)||b.regex.isRgb.test(t)},b.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},b.Color.isColor=function(t){return b.Color.isRgb(t)||b.Color.test(t)},b.Array=function(t,e){t=(t||[]).valueOf(),0===t.length&&e&&(t=e.valueOf()),this.value=this.parse(t)},b.extend(b.Array,{morph:function(t){if(this.destination=this.parse(t),this.value.length!==this.destination.length){for(var e=this.value[this.value.length-1],n=this.destination[this.destination.length-1];this.value.length>this.destination.length;)this.destination.push(n);for(;this.value.length<this.destination.length;)this.value.push(e)}return this},settle:function(){for(var t=0,e=this.value.length,n=[];t<e;t++)-1===n.indexOf(this.value[t])&&n.push(this.value[t]);return this.value=n,n},at:function(t){if(!this.destination)return this;for(var e=0,n=this.value.length,i=[];e<n;e++)i.push(this.value[e]+(this.destination[e]-this.value[e])*t);return new b.Array(i)},toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:t.trim().split(b.regex.delimiter).map(parseFloat)},reverse:function(){return this.value.reverse(),this},clone:function(){var t=new this.constructor;return t.value=o(this.value),t}}),b.PointArray=function(t,e){b.Array.call(this,t,e||[[0,0]])},b.PointArray.prototype=new b.Array,b.PointArray.prototype.constructor=b.PointArray,b.extend(b.PointArray,{toString:function(){for(var t=0,e=this.value.length,n=[];t<e;t++)n.push(this.value[t].join(","));return n.join(" ")},toLine:function(){return{x1:this.value[0][0],y1:this.value[0][1],x2:this.value[1][0],y2:this.value[1][1]}},at:function(t){if(!this.destination)return this;for(var e=0,n=this.value.length,i=[];e<n;e++)i.push([this.value[e][0]+(this.destination[e][0]-this.value[e][0])*t,this.value[e][1]+(this.destination[e][1]-this.value[e][1])*t]);return new b.PointArray(i)},parse:function(t){var e=[];if(t=t.valueOf(),Array.isArray(t)){if(Array.isArray(t[0]))return t}else t=t.trim().split(b.regex.delimiter).map(parseFloat);t.length%2!=0&&t.pop();for(var n=0,i=t.length;n<i;n+=2)e.push([t[n],t[n+1]]);return e},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i=this.value.length-1;i>=0;i--)this.value[i]=[this.value[i][0]+t,this.value[i][1]+e];return this},size:function(t,e){var n,i=this.bbox();for(n=this.value.length-1;n>=0;n--)i.width&&(this.value[n][0]=(this.value[n][0]-i.x)*t/i.width+i.x),i.height&&(this.value[n][1]=(this.value[n][1]-i.y)*e/i.height+i.y);return this},bbox:function(){var t=-1/0,e=-1/0,n=1/0,i=1/0;return this.value.forEach(function(r){t=Math.max(r[0],t),e=Math.max(r[1],e),n=Math.min(r[0],n),i=Math.min(r[1],i)}),{x:n,y:i,width:t-n,height:e-i}}});for(var P={M:function(t,e,n){return e.x=n.x=t[0],e.y=n.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},S:function(t,e){return e.x=t[2],e.y=t[3],["S",t[0],t[1],t[2],t[3]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},T:function(t,e){return e.x=t[0],e.y=t[1],["T",t[0],t[1]]},Z:function(t,e,n){return e.x=n.x,e.y=n.y,["Z"]},A:function(t,e){return e.x=t[5],e.y=t[6],["A",t[0],t[1],t[2],t[3],t[4],t[5],t[6]]}},A="mlhvqtcsaz".split(""),C=0,N=A.length;C<N;++C)P[A[C]]=function(t){return function(e,n,i){if("H"===t)e[0]=e[0]+n.x;else if("V"===t)e[0]=e[0]+n.y;else if("A"===t)e[5]=e[5]+n.x,e[6]=e[6]+n.y;else for(var r=0,s=e.length;r<s;++r)e[r]=e[r]+(r%2?n.y:n.x);return P[t](e,n,i)}}(A[C].toUpperCase());b.PathArray=function(t,e){b.Array.call(this,t,e||[["M",0,0]])},b.PathArray.prototype=new b.Array,b.PathArray.prototype.constructor=b.PathArray,b.extend(b.PathArray,{toString:function(){return v(this.value)},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i,r=this.value.length-1;r>=0;r--)i=this.value[r][0],"M"===i||"L"===i||"T"===i?(this.value[r][1]+=t,this.value[r][2]+=e):"H"===i?this.value[r][1]+=t:"V"===i?this.value[r][1]+=e:"C"===i||"S"===i||"Q"===i?(this.value[r][1]+=t,this.value[r][2]+=e,this.value[r][3]+=t,this.value[r][4]+=e,"C"===i&&(this.value[r][5]+=t,this.value[r][6]+=e)):"A"===i&&(this.value[r][6]+=t,this.value[r][7]+=e);return this},size:function(t,e){var n,i,r=this.bbox();for(n=this.value.length-1;n>=0;n--)i=this.value[n][0],"M"===i||"L"===i||"T"===i?(this.value[n][1]=(this.value[n][1]-r.x)*t/r.width+r.x,this.value[n][2]=(this.value[n][2]-r.y)*e/r.height+r.y):"H"===i?this.value[n][1]=(this.value[n][1]-r.x)*t/r.width+r.x:"V"===i?this.value[n][1]=(this.value[n][1]-r.y)*e/r.height+r.y:"C"===i||"S"===i||"Q"===i?(this.value[n][1]=(this.value[n][1]-r.x)*t/r.width+r.x,this.value[n][2]=(this.value[n][2]-r.y)*e/r.height+r.y,this.value[n][3]=(this.value[n][3]-r.x)*t/r.width+r.x,this.value[n][4]=(this.value[n][4]-r.y)*e/r.height+r.y,"C"===i&&(this.value[n][5]=(this.value[n][5]-r.x)*t/r.width+r.x,this.value[n][6]=(this.value[n][6]-r.y)*e/r.height+r.y)):"A"===i&&(this.value[n][1]=this.value[n][1]*t/r.width,this.value[n][2]=this.value[n][2]*e/r.height,this.value[n][6]=(this.value[n][6]-r.x)*t/r.width+r.x,this.value[n][7]=(this.value[n][7]-r.y)*e/r.height+r.y);return this},equalCommands:function(t){var e,n,i;for(t=new b.PathArray(t),i=this.value.length===t.value.length,e=0,n=this.value.length;i&&e<n;e++)i=this.value[e][0]===t.value[e][0];return i},morph:function(t){return t=new b.PathArray(t),this.equalCommands(t)?this.destination=t:this.destination=null,this},at:function(t){if(!this.destination)return this;var e,n,i,r,s=this.value,o=this.destination.value,a=[],h=new b.PathArray;for(e=0,n=s.length;e<n;e++){for(a[e]=[s[e][0]],i=1,r=s[e].length;i<r;i++)a[e][i]=s[e][i]+(o[e][i]-s[e][i])*t;"A"===a[e][0]&&(a[e][4]=+(0!==a[e][4]),a[e][5]=+(0!==a[e][5]))}return h.value=a,h},parse:function(t){if(t instanceof b.PathArray)return t.valueOf();var e,n={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};t="string"==typeof t?t.replace(b.regex.numbersWithDots,s).replace(b.regex.pathLetters," $& ").replace(b.regex.hyphen,"$1 -").trim().split(b.regex.delimiter):t.reduce(function(t,e){return[].concat.call(t,e)},[]);var i=[],r=new b.Point,o=new b.Point,a=0,h=t.length;do{b.regex.isPathLetter.test(t[a])?(e=t[a],++a):"M"===e?e="L":"m"===e&&(e="l"),i.push(P[e].call(null,t.slice(a,a+=n[e.toUpperCase()]).map(parseFloat),r,o))}while(h>a);return i},bbox:function(){return b.parser().path.setAttribute("d",this.toString()),b.parser.nodes.path.getBBox()}}),b.Number=b.invent({create:function(t,e){this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-3.4e38:3.4e38:"string"==typeof t?(e=t.match(b.regex.numberAndUnit))&&(this.value=parseFloat(e[1]),"%"===e[5]?this.value/=100:"s"===e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof b.Number&&(this.value=t.valueOf(),this.unit=t.unit)},extend:{toString:function(){return("%"===this.unit?~~(1e8*this.value)/1e6:"s"===this.unit?this.value/1e3:this.value)+this.unit},toJSON:function(){return this.toString()},valueOf:function(){return this.value},plus:function(t){return t=new b.Number(t),new b.Number(this+t,this.unit||t.unit)},minus:function(t){return t=new b.Number(t),new b.Number(this-t,this.unit||t.unit)},times:function(t){return t=new b.Number(t),new b.Number(this*t,this.unit||t.unit)},divide:function(t){return t=new b.Number(t),new b.Number(this/t,this.unit||t.unit)},to:function(t){var e=new b.Number(this);return"string"==typeof t&&(e.unit=t),e},morph:function(t){return this.destination=new b.Number(t),t.relative&&(this.destination.value+=this.value),this},at:function(t){return this.destination?new b.Number(this.destination).minus(this).times(t).plus(this):this}}}),b.HtmlNode=b.invent({create:function(t){this.node=t},extend:{add:function(t,e){return t=n(t),t.node!==this.node.children[e]&&this.node.insertBefore(t.node,this.node.children[e]||null),this},put:function(t,e){return this.add(t,e),t}}}),b.Element=b.invent({create:function(t){this.events={},this.dom={},this.node=t,this.node&&(this.type=t.nodeName,this.node.instance=this,this.events=t.events||{},t.hasAttribute("svgjs:data")&&this.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}))},extend:{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var n=d(this,t,e);return this.width(new b.Number(n.width)).height(new b.Number(n.height))},clone:function(t){this.writeDataToDom();var e=x(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return n(t).put(this)},putIn:function(t){return n(t).add(this)},id:function(t){return void 0!==t||this.node.id||(this.node.id=b.eid(this.type)),this.attr("id",t)},inside:function(t,e){var n=this.bbox();return t>n.x&&e>n.y&&t<n.x+n.width&&e<n.y+n.height},show:function(){return this.css("display","")},hide:function(){return this.css("display","none")},visible:function(){return"none"!==this.css("display")},toString:function(){return this.id()},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(b.regex.delimiter)},hasClass:function(t){return-1!==this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){return this.hasClass(t)&&this.attr("class",this.classes().filter(function(e){return e!==t}).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return b.get(this.attr(t))},parent:function(e){var n=this;if(!n.node.parentNode)return null;if(n=b.adopt(n.node.parentNode),!e)return n;for(;n&&n.node instanceof t.SVGElement;){if("string"==typeof e?n.matches(e):n instanceof e)return n;n=b.adopt(n.node.parentNode)}},doc:function(){var t=this.parent(b.Doc);return t&&t.doc()},defs:function(){return this.doc().defs()},parents:function(t){var e=[],n=this;do{if(!(n=n.parent(t))||!n.node)break;e.push(n)}while(n.parent);return e},matches:function(t){return h(this.node,t)},native:function(){return this.node},svg:function(t){var n,i;if(!(t&&this instanceof b.Parent))return this.writeDataToDom(),this.node.outerHTML;for(n=e.createElementNS(b.ns,"svg"),n.innerHTML=t,i=n.children.length;i--;)this.node.appendChild(n.firstElementChild);return this},writeDataToDom:function(){return this.is(b.Parent)&&this.each(function(){this.writeDataToDom()}),this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),this},setData:function(t){return this.dom=t,this},is:function(t){return a(this,t)}}}),b.easing={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)}},b.morph=function(t){return function(e,n){return new b.MorphObj(e,n).at(t)}},b.Situation=b.invent({create:function(t){this.init=!1,this.reversed=!1,this.reversing=!1,this.duration=new b.Number(t.duration).valueOf(),this.delay=new b.Number(t.delay).valueOf(),this.start=+new Date+this.delay,this.finish=this.start+this.duration,this.ease=t.ease,this.loop=0,this.loops=!1,this.animations={},this.attrs={},this.styles={},this.transforms=[],this.once={}}}),b.FX=b.invent({create:function(t){this._target=t,this.situations=[],this.active=!1,this.situation=null,this.paused=!1,this.lastPos=0,this.pos=0,this.absPos=0,this._speed=1},extend:{animate:function(t,e,n){"object"==typeof t&&(e=t.ease,n=t.delay,t=t.duration);var i=new b.Situation({duration:t||1e3,delay:n||0,ease:b.easing[e||"-"]||e});return this.queue(i),this},delay:function(t){var e=new b.Situation({duration:t,delay:0,ease:b.easing["-"]});return this.queue(e)},target:function(t){return t&&t instanceof b.Element?(this._target=t,this):this._target},timeToAbsPos:function(t){return(t-this.situation.start)/(this.situation.duration/this._speed)},absPosToTime:function(t){return this.situation.duration/this._speed*t+this.situation.start},startAnimFrame:function(){this.stopAnimFrame(),this.animationFrame=t.requestAnimationFrame(function(){this.step()}.bind(this))},stopAnimFrame:function(){t.cancelAnimationFrame(this.animationFrame)},start:function(){return!this.active&&this.situation&&(this.active=!0,this.startCurrent()),this},startCurrent:function(){return this.situation.start=+new Date+this.situation.delay/this._speed,this.situation.finish=this.situation.start+this.situation.duration/this._speed,this.initAnimations().step()},queue:function(t){return("function"==typeof t||t instanceof b.Situation)&&this.situations.push(t),this.situation||(this.situation=this.situations.shift()),this},dequeue:function(){return this.stop(),this.situation=this.situations.shift(),this.situation&&(this.situation instanceof b.Situation?this.start():this.situation(this)),this},initAnimations:function(){var t,e,n,i=this.situation;if(i.init)return this;for(t in i.animations)for(n=this.target()[t](),Array.isArray(n)||(n=[n]),Array.isArray(i.animations[t])||(i.animations[t]=[i.animations[t]]),e=n.length;e--;)i.animations[t][e]instanceof b.Number&&(n[e]=new b.Number(n[e])),i.animations[t][e]=n[e].morph(i.animations[t][e]);for(t in i.attrs)i.attrs[t]=new b.MorphObj(this.target().attr(t),i.attrs[t]);for(t in i.styles)i.styles[t]=new b.MorphObj(this.target().css(t),i.styles[t]);return i.initialTransformation=this.target().matrixify(),i.init=!0,this},clearQueue:function(){return this.situations=[],this},clearCurrent:function(){return this.situation=null,this},stop:function(t,e){var n=this.active;return this.active=!1,e&&this.clearQueue(),t&&this.situation&&(!n&&this.startCurrent(),this.atEnd()),this.stopAnimFrame(),this.clearCurrent()},reset:function(){if(this.situation){var t=this.situation;this.stop(),this.situation=t,this.atStart()}return this},finish:function(){for(this.stop(!0,!1);this.dequeue().situation&&this.stop(!0,!1););return this.clearQueue().clearCurrent(),this},atStart:function(){return this.at(0,!0)},atEnd:function(){return!0===this.situation.loops&&(this.situation.loops=this.situation.loop+1),"number"==typeof this.situation.loops?this.at(this.situation.loops,!0):this.at(1,!0)},at:function(t,e){var n=this.situation.duration/this._speed;return this.absPos=t,e||(this.situation.reversed&&(this.absPos=1-this.absPos),this.absPos+=this.situation.loop),this.situation.start=+new Date-this.absPos*n,this.situation.finish=this.situation.start+n,this.step(!0)},speed:function(t){return 0===t?this.pause():t?(this._speed=t,this.at(this.absPos,!0)):this._speed},loop:function(t,e){var n=this.last();return n.loops=null==t||t,n.loop=0,e&&(n.reversing=!0),this},pause:function(){return this.paused=!0,this.stopAnimFrame(),this},play:function(){return this.paused?(this.paused=!1,this.at(this.absPos,!0)):this},reverse:function(t){var e=this.last();return e.reversed=void 0===t?!e.reversed:t,this},progress:function(t){return t?this.situation.ease(this.pos):this.pos},after:function(t){function e(i){i.detail.situation===n&&(t.call(this,n),this.off("finished.fx",e))}var n=this.last();return this.target().on("finished.fx",e),this._callStart()},during:function(t){function e(e){e.detail.situation===n&&t.call(this,e.detail.pos,b.morph(e.detail.pos),e.detail.eased,n)}var n=this.last();return this.target().off("during.fx",e).on("during.fx",e),this.after(function(){this.off("during.fx",e)}),this._callStart()},afterAll:function(t){var e=function e(n){t.call(this),this.off("allfinished.fx",e)};return this.target().off("allfinished.fx",e).on("allfinished.fx",e),this._callStart()},duringAll:function(t){var e=function(e){t.call(this,e.detail.pos,b.morph(e.detail.pos),e.detail.eased,e.detail.situation)};return this.target().off("during.fx",e).on("during.fx",e),this.afterAll(function(){this.off("during.fx",e)}),this._callStart()},last:function(){return this.situations.length?this.situations[this.situations.length-1]:this.situation},add:function(t,e,n){return this.last()[n||"animations"][t]=e,this._callStart()},step:function(t){if(t||(this.absPos=this.timeToAbsPos(+new Date)),!1!==this.situation.loops){var e,n,i;e=Math.max(this.absPos,0),n=Math.floor(e),!0===this.situation.loops||n<this.situation.loops?(this.pos=e-n,i=this.situation.loop,this.situation.loop=n):(this.absPos=this.situation.loops,this.pos=1,i=this.situation.loop-1,this.situation.loop=this.situation.loops),this.situation.reversing&&(this.situation.reversed=this.situation.reversed!==Boolean((this.situation.loop-i)%2))}else this.absPos=Math.min(this.absPos,1),this.pos=this.absPos;this.pos<0&&(this.pos=0),this.situation.reversed&&(this.pos=1-this.pos);var r=this.situation.ease(this.pos);for(var s in this.situation.once)s>this.lastPos&&s<=r&&(this.situation.once[s].call(this.target(),this.pos,r),delete this.situation.once[s]);return this.active&&this.target().fire("during",{pos:this.pos,eased:r,fx:this,situation:this.situation}),this.situation?(this.eachAt(),1===this.pos&&!this.situation.reversed||this.situation.reversed&&0===this.pos?(this.stopAnimFrame(),this.target().fire("finished",{fx:this,situation:this.situation}),this.situations.length||(this.target().fire("allfinished"),this.situations.length||(this.target().off(".fx"),this.active=!1)),this.active?this.dequeue():this.clearCurrent()):!this.paused&&this.active&&this.startAnimFrame(),this.lastPos=r,this):this},eachAt:function(){var t,e,n=this,i=this.target(),r=this.situation;for(t in r.animations)e=[].concat(r.animations[t]).map(function(t){return"string"!=typeof t&&t.at?t.at(r.ease(n.pos),n.pos):t}),i[t].apply(i,e);for(t in r.attrs)e=[t].concat(r.attrs[t]).map(function(t){return"string"!=typeof t&&t.at?t.at(r.ease(n.pos),n.pos):t}),i.attr.apply(i,e);for(t in r.styles)e=[t].concat(r.styles[t]).map(function(t){return"string"!=typeof t&&t.at?t.at(r.ease(n.pos),n.pos):t}),i.css.apply(i,e);return r.transforms.length,this},once:function(t,e,n){var i=this.last();return n||(t=i.ease(t)),i.once[t]=e,this},_callStart:function(){return setTimeout(function(){this.start()}.bind(this),0),this}},parent:b.Element,construct:{animate:function(t,e,n){return(this.fx||(this.fx=new b.FX(this))).animate(t,e,n)},delay:function(t){return(this.fx||(this.fx=new b.FX(this))).delay(t)},stop:function(t,e){return this.fx&&this.fx.stop(t,e),this},finish:function(){return this.fx&&this.fx.finish(),this},pause:function(){return this.fx&&this.fx.pause(),this},play:function(){return this.fx&&this.fx.play(),this},speed:function(t){if(this.fx){if(null==t)return this.fx.speed();this.fx.speed(t)}return this}}}),b.MorphObj=b.invent({create:function(t,e){return b.Color.isColor(e)?new b.Color(t).morph(e):b.regex.delimiter.test(t)?new b.Array(t).morph(e):b.regex.numberAndUnit.test(e)?new b.Number(t).morph(e):(this.value=t,void(this.destination=e))},extend:{at:function(t,e){return e<1?this.value:this.destination},valueOf:function(){return this.value}}}),b.extend(b.FX,{attr:function(t,e,n){if("object"==typeof t)for(var i in t)this.attr(i,t[i]);else this.add(t,e,"attrs");return this},css:function(t,e){if("object"==typeof t)for(var n in t)this.css(n,t[n]);else this.add(t,e,"styles");return this},x:function(t,e){if(this.target()instanceof b.G)return this.transform({x:t},e),this;var n=new b.Number(t);return n.relative=e,this.add("x",n)},y:function(t,e){if(this.target()instanceof b.G)return this.transform({y:t},e),this;var n=new b.Number(t);return n.relative=e,this.add("y",n)},cx:function(t){return this.add("cx",new b.Number(t))},cy:function(t){return this.add("cy",new b.Number(t))},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){if(this.target()instanceof b.Text)this.attr("font-size",t);else{var n;t&&e||(n=this.target().bbox()),t||(t=n.width/n.height*e),e||(e=n.height/n.width*t),this.add("width",new b.Number(t)).add("height",new b.Number(e))}return this},width:function(t){return this.add("width",new b.Number(t))},height:function(t){return this.add("height",new b.Number(t))},plot:function(t,e,n,i){return 4===arguments.length?this.plot([t,e,n,i]):this.add("plot",new(this.target().MorphArray)(t))},leading:function(t){return this.target().leading?this.add("leading",new b.Number(t)):this},viewbox:function(t,e,n,i){return this.target()instanceof b.Container&&this.add("viewbox",new b.Box(t,e,n,i)),this},update:function(t){if(this.target()instanceof b.Stop){if("number"==typeof t||t instanceof b.Number)return this.update({offset:arguments[0],color:arguments[1],opacity:arguments[2]});null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",t.offset)}return this}}),b.Matrix=b.invent({create:function(t){var e,n=p([1,0,0,1,0,0]);for(t=t instanceof b.Element?t.matrixify():"string"==typeof t?p(t.split(b.regex.delimiter).map(parseFloat)):6===arguments.length?p([].slice.call(arguments)):Array.isArray(t)?p(t):"object"==typeof t?t:n,e=S.length-1;e>=0;--e)this[S[e]]=null!=t[S[e]]?t[S[e]]:n[S[e]]},extend:{clone:function(){return new b.Matrix(this)},transform:function(t){var e=!t.flip||"x"!==t.flip&&"both"!==t.flip?1:-1,n=!t.flip||"y"!==t.flip&&"both"!==t.flip?1:-1,i=t.skew&&t.skew.length?t.skew[0]:isFinite(t.skew)?t.skew:isFinite(t.skewX)?t.skewX:0,r=t.skew&&t.skew.length?t.skew[1]:isFinite(t.skew)?t.skew:isFinite(t.skewY)?t.skewY:0,s=t.scale&&t.scale.length?t.scale[0]*e:isFinite(t.scale)?t.scale*e:isFinite(t.scaleX)?t.scaleX*e:e,o=t.scale&&t.scale.length?t.scale[1]*n:isFinite(t.scale)?t.scale*n:isFinite(t.scaleY)?t.scaleY*n:n,a=t.shear||0,h=t.rotate||0,u=t.origin&&t.origin.length?t.origin[0]:t.ox||0,l=t.origin&&t.origin.length?t.origin[1]:t.oy||0,c=t.position&&t.position.length?t.position[0]:t.px,f=t.position&&t.position.length?t.position[1]:t.py,d=t.translate&&t.translate.length?t.translate[0]:t.tx||0,p=t.translate&&t.translate.length?t.translate[1]:t.ty||0,m=t.relative&&t.relative.length?t.relative[0]:t.rx||0,v=t.relative&&t.relative.length?t.relative[1]:t.ry||0,x=new b.Matrix(this),g=(new b.Matrix).translate(-u,-l).scale(s,o).skew(i,r).shear(a).rotate(h).translate(u,l).translate(m,v).lmultiply(x);if(isFinite(c)&&isFinite(f)){var y=new b.Point(u-m,l-v).transform(g),w=c-y.x,P=f-y.y;g=g.translate(w,P)}return g=g.translate(d,p)},compose:function(t){var e=t.scaleX||1,n=t.scaleY||1,i=t.shear||0,r=t.rotate||0,s=t.translateX||0,o=t.translateY||0;return(new b.Matrix).scale(e,n).shear(i).rotate(r).translate(s,o).lmultiply(this)},decompose:function(){var t=this.a,e=this.b,n=this.c,i=this.d,r=this.e,s=this.f,o=t*i-e*n,a=o>0?1:-1,h=a*Math.sqrt(t*t+e*e),u=180/Math.PI*Math.atan2(a*e,a*t),l=(t*n+e*i)/o;return{scaleX:h,scaleY:n*h/(l*t-e)||i*h/(l*e+t),shear:l,rotate:u,translateX:r,translateY:s,matrix:new b.Matrix(this),a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f}},morph:function(t){return this.destination=new b.Matrix(t),this},at:function(t){return this.destination?new b.Matrix({a:this.a+(this.destination.a-this.a)*t,b:this.b+(this.destination.b-this.b)*t,c:this.c+(this.destination.c-this.c)*t,d:this.d+(this.destination.d-this.d)*t,e:this.e+(this.destination.e-this.e)*t,f:this.f+(this.destination.f-this.f)*t}):this},multiply:function(t){var e=this,n=m(t),i=e.a*n.a+e.c*n.b,r=e.b*n.a+e.d*n.b,s=e.a*n.c+e.c*n.d,o=e.b*n.c+e.d*n.d,a=e.e+e.a*n.e+e.c*n.f,h=e.f+e.b*n.e+e.d*n.f;return new b.Matrix(i,r,s,o,a,h)},lmultiply:function(t){return m(t).multiply(this)},inverse:function(){return new b.Matrix(this.native().inverse())},translate:function(t,e){var n=new b.Matrix(this);return n.e+=t||0,n.f+=e||0,n},scale:function(t,e,n,i){1===arguments.length?e=t:3===arguments.length&&(i=n,n=e,e=t);var r=new b.Matrix(t,0,0,e,0,0);return this.around(n,i,r)},rotate:function(t,e,n){t=b.utils.radians(t);var i=new b.Matrix(Math.cos(t),Math.sin(t),-Math.sin(t),Math.cos(t),0,0);return this.around(e,n,i)},flip:function(t,e){return"x"===t?this.scale(-1,1,e,0):"y"===t?this.scale(1,-1,0,e):this.scale(-1,-1,t,e||t)},shear:function(t,e,n){var i=new b.Matrix(1,0,t,1,0,0);return this.around(e,n,i)},skew:function(t,e,n,i){1===arguments.length?e=t:3===arguments.length&&(i=n,n=e,e=t),t=b.utils.radians(t),e=b.utils.radians(e);var r=new b.Matrix(1,Math.tan(e),Math.tan(t),1,0,0);return this.around(n,i,r)},skewX:function(t,e,n){return this.skew(t,0,e,n)},skewY:function(t,e,n){return this.skew(0,t,e,n)},around:function(t,e,n){var i=t||0,r=e||0;return this.translate(-i,-r).lmultiply(n).translate(i,r)},native:function(){for(var t=b.parser.nodes.svg.node.createSVGMatrix(),e=S.length-1;e>=0;e--)t[S[e]]=this[S[e]];return t},equals:function(t){var e=m(t);return w(this.a,e.a)&&w(this.b,e.b)&&w(this.c,e.c)&&w(this.d,e.d)&&w(this.e,e.e)&&w(this.f,e.f)},toString:function(){return"matrix("+this.a+","+this.b+","+this.c+","+this.d+","+this.e+","+this.f+")"}},parent:b.Element,construct:{ctm:function(){return new b.Matrix(this.node.getCTM())},screenCTM:function(){if(this instanceof b.Doc&&!this.isRoot()){var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new b.Matrix(e)}return new b.Matrix(this.node.getScreenCTM())}}}),b.Point=b.invent({create:function(t,e){var n,i={x:0,y:0};n=Array.isArray(t)?{x:t[0],y:t[1]}:"object"==typeof t?{x:t.x,y:t.y}:null!=t?{x:t,y:null!=e?e:t}:i,this.x=n.x,this.y=n.y},extend:{clone:function(){return new b.Point(this)},morph:function(t,e){return this.destination=new b.Point(t,e),this},at:function(t){return this.destination?new b.Point({x:this.x+(this.destination.x-this.x)*t,y:this.y+(this.destination.y-this.y)*t}):this},native:function(){var t=b.parser.nodes.svg.node.createSVGPoint();return t.x=this.x,t.y=this.y,t},transform:function(t){ +return new b.Point(this.native().matrixTransform(t.native()))}}}),b.extend(b.Element,{point:function(t,e){return new b.Point(t,e).transform(this.screenCTM().inverse())}}),b.extend(b.Element,{attr:function(t,e,n){if(null==t){for(t={},e=this.node.attributes,n=e.length-1;n>=0;n--)t[e[n].nodeName]=b.regex.isNumber.test(e[n].nodeValue)?parseFloat(e[n].nodeValue):e[n].nodeValue;return t}if("object"==typeof t)for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return e=this.node.getAttribute(t),null==e?b.defaults.attrs[t]:b.regex.isNumber.test(e)?parseFloat(e):e;"fill"!==t&&"stroke"!==t||(b.regex.isImage.test(e)&&(e=this.doc().defs().image(e)),e instanceof b.Image&&(e=this.doc().defs().pattern(0,0,function(){this.add(e)}))),"number"==typeof e?e=new b.Number(e):b.Color.isColor(e)?e=new b.Color(e):Array.isArray(e)&&(e=new b.Array(e)),"leading"===t?this.leading&&this.leading(e):"string"==typeof n?this.node.setAttributeNS(n,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!==t&&"x"!==t||this.rebuild(t,e)}return this}}),b.extend(b.Element,{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(b.regex.transforms).slice(0,-1).map(function(t){var e=t.trim().split("(");return[e[0],e[1].split(b.regex.delimiter).map(function(t){return parseFloat(t)})]}).reverse().reduce(function(t,e){return"matrix"===e[0]?t.lmultiply(p(e[1])):t[e[0]].apply(t,e[1])},new b.Matrix)},toParent:function(t){if(this===t)return this;var e=this.screenCTM(),n=t.screenCTM().inverse();return this.addTo(t).untransform().transform(n.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())}}),b.extend(b.Element,{transform:function(t,e){var n=this.bbox();if(null==t||"string"==typeof t){var i=new b.Matrix(this).decompose();return i[t]||i}if(null!=t.a){var r=new b.Matrix(t);if(null!=e){var s=new b.Matrix(this);r=r.multiply(s)}return this.attr("transform",r)}if("string"==typeof t.origin||null==t.origin&&null==t.ox&&null==t.oy){var o="string"==typeof t.origin?t.origin.toLowerCase().trim():"center",a=n.height,h=n.width,u=n.x,l=n.y;t.ox=o.includes("left")?u:o.includes("right")?u+h:u+h/2,t.oy=o.includes("top")?l:o.includes("bottom")?l+a:l+a/2,t.origin=null}var c=new b.Matrix(!0===e?this:e).transform(t),f=c.toString();return this.attr("transform",f)}}),b.extend(b.FX,{transform:function(t,e){}}),b.extend(b.Element,{css:function(t,e){var n,i,r={};if(0===arguments.length)return this.node.style.cssText.split(/\s*;\s*/).filter(function(t){return!!t.length}).forEach(function(t){n=t.split(/\s*:\s*/),r[n[0]]=n[1]}),r;if(arguments.length<2){if(Array.isArray(t)){for(i=t.length;i--;)r[u(t[i])]=this.node.style[u(t[i])];return r}if("string"==typeof t)return this.node.style[u(t)];if("object"==typeof t)for(i in t)this.node.style[u(i)]=null==t[i]||b.regex.isBlank.test(t[i])?"":t[i]}return 2===arguments.length&&(this.node.style[u(t)]=null==e||b.regex.isBlank.test(e)?"":e),this}}),b.Parent=b.invent({create:function(t){this.constructor(t)},inherit:b.Element,extend:{children:function(){return b.utils.map(this.node.children,function(t){return b.adopt(t)})},add:function(t,e){return t=n(t),t.node!==this.node.children[e]&&this.node.insertBefore(t.node,this.node.children[e]||null),this},put:function(t,e){return this.add(t,e),t.instance||t},has:function(t){return this.index(t)>=0},index:function(t){return[].slice.call(this.node.children).indexOf(t.node)},get:function(t){return b.adopt(this.node.children[t])},first:function(){return this.get(0)},last:function(){return this.get(this.node.children.length-1)},each:function(t,e){var n,i,r=this.children();for(n=0,i=r.length;n<i;n++)r[n]instanceof b.Element&&t.apply(r[n],[n,r]),e&&r[n]instanceof b.Parent&&r[n].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this}}}),b.extend(b.Parent,{flatten:function(t){return this instanceof b.G||this instanceof b.Doc?(t=t||(this instanceof b.Doc&&this.isRoot()?this:this.parent(b.Parent)),this.each(function(){return this instanceof b.Defs?this:this instanceof b.Parent?this.flatten(t):this.toParent(t)}),this.node.firstElementChild||this.remove(),this):this},ungroup:function(t){return this instanceof b.G||this instanceof b.Doc&&!this.isRoot()?(t=t||this.parent(b.Parent),this.each(function(){return this.toParent(t)}),this.remove(),this):this}}),b.Container=b.invent({create:function(t){this.constructor(t)},inherit:b.Parent}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach(function(t){b.Element.prototype[t]=function(e){return b.on(this,t,e),this}}),b.listenerId=0,b.on=function(t,e,n,i,r){var s=n.bind(i||t),o=t instanceof b.Element?t.node:t;o.instance=o.instance||{events:{}};var a=o.instance.events;n._svgjsListenerId||(n._svgjsListenerId=++b.listenerId),e.split(b.regex.delimiter).forEach(function(t){var e=t.split(".")[0],i=t.split(".")[1]||"*";a[e]=a[e]||{},a[e][i]=a[e][i]||{},a[e][i][n._svgjsListenerId]=s,o.addEventListener(e,s,r||!1)})},b.off=function(t,e,n,i){var r=t instanceof b.Element?t.node:t;if(r.instance&&("function"!=typeof n||(n=n._svgjsListenerId))){var s=r.instance.events;(e||"").split(b.regex.delimiter).forEach(function(t){var e,o,a=t&&t.split(".")[0],h=t&&t.split(".")[1];if(n)s[a]&&s[a][h||"*"]&&(r.removeEventListener(a,s[a][h||"*"][n],i||!1),delete s[a][h||"*"][n]);else if(a&&h){if(s[a]&&s[a][h]){for(o in s[a][h])b.off(r,[a,h].join("."),o);delete s[a][h]}}else if(h)for(t in s)for(e in s[t])h===e&&b.off(r,[t,h].join("."));else if(a){if(s[a]){for(e in s[a])b.off(r,[a,e].join("."));delete s[a]}}else{for(t in s)b.off(r,t);r.instance.events={}}})}},b.extend(b.Element,{on:function(t,e,n,i){return b.on(this,t,e,n,i),this},off:function(t,e){return b.off(this.node,t,e),this},dispatch:function(e,n){return e instanceof t.Event?this.node.dispatchEvent(e):this.node.dispatchEvent(e=new t.CustomEvent(e,{detail:n,cancelable:!0})),e},fire:function(t,e){return this.dispatch(t,e),this}}),b.Defs=b.invent({create:"defs",inherit:b.Container}),b.G=b.invent({create:"g",inherit:b.Container,extend:{x:function(t){return null==t?this.transform().e:this.translate(t-this.gbox().x,0)},y:function(t){return null==t?this.transform().f:this.translate(0,t-this.gbox().y)},cx:function(t){return null==t?this.gbox().cx:this.x(t-this.gbox().width/2)},cy:function(t){return null==t?this.gbox().cy:this.y(t-this.gbox().height/2)},gbox:function(){var t=this.bbox(),e=this.transform();return t.x+=e.e,t.x2+=e.e,t.cx+=e.e,t.y+=e.f,t.y2+=e.f,t.cy+=e.f,t}},construct:{group:function(){return this.put(new b.G)}}}),b.extend(b.Element,{siblings:function(){return this.parent().children()},position:function(){return this.parent().index(this)},next:function(){return this.siblings()[this.position()+1]},prev:function(){return this.siblings()[this.position()-1]},forward:function(){var t=this.position()+1,e=this.parent();return e.removeElement(this).add(this,t),e instanceof b.Doc&&e.node.appendChild(e.defs().node),this},backward:function(){var t=this.position();return t>0&&this.parent().removeElement(this).add(this,t-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),t instanceof b.Doc&&t.node.appendChild(t.defs().node),this},back:function(){return this.position()>0&&this.parent().removeElement(this).add(this,0),this},before:function(t){t.remove();var e=this.position();return this.parent().add(t,e),this},after:function(t){t.remove();var e=this.position();return this.parent().add(t,e+1),this}}),b.Mask=b.invent({create:"mask",inherit:b.Container,extend:{remove:function(){return this.targets().forEach(function(t){t.unmask()}),b.Element.prototype.remove.call(this)},targets:function(){return b.select('svg [mask*="'+this.id()+'"]')}},construct:{mask:function(){return this.defs().put(new b.Mask)}}}),b.extend(b.Element,{maskWith:function(t){var e=t instanceof b.Mask?t:this.parent().mask().add(t);return this.attr("mask",'url("#'+e.id()+'")')},unmask:function(){return this.attr("mask",null)},masker:function(){return this.reference("mask")}}),b.ClipPath=b.invent({create:"clipPath",inherit:b.Container,extend:{remove:function(){return this.targets().forEach(function(t){t.unclip()}),b.Element.prototype.remove.call(this)},targets:function(){return b.select('svg [clip-path*="'+this.id()+'"]')}},construct:{clip:function(){return this.defs().put(new b.ClipPath)}}}),b.extend(b.Element,{clipWith:function(t){var e=t instanceof b.ClipPath?t:this.parent().clip().add(t);return this.attr("clip-path",'url("#'+e.id()+'")')},unclip:function(){return this.attr("clip-path",null)},clipper:function(){return this.reference("clip-path")}}),b.Gradient=b.invent({create:function(t){this.constructor("object"==typeof t?t:b.create(t+"Gradient"))},inherit:b.Container,extend:{stop:function(t,e,n){return this.put(new b.Stop).update(t,e,n)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},url:function(){return"url(#"+this.id()+")"},toString:function(){return this.url()},attr:function(t,e,n){return"transform"===t&&(t="gradientTransform"),b.Container.prototype.attr.call(this,t,e,n)}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),b.extend([b.Gradient,b.FX],{from:function(t,e){return"radialGradient"===(this._target||this).type?this.attr({fx:new b.Number(t),fy:new b.Number(e)}):this.attr({x1:new b.Number(t),y1:new b.Number(e)})},to:function(t,e){return"radialGradient"===(this._target||this).type?this.attr({cx:new b.Number(t),cy:new b.Number(e)}):this.attr({x2:new b.Number(t),y2:new b.Number(e)})}}),b.extend(b.Defs,{gradient:function(t,e){return this.put(new b.Gradient(t)).update(e)}}),b.Stop=b.invent({create:"stop",inherit:b.Element,extend:{update:function(t){return("number"==typeof t||t instanceof b.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new b.Number(t.offset)),this}}}),b.Pattern=b.invent({create:"pattern",inherit:b.Container,extend:{url:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.url()},attr:function(t,e,n){return"transform"===t&&(t="patternTransform"),b.Container.prototype.attr.call(this,t,e,n)}},construct:{pattern:function(t,e,n){return this.defs().pattern(t,e,n)}}}),b.extend(b.Defs,{pattern:function(t,e,n){return this.put(new b.Pattern).update(n).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),b.Doc=b.invent({create:function(t){this.constructor(t||b.create("svg")),this.namespace()},inherit:b.Container,extend:{isRoot:function(){return!(this.node.parentNode&&this.node.parentNode instanceof t.SVGElement&&"#document"!==this.node.parentNode.nodeName)},doc:function(){return this.isRoot()?this:b.Element.prototype.doc.call(this)},namespace:function(){return this.isRoot()?this.attr({xmlns:b.ns,version:"1.1"}).attr("xmlns:xlink",b.xlink,b.xmlns).attr("xmlns:svgjs",b.svgjs,b.xmlns):this.doc().namespace()},defs:function(){return this.isRoot()?b.adopt(this.node.getElementsByTagName("defs")[0])||this.put(new b.Defs):this.doc().defs()},parent:function(t){return this.isRoot()?"#document"===this.node.parentNode.nodeName?null:this.node.parentNode:b.Element.prototype.parent.call(this,t)},remove:function(){return this.isRoot()?(this.parent()&&this.parent().removeChild(this.node),this):b.Element.prototype.remove.call(this)},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this}},construct:{nested:function(){return this.put(new b.Doc)}}}),b.Shape=b.invent({create:function(t){this.constructor(t)},inherit:b.Element}),b.Bare=b.invent({create:function(t,e){if(this.constructor(b.create(t)),e)for(var n in e.prototype)"function"==typeof e.prototype[n]&&(this[n]=e.prototype[n])},inherit:b.Element,extend:{words:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.node.appendChild(e.createTextNode(t)),this}}}),b.extend(b.Parent,{element:function(t,e){return this.put(new b.Bare(t,e))}}),b.Symbol=b.invent({create:"symbol",inherit:b.Container,construct:{symbol:function(){return this.put(new b.Symbol)}}}),b.Use=b.invent({create:"use",inherit:b.Shape,extend:{element:function(t,e){return this.attr("href",(e||"")+"#"+t,b.xlink)}},construct:{use:function(t,e){return this.put(new b.Use).element(t,e)}}}),b.Rect=b.invent({create:"rect",inherit:b.Shape,construct:{rect:function(t,e){return this.put(new b.Rect).size(t,e)}}}),b.Circle=b.invent({create:"circle",inherit:b.Shape,construct:{circle:function(t){return this.put(new b.Circle).rx(new b.Number(t).divide(2)).move(0,0)}}}),b.extend([b.Circle,b.FX],{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),b.Ellipse=b.invent({create:"ellipse",inherit:b.Shape,construct:{ellipse:function(t,e){return this.put(new b.Ellipse).size(t,e).move(0,0)}}}),b.extend([b.Ellipse,b.Rect,b.FX],{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),b.extend([b.Circle,b.Ellipse],{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t)},width:function(t){return null==t?2*this.rx():this.rx(new b.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new b.Number(t).divide(2))},size:function(t,e){var n=d(this,t,e);return this.rx(new b.Number(n.width).divide(2)).ry(new b.Number(n.height).divide(2))}}),b.Line=b.invent({create:"line",inherit:b.Shape,extend:{array:function(){return new b.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,n,i){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:n,y2:i}:new b.PointArray(t).toLine(),this.attr(t))},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var n=d(this,t,e);return this.attr(this.array().size(n.width,n.height).toLine())}},construct:{line:function(t,e,n,i){return b.Line.prototype.plot.apply(this.put(new b.Line),null!=t?[t,e,n,i]:[0,0,0,0])}}}),b.Polyline=b.invent({create:"polyline",inherit:b.Shape,construct:{polyline:function(t){return this.put(new b.Polyline).plot(t||new b.PointArray)}}}),b.Polygon=b.invent({create:"polygon",inherit:b.Shape,construct:{polygon:function(t){return this.put(new b.Polygon).plot(t||new b.PointArray)}}}),b.extend([b.Polyline,b.Polygon],{array:function(){return this._array||(this._array=new b.PointArray(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new b.PointArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var n=d(this,t,e);return this.attr("points",this.array().size(n.width,n.height))}}),b.extend([b.Line,b.Polyline,b.Polygon],{MorphArray:b.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),b.Path=b.invent({create:"path",inherit:b.Shape,extend:{MorphArray:b.PathArray,array:function(){return this._array||(this._array=new b.PathArray(this.attr("d")))},plot:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new b.PathArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("d",this.array().move(t,e))},x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},size:function(t,e){var n=d(this,t,e);return this.attr("d",this.array().size(n.width,n.height))},width:function(t){return null==t?this.bbox().width:this.size(t,this.bbox().height)},height:function(t){return null==t?this.bbox().height:this.size(this.bbox().width,t)}},construct:{path:function(t){return this.put(new b.Path).plot(t||new b.PathArray)}}}),b.Image=b.invent({create:"image",inherit:b.Shape,extend:{load:function(e,n){if(!e)return this;var i=new t.Image;return b.on(i,"load",function(t){var r=this.parent(b.Pattern);0===this.width()&&0===this.height()&&this.size(i.width,i.height),r instanceof b.Pattern&&0===r.width()&&0===r.height()&&r.size(this.width(),this.height()),"function"==typeof n&&n.call(this,{width:i.width,height:i.height,ratio:i.width/i.height,url:e})},this),b.on(i,"load error",function(){b.off(i)}),this.attr("href",i.src=e,b.xlink)}},construct:{image:function(t,e){return this.put(new b.Image).size(0,0).load(t,e)}}}),b.Text=b.invent({create:function(t){this.constructor(t||b.create("text")),this.dom.leading=new b.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",b.defaults.attrs["font-family"])},inherit:b.Parent,extend:{x:function(t){return null==t?this.attr("x"):this.attr("x",t)},y:function(t){var e=this.attr("y"),n="number"==typeof e?e-this.bbox().y:0;return null==t?"number"==typeof e?e-n:e:this.attr("y","number"==typeof t?t+n:t)},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)},text:function(t){if(void 0===t){var e=this.node.childNodes,n=0;t="";for(var i=0,r=e.length;i<r;++i)"textPath"!==e[i].nodeName?(i!==n&&3!==e[i].nodeType&&!0===b.adopt(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent):0===i&&(n=1);return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{t=t.split("\n");for(var s=0,o=t.length;s<o;s++)this.tspan(t[s]).newLine()}return this.build(!1).rebuild()},leading:function(t){return null==t?this.dom.leading:(this.dom.leading=new b.Number(t),this.rebuild())},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,n=0,i=this.dom.leading*new b.Number(this.attr("font-size"));this.each(function(){this.dom.newLined&&(this.attr("x",e.attr("x")),"\n"===this.text()?n+=i:(this.attr("dy",i+n),n=0))}),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this},setData:function(t){return this.dom=t,this.dom.leading=new b.Number(t.leading||1.3),this}},construct:{text:function(t){return this.put(new b.Text).text(t)},plain:function(t){return this.put(new b.Text).plain(t)}}}),b.Tspan=b.invent({create:"tspan",inherit:b.Parent,extend:{text:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.parent(b.Text);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}}),b.extend([b.Text,b.Tspan],{plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(e.createTextNode(t)),this},tspan:function(t){var e=new b.Tspan;return this._build||this.clear(),this.node.appendChild(e.node),e.text(t)},length:function(){return this.node.getComputedTextLength()}}),b.TextPath=b.invent({create:"textPath",inherit:b.Text,parent:b.Parent,extend:{MorphArray:b.PathArray,array:function(){var t=this.track();return t?t.array():null},plot:function(t){var e=this.track(),n=null;return e&&(n=e.plot(t)),null==t?n:this},track:function(){return this.reference("href")}},construct:{textPath:function(t,e){return this.defs().path(e).text(t).addTo(this)}}}),b.extend([b.Text],{path:function(t){var e=new b.TextPath;return t instanceof b.Path||(t=this.doc().defs().path(t)),e.attr("href","#"+t,b.xlink),this.put(e)},textPath:function(){return this.select("textPath")}}),b.extend([b.Path],{text:function(t){if(t instanceof b.Text){var e=t.text();return t.clear().path(this).text(e)}return this.parent().put(new b.Text).path(this).text(t)}}),b.A=b.invent({create:"a",inherit:b.Container,extend:{to:function(t){return this.attr("href",t,b.xlink)},target:function(t){return this.attr("target",t)}},construct:{link:function(t){return this.put(new b.A).to(t)}}}),b.extend(b.Element,{linkTo:function(t){var e=new b.A;return"function"==typeof t?t.call(e,e):e.to(t),this.parent().put(e).put(this)}}),b.Marker=b.invent({create:"marker",inherit:b.Container,extend:{width:function(t){return this.attr("markerWidth",t)},height:function(t){return this.attr("markerHeight",t)},ref:function(t,e){return this.attr("refX",t).attr("refY",e)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return"url(#"+this.id()+")"}},construct:{marker:function(t,e,n){return this.defs().marker(t,e,n)}}}),b.extend(b.Defs,{marker:function(t,e,n){return this.put(new b.Marker).size(t,e).ref(t/2,e/2).viewbox(0,0,t,e).attr("orient","auto").update(n)}}),b.extend([b.Line,b.Polyline,b.Polygon,b.Path],{marker:function(t,e,n,i){var r=["marker"];return"all"!==t&&r.push(t),r=r.join("-"),t=arguments[1]instanceof b.Marker?arguments[1]:this.doc().marker(e,n,i),this.attr(r,t)}});var M={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"===e?t:t+"-"+e}};["fill","stroke"].forEach(function(t){var e,n={};n[t]=function(n){if(void 0===n)return this;if("string"==typeof n||b.Color.isRgb(n)||n&&"function"==typeof n.fill)this.attr(t,n);else for(e=M[t].length-1;e>=0;e--)null!=n[M[t][e]]&&this.attr(M.prefix(t,M[t][e]),n[M[t][e]]);return this},b.extend([b.Element,b.FX],n)}),b.extend([b.Element,b.FX],{matrix:function(t,e,n,i,r,s){var o=new b.Matrix(arguments.length>1?[t,e,n,i,r,s]:t);return this.attr("transform",o)},rotate:function(t,e,n){return this.transform({rotate:t,origin:[e,n]},!0)},skew:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({skew:t,origin:[e,n]},!0):this.transform({skew:[t,e],origin:[n,i]},!0)},shear:function(t,e,n){return this.transform({shear:t,origin:[e,n]},!0)},scale:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({scale:t,origin:[e,n]},!0):this.transform({scale:[t,e],origin:[n,i]},!0)},translate:function(t,e){return this.transform({translate:[t,e]},!0)},relative:function(t,e){return this.transform({relative:[t,e]},!0)},flip:function(t,e){var n="string"==typeof t?t:(isFinite(t),"both"),i="both"===t&&isFinite(e)?[e,e]:"x"===t?[e,0]:"y"===t?[0,e]:isFinite(t)?[t,t]:[0,0];this.transform({flip:n,origin:i},!0)},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new b.Number(t).plus(this instanceof b.FX?0:this.x()),!0)},dy:function(t){return this.y(new b.Number(t).plus(this instanceof b.FX?0:this.y()),!0)},dmove:function(t,e){return this.dx(t).dy(e)}}),b.extend([b.Rect,b.Ellipse,b.Circle,b.Gradient,b.FX],{radius:function(t,e){var n=(this._target||this).type;return"radialGradient"===n||"radialGradient"===n?this.attr("r",new b.Number(t)):this.rx(t).ry(null==e?t:e)}}),b.extend(b.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return new b.Point(this.node.getPointAtLength(t))}}),b.extend([b.Parent,b.Text,b.Tspan,b.FX],{font:function(t,e){if("object"==typeof t)for(e in t)this.font(e,t[e]);return"leading"===t?this.leading(e):"anchor"===t?this.attr("text-anchor",e):"size"===t||"family"===t||"weight"===t||"stretch"===t||"variant"===t||"style"===t?this.attr("font-"+t,e):this.attr(t,e)}}),b.extend(b.Element,{data:function(t,e,n){if("object"==typeof t)for(e in t)this.data(e,t[e]);else if(arguments.length<2)try{return JSON.parse(this.attr("data-"+t))}catch(e){return this.attr("data-"+t)}else this.attr("data-"+t,null===e?null:!0===n||"string"==typeof e||"number"==typeof e?e:JSON.stringify(e));return this}}),b.extend(b.Element,{remember:function(t,e){if("object"==typeof arguments[0])for(var n in t)this.remember(n,t[n]);else{if(1===arguments.length)return this.memory()[t];this.memory()[t]=e}return this},forget:function(){if(0===arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),b.get=function(t){var n=e.getElementById(y(t)||t);return b.adopt(n)},b.select=function(t,n){return b.utils.map((n||e).querySelectorAll(t),function(t){return b.adopt(t)})},b.$$=function(t,n){return b.utils.map((n||e).querySelectorAll(t),function(t){return b.adopt(t)})},b.$=function(t,n){return b.adopt((n||e).querySelector(t))},b.extend(b.Parent,{select:function(t){return b.select(t,this.node)}});var S="abcdef".split("");return b.Box=b.invent({create:function(t){var e=[0,0,0,0];t="string"==typeof t?t.split(b.regex.delimiter).map(parseFloat):Array.isArray(t)?t:"object"==typeof t?[null!=t.left?t.left:t.x,null!=t.top?t.top:t.y,t.width,t.height]:4===arguments.length?[].slice.call(arguments):e,this.x=t[0],this.y=t[1],this.width=t[2],this.height=t[3],g(this)},extend:{merge:function(t){var e=Math.min(this.x,t.x),n=Math.min(this.y,t.y);return new b.Box(e,n,Math.max(this.x+this.width,t.x+t.width)-e,Math.max(this.y+this.height,t.y+t.height)-n)},transform:function(t){var e=1/0,n=-1/0,i=1/0,r=-1/0;return[new b.Point(this.x,this.y),new b.Point(this.x2,this.y),new b.Point(this.x,this.y2),new b.Point(this.x2,this.y2)].forEach(function(s){s=s.transform(t),e=Math.min(e,s.x),n=Math.max(n,s.x),i=Math.min(i,s.y),r=Math.max(r,s.y)}),new b.Box(e,i,n-e,r-i)},addOffset:function(){return this.x+=t.pageXOffset,this.y+=t.pageYOffset,this},toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height},morph:function(t,e,n,i){return this.destination=new b.Box(t,e,n,i),this},at:function(t){return this.destination?new b.Box(this.x+(this.destination.x-this.x)*t,this.y+(this.destination.y-this.y)*t,this.width+(this.destination.width-this.width)*t,this.height+(this.destination.height-this.height)*t):this}},parent:b.Element,construct:{bbox:function(){var t;try{if(t=this.node.getBBox(),i(t)&&!r(this.node))throw new Exception("Element not in the dom")}catch(n){try{var e=this.clone(b.parser().svg).show();t=e.node.getBBox(),e.remove()}catch(t){console.warn("Getting a bounding box of this element is not possible")}}return new b.Box(t)},rbox:function(t){try{var e=new b.Box(this.node.getBoundingClientRect());return t?e.transform(t.screenCTM().inverse()):e.addOffset()}catch(t){return new b.Box}}}}),b.extend([b.Doc,b.Symbol,b.Image,b.Pattern,b.Marker,b.ForeignObject,b.View],{viewbox:function(t,e,n,i){return null==t?new b.Box(this.attr("viewBox")):this.attr("viewBox",new b.Box(t,e,n,i))}}),b.parser=function(){var t;return b.parser.nodes.svg.node.parentNode||(t=e.body||e.documentElement,b.parser.nodes.svg.addTo(t)),b.parser.nodes},b.parser.nodes={svg:b().size(2,0).css({opacity:0,position:"absolute",left:"-100%",top:"-100%",overflow:"hidden"})},b.parser.nodes.path=b.parser.nodes.svg.path().node,b});
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index d96451b..4ad5cb9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -97,8 +97,8 @@ gulp.task('unify', ['clean'], function () { .pipe(standard())
.pipe(standard.reporter('default', {
showRuleNames: true,
- breakOnError: true,
- quiet: true
+ breakOnError: process.argv[2] !== "--dont-break",
+ quiet: true,
}))
.pipe(concat('svg.js', { newLine: '\n' }))
// wrap the whole thing in an immediate function call
@@ -108,6 +108,7 @@ gulp.task('unify', ['clean'], function () { .pipe(chmod(0o644))
.pipe(gulp.dest('dist'))
.pipe(size({ showFiles: true, title: 'Full' }))
+ return collection
})
/**
diff --git a/package.json b/package.json index 9cc9a1d..e59cd23 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,8 @@ "scripts": { "build": "gulp", "build:test": "gulp unify", - "test": "karma start .config/karma.conf.js --single-run", + "build:dev": "gulp --dont-break", + "test": "karma start .config/karma.conf.js --single-run --reporters dots", "test:quick": "karma start .config/karma.quick.js", "lint": "standard --verbose | snazzy" }, @@ -88,6 +89,7 @@ "standard": { "ignore": [ "/dist", + "/spec", "/src/umd.js" ], "globals": [ diff --git a/playgrounds/matrix/drag.js b/playgrounds/matrix/drag.js new file mode 100644 index 0000000..143699d --- /dev/null +++ b/playgrounds/matrix/drag.js @@ -0,0 +1,78 @@ + +function reactToDrag (element, onDrag, beforeDrag) { + + let xStart, yStart + + let startDrag = event=> { + + // Avoid the default events + event.preventDefault() + + // Store the position where the drag started + xStart = event.pageX + yStart = event.pageY + + // Fire the start drag event + if (beforeDrag) { + var {x, y} = parent.point(event.pageX, event.pageY) + beforeDrag(event, x, y) + } + + // Register events to react to dragging + SVG.on(window, 'mousemove.drag', reactDrag) + SVG.on(window, 'touchmove.drag', reactDrag) + + // Register the events required to finish dragging + SVG.on(window, 'mouseup.drag', stopDrag) + SVG.on(window, 'touchend.drag', stopDrag) + } + + let reactDrag = event=> { + + // Convert screen coordinates to svg coordinates and use them + var {x, y} = parent.point(event.pageX, event.pageY) + if (onDrag) + onDrag(event, x, y) + } + + let stopDrag = event=> { + SVG.off(window, 'mousemove.drag') + SVG.off(window, 'touchmove.drag') + SVG.off(window, 'mouseup.drag') + SVG.off(window, 'touchend.drag') + } + + // Bind the drag tracker to this element directly + let parent = element.doc() + let point = new SVG.Point() + element.mousedown(startDrag).touchstart(startDrag) +} + +SVG.extend(SVG.Element, { + draggable: function (after) { + + let sx, sy + + reactToDrag(this, (e, x, y)=> { + + this.transform({ + origin: [sx, sy], + position: [x, y], + }) + + if (after) { + after(this, x, y) + } + + }, (e, x, y)=> { + + var toAbsolute = new SVG.Matrix(this).inverse() + var p = new SVG.Point(x, y).transform(toAbsolute) + sx = p.x + sy = p.y + + }) + + return this + }, +}) diff --git a/playgrounds/matrix/matrix.html b/playgrounds/matrix/matrix.html new file mode 100644 index 0000000..cd34b7d --- /dev/null +++ b/playgrounds/matrix/matrix.html @@ -0,0 +1,47 @@ + +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <title>SVG Playground</title> + <link rel="stylesheet" href="../playground.css"> + </head> + + <body> + + <h1>SVG Transformations</h1> + + <p> + This playground tests the <code>compose/decompose</code> functionality in + svg matrix, as well as the draggable code and the transformations. + </p> + + <svg viewBox="-200 -200 400 400"> + + <g id="tester"> + <rect class="green" width=50 height=50 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + + <g id="guess"> + <rect class="dark-pink" width=50 height=50 opacity=0.5 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + <g id="true"> + <rect class="pink" width=50 height=50 opacity=0.5 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + <ellipse id="or" class="dark-pink" rx=5 ry=5 /> + <ellipse id="b1" class="pink" cx="50" rx=5 ry=5 /> + <ellipse id="b2" class="green" cy="50" rx=5 ry=5 /> + + </svg> + + </body> + + <script src="../../dist/svg.js" charset="utf-8"></script> + <script src="drag.js" charset="utf-8"></script> + <script src="matrix.js" charset="utf-8"></script> + +</html> diff --git a/playgrounds/matrix/matrix.js b/playgrounds/matrix/matrix.js new file mode 100644 index 0000000..33e21d1 --- /dev/null +++ b/playgrounds/matrix/matrix.js @@ -0,0 +1,41 @@ + +function print (mat) { + let {a, b, c, d} = mat + console.log(` + a: ${a.toFixed(2)} + b: ${b.toFixed(2)} + c: ${c.toFixed(2)} + d: ${d.toFixed(2)} + `) +} + +function moveit () { + + let {cx: x0, cy: y0} = or.rbox(svg) + let {cx: x1, cy: y1} = b1.rbox(svg) + let {cx: x2, cy: y2} = b2.rbox(svg) + + let m = new SVG.Matrix( + (x1 - x0) / 50, (y1 - y0) / 50, (x2 - x0) / 50, (y2 - y0) / 50, x0, y0) + let com = m.decompose() + let g = new SVG.Matrix().compose(com) + + // Transform both of the items + target.transform(m) + mover.transform(g) + + console.log(com); + print(m) + print(g) +} + +// Declare the two points +let svg = SVG('svg') +var or = SVG("#or").draggable(moveit) +var b1 = SVG("#b1").draggable(moveit) +var b2 = SVG("#b2").draggable(moveit) + +// Declare the squares +let target = SVG("#true") +let mover = SVG("#guess") +let tester = SVG("#tester") diff --git a/playgrounds/playground.css b/playgrounds/playground.css new file mode 100644 index 0000000..71fabed --- /dev/null +++ b/playgrounds/playground.css @@ -0,0 +1,71 @@ + +* { + box-sizing: border-box; +} + +html { + background-color : #f5f6f7; + /* text-align: center; */ +} + +body { + margin: 0; + width: 100vw; + height: 99vh; + grid-gap: 30px; + display: inline-grid; + align-items: center; + grid-template-columns: 10vw 40vw auto 10vw; + grid-template-rows: 0 10vw auto 0; +} + +h1 { + text-align: right; + border-right: solid 3px #f06; + padding-right: 12px; + color: #f06; + font-size: 52px; + font-family: Helvetica; + grid-row: 2; + grid-column: 2; + line-height: 1.8em; +} + +p { + padding-right: 50px; + color: #444; + font-size: 18px; + font-family: Helvetica; + grid-row: 2; + grid-column: 3; +} + +svg { + height: 100%; + width: 100%; + grid-row: 3; + grid-column: 2/4; + background-color: white; + border-radius: 20px; + border: #f065 1px solid; +} + +.pink { + fill: #FF0066; +} + +.green { + fill: #00ff99; +} + +.dark-pink { + fill: #660029; +} + +.light-pink { + fill: #FF99C2; +} + +.off-white { + fill: #FFCCE0; +} diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html new file mode 100644 index 0000000..ac60f14 --- /dev/null +++ b/playgrounds/transforms/transforms.html @@ -0,0 +1,28 @@ + +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <title>SVG Playground</title> + <link rel="stylesheet" href="../playground.css"> + </head> + + <body> + + <h1>SVG JS Playground</h1> + + <svg viewBox="-200 -200 400 400"> + + <rect id="old" x=200 y=400 width=200 height=400 class="green"/> + <rect id="new" x=200 y=400 width=200 height=400 class="pink"/> + <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/> + + </svg> + + </body> + + <script src="../../dist/svg.js" charset="utf-8"></script> + <script src="transforms.js" charset="utf-8"></script> + +</html> diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js new file mode 100644 index 0000000..b27e1c3 --- /dev/null +++ b/playgrounds/transforms/transforms.js @@ -0,0 +1,9 @@ + + +let mover = SVG.select("#new")[0] +mover.transform({ + position: [800, 500], + origin: [200, 400], + skew: [20, 0], + rotate: 30, +}) diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html index bd47626..118f7bb 100644 --- a/spec/SpecRunner.html +++ b/spec/SpecRunner.html @@ -77,8 +77,8 @@ <script src="spec/marker.js"></script> <script src="spec/mask.js"></script> <script src="spec/matrix.js"></script> - <script src="spec/memory.js"></script> <script src="spec/number.js"></script> + <script src="spec/nested.js"></script> <script src="spec/path.js"></script> <script src="spec/pattern.js"></script> <script src="spec/point.js"></script> diff --git a/spec/spec/boxes.js b/spec/spec/boxes.js index 9e33c60..934f472 100644 --- a/spec/spec/boxes.js +++ b/spec/spec/boxes.js @@ -163,7 +163,7 @@ describe('Boxes', function() { offset = draw.screenCTM() draw.viewbox(100,100, 200, 200) nested = draw.nested().size(200, 200).move(100,100).viewbox(0, 0, 100, 100) - rect = nested.rect(50, 180).stroke({width:0}).move(25, 90).scale(2, 0, 0).transform({x:10, y:10}, true) + rect = nested.rect(50, 180).stroke({width:0}).move(25, 90).transform({scale: 2, origin: [0, 0]}).relative(10, 10) }) afterEach(function() { draw.clear().attr('viewBox', null) @@ -269,9 +269,3 @@ describe('Boxes', function() { }) }) - - - - - - diff --git a/spec/spec/circle.js b/spec/spec/circle.js index fc66e0c..c0f0936 100644 --- a/spec/spec/circle.js +++ b/spec/spec/circle.js @@ -1,14 +1,14 @@ describe('Circle', function() { var circle - + beforeEach(function() { circle = draw.circle(240) }) - + afterEach(function() { draw.clear() }) - + describe('x()', function() { it('returns the value of x without an argument', function() { expect(circle.x()).toBe(0) @@ -19,7 +19,7 @@ describe('Circle', function() { expect(box.x).toBeCloseTo(123) }) }) - + describe('y()', function() { it('returns the value of y without an argument', function() { expect(circle.y()).toBe(0) @@ -30,7 +30,7 @@ describe('Circle', function() { expect(box.y).toBe(345) }) }) - + describe('cx()', function() { it('returns the value of cx without an argument', function() { expect(circle.cx()).toBe(120) @@ -41,7 +41,7 @@ describe('Circle', function() { expect(box.cx).toBe(123) }) }) - + describe('cy()', function() { it('returns the value of cy without an argument', function() { expect(circle.cy()).toBe(120) @@ -81,7 +81,7 @@ describe('Circle', function() { expect(circle.node.getAttribute('r')).toBe('120') }) }) - + describe('move()', function() { it('sets the x and y position', function() { circle.move(123, 456) @@ -115,7 +115,7 @@ describe('Circle', function() { expect(circle.node.getAttribute('cy')).toBe('205') }) }) - + describe('center()', function() { it('sets the cx and cy position', function() { circle.center(321,567) @@ -144,24 +144,24 @@ describe('Circle', function() { expect((circle.height() / 2).toString()).toBe(circle.node.getAttribute('r')) }) }) - + describe('size()', function() { it('defines the r of the element', function() { circle.size(987) expect(circle.node.getAttribute('r')).toBe((987 / 2).toString()) }) }) - + describe('scale()', function() { it('should scale the element universally with one argument', function() { var box = circle.scale(2).rbox() - + expect(box.width).toBe(circle.attr('r') * 2 * 2) expect(box.height).toBe(circle.attr('r') * 2 * 2) }) it('should scale the element over individual x and y axes with two arguments', function() { var box = circle.scale(2, 3.5).rbox() - + expect(box.width).toBe(circle.attr('r') * 2 * 2) expect(box.height).toBe(circle.attr('r') * 2 * 3.5) }) @@ -169,9 +169,9 @@ describe('Circle', function() { describe('translate()', function() { it('sets the translation of an element', function() { - circle.transform({ x: 12, y: 12 }) + circle.transform({ tx: 12, ty: 12 }) expect(window.matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,12,12]) }) }) - + }) diff --git a/spec/spec/doc.js b/spec/spec/doc.js index 5accd5b..f82f1cb 100644 --- a/spec/spec/doc.js +++ b/spec/spec/doc.js @@ -41,9 +41,7 @@ describe('Doc', function() { expect(SVG().addTo(document.createElement('div')).isRoot()).toBe(true) }) it('returns true when its the root element of the dom', function () { - if(parserInDoc) { - expect(draw.isRoot()).toBe(true) - } + expect(draw.isRoot()).toBe(true) }) it('returns false when parent is svg element', function () { expect(SVG().addTo(SVG()).isRoot()).toBe(false) @@ -59,7 +57,7 @@ describe('Doc', function() { }else{ expect(window.document.querySelectorAll('svg').length).toBe(cnt-1) } - + draw = SVG().addTo(drawing).size(100,100); expect(window.document.querySelectorAll('svg').length).toBe(cnt) }) diff --git a/spec/spec/element.js b/spec/spec/element.js index 53ed84f..d6e2783 100644 --- a/spec/spec/element.js +++ b/spec/spec/element.js @@ -134,13 +134,13 @@ describe('Element', function() { it('increases the global id sequence', function() { var did = SVG.did rect.id() - + expect(did + 1).toBe(SVG.did) }) it('adds a unique id containing the node name', function() { var did = SVG.did rect.id() - + expect(rect.attr('id')).toBe('SvgjsRect' + did) }) it('gets the value if the id attribute without an argument', function() { @@ -194,23 +194,23 @@ describe('Element', function() { rect = draw.rect(100,100) }) - it('gets the current transformations', function() { - expect(rect.transform()).toEqual(new SVG.Matrix(rect).extract()) + it('gets the current transformation matrix', function() { + expect(rect.transform()).toEqual(jasmine.objectContaining({ + a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, matrix: new SVG.Matrix(rect), + scaleX: 1, scaleY: 1, shear: 0, rotate: 0, + translateX: 0, translateY: 0, + })) }) it('sets the translation of and element', function() { - rect.transform({ x: 10, y: 11 }) + rect.transform({ translate: [10, 11] }) expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,10,11]) }) it('performs an absolute translation', function() { - rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21 }) + rect.transform({ translate: [10, 11] }).transform({ translate: [20, 21] }) expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,20,21]) }) - it('performs a relative translation when relative is set to true', function() { - rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21, relative: true }) - expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32]) - }) it('performs a relative translation with relative flag', function() { - rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21 }, true) + rect.transform({ translate: [10, 11] }).transform({ translate: [20, 21] }, true) expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32]) }) it('sets the scaleX and scaleY of an element', function() { @@ -248,7 +248,7 @@ describe('Element', function() { expect(ctm.f).toBe(0) }) it('sets the skewX of an element with given center', function() { - ctm = rect.transform({ skewX: 10, cx: 0, cy: 0 }).ctm() + ctm = rect.transform({ skewX: 10, ox: 0, oy: 0 }).ctm() expect(ctm.a).toBe(1) expect(ctm.b).toBe(0) expect(ctm.c).toBeCloseTo(0.17632698070846498) @@ -257,7 +257,7 @@ describe('Element', function() { expect(ctm.f).toBe(0) }) it('sets the skewY of an element', function() { - ctm = rect.transform({ skewY: -10, cx: 0, cy: 0 }).ctm() + ctm = rect.transform({ skewY: -10, ox: 0, oy: 0 }).ctm() expect(ctm.a).toBe(1) expect(ctm.b).toBeCloseTo(-0.17632698070846498) expect(ctm.c).toBe(0) @@ -266,7 +266,7 @@ describe('Element', function() { expect(ctm.f).toBe(0) }) it('sets the skewX and skewY of an element', function() { - ctm = rect.transform({ skewX: 10, skewY: -10, cx: 0, cy: 0 }).ctm() + ctm = rect.transform({ skewX: 10, skewY: -10, ox: 0, oy: 0 }).ctm() expect(ctm.a).toBe(1) expect(ctm.b).toBeCloseTo(-0.17632698070846498) expect(ctm.c).toBeCloseTo(0.17632698070846498) @@ -275,7 +275,7 @@ describe('Element', function() { expect(ctm.f).toBe(0) }) it('performs a uniform skew with skew given', function() { - ctm = rect.transform({ skew: 5, cx: 0, cy: 0 }).ctm() + ctm = rect.transform({ skew: 5, ox: 0, oy: 0 }).ctm() expect(ctm.a).toBe(1) expect(ctm.b).toBeCloseTo(0.08748866352592401) expect(ctm.c).toBeCloseTo(0.08748866352592401) @@ -284,17 +284,16 @@ describe('Element', function() { expect(ctm.f).toBe(0) }) it('rotates the element around its centre if no rotation point is given', function() { - ctm = rect.center(100, 100).transform({ rotation: 45 }).ctm() + ctm = rect.center(100, 100).transform({ rotate: 45 }).ctm() expect(ctm.a).toBeCloseTo(0.7071068286895752) expect(ctm.b).toBeCloseTo(0.7071068286895752) expect(ctm.c).toBeCloseTo(-0.7071068286895752) expect(ctm.d).toBeCloseTo(0.7071068286895752) expect(ctm.e).toBeCloseTo(100) expect(ctm.f).toBeCloseTo(-41.421356201171875) - expect(rect.transform('rotation')).toBe(45) }) it('rotates the element around the given rotation point', function() { - ctm = rect.transform({ rotation: 55, cx: 80, cy:2 }).ctm() + ctm = rect.transform({ rotate: 55, origin: [80, 2] }).ctm() expect(ctm.a).toBeCloseTo(0.5735765099525452) expect(ctm.b).toBeCloseTo(0.8191521167755127) expect(ctm.c).toBeCloseTo(-0.8191521167755127) @@ -315,15 +314,15 @@ describe('Element', function() { expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,100,0]) }) it('flips the element on x axis with offset', function() { - rect.transform({ flip: 'x', offset: 20 }) + rect.transform({ flip: 'x', origin: [20, 0] }) expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,40,0]) }) it('flips the element on y axis with offset', function() { - rect.transform({ flip: 'y', offset: 20 }) + rect.transform({ flip: 'y', origin: [0, 20] }) expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,-1,0,40]) }) it('flips the element on both axis with offset', function() { - rect.transform({ flip: 'both', offset: 20 }) + rect.transform({ flip: 'both', origin: [20, 20] }) expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,40,40]) }) it('flips the element on both axis', function() { @@ -386,6 +385,20 @@ describe('Element', function() { rect.attr('transform', 'translate(24,14) , translate(36,6)') expect(rect.matrixify().toString()).toBe('matrix(1,0,0,1,60,20)') }) + + + it('merges non-commutative transformations correctly', function() { + // Spaces before the comma + rect.attr('transform', 'scale(3, 2) translate(20,16)') + expect(rect.matrixify().toString()).toBe('matrix(3,0,0,2,60,32)') + }) + + it('doesn\'t care if you have matrices there', function() { + // Spaces before the comma + rect.attr('transform', 'matrix(3, 0, 0, 2, 0, 0) translate(20,16)') + expect(rect.matrixify().toString()).toBe('matrix(3,0,0,2,60,32)') + }) + }) describe('toParent()', function() { @@ -408,13 +421,11 @@ describe('Element', function() { }) it('moves the element to other parent while maintaining the same visal representation', function() { - expect(rect1.toParent(nested).transform()).toEqual(jasmine.objectContaining({ - a:2, b:0, c:0, d:2, e:70, f:70 - })) + expect(window.roundMatrix(rect1.toParent(nested).transform('matrix'))) + .toEqual(new SVG.Matrix(2, 0, 0, 2, 120, 120)) expect(rect1.parent()).toEqual(nested) - expect(rect2.toParent(g2).transform()).toEqual(jasmine.objectContaining({ - a:0.5, b:0, c:0, d:0.5, e:-95, f:-95 - })) + expect(window.roundMatrix(rect2.toParent(g2).transform('matrix'))) + .toEqual(new SVG.Matrix(0.5, 0, 0, 0.5, -120, -120)) expect(rect2.parent()).toEqual(g2) }) }) @@ -466,17 +477,13 @@ describe('Element', function() { expect(g1.node.parentNode).toBeFalsy() expect(g2.node.parentNode).toBeFalsy() - expect(rect1.transform()).toEqual(jasmine.objectContaining({ - a:2, b:0, c:0, d:2, e:70, f:70 - })) - expect(rect2.transform()).toEqual(jasmine.objectContaining({ - a:0.5, b:0, c:0, d:0.5, e:45, f:45 - })) + expect(window.roundMatrix(rect1.transform().matrix)).toEqual(new SVG.Matrix(2, 0, 0, 2, 120, 120)) + expect(window.roundMatrix(rect2.transform().matrix)).toEqual(new SVG.Matrix(0.5, 0, 0, 0.5, 20, 20)) }) it('ungroups everything to the doc root when called on SVG.Doc / does not ungroup defs/parser', function() { draw.flatten() - + expect(rect1.parent()).toBe(draw) expect(rect2.parent()).toBe(draw) @@ -484,12 +491,8 @@ describe('Element', function() { expect(g2.node.parentNode).toBeFalsy() expect(nested.node.parentNode).toBeFalsy() - expect(rect1.transform()).toEqual(jasmine.objectContaining({ - a:2, b:0, c:0, d:2, e:70, f:70 - })) - expect(rect2.transform()).toEqual(jasmine.objectContaining({ - a:0.5, b:0, c:0, d:0.5, e:45, f:45 - })) + expect(window.roundMatrix(rect1.transform().matrix)).toEqual(new SVG.Matrix(2, 0, 0, 2, 120, 120)) + expect(window.roundMatrix(rect2.transform().matrix)).toEqual(new SVG.Matrix(0.5, 0, 0, 0.5, 20, 20)) expect(draw.children().length).toBe(3+parserInDoc) // 2 * rect + defs }) diff --git a/spec/spec/ellipse.js b/spec/spec/ellipse.js index f6aa271..76f16e6 100644 --- a/spec/spec/ellipse.js +++ b/spec/spec/ellipse.js @@ -1,14 +1,14 @@ describe('Ellipse', function() { var ellipse - + beforeEach(function() { ellipse = draw.ellipse(240,90) }) - + afterEach(function() { draw.clear() }) - + describe('x()', function() { it('returns the value of x without an argument', function() { expect(ellipse.x()).toBe(0) @@ -19,7 +19,7 @@ describe('Ellipse', function() { expect(box.x).toBeCloseTo(123) }) }) - + describe('y()', function() { it('returns the value of y without an argument', function() { expect(ellipse.y()).toBe(0) @@ -30,7 +30,7 @@ describe('Ellipse', function() { expect(box.y).toBe(345) }) }) - + describe('cx()', function() { it('returns the value of cx without an argument', function() { expect(ellipse.cx()).toBe(120) @@ -41,7 +41,7 @@ describe('Ellipse', function() { expect(box.cx).toBe(123) }) }) - + describe('cy()', function() { it('returns the value of cy without an argument', function() { expect(ellipse.cy()).toBe(45) @@ -70,7 +70,7 @@ describe('Ellipse', function() { expect(ellipse.node.getAttribute('ry')).toBe('0') }) }) - + describe('move()', function() { it('sets the x and y position', function() { ellipse.move(123, 456) @@ -104,7 +104,7 @@ describe('Ellipse', function() { expect(ellipse.node.getAttribute('cy')).toBe('130') }) }) - + describe('center()', function() { it('sets the cx and cy position', function() { ellipse.center(321,567) @@ -133,7 +133,7 @@ describe('Ellipse', function() { expect((ellipse.height() / 2).toString()).toBe(ellipse.node.getAttribute('ry')) }) }) - + describe('size()', function() { it('defines the rx and ry of the element', function() { ellipse.size(987,654) @@ -153,17 +153,17 @@ describe('Ellipse', function() { expect(ellipse.width() / ellipse.height()).toBe(box.width / box.height) }) }) - + describe('scale()', function() { it('should scale the element universally with one argument', function() { var box = ellipse.scale(2).rbox() - + expect(box.width).toBe(ellipse.attr('rx') * 2 * 2) expect(box.height).toBe(ellipse.attr('ry') * 2 * 2) }) it('should scale the element over individual x and y axes with two arguments', function() { var box = ellipse.scale(2, 3.5).rbox() - + expect(box.width).toBe(ellipse.attr('rx') * 2 * 2) expect(box.height).toBe(ellipse.attr('ry') * 2 * 3.5) }) @@ -171,17 +171,9 @@ describe('Ellipse', function() { describe('translate()', function() { it('sets the translation of an element', function() { - ellipse.transform({ x: 12, y: 12 }) + ellipse.transform({ tx: 12, ty: 12 }) expect(ellipse.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) - -}) - - - - - - - +}) diff --git a/spec/spec/fx.js b/spec/spec/fx.js index 5186016..e813cf1 100644 --- a/spec/spec/fx.js +++ b/spec/spec/fx.js @@ -1729,252 +1729,252 @@ describe('FX', function() { expect(called).toBe(true) }) - it('animates matrix', function() { - var ctm, called = false - - fx.transform({a:0.8, b:0.4, c:-0.15, d:0.7, e: 90.3, f: 27.07}).after(function(){ - - var ctm = rect.ctm() - expect(ctm.a).toBeCloseTo(0.8) - expect(ctm.b).toBeCloseTo(0.4) - expect(ctm.c).toBeCloseTo(-0.15) - expect(ctm.d).toBeCloseTo(0.7) - expect(ctm.e).toBeCloseTo(90.3) - expect(ctm.f).toBeCloseTo(27.07) - called = true - - }) - - jasmine.clock().tick(250) - fx.step() - ctm = rect.ctm() - expect(ctm.a).toBeLessThan(1) - expect(ctm.b).toBeGreaterThan(0) - expect(ctm.c).toBeLessThan(0) - expect(ctm.d).toBeGreaterThan(0) - expect(ctm.e).toBeGreaterThan(0) - expect(ctm.f).toBeGreaterThan(0) - - jasmine.clock().tick(250) - fx.step() - expect(called).toBe(true) - }) - - it('animate a scale transform using the passed center point when there is already a transform in place', function(){ - var ctm - - // When no ceter point is passed to the method scale, it use the center of the element as the center point - - rect.scale(2) // The transform in place - - fx.scale(0.5) - jasmine.clock().tick(500) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(0.5) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(0.5) - expect(ctm.e).toBe(75) - expect(ctm.f).toBe(75) - }) - - it('animate a flip(x) transform', function() { - var ctm - - fx.transform({flip: 'x'}).start() - - jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(0.5) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(1) - expect(ctm.e).toBe(75) - expect(ctm.f).toBe(0) - - jasmine.clock().tick(475) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(-1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(1) - expect(ctm.e).toBe(300) - expect(ctm.f).toBe(0) - }) - - it('animate a flip(x) transform with an offset', function() { - var ctm - - fx.transform({flip: 'x', offset: 20}).start() - - jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(0.5) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(1) - expect(ctm.e).toBe(10) - expect(ctm.f).toBe(0) - - jasmine.clock().tick(475) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(-1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(1) - expect(ctm.e).toBe(40) - expect(ctm.f).toBe(0) - }) - - it('animate a flip(y) transform', function() { - var ctm - - fx.transform({flip: 'y'}).start() - - jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(0.5) - expect(ctm.e).toBe(0) - expect(ctm.f).toBe(75) - - jasmine.clock().tick(475) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(-1) - expect(ctm.e).toBe(0) - expect(ctm.f).toBe(300) - }) - - it('animate a flip(y) transform with an offset', function() { - var ctm - - fx.transform({flip: 'y', offset: 20}).start() - - jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(0.5) - expect(ctm.e).toBe(0) - expect(ctm.f).toBe(10) - - jasmine.clock().tick(475) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(-1) - expect(ctm.e).toBe(0) - expect(ctm.f).toBe(40) - }) - - it('animate a flip() transform', function() { - var ctm - - fx.transform({flip: 'both'}).start() - - jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(0.5) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(0.5) - expect(ctm.e).toBe(75) - expect(ctm.f).toBe(75) - - jasmine.clock().tick(475) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(-1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(-1) - expect(ctm.e).toBe(300) - expect(ctm.f).toBe(300) - }) - - it('animate a flip() transform with an offset', function() { - var ctm - - fx.transform({flip: 'both', offset: 20}).start() - - jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(0.5) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(0.5) - expect(ctm.e).toBe(10) - expect(ctm.f).toBe(10) - - jasmine.clock().tick(475) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(-1) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(-1) - expect(ctm.e).toBe(40) - expect(ctm.f).toBe(40) - }) - - it('animate relative matrix transform', function(){ - var ctm - - fx.transform(new SVG.Matrix().scale(2,0,0), true) - - jasmine.clock().tick(250) // Have the animation be half way - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(1.5) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(1.5) - expect(ctm.e).toBe(0) - expect(ctm.f).toBe(0) - - jasmine.clock().tick(250) // Have the animation reach its end - fx.step() - - ctm = rect.ctm() - expect(ctm.a).toBe(2) - expect(ctm.b).toBe(0) - expect(ctm.c).toBe(0) - expect(ctm.d).toBe(2) - expect(ctm.e).toBe(0) - expect(ctm.f).toBe(0) - }) + // it('animates matrix', function() { + // var ctm, called = false + // + // fx.transform({a:0.8, b:0.4, c:-0.15, d:0.7, e: 90.3, f: 27.07}).after(function(){ + // + // var ctm = rect.ctm() + // expect(ctm.a).toBeCloseTo(0.8) + // expect(ctm.b).toBeCloseTo(0.4) + // expect(ctm.c).toBeCloseTo(-0.15) + // expect(ctm.d).toBeCloseTo(0.7) + // expect(ctm.e).toBeCloseTo(90.3) + // expect(ctm.f).toBeCloseTo(27.07) + // called = true + // + // }) + // + // jasmine.clock().tick(250) + // fx.step() + // ctm = rect.ctm() + // expect(ctm.a).toBeLessThan(1) + // expect(ctm.b).toBeGreaterThan(0) + // expect(ctm.c).toBeLessThan(0) + // expect(ctm.d).toBeGreaterThan(0) + // expect(ctm.e).toBeGreaterThan(0) + // expect(ctm.f).toBeGreaterThan(0) + // + // jasmine.clock().tick(250) + // fx.step() + // expect(called).toBe(true) + // }) + + // it('animate a scale transform using the passed center point when there is already a transform in place', function(){ + // var ctm + // + // // When no ceter point is passed to the method scale, it use the center of the element as the center point + // + // rect.scale(2) // The transform in place + // + // fx.scale(0.5) + // jasmine.clock().tick(500) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(0.5) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(0.5) + // expect(ctm.e).toBe(75) + // expect(ctm.f).toBe(75) + // }) + + // it('animate a flip(x) transform', function() { + // var ctm + // + // fx.transform({flip: 'x'}).start() + // + // jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(0.5) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(1) + // expect(ctm.e).toBe(75) + // expect(ctm.f).toBe(0) + // + // jasmine.clock().tick(475) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(-1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(1) + // expect(ctm.e).toBe(300) + // expect(ctm.f).toBe(0) + // }) + + // it('animate a flip(x) transform with an offset', function() { + // var ctm + // + // fx.transform({flip: 'x', offset: 20}).start() + // + // jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(0.5) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(1) + // expect(ctm.e).toBe(10) + // expect(ctm.f).toBe(0) + // + // jasmine.clock().tick(475) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(-1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(1) + // expect(ctm.e).toBe(40) + // expect(ctm.f).toBe(0) + // }) + + // it('animate a flip(y) transform', function() { + // var ctm + // + // fx.transform({flip: 'y'}).start() + // + // jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(0.5) + // expect(ctm.e).toBe(0) + // expect(ctm.f).toBe(75) + // + // jasmine.clock().tick(475) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(-1) + // expect(ctm.e).toBe(0) + // expect(ctm.f).toBe(300) + // }) + + // it('animate a flip(y) transform with an offset', function() { + // var ctm + // + // fx.transform({flip: 'y', offset: 20}).start() + // + // jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(0.5) + // expect(ctm.e).toBe(0) + // expect(ctm.f).toBe(10) + // + // jasmine.clock().tick(475) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(-1) + // expect(ctm.e).toBe(0) + // expect(ctm.f).toBe(40) + // }) + + // it('animate a flip() transform', function() { + // var ctm + // + // fx.transform({flip: 'both'}).start() + // + // jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(0.5) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(0.5) + // expect(ctm.e).toBe(75) + // expect(ctm.f).toBe(75) + // + // jasmine.clock().tick(475) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(-1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(-1) + // expect(ctm.e).toBe(300) + // expect(ctm.f).toBe(300) + // }) + + // it('animate a flip() transform with an offset', function() { + // var ctm + // + // fx.transform({flip: 'both', offset: 20}).start() + // + // jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox) + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(0.5) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(0.5) + // expect(ctm.e).toBe(10) + // expect(ctm.f).toBe(10) + // + // jasmine.clock().tick(475) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(-1) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(-1) + // expect(ctm.e).toBe(40) + // expect(ctm.f).toBe(40) + // }) + + // it('animate relative matrix transform', function(){ + // var ctm + // + // fx.transform(new SVG.Matrix().scale(2,0,0), true) + // + // jasmine.clock().tick(250) // Have the animation be half way + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(1.5) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(1.5) + // expect(ctm.e).toBe(0) + // expect(ctm.f).toBe(0) + // + // jasmine.clock().tick(250) // Have the animation reach its end + // fx.step() + // + // ctm = rect.ctm() + // expect(ctm.a).toBe(2) + // expect(ctm.b).toBe(0) + // expect(ctm.c).toBe(0) + // expect(ctm.d).toBe(2) + // expect(ctm.e).toBe(0) + // expect(ctm.f).toBe(0) + // }) describe('when animating plots', function() { it('should allow plot animations to be chained', function() { @@ -2154,7 +2154,7 @@ describe('FX', function() { var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100' var textPath = text.path(path).font({ size: 42.5, family: 'Verdana' }) - + textPath.attr('startOffset', startValue) fx = textPath.animate(1000).attr('startOffset', endValue) @@ -2684,72 +2684,72 @@ describe('FX', function() { }) }) - describe('transform()', function() { - it('returns itself when no valid transformation was found', function() { - expect(fx.transform({})).toBe(fx) - }) - it('gets the current transforms', function() { - expect(fx.transform()).toEqual(new SVG.Matrix(rect).extract()) - }) - it('gets a certain transformation if used with an argument', function() { - expect(fx.transform('x')).toEqual(0) - }) - it('adds an entry to transforms when matrix given', function() { - var matrix = new SVG.Matrix(1,2,3,4,5,6) - fx.transform(matrix) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(matrix)) - }) - it('sets relative flag when given', function() { - var matrix = new SVG.Matrix(1,2,3,4,5,6) - fx.transform(matrix, true) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(matrix)) - expect(fx.situation.transforms[0].relative).toBe(true) - }) - it('adds an entry to transforms when rotation given', function() { - fx.transform({rotation: 30, cx:0, cy:0}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Rotate(30, 0, 0))) - }) - it('adds an entry to transforms when scale given', function() { - fx.transform({scale: 2, cx:0, cy:0}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Scale(2, 2, 0, 0))) - }) - it('adds an entry to transforms when scaleX given', function() { - fx.transform({scaleX: 2, cx:0, cy:0}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Scale(2, 1, 0, 0))) - }) - it('adds an entry to transforms when scaleY given', function() { - fx.transform({scaleY: 2, cx:0, cy:0}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Scale(1, 2, 0, 0))) - }) - it('adds an entry to transforms when skewX given', function() { - fx.transform({skewX: 2, cx:0, cy:0}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Skew(2, 0, 0, 0))) - }) - it('adds an entry to transforms when skewY given', function() { - fx.transform({skewY: 2, cx:0, cy:0}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Skew(0, 2, 0, 0))) - }) - it('adds an entry to transforms when flip x given', function() { - fx.transform({flip: 'x'}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining((new SVG.Matrix()).flip('x', 150))) - }) - it('adds an entry to transforms when flip x with offset given', function() { - fx.transform({flip: 'x', offset: 100}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining((new SVG.Matrix()).flip('x', 100))) - }) - it('adds an entry to transforms when flip y given', function() { - fx.transform({flip: 'y'}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining((new SVG.Matrix()).flip('y', 150))) - }) - it('adds an entry to transforms when x given', function() { - fx.transform({x:20}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Translate(20, undefined))) - }) - it('adds an entry to transforms when y given', function() { - fx.transform({y:20}) - expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Translate(undefined, 20))) - }) - }) + // describe('transform()', function() { + // it('returns itself when no valid transformation was found', function() { + // expect(fx.transform({})).toBe(fx) + // }) + // it('gets the current transforms', function() { + // expect(fx.transform()).toEqual(new SVG.Matrix(rect).extract()) + // }) + // it('gets a certain transformation if used with an argument', function() { + // expect(fx.transform('x')).toEqual(0) + // }) + // it('adds an entry to transforms when matrix given', function() { + // var matrix = new SVG.Matrix(1,2,3,4,5,6) + // fx.transform(matrix) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(matrix)) + // }) + // it('sets relative flag when given', function() { + // var matrix = new SVG.Matrix(1,2,3,4,5,6) + // fx.transform(matrix, true) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(matrix)) + // expect(fx.situation.transforms[0].relative).toBe(true) + // }) + // it('adds an entry to transforms when rotation given', function() { + // fx.transform({rotation: 30, cx:0, cy:0}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Rotate(30, 0, 0))) + // }) + // it('adds an entry to transforms when scale given', function() { + // fx.transform({scale: 2, cx:0, cy:0}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Scale(2, 2, 0, 0))) + // }) + // it('adds an entry to transforms when scaleX given', function() { + // fx.transform({scaleX: 2, cx:0, cy:0}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Scale(2, 1, 0, 0))) + // }) + // it('adds an entry to transforms when scaleY given', function() { + // fx.transform({scaleY: 2, cx:0, cy:0}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Scale(1, 2, 0, 0))) + // }) + // it('adds an entry to transforms when skewX given', function() { + // fx.transform({skewX: 2, cx:0, cy:0}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Skew(2, 0, 0, 0))) + // }) + // it('adds an entry to transforms when skewY given', function() { + // fx.transform({skewY: 2, cx:0, cy:0}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Skew(0, 2, 0, 0))) + // }) + // it('adds an entry to transforms when flip x given', function() { + // fx.transform({flip: 'x'}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining((new SVG.Matrix()).flip('x', 150))) + // }) + // it('adds an entry to transforms when flip x with offset given', function() { + // fx.transform({flip: 'x', offset: 100}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining((new SVG.Matrix()).flip('x', 100))) + // }) + // it('adds an entry to transforms when flip y given', function() { + // fx.transform({flip: 'y'}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining((new SVG.Matrix()).flip('y', 150))) + // }) + // it('adds an entry to transforms when x given', function() { + // fx.transform({x:20}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Translate(20, undefined))) + // }) + // it('adds an entry to transforms when y given', function() { + // fx.transform({y:20}) + // expect(fx.situation.transforms[0]).toEqual(jasmine.objectContaining(new SVG.Translate(undefined, 20))) + // }) + // }) /* shortcuts for animation */ describe('animate()', function() { diff --git a/spec/spec/helper.js b/spec/spec/helper.js index 3dd6aff..a77b3e7 100644 --- a/spec/spec/helper.js +++ b/spec/spec/helper.js @@ -10,23 +10,23 @@ if(typeof exports === 'object'){ drawing = document.documentElement imageUrl = 'spec/fixtures/pixel.png' parserInDoc = true - + function tag(name, attrs, children) { var el = document.createElement(name) for(var i in attrs){ el.setAttribute(i, attrs[i]) } - + for(var i in children){ if(typeof children[i] == 'string') children[i] = document.createTextNode(children[i]) - + el.appendChild(children[i]) } - + return el } - + // create fixtures in svgdom var el = tag('svg', { height:0, @@ -122,9 +122,9 @@ if(typeof exports === 'object'){ tag('polygon', {points: '200,10 250,190 160,210'}), tag('polyline', {points: '20,20 40,25 60,40 80,120 120,140 200,180'}) ]) - + document.appendChild(el) - + }else{ drawing = document.createElement('div') document.getElementsByTagName('body')[0].appendChild(drawing) @@ -175,3 +175,15 @@ window.roundBox = function(box) { Math.round(box.height) ) } + +// Same thing here with matrices +window.roundMatrix = function (mat) { + return new SVG.Matrix( + +(mat.a.toFixed(5)), + +(mat.b.toFixed(5)), + +(mat.c.toFixed(5)), + +(mat.d.toFixed(5)), + +(mat.e.toFixed(5)), + +(mat.f.toFixed(5)), + ) +} diff --git a/spec/spec/line.js b/spec/spec/line.js index 219043d..48b1c8b 100644 --- a/spec/spec/line.js +++ b/spec/spec/line.js @@ -202,7 +202,7 @@ describe('Line', function() { describe('translate()', function() { it('should set the translation of an element', function() { - line.transform({ x: 12, y: 12 }) + line.transform({ tx: 12, ty: 12 }) expect(line.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js index 0816f66..543ac0e 100644 --- a/spec/spec/matrix.js +++ b/spec/spec/matrix.js @@ -18,30 +18,6 @@ describe('Matrix', function() { expect(matrix.f).toBe(0) }) - describe('extract()', function() { - var extract - - beforeEach(function() { - extract = matrix.extract() - }) - - it('parses translation values', function() { - expect(extract.x).toBe(0) - expect(extract.y).toBe(0) - }) - it('parses skew values', function() { - expect(extract.skewX).toBe(0) - expect(extract.skewY).toBe(0) - }) - it('parses scale values', function() { - expect(extract.scaleX).toBe(1) - expect(extract.scaleY).toBe(1) - }) - it('parses rotatoin value', function() { - expect(extract.rotation).toBe(0) - }) - }) - describe('toString()' , function() { it('exports correctly to a string', function() { expect(matrix.toString()).toBe('matrix(1,0,0,1,0,0)') @@ -53,48 +29,24 @@ describe('Matrix', function() { var rect beforeEach(function() { + // Draw is defined in helpers rect = draw.rect(100, 100) - .transform({ rotation: -10 }, true) - .transform({ x: 40, y: 50 }, true) - .transform({ scale: 2 }, true) - + .transform({ + rotate: -10, + translate: [40, 50], + scale: 2, + }) matrix = new SVG.Matrix(rect) }) it('parses the current transform matrix from an element', function() { - expect(matrix.a).toBeCloseTo(1.9696155786514282) - expect(matrix.b).toBeCloseTo(-0.3472963869571686) - expect(matrix.c).toBeCloseTo(0.3472963869571686) - expect(matrix.d).toBeCloseTo(1.9696155786514282) - expect(matrix.e).toBeCloseTo(-17.770875930786133) - expect(matrix.f).toBeCloseTo(11.178505897521973) - }) - - describe('extract()', function() { - - it('parses translation values', function() { - var extract = new SVG.Matrix(draw.rect(100, 100).translate(40, 50)).extract() - expect(extract.x).toBeCloseTo(40) - expect(extract.y).toBeCloseTo(50) - }) - it('parses skewX value', function() { - var extract = new SVG.Matrix(draw.rect(100, 100).skew(25, 0)).extract() - expect(extract.skewX).toBeCloseTo(25) - }) - it('parses skewY value', function() { - var extract = new SVG.Matrix(draw.rect(100, 100).skew(0, 20)).extract() - expect(extract.skewY).toBeCloseTo(20) - }) - it('parses scale values', function() { - var extract = new SVG.Matrix(draw.rect(100, 100).scale(2, 3)).extract() - expect(extract.scaleX).toBeCloseTo(2) - expect(extract.scaleY).toBeCloseTo(3) - }) - it('parses rotatoin value', function() { - var extract = new SVG.Matrix(draw.rect(100, 100).rotate(-100)).extract() - expect(extract.rotation).toBeCloseTo(-100) - }) + expect(matrix.a).toBeCloseTo(1.969615506024416) + expect(matrix.b).toBeCloseTo(-0.34729635533386066) + expect(matrix.c).toBeCloseTo(0.34729635533386066) + expect(matrix.d).toBeCloseTo(1.969615506024416) + expect(matrix.e).toBeCloseTo(-25.84559306791384) + expect(matrix.f).toBeCloseTo(18.884042465472234) }) }) @@ -153,6 +105,41 @@ describe('Matrix', function() { }) + describe('compose()', function() { + it('composes a matrix to form the correct result', function() { + var composed = new SVG.Matrix().compose({ + scaleX: 3, scaleY: 20, shear: 4, rotate: 50, translateX: 23, translateY: 52, + }) + var expected = new SVG.Matrix().scale(3, 20).shear(4).rotate(50).translate(23, 52) + expect(composed).toEqual(expected) + }) + }) + + describe('decompose()', function () { + it('decomposes a matrix properly', function () { + var matrix = new SVG.Matrix().scale(3, 2.5).shear(4).rotate(30).translate(20, 30) + var decomposed = matrix.decompose() + expect(decomposed.scaleX).toBeCloseTo(3) + expect(decomposed.scaleY).toBeCloseTo(2.5) + expect(decomposed.shear).toBeCloseTo(4) + expect(decomposed.rotate).toBeCloseTo(30) + expect(decomposed.translateX).toBeCloseTo(20) + expect(decomposed.translateY).toBeCloseTo(30) + }) + + it('can be recomposed to the same matrix', function () { + var matrix = new SVG.Matrix().scale(3, 2.5).shear(4).rotate(30).translate(20, 30) + var decomposed = matrix.decompose() + var composed = new SVG.Matrix().compose(decomposed) + expect(matrix.a).toBeCloseTo(composed.a) + expect(matrix.b).toBeCloseTo(composed.b) + expect(matrix.c).toBeCloseTo(composed.c) + expect(matrix.d).toBeCloseTo(composed.d) + expect(matrix.e).toBeCloseTo(composed.e) + expect(matrix.f).toBeCloseTo(composed.f) + }) + }) + describe('clone()', function() { it('returns a clone of the matrix', function() { var matrix = new SVG.Matrix(2, 0, 0, 5, 0, 0) @@ -201,20 +188,21 @@ describe('Matrix', function() { describe('multiply()', function() { it('multiplies two matices', function() { - var matrix1 = new SVG.Matrix(2, 0, 0, 5, 0, 0) - , matrix2 = new SVG.Matrix(1, 0, 0, 1, 4, 3) + var matrix1 = new SVG.Matrix(1, 4, 2, 5, 3, 6) + , matrix2 = new SVG.Matrix(7, 8, 8, 7, 9, 6) , matrix3 = matrix1.multiply(matrix2) - expect(matrix1.toString()).toBe('matrix(2,0,0,5,0,0)') - expect(matrix2.toString()).toBe('matrix(1,0,0,1,4,3)') - expect(matrix3.toString()).toBe('matrix(2,0,0,5,8,15)') + expect(matrix1.toString()).toBe('matrix(1,4,2,5,3,6)') + expect(matrix2.toString()).toBe('matrix(7,8,8,7,9,6)') + expect(matrix3.toString()).toBe('matrix(23,68,22,67,24,72)') }) + it('accepts matrices in any form', function() { - var matrix1 = new SVG.Matrix(2, 0, 0, 5, 0, 0) - , matrix2 = matrix1.multiply('1,0,0,1,4,3') + var matrix1 = new SVG.Matrix(1, 4, 2, 5, 3, 6) + , matrix2 = matrix1.multiply('7,8,8,7,9,6') - expect(matrix1.toString()).toBe('matrix(2,0,0,5,0,0)') - expect(matrix2.toString()).toBe('matrix(2,0,0,5,8,15)') + expect(matrix1.toString()).toBe('matrix(1,4,2,5,3,6)') + expect(matrix2.toString()).toBe('matrix(23,68,22,67,24,72)') }) }) @@ -236,10 +224,15 @@ describe('Matrix', function() { describe('translate()', function() { it('translates matrix by given x and y values', function() { var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).translate(10, 12.5) - expect(matrix.e).toBe(14) expect(matrix.f).toBe(15.5) }) + + it('does nothing if you give it no x or y value', function() { + var matrix = new SVG.Matrix(1, 2, 3, 4, 5, 6).translate() + expect(matrix.e).toBe(5) + expect(matrix.f).toBe(6) + }) }) describe('scale()', function() { @@ -248,51 +241,59 @@ describe('Matrix', function() { expect(matrix.a).toBe(3) expect(matrix.d).toBe(3) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.e).toBe(4 * 3) + expect(matrix.f).toBe(3 * 3) }) it('performs a non-uniformal scale with two values', function() { var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).scale(2.5, 3.5) expect(matrix.a).toBe(2.5) expect(matrix.d).toBe(3.5) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.e).toBe(4 * 2.5) + expect(matrix.f).toBe(3 * 3.5) }) it('performs a uniformal scale at a given center point with three values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).scale(3, 150, 100) + var matrix = new SVG.Matrix(1, 3, 2, 3, 4, 3).scale(3, 2, 3) expect(matrix.a).toBe(3) - expect(matrix.d).toBe(3) - expect(matrix.e).toBe(-296) - expect(matrix.f).toBe(-197) + expect(matrix.b).toBe(9) + expect(matrix.c).toBe(6) + expect(matrix.d).toBe(9) + expect(matrix.e).toBe(8) + expect(matrix.f).toBe(3) }) it('performs a non-uniformal scale at a given center point with four values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).scale(3, 2, 150, 100) + var matrix = new SVG.Matrix(1, 3, 2, 3, 4, 3).scale(3, 2, 2, 3) expect(matrix.a).toBe(3) - expect(matrix.d).toBe(2) - expect(matrix.e).toBe(-296) - expect(matrix.f).toBe(-97) + expect(matrix.b).toBe(6) + expect(matrix.c).toBe(6) + expect(matrix.d).toBe(6) + expect(matrix.e).toBe(8) + expect(matrix.f).toBe(3) }) }) describe('rotate()', function() { it('performs a rotation with one argument', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).rotate(30) + var matrix = new SVG.Matrix(1, 3, 2, 3, 4, 3).rotate(30) - expect(matrix.a).toBeCloseTo(0.8660254037844387) - expect(matrix.d).toBeCloseTo(0.8660254037844387) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.a).toBeCloseTo(-0.6339746) + expect(matrix.b).toBeCloseTo(3.09807621) + expect(matrix.c).toBeCloseTo(0.23205081) + expect(matrix.d).toBeCloseTo(3.59807621) + expect(matrix.e).toBeCloseTo(1.96410162) + expect(matrix.f).toBeCloseTo(4.59807621) }) - it('performs a rotation on a given point with three arguments', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).rotate(30, 150, 100) + it('performs a rotation around a given point with three arguments', function() { + var matrix = new SVG.Matrix(1, 3, 2, 3, 4, 3).rotate(30, 2, 3) - expect(matrix.a).toBeCloseTo(0.8660254037844387) - expect(matrix.d).toBeCloseTo(0.8660254037844387) - expect(matrix.e).toBeCloseTo(74.0961894323342) - expect(matrix.f).toBeCloseTo(-58.60254037844388) + expect(matrix.a).toBeCloseTo(-0.633974596216) + expect(matrix.b).toBeCloseTo(3.09807621135) + expect(matrix.c).toBeCloseTo(0.232050807569) + expect(matrix.d).toBeCloseTo(3.59807621135) + expect(matrix.e).toBeCloseTo(3.73205080757) + expect(matrix.f).toBeCloseTo(4.0) }) }) @@ -303,7 +304,7 @@ describe('Matrix', function() { expect(matrix.a).toBe(-1) expect(matrix.d).toBe(1) - expect(matrix.e).toBe(4) + expect(matrix.e).toBe(-4) expect(matrix.f).toBe(3) }) it('performs a flip over the horizontal axis over a given point with two arguments', function() { @@ -311,7 +312,7 @@ describe('Matrix', function() { expect(matrix.a).toBe(-1) expect(matrix.d).toBe(1) - expect(matrix.e).toBe(304) + expect(matrix.e).toBe(296) expect(matrix.f).toBe(3) }) }) @@ -322,7 +323,7 @@ describe('Matrix', function() { expect(matrix.a).toBe(1) expect(matrix.d).toBe(-1) expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.f).toBe(-3) }) it('performs a flip over the vertical axis over a given point with two arguments', function() { var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip('y', 100) @@ -330,7 +331,7 @@ describe('Matrix', function() { expect(matrix.a).toBe(1) expect(matrix.d).toBe(-1) expect(matrix.e).toBe(4) - expect(matrix.f).toBe(203) + expect(matrix.f).toBe(197) }) }) describe('with no axis given', function() { @@ -339,126 +340,129 @@ describe('Matrix', function() { expect(matrix.a).toBe(-1) expect(matrix.d).toBe(-1) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.e).toBe(-4) + expect(matrix.f).toBe(-3) }) it('performs a flip over the horizontal and vertical axis over a given point with one argument that represent both coordinates', function() { var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip(100) expect(matrix.a).toBe(-1) expect(matrix.d).toBe(-1) - expect(matrix.e).toBe(204) - expect(matrix.f).toBe(203) + expect(matrix.e).toBe(196) + expect(matrix.f).toBe(197) }) it('performs a flip over the horizontal and vertical axis over a given point with two arguments', function() { var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip(50, 100) expect(matrix.a).toBe(-1) expect(matrix.d).toBe(-1) - expect(matrix.e).toBe(104) - expect(matrix.f).toBe(203) + expect(matrix.e).toBe(96) + expect(matrix.f).toBe(197) }) }) }) describe('skew()', function() { it('performs a uniformal skew with one value', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(14) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(30) expect(matrix.a).toBe(1) - expect(matrix.b).toBeCloseTo(0.24932800284318) - expect(matrix.c).toBeCloseTo(0.24932800284318) + expect(matrix.b).toBeCloseTo(0.57735026919) + expect(matrix.c).toBeCloseTo(0.57735026919) expect(matrix.d).toBe(1) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.e).toBeCloseTo(5.73205080757) + expect(matrix.f).toBeCloseTo(5.30940107676) }) + it('performs a non-uniformal skew with two values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(8, 5) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(30, 20) expect(matrix.a).toBe(1) - expect(matrix.b).toBeCloseTo(0.087488663525924) - expect(matrix.c).toBeCloseTo(0.14054083470239) + expect(matrix.b).toBeCloseTo(0.363970234266) + expect(matrix.c).toBeCloseTo(0.57735026919) expect(matrix.d).toBe(1) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.e).toBeCloseTo(5.73205080757) + expect(matrix.f).toBeCloseTo(4.45588093706) }) + it('performs a uniformal skew at a given center point with three values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(3, 150, 100) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(30, 150, 100) expect(matrix.a).toBe(1) - expect(matrix.b).toBeCloseTo(0.052407779283041) - expect(matrix.c).toBeCloseTo(0.052407779283041) + expect(matrix.b).toBeCloseTo(0.57735026919) + expect(matrix.c).toBeCloseTo(0.57735026919) expect(matrix.d).toBe(1) - expect(matrix.e).toBeCloseTo(-1.2407779283) - expect(matrix.f).toBeCloseTo(-4.8611668924562) + expect(matrix.e).toBeCloseTo(-52.0029761114) + expect(matrix.f).toBeCloseTo(-81.2931393017) }) + it('performs a non-uniformal skew at a given center point with four values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(9, 7, 150, 100) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(30, 20, 150, 100) - expect(matrix.a).toBe(1) - expect(matrix.b).toBeCloseTo(0.1227845609029) - expect(matrix.c).toBeCloseTo(0.15838444032454) - expect(matrix.d).toBe(1) - expect(matrix.e).toBeCloseTo(-11.83844403245) - expect(matrix.f).toBeCloseTo(-15.417684135435) + expect(matrix.a).toBe(1.0) + expect(matrix.b).toBeCloseTo(0.363970234266) + expect(matrix.c).toBeCloseTo(0.57735026919) + expect(matrix.d).toBe(1.0) + expect(matrix.e).toBeCloseTo(-52.0029761114) + expect(matrix.f).toBeCloseTo(-50.1396542029) }) - it('can be chained', function(){ - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(9, 7).skew(20, 40) - expect(matrix.a).toBeCloseTo(1.1329003254605) - expect(matrix.b).toBeCloseTo(0.96188419208018) - expect(matrix.c).toBeCloseTo(0.52235467459074) - expect(matrix.d).toBeCloseTo(1.0446899253961) - expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + it('can be chained', function(){ + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(20, 30).skew(30, 20) + expect(matrix.a).toBeCloseTo(1.33333333333) + expect(matrix.b).toBeCloseTo(0.941320503456) + expect(matrix.c).toBeCloseTo(0.941320503456) + expect(matrix.d).toBeCloseTo(1.13247433143) + expect(matrix.e).toBeCloseTo(8.1572948437) + expect(matrix.f).toBeCloseTo(7.16270500812) }) }) describe('skewX', function(){ it('performs a skew along the x axis with one value', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewX(12) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewX(30) expect(matrix.a).toBe(1) expect(matrix.b).toBe(0) - expect(matrix.c).toBeCloseTo(0.21255656167002) + expect(matrix.c).toBeCloseTo(0.57735026919) expect(matrix.d).toBe(1) - expect(matrix.e).toBe(4) + expect(matrix.e).toBeCloseTo(5.73205080757) expect(matrix.f).toBe(3) }) it('performs a skew along the x axis at a given center point with three values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewX(5, 150, 100) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewX(30, 150, 100) expect(matrix.a).toBe(1) expect(matrix.b).toBe(0) - expect(matrix.c).toBeCloseTo(0.087488663525924) + expect(matrix.c).toBeCloseTo(0.57735026919) expect(matrix.d).toBe(1) - expect(matrix.e).toBeCloseTo(-4.74886635259) + expect(matrix.e).toBeCloseTo(-52.0029761114) expect(matrix.f).toBe(3) }) }) describe('skewY', function(){ it('performs a skew along the y axis with one value', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewY(12) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewY(30) expect(matrix.a).toBe(1) - expect(matrix.b).toBeCloseTo(0.21255656167002) + expect(matrix.b).toBeCloseTo(0.57735026919) expect(matrix.c).toBe(0) expect(matrix.d).toBe(1) expect(matrix.e).toBe(4) - expect(matrix.f).toBe(3) + expect(matrix.f).toBeCloseTo(5.30940107676) }) it('performs a skew along the y axis at a given center point with three values', function() { - var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewY(5, 150, 100) + var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skewY(30, 150, 100) expect(matrix.a).toBe(1) - expect(matrix.b).toBeCloseTo(0.087488663525924) + expect(matrix.b).toBeCloseTo(0.57735026919) expect(matrix.c).toBe(0) expect(matrix.d).toBe(1) expect(matrix.e).toBe(4) - expect(matrix.f).toBeCloseTo(-10.123299528889) + expect(matrix.f).toBeCloseTo(-81.2931393017) }) }) diff --git a/spec/spec/path.js b/spec/spec/path.js index e0b5f25..9a78b25 100644 --- a/spec/spec/path.js +++ b/spec/spec/path.js @@ -185,7 +185,7 @@ describe('Path', function() { describe('translate()', function() { it('sets the translation of an element', function() { - path.transform({ x: 12, y: 12 }) + path.transform({ tx: 12, ty: 12 }) expect(path.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) diff --git a/spec/spec/polygon.js b/spec/spec/polygon.js index 789c3b9..4cd2ea8 100644 --- a/spec/spec/polygon.js +++ b/spec/spec/polygon.js @@ -180,7 +180,7 @@ describe('Polygon', function() { describe('translate()', function() { it('sets the translation of an element', function() { - polygon.transform({ x: 12, y: 12 }) + polygon.transform({ tx: 12, ty: 12 }) expect(polygon.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) diff --git a/spec/spec/polyline.js b/spec/spec/polyline.js index ca516bd..7fbea18 100644 --- a/spec/spec/polyline.js +++ b/spec/spec/polyline.js @@ -180,7 +180,7 @@ describe('Polyline', function() { describe('translate()', function() { it('sets the translation of an element', function() { - polyline.transform({ x: 12, y: 12 }) + polyline.transform({ tx: 12, ty: 12 }) expect(polyline.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) diff --git a/spec/spec/rect.js b/spec/spec/rect.js index 5ce65c0..b07e10b 100644 --- a/spec/spec/rect.js +++ b/spec/spec/rect.js @@ -1,14 +1,14 @@ describe('Rect', function() { var rect - + beforeEach(function() { rect = draw.rect(220,100) }) - + afterEach(function() { draw.clear() }) - + describe('x()', function() { it('should return the value of x without an argument', function() { expect(rect.x()).toBe(0) @@ -18,7 +18,7 @@ describe('Rect', function() { expect(rect.node.getAttribute('x')).toBe('123') }) }) - + describe('y()', function() { it('should return the value of y without an argument', function() { expect(rect.y()).toBe(0) @@ -28,7 +28,7 @@ describe('Rect', function() { expect(rect.node.getAttribute('y')).toBe('345') }) }) - + describe('cx()', function() { it('should return the value of cx without an argument', function() { expect(rect.cx()).toBe(110) @@ -39,7 +39,7 @@ describe('Rect', function() { expect(box.cx).toBe(123) }) }) - + describe('cy()', function() { it('should return the value of cy without an argument', function() { expect(rect.cy()).toBe(50) @@ -63,7 +63,7 @@ describe('Rect', function() { expect(rect.node.getAttribute('ry')).toBe('30') }) }) - + describe('move()', function() { it('should set the x and y position', function() { rect.move(123,456) @@ -96,7 +96,7 @@ describe('Rect', function() { expect(rect.node.getAttribute('y')).toBe('85') }) }) - + describe('center()', function() { it('should set the cx and cy position', function() { rect.center(321,567) @@ -105,7 +105,7 @@ describe('Rect', function() { expect(box.cy).toBe(567) }) }) - + describe('width()', function() { it('sets the width of the element', function() { rect.width(789) @@ -145,17 +145,17 @@ describe('Rect', function() { expect(rect.width() / rect.height()).toBe(box.width / box.height) }) }) - + describe('scale()', function() { it('should scale the element universally with one argument', function() { var box = rect.scale(2).rbox() - + expect(box.width).toBe(rect.attr('width') * 2) expect(box.height).toBe(rect.attr('height') * 2) }) it('should scale the element over individual x and y axes with two arguments', function() { var box = rect.scale(2, 3.5).rbox() - + expect(box.width).toBe(rect.attr('width') * 2) expect(box.height).toBe(rect.attr('height') * 3.5) }) @@ -163,17 +163,9 @@ describe('Rect', function() { describe('translate()', function() { it('should set the translation of an element', function() { - rect.transform({ x: 12, y: 12 }) + rect.transform({ tx: 12, ty: 12 }) expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) - -}) - - - - - - - +}) diff --git a/spec/spec/sugar.js b/spec/spec/sugar.js index d550886..b51e948 100644 --- a/spec/spec/sugar.js +++ b/spec/spec/sugar.js @@ -56,7 +56,7 @@ describe('Sugar', function() { it('redirects to transform()', function() { rect.rotate(1,2,3) - expect(rect.transform).toHaveBeenCalledWith({ rotation: 1, cx: 2, cy: 3 }) + expect(rect.transform).toHaveBeenCalledWith({ rotate: 1, origin: [2, 3] }, true) }) }) @@ -75,27 +75,27 @@ describe('Sugar', function() { it('redirects to transform() with no argument', function() { rect.skew() - expect(rect.transform).toHaveBeenCalledWith({ skewX: undefined, skewY: undefined, cx: undefined, cy: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ skew: [undefined, undefined], origin: [undefined, undefined] }, true) }) it('redirects to transform() with one argument', function() { rect.skew(5) - expect(rect.transform).toHaveBeenCalledWith({ skew: 5, cx: undefined, cy: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ skew: 5, origin: [undefined, undefined] }, true) }) it('redirects to transform() with two argument', function() { rect.skew(5, 6) - expect(rect.transform).toHaveBeenCalledWith({ skewX: 5, skewY: 6, cx: undefined, cy: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ skew: [5, 6], origin: [undefined, undefined] }, true) }) it('redirects to transform() with three arguments', function() { rect.skew(5, 6, 7) - expect(rect.transform).toHaveBeenCalledWith({ skew: 5, cx: 6, cy: 7 }) + expect(rect.transform).toHaveBeenCalledWith({ skew: 5, origin: [6, 7] }, true) }) it('redirects to transform() with four arguments', function() { rect.skew(5, 6, 7, 8) - expect(rect.transform).toHaveBeenCalledWith({ skewX: 5, skewY: 6, cx: 7, cy: 8 }) + expect(rect.transform).toHaveBeenCalledWith({ skew: [5, 6], origin: [7, 8] }, true) }) }) @@ -114,27 +114,27 @@ describe('Sugar', function() { it('redirects to transform() with no argument', function() { rect.scale() - expect(rect.transform).toHaveBeenCalledWith({ scaleX: undefined, scaleY: undefined, cx: undefined, cy: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ scale: [undefined, undefined], origin: [undefined, undefined] }, true) }) it('redirects to transform() with one argument', function() { rect.scale(5) - expect(rect.transform).toHaveBeenCalledWith({ scale: 5, cx: undefined, cy: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ scale: 5, origin: [undefined, undefined]}, true) }) it('redirects to transform() with two argument', function() { rect.scale(5, 6) - expect(rect.transform).toHaveBeenCalledWith({ scaleX: 5, scaleY: 6, cx: undefined, cy: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ scale: [5, 6], origin: [undefined, undefined] }, true) }) it('redirects to transform() with three arguments', function() { rect.scale(5, 6, 7) - expect(rect.transform).toHaveBeenCalledWith({ scale: 5, cx: 6, cy: 7 }) + expect(rect.transform).toHaveBeenCalledWith({ scale: 5, origin: [6, 7] }, true) }) it('redirects to transform() with four arguments', function() { rect.scale(5, 6, 7, 8) - expect(rect.transform).toHaveBeenCalledWith({ scaleX: 5, scaleY: 6, cx: 7, cy: 8 }) + expect(rect.transform).toHaveBeenCalledWith({ scale: [5, 6], origin: [7, 8] }, true) }) }) @@ -153,7 +153,7 @@ describe('Sugar', function() { it('redirects to transform()', function() { rect.translate(1,2) - expect(rect.transform).toHaveBeenCalledWith({ x: 1, y: 2 }) + expect(rect.transform).toHaveBeenCalledWith({ translate: [1, 2] }, true) }) }) @@ -172,18 +172,18 @@ describe('Sugar', function() { it('redirects to transform()', function() { rect.flip('x',2) - expect(rect.transform).toHaveBeenCalledWith({ flip: 'x', offset: 2 }) + expect(rect.transform).toHaveBeenCalledWith({ flip: 'x', origin: [2, 0] }, true) }) it('sets flip to "both" when calling without anything', function() { rect.flip() - expect(rect.transform).toHaveBeenCalledWith({ flip: 'both', offset: undefined }) + expect(rect.transform).toHaveBeenCalledWith({ flip: 'both', origin: [0, 0] }, true) }) // this works because only x and y are valid flip values. Evereything else flips on both axis it('sets flip to number and offset to number when called with offset only', function() { rect.flip(5) - expect(rect.transform).toHaveBeenCalledWith({ flip: 5, offset: 5 }) + expect(rect.transform).toHaveBeenCalledWith({ flip: "both", origin: [5, 5] }, true) }) }) diff --git a/spec/spec/text.js b/spec/spec/text.js index 2a3f3f8..a17009e 100644 --- a/spec/spec/text.js +++ b/spec/spec/text.js @@ -135,7 +135,7 @@ describe('Text', function() { describe('translate()', function() { it('sets the translation of an element', function() { - text.transform({ x: 12, y: 12 }) + text.transform({ tx: 12, ty: 12 }) expect(text.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) diff --git a/spec/spec/transformations.js b/spec/spec/transformations.js index 3399981..242e798 100644 --- a/spec/spec/transformations.js +++ b/spec/spec/transformations.js @@ -1,282 +1,281 @@ -describe('Transformations:', function() { - var translated, scaled, rotated, skewed - - beforeEach(function() { - translated = draw.rect(100,100).translate(100,100) - scaled = draw.rect(100,100).scale(2) - rotated = draw.rect(100,100).rotate(45, 50, 50) - skewed = draw.rect(100,100).skew(30) - }) - - /* SVG.Transformation is not tested because it is an abstract prototype */ - - describe('SVG.Transformation', function() { - it('marks the transformation as inversed when inverse flag given', function() { - var trans = new SVG.Transformation([], true) - expect(trans.inversed).toBeTruthy() - }) - }) - - describe('SVG.Translate', function() { - var trans - - beforeEach(function(){ - trans = new SVG.Translate(translated.transform()) - }) - - - it('creates an object of type SVG.Transformation', function() { - expect(trans instanceof SVG.Transformation).toBeTruthy() - }) - - it('uses transformedX and transformedY as arguments', function() { - expect(trans.arguments).toEqual(['transformedX', 'transformedY']) - }) - - it('s method is translate()', function() { - expect(trans.method).toEqual('translate') - }) - - it('sets the necessary parameters at creation', function() { - expect(trans.transformedX).toBe(100) - expect(trans.transformedY).toBe(100) - }) - - describe('undo', function() { - it('sets the undo matrix which can undo the translation', function() { - var extracted = (new SVG.Matrix(1,0,0,1,20,20)).extract() - trans.undo(extracted) - expect(trans._undo.toString()).toEqual('matrix(1,0,0,1,-20,-20)') - - var extracted = (new SVG.Matrix(10,0,0,10,20,20)).extract() - trans.undo(extracted) - expect(trans._undo.toString()).toEqual('matrix(1,0,0,1,-2,-2)') - - var extracted = (new SVG.Matrix(10,50,50,30,20,20)).extract() - trans.undo(extracted) - expect(trans._undo.e).toBeCloseTo(-extracted.transformedX) - expect(trans._undo.f).toBeCloseTo(-extracted.transformedY) - }) - }) - - describe('at', function() { - it('creates a matrix at a certain position', function() { - expect(trans.at(0.3).toString()).toEqual('matrix(1,0,0,1,30,30)') - }) - it('returns the inversed matrix from a specific position when created with inverse flag', function() { - expect((new SVG.Translate(translated.transform(), true)).at(0.3).toString()).toEqual('matrix(1,0,0,1,-30,-30)') - }) - it('returns the resulting transformation which has to be made to set an absolute translation', function() { - trans.undo(new SVG.Matrix(10,50,50,30,20,20).extract()) - - expect(trans.at(0.4).a).toEqual(1) - expect(trans.at(0.4).b).toEqual(0) - expect(trans.at(0.4).c).toEqual(0) - expect(trans.at(0.4).d).toEqual(1) - expect(trans.at(0.4).e).toBeCloseTo(100 * 0.4 + trans._undo.e * 0.4) - expect(trans.at(0.4).f).toBeCloseTo(100 * 0.4 + trans._undo.f * 0.4) - }) - }) - }) - - describe('SVG.Rotate', function() { - var trans - - beforeEach(function(){ - trans = new SVG.Rotate(45, 50, 50) - }) - - - it('creates an object of type SVG.Transformation', function() { - expect(trans instanceof SVG.Transformation).toBeTruthy() - }) - - it('uses rotation, cx and cy as arguments', function() { - expect(trans.arguments).toEqual(['rotation', 'cx', 'cy']) - }) - - it('s method is rotate()', function() { - expect(trans.method).toEqual('rotate') - }) - - it('sets the necessary parameters at creation', function() { - expect(trans.rotation).toBe(45) - expect(trans.cx).toBe(50) - expect(trans.cy).toBe(50) - }) - - describe('undo', function() { - it('sets an undo object which holds rotation', function() { - var extracted = (new SVG.Matrix(1,0,0,1,0,0)).rotate(20, 50, 50).extract() - trans.undo(extracted) - expect(trans._undo.rotation).toBeCloseTo(20) - }) - }) - - describe('at', function() { - it('creates a matrix at a certain position', function() { - expect(trans.at(0.3).toString()).toEqual((new SVG.Matrix()).rotate(0.3 * 45, 50, 50).toString()) - }) - it('returns the resulting transformation which has to be made to set an absolute translation', function() { - trans.undo((new SVG.Matrix()).rotate(20, 50, 50).extract()) - - expect(trans.at(0.4).a).toBeCloseTo(1,1) - expect(trans.at(0.4).b).toEqual(jasmine.any(Number)) - expect(trans.at(0.4).c).toEqual(jasmine.any(Number)) - expect(trans.at(0.4).d).toBeCloseTo(1,1) - expect(trans.at(0.4).e).toEqual(jasmine.any(Number)) - expect(trans.at(0.4).f).toEqual(jasmine.any(Number)) - }) - }) - }) - - - describe('SVG.Scale', function() { - var trans - - beforeEach(function(){ - trans = new SVG.Scale(2,2,50,50) - }) - - - it('creates an object of type SVG.Transformation', function() { - expect(trans instanceof SVG.Transformation).toBeTruthy() - }) - - it('uses scaleX, scaleY, cx and cy as arguments', function() { - expect(trans.arguments).toEqual(['scaleX', 'scaleY', 'cx', 'cy']) - }) - - it('s method is scale()', function() { - expect(trans.method).toEqual('scale') - }) - - it('sets the necessary parameters at creation', function() { - expect(trans.scaleX).toBe(2) - expect(trans.scaleY).toBe(2) - expect(trans.cx).toBe(50) - expect(trans.cy).toBe(50) - }) - - describe('undo', function() { - it('sets the undo matrix which can undo the translation', function() { - var extracted = (new SVG.Matrix(4,0,0,4,0,0)).extract() - trans.undo(extracted) - expect(trans._undo.toString()).toEqual('matrix(0.25,0,0,0.25,37.5,37.5)') - - var extracted = (new SVG.Matrix(10,0,0,10,20,20)).extract() - trans.undo(extracted) - expect(trans._undo.a).toBeCloseTo(1/extracted.scaleX) - expect(trans._undo.d).toBeCloseTo(1/extracted.scaleY) - expect(trans._undo.e).toBeCloseTo(45) - expect(trans._undo.f).toBeCloseTo(45) - - var extracted = (new SVG.Matrix(10,50,50,30,20,20)).extract() - trans.undo(extracted) - expect(trans._undo.a).toBeCloseTo(1/extracted.scaleX) - expect(trans._undo.d).toBeCloseTo(1/extracted.scaleY) - }) - }) - - describe('at', function() { - it('creates a matrix at a certain position', function() { - expect(trans.at(0.75).toString()).toEqual('matrix(1.75,0,0,1.75,-37.5,-37.5)') - }) - it('returns the inversed matrix from a specific position when created with inverse flag', function() { - var morphed = (new SVG.Scale(scaled.transform(2,2,50,50), true)).at(0.25) - - expect(morphed.a).toBeCloseTo(0.8) - expect(morphed.d).toBeCloseTo(0.8) - }) - it('returns the resulting transformation which has to be made to set an absolute translation', function() { - - var morphed = trans.undo((new SVG.Matrix(10,0,0,10,0,0)).extract()).at(0.5) - - expect(morphed.a).toBeCloseTo(0.6) - expect(morphed.b).toEqual(0) - expect(morphed.c).toEqual(0) - expect(morphed.d).toBeCloseTo(0.6) - expect(morphed.e).toBeCloseTo(20) - expect(morphed.f).toBeCloseTo(20) - }) - }) - }) - - describe('SVG.Skew', function() { - var trans - - beforeEach(function(){ - trans = new SVG.Skew(30,-30,50,50) - }) - - - it('creates an object of type SVG.Transformation', function() { - expect(trans instanceof SVG.Transformation).toBeTruthy() - }) - - it('uses scaleX, scaleY, cx and cy as arguments', function() { - expect(trans.arguments).toEqual(['skewX', 'skewY', 'cx', 'cy']) - }) - - it('s method is skew()', function() { - expect(trans.method).toEqual('skew') - }) - - it('sets the necessary parameters at creation', function() { - expect(trans.skewX).toBe(30) - expect(trans.skewY).toBe(-30) - expect(trans.cx).toBe(50) - expect(trans.cy).toBe(50) - }) - - describe('undo', function() { - it('sets the undo matrix which can undo the translation', function() { - var extracted = (new SVG.Matrix()).skew(90, 90, 0, 0).extract() - trans.undo(extracted) - expect(trans._undo.a).toBeCloseTo(0) - expect(trans._undo.b).toBeCloseTo(0) - expect(trans._undo.c).toBeCloseTo(0) - expect(trans._undo.d).toBeCloseTo(0) - expect(trans._undo.e).toBeCloseTo(50) - expect(trans._undo.f).toBeCloseTo(50) - - var extracted = (new SVG.Matrix(10,0,0,10,20,20)).extract() - trans.undo(extracted) - expect(trans._undo.a).toBeCloseTo(1) - expect(trans._undo.b).toBeCloseTo(0) - expect(trans._undo.c).toBeCloseTo(0) - expect(trans._undo.d).toBeCloseTo(1) - expect(trans._undo.e).toBeCloseTo(0) - expect(trans._undo.f).toBeCloseTo(0) - }) - }) - - describe('at', function() { - it('creates a matrix at a certain position', function() { - expect(trans.at(0.75)).toEqual((new SVG.Matrix()).morph((new SVG.Matrix()).skew(30, -30, 50, 50)).at(0.75)) - }) - it('returns the inversed matrix from a specific position when created with inverse flag', function() { - var morphed = (new SVG.Scale(skewed.transform(20,-20,50,50), true)).at(0.25) - - expect(morphed.a).toBeCloseTo(0.963) - expect(morphed.b).toBeCloseTo(0) - expect(morphed.c).toBeCloseTo(0) - expect(morphed.d).toBeCloseTo(0.963) - expect(morphed.e).toBeCloseTo(0) - expect(morphed.f).toBeCloseTo(0) - }) - it('returns the resulting transformation which has to be made to set an absolute translation', function() { - - var morphed = trans.undo((new SVG.Matrix(10,0,0,10,0,0)).skew(20, 30, 20, 10).extract()).at(0.5) - - expect(morphed.a).toBeCloseTo(1.266) - expect(morphed.b).toBeCloseTo(-0.7310) - expect(morphed.c).toBeCloseTo(0.1351) - expect(morphed.d).toBeCloseTo(0.9220) - expect(morphed.e).toBeCloseTo(-20.05593) - expect(morphed.f).toBeCloseTo(40.4468) - }) - }) - }) - -}) +// describe('Transformations:', function() { +// var translated, scaled, rotated, skewed +// +// beforeEach(function() { +// translated = draw.rect(100,100).translate(100,100) +// scaled = draw.rect(100,100).scale(2) +// rotated = draw.rect(100,100).rotate(45, 50, 50) +// skewed = draw.rect(100,100).skew(30) +// }) +// +// /* SVG.Transformation is not tested because it is an abstract prototype */ +// +// describe('SVG.Transformation', function() { +// it('marks the transformation as inversed when inverse flag given', function() { +// var trans = new SVG.Transformation([], true) +// expect(trans.inversed).toBeTruthy() +// }) +// }) +// +// describe('SVG.Translate', function() { +// var trans +// +// beforeEach(function(){ +// trans = new SVG.Translate(translated.transform()) +// }) +// +// +// it('creates an object of type SVG.Transformation', function() { +// expect(trans instanceof SVG.Transformation).toBeTruthy() +// }) +// +// it('uses transformedX and transformedY as arguments', function() { +// expect(trans.arguments).toEqual(['transformedX', 'transformedY']) +// }) +// +// it('s method is translate()', function() { +// expect(trans.method).toEqual('translate') +// }) +// +// it('sets the necessary parameters at creation', function() { +// expect(trans.transformedX).toBe(100) +// expect(trans.transformedY).toBe(100) +// }) +// +// describe('undo', function() { +// it('sets the undo matrix which can undo the translation', function() { +// var extracted = (new SVG.Matrix(1,0,0,1,20,20)).extract() +// trans.undo(extracted) +// expect(trans._undo.toString()).toEqual('matrix(1,0,0,1,-20,-20)') +// +// var extracted = (new SVG.Matrix(10,0,0,10,20,20)).extract() +// trans.undo(extracted) +// expect(trans._undo.toString()).toEqual('matrix(1,0,0,1,-2,-2)') +// +// var extracted = (new SVG.Matrix(10,50,50,30,20,20)).extract() +// trans.undo(extracted) +// expect(trans._undo.e).toBeCloseTo(-extracted.transformedX) +// expect(trans._undo.f).toBeCloseTo(-extracted.transformedY) +// }) +// }) +// +// describe('at', function() { +// it('creates a matrix at a certain position', function() { +// expect(trans.at(0.3).toString()).toEqual('matrix(1,0,0,1,30,30)') +// }) +// it('returns the inversed matrix from a specific position when created with inverse flag', function() { +// expect((new SVG.Translate(translated.transform(), true)).at(0.3).toString()).toEqual('matrix(1,0,0,1,-30,-30)') +// }) +// it('returns the resulting transformation which has to be made to set an absolute translation', function() { +// trans.undo(new SVG.Matrix(10,50,50,30,20,20).extract()) +// +// expect(trans.at(0.4).a).toEqual(1) +// expect(trans.at(0.4).b).toEqual(0) +// expect(trans.at(0.4).c).toEqual(0) +// expect(trans.at(0.4).d).toEqual(1) +// expect(trans.at(0.4).e).toBeCloseTo(100 * 0.4 + trans._undo.e * 0.4) +// expect(trans.at(0.4).f).toBeCloseTo(100 * 0.4 + trans._undo.f * 0.4) +// }) +// }) +// }) +// +// describe('SVG.Rotate', function() { +// var trans +// +// beforeEach(function(){ +// trans = new SVG.Rotate(45, 50, 50) +// }) +// +// +// it('creates an object of type SVG.Transformation', function() { +// expect(trans instanceof SVG.Transformation).toBeTruthy() +// }) +// +// it('uses rotation, cx and cy as arguments', function() { +// expect(trans.arguments).toEqual(['rotation', 'cx', 'cy']) +// }) +// +// it('s method is rotate()', function() { +// expect(trans.method).toEqual('rotate') +// }) +// +// it('sets the necessary parameters at creation', function() { +// expect(trans.rotation).toBe(45) +// expect(trans.cx).toBe(50) +// expect(trans.cy).toBe(50) +// }) +// +// describe('undo', function() { +// it('sets an undo object which holds rotation', function() { +// var extracted = (new SVG.Matrix(1,0,0,1,0,0)).rotate(20, 50, 50).extract() +// trans.undo(extracted) +// expect(trans._undo.rotation).toBeCloseTo(20) +// }) +// }) +// +// describe('at', function() { +// it('creates a matrix at a certain position', function() { +// expect(trans.at(0.3).toString()).toEqual((new SVG.Matrix()).rotate(0.3 * 45, 50, 50).toString()) +// }) +// it('returns the resulting transformation which has to be made to set an absolute translation', function() { +// trans.undo((new SVG.Matrix()).rotate(20, 50, 50).extract()) +// +// expect(trans.at(0.4).a).toBeCloseTo(1,1) +// expect(trans.at(0.4).b).toEqual(jasmine.any(Number)) +// expect(trans.at(0.4).c).toEqual(jasmine.any(Number)) +// expect(trans.at(0.4).d).toBeCloseTo(1,1) +// expect(trans.at(0.4).e).toEqual(jasmine.any(Number)) +// expect(trans.at(0.4).f).toEqual(jasmine.any(Number)) +// }) +// }) +// }) +// +// +// describe('SVG.Scale', function() { +// var trans +// +// beforeEach(function(){ +// trans = new SVG.Scale(2,2,50,50) +// }) +// +// +// it('creates an object of type SVG.Transformation', function() { +// expect(trans instanceof SVG.Transformation).toBeTruthy() +// }) +// +// it('uses scaleX, scaleY, cx and cy as arguments', function() { +// expect(trans.arguments).toEqual(['scaleX', 'scaleY', 'cx', 'cy']) +// }) +// +// it('s method is scale()', function() { +// expect(trans.method).toEqual('scale') +// }) +// +// it('sets the necessary parameters at creation', function() { +// expect(trans.scaleX).toBe(2) +// expect(trans.scaleY).toBe(2) +// expect(trans.cx).toBe(50) +// expect(trans.cy).toBe(50) +// }) +// +// describe('undo', function() { +// it('sets the undo matrix which can undo the translation', function() { +// var extracted = (new SVG.Matrix(4,0,0,4,0,0)).extract() +// trans.undo(extracted) +// expect(trans._undo.toString()).toEqual('matrix(0.25,0,0,0.25,37.5,37.5)') +// +// var extracted = (new SVG.Matrix(10,0,0,10,20,20)).extract() +// trans.undo(extracted) +// expect(trans._undo.a).toBeCloseTo(1/extracted.scaleX) +// expect(trans._undo.d).toBeCloseTo(1/extracted.scaleY) +// expect(trans._undo.e).toBeCloseTo(45) +// expect(trans._undo.f).toBeCloseTo(45) +// +// var extracted = (new SVG.Matrix(10,50,50,30,20,20)).extract() +// trans.undo(extracted) +// expect(trans._undo.a).toBeCloseTo(1/extracted.scaleX) +// expect(trans._undo.d).toBeCloseTo(1/extracted.scaleY) +// }) +// }) +// +// describe('at', function() { +// it('creates a matrix at a certain position', function() { +// expect(trans.at(0.75).toString()).toEqual('matrix(1.75,0,0,1.75,-37.5,-37.5)') +// }) +// it('returns the inversed matrix from a specific position when created with inverse flag', function() { +// var morphed = (new SVG.Scale(scaled.transform(2,2,50,50), true)).at(0.25) +// +// expect(morphed.a).toBeCloseTo(0.8) +// expect(morphed.d).toBeCloseTo(0.8) +// }) +// it('returns the resulting transformation which has to be made to set an absolute translation', function() { +// +// var morphed = trans.undo((new SVG.Matrix(10,0,0,10,0,0)).extract()).at(0.5) +// +// expect(morphed.a).toBeCloseTo(0.6) +// expect(morphed.b).toEqual(0) +// expect(morphed.c).toEqual(0) +// expect(morphed.d).toBeCloseTo(0.6) +// expect(morphed.e).toBeCloseTo(20) +// expect(morphed.f).toBeCloseTo(20) +// }) +// }) +// }) +// +// describe('SVG.Skew', function() { +// var trans +// +// beforeEach(function(){ +// trans = new SVG.Skew(30,-30,50,50) +// }) +// +// +// it('creates an object of type SVG.Transformation', function() { +// expect(trans instanceof SVG.Transformation).toBeTruthy() +// }) +// +// it('uses scaleX, scaleY, cx and cy as arguments', function() { +// expect(trans.arguments).toEqual(['skewX', 'skewY', 'cx', 'cy']) +// }) +// +// it('s method is skew()', function() { +// expect(trans.method).toEqual('skew') +// }) +// +// it('sets the necessary parameters at creation', function() { +// expect(trans.skewX).toBe(30) +// expect(trans.skewY).toBe(-30) +// expect(trans.cx).toBe(50) +// expect(trans.cy).toBe(50) +// }) +// +// describe('undo', function() { +// it('sets the undo matrix which can undo the translation', function() { +// var extracted = (new SVG.Matrix()).skew(90, 90, 0, 0).extract() +// trans.undo(extracted) +// expect(trans._undo.a).toBeCloseTo(0) +// expect(trans._undo.b).toBeCloseTo(0) +// expect(trans._undo.c).toBeCloseTo(0) +// expect(trans._undo.d).toBeCloseTo(0) +// expect(trans._undo.e).toBeCloseTo(50) +// expect(trans._undo.f).toBeCloseTo(50) +// +// var extracted = (new SVG.Matrix(10,0,0,10,20,20)).extract() +// trans.undo(extracted) +// expect(trans._undo.a).toBeCloseTo(1) +// expect(trans._undo.b).toBeCloseTo(0) +// expect(trans._undo.c).toBeCloseTo(0) +// expect(trans._undo.d).toBeCloseTo(1) +// expect(trans._undo.e).toBeCloseTo(0) +// expect(trans._undo.f).toBeCloseTo(0) +// }) +// }) +// +// describe('at', function() { +// it('creates a matrix at a certain position', function() { +// expect(trans.at(0.75)).toEqual((new SVG.Matrix()).morph((new SVG.Matrix()).skew(30, -30, 50, 50)).at(0.75)) +// }) +// it('returns the inversed matrix from a specific position when created with inverse flag', function() { +// var morphed = (new SVG.Scale(skewed.transform(20,-20,50,50), true)).at(0.25) +// +// expect(morphed.a).toBeCloseTo(0.963) +// expect(morphed.b).toBeCloseTo(0) +// expect(morphed.c).toBeCloseTo(0) +// expect(morphed.d).toBeCloseTo(0.963) +// expect(morphed.e).toBeCloseTo(0) +// expect(morphed.f).toBeCloseTo(0) +// }) +// it('returns the resulting transformation which has to be made to set an absolute translation', function() { +// +// var morphed = trans.undo((new SVG.Matrix(10,0,0,10,0,0)).skew(20, 30, 20, 10).extract()).at(0.5) +// +// expect(morphed.a).toBeCloseTo(1.266) +// expect(morphed.b).toBeCloseTo(-0.7310) +// expect(morphed.c).toBeCloseTo(0.1351) +// expect(morphed.d).toBeCloseTo(0.9220) +// expect(morphed.e).toBeCloseTo(-20.05593) +// expect(morphed.f).toBeCloseTo(40.4468) +// }) +// }) +// }) +// }) @@ -596,7 +596,7 @@ SVG.FX = SVG.invent({ // calculates the step for every property and calls block with it eachAt: function () { - var i, len, at + var i, at var self = this var target = this.target() var s = this.situation @@ -630,33 +630,38 @@ SVG.FX = SVG.invent({ // animate initialTransformation which has to be chained if (s.transforms.length) { - // get initial initialTransformation - at = s.initialTransformation - for (i = 0, len = s.transforms.length; i < len; i++) { - // get next transformation in chain - var a = s.transforms[i] - - // multiply matrix directly - if (a instanceof SVG.Matrix) { - if (a.relative) { - at = at.multiply(new SVG.Matrix().morph(a).at(s.ease(this.pos))) - } else { - at = at.morph(a).at(s.ease(this.pos)) - } - continue - } - - // when transformation is absolute we have to reset the needed transformation first - if (!a.relative) { - a.undo(at.extract()) - } - // and reapply it after - at = at.multiply(a.at(s.ease(this.pos))) - } - - // set new matrix on element - target.matrix(at) + // TODO: ANIMATE THE TRANSFORMS + + // // get initial initialTransformation + // at = s.initialTransformation + // for(i = 0, len = s.transforms.length; i < len; i++){ + // + // // get next transformation in chain + // var a = s.transforms[i] + // + // // multiply matrix directly + // if(a instanceof SVG.Matrix){ + // + // if(a.relative){ + // at = at.multiply(new SVG.Matrix().morph(a).at(s.ease(this.pos))) + // }else{ + // at = at.morph(a).at(s.ease(this.pos)) + // } + // continue + // } + // + // // when transformation is absolute we have to reset the needed transformation first + // if(!a.relative) + // a.undo(at.decompose()) + // + // // and reapply it after + // at = at.multiply(a.at(s.ease(this.pos))) + // + // } + // + // // set new matrix on element + // target.matrix(at) } return this diff --git a/src/group.js b/src/group.js index f0d3d8b..dc2b60b 100644 --- a/src/group.js +++ b/src/group.js @@ -9,11 +9,11 @@ SVG.G = SVG.invent({ extend: { // Move over x-axis x: function (x) { - return x == null ? this.transform('x') : this.transform({ x: x - this.x() }, true) + return x == null ? this.transform().e : this.translate(x - this.gbox().x, 0) }, // Move over y-axis y: function (y) { - return y == null ? this.transform('y') : this.transform({ y: y - this.y() }, true) + return y == null ? this.transform().f : this.translate(0, y - this.gbox().y) }, // Move by center over x-axis cx: function (x) { @@ -27,13 +27,13 @@ SVG.G = SVG.invent({ var bbox = this.bbox() var trans = this.transform() - bbox.x += trans.x - bbox.x2 += trans.x - bbox.cx += trans.x + bbox.x += trans.e + bbox.x2 += trans.e + bbox.cx += trans.e - bbox.y += trans.y - bbox.y2 += trans.y - bbox.cy += trans.y + bbox.y += trans.f + bbox.y2 += trans.f + bbox.cy += trans.f return bbox } diff --git a/src/helpers.js b/src/helpers.js index 9a7f47e..5a15bf9 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -109,14 +109,6 @@ function proportionalSize (element, width, height) { } } -// Delta transform point -function deltaTransformPoint (matrix, x, y) { - return { - x: x * matrix.a + y * matrix.c + 0, - y: x * matrix.b + y * matrix.d + 0 - } -} - // Map matrix array to object function arrayToMatrix (a) { return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] } @@ -216,3 +208,7 @@ function idFromReference (url) { // Create matrix array for looping var abcdef = 'abcdef'.split('') + +function closeEnough (a, b, threshold) { + return Math.abs(b - a) < (threshold || 1e-6) +} diff --git a/src/line.js b/src/line.js index 100d625..da0c0ca 100644 --- a/src/line.js +++ b/src/line.js @@ -16,6 +16,7 @@ SVG.Line = SVG.invent({ [ this.attr('x2'), this.attr('y2') ] ]) }, + // Overwrite native plot() method plot: function (x1, y1, x2, y2) { if (x1 == null) { @@ -28,10 +29,12 @@ SVG.Line = SVG.invent({ return this.attr(x1) }, + // Move by left top corner move: function (x, y) { return this.attr(this.array().move(x, y).toLine()) }, + // Set element size to given width and height size: function (width, height) { var p = proportionalSize(this, width, height) diff --git a/src/matrix.js b/src/matrix.js index e823a81..787b06b 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -1,4 +1,4 @@ -/* global abcdef, arrayToMatrix, deltaTransformPoint, parseMatrix */ +/* global abcdef, arrayToMatrix, parseMatrix, closeEnough */ SVG.Matrix = SVG.invent({ // Initialize @@ -24,53 +24,150 @@ SVG.Matrix = SVG.invent({ // Add methods extend: { - // Extract individual transformations - extract: function () { - // find delta transform points - var px = deltaTransformPoint(this, 0, 1) - var py = deltaTransformPoint(this, 1, 0) - var skewX = 180 / Math.PI * Math.atan2(px.y, px.x) - 90 + // Clones this matrix + clone: function () { + return new SVG.Matrix(this) + }, + + // Transform a matrix into another matrix by manipulating the space + transform: function (o) { + // Get all of the parameters required to form the matrix + var flipX = o.flip && (o.flip === 'x' || o.flip === 'both') ? -1 : 1 + var flipY = o.flip && (o.flip === 'y' || o.flip === 'both') ? -1 : 1 + var skewX = o.skew && o.skew.length ? o.skew[0] + : isFinite(o.skew) ? o.skew + : isFinite(o.skewX) ? o.skewX + : 0 + var skewY = o.skew && o.skew.length ? o.skew[1] + : isFinite(o.skew) ? o.skew + : isFinite(o.skewY) ? o.skewY + : 0 + var scaleX = o.scale && o.scale.length ? o.scale[0] * flipX + : isFinite(o.scale) ? o.scale * flipX + : isFinite(o.scaleX) ? o.scaleX * flipX + : flipX + var scaleY = o.scale && o.scale.length ? o.scale[1] * flipY + : isFinite(o.scale) ? o.scale * flipY + : isFinite(o.scaleY) ? o.scaleY * flipY + : flipY + var shear = o.shear || 0 + var theta = o.rotate || 0 + var ox = o.origin && o.origin.length ? o.origin[0] : o.ox || 0 + var oy = o.origin && o.origin.length ? o.origin[1] : o.oy || 0 + var px = o.position && o.position.length ? o.position[0] : o.px + var py = o.position && o.position.length ? o.position[1] : o.py + var tx = o.translate && o.translate.length ? o.translate[0] : o.tx || 0 + var ty = o.translate && o.translate.length ? o.translate[1] : o.ty || 0 + var rx = o.relative && o.relative.length ? o.relative[0] : o.rx || 0 + var ry = o.relative && o.relative.length ? o.relative[1] : o.ry || 0 + var currentTransform = new SVG.Matrix(this) + + // Construct the resulting matrix + var transformer = new SVG.Matrix() + .translate(-ox, -oy) + .scale(scaleX, scaleY) + .skew(skewX, skewY) + .shear(shear) + .rotate(theta) + .translate(ox, oy) + .translate(rx, ry) + .lmultiply(currentTransform) + + // If we want the origin at a particular place, we force it there + if (isFinite(px) && isFinite(py)) { + // Figure out where the origin went and the delta to get there + var p = new SVG.Point(ox - rx, oy - ry).transform(transformer) + var dx = px - p.x + var dy = py - p.y + + // Apply another translation + transformer = transformer.translate(dx, dy) + } + + // We can apply translations after everything else + transformer = transformer.translate(tx, ty) + return transformer + }, + + // Applies a matrix defined by its affine parameters + compose: function (o) { + // Get the parameters + var sx = o.scaleX || 1 + var sy = o.scaleY || 1 + var lam = o.shear || 0 + var theta = o.rotate || 0 + var tx = o.translateX || 0 + var ty = o.translateY || 0 + + // Apply the standard matrix + var result = new SVG.Matrix() + .scale(sx, sy) + .shear(lam) + .rotate(theta) + .translate(tx, ty) + .lmultiply(this) + return result + }, + + // Decomposes this matrix into its affine parameters + decompose: function () { + // Get the parameters from the matrix + var a = this.a + var b = this.b + var c = this.c + var d = this.d + var e = this.e + var f = this.f + + // Figure out if the winding direction is clockwise or counterclockwise + var determinant = a * d - b * c + var ccw = determinant > 0 ? 1 : -1 + + // Since we only shear in x, we can use the x basis to get the x scale + // and the rotation of the resulting matrix + var sx = ccw * Math.sqrt(a * a + b * b) + var theta = 180 / Math.PI * Math.atan2(ccw * b, ccw * a) + + // We can then solve the y basis vector simultaneously to get the other + // two affine parameters directly from these parameters + var lam = (a * c + b * d) / determinant + var sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a)) + + // Construct the decomposition and return it return { - // translation - x: this.e, - y: this.f, - transformedX: (this.e * Math.cos(skewX * Math.PI / 180) + this.f * Math.sin(skewX * Math.PI / 180)) / Math.sqrt(this.a * this.a + this.b * this.b), - transformedY: (this.f * Math.cos(skewX * Math.PI / 180) + this.e * Math.sin(-skewX * Math.PI / 180)) / Math.sqrt(this.c * this.c + this.d * this.d), - // skew - skewX: -skewX, - skewY: 180 / Math.PI * Math.atan2(py.y, py.x), - // scale - scaleX: Math.sqrt(this.a * this.a + this.b * this.b), - scaleY: Math.sqrt(this.c * this.c + this.d * this.d), - // rotation - rotation: skewX, + // Return the affine parameters + scaleX: sx, + scaleY: sy, + shear: lam, + rotate: theta, + translateX: e, + translateY: f, + + // Return the matrix parameters + matrix: new SVG.Matrix(this), a: this.a, b: this.b, c: this.c, d: this.d, e: this.e, - f: this.f, - matrix: new SVG.Matrix(this) + f: this.f } }, - // Clone matrix - clone: function () { - return new SVG.Matrix(this) - }, + // Morph one matrix into another morph: function (matrix) { - // store new destination + // Store new destination this.destination = new SVG.Matrix(matrix) - return this }, + // Get morphed matrix at a given position at: function (pos) { - // make sure a destination is defined + // Make sure a destination is defined if (!this.destination) return this - // calculate morphed matrix at a given position + // Calculate morphed matrix at a given position var matrix = new SVG.Matrix({ a: this.a + (this.destination.a - this.a) * pos, b: this.b + (this.destination.b - this.b) * pos, @@ -82,21 +179,47 @@ SVG.Matrix = SVG.invent({ return matrix }, - // Multiplies by given matrix + + // Left multiplies by the given matrix multiply: function (matrix) { - return new SVG.Matrix(this.native().multiply(parseMatrix(matrix).native())) + // Get the matrices + var l = this + var r = parseMatrix(matrix) + + // Work out the product directly + var a = l.a * r.a + l.c * r.b + var b = l.b * r.a + l.d * r.b + var c = l.a * r.c + l.c * r.d + var d = l.b * r.c + l.d * r.d + var e = l.e + l.a * r.e + l.c * r.f + var f = l.f + l.b * r.e + l.d * r.f + + // Form the matrix and return it + var product = new SVG.Matrix(a, b, c, d, e, f) + return product }, + + lmultiply: function (matrix) { + var l = parseMatrix(matrix) + return l.multiply(this) + }, + // Inverses matrix inverse: function () { return new SVG.Matrix(this.native().inverse()) }, + // Translate matrix translate: function (x, y) { - return new SVG.Matrix(this.native().translate(x || 0, y || 0)) + var translation = new SVG.Matrix(this) + translation.e += x || 0 + translation.f += y || 0 + return translation }, + // Scale matrix scale: function (x, y, cx, cy) { - // support uniformal scale + // Support uniform scaling if (arguments.length === 1) { y = x } else if (arguments.length === 3) { @@ -105,22 +228,38 @@ SVG.Matrix = SVG.invent({ y = x } - return this.around(cx, cy, new SVG.Matrix(x, 0, 0, y, 0, 0)) + // Rotate the current matrix + var scale = new SVG.Matrix(x, 0, 0, y, 0, 0) + var matrix = this.around(cx, cy, scale) + return matrix }, + // Rotate matrix rotate: function (r, cx, cy) { - // convert degrees to radians + // Convert degrees to radians r = SVG.utils.radians(r) - return this.around(cx, cy, new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0)) + // Construct the rotation matrix + var rotation = new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0) + var matrix = this.around(cx, cy, rotation) + return matrix }, + // Flip matrix on x or y, at a given offset - flip: function (a, o) { - return a === 'x' ? this.scale(-1, 1, o, 0) - : a === 'y' ? this.scale(1, -1, 0, o) - : this.scale(-1, -1, a, o != null ? o : a) + flip: function (axis, around) { + return axis === 'x' ? this.scale(-1, 1, around, 0) + : axis === 'y' ? this.scale(1, -1, 0, around) + : this.scale(-1, -1, axis, around || axis) // Define an x, y flip point }, - // Skew + + // Shear matrix + shear: function (a, cx, cy) { + var shear = new SVG.Matrix(1, 0, a, 1, 0, 0) + var matrix = this.around(cx, cy, shear) + return matrix + }, + + // Skew Matrix skew: function (x, y, cx, cy) { // support uniformal skew if (arguments.length === 1) { @@ -131,27 +270,33 @@ SVG.Matrix = SVG.invent({ y = x } - // convert degrees to radians + // Convert degrees to radians x = SVG.utils.radians(x) y = SVG.utils.radians(y) - return this.around(cx, cy, new SVG.Matrix(1, Math.tan(y), Math.tan(x), 1, 0, 0)) + // Construct the matrix + var skew = new SVG.Matrix(1, Math.tan(y), Math.tan(x), 1, 0, 0) + var matrix = this.around(cx, cy, skew) + return matrix }, + // SkewX skewX: function (x, cx, cy) { return this.skew(x, 0, cx, cy) }, + // SkewY skewY: function (y, cx, cy) { return this.skew(0, y, cx, cy) }, + // Transform around a center point around: function (cx, cy, matrix) { - return this - .multiply(new SVG.Matrix(1, 0, 0, 1, cx || 0, cy || 0)) - .multiply(matrix) - .multiply(new SVG.Matrix(1, 0, 0, 1, -cx || 0, -cy || 0)) + var dx = cx || 0 + var dy = cy || 0 + return this.translate(-dx, -dy).lmultiply(matrix).translate(dx, dy) }, + // Convert to native SVGMatrix native: function () { // create new matrix @@ -164,6 +309,15 @@ SVG.Matrix = SVG.invent({ return matrix }, + + // Check if two matrices are equal + equals: function (other) { + var comp = parseMatrix(other) + return closeEnough(this.a, comp.a) && closeEnough(this.b, comp.b) && + closeEnough(this.c, comp.c) && closeEnough(this.d, comp.d) && + closeEnough(this.e, comp.e) && closeEnough(this.f, comp.f) + }, + // Convert matrix to string toString: function () { return 'matrix(' + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ')' diff --git a/src/point.js b/src/point.js index 682092e..afb972f 100644 --- a/src/point.js +++ b/src/point.js @@ -22,13 +22,14 @@ SVG.Point = SVG.invent({ clone: function () { return new SVG.Point(this) }, + // Morph one point into another morph: function (x, y) { // store new destination this.destination = new SVG.Point(x, y) - return this }, + // Get morphed point at a given position at: function (pos) { // make sure a destination is defined @@ -39,9 +40,9 @@ SVG.Point = SVG.invent({ x: this.x + (this.destination.x - this.x) * pos, y: this.y + (this.destination.y - this.y) * pos }) - return point }, + // Convert to native SVGPoint native: function () { // create new point @@ -50,9 +51,9 @@ SVG.Point = SVG.invent({ // update with current values point.x = this.x point.y = this.y - return point }, + // transform point with matrix transform: function (matrix) { return new SVG.Point(this.native().matrixTransform(matrix.native())) @@ -66,5 +67,4 @@ SVG.extend(SVG.Element, { point: function (x, y) { return new SVG.Point(x, y).transform(this.screenCTM().inverse()) } - }) diff --git a/src/sugar.js b/src/sugar.js index c3a3332..7a64a76 100644 --- a/src/sugar.js +++ b/src/sugar.js @@ -34,47 +34,73 @@ var sugar = { }) SVG.extend([SVG.Element, SVG.FX], { + // Let the user set the matrix directly + matrix: function (mat, b, c, d, e, f) { + var matrix = new SVG.Matrix(arguments.length > 1 ? [mat, b, c, d, e, f] : mat) + return this.attr('transform', matrix) + }, + // Map rotation to transform - rotate: function (d, cx, cy) { - return this.transform({ rotation: d, cx: cx, cy: cy }) + rotate: function (angle, cx, cy) { + return this.transform({rotate: angle, origin: [cx, cy]}, true) }, + // Map skew to transform skew: function (x, y, cx, cy) { return arguments.length === 1 || arguments.length === 3 - ? this.transform({ skew: x, cx: y, cy: cx }) - : this.transform({ skewX: x, skewY: y, cx: cx, cy: cy }) + ? this.transform({skew: x, origin: [y, cx]}, true) + : this.transform({skew: [x, y], origin: [cx, cy]}, true) + }, + + shear: function (lam, cx, cy) { + return this.transform({shear: lam, origin: [cx, cy]}, true) }, + // Map scale to transform scale: function (x, y, cx, cy) { return arguments.length === 1 || arguments.length === 3 - ? this.transform({ scale: x, cx: y, cy: cx }) - : this.transform({ scaleX: x, scaleY: y, cx: cx, cy: cy }) + ? this.transform({ scale: x, origin: [y, cx] }, true) + : this.transform({ scale: [x, y], origin: [cx, cy] }, true) }, + // Map translate to transform translate: function (x, y) { - return this.transform({ x: x, y: y }) + return this.transform({ translate: [x, y] }, true) }, - // Map flip to transform - flip: function (a, o) { - o = typeof a === 'number' ? a : o - return this.transform({ flip: a || 'both', offset: o }) + + // Map relative translations to transform + relative: function (x, y) { + return this.transform({ relative: [x, y] }, true) }, - // Map matrix to transform - matrix: function (m) { - return this.attr('transform', new SVG.Matrix(arguments.length === 6 ? [].slice.call(arguments) : m)) + + // Map flip to transform + flip: function (direction, around) { + var directionString = typeof direction === 'string' ? direction + : isFinite(direction) ? 'both' + : 'both' + var origin = (direction === 'both' && isFinite(around)) ? [around, around] + : (direction === 'x') ? [around, 0] + : (direction === 'y') ? [0, around] + : isFinite(direction) ? [direction, direction] + : [0, 0] + this.transform({flip: directionString, origin: origin}, true) }, + // Opacity opacity: function (value) { return this.attr('opacity', value) }, + // Relative move over x axis dx: function (x) { return this.x(new SVG.Number(x).plus(this instanceof SVG.FX ? 0 : this.x()), true) }, + // Relative move over y axis dy: function (y) { return this.y(new SVG.Number(y).plus(this instanceof SVG.FX ? 0 : this.y()), true) }, + // Relative move over x and y axes dmove: function (x, y) { return this.dx(x).dy(y) diff --git a/src/transform.js b/src/transform.js index 54e9900..0f6d775 100644 --- a/src/transform.js +++ b/src/transform.js @@ -1,195 +1,11 @@ -/* global ensureCentre, capitalize, arrayToMatrix */ - -SVG.extend(SVG.Element, { - // Add transformations - transform: function (o, relative) { - // get target in case of the fx module, otherwise reference this - var target = this - var matrix, bbox - - // act as a getter - if (typeof o !== 'object') { - // get current matrix - matrix = new SVG.Matrix(target).extract() - - return typeof o === 'string' ? matrix[o] : matrix - } - - // get current matrix - matrix = new SVG.Matrix(target) - - // ensure relative flag - relative = !!relative || !!o.relative - - // act on matrix - if (o.a != null) { - matrix = relative - ? matrix.multiply(new SVG.Matrix(o)) - : new SVG.Matrix(o) - - // act on rotation - } else if (o.rotation != null) { - // ensure centre point - ensureCentre(o, target) - - // apply transformation - matrix = relative - ? matrix.rotate(o.rotation, o.cx, o.cy) - : matrix.rotate(o.rotation - matrix.extract().rotation, o.cx, o.cy) - - // act on scale - } else if (o.scale != null || o.scaleX != null || o.scaleY != null) { - // ensure centre point - ensureCentre(o, target) - - // ensure scale values on both axes - o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 - o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 - - if (!relative) { - // absolute; multiply inversed values - var e = matrix.extract() - o.scaleX = o.scaleX * 1 / e.scaleX - o.scaleY = o.scaleY * 1 / e.scaleY - } - - matrix = matrix.scale(o.scaleX, o.scaleY, o.cx, o.cy) - - // act on skew - } else if (o.skew != null || o.skewX != null || o.skewY != null) { - // ensure centre point - ensureCentre(o, target) - - // ensure skew values on both axes - o.skewX = o.skew != null ? o.skew : o.skewX != null ? o.skewX : 0 - o.skewY = o.skew != null ? o.skew : o.skewY != null ? o.skewY : 0 - - if (!relative) { - // absolute; reset skew values - var el = matrix.extract() - matrix = matrix.multiply(new SVG.Matrix().skew(el.skewX, el.skewY, el.cx, el.cy).inverse()) - } - - matrix = matrix.skew(o.skewX, o.skewY, o.cx, o.cy) - - // act on flip - } else if (o.flip) { - if (o.flip === 'x' || o.flip === 'y') { - o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset - } else { - if (o.offset == null) { - bbox = target.bbox() - o.flip = bbox.cx - o.offset = bbox.cy - } else { - o.flip = o.offset - } - } - - matrix = new SVG.Matrix().flip(o.flip, o.offset) - - // act on translate - } else if (o.x != null || o.y != null) { - if (relative) { - // relative - matrix = matrix.translate(o.x, o.y) - } else { - // absolute - if (o.x != null) matrix.e = o.x - if (o.y != null) matrix.f = o.y - } - } - - return this.attr('transform', matrix) - } -}) - -SVG.extend(SVG.FX, { - transform: function (o, relative) { - // get target in case of the fx module, otherwise reference this - var target = this.target() - var matrix, bbox - - // act as a getter - if (typeof o !== 'object') { - // get current matrix - matrix = new SVG.Matrix(target).extract() - return typeof o === 'string' ? matrix[o] : matrix - } - - // ensure relative flag - relative = !!relative || !!o.relative - - // act on matrix - if (o.a != null) { - matrix = new SVG.Matrix(o) - - // act on rotation - } else if (o.rotation != null) { - // ensure centre point - ensureCentre(o, target) - - // apply transformation - matrix = new SVG.Rotate(o.rotation, o.cx, o.cy) - - // act on scale - } else if (o.scale != null || o.scaleX != null || o.scaleY != null) { - // ensure centre point - ensureCentre(o, target) - - // ensure scale values on both axes - o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 - o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 - - matrix = new SVG.Scale(o.scaleX, o.scaleY, o.cx, o.cy) - - // act on skew - } else if (o.skewX != null || o.skewY != null) { - // ensure centre point - ensureCentre(o, target) - - // ensure skew values on both axes - o.skewX = o.skewX != null ? o.skewX : 0 - o.skewY = o.skewY != null ? o.skewY : 0 - - matrix = new SVG.Skew(o.skewX, o.skewY, o.cx, o.cy) - - // act on flip - } else if (o.flip) { - if (o.flip === 'x' || o.flip === 'y') { - o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset - } else { - if (o.offset == null) { - bbox = target.bbox() - o.flip = bbox.cx - o.offset = bbox.cy - } else { - o.flip = o.offset - } - } - - matrix = new SVG.Matrix().flip(o.flip, o.offset) - - // act on translate - } else if (o.x != null || o.y != null) { - matrix = new SVG.Translate(o.x, o.y) - } - - if (!matrix) return this - - matrix.relative = relative - - this.last().transforms.push(matrix) - - return this._callStart() - } -}) +/* global arrayToMatrix */ SVG.extend(SVG.Element, { // Reset all transformations untransform: function () { return this.attr('transform', null) }, + // merge the whole transformation chain into one matrix and returns it matrixify: function () { var matrix = (this.attr('transform') || '') @@ -197,16 +13,23 @@ SVG.extend(SVG.Element, { .split(SVG.regex.transforms).slice(0, -1).map(function (str) { // generate key => value pairs var kv = str.trim().split('(') - return [kv[0], kv[1].split(SVG.regex.delimiter).map(function (str) { return parseFloat(str) })] + return [kv[0], + kv[1].split(SVG.regex.delimiter) + .map(function (str) { return parseFloat(str) }) + ] }) + .reverse() // merge every transformation into one matrix .reduce(function (matrix, transform) { - if (transform[0] === 'matrix') return matrix.multiply(arrayToMatrix(transform[1])) + if (transform[0] === 'matrix') { + return matrix.lmultiply(arrayToMatrix(transform[1])) + } return matrix[transform[0]].apply(matrix, transform[1]) }, new SVG.Matrix()) return matrix }, + // add an element to another parent without changing the visual representation on the screen toParent: function (parent) { if (this === parent) return this @@ -217,143 +40,341 @@ SVG.extend(SVG.Element, { return this }, + // same as above with parent equals root-svg toDoc: function () { return this.toParent(this.doc()) } - }) -SVG.Transformation = SVG.invent({ - - create: function (source, inversed) { - if (arguments.length > 1 && typeof inversed !== 'boolean') { - return this.constructor.bind(this)([].slice.call(arguments)) - } +SVG.extend(SVG.Element, { - var i, len - if (Array.isArray(source)) { - for (i = 0, len = this.arguments.length; i < len; ++i) { - this[this.arguments[i]] = source[i] - } - } else if (typeof source === 'object') { - for (i = 0, len = this.arguments.length; i < len; ++i) { - this[this.arguments[i]] = source[this.arguments[i]] + // Add transformations + transform: function (o, cyOrRel) { + // Get the bounding box of the element with no transformations applied + var bbox = this.bbox() + + // Act as a getter if no object was passed + if (o == null || typeof o === 'string') { + var decomposed = new SVG.Matrix(this).decompose() + return decomposed[o] || decomposed + + // Let the user pass in a matrix as well + } else if (o.a != null) { + // Construct a matrix from the first parameter + var matrix = new SVG.Matrix(o) + + // If we have a relative matrix, we just apply the old matrix + if (cyOrRel != null) { + var oldMatrix = new SVG.Matrix(this) + matrix = matrix.multiply(oldMatrix) } - } - - this.inversed = false - if (inversed === true) { - this.inversed = true + // Apply the matrix directly + return this.attr('transform', matrix) + + // Allow the user to define the origin with a string + } else if (typeof o.origin === 'string' || + (o.origin == null && o.ox == null && o.oy == null) + ) { + // Get the bounding box and string to use in our calculations + var string = typeof o.origin === 'string' + ? o.origin.toLowerCase().trim() + : 'center' // We want the center by default + var height = bbox.height + var width = bbox.width + var x = bbox.x + var y = bbox.y + + // Set the bounds eg : "bottom-left", "Top right", "middle" etc... + o.ox = string.includes('left') ? x + : string.includes('right') ? x + width + : x + width / 2 + o.oy = string.includes('top') ? y + : string.includes('bottom') ? y + height + : y + height / 2 + + // Make sure we only pass ox and oy + o.origin = null } - }, - extend: { - - arguments: [], - method: '', - - at: function (pos) { - var params = [] - - for (var i = 0, len = this.arguments.length; i < len; ++i) { - params.push(this[this.arguments[i]]) - } - - var m = this._undo || new SVG.Matrix() - - m = new SVG.Matrix().morph(SVG.Matrix.prototype[this.method].apply(m, params)).at(pos) - - return this.inversed ? m.inverse() : m - }, - - undo: function (o) { - for (var i = 0, len = this.arguments.length; i < len; ++i) { - o[this.arguments[i]] = typeof this[this.arguments[i]] === 'undefined' ? 0 : o[this.arguments[i]] - } - - // The method SVG.Matrix.extract which was used before calling this - // method to obtain a value for the parameter o doesn't return a cx and - // a cy so we use the ones that were provided to this object at its creation - o.cx = this.cx - o.cy = this.cy - - this._undo = new SVG[capitalize(this.method)](o, true).at(1) - return this - } + // The user can pass a boolean, an SVG.Element or an SVG.Matrix or nothing + var result = new SVG.Matrix(cyOrRel === true ? this : cyOrRel).transform(o) + var matrixString = result.toString() + // Apply the result directly to this matrix + return this.attr('transform', matrixString) } - }) -SVG.Translate = SVG.invent({ - - parent: SVG.Matrix, - inherit: SVG.Transformation, - - create: function (source, inversed) { - this.constructor.apply(this, [].slice.call(arguments)) - }, - - extend: { - arguments: ['transformedX', 'transformedY'], - method: 'translate' - } - -}) - -SVG.Rotate = SVG.invent({ - - parent: SVG.Matrix, - inherit: SVG.Transformation, - - create: function (source, inversed) { - this.constructor.apply(this, [].slice.call(arguments)) - }, - - extend: { - arguments: ['rotation', 'cx', 'cy'], - method: 'rotate', - at: function (pos) { - var m = new SVG.Matrix().rotate(new SVG.Number().morph(this.rotation - (this._undo ? this._undo.rotation : 0)).at(pos), this.cx, this.cy) - return this.inversed ? m.inverse() : m - }, - undo: function (o) { - this._undo = o - return this - } - } - -}) - -SVG.Scale = SVG.invent({ - - parent: SVG.Matrix, - inherit: SVG.Transformation, - - create: function (source, inversed) { - this.constructor.apply(this, [].slice.call(arguments)) - }, +SVG.extend(SVG.FX, { + transform: function (o, relative) { - extend: { - arguments: ['scaleX', 'scaleY', 'cx', 'cy'], - method: 'scale' + // // get target in case of the fx module, otherwise reference this + // var target = this.target() + // , matrix, bbox + // + // // act as a getter + // if (typeof o !== 'object') { + // // get current matrix + // matrix = new SVG.Matrix(target).extract() + // + // return typeof o === 'string' ? matrix[o] : matrix + // } + // + // // ensure relative flag + // relative = !!relative || !!o.relative + // + // // act on matrix + // if (o.a != null) { + // matrix = new SVG.Matrix(o) + // + // // act on rotation + // } else if (o.rotation != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // apply transformation + // matrix = new SVG.Rotate(o.rotation, o.cx, o.cy) + // + // // act on scale + // } else if (o.scale != null || o.scaleX != null || o.scaleY != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // ensure scale values on both axes + // o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 + // o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 + // + // matrix = new SVG.Scale(o.scaleX, o.scaleY, o.cx, o.cy) + // + // // act on skew + // } else if (o.skewX != null || o.skewY != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // ensure skew values on both axes + // o.skewX = o.skewX != null ? o.skewX : 0 + // o.skewY = o.skewY != null ? o.skewY : 0 + // + // matrix = new SVG.Skew(o.skewX, o.skewY, o.cx, o.cy) + // + // // act on flip + // } else if (o.flip) { + // if(o.flip == 'x' || o.flip == 'y') { + // o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset + // } else { + // if(o.offset == null) { + // bbox = target.bbox() + // o.flip = bbox.cx + // o.offset = bbox.cy + // } else { + // o.flip = o.offset + // } + // } + // + // matrix = new SVG.Matrix().flip(o.flip, o.offset) + // + // // act on translate + // } else if (o.x != null || o.y != null) { + // matrix = new SVG.Translate(o.x, o.y) + // } + // + // if(!matrix) return this + // + // matrix.relative = relative + // + // this.last().transforms.push(matrix) + // + // return this._callStart() + // } + // // ensure scale values on both axes + // o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1 + // o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1 + // + // matrix = new SVG.Scale(o.scaleX, o.scaleY, o.cx, o.cy) + // + // // act on skew + // } else if (o.skewX != null || o.skewY != null) { + // // ensure centre point + // ensureCentre(o, target) + // + // // ensure skew values on both axes + // o.skewX = o.skewX != null ? o.skewX : 0 + // o.skewY = o.skewY != null ? o.skewY : 0 + // + // matrix = new SVG.Skew(o.skewX, o.skewY, o.cx, o.cy) + // + // // act on flip + // } else if (o.flip) { + // if (o.flip === 'x' || o.flip === 'y') { + // o.offset = o.offset == null ? target.bbox()['c' + o.flip] : o.offset + // } else { + // if (o.offset == null) { + // bbox = target.bbox() + // o.flip = bbox.cx + // o.offset = bbox.cy + // } else { + // o.flip = o.offset + // } + // } + // + // matrix = new SVG.Matrix().flip(o.flip, o.offset) + // + // // act on translate + // } else if (o.x != null || o.y != null) { + // matrix = new SVG.Translate(o.x, o.y) + // } + // + // if (!matrix) return this + // + // matrix.relative = relative + // + // this.last().transforms.push(matrix) + // + // return this._callStart() } - }) -SVG.Skew = SVG.invent({ - - parent: SVG.Matrix, - inherit: SVG.Transformation, - - create: function (source, inversed) { - this.constructor.apply(this, [].slice.call(arguments)) - }, - - extend: { - arguments: ['skewX', 'skewY', 'cx', 'cy'], - method: 'skew' - } -}) +// TODO: DESTROY +// ======= +// +// +// SVG.Transformation = SVG.invent({ +// +// create: function(source, inversed){ +// +// if(arguments.length > 1 && typeof inversed != 'boolean'){ +// return this.constructor.call(this, [].slice.call(arguments)) +// } +// +// if(Array.isArray(source)){ +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// this[this.arguments[i]] = source[i] +// } +// } else if(typeof source == 'object'){ +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// this[this.arguments[i]] = source[this.arguments[i]] +// } +// } +// +// this.inversed = false +// +// if(inversed === true){ +// this.inversed = true +// } +// +// } +// +// , extend: { +// +// arguments: [] +// , method: '' +// +// , at: function(pos){ +// +// var params = [] +// +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// params.push(this[this.arguments[i]]) +// } +// +// var m = this._undo || new SVG.Matrix() +// +// m = new SVG.Matrix().morph(SVG.Matrix.prototype[this.method].apply(m, params)).at(pos) +// +// return this.inversed ? m.inverse() : m +// +// } +// +// , undo: function(o){ +// for(var i = 0, len = this.arguments.length; i < len; ++i){ +// o[this.arguments[i]] = typeof this[this.arguments[i]] == 'undefined' ? 0 : o[this.arguments[i]] +// } +// +// // The method SVG.Matrix.extract which was used before calling this +// // method to obtain a value for the parameter o doesn't return a cx and +// // a cy so we use the ones that were provided to this object at its creation +// o.cx = this.cx +// o.cy = this.cy +// +// this._undo = new SVG[capitalize(this.method)](o, true).at(1) +// +// return this +// } +// +// } +// +// }) +// +// SVG.Translate = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['transformedX', 'transformedY'] +// , method: 'translate' +// } +// +// }) +// +// SVG.Rotate = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['rotation', 'cx', 'cy'] +// , method: 'rotate' +// , at: function(pos){ +// var m = new SVG.Matrix().rotate(new SVG.Number().morph(this.rotation - (this._undo ? this._undo.rotation : 0)).at(pos), this.cx, this.cy) +// return this.inversed ? m.inverse() : m +// } +// , undo: function(o){ +// this._undo = o +// return this +// } +// } +// +// }) +// +// SVG.Scale = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['scaleX', 'scaleY', 'cx', 'cy'] +// , method: 'scale' +// } +// +// }) +// +// SVG.Skew = SVG.invent({ +// +// parent: SVG.Matrix +// , inherit: SVG.Transformation +// +// , create: function(source, inversed){ +// this.constructor.apply(this, [].slice.call(arguments)) +// } +// +// , extend: { +// arguments: ['skewX', 'skewY', 'cx', 'cy'] +// , method: 'skew' +// } +// +// }) diff --git a/src/utilities.js b/src/utilities.js index 5ebe808..01b8ba5 100644 --- a/src/utilities.js +++ b/src/utilities.js @@ -1,3 +1,4 @@ + SVG.utils = { // Map function map: function (array, block) { |