Enhancement/canvas (rubenspgcavalcante#55)

* Updating deps

* Fixed rendering on map with preferCanvas and added hardware acc.

* Disabling Karma because of incompatibilities

.babelrc

@@ -6,6 +6,10 @@
     "add-module-exports",
     "transform-class-properties",
     "transform-object-rest-spread",
-    "transform-regenerator"
+    ["transform-runtime", {
+      "helpers": false,
+      "polyfill": false,
+      "regenerator": true
+    }]
   ]
 }

.travis.yml

@@ -3,8 +3,6 @@ node_js:
 - '7'
 
 before_script: npm run build
-script: npm run test
-after_success: npm run codacy
 
 cache: yarn
 branches:

README.md

@@ -34,9 +34,6 @@ Or just [download](https://github.com/rubenspgcavalcante/leaflet-ant-path-bower/
 Can be used with asynchronous module loaders and CommonJS packers
 
 ### Important!
-- Leaflet AntPath uses CSS transitions to animate the SVG element. If the map options **preferCanvas** is active (true),
-the animation will not work, as there's no information about what was drawn inside the canvas tag.
-
 - MultiAntPath was removed, and now AntPath doesn't support the legacy version anymore (0.7.7). If you're still using
 MultiAntPath and Leaflet 0.7, use older AntPath versions than 0.6
 
@@ -95,6 +92,7 @@ Initialise with the same options of a common [Polyline]((http://leafletjs.com/re
 |options| Object  | {color: 'red', weight: 5, ...}  | Same as the [Polyline options](http://leafletjs.com/reference.html#polyline-options) plus the **extra** options bellow
 |options.paused| boolean | true/false | Starts with the animation paused (default: false)
 |options.reverse| boolean | true/false | Defines if the flow follows or not the path order
+|options.hardwareAccelerated| boolean | true/false | Makes the animation run with hardware acceleration (default: false)
 |options.pulseColor| string | #FF00FF | Adds a color to the dashed flux (default: 'white')
 |options.delay | string | 120 | Add a delay to the animation flux (default: 400)
 |options.dashArray| [number, number] **or** string | [15, 30] |The size of the animated dashes (default: "10, 20"). See also [the pattern](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
@@ -155,7 +153,6 @@ const newAnthPath = myAntPath.map(pos => latLng(pos.lat + 1, pos.lng + 1));
 ### With or without polyfills
 The module provide two bundles, the full one, with some es6 polyfills (loaded by default when importing) and the lighter
 one without the polyfills. If you're already uses the following polyfills in your project:
-- regenerator-runtime
 - core-js/es6/symbol
 - core-js/es6/reflect
 

dev-env/components/my-map.js

@@ -1,9 +1,9 @@
-import { tileLayer, Map } from "leaflet";
+import { Map, tileLayer } from "leaflet";
 
 export default class MyMap extends Map {
   constructor(id, title, container) {
     container.appendChild(MyMap._renderContainer(id, title));
-    super(id);
+    super(id, { preferCanvas: true });
 
     tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
       attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"

dev-env/index.js

@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const container = document.getElementById("container");
 
   const mapSimple = new MyMap("map-simple", "Simple Usage", container);
-  const antPath = new AntPath(path, { reverse: true });
+  const antPath = new AntPath(path, { reverse: true, hardwareAcceleration: true });
   mapSimple.addLayer(antPath);
 
   const mapCustom = new MyMap("map-custom", "Custom AntPath", container);

package.json

@@ -13,7 +13,7 @@
     "build": "NODE_ENV=production webpack  --colors --profile --progress",
     "test": "karma start karma/karma.conf.js --log-level debug --single-run && node karma/clean-report.js",
     "analyze": "NODE_ENV=production webpack --profile --json > .wbprofile.json && webpack-bundle-analyzer .wbprofile.json -m server",
-    "format": "prettier-eslint \"{dev-env,src}/**/*.js\"",
+    "format": "prettier-eslint --write \"{dev-env,src}/**/*.js\"",
     "start": "NODE_ENV=development webpack-dev-server -d --cache --inline --host 0.0.0.0",
     "codacy": "cat coverage/lcov.info | codacy-coverage",
     "prepublish": "npm run build"
@@ -34,46 +34,47 @@
   },
   "devDependencies": {
     "babel-core": "^6.22.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-class-properties": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-plugin-transform-regenerator": "^6.22.0",
-    "babel-polyfill": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.22.0",
     "codacy-coverage": "^2.0.0",
     "core-js": "^2.4.1",
-    "css-loader": "^0.26.1",
-    "eslint": "^3.14.0",
-    "eslint-loader": "^1.6.1",
+    "css-loader": "^0.28.9",
+    "eslint": "^4.17.0",
+    "eslint-loader": "^2.0.0",
     "expose-loader": "^0.7.3",
-    "file-loader": "^0.10.1",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine": "^2.5.3",
-    "jasmine-core": "^2.5.2",
-    "json-loader": "^0.5.4",
-    "karma": "^1.4.0",
-    "karma-babel-preprocessor": "^6.0.1",
+    "file-loader": "^1.1.6",
+    "istanbul-instrumenter-loader": "^3.0.0",
+    "jasmine": "^3.0.0",
+    "jasmine-core": "^3.1.0",
+    "karma": "^2.0.0",
+    "karma-babel-preprocessor": "^7.0.0",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.1.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-sourcemap-writer": "^0.1.2",
-    "karma-webpack": "^2.0.2",
+    "karma-webpack": "^3.0.0",
     "leaflet": "^1.0.3",
-    "materialize-css": "^0.98.0",
-    "node-sass": "^4.3.0",
+    "materialize-css": "^0.100.2",
+    "node-sass": "^4.8.3",
     "phantomjs-prebuilt": "^2.1.14",
     "prettier": "^1.10.2",
     "prettier-eslint": "^8.8.1",
     "prettier-eslint-cli": "^4.7.0",
-    "sass-loader": "^6.0.3",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^2.2.0",
+    "regenerator-runtime": "^0.11.1",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.6.0",
     "webpack-bundle-analyzer": "^2.3.1",
-    "webpack-dev-server": "^2.2.0"
+    "webpack-cli": "^2.0.14",
+    "webpack-dev-server": "^3.1.3"
   }
 }

src/plugin/components/ant-path.component.js

@@ -1,4 +1,4 @@
-import { FeatureGroup, Polyline, Util } from "leaflet";
+import { FeatureGroup, Polyline, svg, Util } from "leaflet";
 
 const Layers = { main: Symbol("main"), pulse: Symbol("pulse") };
 
@@ -8,15 +8,21 @@ const Layers = { main: Symbol("main"), pulse: Symbol("pulse") };
  * @extends {L.FeatureGroup}
  */
 export default class AntPath extends FeatureGroup {
+  [Layers.main] = null;
+  [Layers.pulse] = null;
+
   _map = null;
   _path = null;
   _animatedPathId = null;
   _animatedPathClass = "leaflet-ant-path";
   _reversePathClass = "reverse";
+  _hardwareAccClass = "hardware-acceleration";
 
   _defaultOptions = {
     paused: false,
     reverse: false,
+    hardwareAcceleration: false,
+    renderer: svg(),
     delay: 400,
     dashArray: [10, 20],
     weight: 5,
@@ -28,10 +34,6 @@ export default class AntPath extends FeatureGroup {
   constructor(path, customOptions = {}) {
     super();
 
-    //Symbols
-    this[Layers.main] = null;
-    this[Layers.pulse] = null;
-
     Util.setOptions(this, { ...this._defaultOptions, ...customOptions });
     this._path = path;
     this._animatedPathId = `ant-path-${new Date().getTime()}`;
@@ -55,20 +57,30 @@ export default class AntPath extends FeatureGroup {
     return "L.Polyline.AntPath";
   }
 
-  * [Symbol.iterator]() {
+  *[Symbol.iterator]() {
     yield* this._path;
   }
 
   _processOptions() {
-    const { options, _animatedPathClass, _reversePathClass, _animatedPathId } = this;
+    const {
+      options,
+      _animatedPathClass,
+      _reversePathClass,
+      _hardwareAccClass,
+      _animatedPathId
+    } = this;
+    const { reverse, hardwareAcceleration } = options;
 
     let pathOpts = { ...options };
     let pulseOpts = { ...options };
 
     pulseOpts.color = pulseOpts.pulseColor || options.pulseColor;
-    pulseOpts.className = `${_animatedPathClass} ${_animatedPathId} ${
-      options.reverse ? _reversePathClass : ""
-      }`;
+    pulseOpts.className = [
+      _animatedPathClass,
+      _animatedPathId,
+      reverse ? `${_animatedPathClass}__${_reversePathClass}` : "",
+      hardwareAcceleration ? `${_animatedPathClass}__${_hardwareAccClass}` : ""
+    ].join(" ");
 
     delete pathOpts.dashArray;
 
@@ -112,7 +124,7 @@ export default class AntPath extends FeatureGroup {
 
   _pureReverse() {
     const el = this[Layers.pulse].getElement();
-    if(el) {
+    if (el) {
       this.options.reverse
         ? el.classList.remove(this._reversePathClass)
         : el.classList.add(this._reversePathClass);
@@ -162,7 +174,7 @@ export default class AntPath extends FeatureGroup {
       this._calculateAnimationSpeed();
       return true;
     }
-    else {
+ else {
       return false;
     }
   }

src/style/leaflet-ant-path.sass

@@ -1,4 +1,9 @@
 $animation-rules: linear infinite leaflet-ant-path-animation
+$engines: "-webkit-", "-moz-", "-ms-", "-o-", ""
+
+@mixin applyEngines($rule, $value)
+  @each $engine in $engines
+    #{$engine+$rule}: $value
 
 =stroke-animation
   from
@@ -23,15 +28,10 @@ $animation-rules: linear infinite leaflet-ant-path-animation
 
 path.leaflet-ant-path
   fill: none
-  -webkit-animation: $animation-rules
-  -moz-animation: $animation-rules
-  -ms-animation: $animation-rules
-  -o-animation: $animation-rules
-  animation: $animation-rules
-
-  &.reverse
-    -webkit-animation-direction: reverse
-    -moz-animation-direction: reverse
-    -o-animation-direction: reverse
-    -ms-animation-direction: reverse
-    animation-direction: reverse
+  @include applyEngines(animation, $animation-rules)
+
+  &__hardware-acceleration
+    @include applyEngines(transform, translateZ(0))
+
+  &__reverse
+    @include applyEngines(animation-direction, reverse)

webpack.config.js

@@ -8,6 +8,7 @@ const envConfs = {
 const {NODE_ENV} = process.env;
 
 let configuration = {
+    mode: NODE_ENV,
     output: {
         path: path.resolve("./dist"),
         filename: "[name].js",
@@ -20,7 +21,7 @@ let configuration = {
         hot: true
     },
     module: {
-        loaders
+      rules: loaders
     }
 };
 

webpack/development.js

@@ -3,7 +3,6 @@ const webpack = require("webpack");
 module.exports = {
     entry: {
         "dev-env": [
-            require.resolve("regenerator-runtime"),
             require.resolve("core-js/es6/symbol"),
             require.resolve("core-js/es6/reflect"),
             "./dev-env/index.js"]

webpack/loaders.js

@@ -24,11 +24,6 @@ module.exports = [
             "sass-loader"
         ]
     },
-    {
-        test: require.resolve("regenerator-runtime"),
-        loader: "expose-loader?regeneratorRuntime"
-    },
     {test: /\.(woff2?|svg)$/, loader: "url-loader"},
-    {test: /\.(ttf|eot|png|jpge?g)$/, loader: "file-loader"},
-    {test: /\.json$/, exclude: "/node_modules/", loader: "json-loader"}
+    {test: /\.(ttf|eot|png|jpge?g)$/, loader: "file-loader"}
 ];

webpack/production.js

@@ -1,11 +1,8 @@
-const {UglifyJsPlugin} = require("webpack").optimize;
-
 module.exports = {
     entry: {
         "leaflet-ant-path.es6": "./src/plugin/main",
 
         "leaflet-ant-path": [
-            require.resolve("regenerator-runtime"),
             require.resolve("core-js/es6/symbol"),
             require.resolve("core-js/es6/reflect"),
             "./src/plugin/main"
@@ -19,6 +16,5 @@ module.exports = {
             commonjs2: "leaflet",
             amd: "leaflet"
         }
-    },
-    plugins: [new UglifyJsPlugin({minimize: true, sourceMap: true})]
+    }
 };