examples: move current examples into examples/vite

examples/vite/src/Basic/Basic.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '../../packages/vue-flow'
+
+const elements = ref<Elements>([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow({
+  defaultZoom: 1.5,
+  minZoom: 0.2,
+  maxZoom: 4,
+})
+
+onPaneReady(({ fitView }) => {
+  fitView()
+})
+onNodeDragStop((e) => console.log('drag stop', e))
+onConnect((params) => addEdges([params]))
+
+const updatePos = () =>
+  elements.value.forEach((el) => {
+    if (isNode(el)) {
+      el.position = {
+        x: Math.random() * 400,
+        y: Math.random() * 400,
+      }
+    }
+  })
+
+const logToObject = () => console.log(instance.value?.toObject())
+const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+</script>
+
+<template>
+  <VueFlow v-model="elements" class="vue-flow-basic-example">
+    <Background />
+    <MiniMap />
+    <Controls />
+    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
+      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
+      <button style="margin-right: 5px" @click="updatePos">change pos</button>
+      <button style="margin-right: 5px" @click="toggleclass">toggle class</button>
+      <button @click="logToObject">toObject</button>
+    </div>
+  </VueFlow>
+</template>

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -0,0 +1,77 @@
+<script lang="ts">
+import type { Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '../../packages/vue-flow'
+
+export default defineComponent({
+  name: 'BasicOptionsAPI',
+  components: { VueFlow, Background, MiniMap, Controls },
+  data() {
+    return {
+      instance: null as FlowInstance | null,
+      elements: [
+        { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+        { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+        { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+        { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+        { id: 'e1-2', source: '1', target: '2', animated: true },
+        { id: 'e1-3', source: '1', target: '3' },
+      ] as Elements,
+    }
+  },
+  methods: {
+    logToObject() {
+      console.log(this.instance?.toObject())
+    },
+    resetTransform() {
+      this.instance?.setTransform({ x: 0, y: 0, zoom: 1 })
+    },
+    toggleclass() {
+      this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+    },
+    updatePos() {
+      this.elements.forEach((el) => {
+        if (isNode(el)) {
+          el.position = {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          }
+        }
+      })
+    },
+    onNodeDragStop(e: FlowEvents['nodeDragStop']) {
+      console.log('drag stop', e)
+    },
+    onPaneReady(instance: FlowEvents['paneReady']) {
+      instance.fitView()
+      this.instance = instance
+    },
+    onConnect(params: FlowEvents['connect']) {
+      addEdge(params, this.elements)
+    },
+  },
+})
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    class="vue-flow-basic-example"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    :zoom-on-scroll="false"
+    @connect="onConnect"
+    @pane-ready="onPaneReady"
+    @node-drag-stop="onNodeDragStop"
+  >
+    <Background />
+    <MiniMap />
+    <Controls />
+    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
+      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
+      <button style="margin-right: 5px" @click="updatePos">change pos</button>
+      <button style="margin-right: 5px" @click="toggleclass">toggle class</button>
+      <button @click="logToObject">toObject</button>
+    </div>
+  </VueFlow>
+</template>

examples/vite/src/Basic/ResizableNode.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { Position, ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle } from '../../packages/vue-flow'
+
+interface Props {
+  id: string
+  selected?: boolean
+  connectable?: boolean
+  label?: string
+  isValidSourcePos?: ValidConnectionFunc
+  isValidTargetPos?: ValidConnectionFunc
+  parentNode?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  connectable: false,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ResizableNode',
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Handle
+    type="target"
+    :position="props.targetPosition"
+    :is-connectable="props.connectable"
+    :is-valid-connection="props.isValidTargetPos"
+  />
+  <div class="resize-node">
+    <div v-html="props.label"></div>
+    <div ref="el" class="resizer nodrag" />
+  </div>
+  <Handle
+    type="source"
+    :position="props.sourcePosition"
+    :is-connectable="props.connectable"
+    :is-valid-connection="props.isValidSourcePos"
+  />
+</template>
+
+<style>
+.resize-node {
+  padding: 1rem;
+  border: 1px solid gray;
+  border-radius: 4px;
+  background: white;
+}
+
+.resizer {
+  resize: both;
+  width: 200px;
+  height: 200px;
+  outline: none;
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow: hidden;
+  background: aliceblue;
+  border: 1px solid gray;
+  border-radius: 4px;
+}
+</style>

examples/vite/src/CustomConnectionLine/ConnectionLine.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+interface CustomConnectionLineProps {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+const props = defineProps<CustomConnectionLineProps>()
+</script>
+
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="#222"
+      :stroke-width="1.5"
+      :d="`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
+    />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>

examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
+import ConnectionLine from './ConnectionLine.vue'
+
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node 1',
+    position: { x: 250, y: 5 },
+  },
+])
+</script>
+
+<template>
+  <VueFlow v-model="elements">
+    <template #connection-line="props">
+      <ConnectionLine v-bind="props" />
+    </template>
+    <Background :variant="BackgroundVariant.Lines" />
+  </VueFlow>
+</template>

examples/vite/src/CustomNode/ColorSelectorNode.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import type { Connection, Edge, NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
+
+interface ColorSelectorNodeProps extends NodeProps {
+  data: {
+    color: string
+    onChange: (event: any) => void
+  }
+}
+const props = defineProps<ColorSelectorNodeProps>()
+
+const targetHandleStyle: CSSProperties = { background: '#555' }
+const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' }
+const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
+  <div>
+    Custom Color Picker Node: <strong>{{ data.color }}</strong>
+  </div>
+  <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
+  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+</template>

examples/vite/src/CustomNode/CustomNode.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { Elements, Node, SnapGrid } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '../../packages/vue-flow'
+import ColorSelectorNode from './ColorSelectorNode.vue'
+
+const elements = ref<Elements>([])
+const bgColor = ref('#1A192B')
+const connectionLineStyle = { stroke: '#fff' }
+const snapGrid: SnapGrid = [16, 16]
+
+const nodeStroke = (n: Node): string => {
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'selectorNode') return bgColor.value
+  if (n.type === 'output') return '#ff0072'
+  return '#eee'
+}
+const nodeColor = (n: Node): string => {
+  if (n.type === 'selectorNode') return bgColor.value
+  return '#fff'
+}
+
+const onChange = (event: Event) => {
+  elements.value.forEach((e) => {
+    if (isEdge(e) || e.id !== '2') return e
+    bgColor.value = (event.target as HTMLInputElement).value
+  })
+}
+
+onMounted(() => {
+  elements.value = [
+    {
+      id: '1',
+      type: 'input',
+      label: 'An input node',
+      position: { x: 0, y: 50 },
+      sourcePosition: Position.Right,
+    },
+    {
+      id: '2',
+      type: 'selectorNode',
+      data: { onChange, color: bgColor },
+      style: { border: '1px solid #777', padding: '10px' },
+      position: { x: 250, y: 50 },
+    },
+    {
+      id: '3',
+      type: 'output',
+      label: 'Output A',
+      position: { x: 650, y: 25 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: '4',
+      type: 'output',
+      label: 'Output B',
+      position: { x: 650, y: 100 },
+      targetPosition: Position.Left,
+    },
+
+    { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
+    { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
+    { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
+  ]
+})
+
+const { onPaneReady } = useVueFlow({
+  connectionMode: ConnectionMode.Loose,
+  connectionLineStyle,
+  snapToGrid: true,
+  snapGrid,
+  defaultZoom: 1.5,
+})
+onPaneReady((i) => {
+  i.fitView()
+  console.log('flow loaded:', i)
+})
+</script>
+
+<template>
+  <VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
+    <template #node-selectorNode="props">
+      <ColorSelectorNode v-bind="props" />
+    </template>
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+    <Controls />
+  </VueFlow>
+</template>

examples/vite/src/DragNDrop/DnD.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { Node } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
+import Sidebar from './Sidebar.vue'
+
+let id = 0
+const getId = () => `dndnode_${id++}`
+
+const { instance, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+  nodes: [
+    {
+      id: '1',
+      type: 'input',
+      label: 'input node',
+      position: { x: 250, y: 5 },
+    },
+  ],
+})
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+onConnect((params) => addEdges([params]))
+
+const onDrop = (event: DragEvent) => {
+  if (instance.value) {
+    const type = event.dataTransfer?.getData('application/vueflow')
+    const position = instance.value.project({ x: event.clientX, y: event.clientY - 40 })
+    const newNode = {
+      id: getId(),
+      type,
+      position,
+      label: `${type} node`,
+    } as Node
+    addNodes([newNode])
+  }
+}
+</script>
+
+<template>
+  <div class="dndflow" @drop="onDrop">
+    <VueFlow @dragover="onDragOver" />
+    <Sidebar />
+  </div>
+</template>
+
+<style>
+@import 'dnd.css';
+</style>

examples/vite/src/DragNDrop/Sidebar.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/vueflow', nodeType)
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+</script>
+
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane on the left.</div>
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+      Input Node
+    </div>
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+      Default Node
+    </div>
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+      Output Node
+    </div>
+  </aside>
+</template>

examples/vite/src/DragNDrop/dnd.css

@@ -0,0 +1,37 @@
+.dndflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.dndflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.dndflow aside > * {
+  margin-bottom: 10px;
+  cursor: grab;
+}
+
+.dndflow aside .description {
+  margin-bottom: 10px;
+}
+
+.dndflow .vue-flow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .dndflow {
+    flex-direction: row;
+  }
+
+  .dndflow aside {
+    width: 20%;
+    max-width: 180px;
+  }
+}

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { FlowInstance } from '../../packages/vue-flow'
+import { Controls, MiniMap, VueFlow } from '../../packages/vue-flow'
+import { getElements } from './utils'
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView()
+  console.log(flowInstance.getElements())
+}
+
+const elements = getElements()
+</script>
+
+<template>
+  <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
+    <MiniMap />
+    <Controls />
+  </VueFlow>
+</template>

examples/vite/src/EdgeTypes/utils.ts

@@ -0,0 +1,107 @@
+import type { Elements } from '../../packages/vue-flow'
+import { Position } from '../../packages/vue-flow'
+
+const nodeWidth = 80
+const nodeGapWidth = nodeWidth * 2
+const nodeStyle = { width: `${nodeWidth}px`, fontSize: '11px', color: 'white' }
+
+const sourceTargetPositions = [
+  { source: Position.Bottom, target: Position.Top },
+  { source: Position.Right, target: Position.Left },
+]
+const nodeColors = [
+  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8'],
+]
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight']
+const offsets = [
+  {
+    x: 0,
+    y: -nodeGapWidth,
+  },
+  {
+    x: nodeGapWidth,
+    y: -nodeGapWidth,
+  },
+  {
+    x: nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: 0,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: -nodeGapWidth,
+    y: -nodeGapWidth,
+  },
+]
+
+let id = 0
+const getNodeId = () => (id++).toString()
+
+export function getElements(): Elements {
+  const initialElements = []
+
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
+    const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex]
+
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
+      const currEdgeType = edgeTypes[edgeTypeIndex]
+
+      for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+        const currOffset = offsets[offsetIndex]
+
+        const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] }
+        const sourcePosition = {
+          x: offsetIndex * nodeWidth * 4,
+          y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300,
+        }
+        const sourceId = getNodeId()
+        const sourceLabel = `Source ${sourceId}`
+        const sourceNode = {
+          id: sourceId,
+          style,
+          label: sourceLabel,
+          position: sourcePosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target,
+        }
+
+        const targetId = getNodeId()
+        const targetLabel = `Target ${targetId}`
+        const targetPosition = {
+          x: sourcePosition.x + currOffset.x,
+          y: sourcePosition.y + currOffset.y,
+        }
+        const targetNode = {
+          id: targetId,
+          style,
+          label: targetLabel,
+          position: targetPosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target,
+        }
+
+        initialElements.push(sourceNode)
+        initialElements.push(targetNode)
+
+        initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType })
+      }
+    }
+  }
+
+  return initialElements
+}

