Smart & right angles routing

[alexmarincas]

Hello,

I've tried out your example regarding smart routing and for some reasons, in my demo application the connections are not acting like they should (they are still using curved routing and they are not avoiding other nodes).

My setup:

• create vite@latest react (I've tried with latest react 19.x.x but id didn't worked, then I've downgraded to 18.3.1 as in your setup)

{
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@projectstorm/geometry": "^7.0.3",
    "@projectstorm/react-canvas-core": "^7.0.3",
    "@projectstorm/react-diagrams": "^7.0.4",
    "@projectstorm/react-diagrams-core": "^7.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "scss": "^0.2.4"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "sass-embedded": "^1.93.3",
    "vite": "^7.2.4"
  }
}

helpers directory which contain:

• DemoCanvasWidget.tsx
• DemoWorkspaceWidget.tsx
• Helper.tsx
• index.css

App.jsx (the only difference in my setup is regarding action)

import createEngine, {
	DiagramModel,
	DefaultNodeModel,
	DefaultPortModel,
	PathFindingLinkFactory,
	DefaultLabelModel
} from '@projectstorm/react-diagrams';
import * as React from 'react';
import { DemoButton, DemoWorkspaceWidget } from './helpers/DemoWorkspaceWidget';
// import { action } from '@storybook/addon-actions';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import { DemoCanvasWidget } from './helpers/DemoCanvasWidget';

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 > (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!',
			offsetY: 20
		})
	);

	// add all to the main model
	model.addAll(node1, node2, node3, node4, node5, link1, link2);

	// load model into engine and render
	engine.setModel(model);

	return (
		<DemoWorkspaceWidget
			buttons={
				<DemoButton
					onClick={() => {
						// action('Serialized Graph')(JSON.stringify(model.serialize(), null, 2));
					}}
				>
					Serialize Graph
				</DemoButton>
			}
		>
			<DemoCanvasWidget>
				<CanvasWidget engine={engine} />
			</DemoCanvasWidget>
		</DemoWorkspaceWidget>
	);
};

How it looks:

How it should look like: Smart routing

I would really appreciate your feedback,
Thank you!