chrome-devtools-frontend/inspector_overlay/highlight_flex_common.ts

Chrome DevTools UI

// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {type PathCommands, type Position, type Quad} from './common.js';

import {
  buildPath,
  createPathForQuad,
  drawPathWithLineStyle,
  emptyBounds,
  fillPathWithBoxStyle,
  hatchFillPath,
  type BoxStyle,
  type LineStyle,
} from './highlight_common.js';

type FlexLinesData = FlexItemData[][];

interface FlexItemData {
  itemBorder: PathCommands;
  baseline: number;
}
export interface FlexContainerHighlight {
  containerBorder: PathCommands;
  lines: FlexLinesData;
  isHorizontalFlow: boolean;
  isReverse: boolean;
  alignItemsStyle: string;
  mainGap: number;
  crossGap: number;
  flexContainerHighlightConfig: {
    containerBorder?: LineStyle,
    lineSeparator?: LineStyle,
    itemSeparator?: LineStyle,
    mainDistributedSpace?: BoxStyle,
    crossDistributedSpace?: BoxStyle,
    rowGapSpace?: BoxStyle,
    columnGapSpace?: BoxStyle,
    crossAlignment?: LineStyle,
  };
}

export interface FlexItemHighlight {
  baseSize: number;
  isHorizontalFlow: boolean;
  flexItemHighlightConfig: {baseSizeBox?: BoxStyle, baseSizeBorder?: LineStyle, flexibilityArrow?: LineStyle};
  boxSizing: 'content'|'border';
}

interface LineQuads {
  quad: Quad;
  items: Quad[];
  extendedItems: Quad[];
}

interface GapQuads {
  mainGaps: Quad[][];
  crossGaps: Quad[];
}

const ALIGNMENT_LINE_THICKNESS = 2;
const ALIGNMENT_ARROW_BODY_HEIGHT = 5;
const ALIGNMENT_ARROW_BODY_WIDTH = 5;
const ALIGNMENT_ARROW_TIP_HEIGHT = 6;
const ALIGNMENT_ARROW_TIP_WIDTH = 11;
const ALIGNMENT_ARROW_DISTANCE_FROM_LINE = 2;
const FLEXIBILITY_ARROW_THICKNESS = 1;
const FLEXIBILITY_ARROW_TIP_SIZE = 5;

export function drawLayoutFlexItemHighlight(
    highlight: FlexItemHighlight, itemPath: PathCommands, context: CanvasRenderingContext2D, deviceScaleFactor: number,
    canvasWidth: number, canvasHeight: number, emulationScaleFactor: number) {
  const {baseSize, isHorizontalFlow} = highlight;

  const itemQuad = rectPathToQuad(itemPath);
  const baseSizeQuad = isHorizontalFlow ? {
    p1: itemQuad.p1,
    p2: getColinearPointAtDistance(itemQuad.p1, itemQuad.p2, baseSize),
    p3: getColinearPointAtDistance(itemQuad.p4, itemQuad.p3, baseSize),
    p4: itemQuad.p4,
  } :
                                          {
                                            p1: itemQuad.p1,
                                            p2: itemQuad.p2,
                                            p3: getColinearPointAtDistance(itemQuad.p2, itemQuad.p3, baseSize),
                                            p4: getColinearPointAtDistance(itemQuad.p1, itemQuad.p4, baseSize),
                                          };

  drawItemBaseSize(highlight, itemQuad, baseSizeQuad, context, emulationScaleFactor);
  drawFlexibilityArrow(highlight, itemQuad, baseSizeQuad, context, emulationScaleFactor);
}

function drawItemBaseSize(
    highlight: FlexItemHighlight, itemQuad: Quad, baseSizeQuad: Quad, context: CanvasRenderingContext2D,
    emulationScaleFactor: number) {
  const config = highlight.flexItemHighlightConfig;

  const bounds = emptyBounds();
  const path = buildPath(quadToPath(baseSizeQuad), bounds, emulationScaleFactor);

  // Fill the base size box.
  const angle = Math.atan2(itemQuad.p4.y - itemQuad.p1.y, itemQuad.p4.x - itemQuad.p1.x) + (Math.PI * 45 / 180);
  fillPathWithBoxStyle(context, path, bounds, angle, config.baseSizeBox);

  // Draw the base size border.
  drawPathWithLineStyle(context, path, config.baseSizeBorder);
}

