From 76c3f87f67ea5f908171f2e968c5b8b1ae23f0de Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 5 Sep 2024 17:17:35 +0200 Subject: [PATCH 1/3] wip: only display visible vertexmarker and do not display if too much This should improve the edit experience with huge geometries. So one can still edit the properties event if the path is big, and should zoom in to allow the geometry to be editable. --- umap/static/umap/js/modules/data/features.js | 2 +- umap/static/umap/js/modules/rendering/ui.js | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/js/modules/data/features.js b/umap/static/umap/js/modules/data/features.js index 805ffc9c6..c36444a58 100644 --- a/umap/static/umap/js/modules/data/features.js +++ b/umap/static/umap/js/modules/data/features.js @@ -680,8 +680,8 @@ class Path extends Feature { edit(event) { if (this.map.editEnabled) { - if (!this.ui.editEnabled()) this.ui.enableEdit() super.edit(event) + if (!this.ui.editEnabled()) this.ui.makeGeometryEditable() } } diff --git a/umap/static/umap/js/modules/rendering/ui.js b/umap/static/umap/js/modules/rendering/ui.js index 7dd5d0f6f..04ecbdd2a 100644 --- a/umap/static/umap/js/modules/rendering/ui.js +++ b/umap/static/umap/js/modules/rendering/ui.js @@ -281,6 +281,21 @@ const PathMixin = { } }, + makeGeometryEditable: function () { + if (this._map.editedFeature !== this.feature) { + this.disableEdit() + return + } + this._map.once('moveend', this.makeGeometryEditable, this) + const pointsCount = this._parts.reduce((acc, part) => acc + part.length, 0) + if (pointsCount > 100 && this._map.getZoom() < this._map.getMaxZoom()) { + this._map.tooltip.open({ content: L._('Please zoom in to edit the geometry') }) + this.disableEdit() + } else { + this.enableEdit() + } + }, + addInteractions: function () { FeatureMixin.addInteractions.call(this) this.on('editable:disable', this.onCommit) @@ -376,7 +391,7 @@ const PathMixin = { getContextMenuEditItems: function (event) { const items = FeatureMixin.getContextMenuEditItems.call(this, event) if ( - this._map?.editedFeature !== this && + this._map?.editedFeature !== this.feature && this.feature.isSameClass(this._map.editedFeature) ) { items.push({ From a67c800ee09a6591db930a6dedb0326bb0b9ba05 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 5 Sep 2024 17:54:01 +0200 Subject: [PATCH 2/3] wip: add integration test coverring huge path geometry editing --- umap/tests/integration/test_draw_polygon.py | 28 +++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/umap/tests/integration/test_draw_polygon.py b/umap/tests/integration/test_draw_polygon.py index 86406d125..97f144436 100644 --- a/umap/tests/integration/test_draw_polygon.py +++ b/umap/tests/integration/test_draw_polygon.py @@ -464,3 +464,31 @@ def test_can_draw_a_polygon_and_invert_it(live_server, page, tilelayer, settings # Click elsewhere on the map, it should now show the popup map.click(position={"x": 250, "y": 250}) expect(popup).to_be_visible() + + +def test_vertexmarker_not_shown_if_too_many(live_server, map, page, settings): + geojson = '{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[3.350602,48.438077],[3.349287,48.438082],[3.34921,48.438124],[3.348519,48.438108],[3.34546,48.437416],[3.343752,48.436955],[3.339092,48.435705],[3.333756,48.434278],[3.330224,48.433336],[3.326293,48.43229],[3.323154,48.430374],[3.32129,48.429238],[3.321234,48.429191],[3.321164,48.429221],[3.320893,48.429117],[3.320766,48.42912],[3.320575,48.429213],[3.320289,48.429303],[3.320042,48.429427],[3.319659,48.429542],[3.319215,48.429622],[3.318547,48.429691],[3.317845,48.429671],[3.317751,48.429698],[3.316503,48.430404],[3.316247,48.430481],[3.316101,48.431152],[3.316181,48.431164],[3.315466,48.432852],[3.315229,48.432981],[3.314785,48.433076],[3.314588,48.432699],[3.314474,48.432376],[3.314197,48.431965],[3.313812,48.431626],[3.313264,48.431253],[3.312393,48.430865],[3.311687,48.43069],[3.311471,48.430693],[3.311199,48.430622],[3.310632,48.430628],[3.30879,48.430373],[3.307032,48.430298],[3.306597,48.430211],[3.306301,48.430213],[3.306137,48.430161],[3.305651,48.430165],[3.304839,48.430046],[3.303726,48.429803],[3.302861,48.42972],[3.302237,48.429635],[3.300559,48.429488],[3.300396,48.429435],[3.299502,48.429335],[3.298528,48.429198],[3.298176,48.429201],[3.296263,48.429039],[3.296267,48.429307],[3.296237,48.429425],[3.295882,48.429848],[3.295665,48.429789],[3.295397,48.430056],[3.295377,48.430132],[3.295186,48.430421],[3.295198,48.430531],[3.295344,48.430735],[3.296077,48.431333],[3.295938,48.431617],[3.29576,48.43168],[3.294082,48.431442],[3.292288,48.431198],[3.292303,48.431101],[3.29082,48.431007],[3.29043,48.430975],[3.290451,48.431129],[3.290115,48.431105],[3.289097,48.430993],[3.289185,48.430805],[3.288545,48.430699],[3.288311,48.430684],[3.287686,48.430687],[3.287456,48.431129],[3.287465,48.43122],[3.288277,48.431574],[3.28896,48.431915],[3.288937,48.431969],[3.289431,48.432499],[3.289672,48.43292],[3.289871,48.433156],[3.29036,48.433602],[3.290557,48.433724],[3.290781,48.433809],[3.291035,48.433857],[3.291537,48.434024],[3.291819,48.434151],[3.292118,48.434341],[3.292479,48.434677],[3.292929,48.435388],[3.293207,48.435792],[3.293881,48.43672],[3.293762,48.436772],[3.294056,48.437209],[3.294117,48.437385],[3.294618,48.437579],[3.294465,48.437764],[3.294424,48.438087],[3.294357,48.438293],[3.293776,48.438817],[3.293308,48.439323],[3.292929,48.439844],[3.292671,48.440235],[3.29233,48.440924],[3.291807,48.441432],[3.29161,48.441661],[3.291402,48.44196],[3.291265,48.442663],[3.291255,48.442806],[3.291328,48.443126],[3.291407,48.443202],[3.291574,48.443473],[3.292253,48.444495],[3.292329,48.444596],[3.293056,48.445276],[3.293138,48.445309],[3.293368,48.445628],[3.293661,48.445985],[3.29374,48.446117],[3.29396,48.446372],[3.294304,48.446627],[3.294761,48.446912],[3.295881,48.447668],[3.295849,48.447688],[3.296837,48.448338],[3.297547,48.44891],[3.297465,48.44892],[3.297188,48.449195],[3.297597,48.449543],[3.297753,48.449701],[3.297845,48.449851],[3.298264,48.450055],[3.298478,48.450121],[3.298946,48.450221],[3.299309,48.450317],[3.299359,48.450237],[3.300493,48.450461],[3.301087,48.450674],[3.301703,48.45101],[3.301995,48.451197],[3.3024,48.451534],[3.302702,48.45174],[3.303329,48.452007],[3.304029,48.452197],[3.304569,48.452446],[3.304803,48.452502],[3.305096,48.452877],[3.30567,48.453409],[3.305998,48.453617],[3.306329,48.453567],[3.306999,48.453359],[3.307147,48.453453],[3.307452,48.453162],[3.307621,48.452853],[3.307637,48.452428],[3.307707,48.452345],[3.307741,48.452152],[3.307605,48.451823],[3.307551,48.45153],[3.307474,48.451395],[3.307218,48.451316],[3.307069,48.45119],[3.307261,48.450528],[3.307483,48.449868],[3.307603,48.449365],[3.30774,48.448909],[3.307598,48.448808],[3.307761,48.448604],[3.307863,48.447956],[3.307886,48.447645],[3.307972,48.447245],[3.308239,48.446362],[3.308306,48.446042],[3.308487,48.445329],[3.308442,48.444844],[3.308479,48.444713],[3.308967,48.443542],[3.309235,48.442927],[3.309464,48.442289],[3.309372,48.442046],[3.309621,48.441616],[3.310152,48.441065],[3.310213,48.440729],[3.310237,48.440329],[3.310167,48.439906],[3.31076,48.439111],[3.31118,48.438009],[3.311161,48.437961],[3.311906,48.437902],[3.312261,48.437839],[3.312486,48.437744],[3.31306,48.437674],[3.312613,48.438361],[3.312487,48.43883],[3.312493,48.439136],[3.312443,48.439388],[3.312598,48.440393],[3.312739,48.440752],[3.312879,48.440985],[3.313263,48.441305],[3.313916,48.441515],[3.314457,48.441565],[3.315105,48.44156],[3.31581,48.441607],[3.317056,48.441849],[3.318361,48.442198],[3.319041,48.442408],[3.319287,48.442604],[3.319343,48.442711],[3.320216,48.443117],[3.320709,48.443437],[3.32126,48.444007],[3.321788,48.444776],[3.322181,48.445618],[3.322479,48.445616],[3.32283,48.445577],[3.323344,48.445663],[3.324048,48.445693],[3.324695,48.445562],[3.324992,48.445559],[3.325558,48.445482],[3.325963,48.445479],[3.327479,48.445592],[3.327939,48.445678],[3.328502,48.445481],[3.328942,48.445392],[3.329169,48.44538],[3.330112,48.445466],[3.330715,48.445575],[3.330881,48.44557],[3.332155,48.445373],[3.33243,48.445375],[3.332727,48.445438],[3.3332,48.445588],[3.333358,48.445683],[3.333737,48.446027],[3.333998,48.446169],[3.334135,48.446334],[3.334611,48.447294],[3.33488,48.447909],[3.334992,48.447959],[3.335297,48.448013],[3.336516,48.448161],[3.336874,48.44825],[3.337258,48.448531],[3.337442,48.448737],[3.337525,48.448936],[3.337649,48.448967],[3.338263,48.448902],[3.33836,48.44894],[3.338765,48.44921],[3.339281,48.449513],[3.339464,48.449515],[3.339877,48.448856],[3.339867,48.448673],[3.340611,48.447311],[3.341744,48.447535],[3.343846,48.447943],[3.345266,48.448152],[3.345478,48.447345],[3.345816,48.446774],[3.345976,48.446809],[3.346142,48.44657],[3.346,48.446493],[3.346043,48.446099],[3.346047,48.445835],[3.346203,48.44558],[3.34717,48.444977],[3.347471,48.444638],[3.347571,48.444466],[3.347583,48.444183],[3.347678,48.443989],[3.348162,48.443428],[3.348326,48.443259],[3.348351,48.443136],[3.34831,48.442736],[3.348141,48.442484],[3.348246,48.442411],[3.348271,48.442293],[3.348097,48.442202],[3.347875,48.442142],[3.347773,48.441997],[3.34751,48.441531],[3.347394,48.441212],[3.349317,48.441364],[3.349478,48.441055],[3.349528,48.44103],[3.350119,48.441039],[3.350252,48.440793],[3.35052,48.440779],[3.350618,48.440612],[3.35069,48.440129],[3.350806,48.43921],[3.350792,48.439037],[3.350698,48.438594],[3.350566,48.438327],[3.350602,48.438077]]]},"properties":{"nom":"Grisy-sur-Seine","code":"77218","codeDepartement":"77","siren":"217702182","codeEpci":"200040251","codeRegion":"11","codesPostaux":["77480"],"population":107},"id":"g0OTg"}' + settings.UMAP_ALLOW_ANONYMOUS = True + page.goto(f"{live_server.url}/en/map/new/#15/48.4395/3.3189") + page.get_by_title("Import data").click() + page.locator(".umap-upload textarea").fill(geojson) + page.locator('select[name="format"]').select_option("geojson") + page.get_by_role("button", name="Import data", exact=True).click() + page.locator("path").click() + page.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() + expect(page.locator("#umap-tooltip-container")).to_contain_text( + "Please zoom in to edit the geometry" + ) + expect(page.locator(".leaflet-vertex-icon")).to_be_hidden() + page.get_by_label("Zoom in").click() + expect(page.locator("#umap-tooltip-container")).to_contain_text( + "Please zoom in to edit the geometry" + ) + page.get_by_label("Zoom in").click() + page.wait_for_timeout(500) + page.get_by_label("Zoom out").click() + page.wait_for_timeout(500) + expect(page.locator(".leaflet-vertex-icon")).to_be_hidden() + expect(page.locator("#umap-tooltip-container")).to_contain_text( + "Please zoom in to edit the geometry" + ) From dc0cf50513b22aa36bdbc37da8c672336c452d4d Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 6 Sep 2024 17:01:07 +0200 Subject: [PATCH 3/3] chore: bump Leaflet.Editable to 1.3.0 --- package-lock.json | 14 +- package.json | 2 +- .../umap/vendors/editable/Leaflet.Editable.js | 4016 +++++++++-------- .../markercluster/MarkerCluster.Default.css | 2 +- 4 files changed, 2088 insertions(+), 1946 deletions(-) diff --git a/package-lock.json b/package-lock.json index af48e6711..074ee9351 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "jsdom": "^24.0.0", "leaflet": "1.9.4", "leaflet-contextmenu": "^1.4.0", - "leaflet-editable": "^1.2.0", + "leaflet-editable": "^1.3.0", "leaflet-editinosm": "0.2.3", "leaflet-formbuilder": "0.2.10", "leaflet-fullscreen": "1.0.2", @@ -3015,9 +3015,9 @@ "integrity": "sha1-4r2kga8QJggOq6oymX5TH9RPYFw=" }, "node_modules/leaflet-editable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz", - "integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ==" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.3.0.tgz", + "integrity": "sha512-elXuUM6L3kjZsg3P6PV7SEYNBX0iDT3oG1vWVnfm5Axd2q8cUqDPQYkru++m7/bE4jL07OKeETdHE543K6zsbQ==" }, "node_modules/leaflet-editinosm": { "version": "0.2.3", @@ -7154,9 +7154,9 @@ "integrity": "sha1-4r2kga8QJggOq6oymX5TH9RPYFw=" }, "leaflet-editable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz", - "integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ==" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.3.0.tgz", + "integrity": "sha512-elXuUM6L3kjZsg3P6PV7SEYNBX0iDT3oG1vWVnfm5Axd2q8cUqDPQYkru++m7/bE4jL07OKeETdHE543K6zsbQ==" }, "leaflet-editinosm": { "version": "0.2.3", diff --git a/package.json b/package.json index 28fba350a..6b1e0522e 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "jsdom": "^24.0.0", "leaflet": "1.9.4", "leaflet-contextmenu": "^1.4.0", - "leaflet-editable": "^1.2.0", + "leaflet-editable": "^1.3.0", "leaflet-editinosm": "0.2.3", "leaflet-formbuilder": "0.2.10", "leaflet-fullscreen": "1.0.2", diff --git a/umap/static/umap/vendors/editable/Leaflet.Editable.js b/umap/static/umap/vendors/editable/Leaflet.Editable.js index c41b49622..6c1915e61 100644 --- a/umap/static/umap/vendors/editable/Leaflet.Editable.js +++ b/umap/static/umap/vendors/editable/Leaflet.Editable.js @@ -1,1946 +1,2088 @@ -'use strict'; -(function (factory, window) { - /*globals define, module, require*/ - - // define an AMD module that relies on 'leaflet' - if (typeof define === 'function' && define.amd) { - define(['leaflet'], factory); +;((factory, window) => { + /*globals define, module, require*/ + // define an AMD module that relies on 'leaflet' + if (typeof define === 'function' && define.amd) { + define(['leaflet'], factory) // define a Common JS module that relies on 'leaflet' - } else if (typeof exports === 'object') { - module.exports = factory(require('leaflet')); - } - - // attach your plugin to the global 'L' variable - if(typeof window !== 'undefined' && window.L){ - factory(window.L); - } - -}(function (L) { - // 🍂miniclass CancelableEvent (Event objects) - // 🍂method cancel() - // Cancel any subsequent action. - - // 🍂miniclass VertexEvent (Event objects) - // 🍂property vertex: VertexMarker - // The vertex that fires the event. - - // 🍂miniclass ShapeEvent (Event objects) - // 🍂property shape: Array - // The shape (LatLngs array) subject of the action. - - // 🍂miniclass CancelableVertexEvent (Event objects) - // 🍂inherits VertexEvent - // 🍂inherits CancelableEvent - - // 🍂miniclass CancelableShapeEvent (Event objects) - // 🍂inherits ShapeEvent - // 🍂inherits CancelableEvent - - // 🍂miniclass LayerEvent (Event objects) - // 🍂property layer: object - // The Layer (Marker, Polyline…) subject of the action. - - // 🍂namespace Editable; 🍂class Editable; 🍂aka L.Editable - // Main edition handler. By default, it is attached to the map - // as `map.editTools` property. - // Leaflet.Editable is made to be fully extendable. You have three ways to customize - // the behaviour: using options, listening to events, or extending. - L.Editable = L.Evented.extend({ - - statics: { - FORWARD: 1, - BACKWARD: -1 - }, - - options: { - - // You can pass them when creating a map using the `editOptions` key. - // 🍂option zIndex: int = 1000 - // The default zIndex of the editing tools. - zIndex: 1000, - - // 🍂option polygonClass: class = L.Polygon - // Class to be used when creating a new Polygon. - polygonClass: L.Polygon, - - // 🍂option polylineClass: class = L.Polyline - // Class to be used when creating a new Polyline. - polylineClass: L.Polyline, - - // 🍂option markerClass: class = L.Marker - // Class to be used when creating a new Marker. - markerClass: L.Marker, - - // 🍂option rectangleClass: class = L.Rectangle - // Class to be used when creating a new Rectangle. - rectangleClass: L.Rectangle, - - // 🍂option circleClass: class = L.Circle - // Class to be used when creating a new Circle. - circleClass: L.Circle, - - // 🍂option drawingCSSClass: string = 'leaflet-editable-drawing' - // CSS class to be added to the map container while drawing. - drawingCSSClass: 'leaflet-editable-drawing', - - // 🍂option drawingCursor: const = 'crosshair' - // Cursor mode set to the map while drawing. - drawingCursor: 'crosshair', - - // 🍂option editLayer: Layer = new L.LayerGroup() - // Layer used to store edit tools (vertex, line guide…). - editLayer: undefined, - - // 🍂option featuresLayer: Layer = new L.LayerGroup() - // Default layer used to store drawn features (Marker, Polyline…). - featuresLayer: undefined, - - // 🍂option polylineEditorClass: class = PolylineEditor - // Class to be used as Polyline editor. - polylineEditorClass: undefined, - - // 🍂option polygonEditorClass: class = PolygonEditor - // Class to be used as Polygon editor. - polygonEditorClass: undefined, - - // 🍂option markerEditorClass: class = MarkerEditor - // Class to be used as Marker editor. - markerEditorClass: undefined, - - // 🍂option rectangleEditorClass: class = RectangleEditor - // Class to be used as Rectangle editor. - rectangleEditorClass: undefined, - - // 🍂option circleEditorClass: class = CircleEditor - // Class to be used as Circle editor. - circleEditorClass: undefined, - - // 🍂option lineGuideOptions: hash = {} - // Options to be passed to the line guides. - lineGuideOptions: {}, - - // 🍂option skipMiddleMarkers: boolean = false - // Set this to true if you don't want middle markers. - skipMiddleMarkers: false - - }, - - initialize: function (map, options) { - L.setOptions(this, options); - this._lastZIndex = this.options.zIndex; - this.map = map; - this.editLayer = this.createEditLayer(); - this.featuresLayer = this.createFeaturesLayer(); - this.forwardLineGuide = this.createLineGuide(); - this.backwardLineGuide = this.createLineGuide(); - }, - - fireAndForward: function (type, e) { - e = e || {}; - e.editTools = this; - this.fire(type, e); - this.map.fire(type, e); - }, - - createLineGuide: function () { - var options = L.extend({dashArray: '5,10', weight: 1, interactive: false}, this.options.lineGuideOptions); - return L.polyline([], options); - }, - - createVertexIcon: function (options) { - return L.Browser.mobile && L.Browser.touch ? new L.Editable.TouchVertexIcon(options) : new L.Editable.VertexIcon(options); - }, - - createEditLayer: function () { - return this.options.editLayer || new L.LayerGroup().addTo(this.map); - }, - - createFeaturesLayer: function () { - return this.options.featuresLayer || new L.LayerGroup().addTo(this.map); - }, - - moveForwardLineGuide: function (latlng) { - if (this.forwardLineGuide._latlngs.length) { - this.forwardLineGuide._latlngs[1] = latlng; - this.forwardLineGuide._bounds.extend(latlng); - this.forwardLineGuide.redraw(); - } - }, - - moveBackwardLineGuide: function (latlng) { - if (this.backwardLineGuide._latlngs.length) { - this.backwardLineGuide._latlngs[1] = latlng; - this.backwardLineGuide._bounds.extend(latlng); - this.backwardLineGuide.redraw(); - } - }, - - anchorForwardLineGuide: function (latlng) { - this.forwardLineGuide._latlngs[0] = latlng; - this.forwardLineGuide._bounds.extend(latlng); - this.forwardLineGuide.redraw(); - }, - - anchorBackwardLineGuide: function (latlng) { - this.backwardLineGuide._latlngs[0] = latlng; - this.backwardLineGuide._bounds.extend(latlng); - this.backwardLineGuide.redraw(); - }, - - attachForwardLineGuide: function () { - this.editLayer.addLayer(this.forwardLineGuide); - }, - - attachBackwardLineGuide: function () { - this.editLayer.addLayer(this.backwardLineGuide); - }, - - detachForwardLineGuide: function () { - this.forwardLineGuide.setLatLngs([]); - this.editLayer.removeLayer(this.forwardLineGuide); - }, - - detachBackwardLineGuide: function () { - this.backwardLineGuide.setLatLngs([]); - this.editLayer.removeLayer(this.backwardLineGuide); - }, - - blockEvents: function () { - // Hack: force map not to listen to other layers events while drawing. - if (!this._oldTargets) { - this._oldTargets = this.map._targets; - this.map._targets = {}; - } - }, - - unblockEvents: function () { - if (this._oldTargets) { - // Reset, but keep targets created while drawing. - this.map._targets = L.extend(this.map._targets, this._oldTargets); - delete this._oldTargets; - } - }, - - registerForDrawing: function (editor) { - if (this._drawingEditor) this.unregisterForDrawing(this._drawingEditor); - this.blockEvents(); - editor.reset(); // Make sure editor tools still receive events. - this._drawingEditor = editor; - this.map.on('mousemove touchmove', editor.onDrawingMouseMove, editor); - this.map.on('mousedown', this.onMousedown, this); - this.map.on('mouseup', this.onMouseup, this); - L.DomUtil.addClass(this.map._container, this.options.drawingCSSClass); - this.defaultMapCursor = this.map._container.style.cursor; - this.map._container.style.cursor = this.options.drawingCursor; - }, - - unregisterForDrawing: function (editor) { - this.unblockEvents(); - L.DomUtil.removeClass(this.map._container, this.options.drawingCSSClass); - this.map._container.style.cursor = this.defaultMapCursor; - editor = editor || this._drawingEditor; - if (!editor) return; - this.map.off('mousemove touchmove', editor.onDrawingMouseMove, editor); - this.map.off('mousedown', this.onMousedown, this); - this.map.off('mouseup', this.onMouseup, this); - if (editor !== this._drawingEditor) return; - delete this._drawingEditor; - if (editor._drawing) editor.cancelDrawing(); - }, - - onMousedown: function (e) { - if (e.originalEvent.which != 1) return; - this._mouseDown = e; - this._drawingEditor.onDrawingMouseDown(e); - }, - - onMouseup: function (e) { - if (this._mouseDown) { - var editor = this._drawingEditor, - mouseDown = this._mouseDown; - this._mouseDown = null; - editor.onDrawingMouseUp(e); - if (this._drawingEditor !== editor) return; // onDrawingMouseUp may call unregisterFromDrawing. - var origin = L.point(mouseDown.originalEvent.clientX, mouseDown.originalEvent.clientY); - var distance = L.point(e.originalEvent.clientX, e.originalEvent.clientY).distanceTo(origin); - if (Math.abs(distance) < 9 * (window.devicePixelRatio || 1)) this._drawingEditor.onDrawingClick(e); - } - }, - - // 🍂section Public methods - // You will generally access them by the `map.editTools` - // instance: - // - // `map.editTools.startPolyline();` - - // 🍂method drawing(): boolean - // Return true if any drawing action is ongoing. - drawing: function () { - return this._drawingEditor && this._drawingEditor.drawing(); - }, - - // 🍂method stopDrawing() - // When you need to stop any ongoing drawing, without needing to know which editor is active. - stopDrawing: function () { - this.unregisterForDrawing(); - }, - - // 🍂method commitDrawing() - // When you need to commit any ongoing drawing, without needing to know which editor is active. - commitDrawing: function (e) { - if (!this._drawingEditor) return; - this._drawingEditor.commitDrawing(e); - }, - - connectCreatedToMap: function (layer) { - return this.featuresLayer.addLayer(layer); - }, - - // 🍂method startPolyline(latlng: L.LatLng, options: hash): L.Polyline - // Start drawing a Polyline. If `latlng` is given, a first point will be added. In any case, continuing on user click. - // If `options` is given, it will be passed to the Polyline class constructor. - startPolyline: function (latlng, options) { - var line = this.createPolyline([], options); - line.enableEdit(this.map).newShape(latlng); - return line; - }, - - // 🍂method startPolygon(latlng: L.LatLng, options: hash): L.Polygon - // Start drawing a Polygon. If `latlng` is given, a first point will be added. In any case, continuing on user click. - // If `options` is given, it will be passed to the Polygon class constructor. - startPolygon: function (latlng, options) { - var polygon = this.createPolygon([], options); - polygon.enableEdit(this.map).newShape(latlng); - return polygon; - }, - - // 🍂method startMarker(latlng: L.LatLng, options: hash): L.Marker - // Start adding a Marker. If `latlng` is given, the Marker will be shown first at this point. - // In any case, it will follow the user mouse, and will have a final `latlng` on next click (or touch). - // If `options` is given, it will be passed to the Marker class constructor. - startMarker: function (latlng, options) { - latlng = latlng || this.map.getCenter().clone(); - var marker = this.createMarker(latlng, options); - marker.enableEdit(this.map).startDrawing(); - return marker; - }, - - // 🍂method startRectangle(latlng: L.LatLng, options: hash): L.Rectangle - // Start drawing a Rectangle. If `latlng` is given, the Rectangle anchor will be added. In any case, continuing on user drag. - // If `options` is given, it will be passed to the Rectangle class constructor. - startRectangle: function(latlng, options) { - var corner = latlng || L.latLng([0, 0]); - var bounds = new L.LatLngBounds(corner, corner); - var rectangle = this.createRectangle(bounds, options); - rectangle.enableEdit(this.map).startDrawing(); - return rectangle; - }, - - // 🍂method startCircle(latlng: L.LatLng, options: hash): L.Circle - // Start drawing a Circle. If `latlng` is given, the Circle anchor will be added. In any case, continuing on user drag. - // If `options` is given, it will be passed to the Circle class constructor. - startCircle: function (latlng, options) { - latlng = latlng || this.map.getCenter().clone(); - var circle = this.createCircle(latlng, options); - circle.enableEdit(this.map).startDrawing(); - return circle; - }, - - startHole: function (editor, latlng) { - editor.newHole(latlng); - }, - - createLayer: function (klass, latlngs, options) { - options = L.Util.extend({editOptions: {editTools: this}}, options); - var layer = new klass(latlngs, options); - // 🍂namespace Editable - // 🍂event editable:created: LayerEvent - // Fired when a new feature (Marker, Polyline…) is created. - this.fireAndForward('editable:created', {layer: layer}); - return layer; - }, - - createPolyline: function (latlngs, options) { - return this.createLayer(options && options.polylineClass || this.options.polylineClass, latlngs, options); - }, - - createPolygon: function (latlngs, options) { - return this.createLayer(options && options.polygonClass || this.options.polygonClass, latlngs, options); - }, - - createMarker: function (latlng, options) { - return this.createLayer(options && options.markerClass || this.options.markerClass, latlng, options); - }, - - createRectangle: function (bounds, options) { - return this.createLayer(options && options.rectangleClass || this.options.rectangleClass, bounds, options); - }, - - createCircle: function (latlng, options) { - return this.createLayer(options && options.circleClass || this.options.circleClass, latlng, options); - } - - }); - - L.extend(L.Editable, { - - makeCancellable: function (e) { - e.cancel = function () { - e._cancelled = true; - }; - } - - }); - - // 🍂namespace Map; 🍂class Map - // Leaflet.Editable add options and events to the `L.Map` object. - // See `Editable` events for the list of events fired on the Map. - // 🍂example + } else if (typeof exports === 'object') { + module.exports = factory(require('leaflet')) + } + + // attach your plugin to the global 'L' variable + if (typeof window !== 'undefined' && window.L) { + factory(window.L) + } +})((L) => { + // 🍂miniclass CancelableEvent (Event objects) + // 🍂method cancel() + // Cancel any subsequent action. + + // 🍂miniclass VertexEvent (Event objects) + // 🍂property vertex: VertexMarker + // The vertex that fires the event. + + // 🍂miniclass ShapeEvent (Event objects) + // 🍂property shape: Array + // The shape (LatLngs array) subject of the action. + + // 🍂miniclass CancelableVertexEvent (Event objects) + // 🍂inherits VertexEvent + // 🍂inherits CancelableEvent + + // 🍂miniclass CancelableShapeEvent (Event objects) + // 🍂inherits ShapeEvent + // 🍂inherits CancelableEvent + + // 🍂miniclass LayerEvent (Event objects) + // 🍂property layer: object + // The Layer (Marker, Polyline…) subject of the action. + + // 🍂namespace Editable; 🍂class Editable; 🍂aka L.Editable + // Main edition handler. By default, it is attached to the map + // as `map.editTools` property. + // Leaflet.Editable is made to be fully extendable. You have three ways to customize + // the behaviour: using options, listening to events, or extending. + L.Editable = L.Evented.extend({ + statics: { + FORWARD: 1, + BACKWARD: -1, + }, + + options: { + // You can pass them when creating a map using the `editOptions` key. + // 🍂option zIndex: int = 1000 + // The default zIndex of the editing tools. + zIndex: 1000, + + // 🍂option polygonClass: class = L.Polygon + // Class to be used when creating a new Polygon. + polygonClass: L.Polygon, + + // 🍂option polylineClass: class = L.Polyline + // Class to be used when creating a new Polyline. + polylineClass: L.Polyline, + + // 🍂option markerClass: class = L.Marker + // Class to be used when creating a new Marker. + markerClass: L.Marker, + + // 🍂option circleMarkerClass: class = L.CircleMarker + // Class to be used when creating a new CircleMarker. + circleMarkerClass: L.CircleMarker, + + // 🍂option rectangleClass: class = L.Rectangle + // Class to be used when creating a new Rectangle. + rectangleClass: L.Rectangle, + + // 🍂option circleClass: class = L.Circle + // Class to be used when creating a new Circle. + circleClass: L.Circle, + + // 🍂option drawingCSSClass: string = 'leaflet-editable-drawing' + // CSS class to be added to the map container while drawing. + drawingCSSClass: 'leaflet-editable-drawing', + + // 🍂option drawingCursor: const = 'crosshair' + // Cursor mode set to the map while drawing. + drawingCursor: 'crosshair', + + // 🍂option editLayer: Layer = new L.LayerGroup() + // Layer used to store edit tools (vertex, line guide…). + editLayer: undefined, + + // 🍂option featuresLayer: Layer = new L.LayerGroup() + // Default layer used to store drawn features (Marker, Polyline…). + featuresLayer: undefined, + + // 🍂option polylineEditorClass: class = PolylineEditor + // Class to be used as Polyline editor. + polylineEditorClass: undefined, + + // 🍂option polygonEditorClass: class = PolygonEditor + // Class to be used as Polygon editor. + polygonEditorClass: undefined, + + // 🍂option markerEditorClass: class = MarkerEditor + // Class to be used as Marker editor. + markerEditorClass: undefined, + + // 🍂option circleMarkerEditorClass: class = CircleMarkerEditor + // Class to be used as CircleMarker editor. + circleMarkerEditorClass: undefined, + + // 🍂option rectangleEditorClass: class = RectangleEditor + // Class to be used as Rectangle editor. + rectangleEditorClass: undefined, + + // 🍂option circleEditorClass: class = CircleEditor + // Class to be used as Circle editor. + circleEditorClass: undefined, + + // 🍂option lineGuideOptions: hash = {} + // Options to be passed to the line guides. + lineGuideOptions: {}, + + // 🍂option skipMiddleMarkers: boolean = false + // Set this to true if you don't want middle markers. + skipMiddleMarkers: false, + }, + + initialize: function (map, options) { + L.setOptions(this, options) + this._lastZIndex = this.options.zIndex + this.map = map + this.editLayer = this.createEditLayer() + this.featuresLayer = this.createFeaturesLayer() + this.forwardLineGuide = this.createLineGuide() + this.backwardLineGuide = this.createLineGuide() + }, + + fireAndForward: function (type, e) { + e = e || {} + e.editTools = this + this.fire(type, e) + this.map.fire(type, e) + }, + + createLineGuide: function () { + const options = L.extend( + { dashArray: '5,10', weight: 1, interactive: false }, + this.options.lineGuideOptions + ) + return L.polyline([], options) + }, + + createVertexIcon: (options) => + L.Browser.mobile && L.Browser.touch + ? new L.Editable.TouchVertexIcon(options) + : new L.Editable.VertexIcon(options), + + createEditLayer: function () { + return this.options.editLayer || new L.LayerGroup().addTo(this.map) + }, + + createFeaturesLayer: function () { + return this.options.featuresLayer || new L.LayerGroup().addTo(this.map) + }, + + moveForwardLineGuide: function (latlng) { + if (this.forwardLineGuide._latlngs.length) { + this.forwardLineGuide._latlngs[1] = latlng + this.forwardLineGuide._bounds.extend(latlng) + this.forwardLineGuide.redraw() + } + }, + + moveBackwardLineGuide: function (latlng) { + if (this.backwardLineGuide._latlngs.length) { + this.backwardLineGuide._latlngs[1] = latlng + this.backwardLineGuide._bounds.extend(latlng) + this.backwardLineGuide.redraw() + } + }, + + anchorForwardLineGuide: function (latlng) { + this.forwardLineGuide._latlngs[0] = latlng + this.forwardLineGuide._bounds.extend(latlng) + this.forwardLineGuide.redraw() + }, + + anchorBackwardLineGuide: function (latlng) { + this.backwardLineGuide._latlngs[0] = latlng + this.backwardLineGuide._bounds.extend(latlng) + this.backwardLineGuide.redraw() + }, + + attachForwardLineGuide: function () { + this.editLayer.addLayer(this.forwardLineGuide) + }, + + attachBackwardLineGuide: function () { + this.editLayer.addLayer(this.backwardLineGuide) + }, + + detachForwardLineGuide: function () { + this.forwardLineGuide.setLatLngs([]) + this.editLayer.removeLayer(this.forwardLineGuide) + }, + + detachBackwardLineGuide: function () { + this.backwardLineGuide.setLatLngs([]) + this.editLayer.removeLayer(this.backwardLineGuide) + }, + + blockEvents: function () { + // Hack: force map not to listen to other layers events while drawing. + if (!this._oldTargets) { + this._oldTargets = this.map._targets + this.map._targets = {} + } + }, + + unblockEvents: function () { + if (this._oldTargets) { + // Reset, but keep targets created while drawing. + this.map._targets = L.extend(this.map._targets, this._oldTargets) + delete this._oldTargets + } + }, + + registerForDrawing: function (editor) { + if (this._drawingEditor) this.unregisterForDrawing(this._drawingEditor) + this.blockEvents() + editor.reset() // Make sure editor tools still receive events. + this._drawingEditor = editor + this.map.on('mousemove touchmove', editor.onDrawingMouseMove, editor) + this.map.on('mousedown', this.onMousedown, this) + this.map.on('mouseup', this.onMouseup, this) + L.DomUtil.addClass(this.map._container, this.options.drawingCSSClass) + this.defaultMapCursor = this.map._container.style.cursor + this.map._container.style.cursor = this.options.drawingCursor + }, + + unregisterForDrawing: function (editor) { + this.unblockEvents() + L.DomUtil.removeClass(this.map._container, this.options.drawingCSSClass) + this.map._container.style.cursor = this.defaultMapCursor + editor = editor || this._drawingEditor + if (!editor) return + this.map.off('mousemove touchmove', editor.onDrawingMouseMove, editor) + this.map.off('mousedown', this.onMousedown, this) + this.map.off('mouseup', this.onMouseup, this) + if (editor !== this._drawingEditor) return + delete this._drawingEditor + if (editor._drawing) editor.cancelDrawing() + }, + + onMousedown: function (e) { + if (e.originalEvent.which != 1) return + this._mouseDown = e + this._drawingEditor.onDrawingMouseDown(e) + }, + + onMouseup: function (e) { + if (this._mouseDown) { + const editor = this._drawingEditor + const mouseDown = this._mouseDown + this._mouseDown = null + editor.onDrawingMouseUp(e) + if (this._drawingEditor !== editor) return // onDrawingMouseUp may call unregisterFromDrawing. + const origin = L.point( + mouseDown.originalEvent.clientX, + mouseDown.originalEvent.clientY + ) + const distance = L.point( + e.originalEvent.clientX, + e.originalEvent.clientY + ).distanceTo(origin) + if (Math.abs(distance) < 9 * (window.devicePixelRatio || 1)) + this._drawingEditor.onDrawingClick(e) + } + }, + + // 🍂section Public methods + // You will generally access them by the `map.editTools` + // instance: // - // ```js - // var map = L.map('map', { - // editable: true, - // editOptions: { - // … - // } - // }); - // ``` - // 🍂section Editable Map Options - L.Map.mergeOptions({ - - // 🍂namespace Map - // 🍂section Map Options - // 🍂option editToolsClass: class = L.Editable - // Class to be used as vertex, for path editing. - editToolsClass: L.Editable, - - // 🍂option editable: boolean = false - // Whether to create a L.Editable instance at map init. - editable: false, - - // 🍂option editOptions: hash = {} - // Options to pass to L.Editable when instantiating. - editOptions: {} - - }); - - L.Map.addInitHook(function () { - - this.whenReady(function () { - if (this.options.editable) { - this.editTools = new this.options.editToolsClass(this, this.options.editOptions); - } - }); - - }); - - L.Editable.VertexIcon = L.DivIcon.extend({ - - options: { - iconSize: new L.Point(8, 8) - } - - }); - - L.Editable.TouchVertexIcon = L.Editable.VertexIcon.extend({ - - options: { - iconSize: new L.Point(20, 20) - } - - }); - - - // 🍂namespace Editable; 🍂class VertexMarker; Handler for dragging path vertices. - L.Editable.VertexMarker = L.Marker.extend({ - - options: { - draggable: true, - className: 'leaflet-div-icon leaflet-vertex-icon' - }, - - - // 🍂section Public methods - // The marker used to handle path vertex. You will usually interact with a `VertexMarker` - // instance when listening for events like `editable:vertex:ctrlclick`. - - initialize: function (latlng, latlngs, editor, options) { - // We don't use this._latlng, because on drag Leaflet replace it while - // we want to keep reference. - this.latlng = latlng; - this.latlngs = latlngs; - this.editor = editor; - L.Marker.prototype.initialize.call(this, latlng, options); - this.options.icon = this.editor.tools.createVertexIcon({className: this.options.className}); - this.latlng.__vertex = this; - this.editor.editLayer.addLayer(this); - this.setZIndexOffset(editor.tools._lastZIndex + 1); - }, - - onAdd: function (map) { - L.Marker.prototype.onAdd.call(this, map); - this.on('drag', this.onDrag); - this.on('dragstart', this.onDragStart); - this.on('dragend', this.onDragEnd); - this.on('mouseup', this.onMouseup); - this.on('click', this.onClick); - this.on('contextmenu', this.onContextMenu); - this.on('mousedown touchstart', this.onMouseDown); - this.on('mouseover', this.onMouseOver); - this.on('mouseout', this.onMouseOut); - this.addMiddleMarkers(); - }, - - onRemove: function (map) { - if (this.middleMarker) this.middleMarker.delete(); - delete this.latlng.__vertex; - this.off('drag', this.onDrag); - this.off('dragstart', this.onDragStart); - this.off('dragend', this.onDragEnd); - this.off('mouseup', this.onMouseup); - this.off('click', this.onClick); - this.off('contextmenu', this.onContextMenu); - this.off('mousedown touchstart', this.onMouseDown); - this.off('mouseover', this.onMouseOver); - this.off('mouseout', this.onMouseOut); - L.Marker.prototype.onRemove.call(this, map); - }, - - onDrag: function (e) { - e.vertex = this; - this.editor.onVertexMarkerDrag(e); - var iconPos = L.DomUtil.getPosition(this._icon), - latlng = this._map.layerPointToLatLng(iconPos); - this.latlng.update(latlng); - this._latlng = this.latlng; // Push back to Leaflet our reference. - this.editor.refresh(); - if (this.middleMarker) this.middleMarker.updateLatLng(); - var next = this.getNext(); - if (next && next.middleMarker) next.middleMarker.updateLatLng(); - }, - - onDragStart: function (e) { - e.vertex = this; - this.editor.onVertexMarkerDragStart(e); - }, - - onDragEnd: function (e) { - e.vertex = this; - this.editor.onVertexMarkerDragEnd(e); - }, - - onClick: function (e) { - e.vertex = this; - this.editor.onVertexMarkerClick(e); - }, - - onMouseup: function (e) { - L.DomEvent.stop(e); - e.vertex = this; - this.editor.map.fire('mouseup', e); - }, - - onContextMenu: function (e) { - e.vertex = this; - this.editor.onVertexMarkerContextMenu(e); - }, - - onMouseDown: function (e) { - e.vertex = this; - this.editor.onVertexMarkerMouseDown(e); - }, - - onMouseOver: function (e) { - e.vertex = this; - this.editor.onVertexMarkerMouseOver(e); - }, - - onMouseOut: function (e) { - e.vertex = this; - this.editor.onVertexMarkerMouseOut(e); - }, - - // 🍂method delete() - // Delete a vertex and the related LatLng. - delete: function () { - var next = this.getNext(); // Compute before changing latlng - this.latlngs.splice(this.getIndex(), 1); - this.editor.editLayer.removeLayer(this); - this.editor.onVertexDeleted({latlng: this.latlng, vertex: this}); - if (!this.latlngs.length) this.editor.deleteShape(this.latlngs); - if (next) next.resetMiddleMarker(); - this.editor.refresh(); - }, - - // 🍂method getIndex(): int - // Get the index of the current vertex among others of the same LatLngs group. - getIndex: function () { - return this.latlngs.indexOf(this.latlng); - }, - - // 🍂method getLastIndex(): int - // Get last vertex index of the LatLngs group of the current vertex. - getLastIndex: function () { - return this.latlngs.length - 1; - }, - - // 🍂method getPrevious(): VertexMarker - // Get the previous VertexMarker in the same LatLngs group. - getPrevious: function () { - if (this.latlngs.length < 2) return; - var index = this.getIndex(), - previousIndex = index - 1; - if (index === 0 && this.editor.CLOSED) previousIndex = this.getLastIndex(); - var previous = this.latlngs[previousIndex]; - if (previous) return previous.__vertex; - }, - - // 🍂method getNext(): VertexMarker - // Get the next VertexMarker in the same LatLngs group. - getNext: function () { - if (this.latlngs.length < 2) return; - var index = this.getIndex(), - nextIndex = index + 1; - if (index === this.getLastIndex() && this.editor.CLOSED) nextIndex = 0; - var next = this.latlngs[nextIndex]; - if (next) return next.__vertex; - }, - - addMiddleMarker: function (previous) { - if (!this.editor.hasMiddleMarkers()) return; - previous = previous || this.getPrevious(); - if (previous && !this.middleMarker) this.middleMarker = this.editor.addMiddleMarker(previous, this, this.latlngs, this.editor); - }, - - addMiddleMarkers: function () { - if (!this.editor.hasMiddleMarkers()) return; - var previous = this.getPrevious(); - if (previous) this.addMiddleMarker(previous); - var next = this.getNext(); - if (next) next.resetMiddleMarker(); - }, - - resetMiddleMarker: function () { - if (this.middleMarker) this.middleMarker.delete(); - this.addMiddleMarker(); - }, - - // 🍂method split() - // Split the vertex LatLngs group at its index, if possible. - split: function () { - if (!this.editor.splitShape) return; // Only for PolylineEditor - this.editor.splitShape(this.latlngs, this.getIndex()); - }, - - // 🍂method continue() - // Continue the vertex LatLngs from this vertex. Only active for first and last vertices of a Polyline. - continue: function () { - if (!this.editor.continueBackward) return; // Only for PolylineEditor - var index = this.getIndex(); - if (index === 0) this.editor.continueBackward(this.latlngs); - else if (index === this.getLastIndex()) this.editor.continueForward(this.latlngs); - } - - }); - - L.Editable.mergeOptions({ - - // 🍂namespace Editable - // 🍂option vertexMarkerClass: class = VertexMarker - // Class to be used as vertex, for path editing. - vertexMarkerClass: L.Editable.VertexMarker - - }); - - L.Editable.MiddleMarker = L.Marker.extend({ - - options: { - opacity: 0.5, - className: 'leaflet-div-icon leaflet-middle-icon', - draggable: true - }, - - initialize: function (left, right, latlngs, editor, options) { - this.left = left; - this.right = right; - this.editor = editor; - this.latlngs = latlngs; - L.Marker.prototype.initialize.call(this, this.computeLatLng(), options); - this._opacity = this.options.opacity; - this.options.icon = this.editor.tools.createVertexIcon({className: this.options.className}); - this.editor.editLayer.addLayer(this); - this.setVisibility(); - }, - - setVisibility: function () { - var leftPoint = this._map.latLngToContainerPoint(this.left.latlng), - rightPoint = this._map.latLngToContainerPoint(this.right.latlng), - size = L.point(this.options.icon.options.iconSize); - if (leftPoint.distanceTo(rightPoint) < size.x * 3) this.hide(); - else this.show(); - }, - - show: function () { - this.setOpacity(this._opacity); - }, - - hide: function () { - this.setOpacity(0); - }, - - updateLatLng: function () { - this.setLatLng(this.computeLatLng()); - this.setVisibility(); - }, - - computeLatLng: function () { - var leftPoint = this.editor.map.latLngToContainerPoint(this.left.latlng), - rightPoint = this.editor.map.latLngToContainerPoint(this.right.latlng), - y = (leftPoint.y + rightPoint.y) / 2, - x = (leftPoint.x + rightPoint.x) / 2; - return this.editor.map.containerPointToLatLng([x, y]); - }, - - onAdd: function (map) { - L.Marker.prototype.onAdd.call(this, map); - L.DomEvent.on(this._icon, 'mousedown touchstart', this.onMouseDown, this); - map.on('zoomend', this.setVisibility, this); - }, - - onRemove: function (map) { - delete this.right.middleMarker; - L.DomEvent.off(this._icon, 'mousedown touchstart', this.onMouseDown, this); - map.off('zoomend', this.setVisibility, this); - L.Marker.prototype.onRemove.call(this, map); - }, - - onMouseDown: function (e) { - var iconPos = L.DomUtil.getPosition(this._icon), - latlng = this.editor.map.layerPointToLatLng(iconPos); - e = { - originalEvent: e, - latlng: latlng - }; - if (this.options.opacity === 0) return; - L.Editable.makeCancellable(e); - this.editor.onMiddleMarkerMouseDown(e); - if (e._cancelled) return; - this.latlngs.splice(this.index(), 0, e.latlng); - this.editor.refresh(); - var icon = this._icon; - var marker = this.editor.addVertexMarker(e.latlng, this.latlngs); - this.editor.onNewVertex(marker); - /* Hack to workaround browser not firing touchend when element is no more on DOM */ - var parent = marker._icon.parentNode; - parent.removeChild(marker._icon); - marker._icon = icon; - parent.appendChild(marker._icon); - marker._initIcon(); - marker._initInteraction(); - marker.setOpacity(1); - /* End hack */ - // Transfer ongoing dragging to real marker - L.Draggable._dragging = false; - marker.dragging._draggable._onDown(e.originalEvent); - this.delete(); - }, - - delete: function () { - this.editor.editLayer.removeLayer(this); - }, - - index: function () { - return this.latlngs.indexOf(this.right.latlng); - } - - }); - - L.Editable.mergeOptions({ - - // 🍂namespace Editable - // 🍂option middleMarkerClass: class = VertexMarker - // Class to be used as middle vertex, pulled by the user to create a new point in the middle of a path. - middleMarkerClass: L.Editable.MiddleMarker - - }); - - // 🍂namespace Editable; 🍂class BaseEditor; 🍂aka L.Editable.BaseEditor - // When editing a feature (Marker, Polyline…), an editor is attached to it. This - // editor basically knows how to handle the edition. - L.Editable.BaseEditor = L.Handler.extend({ - - initialize: function (map, feature, options) { - L.setOptions(this, options); - this.map = map; - this.feature = feature; - this.feature.editor = this; - this.editLayer = new L.LayerGroup(); - this.tools = this.options.editTools || map.editTools; - }, - - // 🍂method enable(): this - // Set up the drawing tools for the feature to be editable. - addHooks: function () { - if (this.isConnected()) this.onFeatureAdd(); - else this.feature.once('add', this.onFeatureAdd, this); - this.onEnable(); - this.feature.on(this._getEvents(), this); - }, - - // 🍂method disable(): this - // Remove the drawing tools for the feature. - removeHooks: function () { - this.feature.off(this._getEvents(), this); - if (this.feature.dragging) this.feature.dragging.disable(); - this.editLayer.clearLayers(); - this.tools.editLayer.removeLayer(this.editLayer); - this.onDisable(); - if (this._drawing) this.cancelDrawing(); - }, - - // 🍂method drawing(): boolean - // Return true if any drawing action is ongoing with this editor. - drawing: function () { - return !!this._drawing; - }, - - reset: function () {}, - - onFeatureAdd: function () { - this.tools.editLayer.addLayer(this.editLayer); - if (this.feature.dragging) this.feature.dragging.enable(); - }, - - hasMiddleMarkers: function () { - return !this.options.skipMiddleMarkers && !this.tools.options.skipMiddleMarkers; - }, - - fireAndForward: function (type, e) { - e = e || {}; - e.layer = this.feature; - this.feature.fire(type, e); - this.tools.fireAndForward(type, e); - }, - - onEnable: function () { - // 🍂namespace Editable - // 🍂event editable:enable: Event - // Fired when an existing feature is ready to be edited. - this.fireAndForward('editable:enable'); - }, - - onDisable: function () { - // 🍂namespace Editable - // 🍂event editable:disable: Event - // Fired when an existing feature is not ready anymore to be edited. - this.fireAndForward('editable:disable'); - }, - - onEditing: function () { - // 🍂namespace Editable - // 🍂event editable:editing: Event - // Fired as soon as any change is made to the feature geometry. - this.fireAndForward('editable:editing'); - }, - - onStartDrawing: function () { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:start: Event - // Fired when a feature is to be drawn. - this.fireAndForward('editable:drawing:start'); - }, - - onEndDrawing: function () { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:end: Event - // Fired when a feature is not drawn anymore. - this.fireAndForward('editable:drawing:end'); - }, - - onCancelDrawing: function () { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:cancel: Event - // Fired when user cancel drawing while a feature is being drawn. - this.fireAndForward('editable:drawing:cancel'); - }, - - onCommitDrawing: function (e) { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:commit: Event - // Fired when user finish drawing a feature. - this.fireAndForward('editable:drawing:commit', e); - }, - - onDrawingMouseDown: function (e) { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:mousedown: Event - // Fired when user `mousedown` while drawing. - this.fireAndForward('editable:drawing:mousedown', e); - }, - - onDrawingMouseUp: function (e) { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:mouseup: Event - // Fired when user `mouseup` while drawing. - this.fireAndForward('editable:drawing:mouseup', e); - }, - - startDrawing: function () { - if (!this._drawing) this._drawing = L.Editable.FORWARD; - this.tools.registerForDrawing(this); - this.onStartDrawing(); - }, - - commitDrawing: function (e) { - this.onCommitDrawing(e); - this.endDrawing(); - }, - - cancelDrawing: function () { - // If called during a vertex drag, the vertex will be removed before - // the mouseup fires on it. This is a workaround. Maybe better fix is - // To have L.Draggable reset it's status on disable (Leaflet side). - L.Draggable._dragging = false; - this.onCancelDrawing(); - this.endDrawing(); - }, - - endDrawing: function () { - this._drawing = false; - this.tools.unregisterForDrawing(this); - this.onEndDrawing(); - }, - - onDrawingClick: function (e) { - if (!this.drawing()) return; - L.Editable.makeCancellable(e); - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:click: CancelableEvent - // Fired when user `click` while drawing, before any internal action is being processed. - this.fireAndForward('editable:drawing:click', e); - if (e._cancelled) return; - if (!this.isConnected()) this.connect(e); - this.processDrawingClick(e); - }, - - isConnected: function () { - return this.map.hasLayer(this.feature); - }, - - connect: function () { - this.tools.connectCreatedToMap(this.feature); - this.tools.editLayer.addLayer(this.editLayer); - }, - - onMove: function (e) { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:move: Event - // Fired when `move` mouse while drawing, while dragging a marker, and while dragging a vertex. - this.fireAndForward('editable:drawing:move', e); - }, - - onDrawingMouseMove: function (e) { - this.onMove(e); - }, - - _getEvents: function () { - return { - dragstart: this.onDragStart, - drag: this.onDrag, - dragend: this.onDragEnd, - remove: this.disable - }; - }, - - onDragStart: function (e) { - this.onEditing(); - // 🍂namespace Editable - // 🍂event editable:dragstart: Event - // Fired before a path feature is dragged. - this.fireAndForward('editable:dragstart', e); - }, - - onDrag: function (e) { - this.onMove(e); - // 🍂namespace Editable - // 🍂event editable:drag: Event - // Fired when a path feature is being dragged. - this.fireAndForward('editable:drag', e); - }, - - onDragEnd: function (e) { - // 🍂namespace Editable - // 🍂event editable:dragend: Event - // Fired after a path feature has been dragged. - this.fireAndForward('editable:dragend', e); - } - - }); - - // 🍂namespace Editable; 🍂class MarkerEditor; 🍂aka L.Editable.MarkerEditor - // 🍂inherits BaseEditor - // Editor for Marker. - L.Editable.MarkerEditor = L.Editable.BaseEditor.extend({ - - onDrawingMouseMove: function (e) { - L.Editable.BaseEditor.prototype.onDrawingMouseMove.call(this, e); - if (this._drawing) this.feature.setLatLng(e.latlng); - }, - - processDrawingClick: function (e) { - // 🍂namespace Editable - // 🍂section Drawing events - // 🍂event editable:drawing:clicked: Event - // Fired when user `click` while drawing, after all internal actions. - this.fireAndForward('editable:drawing:clicked', e); - this.commitDrawing(e); - }, - - connect: function (e) { - // On touch, the latlng has not been updated because there is - // no mousemove. - if (e) this.feature._latlng = e.latlng; - L.Editable.BaseEditor.prototype.connect.call(this, e); - } - - }); - - // 🍂namespace Editable; 🍂class PathEditor; 🍂aka L.Editable.PathEditor - // 🍂inherits BaseEditor - // Base class for all path editors. - L.Editable.PathEditor = L.Editable.BaseEditor.extend({ - - CLOSED: false, - MIN_VERTEX: 2, - - addHooks: function () { - L.Editable.BaseEditor.prototype.addHooks.call(this); - if (this.feature) this.initVertexMarkers(); - return this; - }, - - initVertexMarkers: function (latlngs) { - if (!this.enabled()) return; - latlngs = latlngs || this.getLatLngs(); - if (isFlat(latlngs)) this.addVertexMarkers(latlngs); - else for (var i = 0; i < latlngs.length; i++) this.initVertexMarkers(latlngs[i]); - }, - - getLatLngs: function () { - return this.feature.getLatLngs(); - }, - - // 🍂method reset() - // Rebuild edit elements (Vertex, MiddleMarker, etc.). - reset: function () { - this.editLayer.clearLayers(); - this.initVertexMarkers(); - }, - - addVertexMarker: function (latlng, latlngs) { - return new this.tools.options.vertexMarkerClass(latlng, latlngs, this); - }, - - onNewVertex: function (vertex) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:new: VertexEvent - // Fired when a new vertex is created. - this.fireAndForward('editable:vertex:new', {latlng: vertex.latlng, vertex: vertex}); - }, - - addVertexMarkers: function (latlngs) { - for (var i = 0; i < latlngs.length; i++) { - this.addVertexMarker(latlngs[i], latlngs); - } - }, - - refreshVertexMarkers: function (latlngs) { - latlngs = latlngs || this.getDefaultLatLngs(); - for (var i = 0; i < latlngs.length; i++) { - latlngs[i].__vertex.update(); - } - }, - - addMiddleMarker: function (left, right, latlngs) { - return new this.tools.options.middleMarkerClass(left, right, latlngs, this); - }, - - onVertexMarkerClick: function (e) { - L.Editable.makeCancellable(e); - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:click: CancelableVertexEvent - // Fired when a `click` is issued on a vertex, before any internal action is being processed. - this.fireAndForward('editable:vertex:click', e); - if (e._cancelled) return; - if (this.tools.drawing() && this.tools._drawingEditor !== this) return; - var index = e.vertex.getIndex(), commit; - if (e.originalEvent.ctrlKey) { - this.onVertexMarkerCtrlClick(e); - } else if (e.originalEvent.altKey) { - this.onVertexMarkerAltClick(e); - } else if (e.originalEvent.shiftKey) { - this.onVertexMarkerShiftClick(e); - } else if (e.originalEvent.metaKey) { - this.onVertexMarkerMetaKeyClick(e); - } else if (index === e.vertex.getLastIndex() && this._drawing === L.Editable.FORWARD) { - if (index >= this.MIN_VERTEX - 1) commit = true; - } else if (index === 0 && this._drawing === L.Editable.BACKWARD && this._drawnLatLngs.length >= this.MIN_VERTEX) { - commit = true; - } else if (index === 0 && this._drawing === L.Editable.FORWARD && this._drawnLatLngs.length >= this.MIN_VERTEX && this.CLOSED) { - commit = true; // Allow to close on first point also for polygons - } else { - this.onVertexRawMarkerClick(e); - } - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:clicked: VertexEvent - // Fired when a `click` is issued on a vertex, after all internal actions. - this.fireAndForward('editable:vertex:clicked', e); - if (commit) this.commitDrawing(e); - }, - - onVertexRawMarkerClick: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:rawclick: CancelableVertexEvent - // Fired when a `click` is issued on a vertex without any special key and without being in drawing mode. - this.fireAndForward('editable:vertex:rawclick', e); - if (e._cancelled) return; - if (!this.vertexCanBeDeleted(e.vertex)) return; - e.vertex.delete(); - }, - - vertexCanBeDeleted: function (vertex) { - return vertex.latlngs.length > this.MIN_VERTEX; - }, - - onVertexDeleted: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:deleted: VertexEvent - // Fired after a vertex has been deleted by user. - this.fireAndForward('editable:vertex:deleted', e); - }, - - onVertexMarkerCtrlClick: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:ctrlclick: VertexEvent - // Fired when a `click` with `ctrlKey` is issued on a vertex. - this.fireAndForward('editable:vertex:ctrlclick', e); - }, - - onVertexMarkerShiftClick: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:shiftclick: VertexEvent - // Fired when a `click` with `shiftKey` is issued on a vertex. - this.fireAndForward('editable:vertex:shiftclick', e); - }, - - onVertexMarkerMetaKeyClick: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:metakeyclick: VertexEvent - // Fired when a `click` with `metaKey` is issued on a vertex. - this.fireAndForward('editable:vertex:metakeyclick', e); - }, - - onVertexMarkerAltClick: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:altclick: VertexEvent - // Fired when a `click` with `altKey` is issued on a vertex. - this.fireAndForward('editable:vertex:altclick', e); - }, - - onVertexMarkerContextMenu: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:contextmenu: VertexEvent - // Fired when a `contextmenu` is issued on a vertex. - this.fireAndForward('editable:vertex:contextmenu', e); - }, - - onVertexMarkerMouseDown: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:mousedown: VertexEvent - // Fired when user `mousedown` a vertex. - this.fireAndForward('editable:vertex:mousedown', e); - }, - - onVertexMarkerMouseOver: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:mouseover: VertexEvent - // Fired when a user's mouse enters the vertex - this.fireAndForward('editable:vertex:mouseover', e); - }, - - onVertexMarkerMouseOut: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:mouseout: VertexEvent - // Fired when a user's mouse leaves the vertex - this.fireAndForward('editable:vertex:mouseout', e); - }, - - onMiddleMarkerMouseDown: function (e) { - // 🍂namespace Editable - // 🍂section MiddleMarker events - // 🍂event editable:middlemarker:mousedown: VertexEvent - // Fired when user `mousedown` a middle marker. - this.fireAndForward('editable:middlemarker:mousedown', e); - }, - - onVertexMarkerDrag: function (e) { - this.onMove(e); - if (this.feature._bounds) this.extendBounds(e); - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:drag: VertexEvent - // Fired when a vertex is dragged by user. - this.fireAndForward('editable:vertex:drag', e); - }, - - onVertexMarkerDragStart: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:dragstart: VertexEvent - // Fired before a vertex is dragged by user. - this.fireAndForward('editable:vertex:dragstart', e); - }, - - onVertexMarkerDragEnd: function (e) { - // 🍂namespace Editable - // 🍂section Vertex events - // 🍂event editable:vertex:dragend: VertexEvent - // Fired after a vertex is dragged by user. - this.fireAndForward('editable:vertex:dragend', e); - }, - - setDrawnLatLngs: function (latlngs) { - this._drawnLatLngs = latlngs || this.getDefaultLatLngs(); - }, - - startDrawing: function () { - if (!this._drawnLatLngs) this.setDrawnLatLngs(); - L.Editable.BaseEditor.prototype.startDrawing.call(this); - }, - - startDrawingForward: function () { - this.startDrawing(); - }, - - endDrawing: function () { - this.tools.detachForwardLineGuide(); - this.tools.detachBackwardLineGuide(); - if (this._drawnLatLngs && this._drawnLatLngs.length < this.MIN_VERTEX) this.deleteShape(this._drawnLatLngs); - L.Editable.BaseEditor.prototype.endDrawing.call(this); - delete this._drawnLatLngs; - }, - - addLatLng: function (latlng) { - if (this._drawing === L.Editable.FORWARD) this._drawnLatLngs.push(latlng); - else this._drawnLatLngs.unshift(latlng); - this.feature._bounds.extend(latlng); - var vertex = this.addVertexMarker(latlng, this._drawnLatLngs); - this.onNewVertex(vertex); - this.refresh(); - }, - - newPointForward: function (latlng) { - this.addLatLng(latlng); - this.tools.attachForwardLineGuide(); - this.tools.anchorForwardLineGuide(latlng); - }, - - newPointBackward: function (latlng) { - this.addLatLng(latlng); - this.tools.anchorBackwardLineGuide(latlng); - }, - - // 🍂namespace PathEditor - // 🍂method push() - // Programmatically add a point while drawing. - push: function (latlng) { - if (!latlng) return console.error('L.Editable.PathEditor.push expect a valid latlng as parameter'); - if (this._drawing === L.Editable.FORWARD) this.newPointForward(latlng); - else this.newPointBackward(latlng); - }, - - removeLatLng: function (latlng) { - latlng.__vertex.delete(); - this.refresh(); - }, - - // 🍂method pop(): L.LatLng or null - // Programmatically remove last point (if any) while drawing. - pop: function () { - if (this._drawnLatLngs.length <= 1) return; - var latlng; - if (this._drawing === L.Editable.FORWARD) latlng = this._drawnLatLngs[this._drawnLatLngs.length - 1]; - else latlng = this._drawnLatLngs[0]; - this.removeLatLng(latlng); - if (this._drawing === L.Editable.FORWARD) this.tools.anchorForwardLineGuide(this._drawnLatLngs[this._drawnLatLngs.length - 1]); - else this.tools.anchorForwardLineGuide(this._drawnLatLngs[0]); - return latlng; - }, - - processDrawingClick: function (e) { - if (e.vertex && e.vertex.editor === this) return; - if (this._drawing === L.Editable.FORWARD) this.newPointForward(e.latlng); - else this.newPointBackward(e.latlng); - this.fireAndForward('editable:drawing:clicked', e); - }, - - onDrawingMouseMove: function (e) { - L.Editable.BaseEditor.prototype.onDrawingMouseMove.call(this, e); - if (this._drawing) { - this.tools.moveForwardLineGuide(e.latlng); - this.tools.moveBackwardLineGuide(e.latlng); - } - }, - - refresh: function () { - this.feature.redraw(); - this.onEditing(); - }, - - // 🍂namespace PathEditor - // 🍂method newShape(latlng?: L.LatLng) - // Add a new shape (Polyline, Polygon) in a multi, and setup up drawing tools to draw it; - // if optional `latlng` is given, start a path at this point. - newShape: function (latlng) { - var shape = this.addNewEmptyShape(); - if (!shape) return; - this.setDrawnLatLngs(shape[0] || shape); // Polygon or polyline - this.startDrawingForward(); - // 🍂namespace Editable - // 🍂section Shape events - // 🍂event editable:shape:new: ShapeEvent - // Fired when a new shape is created in a multi (Polygon or Polyline). - this.fireAndForward('editable:shape:new', {shape: shape}); - if (latlng) this.newPointForward(latlng); - }, - - deleteShape: function (shape, latlngs) { - var e = {shape: shape}; - L.Editable.makeCancellable(e); - // 🍂namespace Editable - // 🍂section Shape events - // 🍂event editable:shape:delete: CancelableShapeEvent - // Fired before a new shape is deleted in a multi (Polygon or Polyline). - this.fireAndForward('editable:shape:delete', e); - if (e._cancelled) return; - shape = this._deleteShape(shape, latlngs); - if (this.ensureNotFlat) this.ensureNotFlat(); // Polygon. - this.feature.setLatLngs(this.getLatLngs()); // Force bounds reset. - this.refresh(); - this.reset(); - // 🍂namespace Editable - // 🍂section Shape events - // 🍂event editable:shape:deleted: ShapeEvent - // Fired after a new shape is deleted in a multi (Polygon or Polyline). - this.fireAndForward('editable:shape:deleted', {shape: shape}); - return shape; - }, - - _deleteShape: function (shape, latlngs) { - latlngs = latlngs || this.getLatLngs(); - if (!latlngs.length) return; - var self = this, - inplaceDelete = function (latlngs, shape) { - // Called when deleting a flat latlngs - shape = latlngs.splice(0, Number.MAX_VALUE); - return shape; - }, - spliceDelete = function (latlngs, shape) { - // Called when removing a latlngs inside an array - latlngs.splice(latlngs.indexOf(shape), 1); - if (!latlngs.length) self._deleteShape(latlngs); - return shape; - }; - if (latlngs === shape) return inplaceDelete(latlngs, shape); - for (var i = 0; i < latlngs.length; i++) { - if (latlngs[i] === shape) return spliceDelete(latlngs, shape); - else if (latlngs[i].indexOf(shape) !== -1) return spliceDelete(latlngs[i], shape); - } - }, - - // 🍂namespace PathEditor - // 🍂method deleteShapeAt(latlng: L.LatLng): Array - // Remove a path shape at the given `latlng`. - deleteShapeAt: function (latlng) { - var shape = this.feature.shapeAt(latlng); - if (shape) return this.deleteShape(shape); - }, - - // 🍂method appendShape(shape: Array) - // Append a new shape to the Polygon or Polyline. - appendShape: function (shape) { - this.insertShape(shape); - }, - - // 🍂method prependShape(shape: Array) - // Prepend a new shape to the Polygon or Polyline. - prependShape: function (shape) { - this.insertShape(shape, 0); - }, - - // 🍂method insertShape(shape: Array, index: int) - // Insert a new shape to the Polygon or Polyline at given index (default is to append). - insertShape: function (shape, index) { - this.ensureMulti(); - shape = this.formatShape(shape); - if (typeof index === 'undefined') index = this.feature._latlngs.length; - this.feature._latlngs.splice(index, 0, shape); - this.feature.redraw(); - if (this._enabled) this.reset(); - }, - - extendBounds: function (e) { - this.feature._bounds.extend(e.vertex.latlng); - }, - - onDragStart: function (e) { - this.editLayer.clearLayers(); - L.Editable.BaseEditor.prototype.onDragStart.call(this, e); - }, - - onDragEnd: function (e) { - this.initVertexMarkers(); - L.Editable.BaseEditor.prototype.onDragEnd.call(this, e); - } - - }); - - // 🍂namespace Editable; 🍂class PolylineEditor; 🍂aka L.Editable.PolylineEditor - // 🍂inherits PathEditor - L.Editable.PolylineEditor = L.Editable.PathEditor.extend({ - - startDrawingBackward: function () { - this._drawing = L.Editable.BACKWARD; - this.startDrawing(); - }, - - // 🍂method continueBackward(latlngs?: Array) - // Set up drawing tools to continue the line backward. - continueBackward: function (latlngs) { - if (this.drawing()) return; - latlngs = latlngs || this.getDefaultLatLngs(); - this.setDrawnLatLngs(latlngs); - if (latlngs.length > 0) { - this.tools.attachBackwardLineGuide(); - this.tools.anchorBackwardLineGuide(latlngs[0]); - } - this.startDrawingBackward(); - }, - - // 🍂method continueForward(latlngs?: Array) - // Set up drawing tools to continue the line forward. - continueForward: function (latlngs) { - if (this.drawing()) return; - latlngs = latlngs || this.getDefaultLatLngs(); - this.setDrawnLatLngs(latlngs); - if (latlngs.length > 0) { - this.tools.attachForwardLineGuide(); - this.tools.anchorForwardLineGuide(latlngs[latlngs.length - 1]); - } - this.startDrawingForward(); - }, - - getDefaultLatLngs: function (latlngs) { - latlngs = latlngs || this.feature._latlngs; - if (!latlngs.length || latlngs[0] instanceof L.LatLng) return latlngs; - else return this.getDefaultLatLngs(latlngs[0]); - }, - - ensureMulti: function () { - if (this.feature._latlngs.length && isFlat(this.feature._latlngs)) { - this.feature._latlngs = [this.feature._latlngs]; - } - }, - - addNewEmptyShape: function () { - if (this.feature._latlngs.length) { - var shape = []; - this.appendShape(shape); - return shape; - } else { - return this.feature._latlngs; - } - }, - - formatShape: function (shape) { - if (isFlat(shape)) return shape; - else if (shape[0]) return this.formatShape(shape[0]); - }, - - // 🍂method splitShape(latlngs?: Array, index: int) - // Split the given `latlngs` shape at index `index` and integrate new shape in instance `latlngs`. - splitShape: function (shape, index) { - if (!index || index >= shape.length - 1) return; - this.ensureMulti(); - var shapeIndex = this.feature._latlngs.indexOf(shape); - if (shapeIndex === -1) return; - var first = shape.slice(0, index + 1), - second = shape.slice(index); - // We deal with reference, we don't want twice the same latlng around. - second[0] = L.latLng(second[0].lat, second[0].lng, second[0].alt); - this.feature._latlngs.splice(shapeIndex, 1, first, second); - this.refresh(); - this.reset(); - } - - }); - - // 🍂namespace Editable; 🍂class PolygonEditor; 🍂aka L.Editable.PolygonEditor - // 🍂inherits PathEditor - L.Editable.PolygonEditor = L.Editable.PathEditor.extend({ - - CLOSED: true, - MIN_VERTEX: 3, - - newPointForward: function (latlng) { - L.Editable.PathEditor.prototype.newPointForward.call(this, latlng); - if (!this.tools.backwardLineGuide._latlngs.length) this.tools.anchorBackwardLineGuide(latlng); - if (this._drawnLatLngs.length === 2) this.tools.attachBackwardLineGuide(); - }, - - addNewEmptyHole: function (latlng) { - this.ensureNotFlat(); - var latlngs = this.feature.shapeAt(latlng); - if (!latlngs) return; - var holes = []; - latlngs.push(holes); - return holes; - }, - - // 🍂method newHole(latlng?: L.LatLng, index: int) - // Set up drawing tools for creating a new hole on the Polygon. If the `latlng` param is given, a first point is created. - newHole: function (latlng) { - var holes = this.addNewEmptyHole(latlng); - if (!holes) return; - this.setDrawnLatLngs(holes); - this.startDrawingForward(); - if (latlng) this.newPointForward(latlng); - }, - - addNewEmptyShape: function () { - if (this.feature._latlngs.length && this.feature._latlngs[0].length) { - var shape = []; - this.appendShape(shape); - return shape; - } else { - return this.feature._latlngs; - } - }, - - ensureMulti: function () { - if (this.feature._latlngs.length && isFlat(this.feature._latlngs[0])) { - this.feature._latlngs = [this.feature._latlngs]; - } - }, - - ensureNotFlat: function () { - if (!this.feature._latlngs.length || isFlat(this.feature._latlngs)) this.feature._latlngs = [this.feature._latlngs]; - }, - - vertexCanBeDeleted: function (vertex) { - var parent = this.feature.parentShape(vertex.latlngs), - idx = L.Util.indexOf(parent, vertex.latlngs); - if (idx > 0) return true; // Holes can be totally deleted without removing the layer itself. - return L.Editable.PathEditor.prototype.vertexCanBeDeleted.call(this, vertex); - }, - - getDefaultLatLngs: function () { - if (!this.feature._latlngs.length) this.feature._latlngs.push([]); - return this.feature._latlngs[0]; - }, - - formatShape: function (shape) { - // [[1, 2], [3, 4]] => must be nested - // [] => must be nested - // [[]] => is already nested - if (isFlat(shape) && (!shape[0] || shape[0].length !== 0)) return [shape]; - else return shape; + // `map.editTools.startPolyline();` + + // 🍂method drawing(): boolean + // Return true if any drawing action is ongoing. + drawing: function () { + return this._drawingEditor?.drawing() + }, + + // 🍂method stopDrawing() + // When you need to stop any ongoing drawing, without needing to know which editor is active. + stopDrawing: function () { + this.unregisterForDrawing() + }, + + // 🍂method commitDrawing() + // When you need to commit any ongoing drawing, without needing to know which editor is active. + commitDrawing: function (e) { + if (!this._drawingEditor) return + this._drawingEditor.commitDrawing(e) + }, + + connectCreatedToMap: function (layer) { + return this.featuresLayer.addLayer(layer) + }, + + // 🍂method startPolyline(latlng: L.LatLng, options: hash): L.Polyline + // Start drawing a Polyline. If `latlng` is given, a first point will be added. In any case, continuing on user click. + // If `options` is given, it will be passed to the Polyline class constructor. + startPolyline: function (latlng, options) { + const line = this.createPolyline([], options) + line.enableEdit(this.map).newShape(latlng) + return line + }, + + // 🍂method startPolygon(latlng: L.LatLng, options: hash): L.Polygon + // Start drawing a Polygon. If `latlng` is given, a first point will be added. In any case, continuing on user click. + // If `options` is given, it will be passed to the Polygon class constructor. + startPolygon: function (latlng, options) { + const polygon = this.createPolygon([], options) + polygon.enableEdit(this.map).newShape(latlng) + return polygon + }, + + // 🍂method startMarker(latlng: L.LatLng, options: hash): L.Marker + // Start adding a Marker. If `latlng` is given, the Marker will be shown first at this point. + // In any case, it will follow the user mouse, and will have a final `latlng` on next click (or touch). + // If `options` is given, it will be passed to the Marker class constructor. + startMarker: function (latlng, options) { + latlng = latlng || this.map.getCenter().clone() + const marker = this.createMarker(latlng, options) + marker.enableEdit(this.map).startDrawing() + return marker + }, + + // 🍂method startCircleMarker(latlng: L.LatLng, options: hash): L.CircleMarker + // Start adding a CircleMarker. If `latlng` is given, the CircleMarker will be shown first at this point. + // In any case, it will follow the user mouse, and will have a final `latlng` on next click (or touch). + // If `options` is given, it will be passed to the CircleMarker class constructor. + startCircleMarker: function (latlng, options) { + latlng = latlng || this.map.getCenter().clone() + const marker = this.createCircleMarker(latlng, options) + marker.enableEdit(this.map).startDrawing() + return marker + }, + + // 🍂method startRectangle(latlng: L.LatLng, options: hash): L.Rectangle + // Start drawing a Rectangle. If `latlng` is given, the Rectangle anchor will be added. In any case, continuing on user drag. + // If `options` is given, it will be passed to the Rectangle class constructor. + startRectangle: function (latlng, options) { + const corner = latlng || L.latLng([0, 0]) + const bounds = new L.LatLngBounds(corner, corner) + const rectangle = this.createRectangle(bounds, options) + rectangle.enableEdit(this.map).startDrawing() + return rectangle + }, + + // 🍂method startCircle(latlng: L.LatLng, options: hash): L.Circle + // Start drawing a Circle. If `latlng` is given, the Circle anchor will be added. In any case, continuing on user drag. + // If `options` is given, it will be passed to the Circle class constructor. + startCircle: function (latlng, options) { + latlng = latlng || this.map.getCenter().clone() + const circle = this.createCircle(latlng, options) + circle.enableEdit(this.map).startDrawing() + return circle + }, + + startHole: (editor, latlng) => { + editor.newHole(latlng) + }, + + createLayer: function (klass, latlngs, options) { + options = L.Util.extend({ editOptions: { editTools: this } }, options) + const layer = new klass(latlngs, options) + // 🍂namespace Editable + // 🍂event editable:created: LayerEvent + // Fired when a new feature (Marker, Polyline…) is created. + this.fireAndForward('editable:created', { layer: layer }) + return layer + }, + + createPolyline: function (latlngs, options) { + return this.createLayer( + options?.polylineClass || this.options.polylineClass, + latlngs, + options + ) + }, + + createPolygon: function (latlngs, options) { + return this.createLayer( + options?.polygonClass || this.options.polygonClass, + latlngs, + options + ) + }, + + createMarker: function (latlng, options) { + return this.createLayer( + options?.markerClass || this.options.markerClass, + latlng, + options + ) + }, + + createCircleMarker: function (latlng, options) { + return this.createLayer( + options?.circleMarkerClass || this.options.circleMarkerClass, + latlng, + options + ) + }, + + createRectangle: function (bounds, options) { + return this.createLayer( + options?.rectangleClass || this.options.rectangleClass, + bounds, + options + ) + }, + + createCircle: function (latlng, options) { + return this.createLayer( + options?.circleClass || this.options.circleClass, + latlng, + options + ) + }, + }) + + L.extend(L.Editable, { + makeCancellable: (e) => { + e.cancel = () => { + e._cancelled = true + } + }, + }) + + // 🍂namespace Map; 🍂class Map + // Leaflet.Editable add options and events to the `L.Map` object. + // See `Editable` events for the list of events fired on the Map. + // 🍂example + // + // ```js + // var map = L.map('map', { + // editable: true, + // editOptions: { + // … + // } + // }); + // ``` + // 🍂section Editable Map Options + L.Map.mergeOptions({ + // 🍂namespace Map + // 🍂section Map Options + // 🍂option editToolsClass: class = L.Editable + // Class to be used as vertex, for path editing. + editToolsClass: L.Editable, + + // 🍂option editable: boolean = false + // Whether to create a L.Editable instance at map init. + editable: false, + + // 🍂option editOptions: hash = {} + // Options to pass to L.Editable when instantiating. + editOptions: {}, + }) + + L.Map.addInitHook(function () { + this.whenReady(function () { + if (this.options.editable) { + this.editTools = new this.options.editToolsClass(this, this.options.editOptions) + } + }) + }) + + L.Editable.VertexIcon = L.DivIcon.extend({ + options: { + iconSize: new L.Point(8, 8), + }, + }) + + L.Editable.TouchVertexIcon = L.Editable.VertexIcon.extend({ + options: { + iconSize: new L.Point(20, 20), + }, + }) + + // 🍂namespace Editable; 🍂class VertexMarker; Handler for dragging path vertices. + L.Editable.VertexMarker = L.Marker.extend({ + options: { + draggable: true, + className: 'leaflet-div-icon leaflet-vertex-icon', + }, + + // 🍂section Public methods + // The marker used to handle path vertex. You will usually interact with a `VertexMarker` + // instance when listening for events like `editable:vertex:ctrlclick`. + + initialize: function (latlng, latlngs, editor, options) { + // We don't use this._latlng, because on drag Leaflet replace it while + // we want to keep reference. + this.latlng = latlng + this.latlngs = latlngs + this.editor = editor + L.Marker.prototype.initialize.call(this, latlng, options) + this.options.icon = this.editor.tools.createVertexIcon({ + className: this.options.className, + }) + this.latlng.__vertex = this + this.connect() + this.setZIndexOffset(editor.tools._lastZIndex + 1) + }, + + connect: function () { + this.editor.editLayer.addLayer(this) + }, + + onAdd: function (map) { + L.Marker.prototype.onAdd.call(this, map) + this.on('drag', this.onDrag) + this.on('dragstart', this.onDragStart) + this.on('dragend', this.onDragEnd) + this.on('mouseup', this.onMouseup) + this.on('click', this.onClick) + this.on('contextmenu', this.onContextMenu) + this.on('mousedown touchstart', this.onMouseDown) + this.on('mouseover', this.onMouseOver) + this.on('mouseout', this.onMouseOut) + this.addMiddleMarkers() + }, + + onRemove: function (map) { + if (this.middleMarker) this.middleMarker.delete() + delete this.latlng.__vertex + this.off('drag', this.onDrag) + this.off('dragstart', this.onDragStart) + this.off('dragend', this.onDragEnd) + this.off('mouseup', this.onMouseup) + this.off('click', this.onClick) + this.off('contextmenu', this.onContextMenu) + this.off('mousedown touchstart', this.onMouseDown) + this.off('mouseover', this.onMouseOver) + this.off('mouseout', this.onMouseOut) + L.Marker.prototype.onRemove.call(this, map) + }, + + onDrag: function (e) { + e.vertex = this + this.editor.onVertexMarkerDrag(e) + const iconPos = L.DomUtil.getPosition(this._icon) + const latlng = this._map.layerPointToLatLng(iconPos) + this.latlng.update(latlng) + this._latlng = this.latlng // Push back to Leaflet our reference. + this.editor.refresh() + if (this.middleMarker) this.middleMarker.updateLatLng() + const next = this.getNext() + if (next?.middleMarker) next.middleMarker.updateLatLng() + }, + + onDragStart: function (e) { + e.vertex = this + this.editor.onVertexMarkerDragStart(e) + }, + + onDragEnd: function (e) { + e.vertex = this + this.editor.onVertexMarkerDragEnd(e) + }, + + onClick: function (e) { + e.vertex = this + this.editor.onVertexMarkerClick(e) + }, + + onMouseup: function (e) { + L.DomEvent.stop(e) + e.vertex = this + this.editor.map.fire('mouseup', e) + }, + + onContextMenu: function (e) { + e.vertex = this + this.editor.onVertexMarkerContextMenu(e) + }, + + onMouseDown: function (e) { + e.vertex = this + this.editor.onVertexMarkerMouseDown(e) + }, + + onMouseOver: function (e) { + e.vertex = this + this.editor.onVertexMarkerMouseOver(e) + }, + + onMouseOut: function (e) { + e.vertex = this + this.editor.onVertexMarkerMouseOut(e) + }, + + // 🍂method delete() + // Delete a vertex and the related LatLng. + delete: function () { + const next = this.getNext() // Compute before changing latlng + this.latlngs.splice(this.getIndex(), 1) + this.editor.editLayer.removeLayer(this) + this.editor.onVertexDeleted({ latlng: this.latlng, vertex: this }) + if (!this.latlngs.length) this.editor.deleteShape(this.latlngs) + if (next) next.resetMiddleMarker() + this.editor.refresh() + }, + + // 🍂method getIndex(): int + // Get the index of the current vertex among others of the same LatLngs group. + getIndex: function () { + return this.latlngs.indexOf(this.latlng) + }, + + // 🍂method getLastIndex(): int + // Get last vertex index of the LatLngs group of the current vertex. + getLastIndex: function () { + return this.latlngs.length - 1 + }, + + // 🍂method getPrevious(): VertexMarker + // Get the previous VertexMarker in the same LatLngs group. + getPrevious: function () { + if (this.latlngs.length < 2) return + const index = this.getIndex() + let previousIndex = index - 1 + if (index === 0 && this.editor.CLOSED) previousIndex = this.getLastIndex() + const previous = this.latlngs[previousIndex] + if (previous) return previous.__vertex + }, + + // 🍂method getNext(): VertexMarker + // Get the next VertexMarker in the same LatLngs group. + getNext: function () { + if (this.latlngs.length < 2) return + const index = this.getIndex() + let nextIndex = index + 1 + if (index === this.getLastIndex() && this.editor.CLOSED) nextIndex = 0 + const next = this.latlngs[nextIndex] + if (next) return next.__vertex + }, + + addMiddleMarker: function (previous) { + if (!this.editor.hasMiddleMarkers()) return + previous = previous || this.getPrevious() + if (previous && !this.middleMarker) + this.middleMarker = this.editor.addMiddleMarker( + previous, + this, + this.latlngs, + this.editor + ) + }, + + addMiddleMarkers: function () { + if (!this.editor.hasMiddleMarkers()) return + const previous = this.getPrevious() + if (previous) this.addMiddleMarker(previous) + const next = this.getNext() + if (next) next.resetMiddleMarker() + }, + + resetMiddleMarker: function () { + if (this.middleMarker) this.middleMarker.delete() + this.addMiddleMarker() + }, + + // 🍂method split() + // Split the vertex LatLngs group at its index, if possible. + split: function () { + if (!this.editor.splitShape) return // Only for PolylineEditor + this.editor.splitShape(this.latlngs, this.getIndex()) + }, + + // 🍂method continue() + // Continue the vertex LatLngs from this vertex. Only active for first and last vertices of a Polyline. + continue: function () { + if (!this.editor.continueBackward) return // Only for PolylineEditor + const index = this.getIndex() + if (index === 0) this.editor.continueBackward(this.latlngs) + else if (index === this.getLastIndex()) this.editor.continueForward(this.latlngs) + }, + }) + + L.Editable.mergeOptions({ + // 🍂namespace Editable + // 🍂option vertexMarkerClass: class = VertexMarker + // Class to be used as vertex, for path editing. + vertexMarkerClass: L.Editable.VertexMarker, + }) + + L.Editable.MiddleMarker = L.Marker.extend({ + options: { + opacity: 0.5, + className: 'leaflet-div-icon leaflet-middle-icon', + draggable: true, + }, + + initialize: function (left, right, latlngs, editor, options) { + this.left = left + this.right = right + this.editor = editor + this.latlngs = latlngs + L.Marker.prototype.initialize.call(this, this.computeLatLng(), options) + this._opacity = this.options.opacity + this.options.icon = this.editor.tools.createVertexIcon({ + className: this.options.className, + }) + this.editor.editLayer.addLayer(this) + this.setVisibility() + }, + + setVisibility: function () { + const leftPoint = this._map.latLngToContainerPoint(this.left.latlng) + const rightPoint = this._map.latLngToContainerPoint(this.right.latlng) + const size = L.point(this.options.icon.options.iconSize) + if (leftPoint.distanceTo(rightPoint) < size.x * 3) this.hide() + else this.show() + }, + + show: function () { + this.setOpacity(this._opacity) + }, + + hide: function () { + this.setOpacity(0) + }, + + updateLatLng: function () { + this.setLatLng(this.computeLatLng()) + this.setVisibility() + }, + + computeLatLng: function () { + const leftPoint = this.editor.map.latLngToContainerPoint(this.left.latlng) + const rightPoint = this.editor.map.latLngToContainerPoint(this.right.latlng) + const y = (leftPoint.y + rightPoint.y) / 2 + const x = (leftPoint.x + rightPoint.x) / 2 + return this.editor.map.containerPointToLatLng([x, y]) + }, + + onAdd: function (map) { + L.Marker.prototype.onAdd.call(this, map) + L.DomEvent.on(this._icon, 'mousedown touchstart', this.onMouseDown, this) + map.on('zoomend', this.setVisibility, this) + }, + + onRemove: function (map) { + delete this.right.middleMarker + L.DomEvent.off(this._icon, 'mousedown touchstart', this.onMouseDown, this) + map.off('zoomend', this.setVisibility, this) + L.Marker.prototype.onRemove.call(this, map) + }, + + onMouseDown: function (e) { + const iconPos = L.DomUtil.getPosition(this._icon) + const latlng = this.editor.map.layerPointToLatLng(iconPos) + e = { + originalEvent: e, + latlng: latlng, + } + if (this.options.opacity === 0) return + L.Editable.makeCancellable(e) + this.editor.onMiddleMarkerMouseDown(e) + if (e._cancelled) return + this.latlngs.splice(this.index(), 0, e.latlng) + this.editor.refresh() + const icon = this._icon + const marker = this.editor.addVertexMarker(e.latlng, this.latlngs) + this.editor.onNewVertex(marker) + /* Hack to workaround browser not firing touchend when element is no more on DOM */ + const parent = marker._icon.parentNode + parent.removeChild(marker._icon) + marker._icon = icon + parent.appendChild(marker._icon) + marker._initIcon() + marker._initInteraction() + marker.setOpacity(1) + /* End hack */ + // Transfer ongoing dragging to real marker + L.Draggable._dragging = false + marker.dragging._draggable._onDown(e.originalEvent) + this.delete() + }, + + delete: function () { + this.editor.editLayer.removeLayer(this) + }, + + index: function () { + return this.latlngs.indexOf(this.right.latlng) + }, + }) + + L.Editable.mergeOptions({ + // 🍂namespace Editable + // 🍂option middleMarkerClass: class = VertexMarker + // Class to be used as middle vertex, pulled by the user to create a new point in the middle of a path. + middleMarkerClass: L.Editable.MiddleMarker, + }) + + // 🍂namespace Editable; 🍂class BaseEditor; 🍂aka L.Editable.BaseEditor + // When editing a feature (Marker, Polyline…), an editor is attached to it. This + // editor basically knows how to handle the edition. + L.Editable.BaseEditor = L.Handler.extend({ + initialize: function (map, feature, options) { + L.setOptions(this, options) + this.map = map + this.feature = feature + this.feature.editor = this + this.editLayer = new L.LayerGroup() + this.tools = this.options.editTools || map.editTools + }, + + // 🍂method enable(): this + // Set up the drawing tools for the feature to be editable. + addHooks: function () { + if (this.isConnected()) this.onFeatureAdd() + else this.feature.once('add', this.onFeatureAdd, this) + this.onEnable() + this.feature.on(this._getEvents(), this) + }, + + // 🍂method disable(): this + // Remove the drawing tools for the feature. + removeHooks: function () { + this.feature.off(this._getEvents(), this) + if (this.feature.dragging) this.feature.dragging.disable() + this.editLayer.clearLayers() + this.tools.editLayer.removeLayer(this.editLayer) + this.onDisable() + if (this._drawing) this.cancelDrawing() + }, + + // 🍂method drawing(): boolean + // Return true if any drawing action is ongoing with this editor. + drawing: function () { + return !!this._drawing + }, + + reset: () => {}, + + onFeatureAdd: function () { + this.tools.editLayer.addLayer(this.editLayer) + if (this.feature.dragging) this.feature.dragging.enable() + }, + + hasMiddleMarkers: function () { + return !this.options.skipMiddleMarkers && !this.tools.options.skipMiddleMarkers + }, + + fireAndForward: function (type, e) { + e = e || {} + e.layer = this.feature + this.feature.fire(type, e) + this.tools.fireAndForward(type, e) + }, + + onEnable: function () { + // 🍂namespace Editable + // 🍂event editable:enable: Event + // Fired when an existing feature is ready to be edited. + this.fireAndForward('editable:enable') + }, + + onDisable: function () { + // 🍂namespace Editable + // 🍂event editable:disable: Event + // Fired when an existing feature is not ready anymore to be edited. + this.fireAndForward('editable:disable') + }, + + onEditing: function () { + // 🍂namespace Editable + // 🍂event editable:editing: Event + // Fired as soon as any change is made to the feature geometry. + this.fireAndForward('editable:editing') + }, + + onEdited: function () { + // 🍂namespace Editable + // 🍂event editable:edited: Event + // Fired after any change is made to the feature geometry. + this.fireAndForward('editable:edited') + }, + + onStartDrawing: function () { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:start: Event + // Fired when a feature is to be drawn. + this.fireAndForward('editable:drawing:start') + }, + + onEndDrawing: function () { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:end: Event + // Fired when a feature is not drawn anymore. + this.fireAndForward('editable:drawing:end') + }, + + onCancelDrawing: function () { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:cancel: Event + // Fired when user cancel drawing while a feature is being drawn. + this.fireAndForward('editable:drawing:cancel') + }, + + onCommitDrawing: function (e) { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:commit: Event + // Fired when user finish drawing a feature. + this.fireAndForward('editable:drawing:commit', e) + this.onEdited() + }, + + onDrawingMouseDown: function (e) { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:mousedown: Event + // Fired when user `mousedown` while drawing. + this.fireAndForward('editable:drawing:mousedown', e) + }, + + onDrawingMouseUp: function (e) { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:mouseup: Event + // Fired when user `mouseup` while drawing. + this.fireAndForward('editable:drawing:mouseup', e) + }, + + startDrawing: function () { + if (!this._drawing) this._drawing = L.Editable.FORWARD + this.tools.registerForDrawing(this) + this.onStartDrawing() + }, + + commitDrawing: function (e) { + this.onCommitDrawing(e) + this.endDrawing() + }, + + cancelDrawing: function () { + // If called during a vertex drag, the vertex will be removed before + // the mouseup fires on it. This is a workaround. Maybe better fix is + // To have L.Draggable reset it's status on disable (Leaflet side). + L.Draggable._dragging = false + this.onCancelDrawing() + this.endDrawing() + }, + + endDrawing: function () { + this._drawing = false + this.tools.unregisterForDrawing(this) + this.onEndDrawing() + }, + + onDrawingClick: function (e) { + if (!this.drawing()) return + L.Editable.makeCancellable(e) + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:click: CancelableEvent + // Fired when user `click` while drawing, before any internal action is being processed. + this.fireAndForward('editable:drawing:click', e) + if (e._cancelled) return + if (!this.isConnected()) this.connect(e) + this.processDrawingClick(e) + }, + + isConnected: function () { + return this.map.hasLayer(this.feature) + }, + + connect: function () { + this.tools.connectCreatedToMap(this.feature) + this.tools.editLayer.addLayer(this.editLayer) + }, + + onMove: function (e) { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:move: Event + // Fired when `move` mouse while drawing, while dragging a marker, and while dragging a vertex. + this.fireAndForward('editable:drawing:move', e) + }, + + onDrawingMouseMove: function (e) { + this.onMove(e) + }, + + _getEvents: function () { + return { + dragstart: this.onDragStart, + drag: this.onDrag, + dragend: this.onDragEnd, + remove: this.disable, + } + }, + + onDragStart: function (e) { + this.onEditing() + // 🍂namespace Editable + // 🍂event editable:dragstart: Event + // Fired before a path feature is dragged. + this.fireAndForward('editable:dragstart', e) + }, + + onDrag: function (e) { + this.onMove(e) + // 🍂namespace Editable + // 🍂event editable:drag: Event + // Fired when a path feature is being dragged. + this.fireAndForward('editable:drag', e) + }, + + onDragEnd: function (e) { + // 🍂namespace Editable + // 🍂event editable:dragend: Event + // Fired after a path feature has been dragged. + this.fireAndForward('editable:dragend', e) + this.onEdited() + }, + }) + + // 🍂namespace Editable; 🍂class MarkerEditor; 🍂aka L.Editable.MarkerEditor + // 🍂inherits BaseEditor + // Editor for Marker. + L.Editable.MarkerEditor = L.Editable.BaseEditor.extend({ + onDrawingMouseMove: function (e) { + L.Editable.BaseEditor.prototype.onDrawingMouseMove.call(this, e) + if (this._drawing) this.feature.setLatLng(e.latlng) + }, + + processDrawingClick: function (e) { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:clicked: Event + // Fired when user `click` while drawing, after all internal actions. + this.fireAndForward('editable:drawing:clicked', e) + this.commitDrawing(e) + }, + + connect: function (e) { + // On touch, the latlng has not been updated because there is + // no mousemove. + if (e) this.feature._latlng = e.latlng + L.Editable.BaseEditor.prototype.connect.call(this, e) + }, + }) + + // 🍂namespace Editable; 🍂class CircleMarkerEditor; 🍂aka L.Editable.CircleMarkerEditor + // 🍂inherits BaseEditor + // Editor for CircleMarker. + L.Editable.CircleMarkerEditor = L.Editable.BaseEditor.extend({ + onDrawingMouseMove: function (e) { + L.Editable.BaseEditor.prototype.onDrawingMouseMove.call(this, e) + if (this._drawing) this.feature.setLatLng(e.latlng) + }, + + processDrawingClick: function (e) { + // 🍂namespace Editable + // 🍂section Drawing events + // 🍂event editable:drawing:clicked: Event + // Fired when user `click` while drawing, after all internal actions. + this.fireAndForward('editable:drawing:clicked', e) + this.commitDrawing(e) + }, + + connect: function (e) { + // On touch, the latlng has not been updated because there is + // no mousemove. + if (e) this.feature._latlng = e.latlng + L.Editable.BaseEditor.prototype.connect.call(this, e) + }, + }) + + // 🍂namespace Editable; 🍂class PathEditor; 🍂aka L.Editable.PathEditor + // 🍂inherits BaseEditor + // Base class for all path editors. + L.Editable.PathEditor = L.Editable.BaseEditor.extend({ + CLOSED: false, + MIN_VERTEX: 2, + + addHooks: function () { + L.Editable.BaseEditor.prototype.addHooks.call(this) + if (this.feature) { + this.initVertexMarkers() + this.map.on('moveend', this.onMoveEnd, this) + } + return this + }, + + removeHooks: function () { + L.Editable.BaseEditor.prototype.removeHooks.call(this) + if (this.feature) { + this.map.off('moveend', this.onMoveEnd, this) + } + }, + + onMoveEnd: function () { + this.initVertexMarkers() + }, + + initVertexMarkers: function (latlngs) { + if (!this.enabled()) return + latlngs = latlngs || this.getLatLngs() + if (isFlat(latlngs)) { + this.addVertexMarkers(latlngs) + } else { + for (const member of latlngs) { + this.initVertexMarkers(member) } - - }); - - // 🍂namespace Editable; 🍂class RectangleEditor; 🍂aka L.Editable.RectangleEditor - // 🍂inherits PathEditor - L.Editable.RectangleEditor = L.Editable.PathEditor.extend({ - - CLOSED: true, - MIN_VERTEX: 4, - - options: { - skipMiddleMarkers: true - }, - - extendBounds: function (e) { - var index = e.vertex.getIndex(), - next = e.vertex.getNext(), - previous = e.vertex.getPrevious(), - oppositeIndex = (index + 2) % 4, - opposite = e.vertex.latlngs[oppositeIndex], - bounds = new L.LatLngBounds(e.latlng, opposite); - // Update latlngs by hand to preserve order. - previous.latlng.update([e.latlng.lat, opposite.lng]); - next.latlng.update([opposite.lat, e.latlng.lng]); - this.updateBounds(bounds); - this.refreshVertexMarkers(); - }, - - onDrawingMouseDown: function (e) { - L.Editable.PathEditor.prototype.onDrawingMouseDown.call(this, e); - this.connect(); - var latlngs = this.getDefaultLatLngs(); - // L.Polygon._convertLatLngs removes last latlng if it equals first point, - // which is the case here as all latlngs are [0, 0] - if (latlngs.length === 3) latlngs.push(e.latlng); - var bounds = new L.LatLngBounds(e.latlng, e.latlng); - this.updateBounds(bounds); - this.updateLatLngs(bounds); - this.refresh(); - this.reset(); - // Stop dragging map. - // L.Draggable has two workflows: - // - mousedown => mousemove => mouseup - // - touchstart => touchmove => touchend - // Problem: L.Map.Tap does not allow us to listen to touchstart, so we only - // can deal with mousedown, but then when in a touch device, we are dealing with - // simulated events (actually simulated by L.Map.Tap), which are no more taken - // into account by L.Draggable. - // Ref.: https://github.com/Leaflet/Leaflet.Editable/issues/103 - e.originalEvent._simulated = false; - this.map.dragging._draggable._onUp(e.originalEvent); - // Now transfer ongoing drag action to the bottom right corner. - // Should we refine which corner will handle the drag according to - // drag direction? - latlngs[3].__vertex.dragging._draggable._onDown(e.originalEvent); - }, - - onDrawingMouseUp: function (e) { - this.commitDrawing(e); - e.originalEvent._simulated = false; - L.Editable.PathEditor.prototype.onDrawingMouseUp.call(this, e); - }, - - onDrawingMouseMove: function (e) { - e.originalEvent._simulated = false; - L.Editable.PathEditor.prototype.onDrawingMouseMove.call(this, e); - }, - - - getDefaultLatLngs: function (latlngs) { - return latlngs || this.feature._latlngs[0]; - }, - - updateBounds: function (bounds) { - this.feature._bounds = bounds; - }, - - updateLatLngs: function (bounds) { - var latlngs = this.getDefaultLatLngs(), - newLatlngs = this.feature._boundsToLatLngs(bounds); - // Keep references. - for (var i = 0; i < latlngs.length; i++) { - latlngs[i].update(newLatlngs[i]); - } - } - - }); - - // 🍂namespace Editable; 🍂class CircleEditor; 🍂aka L.Editable.CircleEditor - // 🍂inherits PathEditor - L.Editable.CircleEditor = L.Editable.PathEditor.extend({ - - MIN_VERTEX: 2, - - options: { - skipMiddleMarkers: true - }, - - initialize: function (map, feature, options) { - L.Editable.PathEditor.prototype.initialize.call(this, map, feature, options); - this._resizeLatLng = this.computeResizeLatLng(); - }, - - computeResizeLatLng: function () { - // While circle is not added to the map, _radius is not set. - var delta = (this.feature._radius || this.feature._mRadius) * Math.cos(Math.PI / 4), - point = this.map.project(this.feature._latlng); - return this.map.unproject([point.x + delta, point.y - delta]); - }, - - updateResizeLatLng: function () { - this._resizeLatLng.update(this.computeResizeLatLng()); - this._resizeLatLng.__vertex.update(); - }, - - getLatLngs: function () { - return [this.feature._latlng, this._resizeLatLng]; - }, - - getDefaultLatLngs: function () { - return this.getLatLngs(); - }, - - onVertexMarkerDrag: function (e) { - if (e.vertex.getIndex() === 1) this.resize(e); - else this.updateResizeLatLng(e); - L.Editable.PathEditor.prototype.onVertexMarkerDrag.call(this, e); - }, - - resize: function (e) { - var radius = this.feature._latlng.distanceTo(e.latlng); - this.feature.setRadius(radius); - }, - - onDrawingMouseDown: function (e) { - L.Editable.PathEditor.prototype.onDrawingMouseDown.call(this, e); - this._resizeLatLng.update(e.latlng); - this.feature._latlng.update(e.latlng); - this.connect(); - // Stop dragging map. - e.originalEvent._simulated = false; - this.map.dragging._draggable._onUp(e.originalEvent); - // Now transfer ongoing drag action to the radius handler. - this._resizeLatLng.__vertex.dragging._draggable._onDown(e.originalEvent); - }, - - onDrawingMouseUp: function (e) { - this.commitDrawing(e); - e.originalEvent._simulated = false; - L.Editable.PathEditor.prototype.onDrawingMouseUp.call(this, e); - }, - - onDrawingMouseMove: function (e) { - e.originalEvent._simulated = false; - L.Editable.PathEditor.prototype.onDrawingMouseMove.call(this, e); - }, - - onDrag: function (e) { - L.Editable.PathEditor.prototype.onDrag.call(this, e); - this.feature.dragging.updateLatLng(this._resizeLatLng); + } + }, + + getLatLngs: function () { + return this.feature.getLatLngs() + }, + + // 🍂method reset() + // Rebuild edit elements (Vertex, MiddleMarker, etc.). + reset: function () { + this.editLayer.clearLayers() + this.initVertexMarkers() + }, + + addVertexMarker: function (latlng, latlngs) { + if (latlng.__vertex) { + latlng.__vertex.connect() + return latlng.__vertex + } + return new this.tools.options.vertexMarkerClass(latlng, latlngs, this) + }, + + onNewVertex: function (vertex) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:new: VertexEvent + // Fired when a new vertex is created. + this.fireAndForward('editable:vertex:new', { + latlng: vertex.latlng, + vertex: vertex, + }) + }, + + addVertexMarkers: function (latlngs) { + const bounds = this.map.getBounds() + for (const latlng of latlngs) { + if (!bounds.contains(latlng)) continue + this.addVertexMarker(latlng, latlngs) + } + }, + + refreshVertexMarkers: function (latlngs) { + latlngs = latlngs || this.getDefaultLatLngs() + for (const latlng of latlngs) { + latlng.__vertex.update() + } + }, + + addMiddleMarker: function (left, right, latlngs) { + return new this.tools.options.middleMarkerClass(left, right, latlngs, this) + }, + + onVertexMarkerClick: function (e) { + L.Editable.makeCancellable(e) + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:click: CancelableVertexEvent + // Fired when a `click` is issued on a vertex, before any internal action is being processed. + this.fireAndForward('editable:vertex:click', e) + if (e._cancelled) return + if (this.tools.drawing() && this.tools._drawingEditor !== this) return + const index = e.vertex.getIndex() + let commit + if (e.originalEvent.ctrlKey) { + this.onVertexMarkerCtrlClick(e) + } else if (e.originalEvent.altKey) { + this.onVertexMarkerAltClick(e) + } else if (e.originalEvent.shiftKey) { + this.onVertexMarkerShiftClick(e) + } else if (e.originalEvent.metaKey) { + this.onVertexMarkerMetaKeyClick(e) + } else if ( + index === e.vertex.getLastIndex() && + this._drawing === L.Editable.FORWARD + ) { + if (index >= this.MIN_VERTEX - 1) commit = true + } else if ( + index === 0 && + this._drawing === L.Editable.BACKWARD && + this._drawnLatLngs.length >= this.MIN_VERTEX + ) { + commit = true + } else if ( + index === 0 && + this._drawing === L.Editable.FORWARD && + this._drawnLatLngs.length >= this.MIN_VERTEX && + this.CLOSED + ) { + commit = true // Allow to close on first point also for polygons + } else { + this.onVertexRawMarkerClick(e) + } + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:clicked: VertexEvent + // Fired when a `click` is issued on a vertex, after all internal actions. + this.fireAndForward('editable:vertex:clicked', e) + if (commit) this.commitDrawing(e) + }, + + onVertexRawMarkerClick: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:rawclick: CancelableVertexEvent + // Fired when a `click` is issued on a vertex without any special key and without being in drawing mode. + this.fireAndForward('editable:vertex:rawclick', e) + if (e._cancelled) return + if (!this.vertexCanBeDeleted(e.vertex)) return + e.vertex.delete() + }, + + vertexCanBeDeleted: function (vertex) { + return vertex.latlngs.length > this.MIN_VERTEX + }, + + onVertexDeleted: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:deleted: VertexEvent + // Fired after a vertex has been deleted by user. + this.fireAndForward('editable:vertex:deleted', e) + }, + + onVertexMarkerCtrlClick: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:ctrlclick: VertexEvent + // Fired when a `click` with `ctrlKey` is issued on a vertex. + this.fireAndForward('editable:vertex:ctrlclick', e) + }, + + onVertexMarkerShiftClick: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:shiftclick: VertexEvent + // Fired when a `click` with `shiftKey` is issued on a vertex. + this.fireAndForward('editable:vertex:shiftclick', e) + }, + + onVertexMarkerMetaKeyClick: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:metakeyclick: VertexEvent + // Fired when a `click` with `metaKey` is issued on a vertex. + this.fireAndForward('editable:vertex:metakeyclick', e) + }, + + onVertexMarkerAltClick: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:altclick: VertexEvent + // Fired when a `click` with `altKey` is issued on a vertex. + this.fireAndForward('editable:vertex:altclick', e) + }, + + onVertexMarkerContextMenu: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:contextmenu: VertexEvent + // Fired when a `contextmenu` is issued on a vertex. + this.fireAndForward('editable:vertex:contextmenu', e) + }, + + onVertexMarkerMouseDown: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:mousedown: VertexEvent + // Fired when user `mousedown` a vertex. + this.fireAndForward('editable:vertex:mousedown', e) + }, + + onVertexMarkerMouseOver: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:mouseover: VertexEvent + // Fired when a user's mouse enters the vertex + this.fireAndForward('editable:vertex:mouseover', e) + }, + + onVertexMarkerMouseOut: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:mouseout: VertexEvent + // Fired when a user's mouse leaves the vertex + this.fireAndForward('editable:vertex:mouseout', e) + }, + + onMiddleMarkerMouseDown: function (e) { + // 🍂namespace Editable + // 🍂section MiddleMarker events + // 🍂event editable:middlemarker:mousedown: VertexEvent + // Fired when user `mousedown` a middle marker. + this.fireAndForward('editable:middlemarker:mousedown', e) + }, + + onVertexMarkerDrag: function (e) { + this.onMove(e) + if (this.feature._bounds) this.extendBounds(e) + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:drag: VertexEvent + // Fired when a vertex is dragged by user. + this.fireAndForward('editable:vertex:drag', e) + }, + + onVertexMarkerDragStart: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:dragstart: VertexEvent + // Fired before a vertex is dragged by user. + this.fireAndForward('editable:vertex:dragstart', e) + }, + + onVertexMarkerDragEnd: function (e) { + // 🍂namespace Editable + // 🍂section Vertex events + // 🍂event editable:vertex:dragend: VertexEvent + // Fired after a vertex is dragged by user. + this.fireAndForward('editable:vertex:dragend', e) + this.onEdited() + }, + + setDrawnLatLngs: function (latlngs) { + this._drawnLatLngs = latlngs || this.getDefaultLatLngs() + }, + + startDrawing: function () { + if (!this._drawnLatLngs) this.setDrawnLatLngs() + L.Editable.BaseEditor.prototype.startDrawing.call(this) + }, + + startDrawingForward: function () { + this.startDrawing() + }, + + endDrawing: function () { + this.tools.detachForwardLineGuide() + this.tools.detachBackwardLineGuide() + if (this._drawnLatLngs && this._drawnLatLngs.length < this.MIN_VERTEX) + this.deleteShape(this._drawnLatLngs) + L.Editable.BaseEditor.prototype.endDrawing.call(this) + delete this._drawnLatLngs + }, + + addLatLng: function (latlng) { + if (this._drawing === L.Editable.FORWARD) this._drawnLatLngs.push(latlng) + else this._drawnLatLngs.unshift(latlng) + this.feature._bounds.extend(latlng) + const vertex = this.addVertexMarker(latlng, this._drawnLatLngs) + this.onNewVertex(vertex) + this.refresh() + }, + + newPointForward: function (latlng) { + this.addLatLng(latlng) + this.tools.attachForwardLineGuide() + this.tools.anchorForwardLineGuide(latlng) + }, + + newPointBackward: function (latlng) { + this.addLatLng(latlng) + this.tools.anchorBackwardLineGuide(latlng) + }, + + // 🍂namespace PathEditor + // 🍂method push() + // Programmatically add a point while drawing. + push: function (latlng) { + if (!latlng) + return console.error( + 'L.Editable.PathEditor.push expect a valid latlng as parameter' + ) + if (this._drawing === L.Editable.FORWARD) this.newPointForward(latlng) + else this.newPointBackward(latlng) + }, + + removeLatLng: function (latlng) { + latlng.__vertex.delete() + this.refresh() + }, + + // 🍂method pop(): L.LatLng or null + // Programmatically remove last point (if any) while drawing. + pop: function () { + if (this._drawnLatLngs.length <= 1) return + let latlng + if (this._drawing === L.Editable.FORWARD) { + latlng = this._drawnLatLngs[this._drawnLatLngs.length - 1] + } else { + latlng = this._drawnLatLngs[0] + } + this.removeLatLng(latlng) + if (this._drawing === L.Editable.FORWARD) { + this.tools.anchorForwardLineGuide( + this._drawnLatLngs[this._drawnLatLngs.length - 1] + ) + } else { + this.tools.anchorForwardLineGuide(this._drawnLatLngs[0]) + } + return latlng + }, + + processDrawingClick: function (e) { + if (e.vertex && e.vertex.editor === this) return + if (this._drawing === L.Editable.FORWARD) this.newPointForward(e.latlng) + else this.newPointBackward(e.latlng) + this.fireAndForward('editable:drawing:clicked', e) + }, + + onDrawingMouseMove: function (e) { + L.Editable.BaseEditor.prototype.onDrawingMouseMove.call(this, e) + if (this._drawing) { + this.tools.moveForwardLineGuide(e.latlng) + this.tools.moveBackwardLineGuide(e.latlng) + } + }, + + refresh: function () { + this.feature.redraw() + this.onEditing() + }, + + // 🍂namespace PathEditor + // 🍂method newShape(latlng?: L.LatLng) + // Add a new shape (Polyline, Polygon) in a multi, and setup up drawing tools to draw it; + // if optional `latlng` is given, start a path at this point. + newShape: function (latlng) { + const shape = this.addNewEmptyShape() + if (!shape) return + this.setDrawnLatLngs(shape[0] || shape) // Polygon or polyline + this.startDrawingForward() + // 🍂namespace Editable + // 🍂section Shape events + // 🍂event editable:shape:new: ShapeEvent + // Fired when a new shape is created in a multi (Polygon or Polyline). + this.fireAndForward('editable:shape:new', { shape: shape }) + if (latlng) this.newPointForward(latlng) + }, + + deleteShape: function (shape, latlngs) { + const e = { shape: shape } + L.Editable.makeCancellable(e) + // 🍂namespace Editable + // 🍂section Shape events + // 🍂event editable:shape:delete: CancelableShapeEvent + // Fired before a new shape is deleted in a multi (Polygon or Polyline). + this.fireAndForward('editable:shape:delete', e) + if (e._cancelled) return + shape = this._deleteShape(shape, latlngs) + if (this.ensureNotFlat) this.ensureNotFlat() // Polygon. + this.feature.setLatLngs(this.getLatLngs()) // Force bounds reset. + this.refresh() + this.reset() + // 🍂namespace Editable + // 🍂section Shape events + // 🍂event editable:shape:deleted: ShapeEvent + // Fired after a new shape is deleted in a multi (Polygon or Polyline). + this.fireAndForward('editable:shape:deleted', { shape: shape }) + this.onEdited() + return shape + }, + + _deleteShape: function (shape, latlngs) { + latlngs = latlngs || this.getLatLngs() + if (!latlngs.length) return + const inplaceDelete = (latlngs, shape) => { + // Called when deleting a flat latlngs + return latlngs.splice(0, Number.MAX_VALUE) + } + const spliceDelete = (latlngs, shape) => { + // Called when removing a latlngs inside an array + latlngs.splice(latlngs.indexOf(shape), 1) + if (!latlngs.length) this._deleteShape(latlngs) + return shape + } + if (latlngs === shape) return inplaceDelete(latlngs, shape) + for (const member of latlngs) { + if (member === shape) return spliceDelete(latlngs, shape) + if (member.indexOf(shape) !== -1) return spliceDelete(member, shape) + } + }, + + // 🍂namespace PathEditor + // 🍂method deleteShapeAt(latlng: L.LatLng): Array + // Remove a path shape at the given `latlng`. + deleteShapeAt: function (latlng) { + const shape = this.feature.shapeAt(latlng) + if (shape) return this.deleteShape(shape) + }, + + // 🍂method appendShape(shape: Array) + // Append a new shape to the Polygon or Polyline. + appendShape: function (shape) { + this.insertShape(shape) + }, + + // 🍂method prependShape(shape: Array) + // Prepend a new shape to the Polygon or Polyline. + prependShape: function (shape) { + this.insertShape(shape, 0) + }, + + // 🍂method insertShape(shape: Array, index: int) + // Insert a new shape to the Polygon or Polyline at given index (default is to append). + insertShape: function (shape, index) { + this.ensureMulti() + shape = this.formatShape(shape) + if (index === undefined) index = this.feature._latlngs.length + this.feature._latlngs.splice(index, 0, shape) + this.feature.redraw() + if (this._enabled) this.reset() + }, + + extendBounds: function (e) { + this.feature._bounds.extend(e.vertex.latlng) + }, + + onDragStart: function (e) { + this.editLayer.clearLayers() + L.Editable.BaseEditor.prototype.onDragStart.call(this, e) + }, + + onDragEnd: function (e) { + this.initVertexMarkers() + L.Editable.BaseEditor.prototype.onDragEnd.call(this, e) + }, + }) + + // 🍂namespace Editable; 🍂class PolylineEditor; 🍂aka L.Editable.PolylineEditor + // 🍂inherits PathEditor + L.Editable.PolylineEditor = L.Editable.PathEditor.extend({ + startDrawingBackward: function () { + this._drawing = L.Editable.BACKWARD + this.startDrawing() + }, + + // 🍂method continueBackward(latlngs?: Array) + // Set up drawing tools to continue the line backward. + continueBackward: function (latlngs) { + if (this.drawing()) return + latlngs = latlngs || this.getDefaultLatLngs() + this.setDrawnLatLngs(latlngs) + if (latlngs.length > 0) { + this.tools.attachBackwardLineGuide() + this.tools.anchorBackwardLineGuide(latlngs[0]) + } + this.startDrawingBackward() + }, + + // 🍂method continueForward(latlngs?: Array) + // Set up drawing tools to continue the line forward. + continueForward: function (latlngs) { + if (this.drawing()) return + latlngs = latlngs || this.getDefaultLatLngs() + this.setDrawnLatLngs(latlngs) + if (latlngs.length > 0) { + this.tools.attachForwardLineGuide() + this.tools.anchorForwardLineGuide(latlngs[latlngs.length - 1]) + } + this.startDrawingForward() + }, + + getDefaultLatLngs: function (latlngs) { + latlngs = latlngs || this.feature._latlngs + if (!latlngs.length || latlngs[0] instanceof L.LatLng) return latlngs + return this.getDefaultLatLngs(latlngs[0]) + }, + + ensureMulti: function () { + if (this.feature._latlngs.length && isFlat(this.feature._latlngs)) { + this.feature._latlngs = [this.feature._latlngs] + } + }, + + addNewEmptyShape: function () { + if (this.feature._latlngs.length) { + const shape = [] + this.appendShape(shape) + return shape + } + return this.feature._latlngs + }, + + formatShape: function (shape) { + if (isFlat(shape)) return shape + if (shape[0]) return this.formatShape(shape[0]) + }, + + // 🍂method splitShape(latlngs?: Array, index: int) + // Split the given `latlngs` shape at index `index` and integrate new shape in instance `latlngs`. + splitShape: function (shape, index) { + if (!index || index >= shape.length - 1) return + this.ensureMulti() + const shapeIndex = this.feature._latlngs.indexOf(shape) + if (shapeIndex === -1) return + const first = shape.slice(0, index + 1) + const second = shape.slice(index) + // We deal with reference, we don't want twice the same latlng around. + second[0] = L.latLng(second[0].lat, second[0].lng, second[0].alt) + this.feature._latlngs.splice(shapeIndex, 1, first, second) + this.refresh() + this.reset() + this.onEdited() + }, + }) + + // 🍂namespace Editable; 🍂class PolygonEditor; 🍂aka L.Editable.PolygonEditor + // 🍂inherits PathEditor + L.Editable.PolygonEditor = L.Editable.PathEditor.extend({ + CLOSED: true, + MIN_VERTEX: 3, + + newPointForward: function (latlng) { + L.Editable.PathEditor.prototype.newPointForward.call(this, latlng) + if (!this.tools.backwardLineGuide._latlngs.length) + this.tools.anchorBackwardLineGuide(latlng) + if (this._drawnLatLngs.length === 2) this.tools.attachBackwardLineGuide() + }, + + addNewEmptyHole: function (latlng) { + this.ensureNotFlat() + const latlngs = this.feature.shapeAt(latlng) + if (!latlngs) return + const holes = [] + latlngs.push(holes) + return holes + }, + + // 🍂method newHole(latlng?: L.LatLng, index: int) + // Set up drawing tools for creating a new hole on the Polygon. If the `latlng` param is given, a first point is created. + newHole: function (latlng) { + const holes = this.addNewEmptyHole(latlng) + if (!holes) return + this.setDrawnLatLngs(holes) + this.startDrawingForward() + if (latlng) this.newPointForward(latlng) + }, + + addNewEmptyShape: function () { + if (this.feature._latlngs.length && this.feature._latlngs[0].length) { + const shape = [] + this.appendShape(shape) + return shape + } + return this.feature._latlngs + }, + + ensureMulti: function () { + if (this.feature._latlngs.length && isFlat(this.feature._latlngs[0])) { + this.feature._latlngs = [this.feature._latlngs] + } + }, + + ensureNotFlat: function () { + if (!this.feature._latlngs.length || isFlat(this.feature._latlngs)) + this.feature._latlngs = [this.feature._latlngs] + }, + + vertexCanBeDeleted: function (vertex) { + const parent = this.feature.parentShape(vertex.latlngs) + const idx = L.Util.indexOf(parent, vertex.latlngs) + if (idx > 0) return true // Holes can be totally deleted without removing the layer itself. + return L.Editable.PathEditor.prototype.vertexCanBeDeleted.call(this, vertex) + }, + + getDefaultLatLngs: function () { + if (!this.feature._latlngs.length) this.feature._latlngs.push([]) + return this.feature._latlngs[0] + }, + + formatShape: (shape) => { + // [[1, 2], [3, 4]] => must be nested + // [] => must be nested + // [[]] => is already nested + if (isFlat(shape) && (!shape[0] || shape[0].length !== 0)) return [shape] + return shape + }, + }) + + // 🍂namespace Editable; 🍂class RectangleEditor; 🍂aka L.Editable.RectangleEditor + // 🍂inherits PathEditor + L.Editable.RectangleEditor = L.Editable.PathEditor.extend({ + CLOSED: true, + MIN_VERTEX: 4, + + options: { + skipMiddleMarkers: true, + }, + + extendBounds: function (e) { + const index = e.vertex.getIndex() + const next = e.vertex.getNext() + const previous = e.vertex.getPrevious() + const oppositeIndex = (index + 2) % 4 + const opposite = e.vertex.latlngs[oppositeIndex] + const bounds = new L.LatLngBounds(e.latlng, opposite) + // Update latlngs by hand to preserve order. + previous.latlng.update([e.latlng.lat, opposite.lng]) + next.latlng.update([opposite.lat, e.latlng.lng]) + this.updateBounds(bounds) + this.refreshVertexMarkers() + }, + + onDrawingMouseDown: function (e) { + L.Editable.PathEditor.prototype.onDrawingMouseDown.call(this, e) + this.connect() + const latlngs = this.getDefaultLatLngs() + // L.Polygon._convertLatLngs removes last latlng if it equals first point, + // which is the case here as all latlngs are [0, 0] + if (latlngs.length === 3) latlngs.push(e.latlng) + const bounds = new L.LatLngBounds(e.latlng, e.latlng) + this.updateBounds(bounds) + this.updateLatLngs(bounds) + this.refresh() + this.reset() + // Stop dragging map. + // L.Draggable has two workflows: + // - mousedown => mousemove => mouseup + // - touchstart => touchmove => touchend + // Problem: L.Map.Tap does not allow us to listen to touchstart, so we only + // can deal with mousedown, but then when in a touch device, we are dealing with + // simulated events (actually simulated by L.Map.Tap), which are no more taken + // into account by L.Draggable. + // Ref.: https://github.com/Leaflet/Leaflet.Editable/issues/103 + e.originalEvent._simulated = false + this.map.dragging._draggable._onUp(e.originalEvent) + // Now transfer ongoing drag action to the bottom right corner. + // Should we refine which corner will handle the drag according to + // drag direction? + latlngs[3].__vertex.dragging._draggable._onDown(e.originalEvent) + }, + + onDrawingMouseUp: function (e) { + this.commitDrawing(e) + e.originalEvent._simulated = false + L.Editable.PathEditor.prototype.onDrawingMouseUp.call(this, e) + }, + + onDrawingMouseMove: function (e) { + e.originalEvent._simulated = false + L.Editable.PathEditor.prototype.onDrawingMouseMove.call(this, e) + }, + + getDefaultLatLngs: function (latlngs) { + return latlngs || this.feature._latlngs[0] + }, + + updateBounds: function (bounds) { + this.feature._bounds = bounds + }, + + updateLatLngs: function (bounds) { + const latlngs = this.getDefaultLatLngs() + const newLatlngs = this.feature._boundsToLatLngs(bounds) + // Keep references. + for (let i = 0; i < latlngs.length; i++) { + latlngs[i].update(newLatlngs[i]) + } + }, + }) + + // 🍂namespace Editable; 🍂class CircleEditor; 🍂aka L.Editable.CircleEditor + // 🍂inherits PathEditor + L.Editable.CircleEditor = L.Editable.PathEditor.extend({ + MIN_VERTEX: 2, + + options: { + skipMiddleMarkers: true, + }, + + initialize: function (map, feature, options) { + L.Editable.PathEditor.prototype.initialize.call(this, map, feature, options) + this._resizeLatLng = this.computeResizeLatLng() + }, + + computeResizeLatLng: function () { + // While circle is not added to the map, _radius is not set. + const delta = + (this.feature._radius || this.feature._mRadius) * Math.cos(Math.PI / 4) + const point = this.map.project(this.feature._latlng) + return this.map.unproject([point.x + delta, point.y - delta]) + }, + + updateResizeLatLng: function () { + this._resizeLatLng.update(this.computeResizeLatLng()) + this._resizeLatLng.__vertex.update() + }, + + getLatLngs: function () { + return [this.feature._latlng, this._resizeLatLng] + }, + + getDefaultLatLngs: function () { + return this.getLatLngs() + }, + + onVertexMarkerDrag: function (e) { + if (e.vertex.getIndex() === 1) this.resize(e) + else this.updateResizeLatLng(e) + L.Editable.PathEditor.prototype.onVertexMarkerDrag.call(this, e) + }, + + resize: function (e) { + let radius + if (this.map.options.crs) { + radius = this.map.options.crs.distance(this.feature._latlng, e.latlng) + } else { + radius = this.feature._latlng.distanceTo(e.latlng) + } + this.feature.setRadius(radius) + }, + + onDrawingMouseDown: function (e) { + L.Editable.PathEditor.prototype.onDrawingMouseDown.call(this, e) + this._resizeLatLng.update(e.latlng) + this.feature._latlng.update(e.latlng) + this.connect() + // Stop dragging map. + e.originalEvent._simulated = false + this.map.dragging._draggable._onUp(e.originalEvent) + // Now transfer ongoing drag action to the radius handler. + this._resizeLatLng.__vertex.dragging._draggable._onDown(e.originalEvent) + }, + + onDrawingMouseUp: function (e) { + this.commitDrawing(e) + e.originalEvent._simulated = false + L.Editable.PathEditor.prototype.onDrawingMouseUp.call(this, e) + }, + + onDrawingMouseMove: function (e) { + e.originalEvent._simulated = false + L.Editable.PathEditor.prototype.onDrawingMouseMove.call(this, e) + }, + + onDrag: function (e) { + L.Editable.PathEditor.prototype.onDrag.call(this, e) + this.feature.dragging.updateLatLng(this._resizeLatLng) + }, + }) + + // 🍂namespace Editable; 🍂class EditableMixin + // `EditableMixin` is included to `L.Polyline`, `L.Polygon`, `L.Rectangle`, `L.Circle` + // and `L.Marker`. It adds some methods to them. + // *When editing is enabled, the editor is accessible on the instance with the + // `editor` property.* + const EditableMixin = { + createEditor: function (map) { + map = map || this._map + const tools = this.options.editOptions?.editTools || map.editTools + if (!tools) throw Error('Unable to detect Editable instance.') + const Klass = this.options.editorClass || this.getEditorClass(tools) + return new Klass(map, this, this.options.editOptions) + }, + + // 🍂method enableEdit(map?: L.Map): this.editor + // Enable editing, by creating an editor if not existing, and then calling `enable` on it. + enableEdit: function (map) { + if (!this.editor) this.createEditor(map) + this.editor.enable() + return this.editor + }, + + // 🍂method editEnabled(): boolean + // Return true if current instance has an editor attached, and this editor is enabled. + editEnabled: function () { + return this.editor?.enabled() + }, + + // 🍂method disableEdit() + // Disable editing, also remove the editor property reference. + disableEdit: function () { + if (this.editor) { + this.editor.disable() + delete this.editor + } + }, + + // 🍂method toggleEdit() + // Enable or disable editing, according to current status. + toggleEdit: function () { + if (this.editEnabled()) this.disableEdit() + else this.enableEdit() + }, + + _onEditableAdd: function () { + if (this.editor) this.enableEdit() + }, + } + + const PolylineMixin = { + getEditorClass: (tools) => { + return tools?.options?.polylineEditorClass || L.Editable.PolylineEditor + }, + + shapeAt: function (latlng, latlngs) { + // We can have those cases: + // - latlngs are just a flat array of latlngs, use this + // - latlngs is an array of arrays of latlngs, loop over + let shape = null + latlngs = latlngs || this._latlngs + if (!latlngs.length) return shape + if (isFlat(latlngs) && this.isInLatLngs(latlng, latlngs)) shape = latlngs + else { + for (const member of latlngs) { + if (this.isInLatLngs(latlng, member)) return member } - - }); - - // 🍂namespace Editable; 🍂class EditableMixin - // `EditableMixin` is included to `L.Polyline`, `L.Polygon`, `L.Rectangle`, `L.Circle` - // and `L.Marker`. It adds some methods to them. - // *When editing is enabled, the editor is accessible on the instance with the - // `editor` property.* - var EditableMixin = { - - createEditor: function (map) { - map = map || this._map; - var tools = (this.options.editOptions || {}).editTools || map.editTools; - if (!tools) throw Error('Unable to detect Editable instance.'); - var Klass = this.options.editorClass || this.getEditorClass(tools); - return new Klass(map, this, this.options.editOptions); - }, - - // 🍂method enableEdit(map?: L.Map): this.editor - // Enable editing, by creating an editor if not existing, and then calling `enable` on it. - enableEdit: function (map) { - if (!this.editor) this.createEditor(map); - this.editor.enable(); - return this.editor; - }, - - // 🍂method editEnabled(): boolean - // Return true if current instance has an editor attached, and this editor is enabled. - editEnabled: function () { - return this.editor && this.editor.enabled(); - }, - - // 🍂method disableEdit() - // Disable editing, also remove the editor property reference. - disableEdit: function () { - if (this.editor) { - this.editor.disable(); - delete this.editor; - } - }, - - // 🍂method toggleEdit() - // Enable or disable editing, according to current status. - toggleEdit: function () { - if (this.editEnabled()) this.disableEdit(); - else this.enableEdit(); - }, - - _onEditableAdd: function () { - if (this.editor) this.enableEdit(); + } + return shape + }, + + isInLatLngs: function (l, latlngs) { + if (!latlngs) return false + let i + let k + let len + let part = [] + let p + const w = this._clickTolerance() + this._projectLatlngs(latlngs, part, this._pxBounds) + part = part[0] + p = this._map.latLngToLayerPoint(l) + + if (!this._pxBounds.contains(p)) { + return false + } + for (i = 1, len = part.length, k = 0; i < len; k = i++) { + if (L.LineUtil.pointToSegmentDistance(p, part[k], part[i]) <= w) { + return true } - - }; - - var PolylineMixin = { - - getEditorClass: function (tools) { - return (tools && tools.options.polylineEditorClass) ? tools.options.polylineEditorClass : L.Editable.PolylineEditor; - }, - - shapeAt: function (latlng, latlngs) { - // We can have those cases: - // - latlngs are just a flat array of latlngs, use this - // - latlngs is an array of arrays of latlngs, loop over - var shape = null; - latlngs = latlngs || this._latlngs; - if (!latlngs.length) return shape; - else if (isFlat(latlngs) && this.isInLatLngs(latlng, latlngs)) shape = latlngs; - else for (var i = 0; i < latlngs.length; i++) if (this.isInLatLngs(latlng, latlngs[i])) return latlngs[i]; - return shape; - }, - - isInLatLngs: function (l, latlngs) { - if (!latlngs) return false; - var i, k, len, part = [], p, - w = this._clickTolerance(); - this._projectLatlngs(latlngs, part, this._pxBounds); - part = part[0]; - p = this._map.latLngToLayerPoint(l); - - if (!this._pxBounds.contains(p)) { return false; } - for (i = 1, len = part.length, k = 0; i < len; k = i++) { - - if (L.LineUtil.pointToSegmentDistance(p, part[k], part[i]) <= w) { - return true; - } - } - return false; + } + return false + }, + } + + const PolygonMixin = { + getEditorClass: (tools) => { + return tools?.options?.polygonEditorClass || L.Editable.PolygonEditor + }, + + shapeAt: function (latlng, latlngs) { + // We can have those cases: + // - latlngs are just a flat array of latlngs, use this + // - latlngs is an array of arrays of latlngs, this is a simple polygon (maybe with holes), use the first + // - latlngs is an array of arrays of arrays, this is a multi, loop over + let shape = null + latlngs = latlngs || this._latlngs + if (!latlngs.length) return shape + if (isFlat(latlngs) && this.isInLatLngs(latlng, latlngs)) shape = latlngs + if (isFlat(latlngs[0]) && this.isInLatLngs(latlng, latlngs[0])) { + shape = latlngs + } else { + for (const member of latlngs) { + if (this.isInLatLngs(latlng, member[0])) return member } - - }; - - var PolygonMixin = { - - getEditorClass: function (tools) { - return (tools && tools.options.polygonEditorClass) ? tools.options.polygonEditorClass : L.Editable.PolygonEditor; - }, - - shapeAt: function (latlng, latlngs) { - // We can have those cases: - // - latlngs are just a flat array of latlngs, use this - // - latlngs is an array of arrays of latlngs, this is a simple polygon (maybe with holes), use the first - // - latlngs is an array of arrays of arrays, this is a multi, loop over - var shape = null; - latlngs = latlngs || this._latlngs; - if (!latlngs.length) return shape; - else if (isFlat(latlngs) && this.isInLatLngs(latlng, latlngs)) shape = latlngs; - else if (isFlat(latlngs[0]) && this.isInLatLngs(latlng, latlngs[0])) shape = latlngs; - else for (var i = 0; i < latlngs.length; i++) if (this.isInLatLngs(latlng, latlngs[i][0])) return latlngs[i]; - return shape; - }, - - isInLatLngs: function (l, latlngs) { - var inside = false, l1, l2, j, k, len2; - - for (j = 0, len2 = latlngs.length, k = len2 - 1; j < len2; k = j++) { - l1 = latlngs[j]; - l2 = latlngs[k]; - - if (((l1.lat > l.lat) !== (l2.lat > l.lat)) && - (l.lng < (l2.lng - l1.lng) * (l.lat - l1.lat) / (l2.lat - l1.lat) + l1.lng)) { - inside = !inside; - } - } - - return inside; - }, - - parentShape: function (shape, latlngs) { - latlngs = latlngs || this._latlngs; - if (!latlngs) return; - var idx = L.Util.indexOf(latlngs, shape); - if (idx !== -1) return latlngs; - for (var i = 0; i < latlngs.length; i++) { - idx = L.Util.indexOf(latlngs[i], shape); - if (idx !== -1) return latlngs[i]; - } + } + return shape + }, + + isInLatLngs: (l, latlngs) => { + let inside = false + let l1 + let l2 + let j + let k + let len2 + + for (j = 0, len2 = latlngs.length, k = len2 - 1; j < len2; k = j++) { + l1 = latlngs[j] + l2 = latlngs[k] + + if ( + l1.lat > l.lat !== l2.lat > l.lat && + l.lng < ((l2.lng - l1.lng) * (l.lat - l1.lat)) / (l2.lat - l1.lat) + l1.lng + ) { + inside = !inside } - - }; - - - var MarkerMixin = { - - getEditorClass: function (tools) { - return (tools && tools.options.markerEditorClass) ? tools.options.markerEditorClass : L.Editable.MarkerEditor; - } - - }; - - var RectangleMixin = { - - getEditorClass: function (tools) { - return (tools && tools.options.rectangleEditorClass) ? tools.options.rectangleEditorClass : L.Editable.RectangleEditor; - } - - }; - - var CircleMixin = { - - getEditorClass: function (tools) { - return (tools && tools.options.circleEditorClass) ? tools.options.circleEditorClass : L.Editable.CircleEditor; - } - - }; - - var keepEditable = function () { - // Make sure you can remove/readd an editable layer. - this.on('add', this._onEditableAdd); - }; - - var isFlat = L.LineUtil.isFlat || L.LineUtil._flat || L.Polyline._flat; // <=> 1.1 compat. - - - if (L.Polyline) { - L.Polyline.include(EditableMixin); - L.Polyline.include(PolylineMixin); - L.Polyline.addInitHook(keepEditable); - } - if (L.Polygon) { - L.Polygon.include(EditableMixin); - L.Polygon.include(PolygonMixin); - } - if (L.Marker) { - L.Marker.include(EditableMixin); - L.Marker.include(MarkerMixin); - L.Marker.addInitHook(keepEditable); - } - if (L.Rectangle) { - L.Rectangle.include(EditableMixin); - L.Rectangle.include(RectangleMixin); - } - if (L.Circle) { - L.Circle.include(EditableMixin); - L.Circle.include(CircleMixin); - } - - L.LatLng.prototype.update = function (latlng) { - latlng = L.latLng(latlng); - this.lat = latlng.lat; - this.lng = latlng.lng; - } - -}, window)); + } + + return inside + }, + + parentShape: function (shape, latlngs) { + latlngs = latlngs || this._latlngs + if (!latlngs) return + let idx = L.Util.indexOf(latlngs, shape) + if (idx !== -1) return latlngs + for (const member of latlngs) { + idx = L.Util.indexOf(member, shape) + if (idx !== -1) return member + } + }, + } + + const MarkerMixin = { + getEditorClass: (tools) => { + return tools?.options?.markerEditorClass || L.Editable.MarkerEditor + }, + } + + const CircleMarkerMixin = { + getEditorClass: (tools) => { + return tools?.options?.circleMarkerEditorClass || L.Editable.CircleMarkerEditor + }, + } + + const RectangleMixin = { + getEditorClass: (tools) => { + return tools?.options?.rectangleEditorClass || L.Editable.RectangleEditor + }, + } + + const CircleMixin = { + getEditorClass: (tools) => { + return tools?.options?.circleEditorClass || L.Editable.CircleEditor + }, + } + + const keepEditable = function () { + // Make sure you can remove/readd an editable layer. + this.on('add', this._onEditableAdd) + } + + const isFlat = L.LineUtil.isFlat || L.LineUtil._flat || L.Polyline._flat // <=> 1.1 compat. + + if (L.Polyline) { + L.Polyline.include(EditableMixin) + L.Polyline.include(PolylineMixin) + L.Polyline.addInitHook(keepEditable) + } + if (L.Polygon) { + L.Polygon.include(EditableMixin) + L.Polygon.include(PolygonMixin) + } + if (L.Marker) { + L.Marker.include(EditableMixin) + L.Marker.include(MarkerMixin) + L.Marker.addInitHook(keepEditable) + } + if (L.CircleMarker) { + L.CircleMarker.include(EditableMixin) + L.CircleMarker.include(CircleMarkerMixin) + L.CircleMarker.addInitHook(keepEditable) + } + if (L.Rectangle) { + L.Rectangle.include(EditableMixin) + L.Rectangle.include(RectangleMixin) + } + if (L.Circle) { + L.Circle.include(EditableMixin) + L.Circle.include(CircleMixin) + } + + L.LatLng.prototype.update = function (latlng) { + latlng = L.latLng(latlng) + this.lat = latlng.lat + this.lng = latlng.lng + } +}, window) diff --git a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css index db8a1f2bb..bbc8c9fb0 100755 --- a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css +++ b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css @@ -57,4 +57,4 @@ } .marker-cluster span { line-height: 30px; - } + } \ No newline at end of file