Merge pull request #300 from ls1intum/fix/sfc-edges

Fix/sfc edges

Author: kurunbelemir

library/lib/edges/edgeTypes/CommunicationDiagramEdge.tsx

@@ -155,8 +155,9 @@ export const CommunicationDiagramEdge = ({
           isReconnectingRef={isReconnectingRef}
           sourcePosition={{ x: sourceX, y: sourceY }}
           targetPosition={{ x: targetX, y: targetY }}
-          edgePoints={edgeData.activePoints} // Pass the edge points
           textColor={textColor}
+          edgePoints={edgeData.activePoints}
+          isHorizontalEdge={edgeData.isMiddlePathHorizontal}
         />
 
         <CommonEdgeElements

library/lib/edges/edgeTypes/SfcDiagramEdge.tsx

@@ -4,7 +4,7 @@ import { useStepPathEdge } from "@/hooks/useStepPathEdge"
 import { useDiagramStore, usePopoverStore } from "@/store/context"
 import { useShallow } from "zustand/shallow"
 import { useToolbar } from "@/hooks"
-import { useRef } from "react"
+import { useMemo, useRef } from "react"
 import { EDGE_HIGHTLIGHT_STROKE_WIDTH } from "@/constants"
 import { FeedbackDropzone } from "@/components/wrapper/FeedbackDropzone"
 import { AssessmentSelectableWrapper } from "@/components"
@@ -37,7 +37,7 @@ function getParsedEdgeData(data: unknown): {
     return { isNegated: false, displayName: label, showBar: true }
   }
 }
-
+const crossbarLength = 20
 export const SfcDiagramEdge = ({
   id,
   type,
@@ -103,6 +103,45 @@ export const SfcDiagramEdge = ({
   const { isNegated, displayName, showBar } = getParsedEdgeData(data)
   const { strokeColor, textColor } = getCustomColorsFromDataForEdge(data)
 
+  const labelPosition = {
+    x: edgeData.isMiddlePathHorizontal
+      ? edgeData.pathMiddlePosition.x
+      : edgeData.pathMiddlePosition.x + 30,
+    y: edgeData.isMiddlePathHorizontal
+      ? edgeData.pathMiddlePosition.y - 30
+      : edgeData.pathMiddlePosition.y,
+    textAnchor: edgeData.isMiddlePathHorizontal ? "middle" : ("start" as const),
+    dominantBaseline: edgeData.isMiddlePathHorizontal
+      ? "middle"
+      : ("middle" as const),
+  }
+
+  const crossbarCoordinates = useMemo(() => {
+    if (edgeData.isMiddlePathHorizontal) {
+      // If middle segment is horizontal, make crossbar vertical
+      return {
+        x1: edgeData.pathMiddlePosition.x,
+        y1: edgeData.pathMiddlePosition.y - crossbarLength,
+        x2: edgeData.pathMiddlePosition.x,
+        y2: edgeData.pathMiddlePosition.y + crossbarLength,
+        orientation: "vertical" as const,
+      }
+    } else {
+      // If middle segment is vertical, make crossbar horizontal
+      return {
+        x1: edgeData.pathMiddlePosition.x - crossbarLength,
+        y1: edgeData.pathMiddlePosition.y,
+        x2: edgeData.pathMiddlePosition.x + crossbarLength,
+        y2: edgeData.pathMiddlePosition.y,
+        orientation: "horizontal" as const,
+      }
+    }
+  }, [
+    edgeData.isMiddlePathHorizontal,
+    edgeData.pathMiddlePosition,
+    crossbarLength,
+  ])
+
   return (
     <AssessmentSelectableWrapper elementId={id} asElement="g">
       <FeedbackDropzone elementId={id} asElement="path">
@@ -156,25 +195,26 @@ export const SfcDiagramEdge = ({
 
           {/* SFC Transition - show crossbar and label */}
           <g>
-            {/* Crossbar - thick horizontal line at the middle */}
+            {/* Crossbar - perpendicular to middle segment direction */}
             {showBar && (
               <line
-                x1={edgeData.pathMiddlePosition.x - 20}
-                y1={edgeData.pathMiddlePosition.y}
-                x2={edgeData.pathMiddlePosition.x + 20}
-                y2={edgeData.pathMiddlePosition.y}
+                x1={crossbarCoordinates.x1}
+                y1={crossbarCoordinates.y1}
+                x2={crossbarCoordinates.x2}
+                y2={crossbarCoordinates.y2}
                 stroke={strokeColor}
                 strokeWidth="10"
               />
             )}
 
+            {/* SFC Label - positioned based on edge orientation */}
             {displayName && (
               <text
-                x={edgeData.pathMiddlePosition.x}
-                y={edgeData.pathMiddlePosition.y - 20}
                 fill={textColor}
-                textAnchor="middle"
-                dominantBaseline="middle"
+                x={labelPosition.x}
+                y={labelPosition.y}
+                textAnchor={labelPosition.textAnchor}
+                dominantBaseline={labelPosition.dominantBaseline}
                 fontSize="14"
                 textDecoration={isNegated ? "overline" : undefined}
               >

library/lib/edges/labelTypes/EdgeMultipleLabels.tsx

@@ -4,25 +4,28 @@ import { EdgeLabelRenderer } from "@xyflow/react"
 import { MessageData } from "../EdgeProps"
 import { useMessagePositioning } from "../../hooks"
 
-export const EdgeMultipleLabels: React.FC<{
+interface EdgeMultipleLabelsProps {
   messages?: MessageData[]
   pathMiddlePosition: IPoint
   showRelationshipLabels: boolean
   isReconnectingRef?: React.MutableRefObject<boolean>
   sourcePosition: IPoint
   targetPosition: IPoint
-  edgePoints?: Array<{ x: number; y: number }>
+  edgePoints?: IPoint[]
+  isHorizontalEdge?: boolean
   textColor: string
-}> = ({
+}
+export const EdgeMultipleLabels = ({
   messages,
   pathMiddlePosition,
   showRelationshipLabels,
   isReconnectingRef,
   sourcePosition,
   targetPosition,
   edgePoints,
+  isHorizontalEdge,
   textColor,
-}) => {
+}: EdgeMultipleLabelsProps) => {
   const displayMessages: MessageData[] = messages || []
 
   const {
@@ -35,13 +38,13 @@ export const EdgeMultipleLabels: React.FC<{
     backwardArrowBoxPosition,
     backwardLabelBoxPosition,
     isPositioned,
-    isHorizontalEdge,
   } = useMessagePositioning(
     displayMessages,
     sourcePosition,
     targetPosition,
     pathMiddlePosition,
-    edgePoints
+    edgePoints,
+    isHorizontalEdge
   )
 
   if (

library/lib/hooks/useMessagePositioning.ts

@@ -1,5 +1,6 @@
 import { useMemo, useState, useEffect } from "react"
 import { MessageData } from "../edges/EdgeProps"
+import { IPoint } from "@/edges"
 
 type ArrowDirection = "Up" | "Down" | "Left" | "Right"
 
@@ -15,15 +16,15 @@ interface MessagePositioningResult {
   backwardArrowBoxPosition: { x: number; y: number }
   backwardLabelBoxPosition: { x: number; y: number }
   isPositioned: boolean
-  isHorizontalEdge?: boolean
 }
 
 export const useMessagePositioning = (
   displayMessages: MessageData[],
-  sourcePosition: { x: number; y: number },
-  targetPosition: { x: number; y: number },
-  pathMiddlePosition: { x: number; y: number },
-  edgePoints?: Array<{ x: number; y: number }> // Add edge points parameter
+  sourcePosition: IPoint,
+  targetPosition: IPoint,
+  pathMiddlePosition: IPoint,
+  edgePoints?: IPoint[],
+  isHorizontalEdge?: boolean
 ): MessagePositioningResult => {
   const [isPositioned, setIsPositioned] = useState(false)
 
@@ -36,45 +37,6 @@ export const useMessagePositioning = (
       (msg) => msg.direction === "source"
     )
 
-    // Calculate edge direction from the middle segment
-    const calculateMiddleSegmentDirection = (
-      points?: Array<{ x: number; y: number }>,
-      fallbackSource?: { x: number; y: number },
-      fallbackTarget?: { x: number; y: number }
-    ) => {
-      let isHorizontalEdge = false
-      if (points && points.length >= 2) {
-        // Find the middle point index
-        const middleIndex = Math.floor(points.length / 2) - 1
-        const middlePoint = points[middleIndex]
-        const nextPoint = points[Math.min(middleIndex + 1, points.length - 1)]
-
-        // If we're at the last point, use the previous point instead
-        const referencePoint =
-          middleIndex === points.length - 1
-            ? points[Math.max(middleIndex - 1, 0)]
-            : nextPoint
-        const dx = Math.abs(referencePoint.x - middlePoint.x)
-        const dy = Math.abs(referencePoint.y - middlePoint.y)
-        isHorizontalEdge = dx > dy
-      } else {
-        // Fallback to source/target comparison if no points available
-        if (fallbackSource && fallbackTarget) {
-          const dx = Math.abs(fallbackTarget.x - fallbackSource.x)
-          const dy = Math.abs(fallbackTarget.y - fallbackSource.y)
-          isHorizontalEdge = dx > dy
-        }
-      }
-
-      return isHorizontalEdge
-    }
-
-    const isHorizontalEdge = calculateMiddleSegmentDirection(
-      edgePoints,
-      sourcePosition,
-      targetPosition
-    )
-
     // Calculate arrow directions based on which node is which relative to the middle
     const sourceIsLeft = sourcePosition.x < targetPosition.x
     const sourceIsAbove = sourcePosition.y < targetPosition.y
@@ -151,7 +113,7 @@ export const useMessagePositioning = (
     sourcePosition,
     targetPosition,
     pathMiddlePosition,
-    edgePoints,
+    isHorizontalEdge,
   ])
 
   useEffect(() => {