function drawFlexibilityArrow(
    highlight: FlexItemHighlight, itemQuad: Quad, baseSizeQuad: Quad, context: CanvasRenderingContext2D,
    emulationScaleFactor: number) {
  const {isHorizontalFlow} = highlight;
  const config = highlight.flexItemHighlightConfig;

  if (!config.flexibilityArrow) {
    return;
  }

  // Figure out where the arrow should start and end.
  const from = isHorizontalFlow ? {
    x: (baseSizeQuad.p2.x + baseSizeQuad.p3.x) / 2,
    y: (baseSizeQuad.p2.y + baseSizeQuad.p3.y) / 2,
  } :
                                  {
                                    x: (baseSizeQuad.p4.x + baseSizeQuad.p3.x) / 2,
                                    y: (baseSizeQuad.p4.y + baseSizeQuad.p3.y) / 2,
                                  };

  const to = isHorizontalFlow ? {
    x: (itemQuad.p2.x + itemQuad.p3.x) / 2,
    y: (itemQuad.p2.y + itemQuad.p3.y) / 2,
  } :
                                {
                                  x: (itemQuad.p4.x + itemQuad.p3.x) / 2,
                                  y: (itemQuad.p4.y + itemQuad.p3.y) / 2,
                                };

  if (to.x === from.x && to.y === from.y) {
    return;
  }
  // Draw the arrow line.
  const path = segmentToPath([from, to]);
  drawPathWithLineStyle(
      context, buildPath(path, emptyBounds(), emulationScaleFactor), config.flexibilityArrow,
      FLEXIBILITY_ARROW_THICKNESS);

  if (!config.flexibilityArrow.color) {
    return;
  }

  // Draw the tip of the arrow.
  const tipPath = buildPath(
      [
        'M',
        to.x - FLEXIBILITY_ARROW_TIP_SIZE,
        to.y - FLEXIBILITY_ARROW_TIP_SIZE,
        'L',
        to.x,
        to.y,
        'L',
        to.x - FLEXIBILITY_ARROW_TIP_SIZE,
        to.y + FLEXIBILITY_ARROW_TIP_SIZE,
      ],
      emptyBounds(), emulationScaleFactor);

  const angle = Math.atan2(to.y - from.y, to.x - from.x);
  context.save();
  context.translate(to.x + .5, to.y + .5);
  context.rotate(angle);
  context.translate(-to.x - .5, -to.y - .5);

  drawPathWithLineStyle(context, tipPath, config.flexibilityArrow, FLEXIBILITY_ARROW_THICKNESS);

  context.restore();
}

export function drawLayoutFlexContainerHighlight(
    highlight: FlexContainerHighlight, context: CanvasRenderingContext2D, deviceScaleFactor: number,
    canvasWidth: number, canvasHeight: number, emulationScaleFactor: number) {
  const config = highlight.flexContainerHighlightConfig;
  const bounds = emptyBounds();
  const borderPath = buildPath(highlight.containerBorder, bounds, emulationScaleFactor);
  const {isHorizontalFlow, isReverse, lines} = highlight;
  drawPathWithLineStyle(context, borderPath, config.containerBorder);

  // If there are no lines, bail out now.
  if (!lines || !lines.length) {
    return;
  }

  // Process the item paths we received from the backend into quads we can use to draw what we need.
  const lineQuads = getLinesAndItemsQuads(highlight.containerBorder, lines, isHorizontalFlow, isReverse);

  // Draw lines and items.
  drawFlexLinesAndItems(highlight, context, emulationScaleFactor, lineQuads, isHorizontalFlow);

  // Draw the hatching pattern outside of items.
  drawFlexSpace(highlight, context, emulationScaleFactor, highlight.containerBorder, lineQuads);

  // Draw the self-alignment lines and arrows.
  drawFlexAlignment(
      highlight, context, emulationScaleFactor, lineQuads, lines.map(line => line.map(item => item.baseline)));
}

function drawFlexLinesAndItems(
    highlight: FlexContainerHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number,
    lineQuads: LineQuads[], isHorizontalFlow: boolean) {
  const config = highlight.flexContainerHighlightConfig;

  const paths = lineQuads.map((line, lineIndex) => {
    const nextLineQuad = lineQuads[lineIndex + 1] && lineQuads[lineIndex + 1].quad;
    return {
      path: isHorizontalFlow ? quadToHorizontalLinesPath(line.quad, nextLineQuad) :
                               quadToVerticalLinesPath(line.quad, nextLineQuad),
      items: line.extendedItems.map((item, itemIndex) => {
        const nextItemQuad = line.extendedItems[itemIndex + 1] && line.extendedItems[itemIndex + 1];
        return isHorizontalFlow ? quadToVerticalLinesPath(item, nextItemQuad) :
                                  quadToHorizontalLinesPath(item, nextItemQuad);
      }),
    };
  });

  // Only draw lines when there's more than 1.
  const drawLines = paths.length > 1;

  for (const {path, items} of paths) {
    for (const itemPath of items) {
      drawPathWithLineStyle(context, buildPath(itemPath, emptyBounds(), emulationScaleFactor), config.itemSeparator);
    }
    if (drawLines) {
      drawPathWithLineStyle(context, buildPath(path, emptyBounds(), emulationScaleFactor), config.lineSeparator);
    }
  }
}

