Skip to content

Commit 9d3b534

Browse files
committed
refactor(core,nodes)!: use NodeBase to extend Node type
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
1 parent 3aff262 commit 9d3b534

File tree

2 files changed

+17
-148
lines changed

2 files changed

+17
-148
lines changed

packages/core/src/types/flow.ts

Lines changed: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,12 @@ import type {
1515
} from './connection'
1616
import type { PanOnScrollMode } from './zoom'
1717
import type { EdgeTypesObject, NodeTypesObject } from './components'
18-
import type { CustomEvent, EdgeMouseEvent, EdgeUpdateEvent, MouseTouchEvent, NodeDragEvent, NodeMouseEvent } from './hooks'
18+
import type { EdgeMouseEvent, EdgeUpdateEvent, MouseTouchEvent, NodeDragEvent, NodeMouseEvent } from './hooks'
1919
import type { ValidConnectionFunc } from './handle'
2020
import type { EdgeChange, NodeChange } from './changes'
2121
import type { VueFlowStore } from './store'
2222

23-
// todo: should be object type
24-
export type ElementData = any
25-
26-
/**
27-
* @deprecated - will be removed in the next major version
28-
* A flow element (after parsing into state)
29-
*/
30-
export type FlowElement<
31-
NodeData = ElementData,
32-
EdgeData = ElementData,
33-
NodeEvents extends Record<string, CustomEvent> = any,
34-
EdgeEvents extends Record<string, CustomEvent> = any,
35-
> = GraphNode<NodeData, NodeEvents> | GraphEdge<EdgeData, EdgeEvents>
36-
37-
/**
38-
* @deprecated - will be removed in the next major version
39-
* An array of flow elements (after parsing into state)
40-
*/
41-
export type FlowElements<
42-
NodeData = ElementData,
43-
EdgeData = ElementData,
44-
NodeEvents extends Record<string, CustomEvent> = any,
45-
EdgeEvents extends Record<string, CustomEvent> = any,
46-
> = FlowElement<NodeData, EdgeData, NodeEvents, EdgeEvents>[]
47-
48-
/** Initial elements (before parsing into state) */
49-
export type Element<
50-
NodeData = ElementData,
51-
EdgeData = ElementData,
52-
NodeEvents extends Record<string, CustomEvent> = any,
53-
EdgeEvents extends Record<string, CustomEvent> = any,
54-
> = Node<NodeData, NodeEvents> | Edge<EdgeData, EdgeEvents>
55-
56-
export type Elements<
57-
NodeData = ElementData,
58-
EdgeData = ElementData,
59-
NodeEvents extends Record<string, CustomEvent> = any,
60-
EdgeEvents extends Record<string, CustomEvent> = any,
61-
> = Element<NodeData, EdgeData, NodeEvents, EdgeEvents>[]
62-
63-
export type MaybeElement = Node | Edge | Connection | FlowElement | Element
23+
export type MaybeElement = Node | Edge | Connection | Element
6424

6525
export interface CustomThemeVars {
6626
[key: string]: string | number | undefined
@@ -75,12 +35,8 @@ export type CSSVars =
7535
| '--vf-handle'
7636

7737
export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] }
78-
export type Styles = CSSProperties & ThemeVars & CustomThemeVars
79-
/** @deprecated will be removed in the next major version */
80-
export type ClassFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => string | void
8138

82-
/** @deprecated will be removed in the next major version */
83-
export type StyleFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => Styles | void
39+
export type Styles = CSSProperties & ThemeVars & CustomThemeVars
8440

