From 4adc5585606d8f14e53523048034331fe44c2092 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 12 Feb 2025 13:35:03 +0100 Subject: [PATCH] chore: use our contexmenu class for inplace toolbar And remove Leaflet.Toolbar dependency. This also teach ContextMenu how to display icons instead of text and how to render in horizontal orientation instead of vertical. --- scripts/vendorsjs.sh | 1 - umap/static/umap/css/contextmenu.css | 12 +- umap/static/umap/css/icon.css | 18 ++ umap/static/umap/js/modules/data/features.js | 78 ++++++-- umap/static/umap/js/modules/rendering/map.js | 6 - umap/static/umap/js/modules/rendering/ui.js | 36 +--- umap/static/umap/js/modules/ui/contextmenu.js | 11 +- umap/static/umap/js/modules/umap.js | 2 +- umap/static/umap/js/umap.controls.js | 183 ------------------ umap/static/umap/map.css | 25 --- .../umap/vendors/toolbar/leaflet.toolbar.css | 1 - .../umap/vendors/toolbar/leaflet.toolbar.js | 1 - umap/templates/umap/css.html | 2 - umap/templates/umap/js.html | 1 - umap/tests/integration/test_draw_polygon.py | 6 +- umap/tests/integration/test_draw_polyline.py | 4 +- umap/tests/integration/test_edit_marker.py | 6 +- umap/tests/integration/test_edit_polygon.py | 6 +- umap/tests/integration/test_websocket_sync.py | 8 +- 19 files changed, 128 insertions(+), 279 deletions(-) delete mode 100644 umap/static/umap/vendors/toolbar/leaflet.toolbar.css delete mode 100644 umap/static/umap/vendors/toolbar/leaflet.toolbar.js diff --git a/scripts/vendorsjs.sh b/scripts/vendorsjs.sh index 7508460c..7a40ed2a 100755 --- a/scripts/vendorsjs.sh +++ b/scripts/vendorsjs.sh @@ -16,7 +16,6 @@ mkdir -p umap/static/umap/vendors/markercluster/ && cp -r node_modules/leaflet.m mkdir -p umap/static/umap/vendors/markercluster/ && cp -r node_modules/leaflet.markercluster/dist/MarkerCluster.* umap/static/umap/vendors/markercluster/ mkdir -p umap/static/umap/vendors/heat/ && cp -r node_modules/leaflet.heat/dist/leaflet-heat.js umap/static/umap/vendors/heat/ mkdir -p umap/static/umap/vendors/fullscreen/ && cp -r node_modules/leaflet-fullscreen/dist/** umap/static/umap/vendors/fullscreen/ -mkdir -p umap/static/umap/vendors/toolbar/ && cp -r node_modules/leaflet-toolbar/dist/leaflet.toolbar.* umap/static/umap/vendors/toolbar/ mkdir -p umap/static/umap/vendors/measurable/ && cp -r node_modules/leaflet-measurable/Leaflet.Measurable.* umap/static/umap/vendors/measurable/ mkdir -p umap/static/umap/vendors/photon/ && cp -r node_modules/leaflet.photon/leaflet.photon.js umap/static/umap/vendors/photon/ mkdir -p umap/static/umap/vendors/csv2geojson/ && cp -r node_modules/csv2geojson/csv2geojson.js umap/static/umap/vendors/csv2geojson/ diff --git a/umap/static/umap/css/contextmenu.css b/umap/static/umap/css/contextmenu.css index 79b55c09..6cd9b425 100644 --- a/umap/static/umap/css/contextmenu.css +++ b/umap/static/umap/css/contextmenu.css @@ -1,12 +1,20 @@ .umap-contextmenu { background-color: var(--background-color); - padding: calc(var(--box-padding) / 2) var(--box-padding); + padding: calc(var(--box-padding) / 2) calc(var(--box-padding) / 2); position: fixed; z-index: var(--zindex-contextmenu); border-radius: var(--border-radius); box-shadow: var(--block-shadow); + display: flex; + flex-direction: column; } -.umap-contextmenu li + li { +.umap-contextmenu-rows { + flex-direction: row; + align-items: center; + justify-content: center; + align-content: center; +} +.umap-contextmenu:not(.umap-contextmenu-rows) li + li { margin-top: var(--text-margin); } diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css index 0cfd3128..047ca9a5 100644 --- a/umap/static/umap/css/icon.css +++ b/umap/static/umap/css/icon.css @@ -68,12 +68,21 @@ html[dir="rtl"] .icon { .icon-close { background-position: var(--tile) 0px; } +.icon-continue-line { + background-position: calc(var(--tile) * 4) 0; +} .icon-copy { background-position: calc(var(--tile) * 2) calc(var(--tile) * 4); } .icon-delete { background-position: calc(var(--tile) * 5) calc(var(--tile) * 2); } +.icon-delete-shape { + background-position: calc(var(--tile) * 4) calc(var(--tile) * 3); +} +.icon-delete-vertex { + background-position: calc(var(--tile) * 5) calc(var(--tile) * 4); +} .readonly .icon-delete, .off .icon-delete { background-position: calc(var(--tile) * 5) calc(var(--tile) * 5); @@ -98,6 +107,9 @@ html[dir="rtl"] .icon { .off .icon-edit { background-position: calc(var(--tile) * 2) calc(var(--tile) * 3); } +.icon-extract-shape { + background-position: calc(var(--tile) * 5) 0; +} .icon-filters { background-position: 0px var(--tile); } @@ -107,6 +119,9 @@ html[dir="rtl"] .icon { .icon-help { background-position: 0 0; } +.icon-hole { + background-position: calc(var(--tile) * 3) calc(var(--tile) * 4); +} .icon-key { background-position: calc(var(--tile) * 6) calc(var(--tile) * 5); } @@ -165,6 +180,9 @@ html[dir="rtl"] .icon { .icon-share { background-position: 0px calc(var(--tile) * 5); } +.icon-split-line { + background-position: calc(var(--tile) * 5) var(--tile); +} .icon-star { background-position: var(--tile) calc(var(--tile) * 7); } diff --git a/umap/static/umap/js/modules/data/features.js b/umap/static/umap/js/modules/data/features.js index ef65491a..019a95e3 100644 --- a/umap/static/umap/js/modules/data/features.js +++ b/umap/static/umap/js/modules/data/features.js @@ -270,6 +270,10 @@ class Feature { if (!this.ui.isOnScreen(this._umap._leafletMap.getBounds())) this.zoomTo(event) } + toggleEditing() { + this.edit() + } + getAdvancedEditActions(container) { const button = Utils.loadTemplate(` ` + `
    • ` ) - li.addEventListener('click', () => { + li.firstChild.addEventListener('click', () => { this.close() item.action() }) diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js index 740cc9b9..4fe0abaa 100644 --- a/umap/static/umap/js/modules/umap.js +++ b/umap/static/umap/js/modules/umap.js @@ -120,6 +120,7 @@ export default class Umap extends ServerStored { ) this.tooltip = new Tooltip(this._leafletMap._controlContainer) this.contextmenu = new ContextMenu() + this.editContextmenu = new ContextMenu({ className: 'dark', orientation: 'rows' }) this.server = new ServerRequest() this.request = new Request() this.facets = new Facets(this) @@ -1299,7 +1300,6 @@ export default class Umap extends ServerStored { this.editPanel.close() this.fullPanel.close() this.sync.stop() - this._leafletMap.closeInplaceToolbar() } fire(name) { diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 2edf3dce..3152eb98 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -1,186 +1,3 @@ -U.BaseFeatureAction = L.ToolbarAction.extend({ - initialize: function (map, feature, latlng) { - this.map = map - this.feature = feature - this.latlng = latlng - L.ToolbarAction.prototype.initialize.call(this) - this.postInit() - }, - - postInit: () => {}, - - hideToolbar: function () { - this.map.removeLayer(this.toolbar) - }, - - addHooks: function () { - this.onClick({ latlng: this.latlng }) - this.hideToolbar() - }, -}) - -U.CreateHoleAction = U.BaseFeatureAction.extend({ - options: { - toolbarIcon: { - className: 'umap-new-hole', - tooltip: L._('Start a hole here'), - }, - }, - - onClick: function (event) { - this.feature.ui.startHole(event) - }, -}) - -U.ToggleEditAction = U.BaseFeatureAction.extend({ - options: { - toolbarIcon: { - className: 'umap-toggle-edit', - tooltip: L._('Toggle edit mode (⇧+Click)'), - }, - }, - - onClick: function (event) { - if (this.feature._toggleEditing) { - this.feature._toggleEditing(event) // Path - } else { - this.feature.edit(event) // Marker - } - }, -}) - -U.DeleteFeatureAction = U.BaseFeatureAction.extend({ - options: { - toolbarIcon: { - className: 'umap-delete-all', - tooltip: L._('Delete this feature'), - }, - }, - - postInit: function () { - if (!this.feature.isMulti()) - this.options.toolbarIcon.className = 'umap-delete-one-of-one' - }, - - onClick: function (e) { - this.feature.confirmDelete(e) - }, -}) - -U.DeleteShapeAction = U.BaseFeatureAction.extend({ - options: { - toolbarIcon: { - className: 'umap-delete-one-of-multi', - tooltip: L._('Delete this shape'), - }, - }, - - onClick: function (e) { - this.feature.ui.enableEdit().deleteShapeAt(e.latlng) - }, -}) - -U.ExtractShapeFromMultiAction = U.BaseFeatureAction.extend({ - options: { - toolbarIcon: { - className: 'umap-extract-shape-from-multi', - tooltip: L._('Extract shape to separate feature'), - }, - }, - - onClick: function (e) { - this.feature.ui.isolateShape(e.latlng) - }, -}) - -U.BaseVertexAction = U.BaseFeatureAction.extend({ - initialize: function (map, feature, latlng, vertex) { - this.vertex = vertex - U.BaseFeatureAction.prototype.initialize.call(this, map, feature, latlng) - }, -}) - -U.DeleteVertexAction = U.BaseVertexAction.extend({ - options: { - toolbarIcon: { - className: 'umap-delete-vertex', - tooltip: L._('Delete this vertex (Alt+Click)'), - }, - }, - - onClick: function () { - this.vertex.delete() - }, -}) - -U.SplitLineAction = U.BaseVertexAction.extend({ - options: { - toolbarIcon: { - className: 'umap-split-line', - tooltip: L._('Split line'), - }, - }, - - onClick: function () { - this.vertex.split() - }, -}) - -U.ContinueLineAction = U.BaseVertexAction.extend({ - options: { - toolbarIcon: { - className: 'umap-continue-line', - tooltip: L._('Continue line'), - }, - }, - - onClick: function () { - this.vertex.continue() - }, -}) - -// Leaflet.Toolbar doesn't allow twice same toolbar class… -U.SettingsToolbar = L.Toolbar.Control.extend({}) -U.DrawToolbar = L.Toolbar.Control.extend({ - initialize: function (options) { - L.Toolbar.Control.prototype.initialize.call(this, options) - this.map = this.options.map - this.map.on('seteditedfeature', this.redraw, this) - }, - - appendToContainer: function (container) { - this.options.actions = [] - if (this.map._umap.properties.enableMarkerDraw) { - this.options.actions.push(U.DrawMarkerAction) - } - if (this.map._umap.properties.enablePolylineDraw) { - this.options.actions.push(U.DrawPolylineAction) - if ( - this.map._umap.editedFeature && - this.map._umap.editedFeature instanceof U.LineString - ) { - this.options.actions.push(U.AddPolylineShapeAction) - } - } - if (this.map._umap.properties.enablePolygonDraw) { - this.options.actions.push(U.DrawPolygonAction) - if ( - this.map._umap.editedFeature && - this.map._umap.editedFeature instanceof U.Polygon - ) { - this.options.actions.push(U.AddPolygonShapeAction) - } - } - L.Toolbar.Control.prototype.appendToContainer.call(this, container) - }, - - redraw: function () { - const container = this._control.getContainer() - container.innerHTML = '' - this.appendToContainer(container) - }, -}) - U.EditControl = L.Control.extend({ options: { position: 'topright', diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index ee13aa31..179fbd4a 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -475,9 +475,6 @@ ul.photon-autocomplete { .layer-edit { background-position: -50px -49px; } -.umap-toggle-edit { - background-position: -44px -48px; -} .readonly .layer-edit, .off .layer-edit { background-position: -50px -73px; @@ -486,28 +483,6 @@ ul.photon-autocomplete { .off .layer-delete { background-position: -122px -121px; } -.umap-new-hole { - background-position: -71px -94px; -} -.umap-delete-one-of-multi { - background-position: -97px -70px; -} -.umap-delete-all, -.umap-delete-one-of-one { - background-position: -119px -48px; -} -.umap-delete-vertex { - background-position: -119px -94px; -} -.umap-continue-line { - background-position: -96px 1px; -} -.umap-split-line { - background-position: -119px -22px; -} -.umap-extract-shape-from-multi{ - background-position: -119px 2px; -} .umap-browser .feature-title { width: inherit; cursor: inherit; diff --git a/umap/static/umap/vendors/toolbar/leaflet.toolbar.css b/umap/static/umap/vendors/toolbar/leaflet.toolbar.css deleted file mode 100644 index 2846953f..00000000 --- a/umap/static/umap/vendors/toolbar/leaflet.toolbar.css +++ /dev/null @@ -1 +0,0 @@ -.leaflet-toolbar-0{list-style:none;padding-left:0;box-shadow:0 1px 5px rgba(0,0,0,.65)}.leaflet-toolbar-0>li{position:relative}.leaflet-toolbar-0>li>.leaflet-toolbar-icon{display:block;width:26px;height:26px;line-height:26px;margin-right:0;padding-right:0;border-right:0;text-align:center;text-decoration:none;background-color:#fff}.leaflet-toolbar-0>li>.leaflet-toolbar-icon:hover{background-color:#f4f4f4}.leaflet-toolbar-0 .leaflet-toolbar-1{display:none;list-style:none}.leaflet-toolbar-tip-container{margin:0 auto;height:12px;position:relative;overflow:hidden}.leaflet-toolbar-tip{width:12px;height:12px;margin:-6px auto 0;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.65);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-control-toolbar>li>.leaflet-toolbar-icon{border-bottom:1px solid #ccc}.leaflet-control-toolbar>li:first-child>.leaflet-toolbar-icon{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-control-toolbar>li:last-child>.leaflet-toolbar-icon{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom-width:0}.leaflet-control-toolbar .leaflet-toolbar-1{margin:0;padding:0;position:absolute;left:26px;top:0;white-space:nowrap;height:26px}.leaflet-control-toolbar .leaflet-toolbar-1>li{display:inline-block}.leaflet-control-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon{display:block;background-color:#919187;border-left:1px solid #aaa;color:#fff;font:11px/19px "Helvetica Neue",Arial,Helvetica,sans-serif;line-height:26px;text-decoration:none;padding-left:10px;padding-right:10px;height:26px}.leaflet-control-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon:hover{background-color:#a0a098}.leaflet-popup-toolbar{position:relative}.leaflet-popup-toolbar>li{float:left}.leaflet-popup-toolbar>li:first-child>.leaflet-toolbar-icon{border-top-left-radius:4px;border-bottom-left-radius:4px}.leaflet-popup-toolbar>li:last-child>.leaflet-toolbar-icon{border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-width:0}.leaflet-popup-toolbar .leaflet-toolbar-1{position:absolute;top:26px;left:0;padding-left:0}.leaflet-popup-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon{position:relative;float:left;width:26px;height:26px} \ No newline at end of file diff --git a/umap/static/umap/vendors/toolbar/leaflet.toolbar.js b/umap/static/umap/vendors/toolbar/leaflet.toolbar.js deleted file mode 100644 index 32e87be8..00000000 --- a/umap/static/umap/vendors/toolbar/leaflet.toolbar.js +++ /dev/null @@ -1 +0,0 @@ -!function(a,b,c){"use strict";L.Toolbar=(L.Layer||L.Class).extend({statics:{baseClass:"leaflet-toolbar"},includes:L.Mixin.Events,options:{className:"",filter:function(){return!0},actions:[]},initialize:function(a){L.setOptions(this,a),this._toolbar_type=this.constructor._toolbar_class_id},addTo:function(a){return this._arguments=[].slice.call(arguments),a.addLayer(this),this},onAdd:function(a){var b=a._toolbars[this._toolbar_type];0===this._calculateDepth()&&(b&&a.removeLayer(b),a._toolbars[this._toolbar_type]=this)},onRemove:function(a){0===this._calculateDepth()&&delete a._toolbars[this._toolbar_type]},appendToContainer:function(a){var b,c,d,e,f,g,h=this.constructor.baseClass+"-"+this._calculateDepth(),i=h+" "+this.options.className;for(this._container=a,this._ul=L.DomUtil.create("ul",i,a),this._disabledEvents=["click","mousemove","dblclick"],e=0,g=this._disabledEvents.length;g>e;e++)L.DomEvent.on(this._ul,this._disabledEvents[e],L.DomEvent.stopPropagation);for(d=0,f=this.options.actions.length;f>d;d++)b=this._getActionConstructor(this.options.actions[d]),c=new b,c._createIcon(this,this._ul,this._arguments)},_getActionConstructor:function(a){var b=this._arguments,c=this;return a.extend({initialize:function(){a.prototype.initialize.apply(this,b)},enable:function(b){c._active&&c._active.disable(),c._active=this,a.prototype.enable.call(this,b)}})},_hide:function(){this._ul.style.display="none"},_show:function(){this._ul.style.display="block"},_calculateDepth:function(){for(var a=0,b=this.parentToolbar;b;)a+=1,b=b.parentToolbar;return a}}),L.toolbar={};var d=0;L.Toolbar.extend=function(a){var b=L.extend({},a.statics,{_toolbar_class_id:d});return d+=1,L.extend(a,{statics:b}),L.Class.extend.call(this,a)},L.Map.addInitHook(function(){this._toolbars={}}),L.ToolbarAction=L.Handler.extend({statics:{baseClass:"leaflet-toolbar-icon"},options:{toolbarIcon:{html:"",className:"",tooltip:""},subToolbar:new L.Toolbar},initialize:function(a){var b=L.ToolbarAction.prototype.options.toolbarIcon;L.setOptions(this,a),this.options.toolbarIcon=L.extend({},b,this.options.toolbarIcon)},enable:function(a){a&&L.DomEvent.preventDefault(a),this._enabled||(this._enabled=!0,this.addHooks&&this.addHooks())},disable:function(){this._enabled&&(this._enabled=!1,this.removeHooks&&this.removeHooks())},_createIcon:function(a,b,c){var d=this.options.toolbarIcon;this.toolbar=a,this._icon=L.DomUtil.create("li","",b),this._link=L.DomUtil.create("a","",this._icon),this._link.innerHTML=d.html,this._link.setAttribute("href","#"),this._link.setAttribute("title",d.tooltip),L.DomUtil.addClass(this._link,this.constructor.baseClass),d.className&&L.DomUtil.addClass(this._link,d.className),L.DomEvent.on(this._link,"click",this.enable,this),this._addSubToolbar(a,this._icon,c)},_addSubToolbar:function(a,b,c){var d=this.options.subToolbar,e=this.addHooks,f=this.removeHooks;d.parentToolbar=a,d.options.actions.length>0&&(c=[].slice.call(c),c.push(this),d.addTo.apply(d,c),d.appendToContainer(b),this.addHooks=function(a){"function"==typeof e&&e.call(this,a),d._show()},this.removeHooks=function(a){"function"==typeof f&&f.call(this,a),d._hide()})}}),L.toolbarAction=function(a){return new L.ToolbarAction(a)},L.ToolbarAction.extendOptions=function(a){return this.extend({options:a})},L.Toolbar.Control=L.Toolbar.extend({statics:{baseClass:"leaflet-control-toolbar "+L.Toolbar.baseClass},initialize:function(a){L.Toolbar.prototype.initialize.call(this,a),this._control=new L.Control.Toolbar(this.options)},onAdd:function(a){this._control.addTo(a),L.Toolbar.prototype.onAdd.call(this,a),this.appendToContainer(this._control.getContainer())},onRemove:function(a){L.Toolbar.prototype.onRemove.call(this,a),this._control.remove?this._control.remove():this._control.removeFrom(a)}}),L.Control.Toolbar=L.Control.extend({onAdd:function(){return L.DomUtil.create("div","")}}),L.toolbar.control=function(a){return new L.Toolbar.Control(a)},L.Toolbar.Popup=L.Toolbar.extend({statics:{baseClass:"leaflet-popup-toolbar "+L.Toolbar.baseClass},options:{anchor:[0,0]},initialize:function(a,b){L.Toolbar.prototype.initialize.call(this,b),this._marker=new L.Marker(a,{icon:new L.DivIcon({className:this.options.className,iconAnchor:[0,0]})})},onAdd:function(a){this._map=a,this._marker.addTo(a),L.Toolbar.prototype.onAdd.call(this,a),this.appendToContainer(this._marker._icon),this._setStyles()},onRemove:function(a){a.removeLayer(this._marker),L.Toolbar.prototype.onRemove.call(this,a),delete this._map},setLatLng:function(a){return this._marker.setLatLng(a),this},_setStyles:function(){for(var a,b,d,e=this._container,f=this._ul,g=L.point(this.options.anchor),h=f.querySelectorAll(".leaflet-toolbar-icon"),i=[],j=0,k=0,l=h.length;l>k;k++)h[k].parentNode.parentNode===f&&(i.push(parseInt(L.DomUtil.getStyle(h[k],"height"),10)),j+=Math.ceil(parseFloat(L.DomUtil.getStyle(h[k],"width"))));f.style.width=j+"px",this._tipContainer=L.DomUtil.create("div","leaflet-toolbar-tip-container",e),this._tipContainer.style.width=j+"px",this._tip=L.DomUtil.create("div","leaflet-toolbar-tip",this._tipContainer),a=Math.max.apply(c,i),b=parseInt(L.DomUtil.getStyle(this._tip,"width"),10),d=new L.Point(j/2,a+.7071*b),e.style.marginLeft=g.x-d.x+"px",e.style.marginTop=g.y-d.y+"px"}}),L.toolbar.popup=function(a){return new L.Toolbar.Popup(a)}}(window,document); \ No newline at end of file diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html index 82514250..bdf96854 100644 --- a/umap/templates/umap/css.html +++ b/umap/templates/umap/css.html @@ -12,8 +12,6 @@ href="{% static 'umap/vendors/editinosm/Leaflet.EditInOSM.css' %}" /> - - diff --git a/umap/tests/integration/test_draw_polygon.py b/umap/tests/integration/test_draw_polygon.py index 1f846fc8..8fb45ef3 100644 --- a/umap/tests/integration/test_draw_polygon.py +++ b/umap/tests/integration/test_draw_polygon.py @@ -10,7 +10,7 @@ def test_draw_polygon(page, live_server, tilelayer): page.goto(f"{live_server.url}/en/map/new/") # Click on the Draw a polygon button on a new map. - create_path = page.locator(".umap-edit-bar ").get_by_title("Draw a polygon") + create_path = page.locator(".umap-edit-bar").get_by_title("Draw a polygon") create_path.click() # Check no polygon is present by default. @@ -180,7 +180,7 @@ def test_can_draw_hole(page, live_server, tilelayer): # First vertex of the hole will be created here map.click(position={"x": 180, "y": 120}) - page.get_by_role("link", name="Start a hole here").click() + page.get_by_role("button", name="Start a hole here").click() map.click(position={"x": 180, "y": 180}) map.click(position={"x": 120, "y": 180}) map.click(position={"x": 120, "y": 120}) @@ -475,7 +475,7 @@ def test_vertexmarker_not_shown_if_too_many(live_server, map, page, settings): 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() + page.get_by_role("button", name="Toggle edit mode (⇧+Click)").click() expect(page.locator(".umap-tooltip-container")).to_contain_text( "Please zoom in to edit the geometry" ) diff --git a/umap/tests/integration/test_draw_polyline.py b/umap/tests/integration/test_draw_polyline.py index d4f63dba..a81241af 100644 --- a/umap/tests/integration/test_draw_polyline.py +++ b/umap/tests/integration/test_draw_polyline.py @@ -329,11 +329,11 @@ def test_can_delete_shape_using_toolbar(live_server, page, tilelayer, settings): # Now split the line map.click(position={"x": 100, "y": 100}) - page.get_by_role("link", name="Split line").click() + page.get_by_role("button", name="Split line").click() # Delete part of it map.click(position={"x": 125, "y": 100}) - page.get_by_role("link", name="Delete this shape").click() + page.get_by_role("button", name="Delete this shape").click() data = save_and_get_json(page) assert len(data["features"]) == 1 assert data["features"][0]["geometry"]["type"] == "LineString" diff --git a/umap/tests/integration/test_edit_marker.py b/umap/tests/integration/test_edit_marker.py index 0f419bda..81d4f24d 100644 --- a/umap/tests/integration/test_edit_marker.py +++ b/umap/tests/integration/test_edit_marker.py @@ -78,8 +78,8 @@ def test_marker_style_should_have_precedence(live_server, openmap, page, bootstr def test_should_open_an_edit_toolbar_on_click(live_server, openmap, page, bootstrap): page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit") page.locator(".leaflet-marker-icon").click() - expect(page.get_by_role("link", name="Toggle edit mode")).to_be_visible() - expect(page.get_by_role("link", name="Delete this feature")).to_be_visible() + expect(page.get_by_role("button", name="Toggle edit mode")).to_be_visible() + expect(page.get_by_role("button", name="Delete this feature")).to_be_visible() def test_should_update_open_popup_on_edit(live_server, openmap, page, bootstrap): @@ -115,6 +115,6 @@ def test_should_follow_datalayer_style_when_changing_datalayer( expect(marker).to_have_css("background-color", "rgb(0, 139, 139)") # Change datalayer marker.click() - page.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() + page.get_by_role("button", name="Toggle edit mode (⇧+Click)").click() page.locator(".umap-field-datalayer select").select_option(label="other datalayer") expect(marker).to_have_css("background-color", "rgb(148, 0, 211)") diff --git a/umap/tests/integration/test_edit_polygon.py b/umap/tests/integration/test_edit_polygon.py index bbfb7daf..a711a79b 100644 --- a/umap/tests/integration/test_edit_polygon.py +++ b/umap/tests/integration/test_edit_polygon.py @@ -88,8 +88,8 @@ def test_marker_style_should_have_precedence(live_server, openmap, page, bootstr def test_should_open_an_edit_toolbar_on_click(live_server, openmap, page, bootstrap): page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit") page.locator("path").click() - expect(page.get_by_role("link", name="Toggle edit mode")).to_be_visible() - expect(page.get_by_role("link", name="Delete this feature")).to_be_visible() + expect(page.get_by_role("button", name="Toggle edit mode")).to_be_visible() + expect(page.get_by_role("button", name="Delete this feature")).to_be_visible() def test_can_remove_stroke(live_server, openmap, page, bootstrap): @@ -98,7 +98,7 @@ def test_can_remove_stroke(live_server, openmap, page, bootstrap): 1 ) page.locator("path").click() - page.get_by_role("link", name="Toggle edit mode").click() + page.get_by_role("button", name="Toggle edit mode").click() page.get_by_text("Shape properties").click() page.locator(".umap-field-stroke .define").first.click() page.locator(".umap-field-stroke .show-on-defined label").first.click() diff --git a/umap/tests/integration/test_websocket_sync.py b/umap/tests/integration/test_websocket_sync.py index 13b647b0..7e1e5156 100644 --- a/umap/tests/integration/test_websocket_sync.py +++ b/umap/tests/integration/test_websocket_sync.py @@ -59,7 +59,7 @@ def test_websocket_connection_can_sync_markers(new_page, asgi_live_server, tilel peerA.wait_for_timeout(300) peerB.locator(".leaflet-marker-icon").first.click() - peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() + peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click() expect(peerB.locator('input[name="name"]')).to_have_value("Synced name") a_first_marker = peerA.locator("div:nth-child(4) > div:nth-child(2)").first @@ -139,7 +139,7 @@ def test_websocket_connection_can_sync_polygons(context, asgi_live_server, tilel assert b_polygon_bbox_t1 == a_polygon_bbox_t1 b_polygon.click() - peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() + peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click() edited_vertex = peerB.locator("div:nth-child(6)").first edited_vertex.drag_to(b_map_el, target_position={"x": 233, "y": 126}) @@ -153,7 +153,7 @@ def test_websocket_connection_can_sync_polygons(context, asgi_live_server, tilel # Move the polygon on peer B and check it moved also on peer A b_polygon.click() - peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() + peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click() b_polygon.drag_to(b_map_el, target_position={"x": 400, "y": 400}) peerB.keyboard.press("Escape") @@ -343,7 +343,7 @@ def test_websocket_connection_can_sync_late_joining_peer( # Verify marker properties peerB.locator(".leaflet-marker-icon").first.click() - peerB.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() + peerB.get_by_role("button", name="Toggle edit mode (⇧+Click)").click() expect(peerB.locator('input[name="name"]')).to_have_value("First marker") # Verify polygon exists (we've already checked the count)