Canvas showing completely white

[cesarecaoduro]

I am using a basic CreateReactApp installation, added all the dependencies including the support for typescript, the code doesn't generate any error, but the canvas is completely white.
In the developer console it seems that something is created but I am not able to do anything.

This is the component .tsx

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);

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

export default class DiGraph extends React.Component{
    render(){
        return (
            <CanvasWidget className="diagram-container" engine={engine}/>
            );
    };
}

And this is my package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@projectstorm/react-diagrams": "^6.0.1-beta.7",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.31",
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "closest": "^0.0.1",
    "dagre": "^0.8.5",
    "lodash": "^4.17.15",
    "mathjs": "^6.6.1",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "react": "^16.13.1",
    "react-digraph": "^6.6.4",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And the tsconfig.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@projectstorm/react-diagrams": "^6.0.1-beta.7",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.31",
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "closest": "^0.0.1",
    "dagre": "^0.8.5",
    "lodash": "^4.17.15",
    "mathjs": "^6.6.1",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "react": "^16.13.1",
    "react-digraph": "^6.6.4",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Something is there for sure and this is driving me nuts!

[renato-bohler]

Seems like a CSS problem. Try adding a wrapper on the CanvasWidget with full width and height, or try to mess with the CSS on the DevTools. Also, these are related:

• Integrating in an React Project #511
• Diagram doesn't seem #347
• React-diagrams invisible

[cesarecaoduro]

Doesn't work for me. I can have the right background color but still the node are not showing

[pierre-moire]

Please check this solution: #511 (comment)

[mkellogg91]

Posted an update to this issue in #511

[v1690117]

I'm facing the same problem trying to go through the documentation.
Firstly, I was facing with problem described in #598. After some investigation I've found that problem is related to link. So after commenting link I faced with white screen only.
The code is

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

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

function App() {
  // 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, link);
  model.addAll(node1, node2);
  engine.setModel(model);
  return (
    <div>
      <CanvasWidget engine={engine} />
    </div>
  );
}

export default App;

Screen is

Also, I have tried with code provided by @cesarecaoduro and have reproduced the issue.

[v1690117]

Yeap this one #511 (comment) from @mkellogg91 is working

[kresli]

CanvasWidget must have position: inherit to make this work. Unfortunately style is not accepted prop so we need to use className

[asnaseer-resilient]

I got it to work as follows:

import React from 'react';

import { createStyles, makeStyles } from '@material-ui/core';
import createEngine, { DefaultLinkModel, DefaultNodeModel, DiagramModel } from '@projectstorm/react-diagrams';

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

const useStyles = makeStyles(() =>
  createStyles({
    canvas: {
      height: '100vh'
    }
  })
);

export const Amazing: React.FC = () => {
  const classes = useStyles();

  // 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 2',
    color: 'rgb(0,192,255)'
  });
  node2.setPosition(500, 100);
  let port2 = node2.addInPort('In');

  // 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, link);
  engine.setModel(model);

  return <CanvasWidget engine={engine} className={classes.canvas} />;
};

[luk3skyw4lker]

I'm actually having the same issue, besides, I am currently unable to make the diagram occupy only part of the screen. Anyone has updates on it?