UNPKG

@selenite/graph-editor

Version:

A graph editor for visual programming, based on rete and svelte.

85 lines (84 loc) 3.3 kB
import { AreaExtensions, AreaPlugin } from 'rete-area-plugin'; import { AutoArrangePlugin, Presets as ArrangePresets } from 'rete-auto-arrange-plugin'; import { TypedSocketsPlugin } from '../../graph-editor/plugins/typed-sockets'; import { NodeEditor, NodeFactory } from '../editor'; import { MegaSetup } from './MegaSetup'; import { Presets as HistoryPresets } from 'rete-history-plugin'; import { HistoryPlugin } from '../plugins/history'; import { CommentPlugin, CommentExtensions } from '../plugins/CommentPlugin'; export async function setupEditor(params) { const { container, makutuClasses, loadExample, saveData, geosContext, geosContextV2, modalStore } = params; if (container === null) throw new Error('Container is null'); const editor = new NodeEditor(); const typedSocketsPlugin = new TypedSocketsPlugin(); editor.use(typedSocketsPlugin); const arrange = new AutoArrangePlugin(); arrange.addPreset(ArrangePresets.classic.setup()); const area = new AreaPlugin(container); editor.use(area); const selector = AreaExtensions.selector(); const accumulating = AreaExtensions.accumulateOnCtrl(); const history = new HistoryPlugin(); history.addPreset(HistoryPresets.classic.setup()); area.use(history); // Setup node factory const nodeFactory = new NodeFactory({ editor, area, makutuClasses, selector, arrange, history, modalStore, accumulating }); // Setup comments const comment = new CommentPlugin({ factory: nodeFactory }); CommentExtensions.selectable(comment, selector, accumulating); area.use(comment); nodeFactory.comment = comment; // Setup react renderer const megaSetup = new MegaSetup(); megaSetup.setup(editor, area, nodeFactory, geosContext, geosContextV2); area.use(arrange); AreaExtensions.showInputControl(area); const selectableNodes = AreaExtensions.selectableNodes(area, selector, { accumulating }); nodeFactory.selectableNodes = selectableNodes; let nodesToFocus = []; let isExample = false; if (loadExample && saveData === undefined) { isExample = true; nodesToFocus = await loadExample(nodeFactory); await arrange.layout(); } if (saveData) { await nodeFactory.loadGraph(saveData); nodesToFocus = editor.getNodes(); } AreaExtensions.simpleNodesOrder(area); // await AreaExtensions.zoomAt(area, nodesToFocus); console.log('Editor setup'); return { destroy: () => area.destroy(), firstDisplay: async () => { nodeFactory.dataflowEngine.reset(); nodeFactory.processDataflow(); editor.addPipe((context) => { if (context.type === 'connectioncreated' || context.type === 'connectionremoved') { const conn = context.data; console.log('resetting node', conn.target); nodeFactory.dataflowEngine.reset(conn.target); } return context; }); // if (isExample) // await arrange.layout(); await AreaExtensions.zoomAt(area, nodesToFocus); }, editor, factory: nodeFactory }; }