Make DefaultOrValueIndicator clickable to make sequencing more discoverable

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" />

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}
+          />
         ),
       }
     }

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}
+        />
       ),
     }