callback after nextPoint

Author: arg0navt

lib/components/laeflet-react-track-player/icon/stream.svg

@@ -61,10 +61,18 @@
     background-image: url("./icon/speed.svg");
 }
 
+.tp_button.stream {
+    background-image: url("./icon/stream.svg");
+}
+
 .tp_button:last-child {
     margin-right: 0;
 }
 
+.tp_button:disabled {
+    opacity: .3;
+}
+
 .tp_track-line {
     width: 460px;
     height: 50px;

lib/components/laeflet-react-track-player/index.css

@@ -8,6 +8,8 @@ var _moment = require("moment");
 
 var _moment2 = _interopRequireDefault(_moment);
 
+var _index = require("./index");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 _leaflet2.default.Polyline.include({
@@ -69,7 +71,7 @@ _leaflet2.default.Polyline.include({
     if (!this._snakeLatLngs) this._snakeLatLngs = this._latlngs;
     if (this._snakeLatLngs.length === params.points.length) {
       this.setLatLngs(this._snakeLatLngs);
-      this._snaking = false;
+      if (!params.last) this._snaking = false;
     } else {
       if (params.points.length !== 1) {
         this.setLatLngs(params.points);
@@ -83,8 +85,11 @@ _leaflet2.default.Polyline.include({
   // delete LatLngs, but not remove polyline.
   removePosition: function removePosition() {
     this._play = false;
+    this._now = 0;
+    this._forward = 0;
     this._snakingTime = 0;
     this._snakingDistance = 0;
+    this._snakingVertices = 0;
     this._snaking = false;
     this._path.style.display = "none";
     this.setLatLngs([this._snakeLatLngs[0], this._snakeLatLngs[0]]);
@@ -327,7 +332,7 @@ _leaflet2.default.LayerGroup.include({
   },
 
   // Is is progress for mode progressFormat === "distance"
-  procentProgress: function procentProgress(e, point, progress) {
+  _procentProgress: function _procentProgress(e, point, progress) {
     var _this4 = this;
 
     if (progress) {
@@ -368,7 +373,7 @@ _leaflet2.default.LayerGroup.include({
       var self = this;
       this._latLngAnimation = function (point, progress) {
         if (self._options.progressFormat === "distance") {
-          self.procentProgress(events.fly, point, progress);
+          self._procentProgress(events.fly, point, progress);
         } else events.fly(point);
       };
     }
@@ -383,17 +388,37 @@ _leaflet2.default.LayerGroup.include({
     }
     this.clearLayers();
     this._detailDistance = this._detailData.map(function (polyline) {
-      return polyline.reduce(function (result, point, index) {
-        if (polyline[index + 1]) {
-          result = result + _leaflet2.default.latLng(point).distanceTo(polyline[index + 1]);
-        }
-        return result;
-      }, 0);
+      return (0, _index.getDistance)(polyline);
     });
-    return this._snakeNext();
+    if (this._options.startPosition) {
+      this._initiateStartPosition();
+    } else {
+      return this._snakeNext();
+    }
+  },
+
+  _initiateStartPosition: function _initiateStartPosition() {
+    if (this._options.startPosition === "full") {
+      if (this._options.progressFormat === "default") {
+        this.changePosition(this._originalLatlngs.length - 1);
+      } else if (this._options.progressFormat === "distance") {
+        var max = this._detailDistance.reduce(function (result, item) {
+          result = result + item;
+          return result;
+        }, 0);
+        this.changePosition(max);
+      } else if (this._options.progressFormat === "time") {
+        this.changePosition(this._originalLatlngs[this._originalLatlngs.length - 1].t);
+      }
+      this._end(true);
+    } else {
+      this.changePosition(this._options.startPosition);
+      this.snakePlay();
+    }
   },
 
   _snakeNext: function _snakeNext() {
+    console.log(this);
     if (this._snakingLayersDone >= this._snakingLayers.length) {
       this._end(true);
       this._snaking = false;
@@ -405,5 +430,23 @@ _leaflet2.default.LayerGroup.include({
       this.addLayer(currentLayer);
       currentLayer.snakeIn(this._latLngAnimation);
     } else currentLayer.snakePlay();
+  },
+
+  addPolyline: function addPolyline(layers, detail) {
+    var _this5 = this;
+
+    var prevRange = this._snakingLayers.length;
+    layers.map(function (item, index) {
+      _this5.addLayer(item);
+      _this5._detailData.push(detail[index]);
+      _this5._detailDistance.push((0, _index.getDistance)(detail[index]));
+      _this5._snakingLayers.push(item);
+      _this5._snakingLayers[prevRange + index].initDefaultPosition({
+        animate: _this5._latLngAnimation,
+        points: item
+      });
+      _this5._snakingLayers[prevRange + index].removePosition();
+    });
+    this.snakePlay();
   }
 });

lib/components/laeflet-react-track-player/index.js

@@ -2,22 +2,20 @@ import React, { Component } from "react";
 import "./App.css";
 import LeafletReactTrackPlayer from "components/laeflet-react-track-player";
 import demo from "./demo";
-import demo2 from "./demo2";
 import { Map, TileLayer } from "react-leaflet";
 
 class App extends Component {
   state = {
     lat: 47.445745,
     lng: 40.272891666666666,
     zoom: 14,
-    type: "time",
+    type: "distance",
     demo: demo
   };
   render() {
     const position = [demo[demo.length - 1].lat, demo[demo.length - 1].lng];
     return (
       <div className="App">
-        <button onClick={() => this.setState({demo: demo2})}>add</button>
         <Map center={position} zoom={this.state.zoom}>
           <LeafletReactTrackPlayer
             track={this.state.demo}
@@ -31,9 +29,9 @@ class App extends Component {
               { color: "#D10B41" },
               { color: "#78c800" }
             ]}
+            useControl={true}
             progressFormat={this.state.type}
             customMarker={true}
-            startPosition={"full"}
             streamData={true}
             changeCourseCustomMarker={true}
             markerIcon={"/img/mech.svg"}