From a4f83e0f84e1fc4eef36bea552746b276815c387 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Tue, 6 Jul 2021 21:58:38 +0200 Subject: [PATCH] Implemented types.stringLiteral(.., {as}) --- packages/plugin-r3f/src/store.ts | 42 ++++++---- theatre/core/src/propTypes/index.ts | 3 + .../propEditors/BooleanPropEditor.tsx | 12 +-- .../propEditors/NumberPropEditor.tsx | 2 +- .../propEditors/StringLiteralPropEditor.tsx | 26 +++--- .../{ => form}/BasicNumberEditor.tsx | 2 +- .../uiComponents/form/BasicSelectEditor.tsx | 48 +++++++++++ .../uiComponents/form/BasicSwitchEditor.tsx | 79 +++++++++++++++++++ 8 files changed, 180 insertions(+), 34 deletions(-) rename theatre/studio/src/uiComponents/{ => form}/BasicNumberEditor.tsx (98%) create mode 100644 theatre/studio/src/uiComponents/form/BasicSelectEditor.tsx create mode 100644 theatre/studio/src/uiComponents/form/BasicSwitchEditor.tsx diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts index 18f3cd1..20f86b9 100644 --- a/packages/plugin-r3f/src/store.ts +++ b/packages/plugin-r3f/src/store.ts @@ -293,21 +293,33 @@ const editorSheetObjectConfig = types.compound({ showAxes: types.boolean(true), showGrid: types.boolean(true), showOverlayIcons: types.boolean(false), - transformControlsMode: types.stringLiteral('translate', { - translate: 'Translate', - rotate: 'Rotate', - scale: 'Scale', - }), - transformControlsSpace: types.stringLiteral('world', { - local: 'Local', - world: 'World', - }), - viewportShading: types.stringLiteral('rendered', { - flat: 'Flat', - rendered: 'Rendered', - solid: 'Solid', - wireframe: 'Wireframe', - }), + transformControlsMode: types.stringLiteral( + 'translate', + { + translate: 'Translate', + rotate: 'Rotate', + scale: 'Scale', + }, + {as: 'switch'}, + ), + transformControlsSpace: types.stringLiteral( + 'world', + { + local: 'Local', + world: 'World', + }, + {as: 'switch'}, + ), + viewportShading: types.stringLiteral( + 'rendered', + { + flat: 'Flat', + rendered: 'Rendered', + solid: 'Solid', + wireframe: 'Wireframe', + }, + {as: 'menu'}, + ), }) export const bindToCanvas: BindFunction = ({ diff --git a/theatre/core/src/propTypes/index.ts b/theatre/core/src/propTypes/index.ts index 97c3217..8383b6f 100644 --- a/theatre/core/src/propTypes/index.ts +++ b/theatre/core/src/propTypes/index.ts @@ -62,11 +62,13 @@ export interface PropTypeConfig_StringLiteral type: 'stringLiteral' default: T options: Record + as: 'menu' | 'switch' } export function stringLiteral( defaultValue: Extract, options: Opts, + extras?: {as?: 'menu' | 'switch'}, ): PropTypeConfig_StringLiteral> { return { type: 'stringLiteral', @@ -74,6 +76,7 @@ export function stringLiteral( options: {...options}, [s]: 'TheatrePropType', valueType: null as $IntentionalAny, + as: extras?.as ?? 'menu', } } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx index 5852ba7..4930475 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx @@ -36,9 +36,11 @@ const Label = styled.div` color: white; } ` -const Body = styled.div` - cursor: ew-resize; +const Body = styled.label` display: flex; + align-items: center; + padding-left: 8px; + box-sizing: border-box; width: 140px; height: 100%; margin-right: 16px; @@ -76,12 +78,6 @@ const BooleanPropEditor: React.FC<{ {stuff.controlIndicators} - {/* */} ) diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx index 17dc475..1d5cba7 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx @@ -1,6 +1,6 @@ import type {PropTypeConfig_Number} from '@theatre/core/propTypes' import type SheetObject from '@theatre/core/sheetObjects/SheetObject' -import BasicNumberEditor from '@theatre/studio/uiComponents/BasicNumberEditor' +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' diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx index 3b6985f..3efdd34 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx @@ -11,6 +11,8 @@ import { 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' const Container = styled.div` display: flex; @@ -62,8 +64,8 @@ const StringLiteralPropEditor: React.FC<{ }) const onChange = useCallback( - (el: React.ChangeEvent) => { - stuff.permenantlySetValue(String(el.target.value)) + (val: string) => { + stuff.permenantlySetValue(val) }, [propConfig, pointerToProp, obj], ) @@ -76,13 +78,19 @@ const StringLiteralPropEditor: React.FC<{ {stuff.controlIndicators} - + {propConfig.as === 'menu' ? ( + + ) : ( + + )} ) diff --git a/theatre/studio/src/uiComponents/BasicNumberEditor.tsx b/theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx similarity index 98% rename from theatre/studio/src/uiComponents/BasicNumberEditor.tsx rename to theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx index 4e59dba..dec2231 100644 --- a/theatre/studio/src/uiComponents/BasicNumberEditor.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx @@ -3,7 +3,7 @@ import {isInteger, round} from 'lodash-es' import {darken, lighten} from 'polished' import React, {useMemo, useRef, useState} from 'react' import styled from 'styled-components' -import DraggableArea from './DraggableArea' +import DraggableArea from '@theatre/studio/uiComponents/DraggableArea' type IMode = IState['mode'] diff --git a/theatre/studio/src/uiComponents/form/BasicSelectEditor.tsx b/theatre/studio/src/uiComponents/form/BasicSelectEditor.tsx new file mode 100644 index 0000000..58e123f --- /dev/null +++ b/theatre/studio/src/uiComponents/form/BasicSelectEditor.tsx @@ -0,0 +1,48 @@ +import {theme} from '@theatre/studio/css' +import {darken, lighten} from 'polished' +import React, {useCallback} from 'react' +import styled from 'styled-components' + +const Select = styled.select` + background: transparent; + box-sizing: border-box; + border: 1px solid transparent; + color: rgba(255, 255, 255, 0.9); + padding: 1px 6px; + font: inherit; + outline: none; + text-align: left; + width: 100%; + height: calc(100% - 4px); + border-radius: 2px; + + &:hover, + &:focus { + background: ${darken(0.9, theme.panel.bg)}; + border: 1px solid ${lighten(0.1, theme.panel.bg)}; + } +` + +const BasicSelectEditor: React.FC<{ + value: string + onChange: (val: string) => void + options: Record +}> = ({value, onChange, options}) => { + const _onChange = useCallback( + (el: React.ChangeEvent) => { + onChange(String(el.target.value)) + }, + [onChange], + ) + return ( + + ) +} + +export default BasicSelectEditor diff --git a/theatre/studio/src/uiComponents/form/BasicSwitchEditor.tsx b/theatre/studio/src/uiComponents/form/BasicSwitchEditor.tsx new file mode 100644 index 0000000..6ff30a7 --- /dev/null +++ b/theatre/studio/src/uiComponents/form/BasicSwitchEditor.tsx @@ -0,0 +1,79 @@ +import {darken} from 'polished' +import React, {useCallback} from 'react' +import styled from 'styled-components' + +const Container = styled.form` + display: flex; + flex-direction: row; + align-items: stretch; + vertical-align: middle; + height: 24px; +` +const Label = styled.label` + padding: 0 0.5em; + background: transparent; + /* background: #373748; */ + display: flex; + align-items: center; + color: #a7a7a7; + border: 1px solid #1c2123; + box-sizing: border-box; + border-right-width: 0px; + + & + &:last-child { + border-right-width: 1px; + } + + ${Container}:hover > & { + /* background-color: #373748; */ + /* color: ${darken(0.1, 'white')}; */ + } + + &&:hover { + background-color: #464654; + } + + &&[data-checked='true'] { + color: white; + background: #3f3f4c; + } +` + +const Input = styled.input` + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +` + +const BasicSwitchEditor: React.FC<{ + value: string + onChange: (val: string) => void + options: Record +}> = ({value, onChange, options}) => { + const _onChange = useCallback( + (el: React.ChangeEvent) => { + onChange(String(el.target.value)) + }, + [onChange], + ) + return ( + + {Object.keys(options).map((key, i) => ( + + ))} + + ) +} + +export default BasicSwitchEditor