diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
index 824eebf3d..7dfd7912f 100644
--- a/dist/leaflet.distortableimage.js
+++ b/dist/leaflet.distortableimage.js
@@ -1,8116 +1,3 @@
-/******/ (function() { // webpackBootstrap
-/******/ var __webpack_modules__ = ({
-
-/***/ "./node_modules/ansi-html-community/index.js":
-/*!***************************************************!*\
- !*** ./node_modules/ansi-html-community/index.js ***!
- \***************************************************/
-/***/ (function(module) {
-
-"use strict";
-
-
-module.exports = ansiHTML
-
-// Reference to https://github.com/sindresorhus/ansi-regex
-var _regANSI = /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/
-
-var _defColors = {
- reset: ['fff', '000'], // [FOREGROUD_COLOR, BACKGROUND_COLOR]
- black: '000',
- red: 'ff0000',
- green: '209805',
- yellow: 'e8bf03',
- blue: '0000ff',
- magenta: 'ff00ff',
- cyan: '00ffee',
- lightgrey: 'f0f0f0',
- darkgrey: '888'
-}
-var _styles = {
- 30: 'black',
- 31: 'red',
- 32: 'green',
- 33: 'yellow',
- 34: 'blue',
- 35: 'magenta',
- 36: 'cyan',
- 37: 'lightgrey'
-}
-var _openTags = {
- '1': 'font-weight:bold', // bold
- '2': 'opacity:0.5', // dim
- '3': '', // italic
- '4': '', // underscore
- '8': 'display:none', // hidden
- '9': '' // delete
-}
-var _closeTags = {
- '23': '', // reset italic
- '24': '', // reset underscore
- '29': '' // reset delete
-}
-
-;[0, 21, 22, 27, 28, 39, 49].forEach(function (n) {
- _closeTags[n] = ''
-})
-
-/**
- * Converts text with ANSI color codes to HTML markup.
- * @param {String} text
- * @returns {*}
- */
-function ansiHTML (text) {
- // Returns the text if the string has no ANSI escape code.
- if (!_regANSI.test(text)) {
- return text
- }
-
- // Cache opened sequence.
- var ansiCodes = []
- // Replace with markup.
- var ret = text.replace(/\033\[(\d+)m/g, function (match, seq) {
- var ot = _openTags[seq]
- if (ot) {
- // If current sequence has been opened, close it.
- if (!!~ansiCodes.indexOf(seq)) { // eslint-disable-line no-extra-boolean-cast
- ansiCodes.pop()
- return ''
- }
- // Open tag.
- ansiCodes.push(seq)
- return ot[0] === '<' ? ot : ''
- }
-
- var ct = _closeTags[seq]
- if (ct) {
- // Pop sequence
- ansiCodes.pop()
- return ct
- }
- return ''
- })
-
- // Make sure tags are closed.
- var l = ansiCodes.length
- ;(l > 0) && (ret += Array(l + 1).join(''))
-
- return ret
-}
-
-/**
- * Customize colors.
- * @param {Object} colors reference to _defColors
- */
-ansiHTML.setColors = function (colors) {
- if (typeof colors !== 'object') {
- throw new Error('`colors` parameter must be an Object.')
- }
-
- var _finalColors = {}
- for (var key in _defColors) {
- var hex = colors.hasOwnProperty(key) ? colors[key] : null
- if (!hex) {
- _finalColors[key] = _defColors[key]
- continue
- }
- if ('reset' === key) {
- if (typeof hex === 'string') {
- hex = [hex]
- }
- if (!Array.isArray(hex) || hex.length === 0 || hex.some(function (h) {
- return typeof h !== 'string'
- })) {
- throw new Error('The value of `' + key + '` property must be an Array and each item could only be a hex string, e.g.: FF0000')
- }
- var defHexColor = _defColors[key]
- if (!hex[0]) {
- hex[0] = defHexColor[0]
- }
- if (hex.length === 1 || !hex[1]) {
- hex = [hex[0]]
- hex.push(defHexColor[1])
- }
-
- hex = hex.slice(0, 2)
- } else if (typeof hex !== 'string') {
- throw new Error('The value of `' + key + '` property must be a hex string, e.g.: FF0000')
- }
- _finalColors[key] = hex
- }
- _setTags(_finalColors)
-}
-
-/**
- * Reset colors.
- */
-ansiHTML.reset = function () {
- _setTags(_defColors)
-}
-
-/**
- * Expose tags, including open and close.
- * @type {Object}
- */
-ansiHTML.tags = {}
-
-if (Object.defineProperty) {
- Object.defineProperty(ansiHTML.tags, 'open', {
- get: function () { return _openTags }
- })
- Object.defineProperty(ansiHTML.tags, 'close', {
- get: function () { return _closeTags }
- })
-} else {
- ansiHTML.tags.open = _openTags
- ansiHTML.tags.close = _closeTags
-}
-
-function _setTags (colors) {
- // reset all
- _openTags['0'] = 'font-weight:normal;opacity:1;color:#' + colors.reset[0] + ';background:#' + colors.reset[1]
- // inverse
- _openTags['7'] = 'color:#' + colors.reset[1] + ';background:#' + colors.reset[0]
- // dark grey
- _openTags['90'] = 'color:#' + colors.darkgrey
-
- for (var code in _styles) {
- var color = _styles[code]
- var oriColor = colors[color] || '000'
- _openTags[code] = 'color:#' + oriColor
- code = parseInt(code)
- _openTags[(code + 10).toString()] = 'background:#' + oriColor
- }
-}
-
-ansiHTML.reset()
-
-
-/***/ }),
-
-/***/ "./src/DistortableCollection.js":
-/*!**************************************!*\
- !*** ./src/DistortableCollection.js ***!
- \**************************************/
-/***/ (function() {
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-var arr = [];
-L.DistortableCollection = L.FeatureGroup.extend({
- options: {
- editable: true,
- exportOpts: {
- exportStartUrl: '//export.mapknitter.org/export',
- statusUrl: '//export.mapknitter.org',
- exportUrl: 'http://export.mapknitter.org/'
- }
- },
- initialize: function initialize(options) {
- L.setOptions(this, options);
- L.FeatureGroup.prototype.initialize.call(this, options);
- L.Utils.initTranslation.call(this);
- this.editable = this.options.editable;
- },
- onAdd: function onAdd(map) {
- L.FeatureGroup.prototype.onAdd.call(this, map);
- this._map = map;
- if (this.editable) {
- this.editing.enable();
- }
-
- /**
- * although we have a DistortableCollection.Edit class that handles collection events to keep our code managable,
- * events that need to be added on individual images are kept here to do so through `layeradd`.
- */
- this.on('layeradd', this._addEvents, this);
- this.on('layerremove', this._removeEvents, this);
- },
- onRemove: function onRemove() {
- if (this.editing) {
- this.editing.disable();
- }
- this.off('layeradd', this._addEvents, this);
- this.off('layerremove', this._removeEvents, this);
- },
- _addEvents: function _addEvents(e) {
- var layer = e.layer;
- L.DomEvent.on(layer, {
- dragstart: this._dragStartMultiple,
- drag: this._dragMultiple
- }, this);
- L.DomEvent.on(layer.getElement(), {
- mousedown: this._deselectOthers,
- /* Enable longpress for multi select for touch devices. */
- contextmenu: this._longPressMultiSelect
- }, this);
- },
- _removeEvents: function _removeEvents(e) {
- var layer = e.layer;
- L.DomEvent.off(layer, {
- dragstart: this._dragStartMultiple,
- drag: this._dragMultiple
- }, this);
- L.DomEvent.off(layer.getElement(), {
- mousedown: this._deselectOthers,
- contextmenu: this._longPressMultiSelect
- }, this);
- },
- _longPressMultiSelect: function _longPressMultiSelect(e) {
- var _this = this;
- if (!this.editable) {
- return;
- }
- e.preventDefault();
- this.eachLayer(function (layer) {
- var edit = layer.editing;
- if (layer.getElement() === e.target && edit.enabled()) {
- L.DomUtil.toggleClass(layer.getElement(), 'collected');
- if (_this.anyCollected()) {
- layer.deselect();
- _this.editing._addToolbar();
- } else {
- _this.editing._removeToolbar();
- }
- }
- });
- },
- isCollected: function isCollected(overlay) {
- return L.DomUtil.hasClass(overlay.getElement(), 'collected');
- },
- anyCollected: function anyCollected() {
- var layerArr = this.getLayers();
- return layerArr.some(this.isCollected.bind(this));
- },
- _toggleCollected: function _toggleCollected(e, layer) {
- if (e.shiftKey) {
- /* conditional prevents disabled images from flickering multi-select mode */
- if (layer.editing.enabled()) {
- L.DomUtil.toggleClass(e.target, 'collected');
- // re-order layers by _leaflet_id to match their display order in UI
- // add new layer to right position and avoid repitition
- var newArr = arr.every(function (each) {
- return each._leaflet_id !== layer._leaflet_id;
- });
- if (newArr) {
- arr.push(layer);
- } else {
- arr.splice(arr.indexOf(layer), 1);
- }
- }
- }
- if (this.anyCollected()) {
- layer.deselect();
- } else {
- this.editing._removeToolbar();
- }
- },
- _deselectOthers: function _deselectOthers(e) {
- var _this2 = this;
- if (!this.editable) {
- return;
- }
- this.eachLayer(function (layer) {
- if (layer.getElement() !== e.target) {
- layer.deselect();
- } else {
- _this2._toggleCollected(e, layer);
- }
- });
- if (e) {
- L.DomEvent.stopPropagation(e);
- }
- },
- _dragStartMultiple: function _dragStartMultiple(e) {
- var overlay = e.target;
- var map = this._map;
- var i;
- if (!this.isCollected(overlay)) {
- return;
- }
- this.eachLayer(function (layer) {
- layer._dragStartPoints = {};
- layer.deselect();
- for (i = 0; i < 4; i++) {
- var c = layer.getCorner(i);
- layer._dragStartPoints[i] = map.latLngToLayerPoint(c);
- }
- });
- },
- _dragMultiple: function _dragMultiple(e) {
- var overlay = e.target;
- var map = this._map;
- if (!this.isCollected(overlay)) {
- return;
- }
- var topLeft = map.latLngToLayerPoint(overlay.getCorner(0));
- var delta = overlay._dragStartPoints[0].subtract(topLeft);
- this._updateCollectionFromPoints(delta, overlay);
- },
- _toRemove: function _toRemove() {
- var _this3 = this;
- var layerArr = this.getLayers();
- return layerArr.filter(function (layer) {
- var mode = layer.editing._mode;
- return _this3.isCollected(layer) && mode !== 'lock';
- });
- },
- _toMove: function _toMove(overlay) {
- var _this4 = this;
- var layerArr = this.getLayers();
- return layerArr.filter(function (layer) {
- var mode = layer.editing._mode;
- return layer !== overlay && _this4.isCollected(layer) && mode !== 'lock';
- });
- },
- _updateCollectionFromPoints: function _updateCollectionFromPoints(delta, overlay) {
- var layersToMove = this._toMove(overlay);
- var p = new L.Transformation(1, -delta.x, 1, -delta.y);
- var i;
- layersToMove.forEach(function (layer) {
- var movedPoints = {};
- for (i = 0; i < 4; i++) {
- movedPoints[i] = p.transform(layer._dragStartPoints[i]);
- }
- layer.setCornersFromPoints(movedPoints);
- });
- },
- _getAvgCmPerPixel: function _getAvgCmPerPixel(imgs) {
- var reduce = imgs.reduce(function (sum, img) {
- return sum + img.cm_per_pixel;
- }, 0);
- return reduce / imgs.length;
- },
- // connects to JSON file and fetches JSON data therein from remote source
- fetchRemoteJson: function fetchRemoteJson(url) {
- return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
- var index, imgCollectionProps, response;
- return _regeneratorRuntime().wrap(function _callee$(_context) {
- while (1) {
- switch (_context.prev = _context.next) {
- case 0:
- index = 0;
- imgCollectionProps = [];
- _context.prev = 2;
- _context.next = 5;
- return axios.get(url);
- case 5:
- response = _context.sent;
- if (!response.data.hasOwnProperty('avg_cm_per_pixel')) {
- _context.next = 14;
- break;
- }
- if (!(response.data.collection.length > 1)) {
- _context.next = 10;
- break;
- }
- response.data.collection.forEach(function (data) {
- imgCollectionProps[index] = data;
- index++;
- });
- return _context.abrupt("return", {
- avg_cm_per_pixel: response.data.avg_cm_per_pixel,
- imgCollectionProps: imgCollectionProps
- });
- case 10:
- imgCollectionProps[index] = response.data.collection;
- return _context.abrupt("return", {
- avg_cm_per_pixel: response.data.avg_cm_per_pixel,
- imgCollectionProps: imgCollectionProps
- });
- case 14:
- if (!(response.data.length > 1)) {
- _context.next = 17;
- break;
- }
- response.data.forEach(function (data) {
- imgCollectionProps[index] = data;
- index++;
- });
- return _context.abrupt("return", {
- imgCollectionProps: imgCollectionProps
- });
- case 17:
- imgCollectionProps[index] = response.data;
- return _context.abrupt("return", {
- imgCollectionProps: imgCollectionProps
- });
- case 19:
- _context.next = 24;
- break;
- case 21:
- _context.prev = 21;
- _context.t0 = _context["catch"](2);
- console.log('err', _context.t0);
- case 24:
- case "end":
- return _context.stop();
- }
- }
- }, _callee, null, [[2, 21]]);
- }))();
- },
- // expects url in this format: https://archive.org/download/mkl-1/mkl-1.json
- recreateImagesFromJsonUrl: function recreateImagesFromJsonUrl(url) {
- var _this5 = this;
- return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
- var imageCollectionObj;
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
- while (1) {
- switch (_context2.prev = _context2.next) {
- case 0:
- imageCollectionObj = {};
- if (!url) {
- _context2.next = 6;
- break;
- }
- _context2.next = 4;
- return _this5.fetchRemoteJson(url);
- case 4:
- imageCollectionObj = _context2.sent;
- return _context2.abrupt("return", imageCollectionObj);
- case 6:
- ;
- return _context2.abrupt("return", imageCollectionObj);
- case 8:
- case "end":
- return _context2.stop();
- }
- }
- }, _callee2);
- }))();
- },
- generateExportJson: function generateExportJson() {
- var allImages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
- var json = {};
- json.images = [];
- this.eachLayer(function (layer) {
- if (allImages || this.isCollected(layer)) {
- var sections = layer._image.src.split('/');
- var filename = sections[sections.length - 1];
- var zc = layer.getCorners();
- var corners = [{
- lat: zc[0].lat,
- lon: zc[0].lng || zc[0].lon
- }, {
- lat: zc[1].lat,
- lon: zc[1].lng || zc[1].lon
- }, {
- lat: zc[3].lat,
- lon: zc[3].lng || zc[3].lon
- }, {
- lat: zc[2].lat,
- lon: zc[2].lng || zc[2].lon
- }];
- json.images.push({
- id: layer._leaflet_id,
- src: layer._image.src,
- width: layer._image.width,
- height: layer._image.height,
- tooltipText: layer.getTooltipText(),
- image_file_name: filename,
- nodes: corners,
- cm_per_pixel: L.ImageUtil.getCmPerPixel(layer)
- });
- }
- }, this);
- json.images = json.images.reverse();
- json.avg_cm_per_pixel = this._getAvgCmPerPixel(json.images);
- return json;
- }
-});
-L.distortableCollection = function (id, options) {
- return new L.DistortableCollection(id, options);
-};
-
-/***/ }),
-
-/***/ "./src/DistortableImageOverlay.js":
-/*!****************************************!*\
- !*** ./src/DistortableImageOverlay.js ***!
- \****************************************/
-/***/ (function() {
-
-L.DistortableImageOverlay = L.ImageOverlay.extend({
- options: {
- height: 200,
- crossOrigin: true,
- // todo: find ideal number to prevent distortions during RotateScale, and make it dynamic (remove hardcoding)
- edgeMinWidth: 50,
- editable: true,
- mode: 'distort',
- selected: false,
- interactive: true,
- tooltipText: ''
- },
- initialize: function initialize(url, options) {
- L.setOptions(this, options);
- L.Utils.initTranslation.call(this);
- this.edgeMinWidth = this.options.edgeMinWidth;
- this.editable = this.options.editable;
- this._selected = this.options.selected;
- this._url = url;
- this.rotation = {};
- this.interactive = this.options.interactive;
- this.tooltipText = this.options.tooltipText;
- },
- onAdd: function onAdd(map) {
- var _this = this;
- this._map = map;
- if (!this.getElement()) {
- this._initImage();
- }
- map.on('viewreset', this._reset, this);
- if (this.options.corners) {
- this._corners = this.options.corners;
- if (map.options.zoomAnimation && L.Browser.any3d) {
- map.on('zoomanim', this._animateZoom, this);
- }
- }
-
- // Have to wait for the image to load because need to access its w/h
- L.DomEvent.on(this.getElement(), 'load', function () {
- _this.getPane().appendChild(_this.getElement());
- _this._initImageDimensions();
- if (_this.options.rotation) {
- var units = _this.options.rotation.deg >= 0 ? 'deg' : 'rad';
- _this.setAngle(_this.options.rotation[units], units);
- } else {
- _this.rotation = {
- deg: 0,
- rad: 0
- };
- _this._reset();
- }
-
- /* Initialize default corners if not already set */
- if (!_this._corners) {
- if (map.options.zoomAnimation && L.Browser.any3d) {
- map.on('zoomanim', _this._animateZoom, _this);
- }
- }
-
- /** if there is a featureGroup, only its editable option matters */
- var eventParents = _this._eventParents;
- if (eventParents) {
- _this.eP = eventParents[Object.keys(eventParents)[0]];
- if (_this.eP.editable) {
- _this.editing.enable();
- }
- } else {
- if (_this.editable) {
- _this.editing.enable();
- }
- _this.eP = null;
- }
- });
- L.DomEvent.on(this.getElement(), 'click', this.select, this);
- L.DomEvent.on(map, {
- singleclickon: this._singleClickListeners,
- singleclickoff: this._resetClickListeners,
- singleclick: this._singleClick
- }, this);
-
- /**
- * custom events fired from DoubleClickLabels.js. Used to differentiate
- * single / dblclick to not deselect images on map dblclick.
- */
- if (!(map.doubleClickZoom.enabled() || map.doubleClickLabels.enabled())) {
- L.DomEvent.on(map, 'click', this.deselect, this);
- }
- this.fire('add');
- L.DomEvent.on(this.getElement(), 'mousemove', this.activateTooltip, this);
- L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
- },
- onRemove: function onRemove(map) {
- L.DomEvent.off(this.getElement(), 'click', this.select, this);
- L.DomEvent.off(map, {
- singleclickon: this._singleClickListeners,
- singleclickoff: this._resetClickListeners,
- singleclick: this._singleClick
- }, this);
- L.DomEvent.off(map, 'click', this.deselect, this);
- if (this.editing) {
- this.editing.disable();
- }
- this.fire('remove');
- L.ImageOverlay.prototype.onRemove.call(this, map);
- L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
- L.DomEvent.off(this.getElement(), 'mousemove', this.deactivateTooltip, this);
- },
- _initImageDimensions: function _initImageDimensions() {
- var map = this._map;
- var originalImageWidth = L.DomUtil.getStyle(this.getElement(), 'width');
- var originalImageHeight = L.DomUtil.getStyle(this.getElement(), 'height');
- var aspectRatio = parseInt(originalImageWidth) / parseInt(originalImageHeight);
- var imageHeight = this.options.height;
- var imageWidth = parseInt(aspectRatio * imageHeight);
- var center = map.project(map.getCenter());
- var offset = L.point(imageWidth, imageHeight).divideBy(2);
- if (this.options.corners) {
- this._corners = this.options.corners;
- } else {
- this._corners = [map.unproject(center.subtract(offset)), map.unproject(center.add(L.point(offset.x, -offset.y))), map.unproject(center.add(L.point(-offset.x, offset.y))), map.unproject(center.add(offset))];
- }
- this._initialDimensions = {
- 'center': center,
- 'offset': offset,
- 'zoom': map.getZoom()
- };
- this.setBounds(L.latLngBounds(this.getCorners()));
- },
- _singleClick: function _singleClick(e) {
- if (e.type === 'singleclick') {
- this.deselect();
- } else {
- return;
- }
- },
- _singleClickListeners: function _singleClickListeners() {
- var map = this._map;
- L.DomEvent.off(map, 'click', this.deselect, this);
- L.DomEvent.on(map, 'singleclick', this.deselect, this);
- },
- _resetClickListeners: function _resetClickListeners() {
- var map = this._map;
- L.DomEvent.on(map, 'click', this.deselect, this);
- L.DomEvent.off(map, 'singleclick', this.deselect, this);
- },
- isSelected: function isSelected() {
- return this._selected;
- },
- deselect: function deselect() {
- var edit = this.editing;
- if (!edit.enabled()) {
- return;
- }
- edit._removeToolbar();
- edit._hideMarkers();
- this._selected = false;
- this.fire('deselect');
- return this;
- },
- select: function select(e) {
- var edit = this.editing;
- var eP = this.eP;
- if (!edit.enabled()) {
- return;
- }
- if (e) {
- L.DomEvent.stopPropagation(e);
- }
-
- // this ensures deselection of all other images, allowing us to keep collection group optional
- this._programmaticGrouping();
- this._selected = true;
- edit._addToolbar();
- edit._showMarkers();
- this.fire('select');
-
- // we run the selection logic 1st anyway because the collection group's _addToolbar method depends on it
- if (eP && eP.anyCollected()) {
- this.deselect();
- return;
- }
- return this;
- },
- _programmaticGrouping: function _programmaticGrouping() {
- this._map.eachLayer(function (layer) {
- if (layer instanceof L.DistortableImageOverlay) {
- layer.deselect();
- }
- });
- },
- setCorner: function setCorner(corner, latlng) {
- var edit = this.editing;
- this._corners[corner] = latlng;
- this.setBounds(L.latLngBounds(this.getCorners()));
- this.fire('update');
- if (edit.toolbar && edit.toolbar instanceof L.DistortableImage.PopupBar) {
- edit._updateToolbarPos();
- }
- this.edited = true;
- return this;
- },
- _cornerExceedsMapLats: function _cornerExceedsMapLats(zoom, corner, map) {
- if (map.options.crs.Simple == L.CRS.Simple) {
- return false;
- } else {
- var exceedsTop;
- var exceedsBottom;
- if (zoom === 0) {
- exceedsTop = map.project(corner).y < 2;
- exceedsBottom = map.project(corner).y >= 255;
- } else {
- exceedsTop = map.project(corner).y / zoom < 2;
- exceedsBottom = map.project(corner).y / Math.pow(2, zoom) >= 255;
- }
- return exceedsTop || exceedsBottom;
- }
- },
- activateTooltip: function activateTooltip() {
- if (!this._selected) {
- this.bindTooltip(this.tooltipText, {
- direction: 'top'
- }).openTooltip();
- }
- },
- closeToolTip: function closeToolTip() {
- this.closeTooltip();
- },
- deactivateTooltip: function deactivateTooltip() {
- this.unbindTooltip();
- },
- getTooltipText: function getTooltipText() {
- return this.tooltipText;
- },
- setCorners: function setCorners(latlngObj) {
- var map = this._map;
- var zoom = map.getZoom();
- var edit = this.editing;
- var i = 0;
-
- // this is to fix https://github.com/publiclab/Leaflet.DistortableImage/issues/402
- for (var k in latlngObj) {
- if (this._cornerExceedsMapLats(zoom, latlngObj[k], map)) {
- // calling reset / update w/ the same corners bc it prevents a marker flicker for rotate
- this.setBounds(L.latLngBounds(this.getCorners()));
- this.fire('update');
- return;
- }
- }
- for (var _k in latlngObj) {
- this._corners[i] = latlngObj[_k];
- i += 1;
- }
- this.setBounds(L.latLngBounds(this.getCorners()));
- this.fire('update');
- if (edit.toolbar && edit.toolbar instanceof L.DistortableImage.PopupBar) {
- edit._updateToolbarPos();
- }
- this.edited = true;
- return this;
- },
- setCornersFromPoints: function setCornersFromPoints(pointsObj) {
- var map = this._map;
- var zoom = map.getZoom();
- var edit = this.editing;
- var i = 0;
- for (var k in pointsObj) {
- var corner = map.layerPointToLatLng(pointsObj[k]);
- if (this._cornerExceedsMapLats(zoom, corner, map)) {
- // calling reset / update w/ the same corners bc it prevents a marker flicker for rotate
- this.setBounds(L.latLngBounds(this.getCorners()));
- this.fire('update');
- return;
- }
- }
- for (var _k2 in pointsObj) {
- this._corners[i] = map.layerPointToLatLng(pointsObj[_k2]);
- i += 1;
- }
- this.setBounds(L.latLngBounds(this.getCorners()));
- this.fire('update');
- if (edit.toolbar && edit.toolbar instanceof L.DistortableImage.PopupBar) {
- edit._updateToolbarPos();
- }
- this.edited = true;
- return this;
- },
- scaleBy: function scaleBy(scale) {
- var map = this._map;
- var center = map.project(this.getCenter());
- var i;
- var p;
- var scaledCorners = {};
- if (scale === 0) {
- return;
- }
- for (i = 0; i < 4; i++) {
- p = map.project(this.getCorner(i)).subtract(center).multiplyBy(scale).add(center);
- scaledCorners[i] = map.unproject(p);
- }
- this.setCorners(scaledCorners);
- return this;
- },
- getAngle: function getAngle() {
- var unit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'deg';
- var matrix = this.getElement().style[L.DomUtil.TRANSFORM].split('matrix3d')[1].slice(1, -1).split(',');
- var row0x = matrix[0];
- var row0y = matrix[1];
- var row1x = matrix[4];
- var row1y = matrix[5];
- var determinant = row0x * row1y - row0y * row1x;
- var angle = L.TrigUtil.calcAngle(row0x, row0y, 'rad');
- if (determinant < 0) {
- angle += angle < 0 ? Math.PI : -Math.PI;
- }
- if (angle < 0) {
- angle = 2 * Math.PI + angle;
- }
- return unit === 'deg' ? Math.round(L.TrigUtil.radiansToDegrees(angle)) : L.Util.formatNum(angle, 2);
- },
- setAngle: function setAngle(angle) {
- var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'deg';
- var currentAngle = this.getAngle(unit);
- var angleToRotateBy = angle - currentAngle;
- this.rotateBy(angleToRotateBy, unit);
- return this;
- },
- rotateBy: function rotateBy(angle) {
- var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'deg';
- var map = this._map;
- var center = map.project(this.getCenter());
- var corners = {};
- var i;
- var p;
- var q;
- if (unit === 'deg') {
- angle = L.TrigUtil.degreesToRadians(angle);
- }
- for (i = 0; i < 4; i++) {
- p = map.project(this.getCorner(i)).subtract(center);
- q = L.point(Math.cos(angle) * p.x - Math.sin(angle) * p.y, Math.sin(angle) * p.x + Math.cos(angle) * p.y);
- corners[i] = map.unproject(q.add(center));
- }
- this.setCorners(corners);
- return this;
- },
- dragBy: function dragBy(formerPoint, newPoint) {
- var map = this._map;
- var i;
- var p;
- var transCorners = {};
- var delta = map.project(formerPoint).subtract(map.project(newPoint));
- for (i = 0; i < 4; i++) {
- p = map.project(this.getCorner(i)).subtract(delta);
- transCorners[i] = map.unproject(p);
- }
- this.setCorners(transCorners);
- },
- restore: function restore() {
- var map = this._map;
- var center = this._initialDimensions.center;
- var offset = this._initialDimensions.offset;
- var zoom = this._initialDimensions.zoom;
- var corners = [center.subtract(offset), center.add(L.point(offset.x, -offset.y)), center.add(L.point(-offset.x, offset.y)), center.add(offset)];
- for (var i = 0; i < 4; i++) {
- if (!map.unproject(corners[i], zoom).equals(this.getCorner(i))) {
- this.setCorner(i, map.unproject(corners[i], zoom));
- }
- }
- this.edited = false;
- this.fire('restore');
- return this;
- },
- /* Copied from Leaflet v0.7 https://github.com/Leaflet/Leaflet/blob/66282f14bcb180ec87d9818d9f3c9f75afd01b30/src/dom/DomUtil.js#L189-L199 */
- /* since L.DomUtil.getTranslateString() is deprecated in Leaflet v1.0 */
- _getTranslateString: function _getTranslateString(point) {
- // on WebKit browsers (Chrome/Safari/iOS Safari/Android)
- // using translate3d instead of translate
- // makes animation smoother as it ensures HW accel is used.
- // Firefox 13 doesn't care
- // (same speed either way), Opera 12 doesn't support translate3d
-
- var is3d = L.Browser.webkit3d;
- var open = 'translate' + (is3d ? '3d' : '') + '(';
- var close = (is3d ? ',0' : '') + ')';
- return open + point.x + 'px,' + point.y + 'px' + close;
- },
- _reset: function _reset() {
- var map = this._map;
- var image = this.getElement();
- var latLngToLayerPoint = L.bind(map.latLngToLayerPoint, map);
- var transformMatrix = this._calculateProjectiveTransform(latLngToLayerPoint);
- var topLeft = latLngToLayerPoint(this.getCorner(0));
- var warp = L.DomUtil.getMatrixString(transformMatrix);
- var translation = this._getTranslateString(topLeft);
-
- /* See L.DomUtil.setPosition. Mainly for the purposes of L.Draggable. */
- image._leaflet_pos = topLeft;
- image.style[L.DomUtil.TRANSFORM] = [translation, warp].join(' ');
-
- /* Set origin to the upper-left corner rather than
- * the center of the image, which is the default.
- */
- image.style[L.DomUtil.TRANSFORM + '-origin'] = '0 0 0';
- this.rotation.deg = this.getAngle();
- this.rotation.rad = this.getAngle('rad');
- },
- /*
- * Calculates the transform string that will be
- * correct *at the end* of zooming.
- * Leaflet then generates a CSS3 animation between the current transform and
- * future transform which makes the transition appear smooth.
- */
- _animateZoom: function _animateZoom(event) {
- var map = this._map;
- var image = this.getElement();
- var latLngToNewLayerPoint = function latLngToNewLayerPoint(latlng) {
- return map._latLngToNewLayerPoint(latlng, event.zoom, event.center);
- };
- var transformMatrix = this._calculateProjectiveTransform(latLngToNewLayerPoint);
- var topLeft = latLngToNewLayerPoint(this.getCorner(0));
- var warp = L.DomUtil.getMatrixString(transformMatrix);
- var translation = this._getTranslateString(topLeft);
-
- /* See L.DomUtil.setPosition. Mainly for the purposes of L.Draggable. */
- image._leaflet_pos = topLeft;
- image.style[L.DomUtil.TRANSFORM] = [translation, warp].join(' ');
- },
- getCorners: function getCorners() {
- return this._corners;
- },
- getCorner: function getCorner(i) {
- return this._corners[i];
- },
- // image (vertex) centroid calculation
- getCenter: function getCenter() {
- var map = this._map;
- var reduce = this.getCorners().reduce(function (agg, corner) {
- return agg.add(map.project(corner));
- }, L.point(0, 0));
- return map.unproject(reduce.divideBy(4));
- },
- _calculateProjectiveTransform: function _calculateProjectiveTransform(latLngToCartesian) {
- /* Setting reasonable but made-up image defaults
- * allow us to place images on the map before
- * they've finished downloading. */
- var offset = latLngToCartesian(this.getCorner(0));
- var w = this.getElement().offsetWidth || 500;
- var h = this.getElement().offsetHeight || 375;
- var c = [];
- var j;
- /* Convert corners to container points (i.e. cartesian coordinates). */
- for (j = 0; j < 4; j++) {
- c.push(latLngToCartesian(this.getCorner(j))._subtract(offset));
- }
-
- /*
- * This matrix describes the action of
- * the CSS transform on each corner of the image.
- * It maps from the coordinate system centered
- * at the upper left corner of the image
- * to the region bounded by the latlngs in this._corners.
- * For example:
- * 0, 0, c[0].x, c[0].y
- * says that the upper-left corner of the image
- * maps to the first latlng in this._corners.
- */
- return L.MatrixUtil.general2DProjection(0, 0, c[0].x, c[0].y, w, 0, c[1].x, c[1].y, 0, h, c[2].x, c[2].y, w, h, c[3].x, c[3].y);
- }
-});
-L.distortableImageOverlay = function (id, options) {
- return new L.DistortableImageOverlay(id, options);
-};
-L.Map.addInitHook(function () {
- if (!L.DomUtil.hasClass(this.getContainer(), 'ldi')) {
- L.DomUtil.addClass(this.getContainer(), 'ldi');
- }
-});
-
-/***/ }),
-
-/***/ "./src/components/DistortableImage.Keymapper.js":
-/*!******************************************************!*\
- !*** ./src/components/DistortableImage.Keymapper.js ***!
- \******************************************************/
-/***/ (function() {
-
-var _this = this;
-L.DomUtil = L.DomUtil || {};
-L.DistortableImage = L.DistortableImage || {};
-L.distortableImage = L.DistortableImage;
-L.DistortableImage.Keymapper = L.Handler.extend({
- options: {
- position: 'topright'
- },
- initialize: function initialize(map, options) {
- this._map = map;
- L.setOptions(this, options);
- },
- addHooks: function addHooks() {
- if (!this._keymapper) {
- this._container = this._buildContainer();
- this._scrollWrapper = this._wrap();
- this._toggler = this._createButton();
- this._setMapper(this._container, this._scrollWrapper, this._toggler);
- L.DomEvent.on(this._toggler, 'click', this._toggleKeymapper, this);
- L.DomEvent.disableClickPropagation(this._container);
- L.DomEvent.disableScrollPropagation(this._container);
- }
- },
- removeHooks: function removeHooks() {
- if (this._keymapper) {
- L.DomEvent.off(this._toggler, 'click', this._toggleKeymapper, this);
- L.DomUtil.remove(this._toggler);
- L.DomUtil.remove(this._scrollWrapper);
- L.DomUtil.remove(this._container);
- this._keymapper = false;
- }
- },
- _buildContainer: function _buildContainer() {
- var container = L.DomUtil.create('div', 'ldi-keymapper-hide');
- container.setAttribute('id', 'ldi-keymapper');
- var divider = L.DomUtil.create('br', 'divider');
- container.appendChild(divider);
- return container;
- },
- _createButton: function _createButton() {
- var toggler = L.DomUtil.create('a', '');
- toggler.innerHTML = L.IconUtil.create('keyboard_open');
- toggler.setAttribute('id', 'toggle-keymapper');
- toggler.setAttribute('href', '#');
- toggler.setAttribute('title', 'Show keymap');
- // Will force screen readers like VoiceOver to read this as "Show keymap - button"
- toggler.setAttribute('role', 'button');
- toggler.setAttribute('aria-label', 'Show keymap');
- return toggler;
- },
- _wrap: function _wrap() {
- var wrap = L.DomUtil.create('div', '');
- wrap.setAttribute('id', 'keymapper-wrapper');
- wrap.style.display = 'none';
- return wrap;
- },
- _setMapper: function _setMapper(container, wrap, button) {
- this._keymapper = L.control({
- position: this.options.position
- });
- this._keymapper.onAdd = function () {
- container.appendChild(wrap);
- wrap.insertAdjacentHTML('beforeend', '
' + '
' + /* eslint-disable */
- 'Rotate Mode R |
' + 'RotateScale Mode r |
' + 'Scale Mode s |
' + 'Distort Mode d |
' + 'Drag Mode D |
' + 'Lock (Mode) / Unlock Image l\xa0u |
' + 'Stack up / down q\xa0a |
' + 'Add / Remove Image Border b |
' + 'Toggle Opacity o |
' + 'Deselect All esc |
' + 'Delete Image(s) delete\xa0backspace |
' + 'Export Image(s) e |
' + '
');
- /* eslint-enable */
- container.appendChild(button);
- return container;
- };
- this._keymapper.addTo(this._map);
- },
- _toggleKeymapper: function _toggleKeymapper(e) {
- e.preventDefault();
- this._container.className = this._container.className === 'ldi-keymapper leaflet-control' ? 'ldi-keymapper-hide leaflet-control' : 'ldi-keymapper leaflet-control';
- this._scrollWrapper.style.display = this._scrollWrapper.style.display === 'none' ? 'block' : 'none';
- this._toggler.innerHTML = this._toggler.innerHTML === 'close' ? L.IconUtil.create('keyboard_open') : 'close';
- L.IconUtil.toggleTitle(this._toggler, 'Show keymap', 'Hide keymap');
- L.DomUtil.toggleClass(this._toggler, 'close-icon');
- },
- _injectIconSet: function _injectIconSet() {
- if (document.querySelector('#keymapper-iconset')) {
- return;
- }
- var el = L.DomUtil.create('div', '');
- el.id = 'keymapper-iconset';
- el.setAttribute('hidden', 'hidden');
- this._iconset = new L.KeymapperIconSet().render();
- el.innerHTML = this._iconset;
- document.querySelector('.leaflet-control-container').appendChild(el);
- }
-});
-L.DistortableImage.Keymapper.addInitHook(function () {
- L.DistortableImage.Keymapper.prototype._n = L.DistortableImage.Keymapper.prototype._n ? L.DistortableImage.Keymapper.prototype._n + 1 : 1;
- // dont enable keymapper for mobile
- if (L.DistortableImage.Keymapper.prototype._n === 1 && !L.Browser.mobile) {
- _this.enable();
- _this._injectIconSet();
- }
-});
-L.distortableImage.keymapper = function (map, options) {
- return new L.DistortableImage.Keymapper(map, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/DistortableCollection.Edit.js":
-/*!************************************************!*\
- !*** ./src/edit/DistortableCollection.Edit.js ***!
- \************************************************/
-/***/ (function() {
-
-L.DistortableImage = L.DistortableImage || {};
-
-// this class holds the keybindings and toolbar API for an image collection instance
-L.DistortableCollection.Edit = L.Handler.extend({
- options: {
- keymap: L.distortableImage.group_action_map
- },
- initialize: function initialize(group, options) {
- this._group = group;
- this._exportOpts = group.options.exportOpts;
- L.setOptions(this, options);
- L.distortableImage.group_action_map.Escape = '_decollectAll';
- },
- addHooks: function addHooks() {
- var group = this._group;
- var map = group._map;
- this.editActions = this.options.actions;
- this.runExporter = L.bind(L.Utils.getNestedVal(this, '_exportOpts', 'exporter') || this.startExport, this);
- L.DomEvent.on(document, 'keydown', this._onKeyDown, this);
- if (!(map.doubleClickZoom.enabled() || map.doubleClickLabels.enabled())) {
- L.DomEvent.on(map, 'click', this._decollectAll, this);
- }
- L.DomEvent.on(map, {
- singleclickon: this._singleClickListeners,
- singleclickoff: this._resetClickListeners,
- singleclick: this._singleClick,
- boxcollectend: this._addCollections
- }, this);
- this._group.editable = true;
- this._group.eachLayer(function (layer) {
- return layer.editing.enable();
- });
- },
- removeHooks: function removeHooks() {
- var group = this._group;
- var map = group._map;
- L.DomEvent.off(document, 'keydown', this._onKeyDown, this);
- if (!(map.doubleClickZoom.enabled() || map.doubleClickLabels.enabled())) {
- L.DomEvent.off(map, 'click', this._decollectAll, this);
- }
- L.DomEvent.off(map, {
- singleclickon: this._singleClickListeners,
- singleclickoff: this._resetClickListeners,
- singleclick: this._singleClick,
- boxcollectend: this._addCollections
- }, this);
- this._decollectAll();
- this._group.editable = false;
- this._group.eachLayer(function (layer) {
- return layer.editing.disable();
- });
- },
- enable: function enable() {
- this._enabled = true;
- this.addHooks();
- return this;
- },
- disable: function disable() {
- this._enabled = false;
- this.removeHooks();
- return this;
- },
- _onKeyDown: function _onKeyDown(e) {
- var keymap = this.options.keymap;
- var handlerName = keymap[e.key];
- if (!this[handlerName]) {
- return;
- }
- if (this._group.anyCollected()) {
- this[handlerName].call(this);
- }
- },
- _singleClick: function _singleClick(e) {
- if (e.type === 'singleclick') {
- this._decollectAll(e);
- } else {
- return;
- }
- },
- _singleClickListeners: function _singleClickListeners() {
- var map = this._group._map;
- L.DomEvent.off(map, 'click', this._decollectAll, this);
- L.DomEvent.on(map, 'singleclick', this._decollectAll, this);
- },
- _resetClickListeners: function _resetClickListeners() {
- var map = this._group._map;
- L.DomEvent.on(map, 'click', this._decollectAll, this);
- L.DomEvent.off(map, 'singleclick', this._decollectAll, this);
- },
- _decollectAll: function _decollectAll(e) {
- var oe;
- if (e) {
- oe = e.originalEvent;
- }
- /**
- * prevents image deselection following the 'boxcollectend' event - note 'shift' must not be released until dragging is complete
- * also prevents deselection following a click on a disabled img by differentiating it from the map
- */
- if (oe && (oe.shiftKey || oe.target instanceof HTMLImageElement)) {
- return;
- }
- this._group.eachLayer(function (layer) {
- L.DomUtil.removeClass(layer.getElement(), 'collected');
- layer.deselect();
- });
- this._removeToolbar();
- if (e) {
- L.DomEvent.stopPropagation(e);
- }
- },
- _unlockGroup: function _unlockGroup() {
- var _this = this;
- if (!this.hasTool(L.UnlockAction)) {
- return;
- }
- this._group.eachLayer(function (layer) {
- if (_this._group.isCollected(layer)) {
- var edit = layer.editing;
- edit._unlock();
- // unlock updates the layer's handles; deselect to ensure they're hidden
- layer.deselect();
- }
- });
- },
- _lockGroup: function _lockGroup() {
- var _this2 = this;
- if (!this.hasTool(L.LockAction)) {
- return;
- }
- this._group.eachLayer(function (layer) {
- if (_this2._group.isCollected(layer)) {
- var edit = layer.editing;
- edit._lock();
- // map.addLayer also deselects the image, so we reselect here
- L.DomUtil.addClass(layer.getElement(), 'collected');
- }
- });
- },
- _addCollections: function _addCollections(e) {
- var _this3 = this;
- var box = e.boxCollectBounds;
- var map = this._group._map;
- this._group.eachLayer(function (layer) {
- var edit = layer.editing;
- if (layer.isSelected()) {
- layer.deselect();
- }
- var zoom = map.getZoom();
- var center = map.getCenter();
- var imgBounds = L.latLngBounds(layer.getCorner(2), layer.getCorner(1));
- imgBounds = map._latLngBoundsToNewLayerBounds(imgBounds, zoom, center);
- if (box.intersects(imgBounds) && edit.enabled()) {
- if (!_this3.toolbar) {
- _this3._addToolbar();
- }
- L.DomUtil.addClass(layer.getElement(), 'collected');
- }
- });
- },
- _removeGroup: function _removeGroup(e) {
- var _this4 = this;
- if (!this.hasTool(L.DeleteAction)) {
- return;
- }
- var layersToRemove = this._group._toRemove();
- var n = layersToRemove.length;
- if (n === 0) {
- return;
- }
- var choice = L.DomUtil.confirmDeletes(n);
- if (choice) {
- layersToRemove.forEach(function (layer) {
- _this4._group.removeLayer(layer);
- });
- if (!this._group.anyCollected()) {
- this._removeToolbar();
- }
- }
- if (e) {
- L.DomEvent.stopPropagation(e);
- }
- },
- cancelExport: function cancelExport() {
- if (!this.customCollection) {
- this._exportOpts.collection = undefined;
- }
- clearInterval(this.updateInterval);
- },
- _addToolbar: function _addToolbar() {
- var group = this._group;
- var map = group._map;
- if (group.options.suppressToolbar || this.toolbar) {
- return;
- }
- this.toolbar = L.distortableImage.controlBar({
- actions: this.editActions,
- position: 'topleft'
- }).addTo(map, group);
- },
- _removeToolbar: function _removeToolbar() {
- var map = this._group._map;
- if (this.toolbar) {
- map.removeLayer(this.toolbar);
- this.toolbar = false;
- } else {
- return false;
- }
- },
- hasTool: function hasTool(value) {
- return this.editActions.some(function (action) {
- return action === value;
- });
- },
- addTool: function addTool(value) {
- if (value.baseClass === 'leaflet-toolbar-icon' && !this.hasTool(value)) {
- this._removeToolbar();
- this.editActions.push(value);
- this._addToolbar();
- }
- return this;
- },
- removeTool: function removeTool(value) {
- var _this5 = this;
- this.editActions.some(function (item, idx) {
- if (_this5.editActions[idx] === value) {
- _this5._removeToolbar();
- _this5.editActions.splice(idx, 1);
- _this5._addToolbar();
- return true;
- } else {
- return false;
- }
- });
- return this;
- },
- startExport: function startExport() {
- var _this6 = this;
- if (!this.hasTool(L.ExportAction)) {
- return;
- }
- return new Promise(function (resolve) {
- var opts = _this6._exportOpts;
- opts.resolve = resolve; // allow resolving promise in user-defined functions, to stop spinner on completion
-
- var statusUrl;
- _this6.updateInterval = null;
-
- // this may be overridden to update the UI to show export progress or completion
- var _defaultUpdater = function _defaultUpdater(data) {
- data = JSON.parse(data);
- // optimization: fetch status directly from google storage:
- if (data.status_url) {
- if (statusUrl !== data.status_url && data.status_url.match('.json')) {
- // if (data.status_url && data.status_url.substr(0,1) === "/") {
- // opts.statusUrl = opts.statusUrl + data.status_url;
- // } else {
- statusUrl = data.status_url;
- // }
- }
-
- if (data.status === 'complete') {
- clearInterval(_this6.updateInterval);
- if (!_this6.customCollection) {
- _this6._exportOpts.collection = undefined;
- }
- resolve();
- if (data.jpg !== null) {
- alert('Export succeeded. ' + opts.exportUrl + data.jpg);
- }
- }
-
- // TODO: update to clearInterval when status == "failed" if we update that in this file:
- // https://github.com/publiclab/mapknitter-exporter/blob/main/lib/mapknitterExporter.rb
- console.log(data);
- }
- };
-
- // 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
- var _defaultHandleStatusRes = function _defaultHandleStatusRes(data) {
- statusUrl = opts.statusUrl + data;
- // repeatedly fetch the status.json
- _this6.updateInterval = setInterval(function () {
- var reqOpts = {
- method: 'GET'
- };
- var req = new Request("".concat(statusUrl, "?").concat(Date.now()), reqOpts);
- fetch(req).then(function (res) {
- if (res.ok) {
- return res.text();
- }
- }).then(opts.updater);
- }, opts.frequency);
- };
-
- // initiate the export
- var _defaultFetchStatusUrl = function _defaultFetchStatusUrl(mergedOpts) {
- var form = new FormData();
- form.append('collection', JSON.stringify(mergedOpts.collection));
- form.append('scale', mergedOpts.scale);
- form.append('upload', true);
- var reqOpts = {
- method: 'POST',
- body: form
- };
- var req = new Request(mergedOpts.exportStartUrl, reqOpts);
- fetch(req).then(function (res) {
- if (res.ok) {
- return res.text();
- }
- }).then(mergedOpts.handleStatusRes);
- };
-
- // If the user has passed collection property
- _this6.customCollection = !!opts.collection;
- if (!_this6.customCollection) {
- opts.collection = _this6._group.generateExportJson().images;
- }
- opts.frequency = opts.frequency || 3000;
- opts.scale = opts.scale || 100; // switch it to _getAvgCmPerPixel !
- opts.updater = opts.updater || _defaultUpdater;
- opts.handleStatusRes = opts.handleStatusRes || _defaultHandleStatusRes;
- opts.fetchStatusUrl = opts.fetchStatusUrl || _defaultFetchStatusUrl;
- opts.fetchStatusUrl(opts);
- });
- }
-});
-L.distortableCollection.edit = function (group, options) {
- return new L.DistortableCollection.Edit(group, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/DistortableImage.Edit.js":
-/*!*******************************************!*\
- !*** ./src/edit/DistortableImage.Edit.js ***!
- \*******************************************/
-/***/ (function() {
-
-L.DistortableImage = L.DistortableImage || {};
-
-// holds the keybindings & toolbar API for an individual image instance
-L.DistortableImage.Edit = L.Handler.extend({
- options: {
- opacity: 0.5,
- outline: '1px solid red',
- keymap: L.distortableImage.action_map
- },
- initialize: function initialize(overlay, options) {
- this._overlay = overlay;
- this._toggledImage = false;
- this._mode = overlay.options.mode;
- this._transparent = false;
- this._outlined = false;
- this._opacity = options.opacity;
- L.setOptions(this, options);
- L.distortableImage.action_map.Escape = '_deselect';
- },
- /* Run on image selection. */addHooks: function addHooks() {
- var overlay = this._overlay;
- this.editActions = this.options.actions;
-
- /* bring the selected image into view */
- overlay.bringToFront();
- this._initModes();
- this._initHandles();
- this._appendHandlesandDragable();
- if (overlay.isSelected() && !overlay.options.suppressToolbar) {
- this._addToolbar();
- }
- this.parentGroup = overlay.eP ? overlay.eP : false;
- L.DomEvent.on(overlay.getElement(), {
- dblclick: this.nextMode
- }, this);
- L.DomEvent.on(window, 'keydown', this._onKeyDown, this);
- },
- /* Run on image deselection. */removeHooks: function removeHooks() {
- var overlay = this._overlay;
- var eP = this.parentGroup;
-
- // First, check if dragging exists - it may be off due to locking
- this._disableDragging();
- if (this.toolbar) {
- this._removeToolbar();
- }
- for (var handle in this._handles) {
- L.DomUtil.remove(handle);
- }
-
- /**
- * ensures if you disable an image while it is multi-selected
- * additional deselection logic is run
- */
- if (L.DomUtil.hasClass(overlay.getElement(), 'collected')) {
- L.DomUtil.removeClass(overlay.getElement(), 'collected');
- }
- if (eP && !eP.anyCollected() && eP.editing.toolbar) {
- eP.editing._removeToolbar();
- }
- L.DomEvent.off(overlay.getElement(), {
- dblclick: this.nextMode
- }, this);
- L.DomEvent.off(window, 'keydown', this._onKeyDown, this);
- },
- disable: function disable() {
- if (!this._enabled) {
- return this;
- }
- this._overlay.deselect();
- this._enabled = false;
- this.removeHooks();
- return this;
- },
- _initModes: function _initModes() {
- this._modes = {};
- // passed from L.DistortablImage.PopupBar. If the mode is one
- // of the current toolbar actions, adds it to this._modes
- for (var mode in L.DistortableImage.Edit.MODES) {
- var action = L.DistortableImage.Edit.MODES[mode];
- if (this.editActions.indexOf(action) !== -1) {
- this._modes[mode] = action;
- }
- }
-
- // sets the current mode to the 1st available one if the one selected
- // during initialization is not available
- if (!this._modes[this._mode]) {
- this._mode = Object.keys(this._modes)[0];
- }
- },
- _initHandles: function _initHandles() {
- var overlay = this._overlay;
- var i;
- this._dragHandles = L.layerGroup();
- for (i = 0; i < 4; i++) {
- this._dragHandles.addLayer(L.dragHandle(overlay, i));
- }
- this._scaleHandles = L.layerGroup();
- for (i = 0; i < 4; i++) {
- this._scaleHandles.addLayer(L.scaleHandle(overlay, i));
- }
- this._distortHandles = L.layerGroup();
- for (i = 0; i < 4; i++) {
- this._distortHandles.addLayer(L.distortHandle(overlay, i));
- }
- this._rotateHandles = L.layerGroup(); // individual rotate
- for (i = 0; i < 4; i++) {
- this._rotateHandles.addLayer(L.rotateHandle(overlay, i));
- }
-
- // handle includes rotate AND scale
- this._freeRotateHandles = L.layerGroup();
- for (i = 0; i < 4; i++) {
- this._freeRotateHandles.addLayer(L.freeRotateHandle(overlay, i));
- }
- this._lockHandles = L.layerGroup();
- for (i = 0; i < 4; i++) {
- this._lockHandles.addLayer(L.lockHandle(overlay, i, {
- draggable: false
- }));
- }
- this._handles = {
- drag: this._dragHandles,
- scale: this._scaleHandles,
- distort: this._distortHandles,
- rotate: this._rotateHandles,
- freeRotate: this._freeRotateHandles,
- lock: this._lockHandles
- };
- },
- _appendHandlesandDragable: function _appendHandlesandDragable() {
- var ov = this._overlay;
-
- // won't throw error if user adds 0 mode actions to toolbar
- if (!this._mode) {
- this._enableDragging();
- return;
- }
- this._updateHandle();
- if (!ov.isSelected() && this.currentHandle) {
- this.currentHandle.eachLayer(function (handle) {
- handle.setOpacity(0);
- if (handle.dragging) {
- handle.dragging.disable();
- }
- });
- }
- if (!this.isMode('lock')) {
- this._enableDragging();
- }
- },
- _onKeyDown: function _onKeyDown(e) {
- var keymap = this.options.keymap;
- var handlerName = keymap[e.key];
- var ov = this._overlay;
- var eP = this.parentGroup;
- if (eP && eP.anyCollected()) {
- return;
- }
- if (this[handlerName] !== undefined && !ov.options.suppressToolbar) {
- if (ov.isSelected() && this.toolbar) {
- this[handlerName].call(this);
- }
- }
- },
- replaceTool: function replaceTool(old, next) {
- var _this = this;
- if (next.baseClass !== 'leaflet-toolbar-icon' || this.hasTool(next)) {
- return this;
- }
- this.editActions.some(function (item, idx) {
- if (item === old) {
- _this._removeToolbar();
- _this.editActions[idx] = next;
- _this._addToolbar();
- for (var mode in L.DistortableImage.Edit.MODES) {
- if (L.DistortableImage.Edit.MODES[mode] === old) {
- delete _this._modes[mode];
- _this._nextOrNone(mode);
- } else if (L.DistortableImage.Edit.MODES[mode] === next) {
- _this._modes[mode] = next;
- }
- }
- return true;
- }
- });
- return this;
- },
- addTool: function addTool(value) {
- if (value.baseClass === 'leaflet-toolbar-icon' && !this.hasTool(value)) {
- this._removeToolbar();
- this.editActions.push(value);
- this._addToolbar();
- for (var mode in L.DistortableImage.Edit.MODES) {
- if (L.DistortableImage.Edit.MODES[mode] === value) {
- this._modes[mode] = value;
- }
- }
- if (!this._overlay.isSelected()) {
- this._removeToolbar();
- }
- }
- return this;
- },
- hasTool: function hasTool(value) {
- return this.editActions.some(function (action) {
- return action === value;
- });
- },
- removeTool: function removeTool(value) {
- var _this2 = this;
- this.editActions.some(function (item, idx) {
- if (item === value) {
- _this2._removeToolbar();
- _this2.editActions.splice(idx, 1);
- _this2._addToolbar();
- for (var mode in L.DistortableImage.Edit.MODES) {
- if (L.DistortableImage.Edit.MODES[mode] === value) {
- delete _this2._modes[mode];
- _this2._nextOrNone(mode);
- }
- }
- return true;
- }
- });
- if (!this._overlay.isSelected()) {
- this._removeToolbar();
- }
- return this;
- },
- // set the mode to the next mode or if that was the last one set mode to ''
- _nextOrNone: function _nextOrNone(mode) {
- if (this.isMode(mode)) {
- if (Object.keys(this.getModes()).length >= 1) {
- this.nextMode();
- } else {
- if (mode === 'lock') {
- this._enableDragging();
- }
- this._mode = '';
- this._updateHandle();
- }
- }
- },
- _removeToolbar: function _removeToolbar() {
- var ov = this._overlay;
- var map = ov._map;
- if (this.toolbar) {
- map.removeLayer(this.toolbar);
- this.toolbar = false;
- }
- },
- _enableDragging: function _enableDragging() {
- var _this3 = this;
- var overlay = this._overlay;
- var map = overlay._map;
- this.dragging = new L.Draggable(overlay.getElement());
- this.dragging.enable();
-
- /* Hide toolbars and markers while dragging; click will re-show it */
- this.dragging.on('dragstart', function () {
- overlay.fire('dragstart');
- _this3._removeToolbar();
- });
-
- /*
- * Adjust default behavior of L.Draggable, which overwrites the CSS3
- * distort transformations that we set when it calls L.DomUtil.setPosition.
- */
- this.dragging._updatePosition = function () {
- var topLeft = overlay.getCorner(0);
- var delta = this._newPos.subtract(map.latLngToLayerPoint(topLeft));
- var currentPoint;
- var corners = {};
- var i;
- this.fire('predrag');
- for (i = 0; i < 4; i++) {
- currentPoint = map.latLngToLayerPoint(overlay.getCorner(i));
- corners[i] = map.layerPointToLatLng(currentPoint.add(delta));
- }
- overlay.setCorners(corners);
- overlay.fire('drag');
- this.fire('drag');
- };
- this.dragging.on('dragend', function () {
- overlay.fire('dragend');
- });
- },
- _disableDragging: function _disableDragging() {
- if (this.dragging) {
- this.dragging.disable();
- delete this.dragging;
- }
- },
- _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();
- } else {
- this._lock();
- }
- },
- _toggleOpacity: function _toggleOpacity() {
- var image = this._overlay.getElement();
- if (!this.hasTool(L.OpacityAction)) {
- return;
- }
- this._transparent = !this._transparent;
- var opacity = this._transparent ? this.options.opacity : 1;
- L.DomUtil.setOpacity(image, opacity);
- image.setAttribute('opacity', opacity);
- this._refresh();
- },
- _setOpacities: function _setOpacities(o) {
- var image = this._overlay.getElement();
- this._opacity = o;
- if (!this.hasTool(L.OpacitiesAction)) {
- return;
- }
- this._opacity < 1 ? this._transparent = true : this._transparent = false;
- L.DomUtil.setOpacity(image, this._opacity);
- image.setAttribute('opacity', this._opacity);
- this._refresh();
- },
- _toggleBorder: function _toggleBorder() {
- var image = this._overlay.getElement();
- if (!this.hasTool(L.BorderAction)) {
- return;
- }
- this._outlined = !this._outlined;
- var outline = this._outlined ? this.options.outline : 'none';
- image.style.outline = outline;
- this._refresh();
- },
- // compare this to using overlay zIndex
- _toggleOrder: function _toggleOrder() {
- if (this._toggledImage) {
- this._stackUp();
- } else {
- this._stackDown();
- }
- },
- _removeOverlay: function _removeOverlay() {
- var ov = this._overlay;
- var eP = this.parentGroup;
- if (this.isMode('lock') || !this.hasTool(L.DeleteAction)) {
- return;
- }
- var choice = L.DomUtil.confirmDelete();
- if (!choice) {
- return;
- }
- this._removeToolbar();
- if (eP) {
- eP.removeLayer(ov);
- } else {
- ov._map.removeLayer(ov);
- }
- },
- // Based on https://github.com/publiclab/mapknitter/blob/8d94132c81b3040ae0d0b4627e685ff75275b416/app/assets/javascripts/mapknitter/Map.js#L47-L82
- _getExport: function _getExport() {
- var overlay = this._overlay;
- var map = overlay._map;
- var img = overlay.getElement();
- if (!this.hasTool(L.ExportAction)) {
- return;
- }
-
- // make a new image
- var downloadable = new Image();
- downloadable.id = downloadable.id || 'tempId12345';
- document.body.appendChild(downloadable);
- downloadable.onload = function onLoadDownloadableImage() {
- var height = downloadable.height;
- var width = downloadable.width;
- var nw = map.latLngToLayerPoint(overlay.getCorner(0));
- var ne = map.latLngToLayerPoint(overlay.getCorner(1));
- var sw = map.latLngToLayerPoint(overlay.getCorner(2));
- var se = map.latLngToLayerPoint(overlay.getCorner(3));
-
- // I think this is to move the image to the upper left corner,
- // eslint-disable-next-line max-len
- // jywarren: i think we may need these or the image goes off the edge of the canvas
- // jywarren: but these seem to break the distortion math...
-
- // jywarren: i think it should be rejiggered so it
- // finds the most negative values of x and y and then
- // adds those to all coordinates
-
- // nw.x -= nw.x;
- // ne.x -= nw.x;
- // se.x -= nw.x;
- // sw.x -= nw.x;
-
- // nw.y -= nw.y;
- // ne.y -= nw.y;
- // se.y -= nw.y;
- // sw.y -= nw.y;
-
- // run once warping is complete
- downloadable.onload = function () {
- L.DomUtil.remove(downloadable);
- };
- if (window && window.hasOwnProperty('warpWebGl')) {
- warpWebGl(downloadable.id, [0, 0, width, 0, width, height, 0, height], [nw.x, nw.y, ne.x, ne.y, se.x, se.y, sw.x, sw.y], true // trigger download
- );
- }
- };
-
- downloadable.src = overlay.options.fullResolutionSrc || img.src;
- },
- _stackUp: function _stackUp() {
- var t = this._toggledImage;
- if (!t || !this.hasTool(L.StackAction)) {
- return;
- }
- this._toggledImage = false;
- this._overlay.bringToFront();
- this._refresh();
- },
- _stackDown: function _stackDown() {
- var t = this._toggledImage;
- if (t || !this.hasTool(L.StackAction)) {
- return;
- }
- this._toggledImage = true;
- this._overlay.bringToBack();
- this._refresh();
- },
- _unlock: function _unlock() {
- var ov = this._overlay;
- var map = ov._map;
- var eP = this.parentGroup;
- if (!this.isMode('lock')) {
- return;
- }
- if (eP && !eP.isCollected(ov) || !eP) {
- if (!this.hasTool(L.LockAction)) {
- return;
- }
- }
- if (this.currentHandle) {
- map.removeLayer(this.currentHandle);
- }
- if (ov.options.mode === 'lock' || !this.hasMode(ov.options.mode)) {
- this._mode = '';
- this.currentHandle = '';
- } else {
- this._mode = ov.options.mode;
- }
- this._updateHandle();
- this._enableDragging();
- this._refresh();
- },
- _lock: function _lock() {
- var ov = this._overlay;
- var map = ov._map;
- var eP = this.parentGroup;
- if (this.isMode('lock')) {
- return;
- }
- if (eP && !eP.isCollected(ov) || !eP) {
- if (!this.hasTool(L.LockAction)) {
- return;
- }
- }
- if (this.currentHandle) {
- map.removeLayer(this.currentHandle);
- }
- this._mode = 'lock';
- this._updateHandle();
- this._disableDragging();
- this._refresh();
- },
- _deselect: function _deselect() {
- this._overlay.deselect();
- },
- _showMarkers: function _showMarkers(e) {
- var eP = this.parentGroup;
- if (!this.currentHandle) {
- return;
- }
- // only markers we want in collect interface for now is lock
- if (!this.isMode('lock') && eP && eP.anyCollected()) {
- return;
- }
- this.currentHandle.eachLayer(function (handle) {
- handle.setOpacity(1);
- if (handle.dragging) {
- handle.dragging.enable();
- }
- L.DomUtil.addClass(handle.getElement(), 'leaflet-interactive');
- });
- },
- _hideMarkers: function _hideMarkers() {
- var ov = this._overlay;
- var eP = this.parentGroup;
-
- // workaround for race condition w/ feature group
- if (!this._handles) {
- this._initHandles();
- }
- if (!this.currentHandle) {
- return;
- }
- if (this.isMode('lock') && eP && eP.isCollected(ov)) {
- return;
- }
- this.currentHandle.eachLayer(function (handle) {
- handle.setOpacity(0);
- if (handle.dragging) {
- handle.dragging.disable();
- }
- L.DomUtil.removeClass(handle.getElement(), 'leaflet-interactive');
- });
- },
- _updateHandle: function _updateHandle() {
- var ov = this._overlay;
- var map = ov._map;
- var mode = this.getMode();
- if (this.currentHandle) {
- map.removeLayer(this.currentHandle);
- }
- this.currentHandle = mode === '' ? '' : this._handles[mode];
- if (this.currentHandle !== '') {
- map.addLayer(this.currentHandle);
- }
- },
- _addToolbar: function _addToolbar() {
- var ov = this._overlay;
- var eP = this.parentGroup;
- var map = ov._map;
- // Find the topmost point on the image.
- var corners = ov.getCorners();
- var maxLat = -Infinity;
- if (eP && eP.anyCollected()) {
- eP.editing._addToolbar();
- return;
- }
- if (ov.options.suppressToolbar || this.toolbar) {
- return;
- }
- for (var i = 0; i < corners.length; i++) {
- if (corners[i].lat > maxLat) {
- maxLat = corners[i].lat;
- }
- }
-
- // Longitude is based on the centroid of the image.
- var raisedPoint = ov.getCenter();
- raisedPoint.lat = maxLat;
- this.toolbar = L.distortableImage.popupBar(raisedPoint, {
- actions: this.editActions
- }).addTo(map, ov);
- ov.fire('toolbar:created');
- },
- _refresh: function _refresh() {
- if (this.toolbar) {
- this._removeToolbar();
- }
- this._addToolbar();
- },
- _updateToolbarPos: function _updateToolbarPos() {
- var overlay = this._overlay;
- // Find the topmost point on the image.
- var corners = overlay.getCorners();
- var toolbar = this.toolbar;
- var maxLat = -Infinity;
- if (toolbar && toolbar instanceof L.DistortableImage.PopupBar) {
- for (var i = 0; i < corners.length; i++) {
- if (corners[i].lat > maxLat) {
- maxLat = corners[i].lat;
- }
- }
-
- // Longitude is based on the centroid of the image.
- var raisedPoint = overlay.getCenter();
- raisedPoint.lat = maxLat;
- if (!overlay.options.suppressToolbar) {
- this.toolbar.setLatLng(raisedPoint);
- }
- }
- },
- hasMode: function hasMode(mode) {
- return !!this._modes[mode];
- },
- getMode: function getMode() {
- if (!this.enabled()) {
- return;
- }
- return this._mode;
- },
- getModes: function getModes() {
- return this._modes;
- },
- isMode: function isMode(mode) {
- if (!this.enabled()) {
- return false;
- }
- return this._mode === mode;
- },
- setMode: function setMode(newMode) {
- var ov = this._overlay;
- var eP = this.parentGroup;
- var mode = this.getMode();
- if (mode === newMode || !this.hasMode(newMode) || !this.enabled()) {
- return;
- }
- if (this.toolbar) {
- this.toolbar.clickTool(newMode);
- }
- if (this.isMode('lock') && !this.dragging) {
- this._enableDragging();
- }
- this._mode = newMode;
- if (this.isMode('lock')) {
- this._disableDragging();
- }
- this._updateHandle();
- this._refresh();
- if (eP && eP.isCollected(ov)) {
- ov.deselect();
- }
- return this;
- },
- /**
- * 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 nextMode(e) {
- var mode = this.getMode();
- var eP = this.parentGroup;
- var modesArray = Object.keys(this.getModes());
- var idx = modesArray.indexOf(mode);
- var nextIdx = (idx + 1) % modesArray.length;
- var newMode = modesArray[nextIdx];
- if (e) {
- if (eP && eP.anyCollected()) {
- return;
- }
- L.DomEvent.stop(e);
- }
- return this.setMode(newMode);
- }
-});
-L.distortableImage.edit = function (overlay, options) {
- return new L.DistortableImage.Edit(overlay, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/actions/BorderAction.js":
-/*!******************************************!*\
- !*** ./src/edit/actions/BorderAction.js ***!
- \******************************************/
-/***/ (function() {
-
-L.BorderAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var mode = edit._mode;
- var use;
- var tooltip;
- if (edit._outlined) {
- use = 'border_outer';
- tooltip = overlay.options.translation.removeBorder;
- } else {
- use = 'border_clear';
- tooltip = overlay.options.translation.addBorder;
- }
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: use,
- tooltip: tooltip,
- className: mode === 'lock' ? 'disabled' : ''
- };
-
- // conditional for disabling keybindings for this action when the image is locked.
- L.DistortableImage.action_map.b = mode === 'lock' ? '' : '_toggleBorder';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- L.IconUtil.toggleXlink(this._link, 'border_clear', 'border_outer');
- L.IconUtil.toggleTitle(this._link, 'Remove Border', 'Add Border');
- edit._toggleBorder();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/DeleteAction.js":
-/*!******************************************!*\
- !*** ./src/edit/actions/DeleteAction.js ***!
- \******************************************/
-/***/ (function() {
-
-L.DeleteAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var use = 'delete_forever';
- var tooltip;
- /**
- * we can tell whether the overlay is an instance of `L.DistortableImageOverlay` or `L.DistortableCollection` bc only
- * the former should have `parentGroup` defined on it. From there we call the apporpriate keybindings and methods.
- */
- if (edit instanceof L.DistortableImage.Edit) {
- tooltip = overlay.options.translation.deleteImage;
- // backspace windows / delete mac
- L.DistortableImage.action_map.Backspace = edit._mode === 'lock' ? '' : '_removeOverlay';
- } else {
- tooltip = overlay.options.translation.deleteImages;
- L.DistortableImage.group_action_map.Backspace = edit._mode === 'lock' ? '' : '_removeGroup';
- }
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: use,
- tooltip: tooltip,
- className: edit._mode === 'lock' ? 'disabled' : ''
- };
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- if (edit instanceof L.DistortableImage.Edit) {
- edit._removeOverlay();
- } else {
- edit._removeGroup();
- }
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/DistortAction.js":
-/*!*******************************************!*\
- !*** ./src/edit/actions/DistortAction.js ***!
- \*******************************************/
-/***/ (function() {
-
-L.DistortAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'distort',
- tooltip: overlay.options.translation.distortImage,
- className: 'distort'
- };
- L.DistortableImage.action_map.d = '_distortMode';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- edit._distortMode();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/DragAction.js":
-/*!****************************************!*\
- !*** ./src/edit/actions/DragAction.js ***!
- \****************************************/
-/***/ (function() {
-
-L.DragAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'drag',
- tooltip: overlay.options.translation.dragImage,
- className: 'drag'
- };
- L.DistortableImage.action_map.D = '_dragMode';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- edit._dragMode();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/EditAction.js":
-/*!****************************************!*\
- !*** ./src/edit/actions/EditAction.js ***!
- \****************************************/
-/***/ (function() {
-
-L.DistortableImage = L.DistortableImage || {};
-L.distortableImage = L.DistortableImage;
-L.DistortableImage.action_map = {};
-L.EditAction = L.Toolbar2.Action.extend({
- options: {
- toolbarIcon: {
- svg: false,
- html: '',
- className: '',
- tooltip: ''
- }
- },
- initialize: function initialize(map, overlay, options) {
- this._overlay = overlay;
- this._map = map;
- L.setOptions(this, options);
- L.Toolbar2.Action.prototype.initialize.call(this, options);
- this._injectIconSet();
- },
- _createIcon: function _createIcon(toolbar, container, args) {
- var _this = this;
- var iconOptions = this.options.toolbarIcon;
- var className = iconOptions.className;
- var edit = this._overlay.editing;
- var style = this.options.toolbarIcon.style;
- this.toolbar = toolbar;
- this._icon = L.DomUtil.create('li', '', container);
- this._link = L.DomUtil.create('a', '', this._icon);
- if (iconOptions.svg) {
- this._link.innerHTML = L.IconUtil.create(iconOptions.html);
- } else {
- this._link.innerHTML = iconOptions.html;
- }
- this._link.setAttribute('href', '#');
- this._link.setAttribute('title', iconOptions.tooltip);
- if (style) {
- this._link.setAttribute('style', style);
- }
- ;
- this._link.setAttribute('role', 'button');
- L.DomUtil.addClass(this._link, this.constructor.baseClass);
- if (className) {
- L.DomUtil.addClass(this._link, className);
- if (className === 'disabled') {
- L.DomUtil.addClass(this._icon, className);
- }
- if (className === edit._mode) {
- L.DomUtil.addClass(this._link, 'selected-mode');
- } else {
- L.DomUtil.removeClass(this._link, 'selected-mode');
- }
- }
- L.DomEvent.on(this._link, 'click', this.enable, this);
- L.DomEvent.on(this._overlay, 'update', function () {
- var match = _this._link.innerHTML.match(/xlink:href="#restore"/);
- if (match && match.length === 1) {
- _this._enableAction();
- }
- });
-
- /* Add secondary toolbar */
- this._addSubToolbar(toolbar, this._icon, args);
- },
- _injectIconSet: function _injectIconSet() {
- if (document.querySelector('#iconset')) {
- return;
- }
- var el = document.createElement('div');
- el.id = 'iconset';
- el.setAttribute('hidden', 'hidden');
- el.innerHTML = new L.ToolbarIconSet().render();
- document.querySelector('.leaflet-marker-pane').appendChild(el);
- },
- _enableAction: function _enableAction() {
- L.DomUtil.removeClass(this._link.parentElement, 'disabled');
- L.DomUtil.removeClass(this._link, 'disabled');
- },
- _disableAction: function _disableAction() {
- L.DomUtil.addClass(this._link.parentElement, 'disabled');
- L.DomUtil.addClass(this._link, 'disabled');
- }
-});
-L.editAction = function (map, overlay, options) {
- return new L.EditAction(map, overlay, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/actions/ExportAction.js":
-/*!******************************************!*\
- !*** ./src/edit/actions/ExportAction.js ***!
- \******************************************/
-/***/ (function() {
-
-L.ExportAction = L.EditAction.extend({
- // This function is executed every time we select an image
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var tooltip;
- this.isExporting = false;
- this.mouseLeaveSkip = true;
- this.isHooksExecuted = false;
- if (edit instanceof L.DistortableImage.Edit) {
- L.DistortableImage.action_map.e = '_getExport';
- tooltip = overlay.options.translation.exportImage;
- } else {
- L.DistortableImage.group_action_map.e = 'runExporter';
- tooltip = overlay.options.translation.exportImages;
- }
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'get_app',
- tooltip: tooltip
- };
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- if (edit instanceof L.DistortableImage.Edit) {
- edit._getExport();
- return;
- }
-
- // Make sure that addHooks is executed only once, event listeners will handle the rest
- if (this.isHooksExecuted) {
- return;
- } else {
- this.isHooksExecuted = true;
- }
- var exportTool = this._link.parentElement;
- this.mouseEnterHandler = this.handleMouseEnter.bind(this);
- this.mouseLeaveHandler = this.handleMouseLeave.bind(this);
- L.DomEvent.on(exportTool, 'click', function () {
- if (!this.isExporting) {
- this.isExporting = true;
- this.renderExportIcon();
- setTimeout(this.attachMouseEventListeners.bind(this, exportTool), 100);
- edit.runExporter().then(function () {
- this.resetState();
- this.detachMouseEventListeners(exportTool);
- }.bind(this));
- } else {
- // Clicking on the export icon after export has started will be ignored
- if (this.mouseLeaveSkip) {
- return;
- }
- this.resetState();
- this.detachMouseEventListeners(exportTool);
- edit.cancelExport();
- }
- }, this);
- },
- resetState: function resetState() {
- this.renderDownloadIcon();
- this.isExporting = false;
- this.mouseLeaveSkip = true;
- },
- attachMouseEventListeners: function attachMouseEventListeners(element) {
- element.addEventListener('mouseenter', this.mouseEnterHandler);
- element.addEventListener('mouseleave', this.mouseLeaveHandler);
- },
- detachMouseEventListeners: function detachMouseEventListeners(element) {
- element.removeEventListener('mouseenter', this.mouseEnterHandler);
- element.removeEventListener('mouseleave', this.mouseLeaveHandler);
- },
- handleMouseEnter: function handleMouseEnter() {
- this.renderCancelIcon();
- },
- handleMouseLeave: function handleMouseLeave() {
- if (this.mouseLeaveSkip) {
- this.mouseLeaveSkip = false;
- } else {
- this.renderExportIcon();
- }
- },
- renderDownloadIcon: function renderDownloadIcon() {
- L.IconUtil.toggleXlink(this._link, 'get_app', 'spinner');
- L.IconUtil.toggleTitle(this._link, 'Export Images', 'Loading...');
- L.DomUtil.removeClass(this._link.firstChild, 'loader');
- },
- renderExportIcon: function renderExportIcon() {
- L.IconUtil.toggleXlink(this._link, 'spinner');
- L.IconUtil.toggleTitle(this._link, 'Export Images', 'Loading...');
- L.IconUtil.addClassToSvg(this._link, 'loader');
- },
- renderCancelIcon: function renderCancelIcon() {
- L.IconUtil.toggleXlink(this._link, 'cancel');
- L.IconUtil.toggleTitle(this._link, 'Cancel Export', 'Loading...');
- L.DomUtil.removeClass(this._link.firstChild, 'loader');
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/FreeRotateAction.js":
-/*!**********************************************!*\
- !*** ./src/edit/actions/FreeRotateAction.js ***!
- \**********************************************/
-/***/ (function() {
-
-L.FreeRotateAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'crop_rotate',
- tooltip: overlay.options.translation.freeRotateImage,
- className: 'freeRotate'
- };
- L.DistortableImage.action_map.f = '_freeRotateMode';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- edit._freeRotateMode();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/GeolocateAction.js":
-/*!*********************************************!*\
- !*** ./src/edit/actions/GeolocateAction.js ***!
- \*********************************************/
-/***/ (function() {
-
-L.GeolocateAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'explore',
- tooltip: overlay.options.translation.geolocateImage,
- className: edit._mode === 'lock' ? 'disabled' : ''
- };
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var image = this._overlay.getElement();
- EXIF.getData(image, L.EXIF(image));
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/LockAction.js":
-/*!****************************************!*\
- !*** ./src/edit/actions/LockAction.js ***!
- \****************************************/
-/***/ (function() {
-
-L.LockAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var use;
- var tooltip;
- if (edit instanceof L.DistortableImage.Edit) {
- L.DistortableImage.action_map.u = '_unlock';
- L.DistortableImage.action_map.l = '_lock';
- tooltip = overlay.options.translation.lockMode;
- use = edit.isMode('lock') ? 'lock' : 'unlock';
- } else {
- L.DistortableImage.group_action_map.l = '_lockGroup';
- tooltip = overlay.options.translation.lockImages;
- use = 'lock';
- }
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: use,
- tooltip: tooltip,
- className: 'lock'
- };
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- if (edit instanceof L.DistortableImage.Edit) {
- edit._toggleLockMode();
- } else {
- edit._lockGroup();
- }
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/OpacitiesAction.js":
-/*!*********************************************!*\
- !*** ./src/edit/actions/OpacitiesAction.js ***!
- \*********************************************/
-/***/ (function() {
-
-var opacities = [100, 80, 60, 40, 20, 0]; // Set numeric values from 0 to 100.
-
-// Add custom CSS scripts and overwrites. Pending for better implementation of CSSStyleSheet in browsers.
-var subtoolbarCss = new CSSStyleSheet();
-subtoolbarCss.replaceSync(".leaflet-toolbar-icon-vertical {\n box-sizing: border-box !important;\n display: block !important;\n width: 30px !important;\n height: 30px !important;\n line-height: 30px !important;\n padding: 0 !important;\n text-align: center !important;\n text-decoration: none !important;\n background-color: #fff;\n border: inset 0.5px lightgray !important;\n font-size: 12px !important;\n font-weight: bold !important;\n color:#0087A8 !important;\n float: none !important;\n margin: auto !important;\n z-index:900 !important;\n }\n ");
-subtoolbarCss.insertRule(".leaflet-toolbar-1 li:first-child a {\n border-radius: 4px 4px 0px 0px !important;\n }");
-document.adoptedStyleSheets = [subtoolbarCss];
-opacities = opacities.map(function (o) {
- isNaN(o) || o > 100 ? o = 100 : o;
- o < 0 ? o = 0 : o;
- return L.EditAction.extend({
- options: {
- toolbarIcon: {
- html: o,
- tooltip: 'Opacity ' + o + '%',
- className: 'leaflet-toolbar-icon-vertical',
- style: 'background-color:rgb(' + (100 - o) + '%,' + (100 - o) + '%,' + (100 - o) + '%);'
- }
- },
- addHooks: function addHooks() {
- this._overlay.editing._setOpacities(o / 100);
- }
- });
-});
-L.OpacitiesToolbar2 = L.Toolbar2.extend({
- options: {
- className: '',
- filter: function filter() {
- return true;
- },
- actions: [],
- style: "translate(-1px, -".concat((opacities.length + 1) * 30, "px)")
- },
- appendToContainer: function appendToContainer(container) {
- var baseClass = this.constructor.baseClass + '-' + this._calculateDepth();
- var className = baseClass + ' ' + this.options.className;
- var Action;
- var action;
- var i;
- var j;
- var l;
- var m;
- this._container = container;
- this._ul = L.DomUtil.create('ul', className, container);
- this._ul.style.transform = this.options.style ? this.options.style : '';
-
- // Ensure that clicks, drags, etc. don't bubble up to the map.
- // These are the map events that the L.Draw.Polyline handler listens for.
- // Note that L.Draw.Polyline listens to 'mouseup', not 'mousedown', but
- // if only 'mouseup' is silenced, then the map gets stuck in a halfway
- // state because it receives a 'mousedown' event and is waiting for the
- // corresponding 'mouseup' event.
- this._disabledEvents = ['click', 'mousemove', 'dblclick', 'mousedown', 'mouseup', 'touchstart'];
- for (j = 0, m = this._disabledEvents.length; j < m; j++) {
- L.DomEvent.on(this._ul, this._disabledEvents[j], L.DomEvent.stopPropagation);
- }
-
- /* Instantiate each toolbar action and add its corresponding toolbar icon. */
- for (i = 0, l = this.options.actions.length; i < l; i++) {
- Action = this._getActionConstructor(this.options.actions[i]);
- action = new Action();
- action._createIcon(this, this._ul, this._arguments);
- }
- }
-});
-L.OpacitiesAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var mode = edit._mode;
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'opacities',
- tooltip: 'Set custom opacity',
- className: mode === 'lock' ? 'disabled' : ''
- };
- options.subToolbar = new L.OpacitiesToolbar2({
- actions: opacities
- });
- L.DistortableImage.action_map.o = mode === 'lock' ? '' : '_setOpacities';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var _this = this;
- var link = this._link;
- if (L.DomUtil.hasClass(link, 'subtoolbar_enabled')) {
- L.DomUtil.removeClass(link, 'subtoolbar_enabled');
- setTimeout(function () {
- _this.options.subToolbar._hide();
- }, 100);
- } else {
- L.DomUtil.addClass(link, 'subtoolbar_enabled');
- }
- ;
- L.IconUtil.toggleXlink(link, 'opacities', 'cancel');
- L.IconUtil.toggleTitle(link, 'Make Image Transparent', 'Cancel');
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/OpacityAction.js":
-/*!*******************************************!*\
- !*** ./src/edit/actions/OpacityAction.js ***!
- \*******************************************/
-/***/ (function() {
-
-L.OpacityAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var mode = edit._mode;
- var use;
- var tooltip;
- if (edit._transparent) {
- use = 'opacity_empty';
- tooltip = overlay.options.translation.makeImageOpaque;
- } else {
- use = 'opacity';
- tooltip = overlay.options.translation.makeImageTransparent;
- }
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: use,
- tooltip: tooltip,
- className: mode === 'lock' ? 'disabled' : ''
- };
- L.DistortableImage.action_map.o = mode === 'lock' ? '' : '_toggleOpacity';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- var link = this._link;
- L.IconUtil.toggleXlink(link, 'opacity', 'opacity_empty');
- L.IconUtil.toggleTitle(link, 'Make Image Transparent', 'Make Image Opaque');
- edit._toggleOpacity();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/RestoreAction.js":
-/*!*******************************************!*\
- !*** ./src/edit/actions/RestoreAction.js ***!
- \*******************************************/
-/***/ (function() {
-
-L.RestoreAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var mode = L.Utils.getNestedVal(overlay, 'editing', '_mode');
- var edited = overlay.edited;
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'restore',
- tooltip: overlay.options.translation.restoreImage,
- className: edited && mode !== 'lock' ? '' : 'disabled'
- };
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var ov = this._overlay;
- L.DomEvent.on(ov, {
- edit: this._enableAction,
- restore: this._disableAction
- }, this);
- ov.restore();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/RotateAction.js":
-/*!******************************************!*\
- !*** ./src/edit/actions/RotateAction.js ***!
- \******************************************/
-/***/ (function() {
-
-L.RotateAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'rotate',
- tooltip: overlay.options.translation.rotateImage,
- className: 'rotate'
- };
- L.DistortableImage.action_map.r = '_rotateMode';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- edit._rotateMode();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/ScaleAction.js":
-/*!*****************************************!*\
- !*** ./src/edit/actions/ScaleAction.js ***!
- \*****************************************/
-/***/ (function() {
-
-L.ScaleAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'scale',
- tooltip: overlay.options.translation.scaleImage,
- className: 'scale'
- };
- L.DistortableImage.action_map.s = '_scaleMode';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- edit._scaleMode();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/StackAction.js":
-/*!*****************************************!*\
- !*** ./src/edit/actions/StackAction.js ***!
- \*****************************************/
-/***/ (function() {
-
-L.StackAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- var edit = overlay.editing;
- var use;
- var tooltip;
- if (edit._toggledImage) {
- use = 'flip_to_back';
- tooltip = overlay.options.translation.stackToFront;
- } else {
- use = 'flip_to_front';
- tooltip = overlay.options.translation.stackToBack;
- }
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: use,
- tooltip: tooltip,
- className: edit._mode === 'lock' ? 'disabled' : ''
- };
- L.DistortableImage.action_map.q = edit._mode === 'lock' ? '' : '_stackUp';
- L.DistortableImage.action_map.a = edit._mode === 'lock' ? '' : '_stackDown';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- L.IconUtil.toggleXlink(this._link, 'flip_to_front', 'flip_to_back');
- L.IconUtil.toggleTitle(this._link, 'Stack to Front', 'Stack to Back');
- edit._toggleOrder();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/actions/UnlockAction.js":
-/*!******************************************!*\
- !*** ./src/edit/actions/UnlockAction.js ***!
- \******************************************/
-/***/ (function() {
-
-L.UnlockAction = L.EditAction.extend({
- initialize: function initialize(map, overlay, options) {
- options = options || {};
- options.toolbarIcon = {
- svg: true,
- html: 'unlock',
- tooltip: overlay.options.translation.unlockImages
- };
- L.DistortableImage.group_action_map.u = '_unlockGroup';
- L.EditAction.prototype.initialize.call(this, map, overlay, options);
- },
- addHooks: function addHooks() {
- var edit = this._overlay.editing;
- edit._unlockGroup();
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/getEXIFdata.js":
-/*!*********************************!*\
- !*** ./src/edit/getEXIFdata.js ***!
- \*********************************/
-/***/ (function() {
-
-/* eslint-disable no-unused-vars */
-L.EXIF = function getEXIFdata(img) {
- if (Object.keys(EXIF.getAllTags(img)).length !== 0) {
- console.log(EXIF.getAllTags(img));
- var GPS = EXIF.getAllTags(img);
- var altitude;
-
- /* If the lat/lng is available. */
- if (typeof GPS.GPSLatitude !== 'undefined' && typeof GPS.GPSLongitude !== 'undefined') {
- // sadly, encoded in [degrees,minutes,seconds]
- // primitive value = GPS.GPSLatitude[x].numerator
- var lat = GPS.GPSLatitude[0] + GPS.GPSLatitude[1] / 60 + GPS.GPSLatitude[2] / 3600;
- var lng = GPS.GPSLongitude[0] + GPS.GPSLongitude[1] / 60 + GPS.GPSLongitude[2] / 3600;
- if (GPS.GPSLatitudeRef !== 'N') {
- lat = lat * -1;
- }
- if (GPS.GPSLongitudeRef === 'W') {
- lng = lng * -1;
- }
- }
-
- // Attempt to use GPS compass heading; will require
- // some trig to calc corner points, which you can find below:
-
- var angle = 0;
- // "T" refers to "True north", so -90.
- if (GPS.GPSImgDirectionRef === 'T') {
- angle = Math.PI / 180 * (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90);
- // "M" refers to "Magnetic north"
- } else if (GPS.GPSImgDirectionRef === 'M') {
- angle = Math.PI / 180 * (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90);
- } else {
- console.log('No compass data found');
- }
- console.log('Orientation:', GPS.Orientation);
-
- /* If there is orientation data -- i.e. landscape/portrait etc */
- if (GPS.Orientation === 6) {
- // CCW
- angle += Math.PI / 180 * -90;
- } else if (GPS.Orientation === 8) {
- // CW
- angle += Math.PI / 180 * 90;
- } else if (GPS.Orientation === 3) {
- // 180
- angle += Math.PI / 180 * 180;
- }
-
- /* If there is altitude data */
- if (typeof GPS.GPSAltitude !== 'undefined' && typeof GPS.GPSAltitudeRef !== 'undefined') {
- // Attempt to use GPS altitude:
- // (may eventually need to find EXIF field of view for correction)
- if (typeof GPS.GPSAltitude !== 'undefined' && typeof GPS.GPSAltitudeRef !== 'undefined') {
- altitude = GPS.GPSAltitude.numerator / GPS.GPSAltitude.denominator + GPS.GPSAltitudeRef;
- } else {
- altitude = 0; // none
- }
- }
- } else {
- alert('EXIF initialized. Press again to view data in console.');
- }
-};
-
-/***/ }),
-
-/***/ "./src/edit/handles/DistortHandle.js":
-/*!*******************************************!*\
- !*** ./src/edit/handles/DistortHandle.js ***!
- \*******************************************/
-/***/ (function() {
-
-L.DistortHandle = L.EditHandle.extend({
- options: {
- TYPE: 'distort',
- icon: L.icon({
- iconUrl:
- // eslint-disable-next-line max-len
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAklEQVR4AewaftIAAAChSURBVO3BIU4DURgGwNkvL2B6AkQTLBqP4QCoSm7DDXoBLBZHDbfgICAIZjEV3YTn9uVHdMZZtcnCfI13bIzxg0emg6Nm6QVbYz3jylEsXRrvwommb49X67jFkz80fR9Mb1YxTzqiWBSLYlEsikWxKBbFolgUi2JRLIpFsSgWxaJY03fHHOu40dH07bAzWCx9Ge/TiWbpHgdsjPGNB2f/yS+7xRCyiiZPJQAAAABJRU5ErkJggg==',
- iconSize: [32, 32],
- iconAnchor: [16, 16]
- })
- },
- _onHandleDrag: function _onHandleDrag() {
- var overlay = this._handled;
- overlay.setCorner(this._corner, this.getLatLng());
- },
- updateHandle: function updateHandle() {
- this.setLatLng(this._handled.getCorner(this._corner));
- }
-});
-L.distortHandle = function (overlay, idx, options) {
- return new L.DistortHandle(overlay, idx, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/handles/DragHandle.js":
-/*!****************************************!*\
- !*** ./src/edit/handles/DragHandle.js ***!
- \****************************************/
-/***/ (function() {
-
-L.DragHandle = L.EditHandle.extend({
- options: {
- TYPE: 'drag',
- icon: L.icon({
- // eslint-disable-next-line max-len
- iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsVJREFUeNrMVztLXEEUvnNVFAVBAhY2aRKbTZEHJNpYabuNjSgYg/GxdsmPSJkUAa/ZdVEX8mgWYVutbHxAHkVskjQBuUUgBISVhCQk3wnfwMlk1rusN1wHPubOzJlzvjlz5sxc01Ma/hUEwQnwDIjqc7uvgv9YYO86qgIwCXQbdNTlQ8kcCBHgBch8TcloF6oJGr6phk6EQAkfdz3zvgDr9Mr7Fg1fptEZoM8jsmrokpfsiIFO4IIjuE2v1EDmR4LRdlR5Gh51hj8D34ABtm8YTtqna0TgklIw5CgQguKxIojEjmFROg/MKQO27NkFAB+4wAPouGUJiIvWKHwbAxX2XyWRKWkqhT+pbJntJZJuUzISW0+5hW+obxrVBsfvoH/dqCCJuU97GBh2VteLSiYvArmErT8EVoAK9Bw7enbpVYmvAQlyowYforrH5jXL2rPHI/TKONDB7u9AlavdaTBPvPmazUeQuy8f7UomUgTEwIJPEQ3sQGE/6ll2l9H/KcEzBcfWn2IclluM3DpddJxSHujlFkscbUPvmB0LHVnLrId7nlaZVkEc6QGXQI1MAwZcWmVRHeNaQwJMMiU2cwy4s7p/RJ2ckpvIQs+cIs+5GzitloLKHUV3MPREuXbTOKO91dX387gGTONxIgEWm+E61FFrpcyqXLHsEwiDjEsjAksqw5XPoL9MHVrn6QR4q+XZrDaR4RoWzq2ymafuRA/Mq1stSsHLVkcbdf9VjOcx8ZH3+SFWcCWlVPyWuUBOwUWdC1wP5NVjYiXFWLO69PZ6CRTUY6KSIoEKdf6T3IzzgHxnsyHctNBEkmn6Oob8ExUDg/ahGybd177cDjzH5xHwgDiSvoS7I/LZyvxJZj0wod7tkX5G0XVC7rEyLhfLJjBGbKoLLEfZWObyKeZ6oY82g+yf5Zn/mJyHX7PMf04z/T3/LcAAu4E6iiyJqf0AAAAASUVORK5CYII=',
- iconSize: [32, 32],
- iconAnchor: [16, 16]
- })
- },
- _onHandleDrag: function _onHandleDrag() {
- var overlay = this._handled;
- var formerLatLng = overlay.getCorner(this._corner);
- var newLatLng = this.getLatLng();
- overlay.dragBy(formerLatLng, newLatLng);
- },
- updateHandle: function updateHandle() {
- this.setLatLng(this._handled.getCorner(this._corner));
- }
-});
-L.dragHandle = function (overlay, idx, options) {
- return new L.DragHandle(overlay, idx, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/handles/EditHandle.js":
-/*!****************************************!*\
- !*** ./src/edit/handles/EditHandle.js ***!
- \****************************************/
-/***/ (function() {
-
-L.EditHandle = L.Marker.extend({
- initialize: function initialize(overlay, corner, options) {
- var latlng = overlay.getCorner(corner);
- L.setOptions(this, options);
- this._handled = overlay;
- this._corner = corner;
- var markerOptions = {
- draggable: true,
- zIndexOffset: 10
- };
- if (options && options.hasOwnProperty('draggable')) {
- markerOptions.draggable = options.draggable;
- }
- L.Marker.prototype.initialize.call(this, latlng, markerOptions);
- },
- onAdd: function onAdd(map) {
- L.Marker.prototype.onAdd.call(this, map);
- this._bindListeners();
- this.updateHandle();
- },
- onRemove: function onRemove(map) {
- this._unbindListeners();
- L.Marker.prototype.onRemove.call(this, map);
- },
- _onHandleDragStart: function _onHandleDragStart() {
- this._handled.fire('editstart');
- },
- _onHandleDragEnd: function _onHandleDragEnd() {
- this._fireEdit();
- },
- _fireEdit: function _fireEdit() {
- this._handled.edited = true;
- this._handled.fire('edit');
- },
- _bindListeners: function _bindListeners() {
- this.on({
- contextmenu: L.DomEvent.stop,
- dragstart: this._onHandleDragStart,
- drag: this._onHandleDrag,
- dragend: this._onHandleDragEnd
- }, this);
- this._handled._map.on('zoomend', this.updateHandle, this);
- this._handled.on('update', this.updateHandle, this);
- },
- _unbindListeners: function _unbindListeners() {
- this.off({
- contextmenu: L.DomEvent.stop,
- dragstart: this._onHandleDragStart,
- drag: this._onHandleDrag,
- dragend: this._onHandleDragEnd
- }, this);
- this._handled._map.off('zoomend', this.updateHandle, this);
- this._handled.off('update', this.updateHandle, this);
- },
- /* Takes two latlngs and calculates the scaling difference. */_calculateScalingFactor: function _calculateScalingFactor(latlngA, latlngB) {
- var overlay = this._handled;
- var map = overlay._map;
- var centerPoint = map.latLngToLayerPoint(overlay.getCenter());
- var formerPoint = map.latLngToLayerPoint(latlngA);
- var newPoint = map.latLngToLayerPoint(latlngB);
- var formerRadiusSquared = this._d2(centerPoint, formerPoint);
- var newRadiusSquared = this._d2(centerPoint, newPoint);
- return Math.sqrt(newRadiusSquared / formerRadiusSquared);
- },
- /* Distance between two points in cartesian space, squared (distance formula). */_d2: function _d2(a, b) {
- var dx = a.x - b.x;
- var dy = a.y - b.y;
- return Math.pow(dx, 2) + Math.pow(dy, 2);
- },
- /* Takes two latlngs and calculates the angle between them. */calculateAngleDelta: function calculateAngleDelta(latlngA, latlngB) {
- var overlay = this._handled;
- var map = overlay._map;
- var centerPoint = map.latLngToLayerPoint(overlay.getCenter());
- var formerPoint = map.latLngToLayerPoint(latlngA);
- var newPoint = map.latLngToLayerPoint(latlngB);
- var initialAngle = Math.atan2(centerPoint.y - formerPoint.y, centerPoint.x - formerPoint.x);
- var newAngle = Math.atan2(centerPoint.y - newPoint.y, centerPoint.x - newPoint.x);
- return newAngle - initialAngle;
- }
-});
-
-/***/ }),
-
-/***/ "./src/edit/handles/FreeRotateHandle.js":
-/*!**********************************************!*\
- !*** ./src/edit/handles/FreeRotateHandle.js ***!
- \**********************************************/
-/***/ (function() {
-
-L.FreeRotateHandle = L.EditHandle.extend({
- options: {
- TYPE: 'freeRotate',
- icon: L.icon({
- iconUrl:
- // eslint-disable-next-line max-len
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAklEQVR4AewaftIAAAHiSURBVMXBa3HbShgA0PMp/1sCCo8oCEpgTaCXgIXAJiDzyCJoAUTm4UVQAns1Y8+snWnTvJyeE16hkjDgDrfoNTMKcpC9UPiLSo8JyetkjEHxjPCMyoS199kFoz8Iv1HpMaN3qWDCHoegOKkkRwnJpRmroHgiPFEZ8IBekzEGxQtUEhKSS/fB7Ew4U+lxcGkVZG9QWWPSFAxBcdK59KApuA+yNwp2uEdx1GN25sZJZULSfAtm77SlbNjju6MvG75u+WHRWVR6rDVjMPsgwYyVZl3pLTpHkyYHOx8syMiayaJzlDTZ9YyaZNFVkiYH2ZUEBcVJJXVImuz6Js3Qofe59pq7DoOTILu+g+a288mCouk7/1iH4qTS+2QdDppbV1ZJmrnDXnPnc5UOs2Z0fUmTuyBr+krvSioJyUmQO0dZM7mepMkWnaNRkyrJB6uskTSjxY3Fll8bvmJwlDb83FJ8gMqAB80uyBY3Trb82PAfvjj6vuHnluIdKgMeNXOwctK5NKBoHitrb1RJeHRp5Ux4ojLg0aWMHGQvUOkxIWkKVsHsTPiNSo8HDC5lZIsgO6n0uMUdRvQuFQxB8UR4RmXC2vvsgtEfhL+o9JiQvE7GGBTPCK9QSUjoMWgKDthjDrIX+h/k0I7gth6N5gAAAABJRU5ErkJggg==',
- iconSize: [32, 32],
- iconAnchor: [16, 16]
- })
- },
- _onHandleDrag: function _onHandleDrag() {
- var overlay = this._handled;
- var map = overlay._map;
- var formerLatLng = overlay.getCorner(this._corner);
- var newLatLng = this.getLatLng();
- var angle = this.calculateAngleDelta(formerLatLng, newLatLng);
- var scale = this._calculateScalingFactor(formerLatLng, newLatLng);
- if (angle !== 0) {
- overlay.rotateBy(angle, 'rad');
- }
- var edgeMinWidth = overlay.edgeMinWidth;
- if (!edgeMinWidth) {
- edgeMinWidth = 50;
- } /* just in case */
-
- var corner1 = map.latLngToContainerPoint(overlay.getCorner(0));
- var corner2 = map.latLngToContainerPoint(overlay.getCorner(1));
- var w = Math.abs(corner1.x - corner2.x);
- var h = Math.abs(corner1.y - corner2.y);
- var distance = Math.sqrt(w * w + h * h);
- if (distance > edgeMinWidth || scale > 1) {
- overlay.scaleBy(scale);
- } else {
- overlay.scaleBy(1);
- }
- },
- updateHandle: function updateHandle() {
- this.setLatLng(this._handled.getCorner(this._corner));
- }
-});
-L.freeRotateHandle = function (overlay, idx, options) {
- return new L.FreeRotateHandle(overlay, idx, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/handles/LockHandle.js":
-/*!****************************************!*\
- !*** ./src/edit/handles/LockHandle.js ***!
- \****************************************/
-/***/ (function() {
-
-L.LockHandle = L.EditHandle.extend({
- options: {
- TYPE: 'lock',
- interactive: false,
- icon: L.icon({
- // eslint-disable-next-line max-len
- iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAklEQVR4AewaftIAAAD8SURBVO3BPU7CYAAA0AdfjIcQlRCQBG7C3gk2uIPG2RC3Dk16Gz0FTO1WZs/gwGCMP/2+xsSl7+n1er1Iz9LtRQjaPeMeO+TinLDCJV78YqjdA04YodKuxhUaPGoRxMmxwRQZSt87Yo4KExGCeAUyLLFB4bMacxywEClIU2KDKXbInTUYo8JCgoFuGoxQO5uiwY1EA91VmDqrcKeDoX8WdNNgjApvmGGLXKIgXY0xGkxQYItrrFFIEKQ5Yo4KEx9yrDFDhlKkIF6NOQ5Y+KpAhiXWKEQI4pxwiwoLPyuxwQw75FoE7fZYocFEuwI7jHCBV39gL92TXq/Xi/AOcmczZmaIMScAAAAASUVORK5CYII=',
- iconSize: [32, 32],
- iconAnchor: [16, 16]
- })
- },
- onRemove: function onRemove(map) {
- this.unbindTooltip();
- L.EditHandle.prototype.onRemove.call(this, map);
- },
- _bindListeners: function _bindListeners() {
- var icon = this.getElement();
- L.EditHandle.prototype._bindListeners.call(this);
- L.DomEvent.on(icon, {
- mousedown: this._tooltipOn,
- mouseup: this._tooltipOff
- }, this);
- L.DomEvent.on(document, 'pointerleave', this._tooltipOff, this);
- },
- _unbindListeners: function _unbindListeners() {
- var icon = this.getElement();
- L.EditHandle.prototype._bindListeners.call(this);
- L.DomEvent.off(icon, {
- mousedown: this._tooltipOn,
- mouseup: this._tooltipOff
- }, this);
- L.DomEvent.off(document, 'pointerleave', this._tooltipOff, this);
- },
- /* cannot be dragged */_onHandleDrag: function _onHandleDrag() {},
- updateHandle: function updateHandle() {
- this.setLatLng(this._handled.getCorner(this._corner));
- },
- _tooltipOn: function _tooltipOn(e) {
- var eP = this._handled.parentGroup;
- var edit = eP ? eP.editing : this._handled.editing;
- if (e.shiftKey) {
- return;
- }
- if (!this._handled.isSelected() && eP && !eP.isCollected(this._handled)) {
- return;
- }
- var handlesArr = edit._lockHandles;
- this._timer = setTimeout(L.bind(function () {
- if (this._timeout) {
- clearTimeout(this._timeout);
- }
- if (!this.getTooltip()) {
- this.bindTooltip('Locked!', {
- permanent: true
- });
- } else {
- handlesArr.eachLayer(function (handle) {
- if (this !== handle) {
- handle.closeTooltip();
- }
- });
- }
- this.openTooltip();
- }, this), 500);
- },
- _tooltipOff: function _tooltipOff(e) {
- var eP = this._handled.parentGroup;
- var edit = eP ? eP.editing : this._handled.editing;
- if (e.shiftKey) {
- return;
- }
- if (!this._handled.isSelected() && eP && !eP.isCollected(this._handled)) {
- return;
- }
- var handlesArr = edit._lockHandles;
- if (e.currentTarget === document) {
- handlesArr.eachLayer(function (handle) {
- handle.closeTooltip();
- });
- }
- if (this._timer) {
- clearTimeout(this._timer);
- }
- this._timeout = setTimeout(L.bind(function () {
- this.closeTooltip();
- }, this), 400);
- }
-});
-L.lockHandle = function (overlay, idx, options) {
- return new L.LockHandle(overlay, idx, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/handles/RotateHandle.js":
-/*!******************************************!*\
- !*** ./src/edit/handles/RotateHandle.js ***!
- \******************************************/
-/***/ (function() {
-
-L.RotateHandle = L.EditHandle.extend({
- options: {
- TYPE: 'rotate',
- icon: L.icon({
- iconUrl:
- // eslint-disable-next-line max-len
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAklEQVR4AewaftIAAAHiSURBVMXBa3HbShgA0PMp/1sCCo8oCEpgTaCXgIXAJiDzyCJoAUTm4UVQAns1Y8+snWnTvJyeE16hkjDgDrfoNTMKcpC9UPiLSo8JyetkjEHxjPCMyoS199kFoz8Iv1HpMaN3qWDCHoegOKkkRwnJpRmroHgiPFEZ8IBekzEGxQtUEhKSS/fB7Ew4U+lxcGkVZG9QWWPSFAxBcdK59KApuA+yNwp2uEdx1GN25sZJZULSfAtm77SlbNjju6MvG75u+WHRWVR6rDVjMPsgwYyVZl3pLTpHkyYHOx8syMiayaJzlDTZ9YyaZNFVkiYH2ZUEBcVJJXVImuz6Js3Qofe59pq7DoOTILu+g+a288mCouk7/1iH4qTS+2QdDppbV1ZJmrnDXnPnc5UOs2Z0fUmTuyBr+krvSioJyUmQO0dZM7mepMkWnaNRkyrJB6uskTSjxY3Fll8bvmJwlDb83FJ8gMqAB80uyBY3Trb82PAfvjj6vuHnluIdKgMeNXOwctK5NKBoHitrb1RJeHRp5Ux4ojLg0aWMHGQvUOkxIWkKVsHsTPiNSo8HDC5lZIsgO6n0uMUdRvQuFQxB8UR4RmXC2vvsgtEfhL+o9JiQvE7GGBTPCK9QSUjoMWgKDthjDrIX+h/k0I7gth6N5gAAAABJRU5ErkJggg==',
- iconSize: [32, 32],
- iconAnchor: [16, 16]
- })
- },
- _onHandleDrag: function _onHandleDrag() {
- var overlay = this._handled;
- var formerLatLng = overlay.getCorner(this._corner);
- var newLatLng = this.getLatLng();
- var angle = this.calculateAngleDelta(formerLatLng, newLatLng);
-
- /*
- * running rotation logic even for an angle delta of 0
- * prevents a small, occasional marker flicker
- */
- overlay.rotateBy(angle, 'rad');
- },
- updateHandle: function updateHandle() {
- this.setLatLng(this._handled.getCorner(this._corner));
- }
-});
-L.rotateHandle = function (overlay, idx, options) {
- return new L.RotateHandle(overlay, idx, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/handles/ScaleHandle.js":
-/*!*****************************************!*\
- !*** ./src/edit/handles/ScaleHandle.js ***!
- \*****************************************/
-/***/ (function() {
-
-L.ScaleHandle = L.EditHandle.extend({
- options: {
- TYPE: 'scale',
- icon: L.icon({
- iconUrl:
- // eslint-disable-next-line max-len
- 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0NTkiIGhlaWdodD0iNDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iIj48cmVjdCBpZD0iYmFja2dyb3VuZHJlY3QiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHg9IjAiIHk9IjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgY2xhc3M9IiIgc3R5bGU9IiIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiIHN0eWxlPSIiPjx0aXRsZT5MYXllciAxPC90aXRsZT48cGF0aCBkPSJNNDU5LjA0OTE1OTUzMDQ3MTM0LDg2LjkyNjIzNDUxMjU1MDAyIFYwIGgtODUuNzE0NTczMzU2MzEyMDkgdjI3LjA0MzcxNzQwMzkwNDQ1MiBIODUuNzE0NTczMzU2MzEyMDMgVjAgSDAgdjg2LjkyNjIzNDUxMjU1MDAyIGgyNS43MTQzNzIwMDY4OTM2MjYgdjI4OS43NTQxMTUwNDE4MzM0IEgwIHY4Ni45MjYyMzQ1MTI1NTAwMiBoODUuNzE0NTczMzU2MzEyMDkgdi0yNy4wNDM3MTc0MDM5MDQ0NTIgaDI4NS43MTUyNDQ1MjEwNDAzIHYyNy4wNDM3MTc0MDM5MDQ0NTIgaDg1LjcxNDU3MzM1NjMxMjA5IHYtODYuOTI2MjM0NTEyNTUwMDIgaC0yMy44MDk2MDM3MTAwODY2OSBWODYuOTI2MjM0NTEyNTUwMDIgSDQ1OS4wNDkxNTk1MzA0NzEzNCB6TTM4NC43NjMxOTU5NTUwMDA5LDEyLjU1NjAxMTY1MTgxMjc4MSBoNjEuOTA0OTY5NjQ2MjI1Mzk2IHY2Mi43ODAwNTgyNTkwNjM5MSBoLTYxLjkwNDk2OTY0NjIyNTM5NiBWMTIuNTU2MDExNjUxODEyNzgxIHpNMTIuMzgwOTkzOTI5MjQ1MDUsMTIuNTU2MDExNjUxODEyNzgxIGg2MS45MDQ5Njk2NDYyMjUzOTYgdjYyLjc4MDA1ODI1OTA2MzkxIEgxMi4zODA5OTM5MjkyNDUwNSBWMTIuNTU2MDExNjUxODEyNzgxIHpNNzQuMjg1OTYzNTc1NDcwNTMsNDUxLjA1MDU3MjQxNTEyMDY2IEgxMi4zODA5OTM5MjkyNDUwNSB2LTYyLjc4MDA1ODI1OTA2MzkxIGg2MS45MDQ5Njk2NDYyMjUzOTYgVjQ1MS4wNTA1NzI0MTUxMjA2NiB6TTQ0NS43MTU3ODE0NTI4MjI3NCw0NTEuMDUwNTcyNDE1MTIwNjYgaC02Mi44NTczNTM3OTQ2Mjg4NjQgdi02Mi43ODAwNTgyNTkwNjM5MSBoNjIuODU3MzUzNzk0NjI4ODY0IFY0NTEuMDUwNTcyNDE1MTIwNjYgek00MDcuNjIwNDE1NTE2Njg0MjYsMzc2LjY4MDM0OTU1NDM4MzQ0IGgtMzYuMTkwNTk3NjM5MzMxNzcgdjMyLjgzODc5OTcwNDc0MTEyIEg4NS43MTQ1NzMzNTYzMTIwMyB2LTMyLjgzODc5OTcwNDc0MTEyIEg0OS41MjM5NzU3MTY5ODAzMiBWODYuOTI2MjM0NTEyNTUwMDIgaDM2LjE5MDU5NzYzOTMzMTc3IFY1MC4yMjQwNDY2MDcyNTExMjUgaDI4Ny42MjAwMTI4MTc4NDcyIHYzNi43MDIxODc5MDUyOTg5IGgzNC4yODU4MjkzNDI1MjQ4MzUgVjM3Ni42ODAzNDk1NTQzODM0NCB6IiBpZD0ic3ZnXzIiIGNsYXNzPSIiIGZpbGw9IiMxYTFhZWIiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48L3N2Zz4=',
- iconSize: [32, 32],
- iconAnchor: [16, 16]
- })
- },
- _onHandleDrag: function _onHandleDrag() {
- var overlay = this._handled;
- var map = overlay._map;
- var edgeMinWidth = overlay.edgeMinWidth;
- var formerLatLng = overlay.getCorner(this._corner);
- var newLatLng = this.getLatLng();
- var scale = this._calculateScalingFactor(formerLatLng, newLatLng);
-
- /*
- * checks whether the "edgeMinWidth" property is set and tracks the minimum edge length;
- * this enables preventing scaling to zero, but we might also add an overall scale limit
- */
-
- if (!edgeMinWidth) {
- edgeMinWidth = 50;
- } /* just in case */
- var corner1 = map.latLngToLayerPoint(overlay.getCorner(0));
- var corner2 = map.latLngToLayerPoint(overlay.getCorner(1));
- var w = Math.abs(corner1.x - corner2.x);
- var h = Math.abs(corner1.y - corner2.y);
- var distance = Math.sqrt(w * w + h * h);
- if (distance > edgeMinWidth || scale > 1) {
- overlay.scaleBy(scale);
- /*
- * running scale logic even for a scale ratio of 1
- * prevents a small, occasional marker flicker
- */
- } else {
- overlay.scaleBy(1);
- }
- },
- updateHandle: function updateHandle() {
- this.setLatLng(this._handled.getCorner(this._corner));
- }
-});
-L.scaleHandle = function (overlay, idx, options) {
- return new L.ScaleHandle(overlay, idx, options);
-};
-
-/***/ }),
-
-/***/ "./src/edit/toolbars/DistortableImage.ControlBar.js":
-/*!**********************************************************!*\
- !*** ./src/edit/toolbars/DistortableImage.ControlBar.js ***!
- \**********************************************************/
-/***/ (function() {
-
-L.distortableImage = L.DistortableImage || {};
-L.distortableImage = L.DistortableImage;
-L.DistortableImage.group_action_map = {};
-L.DistortableImage.ControlBar = L.Toolbar2.Control.extend({});
-L.distortableImage.controlBar = function (options) {
- return new L.DistortableImage.ControlBar(options);
-};
-
-/** addInitHooks run before onAdd */
-L.DistortableCollection.addInitHook(function () {
- /** Default actions */
- this.ACTIONS = [L.ExportAction, L.DeleteAction, L.LockAction, L.UnlockAction];
-
- // all possible modes
- L.DistortableCollection.Edit.MODES = {
- lock: L.LockAction,
- unlock: L.UnlockAction
- };
- var a = this.options.actions ? this.options.actions : this.ACTIONS;
- this.editing = L.distortableCollection.edit(this, {
- actions: a
- });
-});
-
-/***/ }),
-
-/***/ "./src/edit/toolbars/DistortableImage.PopupBar.js":
-/*!********************************************************!*\
- !*** ./src/edit/toolbars/DistortableImage.PopupBar.js ***!
- \********************************************************/
-/***/ (function() {
-
-L.DistortableImage = L.DistortableImage || {};
-L.distortableImage = L.DistortableImage;
-L.DistortableImage.action_map = {};
-L.DistortableImage.PopupBar = L.Toolbar2.Popup.extend({
- options: {
- anchor: [0, -10]
- },
- initialize: function initialize(latlng, options) {
- L.setOptions(this, options);
- L.Toolbar2.Popup.prototype.initialize.call(this, latlng, options);
- },
- addHooks: function addHooks(map, ov) {
- this.map = map;
- this.ov = ov;
- },
- tools: function tools() {
- if (this._ul) {
- return this._ul.children;
- }
- },
- clickTool: function clickTool(name) {
- var tools = this.tools();
- for (var i = 0; i < tools.length; i++) {
- var tool = tools.item(i).children[0];
- if (L.DomUtil.hasClass(tool, name)) {
- tool.click();
- return tool;
- }
- }
- return false;
- }
-});
-L.distortableImage.popupBar = function (latlng, options) {
- return new L.DistortableImage.PopupBar(latlng, options);
-};
-L.DistortableImageOverlay.addInitHook(function () {
- /** Default actions */
- this.ACTIONS = [L.DragAction, L.ScaleAction, L.DistortAction, L.RotateAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.OpacitiesAction, L.BorderAction, L.ExportAction, L.DeleteAction];
-
- // all possible modes
- L.DistortableImage.Edit.MODES = {
- drag: L.DragAction,
- scale: L.ScaleAction,
- distort: L.DistortAction,
- rotate: L.RotateAction,
- freeRotate: L.FreeRotateAction,
- lock: L.LockAction
- };
- var a = this.options.actions ? this.options.actions : this.ACTIONS;
- this.editing = L.distortableImage.edit(this, {
- actions: a
- });
-});
-
-/***/ }),
-
-/***/ "./src/iconsets/IconSet.js":
-/*!*********************************!*\
- !*** ./src/iconsets/IconSet.js ***!
- \*********************************/
-/***/ (function() {
-
-/* this is the baseclass other IconSets inherit from,
-* we don't use it directly */
-L.IconSet = L.Class.extend({
- _svg: '