Curvature / Bending Points #5457

dkrohmer · 2025-08-18T08:56:21Z

dkrohmer
Aug 18, 2025

Hi all, in my current project I am using Antv X6 and I am thinking of migrating to React Flow. However, one feature that I find useful is adding curvature / bending points when clicking on a specific point on an edge to have more control over the edge curves. As far as I know, this feature is not available yet in React Flow. (If it actually is, can someone give me a hint on the docs or a tutorial?)

In Antv X6, it would look as follows:

fgdsfgfdsgdsfgsdfg · 2025-08-29T07:28:30Z

fgdsfgfdsgdsfgsdfg
Aug 29, 2025

HELLO, I Have the same question,I have develop some code,but it has some bugs, I can't resolve it.

0 replies

fgdsfgfdsgdsfgsdfg · 2025-09-01T05:17:39Z

fgdsfgfdsgdsfgsdfg
Sep 1, 2025

I use the getSmoothStepPath,and I fixed the problem which I found.
And this code have some my business code,
if can help you,I'm very happy
the code is under

import {type EdgeProps, getSmoothStepPath, Position, useInternalNode, useUpdateNodeInternals} from '@xyflow/react';
import React, {useCallback, useEffect, useRef, useState} from 'react'
import {useShallow} from 'zustand/react/shallow';
import {debounce} from 'lodash';
import {appEditorStore, type AppState} from "@/modules/sys/pages/ddm/datamodeleditor/store/editorIndex";
import {determineMarker, getPathD, transStepPath} from "@/modules/sys/pages/ddm/utils";
import {CustomEdgeTypes, HistoryChangeTypes} from "@/modules/sys/pages/ddm/utils/enum";
import {ONE_ONLY, ONE_OR_MORE, ZERO_ONE_OR_MORE, ZERO_OR_ONE} from "@/modules/sys/pages/ddm/utils/LDMTypes";

// 定义类型
interface DragState {
  isDragging: boolean[];
  startPos: { x: number, y: number }[];
  pathIndex: number;
}

interface HandleConfig {
  id: string;
  position: Position;
  top: number;
  left: number;
}

const selector = ({
                    nodes,
                    edges,
                    addHistory,
                    viewport
                  }: AppState) => ({
  nodes,
  edges,
  addHistory,
  viewport
});

