Merge pull request #990 from projectstorm/changeset-release/master

Version Packages

.prettierrc

@@ -1,7 +1,6 @@
 {
 	"semi": true,
 	"singleQuote": true,
-	"jsxBracketSameLine": true,
 	"useTabs": true,
 	"printWidth": 120,
 	"trailingComma": "none"

diagrams-demo-gallery/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @projectstorm/react-diagrams-gallery
 
+## 7.1.1
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/react-canvas-core@7.0.1
+  - @projectstorm/react-diagrams@7.0.2
+  - @projectstorm/react-diagrams-core@7.0.1
+  - @projectstorm/react-diagrams-defaults@7.1.1
+
+## 7.1.0
+
+### Minor Changes
+
+- e0d21f1: - [feature] new ability to refresh links in auto distribute system [PR 756](https://github.com/projectstorm/react-diagrams/pull/756)
+
+  - [fix] Default link now uses the correct method for creating a point allowing this to be overridden [PR 939](https://github.com/projectstorm/react-diagrams/pull/939)
+
+  Big thanks to @ToTheHit and @h0111in for your help on these, even though its very delayed on my part :)
+
+### Patch Changes
+
+- Updated dependencies [e0d21f1]
+  - @projectstorm/react-diagrams-defaults@7.1.0
+  - @projectstorm/react-diagrams@7.0.1
+
 ## 7.0.0
 
 ### Major Changes

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

@@ -45,7 +45,8 @@ class DemoWidget extends React.Component<{ model: DiagramModel; engine: DiagramE
 				marginx: 25,
 				marginy: 25
 			},
-			includeLinks: true
+			includeLinks: true,
+			nodeMargin: 25
 		});
 	}
 
@@ -57,6 +58,13 @@ class DemoWidget extends React.Component<{ model: DiagramModel; engine: DiagramE
 		this.props.engine.repaintCanvas();
 	};
 
