🐛 fix: Fix line-gradient parse

Author: arvinxx

src/model/type.ts

@@ -15,6 +15,14 @@ import SymbolMaster from './Layer/SymbolMaster';
  */
 export interface FrameInitParams extends Partial<FrameType> {}
 
+/**
+ * 节点的背景颜色类型
+ */
+export type BackgroundImageType = {
+  type: 'Image' | 'LinearGradient';
+  value: any;
+};
+
 /**
  * 定界框类型
  */

src/utils/__tests__/background.spec.ts

@@ -1,4 +1,9 @@
-import { getActualImageSize } from '../background';
+import { BackgroundImageType } from 'html2sketch';
+import {
+  getActualImageSize,
+  parseBackgroundImage,
+  parseLinearGradient,
+} from '../background';
 
 describe('getActualImageSize', () => {
   test('background-size: contain', () => {
@@ -153,3 +158,57 @@ describe('getActualImageSize', () => {
     });
   });
 });
+
+describe('parseBackgroundImage', () => {
+  describe('渐变', () => {
+    it('解析三种颜色', () => {
+      const str = 'linear-gradient(red, yellow, blue)';
+      const result = parseBackgroundImage(str) as BackgroundImageType;
+      expect(result.type).toStrictEqual('LinearGradient');
+    });
+  });
+});
+
+describe('parseLinearGradient', () => {
+  it('解析两种颜色', () => {
+    const str = 'red, yellow';
+    const result = parseLinearGradient(str);
+    expect(result).toStrictEqual({
+      stops: ['red', 'yellow'],
+      angle: '180deg',
+    });
+  });
+  it('解析 to 类型的方向', () => {
+    const str = 'to right, rgba(255,0,0,0), rgba(255,0,0,1)';
+    const result = parseLinearGradient(str);
+    expect(result).toStrictEqual({
+      stops: ['rgba(255,0,0,0)', 'rgba(255,0,0,1)'],
+      angle: 'to right',
+    });
+  });
+  it('解析deg 类型的方向', () => {
+    const str = '90deg, red, blue';
+    const result = parseLinearGradient(str);
+    expect(result).toStrictEqual({
+      stops: ['red', 'blue'],
+      angle: '90deg',
+    });
+  });
+  it('解析三种颜色', () => {
+    const str = 'red, yellow, blue';
+    const result = parseLinearGradient(str);
+    expect(result).toStrictEqual({
+      stops: ['red', 'yellow', 'blue'],
+      angle: '180deg',
+    });
+  });
+
+  it('解析多种颜色', () => {
+    const str = 'to left,red, yellow, blue,green';
+    const result = parseLinearGradient(str);
+    expect(result).toStrictEqual({
+      stops: ['red', 'yellow', 'blue', 'green'],
+      angle: 'to left',
+    });
+  });
+});

src/utils/background.ts

@@ -1,16 +1,23 @@
-// Parser for a linear gradient:
-// ---
-// <linear-gradient> = linear-gradient(
-//   [ [ <angle> | to <side-or-corner> ] ,]?
-//   <color-stop>[, <color-stop>]+
-// )
-//
-// <side-or-corner> = [left | right] || [top | bottom]
-// ---
-// Source: https://www.w3.org/TR/css3-images/#linear-gradients
-// ---
-// Example: "to top, rgba(67, 90, 111, 0.04), white"
-const parseLinearGradient = (value: string) => {
+import { BackgroundImageType } from '../type';
+
+/**
+ * 解析线性渐变
+ *
+ * ---
+ * <linear-gradient> = linear-gradient(
+ * [ [ <angle> | to <side-or-corner> ] ,]?
+ * <color-stop>[, <color-stop>]+
+ * )
+ *
+ * <side-or-corner> = [left | right] || [top | bottom]
+ *
+ * ---
+ * * Example: "to top, rgba(67, 90, 111, 0.04), white"
+ *
+ * @param value
+ * @see https://www.w3.org/TR/css3-images/#linear-gradients
+ */
+export const parseLinearGradient = (value: string) => {
   const parts = [];
   let currentPart = [];
   let i = 0;
@@ -47,6 +54,12 @@ const parseLinearGradient = (value: string) => {
     };
   }
   if (parts.length > 2) {
+    // 如果 parts 的第一个对象 不包含 deg 和 to
+    // 那就意味着全部都是 stops
+    if (!parts[0].includes('deg') && !parts[0].includes('to')) {
+      return { angle: '180deg', stops: parts };
+    }
+
     // angle + n stops
     const [angle, ...stops] = parts;
 
@@ -60,23 +73,23 @@ const parseLinearGradient = (value: string) => {
   return null;
 };
 
-type BackgroundImageType = {
-  type: 'Image' | 'LinearGradient';
-  value: any;
-};
-
-// Parses the background-image. The structure is as follows:
-// (Supports images and gradients)
-// ---
-// <background-image> = <bg-image> [ , <bg-image> ]*
-// <bg-image> = <image> | none
-// <image> = <url> | <image-list> | <element-reference> | <image-combination> | <gradient>
-// ---
-// Source: https://www.w3.org/TR/css-backgrounds-3/#the-background-image
-// ---
-// These functions should be pure to make it easy
-// to write test cases in the future.
-const parseBackgroundImage = (value: string): BackgroundImageType | void => {
+/**
+ * 解析背景图片
+ * The structure is as follows:
+ * (Supports images and gradients)
+ *
+ * ---
+ * <background-image> = <bg-image> [ , <bg-image> ]*
+ * <bg-image> = <image> | none
+ * <image> = <url> | <image-list> | <element-reference> | <image-combination> | <gradient>
+ * ---
+ * @param value
+ * @see: https://www.w3.org/TR/css-backgrounds-3/#the-background-image
+ * ---
+ */
+export const parseBackgroundImage = (
+  value: string,
+): BackgroundImageType | void => {
   if (value === 'none') {
     return;
   }
@@ -112,7 +125,7 @@ const parseBackgroundImage = (value: string): BackgroundImageType | void => {
  * @param {{width: number, height: number}} containerSize size of the container
  * @return {{width: number, height: number}} actual image size
  */
-const getActualImageSize = (
+export const getActualImageSize = (
   backgroundSize: string,
   imageSize: { width: number; height: number },
   containerSize: { width: any; height: any },
@@ -197,5 +210,3 @@ const getActualImageSize = (
     height,
   };
 };
-
-export { parseBackgroundImage, getActualImageSize };