links not complete when creating links using srcPort.link(targetPort)

[abtExp]

The Links created using the port.link method doesn't completely connect to the target port, instead it breaks near the node. although it is attached to the port and moves when the node is moved, but visually it's not connected to the port.

Here's the css `.srd-demo-canvas{ background: #ddd; width:100%; height:100%; overflow:scroll; } .srd-default-node{ background:#fff; margin:20px auto; text-align: center; font-family: monospace; min-width:200px; overflow: hidden; color:#fff; border-radius: 5px; box-shadow: 0px 0px 4px #333; } .srd-diagram { position: relative; flex-grow: 1; display: flex; cursor: move; overflow: hidden }

.srd-diagram__selector { position: absolute; background-color: rgba(0,192,255,0.2); border: solid 2px #00c0ff }

.srd-link-layer { position: absolute; height: 100%; width: 100%; transform-origin: 0 0; overflow: visible !important; top: 0; bottom: 0; left: 0; right: 0 }

.srd-node-layer { top: 0; left: 0; right: 0; bottom: 0; position: absolute; pointer-events: none; transform-origin: 0 0; width: 100%; height: 100% }

.srd-node { position: absolute; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: move; pointer-events: all }

.srd-node--selected>* { border-color: #00c0ff !important }

.srd-port { width: 15px; height: 15px; border-radius:200px; border:2px solid #333; margin:5px; background: rgba(255,255,255,1); }

.srd-port:hover,.srd-port.selected { background: #c0ff00 }

.srd-default-node__title { background:#fff; font-weight: bold; color:#333; display: flex; width:100%; padding:10px; height:100%; }

.srd-default-node__title>* { align-self: center }

.srd-default-node__title .fa { padding: 5px; opacity: 0.2; cursor: pointer }

.srd-default-node__title .fa:hover { opacity: 1.0 }

.srd-default-node__name { padding: 5px 5px; margin:auto; cursor:text; max-width:50%; }

.srd-default-node__ports { display: flex; }

.srd-default-nodein,.srd-default-nodeout { flex-grow: 1; display: flex; flex-direction: row; }

.srd-default-node__in{ background:rgb(38, 228, 95); }

.srd-default-node__out{ background: rgb(255, 41, 41); }

.srd-default-port { display: flex; box-shadow:0px 0px 1px #333; padding:5px; width:100%; }

.srd-default-port>* { align-self: center; }

.srd-default-port__name { padding: 5px; }.srd-default-port--out { justify-content: flex-start; }

.srd-default-port--out .srd-default-port__name { justify-content: flex-start; text-align: right; }

.srd-default-label { background: rgba(70,70,70,0.8); border: 1px solid #333; border-radius: 4px; color: #fff; display: inline-block; font-size: smaller; padding: 5px }

@keyframes dash { from { stroke-dashoffset: 24 }

to {
    stroke-dashoffset: 0
}

}

.srd-default-link path { fill: none; pointer-events: all }

.srd-default-link--path-selected { stroke: #00c0ff !important; stroke-dasharray: 10,2; animation: dash 1s linear infinite }

.srd-default-link__label { pointer-events: none }

.srd-default-link__label>div { display: inline-block; position: absolute }

.srd-default-link__point { fill: rgba(255,255,255,0.5) }

.srd-default-link--point-selected { fill: #00c0ff } `

Although, when i select and drag the link to the target port, the link connects fine.

[shortwavedave]

I ran into this too, not sure what to do

[kennethbruskiewicz]

I get this kind of disconnected link error, when creating a link using model.addLink or model.addAll.

This doesn't happen when the component is first mounting (the test nodes work fine) but it happens when I do subsequent re-renders in a useEffect hook?

I've noticed that when I click on a Port Widget used by the JSCustomModeModel in the example package, the link's position maps onto the proper port.

As a hack I'm going to see if I can fire the click event whenever a new link is created proper, but I'd really want to get to the bottom of why this happens.

[stanislav-grin]

This helped me.

svg {
    overflow: unset;
}