<div id="container"><div>

<script src="26b39.js"></script>
<script src="26b41.js"></script>
<script src="26b43.js"></script>
<script src="26b10.js"></script>
<script src="26b12.js"></script>
<script src="26b14.js"></script>
<script src="26b15.js"></script>
<script src="26b16.js"></script>

<script>
// Define global variables
let dataset1, dataset2;

// Instantiate containers, output textarea, and buttons
const cnt = getContainer("container");
const inTxa = createTextarea("text-input");
const outTxa = createTextarea("text-output");
const btnDiv = createDiv("button-container");
const ciBtn = createButton("ci-button", "Clear all");
const deBtn = createButton("de-button", "Default");
const r1Btn = createButton("r1-button", "Dataset 1");
const r2Btn = createButton("r2-button", "Dataset 2");
const canDiv = createDiv("canvas-container");
const canOut = createCanvas("graphic-output");
const lowDiv = createDiv("lower-container");

// Append textarea to container
cnt.append(canDiv);
  canDiv.append(canOut);
cnt.append(lowDiv);
  lowDiv.append(inTxa)
  lowDiv.append(btnDiv);
    btnDiv.append(ciBtn);
    btnDiv.append(deBtn);
    btnDiv.append(r1Btn);
    btnDiv.append(r2Btn);

// Change ui style
cnt.style.display = "flex";
cnt.style.flexDirection = "column";
canDiv.style.border = "0px solid blue";
lowDiv.style.border = "0px solid blue";
lowDiv.style.display = "flex";
inTxa.style.flex = "3";
btnDiv.style.flex = "1";
cnt.style.height = "500px";
inTxa.style.height = "100%";

// Set onclick event to each button
ciBtn.addEventListener("click", () => {
  clearTextarea("text-input");
  const ctx = canOut.getContext("2d");
  const w = canOut.width;
  const h = canOut.height;
  ctx.clearRect(0, 0, w, h);
});
deBtn.addEventListener("click", () => {
  inTxa.value = "";
  inTxa.value += "# dataset 1"; 
  inTxa.value += "\n" + "X;Y";
  inTxa.value += "\n" + "20;30";
  inTxa.value += "\n" + "20;110";
  inTxa.value += "\n" + "60;110";
  inTxa.value += "\n";

  inTxa.value += "\n# dataset 2"; 
  inTxa.value += "\n" + "X;Y";
  inTxa.value += "\n" + "300;220";
  inTxa.value += "\n" + "260;220";
  inTxa.value += "\n" + "280;180";
  inTxa.value += "\n" + "300;140";
  inTxa.value += "\n" + "260;140";
  inTxa.value += "\n";
});
r1Btn.addEventListener("click", () => {
  let key, block;
  key = "# dataset 1";
  block = readBlockFromTextarea("text-input", key);
  dataset1 = convertBlockToDataset(block, ";");
  onCanvasDrawDataset(
    "graphic-output",
    dataset1["X"],
    dataset1["Y"],
    "#f44", true, true,
  );
});
r2Btn.addEventListener("click", () => {
  let key, block;
  key = "# dataset 2";
  block = readBlockFromTextarea("text-input", key);
  dataset2 = convertBlockToDataset(block, ";");
  onCanvasDrawDataset(
    "graphic-output",
    dataset2["X"],
    dataset2["Y"],
    "#2a2", true, true,
  );
});
</script>

/**
 * 26c16.js
 * Helper functions for butiran-x/26c16 note.
 *
 * Author: Sparisoma Viridi (https://github.com/dudung)
 * Created: 2026-03-03
 *
 * Exports:
 * - onCanvasDrawDataset(id, dataset)
 */


/**
 * Draws a dataset on a canvas element.
 *
 * @param {string} id - The ID of the canvas element to draw on.
 * @param {number[]} datax - The dataset for the x-axis.
 * @param {number[]} datay - The dataset for the y-axis.
 * @param {string} [color="blue"] - The color used for drawing.
 * @param {boolean} [marker=true] - Whether to draw markers at data points.
 * @param {boolean} [line=false] - Whether to draw lines connecting data points.
 * @returns {void}
 *
 * @example
 * drawOnCanvas("graphic-output", xx, yy, "blue", true, false);
 */
function onCanvasDrawDataset(id, datax, datay, color="blue", marker=true, line=false) {
  /** @type {HTMLCanvasElement|null} */
  const el = document.getElementById(id);
  
  if (!(el instanceof HTMLCanvasElement)) return null;
  
  const ctx = el.getContext("2d");
  const n = Math.min(datax.length, datay.length);
  if(marker) {
    for(let i = 0; i < n; i++) {
      ctx.beginPath();
      ctx.fillStyle = color;
      ctx.arc(datax[i], datay[i], 6, 0, 2*Math.PI);
      ctx.fill();   
    }
  }
  if(line) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;
    for(let i = 0; i < n; i++) {
      if(i == 0) {
        ctx.moveTo(datax[i], datay[i]);
        console.log("moveTo");
      } else {
        ctx.lineTo(datax[i], datay[i]);        
        console.log("lineTo");
      }
    }
    ctx.stroke();   
  }
}


// marker: 26c16.js
(() => {
  console.log("[marker] 26c16.js loaded");
})();