React Diagrams Links not straight

Question

I am using the react-diagrams library to make an app with. However, I am a bit annoying by the links not adjusting automatically to be straight. Here is an example of what I am talking about.

Example

Is there any way to fix this? It is really annoying to look at and deal with

Answer 1

Probably that is happening due to the usage of AngledLink as mentioned by you in the comment. You can use simple link instead of AngleLink.

Here's the working example at codesandbox. You can try moving/dragging the nodes in any way and this won't break the link line.

App.tsx

import createEngine, {
  DiagramModel,
  DefaultNodeModel
} from "@projectstorm/react-diagrams";
import * as React from "react";
import { CanvasWidget } from "@projectstorm/react-canvas-core";
import { DemoCanvasWidget } from "./DemoCanvasWidget";

export default () => {
  //1) setup the diagram engine
  var engine = createEngine();

  //2) setup the diagram model
  var model = new DiagramModel();

  //3-A) create a default node
  var node1 = new DefaultNodeModel({
    name: "Node 1",
    color: "rgb(0,192,255)"
  });
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort("Out");

  //3-B) create another default node
  var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
  let port2 = node2.addInPort("In");
  node2.setPosition(400, 100);

  // link the ports
  let link1 = port1.link(port2);

  //4) add the models to the root graph
  model.addAll(node1, node2, link1);

  //5) load model into engine
  engine.setModel(model);

  //6) render the diagram!
  return (
    <DemoCanvasWidget>
      <CanvasWidget engine={engine} />
    </DemoCanvasWidget>
  );
};

DemoCanvasWidget.tsx

import * as React from "react";
import styled from "@emotion/styled";
import { css, Global } from "@emotion/react";

export interface DemoCanvasWidgetProps {
  color?: string;
  background?: string;
}

export const Container = styled.div<{ color: string; background: string }>`
  height: 100%;
  background-color: ${(p) => p.background};
  background-size: 50px 50px;
  display: flex;

  > * {
    height: 100%;
    min-height: 100%;
    width: 100%;
  }

  background-image: linear-gradient(
      0deg,
      transparent 24%,
      ${(p) => p.color} 25%,
      ${(p) => p.color} 26%,
      transparent 27%,
      transparent 74%,
      ${(p) => p.color} 75%,
      ${(p) => p.color} 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      ${(p) => p.color} 25%,
      ${(p) => p.color} 26%,
      transparent 27%,
      transparent 74%,
      ${(p) => p.color} 75%,
      ${(p) => p.color} 76%,
      transparent 77%,
      transparent
    );
`;

export const Expand = css`
  html,
  body,
  #root {
    height: 100%;
  }
`;

export class DemoCanvasWidget extends React.Component<DemoCanvasWidgetProps> {
  render() {
    return (
      <>
        <Global styles={Expand} />
        <Container
          background={this.props.background || "rgb(60, 60, 60)"}
          color={this.props.color || "rgba(255,255,255, 0.05)"}
        >
          {this.props.children}
        </Container>
      </>
    );
  }
}

If this is not your use case then you can refer to this link to find the best-suited example for your use case.