/**
 * Draw the hatching pattern in all of the empty space between items and lines (either due to gaps or content
 * distribution).
 * Space created by content distribution along the cross axis (align-content) appears between flex lines.
 * Space created by content distribution along the main axis (justify-content) appears between flex items.
 * Space created by gap along the cross axis appears between flex lines.
 * Space created by gap along the main axis appears between flex items.
 */
function drawFlexSpace(
    highlight: FlexContainerHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number,
    container: PathCommands, lineQuads: LineQuads[]) {
  const {isHorizontalFlow} = highlight;
  const {mainDistributedSpace, crossDistributedSpace, rowGapSpace, columnGapSpace} =
      highlight.flexContainerHighlightConfig;
  const mainGapSpace = isHorizontalFlow ? columnGapSpace : rowGapSpace;
  const crossGapSpace = isHorizontalFlow ? rowGapSpace : columnGapSpace;

  const drawMainSpace =
      mainDistributedSpace && Boolean(mainDistributedSpace.fillColor || mainDistributedSpace.hatchColor);
  const drawCrossSpace = lineQuads.length > 1 && crossDistributedSpace &&
      Boolean(crossDistributedSpace.fillColor || crossDistributedSpace.hatchColor);
  const drawMainGapSpace = mainGapSpace && Boolean(mainGapSpace.fillColor || mainGapSpace.hatchColor);
  const drawCrossGapSpace =
      lineQuads.length > 1 && crossGapSpace && Boolean(crossGapSpace.fillColor || crossGapSpace.hatchColor);

  const isSameStyle = mainDistributedSpace && crossDistributedSpace && mainGapSpace && crossGapSpace &&
      mainDistributedSpace.fillColor === crossDistributedSpace.fillColor &&
      mainDistributedSpace.hatchColor === crossDistributedSpace.hatchColor &&
      mainDistributedSpace.fillColor === mainGapSpace.fillColor &&
      mainDistributedSpace.hatchColor === mainGapSpace.hatchColor &&
      mainDistributedSpace.fillColor === crossGapSpace.fillColor &&
      mainDistributedSpace.hatchColor === crossGapSpace.hatchColor;

  const containerQuad = rectPathToQuad(container);

  // Start with the case where we want to draw all types of space, with the same style. This is important because it's
  // a common case that we can optimize by drawing in one go, and therefore avoiding having visual offsets between
  // mutliple hatch patterns.
  if (isSameStyle) {
    // Draw in one go by constructing a path that covers the entire container but punches holes where items are.
    const allItemQuads = lineQuads.map(line => line.extendedItems).flat().map(item => item);
    drawFlexSpaceInQuad(containerQuad, allItemQuads, mainDistributedSpace, context, emulationScaleFactor);
    return;
  }

  // Compute quads for the gaps between lines and items, if any. This will be useful when drawing the flex space.
  const gapQuads = getGapQuads(highlight, lineQuads);

  if (drawCrossSpace) {
    // For cross-space we draw a path that covers everything.
    const quadsToClip = [
      // But we clip holes where lines are.
      ...lineQuads.map(line => line.quad),
      // And also clip holds where gaps are, if those are also drawn.
      ...(drawCrossGapSpace ? gapQuads.crossGaps : []),
    ];
    drawFlexSpaceInQuad(containerQuad, quadsToClip, crossDistributedSpace, context, emulationScaleFactor);
  }

  if (drawMainSpace) {
    // Main space is draw per flex line.
    for (const [index, line] of lineQuads.entries()) {
      // For main-space, we draw a path that covers each line.
      const quadsToClip = [
        // But we clip holes were items on the lines are.
        ...line.extendedItems,
        // And where gaps are, if those are also drawn.
        ...(drawMainGapSpace ? gapQuads.mainGaps[index] : []),
      ];
      drawFlexSpaceInQuad(line.quad, quadsToClip, mainDistributedSpace, context, emulationScaleFactor);
    }
  }

  if (drawCrossGapSpace) {
    for (const quad of gapQuads.crossGaps) {
      drawFlexSpaceInQuad(quad, [], crossGapSpace, context, emulationScaleFactor);
    }
  }

  if (drawMainGapSpace) {
    for (const line of gapQuads.mainGaps) {
      for (const quad of line) {
        drawFlexSpaceInQuad(quad, [], mainGapSpace, context, emulationScaleFactor);
      }
    }
  }
}

