0

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?

Mike
  • 48
  • 1
  • 14
  • Are your obj1 and obj2 scaled? Remember that `nominalBounds` is the "unscaled" bounds, so if any of those objects are scaled, or their parents are scaled, it would affect the coordinates. – Lanny Apr 22 '16 at 18:00
  • they should be their original height and width. When you say 'scaled,' does it mean scaled on the stage - in browser, or scaled within animate (as in different from the original symbol)? To me it just seems like it set the x and y to 0 because it thinks its still good if I go outside on the left and top of the targets – Mike Apr 22 '16 at 18:03
  • Yes, I mean that if the library objects are put on stage, and scaled, or any of their parent elements are scaled (including the stage), then nominalBounds will not be correct. – Lanny Apr 22 '16 at 18:10
  • ah, ok. I tried to make sure that I didn't scale any of the shapes, or parent ones, however, I do have this set up to be responsive where it'll scale the whole stage to fit the browser window. Does that effect this? I was told at some point that it doesn't, but maybe I misunderstood? – Mike Apr 22 '16 at 18:37
  • It will not affect things like localToGlobal and getBounds -- but nominalBounds is not properly transformed. – Lanny Apr 22 '16 at 20:28
  • Are there any possible alternatives to getting a drag and drop to work without using shapes so that I can get the proper bounds and maintain the responsive attribute? Like adding a shape as a child of the stage versus adding it in from animate? The original example seems to work, but he didn't use animateCC, but he's also using shapes, which shouldn't have width and height, right? – Mike Apr 22 '16 at 20:46
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109962/discussion-between-mike-and-lanny). – Mike Apr 22 '16 at 22:19

1 Answers1

0

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.

Mike
  • 48
  • 1
  • 14