Connecting element to another element inside a grid will result in arrows overlapping shapes

[himazawa]

I noticed that using Dagre and ELK (and partially TALA) while linking an element to another that is inside a grid will result in a broken diagram.

This works correctly:

parent: {
  label: ""
  grid-columns: 1
  child1: {
    label: child1
  }

  child2: {
    label: child1
  }
}

parent2: {
  grid-columns: 1
  child1
  child2
}
parent3: {
  grid-columns: 1
  child1
  child2
}

user: {
  shape: person
}

user -> parent2
user -> parent

But when linking to the element inside the grid:

parent: {
  label: ""
  grid-columns: 1
  child1: {
    label: child1
  }

  child2: {
    label: child1
  }
}

parent2: {
  grid-columns: 1
  child1
  child2
}
parent3: {
  grid-columns: 1
  child1
  child2
}

user: {
  shape: person
}

user -> parent2
user -> parent.child1

instead of having just a longer arrow it will result in this:

This issue is causing arrows to overlap with shapes in ELK and Dagre, in TALA doesn't but moves the shape in an unintended way (probably to avoid overlapping with the label):

TALA to parent:

TALA to child:

[bo-ku-ra]

i believe this is a specification.

user: {
  shape: person
}

parent: {
  label: ""
  grid-columns: 1
  child1: {
    label: child1
  }

  child2: {
    label: child1
  }
}

parent2: {
  grid-columns: 1
  child1
  child2
}
parent3: {
  grid-columns: 1
  child1
  child2
}

user -> parent2
user -> parent.child1

or

user: {
  shape: person
}

dummy: "" {
  style.opacity: 0
  parent: {
    label: ""
    grid-columns: 1
    child1: {
      label: child1
    }

    child2: {
      label: child1
    }
  }

  parent2: {
    grid-columns: 1
    child1
    child2
  }
  parent3: {
    grid-columns: 1
    child1
    child2
  }
}
user -> dummy.parent2
user -> dummy.parent.child1

[himazawa]

@bo-ku-ra the issue still exists tho. Because the arrows pointing to child1 are straight.

From your example, adding a link to another child will break anyway:

user: {
  shape: person
}

parent: {
  grid-columns: 1
  child1
  child2
}

parent2: {
  grid-columns: 1
  child1
  child2
}
parent3: {
  grid-columns: 1
  child1
  child2
}

user -> parent2.child2
user -> parent.child1

[bo-ku-ra]

indeed, it is nicer when not straight.