8541
/** Handle Positions */
8642
export enum Position {
@@ -142,11 +98,6 @@ export interface FlowExportObject {
14298

14399
export interface FlowProps {
144100
id?: string
145-
/**
146-
* all elements (nodes + edges)
147-
* @deprecated use {@link FlowProps.nodes} & {@link FlowProps.nodes} instead
148-
*/
149-
modelValue?: Elements
150101
nodes?: Node[]
151102
edges?: Edge[]
152103
/** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
@@ -306,7 +257,6 @@ export interface FlowEmits {
306257
(event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
307258

308259
/** v-model event definitions */
309-
(event: 'update:modelValue', value: FlowElements): void
310260
(event: 'update:nodes', value: GraphNode[]): void
311261
(event: 'update:edges', value: GraphEdge[]): void
312262
}

packages/core/src/types/node.ts

Lines changed: 14 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import type { Component, VNode } from 'vue'
2-
import type { ClassFunc, Dimensions, ElementData, Position, StyleFunc, Styles, XYPosition, XYZPosition } from './flow'
3-
import type { NodeComponent } from './components'
2+
import type { NodeBase } from '@xyflow/system'
3+
import type { Dimensions, Position, Styles, XYPosition, XYZPosition } from './flow'
44
import type { HandleConnectable, HandleElement, ValidConnectionFunc } from './handle'
5-
import type { CustomEvent, NodeEventsHandler, NodeEventsOn } from './hooks'
5+
import type { NodeEventsOn } from './hooks'
6+
7+
export type ElementData = Record<string, unknown>
68

79
/** Defined as [[x-from, y-from], [x-to, y-to]] */
810
export type CoordinateExtent = [extentFrom: [fromX: number, fromY: number], extentTo: [toX: number, toY: number]]
@@ -29,93 +31,23 @@ export type WidthFunc = (node: GraphNode) => number | string | void
2931
/** @deprecated will be removed in next major release */
3032
export type HeightFunc = (node: GraphNode) => number | string | void
3133

32-
export interface Node<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any, Type extends string = string> {
33-
/** Unique node id */
34-
id: string
35-
/**
36-
* @deprecated - will be removed in next major release and replaced with `{ data: { label: string | VNode | Component } }`
37-
* A node label
38-
*/
39-
label?: string | VNode | Component
40-
/** initial node position x, y */
41-
position: XYPosition
42-
/** node type, can be a default type or a custom type */
43-
type?: Type
44-
/** handle position */
45-
targetPosition?: Position
46-
/** handle position */
47-
sourcePosition?: Position
48-
/** Disable/enable dragging node */
49-
draggable?: boolean
50-
/** Disable/enable selecting node */
51-
selectable?: boolean
34+
/**
35+
* The node data structure that gets used for the nodes prop.
36+
* @public
37+
*/
38+
export interface Node<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string>
39+
extends Omit<NodeBase<NodeData, NodeType>, 'connectable' | 'extent' | 'origin'> {
5240
/** Disable/enable connecting node */
5341
connectable?: HandleConnectable
54-
/** Disable/enable focusing node (a11y) */
55-
focusable?: boolean
56-
/** Disable/enable deleting node */
57-
deletable?: boolean
58-
/** element selector as drag handle for node (can only be dragged from the dragHandle el) */
59-
dragHandle?: string
60-
/**
61-
* @deprecated will be removed in next major release
62-
* called when used as target for new connection
63-
*/
64-
isValidTargetPos?: ValidConnectionFunc
65-
/**
66-
* @deprecated will be removed in next major release
67-
* called when used as source for new connection
68-
*/
69-
isValidSourcePos?: ValidConnectionFunc
7042
/** define node extent, i.e. area in which node can be moved */
7143
extent?: CoordinateExtent | CoordinateExtentRange | 'parent'
72-
/** expands parent area to fit child node */
73-
expandParent?: boolean
74-
/**
75-
* todo: rename to `parentId` in next major release
76-
* define node as a child node by setting a parent node id
77-
*/
78-
parentNode?: string
79-
/**
80-
* Fixed width of node, applied as style
81-
* You can pass a number which will be used in pixel values (width: 300 -> width: 300px)
82-
* or pass a string with units (width: `10rem` -> width: 10rem)
83-
*/
84-
width?: number | string | WidthFunc
85-
/**
86-
* Fixed height of node, applied as style
87-
* You can pass a number which will be used in pixel values (height: 300 -> height: 300px)
88-
* or pass a string with units (height: `10rem` -> height: 10rem)
89-
*/
90-
height?: number | string | HeightFunc
91-
9244
/** Additional class names, can be a string or a callback returning a string (receives current flow element) */
93-
class?: string | string[] | Record<string, any> | ClassFunc<GraphNode<Data, CustomEvents>>
45+
class?: string | string[] | Record<string, any>
9446
/** Additional styles, can be an object or a callback returning an object (receives current flow element) */
95-
style?: Styles | StyleFunc<GraphNode<Data, CustomEvents>>
96-
/** Is node hidden */
97-
hidden?: boolean
98-
/**
99-
* @deprecated - will be removed in the next major release
100-
* overwrites current node type
101-
*/
102-
template?: NodeComponent
103-
/** Additional data that is passed to your custom components */
104-
data?: Data
105-
/**
106-
* @deprecated - will be removed in the next major release
107-
* contextual and custom events that are passed to your custom components
108-
*/
109-
events?: Partial<NodeEventsHandler<CustomEvents>>
110-
zIndex?: number
111-
ariaLabel?: string
47+
style?: Styles
11248
}
11349

114-
export interface GraphNode<
115-
Data = ElementData,
116-
CustomEvents extends Record<string, CustomEvent> = any,
117-
Type extends string = string,
118-
> extends Node<Data, CustomEvents, Type> {
50+
export interface GraphNode<Data extends ElementData = ElementData, Type extends string = string> extends Node<Data, Type> {
11951
/** absolute position in relation to parent elements + z-index */
12052
computedPosition: XYZPosition
12153
handleBounds: NodeHandleBounds
@@ -125,10 +57,6 @@ export interface GraphNode<
12557
selected: boolean
12658
resizing: boolean
12759
dragging: boolean
128-
data: Data
129-
/** @deprecated will be removed in the next major version */
130-
events: Partial<NodeEventsHandler<CustomEvents>>
131-
type: Type
13260
}
13361

13462
/** these props are passed to node components */
@@ -196,12 +124,3 @@ export interface NodeProps<Data = ElementData, CustomEvents = object, Type exten
196124
*/
197125
events: NodeEventsOn<CustomEvents>
198126
}
199-
200-
/**
201-
* Transform a Node type to a GraphNode type
202-
*/
203-
export type ToGraphNode<T extends Node> = GraphNode<
204-
T extends Node<infer Data> ? Data : never,
205-
T extends Node<any, infer Events> ? Events : never,
206-
T extends Node<any, any, infer Type> ? Type : never
207-
>

0 commit comments

Comments
 (0)