svg.js - npm Package Compare versions

Comparing version 2.3.7 to 2.4.0

CHANGELOG.md

@@ -9,2 +9,5 @@ # 3.0.0
 
+# 2.4.0 (14/01/2017)
+- added support for basic path animations (#561)
+
 # 2.3.7 (14/01/2017)
@@ -11,0 +14,0 @@ - moved project to [svgdotjs](https://github.com/svgdotjs)

component.json

@@ -5,3 +5,3 @@ {
   "description": "A lightweight library for manipulating and animating SVG",
-  "version": "2.3.7",
+  "version": "2.4.0",
   "keywords": ["svg"],
@@ -8,0 +8,0 @@ "author": "Wout Fierens <[e-mail]>",

gulpfile.js

@@ -125,2 +125,2 @@ var del     = require('del')
 
-gulp.task('default', ['clean', 'unify', 'minify'])
+gulp.task('default', ['clean', 'unify', 'minify'])

package.json

 {
   "name": "svg.js",
-  "version": "2.3.7",
+  "version": "2.4.0",
   "description": "A lightweight library for manipulating and animating SVG.",
@@ -5,0 +5,0 @@ "url": "https://svgdotjs.github.io/",

spec/spec/array.js

@@ -116,2 +116,89 @@ describe('Array', function () {
 
-})
+  describe('equalCommands()', function() {
+    it('return true if the passed path array use the same commands', function() {
+      var pathArray1 = new SVG.PathArray('m -1500,-478 a 292,195 0 0 1 262,205 l -565,319 c 0,0 -134,-374 51,-251 185,122 251,-273 251,-273 z')
+        , pathArray2 = new SVG.PathArray('m  -680, 527 a 292,195 0 0 1 262,205 l -565,319 c 0,0 -134,-374 51,-251 185,122 251,-273 251,-273 z')
+
+      expect(pathArray1.equalCommands(pathArray2)).toBe(true)
+    })
+    it('return false if the passed path array does not use the same commands', function() {
+      var pathArray1 = new SVG.PathArray('m -1500,-478 a 292,195 0 0 1 262,205   l -565,319 c 0,0 -134,-374 51,-251 185,122 251,-273 251,-273 z')
+        , pathArray2 = new SVG.PathArray('m - 663, 521 c 147,178 118,-25 245,210 l -565,319 c 0,0 -134,-374 51,-251 185,122 268,-278 268,-278 z')
+
+      expect(pathArray1.equalCommands(pathArray2)).toBe(false)
+    })
+  })
+
+  describe('morph()', function() {
+    it('should set the attribute destination to the passed path array when it have the same comands as this path array', function() {
+      var pathArray1 = new SVG.PathArray('m -1500,-478 a 292,195 0 0 1 262,205 l -565,319 c 0,0 -134,-374 51,-251 185,122 251,-273 251,-273 z')
+        , pathArray2 = new SVG.PathArray('m  -680, 527 a 292,195 0 0 1 262,205 l -565,319 c 0,0 -134,-374 51,-251 185,122 251,-273 251,-273 z')
+
+      pathArray1.morph(pathArray2)
+      expect(pathArray1.destination).toEqual(pathArray2)
+    })
+    it('should set the attribute destination to null when the passed path array does not have the same comands as this path array', function() {
+      var pathArray1 = new SVG.PathArray('m -1500,-478 a 292,195 0 0 1 262,205   l -565,319 c 0,0 -134,-374 51,-251 185,122 251,-273 251,-273 z')
+        , pathArray2 = new SVG.PathArray('m - 663, 521 c 147,178 118,-25 245,210 l -565,319 c 0,0 -134,-374 51,-251 185,122 268,-278 268,-278 z')
+
+      pathArray1.morph(pathArray2)
+      expect(pathArray1.destination).toBeNull()
+    })
+  })
+
+  describe('at()', function() {
+    it('returns a morphed path array at a given position', function() {
+      var pathArray1 = new SVG.PathArray("M  63 25 A 15 15 0 0 1  73 40 A 15 15 0 0 1  61 53 C  49 36  50 59  50 59 L  33 55 Z")
+        , pathArray2 = new SVG.PathArray("M 132 40 A 15 15 0 0 1 141 54 A 15 15 0 0 1 130 67 C 118 51 119 73 119 73 L 103 69 Z")
+        , morphedPathArray = pathArray1.morph(pathArray2).at(0.5)
+        , sourceArray = pathArray1.value, destinationArray = pathArray1.destination.value
+        , morphedArray = morphedPathArray.value
+        , i, il, j, jl
+
+      expect(morphedArray.length).toBe(sourceArray.length)
+
+      // For all the commands
+      for(i = 0, il = sourceArray.length; i < il; i++) {
+        // Expect the current command to be the same
+        expect(morphedArray[i][0]).toBe(sourceArray[i][0])
+        expect(morphedArray[i].length).toBe(sourceArray[i].length)
+
+        // For all the parameters of the current command
+        for(j = 1, jl = sourceArray[i].length; j < jl; j++) {
+          expect(morphedArray[i][j]).toBe((sourceArray[i][j] + destinationArray[i][j]) / 2)
+        }
+      }
+    })
+    it('should interpolate flags and booleans as fractions between zero and one, with any non-zero value considered to be a value of one/true', function() {
+      // Only the Elliptical arc command use flags, it has the following form:
+      // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+      var pathArray1 = new SVG.PathArray('M  13 13 A 25 37 0 0 1  43 25')
+        , pathArray2 = new SVG.PathArray('M 101 55 A 25 37 0 1 0 130 67')
+        , morphedPathArray
+
+      pathArray1.morph(pathArray2)
+
+      // The morphedPathArray.value contain 2 commands: [['M', ...], ['A', ...]]
+      // Elliptical arc command in a path 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
+      morphedPathArray = pathArray1.at(0)
+      expect(morphedPathArray.value[1][4]).toBe(0)
+      expect(morphedPathArray.value[1][5]).toBe(1)
+
+      morphedPathArray = pathArray1.at(0.5)
+      expect(morphedPathArray.value[1][4]).toBe(1)
+      expect(morphedPathArray.value[1][5]).toBe(1)
+
+      morphedPathArray = pathArray1.at(1)
+      expect(morphedPathArray.value[1][4]).toBe(1)
+      expect(morphedPathArray.value[1][5]).toBe(0)
+    })
+    it('return itself if the destination attribute is null', function(){
+      var pathArray = new SVG.PathArray('M  13 13 A 25 37 0 0 1  43 25')
+      pathArray.destination = null
+      expect(pathArray.at(0.45)).toBe(pathArray)
+    })
+  })
+
+})

spec/spec/point.js

@@ -28,2 +28,11 @@ describe('Point', function() {
 
+    describe('with only x given', function() {
+      it('creates a point using the given value for both x and y', function() {
+        var point = new SVG.Point(7)
+
+        expect(point.x).toBe(7)
+        expect(point.y).toBe(7)
+      })
+    })
+
     describe('with array given', function() {
@@ -55,3 +64,3 @@ it('creates a point from array', function() {
     })
-    
+
     describe('with native SVGPoint given', function() {
@@ -95,2 +104,10 @@ it('creates a point from native SVGPoint', function() {
     })
+    it('allow passing the point by directly passing its coordinates', function() {
+      var point1 = new SVG.Point(1,1)
+        , point2 = new SVG.Point(2,2)
+
+      point1.morph(point2.x, point2.y)
+
+      expect(point1.destination).toEqual(point2)
+    })
   })
@@ -122,3 +139,2 @@
   })
-
-})
+})

