Developer Interactions

SEE CONFIG

This section only covers how to interact with an existing scene once it's been set up.

Check the config section for how to configure a scene and its props.

States and Components

I built my own states and component render lifecycles.

By interacting with the library's states, you can easily change the corresponding components' DOM.

You can also choose to interact with the library's components directly (not recommended).

Not all functionalities will be covered in this section due to time constraints (see below for what you can do with these states).

All contexts are instance based, every action besides changing a root scoped theme only affects the selected scene.

You can directly interact with the library's states. They are bundled in separate contexts:

• scene.propCtx: Contains selected prop, filtered props, filter / search, frames and timeline actions
  • Search / Filter props
  • Reset Filter
  • Select prop by prop config / id / prop name
  • Get the selected prop
  • Get all filtered props
  • Go to any frame
  • Go to the next frame
  • Play / Pause
  • Check if a prop is enabled
  • Get any prop's detailed data with the current frame
• scene.themeCtx: Controls the theme
  • Choose a theme
  • Cycle to next theme
  • Get the current theme
• scene.snackbarCtx: Controls the snackbar
  • Popup an embedded snackbar in the scene to display error or success message
• scene.overlayCtx: Controls the overlay of the current scene
  • Open a popup overlay with custom HTMLElement or HTML string Example in filter props
  • Close the current popup overlay
• scene.getViewportCtx(): Controls the viewport zoom and offset
  • Zoom in or out
  • Get the current zoom factor
  • Change the viewport offset (i.e., drag the viewport)
  • Get the current viewport offset

Examples

1. How I am able to display zoom factors and zoom steps in Global - Config / Zoom Limit - Steps
2. How I made it possible to autoplay a scene on load: Prop - Config / Animation Config / Transition Timing Function
3. How I made it possible to select a prop with a specified tab on load: Prop - Config / Scripts, Notes, Images, Steps

---

📄️ Embedded Snackbar

Display a success or error embedded snackbar message

📄️ Prop Selection

Get and set selected prop by prop, prop name or prop id

📄️ Dialog Tab Selection

Get and set selected prop's dialog tab

📄️ Filter Props

Programmatically filter props and search props

📄️ Play/Pause and Frames

Programmatically play / pause a scene and select frame

📄️ Theme Interaction

Get and set selected prop's dialog tab