@shijiu/jsview 1.9.719

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

@@ -0,0 +1,446 @@
+/*
+ * JsView Added
+ */
+'use strict';
+
+const StyleName = require("./jsview-style-types").StyleName;
+
+class StyleConverter {
+  static ToInteger(value) {
+    if (!value) {
+      return value;
+    }
+    if (typeof value == "number") {
+      return Math.floor(value);
+    }
+
+    if (typeof value == "string") {
+      const number = parseInt(value);
+      if (number != value && value.endsWith('px') == false) {
+        throw Error("Bad unit in value " + value);
+      }
+      return number;
+    }
+
+    return value;
+  }
+
+  static ToFloat(value) {
+    if (!value) {
+       return value;
+    }
+    if (typeof value !== "string") {
+      return value;
+    }
+
+    let ret = parseFloat(value);
+    return ret;
+  }
+
+  // static ToConst(value, defaultValue) {
+  //   if (typeof (value) == "symbol") {
+  //     return value;
+  //   }
+
+  //   if (!value) {
+  //     value = "";
+  //   }
+
+  //   if (value.includes('contain')) {
+  //     return StyleValue.ObjectFit.CONTAIN;
+  //   } else if (value.includes('cover')) {
+  //     return StyleValue.ObjectFit.COVER;
+  //   } else if (value.includes('fill')) {
+  //     return StyleValue.ObjectFit.FILL;
+  //   } else if (value.includes('none')) {
+  //     return StyleValue.ObjectFit.NONE;
+  //   } else if (value.includes('scale-down')) {
+  //     return StyleValue.ObjectFit.SCALEDOWN;
+  //   } else if (value.includes('hidden')) {
+  //     return StyleValue.Overflow.HIDDEN;
+  //   } else if (value.includes('visible')) {
+  //     return StyleValue.Overflow.VISIBLE;
+  //   }
+
+  //   return defaultValue; // default value
+  // }
+
+  static ToString(value, upperCase) {
+    if (!value) {
+      return "";
+    }
+
+    if (upperCase) {
+      value = value.toUpperCase();
+    }
+
+    return value;
+  }
+
+
+  static ToRect(str) {
+    let arrays = StyleConverter.SplitString(str, ' ');
+
+    let rect = {
+      top: arrays.length > 0 ? parseInt(arrays[0]) : 0,
+      right: arrays.length > 1 ? parseInt(arrays[1]) : null,
+      bottom: arrays.length > 2 ? parseInt(arrays[2]) : null,
+      left: arrays.length > 3 ? parseInt(arrays[3]) : null,
+    };
+    rect.right = (!!rect.right || rect.right === 0 ? rect.right : rect.top);
+    rect.bottom = (!!rect.bottom || rect.bottom === 0 ? rect.bottom : rect.top);
+    rect.left = (!!rect.left || rect.left === 0 ? rect.left : rect.right);
+    return rect;
+  }
+
+  static ToCorner(str) {
+    let arrays = StyleConverter.SplitString(str, ' ');
+
+    let rect = {
+      topLeft: arrays.length > 0 ? parseInt(arrays[0]) : 0,
+      topRight: arrays.length > 1 ? parseInt(arrays[1]) : null,
+      bottomRight: arrays.length > 2 ? parseInt(arrays[2]) : null,
+      bottomLeft: arrays.length > 3 ? parseInt(arrays[3]) : null,
+    };
+    rect.topRight = (!!rect.topRight || rect.topRight === 0 ? rect.topRight : rect.topLeft);
+    rect.bottomRight = (!!rect.bottomRight || rect.bottomRight === 0 ? rect.bottomRight : rect.topLeft);
+    rect.bottomLeft = (!!rect.bottomLeft || rect.bottomLeft === 0 ? rect.bottomLeft : rect.bottomRight);
+    return rect;
+  }
+
+  static ToAnimation(str) {
+    if (str === null || str.length === 0) {
+      return null;
+    }
+
+    let bezierStart = str.indexOf('cubic-bezier');
+    let arrays = [];
+    if (bezierStart >= 0) { // 防止贝塞尔里面的空格被拆分
+      let bezierEnd = str.indexOf(')');
+      let bezierStr = str.substring(bezierStart, bezierEnd + 1);
+      let bezierArray = StyleConverter.SplitString(str, bezierStr);
+      for (let item of bezierArray) {
+        let subArrays = StyleConverter.SplitString(item, ' ');
+        arrays = arrays.concat(subArrays);
+      }
+      arrays.push(bezierStr);
+    } else {
+      arrays = StyleConverter.SplitString(str, ' ');
+    }
+
+    // 下面四个属性在animation字符串中是无序的，所以需要单独判断。
+    let timingFunction = null;
+    let delay = 0;
+    let iterationCount = 1;
+    let direction = str.includes("alternate");
+    for (let idx = 2; idx < arrays.length; idx++) { // 前两个选项固定是name和duration
+      if (arrays[idx] === "infinite") {
+        iterationCount = -1; // -1表示无限循环
+        continue;
+      }
+
+      let num = StyleConverter.ToTimeMs(arrays[idx]);
+      if (isNaN(num) === false) { // 表示时间
+        delay = num;
+      } else {
+        num = parseFloat(arrays[idx]);
+        if (isNaN(num) === false) { // 表示次数
+          iterationCount = num;
+        } else { // 不是数字，直接赋给timingFunction，省略判断
+          timingFunction = arrays[idx];
+        }
+      }
+    }
+
+    let duration = arrays.length > 1 ? StyleConverter.ToTimeMs(arrays[1]) : 0;
+    let anim = {
+      name: arrays.length > 0 ? arrays[0] : "",
+      duration: duration,
+      timingFunction: timingFunction,
+      delay: delay,
+      iterationCount: iterationCount,
+      direction: direction,
+    };
+    // console.log("StyleConverter.ConvertAnimation() anim=", anim);
+
+    return anim;
+  }
+
+  static ToTransition(str) {
+    if (str == null || str.length == 0) {
+      return null;
+    }
+    let transition = {};
+    let arrays = new Array();
+    let splitStr = str.split(',');
+    for (let idx = 0; idx < splitStr.length; idx++) {
+      if (splitStr[idx].indexOf('(') >= 0) { // 如果包含"(", 则将直到")"为止的内容当作一个部分
+        let endIdx = idx;
+        while (endIdx < splitStr.length && splitStr[endIdx].indexOf(')') < 0) { // 没有包含")"
+          endIdx++;
+        }
+        let concatStr = "";
+        for (let subIdx = idx; subIdx <= endIdx; subIdx++) {
+          if (subIdx != idx) {
+            concatStr += ",";
+          }
+          concatStr += splitStr[subIdx];
+        }
+        idx = endIdx;
+        arrays = arrays.concat(concatStr);
+      } else {
+        arrays = arrays.concat(splitStr[idx]);
+      }
+    }
+    // console.warn("StyleConverter.ConvertTransition() arrays=" + JSON.stringify(arrays));
+    for (let item of arrays) {
+      let ret = StyleConverter.ConvertAnimation(item);
+      transition[ret.name] = ret;
+      if (ret.name == "all") {
+        let allProps = new Array("opacity", "left", "top", "width", "height", "transform");
+        for (let prop of allProps) {
+          transition[prop] = ret;
+        }
+      }
+    }
+    return transition;
+  }
+
+  // static ConvertEasing(str, duration) {
+  //   let easing = Forge.Easing.Circular.InOut;
+  //   if (!str) {
+  //     return easing;
+  //   }
+
+  //   if (str.includes('ease')) { // 加速用
+  //     if (str.includes('-in-out')) {
+  //       easing = Forge.Easing.Circular.InOut;
+  //     } else if (str.includes('-out')) {
+  //       easing = Forge.Easing.Circular.Out;
+  //     } else if (str.includes('-in')) {
+  //       easing = Forge.Easing.Circular.In;
+  //     } else {
+  //       easing = Forge.Easing.Circular.InOut;
+  //     }
+  //   } else if (str.includes('linear')) {
+  //     easing = null; // null是匀速动画
+  //   } else if (str.includes('cubic-bezier')) {
+  //     let bezier = StyleConverter.ConvertBezier(str);
+  //     easing = new Forge.BezierEasing(bezier.x1, bezier.y1, bezier.x2, bezier.y2, duration);
+  //   } else if (str.includes("steps")) {
+  //     let steps = StyleConverter.ConvertSteps(str);
+  //     easing = new Forge.StepsEasing(steps.steps, steps.type);
+  //   }
+
+  //   // console.log("StyleConverter.ConvertEasing() easing=" + JSON.stringify(easing.Package()));
+  //   return easing;
+  // }
+
+  static ConvertBezier(str) {
+    let startIdx = str.indexOf('(');
+    if (startIdx >= 0) {
+      str = str.substring(startIdx + 1);
+    }
+
+    let arrays = StyleConverter.SplitString(str, ',');
+
+    let bezier = {
+      x1: arrays.length > 0 ? parseFloat(arrays[0]) : 0,
+      y1: arrays.length > 1 ? parseFloat(arrays[1]) : 0,
+      x2: arrays.length > 2 ? parseFloat(arrays[2]) : 0,
+      y2: arrays.length > 3 ? parseFloat(arrays[3]) : 0,
+    };
+    return bezier;
+  }
+
+  static ConvertSteps(str) {
+    let startIdx = str.indexOf('(');
+    if (startIdx >= 0) {
+      str = str.substring(startIdx + 1);
+    }
+    let arrays = StyleConverter.SplitString(str, ',');
+    return {
+      steps: arrays.length > 0 ? parseInt(arrays[0]) : 1,
+      type: arrays.length > 1 ? (arrays[1].includes("start") ? 0 : 1) : 0,
+    }
+  }
+
+  static SplitString(from, sep) {
+    if (!from) {
+      from = "";
+    }
+    let arrays = from.trim().split(sep);
+    if (sep !== ' ') {
+      return arrays;
+    }
+
+    //去除多个空格的条件下的影响
+    let ret = [];
+    for (let item of arrays) {
+      if (!item) {
+        continue;
+      }
+
+      ret.push(item);
+    }
+
+    return ret;
+  }
+
+  static ToTimeMs(str) {
+    if (!str) {
+      str = "";
+    }
+    str = str.trim();
+
+    let timing = NaN;
+    if (str.endsWith('ms')) {
+      timing = 1;
+    } else if (str.endsWith('s')) {
+      timing = 1000;
+    }
+    timing *= parseFloat(str);
+
+    return timing;
+  }
+
+  static ToInset(value) {
+    if (!value
+    || value.startsWith('inset') === false) {
+      console.error("JsView Error: Failed to convert inset, InvalidArgs: value=", value);
+      return null;
+    }
+
+    let idx = value.indexOf('(') + 1;
+    let edgeValue = value.substring(idx);
+    let rect = StyleConverter.ToRect(edgeValue);
+
+    return rect
+  }
+}
+
+class StyleFormatter {
+  static GetFormattedValue(propName, propValue) {
+    let formattedValue = propValue;
+
+    switch (propName) {
+      case StyleName.Height:
+      case StyleName.Left:
+      case StyleName.Top:
+      case StyleName.Width:
+        formattedValue = StyleFormatter.#GetLayoutValue(propName, propValue);
+        break;
+      case StyleName.BackgroundColor:
+      case StyleName.BackgroundImage:
+      case StyleName.BorderRadius:
+        formattedValue = StyleFormatter.#GetBackgroundValue(propName, propValue);
+        break;
+      case StyleName.BackfaceVisibility:
+      case StyleName.BorderImage:
+      case StyleName.BorderImageWidth:
+      case StyleName.BorderImageOutset:
+      case StyleName.ClipPath:
+      case StyleName.Display:
+      case StyleName.ObjectFit:
+      case StyleName.Opacity:
+      case StyleName.Overflow:
+      case StyleName.Perspective:
+      case StyleName.PerspectiveOrigin:
+      case StyleName.Visibility:
+      case StyleName.ZIndex:
+        formattedValue = StyleFormatter.#GetEffectValue(propName, propValue);
+        break;
+      case StyleName.Color:
+      case StyleName.FontFamily:
+      case StyleName.FontSize:
+      case StyleName.FontStyle:
+      case StyleName.FontWeight:
+      case StyleName.LineHeight:
+      case StyleName.TextAlign:
+      case StyleName.TextShadow:
+      case StyleName.TextOverflow:
+      case StyleName.WebkitTextStroke:
+      case StyleName.WhiteSpace:
+      case StyleName.WordWrap:
+        formattedValue = StyleFormatter.#GetTextValue(propName, propValue);
+        break;
+      case StyleName.Animation:
+      case StyleName.Transform:
+      case StyleName.TransformOrigin:
+      case StyleName.TransformStyle:
+      case StyleName.Transition:
+        formattedValue = StyleFormatter.#GetMotionValue(propName, propValue);
+        break;
+      default:
+        // 返回未处理的值
+        console.warn("JsView Warn: Unimplemented style property " + propName);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetLayoutValue(propName, propValue) {
+    const formattedValue = StyleConverter.ToInteger(propValue);
+
+    return formattedValue;
+  }
+
+  static #GetBackgroundValue(propName, propValue) {
+    let formattedValue = null;
+    switch (propName) {
+      case StyleName.BorderRadius:
+        formattedValue = StyleConverter.ToCorner(propValue);
+        break;
+      default:
+        formattedValue = StyleConverter.ToString(propValue);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetEffectValue(propName, propValue) {
+    let formattedValue = null;
+    switch (propName) {
+      case StyleName.Display:
+      case StyleName.Overflow:
+      case StyleName.Visibility:
+        formattedValue = StyleConverter.ToString(propValue);
+        break;
+      case StyleName.ClipPath:
+        formattedValue = StyleConverter.ToInset(propValue);
+        break;
+      default:
+        formattedValue = StyleConverter.ToInteger(propValue);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetTextValue(propName, propValue) {
+    let formattedValue = null;
+    switch (propName) {
+      case StyleName.FontSize:
+      case StyleName.LineHeight:
+        formattedValue = StyleConverter.ToInteger(propValue);
+        break;
+      default:
+        formattedValue = StyleConverter.ToString(propValue);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetMotionValue(propName, propValue) {
+    // 需要留到执行时处理
+    const formattedValue = StyleConverter.ToString(propValue);
+
+    return formattedValue;
+  }
+
+}
+
+exports.getFormattedValue = StyleFormatter.GetFormattedValue;

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

@@ -0,0 +1,91 @@
+/*
+ * JsView Added
+ */
+'use strict';
+
+// export const StyleGroup = {
+//   Layout: 'layout',
+//   Background: 'background',
+//   Effect: 'effect',
+//   Text: 'text',
+//   Motion: 'motion',
+// }
+
+const StyleName = {
+  // Layout
+  Height: 'height',
+  Left: 'left',
+  Top: 'top',
+  Width: 'width',
+  // Bottom      : 'bottom',
+  // Right       : 'right',
+
+  // Background
+  BackgroundColor: 'backgroundColor',
+  BackgroundImage: 'backgroundImage',
+  BorderRadius: 'borderRadius',
+
+  // Effect
+  BackfaceVisibility: 'backfaceVisibility',
+  BorderImage: 'borderImage',
+  BorderImageWidth: 'borderImageWidth',
+  BorderImageOutset: 'borderImageOutset',
+  ClipPath: 'clipPath',
+  Color: 'color',
+  Display: 'display',
+  ObjectFit: 'objectFit',
+  Opacity: 'opacity',
+  Overflow: 'overflow',
+  Perspective: 'perspective',
+  PerspectiveOrigin: 'perspectiveOrigin',
+  Visibility: 'visibility',
+  ZIndex: 'zIndex',
+
+  // Text 
+  FontFamily: 'fontFamily',
+  FontSize: 'fontSize',
+  FontStyle: 'fontStyle',
+  FontWeight: 'fontWeight',
+  LineHeight: 'lineHeight',
+  TextAlign: 'textAlign',
+  TextShadow: 'textShadow',
+  TextOverflow: 'textOverflow',
+  WebkitTextStroke: 'WebkitTextStroke',
+  WhiteSpace: 'whiteSpace',
+  WordWrap: 'wordWrap',
+  JsvTextEmoji: 'JsvTextEmoji',
+
+  // Motion
+  Animation: 'animation',
+  Transform: 'transform',
+  TransformOrigin: 'transformOrigin',
+  TransformStyle: 'transformStyle',
+  Transition: 'transition',
+}
+
+
+// export const StyleValue = {
+//   Overflow: {
+//     Hidden: 'hidden',
+//     Visible: 'visible',
+//   },
+
+//   ObjectFit: {
+//     Fill: Symbol('fill'),
+//     Contain: Symbol('contain'),
+//     Cover: Symbol('cover'),
+//     None: Symbol('none'),
+//     Scaledown: Symbol('scale-down'),
+//   },
+// }
+
+// export class StyleType {
+//   static IsVariable(value) {
+//     const isVar = ( typeof (value) === "string"
+//                   && (value.startsWith('--') || value.startsWith('var(--')));
+
+//     return isVar;
+//   }
+// }
+
+exports.StyleName = StyleName;