storm-react-diagrams

CustomNodeFactory.js

import { DiagramEngine, NodeModel, AbstractNodeFactory } from "storm-react-diagrams";
import { CustomNodeWidget, CustomNodeModel } from "../../components";
import * as React from "react";

export class CustomNodeFactory extends AbstractNodeFactory {
	constructor() {
		super("custom");
	}

	generateReactWidget(diagramEngine, node) {
		return <CustomNodeWidget node={node ? node : new CustomNodeModel()} />;
	}

	getNewInstance() {
		return new CustomNodeModel();
	}
}

CustomNodeModel.js

import { NodeModel } from "storm-react-diagrams";

export class CustomNodeModel extends NodeModel {
	constructor() {
		super("diamond");
	}
}

CustomNodeWidget.js

import * as React from "react";

/**
 * @author Dylan Vorster
 */
export class CustomNodeWidget extends React.Component {
    static defaultProps = { node: null };
    state = {}

	render() {
		return (
            <div style={{width: '100px', height:'50px', backgroundColor: 'red', border: '2px solid blue', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                Hello
            </div>
		);
	}
}

ExampleContainer.js

import React, { Component } from 'react';
import { ExampleComponent, CustomNodeModel, CustomNodeFactory } from '../components';
import { connect } from 'react-redux';
import actions from '../actions';
import { DashBoardLayout } from '../layouts'
import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget, DefaultPortModel } from "storm-react-diagrams"

class ExampleContainer extends Component {
    state = {
        fathers: [
            { id: 1, name : "Father 1", color: "rgb(0,192,255)", type: 'Out', position: {x: 100, y: 100}},
            { id: 2, name : "Father 2", color: "rgb(192,255,0)", type: 'Out', position: {x: 400, y: 100}}
        ],
        sons: [
            { id: 3, name : "Son 1", color: "rgb(0,192,255)", parent_id: 1, type: 'In', position: {x: 150, y: 150}},
            { id: 4, name : "Son 2", color: "rgb(192,255,0)", parent_id: 2, type: 'In', position: {x: 450, y: 150}}
        ],
    }

    componentWillMount () {
        this.setState({
            fathers: this.state.fathers.map((father) => { father.node = this.createNode(father); return father; }),
            sons: this.state.sons.map((son) => { son.node = this.createNode(son); return son; })
        })
    } 
    
    createNode = (data) => {
        let node = new DefaultNodeModel(data.name, data.color);
        node.setPosition(data.position.x, data.position.y);
        return node
    }

    connectNodes = (father, son) => {
        let fatherPort = father.addOutPort();
        father.addInPort();
        let sonPort = son.addInPort();
        return fatherPort.link(sonPort);
    }

    createLinks = (parents, children) => {
        return children.map((child) => {
            let parent = parents.find((parent) => parent.id === child.parent_id);
            if (!parent) return null
            return this.connectNodes(parent.node, child.node);
        })
    }

    addElementsToModel = (model, elements = []) => {
        elements.forEach((element) => element.node ? model.addAll(element.node) : model.addAll(element))
    }  

    render() {
        //1) setup the diagram engine
        var engine = new DiagramEngine();
        engine.installDefaultFactories();

        let customNodeFactory = new CustomNodeFactory()
	    engine.registerNodeFactory(customNodeFactory);


        //2) setup the diagram model
        var model = new DiagramModel();

        let links = this.createLinks(this.state.fathers, this.state.sons);

        this.addElementsToModel(model, this.state.fathers)
        this.addElementsToModel(model, this.state.sons)
        this.addElementsToModel(model, links)

        let customNode = new CustomNodeModel();
        customNode.setPosition(800, 800)
        this.addElementsToModel(model, customNode)

        //5) load model into engine
        engine.setDiagramModel(model);

        //6) render the diagram!
        return <DiagramWidget className="w-100 h-100 bg-black" diagramEngine={engine} />
    }
}

const mapStateToProps = (state, props) =>({
  example: state.example
})

export default connect(mapStateToProps)(ExampleContainer)