function drawFlexAlignment(
    highlight: FlexContainerHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number,
    lineQuads: LineQuads[], itemBaselines: number[][]) {
  lineQuads.forEach(({quad, items}, i) => {
    drawFlexAlignmentForLine(highlight, context, emulationScaleFactor, quad, items, itemBaselines[i]);
  });
}

function drawFlexAlignmentForLine(
    highlight: FlexContainerHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number, lineQuad: Quad,
    itemQuads: Quad[], itemBaselines: number[]) {
  const {alignItemsStyle, isHorizontalFlow} = highlight;
  const {crossAlignment} = highlight.flexContainerHighlightConfig;
  if (!crossAlignment || !crossAlignment.color) {
    return;
  }

  // Note that the order of the 2 points in the array matters as it is used to determine where the arrow will be drawn.
  //
  // first                second
  // point                point
  //   o--------------------o
  //             ^
  //             |
  //           arrow
  //
  //
  //           arrow
  // second      |        first
  // point       V        point
  //   o--------------------o
  const linesToDraw: [Position, Position][] = [];

  switch (alignItemsStyle) {
    case 'flex-start':
      linesToDraw.push([
        isHorizontalFlow ? lineQuad.p1 : lineQuad.p4,
        isHorizontalFlow ? lineQuad.p2 : lineQuad.p1,
      ]);
      break;
    case 'flex-end':
      linesToDraw.push([
        isHorizontalFlow ? lineQuad.p3 : lineQuad.p2,
        isHorizontalFlow ? lineQuad.p4 : lineQuad.p3,
      ]);
      break;
    case 'center':
      if (isHorizontalFlow) {
        linesToDraw.push([
          {
            x: (lineQuad.p1.x + lineQuad.p4.x) / 2,
            y: (lineQuad.p1.y + lineQuad.p4.y) / 2,
          },
          {
            x: (lineQuad.p2.x + lineQuad.p3.x) / 2,
            y: (lineQuad.p2.y + lineQuad.p3.y) / 2,
          },
        ]);
        linesToDraw.push([
          {
            x: (lineQuad.p2.x + lineQuad.p3.x) / 2,
            y: (lineQuad.p2.y + lineQuad.p3.y) / 2,
          },
          {
            x: (lineQuad.p1.x + lineQuad.p4.x) / 2,
            y: (lineQuad.p1.y + lineQuad.p4.y) / 2,
          },
        ]);
      } else {
        linesToDraw.push([
          {
            x: (lineQuad.p1.x + lineQuad.p2.x) / 2,
            y: (lineQuad.p1.y + lineQuad.p2.y) / 2,
          },
          {
            x: (lineQuad.p3.x + lineQuad.p4.x) / 2,
            y: (lineQuad.p3.y + lineQuad.p4.y) / 2,
          },
        ]);
        linesToDraw.push([
          {
            x: (lineQuad.p3.x + lineQuad.p4.x) / 2,
            y: (lineQuad.p3.y + lineQuad.p4.y) / 2,
          },
          {
            x: (lineQuad.p1.x + lineQuad.p2.x) / 2,
            y: (lineQuad.p1.y + lineQuad.p2.y) / 2,
          },
        ]);
      }
      break;
    case 'stretch':
    case 'normal':
      linesToDraw.push([
        isHorizontalFlow ? lineQuad.p1 : lineQuad.p4,
        isHorizontalFlow ? lineQuad.p2 : lineQuad.p1,
      ]);
      linesToDraw.push([
        isHorizontalFlow ? lineQuad.p3 : lineQuad.p2,
        isHorizontalFlow ? lineQuad.p4 : lineQuad.p3,
      ]);
      break;
    case 'baseline':
      // Baseline alignment only works in horizontal direction.
      if (isHorizontalFlow) {
        // We know the baseline for each item, it's an offset value from the top of the item's quad box.
        // If align-items:baseline is applied to the container, then all of the items' baselines are aligned and we can
        // just use the first item's baseline to draw the alignment line we need.
        // Any item may, however, override its own self-alignment with align-self. We don't know if some items are
        // aligned differently, or if no items at all inherit from the container's align-items:baseline property, so in
        // theory, drawing the alignment line is impossible.
        // That said, in situations where align-items:baseline is used, it is safe to assume that most (if not all) of
        // the items are actually using this alignment value.
        // Given this, we still draw the alignment line using the first item's baseline value.
        const itemQuad = itemQuads[0];

        const start = intersectSegments([itemQuad.p1, itemQuad.p2], [lineQuad.p2, lineQuad.p3]);
        const end = intersectSegments([itemQuad.p1, itemQuad.p2], [lineQuad.p1, lineQuad.p4]);

        const baseline = itemBaselines[0];
        const angle = Math.atan2(itemQuad.p4.y - itemQuad.p1.y, itemQuad.p4.x - itemQuad.p1.x);

        linesToDraw.push([
          {
            x: start.x + (baseline * Math.cos(angle)),
            y: start.y + (baseline * Math.sin(angle)),
          },
          {
            x: end.x + (baseline * Math.cos(angle)),
            y: end.y + (baseline * Math.sin(angle)),
          },
        ]);
      }
      break;
  }

  for (const points of linesToDraw) {
    const path = segmentToPath(points);
    drawPathWithLineStyle(
        context, buildPath(path, emptyBounds(), emulationScaleFactor), crossAlignment, ALIGNMENT_LINE_THICKNESS);
    drawAlignmentArrow(highlight, context, emulationScaleFactor, points[0], points[1]);
  }
}

