chore(core): cleanup

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

Author: bcakmakoglu

packages/core/src/components/Handle/Handle.vue

@@ -89,7 +89,7 @@ const isConnectable = computed(() => {
   }
 
   if (typeof connectable === 'function') {
-    return connectable(node, connectedEdges.value)
+    return connectable(nodeId, handleId)
   }
 
   return isDef(connectable) ? connectable : nodesConnectable.value
@@ -98,15 +98,17 @@ const isConnectable = computed(() => {
 // todo: remove this and have users handle this themselves using `updateNodeInternals`
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
 onMounted(() => {
+  const nodeHandleBounds = node.internals.handleBounds?.[type.value] ?? []
+
   // if the node isn't initialized yet, we can't set up the handle bounds
   // the handle bounds will be automatically set up when the node is initialized (`updateNodeDimensions`)
-  if (!node.dimensions.width || !node.dimensions.height) {
+  if (!vueFlowRef.value || !node.measured.width || !node.measured.height) {
     return
   }
 
-  const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
+  const existingBounds = nodeHandleBounds.find((b) => b.id === handleId)
 
-  if (!vueFlowRef.value || existingBounds) {
+  if (existingBounds) {
     return
   }
 
@@ -131,14 +133,24 @@ onMounted(() => {
     ...getDimensions(handle.value),
   }
 
-  node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
+  node.internals.handleBounds = {
+    source: [],
+    target: [],
+    ...node.internals.handleBounds,
+    [type.value]: [...nodeHandleBounds, nextBounds],
+  }
 })
 
 onUnmounted(() => {
   // clean up node internals
-  const handleBounds = node.handleBounds[type.value]
-  if (handleBounds) {
-    node.handleBounds[type.value] = handleBounds.filter((b) => b.id !== handleId)
+  const nodeHandleBounds = node.internals.handleBounds?.[type.value]
+  if (nodeHandleBounds) {
+    node.internals.handleBounds = {
+      source: [],
+      target: [],
+      ...node.internals.handleBounds,
+      [type.value]: nodeHandleBounds.filter((b) => b.id !== handleId),
+    }
   }
 })
 

packages/core/src/composables/useNode.ts

@@ -1,5 +1,5 @@
 import { computed, inject, ref } from 'vue'
-import type { CustomEvent, ElementData } from '../types'
+import type { NodeBase } from '@xyflow/system'
 import { ErrorCode, VueFlowError, getConnectedEdges } from '../utils'
 import { NodeRef } from '../context'
 import { useVueFlow } from './useVueFlow'
@@ -16,13 +16,13 @@ import { useNodeId } from './useNodeId'
  * @param id - The id of the node to access
  * @returns the node id, the node, the node dom element, it's parent and connected edges
  */
-export function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+export function useNode<NodeType extends NodeBase = NodeBase>(id?: string) {
   const nodeId = id ?? useNodeId() ?? ''
   const nodeEl = inject(NodeRef, ref(null))
 
   const { findNode, edges, emits } = useVueFlow()
 
-  const node = findNode<Data, CustomEvents>(nodeId)!
+  const node = findNode<NodeType>(nodeId)!
 
   if (!node) {
     emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nodeId))
@@ -32,7 +32,7 @@ export function useNode<Data = ElementData, CustomEvents extends Record<string,
     id: nodeId,
     nodeEl,
     node,
-    parentNode: computed(() => findNode(node.parentNode)),
+    parentNode: computed(() => findNode(node.parentId)),
     connectedEdges: computed(() => getConnectedEdges([node], edges.value)),
   }
 }

packages/core/src/types/flow.ts

@@ -22,6 +22,8 @@ import type { VueFlowStore } from './store'
 
 export type MaybeElement = Node | Edge | Connection | Element
 
+export type ElementData = Record<string, unknown>
+
 export interface CustomThemeVars {
   [key: string]: string | number | undefined
 }

packages/core/src/types/handle.ts

@@ -1,7 +1,5 @@
 import type { Dimensions, Position, XYPosition } from './flow'
 import type { Connection } from './connection'
-import type { GraphEdge } from './edge'
-import type { GraphNode } from './node'
 
 export type HandleType = 'source' | 'target'
 
@@ -31,12 +29,9 @@ export interface ConnectingHandle {
 }
 
 /** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */
-export type ValidConnectionFunc = (
-  connection: Connection,
-  elements: { edges: GraphEdge[]; nodes: GraphNode[]; sourceNode: GraphNode; targetNode: GraphNode },
-) => boolean
+export type ValidConnectionFunc = (connection: Connection) => boolean
 
-export type HandleConnectableFunc = (node: GraphNode, connectedEdges: GraphEdge[]) => boolean
+export type HandleConnectableFunc = (nodeId: string, handleId: string | null) => boolean
 
 /**
  * set to true to allow unlimited connections,

packages/core/src/types/node.ts

@@ -1,9 +1,7 @@
 import type { NodeBase, NodeProps as NodePropsBase } from '@xyflow/system'
-import type { Styles } from './flow'
+import type { ElementData, Styles } from './flow'
 import type { HandleConnectable, HandleElement } from './handle'
 
-export type ElementData = Record<string, unknown>
-
 /** Defined as [[x-from, y-from], [x-to, y-to]] */
 export type CoordinateExtent = [extentFrom: [fromX: number, fromY: number], extentTo: [toX: number, toY: number]]
 

packages/core/src/types/store.ts

@@ -1,12 +1,10 @@
 import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
 import type { KeyFilter } from '@vueuse/core'
-import type { PanZoomInstance, Viewport } from '@xyflow/system'
+import type { InternalNodeBase, NodeBase, PanZoomInstance, Viewport } from '@xyflow/system'
 import type { ViewportHelper } from '../composables'
 import type {
   Dimensions,
   ElementData,
-  Elements,
-  FlowElements,
   FlowExportObject,
   FlowOptions,
   FlowProps,
@@ -161,8 +159,6 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
   ariaLiveMessage: string
 }
 
-export type SetElements = (elements: Elements | ((elements: FlowElements) => Elements)) => void
-
 export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void
 
 export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void
@@ -206,9 +202,9 @@ export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => vo
 
 export type UpdateNodeInternals = (nodeIds?: string[]) => void
 
-export type FindNode = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
+export type FindNode = <NodeType extends NodeBase = NodeBase>(
   id: string | undefined | null,
-) => GraphNode<Data, CustomEvents> | undefined
+) => InternalNodeBase<NodeType> | undefined
 
 export type FindEdge = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
   id: string | undefined | null,
@@ -235,8 +231,6 @@ export type UpdateNodeData = <Data = ElementData, CustomEvents extends Record<st
 export type IsNodeIntersecting = (node: (Partial<Node> & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean
 
 export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
-  /** parses elements (nodes + edges) and re-sets the state */
-  setElements: SetElements
   /** parses nodes and re-sets the state */
   setNodes: SetNodes
   /** parses edges and re-sets the state */
@@ -265,11 +259,6 @@ export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
   applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[]
   /** applies default node change handler */
   applyNodeChanges: (changes: NodeChange[]) => GraphNode[]
-  /**
-   * manually select elements and add to state
-   * @deprecated will be removed in the next major, use {@link Actions.addSelectedNodes} or {@link Actions.addSelectedEdges} instead
-   */
-  addSelectedElements: (elements: FlowElements) => void
   /** manually select edges and add to state */
   addSelectedEdges: (edges: GraphEdge[]) => void
   /** manually select nodes and add to state */
@@ -278,11 +267,6 @@ export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
   removeSelectedEdges: (edges: GraphEdge[]) => void
   /** manually unselect nodes and remove from state */
   removeSelectedNodes: (nodes: GraphNode[]) => void
-  /**
-   * @deprecated will be replaced in the next major
-   * unselect selected elements (if none are passed, all elements are unselected)
-   */
-  removeSelectedElements: (elements?: Elements) => void
   /** apply min zoom value to panzoom */
   setMinZoom: (zoom: number) => void
   /** apply max zoom value to panzoom */
@@ -341,11 +325,6 @@ export interface Getters {
   getEdgeTypes: Record<keyof DefaultEdgeTypes | string, EdgeComponent>
   /** returns object containing current node types */
   getNodeTypes: Record<keyof DefaultNodeTypes | string, NodeComponent>
-  /**
-   * get all elements
-   * @deprecated - will be removed in next major version
-   */
-  getElements: FlowElements
   /** all visible node */
   getNodes: GraphNode[]
   /** all visible edges */
@@ -360,8 +339,6 @@ export interface Getters {
    * @deprecated use {@link Actions.findEdge} instead
    */
   getEdge: (id: string) => GraphEdge | undefined
-  /** returns all currently selected elements */
-  getSelectedElements: FlowElements
   /** returns all currently selected nodes */
   getSelectedNodes: GraphNode[]
   /** returns all currently selected edges */