├── .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 |
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 |
--------------------------------------------------------------------------------