From e140bb6fc415f90d1d73df66ec4d43ff99be5d6c Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Mon, 16 May 2022 07:53:56 -0400
Subject: [PATCH] docs: Minor adjustments to Curve docs (#160)

---
 .../CurveEditorPopover/CurveEditorPopover.tsx | 22 ++++++++++++++-----
 .../CurveEditorPopover/shared.ts              |  2 ++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
index 96625be..14e52a1 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
@@ -100,10 +100,23 @@ const NoResultsFoundContainer = styled.div`
   padding: 6px;
   color: #888888;
 `
-
+/**
+ * Tracking for what kinds of events are allowed to change the input's value.
+ */
 enum TextInputMode {
+  /**
+   * Initial mode, don't try to override the value.
+   */
   init,
+  /**
+   * In `user` mode, the text input field does not update when the curve
+   * changes so that the user's search is preserved.
+   */
   user,
+  /**
+   * In `auto` mode, the text input field is continually updated to
+   * a CSS cubic bezier args string to reflect the state of the curve.
+   */
   auto,
 }
 
@@ -181,10 +194,6 @@ const CurveEditorPopover: React.FC<IProps> = (props) => {
     }
   }
 
-  // In auto mode, the text input field is continually updated to
-  // a CSS cubic bezier args string to reflect the state of the curve;
-  // in user mode, the text input field does not update when the curve
-  // changes so that the user's search is preserved.
   const [textInputMode, setTextInputMode] = useState<TextInputMode>(
     TextInputMode.init,
   )
@@ -214,6 +223,8 @@ const CurveEditorPopover: React.FC<IProps> = (props) => {
     const value = cssCubicBezierArgsFromHandles(newHandles)
     setInputValue(value)
     setEdit(value)
+
+    // ensure that the text input is selected when curve is changing.
     inputRef.current?.select()
     inputRef.current?.focus()
   }
@@ -233,6 +244,7 @@ const CurveEditorPopover: React.FC<IProps> = (props) => {
       return EASING_PRESETS
     }
   }, [inputValue])
+
   // Use the first preset in the search when the displayed presets change
   useEffect(() => {
     if (textInputMode === TextInputMode.user && displayedPresets[0])
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.ts b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.ts
index 685deb0..732c744 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.ts
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.ts
@@ -20,6 +20,8 @@ export type CubicBezierHandles = [
 export type CSSCubicBezierArgsString = string
 
 const CSS_BEZIER_ARGS_DECIMAL_POINTS = 3 // Doesn't have to be 3, but it matches our preset data
+
+/** Returns e.g. `"0, 0, 1, 1"`. See {@link CSSCubicBezierArgsString} docs for more context. */
 export function cssCubicBezierArgsFromHandles(
   points: CubicBezierHandles,
 ): CSSCubicBezierArgsString {