react-perspective-transform/dist/index.js

A lightweight **React** component that applies a perspective transform to its children, allowing you to manipulate each corner independently. Perfect for interactive demos, image warping, or advanced UI effects.

/*! For license information please see index.js.LICENSE.txt */
import*as e from"react";var t={208:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".perspective-container {\n  position: relative;\n  width: fit-content;\n}\n\n.control-point {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background-color: red;\n  border-radius: 50%;\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n}\n\n.alignment-guides {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none; /* Prevent interfering with user interactions */\n  background-image: linear-gradient(\n      to right,\n      rgba(0, 0, 0, 0.1) 1px,\n      transparent 1px\n    ),\n    linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);\n  background-size: 20px 20px; /* Adjust grid size as needed */\n  z-index: 1; /* Ensure it appears below control points but above the content */\n}\n",""]);const s=a},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(a[c]=!0)}for(var u=0;u<e.length;u++){var f=[].concat(e[u]);r&&a[f[0]]||(void 0!==i&&(void 0===f[5]||(f[1]="@layer".concat(f[5].length>0?" ".concat(f[5]):""," {").concat(f[1],"}")),f[5]=i),n&&(f[2]?(f[1]="@media ".concat(f[2]," {").concat(f[1],"}"),f[2]=n):f[2]=n),o&&(f[4]?(f[1]="@supports (".concat(f[4],") {").concat(f[1],"}"),f[4]=o):f[4]="".concat(o)),t.push(f))}},t}},601:e=>{e.exports=function(e){return e[1]}},698:(e,t)=>{var n=Symbol.for("react.transitional.element");function r(e,t,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==t.key&&(o=""+t.key),"key"in t)for(var i in r={},t)"key"!==i&&(r[i]=t[i]);else r=t;return t=r.ref,{$$typeof:n,type:e,key:o,ref:void 0!==t?t:null,props:r}}Symbol.for("react.fragment"),t.jsx=r,t.jsxs=r},848:(e,t,n)=>{e.exports=n(698)},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var i={},a=[],s=0;s<e.length;s++){var c=e[s],u=r.base?c[0]+r.base:c[0],f=i[u]||0,l="".concat(u," ").concat(f);i[u]=f+1;var p=n(l),d={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==p)t[p].references++,t[p].updater(d);else{var v=o(d,r);r.byIndex=s,t.splice(s,0,{identifier:l,updater:v,references:1})}a.push(l)}return a}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var s=n(i[a]);t[s].references--}for(var c=r(e,o),u=0;u<i.length;u++){var f=n(i[u]);0===t[f].references&&(t[f].updater(),t.splice(f,1))}i=c}}},659:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={id:e,exports:{}};return t[e](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},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.nc=void 0;var o={};r.d(o,{H:()=>S});var i=r(72),a=r.n(i),s=r(825),c=r.n(s),u=r(659),f=r.n(u),l=r(56),p=r.n(l),d=r(540),v=r.n(d),m=r(113),h=r.n(m),y=r(208),g={};g.styleTagTransform=h(),g.setAttributes=p(),g.insert=f().bind(null,"head"),g.domAPI=c(),g.insertStyleElement=v(),a()(y.A,g),y.A&&y.A.locals&&y.A.locals;var x=r(848);const b=(w={useEffect:()=>e.useEffect,useLayoutEffect:()=>e.useLayoutEffect,useRef:()=>e.useRef,useState:()=>e.useState},E={},r.d(E,w),E);var w,E,L=function(){return L=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},L.apply(this,arguments)};const S=function(e){var t=e.children,n=e.points,r=e.onPointsChange,o=e.storageKey,i=e.editable,a=e.onEditableChange,s=e.toggleKeys,c=void 0===s?["p"]:s,u=(0,b.useRef)(null),f=(0,b.useState)(n||{topLeft:{x:0,y:0},topRight:{x:100,y:0},bottomRight:{x:100,y:100},bottomLeft:{x:0,y:100}}),l=f[0],p=f[1],d=(0,b.useState)(!1),v=d[0],m=d[1],h=(0,b.useState)(!1),y=h[0],g=h[1],w=(0,b.useState)(""),E=w[0],S=w[1],R=void 0!==i?i:v;return(0,b.useEffect)((function(){if(o&&y)try{localStorage.setItem(o,JSON.stringify(l))}catch(e){console.error("Failed to store perspective points",e)}}),[l,o,y]),(0,b.useEffect)((function(){n&&p(n)}),[n]),(0,b.useEffect)((function(){if(!n&&o){var e=localStorage.getItem(o);if(console.log("Loaded points from localStorage:",e),e)try{var t=JSON.parse(e);t.topLeft&&t.topRight&&t.bottomRight&&t.bottomLeft&&p(t)}catch(e){console.error("Failed to parse stored perspective points",e)}g(!0)}}),[o,n]),(0,b.useEffect)((function(){var e=function(e){e.shiftKey&&c.includes(e.key.toLowerCase())&&(a?a(!R):m((function(e){return!e})))};return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[R,a,c]),(0,b.useLayoutEffect)((function(){if(!n&&!y&&u.current){var e=new ResizeObserver((function(e){var t=e[0].contentRect,n=t.width,r=t.height;n>0&&r>0&&p((function(e){return L(L({},e),{topRight:{x:n,y:0},bottomRight:{x:n,y:r},bottomLeft:{x:0,y:r}})}))}));return e.observe(u.current),function(){e.disconnect()}}}),[n,y]),(0,b.useLayoutEffect)((function(){if(u.current){var e=u.current.getBoundingClientRect();if(0!==e.width&&0!==e.height){var t=function(e,t){function n(e,t,n,r){var o=[e.x,t.x,n.x,e.y,t.y,n.y,1,1,1],i=function(e,t){var n=e[0]*(e[4]*e[8]-e[5]*e[7])-e[1]*(e[3]*e[8]-e[5]*e[6])+e[2]*(e[3]*e[7]-e[4]*e[6]);if(0===n)return null;var r=1/n,o=[e[4]*e[8]-e[5]*e[7],e[2]*e[7]-e[1]*e[8],e[1]*e[5]-e[2]*e[4],e[5]*e[6]-e[3]*e[8],e[0]*e[8]-e[2]*e[6],e[2]*e[3]-e[0]*e[5],e[3]*e[7]-e[4]*e[6],e[1]*e[6]-e[0]*e[7],e[0]*e[4]-e[1]*e[3]].map((function(e){return e*r}));return[o[0]*t[0]+o[1]*t[1]+o[2]*t[2],o[3]*t[0]+o[4]*t[1]+o[5]*t[2],o[6]*t[0]+o[7]*t[1]+o[8]*t[2]]}(o,[r.x,r.y,1]);return null===i?null:[o[0]*i[0],o[1]*i[1],o[2]*i[2],o[3]*i[0],o[4]*i[1],o[5]*i[2],o[6]*i[0],o[7]*i[1],o[8]*i[2]]}var r,o=n(e[0],e[1],e[2],e[3]),i=n(t[0],t[1],t[2],t[3]);if(!o||!i)return"";for(var a=function(e,t){for(var n=[],r=0;r<3;r+=1)for(var o=0;o<3;o+=1){for(var i=0,a=0;a<3;a+=1)i+=e[3*r+a]*t[3*a+o];n[3*r+o]=i}return n}(i,[(r=o)[4]*r[8]-r[5]*r[7],r[2]*r[7]-r[1]*r[8],r[1]*r[5]-r[2]*r[4],r[5]*r[6]-r[3]*r[8],r[0]*r[8]-r[2]*r[6],r[2]*r[3]-r[0]*r[5],r[3]*r[7]-r[4]*r[6],r[1]*r[6]-r[0]*r[7],r[0]*r[4]-r[1]*r[3]]),s=0;s<a.length;s+=1)a[s]/=a[8];var c=[a[0],a[3],0,a[6],a[1],a[4],0,a[7],0,0,1,0,a[2],a[5],0,a[8]];return"matrix3d(".concat(c.join(","),")")}([{x:0,y:0},{x:e.width,y:0},{x:e.width,y:e.height},{x:0,y:e.height}],[l.topLeft,l.topRight,l.bottomRight,l.bottomLeft]);S(t)}}}),[l]),(0,x.jsxs)("div",{ref:u,className:"perspective-container",children:[(0,x.jsxs)("div",{style:{transform:E,transformOrigin:"0 0",width:"100%",height:"100%",position:"relative"},children:[R&&(0,x.jsx)("div",{className:"alignment-guides"}),t]}),R&&Object.entries(l).map((function(e){var t=e[0],n=e[1],o=n.x,i=n.y;return(0,x.jsx)("div",{className:"control-point",style:{left:o,top:i},onMouseDown:function(e){return function(e,t){e.preventDefault(),e.stopPropagation();var n=function(e){var n;if(u.current){var o=u.current.getBoundingClientRect(),i=e.clientX-o.left,a=e.clientY-o.top,s=L(L({},l),((n={})[t]={x:i,y:a},n));p(s),null==r||r(s)}},o=function(){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)}(e,t)}},t)}))]})};var R=o.H;export{R as PerspectiveTransform};