{"version":3,"file":"Ruler.BakOOXsD.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/CGiOvKxSHwTUNHycQgCc/xylYwtski8Q5WBNkLetX/Ruler.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect}from\"react\";import{gsap}from\"gsap\";import{addPropertyControls,ControlType}from\"framer\";/**\n *\n * @framerIntrinsicWidth 1400\n * @framerIntrinsicHeight 1000\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth\n * @framerSupportedLayoutHeight\n */export function Ruler({majorStep=100,subdivisions=10,color=\"#000\",speed=.2}){const containerRef=useRef(null);const trackRef=useRef(null);useEffect(()=>{const container=containerRef.current;const track=trackRef.current;if(!container||!track)return;const createRuler=()=>{const width=window.innerWidth;const totalWidth=width*2;const minorStep=majorStep/subdivisions;track.innerHTML=\"\";for(let i=0;i<=totalWidth;i+=minorStep){const isMajor=i%majorStep===0;const tick=document.createElement(\"div\");tick.style.position=\"relative\";tick.style.width=\"1px\";tick.style.marginRight=`${minorStep-1}px`;tick.style.background=color;// height logic giống Figma: major > mid > small\nlet height=\"6px\";if(isMajor)height=\"12px\";else if(i%(majorStep/2)===0)height=\"10px\";tick.style.height=height;if(isMajor){const label=document.createElement(\"div\");label.innerText=`${Math.round(i)}`;label.style.position=\"absolute\";label.style.top=\"18px\";label.style.left=\"50%\";label.style.transform=\"translateX(-50%)\";label.style.fontSize=\"10px\";label.style.color=color;label.style.whiteSpace=\"nowrap\";tick.appendChild(label);}track.appendChild(tick);}};createRuler();const handleMove=e=>{const percent=e.clientX/window.innerWidth;const targetX=(percent-.5)*300;gsap.to(track,{x:targetX,duration:speed,ease:\"power2.out\"});};window.addEventListener(\"mousemove\",handleMove);window.addEventListener(\"resize\",createRuler);return()=>{window.removeEventListener(\"mousemove\",handleMove);window.removeEventListener(\"resize\",createRuler);};},[majorStep,subdivisions,color,speed]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"40px\",overflow:\"hidden\",borderBottom:\"1px solid rgba(0,0,0,0.2)\",display:\"flex\",alignItems:\"flex-start\"},children:/*#__PURE__*/_jsx(\"div\",{ref:trackRef,style:{display:\"flex\",alignItems:\"flex-start\",willChange:\"transform\"}})});}addPropertyControls(Ruler,{majorStep:{type:ControlType.Number,title:\"Major Step\",min:50,max:500,step:10,defaultValue:100},subdivisions:{type:ControlType.Number,title:\"Subdivisions\",min:2,max:50,step:1,defaultValue:10},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#000000\"},speed:{type:ControlType.Number,title:\"Speed\",min:.05,max:1,step:.05,defaultValue:.2}});\nexport const __FramerMetadata__ = {\"exports\":{\"Ruler\":{\"type\":\"reactComponent\",\"name\":\"Ruler\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"1000\",\"framerDisableUnlink\":\"*\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"* @framerSupportedLayoutHeight\",\"framerIntrinsicWidth\":\"1400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Ruler.map"],"mappings":"mPASG,SAAgB,EAAM,CAAC,YAAU,IAAI,eAAa,GAAG,QAAM,OAAO,QAAM,IAAI,CAAC,IAAM,EAAaA,EAAO,IAAI,EAAQ,EAASA,EAAO,IAAI,EAC4tB,OAD1tB,MAAc,CAAC,IAAM,EAAU,EAAa,QAAc,EAAM,EAAS,QAAQ,GAAG,CAAC,GAAW,CAAC,EAAM,OAAO,IAAM,MAAgB,CAA+B,IAAM,EAAxB,EAAO,WAAkC,EAAQ,EAAU,EAAU,EAAa,EAAM,UAAU,GAAG,IAAI,IAAI,EAAE,EAAE,GAAG,EAAW,GAAG,EAAU,CAAC,IAAM,EAAQ,EAAE,IAAY,EAAQ,EAAK,SAAS,cAAc,KAAK,EAAE,EAAK,MAAM,SAAS,WAAW,EAAK,MAAM,MAAM,MAAM,EAAK,MAAM,YAAY,GAAG,EAAU,EAAE,IAAI,EAAK,MAAM,WAAW,EACvmB,IAAI,EAAO,MAAkG,GAAzF,EAAQ,EAAO,OAAe,GAAG,EAAU,IAAK,IAAE,EAAO,QAAO,EAAK,MAAM,OAAO,EAAU,EAAQ,CAAC,IAAM,EAAM,SAAS,cAAc,KAAK,EAAE,EAAM,UAAU,GAAG,KAAK,MAAM,CAAC,IAAI,EAAM,MAAM,SAAS,WAAW,EAAM,MAAM,IAAI,OAAO,EAAM,MAAM,KAAK,MAAM,EAAM,MAAM,UAAU,mBAAmB,EAAM,MAAM,SAAS,OAAO,EAAM,MAAM,MAAM,EAAM,EAAM,MAAM,WAAW,SAAS,EAAK,YAAY,CAAK,CAAE,CAAC,EAAM,YAAY,CAAI,CAAE,CAAC,EAAE,EAAY,EAAE,IAAM,EAAW,GAAG,CAA2C,IAAM,GAAlC,EAAE,QAAQ,EAAO,WAAkC,IAAI,IAAI,EAAK,GAAG,EAAM,CAAC,EAAE,EAAQ,SAAS,EAAM,KAAK,YAAY,CAAC,CAAE,EAAgG,OAA9F,EAAO,iBAAiB,YAAY,CAAU,EAAE,EAAO,iBAAiB,SAAS,CAAW,MAAY,CAAC,EAAO,oBAAoB,YAAY,CAAU,EAAE,EAAO,oBAAoB,SAAS,CAAW,CAAE,CAAE,EAAE,CAAC,EAAU,EAAa,EAAM,CAAK,CAAC,EAAsB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,aAAa,4BAA4B,QAAQ,OAAO,WAAW,YAAY,EAAE,SAAsB,EAAK,MAAM,CAAC,IAAI,EAAS,MAAM,CAAC,QAAQ,OAAO,WAAW,aAAa,WAAW,WAAW,CAAC,CAAC,CAAC,CAAC,CAAE,qBAV3mC,IAAoC,IAAuB,IAAoD,EAU6/B,EAAoB,EAAM,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG,aAAa,GAAG,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,aAAa,EAAE,EAAE,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,aAAa,SAAS,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,IAAI,IAAI,IAAI,EAAE,KAAK,IAAI,aAAa,EAAE,CAAC,CAAC"}