Pixi.js: Double click event

[dorsharon]

Is there any support for a double click event?
Alternatively, can someone help me how to implement such an event on a PIXI.Graphics?

[djmisterjon]

i don't think so , but may i think this should work.
It a barbar example to start, maybe is there more good way.

    pointerdown_global(e){
        if(this._clicked){
            console.log('double click in 600ms detected, you can emit or call method related!');
        }
        this._clicked = false;
        clearTimeout(this.__double);

    };

    pointerup_global(e){
        this._clicked = true;
        this.__double = setTimeout(() => { this._clicked = false; }, 600); // time for double click detection
    };

this will maybe interest you:
https://github.com/pixijs/pixi.js/pull/1462

[mofnire]

This is something like what I am doing:

https://www.pixiplayground.com/#/edit/UvM_wgJh0686y7Pdatx8C

[themoonrat]

There's no plans to add double click natively into PixiJS, but there's a couple of good solutions here, so closing :)

[HusakYurii]

@dorsharon , @englercj Hey! Although this thread is closed, I have came up with this solution. Since PIXI 5 has been split into components, I added a feature which uses the same flow that interaction manager has. Add this code to a file, import it in your index.js and it should work fine

import { InteractionManager, InteractionTrackingData } from '@pixi/interaction';

const superAddEvents = InteractionManager.prototype.addEvents;
const superRemoveEvents = InteractionManager.prototype.removeEvents;

/**
 * To add DOM native 'dblclick' event to the manager
 * @private  
 * @extends
 */
InteractionManager.prototype.addEvents = function () {
    superAddEvents.call(this);

    this.onDoubleClick = this.onDoubleClick.bind(this);
    this.processDoubleClick = this.processDoubleClick.bind(this);

    if (this.interactionDOMElement) {
        this.interactionDOMElement.addEventListener('dblclick', this.onDoubleClick, true);
    }
};

/**
 * @private
 * @extends
 */
InteractionManager.prototype.removeEvents = function () {
    if (this.interactionDOMElement) {
        this.interactionDOMElement.removeEventListener('dblclick', this.onDoubleClick, true);
    }
    superRemoveEvents.call(this);
};

/**
 * Processes the result of the double click check and dispatches the event
 *
 * @private
 * @param {PIXI.interaction.InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
 * @param {PIXI.Container|PIXI.Sprite|PIXI.TilingSprite} displayObject - The display object that was tested
 * @param {boolean} hit - the result of the hit test on the display object
 */
InteractionManager.prototype.processDoubleClick = function (interactionEvent, displayObject, hit) {
    var data = interactionEvent.data;
    var id = interactionEvent.data.identifier;

    if (hit) {
        if (!displayObject.trackedPointers[id]) {
            displayObject.trackedPointers[id] = new InteractionTrackingData(id);
        }
        if (data.pointerType === 'mouse') {
            this.dispatchEvent(displayObject, 'dblclick', interactionEvent);
        }
    }
};

/**
 * @param {PointerEvent} originalEvent
 */
InteractionManager.prototype.onDoubleClick = function (originalEvent) {
    // if we support touch events, then only use those for touch events, not pointer events
    if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') {
        return;
    }

    const events = this.normalizeToPointerData(originalEvent);

    if (this.autoPreventDefault && events[0].isNormalized) {
        const cancelable = originalEvent.cancelable || !('cancelable' in originalEvent);

        if (cancelable) {
            originalEvent.preventDefault();
        }
    }

    const eventLen = events.length;

    for (let i = 0; i < eventLen; i++) {
        const event = events[i];

        const interactionData = this.getInteractionDataForPointerId(event);

        const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);

        interactionEvent.data.originalEvent = originalEvent;

        this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processDoubleClick, true);

        this.emit('dblclick', interactionEvent);
    }
};

[fakob]

Thanks @HusakYurii, your solution works great!

[HusakYurii]

@fakob , nice to hear that, enjoy!
It can be a feature like the others that PIXI has (@englercj ?)
Have not tried to add something like this for double touch yet. It would be more difficult, I think...

[fakob]

That is definitely a feature I think.
@HusakYurii If you ever have some time to spare, adding double touch in an as easy to implement way would be fantastic :-)

[HusakYurii]

@fakob if I add the feature for double touch, it will be here
https://github.com/HusakYurii/pixi-additional-events

[fakob]

Great, thanks @HusakYurii.
I will be watching the repo.

[HusakYurii]

@fakob hey!
I updated the repo, added a feature for double tap event.
I have run a small test and it seems to work. Would appreciate if you test it as well,
Thanks!

[englercj]

I don't generally work on this project anymore, @bigtimebuddy and @themoonrat might be able to help though.

[fakob]

Thanks @HusakYurii , that is great. I am currently abroad, but will test it as soon as I am back.