Changes to prop editors' theme

theatre/core/src/propTypes/index.ts

@@ -6,6 +6,7 @@ type S = typeof s
 interface IBasePropType<ValueType> {
   valueType: ValueType
   [s]: 'TheatrePropType'
+  label: string | undefined
 }
 
 export interface PropTypeConfig_Number extends IBasePropType<number> {
@@ -18,7 +19,8 @@ export interface PropTypeConfig_Number extends IBasePropType<number> {
 
 export const number = (
   defaultValue: number,
-  opts?: Pick<PropTypeConfig_Number, 'min' | 'max' | 'step'>,
+  opts?: Pick<PropTypeConfig_Number, 'min' | 'max' | 'step'> &
+    PropTypeConfigExtras,
 ): PropTypeConfig_Number => {
   return {
     type: 'number',
@@ -26,6 +28,7 @@ export const number = (
     default: defaultValue,
     [s]: 'TheatrePropType',
     ...(opts ? opts : {}),
+    label: opts?.label,
   }
 }
 
@@ -34,12 +37,20 @@ export interface PropTypeConfig_Boolean extends IBasePropType<boolean> {
   default: boolean
 }
 
-export const boolean = (defaultValue: boolean): PropTypeConfig_Boolean => {
+export type PropTypeConfigExtras = {
+  label?: string
+}
+
+export const boolean = (
+  defaultValue: boolean,
+  extras?: PropTypeConfigExtras,
+): PropTypeConfig_Boolean => {
   return {
     type: 'boolean',
     default: defaultValue,
     valueType: null as $IntentionalAny,
     [s]: 'TheatrePropType',
+    label: extras?.label,
   }
 }
 
@@ -48,12 +59,16 @@ export interface PropTypeConfig_String extends IBasePropType<string> {
   default: string
 }
 
-export const string = (defaultValue: string): PropTypeConfig_String => {
+export const string = (
+  defaultValue: string,
+  extras: PropTypeConfigExtras,
+): PropTypeConfig_String => {
   return {
     type: 'string',
     default: defaultValue,
     valueType: null as $IntentionalAny,
     [s]: 'TheatrePropType',
+    label: extras.label,
   }
 }
 
@@ -68,7 +83,7 @@ export interface PropTypeConfig_StringLiteral<T extends string>
 export function stringLiteral<Opts extends {[key in string]: string}>(
   defaultValue: Extract<keyof Opts, string>,
   options: Opts,
-  extras?: {as?: 'menu' | 'switch'},
+  extras?: {as?: 'menu' | 'switch'} & PropTypeConfigExtras,
 ): PropTypeConfig_StringLiteral<Extract<keyof Opts, string>> {
   return {
     type: 'stringLiteral',
@@ -77,6 +92,7 @@ export function stringLiteral<Opts extends {[key in string]: string}>(
     [s]: 'TheatrePropType',
     valueType: null as $IntentionalAny,
     as: extras?.as ?? 'menu',
+    label: extras?.label,
   }
 }
 
@@ -97,12 +113,14 @@ export interface PropTypeConfig_Compound<Props extends IValidCompoundProps>
 
 export const compound = <Props extends IValidCompoundProps>(
   props: Props,
+  extras?: PropTypeConfigExtras,
 ): PropTypeConfig_Compound<Props> => {
   return {
     type: 'compound',
     props,
     valueType: null as $IntentionalAny,
     [s]: 'TheatrePropType',
+    label: extras?.label,
   }
 }
 

theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx

@@ -1,16 +1,30 @@
-import type {PropTypeConfig_Boolean} from '@theatre/core/propTypes'
+import type {
+  PropTypeConfig,
+  PropTypeConfig_Boolean,
+} from '@theatre/core/propTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import {getPointerParts} from '@theatre/dataverse'
 import {last} from 'lodash-es'
 import React, {useCallback} from 'react'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import {
   shadeToColor,
   useEditingToolsForPrimitiveProp,
 } from './useEditingToolsForPrimitiveProp'
 
+export const labelText = css`
+  font-weight: 300;
+  font-size: 11px;
+  color: #9a9a9a;
+  text-shadow: 0.5px 0.5px 2px black;
+
+  &:hover {
+    color: white;
+  }
+`
+
 const Container = styled.div`
   display: flex;
   height: 30px;
@@ -18,23 +32,10 @@ const Container = styled.div`
   align-items: center;
 `
 
-export const NumberPropEditor_theme = {
+const Label = styled.label`
-  label: {
-    color: `#787878`,
-  },
-}
-
-const Label = styled.div`
   margin-right: 4px;
-  font-weight: 200;
-  font-size: 12px;
-  color: ${NumberPropEditor_theme.label.color};
-  cursor: default;
   text-align: right;
-
+  ${labelText};
-  &:hover {
-    color: white;
-  }
 `
 const Body = styled.label`
   display: flex;
@@ -47,6 +48,38 @@ const Body = styled.label`
   margin-left: 4px;
 `
 
+export const PrimitivePropEditor: React.FC<{
+  propConfig: PropTypeConfig
+  pointerToProp: SheetObject['propsP']
+  stuff: ReturnType<typeof useEditingToolsForPrimitiveProp>
+}> = ({propConfig, pointerToProp, stuff, children}) => {
+  const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
+
+  const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
+
+  const [contextMenu] = useContextMenu(labelNode, {
+    items: stuff.contextMenuItems,
+  })
+
+  const color = shadeToColor[stuff.shade]
+
+  return (
+    <Container>
+      {contextMenu}
+      <Label
+        ref={labelRef}
+        title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
+          '.',
+        )}
+      >
+        {label}
+      </Label>
+      {stuff.controlIndicators}
+      <Body>{children}</Body>
+    </Container>
+  )
+}
+
 const BooleanPropEditor: React.FC<{
   propConfig: PropTypeConfig_Boolean
   pointerToProp: SheetObject['propsP']
@@ -54,14 +87,6 @@ const BooleanPropEditor: React.FC<{
 }> = ({propConfig, pointerToProp, obj}) => {
   const stuff = useEditingToolsForPrimitiveProp<boolean>(pointerToProp, obj)
 
-  const label = last(getPointerParts(pointerToProp).path)
-
-  const [labelRef, labelNode] = useRefAndState<HTMLDivElement | null>(null)
-
-  const [contextMenu] = useContextMenu(labelNode, {
-    items: stuff.contextMenuItems,
-  })
-
   const onChange = useCallback(
     (el: React.ChangeEvent<HTMLInputElement>) => {
       stuff.permenantlySetValue(Boolean(el.target.checked))
@@ -69,17 +94,10 @@ const BooleanPropEditor: React.FC<{
     [propConfig, pointerToProp, obj],
   )
 
-  const color = shadeToColor[stuff.shade]
-
   return (
-    <Container>
+    <PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}>
-      {contextMenu}
+      <input type="checkbox" checked={stuff.value} onChange={onChange} />
-      <Label ref={labelRef}>{label}</Label>
+    </PrimitivePropEditor>
-      {stuff.controlIndicators}
-      <Body>
-        <input type="checkbox" checked={stuff.value} onChange={onChange} />
-      </Body>
-    </Container>
   )
 }
 

theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx

@@ -13,6 +13,7 @@ import {GoChevronRight} from 'react-icons/go'
 import styled from 'styled-components'
 import DeterminePropEditor from './DeterminePropEditor'
 import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
+import {labelText} from './BooleanPropEditor'
 
 const Container = styled.div<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -36,6 +37,7 @@ const IconContainer = styled.div`
 const PropName = styled.div`
   margin-right: 4px;
   cursor: default;
+  ${labelText}
 `
 
 const SubProps = styled.div<{depth: number; lastSubIsComposite: boolean}>`
@@ -49,7 +51,7 @@ const CompoundPropEditor: React.FC<{
   propConfig: PropTypeConfig_Compound<$IntentionalAny>
   depth: number
 }> = ({pointerToProp, obj, propConfig, depth}) => {
-  const propName = last(getPointerParts(pointerToProp).path)
+  const propName = propConfig.label ?? last(getPointerParts(pointerToProp).path)
 
   const allSubs = Object.entries(propConfig.props)
   const compositeSubs = allSubs.filter(([_, conf]) =>

theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx

@@ -1,50 +1,9 @@
 import type {PropTypeConfig_Number} from '@theatre/core/propTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import BasicNumberEditor from '@theatre/studio/uiComponents/form/BasicNumberEditor'
-import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
-import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import {getPointerParts} from '@theatre/dataverse'
-import {last} from 'lodash-es'
 import React from 'react'
-import styled from 'styled-components'
+import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp'
-import {
+import {PrimitivePropEditor} from './BooleanPropEditor'
-  shadeToColor,
-  useEditingToolsForPrimitiveProp,
-} from './useEditingToolsForPrimitiveProp'
-
-const Container = styled.div`
-  display: flex;
-  height: 30px;
-  justify-content: flex-end;
-  align-items: center;
-`
-
-export const NumberPropEditor_theme = {
-  label: {
-    color: `#787878`,
-  },
-}
-
-const Label = styled.div`
-  margin-right: 4px;
-  font-weight: 200;
-  font-size: 12px;
-  color: ${NumberPropEditor_theme.label.color};
-  cursor: default;
-  text-align: right;
-
-  &:hover {
-    color: white;
-  }
-`
-const Body = styled.div`
-  cursor: ew-resize;
-  display: flex;
-  width: 140px;
-  height: 100%;
-  margin-right: 16px;
-  margin-left: 4px;
-`
 
 const NumberPropEditor: React.FC<{
   propConfig: PropTypeConfig_Number
@@ -53,30 +12,15 @@ const NumberPropEditor: React.FC<{
 }> = ({propConfig, pointerToProp, obj}) => {
   const stuff = useEditingToolsForPrimitiveProp<number>(pointerToProp, obj)
 
-  const label = last(getPointerParts(pointerToProp).path)
-
-  const [labelRef, labelNode] = useRefAndState<HTMLDivElement | null>(null)
-
-  const [contextMenu] = useContextMenu(labelNode, {
-    items: stuff.contextMenuItems,
-  })
-
-  const color = shadeToColor[stuff.shade]
-
   return (
-    <Container>
+    <PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}>
-      {contextMenu}
+      <BasicNumberEditor
-      <Label ref={labelRef}>{label}</Label>
+        value={stuff.value}
-      {stuff.controlIndicators}
+        temporarilySetValue={stuff.temporarilySetValue}
-      <Body>
+        discardTemporaryValue={stuff.discardTemporaryValue}
-        <BasicNumberEditor
+        permenantlySetValue={stuff.permenantlySetValue}
-          value={stuff.value}
+      />
-          temporarilySetValue={stuff.temporarilySetValue}
+    </PrimitivePropEditor>
-          discardTemporaryValue={stuff.discardTemporaryValue}
-          permenantlySetValue={stuff.permenantlySetValue}
-        />
-      </Body>
-    </Container>
   )
 }
 

theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx

@@ -1,52 +1,11 @@
 import type {PropTypeConfig_StringLiteral} from '@theatre/core/propTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
-import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
-import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import {getPointerParts} from '@theatre/dataverse'
-import {last} from 'lodash-es'
 import React, {useCallback} from 'react'
-import styled from 'styled-components'
+import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp'
-import {
-  shadeToColor,
-  useEditingToolsForPrimitiveProp,
-} from './useEditingToolsForPrimitiveProp'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import BasicSwitchEditor from '@theatre/studio/uiComponents/form/BasicSwitchEditor'
 import BasicSelectEditor from '@theatre/studio/uiComponents/form/BasicSelectEditor'
-
+import {PrimitivePropEditor} from './BooleanPropEditor'
-const Container = styled.div`
-  display: flex;
-  height: 30px;
-  justify-content: flex-end;
-  align-items: center;
-`
-
-export const NumberPropEditor_theme = {
-  label: {
-    color: `#787878`,
-  },
-}
-
-const Label = styled.div`
-  margin-right: 4px;
-  font-weight: 200;
-  font-size: 12px;
-  color: ${NumberPropEditor_theme.label.color};
-  cursor: default;
-  text-align: right;
-
-  &:hover {
-    color: white;
-  }
-`
-const Body = styled.div`
-  cursor: ew-resize;
-  display: flex;
-  width: 140px;
-  height: 100%;
-  margin-right: 16px;
-  margin-left: 4px;
-`
 
 const StringLiteralPropEditor: React.FC<{
   propConfig: PropTypeConfig_StringLiteral<$IntentionalAny>
@@ -55,14 +14,6 @@ const StringLiteralPropEditor: React.FC<{
 }> = ({propConfig, pointerToProp, obj}) => {
   const stuff = useEditingToolsForPrimitiveProp<string>(pointerToProp, obj)
 
-  const label = last(getPointerParts(pointerToProp).path)
-
-  const [labelRef, labelNode] = useRefAndState<HTMLDivElement | null>(null)
-
-  const [contextMenu] = useContextMenu(labelNode, {
-    items: stuff.contextMenuItems,
-  })
-
   const onChange = useCallback(
     (val: string) => {
       stuff.permenantlySetValue(val)
@@ -70,29 +21,22 @@ const StringLiteralPropEditor: React.FC<{
     [propConfig, pointerToProp, obj],
   )
 
-  const color = shadeToColor[stuff.shade]
-
   return (
-    <Container>
+    <PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}>
-      {contextMenu}
+      {propConfig.as === 'menu' ? (
-      <Label ref={labelRef}>{label}</Label>
+        <BasicSelectEditor
-      {stuff.controlIndicators}
+          value={stuff.value}
-      <Body>
+          onChange={onChange}
-        {propConfig.as === 'menu' ? (
+          options={propConfig.options}
-          <BasicSelectEditor
+        />
-            value={stuff.value}
+      ) : (
-            onChange={onChange}
+        <BasicSwitchEditor
-            options={propConfig.options}
+          value={stuff.value}
-          />
+          onChange={onChange}
-        ) : (
+          options={propConfig.options}
-          <BasicSwitchEditor
+        />
-            value={stuff.value}
+      )}
-            onChange={onChange}
+    </PrimitivePropEditor>
-            options={propConfig.options}
-          />
-        )}
-      </Body>
-    </Container>
   )
 }
 

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx

@@ -8,12 +8,17 @@ import type {Pointer} from '@theatre/dataverse'
 import {val} from '@theatre/dataverse'
 import React, {useCallback, useRef} from 'react'
 import styled from 'styled-components'
-import {NumberPropEditor_theme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/NumberPropEditor'
 import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp'
 import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors'
 import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor'
 import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow'
 
+const theme = {
+  label: {
+    color: `#9a9a9a`,
+  },
+}
+
 const Container = styled(BaseContainer)<{}>``
 
 const Head = styled(BaseHeader)<{
@@ -21,7 +26,7 @@ const Head = styled(BaseHeader)<{
   isEven: boolean
 }>`
   display: flex;
-  color: ${NumberPropEditor_theme.label.color};
+  color: ${theme.label.color};
   padding-right: 12px;
   align-items: center;
   justify-content: flex-end;