Make columns resizable

[SanderMertens]

Issue
Currently the explorer layout is not resizable in the way that the v3 explorer was.

Solution
Make columns resizable for the following pages:

• Entities (tree icon)
• Queries (search icon)

Example
https://github.com/user-attachments/assets/77b02973-2f5a-404a-b9aa-bbdd5b4917c4

[SanderMertens]

@addbounty $250

[addbounty]

Make a Draft PR early so others can see you are working on it! To automatically create one:

# Using npx (installed if you have NodeJS/npm)
npx bountybot start flecs-hub/explorer#41

# Or, use cargo (installed if you have Rust)
cargo install bounty
bounty start flecs-hub/explorer#41

When merged, you will receive the bounty!

[maxomatic458]

@ryanhcode are you still working on this?

[ryanhcode]

@maxomatic458 yes! I've posted about it in the flecs discord. Will likely finish up the PR in the next day or two.

[Doppler-stack]

Is this still not done? Like is it still open?

[SanderMertens]

Is this still not done? Like is it still open?

Yup the issue is still open!

[Doppler-stack]

@zelosleone didn’t solve it for you? @SanderMertens ?

[SanderMertens]

@zelosleone didn’t solve it for you? @SanderMertens ?

I just closed the PR. It had a number of unresolved issues that prevented it from getting merged.

[syedbarimanjan]

@zelosleone didn’t solve it for you? @SanderMertens ?

I just closed the PR. It had a number of unresolved issues that prevented it from getting merged.

Can you specify what was missing.

[zelosleone]

@zelosleone didn’t solve it for you? @SanderMertens ?

I just closed the PR. It had a number of unresolved issues that prevented it from getting merged.

Can you specify what was missing.

The last commit's problem was mentioned in discord; I solved the most with last commit but let me show you with a video:

2025-04-03.23-36-09.mp4

Ignore my edgy weeb music but using column icon at the right side when canvas is resized, it will give a flashbang like effect, resulting in in a "slow" motion. I think canvas is especially hard to sync here, but you can work from my pr if you wish to do so. Other than that, good luck.

[Doppler-stack]

@SanderMertens Would like to solve this for you but what was the error that came up with @zelosleone PR? We can talk about it more on discord or something so I am able to get at the root of what was unresolvable in the previous solutions. Because I don’t want to get started on something that will end up being the same issues that others have sent in PRs for and didn’t meet the requirements.

[SanderMertens]

This comment lists some of the issues: #47 (comment)

If you're on discord, this thread also has a discussion: https://discord.com/channels/633826290415435777/1354795632665169960

In summary this change should

• not change the layout of the explorer (the explorer should look pixel for pixel the same before resizing columns)
• not break window resizing
• not break the 3D canvas, canvas resizing or canvas aspect ratio
• not break the button that hides the left column
• work on chrome, brave, safari, edge (firefox is nice to have)
• work for both wasm mode (with 3D canvas embedded) and remote mode (connected to flecs app)
• have no bugs in the resizing logic:
  • when hovering the resize handle should light up
  • when dragging the mouse should always be above the resize handle
  • the column sizes should not "pop" while resizing the window or columns
  • the spacing between columns should not change

TL;DR it shouldn't break any existing functionality and shouldn't have any bugs in the resize logic.