fix transit and burst size calculations

mojs · Feb 18, 2015 · d2d882a · d2d882a
1 parent 7f36758
commit d2d882a
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 59 deletions.
diff --git a/dist/burst.js b/dist/burst.js
@@ -221,7 +221,7 @@ Burst = (function(_super) {
   };
 
   Burst.prototype.calcSize = function() {
-    var i, largestSize, selfSize, selfSizeX, selfSizeY, transit, _i, _len, _ref;
+    var i, largestSize, radius, transit, _i, _len, _ref;
     largestSize = -1;
     _ref = this.transits;
     for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
@@ -231,11 +231,8 @@ Burst = (function(_super) {
         largestSize = transit.props.size;
       }
     }
-    selfSize = this.deltas.radius != null ? Math.max(Math.abs(this.deltas.radius.end), Math.abs(this.deltas.radius.start)) : this.props.radius != null ? parseFloat(this.props.radius) : 0;
-    selfSizeX = this.deltas.radiusX != null ? Math.max(Math.abs(this.deltas.radiusX.end), Math.abs(this.deltas.radiusX.start)) : this.props.radiusX != null ? parseFloat(this.props.radiusX) : 0;
-    selfSizeY = this.deltas.radiusY != null ? Math.max(Math.abs(this.deltas.radiusY.end), Math.abs(this.deltas.radiusY.start)) : this.props.radiusY != null ? parseFloat(this.props.radiusY) : 0;
-    selfSize = Math.max(selfSize, selfSizeX, selfSizeY);
-    this.props.size = largestSize + 2 * selfSize;
+    radius = this.calcMaxRadius();
+    this.props.size = largestSize + 2 * radius;
     this.props.center = this.props.size / 2;
     return this.addBitOptions();
   };

diff --git a/dist/mojs.js b/dist/mojs.js
@@ -597,7 +597,7 @@ Burst = (function(_super) {
   };
 
   Burst.prototype.calcSize = function() {
-    var i, largestSize, selfSize, selfSizeX, selfSizeY, transit, _i, _len, _ref;
+    var i, largestSize, radius, transit, _i, _len, _ref;
     largestSize = -1;
     _ref = this.transits;
     for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
@@ -607,11 +607,8 @@ Burst = (function(_super) {
         largestSize = transit.props.size;
       }
     }
-    selfSize = this.deltas.radius != null ? Math.max(Math.abs(this.deltas.radius.end), Math.abs(this.deltas.radius.start)) : this.props.radius != null ? parseFloat(this.props.radius) : 0;
-    selfSizeX = this.deltas.radiusX != null ? Math.max(Math.abs(this.deltas.radiusX.end), Math.abs(this.deltas.radiusX.start)) : this.props.radiusX != null ? parseFloat(this.props.radiusX) : 0;
-    selfSizeY = this.deltas.radiusY != null ? Math.max(Math.abs(this.deltas.radiusY.end), Math.abs(this.deltas.radiusY.start)) : this.props.radiusY != null ? parseFloat(this.props.radiusY) : 0;
-    selfSize = Math.max(selfSize, selfSizeX, selfSizeY);
-    this.props.size = largestSize + 2 * selfSize;
+    radius = this.calcMaxRadius();
+    this.props.size = largestSize + 2 * radius;
     this.props.center = this.props.size / 2;
     return this.addBitOptions();
   };
@@ -2159,15 +2156,11 @@ Transit = (function(_super) {
   };
 
   Transit.prototype.calcSize = function() {
-    var dRadiusX, dRadiusY, dStroke, radius, radiusX, radiusY, stroke;
+    var dStroke, radius, stroke;
     if (this.o.size) {
       return;
     }
-    dRadiusX = this.deltas['radiusX'] || this.deltas['radius'];
-    dRadiusY = this.deltas['radiusY'] || this.deltas['radius'];
-    radiusX = dRadiusX != null ? Math.max(Math.abs(dRadiusX.start), Math.abs(dRadiusX.end)) : this.props.radiusX != null ? this.props.radiusX : this.props.radius;
-    radiusY = dRadiusY != null ? Math.max(Math.abs(dRadiusY.start), Math.abs(dRadiusY.end)) : this.props.radiusY != null ? this.props.radiusY : this.props.radius;
-    radius = Math.max(radiusX, radiusY);
+    radius = this.calcMaxRadius();
     dStroke = this.deltas['strokeWidth'];
     stroke = dStroke != null ? Math.max(Math.abs(dStroke.start), Math.abs(dStroke.end)) : this.props.strokeWidth;
     this.props.size = 2 * radius + 2 * stroke;
@@ -2176,6 +2169,14 @@ Transit = (function(_super) {
     return this.props.center = this.props.size / 2;
   };
 
+  Transit.prototype.calcMaxRadius = function() {
+    var selfSize, selfSizeX, selfSizeY;
+    selfSize = this.deltas.radius != null ? Math.max(Math.abs(this.deltas.radius.end), Math.abs(this.deltas.radius.start)) : this.props.radius != null ? parseFloat(this.props.radius) : 0;
+    selfSizeX = this.deltas.radiusX != null ? Math.max(Math.abs(this.deltas.radiusX.end), Math.abs(this.deltas.radiusX.start)) : this.props.radiusX != null ? this.props.radiusX : selfSize;
+    selfSizeY = this.deltas.radiusY != null ? Math.max(Math.abs(this.deltas.radiusY.end), Math.abs(this.deltas.radiusY.start)) : this.props.radiusY != null ? this.props.radiusY : selfSize;
+    return Math.max(selfSizeX, selfSizeY);
+  };
+
   Transit.prototype.createBit = function() {
     var bitClass;
     bitClass = bitsMap.getBit(this.o.type || this.type);

diff --git a/dist/mojs.min.js b/dist/mojs.min.js
diff --git a/dist/transit.js b/dist/transit.js
@@ -187,15 +187,11 @@ Transit = (function(_super) {
   };
 
   Transit.prototype.calcSize = function() {
-    var dRadiusX, dRadiusY, dStroke, radius, radiusX, radiusY, stroke;
+    var dStroke, radius, stroke;
     if (this.o.size) {
       return;
     }
-    dRadiusX = this.deltas['radiusX'] || this.deltas['radius'];
-    dRadiusY = this.deltas['radiusY'] || this.deltas['radius'];
-    radiusX = dRadiusX != null ? Math.max(Math.abs(dRadiusX.start), Math.abs(dRadiusX.end)) : this.props.radiusX != null ? this.props.radiusX : this.props.radius;
-    radiusY = dRadiusY != null ? Math.max(Math.abs(dRadiusY.start), Math.abs(dRadiusY.end)) : this.props.radiusY != null ? this.props.radiusY : this.props.radius;
-    radius = Math.max(radiusX, radiusY);
+    radius = this.calcMaxRadius();
     dStroke = this.deltas['strokeWidth'];
     stroke = dStroke != null ? Math.max(Math.abs(dStroke.start), Math.abs(dStroke.end)) : this.props.strokeWidth;
     this.props.size = 2 * radius + 2 * stroke;
@@ -204,6 +200,14 @@ Transit = (function(_super) {
     return this.props.center = this.props.size / 2;
   };
 
+  Transit.prototype.calcMaxRadius = function() {
+    var selfSize, selfSizeX, selfSizeY;
+    selfSize = this.deltas.radius != null ? Math.max(Math.abs(this.deltas.radius.end), Math.abs(this.deltas.radius.start)) : this.props.radius != null ? parseFloat(this.props.radius) : 0;
+    selfSizeX = this.deltas.radiusX != null ? Math.max(Math.abs(this.deltas.radiusX.end), Math.abs(this.deltas.radiusX.start)) : this.props.radiusX != null ? this.props.radiusX : selfSize;
+    selfSizeY = this.deltas.radiusY != null ? Math.max(Math.abs(this.deltas.radiusY.end), Math.abs(this.deltas.radiusY.start)) : this.props.radiusY != null ? this.props.radiusY : selfSize;
+    return Math.max(selfSizeX, selfSizeY);
+  };
+
   Transit.prototype.createBit = function() {
     var bitClass;
     bitClass = bitsMap.getBit(this.o.type || this.type);

diff --git a/js/burst.coffee b/js/burst.coffee
@@ -168,21 +168,8 @@ class Burst extends Transit
       transit.calcSize()
       if largestSize < transit.props.size
         largestSize = transit.props.size
-
-    selfSize = if @deltas.radius?
-      Math.max Math.abs(@deltas.radius.end), Math.abs(@deltas.radius.start)
-    else if @props.radius? then parseFloat(@props.radius) else 0
-    selfSizeX = if @deltas.radiusX?
-      Math.max Math.abs(@deltas.radiusX.end), Math.abs(@deltas.radiusX.start)
-    else if @props.radiusX? then parseFloat(@props.radiusX) else 0
-    selfSizeY = if @deltas.radiusY?
-      Math.max Math.abs(@deltas.radiusY.end), Math.abs(@deltas.radiusY.start)
-    else if @props.radiusY? then parseFloat(@props.radiusY) else 0
-
-    selfSize = Math.max selfSize, selfSizeX, selfSizeY
-
-
-    @props.size   = largestSize + 2*selfSize
+    radius = @calcMaxRadius()
+    @props.size   = largestSize + 2*radius
     @props.center = @props.size/2
     @addBitOptions()
   getOption:(i)->

diff --git a/js/transit.coffee b/js/transit.coffee
@@ -137,17 +137,7 @@ class Transit extends bitsMap.map.bit
     @props.transform = "rotate(#{@props.angle},#{@origin.x},#{@origin.y})"
   calcSize:->
     return if @o.size
-
-    dRadiusX = @deltas['radiusX'] or @deltas['radius']
-    dRadiusY = @deltas['radiusY'] or @deltas['radius']
-
-    radiusX = if dRadiusX?
-      Math.max Math.abs(dRadiusX.start), Math.abs(dRadiusX.end)
-    else if @props.radiusX? then @props.radiusX else @props.radius
-    radiusY = if dRadiusY?
-      Math.max Math.abs(dRadiusY.start), Math.abs(dRadiusY.end)
-    else if @props.radiusY? then @props.radiusY else @props.radius
-    radius = Math.max radiusX, radiusY
+    radius = @calcMaxRadius()
 
     dStroke = @deltas['strokeWidth']
     stroke = if dStroke?
@@ -158,6 +148,18 @@ class Transit extends bitsMap.map.bit
     @props.size   += 2*@props.sizeGap
     @props.center = @props.size/2
 
+  calcMaxRadius:->
+    selfSize = if @deltas.radius?
+      Math.max Math.abs(@deltas.radius.end), Math.abs(@deltas.radius.start)
+    else if @props.radius? then parseFloat(@props.radius) else 0
+    selfSizeX = if @deltas.radiusX?
+      Math.max Math.abs(@deltas.radiusX.end), Math.abs(@deltas.radiusX.start)
+    else if @props.radiusX? then @props.radiusX else selfSize
+    selfSizeY = if @deltas.radiusY?
+      Math.max Math.abs(@deltas.radiusY.end), Math.abs(@deltas.radiusY.start)
+    else if @props.radiusY? then @props.radiusY else selfSize
+    Math.max selfSizeX, selfSizeY
+
   createBit:->
     bitClass = bitsMap.getBit(@o.type or @type)
     @bit = new bitClass ctx: @ctx, isDrawLess: true

diff --git a/karma.conf.js b/karma.conf.js
@@ -95,8 +95,8 @@ module.exports = function(config) {
       'dist/mojs.min.js',
       'dist/h.js',
       'spec/h.js',
-      'dist/transit.js',
-      'spec/transit.js',
+      // 'dist/transit.js',
+      // 'spec/transit.js',
       'dist/swirl.js',
       'spec/swirl.js',
       'dist/tween.js',

diff --git a/readme.md b/readme.md
@@ -7,7 +7,6 @@
 
 #### todo
 - burst
-  - fix size calculation based on radiusX/radiusY
   - fix setProgress
   - opacity childOptions to burst
   - add deltas for swirl swirlFrequency and swirlSize
@@ -16,6 +15,7 @@
   - then implementation
 - transit
   - fix show hide on setProgress
+  - fix size calculation based on radiusX/radiusY
 - cover raf polyfill
 - perf profile + refactor
   - elastic easing detection + add to size

diff --git a/spec/burst.coffee b/spec/burst.coffee
@@ -329,15 +329,15 @@ describe 'Burst ->', ->
       expect(burst.props.center).toBe 170
     it 'should calculate size based on largest transit + self radius #3', ->
       burst = new Burst
-        radius: 50, radiusX: 20
+        radius: {20: 50}, radiusX: 20
         childOptions:
           radius:      [{ 20: 50 }, 20]
           strokeWidth: 20
       expect(burst.props.size)  .toBe 240
       expect(burst.props.center).toBe 120
     it 'should calculate size based on largest transit + self radius #4', ->
       burst = new Burst
-        radius: 50, radiusY: 100
+        radius: 50, radiusY: {20: 100}
         childOptions:
           radius:      [{ 20: 50 }, 20]
           strokeWidth: 20

diff --git a/spec/burst.js b/spec/burst.js
@@ -469,7 +469,9 @@
       it('should calculate size based on largest transit + self radius #3', function() {
         var burst;
         burst = new Burst({
-          radius: 50,
+          radius: {
+            20: 50
+          },
           radiusX: 20,
           childOptions: {
             radius: [
@@ -487,7 +489,9 @@
         var burst;
         burst = new Burst({
           radius: 50,
-          radiusY: 100,
+          radiusY: {
+            20: 100
+          },
           childOptions: {
             radius: [
               {

diff --git a/spec/transit.coffee b/spec/transit.coffee
@@ -193,6 +193,36 @@ describe 'Transit ->', ->
         radius:       { 25: -100 }
         strokeWidth:  { 6:  4    }
       expect(byte.props.size).toBe(212)
+
+    it 'should calculate size el size based on radiusX/Y', ->
+      byte = new Byte
+        radius:       { 25: -100 }
+        radiusX:      200
+        strokeWidth:  { 6:  4    }
+      expect(byte.props.size).toBe(412)
+
+    it 'should calculate size el size based on radiusX/Y', ->
+      byte = new Byte
+        radius:       { 25: -100 }
+        radiusX:      200
+        radiusY:      300
+        strokeWidth:  { 6:  4    }
+      expect(byte.props.size).toBe(612)
+
+    it 'should calculate size el size based on radiusX/Y', ->
+      byte = new Byte
+        radius:       { 25: -100 }
+        radiusY:      30
+        strokeWidth:  { 6:  4    }
+      expect(byte.props.size).toBe(212)
+
+    it 'should calculate size el size based on radiusX/Y', ->
+      byte = new Byte
+        radius:       50
+        radiusY:      30
+        strokeWidth:  { 6:  4 }
+      expect(byte.props.size).toBe(112)
+
     it 'should have sizeGap option', ->
       byte = new Byte
         radius:       { 25: -100 }

diff --git a/spec/transit.js b/spec/transit.js
@@ -405,6 +405,57 @@
         });
         return expect(byte.props.size).toBe(212);
       });
+      it('should calculate size el size based on radiusX/Y', function() {
+        var byte;
+        byte = new Byte({
+          radius: {
+            25: -100
+          },
+          radiusX: 200,
+          strokeWidth: {
+            6: 4
+          }
+        });
+        return expect(byte.props.size).toBe(412);
+      });
+      it('should calculate size el size based on radiusX/Y', function() {
+        var byte;
+        byte = new Byte({
+          radius: {
+            25: -100
+          },
+          radiusX: 200,
+          radiusY: 300,
+          strokeWidth: {
+            6: 4
+          }
+        });
+        return expect(byte.props.size).toBe(612);
+      });
+      it('should calculate size el size based on radiusX/Y', function() {
+        var byte;
+        byte = new Byte({
+          radius: {
+            25: -100
+          },
+          radiusY: 30,
+          strokeWidth: {
+            6: 4
+          }
+        });
+        return expect(byte.props.size).toBe(212);
+      });
+      it('should calculate size el size based on radiusX/Y', function() {
+        var byte;
+        byte = new Byte({
+          radius: 50,
+          radiusY: 30,
+          strokeWidth: {
+            6: 4
+          }
+        });
+        return expect(byte.props.size).toBe(112);
+      });
       it('should have sizeGap option', function() {
         var byte;
         byte = new Byte({