Arrows.svelte component

<!--
  @component
  Adds SVG swoopy arrows based on a config object. It attaches arrows to divs, which are created by another component such as [Annotations.html.svelte](https://layercake.graphics/components/Annotations.html.svelte).
 -->
<script>
  // @ts-nocheck
  import { getContext, onMount, tick } from 'svelte';
  import { swoopyArrow, getElPosition, parseCssValue } from '../_modules/arrowUtils.js';

  /**
   * @typedef {Object} Annotation TODO: Add the schema for the annotation object.
   */

  /**
   * @typedef {Object} Props
   * @property {Array<Annotation>} annotations - A list of annotation objects. See the [Column](https://layercake.graphics/example/Column) chart example for the schema and options.
   * @property {string} [containerClass=".chart-container"] - The class name / CSS selector of the parent element of the `<LayerCake>` component. This is used to crawl the DOM for the text annotations.
   * @property {string} [annotationClass=".layercake-annotation"] -The class name / CSS selector of the text annotation divs.
   */

  /** @type {Props} */
  let {
    annotations,
    containerClass = '.chart-container',
    annotationClass = '.layercake-annotation'
  } = $props();

  let container = $state();

  const { width, height, xScale, yScale, x, y } = getContext('LayerCake');

  /* --------------------------------------------
   * Some lookups to convert between x, y / width, height terminology
   * and CSS names
   */
  const lookups = [
    { dimension: 'width', css: 'left', position: 'x' },
    { dimension: 'height', css: 'top', position: 'y' }
  ];

  let annotationEls = $state();

  // This searches the DOM for the HTML annotations
  // in the Annotations.svelte componenent and then
  // attaches arrows to those divs
  // Make sure the `.chart-container` and `.layercake-annotation`
  // selectors match what you have in your project
  // otherwise it won't find anything
  onMount(async () => {
    await tick();
    annotationEls = Array.from(container.closest(containerClass).querySelectorAll(annotationClass));
  });

  function getArrowPath(anno, i, arrow) {
    if (!annotationEls || !annotationEls[i]) return '';

    const el = annotationEls[i];

    /* --------------------------------------------
     * Parse our attachment directives to know where to start the arrowhead
     * measuring a bounding box based on our annotation el
     */
    const arrowSource = getElPosition(el);
    const sourceCoords = arrow.source.anchor.split('-').map((q, j) => {
      const point =
        q === 'middle'
          ? arrowSource[lookups[j].css] + arrowSource[lookups[j].dimension] / 2
          : arrowSource[q];
      return (
        point +
        parseCssValue(
          arrow.source[`d${lookups[j].position}`],
          i,
          arrowSource.width,
          arrowSource.height
        )
      );
    });

    /* --------------------------------------------
     * Default to clockwise
     */
    const clockwise = typeof arrow.clockwise === 'undefined' ? true : arrow.clockwise;

    /* --------------------------------------------
     * Parse where we're drawing to
     * If we're passing in a percentage as a string then we need to convert it to pixel values
     * Otherwise pass it to our xGet and yGet functions
     */
    const targetCoords = [
      arrow.target.x || $x(arrow.target),
      arrow.target.y || $y(arrow.target)
    ].map((q, j) => {
      const val =
        typeof q === 'string' && q.includes('%')
          ? parseCssValue(q, j, $width, $height)
          : j
            ? $yScale(q)
            : $xScale(q);
      return val + (arrow.target[`d${lookups[j].position}`] || 0);
    });

    /* --------------------------------------------
     * Create arrow path
     */
    return swoopyArrow()
      .angle(Math.PI / 2)
      .clockwise(clockwise)
      .x(q => q[0])
      .y(q => q[1])([sourceCoords, targetCoords]);
  }
</script>

<g bind:this={container}>
  {#if annotations.length}
    <g class="swoops">
      {#each annotations as anno, i}
        {#if anno.arrows}
          {#each anno.arrows as arrow}
            <path marker-end="url(#arrowhead)" d={getArrowPath(anno, i, arrow)}></path>
          {/each}
        {/if}
      {/each}
    </g>
  {/if}
</g>

<style>
  .swoops {
    position: absolute;
    max-width: 200px;
    line-height: 14px;
  }
  .swoops path {
    fill: none;
    stroke: #000;
    stroke-width: 1;
  }
</style>

// Helper functions for creating swoopy arrows

/* --------------------------------------------
 * parseCssValue
 *
 * Parse various inputs and return then as a number
 * Can be a number, which will return the input value
 * A percentage, which will take the percent of the appropriate dimentions
 * A pixel value, which will parse as a number
 *
 */
export function parseCssValue(d, i, width, height) {
  if (!d) return 0;
  if (typeof d === 'number') {
    return d;
  }
  if (d.indexOf('%') > -1) {
    return (+d.replace('%', '') / 100) * (i ? height : width);
  }
  return +d.replace('px', '');
}

/* --------------------------------------------
 * getElPosition
 *
 * Constract a bounding box relative in our coordinate space
 * that we can attach arrow starting points to
 *
 */
export function getElPosition(el) {
  const annotationBbox = el.getBoundingClientRect();
  const parentBbox = el.parentNode.getBoundingClientRect();
  const coords = {
    top: annotationBbox.top - parentBbox.top,
    right: annotationBbox.right - parentBbox.left,
    bottom: annotationBbox.bottom - parentBbox.top,
    left: annotationBbox.left - parentBbox.left,
    width: annotationBbox.width,
    height: annotationBbox.height
  };
  return coords;
}

/* --------------------------------------------
 * swoopyArrow
 *
 * Adapted from bizweekgraphics/swoopyarrows
 *
 */
export function swoopyArrow() {
  let angle = Math.PI;
  let clockwise = true;
  let xValue = d => d[0];
  let yValue = d => d[1];

  function hypotenuse(a, b) {
    return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  }

  function render(data) {
    data = data.map((d) => {
      return [xValue(d), yValue(d)];
    });

    // get the chord length ("height" {h}) between points
    const h = hypotenuse(data[1][0] - data[0][0], data[1][1] - data[0][1]);

    // get the distance at which chord of height h subtends {angle} radians
    const d = h / (2 * Math.tan(angle / 2));

    // get the radius {r} of the circumscribed circle
    const r = hypotenuse(d, h / 2);

    /*
    SECOND, compose the corresponding SVG arc.
      read up: http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
      example: <path d = "M 200,50 a 50,50 0 0,1 100,0"/>
                          M 200,50                          Moves pen to (200,50);
                                   a                        draws elliptical arc;
                                     50,50                  following a degenerate ellipse, r1 == r2 == 50;
                                                            i.e. a circle of radius 50;
                                           0                with no x-axis-rotation (irrelevant for circles);
                                             0,1            with large-axis-flag=0 and sweep-flag=1 (clockwise);
                                                 100,0      to a point +100 in x and +0 in y, i.e. (300,50).
    */
    const path =
      'M ' +
      data[0][0] +
      ',' +
      data[0][1] +
      ' a ' +
      r +
      ',' +
      r +
      ' 0 0,' +
      (clockwise ? '1' : '0') +
      ' ' +
      (data[1][0] - data[0][0]) +
      ',' +
      (data[1][1] - data[0][1]);

    return path;
  }

  render.angle = function renderAngle(_) {
    if (!arguments.length) return angle;
    angle = Math.min(Math.max(_, 1e-6), Math.PI - 1e-6);
    return render;
  };

  render.clockwise = function renderClockwise(_) {
    if (!arguments.length) return clockwise;
    clockwise = !!_;
    return render;
  };

  render.x = function renderX(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return render;
  };

  render.y = function renderY(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return render;
  };

  return render;
}