Seeking Guidance on Implementing Observer Function for Direct State Manipulation in React

[effuone]

Hi Josemi,

I greatly appreciate your work on this project. I'm currently expanding its features for myself to include more create, modify, and remove capabilities. Given the complexity and variety of actions that can modify the state, it's kind of impractical for me to sprinkle addHistory() calls throughout the codebase. As part of this, I'm facing challenges with the undo/redo functionality and need to track changes more dynamically.

Challenge:
I've tried to implement an observer-based history tracking for board.elements, but I'm struggling to directly manipulate the state post-update without causing unnecessary re-renders or additional history entries.

Question:
Is there a way to implement an observer function that can show me previous and current values and allow me to modify them directly on the board? If such a method doesn't exist, do you have any insights on how to create this functionality?

Any suggestions or guidance would be immensely helpful.

Thanks for your time and assistance.

Best regards,
Alibek

[jmjuanes]

Hi Alibek,

Thank you for reaching out! I am glad to hear that you are expanding the features of Folio for your needs.

Currently, Folio provides an onChange method, which is triggered whenever a change occurs to an element. However, internally, each element can define its own set of observers, allowing for additional actions to be taken before the change is recorded in the history. Let me walk you through some of these observers:

• onCreateMove: This observer is invoked during the creation process of an element. You might find it helpful to explore its functionality in more detail here.

• onCreateEnd: Once the creation process of an element concludes, this observer is triggered. You can refer to an example of its implementation here.

• onUpdate: When a user modifies the display properties of an element, such as fill color, stroke, or text content, this observer is invoked. Check it out here.

• onResize and onResizeEnd: These observers are called during and after the resizing process of an element, respectively. You can explore their implementation here and here.

• onDrag: While a user drags an element, this observer is triggered. Its implementation details can be found here.

All these observers are invoked within the useEditor hook, which serves as the central hub for managing Folio's functionalities. You can refer to its implementation here.

You can base your implementation of the observer on the existing internal observer structure within Folio. If you encounter any hurdles or need further assistance, please do not hesitate to reach out to me.

Best regards,
Josemi