align "┌ ─ ┐ │ └ ┘"

[bo-ku-ra]

https://play.d2lang.com/?l=&script=pJG7SsVAEIb7eYq_jEVkZ-87Qp4kjZiAFtlAiIjIvLusgnjK7Gm-KYbvZy5_xxYs-0clxjjBNrgG3xAotpIackPBOLEhFvBch7qfeHk-1gd8_Qz0ePMqwXm8r0_4bf3bTMBKVmDvibBKTuDmOrxu22XbKXmB77S9UhCETjsoRUGc67C8HefnZT8qJUHq9pNSFuRuPysVQen2ixIbAZvuBDZK3wEAAP__&

[gavin-ts]

Is the issue that the double border stroked dash lines don't line up (due to the outer path being longer than the inner one?

Is the idea to have it lined up more like this (but with equal lengths)?

[bo-ku-ra]

i think

best:
all corners must be "┌ ┐ └ ┘".

better:
the inner line is shorter than the outer line.
or
your solution.

[alixander]

i think we have to use border-image for this lol. https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

i'll tag as low-priority because that's just how CSS is. but if someone wants to try it, be my guest

[Nepo26]

Hi, I want to tackle this issue so I start to understand the codebase. Is it ok?

---

Replicating the Issue

To simulate the issue can it be done just using the following code?

1 -> 2

classes: {
  dashed: {
    style: {
      stroke-dash: 5
    }
  }
}

1: {
  class: dashed
  3: {
    class: dashed

    5: {
      class: dashed
    }

    7: {
      class: dashed
    }

    5 -> 7
  }
}

2: {
  class: dashed

  4: {
    class: dashed

    6: {
      class: dashed
    }

    8: {
      class: dashed
    }

    6 -> 8
  }
}

https://play.d2lang.com/?l=&script=jJBLDoAgDET3c4q5gAtQPmHhafQUhrubFtBojOmCQMt05oHjtNID_TcLD5CStW_tTGrSKKS8eAqDNitkVcA1mZqVbgNyHtPPC22F2_k9Jqa6JYMmyEPSAPFfICCXH5JoSMkGTRSS3EnOAAAA__8%3D&layout=tala&

[alixander]

@Nepo26 no, when it's parent-child, it's far apart enough that no one will notice. double-border is when it's noticeable:

https://play.d2lang.com/?script=qqhMS7NSqOZSUAAbqIcSblYKJUWlqXA5JJdYKRhx1XIBAgAA__8%3D&

[Nepo26]

Oh Okay. Makes sense then.

[bo-ku-ra]

https://play.d2lang.com/?script=qoCCSghIgwErhWouBQWwJXooYWmlUFJUmgqXQ3KdlYKhgYKygoGenqEBVy0XIAAA__8%3D&

this is not a beauty like d2 works.

[Nepo26]

So hey. I looked more into this issue. And this is what I found and how I am trying to make it work.

My Thought Process

• I looked more into border-image and it don't seem like the correct solution as it uses an image.
• Tried to manually find the perfect ratio of stroke-dasharray and stroke-dashoffset, didn't get far. I was able to get a corner created if the offset was width / height but it only worked if the stroke-width was above 15 and it looked ugly.
• Found out that they were introducing a new property called stroke-dashcorner that would be perfect. Seems like it's yet premature to be used.
• Then I saw a twitter thread of someone in tldraw who just fixed a similar problem to ours. Looking at their source code I saw that instead of using a rect property they use grouped lines.

In the end what am I doing?

I'm trying to replicate the DashedOutlineBox and the getPerfectDashProps to allow us the to create better boxes.

[alixander]

@Nepo26 nice find!

indeed, tldraw's dash treatment is 👨‍🍳 👌 . steve is a legend.