From eb9714b89837fc0b26e262775bc870eb99a057d8 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Oct 2021 09:40:56 +0200
Subject: [PATCH] update(examples): Add Provider example

* Provider example shows usage of store outside of Flow
---
 examples/Provider/ProviderExample.vue | 51 +++++++++++++++++++++++++++
 examples/Provider/Sidebar.vue         | 27 ++++++++++++++
 examples/Provider/provider.css        | 45 +++++++++++++++++++++++
 3 files changed, 123 insertions(+)
 create mode 100644 examples/Provider/ProviderExample.vue
 create mode 100644 examples/Provider/Sidebar.vue
 create mode 100644 examples/Provider/provider.css

diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
new file mode 100644
index 00000000..546a5be5
--- /dev/null
+++ b/examples/Provider/ProviderExample.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import Sidebar from './Sidebar.vue'
+import Flow, {
+  addEdge,
+  removeElements,
+  Controls,
+  OnLoadParams,
+  FlowElement,
+  Connection,
+  Edge,
+  Elements,
+  ConnectionMode,
+  useStore,
+} from '~/index'
+
+import './provider.css'
+
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { 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' },
+] as Elements
+
+useStore()
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <div class="providerflow">
+    <Sidebar />
+    <div class="reactflow-wrapper">
+      <Flow
+        :elements="elements"
+        :connection-mode="ConnectionMode.Loose"
+        @element-click="onElementClick"
+        @connect="onConnect"
+        @elements-remove="onElementsRemove"
+        @load="onLoad"
+      >
+        <Controls />
+      </Flow>
+    </div>
+  </div>
+</template>
diff --git a/examples/Provider/Sidebar.vue b/examples/Provider/Sidebar.vue
new file mode 100644
index 00000000..285ef2bb
--- /dev/null
+++ b/examples/Provider/Sidebar.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useStore } from '~/index'
+const store = useStore()
+
+const nodes = computed(() => store.nodes)
+const transform = computed(() => store.transform)
+
+const selectAll = () => {
+  store.selectedElements = nodes.value
+  store.unsetUserSelection()
+}
+</script>
+<template>
+  <aside>
+    <div class="description">This is an example of how you can access the internal state outside of the ReactFlow component.</div>
+    <div class="title">Zoom & pan transform</div>
+    <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
+    <div class="title">Nodes</div>
+    <div v-for="node of nodes" :key="node.id">
+      Node {{ node.id }} - x: {{ node.__rf.position.x.toFixed(2) }}, y: {{ node.__rf.position.y.toFixed(2) }}
+    </div>
+
+    <div class="selectall">
+      <button @click="selectAll">select all nodes</button>
+    </div>
+  </aside>
+</template>
diff --git a/examples/Provider/provider.css b/examples/Provider/provider.css
new file mode 100644
index 00000000..aa719acc
--- /dev/null
+++ b/examples/Provider/provider.css
@@ -0,0 +1,45 @@
+.providerflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.providerflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 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%;
+}
+
+.providerflow .selectall {
+  margin-top: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .providerflow {
+    flex-direction: row;
+  }
+
+  .providerflow aside {
+    width: 20%;
+    max-width: 250px;
+  }
+}
\ No newline at end of file