diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx index bcf22cb..6e6a91e 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx @@ -1,84 +1,8 @@ -import type { - PropTypeConfig, - PropTypeConfig_Boolean, -} from '@theatre/core/propTypes' +import type {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, {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; - justify-content: flex-end; - align-items: center; -` - -const Label = styled.label` - margin-right: 4px; - text-align: right; - ${labelText}; -` -const Body = styled.label` - display: flex; - align-items: center; - padding-left: 8px; - box-sizing: border-box; - width: 140px; - height: 100%; - margin-right: 16px; - margin-left: 4px; -` - -export const PrimitivePropEditor: React.FC<{ - propConfig: PropTypeConfig - pointerToProp: SheetObject['propsP'] - stuff: ReturnType -}> = ({propConfig, pointerToProp, stuff, children}) => { - const label = propConfig.label ?? last(getPointerParts(pointerToProp).path) - - const [labelRef, labelNode] = useRefAndState(null) - - const [contextMenu] = useContextMenu(labelNode, { - items: stuff.contextMenuItems, - }) - - const color = shadeToColor[stuff.shade] - - return ( - - {contextMenu} - - {stuff.controlIndicators} - {children} - - ) -} +import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp' +import {SingleRowPropEditor} from './utils/SingleRowPropEditor' const BooleanPropEditor: React.FC<{ propConfig: PropTypeConfig_Boolean @@ -95,9 +19,9 @@ const BooleanPropEditor: React.FC<{ ) return ( - + - + ) } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index eb24622..eebe906 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -13,7 +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' +import {labelText} from './utils/SingleRowPropEditor' const Container = styled.div<{depth: number}>` --depth: ${(props) => props.depth}; diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx index 424b6b0..c5a47fb 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx @@ -2,8 +2,8 @@ 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 React from 'react' -import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp' -import {PrimitivePropEditor} from './BooleanPropEditor' +import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp' +import {SingleRowPropEditor} from './utils/SingleRowPropEditor' const NumberPropEditor: React.FC<{ propConfig: PropTypeConfig_Number @@ -13,14 +13,14 @@ const NumberPropEditor: React.FC<{ const stuff = useEditingToolsForPrimitiveProp(pointerToProp, obj) return ( - + - + ) } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx index 56b9f92..f577c2f 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx @@ -1,11 +1,11 @@ import type {PropTypeConfig_StringLiteral} from '@theatre/core/propTypes' import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import React, {useCallback} from 'react' -import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp' +import {useEditingToolsForPrimitiveProp} from './utils/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' +import {SingleRowPropEditor} from './utils/SingleRowPropEditor' const StringLiteralPropEditor: React.FC<{ propConfig: PropTypeConfig_StringLiteral<$IntentionalAny> @@ -22,7 +22,7 @@ const StringLiteralPropEditor: React.FC<{ ) return ( - + {propConfig.as === 'menu' ? ( )} - + ) } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx new file mode 100644 index 0000000..bc0ef50 --- /dev/null +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx @@ -0,0 +1,76 @@ +import type * as propTypes from '@theatre/core/propTypes' +import type SheetObject from '@theatre/core/sheetObjects/SheetObject' +import {getPointerParts} from '@theatre/dataverse' +import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu' +import useRefAndState from '@theatre/studio/utils/useRefAndState' +import {last} from 'lodash-es' +import React from 'react' +import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' +import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' +import styled, {css} from 'styled-components' + +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; + justify-content: flex-end; + align-items: center; +` + +const Label = styled.label` + margin-right: 4px; + text-align: right; + ${labelText}; +` +const Body = styled.label` + display: flex; + align-items: center; + padding-left: 8px; + box-sizing: border-box; + width: 140px; + height: 100%; + margin-right: 16px; + margin-left: 4px; +` + +export const SingleRowPropEditor: React.FC<{ + propConfig: propTypes.PropTypeConfig + pointerToProp: SheetObject['propsP'] + stuff: ReturnType +}> = ({propConfig, pointerToProp, stuff, children}) => { + const label = propConfig.label ?? last(getPointerParts(pointerToProp).path) + + const [labelRef, labelNode] = useRefAndState(null) + + const [contextMenu] = useContextMenu(labelNode, { + items: stuff.contextMenuItems, + }) + + const color = shadeToColor[stuff.shade] + + return ( + + {contextMenu} + + {stuff.controlIndicators} + {children} + + ) +} diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx similarity index 98% rename from theatre/studio/src/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp.tsx rename to theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx index 3347b6c..88696f4 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx @@ -10,8 +10,8 @@ import {getPointerParts, prism, val} from '@theatre/dataverse' import get from 'lodash-es/get' import last from 'lodash-es/last' import React from 'react' -import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator' -import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors' +import DefaultOrStaticValueIndicator from './DefaultValueIndicator' +import NextPrevKeyframeCursors from './NextPrevKeyframeCursors' interface CommonStuff { value: T diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx index 6cfa836..5fbf0c0 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx @@ -8,7 +8,7 @@ import type {Pointer} from '@theatre/dataverse' import {val} from '@theatre/dataverse' import React, {useCallback, useRef} from 'react' import styled from 'styled-components' -import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp' +import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/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'