diff --git a/README.md b/README.md index afb88159..037291a0 100644 --- a/README.md +++ b/README.md @@ -274,12 +274,12 @@ See the available options in the table below. | requireSnapToFinish | `false` | Require the last point of a shape to be snapped. | | tooltips | `true` | Show helpful tooltips for your user. | | allowSelfIntersection | `true` | Allow self intersections. | -| templineStyle | `{ color: 'red' },` | [Leaflet path options](https://leafletjs.com/reference-1.7.1.html#path) for the lines between drawn vertices/markers. | -| hintlineStyle | `{ color: 'red', dashArray: [5, 5] }` | [Leaflet path options](https://leafletjs.com/reference-1.7.1.html#path) for the helper line between last drawn vertex and the cursor. | -| pathOptions | `null` | [Leaflet path options](https://leafletjs.com/reference-1.7.1.html#path) for the drawn layer (Only for L.Path layers). | -| markerStyle | `{ draggable: true }` | [Leaflet marker options](https://leafletjs.com/reference-1.7.1.html#marker-icon) (only for drawing markers). | +| templineStyle | `{ color: 'red' },` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the lines between drawn vertices/markers. | +| hintlineStyle | `{ color: 'red', dashArray: [5, 5] }` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the helper line between last drawn vertex and the cursor. | +| pathOptions | `null` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the drawn layer (Only for L.Path layers). | +| markerStyle | `{ draggable: true }` | [Leaflet marker options](https://leafletjs.com/reference.html#marker-icon) (only for drawing markers). | | cursorMarker | `true` | Show a marker at the cursor. | -| finishOn | `null` | Leaflet layer event to finish the drawn shape, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference-1.7.1.html#interactive-layer-click). `snap` is also an option for Line, Polygon and Rectangle. | +| finishOn | `null` | Leaflet layer event to finish the drawn shape, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). `snap` is also an option for Line, Polygon and Rectangle. | | hideMiddleMarkers | `false` | Hide the middle Markers in Edit Mode from Polyline and Polygon. | | minRadiusCircle | `null` | Set the min radius of a `Circle`. | | maxRadiusCircle | `null` | Set the max radius of a `Circle`. | @@ -402,9 +402,9 @@ See the available options in the table below. | allowCutting | `true` | Layer can be prevented from cutting. | | allowRotation | `true` | Layer can be prevented from rotation. | | draggable | `true` | Dragging can be disabled for the layer. | -| addVertexOn | `click` | Leaflet layer event to add a vertex to a Line or Polygon, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference-1.7.1.html#interactive-layer-click). | +| addVertexOn | `click` | Leaflet layer event to add a vertex to a Line or Polygon, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). | | addVertexValidation | `undefined` | A function for validation if a vertex (of a Line / Polygon) is allowed to add. It passes a object with `[layer, marker, event}`. For example to check if the layer has a certain property or if the `Ctrl` key is pressed. | -| removeVertexOn | `contextmenu` | Leaflet layer event to remove a vertex from a Line or Polygon, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference-1.7.1.html#interactive-layer-click). | +| removeVertexOn | `contextmenu` | Leaflet layer event to remove a vertex from a Line or Polygon, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). | | removeVertexValidation | `undefined` | A function for validation if a vertex (of a Line / Polygon) is allowed to remove. It passes a object with `[layer, marker, event}`. For example to check if the layer has a certain property or if the `Ctrl` key is pressed. | | moveVertexValidation | `undefined` | A function for validation if a vertex / helper-marker is allowed to move / drag. It passes a object with `[layer, marker, event}`. For example to check if the layer has a certain property or if the `Ctrl` key is pressed. | | limitMarkersToCount | `-1` | Shows only `n` markers closest to the cursor. Use `-1` for no limit. | @@ -767,7 +767,7 @@ The following options are additionally to the [Draw](#draw-mode) and [Edit Mode] | :------------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | snappingOrder | `Array` | Prioritize the order of snapping. Default: `['Marker','CircleMarker','Circle','Line','Polygon','Rectangle']`. | | layerGroup | `map` | add the created layers to a layergroup instead to the map. | -| panes | `Object` | Defines in which [panes](https://leafletjs.com/reference-1.7.1.html#map-pane) the layers and helper vertices are created. Default: `{ vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane' }`. | +| panes | `Object` | Defines in which [panes](https://leafletjs.com/reference.html#map-pane) the layers and helper vertices are created. Default: `{ vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane' }`. | Some details about a few more powerful options: @@ -1088,7 +1088,7 @@ Using ES6 Module, a simple example would look something like this: ```js import * as L from 'leaflet' -let map = L.Map() +let map = L.Map(); // map created and display on webpage ... @@ -1096,7 +1096,7 @@ let map = L.Map() /* drawing script */ // at this point map.pm is undefined if (!map.pm) { - await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free') + await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free'); L.PM.reInitLayer(map) } // map.pm is now defined and can be used to draw on map diff --git a/cypress/integration/circle.spec.js b/cypress/integration/circle.spec.js index 31cfbe14..02814f05 100644 --- a/cypress/integration/circle.spec.js +++ b/cypress/integration/circle.spec.js @@ -191,6 +191,7 @@ describe('Draw Circle', () => { mapSimple = L.map('map', { crs: L.CRS.Simple, minZoom: -2, + doubleClickZoom: false, // Leaflet 1.8 DoubleTap fix }).setView([0, 0], 0); mapSimple.pm.addControls(); }); @@ -219,6 +220,7 @@ describe('Draw Circle', () => { mapSimple = L.map('map', { crs: L.CRS.Simple, minZoom: -2, + doubleClickZoom: false, // Leaflet 1.8 DoubleTap fix }).setView([0, 0], 0); mapSimple.pm.addControls(); }); diff --git a/cypress/support/index.js b/cypress/support/index.js index 458daf40..7f8f965c 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -36,6 +36,7 @@ beforeEach(() => { // create the map const map = L.map('map', { preferCanvas: false, + doubleClickZoom: false, // Leaflet 1.8 DoubleTap fix }) .setView([51.505, -0.09], 13) .addLayer(tiles); diff --git a/package-lock.json b/package-lock.json index 8781f2b0..99c23c5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "devDependencies": { "@babel/core": "7.14.0", "@babel/preset-env": "7.14.1", - "@types/leaflet": "^1.7.0", + "@types/leaflet": "^1.7.9", "babel-loader": "8.2.2", "copy-webpack-plugin": "8.1.1", "css-loader": "5.2.4", @@ -31,7 +31,7 @@ "eslint-plugin-cypress": "2.11.3", "eslint-plugin-import": "2.22.1", "file-loader": "6.2.0", - "leaflet": "1.7.1", + "leaflet": "1.8.0", "mini-css-extract-plugin": "1.6.0", "prettier": "2.2.1", "prosthetic-hand": "1.3.1", @@ -2058,9 +2058,9 @@ "dev": true }, "node_modules/@types/leaflet": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.6.tgz", - "integrity": "sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==", + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz", + "integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==", "dev": true, "dependencies": { "@types/geojson": "*" @@ -5421,9 +5421,9 @@ } }, "node_modules/leaflet": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", - "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz", + "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==", "dev": true }, "node_modules/levn": { @@ -9724,9 +9724,9 @@ "dev": true }, "@types/leaflet": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.6.tgz", - "integrity": "sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==", + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz", + "integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==", "dev": true, "requires": { "@types/geojson": "*" @@ -9900,7 +9900,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz", "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==", - "dev": true + "dev": true, + "requires": {} }, "@webpack-cli/info": { "version": "1.4.0", @@ -9915,7 +9916,8 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz", "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==", - "dev": true + "dev": true, + "requires": {} }, "@xtuc/ieee754": { "version": "1.2.0", @@ -9939,7 +9941,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "ajv": { "version": "6.12.6", @@ -9957,7 +9960,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "ansi-colors": { "version": "4.1.1", @@ -11039,7 +11043,8 @@ "version": "8.3.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", - "dev": true + "dev": true, + "requires": {} }, "eslint-import-resolver-node": { "version": "0.3.6", @@ -11802,7 +11807,8 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true + "dev": true, + "requires": {} }, "ignore": { "version": "4.0.6", @@ -12290,9 +12296,9 @@ "dev": true }, "leaflet": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", - "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz", + "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==", "dev": true }, "levn": { @@ -12747,9 +12753,9 @@ } }, "minimist": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", - "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, "mkdirp": { @@ -12762,9 +12768,9 @@ } }, "moment": { - "version": "2.29.2", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz", - "integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", "dev": true }, "ms": { @@ -12774,9 +12780,9 @@ "dev": true }, "nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", + "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", "dev": true }, "natural-compare": { @@ -13085,7 +13091,8 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -13651,6 +13658,15 @@ "tweetnacl": "~0.14.0" } }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -13682,15 +13698,6 @@ "define-properties": "^1.1.3" } }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, "strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -13823,7 +13830,10 @@ "acorn": { "version": "8.6.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz", - "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==" + "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==", + "dev": true, + "optional": true, + "peer": true }, "commander": { "version": "2.20.3", diff --git a/package.json b/package.json index 00096abc..9411e9bc 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "devDependencies": { "@babel/core": "7.14.0", "@babel/preset-env": "7.14.1", - "@types/leaflet": "^1.7.0", + "@types/leaflet": "^1.7.9", "babel-loader": "8.2.2", "copy-webpack-plugin": "8.1.1", "css-loader": "5.2.4", @@ -43,7 +43,7 @@ "eslint-plugin-cypress": "2.11.3", "eslint-plugin-import": "2.22.1", "file-loader": "6.2.0", - "leaflet": "1.7.1", + "leaflet": "1.8.0", "mini-css-extract-plugin": "1.6.0", "prettier": "2.2.1", "prosthetic-hand": "1.3.1", diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 3c4ab09c..fee9ac13 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/src/js/Draw/L.PM.Draw.Line.js @@ -68,7 +68,7 @@ Draw.Line = Draw.extend({ this._map.on('click', this._createVertex, this); // finish on layer event - // #http://leafletjs.com/reference-1.2.0.html#interactive-layer-click + // #http://leafletjs.com/reference.html#interactive-layer-click if (this.options.finishOn && this.options.finishOn !== 'snap') { this._map.on(this.options.finishOn, this._finishShape, this); } diff --git a/src/js/L.PM.js b/src/js/L.PM.js index b6bd735c..c2666aba 100644 --- a/src/js/L.PM.js +++ b/src/js/L.PM.js @@ -214,34 +214,5 @@ L.PM = L.PM || { }, }; -if (L.version === '1.7.1') { - // Canvas Mode: After dragging the map the target layer can't be dragged anymore until it is clicked - // https://github.com/Leaflet/Leaflet/issues/7775 a fix is already merged for the Leaflet 1.8.0 version - L.Canvas.include({ - _onClick(e) { - const point = this._map.mouseEventToLayerPoint(e); - let layer; - let clickedLayer; - - for (let order = this._drawFirst; order; order = order.next) { - layer = order.layer; - if (layer.options.interactive && layer._containsPoint(point)) { - // changing e.type !== 'preclick' to e.type === 'preclick' fix the issue - if ( - !(e.type === 'click' || e.type === 'preclick') || - !this._map._draggableMoved(layer) - ) { - clickedLayer = layer; - } - } - } - if (clickedLayer) { - L.DomEvent.fakeStop(e); - this._fireEvent([clickedLayer], e); - } - }, - }); -} - // initialize leaflet-geoman L.PM.initialize();