refactor(store): Rename isReady to paneReady

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

src/container/ZoomPane/ZoomPane.vue

@@ -187,7 +187,7 @@ onMounted(() => {
   )
 })
 nextTick(async () => {
-  store.isReady = true
+  store.paneReady = true
 
   // if ssr we can't wait for dimensions, they'll never really exist
   const window = useWindow()

src/store/actions.ts

@@ -181,7 +181,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     if (typeof opts.snapToGrid !== 'undefined') state.snapToGrid = opts.snapToGrid
     if (typeof opts.snapGrid !== 'undefined') state.snapGrid = opts.snapGrid
     if (typeof opts.nodeExtent !== 'undefined') state.nodeExtent = opts.nodeExtent
-    if (!state.isReady)
+    if (!state.paneReady)
       until(() => state.d3Zoom)
         .not.toBeUndefined()
         .then(() => {

src/store/getters.ts

@@ -22,7 +22,7 @@ export default (state: FlowState): FlowGetters => {
   })
 
   const getNodes = computed<GraphNode[]>(() => {
-    if (state.isReady && state.dimensions.width && state.dimensions.height) {
+    if (state.paneReady && state.dimensions.width && state.dimensions.height) {
       const nodes = state.nodes.filter((n) => !n.hidden)
       return state.onlyRenderVisibleElements
         ? nodes &&
@@ -43,8 +43,8 @@ export default (state: FlowState): FlowGetters => {
   })
 
   const getEdges = computed<GraphEdge[]>(() => {
-    if (state.isReady && state.dimensions.width && state.dimensions.height) {
-      if (!state.onlyRenderVisibleElements) return state.edges
+    if (state.paneReady && state.dimensions.width && state.dimensions.height) {
+      if (!state.onlyRenderVisibleElements) return state.edges.filter((e) => !e.hidden)
       else
         return state.edges.filter(
           (e) =>

src/store/state.ts

@@ -16,11 +16,10 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
 }
 
 export default (): FlowState => ({
-  elements: [],
   nodes: [],
   edges: [],
 
-  isReady: false,
+  paneReady: false,
   instance: undefined,
 
   dimensions: {

src/store/store.ts

@@ -1,7 +1,7 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowExportObject, FlowHooksOn, FlowOptions, FlowState, Store } from '~/types'
+import { FlowExportObject, FlowHooksOn, FlowOptions, FlowState, GraphEdge, GraphNode, Store } from '~/types'
 import { onLoadToObject } from '~/utils'
 
 const useFlowStore = (id: string, preloadedState: FlowState): Store => {
@@ -30,7 +30,6 @@ export default (options?: FlowOptions) => {
   let storedState = ref<FlowExportObject>()
   const initial = useState()
   const storageKey = options?.id ?? `vue-flow-${id++}`
-  delete options?.id
   const preloadedState = {
     ...initial,
     ...(options as FlowState),
@@ -38,10 +37,8 @@ export default (options?: FlowOptions) => {
   if (withStorage) {
     storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
     if (storedState.value) {
-      preloadedState.elements =
-        storedState.value.nodes || storedState.value.edges
-          ? [...storedState.value.nodes, ...storedState.value.edges]
-          : options?.elements ?? []
+      preloadedState.nodes = (storedState.value.nodes ? storedState.value.nodes : options?.nodes ?? []) as GraphNode[]
+      preloadedState.edges = (storedState.value.edges ? storedState.value.edges : options?.edges ?? []) as GraphEdge[]
       if (storedState.value.position && storedState.value.zoom)
         preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
     }

src/types/store.ts

@@ -8,11 +8,10 @@ import { GraphNode, CoordinateExtent, Node } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks, FlowHooksOn } from './hooks'
 
-export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'> {
+export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'elements'> {
   hooks: FlowHooks
   instance?: FlowInstance
 
-  elements: Elements
   nodes: GraphNode<N>[]
   edges: GraphEdge<E>[]
 
@@ -64,7 +63,7 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'>
   zoomOnDoubleClick: boolean
   preventScrolling: boolean
 
-  isReady: boolean
+  paneReady: boolean
 
   vueFlowVersion: string
 }