rete.js实现可视化拖拽模块化工作流流程式编程效果代码-html代码-BFW代码库

rete.js实现可视化拖拽模块化工作流流程式编程效果代码

代码语言：html

所属分类：其他

代码描述：rete.js实现可视化拖拽模块化工作流流程式编程效果代码，Rete 是一个用于可视化编程的模块化框架。Rete 允许您直接在浏览器中创建基于节点的编辑器。您可以定义节点和工作程序，使用户无需一行代码即可在您的编辑器中创建处理数据的指令。

代码标签： rete 可视化拖拽模块化工作流流程编程

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    html, body {
  height: 100%;
  width: 100%;
}

.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;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="rete"></div>


<!-- partial -->
  <script src='//repo.bfw.wiki/bfwrepo/js/rete.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/vue.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/vue-render-plugin.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/connection-plugin.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/alight.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/lodash.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/context-menu-plugin.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/area-plugin.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/comment-plugin.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/history-plugin.min.js'></script>
<script src='//repo.bfw.wiki/bfwrepo/js/connection-mastery-plugin.min.js'></script><script >
    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);

 .........完整代码请登录后点击上方下载按钮下载查看