Closed isopterix closed 4 years ago
What is your React project setup? Is it server side rendered or something like that?
I've never had or seen this problem before.
No, right now I am just using plain create-react-app
with enabled typescript
support.
Looks like there was some kind of error somewhere in the copied code. I haven't figured out yet where exactly but after coping also the react component code shared by @cesarecaoduro rather than using the example one it its working now.
i have created a clean project, a new file test.tsx, copy file demos\demo-simple (with deps ../helpers/DemoCanvasWidget) and it's not working, I'm getting the same result.
Cannot read property 'getTotalLength'
I made a npm link and until I can read the code the ref.current was null in the point that path was added to the Array
this.props.link.setRenderedPaths(
this.refPaths.map(ref => {
return ref.current;
})
);
in example demo-simple, it's fire when link1.addLabel('Hello World!');
Hi, also running into this issue. It appears to only happen when using React.StrictMode during development. A production build does not show this issue.
Steps I took to replicate issue:
npx create-react-app my-app --template typescript
cd my-app
npm install # Installs typescript types
npm install @projectstorm/react-diagrams closest lodash pathfinding paths-js emotion dagre mathjs resize-observer-polyfill @emotion/core @emotion/styled
Update src/App.tsx
:
import React from "react";
import createEngine, {
DefaultLinkModel,
DefaultNodeModel,
DiagramModel,
} from "@projectstorm/react-diagrams";
import { CanvasWidget } from "@projectstorm/react-canvas-core";
import "./App.css";
function App() {
//1) setup the diagram engine
var engine = createEngine();
//2) setup the diagram model
var model = new DiagramModel();
//3-A) create a default node
var node1 = new DefaultNodeModel({
name: "Node 1",
color: "rgb(0,192,255)",
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort("Out");
//3-B) create another default node
var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
let port2 = node2.addInPort("In");
node2.setPosition(400, 100);
// link the ports
let link1 = port1.link<DefaultLinkModel>(port2);
link1.getOptions().testName = "Test";
link1.addLabel("Hello World!");
//4) add the models to the root graph
model.addAll(node1, node2, link1);
//5) load model into engine
engine.setModel(model);
return <CanvasWidget engine={engine} className="canvas" />;
}
export default App;
Temporary "fix" by:
<React.StrictMode>
tags from src/index.tsx
src/index.css
to include:
.canvas {
height: 100vh;
}
Trial and error approach (not ideal). Production builds work with <React.StrictMode>
tags.
@Crumzor thank you for the write up, I was experiencing all the exact same issues as you. You're solution works but this should really be unnecessary for a project claiming
"a super simple, no-nonsense diagramming library written in react that just works"
It does not, it took a day of tracking down errors and parsing repo issues.
Steps I took to replicate issue:
These should really be in the docs, would have saved me hours of trying as I'm not really at home with npm and/or TypeScript
This also caught me - definitely should be added to docs
@Crumzor 's walkthrough is perfect. Thank you!
The Official Guide misses two node modules that are needed to be installed manually:
For googlers, anyone encountering this error on Firefox will instead receive the message, "TypeError: path is null".
The fix proposed by @Crumzor was 99% the fix for me - the CSS I needed was a little different:
#root {
height: 100vh;
}
#root > div {
height: 100vh;
}
can someone tell me the steps for fixing the issue, it is very annoying? I am trying to add something like a icon on label. Thank you in advance!!!!
Hi, i am unable to get the demo running.
I followed @cesarecaoduro post and have the same setup running. However, in my case I am not even getting to the blank screen. Instead react is throwing the error "TypeError: Cannot read property 'getTotalLength' of null".
Any ideas? Otherwise looks really cool. Would love to give it a shot at a process documentation project I am working on. Thanks.