/**
 * Draw an arrow pointed at the middle of a segment. The segment isn't necessarily vertical or horizontal.
 *
 * start          C             end
 *  o-------------x--------------o
 *               / \
 *              /   \
 *             /_   _\
 *               | |
 *               |_|
 */
function drawAlignmentArrow(
    highlight: FlexContainerHighlight, context: CanvasRenderingContext2D, emulationScaleFactor: number,
    startPoint: Position, endPoint: Position) {
  const {crossAlignment} = highlight.flexContainerHighlightConfig;
  if (!crossAlignment || !crossAlignment.color) {
    return;
  }

  // The angle of the segment.
  const angle = Math.atan2(endPoint.y - startPoint.y, endPoint.x - startPoint.x);

  // Where the tip of the arrow meets the segment, plus some offset so they don't overlap.
  const C = {
    x: (-ALIGNMENT_ARROW_DISTANCE_FROM_LINE * Math.cos(angle - .5 * Math.PI)) + ((startPoint.x + endPoint.x) / 2),
    y: (-ALIGNMENT_ARROW_DISTANCE_FROM_LINE * Math.sin(angle - .5 * Math.PI)) + ((startPoint.y + endPoint.y) / 2),
  };

  const path = buildPath(
      [
        'M',
        C.x,
        C.y,
        'L',
        C.x + (ALIGNMENT_ARROW_TIP_WIDTH / 2),
        C.y + ALIGNMENT_ARROW_TIP_HEIGHT,
        'L',
        C.x + (ALIGNMENT_ARROW_BODY_WIDTH / 2),
        C.y + ALIGNMENT_ARROW_TIP_HEIGHT,
        'L',
        C.x + (ALIGNMENT_ARROW_BODY_WIDTH / 2),
        C.y + ALIGNMENT_ARROW_TIP_HEIGHT + ALIGNMENT_ARROW_BODY_HEIGHT,
        'L',
        C.x - (ALIGNMENT_ARROW_BODY_WIDTH / 2),
        C.y + ALIGNMENT_ARROW_TIP_HEIGHT + ALIGNMENT_ARROW_BODY_HEIGHT,
        'L',
        C.x - (ALIGNMENT_ARROW_BODY_WIDTH / 2),
        C.y + ALIGNMENT_ARROW_TIP_HEIGHT,
        'L',
        C.x - (ALIGNMENT_ARROW_TIP_WIDTH / 2),
        C.y + ALIGNMENT_ARROW_TIP_HEIGHT,
        'Z',
      ],
      emptyBounds(), emulationScaleFactor);

  context.save();
  context.translate(C.x, C.y);
  context.rotate(angle);
  context.translate(-C.x, -C.y);

  context.fillStyle = crossAlignment.color;
  context.fill(path);

  context.lineWidth = 1;
  context.strokeStyle = 'white';
  context.stroke(path);

  context.restore();
}

function drawFlexSpaceInQuad(
    outerQuad: Quad, quadsToClip: Quad[], boxStyle: BoxStyle|undefined, context: CanvasRenderingContext2D,
    emulationScaleFactor: number) {
  if (!boxStyle) {
    return;
  }

  if (boxStyle.fillColor) {
    const bounds = emptyBounds();
    const path = createPathForQuad(outerQuad, quadsToClip, bounds, emulationScaleFactor);
    context.fillStyle = boxStyle.fillColor;
    context.fill(path);
  }

  if (boxStyle.hatchColor) {
    const angle = Math.atan2(outerQuad.p2.y - outerQuad.p1.y, outerQuad.p2.x - outerQuad.p1.x) * 180 / Math.PI;
    const bounds = emptyBounds();
    const path = createPathForQuad(outerQuad, quadsToClip, bounds, emulationScaleFactor);
    hatchFillPath(context, path, bounds, 10, boxStyle.hatchColor, angle, false);
  }
}

