Comments (16)
No support just yet, will need to add that to the interaction manager π
from pixijs.
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.
Please nte that the code example I changed slightly, decided to put the original event in the InteractionData object.
from pixijs.
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.
@misters Do you have a live example, or simple code example I can look at? Thanks!
from pixijs.
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.
@misters That should be fine, thanks for the extra info. That is a really strange one!
from pixijs.
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.
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.
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.
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.
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.
+1
Having a different callback for left/right click would be really nice!
from pixijs.
So it is for the purpose of optimization. I could see that, feel free to throw in a PR.
from pixijs.
Thanks!
from pixijs.
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)
- Bug: Graphics scaling and adding filters, display abnormal
- Bug:
- Bug: Unexpected behaviour of alpha on Graphics HOT 1
- Bug: [v8 regression] cannot do many `moveTo`/`lineTo` HOT 13
- Bug: API Documentation URLs Leading to 403 Errors HOT 3
- Bug: BitmapText color
- Bug: app.renderer.extract.base64 doesn't apply tint HOT 1
- Feature Request: Allow GraphicsContext.poly to accept PointData[] HOT 1
- Bug: Assigning filters after initial assignment is busted without invalidating
- Bug [v8 migration]: utils.clearTextureCache() no longer exist HOT 2
- Bug: [v8 regression] Graphics Mask doesn't always update when clearing and redrawing HOT 2
- Feature Request: Support for bundle tree on AssetsManifest
- Virus detected when I try to download PixiJS HOT 2
- Bug: [v8] Missing information on Migration guide for v8 or in the Blog post of v8 HOT 3
- Bug: [v8] Rollup export build error after upgrade to v8 - working on v7 HOT 4
- Bug: WEBGL: INVALID_VALUE: shaderSource: string not ASCII (Older chrome version) HOT 6
- Bug: BaseRenderTexture no longer exists in v8 HOT 1
- Bug: Graphics with only strokes that don't have a closePath, but an event is fired where a closePath would have been
- Bug: BindGroup setResource called with null HOT 2
- Bug: Reloading an Animated Sprite breaks rendering HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixijs.