---
-REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex
-visualizations with total customizability.
+REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.
## 🚀 Quick Links
- Checkout the [**docs and demos**](https://reaflow.dev)
-- Explore the library on [Chroma](https://www.chromatic.com/library?appId=5f99ba42fe88ac0022fd1147)
- Learn about updates from the [Changelog](CHANGELOG.md)
+## 💎 Other Projects
+
+- [Reagraph](https://reagraph.dev?utm=reaflow) - Open-source library for large webgl based network graphs.
+- [Reablocks](https://reablocks.dev?utm=reaflow) - Open-source component library for React based on Tailwind.
+- [Reaviz](https://reaviz.dev?utm=reaflow) - Open-source library for data visulizations for React.
+- [Reachat](https://reachat.dev?utm=reaflow) - Open-source library for building LLM/Chat UIs for React.
+-
## ✨ Features
- Complex automatic layout leveraging ELKJS
@@ -98,8 +100,8 @@ export default () => (
If you want to run reaflow locally, its super easy!
- Clone the repo
-- `yarn install`
-- `yarn start`
+- `npm i`
+- `npm start`
- Browser opens to Storybook page
## ❤️ Contributors
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 54c4e3c8..00000000
--- a/babel.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-module.exports = function(api) {
- api.cache.forever();
-
- const presets = [
- ['@babel/preset-env',
- {
- targets: {
- esmodules: true
- }
- }],
- '@babel/preset-react',
- ['@babel/typescript', { isTSX: true, allExtensions: true }]
- ];
-
- return {
- presets,
- plugins: []
- };
-};
diff --git a/docs/Advanced/CustomNodes.stories.mdx b/docs/Advanced/CustomNodes.mdx
similarity index 100%
rename from docs/Advanced/CustomNodes.stories.mdx
rename to docs/Advanced/CustomNodes.mdx
diff --git a/docs/Advanced/Plugins.stories.mdx b/docs/Advanced/Plugins.stories.mdx
deleted file mode 100644
index deb09d55..00000000
--- a/docs/Advanced/Plugins.stories.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-
-
-# Plugins
-
-Below is a list of some libraries and examples to further enhance reaflow.
-
-## Zooming and panning
-> Super fast and light react npm package for zooming, panning and pinching html elements in easy way
-
-[React-zoom-pan-pinch](https://github.com/prc5/react-zoom-pan-pinch): By wrapping
-the Reaflow graph in the `TransformWrapper` of this library Mobile gestures,
-touchpad gestures and desktop mouse events are enabled. The graph can be
-scrolled via the mouse wheel and panned by dragging the canvas. The library
-provides a rich interface for interaction events.
-
-Properties:
-- `wheel={{step: 40}}` - Define the zoom steps for each mouse wheel step
-- `minScale` and `maxScale` - Define the minimum and maximum zoom
-- `limitToBounds` - Define if the graph should be allowed to be pannable out of the view
-
-To mitigate complications, make sure to deactivate the reaflow native
-zoom feature by setting `zoomable={false}`.
-
-```tsx
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-...
-
-
-
-
-
-```
diff --git a/docs/Advanced/Refs.stories.mdx b/docs/Advanced/Refs.mdx
similarity index 72%
rename from docs/Advanced/Refs.stories.mdx
rename to docs/Advanced/Refs.mdx
index 4d544228..bab81881 100644
--- a/docs/Advanced/Refs.stories.mdx
+++ b/docs/Advanced/Refs.mdx
@@ -69,14 +69,29 @@ export interface CanvasRef {
containerHeight?: number;
/**
- * Center the canvas to the viewport.
+ * Positions the canvas to the viewport.
*/
- centerCanvas?: () => void;
+ positionCanvas?: (position: CanvasPosition, animated?: boolean) => void;
/**
* Fit the canvas to the viewport.
*/
- fitCanvas?: () => void;
+ fitCanvas?: (animated?: boolean) => void;
+
+ /**
+ * Fit a group of nodes to the viewport.
+ */
+ fitNodes?: (nodeIds: string | string[], animated?: boolean) => void;
+
+ /**
+ * Scroll to X/Y
+ */
+ setScrollXY?: (xy: [number, number], animated?: boolean) => void;
+
+ /**
+ * Factor of zoom.
+ */
+ zoom: number;
/**
* Set a zoom factor of the canvas.
@@ -86,11 +101,11 @@ export interface CanvasRef {
/**
* Zoom in on the canvas.
*/
- zoomIn?: () => void;
+ zoomIn?: (zoomFactor?: number) => void;
/**
* Zoom out on the canvas.
*/
- zoomOut?: () => void;
+ zoomOut?: (zoomFactor?: number) => void;
}
```
diff --git a/docs/Advanced/SSRSupport.stories.mdx b/docs/Advanced/SSRSupport.mdx
similarity index 100%
rename from docs/Advanced/SSRSupport.stories.mdx
rename to docs/Advanced/SSRSupport.mdx
diff --git a/docs/Advanced/StateMgmt.stories.mdx b/docs/Advanced/StateMgmt.mdx
similarity index 100%
rename from docs/Advanced/StateMgmt.stories.mdx
rename to docs/Advanced/StateMgmt.mdx
diff --git a/docs/Advanced/Styling.stories.mdx b/docs/Advanced/Styling.mdx
similarity index 84%
rename from docs/Advanced/Styling.stories.mdx
rename to docs/Advanced/Styling.mdx
index 91e4b66b..6eaaea40 100644
--- a/docs/Advanced/Styling.stories.mdx
+++ b/docs/Advanced/Styling.mdx
@@ -1,4 +1,5 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs';
+import * as BasicStories from '../../stories/Basic.stories';
@@ -11,9 +12,7 @@ to them to allow for custom styling. Below is an example of some of the possibil
you can achieve.
-
-
+