Merge pull request #1043 from sergkot2020/right-angle-link-fix

Update RightAngleLinkWidget.tsx

.changeset/cold-drinks-unite.md

@@ -0,0 +1,11 @@
+---
+'@projectstorm/react-diagrams-defaults': patch
+'@projectstorm/react-diagrams-routing': patch
+'@projectstorm/react-diagrams-core': patch
+'@projectstorm/react-canvas-core': patch
+'@projectstorm/react-diagrams-gallery': patch
+'@projectstorm/react-diagrams-demo': patch
+'@projectstorm/geometry': patch
+---
+
+Updated packages to support React v19

diagrams-demo-gallery/.storybook/main.js

@@ -1,8 +1,5 @@
 module.exports = {
 	stories: ['../demos/*.stories.tsx'],
-	addons: ['@storybook/addon-actions'],
-	framework: {
-		name: '@storybook/react-webpack5',
-		options: {}
-	}
+	addons: ['@storybook/addon-actions', '@storybook/addon-webpack5-compiler-babel'],
+	framework: '@storybook/react-webpack5'
 };

diagrams-demo-gallery/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 
 import diagramsTheme from './theme';
 

diagrams-demo-gallery/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @projectstorm/react-diagrams-gallery
 
+## 7.2.1
+
+### Patch Changes
+
+- adb4415: Fixed the demos
+
 ## 7.2.0
 
 ### Minor Changes

diagrams-demo-gallery/demos/demo-custom-link-label/EditableLabelFactory.tsx

@@ -4,6 +4,7 @@ import { DiagramEngine } from '@projectstorm/react-diagrams';
 
 import { EditableLabelModel } from './EditableLabelModel';
 import { EditableLabelWidget } from './EditableLabelWidget';
