(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.SimpleDrawingBoard = {}));
}(this, (function (exports) { 'use strict';
/**
*
* Minimul EventEmitter implementation
* See `https://gist.github.com/leader22/3ab8416ce41883ae1ccd`
*
*/
class Eve {
constructor() {
this._events = {};
}
on(evName, handler) {
const events = this._events;
if (!(evName in events)) {
events[evName] = [];
}
events[evName].push(handler);
}
off(evName, handler) {
const events = this._events;
if (!(evName in events)) {
return;
}
if (!handler) {
events[evName] = [];
}
const handlerIdx = events[evName].indexOf(handler);
if (handlerIdx >= 0) {
events[evName].splice(handlerIdx, 1);
}
}
trigger(evName, evData) {
const events = this._events;
if (!(evName in events)) {
return;
}
for (let i = 0; i < events[evName].length; i++) {
const handler = events[evName][i];
handler.handleEvent
? handler.handleEvent.call(this, evData)
: handler.call(this, evData);
}
}
removeAllListeners() {
this._events = {};
}
}
/**
*
* History for undo/redo Structure(mutable)
* See `https://gist.github.com/leader22/9fbed07106d652ef40fda702da4f39c4`
*
*/
class History {
constructor(initialValue = null) {
this._past = [];
this._present = initialValue;
this._future = [];
}
get value() {
return this._present;
}
undo() {
if (this._past.length === 0) return;
const previous = this._past.pop();
this._future.unshift(this._present);
this._present = previous;
}
redo() {
if (this._future.length === 0) return;
const next = this._future.shift();
this._past.push(this._present);
this._present = next;
}
save(newPresent) {
if (this._present === newPresent) return;
this._past.push(this._present);
this._future.length = 0;
this._present = newPresent;
}
clear() {
this._past.length = 0;
this._future.length = 0;
}
}
function isTouch() {
return "ontouchstart" in window.document;
}
// expect HTML elements from CanvasImageSource
function isDrawableElement($el) {
if ($el instanceof HTMLImageElement) return true;
if ($el instanceof SVGImageElement) return true;
if ($el instanceof HTMLCanvasElement) return true;
if ($el instanceof HTMLVideoElement) return true;
return false;
}
function isBase64DataURL(url) {
if (typeof url !== "string") return false;
if (!url.startsWith("data:image/")) return false;
return true;
}
async function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onerror = reject;
img.onload = () => resolve(img);
img.src = src;
});
}
function getMidInputCoords(old, coords) {
return {
x: (old.x + coords.x) >> 1,
y: (old.y + coords.y) >> 1,
};
}
function getInputCoords(ev, $el) {
let x, y;
if (isTouch()) {
x = ev.touches[0].pageX;
y = ev.touches[0].pageY;
} else {
x = ev.pageX;
y = ev.pageY;
}
// check this every time for real-time resizing
const elBCRect = $el.getBoundingClientRect();
// need to consider scrolled positions
const elRect = {
left: elBCRect.left + window.pageXOffset,
top: elBCRect.top + window.pageYOffset,
};
// if canvas has styled
const elScale = {
x: $el.width / elBCRect.width,
y: $el.height / elBCRect.height,
};
return {
x: (x - elRect.left) * elScale.x,
y: (y - elRect.top) * elScale.y,
};
}
class SimpleDrawingBoard {
constructor($el) {
this._$el = $el;
this._ctx = this._$el.getContext("2d");
// handwriting fashion ;D
this._ctx.lineCap = this._ctx.lineJoin = "round";
// for canvas operation
this._isDrawMode = true;
// for drawing
this._isDrawing = false;
this._timer = null;
this._coords = {
old: { x: 0, y: 0 },
oldMid: { x: 0, y: 0 },
current: { x: 0, y: 0 },
};
this._ev = new Eve();
this._history = new History(this.toDataURL());
this._bindEvents();
this._drawFrame();
}
get canvas() {
return this._$el;
}
get observer() {
return this._ev;
}
get mode() {
return this._isDrawMode ? "draw" : "erase";
}
setLineSize(size) {
this._ctx.lineWidth = size | 0 || 1;
}
setLineColor(color) {
this._ctx.strokeStyle = color;
}
fill(color) {
const ctx = this._ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = color;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
this._saveHistory();
}
clear() {
const ctx = this._ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
this._saveHistory();
}
toggleMode() {
this._ctx.globalCompositeOperation = this._isDrawMode
? "destination-out"
: "source-over";
this._isDrawMode = !this._isDrawMode;
}
toDataURL({ type, quality } = {}) {
return this._ctx.canvas.toDataURL(type, quality);
}
fillImageByElement($el, { isOverlay = false } = {}) {
if (!isDrawableElement($el))
throw new TypeError("Passed element is not a drawable!");
const ctx = this._ctx;
// if isOverlay is true, do not clear current canvas
if (!isOverlay) ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage($el, 0, 0, ctx.canvas.width, ctx.canvas.height);
this._saveHistory();
}
async fillImageByDataURL(src, { isOverlay = false } = {}) {
if (!isBase64DataURL(src))
throw new TypeError("Passed src is not a base64 data URL!");
const img = await loadImage(src);
const ctx = this._ctx;
// if isOverlay is true, do not clear current canvas
if (!isOverlay) ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
this._saveHistory();
}
async undo() {
this._history.undo();
const base64 = this._history.value;
if (!isBase64DataURL(base64)) return;
const img = await loadImage(base64);
const ctx = this._ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
async redo() {
this._history.redo();
const base64 = this._history.value;
if (!isBase64DataURL(base64)) return;
const img = await loadImage(base64);
const ctx = this._ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
destroy() {
this._unbindEvents();
this._ev.removeAllListeners();
this._history.clear();
cancelAnimationFrame(this._timer);
this._timer = null;
}
handleEvent(ev) {
ev.preventDefault();
ev.stopPropagation();
switch (ev.type) {
case "mousedown":
case "touchstart":
this._onInputDown(ev);
break;
case "mousemove":
case "touchmove":
this._onInputMove(ev);
break;
case "mouseup":
case "touchend":
this._onInputUp();
break;
case "mouseout":
case "touchcancel":
case "gesturestart":
this._onInputCancel();
break;
}
}
_bindEvents() {
const events = isTouch()
? ["touchstart", "touchmove", "touchend", "touchcancel", "gesturestart"]
: ["mousedown", "mousemove", "mouseup", "mouseout"];
for (const ev of events) {
this._$el.addEventListener(ev, this, false);
}
}
_unbindEvents() {
const events = isTouch()
? ["touchstart", "touchmove", "touchend", "touchcancel", "gesturestart"]
: ["mousedown", "mousemove", "mouseup", "mouseout"];
for (const ev of events) {
this._$el.removeEventListener(ev, this, false);
}
}
_drawFrame() {
this._timer = requestAnimationFrame(() => this._drawFrame());
if (!this._isDrawing) return;
const isSameCoords =
this._coords.old.x === this._coords.current.x &&
this._coords.old.y === this._coords.current.y;
const currentMid = getMidInputCoords(
this._coords.old,
this._coords.current
);
const ctx = this._ctx;
ctx.beginPath();
ctx.moveTo(currentMid.x, currentMid.y);
ctx.quadraticCurveTo(
this._coords.old.x,
this._coords.old.y,
this._coords.oldMid.x,
this._coords.oldMid.y
);
ctx.stroke();
this._coords.old = this._coords.current;
this._coords.oldMid = currentMid;
if (!isSameCoords) this._ev.trigger("draw", this._coords.current);
}
_onInputDown(ev) {
this._isDrawing = true;
const coords = getInputCoords(ev, this._$el);
this._coords.current = this._coords.old = coords;
this._coords.oldMid = getMidInputCoords(this._coords.old, coords);
this._ev.trigger("drawBegin", this._coords.current);
}
_onInputMove(ev) {
this._coords.current = getInputCoords(ev, this._$el);
}
_onInputUp() {
this._ev.trigger("drawEnd", this._coords.current);
this._saveHistory();
this._isDrawing = false;
}
_onInputCancel() {
if (this._isDrawing) {
this._ev.trigger("drawEnd", this._coords.current);
this._saveHistory();
}
this._isDrawing = false;
}
_saveHistory() {
this._history.save(this.toDataURL());
this._ev.trigger("save", this._history.value);
}
}
function create($el) {
if (!($el instanceof HTMLCanvasElement))
throw new TypeError("HTMLCanvasElement must be passed as first argument!");
const sdb = new SimpleDrawingBoard($el);
return sdb;
}
exports.create = create;
Object.defineProperty(exports, '__esModule', { value: true });
})));
