@shijiu/jsview-vue 2.2.426-test.0 → 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
@@ -301,12 +313,14 @@ export const setup = (
     let direction = undefined;
 
     let validSlideTask = false;
+    let forceSlide = false;
     if (allTask.slide.length > 0) {
       validSlideTask = true;
       //有滚动时, 取消延时加载
       tryCancelDelayLoad();
       let slideTask = lastOfArray(allTask.slide);
       slideDoAnim = slideTask.params.doAnim;
+      forceSlide = slideTask.params.force;
       switch (slideTask.subType) {
         case SlideTaskType.SLIDE_BY_DIV: {
           const div = slideTask.params.div;
@@ -364,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;
@@ -473,7 +497,7 @@ export const setup = (
     }
 
     //处理滚动动画
-    if (needSlide) {
+    if (forceSlide || needSlide) {
       let animInfo = undefined;
       if (slideDoAnim) {
         animInfo = {
@@ -602,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) => {
@@ -668,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
@@ -814,7 +862,7 @@ export const setup = (
     }
   };
 
-  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined) => {
+  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined, force = false) => {
     taskManager.addTask(
       TaskType.SLIDE,
       {
@@ -822,6 +870,7 @@ export const setup = (
         doAnim,
         direction,
         preItem,
+        force,
       },
       SlideTaskType.SLIDE_BY_ITEM);
   };
@@ -844,22 +893,23 @@ export const setup = (
         SlideTaskType.SLIDE_BY_DIV);
     }
   }
-  const slideToRect = (rect, doAnim, direction = undefined) => {
-    if (rect
-      && typeof rect.left == 'number'
-      && typeof rect.top == 'number'
-      && typeof rect.width == 'number'
-      && typeof rect.height == 'number') {
+  const slideToRectInner = (rect, doAnim, direction, force) => {
+    if (rect && typeof rect.left == "number" && typeof rect.top == "number" && typeof rect.width == "number" && typeof rect.height == "number") {
       taskManager.addTask(
         TaskType.SLIDE,
         {
           rect,
           doAnim,
           direction,
+          force
         },
-        SlideTaskType.SLIDE_BY_RECT);
+        SlideTaskType.SLIDE_BY_RECT
+      );
     }
   }
+  const slideToRect = (rect, doAnim, direction = undefined) => {
+    slideToRectInner(rect, doAnim, direction, false);
+  }
 
   function ifLayoutChange(type, oldMeasureItem, newMeasureItem) {
     let changed = newMeasureItem.width !== oldMeasureItem.width
@@ -875,21 +925,26 @@ 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());
+      let newData = toRaw(safeProvideData()).concat();
       if (newData instanceof Array) {
         let maxSameIndex = -1;
         let layoutChange = false;
         let onlyDataChangeList = [];
+        let targetFocusId = focusId
         if (focusId >= newData.length) {
-          _changeFocusId(newData.length - 1, false)
+          targetFocusId = newData.length - 1
         }
 
         if (!forceUpdate) {
@@ -897,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 {
@@ -931,7 +986,24 @@ export const setup = (
           }
         }
 
-        dataList = newData.concat();
+        //记录刷新前焦点的可视状态, 若焦点可视, 则刷新后也需要保证焦点的可视
+        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++;
@@ -957,16 +1029,16 @@ export const setup = (
           if (props.onScroll) {
             templateItemAdder.tryAddItemByIndex(dataList.length - 1);
           } else {
-            templateItemAdder.tryAddItemById(focusId);
+            templateItemAdder.tryAddItemById(targetFocusId);
           }
         } else {
-          if (maxSameIndex < newData.length) {
+          if (maxSameIndex < newData.length - 1) {
             //追加数据
             templateItemAdder.updateData(newData);
             if (props.onScroll) {
               templateItemAdder.tryAddItemByIndex(dataList.length - 1);
             } else {
-              templateItemAdder.tryAddItemById(focusId);
+              templateItemAdder.tryAddItemById(targetFocusId);
             }
           }
 
@@ -984,6 +1056,15 @@ export const setup = (
           }
         }
 
+        if (targetFocusId != focusId) {
+          //重置所有的滚动信息
+          _changeFocusId(targetFocusId, false);
+          visibleInfo = visibleInfo.copy();
+          visibleInfo.start = 0;
+          visibleInfo._startMax = 0;
+          slideDivLeft.value = 0;
+          slideDivTop.value = 0;
+        }
         const updater = pageUpdater.update(
           metroTemplate,
           visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
@@ -993,13 +1074,17 @@ export const setup = (
           permanentItemList
         );
         updater.apply();
-        onItemFocus(getItemById(focusId), null);
-        let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
-        if (targetRect) {
-          slideToRect(targetRect, false);
-        } else {
-          slideToItem(id2Index(focusId), false);
+        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();
       }
@@ -1096,6 +1181,7 @@ export const setup = (
     setSlideSetting,
     cancelDelayLoad: tryCancelDelayLoad,
     setSensorSensitivity,
+    getItemLayoutInfo: _getTemplatePosition,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1311,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()) {
@@ -1323,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() {
@@ -1512,7 +1634,9 @@ export const setup = (
           cur_slide,
           true,
           {
-            mergeTmp: true
+            //250207 change: 为true时, 会导致不可见的item反复加载,释放, 所以改为false
+            //但之前设为true应该是为了保证滚动时的楼层不提前消失, 此后若再遇到这类问题再考虑
+            mergeTmp: false
           });
         return true;
       }
@@ -1682,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的位置作为动态的保护边界
@@ -1704,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的位置作为动态的保护边界
@@ -1926,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?.();
   };
 
@@ -1967,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;
         }
       }
@@ -2419,6 +2527,10 @@ export const setup = (
   }
 
   //init
+
+  function safeProvideData() {
+    return props.provideData() ?? [];
+  }
   pageUpdater = new PageUpdater(_updatePage, props.name);
   visibleInfo.range = vertical
     ? widgetRectInfo.contentHeight
@@ -2428,10 +2540,11 @@ export const setup = (
     : { start: widgetRectInfo.padding.left, end: widgetRectInfo.padding.right };
 
   if (props.provideData) {
-    dataList = toRaw(props.provideData());
+    dataList = toRaw(safeProvideData())?.concat();
   } else if (props.data) {
-    dataList = toRaw(props.data);
+    dataList = toRaw(props.data ?? [])?.concat();
   }
+  dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
 
   templateItemAdder = new TemplateItemAdder(
     metroTemplate,
@@ -2497,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) {
@@ -2527,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/JsViewPlugin/JsvAudio/version.js

@@ -16,7 +16,7 @@ let PluginInfo = {
     listener: "top.JsvAudioPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvAudioPluginStatus",
     // debug:true,
-    // md5:"baafc8ea737adcad5443f44cc0112498"
+    md5: "5ab9bfbec33034a6a26df7c1187b3c8f"
 };
 
 // 不要用export default，update-env脚本不能解析

package/utils/JsViewPlugin/JsvAudio/version.mjs

@@ -16,7 +16,7 @@ let PluginInfo = {
   listener: "top.JsvAudioPluginLoadResult",  //插件加载结果回调
   listener2: "top.JsvAudioPluginStatus",
   // debug:true,
-  // md5:"baafc8ea737adcad5443f44cc0112498"
+  md5: "5ab9bfbec33034a6a26df7c1187b3c8f"    // 插件的md5, 此信息是内网场景回使用，一定要对齐md5
 };
 
 // 不要用export default，update-env脚本不能解析