https://airawath.com/_next/static/chunks/3071.9d6839fb465c6e12.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3071],{93071:function(e,t,i){i.r(t),i.d(t,{default:function(){return M}});var s=i(57437),n=i(2265),l=i(18930),r=i(41827),o=i(49589),a=i(66337),c=i(88781),d=i(54887),x=i(79205);let h=(0,x.Z)("align-horizontal-justify-start",[["rect",{width:"6",height:"14",x:"6",y:"5",rx:"2",key:"hsirpf"}],["rect",{width:"6",height:"10",x:"16",y:"7",rx:"2",key:"13zkjt"}],["path",{d:"M2 2v20",key:"1ivd8o"}]]),p=(0,x.Z)("align-horizontal-justify-center",[["rect",{width:"6",height:"14",x:"2",y:"5",rx:"2",key:"dy24zr"}],["rect",{width:"6",height:"10",x:"16",y:"7",rx:"2",key:"13zkjt"}],["path",{d:"M12 2v20",key:"t6zp3m"}]]),y=(0,x.Z)("align-horizontal-justify-end",[["rect",{width:"6",height:"14",x:"2",y:"5",rx:"2",key:"dy24zr"}],["rect",{width:"6",height:"10",x:"12",y:"7",rx:"2",key:"1ht384"}],["path",{d:"M22 2v20",key:"40qfg1"}]]),u=(0,x.Z)("align-vertical-justify-start",[["rect",{width:"14",height:"6",x:"5",y:"16",rx:"2",key:"1i8z2d"}],["rect",{width:"10",height:"6",x:"7",y:"6",rx:"2",key:"13squh"}],["path",{d:"M2 2h20",key:"1ennik"}]]),g=(0,x.Z)("align-vertical-justify-center",[["rect",{width:"14",height:"6",x:"5",y:"16",rx:"2",key:"1i8z2d"}],["rect",{width:"10",height:"6",x:"7",y:"2",rx:"2",key:"ypihtt"}],["path",{d:"M2 12h20",key:"9i4pu4"}]]),f=(0,x.Z)("align-vertical-justify-end",[["rect",{width:"14",height:"6",x:"5",y:"12",rx:"2",key:"4l4tp2"}],["rect",{width:"10",height:"6",x:"7",y:"2",rx:"2",key:"ypihtt"}],["path",{d:"M2 22h20",key:"272qi7"}]]);var m=i(48641),j=i(44219);let k={display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:6,border:c.T5,backgroundColor:"white",cursor:"pointer",color:c.DM.text,transition:"background-color 150ms"},w={position:"fixed",whiteSpace:"nowrap",pointerEvents:"none",fontSize:11,fontWeight:500,color:"#1a1a1a",backgroundColor:"#f0f0f0",padding:"3px 8px",borderRadius:4,zIndex:9999,boxShadow:"0 1px 4px rgba(0,0,0,0.12)"},v=e=>{let{tip:t,onClick:i,icon:l}=e,[r,o]=(0,n.useState)(null);return(0,s.jsxs)("div",{className:"relative",onMouseEnter:e=>{let t=e.currentTarget.getBoundingClientRect();o({x:t.left+t.width/2,y:t.top-4})},onMouseLeave:()=>o(null),children:[(0,s.jsx)("button",{type:"button","aria-label":t,title:t,style:k,onClick:i,children:l}),r&&(0,d.createPortal)((0,s.jsx)("span",{style:{...w,left:r.x,top:r.y,transform:"translate(-50%, -100%)"},children:t}),document.body)]})};var b=e=>{let{selectedIds:t,textElements:i,imageElements:l,setTextElements:r,setImageElements:o,pushSnapshot:a}=e,d=(0,m.H)(),x=(0,n.useCallback)(e=>{let s=(0,j.Xm)(t,i,l);if(s.length<2)return;a();let n=(0,j.BE)(s),c=e(s,n),d=new Map,x=new Map;for(let e of s){let t=c.get(e.id);t&&("text"===e.type?d.set(e.id,t):x.set(e.id,t))}d.size>0&&r(e=>e.map(e=>{if(e.locked)return e;let t=d.get(e.id);return t?{...e,...void 0!==t.x?{x:t.x}:{},...void 0!==t.y?{y:t.y}:{}}:e})),x.size>0&&o(e=>e.map(e=>{if(e.locked)return e;let t=x.get(e.id);return t?{...e,...void 0!==t.x?{x:t.x}:{},...void 0!==t.y?{y:t.y}:{}}:e}))},[t,i,l,r,o,a]),k=(0,n.useCallback)(e=>{let s=(0,j.Xm)(t,i,l);if(0===s.length)return;a();let n=e(s,d.WIDTH,d.HEIGHT),c=new Map,x=new Map;for(let e of s){let t=n.get(e.id);t&&("text"===e.type?c.set(e.id,t):x.set(e.id,t))}c.size>0&&r(e=>e.map(e=>{if(e.locked)return e;let t=c.get(e.id);return t?{...e,...void 0!==t.x?{x:t.x}:{},...void 0!==t.y?{y:t.y}:{}}:e})),x.size>0&&o(e=>e.map(e=>{if(e.locked)return e;let t=x.get(e.id);return t?{...e,...void 0!==t.x?{x:t.x}:{},...void 0!==t.y?{y:t.y}:{}}:e}))},[t,i,l,r,o,a,d.WIDTH,d.HEIGHT]);return(0,s.jsxs)("div",{className:"flex items-center gap-1 flex-wrap",children:[(0,s.jsx)(v,{tip:"Align left edges",onClick:()=>x((e,t)=>{let i=new Map;for(let s of e)i.set(s.id,{x:t.left+s.width/2});return i}),icon:(0,s.jsx)(h,{size:16})}),(0,s.jsx)(v,{tip:"Align centers horizontally",onClick:()=>x((e,t)=>{let i=new Map,s=(t.left+t.right)/2;for(let t of e)i.set(t.id,{x:s});return i}),icon:(0,s.jsx)(p,{size:16})}),(0,s.jsx)(v,{tip:"Align right edges",onClick:()=>x((e,t)=>{let i=new Map;for(let s of e)i.set(s.id,{x:t.right-s.width/2});return i}),icon:(0,s.jsx)(y,{size:16})}),(0,s.jsx)(v,{tip:"Align top edges",onClick:()=>x((e,t)=>{let i=new Map;for(let s of e)i.set(s.id,{y:t.top});return i}),icon:(0,s.jsx)(u,{size:16})}),(0,s.jsx)(v,{tip:"Align centers vertically",onClick:()=>x((e,t)=>{let i=new Map,s=(t.top+t.bottom)/2;for(let t of e)i.set(t.id,{y:s-t.height/2});return i}),icon:(0,s.jsx)(g,{size:16})}),(0,s.jsx)(v,{tip:"Align bottom edges",onClick:()=>x((e,t)=>{let i=new Map;for(let s of e)i.set(s.id,{y:t.bottom-s.height});return i}),icon:(0,s.jsx)(f,{size:16})}),(0,s.jsx)("div",{className:"w-full mt-3 mb-1",children:(0,s.jsx)("p",{className:"text-xs font-semibold uppercase tracking-wider",style:{color:c.DM.textFaint},children:"Align to Canvas"})}),(0,s.jsx)(v,{tip:"Align left to canvas",onClick:()=>k(e=>{let t=new Map;for(let i of e)t.set(i.id,{x:i.width/2});return t}),icon:(0,s.jsx)(h,{size:16})}),(0,s.jsx)(v,{tip:"Center on canvas",onClick:()=>k((e,t)=>{let i=new Map;for(let s of e)i.set(s.id,{x:t/2});return i}),icon:(0,s.jsx)(p,{size:16})}),(0,s.jsx)(v,{tip:"Align right to canvas",onClick:()=>k((e,t)=>{let i=new Map;for(let s of e)i.set(s.id,{x:t-s.width/2});return i}),icon:(0,s.jsx)(y,{size:16})}),(0,s.jsx)(v,{tip:"Align top to canvas",onClick:()=>k(e=>{let t=new Map;for(let i of e)t.set(i.id,{y:0});return t}),icon:(0,s.jsx)(u,{size:16})}),(0,s.jsx)(v,{tip:"Center vertically on canvas",onClick:()=>k((e,t,i)=>{let s=new Map;for(let t of e)s.set(t.id,{y:i/2-t.height/2});return s}),icon:(0,s.jsx)(g,{size:16})}),(0,s.jsx)(v,{tip:"Align bottom to canvas",onClick:()=>k((e,t,i)=>{let s=new Map;for(let t of e)s.set(t.id,{y:i-t.height});return s}),icon:(0,s.jsx)(f,{size:16})})]})},M=e=>{let{selectedIds:t,textElements:i,imageElements:d,setTextElements:x,setImageElements:h,pushSnapshot:p,deleteSelectedElements:y,duplicateSelected:u,toggleLockSelected:g,allLocked:f,hasLockedSelected:m,addToast:j}=e,k=(0,n.useMemo)(()=>{let e=new Set(t);return i.filter(t=>e.has(t.id)).length+d.filter(t=>e.has(t.id)).length},[t,i,d]),w={border:"1px solid ".concat(c.DM.text,"15"),color:c.DM.text};return(0,s.jsxs)("div",{className:"flex flex-col gap-5",children:[(0,s.jsxs)("div",{className:"flex items-center gap-3",children:[(0,s.jsx)("div",{className:"w-10 h-10 rounded-full flex items-center justify-center shrink-0",style:{backgroundColor:"".concat(c.DM.primary,"15")},children:(0,s.jsx)("span",{className:"text-base font-semibold",style:{color:c.DM.primary},children:k})}),(0,s.jsxs)("div",{children:[(0,s.jsxs)("p",{className:"text-sm font-medium",style:{color:c.DM.text},children:[k," elements selected"]}),(0,s.jsx)("p",{className:"text-xs",style:{color:c.DM.textFaint},children:"Click a single element to edit its properties"})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-xs font-semibold mb-2 uppercase tracking-wider",style:{color:c.DM.textFaint},children:"Align Elements"}),(0,s.jsx)("p",{className:"text-xs mb-3",style:{color:c.DM.textFaint},children:"Hover icons for details. Ctrl+Z to undo."}),(0,s.jsx)(b,{selectedIds:t,textElements:i,imageElements:d,setTextElements:x,setImageElements:h,pushSnapshot:p})]}),(0,s.jsx)("div",{style:{height:1,backgroundColor:"".concat(c.DM.text,"10")}}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-xs font-semibold mb-2 uppercase tracking-wider",style:{color:c.DM.textFaint},children:"Actions"}),(0,s.jsxs)("div",{className:"flex gap-2 flex-wrap",children:[(0,s.jsxs)("button",{type:"button",onClick:()=>{m&&(null==j||j("success","Locked elements were kept.")),p(),y()},className:"flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-colors hover:bg-red-50 hover:text-red-600",style:w,children:[(0,s.jsx)(l.Z,{size:14})," Delete"]}),(0,s.jsxs)("button",{type:"button",onClick:u,className:"flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-colors hover:bg-gray-100",style:w,children:[(0,s.jsx)(r.Z,{size:14})," Duplicate"]}),(0,s.jsxs)("button",{type:"button",onClick:g,className:"flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-colors hover:bg-gray-100",style:w,children:[f?(0,s.jsx)(o.Z,{size:14}):(0,s.jsx)(a.Z,{size:14}),f?"Unlock":"Lock"]})]})]})]})}}}]);