Overview

Concepts

Connections between Anchors can be made functional by passing input and output stores via props.

An input store is a Svelte writable with string keys and writable numbers, strings, objects, arrays or booleans as the values.

In general terms, the return type of generateInput is a Writable<Record<string, Writable<unknown>>>, though, this is a simplification for illustrative purposes.

An output store is a custom readable derived from the current values of each parameter in an input store. Every time a parameter changes, the output store is rederived according to a user provided processors function.

A processor function is a user-defined callback that is called with the current values of the input store. An output store returns a single value.

To facilitate easier setup, we have created a series of functional components that can control Node parameters as well has some helper functions to format parameters for use in this model and generate outputs based on a provided processor function.

Below is an example Node that has three parameters: two integer values controlled via Sliders and an “option” value, controlled via a RadioGroup, representing the mathematical operation to apply to the integer values.

When connections are made to input Anchors, the writable associated with the corresponding key is overwritten with the readable store associate with the output anchor that connected to it. Upon disconnection, a new writable is created with the last value of the output prior to disconnection.

<script lang="ts">
    import { Node, Anchor, Slider, RadioGroup } from 'svelvet'
    import { generateInput, generateOutput } from 'svelvet'

    // Type your input structure
    type InputStructure = {
        value1: number;
        value2: number;
        option: string;
    };

    // Create initial values for your parameters
    const initialData = {
        value1: 10,
        value2: 30,
        option: 'multiply'
    };

    // Generate a formatted inputs store
    const inputs = generateInput(initialData);

    // Specify processor function
    const processor = (inputs: InputStructure) => {
        if (inputs.option === 'add') {
            return inputs.value1 + inputs.value2;
        } else if (inputs.option === 'subtract') {
            return inputs.value1 - inputs.value2;
        } else if (inputs.option === 'multiply') {
            return inputs.value1 * inputs.value2;
        } else {
            return inputs.value1 / inputs.value2;
        }
    };

    // Generate output store
    const output = generateOutput(inputs, processor);
</script>

<Node width={400} height={200} useDefaults>
    <div class="node">
        <div class="radio-group">
            <RadioGroup
                options={['subtract', 'add', 'multiply', 'divide']}
                parameterStore={$inputs.option}
            />
        </div>
        <div class="sliders">
            <Slider parameterStore={$inputs.value1} />
            <Slider parameterStore={$inputs.value2} />
        </div>
        <div class="input-anchors">
            {#each Object.entries($inputs) as [key, value] (key)}
                <Anchor {key} inputsStore={inputs} input />
            {/each}
        </div>
        <div class="output-anchors">
            <Anchor outputStore={output} output />
        </div>
    </div>
</Node>