@shijiu/jsview-vue 2.2.373 → 2.3.0

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -29,10 +29,12 @@ import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
 import { TaskType, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
 import { getDirectionByRect, RectCache } from "./Slide.ts";
-import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 import { FeatureNames, JsvUseFeature } from "../../JsViewVueTools/FeatureActive.ts";
+import { randomColor } from "./DebugTools.ts";
 
 const TAG = "MetroWidget";
+const LONGPRESS_TIMEOUT = 600;
+const DATA_ID_KEY = "jsvKey";
 
 let metroWidgetTokenGen = 1;
 
@@ -189,6 +191,7 @@ export const setup = (
 
   let innerData = [];
   let dataList = [];
+  let dataKeyList = [];
   let pageUpdater = null;
   let enterFocusId = -1;
   let enterFocusRect = null;
@@ -205,7 +208,7 @@ export const setup = (
   let childSlideEventLock = false;
   let onKeyDownLock = false;
   let visibleInfo = new VisibleInfo();
-  let alreadyCallItemFocus = false;
+  let firstOnItemFocusCalled = false;
   let innerSlideSetting = props.slideSetting
   const currentFocusIndex = ref(0);
 
@@ -215,11 +218,20 @@ export const setup = (
 
   const DEFAULT_ANIMATION_DURATION = 200;
 
-  const isItemVisible = (item) => {
+  //rect {left: number, top: number, width: number, height: number }
+  const rectVisibleState = (rect) => {
+    if (!rect) {
+      return 0;
+    }
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
-    return item.templateInfo[pos_key] >= visibleInfo.start
-      && item.templateInfo[pos_key] + item.templateInfo[size_key] - 1 < visibleInfo.end;
+    if (rect[pos_key] + rect[size_key] - 1 < visibleInfo.start || rect[pos_key] > visibleInfo.end) {
+      return 0; // 完全不可见
+    } else if (rect[pos_key] < visibleInfo.start || rect[pos_key] + rect[size_key] - 1 > visibleInfo.end) {
+      return 1; // 部分可见
+    } else {
+      return 2; // 完全可见
+    }
   }
 
   //tools
@@ -366,6 +378,16 @@ export const setup = (
         let start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
         let totalSize = metroTemplate.getBoundingBoxSize();
         start = Math.min(Math.max(0, start), totalSize[size_key] - visibleInfo.range)
+        //resize的情况下, 需要保证第一个和最后一个尺寸变化后, 能完整展示
+        if (focusItem.index == 0) {
+          if (start > focusItem.templateInfo[pos_key]) {
+            start = 0;
+          }
+        } else if (focusItem.templateInfo.index == metroTemplate.getTailItemIndex()) {
+          if (start + visibleInfo.range > focusItem.templateInfo[pos_key]) {
+            start = Math.max(focusItem.templateInfo[size_key] + focusItem.templateInfo[pos_key] - visibleInfo.range, 0);
+          }
+        }
         targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index, visibleInfo);
       } else {
         targetRect = getItemById(focusId).templateInfo;
@@ -604,12 +626,16 @@ export const setup = (
   };
   const _getTemplatePosition = (index) => {
     let templateInfo = getItemByIndex(index).templateInfo;
-    return {
-      left: templateInfo.left,
-      top: templateInfo.top,
-      width: templateInfo.width,
-      height: templateInfo.height,
-    };
+    if (templateInfo) {
+      return {
+        left: templateInfo.left,
+        top: templateInfo.top,
+        width: templateInfo.width,
+        height: templateInfo.height,
+      };
+    } else {
+      return null;
+    }
   };
 
   const id2Index = (id) => {
@@ -670,21 +696,41 @@ export const setup = (
     }
   };
 
+  let gazeIndex = -1
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
     if (!focusItem) return;
     setItemZIndex(focusItem, innerData.length, true);
     if (isFocus) {
       _itemOnFocusSideEffect(focusItem, rect);
-      const called = focusItem.onFocus(rect);
-      if (!called) {
-        callFocusAfterUpdate = true;
+    }
+
+    if (focusItem.mounted.value) {
+      if (gazeIndex != focusItem.templateInfo.index) {
+        let preGazeItem = getItemByIndex(gazeIndex);
+        if (preGazeItem) {
+          preGazeItem.onIgnore();
+        }
+        gazeIndex = focusItem.templateInfo.index
+        focusItem.onGaze(rect);
       }
-      return called;
+      if (isFocus) {
+        focusItem.onFocus(rect);
+      }
+      return true;
+    } else {
+      callFocusAfterUpdate = true;
+      return false;
     }
-    return false;
   };
 
+  const onItemLongPress = (item) => {
+    if (!item) { return; }
+    if (isFocus) {
+      item.onLongPress();
+    }
+  }
+
   const setFocusByUid = (uid, needSlide = true, doAnim = false, extraSetting) => {
     if (!uid || innerData.length <= 0) { return; }
     //添加item
@@ -879,15 +925,19 @@ export const setup = (
     return changed;
   }
 
-  const DATA_ID_KEY = "jsvKey";
-  const refreshData = (forceUpdate) => {
+  /**
+   * 刷新数据
+   * @param {boolean} forceUpdate 是否强制更新
+   * @param {string} slideToFocus 是否滚动到焦点 "auto" 自动滚动到焦点 "enable" 滚动到焦点 "disable" 不滚动到焦点
+   */
+  const refreshData = (forceUpdate, slideToFocus = "auto") => {
     //由于data不支持reactive, 因此数据的更新只通过provideData
     if (!props.provideData) {
       console.error("refreshData: provideData is null.");
       return;
     }
     try {
-      let newData = toRaw(props.provideData()).concat();
+      let newData = toRaw(safeProvideData()).concat();
       if (newData instanceof Array) {
         let maxSameIndex = -1;
         let layoutChange = false;
@@ -902,8 +952,8 @@ export const setup = (
             let oldItem = dataList[i];
             let newItem = newData[i];
             if (newItem) {
-              if (newItem === oldItem
-                || (typeof newItem[DATA_ID_KEY] !== "undefined" && typeof oldItem[DATA_ID_KEY] !== "undefined" && newItem[DATA_ID_KEY] === oldItem[DATA_ID_KEY])) {
+              if (((typeof newItem[DATA_ID_KEY] == "undefined" || typeof dataKeyList[i] == "undefined") && newItem === oldItem)
+                || (typeof newItem[DATA_ID_KEY] !== "undefined" && typeof dataKeyList[i] !== "undefined" && newItem[DATA_ID_KEY] === dataKeyList[i])) {
                 //相同的item
                 maxSameIndex = Math.max(maxSameIndex, i);
               } else {
@@ -936,7 +986,24 @@ export const setup = (
           }
         }
 
+        //记录刷新前焦点的可视状态, 若焦点可视, 则刷新后也需要保证焦点的可视
+        let needSlide = false;
+        if (slideToFocus == "enable") {
+          needSlide = true;
+        } else if (slideToFocus == "disable") {
+          needSlide = false;
+        } else {
+          let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+          if (targetRect) {
+            needSlide = rectVisibleState(targetRect) !== 0;
+          } else {
+            needSlide = rectVisibleState(getItemById(focusId)?.templateInfo) !== 0;
+          }
+        }
+        
         dataList = newData;
+        dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
+
         if (forceUpdate || layoutChange) {
           //需要更新布局
           pageUpdateToken.value++;
@@ -1007,13 +1074,17 @@ export const setup = (
           permanentItemList
         );
         updater.apply();
-        onItemFocus(getItemById(focusId), null);
-        let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
-        if (targetRect) {
-          slideToRectInner(targetRect, false, 0, true);
-        } else {
-          slideToItemInner(id2Index(focusId), false, 0, 0, true);
+        const focusItem = getItemById(focusId);
+        onItemFocus(focusItem, null);
+        if (needSlide) {
+          if (targetRect) {
+            slideToRectInner(targetRect, false, 0, true);
+          } else if (focusItem.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+              //只有这个item是控制滚动的才slide, 其他如嵌套时不需要slide
+              slideToItemInner(id2Index(focusId), false, 0, 0, true);
+            }
         }
+        
         //template和slideDivStyle均确定后再次重设box condition
         updateTouchBoxCondition();
       }
@@ -1110,6 +1181,7 @@ export const setup = (
     setSlideSetting,
     cancelDelayLoad: tryCancelDelayLoad,
     setSensorSensitivity,
+    getItemLayoutInfo: _getTemplatePosition,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1325,10 +1397,56 @@ export const setup = (
     return false;
   }
 
+  const _moveByKey = (keyCode) => {
+    switch (keyCode) {
+      case 37:
+        _moveToNext(-1, 0);
+        return true;
+      case 38:
+        _moveToNext(0, -1);
+        return true;
+      case 39:
+        _moveToNext(1, 0);
+        return true;
+      case 40:
+        _moveToNext(0, 1);
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  let clickDownReceived = false;
+  let longPressTriggered = false;
+
+  const focusBlockOnKeyUp = (ev) => {
+    if (!props.enableLongPress) {
+      return false;
+    }
+    //支持长按时 onClick 由 keyup 处理
+    //longpress触发时, 不触发onClick
+    //没有keydown, 只有keyup时, 不处理keyup
+    if (!longPressTriggered) {
+      if (ev.keyCode == 13 && clickDownReceived) {
+        clickDownReceived = false;
+        onItemClick(getItemById(focusId));
+        return true;
+      }
+    } else {
+      longPressTriggered = false;
+    }
+    return false;
+  }
+
+  let preStartKeyDownTime = -1;
   const focusBlockOnKeyDown = (ev) => {
     if (onKeyDownLock) {
       return true;
     }
+    if (!ev.repeat) {
+      longPressTriggered = false;
+      preStartKeyDownTime = ev.timeStamp;
+    }
     tryCancelDelayLoad();
     if (mode.getMode() == TOUCH_MODE) {
       if (mode.duringTouch()) {
@@ -1337,34 +1455,24 @@ export const setup = (
       }
     }
 
-    switch (ev.keyCode) {
-      case 37:
-        _moveToNext(-1, 0);
-        break;
-      case 38:
-        _moveToNext(0, -1);
-        break;
-      case 39:
-        _moveToNext(1, 0);
-        break;
-      case 40:
-        _moveToNext(0, 1);
-        break;
-      case 13:
+    if (_moveByKey(ev.keyCode)) {
+      return true;
+    }
+    if (ev.keyCode == 13) {
+      clickDownReceived = true;
+      if (props.enableLongPress) {
+        if (ev.repeat && ev.timeStamp - preStartKeyDownTime > LONGPRESS_TIMEOUT && !longPressTriggered) {
+          longPressTriggered = true;
+          onItemLongPress(getItemById(focusId));
+        }
+      } else if (!ev.repeat) {
         onItemClick(getItemById(focusId));
-        break;
-      default:
-        //只接受上下左右确定键
-        return false;
+      }
+      return true;
+    } else {
+      clickDownReceived = false;
     }
-    return true;
-  };
-
-  const randomColor = () => {
-    let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-    return (
-      "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor + "77"
-    );
+    return false;
   };
 
   function updateTouchDivSize() {
@@ -1526,7 +1634,9 @@ export const setup = (
           cur_slide,
           true,
           {
-            mergeTmp: true
+            //250207 change: 为true时, 会导致不可见的item反复加载,释放, 所以改为false
+            //但之前设为true应该是为了保证滚动时的楼层不提前消失, 此后若再遇到这类问题再考虑
+            mergeTmp: false
           });
         return true;
       }
@@ -1696,15 +1806,6 @@ export const setup = (
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
       if (vInfo.start >= 0) {
         let boundary = 0;
-        const headTemplateInfo = getItemByIndex(0).templateInfo;
-        if (
-          targetRect
-          && (index == headTemplateInfo.index)
-          && targetRect[pos_key] + targetRect[size_key] <=
-          vInfo.range
-        ) {
-          boundary = headTemplateInfo[size_key];
-        }
         visibleStart = visibleStart < boundary ? 0 : visibleStart;
       } else {
         // 以最后一个item的位置作为动态的保护边界
@@ -1718,13 +1819,6 @@ export const setup = (
       //边界必须大于等于0, 同时若最后一个缩进时, 边界采用最后一个item的位置
       if (vInfo.end <= lastEnd) {
         let boundary = lastVisibleStart;
-        if (
-          targetRect
-          && (index == lastTemplateInfo.index)
-          && targetRect[pos_key] - lastVisibleStart >= 0
-        ) {
-          boundary = lastTemplateInfo[pos_key] - vInfo.range;
-        }
         visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
       } else {
         // 以最后一个item的位置作为动态的保护边界
@@ -1940,7 +2034,7 @@ export const setup = (
     _changeFocusId(focus_id, false);
     enterFocusId = -1;
     enterFocusRect = null;
-    alreadyCallItemFocus = onItemFocus(getItemById(focusId), preEdgeRect);
+    firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);;
     props.onFocus?.();
   };
 
@@ -1981,12 +2075,12 @@ export const setup = (
 
   const _getVisibleFocusableItem = () => {
     const focusItem = getItemById(focusId);
-    if (isItemVisible(focusItem)) {
+    if (rectVisibleState(focusItem.templateInfo) == 2) {
       return focusItem;
     } else {
       //遍历renderList, 找到第一个可见的 focusable item
       for (let item of renderData.value) {
-        if (item.templateInfo.focusable && isItemVisible(item)) {
+        if (item.templateInfo.focusable && rectVisibleState(item.templateInfo) == 2) {
           return item;
         }
       }
@@ -2433,6 +2527,10 @@ export const setup = (
   }
 
   //init
+
+  function safeProvideData() {
+    return props.provideData() ?? [];
+  }
   pageUpdater = new PageUpdater(_updatePage, props.name);
   visibleInfo.range = vertical
     ? widgetRectInfo.contentHeight
@@ -2442,10 +2540,11 @@ export const setup = (
     : { start: widgetRectInfo.padding.left, end: widgetRectInfo.padding.right };
 
   if (props.provideData) {
-    dataList = toRaw(props.provideData())?.concat();
+    dataList = toRaw(safeProvideData())?.concat();
   } else if (props.data) {
-    dataList = toRaw(props.data)?.concat();
+    dataList = toRaw(props.data ?? [])?.concat();
   }
+  dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
 
   templateItemAdder = new TemplateItemAdder(
     metroTemplate,
@@ -2511,8 +2610,8 @@ export const setup = (
     if (initVisibleStart) {
       slideToInner(initVisibleStart, false);
     }
-    if (isFocus && !alreadyCallItemFocus) {
-      onItemFocus(getItemById(focusId), preEdgeRect);
+    if (!firstOnItemFocusCalled) {
+      firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
     }
 
     if (props.enableItemRenderBreak) {
@@ -2541,6 +2640,7 @@ export const setup = (
     focusBlockOnFocus,
     focusBlockOnBlur,
     focusBlockOnKeyDown,
+    focusBlockOnKeyUp,
     focusBlockOnCustomEvent,
     _onFocusableItemEdge,
     exportObject,

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -23,8 +23,11 @@ interface CustomerCallbackMap {
   onFocus?: (rect: object) => void,
   onBlur?: () => void,
   onClick?: () => void,
+  onLongPress?: () => void,
   onTap?: () => void,
   onWidgetEdge?: (rect: object) => void,
+  onGaze?: (rect: object) => void,
+  onIgnore?: () => void,
 }
 
 export class RenderItem {
@@ -125,6 +128,24 @@ export class RenderItem {
     }
   }
 
+  public onGaze(rect: object): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onGaze?.(rect);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  public onIgnore(): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onIgnore?.();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   public readonly onTap = computed(() => {
     return this.enableTap ? this.onClick.bind(this) : null;
   })
@@ -138,6 +159,15 @@ export class RenderItem {
     }
   }
 
+  public onLongPress(): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onLongPress?.();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   public onWidgetEdge(rect: object): boolean {
     if (this.mounted.value) {
       this.customerCallbackMap.onWidgetEdge?.(rect);

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -1,4 +1,4 @@
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
 
 interface AnimSetting {
   easing?: string | null;

package/utils/JsViewEngineWidget/TemplateParser/Fence.ts

@@ -1,4 +1,4 @@
-interface GapInfo {
+export interface GapInfo {
   readonly GapStart: number,
   readonly GapEnd: number,
 }
@@ -132,4 +132,4 @@ class Fence {
     return newFence;
   }
 }
-export { Fence, GapInfo }
+export { Fence }

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -137,7 +137,7 @@ interface FindNextAnchor {
   bottom: number,
 }
 
-interface TemplateItem {
+export interface TemplateItem {
   id: number,
   index: number,
   left: number,
@@ -165,7 +165,7 @@ interface TemplateItem {
   uid?: string,
 }
 
-interface MeasureInfo {
+export interface MeasureInfo {
   left?: number,
   top?: number,
   width: number,
@@ -386,7 +386,5 @@ abstract class MetroTemplate {
 }
 
 export {
-  MeasureInfo,
   MetroTemplate,
-  TemplateItem,
 }

package/utils/JsViewPlugin/JsvPlayer/AckEventDefine.ts

@@ -0,0 +1,82 @@
+export class AckEventDefine {
+    // Category
+    static CATEGORY_JSC: number = 1;
+    static CATEGORY_VIEW: number = 2;
+    static CATEGORY_EXCEPTION: number = 3;
+
+    // Type of jsc
+    // Content lifeCycle: event格式:
+    // {
+    //      "act": string类型，当前动作，
+    //      		JsContext重载启动时(reload动作，或者loadUrl动作, 以及closeView时): "reset"
+    //				js启动过程事件: 按顺序
+    //					"systemJsLoaded": 系统js加载完成
+    //					"engineJsRead": Engine Js 完成下载
+    //					"engineJsLoaded": Engine Js 完成eval
+    //					"mainJsRead": Main Js 完成下载
+    //					"mainJsLoaded": Main Js 完成 eval
+    //					"appJsStart": 开始运行框架的主入口处理
+    //      "contextId": int类型，发生事件对应的context id，当url切换或者reload时，contentId会发生变化
+    // }
+    static TYPE_JS_CONTEXT_LIFECYCLE: number = 1;
+
+    // Content permission: event格式:
+    // {
+    //      "contextId": int类型，发生事件对应的context id，当url切换或者reload时，contentId会发生变化
+    //      "authDone": int类型  是否完成校验, 0: 还未进行校验,  1: 已完成校验
+    // ================== 授权做完后的信息 ====================
+    // success(bool): 当次授权校验是否通过
+    // showAlert(bool): APP界面右下角展示未授权提示，满足下面条件之一时会展示
+    //                  1. app运行的main.js是未进行签名(签名参考src/appConfig/中的描述)的，提示"npm start 调试模式"
+    //                  2. 仅在在线授权服务器无法达到, 并且达到允许次数时生效(每日累计1次, 最多累计30天), 提示"抢先版内核"
+    //                  3. 远程授权api返回结果为未授权时
+    //                  4. 本地有授权文件，但授权文件不合法或者过期
+    // errorCount(int): 在线授权api访问失败(网络不通)的累计次数, api访问到并拿到结果后清0
+    // checkType(int): 授权的校验方式, 1: 调试模式, 2: 本地文件校验的方式, 3: 在线校验方式
+    // customDescribe: 授权的描述, 许可范围等描述
+    // errorCode: 授权失败的错误码
+    //     -1: apk签名不匹配(仅离线校验时)
+    //     -2: js的app name未登记
+    //     -3: js的app签名和app name登记信息不匹配
+    //     -4: permission.js文件过期
+    //     -5: core版本不匹配
+    //     -6: 分支名不匹配
+    //     -7: 在线鉴权时未通过的统一错误码(后台详细错误码搭建中...)
+    //     -8: 页面为npm start的调试模式(开发人员调试时才会出现此状态)
+    //     -101: 本地permission.js文件格式错误
+    //     -102: permission.js文件授权信息中core版本无法正确解析为数字错误
+    //     -103: permission.js文件授权信息中的日期格式错误
+    //     -105: 在线鉴权api请求失败错误
+    // playerMaxVer(int): 播放器授权的最高版本(0000 00000) 前4位为渠道号，后5位为版本号
+    // }
+    static TYPE_JS_CONTEXT_PERMISSION: number = 2;
+
+    // Type of view
+    // Shared view layout: event格式:
+    // {
+    //      "x": int类型，对应view更新到了x位置,
+    //      "y": int类型，对应view更新到了y位置,
+    //      "width": int类型，对应view宽度更新后的值,
+    //      "height": int类型，对应view高度更新后的值,
+    //      "mat4": native指针类型, view的位置信息的matrix,
+    //      "visible": int类型, view是否可见,(0:不可见, 1:可见)
+    //      "order": int类型, 本NativeSharedView的相对图层
+    //      "dw": int类型，Design map width，用于换算x,y,width,height
+    // }
+    static TYPE_SHARED_VIEW_LAYOUT: number = 1;
+
+    // app view aspect ratio change: event格式:
+    // {
+    //      "width": int类型，横轴比例，对应"16/9"中的16,
+    //      "height": int类型，纵轴比例，对应"16/9"中的9,
+    // }
+    static TYPE_APP_ASPECT_RATIO_CHANGE: number = 2;
+
+    // Type of exception
+    // Unhandled exit action: event格式:
+    // {
+    //      "reason": string类型，触发离开动作的触发器，例如: "backKey",
+    //      "comment": string类型, 当BackKey场景, 为"keyDown"和"keyUp"
+    // }
+    static TYPE_EXCEPTION_UNHANDLED_EXIT_ACTION: number = 1;
+}