litegraph.js icon indicating copy to clipboard operation
litegraph.js copied to clipboard

Issue with Editor Resizing Not Centered on Mouse Position

Open sonlia opened this issue 1 year ago • 2 comments

Hello,

I've encountered an issue where I've placed the editor on the right side of the page. However, when I attempt to zoom in or out, the scaling does not correctly center around the mouse cursor. The canvas has a parent element with relative positioning.

Could you please provide guidance or a solution to ensure that the zoom operation is centered on the mouse position? 教程

Thank you for your assistance.

sonlia avatar May 27 '24 02:05 sonlia

        // this.setZoom( scale, [ e.localX, e.localY ] );
        // this.ds.changeScale(scale, [e.clientX, e.clientY]);
        
        var rect = e.target.getBoundingClientRect();
        this.setZoom( scale, [ e.clientX - rect.left, e.clientY - rect.top ] );

https://github.com/jagenjo/litegraph.js/blob/0555a2f2a3df5d4657593c6d45eb192359888195/src/litegraph.js#L7016

Probably it needs to be implemented inside the DragAndScape, but the above code could work

@sonlia if you can test it and make a PR in case

atlasan avatar May 27 '24 16:05 atlasan

Hello, it seems that using this.ds.changeScale(scale, [ e.clientX - rect.left, e.clientY - rect.top ]); also works, but I haven't conducted a complete test yet.

sonlia avatar May 30 '24 04:05 sonlia