From 64b74a28fbcd48d44242a75fe80fa12363b1c5fc Mon Sep 17 00:00:00 2001 From: Steven Roussey Date: Thu, 8 Feb 2024 10:40:32 -0800 Subject: [PATCH] Rename some things (#23) * Rename some things * Try and document * inputType as inputEditor * minor name fix in example * Restrict input types to that get rendered to HTML to not generate HTML errors * Change theme to kind * Revert "Restrict input types to that get rendered to HTML to not generate HTML errors" This reverts commit 1a7d05f6a53efb4cb8e7f53c45013d457b2851cf. --- DOCUMENTATION.md | 54 ++++++++++ lib/components/NodeContainer.tsx | 14 +-- lib/config.ts | 100 +++++++++--------- lib/hooks/node.ts | 8 +- lib/node-types.tsx | 16 +-- lib/stories/NodeGraphEditor.stories.tsx | 64 +++++------ .../NodeGraphEditorCustomInput.stories.tsx | 6 +- .../NodeGraphEditorCustomNode.stories.tsx | 4 +- ...odeGraphEditorInheritingOutput.stories.tsx | 20 ++-- .../NodeGraphEditorInputGroups.stories.tsx | 30 +++--- lib/stories/NodeGraphEditorLayout.stories.tsx | 8 +- .../NodeGraphEditorPersist.stories.tsx | 16 +-- 12 files changed, 195 insertions(+), 145 deletions(-) create mode 100644 DOCUMENTATION.md diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md new file mode 100644 index 0000000..1af631a --- /dev/null +++ b/DOCUMENTATION.md @@ -0,0 +1,54 @@ +# Documentation + +```mermaid + +erDiagram + NodeType ||--o{ NodeInput : has + NodeType ||--o{ NodeOutput : has + NodeType ||--o{ NodeKind : has + NodeInput ||--|| ValueType : uses + NodeOutput ||--|| ValueType : uses + ValueType ||..|| InputEditor : uses + NodeInput{ + string name + string id + ValueType valueType + boolean isArray + boolean isConstant + any defaultValue + string inputGroup + } + NodeOutput{ + string name + string id + ValueType valueType + boolean isArray + } + NodeKind{ + string name + string color + } + NodeType{ + string name + string id + string description + NodeInput[] inputs + NodeOutput[] outputs + NodeKind kind + } + ValueType{ + string name + string color + string inputEditor + any defaultValue + } +``` + +## NodeType + +A node type describes a kind of node that can put in a graph. It has a name and a list of inputs and outputs that have handles to connect to other nodes via edges. + +## NodeInput + +A node input is a handle that can be connected to a node output via an edge. + diff --git a/lib/components/NodeContainer.tsx b/lib/components/NodeContainer.tsx index 4d7e98d..f532821 100644 --- a/lib/components/NodeContainer.tsx +++ b/lib/components/NodeContainer.tsx @@ -4,7 +4,7 @@ import { NodeHeader } from './NodeHeader' import { GraphConfig, NodeConfig, - NodeGroupConfig, + NodeKindConfig, 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 nodeKindConfig = config.getNodeKindConfig(nodeConfig.kind) 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 + nodeKindConfig: NodeKindConfig toggleCollapsed?: () => void } function CollapsedNodeContainer({ node, nodeConfig, - nodeGroupConfig, + nodeKindConfig, 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..d091ed2 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 + nodeKinds: NodeKindTypes /** * 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 NodeKindTypes = { + [name: string]: NodeKindConfig } export type NodeTypes = { @@ -67,27 +67,27 @@ interface ValueTypeConfigBase { } export interface ValueTypeConfigOptions extends ValueTypeConfigBase { - inputType: 'options' | 'buttonGroup' + inputEditor: 'options' | 'buttonGroup' options: Option[] defaultValue: Option['value'] // Ensures defaultValue is one of the option values } interface ValueTypeConfigValue extends ValueTypeConfigBase { - inputType: 'value' + inputEditor: 'value' defaultValue: string // Ensures defaultValue is a string } interface ValueTypeConfigCheckbox extends ValueTypeConfigBase { - inputType: 'checkbox' + inputEditor: 'checkbox' defaultValue: boolean // Ensures defaultValue is a boolean } interface ValueTypeConfigCustom extends ValueTypeConfigBase { - inputType: string + inputEditor: string } interface ValueTypeConfigNoInput extends ValueTypeConfigBase { - inputType: null | undefined + inputEditor: null | undefined } export type ValueTypeConfig = @@ -102,13 +102,13 @@ export interface Option { value: string } -export interface NodeGroupConfig { +export interface NodeKindConfig { name: string color: string } export interface NodeConfig { - group: keyof IGraphConfig['nodeGroups'] + kind: keyof IGraphConfig['nodeKinds'] 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 { @@ -149,19 +149,21 @@ export interface NodeOutputConfig { function isValueTypeConfigOptions( config: ValueTypeConfig, ): config is ValueTypeConfigOptions { - return config.inputType === 'options' || config.inputType === 'buttonGroup' + return ( + config.inputEditor === 'options' || config.inputEditor === 'buttonGroup' + ) } function isValueTypeConfigValue( config: ValueTypeConfig, ): config is ValueTypeConfigValue { - return config.inputType === 'value' + return config.inputEditor === 'value' } function isValueTypeConfigCheckbox( config: ValueTypeConfig, ): config is ValueTypeConfigCheckbox { - return config.inputType === 'checkbox' + return config.inputEditor === 'checkbox' } type WithType = T & { @@ -173,10 +175,10 @@ export type InputProps = BaseInputProps & NodeInputConfig & ValueTypeConfig export class GraphConfig { readonly valueTypes: ValueTypes = {} readonly keybindings: KeyBindings - readonly nodeGroups: { - [key: string]: NodeGroupConfig + readonly nodeKinds: { + [key: string]: NodeKindConfig } = {} - private readonly nodes: { + private readonly nodeTypes: { [key: string]: NodeConfig } = {} private customNodes: { @@ -198,10 +200,10 @@ export class GraphConfig { this.valueTypes[ANY] = { name: 'Any', color: '#a1a1a1', - inputType: null, + inputEditor: null, } - this.nodeGroups = props?.nodeGroups ?? this.nodeGroups - this.nodes = props?.nodes ?? this.nodes + this.nodeKinds = props?.nodeKinds ?? this.nodeKinds + this.nodeTypes = props?.nodeTypes ?? this.nodeTypes for (const [key, value] of Object.entries(getBuiltinInputs())) { this.inputs[key] = value } @@ -209,13 +211,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 +240,14 @@ export class GraphConfig { registerCustomNode( name: string, type: string, - group: string, + kind: string, node: JSXElementConstructor, inputs: NodeInputConfig[], outputs: NodeOutputConfig[], ) { this.customNodes[type] = node - this.nodes[type] = { - group, + this.nodeTypes[type] = { + kind, name, inputs: inputs, outputs: outputs, @@ -263,12 +259,12 @@ export class GraphConfig { registerInput( type: string, input: JSXElementConstructor, - valueType: Omit, + valueType: Omit, ) { this.inputs[type] = input this.valueTypes[type] = { ...valueType, - inputType: type, + inputEditor: type, } this.validate() } @@ -285,50 +281,50 @@ export class GraphConfig { getInputComponent( valueType: string, ): JSXElementConstructor | null { - const inputType = this.valueTypes[valueType]?.inputType - if (inputType == null) return null - return this.inputs[inputType] + const inputEditor = this.valueTypes[valueType]?.inputEditor + if (inputEditor == null) return null + return this.inputs[inputEditor] } 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) + nodeConfigsByKind(kind: string): WithType[] { + return Object.entries(this.nodeTypes) .map(([type, n]) => ({ type, ...n })) - .filter((n) => n.group === group) + .filter((n) => n.kind === kind) } - nodeGroupConfigs(): WithType[] { - return Object.entries(this.nodeGroups).map(([type, value]) => ({ + nodeKindConfigs(): WithType[] { + return Object.entries(this.nodeKinds).map(([type, value]) => ({ ...value, type, })) } getRegisteredNodeTypes() { - return Object.entries(this.nodeGroups).map(([type, group]) => ({ + return Object.entries(this.nodeKinds).map(([type, kind]) => ({ type, - name: group.name, - nodes: this.nodeConfigsByGroup(type).map((node) => ({ + name: kind.name, + nodes: this.nodeConfigsByKind(type).map((node) => ({ type: node.type, name: node.name, })), })) } - getNodeGroupConfig( + getNodeKindConfig( nodeType: T, - ): NodeGroupConfig { - return this.nodeGroups[nodeType as keyof NodeGroupTypes] + ): NodeKindConfig { + return this.nodeKinds[nodeType as keyof NodeKindTypes] } valueType(type: T): ValueTypeConfig { @@ -370,7 +366,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..ff87061 100644 --- a/lib/stories/NodeGraphEditor.stories.tsx +++ b/lib/stories/NodeGraphEditor.stories.tsx @@ -7,19 +7,19 @@ const simpleConfig: IGraphConfig = { string: { name: 'String', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, }, - nodeGroups: { + nodeKinds: { default: { name: 'Default', color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { string: { - group: 'default', + kind: 'default', name: 'String', inputs: [ { @@ -105,19 +105,19 @@ export const InputFields: Story = { string: { name: 'String', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, boolean: { name: 'Boolean', color: '#a1a1a1', - inputType: 'checkbox', + inputEditor: 'checkbox', defaultValue: true, }, httpMethod: { name: 'HTTP Method', color: '#06b6d4', - inputType: 'options', + inputEditor: 'options', options: [ { name: 'GET', value: 'GET' }, { name: 'POST', value: 'POST' }, @@ -130,7 +130,7 @@ export const InputFields: Story = { httpProtocol: { name: 'HTTP Method', color: '#0284c7', - inputType: 'buttonGroup', + inputEditor: 'buttonGroup', options: [ { name: 'HTTP', value: 'HTTP' }, { name: 'HTTPS', value: 'HTTPS' }, @@ -138,15 +138,15 @@ export const InputFields: Story = { defaultValue: 'HTTP', }, }, - nodeGroups: { + nodeKinds: { default: { name: 'Default', color: '#0284c7', }, }, - nodes: { + nodeTypes: { inputFields: { - group: 'default', + kind: 'default', name: 'Input Fields', inputs: [ { @@ -248,29 +248,29 @@ export const SelectedEdgeHighlighting: Story = { number: { name: 'Number', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '0', }, vector: { name: 'Vector', color: '#8b5cf6', - inputType: null, + inputEditor: null, }, geometry: { name: 'Geometry', color: '#059669', - inputType: null, + inputEditor: null, }, }, - nodeGroups: { + nodeKinds: { geometry: { name: 'Geometry', color: '#059669', }, }, - nodes: { + nodeTypes: { combineXYZ: { - group: 'geometry', + kind: 'geometry', name: 'Combine XYZ', inputs: [ { @@ -298,7 +298,7 @@ export const SelectedEdgeHighlighting: Story = { ], }, points: { - group: 'geometry', + kind: 'geometry', name: 'Points', inputs: [ { @@ -326,7 +326,7 @@ export const SelectedEdgeHighlighting: Story = { ], }, viewer: { - group: 'geometry', + kind: 'geometry', name: 'Viewer', inputs: [ { @@ -387,29 +387,29 @@ export const ArrayInputs: Story = { number: { name: 'Number', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '0', }, vector: { name: 'Vector', color: '#8b5cf6', - inputType: null, + inputEditor: null, }, geometry: { name: 'Geometry', color: '#059669', - inputType: null, + inputEditor: null, }, }, - nodeGroups: { + nodeKinds: { geometry: { name: 'Geometry', color: '#059669', }, }, - nodes: { + nodeTypes: { combineXYZ: { - group: 'geometry', + kind: 'geometry', name: 'Combine XYZ', inputs: [ { @@ -437,7 +437,7 @@ export const ArrayInputs: Story = { ], }, viewer: { - group: 'geometry', + kind: 'geometry', name: 'Viewer', inputs: [ { @@ -472,32 +472,32 @@ export const HandleSymbols: Story = { circle: { name: 'Circle', color: '#38bdf8', - inputType: 'value', + inputEditor: 'value', defaultValue: '0', shape: 'circle', }, diamondDot: { name: 'Diamond Dot', color: '#38bdf8', - inputType: null, + inputEditor: null, shape: 'diamondDot', }, diamond: { name: 'Diamond', color: '#38bdf8', - inputType: null, + inputEditor: null, shape: 'diamond', }, }, - nodeGroups: { + nodeKinds: { geometry: { name: 'Geometry', color: '#0284c7', }, }, - nodes: { + nodeTypes: { shapes: { - group: 'geometry', + kind: 'geometry', name: 'Shapes', outputs: [ { diff --git a/lib/stories/NodeGraphEditorCustomInput.stories.tsx b/lib/stories/NodeGraphEditorCustomInput.stories.tsx index dce8f9b..99db10c 100644 --- a/lib/stories/NodeGraphEditorCustomInput.stories.tsx +++ b/lib/stories/NodeGraphEditorCustomInput.stories.tsx @@ -29,15 +29,15 @@ const meta = { const config = useBuildGraphConfig( { valueTypes: {}, - nodeGroups: { + nodeKinds: { default: { name: 'Default', color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { vector: { - group: 'default', + kind: 'default', name: 'Vector', inputs: [ { diff --git a/lib/stories/NodeGraphEditorCustomNode.stories.tsx b/lib/stories/NodeGraphEditorCustomNode.stories.tsx index c7b7186..1a37aa9 100644 --- a/lib/stories/NodeGraphEditorCustomNode.stories.tsx +++ b/lib/stories/NodeGraphEditorCustomNode.stories.tsx @@ -46,11 +46,11 @@ const meta = { name: 'String', color: '#f43f5e', shape: 'circle', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, }, - nodeGroups: { + nodeKinds: { custom: { name: 'Custom', color: '#f43f5e', diff --git a/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx b/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx index 94b2103..d5cf510 100644 --- a/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx +++ b/lib/stories/NodeGraphEditorInheritingOutput.stories.tsx @@ -32,20 +32,20 @@ const meta = { const config = useMemo(() => { const config = new GraphConfig({ valueTypes: { - string: { + text: { name: 'String', color: '#1895d5', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, number: { name: 'Number', color: '#f4bb3f', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, }, - nodeGroups: { + nodeKinds: { custom: { name: 'Custom', color: '#f43f5e', @@ -55,15 +55,15 @@ const meta = { color: '#a1a1a1', }, }, - nodes: { - inputs: { + nodeTypes: { + example: { name: 'Input', - group: 'default', + kind: 'default', inputs: [ { name: 'String', id: 'string', - valueType: 'string', + valueType: 'text', }, { name: 'Number', @@ -81,7 +81,7 @@ const meta = { 'custom', CustomNode, [], - [{ name: 'Value', id: 'value', valueType: 'string' }], + [{ name: 'Value', id: 'value', valueType: 'text' }], ) return config.validate() }, []) @@ -121,7 +121,7 @@ export const InheritingOutputField: Story = { }, { id: '2', - type: 'inputs', + type: 'example', position: { x: 400, y: 100 }, data: {}, }, diff --git a/lib/stories/NodeGraphEditorInputGroups.stories.tsx b/lib/stories/NodeGraphEditorInputGroups.stories.tsx index 88c9346..f08f742 100644 --- a/lib/stories/NodeGraphEditorInputGroups.stories.tsx +++ b/lib/stories/NodeGraphEditorInputGroups.stories.tsx @@ -48,25 +48,25 @@ const meta = { string: { name: 'String', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, number: { name: 'Number', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '0.000', }, boolean: { name: 'Boolean', color: '#a1a1a1', - inputType: 'checkbox', + inputEditor: 'checkbox', defaultValue: true, }, specularDistribution: { name: 'Specular Distribution', color: '#06b6d4', - inputType: 'options', + inputEditor: 'options', options: [ { name: 'GGX', value: 'ggx' }, { name: 'Beckmann', value: 'beckmann' }, @@ -75,7 +75,7 @@ const meta = { defaultValue: 'GET', }, }, - nodeGroups: { + nodeKinds: { default: { name: 'Default', color: '#CE4040', @@ -85,9 +85,9 @@ const meta = { color: '#83324A', }, }, - nodes: { + nodeTypes: { number: { - group: 'default', + kind: 'default', name: 'Number', inputs: [ { @@ -106,7 +106,7 @@ const meta = { ], }, color: { - group: 'inputs', + kind: 'inputs', name: 'Color', style: { width: '100px', @@ -128,7 +128,7 @@ const meta = { ], }, bsdf: { - group: 'default', + kind: 'default', name: 'Principled BSDF', inputs: [ { @@ -157,37 +157,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 f803e26..1610378 100644 --- a/lib/stories/NodeGraphEditorLayout.stories.tsx +++ b/lib/stories/NodeGraphEditorLayout.stories.tsx @@ -150,19 +150,19 @@ export const Layouts: Story = { string: { name: 'String', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '', }, }, - nodeGroups: { + nodeKinds: { default: { name: 'Default', color: '#a1a1a1', }, }, - nodes: { + nodeTypes: { string: { - group: 'default', + kind: 'default', name: 'String', inputs: [ { diff --git a/lib/stories/NodeGraphEditorPersist.stories.tsx b/lib/stories/NodeGraphEditorPersist.stories.tsx index 4c24a5a..c90335c 100644 --- a/lib/stories/NodeGraphEditorPersist.stories.tsx +++ b/lib/stories/NodeGraphEditorPersist.stories.tsx @@ -121,29 +121,29 @@ export const Persist: Story = { number: { name: 'Number', color: '#a1a1a1', - inputType: 'value', + inputEditor: 'value', defaultValue: '0', }, vector: { name: 'Vector', color: '#8b5cf6', - inputType: null, + inputEditor: null, }, geometry: { name: 'Geometry', color: '#059669', - inputType: null, + inputEditor: null, }, }, - nodeGroups: { + nodeKinds: { geometry: { name: 'Geometry', color: '#059669', }, }, - nodes: { + nodeTypes: { combineXYZ: { - group: 'geometry', + kind: 'geometry', name: 'Combine XYZ', inputs: [ { @@ -171,7 +171,7 @@ export const Persist: Story = { ], }, points: { - group: 'geometry', + kind: 'geometry', name: 'Points', inputs: [ { @@ -199,7 +199,7 @@ export const Persist: Story = { ], }, viewer: { - group: 'geometry', + kind: 'geometry', name: 'Viewer', inputs: [ {