Toolbar not clickable -- needs upgrade to "leaflet-draw-toolbar" package (next steps outlined)

[rakeshtinku]

In previous version of leaflet(0.7.7) toolbar is enabled when clicked on image but with the leaflet 1.2 version there are few issues. The click events are not registered in _initEvents(); , and when we click on image overlay this._showToolbar() is not invoking.

leaflet.js:5 Deprecated include of L.Mixin.Events: this property will be removed in future releases, please inherit from L.Evented instead. Error
    at y (file:///home/gaian/nodejs/Leaflet.DistortableImage/node_modules/leaflet/dist/leaflet.js:5:2048)
    at Function.v.extend (file:///home/gaian/nodejs/Leaflet.DistortableImage/node_modules/leaflet/dist/leaflet.js:5:14706)
    at file:///home/gaian/nodejs/Leaflet.DistortableImage/node_modules/leaflet-toolbar/dist/leaflet.toolbar.js:1:60
    at file:///home/gaian/nodejs/Leaflet.DistortableImage/node_modules/leaflet-toolbar/dist/leaflet.toolbar.js:1:5309 

[rakeshtinku]

i want to work on this can you guide me

[jywarren]

Yes, I believe this is due to upstream issues with https://github.com/Leaflet/Leaflet.toolbar/ not being compatible with Leaflet v1.x

I'm not as familiar with that but I believe it's a simpler library than this and I've posted at least one "deprecation" error which may be related. I've documented the error i see, and I hope we can narrow down what's going wrong soon:

Leaflet/Leaflet.toolbar#41

Thank you very much! We'd love to see this fixed.

[jywarren]

This has been fixed in the newer leaflet-draw-toolbar, which we can switch to. Any help appreciated!

Usage example is here: https://github.com/justinmanley/leaflet-draw-toolbar/blob/master/examples/popup.html#L69-L71

new LeafletToolbar.EditToolbar.Popup(event.latlng, {
	actions: editActions
}).addTo(map, layer);

Very similar to usage in this library: https://github.com/publiclab/Leaflet.DistortableImage/blob/master/src/edit/DistortableImage.EditToolbar.js#L95-L104

L.DistortableImage.EditToolbar = L.Toolbar.Popup.extend({
	options: {
		actions: [
			ToggleTransparency,
			RemoveOverlay,
			ToggleOutline,
			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);
	}
});

Although i'm not sure about that extra code to remove the toolbar after each action. May or may not be necessary still.

I think the key difference will be how the actions are implemented. Currently we do this:

EditOverlayAction = L.ToolbarAction.extend({
		initialize: function(map, overlay, options) {
			this._overlay = overlay;
			this._map = map;

			L.ToolbarAction.prototype.initialize.call(this, options);
		}
	}),

I think the new leaflet-draw-toolbar similarly extends LeafletToolbar.ToolbarAction using LeafletToolbar.ToolbarAction.extendOptions() --

LeafletToolbar.ToolbarAction.extendOptions({
	toolbarIcon: { 
		className: 'leaflet-color-picker', 
		html: '<span class="fa fa-eyedropper"></span>' 
	},
	subToolbar: new LeafletToolbar({ actions: [
		L.ColorPicker.extendOptions({ color: '#db1d0f' }),
		L.ColorPicker.extendOptions({ color: '#0000ff' })
	]})
})

This'll likely take some tweaking to get it working but there is documentation here: https://github.com/leaflet/Leaflet.Toolbar/wiki/Building-custom-toolbars

And I believe all the changes would be to this file: https://github.com/publiclab/Leaflet.DistortableImage/blob/master/src/edit/DistortableImage.EditToolbar.js

In addition to repointing all references to leaflet-toolbar to the new leaflet-draw-toolbar, which is in NPM: https://github.com/publiclab/Leaflet.DistortableImage/search?utf8=%E2%9C%93&q=leaflet-toolbar&type=

[jywarren]

Actually apparently all we need is to update Leaflet.Toolbar to v0.3.x... trying in #79

[jywarren]

OK - got some ways in refactoring, as some was required for v0.3.0 of Leaflet.Toolbar. The latest version does not produce errors. But it also does not produce a popup.

This apparently needs further debugging! Any help appreciated. See #79 for the latest attempt.

[jywarren]

Making some good progress! Toolbar is created, but not displayed, in #79. May be that the actions are not getting added properly. Click events work, though.

[jywarren]

Fixed in #79