feuerwerk/tests/editor/transitions.test.ts

/**
 * The straight arrow between two states. It runs border to border because a diagonal line into a
 * port passes under the target node and hides its own arrowhead there – the failure that made this
 * geometry necessary, and the one these checks hold shut.
 */
import { describe, expect, it } from 'vitest';
import {
  ARROW,
  arrowCorners,
  arrowShaft,
  BORDER_GAP,
  boxExit,
  centreOf,
  direction,
  PARALLEL_SEP,
  transitionEnds,
  transitionOffsets,
  transitionPreview,
} from '../../src/editor/graph/transitions';

/** Two states side by side, 100 x 40 each, 200 apart on x. */
const left = { x: 0, y: 0, w: 100, h: 40 };
const right = { x: 300, y: 0, w: 100, h: 40 };
/** Directly below the first, which is where a pin-to-pin line would cut through a node. */
const below = { x: 0, y: 200, w: 100, h: 40 };

describe('transition geometry', () => {
  it('leaves a box on the side the ray points at', () => {
    expect(boxExit(left, { x: 1, y: 0 })).toEqual({ x: 100, y: 20 });
    expect(boxExit(left, { x: -1, y: 0 })).toEqual({ x: 0, y: 20 });
    expect(boxExit(left, { x: 0, y: 1 })).toEqual({ x: 50, y: 40 });
    expect(boxExit(left, { x: 0, y: -1 })).toEqual({ x: 50, y: 0 });
  });

  it('runs border to border, so neither end sits inside a node', () => {
    const ends = transitionEnds(left, right)!;
    expect(ends.start).toEqual({ x: 100 + BORDER_GAP, y: 20 });
    expect(ends.end).toEqual({ x: 300 - BORDER_GAP, y: 20 });
  });

  it('leaves through the bottom and the top when one state sits under the other', () => {
    const ends = transitionEnds(left, below)!;
    // The whole point: straight down, out of the lower border and into the upper one – never
    // across the body of either node.
    expect(ends.start).toEqual({ x: 50, y: 40 + BORDER_GAP });
    expect(ends.end).toEqual({ x: 50, y: 200 - BORDER_GAP });
  });

  it('keeps both ends clear of the borders they leave', () => {
    const ends = transitionEnds(left, right)!;
    expect(ends.start.x).toBeGreaterThan(left.x + left.w);
    expect(ends.end.x).toBeLessThan(right.x);
  });

  it('pushes a there-and-back pair to opposite sides of the line', () => {
    const offsets = transitionOffsets([
      { id: 'there', from: 'a', to: 'b' },
      { id: 'back', from: 'b', to: 'a' },
    ]);
    const there = offsets.get('there')!;
    const back = offsets.get('back')!;
    // Same sign in each arrow's own frame, which is opposite sides on screen, since the normal
    // turns with the direction.
    expect(there).toBe(back);
    expect(Math.abs(there)).toBe(PARALLEL_SEP / 2);

    const a = transitionEnds(left, right, there)!;
    const b = transitionEnds(right, left, back)!;
    expect(a.start.y).not.toBe(b.end.y);
    expect(Math.abs(a.start.y - b.end.y)).toBeCloseTo(PARALLEL_SEP);
  });

  it('leaves a lone transition on the line between the centres', () => {
    const offsets = transitionOffsets([{ id: 'only', from: 'a', to: 'b' }]);
    expect(offsets.get('only')).toBe(0);
    expect(transitionEnds(left, right, 0)).toEqual(transitionEnds(left, right));
  });

  it('fans three between the same pair evenly around the centre line', () => {
    const offsets = transitionOffsets([
      { id: 'one', from: 'a', to: 'b' },
      { id: 'two', from: 'a', to: 'b' },
      { id: 'three', from: 'a', to: 'b' },
    ]);
    expect([...offsets.values()]).toEqual([-PARALLEL_SEP, 0, PARALLEL_SEP]);
  });

  it('keeps transitions between different pairs on their own centre lines', () => {
    const offsets = transitionOffsets([
      { id: 'ab', from: 'a', to: 'b' },
      { id: 'cd', from: 'c', to: 'd' },
    ]);
    expect(offsets.get('ab')).toBe(0);
    expect(offsets.get('cd')).toBe(0);
  });

  it('has no ends when the two boxes share a centre', () => {
    expect(transitionEnds(left, { ...left })).toBeNull();
    expect(direction({ x: 5, y: 5 }, { x: 5, y: 5 })).toBeNull();
  });

  it('stops the line one arrowhead short of the tip', () => {
    const shaft = arrowShaft({ x: 0, y: 0 }, { x: 100, y: 0 });
    expect(shaft).toEqual({ x: 100 - ARROW, y: 0 });
  });

  it('points the head at the target, across the line', () => {
    const [tip, a, b] = arrowCorners({ x: 0, y: 0 }, { x: 100, y: 0 })!;
    expect(tip).toEqual({ x: 100, y: 0 });
    // Both base corners sit at the shaft's end, one on each side of the line.
    expect(a.x).toBeCloseTo(100 - ARROW);
    expect(b.x).toBeCloseTo(100 - ARROW);
    expect(Math.sign(a.y)).toBe(-Math.sign(b.y));
    expect(Math.abs(a.y)).toBeCloseTo(Math.abs(b.y));
  });

  it('previews from the source border to the pointer until it finds a state', () => {
    const loose = transitionPreview(left, null, { x: 300, y: 20 });
    expect(loose.start).toEqual({ x: 100 + BORDER_GAP, y: 20 });
    expect(loose.end).toEqual({ x: 300, y: 20 });

    const snapped = transitionPreview(left, right, { x: 280, y: 20 });
    expect(snapped).toEqual(transitionEnds(left, right));
  });

  it('centres a box where both halves meet', () => {
    expect(centreOf(left)).toEqual({ x: 50, y: 20 });
  });
});