React-diagrams: TypeError: Cannot read property 'getTotalLength' of null

Created on 2 Jun 2020  路  4Comments  路  Source: projectstorm/react-diagrams

testing the library with the example found in the documentation presents me with the following error

TypeError: Cannot read property 'getTotalLength' of null

`import React from 'react';
import logo from './logo.svg';
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; // Archivo CSS de Bootstrap 4
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'; // Archivo Javascript de Bootstrap 4 npm audit
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(port2);
link.addLabel('Hello World!');

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

function App() {
return (



logo



);
}

export default App;
`

duplicate

Most helpful comment

I am seeing the same behavior. I'm following the introductoy tutorial here: https://projectstorm.gitbook.io/react-diagrams/getting-started. If I comment out the line:

link.addLabel('Hello World!');

The demo works. If I add the label, however, I get the same TypeError:

TypeError: Cannot read property 'getTotalLength' of null

All 4 comments

Seems like a duplicate of both #598 and #618... have you checked these?

Looks like I'm running into this as well with the basic example from the docs.

I am seeing the same behavior. I'm following the introductoy tutorial here: https://projectstorm.gitbook.io/react-diagrams/getting-started. If I comment out the line:

link.addLabel('Hello World!');

The demo works. If I add the label, however, I get the same TypeError:

TypeError: Cannot read property 'getTotalLength' of null

Same issue here. Removing link.addLabel('Hello World!'); solved it for me.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Naveenraj006 picture Naveenraj006  路  3Comments

jardg picture jardg  路  3Comments

gugaevkirill picture gugaevkirill  路  3Comments

schecter22107 picture schecter22107  路  3Comments

ganesh-sankey picture ganesh-sankey  路  4Comments