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

Version Packages

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "restricted",
+	"baseBranch": "master",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.editorconfig

@@ -1,9 +1,9 @@
 [*]
 indent_style = tab
-indent_size = 4
+indent_size = 2
 trim_trailing_whitespace = true
 
 # Some exceptions
-[{package.json}]
+[{package.json,*.yml}]
 indent_style = space
 indent_size = 2

.envrc

@@ -0,0 +1 @@
+PATH_add ./node_modules/.bin

.gitbook.yaml

@@ -0,0 +1,4 @@
+root: ./docs/
+
+structure:
+  summary: README.md

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+# Checklist
+
+- [ ] The tests pass
+- [ ] I have referenced the issue(s) or other PR(s) this fixes/relates-to
+- [ ] I have run ```pnpm changeset``` and followed the instructions
+- [ ] I have explained in this PR, what I did and why
+- [ ] I replaced the image below
+- [ ] Had a beer/coffee/tea because I did something cool today
+
+## What, why and how?
+
+
+## Feel good image:
+
+
+![LOL](https://i.pinimg.com/originals/7f/1b/c3/7f1bc3fb2e123dd3255a85c04db22f19.jpg)

.github/workflows/prettier.yml

@@ -0,0 +1,23 @@
+name: Prettier check
+
+# This action works with pull requests and pushes
+on:
+  pull_request:
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          # Make sure the actual branch is checked out when running on pull requests
+          ref: ${{ github.head_ref }}
+
+
+      - uses: actions/checkout@v2 # Check out the repository first.
+      - uses: actionsx/prettier@v2
+        with:
+          # prettier CLI arguments.
+          args: --check --ignore-path .prettierignore --config .prettierrc '**/*.{ts,tsx,js,jsx}'

.github/workflows/release.yml

@@ -0,0 +1,47 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Read .nvmrc
+        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        id: nvm
+
+      - name: Use Node.js (.nvmrc)
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        id: changesets
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: publish storybook
+        if: steps.changesets.outputs.published == 'true'
+        run: pnpm release:storybook

.github/workflows/test.yml

@@ -0,0 +1,30 @@
+name: Build and Test
+on:
+  pull_request:
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Read .nvmrc
+        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        id: nvm
+
+      - name: Use Node.js (.nvmrc)
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build

.gitignore

@@ -1,190 +1,9 @@
-dist/
-dist/main.js
-dist/main.js.map
-.out
-
-# Created by https://www.gitignore.io/api/net,netbeans,sublimetext,phpstorm,windows,osx,node
-
-#!! ERROR: net is undefined. Use list command to see defined gitignore types !!#
-
-### NetBeans ###
-nbproject/private/
-build/
-nbbuild/
-nbdist/
-nbactions.xml
-.nb-gradle/
-
-
-### SublimeText ###
-# cache files for sublime text
-*.tmlanguage.cache
-*.tmPreferences.cache
-*.stTheme.cache
-
-# workspace files are user-specific
-*.sublime-workspace
-
-# project files should be checked into the repository, unless a significant
-# proportion of contributors will probably not be using SublimeText
-# *.sublime-project
-
-# sftp configuration file
-sftp-config.json
-
-# Package control specific files
-Package Control.last-run
-Package Control.ca-list
-Package Control.ca-bundle
-Package Control.system-ca-bundle
-Package Control.cache/
-Package Control.ca-certs/
-bh_unicode_properties.cache
-
-# Sublime-github package stores a github token in this file
-# https://packagecontrol.io/packages/sublime-github
-GitHub.sublime-settings
-
-
-### PhpStorm ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff:
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/dictionaries
-.idea/vcs.xml
-.idea/jsLibraryMappings.xml
-
-# Sensitive or high-churn files:
-.idea/dataSources.ids
-.idea/dataSources.xml
-.idea/dataSources.local.xml
-.idea/sqlDataSources.xml
-.idea/dynamic.xml
-.idea/uiDesigner.xml
-
-# Gradle:
-.idea/gradle.xml
-.idea/libraries
-
-# Mongo Explorer plugin:
-.idea/mongoSettings.xml
-
-## File-based project format:
-*.iws
-
-## Plugin-specific files:
-
-# IntelliJ
-/out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-### PhpStorm Patch ###
-# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
-
-# *.iml
-# modules.xml
-
-
-### Windows ###
-# Windows image file caches
-Thumbs.db
-ehthumbs.db
-
-# Folder config file
-Desktop.ini
-
-# Recycle Bin used on file shares
-$RECYCLE.BIN/
-
-# Windows Installer files
-*.cab
-*.msi
-*.msm
-*.msp
-
-# Windows shortcuts
-*.lnk
-
-
-### OSX ###
-*.DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-.com.apple.timemachine.donotpresent
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
-
-
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+dist
+.DS_Store
 .idea
+.out
+*.zip
+.env
+node_modules
+tsconfig.tsbuildinfo
+.vscode

.npmignore

@@ -1,194 +0,0 @@
-demos/demo1/bundle.js
-demos/demo1/bundle.js.map
-demos/demo2/bundle.js
-demos/demo2/bundle.js.map
-demos/demo3/bundle.js
-demos/demo3/bundle.js.map
-demos/demo4/bundle.js
-demos/demo4/bundle.js.map
-
-# Created by https://www.gitignore.io/api/net,netbeans,sublimetext,phpstorm,windows,osx,node
-
-#!! ERROR: net is undefined. Use list command to see defined gitignore types !!#
-
-### NetBeans ###
-nbproject/private/
-build/
-nbbuild/
-nbdist/
-nbactions.xml
-.nb-gradle/
-
-
-### SublimeText ###
-# cache files for sublime text
-*.tmlanguage.cache
-*.tmPreferences.cache
-*.stTheme.cache
-
-# workspace files are user-specific
-*.sublime-workspace
-
-# project files should be checked into the repository, unless a significant
-# proportion of contributors will probably not be using SublimeText
-# *.sublime-project
-
-# sftp configuration file
-sftp-config.json
-
-# Package control specific files
-Package Control.last-run
-Package Control.ca-list
-Package Control.ca-bundle
-Package Control.system-ca-bundle
-Package Control.cache/
-Package Control.ca-certs/
-bh_unicode_properties.cache
-
-# Sublime-github package stores a github token in this file
-# https://packagecontrol.io/packages/sublime-github
-GitHub.sublime-settings
-
-
-### PhpStorm ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff:
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/dictionaries
-.idea/vcs.xml
-.idea/jsLibraryMappings.xml
-
-# Sensitive or high-churn files:
-.idea/dataSources.ids
-.idea/dataSources.xml
-.idea/dataSources.local.xml
-.idea/sqlDataSources.xml
-.idea/dynamic.xml
-.idea/uiDesigner.xml
-
-# Gradle:
-.idea/gradle.xml
-.idea/libraries
-
-# Mongo Explorer plugin:
-.idea/mongoSettings.xml
-
-## File-based project format:
-*.iws
-
-## Plugin-specific files:
-
-# IntelliJ
-/out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-### PhpStorm Patch ###
-# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
-
-# *.iml
-# modules.xml
-
-
-### Windows ###
-# Windows image file caches
-Thumbs.db
-ehthumbs.db
-
-# Folder config file
-Desktop.ini
-
-# Recycle Bin used on file shares
-$RECYCLE.BIN/
-
-# Windows Installer files
-*.cab
-*.msi
-*.msm
-*.msp
-
-# Windows shortcuts
-*.lnk
-
-
-### OSX ###
-*.DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-.com.apple.timemachine.donotpresent
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
-
-
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-.idea

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.out

.prettierrc

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

.storybook/config.js

@@ -1,8 +0,0 @@
-import { configure } from '@storybook/react';
-
-function loadStories() {
-	require('../demos/index.tsx');
-	// You can require as many demos as you need.
-}
-
-configure(loadStories, module);

.storybook/webpack.config.js

@@ -1,24 +0,0 @@
-const path = require('path');
-module.exports = {
-	module: {
-		rules: [
-			{
-				test: /\.scss$/,
-				loaders: ["style-loader", "css-loader", "sass-loader"],
-				include: path.resolve(__dirname, '../')
-			},
-			{
-				enforce: 'pre',
-				test: /\.js$/,
-				loader: "source-map-loader"
-			},
-			{
-				test: /\.tsx?$/,
-				loader: 'awesome-typescript-loader',
-			}
-		]
-	},
-	resolve: {
-		extensions: [".tsx", ".ts", ".js"]
-	}
-};

CHANGELOG.md

@@ -0,0 +1,224 @@
+__V7!__
+
+we are now using changesets! you can see the changes for individual packages in their corresponding folders.
+Here is the main changeset for the core package which depends on everything:
+
+[Changelog for @projectstorm/react-diagrams](./packages/react-diagrams/CHANGELOG.md)
+
+---
+
+__6.7.4__
+
+.0 -> .4 because I messed up the version / publishing
+
+* (upgrade all dependencies, including a move to React 18)
+  * https://github.com/projectstorm/react-diagrams/pull/947
+
+__6.7.0__
+
+bug fixes:
+* https://github.com/projectstorm/react-diagrams/pull/882
+* https://github.com/projectstorm/react-diagrams/pull/914
+* https://github.com/projectstorm/react-diagrams/pull/875
+
+types
+* https://github.com/projectstorm/react-diagrams/pull/906
+
+features:
+* https://github.com/projectstorm/react-diagrams/pull/915
+* https://github.com/projectstorm/react-diagrams/pull/877
+
+__6.6.1__
+
+bug fixes:
+* https://github.com/projectstorm/react-diagrams/pull/861
+* https://github.com/projectstorm/react-diagrams/pull/871
+* https://github.com/projectstorm/react-diagrams/pull/870
+
+Some maintenance:
+* https://github.com/projectstorm/react-diagrams/pull/861
+
+__6.6.0__
+
+* (docs-broken) https://github.com/projectstorm/react-diagrams/pull/834
+* (bug) https://github.com/projectstorm/react-diagrams/pull/838
+* (docs-broken) https://github.com/projectstorm/react-diagrams/pull/847
+* (bug) https://github.com/projectstorm/react-diagrams/pull/852
+* (docs-broken) https://github.com/projectstorm/react-diagrams/pull/856
+* (improvement) https://github.com/projectstorm/react-diagrams/pull/857
+* (bug) https://github.com/projectstorm/react-diagrams/pull/860
+
+Also includes a bump on all packages using `ncu` recursively.
+
+__6.5.2__
+
+https://github.com/projectstorm/react-diagrams/pull/830
+
+* (fix) issue with zoom to fit selected
+* (improvement) properly export PathFinding
+* (maintenance) bump all dependencies
+
+__6.5.1__
+
+https://github.com/projectstorm/react-diagrams/pull/829
+
+* (improved) zoom to fit now centers correctly
+* (fix) remove wrong peer dependency (@emotion/core)
+
+__6.5.0__
+
+https://github.com/projectstorm/react-diagrams/pull/814
+
+* Some rendering fixes
+* small api change around `zoomToFit`
+* more api options with the `DefaultLink`
+
+__6.4.0__
+
+https://github.com/projectstorm/react-diagrams/pull/813
+
+* Bump all packages and move to Emotion 11 and React 17
+* Move to the latest Storybook
+
+__6.2.0__
+
+* (improvement) Move away fromn math-js (https://github.com/projectstorm/react-diagrams/pull/651)
+* (fix) https://github.com/projectstorm/react-diagrams/pull/639
+* (fix) Fixing link spawning at (0,0) when clicking port once (inspired by https://github.com/projectstorm/react-diagrams/pull/637)
+
+__6.1.1__
+
+* (feature) https://github.com/projectstorm/react-diagrams/pull/576 [Add zoom to fit nodes feature, fixes #568]
+* (improvement) https://github.com/projectstorm/react-diagrams/pull/621 [Support deriving from DefaultLabelModel]
+* (fix) https://github.com/projectstorm/react-diagrams/pull/603
+   [Fixes selectionChanged listener not being deregistered on NodeWidget, Fixes unchecked access to this.props.link.getSourcePort() on LinkWidget]
+* (maintenance) bump everything
+* fix serialize/deserialize issue with example project raw JS node
+
+__6.0.0__
+
+Note: This is a complete rewrite of the library, a good place to start to see how the new system works
+is with the new demo project which illustrates the new capability.
+
+I would also recommend taking a look at the new updated DiamondPort widget which shows more capability.
+
+* Break up library into monorepo
+* Introduce react-canvas-core as a new framework
+* Use geometry classes instead of raw X and Y primitives so we can do matrix stuff in the future
+* move testing framework to a name based system instead of ID's
+* Introduce multiple layers (can now have multiple node and link layers)
+* Rewrote the deserialization system to be promise based
+* Completely overhauled the observer framework on the models
+* Moved all the logic in the DiagramWidget into a a new hierarchical state machine
+* Introduces new states for editing
+* Introduced faster layout rendering when transforming the canvas directly
+* Moved all canvas smart routing into its own link-type under routing package
+* Broke up link rendering into a much more modular system that is much easier to extend
+* Introduced port alignment allowing the developer to specify how enter it
+* Improved generics throughout the entire model system with Mapped Types
+* Rewrote all the styles using emotion instead of sass
+* Fixed up all the demos to use the new API
+* Introduced a demo project that illustrates how to use the library with ES6 as well as with Typescript
+* Improved the grid rendering system to allow graphical elements to specify how they get transformed
+* Introduced a performance widget for improving performance in a more deterministic way by comparing the serialization of the model (with a way of opting out)
+* Renamed a bunch of methods to be more consistent and more understandable
+* Completely removed the double render state system that required nodes to render before links, this is done when ports report their new positions
+* Ports can now dynamically be added and removed without having to tell the system it happeend
+* Port widgets are now containers dumb containers for you own ports
+* Port widgets report new sizing information to their target links when they change position, you no longer need to invalidate them
+
+__5.3.2__
+
+* (maintenance) Upgrade :allthethings: (all the build tooling was upgrade)
+* (api) move to ES6 (JS now contains native classes)
+* (api) changed package name to @projectstorm/react-diagrams
+* (bug) (PR259)(https://github.com/projectstorm/react-diagrams/pull/259) Fixes #258
+* (refactor) (PR 306)(https://github.com/projectstorm/react-diagrams/pull/306) `:any` fix
+* (feature) (PR 178)(https://github.com/projectstorm/react-diagrams/pull/178) Trigger a positionChanged event when moving a Node that has the listener assigned.
+* (fix) (PR 356)(https://github.com/projectstorm/react-diagrams/pull/356) Fixed Type issue with 'PointModel()'
+* (demo) dark mode and upgrade storybook
+
+__5.2.1__
+
+* (fix) Always remove link from old source/target port on port change
+* (maintenance) upgrade node modules
+* (refactor) https://github.com/projectstorm/react-diagrams/commit/55f62587bd3b12513c7d37eff59edfc8bdb8d6c9
+* (bug) https://github.com/projectstorm/react-diagrams/commit/75ef02dd4d131a0e7c08b2680c69efc390e50b84
+-> and other improvements, also checkout the foundation work happening over at https://github.com/projectstorm/react-canvas
+
+__5.1.0__
+
+* (api) Rename XXXFactory into AbstractXXXFactory
+* (refactor) tslint and prettier are now the same
+* (refactor) Each class now explicitely has its own class file (consistency)
+* (feature) Smooth vertical links (no longer limited to horizontal)
+* (feature) Dedicated documentation via gitbook
+* (bug) forgot to export some
+* (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/](https://dylanvorster.com/storm-react-diagrams-v5-0/)
+
+PR: https://github.com/projectstorm/react-diagrams/pull/145
+
+* (refactor) Links completely overhauled
+* (feature) Smart Routing
+* (feature) Flow support
+* (demo) Smart Routing
+* (demo) Animated links
+* (api) Bootstrapping Improvements
+* (feature) add custom properties to all widgets
+* (refactor) use BEM for all css
+* (feature) Default Link factory hooks
+* (tests) e2e tests + helper framework
+* (tests) automatically load JEST Snapshots
+* (feature) Link labels!
+
+__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
+* (refactor) Demos are now much more verbose and better managed
+* (update) node packages
+* (bug) Fix #129
+* (feature) Control link creation through ports
+* (refactor) Models are now in seperate files
+* (refactor) Merged the concept of instance factories and widget factories into one
+* (feature) Models can now be cloned at various parts of the model graph
+* (demo) Cloning
+* (feature) models control isLocked
+
+__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
+* (demo) zoom to fit
+* (demo) selection events
+* (demo) limit number of points
+* (demo) programmatic node updating
+* updated dependencies
+* (bugs) swapping diagram models in engines
+* (bugs) issues with the rendering pipeline #107
+* added ci badge to Readme
+
+__3.1.3__
+* Refactor links slightly
+* use min extension for css
+* bump package versions
+* export more classes
+
+__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/](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/](https://dylanvorster.com/storm-react-diagrams-3-0/)
+* Massive performance updates
+* Complete rewrite
+* Started a changelog and design documents for each revision

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+# Contributing
+
+See below for guidelines on house keeping:
+
+### Always add a PR
+
+Since the project runs on GitHub, the best way to contribute is to fork and then submit a PR.
+You will find a template that you will need to fill out
+
+### Adding new demos
+
+Add a new folder in the ./demos directory and make sure that it is named correctly like the other demos. 
+A new demo should conform to the standard of either `demo-simple` in which it contains a markdown file that
+clearly explains 'whats going on', or the code sample should have very clear comments that almost always should ready
+like an instruction manual such as the simple demo.
+
+Finally, you should link up your demo to the __index.tsx__ file in the __demos__ directory. It should be quite
+self explanatory on how it works, but ultimately I have a helper method that makes it easy to link source code
+to the demo itself, hence the 'require' statements. The third parameter is if you want to place your demo
+inside a markdown guide (again: see simple demo for how that is done).
+
+### Make the demo testable
+
+Similar procedure, except link your demo in the __index.tsx__ file sitting in the __tests__ directory.
+Running `yarn run test` will fire up jest (hopefully) and then it will render your demo to a snapshot directory
+which when run again (for a second time), should compare the output to the newely generated snapshot. Make sure
+to commit the updated snapshot file with your PR!

README.md

@@ -1,96 +1,96 @@
-# STORM React Diagrams
+# Introduction
 
-__DEMO__: http://www.projectstorm.io/react-diagrams
+[![Join the chat at https://gitter.im/projectstorm/react-diagrams](https://badges.gitter.im/projectstorm/react-diagrams.svg)](https://gitter.im/projectstorm/react-diagrams?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![NPM](https://img.shields.io/npm/v/@projectstorm/react-diagrams.svg)](https://npmjs.org/package/@projectstorm/react-diagrams) [![Package Quality](https://npm.packagequality.com/shield/storm-react-diagrams.svg)](https://packagequality.com/#?package=storm-react-diagrams)
 
-A super simple, no-nonsense diagramming library written in React that just works.
+![](.gitbook/assets/logo.jpg)
 
-[![Join the chat at https://gitter.im/projectstorm/react-diagrams](https://badges.gitter.im/projectstorm/react-diagrams.svg)](https://gitter.im/projectstorm/react-diagrams?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![NPM](https://img.shields.io/npm/v/storm-react-diagrams.svg)](https://npmjs.org/package/storm-react-diagrams)
-[![NPM](https://img.shields.io/npm/dt/storm-react-diagrams.svg)](https://npmjs.org/package/storm-react-diagrams)
+**DEMO**: [http://projectstorm.cloud/react-diagrams](http://projectstorm.cloud/react-diagrams)
 
-![Demo2](./images/example1.png)
+**DOCS \(wip\)** [https://projectstorm.gitbook.io/react-diagrams](https://projectstorm.gitbook.io/react-diagrams)
 
-![Demo2](./images/example2.png)
+Docs are currently being worked on, along with a migration path.
 
-![Demo2](./images/example3.png)
+## What
 
-## Introduction
+A flow & process orientated diagramming library inspired by **Blender**, **Labview** and **Unreal engine**.
 
-A no-nonsense diagramming library written entirely in React with the help of Lodash, and a single polyfill. It aims to be:
+* **Modern Codebase** written entirely in Typescript and React, the library makes use of powerful generics, advanced software engineering principles and is broken up into multiple modules.
+* **Hackable and extensible** the entire library including its core can be extended, rewired and re-assembled into fundamentally different software to suit your own software needs.
+* **HTML nodes as a first class citizen** the library was originally written to represent advanced dynamic nodes, that are difficult to represent as SVG's due to complex input requirements ux requirements.
+* **Designed for process** the library is aimed for software engineers that want to rewire their programs at runtime, and that want to make their software more dynamic.
+* **Fast diagram editing** the defaults provided give the highest priority to editing diagrams as fast as possible.
 
-* Simple, and void of any fuss/complications when implementing it into your own application
-* Customizable without having to hack the core (adapters/factories etc..)
-* Simple to operate and understand without sugar and magic
-* Fast and optimized to handle large diagrams with hundreds of nodes/links
-* Super easy to use, and should work as you expect it to
+## Gallery
 
-## Roadmap
+Example implementation using custom models: \(Dylan's personal code\)
 
-* Move path logic associated with links into a base link class so we can easily extend links
-* Add more fault tolerance
+![Personal Project](.gitbook/assets/example1.jpg)
+![](.gitbook/assets/example2.jpg)
 
-## How to install
+Get started with the default models right out of the box:
 
-```
-npm install storm-react-diagrams
-```
-or
-```
-yarn add storm-react-diagrams
+![](.gitbook/assets/example3.jpg)
+
+## Installing
+
+For all the bells and whistles:
+
+```text
+yarn add @projectstorm/react-diagrams
 ```
 
-## How to build
+This includes all the packages listed below \(and works \(mostly and conceptually\) like it used to in version 5.0\)
 
-Simply run ```webpack``` in the root directory (or ```export NODE_ENV=production && webpack``` if you want a production build) and it will spit out the transpiled code and typescript definitions into the dist directory as a single file. __It will also compile the code for the demos__ .We use webpack for this because TSC cannot compile a single UMD file (TSC can currently only output multiple UMD files).
+### A more modular approach
 
-_NOTE:_ We turn off name mangeling in production builds because we require class names to be left intact when serializing.
+This library now has a more modular design and you can import just the core \(contains no default factories or routing\)
 
-## Make your own nodes
+```text
+yarn add @projectstorm/react-diagrams-core
+```
 
-To see how to create your own nodes like the one below, take a look at __demo3__:
+this is built ontop of the evolving **react-canvas-core** library
 
-![Demo2](./images/demo3.png)
+```text
+yarn add @projectstorm/react-canvas-core
+```
 
-## How does it work
+which makes use of
 
-The library uses a Model Graph to represent the virtual diagram and then renders the diagram using
-2 layers:
-* Node Layer -> which is responsible for rendering nodes as HTML components
-* Link Layer -> which renders the links as SVG paths
+```text
+yarn add @projectstorm/geometry
+```
 
-Each node and link is fed into a factory that then generates the corresponding node or link react widget.
-Therefore, to create custom nodes and links, register your own factories that return your own widgets.
+and of course, you can add some extras:
 
-As long as a node contains at least one port and the corresponding NodeWidget contains at least one PortWidget,
-a link can be connected to it.
+```text
+yarn add @projectstorm/react-diagrams-defaults
+yarn add @projectstorm/react-diagrams-routing
+```
 
-## Events
+## How to use
 
-[Event System](docs/Events.md)
+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.
 
-## Questions
 
-[Questions](docs/Questions.md)
+Take a look at the [diagram demos](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-gallery/demos)
 
-##  Usage
+**or**
 
-__Delete__ removes any selected items
-![__Delete__](./images/rjdDelete.gif)
+Take a look at the [demo project](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project) which contains an example for ES6 as well as Typescript
 
-__Shift + Mouse Drag__ triggers a multi-selection box
-![Shift + Mouse Drag](./images/mouseDrag.gif)
+**or**
 
-__Shift + Mouse Click__ selects the item (items can be multi-selected)
-![Shift + Mouse Click](./images/shiftClick.gif)
+[Checkout the docs](https://projectstorm.gitbook.io/react-diagrams/)
 
-__Mouse Drag__ drags the entire diagram
-![Mouse Drag](./images/canvasDrag.gif)
+## Run the demos
 
-__Mouse Wheel__ zooms the diagram in / out
-![Mouse Wheel](./images/mouseWheel.gif)
+After running `pnpm install` and `pnpm build`, you must then run: `cd diagrams-demo-gallery && pnpm run start`
 
-__Click Link + Drag__ creates a new link point
-![Click Link + Drag](./images/createPoint.gif)
+## Building from source
 
-__Click Node Port + Drag__ creates a new link
-![Click Node Port + Drag](./images/createLink.gif)
+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
+
+> Do you have an interesting project built with *react-diagrams*? PR it into this section for others to see.

demos/demo1/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function render(): JSX.Element;

demos/demo1/index.tsx

@@ -1,51 +0,0 @@
-import {
-	DiagramEngine,
-	DefaultNodeFactory,
-	DefaultLinkFactory,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "../../src/main";
-import * as React from "react";
-
-export default () => {
-
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.registerNodeFactory(new DefaultNodeFactory());
-	engine.registerLinkFactory(new DefaultLinkFactory());
-
-	//2) setup the diagram model
-	var model = new DiagramModel();
-
-	//3-A) create a default node
-	var node1 = new DefaultNodeModel("Node 1","rgb(0,192,255)");
-	var port1 = node1.addPort(new DefaultPortModel(false,"out-1","Out"));
-	node1.x = 100;
-	node1.y = 100;
-
-	//3-B) create another default node
-	var node2 = new DefaultNodeModel("Node 2","rgb(192,255,0)");
-	var port2 = node2.addPort(new DefaultPortModel(true,"in-1","IN"));
-	node2.x = 400;
-	node2.y = 100;
-
-	//3-C) link the 2 nodes together
-	var link1 = new LinkModel();
-	link1.setSourcePort(port1);
-	link1.setTargetPort(port2);
-
-	//4) add the models to the root graph
-	model.addNode(node1);
-	model.addNode(node2);
-	model.addLink(link1);
-
-	//5) load model into engine
-	engine.setDiagramModel(model);
-
-	//6) render the diagram!
-	return <DiagramWidget diagramEngine={engine} />;
-
-};

demos/demo2/index.tsx

@@ -1,66 +0,0 @@
-import {
-	DiagramEngine,
-	DefaultNodeFactory,
-	DefaultLinkFactory,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "../../src/main";
-import * as React from "react";
-
-/**
- *
- * Simple stress test of the system, shows that it can handle many nodes, and
- * retain good performance
- *
- * @Author Dylan Vorster
- */
-export default () => {
-
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.registerNodeFactory(new DefaultNodeFactory());
-	engine.registerLinkFactory(new DefaultLinkFactory());
-
-	function generateNodes(model: DiagramModel, offsetX: number,offsetY: number){
-		//3-A) create a default node
-		var node1 = new DefaultNodeModel("Node 1","rgb(0,192,255)");
-		var port1 = node1.addPort(new DefaultPortModel(false,"out-1","Out"));
-		node1.x = 100 + offsetX;
-		node1.y = 100 + offsetY;
-
-		//3-B) create another default node
-		var node2 = new DefaultNodeModel("Node 2","rgb(192,255,0)");
-		var port2 = node2.addPort(new DefaultPortModel(true,"in-1","IN"));
-		node2.x = 200 + offsetX;
-		node2.y = 100 + offsetY;
-
-		//3-C) link the 2 nodes together
-		var link1 = new LinkModel();
-		link1.setSourcePort(port1);
-		link1.setTargetPort(port2);
-
-		//4) add the models to the root graph
-		model.addNode(node1);
-		model.addNode(node2);
-		model.addLink(link1);
-	}
-
-	//2) setup the diagram model
-	var model = new DiagramModel();
-
-	for(var i =0;i < 8;i++){
-		for(var j = 0;j < 8;j++){
-			generateNodes(model,i*200,j*100);
-		}
-	}
-
-	//5) load model into engine
-	engine.setDiagramModel(model);
-
-	//6) render the diagram!
-	return <DiagramWidget diagramEngine={engine} />;
-
-}

demos/demo3/DiamondInstanceFactories.ts

@@ -1,25 +0,0 @@
-import * as SRD from "../../src/main";
-import {DiamondNodeModel} from "./DiamondNodeModel";
-import {DiamondPortModel} from "./DiamondPortModel";
-
-export class DiamondNodeFactory extends SRD.AbstractInstanceFactory<DiamondNodeModel>{
-	
-	constructor(){
-		super("DiamondNodeModel");
-	}
-	
-	getInstance(){
-		return new DiamondNodeModel();
-	}
-}
-
-export class DiamondPortFactory extends SRD.AbstractInstanceFactory<DiamondPortModel>{
-	
-	constructor(){
-		super("DiamondPortModel");
-	}
-	
-	getInstance(){
-		return new DiamondPortModel();
-	}
-}

demos/demo3/DiamondNodeModel.ts

@@ -1,14 +0,0 @@
-import * as SRD from "../../src/main";
-import {DiamondPortModel} from "./DiamondPortModel";
-
-export class DiamondNodeModel extends SRD.NodeModel{
-	
-	constructor(){
-		super('diamond');
-		this.addPort(new DiamondPortModel('top'));
-		this.addPort(new DiamondPortModel('left'));
-		this.addPort(new DiamondPortModel('bottom'));
-		this.addPort(new DiamondPortModel('right'));
-	}
-	
-}

demos/demo3/DiamondNodeWidget.tsx

@@ -1,56 +0,0 @@
-import * as React from "react";
-import {DiamondNodeModel} from "./DiamondNodeModel";
-import {PortWidget} from "../../src/main";
-
-export interface DiamonNodeWidgetProps {
-	node: DiamondNodeModel,
-	size?: number
-}
-
-export interface DiamonNodeWidgetState {
-}
-
-/**
- * @author Dylan Vorster
- */
-export class DiamonNodeWidget extends React.Component<DiamonNodeWidgetProps, DiamonNodeWidgetState> {
-
-	public static defaultProps: DiamonNodeWidgetProps = {
-		size: 150,
-		node: null
-	};
-
-	constructor(props: DiamonNodeWidgetProps) {
-		super(props);
-		this.state = {
-		}
-	}
-
-	render() {
-		return (
-			<div className={"diamond-node"} style={{position: 'relative', width: this.props.size, height: this.props.size}}>
-				<svg width={this.props.size} height={this.props.size} dangerouslySetInnerHTML={{__html:`
-					<g id="Layer_1">
-					</g>
-					<g id="Layer_2">
-						<polygon fill="purple" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="10,`+(this.props.size/2)+` `+(this.props.size/2)+`,10 `+(this.props.size-10)+`,`+(this.props.size/2)+` `+(this.props.size/2)+`,`+(this.props.size-10)+` "/>
-					</g>
-				`}} />
-				<div style={{position:'absolute', zIndex:10, top:this.props.size/2 - 8, left: -8 }}>
-					<PortWidget name='left' node={this.props.node} />
-				</div>
-				<div style={{position:'absolute', zIndex:10, left:this.props.size/2-8, top:-8 }}>
-					<PortWidget name='top' node={this.props.node} />
-				</div>
-				<div style={{position: 'absolute', zIndex:10,left:this.props.size-8,top:this.props.size/2 - 8 }}>
-					<PortWidget name='right' node={this.props.node} />
-				</div>
-				<div style={{position: 'absolute', zIndex:10,left :this.props.size/2 - 8,top:this.props.size-8}}>
-					<PortWidget name='bottom' node={this.props.node} />
-				</div>
-			</div>
-		)
-	}
-}
-
-export var DiamonNodeWidgetFactory = React.createFactory(DiamonNodeWidget);

demos/demo3/DiamondPortModel.ts

@@ -1,24 +0,0 @@
-import * as SRD from "../../src/main";
-import * as _ from "lodash";
-
-export class DiamondPortModel extends SRD.PortModel{
-	
-	position: string|'top'|'bottom'|'left'|'right';
-	
-	constructor(pos: string = 'top'){
-		super(pos);
-		this.position = pos ;
-	}
-	
-	serialize(){
-		return _.merge(super.serialize(),{
-			position: this.position,
-		});
-	}
-	
-	deSerialize(data:any){
-		super.deSerialize(data);
-		this.position = data.position;
-	}
-	
-}

demos/demo3/DiamondWidgetFactory.ts

@@ -1,13 +0,0 @@
-import * as SRD from "../../src/main";
-import {DiamonNodeWidgetFactory} from "./DiamondNodeWidget";
-
-export class DiamondWidgetFactory extends SRD.NodeWidgetFactory{
-	
-	constructor(){
-		super('diamond');
-	}
-	
-	generateReactWidget(diagramEngine:SRD.DiagramEngine,node: SRD.NodeModel): JSX.Element{
-		return DiamonNodeWidgetFactory({node: node});
-	}
-}

demos/demo3/index.tsx

@@ -1,92 +0,0 @@
-import {
-	DiagramEngine,
-	DefaultNodeFactory,
-	DefaultLinkFactory,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "../../src/main";
-import * as React from "react";
-import {DiamondNodeModel} from "./DiamondNodeModel";
-import {DiamondWidgetFactory} from "./DiamondWidgetFactory";
-
-
-/**
- * @Author Dylan Vorster
- */
-export default () => {
-
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.registerNodeFactory(new DefaultNodeFactory());
-	engine.registerLinkFactory(new DefaultLinkFactory());
-	engine.registerNodeFactory(new DiamondWidgetFactory());
-
-
-	//2) setup the diagram model
-	var model = new DiagramModel();
-
-	//3-A) create a default node
-	var node1 = new DefaultNodeModel("Node 1","rgb(0,192,255)");
-	var port1 = node1.addPort(new DefaultPortModel(false,"out-1","Out"));
-	node1.x = 100;
-	node1.y = 150;
-
-	//3-B) create our new custom node
-	var node2 = new DiamondNodeModel();
-	node2.x = 400;
-	node2.y = 100;
-
-	var node3 = new DefaultNodeModel("Node 3","red");
-	var port3 = node3.addPort(new DefaultPortModel(true,"in-1","In"));
-	node3.x = 800;
-	node3.y = 150;
-
-	//3-C) link the 2 nodes together
-	var link1 = new LinkModel();
-	link1.setSourcePort(port1);
-	link1.setTargetPort(node2.ports['left']);
-
-	var link2 = new LinkModel();
-	link2.setSourcePort(node2.ports['right']);
-	link2.setTargetPort(port3);
-
-	//4) add the models to the root graph
-	model.addNode(node1);
-	model.addNode(node2);
-	model.addNode(node3);
-	model.addLink(link1);
-	model.addLink(link2);
-
-	//5) load model into engine
-	engine.setDiagramModel(model);
-
-	//6) render the diagram!
-
-	return <DiagramWidget diagramEngine={engine} />
-
-
-	// //!------------- SERIALIZING / DESERIALIZING ------------
-    //
-	// //we need this to help the system know what models to create form the JSON
-	// engine.registerInstanceFactory(new SRD.DefaultNodeInstanceFactory());
-	// engine.registerInstanceFactory(new SRD.DefaultPortInstanceFactory());
-	// engine.registerInstanceFactory(new SRD.LinkInstanceFactory());
-	// engine.registerInstanceFactory(new DiamondNodeFactory());
-	// engine.registerInstanceFactory(new DiamondPortFactory());
-    //
-	// //serialize the model
-	// var str = JSON.stringify(model.serializeDiagram());
-	// console.log(str);
-    //
-	// //deserialize the model
-	// var model2 = new SRD.DiagramModel();
-	// model2.deSerializeDiagram(JSON.parse(str),engine);
-	// engine.setDiagramModel(model2);
-	// console.log(model2);
-    //
-	// //re-render the model
-	// ReactDOM.render(React.createElement(SRD.DiagramWidget,{diagramEngine: engine}), document.body);
-}

demos/demo4/index.tsx

@@ -1,59 +0,0 @@
-import * as SRD from "../../src/main";
-import * as React from "react";
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
-
-/**
- *
- * Shows how you can lock down the system so that the entire scene cant be interacted with.
- *
- * @Author Dylan Vorster
- */
-export default () => {
-
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.registerNodeFactory(new SRD.DefaultNodeFactory());
-	engine.registerLinkFactory(new SRD.DefaultLinkFactory());
-
-	var model = new DiagramModel();
-
-	var node1 = new DefaultNodeModel("Node 1","rgb(0,192,255)");
-	var port1 = node1.addPort(new SRD.DefaultPortModel(false,"out-1","Out"));
-	node1.x = 100;
-	node1.y = 100;
-
-	var node2 = new DefaultNodeModel("Node 2","rgb(192,255,0)");
-	var port2 = node2.addPort(new SRD.DefaultPortModel(true,"in-1","IN"));
-	node2.x = 400;
-	node2.y = 100;
-
-	var link1 = new LinkModel();
-	link1.setSourcePort(port1);
-	link1.setTargetPort(port2);
-
-	model.addNode(node1);
-	model.addNode(node2);
-	model.addLink(link1);
-
-	engine.setDiagramModel(model);
-
-	//!========================================= <<<<<<<
-
-	model.setLocked(true);
-	var props = {
-		diagramEngine: engine,
-		allowLooseLinks: false,
-		allowCanvasTranslation: false,
-		allowCanvasZoom: false
-	} as SRD.DiagramProps;
-
-	//!=========================================  <<<<<<<
-
-	return <DiagramWidget {...props} />;
-}

demos/demo5/Application.ts

@@ -1,51 +0,0 @@
-import * as SRD from "../../src/main";
-/**
- * @author Dylan Vorster
- */
-export class Application{
-	
-	protected activeModel: SRD.DiagramModel;
-	protected diagramEngine: SRD.DiagramEngine;
-	
-	constructor(){
-		this.diagramEngine = new SRD.DiagramEngine();
-		
-		this.diagramEngine.registerNodeFactory(new SRD.DefaultNodeFactory());
-		this.diagramEngine.registerLinkFactory(new SRD.DefaultLinkFactory());
-		
-		this.newModel();
-	}
-	
-	public newModel(){
-		this.activeModel = new SRD.DiagramModel();
-		this.diagramEngine.setDiagramModel(this.activeModel);
-		
-		
-		var node1 = new SRD.DefaultNodeModel("Node 1","rgb(0,192,255)");
-		var port1 = node1.addPort(new SRD.DefaultPortModel(false,"out-1","Out"));
-		node1.x = 100;
-		node1.y = 100;
-
-		var node2 = new SRD.DefaultNodeModel("Node 2","rgb(192,255,0)");
-		var port2 = node2.addPort(new SRD.DefaultPortModel(true,"in-1","IN"));
-		node2.x = 400;
-		node2.y = 100;
-
-		var link1 = new SRD.LinkModel();
-		link1.setSourcePort(port1);
-		link1.setTargetPort(port2);
-
-		this.activeModel.addNode(node1);
-		this.activeModel.addNode(node2);
-		this.activeModel.addLink(link1);
-	}
-	
-	public getActiveDiagram(): SRD.DiagramModel{
-		return this.activeModel;
-	}
-	
-	public getDiagramEngine(): SRD.DiagramEngine{
-		return this.diagramEngine;
-	}
-	
-}

demos/demo5/components/BodyWidget.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import * as _ from "lodash";
-import {TrayWidget} from "./TrayWidget";
-import {DiagramWidget} from "../../../src/main";
-import {Application} from "../Application";
-import {TrayItemWidget} from "./TrayItemWidget";
-import {DefaultNodeModel,DefaultPortModel} from "../../../src/main";
-
-export interface BodyWidgetProps {
-	app: Application;
-}
-
-export interface BodyWidgetState {
-}
-
-/**
- * @author Dylan Vorster
- */
-export class BodyWidget extends React.Component<BodyWidgetProps, BodyWidgetState> {
-
-	constructor(props: BodyWidgetProps) {
-		super(props);
-		this.state = {
-		}
-	}
-
-	render() {
-		return (
-			<div className="body">
-				<div className="header">
-					<div className="title">Storm React Diagrams - Demo 5</div>
-				</div>
-				<div className="content">
-					<TrayWidget>
-						<TrayItemWidget model={{type: 'in'}} name="In Node" color="rgb(192,255,0)"/>
-						<TrayItemWidget model={{type: 'out'}} name="Out Node" color="rgb(0,192,255)"/>
-					</TrayWidget>
-					<div
-						className="diagram-layer"
-						onDrop={(event) => {
-
-							var data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
-							var nodesCount = _.keys(this.props.app.getDiagramEngine().getDiagramModel().getNodes()).length;
-
-							var node = null;
-							if(data.type === 'in'){
-								node = new DefaultNodeModel("Node "+(nodesCount+1),"rgb(192,255,0)");
-								node.addPort(new DefaultPortModel(true,"in-1","In"));
-							}else{
-								node = new DefaultNodeModel("Node "+(nodesCount+1),"rgb(0,192,255)");
-								node.addPort(new DefaultPortModel(false,"out-1","Out"));
-							}
-							var points = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
-							node.x = points.x;
-							node.y = points.y;
-							this.props.app.getDiagramEngine().getDiagramModel().addNode(node);
-							this.forceUpdate();
-
-						}}
-						onDragOver={(event) => {
-							event.preventDefault();
-						}}
-					>
-						<DiagramWidget diagramEngine={this.props.app.getDiagramEngine()}/>
-					</div>
-				</div>
-			</div>
-		)
-	}
-}

demos/demo5/components/TrayItemWidget.tsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-
-export interface TrayItemWidgetProps {
-	model: any;
-	color?: string;
-	name: string;
-}
-
-export interface TrayItemWidgetState {
-}
-
-export class TrayItemWidget extends React.Component<TrayItemWidgetProps, TrayItemWidgetState> {
-
-	constructor(props: TrayItemWidgetProps) {
-		super(props);
-		this.state = {}
-	}
-
-	render() {
-		return (
-			<div
-				style={{borderColor: this.props.color}}
-				draggable={true}
-				onDragStart={(event) => {
-					event.dataTransfer.setData("storm-diagram-node", JSON.stringify(this.props.model));
-				}}
-				className="tray-item"
-			>
-				{this.props.name}
-			</div>
-		);
-	}
-}

demos/demo5/components/TrayWidget.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-
-export interface TrayWidgetProps {
-}
-
-export interface TrayWidgetState {
-}
-
-/**
- * @author Dylan Vorster
- */
-export class TrayWidget extends React.Component<TrayWidgetProps, TrayWidgetState> {
-
-	public static defaultProps: TrayWidgetProps = {
-	};
-
-	constructor(props: TrayWidgetProps) {
-		super(props);
-		this.state = {
-		}
-	}
-
-	render() {
-		return (
-			<div className="tray">{this.props.children}</div>
-		)
-	}
-}

demos/demo5/index.tsx

@@ -1,13 +0,0 @@
-import * as React from "react";
-
-import {BodyWidget} from "./components/BodyWidget";
-import {Application} from "./Application";
-
-require("./sass/main.scss");
-
-export default () => {
-
-	var app = new Application();
-
-	return <BodyWidget app={app} />;
-}

demos/demo5/sass/main.scss

@@ -1,80 +0,0 @@
-.body{
-	flex-grow: 1;
-	display: flex;
-	flex-direction: column;
-	.header{
-		display: flex;
-		background: rgb(30,30,30);
-		flex-grow: 0;
-		flex-shrink: 0;
-		color: white;
-		font-family: Helvetica, Arial;
-		padding: 10px;
-		>*{
-			align-self:center;
-		}
-	}
-
-	.content{
-		display: flex;
-		flex-grow: 1;
-
-		.diagram-layer{
-			position: relative;
-			flex-grow: 1;
-		}
-
-		.tray{
-			min-width: 200px;
-			background: rgb(20,20,20);
-			flex-grow: 0;
-			flex-shrink: 0;
-
-			.tray-item{
-				color: white;
-				font-family: Helvetica, Arial;
-				padding: 5px;
-				margin: 0px 10px;
-				border: solid 1px;
-				border-radius: 5px;
-				margin-bottom: 2px;
-				cursor: pointer;
-			}
-		}
-	}
-}
-
-.storm-diagrams-canvas{
-	$color: rgba(white, .05);
-	background: rgba(black,0.2);
-	background-image:
-		linear-gradient(0deg,
-			transparent 24%,
-			$color 25%,
-			$color 26%,
-			transparent 27%,
-			transparent 74%,
-			$color 75%,
-			$color 76%,
-			transparent 77%,
-			transparent),
-		linear-gradient(90deg,
-			transparent 24%,
-			$color 25%,
-			$color 26%,
-			transparent 27%,
-			transparent 74%,
-			$color 75%,
-			$color 76%,
-			transparent 77%,
-			transparent);
-	background-size:50px 50px;
-
-	path{
-		stroke: rgba(white,0.5);
-	}
-
-	.pointui{
-		fill: rgba(white,0.5);
-	}
-}

demos/demo6/index.tsx

@@ -1,70 +0,0 @@
-import {
-	DiagramEngine,
-	DefaultNodeFactory,
-	DefaultLinkFactory,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget,
-	DefaultNodeInstanceFactory,
-	DefaultPortInstanceFactory,
-	LinkInstanceFactory
-} from "../../src/main";
-import * as React from "react";
-
-export default () => {
-
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.registerNodeFactory(new DefaultNodeFactory());
-	engine.registerLinkFactory(new DefaultLinkFactory());
-
-	//2) setup the diagram model
-	var model = new DiagramModel();
-
-	//3-A) create a default node
-	var node1 = new DefaultNodeModel("Node 1","rgb(0,192,255)");
-	var port1 = node1.addPort(new DefaultPortModel(false,"out-1","Out"));
-	node1.x = 100;
-	node1.y = 100;
-
-	//3-B) create another default node
-	var node2 = new DefaultNodeModel("Node 2","rgb(192,255,0)");
-	var port2 = node2.addPort(new DefaultPortModel(true,"in-1","IN"));
-	node2.x = 400;
-	node2.y = 100;
-
-	//3-C) link the 2 nodes together
-	var link1 = new LinkModel();
-	link1.setSourcePort(port1);
-	link1.setTargetPort(port2);
-
-	//4) add the models to the root graph
-	model.addNode(node1);
-	model.addNode(node2);
-	model.addLink(link1);
-
-	//5) load model into engine
-	engine.setDiagramModel(model);
-
-
-	//!------------- SERIALIZING ------------------
-
-	var str = JSON.stringify(model.serializeDiagram());
-
-	//!------------- DESERIALIZING ----------------
-
-	//we need this to help the system know what models to create form the JSON
-	engine.registerInstanceFactory(new DefaultNodeInstanceFactory());
-	engine.registerInstanceFactory(new DefaultPortInstanceFactory());
-	engine.registerInstanceFactory(new LinkInstanceFactory());
-
-	//deserialize the model
-	var model2 = new DiagramModel();
-	model2.deSerializeDiagram(JSON.parse(str),engine);
-	engine.setDiagramModel(model2);
-
-	return <DiagramWidget diagramEngine={engine} />;
-
-};

demos/demo7/index.tsx

@@ -1,55 +0,0 @@
-import {
-	DiagramEngine,
-	DefaultNodeFactory,
-	DefaultLinkFactory,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "../../src/main";
-import * as React from "react";
-
-/**
- * Tests the grid size
- */
-export default () => {
-
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.registerNodeFactory(new DefaultNodeFactory());
-	engine.registerLinkFactory(new DefaultLinkFactory());
-
-	//2) setup the diagram model
-	var model = new DiagramModel();
-	model.setGridSize(50);
-
-	//3-A) create a default node
-	var node1 = new DefaultNodeModel("Node 1","rgb(0,192,255)");
-	var port1 = node1.addPort(new DefaultPortModel(false,"out-1","Out"));
-	node1.x = 100;
-	node1.y = 100;
-
-	//3-B) create another default node
-	var node2 = new DefaultNodeModel("Node 2","rgb(192,255,0)");
-	var port2 = node2.addPort(new DefaultPortModel(true,"in-1","IN"));
-	node2.x = 400;
-	node2.y = 100;
-
-	//3-C) link the 2 nodes together
-	var link1 = new LinkModel();
-	link1.setSourcePort(port1);
-	link1.setTargetPort(port2);
-
-	//4) add the models to the root graph
-	model.addNode(node1);
-	model.addNode(node2);
-	model.addLink(link1);
-
-	//5) load model into engine
-	engine.setDiagramModel(model);
-
-	//6) render the diagram!
-	return <DiagramWidget diagramEngine={engine} />;
-
-};

demos/index.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import demo1 from "./demo1/index";
-import demo2 from "./demo2/index";
-import demo3 from "./demo3/index";
-import demo4 from "./demo4/index";
-import demo5 from "./demo5/index";
-import demo6 from "./demo6/index";
-import demo7 from "./demo7/index";
-
-require("./test.scss");
-
-storiesOf('React Diagrams', module)
-	.add('Simple Example', () => {
-		return demo1();
-	})
-	.add('Performance Test', () => {
-		return demo2();
-	})
-	.add('Custom Diamond Widget', () => {
-		return demo3();
-	})
-	.add('Locked Widget', () => {
-		return demo4();
-	})
-	.add('Embedded diagram', () => {
-		return demo5();
-	})
-	.add('Serializing and Deserializing', () => {
-		return demo6();
-	})
-	.add('Grid Size', () => {
-		return demo7();
-	})

demos/test.scss

@@ -1,37 +0,0 @@
-@import "../src/sass";
-
-.storm-diagrams-canvas{
-	height: 400px;
-	background-color: rgb(60,60,60);
-	$color: rgba(white, .05);
-	background-image:
-		linear-gradient(0deg,
-			transparent 24%,
-			$color 25%,
-			$color 26%,
-			transparent 27%,
-			transparent 74%,
-			$color 75%,
-			$color 76%,
-			transparent 77%,
-			transparent),
-		linear-gradient(90deg,
-			transparent 24%,
-			$color 25%,
-			$color 26%,
-			transparent 27%,
-			transparent 74%,
-			$color 75%,
-			$color 76%,
-			transparent 77%,
-			transparent);
-	background-size:50px 50px;
-
-	path{
-		stroke: rgba(white,0.5);
-	}
-
-	.pointui{
-		fill: rgba(white,0.5);
-	}
-}

diagrams-demo-gallery/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-react",
+		"@babel/preset-typescript"
+  ],
+  "plugins": []
+}

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

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

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

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+
+import diagramsTheme from './theme';
+
+addons.setConfig({
+	theme: diagramsTheme
+});

diagrams-demo-gallery/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+	html, body, #storybook-root {
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,3 @@
+export const parameters = {
+	layout: 'fullscreen'
+};

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

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+export default create({
+	base: 'dark',
+	brandTitle: 'STORM React Diagrams',
+	brandUrl: 'https://github.com/projectstorm/react-diagrams'
+});

diagrams-demo-gallery/CHANGELOG.md

@@ -0,0 +1,70 @@
+# @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
+
+- b051697: - [internal] moves to `Pnpm` (instead of yarn -\_-)
+  - [internal]moves to `Changesets` for releases
+  - [internal]removes `Lerna`
+  - [internal] upgrades all dependencies
+  - [internal] switches to workspace protocol syntax (Changesets will bake in the correct version when a publish occurs)
+  - [internal] Changesets will open a release PR which can wrap up several changes in 1 go
+  - [internal] Changesets will run the storybook deploy automatically upon merging the release PR
+  - [internal] removes a lot of the stuff from the root package.json
+  - [internal] cleans up the build and clean commands
+  - [internal] remove E2E tests, they are a nightmare to maintain and the ROI is far too low
+  - [fix] Wrong type name for react-canvas model listener
+  - [fix] export more stuff form the main react-diagrams package
+  - [fix] circular deps with Rectangle and Polygon (turns out this was a problem but only with UMD builds, sorry @everyone who I doubted, but this is also why I could never reproduce the issue)
+  - [breaking change] compile both ES6 and UMD
+  - [breaking change] moves dependencies back to each package. (After years of working on libraries, I've come to actually hate peer dependencies, and this is easily solved with build systems / package managers).
+  - [breaking change] static methods on `Polygon` and `Rectangle` moved to standalone methods
+  - [breaking change] static construction methods to rather deal with different Rectangle constructor overloads (I now consider this bad design)
+  - [breaking change] introduce `Bounds` as a simpler point-array type to deal with boundary computation instead
+
+### Patch Changes
+
+- Updated dependencies [b051697]
+  - @projectstorm/react-diagrams-defaults@7.0.0
+  - @projectstorm/react-diagrams-core@7.0.0
+  - @projectstorm/react-canvas-core@7.0.0
+  - @projectstorm/react-diagrams@7.0.0

diagrams-demo-gallery/demos/1_SimpleUsage.stories.tsx

@@ -0,0 +1,32 @@
+import { Toolkit } from '@projectstorm/react-canvas-core';
+Toolkit.TESTING = true;
+
+export default {
+	title: 'Simple Usage'
+};
+
+import demo_simple from './demo-simple';
+import demo_flow from './demo-simple-flow';
+import demo_performance from './demo-performance';
+import demo_locks from './demo-locks';
+import demo_grid from './demo-grid';
+import demo_listeners from './demo-listeners';
+import demo_zoom from './demo-zoom-to-fit';
+import demo_zoom_nodes from './demo-zoom-to-fit-nodes';
+import demo_canvas_drag from './demo-canvas-drag';
+import demo_pan_and_zoom from './demo-pan-and-zoom';
+import demo_dynamic_ports from './demo-dynamic-ports';
+import demo_labels from './demo-labelled-links';
+
+export const DemoSimple = demo_simple;
+export const SimpleFlowExample = demo_flow;
+export const PerformanceDemo = demo_performance;
+export const LockedWidget = demo_locks;
+export const CanvasGridSize = demo_grid;
+export const EventsAndListeners = demo_listeners;
+export const ZoomToFit = demo_zoom;
+export const ZoomToFitSelectNodes = demo_zoom_nodes;
+export const CanvasDrag = demo_canvas_drag;
+export const CanvasPanAndZoom = demo_pan_and_zoom;
+export const DynamicPorts = demo_dynamic_ports;
+export const LinksWithLabels = demo_labels;

diagrams-demo-gallery/demos/2_AdvancedUsage.stories.tsx

@@ -0,0 +1,24 @@
+import { Toolkit } from '@projectstorm/react-canvas-core';
+Toolkit.TESTING = true;
+
+export default {
+	title: 'Advanced Usage'
+};
+
+import demo_adv_clone_selected from './demo-cloning';
+import demo_adv_ser_des from './demo-serializing';
+import demo_adv_prog from './demo-mutate-graph';
+import demo_adv_dnd from './demo-drag-and-drop';
+import demo_smart_routing from './demo-smart-routing';
+import demo_right_angles_routing from './demo-right-angles-routing';
+import demo_alternative_linking from './demo-alternative-linking';
+import demo_custom_delete_keys from './demo-custom_delete_keys';
+
+export const CloneSelected = demo_adv_clone_selected;
+export const SerializingAndDeSerializing = demo_adv_ser_des;
+export const ProgramaticallyModifyingGraph = demo_adv_prog;
+export const DragAndDrop = demo_adv_dnd;
+export const SmartRouting = demo_smart_routing;
+export const RightAnglesRouting = demo_right_angles_routing;
+export const LinkingByClickingInsteadOfDragging = demo_alternative_linking;
+export const SettingCustomDeleteKeys = demo_custom_delete_keys;

diagrams-demo-gallery/demos/3_Customization.stories.tsx

@@ -0,0 +1,18 @@
+import { Toolkit } from '@projectstorm/react-canvas-core';
+Toolkit.TESTING = true;
+
+export default {
+	title: 'Customization'
+};
+
+import demo_custom_link_label from './demo-custom-link-label';
+import demo_custom_action from './demo-custom-action';
+import demo_cust_nodes from './demo-custom-node1';
+import demo_cust_links from './demo-custom-link1';
+import demo_cust_links2 from './demo-custom-link2';
+
+export const CustomDiamondNode = demo_cust_nodes;
+export const CustomAnimatedLinks = demo_cust_links;
+export const CustomLinkEndsWithArrows = demo_cust_links2;
+export const CustomLinkLabel = demo_custom_link_label;
+export const CustomEvent = demo_custom_action;

diagrams-demo-gallery/demos/4_Libraries.stories.tsx

@@ -0,0 +1,12 @@
+import { Toolkit } from '@projectstorm/react-canvas-core';
+Toolkit.TESTING = true;
+
+export default {
+	title: 'External Libs'
+};
+
+import demo_3rd_dagre from './demo-dagre';
+import demo_gsap from './demo-animation';
+
+export const DagreDistribute = demo_3rd_dagre;
+export const GsapAnimation = demo_gsap;

diagrams-demo-gallery/demos/demo-alternative-linking/CreateLinkState.ts

@@ -0,0 +1,89 @@
+import { Action, ActionEvent, InputType, State } from '@projectstorm/react-canvas-core';
+import { PortModel, LinkModel, DiagramEngine } from '@projectstorm/react-diagrams-core';
+import { MouseEvent, KeyboardEvent } from 'react';
+
+/**
+ * This state is controlling the creation of a link.
+ */
+export class CreateLinkState extends State<DiagramEngine> {
+	sourcePort: PortModel;
+	link: LinkModel;
+
+	constructor() {
+		super({ name: 'create-new-link' });
+
+		this.registerAction(
+			new Action({
+				type: InputType.MOUSE_UP,
+				fire: (actionEvent: ActionEvent<MouseEvent>) => {
+					const element = this.engine.getActionEventBus().getModelForEvent(actionEvent);
+					const {
+						event: { clientX, clientY }
+					} = actionEvent;
+					const ox = this.engine.getModel().getOffsetX();
+					const oy = this.engine.getModel().getOffsetY();
+
+					if (element instanceof PortModel && !this.sourcePort) {
+						this.sourcePort = element;
+
+						/* would be cool if link creating could be done somewhat like
+                        const link = createLink({
+                            sourcePort: this.sourcePort,
+                            points: [{ x: clientX, y: clientY }, { x: clientX, y: clientY }]
+                        })
+                        */
+						const link = this.sourcePort.createLinkModel();
+						link.setSourcePort(this.sourcePort);
+						link.getFirstPoint().setPosition(clientX - ox, clientY - oy);
+						link.getLastPoint().setPosition(clientX - ox + 20, clientY - oy + 20);
+
+						this.link = this.engine.getModel().addLink(link);
+					} else if (element instanceof PortModel && this.sourcePort && element != this.sourcePort) {
+						if (this.sourcePort.canLinkToPort(element)) {
+							this.link.setTargetPort(element);
+							element.reportPosition();
+							this.clearState();
+							this.eject();
+						}
+					} else if (element === this.link.getLastPoint()) {
+						this.link.point(clientX - ox, clientY - oy, -1);
+					}
+
+					this.engine.repaintCanvas();
+				}
+			})
+		);
+
+		this.registerAction(
+			new Action({
+				type: InputType.MOUSE_MOVE,
+				fire: (actionEvent: ActionEvent<React.MouseEvent>) => {
+					if (!this.link) return;
+					const { event } = actionEvent;
+					this.link.getLastPoint().setPosition(event.clientX, event.clientY);
+					this.engine.repaintCanvas();
+				}
+			})
+		);
+
+		this.registerAction(
+			new Action({
+				type: InputType.KEY_UP,
+				fire: (actionEvent: ActionEvent<KeyboardEvent>) => {
+					// on esc press remove any started link and pop back to default state
+					if (actionEvent.event.keyCode === 27) {
+						this.link.remove();
+						this.clearState();
+						this.eject();
+						this.engine.repaintCanvas();
+					}
+				}
+			})
+		);
+	}
+
+	clearState() {
+		this.link = undefined;
+		this.sourcePort = undefined;
+	}
+}

diagrams-demo-gallery/demos/demo-alternative-linking/DefaultState.ts

@@ -0,0 +1,69 @@
+import { MouseEvent, TouchEvent } from 'react';
+import {
+	SelectingState,
+	State,
+	Action,
+	InputType,
+	ActionEvent,
+	DragCanvasState
+} from '@projectstorm/react-canvas-core';
+import { PortModel, DiagramEngine, DragDiagramItemsState } from '@projectstorm/react-diagrams-core';
+import { CreateLinkState } from './CreateLinkState';
+
+export class DefaultState extends State<DiagramEngine> {
+	dragCanvas: DragCanvasState;
+	createLink: CreateLinkState;
+	dragItems: DragDiagramItemsState;
+
+	constructor() {
+		super({ name: 'starting-state' });
+		this.childStates = [new SelectingState()];
+		this.dragCanvas = new DragCanvasState();
+		this.createLink = new CreateLinkState();
+		this.dragItems = new DragDiagramItemsState();
+
+		// determine what was clicked on
+		this.registerAction(
+			new Action({
+				type: InputType.MOUSE_DOWN,
+				fire: (event: ActionEvent<MouseEvent>) => {
+					const element = this.engine.getActionEventBus().getModelForEvent(event);
+
+					// the canvas was clicked on, transition to the dragging canvas state
+					if (!element) {
+						this.transitionWithEvent(this.dragCanvas, event);
+					}
+					// initiate dragging a new link
+					else if (element instanceof PortModel) {
+						return;
+					}
+					// move the items (and potentially link points)
+					else {
+						this.transitionWithEvent(this.dragItems, event);
+					}
+				}
+			})
+		);
+
+		// touch drags the canvas
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_START,
+				fire: (event: ActionEvent<TouchEvent>) => {
+					this.transitionWithEvent(new DragCanvasState(), event);
+				}
+			})
+		);
+
+		this.registerAction(
+			new Action({
+				type: InputType.MOUSE_UP,
+				fire: (event: ActionEvent<MouseEvent>) => {
+					const element = this.engine.getActionEventBus().getModelForEvent(event);
+
+					if (element instanceof PortModel) this.transitionWithEvent(this.createLink, event);
+				}
+			})
+		);
+	}
+}

diagrams-demo-gallery/demos/demo-alternative-linking/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+import { DefaultState } from './DefaultState';
+
+export default () => {
+	const engine = createEngine();
+	const model = new DiagramModel();
+
+	const node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	model.addAll(node1, node2);
+
+	engine.setModel(model);
+
+	// Use this custom "DefaultState" instead of the actual default state we get with the engine
+	engine.getStateMachine().pushState(new DefaultState());
+
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,86 @@
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import gsap from 'gsap';
+import { DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Tests the grid size
+ */
+class NodeDelayedPosition extends React.Component<any, any> {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		const { engine } = this.props;
+		return (
+			<DemoWorkspaceWidget>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
+			</DemoWorkspaceWidget>
+		);
+	}
+}
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine({ repaintDebounceMs: 12 });
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	//3-C) create another default node
+	var node3 = new DefaultNodeModel('Node 3', 'rgb(192,255,0)');
+	node2.setPosition(200, 300);
+
+	//3-D) create another default node
+	var node4 = new DefaultNodeModel('Node 4', 'rgb(192,255,0)');
+	node2.setPosition(400, 400);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1, node3, node4);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	var interval = setInterval(() => {
+		[node1, node2, node3, node4].map((node) => {
+			var obj = { x: 0, y: 0 };
+			gsap.fromTo(
+				obj,
+				{
+					x: node.getPosition().x,
+					y: node.getPosition().y
+				},
+				{
+					x: Math.floor(Math.random() * 500),
+					y: Math.floor(Math.random() * 500),
+					duration: 0.8,
+					onUpdate: () => {
+						node.setPosition(obj.x, obj.y);
+						engine.repaintCanvas();
+					}
+				}
+			);
+		});
+	}, 2000);
+
+	//6) render the diagram!
+	return <NodeDelayedPosition engine={engine} model={model} />;
+};

diagrams-demo-gallery/demos/demo-canvas-drag/index.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Tests the drag on/off
+ */
+class CanvasDragToggle extends React.Component<any, any> {
+	enableDrag = () => {
+		const { engine } = this.props;
+		const state = engine.getStateMachine().getCurrentState();
+		state.dragCanvas.config.allowDrag = true;
+	};
+
+	disableDrag = () => {
+		const { engine } = this.props;
+		const state = engine.getStateMachine().getCurrentState();
+		state.dragCanvas.config.allowDrag = false;
+	};
+
+	render() {
+		const { engine } = this.props;
+		return (
+			<DemoWorkspaceWidget
+				buttons={[
+					<DemoButton key={1} onClick={this.enableDrag}>
+						Enable canvas drag
+					</DemoButton>,
+					<DemoButton key={2} onClick={this.disableDrag}>
+						Disable canvas drag
+					</DemoButton>
+				]}
+			>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
+			</DemoWorkspaceWidget>
+		);
+	}
+}
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return <CanvasDragToggle engine={engine} model={model} />;
+};

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

@@ -0,0 +1,83 @@
+import createEngine, { DiagramModel, DefaultNodeModel, LinkModel, NodeModel } from '@projectstorm/react-diagrams';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { BaseModel, CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Tests cloning
+ */
+class CloneSelected extends React.Component<any, any> {
+	constructor(props: any) {
+		super(props);
+		this.cloneSelected = this.cloneSelected.bind(this);
+	}
+
+	cloneSelected() {
+		let { engine } = this.props;
+		let offset = { x: 100, y: 100 };
+		let model = engine.getModel();
+
+		let itemMap = {};
+		_.forEach(model.getSelectedEntities(), (item: BaseModel<any>) => {
+			let newItem = item.clone(itemMap);
+
+			// offset the nodes slightly
+			if (newItem instanceof NodeModel) {
+				newItem.setPosition(newItem.getX() + offset.x, newItem.getY() + offset.y);
+				model.addNode(newItem);
+			} else if (newItem instanceof LinkModel) {
+				// offset the link points
+				newItem.getPoints().forEach((p) => {
+					p.setPosition(p.getX() + offset.x, p.getY() + offset.y);
+				});
+				model.addLink(newItem);
+			}
+			(newItem as BaseModel).setSelected(false);
+		});
+
+		this.forceUpdate();
+	}
+
+	render() {
+		const { engine } = this.props;
+		return (
+			<DemoWorkspaceWidget buttons={<DemoButton onClick={this.cloneSelected}>Clone Selected</DemoButton>}>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
+			</DemoWorkspaceWidget>
+		);
+	}
+}
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	let port = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	let port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	// link the ports
+	let link1 = port.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return <CloneSelected engine={engine} model={model} />;
+};

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget, Action, ActionEvent, InputType } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+interface CustomDeleteItemsActionOptions {
+	keyCodes?: number[];
+}
+
+/**
+ * Deletes all selected items, but asks for confirmation first
+ */
+class CustomDeleteItemsAction extends Action {
+	constructor(options: CustomDeleteItemsActionOptions = {}) {
+		options = {
+			keyCodes: [46, 8],
+			...options
+		};
+		super({
+			type: InputType.KEY_DOWN,
+			fire: (event: ActionEvent<React.KeyboardEvent>) => {
+				if (options.keyCodes.indexOf(event.event.keyCode) !== -1) {
+					const selectedEntities = this.engine.getModel().getSelectedEntities();
+					if (selectedEntities.length > 0) {
+						const confirm = window.confirm('Are you sure you want to delete?');
+
+						if (confirm) {
+							_.forEach(selectedEntities, (model) => {
+								// only delete items which are not locked
+								if (!model.isLocked()) {
+									model.remove();
+								}
+							});
+							this.engine.repaintCanvas();
+						}
+					}
+				}
+			}
+		});
+	}
+}
+
+export default () => {
+	// create an engine without registering DeleteItemsAction
+	const engine = createEngine({ registerDefaultDeleteItemsAction: false });
+	const model = new DiagramModel();
+
+	const node1 = new DefaultNodeModel({ name: 'Node 1', color: 'rgb(0,192,255)' });
+	node1.setPosition(100, 100);
+	const port1 = node1.addOutPort('Out');
+
+	const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	const port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	const link1 = port1.link<DefaultLinkModel>(port2);
+	link1.getOptions().testName = 'Test';
+	link1.addLabel('Hello World!');
+
+	model.addAll(node1, node2, link1);
+
+	engine.setModel(model);
+
+	// register an DeleteItemsAction with custom keyCodes (in this case, only Delete key)
+	engine.getActionEventBus().registerAction(new CustomDeleteItemsAction());
+
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AbstractReactFactory, GenerateWidgetEvent } from '@projectstorm/react-canvas-core';
+import { DiagramEngine } from '@projectstorm/react-diagrams';
+
+import { EditableLabelModel } from './EditableLabelModel';
+import { EditableLabelWidget } from './EditableLabelWidget';
+
+export class EditableLabelFactory extends AbstractReactFactory<EditableLabelModel, DiagramEngine> {
+	constructor() {
+		super('editable-label');
+	}
+
+	generateModel(): EditableLabelModel {
+		return new EditableLabelModel();
+	}
+
+	generateReactWidget(event: GenerateWidgetEvent<EditableLabelModel>): JSX.Element {
+		return <EditableLabelWidget model={event.model} />;
+	}
+}

diagrams-demo-gallery/demos/demo-custom-link-label/EditableLabelModel.ts

@@ -0,0 +1,30 @@
+import { LabelModel } from '@projectstorm/react-diagrams';
+import { BaseModelOptions, DeserializeEvent } from '@projectstorm/react-canvas-core';
+
+export interface EditableLabelOptions extends BaseModelOptions {
+	value?: string;
+}
+
+export class EditableLabelModel extends LabelModel {
+	value: string;
+
+	constructor(options: EditableLabelOptions = {}) {
+		super({
+			...options,
+			type: 'editable-label'
+		});
+		this.value = options.value || '';
+	}
+
+	serialize() {
+		return {
+			...super.serialize(),
+			value: this.value
+		};
+	}
+
+	deserialize(event: DeserializeEvent<this>): void {
+		super.deserialize(event);
+		this.value = event.data.value;
+	}
+}

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { EditableLabelModel } from './EditableLabelModel';
+import styled from '@emotion/styled';
+import { action } from '@storybook/addon-actions';
+
+export interface FlowAliasLabelWidgetProps {
+	model: EditableLabelModel;
+}
+
+namespace S {
+	// NOTE: this CSS rules allows to interact with elements in label
+	export const Label = styled.div`
+		user-select: none;
+		pointer-events: auto;
+	`;
+}
+
+// now we can render all what we want in the label
+export const EditableLabelWidget: React.FunctionComponent<FlowAliasLabelWidgetProps> = (props) => {
+	const [str, setStr] = React.useState(props.model.value);
+
+	return (
+		<S.Label>
+			<input
+				value={str}
+				onChange={(event) => {
+					const newVal = event.target.value;
+
+					// update value both in internal component state
+					setStr(newVal);
+					// and in model object
+					props.model.value = newVal;
+				}}
+			/>
+
+			<button onClick={() => action('model eventDidFire')('You clicked the button')}>Click me!</button>
+		</S.Label>
+	);
+};

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import createEngine, { DefaultNodeModel, DiagramModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+import { EditableLabelFactory } from './EditableLabelFactory';
+import { EditableLabelModel } from './EditableLabelModel';
+
+/**
+ * @Author Shumaf Lovpache (aka Soarex16)
+ */
+
+export default () => {
+	// engine setup
+	const engine = createEngine();
+
+	// register our label factory
+	engine.getLabelFactories().registerFactory(new EditableLabelFactory());
+
+	// setup diagram model
+	const model = new DiagramModel();
+
+	// create some nodes
+	const node1 = new DefaultNodeModel('Node1', 'red');
+	const port1 = node1.addOutPort('out');
+	node1.setPosition(250, 100);
+
+	const node2 = new DefaultNodeModel('Node2', 'green');
+	const port2 = node2.addInPort('in');
+	node2.setPosition(800, 300);
+
+	// link nodes together
+	const link1 = port1.link(port2);
+
+	// !!!
+	// add our custom label to link
+	link1.addLabel(
+		new EditableLabelModel({
+			value: 'Hello, I am label!'
+		})
+	);
+
+	// add models to the root graph
+	model.addAll(node1, port1, node2, port2, link1);
+
+	// load model into engine
+	engine.setModel(model);
+
+	// render diagram
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,157 @@
+import createEngine, {
+	DiagramModel,
+	DefaultNodeModel,
+	DefaultPortModel,
+	DefaultLinkFactory,
+	DefaultLinkModel
+} from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+export class AdvancedLinkModel extends DefaultLinkModel {
+	constructor() {
+		super({
+			type: 'advanced',
+			width: 10
+		});
+	}
+}
+
+export class AdvancedPortModel extends DefaultPortModel {
+	createLinkModel(): AdvancedLinkModel | null {
+		return new AdvancedLinkModel();
+	}
+}
+
+export class AdvancedLinkSegment extends React.Component<{ model: AdvancedLinkModel; path: string }> {
+	path: SVGPathElement;
+	circle: SVGCircleElement;
+	callback: () => any;
+	percent: number;
+	handle: any;
+	mounted: boolean;
+
+	constructor(props) {
+		super(props);
+		this.percent = 0;
+	}
+
+	componentDidMount() {
+		this.mounted = true;
+		this.callback = () => {
+			if (!this.circle || !this.path) {
+				return;
+			}
+
+			this.percent += 2;
+			if (this.percent > 100) {
+				this.percent = 0;
+			}
+
+			let point = this.path.getPointAtLength(this.path.getTotalLength() * (this.percent / 100.0));
+
+			this.circle.setAttribute('cx', '' + point.x);
+			this.circle.setAttribute('cy', '' + point.y);
+
+			if (this.mounted) {
+				requestAnimationFrame(this.callback);
+			}
+		};
+		requestAnimationFrame(this.callback);
+	}
+
+	componentWillUnmount() {
+		this.mounted = false;
+	}
+
+	render() {
+		return (
+			<>
+				<path
+					fill="none"
+					ref={(ref) => {
+						this.path = ref;
+					}}
+					strokeWidth={this.props.model.getOptions().width}
+					stroke="rgba(255,0,0,0.5)"
+					d={this.props.path}
+				/>
+				<circle
+					ref={(ref) => {
+						this.circle = ref;
+					}}
+					r={10}
+					fill="orange"
+				/>
+			</>
+		);
+	}
+}
+
+export class AdvancedLinkFactory extends DefaultLinkFactory {
+	constructor() {
+		super('advanced');
+	}
+
+	generateModel(): AdvancedLinkModel {
+		return new AdvancedLinkModel();
+	}
+
+	generateLinkSegment(model: AdvancedLinkModel, selected: boolean, path: string) {
+		return (
+			<g>
+				<AdvancedLinkSegment model={model} path={path} />
+			</g>
+		);
+	}
+}
+/**
+ *
+ * Simple link styling demo
+ *
+ * @Author kfrajtak
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+	engine.getLinkFactories().registerFactory(new AdvancedLinkFactory());
+
+	// create some nodes
+	var node1 = new DefaultNodeModel('Source', 'rgb(0,192,255)');
+	let port1 = node1.addPort(new AdvancedPortModel(false, 'out-1', 'Out thick'));
+	let port2 = node1.addPort(new DefaultPortModel(false, 'out-2', 'Out default'));
+	node1.setPosition(100, 100);
+
+	var node2 = new DefaultNodeModel('Target', 'rgb(192,255,0)');
+	var port3 = node2.addPort(new AdvancedPortModel(true, 'in-1', 'In thick'));
+	var port4 = node2.addPort(new DefaultPortModel(true, 'in-2', 'In default'));
+	node2.setPosition(300, 100);
+
+	var node3 = new DefaultNodeModel('Source', 'rgb(0,192,255)');
+	node3.addPort(new AdvancedPortModel(false, 'out-1', 'Out thick'));
+	node3.addPort(new DefaultPortModel(false, 'out-2', 'Out default'));
+	node3.setPosition(100, 200);
+
+	var node4 = new DefaultNodeModel('Target', 'rgb(192,255,0)');
+	node4.addPort(new AdvancedPortModel(true, 'in-1', 'In thick'));
+	node4.addPort(new DefaultPortModel(true, 'in-2', 'In default'));
+	node4.setPosition(300, 200);
+
+	var model = new DiagramModel();
+
+	model.addAll(port1.link(port3), port2.link(port4));
+
+	// add everything else
+	model.addAll(node1, node2, node3, node4);
+
+	// load model into engine
+	engine.setModel(model);
+
+	// render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,168 @@
+import createEngine, {
+	DiagramModel,
+	DefaultNodeModel,
+	DefaultPortModel,
+	DefaultLinkFactory,
+	DefaultLinkModel,
+	DefaultLinkWidget
+} from '@projectstorm/react-diagrams';
+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';
+
+export class AdvancedLinkModel extends DefaultLinkModel {
+	constructor() {
+		super({
+			type: 'advanced',
+			width: 4
+		});
+	}
+}
+
+export class AdvancedPortModel extends DefaultPortModel {
+	createLinkModel(): AdvancedLinkModel | null {
+		return new AdvancedLinkModel();
+	}
+}
+
+const CustomLinkArrowWidget = (props) => {
+	const { point, previousPoint } = props;
+
+	const angle =
+		90 +
+		(Math.atan2(
+			point.getPosition().y - previousPoint.getPosition().y,
+			point.getPosition().x - previousPoint.getPosition().x
+		) *
+			180) /
+			Math.PI;
+
+	//translate(50, -10),
+	return (
+		<g className="arrow" transform={'translate(' + point.getPosition().x + ', ' + point.getPosition().y + ')'}>
+			<g style={{ transform: 'rotate(' + angle + 'deg)' }}>
+				<g transform={'translate(0, -3)'}>
+					<polygon
+						points="0,10 8,30 -8,30"
+						fill={props.color}
+						data-id={point.getID()}
+						data-linkid={point.getLink().getID()}
+					/>
+				</g>
+			</g>
+		</g>
+	);
+};
+
+export class AdvancedLinkWidget extends DefaultLinkWidget {
+	generateArrow(point: PointModel, previousPoint: PointModel): JSX.Element {
+		return (
+			<CustomLinkArrowWidget
+				key={point.getID()}
+				point={point as any}
+				previousPoint={previousPoint as any}
+				colorSelected={this.props.link.getOptions().selectedColor}
+				color={this.props.link.getOptions().color}
+			/>
+		);
+	}
+
+	render() {
+		//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++) {
+			paths.push(
+				this.generateLink(
+					LinkWidget.generateLinePath(points[j], points[j + 1]),
+					{
+						'data-linkid': this.props.link.getID(),
+						'data-point': j,
+						onMouseDown: (event: MouseEvent) => {
+							this.addPointToLink(event, j + 1);
+						}
+					},
+					j
+				)
+			);
+		}
+
+		//render the circles
+		for (let i = 1; i < points.length - 1; i++) {
+			paths.push(this.generatePoint(points[i]));
+		}
+
+		if (this.props.link.getTargetPort() !== null) {
+			paths.push(this.generateArrow(points[points.length - 1], points[points.length - 2]));
+		} else {
+			paths.push(this.generatePoint(points[points.length - 1]));
+		}
+
+		return <g data-default-link-test={this.props.link.getOptions().testName}>{paths}</g>;
+	}
+}
+
+export class AdvancedLinkFactory extends DefaultLinkFactory {
+	constructor() {
+		super('advanced');
+	}
+
+	generateModel(): AdvancedLinkModel {
+		return new AdvancedLinkModel();
+	}
+
+	generateReactWidget(event): JSX.Element {
+		return <AdvancedLinkWidget link={event.model} diagramEngine={this.engine} />;
+	}
+}
+
+/**
+ *
+ * Simple link styling demo
+ *
+ * @Author kfrajtak
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+	engine.getLinkFactories().registerFactory(new AdvancedLinkFactory());
+
+	// create some nodes
+	var node1 = new DefaultNodeModel('Source', 'rgb(0,192,255)');
+	let port1 = node1.addPort(new AdvancedPortModel(false, 'out'));
+	node1.setPosition(100, 100);
+
+	var node2 = new DefaultNodeModel('Target', 'rgb(192,255,0)');
+	var port2 = node2.addPort(new AdvancedPortModel(true, 'in'));
+	node2.setPosition(500, 350);
+
+	var node3 = new DefaultNodeModel('Source', 'rgb(0,192,255)');
+	let port3 = node3.addPort(new AdvancedPortModel(false, 'out'));
+	node3.setPosition(100, 500);
+
+	var node4 = new DefaultNodeModel('Target', 'rgb(192,255,0)');
+	var port4 = node4.addPort(new AdvancedPortModel(true, 'in'));
+	node4.setPosition(500, 450);
+
+	var model = new DiagramModel();
+
+	model.addAll(port1.link(port2), port3.link(port4));
+
+	// add everything else
+	model.addAll(node1, node2, node3, node4);
+
+	// load model into engine
+	engine.setModel(model);
+
+	// render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,19 @@
+import { DiamondNodeWidget } from './DiamondNodeWidget';
+import { DiamondNodeModel } from './DiamondNodeModel';
+import * as React from 'react';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { DiagramEngine } from '@projectstorm/react-diagrams-core';
+
+export class DiamondNodeFactory extends AbstractReactFactory<DiamondNodeModel, DiagramEngine> {
+	constructor() {
+		super('diamond');
+	}
+
+	generateReactWidget(event): JSX.Element {
+		return <DiamondNodeWidget engine={this.engine} size={50} node={event.model} />;
+	}
+
+	generateModel(event) {
+		return new DiamondNodeModel();
+	}
+}

diagrams-demo-gallery/demos/demo-custom-node1/DiamondNodeModel.ts

@@ -0,0 +1,18 @@
+import { NodeModel, NodeModelGenerics, PortModelAlignment } from '@projectstorm/react-diagrams';
+import { DiamondPortModel } from './DiamondPortModel';
+
+export interface DiamondNodeModelGenerics {
+	PORT: DiamondPortModel;
+}
+
+export class DiamondNodeModel extends NodeModel<NodeModelGenerics & DiamondNodeModelGenerics> {
+	constructor() {
+		super({
+			type: 'diamond'
+		});
+		this.addPort(new DiamondPortModel(PortModelAlignment.TOP));
+		this.addPort(new DiamondPortModel(PortModelAlignment.LEFT));
+		this.addPort(new DiamondPortModel(PortModelAlignment.BOTTOM));
+		this.addPort(new DiamondPortModel(PortModelAlignment.RIGHT));
+	}
+}

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

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { DiamondNodeModel } from './DiamondNodeModel';
+import { DiagramEngine, PortModelAlignment, PortWidget } from '@projectstorm/react-diagrams';
+import styled from '@emotion/styled';
+
+export interface DiamondNodeWidgetProps {
+	node: DiamondNodeModel;
+	engine: DiagramEngine;
+	size?: number;
+}
+
+namespace S {
+	export const Port = styled.div`
+		width: 16px;
+		height: 16px;
+		z-index: 10;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 8px;
+		cursor: pointer;
+
+		&:hover {
+			background: rgba(0, 0, 0, 1);
+		}
+	`;
+}
+
+/**
+ * @author Dylan Vorster
+ */
+export class DiamondNodeWidget extends React.Component<DiamondNodeWidgetProps> {
+	render() {
+		return (
+			<div
+				className={'diamond-node'}
+				style={{
+					position: 'relative',
+					width: this.props.size,
+					height: this.props.size
+				}}
+			>
+				<svg
+					width={this.props.size}
+					height={this.props.size}
+					dangerouslySetInnerHTML={{
+						__html:
+							`
+          <g id="Layer_1">
+          </g>
+          <g id="Layer_2">
+            <polygon fill="mediumpurple" stroke="${
+							this.props.node.isSelected() ? 'white' : '#000000'
+						}" stroke-width="3" stroke-miterlimit="10" points="10,` +
+							this.props.size / 2 +
+							` ` +
+							this.props.size / 2 +
+							`,10 ` +
+							(this.props.size - 10) +
+							`,` +
+							this.props.size / 2 +
+							` ` +
+							this.props.size / 2 +
+							`,` +
+							(this.props.size - 10) +
+							` "/>
+          </g>
+        `
+					}}
+				/>
+				<PortWidget
+					style={{
+						top: this.props.size / 2 - 8,
+						left: -8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.LEFT)}
+					engine={this.props.engine}
+				>
+					<S.Port />
+				</PortWidget>
+				<PortWidget
+					style={{
+						left: this.props.size / 2 - 8,
+						top: -8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.TOP)}
+					engine={this.props.engine}
+				>
+					<S.Port />
+				</PortWidget>
+				<PortWidget
+					style={{
+						left: this.props.size - 8,
+						top: this.props.size / 2 - 8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.RIGHT)}
+					engine={this.props.engine}
+				>
+					<S.Port />
+				</PortWidget>
+				<PortWidget
+					style={{
+						left: this.props.size / 2 - 8,
+						top: this.props.size - 8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.BOTTOM)}
+					engine={this.props.engine}
+				>
+					<S.Port />
+				</PortWidget>
+			</div>
+		);
+	}
+}

diagrams-demo-gallery/demos/demo-custom-node1/DiamondPortModel.ts

@@ -0,0 +1,15 @@
+import { LinkModel, PortModel, DefaultLinkModel, PortModelAlignment } from '@projectstorm/react-diagrams';
+
+export class DiamondPortModel extends PortModel {
+	constructor(alignment: PortModelAlignment) {
+		super({
+			type: 'diamond',
+			name: alignment,
+			alignment: alignment
+		});
+	}
+
+	createLinkModel(): LinkModel {
+		return new DefaultLinkModel();
+	}
+}

diagrams-demo-gallery/demos/demo-custom-node1/SimplePortFactory.ts

@@ -0,0 +1,15 @@
+import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';
+import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+
+export class SimplePortFactory extends AbstractModelFactory<PortModel, DiagramEngine> {
+	cb: (initialConfig?: any) => PortModel;
+
+	constructor(type: string, cb: (initialConfig?: any) => PortModel) {
+		super(type);
+		this.cb = cb;
+	}
+
+	generateModel(event): PortModel {
+		return this.cb(event.initialConfig);
+	}
+}

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

@@ -0,0 +1,68 @@
+import createEngine, { DefaultNodeModel, DiagramModel, PortModelAlignment } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+// import the custom models
+import { DiamondNodeModel } from './DiamondNodeModel';
+import { DiamondNodeFactory } from './DiamondNodeFactory';
+import { SimplePortFactory } from './SimplePortFactory';
+import { DiamondPortModel } from './DiamondPortModel';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * @Author Dylan Vorster
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	// register some other factories as well
+	engine
+		.getPortFactories()
+		.registerFactory(new SimplePortFactory('diamond', (config) => new DiamondPortModel(PortModelAlignment.LEFT)));
+	engine.getNodeFactories().registerFactory(new DiamondNodeFactory());
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 200);
+
+	//3-B) create our new custom node
+	var node2 = new DiamondNodeModel();
+	node2.setPosition(250, 108);
+
+	var node3 = new DefaultNodeModel('Node 3', 'red');
+	var port3 = node3.addInPort('In');
+	node3.setPosition(500, 100);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(node2.getPort(PortModelAlignment.LEFT));
+	var link2 = port3.link(node2.getPort(PortModelAlignment.RIGHT));
+
+	var node4 = new DefaultNodeModel('Node 4', 'rgb(0,192,255)');
+	var port4 = node4.addOutPort('Out');
+	node4.setPosition(200, 10);
+
+	var link3 = port4.link(node2.getPort(PortModelAlignment.TOP));
+
+	var node5 = new DefaultNodeModel('Node 5', 'mediumpurple');
+	var port5 = node5.addInPort('In');
+	node5.setPosition(400, 300);
+
+	var link4 = port5.link(node2.getPort(PortModelAlignment.BOTTOM));
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, node3, link1, link2, node4, link3, link4, node5);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget, DeleteItemsAction } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+export default () => {
+	// create an engine without registering DeleteItemsAction
+	const engine = createEngine({ registerDefaultDeleteItemsAction: false });
+	const model = new DiagramModel();
+
+	const node1 = new DefaultNodeModel({ name: 'Node 1', color: 'rgb(0,192,255)' });
+	node1.setPosition(100, 100);
+	const port1 = node1.addOutPort('Out');
+
+	const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	const port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	const link1 = port1.link<DefaultLinkModel>(port2);
+	link1.getOptions().testName = 'Test';
+	link1.addLabel('Hello World!');
+
+	model.addAll(node1, node2, link1);
+
+	engine.setModel(model);
+
+	// register an DeleteItemsAction with custom keyCodes (in this case, only Delete key)
+	engine.getActionEventBus().registerAction(new DeleteItemsAction({ keyCodes: [46] }));
+
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,148 @@
+import createEngine, {
+	DiagramModel,
+	DefaultNodeModel,
+	DefaultPortModel,
+	NodeModel,
+	DagreEngine,
+	DiagramEngine,
+	PathFindingLinkFactory
+} from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+function createNode(name): any {
+	return new DefaultNodeModel(name, 'rgb(0,192,255)');
+}
+
+let count = 0;
+
+function connectNodes(nodeFrom, nodeTo, engine: DiagramEngine) {
+	//just to get id-like structure
+	count++;
+	const portOut = nodeFrom.addPort(new DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, 'Out'));
+	const portTo = nodeTo.addPort(new DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, 'IN'));
+	return portOut.link(portTo);
+
+	// ################# UNCOMMENT THIS LINE FOR PATH FINDING #############################
+	// return portOut.link(portTo, engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME));
+	// #####################################################################################
+}
+
+/**
+ * Tests auto distribution
+ */
+class DemoWidget extends React.Component<{ model: DiagramModel; engine: DiagramEngine }, any> {
+	engine: DagreEngine;
+
+	constructor(props) {
+		super(props);
+		this.engine = new DagreEngine({
+			graph: {
+				rankdir: 'RL',
+				ranker: 'longest-path',
+				marginx: 25,
+				marginy: 25
+			},
+			includeLinks: true,
+			nodeMargin: 25
+		});
+	}
+
+	autoDistribute = () => {
+		this.engine.redistribute(this.props.model);
+
+		// only happens if pathfing is enabled (check line 25)
+		this.reroute();
+		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();
+		}, 500);
+	}
+
+	reroute() {
+		this.props.engine
+			.getLinkFactories()
+			.getFactory<PathFindingLinkFactory>(PathFindingLinkFactory.NAME)
+			.calculateRoutingMatrix();
+	}
+
+	render() {
+		return (
+			<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>
+			</DemoWorkspaceWidget>
+		);
+	}
+}
+
+export default () => {
+	//1) setup the diagram engine
+	let engine = createEngine();
+
+	//2) setup the diagram model
+	let model = new DiagramModel();
+
+	//3) create a default nodes
+	let nodesFrom: NodeModel[] = [];
+	let nodesTo: NodeModel[] = [];
+
+	nodesFrom.push(createNode('from-1'));
+	nodesFrom.push(createNode('from-2'));
+	nodesFrom.push(createNode('from-3'));
+
+	nodesTo.push(createNode('to-1'));
+	nodesTo.push(createNode('to-2'));
+	nodesTo.push(createNode('to-3'));
+
+	//4) link nodes together
+	let links = nodesFrom.map((node, index) => {
+		return connectNodes(node, nodesTo[index], engine);
+	});
+
+	// more links for more complicated diagram
+	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) => {
+		node.setPosition(index * 70, index * 70);
+		model.addNode(node);
+	});
+
+	nodesTo.forEach((node, index) => {
+		node.setPosition(index * 70, 100);
+		model.addNode(node);
+	});
+
+	links.forEach((link) => {
+		model.addLink(link);
+	});
+
+	engine.setModel(model);
+
+	return <DemoWidget model={model} engine={engine} />;
+};

diagrams-demo-gallery/demos/demo-drag-and-drop/Application.ts

@@ -0,0 +1,42 @@
+import * as SRD from '@projectstorm/react-diagrams';
+
+/**
+ * @author Dylan Vorster
+ */
+export class Application {
+	protected activeModel: SRD.DiagramModel;
+	protected diagramEngine: SRD.DiagramEngine;
+
+	constructor() {
+		this.diagramEngine = SRD.default();
+		this.newModel();
+	}
+
+	public newModel() {
+		this.activeModel = new SRD.DiagramModel();
+		this.diagramEngine.setModel(this.activeModel);
+
+		//3-A) create a default node
+		var node1 = new SRD.DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+		let port = node1.addOutPort('Out');
+		node1.setPosition(100, 100);
+
+		//3-B) create another default node
+		var node2 = new SRD.DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+		let port2 = node2.addInPort('In');
+		node2.setPosition(400, 100);
+
+		// link the ports
+		let link1 = port.link(port2);
+
+		this.activeModel.addAll(node1, node2, link1);
+	}
+
+	public getActiveDiagram(): SRD.DiagramModel {
+		return this.activeModel;
+	}
+
+	public getDiagramEngine(): SRD.DiagramEngine {
+		return this.diagramEngine;
+	}
+}

diagrams-demo-gallery/demos/demo-drag-and-drop/components/BodyWidget.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { TrayWidget } from './TrayWidget';
+import { Application } from '../Application';
+import { TrayItemWidget } from './TrayItemWidget';
+import { DefaultNodeModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../../helpers/DemoCanvasWidget';
+import styled from '@emotion/styled';
+
+export interface BodyWidgetProps {
+	app: Application;
+}
+
+namespace S {
+	export const Body = styled.div`
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 100%;
+	`;
+
+	export const Header = styled.div`
+		display: flex;
+		background: rgb(30, 30, 30);
+		flex-grow: 0;
+		flex-shrink: 0;
+		color: white;
+		font-family: Helvetica, Arial, sans-serif;
+		padding: 10px;
+		align-items: center;
+	`;
+
+	export const Content = styled.div`
+		display: flex;
+		flex-grow: 1;
+	`;
+
+	export const Layer = styled.div`
+		position: relative;
+		flex-grow: 1;
+	`;
+}
+
+export class BodyWidget extends React.Component<BodyWidgetProps> {
+	render() {
+		return (
+			<S.Body>
+				<S.Header>
+					<div className="title">Storm React Diagrams - DnD demo</div>
+				</S.Header>
+				<S.Content>
+					<TrayWidget>
+						<TrayItemWidget model={{ type: 'in' }} name="In Node" color="rgb(192,255,0)" />
+						<TrayItemWidget model={{ type: 'out' }} name="Out Node" color="rgb(0,192,255)" />
+					</TrayWidget>
+					<S.Layer
+						onDrop={(event) => {
+							var data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
+							var nodesCount = _.keys(this.props.app.getDiagramEngine().getModel().getNodes()).length;
+
+							var node: DefaultNodeModel = null;
+							if (data.type === 'in') {
+								node = new DefaultNodeModel('Node ' + (nodesCount + 1), 'rgb(192,255,0)');
+								node.addInPort('In');
+							} else {
+								node = new DefaultNodeModel('Node ' + (nodesCount + 1), 'rgb(0,192,255)');
+								node.addOutPort('Out');
+							}
+							var point = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
+							node.setPosition(point);
+							this.props.app.getDiagramEngine().getModel().addNode(node);
+							this.forceUpdate();
+						}}
+						onDragOver={(event) => {
+							event.preventDefault();
+						}}
+					>
+						<DemoCanvasWidget>
+							<CanvasWidget engine={this.props.app.getDiagramEngine()} />
+						</DemoCanvasWidget>
+					</S.Layer>
+				</S.Content>
+			</S.Body>
+		);
+	}
+}

diagrams-demo-gallery/demos/demo-drag-and-drop/components/TrayItemWidget.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+export interface TrayItemWidgetProps {
+	model: any;
+	color?: string;
+	name: string;
+}
+
+namespace S {
+	export const Tray = styled.div<{ color: string }>`
+		color: white;
+		font-family: Helvetica, Arial;
+		padding: 5px;
+		margin: 0px 10px;
+		border: solid 1px ${(p) => p.color};
+		border-radius: 5px;
+		margin-bottom: 2px;
+		cursor: pointer;
+	`;
+}
+
+export class TrayItemWidget extends React.Component<TrayItemWidgetProps> {
+	render() {
+		return (
+			<S.Tray
+				color={this.props.color}
+				draggable={true}
+				onDragStart={(event) => {
+					event.dataTransfer.setData('storm-diagram-node', JSON.stringify(this.props.model));
+				}}
+				className="tray-item"
+			>
+				{this.props.name}
+			</S.Tray>
+		);
+	}
+}

diagrams-demo-gallery/demos/demo-drag-and-drop/components/TrayWidget.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+namespace S {
+	export const Tray = styled.div`
+		min-width: 200px;
+		background: rgb(20, 20, 20);
+		flex-grow: 0;
+		flex-shrink: 0;
+	`;
+}
+
+export class TrayWidget extends React.Component {
+	render() {
+		return <S.Tray>{this.props.children}</S.Tray>;
+	}
+}

diagrams-demo-gallery/demos/demo-drag-and-drop/index.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { BodyWidget } from './components/BodyWidget';
+import { Application } from './Application';
+
+export default () => {
+	var app = new Application();
+	return <BodyWidget app={app} />;
+};

diagrams-demo-gallery/demos/demo-dynamic-ports/index.tsx

@@ -0,0 +1,58 @@
+import createEngine, { DiagramModel, DefaultNodeModel, DiagramEngine } from '@projectstorm/react-diagrams';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+class CloneSelected extends React.Component<{ model: DiagramModel; engine: DiagramEngine }, any> {
+	addPorts = () => {
+		const nodes: DefaultNodeModel[] = _.values(this.props.model.getNodes()) as DefaultNodeModel[];
+		for (let node of nodes) {
+			if (node.getOptions().name === 'Node 2') {
+				node.addInPort(`in-${node.getInPorts().length + 1}`, false);
+			} else {
+				node.addOutPort(`out-${node.getOutPorts().length + 1}`, false);
+			}
+		}
+		this.props.engine.repaintCanvas();
+	};
+
+	render() {
+		const { engine } = this.props;
+		return (
+			<DemoWorkspaceWidget buttons={<DemoButton onClick={this.addPorts}>Add more ports</DemoButton>}>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
+			</DemoWorkspaceWidget>
+		);
+	}
+}
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	node2.setPosition(400, 100);
+
+	// link the ports
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return <CloneSelected engine={engine} model={model} />;
+};

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

@@ -0,0 +1,42 @@
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Tests the grid size
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+	model.setGridSize(50);
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	let port = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	let port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	// link the ports
+	let link1 = port.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

diagrams-demo-gallery/demos/demo-labelled-links/index.tsx

@@ -0,0 +1,67 @@
+import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } 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
+	const node1 = new DefaultNodeModel('Node A', 'rgb(0,192,255)');
+	const port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	const node2 = new DefaultNodeModel('Node B', 'rgb(255,255,0)');
+	const port2 = node2.addInPort('In');
+	node2.setPosition(400, 50);
+
+	const node3 = new DefaultNodeModel('Node C (no label)', 'rgb(192,255,255)');
+	const port3 = node3.addInPort('In');
+	node3.setPosition(450, 180);
+
+	const node4 = new DefaultNodeModel('Node D', 'rgb(192,0,255)');
+	const port4 = node4.addInPort('In');
+	node4.setPosition(300, 250);
+
+	// link node A and B together and give it a label
+	const link1 = port1.link(port2);
+	(link1 as DefaultLinkModel).addLabel('Custom label 1');
+	(link1 as DefaultLinkModel).addLabel('Custom label 2');
+
+	// no label for A and C, just a link
+	const link2 = port1.link(port3);
+
+	// also a label for A and D
+	const link3 = port1.link(port4);
+	(link3 as DefaultLinkModel).addLabel('Emoji label: 🎉');
+
+	// add all to the main model
+	model.addAll(node1, node2, node3, node4, link1, link2, link3);
+
+	// load model into engine and render
+	engine.setModel(model);
+
+	return (
+		<DemoWorkspaceWidget
+			buttons={
+				<DemoButton
+					onClick={() => {
+						action('Serialized Graph')(JSON.stringify(model.serializeDiagram(), null, 2));
+					}}
+				>
+					Serialize Graph
+				</DemoButton>
+			}
+		>
+			<DemoCanvasWidget>
+				<CanvasWidget engine={engine} />
+			</DemoCanvasWidget>
+		</DemoWorkspaceWidget>
+	);
+};

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Shows some of the events triggered when elements are selected
+ */
+export default () => {
+	// setup the diagram engine
+	var engine = createEngine();
+
+	var model = new DiagramModel();
+
+	// sample for link with simple line
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(255,99,66)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 40);
+
+	var node3 = new DefaultNodeModel('Node 3', 'rgb(128,99,255)');
+	var port3 = node3.addInPort('In');
+	node3.setPosition(300, 160);
+
+	//link the nodes
+	let link1 = port1.link(port2);
+	let link2 = port1.link(port3);
+
+	// add all the models
+	let models = model.addAll(node1, node2, node3, link1, link2);
+
+	// add a selection listener to each
+	models.forEach((item) => {
+		item.registerListener({
+			eventDidFire: action('element eventDidFire')
+		});
+	});
+
+	model.registerListener({
+		eventDidFire: action('model eventDidFire')
+	});
+
+	engine.setModel(model);
+
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ *
+ * Shows how you can lock down the system so that the entire scene cant be interacted with.
+ *
+ * @Author Dylan Vorster
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	var model = new DiagramModel();
+
+	// sample for link with simple line (no additional points)
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	let link1 = port1.link(port2);
+
+	model.addAll(node1, node2, link1);
+
+	// sample for link with complex line (additional points)
+	var node3 = new DefaultNodeModel('Node 3', 'rgb(0,192,255)');
+	var port3 = node3.addOutPort('Out');
+	node3.setPosition(100, 250);
+
+	var node4 = new DefaultNodeModel('Node 4', 'rgb(192,255,0)');
+	var port4 = node4.addInPort('In');
+	node4.setPosition(400, 250);
+
+	var link2 = port3.link(port4);
+
+	link2.point(350, 225);
+	link2.point(200, 225);
+
+	model.addAll(node3, node4, link2);
+
+	engine.setModel(model);
+
+	//!========================================= <<<<<<<
+
+	model.setLocked(true);
+
+	//!=========================================  <<<<<<<
+
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx

@@ -0,0 +1,90 @@
+import createEngine, { DiagramModel, DefaultNodeModel, NodeModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import * as _ from 'lodash';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Tests the grid size
+ */
+class NodeDelayedPosition extends React.Component<any, any> {
+	constructor(props) {
+		super(props);
+		this.updatePosition = this.updatePosition.bind(this);
+		this.updatePositionViaSerialize = this.updatePositionViaSerialize.bind(this);
+	}
+
+	updatePosition() {
+		const { engine } = this.props;
+		let model = engine.getModel();
+		const nodes = model.getNodes();
+		let node = nodes[Object.keys(nodes)[0]];
+		node.setPosition(node.getX() + 30, node.getY() + 30);
+		engine.repaintCanvas();
+	}
+
+	updatePositionViaSerialize() {
+		let { engine } = this.props;
+		let model = engine.getModel();
+		let str = JSON.stringify(model.serialize());
+		let model2 = new DiagramModel();
+		let obj: ReturnType<DiagramModel['serialize']> = JSON.parse(str);
+		let node: ReturnType<NodeModel['serialize']> = _.values(obj.layers[1].models)[0] as any;
+		node.x += 30;
+		node.y += 30;
+
+		model2.deserializeModel(obj, engine);
+		engine.setModel(model2);
+	}
+
+	render() {
+		const { engine } = this.props;
+		return (
+			<DemoWorkspaceWidget
+				buttons={[
+					<DemoButton key={1} onClick={this.updatePosition}>
+						Update position
+					</DemoButton>,
+					<DemoButton key={2} onClick={this.updatePositionViaSerialize}>
+						Update position via serialize
+					</DemoButton>
+				]}
+			>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
+			</DemoWorkspaceWidget>
+		);
+	}
+}
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return <NodeDelayedPosition engine={engine} model={model} />;
+};

diagrams-demo-gallery/demos/demo-pan-and-zoom/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ * Tests the pan and zoom action, which is intended as a trackpad/mobile
+ * alternative to the standard ZoomCanvasAction
+ */
+class CanvasPanAndZoomToggle extends React.Component<any, any> {
+	render() {
+		const { engine } = this.props;
+		return (
+			<DemoCanvasWidget>
+				<CanvasWidget engine={engine} />
+			</DemoCanvasWidget>
+		);
+	}
+}
+
+export default () => {
+	/**
+	 * 1) setup the diagram engine
+	 * PandAndZoomCanvasAction and ZoomCanvasAction are mutually exclusive
+	 * If both are enabled, ZoomCanvasAction will override.
+	 */
+	var engine = createEngine({
+		registerDefaultPanAndZoomCanvasAction: true,
+		registerDefaultZoomCanvasAction: false
+	});
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return <CanvasPanAndZoomToggle engine={engine} model={model} />;
+};

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

@@ -0,0 +1,53 @@
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ *
+ * Simple stress test of the system, shows that it can handle many nodes, and
+ * retain good performance
+ *
+ * @Author Dylan Vorster
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	for (var i = 0; i < 8; i++) {
+		for (var j = 0; j < 8; j++) {
+			generateNodes(model, i * 200, j * 100);
+		}
+	}
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};
+
+function generateNodes(model: DiagramModel, offsetX: number, offsetY: number) {
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100 + offsetX, 100 + offsetY);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(200 + offsetX, 100 + offsetY);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+}

diagrams-demo-gallery/demos/demo-right-angles-routing/index.tsx

@@ -0,0 +1,72 @@
+import createEngine, {
+	DiagramModel,
+	DefaultNodeModel,
+	DefaultPortModel,
+	RightAngleLinkFactory,
+	LinkModel,
+	RightAngleLinkModel
+} from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { action } from '@storybook/addon-actions';
+import { AbstractModelFactory, CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+// When new link is created by clicking on port the RightAngleLinkModel needs to be returned.
+export class RightAnglePortModel extends DefaultPortModel {
+	createLinkModel(factory?: AbstractModelFactory<LinkModel>) {
+		return new RightAngleLinkModel();
+	}
+}
+
+export default () => {
+	// setup the diagram engine
+	const engine = createEngine();
+	engine.getLinkFactories().registerFactory(new RightAngleLinkFactory());
+
+	// 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 RightAnglePortModel(false, 'out-1', 'Out'));
+	node1.setPosition(340, 350);
+
+	const node2 = new DefaultNodeModel('Node B', 'rgb(255,255,0)');
+	const port2 = node2.addPort(new RightAnglePortModel(false, 'out-1', 'Out'));
+	node2.setPosition(240, 80);
+	const node3 = new DefaultNodeModel('Node C', 'rgb(192,255,255)');
+	const port3 = node3.addPort(new RightAnglePortModel(true, 'in-1', 'In'));
+	node3.setPosition(540, 180);
+	const node4 = new DefaultNodeModel('Node D', 'rgb(192,0,255)');
+	const port4 = node4.addPort(new RightAnglePortModel(true, 'in-1', 'In'));
+	node4.setPosition(95, 185);
+
+	// linking things together
+	const link1 = port1.link(port4);
+	const link2 = port2.link(port3);
+
+	// add all to the main model
+	model.addAll(node1, node2, node3, node4, 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>
+	);
+};

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

@@ -0,0 +1,63 @@
+import createEngine, { DiagramModel, DefaultNodeModel, DefaultLabelModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { action } from '@storybook/addon-actions';
+import * as beautify from 'json-beautify';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+	link1.addLabel(new DefaultLabelModel({ label: 'Label' }));
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//!------------- SERIALIZING ------------------
+
+	var str = JSON.stringify(model.serialize());
+
+	//!------------- DESERIALIZING ----------------
+
+	var model2 = new DiagramModel();
+	model2.deserializeModel(JSON.parse(str), engine);
+	engine.setModel(model2);
+
+	return (
+		<DemoWorkspaceWidget
+			buttons={
+				<DemoButton
+					onClick={() => {
+						action('Serialized Graph')(beautify(model2.serialize(), null, 2, 80));
+					}}
+				>
+					Serialize Graph
+				</DemoButton>
+			}
+		>
+			<DemoCanvasWidget>
+				<CanvasWidget engine={engine} />
+			</DemoCanvasWidget>
+		</DemoWorkspaceWidget>
+	);
+};

diagrams-demo-gallery/demos/demo-simple-flow/index.tsx

@@ -0,0 +1,50 @@
+import createEngine, { DiagramModel, DefaultNodeModel, DefaultDiagramState } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	// ############################################ MAGIC HAPPENS HERE
+	const state = engine.getStateMachine().getCurrentState();
+	if (state instanceof DefaultDiagramState) {
+		state.dragNewLink.config.allowLooseLinks = false;
+	}
+	// ############################################ MAGIC HAPPENS HERE
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100, 100);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//3-D) create an orphaned node
+	var node3 = new DefaultNodeModel('Node 3', 'rgb(0,192,255)');
+	node3.addOutPort('Out');
+	node3.setPosition(100, 200);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, node3, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

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

@@ -0,0 +1,43 @@
+import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel({
+		name: 'Node 1',
+		color: 'rgb(0,192,255)'
+	});
+	node1.setPosition(100, 100);
+	let port1 = node1.addOutPort('Out');
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	let port2 = node2.addInPort('In');
+	node2.setPosition(400, 100);
+
+	// link the ports
+	let link1 = port1.link<DefaultLinkModel>(port2);
+	link1.getOptions().testName = 'Test';
+	link1.addLabel('Hello World!');
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
+};

diagrams-demo-gallery/demos/demo-smart-routing/index.tsx

@@ -0,0 +1,74 @@
+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>
+	);
+};

diagrams-demo-gallery/demos/demo-zoom-to-fit-nodes/index.tsx

@@ -0,0 +1,57 @@
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { DemoWorkspaceWidget, DemoButton } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ *
+ * Simple stress test of the system plus zoom to fit function
+ *
+ * @Author Dylan Vorster
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	for (var i = 0; i < 8; i++) {
+		for (var j = 0; j < 8; j++) {
+			generateNodes(model, i * 200, j * 100);
+		}
+	}
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoWorkspaceWidget
+			buttons={<DemoButton onClick={() => engine.zoomToFitSelectedNodes(50)}>Zoom to fit</DemoButton>}
+		>
+			<DemoCanvasWidget>
+				<CanvasWidget engine={engine} />
+			</DemoCanvasWidget>
+		</DemoWorkspaceWidget>
+	);
+};
+
+function generateNodes(model: DiagramModel, offsetX: number, offsetY: number) {
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100 + offsetX, 100 + offsetY);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(200 + offsetX, 100 + offsetY);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+}

diagrams-demo-gallery/demos/demo-zoom-to-fit/index.tsx

@@ -0,0 +1,55 @@
+import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { DemoWorkspaceWidget, DemoButton } from '../helpers/DemoWorkspaceWidget';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+/**
+ *
+ * Simple stress test of the system plus zoom to fit function
+ *
+ * @Author Dylan Vorster
+ */
+export default () => {
+	//1) setup the diagram engine
+	var engine = createEngine();
+
+	//2) setup the diagram model
+	var model = new DiagramModel();
+
+	for (var i = 0; i < 8; i++) {
+		for (var j = 0; j < 8; j++) {
+			generateNodes(model, i * 200, j * 100);
+		}
+	}
+
+	//5) load model into engine
+	engine.setModel(model);
+
+	//6) render the diagram!
+	return (
+		<DemoWorkspaceWidget buttons={<DemoButton onClick={() => engine.zoomToFit()}>Zoom to fit</DemoButton>}>
+			<DemoCanvasWidget>
+				<CanvasWidget engine={engine} />
+			</DemoCanvasWidget>
+		</DemoWorkspaceWidget>
+	);
+};
+
+function generateNodes(model: DiagramModel, offsetX: number, offsetY: number) {
+	//3-A) create a default node
+	var node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+	var port1 = node1.addOutPort('Out');
+	node1.setPosition(100 + offsetX, 100 + offsetY);
+
+	//3-B) create another default node
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	var port2 = node2.addInPort('In');
+	node2.setPosition(200 + offsetX, 100 + offsetY);
+
+	//3-C) link the 2 nodes together
+	var link1 = port1.link(port2);
+
+	//4) add the models to the root graph
+	model.addAll(node1, node2, link1);
+}

diagrams-demo-gallery/demos/helpers/DemoCanvasWidget.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { css, Global } from '@emotion/react';
+
+export interface DemoCanvasWidgetProps {
+	color?: string;
+	background?: string;
+}
+
+namespace S {
+	export const Container = styled.div<{ color: string; background: string }>`
+		height: 100%;
+		background-color: ${(p) => p.background};
+		background-size: 50px 50px;
+		display: flex;
+
+		> * {
+			height: 100%;
+			min-height: 100%;
+			width: 100%;
+		}
+
+		background-image: linear-gradient(
+				0deg,
+				transparent 24%,
+				${(p) => p.color} 25%,
+				${(p) => p.color} 26%,
+				transparent 27%,
+				transparent 74%,
+				${(p) => p.color} 75%,
+				${(p) => p.color} 76%,
+				transparent 77%,
+				transparent
+			),
+			linear-gradient(
+				90deg,
+				transparent 24%,
+				${(p) => p.color} 25%,
+				${(p) => p.color} 26%,
+				transparent 27%,
+				transparent 74%,
+				${(p) => p.color} 75%,
+				${(p) => p.color} 76%,
+				transparent 77%,
+				transparent
+			);
+	`;
+
+	export const Expand = css`
+		html,
+		body,
+		#root {
+			height: 100%;
+		}
+	`;
+}
+
+export class DemoCanvasWidget extends React.Component<React.PropsWithChildren<DemoCanvasWidgetProps>> {
+	render() {
+		return (
+			<>
+				<Global styles={S.Expand} />
+				<S.Container
+					background={this.props.background || 'rgb(60, 60, 60)'}
+					color={this.props.color || 'rgba(255,255,255, 0.05)'}
+				>
+					{this.props.children}
+				</S.Container>
+			</>
+		);
+	}
+}

diagrams-demo-gallery/demos/helpers/DemoWorkspaceWidget.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+export interface DemoWorkspaceWidgetProps {
+	buttons?: any;
+}
+
+namespace S {
+	export const Toolbar = styled.div`
+		padding: 5px;
+		display: flex;
+		flex-shrink: 0;
+	`;
+
+	export const Content = styled.div`
+		flex-grow: 1;
+		height: 100%;
+	`;
+
+	export const Container = styled.div`
+		background: black;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		border-radius: 5px;
+		overflow: hidden;
+	`;
+}
+
+export const DemoButton = styled.button`
+	background: rgb(60, 60, 60);
+	font-size: 14px;
+	padding: 5px 10px;
+	border: none;
+	color: white;
+	outline: none;
+	cursor: pointer;
+	margin: 2px;
+	border-radius: 3px;
+
+	&:hover {
+		background: rgb(0, 192, 255);
+	}
+`;
+
+export class DemoWorkspaceWidget extends React.Component<React.PropsWithChildren<DemoWorkspaceWidgetProps>> {
+	render() {
+		return (
+			<S.Container>
+				<S.Toolbar>{this.props.buttons}</S.Toolbar>
+				<S.Content>{this.props.children}</S.Content>
+			</S.Container>
+		);
+	}
+}

diagrams-demo-gallery/demos/helpers/Helper.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export class Helper {
+	/**
+	 * Logs the mouse position in the console, but overlays a div that consumes all events
+	 * since the actual story book stories are rendered as an iFrame.
+	 */
+	static logMousePosition() {
+		let element = window.parent.document.createElement('mouse-position');
+		element.style.position = 'absolute';
+		element.style.top = '0px';
+		element.style.left = '0px';
+		element.style.bottom = '0px';
+		element.style.right = '0px';
+		element.style.zIndex = '10';
+		window.parent.document.body.appendChild(element);
+
+		window.parent.window.addEventListener('mousemove', (event) => {
+			console.clear();
+			console.log(event.clientX, event.clientY);
+		});
+	}
+}

diagrams-demo-gallery/demos/helpers/index.css

@@ -0,0 +1,7 @@
+html,
+body,
+#storybook-root {
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}

diagrams-demo-gallery/package.json

@@ -0,0 +1,53 @@
+{
+  "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"
+  }
+}

diagrams-demo-gallery/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"compileOnSave": false,
+	"compilerOptions": {
+		"suppressExcessPropertyErrors": true,
+		"declaration": true,
+		"composite": true,
+		"incremental": true,
+		"strictNullChecks": false,
+		"sourceMap": true,
+		"skipLibCheck": true,
+		"jsx": "react",
+		"target": "ES6",
+		"module": "commonjs",
+		"strict": false,
+		"lib": [
+			"DOM",
+			"ES6"
+		]
+	},
+	"include": [
+		"demos"
+	]
+}