Created
April 4, 2023 08:13
-
-
Save chenbaiyujason/4d3395de5ccd22f18ef565a49c410ce9 to your computer and use it in GitHub Desktop.
Rete.js (dataflow, node editor)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="rete"></div> | |
| <a target="_blank" href="https://github.com/retejs/rete"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var numSocket = new Rete.Socket('Number value'); | |
| var VueNumControl = { | |
| props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'], | |
| template: '<input type="number" :readonly="readonly" :value="value" @input="change($event)" @dblclick.stop="" @pointerdown.stop="" @pointermove.stop=""/>', | |
| data() { | |
| return { | |
| value: 0, | |
| } | |
| }, | |
| methods: { | |
| change(e){ | |
| this.value = +e.target.value; | |
| this.update(); | |
| }, | |
| update() { | |
| if (this.ikey) | |
| this.putData(this.ikey, this.value) | |
| this.emitter.trigger('process'); | |
| } | |
| }, | |
| mounted() { | |
| this.value = this.getData(this.ikey); | |
| } | |
| } | |
| class NumControl extends Rete.Control { | |
| constructor(emitter, key, readonly) { | |
| super(key); | |
| this.component = VueNumControl; | |
| this.props = { emitter, ikey: key, readonly }; | |
| } | |
| setValue(val) { | |
| this.vueContext.value = val; | |
| } | |
| } | |
| class NumComponent extends Rete.Component { | |
| constructor(){ | |
| super("Number"); | |
| } | |
| builder(node) { | |
| var out1 = new Rete.Output('num', "Number", numSocket); | |
| return node.addControl(new NumControl(this.editor, 'num')).addOutput(out1); | |
| } | |
| worker(node, inputs, outputs) { | |
| outputs['num'] = node.data.num; | |
| } | |
| } | |
| class AddComponent extends Rete.Component { | |
| constructor(){ | |
| super("Add"); | |
| } | |
| builder(node) { | |
| var inp1 = new Rete.Input('num',"Number", numSocket); | |
| var inp2 = new Rete.Input('num2', "Number2", numSocket); | |
| var out = new Rete.Output('num', "Number", numSocket); | |
| inp1.addControl(new NumControl(this.editor, 'num')) | |
| inp2.addControl(new NumControl(this.editor, 'num2')) | |
| return node | |
| .addInput(inp1) | |
| .addInput(inp2) | |
| .addControl(new NumControl(this.editor, 'preview', true)) | |
| .addOutput(out); | |
| } | |
| worker(node, inputs, outputs) { | |
| var n1 = inputs['num'].length?inputs['num'][0]:node.data.num1; | |
| var n2 = inputs['num2'].length?inputs['num2'][0]:node.data.num2; | |
| var sum = n1 + n2; | |
| this.editor.nodes.find(n => n.id == node.id).controls.get('preview').setValue(sum); | |
| outputs['num'] = sum; | |
| } | |
| } | |
| (async () => { | |
| var container = document.querySelector('#rete'); | |
| var components = [new NumComponent(), new AddComponent()]; | |
| var editor = new Rete.NodeEditor('[email protected]', container); | |
| editor.use(ConnectionPlugin.default); | |
| editor.use(VueRenderPlugin.default); | |
| editor.use(ContextMenuPlugin.default); | |
| editor.use(AreaPlugin); | |
| editor.use(CommentPlugin.default); | |
| editor.use(HistoryPlugin); | |
| editor.use(ConnectionMasteryPlugin.default); | |
| var engine = new Rete.Engine('[email protected]'); | |
| components.map(c => { | |
| editor.register(c); | |
| engine.register(c); | |
| }); | |
| var n1 = await components[0].createNode({num: 2}); | |
| var n2 = await components[0].createNode({num: 0}); | |
| var add = await components[1].createNode(); | |
| n1.position = [80, 200]; | |
| n2.position = [80, 400]; | |
| add.position = [500, 240]; | |
| editor.addNode(n1); | |
| editor.addNode(n2); | |
| editor.addNode(add); | |
| editor.connect(n1.outputs.get('num'), add.inputs.get('num')); | |
| editor.connect(n2.outputs.get('num'), add.inputs.get('num2')); | |
| editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => { | |
| console.log('process'); | |
| await engine.abort(); | |
| await engine.process(editor.toJSON()); | |
| }); | |
| editor.view.resize(); | |
| AreaPlugin.zoomAt(editor); | |
| editor.trigger('process'); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/rete.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/vue-render-plugin.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/connection-plugin.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/alight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/context-menu-plugin.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/area-plugin.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/comment-plugin.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/history-plugin.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/connection-mastery-plugin.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .node .control input, .node .input-control input { | |
| width: 140px; | |
| } | |
| select, input { | |
| width: 100%; | |
| border-radius: 30px; | |
| background-color: white; | |
| padding: 2px 6px; | |
| border: 1px solid #999; | |
| font-size: 110%; | |
| width: 170px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment