reactjs - Edge Labels Overlapping in React-flow - Stack Overflow

admin管理员组

文章数量:1295783

I am pushing edges in my react-flow setup, the issue I am facing is, suppose the edges are crossing each other, currently my edge labels render at the midpoint of edge, so if the edges cross each other, they render on top of each other, so that user is not able to see all the label and only sees the top one

setEdges((eds) =>
    eds.map((edge) => {
      const tranformation_logic_from_data =
        data[edge.target].columns[edge["targetHandle"].split("-")[1]];

      if (tranformation_logic_from_data) {
        logic = tranformation_logic_from_data.transformation_logic;
      } else {
        logic = "";
      }

      return {
        ...edge,
        style: {
          ...edge.style,
          /*    stroke:
          lineageType === "Variable"
            ? "#ccc"
            : connectorColortoggle
            ? operationColorMap[
                data[edge.target].table_transformation_logic
              ] || "#000"
            : "#aaa", */
          stroke: "#ccc",
          strokeWidth:
            lineageType === "Variable" ? 4 / zoomLevel : 4 / zoomLevel,
          strokeDasharray: lineageType === "Variable" ? "" : "1, 8",
        },
        label: variableConnectorTextToggle ? logic : "",
        labelStyle: {
          fill: "#000",
          fontWeight: 500,
          fontSize: 20,
        },
        labelBgPadding: [30, 10],
        labelBgStyle: { fill: "white", stroke: "#ccc", strokeWidth: 1 },
        labelShowBg: true,
        labelBgBorderRadius: 8,
      };
    })
  );

You can see the edge labels, and i'll add a screenshot also, suppose if i remove the background of label from the code setting : "labelShowBg: false"

Now we see how some labels have other labels stacked under them

Is there any solution to this problem, I have tried figuring out edge length and setting label location based on that, but if edge lengths are same, it creates an issue there

If label background is on, the lower-level edge labels are not visible

Edit: I have also tried using EdgeLabelRenderer , to try to make a sort of collision detection system, but no luck using that also

本文标签： reactjsEdge Labels Overlapping in ReactflowStack Overflow