chore(core): cleanup types

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

Author: bcakmakoglu

packages/core/src/types/changes.ts

@@ -43,8 +43,8 @@ export interface NodeRemoveChange {
   type: 'remove'
 }
 
-export interface NodeAddChange<Data = ElementData> {
-  item: GraphNode<Data>
+export interface NodeAddChange<NodeType extends Node = Node> {
+  item: GraphNode<NodeType>
   type: 'add'
 }
 

packages/core/src/types/edge.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, Component, VNode } from 'vue'
-import type { ClassFunc, ElementData, Position, StyleFunc, Styles } from './flow'
+import type { ElementData, Position, Styles } from './flow'
 import type { GraphNode } from './node'
 import type { EdgeComponent, EdgeTextProps } from './components'
 import type { CustomEvent, EdgeEventsHandler, EdgeEventsOn } from './hooks'
@@ -92,9 +92,9 @@ export interface DefaultEdge<
   /** Disable/enable deleting edge */
   deletable?: boolean
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
-  class?: string | string[] | Record<string, any> | ClassFunc<GraphEdge<Data, CustomEvents>>
+  class?: string | string[] | Record<string, any>
   /** Additional styles, can be an object or a callback returning an object (receives current flow element) */
-  style?: Styles | StyleFunc<GraphEdge<Data, CustomEvents>>
+  style?: Styles
   /** Is edge hidden */
   hidden?: boolean
   /** Radius of mouse event triggers (to ease selecting edges), defaults to 2 */

packages/core/src/types/flow.ts

@@ -84,16 +84,6 @@ export interface FlowExportObject {
   nodes: Node[]
   /** exported edges */
   edges: Edge[]
-  /**
-   * exported viewport position
-   * @deprecated use {@link FlowExportObject.viewport} instead
-   */
-  position: [x: number, y: number]
-  /**
-   * exported zoom level
-   * @deprecated use {@link FlowExportObject.viewport} instead
-   */
-  zoom: number
   /** exported viewport (position + zoom) */
   viewport: Viewport
 }

packages/core/src/types/node.ts

@@ -1,5 +1,5 @@
-import type { NodeBase, NodeProps as NodePropsBase } from '@xyflow/system'
-import type { ElementData, Styles } from './flow'
+import type { NodeBase } from '@xyflow/system'
+import type { ElementData, Styles, XYPosition } from './flow'
 import type { HandleConnectable, HandleElement } from './handle'
 
 /** Defined as [[x-from, y-from], [x-to, y-to]] */
@@ -21,6 +21,11 @@ export interface NodeHandleBounds {
   target?: HandleElement[]
 }
 
+export type NodeBounds = XYPosition & {
+  width: number | null
+  height: number | null
+}
+
 /**
  * The node data structure that gets used for the nodes prop.
  * @public
@@ -37,8 +42,44 @@ export interface Node<NodeData extends ElementData = ElementData, NodeType exten
   style?: Styles
 }
 
-/** these props are passed to node components */
-export interface NodeProps<NodeType extends NodeBase = NodeBase> extends Omit<NodePropsBase<NodeType>, 'isConnectable'> {
-  /** can node handles be connected, you need to forward this to your handles for this prop to have any effect */
-  isConnectable: HandleConnectable
+export type GraphNode<NodeType extends Node = Node> = NodeType & {
+  measured: {
+    width?: number
+    height?: number
+  }
+  internals: {
+    positionAbsolute: XYPosition
+    z: number
+    /**
+     * Holds a reference to the original node object provided by the user.
+     * Used as an optimization to avoid certain operations.
+     */
+    userNode: NodeType
+    handleBounds?: NodeHandleBounds
+    bounds?: NodeBounds
+  }
 }
+
+export type NodeProps<NodeType extends Node = Node> = Pick<
+  NodeType,
+  | 'id'
+  | 'data'
+  | 'width'
+  | 'height'
+  | 'sourcePosition'
+  | 'targetPosition'
+  | 'selected'
+  | 'dragHandle'
+  | 'selectable'
+  | 'deletable'
+  | 'draggable'
+  | 'parentId'
+> &
+  Required<Pick<NodeType, 'type' | 'dragging' | 'zIndex'>> & {
+    /** whether a node is connectable or not */
+    isConnectable: HandleConnectable
+    /** position absolute x value */
+    positionAbsoluteX: number
+    /** position absolute x value */
+    positionAbsoluteY: number
+  }