updates

.eslintrc.js

@@ -1,11 +1,11 @@
 module.exports = {
     "env": {
-        "browser": true,
+      "browser": true,
     },
     "extends": "google",
     "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
         "ecmaVersion": 2018
@@ -35,6 +35,6 @@ module.exports = {
         "guard-for-in": 0,
         "max-len": ["warn", { "ignoreComments": true }],
         "prefer-const": 1,
-        "valid-jsdoc": 2
+        "valid-jsdoc": 0
     }
 };

README.md

@@ -540,6 +540,13 @@ A handler that holds the keybindings and toolbar API for an image instance. It i
   </ul>
 </details>
 
+<details><summary><code><b>enabled()</b>: Boolean</code></summary>
+  <ul>
+    <li>Returns true if editing on the individual image instance is enabled.</li>
+    <li><code>img.editing.enabled()</code></li>
+  </ul>
+</details>
+
 ---
 
 `L.DistortableCollection`

dist/leaflet.distortableimage.js

@@ -765,6 +765,8 @@ L.DistortableCollection = L.FeatureGroup.extend({
         this._toggleMultiSelect(e, edit);
       }
     }, this);
+
+    if (e) { L.DomEvent.stopPropagation(e); }
   },
 
   _dragStartMultiple: function(e) {
@@ -1905,7 +1907,7 @@ L.DistortableImage.Edit = L.Handler.extend({
 
     L.DomEvent.on(overlay._image, {
       click: this._select,
-      dblclick: this._nextMode,
+      dblclick: this.nextMode,
     }, this);
 
     L.DomEvent.on(window, 'keydown', this._onKeyDown, this);
@@ -1950,7 +1952,7 @@ L.DistortableImage.Edit = L.Handler.extend({
 
     L.DomEvent.off(overlay._image, {
       click: this._select,
-      dblclick: this._nextMode,
+      dblclick: this.nextMode,
     }, this);
 
     L.DomEvent.off(window, 'keydown', this._onKeyDown, this);
@@ -2480,12 +2482,12 @@ L.DistortableImage.Edit = L.Handler.extend({
     * need to attach a stop to img dblclick or it will propagate to
     * the map and fire the handler that shows map location labels on map dblclick.
     */
-  _nextMode: function(e) {
+  nextMode: function(e) {
     var map = this._overlay._map;
     var eP = this.parentGroup;
     var m = this.mode;
 
-    if (eP && eP.anySelected()) { return; }
+    if ((eP && eP.anySelected()) || !this.enabled()) { return false; }
 
     map.removeLayer(this._handles[m]);
 
@@ -2496,7 +2498,9 @@ L.DistortableImage.Edit = L.Handler.extend({
     map.addLayer(this._handles[this.mode]);
     this._refresh();
 
-    L.DomEvent.stop(e);
+    if (e) { L.DomEvent.stop(e); }
+
+    return this.mode;
   },
 });
 

package.json

@@ -49,11 +49,12 @@
     "grunt-svgmin": "^6.0.0",
     "husky": "^3.0.3",
     "jquery": "~> 3.4.0",
-    "karma": "^4.1.0",
+    "karma": "^4.3.0",
     "karma-coverage": "^2.0.1",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
     "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sinon": "^1.0.5",
     "matchdep": "^2.0.0",
     "mocha": "^6.0.0",
     "phantomjs-prebuilt": "^2.1.16",

src/DistortableCollection.js

@@ -110,6 +110,8 @@ L.DistortableCollection = L.FeatureGroup.extend({
         this._toggleMultiSelect(e, edit);
       }
     }, this);
+
+    if (e) { L.DomEvent.stopPropagation(e); }
   },
 
   _dragStartMultiple: function(e) {

src/edit/DistortableImage.Edit.js

@@ -74,7 +74,7 @@ L.DistortableImage.Edit = L.Handler.extend({
 
     L.DomEvent.on(overlay._image, {
       click: this._select,
-      dblclick: this._nextMode,
+      dblclick: this.nextMode,
     }, this);
 
     L.DomEvent.on(window, 'keydown', this._onKeyDown, this);
@@ -119,7 +119,7 @@ L.DistortableImage.Edit = L.Handler.extend({
 
     L.DomEvent.off(overlay._image, {
       click: this._select,
-      dblclick: this._nextMode,
+      dblclick: this.nextMode,
     }, this);
 
     L.DomEvent.off(window, 'keydown', this._onKeyDown, this);
@@ -649,12 +649,12 @@ L.DistortableImage.Edit = L.Handler.extend({
     * need to attach a stop to img dblclick or it will propagate to
     * the map and fire the handler that shows map location labels on map dblclick.
     */
-  _nextMode: function(e) {
+  nextMode: function(e) {
     var map = this._overlay._map;
     var eP = this.parentGroup;
     var m = this.mode;
 
-    if (eP && eP.anySelected()) { return; }
+    if ((eP && eP.anySelected()) || !this.enabled()) { return false; }
 
     map.removeLayer(this._handles[m]);
 
@@ -665,7 +665,9 @@ L.DistortableImage.Edit = L.Handler.extend({
     map.addLayer(this._handles[this.mode]);
     this._refresh();
 
-    L.DomEvent.stop(e);
+    if (e) { L.DomEvent.stop(e); }
+
+    return this.mode;
   },
 });
 

test/SpecHelper.js

@@ -18,6 +18,14 @@ chai.mouseEvents = {
     type: 'click',
     isShift: false,
   },
+  ShiftClick: {
+    type: 'click',
+    isShift: true,
+  },
+  Dblclick: {
+    type: 'dblclick',
+    isShift: false,
+  }
 }
 
 /*

test/karma.conf.js

@@ -9,16 +9,15 @@ module.exports = function(config) {
     plugins: [
       require('mocha'),
       require('karma-mocha'),
+      require('karma-sinon'),
       require('karma-coverage'),
       require('karma-mocha-reporter'),
       require('karma-phantomjs-launcher'),
-      require('glfx'),
-      require('webgl-distort/dist/webgl-distort.js'),
     ],
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha'],
+    frameworks: ['mocha', 'sinon'],
 
     // list of files / patterns to load in the browser
     files: [
@@ -44,8 +43,7 @@ module.exports = function(config) {
       'src/iconsets/ToolbarIconSet.js',
       'src/edit/actions/EditAction.js',
       'src/edit/actions/*.js',
-      'src/edit/toolbars/DistortableImage.PopupBar.js',
-      'src/edit/toolbars/DistortableImage.ControlBar.js',
+      'src/edit/toolbars/*',
       'src/edit/DistortableImage.Edit.js',
       'src/edit/DistortableCollection.Edit.js',
       'src/components/DistortableImage.Keymapper.js',

test/src/edit/DistortableImageEditSpec.js

@@ -1,6 +1,7 @@
 describe('L.DistortableImage.Edit', function() {
   var map;
   var overlay;
+  var spy;
 
   beforeEach(function(done) {
     map = L.map(L.DomUtil.create('div', '', document.body)).setView([41.7896, -87.5996], 15);
@@ -105,4 +106,69 @@ describe('L.DistortableImage.Edit', function() {
       }, 3000);
     });
   });
+
+  describe('#nextMode', function () {
+    beforeEach(function () {
+      overlay.editing.enable();
+    });
+
+    it('Should update images mode to the "next" (depending on developer) mode on dblclick', function() {
+      var edit = overlay.editing;
+      var modes = edit.modes;
+      var img = overlay.getElement();
+
+      edit._freeRotateMode();
+      expect(edit.mode).to.equal('freeRotate');
+      var idx = modes.indexOf('freeRotate');
+
+      chai.simulateEvent(img, chai.mouseEvents.Dblclick);
+      var newIdx = modes.indexOf(edit.mode)
+      expect(newIdx).to.equal((idx + 1) % modes.length)
+    });
+
+    it('Will update to next mode even when current mode is \'lock\'', function() {
+      var edit = overlay.editing;
+      var img = overlay.getElement();
+
+      edit._lock();
+      expect(edit.mode).to.equal('lock');
+
+      chai.simulateEvent(img, chai.mouseEvents.Dblclick);
+      expect(edit.mode).to.not.equal('lock');
+    });
+
+    it("It prevents dblclick events from propagating to the map", function () {
+      var overlaySpy = sinon.spy();
+      var mapSpy = sinon.spy();
+
+      overlay.on('dblclick', overlaySpy);
+      map.on('dblclick', mapSpy);
+
+      overlay.fire('dblclick');
+      expect(overlay.editing.nextMode).to.have.been.called;
+      expect(L.DomEvent.stop).to.have.been.called;
+
+      expect(overlaySpy.called).to.be.true;
+      expect(mapSpy.notCalled).to.be.true;
+    });
+
+    it('Will return false when the image is disabled or is multi-selected', function () {
+      var edit = overlay.editing;
+      var img = overlay.getElement();
+
+      expect(edit.nextMode()).to.not.be.false
+
+      edit.disable();
+      expect(edit.nextMode()).to.be.false
+
+      edit.enable();
+      expect(edit.nextMode()).to.not.be.false
+
+      chai.simulateEvent(img, chai.mouseEvents.ShiftMouseDown);
+      setTimeout(function () {
+        expect(L.DomUtil.getClass(img)).to.include('selected');
+        expect(edit.nextMode()).to.be.false
+      }, 3000);
+    });
+  });
 });