+import { JSX } from 'react';
 
 export class EditableLabelFactory extends AbstractReactFactory<EditableLabelModel, DiagramEngine> {
 	constructor() {

diagrams-demo-gallery/demos/demo-custom-link2/index.tsx

@@ -10,7 +10,9 @@ import { LinkWidget, PointModel } from '@projectstorm/react-diagrams-core';
 import * as React from 'react';
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
-import { MouseEvent } from 'react';
+import { JSX, MouseEvent } from 'react';
+import { DefaultLinkPointWidget, DefaultLinkSegmentWidget } from '@projectstorm/react-diagrams-defaults/dist';
+import { DiagramEngine } from '@projectstorm/react-diagrams-core/dist';
 
 export class AdvancedLinkModel extends DefaultLinkModel {
 	constructor() {
@@ -56,7 +58,56 @@ const CustomLinkArrowWidget = (props) => {
 	);
 };
 
-export class AdvancedLinkWidget extends DefaultLinkWidget {
+export interface AdvancedLinkWWidgetProps {
+	link: DefaultLinkModel;
+	diagramEngine: DiagramEngine;
+	pointAdded?: (point: PointModel, event: MouseEvent) => any;
+	renderPoints?: boolean;
+	selected?: (event: MouseEvent) => any;
+}
+
+export class AdvancedLinkWidget extends React.Component<AdvancedLinkWWidgetProps> {
+	generatePoint = (point: PointModel): JSX.Element => {
+		return (
+			<DefaultLinkPointWidget
+				key={point.getID()}
+				point={point as any}
+				colorSelected={this.props.link.getOptions().selectedColor ?? ''}
+				color={this.props.link.getOptions().color}
+			/>
+		);
+	};
+
+	generateLink = (path: string, extraProps: any, id: string | number): JSX.Element => {
+		return (
+			<DefaultLinkSegmentWidget
+				key={`link-${id}`}
+				path={path}
+				diagramEngine={this.props.diagramEngine}
+				factory={this.props.diagramEngine.getFactoryForLink(this.props.link)}
+				link={this.props.link}
+				extras={extraProps}
+			/>
+		);
+	};
+
+	addPointToLink = (event: MouseEvent, index: number) => {
+		if (
+			!event.shiftKey &&
+			!this.props.link.isLocked() &&
+			this.props.link.getPoints().length - 1 <= this.props.diagramEngine.getMaxNumberPointsPerLink()
+		) {
+			const position = this.props.diagramEngine.getRelativeMousePoint(event);
+			const point = this.props.link.point(position.x, position.y, index);
+			event.persist();
+			event.stopPropagation();
+			this.props.diagramEngine.getActionEventBus().fireAction({
+				event,
+				model: point
+			});
+		}
+	};
+
 	generateArrow(point: PointModel, previousPoint: PointModel): JSX.Element {
 		return (
 			<CustomLinkArrowWidget
@@ -73,7 +124,6 @@ export class AdvancedLinkWidget extends DefaultLinkWidget {
 		//ensure id is present for all points on the path
 		var points = this.props.link.getPoints();
 		var paths = [];
-		this.refPaths = [];
 
 		//draw the multiple anchors and complex line instead
 		for (let j = 0; j < points.length - 1; j++) {

diagrams-demo-gallery/demos/demo-custom-node1/DiamondNodeFactory.tsx

@@ -3,6 +3,7 @@ import { DiamondNodeModel } from './DiamondNodeModel';
 import * as React from 'react';
 import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
 import { DiagramEngine } from '@projectstorm/react-diagrams-core';
+import { JSX } from 'react';
 
 export class DiamondNodeFactory extends AbstractReactFactory<DiamondNodeModel, DiagramEngine> {
 	constructor() {

diagrams-demo-gallery/demos/demo-dagre/index.tsx

@@ -68,10 +68,7 @@ function autoRefreshLinks(engine: DiagramEngine) {
 }
 
 function reroute(engine: DiagramEngine) {
-		engine
-			.getLinkFactories()
-			.getFactory<PathFindingLinkFactory>(PathFindingLinkFactory.NAME)
-			.calculateRoutingMatrix();
+	engine.getLinkFactories().getFactory<PathFindingLinkFactory>(PathFindingLinkFactory.NAME).calculateRoutingMatrix();
 }
 
 function DemoWidget(props) {
@@ -83,11 +80,11 @@ function DemoWidget(props) {
 
 	const redistribute = () => {
 		autoDistribute(engine);
-	}
+	};
 
 	const refreshLinks = () => {
 		autoRefreshLinks(engine);
-	}
+	};
 
 	return (
 		<DemoWorkspaceWidget

diagrams-demo-gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectstorm/react-diagrams-gallery",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "author": "dylanvorster",
   "license": "MIT",
   "private": true,
@@ -31,23 +31,24 @@
     "gsap": "^3.12.2",
     "json-beautify": "^1.1.1",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@storybook/addon-actions": "^7.4.4",
-    "@storybook/addon-options": "^5.3.21",
-    "@storybook/addons": "^7.4.4",
-    "@storybook/react": "^7.4.4",
-    "@storybook/react-webpack5": "^7.4.4",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@storybook/addon-actions": "^8.6.9",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/manager-api": "^8.6.10",
+    "@storybook/preview-api": "^8.6.10",
+    "@storybook/react": "^8.6.9",
+    "@storybook/react-webpack5": "^8.6.9",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^7.4.4",
+    "@storybook/theming": "^8.6.9",
     "@types/lodash": "^4.14.200",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "storybook": "^7.4.4"
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "storybook": "^8.6.9"
   }
 }

diagrams-demo-gallery/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"compileOnSave": false,
 	"compilerOptions": {
-		"suppressExcessPropertyErrors": true,
 		"esModuleInterop": true,
 		"declaration": true,
 		"composite": true,

diagrams-demo-project/package.json

@@ -26,18 +26,18 @@
 	"typings": "./dist/@types/index",
 	"dependencies": {
 		"@projectstorm/react-diagrams": "workspace:*",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
 	},
 	"devDependencies": {
-		"source-map-loader": "^4.0.1",
-		"html-webpack-plugin": "^5.5.3",
-		"@babel/core": "^7.22.20",
-		"@babel/preset-react": "^7.22.15",
-		"@types/react": "^18.2.22",
-		"@types/react-dom": "^18.2.7",
+		"@babel/core": "^7.26.10",
+		"@babel/preset-react": "^7.26.3",
+		"@types/react": "^19.0.12",
+		"@types/react-dom": "^19.0.4",
 		"babel-loader": "^9.1.3",
 		"css-loader": "^6.8.1",
+		"html-webpack-plugin": "^5.5.3",
+		"source-map-loader": "^4.0.1",
 		"style-loader": "^3.3.3",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",

diagrams-demo-project/src/custom-node-ts/TSCustomNodeFactory.tsx

@@ -3,6 +3,7 @@ import { TSCustomNodeModel } from './TSCustomNodeModel';
 import { TSCustomNodeWidget } from './TSCustomNodeWidget';
 import { AbstractReactFactory } from '@projectstorm/react-diagrams';
 import { DiagramEngine } from '@projectstorm/react-diagrams';
+import { JSX } from 'react';
 
 export class TSCustomNodeFactory extends AbstractReactFactory<TSCustomNodeModel, DiagramEngine> {
 	constructor() {

package.json

@@ -18,23 +18,23 @@
 		"nodes"
 	],
 	"scripts": {
-    "ncu": "ncu -u && pnpm recursive exec -- ncu -u",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
-    "clean": "rm -rf packages/*/dist",
-    "test": "pnpm run -r test",
-    "build": "tsc --build && pnpm run -r build",
-    "build:prod": "NODE_ENV=production pnpm build",
-    "release": "pnpm build:prod && pnpm changeset publish",
-    "release:storybook": "tsc --build && cd diagrams-demo-gallery && pnpm storybook:build && ./node_modules/.bin/storybook-to-ghpages --existing-output-dir .out"
+		"ncu": "ncu -u && pnpm recursive exec -- ncu -u",
+		"format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
+		"clean": "rm -rf packages/*/dist",
+		"test": "pnpm run -r test",
+		"build": "tsc --build && pnpm run -r build",
+		"build:prod": "NODE_ENV=production pnpm build",
+		"release": "pnpm build:prod && pnpm changeset publish",
+    	"release:storybook": "tsc --build && cd diagrams-demo-gallery && pnpm storybook:build && ./node_modules/.bin/storybook-to-ghpages --existing-output-dir .out"
 	},
 	"devDependencies": {
-    "@changesets/cli": "^2.26.2",
+    	"@changesets/cli": "^2.26.2",
 		"@types/jest": "^29.5.5",
 		"@types/node": "^20.6.3",
 		"jest": "^29.7.0",
 		"jest-cli": "^29.7.0",
 		"prettier": "^3.0.3",
-    "rimraf": "^5.0.1",
+    	"rimraf": "^5.0.1",
 		"source-map-loader": "^4.0.1",
 		"terser-webpack-plugin": "^5.3.9",
 		"ts-jest": "^29.1.1",
@@ -44,5 +44,10 @@
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.15.1",
 		"webpack-node-externals": "^3.0.0"
+	},
+	"pnpm": {
+		"overrides": {
+			"react": "^19.0.0"
+		}
 	}
 }

packages/react-canvas-core/package.json

@@ -29,14 +29,14 @@
 	"module": "./dist/index.js",
 	"typings": "./dist/@types/index",
 	"dependencies": {
-		"@emotion/react": "^11.11.1",
+		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.11.0",
 		"@projectstorm/geometry": "workspace:*",
-		"react": "^18.2.0",
-		"lodash": "^4.17.21"
+		"lodash": "^4.17.21",
+		"react": "^19.0.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.22",
-		"@types/lodash": "^4.14.200"
+		"@types/lodash": "^4.14.200",
+		"@types/react": "^19.0.12"
 	}
 }

packages/react-canvas-core/src/core/AbstractReactFactory.tsx

@@ -1,6 +1,7 @@
 import { BaseModel } from '../core-models/BaseModel';
 import { AbstractModelFactory } from './AbstractModelFactory';
 import { CanvasEngine } from '../CanvasEngine';
+import { JSX } from 'react';
 
 export interface GenerateWidgetEvent<T extends BaseModel> {
 	model: T;

packages/react-canvas-core/src/entities/selection/SelectionBoxLayerFactory.tsx

@@ -3,6 +3,7 @@ import { AbstractReactFactory, GenerateWidgetEvent } from '../../core/AbstractRe
 import { SelectionLayerModel } from './SelectionLayerModel';
 import { GenerateModelEvent } from '../../core/AbstractModelFactory';
 import { SelectionBoxWidget } from './SelectionBoxWidget';
+import { JSX } from 'react';
 
 export class SelectionBoxLayerFactory extends AbstractReactFactory<SelectionLayerModel> {
 	constructor() {

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import _isEqual from 'lodash/isEqual';
 import { BaseModel } from '../core-models/BaseModel';
+import { JSX } from 'react';
 
 export interface PeformanceWidgetProps {
 	children: () => JSX.Element;

packages/react-diagrams-core/package.json

@@ -35,11 +35,11 @@
 		"@projectstorm/geometry": "workspace:*",
 		"@projectstorm/react-canvas-core": "workspace:*",
 		"lodash": "^4.17.21",
-		"react": "^18.2.0",
+		"react": "^19.0.0",
 		"resize-observer-polyfill": "^1.5.1"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.22",
-		"@types/lodash": "^4.14.200"
+		"@types/lodash": "^4.14.200",
+		"@types/react": "^19.0.12"
 	}
 }

packages/react-diagrams-core/src/DiagramEngine.ts

@@ -3,7 +3,7 @@ import { PortModel } from './entities/port/PortModel';
 import { LinkModel } from './entities/link/LinkModel';
 import { LabelModel } from './entities/label/LabelModel';
 import { boundingBoxFromPolygons, Point, Rectangle } from '@projectstorm/geometry';
-import { MouseEvent } from 'react';
+import { JSX, MouseEvent } from 'react';
 import {
 	AbstractModelFactory,
 	AbstractReactFactory,
@@ -123,9 +123,9 @@ export class DiagramEngine extends CanvasEngine<CanvasEngineListener, DiagramMod
 
 	getFactoryForLabel<F extends AbstractReactFactory<LabelModel, DiagramEngine>>(label: LabelModel) {
 		if (typeof label === 'string') {
-			return this.labelFactories.getFactory(label);
+			return this.labelFactories.getFactory<F>(label);
 		}
-		return this.labelFactories.getFactory(label.getType());
+		return this.labelFactories.getFactory<F>(label.getType());
 	}
 
 	getFactoryForPort<F extends AbstractModelFactory<PortModel, DiagramEngine>>(port: PortModel) {

packages/react-diagrams-core/src/entities/link-layer/LinkLayerFactory.tsx

@@ -3,6 +3,7 @@ import { AbstractReactFactory, GenerateModelEvent, GenerateWidgetEvent } from '@
 import { DiagramEngine } from '../../DiagramEngine';
 import { LinkLayerModel } from './LinkLayerModel';
 import { LinkLayerWidget } from './LinkLayerWidget';
+import { JSX } from 'react';
 
 export class LinkLayerFactory extends AbstractReactFactory<LinkLayerModel, DiagramEngine> {
 	constructor() {

packages/react-diagrams-core/src/entities/node-layer/NodeLayerFactory.tsx

@@ -3,6 +3,7 @@ import { AbstractReactFactory, GenerateModelEvent, GenerateWidgetEvent } from '@
 import { DiagramEngine } from '../../DiagramEngine';
 import { NodeLayerModel } from './NodeLayerModel';
 import { NodeLayerWidget } from './NodeLayerWidget';
+import { JSX } from 'react';
 
 export class NodeLayerFactory extends AbstractReactFactory<NodeLayerModel, DiagramEngine> {
 	constructor() {

packages/react-diagrams-defaults/package.json

@@ -29,16 +29,16 @@
 	"module": "./dist/index.js",
 	"typings": "./dist/@types/index",
 	"dependencies": {
-		"@emotion/react": "^11.11.1",
+		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.*",
 		"@projectstorm/geometry": "workspace:*",
 		"@projectstorm/react-canvas-core": "workspace:*",
 		"@projectstorm/react-diagrams-core": "workspace:*",
 		"lodash": "^4.17.21",
-		"react": "^18.2.0"
+		"react": "^19.0.0"
 	},
 	"devDependencies": {
 		"@types/lodash": "^4.14.200",
-		"@types/react": "^18.2.22"
+		"@types/react": "^19.0.12"
 	}
 }

packages/react-diagrams-defaults/src/label/DefaultLabelFactory.tsx

@@ -3,6 +3,7 @@ import { DefaultLabelModel } from './DefaultLabelModel';
 import { DefaultLabelWidget } from './DefaultLabelWidget';
 import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
 import { DiagramEngine } from '@projectstorm/react-diagrams-core';
+import { JSX } from 'react';
 
 /**
  * @author Dylan Vorster

packages/react-diagrams-defaults/src/link/DefaultLinkFactory.tsx

@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
 import { DiagramEngine } from '@projectstorm/react-diagrams-core';
 import { css, keyframes } from '@emotion/react';
+import { JSX } from 'react';
 
 namespace S {
 	export const Keyframes = keyframes`

packages/react-diagrams-defaults/src/link/DefaultLinkSegmentWidget.tsx

@@ -7,7 +7,7 @@ export interface DefaultLinkSegmentWidgetProps {
 	path: string;
 	link: DefaultLinkModel;
 	selected: boolean;
-	forwardRef: React.RefObject<SVGPathElement>;
+	forwardRef: React.RefObject<SVGPathElement | null>;
 	factory: DefaultLinkFactory;
 	diagramEngine: DiagramEngine;
 	onSelection: (selected: boolean) => any;

packages/react-diagrams-defaults/src/link/DefaultLinkWidget.tsx

@@ -1,6 +1,6 @@
 import { DiagramEngine, LinkWidget, PointModel } from '@projectstorm/react-diagrams-core';
 import * as React from 'react';
-import { MouseEvent, useEffect, useRef } from 'react';
+import { JSX, MouseEvent, useEffect, useRef } from 'react';
 import { DefaultLinkModel } from './DefaultLinkModel';
 import { DefaultLinkPointWidget } from './DefaultLinkPointWidget';
 import { DefaultLinkSegmentWidget } from './DefaultLinkSegmentWidget';

packages/react-diagrams-defaults/src/node/DefaultNodeFactory.tsx

@@ -3,6 +3,7 @@ import { DefaultNodeModel } from './DefaultNodeModel';
 import { DefaultNodeWidget } from './DefaultNodeWidget';
 import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
 import { DiagramEngine } from '@projectstorm/react-diagrams-core';
+import { JSX } from 'react';
 
 export class DefaultNodeFactory extends AbstractReactFactory<DefaultNodeModel, DiagramEngine> {
 	constructor() {

packages/react-diagrams-routing/package.json

@@ -38,11 +38,11 @@
 		"lodash": "^4.17.21",
 		"pathfinding": "^0.4.18",
 		"paths-js": "^0.4.11",
-		"react": "^18.2.0"
+		"react": "^19.0.0"
 	},
 	"devDependencies": {
 		"@types/dagre": "^0.7.50",
 		"@types/lodash": "^4.14.200",
-		"@types/react": "^18.2.22"
+		"@types/react": "^19.0.12"
 	}
 }

packages/react-diagrams-routing/src/link/PathFindingLinkFactory.tsx

@@ -22,6 +22,7 @@ import {
 	InputType,
 	ListenerHandle
 } from '@projectstorm/react-canvas-core';
+import { JSX } from 'react';
 
 export class PathFindingLinkFactory extends DefaultLinkFactory<PathFindingLinkModel> {
 	ROUTING_SCALING_FACTOR: number = 5;

packages/react-diagrams-routing/src/link/PathFindingLinkWidget.tsx

@@ -6,6 +6,7 @@ import { PathFinding } from '../engine/PathFinding';
 import { PathFindingLinkFactory } from './PathFindingLinkFactory';
 import { PathFindingLinkModel } from './PathFindingLinkModel';
 import { DefaultLinkSegmentWidget } from '@projectstorm/react-diagrams-defaults';
+import { JSX } from 'react';
 
 export interface PathFindingLinkWidgetProps {
 	color?: string;

packages/react-diagrams-routing/src/link/RightAngleLinkFactory.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { RightAngleLinkWidget } from './RightAngleLinkWidget';
 import { DefaultLinkFactory } from '@projectstorm/react-diagrams-defaults';
 import { RightAngleLinkModel } from './RightAngleLinkModel';
+import { JSX } from 'react';
 
 /**
  * @author Daniel Lazar

packages/react-diagrams-routing/src/link/RightAngleLinkWidget.tsx

@@ -3,7 +3,7 @@ import { DiagramEngine, LinkWidget, PointModel } from '@projectstorm/react-diagr
 import { RightAngleLinkFactory } from './RightAngleLinkFactory';
 import { DefaultLinkModel, DefaultLinkSegmentWidget } from '@projectstorm/react-diagrams-defaults';
 import { Point } from '@projectstorm/geometry';
-import { MouseEvent } from 'react';
+import { JSX, MouseEvent } from 'react';
 import { RightAngleLinkModel } from './RightAngleLinkModel';
 
 export interface RightAngleLinkProps {
@@ -188,6 +188,7 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
 		//ensure id is present for all points on the path
 		let points = this.props.link.getPoints();
 		let paths = [];
+		this.refPaths = [];
 
 		// Get points based on link orientation
 		let pointLeft = points[0];
@@ -286,7 +287,6 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
 			);
 		}
 
-		this.refPaths = [];
 		return <g data-default-link-test={this.props.link.getOptions().testName}>{paths}</g>;
 	}
 }