reworked geometry demo

diagrams-demo-project/package.json

@@ -30,6 +30,8 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
+    "source-map-loader": "^4.0.1",
+    "html-webpack-plugin": "^5.5.0",
     "@babel/core": "^7.20.12",
     "@babel/preset-react": "^7.18.6",
 		"@types/react": "^18.0.27",

diagrams-demo-project/src/BodyWidget.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DiagramEngine, CanvasWidget } from '@projectstorm/react-diagrams';
 
 export interface BodyWidgetProps {
 	engine: DiagramEngine;

diagrams-demo-project/src/custom-node-ts/TSCustomNodeModel.ts

@@ -1,5 +1,4 @@
-import { NodeModel, DefaultPortModel } from '@projectstorm/react-diagrams';
-import { BaseModelOptions } from '@projectstorm/react-canvas-core';
+import { BaseModelOptions, DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';
 
 export interface TSCustomNodeModelOptions extends BaseModelOptions {
 	color?: string;

diagrams-demo-project/tsconfig.json

@@ -5,7 +5,7 @@
 		"jsx": "react",
 		"allowJs": true,
 		"target": "es6",
-		"moduleResolution": "node"
+		"module": "CommonJS"
 	},
 	"include": [
 		"./src"

diagrams-demo-project/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const production = process.env.NODE_ENV === 'production';
 const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
 	mode: production ? 'production' : 'development',
@@ -23,8 +24,18 @@ module.exports = {
 			})
 		]
 	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: 'index.html'
+		})
+	],
 	module: {
 		rules: [
+			{
+				enforce: 'pre',
+				test: /\.js$/,
+				loader: 'source-map-loader'
+			},
 			{
 				test: /\.css$/,
 				use: ['style-loader', 'css-loader']
@@ -36,18 +47,15 @@ module.exports = {
 			},
 			{
 				test: /\.tsx?$/,
-				loader: 'ts-loader',
-				options: {
-					transpileOnly: true
-				}
+				loader: 'ts-loader'
 			}
 		]
 	},
-
 	devServer: {
-		host: '0.0.0.0',
-		compress: true,
-		disableHostCheck: true,
-		overlay: true
+		client: {
+			overlay: true
+		},
+		hot: false,
+		compress: true
 	}
 };

package.json

@@ -31,10 +31,10 @@
     "@changesets/cli": "^2.26.0",
 		"@types/jest": "^29.2.6",
 		"@types/node": "^18.11.18",
-		"jest": "^29.3.1",
-		"jest-cli": "^29.3.1",
+		"jest": "^29.4.0",
+		"jest-cli": "^29.4.0",
 		"prettier": "^2.8.3",
-    "rimraf": "^4.1.1",
+    "rimraf": "^4.1.2",
 		"source-map-loader": "^4.0.1",
 		"terser-webpack-plugin": "^5.3.6",
 		"ts-jest": "^29.0.5",

packages/geometry/src/Bounds.ts

@@ -0,0 +1,28 @@
+import { Point } from './Point';
+
+export enum BoundsCorner {
+	TOP_LEFT = 'TL',
+	TOP_RIGHT = 'TR',
+	BOTTOM_RIGHT = 'BR',
+	BOTTOM_LEFT = 'BL'
+}
+
+export type Bounds = { [k in BoundsCorner]: Point };
+
+export const boundsFromPositionAndSize = (x: number, y: number, width: number, height: number): Bounds => {
+	return {
+		[BoundsCorner.TOP_LEFT]: new Point(x, y),
+		[BoundsCorner.TOP_RIGHT]: new Point(x + width, y),
+		[BoundsCorner.BOTTOM_RIGHT]: new Point(x + width, y + height),
+		[BoundsCorner.BOTTOM_LEFT]: new Point(x, y + height)
+	};
+};
+
+export const createEmptyBounds = () => {
+	return {
+		[BoundsCorner.TOP_LEFT]: new Point(),
+		[BoundsCorner.TOP_RIGHT]: new Point(),
+		[BoundsCorner.BOTTOM_RIGHT]: new Point(),
+		[BoundsCorner.BOTTOM_LEFT]: new Point()
+	};
+};

