chore: remove unused imports

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

src/container/SelectionPane/SelectionPane.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { FlowElement, FlowElements, GraphEdge, KeyCode } from '../../types'
+import { FlowElement } from '../../types'
 import { useStore, useKeyPress } from '../../composables'
-import { getConnectedEdges, isGraphNode } from '../../utils'
+import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 
 const store = useStore()
+const userSelection = ref(false)
 
 const onClick = (event: MouseEvent) => {
   store.hooks.paneClick.trigger(event)
@@ -17,13 +18,10 @@ const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger
 
 const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
 
-const userSelection = ref(false)
+onMounted(() => {
-
-tryOnMounted(() => {
   useKeyPress(store.deleteKeyCode, (keyPressed) => {
     if (keyPressed && store.selectedElements) {
-      const selectedNodes = store.selectedElements.filter(isGraphNode)
+      const connectedEdges = getConnectedEdges(store.getSelectedNodes, store.getEdges)
-      const connectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
       const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
         (res, item) => res.set(item.id, item),
         new Map<string, FlowElement>(),

src/store/actions.ts

@@ -1,5 +1,5 @@
-import { CoordinateExtent, Edge, FlowActions, FlowGetters, FlowState, GraphNode, Node } from '~/types'
+import { CoordinateExtent, FlowActions, FlowGetters, FlowState, GraphNode, Node } from '~/types'
-import { getConnectedEdges, getNodesInside, getRectOfNodes, isNode, parseEdge, parseNode } from '~/utils'
+import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils'
 
 export default (state: FlowState, getters: FlowGetters): FlowActions => {
   const setUserSelection: FlowActions['setUserSelection'] = (mousePos) => {
@@ -95,7 +95,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     state.nodesConnectable = isInteractive
     state.elementsSelectable = isInteractive
   }
-  const setNodes = (nodes: Node[], extent: CoordinateExtent) => {
+  const setNodes: FlowActions['setNodes'] = (nodes, extent: CoordinateExtent) => {
     const parseChildren = (n: Node, arr: GraphNode[] = []) => {
       arr.concat(parseNode(n, extent))
       if (n.children && n.children.length) {
@@ -105,7 +105,6 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
       }
     }
     nodes = nodes.flatMap((node) => {
-      console.log('flatmap')
       const parsed = parseNode(node, extent)
       const children: GraphNode[] = []
       if (node.children && node.children.length) {
@@ -115,7 +114,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     })
     state.nodes = <GraphNode[]>nodes
   }
-  const setEdges = (edges: Edge[]) => {
+  const setEdges: FlowActions['setEdges'] = (edges) => {
     state.edges = edges.flatMap((edge) => {
       const parsed = parseEdge(edge)
 
@@ -134,7 +133,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     })
   }
 
+  const setElements: FlowActions['setElements'] = (elements, extent) => {
+    setNodes(elements.filter(isNode), extent)
+    setEdges(elements.filter(isEdge))
+  }
+
   const setState: FlowActions['setState'] = (opts) => {
+    if (typeof opts.elements !== 'undefined') setElements(opts.elements, opts.nodeExtent ?? state.nodeExtent)
     if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent)
     if (typeof opts.edges !== 'undefined') setEdges(opts.edges)
     if (typeof opts.loading !== 'undefined') state.loading = opts.loading
@@ -181,6 +186,9 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     }
   }
   return {
+    setElements,
+    setNodes,
+    setEdges,
     setUserSelection,
     updateUserSelection,
     unsetUserSelection,

src/store/getters.ts

@@ -1,5 +1,5 @@
 import { FlowGetters, FlowState, GraphEdge, GraphNode } from '~/types'
-import { defaultEdgeTypes, defaultNodeTypes, getNodesInside, getSourceTargetNodes, isGraphNode } from '~/utils'
+import { defaultEdgeTypes, defaultNodeTypes, getNodesInside, isGraphNode } from '~/utils'
 
 export default (state: FlowState): FlowGetters => {
   const getEdgeTypes = computed(() => {
@@ -20,7 +20,6 @@ export default (state: FlowState): FlowGetters => {
 
   const getNodes = computed<GraphNode[]>(() => {
     if (state.isReady && state.dimensions.width && state.dimensions.height) {
-      console.log('getNodes')
       const nodes = state.nodes.filter((n) => !n.hidden)
       return state.onlyRenderVisibleElements
         ? nodes &&
@@ -41,23 +40,8 @@ export default (state: FlowState): FlowGetters => {
   })
 
   const getEdges = computed<GraphEdge[]>(() => {
-    const edges = state.edges.filter((e) => !e.hidden)
     if (state.isReady && state.dimensions.width && state.dimensions.height) {
-      return (
+      return state.edges.filter((e) => !e.hidden)
-        edges
-          .map((edge) => {
-            const { sourceNode, targetNode } = getSourceTargetNodes(edge, getNodes.value)
-            if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-            if (!targetNode) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
-
-            return {
-              ...edge,
-              sourceNode,
-              targetNode,
-            }
-          })
-          .filter(({ sourceNode, targetNode }) => !!(sourceNode && targetNode)) ?? []
-      )
     }
     return []
   })

src/types/node.ts

@@ -1,6 +1,6 @@
+import { CSSProperties } from 'vue'
 import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions } from './flow'
 import { HandleElement, ValidConnectionFunc } from './components'
-import { CSSProperties } from 'vue'
 
 export type CoordinateExtent = [[number, number], [number, number]]
 

src/types/store.ts

@@ -14,8 +14,8 @@ import {
 } from './flow'
 import { HandleType, EdgeComponent, NodeComponent, NodeTypes, EdgeTypes } from './components'
 import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
-import { GraphEdge } from './edge'
+import { Edge, GraphEdge } from './edge'
-import { GraphNode, CoordinateExtent } from './node'
+import { GraphNode, CoordinateExtent, Node } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks } from './hooks'
 
@@ -85,6 +85,9 @@ export interface FlowState extends Omit<FlowOptions, 'elements' | 'id'> {
 }
 
 export interface FlowActions {
+  setElements: (elements: Elements, extent: CoordinateExtent) => void
+  setNodes: (nodes: Node[], extent: CoordinateExtent) => void
+  setEdges: (edges: Edge[]) => void
   setUserSelection: (mousePos: XYPosition) => void
   updateUserSelection: (mousePos: XYPosition) => void
   unsetUserSelection: () => void

src/utils/edge.ts

@@ -1,5 +1,5 @@
-import { isGraphNode, rectToBox } from './graph'
+import { rectToBox } from './graph'
-import { Edge, EdgePositions, GraphNode, HandleElement, Position, Transform, XYPosition, FlowElements, GraphEdge } from '~/types'
+import { EdgePositions, GraphNode, HandleElement, Position, Transform, XYPosition } from '~/types'
 
 export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition {
   const x = (handle?.x ?? 0) + node.position.x
@@ -102,18 +102,3 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
 
   return overlappingArea > 0
 }
-
-export const getSourceTargetNodes = (edge: GraphEdge | Edge, elements: FlowElements) => {
-  const nodes: GraphNode[] = []
-  for (const el of elements) {
-    if (!nodes[0] || !nodes[1]) {
-      if (isGraphNode(el)) {
-        if (el.id === edge.source) nodes[0] = el
-        if (el.id === edge.target) nodes[1] = el
-      }
-    } else {
-      break
-    }
-  }
-  return { sourceNode: nodes[0], targetNode: nodes[1] }
-}

src/utils/graph.ts

@@ -1,4 +1,3 @@
-import { getSourceTargetNodes } from './edge'
 import {
   Box,
   Connection,
@@ -12,7 +11,6 @@ import {
   FlowStore,
   GraphEdge,
   GraphNode,
-  NextElements,
   Node,
   Rect,
   Transform,
@@ -53,13 +51,13 @@ export const getHostForElement = (element: HTMLElement): Document => {
 
 export const isEdge = (element: Node | Edge | Connection): element is Edge =>
   'id' in element && 'source' in element && 'target' in element
-
-export const isNode = (element: Node | Edge | Connection): element is Node => 'id' in element && !isEdge(element)
-
-export const isGraphNode = (element: any): element is GraphNode => isNode(element) && '__vf' in element
 export const isGraphEdge = (element: any): element is GraphEdge =>
   isEdge(element) && 'sourceNode' in element && 'targetNode' in element
 
+export const isNode = (element: Node | Edge | Connection): element is Node => 'id' in element && !isEdge(element)
+export const isGraphNode = (element: Node | Edge | Connection): element is GraphNode =>
+  isNode(element) && 'computedPosition' in element
+
 const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => {
   if (!isNode(node)) return []
   const ids = elements.filter((e) => isEdge(e) && e.source === node.id).map((e) => isEdge(e) && e[dir])
@@ -277,8 +275,9 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-export const onLoadGetNodes = (currentStore: FlowStore) => (): FlowElements => currentStore.nodes
+export const onLoadGetNodes = (currentStore: FlowStore) => (): GraphNode[] => currentStore.nodes
-export const onLoadGetEdges = (currentStore: FlowStore) => (): FlowElements => currentStore.edges
+export const onLoadGetEdges = (currentStore: FlowStore) => (): GraphEdge[] => currentStore.edges
+export const onLoadGetElements = (currentStore: FlowStore) => (): FlowElements => [...currentStore.nodes, ...currentStore.edges]
 
 export const onLoadToObject = (currentStore: FlowState) => (): FlowExportObject => {
   // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
@@ -315,55 +314,6 @@ export const getTransformForBounds = (
   return [x, y, clampedZoom]
 }
 
-export const processElements = (elements: FlowElements, fn: (elements: FlowElements) => void) => {
-  return new Promise((resolve) => {
-    const chunk = 100
-    let index = 0
-    function doChunk() {
-      const chunkPos = chunk * index
-      const lastChunk = elements.length - chunkPos < chunk * (index > 0 ? index : 1)
-      const cnt = !lastChunk ? chunk : elements.length - chunkPos
-      fn(elements.slice(chunkPos, chunkPos + cnt))
-      index++
-      if (!lastChunk) {
-        setTimeout(doChunk, 1)
-      } else {
-        resolve(true)
-      }
-    }
-    doChunk()
-  })
-}
-
-export const parseElement = (element: Node | Edge, prevElements: FlowElements, nodeExtent: CoordinateExtent) => {
-  let parsed: GraphEdge | GraphNode = {} as any
-  const index = prevElements.map((x) => x.id).indexOf(element.id)
-  if (isNode(element)) {
-    const storeNode = prevElements[index]
-
-    if (!isGraphNode(element)) parsed = parseNode(element, nodeExtent)
-    else parsed = element
-    if (storeNode) {
-      parsed = {
-        ...storeNode,
-        ...parsed,
-      } as GraphNode
-    }
-  } else if (isEdge(element)) {
-    const storeEdge = prevElements[index]
-
-    if (!isGraphEdge(element)) parsed = parseEdge(element)
-    else parsed = element
-    if (storeEdge) {
-      parsed = {
-        ...storeEdge,
-        ...parsed,
-      } as GraphEdge
-    }
-  }
-  return { parsed, index }
-}
-
 export function calculateXYZPosition(node: GraphNode, result: XYZPosition): XYZPosition {
   if (!node.parentNode) return result
   return calculateXYZPosition(node.parentNode, {
@@ -376,45 +326,6 @@ export function calculateXYZPosition(node: GraphNode, result: XYZPosition): XYZP
   })
 }
 
-export const parseElements = (elements: Elements, prevElements: FlowElements, nodeExtent: CoordinateExtent) => {
-  const { nodes, edges }: NextElements = {
-    nodes: [],
-    edges: [],
-  }
-  for (const element of elements) {
-    const { parsed } = parseElement(element, prevElements, nodeExtent)
-    if (parsed) {
-      if (isEdge(parsed)) edges.push(parsed)
-      else nodes.push(parsed)
-    }
-  }
-
-  nodes.forEach((n) => {
-    if (n.parentNode) {
-      const parent = nodes.find((p) => p.id === n.parentNode?.id)
-      if (n.parentNode && !parent) {
-        console.error(`Parent node ${n.parentNode} not found`)
-      } else if (parent) {
-        n.parentNode = parent
-        parent.isParent = true
-      }
-    }
-  })
-
-  edges.forEach((edge, i, arr) => {
-    const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes)
-    if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-    if (!targetNode) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
-
-    arr[i] = {
-      ...edge,
-      sourceNode,
-      targetNode,
-    }
-  })
-  return { nodes, edges }
-}
-
 export function isParentSelected(node: GraphNode): boolean {
   if (!node.parentNode) return false
   if (!node.parentNode) return false