Code animation: Property editor

Experiment #127 ● 13th April, 2021 ● by Joshua Nussbaum

An important part of any visual editor is being able to select something and edit it’s properties.

So I’ve added a property sidebar to the UI. It’s inspired by Figma’s design.

The <PropertyEditor> component is a sidebar, and the specific thing that’s being edited is inserted into it’s <slot>:

<!-- generic sidebar -->
<PropertyEditor title="Frame">
  <!-- ui for editing a specific element -->
  <FrameEditor/>
</PropertyEditor>

Code

Add editor components for:
- Settings
- Layers
- Activities: Insert, Append, Remove, Replace, Select, Scroll
- Sharing (or maybe that should be a modal?)