@selenite/graph-editor/dist/graph-editor/setup/editor.js

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

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
    };
}