From 221698ccf38cb85501155c7992283316a0f4f071 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:56:10 +0200 Subject: [PATCH 1/9] refactor(core)!: remove deprecated store options, actions & getters Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/types/store.ts | 352 +++++++++++++++++-------------- 1 file changed, 198 insertions(+), 154 deletions(-) diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index 481922fb5..ddac9f0a9 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -1,11 +1,9 @@ -import type { CSSProperties, ComputedRef, ToRefs } from 'vue' +import type { ComputedRef, ToRefs } from 'vue' import type { KeyFilter } from '@vueuse/core' import type { ViewportHelper } from '../composables' import type { Dimensions, ElementData, - Elements, - FlowElements, FlowExportObject, FlowOptions, FlowProps, @@ -16,15 +14,7 @@ import type { XYPosition, } from './flow' import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components' -import type { - Connection, - ConnectionLineOptions, - ConnectionLineType, - ConnectionLookup, - ConnectionMode, - ConnectionStatus, - Connector, -} from './connection' +import type { ConnectionLineOptions, ConnectionLookup, ConnectionMode, ConnectionStatus, Connector } from './connection' import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge' import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node' import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportTransform } from './zoom' @@ -89,10 +79,6 @@ export interface State extends Omit { connectionMode: ConnectionMode connectionLineOptions: ConnectionLineOptions - /** @deprecated use {@link ConnectionLineOptions.type} */ - connectionLineType: ConnectionLineType | null - /** @deprecated use {@link ConnectionLineOptions.style} */ - connectionLineStyle: CSSProperties | null connectionStartHandle: ConnectingHandle | null connectionEndHandle: ConnectingHandle | null connectionClickStartHandle: ConnectingHandle | null @@ -161,173 +147,258 @@ export interface State extends Omit { 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 - -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 interface Actions extends Omit { + /** + * Sets nodes. + * + * @param nodes - the nodes to set or a function that receives the current nodes and returns the new nodes + */ + setNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void -export type UpdateEdgeData = = any>( - id: string, - dataUpdate: Partial | ((edge: GraphEdge) => Partial), - options?: { replace: boolean }, -) => void + /** + * Sets edges. + * + * @param edges - the edges to set or a function that receives the current edges and returns the new edges + */ + setEdges: (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void -export type SetState = ( - state: - | Partial> - | ((state: State) => Partial>), -) => void + /** + * Adds nodes. + * + * @param nodes - the nodes to add + */ + addNodes: (nodes: Node | Node[]) => void -export type UpdateNodePosition = (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void + /** + * Adds edges. + * + * @param edges - the edges to add + */ + addEdges: (edges: Edge | Edge[]) => void -export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => void + /** + * Removes nodes from state. + * + * @param nodes - the nodes or its id(s) to remove or a function that receives the current nodes and returns the nodes or its id(s) to remove + * @param options - extra options for the removal + * @param options.removeConnectedEdges - if true, connected edges will be removed as well + * @param options.removeChildren - if true, children will be removed as well + */ + removeNodes: ( + nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]), + options?: { removeConnectedEdges?: boolean; removeChildren?: boolean }, + ) => void -export type UpdateNodeInternals = (nodeIds?: string[]) => void + /** + * Removes edges from state. + * + * @param edges - the edges or its id(s) to remove or a function that receives the current edges and returns the edges or its id(s) to remove + */ + removeEdges: ( + edges: (string | Edge) | (Edge | string)[] | ((edges: GraphEdge[]) => (string | Edge) | (Edge | string)[]), + ) => void -export type FindNode = = any>( - id: string | undefined | null, -) => GraphNode | undefined + /** + * Get a node by id. + * + * @param id - the node id + */ + getNode: = any>( + id: string, + ) => GraphNode | undefined -export type FindEdge = = any>( - id: string | undefined | null, -) => GraphEdge | undefined + /** + * Get a edge by id. + * + * @param id - the edge id + */ + getEdge: = any>( + id: string, + ) => GraphEdge | undefined -export type GetIntersectingNodes = ( - node: (Partial & { id: Node['id'] }) | Rect, - partially?: boolean, - nodes?: GraphNode[], -) => GraphNode[] + /** + * Updates an edge. + * + * @param id - id of the edge to update + * @param edgeUpdate - the edge update as an object or a function that receives the current edge and returns the edge update + * @param options.replace - if true, the edge is replaced with the edge update, otherwise the changes get merged + * + * @example + * updateEdge('edge-1', (edge) => ({ label: 'A new label' })); + */ + updateEdge: ( + id: string, + edgeUpdate: Partial | ((edge: GraphEdge) => Partial), + options?: { replace: boolean }, + ) => void -export type UpdateNode = = any>( - id: string, - nodeUpdate: Partial> | ((node: GraphNode) => Partial>), - options?: { replace: boolean }, -) => void + /** + * 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: GraphEdge) => Partial), + options?: { replace: boolean }, + ) => void -export type UpdateNodeData = = any>( - id: string, - dataUpdate: Partial | ((node: GraphNode) => 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: GraphNode) => Partial), + options?: { replace: boolean }, + ) => void -export type IsNodeIntersecting = (node: (Partial & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean + /** + * 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 -export interface Actions extends Omit { - /** 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 */ - setEdges: SetEdges - /** parses nodes and adds to state */ - addNodes: AddNodes - /** parses edges and adds to state */ - addEdges: AddEdges - /** remove nodes (and possibly connected edges and children) from state */ - removeNodes: RemoveNodes - /** remove edges from state */ - removeEdges: RemoveEdges - /** find a node by id */ - findNode: FindNode - /** 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 /** applies default edge change handler */ 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 */ addSelectedNodes: (nodes: GraphNode[]) => void + /** manually unselect edges and remove from state */ 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 d3 */ setMinZoom: (zoom: number) => void + /** apply max zoom value to d3 */ setMaxZoom: (zoom: number) => void + /** apply translate extent to d3 */ setTranslateExtent: (translateExtent: CoordinateExtent) => void + /** apply extent to nodes */ setNodeExtent: (nodeExtent: CoordinateExtent | CoordinateExtentRange) => void + setPaneClickDistance: (distance: number) => void + /** enable/disable node interaction (dragging, selecting etc) */ setInteractive: (isInteractive: boolean) => void - /** set new state */ - setState: SetState + + /** + * Set the state. + * + * @param state - the state to set or a function that receives the current state and returns the new state + */ + 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 */ updateConnection: (position: XYPosition, result?: ConnectingHandle | null, status?: ConnectionStatus | null) => void + /** end (or cancel) a connection */ endConnection: (event?: MouseEvent | TouchEvent, isClick?: boolean) => void - /** internal position updater, you probably don't want to use this */ - updateNodePositions: UpdateNodePosition - /** internal dimensions' updater, you probably don't want to use this */ - updateNodeDimensions: UpdateNodeDimensions + /** + * Update node positions. + * + * internal position updater, you shouldn't use this + * + * @internal + * @param dragItems - the drag items + * @param changed - if the positions have changed + * @param dragging - if the items are currently being dragged + */ + updateNodePositions: (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void + + /** + * Update node dimensions. + * + * internal dimension updater, you shouldn't use this + * + * @internal + * @param updates - the updates + */ + updateNodeDimensions: (updates: UpdateNodeDimensionsParams[]) => void + + /** + * Check if a node or a rect is intersecting with other nodes. + * + * @param nodeOrRect - 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 + */ + getIntersectingNodes: ( + nodeOrRect: (Partial & { id: Node['id'] }) | Rect, + partially?: boolean, + nodes?: GraphNode[], + ) => GraphNode[] + + /** + * Check if a node or a rect is intersecting with the passed rect. + * + * @param nodeOrRect - 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 + */ + isNodeIntersecting: (nodeOrRect: (Partial & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean - /** returns all node intersections */ - getIntersectingNodes: GetIntersectingNodes - /** check if a node is intersecting with a defined area */ - isNodeIntersecting: IsNodeIntersecting /** get a node's incomers */ getIncomers: (nodeOrId: Node | string) => GraphNode[] + /** get a node's outgoers */ getOutgoers: (nodeOrId: Node | string) => GraphNode[] + /** get a node's connected edges */ getConnectedEdges: (nodesOrId: Node[] | string) => GraphEdge[] + /** pan the viewport; return indicates if a transform has happened or not */ panBy: (delta: XYPosition) => boolean - /** viewport helper instance */ - viewportHelper: ComputedRef /** reset state to defaults */ $reset: () => void @@ -341,41 +412,14 @@ export interface Getters { getEdgeTypes: Record /** returns object containing current node types */ getNodeTypes: Record - /** - * get all elements - * @deprecated - will be removed in next major version - */ - getElements: FlowElements /** all visible node */ 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 elements */ - getSelectedElements: FlowElements /** 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 = { From 596b22903d6ee38442eecaa7bf264d2fe53b2964 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:56:57 +0200 Subject: [PATCH 2/9] refactor(core)!: remove FlowOptions type Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/types/flow.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index 85fef24e0..bf52df041 100644 --- a/packages/core/src/types/flow.ts +++ b/packages/core/src/types/flow.ts @@ -231,12 +231,6 @@ export interface FlowProps { autoPanSpeed?: number } -/** - * All available VueFlow options - * @deprecated use the {@link FlowProps} type instead - */ -export type FlowOptions = FlowProps - export interface FlowEmits { (event: 'nodesChange', changes: NodeChange[]): void (event: 'edgesChange', changes: EdgeChange[]): void From bfb0408ead71cff4f6e29e361f4d514d29f61b96 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:06:30 +0200 Subject: [PATCH 3/9] refactor(core)!: remove all deprecated types Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/types/edge.ts | 53 ++++----------- packages/core/src/types/flow.ts | 77 +--------------------- packages/core/src/types/hooks.ts | 2 - packages/core/src/types/node.ts | 107 ++++--------------------------- packages/core/src/types/panel.ts | 14 +--- packages/core/src/types/store.ts | 15 ++--- packages/core/src/types/zoom.ts | 4 -- 7 files changed, 32 insertions(+), 240 deletions(-) diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts index a08ca9372..a504d3fac 100644 --- a/packages/core/src/types/edge.ts +++ b/packages/core/src/types/edge.ts @@ -1,8 +1,7 @@ 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' /** Edge markers */ export enum MarkerType { @@ -58,11 +57,7 @@ export interface EdgeLabelOptions { labelBgBorderRadius?: number } -export interface DefaultEdge< - Data = ElementData, - CustomEvents extends Record = any, - Type extends string = string, -> extends EdgeLabelOptions { +export interface DefaultEdge extends EdgeLabelOptions { /** Unique edge id */ id: string /** An edge label */ @@ -92,9 +87,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 */ @@ -103,8 +98,6 @@ export interface DefaultEdge< template?: EdgeComponent /** Additional data that is passed to your custom components */ data?: Data - /** @deprecated will be removed in the next major version */ - events?: Partial> /** Aria label for edge (a11y) */ zIndex?: number ariaLabel?: string | null @@ -115,10 +108,7 @@ export interface SmoothStepPathOptions { borderRadius?: number } -export type SmoothStepEdgeType = any> = DefaultEdge< - Data, - CustomEvents -> & { +export type SmoothStepEdgeType = DefaultEdge & { type: 'smoothstep' pathOptions?: SmoothStepPathOptions } @@ -127,18 +117,15 @@ export interface BezierPathOptions { curvature?: number } -export type BezierEdgeType = any> = DefaultEdge< - Data, - CustomEvents -> & { +export type BezierEdgeType = DefaultEdge & { type: 'default' pathOptions?: BezierPathOptions } -export type Edge = any, Type extends string = string> = - | DefaultEdge - | SmoothStepEdgeType - | BezierEdgeType +export type Edge = + | DefaultEdge + | SmoothStepEdgeType + | BezierEdgeType export type DefaultEdgeOptions = Omit @@ -150,24 +137,16 @@ export interface EdgePositions { } /** Internal edge type */ -export type GraphEdge< - Data = ElementData, - CustomEvents extends Record = any, - Type extends string = string, -> = Edge & { +export type GraphEdge = Edge & { selected: boolean sourceNode: GraphNode targetNode: GraphNode data: Data - /** @deprecated will be removed in the next major version */ - events: Partial> type: Type } & EdgePositions /** these props are passed to edge components */ -export interface EdgeProps - extends EdgeLabelOptions, - EdgePositions { +export interface EdgeProps extends EdgeLabelOptions, EdgePositions { id: string sourceNode: GraphNode targetNode: GraphNode @@ -188,8 +167,6 @@ export interface EdgeProps } export interface BaseEdgeProps extends EdgeLabelOptions { @@ -223,9 +200,3 @@ export type SmoothStepEdgeProps = EdgePositions & Omit & Pick & SmoothStepPathOptions - -export type ToGraphEdge = GraphEdge< - T extends Edge ? Data : never, - T extends Edge ? CustomEvents : never, - T extends Edge ? Type : never -> diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index bf52df041..988a7fb9f 100644 --- a/packages/core/src/types/flow.ts +++ b/packages/core/src/types/flow.ts @@ -4,15 +4,7 @@ import type { D3ZoomEvent } from 'd3-zoom' import type { VueFlowError } from '../utils' import type { DefaultEdgeOptions, Edge, EdgeProps, EdgeUpdatable, GraphEdge } from './edge' import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node, NodeProps } from './node' -import type { - Connection, - ConnectionLineOptions, - ConnectionLineProps, - ConnectionLineType, - ConnectionMode, - Connector, - OnConnectStartParams, -} from './connection' +import type { Connection, ConnectionLineOptions, ConnectionLineProps, ConnectionMode, OnConnectStartParams } from './connection' import type { PanOnScrollMode, ViewportTransform } from './zoom' import type { EdgeTypesObject, NodeTypesObject } from './components' import type { CustomEvent, EdgeMouseEvent, EdgeUpdateEvent, NodeDragEvent, NodeMouseEvent } from './hooks' @@ -23,28 +15,6 @@ import type { VueFlowStore } from './store' // todo: should be object type export type ElementData = any -/** - * @deprecated - will be removed in the next major version - * A flow element (after parsing into state) - */ -export type FlowElement< - NodeData = ElementData, - EdgeData = ElementData, - NodeEvents extends Record = any, - EdgeEvents extends Record = any, -> = GraphNode | GraphEdge - -/** - * @deprecated - will be removed in the next major version - * An array of flow elements (after parsing into state) - */ -export type FlowElements< - NodeData = ElementData, - EdgeData = ElementData, - NodeEvents extends Record = any, - EdgeEvents extends Record = any, -> = FlowElement[] - /** Initial elements (before parsing into state) */ export type Element< NodeData = ElementData, @@ -60,11 +30,7 @@ export type Elements< EdgeEvents extends Record = any, > = Element[] -export type MaybeElement = Node | Edge | Connection | FlowElement | Element - -export interface CustomThemeVars { - [key: string]: string | number | undefined -} +export type MaybeElement = Node | Edge | Connection | Element export type CSSVars = | '--vf-node-color' @@ -75,12 +41,8 @@ export type CSSVars = | '--vf-handle' export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] } -export type Styles = CSSProperties & ThemeVars & CustomThemeVars -/** @deprecated will be removed in the next major version */ -export type ClassFunc = (element: ElementType) => string | void -/** @deprecated will be removed in the next major version */ -export type StyleFunc = (element: ElementType) => Styles | void +export type Styles = CSSProperties & ThemeVars /** Handle Positions */ export enum Position { @@ -126,27 +88,12 @@ 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: ViewportTransform } export interface FlowProps { id?: string - /** - * all elements (nodes + edges) - * @deprecated use {@link FlowProps.nodes} & {@link FlowProps.nodes} instead - */ - modelValue?: Elements nodes?: Node[] edges?: Edge[] /** either use the edgeTypes prop to define your edge-types or use slots (