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