Skip to content

Commit

Permalink
fix(eraser): solves issues with eraser (#725)
Browse files Browse the repository at this point in the history
  • Loading branch information
NLueg authored Jul 17, 2023
1 parent 11272b4 commit 4d881e6
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 3 deletions.
19 changes: 16 additions & 3 deletions src/signature_pad.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ export interface PointGroupOptions {
maxWidth: number;
penColor: string;
velocityFilterWeight: number;
/**
* This is the globalCompositeOperation for the line.
* *default: 'source-over'*
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
*/
compositeOperation: GlobalCompositeOperation;
}

export interface Options extends Partial<PointGroupOptions> {
Expand All @@ -56,6 +62,7 @@ export default class SignaturePad extends SignatureEventTarget {
public penColor: string;
public minDistance: number;
public velocityFilterWeight: number;
public compositeOperation: GlobalCompositeOperation;
public backgroundColor: string;
public throttle: number;

Expand Down Expand Up @@ -83,6 +90,7 @@ export default class SignaturePad extends SignatureEventTarget {
this.dotSize = options.dotSize || 0;
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.compositeOperation = options.compositeOperation || 'source-over';

this._strokeMoveUpdate = this.throttle
? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
Expand Down Expand Up @@ -314,7 +322,7 @@ export default class SignaturePad extends SignatureEventTarget {
}
};

private _getPointGroupOptions(group?: PointGroup) {
private _getPointGroupOptions(group?: PointGroup): PointGroupOptions {
return {
penColor: group && 'penColor' in group ? group.penColor : this.penColor,
dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
Expand All @@ -324,6 +332,10 @@ export default class SignaturePad extends SignatureEventTarget {
group && 'velocityFilterWeight' in group
? group.velocityFilterWeight
: this.velocityFilterWeight,
compositeOperation:
group && 'compositeOperation' in group
? group.compositeOperation
: this.compositeOperation,
};
}

Expand Down Expand Up @@ -361,8 +373,8 @@ export default class SignaturePad extends SignatureEventTarget {
(event as PointerEvent).pressure !== undefined
? (event as PointerEvent).pressure
: (event as Touch).force !== undefined
? (event as Touch).force
: 0;
? (event as Touch).force
: 0;

const point = this._createPoint(x, y, pressure);
const lastPointGroup = this._data[this._data.length - 1];
Expand Down Expand Up @@ -432,6 +444,7 @@ export default class SignaturePad extends SignatureEventTarget {
this._lastVelocity = 0;
this._lastWidth = (options.minWidth + options.maxWidth) / 2;
this._ctx.fillStyle = options.penColor;
this._ctx.globalCompositeOperation = options.compositeOperation;
}

private _createPoint(x: number, y: number, pressure: number): Point {
Expand Down
3 changes: 3 additions & 0 deletions tests/fixtures/face.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const face: PointGroup[] = [
minWidth: 0.5,
maxWidth: 2.5,
velocityFilterWeight: 0.7,
compositeOperation: 'source-over',
points: [
{
time: 1523730547109,
Expand All @@ -22,6 +23,7 @@ export const face: PointGroup[] = [
minWidth: 0.5,
maxWidth: 2.5,
velocityFilterWeight: 0.7,
compositeOperation: 'source-over',
points: [
{
time: 1523730547775,
Expand All @@ -37,6 +39,7 @@ export const face: PointGroup[] = [
minWidth: 0.5,
maxWidth: 2.5,
velocityFilterWeight: 0.7,
compositeOperation: 'source-over',
points: [
{
time: 1523730548448,
Expand Down
1 change: 1 addition & 0 deletions tests/fixtures/square.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const square: PointGroup[] = [
minWidth: 0.5,
maxWidth: 2.5,
velocityFilterWeight: 0.7,
compositeOperation: 'source-over',
points: [
{
time: 1637131731972,
Expand Down
15 changes: 15 additions & 0 deletions tests/signature_pad.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,21 @@ describe('#clear', () => {
expect(pad.isEmpty()).toBe(true);
expect(pad.toData()).toEqual([]);
});

it('clear should apply erase option to the canvas context', () => {
const pad = new SignaturePad(canvas);

pad.fromData(face);
expect(pad.isEmpty()).toBe(false);

pad.penColor = 'pink';
pad.compositeOperation = 'destination-out';

pad.clear();

const context = canvas.getContext('2d') as CanvasRenderingContext2D;
expect(context.globalCompositeOperation).toBe('destination-out');
})
});

describe('#isEmpty', () => {
Expand Down

0 comments on commit 4d881e6

Please sign in to comment.