Scenes v1 (#658)

* scene structure

* renamed node types to ___Node

* CurrentScene component

* Scenes UI

* active-scene-id global node

* switchable scenes

* put back deprecated plugin thingy

* separate setupScenes func

* renaming

* scene-control plugin

* plugins as collapsibles

* lint

* fix id for plugin

* css fix for plugin

* plugin icons

* style fixes

* style tweak

* component tidy

* TS and lint fixes

* allow non-input plugins

* button disabled state fix

* three and deps upgrade

* renamed postprocessing to renderPipeline

* fix for saves

Author: funwithtriangles

apps/desktop/electron.vite.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
         '@hedron-gl/engine': path.resolve(__dirname, '../../packages/engine/src'),
         '@hedron-gl/midi-manager': path.resolve(__dirname, '../../packages/midi-manager/src'),
         '@hedron-gl/timeline': path.resolve(__dirname, '../../packages/timeline/src'),
+        '@hedron-gl/scene-control': path.resolve(__dirname, '../../packages/scene-control/src'),
       },
     },
   },

apps/desktop/package.json

@@ -33,6 +33,7 @@
     "@hedron-gl/gamepad-input": "^1.0.0-alpha.4",
     "@hedron-gl/lfo-input": "^1.0.0-alpha.4",
     "@hedron-gl/midi-input": "^1.0.0-alpha.4",
+    "@hedron-gl/scene-control": "^1.0.0-alpha.4",
     "@hedron-gl/timeline": "^1.0.0-alpha.4",
     "@hedron-gl/ui-core": "^1.0.0-alpha.4",
     "@tomjs/electron-devtools-installer": "^2.4.0",
@@ -45,18 +46,20 @@
     "lodash.debounce": "^4.0.8",
     "mime-types": "^3.0.2",
     "postprocessing": "6.37.8",
-    "three": "^0.178.0",
+    "three": "^0.185.1",
     "usehooks-ts": "^3.1.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/lodash.debounce": "^4.0.9",
     "@types/mime-types": "^3.0.1",
-    "@types/node": "^25.0.0",
-    "@types/three": "^0.178.1",
+    "@types/node": "^26.1.1",
+    "@types/three": "^0.185.1",
     "electron": "37.3.0",
     "electron-builder": "26.0.12",
-    "electron-vite": "^4.0.0"
+    "electron-vite": "^4.0.0",
+    "vite": "^7.3.1",
+    "typescript": "^5.9.3"
   }
 }

