Merge branch 'release/1.6.4'

Author: mblomdahl

Dockerfile

@@ -1,5 +1,5 @@
-# Build: docker build -t docker.smithmicro.io/mapbox-gl-circle:dev .
-# Start: docker run -itp 9966:9966 docker.smithmicro.io/mapbox-gl-circle:dev
+# Build: docker build -t mapbox-gl-circle:dev .
+# Start: docker run -itp 9966:9966 mapbox-gl-circle:dev
 # Evaluate: open http://localhost:9966
 
 FROM node:8-alpine

Jenkinsfile

@@ -34,7 +34,11 @@ pipeline {
                             return fullBranchName.split('/') as List
                         }
 
-                        throw new AssertionError("Enforcing Gitflow Workflow and SemVer. Ha!")
+                        if (fullBranchName.matches(/PR-\d+$/)) {
+                            return fullBranchName.split('-') as List
+                        }
+
+                        error "Enforcing Gitflow Workflow and SemVer on '${fullBranchName}'. Ha!"
                     }
 
                     def getBuildVersion = { String fullBranchName, buildNumber ->
@@ -55,8 +59,10 @@ pipeline {
                             case 'release':
                                 assert branchTypeAndName[1] == projectVersion
                                 return "${projectVersion}-rc.${buildNumber}"
+                            case 'PR':
+                                return "${projectVersion}+PR.${branchTypeAndName[1]}.${buildNumber}"
                             default:
-                                throw new AssertionError("Oops, Mats messed up! :(")
+                                error "Oops, we messed up! :("
                         }
                     }
 
