[SOLVED] Inner HTML mouse/touch events

Help & Support
1

Hi everyone,
I’m trying to capture mouse/pointer events from a div overlayed in playcanvas. The div contains a small html with a svg inside and i’d need pan/zoom functionality.
I’m currently initializing it as such:

    var style=document.createElement('style');
    document.head.appendChild(style);
    style.innerHTML=this.css.resource;
    this.div = document.createElement('div');
    this.div.id='minimap';
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    document.body.appendChild(this.div);
    this.bindEvents();

where .css and .htm are assets.
on .bindEvents(), I just register some event listeners, but they seem to … randomly work:


     htmlMap.minimap_container.addEventListener("dblclick", () => {
         event.preventDefault();
        htmlMap.instance.panTo({
            originX: 0,
            originY: 0,
            scale: 1,
        });
    });
    
     htmlMap.minimap_container.addEventListener('mousedown', function(event){
          htmlMap.dragging=true;
     });
     htmlMap.minimap_container.addEventListener('pointerdown', function(event){
          htmlMap.dragging=true;
                  console.log(htmlMap.dragging);
     });
    
    htmlMap.minimap_container.addEventListener('mouseup', function(event){
          htmlMap.dragging=false;
     });
    
     htmlMap.minimap_container.addEventListener('mousemove', function(event){
       
        if(htmlMap.dragging){
            htmlMap.instance.panBy({
                originX: event.movementX,
                originY: event.movementY
            });
        }
     });

mousemove somewhat seems to work but it jumps around weirdly, only when entering the div.
mousedown, pointerdown, mouseup, dblclick and wheel don’t seem to trigger.
Anything special I’d need to setup so these events get forwarded to the small div?

2

Fixed it by marking it in css with

pointer-events:none;
Isn’t that a bit counter-intuitive? shouldn’t pointer-events:auto let all the events go through playcanvas?

3

Is the div in front of the PlayCanvas canvas?

4

I think soo… no sure
I’m setting it up from a script on an entity in initialize as such:

HtmlMinimap.prototype.initialize=function(){

    var style=document.createElement('style');
    document.head.appendChild(style);
    style.innerHTML=this.css.resource;
    this.div = document.createElement('div');
    this.div.id='minimap';
...
}

and this.html is something simple like

<div class='svg' id='minimap'>
    <div id='minimap-background' class='minimap-background'>
        <object id="minimap_svg" data="svg link ...." type="image/svg+xml"></object>
    </div>
</div>