feat: Extend options to pass custom nodes / edges

* Accept either a Record<string, Component | boolean> or string[] as nodetypes option
* If bool / string is used a slot will be expected, otherwise no node/edge will be rendered

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

examples/index.css

@@ -1,4 +1,4 @@
-@import "../dist/theme-default.css";
+@import "../src/theme-default.css";
 
 body {
   color: #111;

src/components/Edges/Edge.vue

@@ -2,7 +2,7 @@
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils'
-import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
+import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '~/types'
 import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
@@ -64,7 +64,7 @@ const onEdgeUpdaterMouseEnter = () => (updating.value = true)
 
 const onEdgeUpdaterMouseOut = () => (updating.value = false)
 
-const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof getEdgePositions>) => {
+const isVisible = ({ sourceX, sourceY, targetX, targetY }: EdgePositions) => {
   return store.onlyRenderVisibleElements
     ? isEdgeVisible({
         sourcePos: { x: sourceX, y: sourceY },

src/container/EdgeRenderer/utils.ts

@@ -1,29 +1,5 @@
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
 import { rectToBox } from '~/utils'
-import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
-
-export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
-  const standardTypes: Record<string, EdgeType> = {
-    default: edgeTypes.default || BezierEdge,
-    straight: edgeTypes.bezier || StraightEdge,
-    step: edgeTypes.step || StepEdge,
-    smoothstep: edgeTypes.step || SmoothStepEdge,
-  }
-
-  const wrappedTypes = {} as Record<string, EdgeType>
-  const specialTypes: Record<string, EdgeType> = Object.keys(edgeTypes)
-    .filter((k) => !['default', 'bezier'].includes(k))
-    .reduce((res, key) => {
-      res[key] = edgeTypes[key] || BezierEdge
-
-      return res
-    }, wrappedTypes)
-
-  return {
-    ...standardTypes,
-    ...specialTypes,
-  }
-}
+import { Edge, EdgePositions, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
 
 export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
   const x = (handle?.x || 0) + node.__rf?.position?.x

src/container/NodeRenderer/utils.ts

@@ -1,24 +0,0 @@
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
-import { NodeType } from '~/types'
-
-export function createNodeTypes(nodeTypes: Record<string, NodeType>): Record<string, NodeType> {
-  const standardTypes: Record<string, NodeType> = {
-    input: nodeTypes.input || InputNode,
-    default: nodeTypes.default || DefaultNode,
-    output: nodeTypes.output || OutputNode,
-  }
-
-  const wrappedTypes = {} as NodeType
-  const specialTypes: NodeType = Object.keys(nodeTypes)
-    .filter((k) => !['input', 'default', 'output'].includes(k))
-    .reduce((res, key) => {
-      res[key] = nodeTypes[key] || DefaultNode
-
-      return res
-    }, wrappedTypes)
-
-  return {
-    ...standardTypes,
-    ...specialTypes,
-  }
-}

src/container/VueFlow/VueFlow.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import { createEdgeTypes } from '../EdgeRenderer/utils'
-import { createNodeTypes } from '../NodeRenderer/utils'
 import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
 import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
@@ -24,8 +22,8 @@ import { useHooks, useStore, createHooks } from '~/composables'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements
-  nodeTypes?: Record<string, NodeType>
-  edgeTypes?: Record<string, EdgeType>
+  nodeTypes?: Record<string, NodeType> | string[]
+  edgeTypes?: Record<string, EdgeType> | string[]
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
@@ -134,14 +132,18 @@ watch(
 )
 init(props)
 
-const nodeTypes = controlledComputed(
-  () => props.nodeTypesId,
-  () => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }),
-)
-const edgeTypes = controlledComputed(
-  () => props.edgeTypesId,
-  () => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }),
-)
+const nodeTypes = computed(() => {
+  let types = defaultNodeTypes
+  if (Array.isArray(props.nodeTypes)) props.nodeTypes.forEach((type) => (types[type] = true))
+  else types = { ...types, ...props.nodeTypes }
+  return types
+})
+const edgeTypes = computed(() => {
+  let types = defaultEdgeTypes
+  if (Array.isArray(props.edgeTypes)) props.edgeTypes.forEach((type) => (types[type] = true))
+  else types = { ...types, ...props.edgeTypes }
+  return types
+})
 </script>
 <template>
   <div class="vue-flow">

src/types/edge.ts

@@ -63,7 +63,7 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number
 }
 
-export type EdgeType = DefineComponent<EdgeSmoothStepProps, any, any, any, any, any>
+export type EdgeType = DefineComponent<EdgeSmoothStepProps, any, any, any, any, any> | boolean
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
 

src/types/node.ts

@@ -58,4 +58,4 @@ export interface NodeProps<T = any> {
   dragging?: boolean
 }
 
-export type NodeType = DefineComponent<NodeProps, any, any, any, any>
+export type NodeType = DefineComponent<NodeProps, any, any, any, any> | boolean

src/types/types.ts

@@ -93,8 +93,8 @@ export type OnLoadFunc<T = any> = (params: FlowInstance<T>) => void
 
 export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   elements: Elements
-  nodeTypes?: Record<string, NodeType>
-  edgeTypes?: Record<string, EdgeType>
+  nodeTypes?: Record<string, NodeType> | string[]
+  edgeTypes?: Record<string, EdgeType> | string[]
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties