UNPKG

@uiw/react-signature

Version:

A signature board component for react.

2 lines 12.5 kB
/*! 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,r)=>{var n=r(442),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,c=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,r){var n,i={},l=null,f=null;for(n in void 0!==r&&(l=""+r),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(f=t.ref),t)u.call(t,n)&&!a.hasOwnProperty(n)&&(i[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===i[n]&&(i[n]=t[n]);return{$$typeof:o,type:e,key:l,ref:f,props:i,_owner:c.current}}t.jsx=l,t.jsxs=l},442:t=>{t.exports=e},540:(e,t,r)=>{e.exports=r(192)}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};function i(e){return i="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},i(e)}function u(e){var t=function(e,t){if("object"!=i(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==i(t)?t:t+""}function c(e,t,r){return(t=u(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function s(e,t){if(e){if("string"==typeof e)return f(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function p(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,u,c=[],a=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;a=!1}else for(;!(a=(n=i.call(r)).done)&&(c.push(n.value),c.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{if(!a&&null!=r.return&&(u=r.return(),Object(u)!==u))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 r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}n.r(o),n.d(o,{OptionContext:()=>x,OptionDispatchContext:()=>P,PointerContext:()=>y,PointerDispatchContext:()=>g,default:()=>ue,defaultOptions:()=>j,defaultStyle:()=>M,getBoundingClientRect:()=>k,getClinetXY:()=>R,getStroke:()=>te,getStrokeOutlinePoints:()=>V,getStrokePoints:()=>ee,getSvgPathFromStroke:()=>_,initialState:()=>h,reducer:()=>m,reducerOption:()=>S,useDispatch:()=>O,useEvent:()=>A,useOptionDispatch:()=>E,useOptionStore:()=>w,useStore:()=>b});var v=n(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,r,n){var o=p(t,2),i=o[0],u=o[1],c=p(n[(r+1)%n.length],2),a=c[0],l=c[1];return e.push(i,u,(i+a)/2,(u+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=n(540),I=["className","prefixCls","style","readonly","onPointer","children"],D=(0,v.forwardRef)((function(e,t){var r=e.className,n=e.prefixCls,o=void 0===n?"w-signature":n,i=e.style,u=e.readonly,a=void 0!==u&&u,f=e.onPointer,s=e.children,p=d(e,I),h=[r,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),r=t.offsetY,n=t.offsetX,o=e,i=o.clientX||o.nativeEvent.clientX,u=o.clientY||o.nativeEvent.clientY;m.current=[[i-n,u-r]];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),r=t.offsetY,n=t.offsetX,o=R(e),i=o.clientX,u=o.clientY;m.current=[].concat(C(m.current),[[i-n,u-r]]),x(c({},j+b.current,m.current))}})),w=A((function(){var t=m.current||[];f&&e.onPointer(t),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),i);return(0,L.jsx)("svg",l(l({},p),{},{ref:y,className:h,style:E,children:s}))}));function N(e,t,r,n=e=>e){return e*n(.5-t*(.5-r))}function Y(e,t){return[e[0]+t[0],e[1]+t[1]]}function X(e,t){return[e[0]-t[0],e[1]-t[1]]}function T(e,t){return[e[0]*t,e[1]*t]}function B(e){return[e[1],-e[0]]}function z(e,t){return e[0]*t[0]+e[1]*t[1]}function F(e,t){return e[0]===t[0]&&e[1]===t[1]}function U(e,t){return function(e){return e[0]*e[0]+e[1]*e[1]}(X(e,t))}function $(e){return function(e,t){return[e[0]/t,e[1]/t]}(e,function(e){return Math.hypot(e[0],e[1])}(e))}function q(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function H(e,t,r){let n=Math.sin(r),o=Math.cos(r),i=e[0]-t[0],u=e[1]-t[1],c=i*n+u*o;return[i*o-u*n+t[0],c+t[1]]}function Q(e,t,r){return Y(e,T(X(t,e),r))}function W(e,t,r){return Y(e,T(t,r))}var{min:Z,PI:G}=Math,J=.275,K=G+1e-4;function V(e,t={}){let{size:r=16,smoothing:n=.5,thinning:o=.5,simulatePressure:i=!0,easing:u=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||r<=0)return[];let v,h=e[e.length-1].runningLength,y=!1===c.taper?0:!0===c.taper?Math.max(r,h):c.taper,g=!1===a.taper?0:!0===a.taper?Math.max(r,h):a.taper,m=Math.pow(r*n,2),b=[],O=[],j=e.slice(0,10).reduce(((e,t)=>{let n=t.pressure;if(i){let o=Z(1,t.distance/r),i=Z(1,1-o);n=Z(1,e+o*J*(i-e))}return(e+n)/2}),e[0].pressure),x=N(r,o,e[e.length-1].pressure,u),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:n,vector:c,distance:a,runningLength:l}=e[L];if(L<e.length-1&&h-l<3)continue;if(o){if(i){let e=Z(1,a/r),n=Z(1,1-e);t=Z(1,j+e*J*(n-j))}x=N(r,o,t,u)}else x=r/2;void 0===v&&(v=x);let f=l<y?s(l/y):1,p=h-l<g?d((h-l)/g):1;x=Math.max(.01,x*Math.min(f,p));let k=(L<e.length-1?e[L+1]:e[L]).vector,R=L<e.length-1?z(c,k):1,M=null!==R&&R<0;if(z(c,P)<0&&!_||M){let e=T(B(P),x);for(let t=1/13,r=0;r<=1;r+=t)E=H(X(n,e),n,K*r),b.push(E),C=H(Y(n,e),n,K*-r),O.push(C);S=E,w=C,M&&(_=!0);continue}if(_=!1,L===e.length-1){let e=T(B(c),x);b.push(X(n,e)),O.push(Y(n,e));continue}let A=T(B(Q(k,c,R)),x);E=X(n,A),(L<=1||U(S,E)>m)&&(b.push(E),S=E),C=Y(n,A),(L<=1||U(w,C)>m)&&(O.push(C),w=C),j=t,P=c}let k=e[0].point.slice(0,2),R=e.length>1?e[e.length-1].point.slice(0,2):Y(e[0].point,[1,1]),M=[],A=[];if(1===e.length){if(!y&&!g||l){let e=W(k,$(B(X(k,R))),-(v||x)),t=[];for(let r=1/13,n=r;n<=1;n+=r)t.push(H(e,k,2*K*n));return t}}else{if(!(y||g&&1===e.length))if(f)for(let e=1/13,r=e;r<=1;r+=e){let e=H(O[0],k,K*r);M.push(e)}else{let e=X(b[0],O[0]),t=T(e,.5),r=T(e,.51);M.push(X(k,t),X(k,r),Y(k,r),Y(k,t))}let t=B(function(e){return[-e[0],-e[1]]}(e[e.length-1].vector));if(g||y&&1===e.length)A.push(R);else if(p){let e=W(R,t,x);for(let t=1/29,r=t;r<1;r+=t)A.push(H(e,R,3*K*r))}else A.push(Y(R,T(t,x)),Y(R,T(t,.99*x)),X(R,T(t,.99*x)),X(R,T(t,x)))}return b.concat(A,O.reverse(),M)}function ee(e,t={}){var r;let{streamline:n=.5,size:o=16,last:i=!1}=t;if(0===e.length)return[];let u=.15+.85*(1-n),c=Array.isArray(e[0])?e:e.map((({x:e,y:t,pressure:r=.5})=>[e,t,r]));if(2===c.length){let e=c[1];c=c.slice(0,-1);for(let t=1;t<5;t++)c.push(Q(c[0],e,t/4))}1===c.length&&(c=[...c,[...Y(c[0],[1,1]),...c[0].slice(2)]]);let a=[{point:[c[0][0],c[0][1]],pressure:c[0][2]>=0?c[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],l=!1,f=0,s=a[0],p=c.length-1;for(let d=1;d<c.length;d++){let e=i&&d===p?c[d].slice(0,2):Q(s.point,c[d],u);if(F(s.point,e))continue;let t=q(e,s.point);if(f+=t,d<p&&!l){if(f<o)continue;l=!0}s={point:e,pressure:c[d][2]>=0?c[d][2]:.5,vector:$(X(s.point,e)),distance:t,runningLength:f},a.push(s)}return a[0].vector=(null==(r=a[1])?void 0:r.vector)||[0,0],a}function te(e,t={}){return V(ee(e,t),t)}var re=["renderPath","container"],ne=function(){var e=b();return(0,L.jsx)(v.Fragment,{children:Object.keys(e).map((function(t,r){return(0,L.jsx)(oe,{keyName:t,index:r,data:e[t]},t)}))})},oe=function(e){var t=e.data,r=void 0===t?[]:t,n=e.index,o=e.keyName,i=w(),u=i.renderPath,c=i.container,a=_(te(r,d(i,re))),l=u?u(a,o,r,n,c):null;return l||(0,L.jsx)("path",{d:a})},ie=["children","options","renderPath","defaultPoints"];const ue=(0,v.forwardRef)((function(e,t){var r=e.children,n=e.options,o=e.renderPath,i=e.defaultPoints,u=d(e,ie),c=p((0,v.useReducer)(m,Object.assign({},i)),2),a=c[0],f=c[1],s=p((0,v.useReducer)(S,Object.assign(l(l({},j),{},{renderPath:o}),n)),2),h=s[0],b=s[1];return(0,v.useEffect)((function(){return b(l(l({},n),{},{renderPath:o}))}),[n,o]),(0,L.jsx)(y.Provider,{value:a,children:(0,L.jsx)(g.Provider,{value:f,children:(0,L.jsxs)(D,l(l({},u),{},{ref:t,children:[(0,L.jsx)(x.Provider,{value:h,children:(0,L.jsx)(P.Provider,{value:b,children:(0,L.jsx)(ne,{})})}),r]}))})})}));return o})()));