From 489e12a8a74a7b3c91f4d7f4663e9fbe14fc28c7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 16 Aug 2021 21:27:22 +0200
Subject: [PATCH] feat(example): Add empty canvas example

* Add nodes on button click to an otherwise empty flowchart canvas
---
 examples/Empty/index.tsx | 65 ++++++++++++++++++++++++++++++++++++++++
 examples/router.ts       |  4 +++
 2 files changed, 69 insertions(+)
 create mode 100644 examples/Empty/index.tsx

diff --git a/examples/Empty/index.tsx b/examples/Empty/index.tsx
new file mode 100644
index 00000000..1b74e75a
--- /dev/null
+++ b/examples/Empty/index.tsx
@@ -0,0 +1,65 @@
+import RevueFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  OnLoadParams,
+  Elements,
+  ElementId,
+  Node,
+  FlowElement,
+  BackgroundVariant,
+  Connection,
+  Edge
+} from '../../src';
+import { CSSProperties, defineComponent, ref } from 'vue';
+
+const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+
+const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 };
+
+const EmptyFlow = defineComponent({
+  setup() {
+    {
+      const elements = ref<Elements>([]);
+      const onElementsRemove = (elementsToRemove: Elements) =>
+        (elements.value = removeElements(elementsToRemove, elements.value));
+      const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
+
+      const addRandomNode = () => {
+        const nodeId: ElementId = (elements.value.length + 1).toString();
+        const newNode: Node = {
+          id: nodeId,
+          data: { label: `Node: ${nodeId}` },
+          position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
+        } as Node;
+        elements.value = [...elements.value, newNode];
+      };
+
+      return () => (
+        <RevueFlow
+          v-model={elements.value}
+          onLoad={onLoad}
+          onElementClick={onElementClick}
+          onElementsRemove={onElementsRemove}
+          onConnect={(p) => onConnect(p)}
+          onNodeDragStop={onNodeDragStop}
+          onlyRenderVisibleElements={false}
+        >
+          <MiniMap />
+          <Controls />
+          <Background variant={BackgroundVariant.Lines} />
+
+          <button type="button" onClick={addRandomNode} style={buttonStyle}>
+            add node
+          </button>
+        </RevueFlow>
+      );
+    }
+  }
+});
+
+export default EmptyFlow;
diff --git a/examples/router.ts b/examples/router.ts
index a19235e9..9dae4ce3 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -32,6 +32,10 @@ export const routes: RouterOptions['routes'] = [
   {
     path: '/edge-types',
     component: () => import('./EdgeTypes')
+  },
+  {
+    path: '/empty',
+    component: () => import('./Empty')
   }
 ];