Error with Interaction/Draggability?

[Shadowstep33]

Hi, I have a feeling something about one of my more recent menus is affecting the previous ones. First off, here is the stack trace:

Uncaught TypeError: Cannot read property 'x' of undefined
getAbsPos   @   utils.ts:33
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
GUIObject.mouseInObj    @   guiobject.ts:296
(anonymous function)    @   guisprite.ts:227
emit    @   pixi-dds.js:3760
_this.mousedown._this.touchstart    @   guiobject.ts:85
InteractionManager.dispatchEvent    @   pixi-dds.js:24257
InteractionManager.processMouseDown @   pixi-dds.js:24402
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:76
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
InteractionManager.onMouseDown  @   pixi-dds.js:24383

My first menu (the one where dragging on the list buttons) goes something like this:

    var playerBag = {
        id: 'playerBag',
        component: 'Window',
        header: { position: { x: 0, y: 0 }, height: 40, text: 'Inventory' },
        draggable: true,
        position: { x: 0, y: 0 },
        width: renderer.width * 0.16,
        height: renderer.height * 0.45,
        layout: [1, 3],
        children: [
            {
                id: 'playerBagList',
                component: 'List',
                position: {x: 0, y: 30},
                width: renderer.width * 0.16,
                height: (renderer.height * 0.45) - 40,
                position: {x: 0, y: 40 },
                children: [],
                layout: [3,3]
            }
        ]
    }

    //Iterate through all Items and Materials
    for(var i in p.livesin){
        if(Progera.prototype.scanPredecessors(['item','material'],p.livesin[i])){
            playerBag.children[0].children.push({
                id: i,
                component: 'Button',
                position: 'center',
                draggable: true,
                text: typeof p.livesin[i].opts.val == "undefined" ? i : i + ': x'+p.livesin[i].opts.val,
                width: renderer.width * 0.05,
                height: 50
            });     

        }
    }
    var t = EZGUI.create(playerBag, 'metalworks');

The Menu that seems to be the offending problem:

    var playerBag = {
        id: 'playerBuildables',
        component: 'Window',
        header: { position: { x: 0, y: 0 }, height: 40, text: 'Buildables' },
        draggable: true,
        position: { x: renderer.width - (renderer.width * 0.26), y: renderer.height - (renderer.height * 0.2) },
        width: renderer.width * 0.26,
        height: renderer.height * 0.15,
        layout: [1, 1],
        children: [
            {
                id: 'playerBuildablesList',
                component: 'List',
                position: {x: 0, y: 0},
                width: renderer.width * 0.26,
                height: (renderer.height * 0.15) - 40,
                position: {x: 0, y: 40 },
                children: [],
                layout: [4,1]
            }
        ]
    }

    //Iterate through all Items and Materials
    for(var i in p.livesin){
        if(Progera.prototype.scanPredecessors(['structure'],p.livesin[i])){
            playerBag.children[0].children.push({
                id: i,
                component: 'Button',
                position: 'center',
                draggable: true,
                text: typeof p.livesin[i].opts.val == "undefined" ? p.livesin[i].scan.id : i + ': x'+p.livesin[i].opts.val,
                width: renderer.width * 0.05,
                height: 50
            });     

        }
    }

    var t = EZGUI.create(playerBag, 'metalworks');

I use the same way of adding handlers post-facto:

    for(var c in EZGUI.components.playerBuildablesList.children[2].children){

        if(!(EZGUI.components.playerBuildablesList.children[2].children[c] instanceof EZGUI.Component.Button))
            continue;

        var id = EZGUI.components.playerBuildablesList.children[2].children[c].guiID;

        console.log("Handler on "+id);
        EZGUI.components[id].on('mouseup',function(data){
            data.stopPropagation();
            console.log(data);
            var $that = this;

            console.log("Set "+$that.guiID+" as buildable");
            craftItem({item: $that.guiID, phase: "start"})
        }); 
    }

Although obviously, the components getting iterated is specific to the menu. Now, perhaps @ivanpopelyshev can shed some light as to why InteractionPatch is throwing these errors. I'm not sure if he is involved with the development of this library or not. When I don't run the code for the second menu, everything works as expected. I am going to look into this myself as well but figured I'd put this here for anyone else to take a look at also.

[ivanpopelyshev]

Im not involved but I can look :) You use my patch for interaction, right?

[Shadowstep33]

correct @Ivan thanks!

[Shadowstep33]

A precursory glance suggests

    export function getAbsPos(obj, from = null) {
        //if (EZGUI.Compatibility.PIXIVersion == 3) {
            if (from == null) from = { x: 0, y: 0 };
            from.x += obj.position.x;
            from.y += obj.position.y;
            if (obj.parent != null) return getAbsPos(obj.parent, from);
            return from;
        //}
        //else {
            //return { x: obj.worldTransform.tx, y: obj.worldTransform.ty };
        //}

    }

var from as "undefined" is not being handled; maybe InteractionPatch needs to pass from as null?

\ Or maybe I'm just dumb and passing an undefined var will trigger from = null

[Shadowstep33]

Possible additional info: Interaction such as mouseup still works on the second menu. I don't have a mouseup trigger on the first menu's buttons, so it could be just drag is getting broken an mouseup still works.

[ivanpopelyshev]

I have an idea: If you are using toLocal() or toGlobal() in object and it fails somewhere (please look at other errors), then root element will have incorrect parent, "_tempDisplayObjectParent" which has no position at all. May be actually adding some temporary (0,0) position to _tempDisplayObjectParent will help :)

Look at https://github.com/pixijs/pixi.js/blob/master/src/core/display/DisplayObject.js , please

[ivanpopelyshev]

Try adding some "position : {x:0, y:0}" in that variables in your version of pixi.js. If it works then we have succeeded, but we have to find why the heck temp variable is used there.

[Shadowstep33]

Seems to have worked my man :) Thanks!

[ivanpopelyshev]

Can you also test latest version of PIXI? I believe that they had fixed that.