search

onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.73k stars 228 forks source link

[FEAT] Resizable and Draggable Handles to Divs #103

Open Kitenite opened 3 months ago

Kitenite commented 3 months ago

Describe the feature

Have handles on the display rectangles to be able to

  1. resize
  2. change corner radius

Right now, the rectangles are implemented as non-touchable svgs on the overlay layer. But it would be better to update these to React components that have logic and handles. Very open to interpretation.

https://github.com/onlook-dev/studio/blob/main/app/src/lib/editor/engine/overlay/rect.ts https://github.com/onlook-dev/studio/blob/main/app/src/lib/editor/engine/overlay/index.ts

Screenshot 2024-08-16 at 9 39 25 AM

Requirement clarification:

https://www.loom.com/share/2083559006b64a14b71b9084f164e237?sid=cdcf7a18-f68e-4391-9c42-ff250ca228e1

Implementation suggestion:

I would suggest splitting this task into 2 PRs:

  1. Re-implement the Rect elements in React components instead of custom HTML elements
  2. Implement the controls in the new Rect elements

Reasoning: For legacy reason, the overlay rects are implemented as HTML element. This is because they used to be inserted into the DOM directly. However, this is not extensible because we want these rects to fit some logic on them.

SkyC0der commented 3 months ago

Can I take this up?

Kitenite commented 3 months ago

@SkyC0der for sure! I assigned it to you

kartik-raj7 commented 2 months ago

Can you assign me this issue. I would like to work on it.

Kitenite commented 2 months ago

Great will do!

@SkyC0der since you are working on https://github.com/onlook-dev/onlook/issues/174 , I'll let @kartik-raj7 start on this. Hope that's ok!

SkyC0der commented 2 months ago

Yeah, It's fine!

Kitenite commented 2 months ago

I updated the description with a Loom walking through the requirements and implementation suggestion. @kartik-raj7

kartik-raj7 commented 2 months ago

I updated the description with a Loom walking through the requirements and implementation suggestion. @kartik-raj7

Ya Just saw the video its clear now what needs to be done thanks, will look into it.