retejs / stage0-render-plugin

3 stars 6 forks source link

How to make Custom node component? #9

Open saalaus opened 2 years ago

saalaus commented 2 years ago

I want to create my custom node component, i have tried many things. I ended up creating my own function from scratch

function NodeView(){
    const view = stage0.h`<div class="node"><div class="title">#nodeName</div><div class="outputs" #outputs></div><div class="controls" #controls></div><div class="inputs" #inputs></div></div>`
    this.root = view.cloneNode(true)
   ...

    const refs = view.collect(this.root);

    this.rootUpdate = function(scope){
        ...
    }
    return this
}

And my component:

class CustomNode extends Rete.Component {
    constructor() {
        super('...')
    this.data.render = "stage0"
    this.data.component = NodeView()
    this.data.props = {}

    }
...
}

In my NodeView i have to return this in end, and in component class i have to call my NodeView function, because in stage0-render-plugin/src/index.js in function createNode use this:

const comp = component.component || new NodeComponent(nodeProps);

that is, just take component and use component.component, dont call function. that is, if used as in the documentation there will be an error: use:

this.data.component = CustomNodeComponent;

Error:

index.js:44 Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at index.js:44:6
    at emitter.ts:29:21
    at Array.reduce (<anonymous>)
    at o.value (emitter.ts:28:44)
    at new o (node.ts:36:14)
    at o.value (index.ts:43:26)
    at n.value (editor.ts:45:19)
    at components.js:87:16

that's why i call my function NodeView, but it can't create more than one node How to do it right custom node with stage0?

trsh commented 2 years ago

@saalaus hi. I am no longer supporting this plugin. Haven't touched it since 2019, so I don't remember anything =D. Sorry.

saalaus commented 2 years ago

@saalaus hi. I am no longer supporting this plugin. Haven't touched it since 2019, so I don't remember anything =D. Sorry.

oh, maybe you can look for at least some minimal example at you? I didn't find anything on the Internet

trsh commented 2 years ago

@saalaus all I have are examples in read me (sample code and the link to codepen) . I don't remember anything or have anything else. Sorry.