v6.4.2

Project upgrade

.circleci/config.yml

@@ -2,30 +2,22 @@ version: 2
 jobs:
   build:
     docker:
-      - image: projectstorm/react-diagrams-ci
-
+      - image: buildkite/puppeteer
     working_directory: ~/repo
-
     steps:
       - checkout
-
-      # Download and cache dependencies
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-
+            - v1-dependencies-{{ checksum "yarn.lock" }}
       - run: yarn install
-
       - save_cache:
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
 
       # test building project
-      - run: yarn run prepublishOnly
-
-      # test building storybook
-      - run: yarn run storybook:build
+      - run: yarn run build
 
       # test e2e tests and jest snapshots
-      - run: yarn run test:ci
+      - run: cd diagrams-demo-gallery && yarn run test --ci
+      - run: cd packages/react-diagrams-routing && yarn run test --ci

.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

.gitbook.yaml

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,21 +4,18 @@
 - [ ] The tests pass on CircleCI
 - [ ] You have referenced the issue(s) or other PR(s) this fixes/relates-to
 - [ ] The PR Template has been filled out (see below)
-- [ ] Had a beer because you are awesome
+- [ ] Had a beer/coffee because you are awesome
 
 ## What?
 
-(My awesome new feature does this really cool thing.)
 
 ## Why?
 
-(Because obviously it could not do it before)
 
 ## How?
+ 
 
-(Basically I did this and that because im a super 1337 hacker) 
-
-## Feel-Good "programming lol" image:
+## Feel good image:
 
 (Add your own one below :])
 

.gitignore

@@ -1,194 +1,9 @@
-dist/
-dist/main.js
-dist/main.js.map
-/package
-*.tgz
-@types/
-
-.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
+yarn-error.log
+tsconfig.tsbuildinfo

.npmignore

@@ -1,194 +0,0 @@
-demos
-images
-docs
-.out
-.storybook
-.circleci
-tests
-*.md
-
-# 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,8 @@
+{
+	"semi": true,
+	"singleQuote": true,
+	"jsxBracketSameLine": true,
+	"useTabs": true,
+	"printWidth": 120,
+	"trailingComma": "none"
+}

.storybook/addon-code/react.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import addons from '@storybook/addons';
-
-export class WithCode extends React.Component {
-	render() {
-		const { children, code } = this.props;
-		const channel = addons.getChannel();
-
-		// send the notes to the channel.
-		channel.emit('storybook/code/set_code', code);
-		// return children elements.
-		return children;
-	}
-}

.storybook/addon-code/register.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import addons from '@storybook/addons';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github } from 'react-syntax-highlighter/styles/hljs';
-
-/**
- * @author Dylan
- *
- * Simple little addon for displaying code, might make this a seperate project at some point
- */
-export class CodePreview extends React.Component {
-
-	constructor(...args) {
-		super(...args);
-		this.state = {
-			code: ''
-		};
-	}
-
-	componentDidMount() {
-		const { channel, api } = this.props;
-		// Listen to the notes and render it.
-		channel.on('storybook/code/set_code', (code) => {
-			this.onAddCode(code);
-		});
-
-		// Clear the current notes on every story change.
-		this.stopListeningOnStory = api.onStory(() => {
-			this.onAddCode('');
-		});
-	}
-
-	// This is some cleanup tasks when the Notes panel is unmounting.
-	componentWillUnmount() {
-		if (this.stopListeningOnStory) {
-			this.stopListeningOnStory();
-		}
-
-		this.unmounted = true;
-		const { channel } = this.props;
-		channel.removeListener('storybook/notes/add_notes', this.onAddCode);
-	}
-
-	onAddCode(code) {
-		this.setState({ code: code });
-	}
-
-	render() {
-		return (
-			<SyntaxHighlighter
-				customStyle={{width: '100%', overflowX:'hidden', tabSize: 4}}
-				showLineNumbers={true}
-				language='language-tsx'
-				style={github}
-			>
-				{this.state.code}
-			</SyntaxHighlighter>
-		);
-	}
-}
-
-// Register the addon with a unique name.
-addons.register('storybook/code', api => {
-	// Also need to set a unique name to the panel.
-	addons.addPanel('storybook/code/panel', {
-		title: 'Code preview',
-		render: () => <CodePreview channel={addons.getChannel()} api={api} />,
-	});
-});

.storybook/addons.js

@@ -1,3 +0,0 @@
-import './addon-code/register';
-import '@storybook/addon-actions/register';
-import '@storybook/addon-options/register';

.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,39 +0,0 @@
-const path = require('path');
-module.exports = {
-	module: {
-		rules: [
-			{
-				test: /\.scss$/,
-				loaders: ["style-loader", "css-loader", "sass-loader"],
-				include: path.resolve(__dirname, '../')
-			},
-			{
-				test: /\.css/,
-				loaders: ["style-loader", "css-loader"],
-				include: path.resolve(__dirname, '../')
-			},
-			{
-				enforce: 'pre',
-				test: /\.js$/,
-				loader: "source-map-loader",
-				exclude: [
-					/node_modules\//
-				]
-			},
-			{
-				test: /\.tsx?$/,
-				loader: 'awesome-typescript-loader?declaration=false',
-			},
-			{
-				test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
-				loader: "file-loader"
-			}
-		]
-	},
-	resolve: {
-		alias: {
-			'storm-react-diagrams': path.join(__dirname, "..", "src", "main")
-		},
-		extensions: [".tsx", ".ts", ".js"]
-	}
-};

CHANGELOG.md

@@ -1,65 +1,136 @@
-__5.1.0__ 
+__6.4.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
+* 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/
 
 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!
