Revert "Merge pull request #161" (#162)

This reverts commit 5bd224ae86.

packages/playground/src/shared/r3f-rocket/App.tsx

@@ -1,11 +1,10 @@
 import {editable as e, RefreshSnapshot, SheetProvider} from '@theatre/r3f'
-import {Stars} from '@react-three/drei'
+import { Stars} from '@react-three/drei'
 import {getProject} from '@theatre/core'
-import React, {Suspense, useMemo, useState} from 'react'
+import React, {Suspense, useState} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {useGLTF, PerspectiveCamera} from '@react-three/drei'
 import sceneGLB from './scene.glb'
-import {Color} from 'three'
 
 document.body.style.backgroundColor = '#171717'
 
@@ -56,13 +55,7 @@ function App() {
     >
       <Canvas dpr={[1.5, 2]} linear shadows frameloop="demand">
         <SheetProvider getSheet={() => getProject('Space').sheet('Scene')}>
-          <e.fog
+          <fog attach="fog" args={[bg, 16, 30]} />
-            attach="fog"
-            color={useMemo(() => new Color(bg), [bg])}
-            near={16}
-            far={30}
-            uniqueName="Fog"
-          />
           <color attach="background" args={[bg]} />
           <ambientLight intensity={0.75} />
           <EditableCamera

packages/r3f/src/components/EditableProxy.tsx

@@ -59,15 +59,11 @@ const EditableProxy: VFC<EditableProxyProps> = ({
 
   // Helpers
   const scene = useThree((state) => state.scene)
-  const helper = useMemo<Helper | undefined>(
+  const helper = useMemo<Helper>(
-    () => editable.objectConfig.createHelper?.(object),
+    () => editable.objectConfig.createHelper(object),
     [object],
   )
   useEffect(() => {
-    if (helper == undefined) {
-      return
-    }
-
     if (selected === uniqueName || hovered) {
       scene.add(helper)
       invalidate()
@@ -79,10 +75,6 @@ const EditableProxy: VFC<EditableProxyProps> = ({
     }
   }, [selected, hovered, helper, scene])
   useFrame(() => {
-    if (helper == undefined) {
-      return
-    }
-
     if (helper.update) {
       helper.update()
     }

packages/r3f/src/defaultEditableFactoryConfig.ts

@@ -1,6 +1,5 @@
 import type {EditableFactoryConfig} from './editableFactoryConfigUtils'
 import {
-  createColorPropConfig,
   createNumberPropConfig,
   createVector,
   createVectorPropConfig,
@@ -101,15 +100,6 @@ const defaultEditableFactoryConfig = {
   line: baseObjectConfig,
   lineLoop: baseObjectConfig,
   lineSegments: baseObjectConfig,
-  fog: {
-    props: {
-      color: createColorPropConfig('color'),
-      near: createNumberPropConfig('near', 1, {nudgeMultiplier: 0.1}),
-      far: createNumberPropConfig('far', 1000, {nudgeMultiplier: 0.1}),
-    },
-    useTransformControls: false,
-    icon: 'cloud' as const,
-  },
 }
 
 // Assert that the config is indeed of EditableFactoryConfig without actually

packages/r3f/src/editableFactoryConfigUtils.ts

@@ -17,7 +17,7 @@ type Meta<T> = {
   updateObject?: (object: T) => void
   icon: IconID
   dimensionless?: boolean
-  createHelper?: (object: T) => Helper
+  createHelper: (object: T) => Helper
 }
 export type ObjectConfig<T> = {props: Props} & Meta<T>
 export type EditableFactoryConfig = Partial<
@@ -79,7 +79,7 @@ export const createNumberPropConfig = (
   {nudgeMultiplier = 0.01} = {},
 ): PropConfig<number> => ({
   parse: (props) => {
-    return props[key] ?? defaultValue
+    return props[key] ?? defaultValue ?? 0
   },
   apply: (value, object) => {
     object[key] = value

packages/r3f/src/icons.tsx

@@ -1,8 +1,4 @@
-import {
+import {BsCameraVideoFill, BsFillCollectionFill} from 'react-icons/bs'
-  BsCameraVideoFill,
-  BsFillCollectionFill,
-  BsCloudFill,
-} from 'react-icons/bs'
 import {GiCube, GiLightBulb, GiLightProjector} from 'react-icons/gi'
 import {BiSun} from 'react-icons/bi'
 import React from 'react'
@@ -14,7 +10,6 @@ const icons = {
   spotLight: <GiLightProjector />,
   sun: <BiSun />,
   camera: <BsCameraVideoFill />,
-  cloud: <BsCloudFill />,
 }
 
 export type IconID = keyof typeof icons