{"ast":null,"code":"var _jsxFileName = \"D:\\\\Project\\\\UC_Trains_Voice\\\\react-demo\\\\src\\\\Canvas\\\\ConstantVol.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 ConstantVol = /*#__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    volume,\n    historyMode,\n    LAMP_COLORS\n  } = props;\n  // const [volume, setVolume] = useState(0);\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 [ballSizeHistoryFull, setBallSizeHistoryFull] = useState(initialBallHistoryFull);\n  const resetStatesFull = () => {\n    setCustomHistoryFull([...initialCustomHistoryFull]);\n    setColorChangesFull([...initialColorChangesFull]);\n    setBallHistoryFull([...initialBallHistoryFull]);\n    setBallSizeHistoryFull([...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        // 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          let ballSize;\n          if (historyMode === 'Size' || historyMode === 'Mixed') {\n            if (ballSizeHistoryFull[i] < -80) {\n              ballSize = 3;\n            } else if (ballSizeHistoryFull[i] > -50) {\n              ballSize = 7;\n            } else {\n              ballSize = 5;\n            }\n          } else {\n            ballSize = 5;\n          }\n          let ballColor;\n          if (historyMode === 'Color' || historyMode === 'Mixed') {\n            if (ballSizeHistoryFull[i] < -80) {\n              ballColor = LAMP_COLORS[0];\n            } else if (ballSizeHistoryFull[i] > -50) {\n              ballColor = LAMP_COLORS[2];\n            } else {\n              ballColor = LAMP_COLORS[1];\n            }\n          } else {\n            ballColor = realVoiceColor;\n          }\n          ctx.arc(i, mappedValue, ballSize, 0, 2 * Math.PI);\n          ctx.fillStyle = ballColor;\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 updateBallSizeHistoryFull = volumeVal => {\n    let tempHistoryFull = [...ballSizeHistoryFull];\n    tempHistoryFull.splice(0, divisor);\n    for (let i = 0; i < divisor - 1; i++) {\n      tempHistoryFull.push(NaN);\n    }\n    tempHistoryFull.push(volumeVal);\n    setBallSizeHistoryFull(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        updateBallSizeHistoryFull(volume);\n      } else {\n        updateBallHistoryFull(0);\n        updateBallSizeHistoryFull(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  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: 386,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(Col, {\n      span: 22,\n      style: {\n        position: 'relative'\n      },\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"blueAxis\",\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: 392,\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: 412,\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: 417,\n          columnNumber: 3\n        }, this))\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 414,\n        columnNumber: 17\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 391,\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: 426,\n          columnNumber: 21\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 425,\n        columnNumber: 17\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 424,\n      columnNumber: 13\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 384,\n    columnNumber: 9\n  }, this);\n}, \"kOiY/no+Js56SHB8k78xblT5Qmg=\")), \"kOiY/no+Js56SHB8k78xblT5Qmg=\");\n_c2 = ConstantVol;\nexport default ConstantVol;\nvar _c, _c2;\n$RefreshReg$(_c, \"ConstantVol$forwardRef\");\n$RefreshReg$(_c2, \"ConstantVol\");","map":{"version":3,"names":["React","useEffect","useRef","forwardRef","useImperativeHandle","useState","map","drawBackground","getPitch","Slider","Col","Row","jsxDEV","_jsxDEV","style","display","height","ConstantVol","_s","_c","props","ref","initialRange","divisor","ballPosition","isRetry","setPlayingPause","setPlaying","COLORS","config","isPlaying","size","showNotesPar","volume","historyMode","LAMP_COLORS","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","ballSizeHistoryFull","setBallSizeHistoryFull","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","ballSize","ballColor","arc","PI","fillStyle","closePath","mappedJsonValue","fillRect","stroke","updateBallHistoryFull","pitch","tempHistoryFull","splice","push","updateBallSizeHistoryFull","volumeVal","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","className","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/ConstantVol.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\nimport hark from 'hark';\r\n\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\n\r\ninterface ConstantVolProps {\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    volume: number;\r\n    historyMode: string;\r\n    LAMP_COLORS: string[];\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 ConstantVol = forwardRef<HTMLDivElement, ConstantVolProps>((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      volume,\r\n      historyMode,\r\n      LAMP_COLORS,\r\n    } = props;\r\n    // const [volume, setVolume] = useState(0);\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 [ballSizeHistoryFull, setBallSizeHistoryFull] = useState<number[]>(initialBallHistoryFull);\r\n    const resetStatesFull = () => {\r\n        setCustomHistoryFull([...initialCustomHistoryFull]);\r\n        setColorChangesFull([...initialColorChangesFull]);\r\n        setBallHistoryFull([...initialBallHistoryFull]);\r\n        setBallSizeHistoryFull([...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\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                    // 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                        let ballSize;\r\n                        if (historyMode === 'Size' || historyMode === 'Mixed') {\r\n                          if (ballSizeHistoryFull[i] < -80) {\r\n                            ballSize = 3;\r\n                          } else if (ballSizeHistoryFull[i] > -50) {\r\n                            ballSize = 7;\r\n                          } else {\r\n                            ballSize = 5;\r\n                          }\r\n                        } else {\r\n                          ballSize = 5;\r\n                        }\r\n\r\n                        let ballColor;\r\n                        if (historyMode === 'Color' || historyMode === 'Mixed') {\r\n                          if (ballSizeHistoryFull[i] < -80) {\r\n                            ballColor = LAMP_COLORS[0];\r\n                          } else if (ballSizeHistoryFull[i] > -50) {\r\n                            ballColor = LAMP_COLORS[2]; \r\n                          } else {\r\n                            ballColor = LAMP_COLORS[1]; \r\n                          }\r\n                        } else {\r\n                          ballColor = realVoiceColor; \r\n                        }\r\n                        \r\n                        ctx.arc(i, mappedValue, ballSize, 0, 2 * Math.PI);\r\n                        ctx.fillStyle = ballColor;\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 updateBallSizeHistoryFull = (volumeVal: number) => {\r\n        let tempHistoryFull = [...ballSizeHistoryFull];\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(volumeVal);\r\n        setBallSizeHistoryFull(tempHistoryFull);\r\n    };\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                updateBallSizeHistoryFull(volume);\r\n            } else {\r\n                updateBallHistoryFull(0);\r\n                updateBallSizeHistoryFull(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        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                className=\"blueAxis\"\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 ConstantVol;\r\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}