update(zoom): add getElements helper

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

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))
+        nodes = store.nodes.filter((n) => options.nodes?.includes(n.id))
-        if (storedNodes) {
-          storedNodes.forEach((n) => {
-            if (isGraphNode(n)) nodes.push(n)
-          })
-        }
       }
-      if (!nodes.length) {
+      if (!nodes || !nodes.length) {
-        nodes = options.includeHiddenNodes ? store.elements.filter(isGraphNode) : store.getNodes
+        nodes = options.includeHiddenNodes ? store.nodes : store.getNodes
       }
       const bounds = getRectOfNodes(nodes)
       const [x, y, zoom] = getTransformForBounds(

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),

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>[]
+  nodes: Node<DataNode>[]
-  edges?: GraphEdge<DataEdge>[]
+  edges?: Edge<DataEdge>[]
   elements?: Elements
   id?: string
   nodeTypes?: NodeTypes