LynchyC
commented
11 months ago It seems you are importing CanvasWidget, but you are not using it. That is the component that renders out your diagram model.
If you refer to this demo. Take line 40 and try again, you should be able to see it.
import React from 'react'; import logo from './logo.svg';
import createEngine, { DefaultLinkModel, DefaultNodeModel, DiagramModel } from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core'; import './App.css';
const 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(port2);
// link.addLabel('Hello World!');
const model = new DiagramModel(); model.addAll(node1, node2, link); engine.setModel(model); return (
); }
export default App;
This is a package.json.
{ "name": "test", "version": "0.1.0", "private": true, "dependencies": { "@projectstorm/react-canvas-core": "^7.0.1", "@projectstorm/react-diagrams": "^7.0.2", "@projectstorm/react-diagrams-core": "^7.0.1", "@projectstorm/react-diagrams-defaults": "^7.1.1", "@projectstorm/react-diagrams-routing": "^7.1.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.38", "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "gsap": "^3.12.2", "json-beautify": "^1.1.1", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "PORT=3200 react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
This is a source code I tried. But nodes are not shown. I can't see anything.