https://brasilmineral.com.br/_next/static/chunks/11296.4740597d0b036278.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[11296],{88915:(e,t,r)=>{r.r(t),r.d(t,{BannerEditorCanvas:()=>o});var n=r(95155),a=r(12115),i=r(10179);function l(e,t){t.shadow?.enabled?(e.shadowColor(t.shadow.color||"#000000"),e.shadowBlur(t.shadow.blur??10),e.shadowOffsetX(t.shadow.offsetX??4),e.shadowOffsetY(t.shadow.offsetY??4),e.shadowOpacity(t.shadow.opacity??.5),e.shadowEnabled(!0)):t.glow?.enabled?(e.shadowColor(t.glow.color||"#ffffff"),e.shadowBlur(t.glow.blur??15),e.shadowOffsetX(0),e.shadowOffsetY(0),e.shadowOpacity(1),e.shadowEnabled(!0)):e.shadowEnabled(!1)}let o=(0,a.forwardRef)(function({width:e,height:t,elements:r,selectedElementId:o,onSelectElement:d,onElementMove:c,onElementResize:s,onTextChange:u,onImageDrop:h,interactive:f=!0},g){let p=(0,a.useRef)(null),w=(0,a.useRef)(null),y=(0,a.useRef)(null),x=(0,a.useRef)(null),m=(0,a.useRef)(new Map),b=(0,a.useRef)(new Map),[v,R]=(0,a.useState)(1),S=(0,a.useRef)({onSelectElement:d,onElementMove:c,onElementResize:s,onTextChange:u,onImageDrop:h});S.current={onSelectElement:d,onElementMove:c,onElementResize:s,onTextChange:u,onImageDrop:h},(0,a.useImperativeHandle)(g,()=>({exportPNG:()=>{let r=w.current,n=x.current;if(!r)return null;n&&n.visible(!1),r.scale({x:1,y:1}),r.width(e),r.height(t);let a=r.toDataURL({pixelRatio:1,mimeType:"image/png"});return r.scale({x:v,y:v}

