variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Group editor's props into compound props (r3f)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/plugin-r3f/src/components/EditableProxy.tsx
View file

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

4
packages/plugin-r3f/src/components/Editor.tsx
View file

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

6
packages/plugin-r3f/src/components/ProxyManager.tsx
View file

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

12
packages/plugin-r3f/src/components/UI.tsx
View file

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

55
packages/plugin-r3f/src/store.ts
View file

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