EaselJS - dragging children of scaled parent

Question

NOTE: ** This is now resolved. See the 'FIX' in my answer below. Feel free to inject any further knowledge as you see fit.

First, I have been studying and googling the localToGlobal, localToLocal, and globalToLocal, but I am just not understanding these methods enough to accomplish what I am trying to achieve - a drag of items in a scaled parent.

I have a container which contains some graphical nodes. The container's scaleX and scaleY are at 0.5 (or any other arbitrary number).

When dragging the nodes, they need to move, within the scaled parent container, inline with the e.mouseX/Y (which seems to be the same as Stage.mousX/Y).

Below are some jsfiddles to demonstrate

No Scale - works fine wih standard drag/drop code: http://jsfiddle.net/MZ6LE/1/

Scaled - fails with standard drag/drop code: http://jsfiddle.net/MZ6LE/3/

As you can see with the last fiddle, the 'node' doesn't stay 'locked' to the user's mouse action.

I feel that I need to translate the global coordinates for the node in its scaled parent. Still, I don't see how setting the node's x/y to the event's stageX and stageY works when there is no scaling of the elements.

With no scaling, the node is still within a parent container - not the main stage - and should have coordinates relative to its parent. So, if the parent is offset by 50, and the node starts at 0, 0, within its parent, the global stageX/Y properties should not represent the x/y of the node without some sort of translation.

How does this work out of the box, as shown in the code below, and how can it be adjusted for dragging elements within a parent that is scaled?

function handleClick(event) {
    node.offset = {'x' : node.x - event.stageX, 'y' : node.y - event.stageY};
}

function handleMove(event) {
    node.x = event.stageX + node.offset.x;
    node.y = event.stageY + node.offset.y;
    stage.update();
}

Any help is appreciated!

Thanks.

Ok, so I had a little help from a colleague and he pointed out my issue. The fix is noted above — egaudette

egaudette egaudette · Accepted Answer · 2014-01-28T16:55:35

FIXED: I was trying to translate coordinates for the 'node' or item being dragged, but it wasn't what was actually scaled. Since its parent was the item that had the scaling, I needed to translate its coordinates!

function handleClick(e) {
    var global = container.localToGlobal(node.x, node.y);
    node.offset = {'x' : global.x - e.stageX, 'y' : global.y - e.stageY};
}

function handleMove(e) {
    var local = container.globalToLocal(e.stageX + node.offset.x, e.stageY + node.offset.y);
    node.x = local.x;
    node.y = local.y;
    stage.update();
}

The updated fiddle is here: http://jsfiddle.net/MZ6LE/9/

EaselJS - dragging children of scaled parent

1 Answers