Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow more control over cubic-curve styled edges #22

Open
barrybecker4 opened this issue May 11, 2024 · 2 comments
Open

Allow more control over cubic-curve styled edges #22

barrybecker4 opened this issue May 11, 2024 · 2 comments

Comments

@barrybecker4
Copy link

barrybecker4 commented May 11, 2024

Currently, when the edges of a graph are styled with
shape: cubic-curve;
they are curved in a seemingly arbitrary way and it rarely looks how I want.
For example, here is a graph where the edges are styled with cubic-curve:
image
Note that there are discontinuities at the nodes because the Bezier control vectors are either horizontal or vertical and determined by the angle between the source and destination vertices.

What I propose is a simple backward compatible change that would allow optionally specifying a control point for an edge that would determine the quadratic Bezier to use for its curvature like this:
image

If an edge has the "ui.control-point" attribute set, then the edge renderer will draw a quadratic Bezier curve using that control point. The implementation is simple, and will give a lot of extra control. I will make a PR.

After adding the control point, I can get the curved edges to look they way that I want.
image

@barrybecker4
Copy link
Author

PR - #23

@barrybecker4
Copy link
Author

I found a workaround for doing what I want without needing to make any code change. I can use the existing "ui.points" attribute on a node in conjunction with the "cubic-curve" style. For my case, I just want to have the middle 2 (of the 4) points be the same value (my control point).
It seems a little bit redundant to have to specify the first and last points in the list of 4 points because, as far as I know, they will always be the position of the source and target nodes of the edges, respectively.

My helper code to do what I want is

    private void setEdgePoint(Edge edge, double x, double y) {
        Object[] src = edge.getSourceNode().getAttribute("xyz", Object[].class);
        Object[] dst = edge.getTargetNode().getAttribute("xyz", Object[].class);
        edge.setAttribute("ui.points",
                src[0], src[1], 0.0,
                x, y, 0,
                x, y, 0,
                dst[0], dst[1], 0
        );
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant