[Feature]: event Textbox from Resizing While Maintaining Position and Scaling in F*gma-like Behavior

[maxiannunziata]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have searched and referenced existing issues, feature requests and discussions
• I am filing a FEATURE request.

Description

Feature Request: Prevent Textbox from Resizing While Maintaining Position and Scaling in Figma-like Behavior

Example:

Description:

I would like to request a feature that allows the textbox to maintain its original size and position, scaling appropriately without losing its coordinates, similar to how Figma handles it.

Current Approach:

I have attempted to implement this behavior using the following code:

updateZoom = () => { const zoom = this.canvas.getZoom(); this.set({ left: this.originalLeft / zoom, top: this.originalTop / zoom, scaleX: 1 / zoom, scaleY: 1 / zoom, }); this.setCoords(); this.canvas.requestRenderAll(); }

However, this approach is not entirely accurate. The textbox does not always maintain its exact position and scaling as expected, particularly when zoom levels change.

Preview: https://imgflip.com/gif/905628

Request:

It would be beneficial to have an out-of-the-box solution or feature that ensures the textbox does not resize or lose its position, while still scaling proportionally, similar to the behavior seen in design tools like Figma.

This would greatly enhance the user experience and precision when working with textboxes in dynamic canvases.

Thank you for considering this request!

Current State

• Canvas Zooming: The canvas is set up with a zoom feature, allowing users to zoom in and out, which affects the scale and positioning of objects on the canvas.

• Textbox Scaling and Positioning: The SingleLineTextbox class adjusts its position (top, left) and font size dynamically in response to canvas zooming. However, achieving consistent behavior for text elements, particularly maintaining their size and position relative to the canvas during zooming, has proven challenging.

• Problem with Zoom: When the canvas zoom level changes, the font size, top, and left positions of the textboxes are not behaving as expected. The goal is to maintain the text's appearance (size, position) consistently regardless of the zoom level. The current implementation adjusts the font size and positions but has required fine-tuning and complex formulas to achieve the desired result.

• Non-linear Relationship: The relationship between the zoom level and the top position has been found to be non-linear, requiring a quadratic formula to describe it accurately.

Additional Context

Existing Solutions/Workarounds

• Direct Adjustment of Font Size and Position: Initial approaches involved directly adjusting the font size and positions (top, left) based on the zoom level. This approach worked to some extent but introduced complexity, particularly when dealing with varying zoom levels and their non-linear impact.

• Quadratic Formula: A quadratic formula was derived to more accurately calculate the top position based on the zoom level. This formula was determined by fitting a curve to the data points of zoom levels and corresponding top positions. The formula is:

[
\text{top} = -2411.64 \times (\text{zoom})^2 + 3199.48 \times \text{zoom} - 685.66
]

• Custom Event Handling: Custom event handlers were introduced to listen for zoom changes and adjust the textbox properties accordingly. These handlers attempt to maintain the textbox's size and position consistent with the user's expectations during zooming.

• Iteration and Testing: Multiple iterations of testing and adjustments have been made to refine the behavior, particularly with the use of the quadratic formula to manage non-linear scaling issues.

[asturur]

The description of the issue and the behaviour is a bit confusing, i really do not understand what are you trying to achieve
Please remove Figma from your description and try to describe it by feature/functionality.