{"version":3,"file":"pathTraceSection.Deo7uUj3.mjs","names":["sectionLength"],"sources":["https:/framerusercontent.com/modules/tzo10ZXmmHvNbI1ilcIG/gEvIQtUCIa7VqMNRCq8J/pathTraceSection.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useEffect,useState}from\"react\";export function SVGPathTracer(props){const svgRef=useRef(null);const[pathLength,setPathLength]=useState(0);const[svgAttributes,setSvgAttributes]=useState({});const[pathData,setPathData]=useState(\"\");useEffect(()=>{if(props.svgString&&svgRef.current){const parser=new DOMParser;const svgDoc=parser.parseFromString(props.svgString,\"image/svg+xml\");const svgElement=svgDoc.documentElement;const path=svgElement.querySelector(\"path\");if(path){setPathData(path.getAttribute(\"d\")||\"\");const attributes={};Array.from(svgElement.attributes).forEach(attr=>{attributes[attr.name]=attr.value;});setSvgAttributes(attributes);const length=path.getTotalLength();setPathLength(length);}}},[props.svgString]);const getAnimationCSS=()=>{if(props.animationType===\"stop\")return\"\";const duration=props.duration/1e3// Convert to seconds\n;const delay=props.delay/1e3// Convert to seconds\n;const sectionLength=props.sectionLength/100*pathLength;switch(props.animationType){case\"once\":return`\n          @keyframes drawPath {\n            0% {\n              stroke-dasharray: ${sectionLength} ${pathLength};\n              stroke-dashoffset: ${pathLength};\n            }\n            ${((pathLength-sectionLength)/pathLength*100).toFixed(2)}% {\n              stroke-dasharray: ${sectionLength} ${pathLength};\n              stroke-dashoffset: ${sectionLength};\n            }\n            100% {\n              stroke-dasharray: 0.1 ${pathLength};\n              stroke-dashoffset: 0;\n            }\n          }\n          .animated-path {\n            animation: drawPath ${duration}s linear forwards;\n          }\n        `;case\"looped\":return`\n          @keyframes drawPath {\n            to {\n              stroke-dashoffset: 0;\n            }\n          }\n          .animated-path {\n            animation: drawPath ${duration}s linear infinite;\n            animation-delay: ${delay}s;\n          }\n        `;case\"mirrored\":return`\n          @keyframes drawPath {\n            0%, 100% {\n              stroke-dashoffset: ${pathLength};\n            }\n            50% {\n              stroke-dashoffset: ${sectionLength};\n            }\n          }\n          .animated-path {\n            animation: drawPath ${duration*2}s linear infinite;\n            animation-delay: ${delay}s;\n          }\n        `;}};const sectionLength=props.sectionLength/100*pathLength;const getPathStyle=()=>{if(props.animationType===\"stop\"){return{strokeDasharray:`${pathLength} ${pathLength}`,strokeDashoffset:pathLength,visibility:\"hidden\"};}else if(props.animationType===\"once\"){return{strokeDasharray:`${sectionLength} ${pathLength}`,strokeDashoffset:pathLength};}else{return{strokeDasharray:`${sectionLength} ${pathLength-sectionLength}`,strokeDashoffset:pathLength};}};return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},children:/*#__PURE__*/_jsxs(\"svg\",{...svgAttributes,ref:svgRef,children:[/*#__PURE__*/_jsx(\"style\",{children:getAnimationCSS()}),/*#__PURE__*/_jsx(\"g\",{dangerouslySetInnerHTML:{__html:props.svgString}}),/*#__PURE__*/_jsx(\"path\",{className:\"animated-path\",d:pathData,stroke:props.color,strokeWidth:props.strokeWidth,strokeLinecap:props.endType,strokeLinejoin:props.endType,fill:\"none\",style:getPathStyle()})]})});}// ... (rest of the code remains the same)\naddPropertyControls(SVGPathTracer,{svgString:{type:ControlType.String,title:\"SVG String\"},color:{type:ControlType.Color,defaultValue:\"#00BCE5\",title:\"Moving Section Color\"},strokeWidth:{type:ControlType.Number,min:1,max:50,step:1,defaultValue:18,title:\"Stroke Width\"},sectionLength:{type:ControlType.Number,min:1,max:100,step:1,defaultValue:20,title:\"Moving Section Length (%)\"},duration:{type:ControlType.Number,min:100,max:2e4,step:100,defaultValue:5e3,title:\"Animation Duration (milliseconds)\"},endType:{type:ControlType.Enum,options:[\"round\",\"butt\"],defaultValue:\"round\",title:\"Section End Type\"},animationType:{type:ControlType.Enum,options:[\"once\",\"looped\",\"mirrored\",\"stop\"],defaultValue:\"looped\",title:\"Animation Type\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"SVGPathTracer\":{\"type\":\"reactComponent\",\"name\":\"SVGPathTracer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./pathTraceSection.map"],"mappings":"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"}