UNPKG

react-peel

Version:

react-peel is a react library to create realistic peeling effects. No dependencies.

iqbal-rashed.github.io/react-peel

iqbal-rashed/react-peel

37 lines (33 loc) • 21.9 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"use strict";var Z=Object.defineProperty;var Pt=Object.getOwnPropertyDescriptor;var bt=Object.getOwnPropertyNames;var wt=Object.prototype.hasOwnProperty;var St=(l,f)=>{for(var v in f)Z(l,v,{get:f[v],enumerable:!0})},Ot=(l,f,v,o)=>{if(f&&typeof f=="object"||typeof f=="function")for(let O of bt(f))!wt.call(l,O)&&O!==v&&Z(l,O,{get:()=>f[O],enumerable:!(o=Pt(f,O))||o.enumerable});return l};var Ct=l=>Ot(Z({},"__esModule",{value:!0}),l);var Tt={};St(Tt,{PeelBack:()=>Q,PeelBottom:()=>$,PeelTop:()=>K,PeelWrapper:()=>J});module.exports=Ct(Tt);var d=require("react");var F={TOP_LEFT:0,TOP_RIGHT:1,BOTTOM_LEFT:2,BOTTOM_RIGHT:3};function at(){var l=100,f=["webkit","moz",""],v="http://www.w3.org/2000/svg",o="peel-",O,E,u,T,m,b=document.documentElement,H=b.style;function w(t){for(var e,n,i=0;i<f.length;i++)if(e=f[i],n=e?e+ct(t):t,n in H)return n}function k(){O=w("clipPath"),E=w("transform"),u=w("boxShadow"),T=w("filter"),B(),r.supported=!!(O&&E),r.effectsSupported=m}function B(){var t=document.createElement("div"),e=t.style;e.cssText="background:linear-gradient(45deg,#9f9,white);",m=(e.backgroundImage||"").indexOf("gradient")>-1}function S(t){return Math.round(t*l)/l}function V(t){return Math.max(0,Math.min(1,t))}function tt(t,e,n){return(t-e)/(n-e)}function ht(t,e){return(e||1)*2*(.5-Math.abs(t-.5))}function ct(t){return t.slice(0,1).toUpperCase()+t.slice(1)}function lt(t){return t.replace(/-(\w)/g,function(e,n){return n.toUpperCase()})}function R(t){return o+t}function ut(t,e){t.style[O]=e}function j(t,e){t.style[E]=e}function pt(t,e,n,i,s,a){t.style[u]=et(e,n,i,s,a)}function ft(t,e,n,i,s){t.style[T]="drop-shadow("+et(e,n,i,null,s)+")"}function et(t,e,n,i,s){return S(t)+"px "+S(e)+"px "+S(n)+"px "+(i?S(i)+"px ":"")+"rgba(0,0,0,"+S(s)+")"}function W(t,e){t.style.opacity=e}function X(t,e,n){if(m){var i;n.length===0?i="none":i="linear-gradient("+S(e)+"deg,"+n.join(",")+")",t.style.backgroundImage=i}}function Y(t,e,n,i){t.addEventListener(e,n,i)}function U(t,e,n){t.removeEventListener(e,n)}function nt(t,e){var n=t.changedTouches?t.changedTouches[0]:t;return{x:n.clientX-e.getBoundingClientRect().left,y:n.clientY-e.getBoundingClientRect().top}}function kt(t,e,n,i){return function(s){t.call(e,s,n,i)}}function L(t,e){return it(0,0,0,t,e)}function N(t,e){return it(255,255,255,t,e)}function it(t,e,n,i,s){return i=S(V(i)),"rgba("+t+","+e+","+n+","+i+") "+S(s*100)+"%"}function rt(t,e){return typeof t=="string"&&(t=(e||document).querySelector(t)),t}function dt(t,e){var n=document.createElement("div");return _(n,e),t.appendChild(n),n}function Rt(t,e){t.classList.remove(e)}function _(t,e){t.classList.add(e)}function gt(t){return t.style.zIndex}function yt(t,e){t.style.zIndex=e}function D(t,e,n){e=e||b;var i=document.createElementNS(v,t);e.appendChild(i);for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&q(i,s,n[s]);return i}function q(t,e,n){t.setAttributeNS(null,e,n)}function r(t,e){this.setOptions(e),this.el=rt(t,b),this.constraints=[],this.events=[],this.dragHandlers=[],this.setupLayers(),this.setupDimensions(),this.setCorner(this.getOption("corner")),this.setMode(this.getOption("mode")),this.init()}r.Corners=F,r.Defaults={topShadow:!0,topShadowBlur:5,topShadowAlpha:.5,topShadowOffsetX:0,topShadowOffsetY:1,topShadowCreatesShape:!0,backReflection:!1,backReflectionSize:.02,backReflectionOffset:0,backReflectionAlpha:.15,backReflectionDistribute:!0,backShadow:!0,backShadowSize:.04,backShadowOffset:0,backShadowAlpha:.1,backShadowDistribute:!0,bottomShadow:!0,bottomShadowSize:1.5,bottomShadowOffset:0,bottomShadowDarkAlpha:.7,bottomShadowLightAlpha:.1,bottomShadowDistribute:!0,setPeelOnInit:!0,clippingBoxScale:4,flipConstraintOffset:5,dragPreventsDefault:!0},r.prototype.setCorner=function(){var t=arguments;t[0]===void 0?t=[r.Corners.BOTTOM_RIGHT]:t[0].length&&(t=t[0]),this.corner=this.getPointOrCorner(t)},r.prototype.setMode=function(t){t==="book"?(this.addPeelConstraint(r.Corners.BOTTOM_LEFT),this.addPeelConstraint(r.Corners.TOP_LEFT),this.setOption("backReflection",!1),this.setOption("backShadowDistribute",!1),this.setOption("bottomShadowDistribute",!1)):t==="calendar"&&(this.addPeelConstraint(r.Corners.TOP_RIGHT),this.addPeelConstraint(r.Corners.TOP_LEFT))},r.prototype.setPeelPath=function(t,e){var n=arguments,i,s,a,c;i=new h(t,e),n.length===4?(s=new h(n[2],n[3]),this.path=new g(i,s)):n.length===8&&(a=new h(n[2],n[3]),c=new h(n[4],n[5]),s=new h(n[6],n[7]),this.path=new ot(i,a,c,s))},r.prototype.handleDrag=function(t,e){this.dragHandlers.push(t),this.setupDragEvents(e)},r.prototype.handlePress=function(t,e){this.pressHandler=t,this.setupDragEvents(e)},r.prototype.setupDragEvents=function(t){var e=this,n,i,s;if(this.dragEventsSetup)return;t=t||this.el;function a(y,x){e.getOption("dragPreventsDefault")&&x.preventDefault(),i=y?"touchmove":"mousemove",s=y?"touchend":"mouseup",Y(b,i,c),Y(b,s,p),n=!1}function c(y){e.dragHandlers.forEach(x=>{P(x,y)}),n=!0}function p(y){!n&&e.pressHandler&&P(e.pressHandler,y),U(b,i,c),U(b,s,p)}function P(y,x){var st=nt(x,e.el);y.call(e,x,st.x,st.y)}this.addEvent(t,"mousedown",a.bind(this,!1)),this.addEvent(t,"touchstart",a.bind(this,!0),vt()?{passive:!0}:!1),this.dragEventsSetup=!0};function vt(){let t=!1;try{let e=Object.defineProperty({},"passive",{get:function(){return t=!0,null}});window.addEventListener("test",null,e)}catch{console.warn("Passive event listener not support")}return t}r.prototype.removeEvents=function(){this.events.forEach(function(t,e){U(t.el,t.type,t.handler)}),this.events=[]},r.prototype.removeGlobalSvgElements=function(){var t=document.getElementsByClassName(R("svg-clip-element"));[...t].forEach(e=>e.remove())},r.prototype.clear=function(){this.removeEvents(),this.removeGlobalSvgElements()},r.prototype.setTimeAlongPath=function(t){t=V(t);var e=this.path.getPointForTime(t);this.timeAlongPath=t,this.setPeelPosition(e.x,e.y)},r.prototype.setFadeThreshold=function(t){this.fadeThreshold=t},r.prototype.setPeelPosition=function(){var t=this.getPointOrCorner(arguments);t=this.getConstrainedPeelPosition(t),t&&(this.peelLineSegment=this.getPeelLineSegment(t),this.peelLineRotation=this.peelLineSegment.getAngle(),this.setClipping(),this.setBackTransform(t),this.setEffects())},r.prototype.addPeelConstraint=function(){var t=this.getPointOrCorner(arguments),e=this.corner.subtract(t).getLength();this.constraints.push(new I(t,e)),this.calculateFlipConstraint()},r.prototype.setOption=function(t,e){this.options[t]=e},r.prototype.getOption=function(t){return this.options[lt(t)]},r.prototype.getAmountClipped=function(){var t=this.getTopClipArea(),e=this.width*this.height;return tt(t,e,0)},r.prototype.addEvent=function(t,e,n,i){return Y(t,e,n,i),this.events.push({el:t,type:e,handler:n}),n},r.prototype.getTopClipArea=function(){var t=new A;return this.elementBox.forEach(function(e){this.distributeLineByPeelLine(e,t)},this),A.getArea(t.getPoints())},r.prototype.calculateFlipConstraint=function(){var t=this.corner,e=this.constraints.concat();this.flipConstraint=e.sort(function(n,i){var s=t.y-n.center.y,a=t.y-i.center.y;return n-i})[0]},r.prototype.dragStart=function(t,e,n){},r.prototype.fireHandler=function(t,e){var n=nt(t,this.el);e.call(this,t,n.x,n.y)},r.prototype.setClipping=function(){var t=new A,e=new A;this.clippingBox.forEach(function(n){this.distributeLineByPeelLine(n,t,e)},this),this.topClip.setPoints(t.getPoints()),this.backClip.setPoints(e.getPoints())},r.prototype.distributeLineByPeelLine=function(t,e,n){var i=this.peelLineSegment.getIntersectPoint(t);this.distributePointByPeelLine(t.p1,e,n),this.distributePointByPeelLine(i,e,n)},r.prototype.distributePointByPeelLine=function(t,e,n){if(t){var i=this.peelLineSegment.getPointDeterminant(t);i<=0&&e.addPoint(t),i>=0&&n&&n.addPoint(this.flipPointHorizontally(t))}},r.prototype.setOptions=function(t){var e=t||{},n=r.Defaults;for(var i in n)!Object.prototype.hasOwnProperty.call(n,i)||i in e||(e[i]=n[i]);this.options=e},r.prototype.findOrCreateLayer=function(t,e,n){var i=t+"-element",s=R(t),a=rt(this.getOption(i)||"."+s,e);return a||(a=dt(e,s)),_(a,R("layer")),yt(a,n),a},r.prototype.getPointOrCorner=function(t){return t.length===2?new h(t[0],t[1]):typeof t[0]=="number"?this.getCornerPoint(t[0]):t[0]},r.prototype.getCornerPoint=function(t){var e=+!!(t&1)*this.width,n=+!!(t&2)*this.height;return new h(e,n)},r.prototype.getOptionalShape=function(){var t=["rect","polygon","path","circle"],e;return t.some(function(n){let i=this.getOption("shape");var a=i&&i[n],c;return a&&(c={},c.attributes=a,c.type=n,e=c),e},this),e},r.prototype.setupLayers=function(){var t=this.getOptionalShape(),e=this.topLayer=this.findOrCreateLayer("top",this.el,2),n=this.backLayer=this.findOrCreateLayer("back",this.el,3);this.bottomLayer=this.findOrCreateLayer("bottom",this.el,1),t?(this.topLayer=this.wrapShapeLayer(this.topLayer,"top-outer-clip"),this.backLayer=this.wrapShapeLayer(this.backLayer,"back-outer-clip"),this.topShapeClip=new C(e,t),this.backShapeClip=new C(n,t),this.bottomShapeClip=new C(this.bottomLayer,t),this.getOption("topShadowCreatesShape")&&(this.topShadowElement=this.setupDropShadow(t,e))):this.topShadowElement=this.findOrCreateLayer("top-shadow",e,1),this.topClip=new C(this.topLayer),this.backClip=new C(this.backLayer),this.backShadowElement=this.findOrCreateLayer("back-shadow",n,1),this.backReflectionElement=this.findOrCreateLayer("back-reflection",n,2),this.bottomShadowElement=this.findOrCreateLayer("bottom-shadow",this.bottomLayer,1),this.usesBoxShadow=!t},r.prototype.setupDropShadow=function(t,e){var n=D("svg",e,{class:R("layer")});return D(t.type,n,t.attributes),n},r.prototype.wrapShapeLayer=function(t,e){var n=gt(t);_(t,R("shape-layer"));var i=this.findOrCreateLayer(e,this.el,n);return i.appendChild(t),i},r.prototype.setupDimensions=function(){this.width=this.el.offsetWidth,this.height=this.el.offsetHeight,this.center=new h(this.width/2,this.height/2),this.elementBox=this.getScaledBox(1),this.clippingBox=this.getScaledBox(this.getOption("clippingBoxScale"))},r.prototype.getScaledBox=function(t){var e=t,n=t-1,i=new h(-this.width*n,-this.height*n),s=new h(this.width*e,-this.height*n),a=new h(this.width*e,this.height*e),c=new h(-this.width*n,this.height*e);return[new g(i,s),new g(s,a),new g(a,c),new g(c,i)]},r.prototype.getConstrainedPeelPosition=function(t){return this.constraints.forEach(function(e){var n=this.getFlipConstraintOffset(e,t);n&&(e=new I(e.center,e.radius-n)),t=e.constrainPoint(t)},this),t},r.prototype.getFlipConstraintOffset=function(t,e){var n=this.getOption("flipConstraintOffset");if(t===this.flipConstraint&&n){var i=this.corner.subtract(this.center),s=this.corner.subtract(t.center),a=s.getAngle(),c=s.rotate(-a),p=e.subtract(t.center).rotate(-a);if(i.x*i.y<0&&(p.y*=-1),p.x>0&&p.y>0)return tt(p.getAngle(),45,0)*n}},r.prototype.getPeelLineSegment=function(t){var e=this.corner.subtract(t).scale(.5),n=t.add(e);e.x===0&&e.y===0&&(e=t.subtract(this.center));var i=e.getLength(),s=Math.max(this.width,this.height)/i*10,a=e.rotate(-90).scale(s),c=n.add(a),p=n.subtract(a);return new g(c,p)},r.prototype.setBackTransform=function(t){var e=this.flipPointHorizontally(this.corner),n=(this.peelLineRotation-90)*2,i=t.subtract(e.rotate(n)),s="translate("+S(i.x)+"px, "+S(i.y)+"px) rotate("+S(n)+"deg)";j(this.backLayer,s),j(this.topShadowElement,s)},r.prototype.getPeelLineDistance=function(){var t,e,n,i;this.peelLineRotation<90?(t=r.Corners.TOP_RIGHT,e=r.Corners.BOTTOM_LEFT):this.peelLineRotation<180?(t=r.Corners.BOTTOM_RIGHT,e=r.Corners.TOP_LEFT):this.peelLineRotation<270?(t=r.Corners.BOTTOM_LEFT,e=r.Corners.TOP_RIGHT):this.peelLineRotation<360&&(t=r.Corners.TOP_LEFT,e=r.Corners.BOTTOM_RIGHT),n=this.getCornerPoint(t),i=this.getCornerPoint(e);var s=new g(n,i).scale(2),a=this.peelLineSegment.getIntersectPoint(s);if(!a)return 2;var c=n.subtract(a).getLength(),p=n.subtract(i).getLength();return c/p},r.prototype.setEffects=function(){var t=this.getPeelLineDistance();this.setTopShadow(t),this.setBackShadow(t),this.setBackReflection(t),this.setBottomShadow(t),this.setFade()},r.prototype.setTopShadow=function(t){if(this.getOption("topShadow")){var e=this.getOption("topShadowBlur"),n=this.getOption("topShadowOffsetX"),i=this.getOption("topShadowOffsetY"),s=this.getOption("topShadowAlpha"),a=this.exponential(t,5,s);this.usesBoxShadow?pt(this.topShadowElement,n,i,e,0,a):ft(this.topShadowElement,n,i,e,a)}},r.prototype.distributeOrLinear=function(t,e,n){return e?ht(t,n):t*n},r.prototype.exponential=function(t,e,n){return n*V(Math.pow(1+t,e)-1)},r.prototype.setBackReflection=function(t){var e=[];if(this.canSetLinearEffect("backReflection",t)){var n=this.getOption("backReflectionDistribute"),i=this.getOption("backReflectionSize"),s=this.getOption("backReflectionOffset"),a=this.getOption("backReflectionAlpha"),c=this.distributeOrLinear(t,n,i),p=t-s,P=p-c,y=P-c;e.push(N(0,0)),e.push(N(0,y)),e.push(N(a,P)),e.push(N(0,p))}X(this.backReflectionElement,180-this.peelLineRotation,e)},r.prototype.setBackShadow=function(t){var e=[];if(this.canSetLinearEffect("backShadow",t)){var n=this.getOption("backShadowSize"),i=this.getOption("backShadowOffset"),s=this.getOption("backShadowAlpha"),a=this.getOption("backShadowDistribute"),c=this.distributeOrLinear(t,a,n),p=t-i,P=p-c,y=P-c;e.push(L(0,0)),e.push(L(0,y)),e.push(L(s,P)),e.push(L(s,p))}X(this.backShadowElement,180-this.peelLineRotation,e)},r.prototype.setBottomShadow=function(t){var e=[];if(this.canSetLinearEffect("bottomShadow",t)){var n=this.getOption("bottomShadowSize"),i=this.getOption("bottomShadowOffset"),s=this.getOption("bottomShadowDarkAlpha"),a=this.getOption("bottomShadowLightAlpha"),c=this.getOption("bottomShadowDistribute"),p=t-(.025-i),P=p-this.distributeOrLinear(t,c,.03)*n-i,y=P-(.02*n-i);e=[L(0,0),L(0,y),L(a,P),L(a,p),L(s,t)]}X(this.bottomShadowElement,this.peelLineRotation+180,e)},r.prototype.canSetLinearEffect=function(t,e){return this.getOption(t)&&e>0},r.prototype.setFade=function(){var t=this.fadeThreshold,e=1,n;t&&(this.timeAlongPath!==void 0?n=this.timeAlongPath:n=this.getAmountClipped(),n>t&&(e=(1-n)/(1-t)),W(this.topLayer,e),W(this.backLayer,e),W(this.bottomShadowElement,e))},r.prototype.flipPointHorizontally=function(t){return new h(t.x-(t.x-this.center.x)*2,t.y)},r.prototype.init=function(){this.getOption("setPeelOnInit")&&this.setPeelPosition(this.corner),_(this.el,R("ready"))};function C(t,e){this.el=t,this.shape=C.createClipPath(t,e||{type:"polygon"}),j(this.el,"translate(0px,0px)")}C.getDefs=function(){return this.defs||(this.svg=D("svg",null,{class:R("svg-clip-element")}),this.defs=D("defs",this.svg)),this.defs},C.createClipPath=function(t,e){var n=C.getId(),i=D("clipPath",this.getDefs()),s=D(e.type,i,e.attributes);return q(i,"id",n),ut(t,"url(#"+n+")"),s};function mt(){if(crypto&&crypto.getRandomValues){var t=new Uint32Array(4);return crypto.getRandomValues(t),t.join("").replace(/[^a-zA-Z0-9]/g,"")}else return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}C.getId=function(){return"svg-clip-"+mt()},C.prototype.setPoints=function(t){var e=t.map(function(n){return S(n.x)+","+S(n.y)}).join(" ");q(this.shape,"points",e)};function I(t,e){this.center=t,this.radius=e}I.prototype.containsPoint=function(t){if(this.boundingRectContainsPoint(t)){var e=this.center.x-t.x,n=this.center.y-t.y;e*=e,n*=n;var i=e+n,s=this.radius*this.radius;return i<=s}return!1},I.prototype.boundingRectContainsPoint=function(t){return t.x>=this.center.x-this.radius&&t.x<=this.center.x+this.radius&&t.y>=this.center.y-this.radius&&t.y<=this.center.y+this.radius},I.prototype.constrainPoint=function(t){if(!this.containsPoint(t)){var e=t.subtract(this.center).getAngle();t=this.center.add(new h(this.radius,0).rotate(e))}return t};function A(){this.points=[]}A.getArea=function(t){var e=0,n=0;return t.forEach(function(i,s,a){var c=a[(s+1)%a.length];e+=i.x*c.y,n+=i.y*c.x}),(e-n)/2},A.prototype.addPoint=function(t){this.points.push(t)},A.prototype.getPoints=function(){return this.points};function ot(t,e,n,i){this.p1=t,this.c1=e,this.p2=i,this.c2=n}ot.prototype.getPointForTime=function(t){var e=Math.pow(1-t,3),n=3*t*Math.pow(1-t,2),i=3*Math.pow(t,2)*(1-t),s=Math.pow(t,3),a=e*this.p1.x+n*this.c1.x+i*this.c2.x+s*this.p2.x,c=e*this.p1.y+n*this.c1.y+i*this.c2.y+s*this.p2.y;return new h(a,c)};function g(t,e){this.p1=t,this.p2=e}g.EPSILON=1e-6,g.prototype.getPointForTime=function(t){return this.p1.add(this.getVector().scale(t))},g.prototype.scale=function(t){var e=1+t/2,n=this.p1.add(this.p2.subtract(this.p1).scale(t)),i=this.p2.add(this.p1.subtract(this.p2).scale(t));return new g(n,i)},g.prototype.getPointDeterminant=function(t){var e=(t.x-this.p1.x)*(this.p2.y-this.p1.y)-(t.y-this.p1.y)*(this.p2.x-this.p1.x);return e>-g.EPSILON&&e<g.EPSILON&&(e=0),e},g.prototype.getIntersectPoint=function(t){var e=this;function n(y,x){return y.x*x.y-y.y*x.x}var i=e.p2.subtract(e.p1),s=t.p2.subtract(t.p1),a=n(t.p1.subtract(e.p1),i),c=n(i,s);if(c==0)return null;var p=a/c,P=n(t.p1.subtract(e.p1),s)/c;return P>=0&&P<=1&&p>=0&&p<=1?e.p1.add(i.scale(P)):null},g.prototype.getAngle=function(){return this.getVector().getAngle()},g.prototype.getVector=function(){return this.vector||(this.vector=this.p2.subtract(this.p1)),this.vector};function h(t,e){this.x=t,this.y=e}return h.DEGREES_IN_RADIANS=180/Math.PI,h.degToRad=function(t){return t/h.DEGREES_IN_RADIANS},h.radToDeg=function(t){for(var e=t*h.DEGREES_IN_RADIANS;e<0;)e+=360;return e},h.vector=function(t,e){var n=h.degToRad(t);return new h(Math.cos(n)*e,Math.sin(n)*e)},h.prototype.add=function(t){return new h(this.x+t.x,this.y+t.y)},h.prototype.subtract=function(t){return new h(this.x-t.x,this.y-t.y)},h.prototype.scale=function(t){return new h(this.x*t,this.y*t)},h.prototype.getLength=function(){return Math.sqrt(Math.pow(this.x,2)+Math.pow(this.y,2))},h.prototype.getAngle=function(){return h.radToDeg(Math.atan2(this.y,this.x))},h.prototype.setAngle=function(t){return h.vector(t,this.getLength())},h.prototype.rotate=function(t){return this.setAngle(this.getAngle()+t)},k(),r}var M=require("react/jsx-runtime"),J=(0,d.forwardRef)(Lt);function Lt({children:l,options:f={},containerProps:v,...o},O){let E=(0,d.useRef)(null),u=(0,d.useRef)(null);Et(),(0,d.useEffect)(()=>{function m(){if(!E.current)return;let b=at(),H=new b(E.current,xt(f));if(u.current=H,O&&(O.current=H),o.peelPosition&&u.current.setPeelPosition(o.peelPosition.x,o.peelPosition.y),o.corner)if(Object.prototype.hasOwnProperty.call(o.corner,"x")&&Object.prototype.hasOwnProperty.call(o.corner,"y")){let{x:w,y:k}=o.corner;u.current.setCorner(w,k)}else z(o.corner)&&u.current.setCorner(G(o.corner));o.constraints&&(Array.isArray(o.constraints)?o.constraints.forEach(w=>{T(w)}):T(o.constraints)),o.mode&&u.current.setMode(o.mode),o.fadeThreshold&&u.current.setFadeThreshold(o.fadeThreshold),o.peelPath&&Array.isArray(o.peelPath)&&u.current.setPeelPath(...o.peelPath),o.drag&&u.current?.handleDrag(function(w,k,B){u.current.setPeelPosition(k,B)}),o.handleDrag&&u.current?.handleDrag((w,k,B)=>o.handleDrag?.(w,k,B,u.current)),o.handlePress&&u.current?.handlePress(w=>o.handlePress?.(w,u.current))}return m(),()=>{u.current&&u.current.clear()}},[f]),(0,d.useEffect)(()=>{o.timeAlongPath&&u.current?.setTimeAlongPath(o.timeAlongPath)},[o.timeAlongPath]),(0,d.useEffect)(()=>{o.peelPosition&&u.current.setPeelPosition(o.peelPosition.x,o.peelPosition.y)},[o.peelPosition]),(0,d.useEffect)(()=>{if(o.corner)if(Object.prototype.hasOwnProperty.call(o.corner,"x")&&Object.prototype.hasOwnProperty.call(o.corner,"y")){let{x:m,y:b}=o.corner;u.current.setCorner(m,b)}else z(o.corner)&&u.current.setCorner(G(o.corner))},[o.corner]),(0,d.useEffect)(()=>{o.peelPath&&Array.isArray(o.peelPath)&&u.current.setPeelPath(...o.peelPath)},[o.peelPath]),(0,d.useEffect)(()=>{o.mode&&u.current.setMode(o.mode)},[o.mode]),(0,d.useEffect)(()=>{o.fadeThreshold&&u.current.setFadeThreshold(o.fadeThreshold)},[o.fadeThreshold]),(0,d.useEffect)(()=>{o.constraints&&(Array.isArray(o.constraints)?o.constraints.forEach(m=>{T(m)}):T(o.constraints))},[o.constraints]);function T(m){if(z(m))u.current.addPeelConstraint(G(m));else if(Object.prototype.hasOwnProperty.call(m,"x")&&Object.prototype.hasOwnProperty.call(m,"y")){let b=m;u.current.addPeelConstraint(b.x,b.y)}}return(0,M.jsx)("div",{ref:E,className:"peel "+o?.className,...v,style:{height:o.height||"100%",width:o.width||"100%",...v?.style},children:l})}function xt(l){return l.corner&&(l.corner=z(l.corner)?G(l.corner):void 0),l}function z(l){return Object.keys(F).includes(l)}function G(l){return F[l]}J.displayName="PeelWrapper";var Et=()=>{(0,d.useEffect)(()=>{let l=document.createElement("style");return l.innerHTML=` .peel { position: relative; opacity: 0; } .peel-ready { opacity: 1; } .peel-svg-clip-element { position: absolute; top: -10000px; left: -10000px; width: 1px; height: 1px; opacity: 0; } .peel-layer { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; } `,document.head.appendChild(l),()=>{document.head.removeChild(l)}},[])},K=(0,d.forwardRef)(function({className:l,...f},v){return(0,M.jsx)("div",{ref:v,className:"peel-top "+l,...f})});K.displayName="PeelTop";var Q=(0,d.forwardRef)(function({className:l,...f},v){return(0,M.jsx)("div",{ref:v,className:"peel-back "+l,...f})});Q.displayName="PeelBack";var $=(0,d.forwardRef)(function({className:l,...f},v){return(0,M.jsx)("div",{ref:v,className:"peel-bottom "+l,...f})});$.displayName="PeelBottom";0&&(module.exports={PeelBack,PeelBottom,PeelTop,PeelWrapper});