/**
 * We get a list of paths for each flex item from the backend. From this list, we compute the resulting paths for each
 * flex line too (making it span the entire container size (in the main direction)). We also process the item path so
 * they span the entire flex line size (in the cross direction).
 *
 * @param container
 * @param lines
 * @param isHorizontalFlow
 */
export function getLinesAndItemsQuads(
    container: PathCommands, lines: FlexLinesData, isHorizontalFlow: boolean, isReverse: boolean): LineQuads[] {
  const containerQuad = rectPathToQuad(container);

  // Create a quad for each line that's as big as the items it contains and extends to the edges of the container in the
  // main direction.
  const lineQuads: LineQuads[] = [];
  for (const line of lines) {
    if (!line.length) {
      continue;
    }

    let lineQuad = rectPathToQuad(line[0].itemBorder);
    const itemQuads: Quad[] = [];
    for (const {itemBorder} of line) {
      const itemQuad = rectPathToQuad(itemBorder);
      lineQuad = !lineQuad ? itemQuad : uniteQuads(lineQuad, itemQuad, isHorizontalFlow, isReverse);
      itemQuads.push(itemQuad);
    }

    const extendedLineQuad =
        lines.length === 1 ? containerQuad : growQuadToEdgesOf(lineQuad, containerQuad, isHorizontalFlow);
    const extendItemQuads = itemQuads.map(itemQuad => growQuadToEdgesOf(itemQuad, extendedLineQuad, !isHorizontalFlow));

    lineQuads.push({
      quad: extendedLineQuad,
      items: itemQuads,
      extendedItems: extendItemQuads,
    });
  }

  return lineQuads;
}

export function getGapQuads(
    highlight: Pick<FlexContainerHighlight, 'crossGap'|'mainGap'|'isHorizontalFlow'|'isReverse'>,
    lineQuads: LineQuads[]): GapQuads {
  const {crossGap, mainGap, isHorizontalFlow, isReverse} = highlight;
  const mainGaps: Quad[][] = [];
  const crossGaps: Quad[] = [];

  if (crossGap && lineQuads.length > 1) {
    for (let i = 0, j = i + 1; i < lineQuads.length - 1; i++, j = i + 1) {
      const line1 = lineQuads[i].quad;
      const line2 = lineQuads[j].quad;

      crossGaps.push(getGapQuadBetweenQuads(line1, line2, crossGap, isHorizontalFlow));
    }
  }

  for (const {extendedItems} of lineQuads) {
    const lineGapQuads = [];
    if (mainGap) {
      for (let i = 0, j = i + 1; i < extendedItems.length - 1; i++, j = i + 1) {
        const item1 = extendedItems[i];
        const item2 = extendedItems[j];

        lineGapQuads.push(getGapQuadBetweenQuads(item1, item2, mainGap, !isHorizontalFlow, isReverse));
      }
    }
    mainGaps.push(lineGapQuads);
  }

  return {mainGaps, crossGaps};
}

/**
 * Create a quad for the gap that exists between 2 quads.
 *
 * +-------+   +-+   +-------+
 * | quad1 |   |/|   | quad2 |
 * +-------+   +-+   +-------+
 *           gap quad
 *
 * @param quad1
 * @param quad2
 * @param size The size of the gap between the 2 quads
 * @param vertically whether the 2 quads are stacked vertically (quad1 above quad2), or horizontally (quad1 left of
 * quad2)
 * @param isReverse whether the direction is reversed (quad1 below quad2 or quad1 right of quad2)
 */
export function getGapQuadBetweenQuads(
    quad1: Quad, quad2: Quad, size: number, vertically: boolean, isReverse?: boolean) {
  if (isReverse) {
    [quad1, quad2] = [quad2, quad1];
  }
  const angle = vertically ? Math.atan2(quad1.p4.y - quad1.p1.y, quad1.p4.x - quad1.p1.x) :
                             Math.atan2(quad1.p2.y - quad1.p1.y, quad1.p2.x - quad1.p1.x);
  const d = vertically ? distance(quad1.p4, quad2.p1) : distance(quad1.p2, quad2.p1);
  const startOffset = (d / 2) - (size / 2);
  const endOffset = (d / 2) + (size / 2);

  return vertically ? {
    p1: {
      x: Math.round(quad1.p4.x + (startOffset * Math.cos(angle))),
      y: Math.round(quad1.p4.y + (startOffset * Math.sin(angle))),
    },
    p2: {
      x: Math.round(quad1.p3.x + (startOffset * Math.cos(angle))),
      y: Math.round(quad1.p3.y + (startOffset * Math.sin(angle))),
    },
    p3: {
      x: Math.round(quad1.p3.x + (endOffset * Math.cos(angle))),
      y: Math.round(quad1.p3.y + (endOffset * Math.sin(angle))),
    },
    p4: {
      x: Math.round(quad1.p4.x + (endOffset * Math.cos(angle))),
      y: Math.round(quad1.p4.y + (endOffset * Math.sin(angle))),
    },
  } :
                      {
                        p1: {
                          x: Math.round(quad1.p2.x + (startOffset * Math.cos(angle))),
                          y: Math.round(quad1.p2.y + (startOffset * Math.sin(angle))),
                        },
                        p2: {
                          x: Math.round(quad1.p2.x + (endOffset * Math.cos(angle))),
                          y: Math.round(quad1.p2.y + (endOffset * Math.sin(angle))),
                        },
                        p3: {
                          x: Math.round(quad1.p3.x + (endOffset * Math.cos(angle))),
                          y: Math.round(quad1.p3.y + (endOffset * Math.sin(angle))),
                        },
                        p4: {
                          x: Math.round(quad1.p3.x + (startOffset * Math.cos(angle))),
                          y: Math.round(quad1.p3.y + (startOffset * Math.sin(angle))),
                        },
                      };
}

