fixing the position and display of the segment labels during sketch mode

[nadr0]

closes #3076

The position of the label grew with the scale since it is in the offsetFromMidPoint. We need the parent container to be position properly and place the label inside of it, we don't need to reposition the label within the parent container.

• Updated the styling to get closer to our designs
• Support both light and dark mode
• Added background color to have separate between the overlaid text and the line
• Positioned the text at the midpoint of the line and have the text be centered
• Works at different zoom levels

[qa-wolf]

QA Wolf here! As you write new code it's important that your test coverage is keeping up.
Click here to request test coverage for this PR!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
modeling-app	✅ Ready (Inspect)	Visit Preview	Sep 10, 2024 6:24pm

[franknoirot]

Might need some padding around the text, on dark mode it looks a little accidental. py-0.5 px-2 maybe? You might just need pt-0.5, the line-height of that font messes with the visual padding

[lf94]

1. can we add a bit of padding
2. can we remove the units (already globally specified)
3. maybe add the smallest rounded corners
4. (stretch goal) can we remove the sketch coloring? why doesnt lightmode have an internal color?

[franknoirot]

4 is the engine-side scene, which is dimmed when in sketch mode and frozen. I don't know why it's not visible in the light mode screenshot, probably because it was the first taken and there was not yet an engine-side Solid2D to render

[nadr0]

• can we add a bit of padding
• can we remove the units (already globally specified)
• maybe add the smallest rounded corners
• stretch goal) can we remove the sketch coloring? why doesnt lightmode have an internal color?

Yeah, my first image didn't have that rendered I think I took the screenshot before that got rendered on the engine side.

Frank is right about the line height padding, it can be a little odd with this font.

[lf94]

question: how does this look with a border color matching line colors?

[nadr0]

question: how does this look with a border color matching line colors?

I can push this if we like it.

[lf94]

I personally like it because it kind of ties together the line through the border - @franknoirot @Irev-Dev ?

[Irev-Dev]

I'll let Frank make the call on this.

[nadr0]

Suggestion from Max

in the drawing world you would align the text angle with the direction of the line

Added aligning the text to the slope of the line.

angle.mp4

[franknoirot]

Love it. I don't love the border around because it makes it feel like an input to me, I think that might increase the user complaints around the lack of ability to do the "double-click-to-edit-length" user flow. But I think this is awesome and I want it in more. I say punch it

[lf94]

I don't love the border around because it makes it feel like an input to me, I think that might increase the user complaints around the lack of ability to do the "double-click-to-edit-length" user flow.

Isn't that a benefit? That users can do this in some upcoming PR?

[franknoirot]

Nice job!

[franknoirot]

So clean!

[Irev-Dev]

Sorry this is late, and I don't think it's a huge problem since there's an obvious work around for users "zoom in"

But did notice at scale it disappears too late and covers the entire segment

const sketch001 = startSketchOn('XZ')
  |> startProfileAt([3.44, 3.48], %)
  |> line([1500.31, 1.06], %)

[lf94]

Yeah the follow up PR could be when two boxes overlap they both disappear.

[Irev-Dev]

Sorry noticing all the things post merge.

Screenshare.-.2024-09-11.3_30_06.PM.mp4

It's kinda charming tbh.