Connections at the React project crush each other

@ahmetgundogdu wrote:

Hello,
There are two nodes and there are 4 ports on them.
Two points are connected to each other from different nodes.
Among these nodes, trying to find the shortest path when different points are reconnected.
RelikingTool change connection start and end points.
The examples on the links are working correctly.

https://gojs.net/latest/samples/flowchart.html
https://gojs.net/latest/extensions/SnapLinkReshaping.html

I am doing an example :
LnikTemplate
this.Diagram.linkTemplate =
goMake(go.Link,
{
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
routing: go.Link.AvoidsNodes,
// adjusting: go.Link.Stretch,
curve: go.Link.JumpOver,
corner: 5,

                //mouse-overs subtly highlight links:
                mouseEnter: function (e: any, link: any) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
                mouseLeave: function (e: any, link: any) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
            },
            new go.Binding("points").makeTwoWay(),
            //new go.Binding("routing", "routing", go.Binding.parseEnum(go.Link, go.Link.AvoidsNodes))
            //    .makeTwoWay(go.Binding.toString),
            goMake(go.Shape,  // the highlight shape, normally transparent
                { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
            goMake(go.Shape,  // the link path shape
                { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
            goMake(go.Shape,  // the arrowhead
                { toArrow: "standard", stroke: "gray", fill: "gray" }),

        );
    this.Diagram.addDiagramListener("LinkDrawn", (e: go.DiagramEvent) => { });
    this.Diagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    this.Diagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

NodeTemplate:
this.Diagram.nodeTemplate =
goMake(go.Node, "Spot", this.nodeStyle(),
new go.Binding("location", "location"),
goMake(go.Panel, "Vertical",
{ fromLinkable: true, toLinkable: true, cursor: "pointer", },
goMake(go.Picture, {
maxSize: new go.Size(100, 100),
},
new go.Binding("source", "iconSource")),
goMake(go.TextBlock,
{
textAlign: "center",
font: "bold 11pt Helvetica, Arial, sans-serif",
wrap: go.TextBlock.None,
width: 150,
editable: true
},
new go.Binding("text", "caption"))
),
makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true),

        );

return nodeStyle:
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
avoidable: false,
fromLinkableSelfNode: true, toLinkableSelfNode: true,
background: "aliceblue",
selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
locationSpot: go.Spot.Center,
mouseEnter: function (e: any, obj: any) { me.showPorts(obj.part, true); },
mouseLeave: function (e: any, obj: any) { me.showPorts(obj.part, false); }
}

Could it be because of react ?

Posts: 2

Participants: 2

Read full topic