search

tldraw / tldraw

SDK for creating whiteboards and canvas experiences on the web.
https://tldraw.dev
Other
33.04k stars 1.98k forks source link

[Feature]: support "table" shape #3671

Open xuanswe opened 2 weeks ago

xuanswe commented 2 weeks ago

What's the feature?

~~Currently grid is super useful in many cases. It could be enabled at "Preferences > Show grid." It would be more useful if we could select an area and convert the grid under this area into an actual shape, which is basically a table.~~ (Remove the initial complicated idea and replace with a new feature description as below)

While interviewing I need to draw a chessboard to explain how to solve an 8-queens puzzle. This feature could help me save 1-2 minutes in this specific case.

According to my real-life experiences, I got many similar cases, especially with a dynamic programing problem. A table with cells in arbitrary size is extremely useful.

My proposal is to create a new Table shape, which is similar to the Rectangle shape but with cells inside. The larger the drag area, the more cells the table has. The app should have a simple algorithm to increase/decrease the number of cells when the drag area is expanded/shrunk. After having the table with the number of cells user want, user can easily resize the whole shape to fine tune the size of cells.

Contact Details

No response

Code of Conduct

linear[bot] commented 2 weeks ago

TLD-2486 [Feature]: convert a grid area to a shape

xuanswe commented 2 weeks ago

I would try to give my proposal on how it could be implemented.

I think this should work similar to how we draw a Rectangle shape.

  1. Select shape Rectangle
  2. Drag the mouse
  3. The start point and the end point form the rectangle

For a Table shape, we can do the same

  1. Select shape Table
  2. Drag the mouse
  3. The start point and the end point form the rectangle area where we can create a table inside this area

image

  1. The rectangle area at step 3 covers a specific grid behind it and can create the table on top of that grid

image

Note that it could work even if the user doesn't enable "Preferences > Show grid." The app knows about the grid even if it is not shown visually. The user doesn't need to see the grid because we can show the table shape on the fly, so user knows what is the final shape before release the mouse.

After creating the table shape, the user can easily resize as usual to scale up/down for bigger/smaller cells.

xuanswe commented 2 weeks ago

Maybe I over complicated this shape when relating it with the grid system. An easier way is just having a normal table shape. By knowing the drag area, we can compute the number of cells per row/col of the table. User can resize the whole shape, which will resize the cells accordingly.

=> I updated the original title/description with this simplification.