@@ -73,8 +79,6 @@ pipeline {
 
                     env.BUILD_VERSION = getBuildVersion(BRANCH_NAME as String, BUILD_NUMBER)
                     env.NPM_TAG = getNpmTag(BRANCH_NAME as String)
-                    env.DOCKER_TAG = env.BUILD_VERSION.replace('+', '_')
-                    env.DOCKER_TAG_ALIAS = env.NPM_TAG
                     env.BUILD_TYPE = env.NPM_TAG ? env.NPM_TAG : 'develop'  // latest, next or develop
 
                     if (env.BUILD_TYPE == 'next') {
@@ -125,27 +129,10 @@ pipeline {
             }
             environment {
                 NPM_TOKEN = credentials('mblomdahl_npm')
-                DOCKER_LOGIN = credentials('docker_smithmicro_io')
             }
             steps {
                 //noinspection GroovyAssignabilityCheck
                 parallel(
-                    'Docker Image': {
-                        dir('_docker-build') {
-                            unstash 'pre_install_git_checkout'
-                            sh 'docker login -u $DOCKER_LOGIN_USR -p $DOCKER_LOGIN_PSW docker.smithmicro.io'
-                            sh 'docker build -t docker.smithmicro.io/mapbox-gl-circle:$DOCKER_TAG .'
-                            sh 'docker save docker.smithmicro.io/mapbox-gl-circle:$DOCKER_TAG | gzip - \
-> mapbox-gl-circle-$BUILD_VERSION.docker.tar.gz'
-                            archiveArtifacts "mapbox-gl-circle-${BUILD_VERSION}.docker.tar.gz"
-
-                            sh 'docker push docker.smithmicro.io/mapbox-gl-circle:$DOCKER_TAG'
-                            sh 'docker tag docker.smithmicro.io/mapbox-gl-circle:$DOCKER_TAG \
-docker.smithmicro.io/mapbox-gl-circle:$DOCKER_TAG_ALIAS'
-                            sh 'docker push docker.smithmicro.io/mapbox-gl-circle:$DOCKER_TAG_ALIAS'
-                            deleteDir()
-                        }
-                    },
                     'NPM Package': {
                         sh 'echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc'
                         sh 'npm publish --tag $NPM_TAG .'

README.md

@@ -186,6 +186,13 @@ Returns **{sw: {lat: [number](https://developer.mozilla.org/en-US/docs/Web/JavaS
 
 ## Changelog
 
+### v. 1.6.4
+
+-   Performance improvements for Firefox and Edge on slow computers
+    ([#64](https://github.com/smithmicro/mapbox-gl-circle/issues/64),
+    [#59](https://github.com/smithmicro/mapbox-gl-circle/issues/59))
+-   Deprecated Docker build step 
+
 ### v. 1.6.3
 
 -   Transferring core project into SmithMicro organization, `mblomdahl/mapbox-gl-circle -> smithmicro/mapbox-gl-circle`

index.html

@@ -6,7 +6,7 @@
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet'/>
-    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
+    <script src='https://npmcdn.com/@turf/turf@4.7.3/turf.min.js'></script>
     <script src='dist/mapbox-gl-circle.min.js'></script>
     <script src='https://npmcdn.com/mapbox-gl-circle/dist/mapbox-gl-circle.min.js'></script>
     <style>
@@ -92,8 +92,8 @@
     mapboxgl.accessToken = 'pk.eyJ1IjoiYW5hbmR0aGFra2VyIiwiYSI6ImNqNWptdjU1YjJheWszM256ZWN0MXNrejMifQ.TXnoKtnlam-KBmRSjXQgEw';
 
     function boundsTo5percentRadius(bounds) {
-        // noinspection JSCheckFunctionSignatures
         // noinspection JSUnresolvedVariable
+        // noinspection JSCheckFunctionSignatures
         return Math.round(
             turf.distance(bounds.getSouthWest().toArray(), bounds.getNorthEast().toArray(), 'meters') * .05);
     }

lib/main.js

@@ -239,6 +239,8 @@ class MapboxCircle {
         /** @const {Array<Point>} */ this._handles = undefined;
         /** @const {boolean} */ this._centerDragActive = false;
         /** @const {boolean} */ this._radiusDragActive = false;
+        /** @const {Object} */ this._debouncedHandlers = {};
+        /** @const {number} */ this._updateCount = 0;
 
         [ // Bind all event handlers.
             '_onZoomEnd',
@@ -282,6 +284,36 @@ class MapboxCircle {
         return window.navigator.userAgent.indexOf('Chrome') === -1 && window.navigator.userAgent.indexOf('Safari') > -1;
     }
 
+    /**
+     * Add debounced event handler to map.
+     * @param {string} event Mapbox GL event name
+     * @param {Function} handler Event handler
+     * @private
+     */
+    _mapOnDebounced(event, handler) {
+        let ticking = false;
+        this._debouncedHandlers[handler] = (args) => {
+                if (!ticking) {
+                    requestAnimationFrame(() => {
+                        handler(args);
+                        ticking = false;
+                    });
+                }
+                ticking = true;
+            };
+        this.map.on(event, this._debouncedHandlers[handler]);
+    }
+
+    /**
+     * Remove debounced event handler from map.
+     * @param {string} event Mapbox GL event name
+     * @param {Function} handler Event handler
+     * @private
+     */
+    _mapOffDebounced(event, handler) {
+        this.map.off(event, this._debouncedHandlers[handler]);
+    }
+
     /**
      * Re-calculate/update circle polygon and handles.
      * @private
@@ -306,9 +338,11 @@ class MapboxCircle {
         }
 
         if (this.options.debugEl) {
+            this._updateCount += 1;
             this.options.debugEl.innerHTML = ('Center: ' + JSON.stringify(this.getCenter()) + ' / Radius: ' + radius +
                                               ' / Bounds: ' + JSON.stringify(this.getBounds()) + ' / Steps: ' + steps +
-                                              ' / Zoom: ' + zoom.toFixed(2) + ' / ID: ' + this._instanceId);
+                                              ' / Zoom: ' + zoom.toFixed(2) + ' / ID: ' + this._instanceId +
+                                              ' / #: ' + this._updateCount);
         }
     }
 
@@ -468,7 +502,7 @@ class MapboxCircle {
      */
     _onCenterHandleMouseDown() {
         this._centerDragActive = true;
-        this.map.on('mousemove', this._onCenterHandleMouseMove);
+        this._mapOnDebounced('mousemove', this._onCenterHandleMouseMove);
         this.map.addLayer(this._getCenterHandleStrokeLayer(), this._circleCenterHandleId);
         this._suspendHandleListeners('center');
         this.map.once('mouseup', this._onCenterHandleMouseUpOrMapMouseOut);
@@ -507,7 +541,7 @@ class MapboxCircle {
 
         const newCenter = this.center;
         this._centerDragActive = false;
-        this.map.off('mousemove', this._onCenterHandleMouseMove);
+        this._mapOffDebounced('mousemove', this._onCenterHandleMouseMove);
         switch (event.type) {
             case 'mouseup': this.map.off('mouseout', this._onCenterHandleMouseUpOrMapMouseOut); break;
             case 'mouseout': this.map.off('mouseup', this._onCenterHandleMouseUpOrMapMouseOut); break;
@@ -607,7 +641,7 @@ class MapboxCircle {
      */
     _onRadiusHandlesMouseDown(event) {
         this._radiusDragActive = true;
-        this.map.on('mousemove', this._onRadiusHandlesMouseMove);
+        this._mapOnDebounced('mousemove', this._onRadiusHandlesMouseMove);
         this.map.addLayer(this._getRadiusHandlesStrokeLayer(), this._circleRadiusHandlesId);
         this._suspendHandleListeners('radius');
         this.map.once('mouseup', this._onRadiusHandlesMouseUpOrMapMouseOut);
@@ -646,7 +680,7 @@ class MapboxCircle {
 
         const newRadius = this.radius;
         this._radiusDragActive = false;
-        this.map.off('mousemove', this._onRadiusHandlesMouseMove);
+        this._mapOffDebounced('mousemove', this._onRadiusHandlesMouseMove);
         this.map.removeLayer(this._circleRadiusHandlesStrokeId);
         switch (event.type) {
             case 'mouseup': this.map.off('mouseout', this._onRadiusHandlesMouseUpOrMapMouseOut); break;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-circle",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "author": "Smith Micro Software, Inc.",
   "license": "ISC",
   "description": "A google.maps.Circle replacement for Mapbox GL JS API",