Support component slots

[clarkmcc]

No description provided.

[clarkmcc]

@sroussey here's my rough draft at slots. Not sure how I feel about it so I'm gonna sleep on it. I still am not sure if I want to support node-type-specific slots or not. I'm thinking in those cases, just use a custom node. Thoughts?

[sroussey]

What if you did it in reverse?

When you create a custom node, ngraph sends you slots where you can reassemble the node?

function CustomNode(node: Node, slots) {
      const [isFocused, onFocus, onBlur] = useFocusBlur()
      return (
        <NodeContainer node={node} draggable={isFocused}>
          <div>
           {slots.header}
           {slots.outputs}
           {slots.inputs}
           {I do my own footer here}
          </div>
        </NodeContainer>
      )
    }

And then as icing on the cake,

const config = new GraphConfig({
        valueTypes: {
          string: {
            name: 'String',
            color: '#f43f5e',
            shape: 'circle',
            inputEditor: 'value',
            defaultValue: '',
          },
        },
        nodeKinds: {
          custom: {
            name: 'Custom',
            color: '#f43f5e',
baseNode: 'my-custom-base'
          },
        },
      })
      config.registerBaseNode(
        'My Custom Base',
        'my-custom-base',
        CustomNode,
      )
      return config.validate()

Then everything that has that kind/theme gets that base node. Maybe is reuses almost everything, maybe it reuses only a little.

The slots could be granular, like it could have the entire header slots.header but also smaller parts of it.

Or {slots.inputs} could equal
{slots.singleInputs}
{slots.groupInputs}

[clarkmcc]

I see the benefits of reverse slots for sure, the biggest downside, though is that if you want to swap out one component, you have to create a custom node and build out all of the other slottable components. And this only gets more difficult as we add additional sub components and features to the nodes.

[clarkmcc]

Resolved by #35