{"version":3,"file":"DotsPattern.BKxJS9Tf.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/q8w7ii4lHoEyarnMK5pf/xbjGEiXz4l4eRRgX8L5g/DotsPattern.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useMemo}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Multicolor Dots Pattern\n * \n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function DotsPattern(props){const{dotSize=6,padding=8,primaryColor=\"#FF5588\",secondaryColor=\"#0099FF\",tertiaryColor=\"#FFBB00\",backgroundColor=\"#FFFFFF\",dotShape=\"circle\",style}=props;const canvasRef=useRef(null);const isStatic=useIsStaticRenderer();const[dimensions,setDimensions]=useState({width:0,height:0});// Generate a random color from the three provided colors\nconst getRandomColor=()=>{const colors=[primaryColor,secondaryColor,tertiaryColor];return colors[Math.floor(Math.random()*colors.length)];};// Draw a single shape based on the selected shape type\nconst drawShape=(ctx,x,y,size,color)=>{ctx.fillStyle=color;switch(dotShape){case\"square\":// Draw square\nctx.fillRect(x-size/2,y-size/2,size,size);break;case\"triangle\":// Draw triangle\nctx.beginPath();ctx.moveTo(x,y-size/2);ctx.lineTo(x+size/2,y+size/2);ctx.lineTo(x-size/2,y+size/2);ctx.closePath();ctx.fill();break;case\"star\":// Draw star (5-pointed)\nconst outerRadius=size/2;const innerRadius=outerRadius/2.5;const spikes=5;ctx.beginPath();for(let i=0;i<spikes*2;i++){const radius=i%2===0?outerRadius:innerRadius;const angle=Math.PI*i/spikes-Math.PI/2;const pointX=x+radius*Math.cos(angle);const pointY=y+radius*Math.sin(angle);if(i===0){ctx.moveTo(pointX,pointY);}else{ctx.lineTo(pointX,pointY);}}ctx.closePath();ctx.fill();break;case\"circle\":default:// Draw circle\nctx.beginPath();ctx.arc(x,y,size/2,0,Math.PI*2);ctx.fill();break;}};// Draw the dots pattern\nconst drawPattern=(ctx,width,height)=>{ctx.clearRect(0,0,width,height);// Fill background\nctx.fillStyle=backgroundColor;ctx.fillRect(0,0,width,height);// Calculate number of dots based on size and padding\nconst totalSize=dotSize+padding;const cols=Math.floor(width/totalSize)+1;const rows=Math.floor(height/totalSize)+1;// Draw dots\nfor(let i=0;i<cols;i++){for(let j=0;j<rows;j++){const x=i*totalSize+dotSize/2;const y=j*totalSize+dotSize/2;drawShape(ctx,x,y,dotSize,getRandomColor());}}};// Update canvas dimensions when component mounts or resizes\nuseEffect(()=>{if(isStatic)return;const updateDimensions=()=>{if(canvasRef.current){const canvas=canvasRef.current;const{width,height}=canvas.getBoundingClientRect();// Set canvas dimensions with device pixel ratio for sharp rendering\nconst dpr=window.devicePixelRatio||1;canvas.width=width*dpr;canvas.height=height*dpr;const ctx=canvas.getContext(\"2d\");if(ctx){ctx.scale(dpr,dpr);setDimensions({width,height});}}};updateDimensions();window.addEventListener(\"resize\",updateDimensions);// Create a ResizeObserver to detect container size changes\nif(typeof ResizeObserver!==\"undefined\"){const resizeObserver=new ResizeObserver(updateDimensions);if(canvasRef.current){resizeObserver.observe(canvasRef.current.parentElement||canvasRef.current);}return()=>{window.removeEventListener(\"resize\",updateDimensions);resizeObserver.disconnect();};}return()=>{window.removeEventListener(\"resize\",updateDimensions);};},[isStatic]);// Redraw pattern when props or dimensions change\nuseEffect(()=>{if(isStatic)return;const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;// Only redraw if we have valid dimensions\nif(dimensions.width>0&&dimensions.height>0){drawPattern(ctx,dimensions.width,dimensions.height);}},[dimensions,dotSize,padding,primaryColor,secondaryColor,tertiaryColor,backgroundColor,dotShape,isStatic]);// Render a shape for the static SVG preview\nconst renderStaticShape=(x,y,size,color,key)=>{switch(dotShape){case\"square\":return /*#__PURE__*/_jsx(\"rect\",{x:x-size/2,y:y-size/2,width:size,height:size,fill:color},key);case\"triangle\":return /*#__PURE__*/_jsx(\"polygon\",{points:`${x},${y-size/2} ${x+size/2},${y+size/2} ${x-size/2},${y+size/2}`,fill:color},key);case\"star\":const outerRadius=size/2;const innerRadius=outerRadius/2.5;const spikes=5;let points=\"\";for(let i=0;i<spikes*2;i++){const radius=i%2===0?outerRadius:innerRadius;const angle=Math.PI*i/spikes-Math.PI/2;const pointX=x+radius*Math.cos(angle);const pointY=y+radius*Math.sin(angle);points+=`${pointX},${pointY} `;}return /*#__PURE__*/_jsx(\"polygon\",{points:points.trim(),fill:color},key);case\"circle\":default:return /*#__PURE__*/_jsx(\"circle\",{cx:x,cy:y,r:size/2,fill:color},key);}};// For static renderer (thumbnails, etc.), render a simplified version\nconst staticPattern=useMemo(()=>{if(!isStatic)return null;// Use viewBox to make the SVG responsive\nconst viewBoxWidth=300;const viewBoxHeight=200;const totalSize=dotSize+padding;const cols=Math.floor(viewBoxWidth/totalSize)+1;const rows=Math.floor(viewBoxHeight/totalSize)+1;const dots=[];for(let i=0;i<cols;i++){for(let j=0;j<rows;j++){const x=i*totalSize+dotSize/2;const y=j*totalSize+dotSize/2;const color=[primaryColor,secondaryColor,tertiaryColor][(i+j)%3];dots.push(renderStaticShape(x,y,dotSize,color,`${i}-${j}`));}}return /*#__PURE__*/_jsx(\"svg\",{width:\"100%\",height:\"100%\",viewBox:`0 0 ${viewBoxWidth} ${viewBoxHeight}`,preserveAspectRatio:\"xMidYMid slice\",style:{background:backgroundColor},children:dots});},[isStatic,dotSize,padding,primaryColor,secondaryColor,tertiaryColor,backgroundColor,dotShape]);return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",...style},children:isStatic?staticPattern:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\"}})});}addPropertyControls(DotsPattern,{dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:6,min:1,max:20,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:8,min:1,max:50,step:1,unit:\"px\"},dotShape:{type:ControlType.Enum,title:\"Shape\",options:[\"circle\",\"square\",\"triangle\",\"star\"],optionTitles:[\"Circle\",\"Square\",\"Triangle\",\"Star\"],defaultValue:\"circle\",displaySegmentedControl:true},primaryColor:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"#FF5588\"},secondaryColor:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"#0099FF\"},tertiaryColor:{type:ControlType.Color,title:\"Color 3\",defaultValue:\"#FFBB00\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DotsPattern\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DotsPattern.map"],"mappings":"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"}