variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add docs to SequenceEditorPanel's spaces

Browse source
This commit is contained in:
Aria Minaei 2022-03-03 14:50:54 +01:00
parent 9dfe912f65
commit 0ea9271d7a
1 changed files with 52 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
View file

@ -62,6 +62,58 @@ export type DopeSheetSelection = {
delete(): void delete(): void
} }
/**
* @remarks
* In order to lay out the playhead and the keyframes on the sequence editor,
* we map their position to different spaces based on the zoom and scroll.
*
* These spaces are called `unitSpace`, `scaledSpace`, and `clippedSpace`.
*
* * `unitSpace` is the space the sequence is in. So, `5 seconds` in unitSpace
* would equal `5`.
*
* * `scaledSpace` basically takes into account zoom level, but not scroll.
*
* * `clippedSpace` is just like `scaledSpace`, but also accounts for scroll.
*
*
* 2 seconds ─┐ #
* ▼ # 2 seconds would represent as `2` in unitSpace
* `unitSpace` 00 01 02 03 04 05 # regardless of zoom or scroll.
* | #
* ─────────────────────────────────────┼───────────────────────────────────────────────────────────────────────
* | #
* ▼ # If zoom=1, then scaledSpace acts the same as
* `scaledSpace` 00 01 02 03 04 05 # unitSpace.
* (zoom=1) | #
* ─────────────────────────────────────┼───────────────────────────────────────────────────────────────────────
* ┌─────┘ #
* ▼ | # We're zoomed out (zoom=0.5), so 2 seconds
* `scaledSpace` 00 01 02 03 04 05 06 07 08 09 10 # falls on the position of 1 second (2 * 0.5 = 1).
* (zoom=0.5) | | #
* ───────────────────────────────┼─────┼───────────────────────────────────────────────────────────────────────
* └─────┼───────────┐ #
* | ▼ # We're zoomed in (zoom=2), so 2 seconds
* `scaledSpace` 00 01 02 # falls on the position of 4 seconds (2 * 2 = 4).
* (zoom=2) | | #
* ─────────────────────────────────────┼───────────┼───────────────────────────────────────────────────────────
* ┌───────────┘ #
* │ # With no zoom or scroll, clippedSpace is
* `clippedSpace` ▼ # just like unitSpace.
* (zoom=1, scroll=0) 00 01 02 03 04 05 #
* ─────────────────────────────────────┼───────────────────────────────────────────────────────────────────────
* | #
* ┌─────┘ # No zoom, but we're scrolled in by 1 seconds,
* `clippedSpace` ▼ | # so everything shifts 1s back.
* (zoom=1, scroll=1) 01 02 03 04 05 06 #
* ────────────────────────────────┼────┼───────────────────────────────────────────────────────────────────────
* └────┐ #
* ▼ # Zoomed in 2x with 1s of scroll.
* `clippedSpace` (zoom=2, 01 02 03 #
* scroll=1) #
* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
*
*/
export type SequenceEditorPanelLayout = { export type SequenceEditorPanelLayout = {
sheet: Sheet sheet: Sheet
tree: SequenceEditorTree tree: SequenceEditorTree