function quadToHorizontalLinesPath(quad: Quad, nextQuad: Quad|undefined): PathCommands {
  const skipEndLine = nextQuad && quad.p4.y === nextQuad.p1.y;
  const startLine = ['M', quad.p1.x, quad.p1.y, 'L', quad.p2.x, quad.p2.y];
  return skipEndLine ? startLine : [...startLine, 'M', quad.p3.x, quad.p3.y, 'L', quad.p4.x, quad.p4.y];
}

function quadToVerticalLinesPath(quad: Quad, nextQuad: Quad|undefined): PathCommands {
  const skipEndLine = nextQuad && quad.p2.x === nextQuad.p1.x;
  const startLine = ['M', quad.p1.x, quad.p1.y, 'L', quad.p4.x, quad.p4.y];
  return skipEndLine ? startLine : [...startLine, 'M', quad.p3.x, quad.p3.y, 'L', quad.p2.x, quad.p2.y];
}

function quadToPath(quad: Quad): PathCommands {
  return [
    'M',
    quad.p1.x,
    quad.p1.y,
    'L',
    quad.p2.x,
    quad.p2.y,
    'L',
    quad.p3.x,
    quad.p3.y,
    'L',
    quad.p4.x,
    quad.p4.y,
    'Z',
  ];
}

function segmentToPath(segment: [Position, Position]): PathCommands {
  return ['M', segment[0].x, segment[0].y, 'L', segment[1].x, segment[1].y];
}

/**
 * Transform a path array (as returned by the backend) that corresponds to a rectangle into a quad.
 * @param commands
 * @return The quad object
 */
function rectPathToQuad(commands: PathCommands): Quad {
  return {
    p1: {x: commands[1] as number, y: commands[2] as number},
    p2: {x: commands[4] as number, y: commands[5] as number},
    p3: {x: commands[7] as number, y: commands[8] as number},
    p4: {x: commands[10] as number, y: commands[11] as number},
  };
}

/**
 * Get a quad that bounds the provided 2 quads.
 * This only works if both quads have their respective sides parallel to eachother.
 * Note that it is more complicated because rectangles can be transformed (i.e. their sides aren't necessarily parallel
 * to the x and y axes).
 * @param quad1
 * @param quad2
 * @param isHorizontalFlow
 * @param isReverse
 */
export function uniteQuads(quad1: Quad, quad2: Quad, isHorizontalFlow: boolean, isReverse: boolean): Quad {
  if (isReverse) {
    [quad1, quad2] = [quad2, quad1];
  }

  const mainStartSegment = isHorizontalFlow ? [quad1.p1, quad1.p4] : [quad1.p1, quad1.p2];
  const mainEndSegment = isHorizontalFlow ? [quad2.p2, quad2.p3] : [quad2.p4, quad2.p3];

  const crossStartSegment1 = isHorizontalFlow ? [quad1.p1, quad1.p2] : [quad1.p1, quad1.p4];
  const crossEndSegment1 = isHorizontalFlow ? [quad1.p4, quad1.p3] : [quad1.p2, quad1.p3];

  const crossStartSegment2 = isHorizontalFlow ? [quad2.p1, quad2.p2] : [quad2.p1, quad2.p4];
  const crossEndSegment2 = isHorizontalFlow ? [quad2.p4, quad2.p3] : [quad2.p2, quad2.p3];

  let p1, p2, p3, p4;

  if (isHorizontalFlow) {
    p1 = intersectSegments(mainStartSegment, crossStartSegment2);
    if (segmentContains(mainStartSegment, p1)) {
      p1 = quad1.p1;
    }

    p2 = intersectSegments(mainEndSegment, crossStartSegment1);
    if (segmentContains(mainEndSegment, p2)) {
      p2 = quad2.p2;
    }

    p3 = intersectSegments(mainEndSegment, crossEndSegment1);
    if (segmentContains(mainEndSegment, p3)) {
      p3 = quad2.p3;
    }

    p4 = intersectSegments(mainStartSegment, crossEndSegment2);
    if (segmentContains(mainStartSegment, p4)) {
      p4 = quad1.p4;
    }
  } else {
    p1 = intersectSegments(mainStartSegment, crossStartSegment2);
    if (segmentContains(mainStartSegment, p1)) {
      p1 = quad1.p1;
    }

    p2 = intersectSegments(mainStartSegment, crossEndSegment2);
    if (segmentContains(mainStartSegment, p2)) {
      p2 = quad1.p2;
    }

    p3 = intersectSegments(mainEndSegment, crossEndSegment1);
    if (segmentContains(mainEndSegment, p3)) {
      p3 = quad2.p3;
    }

    p4 = intersectSegments(mainEndSegment, crossStartSegment1);
    if (segmentContains(mainEndSegment, p4)) {
      p4 = quad2.p4;
    }
  }

  return {p1, p2, p3, p4};
}

