script.js

// ajust the height of iframe to the height of html
window.addEventListener("resize", function () {
	const iframe = document.getElementById("diagram-html");
	if (iframe && iframe.contentWindow && iframe.contentWindow.document.body) {
	iframe.style.height = "0px"; // reset first
	const newHeight = iframe.contentWindow.document.body.scrollHeight + 20;
	iframe.style.height = newHeight + "px";
	}
});


/*
  Observe any updates in checkboxes, scroll to focus on the new updates
*/

// focus card when card change // TODO: do not focus for unselect updates?
function focusCard(cb) {
  // const reasoningWrapper = document.getElementById("col3");
  // console.log(reasoningWrapper.scrollHeight);
  const curCard = cb.labels[0]; // get the .card linked
  // console.log(curCard);
  curCard.scrollIntoView({ block: "center", container: "nearest", behavior: "instant" });
}

// Find all checkbox elements
function handleNewNode(node) {
  if (node.nodeType !== Node.ELEMENT_NODE) return; // skip non-elements
  // If the node itself is a checkbox
  if (node.matches("input[type=checkbox]")) {
    focusCard(node);
  }

  // If the node contains checkboxes
  node.querySelectorAll?.("input[type=checkbox]").forEach(focusCard);
}

// Setup the observer
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type != "childList") return;
    // console.log(mutation);
    mutation.addedNodes.forEach(handleNewNode);
  }
});

// Observe any updates in checkboxes
const targetNode = document.body;
observer.observe(targetNode, { childList: true, subtree: true });



/*
  SVG and Card connection creation
*/

function checkSubCard(cb) {
  cb.checked = true;
  // show according SubSVG
  const [i, j] = cb.id.replace("sub-card", "").split("-").map(Number);
  const sub_svg = document.getElementById(`sub-svg${i}-${j}`);
  sub_svg.style.display = "block";
}

function checkCard(cb) {
  const curCard = cb.labels[0];

  if (curCard.classList.contains("card")) {
    // TODO: does subCard need to check if Card check?
    // const subCards = curCard.querySelectorAll(".sub-card input[type=checkbox]");
    // subCards.forEach((subInput) => {
    //   checkSubCard(subInput); // check all its sub-card children
    // });
    // hide according SVG
    const i = parseInt(cb.id.replace("card", ""), 10);
    const svg = document.getElementById(`svg${i}`);
    svg.style.display = "block";
  } else {
    checkSubCard(cb);
  }
}

function uncheckSubCard(cb) {
  cb.checked = false;
  // show according SubSVG
  const [i, j] = cb.id.replace("sub-card", "").split("-").map(Number);
  const sub_svg = document.getElementById(`sub-svg${i}-${j}`);
  sub_svg.style.display = "none";
}

function uncheckCard(cb) {
  const curCard = cb.labels[0];
  if (curCard.classList.contains("card")) {
    // TODO: does subCard need to uncheck if Card uncheck?
    // const subCards = curCard.querySelectorAll(".sub-card input[type=checkbox]");
    // subCards.forEach((subInput) => {
    //   uncheckSubCard(subInput); // uncheck all its sub-card children
    // });
    // hide according SVG
    const i = parseInt(cb.id.replace("card", ""), 10);
    const svg = document.getElementById(`svg${i}`);
    svg.style.display = "none";
  } else {
    uncheckSubCard(cb);
  }
}

document.addEventListener("change", (event) => {
  console.log(event);
  if (event.target.type === "checkbox") {
    const cb = event.target;
    if (cb.checked) {
      checkCard(cb);
    } else {
      uncheckCard(cb);
    }
  }
});