Improved Kinopio highlighting

index.html

<style>
  .no-select {
    user-select: none;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const body = document.querySelector("body");
    const textElements = document.querySelectorAll("p, h1, h2, h3, h4, h5, h6, a, span, li, blockquote");
    let activeElement = null;

    body.addEventListener("mousemove", function(e) {
      for (const textElement of textElements) {
        const rect = textElement.getBoundingClientRect();
        if (
          e.clientX >= rect.left &&
          e.clientX <= rect.right &&
          e.clientY >= rect.top &&
          e.clientY <= rect.bottom
        ) {
          if (textElement !== activeElement) {
            // Remove no-select class from the previously active element
            if (activeElement) {
              activeElement.classList.add("no-select");
            }
            // Allow text selection for the currently interacted text element
            textElement.classList.remove("no-select");
            activeElement = textElement;
          }
          return;
        }
      }
      // Mouse is not interacting with any text element, prevent text selection
      if (activeElement) {
        activeElement.classList.add("no-select");
        activeElement = null;
      }
    });
  });
</script>

magic-paint-fix.js

function redrawAllStrokes () {
  if (allStrokes.length === 0) { return }
  allStrokes = allStrokes.filter(stroke => {
    return stroke.length
  })
  allStrokes.forEach(stroke => {
    currentPaintStroke = stroke
    drawCurrentStroke()
  })
}