{"version":3,"file":"CompareImage.DYkOhfj_.mjs","names":["useState","useRef","useCallback"],"sources":["https:/framerusercontent.com/modules/FqNSbrFNRKIgDjGtvZ6b/csqUnaqBqhzsiR94BUA2/CompareImage.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useRef,useCallback,useEffect}from\"react\";/**\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 500\n *  @framerDisableUnlink\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */function CompareImage({background,images,borderRadius,imageRadius,padding,gap,labelStyles,svgCode}){const[dividerPosition,setDividerPosition]=useState(50);const containerRef=useRef(null);const svgRef=useRef(null);const handleMouseMove=useCallback(event=>{window.requestAnimationFrame(()=>{const containerLeft=containerRef.current.getBoundingClientRect().left;const position=(event.pageX-containerLeft)/containerRef.current.offsetWidth*100;setDividerPosition(Math.max(0,Math.min(100,position)));// Update SVG position\nif(svgRef.current){const svgElement=svgRef.current;const rect=containerRef.current.getBoundingClientRect();const x=event.clientX-rect.left;svgElement.style.left=`${x}px`;svgElement.style.top=\"50%\";svgElement.style.transform=\"translate(-50%, -50%)\";}});},[]);useEffect(()=>{if(svgRef.current&&containerRef.current){const svgElement=svgRef.current;const containerRect=containerRef.current.getBoundingClientRect();svgElement.style.left=`${containerRect.width/2}px`;svgElement.style.top=\"50%\";svgElement.style.transform=\"translate(-50%, -50%)\";}},[svgCode]);const renderImage=(src,alt,clipPath,extraStyles={})=>/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",width:`calc(100% - ${padding*2}px)`,height:`calc(100% - ${padding*2}px)`,clipPath:clipPath,...extraStyles},children:/*#__PURE__*/_jsx(\"img\",{src:src,alt:alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",borderRadius:`${imageRadius}px`}})});return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,onMouseMove:handleMouseMove,style:{position:\"relative\",width:`calc(100% - ${padding*2}px)`,height:`calc(100% - ${padding*2}px)`,margin:\"auto\",background:background,borderRadius:`${borderRadius}px`,overflow:\"hidden\",padding:`${padding}px`,boxSizing:\"border-box\"},children:[images[0]&&renderImage(images[0],\"First\",`polygon(0 0, ${dividerPosition}% 0, ${dividerPosition}% 100%, 0 100%)`),images[1]&&renderImage(images[1],\"Second\",`polygon(${dividerPosition}% 0, 100% 0, 100% 100%, ${dividerPosition}% 100%)`),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"0\",left:`${dividerPosition}%`,width:`${gap}px`,height:\"100%\",background:\"white\",zIndex:5,transform:\"translateX(-50%)\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"20px\",top:\"20px\",background:labelStyles.beforeBackgroundColor,padding:\"5px 15px\",borderRadius:`${labelStyles.beforeBorderRadius}px`,fontSize:labelStyles.beforeFont,color:labelStyles.beforeTextColor,zIndex:6,backdropFilter:\"blur(10px)\"},children:\"Before\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",right:\"20px\",top:\"20px\",background:labelStyles.afterBackgroundColor,padding:\"5px 15px\",borderRadius:`${labelStyles.afterBorderRadius}px`,fontSize:labelStyles.afterFont,color:labelStyles.afterTextColor,zIndex:6,backdropFilter:\"blur(10px)\"},children:\"After\"}),svgCode&&/*#__PURE__*/_jsx(\"div\",{ref:svgRef,style:{position:\"absolute\",pointerEvents:\"none\",zIndex:7},dangerouslySetInnerHTML:{__html:svgCode}})]});}addPropertyControls(CompareImage,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.Image},maxCount:2},svgCode:{type:ControlType.String,title:\"SVG Code\",defaultValue:\"\",placeholder:\"Paste your SVG code here\"},background:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#333\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:50,min:0,displayStepper:true,step:1},imageRadius:{type:ControlType.Number,title:\"Image Radius\",defaultValue:20,min:0,displayStepper:true,step:1},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:10,min:0,displayStepper:true,step:1},labelStyles:{type:ControlType.Object,title:\"Label Styles\",controls:{beforeTextColor:{type:ControlType.Color,title:\"[B] Color\",defaultValue:\"white\"},afterTextColor:{type:ControlType.Color,title:\"[A] Color\",defaultValue:\"white\",description:\"⠀\"},beforeFont:{type:ControlType.Number,title:\"[B] Size\",defaultValue:\"12px\",displayStepper:true,unit:\"px\",min:10,step:1},afterFont:{type:ControlType.Number,title:\"[A] Size\",defaultValue:\"12px\",displayStepper:true,unit:\"px\",min:10,step:1,description:\"⠀\"},beforeBackgroundColor:{type:ControlType.Color,title:\"[B] BK Color\",defaultValue:\"rgba(255, 255, 255, 0.2)\"},afterBackgroundColor:{type:ControlType.Color,title:\"[A] BK Color\",defaultValue:\"rgba(255, 255, 255, 0.2)\",description:\"⠀\"},beforeBorderRadius:{type:ControlType.Number,title:\"[B] Radius\",defaultValue:4,min:0,displayStepper:true,step:1},afterBorderRadius:{type:ControlType.Number,title:\"[A] Radius\",defaultValue:4,min:0,displayStepper:true,step:1}},description:\"Made by *OtVos Studio*\\n Contact me for support [( ✉️ contact).](https://otvos.studio/index/Contact)\",hidden(props){return props.cover===\"Hide\";}}});export default CompareImage;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CompareImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerIntrinsicHeight\":\"500\",\"framerDisableUnlink\":\"* @framerSupportedLayoutWidth any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CompareImage.map"],"mappings":"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"}