JSFiddle - React, Tailwind, and code Playground

by georgie

HTML

<script src="https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js"></script>
<div class='canvas-wrapper'>
    <div id='canvas-holder'>
    </div>
</div>

    <div class='bug-description'>
        <p>Two problems: <br>
            1. Clicking is not blocked, so that an underlying element gets triggered,
            even if an object on top already consumed the click. It's shouldn't be necessary to
            stop the propagation manually as this is a behaviour someone would expect I guess?<br>
            2. Click and drag on top of another target. You will trigger a mouseup on that target which wasn't under the mouse during initiation.
         </p>
            Reproducing:<br>
            1. Click on the rect in the middle (which is a small zone where both larger rects are overlapping)
            You get two outputs. One from each rectangle.
            2. Click on the yellow rect, hold and go down to the blueish one. Release. You will get the message
            pixi 2 triggered. Which was dispatched from the blueish rect. This is not a correct mouseup behaviour.

        <textarea id="log" rows="10" cols="50">Output:</textarea>
    </div>

CSS

.bug-description{
    margin-left: 310px;
}
#canvas-wrapper{
    position: relative;
}
#html-trigger,
#canvas-holder{
   position:absolute;
   left:0;
   top:0;

}

#html-trigger{
    display:block;
    left: 50px;
   width:250px;
   height:250px;
   background-color:red;
}

JavaScript

var output = document.getElementById('log');

var renderer = PIXI.autoDetectRenderer(250, 250);
var el = document.getElementById('canvas-holder');
el.appendChild(renderer.view);

var stage = new PIXI.Container();

var pixiRect = new PIXI.Graphics();
pixiRect.width = 250;
pixiRect.height = 150;

pixiRect.beginFill(0xffff00);
pixiRect.drawRect(0,0,250,150);
pixiRect.interactive = true;
pixiRect.mouseup = function(event){
    console.log('pixi triggered', event);
    output.value += '\npixi triggered';
}
stage.addChild(pixiRect);

var pixiRect2 = new PIXI.Graphics();
pixiRect2.y = 125;
pixiRect2.width = 250;
pixiRect2.height = 150;
pixiRect2.beginFill(0x00ffff);
pixiRect2.drawRect(0,0,250,150);
pixiRect2.alpha = 0.9;
pixiRect2.interactive = true;

pixiRect2.mouseup = function(event){
    console.log('pixi 2 triggered', event);
    output.value += '\npixi 2 triggered';
}
stage.addChild(pixiRect2);

requestAnimationFrame(animate);

function animate() {
	renderer.render(stage);   
  	requestAnimationFrame(animate);
}