├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html ├── rete.config.js ├── rollup.config.js └── src ├── Control.svelte ├── ControlBinder.svelte ├── DefaultableControlComponent.svelte ├── FilterControlComponent.svelte ├── InputControl.js ├── Node.svelte ├── Socket.svelte ├── index.js ├── util.js └── vars.sass /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: './node_modules/rete-cli/.eslintrc', 3 | rules: { 4 | 'max-len': 'off' 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 4, 3 | semi: true, 4 | singleQuote: true, 5 | // arrowParens: 'always', 6 | printWidth: 120, 7 | semi: true, 8 | trailingComma: 'none' 9 | }; 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Rete Svelte Render 2 | ==== 3 | #### Rete.js plugin -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rete-svelte-render-plugin", 3 | "version": "1.4.5", 4 | "description": "Svelte rendering plugin for rete.js", 5 | "main": "build/rete-svelte-render-plugin.min.js", 6 | "module": "build/rete-svelte-render-plugin.esm.js", 7 | "scripts": { 8 | "rete:build": "rete --build rete.config.js", 9 | "rete:build:dev": "rete --build rete.config.js --watch", 10 | "build": "rollup -c", 11 | "build:dev": "rollup -c --watch", 12 | "dev": "npm run build:dev", 13 | "prepublishOnly": "npm run build", 14 | "prebuild": "npm run lint", 15 | "lint": "eslint src", 16 | "start": "sirv . --port 5001" 17 | }, 18 | "author": "Brian Hann", 19 | "license": "MIT", 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/c0bra/rete-svelte-render-plugin.git" 23 | }, 24 | "dependencies": { 25 | "svelte": "^3.19.1" 26 | }, 27 | "devDependencies": { 28 | "@rollup/plugin-buble": "^0.21.1", 29 | "@rollup/plugin-commonjs": "^11.0.2", 30 | "@rollup/plugin-node-resolve": "^7.1.1", 31 | "babel-eslint": "^10.0.1", 32 | "eslint": "^5.14.1", 33 | "node-sass": "^4.13.1", 34 | "rete-cli": "git+https://github.com/SeniorVu/rete-cli", 35 | "rollup": "^2.2.0", 36 | "rollup-plugin-commonjs": "^10.1.0", 37 | "rollup-plugin-livereload": "^1.0.4", 38 | "rollup-plugin-svelte": "^5.1.1", 39 | "rollup-plugin-terser": "^5.2.0", 40 | "sirv-cli": "^0.4.5", 41 | "svelte-preprocess-sass": "^0.2.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | rete-svelte-render-plugin 8 | 9 | 10 | 11 | 12 | 13 | 14 | 24 | 25 | 26 | 27 |
28 | 29 | 292 | 293 | 294 | -------------------------------------------------------------------------------- /rete.config.js: -------------------------------------------------------------------------------- 1 | import commonjs from '@rollup/plugin-commonjs'; 2 | import livereload from 'rollup-plugin-livereload'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import { sass } from 'svelte-preprocess-sass'; 5 | import svelte from 'rollup-plugin-svelte'; 6 | import { terser } from 'rollup-plugin-terser'; 7 | 8 | const production = !process.env.ROLLUP_WATCH; 9 | 10 | export default { 11 | input: 'src/index.js', 12 | name: 'ReteSvelteRenderPlugin', 13 | plugins: [ 14 | svelte({ 15 | preprocess: { 16 | style: sass() 17 | } 18 | }), 19 | 20 | resolve({ 21 | browser: true, 22 | dedupe: ['svelte'] 23 | }), 24 | 25 | commonjs(), 26 | 27 | // In dev mode, call `npm run start` once 28 | // the bundle has been generated 29 | !production && serve(), 30 | 31 | // Watch the `public` directory and refresh the 32 | // browser on changes when not in production 33 | !production && livereload('public'), 34 | 35 | // If we're building for production (npm run build 36 | // instead of npm run dev), minify 37 | production && terser() 38 | ] 39 | }; 40 | 41 | function serve() { 42 | let started = false; 43 | 44 | return { 45 | writeBundle() { 46 | if (!started) { 47 | started = true; 48 | 49 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 50 | stdio: ['ignore', 'inherit', 'inherit'], 51 | shell: true 52 | }); 53 | } 54 | } 55 | }; 56 | } 57 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import buble from '@rollup/plugin-buble'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import livereload from 'rollup-plugin-livereload'; 4 | import resolve from '@rollup/plugin-node-resolve'; 5 | import { sass } from 'svelte-preprocess-sass'; 6 | import svelte from 'rollup-plugin-svelte'; 7 | import { terser } from 'rollup-plugin-terser'; 8 | 9 | const pkgName = require('./package.json').name; 10 | 11 | const production = !process.env.ROLLUP_WATCH; 12 | 13 | export default { 14 | input: 'src/index.js', 15 | output: [ 16 | { 17 | format: 'esm', 18 | sourcemap: true, 19 | file: `build/${pkgName}.esm.js` 20 | }, 21 | { 22 | format: 'cjs', 23 | sourcemap: true, 24 | file: `build/${pkgName}.common.js` 25 | }, 26 | { 27 | format: 'umd', 28 | sourcemap: true, 29 | name: 'SvelteRenderPlugin', 30 | file: `build/${pkgName}.min.js` 31 | } 32 | ], 33 | plugins: [ 34 | svelte({ 35 | dev: !production, 36 | preprocess: { 37 | style: sass() 38 | } 39 | }), 40 | 41 | resolve({ 42 | browser: true, 43 | dedupe: ['svelte'] 44 | }), 45 | 46 | commonjs(), 47 | 48 | buble({ 49 | objectAssign: 'Object.assign' 50 | }), 51 | 52 | // In dev mode, call `npm run start` once 53 | // the bundle has been generated 54 | !production && serve(), 55 | 56 | // Watch the `public` directory and refresh the 57 | // browser on changes when not in production 58 | !production && livereload('public'), 59 | 60 | // If we're building for production (npm run build 61 | // instead of npm run dev), minify 62 | production && terser() 63 | ] 64 | }; 65 | 66 | function serve() { 67 | let started = false; 68 | 69 | return { 70 | writeBundle() { 71 | if (!started) { 72 | started = true; 73 | 74 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 75 | stdio: ['ignore', 'inherit', 'inherit'], 76 | shell: true 77 | }); 78 | } 79 | } 80 | }; 81 | } 82 | -------------------------------------------------------------------------------- /src/Control.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 | 50 | 51 | 52 | 53 |
54 | {#if label} 55 | 56 | {/if} 57 | 58 | 59 |
60 | -------------------------------------------------------------------------------- /src/ControlBinder.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /src/DefaultableControlComponent.svelte: -------------------------------------------------------------------------------- 1 | 39 | 40 | 67 | 68 | 69 | 70 |
71 | {#if label} 72 | 73 | {/if} 74 | 75 | 76 | 77 |
78 | -------------------------------------------------------------------------------- /src/FilterControlComponent.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | 31 | 32 | 33 |
34 | 35 |
36 | -------------------------------------------------------------------------------- /src/InputControl.js: -------------------------------------------------------------------------------- 1 | import Control from './Control.svelte'; 2 | import Rete from 'rete'; 3 | 4 | export default class extends Rete.Control { 5 | constructor(emitter, key, readonly) { 6 | this.render = 'svelte'; 7 | this.component = Control; 8 | this.props = { 9 | emitter, 10 | key, 11 | readonly 12 | }; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/Node.svelte: -------------------------------------------------------------------------------- 1 | 52 | 53 | 121 | 122 | 123 | 124 |
125 |
{node.name}
126 | 127 | 128 | {#each outputs as output, index (output.key)} 129 |
130 |
{output.name}
131 | 132 |
133 | {/each} 134 | 135 | 136 | {#each controls as control} 137 | 138 | 139 | {/each} 140 | 141 | 142 | {#each filteredInputs as input, index (input.key)} 143 |
144 | 145 | {#if !input.showControl()} 146 |
{input.name}
147 | {:else} 148 | 149 | 150 | 151 | {/if} 152 |
153 | {/each} 154 |
155 | -------------------------------------------------------------------------------- /src/Socket.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 57 | 58 |
59 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Control from './Control.svelte'; 2 | import DefaultableControlComponent from './DefaultableControlComponent.svelte'; 3 | import FilterControlComponent from './FilterControlComponent.svelte'; 4 | import InputControl from './InputControl'; 5 | import Node from './Node.svelte'; 6 | import Socket from './Socket.svelte'; 7 | 8 | // options = {} 9 | function createSvelte(el, SvelteComponent, props) { 10 | const nodeEl = document.createElement('div'); 11 | 12 | const app = new SvelteComponent({ 13 | target: nodeEl, 14 | props 15 | }); 16 | 17 | el.appendChild(nodeEl); 18 | 19 | return app; 20 | } 21 | 22 | function createNode(editor, CommonSvelteComponent, { el, node, component, bindSocket, bindControl }, options) { 23 | const svelteComponent = component.component || CommonSvelteComponent || Node; 24 | const svelteProps = { ...component.props, node, editor, bindSocket, bindControl }; 25 | const app = createSvelte(el, svelteComponent, svelteProps, options); 26 | 27 | node.svelteContext = app; 28 | 29 | return app; 30 | } 31 | 32 | function createControl(editor, { el, control }, options) { 33 | // console.log('control.props', control.props); 34 | 35 | const svelteComponent = control.component; 36 | const svelteProps = { 37 | control, 38 | ...control.props, 39 | getData: control.getData.bind(control), 40 | putData: control.putData.bind(control) 41 | }; 42 | 43 | const app = createSvelte(el, svelteComponent, svelteProps, options); 44 | 45 | control.svelteContext = app; 46 | 47 | return app; 48 | } 49 | 50 | const update = entity => { 51 | return new Promise(res => { 52 | if (!entity.svelteContext) return res(); 53 | 54 | // entity.svelteContext.$forceUpdate(); 55 | // entity.svelteContext.$nextTick(res); 56 | }); 57 | }; 58 | 59 | function install(editor, { component: CommonSvelteComponent, options }) { 60 | editor.on('rendernode', ({ el, node, component, bindSocket, bindControl }) => { 61 | if (!component.render || component.render !== 'svelte') return; 62 | 63 | node._svelte = createNode( 64 | editor, 65 | CommonSvelteComponent, 66 | { el, node, component, bindSocket, bindControl }, 67 | options 68 | ); 69 | 70 | node.update = Promise.resolve(update(node)); 71 | }); 72 | 73 | editor.on('rendercontrol', ({ el, control }) => { 74 | if (!control.render || control.render !== 'svelte') return; 75 | 76 | // console.log('rendercontrol', control); 77 | 78 | control._svelte = createControl(editor, { el, control }, options); 79 | control.update = Promise.resolve(update(control)); 80 | }); 81 | 82 | editor.on('connectioncreated connectionremoved', connection => { 83 | update(connection.output.node); 84 | update(connection.input.node); 85 | }); 86 | 87 | editor.on('nodeselected', () => { 88 | editor.nodes.map(update); 89 | }); 90 | } 91 | 92 | export default { 93 | name: 'rete-svelte-render', 94 | install, 95 | Control, 96 | DefaultableControlComponent, 97 | FilterControlComponent, 98 | Node, 99 | InputControl, 100 | Socket 101 | }; 102 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | export function kebab(str) { 2 | const replace = s => s.toLowerCase().replace(/ /g, '-'); 3 | 4 | return Array.isArray(str) ? str.map(replace) : replace(str); 5 | } 6 | -------------------------------------------------------------------------------- /src/vars.sass: -------------------------------------------------------------------------------- 1 | $node-color: rgba(110,136,255,0.8) 2 | $node-color-selected: #ffd92c 3 | $group-color: rgba(15,80,255,0.2) 4 | $group-handler-size: 40px 5 | $group-handler-offset: -10px 6 | $socket-size: 24px 7 | $socket-margin: 6px 8 | $socket-color: #96b38a 9 | $node-width: 180px 10 | --------------------------------------------------------------------------------