From 0ea9271d7afd60e149c13dd08dd80619a88570a9 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 3 Mar 2022 14:50:54 +0100 Subject: [PATCH] Add docs to SequenceEditorPanel's spaces --- .../SequenceEditorPanel/layout/layout.ts | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts index 1117657..6692478 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts @@ -62,6 +62,58 @@ export type DopeSheetSelection = { 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 = { sheet: Sheet tree: SequenceEditorTree