examples/vite/src/Edges/CustomEdge.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { EdgeProps, Position } from '../../packages/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '../../packages/vue-flow'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  data?: T
+  markerEnd: string
+}
+
+const props = defineProps<CustomEdgeProps>()
+const { id: storeId, applyEdgeChanges, getEdges } = useVueFlow()
+
+const onClick = (evt: Event, id: string) => {
+  applyEdgeChanges([{ type: 'remove', id }])
+  evt.stopPropagation()
+}
+
+const foreignObjectSize = 40
+
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
+  <foreignObject
+    :width="foreignObjectSize"
+    :height="foreignObjectSize"
+    :x="center[0] - foreignObjectSize / 2"
+    :y="center[1] - foreignObjectSize / 2"
+    class="edgebutton-foreignobject"
+    requiredExtensions="http://www.w3.org/1999/xhtml"
+  >
+    <body>
+      <button class="edgebutton" @click="(event) => onClick(event, props.id)">×</button>
+    </body>
+  </foreignObject>
+</template>
+
+<style>
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
+}
+</style>

examples/vite/src/Edges/CustomEdge2.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { EdgeProps, Position } from '../../packages/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '../../packages/vue-flow'
+
+interface CustomEdgeProps extends EdgeProps {
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  markerEndId?: string
+  data?: {
+    text: string
+  }
+}
+
+const props = defineProps<CustomEdgeProps>()
+
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+const markerEnd = computed(() => getMarkerId(props.markerEnd))
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
+const onClick = () => console.log(props.data)
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <EdgeText
+    :x="center[0]"
+    :y="center[1]"
+    :label="props.data?.text"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: 'red' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+    @click="onClick"
+  />
+</template>

examples/vite/src/Edges/CustomLabel.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+interface CustomLabelProps {
+  label: string
+}
+
+const props = defineProps<CustomLabelProps>()
+</script>
+
+<template>
+  <tspan dy="10" x="0">{{ props.label }}</tspan>
+</template>

