javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-26 07:51:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix storybook

Browse Source
This commit is contained in:
Dylan Vorster
2021-03-12 23:46:18 +02:00
parent b7dfa6da21
commit 2f366d21f7
87 changed files with 678 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
diagrams-demo-project/.babelrc Normal file
View File

@ -0,0 +1,10 @@
{
"presets": [
["@babel/preset-env",{
"targets": {
"node": true
}
}],
"@babel/preset-react"
]
}

12
diagrams-demo-project/README.md Normal file
View File

@ -0,0 +1,12 @@
# Project STORM > React diagrams > Demo Project
![](./screenshot.png)
In this repo you will find a simple webpack-dev-server project
that shows how to get started with the library.
It contains an example of how to implement a custom node in both Vanilla ES6 as-well
as typescript (the recommended way).
Simply run `yarn start` which will also open your browser.

12
diagrams-demo-project/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Project STORM | React Diagrams demo</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="application"/>
</body>
</html>

34
diagrams-demo-project/package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "@projectstorm/react-diagrams-demo",
"version": "6.3.0",
"author": "dylanvorster",
"license": "MIT",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/projectstorm/react-diagrams.git"
},
"scripts": {
"start": "./node_modules/.bin/webpack serve --open"
},
"keywords": [
"web",
"diagram",
"diagrams",
"react",
"typescript",
"flowchart",
"simple",
"links",
"nodes"
],
"main": "./dist/index.js",
"typings": "./dist/@types/index",
"dependencies": {
"@projectstorm/react-diagrams": "^6.3.0",
"webpack-dev-server": "^3.11.2",
"webpack-cli": "^4.5.0",
"webpack": "^5.25.0"
},
"gitHead": "bb878657ba0c2f81764f32901fd96158a0f8352e"
}

BIN
diagrams-demo-project/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

13
diagrams-demo-project/src/BodyWidget.tsx Normal file
View File

@ -0,0 +1,13 @@
import * as React from 'react';
import { DiagramEngine } from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
export interface BodyWidgetProps {
engine: DiagramEngine;
}
export class BodyWidget extends React.Component<BodyWidgetProps> {
render() {
return <CanvasWidget className="diagram-container" engine={this.props.engine} />;
}
}

18
diagrams-demo-project/src/custom-node-js/JSCustomNodeFactory.jsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from 'react';
import { JSCustomNodeModel } from './JSCustomNodeModel';
import { JSCustomNodeWidget } from './JSCustomNodeWidget';
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
export class JSCustomNodeFactory extends AbstractReactFactory {
constructor() {
super('js-custom-node');
}
generateModel(event) {
return new JSCustomNodeModel();
}
generateReactWidget(event) {
return <JSCustomNodeWidget engine={this.engine} node={event.model} />;
}
}

40
diagrams-demo-project/src/custom-node-js/JSCustomNodeModel.js Normal file
View File

@ -0,0 +1,40 @@
import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';
/**
* Example of a custom model using pure javascript
*/
export class JSCustomNodeModel extends NodeModel {
constructor(options = {}) {
super({
...options,
type: 'js-custom-node'
});
this.color = options.color || { options: 'red' };
// setup an in and out port
this.addPort(
new DefaultPortModel({
in: true,
name: 'in'
})
);
this.addPort(
new DefaultPortModel({
in: false,
name: 'out'
})
);
}
serialize() {
return {
...super.serialize(),
color: this.color
};
}
deserialize(ob, engine) {
super.deserialize(ob, engine);
this.color = ob.color;
}
}

18
diagrams-demo-project/src/custom-node-js/JSCustomNodeWidget.jsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from 'react';
import { PortWidget } from '@projectstorm/react-diagrams';
export class JSCustomNodeWidget extends React.Component {
render() {
return (
<div className="custom-node">
<PortWidget engine={this.props.engine} port={this.props.node.getPort('in')}>
<div className="circle-port" />
</PortWidget>
<PortWidget engine={this.props.engine} port={this.props.node.getPort('out')}>
<div className="circle-port" />
</PortWidget>
<div className="custom-node-color" style={{ backgroundColor: this.props.node.color }} />
</div>
);
}
}

19
diagrams-demo-project/src/custom-node-ts/TSCustomNodeFactory.tsx Normal file
View File

@ -0,0 +1,19 @@
import * as React from 'react';
import { TSCustomNodeModel } from './TSCustomNodeModel';
import { TSCustomNodeWidget } from './TSCustomNodeWidget';
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
import { DiagramEngine } from '@projectstorm/react-diagrams-core';
export class TSCustomNodeFactory extends AbstractReactFactory<TSCustomNodeModel, DiagramEngine> {
constructor() {
super('ts-custom-node');
}
generateModel(initialConfig) {
return new TSCustomNodeModel();
}
generateReactWidget(event): JSX.Element {
return <TSCustomNodeWidget engine={this.engine as DiagramEngine} node={event.model} />;
}
}

