refactor(core): rename core pkg dir to core

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]
+}