@selenite/graph-editor
Version:
A graph editor for visual programming, based on rete and svelte.
85 lines (84 loc) • 3.3 kB
JavaScript
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
};
}