export default function PathEdge(edgeProps: EdgeProps) {
  const {
    id,
    sourceX, sourceY, targetX, targetY,
    sourcePosition, targetPosition, markerStart, markerEnd,
    style, source, target,
    sourceHandleId, targetHandleId, data
  } = edgeProps;

  const sourceNode = useInternalNode(source);
  const targetNode = useInternalNode(target);

  const sourcePos = sourceNode?.position;
  const oldSourcePos = useRef(sourceNode?.position);
  const targetPos = targetNode?.position;
  const oldTargetPos = useRef(targetNode?.position);
  const targetXInfo = targetX;
  const targetXOldRefInfo = useRef(targetX);
  const targetYInfo = targetY;
  const targetYOldRefInfo = useRef(targetY);
  const sourceXInfo = sourceX;
  const sourceXOldRefInfo = useRef(sourceX);
  const sourceYInfo = sourceY;
  const sourceYOldRefInfo = useRef(sourceY);

  // TODO 可以优化拖动resize的时候更新线的相关信息
  // const mutableRefObject = useRef(sourceNode);
  // console.log(sourceNode,mutableRefObject.current)

  const [edgePathLine, setEdgePathLine] = useState<string[]>([]);
  const dragState = useRef<DragState>({
    isDragging: [],
    startPos: [],
    pathIndex: 0
  });

  const {
    nodes,
    edges,
    addHistory,
    viewport
  } = appEditorStore(useShallow(selector));

  const updateNodeInternals = useUpdateNodeInternals();
  const debouncedAddHistory = useCallback(debounce(addHistory, 100), []);
  const edge = edges.find(e => e.id === id);

  // 处理路径数据
  useEffect(() => {
    //如果自己移动了，并且形成了特殊的线，则使用pathList
    if (data?.pathList && data?.pathList.length > 0
      // 原Node和现在的Node的位置不变的话
      && ((sourcePos?.x === oldSourcePos.current?.x && sourcePos?.y === oldSourcePos.current?.y) && (targetPos?.x === oldTargetPos.current?.x && targetPos?.y === oldTargetPos.current?.y))
      // 目标点坐标不变
      && ((targetXInfo === targetXOldRefInfo.current && targetYInfo === targetYOldRefInfo.current) &&
        //起点坐标点不变
        (sourceXInfo === sourceXOldRefInfo.current && sourceYInfo === sourceYOldRefInfo.current))
    ) {
      setEdgePathLine(Array.isArray(data?.pathList) ? data.pathList : []);
    } else {
      //移动Node
      const [path] = getSmoothStepPath({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
        borderRadius: 0
      });
      const list = path.split('Q');
      const pathList = transStepPath(list);
      setEdgePathLine(pathList);

      oldSourcePos.current = sourcePos;
      oldTargetPos.current = targetPos;
      targetXOldRefInfo.current = targetXInfo;
      targetYOldRefInfo.current = targetYInfo;
      sourceXOldRefInfo.current = sourceXInfo;
      sourceYOldRefInfo.current = sourceYInfo;
    }
  }, [id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, sourcePos, targetPos, edges, data?.pathList, targetXInfo, targetYInfo, sourceXInfo, sourceYInfo]);


  const updatePosition = useCallback((positionNow: Position, handleConfig: HandleConfig, dx: number, width: number, dy: number, height: number) => {
    if (positionNow === Position.Top || positionNow === Position.Bottom) {
      if (dx > 0 && handleConfig.left >= width) {
        positionNow = Position.Right;
      }
      if (dx < 0 && handleConfig.left <= 0) {
        positionNow = Position.Left;
      }
    }
    if (positionNow === Position.Left || positionNow === Position.Right) {
      if (dy > 0 && handleConfig.top >= height) {
        positionNow = Position.Bottom;
      }
      if (dy < 0 && handleConfig.top <= 0) {
        positionNow = Position.Top;
      }
    }
    if (handleConfig.left <= width) {
      handleConfig.left += dx;
      if (positionNow === Position.Top || positionNow === Position.Bottom) {
        positionNow === Position.Top ? handleConfig.top = 0 : handleConfig.top = height;
      }
      if (handleConfig.left > width) {
        handleConfig.left = width;
      }
      if (handleConfig.left <= 0) {
        handleConfig.left = 0;
      }
      if (positionNow === Position.Right || positionNow === Position.Left) {
        positionNow === Position.Left ? handleConfig.left = 0 : handleConfig.left = width;
        if (handleConfig.top <= height) {
          handleConfig.top += dy;
        }
        if (handleConfig.top > height) {
          handleConfig.top = height;
        }
        if (handleConfig.top <= 0) {
          handleConfig.top = 0;
        }
      }
    }
    return positionNow;
  }, []);


  const handleMouseMove = useCallback((e: MouseEvent) => {
    if (dragState.current.isDragging[dragState.current.pathIndex]) {
      const edgeIndex = edges.findIndex(e => e.id === id);
      const edge = edges[edgeIndex];
      if (!edge) return;

      let dx = e.clientX - dragState.current.startPos[dragState.current.pathIndex].x;
      let dy = e.clientY - dragState.current.startPos[dragState.current.pathIndex].y;

      dx = Math.max(-5, Math.min(5, dx));
      dy = Math.max(-5, Math.min(5, dy));
      if (dx === 0 && dy === 0) return
      const sourceNodeIndex = nodes.findIndex(item => item.id === source);
      const targetNodeIndex = nodes.findIndex(item => item.id === target);

      // 添加类型检查
      if (sourceNodeIndex === -1 || targetNodeIndex === -1) return;

      const sourceHandles = nodes[sourceNodeIndex].data.sourceHandles;
      const targetHandles = nodes[targetNodeIndex].data.targetHandles;

      const sourceHandleIndex = sourceHandles.findIndex(item => item.id === sourceHandleId);
      const targetHandleIndex = targetHandles.findIndex(item => item.id === targetHandleId);

      // 添加索引检查
      if (sourceHandleIndex === -1 || targetHandleIndex === -1) return;

      const sourceHandleConfig = sourceHandles[sourceHandleIndex];
      const targetHandleConfig = targetHandles[targetHandleIndex];

      let preArr: string[] | null = null;
      let preMp: number[] | null = null;
      let preLp: number[] | null = null;
      let nextArr: string[] | null = null;
      let nextMp: number[] | null = null;
      let nextLp: number[] | null = null;

      // 添加边界检查
      if (dragState.current.pathIndex < 0 || dragState.current.pathIndex >= edgePathLine.length) return;

      const arr = edgePathLine[dragState.current.pathIndex].split(' ');
      // 添加数组长度检查
      if (arr.length < 4) return;

      const mp = arr[1].split(',').map(i => Number(i));
      const lp = arr[3].split(',').map(i => Number(i));

      if (dragState.current.pathIndex > 0) {
        preArr = edgePathLine[dragState.current.pathIndex - 1].split(' ');
        if (preArr.length >= 4) {
          preMp = preArr[1].split(',').map((i: string) => Number(i));
          preLp = preArr[3].split(',').map((i: string) => Number(i));
        }
      }

      if (dragState.current.pathIndex < edgePathLine.length - 1) {
        nextArr = edgePathLine[dragState.current.pathIndex + 1].split(' ');
        if (nextArr.length >= 4) {
          nextMp = nextArr[1].split(',').map((i: string) => Number(i));
          nextLp = nextArr[3].split(',').map((i: string) => Number(i));
        }
      }

      if (dragState.current.pathIndex === 0) {
        let sourceMove = sourceHandleConfig.position;
        const {width = 0, height = 0} = nodes[sourceNodeIndex].measured || {};
        sourceMove = updatePosition(sourceMove, sourceHandleConfig, dx, width, dy, height);
        sourceHandleConfig.position = sourceMove;
        if (data) data.pathList = [];
        //清空pathList
      } else if (dragState.current.pathIndex === edgePathLine.length - 1) {
        let targetMove = targetHandleConfig.position;
        const {width = 0, height = 0} = nodes[targetNodeIndex].measured || {};
        targetMove = updatePosition(targetMove, targetHandleConfig, dx, width, dy, height);
        targetHandleConfig.position = targetMove;
        if (data) data.pathList = [];
        //清空pathList
      } else {
        // 添加空值检查
        if (edgePathLine[dragState.current.pathIndex]) {
          if (getPathD(edgePathLine[dragState.current.pathIndex]) === 'v') {
            mp[0] += dx;
            lp[0] += dx;
            if (preLp && nextMp) {
              preLp[0] += dx;
              nextMp[0] += dx;
            }
          } else {
            mp[1] += dy;
            lp[1] += dy;
            if (preLp && nextMp) {
              preLp[1] += dy;
              nextMp[1] += dy;
            }
          }
          if (preMp && preLp) edgePathLine[dragState.current.pathIndex - 1] = `M ${preMp.join(',')} L ${preLp.join(',')}`;
          edgePathLine[dragState.current.pathIndex] = `M ${mp.join(',')} L ${lp.join(',')}`;
          if (nextMp && nextLp) edgePathLine[dragState.current.pathIndex + 1] = `M ${nextMp.join(',')} L ${nextLp.join(',')}`;

        }
        if (edge?.data) {
          edge.data.pathList = [...edgePathLine];
        }
      }

      const {markerStart: newMarkerStart, markerEnd: newMarkerEnd} = determineMarker(
        edge?.type as CustomEdgeTypes,
        sourceHandleConfig,
        targetHandleConfig
      );
      edge.markerEnd = newMarkerEnd;
      edge.markerStart = newMarkerStart;

      dragState.current.startPos[dragState.current.pathIndex] = {x: e.clientX, y: e.clientY};

      updateNodeInternals([source, target]);
    }
  }, [id, nodes, edges, source, target, sourceHandleId, targetHandleId, updateNodeInternals, updatePosition, edgePathLine]);


  const handleMouseUp = useCallback(() => {
    dragState.current.isDragging[dragState.current.pathIndex] = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
    debouncedAddHistory({
      type: HistoryChangeTypes.EditEdges,
      nodes: JSON.parse(JSON.stringify(nodes)),
      edges,
      // updatedEdges,
      viewport
    });
  }, [handleMouseMove, nodes, edges, viewport, debouncedAddHistory]);

  const handleMouseDownFirstOrLastLine = useCallback((e: React.MouseEvent, index: number) => {
    dragState.current.pathIndex = index;
    dragState.current.isDragging[index] = true;
    if (dragState.current.pathIndex !== 0 && dragState.current.pathIndex !== edgePathLine.length - 1) {
      return;
    }
    dragState.current.startPos[index] = {x: e.clientX, y: e.clientY};
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }, [handleMouseMove, handleMouseUp, edgePathLine.length]);

  const handleMouseDownMiddleLine = useCallback((e: React.MouseEvent, index: number) => {
    dragState.current.pathIndex = index;
    dragState.current.isDragging[index] = true;
    if (dragState.current.pathIndex === 0 || dragState.current.pathIndex === edgePathLine.length - 1) {
      return;
    }
    dragState.current.startPos[index] = {x: e.clientX, y: e.clientY};
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }, [handleMouseMove, handleMouseUp, edgePathLine.length]);

  let markerStartUrl = "";
  if (edge?.type === CustomEdgeTypes.Key && sourcePosition === 'right') {
    markerStartUrl = "url('#markerVerticalRight')";
  } else if (edge?.type === CustomEdgeTypes.Key && sourcePosition === 'left') {
    markerStartUrl = "url('#markerVerticalLeft')";
  } else if (edge?.type === CustomEdgeTypes.Key && sourcePosition === 'top') {
    markerStartUrl = "url('#markerHorizontalTop')";
  } else if (edge?.type === CustomEdgeTypes.Key && sourcePosition === 'bottom') {
    markerStartUrl = "url('#markerHorizontalBottom')";
  } else if (edge?.type === CustomEdgeTypes.NotKey && sourcePosition === 'right') {
    markerStartUrl = "url('#notKeySourceRight')";
  } else if (edge?.type === CustomEdgeTypes.NotKey && sourcePosition === 'left') {
    markerStartUrl = "url('#notKeySourceLeft')";
  } else if (edge?.type === CustomEdgeTypes.NotKey && sourcePosition === 'top') {
    markerStartUrl = "url('#notKeySourceTop')";
  } else if (edge?.type === CustomEdgeTypes.NotKey && sourcePosition === 'bottom') {
    markerStartUrl = "url('#notKeySourceBottom')";
  } else if (edge?.type === CustomEdgeTypes.Mtm && sourcePosition === 'right') {
    markerStartUrl = "url('#mtmSourceRight')";
  } else if (edge?.type === CustomEdgeTypes.Mtm && sourcePosition === 'left') {
    markerStartUrl = "url('#mtmSourceLeft')";
  } else if (edge?.type === CustomEdgeTypes.Mtm && sourcePosition === 'top') {
    markerStartUrl = "url('#mtmSourceTop')";
  } else if (edge?.type === CustomEdgeTypes.Mtm && sourcePosition === 'bottom') {
    markerStartUrl = "url('#mtmSourceBottom')";
  }
  const pEndCardinality = edge?.data?.pEndCardinality;
  let markerEndUrl = "";
  if (pEndCardinality === ZERO_OR_ONE) {
    if (targetPosition === 'right') {
      markerEndUrl = "url('#notKeySourceRight')";
    } else if (targetPosition === 'left') {
      markerEndUrl = "url('#notKeySourceLeft')";
    } else if (targetPosition === 'top') {
      markerEndUrl = "url('#notKeySourceTop')";
    } else if (targetPosition === 'bottom') {
      markerEndUrl = "url('#notKeySourceBottom')";
    }
  } else if (pEndCardinality === ONE_ONLY) {
    if (targetPosition === 'right') {
      markerEndUrl = "url('#markerVerticalRight')";
    } else if (targetPosition === 'left') {
      markerEndUrl = "url('#markerVerticalLeft')";
    } else if (targetPosition === 'top') {
      markerEndUrl = "url('#markerHorizontalTop')";
    } else if (targetPosition === 'bottom') {
      markerEndUrl = "url('#markerHorizontalBottom')";
    }
  } else if (pEndCardinality === ONE_OR_MORE) {
    if (targetPosition === 'right') {
      markerEndUrl = "url('#oneOrMoreRight')";
    } else if (targetPosition === 'left') {
      markerEndUrl = "url('#oneOrMoreLeft')";
    } else if (targetPosition === 'top') {
      markerEndUrl = "url('#oneOrMoreTop')";
    } else if (targetPosition === 'bottom') {
      markerEndUrl = "url('#oneOrMoreBottom')";
    }
  } else if (!pEndCardinality || pEndCardinality === ZERO_ONE_OR_MORE) {
    if (targetPosition === 'right') {
      markerEndUrl = "url('#mtmSourceRight')";
    } else if (targetPosition === 'left') {
      markerEndUrl = "url('#mtmSourceLeft')";
    } else if (targetPosition === 'top') {
      markerEndUrl = "url('#mtmSourceTop')";
    } else if (targetPosition === 'bottom') {
      markerEndUrl = "url('#mtmSourceBottom')";
    }
  }
  return (
    <>
      {edgePathLine.map((line, index) => {
        const isStart = index === 0;
        const isEnd = index === edgePathLine.length - 1;
        return (
          <path
            key={line}
            className="react-flow__edge-path"
            d={line}
            {...(isStart ? {markerStart: markerStartUrl} : {})}
            {...(isEnd ? {markerEnd: markerEndUrl} : {})}
            {...(isStart || isEnd ?
              {onMouseDown: (e) => handleMouseDownFirstOrLastLine(e, index)}
              : {onMouseDown: (e) => handleMouseDownMiddleLine(e, index)})
            }
            stroke="#6C95FB"
            opacity={0.75}
            strokeWidth={99}
            style={{
              ...style,
              strokeLinecap: 'round', // 让末端更圆润
            }}
            strokeDasharray={edge?.type === CustomEdgeTypes.NotKey ? "10,5" :
              edge?.type === CustomEdgeTypes.Mtm ? "5,5" :
                "none"}
          />
        );
      })}
    </>
  );
}

