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

edges should be clipped to actual outline of node #99

Open
gordonwoodhull opened this issue Dec 29, 2018 · 4 comments
Open

edges should be clipped to actual outline of node #99

gordonwoodhull opened this issue Dec 29, 2018 · 4 comments

Comments

@gordonwoodhull
Copy link
Contributor

I guess this is difficult because we need to know the exact SVG definition of stroke width, miters and bevels.

But I think we can do better than what we are doing right now, which is

  1. intersect with the exact geometric shape, as if it were drawn with 0px stroke width

    dc.graph.js/src/shape.js

    Lines 713 to 715 in 96496f2

    intersect_vec: function(n, deltaX, deltaY) {
    return point_on_polygon(n.dcg_points, 0, 0, deltaX, deltaY);
    },
  2. add half the node stroke width to the arrow length when chopping the splines

    dc.graph.js/src/diagram.js

    Lines 2108 to 2113 in 5536eac

    var headLength = arrowSize *
    (arrow_length(arrow_parts(_arrows, _diagram.edgeArrowhead.eval(e)), stemWidth) +
    _diagram.nodeStrokeWidth.eval(e.target) / 2),
    tailLength = arrowSize *
    (arrow_length(arrow_parts(_arrows, _diagram.edgeArrowtail.eval(e)), stemWidth) +
    _diagram.nodeStrokeWidth.eval(e.source) / 2);
@gordonwoodhull
Copy link
Contributor Author

There's no way to get this right

screen shot 2018-12-28 at 10 00 14 pm

@gordonwoodhull
Copy link
Contributor Author

But we could get these right, or better anyway

image

image

@gordonwoodhull
Copy link
Contributor Author

Oddly enough, we do take node stroke width into account when placing ports for parallel edges (but only parallel), via source_padding and target_padding below:

dc.graph.js/src/shape.js

Lines 525 to 541 in 96496f2

sp = bss.port;
tp = bst.port;
var sdist = Math.hypot(sp.x, sp.y),
tdist = Math.hypot(tp.x, tp.y),
c1dist = sdist+source_padding/2,
c2dist = tdist+target_padding/2;
var c1X = sx + c1dist * Math.cos(bss.ang),
c1Y = sy + c1dist * Math.sin(bss.ang),
c2X = tx + c2dist * Math.cos(bst.ang),
c2Y = ty + c2dist * Math.sin(bst.ang);
points = [
{x: sx + sp.x, y: sy + sp.y},
{x: c1X, y: c1Y},
{x: c2X, y: c2Y},
{x: tx + tp.x, y: ty + tp.y}
];
bezDegree = 3;

But how does this make any sense at all? Looks like the radius is divided twice, how come this mostly works?

dc.graph.js/src/diagram.js

Lines 2088 to 2091 in 96496f2

var source_padding = source.dcg_ry +
_diagram.nodeStrokeWidth.eval(source) / 2,
target_padding = target.dcg_ry +
_diagram.nodeStrokeWidth.eval(target) / 2;

image

@gordonwoodhull
Copy link
Contributor Author

I'm not sure that the parallel edge code is using node stroke width effectively, because the same spline-chopping and marker-offsetting happens for parallel edges and they look just about as embedded as the other arrows

image

It's really unclear to me what that code does.

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