leaflet-distortableimage - npm Package Compare versions

114

coverage/coverage.txt

		@@ -1,57 +0,57 @@
		-------------------\|---------\|----------\|---------\|---------\|-------------------
		File \| % Stmts \| % Branch \| % Funcs \| % Lines \| Uncovered Line #s
		-------------------\|---------\|----------\|---------\|---------\|-------------------
		All files \| 54.89 \| 43.02 \| 55.81 \| 54.74 \|
		src \| 65.24 \| 57.66 \| 68.33 \| 65.43 \|
		...Collection.js \| 40.2 \| 34.29 \| 46.15 \| 40.2 \| ...31-161,173-237
		...ageOverlay.js \| 75.5 \| 65.69 \| 85.29 \| 75.81 \| ...70-398,447-464
		src/components \| 9.23 \| 9.09 \| 0 \| 9.23 \|
		....Keymapper.js \| 9.23 \| 9.09 \| 0 \| 9.23 \| 11-96,100-105,110
		src/edit \| 54.78 \| 43.99 \| 56.38 \| 54.62 \|
		...ction.Edit.js \| 35.2 \| 25.77 \| 39.47 \| 35.2 \| ...19-227,258-379
		...Image.Edit.js \| 68.39 \| 57.87 \| 69.09 \| 68.22 \| ...16,735,749,769
		getEXIFdata.js \| 3.45 \| 0 \| 0 \| 3.45 \| 5-64
		src/edit/actions \| 55.74 \| 59.18 \| 37.78 \| 55.74 \|
		BorderAction.js \| 62.5 \| 87.5 \| 50 \| 62.5 \| 11-12,30-34
		DeleteAction.js \| 73.33 \| 75 \| 50 \| 73.33 \| 32-37
		DistortAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 16-18
		DragAction.js \| 100 \| 100 \| 100 \| 100 \|
		EditAction.js \| 85.71 \| 81.25 \| 57.14 \| 85.71 \| 36,66,85-90,95
		ExportAction.js \| 23.21 \| 28.57 \| 8.33 \| 23.21 \| 29-104
		...tateAction.js \| 100 \| 100 \| 100 \| 100 \|
		...cateAction.js \| 14.29 \| 0 \| 0 \| 14.29 \| 5-18
		LockAction.js \| 76.47 \| 75 \| 50 \| 76.47 \| 30-35
		OpacityAction.js \| 58.82 \| 87.5 \| 50 \| 58.82 \| 11-12,29-34
		RestoreAction.js \| 11.11 \| 0 \| 0 \| 11.11 \| 5-22
		RotateAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 16-18
		ScaleAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 16-18
		StackAction.js \| 6.25 \| 0 \| 0 \| 6.25 \| 5-33
		UnlockAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 15-17
		src/edit/handles \| 47.71 \| 8.7 \| 60.53 \| 47.71 \|
		DistortHandle.js \| 66.67 \| 100 \| 66.67 \| 66.67 \| 14-15
		DragHandle.js \| 50 \| 100 \| 66.67 \| 50 \| 14-17
		EditHandle.js \| 90.7 \| 100 \| 72.73 \| 90.7 \| 33-41
		...tateHandle.js \| 17.39 \| 0 \| 66.67 \| 17.39 \| 14-43
		LockHandle.js \| 31.82 \| 0 \| 41.67 \| 31.82 \| 47-104
		RotateHandle.js \| 44.44 \| 100 \| 66.67 \| 44.44 \| 14-23
		ScaleHandle.js \| 20 \| 0 \| 66.67 \| 20 \| 14-46
		src/edit/toolbars \| 91.67 \| 66.67 \| 87.5 \| 91.43 \|
		...ControlBar.js \| 100 \| 50 \| 100 \| 100 \| 3-22
		...e.PopupBar.js \| 88 \| 75 \| 83.33 \| 87.5 \| 15-16,35
		src/iconsets \| 100 \| 100 \| 100 \| 100 \|
		IconSet.js \| 100 \| 100 \| 100 \| 100 \|
		...perIconSet.js \| 100 \| 100 \| 100 \| 100 \|
		...barIconSet.js \| 100 \| 100 \| 100 \| 100 \|
		src/mapmixins \| 40.76 \| 22.08 \| 46.43 \| 40.76 \|
		BoxCollector.js \| 16.36 \| 0 \| 18.18 \| 16.36 \| 24-120
		...lickLabels.js \| 37.5 \| 14.29 \| 33.33 \| 37.5 \| 16,32,40-79
		...eClickZoom.js \| 54.76 \| 32 \| 75 \| 54.76 \| 23,29,42,57,69-97
		MapMixins.js \| 85 \| 42.86 \| 100 \| 85 \| 19,36,45
		src/util \| 65.17 \| 36.59 \| 73.91 \| 63.53 \|
		DomUtil.js \| 78.95 \| 53.85 \| 80 \| 78.95 \| 21,31,35,42
		IconUtil.js \| 13.64 \| 6.25 \| 25 \| 13.64 \| 11,17-51
		ImageUtil.js \| 25 \| 100 \| 0 \| 25 \| 5-7
		MatrixUtil.js \| 92.86 \| 100 \| 85.71 \| 91.67 \| 47-48
		TrigUtil.js \| 100 \| 66.67 \| 100 \| 100 \| 5-6
		Utils.js \| 72.73 \| 50 \| 100 \| 72.73 \| 34-36
		-------------------\|---------\|----------\|---------\|---------\|-------------------
		---------------------------------\|---------\|----------\|---------\|---------\|--------------------------------------------------------------------------------------------------------------------------
		File \| % Stmts \| % Branch \| % Funcs \| % Lines \| Uncovered Line #s
		---------------------------------\|---------\|----------\|---------\|---------\|--------------------------------------------------------------------------------------------------------------------------
		All files \| 54.91 \| 43.15 \| 55.81 \| 54.75 \|
		src \| 65.72 \| 57.66 \| 68.33 \| 65.91 \|
		DistortableCollection.js \| 40.2 \| 34.29 \| 46.15 \| 40.2 \| 35-40,67-85,115,131-161,173-237
		DistortableImageOverlay.js \| 76.1 \| 65.69 \| 85.29 \| 76.4 \| 48-50,63-64,98,146,232-233,250-252,265,272-301,372-400,449-466
		src/components \| 9.23 \| 9.09 \| 0 \| 9.23 \|
		DistortableImage.Keymapper.js \| 9.23 \| 9.09 \| 0 \| 9.23 \| 11-96,100-105,110
		src/edit \| 54.5 \| 43.99 \| 56.38 \| 54.34 \|
		DistortableCollection.Edit.js \| 34.62 \| 25.77 \| 39.47 \| 34.62 \| 23,35-59,68-81,88-99,114,118-119,132,150,165-187,195,203,209-214,219-227,258-380
		DistortableImage.Edit.js \| 68.39 \| 57.87 \| 69.09 \| 68.22 \| 36,54,81,185-196,231-249,291-297,320-322,330-346,359-365,372,378-512,524-525,534-535,557,574,580,603,607,716,735,749,769
		getEXIFdata.js \| 3.45 \| 0 \| 0 \| 3.45 \| 5-64
		src/edit/actions \| 55.74 \| 59.18 \| 37.78 \| 55.74 \|
		BorderAction.js \| 62.5 \| 87.5 \| 50 \| 62.5 \| 11-12,30-34
		DeleteAction.js \| 73.33 \| 75 \| 50 \| 73.33 \| 32-37
		DistortAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 16-18
		DragAction.js \| 100 \| 100 \| 100 \| 100 \|
		EditAction.js \| 85.71 \| 81.25 \| 57.14 \| 85.71 \| 36,66,85-90,95
		ExportAction.js \| 23.21 \| 28.57 \| 8.33 \| 23.21 \| 29-104
		FreeRotateAction.js \| 100 \| 100 \| 100 \| 100 \|
		GeolocateAction.js \| 14.29 \| 0 \| 0 \| 14.29 \| 5-18
		LockAction.js \| 76.47 \| 75 \| 50 \| 76.47 \| 30-35
		OpacityAction.js \| 58.82 \| 87.5 \| 50 \| 58.82 \| 11-12,29-34
		RestoreAction.js \| 11.11 \| 0 \| 0 \| 11.11 \| 5-22
		RotateAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 16-18
		ScaleAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 16-18
		StackAction.js \| 6.25 \| 0 \| 0 \| 6.25 \| 5-33
		UnlockAction.js \| 71.43 \| 100 \| 50 \| 71.43 \| 15-17
		src/edit/handles \| 47.71 \| 8.7 \| 60.53 \| 47.71 \|
		DistortHandle.js \| 66.67 \| 100 \| 66.67 \| 66.67 \| 14-15
		DragHandle.js \| 50 \| 100 \| 66.67 \| 50 \| 14-17
		EditHandle.js \| 90.7 \| 100 \| 72.73 \| 90.7 \| 33-41
		FreeRotateHandle.js \| 17.39 \| 0 \| 66.67 \| 17.39 \| 14-43
		LockHandle.js \| 31.82 \| 0 \| 41.67 \| 31.82 \| 47-104
		RotateHandle.js \| 44.44 \| 100 \| 66.67 \| 44.44 \| 14-23
		ScaleHandle.js \| 20 \| 0 \| 66.67 \| 20 \| 14-46
		src/edit/toolbars \| 91.67 \| 66.67 \| 87.5 \| 91.43 \|
		DistortableImage.ControlBar.js \| 100 \| 50 \| 100 \| 100 \| 3-22
		DistortableImage.PopupBar.js \| 88 \| 75 \| 83.33 \| 87.5 \| 15-16,35
		src/iconsets \| 100 \| 100 \| 100 \| 100 \|
		IconSet.js \| 100 \| 100 \| 100 \| 100 \|
		KeymapperIconSet.js \| 100 \| 100 \| 100 \| 100 \|
		ToolbarIconSet.js \| 100 \| 100 \| 100 \| 100 \|
		src/mapmixins \| 40.76 \| 23.38 \| 46.43 \| 40.76 \|
		BoxCollector.js \| 16.36 \| 0 \| 18.18 \| 16.36 \| 24-120
		DoubleClickLabels.js \| 37.5 \| 14.29 \| 33.33 \| 37.5 \| 16,32,40-79
		DoubleClickZoom.js \| 54.76 \| 36 \| 75 \| 54.76 \| 23,29,42,57,69-97
		MapMixins.js \| 85 \| 42.86 \| 100 \| 85 \| 19,36,45
		src/util \| 65.17 \| 36.59 \| 73.91 \| 63.53 \|
		DomUtil.js \| 78.95 \| 53.85 \| 80 \| 78.95 \| 21,31,35,42
		IconUtil.js \| 13.64 \| 6.25 \| 25 \| 13.64 \| 11,17-51
		ImageUtil.js \| 25 \| 100 \| 0 \| 25 \| 5-7
		MatrixUtil.js \| 92.86 \| 100 \| 85.71 \| 91.67 \| 47-48
		TrigUtil.js \| 100 \| 66.67 \| 100 \| 100 \| 5-6
		Utils.js \| 72.73 \| 50 \| 100 \| 72.73 \| 34-36
		---------------------------------\|---------\|----------\|---------\|---------\|--------------------------------------------------------------------------------------------------------------------------

