Shared sketches across scenes

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

@@ -45,10 +45,11 @@ export const ActiveSketch = () => {
     throw new Error('ActiveSketch component: No activesketch found')
   }
 
-  const nodeGroups = useGroupedNodes(activeSketch.nodeIds, activeSketch.moduleId)
+  const nodeGroups = useGroupedNodes(activeSketch.childGroups.nodeIds, activeSketch.moduleId)
 
   const selectedNode = useSelectedNode()
   const closeSelectedNodePanel = useOnSelectNode(activeSketch.id, null)
+  const openSketchOptions = useOnSelectNode(activeSketch.id, activeSketch.id)
 
   return (
     <div className={c.container}>
@@ -57,6 +58,11 @@ export const ActiveSketch = () => {
         <PopoutMenu
           className="ml-auto"
           items={[
+            {
+              label: 'Sketch Options',
+              icon: 'settings',
+              onClick: openSketchOptions,
+            },
             {
               label: 'Move Up',
               icon: 'arrow_upward',

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

@@ -21,3 +21,19 @@
   color: var(--textColorLight2);
   font-style: italic;
 }
+
+.sceneList {
+  display: flex;
+  gap: var(--gapXLarge);
+}
+
+.sceneItem {
+  display: flex;
+  align-items: center;
+  gap: var(--gapSmall);
+  color: var(--textColor1);
+}
+
+.sceneLabel {
+  line-height: 1.2;
+}

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

@@ -1,23 +1,6 @@
-import {
-  Icon,
-  MiniTabs,
-  MiniTabsItem,
-  PopoutMenu,
-  useEngineStore,
-  useAppStore,
-  ParamNumberOptions,
-  HedronErrorBoundary,
-  inputIcon,
-  PanelSubHeader,
-  Button,
-  IconName,
-} from '@hedron-gl/ui-core'
-import { useCallback, useMemo } from 'react'
-import { IPlugin } from '@hedron-gl/engine'
-import c from './SelectedNode.module.css'
+import { SelectedParamOrShot } from './SelectedParamOrShot'
+import { SelectedSketch } from './SelectedSketch'
 import { useSelectedNode } from '@components/hooks/useSelectedNode'
-import { pluginViews, engine, engineStore } from '@renderer/engine'
-import { useInputsWithNode } from '@components/hooks/useInputsWithNode'
 
 export const SelectedNode = () => {
   const selectedNode = useSelectedNode()
@@ -28,115 +11,13 @@ export const SelectedNode = () => {
     )
   }
 
-  const selectedInputId = useAppStore((state) => state.selectedInputs[selectedNode.id])
-  const setSelectedInputId = useAppStore((state) => state.setSelectedInput)
-
-  const currentInput = useEngineStore((state) =>
-    selectedInputId ? state.nodes[selectedInputId] : null,
-  )
-
-  const inputs = useInputsWithNode(selectedNode.id)
-
-  // TODO: Fix types here, maybe we need a "@hedron-gl/plugins" package to handle this sort of thing?
-  // @ts-expect-error -- needs work
-  const PluginView = currentInput && pluginViews.inputPanel[currentInput?.inputType]
-
-  const availableInputs = useMemo(() => {
-    const inputPlugins = Object.values(engine.plugins).filter(
-      (plugin) => plugin.inputType,
-    ) as (IPlugin & { inputType: string })[]
-
-    return Object.values(inputPlugins).map((plugin) => ({
-      label: (
-        <>
-          <Icon name={plugin.iconName as IconName} /> {plugin.name}
-        </>
-      ),
-      onClick: () => {
-        const newInput = engine.addInput(plugin.inputType, selectedNode.id)
-        if (!newInput) return
-
-        setSelectedInputId(selectedNode.id, newInput.id)
-      },
-    }))
-  }, [selectedNode.id, setSelectedInputId])
-
-  const onDeleteCurrentInput = useCallback(() => {
-    if (currentInput) {
-      engineStore.getState().deleteNode(currentInput.id)
-
-      if (inputs.length > 1) {
-        // Select remaining input after deletion
-        const otherInput = inputs.find((input) => input.id !== currentInput.id)
-        if (otherInput) {
-          setSelectedInputId(selectedNode.id, otherInput.id)
-        }
-      } else {
-        // If there are no more inputs after deletion, clear selected input
-        setSelectedInputId(selectedNode.id, null)
-      }
-    }
-  }, [currentInput, inputs, selectedNode.id, setSelectedInputId])
-
-  return (
-    <>
-      <PanelSubHeader title={currentInput ? currentInput.title : 'No Inputs'} iconName={inputIcon}>
-        {currentInput && (
-          <PopoutMenu
-            items={[
-              {
-                label: `Delete ${currentInput.title}`,
-                icon: 'delete',
-                onClick: onDeleteCurrentInput,
-              },
-            ]}
-          >
-            <Button type="ghost" size="slim" iconName="more_horiz" />
-          </PopoutMenu>
-        )}
-        <MiniTabs className="ml-auto">
-          {inputs.map((input) => (
-            <MiniTabsItem
-              key={input.id}
-              isActive={selectedInputId === input.id}
-              onClick={() => setSelectedInputId(selectedNode.id, input.id)}
-            >
-              {input.title}
-            </MiniTabsItem>
-          ))}
-          <PopoutMenu items={availableInputs}>
-            <MiniTabsItem>
-              <Icon name="add" />
-            </MiniTabsItem>
-          </PopoutMenu>
-        </MiniTabs>
-      </PanelSubHeader>
-
-      <div className="mb-xl">
-        <HedronErrorBoundary key={currentInput ? currentInput.id : 'no-input'}>
-          {inputs.length === 0 && (
-            <div className={c.noInputs}>Add inputs to this node using the plus (+) button</div>
-          )}
-          {PluginView && <PluginView input={currentInput} engine={engine} />}
-        </HedronErrorBoundary>
-      </div>
-      {selectedNode.nodeType === 'param' && (
-        <div>
-          <PanelSubHeader
-            title={`Parameter Options: ${selectedNode.valueType}`}
-            iconName="settings"
-          />
-
-          {(() => {
-            switch (selectedNode.valueType) {
-              case 'number':
-                return <ParamNumberOptions id={selectedNode.id} />
-              default:
-                return <i>No options yet for {selectedNode.valueType}</i>
-            }
-          })()}
-        </div>
-      )}
-    </>
-  )
+  switch (selectedNode.nodeType) {
+    case 'sketch':
+      return <SelectedSketch sketchNode={selectedNode} />
+    case 'param':
+    case 'shot':
+      return <SelectedParamOrShot node={selectedNode} />
+    default:
+      return <i>Unsupported selected node type {selectedNode.nodeType}</i>
+  }
 }

apps/desktop/src/renderer/components/SelectedNode/SelectedParamOrShot.tsx

@@ -0,0 +1,128 @@
+import {
+  Icon,
+  MiniTabs,
+  MiniTabsItem,
+  PopoutMenu,
+  useEngineStore,
+  useAppStore,
+  ParamNumberOptions,
+  HedronErrorBoundary,
+  inputIcon,
+  PanelSubHeader,
+  Button,
+  IconName,
+} from '@hedron-gl/ui-core'
+import { useCallback, useMemo } from 'react'
+import { IPlugin, ShotNode, ParamNode } from '@hedron-gl/engine'
+import c from './SelectedNode.module.css'
+import { pluginViews, engine, engineStore } from '@renderer/engine'
+import { useInputsWithNode } from '@components/hooks/useInputsWithNode'
+
+export const SelectedParamOrShot = ({ node }: { node: ParamNode | ShotNode }) => {
+  const selectedInputId = useAppStore((state) => state.selectedInputs[node.id])
+  const setSelectedInputId = useAppStore((state) => state.setSelectedInput)
+
+  const currentInput = useEngineStore((state) =>
+    selectedInputId ? state.nodes[selectedInputId] : null,
+  )
+
+  const inputs = useInputsWithNode(node.id)
+
+  // TODO: Fix types here, maybe we need a "@hedron-gl/plugins" package to handle this sort of thing?
+  // @ts-expect-error -- needs work
+  const PluginView = currentInput && pluginViews.inputPanel[currentInput?.inputType]
+
+  const availableInputs = useMemo(() => {
+    const inputPlugins = Object.values(engine.plugins).filter(
+      (plugin) => plugin.inputType,
+    ) as (IPlugin & { inputType: string })[]
+
+    return Object.values(inputPlugins).map((plugin) => ({
+      label: (
+        <>
+          <Icon name={plugin.iconName as IconName} /> {plugin.name}
+        </>
+      ),
+      onClick: () => {
+        const newInput = engine.addInput(plugin.inputType, node.id)
+        if (!newInput) return
+
+        setSelectedInputId(node.id, newInput.id)
+      },
+    }))
+  }, [node.id, setSelectedInputId])
+
+  const onDeleteCurrentInput = useCallback(() => {
+    if (currentInput) {
+      engineStore.getState().deleteNode(currentInput.id)
+
+      if (inputs.length > 1) {
+        const otherInput = inputs.find((input) => input.id !== currentInput.id)
+        if (otherInput) {
+          setSelectedInputId(node.id, otherInput.id)
+        }
+      } else {
+        setSelectedInputId(node.id, null)
+      }
+    }
+  }, [currentInput, inputs, node.id, setSelectedInputId])
+
+  return (
+    <>
+      <PanelSubHeader title={currentInput ? currentInput.title : 'No Inputs'} iconName={inputIcon}>
+        {currentInput && (
+          <PopoutMenu
+            items={[
+              {
+                label: `Delete ${currentInput.title}`,
+                icon: 'delete',
+                onClick: onDeleteCurrentInput,
+              },
+            ]}
+          >
+            <Button type="ghost" size="slim" iconName="more_horiz" />
+          </PopoutMenu>
+        )}
+        <MiniTabs className="ml-auto">
+          {inputs.map((input) => (
+            <MiniTabsItem
+              key={input.id}
+              isActive={selectedInputId === input.id}
+              onClick={() => setSelectedInputId(node.id, input.id)}
+            >
+              {input.title}
+            </MiniTabsItem>
+          ))}
+          <PopoutMenu items={availableInputs}>
+            <MiniTabsItem>
+              <Icon name="add" />
+            </MiniTabsItem>
+          </PopoutMenu>
+        </MiniTabs>
+      </PanelSubHeader>
+
+      <div className="mb-xl">
+        <HedronErrorBoundary key={currentInput ? currentInput.id : 'no-input'}>
+          {inputs.length === 0 && (
+            <div className={c.noInputs}>Add inputs to this node using the plus (+) button</div>
+          )}
+          {PluginView && <PluginView input={currentInput} engine={engine} />}
+        </HedronErrorBoundary>
+      </div>
+      {node.nodeType === 'param' && (
+        <div>
+          <PanelSubHeader title={`Parameter Options: ${node.valueType}`} iconName="settings" />
+
+          {(() => {
+            switch (node.valueType) {
+              case 'number':
+                return <ParamNumberOptions id={node.id} />
+              default:
+                return <i>No options yet for {node.valueType}</i>
+            }
+          })()}
+        </div>
+      )}
+    </>
+  )
+}

apps/desktop/src/renderer/components/SelectedNode/SelectedSketch.tsx

@@ -0,0 +1,54 @@
+import {
+  PanelSubHeader,
+  sceneIcon,
+  useAppStore,
+  useEngine,
+  useSceneNodes,
+} from '@hedron-gl/ui-core'
+import { useCallback } from 'react'
+import { SketchNode } from '@hedron-gl/engine'
+import c from './SelectedNode.module.css'
+
+export const SelectedSketch = ({ sketchNode }: { sketchNode: SketchNode }) => {
+  const selectedSceneId = useAppStore((state) => state.selectedSceneId)
+  const engine = useEngine()
+  const scenes = useSceneNodes()
+
+  const onSceneChange = useCallback(
+    (sceneId: string, shouldInclude: boolean) => {
+      if (shouldInclude) {
+        engine.addChildToNode(sceneId, 'sketchIds', sketchNode.id)
+      } else {
+        engine.removeChildFromNode(sceneId, 'sketchIds', sketchNode.id)
+      }
+    },
+    [engine, sketchNode.id],
+  )
+
+  return (
+    <>
+      <PanelSubHeader
+        iconName={sceneIcon}
+        title="Share this sketch instance across multiple scenes"
+      />
+      <div className={c.sceneList}>
+        {scenes.map((scene) => {
+          const isCurrentScene = scene.id === selectedSceneId
+          const isIncluded = scene.childGroups.sketchIds.includes(sketchNode.id)
+
+          return (
+            <label key={scene.id} className={c.sceneItem}>
+              <input
+                type="checkbox"
+                checked={isIncluded}
+                disabled={isCurrentScene}
+                onChange={(event) => onSceneChange(scene.id, event.target.checked)}
+              />
+              <span className={c.sceneLabel}>{scene.title}</span>
+            </label>
+          )
+        })}
+      </div>
+    </>
+  )
+}