refactor(core): rename core pkg dir to core

packages/core/src/components/ConnectionLine/ConnectionLine.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { getBezierPath, getSimpleBezierPath, getSmoothStepPath } from '../Edges/utils'
+import type { GraphNode, HandleElement } from '../../types'
+import { ConnectionLineType, Position } from '../../types'
+import { useVueFlow } from '../../composables'
+import { Slots } from '../../context'
+import { getMarkerId } from '../../utils'
+
+const { sourceNode } = defineProps<{
+  sourceNode: GraphNode
+}>()
+
+const {
+  getNodes,
+  connectionStartHandle,
+  connectionPosition,
+  connectionLineType,
+  connectionLineStyle,
+  connectionLineOptions,
+  viewport,
+} = $(useVueFlow())
+
+const slots = inject(Slots)?.['connection-line']
+
+const hasSlot = slots?.({})
+
+const handleId = connectionStartHandle!.handleId
+const nodeId = connectionStartHandle!.nodeId
+const type = connectionStartHandle!.type
+
+const sourceHandle =
+  handleId && type
+    ? sourceNode.handleBounds[type]?.find((d: HandleElement) => d.id === handleId)
+    : type && sourceNode.handleBounds[type ?? 'source']?.[0]
+
+const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2
+const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height
+
+const sourceX = sourceNode.computedPosition.x + sourceHandleX
+const sourceY = sourceNode.computedPosition.y + sourceHandleY
+
+const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
+
+const targetPosition = isRightOrLeft ? Position.Left : Position.Top
+
+const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
+const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)
+
+const dAttr = computed(() => {
+  let path = `M${sourceX},${sourceY} ${targetX},${targetY}`
+
+  const pathParams = {
+    sourceX,
+    sourceY,
+    sourcePosition: sourceHandle?.position,
+    targetX,
+    targetY,
+    targetPosition,
+  }
+
+  switch (connectionLineType || connectionLineOptions.type) {
+    case ConnectionLineType.Bezier:
+      ;[path] = getBezierPath(pathParams)
+      break
+    case ConnectionLineType.Step:
+      ;[path] = getSmoothStepPath({
+        ...pathParams,
+        borderRadius: 0,
+      })
+      break
+    case ConnectionLineType.SmoothStep:
+      ;[path] = getSmoothStepPath(pathParams)
+      break
+    case ConnectionLineType.SimpleBezier:
+      ;[path] = getSimpleBezierPath(pathParams)
+      break
+  }
+
+  return path
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ConnectionLine',
+}
+</script>
+
+<template>
+  <g class="vue-flow__connection">
+    <component
+      :is="slots"
+      v-if="hasSlot"
+      v-bind="{
+        sourceX,
+        sourceY,
+        sourcePosition: sourceHandle?.position,
+        targetX,
+        targetY,
+        targetPosition,
+        nodes: getNodes,
+        sourceNode,
+        sourceHandle,
+        markerEnd: `url(#${getMarkerId(connectionLineOptions.markerEnd)})`,
+        markerStart: `url(#${getMarkerId(connectionLineOptions.markerStart)})`,
+      }"
+    />
+    <path
+      v-else
+      :d="dAttr"
+      class="vue-flow__connection-path"
+      :class="connectionLineOptions.class"
+      :style="connectionLineStyle || connectionLineOptions.style || {}"
+      :marker-end="`url(#${getMarkerId(connectionLineOptions.markerEnd)})`"
+      :marker-start="`url(#${getMarkerId(connectionLineOptions.markerStart)})`"
+    />
+  </g>
+</template>

packages/core/src/components/Edges/BaseEdge.ts

@@ -0,0 +1,62 @@
+import type { FunctionalComponent } from 'vue'
+import EdgeText from './EdgeText.vue'
+import type { BaseEdgeProps } from '~/types'
+
+/**
+ * The base edge is a simple wrapper for svg path
+ * You can use the base edge in your custom edges and just pass down the necessary props
+ */
+const BaseEdge: FunctionalComponent<BaseEdgeProps> = function ({
+  path,
+  label,
+  labelX,
+  labelY,
+  labelBgBorderRadius,
+  labelBgPadding,
+  labelBgStyle,
+  labelShowBg,
+  labelStyle,
+  markerStart,
+  markerEnd,
+  style,
+}) {
+  return [
+    h('path', {
+      'style': { ...style },
+      'd': path,
+      'class': 'vue-flow__edge-path',
+      'marker-end': markerEnd,
+      'marker-start': markerStart,
+    }),
+    label
+      ? h(EdgeText, {
+          x: labelX,
+          y: labelY,
+          label,
+          labelStyle,
+          labelShowBg,
+          labelBgStyle,
+          labelBgPadding,
+          labelBgBorderRadius,
+        })
+      : null,
+  ]
+}
+
+BaseEdge.props = [
+  'path',
+  'labelX',
+  'labelY',
+  'label',
+  'labelBgBorderRadius',
+  'labelBgPadding',
+  'labelBgStyle',
+  'labelShowBg',
+  'labelStyle',
+  'markerStart',
+  'markerEnd',
+  'style',
+]
+BaseEdge.inheritAttrs = false
+
+export default BaseEdge

packages/core/src/components/Edges/BezierEdge.ts

