d2 icon indicating copy to clipboard operation
d2 copied to clipboard

Predictable positioning for nesed elements in ELK/TALA

Open terlar opened this issue 1 year ago • 0 comments

As seen in example2 the nodes render in the order they are defined (ELK) and thus the connections look nice, however in example1 they render to the side even though they were defined in a specific order: https://play.d2lang.com/?script=hJC9CsIwEMf3e4qbBQs6dnBxdfIN0niWQLyUGEGRvrvkyxgw7VDu-s99_H9HT3GbNO16fAOisWpUDD57OLKnq_O5NOyEYrKxCFGLgXSPx6xDUImdfU1GsYv_bC50zy2IIsUhRRniDP7LC89j6I02cHsoq7uf6fhX9uVf1-2Sogd_3WZtnPc0A6RD7ZcOVXms8CN8RJfLyNWQJl79UFCaAJ8AAAD__w%3D%3D&layout=elk

example1: {
  origin

  outerLft

  container: {
    label: Container

    entrypoint

    nodes: {
      a
      b
      c
    }
  }

  outerRgt

  origin -> container.entrypoint
  container.entrypoint -> outerLft
  container.entrypoint -> container.nodes.*
  container.entrypoint -> outerRgt
}

example2: {
  origin

  outerLft

  entrypoint
  nodes: {
    a
    b
    c
  }

  outerRgt

  origin -> entrypoint
  entrypoint -> outerLft
  entrypoint -> nodes.*
  entrypoint -> outerRgt
}

I found one way to work around this, which is some kind of hack, best would be if it could render in this way out of the box, but if not possible, maybe we should introduce some kind of waypoint element, that you can use to steer the lines, a possibility is to use near and grid but currently those change the line drawing as mentioned in my other issue.

https://play.d2lang.com/?script=dE8xTsQwEOz3FaMrkRIhShc0tFT8wJcsyYrIjuw9QYTu78jrc7jiUnjlGY93ZobF58zZ4ZeA6SIj1yuw-DMvDqf-ZDDPfmUH5R81PLNMszo8G_qWUWeHl4qybsu-B4irH0S3pi3vKX5xd_tU2SuVcyWKSSYJRPGinN4_lWiIQb0ETnXlLdhbY4kADpq2NUrQgkIcWyXA2zzbHMykNe2tvKvArIvlx6QtBLpX7Ob9nccjsoj3zEeCf94y9k90IO3upJZvX1_y_QUAAP__&layout=elk

classes: {
  guide: {
    label: "."
    shape: text
    height: 0
    width: 20
    style: {
      opacity: 0
      stroke-width: 0
    }
  }
}

origin

outerLft

container: {
  label: Container

  entrypoint

  nodes: {
    a
    b
    c
  }

  guide.class: guide
}

outerRgt

origin -> container.entrypoint
container.entrypoint -> outerLft
container.entrypoint -> container.nodes.*

container.entrypoint -- container.guide -> outerRgt

This hack actually gave an API error with TALA.

terlar avatar Jul 09 '24 08:07 terlar