Skip to content

Feature: EdgePainter paint between node widgets' edge #43

@PatrickStar125

Description

@PatrickStar125

Why need this feature

Hi, cupofme. I wanna thank for your work that helps me a lot. Now I am wodering how to draw lines not from the center position but node widgets' edge, but I find it hard to implement this with only a paint method in EdgePainter.
Effect example:
image

My workaround

(Offset, Offset) _toEdgePosition(
    Offset src,
    Offset dest,
    double srcSize,
    double destSize,
  ) {
    final delta = dest - src;
    final mu = delta / delta.distance;
    final destEdgeOffset = mu * destSize / 2;
    final srcEdgeOffset = mu * srcSize / 2;
    return (src + srcEdgeOffset, dest - destEdgeOffset);
  }

Providing source and destination size I can calculate the offset.

@override
void paint(Canvas canvas, Size size) {
  if (!controller.canLayout) {
    return;
  }

  final layout = controller.layout;
  final edges = controller.edges;

  for (final edge in edges) {
    var src = layout.getPosition(edge.source);
    var dest = layout.getPosition(edge.destination);
    if (configuration.isEdgePositioned) {
      (src, dest) = _toEdgePosition(
        src,
        dest,
        edge.source.size,
        edge.destination.size,
      );
    }
    configuration.edgePainter.paint(
      canvas,
      edge,
      src,
      dest,
    );
  }
}

Then I can achieve the effect above. But I don't think my workaround is a good idea, this function is only for circle container.

My thought

Maybe a more custom EdgePainter like NodeViewBuilder can do more effects such as MoreRegion or GestureDectector. And I am trying for it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions