react-diagrams
react-diagrams copied to clipboard
Tutorial not working
I am trying to follow:
https://projectstorm.gitbook.io/react-diagrams/getting-started/using-the-library
I created a new typescript react project using:
npx create-react-app my-app --template typescript
Then I put the code from the tutorial into index.tsx. i.e.
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, link); engine.setModel(model);
This gives the following error:
TS2786: 'CanvasWidget' cannot be used as a JSX component. Its instance type 'CanvasWidget' is not a valid JSX element. Type 'CanvasWidget' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more. 38 | 39 |
40 | <CanvasWidget engine={engine} />
Can you suggest what I am doing wrong?
I don't see the use of CanvasWidget
anywhere apart from the import statement.
I would recommend using the demo code as a basis and see if the problem still persists for you.