Saving and Restoring a Doodle

Due to image degradation of exporting an image multiple times, this component allows for saving and restoring from a state. The state is kept in json format and can be persisted or restored when required.

Saving Doodle

Component Call

The first way of saving a Doodle would be to call the save functionality on the reference of the Doodle object.

<div style="height: 50vh;">
    <DoodleDraw @ref="_doodleDraw">
        
    </DoodleDraw>
</div>

@code {
    private DoodleDraw _doodleDraw;

    // Called from a custom button click
    private async Task OnSaveButtonClick() 
    {
        ...
        string stateData = await _doodleDraw.SaveCurrentDrawState();
        ...                
    }
}
    

Doodle Save Event Callback

The second way of saving a Doodle would be to set the callback event property on the Doodle.

<div style="height: 50vh;">
    <DoodleDraw @ref="_doodleDraw" OnSaveDoodle="SaveDoodle">
        
    </DoodleDraw>
</div>

@code {
    private void SaveDoodle(string stateData) 
    {
        ...
    }
}
    

Save Doodle Handler

The last way of saving a Doodle would be to create a custom save Doodle handler. Below is an example of creating such a handler

       
    namespace YourNamespace
    {
        public delegate void OnSaveDoodleDrawHandler(object sender, string jsonData);

        public class MySaveHandler : Abstractions.Interfaces.IDoodleSaveHandler
        {
            public event OnSaveDoodleDrawHandler OnSaveDoodleDraw;

            public async Task<string> SaveDoodleDraw(IDoodleDrawInteraction doodleDrawInteraction)
            {
                string result = null;
                if (doodleDrawInteraction?.DoodleStateManager != null)
                {
                    result = await doodleDrawInteraction.DoodleStateManager.SaveCurrentState();
                    this.OnSaveDoodleDraw?.Invoke(this, result);
                }
                return result;
            }
        }
    }
    

Lastly, you need to register you export handler in the containers. This can be done when registering the Doodle Services

      services.UseDoodle((config) => 
      {
          ...
      }, 
      saveHandler: () => new MySaveHandler(),
      ...
    }
    

Restoring Doodle

Component Call

To restore a Doodle, a reference to the component is required and can be done as in the following example.

<div style="height: 50vh;">
    <DoodleDraw @ref="_doodleDraw" >
        
    </DoodleDraw>
</div>

@code {

    private DoodleDraw _doodleDraw;           
    private async Task RestoreDoodle() 
    {
        await _doodleDraw.RestoreCurrentDrawState(_jsonData);
    }
}