docs(examples): add edge markers example

Signed-off-by: braks <[email protected]>

docs/examples/edge-markers/App.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref } from 'vue'
+import { MarkerType, VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import CustomEdge from './CustomEdge.vue'
+
+const nodes = ref([
+  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Select me for diamond markers' } },
+  { id: '2', position: { x: 0, y: 150 }, data: { label: 'Select me for circle markers' } },
+  { id: '3', position: { x: 200, y: 0 }, data: { label: 'Node 3' } },
+  { id: '4', position: { x: 200, y: 150 }, data: { label: 'Node 4' } },
+  { id: '5', position: { x: 400, y: 0 }, data: { label: 'Node 5' } },
+  { id: '6', position: { x: 400, y: 150 }, data: { label: 'Node 6' } },
+])
+
+const edges = ref([
+  // This edge uses a custom marker defined in CustomMarker.vue
+  { id: '1-2', source: '1', target: '2', type: 'custom' },
+  {
+    id: '3-4',
+    source: '3',
+    target: '4',
+    label: 'Marker Arrow',
+    // Use MarkerType enum to set the marker
+    markerEnd: MarkerType.Arrow,
+    markerStart: MarkerType.Arrow,
+  },
+  {
+    id: '5-6',
+    source: '5',
+    target: '6',
+    label: 'Marker ArrowClosed',
+    // EdgeMarker object allows to customize the marker
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ff0072',
+    },
+    markerStart: {
+      type: MarkerType.ArrowClosed,
+      color: '#ff0072',
+    },
+  },
+])
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
+    <template #edge-custom="edgeProps">
+      <CustomEdge v-bind="edgeProps" />
+    </template>
+
+    <Background />
+  </VueFlow>
+</template>

docs/examples/edge-markers/CustomEdge.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { BaseEdge, getBezierPath, useVueFlow } from '@vue-flow/core'
+import { computed } from 'vue'
+import CustomMarker from './CustomMarker.vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  source: {
+    type: String,
+    required: true,
+  },
+  target: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: false,
+  },
+})
+
+const { findNode } = useVueFlow()
+
+const path = computed(() => getBezierPath(props))
+
+const markerId = computed(() => `${props.id}-marker`)
+
+const markerColor = computed(() => {
+  const sourceNode = findNode(props.source)
+  const targetNode = findNode(props.target)
+
+  if (sourceNode.selected) {
+    return '#ff0072'
+  }
+
+  if (targetNode.selected) {
+    return '#2563eb'
+  }
+
+  return '#4a5568'
+})
+
+const markerType = computed(() => {
+  const sourceNode = findNode(props.source)
+  const targetNode = findNode(props.target)
+
+  if (sourceNode.selected) {
+    return 'diamond'
+  }
+
+  if (targetNode.selected) {
+    return 'circle'
+  }
+
+  return 'square'
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <BaseEdge
+    :id="id"
+    :path="path[0]"
+    :marker-end="`url(#${markerId})`"
+    :marker-start="`url(#${markerId})`"
+    :label="`${markerType} marker`"
+    :label-x="path[1]"
+    :label-y="path[2]"
+    label-bg-style="fill: whitesmoke"
+  />
+
+  <CustomMarker :id="markerId" :type="markerType" :stroke="markerColor" :stroke-width="2" :width="20" :height="20" />
+</template>

docs/examples/edge-markers/CustomMarker.vue

@@ -0,0 +1,91 @@
+<script setup>
+defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  stroke: {
+    type: String,
+    required: false,
+    default: '#b1b1b7',
+  },
+  fill: {
+    type: String,
+    required: false,
+    default: '#b1b1b7',
+  },
+  strokeWidth: {
+    type: Number,
+    required: false,
+    default: 1,
+  },
+  width: {
+    type: Number,
+    required: false,
+    default: 12.5,
+  },
+  height: {
+    type: Number,
+    required: false,
+    default: 12.5,
+  },
+})
+</script>
+
+<template>
+  <svg class="vue-flow__marker vue-flow__container">
+    <defs>
+      <marker
+        :id="id"
+        class="vue-flow__arrowhead"
+        viewBox="-10 -10 20 20"
+        refX="0"
+        refY="0"
+        :markerWidth="width"
+        :markerHeight="height"
+        markerUnits="strokeWidth"
+        orient="auto-start-reverse"
+      >
+        <path
+          v-if="type === 'diamond'"
+          :style="{
+            stroke,
+            strokeWidth,
+          }"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          :fill="fill"
+          d="M 0,-5 L 5,0 L 0,5 L -5,0 Z"
+        />
+
+        <path
+          v-if="type === 'circle'"
+          :style="{
+            stroke,
+            strokeWidth,
+          }"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          :fill="fill"
+          d="M 0,-4 a 4,4 0 1,0 0,8 a 4,4 0 1,0 0,-8"
+        />
+
+        <path
+          v-if="type === 'square'"
+          :style="{
+            stroke,
+            strokeWidth,
+          }"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          :fill="fill"
+          d="M -4 -4 H 4 V 4 H -4 Z"
+        />
+      </marker>
+    </defs>
+  </svg>
+</template>

docs/examples/edge-markers/index.ts

@@ -0,0 +1,4 @@
+export { default as EdgeMarkersApp } from './App.vue?raw'
+export { default as EdgeMarkersEdge } from './CustomEdge.vue?raw'
+export { default as EdgeMarkersMarker } from './CustomMarker.vue?raw'
+export { default as EdgeMarkersCSS } from './style.css?inline'

docs/examples/edge-markers/style.css

@@ -0,0 +1,11 @@
+.vue-flow__handle {
+  opacity: 0;
+  height: 0 !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
+
+.vue-flow__edges {
+  z-index: 9999 !important;
+}

docs/examples/index.ts

@@ -23,6 +23,7 @@ import { SimpleLayoutApp, SimpleLayoutElements, SimpleLayoutIcon, useSimpleLayou
 import { LoopbackApp, LoopbackCSS, LoopbackEdge } from './loopback'
 import { MathApp, MathCSS, MathElements, MathIcon, MathOperatorNode, MathResultNode, MathValueNode } from './math'
 import { ConfirmApp, ConfirmDialog, useDialog } from './confirm-delete'
+import { EdgeMarkersApp, EdgeMarkersCSS, EdgeMarkersEdge, EdgeMarkersMarker } from './edge-markers'
 
 export const exampleImports = {
   basic: {
@@ -170,4 +171,10 @@ export const exampleImports = {
     'LoopbackEdge.vue': LoopbackEdge,
     'style.css': LoopbackCSS,
   },
+  markers: {
+    'App.vue': EdgeMarkersApp,
+    'CustomEdge.vue': EdgeMarkersEdge,
+    'CustomMarker.vue': EdgeMarkersMarker,
+    'style.css': EdgeMarkersCSS,
+  },
 }

docs/src/.vitepress/config.mts

@@ -244,6 +244,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
             { text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
             { text: 'Connection Validation', link: '/examples/edges/validation' },
+            { text: 'Edge Markers', link: '/examples/edges/markers' },
             { text: 'Connection Radius', link: '/examples/edges/connection-radius' },
             { text: 'Loopback Edge', link: '/examples/edges/loopback' },
           ],

docs/src/examples/edges/markers.md

@@ -0,0 +1,5 @@
+# Edge Markers
+
+<div class="mt-6">
+  <Repl example="markers"></Repl>
+</div>