feat(edges): add connectionLineOptions prop

# What's changed? * allow defining markers on connection lines * deprecate `connectionLineType` * deprecate `connectionLineStyle`
bcakmakoglu · Jun 26, 2022 · 1578d40 · 1578d40
1 parent e022978
commit 1578d40
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 27 deletions.
diff --git a/packages/vue-flow/src/components/ConnectionLine/ConnectionLine.vue b/packages/vue-flow/src/components/ConnectionLine/ConnectionLine.vue
@@ -4,6 +4,7 @@ import type { GraphNode, HandleElement, HandleType } from '../../types'
 import { ConnectionLineType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
+import { getMarkerId } from '../../utils'
 
 const { sourceNode } = defineProps<{
   sourceNode: GraphNode
@@ -17,6 +18,7 @@ const {
   connectionLineType,
   connectionLineStyle,
   connectionNodeId,
+  connectionLineOptions,
   viewport,
 } = $(useVueFlow())
 
@@ -44,7 +46,7 @@ const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.z
 
 const dAttr = computed(() => {
   let path = `M${sourceX},${sourceY} ${targetX},${targetY}`
-  switch (connectionLineType) {
+  switch (connectionLineType || connectionLineOptions.type) {
     case ConnectionLineType.Bezier:
       path = getBezierPath({
         sourceX,
@@ -99,13 +101,21 @@ export default {
         targetX,
         targetY,
         targetPosition,
-        connectionLineType,
-        connectionLineStyle,
         nodes: getNodes,
         sourceNode,
         sourceHandle,
+        markerEnd: `url(#${getMarkerId(connectionLineOptions.markerEnd)})`,
+        markerStart: `url(#${getMarkerId(connectionLineOptions.markerStart)})`,
       }"
     />
-    <path v-else :d="dAttr" class="vue-flow__connection-path" :style="connectionLineStyle || {}" />
+    <path
+      v-else
+      :d="dAttr"
+      class="vue-flow__connection-path"
+      :class="connectionLineOptions.class"
+      :style="connectionLineStyle || connectionLineOptions.style || {}"
+      :marker-end="`url(#${getMarkerId(connectionLineOptions.markerEnd)})`"
+      :marker-start="`url(#${getMarkerId(connectionLineOptions.markerStart)})`"
+    />
   </g>
 </template>
diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -18,7 +18,6 @@ const {
   connectionNodeId,
   nodesConnectable,
   connectionHandleType,
-  defaultMarkerColor,
   edgesUpdatable,
   elementsSelectable,
   getSelectedNodes,
@@ -181,7 +180,7 @@ export default {
 
 <template>
   <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
-    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
+    <MarkerDefinitions v-if="group.isMaxLevel" />
     <g>
       <EdgeWrapper
         v-for="edge of group.edges"

diff --git a/packages/vue-flow/src/container/EdgeRenderer/Marker.vue b/packages/vue-flow/src/container/EdgeRenderer/Marker.vue
@@ -15,7 +15,7 @@ const {
 
 <script lang="ts">
 export default {
-  name: 'Marker',
+  name: 'MarkerType',
 }
 </script>
 

diff --git a/packages/vue-flow/src/container/EdgeRenderer/MarkerDefinitions.vue b/packages/vue-flow/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -1,31 +1,34 @@
 <script lang="ts" setup>
 import { useVueFlow } from '../../composables'
-import type { MarkerProps, MarkerType } from '../../types/edge'
+import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types/edge'
 import { getMarkerId } from '../../utils'
 import Marker from './Marker.vue'
 
-const { defaultColor = '' } = defineProps<{
-  defaultColor: string
-}>()
-
-const { edges } = $(useVueFlow())
+const { edges, connectionLineOptions, defaultMarkerColor: defaultColor } = $(useVueFlow())
 
 const markers = computed(() => {
   const ids: string[] = []
+  const markers: MarkerProps[] = []
 
-  return edges.reduce<MarkerProps[]>((markers, edge) => {
-    ;[edge.markerStart, edge.markerEnd].forEach((marker) => {
-      if (marker) {
-        const markerId = getMarkerId(marker)
-        if (!ids.includes(markerId)) {
-          if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
-          else markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
-          ids.push(markerId)
-        }
+  const createMarkers = (marker?: EdgeMarkerType) => {
+    if (marker) {
+      const markerId = getMarkerId(marker)
+      if (!ids.includes(markerId)) {
+        if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
+        else markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
+        ids.push(markerId)
       }
-    })
+    }
+  }
+
+  ;[connectionLineOptions.markerEnd, connectionLineOptions.markerStart].forEach(createMarkers)
+
+  edges.reduce<MarkerProps[]>((markers, edge) => {
+    ;[edge.markerStart, edge.markerEnd].forEach(createMarkers)
     return markers.sort((a, b) => a.id.localeCompare(b.id))
-  }, [])
+  }, markers)
+
+  return markers
 })
 </script>
 

diff --git a/packages/vue-flow/src/store/state.ts b/packages/vue-flow/src/store/state.ts
@@ -76,6 +76,10 @@ const defaultState = (): State => ({
   defaultMarkerColor: '#b1b1b7',
   connectionLineStyle: {},
   connectionLineType: ConnectionLineType.Bezier,
+  connectionLineOptions: {
+    type: ConnectionLineType.Bezier,
+    style: {},
+  },
   connectionNodeId: null,
   connectionHandleId: null,
   connectionHandleType: null,

diff --git a/packages/vue-flow/src/types/connection.ts b/packages/vue-flow/src/types/connection.ts
@@ -2,7 +2,7 @@ import type { CSSProperties } from 'vue'
 import type { Position } from './flow'
 import type { GraphNode } from './node'
 import type { HandleElement, HandleType } from './handle'
-import type { Edge } from './edge'
+import type { Edge, EdgeMarkerType } from './edge'
 
 /** Connection line types (same as default edge types */
 export enum ConnectionLineType {
@@ -12,6 +12,14 @@ export enum ConnectionLineType {
   SmoothStep = 'smoothstep',
 }
 
+export interface ConnectionLineOptions {
+  type?: ConnectionLineType
+  style?: CSSProperties
+  class?: string
+  markerEnd?: EdgeMarkerType
+  markerStart?: EdgeMarkerType
+}
+
 /** Connection params that are passed when onConnect is called */
 export interface Connection {
   /** Source node id */
@@ -67,4 +75,8 @@ export interface ConnectionLineProps {
   sourceNode: GraphNode
   /** The source handle element of the connection line */
   sourceHandle: HandleElement
+  /** marker url */
+  markerStart: string
+  /** marker url */
+  markerEnd: string
 }
diff --git a/packages/vue-flow/src/types/flow.ts b/packages/vue-flow/src/types/flow.ts
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'vue'
 import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
-import type { ConnectionLineType, ConnectionMode, Connector } from './connection'
+import type { ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
 import type { KeyCode, PanOnScrollMode } from './zoom'
 import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
@@ -85,8 +85,11 @@ export interface FlowProps {
   /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
   nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & Record<string, NodeComponent>
   connectionMode?: ConnectionMode
+  /** @deprecated use {@link ConnectionLineOptions.type} */
   connectionLineType?: ConnectionLineType
+  /** @deprecated use {@link ConnectionLineOptions.style} */
   connectionLineStyle?: CSSProperties | null
+  connectionLineOptions?: ConnectionLineOptions
   deleteKeyCode?: KeyCode
   selectionKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode

diff --git a/packages/vue-flow/src/types/store.ts b/packages/vue-flow/src/types/store.ts
@@ -1,7 +1,7 @@
 import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
 import type { Dimensions, ElementData, Elements, FlowElements, FlowExportObject, FlowOptions, SnapGrid, XYPosition } from './flow'
 import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
-import type { Connection, ConnectionLineType, ConnectionMode, Connector } from './connection'
+import type { Connection, ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
 import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport, ViewportFunctions } from './zoom'
@@ -59,7 +59,10 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   connectionHandleType: HandleType | null
   connectionPosition: XYPosition
   connectionMode: ConnectionMode
+  connectionLineOptions: ConnectionLineOptions
+  /** @deprecated use {@link ConnectionLineOptions.type} */
   connectionLineType: ConnectionLineType
+  /** @deprecated use {@link ConnectionLineOptions.style} */
   connectionLineStyle: CSSProperties | null
   connectionStartHandle: StartHandle | null