Layer Re-ordering is not working within Web component.

[venkatesh-brightly]

I have a web component 'my-map' that is rendering openlayer map. I am using LayerShop Class for layer switcher.

Problem:
When I am trying to re-order the layers, I am not able to drop the layer on top or bottom.

It's working fine outside web component. But not inside web component.

[Viglino]

Do you have an example online to test.
What sort of component are you using ?

[venkatesh-brightly]

I am using 'lit' for creating web component.

Please check this link: https://codesandbox.io/p/sandbox/pedantic-leaf-hf2z7d?file=%2Fsrc%2Findex.js

While debugging, I figured out that in move(e) function, e.target and document.elementFromPoint is actually returning the web component instead of the actual node which is preventing it from dropping.

I fixed it by updating the below code for now in my local:

var li
if (!e.touches) {
  li = e.target
  /**
   *  Get the HTML node within web component on click drag
   */
  if(e.target.shadowRoot){
    li = e.composedPath()[0]
  }
} else {
  li = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
  /**
   *  Get actual HTML node within web component on touch drag
   */
  while(li.shadowRoot){
    li = li.shadowRoot.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)
  }
}

This code can be found in file: LayerSwitcher.js:594

[venkatesh-brightly]

I hope this might help.

[Viglino]

I hope this might help.

I'll try to fix it asap

[venkatesh-brightly]

When will these changes published on npm?

[Viglino]

Just published ol-ext@4.0.18