React diagram invisible and shows error at

Question

I tried using react-diagrams library and I'm facing some problems.

Firstly at the line

const link = port1.link<DefaultLinkModel>(port2);

it shows me a error that

TypeError: link.addLabel is not a function

and suppose I remove the linking part, the code runs, I get no errors but nothing is seen on the webpage...

here is the code

App.js

import React from "react";
import createEngine, {
  DefaultLinkModel,
  DefaultNodeModel,
  DiagramModel
} from "@projectstorm/react-diagrams";

import { CanvasWidget } from "@projectstorm/react-canvas-core";

// create an instance of the engine with all the defaults
const engine = createEngine();

// node 1
const node1 = new DefaultNodeModel({
  name: "Node 1",
  color: "rgb(0,192,255)"
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort("Out");

// node 2
const node2 = new DefaultNodeModel({
  name: "Node 1",
  color: "rgb(0,192,255)"
});
node2.setPosition(100, 100);
let port2 = node2.addOutPort("Out");

//  link them and add a label to the link
const link = port1.link < DefaultLinkModel > port2;
link.addLabel("Hello World!");

const model = new DiagramModel();
model.addAll(node1, node2);
engine.setModel(model);

class App extends React.Component {
  render() {
    return <CanvasWidget engine={engine} />;
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from "./App"
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <style>
      .srd-diagram {
        height: 100vh;
      }
    </style>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

pls, help me sort this...

score 0 · Answer 1 · answered Nov 13 '21 at 14:08

I know this post is too old, but still can be helpful if someone is struggling.

If you want to add the link between the nodes, try setting the source and target port for the link.

  const node1 = new DefaultNodeModel({
    name: "Node 1",
    color: "rgb(0,192,255)",
  });
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort("Out");

  const node2 = new DefaultNodeModel({
    name: "Node 2",
    color: "rgb(0,100,255)",
  });
  node2.setPosition(100, 200);
  let port2 = node2.addInPort("In");

  const link = new DefaultLinkModel();
  link.setSourcePort(port1);
  link.setTargetPort(port2);

For the second part:

and suppose I remove the linking part, the code runs, I get no errors but nothing is seen on the webpage...

You need to set the canvas height and width to make it visible.

App.js

<CanvasWidget className="canvas" engine={engine} />

App.css

.canvas {
  height: 400px;
  width: 100%;
}

React diagram invisible and shows error at

1 Answers1