Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Label positioning on link between 2 ports (nodes) not working #967

Closed
BuzzyLizzy opened this issue Oct 28, 2022 · 3 comments
Closed

Label positioning on link between 2 ports (nodes) not working #967

BuzzyLizzy opened this issue Oct 28, 2022 · 3 comments

Comments

@BuzzyLizzy
Copy link

BuzzyLizzy commented Oct 28, 2022

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>
	);
};

Screenshot 2022-10-28 110828

@BuzzyLizzy
Copy link
Author

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)

@BuzzyLizzy
Copy link
Author

I found the problem, I wrapped the diagram inside this:
<React.StrictMode> .... the diagram ..... </React.StrictMode>
when I removed that it started working correctly.

@sovetski
Copy link

I found the problem, I wrapped the diagram inside this: <React.StrictMode> .... the diagram ..... </React.StrictMode> when I removed that it started working correctly.

This is not a good solution, you should keep it: https://react.dev/learn/keeping-components-pure#detecting-impure-calculations-with-strict-mode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants