You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Followed the basic demo example, the label does not work it is not on the line of the link between the 2 nodes, but in the top left corner of the canvas, here is my code, exactly that of the demo:
import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
import * as React from 'react';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
export default () => {
//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);
//6) render the diagram!
return (
<DemoCanvasWidget>
<CanvasWidget engine={engine} />
</DemoCanvasWidget>
);
};
The text was updated successfully, but these errors were encountered:
I can additionally add that I am getting this error in the Chrome inspector:
Uncaught TypeError: Cannot read properties of null (reading 'getTotalLength')
at LabelWidget.tsx:43:1
at Array.map (<anonymous>)
at LabelWidget.findPathAndRelativePositionToRenderLabel (LabelWidget.tsx:43:1)
at LabelWidget.calculateLabelPosition (LabelWidget.tsx:67:1)
I found the problem, I wrapped the diagram inside this:
<React.StrictMode> .... the diagram ..... </React.StrictMode>
when I removed that it started working correctly.
I found the problem, I wrapped the diagram inside this: <React.StrictMode> .... the diagram ..... </React.StrictMode> when I removed that it started working correctly.
Followed the basic demo example, the label does not work it is not on the line of the link between the 2 nodes, but in the top left corner of the canvas, here is my code, exactly that of the demo:
The text was updated successfully, but these errors were encountered: