User Interactions in Blazor Signature component

11 Mar 20223 minutes to read

The Blazor Signature component supports various interaction like Undo, Redo, Clear, Disabled, and ReadOnly. Every changes occurred in signature can be taken as a snap and saved to collection for handling the above user interactions.

Undo

It reverts the last action of signature using the UndoAsync method. It removes the latest snap from the collection and load a previous snap to signature. Here, CanUndoAsync method is used to ensure whether undo can be performed or not.

Redo

It reverts the last undo action of the signature using the RedoAsync method. Here, CanRedoAsync method is used to ensure whether redo can be performed or not.

Clear

It clears the signature and makes the canvas empty using the ClearAsync method. Here, IsEmptyAsync method is used to ensure whether the signature is empty or not.

Disabled

It disables the signature component using the Disabled property.

ReadOnly

It prevents the signature from editing using the IsReadOnly property.

The following sample explains about user interactions available in signature.

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

<SfButton CssClass="e-primary" @ref="undoBtn" @onclick="OnUndo">UNDO</SfButton>
<SfButton CssClass="e-primary" @ref="redoBtn" @onclick="OnRedo">REDO</SfButton>
<SfButton CssClass="e-primary" @ref="clearBtn" @onclick="OnClear">CLEAR</SfButton>

<SfCheckBox Label="Disable" ValueChange="OnDisable" TChecked="bool"></SfCheckBox>
<SfCheckBox Label="Readonly" ValueChange="OnReadOnly" TChecked="bool"></SfCheckBox>

<SfSignature @ref="signature" Disabled="@disabled" IsReadOnly="@isReadOnly" Changed="SignChanged"></SfSignature>

@code{
    private SfSignature signature;
    private SfButton undoBtn;
    private SfButton redoBtn;
    private SfButton clearBtn;
    private bool disabled = false;
    private bool isReadOnly = false;
    private void OnUndo()
    {
        if (!signature.Disabled && !signature.IsReadOnly)
        {
            signature.UndoAsync();
        }
    }
    private void OnRedo()
    {
        if (!signature.Disabled && !signature.IsReadOnly)
        {
            signature.RedoAsync();
        }
    }
    private void OnClear()
    {
        if (!signature.Disabled && !signature.IsReadOnly)
        {
            signature.ClearAsync();
        }
    }
    private void OnDisable(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        disabled = args.Checked;
    }
    private void OnReadOnly(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        isReadOnly = args.Checked;
    }
    private async Task SignChanged()
    {
        bool canUndo = await signature.CanUndoAsync();
        bool canRedo = await signature.CanRedoAsync();
        bool isEmpty = await signature.IsEmptyAsync();
        if (canUndo)
        {
            undoBtn.Disabled = true;
        }
        else
        {
            undoBtn.Disabled = false;
        }
        if (canRedo)
        {
            redoBtn.Disabled = true;
        }
        else
        {
            redoBtn.Disabled = false;
        }
        if (isEmpty)
        {
            clearBtn.Disabled = true;
        }
        else
        {
            clearBtn.Disabled = false;
        }
    }
}