update(nodes): add __vf to node props

* move edge/node component-types to components file

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

src/components/Nodes/NodeWrapper.vue

@@ -175,6 +175,7 @@ export default {
           type: props.node.type,
           xPos: props.node.position.x,
           yPos: props.node.position.y,
+          __vf: props.node.__vf,
           selected,
           connectable: props.connectable,
           sourcePosition: props.node.sourcePosition,
@@ -192,6 +193,7 @@ export default {
             type: props.node.type,
             xPos: props.node.position.x,
             yPos: props.node.position.y,
+            __vf: props.node.__vf,
             selected,
             connectable: props.connectable,
             sourcePosition: props.node.sourcePosition,

src/types/components.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import {
   BackgroundVariant,
   Dimensions,
@@ -11,11 +11,18 @@ import {
   XYPosition,
 } from './flow'
 import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { GraphNode, Node, NodeExtent, NodeTypes, TranslateExtent } from './node'
+import { GraphNode, Node, NodeExtent, NodeProps, TranslateExtent } from './node'
 import { FlowStore } from './store'
-import { EdgeTypes } from './edge'
+import { EdgeProps } from './edge'
 import { KeyCode, PanOnScrollMode } from './zoom'
 
+export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
+export type EdgeTypes = (keyof DefaultEdgeTypes | string)[]
+export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | string
+export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: Component<NodeProps> }
+export type NodeTypes = (keyof DefaultNodeTypes | string)[]
+export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, any, any, any, any, any> | string
+
 export type HandleType = 'source' | 'target'
 
 export interface HandleElement extends XYPosition, Dimensions {

src/types/edge.ts

@@ -1,12 +1,8 @@
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './flow'
-import { EdgeTextProps } from './components'
+import { EdgeTextProps, EdgeTypes } from './components'
 import { GraphNode } from './node'
 
-// eslint-disable-next-line no-use-before-define
-export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
-export type EdgeTypes = (keyof DefaultEdgeTypes | string)[]
-
 export interface Edge<T = any> {
   id: ElementId
   type?: EdgeTypes[number]
@@ -42,7 +38,7 @@ export interface GraphEdge<T = any> extends Edge<T> {
   targetNode: GraphNode
 }
 
-export interface EdgeProps<T = any> extends Edge<T> {
+export interface EdgeProps<T = any> extends GraphEdge<T> {
   sourceX: number
   sourceY: number
   targetX: number
@@ -65,5 +61,3 @@ export interface EdgePositions {
   targetX: number
   targetY: number
 }
-
-export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, any, any, any, any, any> | string

src/types/flow.ts

@@ -1,8 +1,9 @@
 import { CSSProperties } from 'vue'
-import { Edge, EdgeTypes, GraphEdge } from './edge'
-import { NodeExtent, GraphNode, NodeTypes, TranslateExtent, Node } from './node'
+import { Edge, GraphEdge } from './edge'
+import { NodeExtent, GraphNode, TranslateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
+import { EdgeTypes, NodeTypes } from './components'
 
 export type ElementId = string
 export type FlowElement<T = any> = GraphNode<T> | GraphEdge<T>

src/types/node.ts

@@ -1,7 +1,7 @@
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { DraggableOptions } from '@braks/revue-draggable'
 import { XYPosition, ElementId, Position, SnapGrid } from './flow'
-import { HandleElement, ValidConnectionFunc } from './components'
+import { HandleElement, NodeTypes, ValidConnectionFunc } from './components'
 
 export interface VFInternals {
   isDragging?: boolean
@@ -13,24 +13,6 @@ export interface VFInternals {
   }
 }
 
-export interface NodeProps<T = any> {
-  id: ElementId
-  type?: string
-  data?: T
-  selected?: boolean
-  connectable?: boolean
-  xPos?: number
-  yPos?: number
-  targetPosition?: Position
-  sourcePosition?: Position
-  dragging?: boolean
-  isValidTargetPos?: ValidConnectionFunc
-  isValidSourcePos?: ValidConnectionFunc
-}
-
-export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | string
-export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: Component<NodeProps> }
-export type NodeTypes = (keyof DefaultNodeTypes | string)[]
 export type Draggable = Omit<DraggableOptions, 'scale' | 'grid' | 'enableUserSelectHack' | 'enableTransformFix'> | boolean
 
 export interface Node<T = any> {
@@ -56,6 +38,22 @@ export interface GraphNode<T = any> extends Node<T> {
   __vf: VFInternals
 }
 
+export interface NodeProps<T = any> extends GraphNode {
+  id: ElementId
+  type?: string
+  data?: T
+  selected?: boolean
+  connectable?: boolean
+  xPos?: number
+  yPos?: number
+  targetPosition?: Position
+  sourcePosition?: Position
+  dragging?: boolean
+  isValidTargetPos?: ValidConnectionFunc
+  isValidSourcePos?: ValidConnectionFunc
+  __vf: VFInternals
+}
+
 export type TranslateExtent = [[number, number], [number, number]]
 export type NodeExtent = TranslateExtent
 

src/types/store.ts

@@ -12,7 +12,7 @@ import {
   Transform,
   XYPosition,
 } from './flow'
-import { HandleType } from './components'
+import { HandleType, EdgeComponent, NodeComponent } from './components'
 import {
   ConnectionMode,
   OnConnectEndFunc,
@@ -21,8 +21,8 @@ import {
   OnConnectStopFunc,
   SetConnectionId,
 } from './connection'
-import { EdgeComponent, GraphEdge } from './edge'
-import { NodeComponent, NodeExtent, GraphNode, TranslateExtent } from './node'
+import { GraphEdge } from './edge'
+import { NodeExtent, GraphNode, TranslateExtent } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload } from './zoom'
 import { FlowHooks } from './hooks'