core-extra/webapp/static/corenetwork.js

const NodeTypes = {
    // default router
    0: {
        name: 'node'
    },
    // switch
    4: {
        name: 'switch'
    },
    // hub
    5: {
        name: 'hub'
    },
    // wlan
    6: {
        name: 'wlan'
    }
};

class CoreNode {
    constructor(id, name, x, y) {
        this.id = id;
        this.name = name;
        this.model = null;
        this.canvas = null;
        this.icon = null;
        this.opaque = null;
        this.services = [];
        this.x = x;
        this.y = y;
        this.lat = null;
        this.lon = null;
        this.alt = null;
        this.emulation_id = null;
        this.emulation_server = null;
    }

    getNetworkNode() {
        return {
            id: this.id,
            x: this.x,
            y: this.y,
            label: this.name,
            node: this
            //color: '#FFF',
            //shape: 'image',
            //shapeProperties: {
            //    useBorderWithImage: true
            //},
            //image: nodeMode.image,
            //type: nodeMode.nodeType
        };
    }
}

class CoreNetwork {
    constructor(elementId) {
        this.nodeType = NodeTypes['0'];
        this.nodeModel = null;
        this.nodeId = 0;
        this.container = document.getElementById(elementId);
        this.nodes = new vis.DataSet();
        this.edges = new vis.DataSet();
        this.networkData = {
            nodes: this.nodes,
            edges: this.edges
        };
        this.networkOptions = {
            height: '95%',
            physics: false,
            interaction: {
                selectConnectedEdges: false
            },
            edges: {
                shadow: true,
                width: 3,
                smooth: false,
                color: {
                    color: '#000000'
                }
            },
            nodes: {
                shadow: true
            }
        };
        this.network = new vis.Network(this.container, this.networkData, this.networkOptions);
        this.network.on('doubleClick', this.addNode.bind(this));
        this.edges.on('add', this.addEdge.bind(this));
    }

    nextNodeId() {
        this.nodeId += 1;
        return this.nodeId;
    }

    addNode(properties) {
        console.log('add node event: ', properties);
        if (properties.nodes.length === 0) {
            const {x, y} = properties.pointer.canvas;
            const nodeId = this.nextNodeId();
            const name = `${this.nodeType.name}${nodeId}`;
            const coreNode = new CoreNode(nodeId, name, x, y);
            coreNode.model = this.nodeModel;
            this.nodes.add(coreNode.getNetworkNode());
            console.log('added node: ', coreNode.getNetworkNode());
        }
    }

    addEdge(_, properties) {
        const edgeId = properties.items[0];
        const edge = this.edges.get(edgeId);
        console.log('added edge: ', edgeId, edge);
        if (edge.from === edge.to) {
            console.log('removing cyclic edge');
            this.edges.remove(edge.id);
        }

        // keep edge mode enabled
        setTimeout(() => this.network.addEdgeMode(), 250);
    }

    linkMode(enabled) {
        console.log('link mode:', enabled);
        if (enabled) {
            this.network.addEdgeMode();
        } else {
            this.network.disableEditMode();
        }
    }

    setNodeMode(nodeType, model) {
        this.nodeType = NodeTypes[nodeType];
        this.nodeModel = model || null;
    }
}