React Js Adjustments - Pier Simulation Project
Budget: $30 – $250 USD
Pier Simulation Project - Necessary Adjustments
Project Description:
The project is already functional, but it needs three main adjustments. The focus is on improving interaction with the canvas, piece rotation, selection, and grid movement. The details of the adjustments are below. Please read carefully and only get in touch if you can meet the specified requirements.
---
1. Smooth Rotation Adjustment for Pieces on the Canvas
Current Issue:
When a piece is rotated, it turns abruptly and there is no smoothness in the rotation.
What’s Needed:
The piece rotation needs to be smooth, like in the reference example below. When clicking on the rotation arrow, the piece should rotate smoothly around its own axis.
Reference: Smooth rotation example
How the Rotation Works:
https://dockdesignerapp.com/guest/editor/top?utm_source=WebForm&utm_medium=CTA&utm_campaign=Demo
Click on the piece to see the rotation icons.
The rotation should be smooth and continuous, without abrupt interruptions.
When the rotation arrow is clicked (turning orange), move the piece to rotate.
This is the rotation I want.
---
2. Improvements in Piece Selection and Movement
Current Issue:
Currently, the piece is added directly to the canvas without a pre-selection process.
What’s Needed:
When selecting a piece to add to the canvas, follow this action flow:
1. Piece Selection: Click on the piece option (it should turn blue to indicate it is selected).
2. Piece Movement: The SVG should "follow" the cursor until the click is made on the canvas to place the piece.
3. Color Selection Button: The radio button for selecting the piece color must remain, but we are open to UI improvement suggestions in this part.
Reference of Desired Behavior:
https://dockdesignerapp.com/guest/editor/top?utm_source=WebForm&utm_medium=CTA&utm_campaign=Demo
I want it to behave like this in my project, so you will need to adapt the current implementation. The radio button cannot be removed because the user needs to choose the color. If you have any UI improvement suggestions in this part, I am open to considerations.
---
3. Grid and Canvas Movement Improvements
Current Issue:
The grid on the canvas background is fixed, and the movement of the canvas is limited.
What’s Needed:
* Zoom with Mouse Wheel: The grid should be able to zoom in and out when using the mouse wheel, adjusting the scale accordingly.
* Infinite Canvas Movement: The canvas needs to allow infinite movement. The user should be able to drag in any direction of the canvas, without visible limits.
Reference of Desired Behavior:
https://dockdesignerapp.com/guest/editor/top?utm_source=WebForm&utm_medium=CTA&utm_campaign=Demo
---
Technical Information:
* Technologies used: React.js, Vite, Tailwind, TypeScript
* Image Format: SVGs
* Code Access: http://bit.ly/3TQm6WU
* Vercel: https://pier-v4.vercel.app/
---
Important:
* Be honest about your ability to complete the tasks described above.
* If you cannot meet the requirements or provide a realistic deadline/budget, please do not contact us.
* Do not send messages stating that the reference is different from what we currently have. The task is to work only on the front-end.
When sending your message, please include your estimated timeline and cost based on YOUR availability.
Project Description:
The project is already functional, but it needs three main adjustments. The focus is on improving interaction with the canvas, piece rotation, selection, and grid movement. The details of the adjustments are below. Please read carefully and only get in touch if you can meet the specified requirements.
---
1. Smooth Rotation Adjustment for Pieces on the Canvas
Current Issue:
When a piece is rotated, it turns abruptly and there is no smoothness in the rotation.
What’s Needed:
The piece rotation needs to be smooth, like in the reference example below. When clicking on the rotation arrow, the piece should rotate smoothly around its own axis.
Reference: Smooth rotation example
How the Rotation Works:
https://dockdesignerapp.com/guest/editor/top?utm_source=WebForm&utm_medium=CTA&utm_campaign=Demo
Click on the piece to see the rotation icons.
The rotation should be smooth and continuous, without abrupt interruptions.
When the rotation arrow is clicked (turning orange), move the piece to rotate.
This is the rotation I want.
---
2. Improvements in Piece Selection and Movement
Current Issue:
Currently, the piece is added directly to the canvas without a pre-selection process.
What’s Needed:
When selecting a piece to add to the canvas, follow this action flow:
1. Piece Selection: Click on the piece option (it should turn blue to indicate it is selected).
2. Piece Movement: The SVG should "follow" the cursor until the click is made on the canvas to place the piece.
3. Color Selection Button: The radio button for selecting the piece color must remain, but we are open to UI improvement suggestions in this part.
Reference of Desired Behavior:
https://dockdesignerapp.com/guest/editor/top?utm_source=WebForm&utm_medium=CTA&utm_campaign=Demo
I want it to behave like this in my project, so you will need to adapt the current implementation. The radio button cannot be removed because the user needs to choose the color. If you have any UI improvement suggestions in this part, I am open to considerations.
---
3. Grid and Canvas Movement Improvements
Current Issue:
The grid on the canvas background is fixed, and the movement of the canvas is limited.
What’s Needed:
* Zoom with Mouse Wheel: The grid should be able to zoom in and out when using the mouse wheel, adjusting the scale accordingly.
* Infinite Canvas Movement: The canvas needs to allow infinite movement. The user should be able to drag in any direction of the canvas, without visible limits.
Reference of Desired Behavior:
https://dockdesignerapp.com/guest/editor/top?utm_source=WebForm&utm_medium=CTA&utm_campaign=Demo
---
Technical Information:
* Technologies used: React.js, Vite, Tailwind, TypeScript
* Image Format: SVGs
* Code Access: http://bit.ly/3TQm6WU
* Vercel: https://pier-v4.vercel.app/
---
Important:
* Be honest about your ability to complete the tasks described above.
* If you cannot meet the requirements or provide a realistic deadline/budget, please do not contact us.
* Do not send messages stating that the reference is different from what we currently have. The task is to work only on the front-end.
When sending your message, please include your estimated timeline and cost based on YOUR availability.