{"version":3,"file":"PixelGridObject.BZal7inn.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/1Ygr0QMEhwCz3lGxVt6q/T4Q7YaQkdkR8ivKrmdqe/PixelGridObject.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";const COLORS=[\"#FF4D4D\",\"#3626EF\",\"#170632\"];export function PixelGridImage({image,mode,pixelSpread,imageSize,offsetX,offsetY,pixelSize}){const containerRef=React.useRef(null);const[grid,setGrid]=React.useState([]);const[dimensions,setDimensions]=React.useState({width:0,height:0});// Track container size reliably\nReact.useLayoutEffect(()=>{if(!containerRef.current)return;const updateSize=()=>{const w=containerRef.current.offsetWidth;const h=containerRef.current.offsetHeight;if(w>0&&h>0)setDimensions({width:w,height:h});};requestAnimationFrame(updateSize)// ensures measurement after layout\n;const observer=new ResizeObserver(updateSize);observer.observe(containerRef.current);return()=>observer.disconnect();},[]);// Generate grid only when valid dimensions & dependencies are ready\nReact.useEffect(()=>{if(!image)return;const{width,height}=dimensions;if(width<=0||height<=0)return;// guard: skip invalid size\ngetAlphaGrid(image,pixelSpread,imageSize,width,height,pixelSize,(alphaGrid,imageOffset)=>{const visible=alphaGrid.filter(p=>p.visible);const padding=pixelSize*1.5;const imageCenterX=imageOffset.x+imageOffset.w/2;const imageCenterY=imageOffset.y+imageOffset.h/2;const maxDistance=Math.sqrt(imageOffset.w**2+imageOffset.h**2)*.3;const noise=alphaGrid.filter(p=>!p.visible).filter(p=>p.x>=imageOffset.x-padding&&p.x<=imageOffset.x+imageOffset.w+padding&&p.y>=imageOffset.y-padding&&p.y<=imageOffset.y+imageOffset.h+padding).filter(p=>{const dx=p.x-imageCenterX;const dy=p.y-imageCenterY;return Math.sqrt(dx*dx+dy*dy)<=maxDistance;}).filter(()=>Math.random()<.05);const fullGrid=[...visible,...noise].filter(()=>Math.random()>.1);setGrid(fullGrid);});},[image,mode,pixelSpread,imageSize,pixelSize,dimensions]);const imgMaxPx=Math.min(dimensions.width,dimensions.height)*.6*imageSize;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"visible\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"transparent\",transform:`translate(${offsetX}px, ${offsetY}px)`},children:[grid.map((pixel,i)=>/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:pixel.y,left:pixel.x,width:pixelSize,height:pixelSize,backgroundColor:pixel.color,transform:\"translate(-50%, -50%)\",zIndex:mode===\"behind\"?0:2}},`${pixel.x}-${pixel.y}-${i}`)),image&&/*#__PURE__*/_jsx(\"img\",{src:image,alt:\"grid object\",style:{position:\"absolute\",maxWidth:`${imgMaxPx}px`,maxHeight:`${imgMaxPx}px`,objectFit:\"contain\",zIndex:1}})]});}// Grid builder with stable color assignment\nfunction getAlphaGrid(img,pixelSpread,imageScale,width,height,pixelSize,callback){const canvas=document.createElement(\"canvas\");canvas.width=width;canvas.height=height;const ctx=canvas.getContext(\"2d\");const image=new Image;image.crossOrigin=\"Anonymous\";image.src=img;image.decode().then(()=>{const maxW=width*.6;const maxH=height*.6;const base=Math.min(maxW/image.width,maxH/image.height);const scale=base*imageScale*pixelSpread;const dw=image.width*scale;const dh=image.height*scale;const ox=(width-dw)/2;const oy=(height-dh)/2;ctx.clearRect(0,0,width,height);ctx.drawImage(image,ox,oy,dw,dh);const data=ctx.getImageData(0,0,width,height).data;const grid=[];for(let y=0;y<dh;y+=pixelSize){for(let x=0;x<dw;x+=pixelSize){const canvasX=Math.min(width-1,Math.max(0,Math.floor(ox+x)));const canvasY=Math.min(height-1,Math.max(0,Math.floor(oy+y)));const alpha=data[(canvasY*width+canvasX)*4+3];grid.push({x:canvasX,y:canvasY,visible:alpha>20,color:COLORS[Math.floor(Math.random()*COLORS.length)]});}}callback(grid,{x:ox,y:oy,w:dw,h:dh});}).catch(err=>{console.error(\"Image decode failed\",err);});}// Property controls\naddPropertyControls(PixelGridImage,{image:{type:ControlType.Image,title:\"Image\"},mode:{type:ControlType.Enum,title:\"Grid Mode\",options:[\"behind\"],optionTitles:[\"Behind Object\"]},pixelSpread:{type:ControlType.Number,title:\"Pixel Spread\",min:1,max:2,step:.05,defaultValue:1.3},imageSize:{type:ControlType.Number,title:\"Image Size\",min:.5,max:4,step:.05,defaultValue:1},pixelSize:{type:ControlType.Number,title:\"Pixel Size\",min:5,max:100,step:1,defaultValue:36},offsetX:{type:ControlType.Number,title:\"Offset X\",min:-1e3,max:1e3,defaultValue:0},offsetY:{type:ControlType.Number,title:\"Offset Y\",min:-1e3,max:1e3,defaultValue:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"PixelGridImage\":{\"type\":\"reactComponent\",\"name\":\"PixelGridImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PixelGridObject.map"],"mappings":"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"}