Search results

User Interaction in React Signature component

24 May 2022 / 3 minutes to read

The below interactions were available in Signature, and we can walk through one by one.

  • Undo and Redo
  • Clear
  • Disabled
  • ReadOnly

Undo and Redo

In the Signature, every action can be maintained as a snap for undo and redo operations. And maintained SnapIndex for indexing the snap collection.

The undo method reverts the last action of signature by decreasing SnapIndex value to index previous snap. Here, canUndo method is used to ensure whether undo can be performed or not.

The redo method reverts the last undo action of the signature by increasing the SnapIndex to get the next snap. Here, canRedo method is used to ensure whether redo can be performed or not.

Clear

The clear method is used to clears the signature and makes the canvas empty. This is also considered in Undo/ Redo. Here, isEmpty method is used to ensure whether the signature is empty or not.

Disabled

The disabled property is used to enables/disables the signature component. In the disabled state, the user is not allowed to draw signature. And it can’t be focused until the user enabled the signature.

ReadOnly

The isReadOnly property is used to enables/disables the ReadOnly Signature. It can be focused but it prevents drawing in Signature.

The following sample explains about user interactions available in signature.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent } from '@syncfusion/ej2-base';
class App extends React.Component {
    constructor(props) {
        super(props);
    }
    undoBtnCreated() {
        document.getElementById('undo').addEventListener('click', this.undoBtnClick);
    }
    undoBtnClick() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        if (!signature.disabled && !signature.isReadOnly) {
            signature.undo();
        }
    }
    redoBtnCreated() {
        document.getElementById('redo').addEventListener('click', this.redoBtnClick);
    }
    redoBtnClick() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        if (!signature.disabled && !signature.isReadOnly) {
            signature.redo();
        }
    }
    clrBtnCreated() {
        document.getElementById('clear').addEventListener('click', this.clrBtnClick);
    }
    clrBtnClick() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        if (!signature.disabled && !signature.isReadOnly) {
            signature.clear();
        }
    }
    disableChange(args) {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        signature.disabled = args.checked;
    }
    readOnlyChange(args) {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        signature.isReadOnly = args.checked;
    }
    change(args) {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        let undoButton = getComponent(document.getElementById('undo'), 'btn');
        let redoButton = getComponent(document.getElementById('redo'), 'btn');
        let clearButton = getComponent(document.getElementById('clear'), 'btn');
        if (!signature.disabled && !signature.isReadOnly) {
            if (signature.canUndo()) {
                undoButton.disabled = false;
            }
            else {
                undoButton.disabled = true;
            }
            if (signature.canRedo()) {
                redoButton.disabled = false;
            }
            else {
                redoButton.disabled = true;
            }
            if (!signature.isEmpty()) {
                clearButton.disabled = false;
            }
            else {
                clearButton.disabled = true;
            }
        }
    }
    render() {
        return (<div id='container'>
    <div id="option">
        <table>
            <tr>
                <td>
                  <ButtonComponent id='undo' cssClass='e-primary' content='UNDO' disabled={true} created={this.undoBtnCreated.bind(this)}/>
                </td><td>
                  <ButtonComponent id='redo' cssClass='e-primary' content='REDO' disabled={true} created={this.redoBtnCreated.bind(this)}/>
                </td><td>
                  <ButtonComponent id='clear' cssClass='e-primary' content='CLEAR' disabled={true} created={this.clrBtnCreated.bind(this)}/>
                </td><td>
                    <div id="checkbox1">
                      <CheckBoxComponent label="Disabled" change={this.disableChange}/>
                    </div>
                    <div id="checkbox2"><CheckBoxComponent label="ReadOnly" change={this.readOnlyChange}/></div>
                </td>
            </tr>
        </table>
    </div>
    <div id="signature-control">
        <SignatureComponent id='signature' change={this.change}/>
    </div>
</div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React Signature</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React Signature Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SignatureFileType, Signature, SignatureComponent, SignatureChangeEventArgs } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import { ChangeEventArgs, CheckBox } from '@syncfusion/ej2-buttons';

class App extends React.Component<{}, {}> {
  constructor(props) {
super(props);
  }
  public undoBtnCreated() {
document.getElementById('undo').addEventListener('click', this.undoBtnClick);
  }
  public undoBtnClick() {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
if (!signature.disabled && !signature.isReadOnly) {
  signature.undo();
}
  }
  public redoBtnCreated() {
document.getElementById('redo').addEventListener('click', this.redoBtnClick);
  }
  public redoBtnClick() {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
if (!signature.disabled && !signature.isReadOnly) {
  signature.redo();
}
  }
  public clrBtnCreated() {
document.getElementById('clear').addEventListener('click', this.clrBtnClick);
  }
  public clrBtnClick() {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
if (!signature.disabled && !signature.isReadOnly) {
  signature.clear();
}
  }
  disableChange(args: ChangeEventArgs) {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
signature.disabled = args.checked;
  }
  readOnlyChange(args: ChangeEventArgs) {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
signature.isReadOnly = args.checked;
  }
  change(args: SignatureChangeEventArgs) {
let signature: Signature = getComponent(document.getElementById('signature'), 'signature');
let undoButton: Button = getComponent(document.getElementById('undo'), 'btn');
let redoButton: Button = getComponent(document.getElementById('redo'), 'btn');
let clearButton: Button = getComponent(document.getElementById('clear'), 'btn');
if (!signature.disabled && !signature.isReadOnly) {
    if (signature.canUndo()) {
        undoButton.disabled = false;
    } else {
        undoButton.disabled = true;
    }
    if (signature.canRedo()) {
        redoButton.disabled = false;
    } else {
        redoButton.disabled = true;
    }
    if (!signature.isEmpty()) {
        clearButton.disabled = false;
    } else {
        clearButton.disabled = true;
    }
}
  }
  render() {
return (<div id='container'>
    <div id="option">
        <table>
            <tr>
                <td>
                  <ButtonComponent id='undo' cssClass='e-primary' content='UNDO' disabled={true} created={this.undoBtnCreated.bind(this)}/>
                </td><td>
                  <ButtonComponent id='redo' cssClass='e-primary' content='REDO' disabled={true} created={this.redoBtnCreated.bind(this)}/>
                </td><td>
                  <ButtonComponent  id='clear' cssClass='e-primary' content='CLEAR' disabled={true} created={this.clrBtnCreated.bind(this)}/>
                </td><td>
                    <div id="checkbox1">
                      <CheckBoxComponent label="Disabled" change={this.disableChange}/>
                    </div>
                    <div id="checkbox2"><CheckBoxComponent label="ReadOnly" change={this.readOnlyChange}/></div>
                </td>
            </tr>
        </table>
    </div>
    <div id ="signature-control">
        <SignatureComponent id='signature' change={this.change}/>
    </div>
</div>
)
  }
};
ReactDOM.render(<App />, document.getElementById('element'));