#+title: Demo: arrows across elements, pointing into code
#+date: <2022-11-01 Tue>

[[https://twitter.com/ctietze/status/1587044610890760193][Christian Tietze asks about drawing arrows]] and I thought I should try implementing that diagram here.

#+name: example-block
#+begin_src xml
<button type="button">
  Save
</button>

<iframe>
  title="YouTube: Crab rave"
  src="...">
</iframe>
#+end_src

#+begin_export html
<p>
  <svg id="arrow-1" data-line="2" data-side="left" />Save
</p>

<p>
  Youtube: Crab rave:<svg id="arrow-2" data-line="6" data-side="right"/>
</p>

<p>
  Choose lines to point to:
  <input data-for="arrow-1" type="range" min="1" max="8" value="2" oninput="redraw()" />
  <input data-for="arrow-2" type="range" min="1" max="8" value="6" oninput="redraw()" />
</p>
#+end_export

#+name: example-source
#+begin_src xml
<p>
  <svg data-line="2" data-side="left" />Save
</p>

<p>
  Youtube: Crab rave:<svg data-line="6" data-side="right"/>
</p>
#+end_src

Idea: surround each line with a =<span>=, then have an arrow point to the left or right side of the span. The code is unfortunately not general, but it does draw the arrows programmatically. Tricky: /syntax highlighting/ turns the text into html, with spans etc. I'm modifying that html to add more spans. Todo: the layout for the right arrow needs be improved for short lines.

See [[href:arrows-across-elements.org][source]] (quick & dirty prototype code).

#+begin_export html
<style>
  svg.arrow-container { overflow: visible; position: relative; z-index: 1; }
  .arrow { fill: none; stroke: black; stroke-width: 2px; stroke-linejoin: round; marker-end: url(#arrowhead); }
</style>

<script>
  // add a span surrounding each line
  function createLineNumberTargets() {
    const pre = document.getElementById('example-block');
    let lines = pre.innerHTML.split('\n');
    lines = lines.map((line, index) =>
       `<span id="line-${index+1}">${line}</span>`);
    pre.innerHTML = lines.join('\n');
  }

  // Adapted from https://www.redblobgames.com/x/1939-planetary-dungeon/

  /* Create an SVG arrow that points to another element. */
  function createArrow(sourceSvg) {
      let lineNumber = parseFloat(sourceSvg.dataset.line);
      let side = sourceSvg.dataset.side;
      let targetId = `line-${lineNumber}`;
      const x = side === 'left'? 0 : 1; // which side of the box
      const y = 0.5; // halfway vertical position
      sourceSvg.classList.add('arrow-container');
      sourceSvg.setAttribute('viewBox', "-0.5 -0.5 1 1");
      sourceSvg.setAttribute('width', "1");
      sourceSvg.setAttribute('height', "1");
      sourceSvg.style.verticalAlign = "middle";
      function layout() {
          let targetBox = document.getElementById(targetId);
          let sourceRect = sourceSvg.getBoundingClientRect(),
              targetRect = targetBox.getBoundingClientRect();
          let sx = sourceRect.left + sourceRect.width * 0.5,
              sy = sourceRect.top + sourceRect.height * 0.5;
          let tx = targetRect.left + targetRect.width * x,
              ty = targetRect.top + targetRect.height * y;
          let dx = tx - sx,
              dy = ty - sy;
          // TODO: right-side arrow may need to go around longer lines,
          // so instead of Math.max(dx, 0) I should check all other
          // lines and make sure the arrow goes past them
          let path = side === 'left'? `M 0,0 L -50,0 L -50,${dy} L ${dx},${dy}`
                      : `M 0,0 L ${Math.max(dx,0)+50},0 L ${Math.max(dx,0)+50},${dy} L ${dx},${dy}`;
          sourceSvg.innerHTML = `<path class="arrow" d="${path}"/>`;
      }
      
      requestAnimationFrame(layout);
      window.addEventListener('resize', layout);
  }

  function redraw() {
      let inputs = document.querySelectorAll("input[data-for]");
      let sources = document.querySelectorAll("#example-source .string");
      for (let i = 0; i !== inputs.length; i++) {
          let input = inputs[i];
          let svg = document.getElementById(input.dataset.for);
          svg.dataset.line = input.value;
          sources[2*i].textContent = `"${input.value}"`;
      }
      for (let svg of document.querySelectorAll("svg[data-line]")) {
          createArrow(svg);
      }
  }

  window.onload = () => {
      createLineNumberTargets();
      redraw();
  }

</script>

<x:footer>
  <svg width="0" height="0">
    <defs>
      <marker id="arrowhead" viewBox="0 0 10 10" refX="7" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z"/>
      </marker>
      <marker id="arrowhead-white" viewBox="0 0 10 10" refX="7" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3.2" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="white"/>
      </marker>
    </defs>
  </svg>


  Created 1 Nov 2022  
  <!-- hhmts start -->Last modified: 04 Nov 2022<!-- hhmts end -->
</x:footer>
#+end_export