FiberControls: Fixed subscription logic. Added size and camera proper…

…ties

packages/three-fiber/src/controls/FiberControls.tsx

@@ -9,6 +9,7 @@ import {
 } from "@react-three/fiber"
 import { folder, useControls } from "leva"
 import { StoreType } from "leva/dist/declarations/src/types"
+import { useLayoutEffect } from "react"
 import { ThreeEditor } from "../ThreeEditor"
 
 function FiberDisplay({
@@ -32,13 +33,25 @@ function FiberDisplay({
  },
  frameloop: { value: "always", disabled: true, order: -1 },
  pointer: { value: { x: 0, y: 0 }, disabled: true, order: 0 },
+ size: folder({
+ width: { value: 0, disabled: true },
+ height: { value: 0, disabled: true },
+ top: { value: 0, disabled: true },
+ left: { value: 0, disabled: true },
+ updateStyle: { value: false, disabled: true }
+ }),
+ camera: folder({
+ type: { value: "undefined", disabled: true },
+ uuid: { value: "undefined", disabled: true },
+ name: { value: "undefined", disabled: true }
+ }),
  clock: folder({
  elapsedTime: { value: 0, disabled: true }
  }),
  events: folder({
  priorityE: { label: "priority", value: 1, disabled: true },
  enabled: { value: true, disabled: true },
- connected: { value: false, disabled: true }
+ connected: { value: "undefined", disabled: true }
  }),
  internal: folder({
  active: { value: false, disabled: true },
@@ -83,11 +96,26 @@ function syncDataWithState(data: any, state: RootState) {
  data["fiber.frameloop"].value = state.frameloop
  data["fiber.pointer"].value = { x: state.pointer.x, y: state.pointer.y }
 
+ data["fiber.size.height"].value = state.size?.height
+ data["fiber.size.width"].value = state.size?.width
+ data["fiber.size.top"].value = state.size?.top
+ data["fiber.size.left"].value = state.size?.left
+ data["fiber.size.updateStyle"].value = state.size?.updateStyle
+
+ data["fiber.camera.type"].value = state.camera?.type
+ data["fiber.camera.name"].value = state.camera?.name
+ data["fiber.camera.uuid"].value = state.camera?.uuid
+
  data["fiber.clock.elapsedTime"].value = state.clock.elapsedTime
 
  data["fiber.events.priorityE"].value = state.events.priority
  data["fiber.events.enabled"].value = state.events.enabled
- data["fiber.events.connected"].value = state.events.connected
+ data["fiber.events.connected"].value =
+ state.events.connected === false
+ ? "false"
+ : state.events.connected === undefined
+ ? "undefined"
+ : state.events.connected.nodeName.toLowerCase()
 
  data["fiber.internal.active"].value = state.internal.active
  data["fiber.internal.priorityI"].value = state.internal.priority
@@ -105,17 +133,21 @@ function FiberMonitor({
  const editor = useEditor<ThreeEditor>()
 
  // The after effect never stops firing in v8 so we get constant updates.
- addAfterEffect(() => {
- if (render && !render()) return
- const data = panel.getData() as any
- const state =
- data["fiber.root"].value === "appRoot"
- ? editor.appRoot!.store.getState()
- : editor.editorRoot!.store.getState()
+ useLayoutEffect(() => {
+ const unsub = addAfterEffect(() => {
+ if (render && !render()) return
+
+ const data = panel.getData() as any
+ const state =
+ data["fiber.root"].value === "appRoot"
+ ? editor.appRoot!.store.getState()
+ : editor.editorRoot!.store.getState()
 
- syncDataWithState(data, state)
- panel.setState({ data })
- })
+ syncDataWithState(data, state)
+ panel.setState({ data })
+ })
+ return () => unsub()
+ }, [editor, panel, render])
 
  return null
 }