{"ast":null,"code":"var _jsxFileName = \"D:\\\\Project\\\\UC_Trains_Voice\\\\react-demo\\\\src\\\\Canvas\\\\ConstantTxt.tsx\",\n  _s = $RefreshSig$();\nimport React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';\nimport { map, drawBackground } from '../function/canvasDefault';\nimport { getPitch } from '../function/getPitch';\nimport { Slider } from 'antd';\nimport { Col, Row } from 'antd';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst style = {\n  display: 'relative',\n  height: 300\n};\n\n// const ConstantTxt: React.FC<ConstantTxtProps> = ({ initialRange, divisor, ballPosition, isRetry, setPlayingPause, setPlaying, COLORS, config, isPlaying, size, showNotesPar }) => {\n\nconst ConstantTxt = /*#__PURE__*/_s( /*#__PURE__*/forwardRef(_c = _s((props, ref) => {\n  _s();\n  const {\n    initialRange,\n    divisor,\n    ballPosition,\n    isRetry,\n    setPlayingPause,\n    setPlaying,\n    COLORS,\n    config,\n    isPlaying,\n    size,\n    showNotesPar\n  } = props;\n\n  // const { SRATE, fxmin, fxlow, fxhigh, fxmax } = config;\n  const {\n    realVoiceColor,\n    targetVoiceColor,\n    closeVoiceColor\n  } = COLORS;\n  const [pitchValue, setPitchValue] = useState(null);\n  const [ballY, setBallY] = useState(size[0]);\n  const [ballYCurr, setBallYCurr] = useState(size[0]);\n  const canvasRef = useRef(null);\n  // const isPlayingRef = useRef(isPlaying);\n  const rectWidth = 5;\n  const ref4 = useRef(null);\n  useImperativeHandle(ref, () => ref4.current);\n  const cornerRadius = 1;\n  // const desiredLength = Math.floor(size[1] / divisor);\n\n  const CanvasLength = size[1]; // 1400\n  const [CanvasLengthBall, setCanvasLengthBall] = useState(size[1] * ballPosition);\n  const initialCustomHistoryFull = new Array(CanvasLength).fill(NaN);\n  const initialColorChangesFull = new Array(CanvasLength).fill(false);\n  const initialBallHistoryFull = new Array(CanvasLengthBall).fill(NaN);\n  const [customHistoryFull, setCustomHistoryFull] = useState(initialCustomHistoryFull);\n  const [colorChangesFull, setColorChangesFull] = useState(initialColorChangesFull);\n  const [ballHistoryFull, setBallHistoryFull] = useState(initialBallHistoryFull);\n  const resetStatesFull = () => {\n    setCustomHistoryFull([...initialCustomHistoryFull]);\n    setColorChangesFull([...initialColorChangesFull]);\n    setBallHistoryFull([...initialBallHistoryFull]);\n  };\n  const desiredLength = Math.floor(size[1] / divisor);\n  const desiredLengthBallNum = Math.floor(size[1] / divisor * ballPosition);\n  const [desiredLengthBall, setDesiredLengthBall] = useState(desiredLengthBallNum);\n  const initialCustomHistory = new Array(desiredLength).fill(NaN);\n  const initialColorChanges = new Array(desiredLength).fill(true);\n  const initialBallHistory = new Array(desiredLengthBall).fill(NaN);\n  const [customHistory, setCustomHistory] = useState(initialCustomHistory);\n  const [colorChanges, setColorChanges] = useState(initialColorChanges);\n  const [ballHistory, setBallHistory] = useState(initialBallHistory);\n  const resetStates = () => {\n    setCustomHistory([...initialCustomHistory]);\n    setColorChanges([...initialColorChanges]);\n    setBallHistory([...initialBallHistory]);\n  };\n\n  // isPlayingRef.current = isPlaying;\n  const [showNotes, setShowNotes] = useState(false);\n  const [inputValue, setInputValue] = useState(1);\n  const [canvasHeight, setCanvasHeight] = useState(0);\n  function updateBallY(value) {\n    if (value === null) {\n      value = 0;\n    }\n    if (value <= initialRange[0]) {\n      // setBallY(size[0] + 10);\n      setBallYCurr(size[0]);\n    } else if (value > initialRange[1]) {\n      // setBallY(map(value, initialRange[0], initialRange[1], size[0], -1));\n      setBallYCurr(0);\n    } else {\n      // console.log(value);\n      // setBallY(map(value, initialRange[0], initialRange[1], size[0], -1));\n      setBallYCurr(map(value, initialRange[0], initialRange[1], size[0], -1));\n    }\n  }\n  const onChange = newValue => {\n    setInputValue(newValue);\n  };\n  const updateCanvasHeight = () => {\n    if (canvasRef.current) {\n      const rect = canvasRef.current.getBoundingClientRect();\n      setCanvasHeight(rect.height);\n    }\n  };\n  useEffect(() => {\n    setDesiredLengthBall(Math.floor(size[1] / divisor * ballPosition));\n    setCanvasLengthBall(Math.floor(size[1] * ballPosition));\n  }, [ballPosition, divisor]);\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      resetStates();\n      resetStatesFull();\n    }, 100);\n    return () => clearTimeout(timer);\n  }, [desiredLengthBall, CanvasLengthBall]);\n\n  // retry\n  useEffect(() => {\n    setPlayingPause();\n    resetStates();\n    resetStatesFull();\n  }, [isRetry, divisor]);\n\n  // Rendering balls and customization\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (canvas) {\n      const ctx = canvas.getContext('2d');\n      // console.log(canvas.width);\n      if (ctx) {\n        // Clear the canvas\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n        // Draw the background\n        drawBackground(canvasRef, initialRange[1], initialRange[0], showNotes);\n\n        // Draw the ball's historical positions\n        // for (var i = 0; i < ballHistory.length; i++) {\n        //     ctx.beginPath();\n        //     ctx.arc(i * divisor, ballHistory[i], 5, 0, 2 * Math.PI);\n        //     ctx.fillStyle = realVoiceColor;\n        //     ctx.fill();\n        //     ctx.closePath();\n        // }\n\n        // New: Draw the ball's historical positions\n        for (var i = 0; i < ballHistoryFull.length; i++) {\n          ctx.beginPath();\n          const mappedValue = map(ballHistoryFull[i], initialRange[0], initialRange[1], size[0], -1);\n\n          // ctx.arc(i, ballHistoryFull[i], 5, 0, 2 * Math.PI);\n          ctx.arc(i, mappedValue, 5, 0, 2 * Math.PI);\n          ctx.fillStyle = realVoiceColor;\n          ctx.fill();\n          ctx.closePath();\n        }\n\n        //Plot current value\n        // updateBallY(pitchValue);\n        ctx.beginPath();\n        ctx.arc(size[1] * ballPosition, ballYCurr, 10, 0, 2 * Math.PI);\n        ctx.fillStyle = \"black\";\n        ctx.fill();\n        ctx.closePath();\n        for (let i = 0; i < customHistoryFull.length - 40; i++) {\n          ctx.beginPath();\n          const mappedJsonValue = map(customHistoryFull[i], initialRange[0], initialRange[1], size[0], 0);\n          if (colorChangesFull[CanvasLength - i]) {\n            ctx.fillStyle = closeVoiceColor;\n          } else {\n            ctx.fillStyle = targetVoiceColor;\n          }\n          ctx.fillRect(CanvasLength - i, mappedJsonValue, rectWidth, rectWidth);\n          ctx.fill();\n          ctx.closePath();\n        }\n        ctx.stroke();\n      }\n    }\n  }, [customHistoryFull, ballY, initialRange]);\n  useEffect(() => {\n    if (isPlaying) {\n      updateBallY(pitchValue);\n    }\n  }, [pitchValue, isPlaying]);\n  const updateBallHistoryFull = pitch => {\n    let tempHistoryFull = [...ballHistoryFull];\n    tempHistoryFull.splice(0, divisor);\n    for (let i = 0; i < divisor - 1; i++) {\n      tempHistoryFull.push(NaN);\n    }\n    tempHistoryFull.push(pitch);\n    setBallHistoryFull(tempHistoryFull);\n  };\n  const updateCustomHistoryFull = inputValue => {\n    let tempHistoryFull = [...customHistoryFull];\n    tempHistoryFull.splice(-divisor, divisor);\n    for (let i = 0; i < divisor; i++) {\n      tempHistoryFull.unshift(inputValue);\n    }\n    // tempHistoryFull.unshift(inputValue); \n    setCustomHistoryFull(tempHistoryFull);\n    setColorChangesFull(currentColors => {\n      const newColors = [...currentColors];\n      for (let i = 0; i < CanvasLengthBall; i++) {\n        let ballYtem = map(ballHistoryFull[i], initialRange[0], initialRange[1], size[0], -1);\n        if (!isNaN(ballHistoryFull[i])) {\n          const mappedJsonValue = map(customHistoryFull[CanvasLength - i], initialRange[0], initialRange[1], size[0], 0);\n          const difference = Math.abs(mappedJsonValue - ballYtem);\n          if (difference <= 40 && !isNaN(difference)) {\n            for (let j = i - divisor; j <= i + divisor && j < CanvasLengthBall; j++) {\n              newColors[j] = true;\n            }\n            i += divisor;\n          } else {\n            newColors[i] = false;\n          }\n        } else {\n          newColors[i] = newColors[i - 1];\n        }\n      }\n      return newColors;\n    });\n  };\n\n  // Update custom history when input value changes\n  useEffect(() => {\n    if (isPlaying) {\n      updateCustomHistoryFull(inputValue);\n      if (pitchValue !== null) {\n        updateBallHistoryFull(pitchValue);\n      } else {\n        updateBallHistoryFull(0);\n      }\n      // updateBallHistoryFull(ballY);\n    }\n  }, [isPlaying, pitchValue]);\n\n  // first\n  useEffect(() => {\n    setPlayingPause();\n    drawBackground(canvasRef, initialRange[1], initialRange[0], showNotes);\n    console.log(showNotesPar);\n    let cleanup;\n    // Set the Canvas height when mounting the component for the first time\n    updateCanvasHeight();\n\n    // Set up resize event listener\n    window.addEventListener('resize', updateCanvasHeight);\n    (async () => {\n      cleanup = await getPitch(config, setPitchValue);\n    })();\n    return () => {\n      cleanup && cleanup();\n      window.removeEventListener('resize', updateCanvasHeight);\n    };\n  }, []);\n\n  // useEffect(() => {\n  //     updateBallY(pitchValue);\n  // }, [pitchValue]);\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      const rect = canvasRef.current.getBoundingClientRect();\n      setCanvasHeight(rect.height);\n    }\n  }, []);\n  const toggleShowNotes = () => {\n    setShowNotes(!showNotes);\n    const canvas = canvasRef.current;\n    // console.log(showNotes);\n    if (canvas && canvas.getContext) {\n      const ctx = canvas.getContext('2d');\n      if (ctx) {\n        ctx.clearRect(0, 0, canvas.width / 24, canvas.height);\n        drawBackground(canvasRef, initialRange[1], initialRange[0], !showNotes);\n      }\n    }\n  };\n  useEffect(() => {\n    drawBackground(canvasRef, initialRange[1], initialRange[0], showNotes); // Make sure the background is redrawn on state change\n  }, [showNotes]);\n  useEffect(() => {\n    console.log(showNotesPar);\n    setShowNotes(showNotesPar);\n    const canvas = canvasRef.current;\n    if (canvas && canvas.getContext) {\n      const ctx = canvas.getContext('2d');\n      if (ctx) {\n        ctx.clearRect(0, 0, canvas.width / 24, canvas.height);\n        drawBackground(canvasRef, initialRange[1], initialRange[0], !showNotes);\n      }\n    }\n  }, [showNotesPar]);\n  return /*#__PURE__*/_jsxDEV(Row, {\n    style: {\n      maxHeight: \"27vw\",\n      maxWidth: \"100vw\"\n    },\n    children: [/*#__PURE__*/_jsxDEV(Col, {\n      span: 1\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 350,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(Col, {\n      span: 22,\n      style: {\n        position: 'relative'\n      },\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        style: {\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          bottom: 0,\n          writingMode: 'vertical-rl',\n          transform: 'rotate(180deg)',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          marginRight: '8px',\n          marginTop: 0,\n          fontSize: '1.vw',\n          height: canvasHeight\n        },\n        children: showNotes ? 'Pitch / (Note)' : 'Pitch / (Hz)'\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 356,\n        columnNumber: 17\n      }, this), /*#__PURE__*/_jsxDEV(\"canvas\", {\n        ref: canvasRef,\n        onClick: toggleShowNotes,\n        id: \"pitchCanvas\",\n        width: size[1],\n        height: size[0],\n        style: {\n          border: '1px solid #000'\n        }\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 375,\n        columnNumber: 17\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        style: {\n          position: 'absolute',\n          top: canvasHeight,\n          left: 0,\n          width: canvasHeight * 3.5,\n          display: 'flex',\n          justifyContent: 'space-between',\n          fontSize: '12px',\n          marginLeft: '3vw'\n        },\n        children: [...Array(11)].map((_, index) => /*#__PURE__*/_jsxDEV(\"span\", {\n          children: [(15 / (divisor / 4) * (index / 10 - ballPosition)).toFixed(1), \"s\"]\n        }, index, true, {\n          fileName: _jsxFileName,\n          lineNumber: 380,\n          columnNumber: 3\n        }, this))\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 377,\n        columnNumber: 17\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 355,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(Col, {\n      span: 1,\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        ref: ref4,\n        children: /*#__PURE__*/_jsxDEV(Slider, {\n          vertical: true\n\n          //   tooltip={{open:true}}\n          ,\n          min: initialRange[0],\n          max: initialRange[1],\n          style: {\n            marginTop: 0,\n            height: canvasHeight\n          },\n          onChange: onChange,\n          defaultValue: 30\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 389,\n          columnNumber: 21\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 388,\n        columnNumber: 17\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 387,\n      columnNumber: 13\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 348,\n    columnNumber: 9\n  }, this);\n}, \"dHLiLqsUIbb1ZGPNLEsk0JK5rYg=\")), \"dHLiLqsUIbb1ZGPNLEsk0JK5rYg=\");\n_c2 = ConstantTxt;\nexport default ConstantTxt;\nvar _c, _c2;\n$RefreshReg$(_c, \"ConstantTxt$forwardRef\");\n$RefreshReg$(_c2, \"ConstantTxt\");","map":{"version":3,"names":["React","useEffect","useRef","forwardRef","useImperativeHandle","useState","map","drawBackground","getPitch","Slider","Col","Row","jsxDEV","_jsxDEV","style","display","height","ConstantTxt","_s","_c","props","ref","initialRange","divisor","ballPosition","isRetry","setPlayingPause","setPlaying","COLORS","config","isPlaying","size","showNotesPar","realVoiceColor","targetVoiceColor","closeVoiceColor","pitchValue","setPitchValue","ballY","setBallY","ballYCurr","setBallYCurr","canvasRef","rectWidth","ref4","current","cornerRadius","CanvasLength","CanvasLengthBall","setCanvasLengthBall","initialCustomHistoryFull","Array","fill","NaN","initialColorChangesFull","initialBallHistoryFull","customHistoryFull","setCustomHistoryFull","colorChangesFull","setColorChangesFull","ballHistoryFull","setBallHistoryFull","resetStatesFull","desiredLength","Math","floor","desiredLengthBallNum","desiredLengthBall","setDesiredLengthBall","initialCustomHistory","initialColorChanges","initialBallHistory","customHistory","setCustomHistory","colorChanges","setColorChanges","ballHistory","setBallHistory","resetStates","showNotes","setShowNotes","inputValue","setInputValue","canvasHeight","setCanvasHeight","updateBallY","value","onChange","newValue","updateCanvasHeight","rect","getBoundingClientRect","timer","setTimeout","clearTimeout","canvas","ctx","getContext","clearRect","width","i","length","beginPath","mappedValue","arc","PI","fillStyle","closePath","mappedJsonValue","fillRect","stroke","updateBallHistoryFull","pitch","tempHistoryFull","splice","push","updateCustomHistoryFull","unshift","currentColors","newColors","ballYtem","isNaN","difference","abs","j","console","log","cleanup","window","addEventListener","removeEventListener","toggleShowNotes","maxHeight","maxWidth","children","span","fileName","_jsxFileName","lineNumber","columnNumber","position","left","top","bottom","writingMode","transform","alignItems","justifyContent","marginRight","marginTop","fontSize","onClick","id","border","marginLeft","_","index","toFixed","vertical","min","max","defaultValue","_c2","$RefreshReg$"],"sources":["D:/Project/UC_Trains_Voice/react-demo/src/Canvas/ConstantTxt.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef,forwardRef, useImperativeHandle, useState } from 'react';\r\nimport { adjustCanvasScale, map, drawBackground } from '../function/canvasDefault';\r\nimport { getPitch, IPitchDetectionConfig } from '../function/getPitch';\r\nimport { Slider } from 'antd';\r\nimport { Col, Row } from 'antd';\r\ninterface Config {\r\n    SRATE: number;\r\n    fxmin: number;\r\n    fxlow: number;\r\n    fxhigh: number;\r\n    fxmax: number;\r\n}\r\ninterface COLORS {\r\n    realVoiceColor: string;\r\n    targetVoiceColor: string,\r\n    closeVoiceColor: string,\r\n}\r\ninterface ConstantTxtProps {\r\n    size: number[];\r\n    config: Config;\r\n    COLORS: COLORS;\r\n    isPlaying: boolean;\r\n    showNotesPar: boolean;\r\n    setPlaying: () => void;\r\n    setPlayingPause: () => void;\r\n    isRetry: boolean;\r\n    ballPosition: number;\r\n    divisor: number;\r\n    initialRange: number[];\r\n}\r\ninterface ConstantTxtRef {\r\n    getChildRef: () => HTMLDivElement | null;\r\n  }\r\nconst style: React.CSSProperties = {\r\n    display: 'relative',\r\n    height: 300,\r\n};\r\n\r\n\r\n// const ConstantTxt: React.FC<ConstantTxtProps> = ({ initialRange, divisor, ballPosition, isRetry, setPlayingPause, setPlaying, COLORS, config, isPlaying, size, showNotesPar }) => {\r\n\r\nconst ConstantTxt = forwardRef<HTMLDivElement, ConstantTxtProps>((props, ref) => {\r\n    const {\r\n      initialRange,\r\n      divisor,\r\n      ballPosition,\r\n      isRetry,\r\n      setPlayingPause,\r\n      setPlaying,\r\n      COLORS,\r\n      config,\r\n      isPlaying,\r\n      size,\r\n      showNotesPar,\r\n    } = props;\r\n      \r\n// const { SRATE, fxmin, fxlow, fxhigh, fxmax } = config;\r\n    const { realVoiceColor, targetVoiceColor, closeVoiceColor } = COLORS;\r\n    const [pitchValue, setPitchValue] = useState<number | null>(null);\r\n    const [ballY, setBallY] = useState<number>(size[0]);\r\n    const [ballYCurr, setBallYCurr] = useState<number>(size[0]);\r\n    const canvasRef = useRef<HTMLCanvasElement>(null);\r\n    // const isPlayingRef = useRef(isPlaying);\r\n    const rectWidth = 5;\r\n    const ref4 = useRef<HTMLDivElement>(null);\r\n    useImperativeHandle(ref, () => ref4.current as HTMLDivElement);\r\n\r\n    const cornerRadius = 1;\r\n    // const desiredLength = Math.floor(size[1] / divisor);\r\n\r\n\r\n    const CanvasLength = size[1]; // 1400\r\n    const [CanvasLengthBall, setCanvasLengthBall] = useState<number>(size[1] * ballPosition);\r\n    const initialCustomHistoryFull = new Array(CanvasLength).fill(NaN);\r\n    const initialColorChangesFull = new Array(CanvasLength).fill(false);\r\n    const initialBallHistoryFull = new Array(CanvasLengthBall).fill(NaN);\r\n    const [customHistoryFull, setCustomHistoryFull] = useState<number[]>(initialCustomHistoryFull);\r\n    const [colorChangesFull, setColorChangesFull] = useState<boolean[]>(initialColorChangesFull);\r\n    const [ballHistoryFull, setBallHistoryFull] = useState<number[]>(initialBallHistoryFull);\r\n    const resetStatesFull = () => {\r\n        setCustomHistoryFull([...initialCustomHistoryFull]);\r\n        setColorChangesFull([...initialColorChangesFull]);\r\n        setBallHistoryFull([...initialBallHistoryFull]);\r\n    };\r\n\r\n    const desiredLength = Math.floor(size[1] / divisor);\r\n    const desiredLengthBallNum = Math.floor(size[1] / divisor * ballPosition);\r\n    const [desiredLengthBall, setDesiredLengthBall] = useState<number>(desiredLengthBallNum);\r\n\r\n\r\n    const initialCustomHistory = new Array(desiredLength).fill(NaN);\r\n    const initialColorChanges = new Array(desiredLength).fill(true);\r\n    const initialBallHistory = new Array(desiredLengthBall).fill(NaN);\r\n\r\n    const [customHistory, setCustomHistory] = useState<number[]>(initialCustomHistory);\r\n    const [colorChanges, setColorChanges] = useState<boolean[]>(initialColorChanges);\r\n    const [ballHistory, setBallHistory] = useState<number[]>(initialBallHistory);\r\n    const resetStates = () => {\r\n        setCustomHistory([...initialCustomHistory]);\r\n        setColorChanges([...initialColorChanges]);\r\n        setBallHistory([...initialBallHistory]);\r\n    };\r\n\r\n    // isPlayingRef.current = isPlaying;\r\n    const [showNotes, setShowNotes] = useState(false);\r\n    const [inputValue, setInputValue] = useState(1);\r\n    const [canvasHeight, setCanvasHeight] = useState(0);\r\n    function updateBallY(value: number | null): void {\r\n        if (value === null) {\r\n            value = 0;\r\n        }\r\n        if (value <= initialRange[0]) {\r\n            // setBallY(size[0] + 10);\r\n            setBallYCurr(size[0]);\r\n        } else if (value > initialRange[1]) {\r\n            // setBallY(map(value, initialRange[0], initialRange[1], size[0], -1));\r\n            setBallYCurr(0);\r\n        }\r\n\r\n        else {\r\n            // console.log(value);\r\n            // setBallY(map(value, initialRange[0], initialRange[1], size[0], -1));\r\n            setBallYCurr(map(value, initialRange[0], initialRange[1], size[0], -1));\r\n        }\r\n    }\r\n    const onChange = (newValue: number) => {\r\n        setInputValue(newValue);\r\n    };\r\n    const updateCanvasHeight = () => {\r\n        if (canvasRef.current) {\r\n            const rect = canvasRef.current.getBoundingClientRect();\r\n            setCanvasHeight(rect.height);\r\n        }\r\n    };\r\n    useEffect(() => {\r\n        setDesiredLengthBall(Math.floor(size[1] / divisor * ballPosition));\r\n        setCanvasLengthBall(Math.floor(size[1] * ballPosition));\r\n    }, [ballPosition, divisor])\r\n\r\n    useEffect(() => {\r\n        const timer = setTimeout(() => {\r\n            resetStates();\r\n            resetStatesFull();\r\n        }, 100);\r\n        return () => clearTimeout(timer);\r\n\r\n    }, [desiredLengthBall, CanvasLengthBall])\r\n\r\n    // retry\r\n    useEffect(() => {\r\n        setPlayingPause();\r\n        resetStates();\r\n        resetStatesFull();\r\n    }, [isRetry, divisor])\r\n\r\n    // Rendering balls and customization\r\n    useEffect(() => {\r\n            const canvas = canvasRef.current;\r\n            if (canvas) {\r\n                const ctx = canvas.getContext('2d');\r\n                // console.log(canvas.width);\r\n                if (ctx) {\r\n                    // Clear the canvas\r\n                    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n                    // Draw the background\r\n                    drawBackground(canvasRef, initialRange[1], initialRange[0], showNotes);\r\n\r\n                    // Draw the ball's historical positions\r\n                    // for (var i = 0; i < ballHistory.length; i++) {\r\n                    //     ctx.beginPath();\r\n                    //     ctx.arc(i * divisor, ballHistory[i], 5, 0, 2 * Math.PI);\r\n                    //     ctx.fillStyle = realVoiceColor;\r\n                    //     ctx.fill();\r\n                    //     ctx.closePath();\r\n                    // }\r\n\r\n                    // New: Draw the ball's historical positions\r\n                    for (var i = 0; i < ballHistoryFull.length; i++) {\r\n                        ctx.beginPath();\r\n                        const mappedValue = map(ballHistoryFull[i], initialRange[0], initialRange[1], size[0],-1);\r\n\r\n                        // ctx.arc(i, ballHistoryFull[i], 5, 0, 2 * Math.PI);\r\n                        ctx.arc(i, mappedValue, 5, 0, 2 * Math.PI);\r\n                        ctx.fillStyle = realVoiceColor;\r\n                        ctx.fill();\r\n                        ctx.closePath();\r\n                    }\r\n\r\n                    //Plot current value\r\n                    // updateBallY(pitchValue);\r\n                    ctx.beginPath();\r\n                    ctx.arc(size[1] * ballPosition, ballYCurr, 10, 0, 2 * Math.PI);\r\n                    ctx.fillStyle = \"black\";\r\n                    ctx.fill();\r\n                    ctx.closePath();\r\n\r\n                    for (let i = 0; i < customHistoryFull.length - 40; i++) {\r\n                        ctx.beginPath();\r\n                        const mappedJsonValue = map(customHistoryFull[i], initialRange[0], initialRange[1], size[0], 0);\r\n\r\n                        if (colorChangesFull[CanvasLength - i]) {\r\n                            ctx.fillStyle = closeVoiceColor;\r\n                        } else {\r\n                            ctx.fillStyle = targetVoiceColor;\r\n                        }\r\n\r\n                        ctx.fillRect(CanvasLength - i, mappedJsonValue, rectWidth, rectWidth);\r\n                        ctx.fill();\r\n                        ctx.closePath();\r\n                    }\r\n                    ctx.stroke();\r\n                }\r\n            }\r\n        \r\n    }, [customHistoryFull, ballY,initialRange]);\r\n    \r\n    useEffect(() => {\r\n        if (isPlaying) {\r\n          updateBallY(pitchValue);\r\n        }\r\n    \r\n      }, [pitchValue,isPlaying]);\r\n\r\n    const updateBallHistoryFull = (pitch: number) => {\r\n        let tempHistoryFull = [...ballHistoryFull];\r\n        tempHistoryFull.splice(0, divisor);\r\n        for (let i = 0; i < divisor - 1; i++) {\r\n            tempHistoryFull.push(NaN);\r\n        }\r\n        tempHistoryFull.push(pitch);\r\n        setBallHistoryFull(tempHistoryFull);\r\n    };\r\n\r\n    const updateCustomHistoryFull = (inputValue: number) => {\r\n        let tempHistoryFull = [...customHistoryFull];\r\n        tempHistoryFull.splice(-divisor, divisor);\r\n        for (let i = 0; i < divisor; i++) {\r\n            tempHistoryFull.unshift(inputValue);\r\n        }\r\n        // tempHistoryFull.unshift(inputValue); \r\n        setCustomHistoryFull(tempHistoryFull);\r\n\r\n        setColorChangesFull(currentColors => {\r\n            const newColors = [...currentColors];\r\n            for (let i = 0; i < CanvasLengthBall; i++) {\r\n                let ballYtem = map(ballHistoryFull[i], initialRange[0], initialRange[1], size[0],-1);\r\n                if (!isNaN(ballHistoryFull[i])) {\r\n                    const mappedJsonValue = map(customHistoryFull[CanvasLength - i], initialRange[0], initialRange[1], size[0], 0);\r\n                    \r\n                    const difference = Math.abs(mappedJsonValue - ballYtem);\r\n\r\n                    if (difference <= 40 && !isNaN(difference)) {\r\n                        for (let j = i - divisor; j <= i + divisor && j < CanvasLengthBall; j++) {\r\n                            newColors[j] = true;\r\n                        }\r\n                        i += divisor;\r\n                    }\r\n                    else {\r\n                        newColors[i] = false;\r\n                    }\r\n                } else {\r\n                    newColors[i] = newColors[i - 1];\r\n                }\r\n            }\r\n            return newColors; \r\n        });\r\n\r\n    };\r\n\r\n    // Update custom history when input value changes\r\n    useEffect(() => {\r\n        if (isPlaying) {\r\n            updateCustomHistoryFull(inputValue);\r\n            if (pitchValue !== null) {\r\n                updateBallHistoryFull(pitchValue);\r\n            } else {\r\n                updateBallHistoryFull(0);\r\n            }\r\n            // updateBallHistoryFull(ballY);\r\n        }\r\n    }, [isPlaying, pitchValue]);\r\n\r\n    // first\r\n    useEffect(() => {\r\n        setPlayingPause();\r\n        drawBackground(canvasRef, initialRange[1], initialRange[0], showNotes);\r\n        console.log(showNotesPar);\r\n        let cleanup: () => void;\r\n        // Set the Canvas height when mounting the component for the first time\r\n        updateCanvasHeight();\r\n\r\n        // Set up resize event listener\r\n        window.addEventListener('resize', updateCanvasHeight);\r\n        (async () => {\r\n            cleanup = await getPitch(config, setPitchValue);\r\n        })();\r\n\r\n        return () => {\r\n            cleanup && cleanup();\r\n            window.removeEventListener('resize', updateCanvasHeight);\r\n        };\r\n    }, []);\r\n\r\n    // useEffect(() => {\r\n    //     updateBallY(pitchValue);\r\n    // }, [pitchValue]);\r\n\r\n\r\n    useEffect(() => {\r\n        if (canvasRef.current) {\r\n            const rect = canvasRef.current.getBoundingClientRect();\r\n            setCanvasHeight(rect.height);\r\n        }\r\n    }, []);\r\n\r\n    const toggleShowNotes = () => {\r\n        setShowNotes(!showNotes);\r\n        const canvas = canvasRef.current;\r\n        // console.log(showNotes);\r\n        if (canvas && canvas.getContext) {\r\n            const ctx = canvas.getContext('2d');\r\n            if (ctx) {\r\n                ctx.clearRect(0, 0, canvas.width / 24, canvas.height);\r\n                drawBackground(canvasRef, initialRange[1], initialRange[0], !showNotes);\r\n            }\r\n        }\r\n    }\r\n\r\n    useEffect(() => {\r\n        drawBackground(canvasRef, initialRange[1], initialRange[0], showNotes); // Make sure the background is redrawn on state change\r\n    }, [showNotes]);\r\n\r\n    useEffect(() => {\r\n        console.log(showNotesPar);\r\n        setShowNotes(showNotesPar);\r\n        const canvas = canvasRef.current;\r\n        if (canvas && canvas.getContext) {\r\n            const ctx = canvas.getContext('2d');\r\n            if (ctx) {\r\n                ctx.clearRect(0, 0, canvas.width / 24, canvas.height);\r\n                drawBackground(canvasRef, initialRange[1], initialRange[0], !showNotes);\r\n            }\r\n        }\r\n    }, [showNotesPar]);\r\n\r\n    return (\r\n        <Row style={{ maxHeight: \"27vw\", maxWidth: \"100vw\" }}>\r\n            {/* <div className=\"color-block\"> */}\r\n            <Col span={1}>\r\n                {/* <div style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>\r\n                Pitch/(Hz)\r\n            </div> */}\r\n            </Col>\r\n            <Col span={22} style={{ position: 'relative' }}>\r\n                <div\r\n                    style={{\r\n                        position: 'absolute',\r\n                        left: 0,\r\n                        top: 0,\r\n                        bottom: 0,\r\n                        writingMode: 'vertical-rl',\r\n                        transform: 'rotate(180deg)',\r\n                        display: 'flex',\r\n                        alignItems: 'center',\r\n                        justifyContent: 'center',\r\n                        marginRight: '8px',\r\n                        marginTop: 0,\r\n                        fontSize: '1.vw',\r\n                        height: canvasHeight,\r\n                    }}\r\n                >\r\n                    {showNotes ? 'Pitch / (Note)' : 'Pitch / (Hz)'}\r\n                </div>\r\n                <canvas ref={canvasRef} onClick={toggleShowNotes} id=\"pitchCanvas\" width={size[1]} height={size[0]} style={{ border: '1px solid #000' }}></canvas>\r\n\r\n                <div style={{ position: 'absolute', top: canvasHeight, left: 0, width: canvasHeight * 3.5, display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginLeft: '3vw', }} >\r\n                    {/* {[...Array(11)].map((_, index) => ( <span key={index}> {(((20 - divisor) * 9 / 15 + 3) * (index / 10 - ballPosition)).toFixed(1)}s </span> ))} */}\r\n                    {[...Array(11)].map((_, index) => (\r\n  <span key={index}>\r\n    {((15 / (divisor / 4)) * (index / 10 - ballPosition)).toFixed(1)}s\r\n  </span>\r\n))}\r\n                </div>\r\n\r\n            </Col>\r\n            <Col span={1}>\r\n                <div  ref = {ref4} >\r\n                    <Slider\r\n                        vertical\r\n                       \r\n                        //   tooltip={{open:true}}\r\n                        min={initialRange[0]}\r\n                        max={initialRange[1]}\r\n                        style={{ marginTop: 0, height: canvasHeight }}\r\n                        onChange={onChange}\r\n                        defaultValue={30} />\r\n                </div>\r\n            </Col>\r\n        </Row>\r\n\r\n\r\n\r\n    );\r\n});\r\n\r\nexport default ConstantTxt;\r\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}