From 1d4a403efe7d03b2b29ab245a4b60f9466ea39d8 Mon Sep 17 00:00:00 2001 From: Steven Roussey Date: Sat, 3 Feb 2024 23:53:07 -0800 Subject: [PATCH] Rename some things --- lib/components/NodeContainer.tsx | 14 ++-- lib/config.ts | 70 +++++++++---------- lib/hooks/node.ts | 8 +-- lib/node-types.tsx | 16 ++--- lib/stories/NodeGraphEditor.stories.tsx | 36 +++++----- .../NodeGraphEditorCustomInput.stories.tsx | 6 +- .../NodeGraphEditorCustomNode.stories.tsx | 2 +- ...odeGraphEditorInheritingOutput.stories.tsx | 6 +- .../NodeGraphEditorInputGroups.stories.tsx | 22 +++--- lib/stories/NodeGraphEditorLayout.stories.tsx | 6 +- .../NodeGraphEditorPersist.stories.tsx | 10 +-- 11 files changed, 95 insertions(+), 101 deletions(-) diff --git a/lib/components/NodeContainer.tsx b/lib/components/NodeContainer.tsx index 4d7e98d..4d7b767 100644 --- a/lib/components/NodeContainer.tsx +++ b/lib/components/NodeContainer.tsx @@ -4,7 +4,7 @@ import { NodeHeader } from './NodeHeader' import { GraphConfig, NodeConfig, - NodeGroupConfig, + NodeThemeConfig, NodeInputConfig, NodeOutputConfig, } from '../config' @@ -27,7 +27,7 @@ export function NodeContainer({ }: NodeContainerProps) { const config = useGraphStore((store) => store.config) const nodeConfig = config.getNodeConfig(node.type!)! - const nodeGroupConfig = config.getNodeGroupConfig(nodeConfig.group) + const nodeThemeConfig = config.getNodeThemeConfig(nodeConfig.theme) const [collapsed, toggleCollapsed] = useNodeCollapsed() if (collapsed) { @@ -35,7 +35,7 @@ export function NodeContainer({ ) @@ -54,7 +54,7 @@ export function NodeContainer({ > @@ -67,14 +67,14 @@ export function NodeContainer({ type CollapsedNodeContainerProps = { node: Node nodeConfig: NodeConfig - nodeGroupConfig: NodeGroupConfig + nodeThemeConfig: NodeThemeConfig toggleCollapsed?: () => void } function CollapsedNodeContainer({ node, nodeConfig, - nodeGroupConfig, + nodeThemeConfig, toggleCollapsed, }: CollapsedNodeContainerProps) { const config = useGraphStore((store) => store.config) @@ -100,7 +100,7 @@ function CollapsedNodeContainer({ > diff --git a/lib/config.ts b/lib/config.ts index 794ded8..6eb9398 100644 --- a/lib/config.ts +++ b/lib/config.ts @@ -19,15 +19,15 @@ export interface IGraphConfig { valueTypes: ValueTypes /** - * Groups of nodes that can be used to organize the node palette. Also allows styling + * Groups of nodes that can be used to organize the node palette, allowing styling * and configuring the colors of the nodes as a group. */ - nodeGroups: NodeGroupTypes + nodeThemes: NodeThemeTypes /** * The nodes types that are registered and can be created in the graph */ - nodes: NodeTypes + nodeTypes: NodeTypes } export type KeyBindings = { @@ -41,8 +41,8 @@ export type ValueTypes = { [key: string]: ValueTypeConfig } -export type NodeGroupTypes = { - [key: string]: NodeGroupConfig +export type NodeThemeTypes = { + [name: string]: NodeThemeConfig } export type NodeTypes = { @@ -102,13 +102,13 @@ export interface Option { value: string } -export interface NodeGroupConfig { +export interface NodeThemeConfig { name: string color: string } export interface NodeConfig { - group: keyof IGraphConfig['nodeGroups'] + theme: keyof IGraphConfig['nodeThemes'] name: string inputs?: NodeInputConfig[] outputs?: NodeOutputConfig[] @@ -136,7 +136,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 { @@ -173,10 +173,10 @@ export type InputProps = BaseInputProps & NodeInputConfig & ValueTypeConfig export class GraphConfig { readonly valueTypes: ValueTypes = {} readonly keybindings: KeyBindings - readonly nodeGroups: { - [key: string]: NodeGroupConfig + readonly nodeThemes: { + [key: string]: NodeThemeConfig } = {} - private readonly nodes: { + private readonly nodeTypes: { [key: string]: NodeConfig } = {} private customNodes: { @@ -200,8 +200,8 @@ export class GraphConfig { color: '#a1a1a1', inputType: null, } - this.nodeGroups = props?.nodeGroups ?? this.nodeGroups - this.nodes = props?.nodes ?? this.nodes + this.nodeThemes = props?.nodeThemes ?? this.nodeThemes + this.nodeTypes = props?.nodeTypes ?? this.nodeTypes for (const [key, value] of Object.entries(getBuiltinInputs())) { this.inputs[key] = value } @@ -209,13 +209,7 @@ export class GraphConfig { validate(): GraphConfig { const errors: string[] = [] - Object.values(this.nodes).forEach((node) => { - const groups = Object.keys(this.nodeGroups) - if (!this.nodeGroups[node.group]) { - errors.push( - `Node '${node.name}' belongs to a node group that does not exist: '${node.group}'. Available groups: ${groups.join(', ')}`, - ) - } + Object.values(this.nodeTypes).forEach((node) => { if (node.inputs) { node.inputs.forEach((input) => { if (!this.valueTypes[input.valueType]) { @@ -244,14 +238,14 @@ export class GraphConfig { registerCustomNode( name: string, type: string, - group: string, + theme: string, node: JSXElementConstructor, inputs: NodeInputConfig[], outputs: NodeOutputConfig[], ) { this.customNodes[type] = node - this.nodes[type] = { - group, + this.nodeTypes[type] = { + theme: theme, name, inputs: inputs, outputs: outputs, @@ -291,44 +285,44 @@ export class GraphConfig { } nodeConfigs(): WithType[] { - return Object.entries(this.nodes).map(([type, value]) => ({ + return Object.entries(this.nodeTypes).map(([type, value]) => ({ ...value, type, })) } - getNodeConfig(type: string): NodeConfig | null { - return this.nodes[type] + getNodeConfig(type: string): NodeConfig { + return this.nodeTypes[type] } - nodeConfigsByGroup(group: string): WithType[] { - return Object.entries(this.nodes) + nodeConfigsByTheme(theme: string): WithType[] { + return Object.entries(this.nodeTypes) .map(([type, n]) => ({ type, ...n })) - .filter((n) => n.group === group) + .filter((n) => n.theme === theme) } - nodeGroupConfigs(): WithType[] { - return Object.entries(this.nodeGroups).map(([type, value]) => ({ + nodeThemeConfigs(): WithType[] { + return Object.entries(this.nodeThemes).map(([type, value]) => ({ ...value, type, })) } getRegisteredNodeTypes() { - return Object.entries(this.nodeGroups).map(([type, group]) => ({ + return Object.entries(this.nodeThemes).map(([type, theme]) => ({ type, - name: group.name, - nodes: this.nodeConfigsByGroup(type).map((node) => ({ + name: theme.name, + nodes: this.nodeConfigsByTheme(type).map((node) => ({ type: node.type, name: node.name, })), })) } - getNodeGroupConfig( + getNodeThemeConfig( nodeType: T, - ): NodeGroupConfig { - return this.nodeGroups[nodeType as keyof NodeGroupTypes] + ): NodeThemeConfig { + return this.nodeThemes[nodeType as keyof NodeThemeTypes] } valueType(type: T): ValueTypeConfig { @@ -370,7 +364,7 @@ export class GraphConfig { node: NodeConfig, ) => JSXElementConstructor, ): Record> { - return Object.entries(this.nodes) + return Object.entries(this.nodeTypes) .map(([type, node]): [string, JSXElementConstructor] => { if (node.custom) { return [type, this.customNode(type)] diff --git a/lib/hooks/node.ts b/lib/hooks/node.ts index c99f60c..ddf8dd4 100644 --- a/lib/hooks/node.ts +++ b/lib/hooks/node.ts @@ -18,13 +18,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) } /** @@ -56,7 +56,7 @@ function useToggleNodeArrayProperty( data![INPUT_GROUPS_FIELD]?.includes(key) ?? false, ) const toggleProperty = useCallback( - (newState) => { + (newState: React.SetStateAction) => { setIsEnabled(newState) updateNodeData(nodeId, (node) => { diff --git a/lib/node-types.tsx b/lib/node-types.tsx index 4486d59..9359a3e 100644 --- a/lib/node-types.tsx +++ b/lib/node-types.tsx @@ -70,7 +70,7 @@ export function buildNode( // 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]) @@ -84,18 +84,18 @@ export function buildNode( // Input groups are those inputs that should be rendered under a collapsable accordion const inputGroups = useMemo(() => { const grouped: Record = inputConfigs - .filter((input) => input.group) + .filter((input) => input.inputGroup) .reduce((acc: Record, 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]) => ( {getInputElements(inputs, edges)} diff --git a/lib/stories/NodeGraphEditor.stories.tsx b/lib/stories/NodeGraphEditor.stories.tsx index be5bd20..d67b68f 100644 --- a/lib/stories/NodeGraphEditor.stories.tsx +++ b/lib/stories/NodeGraphEditor.stories.tsx @@ -11,15 +11,15 @@ const simpleConfig: IGraphConfig = { defaultValue: '', }, }, - nodeGroups: { + nodeThemes: { default: { name: 'Default', color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { string: { - group: 'default', + theme: 'default', name: 'String', inputs: [ { @@ -138,15 +138,15 @@ export const InputFields: Story = { defaultValue: 'HTTP', }, }, - nodeGroups: { + nodeThemes: { default: { name: 'Default', color: '#0284c7', }, }, - nodes: { + nodeTypes: { inputFields: { - group: 'default', + theme: 'default', name: 'Input Fields', inputs: [ { @@ -262,15 +262,15 @@ export const SelectedEdgeHighlighting: Story = { inputType: null, }, }, - nodeGroups: { + nodeThemes: { geometry: { name: 'Geometry', color: '#059669', }, }, - nodes: { + nodeTypes: { combineXYZ: { - group: 'geometry', + theme: 'geometry', name: 'Combine XYZ', inputs: [ { @@ -298,7 +298,7 @@ export const SelectedEdgeHighlighting: Story = { ], }, points: { - group: 'geometry', + theme: 'geometry', name: 'Points', inputs: [ { @@ -326,7 +326,7 @@ export const SelectedEdgeHighlighting: Story = { ], }, viewer: { - group: 'geometry', + theme: 'geometry', name: 'Viewer', inputs: [ { @@ -401,15 +401,15 @@ export const ArrayInputs: Story = { inputType: null, }, }, - nodeGroups: { + nodeThemes: { geometry: { name: 'Geometry', color: '#059669', }, }, - nodes: { + nodeTypes: { combineXYZ: { - group: 'geometry', + theme: 'geometry', name: 'Combine XYZ', inputs: [ { @@ -437,7 +437,7 @@ export const ArrayInputs: Story = { ], }, viewer: { - group: 'geometry', + theme: 'geometry', name: 'Viewer', inputs: [ { @@ -489,15 +489,15 @@ export const HandleSymbols: Story = { shape: 'diamond', }, }, - nodeGroups: { + nodeThemes: { geometry: { name: 'Geometry', color: '#0284c7', }, }, - nodes: { + nodeTypes: { shapes: { - group: 'geometry', + theme: 'geometry', name: 'Shapes', outputs: [ { diff --git a/lib/stories/NodeGraphEditorCustomInput.stories.tsx b/lib/stories/NodeGraphEditorCustomInput.stories.tsx index dce8f9b..77370ed 100644 --- a/lib/stories/NodeGraphEditorCustomInput.stories.tsx +++ b/lib/stories/NodeGraphEditorCustomInput.stories.tsx @@ -29,15 +29,15 @@ const meta = { const config = useBuildGraphConfig( { valueTypes: {}, - nodeGroups: { + nodeThemes: { default: { name: 'Default', color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { vector: { - group: 'default', + theme: 'default', name: 'Vector', inputs: [ { diff --git a/lib/stories/NodeGraphEditorCustomNode.stories.tsx b/lib/stories/NodeGraphEditorCustomNode.stories.tsx index c7b7186..cc47530 100644 --- a/lib/stories/NodeGraphEditorCustomNode.stories.tsx +++ b/lib/stories/NodeGraphEditorCustomNode.stories.tsx @@ -50,7 +50,7 @@ const meta = { defaultValue: '', }, }, - nodeGroups: { + nodeThemes: { custom: { name: 'Custom', color: '#f43f5e', diff --git a/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx b/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx index 94b2103..51bd0b3 100644 --- a/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx +++ b/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx @@ -45,7 +45,7 @@ const meta = { defaultValue: '', }, }, - nodeGroups: { + nodeThemes: { custom: { name: 'Custom', color: '#f43f5e', @@ -55,10 +55,10 @@ const meta = { color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { inputs: { name: 'Input', - group: 'default', + theme: 'default', inputs: [ { name: 'String', diff --git a/lib/stories/NodeGraphEditorInputGroups.stories.tsx b/lib/stories/NodeGraphEditorInputGroups.stories.tsx index 1075f8e..c7e388d 100644 --- a/lib/stories/NodeGraphEditorInputGroups.stories.tsx +++ b/lib/stories/NodeGraphEditorInputGroups.stories.tsx @@ -76,7 +76,7 @@ const meta = { defaultValue: 'GET', }, }, - nodeGroups: { + nodeThemes: { default: { name: 'Default', color: '#CE4040', @@ -86,9 +86,9 @@ const meta = { color: '#83324A', }, }, - nodes: { + nodeTypes: { number: { - group: 'default', + theme: 'default', name: 'Number', inputs: [ { @@ -107,7 +107,7 @@ const meta = { ], }, color: { - group: 'inputs', + theme: 'inputs', name: 'Color', style: { width: '100px', @@ -129,7 +129,7 @@ const meta = { ], }, bsdf: { - group: 'default', + theme: 'default', name: 'Principled BSDF', inputs: [ { @@ -158,37 +158,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/stories/NodeGraphEditorLayout.stories.tsx b/lib/stories/NodeGraphEditorLayout.stories.tsx index 374a630..07781c7 100644 --- a/lib/stories/NodeGraphEditorLayout.stories.tsx +++ b/lib/stories/NodeGraphEditorLayout.stories.tsx @@ -138,15 +138,15 @@ export const DagreLayout: Story = { defaultValue: '', }, }, - nodeGroups: { + nodeThemes: { default: { name: 'Default', color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { string: { - group: 'default', + theme: 'default', name: 'String', inputs: [ { diff --git a/lib/stories/NodeGraphEditorPersist.stories.tsx b/lib/stories/NodeGraphEditorPersist.stories.tsx index 4c24a5a..d8b4516 100644 --- a/lib/stories/NodeGraphEditorPersist.stories.tsx +++ b/lib/stories/NodeGraphEditorPersist.stories.tsx @@ -135,15 +135,15 @@ export const Persist: Story = { inputType: null, }, }, - nodeGroups: { + nodeThemes: { geometry: { name: 'Geometry', color: '#059669', }, }, - nodes: { + nodeTypes: { combineXYZ: { - group: 'geometry', + theme: 'geometry', name: 'Combine XYZ', inputs: [ { @@ -171,7 +171,7 @@ export const Persist: Story = { ], }, points: { - group: 'geometry', + theme: 'geometry', name: 'Points', inputs: [ { @@ -199,7 +199,7 @@ export const Persist: Story = { ], }, viewer: { - group: 'geometry', + theme: 'geometry', name: 'Viewer', inputs: [ {