apps/desktop/src/renderer/components/ActiveSketch/ActiveSketch.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  height: 100vh;
+  height: 100%;
 }
 
 .section {

apps/desktop/src/renderer/components/ActiveSketch/ActiveSketch.tsx

@@ -15,7 +15,7 @@ import {
 } from '@hedron-gl/ui-core'
 
 import c from './ActiveSketch.module.css'
-import { useActiveSketch } from '@components/hooks/useActiveSketch'
+import { useSelectedSketch } from '@components/hooks/useSelectedSketch'
 import { engineStore } from '@renderer/engine'
 import { SketchControls } from '@components/SketchControls/SketchControls'
 import { useGroupedNodes } from '@components/hooks/useGroupedNodes'
@@ -39,7 +39,7 @@ const SelectedNodePanel = ({ node, onClose }: { node: Node; onClose: () => void
 }
 
 export const ActiveSketch = () => {
-  const activeSketch = useActiveSketch()
+  const activeSketch = useSelectedSketch()
 
   if (!activeSketch) {
     throw new Error('ActiveSketch component: No activesketch found')
@@ -70,7 +70,7 @@ export const ActiveSketch = () => {
             {
               label: 'Delete Sketch',
               icon: 'delete',
-              onClick: () => engineStore.getState().deleteSketch(activeSketch.id),
+              onClick: () => engineStore.getState().deleteNode(activeSketch.id),
             },
           ]}
         >

apps/desktop/src/renderer/components/App/App.module.css

@@ -63,11 +63,20 @@
   flex-shrink: 0;
 }
 
-.widgetStrip:last-child {
+.pluginControls {
   flex: 1;
   min-height: 0;
+  overflow: auto;
+  padding: 0.25rem 0;
 }
 
 .widgetItem {
   padding: 0.25rem 0;
 }
+
+.plugins {
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}

apps/desktop/src/renderer/components/App/App.tsx

@@ -1,4 +1,12 @@
-import { AppStoreProvider, EngineProvider, WidgetStrip, useAppStore } from '@hedron-gl/ui-core'
+import {
+  AppStoreProvider,
+  Collapsible,
+  EngineProvider,
+  Icon,
+  IconName,
+  useAppStore,
+} from '@hedron-gl/ui-core'
+import { useState } from 'react'
 import c from './App.module.css'
 import { useHandleDrag } from './useHandleDrag'
 import { GlobalClock } from '@components/GlobalClock/GlobalClock'
@@ -10,6 +18,43 @@ import { WorkArea } from '@components/WorkArea/WorkArea'
 import { appStore } from '@renderer/appStore'
 import { engine, pluginViews } from '@renderer/engine'
 
+const PluginGlobalControls = () => {
+  const [openById, setOpenById] = useState<Record<string, boolean>>({})
+
+  return (
+    <div className={c.plugins}>
+      {Object.entries(pluginViews.globalPanel).map(([pluginId, PluginPanel]) => {
+        const enginePlugin = engine.plugins[pluginId]
+        const pluginName = enginePlugin?.name ?? pluginId
+        const pluginIconName = enginePlugin?.iconName ?? 'extension'
+        const isOpen = openById[pluginId] ?? false
+
+        return (
+          <Collapsible
+            type="panel"
+            className={c.pluginItem}
+            key={pluginId}
+            title={
+              <>
+                <Icon name={pluginIconName as IconName} /> {pluginName}
+              </>
+            }
+            isOpen={isOpen}
+            onToggle={(nextOpen) =>
+              setOpenById((prev) => ({
+                ...prev,
+                [pluginId]: nextOpen,
+              }))
+            }
+          >
+            <PluginPanel engine={engine} />
+          </Collapsible>
+        )
+      })}
+    </div>
+  )
+}
+
 const AppContent = (): JSX.Element => {
   const sketchesDir = useAppStore((state) => state.sketchesDir)
   const isProjectLoaded = sketchesDir !== null
@@ -34,9 +79,9 @@ const AppContent = (): JSX.Element => {
                 <VideoControls />
               </div>
             </div>
-            {/* The above widgets need to be converted to plugins */}
-            <div className={c.widgetStrip}>
-              <WidgetStrip engine={engine} pluginViews={pluginViews.globalPanel} />
+
+            <div className={c.pluginControls}>
+              <PluginGlobalControls />
             </div>
           </>
         )}

apps/desktop/src/renderer/components/CurrentScene/CurrentScene.module.css

@@ -0,0 +1,27 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sceneHeader {
+  display: flex;
+  align-items: center;
+  color: var(--textColorLight2);
+  gap: var(--gapLarge);
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: var(--gapSmall) var(--gapLarge);
+  padding-top: var(--gapSmall);
+  padding-bottom: var(--gapSmall);
+  background: var(--bgColorDark4);
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+}
+
+.intro {
+  padding: calc(var(--gapMega) - var(--gapLarge));
+}

apps/desktop/src/renderer/components/CurrentScene/CurrentScene.tsx

@@ -0,0 +1,75 @@
+import {
+  Button,
+  Icon,
+  Panel,
+  PanelBody,
+  PanelHeader,
+  PopoutMenu,
+  sceneIcon,
+  useEngineStore,
+} from '@hedron-gl/ui-core'
+import c from './CurrentScene.module.css'
+import { useAppStore } from '@renderer/appStore'
+import { Sketches } from '@components/Sketches/Sketches'
+
+export const CurrentScene = () => {
+  const sceneIds = useEngineStore((state) => state.sceneIds)
+  const deleteScene = useEngineStore((state) => state.deleteScene)
+
+  const selectedSceneId = useAppStore((state) => state.selectedSceneId)
+  const setSelectedSceneId = useAppStore((state) => state.setSelectedSceneId)
+  const activeScene = useEngineStore((state) =>
+    selectedSceneId ? state.nodes[selectedSceneId] : undefined,
+  )
+
+  const handleDeleteCurrentScene = () => {
+    if (!selectedSceneId) {
+      return
+    }
+
+    const fallbackSceneId = sceneIds.find((id) => id !== selectedSceneId)
+
+    if (fallbackSceneId) {
+      setSelectedSceneId(fallbackSceneId)
+    }
+
+    deleteScene(selectedSceneId)
+  }
+
+  const hasActiveScene = activeScene?.nodeType === 'scene'
+  const sceneTitle = hasActiveScene ? activeScene.title : 'No Scene Selected'
+
+  return (
+    <div className={c.wrapper}>
+      <header className={c.sceneHeader}>
+        <Icon name={sceneIcon} /> {sceneTitle}
+        <PopoutMenu
+          className="ml-auto"
+          items={[
+            {
+              label: 'Delete Scene',
+              icon: 'delete',
+              onClick: handleDeleteCurrentScene,
+            },
+          ]}
+        >
+          <Button type="ghost" iconName="more_horiz" disabled={!hasActiveScene} />
+        </PopoutMenu>
+      </header>
+      <div className={c.content}>
+        {hasActiveScene ? (
+          <Sketches />
+        ) : (
+          <div className={c.intro}>
+            <Panel>
+              <PanelHeader iconName="info">Add A Scene</PanelHeader>
+              <PanelBody>
+                Use the &quot;Add Scene&quot; button in the Scenes panel to create your first scene.
+              </PanelBody>
+            </Panel>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

apps/desktop/src/renderer/components/GlobalDialogs/SketchModulesDialog/SketchCard.tsx

@@ -11,7 +11,8 @@ import {
   useEngineStore,
 } from '@hedron-gl/ui-core'
 
-import { useSetActiveSketchId } from '@components/hooks/useSetActiveSketchId'
+import { useSetSelectedSketchId } from '@components/hooks/useSetSelectedSketchId'
+import { useAppStore } from '@renderer/appStore'
 
 interface SketchCardProps {
   item: SketchModuleItem
@@ -25,14 +26,19 @@ export const SketchCard = ({
   },
   closeDialog,
 }: SketchCardProps) => {
-  const setActiveSketchId = useSetActiveSketchId()
-  const addSketch = useEngineStore((state) => state.addSketch)
+  const setSelectedSketchId = useSetSelectedSketchId()
+  const selectedSceneId = useAppStore((state) => state.selectedSceneId)
+  const addSketchToScene = useEngineStore((state) => state.addSketchToScene)
 
   const onButtonClick = useCallback(() => {
-    const id = addSketch(moduleId)
-    setActiveSketchId(id)
+    if (!selectedSceneId) {
+      return
+    }
+
+    const id = addSketchToScene(selectedSceneId, moduleId)
+    setSelectedSketchId(id)
     closeDialog()
-  }, [addSketch, closeDialog, moduleId, setActiveSketchId])
+  }, [selectedSceneId, addSketchToScene, closeDialog, moduleId, setSelectedSketchId])
 
   const numParams = nodes.filter((n) => n.nodeType === 'param').length
   const numShots = nodes.filter((n) => n.nodeType === 'shot').length
@@ -51,7 +57,7 @@ export const SketchCard = ({
         )}
       </CardContent>
       <CardActions>
-        <Button onClick={onButtonClick} iconName="add">
+        <Button onClick={onButtonClick} iconName="add" disabled={!selectedSceneId}>
           Add To Scene
         </Button>
       </CardActions>

apps/desktop/src/renderer/components/GlobalDialogs/SketchModulesDialog/SketchModulesDialog.tsx

@@ -5,14 +5,16 @@ import { useSketchesSearch } from './useSketchesSearch'
 import { SketchCard } from './SketchCard'
 import { GlobalDialogProps } from '@components/GlobalDialogs/types'
 import { useSketchModuleList } from '@components/hooks/useSketchModuleList'
-import { useSetActiveSketchId } from '@components/hooks/useSetActiveSketchId'
+import { useSetSelectedSketchId } from '@components/hooks/useSetSelectedSketchId'
+import { useAppStore } from '@renderer/appStore'
 
 export const SketchModulesDialog = ({ closeDialog }: GlobalDialogProps) => {
   const sketchModules = useSketchModuleList()
   const { searchTerm, setSearchTerm, filteredModules } = useSketchesSearch(sketchModules)
   const inputRef = useRef<HTMLInputElement>(null)
-  const setActiveSketchId = useSetActiveSketchId()
-  const addSketch = useEngineStore((state) => state.addSketch)
+  const setSelectedSketchId = useSetSelectedSketchId()
+  const selectedSceneId = useAppStore((state) => state.selectedSceneId)
+  const addSketchToScene = useEngineStore((state) => state.addSketchToScene)
 
   useEffect(() => {
     // Focus the search input when dialog opens
@@ -23,10 +25,10 @@ export const SketchModulesDialog = ({ closeDialog }: GlobalDialogProps) => {
   }, [])
 
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && filteredModules.length > 0) {
+    if (e.key === 'Enter' && filteredModules.length > 0 && selectedSceneId) {
       const top = filteredModules[0]
-      const id = addSketch(top.moduleId)
-      setActiveSketchId(id)
+      const id = addSketchToScene(selectedSceneId, top.moduleId)
+      setSelectedSketchId(id)
       closeDialog()
     }
   }