{"ast":null,"code":"var _jsxFileName = \"/Users/laurynj/Desktop/\\u1112\\u1162\\u110B\\u1163\\u11BC\\u1100\\u1167\\u11BC\\u110E\\u1161\\u11AF\\u110B\\u1165\\u11B8 \\u1100\\u1169\\u11BC\\u1100\\u1169\\u11BC\\u1109\\u1161\\u110B\\u1165\\u11B8/@GIS_\\u1112\\u1161\\u11B7\\u110C\\u1165\\u11BC\\u110B\\u116D\\u11BC/GIS_\\u1112\\u1161\\u11B7\\u110C\\u1165\\u11BC\\u110B\\u116D\\u11BC_\\u1105\\u1175\\u110B\\u1162\\u11A8\\u1110\\u1173/dark/src/component/common/Slider.jsx\",\n _s = $RefreshSig$();\nimport { useRef, useState, useEffect } from 'react';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nexport default function OpacitySlider({\n value = 100,\n onChange\n}) {\n _s();\n const barRef = useRef(null);\n const [percent, setPercent] = useState(value);\n const update = x => {\n const rect = barRef.current.getBoundingClientRect();\n let v = (x - rect.left) / rect.width * 100;\n v = Math.max(0, Math.min(100, v));\n setPercent(v);\n onChange === null || onChange === void 0 ? void 0 : onChange(Math.round(v));\n };\n const onDown = e => {\n update(e.clientX);\n const move = ev => update(ev.clientX);\n const up = () => {\n document.removeEventListener('mousemove', move);\n document.removeEventListener('mouseup', up);\n };\n document.addEventListener('mousemove', move);\n document.addEventListener('mouseup', up);\n };\n useEffect(() => setPercent(value), [value]);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"sliderControl\",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"sliderBar\",\n ref: barRef,\n onMouseDown: onDown,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"sliderBarFill\",\n style: {\n width: `${percent}%`\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"sliderHandle\",\n style: {\n left: `${percent}%`\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 31,\n columnNumber: 5\n }, this);\n}\n_s(OpacitySlider, \"gKsbcJwyynS5+DCnv5hknSFWp3Y=\");\n_c = OpacitySlider;\nvar _c;\n$RefreshReg$(_c, \"OpacitySlider\");","map":{"version":3,"names":["useRef","useState","useEffect","jsxDEV","_jsxDEV","OpacitySlider","value","onChange","_s","barRef","percent","setPercent","update","x","rect","current","getBoundingClientRect","v","left","width","Math","max","min","round","onDown","e","clientX","move","ev","up","document","removeEventListener","addEventListener","className","children","ref","onMouseDown","style","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["/Users/laurynj/Desktop/해양경찰업 공공사업/@GIS_함정용/GIS_함정용_리액트/dark/src/component/common/Slider.jsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport default function OpacitySlider({ value = 100, onChange }) {\n const barRef = useRef(null);\n const [percent, setPercent] = useState(value);\n\n const update = (x) => {\n const rect = barRef.current.getBoundingClientRect();\n let v = ((x - rect.left) / rect.width) * 100;\n v = Math.max(0, Math.min(100, v));\n setPercent(v);\n onChange?.(Math.round(v));\n };\n\n const onDown = (e) => {\n update(e.clientX);\n\n const move = (ev) => update(ev.clientX);\n const up = () => {\n document.removeEventListener('mousemove', move);\n document.removeEventListener('mouseup', up);\n };\n\n document.addEventListener('mousemove', move);\n document.addEventListener('mouseup', up);\n };\n\n useEffect(() => setPercent(value), [value]);\n\n return (\n