examples/vite/src/Edges/EdgesExample.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { Edge, Node } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import CustomEdge from './CustomEdge.vue'
+import CustomEdge2 from './CustomEdge2.vue'
+import CustomLabel from './CustomLabel.vue'
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
+  { id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
+  { id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
+  { id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
+  { id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
+  { id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
+  { id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
+  { id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
+  { id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
+  { id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
+]
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
+  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
+  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
+  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: h(CustomLabel, { label: 'custom label text' }, {}),
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    markerEnd: {
+      type: MarkerType.Arrow,
+    },
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
+]
+
+useVueFlow({
+  nodes: initialNodes,
+  edges: initialEdges,
+})
+</script>
+
+<template>
+  <VueFlow :fit-view-on-init="true" :snap-to-grid="true">
+    <template #edge-custom="props">
+      <CustomEdge v-bind="props" />
+    </template>
+    <template #edge-custom2="props">
+      <CustomEdge2 v-bind="props" />
+    </template>
+    <MiniMap />
+    <Controls />
+    <Background />
+  </VueFlow>
+</template>

examples/vite/src/Empty/EmptyExample.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { Node } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+
+const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
+
+onConnect((params) => addEdges([params]))
+onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
+onNodeDragStop((node) => console.log('drag stop', node))
+
+const addRandomNode = () => {
+  const nodeId = (nodes.value.length + 1).toString()
+  const newNode: Node = {
+    id: nodeId,
+    label: `Node: ${nodeId}`,
+    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
+  }
+  addNodes([newNode])
+}
+</script>
+
+<template>
+  <VueFlow>
+    <MiniMap />
+    <Controls />
+    <Background :variant="BackgroundVariant.Lines" />
+
+    <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
+      add node
+    </button>
+  </VueFlow>
+</template>

examples/vite/src/FloatingEdges/FloatingConnectionLine.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { GraphNode, Position } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
+import { getEdgeParams } from './floating-edge-utils'
+
+interface FloatingConnectionLineProps {
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  sourceNode: GraphNode
+}
+
+const props = defineProps<FloatingConnectionLineProps>()
+
+const targetNode = computed(
+  () =>
+    ({
+      id: 'connection-target',
+      position: { x: props.targetX, y: props.targetY },
+      dimensions: { width: 1, height: 1 },
+    } as GraphNode),
+)
+
+const edgeParams = computed(() => getEdgeParams(props.sourceNode, targetNode.value))
+const d = computed(() =>
+  getBezierPath({
+    sourceX: edgeParams.value.sx,
+    sourceY: edgeParams.value.sy,
+    ...props,
+  }),
+)
+</script>
+
+<template>
+  <g>
+    <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d" />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>

examples/vite/src/FloatingEdges/FloatingEdge.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
+import { getEdgeParams } from './floating-edge-utils'
+
+interface FloatingEdgeProps extends EdgeProps {
+  id: string
+  source: string
+  target: string
+  markerEndId?: string
+  sourceNode: GraphNode
+  targetNode: GraphNode
+  nodes: GraphNode[]
+  style?: CSSProperties
+  markerEnd: MarkerType
+  markerStart: MarkerType
+}
+
+const props = defineProps<FloatingEdgeProps>()
+const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
+
+const d = computed(
+  () =>
+    (edgeParams.value.sx &&
+      getBezierPath({
+        sourceX: edgeParams.value.sx,
+        sourceY: edgeParams.value.sy,
+        targetX: edgeParams.value.tx,
+        targetY: edgeParams.value.ty,
+        sourcePosition: edgeParams.value.sourcePos,
+        targetPosition: edgeParams.value.targetPos,
+      })) ||
+    '',
+)
+</script>
+
+<template>
+  <g class="vue-flow__connection">
+    <path
+      :id="props.id"
+      class="vue-flow__edge-path"
+      :d="d"
+      :marker-start="props.markerStart"
+      :marker-end="props.markerEnd"
+      :style="props.style"
+    />
+  </g>
+</template>

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import FloatingEdge from './FloatingEdge.vue'
+import FloatingConnectionLine from './FloatingConnectionLine.vue'
+import { createElements } from './floating-edge-utils'
+
+const { addEdges, onConnect, onPaneReady, getNodes } = useVueFlow({
+  modelValue: createElements(),
+})
+onPaneReady(({ fitView }) => fitView())
+onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: MarkerType.Arrow }]))
+</script>
+
+<template>
+  <div class="floatingedges">
+    <VueFlow>
+      <Background variant="lines" :gap="24" />
+      <MiniMap />
+      <Controls />
+
+      <template #connection-line="props">
+        <FloatingConnectionLine v-bind="props" />
+      </template>
+      <template #edge-floating="props">
+        <FloatingEdge v-bind="props" :nodes="getNodes" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+
+<style>
+.floatingedges {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.floatingedges .vue-flow__handle {
+  opacity: 0;
+}
+</style>

examples/vite/src/FloatingEdges/floating-edge-utils.ts

@@ -0,0 +1,105 @@
+import type { Edge, GraphNode, XYPosition } from '../../packages/vue-flow'
+import { MarkerType, Position } from '../../packages/vue-flow'
+
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+function getNodeIntersection(intersectionNode: GraphNode, targetNode: GraphNode): XYPosition {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    dimensions: { width: intersectionNodeWidth, height: intersectionNodeHeight },
+    position: intersectionNodePosition,
+  } = intersectionNode
+  const targetPosition = targetNode.position
+
+  const w = intersectionNodeWidth / 2
+  const h = intersectionNodeHeight / 2
+
+  const x2 = intersectionNodePosition.x + w
+  const y2 = intersectionNodePosition.y + h
+  const x1 = targetPosition.x + w
+  const y1 = targetPosition.y + h
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+  const xx3 = a * xx1
+  const yy3 = a * yy1
+  const x = w * (xx3 + yy3) + x2
+  const y = h * (-xx3 + yy3) + y2
+
+  return { x, y }
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+function getEdgePosition(node: GraphNode, intersectionPoint: XYPosition) {
+  const n = { ...node.position, ...node.dimensions }
+  const nx = Math.round(n.x)
+  const ny = Math.round(n.y)
+  const px = Math.round(intersectionPoint.x)
+  const py = Math.round(intersectionPoint.y)
+
+  if (px <= nx + 1) {
+    return Position.Left
+  }
+  if (px >= nx + n.width - 1) {
+    return Position.Right
+  }
+  if (py <= ny + 1) {
+    return Position.Top
+  }
+  if (py >= n.y + n.height - 1) {
+    return Position.Bottom
+  }
+
+  return Position.Top
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source: GraphNode, target: GraphNode) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target)
+  const targetIntersectionPoint = getNodeIntersection(target, source)
+
+  const sourcePos = getEdgePosition(source, sourceIntersectionPoint)
+  const targetPos = getEdgePosition(target, targetIntersectionPoint)
+
+  return {
+    sx: sourceIntersectionPoint.x,
+    sy: sourceIntersectionPoint.y,
+    tx: targetIntersectionPoint.x,
+    ty: targetIntersectionPoint.y,
+    sourcePos,
+    targetPos,
+  }
+}
+
+export function createElements() {
+  const win = typeof window !== 'undefined' ? window : ({} as any)
+  const elements = []
+  const center = { x: win.innerWidth / 2, y: win.innerHeight / 2 }
+
+  elements.push({ id: 'target', label: 'Target', position: center })
+
+  for (let i = 0; i < 8; i++) {
+    const degrees = i * (360 / 8)
+    const radians = degrees * (Math.PI / 180)
+    const x = 250 * Math.cos(radians) + center.x
+    const y = 250 * Math.sin(radians) + center.y
+
+    elements.push({ id: `${i}`, label: 'Source', position: { x, y } })
+
+    elements.push({
+      id: `edge-${i}`,
+      target: 'target',
+      source: `${i}`,
+      type: 'floating',
+      markerEnd: MarkerType.Arrow,
+      markerStart: {
+        id: 'markerstart',
+        type: MarkerType.Arrow,
+        orient: 'auto-start-reverse',
+      },
+    } as Edge)
+  }
+
+  return elements
+}

examples/vite/src/Hidden/HiddenExample.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+
+const isHidden = ref(false)
+
+const { nodes, edges } = useVueFlow({
+  nodes: [
+    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+    { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+    { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+    { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+  ],
+  edges: [
+    { id: 'e1-2', source: '1', target: '2' },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e3-4', source: '3', target: '4' },
+  ],
+})
+watchEffect(() => {
+  nodes.value.forEach((n) => (n.hidden = isHidden.value))
+  edges.value.forEach((e) => (e.hidden = isHidden.value))
+})
+</script>
+
+<template>
+  <VueFlow>
+    <MiniMap />
+    <Controls />
+
+    <div :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }">
+      <div>
+        <label for="ishidden">
+          isHidden
+          <input id="ishidden" v-model="isHidden" type="checkbox" class="vue-flow__ishidden" />
+        </label>
+      </div>
+    </div>
+  </VueFlow>
+</template>

examples/vite/src/Interaction/InteractionExample.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+
+const {
+  nodesDraggable,
+  nodesConnectable,
+  elementsSelectable,
+  zoomOnScroll,
+  zoomOnDoubleClick,
+  zoomOnPinch,
+  panOnScroll,
+  panOnScrollMode,
+  panOnDrag,
+  onConnect,
+  onNodeDragStart,
+  onNodeDragStop,
+  onPaneClick,
+  onPaneScroll,
+  onPaneContextMenu,
+  onMoveEnd,
+  addEdges,
+} = useVueFlow({
+  modelValue: [
+    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+    { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+    { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+    { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+    { id: 'e1-2', source: '1', target: '2', animated: true },
+    { id: 'e1-3', source: '1', target: '3' },
+  ],
+})
+
+const captureZoomClick = ref(false)
+const captureZoomScroll = ref(false)
+
+onConnect((params) => addEdges([params]))
+onNodeDragStart((e) => console.log('drag start', e))
+onNodeDragStop((e) => console.log('drag stop', e))
+onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
+onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
+onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
+onMoveEnd((flowTransform) => console.log('move end', flowTransform))
+</script>
+
+<template>
+  <VueFlow>
+    <MiniMap />
+    <Controls />
+
+    <div :style="{ position: 'absolute', left: 10, top: 10, zIndex: 4 }">
+      <div>
+        <label for="draggable">
+          nodesDraggable
+          <input id="draggable" v-model="nodesDraggable" type="checkbox" class="vue-flow__draggable" />
+        </label>
+      </div>
+      <div>
+        <label for="connectable">
+          nodesConnectable
+          <input id="connectable" v-model="nodesConnectable" type="checkbox" class="vue-flow__connectable" />
+        </label>
+      </div>
+      <div>
+        <label for="selectable">
+          elementsSelectable
+          <input id="selectable" v-model="elementsSelectable" type="checkbox" class="vue-flow__selectable" />
+        </label>
+      </div>
+      <div>
+        <label for="zoomonscroll">
+          zoomOnScroll
+          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
+        </label>
+      </div>
+      <div>
+        <label for="zoomonpinch">
+          zoomOnPinch
+          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
+        </label>
+      </div>
+      <div>
+        <label for="panonscroll">
+          panOnScroll
+          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
+        </label>
+      </div>
+      <div>
+        <label>
+          panOnScrollMode
+          <select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
+            <option value="free">free</option>
+            <option value="horizontal">horizontal</option>
+            <option value="vertical">vertical</option>
+          </select>
+        </label>
+      </div>
+      <div>
+        <label for="zoomondbl">
+          zoomOnDoubleClick
+          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
+        </label>
+      </div>
+      <div>
+        <label for="panemoveable">
+          paneMovable
+          <input id="panemoveable" v-model="panOnDrag" type="checkbox" class="vue-flow__panemoveable" />
+        </label>
+      </div>
+      <div>
+        <label for="capturezoompaneclick">
+          capture onPaneClick
+          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
+        </label>
+      </div>
+      <div>
+        <label for="capturezoompanescroll">
+          capture onPaneScroll
+          <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
+        </label>
+      </div>
+    </div>
+  </VueFlow>
+</template>

examples/vite/src/Layouting/LayoutingExample.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import dagre from 'dagre'
+import type { CoordinateExtent, Elements } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '../../packages/vue-flow'
+import initialElements from './initial-elements'
+
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+const nodeExtent: CoordinateExtent = [
+  [0, -100],
+  [1000, 500],
+]
+
+const elements = ref<Elements>(initialElements)
+
+const onLayout = (direction: string) => {
+  const isHorizontal = direction === 'LR'
+  dagreGraph.setGraph({ rankdir: direction })
+
+  elements.value.forEach((el) => {
+    if (isNode(el)) {
+      dagreGraph.setNode(el.id, { width: 150, height: 50 })
+    } else {
+      dagreGraph.setEdge(el.source, el.target)
+    }
+  })
+
+  dagre.layout(dagreGraph)
+
+  elements.value.forEach((el) => {
+    if (isNode(el)) {
+      const nodeWithPosition = dagreGraph.node(el.id)
+      el.targetPosition = isHorizontal ? Position.Left : Position.Top
+      el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
+      el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="layoutflow">
+    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
+      <Controls />
+    </VueFlow>
+    <div class="controls">
+      <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
+      <button @click="onLayout('LR')">horizontal layout</button>
+    </div>
+  </div>
+</template>
+
+<style>
+@import 'layouting.css';
+</style>

examples/vite/src/Layouting/initial-elements.ts

@@ -0,0 +1,71 @@
+import type { Elements, XYPosition } from '../../packages/vue-flow'
+
+const position: XYPosition = { x: 0, y: 0 }
+
+const elements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'input',
+    position,
+  },
+  {
+    id: '2',
+    label: 'node 2',
+    position,
+  },
+  {
+    id: '2a',
+    label: 'node 2a',
+    position,
+  },
+  {
+    id: '2b',
+    label: 'node 2b',
+    position,
+  },
+  {
+    id: '2c',
+    label: 'node 2c',
+    position,
+  },
+  {
+    id: '2d',
+    label: 'node 2d',
+    position,
+  },
+  {
+    id: '3',
+    label: 'node 3',
+    position,
+  },
+  {
+    id: '4',
+    label: 'node 4',
+    position,
+  },
+  {
+    id: '5',
+    label: 'node 5',
+    position,
+  },
+  {
+    id: '6',
+    type: 'output',
+    label: 'output',
+    position,
+  },
+  { id: '7', type: 'output', label: 'output', position: { x: 400, y: 450 } },
+  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
+  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
+  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
+  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
+  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
+  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
+
+  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
+  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
+  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
+]
+
+export default elements

examples/vite/src/Layouting/layouting.css

@@ -0,0 +1,15 @@
+.layoutflow {
+  flex-grow: 1;
+  position: relative;
+}
+
+.layoutflow .controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 10;
+}
+
+.controls button {
+  margin-left: 10px;
+}

examples/vite/src/MultiFlows/Flow.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { Background, VueFlow } from '../../packages/vue-flow'
+const initialElements: Elements = [
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+]
+
+const elements = ref<Elements>(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" :fit-view-on-init="true">
+    <Background />
+  </VueFlow>
+</template>

examples/vite/src/MultiFlows/MultiFlowsExample.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import Flow from './Flow.vue'
+</script>
+
+<template>
+  <div class="vue-flow__example-multiflows">
+    <Flow />
+    <Flow />
+  </div>
+</template>
+
+<style>
+@import 'multiflows.css';
+</style>

examples/vite/src/MultiFlows/multiflows.css

@@ -0,0 +1,13 @@
+.vue-flow__example-multiflows {
+  display: flex;
+  height: 100%;
+}
+
+.vue-flow__example-multiflows .vue-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.vue-flow__example-multiflows .vue-flow:first-child {
+  border-right: 2px solid #333;
+}

examples/vite/src/Nesting/GroupNode.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { Handle, Position, getNodesInside, useVueFlow } from '../../packages/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
+
+const props = defineProps<NodeProps>()
+const { onNodeDragStop, getNodes, viewport } = useVueFlow()
+onNodeDragStop(({ node }) => {
+  const nodes = getNodesInside(
+    getNodes.value,
+    {
+      ...props.dimensions,
+      x: props.computedPosition.x,
+      y: props.computedPosition.y,
+    },
+    viewport.value,
+  )
+  if (nodes.some((n) => n.id === node.id && n.id !== props.id)) {
+    node.label = `In ${props.id}`
+    node.data = {
+      group: props.id,
+    }
+  } else if (node.data?.group === props.id) {
+    node.data.group = undefined
+    node.label = node.id
+  }
+})
+</script>
+
+<template>
+  <div class="vue-flow__group-node">
+    <Handle type="target" :position="Position.Top" />
+    <strong>Group {{ label }}</strong>
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+
+<style>
+.vue-flow__group-node {
+  padding: 15px;
+  width: 300px;
+  height: 300px;
+  border: solid 1px black;
+}
+</style>

examples/vite/src/Nesting/Nesting.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
+
+const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+  fitViewOnInit: true,
+  connectionMode: ConnectionMode.Loose,
+  nodes: [
+    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+    {
+      id: '2',
+      label: 'Node 2',
+      position: { x: 100, y: 100 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: '200px', height: '200px' },
+    },
+    {
+      id: '2a',
+      label: 'Node 2a',
+      position: { x: 10, y: 50 },
+      parentNode: '2',
+    },
+    { id: '3', label: 'Node 3', position: { x: 320, y: 100 }, class: 'light' },
+    {
+      id: '4',
+      label: 'Node 4',
+      position: { x: 320, y: 200 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: '300px', height: '300px' },
+    },
+    {
+      id: '4a',
+      label: 'Node 4a',
+      position: { x: 15, y: 65 },
+      class: 'light',
+      extent: 'parent',
+      parentNode: '4',
+    },
+    {
+      id: '4b',
+      label: 'Node 4b',
+      position: { x: 15, y: 120 },
+      class: 'light',
+      style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: '150px', width: '270px' },
+      parentNode: '4',
+    },
+    {
+      id: '4b1',
+      label: 'Node 4b1',
+      position: { x: 20, y: 40 },
+      class: 'light',
+      parentNode: '4b',
+    },
+    {
+      id: '4b2',
+      label: 'Node 4b2',
+      position: { x: 100, y: 100 },
+      class: 'light',
+      parentNode: '4b',
+    },
+  ],
+  edges: [
+    { id: 'e1-2', source: '1', target: '2', animated: true },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e2a-4a', source: '2a', target: '4a' },
+    { id: 'e3-4', source: '3', target: '4' },
+    { id: 'e3-4b', source: '3', target: '4b' },
+    { id: 'e4a-4b1', source: '4a', target: '4b1' },
+    { id: 'e4a-4b2', source: '4a', target: '4b2' },
+    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  ],
+})
+
+onConnect((params) => addEdges([params]))
+
+onMounted(() => {
+  // add nodes to parent
+  addNodes([
+    {
+      id: '999',
+      type: 'input',
+      label: 'Added after mount',
+      position: { x: 20, y: 100 },
+      class: 'light',
+      expandParent: true,
+      parentNode: '2',
+    },
+  ])
+})
+</script>
+
+<template>
+  <VueFlow>
+    <MiniMap />
+    <Controls />
+    <Background />
+  </VueFlow>
+</template>

examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { Connection, Edge, Elements, FlowInstance } from '../../packages/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '../../packages/vue-flow'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    sourcePosition: Position.Right,
+    type: 'input',
+    label: 'Input',
+    position: { x: 0, y: 80 },
+  },
+  {
+    id: '2',
+    type: 'output',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    label: 'A Node',
+    position: { x: 250, y: 0 },
+  },
+  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
+]
+
+const elements = ref<Elements>(initialElements)
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+
+const changeType = () => {
+  elements.value.forEach((el) => {
+    if (isEdge(el) || el.type === 'input') return
+    el.type = el.type === 'default' ? 'output' : 'default'
+  })
+}
+</script>
+
+<template>
+  <VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
+    <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
+  </VueFlow>
+</template>

examples/vite/src/Overview/Overview.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '../../packages/vue-flow'
+
+const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
+const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
+const onNodeDragStop = (e: FlowEvents['nodeDragStop']) => console.log('drag stop', e)
+const onNodeDoubleClick = (e: FlowEvents['nodeDoubleClick']) => console.log('node double click', e)
+const onPaneClick = (e: FlowEvents['paneClick']) => console.log('pane click', e)
+const onPaneScroll = (e: FlowEvents['paneScroll']) => console.log('pane scroll', e)
+const onPaneContextMenu = (e: FlowEvents['paneContextMenu']) => console.log('pane context menu', e)
+const onSelectionDrag = (e: FlowEvents['selectionDrag']) => console.log('selection drag', e)
+const onSelectionDragStart = (e: FlowEvents['selectionDragStart']) => console.log('selection drag start', e)
+const onSelectionDragStop = (e: FlowEvents['selectionDragStop']) => console.log('selection drag stop', e)
+const onSelectionContextMenu = (e: FlowEvents['selectionContextMenu']) => console.log('selection context menu', e)
+const onLoad = (flowInstance: FlowInstance) => {
+  console.log('flow loaded:', flowInstance)
+  flowInstance.fitView()
+}
+
+const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
+const onEdgeContextMenu = (e: FlowEvents['edgeContextMenu']) => console.log('edge context menu', e)
+const onEdgeMouseEnter = (e: FlowEvents['edgeMouseEnter']) => console.log('edge mouse enter', e)
+const onEdgeMouseMove = (e: FlowEvents['edgeMouseMove']) => console.log('edge mouse move', e)
+const onEdgeMouseLeave = (e: FlowEvents['edgeMouseLeave']) => console.log('edge mouse leave', e)
+const onEdgeDoubleClick = (e: FlowEvents['edgeDoubleClick']) => console.log('edge double click', e)
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'Welcome to <strong>Vue VueFlow!</strong>',
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    label: 'This is a <strong>default node</strong>',
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    label: 'This one has a <strong>custom style</strong>',
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    label: `You can find the docs on
+          <a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
+            Github
+          </a>`,
+  },
+  {
+    id: '5',
+    label: 'Or check out the other <strong>examples</strong>',
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    label: 'An <strong>output node</strong>',
+    position: { x: 100, y: 480 },
+  },
+  { id: '7', type: 'output', label: 'Another output node', position: { x: 400, y: 450 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
+  { id: 'e4-5', source: '4', target: '5', markerEnd: { type: MarkerType.ArrowClosed }, label: 'edge with arrowhead' },
+  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+]
+
+const snapGrid: SnapGrid = [16, 16]
+
+const nodeStrokeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'output') return '#ff0072'
+  if (n.type === 'default') return '#1a192b'
+
+  return '#eee'
+}
+
+const nodeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+
+  return '#fff'
+}
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    :connection-line-style="{ stroke: '#ddd' }"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    @connect="onConnect"
+    @pane-ready="onLoad"
+    @pane-click="onPaneClick"
+    @pane-scroll="onPaneScroll"
+    @pane-contex-menu="onPaneContextMenu"
+    @node-drag-start="onNodeDragStart"
+    @node-drag="onNodeDrag"
+    @node-drag-stop="onNodeDragStop"
+    @node-double-click="onNodeDoubleClick"
+    @selection-drag-start="onSelectionDragStart"
+    @selection-drag="onSelectionDrag"
+    @selection-drag-stop="onSelectionDragStop"
+    @selection-context-menu="onSelectionContextMenu"
+    @move-end="onMoveEnd"
+    @edge-update="onEdgeMouseMove"
+    @edge-context-menu="onEdgeContextMenu"
+    @edge-mouse-enter="onEdgeMouseEnter"
+    @edge-mouse-move="onEdgeMouseMove"
+    @edge-mouse-leave="onEdgeMouseLeave"
+    @edge-double-click="onEdgeDoubleClick"
+  >
+    <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
+    <Controls />
+    <Background color="#aaa" :gap="20" />
+  </VueFlow>
+</template>

examples/vite/src/Provider/ProviderExample.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '../../packages/vue-flow'
+import Sidebar from './Sidebar.vue'
+
+const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+]
+
+useVueFlow()
+const elements = ref<Elements>(initialElements)
+</script>
+
+<template>
+  <div class="providerflow">
+    <Sidebar />
+    <div class="vue-flow-wrapper">
+      <VueFlow v-model="elements" :connection-mode="ConnectionMode.Loose" @pane-ready="onLoad">
+        <Controls />
+      </VueFlow>
+    </div>
+  </div>
+</template>
+
+<style>
+@import 'provider.css';
+</style>

