When scaling the body with CSS, the mouseX and mouseY calculations are wrong.

[GoogleCodeExporter]

Hi,
If I scale the entire body with CSS:
    function scaleBody() {
      var transformString = "scale(1.2,1.2)";
      document.body.style.transform = transformString;
      document.body.style['-o-transform'] = transformString;
      document.body.style['-webkit-transform'] = transformString;
      document.body.style['-moz-transform'] = transformString;
      document.body.style['-ms-transform'] = transformString;
    }
    scaleBody();

Then when I start dragging an element, the element is not centered on the mouse 
pointer (move the mouse pointer away from the 0,0 origin, and you'll see the 
element moving further away from the mouse pointer).

I've taken your sample example, and just added the above JS scaling code, and 
the problem happens.

    // ensure the document BODY has dimensions in standards mode
    RootPanel.get().setPixelSize(600, 600);

    // create a DragController to manage drag-n-drop actions
    // note: This creates an implicit DropController for the boundary panel
    PickupDragController dragController = new PickupDragController(RootPanel.get(), true);

    // add a new image to the boundary panel and make it draggable
    Image img = ...;
    RootPanel.get().add(img, 40, 30);
    dragController.makeDraggable(img);

I attached the entire project code :)

I'm pretty sure the bug is somewhere here:

  @Override
  public void onMouseMove(MouseMoveEvent event) {
    // *******************************************************************
    // Note: the draggable (or its draghandle) receives mouse down events,
    // but the capturing widget will receive mouse move/up events.
    // *******************************************************************
    Widget sender = (Widget) event.getSource();
    Element elem = sender.getElement();
    // TODO optimize for the fact that elem is at (0,0)
    int x = event.getRelativeX(elem);
    int y = event.getRelativeY(elem);
...
    // proceed with the actual drag
    actualMove(x, y);
  }

  void actualMove(int x, int y) {
    context.mouseX = x;
    context.mouseY = y;
    context.desiredDraggableX = x - mouseDownOffsetX;
    context.desiredDraggableY = y - mouseDownOffsetY;

    context.dragController.dragMove();
  }

Does the issue occur in "quirks mode", "standards mode" or both?
In "standards mode".
What version of GWT are you using? 1.4.60? 2.0.4? Other?
Latest: 2.0.6

What version of the gwt-dnd jar file or library file are you using?
gwt-dnd-3.3.0.jar

What operating system(s) are you using? Windows? Linux? Mac?
Windows.

Does the issue occur in web mode, development mode (formerly "hosted
mode"), both or don't know?
Both.

What browser(s) do you use? Chrome, Firefox, IE, Safari, other?
Chrome

What is the browser version (if you know) from Help->About?
Latest.

What steps will reproduce the problem? Please attach sample code if you
can.
1. Start dragging
2. The element doesn't center on the mouse pointer.

What is the expected output? 
The element should center on the mouse pointer.

What do you see instead?
The element does not center on the mouse pointer.

Do you have a workaround?
Nope.

Please provide any additional information below.

Original issue reported on code.google.com by Yoav.Zibin@gmail.com on 25 Apr 2014 at 11:39

Attachments:

• test-drag-n-drop-with-scaling.zip

[GoogleCodeExporter]

BTW, I created a simple example for drag-n-drop and scaling with html5 directly 
(in JavaScript), and it does work properly (see attached files, and you can 
test online: 
https://googledrive.com/host/0B_LEQb_5Yz6RdVh4ZTVmV3RvaFE/drag-n-drop-with-scale
.html).

Original comment by Yoav.Zibin@gmail.com on 25 Apr 2014 at 11:41

Attachments:

• drag-n-drop-with-scale.html
• img_logo.gif