@@ -0,0 +1,71 @@
+import type { FunctionalComponent } from 'vue'
+import { getBezierPath } from './utils'
+import BaseEdge from './BaseEdge'
+import { Position } from '~/types'
+import type { EdgeProps } from '~/types'
+
+const BezierEdge: FunctionalComponent<EdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  curvature,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature,
+  })
+
+  return h(BaseEdge, {
+    path,
+    labelX,
+    labelY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+BezierEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'curvature',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+BezierEdge.inheritAttrs = false
+
+export default BezierEdge

packages/core/src/components/Edges/EdgeAnchor.ts

@@ -0,0 +1,47 @@
+import type { FunctionalComponent, HTMLAttributes } from 'vue'
+import { Position } from '~/types'
+
+interface Props extends HTMLAttributes {
+  position: Position
+  centerX: number
+  centerY: number
+  radius?: number
+}
+
+const shiftX = (x: number, shift: number, position: Position): number => {
+  if (position === Position.Left) return x - shift
+  if (position === Position.Right) return x + shift
+  return x
+}
+
+const shiftY = (y: number, shift: number, position: Position): number => {
+  if (position === Position.Top) return y - shift
+  if (position === Position.Bottom) return y + shift
+  return y
+}
+
+const EdgeAnchor: FunctionalComponent<Props> = function ({ radius = 10, centerX = 0, centerY = 0, position = Position.Top }) {
+  const cx = computed(() => {
+    const val = shiftX(centerX, radius, position)
+    if (isNaN(val)) return 0
+    else return val
+  })
+  const cy = computed(() => {
+    const val = shiftY(centerY, radius, position)
+    if (isNaN(val)) return 0
+    else return val
+  })
+
+  return h('circle', {
+    class: 'vue-flow__edgeupdater',
+    cx: cx.value,
+    cy: cy.value,
+    r: radius,
+    stroke: 'transparent',
+    fill: 'transparent',
+  })
+}
+
+EdgeAnchor.props = ['radius', 'centerX', 'centerY', 'position']
+
+export default EdgeAnchor

packages/core/src/components/Edges/EdgeText.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { EdgeTextProps } from '../../types/components'
+import type { Rect as RectType } from '../../types'
+
+const {
+  x,
+  y,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding = [2, 4],
+  labelBgBorderRadius = 2,
+} = defineProps<EdgeTextProps>()
+
+const el = ref<SVGTextElement>()
+
+let box = $ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
+
+onMounted(() => {
+  box = el.value!.getBBox()
+})
+
+const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'EdgeText',
+}
+</script>
+
+<template>
+  <g :transform="transform" class="vue-flow__edge-textwrapper">
+    <rect
+      v-if="labelShowBg"
+      class="vue-flow__edge-textbg"
+      :width="`${box.width + 2 * labelBgPadding[0]}px`"
+      :height="`${box.height + 2 * labelBgPadding[1]}px`"
+      :x="-labelBgPadding[0]"
+      :y="-labelBgPadding[1]"
+      :style="labelBgStyle"
+      :rx="labelBgBorderRadius"
+      :ry="labelBgBorderRadius"
+    />
+    <text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle">
+      <slot>
+        <component :is="label" v-if="typeof label !== 'string' && typeof label" />
+        <template v-else>
+          {{ label }}
+        </template>
+      </slot>
+    </text>
+  </g>
+</template>

packages/core/src/components/Edges/SimpleBezierEdge.ts

@@ -0,0 +1,68 @@
+import type { FunctionalComponent } from 'vue'
+import { getSimpleBezierPath } from './utils'
+import BaseEdge from './BaseEdge'
+import { Position } from '~/types'
+import type { EdgeProps } from '~/types'
+
+const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const [path, labelX, labelY] = getSimpleBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  return h(BaseEdge, {
+    path,
+    labelX,
+    labelY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+SimpleBezierEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+SimpleBezierEdge.inheritAttrs = false
+
+export default SimpleBezierEdge

packages/core/src/components/Edges/SmoothStepEdge.ts

@@ -0,0 +1,74 @@
+import type { FunctionalComponent } from 'vue'
+import { getSmoothStepPath } from './utils'
+import BaseEdge from './BaseEdge'
+import type { SmoothStepEdgeProps } from '~/types'
+import { Position } from '~/types'
+
+const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  borderRadius,
+  offset,
+  style,
+}) {
+  const [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius,
+    offset,
+  })
+
+  return h(BaseEdge, {
+    path,
+    labelX,
+    labelY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+SmoothStepEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'borderRadius',
+  'offset',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+SmoothStepEdge.inheritAttrs = false
+
+export default SmoothStepEdge

packages/core/src/components/Edges/StepEdge.ts

@@ -0,0 +1,28 @@
+import type { FunctionalComponent } from 'vue'
+import SmoothStepEdge from './SmoothStepEdge'
+import type { EdgeProps } from '~/types'
+
+const StepEdge: FunctionalComponent<EdgeProps> = function (props) {
+  return h(SmoothStepEdge, { ...props, borderRadius: 0 })
+}
+
+StepEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+StepEdge.inheritAttrs = false
+
+export default StepEdge

packages/core/src/components/Edges/StraightEdge.ts

@@ -0,0 +1,56 @@
+import type { FunctionalComponent } from 'vue'
+import BaseEdge from './BaseEdge'
+import { getStraightPath } from './utils'
+import type { EdgeProps } from '~/types'
+
+const StraightEdge: FunctionalComponent<EdgeProps> = function ({
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY })
+
+  return h(BaseEdge, {
+    path,
+    labelX,
+    labelY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+StraightEdge.props = [
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+StraightEdge.inheritAttrs = false
+
+export default StraightEdge

packages/core/src/components/Edges/Wrapper.ts

@@ -0,0 +1,218 @@
+import type { CSSProperties, Component, VNode } from 'vue'
+import EdgeAnchor from './EdgeAnchor'
+import type { EdgeComponent, EdgeEventsOn, EdgeMarkerType, EdgeTextProps, EdgeUpdatable, GraphNode } from '~/types'
+import { ConnectionMode, Position } from '~/types'
+import { getEdgePositions, getHandle, getMarkerId } from '~/utils'
+import { EdgeId, EdgeRef } from '~/context'
+
+interface Props {
+  id: string
+  type: EdgeComponent | Function | Object | false
+  name: string
+  source: string
+  target: string
+  sourceNode?: GraphNode
+  targetNode?: GraphNode
+  targetHandleId?: string | null
+  sourceHandleId?: string | null
+  selectable?: boolean
+  updatable?: EdgeUpdatable
+  label?: string | VNode | Component<EdgeTextProps> | Object
+  data?: any
+  events: EdgeEventsOn
+  labelStyle?: CSSProperties
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  animated?: boolean
+  selected?: boolean
+  style: CSSProperties
+  markerEnd?: EdgeMarkerType
+  markerStart?: EdgeMarkerType
+  connectionMode: ConnectionMode
+  edgeUpdaterRadius: number
+  updating?: boolean
+}
+
+const Wrapper = defineComponent({
+  props: [
+    'name',
+    'type',
+    'id',
+    'data',
+    'events',
+    'labelBgBorderRadius',
+    'labelBgPadding',
+    'labelBgStyle',
+    'labelStyle',
+    'labelShowBg',
+    'style',
+    'animated',
+    'label',
+    'updatable',
+    'selectable',
+    'target',
+    'source',
+    'sourceNode',
+    'targetNode',
+    'sourceHandleId',
+    'targetHandleId',
+    'selected',
+    'markerEnd',
+    'markerStart',
+    'connectionMode',
+    'edgeUpdaterRadius',
+    'updating',
+  ],
+  emits: ['source-mousedown', 'target-mousedown'],
+  setup(props: Props, { emit }) {
+    let updating = $ref(false)
+
+    const edgeEl = ref()
+
+    provide(EdgeId, props.id)
+    provide(EdgeRef, edgeEl)
+
+    const onEdgeUpdaterMouseEnter = () => (updating = true)
+
+    const onEdgeUpdaterMouseOut = () => (updating = false)
+
+    const onEdgeUpdaterSourceMouseDown = (e: MouseEvent) => {
+      emit('source-mousedown', e)
+    }
+
+    const onEdgeUpdaterTargetMouseDown = (e: MouseEvent) => {
+      emit('target-mousedown', e)
+    }
+
+    return () => {
+      if (!props.sourceNode || !props.targetNode) return null
+
+      let sourceNodeHandles
+      if (props.connectionMode === ConnectionMode.Strict) {
+        sourceNodeHandles = props.sourceNode.handleBounds.source
+      } else {
+        sourceNodeHandles = props.sourceNode.handleBounds.source ?? props.sourceNode.handleBounds.target
+      }
+
+      const sourceHandle = getHandle(sourceNodeHandles, props.sourceHandleId)
+
+      let targetNodeHandles
+      if (props.connectionMode === ConnectionMode.Strict) {
+        targetNodeHandles = props.targetNode.handleBounds.target
+      } else {
+        targetNodeHandles = props.targetNode.handleBounds.target ?? props.targetNode.handleBounds.source
+      }
+
+      const targetHandle = getHandle(targetNodeHandles, props.targetHandleId)
+
+      const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
+
+      const targetPosition = targetHandle ? targetHandle.position : Position.Top
+
+      const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
+        props.sourceNode,
+        sourceHandle,
+        sourcePosition,
+        props.targetNode,
+        targetHandle,
+        targetPosition,
+      )
+
+      return h(
+        'g',
+        {
+          'ref': edgeEl,
+          'data-id': props.id,
+          'class': [
+            'vue-flow__edge',
+            `vue-flow__edge-${props.name}`,
+            {
+              updating,
+              selected: props.selected,
+              animated: props.animated,
+              inactive: !props.selectable,
+            },
+          ],
+        },
+        [
+          props.updating
+            ? null
+            : h(props.type as any, {
+                id: props.id,
+                sourceNode: props.sourceNode,
+                targetNode: props.targetNode,
+                source: props.source,
+                target: props.target,
+                updatable: props.updatable,
+                selected: props.selected,
+                animated: props.animated,
+                label: props.label,
+                labelStyle: props.labelStyle,
+                labelShowBg: props.labelShowBg,
+                labelBgStyle: props.labelBgStyle,
+                labelBgPadding: props.labelBgPadding,
+                labelBgBorderRadius: props.labelBgBorderRadius,
+                data: props.data,
+                events: props.events,
+                style: props.style,
+                markerStart: `url(#${getMarkerId(props.markerStart)})`,
+                markerEnd: `url(#${getMarkerId(props.markerEnd)})`,
+                sourcePosition,
+                targetPosition,
+                sourceX,
+                sourceY,
+                targetX,
+                targetY,
+                sourceHandleId: props.sourceHandleId,
+                targetHandleId: props.targetHandleId,
+              }),
+
+          [
+            props.updatable === 'source' || props.updatable === true
+              ? [
+                  h(
+                    'g',
+                    {
+                      onMousedown: onEdgeUpdaterSourceMouseDown,
+                      onMouseenter: onEdgeUpdaterMouseEnter,
+                      onMouseout: onEdgeUpdaterMouseOut,
+                    },
+                    h(EdgeAnchor, {
+                      'position': sourcePosition,
+                      'centerX': sourceX,
+                      'centerY': sourceY,
+                      'radius': props.edgeUpdaterRadius,
+                      'data-type': 'source',
+                    }),
+                  ),
+                ]
+              : null,
+            props.updatable === 'target' || props.updatable === true
+              ? [
+                  h(
+                    'g',
+                    {
+                      onMousedown: onEdgeUpdaterTargetMouseDown,
+                      onMouseenter: onEdgeUpdaterMouseEnter,
+                      onMouseout: onEdgeUpdaterMouseOut,
+                    },
+                    h(EdgeAnchor, {
+                      'position': targetPosition,
+                      'centerX': targetX,
+                      'centerY': targetY,
+                      'radius': props.edgeUpdaterRadius,
+                      'data-type': 'target',
+                    }),
+                  ),
+                ]
+              : null,
+          ],
+        ],
+      )
+    }
+  },
+})
+
+export default Wrapper

packages/core/src/components/Edges/index.ts

@@ -0,0 +1,9 @@
+export { default as BaseEdge } from './BaseEdge'
+export { default as BezierEdge } from './BezierEdge'
+export { default as SimpleBezierEdge } from './SimpleBezierEdge'
+export { default as StepEdge } from './StepEdge'
+export { default as SmoothStepEdge } from './SmoothStepEdge'
+export { default as StraightEdge } from './StraightEdge'
+export { default as EdgeAnchor } from './EdgeAnchor'
+export { default as EdgeText } from './EdgeText.vue'
+export { default as EdgeWrapper } from './Wrapper'

packages/core/src/components/Edges/utils/bezier.ts

@@ -0,0 +1,98 @@
+import { getBezierEdgeCenter } from './general'
+import { Position } from '~/types'
+
+export interface GetBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+  curvature?: number
+}
+
+interface GetControlWithCurvatureParams {
+  pos: Position
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+  c: number
+}
+
+function calculateControlOffset(distance: number, curvature: number): number {
+  if (distance >= 0) {
+    return 0.5 * distance
+  } else {
+    return curvature * 25 * Math.sqrt(-distance)
+  }
+}
+
+function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] {
+  let ctX: number, ctY: number
+  switch (pos) {
+    case Position.Left:
+      ctX = x1 - calculateControlOffset(x1 - x2, c)
+      ctY = y1
+      break
+    case Position.Right:
+      ctX = x1 + calculateControlOffset(x2 - x1, c)
+      ctY = y1
+      break
+    case Position.Top:
+      ctX = x1
+      ctY = y1 - calculateControlOffset(y1 - y2, c)
+      break
+    case Position.Bottom:
+      ctX = x1
+      ctY = y1 + calculateControlOffset(y2 - y1, c)
+      break
+  }
+  return [ctX, ctY]
+}
+
+export function getBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+  curvature = 0.25,
+}: GetBezierPathParams): [string, number, number, number, number] {
+  const [sourceControlX, sourceControlY] = getControlWithCurvature({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+    c: curvature,
+  })
+  const [targetControlX, targetControlY] = getControlWithCurvature({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+    c: curvature,
+  })
+
+  const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  })
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    centerX,
+    centerY,
+    offsetX,
+    offsetY,
+  ]
+}

