@net-advantage/nabs-ui-signature 0.69.0 → 0.71.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(e,t){let n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}}function r(e,t){if(t.length!==0){e.beginPath(),e.moveTo(t[0].x,t[0].y);for(let n=1;n<t.length;n+=1)e.lineTo(t[n].x,t[n].y);e.stroke()}}function i(e,t,n){e.fillStyle=n,e.fillRect(0,0,t.width,t.height)}function a({label:
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(e,t){let n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}}function r(e,t){if(t.length!==0){e.beginPath(),e.moveTo(t[0].x,t[0].y);for(let n=1;n<t.length;n+=1)e.lineTo(t[n].x,t[n].y);e.stroke()}}function i(e,t,n){e.fillStyle=n,e.fillRect(0,0,t.width,t.height)}function a(e,t){return e||`nabs-ui-signature-${t.replace(/:/g,``)}`}function o({disabled:e,className:t,labelClassName:n,helperTextClassName:r,padClassName:i,canvasClassName:a}){return{classes:[`nabs-ui-signature`,e?`nabs-ui-signature--disabled`:``,t??``].filter(Boolean).join(` `),labelClasses:[`nabs-ui-signature__label`,n??``].filter(Boolean).join(` `),helperClasses:[`nabs-ui-signature__helper`,r??``].filter(Boolean).join(` `),padClasses:[`nabs-ui-signature__pad`,i??``].filter(Boolean).join(` `),canvasClasses:[`nabs-ui-signature__canvas`,a??``].filter(Boolean).join(` `)}}function s({label:s=`Signature`,helperText:c=`Use your mouse to draw your signature.`,value:l=``,disabled:u=!1,className:d=``,labelClassName:f=``,helperTextClassName:p=``,padClassName:m=``,canvasClassName:h=``,id:g,width:_=720,height:v=240,backgroundColor:y=`#ffffff`,penColor:b=`#0f172a`,penWidth:x=2.5,onChange:S,onBeginStroke:C,onEndStroke:w,onClear:T}){let E=a(g,(0,e.useId)()),D=(0,e.useRef)(null),O=(0,e.useRef)(null),k=(0,e.useRef)(!1),A=(0,e.useRef)([]),[j,M]=(0,e.useState)(!l),{classes:N,labelClasses:P,helperClasses:F,padClasses:I,canvasClasses:L}=o({disabled:u,className:d,labelClassName:f,helperTextClassName:p,padClassName:m,canvasClassName:h});(0,e.useEffect)(()=>{let e=D.current;if(!e)return;let t=e.getContext(`2d`);if(!t)return;let n=window.devicePixelRatio||1,r=Math.round(_),a=Math.round(v);if(e.width=Math.round(r*n),e.height=Math.round(a*n),e.style.width=`${r}px`,e.style.height=`${a}px`,O.current=t,t.lineCap=`round`,t.lineJoin=`round`,t.lineWidth=x*n,t.strokeStyle=b,t.scale(n,n),i(t,e,y),l){let e=new Image;e.onload=()=>{t.clearRect(0,0,r,a),t.fillStyle=y,t.fillRect(0,0,r,a),t.drawImage(e,0,0,r,a),M(!1)},e.src=l}return()=>{O.current=null}},[y,b,x,l,_,v]);let R=e=>{S?.(e.toDataURL(`image/png`))},z=e=>{if(u||k.current)return;let t=D.current,r=O.current;!t||!r||(`pointerId`in e&&typeof e.pointerId==`number`&&t.setPointerCapture&&t.setPointerCapture(e.pointerId),k.current=!0,A.current=[n(e,t)],r.beginPath(),r.moveTo(A.current[0].x,A.current[0].y),C?.())},B=e=>{if(u||!k.current)return;let t=D.current,r=O.current;if(!t||!r)return;let i=n(e,t);A.current.push(i),r.lineTo(i.x,i.y),r.stroke(),M(!1)},V=e=>{let t=D.current,n=O.current;if(!(!t||!n||!k.current)){if(e&&`pointerId`in e&&typeof e.pointerId==`number`&&t.releasePointerCapture)try{t.releasePointerCapture(e.pointerId)}catch{}k.current=!1,r(n,A.current),A.current=[],R(t),w?.()}};return(0,t.jsxs)(`div`,{className:N,children:[(0,t.jsx)(`div`,{className:P,id:`${E}-label`,children:s}),c?(0,t.jsx)(`div`,{className:F,children:c}):null,(0,t.jsxs)(`div`,{className:I,children:[(0,t.jsx)(`canvas`,{id:E,ref:D,className:L,role:`img`,"aria-labelledby":`${E}-label`,"aria-label":s,onPointerDown:z,onPointerMove:B,onPointerUp:V,onPointerCancel:V,onPointerLeave:V,onMouseDown:z,onMouseMove:B,onMouseUp:V,onMouseLeave:V}),(0,t.jsx)(`div`,{className:`nabs-ui-signature__placeholder`,"aria-hidden":`true`,children:j?`Draw here`:null})]}),(0,t.jsx)(`div`,{className:`nabs-ui-signature__actions`,children:(0,t.jsx)(`button`,{type:`button`,className:`nabs-ui-signature__clearButton`,onClick:()=>{let e=D.current,t=O.current;!e||!t||(t.clearRect(0,0,e.width,e.height),i(t,e,y),M(!0),S?.(``),T?.())},disabled:u||j,children:`Clear`})})]})}exports.Signature=s;
|
|
@@ -19,91 +19,114 @@ function c(e, t, n) {
|
|
|
19
19
|
e.fillStyle = n, e.fillRect(0, 0, t.width, t.height);
|
|
20
20
|
}
|
|
21
21
|
//#endregion
|
|
22
|
+
//#region src/signature.model.ts
|
|
23
|
+
function l(e, t) {
|
|
24
|
+
return e || `nabs-ui-signature-${t.replace(/:/g, "")}`;
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region src/signature.view-model.ts
|
|
28
|
+
function u({ disabled: e, className: t, labelClassName: n, helperTextClassName: r, padClassName: i, canvasClassName: a }) {
|
|
29
|
+
return {
|
|
30
|
+
classes: [
|
|
31
|
+
"nabs-ui-signature",
|
|
32
|
+
e ? "nabs-ui-signature--disabled" : "",
|
|
33
|
+
t ?? ""
|
|
34
|
+
].filter(Boolean).join(" "),
|
|
35
|
+
labelClasses: ["nabs-ui-signature__label", n ?? ""].filter(Boolean).join(" "),
|
|
36
|
+
helperClasses: ["nabs-ui-signature__helper", r ?? ""].filter(Boolean).join(" "),
|
|
37
|
+
padClasses: ["nabs-ui-signature__pad", i ?? ""].filter(Boolean).join(" "),
|
|
38
|
+
canvasClasses: ["nabs-ui-signature__canvas", a ?? ""].filter(Boolean).join(" ")
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
//#endregion
|
|
22
42
|
//#region src/Signature.tsx
|
|
23
|
-
function
|
|
24
|
-
let
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
43
|
+
function d({ label: d = "Signature", helperText: f = "Use your mouse to draw your signature.", value: p = "", disabled: m = !1, className: h = "", labelClassName: g = "", helperTextClassName: _ = "", padClassName: v = "", canvasClassName: y = "", id: b, width: x = 720, height: S = 240, backgroundColor: C = "#ffffff", penColor: w = "#0f172a", penWidth: T = 2.5, onChange: E, onBeginStroke: D, onEndStroke: O, onClear: k }) {
|
|
44
|
+
let A = l(b, t()), j = n(null), M = n(null), N = n(!1), P = n([]), [F, I] = r(!p), { classes: L, labelClasses: R, helperClasses: z, padClasses: B, canvasClasses: V } = u({
|
|
45
|
+
disabled: m,
|
|
46
|
+
className: h,
|
|
47
|
+
labelClassName: g,
|
|
48
|
+
helperTextClassName: _,
|
|
49
|
+
padClassName: v,
|
|
50
|
+
canvasClassName: y
|
|
51
|
+
});
|
|
29
52
|
e(() => {
|
|
30
|
-
let e =
|
|
53
|
+
let e = j.current;
|
|
31
54
|
if (!e) return;
|
|
32
55
|
let t = e.getContext("2d");
|
|
33
56
|
if (!t) return;
|
|
34
|
-
let n = window.devicePixelRatio || 1, r = Math.round(
|
|
35
|
-
if (e.width = Math.round(r * n), e.height = Math.round(i * n), e.style.width = `${r}px`, e.style.height = `${i}px`,
|
|
57
|
+
let n = window.devicePixelRatio || 1, r = Math.round(x), i = Math.round(S);
|
|
58
|
+
if (e.width = Math.round(r * n), e.height = Math.round(i * n), e.style.width = `${r}px`, e.style.height = `${i}px`, M.current = t, t.lineCap = "round", t.lineJoin = "round", t.lineWidth = T * n, t.strokeStyle = w, t.scale(n, n), c(t, e, C), p) {
|
|
36
59
|
let e = new Image();
|
|
37
60
|
e.onload = () => {
|
|
38
|
-
t.clearRect(0, 0, r, i), t.fillStyle =
|
|
39
|
-
}, e.src =
|
|
61
|
+
t.clearRect(0, 0, r, i), t.fillStyle = C, t.fillRect(0, 0, r, i), t.drawImage(e, 0, 0, r, i), I(!1);
|
|
62
|
+
}, e.src = p;
|
|
40
63
|
}
|
|
41
64
|
return () => {
|
|
42
|
-
|
|
65
|
+
M.current = null;
|
|
43
66
|
};
|
|
44
67
|
}, [
|
|
45
|
-
x,
|
|
46
|
-
S,
|
|
47
68
|
C,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
69
|
+
w,
|
|
70
|
+
T,
|
|
71
|
+
p,
|
|
72
|
+
x,
|
|
73
|
+
S
|
|
51
74
|
]);
|
|
52
|
-
let
|
|
53
|
-
|
|
54
|
-
}, H = (e) => {
|
|
55
|
-
if (f || M.current) return;
|
|
56
|
-
let t = A.current, n = j.current;
|
|
57
|
-
!t || !n || ("pointerId" in e && typeof e.pointerId == "number" && t.setPointerCapture && t.setPointerCapture(e.pointerId), M.current = !0, N.current = [o(e, t)], n.beginPath(), n.moveTo(N.current[0].x, N.current[0].y), T?.());
|
|
75
|
+
let H = (e) => {
|
|
76
|
+
E?.(e.toDataURL("image/png"));
|
|
58
77
|
}, U = (e) => {
|
|
59
|
-
if (
|
|
60
|
-
let t =
|
|
78
|
+
if (m || N.current) return;
|
|
79
|
+
let t = j.current, n = M.current;
|
|
80
|
+
!t || !n || ("pointerId" in e && typeof e.pointerId == "number" && t.setPointerCapture && t.setPointerCapture(e.pointerId), N.current = !0, P.current = [o(e, t)], n.beginPath(), n.moveTo(P.current[0].x, P.current[0].y), D?.());
|
|
81
|
+
}, W = (e) => {
|
|
82
|
+
if (m || !N.current) return;
|
|
83
|
+
let t = j.current, n = M.current;
|
|
61
84
|
if (!t || !n) return;
|
|
62
85
|
let r = o(e, t);
|
|
63
|
-
|
|
64
|
-
},
|
|
65
|
-
let t =
|
|
66
|
-
if (!(!t || !n || !
|
|
86
|
+
P.current.push(r), n.lineTo(r.x, r.y), n.stroke(), I(!1);
|
|
87
|
+
}, G = (e) => {
|
|
88
|
+
let t = j.current, n = M.current;
|
|
89
|
+
if (!(!t || !n || !N.current)) {
|
|
67
90
|
if (e && "pointerId" in e && typeof e.pointerId == "number" && t.releasePointerCapture) try {
|
|
68
91
|
t.releasePointerCapture(e.pointerId);
|
|
69
92
|
} catch {}
|
|
70
|
-
|
|
93
|
+
N.current = !1, s(n, P.current), P.current = [], H(t), O?.();
|
|
71
94
|
}
|
|
72
95
|
};
|
|
73
96
|
return /* @__PURE__ */ a("div", {
|
|
74
|
-
className:
|
|
97
|
+
className: L,
|
|
75
98
|
children: [
|
|
76
99
|
/* @__PURE__ */ i("div", {
|
|
77
|
-
className: L,
|
|
78
|
-
id: `${k}-label`,
|
|
79
|
-
children: l
|
|
80
|
-
}),
|
|
81
|
-
u ? /* @__PURE__ */ i("div", {
|
|
82
100
|
className: R,
|
|
83
|
-
|
|
101
|
+
id: `${A}-label`,
|
|
102
|
+
children: d
|
|
103
|
+
}),
|
|
104
|
+
f ? /* @__PURE__ */ i("div", {
|
|
105
|
+
className: z,
|
|
106
|
+
children: f
|
|
84
107
|
}) : null,
|
|
85
108
|
/* @__PURE__ */ a("div", {
|
|
86
|
-
className:
|
|
109
|
+
className: B,
|
|
87
110
|
children: [/* @__PURE__ */ i("canvas", {
|
|
88
|
-
id:
|
|
89
|
-
ref:
|
|
90
|
-
className:
|
|
111
|
+
id: A,
|
|
112
|
+
ref: j,
|
|
113
|
+
className: V,
|
|
91
114
|
role: "img",
|
|
92
|
-
"aria-labelledby": `${
|
|
93
|
-
"aria-label":
|
|
94
|
-
onPointerDown:
|
|
95
|
-
onPointerMove:
|
|
96
|
-
onPointerUp:
|
|
97
|
-
onPointerCancel:
|
|
98
|
-
onPointerLeave:
|
|
99
|
-
onMouseDown:
|
|
100
|
-
onMouseMove:
|
|
101
|
-
onMouseUp:
|
|
102
|
-
onMouseLeave:
|
|
115
|
+
"aria-labelledby": `${A}-label`,
|
|
116
|
+
"aria-label": d,
|
|
117
|
+
onPointerDown: U,
|
|
118
|
+
onPointerMove: W,
|
|
119
|
+
onPointerUp: G,
|
|
120
|
+
onPointerCancel: G,
|
|
121
|
+
onPointerLeave: G,
|
|
122
|
+
onMouseDown: U,
|
|
123
|
+
onMouseMove: W,
|
|
124
|
+
onMouseUp: G,
|
|
125
|
+
onMouseLeave: G
|
|
103
126
|
}), /* @__PURE__ */ i("div", {
|
|
104
127
|
className: "nabs-ui-signature__placeholder",
|
|
105
128
|
"aria-hidden": "true",
|
|
106
|
-
children:
|
|
129
|
+
children: F ? "Draw here" : null
|
|
107
130
|
})]
|
|
108
131
|
}),
|
|
109
132
|
/* @__PURE__ */ i("div", {
|
|
@@ -112,10 +135,10 @@ function l({ label: l = "Signature", helperText: u = "Use your mouse to draw you
|
|
|
112
135
|
type: "button",
|
|
113
136
|
className: "nabs-ui-signature__clearButton",
|
|
114
137
|
onClick: () => {
|
|
115
|
-
let e =
|
|
116
|
-
!e || !t || (t.clearRect(0, 0, e.width, e.height), c(t, e,
|
|
138
|
+
let e = j.current, t = M.current;
|
|
139
|
+
!e || !t || (t.clearRect(0, 0, e.width, e.height), c(t, e, C), I(!0), E?.(""), k?.());
|
|
117
140
|
},
|
|
118
|
-
disabled:
|
|
141
|
+
disabled: m || F,
|
|
119
142
|
children: "Clear"
|
|
120
143
|
})
|
|
121
144
|
})
|
|
@@ -123,4 +146,4 @@ function l({ label: l = "Signature", helperText: u = "Use your mouse to draw you
|
|
|
123
146
|
});
|
|
124
147
|
}
|
|
125
148
|
//#endregion
|
|
126
|
-
export {
|
|
149
|
+
export { d as Signature };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { getPointerPosition, drawStroke, resetCanvas } from './signature.utils';
|
|
2
|
+
export declare function buildSignatureId(id: string | undefined, generatedId: string): string;
|
|
3
|
+
export declare function toSignatureStateLabel({ isEmpty, disabled, }: {
|
|
4
|
+
isEmpty: boolean;
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
}): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare function buildSignatureClassNames({ disabled, className, labelClassName, helperTextClassName, padClassName, canvasClassName, }: {
|
|
2
|
+
disabled: boolean;
|
|
3
|
+
className?: string;
|
|
4
|
+
labelClassName?: string;
|
|
5
|
+
helperTextClassName?: string;
|
|
6
|
+
padClassName?: string;
|
|
7
|
+
canvasClassName?: string;
|
|
8
|
+
}): {
|
|
9
|
+
classes: string;
|
|
10
|
+
labelClasses: string;
|
|
11
|
+
helperClasses: string;
|
|
12
|
+
padClasses: string;
|
|
13
|
+
canvasClasses: string;
|
|
14
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@net-advantage/nabs-ui-signature",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.71.0",
|
|
4
4
|
"description": "Reusable signature pad control for the Nabs UI library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/nabs-ui-signature.cjs",
|
|
@@ -25,11 +25,16 @@
|
|
|
25
25
|
"@types/react": "^19.0.0",
|
|
26
26
|
"@types/react-dom": "^19.0.0",
|
|
27
27
|
"@vitejs/plugin-react": "^6.0.1",
|
|
28
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
28
29
|
"react-dom": "^19.2.6",
|
|
29
|
-
"vite": "^8.0.12"
|
|
30
|
+
"vite": "^8.0.12",
|
|
31
|
+
"vitest": "^3.2.4"
|
|
30
32
|
},
|
|
31
33
|
"scripts": {
|
|
32
34
|
"build": "vite build",
|
|
33
|
-
"dev": "vite"
|
|
35
|
+
"dev": "vite",
|
|
36
|
+
"test:unit": "vitest run",
|
|
37
|
+
"test:unit:watch": "vitest",
|
|
38
|
+
"test:unit:coverage": "vitest run --coverage --coverage.reporter=html --coverage.reporter=json-summary --coverage.reporter=text-summary"
|
|
34
39
|
}
|
|
35
40
|
}
|