Setting up event listeners from a string array (using PIXI.js)

Question

Setting up event listeners from a string array (using PIXI.js)

Hey there! I've encountered a bit of an interesting challenge that could easily be resolved by duplicating the code, but where's the fun in that? This project is more of an experiment for me, just to prove that I can do it. However, the idea has been nagging at me since its inception.

The Fun Project

Just for kicks, I decided to convert an ActionScript 3 text-based game engine into TypeScript and JavaScript using PixiJS. Currently, I have 20213 errors popping up while running tsc, so I could postpone this task for later. Nonetheless, I started working on the Button class, defined as a subclass of MovieClip. I researched PIXI buttons, which seemed straightforward enough. All I needed to do was add similar lines of code within the button's constructor:

export class Button extends PIXI.Sprite {
    private _callback : Function;
    private _height : number;
    private _width : number;
    public get callback() : Function { return this._callback; }
    public set callback(fn : Function) {this._callback = fn; }
    public get height() : number { return this._height; }
    public set height(h : number) {this._height = h; }
    public get width() : number {return this._width; }
    public set width(w : number) {this._width = w; }
    public constructor(width = 180, height = 90, callback: Function = null){
        super(new PIXI.Texture(new PIXI.BaseTexture(GLOBAL.BTN_BACK, PIXI.SCALE_MODES.NEAREST)));
        this.callback = callback;
        this.width = width;
        this.height = height;
        this.buttonMode = true;
        this.interactive = true;
        this.anchor.set(0.5);
        this.on('mousedown', this.callback)
            .on('touchstart', this.callback);
    }
}

This simplified version differs slightly from the one on Codepen, which utilizes a Container and a private _sprite field instead. Regardless, the essence remains the same.

The Challenge

The issue arises when attempting the following on Codepen:

// assign `this.callback` to each of the following events:
let that = this;
['click','mousedown','touchstart'].map(evt => that.on(evt, that.callback});

I aimed to achieve this with a simple call passed into their constructors elsewhere:

for (let n = 0; n < 5; ++n){
    btnArray.push(new Button(16, 16, () => console.info('You pushed button %d', n)));
}

However, nothing seems to be triggering, even when checking the Chrome Console. I even debugged the ColorMatrixFilter mentioned earlier to ensure the issue isn't related to console.info. As of now, I'm perplexed about where the problem lies. I initially thought of creating a GLOBAL key to iterate through for the events, but it doesn't seem to be functioning correctly.

The Queries

Is my approach feasible, albeit unconventional? Could there be a security feature hindering it, or am I missing something crucial?
Do I really need to stress over setting multiple event handlers, or would listening solely to 'click' suffice?

javascript typescript callback pixi.js

Answer 1

Answer №1

When executing an arrow function like the event map, the context of this is not defined. Therefore, any code referencing this will retrieve the current value, including functions called within the map.

You can update your event map with the following:

['click', 'mousedown', 'touchstart'].map(function(evt) { that.on(evt, that.callback} } );

Here's a demonstration:

function Named(x) {
    this.name = x;
}
var foo = new Named("foo");
var bar = new Named("bar");

var showFunc = function show() {
    // The context here is dependent on 'this'
    console.log(this.name);
}

var showArrow;
// The context here is the window
showArrow = () => console.log(this.name);

var fooShowArrow;
(function() {
    // The context here is 'foo'
    that = this;
    fooShowArrow = () => console.log(that.name);
}).apply(foo);

var example = function(func) {
    // For demo purposes, at this point, 'this' will always be 'bar'
    func.apply(this, [ "arbitrary value" ]);
}

// Explicitly setting the current "this" to 'bar' for the execution of these functions
example.apply(bar, [showFunc]);  // works
example.apply(bar, [showArrow]);  // fails, 'this' is still the window
example.apply(bar, [fooShowArrow]);   // fails, 'this' is still 'foo'

Answer 2

When executing an arrow function like the event map, the context of this is not defined. Therefore, any code referencing this will retrieve the current value, including functions called within the map.

You can update your event map with the following:

['click', 'mousedown', 'touchstart'].map(function(evt) { that.on(evt, that.callback} } );

Here's a demonstration:

function Named(x) {
    this.name = x;
}
var foo = new Named("foo");
var bar = new Named("bar");

var showFunc = function show() {
    // The context here is dependent on 'this'
    console.log(this.name);
}

var showArrow;
// The context here is the window
showArrow = () => console.log(this.name);

var fooShowArrow;
(function() {
    // The context here is 'foo'
    that = this;
    fooShowArrow = () => console.log(that.name);
}).apply(foo);

var example = function(func) {
    // For demo purposes, at this point, 'this' will always be 'bar'
    func.apply(this, [ "arbitrary value" ]);
}

// Explicitly setting the current "this" to 'bar' for the execution of these functions
example.apply(bar, [showFunc]);  // works
example.apply(bar, [showArrow]);  // fails, 'this' is still the window
example.apply(bar, [fooShowArrow]);   // fails, 'this' is still 'foo'

Setting up event listeners from a string array (using PIXI.js)

The Fun Project

The Challenge

The Queries

Answer №1

Similar questions

Ways to confirm the actual openness of Express app's connection to MongoDB?

populate vueJS table with data

Ways to reduce lag while executing a for loop

I encounter obstacles when trying to execute various tasks through npm, such as downloading packages

Angular is failing to retrieve data from FS.readFile using promises

I successfully converted a d3 chart to a base64 image format and now I am looking to share it on Facebook using either client-side JavaScript or Angular

React-onclickoutside does not function properly within an iframe

Angular 6 Subscription Service Does Not Trigger Data Sharing Events

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

Tips for handling the accent mark (diacritic mark)

How to resolve TypeScript error TS2322 when a function returns an interface

TypeScript class that utilizes internal functions to implement another class

Is it possible for a Vue component to contain both data and props simultaneously?

What is the best way to calculate the number of days that have passed since a certain

How to use Express Validator to validate both email and username within a single field?

Exploring the foundations of web development with html and stylus

Having an issue with utilizing the useState hook in ReactJS for implementing pagination functionality

What is causing ngResource to change the saved object to something like "g {0: "O", 1: "K", ..} once it receives a response?

Updating a div's border using JavaScript

Adding a unique key to every element within a JavaScript array