+* (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/
 
-* [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 
+* (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/
-* [feature] zoom to fit
+* (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
+* (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
+* (bugs) swapping diagram models in engines
+* (bugs) issues with the rendering pipeline #107
 * added ci badge to Readme
 
-__3.1.3__ 
+__3.1.3__
 * Refactor links slightly
 * use min extension for css
 * bump package versions
 * export more classes
 
-__3.1.2__ 
+__3.1.2__
 * Hotfix: fix zooming when canvas not in the top left corner
 (https://github.com/projectstorm/react-diagrams/pull/88)
 
@@ -68,7 +139,7 @@ __3.1.0__ http://dylanv.blog/2017/09/15/storm-react-diagrams-3-1-0/
 * 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 
+* Code cleanup
 
 __3.0.0__ http://dylanv.blog/2017/09/13/storm-react-diagrams-v3/
 * Massive performance updates

README.md

@@ -1,46 +1,98 @@
-# STORM React Diagrams
+# Introduction
 
-**PSA**: React Diagrams is currently getting a bit of a rewrite to enable much more advanced features. To see the new foundation WIP visit [https://github.com/projectstorm/react-canvas](https://github.com/projectstorm/react-canvas).
+[![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) [![CircleCI](https://circleci.com/gh/projectstorm/react-diagrams/tree/master.svg?style=svg)](https://circleci.com/gh/projectstorm/react-diagrams/tree/master) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
----
+![](.gitbook/assets/logo.jpg)
 
-**DEMO**: [http://www.projectstorm.io/react-diagrams](http://www.projectstorm.io/react-diagrams)
+[pssst! Looking for the old version 5?](https://github.com/projectstorm/react-diagrams/tree/v5.3.2)
 
-**DOCS:** [https://projectstorm.gitbooks.io/react-diagrams](https://projectstorm.gitbooks.io/react-diagrams)
+**DEMO**: [http://projectstorm.cloud/react-diagrams](http://projectstorm.cloud/react-diagrams)
 
-**RELEASE NOTES** : [http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/](http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/)
+**DOCS \(wip\)** [https://projectstorm.gitbook.io/react-diagrams](https://projectstorm.gitbook.io/react-diagrams)
 
-A super simple, no-nonsense diagramming library written in React that just works.
+Docs are currently being worked on, along with a migration path.
 
-[![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) [![Package Quality](http://npm.packagequality.com/shield/storm-react-diagrams.svg)](http://packagequality.com/#?package=storm-react-diagrams)  [![CircleCI](https://circleci.com/gh/projectstorm/react-diagrams/tree/master.svg?style=svg)](https://circleci.com/gh/projectstorm/react-diagrams/tree/master)
+## What
 
-![Personal Project](./images/example1.jpg)
+A flow & process orientated diagramming library inspired by **Blender**, **Labview** and **Unreal engine**.
 
-![](./images/example2.jpg)
+* **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.
 
-![](./images/example3.jpg)
+## Gallery
 
-## Introduction
+Example implementation using custom models: \(Dylan's personal code\)
 
-A no-nonsense diagramming library written entirely in React with the help of a few small libraries. It aims to be:
+![Personal Project](.gitbook/assets/example1.jpg)
+![](.gitbook/assets/example2.jpg)
 
-* 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
-* Perfect for creating declarative systems such as programmatic pipelines and visual programming languages 
+Get started with the default models right out of the box:
 
-#### Run the demos
+![](.gitbook/assets/example3.jpg)
 
-After running `yarn install` you must then run:  `yarn run storybook`
+## Installing
 
-#### Building from source
+For all the bells and whistles:
 
-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.   
-We use webpack for this because TSC cannot compile a single UMD file \(TSC can currently only output multiple UMD files\).
+```text
+yarn add @projectstorm/react-diagrams
+```
 
-## [Checkout the docs](https://projectstorm.gitbooks.io/react-diagrams)
+This includes all the packages listed below \(and works \(mostly and conceptually\) like it used to in version 5.0\)
+
+### A more modular approach
+
+This library now has a more modular design and you can import just the core \(contains no default factories or routing\)
+
+```text
+yarn add @projectstorm/react-diagrams-core
+```
+
+this is built ontop of the evolving **react-canvas-core** library
+
+```text
+yarn add @projectstorm/react-canvas-core
+```
+
+which makes use of
+
+```text
+yarn add @projectstorm/geometry
+```
+
+and of course, you can add some extras:
+
+```text
+yarn add @projectstorm/react-diagrams-defaults
+yarn add @projectstorm/react-diagrams-routing
+```
+
+## How to use
+
+Before running any of the examples, please run `yarn build` in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.
 
 
+Take a look at the [diagram demos](https://github.com/projectstorm/react-diagrams/tree/master/packages/diagrams-demo-gallery/demos)
 
+**or**
+
+Take a look at the [demo project](https://github.com/projectstorm/react-diagrams/tree/master/packages/diagrams-demo-project) which contains an example for ES6 as well as Typescript
+
+**or**
+
+[Checkout the docs](https://projectstorm.gitbook.io/react-diagrams/)
+
+## Run the demos
+
+After running `yarn install` you must then run: `cd packages/diagrams-demo-gallery && yarn run start`
+
+## Building from source
+
+Simply run `yarn` then `yarn build` or `yarn build:prod` in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.
+
+## Built with react-diagrams
+
+> Do you have an interesting project built with *react-diagrams*? PR it into this section for others to see.

SUMMARY.md

@@ -1,11 +0,0 @@
-# Summary
-
-* [Introduction](README.md)
-* [Interacting with diagrams](/docs/Interactive Usage.md)
-* [Getting Started](/docs/Getting Started.md)
-* [About the project](about-the-project.md)
-  * [Testing](/docs/Testing.md)
-  * [Architecture Questions](/docs/Architecture Questions.md)
-
-
-

demos/.helpers/DemoWorkspaceWidget.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-
-export interface DemoWorkspaceWidgetProps {
-	buttons?: any;
-}
-
-export interface DemoWorkspaceWidgetState {}
-
-export class DemoWorkspaceWidget extends React.Component<DemoWorkspaceWidgetProps, DemoWorkspaceWidgetState> {
-	constructor(props: DemoWorkspaceWidgetProps) {
-		super(props);
-		this.state = {};
-	}
-
-	render() {
-		return (
-			<div className="srd-demo-workspace">
-				<div className="srd-demo-workspace__toolbar">{this.props.buttons}</div>
-				<div className="srd-demo-workspace__content">{this.props.children}</div>
-			</div>
-		);
-	}
-}

demos/.helpers/Helper.tsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-import { withDocs } from "storybook-readme";
-import { WithCode } from "../../.storybook/addon-code/react.js";
-
-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);
-		});
-	}
-
-	static makeDemo(widget, code, markdown?) {
-		let container = () => <WithCode code={code}>{widget}</WithCode>;
-		if (markdown) {
-			return withDocs({
-				PreviewComponent: ({ children }) => {
-					return <div className="docs-preview-wrapper">{children}</div>;
-				}
-			})(markdown, container);
-		}
-		return container;
-	}
-}

demos/.helpers/demo.scss

@@ -1,80 +0,0 @@
-@import "../../src/sass/main";
-
-.srd-demo-workspace{
-  background: black;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-radius: 5px;
-  overflow: hidden;
-
-  &__toolbar{
-    padding: 5px;
-    display: flex;
-    flex-shrink: 0;
-
-    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);
-      }
-    }
-  }
-
-  &__content{
-    flex-grow: 1;
-    height: 100%;
-  }
-}
-
-.docs-preview-wrapper{
-  background: rgb(60,60,60);
-  border-radius: 10px;
-  overflow: hidden;
-  padding: 10px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.srd-demo-canvas{
-  height: 100%;
-  min-height: 300px;
-  background-color: rgb(60,60,60) !important;
-  $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;
-
-  .pointui{
-    fill: rgba(white,0.5);
-  }
-
-}

demos/demo-custom-node1/DiamondNodeFactory.tsx

@@ -1,18 +0,0 @@
-import * as SRD from "storm-react-diagrams";
-import { DiamonNodeWidget } from "./DiamondNodeWidget";
-import { DiamondNodeModel } from "./DiamondNodeModel";
-import * as React from "react";
-
-export class DiamondNodeFactory extends SRD.AbstractNodeFactory {
-	constructor() {
-		super("diamond");
-	}
-
-	generateReactWidget(diagramEngine: SRD.DiagramEngine, node: SRD.NodeModel): JSX.Element {
-		return <DiamonNodeWidget node={node} />;
-	}
-
-	getNewInstance() {
-		return new DiamondNodeModel();
-	}
-}

demos/demo-custom-node1/DiamondNodeModel.ts

@@ -1,12 +0,0 @@
-import { NodeModel } from "storm-react-diagrams";
-import { DiamondPortModel } from "./DiamondPortModel";
-
-export class DiamondNodeModel extends 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/demo-custom-node1/DiamondNodeWidget.tsx

@@ -1,105 +0,0 @@
-import * as React from "react";
-import { DiamondNodeModel } from "./DiamondNodeModel";
-import { PortWidget } from "storm-react-diagrams";
-
-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>
-		);
-	}
-}

demos/demo-custom-node1/DiamondPortModel.ts

@@ -1,26 +0,0 @@
-import * as _ from "lodash";
-import { LinkModel, DiagramEngine, PortModel, DefaultLinkModel } from "storm-react-diagrams";
-
-export class DiamondPortModel extends PortModel {
-	position: string | "top" | "bottom" | "left" | "right";
-
-	constructor(pos: string = "top") {
-		super(pos, "diamond");
-		this.position = pos;
-	}
-
-	serialize() {
-		return _.merge(super.serialize(), {
-			position: this.position
-		});
-	}
-
-	deSerialize(data: any, engine: DiagramEngine) {
-		super.deSerialize(data, engine);
-		this.position = data.position;
-	}
-
-	createLinkModel(): LinkModel {
-		return new DefaultLinkModel();
-	}
-}

demos/demo-custom-node1/SimplePortFactory.ts

@@ -1,14 +0,0 @@
-import { PortModel, AbstractPortFactory } from "storm-react-diagrams";
-
-export class SimplePortFactory extends AbstractPortFactory {
-	cb: (initialConfig?: any) => PortModel;
-
-	constructor(type: string, cb: (initialConfig?: any) => PortModel) {
-		super(type);
-		this.cb = cb;
-	}
-
-	getNewInstance(initialConfig?: any): PortModel {
-		return this.cb(initialConfig);
-	}
-}

demos/demo-custom-node1/index.tsx

@@ -1,57 +0,0 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "storm-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";
-
-/**
- * @Author Dylan Vorster
- */
-export default () => {
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	// register some other factories as well
-	engine.registerPortFactory(new SimplePortFactory("diamond", config => new DiamondPortModel()));
-	engine.registerNodeFactory(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, 150);
-
-	//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, 150);
-
-	//3-C) link the 2 nodes together
-	var link1 = port1.link(node2.getPort("left"));
-	var link2 = port3.link(node2.getPort("right"));
-
-	//4) add the models to the root graph
-	model.addAll(node1, node2, node3, link1, link2);
-
-	//5) load model into engine
-	engine.setModel(model);
-
-	//6) render the diagram!
-	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
-};

demos/demo-dagre/dagre-utils.ts

@@ -1,56 +0,0 @@
-import * as dagre from "dagre";
-import * as _ from "lodash";
-
-const size = {
-	width: 60,
-	height: 60
-};
-
-export function distributeElements(model) {
-	let clonedModel = _.cloneDeep(model);
-	let nodes = distributeGraph(clonedModel);
-	nodes.forEach(node => {
-		let modelNode = clonedModel.nodes.find(item => item.id === node.id);
-		modelNode.x = node.x;
-		modelNode.y = node.y;
-	});
-	return clonedModel;
-}
-
-function distributeGraph(model) {
-	let nodes = mapElements(model);
-	let edges = mapEdges(model);
-	let graph = new dagre.graphlib.Graph();
-	graph.setGraph({});
-	graph.setDefaultEdgeLabel(() => ({}));
-	//add elements to dagre graph
-	nodes.forEach(node => {
-		graph.setNode(node.id, node.metadata);
-	});
-	edges.forEach(edge => {
-		if (edge.from && edge.to) {
-			graph.setEdge(edge.from, edge.to);
-		}
-	});
-	//auto-distribute
-	dagre.layout(graph);
-	return graph.nodes().map(node => graph.node(node));
-}
-
-function mapElements(model) {
-	// dagre compatible format
-	return model.nodes.map(node => ({ id: node.id, metadata: { ...size, id: node.id } }));
-}
-
-function mapEdges(model) {
-	// returns links which connects nodes
-	// we check are there both from and to nodes in the model. Sometimes links can be detached
-	return model.links
-		.map(link => ({
-			from: link.source,
-			to: link.target
-		}))
-		.filter(
-			item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
-		);
-}

demos/demo-dagre/index.tsx

@@ -1,120 +0,0 @@
-import {
-	DiagramEngine,
-	DefaultNodeFactory,
-	DefaultLinkFactory,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "storm-react-diagrams";
-import { distributeElements } from "./dagre-utils";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
-
-function createNode(name) {
-	return new DefaultNodeModel(name, "rgb(0,192,255)");
-}
-
-let count = 0;
-
-function connectNodes(nodeFrom, nodeTo) {
-	//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);
-}
-
-/**
- * Tests auto distribution
- */
-class Demo8Widget extends React.Component<any, any> {
-	constructor(props) {
-		super(props);
-		this.state = {};
-		this.autoDistribute = this.autoDistribute.bind(this);
-	}
-
-	autoDistribute() {
-		const { engine } = this.props;
-		const model = engine.getDiagramModel();
-		let distributedModel = getDistributedModel(engine, model);
-		engine.setModel(distributedModel);
-		this.forceUpdate();
-	}
-
-	render() {
-		const { engine } = this.props;
-
-		return (
-			<DemoWorkspaceWidget buttons={<button onClick={this.autoDistribute}>Re-distribute</button>}>
-				<DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />
-			</DemoWorkspaceWidget>
-		);
-	}
-}
-
-function getDistributedModel(engine, model) {
-	const serialized = model.serializeDiagram();
-	const distributedSerializedDiagram = distributeElements(serialized);
-
-	//deserialize the model
-	let deSerializedModel = new DiagramModel();
-	deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
-	return deSerializedModel;
-}
-
-export default () => {
-	//1) setup the diagram engine
-	let engine = new DiagramEngine();
-	engine.installDefaults();
-
-	//2) setup the diagram model
-	let model = new DiagramModel();
-
-	//3) create a default nodes
-	let nodesFrom = [];
-	let nodesTo = [];
-
-	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]);
-	});
-
-	// more links for more complicated diagram
-	links.push(connectNodes(nodesFrom[0], nodesTo[1]));
-	links.push(connectNodes(nodesTo[0], nodesFrom[1]));
-	links.push(connectNodes(nodesFrom[1], nodesTo[2]));
-
-	// initial random position
-	nodesFrom.forEach((node, index) => {
-		node.x = index * 70;
-		model.addNode(node);
-	});
-
-	nodesTo.forEach((node, index) => {
-		node.x = index * 70;
-		node.y = 100;
-		model.addNode(node);
-	});
-
-	links.forEach(link => {
-		model.addLink(link);
-	});
-
-	//5) load model into engine
-	let model2 = getDistributedModel(engine, model);
-
-	engine.setModel(model2);
-
-	return <Demo8Widget engine={engine} />;
-};

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

@@ -1,72 +0,0 @@
-import * as React from "react";
-import * as _ from "lodash";
-import { TrayWidget } from "./TrayWidget";
-import { Application } from "../Application";
-import { TrayItemWidget } from "./TrayItemWidget";
-import { DefaultNodeModel, DiagramWidget } from "storm-react-diagrams";
-
-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.addInPort("In");
-							} else {
-								node = new DefaultNodeModel("Node " + (nodesCount + 1), "rgb(0,192,255)");
-								node.addOutPort("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 className="srd-demo-canvas" diagramEngine={this.props.app.getDiagramEngine()} />
-					</div>
-				</div>
-			</div>
-		);
-	}
-}

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

@@ -1,31 +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/demo-drag-and-drop/components/TrayWidget.tsx

@@ -1,21 +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/demo-drag-and-drop/index.tsx

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

demos/demo-drag-and-drop/sass/main.scss

@@ -1,47 +0,0 @@
-.body{
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-
-  .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;
-      }
-    }
-  }
-}

demos/demo-grid/index.tsx

@@ -1,37 +0,0 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
-import * as React from "react";
-
-/**
- * Tests the grid size
- */
-export default () => {
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	//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 <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
-};

demos/demo-labelled-links/index.tsx

@@ -1,73 +0,0 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget,
-	DefaultLinkModel
-} from "storm-react-diagrams";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
-import { action } from "@storybook/addon-actions";
-
-export default () => {
-	// setup the diagram engine
-	const engine = new DiagramEngine();
-	engine.installDefaults();
-
-	// 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.setTargetPort(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={
-				<button
-					onClick={() => {
-						action("Serialized Graph")(JSON.stringify(model.serializeDiagram(), null, 2));
-					}}
-				>
-					Serialize Graph
-				</button>
-			}
-		>
-			<DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />
-		</DemoWorkspaceWidget>
-	);
-};

demos/demo-limit-points/index.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget,
-	DiagramProps
-} from "storm-react-diagrams";
-
-/**
- * Shows that a limit of points can be set for links
- */
-export default () => {
-	// setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	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);
-
-	model.addAll(node1, node2, link1);
-
-	engine.setModel(model);
-
-	var props = {
-		diagramEngine: engine,
-		maxNumberPointsPerLink: 5
-	} as DiagramProps;
-
-	return (
-		<div>
-			<p>A maximum of 5 points can be created per link.</p>
-			<DiagramWidget className="srd-demo-canvas" {...props} />
-		</div>
-	);
-};

