#+title: Math triangle
#+date: <2021-05-13 Thu>
#+nocomments: t

{status; this page isn't public}

Like a painting student learning by copying masterpieces, I wanted to recreate [[https://acegikmo.com/trianglesolver/][Freya Holmer's math triangle widget]], originally posted on [[https://twitter.com/FreyaHolmer/status/1392571957221208070][twitter]]. (I made this based on the tweets, before the final version was published.) *Click on the edges and angles* to toggle them.

#+begin_export html
<figure>
  <svg viewBox="0 0 270 150">
    <rect fill="black" width="100%" height="100%"/>

    <path class="hitbox" d="M 150,35 L 180,120" onclick="toggle('a')" ondblclick="return false"/>
    <path class="hitbox" d="M 60,120 L 150,35" onclick="toggle('b')" ondblclick="return false"/>
    <path class="hitbox" d="M 180,120 L 60,120" onclick="toggle('c')" ondblclick="return false"/>

    <foreignobject data-label="a" x="109" y="63" width="100" height="50">$$a$$</foreignobject>
    <foreignobject data-label="b" x="65" y="63" width="100" height="50">$$b$$</foreignobject>
    <foreignobject data-label="c" x="77" y="99" width="100" height="50">$$c$$</foreignobject>

    <foreignobject data-label="A" x="40" y="96" width="100" height="50">$$A$$</foreignobject>
    <foreignobject data-label="B" x="110" y="96" width="100" height="50">$$B$$</foreignobject>
    <foreignobject data-label="C" x="94" y="42" width="100" height="50">$$C$$</foreignobject>

    <foreignobject data-out="a" x="162" y="56" width="100" height="50"></foreignobject>
    <foreignobject data-out="b" x="10" y="56" width="100" height="50"></foreignobject>
    <foreignobject data-out="c" x="74" y="119" width="100" height="50"></foreignobject>

    <foreignobject data-out="A" x="-10" y="115" width="100" height="50"></foreignobject>
    <foreignobject data-out="B" x="170" y="115" width="100" height="50"></foreignobject>
    <foreignobject data-out="C" x="100" y="7" width="100" height="50"></foreignobject>

    <circle id="A" cx="60" cy="120" r="15" onclick="toggle('A')" ondblclick="return false"/>
    <circle id="B" cx="180" cy="120" r="12" onclick="toggle('B')" ondblclick="return false"/>
    <circle id="C" cx="150" cy="35" r="11" onclick="toggle('C')" ondblclick="return false"/>
    <path id="a" d="M 150,35 L 180,120" onclick="toggle('a')" ondblclick="return false"/>
    <path id="b" d="M 60,120 L 150,35" onclick="toggle('b')" ondblclick="return false"/>
    <path id="c" d="M 180,120 L 60,120" onclick="toggle('c')" ondblclick="return false"/>
    
    <defs><clipPath id="triangle-clip"><path d="M 150,35 L 180,120 L 60,120 Z" /></clipPath></defs>
  </svg>
  <figcaption></figcaption>
</figure>
#+end_export

I knew how to use KaTeX \(\text{for typesetting}\), but I didn't know how to make it work inside an SVG diagram. I learned that =<foreignobject>= lets you put HTML inside SVG, and you can use KaTeX inside that HTML!. This seems like it'll come in handy for my projects. I need to investigate how font sizes work though, since that HTML is going to be in document scale and not the SVG's viewbox scale, right, I think.

Minor notes about polish:

1. I made another line underneath the visible ones. It's black, and also accepts clicks. This is especially useful on mobile where you don't have precise positioning. I needed to place this underneath the text, whereas the visible lines are above the text. 
2. I disabled pointer events on the text boxes by using =pointer-events: none=.
3. I changed the cursor while hovering over the clickable areas by using =cursor: pointer=. 
4. I disabled user-selection of the text by using =user-select: none= on the foreignobject. This was because clicking fast can lead to selecting that text.
5. I also tried to stop the double click behavior by setting an =ondblclick= handler but I am not sure whether this had the intended effect.
6. I drew the angles by drawing a =<circle>= with a clip region set to the triangle area.

Source code: [[href:./index.org][index.org]] (html + javascript).

#+begin_export html
<style>
    :root { --inactive: hsl(0,0%,70%); --computed: hsl(200,100%,60%); --selected: hsl(150,100%,70%); }
    path[onclick], circle[onclick] { cursor: pointer; }
    foreignobject { pointer-events: none; font-size: 8px; color: var(--inactive); user-select: none; }
    path { stroke: var(--inactive); stroke-width: 2px; stroke-linecap: round; }
    path.hitbox { stroke: black; stroke-width: 8px; }
    circle { fill: var(--inactive); stroke-width: 0px; clip-path: url(#triangle-clip); }
    .computed { color: var(--computed); stroke: var(--computed); fill: var(--computed); }
    .selected { color: var(--selected); stroke: var(--selected); fill: var(--selected); }
</style>

<script>
  let clicked = {
      a: true, b: false, c: true,
      A: false, B: true, C: false,
  };

  // Of the letters in "needs", are all of them in "has"? subset operation
  // but needs is a string and solved is an object[part] => bool
  function satisfies(solved, needs) {
      return Array.from(needs).every(part => solved[part]);
  }

  const formulas = [
      ['a', "cAB", "c \\frac{\\sin{A}}{\\sin{B}}"],
      ['b', "aBC", "a \\frac{\\sin{B}}{\\sin{C}}"],
      ['c', "bCA", "b \\frac{\\sin{C}}{\\sin{A}}"],
      ['a', "bcA", "\\sqrt{b^2 +c^2 - 2cb \\cos(A)}"],
      ['b', "caB", "\\sqrt{c^2 +a^2 - 2ac \\cos(B)}"],
      ['c', "abC", "\\sqrt{a^2 +b^2 - 2ba \\cos(C)}"],
      ['A', "BC", "0.5\\tau - B - C"],
      ['B', "CA", "0.5\\tau - C - A"],
      ['C', "AB", "0.5\\tau - A - B"],
      ['A', "abc", "\\cos^{-1}(\\frac{b^2+c^2-a^2}{2bc})"],
      ['B', "bca", "\\cos^{-1}(\\frac{c^2+a^2-b^2}{2ca})"],
      ['C', "cab", "\\cos^{-1}(\\frac{a^2+b^2-c^2}{2ab})"],
  ];

  function solver() {
      // figure out which parts can be calculated given starting point
      // set them to false, true (clicked), or string (formula)
      let solved = Object.create(clicked);

      for (let round = 0; round !== 3; round++) {
          for (let formula of formulas) {
              if (!solved[formula[0]] &amp;&amp; satisfies(solved, formula[1])) { 
                  solved[formula[0]] = formula[2]; 
              }
          }
      }
      return solved;
  }
  
      
  function setUiState() {
      let solved = solver();
      for (formula of document.querySelectorAll("foreignobject[data-out]")) {
          let part = formula.dataset.out, 
              label = "",
              className = "";
          switch (solved[part]) {
              case false:
                  label = "?";
                  className = '';
                  break;
              case true:
                  label = "";
                  className = 'selected';
                  break;
              default:
                  label = solved[part];
                  className = 'computed';
                  break;
          }
          document.getElementById(part).setAttribute('class', className + " part");
          document.querySelector(`foreignobject[data-label=${part}]`).setAttribute('class', className);
          formula.setAttribute('class', className);
          katex.render(label, formula, {throwOnError: true});

      }
  }

  function toggle(part) {
      clicked[part] = !clicked[part];
      setUiState();
  }
  
  document.addEventListener('DOMContentLoaded', setUiState);
</script>

<x:footer copyright="no">
  Created 13 May 2021; &#160;
  <!-- hhmts start -->Last modified: 14 May 2021<!-- hhmts end -->
</x:footer>
#+end_export