diff --git a/src/svgpathplayer.jsx b/src/svgpathplayer.jsx index f856b1a..1dddc55 100644 --- 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 index 6354a94..2d022d2 100644 --- 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('')); + 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('')); + 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('')); + 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('')); + 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('')); expect(component.state.mode).to.equal('path');