feat(flow)!: Remove node/edge-types prop

* infer node/edge types from types used in elements

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

examples/Stress/StressExample.vue

@@ -9,19 +9,8 @@ const onLoad = (flowInstance: FlowInstance) => {
   console.log(flowInstance.getNodes())
 }
 
-const { nodes, edges } = getElements(5, 5)
+const { nodes, edges } = getElements(30, 30)
 </script>
 <template>
   <VueFlow :nodes="nodes" :edges="edges" @load="onLoad"> </VueFlow>
 </template>
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.35s ease;
-}
-
-.fade-enter-from,
-.fade-leave-active {
-  opacity: 0;
-}
-</style>

src/components/index.ts

@@ -2,6 +2,5 @@ export * from './Nodes'
 export * from './Edges'
 export * from './ConnectionLine/ConnectionLine.vue'
 export * from './Handle/Handle.vue'
-export * from './Loading/LoadingIndicator.vue'
 export * from './NodesSelection/NodesSelection.vue'
 export * from './UserSelection/UserSelection.vue'

src/store/getters.ts

@@ -7,7 +7,8 @@ export default (state: FlowState): FlowGetters => {
     const edgeTypes: Record<string, any> = {
       ...defaultEdgeTypes,
     }
-    state.edgeTypes?.forEach((n) => (edgeTypes[n] = n))
+    const keys = Object.keys(edgeTypes)
+    state.edges?.forEach((e) => e.type && !keys.includes(e.type) && (edgeTypes[e.type] = e.type))
     return edgeTypes
   })
 
@@ -15,7 +16,8 @@ export default (state: FlowState): FlowGetters => {
     const nodeTypes: Record<string, any> = {
       ...defaultNodeTypes,
     }
-    state.nodeTypes?.forEach((n) => (nodeTypes[n] = n))
+    const keys = Object.keys(nodeTypes)
+    state.nodes?.forEach((n) => n.type && !keys.includes(n.type) && (nodeTypes[n.type] = n.type))
     return nodeTypes
   })
 

src/store/state.ts

@@ -19,8 +19,6 @@ export const initialState = (): FlowState => ({
   elements: [],
   nodes: [],
   edges: [],
-  nodeTypes: [],
-  edgeTypes: [],
 
   isReady: false,
   instance: undefined,

src/types/components.ts

@@ -1,15 +1,15 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, FitViewParams, Position, XYPosition } from './flow'
+import { BackgroundVariant, Dimensions, Position, XYPosition } from './flow'
 import { Connection, ConnectionLineType } from './connection'
 import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
+import { FitViewParams } from './zoom'
 
+type GlobalComponentName = string
 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 NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | GlobalComponentName
 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 EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, any, any, any, any, any> | GlobalComponentName
 
 export type HandleType = 'source' | 'target'
 
@@ -49,13 +49,13 @@ export interface ControlEvents {
   (event: 'interaction-change', active: boolean): void
 }
 
-export type StringFunc = (node: Node | GraphNode) => string
+export type StringFunc<N = any> = (node: Node<N> | GraphNode<N>) => string
 export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
-export interface MiniMapProps {
-  nodeColor?: string | StringFunc
-  nodeStrokeColor?: string | StringFunc
-  nodeClassName?: string | StringFunc
+export interface MiniMapProps<N = any> {
+  nodeColor?: string | StringFunc<N>
+  nodeStrokeColor?: string | StringFunc<N>
+  nodeClassName?: string | StringFunc<N>
   nodeBorderRadius?: number
   nodeStrokeWidth?: number
   maskColor?: string
@@ -74,12 +74,7 @@ export interface MiniMapNodeProps {
 export interface EdgeTextProps {
   x: number
   y: number
-  label?:
-    | string
-    | {
-        component: any
-        props?: any
-      }
+  label?: string
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any
@@ -87,7 +82,7 @@ export interface EdgeTextProps {
   labelBgBorderRadius?: number
 }
 
-export interface CustomConnectionLineProps {
+export interface CustomConnectionLineProps<N = any> {
   sourceX: number
   sourceY: number
   sourcePosition: Position
@@ -96,7 +91,7 @@ export interface CustomConnectionLineProps {
   targetPosition: Position
   connectionLineType: ConnectionLineType
   connectionLineStyle: CSSProperties
-  nodes: GraphNode[]
-  sourceNode: GraphNode
+  nodes: GraphNode<N>[]
+  sourceNode: GraphNode<N>
   sourceHandle: HandleElement
 }

src/types/flow.ts

@@ -3,7 +3,6 @@ import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
-import { EdgeTypes, NodeTypes } from './components'
 
 export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
 export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
@@ -81,8 +80,6 @@ export interface FlowProps<N = any, E = N> {
   edges?: Edge<E>[]
   elements?: Elements
   id?: string
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties

src/types/store.ts

@@ -1,7 +1,7 @@
 import { ComputedRef, ToRefs } from 'vue'
 import { UnwrapNestedRefs } from '@vue/reactivity'
 import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, Transform, XYPosition } from './flow'
-import { HandleType, EdgeComponent, NodeComponent, NodeTypes, EdgeTypes } from './components'
+import { HandleType, EdgeComponent, NodeComponent } from './components'
 import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
 import { Edge, GraphEdge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
@@ -15,8 +15,6 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'>
   elements: Elements
   nodes: GraphNode[]
   edges: GraphEdge[]
-  nodeTypes: NodeTypes
-  edgeTypes: EdgeTypes
 
   d3Zoom?: D3Zoom
   d3Selection?: D3Selection