44
diagrams-demo-project/src/custom-node-ts/TSCustomNodeModel.ts Normal file
View File

@ -0,0 +1,44 @@
import { NodeModel, DefaultPortModel } from '@projectstorm/react-diagrams';
import { BaseModelOptions } from '@projectstorm/react-canvas-core';
export interface TSCustomNodeModelOptions extends BaseModelOptions {
color?: string;
}
export class TSCustomNodeModel extends NodeModel {
color: string;
constructor(options: TSCustomNodeModelOptions = {}) {
super({
...options,
type: 'ts-custom-node'
});
this.color = options.color || 'red';
// setup an in and out port
this.addPort(
new DefaultPortModel({
in: true,
name: 'in'
})
);
this.addPort(
new DefaultPortModel({
in: false,
name: 'out'
})
);
}
serialize() {
return {
...super.serialize(),
color: this.color
};
}
deserialize(event): void {
super.deserialize(event);
this.color = event.data.color;
}
}

31
diagrams-demo-project/src/custom-node-ts/TSCustomNodeWidget.tsx Normal file
View File

@ -0,0 +1,31 @@
import * as React from 'react';
import { DiagramEngine, PortWidget } from '@projectstorm/react-diagrams-core';
import { TSCustomNodeModel } from './TSCustomNodeModel';
export interface TSCustomNodeWidgetProps {
node: TSCustomNodeModel;
engine: DiagramEngine;
}
export interface TSCustomNodeWidgetState {}
export class TSCustomNodeWidget extends React.Component<TSCustomNodeWidgetProps, TSCustomNodeWidgetState> {
constructor(props: TSCustomNodeWidgetProps) {
super(props);
this.state = {};
}
render() {
return (
<div className="custom-node">
<PortWidget engine={this.props.engine} port={this.props.node.getPort('in')}>
<div className="circle-port" />
</PortWidget>
<PortWidget engine={this.props.engine} port={this.props.node.getPort('out')}>
<div className="circle-port" />
</PortWidget>
<div className="custom-node-color" style={{ backgroundColor: this.props.node.color }} />
</div>
);
}
}

49
diagrams-demo-project/src/main.css Normal file
View File

@ -0,0 +1,49 @@
*{
margin: 0;
padding: 0;
}
html, body, #application{
height: 100%;
overflow: hidden;
}
.diagram-container{
background: #333333;
width: 100%;
height: 100%;
}
.custom-node{
border: solid 2px gray;
border-radius: 5px;
width: 50px;
height: 50px;
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
}
.custom-node-color{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
border-radius: 10px;
}
.circle-port{
width: 12px;
height: 12px;
margin: 2px;
border-radius: 4px;
background: darkgray;
cursor: pointer;
}
.circle-port:hover{
background: mediumpurple;
}

43
diagrams-demo-project/src/main.tsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './main.css';
import createEngine, { DefaultLinkModel, DiagramModel } from '@projectstorm/react-diagrams';
import { JSCustomNodeFactory } from './custom-node-js/JSCustomNodeFactory';
import { TSCustomNodeFactory } from './custom-node-ts/TSCustomNodeFactory';
import { JSCustomNodeModel } from './custom-node-js/JSCustomNodeModel';
import { TSCustomNodeModel } from './custom-node-ts/TSCustomNodeModel';
import { BodyWidget } from './BodyWidget';
// create an instance of the engine
const engine = createEngine();
// register the two engines
engine.getNodeFactories().registerFactory(new JSCustomNodeFactory() as any);
engine.getNodeFactories().registerFactory(new TSCustomNodeFactory());
// create a diagram model
const model = new DiagramModel();
//####################################################
// now create two nodes of each type, and connect them
const node1 = new JSCustomNodeModel({ color: 'rgb(192,255,0)' });
node1.setPosition(50, 50);
const node2 = new TSCustomNodeModel({ color: 'rgb(0,192,255)' });
node2.setPosition(200, 50);
const link1 = new DefaultLinkModel();
link1.setSourcePort(node1.getPort('out'));
link1.setTargetPort(node2.getPort('in'));
model.addAll(node1, node2, link1);
//####################################################
// install the model into the engine
engine.setModel(model);
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<BodyWidget engine={engine} />, document.querySelector('#application'));
});

13
diagrams-demo-project/tsconfig.json Normal file
View File

@ -0,0 +1,13 @@
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"jsx": "react",
"allowJs": true,
"target": "es6",
"moduleResolution": "node"
},
"include": [
"./src"
]
}

53
diagrams-demo-project/webpack.config.js Normal file
View File

@ -0,0 +1,53 @@
const path = require('path');
const production = process.env.NODE_ENV === 'production';
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: production ? 'production' : 'development',
devtool: 'inline-source-map',
entry: './src/main.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6
}
})
]
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
transpileOnly: true
}
}
]
},
devServer: {
host: '0.0.0.0',
compress: true,
disableHostCheck: true,
overlay: true
}
};