How to save shapes and restore them?

[CesarCruzUtec]

I'm currently using this package, and it's working great, but I have a couple of questions. When I finish defining the shapes in an image, I save only the category and the points list to store them in a database. Later, I retrieve this data to rebuild the shapes. However, I don't see a clear way to do this right now. Is there a constructor or method to recreate the shapes so the annotator can continue using them for adding, modifying, or deleting?

[TaqBostan]

Hi,

To save the shapes you have drawn, call annotator.getShapes() to get detailed information.

To rebuild them on load, use shapes prop. This way you can use the same data you have received from annotator.getShapes() (see raw data). As an alternative, each shape has an exclusive constructor for instantiation (see typed data). As you can infer from the constructors (Polygon and Rectangle, Circle, and Ellipse), some arguments are optional. For example, if you do not use colorful shapes, ignore color.

Check out demo 1 and demo 2 for some examples.

[CesarCruzUtec]

Thanks for your response! I have another question I forgot to include earlier.

In the annotator component, one of the props is shapes, which accepts a list of shapes to display. In my web app, I have a dropdown menu that selects a category, and I want the image to show only the shapes that belong to the selected category. I have a variable that holds these filtered shapes, and it updates whenever I change the category.

The issue is that the annotator component doesn’t update dynamically. To see the updated shapes, I currently need to close and reopen a modal, which is inconvenient. I tried adding a key prop to the annotator component, hoping it would re-render on updates, but this causes both the annotator and the variable to reset, resulting in the loss of all data.

Do you have any suggestions for resolving this?