STORM React Diagrams

PSA 2018: React Diagrams ~is currently~ was 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.

PSA 2019: I still want to jump onto the rewrite, but it is a much larger project than anticipated, so going to try maintain this one in the mean time.

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

(SOME) DOCS: https://projectstorm.gitbooks.io/react-diagrams

RELEASE NOTES : http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/

A super simple, no-nonsense diagramming library written in React that just works.

Example implementation using custom models: Get started with the default models right out of the box:

Introduction

A no-nonsense diagramming library written entirely in React with the help of a few small libraries. It aims to be:

• 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

Installing

yarn add @projectstorm/react-diagrams

Run the demos

After running yarn install you must then run: yarn run storybook

Building from source

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

Checkout the docs

Engine settings

// Board related settings
board: {
  /*
   * Define board type
   * - movable: absolute positioning
   * - scrollable: using scrollbars
   * type: "movable" | "scrollable";
   * default: "movable"
   */
  type: 'scrollable',
},
// Zoom related settings
zoom: {
  /*
   * Keep/Adjust diagram position when zooming
   * type: boolean;
   * default: true
   */
  // center: true,
  // Zoom when scrolling related settings
  onScroll: {
    /*
     * Enable zooming using mouse scroll
     * type: boolean;
     * default: true
     */
    // enabled: true,
    /*
     * Inverse in/out zooming based on scrolling direction
     * type: boolean;
     * default: false
     */
    // inverse: false,
    /*
     * Use ctrl key to zoom
     * type: boolean;
     * default: true
     */
    // withCtrlKey: true,
    /*
     * Zoom delta
     * type: number;
     * default: 10
     */
    // delta: 10,
    /*
     * Center on mouse position
     * type: number;
     * default: true
     */
    // centerOnMouse: true
  },
  /*
   * Min zoom level
   * type: number
   * default: 10
   */
  // min: 10,
  /*
   * Max zoom level
   * type: number
   * default: 200
   */
  max: 100,
},
// Zoom to fit related settings
zoomToFit: {
  /*
   * Place nodes in the diagram center
   * type: boolean
   * default: false
   */
  // centerNodes: false
  /*
   * Calculate diagram dimensions with padding
   * type: number
   * default: 0
   */
  padding: 60,
  /*
   * Zoom to fit initially
   * type: boolean
   * default: false
   */
  // onStart: false,
},
// Auto distribute related settings
autoDistribute: {
  /*
   * Distance between nodes
   * type: number
   * default: 50
   */
  // padding: 50,
  // Distance from top left corner
  offset: {
    /*
     * Distance from top edge
     * type: number
     * default: 0
     */
    top: 60,
    /*
     * Distance from left edge
     * type: number
     * default: 0
     */
    left: 60,
  },
  /*
   * Callback to adjust default behaviour
   * type: Function
   * default: (distributedNodes) => {}
   */
  // renderer: () => {};
},