1 reply

fgdsfgfdsgdsfgsdfg Sep 1, 2025

20250901-145409.mp4

Sharmil001 · 2025-09-16T05:45:30Z

Sharmil001
Sep 16, 2025

@fgdsfgfdsgdsfgsdfg I need help here.

**@hchaudhary1 and @ozgurrgul ozgurrgul How to Bend Parallel Edges in a Mirrored Fashion Using React Flow and Dagre Layout? How to fix that issue? **

I want to konw how you guys are managing proper mirrored edges?? I want to archive like how it looks in Image 2 and Image 1 is issue.

//layouting code

import { span } from "@f/instrument";
import { buildNestedGroups } from "@f/utils/workflowUtils";
import dagre from "dagre";
import { Position, type Edge, type Node } from "reactflow";

export const getLayoutedElements = (
nodes: Node[],
edges: Edge[],
direction: "TB" | "LR" | "RL" | "BT" = "TB",
) => {
using console = span("getLayoutedElements");
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));

dagreGraph.setGraph({
	rankdir: direction,
	nodesep: 250,
	ranksep: 50,
	marginx: 25,
	marginy: 25,
});

const groupedNodes = new Map<string, Node[]>();

for (const node of nodes) {
	const width = Number(node.data?.width || 150);
	const height = Number(node.data?.height || 50);

	if (width <= 0 || height <= 0) {
		console.warn(
			`Skipping node "${node.id}" due to invalid dimensions (width: ${width}, height: ${height})`,
		);
		continue;
	}

	if (node.data?.groupId) {
		if (!groupedNodes.has(node.data.groupId)) {
			groupedNodes.set(node.data.groupId, []);
		}
		groupedNodes.get(node.data.groupId)?.push(node);
	}
	try {
		if (node.type !== "group") {
			dagreGraph.setNode(node.id, { width, height });
		}
	} catch (error) {
		console.error(`Failed to add node "${node.id}" to Dagre graph:`, error);
	}
}
console.log("Finished adding nodes to graph");

