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');