Full source code of getting started example

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.

[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.