feat: support repeating-linear-gradient (#630)

Now that #624 has been merged, let me bring`repeating-linear-gradient`
to satori~ ❤️

Close #554

Note about the algorithm:
<hr>

Option 1: `0 < deg < 90`

define

```math
r=(h/w)^2
```
then, calculate the intersection point of the last two lines
```math
y = - r / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x + h
```
Finally, we can get `(x1, y1)`, `(x2, y2)`

about length:
```math
y = - 1 / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x + h
```

then, we can get a point: `(a, b)`, so length is $`2 ·\sqrt{(a - w/2)^2
+ (b - h/2)^2}`$

<hr>

Option 2: `90 < deg < 180`

define

```math
r=(h/w)^2
```
then, calculate the intersection point of the last two lines
```math
y = - r / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x
```
Finally, we can get `(x1, y1)`, `(x2, y2)`

about length:
```math
y = - 1 / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x
```

then, we can get a point: `(a, b)`, so length is $`2 ·\sqrt{(a - w/2)^2
+ (b - h/2)^2}`$

Actually, I didn't find any spec of the algorithm on calculating the
points. I just came across the algorithm accidentally. It turns out it
shows the same result just like chrome renders.

src/builder/background-image.ts

@@ -88,7 +88,10 @@ export default async function backgroundImage(
     defaultY: 0,
   })
 