demos/demo-listeners/index.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import { action } from "@storybook/addon-actions";
-import {
-	DiagramEngine,
-	DiagramModel,
-	DiagramProps,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "storm-react-diagrams";
-
-/**
- * Shows some of the events triggered when elements are selected
- */
-export default () => {
-	// setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	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.addListener({
-			selectionChanged: action("selectionChanged")
-		});
-	});
-
-	engine.setModel(model);
-
-	var props = {
-		diagramEngine: engine,
-		maxNumberPointsPerLink: 0 // no extra points so link selection is fired straight away
-	} as DiagramProps;
-
-	return (
-		<div>
-			<p>Click the diagram elements to inspect some of the possible events.</p>
-			<DiagramWidget className="srd-demo-canvas" {...props} />
-		</div>
-	);
-};

demos/demo-locks/index.tsx

@@ -1,69 +0,0 @@
-import * as React from "react";
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	PointModel,
-	DiagramWidget,
-	DiagramProps
-} from "storm-react-diagrams";
-
-/**
- *
- * 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.installDefaults();
-
-	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);
-	var props = {
-		diagramEngine: engine,
-		allowLooseLinks: false,
-		allowCanvasTranslation: false,
-		allowCanvasZoom: false
-	} as DiagramProps;
-
-	//!=========================================  <<<<<<<
-
-	return <DiagramWidget className="srd-demo-canvas" {...props} />;
-};

demos/demo-serializing/index.tsx

@@ -1,60 +0,0 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel } from "storm-react-diagrams";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
-import { action } from "@storybook/addon-actions";
-import * as beautify from "json-beautify";
-import {DeserializeEvent} from "../../../react-canvas/src/models/BaseModel";
-
-export default () => {
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	//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);
-
-	//!------------- SERIALIZING ------------------
-
-	var str = JSON.stringify(model.serialize());
-
-	//!------------- DESERIALIZING ----------------
-
-	var model2 = new DiagramModel();
-	model2.deSerialize(new DeserializeEvent(JSON.parse(str), engine));
-	engine.setModel(model2);
-
-	return (
-		<DemoWorkspaceWidget
-			buttons={
-				<button
-					onClick={() => {
-						action("Serialized Graph")(beautify(model2.serializeDiagram(), null, 2, 80));
-					}}
-				>
-					Serialize Graph
-				</button>
-			}
-		>
-			<DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />
-		</DemoWorkspaceWidget>
-	);
-};

demos/demo-simple-flow/index.tsx

@@ -1,38 +0,0 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
-import * as React from "react";
-
-export default () => {
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	//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 <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} allowLooseLinks={false} />;
-};

demos/demo-simple/docs.md

@@ -1,9 +0,0 @@
-# Simple Usage
-
-Welcome to STORM React Diagrams (SRD). SRD is a no-nonsense easy to use library for creating
-flow diagrams in the web that can ultimately represent any type of process/network/graph etc..
-
-<!-- STORY -->
-
-Try moving around one of the nodes or clicking and dragging the links to create new link anchors (points).
-You can also zoom the canvas using the mouse wheel / scroll gesture and drag to select multiple entities on the graph by shift + dragging the mouse.

demos/demo-simple/index.tsx

@@ -1,41 +0,0 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget,
-	DefaultLinkModel
-} from "storm-react-diagrams";
-import * as React from "react";
-
-export default () => {
-	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-
-	//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 port1 = 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 = port1.link(port2);
-	(link1 as DefaultLinkModel).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 <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
-};

demos/demo-smart-routing/index.tsx

@@ -1,68 +0,0 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "storm-react-diagrams";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
-import { action } from "@storybook/addon-actions";
-
-export default () => {
-	// setup the diagram engine
-	const engine = new DiagramEngine();
-	engine.installDefaults();
-
-	// 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);
-
-	// 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, node5, link1, link2);
-
-	// load model into engine and render
-	engine.setModel(model);
-
-	return (
-		<DemoWorkspaceWidget
-			buttons={
-				<button
-					onClick={() => {
-						action("Serialized Graph")(JSON.stringify(model.serializeDiagram(), null, 2));
-					}}
-				>
-					Serialize Graph
-				</button>
-			}
-		>
-			<DiagramWidget
-				className="srd-demo-canvas"
-				diagramEngine={engine}
-				smartRouting={true}
-				maxNumberPointsPerLink={0}
-			/>
-		</DemoWorkspaceWidget>
-	);
-};

demos/index.tsx

@@ -1,129 +0,0 @@
-import * as React from "react";
-import { storiesOf, addDecorator } from "@storybook/react";
-import { setOptions } from "@storybook/addon-options";
-import { host } from "storybook-host";
-import { Helper } from "./.helpers/Helper";
-import { Toolkit } from "../src/Toolkit";
-
-//include the SCSS for the demo
-import "./.helpers/demo.scss";
-
-Toolkit.TESTING = true;
-
-addDecorator(
-	host({
-		cropMarks: false,
-		height: "100%",
-		width: "100%",
-		padding: 20
-	})
-);
-
-setOptions({
-	name: "STORM React Diagrams",
-	url: "https://github.com/projectstorm/react-diagrams",
-	addonPanelInRight: true
-});
-
-storiesOf("Simple Usage", module)
-	.add(
-		"Simple example",
-		Helper.makeDemo(
-			require("./demo-simple/index").default(),
-			require("!!raw-loader!./demo-simple/index"),
-			require("./demo-simple/docs.md")
-		)
-	)
-// 	.add(
-// 		"Simple flow example",
-// 		Helper.makeDemo(require("./demo-simple-flow/index").default(), require("!!raw-loader!./demo-simple-flow/index"))
-// 	)
-// 	.add(
-// 		"Performance demo",
-// 		Helper.makeDemo(require("./demo-performance/index").default(), require("!!raw-loader!./demo-performance/index"))
-// 	)
-// 	.add(
-// 		"Locked widget",
-// 		Helper.makeDemo(require("./demo-locks/index").default(), require("!!raw-loader!./demo-locks/index"))
-// 	)
-// 	.add(
-// 		"Canvas grid size",
-// 		Helper.makeDemo(require("./demo-grid/index").default(), require("!!raw-loader!./demo-grid/index"))
-// 	)
-// 	.add(
-// 		"Limiting link points",
-// 		Helper.makeDemo(
-// 			require("./demo-limit-points/index").default(),
-// 			require("!!raw-loader!./demo-limit-points/index")
-// 		)
-// 	)
-// 	.add(
-// 		"Events and listeners",
-// 		Helper.makeDemo(require("./demo-listeners/index").default(), require("!!raw-loader!./demo-listeners/index"))
-// 	)
-// 	.add(
-// 		"Zoom to fit",
-// 		Helper.makeDemo(require("./demo-zoom-to-fit/index").default(), require("!!raw-loader!./demo-zoom-to-fit/index"))
-// 	)
-// 	.add(
-// 		"Links with labels",
-// 		Helper.makeDemo(
-// 			require("./demo-labelled-links/index").default(),
-// 			require("!!raw-loader!./demo-labelled-links/index")
-// 		)
-// 	);
-//
-// storiesOf("Advanced Techniques", module)
-// 	.add(
-// 		"Clone Selected",
-// 		Helper.makeDemo(require("./demo-cloning/index").default(), require("!!raw-loader!./demo-cloning/index"))
-// 	)
-// 	.add(
-// 		"Serializing and de-serializing",
-// 		Helper.makeDemo(require("./demo-serializing/index").default(), require("!!raw-loader!./demo-serializing/index"))
-// 	)
-// 	.add(
-// 		"Programatically modifying graph",
-// 		Helper.makeDemo(
-// 			require("./demo-mutate-graph/index").default(),
-// 			require("!!raw-loader!./demo-mutate-graph/index")
-// 		)
-// 	)
-// 	.add(
-// 		"Large application",
-// 		Helper.makeDemo(
-// 			require("./demo-drag-and-drop/index").default(),
-// 			require("!!raw-loader!./demo-drag-and-drop/components/BodyWidget")
-// 		)
-// 	)
-// 	.add(
-// 		"Smart routing",
-// 		Helper.makeDemo(
-// 			require("./demo-smart-routing/index").default(),
-// 			require("!!raw-loader!./demo-smart-routing/index")
-// 		)
-// 	);
-//
-// storiesOf("Custom Models", module)
-// 	.add(
-// 		"Custom diamond node",
-// 		Helper.makeDemo(
-// 			require("./demo-custom-node1/index").default(),
-// 			require("!!raw-loader!./demo-custom-node1/index")
-// 		)
-// 	)
-// 	.add(
-// 		"Custom animated links",
-// 		Helper.makeDemo(
-// 			require("./demo-custom-link1/index").default(),
-// 			require("!!raw-loader!./demo-custom-link1/index")
-// 		)
-// 	);
-//
-// storiesOf("3rd party libraries", module).add(
-// 	"Auto Distribute (Dagre)",
-// 	Helper.makeDemo(require("./demo-dagre/index").default(), require("!!raw-loader!./demo-dagre/index"))
-// );
-
-// enable this to log mouse location when writing new puppeteer tests
-//Helper.logMousePosition()

demos/tslint.json

@@ -1,10 +0,0 @@
-{
-	"extends": [
-		"../tslint.json"
-	],
-	"rules": {
-		"no-console": false,
-		"max-classes-per-file": false,
-		"no-var-requires": false
-	}
-}

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

@@ -0,0 +1,6 @@
+module.exports = {
+	stories: ['../demos/*.stories.tsx'],
+	core: {
+		builder: "webpack5",
+	},
+};

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

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

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/demos/1_SimpleUsage.stories.tsx

@@ -0,0 +1,30 @@
+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_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 ZoomToFitNodes = demo_zoom_nodes;
+export const CanvasDrag = demo_canvas_drag;
+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,59 @@
+import { MouseEvent } 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);
+					}
+				}
+			})
+		);
+
+		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,71 @@
+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

@@ -1,15 +1,9 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	NodeModel,
-	DiagramWidget,
-	BaseModel
-} from "storm-react-diagrams";
-import * as _ from "lodash";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
+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
@@ -23,24 +17,24 @@ class CloneSelected extends React.Component<any, any> {
 	cloneSelected() {
 		let { engine } = this.props;
 		let offset = { x: 100, y: 100 };
-		let model = engine.getDiagramModel();
+		let model = engine.getModel();
 
 		let itemMap = {};
-		_.forEach(model.getSelectedItems(), (item: BaseModel<any>) => {
+		_.forEach(model.getSelectedEntities(), (item: BaseModel<any>) => {
 			let newItem = item.clone(itemMap);
 
 			// offset the nodes slightly
 			if (newItem instanceof NodeModel) {
-				newItem.setPosition(newItem.x + offset.x, newItem.y + offset.y);
+				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.updateLocation({ x: p.getX() + offset.x, y: p.getY() + offset.y });
+				newItem.getPoints().forEach((p) => {
+					p.setPosition(p.getX() + offset.x, p.getY() + offset.y);
 				});
 				model.addLink(newItem);
 			}
-			newItem.selected = false;
+			(newItem as BaseModel).setSelected(false);
 		});
 
 		this.forceUpdate();
@@ -49,8 +43,10 @@ class CloneSelected extends React.Component<any, any> {
 	render() {
 		const { engine } = this.props;
 		return (
-			<DemoWorkspaceWidget buttons={<button onClick={this.cloneSelected}>Clone Selected</button>}>
-				<DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />
+			<DemoWorkspaceWidget buttons={<DemoButton onClick={this.cloneSelected}>Clone Selected</DemoButton>}>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
 			</DemoWorkspaceWidget>
 		);
 	}
@@ -58,20 +54,19 @@ class CloneSelected extends React.Component<any, any> {
 
 export default () => {
 	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
+	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");
+	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");
+	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	let port2 = node2.addInPort('In');
 	node2.setPosition(400, 100);
 
 	// link the ports

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

@@ -1,23 +1,20 @@
-import {
-	DiagramEngine,
+import createEngine, {
 	DiagramModel,
 	DefaultNodeModel,
-	LinkModel,
 	DefaultPortModel,
-	DiagramWidget,
-	LinkWidget,
-	LinkProps,
-	DefaultLinkWidget,
-	DefaultLinkModel,
-	DefaultLinkFactory
-} from "storm-react-diagrams";
-import { action } from "@storybook/addon-actions";
-import * as React from "react";
+	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("advanced");
-		this.width = 10;
+		super({
+			type: 'advanced',
+			width: 10
+		});
 	}
 }
 
@@ -54,8 +51,8 @@ export class AdvancedLinkSegment extends React.Component<{ model: AdvancedLinkMo
 
 			let point = this.path.getPointAtLength(this.path.getTotalLength() * (this.percent / 100.0));
 
-			this.circle.setAttribute("cx", "" + point.x);
-			this.circle.setAttribute("cy", "" + point.y);
+			this.circle.setAttribute('cx', '' + point.x);
+			this.circle.setAttribute('cy', '' + point.y);
 
 			if (this.mounted) {
 				requestAnimationFrame(this.callback);
@@ -72,15 +69,16 @@ export class AdvancedLinkSegment extends React.Component<{ model: AdvancedLinkMo
 		return (
 			<>
 				<path
-					ref={ref => {
+					fill="none"
+					ref={(ref) => {
 						this.path = ref;
 					}}
-					strokeWidth={this.props.model.width}
+					strokeWidth={this.props.model.getOptions().width}
 					stroke="rgba(255,0,0,0.5)"
 					d={this.props.path}
 				/>
 				<circle
-					ref={ref => {
+					ref={(ref) => {
 						this.circle = ref;
 					}}
 					r={10}
@@ -93,15 +91,14 @@ export class AdvancedLinkSegment extends React.Component<{ model: AdvancedLinkMo
 
 export class AdvancedLinkFactory extends DefaultLinkFactory {
 	constructor() {
-		super();
-		this.type = "advanced";
+		super('advanced');
 	}
 
-	getNewInstance(initialConfig?: any): AdvancedLinkModel {
+	generateModel(): AdvancedLinkModel {
 		return new AdvancedLinkModel();
 	}
 
-	generateLinkSegment(model: AdvancedLinkModel, widget: DefaultLinkWidget, selected: boolean, path: string) {
+	generateLinkSegment(model: AdvancedLinkModel, selected: boolean, path: string) {
 		return (
 			<g>
 				<AdvancedLinkSegment model={model} path={path} />
@@ -117,29 +114,28 @@ export class AdvancedLinkFactory extends DefaultLinkFactory {
  */
 export default () => {
 	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
-	engine.registerLinkFactory(new AdvancedLinkFactory());
+	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"));
+	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"));
+	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"));
+	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"));
+	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();
@@ -153,5 +149,9 @@ export default () => {
 	engine.setModel(model);
 
 	// render the diagram!
-	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
+	return (
+		<DemoCanvasWidget>
+			<CanvasWidget engine={engine} />
+		</DemoCanvasWidget>
+	);
 };

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

@@ -0,0 +1,172 @@
+import createEngine, {
+	DiagramModel,
+	DefaultNodeModel,
+	DefaultPortModel,
+	DefaultLinkFactory,
+	DefaultLinkPointWidget,
+	DefaultLinkModel,
+	DefaultLinkWidget
+} from '@projectstorm/react-diagrams';
+import { DiagramEngine, LinkWidget, PointModel } from '@projectstorm/react-diagrams-core';
+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: 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}
+						onMouseLeave={() => {
+							this.setState({ selected: false });
+						}}
+						onMouseEnter={() => {
+							this.setState({ selected: true });
+						}}
+						data-id={point.getID()}
+						data-linkid={point.getLink().getID()}></polygon>
+				</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,111 @@
+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,131 @@
+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
+		});
+	}
+
+	autoDistribute = () => {
+		this.engine.redistribute(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={<DemoButton onClick={this.autoDistribute}>Re-distribute</DemoButton>}>
+				<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(nodesFrom[0], nodesTo[1], engine));
+	links.push(connectNodes(nodesTo[0], nodesFrom[1], engine));
+	links.push(connectNodes(nodesFrom[1], 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

@@ -1,4 +1,4 @@
-import * as SRD from "storm-react-diagrams";
+import * as SRD from '@projectstorm/react-diagrams';
 
 /**
  * @author Dylan Vorster
@@ -8,9 +8,7 @@ export class Application {
 	protected diagramEngine: SRD.DiagramEngine;
 
 	constructor() {
-		this.diagramEngine = new SRD.DiagramEngine();
-		this.diagramEngine.installDefaults();
-
+		this.diagramEngine = SRD.default();
 		this.newModel();
 	}
 
@@ -19,13 +17,13 @@ export class Application {
 		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");
+		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");
+		var node2 = new SRD.DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+		let port2 = node2.addInPort('In');
 		node2.setPosition(400, 100);
 
 		// link the ports

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

@@ -0,0 +1,86 @@
+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,37 @@
+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,65 @@
+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

@@ -1,6 +1,9 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
+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
@@ -14,25 +17,25 @@ class NodeDelayedPosition extends React.Component<any, any> {
 
 	updatePosition() {
 		const { engine } = this.props;
-		let model = engine.getDiagramModel();
+		let model = engine.getModel();
 		const nodes = model.getNodes();
 		let node = nodes[Object.keys(nodes)[0]];
-		node.setPosition(node.x + 30, node.y + 30);
-		this.forceUpdate();
+		node.setPosition(node.getX() + 30, node.getY() + 30);
+		engine.repaintCanvas();
 	}
 
 	updatePositionViaSerialize() {
 		let { engine } = this.props;
-		let model = engine.getDiagramModel();
-		let str = JSON.stringify(model.serializeDiagram());
+		let model = engine.getModel();
+		let str = JSON.stringify(model.serialize());
 		let model2 = new DiagramModel();
-		let obj = JSON.parse(str);
-		let node = obj.nodes[0];
+		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.deSerializeDiagram(obj, engine);
+
+		model2.deserializeModel(obj, engine);
 		engine.setModel(model2);
-		this.forceUpdate();
 	}
 
 	render() {
@@ -40,15 +43,16 @@ class NodeDelayedPosition extends React.Component<any, any> {
 		return (
 			<DemoWorkspaceWidget
 				buttons={[
-					<button key={1} onClick={this.updatePosition}>
+					<DemoButton key={1} onClick={this.updatePosition}>
 						Update position
-					</button>,
-					<button key={2} onClick={this.updatePositionViaSerialize}>
+					</DemoButton>,
+					<DemoButton key={2} onClick={this.updatePositionViaSerialize}>
 						Update position via serialize
-					</button>
-				]}
-			>
-				<DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />
+					</DemoButton>
+				]}>
+				<DemoCanvasWidget>
+					<CanvasWidget engine={engine} />
+				</DemoCanvasWidget>
 			</DemoWorkspaceWidget>
 		);
 	}
@@ -56,20 +60,19 @@ class NodeDelayedPosition extends React.Component<any, any> {
 
 export default () => {
 	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
+	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");
+	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");
+	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

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

@@ -1,5 +1,7 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
-import * as React from "react";
+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';
 
 /**
  *
@@ -10,8 +12,7 @@ import * as React from "react";
  */
 export default () => {
 	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
+	var engine = createEngine();
 
 	//2) setup the diagram model
 	var model = new DiagramModel();
@@ -26,18 +27,22 @@ export default () => {
 	engine.setModel(model);
 
 	//6) render the diagram!
-	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
+	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");
+	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");
+	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

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

@@ -0,0 +1,70 @@
+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,60 @@
+import createEngine, { DiagramModel, DefaultNodeModel } 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);
+
+	//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,72 @@
+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,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.zoomToFitNodes(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

@@ -1,13 +1,8 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DefaultPortModel,
-	DiagramWidget
-} from "storm-react-diagrams";
-import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
+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';
 
 /**
  *
@@ -17,8 +12,7 @@ import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
  */
 export default () => {
 	//1) setup the diagram engine
-	var engine = new DiagramEngine();
-	engine.installDefaults();
+	var engine = createEngine();
 
 	//2) setup the diagram model
 	var model = new DiagramModel();
@@ -34,23 +28,23 @@ export default () => {
 
 	//6) render the diagram!
 	return (
-		<DemoWorkspaceWidget
-			buttons={<button onClick={() => engine.getCanvasWidget().zoomToFit()}>Zoom to fit</button>}
-		>
-			<DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />
+		<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");
+	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");
+	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

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

@@ -0,0 +1,65 @@
+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<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<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,
+#root {
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}