Last active
August 1, 2019 06:57
-
-
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.
This file contains 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
Show hidden characters
{ | |
"presets": [ | |
["@babel/preset-env", | |
{ | |
"targets": { | |
"browsers": ["last 2 versions", "ie >= 11"] | |
} | |
}] | |
] | |
} |
This file contains 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
[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 |
This file contains 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
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'); | |
})(); |
This file contains 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
{ | |
"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" | |
} | |
} |
This file contains 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
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