@shijiu/jsview-vue 2.2.201 → 2.2.373

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -27,9 +27,10 @@ import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
-import { TaskType, SlideAnimWrapper, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.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";
 
 const TAG = "MetroWidget";
 
@@ -117,6 +118,9 @@ export const setup = (
     innerKeepTraceRange = props.keepTraceRange;
   } else {
     if (props.touchFlag > 0) {
+      // 激活引擎功能的支持
+      JsvUseFeature('MetroWidget', FeatureNames.TouchReceiver);
+
       //触控默认3屏
       innerKeepTraceRange = 3;
     } else {
@@ -177,6 +181,9 @@ export const setup = (
     },
     getTouchState() {
       return this._touchState;
+    },
+    getTouchCount() {
+      return this._touchCount;
     }
   }
 
@@ -238,7 +245,6 @@ export const setup = (
     let slideDoAnim = false;
 
     mRectCache.cacheManually();
-
     /**
      * 处理resize
      */
@@ -266,6 +272,9 @@ export const setup = (
         })
       });
 
+      //更新touch的size
+      updateTouchDivSize();
+
       //使用上一帧的状态计算anchorPosition
       if (resizeTaskMap[id2Index(focusId)]) {
         const task = resizeTaskMap[id2Index(focusId)];
@@ -292,12 +301,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;
@@ -370,7 +381,7 @@ export const setup = (
         preInfo = mRectCache.getPreRect();
         if (preInfo) {
           let totalSize = metroTemplate.getBoundingBoxSize();
-          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), totalSize[size_key] - v.range);
+          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), Math.max(0, totalSize[size_key] - v.range));
           preInfo[pos_key] += (v.start - visibleInfo.start);
         }
       }
@@ -464,7 +475,7 @@ export const setup = (
     }
 
     //处理滚动动画
