Refactor reference image layer state saving/loading

[mstone121]

Overview

The current implementation of the reference layer does not reload from state each time it's updated. This is because the layer would become unselected each time it changed (despite supplying the selected: true prop in the initialization options).

It also cannot load the transparency and outline modes from state. This is because there is no way to set these options while initializing the layer. My attempts to set them after the layer is initialized have been unsuccessful because the function calls which enable these properties can only be called after certain initialization steps are finished. To my knowledge, there are no events that are fired after the initialization has finished.

Describe the solution you'd like

Two things are needed to solve these problems and it's likely their solutions are related:

• Find a way to specify transparency and outline when initializing the layer
• Find a cleaner way to hook into image layer updates

If these two solutions are implemented, then the variables from state can be included in the ReferenceLayer's useEffect hook.

Additional Context

Regarding the image updates, listening for the edit event covers any update of the edit handles. The dragend event which is added by L.DistortableImage.Edit.fix.js does a good job of hooking into drag events of the entire image. I created a PR on the L.DistortableImage repo to implement this: publiclab/Leaflet.DistortableImage#1014

The refresh event, which is used to track mode and transparency/outline changes, however, will not work with these proposed changes. This is because the event is fired when the layer is initialized and will cause an render loop.

[rajadain]

Does this still apply?

[mstone121]

Yes, as of now, reference layers still don't respond to state changes (besides visibility).