rete-svelte-render-plugin

15 | -------------------------------------------------------------------------------- /src/DefaultableControlComponent.svelte: -------------------------------------------------------------------------------- 1 | 39 | 40 | 67 | 68 | 69 | 70 |

71 | {#if label} 72 | {label} 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 | --------------------------------------------------------------------------------