Feature: make animated connections w/o dashed lines have icons

[danielsuh05]

Got this from looking at issue #1461.

Just some brainstorming, what would the syntax look like? Putting animated: true makes the line dashed automatically, so how would we differentiate whether the user wants a dashed line or a line with a moving icon? I'd like to take this issue if possible as well.

[alixander]

I think #12 is a pre-req to this.

Once connections have icons, animated: true can animate the icon instead of dashed line.

[danielsuh05]

Sorry, a bit confused about what #12 is asking for. Does it mean add the ability for D2 to add an icon along a path? For example, there would be some style such that you could put a circle at any point along the path?

[alixander]

https://play.d2lang.com/?script=qlDQtVOotFKo5lJQUFZwyU8tVsjLL8nIzEvnUlDITM7Ps1LIKCkpKLbS1wfxivVKUouKEotLikqTS_SS83P1U4uLU_NKMhNzilWN3IwMjXUTcxKLcvWKy9K5arm4qmAml-cXZRdTw0hAAAAA__8%3D&

[bo-ku-ra]

@alixander
such as using a character instead of an icon.
https://play.d2lang.com/?script=qlDQtVOotFJQKkpNzFHISUxKzVFSqOZSUFBWcMlPLVbIyy_JyMxL51KAyFkpKD2a3q-koJyWX6SQmJeZm1iSmZ-noKGQWqGH4OuiqNXkquUCBAAA__8%3D&

[alixander]

Yeah I know a label can do that, but I think it'd be common for users to want a label AND an icon while animating. So I don't want to animate the label

[bo-ku-ra]

yes, so as follows

x -> y:  {
  label: "real label"
  style.animated: true;
  style.animation-label: "●" 
}

[alixander]

Why introduce a new keyword? Adding a third keyword here means you expect someone to have a label, icon, AND an animated text. That's bloated

[bo-ku-ra]

if i can use a charactor, i don't need any files other than the d2 source file.
very simple.
sample

[danielsuh05]

Ok, just before I start to tackle the issue, just want to make sure everything is in-line with your thinking.

Ignoring animation for now, to close issue #12, I need to implement a way to add an icon to a path. The label can't clash with the icon, so either I have to move the label "up" along the path and put the icon below it or put the label adjacent to the path and have only the icon on the path. Which were you thinking? I'll start on fixing the issue.

[alixander]

@danielsuh05 Yes, you just have to specify the position, the renderer already has logic to move labels to their predefined position.

Although I do think it's a little too involved, hence not giving it a good first issue tag. You're welcome to try anyway if you're hearing it call your name =), but I'd suggest something with the good-first-issue tag (https://github.com/terrastruct/d2/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22), maybe something that touches the compiler, e.g.

• support link on connections #1827
• link.icon #1828

[alixander]

@bo-ku-ra You do have a point that animating some text might be what people want instead of icon. Maybe animated: icon or animated: label for connections to specify