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 <[email protected]>
bcakmakoglu · Nov 16, 2021 · d1dab4c · d1dab4c
1 parent d9e3104
commit d1dab4c
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 68 deletions.
diff --git a/examples/index.css b/examples/index.css
@@ -1,4 +1,4 @@
-@import "../dist/theme-default.css";
+@import "../src/theme-default.css";
 
 body {
   color: #111;

diff --git a/src/components/Edges/Edge.vue b/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 },

diff --git a/src/container/EdgeRenderer/utils.ts b/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

diff --git a/src/container/NodeRenderer/utils.ts b/src/container/NodeRenderer/utils.ts
diff --git a/src/container/VueFlow/VueFlow.vue b/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">

diff --git a/src/types/edge.ts b/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
 

diff --git a/src/types/node.ts b/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
diff --git a/src/types/types.ts b/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