Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for manual placement of the canvas element #4479

Open
AlexanderSchuetz97 opened this issue May 11, 2024 · 0 comments
Open

Allow for manual placement of the canvas element #4479

AlexanderSchuetz97 opened this issue May 11, 2024 · 0 comments

Comments

@AlexanderSchuetz97
Copy link

AlexanderSchuetz97 commented May 11, 2024

Is your feature request related to a problem? Please describe.
For Wasm/Web, I want to integrate egui into an existing large single page web application written in javascript/typescript.
egui should only render stuff inside a canvas. Placement of that canvas is very cumbersome as
egui runs code in its update loop that just assumes that egui takes care of the entire screen.

Describe the solution you'd like
An option for me prevent egui from touching the css style of the canvas element at all.
Ideally egui should look at the canvas size in its draw routine in this mode and just "accept" that this is the size it has to use.

Describe alternatives you've considered
Wrap the canvas in a div, and overwrite the css style in the div. This is however very wonky as
if I do not set the size of the div to absolute pixel values for every execution of the update routine the canvas grows larger.
This prevents me from using %width or %height stuff in the div.

My current workaround is not pretty but works:

<div style="height: 500px; width: 500px; position: relative !important;">
    <canvas id="the_canvas_id"></canvas>
</div>

the "position: relative !important" has to be set to overwrite the "position: absolute" that egui sets on the canvas element.
and the sizes have to be set for the update loop to be able to detect. Again if I set the sizes to a percentage then
the canvas will just add 1 pixel each time the update loop is ran. (rounding issue?)

I would prefer to not have to do this at all and just set some flag in WebOptions that placement of the canvas
is "manual" and egui should not mess with the style tag of the canvas at all. Then I could just set all
the stuff on the canvas directly and not abuse a div for this. Plus hopefully the canvas size increase issue would go away
when using %height %width.

Setting the size in the WebOptions::max_size_points is not really helping either since the canvas may move/resize
depending on what the user does and there doesn't appear to be a way of changing these values again after starting
the WebRunner.

Additional context
I am not using trunk, as my goal is to integrate egui into an existing application. I am using wasm-pack. This should not
have any impact tho as the only thing thats different is that the entrypoint is not called main but some other function
that the javascript code calls with the canvas id.
The rest of the "app" code is for now identical to emilk/eframe_template.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant