feat(example): Add empty canvas example

* Add nodes on button click to an otherwise empty flowchart canvas

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;

examples/router.ts

@@ -32,6 +32,10 @@ export const routes: RouterOptions['routes'] = [
   {
     path: '/edge-types',
     component: () => import('./EdgeTypes')
+  },
+  {
+    path: '/empty',
+    component: () => import('./Empty')
   }
 ];