Daeng Deni Mardaeni
61f065ac8c
- Optimasi algoritma untuk efisiensi yang lebih baik - Perbaikan bug yang mengganggu pengalaman pengguna - Pembaruan dokumentasi untuk mencerminkan perubahan terbaru
596 lines
23 KiB
JavaScript
596 lines
23 KiB
JavaScript
/*!
|
|
* Signature Pad v4.1.7 | https://github.com/szimek/signature_pad
|
|
* (c) 2023 Szymon Nowak | Released under the MIT license
|
|
*/
|
|
!(function (t, e) {
|
|
"object" == typeof exports && "undefined" != typeof module
|
|
? (module.exports = e())
|
|
: "function" == typeof define && define.amd
|
|
? define(e)
|
|
: ((t =
|
|
"undefined" != typeof globalThis
|
|
? globalThis
|
|
: t || self).SignaturePad = e());
|
|
})(this, function () {
|
|
"use strict";
|
|
class t {
|
|
constructor(t, e, i, s) {
|
|
if (isNaN(t) || isNaN(e))
|
|
throw new Error(`Point is invalid: (${t}, ${e})`);
|
|
(this.x = +t),
|
|
(this.y = +e),
|
|
(this.pressure = i || 0),
|
|
(this.time = s || Date.now());
|
|
}
|
|
distanceTo(t) {
|
|
return Math.sqrt(
|
|
Math.pow(this.x - t.x, 2) + Math.pow(this.y - t.y, 2),
|
|
);
|
|
}
|
|
equals(t) {
|
|
return (
|
|
this.x === t.x &&
|
|
this.y === t.y &&
|
|
this.pressure === t.pressure &&
|
|
this.time === t.time
|
|
);
|
|
}
|
|
velocityFrom(t) {
|
|
return this.time !== t.time
|
|
? this.distanceTo(t) / (this.time - t.time)
|
|
: 0;
|
|
}
|
|
}
|
|
class e {
|
|
static fromPoints(t, i) {
|
|
const s = this.calculateControlPoints(t[0], t[1], t[2]).c2,
|
|
n = this.calculateControlPoints(t[1], t[2], t[3]).c1;
|
|
return new e(t[1], s, n, t[2], i.start, i.end);
|
|
}
|
|
static calculateControlPoints(e, i, s) {
|
|
const n = e.x - i.x,
|
|
o = e.y - i.y,
|
|
h = i.x - s.x,
|
|
r = i.y - s.y,
|
|
a = (e.x + i.x) / 2,
|
|
c = (e.y + i.y) / 2,
|
|
d = (i.x + s.x) / 2,
|
|
l = (i.y + s.y) / 2,
|
|
u = Math.sqrt(n * n + o * o),
|
|
v = Math.sqrt(h * h + r * r),
|
|
_ = v / (u + v),
|
|
p = d + (a - d) * _,
|
|
m = l + (c - l) * _,
|
|
g = i.x - p,
|
|
w = i.y - m;
|
|
return { c1: new t(a + g, c + w), c2: new t(d + g, l + w) };
|
|
}
|
|
constructor(t, e, i, s, n, o) {
|
|
(this.startPoint = t),
|
|
(this.control2 = e),
|
|
(this.control1 = i),
|
|
(this.endPoint = s),
|
|
(this.startWidth = n),
|
|
(this.endWidth = o);
|
|
}
|
|
length() {
|
|
let t,
|
|
e,
|
|
i = 0;
|
|
for (let s = 0; s <= 10; s += 1) {
|
|
const n = s / 10,
|
|
o = this.point(
|
|
n,
|
|
this.startPoint.x,
|
|
this.control1.x,
|
|
this.control2.x,
|
|
this.endPoint.x,
|
|
),
|
|
h = this.point(
|
|
n,
|
|
this.startPoint.y,
|
|
this.control1.y,
|
|
this.control2.y,
|
|
this.endPoint.y,
|
|
);
|
|
if (s > 0) {
|
|
const s = o - t,
|
|
n = h - e;
|
|
i += Math.sqrt(s * s + n * n);
|
|
}
|
|
(t = o), (e = h);
|
|
}
|
|
return i;
|
|
}
|
|
point(t, e, i, s, n) {
|
|
return (
|
|
e * (1 - t) * (1 - t) * (1 - t) +
|
|
3 * i * (1 - t) * (1 - t) * t +
|
|
3 * s * (1 - t) * t * t +
|
|
n * t * t * t
|
|
);
|
|
}
|
|
}
|
|
class i {
|
|
constructor() {
|
|
try {
|
|
this._et = new EventTarget();
|
|
} catch (t) {
|
|
this._et = document;
|
|
}
|
|
}
|
|
addEventListener(t, e, i) {
|
|
this._et.addEventListener(t, e, i);
|
|
}
|
|
dispatchEvent(t) {
|
|
return this._et.dispatchEvent(t);
|
|
}
|
|
removeEventListener(t, e, i) {
|
|
this._et.removeEventListener(t, e, i);
|
|
}
|
|
}
|
|
class s extends i {
|
|
constructor(t, e = {}) {
|
|
super(),
|
|
(this.canvas = t),
|
|
(this._drawingStroke = !1),
|
|
(this._isEmpty = !0),
|
|
(this._lastPoints = []),
|
|
(this._data = []),
|
|
(this._lastVelocity = 0),
|
|
(this._lastWidth = 0),
|
|
(this._handleMouseDown = (t) => {
|
|
1 === t.buttons && this._strokeBegin(t);
|
|
}),
|
|
(this._handleMouseMove = (t) => {
|
|
this._strokeMoveUpdate(t);
|
|
}),
|
|
(this._handleMouseUp = (t) => {
|
|
1 === t.buttons && this._strokeEnd(t);
|
|
}),
|
|
(this._handleTouchStart = (t) => {
|
|
if (
|
|
(t.cancelable && t.preventDefault(),
|
|
1 === t.targetTouches.length)
|
|
) {
|
|
const e = t.changedTouches[0];
|
|
this._strokeBegin(e);
|
|
}
|
|
}),
|
|
(this._handleTouchMove = (t) => {
|
|
t.cancelable && t.preventDefault();
|
|
const e = t.targetTouches[0];
|
|
this._strokeMoveUpdate(e);
|
|
}),
|
|
(this._handleTouchEnd = (t) => {
|
|
if (t.target === this.canvas) {
|
|
t.cancelable && t.preventDefault();
|
|
const e = t.changedTouches[0];
|
|
this._strokeEnd(e);
|
|
}
|
|
}),
|
|
(this._handlePointerStart = (t) => {
|
|
t.preventDefault(), this._strokeBegin(t);
|
|
}),
|
|
(this._handlePointerMove = (t) => {
|
|
this._strokeMoveUpdate(t);
|
|
}),
|
|
(this._handlePointerEnd = (t) => {
|
|
this._drawingStroke &&
|
|
(t.preventDefault(), this._strokeEnd(t));
|
|
}),
|
|
(this.velocityFilterWeight = e.velocityFilterWeight || 0.7),
|
|
(this.minWidth = e.minWidth || 0.5),
|
|
(this.maxWidth = e.maxWidth || 2.5),
|
|
(this.throttle = "throttle" in e ? e.throttle : 16),
|
|
(this.minDistance = "minDistance" in e ? e.minDistance : 5),
|
|
(this.dotSize = e.dotSize || 0),
|
|
(this.penColor = e.penColor || "black"),
|
|
(this.backgroundColor = e.backgroundColor || "rgba(0,0,0,0)"),
|
|
(this.compositeOperation =
|
|
e.compositeOperation || "source-over"),
|
|
(this._strokeMoveUpdate = this.throttle
|
|
? (function (t, e = 250) {
|
|
let i,
|
|
s,
|
|
n,
|
|
o = 0,
|
|
h = null;
|
|
const r = () => {
|
|
(o = Date.now()),
|
|
(h = null),
|
|
(i = t.apply(s, n)),
|
|
h || ((s = null), (n = []));
|
|
};
|
|
return function (...a) {
|
|
const c = Date.now(),
|
|
d = e - (c - o);
|
|
return (
|
|
(s = this),
|
|
(n = a),
|
|
d <= 0 || d > e
|
|
? (h && (clearTimeout(h), (h = null)),
|
|
(o = c),
|
|
(i = t.apply(s, n)),
|
|
h || ((s = null), (n = [])))
|
|
: h || (h = window.setTimeout(r, d)),
|
|
i
|
|
);
|
|
};
|
|
})(s.prototype._strokeUpdate, this.throttle)
|
|
: s.prototype._strokeUpdate),
|
|
(this._ctx = t.getContext("2d")),
|
|
this.clear(),
|
|
this.on();
|
|
}
|
|
clear() {
|
|
const { _ctx: t, canvas: e } = this;
|
|
(t.fillStyle = this.backgroundColor),
|
|
t.clearRect(0, 0, e.width, e.height),
|
|
t.fillRect(0, 0, e.width, e.height),
|
|
(this._data = []),
|
|
this._reset(this._getPointGroupOptions()),
|
|
(this._isEmpty = !0);
|
|
}
|
|
fromDataURL(t, e = {}) {
|
|
return new Promise((i, s) => {
|
|
const n = new Image(),
|
|
o = e.ratio || window.devicePixelRatio || 1,
|
|
h = e.width || this.canvas.width / o,
|
|
r = e.height || this.canvas.height / o,
|
|
a = e.xOffset || 0,
|
|
c = e.yOffset || 0;
|
|
this._reset(this._getPointGroupOptions()),
|
|
(n.onload = () => {
|
|
this._ctx.drawImage(n, a, c, h, r), i();
|
|
}),
|
|
(n.onerror = (t) => {
|
|
s(t);
|
|
}),
|
|
(n.crossOrigin = "anonymous"),
|
|
(n.src = t),
|
|
(this._isEmpty = !1);
|
|
});
|
|
}
|
|
toDataURL(t = "image/png", e) {
|
|
return "image/svg+xml" === t
|
|
? ("object" != typeof e && (e = void 0),
|
|
`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`)
|
|
: ("number" != typeof e && (e = void 0),
|
|
this.canvas.toDataURL(t, e));
|
|
}
|
|
on() {
|
|
(this.canvas.style.touchAction = "none"),
|
|
(this.canvas.style.msTouchAction = "none"),
|
|
(this.canvas.style.userSelect = "none");
|
|
const t =
|
|
/Macintosh/.test(navigator.userAgent) &&
|
|
"ontouchstart" in document;
|
|
window.PointerEvent && !t
|
|
? this._handlePointerEvents()
|
|
: (this._handleMouseEvents(),
|
|
"ontouchstart" in window && this._handleTouchEvents());
|
|
}
|
|
off() {
|
|
(this.canvas.style.touchAction = "auto"),
|
|
(this.canvas.style.msTouchAction = "auto"),
|
|
(this.canvas.style.userSelect = "auto"),
|
|
this.canvas.removeEventListener(
|
|
"pointerdown",
|
|
this._handlePointerStart,
|
|
),
|
|
this.canvas.removeEventListener(
|
|
"pointermove",
|
|
this._handlePointerMove,
|
|
),
|
|
this.canvas.ownerDocument.removeEventListener(
|
|
"pointerup",
|
|
this._handlePointerEnd,
|
|
),
|
|
this.canvas.removeEventListener(
|
|
"mousedown",
|
|
this._handleMouseDown,
|
|
),
|
|
this.canvas.removeEventListener(
|
|
"mousemove",
|
|
this._handleMouseMove,
|
|
),
|
|
this.canvas.ownerDocument.removeEventListener(
|
|
"mouseup",
|
|
this._handleMouseUp,
|
|
),
|
|
this.canvas.removeEventListener(
|
|
"touchstart",
|
|
this._handleTouchStart,
|
|
),
|
|
this.canvas.removeEventListener(
|
|
"touchmove",
|
|
this._handleTouchMove,
|
|
),
|
|
this.canvas.removeEventListener(
|
|
"touchend",
|
|
this._handleTouchEnd,
|
|
);
|
|
}
|
|
isEmpty() {
|
|
return this._isEmpty;
|
|
}
|
|
fromData(t, { clear: e = !0 } = {}) {
|
|
e && this.clear(),
|
|
this._fromData(
|
|
t,
|
|
this._drawCurve.bind(this),
|
|
this._drawDot.bind(this),
|
|
),
|
|
(this._data = this._data.concat(t));
|
|
}
|
|
toData() {
|
|
return this._data;
|
|
}
|
|
_getPointGroupOptions(t) {
|
|
return {
|
|
penColor: t && "penColor" in t ? t.penColor : this.penColor,
|
|
dotSize: t && "dotSize" in t ? t.dotSize : this.dotSize,
|
|
minWidth: t && "minWidth" in t ? t.minWidth : this.minWidth,
|
|
maxWidth: t && "maxWidth" in t ? t.maxWidth : this.maxWidth,
|
|
velocityFilterWeight:
|
|
t && "velocityFilterWeight" in t
|
|
? t.velocityFilterWeight
|
|
: this.velocityFilterWeight,
|
|
compositeOperation:
|
|
t && "compositeOperation" in t
|
|
? t.compositeOperation
|
|
: this.compositeOperation,
|
|
};
|
|
}
|
|
_strokeBegin(t) {
|
|
if (
|
|
!this.dispatchEvent(
|
|
new CustomEvent("beginStroke", {
|
|
detail: t,
|
|
cancelable: !0,
|
|
}),
|
|
)
|
|
)
|
|
return;
|
|
this._drawingStroke = !0;
|
|
const e = this._getPointGroupOptions(),
|
|
i = Object.assign(Object.assign({}, e), { points: [] });
|
|
this._data.push(i), this._reset(e), this._strokeUpdate(t);
|
|
}
|
|
_strokeUpdate(t) {
|
|
if (!this._drawingStroke) return;
|
|
if (0 === this._data.length) return void this._strokeBegin(t);
|
|
this.dispatchEvent(
|
|
new CustomEvent("beforeUpdateStroke", { detail: t }),
|
|
);
|
|
const e = t.clientX,
|
|
i = t.clientY,
|
|
s =
|
|
void 0 !== t.pressure
|
|
? t.pressure
|
|
: void 0 !== t.force
|
|
? t.force
|
|
: 0,
|
|
n = this._createPoint(e, i, s),
|
|
o = this._data[this._data.length - 1],
|
|
h = o.points,
|
|
r = h.length > 0 && h[h.length - 1],
|
|
a = !!r && n.distanceTo(r) <= this.minDistance,
|
|
c = this._getPointGroupOptions(o);
|
|
if (!r || !r || !a) {
|
|
const t = this._addPoint(n, c);
|
|
r ? t && this._drawCurve(t, c) : this._drawDot(n, c),
|
|
h.push({
|
|
time: n.time,
|
|
x: n.x,
|
|
y: n.y,
|
|
pressure: n.pressure,
|
|
});
|
|
}
|
|
this.dispatchEvent(
|
|
new CustomEvent("afterUpdateStroke", { detail: t }),
|
|
);
|
|
}
|
|
_strokeEnd(t) {
|
|
this._drawingStroke &&
|
|
(this._strokeUpdate(t),
|
|
(this._drawingStroke = !1),
|
|
this.dispatchEvent(
|
|
new CustomEvent("endStroke", { detail: t }),
|
|
));
|
|
}
|
|
_handlePointerEvents() {
|
|
(this._drawingStroke = !1),
|
|
this.canvas.addEventListener(
|
|
"pointerdown",
|
|
this._handlePointerStart,
|
|
),
|
|
this.canvas.addEventListener(
|
|
"pointermove",
|
|
this._handlePointerMove,
|
|
),
|
|
this.canvas.ownerDocument.addEventListener(
|
|
"pointerup",
|
|
this._handlePointerEnd,
|
|
);
|
|
}
|
|
_handleMouseEvents() {
|
|
(this._drawingStroke = !1),
|
|
this.canvas.addEventListener(
|
|
"mousedown",
|
|
this._handleMouseDown,
|
|
),
|
|
this.canvas.addEventListener(
|
|
"mousemove",
|
|
this._handleMouseMove,
|
|
),
|
|
this.canvas.ownerDocument.addEventListener(
|
|
"mouseup",
|
|
this._handleMouseUp,
|
|
);
|
|
}
|
|
_handleTouchEvents() {
|
|
this.canvas.addEventListener("touchstart", this._handleTouchStart),
|
|
this.canvas.addEventListener(
|
|
"touchmove",
|
|
this._handleTouchMove,
|
|
),
|
|
this.canvas.addEventListener("touchend", this._handleTouchEnd);
|
|
}
|
|
_reset(t) {
|
|
(this._lastPoints = []),
|
|
(this._lastVelocity = 0),
|
|
(this._lastWidth = (t.minWidth + t.maxWidth) / 2),
|
|
(this._ctx.fillStyle = t.penColor),
|
|
(this._ctx.globalCompositeOperation = t.compositeOperation);
|
|
}
|
|
_createPoint(e, i, s) {
|
|
const n = this.canvas.getBoundingClientRect();
|
|
return new t(e - n.left, i - n.top, s, new Date().getTime());
|
|
}
|
|
_addPoint(t, i) {
|
|
const { _lastPoints: s } = this;
|
|
if ((s.push(t), s.length > 2)) {
|
|
3 === s.length && s.unshift(s[0]);
|
|
const t = this._calculateCurveWidths(s[1], s[2], i),
|
|
n = e.fromPoints(s, t);
|
|
return s.shift(), n;
|
|
}
|
|
return null;
|
|
}
|
|
_calculateCurveWidths(t, e, i) {
|
|
const s =
|
|
i.velocityFilterWeight * e.velocityFrom(t) +
|
|
(1 - i.velocityFilterWeight) * this._lastVelocity,
|
|
n = this._strokeWidth(s, i),
|
|
o = { end: n, start: this._lastWidth };
|
|
return (this._lastVelocity = s), (this._lastWidth = n), o;
|
|
}
|
|
_strokeWidth(t, e) {
|
|
return Math.max(e.maxWidth / (t + 1), e.minWidth);
|
|
}
|
|
_drawCurveSegment(t, e, i) {
|
|
const s = this._ctx;
|
|
s.moveTo(t, e),
|
|
s.arc(t, e, i, 0, 2 * Math.PI, !1),
|
|
(this._isEmpty = !1);
|
|
}
|
|
_drawCurve(t, e) {
|
|
const i = this._ctx,
|
|
s = t.endWidth - t.startWidth,
|
|
n = 2 * Math.ceil(t.length());
|
|
i.beginPath(), (i.fillStyle = e.penColor);
|
|
for (let i = 0; i < n; i += 1) {
|
|
const o = i / n,
|
|
h = o * o,
|
|
r = h * o,
|
|
a = 1 - o,
|
|
c = a * a,
|
|
d = c * a;
|
|
let l = d * t.startPoint.x;
|
|
(l += 3 * c * o * t.control1.x),
|
|
(l += 3 * a * h * t.control2.x),
|
|
(l += r * t.endPoint.x);
|
|
let u = d * t.startPoint.y;
|
|
(u += 3 * c * o * t.control1.y),
|
|
(u += 3 * a * h * t.control2.y),
|
|
(u += r * t.endPoint.y);
|
|
const v = Math.min(t.startWidth + r * s, e.maxWidth);
|
|
this._drawCurveSegment(l, u, v);
|
|
}
|
|
i.closePath(), i.fill();
|
|
}
|
|
_drawDot(t, e) {
|
|
const i = this._ctx,
|
|
s = e.dotSize > 0 ? e.dotSize : (e.minWidth + e.maxWidth) / 2;
|
|
i.beginPath(),
|
|
this._drawCurveSegment(t.x, t.y, s),
|
|
i.closePath(),
|
|
(i.fillStyle = e.penColor),
|
|
i.fill();
|
|
}
|
|
_fromData(e, i, s) {
|
|
for (const n of e) {
|
|
const { points: e } = n,
|
|
o = this._getPointGroupOptions(n);
|
|
if (e.length > 1)
|
|
for (let s = 0; s < e.length; s += 1) {
|
|
const n = e[s],
|
|
h = new t(n.x, n.y, n.pressure, n.time);
|
|
0 === s && this._reset(o);
|
|
const r = this._addPoint(h, o);
|
|
r && i(r, o);
|
|
}
|
|
else this._reset(o), s(e[0], o);
|
|
}
|
|
}
|
|
toSVG({ includeBackgroundColor: t = !1 } = {}) {
|
|
const e = this._data,
|
|
i = Math.max(window.devicePixelRatio || 1, 1),
|
|
s = this.canvas.width / i,
|
|
n = this.canvas.height / i,
|
|
o = document.createElementNS(
|
|
"http://www.w3.org/2000/svg",
|
|
"svg",
|
|
);
|
|
if (
|
|
(o.setAttribute("xmlns", "http://www.w3.org/2000/svg"),
|
|
o.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"),
|
|
o.setAttribute("viewBox", `0 0 ${s} ${n}`),
|
|
o.setAttribute("width", s.toString()),
|
|
o.setAttribute("height", n.toString()),
|
|
t && this.backgroundColor)
|
|
) {
|
|
const t = document.createElement("rect");
|
|
t.setAttribute("width", "100%"),
|
|
t.setAttribute("height", "100%"),
|
|
t.setAttribute("fill", this.backgroundColor),
|
|
o.appendChild(t);
|
|
}
|
|
return (
|
|
this._fromData(
|
|
e,
|
|
(t, { penColor: e }) => {
|
|
const i = document.createElement("path");
|
|
if (
|
|
!(
|
|
isNaN(t.control1.x) ||
|
|
isNaN(t.control1.y) ||
|
|
isNaN(t.control2.x) ||
|
|
isNaN(t.control2.y)
|
|
)
|
|
) {
|
|
const s = `M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`;
|
|
i.setAttribute("d", s),
|
|
i.setAttribute(
|
|
"stroke-width",
|
|
(2.25 * t.endWidth).toFixed(3),
|
|
),
|
|
i.setAttribute("stroke", e),
|
|
i.setAttribute("fill", "none"),
|
|
i.setAttribute("stroke-linecap", "round"),
|
|
o.appendChild(i);
|
|
}
|
|
},
|
|
(
|
|
t,
|
|
{ penColor: e, dotSize: i, minWidth: s, maxWidth: n },
|
|
) => {
|
|
const h = document.createElement("circle"),
|
|
r = i > 0 ? i : (s + n) / 2;
|
|
h.setAttribute("r", r.toString()),
|
|
h.setAttribute("cx", t.x.toString()),
|
|
h.setAttribute("cy", t.y.toString()),
|
|
h.setAttribute("fill", e),
|
|
o.appendChild(h);
|
|
},
|
|
),
|
|
o.outerHTML
|
|
);
|
|
}
|
|
}
|
|
return s;
|
|
});
|
|
//# sourceMappingURL=signature_pad.umd.min.js.map
|