+	autoRefreshLinks = () => {
+		this.engine.refreshLinks(this.props.model);
+
+		// only happens if pathfing is enabled (check line 25)
+		this.reroute();
+		this.props.engine.repaintCanvas();
+	};
 	componentDidMount(): void {
 		setTimeout(() => {
 			this.autoDistribute();
@@ -72,7 +80,14 @@ class DemoWidget extends React.Component<{ model: DiagramModel; engine: DiagramE
 
 	render() {
 		return (
-			<DemoWorkspaceWidget buttons={<DemoButton onClick={this.autoDistribute}>Re-distribute</DemoButton>}>
+			<DemoWorkspaceWidget
+				buttons={
+					<div>
+						<DemoButton onClick={this.autoDistribute}>Re-distribute</DemoButton>
+						<DemoButton onClick={this.autoRefreshLinks}>Refresh Links</DemoButton>
+					</div>
+				}
+			>
 				<DemoCanvasWidget>
 					<CanvasWidget engine={this.props.engine} />
 				</DemoCanvasWidget>
@@ -106,9 +121,11 @@ export default () => {
 	});
 
 	// more links for more complicated diagram
-	links.push(connectNodes(nodesFrom[0], nodesTo[1], engine));
-	links.push(connectNodes(nodesTo[0], nodesFrom[1], engine));
-	links.push(connectNodes(nodesFrom[1], nodesTo[2], engine));
+	links.push(connectNodes(nodesTo[0], nodesTo[1], engine));
+	links.push(connectNodes(nodesTo[1], nodesTo[2], engine));
+	links.push(connectNodes(nodesTo[0], nodesTo[2], engine));
+	links.push(connectNodes(nodesFrom[0], nodesFrom[2], engine));
+	links.push(connectNodes(nodesFrom[0], nodesTo[2], engine));
 
 	// initial random position
 	nodesFrom.forEach((node, index) => {

diagrams-demo-gallery/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-diagrams-gallery",
-	"version": "7.0.0",
+	"version": "7.1.1",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"private": true,

diagrams-demo-project/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @projectstorm/react-diagrams-demo
 
+## 7.0.2
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/react-diagrams@7.0.2
+
+## 7.0.1
+
+### Patch Changes
+
+- @projectstorm/react-diagrams@7.0.1
+
 ## 7.0.0
 
 ### Major Changes

diagrams-demo-project/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-diagrams-demo",
-	"version": "7.0.0",
+	"version": "7.0.2",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"private": true,

packages/geometry/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @projectstorm/geometry
 
+## 7.0.1
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+
 ## 7.0.0
 
 ### Major Changes

packages/geometry/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/geometry",
-	"version": "7.0.0",
+	"version": "7.0.1",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"repository": {

packages/react-canvas-core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @projectstorm/react-canvas-core
 
+## 7.0.1
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/geometry@7.0.1
+
 ## 7.0.0
 
 ### Major Changes

packages/react-canvas-core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-canvas-core",
-	"version": "7.0.0",
+	"version": "7.0.1",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"repository": {

packages/react-diagrams-core/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 7.0.1
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/geometry@7.0.1
+  - @projectstorm/react-canvas-core@7.0.1
+
 ## 7.0.0
 
 ### Major Changes

packages/react-diagrams-core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-diagrams-core",
-	"version": "7.0.0",
+	"version": "7.0.1",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"repository": {

packages/react-diagrams-defaults/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @projectstorm/react-diagrams-defaults
 
+## 7.1.1
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/geometry@7.0.1
+  - @projectstorm/react-canvas-core@7.0.1
+  - @projectstorm/react-diagrams-core@7.0.1
+
+## 7.1.0
+
+### Minor Changes
+
+- e0d21f1: - [feature] new ability to refresh links in auto distribute system [PR 756](https://github.com/projectstorm/react-diagrams/pull/756)
+
+  - [fix] Default link now uses the correct method for creating a point allowing this to be overridden [PR 939](https://github.com/projectstorm/react-diagrams/pull/939)
+
+  Big thanks to @ToTheHit and @h0111in for your help on these, even though its very delayed on my part :)
+
 ## 7.0.0
 
 ### Major Changes

packages/react-diagrams-defaults/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-diagrams-defaults",
-	"version": "7.0.0",
+	"version": "7.1.1",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"repository": {

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

@@ -58,11 +58,8 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 			!this.props.link.isLocked() &&
 			this.props.link.getPoints().length - 1 <= this.props.diagramEngine.getMaxNumberPointsPerLink()
 		) {
-			const point = new PointModel({
-				link: this.props.link,
-				position: this.props.diagramEngine.getRelativeMousePoint(event)
-			});
-			this.props.link.addPoint(point, index);
+			const position = this.props.diagramEngine.getRelativeMousePoint(event);
+			const point = this.props.link.point(position.x, position.y, index);
 			event.persist();
 			event.stopPropagation();
 			this.forceUpdate(() => {

packages/react-diagrams-routing/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @projectstorm/react-diagrams-routing
 
+## 7.1.1
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/geometry@7.0.1
+  - @projectstorm/react-canvas-core@7.0.1
+  - @projectstorm/react-diagrams-core@7.0.1
+  - @projectstorm/react-diagrams-defaults@7.1.1
+
+## 7.1.0
+
+### Minor Changes
+
+- e0d21f1: - [feature] new ability to refresh links in auto distribute system [PR 756](https://github.com/projectstorm/react-diagrams/pull/756)
+
+  - [fix] Default link now uses the correct method for creating a point allowing this to be overridden [PR 939](https://github.com/projectstorm/react-diagrams/pull/939)
+
+  Big thanks to @ToTheHit and @h0111in for your help on these, even though its very delayed on my part :)
+
+### Patch Changes
+
+- Updated dependencies [e0d21f1]
+  - @projectstorm/react-diagrams-defaults@7.1.0
+
 ## 7.0.0
 
 ### Major Changes

packages/react-diagrams-routing/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-diagrams-routing",
-	"version": "7.0.0",
+	"version": "7.1.1",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"repository": {

packages/react-diagrams-routing/src/dagre/DagreEngine.ts

@@ -1,15 +1,16 @@
 import { DiagramModel, PointModel } from '@projectstorm/react-diagrams-core';
 import * as dagre from 'dagre';
-import * as _ from 'lodash';
 import { GraphLabel } from 'dagre';
+import * as _ from 'lodash';
 import { Point } from '@projectstorm/geometry';
 
 export interface DagreEngineOptions {
 	graph?: GraphLabel;
 	/**
-	 * Will also layout links
+	 * Will also re-layout links
 	 */
 	includeLinks?: boolean;
+	nodeMargin?: number;
 }
 
 export class DagreEngine {
@@ -68,4 +69,184 @@ export class DagreEngine {
 			});
 		}
 	}
+
+	/**
+	 * TODO cleanup this method into smaller methods
+	 */
+	public refreshLinks(diagram: DiagramModel) {
+		const { nodeMargin } = this.options;
+		const nodes = diagram.getNodes();
+		const links = diagram.getLinks();
+		let maxChunkRowIndex = -1;
+		// build the chunk matrix
+		const chunks: { [id: number]: { [id: number]: boolean } } = {}; // true: occupied, false: blank
+		const NodeXColumnIndexDictionary: { [id: number]: number } = {};
+		let verticalLines: number[] = [];
+		_.forEach(nodes, (node) => {
+			// find vertical lines. vertical lines go through maximum number of nodes located under each other.
+			const nodeColumnCenter = node.getX() + node.width / 2;
+			if (
+				_.every(verticalLines, (vLine) => {
+					return Math.abs(nodeColumnCenter - vLine) > nodeMargin;
+				})
+			) {
+				verticalLines.push(nodeColumnCenter);
+			}
+		});
+
+		// sort chunk columns
+		verticalLines = verticalLines.sort((a, b) => a - b);
+		_.forEach(verticalLines, (line, index) => {
+			chunks[index] = {};
+			chunks[index + 0.5] = {};
+		});
+
+		// set occupied chunks
+		_.forEach(nodes, (node) => {
+			const nodeColumnCenter = node.getX() + node.width / 2;
+			const startChunkIndex = Math.floor(node.getY() / nodeMargin);
+			const endChunkIndex = Math.floor((node.getY() + node.height) / nodeMargin);
+			// find max ChunkRowIndex
+			if (endChunkIndex > maxChunkRowIndex) maxChunkRowIndex = endChunkIndex;
+			const nodeColumnIndex = _.findIndex(verticalLines, (vLine) => {
+				return Math.abs(nodeColumnCenter - vLine) <= nodeMargin;
+			});
+			_.forEach(_.range(startChunkIndex, endChunkIndex + 1), (chunkIndex) => {
+				chunks[nodeColumnIndex][chunkIndex] = true;
+			});
+			NodeXColumnIndexDictionary[node.getX()] = nodeColumnIndex;
+		});
+
+		// sort links based on their distances
+		const edges = _.map(links, (link) => {
+			if (link.getSourcePort() && link.getTargetPort()) {
+				const source = link.getSourcePort().getNode();
+				const target = link.getTargetPort().getNode();
+				const sourceIndex = NodeXColumnIndexDictionary[source.getX()];
+				const targetIndex = NodeXColumnIndexDictionary[target.getX()];
+
+				return sourceIndex > targetIndex
+					? {
+							link,
+							sourceIndex,
+							sourceY: source.getY() + source.height / 2,
+							source,
+							targetIndex,
+							targetY: target.getY() + source.height / 2,
+							target
+					  }
+					: {
+							link,
+							sourceIndex: targetIndex,
+							sourceY: target.getY() + target.height / 2,
+							source: target,
+							targetIndex: sourceIndex,
+							targetY: source.getY() + source.height / 2,
+							target: source
+					  };
+			}
+		});
+		const sortedEdges = _.sortBy(edges, (link) => {
+			return Math.abs(link.targetIndex - link.sourceIndex);
+		});
+
+		// set link points
+		if (this.options.includeLinks) {
+			_.forEach(sortedEdges, (edge) => {
+				const link = diagram.getLink(edge.link.getID());
+				// re-draw
+				if (Math.abs(edge.sourceIndex - edge.targetIndex) > 1) {
+					// get the length of link in column
+					const columns = _.range(edge.sourceIndex - 1, edge.targetIndex);
+
+					const chunkIndex = Math.floor(edge.sourceY / nodeMargin);
+					const targetChunkIndex = Math.floor(edge.targetY / nodeMargin);
+
+					// check upper paths
+					let northCost = 1;
+					let aboveRowIndex = chunkIndex;
+					for (; aboveRowIndex >= 0; aboveRowIndex--, northCost++) {
+						if (
+							_.every(columns, (columnIndex) => {
+								return !(
+									chunks[columnIndex][aboveRowIndex] ||
+									chunks[columnIndex + 0.5][aboveRowIndex] ||
+									chunks[columnIndex - 0.5][aboveRowIndex]
+								);
+							})
+						) {
+							break;
+						}
+					}
+
+					// check lower paths
+					let southCost = 0;
+					let belowRowIndex = chunkIndex;
+					for (; belowRowIndex <= maxChunkRowIndex; belowRowIndex++, southCost++) {
+						if (
+							_.every(columns, (columnIndex) => {
+								return !(
+									chunks[columnIndex][belowRowIndex] ||
+									chunks[columnIndex + 0.5][belowRowIndex] ||
+									chunks[columnIndex - 0.5][belowRowIndex]
+								);
+							})
+						) {
+							break;
+						}
+					}
+					// pick the cheapest path
+					const pathRowIndex =
+						southCost + (belowRowIndex - targetChunkIndex) < northCost + (targetChunkIndex - aboveRowIndex)
+							? belowRowIndex + 1
+							: aboveRowIndex - 1;
+
+					// Finally update the link points
+					const points = [link.getFirstPoint()];
+					points.push(
+						new PointModel({
+							link: link,
+							position: new Point(
+								(verticalLines[columns[0]] + verticalLines[columns[0] + 1]) / 2,
+								(pathRowIndex + 0.5) * nodeMargin
+							)
+						})
+					);
+
+					_.forEach(columns, (column) => {
+						points.push(
+							new PointModel({
+								link: link,
+								position: new Point(verticalLines[column], (pathRowIndex + 0.5) * nodeMargin)
+							})
+						);
+						points.push(
+							new PointModel({
+								link: link,
+								position: new Point(
+									(verticalLines[column] + verticalLines[column - 1]) / 2,
+									(pathRowIndex + 0.5) * nodeMargin
+								)
+							})
+						);
+						chunks[column][pathRowIndex] = true;
+						chunks[column][pathRowIndex + 1] = true;
+						chunks[column + 0.5][pathRowIndex] = true;
+						chunks[column + 0.5][pathRowIndex + 1] = true;
+					});
+					link.setPoints(points.concat(link.getLastPoint()));
+				} else {
+					// refresh
+					link.setPoints([link.getFirstPoint(), link.getLastPoint()]);
+					const columnIndex = (edge.sourceIndex + edge.targetIndex) / 2;
+					if (!chunks[columnIndex]) {
+						chunks[columnIndex] = {};
+					}
+					const rowIndex = Math.floor((edge.sourceY + edge.targetY) / 2 / nodeMargin);
+					chunks[columnIndex][rowIndex] = true;
+					chunks[columnIndex][rowIndex + 1] = true;
+				}
+			});
+		}
+	}
 }

packages/react-diagrams/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @projectstorm/react-diagrams
 
+## 7.0.2
+
+### Patch Changes
+
+- b8a4cbd: Inline sources in sourcemap
+- Updated dependencies [b8a4cbd]
+  - @projectstorm/react-canvas-core@7.0.1
+  - @projectstorm/react-diagrams-core@7.0.1
+  - @projectstorm/react-diagrams-defaults@7.1.1
+  - @projectstorm/react-diagrams-routing@7.1.1
+
+## 7.0.1
+
+### Patch Changes
+
+- Updated dependencies [e0d21f1]
+  - @projectstorm/react-diagrams-defaults@7.1.0
+  - @projectstorm/react-diagrams-routing@7.1.0
+
 ## 7.0.0
 
 ### Major Changes

packages/react-diagrams/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectstorm/react-diagrams",
-	"version": "7.0.0",
+	"version": "7.0.2",
 	"author": "dylanvorster",
 	"license": "MIT",
 	"repository": {

tsconfig.base.json

@@ -7,6 +7,7 @@
 		"incremental": true,
 		"strictNullChecks": false,
 		"sourceMap": true,
+		"inlineSources": true,
 		"skipLibCheck": true,
 		"jsx": "react",
 		"target": "ES6",