gorenje / node-red-flowviewer-js

Code for an Unofficial Node-RED inline flow viewer
https://blog.openmindmap.org/blog/backticks-in-markdown-and-node-red
Other
10 stars 1 forks source link

Link Connection Positioning #3

Closed joepavitt closed 12 months ago

joepavitt commented 12 months ago

Just an FYI as making further progress with embedding into flows.nodered.org that I spotted an issue that I believe I introduced, and you may have caught when doing the merge, but wanted to flag just in case:

The link nodes had their connection port misplaced as I had removed the ...transAndPath (at around line 1528 for me)

var transAndPath = {
    transform: (obj.type == "link in" ? "translate(25,10)" : "translate(-4,10)"),
    d: "M 0.5,9.5 9.5,9.5 9.5,0.5 0.5,0.5 Z",
}

if (renderOpts["arrows"] && (obj.type == "link out")) {
    transAndPath = {
        transform: (obj.type == "link in" ? "translate(27,10)" : "translate(-3,10)"),
        d: "M 0,10 9,5 0,0 Z",
    }
}

/* add output decoration after computing the bounding box - the decoration extends the bounding box */
$(grpObj).append(getNode('rect', {
    ...clr,
    ...portDimensions,
    ...portRadius,
    class: (obj.type == "link in" ? "output-deco" : ("input-deco" + (renderOpts.arrows ? " input-arrows" : ""))),
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    ...transAndPath
}));

Adding that last line back in fixes the positioning

gorenje commented 12 months ago

Thanks for the heads-up, I did pick that up and added a transform in there. I also removed the stroke-linecap and stroke-linejoin since the ports are now rectanges, these have no affect.