From a0e610aeddb5cbf6d86882b729cb6f7fb77cd839 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 27 May 2022 16:37:23 +0200
Subject: [PATCH] docs: update examples

---
 docs/components/home/Features.vue                 |  4 ++--
 docs/src/guide/utils/instance.md                  | 15 ++++-----------
 examples/vite/src/Basic/Basic.vue                 |  6 +++---
 examples/vite/src/Basic/BasicOptionsAPI.vue       |  4 ++--
 examples/vite/src/CustomNode/CustomNode.vue       |  2 +-
 examples/vite/src/EdgeTypes/EdgeTypesExample.vue  |  4 ++--
 examples/vite/src/Empty/EmptyExample.vue          |  2 +-
 .../src/NodeTypeChange/NodeTypeChangeExample.vue  |  4 ++--
 examples/vite/src/Overview/Overview.vue           |  4 ++--
 examples/vite/src/Provider/ProviderExample.vue    |  4 ++--
 examples/vite/src/RGBFlow/RGBFlow.vue             |  4 ++--
 .../src/UpdatableEdge/UpdatableEdgeExample.vue    |  4 ++--
 .../vite/src/Validation/ValidationExample.vue     |  4 ++--
 13 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index f110251f..2cc1bad2 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { reactive, watch } from 'vue'
+import { watch } from 'vue'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import type { VueFlowStore } from '@braks/vue-flow'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const instances = reactive<VueFlowStore[]>([])
+const instances: VueFlowStore[] = []
 
 const onLoad = (instance: VueFlowStore) => {
   instances.push(instance)
diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md
index 440732ec..cdebc7c3 100644
--- a/docs/src/guide/utils/instance.md
+++ b/docs/src/guide/utils/instance.md
@@ -1,9 +1,7 @@
-# Instance
-
-The Vue Flow instance provides easy access to zoom-pan-helper functions.
-It can be accessed either directly from the state using `useVueFlow` or
-you can receive the instance with a `onPaneReady` event handler.
+# Viewport Functions
 
+Viewport Functions can be accessed via the `useVueFlow` utility or with the `VueFlowStore` instance provided by
+`onPaneReady`.
 
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
@@ -12,15 +10,10 @@ you can receive the instance with a `onPaneReady` event handler.
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
-const { onPaneReady, instance } = useVueFlow()
+const { onPaneReady } = useVueFlow()
 
 // event handler
 onPaneReady((instance) => instance.fitView())
-
-onMounted(() => {
-  // or directly try to access the instance
-  instance.value?.fitView()
-})
 </script>
 ```
 
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index c176e60d..baa059df 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -10,7 +10,7 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow({
+const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
   defaultZoom: 1.5,
   minZoom: 0.2,
   maxZoom: 4,
@@ -32,8 +32,8 @@ const updatePos = () =>
     }
   })
 
-const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const logToObject = () => console.log(toObject())
+const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 
diff --git a/examples/vite/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
index 4c51d5cf..bc33e983 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
 import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
 
 export default defineComponent({
@@ -7,7 +7,7 @@ export default defineComponent({
   components: { VueFlow, Background, MiniMap, Controls },
   data() {
     return {
-      instance: null as FlowInstance | null,
+      instance: null as VueFlowStore | null,
       elements: [
         { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
         { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index a05cad1d..0a5b445a 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow/src/index'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
diff --git a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
index 2ec935a6..9238e91f 100644
--- a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { FlowInstance } from '@braks/vue-flow'
+import type { VueFlowStore } from '@braks/vue-flow'
 import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
 import { getElements } from './utils'
 
-const onLoad = (flowInstance: FlowInstance) => {
+const onLoad = (flowInstance: VueFlowStore) => {
   flowInstance.fitView()
   console.log(flowInstance.getElements())
 }
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index 638f7d28..ea8b692e 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Node } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow/src/index'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
index ee9c748d..71dc7955 100644
--- a/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, VueFlowStore } from '@braks/vue-flow'
 import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
@@ -25,7 +25,7 @@ const elements = ref<Elements>(initialElements)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 
 const changeType = () => {
   elements.value.forEach((el) => {
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index e3db8ecf..39b1784e 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, VueFlowStore, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
 import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
@@ -13,7 +13,7 @@ const onSelectionDrag = (e: FlowEvents['selectionDrag']) => console.log('selecti
 const onSelectionDragStart = (e: FlowEvents['selectionDragStart']) => console.log('selection drag start', e)
 const onSelectionDragStop = (e: FlowEvents['selectionDragStop']) => console.log('selection drag stop', e)
 const onSelectionContextMenu = (e: FlowEvents['selectionContextMenu']) => console.log('selection context menu', e)
-const onLoad = (flowInstance: FlowInstance) => {
+const onLoad = (flowInstance: VueFlowStore) => {
   console.log('flow loaded:', flowInstance)
   flowInstance.fitView()
 }
diff --git a/examples/vite/src/Provider/ProviderExample.vue b/examples/vite/src/Provider/ProviderExample.vue
index fcb20a93..646a81b4 100644
--- a/examples/vite/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { Elements, FlowInstance } from '@braks/vue-flow'
+import type { Elements, VueFlowStore } from '@braks/vue-flow'
 import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
 
-const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
+const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
 
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
diff --git a/examples/vite/src/RGBFlow/RGBFlow.vue b/examples/vite/src/RGBFlow/RGBFlow.vue
index 5e74c5a3..e6d66686 100644
--- a/examples/vite/src/RGBFlow/RGBFlow.vue
+++ b/examples/vite/src/RGBFlow/RGBFlow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, FlowInstance } from '@braks/vue-flow'
+import type { Elements, VueFlowStore } from '@braks/vue-flow'
 import { VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
@@ -22,7 +22,7 @@ const elements = ref<Elements>([
 
 const el = templateRef<HTMLDivElement>('page', null)
 
-const onLoad = (flowInstance: FlowInstance) => {
+const onLoad = (flowInstance: VueFlowStore) => {
   flowInstance.fitView({ padding: 1 })
 }
 const color = ref<Colors>({
diff --git a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
index 257295ba..9c5d5217 100644
--- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
 import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
@@ -24,7 +24,7 @@ const initialElements: Elements = [
 ]
 
 const elements = ref(initialElements)
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
 const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
 const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => {
diff --git a/examples/vite/src/Validation/ValidationExample.vue b/examples/vite/src/Validation/ValidationExample.vue
index 83e9ebd5..be1df7ff 100644
--- a/examples/vite/src/Validation/ValidationExample.vue
+++ b/examples/vite/src/Validation/ValidationExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
+import type { Connection, OnConnectStartParams, VueFlowStore } from '@braks/vue-flow'
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
@@ -17,7 +17,7 @@ const { nodes, edges, addEdges } = useVueFlow({
     { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
   ],
 })
-const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
 const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
 const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)