examples/vite/src/Provider/Sidebar.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useVueFlow } from '../../packages/vue-flow'
+const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
+
+const selectAll = () => {
+  addSelectedNodes(getNodes.value)
+  nodesSelectionActive.value = true
+}
+</script>
+
+<template>
+  <aside>
+    <div class="description">
+      This is an example of how you can access the internal state outside of the Vue VueFlow component.
+    </div>
+    <div class="title">Zoom & pan transform</div>
+    <div class="transform">
+      {{ [viewport.x.toFixed(2), viewport.y.toFixed(2), viewport.zoom.toFixed(2)] }}
+    </div>
+    <div class="title">Nodes</div>
+    <div v-for="node of getNodes" :key="node.id">
+      Node {{ node.id }} - x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}
+    </div>
+
+    <div class="selectall">
+      <button @click="selectAll">select all nodes</button>
+    </div>
+  </aside>
+</template>

examples/vite/src/Provider/provider.css

@@ -0,0 +1,45 @@
+.providerflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.providerflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.providerflow aside .description {
+  margin-bottom: 10px;
+}
+
+.providerflow aside .title {
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.providerflow aside .transform {
+  margin-bottom: 20px;
+}
+
+.providerflow .vue-flow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+.providerflow .selectall {
+  margin-top: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .providerflow {
+    flex-direction: row;
+  }
+
+  .providerflow aside {
+    width: 20%;
+    max-width: 250px;
+  }
+}

examples/vite/src/RGBFlow/RGBFlow.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { templateRef } from '@vueuse/core'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
+import RGBNode from './RGBNode.vue'
+import RGBOutputNode from './RGBOutputNode.vue'
+
+interface Colors {
+  red: number
+  green: number
+  blue: number
+}
+const elements = ref<Elements>([
+  { id: '1', type: 'rgb', data: { color: 'r' }, position: { x: -25, y: 50 } },
+  { id: '2', type: 'rgb', data: { color: 'g' }, position: { x: 50, y: -100 } },
+  { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } },
+  { id: '4', type: 'rgb-output', data: { label: 'RGB' }, position: { x: 400, y: 50 } },
+  { id: 'e1-4', data: { color: 'red' }, source: '1', target: '4', animated: true },
+  { id: 'e2-4', data: { color: 'green' }, source: '2', target: '4', animated: true },
+  { id: 'e3-4', data: { color: 'blue' }, source: '3', target: '4', animated: true },
+])
+
+const el = templateRef<HTMLDivElement>('page', null)
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView({ padding: 1 })
+}
+const color = ref<Colors>({
+  red: 100,
+  green: 150,
+  blue: 100,
+})
+const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
+</script>
+
+<template>
+  <div ref="page" class="demo-flow">
+    <VueFlow v-model="elements" @pane-ready="onLoad">
+      <template #node-rgb="props">
+        <RGBNode v-bind="props" :amount="color" @change="onChange" />
+      </template>
+      <template #node-rgb-output="props">
+        <RGBOutputNode v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+
+<style>
+.demo-flow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  width: 100%;
+  border-radius: 0;
+}
+</style>

