React-diagrams: Full source code of getting started example

[MikHulk]

Hi,

I have just discovered your libray. It is exactly what I need. Iwant first thank you for that.

However I have trouble to get working the first example. At now that's whhat I have done

import React from 'react';
import './App.css';
import createEngine, {
    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(port2);
link.addLabel('Hello World!');

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

function App() {
  return <CanvasWidget engine={engine} />;
}

export default App;

I don't use Typescript, so I remove thing which were related.

The build run without warning, but I get a white page. In dev tools / inspect I can see the canvas but not in the real page. All is white.

I hope you could help me with this. A full working example will be cool.

[MikHulk]

Ok I find the demo. I am seeing that

[Nijooke]

Hey !

If you still have a problem, I invite you to take a look at the solution of renato-bohler in the issue #519

Let me know if you still have the problem

[MikHulk]

Hi Nijooke,

Sadly I cannot use TypeScript with JSX together in my IDE. So I must adapt demo example. I succeed to get it working. I am preparing an example in pure jsx that I will post here.

Thx

[MikHulk]

The problem comes from that canvas had a 0 height.

Here is how I adapt the code from here https://github.com/projectstorm/react-diagrams/blob/master/packages/diagrams-demo-gallery/demos/demo-simple/index.tsx in full rjsx.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import createEngine, { DiagramModel,
                       DefaultNodeModel
                     } from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import './index.css';


function App () {
  //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);
  link1.getOptions().testName = 'Test';
  link1.addLabel('Hello World!');

  //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  <CanvasWidget className='canvas' engine={engine} />;
};

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

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.canvas {
    height: 200px
}

I hope it could help.

[marcelotrevisani]

@MikHulk thanks a lot for sharing your solution! That really helped me! :)
I didn't realize that the problem was the canvas height

[MikHulk]

glad to help you. It also took me a while to find where the problem comes from.