-    if (needSlide) {
+    if (forceSlide || needSlide) {
       let animInfo = undefined;
       if (slideDoAnim) {
         animInfo = {
@@ -661,7 +672,7 @@ export const setup = (
 
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
-    if (!focusItem || mode.getMode() != FOCUS_MODE) return;
+    if (!focusItem) return;
     setItemZIndex(focusItem, innerData.length, true);
     if (isFocus) {
       _itemOnFocusSideEffect(focusItem, rect);
@@ -805,7 +816,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,
       {
@@ -813,6 +824,7 @@ export const setup = (
         doAnim,
         direction,
         preItem,
+        force,
       },
       SlideTaskType.SLIDE_BY_ITEM);
   };
@@ -835,22 +847,37 @@ 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
+      || newMeasureItem.height !== oldMeasureItem.height
+      || newMeasureItem.focusable !== oldMeasureItem.focusable
+      || newMeasureItem.marginRight !== oldMeasureItem.marginRight
+      || newMeasureItem.marginBottom !== oldMeasureItem.marginBottom;
+    if (type !== "relative") {
+      changed = changed
+        || newMeasureItem.left !== oldMeasureItem.left
+        || newMeasureItem.top !== oldMeasureItem.top
+    }
+    return changed;
+  }
 
   const DATA_ID_KEY = "jsvKey";
   const refreshData = (forceUpdate) => {
@@ -860,13 +887,14 @@ export const setup = (
       return;
     }
     try {
-      let newData = toRaw(props.provideData());
+      let newData = toRaw(props.provideData()).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) {
@@ -881,11 +909,7 @@ export const setup = (
               } else {
                 const newMeasureItem = props.measures(newItem);
                 const oldMeasureItem = props.measures(oldItem);
-                if (props.layoutType == "relative") {
-                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height;
-                } else {
-                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height || newMeasureItem.left !== oldMeasureItem.left || newMeasureItem.top !== oldMeasureItem.top;
-                }
+                layoutChange = ifLayoutChange(props.layoutType, oldMeasureItem, newMeasureItem);
                 if (layoutChange) {
                   break;
                 } else {
@@ -912,7 +936,7 @@ export const setup = (
           }
         }
 
-        dataList = newData.concat();
+        dataList = newData;
         if (forceUpdate || layoutChange) {
           //需要更新布局
           pageUpdateToken.value++;
@@ -938,16 +962,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);
             }
           }
 
@@ -956,6 +980,7 @@ export const setup = (
             for (let i of onlyDataChangeList) {
               if (i.index < innerData.length) {
                 innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
+                innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
               } else {
                 //之后的数据未布局, 尚未添加到innerData中
                 break;
@@ -964,6 +989,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,
@@ -976,9 +1010,9 @@ export const setup = (
         onItemFocus(getItemById(focusId), null);
         let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
         if (targetRect) {
-          slideToRect(targetRect, false);
+          slideToRectInner(targetRect, false, 0, true);
         } else {
-          slideToItem(id2Index(focusId), false);
+          slideToItemInner(id2Index(focusId), false, 0, 0, true);
         }
         //template和slideDivStyle均确定后再次重设box condition
         updateTouchBoxCondition();
@@ -1026,10 +1060,6 @@ export const setup = (
     return id2Index(focusId);
   }
 
-  const getCurMode = () => {
-    return mode.getMode();
-  }
-
   const getTemplatePosition = (index) => {
     return _getTemplatePosition(index);
   }
@@ -1050,6 +1080,13 @@ export const setup = (
     }
   }
 
+  const tryCancelDelayLoad = () => {
+    if (delayLoadHandler > 0) {
+      clearTimeout(delayLoadHandler);
+      delayLoadHandler = -1;
+    }
+  }
+
   const exportObject = {
     lockSlide,
     unlockSlide,
@@ -1069,9 +1106,10 @@ export const setup = (
     getVisibleItems,
     getCustomerDataSize,
     getCurrentFocusIndex,
-    getCurMode,
     getTemplatePosition,
-    setSlideSetting
+    setSlideSetting,
+    cancelDelayLoad: tryCancelDelayLoad,
+    setSensorSensitivity,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1269,6 +1307,24 @@ export const setup = (
     }
   };
 
+  const onDispatchKeyDown = (ev) => {
+    if (mode.getMode() == TOUCH_MODE && !mode.duringTouch()) {
+      if (ev.keyCode == 37 || ev.keyCode == 38 || ev.keyCode == 39 || ev.keyCode == 40) {
+        //只有在上下左右键切换为focus_mode
+        mode.keyDown();
+        //touch切换为focus的首次按键只显示焦点
+        const focusItem = _getVisibleFocusableItem();
+        const preFocusItem = getItemById(focusId);
+        _changeFocusId(focusItem.id, false);
+        if (preFocusItem.id !== focusItem.id) {
+          onItemBlur(preFocusItem);
+        }
+        onItemFocus(focusItem);
+      }
+    }
+    return false;
+  }
+
   const focusBlockOnKeyDown = (ev) => {
     if (onKeyDownLock) {
       return true;
@@ -1278,14 +1334,6 @@ export const setup = (
       if (mode.duringTouch()) {
         //touch过程中的按键不处理
         return true;
-      } else {
-        //切换为focus_mode
-        mode.keyDown();
-        //touch切换为focus的首次按键只显示焦点
-        const focusItem = _getVisibleFocusableItem();
-        _changeFocusId(focusItem.id, false);
-        onItemFocus(focusItem);
-        return true;
       }
     }
 
@@ -1319,14 +1367,11 @@ export const setup = (
     );
   };
 
-  const _onTemplateAddDone = () => {
-    //update slideDiv size
+  function updateTouchDivSize() {
     const lastTemplateInfo = getItemByIndex(
       metroTemplate.getTailItemIndex()
     )?.templateInfo;
     if (lastTemplateInfo) {
-      let preTouchW = touchDivSize.width;
-      let preTouchH = touchDivSize.height;
       if (vertical) {
         touchDivSize.width = props.width;
         touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
@@ -1334,9 +1379,16 @@ export const setup = (
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
       }
-      if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
-        updateTouchBoxCondition();
-      }
+    }
+  }
+
+  const _onTemplateAddDone = () => {
+    //update slideDiv size
+    let preTouchW = touchDivSize.width;
+    let preTouchH = touchDivSize.height;
+    updateTouchDivSize();
+    if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+      updateTouchBoxCondition();
     }
   }
 
@@ -1644,11 +1696,10 @@ export const setup = (
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
       if (vInfo.start >= 0) {
         let boundary = 0;
-        //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
         const headTemplateInfo = getItemByIndex(0).templateInfo;
         if (
           targetRect
-          && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
+          && (index == headTemplateInfo.index)
           && targetRect[pos_key] + targetRect[size_key] <=
           vInfo.range
         ) {
@@ -1669,7 +1720,7 @@ export const setup = (
         let boundary = lastVisibleStart;
         if (
           targetRect
-          && (!lastTemplateInfo.focusable || index == lastTemplateInfo.index)
+          && (index == lastTemplateInfo.index)
           && targetRect[pos_key] - lastVisibleStart >= 0
         ) {
           boundary = lastTemplateInfo[pos_key] - vInfo.range;
@@ -1961,13 +2012,16 @@ export const setup = (
 
   //touch setting
   let actorController = null;
-  const touchLoadItemRect = visibleInfo.range;
   const reachAnchorGroup = 2;
   const wallConditionGroup = 1;
-  const touchCountGroup = 3;
+  const ScensorCondigionGroup = 3;
+  const TouchDownConditionGroup = 4;
 
   let divPos = -1;
   let frameCount = -1;
+  const DEFAULT_SENSITIVITY = 10;
+  let onMoveSensitivity = -1;
+
   const getVisibleStart = (moveInfo) => {
     divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
     if (vertical) {
@@ -1977,6 +2031,51 @@ export const setup = (
     }
   }
 
+  function onSensor(pos) {
+    const lastTemplateInfo = getItemByIndex(
+      metroTemplate.getTailItemIndex()
+    )?.templateInfo;
+    let totalWidth = 0;
+    if (lastTemplateInfo) {
+      if (vertical) {
+        totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+      } else {
+        totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+      }
+    }
+    props.onScroll?.(
+      vertical ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop) : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
+      visibleInfo.range,
+      totalWidth
+    );
+  }
+
+  function setOnMovement(sensitivity) {
+    onMoveSensitivity = sensitivity;
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(ScensorCondigionGroup),
+      cmds
+        .condition(ScensorCondigionGroup, true)
+        .onMovement(sensitivity) // 设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+        .then([onSensor]),
+    ]);
+  }
+
+  function setSensorSensitivity(sensitivity = DEFAULT_SENSITIVITY) {
+    if (!actorController) { return }
+    if (sensitivity <= 0) {
+      actorController.run((cmds) => [
+        cmds.state().removeConditionByGroup(ScensorCondigionGroup),
+      ]);
+      return;
+    }
+
+    if (sensitivity != onMoveSensitivity) {
+      setOnMovement(sensitivity)
+    }
+  }
+
+
   const getTouchCount = (nexusCustomData) => {
     let touchCount = -1;
     if (nexusCustomData) {
@@ -2017,15 +2116,19 @@ export const setup = (
       ])
     ]);
   }
+  function onTouchActionDone(touchCount) {
+    //一次触控动作结束
+    mergeTouchSlideToSlideDiv(touchCount);
+    //由于movement的监听是有帧数间隔的, 所以结束时需要再调用一次onScroll
+    _onScroll();
+  }
 
   const onTouchDown = (data, customData, nexusCustomData) => {
     touchRecorder.reset();
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.setTouchCount(touchCount);
-    if (mode.getMode() == FOCUS_MODE) {
-      //模式切换, 更新boxPosition
-      updateTouchBoxCondition();
-    }
+    updateTouchBoxCondition();
+
     mode.touchStart(touchCount);
     // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
     //  "onTouchDown", data, customData, nexusCustomData)
@@ -2044,18 +2147,18 @@ export const setup = (
     let passDownTouchInfo = nexusCustomData;
     actorController.run((cmds) => [
       cmds
-        .condition(undefined, false)
+        .condition(TouchDownConditionGroup, false)
         .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
         .then([
           cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)]),
       cmds
-        .condition(undefined, false)
+        .condition(TouchDownConditionGroup, false)
         .startMove(true, true)
         .then([SliderEditFuncReOrderWrap((d) => { onDragStart(d, null, passDownTouchInfo) })]),
     ])
 
     //blur item
-    onItemBlur(getItemById(focusId));
+    // onItemBlur(getItemById(focusId));
 
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
@@ -2100,19 +2203,26 @@ export const setup = (
       mode.touchEnd(touchCount);
     } else {
       if (touchRecorder.moved && !mode.duringFling()) {
-        mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
+        onTouchActionDone(touchRecorder.touchCount);
         updateRenderItems(false, false);
         mode.touchEnd(touchCount)
       }
     }
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(TouchDownConditionGroup),
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
+    ])
   }
 
   const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
 
   const onDragStart = (data, customData, nexusCustomData) => {
-    let touchCount = getTouchCount(nexusCustomData); // 注意，由startMove触发的onDragStart是没有touchCount的
+    let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.dragStart(touchCount)
+    if (!(mode.getTouchCount() == touchCount && mode.duringFling())) {
+      //dragStart event may be triggered after fling event because of sending it when startMove condition is satisfied
+      mode.dragStart(touchCount)
+    }
     visibleInfo.start = getVisibleStart(data);
   }
 
@@ -2140,12 +2250,11 @@ export const setup = (
   }
 
   const onFlingEnd = (data, customData, nexusCustomData) => {
-    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     //记录拖拽的距离
     if (mode.duringFling()) {
       let touchCount = getTouchCount(nexusCustomData);
-      mergeTouchSlideToSlideDiv(touchCount);
+      onTouchActionDone(touchCount);
       updateRenderItems(false, false);
       mode.flingEnd(touchCount);
       mode.touchEnd(touchCount);
@@ -2166,13 +2275,13 @@ export const setup = (
       bottom: 0,
     }
     if (vertical) {
-      wall.top = -boxSize.height + props.height - slideDivTop.value;
+      wall.top = -boxSize.height + props.height - slideDivTop.value - (widgetRectInfo.padding.top + widgetRectInfo.padding.bottom);
       wall.bottom = -slideDivTop.value;
       if (wall.top > wall.bottom) {
         wall.top = wall.bottom;
       }
     } else {
-      wall.left = -boxSize.width + props.width - slideDivLeft.value;
+      wall.left = -boxSize.width + props.width - slideDivLeft.value - (widgetRectInfo.padding.left + widgetRectInfo.padding.right);
       wall.right = -slideDivLeft.value;
       if (wall.left > wall.right) {
         wall.left = wall.right;
@@ -2239,11 +2348,12 @@ export const setup = (
     }
   }
 
-
   //TODO debug
   // let debugAnimId = -1;
   // let debugViewId = -1
+  let touchInited = false;
   const initTouch = () => {
+    touchInited = true;
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
@@ -2266,7 +2376,6 @@ export const setup = (
       }
     )
 
-
     // debugAnimId = actorController.debugGetAnimId();
     // debugViewId = divView.ViewId;
     // console.log("testtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
@@ -2310,6 +2419,17 @@ export const setup = (
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
         .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
     ]);
+
+    if (props.onScroll) {
+      setOnMovement(DEFAULT_SENSITIVITY);
+    }
+  }
+
+  function cleanTouch() {
+    actorController.run((cmds) => [
+      cmds.state().clearAllConditions(),
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
+    ])
   }
 
   //init
@@ -2322,9 +2442,9 @@ export const setup = (
     : { start: widgetRectInfo.padding.left, end: widgetRectInfo.padding.right };
 
   if (props.provideData) {
-    dataList = toRaw(props.provideData());
+    dataList = toRaw(props.provideData())?.concat();
   } else if (props.data) {
-    dataList = toRaw(props.data);
+    dataList = toRaw(props.data)?.concat();
   }
 
   templateItemAdder = new TemplateItemAdder(
@@ -2369,20 +2489,20 @@ export const setup = (
     permanentItemList
   );
   initUpdater.apply();
-  //延时加载剩余屏
-  const delayLoadHandler = setTimeout(() => {
-    const updateHandler = pageUpdater.update(
-      metroTemplate,
-      initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-      initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-      focusId,
-      false,
-      permanentItemList
-    );
-    updateHandler.apply();
-  }, 200);
-  const tryCancelDelayLoad = () => {
-    clearTimeout(delayLoadHandler);
+  //触控时, 延时加载剩余屏
+  let delayLoadHandler = -1;
+  if (props.touchFlag > 0) {
+    delayLoadHandler = setTimeout(() => {
+      const updateHandler = pageUpdater.update(
+        metroTemplate,
+        initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+        initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+        focusId,
+        false,
+        permanentItemList
+      );
+      updateHandler.apply();
+    }, 200);
   }
 
   onMounted(() => {
@@ -2411,6 +2531,9 @@ export const setup = (
     taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
+    if (touchInited) {
+      cleanTouch();
+    }
   });
 
   return {
@@ -2426,5 +2549,6 @@ export const setup = (
     onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
+    onDispatchKeyDown
   }
 }

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -83,7 +83,7 @@ class ListMetroTemplate extends MetroTemplate {
     hOffset: number, moveType: number): TemplateItem | null {
     const item = this.getItemById(baseId) as any;
     if (item) {
-      let neighborDirection: string | null = null;
+      let neighborDirection: "left" | "right" | "bottom" | "top" | null = null;
       if (this.direction == VERTICAL) {
         if (vOffset > 0) {
           neighborDirection = "bottom";
@@ -97,16 +97,22 @@ class ListMetroTemplate extends MetroTemplate {
           neighborDirection = "left";
         }
       }
-      if (!neighborDirection) return null;
-      let target = this.getItemByIndex(item.neighborIndexList[neighborDirection]?.[0]);
-      while (target) {
-        if (target.focusable) {
-          break;
-        } else {
-          target = this.getItemByIndex(item.neighborIndexList[neighborDirection]?.[0]);
+      if (neighborDirection !== null) {
+        if (item.neighborIndexList[neighborDirection].length === 0) return null;
+        let target = this.getItemByIndex(item.neighborIndexList[neighborDirection][0]);
+        while (target) {
+          if (target.focusable) {
+            break;
+          } else {
+            if (target.neighborIndexList[neighborDirection].length > 0) {
+              target = this.getItemByIndex(target.neighborIndexList[neighborDirection][0]);
+            } else {
+              return null;
+            }
+          }
         }
+        return target;
       }
-      return target;
     }
     return null;
   }