From c82ca4e2251a58328eca1d11937068093df21cf1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 11 Dec 2021 13:00:29 +0100
Subject: [PATCH] update(zoom): add getElements helper

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/composables/useZoomPanHelper.ts | 13 ++++---------
 src/container/Renderer/Renderer.vue |  5 +++--
 src/types/flow.ts                   |  5 +++--
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/composables/useZoomPanHelper.ts b/src/composables/useZoomPanHelper.ts
index 2ed3e3f6..26458369 100644
--- a/src/composables/useZoomPanHelper.ts
+++ b/src/composables/useZoomPanHelper.ts
@@ -1,6 +1,6 @@
 import { zoomIdentity } from 'd3-zoom'
 import useStore from './useStore'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, isGraphNode } from '~/utils'
+import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
 import { FitViewParams, FlowTransform, GraphNode, FlowStore, Rect, UseZoomPanHelper, XYPosition } from '~/types'
 
 const DEFAULT_PADDING = 0.1
@@ -25,15 +25,10 @@ export default (store: FlowStore = useStore()): UseZoomPanHelper => {
 
       let nodes: GraphNode[] = []
       if (options.nodes) {
-        const storedNodes = store.elements.filter((n) => options.nodes?.includes(n.id))
-        if (storedNodes) {
-          storedNodes.forEach((n) => {
-            if (isGraphNode(n)) nodes.push(n)
-          })
-        }
+        nodes = store.nodes.filter((n) => options.nodes?.includes(n.id))
       }
-      if (!nodes.length) {
-        nodes = options.includeHiddenNodes ? store.elements.filter(isGraphNode) : store.getNodes
+      if (!nodes || !nodes.length) {
+        nodes = options.includeHiddenNodes ? store.nodes : store.getNodes
       }
       const bounds = getRectOfNodes(nodes)
       const [x, y, zoom] = getTransformForBounds(
diff --git a/src/container/Renderer/Renderer.vue b/src/container/Renderer/Renderer.vue
index 9ee3cd8d..a3d4f17f 100644
--- a/src/container/Renderer/Renderer.vue
+++ b/src/container/Renderer/Renderer.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useStore, useWindow, useZoomPanHelper } from '../../composables'
 import { FlowInstance } from '../../types'
-import { onLoadGetEdges, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
+import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
 
 const store = useStore()
-store.isReady = true
 
 nextTick(async () => {
+  store.isReady = true
   // if ssr we can't wait for dimensions, they'll never really exist
   const window = useWindow()
   if ('screen' in window)
@@ -20,6 +20,7 @@ nextTick(async () => {
     zoomTo,
     setTransform,
     project: onLoadProject(store),
+    getElements: onLoadGetElements(store),
     getNodes: onLoadGetNodes(store),
     getEdges: onLoadGetEdges(store),
     toObject: onLoadToObject(store),
diff --git a/src/types/flow.ts b/src/types/flow.ts
index 63a1028b..71a451a3 100644
--- a/src/types/flow.ts
+++ b/src/types/flow.ts
@@ -105,6 +105,7 @@ export type FlowInstance<DataNode = any, DataEdge = DataNode> = {
   zoomTo: (zoomLevel: number) => void
   fitView: FitViewFunc
   project: ProjectFunc
+  getElements: () => FlowElements
   getNodes: () => GraphNode[]
   getEdges: () => GraphEdge[]
   setTransform: (transform: FlowTransform) => void
@@ -112,8 +113,8 @@ export type FlowInstance<DataNode = any, DataEdge = DataNode> = {
 }
 
 export interface FlowProps<DataNode = any, DataEdge = DataNode> {
-  nodes: GraphNode<DataNode>[]
-  edges?: GraphEdge<DataEdge>[]
+  nodes: Node<DataNode>[]
+  edges?: Edge<DataEdge>[]
   elements?: Elements
   id?: string
   nodeTypes?: NodeTypes