From 9d514362da7d8d7ea7f0cf12f33170f04cb10bb0 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Mon, 5 Jul 2021 00:30:50 +0200 Subject: [PATCH] Implement BooleanPropEditor --- .../propEditors/BooleanPropEditor.tsx | 91 +++++++++++++++++++ .../propEditors/DeterminePropEditor.tsx | 9 +- .../propEditors/NumberPropEditor.tsx | 8 +- 3 files changed, 97 insertions(+), 11 deletions(-) create mode 100644 theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx new file mode 100644 index 0000000..500806b --- /dev/null +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx @@ -0,0 +1,91 @@ +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 from 'styled-components' +import { + 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 BooleanPropEditor: React.FC<{ + propConfig: PropTypeConfig_Boolean + pointerToProp: SheetObject['propsP'] + obj: SheetObject +}> = ({propConfig, pointerToProp, obj}) => { + const stuff = useEditingToolsForPrimitiveProp(pointerToProp, obj) + + const label = last(getPointerParts(pointerToProp).path) + + const [labelRef, labelNode] = useRefAndState(null) + + const [contextMenu] = useContextMenu(labelNode, { + items: stuff.contextMenuItems, + }) + + const onChange = useCallback( + (el: React.ChangeEvent) => { + window.ppause = true + stuff.permenantlySetValue(Boolean(el.target.checked)) + }, + [propConfig, pointerToProp, obj], + ) + + const color = shadeToColor[stuff.shade] + + return ( + + {contextMenu} + + {stuff.controlIndicators} + + + {/* */} + + + ) +} + +export default BooleanPropEditor diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx index b433929..61b3590 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/DeterminePropEditor.tsx @@ -2,6 +2,7 @@ import type {PropTypeConfig} from '@theatre/core/propTypes' import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import {getPointerParts} from '@theatre/dataverse' import React from 'react' +import BooleanPropEditor from './BooleanPropEditor' import CompoundPropEditor from './CompoundPropEditor' import NumberPropEditor from './NumberPropEditor' @@ -62,10 +63,10 @@ const propEditorByPropType: { } = { compound: CompoundPropEditor, number: NumberPropEditor, - string: () => <>Implement me, - enum: () => <>Implement me, - boolean: () => <>Implement me, - stringLiteral: () => <>Implement me, + string: () => <>, + enum: () => <>, + boolean: BooleanPropEditor, + stringLiteral: () => <>, } const DeterminePropEditor: React.FC<{ diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx index 5ed05cc..17dc475 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx @@ -64,13 +64,7 @@ const NumberPropEditor: React.FC<{ const color = shadeToColor[stuff.shade] return ( - + {contextMenu} {stuff.controlIndicators}