resus-diagrams
v1.1.1
Published
A super simple, no-nonsense diagramming library written in React that just works. It is storm-react-diagrams fork version for Resus-ide.
Downloads
4
Maintainers
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