Mesh drag and drop conflict with JS scope GC

[mwpowellhtx]

Hello,

I am working on implementing drag and drop in my scene. I have a sphere being created successfully. But when I click on it (mouse down), I do not get the expected drag behavior.

I am basically working from the example and I can even reproduce the example in an "in situ" text fixture (i.e. Visual Studio hosted standalone HTML page). Both work equally well.

Next, I want to connect the drag and drop stuff with a jQuery "scene:created" trigger. This is potentially where things fall over. I do not get the pointer down event, for starters, that I think I should be getting.

I have verified that the trigger is indeed happening. Here is my on trigger event handler:

var sceneCreatedDragAndDropHandler = function(e, args) {

    var startingPos = null;
    var currentMesh = null;

    var s = args._scene;
    var c = args._canvas;
    var camera = s.getCameraByName("arc1");

    var getGroundPosition = function() {

        /* use a predicate to get position on the ground */
        var pi = s.pick(s.pointerX,
            s.pointerY,
            function(m) {
                return !(/^role-/.test(m.name));
            });

        return pi.hit ? pi.pickedPoint : null;
    }

    var onPointerDown = function(event) {

        if (event.button !== 0) {
            return;
        }

        /* check if we are under a mesh */
        var pi = s.pick(s.pointerX,
            s.pointerY,
            function(m) {
                return /^role-/.test(m.name);
            });

        if (pi.hit) {

            currentMesh = pi.pickedMesh;
            startingPos = getGroundPosition();

            if (startingPos) {
                /* we need to disconnect camera from canvas */
                setTimeout(function() { camera.detachControl(c); }, 0);
            }
        }
    }

    var onPointerUp = function() {

        if (startingPos) {
            camera.attachControl(c, true);
            startingPos = null;
        }
    }

    var onPointerMove = function() {

        if (!startingPos) {
            return;
        }

        var currentPos = getGroundPosition();

        if (!currentPos) {
            return;
        }

        var deltaPos = currentPos.subtract(startingPos);
        currentMesh.position.addInPlace(deltaPos);

        startingPos = currentPos;
    }

    c.addEventListener("pointerdown", onPointerDown, false);
    c.addEventListener("pointerup", onPointerUp, false);
    c.addEventListener("pointermove", onPointerMove, false);
};

I have confirmed all the other bits are working. Canvas, scene, etc, are all rendering okay.

The only thing I can figure is that somehow the scope is an issue, even though I am capturing the handler in a global variable, and that the JavaScript GC is collecting the guts of it.

If that's the case and it's a GC issue, I wonder what the best way to capture which elements would be. Things like the event handlers, positions, etc, off the cuff.

Suggestions?

[Dal]

There's probably something more obvious I am missing cos I am too tired to read properly now, but things to try:

- Make sure you have pep.js imported in the HTML and bind to its events. It handles all the drag and drop nicely.

- Try adding the event listeners to the window instead of the canvas.

[mwpowellhtx]

Perhaps I am the one that is missing something. Pep? This is jQuery, correct? What does that add that the example isn't already doing?

It is odd that "pointerdown", etc, is showing cannot resolve, so perhaps there is something to that, at least to pick up the reference.

However, in my HTML working boilerplate, I am not including anything differently than the example, yet the boilerplate works.

Other than that, tried the window thing, and no change.

[mwpowellhtx]

OKAY!

So I wondered what else I was missing, and it was the pep script, which apparently got included auto-magically when I pasted code into my HTML test fixture.

I like capturing the handlers and properties in a self-contained custom object, but all that is secondary to just including the pep script(s) in my jQuery bundles.

Thanks!

[Dal]

The playground imports Babylon and all its deps behind the scenes.

[mwpowellhtx]

13 hours ago, Dal said:

The playground imports Babylon and all its deps behind the scenes.

I see. Thank you. I spent a little time today packaging PEP for nuget. The guys at jquery probably aren't too happy about that, but I gave them first notice to pick it up or not (which they didn't). Anyhow, find it under jQuery.PEPJS.

For the most part it works great. There are a couple of "quirks", like the fact that it seems the scroll wheel now applies for the whole page, not just the canvas when the mouse over happens. Other than that, I can click on a mesh and "select" it, drag it around, and coordinate it with data in other parts of the JS environment. Good stuff.

Thanks again for the tips!

[mwpowellhtx]

On 5/4/2016 at 6:31 PM, Dal said:

There's probably something more obvious I am missing cos I am too tired to read properly now, but things to try:

- Make sure you have pep.js imported in the HTML and bind to its events. It handles all the drag and drop nicely.

- Try adding the event listeners to the window instead of the canvas.

@Dal This sounds like a stupid question, but do you have a simple playground example? For example I want to do something like this?

$(myMesh).pep({ grid: [16, 16], shouldEase: true });

If I can just do that, and somehow respond to the events, that would be better than the "manual" methods, even though they're "working".

I'll have a look around the repository as well to see if I can piece anything together from there.

Thanks!

[Dal]

That's beyond my level of knowledge of pep I'm afraid, but it looks like you are thinking in 2d and trying to move DOM elements around... pep is needed to bind Babylon to the input events but beyond that you should handle everything else using the Babylon API and the 3D canvas. If you want to lay things out in a grid then create meshes and set their positions. If you want them to ease in, then move them a little bit each frame in the render loop.