refactor(core): data and event properties to be definitely typed

packages/core/src/composables/useEdgeHooks.ts

@@ -17,47 +17,47 @@ export default function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits
 
   edgeHooks.doubleClick.on((event) => {
     emits.edgeDoubleClick(event)
-    edge.events?.doubleClick?.(event)
+    edge.events.doubleClick?.(event)
   })
 
   edgeHooks.click.on((event) => {
     emits.edgeClick(event)
-    edge.events?.click?.(event)
+    edge.events.click?.(event)
   })
 
   edgeHooks.mouseEnter.on((event) => {
     emits.edgeMouseEnter(event)
-    edge.events?.mouseEnter?.(event)
+    edge.events.mouseEnter?.(event)
   })
 
   edgeHooks.mouseMove.on((event) => {
     emits.edgeMouseMove(event)
-    edge.events?.mouseMove?.(event)
+    edge.events.mouseMove?.(event)
   })
 
   edgeHooks.mouseLeave.on((event) => {
     emits.edgeMouseLeave(event)
-    edge.events?.mouseLeave?.(event)
+    edge.events.mouseLeave?.(event)
   })
 
   edgeHooks.contextMenu.on((event) => {
     emits.edgeContextMenu(event)
-    edge.events?.contextMenu?.(event)
+    edge.events.contextMenu?.(event)
   })
 
   edgeHooks.updateStart.on((event) => {
     emits.edgeUpdateStart(event)
-    edge.events?.updateStart?.(event)
+    edge.events.updateStart?.(event)
   })
 
   edgeHooks.update.on((event) => {
     emits.edgeUpdate(event)
-    edge.events?.update?.(event)
+    edge.events.update?.(event)
   })
 
   edgeHooks.updateEnd.on((event) => {
     emits.edgeUpdateEnd(event)
-    edge.events?.updateEnd?.(event)
+    edge.events.updateEnd?.(event)
   })
 
   return Object.entries(edgeHooks).reduce(

packages/core/src/composables/useNodeHooks.ts

@@ -17,47 +17,47 @@ export default function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits
 
   nodeHooks.doubleClick.on((event) => {
     emits.nodeDoubleClick(event)
-    node.events?.doubleClick?.(event)
+    node.events.doubleClick?.(event)
   })
 
   nodeHooks.click.on((event) => {
     emits.nodeClick(event)
-    node.events?.click?.(event)
+    node.events.click?.(event)
   })
 
   nodeHooks.mouseEnter.on((event) => {
     emits.nodeMouseEnter(event)
-    node.events?.mouseEnter?.(event)
+    node.events.mouseEnter?.(event)
   })
 
   nodeHooks.mouseMove.on((event) => {
     emits.nodeMouseMove(event)
-    node.events?.mouseMove?.(event)
+    node.events.mouseMove?.(event)
   })
 
   nodeHooks.mouseLeave.on((event) => {
     emits.nodeMouseLeave(event)
-    node.events?.mouseLeave?.(event)
+    node.events.mouseLeave?.(event)
   })
 
   nodeHooks.contextMenu.on((event) => {
     emits.nodeContextMenu(event)
-    node.events?.contextMenu?.(event)
+    node.events.contextMenu?.(event)
   })
 
   nodeHooks.dragStart.on((event) => {
     emits.nodeDragStart(event)
-    node.events?.dragStart?.(event)
+    node.events.dragStart?.(event)
   })
 
   nodeHooks.drag.on((event) => {
     emits.nodeDrag(event)
-    node.events?.drag?.(event)
+    node.events.drag?.(event)
   })
 
   nodeHooks.dragStop.on((event) => {
     emits.nodeDragStop(event)
-    node.events?.dragStop?.(event)
+    node.events.dragStop?.(event)
   })
 
   return Object.entries(nodeHooks).reduce(

packages/core/src/types/edge.ts

@@ -112,6 +112,8 @@ export type GraphEdge<Data = ElementData, CustomEvents extends Record<string, Cu
   z?: number
   sourceNode: GraphNode
   targetNode: GraphNode
+  data: Data
+  events: Partial<EdgeEventsHandler<CustomEvents>>
 } & EdgePositions
 
 /** these props are passed to edge components */
@@ -143,9 +145,9 @@ export interface EdgeProps<Data = ElementData, CustomEvents = {}> {
   markerStart?: string
   markerEnd?: string
   curvature?: number
-  data?: Data
+  data: Data
   /** contextual and custom events of edge */
-  events?: Partial<EdgeEventsOn<CustomEvents>>
+  events: EdgeEventsOn<CustomEvents>
 }
 
 /** these props are passed to smooth step edges */
@@ -178,9 +180,9 @@ export interface SmoothStepEdgeProps<Data = ElementData, CustomEvents = {}> exte
   markerEnd?: string
   borderRadius?: number
   offset?: number
-  data?: Data
+  data: Data
   /** contextual and custom events of edge */
-  events?: Partial<EdgeEventsOn<CustomEvents>>
+  events: EdgeEventsOn<CustomEvents>
 }
 
 export interface BaseEdgeProps {

packages/core/src/types/node.ts

@@ -83,6 +83,8 @@ export interface GraphNode<Data = ElementData, CustomEvents extends Record<strin
   dimensions: Dimensions
   isParent: boolean
   selected: boolean
+  data: Data
+  events: Partial<NodeEventsHandler<CustomEvents>>
 }
 
 /** these props are passed to node components */
@@ -123,7 +125,7 @@ export interface NodeProps<Data = ElementData, CustomEvents = {}> {
   dragHandle?: string
 
   /** additional data of node */
-  data?: Data
+  data: Data
   /** contextual and custom events of node */
-  events?: Partial<NodeEventsOn<CustomEvents>>
+  events: NodeEventsOn<CustomEvents>
 }

packages/core/src/utils/graph.ts

@@ -75,6 +75,8 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
       selectable: undefined,
       connectable: undefined,
       ...defaults,
+      data: node.data || {},
+      events: node.events || {},
     }
   }
 
@@ -100,7 +102,8 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
         targetY: 0,
         updatable: edge.updatable,
         selectable: edge.selectable,
-        data: edge.data,
+        data: edge.data || {},
+        events: edge.events || {},
         ...defaults,
       } as GraphEdge)
     : defaults