Drop at Mouse Point

GoJS
1

Tried a number of hours to figure this out but giving up :frowning:

I am dragging an HTML component from another toolkit (webix) and want to drop a shape on a diagram.
I get the mouse x,y from the event from webix but i can’t figure out how to convert that x,y into a point on the diagram.

The x, y given by the mouse event is way off (as expected)

Any help is greatly appreciated. Thanks

2

Have you seen this drag-and-drop sample? It illustrates dragging from an arbitrary HTML element onto the diagram:

Let me know if that clears up the process. Generally this is the important part:

    var bbox = can.getBoundingClientRect();
    var mx = event.clientX - bbox.left * ((can.width/pixelratio) / bbox.width);
    var my = event.clientY - bbox.top * ((can.height/pixelratio) / bbox.height);
    var point = myDiagram.transformViewToDoc(new go.Point(mx, my));

transformViewToDoc takes viewport coordinates and translates them into Diagram document coordinates.

Simon

1 Like
3

This is the exact code from that whole page which works. Saved a lot of time and energy in research on such an important usage of getting canvas location from Mouse Pointer. @Simon Thanks a lot !