How to use the @projectstorm/react-diagrams.DefaultPortModel function in @projectstorm/react-diagrams

To help you get started, we’ve selected a few @projectstorm/react-diagrams examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github projectstorm / react-diagrams / packages / diagrams-demo-gallery / demos / demo-dagre / index.tsx View on Github external
function connectNodes(nodeFrom, nodeTo, engine: DiagramEngine) {
	//just to get id-like structure
	count++;
	const portOut = nodeFrom.addPort(new DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, 'Out'));
	const portTo = nodeTo.addPort(new DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, 'IN'));
	return portOut.link(portTo);

	// ################# UNCOMMENT THIS LINE FOR PATH FINDING #############################
	// return portOut.link(portTo, engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME));
	// #####################################################################################
}
github projectstorm / react-diagrams / packages / diagrams-demo-gallery / demos / demo-smart-routing / index.tsx View on Github external
export default () => {
	// setup the diagram engine
	const engine = createEngine();

	// setup the diagram model
	const model = new DiagramModel();

	// create four nodes in a way that straight links wouldn't work
	const node1 = new DefaultNodeModel('Node A', 'rgb(0,192,255)');
	const port1 = node1.addPort(new DefaultPortModel(false, 'out-1', 'Out'));
	node1.setPosition(340, 350);

	const node2 = new DefaultNodeModel('Node B', 'rgb(255,255,0)');
	const port2 = node2.addPort(new DefaultPortModel(false, 'out-1', 'Out'));
	node2.setPosition(240, 80);
	const node3 = new DefaultNodeModel('Node C', 'rgb(192,255,255)');
	const port3 = node3.addPort(new DefaultPortModel(true, 'in-1', 'In'));
	node3.setPosition(540, 180);
	const node4 = new DefaultNodeModel('Node D', 'rgb(192,0,255)');
	const port4 = node4.addPort(new DefaultPortModel(true, 'in-1', 'In'));
	node4.setPosition(95, 185);
	const node5 = new DefaultNodeModel('Node E', 'rgb(192,255,0)');
	node5.setPosition(250, 180);

	const pathfinding = engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME);
github projectstorm / react-diagrams / packages / diagrams-demo-project / src / custom-node-js / JSCustomNodeModel.js View on Github external
constructor(options = {}) {
		super({
			...options,
			type: 'js-custom-node'
		});
		this.color = options.color || { options: 'red' };

		// setup an in and out port
		this.addPort(
			new DefaultPortModel({
				in: true,
				name: 'in'
			})
		);
		this.addPort(
			new DefaultPortModel({
				in: false,
				name: 'out'
			})
		);
	}
github projectstorm / react-diagrams / packages / diagrams-demo-project / src / custom-node-ts / TSCustomNodeModel.ts View on Github external
constructor(options: TSCustomNodeModelOptions = {}) {
		super({
			...options,
			type: 'ts-custom-node'
		});
		this.color = options.color || 'red';

		// setup an in and out port
		this.addPort(
			new DefaultPortModel({
				in: true,
				name: 'in'
			})
		);
		this.addPort(
			new DefaultPortModel({
				in: false,
				name: 'out'
			})
		);
	}
github projectstorm / react-diagrams / packages / diagrams-demo-gallery / demos / demo-dagre / index.tsx View on Github external
function connectNodes(nodeFrom, nodeTo, engine: DiagramEngine) {
	//just to get id-like structure
	count++;
	const portOut = nodeFrom.addPort(new DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, 'Out'));
	const portTo = nodeTo.addPort(new DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, 'IN'));
	return portOut.link(portTo);

	// ################# UNCOMMENT THIS LINE FOR PATH FINDING #############################
	// return portOut.link(portTo, engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME));
	// #####################################################################################
}
github projectstorm / react-diagrams / packages / diagrams-demo-gallery / demos / demo-smart-routing / index.tsx View on Github external
// setup the diagram engine
	const engine = createEngine();

	// setup the diagram model
	const model = new DiagramModel();

	// create four nodes in a way that straight links wouldn't work
	const node1 = new DefaultNodeModel('Node A', 'rgb(0,192,255)');
	const port1 = node1.addPort(new DefaultPortModel(false, 'out-1', 'Out'));
	node1.setPosition(340, 350);

	const node2 = new DefaultNodeModel('Node B', 'rgb(255,255,0)');
	const port2 = node2.addPort(new DefaultPortModel(false, 'out-1', 'Out'));
	node2.setPosition(240, 80);
	const node3 = new DefaultNodeModel('Node C', 'rgb(192,255,255)');
	const port3 = node3.addPort(new DefaultPortModel(true, 'in-1', 'In'));
	node3.setPosition(540, 180);
	const node4 = new DefaultNodeModel('Node D', 'rgb(192,0,255)');
	const port4 = node4.addPort(new DefaultPortModel(true, 'in-1', 'In'));
	node4.setPosition(95, 185);
	const node5 = new DefaultNodeModel('Node E', 'rgb(192,255,0)');
	node5.setPosition(250, 180);

	const pathfinding = engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME);

	// linking things together (specifically using the pathfinding link)
	const link1 = port1.link(port4, pathfinding);
	const link2 = port2.link(port3, pathfinding);

	link1.addLabel(
		new DefaultLabelModel({
			label: 'I am a label!',