Group editor's props into compound props (r3f)

This commit is contained in:
Aria Minaei 2021-07-07 16:39:53 +02:00
parent 47ca0a10f3
commit 230225ed2c
5 changed files with 49 additions and 37 deletions

View file

@ -43,7 +43,8 @@ const EditableProxy: VFC<EditableProxyProps> = ({
)
const selected = useSelected()
const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
const showOverlayIcons =
useVal(editorObject?.props.viewport.showOverlayIcons) ?? false
useEffect(() => {
setSnapshotProxyObject(object, uniqueName)

View file

@ -43,8 +43,8 @@ const EditorScene = () => {
shallow,
)
const showGrid = useVal(editorObject?.props.showGrid) ?? true
const showAxes = useVal(editorObject?.props.showAxes) ?? true
const showGrid = useVal(editorObject?.props.viewport.showGrid) ?? true
const showAxes = useVal(editorObject?.props.viewport.showAxes) ?? true
useEffect(() => {
setOrbitControlsRef(orbitControlsRef)

View file

@ -37,13 +37,13 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
shallow,
)
const transformControlsMode =
useVal(editorObject?.props.transformControlsMode) ?? 'translate'
useVal(editorObject?.props.transformControls.mode) ?? 'translate'
const transformControlsSpace =
useVal(editorObject?.props.transformControlsSpace) ?? 'world'
useVal(editorObject?.props.transformControls.space) ?? 'world'
const viewportShading =
useVal(editorObject?.props.viewportShading) ?? 'rendered'
useVal(editorObject?.props.viewport.shading) ?? 'rendered'
const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot])
const [editableProxies, setEditableProxies] = useState<{

View file

@ -53,11 +53,11 @@ const UI: VFC = () => {
)
const transformControlsMode =
useVal(editorObject?.props.transformControlsMode) ?? 'translate'
useVal(editorObject?.props.transformControls.mode) ?? 'translate'
const transformControlsSpace =
useVal(editorObject?.props.transformControlsSpace) ?? 'world'
useVal(editorObject?.props.transformControls.space) ?? 'world'
const viewportShading =
useVal(editorObject?.props.viewportShading) ?? 'rendered'
useVal(editorObject?.props.viewport.shading) ?? 'rendered'
const [wrapper, setWrapper] = useState<null | HTMLDivElement>(null)
@ -73,7 +73,7 @@ const UI: VFC = () => {
value={transformControlsMode}
onChange={(value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControlsMode, value),
set(editorObject!.props.transformControls.mode, value),
)
}
/>
@ -83,7 +83,7 @@ const UI: VFC = () => {
value={transformControlsSpace}
onChange={(space) => {
studio.transaction(({set}) => {
set(editorObject.props.transformControlsSpace, space)
set(editorObject.props.transformControls.space, space)
})
}}
/>
@ -93,7 +93,7 @@ const UI: VFC = () => {
value={viewportShading}
onChange={(shading) => {
studio.transaction(({set}) => {
set(editorObject.props.viewportShading, shading)
set(editorObject.props.viewport.shading, shading)
})
}}
/>

View file

@ -289,28 +289,14 @@ export type BindFunction = (options: {
}) => (options: {gl: WebGLRenderer; scene: Scene}) => void
const editorSheetObjectConfig = types.compound({
isOpen: types.boolean(false),
showAxes: types.boolean(true),
showGrid: types.boolean(true),
showOverlayIcons: types.boolean(false),
transformControlsMode: types.stringLiteral(
'translate',
isOpen: types.boolean(false, {label: 'Editor Open'}),
viewport: types.compound(
{
translate: 'Translate',
rotate: 'Rotate',
scale: 'Scale',
},
{as: 'switch'},
),
transformControlsSpace: types.stringLiteral(
'world',
{
local: 'Local',
world: 'World',
},
{as: 'switch'},
),
viewportShading: types.stringLiteral(
showAxes: types.boolean(true, {label: 'Axes'}),
showGrid: types.boolean(true, {label: 'Grid'}),
showOverlayIcons: types.boolean(false, {label: 'Overlay Icons'}),
resolution: types.number(1440, {label: 'Resolution'}),
shading: types.stringLiteral(
'rendered',
{
flat: 'Flat',
@ -318,7 +304,32 @@ const editorSheetObjectConfig = types.compound({
solid: 'Solid',
wireframe: 'Wireframe',
},
{as: 'menu'},
{as: 'menu', label: 'Shading'},
),
},
{label: 'Viewport Config'},
),
transformControls: types.compound(
{
mode: types.stringLiteral(
'translate',
{
translate: 'Translate',
rotate: 'Rotate',
scale: 'Scale',
},
{as: 'switch', label: 'Mode'},
),
space: types.stringLiteral(
'world',
{
local: 'Local',
world: 'World',
},
{as: 'switch', label: 'Space'},
),
},
{label: 'Transform Controls'},
),
})