fix: simpler way to deal with positionning contextmenu

Use pageX/Y from the begginning instead of recomputing it later.
This commit is contained in:
Yohan Boniface 2024-10-05 10:38:51 +02:00
parent cba0af96f6
commit c4b80afb15
5 changed files with 9 additions and 12 deletions

View file

@ -89,7 +89,7 @@ const FeatureMixin = {
const items = this._map.getContextMenuItems(event) const items = this._map.getContextMenuItems(event)
items.push('-', ...this.feature.getContextMenuItems(event)) items.push('-', ...this.feature.getContextMenuItems(event))
this._map.contextmenu.open( this._map.contextmenu.open(
[event.originalEvent.clientX, event.originalEvent.clientY], [event.originalEvent.pageX, event.originalEvent.pageY],
items items
) )
}, },

View file

@ -64,7 +64,7 @@ export default class TableEditor extends WithTemplate {
action: () => this.deleteProperty(property), action: () => this.deleteProperty(property),
}) })
} }
this.contextmenu.open([event.clientX, event.clientY], actions) this.contextmenu.open([event.pageX, event.pageY], actions)
} }
renderHeaders() { renderHeaders() {

View file

@ -63,18 +63,16 @@ export class Positioned {
else this.container.style.bottom = 'initial' else this.container.style.bottom = 'initial'
} }
computePosition([x, y], parent) { computePosition([x, y]) {
let left let left
let top let top
x = x - parent.getBoundingClientRect().left if (x < window.offsetWidth / 2) {
y = y - parent.getBoundingClientRect().top
if (x < parent.offsetWidth / 2) {
left = x left = x
} else { } else {
left = x - this.container.offsetWidth left = x - this.container.offsetWidth
} }
if (y < parent.offsetHeight / 2) { if (y < window.offsetHeight / 2) {
top = Math.min(y, parent.offsetHeight - this.container.offsetHeight) top = Math.min(y, window.offsetHeight - this.container.offsetHeight)
} else { } else {
top = Math.max(0, y - this.container.offsetHeight) top = Math.max(0, y - this.container.offsetHeight)
} }

View file

@ -36,12 +36,11 @@ export default class ContextMenu extends Positioned {
this.container.appendChild(li) this.container.appendChild(li)
} }
} }
const parent = document.elementFromPoint(left, top).closest('.leaflet-container') document.body.appendChild(this.container)
parent.appendChild(this.container)
if (this.options.fixed) { if (this.options.fixed) {
this.setPosition({ left, top }) this.setPosition({ left, top })
} else { } else {
this.computePosition([left, top], parent) this.computePosition([left, top])
} }
this.container.querySelector('li > *').focus() this.container.querySelector('li > *').focus()
this.container.addEventListener( this.container.addEventListener(

View file

@ -1773,7 +1773,7 @@ U.Map = L.Map.extend({
onContextMenu: function (event) { onContextMenu: function (event) {
const items = this.getContextMenuItems(event) const items = this.getContextMenuItems(event)
this.contextmenu.open( this.contextmenu.open(
[event.originalEvent.clientX, event.originalEvent.clientY], [event.originalEvent.pageX, event.originalEvent.pageY],
items items
) )
}, },