editor.js

import { State } from "./state";
import * as Graph from "./graph";
import { loadGraphJson } from "../../datasets/datasets";
import ForceGraph from "force-graph";
import * as Interactions from "./interactions";
import { SPACE } from "../../config";


export var state;
export var graph;
var graphObj;

window.onload = function () {
    // Only execute, if corresponding dom is present
    if (document.getElementById("ks-editor") === null) {
        return;
    }

    document.onkeydown = (e) => state.onKeyDown(e);
    document.onkeyup = (e) => state.onKeyUp(e);

    Interactions.initInteractions();

    loadGraphJson(SPACE) // space_id defined globaly through knowledge-space.php
        .then((graphConfig) => {
            state = new State();
            graph = new Graph.Graph(graphConfig);
            load();

            graph.restartSimulation();
        });
};


function extractPositions(event) {
    return {
        graph: graphObj.screen2GraphCoords(event.layerX, event.layerY),
        window: { x: event.clientX, y: event.clientY },
    };
}

function load() {
    const graphContainer = document.getElementById("2d-graph");
    const width = graphContainer.offsetWidth;

    graphObj = ForceGraph()(graphContainer)
        .height(600)
        .width(width)
        .graphData(graph.data)
        .nodeLabel(Graph.NODE_LABEL)
        .linkColor((link) => state.linkColor(link))
        .nodeColor((node) => state.nodeColor(node))
        .onNodeClick((node) => state.onNodeClick(node))
        .autoPauseRedraw(false) // keep redrawing after engine has stopped
        .linkWidth((link) => state.linkWidth(link))
        .linkDirectionalParticles(state.linkDirectionalParticles())
        .linkDirectionalParticleWidth((link) =>
            state.linkDirectionalParticleWidth(link)
        )
        .onBackgroundClick((event) =>
            state.onBackgroundClick(event, extractPositions(event))
        )
        .nodeCanvasObjectMode((node) => state.nodeCanvasObjectMode(node))
        .nodeCanvasObject((node, ctx, globalScale) => state.nodeCanvasObject(node, ctx, globalScale))
        .linkCanvasObjectMode((link) => state.linkCanvasObjectMode(link))
        .linkCanvasObject((link, ctx, globalScale) => state.linkCanvasObject(link, ctx, globalScale))
        .onLinkClick((link) => state.onLinkClick(link));

    graph.onChangeCallbacks.push((data) => {
        graphObj.cooldownTicks(0);
        graphObj.graphData(data);
    });

    graph.setRenderer(graphObj);
}