refactor(core)!: remove deprecated options

packages/core/src/components/ConnectionLine/index.ts

@@ -23,19 +23,17 @@ const ConnectionLine = defineComponent({
       connectionStartHandle,
       connectionEndHandle,
       connectionPosition,
-      connectionLineType,
-      connectionLineStyle,
       connectionLineOptions,
       connectionStatus,
       viewport,
-      findNode,
+      getNode,
     } = useVueFlow()
 
     const connectionLineComponent = inject(Slots)?.['connection-line']
 
-    const fromNode = computed(() => findNode(connectionStartHandle.value?.nodeId))
+    const fromNode = computed(() => getNode(connectionStartHandle.value!.nodeId!))
 
-    const toNode = computed(() => findNode(connectionEndHandle.value?.nodeId) ?? null)
+    const toNode = computed(() => getNode(connectionEndHandle.value!.nodeId!) ?? null)
 
     const toXY = computed(() => {
       return {
@@ -99,7 +97,7 @@ const ConnectionLine = defineComponent({
         return null
       }
 
-      const type = connectionLineType.value ?? connectionLineOptions.value.type ?? ConnectionLineType.Bezier
+      const type = connectionLineOptions.value.type ?? ConnectionLineType.Bezier
 
       let dAttr = ''
 
@@ -152,10 +150,7 @@ const ConnectionLine = defineComponent({
             : h('path', {
                 'd': dAttr,
                 'class': [connectionLineOptions.value.class, connectionStatus, 'vue-flow__connection-path'],
-                'style': {
-                  ...connectionLineStyle.value,
-                  ...connectionLineOptions.value.style,
-                },
+                'style': connectionLineOptions.value.style,
                 'marker-end': markerEnd.value,
                 'marker-start': markerStart.value,
               }),

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -1,7 +1,7 @@
 import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
 import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
 import { ConnectionMode, Position } from '../../types'
-import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
+import { useHandle, useVueFlow } from '../../composables'
 import { EdgeId, EdgeRef, Slots } from '../../context'
 import {
   ARIA_EDGE_DESC_KEY,
@@ -33,8 +33,8 @@ const EdgeWrapper = defineComponent({
       noPanClassName,
       getEdgeTypes,
       removeSelectedEdges,
-      findEdge,
-      findNode,
+      getEdge,
+      getNode,
       isValidConnection,
       multiSelectionActive,
       disableKeyboardA11y,
@@ -43,9 +43,7 @@ const EdgeWrapper = defineComponent({
       edgesFocusable,
     } = useVueFlow()
 
-    const edge = computed(() => findEdge(props.id)!)
-
-    const hooks = useEdgeHooks(edge.value, emits)
+    const edge = computed(() => getEdge(props.id)!)
 
     const slots = inject(Slots)
 
@@ -74,9 +72,6 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
-    const edgeClass = computed(() => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class))
-    const edgeStyle = computed(() => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style))
-
     const edgeCmp = computed(() => {
       const name = edge.value.type || 'default'
 
@@ -116,8 +111,8 @@ const EdgeWrapper = defineComponent({
     })
 
     return () => {
-      const sourceNode = findNode(edge.value.source)
-      const targetNode = findNode(edge.value.target)
+      const sourceNode = getNode(edge.value.source)
+      const targetNode = getNode(edge.value.target)
       const pathOptions = 'pathOptions' in edge.value ? edge.value.pathOptions : {}
 
       if (!sourceNode && !targetNode) {
@@ -183,7 +178,7 @@ const EdgeWrapper = defineComponent({
             'vue-flow__edge',
             `vue-flow__edge-${edgeCmp.value === false ? 'default' : edge.value.type || 'default'}`,
             noPanClassName.value,
-            edgeClass.value,
+            edge.value.class,
             {
               updating: mouseOver.value,
               selected: edge.value.selected,
@@ -226,8 +221,7 @@ const EdgeWrapper = defineComponent({
                 labelBgPadding: edge.value.labelBgPadding,
                 labelBgBorderRadius: edge.value.labelBgBorderRadius,
                 data: edge.value.data,
-                events: { ...edge.value.events, ...hooks.on },
-                style: edgeStyle.value,
+                style: edge.value.style,
                 markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
                 markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,
                 sourcePosition,
@@ -296,11 +290,11 @@ const EdgeWrapper = defineComponent({
     }
 
     function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
-      hooks.emit.update({ event, edge: edge.value, connection })
+      emits.edgeUpdate({ event, edge: edge.value, connection })
     }
 
     function onEdgeUpdateEnd(event: MouseTouchEvent) {
-      hooks.emit.updateEnd({ event, edge: edge.value })
+      emits.edgeUpdateEnd({ event, edge: edge.value })
       updating.value = false
     }
 
@@ -316,7 +310,7 @@ const EdgeWrapper = defineComponent({
 
       edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
 
-      hooks.emit.updateStart({ event, edge: edge.value })
+      emits.edgeUpdateStart({ event, edge: edge.value })
 
       handlePointerDown(event)
     }
@@ -336,27 +330,27 @@ const EdgeWrapper = defineComponent({
         }
       }
 
-      hooks.emit.click(data)
+      emits.edgeClick(data)
     }
 
     function onEdgeContextMenu(event: MouseEvent) {
-      hooks.emit.contextMenu({ event, edge: edge.value })
+      emits.edgeContextMenu({ event, edge: edge.value })
     }
 
     function onDoubleClick(event: MouseEvent) {
-      hooks.emit.doubleClick({ event, edge: edge.value })
+      emits.edgeDoubleClick({ event, edge: edge.value })
     }
 
     function onEdgeMouseEnter(event: MouseEvent) {
-      hooks.emit.mouseEnter({ event, edge: edge.value })
+      emits.edgeMouseEnter({ event, edge: edge.value })
     }
 
     function onEdgeMouseMove(event: MouseEvent) {
-      hooks.emit.mouseMove({ event, edge: edge.value })
+      emits.edgeMouseMove({ event, edge: edge.value })
     }
 
     function onEdgeMouseLeave(event: MouseEvent) {
-      hooks.emit.mouseLeave({ event, edge: edge.value })
+      emits.edgeMouseLeave({ event, edge: edge.value })
     }
 
     function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {
@@ -374,9 +368,9 @@ const EdgeWrapper = defineComponent({
         if (unselect) {
           edgeEl.value?.blur()
 
-          removeSelectedEdges([findEdge(props.id)!])
+          removeSelectedEdges([getEdge(props.id)!])
         } else {
-          addSelectedEdges([findEdge(props.id)!])
+          addSelectedEdges([getEdge(props.id)!])
         }
       }
     }

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

@@ -1,4 +1,4 @@
-import type { Component, FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
@@ -7,22 +7,17 @@ import { Position } from '../../types'
 const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   sourcePosition = Position.Bottom,
   targetPosition = Position.Top,
-  label: _label,
   connectable = true,
-  isValidTargetPos,
-  isValidSourcePos,
   data,
 }) {
-  const label = data.label || _label
-
   return [
-    h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
-    h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
+    h(Handle, { type: 'target', position: targetPosition, connectable }),
+    typeof data.label !== 'string' && data.label ? h(data.label) : h('div', { innerHTML: data.label }),
+    h(Handle, { type: 'source', position: sourcePosition, connectable }),
   ]
 }
 
-DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable', 'data']
+DefaultNode.props = ['sourcePosition', 'targetPosition', 'connectable', 'data']
 DefaultNode.inheritAttrs = false
 DefaultNode.compatConfig = { MODE: 3 }
 

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

@@ -1,25 +1,21 @@
-import type { Component, FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
 import { Position } from '../../types'
 
 const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   sourcePosition = Position.Bottom,
-  label: _label,
   connectable = true,
-  isValidSourcePos,
   data,
 }) {
-  const label = data.label || _label
-
   return [
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
-    h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
+    typeof data.label !== 'string' && data.label ? h(data.label) : h('div', { innerHTML: data.label }),
+    h(Handle, { type: 'source', position: sourcePosition, connectable }),
   ]
 }
 
-InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable', 'data']
+InputNode.props = ['sourcePosition', 'connectable', 'data']
 InputNode.inheritAttrs = false
 InputNode.compatConfig = { MODE: 3 }
 

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

@@ -24,7 +24,7 @@ import {
   handleNodeClick,
 } from '../../utils'
 import { NodeId, NodeRef, Slots } from '../../context'
-import { isInputDOMNode, useDrag, useNode, useNodeHooks, useUpdateNodePositions, useVueFlow } from '../../composables'
+import { isInputDOMNode, useDrag, useNode, useUpdateNodePositions, useVueFlow } from '../../composables'
 import type { NodeComponent } from '../../types'
 
 interface Props {
@@ -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,42 +112,35 @@ const NodeWrapper = defineComponent({
       return false
     })
 
-    const { emit, on } = useNodeHooks(node, emits)
-
     const dragging = useDrag({
       id: props.id,
       el: nodeElement,
       disabled: () => !isDraggable.value,
       selectable: isSelectable,
       dragHandle: () => node.dragHandle,
       onStart(event) {
-        emit.dragStart(event)
+        emits.nodeDragStart(event)
       },
       onDrag(event) {
-        emit.drag(event)
+        emits.nodeDrag(event)
       },
       onStop(event) {
-        emit.dragStop(event)
+        emits.nodeDragStop(event)
       },
       onClick(event) {
         onSelectNode(event)
       },
     })
 
-    const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
-
     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 styles = node.style || {}
 
-      if (width) {
-        styles.width = typeof width === 'string' ? width : `${width}px`
+      if (node.width) {
+        styles.width = typeof node.width === 'string' ? node.width : `${node.width}px`
       }
 
-      if (height) {
-        styles.height = typeof height === 'string' ? height : `${height}px`
+      if (node.height) {
+        styles.height = typeof node.height === 'string' ? node.height : `${node.height}px`
       }
 
       return styles
@@ -260,7 +253,7 @@ const NodeWrapper = defineComponent({
               selectable: isSelectable.value,
               parent: node.isParent,
             },
-            getClass.value,
+            node.class,
           ],
           'style': {
             visibility: isInit.value ? 'visible' : 'hidden',
@@ -282,25 +275,20 @@ const NodeWrapper = defineComponent({
           'onKeydown': onKeyDown,
         },
         [
-          h(nodeCmp.value === false ? getNodeTypes.value.default : (nodeCmp.value as any), {
+          h(nodeCmp.value === false ? getNodeTypes.value.default : nodeCmp.value, {
             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,
           }),
@@ -336,28 +324,28 @@ const NodeWrapper = defineComponent({
 
     function onMouseEnter(event: MouseEvent) {
       if (!dragging?.value) {
-        emit.mouseEnter({ event, node })
+        emits.nodeMouseEnter({ event, node })
       }
     }
 
     function onMouseMove(event: MouseEvent) {
       if (!dragging?.value) {
-        emit.mouseMove({ event, node })
+        emits.nodeMouseMove({ event, node })
       }
     }
 
     function onMouseLeave(event: MouseEvent) {
       if (!dragging?.value) {
-        emit.mouseLeave({ event, node })
+        emits.nodeMouseLeave({ event, node })
       }
     }
 
     function onContextMenu(event: MouseEvent) {
-      return emit.contextMenu({ event, node })
+      return emits.nodeContextMenu({ event, node })
     }
 
     function onDoubleClick(event: MouseEvent) {
-      return emit.doubleClick({ event, node })
+      return emits.nodeDoubleClick({ event, node })
     }
 
     function onSelectNode(event: MouseEvent) {
@@ -373,7 +361,7 @@ const NodeWrapper = defineComponent({
         )
       }
 
-      emit.click({ event, node })
+      emits.nodeClick({ event, node })
     }
 
     function onKeyDown(event: KeyboardEvent) {