refactor(nodes): Reduce node props

* Reduced node props down to essential and necessary props for custom nodes

src/components/Nodes/DefaultNode.vue

@@ -13,7 +13,6 @@ const props = withDefaults(defineProps<NodeProps>(), {
 <script lang="ts">
 export default {
   name: 'DefaultNode',
-  inheritAttrs: false,
 }
 </script>
 <template>
@@ -23,10 +22,8 @@ export default {
     :is-connectable="props.connectable"
     :is-valid-connection="props.isValidTargetPos"
   />
-  <slot v-bind="props">
-    <component :is="props.label" v-if="typeof props.label !== 'string'" />
-    <span v-else v-html="props.label"></span>
-  </slot>
+  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string'" />
+  <span v-else v-html="props.label" />
   <Handle
     type="source"
     :position="props.sourcePosition"

src/components/Nodes/InputNode.vue

@@ -12,14 +12,11 @@ const props = withDefaults(defineProps<NodeProps>(), {
 <script lang="ts">
 export default {
   name: 'InputNode',
-  inheritAttrs: false,
 }
 </script>
 <template>
-  <slot v-bind="props">
-    <component :is="props.label" v-if="typeof props.label !== 'string'" />
-    <span v-else v-html="props.label"></span>
-  </slot>
+  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string'" />
+  <span v-else v-html="props.label" />
   <Handle
     type="source"
     :position="props.sourcePosition"

src/components/Nodes/NodeWrapper.vue

@@ -16,7 +16,7 @@ interface NodeWrapperProps {
 
 const props = defineProps<NodeWrapperProps>()
 const node = useVModel(props, 'node')
-const { id, store } = useVueFlow()
+const { store } = useVueFlow()
 provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
@@ -93,8 +93,6 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
   store.hooks.nodeDragStop.trigger({ event, node: node.value })
 }
 
-const removeEmpty = (obj: Record<string, any>) => Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null))
-
 store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
 onMounted(() => {
   useResizeObserver(nodeElement, () => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]))
@@ -150,31 +148,45 @@ export default {
     >
       <slot
         v-bind="{
-          ...node,
-            nodeElement,
-            connectable: props.connectable,
-            draggable: props.draggable,
-            selectable: props.selectable,
-            zIndex: node.dragging || node.selected ? 1000 : node.computedPosition.z,
-            selected: !!node.selected,
-            hidden: !!node.hidden,
-            dragging: !!node.dragging,
-            parentNode: node.parentNode ? node.parentNode.id : undefined,
+             nodeElement,
+             id: node.id,
+             type: node.type,
+             data: node.data,
+             selected: !!node.selected,
+             isConnectable: props.connectable,
+             position: node.position,
+             computedPosition: node.computedPosition,
+             isValidTargetPos: node.isValidTargetPos,
+             isValidSourcePos: node.isValidSourcePos,
+             parentNode: node.parentNode ? node.parentNode.id : undefined,
+             dragging: !!node.dragging,
+             zIndex: node.dragging || node.selected ? 1000 : node.computedPosition.z,
+             targetPosition: node.targetPosition,
+             sourcePosition: node.sourcePosition,
+             label: node.label,
+             dragHandle: node.dragHandle,
         }"
       >
         <component
           :is="props.type ?? node.type"
           v-bind="{
-            ...node,
-            nodeElement,
-            connectable: props.connectable,
-            draggable: props.draggable,
-            selectable: props.selectable,
-            zIndex: node.dragging || node.selected ? 1000 : node.computedPosition.z,
-            selected: !!node.selected,
-            hidden: !!node.hidden,
-            dragging: !!node.dragging,
-            parentNode: node.parentNode ? node.parentNode.id : undefined,
+             nodeElement,
+             id: node.id,
+             type: node.type,
+             data: node.data,
+             selected: !!node.selected,
+             connectable: props.connectable,
+             position: node.position,
+             computedPosition: node.computedPosition,
+             isValidTargetPos: node.isValidTargetPos,
+             isValidSourcePos: node.isValidSourcePos,
+             parentNode: node.parentNode ? node.parentNode.id : undefined,
+             dragging: !!node.dragging,
+             zIndex: node.dragging || node.selected ? 1000 : node.computedPosition.z,
+             targetPosition: node.targetPosition,
+             sourcePosition: node.sourcePosition,
+             label: node.label,
+             dragHandle: node.dragHandle,
           }"
         />
       </slot>

src/components/Nodes/OutputNode.vue

@@ -12,14 +12,11 @@ const props = withDefaults(defineProps<NodeProps>(), {
 <script lang="ts">
 export default {
   name: 'OutputNode',
-  inheritAttrs: false,
 }
 </script>
 <template>
-  <slot v-bind="props">
-    <component :is="props.label" v-if="typeof props.label !== 'string'" />
-    <span v-else v-html="props.label"></span>
-  </slot>
+  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string'" />
+  <span v-else v-html="props.label" />
   <Handle
     type="source"
     :position="props.targetPosition"

src/types/node.ts

@@ -39,36 +39,27 @@ export interface GraphNode<T = any, P = any> extends Node<T> {
 
 export interface NodeProps<T = any> {
   id: string
-  dimensions: Dimensions
-  handleBounds: NodeHandleBounds
+  nodeElement: HTMLDivElement
+  type: string
+  data: T
+  selected: boolean
+  connectable: boolean
   /** computed position is the position relative to the node's extent (i.e. parent or CoordinateExtent) */
   computedPosition: XYZPosition
   /** x and y position on the graph */
   position: XYPosition
-  draggable: boolean
-  selectable: boolean
-  connectable: boolean
-  selected: boolean
-  dragging: boolean
-  hidden: boolean
-  nodeElement: HTMLDivElement
-  zIndex: number
   label?:
     | string
     | {
         props?: any
         component: any
       }
-  class?: string
-  style?: CSSProperties
-  type?: string
-  data?: T
-  targetPosition?: Position
-  sourcePosition?: Position
   isValidTargetPos?: ValidConnectionFunc
   isValidSourcePos?: ValidConnectionFunc
   parentNode?: string
-  isParent?: boolean
-  children?: Node<T>[]
+  dragging: boolean
+  zIndex: number
+  targetPosition?: Position
+  sourcePosition?: Position
   dragHandle?: string
 }