@uiw/react-signature
Version:
A signature board component for react.
2 lines • 13.4 kB
JavaScript
/*! For license information please see dist.min.js.LICENSE.txt */
!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("react")):"function"===typeof define&&define.amd?define(["react"],t):"object"===typeof exports?exports["@uiw/react-signature"]=t(require("react")):e["@uiw/react-signature"]=t(e.React)}(self,e=>(()=>{"use strict";var t={192(e,t,n){var r=n(442),o=Symbol.for("react.element"),u=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,c=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,u={},l=null,f=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(f=t.ref),t)i.call(t,r)&&!a.hasOwnProperty(r)&&(u[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===u[r]&&(u[r]=t[r]);return{$$typeof:o,type:e,key:l,ref:f,props:u,_owner:c.current}}t.jsx=l,t.jsxs=l},540(e,t,n){e.exports=n(192)},442(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var u=n[e]={exports:{}};return t[e](u,u.exports,r),u.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function i(e){var t=function(e,t){if("object"!=u(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=u(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==u(t)?t:t+""}function c(e,t,n){return(t=i(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach(function(t){c(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function s(e,t){if(e){if("string"==typeof e)return f(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}function p(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,u,i,c=[],a=!0,l=!1;try{if(u=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=u.call(n)).done)&&(c.push(r.value),c.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{if(!a&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(l)throw o}}return c}}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(r=0;r<u.length;r++)n=u[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}r.r(o),r.d(o,{OptionContext:()=>x,OptionDispatchContext:()=>P,PointerContext:()=>y,PointerDispatchContext:()=>g,default:()=>we,defaultOptions:()=>j,defaultStyle:()=>M,getBoundingClientRect:()=>k,getClinetXY:()=>R,getStroke:()=>Oe,getStrokeOutlinePoints:()=>ye,getStrokePoints:()=>be,getSvgPathFromStroke:()=>_,initialState:()=>h,reducer:()=>m,reducerOption:()=>S,useDispatch:()=>O,useEvent:()=>A,useOptionDispatch:()=>E,useOptionStore:()=>w,useStore:()=>b});var v=r(442),h={},y=(0,v.createContext)(h),g=(0,v.createContext)(function(){});function m(e,t){return t&&0===Object.keys(t).length?h:l(l({},e),t)}var b=function(){return(0,v.useContext)(y)},O=function(){return(0,v.useContext)(g)},j={size:6,smoothing:.46,thinning:.73,streamline:.5,easing:function(e){return e},start:{taper:0,easing:function(e){return e},cap:!0},end:{taper:0,easing:function(e){return e},cap:!0}},x=(0,v.createContext)(j),P=(0,v.createContext)(function(){});function S(e,t){return l(l({},e),t)}var w=function(){return(0,v.useContext)(x)},E=function(){return(0,v.useContext)(P)};function C(e){return function(e){if(Array.isArray(e))return f(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||s(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e){if(!e.length)return"";var t=e.reduce(function(e,t,n,r){var o=p(t,2),u=o[0],i=o[1],c=p(r[(n+1)%r.length],2),a=c[0],l=c[1];return e.push(u,i,(u+a)/2,(i+l)/2),e},["M"].concat(C(e[0]),["Q"]));return t.push("Z"),t.join(" ")}var k=function(e){var t=null===e||void 0===e?void 0:e.getBoundingClientRect();return{offsetX:(null===t||void 0===t?void 0:t.left)||0,offsetY:(null===t||void 0===t?void 0:t.top)||0}},R=function(e){return{clientX:e.clientX,clientY:e.clientY}},M={"--w-signature-background":"#fff",touchAction:"none",position:"relative",width:"100%",height:"100%",backgroundColor:"var(--w-signature-background)"};function A(e){var t=(0,v.useRef)(e);return(0,v.useEffect)(function(){t.current=e}),(0,v.useCallback)(function(e){return t.current&&t.current(e)},[])}var L=r(540),I=["className","prefixCls","style","readonly","onPointer","children"],D=(0,v.forwardRef)(function(e,t){var n=e.className,r=e.prefixCls,o=void 0===r?"w-signature":r,u=e.style,i=e.readonly,a=void 0!==i&&i,f=e.onPointer,s=e.children,p=d(e,I),h=[n,o].filter(Boolean).join(" "),y=(0,v.useRef)(null),g=(0,v.useRef)(),m=(0,v.useRef)(),b=(0,v.useRef)(0),j=(0,v.useId)(),x=O();(0,v.useImperativeHandle)(t,function(){return{svg:y.current,dispatch:x,clear:function(){return x({})}}},[y.current,x]);var P=A(function(e){if(!a){b.current+=1;var t=k(y.current),n=t.offsetY,r=t.offsetX,o=e,u=o.clientX||o.nativeEvent.clientX,i=o.clientY||o.nativeEvent.clientY;m.current=[[u-r,i-n]];var l=document.createElementNS("http://www.w3.org/2000/svg","path");g.current=l,y.current.appendChild(l),x(c({},j+b.current,m.current)),document.addEventListener("pointermove",S)}}),S=A(function(e){if(g.current){var t=k(y.current),n=t.offsetY,r=t.offsetX,o=R(e),u=o.clientX,i=o.clientY;m.current=[].concat(C(m.current),[[u-r,i-n]]),x(c({},j+b.current,m.current))}}),w=A(function(){if(m.current){var t=m.current||[];f&&e.onPointer(t),g.current&&y.current&&y.current.contains(g.current)&&y.current.removeChild(g.current),g.current=void 0,m.current=void 0,document.removeEventListener("pointermove",S)}});(0,v.useEffect)(function(){var e;return document.addEventListener("pointerup",w),null===(e=y.current)||void 0===e||e.addEventListener("pointerdown",P),function(){var e;document.removeEventListener("pointerup",w),null===(e=y.current)||void 0===e||e.removeEventListener("pointerdown",P)}},[]);var E=l(l({},M),u);return(0,L.jsx)("svg",l(l({},p),{},{ref:y,className:h,style:E,children:s}))});const{PI:N}=Math,Y=N+1e-4,X=.5,T=[1,1];function B(e,t,n,r=e=>e){return e*r(.5-t*(.5-n))}const{min:z}=Math;function F(e,t,n){let r=z(1,t/n);return z(1,e+(z(1,1-r)-e)*(.275*r))}function U(e,t){return[e[0]+t[0],e[1]+t[1]]}function $(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e}function q(e,t){return[e[0]-t[0],e[1]-t[1]]}function H(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e}function Q(e,t){return[e[0]*t,e[1]*t]}function W(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e}function Z(e){return[e[1],-e[0]]}function G(e,t){let n=t[0];return e[0]=t[1],e[1]=-n,e}function J(e,t){return e[0]*t[0]+e[1]*t[1]}function K(e,t){return e[0]===t[0]&&e[1]===t[1]}function V(e,t){let n=e[0]-t[0],r=e[1]-t[1];return n*n+r*r}function ee(e){return function(e,t){return[e[0]/t,e[1]/t]}(e,function(e){return Math.hypot(e[0],e[1])}(e))}function te(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function ne(e,t,n){let r=Math.sin(n),o=Math.cos(n),u=e[0]-t[0],i=e[1]-t[1],c=u*r+i*o;return[u*o-i*r+t[0],c+t[1]]}function re(e,t,n,r){let o=Math.sin(r),u=Math.cos(r),i=t[0]-n[0],c=t[1]-n[1],a=i*u-c*o,l=i*o+c*u;return e[0]=a+n[0],e[1]=l+n[1],e}function oe(e,t,n){return U(e,Q(q(t,e),n))}function ue(e,t,n,r){let o=n[0]-t[0],u=n[1]-t[1];return e[0]=t[0]+o*r,e[1]=t[1]+u*r,e}function ie(e,t,n){return U(e,Q(t,n))}const ce=[0,0],ae=[0,0],le=[0,0];function fe(e,t){let n=ie(e,ee(Z(q(e,U(e,[1,1])))),-t),r=[],o=1/13;for(let u=o;u<=1;u+=o)r.push(ne(n,e,2*Y*u));return r}function se(e,t,n){let r=[],o=1/n;for(let u=o;u<=1;u+=o)r.push(ne(t,e,Y*u));return r}function pe(e,t,n){let r=q(t,n),o=Q(r,.5),u=Q(r,.51);return[q(e,o),q(e,u),U(e,u),U(e,o)]}function de(e,t,n,r){let o=[],u=ie(e,t,n),i=1/r;for(let c=i;c<1;c+=i)o.push(ne(u,e,3*Y*c));return o}function ve(e,t,n){return[U(e,Q(t,n)),U(e,Q(t,.99*n)),q(e,Q(t,.99*n)),q(e,Q(t,n))]}function he(e,t,n){return!1===e||void 0===e?0:!0===e?Math.max(t,n):e}function ye(e,t={}){let{size:n=16,smoothing:r=.5,thinning:o=.5,simulatePressure:u=!0,easing:i=e=>e,start:c={},end:a={},last:l=!1}=t,{cap:f=!0,easing:s=e=>e*(2-e)}=c,{cap:p=!0,easing:d=e=>--e*e*e+1}=a;if(0===e.length||n<=0)return[];let v,h=e[e.length-1].runningLength,y=he(c.taper,n,h),g=he(a.taper,n,h),m=(n*r)**2,b=[],O=[],j=function(e,t,n){return e.slice(0,10).reduce((e,r)=>{let o=r.pressure;return t&&(o=F(e,r.distance,n)),(e+o)/2},e[0].pressure)}(e,u,n),x=B(n,o,e[e.length-1].pressure,i),P=e[0].vector,S=e[0].point,w=S,E=S,C=w,_=!1;for(let L=0;L<e.length;L++){let{pressure:t}=e[L],{point:r,vector:c,distance:a,runningLength:l}=e[L],f=L===e.length-1;if(!f&&h-l<3)continue;o?(u&&(t=F(j,a,n)),x=B(n,o,t,i)):x=n/2,void 0===v&&(v=x);let p=l<y?s(l/y):1,k=h-l<g?d((h-l)/g):1;x=Math.max(.01,x*Math.min(p,k));let R=(f?e[L]:e[L+1]).vector,M=f?1:J(c,R),A=null!==M&&M<0;if(J(c,P)<0&&!_||A){G(ce,P),W(ce,ce,x);for(let e=0;e<=1;e+=.07692307692307693)H(ae,r,ce),re(ae,ae,r,Y*e),E=[ae[0],ae[1]],b.push(E),$(le,r,ce),re(le,le,r,Y*-e),C=[le[0],le[1]],O.push(C);S=E,w=C,A&&(_=!0)}else _=!1,f?(G(ce,c),W(ce,ce,x),b.push(q(r,ce)),O.push(U(r,ce))):(ue(ce,R,c,M),G(ce,ce),W(ce,ce,x),H(ae,r,ce),E=[ae[0],ae[1]],(L<=1||V(S,E)>m)&&(b.push(E),S=E),$(le,r,ce),C=[le[0],le[1]],(L<=1||V(w,C)>m)&&(O.push(C),w=C),j=t,P=c)}let k=[e[0].point[0],e[0].point[1]],R=e.length>1?[e[e.length-1].point[0],e[e.length-1].point[1]]:U(e[0].point,[1,1]),M=[],A=[];if(1===e.length){if(!y&&!g||l)return fe(k,v||x)}else{y||g&&1===e.length||(f?M.push(...se(k,O[0],13)):M.push(...pe(k,b[0],O[0])));let t=Z(function(e){return[-e[0],-e[1]]}(e[e.length-1].vector));g||y&&1===e.length?A.push(R):p?A.push(...de(R,t,x,29)):A.push(...ve(R,t,x))}return b.concat(A,O.reverse(),M)}const ge=[0,0];function me(e){return null!=e&&e>=0}function be(e,t={}){let{streamline:n=.5,size:r=16,last:o=!1}=t;if(0===e.length)return[];let u=.15+.85*(1-n),i=Array.isArray(e[0])?e:e.map(({x:e,y:t,pressure:n=X})=>[e,t,n]);if(2===i.length){let e=i[1];i=i.slice(0,-1);for(let t=1;t<5;t++)i.push(oe(i[0],e,t/4))}1===i.length&&(i=[...i,[...U(i[0],T),...i[0].slice(2)]]);let c=[{point:[i[0][0],i[0][1]],pressure:me(i[0][2])?i[0][2]:.25,vector:[...T],distance:0,runningLength:0}],a=!1,l=0,f=c[0],s=i.length-1;for(let p=1;p<i.length;p++){let e=o&&p===s?[i[p][0],i[p][1]]:oe(f.point,i[p],u);if(K(f.point,e))continue;let t=te(e,f.point);if(l+=t,p<s&&!a){if(l<r)continue;a=!0}H(ge,f.point,e),f={point:e,pressure:me(i[p][2])?i[p][2]:X,vector:ee(ge),distance:t,runningLength:l},c.push(f)}return c[0].vector=c[1]?.vector||[0,0],c}function Oe(e,t={}){return ye(be(e,t),t)}var je=["renderPath","container"],xe=function(){var e=b();return(0,L.jsx)(v.Fragment,{children:Object.keys(e).map(function(t,n){return(0,L.jsx)(Pe,{keyName:t,index:n,data:e[t]},t)})})},Pe=function(e){var t=e.data,n=void 0===t?[]:t,r=e.index,o=e.keyName,u=w(),i=u.renderPath,c=u.container,a=_(Oe(n,d(u,je))),l=i?i(a,o,n,r,c):null;return l||(0,L.jsx)("path",{d:a})},Se=["children","options","renderPath","defaultPoints"];const we=(0,v.forwardRef)(function(e,t){var n=e.children,r=e.options,o=e.renderPath,u=e.defaultPoints,i=d(e,Se),c=p((0,v.useReducer)(m,Object.assign({},u)),2),a=c[0],f=c[1],s=p((0,v.useReducer)(S,Object.assign(l(l({},j),{},{renderPath:o}),r)),2),h=s[0],b=s[1];return(0,v.useEffect)(function(){return b(l(l({},r),{},{renderPath:o}))},[r,o]),(0,L.jsx)(y.Provider,{value:a,children:(0,L.jsx)(g.Provider,{value:f,children:(0,L.jsxs)(D,l(l({},i),{},{ref:t,children:[(0,L.jsx)(x.Provider,{value:h,children:(0,L.jsx)(P.Provider,{value:b,children:(0,L.jsx)(xe,{})})}),n]}))})})});return o})());