web synth docs

creating-new-view-contexts

In web synth, [view-context]s are top-level [module]s that have their own tabs at the top level of the application. They are used when the functionality of a module is more involved and a larger UI than that which is visible in the [graph-editor] small view rendered on the right side of the graph editor is desired.

There are several steps required to add new view contexts to web synth and make them usable throughout the application. This process has evolved and somewhat standardized as the various VCs that have already been created were added.

  1. Create a new directory in the src directory for the VC. This file should export various functions to control the VC's lifecycle (see [view-context] for details, or better yet look at some other file exporting VC lifecycle functions, find the ones in camel case (those are the ones that get exported to Wasm), and copy that). Copy-pasting the boilerplate from another file is a good idea; just remember to rename everything.
  2. Create a new file for your VC in the engine/src/views directory. Copy-pasting from some other VC and renaming is a good idea.
  3. Implement the ViewContext trait for your VC. You'll also have to add a pub mod your_vc; declaration to the engine/src/views/mod.rs file. Make sure that you update the get_state_key function to return a unique prefix for your VC.
  4. Add the VC definition to the backend of the [view-context-manager] in the engine/src/view_context/manager.rs file. Down at the bottom build_view function, add the name of your VC to the match statement
  5. Grep the code for the string ViewContextDescriptors: and add your VC to the list there. That will get it included in the select menu shown in the UI.

Referred in

creating-new-view-contexts