From 8ff8060a6a9b8b6d30df1949f5e071429b35bef9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 16 Jul 2024 20:50:19 +0200 Subject: [PATCH] chore(core): cleanup types Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/types/changes.ts | 4 +- packages/core/src/types/edge.ts | 6 +- packages/core/src/types/flow.ts | 10 -- packages/core/src/types/node.ts | 53 ++++++- packages/core/src/types/store.ts | 226 +++++++++++++---------------- 5 files changed, 149 insertions(+), 150 deletions(-) diff --git a/packages/core/src/types/changes.ts b/packages/core/src/types/changes.ts index 051aac95d..50a64b5fb 100644 --- a/packages/core/src/types/changes.ts +++ b/packages/core/src/types/changes.ts @@ -43,8 +43,8 @@ export interface NodeRemoveChange { type: 'remove' } -export interface NodeAddChange { - item: GraphNode +export interface NodeAddChange { + item: GraphNode type: 'add' } diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts index a08ca9372..af8e17607 100644 --- a/packages/core/src/types/edge.ts +++ b/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 | ClassFunc> + class?: string | string[] | Record /** Additional styles, can be an object or a callback returning an object (receives current flow element) */ - style?: Styles | StyleFunc> + style?: Styles /** Is edge hidden */ hidden?: boolean /** Radius of mouse event triggers (to ease selecting edges), defaults to 2 */ diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index 3e31dca78..ecb40c50f 100644 --- a/packages/core/src/types/flow.ts +++ b/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 } diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts index f443638d5..c756bfeee 100644 --- a/packages/core/src/types/node.ts +++ b/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 extends Omit, '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 & { + 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 = Pick< + NodeType, + | 'id' + | 'data' + | 'width' + | 'height' + | 'sourcePosition' + | 'targetPosition' + | 'selected' + | 'dragHandle' + | 'selectable' + | 'deletable' + | 'draggable' + | 'parentId' +> & + Required> & { + /** whether a node is connectable or not */ + isConnectable: HandleConnectable + /** position absolute x value */ + positionAbsoluteX: number + /** position absolute x value */ + positionAbsoluteY: number + } diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index 2b5d78815..43c05f7fa 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -2,18 +2,7 @@ import type { CSSProperties, ComputedRef, ToRefs } from 'vue' import type { KeyFilter } from '@vueuse/core' import type { InternalNodeBase, NodeBase, PanZoomInstance, Viewport } from '@xyflow/system' import type { ViewportHelper } from '../composables' -import type { - Dimensions, - ElementData, - FlowExportObject, - FlowOptions, - FlowProps, - Rect, - SelectionMode, - SelectionRect, - SnapGrid, - XYPosition, -} from './flow' +import type { Dimensions, FlowExportObject, FlowProps, Rect, SelectionMode, SelectionRect, SnapGrid, XYPosition } from './flow' import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components' import type { Connection, @@ -27,7 +16,7 @@ import type { import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge' import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node' import type { PanOnScrollMode } from './zoom' -import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks' +import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks' import type { EdgeChange, NodeChange, NodeDragItem } from './changes' import type { ConnectingHandle, ValidConnectionFunc } from './handle' @@ -159,102 +148,81 @@ export interface State extends Omit { ariaLiveMessage: string } -export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void - -export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void - -export type AddNodes = (nodes: Node | Node[] | ((nodes: GraphNode[]) => Node | Node[])) => void - -export type RemoveNodes = ( - nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]), - removeConnectedEdges?: boolean, - removeChildren?: boolean, -) => void - -export type RemoveEdges = ( - edges: (string | Edge) | (Edge | string)[] | ((edges: GraphEdge[]) => (string | Edge) | (Edge | string)[]), -) => void - -export type AddEdges = ( - edgesOrConnections: - | (Edge | Connection) - | (Edge | Connection)[] - | ((edges: GraphEdge[]) => (Edge | Connection) | (Edge | Connection)[]), -) => void - -export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection, shouldReplaceId?: boolean) => GraphEdge | false - -export type UpdateEdgeData = = any>( - id: string, - dataUpdate: Partial | ((edge: GraphEdge) => Partial), - options?: { replace: boolean }, -) => void - -export type SetState = ( - state: - | Partial> - | ((state: State) => Partial>), -) => void - -export type UpdateNodePosition = (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void - -export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => void - -export type UpdateNodeInternals = (nodeIds?: string[]) => void - -export type FindNode = ( - id: string | undefined | null, -) => InternalNodeBase | undefined - -export type FindEdge = = any>( - id: string | undefined | null, -) => GraphEdge | undefined - -export type GetIntersectingNodes = ( - node: (Partial & { id: Node['id'] }) | Rect, - partially?: boolean, - nodes?: GraphNode[], -) => GraphNode[] - -export type UpdateNode = = any>( - id: string, - nodeUpdate: Partial> | ((node: GraphNode) => Partial>), - options?: { replace: boolean }, -) => void - -export type UpdateNodeData = = any>( - id: string, - dataUpdate: Partial | ((node: GraphNode) => Partial), - options?: { replace: boolean }, -) => void - -export type IsNodeIntersecting = (node: (Partial & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean - -export interface Actions extends Omit { +export interface Actions + extends Omit { /** parses nodes and re-sets the state */ - setNodes: SetNodes + setNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void /** parses edges and re-sets the state */ - setEdges: SetEdges + setEdges: (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void /** parses nodes and adds to state */ - addNodes: AddNodes + addNodes: (nodes: Node | Node[] | ((nodes: GraphNode[]) => Node | Node[])) => void /** parses edges and adds to state */ - addEdges: AddEdges + addEdges: ( + edgesOrConnections: + | (Edge | Connection) + | (Edge | Connection)[] + | ((edges: GraphEdge[]) => (Edge | Connection) | (Edge | Connection)[]), + ) => void /** remove nodes (and possibly connected edges and children) from state */ - removeNodes: RemoveNodes + removeNodes: ( + nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]), + removeConnectedEdges?: boolean, + removeChildren?: boolean, + ) => void /** remove edges from state */ - removeEdges: RemoveEdges + removeEdges: ( + edges: (string | Edge) | (Edge | string)[] | ((edges: GraphEdge[]) => (string | Edge) | (Edge | string)[]), + ) => void /** find a node by id */ - findNode: FindNode + getNode: (id: string | undefined | null) => GraphNode | undefined /** find an edge by id */ - findEdge: FindEdge - /** updates an edge */ - updateEdge: UpdateEdge - /** updates the data of an edge */ - updateEdgeData: UpdateEdgeData - /** updates a node */ - updateNode: UpdateNode - /** updates the data of a node */ - updateNodeData: UpdateNodeData + getEdge: (id: string | undefined | null) => GraphEdge | undefined + updateEdge: (oldEdge: GraphEdge, newConnection: Connection, shouldReplaceId?: boolean) => GraphEdge | false + /** + * Updates the data attribute of a edge. + * + * @param id - id of the edge to update + * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update + * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged + * + * @example + * updateEdgeData('edge-1', { label: 'A new label' }); + */ + updateEdgeData: ( + id: string, + dataUpdate: Partial | ((edge: EdgeType) => Partial), + options?: { replace: boolean }, + ) => void + /** + * Updates a node. + * + * @param id - id of the node to update + * @param nodeUpdate - the node update as an object or a function that receives the current node and returns the node update + * @param options.replace - if true, the node is replaced with the node update, otherwise the changes get merged + * + * @example + * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } })); + */ + updateNode: ( + id: string, + nodeUpdate: Partial | ((node: NodeType) => Partial), + options?: { replace: boolean }, + ) => void + /** + * Updates the data attribute of a node. + * + * @param id - id of the node to update + * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update + * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged + * + * @example + * updateNodeData('node-1', { label: 'A new label' }); + */ + updateNodeData: ( + id: string, + dataUpdate: Partial | ((node: NodeType) => Partial), + options?: { replace: boolean }, + ) => void /** applies default edge change handler */ applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[] /** applies default node change handler */ @@ -279,13 +247,17 @@ export interface Actions extends Omit { /** enable/disable node interaction (dragging, selecting etc) */ setInteractive: (isInteractive: boolean) => void /** set new state */ - setState: SetState + setState: ( + state: + | Partial> + | ((state: State) => Partial>), + ) => void /** return an object of graph values (elements, viewport transform) for storage and re-loading a graph */ toObject: () => FlowExportObject /** load graph from export obj */ fromObject: (obj: FlowExportObject) => Promise /** force update node internal data, if handle bounds are incorrect, you might want to use this */ - updateNodeInternals: UpdateNodeInternals + updateNodeInternals: (nodeIds?: string[]) => void /** start a connection */ startConnection: (startHandle: ConnectingHandle, position?: XYPosition, isClick?: boolean) => void /** update connection position */ @@ -294,14 +266,30 @@ export interface Actions extends Omit { endConnection: (event?: MouseEvent | TouchEvent, isClick?: boolean) => void /** internal position updater, you probably don't want to use this */ - updateNodePositions: UpdateNodePosition + updateNodePositions: (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void /** internal dimensions' updater, you probably don't want to use this */ - updateNodeDimensions: UpdateNodeDimensions + updateNodeDimensions: (updates: UpdateNodeDimensionsParams[]) => void - /** returns all node intersections */ - getIntersectingNodes: GetIntersectingNodes - /** check if a node is intersecting with a defined area */ - isNodeIntersecting: IsNodeIntersecting + /** + * Returns all nodes that intersect with the given node or rect. + * + * @param node - the node or rect to check for intersections + * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect + * @param nodes - optional nodes array to check for intersections + * + * @returns an array of intersecting nodes + */ + getIntersectingNodes: (node: NodeType | { id: Node['id'] } | Rect, partially?: boolean, nodes?: NodeType[]) => NodeType[] + /** + * Checks if the given node or rect intersects with the passed rect. + * + * @param node - the node or rect to check for intersections + * @param area - the rect to check for intersections + * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed react + * + * @returns true if the node or rect intersects with the given area + */ + isNodeIntersecting: (node: NodeType | { id: Node['id'] } | Rect, area: Rect, partially?: boolean) => boolean /** get a node's incomers */ getIncomers: (nodeOrId: Node | string) => GraphNode[] /** get a node's outgoers */ @@ -329,30 +317,10 @@ export interface Getters { getNodes: GraphNode[] /** all visible edges */ getEdges: GraphEdge[] - /** - * returns a node by id - * @deprecated use {@link Actions.findNode} instead - */ - getNode: (id: string) => GraphNode | undefined - /** - * returns an edge by id - * @deprecated use {@link Actions.findEdge} instead - */ - getEdge: (id: string) => GraphEdge | undefined /** returns all currently selected nodes */ getSelectedNodes: GraphNode[] /** returns all currently selected edges */ getSelectedEdges: GraphEdge[] - /** - * returns all nodes that are initialized, i.e. they have actual dimensions - * @deprecated - will be removed in next major version; use {@link useNodesInitialized} instead - */ - getNodesInitialized: GraphNode[] - /** - * returns a boolean flag whether all current nodes are initialized - * @deprecated - will be removed in next major version; use {@link useNodesInitialized} instead - */ - areNodesInitialized: boolean } export type ComputedGetters = {