-  if (image.startsWith('linear-gradient(')) {
+  if (
+    image.startsWith('linear-gradient(') ||
+    image.startsWith('repeating-linear-gradient(')
+  ) {
     return buildLinearGradient(
       { id, width, height, repeatX, repeatY },
       image,

src/builder/gradient/linear.ts

@@ -1,6 +1,6 @@
-import { parseLinearGradient } from 'css-gradient-parser'
+import { parseLinearGradient, ColorStop } from 'css-gradient-parser'
 import { normalizeStops } from './utils.js'
-import { buildXMLString, calcDegree } from '../../utils.js'
+import { buildXMLString, calcDegree, lengthToNumber } from '../../utils.js'
 
 export function buildLinearGradient(
   {
@@ -24,90 +24,44 @@ export function buildLinearGradient(
 ) {
   const parsed = parseLinearGradient(image)
   const [imageWidth, imageHeight] = dimensions
+  const repeating = image.startsWith('repeating')
 
   // Calculate the direction.
-  let x1, y1, x2, y2, length
+  let points, length, xys
 
   if (parsed.orientation.type === 'directional') {
-    ;[x1, y1, x2, y2] = resolveXYFromDirection(parsed.orientation.value)
+    points = resolveXYFromDirection(parsed.orientation.value)
 
     length = Math.sqrt(
-      Math.pow((x2 - x1) * imageWidth, 2) + Math.pow((y2 - y1) * imageHeight, 2)
+      Math.pow((points.x2 - points.x1) * imageWidth, 2) +
+        Math.pow((points.y2 - points.y1) * imageHeight, 2)
     )
   } else if (parsed.orientation.type === 'angular') {
-    const EPS = 0.000001
-    const r = imageWidth / imageHeight
-
-    function calc(angle) {
-      angle = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2)
-
-      if (Math.abs(angle - Math.PI / 2) < EPS) {
-        x1 = 0
-        y1 = 0
-        x2 = 1
-        y2 = 0
-        length = imageWidth
-        return
-      } else if (Math.abs(angle) < EPS) {
-        x1 = 0
-        y1 = 1
-        x2 = 0
-        y2 = 0
-        length = imageHeight
-        return
-      }
-
-      // Assuming 0 <= angle < PI / 2.
-      if (angle >= Math.PI / 2 && angle < Math.PI) {
-        calc(Math.PI - angle)
-        y1 = 1 - y1
-        y2 = 1 - y2
-        return
-      } else if (angle >= Math.PI) {
-        calc(angle - Math.PI)
-        let tmp = x1
-        x1 = x2
-        x2 = tmp
-        tmp = y1
-        y1 = y2
-        y2 = tmp
-        return
-      }
-
-      // Remap SVG distortion
-      const tan = Math.tan(angle)
-      const tanTexture = tan * r
-      const angleTexture = Math.atan(tanTexture)
-      const l = Math.sqrt(2) * Math.cos(Math.PI / 4 - angleTexture)
-      x1 = 0
-      y1 = 1
-      x2 = Math.sin(angleTexture) * l
-      y2 = 1 - Math.cos(angleTexture) * l
-
-      // Get the angle between the distored gradient direction and diagonal.
-      const x = 1
-      const y = 1 / tan
-      const cosA = Math.abs(
-        (x * r + y) / Math.sqrt(x * x + y * y) / Math.sqrt(r * r + 1)
-      )
-
-      // Get the distored gradient length.
-      const diagonal = Math.sqrt(
-        imageWidth * imageWidth + imageHeight * imageHeight
-      )
-      length = diagonal * cosA
-    }
-
-    calc(
+    const { length: l, ...p } = calcNormalPoint(
       (calcDegree(
         `${parsed.orientation.value.value}${parsed.orientation.value.unit}`
       ) /
         180) *
-        Math.PI
+        Math.PI,
+      imageWidth,
+      imageHeight
     )
+
+    length = l
+    points = p
   }
 
-  const stops = normalizeStops(length, parsed.stops, inheritableStyle, from)
+  xys = repeating
+    ? calcPercentage(parsed.stops, length, points, inheritableStyle)
+    : points
+
+  const stops = normalizeStops(
+    length,
+    parsed.stops,
+    inheritableStyle,
+    repeating,
+    from
+  )
 
   const gradientId = `satori_bi${id}`
   const patternId = `satori_pattern_${id}`
@@ -126,10 +80,8 @@ export function buildLinearGradient(
       'linearGradient',
       {
         id: gradientId,
-        x1,
-        y1,
-        x2,
-        y2,
+        ...xys,
+        spreadMethod: repeating ? 'repeat' : 'pad',
       },
       stops
         .map((stop) =>
@@ -173,5 +125,134 @@ function resolveXYFromDirection(dir: string) {
     y1 = 1
   }
 
-  return [x1, y1, x2, y2]
+  return { x1, y1, x2, y2 }
+}
+
+/**
+ * calc start point and end point of linear gradient
+ */
+function calcNormalPoint(v: number, w: number, h: number) {
+  const r = Math.pow(h / w, 2)
+
+  // make sure angle is 0 <= angle <= 360
+  v = ((v % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2)
+
+  let x1, y1, x2, y2, length, tmp, a, b
+
+  const dfs = (angle: number) => {
+    if (angle === 0) {
+      x1 = 0
+      y1 = h
+      x2 = 0
+      y2 = 0
+      length = h
+      return
+    } else if (angle === Math.PI / 2) {
+      x1 = 0
+      y1 = 0
+      x2 = w
+      y2 = 0
+      length = w
+      return
+    }
+    if (angle > 0 && angle < Math.PI / 2) {
+      x1 =
+        ((r * w) / 2 / Math.tan(angle) - h / 2) /
+        (Math.tan(angle) + r / Math.tan(angle))
+      y1 = Math.tan(angle) * x1 + h
+      x2 = Math.abs(w / 2 - x1) + w / 2
+      y2 = h / 2 - Math.abs(y1 - h / 2)
+      length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+      // y = -1 / tan * x = h / 2 +1 / tan * w/2
+      // y = tan * x + h
+      a =
+        (w / 2 / Math.tan(angle) - h / 2) /
+        (Math.tan(angle) + 1 / Math.tan(angle))
+      b = Math.tan(angle) * a + h
+      length = 2 * Math.sqrt(Math.pow(w / 2 - a, 2) + Math.pow(h / 2 - b, 2))
+      return
+    } else if (angle > Math.PI / 2 && angle < Math.PI) {
+      x1 =
+        (h / 2 + (r * w) / 2 / Math.tan(angle)) /
+        (Math.tan(angle) + r / Math.tan(angle))
+      y1 = Math.tan(angle) * x1
+      x2 = Math.abs(w / 2 - x1) + w / 2
+      y2 = h / 2 + Math.abs(y1 - h / 2)
+      // y = -1 / tan * x + h / 2 + 1 / tan * w / 2
+      // y = tan * x
+      a =
+        (w / 2 / Math.tan(angle) + h / 2) /
+        (Math.tan(angle) + 1 / Math.tan(angle))
+      b = Math.tan(angle) * a
+      length = 2 * Math.sqrt(Math.pow(w / 2 - a, 2) + Math.pow(h / 2 - b, 2))
+      return
+    } else if (angle >= Math.PI) {
+      dfs(angle - Math.PI)
+
+      tmp = x1
+      x1 = x2
+      x2 = tmp
+      tmp = y1
+      y1 = y2
+      y2 = tmp
+    }
+  }
+
+  dfs(v)
+
+  return {
+    x1: x1 / w,
+    y1: y1 / h,
+    x2: x2 / w,
+    y2: y2 / h,
+    length,
+  }
+}
+
+function calcPercentage(
+  stops: ColorStop[],
+  length: number,
+  points: {
+    x1: number
+    y1: number
+    x2: number
+    y2: number
+  },
+  inheritableStyle: Record<string, string | number>
+) {
+  const { x1, x2, y1, y2 } = points
+  const p1 = !stops[0].offset
+    ? 0
+    : stops[0].offset.unit === '%'
+    ? Number(stops[0].offset.value) / 100
+    : lengthToNumber(
+        `${stops[0].offset.value}${stops[0].offset.unit}`,
+        inheritableStyle.fontSize as number,
+        length,
+        inheritableStyle,
+        true
+      ) / length
+  const p2 = !stops.at(-1).offset
+    ? 1
+    : stops.at(-1).offset.unit === '%'
+    ? Number(stops.at(-1).offset.value) / 100
+    : lengthToNumber(
+        `${stops.at(-1).offset.value}${stops.at(-1).offset.unit}`,
+        inheritableStyle.fontSize as number,
+        length,
+        inheritableStyle,
+        true
+      ) / length
+
+  const sx = (x2 - x1) * p1 + x1
+  const sy = (y2 - y1) * p1 + y1
+  const ex = (x2 - x1) * p2 + x1
+  const ey = (y2 - y1) * p2 + y1
+
+  return {
+    x1: sx,
+    y1: sy,
+    x2: ex,
+    y2: ey,
+  }
 }

src/builder/gradient/radial.ts

@@ -48,7 +48,7 @@ export function buildRadialGradient(
   cx = pos.x
   cy = pos.y
 
-  const stops = normalizeStops(width, colorStops, inheritableStyle, from)
+  const stops = normalizeStops(width, colorStops, inheritableStyle, false, from)
 
   const gradientId = `satori_radial_${id}`
   const patternId = `satori_pattern_${id}`

src/builder/gradient/utils.ts

@@ -11,6 +11,7 @@ export function normalizeStops(
   totalLength: number,
   colorStops: ColorStop[],
   inheritedStyle: Record<string, string | number>,
+  repeating: boolean,
   from?: 'background' | 'mask'
 ) {
   // Resolve the color stops based on the spec:
@@ -61,6 +62,11 @@ export function normalizeStops(
   if (lastStop.offset !== 1) {
     if (typeof lastStop.offset === 'undefined') {
       lastStop.offset = 1
+    } else if (repeating) {
+      stops[stops.length - 1] = {
+        offset: 1,
+        color: lastStop.color,
+      }
     } else {
       stops.push({
         offset: 1,

src/handler/expand.ts

@@ -164,7 +164,11 @@ function handleSpecialCase(
 
   if (name === 'background') {
     value = value.toString().trim()
-    if (/^(linear-gradient|radial-gradient|url)\(/.test(value)) {
+    if (
+      /^(linear-gradient|radial-gradient|url|repeating-linear-gradient)\(/.test(
+        value
+      )
+    ) {
       return getStylesForProperty('backgroundImage', value, true)
     }
     return getStylesForProperty('background', value, true)