packages/core/src/components/Edges/utils/general.ts

@@ -0,0 +1,49 @@
+// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
+export function getSimpleEdgeCenter({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+}: {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}): [number, number, number, number] {
+  const xOffset = Math.abs(targetX - sourceX) / 2
+  const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset
+
+  const yOffset = Math.abs(targetY - sourceY) / 2
+  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset
+
+  return [centerX, centerY, xOffset, yOffset]
+}
+
+export function getBezierEdgeCenter({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourceControlX,
+  sourceControlY,
+  targetControlX,
+  targetControlY,
+}: {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourceControlX: number
+  sourceControlY: number
+  targetControlX: number
+  targetControlY: number
+}): [number, number, number, number] {
+  // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+  // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+  const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125
+  const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125
+  const offsetX = Math.abs(centerX - sourceX)
+  const offsetY = Math.abs(centerY - sourceY)
+
+  return [centerX, centerY, offsetX, offsetY]
+}

packages/core/src/components/Edges/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './bezier'
+export * from './general'
+export * from './simple-bezier'
+export * from './smoothstep'
+export * from './straight'

packages/core/src/components/Edges/utils/simple-bezier.ts

@@ -0,0 +1,79 @@
+import { getBezierEdgeCenter } from './general'
+import { Position } from '~/types'
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+}
+
+interface GetControlParams {
+  pos: Position
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
+  let ctX: number, ctY: number
+  switch (pos) {
+    case Position.Left:
+    case Position.Right:
+      ctX = 0.5 * (x1 + x2)
+      ctY = y1
+      break
+    case Position.Top:
+    case Position.Bottom:
+      ctX = x1
+      ctY = 0.5 * (y1 + y2)
+      break
+  }
+  return [ctX, ctY]
+}
+
+export function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSimpleBezierPathParams): [string, number, number, number, number] {
+  const [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+  })
+  const [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+  })
+
+  const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  })
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    centerX,
+    centerY,
+    offsetX,
+    offsetY,
+  ]
+}

