clarkmcc / ngraph

A blender-style node editor for React, built on xyflow
https://ngraph.clarkmccauley.com
MIT License
50 stars 3 forks source link

Array Inputs/Outputs #40

Closed sroussey closed 6 months ago

sroussey commented 9 months ago

So, you have this idea of array inputs and outputs that I love.

I'd like to expand how they work such that:

  1. An array input of type "string" can have either : a) one input of the same type, or b) multiple inputs of the base type (lots of string outputs going into a string array input).
  2. I think this will require having a property called arrayOf such that you might have:
    valueTypes: {
    string: { name:"String", color:"red", inputEditor:'text', ...},
    string_array: { name: "Strings", color:"red", isArray:true, arrayOf:"string", inputEditor:null, ...}
    }
  3. For something like options, the array version would have a multi-select instead of the single select (need to add a basic one).

Thoughts?

clarkmcc commented 9 months ago

So I'm still digesting this, but real quick can you explain how item 1 is different than what we have today? I may be misunderstanding what you're proposing because I thought it worked the way you described in item 1.

sroussey commented 9 months ago

Maybe something more specific:

valueTypes: {
  model: { name:"Model", inputEditor:'select', options:[...]},
  model_array: { name: "Models", isArray:true, arrayOf:"model", inputEditor:'multiselect', options:[...], ...}
}

Here I have a model type. It uses a custom select combobox to choose one from the list of options.

Next, I have a model_array type that uses a custom multiselect input editor to choose several options from the options array at once.

How are they compatible?

clarkmcc commented 9 months ago

I understand. Doesn't it make more sense to not introduce a second type though? Like ideally you'd decide on a given input/output whether you have an Array<T> vs just a T. The reason for this is that you should be able to pass a Array<T>[0] to an input of T and have them be the same type.

I need to really dive in a think through this, but my initial thought is that the input editor should be able to modify the type that it's being applied to. In this case a multi select produces an Array<T> whereas a select produces a T only.

sroussey commented 9 months ago

The array stuff needs a bit of work (the example does not work as expected, if you delete the edges you can’t get them both back).

as for the other stuff, clearly I was confused. 😐

In my defense, those were the days I was making a type converter from the inputs array to a typescript type. And then the second time I made the same for a converter that would take a node and make a new node with one of the inputs turned into an array, and its TS types also changed.

Since my nodes have a run(i :input): output method, i wanted to automatically create types for the input and output based on the inputs and outputs arrays.

It would have taken less time to create the types by hand.