Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@projectstorm/react-canvas-core

projectstorm79.6kMIT7.0.3TypeScript support: included

null

web, diagram, diagrams, react, typescript, flowchart, simple, links, nodes

readme

Introduction

Join the chat at https://gitter.im/projectstorm/react-diagrams NPM Package Quality

DEMO: http://projectstorm.cloud/react-diagrams

DOCS (wip) https://projectstorm.gitbook.io/react-diagrams

Docs are currently being worked on, along with a migration path.

What

A flow & process orientated diagramming library inspired by Blender, Labview and Unreal engine.

  • 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.

Example implementation using custom models: (Dylan's personal code)

Personal Project

Get started with the default models right out of the box:

Installing

For all the bells and whistles:

yarn add @projectstorm/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)

yarn add @projectstorm/react-diagrams-core

this is built ontop of the evolving react-canvas-core library

yarn add @projectstorm/react-canvas-core

which makes use of

yarn add @projectstorm/geometry

and of course, you can add some extras:

yarn add @projectstorm/react-diagrams-defaults
yarn add @projectstorm/react-diagrams-routing

How to use

Before running any of the examples, please run pnpm build in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.

Take a look at the diagram demos

or

Take a look at the demo project which contains an example for ES6 as well as Typescript

or

Checkout the docs

Run the demos

After running pnpm install and pnpm build, you must then run: cd diagrams-demo-gallery && pnpm run start

Building from source

Simply run pnpm then pnpm build or pnpm build:prod in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.

Built with react-diagrams

Do you have an interesting project built with react-diagrams? PR it into this section for others to see.

changelog

V7!

we are now using changesets! you can see the changes for individual packages in their corresponding folders. Here is the main changeset for the core package which depends on everything:

Changelog for @projectstorm/react-diagrams

6.7.4

.0 -> .4 because I messed up the version / publishing

6.7.0

bug fixes:

types

features:

6.6.1

bug fixes:

Some maintenance:

6.6.0

Also includes a bump on all packages using ncu recursively.

6.5.2

https://github.com/projectstorm/react-diagrams/pull/830

  • (fix) issue with zoom to fit selected
  • (improvement) properly export PathFinding
  • (maintenance) bump all dependencies

6.5.1

https://github.com/projectstorm/react-diagrams/pull/829

  • (improved) zoom to fit now centers correctly
  • (fix) remove wrong peer dependency (@emotion/core)

6.5.0

https://github.com/projectstorm/react-diagrams/pull/814

  • Some rendering fixes
  • small api change around zoomToFit
  • more api options with the DefaultLink

6.4.0

https://github.com/projectstorm/react-diagrams/pull/813

  • Bump all packages and move to Emotion 11 and React 17
  • Move to the latest Storybook

6.2.0

6.1.1

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

5.2.1

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!

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

3.2.0 http://dylanv.blog/2017/11/22/storm-react-diagrams-3-2-0/

  • (feature) zoom to fit
  • added Circle CI tests
  • (demo) dagre automatic layouts
  • (demo) zoom to fit
  • (demo) selection events
  • (demo) limit number of points
  • (demo) programmatic node updating
  • updated dependencies
  • (bugs) swapping diagram models in engines
  • (bugs) issues with the rendering pipeline #107
  • added ci badge to Readme

3.1.3

  • Refactor links slightly
  • use min extension for css
  • bump package versions
  • export more classes

3.1.2

3.1.0 http://dylanv.blog/2017/09/15/storm-react-diagrams-3-1-0/

  • Zoom relative to mouse location
  • Fixed links not connecting when grid is larger than port size
  • Prevented points from dragging when connected to a port and the node itself is not selected
  • API fixes
  • Code cleanup

3.0.0 http://dylanv.blog/2017/09/13/storm-react-diagrams-v3/

  • Massive performance updates
  • Complete rewrite
  • Started a changelog and design documents for each revision