for (const edge of edges) {
	const sourceExists = nodes.some((node) => node.id === edge.source);
	const targetExists = nodes.some((node) => node.id === edge.target);

	if (!sourceExists || !targetExists) {
		console.warn(
			`Skipping edge from "${edge.source}" to "${edge.target}" due to missing nodes`,
		);
		continue;
	}

	try {
		dagreGraph.setEdge(edge.source, edge.target, { minlen: 1 });
	} catch (error) {
		console.error(
			`Failed to add edge from "${edge.source}" to "${edge.target}":`,
			error,
		);
	}
}
console.log("Finished adding edges to graph");

try {
	dagre.layout(dagreGraph);
	console.log("Graph layout complete");
} catch (error) {
	console.error("Error during layout calculation:", error);
	throw error;
}

const layoutedNodes = nodes.map((node) => {
	const nodeWithPosition = dagreGraph.node(node.id);

	if (!nodeWithPosition) {
		console.warn(`No position calculated for node "${node.id}"`);
		return node;
	}

	return {
		...node,
		targetPosition: Position.Top,
		sourcePosition: Position.Bottom,
		position: {
			x: nodeWithPosition.x - (node.data?.width || 150) / 2,
			y: nodeWithPosition.y - (node.data?.height || 50) / 2,
		},
		data: {
			...node.data,
			width: node.data?.width || 150,
			height: node.data?.height || 50,
		},
	};
});
console.log("Positioned layouted nodes", {
	layoutedNodeCount: layoutedNodes.length,
});

