Add rectangle from corner tool

[franknoirot]

Add a sketch tool that generates a rectangle for the user.

User flow

1. In sketch mode, click the Rectangle tool
2. Click anywhere on the sketch plane to lay your first corner
3. Move the mouse around to find the place for the second corner
4. During this, a rectangle made of dashed lines will span between your first point and the mouse's position
5. Click to finish the rectangle

Code generation

I might be thinking about this wrong @Irev-Dev but I think we should still have these be line segments being generated, so that each of their edges are individually taggable. I would also recommend we stay away from using horizontal or vertical line definitions, as it would make the rectangle impossible to rotate or tweak later. I think the code generated should be a rectangle defined relative to itself:

const rect001_start_angle = 0
const rect001_width = 13
const rect001_height = 4
const rect001 = startProfileAt([1, 3], sketch001)
  |> angledLine({
       angle: rect001_start_angle,
       length: rect001_width,
       tag: 'a'
     }, %)
  |> angledLine({
       angle: rect001_start_angle + 90,
       length: -rect001_height,
       tag: 'b'
     }, %)
  |> angledLine({
       angle: rect001_start_angle,
       length: -rect001_width,
       tag: 'c'
     }, %)
  |> close(%)

Additional resources

An icon has been made and is available in Figma here.

[franknoirot]

I should note that I'm also totally cool if a rectangle function gets added to stdlib and we just generate that. I'm not sure how we're planning on maintaining that "taggability" rule when calling stdlib functions though.

[Irev-Dev]

I like the individual segments approach. However I think that the use of variables is not great, if we can follow the same pattern of other segments that is not constraining completely when its added (unless we're talking snapping logic)

I think better code is

  |> startProfileAt([1, 3], %)
  |> angledLine({ angle: 45, length: 13, tag: 'a' }, %)
  |> angledLine({
       angle: segAng('a', %) - 90,
       length: 4,
       tag: 'b'
     }, %)
  |> angledLine({
       angle: segAng('a', %),
       length: -segLen('a', %),
       tag: 'c'
     }, %)
  |> close(%)

Because it its still constrained as a rectangle, but not its editable dimensions, (angle, length height)

Screenshare.-.2024-02-27.8_40_38.PM.mp4

Though I think we need to get those constraint symbols in hey, because why the the segments are not editable isn't clear

  |> angledLine({
       angle: segAng('a', %),
       length: -segLen('a', %),
       tag: 'c'
     }, %)

Is fully constrained so that can't be edited.

[franknoirot]

Sick I didn't know about the segLen function that's excellent.

Yeah you're right we need those soon. I'll make an issue: I have a few details I want to discuss before we implement them.

[franknoirot]

I've got a little baby branch started @Irev-Dev just with the icon, toolbar, and rough state machine setup.

I'm not quite sure how to tweak things such that we can setupScene but have 4 draft lines be generated/updated on mouseMove, right now this assumes only the last line is a draft line.

[franknoirot]

@Irev-Dev had a good idea for how to tweak setupSketch: have it take an already-added-to AST instead of having it do that transformation internally. That way the various sketch tools like Line can add their relevant code mods before calling it, and just tell setupSketch which segments will need to be draft lines (we didn't pin down exactly how to amend that).