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

Support multiple panels and documents at once #657

Open
Keavon opened this issue May 21, 2022 · 0 comments
Open

Support multiple panels and documents at once #657

Keavon opened this issue May 21, 2022 · 0 comments
Labels
Web Involves web programming (TypeScript, Svelte, CSS)

Comments

@Keavon
Copy link
Member

Keavon commented May 21, 2022

At the moment, the Svelte frontend hard-codes the workspace layout to show a Document panel (and tabs for other Document panels) on the left column and the Properties and Layer Tree panels on the right column. We don't support multiple panels of the same type because each panel component currently subscribes to messages.

On the frontend side, this should be remedied by moving any subscriptions (subscribeJsMessage() calls) in a .svelte component to a state provider. Then the panels can inject that state provider and reactively use the data. This way, multiple panels (i.e. multiple panel components) can use the same state, or the state provider can be set up to store copies for the multiple panels that it is in charge of where that's necessary.

On the backend side, everything is currently strewn around in various places (mostly dumped in document_message_handler.rs) in a way that doesn't conceptually correspond to a system of panels and the messages which handle the logic for those panels. We should create a folder/module in the root of the Editor called workspace. In it, a workspace_message_handler.rs handles the logic dealing with the layout like docking panels to different places, resizing the gutters between panels, and the overall column-row grid hierarchy which should be serialized to IndexedDB storage. In a subfolder called panels, we'll have *_panel_message_handler.rs files that are in charge of holding and sending the layouts using the new Rust-based layouts system. Currently these are layouts are awkwardly strewn around the application by applying impl PropertyHolder to random structs like the document message handler. It's doubly awkward when it's necessary for the same struct to support multiple layouts, like how we have the options bar for both the Document and Layer Tree panels in document_message_handler.rs defined in fn update_document_widgets() and fn layer_tree_options() instead of the fn properties() of impl PropertyHolder. Each of these layouts should be moved to a struct owned by each respective editor/workspace/panels/*_panel_message_handler.rs file.

In the case of the Document panel, we need the capability to display multiple instances of the same document in different panels. They need to support independent pan/tilt/zoom, snapping settings, overlays settings, normal/wireframe render modes, and active tools. This means that we need to store the document settings (like many of the things set in the options bar) on a per-panel instance basis rather than being part of the document in document_message_handler.rs. Or in the case of pan/tilt/zoom, no longer take the approach of setting these values on the root of the Graphene document itself (this change will also make it easier to get rid of the fact that undo/redo states affect pan/tilt/zoom which is undesirable). Moving code out of DocumentMessageHandler also means we can split out and reduce the size of that monolithic code file, which is a good thing for sure!

To handle rendering to the viewport of each panel with the same document, we need to route the concept of rendering through the DocumentPanelMessageHandler so it can provide Graphene's render function with information like the pan/tilt/zoom and the normal/wireframe render modes. When dirty, a re-render needs to occur, but ideally we would only dirty the document if something changed within the visible part of each viewport (not the culled items outside, see #608). So if you have two document panels open with the viewport showing different parts of the canvas, editing should only make the viewports which contain non-culled layers re-render for being dirtied. Conceptually, the idea of sending the rendered SVG of the document to the frontend is akin to the new system for sending widget layouts to the frontend as serde's JSON format, so the updated SVG viewport render should be routed the same way to the corresponding Document panel's viewport.

Lastly, the actual task of writing the JS to interactively drag tabs and panels to undock/dock will be necessary, but that's tracked by issue #195. But it may be possible to work around having to implement that feature at the same time as the rest of the refactors and work described in this PR. I'd like to be involved helping with the JS for panel docking since it's important to take an approach that implements it cleanly in the frontend architecture. But that and this issue can probably be done in either order, since that is mostly just the frontend Svelte and interactive JS event handling aspect while this is the data backing.

@Keavon Keavon added Feature Web Involves web programming (TypeScript, Svelte, CSS) labels May 21, 2022
@Keavon Keavon added this to the Sprint 15 (ongoing) milestone May 21, 2022
@Keavon Keavon modified the milestones: Sprint 16, Sprint 17 (ongoing) Jul 9, 2022
@Keavon Keavon added P-Medium and removed P-High labels Nov 5, 2022
@0HyperCube 0HyperCube moved this to Longer-Term in Task Board Mar 18, 2023
@Keavon Keavon removed the Available label May 31, 2023
@Keavon Keavon moved this to Longer-Term in Task Board May 31, 2023
@Keavon Keavon removed the P-Medium label May 31, 2023
@Keavon Keavon changed the title Add a workspace/panels module to the Editor to support multiple panels and documents at once Support multiple panels and documents at once Jul 24, 2024
@0HyperCube 0HyperCube self-assigned this Sep 3, 2024
@Keavon Keavon moved this from Longer-Term to In-Progress Tasks in Task Board Sep 28, 2024
@0HyperCube 0HyperCube removed their assignment Dec 14, 2024
@Keavon Keavon moved this from In-Progress Tasks to Medium-Term in Task Board Dec 23, 2024
@Keavon Keavon removed the Rust label Dec 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Web Involves web programming (TypeScript, Svelte, CSS)
Projects
Status: Medium-Term
Development

No branches or pull requests

2 participants