{"ast":null,"code":"export const adjustCanvasScale = (canvas, originalCanvasWidth = 1000) => {\n  const screenWidth = window.innerWidth;\n  const scale = screenWidth * 0.6 / originalCanvasWidth;\n  if (canvas) {\n    canvas.style.transform = `scale(${scale})`;\n    canvas.style.transformOrigin = \"top left\";\n  }\n};\nexport function map(value, in_min, in_max, out_min, out_max) {\n  if (value === null) {\n    value = 0;\n  }\n  return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;\n}\nexport function frequencyToNote(frequency, fxmin, fxmax) {\n  // The 12-equal temperament formula from music theory is used here to convert frequencies into semitone numbers relative to A4\n  const A4 = 440;\n  let semitonesAboveC0 = 12 * (Math.log(frequency / A4) / Math.log(2));\n  semitonesAboveC0 += 9; // A4 is the 9th semitone starting from C0\n  semitonesAboveC0 += 12 * 4; // A4 is the A in the 4th octave\n\n  if (frequency < fxmin || frequency > fxmax) return \"\"; // If the frequency is out of range, the note is not displayed\n\n  const octave = Math.floor(semitonesAboveC0 / 12);\n  const noteIndex = Math.floor(semitonesAboveC0 % 12);\n  const notes = [\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"A#\", \"B\"];\n  const note = notes[noteIndex];\n  return note + octave;\n}\nexport const drawBackground = (canvasRef, fxmax, fxmin, showNotes) => {\n  const canvas = canvasRef.current;\n  const margin = 10;\n  function adjustCanvasScale() {\n    // Get the width of the browser window\n    const screenWidth = window.innerWidth;\n    // Assume the original width of the canvas is 1000px\n    const originalCanvasWidth = 1000;\n    // Calculate the zoom ratio when occupying 80% of the window width\n    const scale = screenWidth * 0.6 / originalCanvasWidth;\n    // Apply scaling\n    const canvas = document.querySelector(\"canvas\");\n    if (canvas) {\n      canvas.style.transform = `scale(${scale})`;\n      canvas.style.transformOrigin = \"top left\";\n    }\n  }\n  if (canvas) {\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) {\n      var gridSpacing = 50;\n      ctx.strokeStyle = \"#e0e0e0\";\n      for (var y = gridSpacing; y < canvas.height; y += gridSpacing) {\n        ctx.beginPath();\n        ctx.moveTo(0, y);\n        ctx.lineTo(canvas.width, y);\n        ctx.stroke();\n      }\n\n      // Draw vertical line in the middle\n      var middleX = canvas.width / 2; // Calculate the middle x coordinate\n      ctx.beginPath();\n      ctx.moveTo(middleX, 0); // Start at the top middle of the canvas\n      ctx.lineTo(middleX, canvas.height); // Draw to the bottom middle of the canvas\n      ctx.stroke(); // Render the line\n\n      ctx.fillStyle = \"#000\";\n      ctx.font = \"12px Arial\";\n      for (var y = 0; y <= canvas.height; y += gridSpacing) {\n        // Map current y value to frequency range\n        var frequency = map(y, 0, canvas.height, fxmax, fxmin);\n        // Determines whether to display frequencies or notes based on the current state\n        var label = showNotes ? frequencyToNote(frequency, fxmin, fxmax)\n        // : frequency.toFixed(2);\n        : (Math.round(frequency / 10) * 10).toString();\n        // Make sure the label is not empty\n        if (label) {\n          ctx.fillText(label, 5, y + 12);\n        }\n      }\n      var y = canvas.height;\n      var frequency = map(y, 0, canvas.height, fxmax, fxmin);\n      // Determines whether to display frequencies or notes based on the current state\n      var label = showNotes ? frequencyToNote(frequency, fxmin, fxmax)\n      // : frequency.toFixed(2);\n      : (Math.round(frequency / 10) * 10).toString();\n      // Make sure the label is not empty\n      if (label) {\n        ctx.fillText(label, 5, y);\n      }\n      adjustCanvasScale();\n      window.addEventListener(\"resize\", adjustCanvasScale);\n    }\n  }\n};","map":{"version":3,"names":["adjustCanvasScale","canvas","originalCanvasWidth","screenWidth","window","innerWidth","scale","style","transform","transformOrigin","map","value","in_min","in_max","out_min","out_max","frequencyToNote","frequency","fxmin","fxmax","A4","semitonesAboveC0","Math","log","octave","floor","noteIndex","notes","note","drawBackground","canvasRef","showNotes","current","margin","document","querySelector","ctx","getContext","gridSpacing","strokeStyle","y","height","beginPath","moveTo","lineTo","width","stroke","middleX","fillStyle","font","label","round","toString","fillText","addEventListener"],"sources":["D:/Project/UC_Trains_Voice/react-demo/src/function/canvasDefault.ts"],"sourcesContent":["export const adjustCanvasScale = (\r\n  canvas: HTMLCanvasElement,\r\n  originalCanvasWidth: number = 1000\r\n) => {\r\n  const screenWidth = window.innerWidth;\r\n  const scale = (screenWidth * 0.6) / originalCanvasWidth;\r\n  if (canvas) {\r\n    canvas.style.transform = `scale(${scale})`;\r\n    canvas.style.transformOrigin = \"top left\";\r\n  }\r\n};\r\nexport function map(\r\n  value: number | null,\r\n  in_min: number,\r\n  in_max: number,\r\n  out_min: number,\r\n  out_max: number\r\n): number {\r\n  if (value === null) {\r\n    value = 0;\r\n  }\r\n  return ((value - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;\r\n}\r\nexport function frequencyToNote(\r\n  frequency: number,\r\n  fxmin: number,\r\n  fxmax: number\r\n): string {\r\n  // The 12-equal temperament formula from music theory is used here to convert frequencies into semitone numbers relative to A4\r\n  const A4 = 440;\r\n  let semitonesAboveC0 = 12 * (Math.log(frequency / A4) / Math.log(2));\r\n  semitonesAboveC0 += 9; // A4 is the 9th semitone starting from C0\r\n  semitonesAboveC0 += 12 * 4; // A4 is the A in the 4th octave\r\n\r\n  if (frequency < fxmin || frequency > fxmax) return \"\"; // If the frequency is out of range, the note is not displayed\r\n\r\n  const octave = Math.floor(semitonesAboveC0 / 12);\r\n  const noteIndex = Math.floor(semitonesAboveC0 % 12);\r\n  const notes = [\r\n    \"C\",\r\n    \"C#\",\r\n    \"D\",\r\n    \"D#\",\r\n    \"E\",\r\n    \"F\",\r\n    \"F#\",\r\n    \"G\",\r\n    \"G#\",\r\n    \"A\",\r\n    \"A#\",\r\n    \"B\",\r\n  ];\r\n  const note = notes[noteIndex];\r\n\r\n  return note + octave;\r\n}\r\n\r\nexport const drawBackground = (\r\n  canvasRef: React.RefObject<HTMLCanvasElement>,\r\n  fxmax: number,\r\n  fxmin: number,\r\n  showNotes: boolean\r\n) => {\r\n  const canvas = canvasRef.current;\r\n  const margin = 10;\r\n  function adjustCanvasScale() {\r\n    // Get the width of the browser window\r\n    const screenWidth = window.innerWidth;\r\n    // Assume the original width of the canvas is 1000px\r\n    const originalCanvasWidth = 1000;\r\n    // Calculate the zoom ratio when occupying 80% of the window width\r\n    const scale = (screenWidth * 0.6) / originalCanvasWidth;\r\n    // Apply scaling\r\n    const canvas = document.querySelector(\"canvas\");\r\n    if (canvas) {\r\n      canvas.style.transform = `scale(${scale})`;\r\n      canvas.style.transformOrigin = \"top left\";\r\n    }\r\n  }\r\n  if (canvas) {\r\n    const ctx = canvas.getContext(\"2d\");\r\n    if (ctx) {\r\n      var gridSpacing = 50;\r\n      ctx.strokeStyle = \"#e0e0e0\";\r\n      for (var y = gridSpacing; y < canvas.height; y += gridSpacing) {\r\n        ctx.beginPath();\r\n        ctx.moveTo(0, y);\r\n        ctx.lineTo(canvas.width, y);\r\n        ctx.stroke();\r\n      }\r\n\r\n      // Draw vertical line in the middle\r\n      var middleX = canvas.width / 2; // Calculate the middle x coordinate\r\n      ctx.beginPath();\r\n      ctx.moveTo(middleX, 0); // Start at the top middle of the canvas\r\n      ctx.lineTo(middleX, canvas.height); // Draw to the bottom middle of the canvas\r\n      ctx.stroke(); // Render the line\r\n\r\n      ctx.fillStyle = \"#000\";\r\n      ctx.font = \"12px Arial\";\r\n      for (var y = 0; y <= canvas.height; y += gridSpacing) {\r\n        // Map current y value to frequency range\r\n        var frequency = map(y, 0, canvas.height, fxmax, fxmin);\r\n        // Determines whether to display frequencies or notes based on the current state\r\n        var label = showNotes\r\n          ? frequencyToNote(frequency, fxmin, fxmax)\r\n          // : frequency.toFixed(2);\r\n          :(Math.round(frequency / 10) * 10).toString();\r\n        // Make sure the label is not empty\r\n        if (label) {\r\n          ctx.fillText(label, 5, y+12);\r\n        }\r\n      }\r\n      var y = canvas.height;\r\n      var frequency = map(y, 0, canvas.height, fxmax, fxmin);\r\n        // Determines whether to display frequencies or notes based on the current state\r\n        var label = showNotes\r\n          ? frequencyToNote(frequency, fxmin, fxmax)\r\n          // : frequency.toFixed(2);\r\n          :(Math.round(frequency / 10) * 10).toString();\r\n        // Make sure the label is not empty\r\n        if (label) {\r\n          ctx.fillText(label, 5, y);\r\n        }\r\n      adjustCanvasScale();\r\n      window.addEventListener(\"resize\", adjustCanvasScale);\r\n    }\r\n  }\r\n};\r\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}