search

jagenjo / litegraph.js

A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.
MIT License
5.33k stars 602 forks source link

When the canvas attribute size and CSS style size are inconsistent, interactive events such as clicking on nodes fail. #472

Open KtzeAbyss opened 2 weeks ago

KtzeAbyss commented 2 weeks ago

This might not be a problem but rather a misunderstanding of functionality on my part. My intention is as follows:

This could be a somewhat unusual requirement. I am developing a node orchestration feature for a large-screen project. The canvas's parent container has a resolution of 6000x4000, which is quite high. After testing, I found that a resolution of 3000x2000 offers the best display effect. So, I set the canvas attribute size to 3000x2000. However, at this point, the canvas cannot fill the parent container. I further adjusted the canvas's CSS style size to 6000x4000 (I tried both directly specifying the CSS and scaling through CSS transform). Finally, I achieved the desired result. But now, I can no longer click on nodes to select them.

My code under the vue2 is like this

        <div class="editor-area" id="editor-area" style="width: 6000; height: 3000; ">
            <canvas class="graphcanvas lgraphcanvas" id="lg-canvas" width='3000' height="2000" style="width: 6000; height: 3000; "></canvas>
        </div>

I suspect this approach may have introduced issues with coordinate transformation. However, what puzzles me is that in the demo provided in the project, the canvas attribute size and style size are also inconsistent, yet it doesn't experience any problems. Moreover, the right-click menu seems unaffected by the style size. No matter how I scale the style size, the rendering size of the right-click menu always remains consistent.

So, how can I achieve an effect similar to the demo? That is, by having inconsistent canvas attribute size and style size to obtain a suitable display effect, while also maintaining an appropriate rendering size for the right-click menu.

KtzeAbyss commented 1 week ago

Currently, I have refactored part of the source code to solve these problems, but it cannot become a public solution