examples/vite/src/RGBFlow/RGBNode.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
+
+interface RGBNodeProps extends NodeProps {
+  data: {
+    color: 'r' | 'g' | 'b'
+  }
+  amount: {
+    red: number
+    green: number
+    blue: number
+  }
+}
+
+const props = defineProps<RGBNodeProps>()
+const emit = defineEmits(['change'])
+let color = 'red'
+switch (props.data.color) {
+  case 'r':
+    color = 'red'
+    break
+  case 'g':
+    color = 'green'
+    break
+  case 'b':
+    color = 'blue'
+    break
+}
+
+const colorVal = computed({
+  get: () => props.amount[color as 'red' | 'green' | 'blue'],
+  set: (val) => {
+    emit('change', { color, val })
+  },
+})
+
+const style = { '--color': color } as CSSProperties
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
+    <input v-model="colorVal" class="slider nodrag" :style="style" type="range" min="0" max="255" />
+    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+  </div>
+</template>
+
+<style>
+.wrapper {
+  padding: 16px;
+  background: #fff;
+  border-radius: 10px;
+  border: 2px solid black;
+  text-align: left;
+}
+
+.slider {
+  --color: red;
+  margin-top: 12px;
+  background: gainsboro;
+  width: 100%;
+  height: 10px;
+  outline: none;
+  border-radius: 999px;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-moz-range-thumb,
+  &::-webkit-slider-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+}
+</style>