src/patharray.js

@@ -103,2 +103,59 @@ // Path points array
   }
+  // 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
+      , destinationArray = this.destination.value
+      , array = [], pathArray = new SVG.PathArray()
+      , 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
@@ -135,3 +192,3 @@ , parse: function(array) {
       }
-        
+
     }else{
@@ -245,2 +302,2 @@ array = array.reduce(function(prev, curr){
 
-})
+})

src/point.js

@@ -5,3 +5,3 @@ SVG.Point = SVG.invent({
     var i, source, base = {x:0, y:0}
-    
+
     // ensure source as object
@@ -12,4 +12,4 @@ source = Array.isArray(x) ?
       {x:x.x, y:x.y} :
-    y != null ?
-      {x:x, y:y} : base
+    x != null ?
+      {x:x, y:(y != null ? y : x)} : base // If y has no value, then x is used has its value
 
@@ -28,5 +28,5 @@ // merge source
     // Morph one point into another
-  , morph: function(point) {
+  , morph: function(x, y) {
       // store new destination
-      this.destination = new SVG.Point(point)
+      this.destination = new SVG.Point(x, y)
 
@@ -33,0 +33,0 @@ return this

No alert changes

Improved metrics

Total package byte prevSize

806747

1.28%

Lines of code

20870

1.51%

No dependency changes