group -> inputGroup

clarkmcc · Feb 4, 2024 · a72429f · a72429f
1 parent 94c3760
commit a72429f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 29 deletions.
diff --git a/lib/NodeGraphEditorEllmers.stories.tsx b/lib/NodeGraphEditorEllmers.stories.tsx
@@ -178,37 +178,37 @@ const meta = {
               {
                 name: 'Distribution',
                 id: 'distribution',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'specularDistribution',
               },
               {
                 name: 'IOR Level',
                 id: 'iorLevel',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'number',
               },
               {
                 name: 'Tint',
                 id: 'tint',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'color',
               },
               {
                 name: 'Anisotropic',
                 id: 'anisotropic',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'number',
               },
               {
                 name: 'Anisotropic Rotation',
                 id: 'anisotropicRotation',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'number',
               },
               {
                 name: 'Strength',
                 id: 'strength',
-                group: 'Emission',
+                inputGroup: 'Emission',
                 valueType: 'number',
               },
             ],

diff --git a/lib/NodeGraphEditorInputGroups.stories.tsx b/lib/NodeGraphEditorInputGroups.stories.tsx
@@ -155,37 +155,37 @@ const meta = {
               {
                 name: 'Distribution',
                 id: 'distribution',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'specularDistribution',
               },
               {
                 name: 'IOR Level',
                 id: 'iorLevel',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'number',
               },
               {
                 name: 'Tint',
                 id: 'tint',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'color',
               },
               {
                 name: 'Anisotropic',
                 id: 'anisotropic',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'number',
               },
               {
                 name: 'Anisotropic Rotation',
                 id: 'anisotropicRotation',
-                group: 'Specular',
+                inputGroup: 'Specular',
                 valueType: 'number',
               },
               {
                 name: 'Strength',
                 id: 'strength',
-                group: 'Emission',
+                inputGroup: 'Emission',
                 valueType: 'number',
               },
             ],

diff --git a/lib/config.ts b/lib/config.ts
@@ -134,7 +134,7 @@ export interface NodeInputConfig {
    * any other inputs with this group name will be rendered under a collapsable
    * accordion.
    */
-  group?: string
+  inputGroup?: string
 }
 
 export interface NodeOutputConfig {
@@ -231,14 +231,14 @@ export class GraphConfig {
   registerCustomNode<T>(
     name: string,
     type: string,
-    group: string,
+    theme: string,
     node: JSXElementConstructor<T>,
     inputs: NodeInputConfig[],
     outputs: NodeOutputConfig[],
   ) {
     this.customNodes[type] = node
     this.nodeTypes[type] = {
-      theme: group,
+      theme: theme,
       name,
       inputs: inputs,
       outputs: outputs,
@@ -288,8 +288,8 @@ export class GraphConfig {
     return this.nodeTypes[type]
   }
 
-  nodeConfigsByGroup(group: string): NodeConfig[] {
-    return Object.values(this.nodeTypes).filter((n) => n.theme === group)
+  nodeConfigsByTheme(theme: string): NodeConfig[] {
+    return Object.values(this.nodeTypes).filter((n) => n.theme === theme)
   }
 
   nodeThemeConfigs(): WithType<NodeThemeConfig, string>[] {

diff --git a/lib/hooks/node.ts b/lib/hooks/node.ts
@@ -15,13 +15,13 @@ const INPUT_GROUPS_FIELD = '__inputGroupsExpanded'
  * A drop-in replacement for the useState hook that stores whether an input group is expanded
  * or not in the node's data object. It shares the same underlying array of expanded groups
  * with other hooks that use the same node ID.
- * @param group
+ * @param inputGroup
  */
 export function useNodeInputGroupState(
-  group: string,
+  inputGroup: string,
 ): [boolean, (newState: boolean) => void] {
   const nodeId = useNodeId()
-  return useToggleNodeArrayProperty(nodeId!, INPUT_GROUPS_FIELD, group)
+  return useToggleNodeArrayProperty(nodeId!, INPUT_GROUPS_FIELD, inputGroup)
 }
 
 /**
@@ -52,7 +52,7 @@ function useToggleNodeArrayProperty(
     data[INPUT_GROUPS_FIELD].includes(key),
   )
   const toggleProperty = useCallback(
-    (newState) => {
+    (newState: React.SetStateAction<boolean>) => {
       setIsEnabled(newState)
 
       updateNodeData(nodeId, (node) => {

diff --git a/lib/node-types.tsx b/lib/node-types.tsx
@@ -69,7 +69,7 @@ export function buildNode(nodeConfig: NodeConfig): FunctionComponent<Node> {
     // Construct memoized input and output components based on the node config
     const inputs = useMemo(() => {
       return getInputElements(
-        inputConfigs.filter((input) => !input.group),
+        inputConfigs.filter((input) => !input.inputGroup),
         edges,
       )
     }, [inputConfigs, config, node, edgeIds])
@@ -83,18 +83,18 @@ export function buildNode(nodeConfig: NodeConfig): FunctionComponent<Node> {
     // Input groups are those inputs that should be rendered under a collapsable accordion
     const inputGroups = useMemo(() => {
       const grouped: Record<string, NodeInputConfig[]> = inputConfigs
-        .filter((input) => input.group)
+        .filter((input) => input.inputGroup)
         .reduce((acc: Record<string, NodeInputConfig[]>, input) => {
-          const group = input.group!
-          if (!acc[group]) acc[group] = []
-          acc[group].push(input)
+          const inputGroup = input.inputGroup!
+          if (!acc[inputGroup]) acc[inputGroup] = []
+          acc[inputGroup].push(input)
           return acc
         }, {})
 
-      return Object.entries(grouped).map(([group, inputs]) => (
+      return Object.entries(grouped).map(([inputGroup, inputs]) => (
         <InputGroup
-          label={group}
-          key={group}
+          label={inputGroup}
+          key={inputGroup}
           handles={getHandlesForInputs(inputs)}
         >
           {getInputElements(inputs, edges)}