Fourth push

index.html

@@ -9,6 +9,6 @@
     <div id="rete" style="height: 500px; width: 100%;"></div>
 
     <!-- Include your JavaScript file -->
-    <script src="index.js" defer></script>
+    <script src="path/to/your/index.js" defer></script>
 </body>
-</html>
+</html>

index.js

@@ -1,15 +1,59 @@
 // index.js or app.js
 
-document.addEventListener('DOMContentLoaded', function () {
+// Define the NumComponent class
+class NumComponent extends Rete.Component {
+    constructor() {
+        super("Number");
+    }
+
+    builder(node) {
+        const numSocket = new Rete.Socket('Number value');  // Define the socket here or globally
+        const out1 = new Rete.Output('num', "Number", numSocket);
+
+        node.addOutput(out1);
+    }
+
+    worker(node, inputs, outputs) {
+        outputs['num'] = node.data.num;
+    }
+}
+
+// Initialize the Rete.js editor
+document.addEventListener('DOMContentLoaded', async function () {
     const container = document.querySelector('#rete');
     const editor = new Rete.NodeEditor('demo@0.1.0', container);
 
-    // Simple component example
-    const component = new Rete.Component('demo');
-    editor.register(component);
+    // Register the component
+    const numComponent = new NumComponent();
+    editor.register(numComponent);
+
+    // Setup the editor area and use plugins
+    const engine = new Rete.Engine('demo@0.1.0');
+    editor.use(Rete.ConnectionPlugin); // enables drawing connections
+    editor.use(Rete.ReactRenderPlugin); // enables rendering nodes (if using React)
+    editor.use(Rete.ContextMenuPlugin); // adds a context menu to add nodes
+    editor.use(Rete.AreaPlugin); // enables dragging and zooming
+    editor.use(Rete.CommentPlugin); // enables comments
+
+    // Add a simple node to the editor
+    const node1 = await numComponent.createNode({ num: 2 });
+    node1.position = [80, 200];
+    editor.addNode(node1);
+
+    const node2 = await numComponent.createNode({ num: 3 });
+    node2.position = [300, 200];
+    editor.addNode(node2);
+
+    // Draw a connection between nodes
+    editor.connect(node1.outputs.get('num'), node2.inputs.get('num'));
+
+    editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
+        console.log('Process triggered');
+        await engine.process(editor.toJSON());
+    });
 
     editor.view.resize();
     window.addEventListener('resize', () => editor.view.resize());
 
     editor.trigger('process');
-});
+});