update edge path styles

waldiez · Jan 19, 2025 · 098ba23 · 098ba23
1 parent 6e91f9b
commit 098ba23
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/src/waldiez/containers/edges/hooks/useWaldiezEdge.ts b/src/waldiez/containers/edges/hooks/useWaldiezEdge.ts
@@ -1,4 +1,4 @@
-import { EdgeProps, getSmoothStepPath } from "@xyflow/react";
+import { EdgeProps, getSimpleBezierPath } from "@xyflow/react";
 
 import { WaldiezEdge, WaldiezEdgeType, WaldiezNodeAgent, WaldiezNodeAgentType } from "@waldiez/models";
 import { useWaldiez } from "@waldiez/store";
@@ -14,7 +14,7 @@ export const useWaldiezEdge = (props: EdgeProps<WaldiezEdge> & { type: WaldiezEd
     const updateEdgeData = useWaldiez(s => s.updateEdgeData);
     const sourceAgent = getAgentById(source) as WaldiezNodeAgent | null;
     const targetAgent = getAgentById(props.target) as WaldiezNodeAgent | null;
-    const [edgePath, labelX, labelY] = getSmoothStepPath({
+    const [edgePath, labelX, labelY] = getSimpleBezierPath({
         sourceX,
         sourceY,
         sourcePosition,

diff --git a/src/waldiez/containers/edges/main.tsx b/src/waldiez/containers/edges/main.tsx
@@ -125,7 +125,7 @@ const WaldiezEdgeCommon = (props: WaldiezEdgeProps) => {
                 style={{ ...style, color: AGENT_COLORS.rag_user }}
             />
             <EdgeLabelRenderer>
-                <EdgeLabel edge={edge} transform={translations.edgeStart} />
+                {/* <EdgeLabel edge={edge} transform={translations.edgeStart} /> */}
                 <div
                     style={{
                         position: "absolute",
@@ -177,6 +177,7 @@ const WaldiezEdgeCommon = (props: WaldiezEdgeProps) => {
                         <div className="agent-edge-view clickable">{edgeIcon}</div>
                     )}
                 </div>
+                <EdgeLabel edge={edge} transform={translations.edgeEnd} />
             </EdgeLabelRenderer>
         </>
     );

diff --git a/src/waldiez/containers/edges/swarm.tsx b/src/waldiez/containers/edges/swarm.tsx
@@ -1,4 +1,4 @@
-import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
+import { BaseEdge, EdgeLabelRenderer, getSimpleBezierPath } from "@xyflow/react";
 
 import { useState } from "react";
 import { FaTrashAlt } from "react-icons/fa";
@@ -37,7 +37,7 @@ export const WaldiezEdgeSwarmView = (
         sourcePosition,
         targetPosition,
     } = props;
-    const [edgePath, labelX, labelY] = getSmoothStepPath({
+    const [edgePath, labelX, labelY] = getSimpleBezierPath({
         sourceX,
         sourceY,
         sourcePosition,
@@ -93,7 +93,7 @@ export const WaldiezEdgeSwarmView = (
         <>
             <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
             <EdgeLabelRenderer>
-                <EdgeLabel edge={edge} transform={translations.edgeStart} />
+                {/* <EdgeLabel edge={edge} transform={translations.edgeStart} /> */}
                 <div
                     style={{
                         position: "absolute",
@@ -141,7 +141,7 @@ export const WaldiezEdgeSwarmView = (
                         <div className="agent-edge-view clickable">{icon}</div>
                     )}
                 </div>
-                {/* <EdgeLabel transform={translations.edgeEnd} /> */}
+                <EdgeLabel edge={edge} transform={translations.edgeEnd} />
             </EdgeLabelRenderer>
         </>
     );

diff --git a/src/waldiez/containers/edges/utils.ts b/src/waldiez/containers/edges/utils.ts
@@ -15,12 +15,12 @@ export const getEdgeTranslations = (
     };
     if (sourcePosition === Position.Right && targetPosition === Position.Left) {
         translations.edgeStart = `translate(0%, 0%) translate(${sourceX - 10}px,${sourceY - 35}px)`;
-        translations.edgeEnd = `translate(-100%, -100%) translate(${targetX}px,${targetY}px)`;
+        translations.edgeEnd = `translate(-100%, 0%) translate(${targetX}px,${targetY - 35}px)`;
         return translations;
     }
     if (sourcePosition === Position.Right && targetPosition === Position.Top) {
         translations.edgeStart = `translate(0%, 0%) translate(${sourceX - 10}px,${sourceY}px)`;
-        translations.edgeEnd = `translate(-100%, 0%) translate(${targetX}px,${targetY}px)`;
+        translations.edgeEnd = `translate(-100%, 0%) translate(${targetX - 10}px,${targetY - 30}px)`;
         return translations;
     }
     if (sourcePosition === Position.Right && targetPosition === Position.Right) {