examples/vite/src/RGBFlow/RGBOutputNode.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
+
+interface RBGOutputNodeProps extends NodeProps {
+  rgb: string
+}
+
+const props = defineProps<RBGOutputNodeProps>()
+</script>
+
+<template>
+  <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
+    <div class="text-md uppercase">{{ props.rgb }}</div>
+    <Handle type="target" :position="Position.Left" />
+  </div>
+</template>
+
+<style>
+.rgb-output-node {
+  padding: 9px;
+  border-radius: 25px;
+  text-align: left;
+  color: white;
+}
+</style>

examples/vite/src/SaveRestore/Controls.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { FlowExportObject, Node } from '../../packages/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '../../packages/vue-flow'
+
+const flowKey = 'example-flow'
+const state = useStorage<FlowExportObject>(flowKey, {
+  nodes: [],
+  edges: [],
+  position: [NaN, NaN],
+  zoom: 1,
+})
+
+const getNodeId = () => `randomnode_${+new Date()}`
+
+const { setTransform } = useZoomPanHelper()
+const { nodes, edges, addNodes, setNodes, setEdges, instance, dimensions } = useVueFlow()
+
+const onSave = () => {
+  state.value = instance.value?.toObject()
+}
+
+const onRestore = () => {
+  const flow: FlowExportObject | null = state.value
+
+  if (flow) {
+    const [x = 0, y = 0] = flow.position
+    setNodes(state.value.nodes)
+    setEdges(state.value.edges)
+    setTransform({ x, y, zoom: flow.zoom || 0 })
+  }
+}
+
+const onAdd = () => {
+  const newNode = {
+    id: `random_node-${getNodeId()}`,
+    label: 'Added node',
+    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
+  } as Node
+  addNodes([newNode])
+}
+</script>
+
+<template>
+  <div class="save__controls">
+    <button @click="onSave">save</button>
+    <button @click="onRestore">restore</button>
+    <button @click="onAdd">add node</button>
+  </div>
+</template>

