@kaktos/flipbook-react 1.0.1 → 1.0.3

package/README.md

@@ -152,6 +152,8 @@ const [page, setPage] = useState(0)
 | `clickToZoom` | `boolean` | `true` | Enable click/tap to zoom. |
 | `dragToFlip` | `boolean` | `true` | Enable drag/swipe to flip. |
 | `wheel` | `'scroll' \| 'zoom'` | `'scroll'` | Mouse wheel behavior when zoomed. |
+| `bookClassName` | `string` | — | Class applied to the inner book container. |
+| `bookStyle` | `React.CSSProperties` | — | Inline styles applied to the inner book container. |
 | `page` | `number` | — | Controlled page state (internal index). |
 | `onPageChange` | `(page: number) => void` | — | Called when page changes in controlled mode. |
 | `onFlipLeftStart` | `(page: number) => void` | — | Fired when left flip begins. |
@@ -192,6 +194,31 @@ You can also pass `className` and `style` to the root element:
 <Flipbook className="my-book" style={{ background: '#1a1a1a' }} pages={pages} />
 ```
 
+## Book Shadow / Inner Styling
+
+If you want to style the actual book container (the element that scales and holds pages), use
+`bookClassName` / `bookStyle`:
+
+```tsx
+<Flipbook
+  pages={pages}
+  bookStyle={{ boxShadow: '0 24px 60px rgba(0,0,0,0.35)', borderRadius: 8 }}
+/>
+```
+
+Or with a class:
+
+```tsx
+<Flipbook pages={pages} bookClassName="bookShadow" />
+```
+
+```css
+.bookShadow {
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+  border-radius: 8px;
+}
+```
+
 ## License
 
 MIT

package/dist/react-flipbook.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react/jsx-runtime"),e=require("react");function he(c){if(c&&c.constructor===Array){var o=c.filter(function(b){return typeof b=="number"}).filter(function(b){return!isNaN(b)});if(c.length===6&&o.length===6){var s=$t();return s[0]=o[0],s[1]=o[1],s[4]=o[2],s[5]=o[3],s[12]=o[4],s[13]=o[5],s}else if(c.length===16&&o.length===16)return c}throw new TypeError("Expected a `number[]` with length 6 or 16.")}function $t(){for(var c=[],o=0;o<16;o++)o%5==0?c.push(1):c.push(0);return c}function _n(c,o){for(var s=he(c),b=he(o),x=[],v=0;v<4;v++)for(var j=[s[v],s[v+4],s[v+8],s[v+12]],L=0;L<4;L++){var I=L*4,F=[b[I],b[I+1],b[I+2],b[I+3]],C=j[0]*F[0]+j[1]*F[1]+j[2]*F[2]+j[3]*F[3];x[v+I]=C}return x}function Tn(c){var o=$t();return o[11]=-1/c,o}function Fn(c){var o=Math.PI/180*c,s=$t();return s[0]=s[10]=Math.cos(o),s[2]=s[8]=Math.sin(o),s[2]*=-1,s}function En(c){return"matrix3d("+he(c).join(", ")+")"}function Ye(c,o,s){var b=$t();return c!==void 0&&o!==void 0&&s!==void 0&&(b[12]=c,b[13]=o,b[14]=s),b}class ee{constructor(o){o?o instanceof ee?this.m=[...o.m]:this.m=[...o]:this.m=$t()}clone(){return new ee(this)}multiply(o){this.m=_n(this.m,o)}perspective(o){this.multiply(Tn(o))}transformX(o){return(o*this.m[0]+this.m[12])/(o*this.m[3]+this.m[15])}translate(o,s){this.multiply(Ye(o,s??0,0))}translate3d(o,s,b){this.multiply(Ye(o,s,b))}rotateY(o){this.multiply(Fn(o))}toString(){return En(this.m)}}function Dn(c,o,s){const[b,x]=e.useState(0),[v,j]=e.useState(0),[L,I]=e.useState(1),[F,C]=e.useState(0);return e.useEffect(()=>{const S=()=>{const $=c.current;if(!$)return;x($.clientWidth),j($.clientHeight);const g=$.clientWidth>$.clientHeight&&!o?2:1;I(g),g===2&&C(Q=>Q+1)};return window.addEventListener("resize",S,{passive:!0}),S(),()=>window.removeEventListener("resize",S)},[o,c]),{viewWidth:b,viewHeight:v,rawDisplayedPages:L,pageAlignmentTick:F}}function jn(c,o,s,b,x,v,j){const[L,I]=e.useState(null),[F,C]=e.useState(null),[S,$]=e.useState({}),g=e.useRef({}),Q=e.useRef({count:0,target:0,cb:null}),rt=e.useRef(new Set),ot=e.useCallback((f,d=!1)=>{if(d&&x>1&&!v){const i=o[f];if(i)return i}return c[f]??null},[c,o,x,v]),U=e.useCallback(f=>L===null||S[f]?f:(g.current[f]||(g.current[f]=null,rt.current.add(f)),j),[L,S,j]);e.useEffect(()=>{const f=rt.current;f.size!==0&&(f.forEach(d=>{if(g.current[d])return;const i=new Image;g.current[d]=i,i.onload=()=>{$(_=>({..._,[d]:!0}))},i.src=d}),f.clear())});const X=e.useCallback((f,d=!1)=>{const i=ot(f,d);return d&&x>1&&!v?i:i?U(i):null},[ot,U,x,v]),st=e.useCallback((f=!1)=>{for(let d=s-3;d<=s+3;d++)X(d);if(f)for(let d=s;d<s+b;d++){const i=o[d];if(i&&!g.current[i]){const _=new Image;g.current[i]=_,_.src=i}}},[s,b,o,X]),J=e.useCallback(f=>{const d=f.target;L===null&&(I(d.naturalWidth),C(d.naturalHeight));const i=Q.current;i.cb&&(i.count++,i.count>=i.target&&(i.cb(),i.cb=null))},[L]),tt=e.useCallback((f,d)=>{Q.current={count:0,target:f,cb:d}},[]);return{imageWidth:L,imageHeight:F,loadedImages:S,pageUrl:ot,loadImage:U,pageUrlLoading:X,preloadImages:st,onImageLoad:J,setImageLoadCallback:tt}}const zn="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e",On="_root_1ydjt_1",Zn="_viewport_1ydjt_8",Wn="_viewportZoom_1ydjt_14 _viewport_1ydjt_8",Nn="_viewportZoomDragToScroll_1ydjt_19 _viewportZoom_1ydjt_14 _viewport_1ydjt_8",$n="_container_1ydjt_24",Xn="_clickLeft_1ydjt_40 _clickToFlip_1ydjt_32",Hn="_clickRight_1ydjt_45 _clickToFlip_1ydjt_32",Bn="_boundingBox_1ydjt_50",Un="_page_1ydjt_55",Yn="_polygon_1ydjt_60",An="_polygonBlank_1ydjt_69 _polygon_1ydjt_60",Gn="_lighting_1ydjt_74",Kn="_srOnly_1ydjt_79",T={root:On,viewport:Zn,viewportZoom:Wn,viewportZoomDragToScroll:Nn,container:$n,clickLeft:Xn,clickRight:Hn,boundingBox:Bn,page:Un,polygon:Yn,polygonBlank:An,lighting:Gn,srOnly:Kn};function Ge(c){return c*c}function qn(c){return 1-Ge(1-c)}function Ae(c){return c<.5?Ge(c*2)/2:.5+qn((c-.5)*2)/2}const Nt={progress:0,direction:null,frontImage:null,backImage:null,auto:!1};function Vn(c,o){const{pages:s,pagesHiRes:b=[],flipDuration:x=1e3,zoomDuration:v=500,zooms:j=[1,2,4],perspective:L=2400,nPolygons:I=10,ambient:F=.4,gloss:C=.6,swipeMin:S=3,singlePage:$=!1,forwardDirection:g="right",centering:Q=!0,startPage:rt=null,loadingImage:ot=zn,clickToZoom:U=!0,dragToFlip:X=!0,wheel:st="scroll",page:J,onPageChange:tt}=c,f=j??[1],d=s[0]===null,{viewWidth:i,viewHeight:_,rawDisplayedPages:pt,pageAlignmentTick:ne}=Dn(o,$),[re,Xt]=e.useState(0),Mt=J!==void 0,E=Mt?J:re,H=e.useCallback(t=>{if(Mt){const r=typeof t=="function"?t(J):t;tt?.(r)}else Xt(t)},[Mt,J,tt]),[Ht,n]=e.useState(0),[wt,xt]=e.useState(1),[l,oe]=e.useState(f[0]),[Bt,se]=e.useState(0),[Lt,pe]=e.useState(!1),[M,B]=e.useState(Nt),[Ut,ae]=e.useState(null),[,me]=e.useState(0),h=pt===2&&(d&&(E===0||E===1))?1:pt,Ke=jn(s,b,E,h,l,Lt,ot),{imageWidth:mt,imageHeight:Yt,pageUrl:Ct,loadImage:qe,pageUrlLoading:Ve,preloadImages:At,onImageLoad:Qe,setImageLoadCallback:Gt}=Ke,St=e.useRef(null),be=e.useRef(null),bt=e.useRef(0),yt=e.useRef(null),Y=e.useRef(!1),Kt=e.useRef(!1),at=e.useRef(1/0),ct=e.useRef(-1/0),ye=e.useRef(0),ke=e.useRef(0),_t=e.useRef(0),Tt=e.useRef(0),Ft=e.useRef(!1),q=e.useRef(M);q.current=M;const kt=e.useRef(E);kt.current=E;const qt=e.useRef(h);qt.current=h;const Et=e.useRef(l);Et.current=l;const Vt=e.useRef(Bt);Vt.current=Bt;const Re=e.useRef(c.onFlipLeftStart);Re.current=c.onFlipLeftStart;const ve=e.useRef(c.onFlipLeftEnd);ve.current=c.onFlipLeftEnd;const Pe=e.useRef(c.onFlipRightStart);Pe.current=c.onFlipRightStart;const Ie=e.useRef(c.onFlipRightEnd);Ie.current=c.onFlipRightEnd;const Me=e.useRef(c.onZoomStart);Me.current=c.onZoomStart;const we=e.useRef(c.onZoomEnd);we.current=c.onZoomEnd;const Je=e.useRef(tt);Je.current=tt;const xe=e.useRef(H);xe.current=H;const ce=e.useRef(new Set),D=e.useCallback(t=>{const r=requestAnimationFrame(a=>{ce.current.delete(r),t(a)});return ce.current.add(r),r},[]),Le=d?s.length-1:s.length,Qt=d?Math.max(1,E):E+1,Ce=e.useRef({canFlipLeft:!1,canFlipRight:!1,canZoomIn:!1,canZoomOut:!1,page:0,numPages:0}),Se=e.useCallback(()=>{H(t=>h===1&&t===0&&s.length>0&&!s[0]?1:t)},[h,s,H]),_e=!M.direction&&E<s.length-h,Te=!M.direction&&E>=h&&!(h===1&&!Ct(Ht-1)),et=g==="left"?_e:Te,nt=g==="right"?_e:Te,it=!Lt&&Bt<f.length-1,lt=!Lt&&Bt>0;Ce.current={canFlipLeft:et,canFlipRight:nt,canZoomIn:it,canZoomOut:lt,page:Qt,numPages:Le};const ie=g==="right"||h===1?Ht:wt,le=g==="left"?Ht:wt,tn=!!Ct(ie),en=!!Ct(le)&&h===2,Fe=mt&&Yt?Math.min(i/h/mt,_/Yt,1):1,P=mt?Math.round(mt*Fe):0,ut=Yt?Math.round(Yt*Fe):0,A=(i-P*h)/2,ft=(_-ut)/2,nn=Math.ceil(P/I+1/l)+"px",rn=ut+"px",on=`${P}px ${ut}px`,sn=e.useMemo(()=>{if(!M.direction||h!==1)return 1;let t=M.progress;return M.direction!==g&&(t=1-t),t>.7?1-(t-.7)/.3:1},[M.direction,M.progress,h,g]),gt=(()=>{if(h===1)return A;const t=Ct(ie)?A:i/2;return M.direction?t<at.current?t:at.current:t})(),Dt=(()=>{if(h===1)return i-A;const t=Ct(le)?i-A:i/2;return M.direction?t>ct.current?t:ct.current:t})(),dt=Q?Math.round(i/2-(gt+Dt)/2):0,Ee=e.useRef(dt);Ee.current=dt;const De=e.useRef(h);e.useEffect(()=>{Ut===null&&mt!==null&&ae(dt)},[Ut,mt,dt]),e.useEffect(()=>{De.current!==h&&(De.current=h,ae(dt),Ft.current=!1)},[h,dt]);const jt=Math.round(Ut??0),an=yt.current?yt.current:U&&it?"zoom-in":U&&lt?"zoom-out":X?"grab":"auto",cn=!Y.current,ln=(Lt||l>1)&&cn?T.viewportZoomDragToScroll:Lt||l>1?T.viewportZoom:T.viewport,un=(()=>{const t=(Dt-gt)*l;return t<i?(gt+jt)*l-(i-t)/2:(gt+jt)*l})(),fn=(()=>{const t=(Dt-gt)*l;return t<i?(gt+jt)*l-(i-t)/2:(Dt+jt)*l-i})(),gn=(()=>{const t=ut*l;return t<_?ft*l-(_-t)/2:ft*l})(),dn=(()=>{const t=ut*l;return t<_?ft*l-(_-t)/2:(ft+ut)*l-_})(),je=Math.min(fn,Math.max(un,_t.current)),ze=Math.min(dn,Math.max(gn,Tt.current)),Oe=e.useCallback((t,r)=>{const a=[],u=[-.5,-.25,0,.25,.5];if(F<1){const p=1-F,m=u.map(y=>(1-Math.cos((t-r*y)/180*Math.PI))*p);a.push(`linear-gradient(to right,rgba(0,0,0,${m[0]}),rgba(0,0,0,${m[1]}) 25%,rgba(0,0,0,${m[2]}) 50%,rgba(0,0,0,${m[3]}) 75%,rgba(0,0,0,${m[4]}))`)}if(C>0){const y=u.map(k=>Math.max(Math.pow(Math.cos((t+30-r*k)/180*Math.PI),200),Math.pow(Math.cos((t-30-r*k)/180*Math.PI),200)));a.push(`linear-gradient(to right,rgba(255,255,255,${y[0]*C}),rgba(255,255,255,${y[1]*C}) 25%,rgba(255,255,255,${y[2]*C}) 50%,rgba(255,255,255,${y[3]*C}) 75%,rgba(255,255,255,${y[4]*C}))`)}return a.join(",")},[F,C]),ue=e.useCallback(t=>{const r=q.current;if(!r.direction)return[];if(!Number.isFinite(P)||P<=0||I<=0)return[];let a=r.progress,u=r.direction;if(!Number.isFinite(a))return[];a<0&&(a=0),a>1&&(a=1),h===1&&u!==g&&(a=1-a,u=g);const p=t==="front"?r.frontImage:r.backImage,m=P/I;let y=A,k=!1;h===1?g==="right"?t==="back"&&(k=!0,y=A-P):u==="left"?t==="back"?y=P-A:k=!0:t==="front"?y=P-A:k=!0:u==="left"?t==="back"?y=i/2:k=!0:t==="front"?y=i/2:k=!0;const R=new ee;R.translate(i/2),R.perspective(L),R.translate(-i/2),R.translate(y,ft);let z=0;a>.5&&(z=-(a-.5)*2*180),u==="left"&&(z=-z),t==="back"&&(z+=180),z&&(k&&R.translate(P),R.rotateY(z),k&&R.translate(-P));let w;a<.5?w=a*2*Math.PI:w=(1-(a-.5)*2)*Math.PI,w===0&&(w=1e-9);const ht=P/w;let W=0;const O=w/I;let N=O/2/Math.PI*180;const V=O/Math.PI*180;k&&(N=-w/Math.PI*180+V/2),t==="back"&&(N=-N);const Zt=t==="back"?-V:V;at.current=1/0,ct.current=-1/0;const K=[];for(let Jt=0;Jt<I;Jt++){const Cn=`${Jt/(I-1)*100}% 0px`,Wt=R.clone(),He=k?w-W:W;let de=Math.sin(He)*ht;k&&(de=P-de);let te=(1-Math.cos(He))*ht;t==="back"&&(te=-te),Wt.translate3d(de,0,te),Wt.rotateY(-N);const Be=Wt.transformX(0),Ue=Wt.transformX(m);ct.current=Math.max(Math.max(Be,Ue),ct.current),at.current=Math.min(Math.min(Be,Ue),at.current);const Sn=Oe(z-N,Zt);W+=O,N+=Zt,K.push({key:t+Jt,bgImage:p,lighting:Sn,bgPos:Cn,transform:Wt.toString(),z:Math.abs(Math.round(te))})}return K},[h,g,P,A,ft,i,L,I,Oe]),hn=e.useMemo(()=>M.direction?[...ue("front"),...ue("back")]:[],[M.direction,M.progress,M.frontImage,M.backImage,ue]),G=e.useCallback((t,r)=>{const a=kt.current,u=qt.current;let p=null,m=null;t!==g?u===1?(p=s[a-1]??null,m=null):(p=s[g==="right"||u===1?a:a+1]??null,m=s[a-u+1]??null):u===1?(p=s[a]??null,m=null):(p=s[g==="left"?a:a+1]??null,m=s[a+u]??null),B({progress:0,direction:t,frontImage:p,backImage:m,auto:!1}),D(()=>{D(()=>{t!==g?u===2&&n(a-u):u===1?n(a+u):xt(a+1+u),r&&fe(t)})})},[g,s,D]),fe=e.useCallback(t=>{const r=q.current,a=x*(1-r.progress),u=r.progress;B(R=>({...R,auto:!0}));const p=kt.current,m=s[0]!==null?p+1:Math.max(1,p);t==="left"?Re.current?.(m):Pe.current?.(m);let y=null;const k=R=>{y===null&&(y=R);const z=R-y;let w=u+z/a;w>1&&(w=1);const ht=Ae(w);if(B(W=>({...W,progress:ht})),w<1)D(k);else{const W=qt.current;let O;t!==g?O=kt.current-W:O=kt.current+W,xe.current(O);const N=s[0]!==null?O+1:Math.max(1,O);t==="left"?ve.current?.(N):Ie.current?.(N),W===1&&t===g?B(Nt):Gt(1,()=>{B(Nt)})}};D(k)},[x,g,s,Gt,D]),Ze=e.useCallback(()=>{const t=q.current,r=x*t.progress,a=t.progress;B(m=>({...m,auto:!0}));let u=null;const p=m=>{u===null&&(u=m);const y=m-u;let k=a-a*y/r;if(k<0&&(k=0),B(R=>({...R,progress:k})),k>0)D(p);else{const R=kt.current;n(R),xt(R+1);const z=qt.current,w=q.current.direction;z===1&&w!==g?B(Nt):Gt(1,()=>{B(Nt)})}};D(p)},[x,g,Gt,D]),pn=e.useCallback(()=>{et&&G("left",!0)},[et,G]),mn=e.useCallback(()=>{nt&&G("right",!0)},[nt,G]),Rt=e.useCallback((t,r)=>{const a=o.current;if(!a)return;let u,p;if(r){const V=a.getBoundingClientRect();u=r.pageX-V.left,p=r.pageY-V.top}else u=a.clientWidth/2,p=a.clientHeight/2;const m=Et.current,y=t,k=a.scrollLeft,R=a.scrollTop,z=u+k,w=p+R,ht=z/m*y-u,W=w/m*y-p;pe(!0),Me.current?.(t);let O=null;const N=V=>{O===null&&(O=V);const Zt=V-O;let K=Zt/v;K>1&&(K=1),K=Ae(K),oe(m+(y-m)*K),_t.current=k+(ht-k)*K,Tt.current=R+(W-R)*K,Zt<v?D(N):(we.current?.(t),pe(!1),oe(t),_t.current=ht,Tt.current=W)};D(N),y>1&&At(!0)},[v,o,At,D]),zt=e.useCallback(t=>{if(!it)return;const r=Vt.current+1;se(r),Rt(f[r],t)},[it,f,Rt]),Ot=e.useCallback(t=>{if(!lt)return;const r=Vt.current-1;se(r),Rt(f[r],t)},[lt,f,Rt]),We=e.useCallback(t=>{const r=(Vt.current+1)%f.length;se(r),Rt(f[r],t)},[f,Rt]),ge=e.useCallback(t=>{if(t===null||t===Qt)return;let r;s[0]===null?h===2&&t===1?r=0:r=t:r=t-1,(h===2&&r>0&&s[0]===null||h===2&&s[0]!==null)&&(r=r&-2),H(r),at.current=1/0,ct.current=-1/0},[Qt,s,h,H]),Ne=e.useRef(ge);Ne.current=ge;const $e=e.useCallback((t,r)=>{const a=o.current;a&&(a.scrollLeft=ye.current-t,a.scrollTop=ke.current-r,_t.current=a.scrollLeft,Tt.current=a.scrollTop)},[o]),vt=e.useCallback(t=>{if(St.current=t.pageX,be.current=t.pageY,bt.current=0,Et.current<=1)X&&(yt.current="grab");else{const r=o.current;r&&(ye.current=r.scrollLeft,ke.current=r.scrollTop),yt.current="all-scroll"}},[X,o]),Pt=e.useCallback(t=>{if(St.current===null)return!1;const r=t.pageX-St.current,a=t.pageY-be.current;if(bt.current=Math.max(bt.current,Math.abs(r)),bt.current=Math.max(bt.current,Math.abs(a)),Et.current>1)return Y.current||$e(r,a),!1;if(!X||Math.abs(a)>Math.abs(r)||!Number.isFinite(P)||P<=0)return!1;yt.current="grabbing",me(p=>p+1);const u=q.current;return r>0?(u.direction===null&&et&&r>=S&&G("left",!1),q.current.direction==="left"&&B(p=>({...p,progress:Math.min(r/P,1)}))):(u.direction===null&&nt&&r<=-S&&G("right",!1),q.current.direction==="right"&&B(p=>({...p,progress:Math.min(-r/P,1)}))),!0},[X,et,nt,S,G,P,$e]),It=e.useCallback(t=>{if(St.current===null)return;U&&bt.current<S&&We(t);const r=q.current;r.direction!==null&&!r.auto&&(r.progress>1/4?fe(r.direction):Ze()),St.current=null,yt.current=null,me(a=>a+1)},[U,S,We,fe,Ze]),bn=e.useCallback(t=>{Y.current=!0,vt(t.changedTouches[0])},[vt]),yn=e.useCallback(t=>{Pt(t.changedTouches[0])&&t.cancelable&&t.preventDefault()},[Pt]),kn=e.useCallback(t=>{It(t.changedTouches[0])},[It]),Rn=e.useCallback(t=>{if(Kt.current=!0,!Y.current&&t.button===0){vt(t);try{t.target.setPointerCapture(t.pointerId)}catch{}}},[vt]),vn=e.useCallback(t=>{Y.current||Pt(t)},[Pt]),Pn=e.useCallback(t=>{if(!Y.current){It(t);try{t.target.releasePointerCapture(t.pointerId)}catch{}}},[It]),In=e.useCallback(t=>{Y.current||Kt.current||t.button===0&&vt(t)},[vt]),Mn=e.useCallback(t=>{Y.current||Kt.current||Pt(t)},[Pt]),wn=e.useCallback(t=>{Y.current||Kt.current||It(t)},[It]),xn=e.useCallback(t=>{if(st==="scroll"&&Et.current>1&&!Y.current){const r=o.current;r&&(r.scrollLeft+=t.deltaX,r.scrollTop+=t.deltaY,_t.current=r.scrollLeft,Tt.current=r.scrollTop),t.cancelable&&t.preventDefault()}st==="zoom"&&(t.deltaY>=100?(Ot(t),t.cancelable&&t.preventDefault()):t.deltaY<=-100&&(zt(t),t.cancelable&&t.preventDefault()))},[st,o,Ot,zt]),Ln=e.useCallback(t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),et&&G("left",!0);break;case"ArrowRight":t.preventDefault(),nt&&G("right",!0);break;case"+":case"=":t.preventDefault(),it&&zt();break;case"-":t.preventDefault(),lt&&Ot();break}},[et,nt,it,lt,G,zt,Ot]);e.useEffect(()=>{pt===2&&H(t=>{const r=t&-2;return r===0&&d?t:r}),at.current=1/0,ct.current=-1/0},[ne,pt,d,H]);const Xe=e.useRef(At);return Xe.current=At,e.useEffect(()=>{n(E),xt(E+1),Xe.current()},[E]),e.useEffect(()=>{if(Ft.current||Ut===null)return;Ft.current=!0;const t=()=>{D(()=>{ae(r=>{const a=Ee.current;if(r===null)return Ft.current=!1,a;const u=a-r;return Math.abs(u)<.5?(Ft.current=!1,a):(t(),r+u*.1)})})};t()},[dt,D]),e.useEffect(()=>{const t=o.current;t&&(t.scrollLeft=je)},[je,o]),e.useEffect(()=>{const t=o.current;t&&(t.scrollTop=ze)},[ze,o]),e.useEffect(()=>{Se()},[s,Se]),e.useEffect(()=>{Ne.current(rt)},[rt]),e.useEffect(()=>{oe(f[0])},[]),e.useEffect(()=>{const t=ce.current;return()=>{t.forEach(cancelAnimationFrame),t.clear()}},[]),{viewWidth:i,viewHeight:_,pageWidth:P,pageHeight:ut,xMargin:A,yMargin:ft,displayedPages:h,zoom:l,centerOffsetSmoothed:jt,page:Qt,numPages:Le,leftPage:ie,rightPage:le,showLeftPage:tn,showRightPage:en,pageUrlLoading:Ve,loadImage:qe,flip:M,flipOpacity:sn,polygonArray:hn,polygonWidth:nn,polygonHeight:rn,polygonBgSize:on,canFlipLeft:et,canFlipRight:nt,canZoomIn:it,canZoomOut:lt,boundingLeft:gt,boundingRight:Dt,cursor:an,viewportClass:ln,flipLeft:pn,flipRight:mn,zoomIn:zt,zoomOut:Ot,goToPage:ge,apiRef:Ce,handlers:{onTouchStart:bn,onTouchMove:yn,onTouchEnd:kn,onPointerDown:Rn,onPointerMove:vn,onPointerUp:Pn,onMouseDown:In,onMouseMove:Mn,onMouseUp:wn,onWheel:xn,onKeyDown:Ln},onImageLoad:Qe}}const Qn=e.forwardRef(function({pages:o,pagesHiRes:s,pageLabels:b,flipDuration:x,zoomDuration:v,zooms:j,perspective:L,nPolygons:I,ambient:F,gloss:C,swipeMin:S,singlePage:$,forwardDirection:g,centering:Q,startPage:rt,loadingImage:ot,clickToZoom:U,dragToFlip:X,wheel:st,page:J,onPageChange:tt,onFlipLeftStart:f,onFlipLeftEnd:d,onFlipRightStart:i,onFlipRightEnd:_,onZoomStart:pt,onZoomEnd:ne,children:re,className:Xt,...Mt},E){const H=e.useRef(null),n=Vn({pages:o,pagesHiRes:s,flipDuration:x,zoomDuration:v,zooms:j,perspective:L,nPolygons:I,ambient:F,gloss:C,swipeMin:S,singlePage:$,forwardDirection:g,centering:Q,startPage:rt,loadingImage:ot,clickToZoom:U,dragToFlip:X,wheel:st,page:J,onPageChange:tt,onFlipLeftStart:f,onFlipLeftEnd:d,onFlipRightStart:i,onFlipRightEnd:_,onZoomStart:pt,onZoomEnd:ne},H);e.useImperativeHandle(E,()=>({get flipLeft(){return n.flipLeft},get flipRight(){return n.flipRight},get zoomIn(){return n.zoomIn},get zoomOut(){return n.zoomOut},get goToPage(){return n.goToPage},get canFlipLeft(){return n.apiRef.current.canFlipLeft},get canFlipRight(){return n.apiRef.current.canFlipRight},get canZoomIn(){return n.apiRef.current.canZoomIn},get canZoomOut(){return n.apiRef.current.canZoomOut},get page(){return n.apiRef.current.page},get numPages(){return n.apiRef.current.numPages}}),[n.flipLeft,n.flipRight,n.zoomIn,n.zoomOut,n.goToPage,n.apiRef]);const wt=l=>b&&b[l]?b[l]:`Page ${l+1}`,xt=Xt?`${T.root} ${Xt}`:T.root;return Z.jsxs("div",{...Mt,className:xt,role:"document","aria-label":`Book viewer, page ${n.page} of ${n.numPages}`,"aria-roledescription":"flipbook",children:[re?.({canFlipLeft:n.canFlipLeft,canFlipRight:n.canFlipRight,canZoomIn:n.canZoomIn,canZoomOut:n.canZoomOut,page:n.page,numPages:n.numPages,flipLeft:n.flipLeft,flipRight:n.flipRight,zoomIn:n.zoomIn,zoomOut:n.zoomOut,goToPage:n.goToPage}),Z.jsx("div",{ref:H,className:n.viewportClass,style:{cursor:n.cursor==="grabbing"?"grabbing":"auto"},tabIndex:0,onKeyDown:n.handlers.onKeyDown,onTouchMove:n.handlers.onTouchMove,onPointerMove:n.handlers.onPointerMove,onMouseMove:n.handlers.onMouseMove,onTouchEnd:n.handlers.onTouchEnd,onTouchCancel:n.handlers.onTouchEnd,onPointerUp:n.handlers.onPointerUp,onPointerCancel:n.handlers.onPointerUp,onMouseUp:n.handlers.onMouseUp,onWheel:n.handlers.onWheel,children:Z.jsxs("div",{className:T.container,style:{transform:`scale(${n.zoom})`},children:[Z.jsx("div",{role:"button",tabIndex:n.canFlipLeft?0:-1,"aria-label":"Previous page","aria-disabled":!n.canFlipLeft,className:T.clickLeft,style:{cursor:n.canFlipLeft?"pointer":"auto"},onClick:n.flipLeft,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n.flipLeft())}}),Z.jsx("div",{role:"button",tabIndex:n.canFlipRight?0:-1,"aria-label":"Next page","aria-disabled":!n.canFlipRight,className:T.clickRight,style:{cursor:n.canFlipRight?"pointer":"auto"},onClick:n.flipRight,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n.flipRight())}}),Z.jsxs("div",{style:{transform:`translateX(${n.centerOffsetSmoothed}px)`},children:[n.showLeftPage&&Z.jsx("img",{className:T.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.xMargin+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.leftPage,!0)??void 0,alt:wt(n.leftPage),onLoad:n.onImageLoad}),n.showRightPage&&Z.jsx("img",{className:T.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.viewWidth/2+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.rightPage,!0)??void 0,alt:wt(n.rightPage),onLoad:n.onImageLoad}),Z.jsx("div",{style:{opacity:n.flipOpacity},children:n.polygonArray.map(l=>Z.jsx("div",{className:l.bgImage?T.polygon:T.polygonBlank,style:{backgroundImage:l.bgImage?`url(${n.loadImage(l.bgImage)})`:void 0,backgroundSize:n.polygonBgSize,backgroundPosition:l.bgPos,width:n.polygonWidth,height:n.polygonHeight,transform:l.transform,zIndex:l.z},children:l.lighting&&Z.jsx("div",{className:T.lighting,style:{backgroundImage:l.lighting}})},l.key))}),Z.jsx("div",{className:T.boundingBox,style:{left:n.boundingLeft+"px",top:n.yMargin+"px",width:n.boundingRight-n.boundingLeft+"px",height:n.pageHeight+"px",cursor:n.cursor},onTouchStart:n.handlers.onTouchStart,onPointerDown:n.handlers.onPointerDown,onMouseDown:n.handlers.onMouseDown})]})]})}),Z.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:T.srOnly,children:["Page ",n.page," of ",n.numPages]})]})});exports.Flipbook=Qn;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react/jsx-runtime"),t=require("react");function ht(c){if(c&&c.constructor===Array){var o=c.filter(function(m){return typeof m=="number"}).filter(function(m){return!isNaN(m)});if(c.length===6&&o.length===6){var s=He();return s[0]=o[0],s[1]=o[1],s[4]=o[2],s[5]=o[3],s[12]=o[4],s[13]=o[5],s}else if(c.length===16&&o.length===16)return c}throw new TypeError("Expected a `number[]` with length 6 or 16.")}function He(){for(var c=[],o=0;o<16;o++)o%5==0?c.push(1):c.push(0);return c}function _n(c,o){for(var s=ht(c),m=ht(o),L=[],P=0;P<4;P++)for(var z=[s[P],s[P+4],s[P+8],s[P+12]],C=0;C<4;C++){var I=C*4,E=[m[I],m[I+1],m[I+2],m[I+3]],_=z[0]*E[0]+z[1]*E[1]+z[2]*E[2]+z[3]*E[3];L[P+I]=_}return L}function Tn(c){var o=He();return o[11]=-1/c,o}function jn(c){var o=Math.PI/180*c,s=He();return s[0]=s[10]=Math.cos(o),s[2]=s[8]=Math.sin(o),s[2]*=-1,s}function Fn(c){return"matrix3d("+ht(c).join(", ")+")"}function Yt(c,o,s){var m=He();return c!==void 0&&o!==void 0&&s!==void 0&&(m[12]=c,m[13]=o,m[14]=s),m}class et{constructor(o){o?o instanceof et?this.m=[...o.m]:this.m=[...o]:this.m=He()}clone(){return new et(this)}multiply(o){this.m=_n(this.m,o)}perspective(o){this.multiply(Tn(o))}transformX(o){return(o*this.m[0]+this.m[12])/(o*this.m[3]+this.m[15])}translate(o,s){this.multiply(Yt(o,s??0,0))}translate3d(o,s,m){this.multiply(Yt(o,s,m))}rotateY(o){this.multiply(jn(o))}toString(){return Fn(this.m)}}function En(c,o,s){const[m,L]=t.useState(0),[P,z]=t.useState(0),[C,I]=t.useState(1),[E,_]=t.useState(0);return t.useEffect(()=>{const T=()=>{const H=c.current;if(!H)return;L(H.clientWidth),z(H.clientHeight);const f=H.clientWidth>H.clientHeight&&!o?2:1;I(f),f===2&&_(ee=>ee+1)};return window.addEventListener("resize",T,{passive:!0}),T(),()=>window.removeEventListener("resize",T)},[o,c]),{viewWidth:m,viewHeight:P,rawDisplayedPages:C,pageAlignmentTick:E}}function Dn(c,o,s,m,L,P,z){const[C,I]=t.useState(null),[E,_]=t.useState(null),[T,H]=t.useState({}),f=t.useRef({}),ee=t.useRef({count:0,target:0,cb:null}),oe=t.useRef(new Set),se=t.useCallback((u,g=!1)=>{if(g&&L>1&&!P){const i=o[u];if(i)return i}return c[u]??null},[c,o,L,P]),U=t.useCallback(u=>C===null||T[u]?u:(f.current[u]||(f.current[u]=null,oe.current.add(u)),z),[C,T,z]);t.useEffect(()=>{const u=oe.current;u.size!==0&&(u.forEach(g=>{if(f.current[g])return;const i=new Image;f.current[g]=i,i.onload=()=>{H(j=>({...j,[g]:!0}))},i.src=g}),u.clear())});const O=t.useCallback((u,g=!1)=>{const i=se(u,g);return g&&L>1&&!P?i:i?U(i):null},[se,U,L,P]),ae=t.useCallback((u=!1)=>{for(let g=s-3;g<=s+3;g++)O(g);if(u)for(let g=s;g<s+m;g++){const i=o[g];if(i&&!f.current[i]){const j=new Image;f.current[i]=j,j.src=i}}},[s,m,o,O]),V=t.useCallback(u=>{const g=u.target;C===null&&(I(g.naturalWidth),_(g.naturalHeight));const i=ee.current;i.cb&&(i.count++,i.count>=i.target&&(i.cb(),i.cb=null))},[C]),te=t.useCallback((u,g)=>{ee.current={count:0,target:u,cb:g}},[]);return{imageWidth:C,imageHeight:E,loadedImages:T,pageUrl:se,loadImage:U,pageUrlLoading:O,preloadImages:ae,onImageLoad:V,setImageLoadCallback:te}}const zn="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e",On="_root_jjdx8_1",Zn="_viewport_jjdx8_8",$n="_viewportZoom_jjdx8_16 _viewport_jjdx8_8",Wn="_viewportZoomDragToScroll_jjdx8_22 _viewportZoom_jjdx8_16 _viewport_jjdx8_8",Nn="_container_jjdx8_27",Xn="_clickLeft_jjdx8_43 _clickToFlip_jjdx8_35",Hn="_clickRight_jjdx8_48 _clickToFlip_jjdx8_35",Bn="_boundingBox_jjdx8_53",Un="_page_jjdx8_58",Yn="_polygon_jjdx8_63",An="_polygonBlank_jjdx8_72 _polygon_jjdx8_63",Gn="_lighting_jjdx8_77",Kn="_srOnly_jjdx8_82",S={root:On,viewport:Zn,viewportZoom:$n,viewportZoomDragToScroll:Wn,container:Nn,clickLeft:Xn,clickRight:Hn,boundingBox:Bn,page:Un,polygon:Yn,polygonBlank:An,lighting:Gn,srOnly:Kn};function Gt(c){return c*c}function qn(c){return 1-Gt(1-c)}function At(c){return c<.5?Gt(c*2)/2:.5+qn((c-.5)*2)/2}const Xe={progress:0,direction:null,frontImage:null,backImage:null,auto:!1};function Vn(c,o){const{pages:s,pagesHiRes:m=[],flipDuration:L=1e3,zoomDuration:P=500,zooms:z=[1,2,4],perspective:C=2400,nPolygons:I=10,ambient:E=.4,gloss:_=.6,swipeMin:T=3,singlePage:H=!1,forwardDirection:f="right",centering:ee=!0,startPage:oe=null,loadingImage:se=zn,clickToZoom:U=!0,dragToFlip:O=!0,wheel:ae="scroll",page:V,onPageChange:te}=c,u=z??[1],g=s[0]===null,{viewWidth:i,viewHeight:j,rawDisplayedPages:be,pageAlignmentTick:tt}=En(o,H),[nt,rt]=t.useState(0),Ce=V!==void 0,F=Ce?V:nt,Y=t.useCallback(e=>{if(Ce){const r=typeof e=="function"?e(V):e;te?.(r)}else rt(e)},[Ce,V,te]),[Se,ce]=t.useState(0),[ot,n]=t.useState(1),[R,_e]=t.useState(u[0]),[b,st]=t.useState(0),[Te,pt]=t.useState(!1),[M,B]=t.useState(Xe),[Be,at]=t.useState(null),[,mt]=t.useState(0),d=be===2&&(g&&(F===0||F===1))?1:be,Kt=Dn(s,m,F,d,R,Te,se),{imageWidth:ke,imageHeight:Ue,pageUrl:je,loadImage:qt,pageUrlLoading:Vt,preloadImages:Ye,onImageLoad:Qt,setImageLoadCallback:Ae}=Kt,xe=t.useRef(null),bt=t.useRef(null),Re=t.useRef(0),ve=t.useRef(null),A=t.useRef(!1),Ge=t.useRef(!1),ie=t.useRef(1/0),le=t.useRef(-1/0),kt=t.useRef(0),xt=t.useRef(0),Fe=t.useRef(0),Ee=t.useRef(0),De=t.useRef(!1),Q=t.useRef(M);Q.current=M;const Pe=t.useRef(F);Pe.current=F;const Ke=t.useRef(d);Ke.current=d;const ye=t.useRef(R);ye.current=R;const qe=t.useRef(b);qe.current=b;const Rt=t.useRef(c.onFlipLeftStart);Rt.current=c.onFlipLeftStart;const vt=t.useRef(c.onFlipLeftEnd);vt.current=c.onFlipLeftEnd;const Pt=t.useRef(c.onFlipRightStart);Pt.current=c.onFlipRightStart;const yt=t.useRef(c.onFlipRightEnd);yt.current=c.onFlipRightEnd;const It=t.useRef(c.onZoomStart);It.current=c.onZoomStart;const Mt=t.useRef(c.onZoomEnd);Mt.current=c.onZoomEnd;const Jt=t.useRef(te);Jt.current=te;const wt=t.useRef(Y);wt.current=Y;const ct=t.useRef(new Set),D=t.useCallback(e=>{const r=requestAnimationFrame(a=>{ct.current.delete(r),e(a)});return ct.current.add(r),r},[]),Lt=g?s.length-1:s.length,Ve=g?Math.max(1,F):F+1,Ct=t.useRef({canFlipLeft:!1,canFlipRight:!1,canZoomIn:!1,canZoomOut:!1,page:0,numPages:0}),St=t.useCallback(()=>{Y(e=>d===1&&e===0&&s.length>0&&!s[0]?1:e)},[d,s,Y]),_t=!M.direction&&F<s.length-d,Tt=!M.direction&&F>=d&&!(d===1&&!je(Se-1)),ne=f==="left"?_t:Tt,re=f==="right"?_t:Tt,ue=!Te&&b<u.length-1,fe=!Te&&b>0;Ct.current={canFlipLeft:ne,canFlipRight:re,canZoomIn:ue,canZoomOut:fe,page:Ve,numPages:Lt};const it=f==="right"||d===1?Se:ot,lt=f==="left"?Se:ot,en=!!je(it),tn=!!je(lt)&&d===2,jt=ke&&Ue?Math.min(i/d/ke,j/Ue,1):1,y=ke?Math.round(ke*jt):0,ge=Ue?Math.round(Ue*jt):0,G=(i-y*d)/2,de=(j-ge)/2,nn=Math.ceil(y/I+1/R)+"px",rn=ge+"px",on=`${y}px ${ge}px`,sn=t.useMemo(()=>{if(!M.direction||d!==1)return 1;let e=M.progress;return M.direction!==f&&(e=1-e),e>.7?1-(e-.7)/.3:1},[M.direction,M.progress,d,f]),he=(()=>{if(d===1)return G;const e=je(it)?G:i/2;return M.direction?e<ie.current?e:ie.current:e})(),ze=(()=>{if(d===1)return i-G;const e=je(lt)?i-G:i/2;return M.direction?e>le.current?e:le.current:e})(),pe=ee?Math.round(i/2-(he+ze)/2):0,Ft=t.useRef(pe);Ft.current=pe;const Et=t.useRef(d);t.useEffect(()=>{Be===null&&ke!==null&&at(pe)},[Be,ke,pe]),t.useEffect(()=>{Et.current!==d&&(Et.current=d,at(pe),De.current=!1)},[d,pe]);const Oe=Math.round(Be??0),an=ve.current?ve.current:U&&ue?"zoom-in":U&&fe?"zoom-out":O?"grab":"auto",cn=!A.current,ln=(Te||R>1)&&cn?S.viewportZoomDragToScroll:Te||R>1?S.viewportZoom:S.viewport,un=(()=>{const e=(ze-he)*R;return e<i?(he+Oe)*R-(i-e)/2:(he+Oe)*R})(),fn=(()=>{const e=(ze-he)*R;return e<i?(he+Oe)*R-(i-e)/2:(ze+Oe)*R-i})(),gn=(()=>{const e=ge*R;return e<j?de*R-(j-e)/2:de*R})(),dn=(()=>{const e=ge*R;return e<j?de*R-(j-e)/2:(de+ge)*R-j})(),Dt=Math.min(fn,Math.max(un,Fe.current)),zt=Math.min(dn,Math.max(gn,Ee.current)),Ot=t.useCallback((e,r)=>{const a=[],l=[-.5,-.25,0,.25,.5];if(E<1){const h=1-E,p=l.map(k=>(1-Math.cos((e-r*k)/180*Math.PI))*h);a.push(`linear-gradient(to right,rgba(0,0,0,${p[0]}),rgba(0,0,0,${p[1]}) 25%,rgba(0,0,0,${p[2]}) 50%,rgba(0,0,0,${p[3]}) 75%,rgba(0,0,0,${p[4]}))`)}if(_>0){const k=l.map(x=>Math.max(Math.pow(Math.cos((e+30-r*x)/180*Math.PI),200),Math.pow(Math.cos((e-30-r*x)/180*Math.PI),200)));a.push(`linear-gradient(to right,rgba(255,255,255,${k[0]*_}),rgba(255,255,255,${k[1]*_}) 25%,rgba(255,255,255,${k[2]*_}) 50%,rgba(255,255,255,${k[3]*_}) 75%,rgba(255,255,255,${k[4]*_}))`)}return a.join(",")},[E,_]),ut=t.useCallback(e=>{const r=Q.current;if(!r.direction)return[];if(!Number.isFinite(y)||y<=0||I<=0)return[];let a=r.progress,l=r.direction;if(!Number.isFinite(a))return[];a<0&&(a=0),a>1&&(a=1),d===1&&l!==f&&(a=1-a,l=f);const h=e==="front"?r.frontImage:r.backImage,p=y/I;let k=G,x=!1;d===1?f==="right"?e==="back"&&(x=!0,k=G-y):l==="left"?e==="back"?k=y-G:x=!0:e==="front"?k=y-G:x=!0:l==="left"?e==="back"?k=i/2:x=!0:e==="front"?k=i/2:x=!0;const v=new et;v.translate(i/2),v.perspective(C),v.translate(-i/2),v.translate(k,de);let Z=0;a>.5&&(Z=-(a-.5)*2*180),l==="left"&&(Z=-Z),e==="back"&&(Z+=180),Z&&(x&&v.translate(y),v.rotateY(Z),x&&v.translate(-y));let w;a<.5?w=a*2*Math.PI:w=(1-(a-.5)*2)*Math.PI,w===0&&(w=1e-9);const me=y/w;let N=0;const $=w/I;let X=$/2/Math.PI*180;const J=$/Math.PI*180;x&&(X=-w/Math.PI*180+J/2),e==="back"&&(X=-X);const We=e==="back"?-J:J;ie.current=1/0,le.current=-1/0;const q=[];for(let Qe=0;Qe<I;Qe++){const Cn=`${Qe/(I-1)*100}% 0px`,Ne=v.clone(),Ht=x?w-N:N;let dt=Math.sin(Ht)*me;x&&(dt=y-dt);let Je=(1-Math.cos(Ht))*me;e==="back"&&(Je=-Je),Ne.translate3d(dt,0,Je),Ne.rotateY(-X);const Bt=Ne.transformX(0),Ut=Ne.transformX(p);le.current=Math.max(Math.max(Bt,Ut),le.current),ie.current=Math.min(Math.min(Bt,Ut),ie.current);const Sn=Ot(Z-X,We);N+=$,X+=We,q.push({key:e+Qe,bgImage:h,lighting:Sn,bgPos:Cn,transform:Ne.toString(),z:Math.abs(Math.round(Je))})}return q},[d,f,y,G,de,i,C,I,Ot]),hn=t.useMemo(()=>M.direction?[...ut("front"),...ut("back")]:[],[M.direction,M.progress,M.frontImage,M.backImage,ut]),K=t.useCallback((e,r)=>{const a=Pe.current,l=Ke.current;let h=null,p=null;e!==f?l===1?(h=s[a-1]??null,p=null):(h=s[f==="right"||l===1?a:a+1]??null,p=s[a-l+1]??null):l===1?(h=s[a]??null,p=null):(h=s[f==="left"?a:a+1]??null,p=s[a+l]??null),B({progress:0,direction:e,frontImage:h,backImage:p,auto:!1}),D(()=>{D(()=>{e!==f?l===2&&ce(a-l):l===1?ce(a+l):n(a+1+l),r&&ft(e)})})},[f,s,D]),ft=t.useCallback(e=>{const r=Q.current,a=L*(1-r.progress),l=r.progress;B(v=>({...v,auto:!0}));const h=Pe.current,p=s[0]!==null?h+1:Math.max(1,h);e==="left"?Rt.current?.(p):Pt.current?.(p);let k=null;const x=v=>{k===null&&(k=v);const Z=v-k;let w=l+Z/a;w>1&&(w=1);const me=At(w);if(B(N=>({...N,progress:me})),w<1)D(x);else{const N=Ke.current;let $;e!==f?$=Pe.current-N:$=Pe.current+N,wt.current($);const X=s[0]!==null?$+1:Math.max(1,$);e==="left"?vt.current?.(X):yt.current?.(X),N===1&&e===f?B(Xe):Ae(1,()=>{B(Xe)})}};D(x)},[L,f,s,Ae,D]),Zt=t.useCallback(()=>{const e=Q.current,r=L*e.progress,a=e.progress;B(p=>({...p,auto:!0}));let l=null;const h=p=>{l===null&&(l=p);const k=p-l;let x=a-a*k/r;if(x<0&&(x=0),B(v=>({...v,progress:x})),x>0)D(h);else{const v=Pe.current;ce(v),n(v+1);const Z=Ke.current,w=Q.current.direction;Z===1&&w!==f?B(Xe):Ae(1,()=>{B(Xe)})}};D(h)},[L,f,Ae,D]),pn=t.useCallback(()=>{ne&&K("left",!0)},[ne,K]),mn=t.useCallback(()=>{re&&K("right",!0)},[re,K]),Ie=t.useCallback((e,r)=>{const a=o.current;if(!a)return;let l,h;if(r){const J=a.getBoundingClientRect();l=r.pageX-J.left,h=r.pageY-J.top}else l=a.clientWidth/2,h=a.clientHeight/2;const p=ye.current,k=e,x=a.scrollLeft,v=a.scrollTop,Z=l+x,w=h+v,me=Z/p*k-l,N=w/p*k-h;pt(!0),It.current?.(e);let $=null;const X=J=>{$===null&&($=J);const We=J-$;let q=We/P;q>1&&(q=1),q=At(q),_e(p+(k-p)*q),Fe.current=x+(me-x)*q,Ee.current=v+(N-v)*q,We<P?D(X):(Mt.current?.(e),pt(!1),_e(e),Fe.current=me,Ee.current=N)};D(X),k>1&&Ye(!0)},[P,o,Ye,D]),Ze=t.useCallback(e=>{if(!ue)return;const r=qe.current+1;st(r),Ie(u[r],e)},[ue,u,Ie]),$e=t.useCallback(e=>{if(!fe)return;const r=qe.current-1;st(r),Ie(u[r],e)},[fe,u,Ie]),$t=t.useCallback(e=>{const r=(qe.current+1)%u.length;st(r),Ie(u[r],e)},[u,Ie]),gt=t.useCallback(e=>{if(e===null||e===Ve)return;let r;s[0]===null?d===2&&e===1?r=0:r=e:r=e-1,(d===2&&r>0&&s[0]===null||d===2&&s[0]!==null)&&(r=r&-2),Y(r),ie.current=1/0,le.current=-1/0},[Ve,s,d,Y]),Wt=t.useRef(gt);Wt.current=gt;const Nt=t.useCallback((e,r)=>{const a=o.current;a&&(a.scrollLeft=kt.current-e,a.scrollTop=xt.current-r,Fe.current=a.scrollLeft,Ee.current=a.scrollTop)},[o]),Me=t.useCallback(e=>{if(xe.current=e.pageX,bt.current=e.pageY,Re.current=0,ye.current<=1)O&&(ve.current="grab");else{const r=o.current;r&&(kt.current=r.scrollLeft,xt.current=r.scrollTop),ve.current="all-scroll"}},[O,o]),we=t.useCallback(e=>{if(xe.current===null)return!1;const r=e.pageX-xe.current,a=e.pageY-bt.current;if(Re.current=Math.max(Re.current,Math.abs(r)),Re.current=Math.max(Re.current,Math.abs(a)),ye.current>1)return A.current||Nt(r,a),!1;if(!O||Math.abs(a)>Math.abs(r)||!Number.isFinite(y)||y<=0)return!1;ve.current="grabbing",mt(h=>h+1);const l=Q.current;return r>0?(l.direction===null&&ne&&r>=T&&K("left",!1),Q.current.direction==="left"&&B(h=>({...h,progress:Math.min(r/y,1)}))):(l.direction===null&&re&&r<=-T&&K("right",!1),Q.current.direction==="right"&&B(h=>({...h,progress:Math.min(-r/y,1)}))),!0},[O,ne,re,T,K,y,Nt]),Le=t.useCallback(e=>{if(xe.current===null)return;U&&Re.current<T&&$t(e);const r=Q.current;r.direction!==null&&!r.auto&&(r.progress>1/4?ft(r.direction):Zt()),xe.current=null,ve.current=null,mt(a=>a+1)},[U,T,$t,ft,Zt]),bn=t.useCallback(e=>{A.current=!0,Me(e.changedTouches[0])},[Me]),kn=t.useCallback(e=>{if(we(e.changedTouches[0])){e.cancelable&&e.preventDefault();return}O&&ye.current<=1&&xe.current!==null&&e.cancelable&&e.preventDefault()},[O,we]),xn=t.useCallback(e=>{Le(e.changedTouches[0])},[Le]),Rn=t.useCallback(e=>{if(Ge.current=!0,!A.current&&e.button===0){Me(e);try{e.target.setPointerCapture(e.pointerId)}catch{}}},[Me]),vn=t.useCallback(e=>{A.current||we(e)},[we]),Pn=t.useCallback(e=>{if(!A.current){Le(e);try{e.target.releasePointerCapture(e.pointerId)}catch{}}},[Le]),yn=t.useCallback(e=>{A.current||Ge.current||e.button===0&&Me(e)},[Me]),In=t.useCallback(e=>{A.current||Ge.current||we(e)},[we]),Mn=t.useCallback(e=>{A.current||Ge.current||Le(e)},[Le]),wn=t.useCallback(e=>{if(ae==="scroll"&&ye.current>1&&!A.current){const r=o.current;r&&(r.scrollLeft+=e.deltaX,r.scrollTop+=e.deltaY,Fe.current=r.scrollLeft,Ee.current=r.scrollTop),e.cancelable&&e.preventDefault()}ae==="zoom"&&(e.deltaY>=100?($e(e),e.cancelable&&e.preventDefault()):e.deltaY<=-100&&(Ze(e),e.cancelable&&e.preventDefault()))},[ae,o,$e,Ze]),Ln=t.useCallback(e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),ne&&K("left",!0);break;case"ArrowRight":e.preventDefault(),re&&K("right",!0);break;case"+":case"=":e.preventDefault(),ue&&Ze();break;case"-":e.preventDefault(),fe&&$e();break}},[ne,re,ue,fe,K,Ze,$e]);t.useEffect(()=>{be===2&&Y(e=>{const r=e&-2;return r===0&&g?e:r}),ie.current=1/0,le.current=-1/0},[tt,be,g,Y]);const Xt=t.useRef(Ye);return Xt.current=Ye,t.useEffect(()=>{ce(F),n(F+1),Xt.current()},[F]),t.useEffect(()=>{if(De.current||Be===null)return;De.current=!0;const e=()=>{D(()=>{at(r=>{const a=Ft.current;if(r===null)return De.current=!1,a;const l=a-r;return Math.abs(l)<.5?(De.current=!1,a):(e(),r+l*.1)})})};e()},[pe,D]),t.useEffect(()=>{const e=o.current;e&&(e.scrollLeft=Dt)},[Dt,o]),t.useEffect(()=>{const e=o.current;e&&(e.scrollTop=zt)},[zt,o]),t.useEffect(()=>{St()},[s,St]),t.useEffect(()=>{Wt.current(oe)},[oe]),t.useEffect(()=>{_e(u[0])},[]),t.useEffect(()=>{const e=ct.current;return()=>{e.forEach(cancelAnimationFrame),e.clear()}},[]),{viewWidth:i,viewHeight:j,pageWidth:y,pageHeight:ge,xMargin:G,yMargin:de,displayedPages:d,zoom:R,centerOffsetSmoothed:Oe,page:Ve,numPages:Lt,leftPage:it,rightPage:lt,showLeftPage:en,showRightPage:tn,pageUrlLoading:Vt,loadImage:qt,flip:M,flipOpacity:sn,polygonArray:hn,polygonWidth:nn,polygonHeight:rn,polygonBgSize:on,canFlipLeft:ne,canFlipRight:re,canZoomIn:ue,canZoomOut:fe,boundingLeft:he,boundingRight:ze,cursor:an,viewportClass:ln,flipLeft:pn,flipRight:mn,zoomIn:Ze,zoomOut:$e,goToPage:gt,apiRef:Ct,handlers:{onTouchStart:bn,onTouchMove:kn,onTouchEnd:xn,onPointerDown:Rn,onPointerMove:vn,onPointerUp:Pn,onMouseDown:yn,onMouseMove:In,onMouseUp:Mn,onWheel:wn,onKeyDown:Ln},onImageLoad:Qt}}const Qn=t.forwardRef(function({pages:o,pagesHiRes:s,pageLabels:m,flipDuration:L,zoomDuration:P,zooms:z,perspective:C,nPolygons:I,ambient:E,gloss:_,swipeMin:T,singlePage:H,forwardDirection:f,centering:ee,startPage:oe,loadingImage:se,clickToZoom:U,dragToFlip:O,wheel:ae,bookClassName:V,bookStyle:te,page:u,onPageChange:g,onFlipLeftStart:i,onFlipLeftEnd:j,onFlipRightStart:be,onFlipRightEnd:tt,onZoomStart:nt,onZoomEnd:rt,children:Ce,className:F,...Y},Se){const ce=t.useRef(null),n=Vn({pages:o,pagesHiRes:s,flipDuration:L,zoomDuration:P,zooms:z,perspective:C,nPolygons:I,ambient:E,gloss:_,swipeMin:T,singlePage:H,forwardDirection:f,centering:ee,startPage:oe,loadingImage:se,clickToZoom:U,dragToFlip:O,wheel:ae,page:u,onPageChange:g,onFlipLeftStart:i,onFlipLeftEnd:j,onFlipRightStart:be,onFlipRightEnd:tt,onZoomStart:nt,onZoomEnd:rt},ce);t.useImperativeHandle(Se,()=>({get flipLeft(){return n.flipLeft},get flipRight(){return n.flipRight},get zoomIn(){return n.zoomIn},get zoomOut(){return n.zoomOut},get goToPage(){return n.goToPage},get canFlipLeft(){return n.apiRef.current.canFlipLeft},get canFlipRight(){return n.apiRef.current.canFlipRight},get canZoomIn(){return n.apiRef.current.canZoomIn},get canZoomOut(){return n.apiRef.current.canZoomOut},get page(){return n.apiRef.current.page},get numPages(){return n.apiRef.current.numPages}}),[n.flipLeft,n.flipRight,n.zoomIn,n.zoomOut,n.goToPage,n.apiRef]);const R=b=>m&&m[b]?m[b]:`Page ${b+1}`,_e=F?`${S.root} ${F}`:S.root;return W.jsxs("div",{...Y,className:_e,role:"document","aria-label":`Book viewer, page ${n.page} of ${n.numPages}`,"aria-roledescription":"flipbook",children:[Ce?.({canFlipLeft:n.canFlipLeft,canFlipRight:n.canFlipRight,canZoomIn:n.canZoomIn,canZoomOut:n.canZoomOut,page:n.page,numPages:n.numPages,flipLeft:n.flipLeft,flipRight:n.flipRight,zoomIn:n.zoomIn,zoomOut:n.zoomOut,goToPage:n.goToPage}),W.jsx("div",{ref:ce,className:n.viewportClass,style:{cursor:n.cursor==="grabbing"?"grabbing":"auto"},tabIndex:0,onKeyDown:n.handlers.onKeyDown,onTouchMove:n.handlers.onTouchMove,onPointerMove:n.handlers.onPointerMove,onMouseMove:n.handlers.onMouseMove,onTouchEnd:n.handlers.onTouchEnd,onTouchCancel:n.handlers.onTouchEnd,onPointerUp:n.handlers.onPointerUp,onPointerCancel:n.handlers.onPointerUp,onMouseUp:n.handlers.onMouseUp,onWheel:n.handlers.onWheel,children:W.jsxs("div",{className:V?`${S.container} ${V}`:S.container,style:{...te,transform:`scale(${n.zoom})`},children:[W.jsx("div",{role:"button",tabIndex:n.canFlipLeft?0:-1,"aria-label":"Previous page","aria-disabled":!n.canFlipLeft,className:S.clickLeft,style:{cursor:n.canFlipLeft?"pointer":"auto"},onClick:n.flipLeft,onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&(b.preventDefault(),n.flipLeft())}}),W.jsx("div",{role:"button",tabIndex:n.canFlipRight?0:-1,"aria-label":"Next page","aria-disabled":!n.canFlipRight,className:S.clickRight,style:{cursor:n.canFlipRight?"pointer":"auto"},onClick:n.flipRight,onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&(b.preventDefault(),n.flipRight())}}),W.jsxs("div",{style:{transform:`translateX(${n.centerOffsetSmoothed}px)`},children:[n.showLeftPage&&W.jsx("img",{className:S.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.xMargin+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.leftPage,!0)??void 0,alt:R(n.leftPage),onLoad:n.onImageLoad}),n.showRightPage&&W.jsx("img",{className:S.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.viewWidth/2+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.rightPage,!0)??void 0,alt:R(n.rightPage),onLoad:n.onImageLoad}),W.jsx("div",{style:{opacity:n.flipOpacity},children:n.polygonArray.map(b=>W.jsx("div",{className:b.bgImage?S.polygon:S.polygonBlank,style:{backgroundImage:b.bgImage?`url(${n.loadImage(b.bgImage)})`:void 0,backgroundSize:n.polygonBgSize,backgroundPosition:b.bgPos,width:n.polygonWidth,height:n.polygonHeight,transform:b.transform,zIndex:b.z},children:b.lighting&&W.jsx("div",{className:S.lighting,style:{backgroundImage:b.lighting}})},b.key))}),W.jsx("div",{className:S.boundingBox,style:{left:n.boundingLeft+"px",top:n.yMargin+"px",width:n.boundingRight-n.boundingLeft+"px",height:n.pageHeight+"px",cursor:n.cursor},onTouchStart:n.handlers.onTouchStart,onPointerDown:n.handlers.onPointerDown,onMouseDown:n.handlers.onMouseDown})]})]})}),W.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:S.srOnly,children:["Page ",n.page," of ",n.numPages]})]})});exports.Flipbook=Qn;

package/dist/react-flipbook.css

@@ -1 +1 @@
-._root_1ydjt_1{display:flex;flex-direction:column;width:100%;height:100%}._viewport_1ydjt_8{width:100%;flex:1;min-height:0}._viewportZoom_1ydjt_14{overflow:scroll}._viewportZoomDragToScroll_1ydjt_19{overflow:hidden}._container_1ydjt_24{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;user-select:none}._clickToFlip_1ydjt_32{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;user-select:none}._clickLeft_1ydjt_40{left:0}._clickRight_1ydjt_45{right:0}._boundingBox_1ydjt_50{position:absolute;-webkit-user-select:none;user-select:none}._page_1ydjt_55{position:absolute;backface-visibility:hidden}._polygon_1ydjt_60{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}._polygonBlank_1ydjt_69{background-color:var(--flipbook-blank-page-bg, #ddd)}._lighting_1ydjt_74{width:100%;height:100%}._srOnly_1ydjt_79{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+._root_jjdx8_1{display:flex;flex-direction:column;width:100%;height:100%}._viewport_jjdx8_8{width:100%;flex:1;min-height:0;touch-action:none;overscroll-behavior:contain}._viewportZoom_jjdx8_16{overflow:scroll;touch-action:pan-x pan-y}._viewportZoomDragToScroll_jjdx8_22{overflow:hidden}._container_jjdx8_27{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;user-select:none}._clickToFlip_jjdx8_35{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;user-select:none}._clickLeft_jjdx8_43{left:0}._clickRight_jjdx8_48{right:0}._boundingBox_jjdx8_53{position:absolute;-webkit-user-select:none;user-select:none}._page_jjdx8_58{position:absolute;backface-visibility:hidden}._polygon_jjdx8_63{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}._polygonBlank_jjdx8_72{background-color:var(--flipbook-blank-page-bg, #ddd)}._lighting_jjdx8_77{width:100%;height:100%}._srOnly_jjdx8_82{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}