const groupNodes: Node[] = buildNestedGroups(nodes, dagreGraph);
console.log("Built group nodes", { groupNodeCount: groupNodes.length });

const resultNodes = [
	...groupNodes,
	...layoutedNodes.filter((node) => node.type !== "group"),
];
console.log("Layouted result prepared", {
	finalNodeCount: resultNodes.length,
	finalEdgeCount: edges.length,
});

return {
	nodes: resultNodes,
	edges,
};

};

//buildnested groups

export const buildNestedGroups = (nodes: Node[], dagreGraph: any) => {
const processedGroups = new Set();
const groupNodes: Node[] = [];
const nestedGroups = new Map<string, string>();

const getGroupNodes = (groupId: string) =>
	nodes.filter((node) => node.data?.groupId === groupId);

for (const node of nodes) {
	if (node.type === "group" && node.data.groupId) {
		if (!nestedGroups.has(node.id)) {
			nestedGroups.set(node.id, node.data.groupId);
		}
	}
}

const createGroup = (groupId: string, parentGroupId: string | undefined) => {
	if (processedGroups.has(groupId)) return;
	const group = getGroupNodes(groupId);
	if (group.length === 0) return;
	let minX = Number.POSITIVE_INFINITY;
	let maxX = Number.NEGATIVE_INFINITY;
	let minY = Number.POSITIVE_INFINITY;
	let maxY = Number.NEGATIVE_INFINITY;

	for (const node of group) {
		const n = dagreGraph.node(node.id);
		if (!n) continue;

		const nodeWidth = node.data?.width || 150;
		const nodeHeight = node.data?.height || 50;

		const nodeLeft = n.x - nodeWidth / 2;
		const nodeRight = n.x + nodeWidth / 2;
		const nodeTop = n.y - nodeHeight / 2;
		const nodeBottom = n.y + nodeHeight / 2;

		minX = Math.min(minX, nodeLeft);
		maxX = Math.max(maxX, nodeRight);
		minY = Math.min(minY, nodeTop);
		maxY = Math.max(maxY, nodeBottom);
	}

	if (
		minX === Number.POSITIVE_INFINITY ||
		minY === Number.POSITIVE_INFINITY ||
		maxX === Number.NEGATIVE_INFINITY ||
		maxY === Number.NEGATIVE_INFINITY
	) {
		console.warn(`Skipping group ${groupId} due to invalid bounds`);
		return;
	}

	const basePadding = 20;

	const bgWidth = Math.max(0, maxX - minX + 2 * basePadding);
	const bgHeight = Math.max(0, maxY - minY + 2 * basePadding);

	groupNodes.push({
		id: `${groupId}`,
		type: "group",
		position: { x: minX - basePadding, y: minY - basePadding },
		data: { label: `Loop: ${groupId}`, groupId: parentGroupId },
		style: {
			width: bgWidth,
			height: bgHeight,
			border: "2px dashed var(--utility-gray-300)",
			backgroundColor: "var(--utility-gray-50)",
			borderRadius: "28px",
			zIndex: -1,
		},
	});

	processedGroups.add(groupId);
};

const uniqueGroupIds = new Set(
	nodes.flatMap((node) => (node.data?.groupId ? [node.data.groupId] : [])),
);

for (const groupId of uniqueGroupIds) {
	const parentGroupId = nestedGroups.has(groupId)
		? nestedGroups.get(groupId)
		: undefined;
	createGroup(groupId, parentGroupId);
}

uniqueGroupIds.forEach(createGroup);

const updateParentWidths = (childId: string, widthIncrease: number) => {
	using console = span("updateParentWidths");
	let currentId: string | undefined = childId;
	console.log("Updating parent widths for childId:", childId);

	while (currentId) {
		const parentId = nestedGroups.get(currentId);
		if (!parentId) break;

		const parentGroup = groupNodes.find((g) => g.id === `${parentId}`);
		const childGroup = groupNodes.find((g) => g.id === `${currentId}`);

		if (parentGroup && childGroup && parentGroup.style && childGroup.style) {
			const newWidth = Number(childGroup.style.width) + widthIncrease;

			if (newWidth > Number(parentGroup.style.width)) {
				parentGroup.style.width = newWidth;
				parentGroup.position.x = Math.min(
					parentGroup.position.x,
					childGroup.position.x - widthIncrease / 2,
				);
			}
		}
		currentId = parentId;
	}
};

for (const [childId, _] of nestedGroups) {
	updateParentWidths(childId, 60);
}

console.log("Finalized updateParentWidths", {
	groupNodes,
});

return groupNodes;

};

1 reply

8000

fgdsfgfdsgdsfgsdfg Oct 11, 2025

I‘m not good at English, and I can't understand you

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Curvature / Bending Points #5457

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Curvature / Bending Points #5457

Uh oh!

dkrohmer Aug 18, 2025

Replies: 3 comments · 2 replies

Uh oh!

fgdsfgfdsgdsfgsdfg Aug 29, 2025

Uh oh!

Uh oh!

fgdsfgfdsgdsfgsdfg Sep 1, 2025

Uh oh!

fgdsfgfdsgdsfgsdfg Sep 1, 2025

Uh oh!

Uh oh!

Sharmil001 Sep 16, 2025

Uh oh!

fgdsfgfdsgdsfgsdfg Oct 11, 2025

dkrohmer
Aug 18, 2025

Replies: 3 comments 2 replies

fgdsfgfdsgdsfgsdfg
Aug 29, 2025

fgdsfgfdsgdsfgsdfg
Sep 1, 2025

Sharmil001
Sep 16, 2025