From 2ef906370cebb45c8e2e2adba1bed26c3a8d4971 Mon Sep 17 00:00:00 2001
From: Adam Krebs <amk528@cs.nyu.edu>
Date: Tue, 6 Jun 2023 18:21:47 -0700
Subject: [PATCH] Make DefaultOrValueIndicator clickable to make sequencing
 more discoverable

---
 .../src/propEditors/DefaultValueIndicator.tsx | 47 +++++++++++++++----
 .../useEditingToolsForCompoundProp.tsx        | 14 +++++-
 .../useEditingToolsForSimpleProp.tsx          | 14 +++++-
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx
index c4f7cb5..860db1e 100644
--- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx
+++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx
@@ -1,13 +1,20 @@
 import {transparentize} from 'polished'
 import React from 'react'
 import styled from 'styled-components'
+import getStudio from '@theatre/studio/getStudio'
+import type {PathToProp} from '@theatre/shared/utils/addresses'
+import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
+import type {PropTypeConfig} from '@theatre/core/propTypes'
+import {nextPrevCursorsTheme} from './NextPrevKeyframeCursors'
 
 const theme = {
   defaultState: {
     color: transparentize(0.95, `#C4C4C4`),
+    hoverColor: transparentize(0.15, nextPrevCursorsTheme.onColor),
   },
   withStaticOverride: {
     color: transparentize(0.85, `#C4C4C4`),
+    hoverColor: transparentize(0.15, nextPrevCursorsTheme.onColor),
   },
 }
 
@@ -17,21 +24,26 @@ const Container = styled.div<{hasStaticOverride: boolean}>`
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 
   color: ${(props) =>
     props.hasStaticOverride
       ? theme.withStaticOverride.color
       : theme.defaultState.color};
-`
 
-const Rect = styled.rect`
-  fill: currentColor;
+  &:hover {
+    color: ${(props) =>
+      props.hasStaticOverride
+        ? theme.withStaticOverride.hoverColor
+        : theme.defaultState.hoverColor};
+  }
 `
 
 const DefaultIcon = styled.div`
   width: 5px;
   height: 5px;
   border-radius: 1px;
+  transform: rotate(45deg);
   /* border: 1px solid currentColor; */
   background-color: currentColor;
 `
@@ -41,14 +53,33 @@ const FilledIcon = styled.div`
   height: 5px;
   background-color: currentColor;
   border-radius: 1px;
+  transform: rotate(45deg);
 `
 
-const DefaultOrStaticValueIndicator: React.FC<{hasStaticOverride: boolean}> = (
-  props,
-) => {
+const DefaultOrStaticValueIndicator: React.FC<{
+  hasStaticOverride: boolean
+  pathToProp: PathToProp
+  obj: SheetObject
+  propConfig: PropTypeConfig
+}> = (props) => {
+  const {hasStaticOverride, obj, propConfig, pathToProp} = props
+  const sequenceCb = () => {
+    getStudio()!.transaction(({stateEditors}) => {
+      const propAddress = {...obj.address, pathToProp}
+
+      stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(
+        propAddress,
+        propConfig,
+      )
+    })
+  }
   return (
-    <Container hasStaticOverride={props.hasStaticOverride}>
-      {props.hasStaticOverride ? (
+    <Container
+      hasStaticOverride={hasStaticOverride}
+      onClick={sequenceCb}
+      title="Sequence this prop"
+    >
+      {hasStaticOverride ? (
         <FilledIcon title="The default value is overridden" />
       ) : (
         <DefaultIcon title="This is the default value for this prop" />
diff --git a/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx b/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx
index 368002b..c43c595 100644
--- a/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx
+++ b/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx
@@ -65,7 +65,12 @@ export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
         beingScrubbed: false,
         contextMenuItems: [],
         controlIndicators: (
-          <DefaultOrStaticValueIndicator hasStaticOverride={false} />
+          <DefaultOrStaticValueIndicator
+            hasStaticOverride={false}
+            obj={obj}
+            pathToProp={pathToProp}
+            propConfig={propConfig}
+          />
         ),
       }
     }
@@ -224,7 +229,12 @@ export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
         ...common,
         type: 'AllStatic',
         controlIndicators: (
-          <DefaultOrStaticValueIndicator hasStaticOverride={hasStatics} />
+          <DefaultOrStaticValueIndicator
+            hasStaticOverride={hasStatics}
+            obj={obj}
+            pathToProp={pathToProp}
+            propConfig={propConfig}
+          />
         ),
       }
     }
diff --git a/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx b/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx
index 9c0293a..3726c63 100644
--- a/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx
+++ b/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx
@@ -309,7 +309,12 @@ function createPrism<T extends SerializablePrimitive>(
         type: 'Static',
         shade: common.beingScrubbed ? 'Static_BeingScrubbed' : 'Static',
         controlIndicators: (
-          <DefaultOrStaticValueIndicator hasStaticOverride={true} />
+          <DefaultOrStaticValueIndicator
+            hasStaticOverride={true}
+            obj={obj}
+            pathToProp={pathToProp}
+            propConfig={propConfig}
+          />
         ),
       }
       return ret
@@ -320,7 +325,12 @@ function createPrism<T extends SerializablePrimitive>(
       type: 'Default',
       shade: 'Default',
       controlIndicators: (
-        <DefaultOrStaticValueIndicator hasStaticOverride={false} />
+        <DefaultOrStaticValueIndicator
+          hasStaticOverride={true}
+          obj={obj}
+          pathToProp={pathToProp}
+          propConfig={propConfig}
+        />
       ),
     }