update(examples): Add Unidirectional and updatable edge example

examples/Unidirectional/CustomNode.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+// @ts-ignore
+import { Handle, NodeProps, Position } from '~/index'
+
+interface CustomNodeProps extends NodeProps {
+  id: string
+}
+const props = defineProps<CustomNodeProps>()
+const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
+</script>
+<template>
+  <div :style="nodeStyles">
+    <div>node {{ props.id }}</div>
+    <Handle id="left" type="source" :position="Position.Left" />
+    <Handle id="right" type="source" :position="Position.Right" />
+    <Handle id="top" type="source" :position="Position.Top" />
+    <Handle id="bottom" type="source" :position="Position.Bottom" />
+  </div>
+</template>

examples/Unidirectional/UnidirectionalExample.vue

@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import CustomNode from './CustomNode.vue'
+import Flow, {
+  NodeType,
+  addEdge,
+  useZoomPanHelper,
+  Elements,
+  Connection,
+  Edge,
+  ElementId,
+  Node,
+  ConnectionLineType,
+  ConnectionMode,
+  updateEdge,
+  ArrowHeadType,
+} from '~/index'
+
+const initialElements: Elements = [
+  {
+    id: '00',
+    type: 'custom',
+    position: { x: 300, y: 250 },
+  },
+  {
+    id: '01',
+    type: 'custom',
+    position: { x: 100, y: 50 },
+  },
+  {
+    id: '02',
+    type: 'custom',
+    position: { x: 500, y: 50 },
+  },
+  {
+    id: '03',
+    type: 'custom',
+    position: { x: 500, y: 500 },
+  },
+  {
+    id: '04',
+    type: 'custom',
+    position: { x: 100, y: 500 },
+  },
+  {
+    id: '10',
+    type: 'custom',
+    position: { x: 300, y: 5 },
+  },
+  {
+    id: '20',
+    type: 'custom',
+    position: { x: 600, y: 250 },
+  },
+  {
+    id: '30',
+    type: 'custom',
+    position: { x: 300, y: 600 },
+  },
+  {
+    id: '40',
+    type: 'custom',
+    position: { x: 5, y: 250 },
+  },
+  {
+    id: 'e0-1a',
+    source: '00',
+    target: '01',
+    sourceHandle: 'left',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-1b',
+    source: '00',
+    target: '01',
+    sourceHandle: 'top',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-2a',
+    source: '00',
+    target: '02',
+    sourceHandle: 'top',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-2b',
+    source: '00',
+    target: '02',
+    sourceHandle: 'right',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-3a',
+    source: '00',
+    target: '03',
+    sourceHandle: 'right',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-3b',
+    source: '00',
+    target: '03',
+    sourceHandle: 'bottom',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-4a',
+    source: '00',
+    target: '04',
+    sourceHandle: 'bottom',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-4b',
+    source: '00',
+    target: '04',
+    sourceHandle: 'left',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-10',
+    source: '00',
+    target: '10',
+    sourceHandle: 'top',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-20',
+    source: '00',
+    target: '20',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-30',
+    source: '00',
+    target: '30',
+    sourceHandle: 'bottom',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-40',
+    source: '00',
+    target: '40',
+    sourceHandle: 'left',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+] as Elements
+
+const nodeTypes: Record<string, NodeType> = {
+  custom: CustomNode,
+}
+
+let id = 4
+const getId = (): ElementId => `${id++}`
+
+const elements = ref(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, type: 'smoothstep' }, elements.value))
+const { project } = useZoomPanHelper()
+const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
+  (elements.value = updateEdge(oldEdge, newConnection, elements.value))
+
+const onPaneClick = (evt: MouseEvent) =>
+  (elements.value = elements.value.concat({
+    id: getId(),
+    position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+    type: 'custom',
+  } as Node))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :node-types="nodeTypes"
+    :connection-line-type="ConnectionLineType.SmoothStep"
+    :connection-mode="ConnectionMode.Loose"
+    @connect="onConnect"
+    @pane-click="onPaneClick"
+    @edge-pdate="onEdgeUpdate"
+  />
+</template>

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import Flow, {
+  Controls,
+  updateEdge,
+  addEdge,
+  Elements,
+  OnLoadParams,
+  Connection,
+  Edge,
+  removeElements,
+  FlowEvents,
+  ConnectionMode,
+} from '~/index'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'Node <strong>A</strong>',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'Node <strong>B</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'Node <strong>C</strong>',
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
+] as Elements
+
+const elements = ref(initialElements)
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
+const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
+const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) =>
+  (elements.value = updateEdge(edge, connection, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :snap-to-grid="true"
+    :connection-mode="ConnectionMode.Loose"
+    @load="onLoad"
+    @edge-update="onEdgeUpdate"
+    @connect="onConnect"
+    @edge-update-start="onEdgeUpdateStart"
+    @elements-remove="onElementsRemove"
+    @edge-update-end="onEdgeUpdateEnd"
+  >
+    <Controls />
+  </Flow>
+</template>

examples/router.ts

@@ -81,6 +81,14 @@ export const routes: RouterOptions['routes'] = [
     path: '/switch',
     component: () => import('./Switch/SwitchExample.vue'),
   },
+  {
+    path: '/unidirectional',
+    component: () => import('./Unidirectional/UnidirectionalExample.vue'),
+  },
+  {
+    path: '/updateable-edge',
+    component: () => import('./UpdatableEdge/UpdatableEdgeExample.vue'),
+  },
 ]
 
 export const router = createRouter({