Function ImageDiff

ts/ImageDiff.tsx:32–180

(props: Props)

/** A diff between two images. */
export function ImageDiff(props: Props) {
  const [shrinkToFit, setShrinkToFit] = React.useState(true);

  const toggleShrinkToFit: React.ChangeEventHandler<HTMLInputElement> = e => {
    setShrinkToFit(e.target.checked);
  };

  const {changePDiffMode, pdiffMode, changeImageDiffMode} = props;
  let {imageDiffMode} = props;
  const pair = props.filePair;
  if (isOneSided(pair)) {
    imageDiffMode = 'side-by-side'; // Only one that makes sense for one-sided diffs.
  }

  const [, forceUpdate] = React.useState(0);
  const computePerceptualDiffBox = (fp: ImageFilePair) => {
    if (!isSameSizeImagePair(fp)) return;
    // TODO(danvk): restructure this, it's a mess
    (async () => {
      const response = await fetch(`/pdiffbbox/${fp.idx}`);
      const bbox = (await response.json()) as DiffBox;
      const {diffData} = fp;
      // XXX are there other fields?
      fp.diffData = {
        ...diffData,
        diffBounds: bbox,
      };
      console.log('forcing update');
      forceUpdate(n => n + 1); // tell react about this change
    })().catch((error: unknown) => {
      console.error(error);
    });
  };

  if (pdiffMode === 'bbox' && !pair.diffData) {
    // XXX this might shoot off unnecessary XHRs--use a Promise!
    computePerceptualDiffBox(pair);
  }

  React.useEffect(() => {
    const handleResize = () => {
      if (shrinkToFit) forceUpdate(n => n + 1);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [shrinkToFit, forceUpdate]);

  // TODO: switch to useKey() or some such
  React.useEffect(() => {
    const handleKeydown = (e: KeyboardEvent) => {
      if (!isLegitKeypress(e)) return;
      if (e.code == 'KeyS') {
        changeImageDiffMode('side-by-side');
      } else if (e.code == 'KeyB') {
        changeImageDiffMode('blink');
      } else if (e.code == 'KeyP') {