klayjs icon indicating copy to clipboard operation
klayjs copied to clipboard

Incorrect end points with cross hierarchical edges and node padding

Open robclouth opened this issue 9 years ago • 7 comments

Hi, I need a sub graph to have padding to ensure there will be space above it to put some other controls. But when I set the padding to a non-zero value, the edges going into and out of that sub graph ignore it, causing a misalignment.

To see this, look at the hierarchy2 demo and add a top padding to the sub graph. You'll see that the edge placement is wrong. Is this a bug or is there some setting I'm missing?

Thanks

robclouth avatar Apr 26 '16 15:04 robclouth

I suspect it's a bug. I'll check it and let you know once I know more. Could be related to KIPRA-1767.

uruuru avatar Apr 26 '16 16:04 uruuru

Thanks!

robclouth avatar Apr 26 '16 17:04 robclouth

Actually, the padding values are not automatically added to the bend points (neither to the child nodes). Have a look at the coordinate system of the KGraph. There the padding is called insets but has the same effect. So as long as you use the relative coordinates, you have to add the insets/padding yourself.

Your modification of the hierarchy2 example resulted in wrong positions because there was a bug in the d3 extension. It didn't consider the padding when computing absolute coordinates. I added a padding example.

Let me know if this resolves your issues.

uruuru avatar Apr 27 '16 13:04 uruuru

Ah right, ok. I'm not actually using D3, but I can use the toAbsolute code in the d3 extension for my use. Thanks for this library btw, it's brilliant. I'm using it for an open source node based shader editor in React Native. Oh and speaking of which, if klay.js is used in React Native it continuously fires off errors because it attaches to a messaging system that it shouldn't. Other than that it worked perfectly! To get it to work I had to comment out the eventListener line shown below (line 1987)

function GP(){var b={
    'layout':function(a){Rxb(IP(a))}};
    if(typeof klayregister===Zxb){
        klayregister(b)}
        else{typeof document!==Czb&&($wnd.$klay=b);
            typeof module===Sxb&&module.exports&&(module.exports=b);
            //typeof document===Czb&&typeof self!==Czb&&self.addEventListener('message',function(a){b.layout(a.data)},false)
        }
    }

robclouth avatar Apr 27 '16 14:04 robclouth

Thanks, we do our best :). Regarding the eventListener issue: If I'm correct, that line is supposed to register the script if and only if a web worker is used. See line 66 in [1]. In case you know what the correct way is in your case, I can fix it.

[1] Script Registration

uruuru avatar Apr 27 '16 14:04 uruuru

The thing is React Native passes both the nodejs test and the webworker test. Could the tests be 'else if' instead, so that two can't pass?

robclouth avatar Apr 27 '16 15:04 robclouth

Probably, though I feel as if we had an 'else if' somewhere and had to remove it for something else to work (see #3).

uruuru avatar Apr 27 '16 15:04 uruuru