Chore: Moved r3f's referenceWindowSize to Theatre

This commit is contained in:
Aria Minaei 2021-07-03 13:36:47 +02:00
parent 20b57011c3
commit 9809042762
3 changed files with 17 additions and 16 deletions

View file

@ -13,6 +13,7 @@ import ViewportSettings from './ViewportSettings'
import type {$FixMe} from '@theatre/shared/utils/types'
import studio from '@theatre/studio'
import {getSelected} from './useSelected'
import {useVal} from '@theatre/dataverse-react'
const UI: VFC = () => {
const [
@ -20,7 +21,6 @@ const UI: VFC = () => {
transformControlsMode,
transformControlsSpace,
viewportShading,
referenceWindowSize,
setTransformControlsMode,
setTransformControlsSpace,
setViewportShading,
@ -30,7 +30,6 @@ const UI: VFC = () => {
state.transformControlsMode,
state.transformControlsSpace,
state.viewportShading,
state.referenceWindowSize,
state.setTransformControlsMode,
state.setTransformControlsSpace,
state.setViewportShading,
@ -38,6 +37,9 @@ const UI: VFC = () => {
shallow,
)
const referenceWindowSize =
useVal(editorObject?.props.referenceWindowSize) ?? 120
if (!editorObject) return <></>
return (

View file

@ -8,19 +8,16 @@ import {useVal} from '@theatre/dataverse-react'
import studio from '@theatre/studio'
const ViewportShadingSettings: VFC = () => {
const [editorObject, referenceWindowSize, setReferenceWindowSize] =
useEditorStore(
(state) => [
state.editorObject,
state.referenceWindowSize,
state.setReferenceWindowSize,
],
shallow,
)
const [editorObject] = useEditorStore(
(state) => [state.editorObject],
shallow,
)
const showAxes = useVal(editorObject?.props.showAxes) ?? true
const showGrid = useVal(editorObject?.props.showGrid) ?? true
const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
const referenceWindowSize =
useVal(editorObject?.props.referenceWindowSize) ?? 120
return (
<div className="flex flex-col gap-3">
@ -76,7 +73,12 @@ const ViewportShadingSettings: VFC = () => {
min={120}
max={400}
onChange={(event) =>
setReferenceWindowSize(Number(event.target.value))
studio.transaction(({set}) => {
set(
editorObject!.props.referenceWindowSize,
Number(event.target.value),
)
})
}
/>
</div>