packages/geometry/src/Matrix.ts

@@ -1,3 +1,5 @@
+import { Point } from './Point';
+
 export class Matrix {
 	matrix: number[][];
 
@@ -19,4 +21,52 @@ export class Matrix {
 	get(rowIndex: number, columnIndex: number): number {
 		return this.asArray()[rowIndex][columnIndex];
 	}
+
+	public static multiply(...matrices: Matrix[]): Matrix {
+		let m: Matrix = matrices[0];
+		for (let i = 1; i < matrices.length; i++) {
+			m = m.mmul(matrices[i]);
+		}
+		return m;
+	}
+
+	public static scaleMatrix(x: number, y: number): Matrix {
+		return new Matrix([
+			[x, 0, 0],
+			[0, y, 0],
+			[0, 0, 1]
+		]);
+	}
+
+	public static translateMatrix(x: number, y: number): Matrix {
+		return new Matrix([
+			[1, 0, x],
+			[0, 1, y],
+			[0, 0, 1]
+		]);
+	}
+
+	public static rotateMatrix(deg: number): Matrix {
+		return new Matrix([
+			[Math.cos(deg), -1 * Math.sin(deg), 0],
+			[Math.sin(deg), Math.cos(deg), 0],
+			[0, 0, 1]
+		]);
+	}
+
+	static createScaleMatrix(x, y, origin: Point): Matrix {
+		return this.multiply(
+			Matrix.translateMatrix(origin.x, origin.y),
+			Matrix.scaleMatrix(x, y),
+			Matrix.translateMatrix(-origin.x, -origin.y)
+		);
+	}
+
+	static createRotateMatrix(deg: number, origin: Point): Matrix {
+		return this.multiply(
+			Matrix.translateMatrix(origin.x, origin.y),
+			Matrix.rotateMatrix(deg),
+			Matrix.translateMatrix(-origin.x, -origin.y)
+		);
+	}
 }

packages/geometry/src/Point.ts

@@ -4,7 +4,7 @@ export class Point {
 	x: number;
 	y: number;
 
-	constructor(x: number, y: number) {
+	constructor(x: number = 0, y: number = 0) {
 		this.x = x;
 		this.y = y;
 	}
@@ -35,52 +35,4 @@ export class Point {
 	public static middlePoint(pointA: Point, pointB: Point): Point {
 		return new Point((pointB.x + pointA.x) / 2, (pointB.y + pointA.y) / 2);
 	}
-
-	public static multiply(...matrices: Matrix[]): Matrix {
-		let m: Matrix = matrices[0];
-		for (let i = 1; i < matrices.length; i++) {
-			m = m.mmul(matrices[i]);
-		}
-		return m;
-	}
-
-	public static scaleMatrix(x: number, y: number): Matrix {
-		return new Matrix([
-			[x, 0, 0],
-			[0, y, 0],
-			[0, 0, 1]
-		]);
-	}
-
-	public static translateMatrix(x: number, y: number): Matrix {
-		return new Matrix([
-			[1, 0, x],
-			[0, 1, y],
-			[0, 0, 1]
-		]);
-	}
-
-	public static rotateMatrix(deg: number): Matrix {
-		return new Matrix([
-			[Math.cos(deg), -1 * Math.sin(deg), 0],
-			[Math.sin(deg), Math.cos(deg), 0],
-			[0, 0, 1]
-		]);
-	}
-
-	static createScaleMatrix(x, y, origin: Point): Matrix {
-		return this.multiply(
-			Point.translateMatrix(origin.x, origin.y),
-			Point.scaleMatrix(x, y),
-			Point.translateMatrix(-origin.x, -origin.y)
-		);
-	}
-
-	static createRotateMatrix(deg: number, origin: Point): Matrix {
-		return this.multiply(
-			Point.translateMatrix(origin.x, origin.y),
-			Point.rotateMatrix(deg),
-			Point.translateMatrix(-origin.x, -origin.y)
-		);
-	}
 }

packages/geometry/src/Polygon.ts

@@ -1,6 +1,8 @@
 import { Point } from './Point';
 import * as _ from 'lodash';
 import { Matrix } from './Matrix';
+import { boundingBoxFromPoints } from './toolkit';
+import { Bounds, BoundsCorner } from './Bounds';
 
 export class Polygon {
 	protected points: Point[];
@@ -22,7 +24,7 @@ export class Polygon {
 	}
 
 	scale(x, y, origin: Point) {
-		let matrix = Point.createScaleMatrix(x, y, origin);
+		let matrix = Matrix.createScaleMatrix(x, y, origin);
 		_.forEach(this.points, (point) => {
 			point.transform(matrix);
 		});
@@ -43,7 +45,7 @@ export class Polygon {
 	}
 
 	rotate(degrees: number) {
-		this.transform(Point.createRotateMatrix(degrees / (180 / Math.PI), this.getOrigin()));
+		this.transform(Matrix.createRotateMatrix(degrees / (180 / Math.PI), this.getOrigin()));
 	}
 
 	translate(offsetX: number, offsetY: number) {
@@ -68,69 +70,11 @@ export class Polygon {
 		if (this.points.length === 0) {
 			return null;
 		}
-		let dimensions = this.getBoundingBox();
-		return Point.middlePoint(dimensions.getTopLeft(), dimensions.getBottomRight());
+		let dimensions = boundingBoxFromPoints(this.points);
+		return Point.middlePoint(dimensions[BoundsCorner.TOP_LEFT], dimensions[BoundsCorner.BOTTOM_RIGHT]);
 	}
 
-	static boundingBoxFromPolygons(polygons: Polygon[]): Rectangle {
-		return Polygon.boundingBoxFromPoints(
-			_.flatMap(polygons, (polygon) => {
-				return polygon.getPoints();
-			})
-		);
-	}
-
-	static boundingBoxFromPoints(points: Point[]): Rectangle {
-		if (points.length === 0) {
-			return new Rectangle(0, 0, 0, 0);
-		}
-
-		let minX = points[0].x;
-		let maxX = points[0].x;
-		let minY = points[0].y;
-		let maxY = points[0].y;
-
-		for (let i = 1; i < points.length; i++) {
-			if (points[i].x < minX) {
-				minX = points[i].x;
-			}
-			if (points[i].x > maxX) {
-				maxX = points[i].x;
-			}
-			if (points[i].y < minY) {
-				minY = points[i].y;
-			}
-			if (points[i].y > maxY) {
-				maxY = points[i].y;
-			}
-		}
-
-		return new Rectangle(new Point(minX, minY), new Point(maxX, minY), new Point(maxX, maxY), new Point(minX, maxY));
-	}
-
-	getBoundingBox(): Rectangle {
-		let minX = this.points[0].x;
-		let maxX = this.points[0].x;
-		let minY = this.points[0].y;
-		let maxY = this.points[0].y;
-
-		for (let i = 1; i < this.points.length; i++) {
-			if (this.points[i].x < minX) {
-				minX = this.points[i].x;
-			}
-			if (this.points[i].x > maxX) {
-				maxX = this.points[i].x;
-			}
-			if (this.points[i].y < minY) {
-				minY = this.points[i].y;
-			}
-			if (this.points[i].y > maxY) {
-				maxY = this.points[i].y;
-			}
-		}
-
-		return new Rectangle(new Point(minX, minY), new Point(maxX, minY), new Point(maxX, maxY), new Point(minX, maxY));
+	getBoundingBox(): Bounds {
+		return boundingBoxFromPoints(this.points);
 	}
 }
-
-import { Rectangle } from './Rectangle';