mirror of
https://github.com/projectstorm/react-diagrams.git
synced 2026-03-13 09:50:09 +08:00
Compare commits
29 Commits
@projectst
...
@projectst
| Author | SHA1 | Date | |
|---|---|---|---|
|
63b39cba79 | ||
|
|
a671b50e09 | ||
|
|
7a664d5b64 | ||
|
|
66c687afc6 | ||
|
|
23b5467806 | ||
|
|
1889c7cb40 | ||
|
|
c3146e1aa8 | ||
|
|
8fb8d04885 | ||
|
|
74e814ab5a | ||
|
|
3d4e0b24d7 | ||
|
|
efd64ad278 | ||
|
|
160b88fccf | ||
|
|
80cd9c9306 | ||
|
|
2de55fdf68 | ||
|
|
b8a4cbdf1a | ||
|
|
76a2659948 | ||
|
|
63e33c07d8 | ||
|
|
70b17a749c | ||
|
|
4ccc5d58f3 | ||
|
|
fb7d646bde | ||
|
|
e0d21f1435 | ||
|
|
6ed1e0f89d | ||
|
|
7da7fa4cc9 | ||
|
|
ed7988f722 | ||
|
|
e6b86321e2 | ||
|
|
17bb78b130 | ||
|
|
77011af27a | ||
|
|
580a26c73d | ||
|
|
4c03583d91 |
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"jsxBracketSameLine": true,
|
||||
"useTabs": true,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "none"
|
||||
|
||||
10
CHANGELOG.md
10
CHANGELOG.md
@@ -157,7 +157,7 @@ __5.1.0__
|
||||
* (refactor) consistently use lodash where possible
|
||||
* (maintenance) upgrade node modules
|
||||
|
||||
__5.0.0__ http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/
|
||||
__5.0.0__ [http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/](https://dylanvorster.com/storm-react-diagrams-v5-0/)
|
||||
|
||||
PR: https://github.com/projectstorm/react-diagrams/pull/145
|
||||
|
||||
@@ -174,7 +174,7 @@ PR: https://github.com/projectstorm/react-diagrams/pull/145
|
||||
* (tests) automatically load JEST Snapshots
|
||||
* (feature) Link labels!
|
||||
|
||||
__4.0.0__ http://dylanv.blog/2018/01/18/storm-react-diagrams-v4-0-0/
|
||||
__4.0.0__ [http://dylanv.blog/2018/01/18/storm-react-diagrams-v4-0-0/](https://dylanvorster.com/storm-react-diagrams-v4-0/)
|
||||
|
||||
* (refactor) Events system was completely overhauled
|
||||
* (demo) Custom Link Sizes
|
||||
@@ -188,7 +188,7 @@ __4.0.0__ http://dylanv.blog/2018/01/18/storm-react-diagrams-v4-0-0/
|
||||
* (demo) Cloning
|
||||
* (feature) models control isLocked
|
||||
|
||||
__3.2.0__ http://dylanv.blog/2017/11/22/storm-react-diagrams-3-2-0/
|
||||
__3.2.0__ [http://dylanv.blog/2017/11/22/storm-react-diagrams-3-2-0/](https://dylanvorster.com/storm-react-diagrams-3-2-0/)
|
||||
* (feature) zoom to fit
|
||||
* added Circle CI tests
|
||||
* (demo) dagre automatic layouts
|
||||
@@ -211,14 +211,14 @@ __3.1.2__
|
||||
* Hotfix: fix zooming when canvas not in the top left corner
|
||||
(https://github.com/projectstorm/react-diagrams/pull/88)
|
||||
|
||||
__3.1.0__ http://dylanv.blog/2017/09/15/storm-react-diagrams-3-1-0/
|
||||
__3.1.0__ [http://dylanv.blog/2017/09/15/storm-react-diagrams-3-1-0/](https://dylanvorster.com/storm-react-diagrams-3-1-0/)
|
||||
* Zoom relative to mouse location
|
||||
* Fixed links not connecting when grid is larger than port size
|
||||
* Prevented points from dragging when connected to a port and the node itself is not selected
|
||||
* API fixes
|
||||
* Code cleanup
|
||||
|
||||
__3.0.0__ http://dylanv.blog/2017/09/13/storm-react-diagrams-v3/
|
||||
__3.0.0__ [http://dylanv.blog/2017/09/13/storm-react-diagrams-v3/](https://dylanvorster.com/storm-react-diagrams-3-0/)
|
||||
* Massive performance updates
|
||||
* Complete rewrite
|
||||
* Started a changelog and design documents for each revision
|
||||
|
||||
@@ -70,7 +70,7 @@ yarn add @projectstorm/react-diagrams-routing
|
||||
|
||||
## How to use
|
||||
|
||||
Before running any of the examples, please run `yarn build` in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.
|
||||
Before running any of the examples, please run `pnpm build` in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.
|
||||
|
||||
|
||||
Take a look at the [diagram demos](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-gallery/demos)
|
||||
@@ -85,11 +85,11 @@ Take a look at the [demo project](https://github.com/projectstorm/react-diagrams
|
||||
|
||||
## Run the demos
|
||||
|
||||
After running `yarn install` and `yarn build`, you must then run: `cd diagrams-demo-gallery && yarn run start`
|
||||
After running `pnpm install` and `pnpm build`, you must then run: `cd diagrams-demo-gallery && pnpm run start`
|
||||
|
||||
## Building from source
|
||||
|
||||
Simply run `yarn` then `yarn build` or `yarn build:prod` in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.
|
||||
Simply run `pnpm` then `pnpm build` or `pnpm build:prod` in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.
|
||||
|
||||
## Built with react-diagrams
|
||||
|
||||
|
||||
18
diagrams-demo-gallery/.babelrc.json
Normal file
18
diagrams-demo-gallery/.babelrc.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"sourceType": "unambiguous",
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"chrome": 100,
|
||||
"safari": 15,
|
||||
"firefox": 91
|
||||
}
|
||||
}
|
||||
],
|
||||
"@babel/preset-react",
|
||||
"@babel/preset-typescript"
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
module.exports = {
|
||||
stories: ['../demos/*.stories.tsx'],
|
||||
core: {
|
||||
builder: 'webpack5'
|
||||
},
|
||||
addons: ['@storybook/addon-actions']
|
||||
addons: ['@storybook/addon-actions'],
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {}
|
||||
}
|
||||
};
|
||||
|
||||
5
diagrams-demo-gallery/.storybook/preview-head.html
Normal file
5
diagrams-demo-gallery/.storybook/preview-head.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<style>
|
||||
html, body, #storybook-root {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,43 @@
|
||||
# @projectstorm/react-diagrams-gallery
|
||||
|
||||
## 7.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
- Updated dependencies [66c687a]
|
||||
- @projectstorm/react-diagrams-defaults@7.1.2
|
||||
- @projectstorm/react-diagrams-core@7.0.2
|
||||
- @projectstorm/react-canvas-core@7.0.2
|
||||
- @projectstorm/react-diagrams@7.0.3
|
||||
|
||||
## 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
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
#storybook-root {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -1,48 +1,53 @@
|
||||
{
|
||||
"name": "@projectstorm/react-diagrams-gallery",
|
||||
"version": "7.0.0",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/projectstorm/react-diagrams.git"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "./node_modules/.bin/start-storybook",
|
||||
"storybook:build": "./node_modules/.bin/build-storybook -c .storybook -o .out"
|
||||
},
|
||||
"keywords": [
|
||||
"web",
|
||||
"diagram",
|
||||
"diagrams",
|
||||
"react",
|
||||
"typescript",
|
||||
"flowchart",
|
||||
"simple",
|
||||
"links",
|
||||
"nodes"
|
||||
],
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.21",
|
||||
"@projectstorm/react-canvas-core": "workspace:*",
|
||||
"@projectstorm/react-diagrams": "workspace:*",
|
||||
"@projectstorm/react-diagrams-core": "workspace:*",
|
||||
"@projectstorm/react-diagrams-defaults": "workspace:*",
|
||||
"gsap": "^3.11.4",
|
||||
"json-beautify": "^1.1.1",
|
||||
"react": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/react": "^18.0.27",
|
||||
"@storybook/addons": "^6.5.15",
|
||||
"@storybook/addon-actions": "^6.5.15",
|
||||
"@storybook/addon-options": "^5.3.21",
|
||||
"@storybook/builder-webpack5": "^6.5.15",
|
||||
"@storybook/manager-webpack5": "^6.5.15",
|
||||
"@storybook/react": "^6.5.15",
|
||||
"@storybook/storybook-deployer": "^2.8.16",
|
||||
"@storybook/theming": "^6.5.15"
|
||||
}
|
||||
"name": "@projectstorm/react-diagrams-gallery",
|
||||
"version": "7.1.2",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/projectstorm/react-diagrams.git"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "pnpm storybook dev",
|
||||
"storybook:build": "./node_modules/.bin/build-storybook -c .storybook -o .out"
|
||||
},
|
||||
"keywords": [
|
||||
"web",
|
||||
"diagram",
|
||||
"diagrams",
|
||||
"react",
|
||||
"typescript",
|
||||
"flowchart",
|
||||
"simple",
|
||||
"links",
|
||||
"nodes"
|
||||
],
|
||||
"dependencies": {
|
||||
"@projectstorm/react-canvas-core": "workspace:*",
|
||||
"@projectstorm/react-diagrams": "workspace:*",
|
||||
"@projectstorm/react-diagrams-core": "workspace:*",
|
||||
"@projectstorm/react-diagrams-defaults": "workspace:*",
|
||||
"gsap": "^3.12.2",
|
||||
"json-beautify": "^1.1.1",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.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",
|
||||
"@storybook/storybook-deployer": "^2.8.16",
|
||||
"@storybook/theming": "^7.4.4",
|
||||
"@types/lodash": "^4.14.199",
|
||||
"@types/react": "^18.2.22",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"storybook": "^7.4.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,26 @@
|
||||
# @projectstorm/react-diagrams-demo
|
||||
|
||||
## 7.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
- @projectstorm/react-diagrams@7.0.3
|
||||
|
||||
## 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/react-diagrams-demo",
|
||||
"version": "7.0.0",
|
||||
"version": "7.0.3",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
@@ -31,16 +31,16 @@
|
||||
},
|
||||
"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",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"babel-loader": "^9.1.2",
|
||||
"css-loader": "^6.7.3",
|
||||
"style-loader": "^3.3.1",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.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-loader": "^9.1.3",
|
||||
"css-loader": "^6.8.1",
|
||||
"style-loader": "^3.3.3",
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1"
|
||||
}
|
||||
}
|
||||
|
||||
28
package.json
28
package.json
@@ -28,21 +28,21 @@
|
||||
"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.0",
|
||||
"@types/jest": "^29.2.6",
|
||||
"@types/node": "^18.11.18",
|
||||
"jest": "^29.4.0",
|
||||
"jest-cli": "^29.4.0",
|
||||
"prettier": "^2.8.3",
|
||||
"rimraf": "^4.1.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",
|
||||
"source-map-loader": "^4.0.1",
|
||||
"terser-webpack-plugin": "^5.3.6",
|
||||
"ts-jest": "^29.0.5",
|
||||
"ts-loader": "^9.4.2",
|
||||
"typescript": "^4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1",
|
||||
"terser-webpack-plugin": "^5.3.9",
|
||||
"ts-jest": "^29.1.1",
|
||||
"ts-loader": "^9.4.4",
|
||||
"typescript": "^5.2.2",
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1",
|
||||
"webpack-node-externals": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# @projectstorm/geometry
|
||||
|
||||
## 7.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
|
||||
## 7.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- b8a4cbd: Inline sources in sourcemap
|
||||
|
||||
## 7.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/geometry",
|
||||
"version": "7.0.0",
|
||||
"version": "7.0.2",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -32,6 +32,6 @@
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.191"
|
||||
"@types/lodash": "^4.14.199"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# @projectstorm/react-canvas-core
|
||||
|
||||
## 7.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
- Updated dependencies [66c687a]
|
||||
- @projectstorm/geometry@7.0.2
|
||||
|
||||
## 7.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- b8a4cbd: Inline sources in sourcemap
|
||||
- Updated dependencies [b8a4cbd]
|
||||
- @projectstorm/geometry@7.0.1
|
||||
|
||||
## 7.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/react-canvas-core",
|
||||
"version": "7.0.0",
|
||||
"version": "7.0.2",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -29,14 +29,14 @@
|
||||
"module": "./dist/index.js",
|
||||
"typings": "./dist/@types/index",
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@projectstorm/geometry": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/lodash": "^4.14.191"
|
||||
"@types/react": "^18.2.22",
|
||||
"@types/lodash": "^4.14.199"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,23 @@
|
||||
# Changelog
|
||||
|
||||
## 7.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
- Updated dependencies [66c687a]
|
||||
- @projectstorm/react-canvas-core@7.0.2
|
||||
- @projectstorm/geometry@7.0.2
|
||||
|
||||
## 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/react-diagrams-core",
|
||||
"version": "7.0.0",
|
||||
"version": "7.0.2",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -31,7 +31,7 @@
|
||||
"module": "./dist/index.js",
|
||||
"typings": "./dist/@types/index",
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@projectstorm/geometry": "workspace:*",
|
||||
"@projectstorm/react-canvas-core": "workspace:*",
|
||||
"lodash": "^4.17.21",
|
||||
@@ -39,7 +39,7 @@
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/lodash": "^4.14.191"
|
||||
"@types/react": "^18.2.22",
|
||||
"@types/lodash": "^4.14.199"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,35 @@
|
||||
# @projectstorm/react-diagrams-defaults
|
||||
|
||||
## 7.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
- Updated dependencies [66c687a]
|
||||
- @projectstorm/react-diagrams-core@7.0.2
|
||||
- @projectstorm/react-canvas-core@7.0.2
|
||||
- @projectstorm/geometry@7.0.2
|
||||
|
||||
## 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/react-diagrams-defaults",
|
||||
"version": "7.0.0",
|
||||
"version": "7.1.2",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -29,7 +29,7 @@
|
||||
"module": "./dist/index.js",
|
||||
"typings": "./dist/@types/index",
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.*",
|
||||
"@projectstorm/geometry": "workspace:*",
|
||||
"@projectstorm/react-canvas-core": "workspace:*",
|
||||
@@ -38,7 +38,7 @@
|
||||
"react": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/react": "^18.0.27"
|
||||
"@types/lodash": "^4.14.199",
|
||||
"@types/react": "^18.2.22"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -1,5 +1,42 @@
|
||||
# @projectstorm/react-diagrams-routing
|
||||
|
||||
## 7.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 66c687a: Upgrade all dependencies and fix Storybook after upgrade
|
||||
- Updated dependencies [66c687a]
|
||||
- @projectstorm/react-diagrams-defaults@7.1.2
|
||||
- @projectstorm/react-diagrams-core@7.0.2
|
||||
- @projectstorm/react-canvas-core@7.0.2
|
||||
- @projectstorm/geometry@7.0.2
|
||||
|
||||
## 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/react-diagrams-routing",
|
||||
"version": "7.0.0",
|
||||
"version": "7.1.2",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -41,8 +41,8 @@
|
||||
"react": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/dagre": "^0.7.48",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/react": "^18.0.27"
|
||||
"@types/dagre": "^0.7.50",
|
||||
"@types/lodash": "^4.14.199",
|
||||
"@types/react": "^18.2.22"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,34 @@
|
||||
# @projectstorm/react-diagrams
|
||||
|
||||
## 7.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [66c687a]
|
||||
- @projectstorm/react-diagrams-defaults@7.1.2
|
||||
- @projectstorm/react-diagrams-routing@7.1.2
|
||||
- @projectstorm/react-diagrams-core@7.0.2
|
||||
- @projectstorm/react-canvas-core@7.0.2
|
||||
|
||||
## 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@projectstorm/react-diagrams",
|
||||
"version": "7.0.0",
|
||||
"version": "7.0.3",
|
||||
"author": "dylanvorster",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
|
||||
12712
pnpm-lock.yaml
generated
12712
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"suppressExcessPropertyErrors": true,
|
||||
"declaration": true,
|
||||
"composite": true,
|
||||
"incremental": true,
|
||||
"strictNullChecks": false,
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"skipLibCheck": true,
|
||||
"jsx": "react",
|
||||
"target": "ES6",
|
||||
|
||||
Reference in New Issue
Block a user