`onChange` behaviour is not as expected

[DipanshKhandelwal]

1. triggerOnChange is never called on clear

react-canvas-draw/src/index.js

Lines 453 to 468 in 253b68e

	clear = () => {
	this.lines = [];
	this.valuesChanged = true;
	this.ctx.drawing.clearRect(
	0,
	0,
	this.canvas.drawing.width,
	this.canvas.drawing.height
	);
	this.ctx.temp.clearRect(
	0,
	0,
	this.canvas.temp.width,
	this.canvas.temp.height
	);
	};

2. triggerOnChange is called multiple times on calling undo: [ number of lines left on undo + 1]

triggerOnChange is called at the end of undo :

react-canvas-draw/src/index.js

Lines 179 to 184 in 253b68e

	undo = () => {
	const lines = this.lines.slice(0, -1);
	this.clear();
	this.simulateDrawingLines({ lines, immediate: true });
	this.triggerOnChange();
	};

But, simulateDrawingLines is also called on undo before triggerOnChange.

Now, simulateDrawingLines calls saveLine multiple times. Check line 276:

react-canvas-draw/src/index.js

Lines 236 to 279 in 253b68e

	simulateDrawingLines = ({ lines, immediate }) => {
	// Simulate live-drawing of the loaded lines
	// TODO use a generator
	let curTime = 0;
	let timeoutGap = immediate ? 0 : this.props.loadTimeOffset;
	lines.forEach(line => {
	const { points, brushColor, brushRadius } = line;
	// Draw all at once if immediate flag is set, instead of using setTimeout
	if (immediate) {
	// Draw the points
	this.drawPoints({
	points,
	brushColor,
	brushRadius
	});
	// Save line with the drawn points
	this.points = points;
	this.saveLine({ brushColor, brushRadius });
	return;
	}
	// Use timeout to draw
	for (let i = 1; i < points.length; i++) {
	curTime += timeoutGap;
	window.setTimeout(() => {
	this.drawPoints({
	points: points.slice(0, i + 1),
	brushColor,
	brushRadius
	});
	}, curTime);
	}
	curTime += timeoutGap;
	window.setTimeout(() => {
	// Save this line with its props instead of this.props
	this.points = points;
	this.saveLine({ brushColor, brushRadius });
	}, curTime);
	});
	};

And saveLine calls triggerOnChange at the end. Check line 446:

react-canvas-draw/src/index.js

Lines 424 to 447 in 253b68e

	saveLine = ({ brushColor, brushRadius } = {}) => {
	if (this.points.length < 2) return;
	// Save as new line
	this.lines.push({
	points: [...this.points],
	brushColor: brushColor || this.props.brushColor,
	brushRadius: brushRadius || this.props.brushRadius
	});
	// Reset points array
	this.points.length = 0;
	const width = this.canvas.temp.width;
	const height = this.canvas.temp.height;
	// Copy the line to the drawing canvas
	this.ctx.drawing.drawImage(this.canvas.temp, 0, 0, width, height);
	// Clear the temporary line-drawing canvas
	this.ctx.temp.clearRect(0, 0, width, height);
	this.triggerOnChange();
	};

[embiem]

thanks for the in-depth analysis. Seems to be related to #93, so I'll track this issue in there.