{"version":3,"file":"PatternGrid.CkPpIVlO.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/CzWLJqhmfnxbKW5qgoeF/sWaK5O2grqC9Q4FY3yY1/PatternGrid.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function PatternGrid(props){const{shape,customPath,color,size,gap,backdropBlur,blendMode,image,layout=\"grid\"}=props;const canvasRef=useRef(null);const[loadedImage,setLoadedImage]=useState(null);useEffect(()=>{if(image?.src){const img=new Image;img.crossOrigin=\"Anonymous\";img.src=image.src;img.onload=()=>setLoadedImage(img);img.onerror=()=>setLoadedImage(null);}else{setLoadedImage(null);}},[image?.src]);// Predefined paths normalized to 0-1 coordinate space\nconst paths=useMemo(()=>({square:\"M 0 0 L 1 0 L 1 1 L 0 1 Z\",circle:\"M 0.5 0 A 0.5 0.5 0 1 1 0.5 1 A 0.5 0.5 0 1 1 0.5 0 Z\",triangle:\"M 0.5 0 L 1 1 L 0 1 Z\",hexagon:\"M 0.5 0 L 0.933 0.25 L 0.933 0.75 L 0.5 1 L 0.067 0.75 L 0.067 0.25 Z\",star:\"M 0.5 0 L 0.618 0.354 L 0.976 0.354 L 0.691 0.573 L 0.794 0.905 L 0.5 0.708 L 0.206 0.905 L 0.309 0.573 L 0.024 0.354 L 0.382 0.354 Z\",diamond:\"M 0.5 0 L 1 0.5 L 0.5 1 L 0 0.5 Z\",cross:\"M 0.35 0 L 0.65 0 L 0.65 0.35 L 1 0.35 L 1 0.65 L 0.65 0.65 L 0.65 1 L 0.35 1 L 0.35 0.65 L 0 0.65 L 0 0.35 L 0.35 0.35 Z\",heart:\"M 0.5 0.8 L 0.1 0.45 C -0.1 0.25 0.2 0 0.5 0.25 C 0.8 0 1.1 0.25 0.9 0.45 Z\"}),[]);useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;let animationFrameId;const render=()=>{const dpr=window.devicePixelRatio||1;const rect=canvas.getBoundingClientRect();// Handle zero size\nif(rect.width===0||rect.height===0)return;// Update canvas resolution\ncanvas.width=rect.width*dpr;canvas.height=rect.height*dpr;// Scale context for DPI\nctx.scale(dpr,dpr);// Clear\nctx.clearRect(0,0,rect.width,rect.height);// Prepare shape\nconst pathString=shape===\"custom\"?customPath:paths[shape];let path;try{path=new Path2D(pathString);}catch(e){// Fallback to square if path is invalid\npath=new Path2D(paths.square);}const isMasking=loadedImage&&loadedImage.complete&&loadedImage.naturalWidth>0;if(isMasking){ctx.fillStyle=\"#000000\";}else{ctx.fillStyle=color;}const step=size+gap;const drawShape=(x,y,seedA,seedB)=>{// Pseudo-random opacity based on grid position for stability during resize\n// Using a simple hash function\nconst seed=seedA*1337+seedB*7331;const rand=Math.abs(Math.sin(seed)*1e4)%1;// Opacity between 0.01 (1%) and 0.90 (90%)\nconst opacity=.01+rand*.89;ctx.globalAlpha=opacity;// Draw shape\nctx.save();ctx.translate(x,y);ctx.scale(size,size);ctx.fill(path);ctx.restore();};if(layout===\"radial\"){const cx=rect.width/2;const cy=rect.height/2;const maxRadius=Math.sqrt(cx*cx+cy*cy)+size;// Center item\ndrawShape(cx-size/2,cy-size/2,0,0);let ring=1;for(let r=step;r<maxRadius;r+=step){const circumference=2*Math.PI*r;const count=Math.floor(circumference/step);if(count>0){const angleStep=2*Math.PI/count;for(let i=0;i<count;i++){const angle=i*angleStep;const x=cx+Math.cos(angle)*r-size/2;const y=cy+Math.sin(angle)*r-size/2;drawShape(x,y,ring,i);}}ring++;}}else{const isHex=layout===\"hexagonal\";const isStaggered=layout===\"staggered\";const vStep=isHex?step*.866:step;const cols=Math.ceil(rect.width/step)+(isHex||isStaggered?1:0);const rows=Math.ceil(rect.height/vStep);for(let row=0;row<rows;row++){for(let col=-1;col<cols;col++){let x=col*step;const y=row*vStep;if((isHex||isStaggered)&&row%2!==0){x+=step*.5;}drawShape(x,y,row,col);}}}if(isMasking){ctx.globalCompositeOperation=\"source-in\";ctx.globalAlpha=1;const imgRatio=loadedImage.width/loadedImage.height;const canvasRatio=rect.width/rect.height;let drawWidth=rect.width;let drawHeight=rect.height;let offsetX=0;let offsetY=0;if(imgRatio>canvasRatio){drawHeight=rect.height;drawWidth=drawHeight*imgRatio;offsetX=(rect.width-drawWidth)/2;}else{drawWidth=rect.width;drawHeight=drawWidth/imgRatio;offsetY=(rect.height-drawHeight)/2;}ctx.drawImage(loadedImage,offsetX,offsetY,drawWidth,drawHeight);ctx.globalCompositeOperation=\"source-over\";}};// Initial render\nrender();// Handle resize\nconst resizeObserver=new ResizeObserver(()=>{render();});resizeObserver.observe(canvas);return()=>{resizeObserver.disconnect();if(animationFrameId)cancelAnimationFrame(animationFrameId);};},[shape,customPath,color,size,gap,paths,loadedImage,layout]);return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\",backdropFilter:`blur(${backdropBlur}px)`,WebkitBackdropFilter:`blur(${backdropBlur}px)`,mixBlendMode:blendMode}});}addPropertyControls(PatternGrid,{layout:{type:ControlType.Enum,title:\"Layout\",defaultValue:\"grid\",options:[\"grid\",\"staggered\",\"hexagonal\",\"radial\"],optionTitles:[\"Grid\",\"Staggered\",\"Hexagonal\",\"Radial\"]},shape:{type:ControlType.Enum,title:\"Shape\",defaultValue:\"square\",options:[\"square\",\"circle\",\"triangle\",\"hexagon\",\"star\",\"diamond\",\"cross\",\"custom\"],optionTitles:[\"Square\",\"Circle\",\"Triangle\",\"Hexagon\",\"Star\",\"Diamond\",\"Cross\",\"Custom Path\"]},customPath:{type:ControlType.String,title:\"SVG Path\",defaultValue:\"M 0 0 L 1 0 L 1 1 L 0 1 Z\",placeholder:\"e.g. M 0 0 L 1 1 ...\",hidden:props=>props.shape!==\"custom\",description:\"Enter an SVG path data string. Coordinates should be normalized to 0-1 range for best results.\",displayTextArea:true},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#FFFFFF\"},image:{type:ControlType.ResponsiveImage,title:\"Image\"},size:{type:ControlType.Number,title:\"Size\",defaultValue:20,min:4,max:500,step:1},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:1,min:0,max:100,step:1},backdropBlur:{type:ControlType.Number,title:\"Bg Blur\",defaultValue:0,min:0,max:50,step:1,unit:\"px\"},blendMode:{type:ControlType.Enum,title:\"Blend Mode\",defaultValue:\"normal\",options:[\"normal\",\"multiply\",\"screen\",\"overlay\",\"darken\",\"lighten\",\"color-dodge\",\"color-burn\",\"hard-light\",\"soft-light\",\"difference\",\"exclusion\",\"hue\",\"saturation\",\"color\",\"luminosity\"]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PatternGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PatternGrid.map"],"mappings":"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"}