1),r.width(e*v),r.height(t*v),n&&n.visible(!0),r.batchDraw(),a},getStage:()=>w.current}));let k=(0,a.useCallback)(()=>{p.current&&R(Math.min(p.current.offsetWidth/e,1))},[e]);function C(e){return new Promise((t,r)=>{let n=new window.Image;n.crossOrigin="anonymous",n.onload=()=>t(n),n.onerror=r,n.src=e})}function E(e,t,r,n){let a=Math.min(r/e,n/t);return{width:e*a,height:t*a}}(0,a.useEffect)(()=>{k();let e=new ResizeObserver(k);return p.current&&e.observe(p.current),()=>e.disconnect()},[k]),(0,a.useEffect)(()=>{if(!p.current||w.current)return;let r=new i.A.Stage({container:p.current.querySelector(".konva-mount"),width:e*v,height:t*v,scaleX:v,scaleY:v}),n=new i.A.Layer;r.add(n);let a=new i.A.Transformer({rotateEnabled:!1,borderStroke:"#3b82f6",borderStrokeWidth:2,anchorFill:"#3b82f6",anchorStroke:"#ffffff",anchorSize:8,anchorCornerRadius:2,keepRatio:!1,enabledAnchors:["top-left","top-right","bottom-left","bottom-right","middle-left","middle-right","top-center","bottom-center"],boundBoxFunc:(e,t)=>t.width<10||t.height<10?e:t});return n.add(a),r.on("click tap",e=>{e.target===r&&S.current.onSelectElement(null)}),w.current=r,y.current=n,x.current=a,()=>{r.destroy(),w.current=null,y.current=null,x.current=null,m.current.clear(),b.current.clear()}},[]),(0,a.useEffect)(()=>{let r=w.current;

1r&&(r.width(e*v),r.height(t*v),r.scaleX(v),r.scaleY(v),r.batchDraw())},[v,e,t]);let[A,M]=(0,a.useState)(null);function T(e,t,r,n){e.name(t),f&&r&&(e.draggable(!0),e.on("click tap",()=>S.current.onSelectElement(t)),e.on("dragend",()=>{S.current.onElementMove(t,Math.round(e.x()),Math.round(e.y()))}),e.on("transformend",()=>{let r=e.scaleX(),n=e.scaleY();e.scaleX(1),e.scaleY(1);let a=Math.round(e.width()*r),i=Math.round(e.height()*n);e.width(a),e.height(i),S.current.onElementResize(t,a,i,Math.round(e.x()),Math.round(e.y()))}),e instanceof i.A.Text&&n&&S.current.onTextChange&&e.on("dblclick dbltap",()=>{M({id:t,text:e.text(),x:e.x()*v,y:e.y()*v,w:e.width()*v,h:e.height()*v,fontFamily:e.fontFamily(),fontSize:e.fontSize(),fill:e.fill()})}))}function D(e,t){if(e.x(t.x),e.y(t.y),1===e.scaleX()&&1===e.scaleY()&&(e.width(t.width),e.height(t.height)),"rect"===t.type&&e instanceof i.A.Rect){let r=t.width,n=t.height,a=t.fillGradient;if(a?.type==="linear"&&a.colorStops?.length>=2){let i=a.angle*Math.PI/180,l=Math.cos(i),o=Math.sin(i),d=Math.max(r/2*Math.abs(l)+n/2*Math.abs(o),1),c=r/2,s=n/2,u=[];a.colorStops.forEach(e=>{u.push(e.position,e.color)}),e.setAttrs({fill:a.colorStops[0]?.color||t.fillColor||"#000000",fillLinearGradientStartPoint:{x:c-d*l,y:s-d*o},fillLinearGradientEndPoint:{x:c+d*l,y:s+d*o},fillLinearGradientColorStops:u,fillRadialGradientColorStops:void 0,fillPriority:"linear-gradient"})}else if(a?.type==="radial"&&a.colorStops?.length>=2){let i=r*a.centerX,l=n*a.centerY,o=Math.max(Math.max(r,n)*a.radius,1),d=[];a.colorStops.forEach(e=>{d.push(e.position,e.color)}),e.setAttrs({fill:a.colorStops[0]?.color||t.fillColor||"#000000",fillRadialGradientStartPoint:{x:i,y:l},fillRadialGradientStartRadius:0,fillRadialGradientEndPoint:{x:i,y:l},fillRadialGradientEndRadius:o,fillRadialGradientColorStops:d,fillLinearGradientColorStops:void 0,fillPriority:"radial-gradient"})}else e.setAttrs({fill:t.fillColor||"#000000",fillLinearGradientColorStops:void 0,fillRadialGradientColorStops:void 0,fillPriority:"color"});e.cornerRadius(t.cornerRadius||0),e.opacity(t.opacity??1),e.stroke(t.stroke||""),e.strokeWidth(t.strokeWidth||0),l(e,t)}"text"===t.type&&e instanceof i.A.Text&&(e.text(t.text||""),e.fontSize(t.fontSize||16),e.fontFamily(t.fontFamily||"Inter"),e.fontStyle(t.fontStyle||"normal"),e.fill(t.fill||"#000000"),e.align(t.align||"left"),e.lineHeight(t.lineHeight||1.2),e.padding(t.padding||0),e.verticalAlign("middle"),l(e,t)),("logo"===t.type||"image"===t.type)&&e instanceof i.A.Image&&l(e,t)}(0,a.useEffect)(()=>{let e=y.current;if(!e)return;let t=new Set(m.current.keys()),n=new Set(r.map(e=>e.id));if(t.forEach(e=>{n.has(e)||(m.current.get(e)?.destroy(),m.current.delete(e),b.current.delete(e))}),r.forEach(t=>{let r=m.current.get(t.id),n="logo"===t.type||"image"===t.type,a=b.current.get(t.id),o=n&&t.src&&a!==t.src;if(r){let e=r instanceof i.A.Rect,a=r instanceof i.A.Text;(n&&t.src&&e||"rect"===t.type&&!e||"text"===t.type&&!a)&&!(n&&!t.src&&e)&&(r.destroy(),m.current.delete(t.id),b.current.delete(t.id),r=void 0)}if(!r){if(n&&t.src){let r=new i.A.Rect({x:t.x,y:t.y,width:t.width,height:t.height,fill:"transparent",stroke:"#64748b",strokeWidth:1,dash:[4,4],cornerRadius:4});T(r,t.id,t.editable),e.add(r),m.current.set(t.id,r),b.current.set(t.id,t.src),C(t.src).then(r=>{let n=E(r.naturalWidth,r.naturalHeight,t.width,t.height),a=new i.A.Image({x:t.x,y:t.y,width:n.width,height:n.height,image:r});l(a,t),T(a,t.id,t.editable);let o=m.current.get(t.id),d=o?.zIndex();if(o?.destroy(),e.add(a),void 0!==d)try{a.zIndex(d)}catch{}m.current.set(t.id,a),x.current&&x.current.moveToTop(),e.batchDraw()}).catch(()=>{})}else n?(T(r=new i.A.Rect({x:t.x,y:t.y,width:t.width,height:t.height,fill:"transparent",stroke:"#64748b",strokeWidth:1,dash:[4,4],cornerRadius:4}),t.id,t.editable),e.add(r),m.current.set(t.id,r)):"rect"===t.type?(T(r=new i.A.Rect({}),t.id,t.editable),e.add(r),m.current.set(t.id,r)):"text"===t.type&&(T(r=new i.A.Text({}),t.id,t.editable,t),e.add(r),m.current.set(t.id,r));(r=m.current.get(t.id))&&D(r,t);return}if(o&&t.src){b.current.set(t.id,t.src),C(t.src).then(r=>

1{let n=E(r.naturalWidth,r.naturalHeight,t.width,t.height),a=new i.A.Image({x:t.x,y:t.y,width:n.width,height:n.height,image:r});l(a,t),T(a,t.id,t.editable);let o=m.current.get(t.id),d=o?.zIndex();if(o?.destroy(),e.add(a),void 0!==d)try{a.zIndex(d)}catch{}m.current.set(t.id,a),x.current&&x.current.moveToTop(),e.batchDraw()}).catch(()=>{});return}D(r,t)}),r.forEach((e,t)=>{let r=m.current.get(e.id),n=e.zIndex??t;if(r)try{r.zIndex(n)}catch{}}),x.current)try{x.current.moveToTop()}catch{}e.batchDraw()},[r,f]),(0,a.useEffect)(()=>{let e=x.current;if(e){if(o&&f){let t=m.current.get(o),n=r.find(e=>e.id===o);if(t&&n&&n.editable&&"rect"!==n.type){let r="logo"===n.type||"image"===n.type;e.keepRatio(r),e.nodes([t])}else e.nodes([])}else e.nodes([]);y.current?.batchDraw()}},[o,r,f]);let z=(0,a.useRef)(null),I=(0,a.useCallback)(e=>{e.preventDefault(),e.dataTransfer.dropEffect="copy",z.current&&z.current.classList.add("ring-2","ring-red-400")},[]),G=(0,a.useCallback)(e=>{e.preventDefault(),z.current&&!z.current.contains(e.relatedTarget)&&z.current.classList.remove("ring-2","ring-red-400")},[]),L=(0,a.useCallback)(e=>{e.preventDefault(),z.current?.classList.remove("ring-2","ring-red-400");let t=e.dataTransfer?.files,n=t?.[0];if(!n||!n.type.startsWith("image/")||!S.current.onImageDrop)return;let a=w.current,i=z.current;if(!a||!i)return;let l=i.getBoundingClientRect(),o=a.scaleX(),d=(e.clientX-l.left)/o,c=(e.clientY-l.top)/o,s=a.getIntersection({x:d,y:c}),u=x.current,h=s;if(h===u&&u){let e=u.nodes();h=1===e.length?e[0]:null}let f=h?.name();if(!f||"string"!=typeof f)return;let g=r.find(e=>e.id===f);if(!g||"logo"!==g.type&&"image"!==g.type&&("rect"!==g.type||"bg"!==g.id))return;let p=new FileReader;p.onload=()=>{let e=p.result;S.current.onImageDrop?.(f,e,n)},p.readAsDataURL(n)},[r]);return(0,n.jsxs)("div",{ref:p,className:"w-full relative",children:[(0,n.jsxs)("div",{ref:z,onDragOver:I,onDragLeave:G,onDrop:L,className:"mx-auto border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-900 relative transition-shadow",style:{width:e*v,height:t*v},children:[(0,n.jsx)("div",{className:"konva-mount",style:{width:"100%",height:"100%"}}),A&&(0,n.jsx)("textarea",{value:A.text,onChange:e=>M(t=>t?{...t,text:e.target.value}:null),onBlur:()=>{A&&S.current.onTextChange&&S.current.onTextChange(A.id,A.text),M(null)},onKeyDown:e=>{"Escape"===e.key&&M(null),"Enter"!==e.key||e.shiftKey||(e.preventDefault(),A&&S.current.onTextChange&&S.current.onTextChange(A.id,A.text),M(null))},autoFocus:!0,className:"absolute resize-none outline-none border-2 border-red-500 rounded p-1 caret-current",style:{left:A.x,top:A.y,width:Math.max(A.w,60),height:Math.max(A.h,24),fontFamily:A.fontFamily,fontSize:.85*A.fontSize,color:A.fill,backgroundColor:"transparent",textShadow:"0 0 2px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3)"}})]}),(0,n.jsxs)("p",{className:"text-[10px] text-neutral-400 text-center mt-1.5",children:[e," \xd7 ",t,"px",v<1&&` \xb7 visualiza\xe7\xe3o em ${Math.round(100*v)}%`,h&&" \xb7 Arraste uma imagem para o logo ou \xe1rea de imagem"]})]})})}}]);