Tesserae

NodeView

Description

The NodeView component is a powerful utility for rendering interactive node-based flows. It is used to define and display nodes with customizable inputs and outputs, allowing you to build complex flow-based interfaces. Use NodeView when you need to visually represent and interact with configurable node graphs.

Usage

Instantiate a NodeView using the static helper method from the Tesserae.UI class. Once instantiated, you can define nodes using methods like DefineNode for static nodes or DefineDynamicNode for nodes that update their outputs based on inputs. Additionally, you can monitor changes in the node graph through the OnChange method.

Below is a simple example that creates a node with a text input and a text output:

node-view-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new SimpleNodeViewExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SimpleNodeViewExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a NodeView instance
            var nodeView = NodeView().S();

            // Define a simple node with one input and one output
            nodeView.DefineNode("SimpleNode", ib =>
            {
                ib.AddInput("inp", () => NodeView.Interfaces.TextInputInterface("Input", "Initial value"));
                ib.AddOutput("out", () => NodeView.Interfaces.TextInterface("Output", "Result"));
            });

            // Listen to any changes on the NodeView
            nodeView.OnChange(nv =>
            {
                console.log("NodeView changed:");
                console.log(nv.GetJsonState(true));
            });

            return nodeView.Render();
        }
    }
}

Methods

OnChange(Action onChange)
Registers a callback that is invoked whenever the node view's state changes.
• Parameters:
- onChange: An Action delegate that receives the current NodeView instance.
DefineNode(string nodeTypeName, Action buildNode)
Defines a new static node type with the specified name and configuration.
• Parameters:
- nodeTypeName: The display name of the node type.
- buildNode: A callback that receives an InterfaceBuilder instance to define inputs and outputs for the node.
DefineDynamicNode(string nodeTypeName, Action buildBaseNode, Action<InputsState, OutputsState, InterfaceBuilder> onUpdate)
Defines a dynamic node whose outputs can change based on its input state.
• Parameters:
- nodeTypeName: The name of the dynamic node type.
- buildBaseNode: A callback to define the base inputs for the node.
- onUpdate: A callback that is triggered to update outputs based on the current inputs.
Render() : HTMLElement
Renders the NodeView and returns its root HTML element.
GetState() : NodeViewGraphState
Retrieves the current state of the node graph as a NodeViewGraphState object.
GetJsonState(bool formated = false) : string
Returns the JSON representation of the node graph state.
• Parameters:
- formated: If true, the JSON is returned in a formatted (indented) style.
SetState(string stateJson)
Sets the node graph state using a JSON string.
• Parameters:
- stateJson: A JSON string representing the new state.
SetState(NodeViewGraphState state)
Sets the node graph state directly using a NodeViewGraphState object.
• Parameters:
- state: The new state to load into the NodeView.

Properties

The NodeView component does not expose additional public properties apart from its fluent API methods. All configuration and updates are managed through its methods.

Samples

NodeView Sample Usage

The sample below demonstrates how to create a NodeView with multiple nodes, including a dynamic node whose outputs are generated based on an input value. It also shows how to attach a change listener that updates a text area with the current state in JSON format.

node-view-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new NodeViewSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class NodeViewSample : IComponent
    {
        public HTMLElement Render()
        {
            var nodeView = NodeView().S();

            // Define a simple node with a text input and text output
            nodeView.DefineNode("Hello World", ib =>
                ib.AddInput("inp", () => NodeView.Interfaces.TextInputInterface("Input", "Hi Input"))
                  .AddOutput("out", () => NodeView.Interfaces.TextInputInterface("Output", "Hi Output"))
            );

            // Define a complex node with various input types and one output
            nodeView.DefineNode("Complex", ib =>
                ib.AddInput("text", () => NodeView.Interfaces.TextInterface("Input", "Hi Input"))
                  .AddInput("int", () => NodeView.Interfaces.IntegerInterface("Input", 123))
                  .AddInput("num", () => NodeView.Interfaces.NumberInterface("Input", 3.14))
                  .AddInput("btn", () => NodeView.Interfaces.ButtonInterface("Input", () => Toast().Information("Hi!")))
                  .AddInput("chk", () => NodeView.Interfaces.CheckboxInterface("Input", false))
                  .AddInput("sel", () => NodeView.Interfaces.SelectInterface("Input", "A", new ReadOnlyArray<string>(new[] { "A", "B", "C" })))
                  .AddInput("sld", () => NodeView.Interfaces.SliderInterface("Input", 0.5, 0, 1))
                  .AddOutput("out", () => NodeView.Interfaces.TextInterface("Output", "Hi Output"))
            );

            // Define a dynamic node that updates its outputs based on an input value
            nodeView.DefineDynamicNode("Dynamic", ib =>
                ib.AddInput("inp", () => NodeView.Interfaces.IntegerInterface("Output Count", 1)),
                (inputState, outputState, ib) =>
                {
                    var inputCount = inputState["inp"].As<int>();
                    for (int i = 0; i < inputCount; i++)
                    {
                        ib.AddOutput($"out-{i}", () => NodeView.Interfaces.TextInterface($"out-{i}", i.ToString()));
                    }
                }
            );

            // Create a text area to view and update the NodeView state in JSON format
            var textArea = TextArea().WS().H(10).Grow();

            // Update textArea when the NodeView state changes
            nodeView.OnChange(v => textArea.Text = v.GetJsonState(true));

            // Allow updating NodeView's state from the text area upon blur event
            textArea.OnBlur((ta, ev) => nodeView.SetState(ta.Text));

            // Render the final layout in a split view
            return SplitView().SplitInMiddle().Resizable().H(600).WS()
                              .Left(nodeView)
                              .Right(textArea)
                              .Render();
        }
    }
}