retejs / rete

JavaScript framework for visual programming
https://retejs.org
MIT License
9.86k stars 647 forks source link

Vue.js render plugin #169

Closed Ni55aN closed 5 years ago

Ni55aN commented 5 years ago

Initial version: https://github.com/retejs/vue-render-plugin Testing required

Example of use:

var comp = {
     props: ['readonly', 'emitter', 'ikey'],
     template: '<input type="number" :readonly="readonly" :value="value" @input="change($event)"/>',
      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.emitter = emitter;
       this.key = key;
       this.component = comp;
       this.props = { emitter, ikey: key, readonly };
   }

    setValue(val) {
       this.component.value = val;
    }
}
Ni55aN commented 5 years ago

https://rete.readthedocs.io/en/latest/Plugins/#vue-render