@shijiu/jsview 2.0.1021 → 2.0.1073

package/patches/node_modules/@vue/compiler-sfc/dist/jsview-style-checker.js

@@ -4,9 +4,10 @@ const {
   StyleValue,
   StyleVariable
 } = require("./jsview-style-formator.cjs");
+const Logger = require('@shijiu/jsview/tools/jsview-logger');
 
 class StyleChecker {
-  static GetFormattedValue(propName, propValue) {
+  static GetFormattedValue(fileName, propName, propValue) {
     propValue = new StyleValue(propValue);
     if (StyleVariable.IsVariable(propValue)) {
       return propValue.get();
@@ -18,12 +19,12 @@ class StyleChecker {
       case StyleName.Layout.Left:
       case StyleName.Layout.Top:
       case StyleName.Layout.Width:
-        formattedValue = StyleChecker.#GetLayoutValue(propName, propValue);
+        formattedValue = StyleChecker.#GetLayoutValue(fileName, propName, propValue);
         break;
       case StyleName.Background.BackgroundColor:
       case StyleName.Background.BackgroundImage:
       case StyleName.Background.BorderRadius:
-        formattedValue = StyleChecker.#GetBackgroundValue(propName, propValue);
+        formattedValue = StyleChecker.#GetBackgroundValue(fileName, propName, propValue);
         break;
       case StyleName.Effect.BackfaceVisibility:
       case StyleName.Effect.BorderImage:
@@ -38,7 +39,7 @@ class StyleChecker {
       case StyleName.Effect.PerspectiveOrigin:
       case StyleName.Effect.Visibility:
       case StyleName.Effect.ZIndex:
-        formattedValue = StyleChecker.#GetEffectValue(propName, propValue);
+        formattedValue = StyleChecker.#GetEffectValue(fileName, propName, propValue);
         break;
       case StyleName.Text.Color:
       case StyleName.Text.FontFamily:
@@ -55,11 +56,11 @@ class StyleChecker {
       case StyleName.Text.WebkitTextStroke:
       case StyleName.Text.WhiteSpace:
       case StyleName.Text.WordWrap:
-        formattedValue = StyleChecker.#GetTextValue(propName, propValue);
+        formattedValue = StyleChecker.#GetTextValue(fileName, propName, propValue);
         break;
       case StyleName.Motion.Animation:
       case StyleName.Motion.Transition:
-        formattedValue = StyleChecker.#GetMotionValue(propName, propValue);
+        formattedValue = StyleChecker.#GetMotionValue(fileName, propName, propValue);
         break;
       default:
         // 返回未处理的值
@@ -70,7 +71,7 @@ class StyleChecker {
     return formattedValue;
   }
 
-  static GetFormattedKeyframe(propName, propValue) {
+  static GetFormattedKeyframe(fileName, propName, propValue) {
     let removedPxSuffix = false;
 
     // 去掉translate3d中的px单位
@@ -96,98 +97,95 @@ class StyleChecker {
     }
 
     if (removedPxSuffix) {
-      const msg = `JsView Info:`
-                + ` Auto optimize style keyframes ${propName},`
+      const msg = ` Auto optimize style keyframes ${propName},`
                 + ` remove unnecessary 'px' suffix.`;
-      console.info(msg);
+      Logger.Info(Logger.GetFileTag(fileName), msg);
     }
     const value = valueArray.join('translate3d');
 
     return value;
   }
 
-  static #GetLayoutValue(propName, propValue) {
-    const formattedValue = StyleChecker.#ConvertToInt32(propName, propValue);
+  static #GetLayoutValue(fileName, propName, propValue) {
+    const formattedValue = StyleChecker.#ConvertToInt32(fileName, propName, propValue);
 
     return formattedValue;
   }
 
-  static #GetBackgroundValue(propName, propValue) {
+  static #GetBackgroundValue(fileName, propName, propValue) {
     let formattedValue = null;
     switch (propName) {
       case StyleName.Background.BorderRadius:
-        formattedValue = StyleFormator.ConvertToString(propValue);
+        formattedValue = StyleFormator.ConvertToString(propName, propValue);
         if (formattedValue.includes?.('px')) {
           formattedValue = formattedValue.replace?.('px', ''); // 去掉px
 
-          const msg = `JsView Info:`
-                    + ` Auto optimize style ${propName},`
+          const msg = ` Auto optimize style ${propName},`
                     + ` remove unnecessary 'px'.`;
-          console.info(msg);
+          Logger.Info(Logger.GetFileTag(fileName), msg);
         }
         break;
       default:
-        formattedValue = StyleFormator.ConvertToString(propValue);
+        formattedValue = StyleFormator.ConvertToString(propName, propValue);
         break;
     }
 
     return formattedValue;
   }
 
-  static #GetEffectValue(propName, propValue) {
+  static #GetEffectValue(fileName, propName, propValue) {
     let formattedValue = null;
     switch (propName) {
       case StyleName.Effect.Opacity:
-        formattedValue = StyleFormator.ConvertToFloat(propValue);
+        formattedValue = StyleFormator.ConvertToFloat(propName, propValue);
         break;
       case StyleName.Effect.ZIndex:
-        formattedValue = StyleFormator.ConvertToInt32(propValue);
+        formattedValue = StyleFormator.ConvertToInt32(propName, propValue);
         break;
       default:
-        formattedValue = StyleFormator.ConvertToString(propValue);
+        formattedValue = StyleFormator.ConvertToString(propName, propValue);
         break;
     }
 
     return formattedValue;
   }
 
-  static #GetTextValue(propName, propValue) {
+  static #GetTextValue(fileName, propName, propValue) {
     let formattedValue = null;
     switch (propName) {
       case StyleName.Text.FontSize:
       case StyleName.Text.LineHeight:
-        formattedValue = StyleChecker.#ConvertToInt32(propName, propValue);
+        formattedValue = StyleChecker.#ConvertToInt32(fileName, propName, propValue);
         break;
       default:
-        formattedValue = StyleFormator.ConvertToString(propValue);
+        formattedValue = StyleFormator.ConvertToString(propName, propValue);
         break;
     }
 
     return formattedValue;
   }
 
-  static #GetMotionValue(propName, propValue) {
+  static #GetMotionValue(fileName, propName, propValue) {
     // 需要留到执行时处理
-    const formattedValue = StyleFormator.ConvertToString(propValue);
+    const formattedValue = StyleFormator.ConvertToString(propName, propValue);
 
     return formattedValue;
   }
 
-  static #ConvertToInt32(propName, propValue) {
+  static #ConvertToInt32(fileName, propName, propValue) {
     if (propValue.is(StyleValue.DataType.String)) {
       const strValue = propValue.get();
       StyleFormator.StringTrim(strValue);
       if (StyleFormator.StringEndsWith(strValue, "px")) {
         const fmtValue = StyleFormator.StringToInt32(strValue);
-        const msg = `JsView Info:`
-                  + ` Auto optimize style propery ${propName},`
+        const msg = ` Auto optimize style propery ${propName},`
                   + ` convert value from string ${strValue} to number ${fmtValue}.`;
-        console.info(msg);
+        Logger.Info(Logger.GetFileTag(fileName), msg);
         return fmtValue;
       }
     } 
 
-    return StyleFormator.ConvertToInt32(propValue);
+    return StyleFormator.ConvertToInt32(propName, propValue);
   }
 
 }

package/patches/node_modules/@vue/compiler-sfc/dist/jsview-style-formator.cjs.js

@@ -370,6 +370,26 @@ class StyleValue {
         source = "";
         slice = null;
     };
+    static BackgroundImageImpl = class extends StyleValue.Base {
+        constructor(rawValue) {
+            super(rawValue);
+        }
+        type = 0;
+        static eType = {
+            UNKNOWN: 0,
+            LINEAR_GRADIENT: 1,
+            URL_PATH: 2,
+        };
+        static LinearGradient = class {
+            fromX = 0;
+            fromY = 0;
+            toX = 0;
+            toY = 0;
+            stops = []; // std::vector<ForgeFront::LinearGradientTexture::StopPoint>
+        };
+        linearGradient; // LinearGradient
+        urlPath = ""; // Image url type
+    };
     static DataType = class {
         static Null = 0;
         static Int32 = 1;
@@ -382,6 +402,7 @@ class StyleValue {
         static WebkitTextStroke = 8;
         static Transition = 9;
         static BorderImage = 10;
+        static BackgroundImage = 11;
     };
     static InvalidInt32 = Number.MIN_VALUE;
     static InvalidFloat = Number.NaN;
@@ -435,6 +456,48 @@ class StyleValue {
         this.data.index = index;
         this.data.value = value;
     }
+    toString() {
+        let result = null;
+        switch (this.data.index) {
+            case StyleValue.DataType.Null:
+                return "";
+            case StyleValue.DataType.Int32:
+                return String(this.get());
+            case StyleValue.DataType.Float:
+                return String(this.get());
+            case StyleValue.DataType.String:
+                result = this.get();
+                break;
+            case StyleValue.DataType.Animation:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.Corner:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.Rect:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.TextShadow:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.WebkitTextStroke:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.Transition:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.BorderImage:
+                result = this.get().rawValue;
+                break;
+            case StyleValue.DataType.BackgroundImage:
+                result = this.get().rawValue;
+                break;
+            default:
+                console.error("Failed to do StyleValue.toString()");
+                break;
+        }
+        return result ?? "";
+    }
     is(type) {
         return this.data.index == type;
     }
@@ -486,6 +549,7 @@ class StyleVariable {
     constructor() { throw new Error("new StyleVariable() is forbidden."); }
 }
 
+let ForgeFront = Forge;
 class StyleFormator {
     /*** public ***/
     static StringToInt32(value) {
@@ -505,25 +569,119 @@ class StyleFormator {
     static StringEndsWith(value, ending) {
         return value.endsWith(ending);
     }
-    static StringSplit(from, delimiter = " ") {
+    static StringSplit(from, delimiter = " ", startIdx = 0, endIdx = 0, doTrim = false) {
         if (!from) {
             from = "";
         }
-        let arrays = from.trim().split(delimiter);
-        if (delimiter !== ' ') {
-            return arrays;
+        // apply startIdx/endIdx
+        if (endIdx == 0) {
+            // 0代表全字符
+            endIdx = from.length - 1;
         }
-        //去除多个空格的条件下的影响
+        from = from.substring(startIdx, endIdx + 1);
+        let arrays = from.trim().split(delimiter);
+        // 去除多个空格的条件下的影响
+        // 结果string进行trim
         let ret = [];
         for (let item of arrays) {
             if (!item) {
                 continue;
             }
+            if (doTrim) {
+                item = item.trim();
+                if (item.length == 0) {
+                    continue;
+                }
+            }
             ret.push(item);
         }
         return ret;
     }
-    static ConvertToInt32(value) {
+    static MergeBrackets(input, connector = null) {
+        let output = [];
+        let packString = "";
+        let notMergedPrevious = null;
+        let mergedString = null;
+        let bracket_depth = 0;
+        let useSstream = false;
+        for (let str of input) {
+            let start_pos = 0;
+            while (start_pos < str.length) {
+                if (bracket_depth > 0) {
+                    let end_pos = str.indexOf(")", start_pos);
+                    let next_bracket_pos = str.indexOf("(", start_pos);
+                    if (next_bracket_pos != -1 && (end_pos == -1 || next_bracket_pos < end_pos)) {
+                        bracket_depth++;
+                        start_pos = next_bracket_pos + 1;
+                    }
+                    else {
+                        // 到目前为止没有深度增加
+                        // 可能1: 有新正括号，但晚于反括号
+                        // 可能2: 无新正括号，有反括号
+                        // 可能3: 无新正括号，也无反括号
+                        if (end_pos >= 0) {
+                            // 上诉的可能1或可能2
+                            bracket_depth--;
+                            // 以反括号为节点继续后查
+                            // 在新正括号在反括号之后的场景放到下一次循环来处理
+                            start_pos = end_pos + 1;
+                        }
+                        else {
+                            // 上诉的可能3
+                            // 不需要后续的检查,保存depth状态,跳到下一个内容
+                            break;
+                        }
+                    }
+                }
+                else {
+                    let bracket_pos = str.indexOf("(", start_pos);
+                    if (bracket_pos == -1) {
+                        break;
+                    }
+                    bracket_depth++;
+                    start_pos = bracket_pos + 1;
+                }
+            }
+            // 执行本次合并
+            if (useSstream) {
+                // 第三个及以上合并内容
+                if (connector) {
+                    packString += connector;
+                }
+                packString += str;
+            }
+            else if (notMergedPrevious != null) {
+                // 第二个合并内容
+                packString += notMergedPrevious;
+                if (connector) {
+                    packString += connector;
+                }
+                packString += str;
+                notMergedPrevious = null;
+                useSstream = true;
+            }
+            else {
+                // 第一个合并内容
+                notMergedPrevious = str; // 记录previousString
+            }
+            if (bracket_depth == 0) {
+                // 收尾
+                if (useSstream) {
+                    mergedString = packString;
+                    packString = "";
+                }
+                else {
+                    mergedString = str;
+                }
+                output.push(mergedString);
+                // 重置所有状态
+                notMergedPrevious = null;
+                useSstream = false;
+            }
+        }
+        return output;
+    }
+    static ConvertToInt32(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return 0;
         }
@@ -549,10 +707,14 @@ class StyleFormator {
         else if (value.is(StyleValue.DataType.Float)) {
             return value.get();
         }
-        CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidInt32);
+        CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidInt32, [
+            'Failed to convert style ',
+            name, '=', value.toString(),
+            ', value type is supported.'
+        ]);
         return StyleValue.InvalidInt32;
     }
-    static ConvertToFloat(value) {
+    static ConvertToFloat(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidFloat;
         }
@@ -565,15 +727,23 @@ class StyleFormator {
         else if (value.is(StyleValue.DataType.Float)) {
             return value.get();
         }
-        CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidFloat);
+        CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidFloat, [
+            "Failed to convert style ",
+            name, '=', value.toString(),
+            ", value type is supported."
+        ]);
         return StyleValue.InvalidFloat;
     }
-    static ConvertToString(value, upperCase = false) {
+    static ConvertToString(name, value, upperCase = false) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
         }
         let propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -584,7 +754,7 @@ class StyleFormator {
         }
         return propValue;
     }
-    static ConvertToCorner(value) {
+    static ConvertToCorner(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
@@ -611,16 +781,20 @@ class StyleFormator {
             corner.bottomLeft = (propValueSize > 3 ? parseInt(propValueArray[3]) : corner.bottomRight);
         }
         else {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not number or string."
+            ]);
         }
         return corner;
     }
-    static ConvertToRect(value) {
+    static ConvertToRect(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, ['Failed to convert style ' + name + '=' + value + ', value type is not string.']);
         }
         const propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -635,12 +809,16 @@ class StyleFormator {
         rect.left = (propValueSize > 3 ? parseInt(propValueArray[3]) : rect.right);
         return rect;
     }
-    static ConvertToAnimation(value, compare = null) {
+    static ConvertToAnimation(name, value, compare = null) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
         }
         const propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -654,12 +832,16 @@ class StyleFormator {
         const anim = StyleFormator.ParseToAnimation(propValue);
         return anim;
     }
-    static ConvertToTransition(value, compare = null) {
+    static ConvertToTransition(name, value, compare = null) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
         }
         const propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -696,7 +878,7 @@ class StyleFormator {
         // console.warn("StyleFormator.ConvertToTransition() arrays=" + JSON.stringify(arrays));
         const transition = new StyleValue.TransitionImpl(propValue);
         for (const item of arrays) {
-            const ret = StyleFormator.ConvertToAnimation(new StyleValue(item));
+            const ret = StyleFormator.ConvertToAnimation(name, new StyleValue(item));
             if (ret == null) {
                 continue;
             }
@@ -710,12 +892,16 @@ class StyleFormator {
         }
         return transition;
     }
-    static ConvertToTextShadow(value) {
+    static ConvertToTextShadow(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
         }
         const propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -744,12 +930,16 @@ class StyleFormator {
         }
         return textShadow;
     }
-    static ConvertToWebkitTextStroke(value) {
+    static ConvertToWebkitTextStroke(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
         }
         const propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -765,12 +955,16 @@ class StyleFormator {
         }
         return webkitTextStroke;
     }
-    static ConvertToBorderImage(value) {
+    static ConvertToBorderImage(name, value) {
         if (value.is(StyleValue.DataType.Null)) {
             return StyleValue.InvalidPointer;
         }
         if (value.is(StyleValue.DataType.String) == false) {
-            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer);
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
         }
         const propValue = value.get();
         if (propValue == null || propValue.length <= 0) {
@@ -783,10 +977,103 @@ class StyleFormator {
             borderImage.source = propValueArray[0];
         }
         if (propValueSize > 1) {
-            borderImage.slice = StyleFormator.ConvertToRect(new StyleValue(propValueArray[1]));
+            borderImage.slice = StyleFormator.ConvertToRect(name, new StyleValue(propValueArray[1]));
         }
         return borderImage;
     }
+    static ConvertToBackgroundImage(name, value) {
+        if (value.is(StyleValue.DataType.Null)) {
+            return StyleValue.InvalidPointer;
+        }
+        if (value.is(StyleValue.DataType.String) == false) {
+            CHECK_AND_RETVAL(ErrCode.InvalidArgument, StyleValue.InvalidPointer, [
+                "Failed to convert style ",
+                name, '=', value.toString(),
+                ", type is not string."
+            ]);
+        }
+        let propValue = value.get();
+        if (propValue == null || propValue.length <= 0) {
+            return StyleValue.InvalidPointer;
+        }
+        const backgroundImage = new StyleValue.BackgroundImageImpl(propValue);
+        const gradientPrefix = "linear-gradient(";
+        if (propValue.indexOf(gradientPrefix) == 0) {
+            propValue = StyleFormator.StringTrim(propValue);
+            backgroundImage.type = StyleValue.BackgroundImageImpl.eType.LINEAR_GRADIENT;
+            backgroundImage.linearGradient = new StyleValue.BackgroundImageImpl.LinearGradient();
+            backgroundImage.urlPath = propValue;
+            let propValueArray = StyleFormator.StringSplit(propValue, ",", gradientPrefix.length, propValue.length - 2 /* 去掉最后的括号 */);
+            propValueArray = StyleFormator.MergeBrackets(propValueArray, ",");
+            let propValueSize = propValueArray.length;
+            if (propValueSize > 0) {
+                // check direction
+                let firstDefine = propValueArray[0];
+                if (firstDefine.indexOf("to ") != -1) {
+                    propValueArray.splice(0, 1); // 删除头结点
+                    let stopsCount = propValueArray.length;
+                    if (firstDefine.indexOf("left") != -1) {
+                        // 向左
+                        backgroundImage.linearGradient.fromX = stopsCount + 1;
+                        backgroundImage.linearGradient.toX = 0;
+                    }
+                    else if (firstDefine.indexOf("right") != -1) {
+                        // 向右
+                        backgroundImage.linearGradient.fromX = 0;
+                        backgroundImage.linearGradient.toX = stopsCount + 1;
+                    }
+                    else {
+                        // X上无方向
+                        backgroundImage.linearGradient.fromX = 0;
+                        backgroundImage.linearGradient.toX = 0;
+                    }
+                    if (firstDefine.indexOf("top") != -1) {
+                        // 向上
+                        backgroundImage.linearGradient.fromY = stopsCount + 1;
+                        backgroundImage.linearGradient.toY = 0;
+                    }
+                    else if (firstDefine.indexOf("bottom") != -1) {
+                        // 向下
+                        backgroundImage.linearGradient.fromY = 0;
+                        backgroundImage.linearGradient.toY = stopsCount + 1;
+                    }
+                    else {
+                        // Y上无方向
+                        backgroundImage.linearGradient.fromY = 0;
+                        backgroundImage.linearGradient.toY = 0;
+                    }
+                }
+                else {
+                    // 默认从上到下
+                    backgroundImage.linearGradient.fromX = 0;
+                    backgroundImage.linearGradient.toX = 0;
+                    backgroundImage.linearGradient.fromY = 0;
+                    backgroundImage.linearGradient.toY = 2;
+                }
+            }
+            if (propValueSize < 2) {
+                // stops 颜色值不足，至少应该有起始和结束两种颜色
+                console.error(`linear gradient format error: str=${value}`);
+                return null;
+            }
+            let stepGap = 1 / propValueArray.length;
+            let stopsCount = propValueArray.length;
+            for (let i = 0; i < stopsCount; i++) {
+                let stopColor = propValueArray[i];
+                stopColor = StyleFormator.StringTrim(stopColor);
+                let stopPoint = new ForgeFront.LinearGradientTexture.StopPoint();
+                stopPoint.color = stopColor;
+                stopPoint.stopPosition = (i != stopsCount - 1 ? i * stepGap : 1);
+                backgroundImage.linearGradient.stops.push(stopPoint);
+            }
+        }
+        else {
+            // Url path形式
+            backgroundImage.type = StyleValue.BackgroundImageImpl.eType.URL_PATH;
+            backgroundImage.urlPath = propValue;
+        }
+        return backgroundImage;
+    }
     static ParseToAnimation(value) {
         const trimmed = StyleFormator.StringTrim(value);
         let arrays = [];
@@ -797,7 +1084,7 @@ class StyleFormator {
             const bezierArray = StyleFormator.StringSplit(trimmed, bezierStr);
             for (const item of bezierArray) {
                 const subArrays = StyleFormator.StringSplit(item);
-                arrays.concat(subArrays);
+                arrays = [...arrays, ...subArrays];
             }
             arrays.push(bezierStr);
         }