resus-diagrams

A super simple, no-nonsense diagramming library written in React that just works. It is storm-react-diagrams fork version for Resus-ide.

Usage no npm install needed!

<script type="module">
  import resusDiagrams from 'https://cdn.skypack.dev/resus-diagrams';
</script>

README

Resus - Diagrams Core

A super simple, no-nonsense diagramming library written in React that just works. It is storm-react-diagrams fork version for Resus-ide.

Introduction

A no-nonsense diagramming library written entirely in React with the help of Lodash, and a single polyfill. 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

Roadmap

  • Move path logic associated with links into a base link class so we can easily extend links
  • Add more fault tolerance

How to install

npm install resus-diagrams

or

yarn add resus-diagrams

Make your own nodes

To see how to create your own nodes like the one below, take a look at demo3:

How does it work

The library uses a Model Graph to represent the virtual diagram and then renders the diagram using 2 layers:

  • Node Layer -> which is responsible for rendering nodes as HTML components
  • Link Layer -> which renders the links as SVG paths

Each node and link is fed into a factory that then generates the corresponding node or link react widget. Therefore, to create custom nodes and links, register your own factories that return your own widgets.

As long as a node contains at least one port and the corresponding NodeWidget contains at least one PortWidget, a link can be connected to it.

Usage

Delete removes any selected items ![Delete]

Shift + Mouse Drag triggers a multi-selection box ![Shift + Mouse Drag]

Shift + Mouse Click selects the item (items can be multi-selected) ![Shift + Mouse Click]

Mouse Drag drags the entire diagram ![Mouse Drag]

Mouse Wheel zooms the diagram in / out ![Mouse Wheel]

Click Link + Drag creates a new link point ![Click Link + Drag]

Click Node Port + Drag creates a new link ![Click Node Port + Drag]

What's new

2021-05

  • node model에 onclick event param 추가
  • canvas에 onclick event 추가
  • node 앞부분에 break point div 추가, defaultnode model에 break point onclick event param 추가
  • node div classname에 isbreakpoint로 break-point boolean 추가
  • 전체 canvas에 break-points disabled boolean 추가
  • node model에 onwheel event param 추가
  • diagram node delete function disabled