onst startTime = startKeyframe.offset * totalDuration;
      const endTime = endKeyframe.offset * totalDuration;

      const g = dom.g(
        {
          className: "hint",
        },
        dom.title({}, startKeyframe.easing),
        dom.rect({
          x: startTime,
          y: -graphHeight,
          height: graphHeight,
          width: endTime - startTime,
        }),
        dom.line({
          x1: startTime,
          y1: -graphHeight,
          x2: endTime,
          y2: -graphHeight,
          style: {
            "stroke-width": easingHintStrokeWidth,
          },
        })
      );
      hints.push(g);
    }

    return hints;
  }

  /**
   * Overide parent's method.
   */
  renderPathSegments(segments) {
    for (const segment of segments) {
      segment.y = 1;
    }

    const lastSegment = segments[segments.length - 1];
    const id = `color-property-${LINEAR_GRADIENT_ID_COUNT++}`;
    const path = super.renderPathSegments(segments, { fill: `url(#${id})` });
    const linearGradient = dom.linearGradient(
      { id },
      segments.map(segment => {
        return dom.stop({
          stopColor: segment.computedStyle,
          offset: segment.x / lastSegment.x,
        });
      })
    );

    return [path, linearGradient];
  }

  render() {
    return dom.g(
      {
        className: "color-path",
      },
      super.renderGraph()
    );
  }
}

/**
 * Parse given RGBA string.
 *
 * @param {string} propertyName
 * @param {string} colorString
 *        e.g. rgb(0, 0, 0) or rgba(0, 0, 0, 0.5) and so on.
 * @return {object}
 *         RGBA {r: r, g: g, b: b, a: a}.
 */
function getRGBA(propertyName, colorString) {
  // Special handling for CSS property which can specify the not normal CSS color value.
  switch (propertyName) {
    case "caret-color": {
      // This property can specify "auto" keyword.
      if (colorString === "auto") {
        return DEFAULT_COLOR;
      }
      break;
    }
    case "scrollbar-color": {
      // This property can specify "auto", "dark", "light" keywords and multiple colors.
      if (
        ["auto", "dark", "light"].includes(colorString) ||
        colorString.indexOf(" ") > 0
      ) {
        return DEFAULT_COLOR;
      }
      break;
    }
  }

  const color = new colorUtils.CssColor(colorString);
  return color.getRGBATuple();
}

/**
 * Return the distance from give two RGBA.
 *
 * @param {object} rgba1
 *        RGBA (format is same to getRGBA)
 * @param {object} rgba2
 *        RGBA (format is same to getRGBA)
 * @return {number}
 *         The range is 0 - 1.0.
 */
function getRGBADistance(rgba1, rgba2) {
  const startA = rgba1.a;
  const startR = rgba1.r * startA;
  const startG = rgba1.g * startA;
  const startB = rgba1.b * startA;
  const endA = rgba2.a;
  const endR = rgba2.r * endA;
  const endG = rgba2.g * endA;
  const endB = rgba2.b * endA;
  const diffA = startA - endA;
  const diffR = startR - endR;
  const diffG = startG - endG;
  const diffB = startB - endB;
  return Math.sqrt(
    diffA * diffA + diffR * diffR + diffG * diffG + diffB * diffB
  );
}

module.exports = ColorPath;
PK