Project STORM React Diagrams

To use the library in a TypeScript project, import the core engine creation function, default models, and the canvas widget. The library provides advanced types out of the box.

Follow these steps to bootstrap a diagram:

1. Initialize the Engine: Use createEngine() to create a DiagramEngine instance with default configurations.
2. Create Nodes: Instantiate DefaultNodeModel objects, set their positions, and add ports using addOutPort or addInPort.
3. Create Links: Link ports together using the .link<T>() method on a port. You can add labels to the resulting link.
4. Assemble the Model: Create a DiagramModel, add your nodes and links to it using .addAll(), and then pass the model to the engine via engine.setModel(model).
5. Render: Use the CanvasWidget component from @projectstorm/react-canvas-core and pass the engine as a prop.

import createEngine, { 
    DefaultLinkModel, 
    DefaultNodeModel,
    DiagramModel 
} from '@projectstorm/react-diagrams';

import {
    CanvasWidget
} from '@projectstorm/react-canvas-core';

// 1. Create the engine
const engine = createEngine();

// 2. Create nodes
const node1 = new DefaultNodeModel({
	name: 'Node 1',
	color: 'rgb(0,192,255)',
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort('Out');

const node2 = new DefaultNodeModel({
	name: 'Node 2',
	color: 'rgb(0,192,255)',
});
node2.setPosition(100, 100);
let port2 = node2.addInPort('In');

// 3. Link ports
const link = port1.link<DefaultLinkModel>(port2);
link.addLabel('Hello World!');

// 4. Setup the model
const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

// 5. Render in React
// <CanvasWidget engine={engine} />

To integrate a custom link model into the system, extend DefaultLinkFactory.

1. Pass the custom type string to the super() call in the constructor to match the type defined in your DefaultLinkModel.
2. Override generateModel() to return instances of your custom model.
3. Override generateLinkSegment() to define how the link is rendered. The DefaultLinkWidget uses this method to render the path segments. By returning a custom React component (like an AdvancedLinkSegment) within a <g> tag, you can change the visual appearance of the link path.

export class AdvancedLinkFactory extends DefaultLinkFactory {
	constructor() {
		super('advanced'); // <-- this matches with the link model above
	}

	generateModel(): AdvancedLinkModel {
		return new AdvancedLinkModel(); // <-- this is how we get new instances
	}

    /**
     * @override the DefaultLinkWidget makes use of this, and it normally renders that
     * familiar gray line, so in this case we simply make it return a new advanced segment.
     */
	generateLinkSegment(model: AdvancedLinkModel, selected: boolean, path: string) {
		return (
			<g>
				<AdvancedLinkSegment model={model} path={path} />
			</g>
		);
	}
}

To integrate a custom node into the diagram engine, you must implement a factory by extending AbstractReactFactory. This factory maps your custom node type string to its model and widget creation logic.

• generateModel(event): Returns a new instance of your custom NodeModel.
• generateReactWidget(event): Returns the React component (Widget) used to render the node, passing the engine and the newly created model from the event.

import { DiamondNodeWidget } from './DiamondNodeWidget';
import { DiamondNodeModel } from './DiamondNodeModel';
import * as React from 'react';
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
import { DiagramEngine } from '@projectstorm/react-diagrams-core';

export class DiamondNodeFactory extends AbstractReactFactory<DiamondNodeModel, DiagramEngine> {
	constructor() {
		super('diamond');
	}

	generateReactWidget(event): JSX.Element {
		return <DiamondNodeWidget engine={this.engine} size={50} node={event.model} />;
	}

	generateModel(event) {
		return new DiamondNodeModel();
	}
}