projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

Canvas is not showing up in Simple Demo #825

Closed hemabhravee closed 3 years ago

hemabhravee commented 3 years ago

So I found this library a couple of days ago and started implementing and all was good until I realized I was using storm-react-diagrams(V5.2.1) instead of the latest version. Now I'm trying to implement everything on the latest 6.5 version. I started with the simple-demo from Demos but the canvas is not showing up on the screen. There are no errors either. What am I doing wrong? The code -

import createEngine, {
  DiagramModel,
  DefaultNodeModel,
} from "@projectstorm/react-diagrams";
import { CanvasWidget} from "@projectstorm/react-canvas-core";

export default function Workspace() {
  // setup engine
  var engine = createEngine();

  // setup model
  var model = new DiagramModel();

  //3-A) create a default node
  var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
  var port1 = node1.addOutPort("Out");
  node1.setPosition(100, 100);

  //4) add the models to the root graph
  model.addAll(node1);

  //5) load model into engine
  engine.setModel(model);

  return (
      <CanvasWidget className="demo-canvas" engine={engine} />
  );
}
hemabhravee commented 3 years ago

I found some similar issues - #773 #778 However the solutions provided did not fix my problem

hemabhravee commented 3 years ago

Found the fix - I had to add height property to the canvasWidget. I was passing style={{height:"100vh"}} to the canvasWidget, which did not work, but adding height via an external stylesheet worked.