Search code examples
javascriptdrag-and-dropeaseljsanimate-cc

globalToLocal not behaving as I expected? (pretty sure I'm just not getting it)

I've asked a few questions on this already, for other issues on it, but I've almost finished it!

I'm working on a Drag and Drop interaction in Animate CC, and I've almost got it working. It recognizes on drag and on drop, but the locations on the target areas seems off. Demo

My guess is that its something to do with my not doing globalToLocal() correctly, but I'm not sure. So far modifying values in my w1, w2, h1, h2 haven't changed a thing.

here's the intersect testing function, it's a pretty popular one based here 

function intersect(obj1, obj2){
  var objBounds1 = obj1.nominalBounds.clone(); //used nominalBounds for shape in animateCC
  var objBounds2 = obj2.nominalBounds.clone();

  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y); //is this what's wrong?

  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.height / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;

  if(pt.x > w2 || pt.x < w1){
    spliceThis(hitTestArray, obj2);
    return false;
  } 
  if(pt.y > h2 || pt.y < h1){
    spliceThis(hitTestArray, obj2);
    return false;
  } 
    if(hitTestArray.indexOf(obj2) < 0){ //Obj2 not found
    hitTestArray.push(obj2);
  }
  return true;
}

obj1 is the drag object, obj2 is the drop target. I know easelJS doesn't have width and height, so maybe that's part of it? but I'm not sure how I'd refactor it to account for that. Also, its somewhat working, so I'm not sure why that'd be the case if the height and width are just null?

Am I just completely not understanding this, or am I close?

Solution

  • Technically I found what's causing the issue, but I don't know why.

    enter image description here

    What's going on is the x and y for the bounds on both obj1 and obj2 are being set to negative values on the stage. I don't know why yet, but hey, at least I know what's wrong now... maybe someone else could elaborate? I'm still new to JavaScript and EaselJS.

    UPDATE:

    fixed the line var pt = obj1.globalToLocal(obj2.x, obj2.y); because it was using the negative bounds, but obj2was fine on the x and y. then changed the registry point to the top-left corner because it was good on that part, but still went way out into the blank area.

    It's working as intended now, though I still don't know why it was returning negative values.