React-diagrams: Link Arrowhead

[mathiasbaldissera]

I'm trying to create a link with arrowhead to use on UML Diagrams, but all examples shown in issue #183 aren't working on actual commit (waste more than 24h working on it). Is there another way to create an arrowhead?

[frank-martinez-27]

@mathiasbaldissera did you find a way to create the arrowheads?

[mathiasbaldissera]

@frank-martinez-27 Yes, I did.I'm actually a little busy with my job, but if you can wait until Saturday, I'll post an example at my github, explaining how to do this

[frank-martinez-27]

@mathiasbaldissera awesome!! Thank you!!!

[KyDenZ]

Hello,

did you have time to advance on your repertoire? I'm also interested.

Thanks

[vimaranes]

@frank-martinez-27 Yes, I did.I'm actually a little busy with my job, but if you can wait until Saturday, I'll post an example at my github, explaining how to do this

Hello @mathiasbaldissera ,

Did you post an example on github ? Would help alot !

thanks anyway for your time

[mathiasbaldissera]

I really forget it, sorry
I'll work now on the example.
I already have an example of editable nodes, and i'll update that.
https://github.com/mathiasbaldissera/react-diagrams-custom-elements
Keep an eye on it. I'll migrate this project to version 6 too

[mathiasbaldissera]

I've commited the links with arrowhead, i'm using the code of the RightAngleLink and some more. I need to work in the documentation, but i'm without time now.
Take a look at the 'src/components/custom_links/arrowhead' folder and files inside it (a factory, a model and a widget)
It's a little buggy now, but i'll fix it later

https://github.com/mathiasbaldissera/react-diagrams-custom-elements

[vimaranes]

I've commited the links with arrowhead, i'm using the code of the RightAngleLink and some more. I need to work in the documentation, but i'm without time now.
Take a look at the 'src/components/custom_links/arrowhead' folder and files inside it (a factory, a model and a widget)
It's a little buggy now, but i'll fix it later

https://github.com/mathiasbaldissera/react-diagrams-custom-elements

Thank you a lot for your help. Very good job 👍

[KyDenZ]

I am currently watching. Thank you very much !

I'm trying to understand why when the arrow goes from right to left and the line is perfectly horizontal, the head of the arrow is in the wrong direction.

[mathiasbaldissera]

I am currently watching. Thank you very much !

I'm trying to understand why when the arrow goes from right to left and the line is perfectly horizontal, the head of the arrow is in the wrong direction.

It's because the right-angle link will always have 3 segments (like an U / |_| ), and the arrow will use the angle of the start and end segments, even if those have 0,00000000001px. If u use it with the default link, it'll be with the correct angle

(sorry for my bad english)

[khoaanh2212]

hi @mathiasbaldissera .
Do you have version code for js6.it's so really hard for me(new with ts) to apply your solution.thanks.
this is my demo render react-diagram
```javascript
import React from 'react';
import {
DiagramWidget,
DiagramEngine,
// DefaultNodeFactory,
// DefaultLinkFactory,
DiagramModel,
DefaultNodeModel,
// DefaultPortModel,
// LinkModel,
} from 'storm-react-diagrams';
import styled from 'styled-components';
import 'storm-react-diagrams/dist/style.min.css';

const Wrapper = styled.div .srd-diagram { height: 80vh; background-color: rgb(60,60,60); } ;

class DemoOne extends React.Component {
constructor(props) {
super(props);
this.state = {};
}

componentWillMount() {
// 1) setup the diagram engine
this.engine = new DiagramEngine();
this.engine.installDefaultFactories();

// 2) setup the diagram model
const model = new DiagramModel();

// 3) create a default node
const node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
const port1 = node1.addOutPort('Out');
node1.setPosition(100, 100);

// 4) create another default node
const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
const port2 = node2.addInPort('In');
node2.setPosition(400, 100);

// 5) link the 2 nodes together
const link1 = port1.link(port2);
link1.addLabel('Hello');

// 6) add the models to the root graph
model.addAll(node1, node2, link1);

// 7) load model into engine
this.engine.setDiagramModel(model);

}

render() {
return (



);
}
}

export default DemoOne;

[mathiasbaldissera]

@khoaanh2212 I really don't have a JS6 version. I encourage you to learn TypeScript, it helps a lot to not break your code (static typing is good for something). But if you want help to create a link with Arrowhead, please, share your link code, not only the diagram one.

[khoaanh2212]

hi @mathiasbaldissera ,
i've just begun to use react-diagram,and all code about react-diagram,i've just create a demo like i send you.for now my project which will use react-diagram build all by js6,so that's why i'm really need your help for a version with js6.
thank you so much @mathiasbaldissera .