Giter VIP home page Giter VIP logo

Comments (16)

GoodBoyDigital avatar GoodBoyDigital commented on March 28, 2024

No support just yet, will need to add that to the interaction manager πŸ‘

from pixijs.

englercj avatar englercj commented on March 28, 2024

Honestly I think the best way to do this would be to pass along event information for mouse events. Then you can do it properly on mousedown by checking event.which for which mouse button. As for double-click, that is just 2 click events happening quickly. You can track them and do a double click action if the time between is short enough.

Something like:

var lastClick = 0,
    space = 350;

sprite.click = function(data) {
    var now = Date.now(),
        diff = now - lastClick;

    event = data.originalEvent;

    if(event.which === 3 || event.button === 2) {
        //this was a right click;
    } else if(lastClick && (diff < space)) {
        lastClick = 0; //reset time

        //this was a double click
    } else {
        lastClick = now; //update last click time

        //this was a regular click
    }

};

I'll see if I can't get something going this weekend on this.

from pixijs.

englercj avatar englercj commented on March 28, 2024

Please nte that the code example I changed slightly, decided to put the original event in the InteractionData object.

from pixijs.

JotFX avatar JotFX commented on March 28, 2024

The original event does not work for me in Chrome (Version 32.0.1700.102 m). The "button" and "which" parameters are always 0. When I attach a simple listener like this it works:

$("canvas")[0].onmousedown = function(e){ if (e.button == 2) console.log("right"); };

from pixijs.

englercj avatar englercj commented on March 28, 2024

@misters Do you have a live example, or simple code example I can look at? Thanks!

from pixijs.

JotFX avatar JotFX commented on March 28, 2024

I will see if I can work out an example tomorrow.
Just to give you some more info: I'm using typescript and I am extending "PIXI.TileableSprite". I attach listeners to all available events (like in the interactive example on the pixi page). The right click gets fired, but just the button parameter is not correct.
Are you fine with some typescript?

from pixijs.

englercj avatar englercj commented on March 28, 2024

@misters That should be fine, thanks for the extra info. That is a really strange one!

from pixijs.

owenconti avatar owenconti commented on March 28, 2024

Has there been any solution to the e.which, e.button always being 0? They are still always 0 for me as well. Also, the "type" is also mousemove, even when I right click.

from pixijs.

englercj avatar englercj commented on March 28, 2024

I'm not able to reproduce this, so I will need to see some code like I mentioned before. Using the following it works fine:

// bind native event on the canvas
document.querySelector('body > canvas').addEventListener('mousedown', function(e) { console.log('native', e.button, e); }, false);

// bind a mousedown to the stage
stage.mousedown = function(e) { console.log('stage', e.originalEvent.button, e.originalEvent); };

The output I get from a left-click is:

stage 0 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}
native 0 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}

And from a right-click is:

stage 2 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}
native 2 MouseEvent {dataTransfer: null, toElement: canvas, fromElement: null, y: 321, x: 833…}

from pixijs.

 avatar commented on March 28, 2024

Is there any reason why this is not in the main PIXI? (the right click differentiation)

I ask because I was planning to add it, and maybe there were complications that I couldn't see and maybe end up losing a lot of time.

Thanks

from pixijs.

englercj avatar englercj commented on March 28, 2024

It is supported by the native browser what are we going to do to make it easier than what the native browser provides?

from pixijs.

 avatar commented on March 28, 2024

I meant, right and left click over an image.

For what I know, the browser identifies clicks over the canvas only. That is why PIXI does a collision test with every interactive image. This:

for (var i = 0; i < length; i++) {
    var item = this.interactiveItems[i];

    if (item.mousedown || item.click) {
        item.__mouseIsDown = true;
        item.__hit = this.hitTest(item, this.mouse);

        if (item.__hit) {
            //call the function!
            if (item.mousedown)item.mousedown(this.mouse);
            item.__isDown = true;

            // just the one!
            if (!item.interactiveChildren)break;
        }
    }
}

There is no button distinction, so all collisions will be checked even if that is not the button you wanted to listen to.

My idea was doing something like this:

var event = this.mouse.originalEvent;
var isRightButton = event.button === 2 || event.which === 3;

And then testing for different buttons in a similar way to the original code.

    if ( !isRightButton && (item.mousedown || item.click) ) {
        //Code for the left click, same code as the original
    } 
    else if ( isRightButton && (item.rightdown || item.rightclick) ) {
        //Right click code
        item.__IsRightDown = true;
        item.__hit = this.hitTest(item, this.mouse);

        if (item.__hit) {
            //call the function!
            if (item.rightdown)item.rightdown(this.mouse);
            item.__isRightDown = true;

            // just the one!
            if (!item.interactiveChildren)break;
        }
    }

The benefits of this are:

Clearer and cleaner code for the user. Having a function for each click and not needing extra logic.
Faster execution when game is heavy based on left or right clicks with lots of interactive elements.

from pixijs.

tleunen avatar tleunen commented on March 28, 2024

+1
Having a different callback for left/right click would be really nice!

from pixijs.

englercj avatar englercj commented on March 28, 2024

So it is for the purpose of optimization. I could see that, feel free to throw in a PR.

from pixijs.

 avatar commented on March 28, 2024

Thanks!

from pixijs.

lock avatar lock commented on March 28, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

from pixijs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.