@abusix/storm-react-diagrams 中文文档教程
STORM React Diagrams
DEMO：http://www.projectstorm.io/react-diagrams
最新版本说明：http://dylanv.blog/2018/01/18/storm-react -diagrams-v4-0-0/
一个超级简单、严肃的图表库，用 React 编写，可以正常工作。
Introduction
一个在 Lodash 和单个 polyfill 的帮助下完全用 React 编写的严肃图表库。 它的目标是：
- 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
Developer Usage
npm install storm-react-diagrams 或 yarn add storm-react-diagrams
How to run demos
在运行 yarn install 之后，您必须运行： yarn run storybook
How to build
只需在根目录中运行 webpack（或者 export NODE_ENV=production && webpack 如果您想要生产构建）和它会将转换后的代码和打字稿定义作为单个文件吐出到 dist 目录中。 它还会编译演示的代码。我们为此使用 webpack，因为 TSC 无法编译单个 UMD 文件（TSC 目前只能输出多个 UMD 文件）。
注意：我们在生产构建中关闭名称修改，因为我们要求类名在序列化时保持完整。
Make your own nodes
要了解如何创建您自己的节点，如下所示，请查看 demo3：
How does it work
该库使用模型图形来表示虚拟图，然后使用呈现图 2 层：
- Node Layer -> which is responsible for rendering nodes as HTML components
- Link Layer -> which renders the links as SVG paths
每个节点和链接都被送入工厂，然后工厂生成相应的节点或链接反应小部件。 因此，要创建自定义节点和链接，请注册您自己的工厂以返回您自己的小部件。
只要一个节点至少包含一个端口，对应的NodeWidget至少包含一个PortWidget， 一个链接可以连接到它。
Questions
User Usage
Delete 删除所有选定的项目 
Shift +鼠标拖动触发多选框 
Shift + Mouse Click 选择项目（项目可以多选） 
Mouse Drag 拖动整个图表 
鼠标滚轮 放大/缩小图表 
点击链接+拖动创建一个新的链接点 
Click Node Port + Drag 创建一个新链接 
STORM React Diagrams
DEMO: http://www.projectstorm.io/react-diagrams
Latest Release Notes: http://dylanv.blog/2018/01/18/storm-react-diagrams-v4-0-0/
A super simple, no-nonsense diagramming library written in React that just works.
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
Developer Usage
npm install storm-react-diagrams or yarn add storm-react-diagrams
How to run demos
After running yarn install you must then run: yarn run storybook
How to build
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. It will also compile the code for the demos .We use webpack for this because TSC cannot compile a single UMD file (TSC can currently only output multiple UMD files).
NOTE: We turn off name mangeling in production builds because we require class names to be left intact when serializing.
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.
Questions
User Usage
Delete removes any selected items
Shift + Mouse Drag triggers a multi-selection box
Shift + Mouse Click selects the item (items can be multi-selected)
Mouse Drag drags the entire diagram
Mouse Wheel zooms the diagram in / out
Click Link + Drag creates a new link point
Click Node Port + Drag creates a new link
