reaviz / reaflow

🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
https://reaflow.dev
Apache License 2.0
2.17k stars 124 forks source link

Adding a `data` to any edge throws a layout error. #134

Open mkhoussid opened 2 years ago

mkhoussid commented 2 years ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Library throws an error when you add the "data" prop to edges.

Expected behavior

Should render without an error

sharp-joana-1y9zh

Uncomment line 35 to see the error.

Error thrown:

Layout Error: Error: java.lang.Error: Severe implementation error in the Json to ElkGraph importer.
import React from "react";
import styled from "@emotion/styled";
import { Canvas, Edge, NodeData, EdgeData, Label } from "reaflow";

const Diagram = React.memo(() => {
  const [nodes] = React.useState<NodeData[]>([
    {
      id: "1",
      text: "Node 1",
      ports: [],
      width: 325,
      height: 100,
      data: {
        questionNumber: 1
      }
    },
    {
      id: "2",
      text: "Node 2",
      ports: [],
      width: 325,
      height: 75,
      data: {
        questionNumber: 2
      }
    }
  ]);

  const [edges] = React.useState<EdgeData[]>([
    {
      id: "1-2-1",
      from: "1",
      to: "2",
      text: "4, 5"
      // data: {
      //   hellow: true
      // }
    }
  ]);

  return (
    <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
      <Canvas
        nodes={nodes}
        edges={edges}
        edge={(props) => {
          console.log("props", props);
          return <Edge {...props} label={<LabelStyled {...props.label} />} />;
        }}
        onLayoutChange={(layout) => console.log("Layout", layout)}
      />
    </div>
  );
});

export default Diagram;

const LabelStyled = styled(Label)`
  fill: red;
  color: red;
`;
amcdnl commented 2 years ago

The error is thrown by ElkJS