examples/vite/src/SaveRestore/SaveRestoreExample.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
+import Controls from './Controls.vue'
+
+const initialElements: Elements = [
+  { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+]
+
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements">
+    <Controls />
+  </VueFlow>
+</template>
+
+<style>
+@import 'save.css';
+</style>

examples/vite/src/SaveRestore/save.css

@@ -0,0 +1,11 @@
+.save__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.save__controls button {
+  margin-left: 5px;
+}

examples/vite/src/Stress/StressExample.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
+import { getElements } from './utils'
+
+const { nodes, edges } = getElements(10, 10)
+
+const { getNode, onPaneReady } = useVueFlow({
+  nodes,
+  edges,
+})
+
+onPaneReady((i) => {
+  i.fitView({
+    padding: 0.2,
+  })
+  console.log(i.getElements())
+})
+</script>
+
+<template>
+  <VueFlow />
+</template>

examples/vite/src/Stress/utils.ts

@@ -0,0 +1,33 @@
+import type { Edge, Node } from '../../packages/vue-flow'
+
+export function getElements(xElements = 10, yElements = 10) {
+  const initialNodes: Node[] = []
+  const initialEdges: Edge[] = []
+  let nodeId = 1
+  let recentNodeId = null
+
+  for (let y = 0; y < yElements; y++) {
+    for (let x = 0; x < xElements; x++) {
+      const position = { x: x * 100, y: y * 50 }
+      const node = {
+        id: nodeId.toString(),
+        style: { width: 50, fontSize: 11 },
+        label: `Node ${nodeId}`,
+        position,
+      }
+      initialNodes.push(node)
+
+      if (recentNodeId && nodeId <= xElements * yElements) {
+        initialEdges.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() })
+      }
+
+      recentNodeId = nodeId
+      nodeId++
+    }
+  }
+
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  }
+}

