JointJS/Rappid Positioning and scaling question

[Ewout Van Gossum]

Hi,

I'm currently evaluating Rappid for the development of a web-app. JointJS features a cool scaling feature that we plan on using in order to scale drawings for different screen sizes. As with many applications, our web-app allows users to drag and drop elements onto the paper. Rappid offers Stencils to do this, however this functionality is a bit too high-level for the purpose/design of the application we are making.

In order to implement what we want, we'd use our own solution for dragging and dropping. To do this we need to translate the position of the mouse on-screen to the position of the mouse on a paper object. I was thinking something along the lines of taking the offset of the paper holder element and using the paper's scale to translate the mouse position. 

The problem is that I can't seem to find a way to retrieve the current x/y scale using the API, is there a way to retrieve the scale of a paper?

Kind Regards,

Ewout Van Gossum.

[dave]

Hi Ewout,

I think the best way to get this right is to study the drop() method of the joint.ui.Stencil.js file. You're on the right path as you described it but there is certain subtleties to keep in mind. I think you could even just copy-paste what you find in the drop() method and use it directly - maybe with only slight modifications. The drop() method is quite readable and show you exactly how to convert the coordinates. Basically, the most important parts are these:

var p = paper.svg.createSVGPoint();

        p.x = evt.clientX;

        p.y = evt.clientY;

        p.x += scrollLeft - paperOffset.left;

p.y += scrollTop - paperOffset.top;

        // Transform point into the viewport coordinate system.

        var pointTransformed = p.matrixTransform(paper.viewport.getCTM().inverse());

where evt is the mouseup event object, scrollLeft/Top document.body scrollLeft/Top and paperOffset is $(paper.svg).offset().

Regards,

David

[Ewout Van Gossum]

Thank you for your insight.