mirror of
https://github.com/projectstorm/react-diagrams.git
synced 2025-08-14 16:51:29 +08:00
143 lines
3.2 KiB
Markdown
143 lines
3.2 KiB
Markdown
# Getting started
|
|
|
|
## Installation via NPM
|
|
|
|
The first thing you need to do, is grab the distribution files on NPM. You can do this either using yarn or npm
|
|
|
|
**Via yarn:**
|
|
|
|
```
|
|
yarn install storm-react-diagrams
|
|
```
|
|
|
|
**Via npm:**
|
|
|
|
```
|
|
npm install storm-react-diagrams
|
|
```
|
|
|
|
When you run this in your project directory, this will install the library into node\_modules/storm-react-diagrams. You will then find a dist folder that contains all the minified and production ready code.
|
|
|
|
This will also install React and a few other dependencies that you need in order to use this library.
|
|
|
|
## Including the library
|
|
|
|
When including the library you will need both the javascript files as well as the raw BEM styles. Both are included in the dist folder and there are numerous ways to integrate them into your project:
|
|
|
|
#### Getting the javascript files
|
|
|
|
**Using Typescript / ES6: \(recommended\)**
|
|
|
|
```js
|
|
import * as SRD from "storm-react-diagrams"
|
|
```
|
|
|
|
**Using RequireJS:**
|
|
|
|
```js
|
|
var SRD = require("storm-react-diagrams)
|
|
```
|
|
|
|
**As a script tag \(not recommended\)**
|
|
|
|
```html
|
|
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
|
|
<script src="node_modules/storm-react-diagrams/dist/main.js">
|
|
```
|
|
|
|
#### Getting the CSS
|
|
|
|
**Using RequireJS / Typescript/ ES6 \(recommended\)**
|
|
|
|
Make sure you have the style-loader enabled and then:
|
|
|
|
```js
|
|
require("storm-react-diagrams/dist/style.min.css");
|
|
```
|
|
|
|
or make sure you have the sass-loader enabled and then:
|
|
|
|
```js
|
|
require("storm-react-diagrams/src/sass/main.scss");
|
|
```
|
|
|
|
If you are using typescript and get a "require function not found" then make sure to
|
|
|
|
```
|
|
yarn add @types/node
|
|
```
|
|
|
|
which will give you the typescript definition files for requireJS
|
|
|
|
**Using SASS:**
|
|
|
|
setup your include paths on webpack or lib sass using the following option
|
|
|
|
```
|
|
includePaths: ["node_modules"]
|
|
```
|
|
|
|
and then if you want the raw sass source code:
|
|
|
|
```sass
|
|
@import "~storm-react-diagrams/src/sass/main";
|
|
```
|
|
|
|
or if you want the minified css
|
|
|
|
```sass
|
|
@import "~storm-react-diagrams/dist/style.min";
|
|
```
|
|
|
|
**Using a style tag**
|
|
|
|
or if you want the minified css
|
|
|
|
```html
|
|
<link rel="stylesheet" href="node_modules/dist/style.min.css">
|
|
```
|
|
|
|
## Render your first diagram
|
|
|
|
In your library code
|
|
|
|
```js
|
|
// 1) setup the diagram engine
|
|
var engine = new SRD.DiagramEngine();
|
|
engine.installDefaultFactories();
|
|
|
|
// 2) setup the diagram model
|
|
var model = new SRD.DiagramModel();
|
|
|
|
// 3) create a default node
|
|
var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
|
|
let port1 = node1.addOutPort("Out");
|
|
node1.setPosition(100, 100);
|
|
|
|
// 4) create another default node
|
|
var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
|
|
let port2 = node2.addInPort("In");
|
|
node2.setPosition(400, 100);
|
|
|
|
// 5) link the ports
|
|
let link1 = port1.link(port2);
|
|
|
|
// 6) add the models to the root graph
|
|
model.addAll(node1, node2, link1);
|
|
|
|
// 7) load model into engine
|
|
engine.setDiagramModel(model);
|
|
```
|
|
|
|
And then create an instance of the diagram widget. An example of the simplest possible react widget to do this would be:
|
|
|
|
```jsx
|
|
function SimpleDiagramWidget(props) {
|
|
return <SRD.DiagramWidget diagramEngine={props.engine} />;
|
|
}
|
|
```
|
|
|
|
|
|
|