mirror of
https://github.com/projectstorm/react-diagrams.git
synced 2025-08-14 16:51:29 +08:00
137 lines
3.5 KiB
TypeScript
137 lines
3.5 KiB
TypeScript
import * as React from "react";
|
|
import { storiesOf, addDecorator } from "@storybook/react";
|
|
import { setOptions } from "@storybook/addon-options";
|
|
import { host } from "storybook-host";
|
|
import { Helper } from "./.helpers/Helper";
|
|
import { Toolkit } from "../src/Toolkit";
|
|
|
|
//include the SCSS for the demo
|
|
import "./.helpers/demo.scss";
|
|
|
|
Toolkit.TESTING = true;
|
|
|
|
addDecorator(
|
|
host({
|
|
cropMarks: false,
|
|
height: "100%",
|
|
width: "100%",
|
|
padding: 20
|
|
})
|
|
);
|
|
|
|
setOptions({
|
|
name: "STORM React Diagrams",
|
|
url: "https://github.com/projectstorm/react-diagrams",
|
|
addonPanelInRight: true
|
|
});
|
|
|
|
storiesOf("Simple Usage", module)
|
|
.add(
|
|
"Simple example",
|
|
Helper.makeDemo(
|
|
require("./demo-simple/index").default(),
|
|
require("!!raw-loader!./demo-simple/index"),
|
|
require("./demo-simple/docs.md")
|
|
)
|
|
)
|
|
.add(
|
|
"Simple flow example",
|
|
Helper.makeDemo(require("./demo-simple-flow/index").default(), require("!!raw-loader!./demo-simple-flow/index"))
|
|
)
|
|
.add(
|
|
"Group Nodes",
|
|
Helper.makeDemo(
|
|
require("./demo-grouped-nodes/index").default(),
|
|
require("!!raw-loader!./demo-grouped-nodes/index")
|
|
)
|
|
)
|
|
.add(
|
|
"Performance demo",
|
|
Helper.makeDemo(require("./demo-performance/index").default(), require("!!raw-loader!./demo-performance/index"))
|
|
)
|
|
.add(
|
|
"Locked widget",
|
|
Helper.makeDemo(require("./demo-locks/index").default(), require("!!raw-loader!./demo-locks/index"))
|
|
)
|
|
.add(
|
|
"Canvas grid size",
|
|
Helper.makeDemo(require("./demo-grid/index").default(), require("!!raw-loader!./demo-grid/index"))
|
|
)
|
|
.add(
|
|
"Limiting link points",
|
|
Helper.makeDemo(
|
|
require("./demo-limit-points/index").default(),
|
|
require("!!raw-loader!./demo-limit-points/index")
|
|
)
|
|
)
|
|
.add(
|
|
"Events and listeners",
|
|
Helper.makeDemo(require("./demo-listeners/index").default(), require("!!raw-loader!./demo-listeners/index"))
|
|
)
|
|
.add(
|
|
"Zoom to fit",
|
|
Helper.makeDemo(require("./demo-zoom-to-fit/index").default(), require("!!raw-loader!./demo-zoom-to-fit/index"))
|
|
)
|
|
.add(
|
|
"Links with labels",
|
|
Helper.makeDemo(
|
|
require("./demo-labelled-links/index").default(),
|
|
require("!!raw-loader!./demo-labelled-links/index")
|
|
)
|
|
);
|
|
|
|
storiesOf("Advanced Techniques", module)
|
|
.add(
|
|
"Clone Selected",
|
|
Helper.makeDemo(require("./demo-cloning/index").default(), require("!!raw-loader!./demo-cloning/index"))
|
|
)
|
|
.add(
|
|
"Serializing and de-serializing",
|
|
Helper.makeDemo(require("./demo-serializing/index").default(), require("!!raw-loader!./demo-serializing/index"))
|
|
)
|
|
.add(
|
|
"Programatically modifying graph",
|
|
Helper.makeDemo(
|
|
require("./demo-mutate-graph/index").default(),
|
|
require("!!raw-loader!./demo-mutate-graph/index")
|
|
)
|
|
)
|
|
.add(
|
|
"Large application",
|
|
Helper.makeDemo(
|
|
require("./demo-drag-and-drop/index").default(),
|
|
require("!!raw-loader!./demo-drag-and-drop/components/BodyWidget")
|
|
)
|
|
)
|
|
.add(
|
|
"Smart routing",
|
|
Helper.makeDemo(
|
|
require("./demo-smart-routing/index").default(),
|
|
require("!!raw-loader!./demo-smart-routing/index")
|
|
)
|
|
);
|
|
|
|
storiesOf("Custom Models", module)
|
|
.add(
|
|
"Custom diamond node",
|
|
Helper.makeDemo(
|
|
require("./demo-custom-node1/index").default(),
|
|
require("!!raw-loader!./demo-custom-node1/index")
|
|
)
|
|
)
|
|
.add(
|
|
"Custom animated links",
|
|
Helper.makeDemo(
|
|
require("./demo-custom-link1/index").default(),
|
|
require("!!raw-loader!./demo-custom-link1/index")
|
|
)
|
|
);
|
|
|
|
storiesOf("3rd party libraries", module).add(
|
|
"Auto Distribute (Dagre)",
|
|
Helper.makeDemo(require("./demo-dagre/index").default(), require("!!raw-loader!./demo-dagre/index"))
|
|
);
|
|
|
|
// enable this to log mouse location when writing new puppeteer tests
|
|
//Helper.logMousePosition()
|