Skip to content

Instantly share code, notes, and snippets.

@OrsosAdam
Last active August 1, 2019 06:57
Show Gist options
  • Save OrsosAdam/0a4f73ff33ad8a83d4b246c063c6bb12 to your computer and use it in GitHub Desktop.
Save OrsosAdam/0a4f73ff33ad8a83d4b246c063c6bb12 to your computer and use it in GitHub Desktop.
This is my try to use rete js with vue and internet explorer 11 support using babel, babel polyfill and webpack.
{
"presets": [
["@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}]
]
}
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Anonymous>
<Root>
warn @ vue.runtime.esm.js:588
mountComponent @ vue.runtime.esm.js:2746
Vue.$mount @ vue.runtime.esm.js:7983
init @ vue.runtime.esm.js:4128
createComponent @ vue.runtime.esm.js:5592
createElm @ vue.runtime.esm.js:5539
patch @ vue.runtime.esm.js:6114
Vue._update @ vue.runtime.esm.js:2655
updateComponent @ vue.runtime.esm.js:2783
get @ vue.runtime.esm.js:3137
Watcher @ vue.runtime.esm.js:3126
mountComponent @ vue.runtime.esm.js:2790
Vue.$mount @ vue.runtime.esm.js:7983
m @ vue-render-plugin.min.js:6
(anonymous) @ vue-render-plugin.min.js:6
(anonymous) @ rete.min.js:6
value @ rete.min.js:6
o @ rete.min.js:6
value @ rete.min.js:6
bind @ vue-render-plugin.min.js:6
callHook$1 @ vue.runtime.esm.js:6277
_update @ vue.runtime.esm.js:6199
updateDirectives @ vue.runtime.esm.js:6180
invokeCreateHooks @ vue.runtime.esm.js:5682
createElm @ vue.runtime.esm.js:5570
createChildren @ vue.runtime.esm.js:5666
createElm @ vue.runtime.esm.js:5568
createChildren @ vue.runtime.esm.js:5666
createElm @ vue.runtime.esm.js:5568
patch @ vue.runtime.esm.js:6075
Vue._update @ vue.runtime.esm.js:2655
updateComponent @ vue.runtime.esm.js:2783
get @ vue.runtime.esm.js:3137
Watcher @ vue.runtime.esm.js:3126
mountComponent @ vue.runtime.esm.js:2790
Vue.$mount @ vue.runtime.esm.js:7983
init @ vue.runtime.esm.js:4128
createComponent @ vue.runtime.esm.js:5592
createElm @ vue.runtime.esm.js:5539
patch @ vue.runtime.esm.js:6114
Vue._update @ vue.runtime.esm.js:2655
updateComponent @ vue.runtime.esm.js:2783
get @ vue.runtime.esm.js:3137
Watcher @ vue.runtime.esm.js:3126
mountComponent @ vue.runtime.esm.js:2790
Vue.$mount @ vue.runtime.esm.js:7983
m @ vue-render-plugin.min.js:6
(anonymous) @ vue-render-plugin.min.js:6
(anonymous) @ rete.min.js:6
value @ rete.min.js:6
o @ rete.min.js:6
value @ rete.min.js:6
value @ rete.min.js:6
_callee2$ @ main.js:209
tryCatch @ runtime.js:62
invoke @ runtime.js:296
prototype.(anonymous function) @ runtime.js:114
asyncGeneratorStep @ main.js:16
_next @ main.js:18
Promise.then (async)
asyncGeneratorStep @ main.js:16
_next @ main.js:18
Promise.then (async)
asyncGeneratorStep @ main.js:16
_next @ main.js:18
Promise.then (async)
asyncGeneratorStep @ main.js:16
_next @ main.js:18
(anonymous) @ main.js:18
(anonymous) @ main.js:18
(anonymous) @ main.js:246
./src/main.js @ bundle.js:3354
__webpack_require__ @ bundle.js:20
(anonymous) @ main.js:2
0 @ bundle.js:3365
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:84
(anonymous) @ bundle.js:87
import Rete from "rete";
import Vue from 'vue/dist/vue.min.js';
import * as vue from "vue-template-compiler";
import ConnectionPlugin from 'rete-connection-plugin';
import VueRenderPlugin from 'rete-vue-render-plugin';
import ContextMenuPlugin from 'rete-context-menu-plugin';
import AreaPlugin from 'rete-area-plugin';
var numSocket = new Rete.Socket('Number value');
var VueNumControl = {
props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
template: '<input type="number" :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.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('num1',"Number", numSocket);
var inp2 = new Rete.Input('num2', "Number", numSocket);
var out = new Rete.Output('num', "Number", numSocket);
inp1.addControl(new NumControl(this.editor, 'num1'))
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['num1'].length?inputs['num1'][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('floweditor@1.0.0', container);
editor.use(ConnectionPlugin, { curvature: 0.4 });
editor.use(VueRenderPlugin);
editor.use(ContextMenuPlugin);
editor.use(AreaPlugin);
var engine = new Rete.Engine('floweditor@1.0.0');
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('num1'));
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');
})();
{
"name": "floweditor",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod": "webpack --mode production",
"dev": "webpack --mode development --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"rete": "^1.0.0-alpha.9",
"rete-area-plugin": "^0.1.6",
"rete-connection-plugin": "^0.1.2",
"rete-context-menu-plugin": "^0.1.4",
"rete-vue-render-plugin": "^0.2.1",
"vue": "^2.5.17",
"vue-loader": "^15.4.1",
"vue-template-compiler": "^2.5.17"
}
}
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: ["@babel/polyfill", "./src/main.js"],
// entry: "./src/main.js",
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}, {
test: /\.vue$/,
use: {
loader: "vue-loader"
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/')
},
plugins: [
new VueLoaderPlugin()
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment