feat(example): add sidebar to provider example

.prettierignore

@@ -1,2 +1 @@
-example/src
 *.md

example/src/Provider/Sidebar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useStoreState } from 'react-flow-renderer';
+
+export default () => {
+  const nodes = useStoreState((store) => store.nodes);
+  const transform = useStoreState((store) => store.transform);
+
+  return (
+    <aside>
+      <div className="description">
+        This is an example of how you can access the internal state outside of the ReactFlow component.
+      </div>
+      <div className="title">Zoom & pan transform</div>
+      <div className="transform">
+        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
+      </div>
+      <div className="title">Nodes</div>
+      {nodes.map((node) => (
+        <div key={node.id}>
+          Node {node.id} - x: {node.__rg.position.x.toFixed(2)}, y: {node.__rg.position.y.toFixed(2)}
+        </div>
+      ))}
+    </aside>
+  );
+};

example/src/Provider/index.js

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
+import ReactFlow, { ReactFlowProvider, addEdge, removeElements } from 'react-flow-renderer';
 
-import ReactFlow, { addEdge, ReactFlowProvider } from 'react-flow-renderer';
+import Sidebar from './Sidebar';
 
-const onElementClick = element => console.log('click', element);
+import './provider.css';
+
+const onElementClick = (element) => console.log('click', element);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -10,22 +13,29 @@ const initialElements = [
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' }
+  { id: 'e1-3', source: '1', target: '3' },
 ];
 
 const ProviderFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements(els => addEdge(params, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
 
   return (
+    <div className="providerflow">
       <ReactFlowProvider>
+        <Sidebar />
+        <div className="reactflow-wrapper">
           <ReactFlow
             elements={elements}
             onElementClick={onElementClick}
             onConnect={onConnect}
+            onElementsRemove={onElementsRemove}
           />
+        </div>
       </ReactFlowProvider>
+    </div>
   );
-}
+};
 
 export default ProviderFlow;

example/src/Provider/provider.css

@@ -0,0 +1,32 @@
+.providerflow {
+  display: flex;
+  height: 100%;
+}
+
+.providerflow aside {
+  width: 20%;
+  max-width: 250px;
+  flex-grow: 1;
+  border-right: 1px solid #eee;
+  padding: 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.providerflow aside .description {
+  margin-bottom: 10px;
+}
+
+.providerflow aside .title {
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.providerflow aside .transform {
+  margin-bottom: 20px;
+}
+
+.providerflow .reactflow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}

example/src/index.js

@@ -15,49 +15,60 @@ import Provider from './Provider';
 
 import './index.css';
 
-const routes = [{
+const routes = [
+  {
     path: '/',
     component: Overview,
-  label: 'Overview'
+    label: 'Overview',
-}, {
+  },
-  path: '/provider',
+  {
-  component: Provider,
-  label: 'Provider'
-}, {
     path: '/edges',
     component: Edges,
-  label: 'Edges'
+    label: 'Edges',
-}, {
+  },
+  {
     path: '/custom-node',
     component: CustomNode,
-  label: 'CustomNode'
+    label: 'CustomNode',
-}, {
+  },
+  {
     path: '/horizontal',
     component: Horizontal,
-  label: 'Horizontal'
+    label: 'Horizontal',
-}, {
+  },
+  {
     path: '/validation',
     component: Validation,
-  label: 'Validation'
+    label: 'Validation',
-}, {
+  },
+  {
+    path: '/provider',
+    component: Provider,
+    label: 'Provider',
+  },
+  {
     path: '/stress',
     component: Stress,
-  label: 'Stress'
+    label: 'Stress',
-}, {
+  },
+  {
     path: '/basic',
-  component: Basic
+    component: Basic,
-}, {
+  },
+  {
     path: '/empty',
-  component: Empty
+    component: Empty,
-}, {
+  },
+  {
     path: '/inactive',
-  component: Inactive
+    component: Inactive,
-}];
+  },
+];
 
-const navLinks = routes.filter(route => route.label);
+const navLinks = routes.filter((route) => route.label);
 
 const SourceDisplay = withRouter(({ location }) => {
-  const route = routes.find(route => route.path === location.pathname);
+  const route = routes.find((route) => route.path === location.pathname);
   const sourceLink = `https://github.com/wbkd/react-flow/tree/master/example/src/${route.label}/index.js`;
 
   return (
@@ -72,28 +83,32 @@ const Header = () => {
 
   return (
     <header>
-      <a className="logo" href="https://github.com/wbkd/react-flow">React Flow</a>
+      <a className="logo" href="https://github.com/wbkd/react-flow">
+        React Flow
+      </a>
       <nav className={menuOpen ? 'is-open' : ''}>
-        {navLinks.map(route => (
+        {navLinks.map((route) => (
           <NavLink to={route.path} key={route.label} exact>
             {route.label}
           </NavLink>
         ))}
       </nav>
-      <button className="menu" onClick={() => setMenuOpen(!menuOpen)}>Menu</button>
+      <button className="menu" onClick={() => setMenuOpen(!menuOpen)}>
+        Menu
+      </button>
     </header>
   );
-}
+};
 
-ReactDOM.render((
+ReactDOM.render(
   <Router forceRefresh={true}>
     <Header />
     <SourceDisplay />
     <Switch>
-      {routes.map(route => (
+      {routes.map((route) => (
         <Route exact path={route.path} render={() => <route.component />} key={route.path} />
       ))}
     </Switch>
-  </Router>
+  </Router>,
-), document.getElementById('root'));
+  document.getElementById('root')
-
+);