@shijiu/jsview 1.9.887 → 1.9.909

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

@@ -1,31 +1,31 @@
-/*
- * JsView Added
- */
-'use strict';
-
-const StyleName = require("./jsview-style-types").StyleName;
+const { StyleName, StyleVariable } = require("./jsview-style-types");
 
 class StyleConverter {
   static ToInteger(value) {
+    if (StyleVariable.IsVariable(value)) {
+      return value;
+    }
+
     if (!value) {
       return value;
     }
-    if (typeof value == "number") {
+    if (typeof value !== "string") {
       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;
+    value = StyleConverter.ExecIfCalc(value);
+    const ret = parseInt(value);
+    if (ret != value && value.endsWith('px') == false) {
+      throw Error("Bad unit in value " + value);
     }
-
-    return value;
+    return ret;
   }
 
   static ToFloat(value) {
+    if (StyleVariable.IsVariable(value)) {
+      return value;
+    }
+
     if (!value) {
        return value;
     }
@@ -33,290 +33,47 @@ class StyleConverter {
       return value;
     }
 
+    value = StyleConverter.ExecIfCalc(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) {
+    if (StyleVariable.IsVariable(value)) {
+      return value;
+    }
 
-  static ToString(value, upperCase) {
     if (!value) {
       return "";
     }
 
-    if (upperCase) {
-      value = value.toUpperCase();
-    }
-
+    value = StyleConverter.ExecIfCalc(value);
     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 ExecIfCalc(value) {
+    if (typeof value !== "string") {
+      return value;
     }
-  }
 
-  static SplitString(from, sep) {
-    if (!from) {
-      from = "";
-    }
-    let arrays = from.trim().split(sep);
-    if (sep !== ' ') {
-      return arrays;
+    const isCalc = (value.startsWith("calc("));
+    if (!isCalc) {
+      return value;
     }
 
-    //去除多个空格的条件下的影响
-    let ret = [];
-    for (let item of arrays) {
-      if (!item) {
-        continue;
-      }
-
-      ret.push(item);
+    const expr = value.replace(/calc(\(.*\))/, '$1')
+    let ret = null;
+    try {
+      ret = eval(expr);
+    } catch (ex) {
+      console.error("Failed to exec StyleConverter.ExecIfCalc(" + value + ")");
+      throw ex;
     }
 
+    console.log('execIfCalc() value=', value, " ret=", ret);
     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 {
@@ -324,51 +81,51 @@ class StyleFormatter {
     let formattedValue = propValue;
 
     switch (propName) {
-      case StyleName.Height:
-      case StyleName.Left:
-      case StyleName.Top:
-      case StyleName.Width:
+      case StyleName.Layout.Height:
+      case StyleName.Layout.Left:
+      case StyleName.Layout.Top:
+      case StyleName.Layout.Width:
         formattedValue = StyleFormatter.#GetLayoutValue(propName, propValue);
         break;
-      case StyleName.BackgroundColor:
-      case StyleName.BackgroundImage:
-      case StyleName.BorderRadius:
+      case StyleName.Background.BackgroundColor:
+      case StyleName.Background.BackgroundImage:
+      case StyleName.Background.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:
+      case StyleName.Effect.BackfaceVisibility:
+      case StyleName.Effect.BorderImage:
+      case StyleName.Effect.BorderImageWidth:
+      case StyleName.Effect.BorderImageOutset:
+      case StyleName.Effect.ClipPath:
+      case StyleName.Effect.Display:
+      case StyleName.Effect.ObjectFit:
+      case StyleName.Effect.Opacity:
+      case StyleName.Effect.Overflow:
+      case StyleName.Effect.Perspective:
+      case StyleName.Effect.PerspectiveOrigin:
+      case StyleName.Effect.Visibility:
+      case StyleName.Effect.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:
+      case StyleName.Text.Color:
+      case StyleName.Text.FontFamily:
+      case StyleName.Text.FontSize:
+      case StyleName.Text.FontStyle:
+      case StyleName.Text.FontWeight:
+      case StyleName.Text.LineHeight:
+      case StyleName.Text.TextAlign:
+      case StyleName.Text.TextShadow:
+      case StyleName.Text.TextOverflow:
+      case StyleName.Text.WebkitTextStroke:
+      case StyleName.Text.WhiteSpace:
+      case StyleName.Text.WordWrap:
         formattedValue = StyleFormatter.#GetTextValue(propName, propValue);
         break;
-      case StyleName.Animation:
-      case StyleName.Transform:
-      case StyleName.TransformOrigin:
-      case StyleName.TransformStyle:
-      case StyleName.Transition:
+      case StyleName.Motion.Animation:
+      case StyleName.Motion.Transform:
+      case StyleName.Motion.TransformOrigin:
+      case StyleName.Motion.TransformStyle:
+      case StyleName.Motion.Transition:
         formattedValue = StyleFormatter.#GetMotionValue(propName, propValue);
         break;
       default:
@@ -389,9 +146,6 @@ class StyleFormatter {
   static #GetBackgroundValue(propName, propValue) {
     let formattedValue = null;
     switch (propName) {
-      case StyleName.BorderRadius:
-        formattedValue = StyleConverter.ToCorner(propValue);
-        break;
       default:
         formattedValue = StyleConverter.ToString(propValue);
         break;
@@ -403,13 +157,14 @@ class StyleFormatter {
   static #GetEffectValue(propName, propValue) {
     let formattedValue = null;
     switch (propName) {
-      case StyleName.Display:
-      case StyleName.Overflow:
-      case StyleName.Visibility:
+      case StyleName.Effect.ClipPath:
+      case StyleName.Effect.Display:
+      case StyleName.Effect.Overflow:
+      case StyleName.Effect.Visibility:
         formattedValue = StyleConverter.ToString(propValue);
         break;
-      case StyleName.ClipPath:
-        formattedValue = StyleConverter.ToInset(propValue);
+      case StyleName.Effect.Opacity:
+        formattedValue = StyleConverter.ToFloat(propValue);
         break;
       default:
         formattedValue = StyleConverter.ToInteger(propValue);
@@ -422,8 +177,8 @@ class StyleFormatter {
   static #GetTextValue(propName, propValue) {
     let formattedValue = null;
     switch (propName) {
-      case StyleName.FontSize:
-      case StyleName.LineHeight:
+      case StyleName.Text.FontSize:
+      case StyleName.Text.LineHeight:
         formattedValue = StyleConverter.ToInteger(propValue);
         break;
       default:
@@ -443,4 +198,4 @@ class StyleFormatter {
 
 }
 
-exports.getFormattedValue = StyleFormatter.GetFormattedValue;
+exports.getFormattedValue = StyleFormatter.GetFormattedValue;

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

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

package/patches/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js

@@ -5126,7 +5126,7 @@ function baseCreateRenderer(options, createHydrationFns) {
 
             // 释放renderBreak时，创建出来的占位element
             if (n1.el) {
-                n1.el.parentElement.removeChild(n1.el);
+                n1.el.parentNode.removeChild(n1.el);
                 n1.el = null;
             }
 
@@ -6237,7 +6237,7 @@ function baseCreateRenderer(options, createHydrationFns) {
             // 但是 mount 状态需要进行记录，避免由于RenderBreaker引起子节点未patch因为无法umount状态
 
             if (vnode.jsvRenderBreaker?.breaked) {
-                vnode.el.parentElement.removeChild(vnode.el);
+                vnode.el.parentNode.removeChild(vnode.el);
                 vnode.el = null;
                 vnode.anchor = null;
                 vnode.jsvRenderBreaker = null;