terrastruct / d2

D2 is a modern diagram scripting language that turns text to diagrams.
https://d2lang.com
Mozilla Public License 2.0
16.51k stars 414 forks source link

why do the arrows not vertically center on images? #1464

Open alixander opened 1 year ago

alixander commented 1 year ago
Screen Shot 2023-07-03 at 12 39 16 AM
direction: right

style: {
  fill: transparent
}

classes: {
  rare: {
    shape: image
    icon: https://raw.githubusercontent.com/frederic-loui/RARE-web/automated-update/docs/img/rare.svg
    width: 32
    height: 32
  }
  xrd: {
    shape: image
    icon: https://raw.githubusercontent.com/frederic-loui/RARE-web/automated-update/docs/img/xrd.svg
    width: 32
    height: 32
  }
  vr-xrv9k: {
    shape: image
    icon: https://raw.githubusercontent.com/frederic-loui/RARE-web/automated-update/docs/img/vr-xrv9k.svg
    width: 32
    height: 32
  }
  linux: {
    shape: image
    icon: https://raw.githubusercontent.com/frederic-loui/RARE-web/automated-update/docs/img/linux.svg
    width: 32
    height: 32
  }
  crpd: {
    shape: image
    icon: https://raw.githubusercontent.com/frederic-loui/RARE-web/automated-update/docs/img/crpd.svg
    width: 32
    height: 32
  }
}

r1.class: rare
r2.class: rare

r1 <-> r2: {
  source-arrowhead.label: eth1
  target-arrowhead.label: eth1
}

https://play.d2lang.com/?script=xFTNaoQwEL4H8g7zAklYe2oohR76AvsG2STV0NXImLhC8d1LRi2sp3ryIowzzvfjzPwZpgGLNM44o9YafjgDKFZpoJa9Qd8lzuZSs7q_VqHB7QMAEqQhtKb2y5vikIYmpX7QSqF5yDqkJt_y4NHGLvkuSRtb9YXeeQxW3GMO6vpx_RQPf1Mmp0iDIHLvTPLKRTuo0Naq4MphrBcYEqThpVrC5V9t8VweE7ozaE7ojrAcUUw4vn6fQXXDPsL3Hro8nUGWgI8wtdifMgAF9_88acHwImnHNC0XZ1g9x6UC3sQ7YLUq2t8QSedIg0_NpeT3x-I5P3P2GwAA__8%3D&

gavin-ts commented 1 year ago

Looks to be related to how we reserve the space for outside bottom labels on images. without labels it looks as expected:

Screen Shot 2023-07-03 at 10 48 28 AM

https://play.d2lang.com/?script=xJRBbrQwDIX3PoXFHiL4V79VVeqiF5gbZJIUog4EmYRBqrh7FUMrzaxY0aUh8vves-zfwAg5WwOQxoRfgJhzIpR-o2Y3RFgB9ty3F6x5f4soRgh9r1snH3IwhF2M40RKsb5XrY9duqbJsQlDdEOsTOjVBzvr2JvyFpJXl7fLe3l3V6VTDDL_Mo1WR6dsMJPyfauyajXNraiIDcJ_jVTbgPZyBcSF7fmAC9ujfDOXC8__P8-H_FE-SnrzQ1rOxxTZo4yGxz8Yd1Y9RrgCcF3JCpEsD3DzUALX-FK-IjebjefDUMmNIXSxqwHx-QA8_F6Ba8KigNysKOA7AAD__w%3D%3D&layout=dagre&

gavin-ts commented 1 year ago

We may no longer need to increase the height for these before passing to dagre if I can successfully control the size of containers with a "phantom" node in #1453. Hmm but we still need enough spacing between nodes if the labels are tall and something is below

gavin-ts commented 1 year ago

elk still has this issue

frederic-loui commented 1 year ago

Hi @gavin-ts and @alixander , i confirm that d2 v0.6.0 corrected the issue. At least for dragre. Thanks ! Feel free to close it or create another one or refer to an existing one such as #1453 for elk. Anyway awwsome job and kudos to d2 crew!

bo-ku-ra commented 1 year ago

dagre (imagine images with a blank bottom side.) https://play.d2lang.com/?script=XFJLboQwDN37FL5AiIburKpSF73A3CAEFyIVghyns6i4exVDKzFLw3v2--Q_NEJp9gBsOeEPILasCG3nFoRXhR3gzP5ASJATi2hmCNMSJrYPLRzCWXUr5L2ERzclnetQC0vMq_KqXcyL_xQeWVJ0X7kmf3-_f7gHDz5UzfYGXN3GoOzHHItPy-Tb1a58T3bFbBC-9DYdJZ3j3vTKrTPJZGLbaFV1rRXCXLWkkZ3mzUVelQWkvxL6C2HIqnn5w4Lc8NW9ofRHCs9dHlRC1vkGiM-dXX7v8BsAAP__&

frederic-loui commented 1 year ago

That is weird, I generate ~ 2300+ d2 diagram with 0.6.0 and then convert them to SVG.

All diagrams seemed to be fine:

https://docs.rare.geant.org/guides/reference/md/conn-amt01

I'll let @gavin-ts comment then ...

Le mar. 8 août 2023 à 18:03, bokura @.***> a écrit :

dagre

https://play.d2lang.com/?script=XFJLboQwDN37FL5AiIburKpSF73A3CAEFyIVghyns6i4exVDKzFLw3v2--Q_NEJp9gBsOeEPILasCG3nFoRXhR3gzP5ASJATi2hmCNMSJrYPLRzCWXUr5L2ERzclnetQC0vMq_KqXcyL_xQeWVJ0X7kmf3-_f7gHDz5UzfYGXN3GoOzHHItPy-Tb1a58T3bFbBC-9DYdJZ3j3vTKrTPJZGLbaFV1rRXCXLWkkZ3mzUVelQWkvxL6C2HIqnn5w4Lc8NW9ofRHCs9dHlRC1vkGiM-dXX7v8BsAAP__&

— Reply to this email directly, view it on GitHub https://github.com/terrastruct/d2/issues/1464#issuecomment-1669893488, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACJROB4QLED6LL42E4TCQDTXUJPLRANCNFSM6AAAAAAZ4B2PYU . You are receiving this because you commented.Message ID: @.***>

bo-ku-ra commented 1 year ago

i think this is not considering the inside label.