feat: support xywh

Author: Jackie1210

src/parser/shape.ts

@@ -9,6 +9,7 @@ const regexMap = {
   polygon: /polygon\((.+)\)/,
   inset: /inset\((.+)\)/,
   rect: /rect\((.+)\)/,
+  xywh: /xywh\((.+)\)/,
 }
 
 export function createShapeParser(
@@ -169,22 +170,7 @@ export function createShapeParser(
     const w = width - (offsets[1] + offsets[3])
     const h = height - (offsets[0] + offsets[2])
 
-    if (r.some((v) => v > 0)) {
-      const d = buildBorderRadius(
-        { left: x, top: y, width: w, height: h },
-        { ...style, ...radiusMap }
-      )
-
-      return { type: 'path', d }
-    }
-
-    return {
-      type: 'rect',
-      x,
-      y,
-      width: w,
-      height: h,
-    }
+    return resolveRectLikeShape(r, x, y, w, h, radiusMap, style)
   }
   function parseRect(str: string) {
     const res = str.match(regexMap['rect'])
@@ -223,22 +209,37 @@ export function createShapeParser(
     const w = b - d
     const h = c - a
 
-    if (r.some((v) => v > 0)) {
-      const m = buildBorderRadius(
-        { left: x, top: y, width: w, height: h },
-        { ...style, ...radiusMap }
-      )
+    return resolveRectLikeShape(r, x, y, w, h, radiusMap, style)
+  }
+  function parseXywh(str: string) {
+    const res = str.match(regexMap['xywh'])
 
-      return { type: 'path', d: m }
-    }
+    if (!res) return null
 
-    return {
-      type: 'rect',
-      x,
-      y,
-      width: w,
-      height: h,
-    }
+    const [rect, radius] = splitRound(res[1])
+    const { r, radiusMap } = resolveRadius(
+      radius,
+      width,
+      height,
+      inheritedStyle
+    )
+
+    const [x, y, w, h] = rect
+      .split(' ')
+      .map((s) => String(s))
+      .map((s, i) => {
+        return (
+          lengthToNumber(
+            s,
+            inheritedStyle.fontSize as number,
+            i === 0 || i === 2 ? width : height,
+            inheritedStyle,
+            true
+          ) || 0
+        )
+      })
+
+    return resolveRectLikeShape(r, x, y, w, h, radiusMap, style)
   }
 
   return {
@@ -248,6 +249,7 @@ export function createShapeParser(
     parsePolygon,
     parseInset,
     parseRect,
+    parseXywh,
   }
 }
 
@@ -287,6 +289,33 @@ function resolveFillRule(str: string) {
   return [fillRule, d]
 }
 
+function resolveRectLikeShape(
+  r: number[],
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  radiusMap: Record<string, any>,
+  style: Record<string, string | number>
+) {
+  if (r.some((v) => v > 0)) {
+    const m = buildBorderRadius(
+      { left: x, top: y, width: w, height: h },
+      { ...style, ...radiusMap }
+    )
+
+    return { type: 'path', d: m }
+  }
+
+  return {
+    type: 'rect',
+    x,
+    y,
+    width: w,
+    height: h,
+  }
+}
+
 function resolvePosition(position: string, xDelta: number, yDelta: number) {
   const pos = position.split(' ')
   const res: { x: number | string; y: number | string } = {

test/__image_snapshots__/clip-path-test-tsx-test-clip-path-test-tsx-clip-path-should-render-shape-for-xywh-1-snap.png

@@ -187,4 +187,29 @@ describe('clipPath', () => {
     )
     expect(toImage(svg)).toMatchImageSnapshot()
   })
+
+  it('should render shape for xywh', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          clipPath: 'xywh(5px 5px 30% 20% round 5px)',
+          fontSize: 32,
+          fontWeight: 600,
+        }}
+      ></div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+    expect(toImage(svg)).toMatchImageSnapshot()
+  })
 })