Merge pull request #79 from jywarren/new-toolbar

new toolbar version - v0.3.0
publiclab · Jan 4, 2018 · f66a3b7 · f66a3b7
2 parents fd240b5 + 82ec3e2
commit f66a3b7
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 59 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,8 @@
+
+language: node_js
+node_js:
+  - '6'
+  - '7'
+before_install:
+  - npm install -g grunt-cli
+script: grunt test
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -26,6 +26,7 @@ module.exports = function(grunt) {
                 globals: {
                     L: false,
                     $: false,
+                    LeafletToolbar: false,
 
                     // Mocha
 

diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
@@ -545,12 +545,12 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
 
 L.DistortableImage = L.DistortableImage || {};
 
-var EditOverlayAction = L.ToolbarAction.extend({
+var EditOverlayAction = LeafletToolbar.ToolbarAction.extend({
 		initialize: function(map, overlay, options) {
 			this._overlay = overlay;
 			this._map = map;
 
-			L.ToolbarAction.prototype.initialize.call(this, options);
+			LeafletToolbar.ToolbarAction.prototype.initialize.call(this, options);
 		}
 	}),
 
@@ -637,7 +637,7 @@ var EditOverlayAction = L.ToolbarAction.extend({
 		}
 	});
 
-L.DistortableImage.EditToolbar = L.Toolbar.Popup.extend({
+L.DistortableImage.EditToolbar = LeafletToolbar.Popup.extend({
 	options: {
 		actions: [
 			ToggleTransparency,
@@ -646,19 +646,6 @@ L.DistortableImage.EditToolbar = L.Toolbar.Popup.extend({
 			ToggleEditable,
 			ToggleRotateDistort
 		]
-	},
-
-	/* Remove the toolbar after each action. */
-	_getActionConstructor: function(Action) {
-		var A = Action.extend({
-			removeHooks: function() {
-				var map = this._map;
-
-				map.removeLayer(this.toolbar);
-			}
-		});
-
-		return L.Toolbar.prototype._getActionConstructor.call(this, A);
 	}
 });
 
@@ -689,7 +676,6 @@ L.DistortableImage.Edit = L.Handler.extend({
 
 	/* Run on image seletion. */
 	addHooks: function() {
-console.log('adding hooks');
 		var overlay = this._overlay,
 			map = overlay._map,
 			i;
@@ -723,9 +709,8 @@ console.log('adding hooks');
 			this._enableDragging();
 		}
 
-console.log('click listener');
 		//overlay.on('click', this._showToolbar, this);
-		L.DomEvent.on(overlay, 'click', this._showToolbar, this);
+		L.DomEvent.on(overlay._image, 'click', this._showToolbar, this);
 
 		/* Enable hotkeys. */
 		L.DomEvent.on(window, 'keydown', this._onKeyDown, this);
@@ -741,7 +726,7 @@ console.log('click listener');
 
 		// L.DomEvent.off(window, 'keydown', this._onKeyDown, this);
 
-		overlay.off('click', this._showToolbar, this);
+		L.DomEvent.off(overlay._image, 'click', this._showToolbar, this);
 
 		// First, check if dragging exists;
 		// it may be off due to locking
@@ -896,19 +881,19 @@ console.log('click listener');
 
 	_showToolbar: function(event) {
 		var overlay = this._overlay,
+                     target = event.target,
 			map = overlay._map;
 
 		/* Ensure that there is only ever one toolbar attached to each image. */
 		this._hideToolbar();
-
 		var point;
 		if (event.containerPoint) { point = event.containerPoint; }
-		else { point = event.target._dragStartTarget._leaflet_pos; }
+		else { point = target._leaflet_pos; }
 		var raised_point = map.containerPointToLatLng(new L.Point(point.x,point.y-20));
+		raised_point.lng = overlay.getCenter().lng; 
 		this.toolbar = new L.DistortableImage.EditToolbar(raised_point).addTo(map, overlay);
 		overlay.fire('toolbar:created');
 
-console.log('showToolbar');
 		L.DomEvent.stopPropagation(event);
 	},
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "leaflet-distortableimage",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Leaflet plugin enabling image overlays to be distorted, stretched, and warped (built for Public Lab's MapKnitter: http://publiclab.org).",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -29,21 +29,21 @@
   },
   "homepage": "https://github.com/publiclab/Leaflet.DistortableImage",
   "devDependencies": {
-    "chai": "^1.10.0",
+    "chai": "^4.1.2",
     "font-awesome": "^4.2.0",
-    "grunt": "^0.4.5",
-    "grunt-contrib-concat": "^0.5.0",
-    "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-karma": "^0.9.0",
+    "grunt": "^1.0.1",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-jshint": "^1.1.0",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-karma": "^2.0.0",
     "jquery": "^2.1.3",
-    "karma": "^0.12.28",
-    "karma-coverage": "^0.2.7",
-    "karma-mocha": "^0.1.10",
-    "karma-mocha-reporter": "^0.3.1",
-    "karma-phantomjs-launcher": "^0.1.4",
+    "karma": "^1.7.1",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-phantomjs-launcher": "^1.0.4",
     "leaflet": "^1.0.0",
-    "leaflet-toolbar": "git+https://github.com/Leaflet/Leaflet.toolbar.git",
+    "leaflet-toolbar": "^0.3.0",
     "matchdep": "^0.3.0",
     "mocha": "^2.0.1",
     "sinon": "^1.12.2"

diff --git a/src/edit/DistortableImage.Edit.js b/src/edit/DistortableImage.Edit.js
@@ -25,7 +25,6 @@ L.DistortableImage.Edit = L.Handler.extend({
 
 	/* Run on image seletion. */
 	addHooks: function() {
-console.log('adding hooks');
 		var overlay = this._overlay,
 			map = overlay._map,
 			i;
@@ -59,9 +58,8 @@ console.log('adding hooks');
 			this._enableDragging();
 		}
 
-console.log('click listener');
 		//overlay.on('click', this._showToolbar, this);
-		L.DomEvent.on(overlay, 'click', this._showToolbar, this);
+		L.DomEvent.on(overlay._image, 'click', this._showToolbar, this);
 
 		/* Enable hotkeys. */
 		L.DomEvent.on(window, 'keydown', this._onKeyDown, this);
@@ -77,7 +75,7 @@ console.log('click listener');
 
 		// L.DomEvent.off(window, 'keydown', this._onKeyDown, this);
 
-		overlay.off('click', this._showToolbar, this);
+		L.DomEvent.off(overlay._image, 'click', this._showToolbar, this);
 
 		// First, check if dragging exists;
 		// it may be off due to locking
@@ -232,19 +230,19 @@ console.log('click listener');
 
 	_showToolbar: function(event) {
 		var overlay = this._overlay,
+                     target = event.target,
 			map = overlay._map;
 
 		/* Ensure that there is only ever one toolbar attached to each image. */
 		this._hideToolbar();
-
 		var point;
 		if (event.containerPoint) { point = event.containerPoint; }
-		else { point = event.target._dragStartTarget._leaflet_pos; }
+		else { point = target._leaflet_pos; }
 		var raised_point = map.containerPointToLatLng(new L.Point(point.x,point.y-20));
+		raised_point.lng = overlay.getCenter().lng; 
 		this.toolbar = new L.DistortableImage.EditToolbar(raised_point).addTo(map, overlay);
 		overlay.fire('toolbar:created');
 
-console.log('showToolbar');
 		L.DomEvent.stopPropagation(event);
 	},
 

diff --git a/src/edit/DistortableImage.EditToolbar.js b/src/edit/DistortableImage.EditToolbar.js
@@ -1,11 +1,11 @@
 L.DistortableImage = L.DistortableImage || {};
 
-var EditOverlayAction = L.ToolbarAction.extend({
+var EditOverlayAction = LeafletToolbar.ToolbarAction.extend({
 		initialize: function(map, overlay, options) {
 			this._overlay = overlay;
 			this._map = map;
 
-			L.ToolbarAction.prototype.initialize.call(this, options);
+			LeafletToolbar.ToolbarAction.prototype.initialize.call(this, options);
 		}
 	}),
 
@@ -92,7 +92,7 @@ var EditOverlayAction = L.ToolbarAction.extend({
 		}
 	});
 
-L.DistortableImage.EditToolbar = L.Toolbar.Popup.extend({
+L.DistortableImage.EditToolbar = LeafletToolbar.Popup.extend({
 	options: {
 		actions: [
 			ToggleTransparency,
@@ -101,18 +101,5 @@ L.DistortableImage.EditToolbar = L.Toolbar.Popup.extend({
 			ToggleEditable,
 			ToggleRotateDistort
 		]
-	},
-
-	/* Remove the toolbar after each action. */
-	_getActionConstructor: function(Action) {
-		var A = Action.extend({
-			removeHooks: function() {
-				var map = this._map;
-
-				map.removeLayer(this.toolbar);
-			}
-		});
-
-		return L.Toolbar.prototype._getActionConstructor.call(this, A);
 	}
 });