packages/core/src/components/Edges/utils/smoothstep.ts

@@ -0,0 +1,197 @@
+import { getSimpleEdgeCenter } from './general'
+import type { XYPosition } from '~/types'
+import { Position } from '~/types'
+
+export interface GetSmoothStepPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+  borderRadius?: number
+  centerX?: number
+  centerY?: number
+  offset?: number
+}
+
+const handleDirections = {
+  [Position.Left]: { x: -1, y: 0 },
+  [Position.Right]: { x: 1, y: 0 },
+  [Position.Top]: { x: 0, y: -1 },
+  [Position.Bottom]: { x: 0, y: 1 },
+}
+
+const getDirection = ({
+  source,
+  sourcePosition = Position.Bottom,
+  target,
+}: {
+  source: XYPosition
+  sourcePosition: Position
+  target: XYPosition
+}): XYPosition => {
+  if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
+    return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 }
+  }
+  return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 }
+}
+
+const distance = (a: XYPosition, b: XYPosition) => Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)
+
+// With this function we try to mimic an orthogonal edge routing behaviour
+// It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
+function getPoints({
+  source,
+  sourcePosition = Position.Bottom,
+  target,
+  targetPosition = Position.Top,
+  center,
+  offset,
+}: {
+  source: XYPosition
+  sourcePosition: Position
+  target: XYPosition
+  targetPosition: Position
+  center: Partial<XYPosition>
+  offset: number
+}): [XYPosition[], number, number, number, number] {
+  const sourceDir = handleDirections[sourcePosition]
+  const targetDir = handleDirections[targetPosition]
+  const sourceGapped: XYPosition = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset }
+  const targetGapped: XYPosition = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset }
+  const dir = getDirection({
+    source: sourceGapped,
+    sourcePosition,
+    target: targetGapped,
+  })
+  const dirAccessor = dir.x !== 0 ? 'x' : 'y'
+  const currDir = dir[dirAccessor]
+
+  let points: XYPosition[] = []
+  let centerX, centerY
+  const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({
+    sourceX: source.x,
+    sourceY: source.y,
+    targetX: target.x,
+    targetY: target.y,
+  })
+
+  // opposite handle positions, default case
+  if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+    centerX = center.x || defaultCenterX
+    centerY = center.y || defaultCenterY
+
+    //    --->
+    //    |
+    // >---
+    const verticalSplit: XYPosition[] = [
+      { x: centerX, y: sourceGapped.y },
+      { x: centerX, y: targetGapped.y },
+    ]
+    //    |
+    //  ---
+    //  |
+    const horizontalSplit: XYPosition[] = [
+      { x: sourceGapped.x, y: centerY },
+      { x: targetGapped.x, y: centerY },
+    ]
+
+    if (sourceDir[dirAccessor] === currDir) {
+      points = dirAccessor === 'x' ? verticalSplit : horizontalSplit
+    } else {
+      points = dirAccessor === 'x' ? horizontalSplit : verticalSplit
+    }
+  } else {
+    // sourceTarget means we take x from source and y from target, targetSource is the opposite
+    const sourceTarget: XYPosition[] = [{ x: sourceGapped.x, y: targetGapped.y }]
+    const targetSource: XYPosition[] = [{ x: targetGapped.x, y: sourceGapped.y }]
+    // this handles edges with same handle positions
+    if (dirAccessor === 'x') {
+      points = sourceDir.x === currDir ? targetSource : sourceTarget
+    } else {
+      points = sourceDir.y === currDir ? sourceTarget : targetSource
+    }
+
+    // these are conditions for handling mixed handle positions like Right -> Bottom for example
+    if (sourcePosition !== targetPosition) {
+      const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x'
+      const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite]
+      const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite]
+      const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite]
+      const flipSourceTarget =
+        (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+        (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)))
+
+      if (flipSourceTarget) {
+        points = dirAccessor === 'x' ? sourceTarget : targetSource
+      }
+    }
+
+    centerX = points[0].x
+    centerY = points[0].y
+  }
+
+  const pathPoints = [source, sourceGapped, ...points, targetGapped, target]
+
+  return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY]
+}
+
+function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): string {
+  const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size)
+  const { x, y } = b
+
+  // no bend
+  if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+    return `L${x} ${y}`
+  }
+
+  // first segment is horizontal
+  if (a.y === y) {
+    const xDir = a.x < c.x ? -1 : 1
+    const yDir = a.y < c.y ? 1 : -1
+    return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`
+  }
+
+  const xDir = a.x < c.x ? 1 : -1
+  const yDir = a.y < c.y ? -1 : 1
+  return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`
+}
+
+export function getSmoothStepPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+  borderRadius = 5,
+  centerX,
+  centerY,
+  offset = 20,
+}: GetSmoothStepPathParams): [string, number, number, number, number] {
+  const [points, labelX, labelY, offsetX, offsetY] = getPoints({
+    source: { x: sourceX, y: sourceY },
+    sourcePosition,
+    target: { x: targetX, y: targetY },
+    targetPosition,
+    center: { x: centerX, y: centerY },
+    offset,
+  })
+
+  const path = points.reduce<string>((res, p, i) => {
+    let segment = ''
+
+    if (i > 0 && i < points.length - 1) {
+      segment = getBend(points[i - 1], p, points[i + 1], borderRadius)
+    } else {
+      segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`
+    }
+
+    res += segment
+
+    return res
+  }, '')
+
+  return [path, labelX, labelY, offsetX, offsetY]
+}

packages/core/src/components/Edges/utils/straight.ts

@@ -0,0 +1,24 @@
+import { getSimpleEdgeCenter } from './general'
+
+export interface GetStraightPathParams {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+
+export function getStraightPath({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+}: GetStraightPathParams): [string, number, number, number, number] {
+  const [centerX, centerY, offsetX, offsetY] = getSimpleEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  })
+
+  return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, centerX, centerY, offsetX, offsetY]
+}

packages/core/src/components/Handle/Handle.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { useHandle, useNode, useVueFlow } from '../../composables'
+import type { Position } from '../../types'
+import { ConnectionMode } from '../../types'
+import type { HandleProps } from '../../types/handle'
+import { getDimensions } from '../../utils'
+
+const { type = 'source', position = 'top' as Position, connectable = true, id, isValidConnection } = defineProps<HandleProps>()
+
+const { connectionStartHandle, connectionMode, vueFlowRef } = $(useVueFlow())
+
+const { id: nodeId, node, nodeEl } = useNode()
+
+const handle = ref<HTMLDivElement>()
+
+const handleId = $computed(() => id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${position}`))
+
+const { onMouseDown, onClick } = useHandle()
+
+const onMouseDownHandler = (event: MouseEvent) => {
+  onMouseDown(event, handleId, nodeId, type === 'target', isValidConnection, undefined)
+}
+
+const onClickHandler = (event: MouseEvent) => {
+  onClick(event, handleId ?? null, nodeId, type, isValidConnection)
+}
+
+const getClasses = computed(() => {
+  return [
+    'vue-flow__handle',
+    `vue-flow__handle-${position}`,
+    `vue-flow__handle-${handleId}`,
+    'nodrag',
+    {
+      source: type !== 'target',
+      target: type === 'target',
+      connectable,
+      connecting:
+        connectionStartHandle &&
+        connectionStartHandle.nodeId === nodeId &&
+        connectionStartHandle.handleId === handleId &&
+        connectionStartHandle.type === type,
+    },
+  ]
+})
+
+onMounted(() => {
+  const existingBounds = node.handleBounds[type]?.find((b) => b.id === handleId)
+  if (!vueFlowRef || existingBounds) return
+
+  const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
+
+  if (!nodeEl || !handle.value || !viewportNode) return
+
+  const nodeBounds = nodeEl.value.getBoundingClientRect()
+
+  const handleBounds = handle.value.getBoundingClientRect()
+
+  const style = window.getComputedStyle(viewportNode)
+  const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+
+  const nextBounds = {
+    id: handleId,
+    position,
+    x: (handleBounds.left - nodeBounds.left) / zoom,
+    y: (handleBounds.top - nodeBounds.top) / zoom,
+    ...getDimensions(handle.value),
+  }
+
+  node.handleBounds[type] = [...(node.handleBounds[type] ?? []), nextBounds]
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Handle',
+}
+</script>
+
+<template>
+  <div
+    ref="handle"
+    :data-handleid="handleId"
+    :data-nodeid="nodeId"
+    :data-handlepos="position"
+    :class="getClasses"
+    @mousedown="onMouseDownHandler"
+    @click="onClickHandler"
+  >
+    <slot :id="id" />
+  </div>
+</template>

packages/core/src/components/Nodes/DefaultNode.ts

@@ -0,0 +1,24 @@
+import type { FunctionalComponent } from 'vue'
+import Handle from '../Handle/Handle.vue'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
+
+const DefaultNode: FunctionalComponent<NodeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  connectable = false,
+  isValidTargetPos,
+  isValidSourcePos,
+}) {
+  return [
+    h(Handle, { type: 'target', position: targetPosition, isConnectable: connectable, isValidConnection: isValidTargetPos }),
+    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+    h(Handle, { type: 'source', position: sourcePosition, isConnectable: connectable, isValidConnection: isValidSourcePos }),
+  ]
+}
+
+DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable']
+DefaultNode.inheritAttrs = false
+
+export default DefaultNode

packages/core/src/components/Nodes/InputNode.ts

@@ -0,0 +1,21 @@
+import type { FunctionalComponent } from 'vue'
+import Handle from '../Handle/Handle.vue'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
+
+const InputNode: FunctionalComponent<NodeProps> = function ({
+  sourcePosition = Position.Bottom,
+  label,
+  connectable = false,
+  isValidSourcePos,
+}) {
+  return [
+    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+    h(Handle, { type: 'source', position: sourcePosition, isConnectable: connectable, isValidConnection: isValidSourcePos }),
+  ]
+}
+
+InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable']
+InputNode.inheritAttrs = false
+
+export default InputNode

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -0,0 +1,247 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { useDrag, useNodeHooks, useVueFlow } from '../../composables'
+import type { GraphNode, NodeComponent, SnapGrid, XYZPosition } from '../../types'
+import { NodeId, NodeRef } from '../../context'
+import { getConnectedEdges, getXYZPos, handleNodeClick } from '../../utils'
+
+const { id, type, name, draggable, selectable, connectable, snapGrid, ...props } = defineProps<{
+  id: string
+  draggable: boolean
+  selectable: boolean
+  connectable: boolean
+  snapGrid?: SnapGrid
+  type: NodeComponent | Function | Object | false
+  name: string
+  node: GraphNode
+  resizeObserver: ResizeObserver
+}>()
+
+provide(NodeId, id)
+
+const {
+  nodeExtent,
+  edges,
+  viewport,
+  noPanClassName,
+  selectNodesOnDrag,
+  nodesSelectionActive,
+  multiSelectionActive,
+  emits,
+  getNode,
+  removeSelectedElements,
+  addSelectedNodes,
+  updateNodeDimensions,
+  onUpdateNodeInternals,
+} = $(useVueFlow())
+
+const node = $(useVModel(props, 'node'))
+
+const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
+
+const nodeElement = ref()
+
+provide(NodeRef, nodeElement)
+
+const { emit, on } = useNodeHooks(node, emits)
+
+const dragging = useDrag({
+  id,
+  el: nodeElement,
+  disabled: computed(() => !draggable),
+  onStart(event, node, nodes) {
+    emit.dragStart({ event, node, nodes })
+  },
+  onDrag(event, node, nodes) {
+    emit.drag({ event, node, nodes })
+  },
+  onStop(event, node, nodes) {
+    emit.dragStop({ event, node, nodes })
+  },
+})
+
+const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
+  if (parentPos) {
+    node.computedPosition = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
+  } else {
+    node.computedPosition = nodePos
+  }
+}
+
+const updateInternals = () => {
+  if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+
+  updatePosition(
+    {
+      x: node.position.x,
+      y: node.position.y,
+      z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
+    },
+    parentNode ? { ...parentNode.computedPosition } : undefined,
+  )
+}
+
+onUpdateNodeInternals((updateIds) => {
+  if (updateIds.includes(id)) {
+    updateInternals()
+  }
+})
+
+updatePosition(
+  {
+    x: node.position.x,
+    y: node.position.y,
+    z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
+  },
+  parentNode ? { ...parentNode.computedPosition } : undefined,
+)
+
+onMounted(() => {
+  props.resizeObserver.observe(nodeElement.value)
+})
+
+watch(
+  [() => node.type, () => node.sourcePosition, () => node.targetPosition],
+  () => {
+    updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+  },
+  { flush: 'post' },
+)
+
+watch(
+  [
+    () => node.position.x,
+    () => node.position.y,
+    () => parentNode?.computedPosition.x,
+    () => parentNode?.computedPosition.y,
+    () => parentNode?.computedPosition.z,
+    () => node.selected,
+    () => node.dimensions,
+    () => parentNode?.dimensions,
+  ],
+  ([newX, newY, parentX, parentY, parentZ]) => {
+    const xyzPos = {
+      x: newX,
+      y: newY,
+      z: node.selected ? 1000 : 0,
+    }
+
+    updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ! } : undefined)
+  },
+  { flush: 'post' },
+)
+
+onBeforeUnmount(() => {
+  props.resizeObserver.unobserve(nodeElement.value)
+})
+
+const onMouseEnter = (event: MouseEvent) => {
+  if (!dragging?.value) {
+    emit.mouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+  }
+}
+
+const onMouseMove = (event: MouseEvent) => {
+  if (!dragging?.value) {
+    emit.mouseMove({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+  }
+}
+
+const onMouseLeave = (event: MouseEvent) => {
+  if (!dragging?.value) {
+    emit.mouseLeave({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+  }
+}
+
+const onContextMenu = (event: MouseEvent) => {
+  emit.contextMenu({
+    event,
+    node,
+    connectedEdges: getConnectedEdges([node], edges),
+  })
+}
+
+const onDoubleClick = (event: MouseEvent) => {
+  emit.doubleClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+}
+
+const onSelectNode = (event: MouseEvent) => {
+  if (selectable && (!selectNodesOnDrag || !draggable)) {
+    handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
+  }
+  emit.click({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+}
+
+const getClass = computed(() => {
+  return node.class instanceof Function ? node.class(node) : node.class
+})
+
+const getStyle = computed(() => {
+  const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
+  const width = node.width instanceof Function ? node.width(node) : node.width
+  const height = node.height instanceof Function ? node.height(node) : node.height
+  if (width) styles.width = typeof width === 'string' ? width : `${width}px`
+  if (height) styles.height = typeof height === 'string' ? height : `${height}px`
+
+  return styles
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Node',
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <div
+    ref="nodeElement"
+    class="vue-flow__node"
+    :class="[
+      `vue-flow__node-${name}`,
+      noPanClassName,
+      {
+        dragging,
+        selected: node.selected,
+        selectable,
+      },
+      getClass,
+    ]"
+    :style="{
+      zIndex: node.computedPosition.z ?? 0,
+      transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
+      pointerEvents: selectable || draggable ? 'all' : 'none',
+      ...getStyle,
+    }"
+    :data-id="node.id"
+    @mouseenter="onMouseEnter"
+    @mousemove="onMouseMove"
+    @mouseleave="onMouseLeave"
+    @contextmenu="onContextMenu"
+    @click="onSelectNode"
+    @dblclick="onDoubleClick"
+  >
+    <component
+      :is="type"
+      :id="node.id"
+      :type="node.type"
+      :data="node.data"
+      :events="{ ...node.events, ...on }"
+      :selected="!!node.selected"
+      :connectable="connectable"
+      :position="node.position"
+      :dimensions="node.dimensions"
+      :is-valid-target-pos="node.isValidTargetPos"
+      :is-valid-source-pos="node.isValidSourcePos"
+      :parent-node="node.parentNode"
+      :dragging="dragging"
+      :z-index="node.computedPosition.z"
+      :target-position="node.targetPosition"
+      :source-position="node.sourcePosition"
+      :label="node.label"
+      :drag-handle="node.dragHandle"
+      @update-node-internals="updateInternals"
+    />
+  </div>
+</template>

packages/core/src/components/Nodes/OutputNode.ts

@@ -0,0 +1,21 @@
+import type { FunctionalComponent } from 'vue'
+import Handle from '../Handle/Handle.vue'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
+
+const OutputNode: FunctionalComponent<NodeProps> = function ({
+  targetPosition = Position.Top,
+  label,
+  connectable = false,
+  isValidTargetPos,
+}) {
+  return [
+    h(Handle, { type: 'target', position: targetPosition, isConnectable: connectable, isValidConnection: isValidTargetPos }),
+    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+  ]
+}
+
+OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable']
+OutputNode.inheritAttrs = false
+
+export default OutputNode

packages/core/src/components/Nodes/index.ts

@@ -0,0 +1,4 @@
+export { default as DefaultNode } from './DefaultNode'
+export { default as InputNode } from './InputNode'
+export { default as OutputNode } from './OutputNode'
+export { default as NodeWrapper } from './NodeWrapper.vue'

packages/core/src/components/NodesSelection/NodesSelection.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useDrag, useVueFlow } from '../../composables'
+import { getRectOfNodes } from '../../utils'
+
+const { emits, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, noPanClassName } = $(useVueFlow())
+
+const el = ref()
+
+useDrag({
+  el,
+  onStart(event, node, nodes) {
+    emits.selectionDragStart({ event, node, nodes })
+  },
+  onDrag(event, node, nodes) {
+    emits.selectionDrag({ event, node, nodes })
+  },
+  onStop(event, node, nodes) {
+    emits.selectionDragStop({ event, node, nodes })
+  },
+})
+
+const selectedNodesBBox = $computed(() => getRectOfNodes(getSelectedNodes))
+
+const innerStyle = computed(() => ({
+  width: `${selectedNodesBBox.width}px`,
+  height: `${selectedNodesBBox.height}px`,
+  top: `${selectedNodesBBox.y}px`,
+  left: `${selectedNodesBBox.x}px`,
+}))
+
+const onContextMenu = (event: MouseEvent) => emits.selectionContextMenu({ event, nodes: getSelectedNodes })
+</script>
+
+<script lang="ts">
+export default {
+  name: 'NodesSelection',
+}
+</script>
+
+<template>
+  <div
+    class="vue-flow__nodesselection vue-flow__container"
+    :class="noPanClassName"
+    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
+  >
+    <div ref="el" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
+  </div>
+</template>

packages/core/src/components/UserSelection/SelectionRect.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const { width, height, x, y } = defineProps<{
+  width: number
+  height: number
+  x: number
+  y: number
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SelectionRect',
+}
+</script>
+
+<template>
+  <div
+    class="vue-flow__selection"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translate(${x}px, ${y}px)`,
+    }"
+  />
+</template>

packages/core/src/components/UserSelection/UserSelection.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { useVueFlow } from '../../composables'
+import type { SelectionRect as Rect } from '../../types'
+import { getConnectedEdges, getNodesInside } from '../../utils'
+import SelectionRect from './SelectionRect.vue'
+import { getMousePosition } from './utils'
+
+const { userSelectionActive, nodesSelectionActive, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } =
+  useVueFlow()
+
+let prevNodes = $ref(0)
+
+let prevEdges = $ref(0)
+
+const initialRect = () => ({
+  width: 0,
+  height: 0,
+  startX: 0,
+  startY: 0,
+  x: 0,
+  y: 0,
+  draw: false,
+})
+
+let rect = $ref<Rect>(initialRect())
+
+const reset = () => {
+  rect = initialRect()
+  prevNodes = 0
+  prevEdges = 0
+
+  userSelectionActive.value = false
+}
+
+const onMouseDown = (event: MouseEvent) => {
+  const mousePos = getMousePosition(event)
+  if (!mousePos) return
+
+  rect = {
+    width: 0,
+    height: 0,
+    startX: mousePos.x,
+    startY: mousePos.y,
+    x: mousePos.x,
+    y: mousePos.y,
+    draw: true,
+  }
+
+  userSelectionActive.value = true
+  nodesSelectionActive.value = true
+}
+
+const onMouseMove = (event: MouseEvent) => {
+  if (!userSelectionActive || !rect.draw) return
+
+  const mousePos = getMousePosition(event)
+  if (!mousePos) return
+
+  const startX = rect.startX
+  const startY = rect.startY
+
+  const nextUserSelectRect: Rect = {
+    ...rect,
+    x: mousePos.x < startX ? mousePos.x : rect.x,
+    y: mousePos.y < startY ? mousePos.y : rect.y,
+    width: Math.abs(mousePos.x - startX),
+    height: Math.abs(mousePos.y - startY),
+  }
+
+  const selectedNodes = getNodesInside(getNodes.value, rect, viewport.value)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges.value)
+
+  rect = nextUserSelectRect
+
+  addSelectedNodes(selectedNodes)
+  addSelectedEdges(selectedEdges)
+
+  prevNodes = selectedNodes.length
+  prevEdges = selectedEdges.length
+}
+
+const onMouseUp = () => {
+  rect = initialRect()
+
+  nodesSelectionActive.value = prevNodes > 0
+  userSelectionActive.value = false
+}
+
+const onMouseLeave = () => {
+  nodesSelectionActive.value = prevNodes > 0
+
+  reset()
+}
+
+onBeforeUnmount(reset)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+}
+</script>
+
+<template>
+  <div
+    class="vue-flow__selectionpane vue-flow__container"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @click="onMouseUp"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave"
+  >
+    <SelectionRect v-if="rect.draw" :width="rect.width" :height="rect.height" :x="rect.x" :y="rect.y" />
+  </div>
+</template>

packages/core/src/components/UserSelection/utils.ts

@@ -0,0 +1,13 @@
+import type { XYPosition } from '../../types'
+
+export function getMousePosition(event: MouseEvent): XYPosition | void {
+  const flowNode = (event.target as Element).closest('.vue-flow')
+  if (!flowNode) return
+
+  const containerBounds = flowNode.getBoundingClientRect()
+
+  return {
+    x: event.clientX - containerBounds.left,
+    y: event.clientY - containerBounds.top,
+  }
+}

packages/core/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './Nodes'
+export * from './Edges'
+export { default as ConnectionLine } from './ConnectionLine/ConnectionLine.vue'
+export { default as Handle } from './Handle/Handle.vue'
+export { default as NodesSelection } from './NodesSelection/NodesSelection.vue'
+export { default as UserSelection } from './UserSelection/UserSelection.vue'