alexander-novo
commented
3 years ago With FabricJS, it makes more sense to just add a region to the asset and then allow the user to move/resize after rather than painting them on. This works fine since many regions are rotated rectangles, and there isn't a good way to paint those on.
Regions should always show on top of the asset - make certain you add them to the canvas AFTER the asset. They should be transparent and should not be allowed to overlap. Try snapping to corners of other regions and if someone tries to resize/move a region into another region either don't let them (make the resize widget stop resizing once it reaches the border) or "pop" the region outside the other region, either by moving if the last action was movement or resizing if the last action was a resize.
Once assets are rendered and can be selected (#17, #15), then a list of regions on the asset should be available. A new editor mode should become available, where once selected, the individual asset is highlighted and zoomed in without rendering other assets. Think Unity's prefab editor:
In the toolbar, the user will be given a list of shape-builder tools, like rectangles, polygons, circles, ovals, etc. and can use these tools to draw a region over the asset. There might be libraries out there for these kinds of tools? Try to make rotation available. Maybe consider making these tools "snap" to other regions which already exist to help make non-overlapping regions in games like monopoly, whose spaces are all right next to each other:
Then, each asset will store an array of regions which are given a type based on the tool which was used to produce it. Regions can be selected and renamed, just like assets. Regions on an asset will only be revealed if that asset (or a region on that asset) is selected in the work space.