1

Gruntfile.js

		@@ -22,3 +22,2 @@ const webpackConfig = require('./webpack.config.js');
		mocha: true,
		phantom: true,
		typed: true,
		@@ -25,0 +24,0 @@ bitwise: true,

20

package.json

		{
		"name": "leaflet-distortableimage",
		"version": "0.20.7",
		"version": "0.21.7",
		"description": "Leaflet plugin enabling image overlays to be distorted, stretched, and warped (built for Public Lab's MapKnitter: http://publiclab.org).",
		@@ -9,3 +9,3 @@ "engines": {
		"scripts": {
		"setup": "npm i && npm i leaflet --no-save && npm run build",
		"setup": "npm i && npm run build",
		"watch:dev": "webpack --watch",
		@@ -68,13 +68,13 @@ "serve:dev": "cross-env NODE_ENV=development webpack-dev-server",
		"husky": "^4.2.5",
		"karma": "^5.0.1",
		"karma": "^5.1.1",
		"karma-babel-preprocessor": "^8.0.1",
		"karma-coverage": "^2.0.2",
		"karma-mocha": "^2.0.0",
		"karma-chrome-launcher": "^3.1.0",
		"karma-coverage": "^2.0.3",
		"karma-mocha": "^2.0.1",
		"karma-mocha-reporter": "^2.2.5",
		"karma-phantomjs-launcher": "^1.0.4",
		"karma-sinon": "^1.0.5",
		"leaflet": "1.x",
		"matchdep": "^2.0.0",
		"mocha": "^7.1.1",
		"phantomjs-prebuilt": "^2.1.16",
		"sinon": "^7.2.4",
		"mocha": "^8.1.1",
		"sinon": "^9.0.3",
		"uglify-js": "^3.7.4",
		@@ -87,3 +87,3 @@ "webpack": "^4.42.1",
		"peerDependencies": {
		"leaflet": "^1.0.0"
		"leaflet": "1.x"
		},
		@@ -90,0 +90,0 @@ "husky": {

6

README.md

		# Leaflet.DistortableImage

		[![Build Status](https://travis-ci.org/publiclab/Leaflet.DistortableImage.svg?branch=master)](https://travis-ci.org/publiclab/Leaflet.DistortableImage)
		[![Build Status](https://travis-ci.org/publiclab/Leaflet.DistortableImage.svg?branch=main)](https://travis-ci.org/publiclab/Leaflet.DistortableImage)
		[![Code of Conduct](https://img.shields.io/badge/code-of%20conduct-brightgreen.svg)](https://publiclab.org/conduct)
		@@ -79,7 +79,7 @@ [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/publiclab/Leaflet.DistortableImage/issues)

		For example, to overrwrite the toolbar to only include `L.OpacityAction` and `L.DeleteAction` , and also add on an additional non-default like `L.RevertAction`:
		For example, to overrwrite the toolbar to only include `L.OpacityAction` and `L.DeleteAction` , and also add on an additional non-default like `L.RestoreAction`:

		```js
		img = L.distortableImageOverlay('example.jpg', {
		actions: [L.OpacityAction, L.DeleteAction, L.RevertAction],
		actions: [L.OpacityAction, L.DeleteAction, L.RestoreAction],
		}).addTo(map);
		@@ -86,0 +86,0 @@ ```

2

src/DistortableImageOverlay.js

		@@ -160,2 +160,3 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
		this._selected = false;
		this.fire('deselect');
		return this;
		@@ -177,2 +178,3 @@ },
		edit._showMarkers();
		this.fire('select');

		@@ -179,0 +181,0 @@ // we run the selection logic 1st anyway because the collection group's _addToolbar method depends on it

160

src/edit/DistortableCollection.Edit.js

		@@ -9,3 +9,3 @@ L.DistortableImage = L.DistortableImage \|\| {};

		initialize: function(group, options) {
		initialize(group, options) {
		this._group = group;
		@@ -19,5 +19,5 @@ this._exportOpts = group.options.exportOpts;

		addHooks: function() {
		var group = this._group;
		var map = group._map;
		addHooks() {
		const group = this._group;
		const map = group._map;

		@@ -46,5 +46,5 @@ this.editActions = this.options.actions;

		removeHooks: function() {
		var group = this._group;
		var map = group._map;
		removeHooks() {
		const group = this._group;
		const map = group._map;

		@@ -69,3 +69,3 @@ L.DomEvent.off(document, 'keydown', this._onKeyDown, this);

		enable: function() {
		enable() {
		this._enabled = true;
		@@ -76,12 +76,11 @@ this.addHooks();

		disable: function() {
		disable() {
		this._enabled = false;
		this.removeHooks();

		return this;
		},

		_onKeyDown: function(e) {
		var keymap = this.options.keymap;
		var handlerName = keymap[e.key];
		_onKeyDown(e) {
		const keymap = this.options.keymap;
		const handlerName = keymap[e.key];

		@@ -95,3 +94,3 @@ if (!this[handlerName]) { return; }

		_singleClick: function(e) {
		_singleClick(e) {
		if (e.type === 'singleclick') { this._decollectAll(e); }
		@@ -101,4 +100,4 @@ else { return; }

		_singleClickListeners: function() {
		var map = this._group._map;
		_singleClickListeners() {
		const map = this._group._map;
		L.DomEvent.off(map, 'click', this._decollectAll, this);
		@@ -108,4 +107,4 @@ L.DomEvent.on(map, 'singleclick', this._decollectAll, this);

		_resetClickListeners: function() {
		var map = this._group._map;
		_resetClickListeners() {
		const map = this._group._map;
		L.DomEvent.on(map, 'click', this._decollectAll, this);
		@@ -115,4 +114,4 @@ L.DomEvent.off(map, 'singleclick', this._decollectAll, this);

		_decollectAll: function(e) {
		var oe;
		_decollectAll(e) {
		let oe;

		@@ -138,7 +137,8 @@ if (e) { oe = e.originalEvent; }

		_unlockGroup: function() {
		_unlockGroup() {
		if (!this.hasTool(L.UnlockAction)) { return; }

		this._group.eachLayer((layer) => {
		if (this._group.isCollected(layer)) {
		var edit = layer.editing;
		const edit = layer.editing;
		edit._unlock();
		@@ -151,7 +151,8 @@ // unlock updates the layer's handles; deselect to ensure they're hidden

		_lockGroup: function() {
		_lockGroup() {
		if (!this.hasTool(L.LockAction)) { return; }

		this._group.eachLayer((layer) => {
		if (this._group.isCollected(layer) ) {
		var edit = layer.editing;
		const edit = layer.editing;
		edit._lock();
		@@ -164,14 +165,15 @@ // map.addLayer also deselects the image, so we reselect here

		_addCollections: function(e) {
		var box = e.boxCollectBounds;
		var map = this._group._map;
		_addCollections(e) {
		const box = e.boxCollectBounds;
		const map = this._group._map;

		this._group.eachLayer((layer) => {
		var edit = layer.editing;
		const edit = layer.editing;

		if (layer.isSelected()) { layer.deselect(); }

		var imgBounds = L.latLngBounds(layer.getCorner(2), layer.getCorner(1));
		var zoom = map.getZoom();
		var center = map.getCenter();
		const zoom = map.getZoom();
		const center = map.getCenter();
		let imgBounds = L.latLngBounds(layer.getCorner(2), layer.getCorner(1));

		imgBounds = map._latLngBoundsToNewLayerBounds(imgBounds, zoom, center);
		@@ -185,10 +187,11 @@ if (box.intersects(imgBounds) && edit.enabled()) {

		_removeGroup: function(e) {
		_removeGroup(e) {
		if (!this.hasTool(L.DeleteAction)) { return; }
		var layersToRemove = this._group._toRemove();
		var n = layersToRemove.length;

		const layersToRemove = this._group._toRemove();
		const n = layersToRemove.length;

		if (n === 0) { return; }

		var choice = L.DomUtil.confirmDeletes(n);
		const choice = L.DomUtil.confirmDeletes(n);

		@@ -207,3 +210,3 @@ if (choice) {

		cancelExport: function() {
		cancelExport() {
		if (!this.customCollection) {
		@@ -216,5 +219,5 @@ this._exportOpts.collection = undefined;

		_addToolbar: function() {
		var group = this._group;
		var map = group._map;
		_addToolbar() {
		const group = this._group;
		const map = group._map;

		@@ -229,4 +232,4 @@ if (group.options.suppressToolbar \|\| this.toolbar) { return; }

		_removeToolbar: function() {
		var map = this._group._map;
		_removeToolbar() {
		const map = this._group._map;
		if (this.toolbar) {
		@@ -240,7 +243,7 @@ map.removeLayer(this.toolbar);

		hasTool: function(value) {
		hasTool(value) {
		return this.editActions.some(action => action === value);
		},

		addTool: function(value) {
		addTool(value) {
		if (value.baseClass === 'leaflet-toolbar-icon' && !this.hasTool(value)) {
		@@ -254,3 +257,3 @@ this._removeToolbar();

		removeTool: function(value) {
		removeTool(value) {
		this.editActions.some((item, idx) => {
		@@ -269,13 +272,14 @@ if (this.editActions[idx] === value) {

		startExport: function() {
		startExport() {
		if (!this.hasTool(L.ExportAction)) { return; }
		return new Promise(function(resolve) {
		var opts = this._exportOpts;

		return new Promise((resolve) => {
		const opts = this._exportOpts;
		opts.resolve = resolve; // allow resolving promise in user-defined functions, to stop spinner on completion
		var statusUrl;
		var self = this;

		let statusUrl;
		this.updateInterval = null;

		// this may be overridden to update the UI to show export progress or completion
		function _defaultUpdater(data) {
		const _defaultUpdater = (data) => {
		data = JSON.parse(data);
		@@ -293,6 +297,6 @@ // optimization: fetch status directly from google storage:
		if (data.status === 'complete') {
		clearInterval(self.updateInterval);
		clearInterval(this.updateInterval);

		if (!self.customCollection) {
		self._exportOpts.collection = undefined;
		if (!this.customCollection) {
		this._exportOpts.collection = undefined;
		}
		@@ -310,39 +314,39 @@
		}
		}
		};

		// receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json;
		// this may be overridden to integrate with any UI
		function _defaultHandleStatusRes(data) {
		const _defaultHandleStatusRes = (data) => {
		statusUrl = opts.statusUrl + data;
		// repeatedly fetch the status.json
		self.updateInterval = setInterval(function intervalUpdater() {
		var request = new Request(statusUrl+'?'+Date.now(), {method: 'GET'});
		fetch(request).then(function(response) {
		if (response.ok) {
		return response.text();
		this.updateInterval = setInterval(() => {
		const reqOpts = {method: 'GET'};
		const req = new Request(`${statusUrl}?${Date.now()}`, reqOpts);
		fetch(req).then((res) => {
		if (res.ok) {
		return res.text();
		}
		}).then(opts.updater);
		}, opts.frequency);
		}
		};

		// initiate the export
		function _defaultFetchStatusUrl(opts) {
		var form = new FormData();
		form.append('collection', JSON.stringify(opts.collection));
		form.append('scale', opts.scale);
		const _defaultFetchStatusUrl = (mergedOpts) => {
		const form = new FormData();
		form.append('collection', JSON.stringify(mergedOpts.collection));
		form.append('scale', mergedOpts.scale);
		form.append('upload', true);
		var requestOptions = {method: 'POST', body: form};
		var request = new Request(opts.exportStartUrl, requestOptions);
		fetch(request).then(function(response) {
		if (response.ok) {
		return response.text();

		const reqOpts = {method: 'POST', body: form};
		const req = new Request(mergedOpts.exportStartUrl, reqOpts);
		fetch(req).then((res) => {
		if (res.ok) {
		return res.text();
		}
		}).then(opts.handleStatusRes);
		}
		}).then(mergedOpts.handleStatusRes);
		};

		// If the user has passed collection property
		if (opts.collection) {
		self.customCollection = true;
		} else {
		self.customCollection = false;
		this.customCollection = !!opts.collection;
		if (!this.customCollection) {
		opts.collection = this._group.generateExportJson().images;
		@@ -358,8 +362,8 @@ }
		opts.fetchStatusUrl(opts);
		}.bind(this));
		});
		},
		});

		L.distortableCollection.edit = function(group, options) {
		L.distortableCollection.edit = (group, options) => {
		return new L.DistortableCollection.Edit(group, options);
		};

36

src/edit/DistortableImage.Edit.js

		@@ -155,3 +155,3 @@ L.DistortableImage = L.DistortableImage \|\| {};

		_appendHandlesandDragable: function() {
		_appendHandlesandDragable() {
		var ov = this._overlay;
		@@ -176,3 +176,3 @@

		_onKeyDown: function(e) {
		_onKeyDown(e) {
		var keymap = this.options.keymap;
		@@ -192,3 +192,3 @@ var handlerName = keymap[e.key];

		replaceTool: function(old, next) {
		replaceTool(old, next) {
		if (next.baseClass !== 'leaflet-toolbar-icon' \|\| this.hasTool(next)) {
		@@ -216,3 +216,3 @@ return this;

		addTool: function(value) {
		addTool(value) {
		if (value.baseClass === 'leaflet-toolbar-icon' && !this.hasTool(value)) {
		@@ -232,7 +232,7 @@ this._removeToolbar();

		hasTool: function(value) {
		hasTool(value) {
		return this.editActions.some(action => action === value);
		},

		removeTool: function(value) {
		removeTool(value) {
		this.editActions.some((item, idx) => {
		@@ -257,3 +257,3 @@ if (item === value) {
		// set the mode to the next mode or if that was the last one set mode to ''
		_nextOrNone: function(mode) {
		_nextOrNone(mode) {
		if (this.isMode(mode)) {
		@@ -270,3 +270,3 @@ if (Object.keys(this.getModes()).length >= 1) {

		_removeToolbar: function() {
		_removeToolbar() {
		var ov = this._overlay;
		@@ -281,3 +281,3 @@ var map = ov._map;

		_enableDragging: function() {
		_enableDragging() {
		var overlay = this._overlay;
		@@ -320,3 +320,3 @@ var map = overlay._map;

		_disableDragging: function() {
		_disableDragging() {
		if (this.dragging) {
		@@ -328,23 +328,23 @@ this.dragging.disable();

		_dragMode: function() {
		_dragMode() {
		this.setMode('drag');
		},

		_scaleMode: function() {
		_scaleMode() {
		this.setMode('scale');
		},

		_distortMode: function() {
		_distortMode() {
		this.setMode('distort');
		},

		_rotateMode: function() {
		_rotateMode() {
		this.setMode('rotate');
		},

		_freeRotateMode: function() {
		_freeRotateMode() {
		this.setMode('freeRotate');
		},

		_toggleLockMode: function() {
		_toggleLockMode() {
		if (this.isMode('lock')) { this._unlock(); }
		@@ -354,3 +354,3 @@ else { this._lock(); }

		_toggleOpacity: function() {
		_toggleOpacity() {
		var image = this._overlay.getElement();
		@@ -370,3 +370,3 @@ var opacity;

		_toggleBorder: function() {
		_toggleBorder() {
		var image = this._overlay.getElement();
		@@ -373,0 +373,0 @@ var outline;

6

src/util/TrigUtil.js

		L.TrigUtil = {

		calcAngle: function(x, y, unit = 'deg') {
		calcAngle(x, y, unit = 'deg') {
		return unit === 'deg' ?
		@@ -9,9 +9,9 @@ this.radiansToDegrees(Math.atan2(y, x)) :

		radiansToDegrees: function(angle) {
		radiansToDegrees(angle) {
		return (angle * 180) / Math.PI;
		},

		degreesToRadians: function(angle) {
		degreesToRadians(angle) {
		return (angle * Math.PI) / 180;
		},
		};

4

src/util/Utils.js

		L.Utils = {
		initTranslation: function() {
		initTranslation() {
		var translation = {
		@@ -44,3 +44,3 @@ deleteImage: 'Delete Image',

		getNestedVal: function(obj, key, nestedKey) {
		getNestedVal(obj, key, nestedKey) {
		var dig = [key, nestedKey];
		@@ -47,0 +47,0 @@ return dig.reduce(function(obj, k) {

64

test/karma.conf.js

		@@ -1,4 +0,1 @@
		// Karma configuration
		// Generated on Tue Jul 08 2014 12:47:31 GMT-0500 (CDT)

		module.exports = function(config) {
		@@ -10,9 +7,8 @@ config.set({
		plugins: [
		require('mocha'),
		require('karma-babel-preprocessor'),
		require('karma-chrome-launcher'),
		require('karma-coverage'),
		require('karma-mocha'),
		require('karma-mocha-reporter'),
		require('karma-sinon'),
		require('karma-coverage'),
		require('karma-mocha-reporter'),
		require('karma-phantomjs-launcher'),
		require('karma-babel-preprocessor')
		],
		@@ -27,3 +23,2 @@
		{ pattern: 'examples/*.jpg', included: false, served: true },
		{ pattern: 'examples/*.png', included: false, served: true },
		'node_modules/leaflet/dist/leaflet-src.js',
		@@ -56,8 +51,8 @@ 'node_modules/leaflet/dist/leaflet.css',
		'test/src/*Spec.js',
		'test/src/*/Spec.js'
		'test/src/*/Spec.js',
		],

		// so that karma can serve examples/example.png
		// so that karma can serve examples/example.jpg
		proxies: {
		'/examples/': '/base/examples/'
		'/examples/': '/base/examples/',
		},
		@@ -73,14 +68,14 @@
		presets: ['@babel/preset-env'],
		sourceMap: 'inline'
		sourceMap: 'inline',
		},
		filename: function(file) {
		filename: function (file) {
		return file.originalPath.replace(/\.js$/, '.es5.js');
		},
		sourceFileName: function(file) {
		sourceFileName: function (file) {
		return file.originalPath;
		}
		},
		},

		preprocessors: {
		'src/*/.js': ['babel', 'coverage']
		'src/*/.js': ['babel', 'coverage'],
		},
		@@ -94,25 +89,20 @@

		// level of logging
		// possible values: config.LOG_DISABLE
		// \|\| config.LOG_ERROR
		// \|\| config.LOG_WARN
		// \|\| config.LOG_INFO
		// \|\| config.LOG_DEBUG
		// possible values:
		// - config.LOG_DISABLE
		// - config.LOG_ERROR
		// - config.LOG_WARN
		// - config.LOG_INFO
		// - config.LOG_DEBUG
		logLevel: config.LOG_INFO,

		// start these browsers
		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
		browsers: ['PhantomJS'],
		// start these browsers, currently available:
		// - Chrome
		// - ChromeCanary
		// - ChromeHeadless

		browsers: ['ChromeHeadless'],

		// If browser does not capture in given timeout [ms], kill it
		captureTimeout: 5000,

		// to address Travis build errors; https://github.com/publiclab/Leaflet.DistortableImage/pull/675
		// https://docs.travis-ci.com/user/gui-and-headless-browsers/#karma-and-firefox-inactivity-timeouts
		browserNoActivityTimeout: 40000,

		// Workaround for PhantomJS random DISCONNECTED error
		browserDisconnectTimeout: 10000, // default 2000
		browserDisconnectTolerance: 5, // default 0

		// Continuous Integration mode
		@@ -128,6 +118,6 @@ // if true, Karma captures browsers, runs the tests and exits
		{ type: 'lcovonly', dir: './coverage', subdir: '.' },
		{ type: 'html', dir: './coverage', subdir: '.' }
		]
		}
		{ type: 'html', dir: './coverage', subdir: '.' },
		],
		},
		});
		};

6

test/src/DistortableCollectionSpec.js

		@@ -8,3 +8,3 @@ /* jshint -W030 */

		overlay = L.distortableImageOverlay('/examples/example.png', {
		overlay = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -18,3 +18,3 @@ L.latLng(41.7934, -87.6052),

		overlay2 = L.distortableImageOverlay('/examples/example.png', {
		overlay2 = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -28,3 +28,3 @@ L.latLng(41.7934, -87.605),

		overlay3 = L.distortableImageOverlay('/examples/example.png', {
		overlay3 = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -31,0 +31,0 @@ L.latLng(41.7934, -87.6054),

37

test/src/DistortableImageOverlaySpec.js

		@@ -17,3 +17,3 @@ /* jshint -W030 */

		ov = L.distortableImageOverlay('/examples/example.png', {
		ov = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -53,3 +53,3 @@ L.latLng(41.7934, -87.6052),
		it('The image will be initialized with a default set of actions if not passed', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {}).addTo(map);
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {}).addTo(map);

		@@ -63,3 +63,3 @@ L.DomEvent.on(ov2.getElement(), 'load', function() {
		it('Will initialize the image with the passed array of actions', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		actions: [L.ScaleAction, L.RestoreAction, L.RotateAction]
		@@ -75,3 +75,3 @@ }).addTo(map);
		it('Will initialize an image with no actions if passed an empty array', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		actions: [],
		@@ -90,3 +90,3 @@ }).addTo(map);
		it('Will initialize the image with the passed mode, if available', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		mode: 'rotate',
		@@ -102,7 +102,7 @@ }).addTo(map);
		it('A mode is unavailable if it either does not exist or is restricted via the `actions` option', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		mode: 'blah',
		}).addTo(map);

		var ov3 = L.distortableImageOverlay('/examples/example.png', {
		var ov3 = L.distortableImageOverlay('/examples/example.jpg', {
		mode: 'rotate',
		@@ -120,3 +120,3 @@ actions: [L.ScaleAction, L.BorderAction],
		it('If the mode is unavailable, the image\'s mode will be the 1st available one', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		mode: 'blah',
		@@ -133,3 +133,3 @@ }).addTo(map);
		it('If not passed, the image will have the default mode, `distort` if available', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {}).addTo(map);
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {}).addTo(map);

		@@ -169,5 +169,7 @@ L.DomEvent.on(ov2.getElement(), 'load', function() {

		it('Is also invoked on image click', function() {
		it('Is invoked on image click', function() {
		let ovSpy = sinon.spy();
		ov.on('select', ovSpy);
		ov.getElement().click();
		expect(ov.select).to.have.been.called;
		expect(ovSpy.called).to.be.true;
		});
		@@ -211,6 +213,7 @@
		describe('#deselect', function() {
		beforeEach(function() { // select the image
		beforeEach(function() {
		ov.select();
		setTimeout(function() {
		expect(ov._selected).to.be.true;
		expect(ov.editing.toolbar).to.be.true;
		}, 3000);
		@@ -225,4 +228,8 @@ });
		it('Is invoked on map click', function() {
		map.fire('click');
		expect(ov.deselect).to.have.been.called;
		let ovSpy = sinon.spy();
		ov.on('deselect', ovSpy);
		map.getContainer().click();
		setTimeout(function() {
		expect(ovSpy.called).to.be.true;
		}, 3000);
		});
		@@ -293,3 +300,3 @@
		beforeEach(function(done) {
		ov2 = L.distortableImageOverlay('/examples/example.png', {
		ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -296,0 +303,0 @@ L.latLng(41.7934, -87.6052),

7

test/src/edit/DistortableCollectionEditSpec.js

		@@ -12,3 +12,3 @@ /* jshint -W030 */

		overlay = L.distortableImageOverlay('/examples/example.png', {
		overlay = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -22,3 +22,3 @@ L.latLng(41.7934, -87.6052),

		overlay2 = L.distortableImageOverlay('/examples/example.png', {
		overlay2 = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -32,3 +32,3 @@ L.latLng(41.7934, -87.6050),

		overlay3 = L.distortableImageOverlay('/examples/example.png', {
		overlay3 = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -235,2 +235,3 @@ L.latLng(41.7934, -87.6054),
		chai.simulateEvent(overlay3.getElement(), 'mousedown', {shiftKey: true});
		confirm = sinon.spy();
		});
		@@ -237,0 +238,0 @@

8

test/src/edit/DistortableImageEditSpec.js

		@@ -9,3 +9,3 @@ /* jshint -W030 */

		ov = L.distortableImageOverlay('/examples/example.png', {
		ov = L.distortableImageOverlay('/examples/example.jpg', {
		corners: [
		@@ -96,3 +96,3 @@ L.latLng(41.7934, -87.6052),

		var ov3 = L.distortableImageOverlay('/examples/example.png', {
		var ov3 = L.distortableImageOverlay('/examples/example.jpg', {
		actions: [old]
		@@ -220,3 +220,3 @@ }).addTo(map);
		it('Will still update the mode of an initialized image with suppressToolbar: true', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		suppressToolbar: true,
		@@ -262,3 +262,3 @@ }).addTo(map);
		it('Will still update the mode of an initialized image with suppressToolbar: true', function(done) {
		var ov2 = L.distortableImageOverlay('/examples/example.png', {
		var ov2 = L.distortableImageOverlay('/examples/example.jpg', {
		suppressToolbar: true,
		@@ -265,0 +265,0 @@ }).addTo(map);

40

TESTING.md

		@@ -1,2 +0,2 @@
		## Testing
		# Testing

		@@ -17,30 +17,32 @@ We use Mocha & Karma with the help of Grunt for testing.

		### Running just one test
		## Pick a test browser

		For this, you need to install Mocha globally. Run `npm i -g mocha`
		In `test/karma.conf.js`, you can find the available browser options we include:

		After you've successfully installed Mocha, you can run just one type of test by passing a test file to Mocha:
		```JavaScript
		// start these browsers, currently available:
		// - Chrome
		// - ChromeCanary
		// - ChromeHeadless
		browsers: ['ChromeHeadless'],
		```

		`mocha <filename>.js`
		available browser launchers: https://npmjs.org/browse/keyword/karma-launcher

		### Running a single test block within a test file
		## Running a single test block

		In order to do this, you don't need to install Mocha globally.
		Attach a `.only()` function call to the `describe` or `it` test block you want to execute.

		You can just attach a `.only()` function call to a test block that you want to execute.

		It can be attached to both, `describe` and `it` test blocks.

		EXAMPLE:

		```javascript
		it('tests feature 1', function(){
		it('tests feature 1', function() {
		// I won't run :(
		});

		it.only('tests feature 2', function(){
		it.only('tests feature 2', function() {
		// I'll run :)
		});

		it('tests feature 3', function(){
		it('tests feature 3', function() {
		// I won't run :(
		@@ -50,10 +52,8 @@ });

		### Skipping tests
		## Skipping tests

		Sometimes, we just want to write a boilerplate code for a test, but we don't want to implement it yet.
		Attach `.skip()` function call. Works the same way as `.only()`.

		We can attach `.skip()` function call, which will skip our `it` or `describe` blocks, works just like `.only()`.
		### Note

		NOTE: After you finish writing a test, remember to remove your `.only()` or `.skip()` calls.

		They are meant for development purposes, in production we don't want to alter the actual code of our tests.
		To make your code production ready, remember to remove your `.only()` and `.skip()` calls. They are meant for development purposes only.

5

webpack.config.js

		@@ -57,3 +57,3 @@ const glob = require('glob');
		host: 'localhost',
		port: 8080,
		port: 8081,
		hot: true,
		@@ -77,5 +77,3 @@ writeToDisk: true,
		'vendor.js': [
		'./node_modules/jquery/dist/jquery.js',
		'./node_modules/leaflet-toolbar/dist/leaflet.toolbar.js',
		'./node_modules/promise-polyfill/dist/polyfill.min.js',
		'./node_modules/webgl-distort/dist/webgl-distort.js',
		@@ -86,3 +84,2 @@ './node_modules/glfx/glfx.js',
		'vendor.css': [
		'./node_modules/leaflet/dist/leaflet.css',
		'./node_modules/leaflet-toolbar/dist/leaflet.toolbar.css',
		@@ -89,0 +86,0 @@ ],

5

WEBPACK.md

		@@ -86,3 +86,3 @@ # Webpack configuration file
		host: 'localhost',
		port: 8080,
		port: 8081,
		// Enable Hot Module Replacement (HMR), allowing
		@@ -121,5 +121,3 @@ // module updates without forcing a page reload.
		'vendor.js': [
		'./node_modules/jquery/dist/jquery.js',
		'./node_modules/leaflet-toolbar/dist/leaflet.toolbar.js',
		'./node_modules/promise-polyfill/dist/polyfill.min.js',
		'./node_modules/webgl-distort/dist/webgl-distort.js',
		@@ -131,3 +129,2 @@ './node_modules/glfx/glfx.js',
		'vendor.css': [
		'./node_modules/leaflet/dist/leaflet.css',
		'./node_modules/leaflet-toolbar/dist/leaflet.toolbar.css'
		@@ -134,0 +131,0 @@ ]

.gitpod.yml

examples/example.png

.jshintrc