/**
 * Given 2 quads, with one being contained inside the other, grow the inner one, along one direction, so it ends up
 * flush aginst the outer one.
 * @param innerQuad
 * @param outerQuad
 * @param horizontally The direction to grow the inner quad along
 */
export function growQuadToEdgesOf(innerQuad: Quad, outerQuad: Quad, horizontally: boolean): Quad {
  return {
    p1: horizontally ? intersectSegments([outerQuad.p1, outerQuad.p4], [innerQuad.p1, innerQuad.p2]) :
                       intersectSegments([outerQuad.p1, outerQuad.p2], [innerQuad.p1, innerQuad.p4]),
    p2: horizontally ? intersectSegments([outerQuad.p2, outerQuad.p3], [innerQuad.p1, innerQuad.p2]) :
                       intersectSegments([outerQuad.p1, outerQuad.p2], [innerQuad.p2, innerQuad.p3]),
    p3: horizontally ? intersectSegments([outerQuad.p2, outerQuad.p3], [innerQuad.p3, innerQuad.p4]) :
                       intersectSegments([outerQuad.p3, outerQuad.p4], [innerQuad.p2, innerQuad.p3]),
    p4: horizontally ? intersectSegments([outerQuad.p1, outerQuad.p4], [innerQuad.p3, innerQuad.p4]) :
                       intersectSegments([outerQuad.p3, outerQuad.p4], [innerQuad.p1, innerQuad.p4]),
  };
}

/**
 * Return the x/y intersection of the 2 segments
 * @param segment1
 * @param segment2
 * @return the point where the segments intersect
 */
export function intersectSegments([p1, p2]: Position[], [p3, p4]: Position[]): Position {
  const x = (((p1.x * p2.y - p1.y * p2.x) * (p3.x - p4.x)) - ((p1.x - p2.x) * (p3.x * p4.y - p3.y * p4.x))) /
      (((p1.x - p2.x) * (p3.y - p4.y)) - (p1.y - p2.y) * (p3.x - p4.x));
  const y = (((p1.x * p2.y - p1.y * p2.x) * (p3.y - p4.y)) - ((p1.y - p2.y) * (p3.x * p4.y - p3.y * p4.x))) /
      (((p1.x - p2.x) * (p3.y - p4.y)) - (p1.y - p2.y) * (p3.x - p4.x));

  return {
    x: Object.is(x, -0) ? 0 : x,
    y: Object.is(y, -0) ? 0 : y,
  };
}

/**
 * Does the provided segment contain the provided point
 * @param segment
 * @param point
 */
export function segmentContains([p1, p2]: Position[], point: Position): boolean {
  if (p1.x < p2.x && (point.x < p1.x || point.x > p2.x)) {
    return false;
  }

  if (p1.x > p2.x && (point.x > p1.x || point.x < p2.x)) {
    return false;
  }

  if (p1.y < p2.y && (point.y < p1.y || point.y > p2.y)) {
    return false;
  }

  if (p1.y > p2.y && (point.y > p1.y || point.y < p2.y)) {
    return false;
  }

  return (point.y - p1.y) * (p2.x - p1.x) === (p2.y - p1.y) * (point.x - p1.x);
}

export function distance(p1: Position, p2: Position) {
  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}

export function getColinearPointAtDistance(p1: Position, p2: Position, distance: number): Position {
  const slope = (p2.y - p1.y) / (p2.x - p1.x);
  const angle = Math.atan(slope);
  return {
    x: p1.x + distance * Math.cos(angle),
    y: p1.y + distance * Math.sin(angle),
  };
}