refactor(core): align node type(s) with xyflow system

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

Author: bcakmakoglu

packages/core/package.json

@@ -73,7 +73,7 @@
     "@vueuse/core": "^10.5.0",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "@xyflow/system": "^0.0.37"
+    "@xyflow/system": "^0.0.73"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.3",

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
         return slot
       }
 
-      let nodeType = node.template || getNodeTypes.value[name]
+      let nodeType = getNodeTypes.value[name]
 
       if (typeof nodeType === 'string') {
         if (instance) {
@@ -112,7 +112,7 @@ const NodeWrapper = defineComponent({
       return false
     })
 
-    const { emit, on } = useNodeHooks(node, emits)
+    const { emit } = useNodeHooks(emits)
 
     const dragging = useDrag({
       id: props.id,
@@ -139,15 +139,15 @@ const NodeWrapper = defineComponent({
     const getStyle = computed(() => {
       const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
 
-      const width = node.width instanceof Function ? node.width(node) : node.width
-      const height = node.height instanceof Function ? node.height(node) : node.height
+      const width = node.width
+      const height = node.height
 
       if (width) {
-        styles.width = typeof width === 'string' ? width : `${width}px`
+        styles.width = `${width}px`
       }
 
       if (height) {
-        styles.height = typeof height === 'string' ? height : `${height}px`
+        styles.height = `${height}px`
       }
 
       return styles
@@ -228,7 +228,7 @@ const NodeWrapper = defineComponent({
     // if extent is parent, we need dimensions to properly clamp the position
     if (
       node.extent === 'parent' ||
-      (typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')
+      (!!node.extent && typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')
     ) {
       until(() => isInit)
         .toBe(true)
@@ -286,21 +286,17 @@ const NodeWrapper = defineComponent({
             id: node.id,
             type: node.type,
             data: node.data,
-            events: { ...node.events, ...on },
             selected: node.selected,
             resizing: node.resizing,
             dragging: dragging.value,
             connectable: isConnectable.value,
             position: node.computedPosition,
             dimensions: node.dimensions,
-            isValidTargetPos: node.isValidTargetPos,
-            isValidSourcePos: node.isValidSourcePos,
             parent: node.parentNode,
             parentNodeId: node.parentNode,
             zIndex: node.computedPosition.z ?? zIndex.value,
             targetPosition: node.targetPosition,
             sourcePosition: node.sourcePosition,
-            label: node.label,
             dragHandle: node.dragHandle,
             onUpdateNodeInternals: updateInternals,
           }),

packages/core/src/composables/useHandle.ts

@@ -79,13 +79,7 @@ export function useHandle({
     const doc = getHostForElement(event.target as HTMLElement)
 
     if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
-      const node = findNode(toValue(nodeId))
-
-      let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
-
-      if (!isValidConnectionHandler && node) {
-        isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
-      }
+      const isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
 
       let closestHandle: ConnectionHandle | null
 
@@ -268,21 +262,15 @@ export function useHandle({
       return
     }
 
-    const isTarget = toValue(type) === 'target'
-
     if (!connectionClickStartHandle.value) {
       emits.clickConnectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId) })
 
       startConnection({ nodeId: toValue(nodeId), type: toValue(type), handleId: toValue(handleId) }, undefined, true)
     } else {
-      let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
+      const isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
 
       const node = findNode(toValue(nodeId))
 
-      if (!isValidConnectionHandler && node) {
-        isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
-      }
-
       if (node && (typeof node.connectable === 'undefined' ? nodesConnectable.value : node.connectable) === false) {
         return
       }

packages/core/src/composables/useNode.ts

@@ -1,5 +1,5 @@
 import { computed, inject, ref } from 'vue'
-import type { CustomEvent, ElementData } from '../types'
+import type { GraphNode, Node } from '../types'
 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 Node = Node>(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(nodeId)! as GraphNode<NodeType>
 
   if (!node) {
     emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nodeId))

packages/core/src/composables/useNodeHooks.ts

@@ -1,4 +1,4 @@
-import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '../types'
+import type { NodeEventsEmit, NodeEventsOn, VueFlowStore } from '../types'
 import { createExtendedEventHook } from '../utils'
 
 function createNodeHooks() {
@@ -20,52 +20,43 @@ function createNodeHooks() {
  *
  * @internal
  */
-export function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {
+export function useNodeHooks(emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {
   const nodeHooks = createNodeHooks()
 
   nodeHooks.doubleClick.on((event) => {
     emits.nodeDoubleClick(event)
-    node.events?.doubleClick?.(event)
   })
 
   nodeHooks.click.on((event) => {
     emits.nodeClick(event)
-    node.events?.click?.(event)
   })
 
   nodeHooks.mouseEnter.on((event) => {
     emits.nodeMouseEnter(event)
-    node.events?.mouseEnter?.(event)
   })
 
   nodeHooks.mouseMove.on((event) => {
     emits.nodeMouseMove(event)
-    node.events?.mouseMove?.(event)
   })
 
   nodeHooks.mouseLeave.on((event) => {
     emits.nodeMouseLeave(event)
-    node.events?.mouseLeave?.(event)
   })
 
   nodeHooks.contextMenu.on((event) => {
     emits.nodeContextMenu(event)
-    node.events?.contextMenu?.(event)
   })
 
   nodeHooks.dragStart.on((event) => {
     emits.nodeDragStart(event)
-    node.events?.dragStart?.(event)
   })
 
   nodeHooks.drag.on((event) => {
     emits.nodeDrag(event)
-    node.events?.drag?.(event)
   })
 
   nodeHooks.dragStop.on((event) => {
     emits.nodeDragStop(event)
-    node.events?.dragStop?.(event)
   })
 
   return Object.entries(nodeHooks).reduce(

packages/core/src/store/actions.ts

@@ -528,7 +528,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   }
 
   // todo: maybe we should use a more immutable approach, this is a bit too much mutation and hard to maintain
-  const updateNode: Actions['updateNode'] = (id, nodeUpdate, options = { replace: false }) => {
+  const updateNode: Actions['updateNode'] = <NodeType extends Node = Node>(id, nodeUpdate, options = { replace: false }) => {
     const node = findNode(id)
 
     if (!node) {
@@ -538,7 +538,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate
 
     if (options.replace) {
-      state.nodes.splice(state.nodes.indexOf(node), 1, nextNode as GraphNode)
+      state.nodes.splice(state.nodes.indexOf(node), 1, nextNode as GraphNode<NodeType>)
     } else {
       Object.assign(node, nextNode)
     }
@@ -722,7 +722,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         isParent: _____,
         resizing: ______,
         dragging: _______,
-        events: _________,
         ...rest
       } = node
 

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

@@ -75,11 +75,6 @@ export type CSSVars =
 
 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<ElementType extends FlowElement = FlowElement> = (element: ElementType) => string | void
-
-/** @deprecated will be removed in the next major version */
-export type StyleFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => Styles | void
 
 /** Handle Positions */
 export enum Position {

packages/core/src/types/hooks.ts

@@ -2,22 +2,22 @@ import type { EventHookOn, EventHookTrigger } from '@vueuse/core'
 import type { Viewport } from '@xyflow/system'
 import type { EventHookExtended, VueFlowError } from '../utils'
 import type { GraphEdge } from './edge'
-import type { GraphNode } from './node'
+import type { GraphNode, Node } from './node'
 import type { Connection, OnConnectStartParams } from './connection'
 import type { EdgeChange, NodeChange } from './changes'
 import type { VueFlowStore } from './store'
 
 export type MouseTouchEvent = MouseEvent | TouchEvent
 
-export interface NodeMouseEvent {
+export interface NodeMouseEvent<NodeType extends Node = Node> {
   event: MouseTouchEvent
-  node: GraphNode
+  node: GraphNode<NodeType>
 }
 
-export interface NodeDragEvent {
+export interface NodeDragEvent<NodeType extends Node = Node> {
   event: MouseTouchEvent
-  node: GraphNode
-  nodes: GraphNode[]
+  node: GraphNode<NodeType>
+  nodes: GraphNode<NodeType>[]
 }
 
 export interface EdgeMouseEvent {
@@ -104,37 +104,31 @@ export type FlowHooksEmit = Readonly<{
   [key in keyof FlowEvents]: EventHookTrigger<FlowEvents[key]>
 }>
 
-/**
- * To type `Args` (the event callback arguments) pass an array as argument list as first generic type
- * To type `Return` (the event callback return value) pass a value to the second generic type
- */
-export type CustomEvent<Args extends any[] = any[], Return = any> = (...args: Args) => Return
-
-type CustomEventHandlers<CustomEvents = object> = {
-  [key in keyof CustomEvents]: CustomEvents[key]
+export interface NodeEventsHandler<NodeType extends Node = Node> {
+  doubleClick: (event: NodeMouseEvent<NodeType>) => void | { off: () => void }
+  click: (event: NodeMouseEvent<NodeType>) => void | { off: () => void }
+  mouseEnter: (event: NodeMouseEvent<NodeType>) => void | { off: () => void }
+  mouseMove: (event: NodeMouseEvent<NodeType>) => void | { off: () => void }
+  mouseLeave: (event: NodeMouseEvent<NodeType>) => void | { off: () => void }
+  contextMenu: (event: NodeMouseEvent<NodeType>) => void | { off: () => void }
+  dragStart: (event: NodeDragEvent<NodeType>) => void | { off: () => void }
+  drag: (event: NodeDragEvent<NodeType>) => void | { off: () => void }
+  dragStop: (event: NodeDragEvent<NodeType>) => void | { off: () => void }
 }
 
-export type NodeEventsHandler<CustomEvents = object> = {
-  doubleClick: (event: NodeMouseEvent) => void | { off: () => void }
-  click: (event: NodeMouseEvent) => void | { off: () => void }
-  mouseEnter: (event: NodeMouseEvent) => void | { off: () => void }
-  mouseMove: (event: NodeMouseEvent) => void | { off: () => void }
-  mouseLeave: (event: NodeMouseEvent) => void | { off: () => void }
-  contextMenu: (event: NodeMouseEvent) => void | { off: () => void }
-  dragStart: (event: NodeDragEvent) => void | { off: () => void }
-  drag: (event: NodeDragEvent) => void | { off: () => void }
-  dragStop: (event: NodeDragEvent) => void | { off: () => void }
-} & CustomEventHandlers<CustomEvents>
-
-export type NodeEventsOn<CustomEvents = object> = {
-  [key in keyof NodeEventsHandler]: EventHookOn<NodeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
-} & CustomEventHandlers<CustomEvents>
+export type NodeEventsOn<NodeType extends Node = Node> = {
+  [key in keyof NodeEventsHandler<NodeType>]: EventHookOn<
+    NodeEventsHandler<NodeType>[key] extends (event: infer Event) => any ? Event : never
+  >
+}
 
-export type NodeEventsEmit<CustomEvents = object> = {
-  [key in keyof NodeEventsHandler]: EventHookTrigger<NodeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
-} & CustomEventHandlers<CustomEvents>
+export type NodeEventsEmit<NodeType extends Node = Node> = {
+  [key in keyof NodeEventsHandler<NodeType>]: EventHookTrigger<
+    NodeEventsHandler<NodeType>[key] extends (event: infer Event) => any ? Event : never
+  >
+}
 
-export type EdgeEventsHandler<CustomEvents = object> = {
+export interface EdgeEventsHandler {
   doubleClick: (event: EdgeMouseEvent) => void | { off: () => void }
   click: (event: EdgeMouseEvent) => void | { off: () => void }
   mouseEnter: (event: EdgeMouseEvent) => void | { off: () => void }
@@ -144,12 +138,12 @@ export type EdgeEventsHandler<CustomEvents = object> = {
   updateStart: (event: EdgeMouseEvent) => void | { off: () => void }
   update: (event: EdgeUpdateEvent) => void | { off: () => void }
   updateEnd: (event: EdgeMouseEvent) => void | { off: () => void }
-} & CustomEventHandlers<CustomEvents>
+}
 
-export type EdgeEventsOn<CustomEvents = object> = {
+export type EdgeEventsOn = {
   [key in keyof EdgeEventsHandler]: EventHookOn<EdgeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
-} & CustomEventHandlers<CustomEvents>
+}
 
-export type EdgeEventsEmit<CustomEvents = object> = {
+export type EdgeEventsEmit = {
   [key in keyof EdgeEventsHandler]: EventHookTrigger<EdgeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
-} & CustomEventHandlers<CustomEvents>
+}