fix(segments): Corrected calculation of segment number displayed

saschwarz · Jan 10, 2016 · ffa5172 · ffa5172
1 parent 41f8a93
commit ffa5172
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/svgpathplayer.jsx b/src/svgpathplayer.jsx
@@ -153,7 +153,7 @@ export default class SVGPathPlayer extends React.Component {
         }
         if (this.props.segments){
             this.snapSegments = this.svg.selectAll(this.props.segments + ' path');
-            this.segmentLengths = this._segmentLengths();
+            this.segmentLengths = this._calculateSegmentLengths();
             if (this.segmentLengths.length > 0 && !pathLength){
                 pathLength = this._segmentPosition(this.snapSegments.length-1);
             }
@@ -274,7 +274,7 @@ export default class SVGPathPlayer extends React.Component {
                                 (length) => {
                                     return pos >= length;
                                 });
-        x = x < 0 ? 0 : x;
+        x = x < 0 ? 0 : x + 1;
         return x;
     }
 
@@ -306,7 +306,7 @@ export default class SVGPathPlayer extends React.Component {
         this.currentSegment.attr({display: 'block'});
     }
 
-    _segmentLengths(){
+    _calculateSegmentLengths(){
         // total length of path at end of each segment
         return _.reduce(this.snapSegments,
                         (a, v) => {

diff --git a/tests/test_svgpathplayer.js b/tests/test_svgpathplayer.js
@@ -12,6 +12,7 @@ chai.use(spies);
 chai.use(sinonChai);
 var expect = chai.expect;
 
+
 function setupPlayer(props) {
   props = props || {
       svg: 'image.svg',
@@ -98,6 +99,28 @@ describe('Components', () => {
             component.pause();
             expect(component.state.mode).to.equal('path');
         });
+        it('segment length are cumulative', () => {
+            component.loadFile(document.createDocumentFragment('<svg></svg>'));
+            component.snapSegments = [{getTotalLength: () => {return 10}},
+                                      {getTotalLength: () => {return 10}}
+                                     ];
+            expect(component._calculateSegmentLengths()).to.eql([10, 20]);
+        });
+        it('segment position is 0 based before playing', () => {
+            component.loadFile(document.createDocumentFragment('<svg></svg>'));
+            component.segmentLengths = [10.0, 20.0, 30.0];
+            expect(component._segmentFromPosition(0)).to.equal(0);
+        });
+        it('segment position is 1 when past first length', () => {
+            component.loadFile(document.createDocumentFragment('<svg></svg>'));
+            component.segmentLengths = [10.0, 20.0, 30.0];
+            expect(component._segmentFromPosition(10.001)).to.equal(1);
+        });
+        it('segment position is number of segments when past final length', () => {
+            component.loadFile(document.createDocumentFragment('<svg></svg>'));
+            component.segmentLengths = [10.0, 20.0, 30.0];
+            expect(component._segmentFromPosition(30.001)).to.equal(component.segmentLengths.length);
+        });
         it('loading with a path that does not exist succeeds', () => {
             component.loadFile(document.createDocumentFragment('<svg></svg>'));
             expect(component.state.mode).to.equal('path');