rete Rete.js Number addition project

I'm trying to create a code generator using rete.js as a node editor. for this purpose i started with a simple project that is already published in codepen: https://codepen.io/Ni55aN/pen/xzgQYq. I managed to create two simple nodes with my code below (add node: for addition, Number node: it's supposed to be my input ) : components.js file:

var NumberSocket = new Rete.Socket('Number');

class NumberControl extends Rete.Control {

    constructor(emitter) {
        super();
        this.emitter = emitter;
        this.template = '<input id="myinput" value=""/>';

    }
}
class AddComp extends Rete.Component {

    constructor() {
        super('Add')
    }

    builder(node) {

        var inp1 = new Rete.Input('num', NumberSocket);

        return node.addInput(inp1)

    }

    worker(node) {

    }

}


class NumberComp extends Rete.Component {

    constructor() {
        super('Number')

    }
    builder(node) {
        var ctrl = new NumberControl(this.editor);
        let out = new Rete.Output('Number', NumberSocket);

        node.addOutput(out);
        node.addControl(ctrl)

    }

    worker(node, inputs, data) {

        outputs[0] = node.data.num;


    }
}

var data = {
    'id': '[email protected]',
    'nodes': {

        '1': {
            'id': 1,
            'position': [
                460, 350
            ],
            'name': 'Add'
        },
        '2': {
            "id": 2,

           
            "position": [80, 200],
            "name": "Number"
        }
    },

}

index.js file:

var container = document.querySelector('#rete')

var editor = new Rete.NodeEditor('[email protected]', container);
editor.use(ConnectionPlugin, { curvature: 0.4 });
editor.use(AlightRenderPlugin);
editor.use(ContextMenuPlugin);


var engine = new Rete.Engine('[email protected]');

[new AddComp,new NumberComp].map(c => {
    editor.register(c);
    engine.register(c);
}); 
editor.on('process connectioncreate connectionremove nodecreate noderemove', async ()=>{
    if(editor.silent) return;
    await engine.abort();
    await engine.process(editor.toJSON());
});

editor.view.resize();

editor.fromJSON(data).then(() => editor.trigger('process'));`

Html file:

<html>

<head>
    <title>Tasks Rete Sample</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <div class="node-editor" id="rete"></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/alight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/rete.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script>
    <script src="components.js"></script>
  
    <script src="index.js"></script>
</body>

</html>

how can i get the data from first component 'number' to the component add?

Dec 17 '19 21:12 ramygouiaa

how can i get the data from first component 'number' to the component add?

You need a connection between these nodes

Feb 01 '20 10:02 Ni55aN

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

Jul 13 '23 10:07 rete-js[bot]

rete rete copied to clipboard

Rete.js Number addition project

rete
rete copied to clipboard