examples/vite/src/Switch/SwitchExample.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
+
+const elementsA: Elements = [
+  { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2a', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3a', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4a', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1a', target: '2a' },
+  { id: 'e1-3', source: '1a', target: '3a' },
+]
+
+const elementsB: Elements = [
+  { id: 'inputb', type: 'input', label: 'Input', position: { x: 300, y: 5 }, class: 'light' },
+  { id: '1b', label: 'Node 1', position: { x: 0, y: 100 }, class: 'light' },
+  { id: '2b', label: 'Node 2', position: { x: 200, y: 100 }, class: 'light' },
+  { id: '3b', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4b', label: 'Node 4', position: { x: 600, y: 100 }, class: 'light' },
+
+  { id: 'e1b', source: 'inputb', target: '1b' },
+  { id: 'e2b', source: 'inputb', target: '2b' },
+  { id: 'e3b', source: 'inputb', target: '3b' },
+  { id: 'e4b', source: 'inputb', target: '4b' },
+]
+
+const elements = ref(elementsA)
+</script>
+
+<template>
+  <VueFlow v-model="elements">
+    <div :style="{ position: 'absolute', right: 10, top: 10, zIndex: 4 }">
+      <button style="margin-right: 5px" @click="() => (elements = elementsA)">flow a</button>
+      <button @click="() => (elements = elementsB)">flow b</button>
+    </div>
+  </VueFlow>
+</template>

examples/vite/src/Unidirectional/CustomNode.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { Handle, Position } from '../../packages/vue-flow'
+
+interface Props {
+  id: string
+}
+
+const props = defineProps<Props>()
+const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
+</script>
+
+<template>
+  <div :key="props.id" :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/vite/src/Unidirectional/UnidirectionalExample.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import type { Elements, Node } from '../../packages/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '../../packages/vue-flow'
+import CustomNode from './CustomNode.vue'
+
+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: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-1b',
+    source: '00',
+    target: '01',
+    sourceHandle: 'top',
+    targetHandle: 'right',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-2a',
+    source: '00',
+    target: '02',
+    sourceHandle: 'top',
+    targetHandle: 'left',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-2b',
+    source: '00',
+    target: '02',
+    sourceHandle: 'right',
+    targetHandle: 'bottom',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-3a',
+    source: '00',
+    target: '03',
+    sourceHandle: 'right',
+    targetHandle: 'top',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-3b',
+    source: '00',
+    target: '03',
+    sourceHandle: 'bottom',
+    targetHandle: 'left',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-4a',
+    source: '00',
+    target: '04',
+    sourceHandle: 'bottom',
+    targetHandle: 'right',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-4b',
+    source: '00',
+    target: '04',
+    sourceHandle: 'left',
+    targetHandle: 'top',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-10',
+    source: '00',
+    target: '10',
+    sourceHandle: 'top',
+    targetHandle: 'bottom',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-20',
+    source: '00',
+    target: '20',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-30',
+    source: '00',
+    target: '30',
+    sourceHandle: 'bottom',
+    targetHandle: 'top',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+  {
+    id: 'e0-40',
+    source: '00',
+    target: '40',
+    sourceHandle: 'left',
+    targetHandle: 'right',
+    type: 'step',
+    markerEnd: MarkerType.Arrow,
+  },
+]
+
+let id = 4
+const getId = () => `${id++}`
+
+const elements = ref(initialElements)
+const { project } = useZoomPanHelper()
+
+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>
+  <VueFlow
+    v-model="elements"
+    :connection-line-type="ConnectionLineType.SmoothStep"
+    :connection-mode="ConnectionMode.Loose"
+    @pane-click="onPaneClick"
+    @pane-ready="({ fitView }) => fitView()"
+  >
+    <template #node-custom="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
+</template>

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '../../packages/vue-flow'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node <strong>A</strong>',
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    label: 'Node <strong>B</strong>',
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    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: 'Updateable edge', updatable: true },
+]
+
+const elements = ref(initialElements)
+const onLoad = (flowInstance: FlowInstance) => flowInstance.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))
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    :snap-to-grid="true"
+    :connection-mode="ConnectionMode.Loose"
+    @pane-ready="onLoad"
+    @edge-update="onEdgeUpdate"
+    @connect="onConnect"
+    @edge-update-start="onEdgeUpdateStart"
+    @edge-update-end="onEdgeUpdateEnd"
+  >
+    <Controls />
+  </VueFlow>
+</template>

examples/vite/src/UpdateNode/UpdateNodeExample.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
+
+const initialElements: Elements = [
+  { id: '1', label: '-', position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+]
+
+const elements = ref<Elements>(initialElements)
+const opts = reactive({
+  bg: '#eeeeee',
+  name: 'Node 1',
+  hidden: false,
+})
+
+const updateNode = () => {
+  elements.value.forEach((el) => {
+    if (el.id === '1') {
+      // it's important that you create a new object here in order to notify react flow about the change
+      el.label = opts.name
+      el.style = { backgroundColor: opts.bg }
+      el.hidden = opts.hidden
+    }
+  })
+}
+
+onMounted(updateNode)
+</script>
+
+<template>
+  <VueFlow v-model="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+    <div class="updatenode__controls">
+      <label>label:</label>
+      <input v-model="opts.name" @input="updateNode" />
+
+      <label class="updatenode__bglabel">background:</label>
+      <input v-model="opts.bg" type="color" @input="updateNode" />
+
+      <div class="updatenode__checkboxwrapper">
+        <label>hidden:</label>
+        <input v-model="opts.hidden" type="checkbox" @change="updateNode" />
+      </div>
+    </div>
+  </VueFlow>
+</template>
+
+<style>
+@import 'updatenode.css';
+</style>

examples/vite/src/UpdateNode/updatenode.css

@@ -0,0 +1,21 @@
+.updatenode__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.updatenode__controls label {
+  display: block;
+}
+
+.updatenode__bglabel {
+  margin-top: 10px;
+}
+
+.updatenode__checkboxwrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}

examples/vite/src/Validation/CustomInput.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
+
+interface CustomInputProps {
+  isValidTargetPos: ValidConnectionFunc
+}
+const props = defineProps<CustomInputProps>()
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <div>Only connectable with B</div>
+  <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
+</template>

examples/vite/src/Validation/CustomNode.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { NodeProps, ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
+
+interface CustomNodeProps extends NodeProps {
+  id: string
+  isValidSourcePos: ValidConnectionFunc
+}
+
+const props = defineProps<CustomNodeProps>()
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
+  <div>{{ props.id }}</div>
+</template>

examples/vite/src/Validation/ValidationExample.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { Connection, FlowInstance, OnConnectStartParams } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
+import CustomInput from './CustomInput.vue'
+import CustomNode from './CustomNode.vue'
+
+const { nodes, edges, addEdges } = useVueFlow({
+  nodes: [
+    { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
+    {
+      id: 'A',
+      type: 'customnode',
+      position: { x: 250, y: 0 },
+      isValidSourcePos: () => false,
+    },
+    { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
+    { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
+  ],
+})
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
+const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
+const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
+
+const onConnect = (params: Connection) => {
+  console.log('on connect', params)
+  addEdges([params])
+}
+</script>
+
+<template>
+  <VueFlow
+    :select-nodes-on-drag="false"
+    class="validationflow"
+    @connect="onConnect"
+    @pane-ready="onLoad"
+    @connect-start="onConnectStart"
+    @connect-stop="onConnectStop"
+    @connect-end="onConnectEnd"
+  >
+    <template #node-custominput="props">
+      <CustomInput v-bind="props" />
+    </template>
+    <template #node-customnode="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
+</template>
+
+<style>
+@import 'validation.css';
+</style>

examples/vite/src/Validation/validation.css

@@ -0,0 +1,31 @@
+.validationflow .vue-flow__node {
+  width: 150px;
+  border-radius: 5px;
+  padding: 10px;
+  color: #555;
+  border: 1px solid #ddd;
+  text-align: center;
+  font-size: 12px;
+}
+
+.validationflow .vue-flow__node-customnode {
+  background: #e6e6e9;
+  border: 1px solid #ddd;
+}
+
+.vue-flow__node-custominput .vue-flow__handle {
+  background: #e6e6e9;
+}
+
+.validationflow .vue-flow__node-custominput {
+  background: #fff;
+
+}
+
+.validationflow .vue-flow__handle-connecting {
+  background: #ff6060;
+}
+
+.validationflow .vue-flow__handle-valid {
+  background: #55dd99;
+}