Add other edge types & horizontal edges

bcakmakoglu · Jun 21, 2023 · 6c03349 · 6c03349
1 parent 0596bc0
commit 6c03349
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 14 deletions.
diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts
@@ -2,16 +2,37 @@ import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import BaseEdge from './BaseEdge'
 import { getBezierPath } from './utils'
-import type { BezierEdgeProps } from '~/types'
+import type { BezierEdgeProps, GraphNode } from '~/types'
 import { Position } from '~/types'
 
 const BezierEdge: FunctionalComponent<BezierEdgeProps> = function (
   { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
   { attrs },
 ) {
+  let controlOffsetX = 0
+  let controlOffsetY = 0
+  if (attrs.sourceNode === attrs.targetNode) {
+    if (
+      (sourcePosition === Position.Bottom && targetPosition === Position.Top) ||
+      (sourcePosition === Position.Top && targetPosition === Position.Bottom)
+    ) {
+      const source = attrs.sourceNode as GraphNode
+      controlOffsetX = ((-40 - source.dimensions.width / 2) * 4) / 3
+      controlOffsetY = 0
+    } else if (
+      (sourcePosition === Position.Left && targetPosition === Position.Right) ||
+      (sourcePosition === Position.Right && targetPosition === Position.Left)
+    ) {
+      const source = attrs.sourceNode as GraphNode
+      controlOffsetX = 0
+      controlOffsetY = ((20 + source.dimensions.height / 2) * 4) / 3
+    }
+  }
   const [path, labelX, labelY] = getBezierPath({
     sourcePosition,
     targetPosition,
+    controlOffsetX,
+    controlOffsetY,
     ...props,
   })
 

diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts
@@ -2,16 +2,37 @@ import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import BaseEdge from './BaseEdge'
 import { getSimpleBezierPath } from './utils'
-import type { SimpleBezierEdgeProps } from '~/types'
+import type { GraphNode, SimpleBezierEdgeProps } from '~/types'
 import { Position } from '~/types'
 
 const SimpleBezierEdge: FunctionalComponent<SimpleBezierEdgeProps> = function (
   { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
   { attrs },
 ) {
+  let controlOffsetX = 0
+  let controlOffsetY = 0
+  if (attrs.sourceNode === attrs.targetNode) {
+    if (
+      (sourcePosition === Position.Bottom && targetPosition === Position.Top) ||
+      (sourcePosition === Position.Top && targetPosition === Position.Bottom)
+    ) {
+      const source = attrs.sourceNode as GraphNode
+      controlOffsetX = ((-40 - source.dimensions.width / 2) * 4) / 3
+      controlOffsetY = 0
+    } else if (
+      (sourcePosition === Position.Left && targetPosition === Position.Right) ||
+      (sourcePosition === Position.Right && targetPosition === Position.Left)
+    ) {
+      const source = attrs.sourceNode as GraphNode
+      controlOffsetX = 0
+      controlOffsetY = ((20 + source.dimensions.height / 2) * 4) / 3
+    }
+  }
   const [path, labelX, labelY] = getSimpleBezierPath({
     sourcePosition,
     targetPosition,
+    controlOffsetX,
+    controlOffsetY,
     ...props,
   })
 

diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts
@@ -2,27 +2,37 @@ import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import BaseEdge from './BaseEdge'
 import { getSmoothStepPath } from './utils'
-import type { SmoothStepEdgeProps, GraphNode } from '~/types'
+import type { GraphNode, SmoothStepEdgeProps } from '~/types'
 import { Position } from '~/types'
 
 const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function (
   { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
   { attrs },
 ) {
-  let centerX, centerY;
-  if (attrs.sourceNode == attrs.targetNode) {
-    if (sourcePosition == Position.Bottom && targetPosition == Position.Top) {
-      let source = attrs.sourceNode as GraphNode;
-      centerX = props.sourceX - (props.offset ?? 40) - source.dimensions.width / 2;
-      centerY = (props.sourceY + props.targetY) / 2;
+  let centerX, centerY
+  if (attrs.sourceNode === attrs.targetNode) {
+    if (
+      (sourcePosition === Position.Bottom && targetPosition === Position.Top) ||
+      (sourcePosition === Position.Top && targetPosition === Position.Bottom)
+    ) {
+      const source = attrs.sourceNode as GraphNode
+      centerX = props.sourceX - (props.offset ?? 40) - source.dimensions.width / 2
+      centerY = (props.sourceY + props.targetY) / 2
+    } else if (
+      (sourcePosition === Position.Left && targetPosition === Position.Right) ||
+      (sourcePosition === Position.Right && targetPosition === Position.Left)
+    ) {
+      const source = attrs.sourceNode as GraphNode
+      centerX = (props.sourceX + props.targetX) / 2
+      centerY = props.sourceY + (props.offset ?? 20) + source.dimensions.height / 2
     }
   }
   const [path, labelX, labelY] = getSmoothStepPath({
     sourcePosition,
     targetPosition,
     centerX,
     centerY,
-    ...props, 
+    ...props,
   })
 
   return h(BaseEdge, {

diff --git a/packages/core/src/components/Edges/utils/bezier.ts b/packages/core/src/components/Edges/utils/bezier.ts
@@ -9,6 +9,8 @@ export interface GetBezierPathParams {
   targetY: number
   targetPosition?: Position
   curvature?: number
+  controlOffsetX?: number
+  controlOffsetY?: number
 }
 
 interface GetControlWithCurvatureParams {
@@ -59,16 +61,18 @@ export function getBezierPath({
   targetY,
   targetPosition = Position.Top,
   curvature = 0.25,
+  controlOffsetX = 0,
+  controlOffsetY = 0,
 }: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
-  const [sourceControlX, sourceControlY] = getControlWithCurvature({
+  let [sourceControlX, sourceControlY] = getControlWithCurvature({
     pos: sourcePosition,
     x1: sourceX,
     y1: sourceY,
     x2: targetX,
     y2: targetY,
     c: curvature,
   })
-  const [targetControlX, targetControlY] = getControlWithCurvature({
+  let [targetControlX, targetControlY] = getControlWithCurvature({
     pos: targetPosition,
     x1: targetX,
     y1: targetY,
@@ -77,6 +81,11 @@ export function getBezierPath({
     c: curvature,
   })
 
+  sourceControlX += controlOffsetX
+  sourceControlY += controlOffsetY
+  targetControlX += controlOffsetX
+  targetControlY += controlOffsetY
+
   const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({
     sourceX,
     sourceY,

diff --git a/packages/core/src/components/Edges/utils/simple-bezier.ts b/packages/core/src/components/Edges/utils/simple-bezier.ts
@@ -8,6 +8,8 @@ export interface GetSimpleBezierPathParams {
   targetX: number
   targetY: number
   targetPosition?: Position
+  controlOffsetX?: number
+  controlOffsetY?: number
 }
 
 interface GetControlParams {
@@ -42,22 +44,29 @@ export function getSimpleBezierPath({
   targetX,
   targetY,
   targetPosition = Position.Top,
+  controlOffsetX = 0,
+  controlOffsetY = 0,
 }: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
-  const [sourceControlX, sourceControlY] = getControl({
+  let [sourceControlX, sourceControlY] = getControl({
     pos: sourcePosition,
     x1: sourceX,
     y1: sourceY,
     x2: targetX,
     y2: targetY,
   })
-  const [targetControlX, targetControlY] = getControl({
+  let [targetControlX, targetControlY] = getControl({
     pos: targetPosition,
     x1: targetX,
     y1: targetY,
     x2: sourceX,
     y2: sourceY,
   })
 
+  sourceControlX += controlOffsetX
+  sourceControlY += controlOffsetY
+  targetControlX += controlOffsetX
+  targetControlY += controlOffsetY
+
   const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({
     sourceX,
     sourceY,