@shijiu/jsview-vue 2.3.0 → 2.3.151-test.0

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -27,9 +27,17 @@ import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
-import { TaskType, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
+import {
+  TaskType,
+  TaskManager,
+  AnimationManager,
+  SlideTaskType,
+} from "./TaskManager.ts";
 import { getDirectionByRect, RectCache } from "./Slide.ts";
-import { FeatureNames, JsvUseFeature } from "../../JsViewVueTools/FeatureActive.ts";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive.ts";
 import { randomColor } from "./DebugTools.ts";
 
 const TAG = "MetroWidget";
@@ -93,13 +101,17 @@ export const setup = (
   pageUpdateToken,
   touchDiv,
   touchDivSize,
-  templateMode) => {
-
+  templateMode
+) => {
   if (props.itemConfig) {
-    console.error(TAG, "prop: itemCofig will be deprecated soon.")
+    console.error(TAG, "prop: itemCofig will be deprecated soon.");
   }
 
-  let widgetRectInfo = new WidgetRectInfo(props.width, props.height, props.padding);
+  let widgetRectInfo = new WidgetRectInfo(
+    props.width,
+    props.height,
+    props.padding
+  );
   let metroTemplate = _getMetroTemplate(
     widgetRectInfo,
     props.direction,
@@ -121,7 +133,7 @@ export const setup = (
   } else {
     if (props.touchFlag > 0) {
       // 激活引擎功能的支持
-      JsvUseFeature('MetroWidget', FeatureNames.TouchReceiver);
+      JsvUseFeature("MetroWidget", FeatureNames.TouchReceiver);
 
       //触控默认3屏
       innerKeepTraceRange = 3;
@@ -165,8 +177,7 @@ export const setup = (
         this._touchState = TouchState.DRAG;
       }
     },
-    dragEnd(touchCount) {
-    },
+    dragEnd(touchCount) {},
     keyDown() {
       this._mode = FOCUS_MODE;
       modeForExport.value = FOCUS_MODE;
@@ -186,8 +197,8 @@ export const setup = (
     },
     getTouchCount() {
       return this._touchCount;
-    }
-  }
+    },
+  };
 
   let innerData = [];
   let dataList = [];
@@ -209,7 +220,7 @@ export const setup = (
   let onKeyDownLock = false;
   let visibleInfo = new VisibleInfo();
   let firstOnItemFocusCalled = false;
-  let innerSlideSetting = props.slideSetting
+  let innerSlideSetting = props.slideSetting;
   const currentFocusIndex = ref(0);
 
   // 当sliderDiv变化时，渲染端在响应此变化前的gap记录，用于准确计算getVisibleStart
@@ -225,25 +236,33 @@ export const setup = (
     }
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
-    if (rect[pos_key] + rect[size_key] - 1 < visibleInfo.start || rect[pos_key] > 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) {
+    } else if (
+      rect[pos_key] < visibleInfo.start ||
+      rect[pos_key] + rect[size_key] - 1 > visibleInfo.end
+    ) {
       return 1; // 部分可见
     } else {
       return 2; // 完全可见
     }
-  }
+  };
 
   //tools
   const lastOfArray = (array) => {
     if (array instanceof Array && array.length > 0) {
-      return array[array.length - 1]
+      return array[array.length - 1];
     }
     return null;
-  }
+  };
 
   const onAddTask = (allTask) => {
-    if (!innerData || innerData.length <= 0) { return; }
+    if (!innerData || innerData.length <= 0) {
+      return;
+    }
     let resizeTaskMap = {};
     //统一处理itemResize和slide动画
     let minIndex = Infinity;
@@ -264,24 +283,25 @@ export const setup = (
       doAnim: false,
       duration: 200,
       easing: "",
-    }
+    };
     let resizeList = allTask.resize.concat();
     if (resizeList.length > 0) {
       //resize
-      resizeList.forEach(task => {
+      resizeList.forEach((task) => {
         resizeTaskMap[task.params.index] = task;
         const { index, animInfo } = task.params;
         if (animInfo) {
           resizeAnimInfo.doAnim = true;
-          resizeAnimInfo.duration = animInfo.duration ?? resizeAnimInfo.duration;
-          resizeAnimInfo.easing = animInfo.duration ?? "";
+          resizeAnimInfo.duration =
+            animInfo.duration ?? resizeAnimInfo.duration;
+          resizeAnimInfo.easing = animInfo.easing ?? "";
         }
         minIndex = Math.min(minIndex, index);
 
         metroTemplate.updateItemSize(task.params.index, {
           width: task.params.width,
           height: task.params.height,
-        })
+        });
       });
 
       //更新touch的size
@@ -292,12 +312,17 @@ export const setup = (
         const task = resizeTaskMap[id2Index(focusId)];
         const animInfo = task.params.animInfo;
         if (typeof animInfo?.anchor == "number") {
-          const preRect = getItemById(focusId)?.templateInfo?.layoutCache.getPreRect();
+          const preRect =
+            getItemById(focusId)?.templateInfo?.layoutCache.getPreRect();
           if (preRect) {
             anchorInfo = {
-              anchorPosition: preRect[pos_key] + preRect[size_key] * animInfo.anchor - 1 - visibleInfo.start,
+              anchorPosition:
+                preRect[pos_key] +
+                preRect[size_key] * animInfo.anchor -
+                1 -
+                visibleInfo.start,
               anchor: animInfo.anchor,
-            }
+            };
           }
         }
       }
@@ -322,48 +347,64 @@ export const setup = (
       slideDoAnim = slideTask.params.doAnim;
       forceSlide = slideTask.params.force;
       switch (slideTask.subType) {
-        case SlideTaskType.SLIDE_BY_DIV: {
-          const div = slideTask.params.div;
-          const item_layout = div.jsvGetRelativePosition(toRaw(locateDiv.value));
-          let fakeItem = {
-            templateInfo: {
-              left: item_layout.left,
-              top: item_layout.top,
-              width: item_layout.width,
-              height: item_layout.height,
-              centerYPos: Math.floor(item_layout.top + item_layout.height / 2),
-              centerXPos: Math.floor(item_layout.left + item_layout.width / 2),
-              index: id2Index(focusId),
-            },
-          };
-          templateItemAdder.tryAddItemByPosition(vertical ? fakeItem.templateInfo.top : fakeItem.templateInfo.left);
-          targetRect = fakeItem.templateInfo;
-        } break;
-        case SlideTaskType.SLIDE_BY_POS: {
-          const position = slideTask.params.position;
-          templateItemAdder.tryAddItemByPosition(position);
-          targetVisibleStart = position;
-        } break;
-        case SlideTaskType.SLIDE_BY_ITEM: {
-          const index = slideTask.params.index;
-          templateItemAdder.tryAddItemByIndex(index);
-          const targetItem = getItemByIndex(index);
-          if (targetItem) {
+        case SlideTaskType.SLIDE_BY_DIV:
+          {
+            const div = slideTask.params.div;
+            const item_layout = div.jsvGetRelativePosition(
+              toRaw(locateDiv.value)
+            );
+            let fakeItem = {
+              templateInfo: {
+                left: item_layout.left,
+                top: item_layout.top,
+                width: item_layout.width,
+                height: item_layout.height,
+                centerYPos: Math.floor(
+                  item_layout.top + item_layout.height / 2
+                ),
+                centerXPos: Math.floor(
+                  item_layout.left + item_layout.width / 2
+                ),
+                index: id2Index(focusId),
+              },
+            };
+            templateItemAdder.tryAddItemByPosition(
+              vertical ? fakeItem.templateInfo.top : fakeItem.templateInfo.left
+            );
+            targetRect = fakeItem.templateInfo;
+          }
+          break;
+        case SlideTaskType.SLIDE_BY_POS:
+          {
+            const position = slideTask.params.position;
+            templateItemAdder.tryAddItemByPosition(position);
+            targetVisibleStart = position;
+          }
+          break;
+        case SlideTaskType.SLIDE_BY_ITEM:
+          {
+            const index = slideTask.params.index;
+            templateItemAdder.tryAddItemByIndex(index);
+            const targetItem = getItemByIndex(index);
+            if (targetItem) {
+              if (typeof slideTask.params.direction != "undefined") {
+                direction = slideTask.params.direction;
+              }
+              targetRect = targetItem.templateInfo;
+            } else {
+              //无效的滚动
+              validSlideTask = false;
+            }
+          }
+          break;
+        case SlideTaskType.SLIDE_BY_RECT:
+          {
             if (typeof slideTask.params.direction != "undefined") {
               direction = slideTask.params.direction;
             }
-            targetRect = targetItem.templateInfo;
-          } else {
-            //无效的滚动
-            validSlideTask = false;
-          }
-        } break;
-        case SlideTaskType.SLIDE_BY_RECT: {
-          if (typeof slideTask.params.direction != "undefined") {
-            direction = slideTask.params.direction;
+            targetRect = slideTask.params.rect;
           }
-          targetRect = slideTask.params.rect;
-        } break;
+          break;
         default:
           break;
       }
@@ -375,20 +416,39 @@ export const setup = (
       if (anchorInfo) {
         //保持anchor
         const focusItem = getItemById(focusId);
-        let start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
+        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)
+        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()) {
+        } 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);
+            start = Math.max(
+              focusItem.templateInfo[size_key] +
+                focusItem.templateInfo[pos_key] -
+                visibleInfo.range,
+              0
+            );
           }
         }
-        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index, visibleInfo);
+        targetVisibleStart = normalizeVisibleStart(
+          start,
+          focusItem.templateInfo,
+          focusItem.templateInfo.index,
+          visibleInfo
+        );
       } else {
         targetRect = getItemById(focusId).templateInfo;
       }
@@ -403,11 +463,20 @@ 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), Math.max(0, totalSize[size_key] - v.range));
-          preInfo[pos_key] += (v.start - visibleInfo.start);
+          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;
         }
       }
-      targetVisibleStart = _calculateVisibleStart(targetRect, direction, targetRect, v, preInfo);
+      targetVisibleStart = _calculateVisibleStart(
+        targetRect,
+        direction,
+        targetRect,
+        v,
+        preInfo
+      );
     } else {
       //resize通过anchor直接设置了visibleStart
       if (resizeList.length > 0) {
@@ -419,7 +488,7 @@ export const setup = (
             width: tRect.width,
             height: tRect.height,
             frameCount: Forge.sFrameCount.count,
-          })
+          });
         }
       }
     }
@@ -432,12 +501,12 @@ export const setup = (
         visibleInfo.start = targetVisibleStart;
         return () => {
           visibleInfo.start = preVisibleStart;
-        }
+        };
       });
     }
 
     //updatePage
-    let updateHandler
+    let updateHandler;
     taskManager.run(() => {
       updateHandler = pageUpdater.update(
         metroTemplate,
@@ -449,8 +518,8 @@ export const setup = (
       );
       return () => {
         updateHandler.recover();
-      }
-    })
+      };
+    });
 
     // resize item 动画
     if (resizeList.length > 0) {
@@ -462,7 +531,8 @@ export const setup = (
           const renderItem = getItemByIndex(index);
           const { left, top } = renderItem.templateInfo;
           if (index >= minIndex) {
-            const layoutCache = renderItem.templateInfo.layoutCache.getPreRect();
+            const layoutCache =
+              renderItem.templateInfo.layoutCache.getPreRect();
             if (layoutCache) {
               const doItemSlide = (div) => {
                 taskManager.run(() => {
@@ -470,15 +540,18 @@ export const setup = (
                     div,
                     [layoutCache.left - left, layoutCache.top - top],
                     [0, 0],
-                    resizeTaskMap[index] ?
-                      resizeTaskMap[index].params.animInfo
-                      : { duration: resizeAnimInfo.duration }
-                  )
+                    resizeTaskMap[index]
+                      ? resizeTaskMap[index].params.animInfo
+                      : {
+                          duration: resizeAnimInfo.duration,
+                          easing: resizeAnimInfo.easing,
+                        }
+                  );
                   return () => {
-                    cancel()
-                  }
+                    cancel();
+                  };
                 });
-              }
+              };
 
               if (renderItem.mounted.value) {
                 doItemSlide(renderItem.rootDiv);
@@ -501,14 +574,18 @@ export const setup = (
       let animInfo = undefined;
       if (slideDoAnim) {
         animInfo = {
-          easing: null,//resizeAnimInfo.doAnim ? resizeAnimInfo.easing : '' /* innerSlideSetting.Easing */,
-          duration: resizeAnimInfo.doAnim ? resizeAnimInfo.duration : innerSlideSetting.Duration,
+          easing: resizeAnimInfo.doAnim
+            ? resizeAnimInfo.easing
+            : innerSlideSetting.Easing /* innerSlideSetting.Easing */,
+          duration: resizeAnimInfo.doAnim
+            ? resizeAnimInfo.duration
+            : innerSlideSetting.Duration,
           speed: innerSlideSetting.Speed,
           onStart: null,
           onEnd: null,
-        }
+        };
       }
-      executeSlide(visibleInfo.start, animInfo, updateHandler)
+      executeSlide(visibleInfo.start, animInfo, updateHandler);
     }
 
     //回调
@@ -519,8 +596,8 @@ export const setup = (
         }, 0);
         return () => {
           clearTimeout(handler);
-        }
-      })
+        };
+      });
     }
     if ((needSlide || allTask.focus.length > 0) && props.onFocusRectChange) {
       taskManager.run(() => {
@@ -529,10 +606,10 @@ export const setup = (
         }, 0);
         return () => {
           clearTimeout(handler);
-        }
-      })
+        };
+      });
     }
-  }
+  };
   const taskManager = new TaskManager(onAddTask);
   const animationManager = new AnimationManager();
 
@@ -545,12 +622,14 @@ export const setup = (
       return () => {
         slideDivLeft.value = preLeft;
         slideDivTop.value = preTop;
-      }
+      };
     });
     if (animObj) {
       updateHandler.applyTmp();
       taskManager.run(() => {
-        const from = vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0];
+        const from = vertical
+          ? [0, preTop - slideDivTop.value]
+          : [preLeft - slideDivLeft.value, 0];
         const cancel = animationManager.startSlideAnim(
           slideDiv.value,
           from,
@@ -558,13 +637,13 @@ export const setup = (
           {
             ...animObj,
             onEnd: () => {
-              updateHandler.apply()
-            }
+              updateHandler.apply();
+            },
           }
         );
         return () => {
-          cancel()
-        }
+          cancel();
+        };
       });
     } else {
       updateHandler.apply();
@@ -575,28 +654,31 @@ export const setup = (
       }, 0);
       return () => {
         clearTimeout(handler);
-      }
-    })
-  }
+      };
+    });
+  };
 
   const updateItemSize = (index, newSize, animInfo) => {
     const item = getItemByIndex(index);
-    if (item && (item.templateInfo.width !== newSize.width || item.templateInfo.height !== newSize.height)) {
-      taskManager.addTask(TaskType.RESIZE_ITEM,
-        {
-          index,
-          width: newSize.width,
-          height: newSize.height,
-          animInfo,
-          preRect: {
-            left: item.templateInfo.left,
-            top: item.templateInfo.top,
-            width: item.templateInfo.width,
-            height: item.templateInfo.height,
-          },
-        });
+    if (
+      item &&
+      (item.templateInfo.width !== newSize.width ||
+        item.templateInfo.height !== newSize.height)
+    ) {
+      taskManager.addTask(TaskType.RESIZE_ITEM, {
+        index,
+        width: newSize.width,
+        height: newSize.height,
+        animInfo,
+        preRect: {
+          left: item.templateInfo.left,
+          top: item.templateInfo.top,
+          width: item.templateInfo.width,
+          height: item.templateInfo.height,
+        },
+      });
     }
-  }
+  };
 
   let callFocusAfterUpdate = false;
 
@@ -682,7 +764,9 @@ export const setup = (
   };
 
   const onItemClick = (item) => {
-    if (!item) { return };
+    if (!item) {
+      return;
+    }
     if (isFocus) {
       item.onClick();
     }
@@ -696,7 +780,7 @@ export const setup = (
     }
   };
 
-  let gazeIndex = -1
+  let gazeIndex = -1;
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
     if (!focusItem) return;
@@ -711,7 +795,7 @@ export const setup = (
         if (preGazeItem) {
           preGazeItem.onIgnore();
         }
-        gazeIndex = focusItem.templateInfo.index
+        gazeIndex = focusItem.templateInfo.index;
         focusItem.onGaze(rect);
       }
       if (isFocus) {
@@ -725,14 +809,35 @@ export const setup = (
   };
 
   const onItemLongPress = (item) => {
-    if (!item) { return; }
+    if (!item) {
+      return;
+    }
     if (isFocus) {
       item.onLongPress();
     }
-  }
+  };
 
-  const setFocusByUid = (uid, needSlide = true, doAnim = false, extraSetting) => {
-    if (!uid || innerData.length <= 0) { return; }
+  //tap的时候触发ongaze
+  const onItemTap = (gazeItem) => {
+    if (gazeIndex != gazeItem.templateInfo.index) {
+      let preGazeItem = getItemByIndex(gazeIndex);
+      if (preGazeItem) {
+        preGazeItem.onIgnore();
+      }
+      gazeIndex = gazeItem.templateInfo.index;
+      gazeItem.onGaze(null);
+    }
+  };
+
+  const setFocusByUid = (
+    uid,
+    needSlide = true,
+    doAnim = false,
+    extraSetting
+  ) => {
+    if (!uid || innerData.length <= 0) {
+      return;
+    }
     //添加item
     templateItemAdder.tryAddItemByUid(uid);
     const item = metroTemplate.getItemByUid(uid);
@@ -742,7 +847,7 @@ export const setup = (
     }
 
     setFocusId(item.id, needSlide, doAnim, extraSetting);
-  }
+  };
 
   const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
     if (id == focusId || innerData.length <= 0) {
@@ -840,20 +945,32 @@ export const setup = (
   const setZIndex = (index, normalZIndex, focusZIndex) => {
     const targetItem = getItemByIndex(index);
     if (targetItem) {
-      const n = normalZIndex, f = focusZIndex ?? normalZIndex;
+      const n = normalZIndex,
+        f = focusZIndex ?? normalZIndex;
 
       targetItem.itemConfig.focusZIndex = f;
       targetItem.itemConfig.normalZIndex = n;
       const focused = isFocus && focusId == index2Id(index);
       setItemZIndex(targetItem, focused ? f : n, focused);
     }
-  }
+  };
 
-  const slideToInner = (position, doAnim, updateParam = { mergeTmp: false }) => {
-    if (slideLock || position == (vertical ? slideDivTop.value : slideDivLeft.value)) {
-      return
-    };
-    taskManager.addTask(TaskType.SLIDE, { position, doAnim, updateParam }, SlideTaskType.SLIDE_BY_POS);
+  const slideToInner = (
+    position,
+    doAnim,
+    updateParam = { mergeTmp: false }
+  ) => {
+    if (
+      slideLock ||
+      position == (vertical ? slideDivTop.value : slideDivLeft.value)
+    ) {
+      return;
+    }
+    taskManager.addTask(
+      TaskType.SLIDE,
+      { position, doAnim, updateParam },
+      SlideTaskType.SLIDE_BY_POS
+    );
   };
 
   const slideTo = (position, doAnim) => {
@@ -862,7 +979,13 @@ export const setup = (
     }
   };
 
-  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined, force = false) => {
+  const slideToItemInner = (
+    index,
+    doAnim,
+    direction = undefined,
+    preItem = undefined,
+    force = false
+  ) => {
     taskManager.addTask(
       TaskType.SLIDE,
       {
@@ -872,15 +995,16 @@ export const setup = (
         preItem,
         force,
       },
-      SlideTaskType.SLIDE_BY_ITEM);
+      SlideTaskType.SLIDE_BY_ITEM
+    );
   };
   const slideToItem = (index, doAnim) => {
-    slideToItemInner(index, doAnim)
-  }
+    slideToItemInner(index, doAnim);
+  };
 
   const slideToDiv = (div, doAnim) => {
     slideToDivInner(div, doAnim);
-  }
+  };
   const slideToDivInner = (div, doAnim, direction = undefined) => {
     if (div) {
       taskManager.addTask(
@@ -890,37 +1014,46 @@ export const setup = (
           doAnim,
           direction,
         },
-        SlideTaskType.SLIDE_BY_DIV);
+        SlideTaskType.SLIDE_BY_DIV
+      );
     }
-  }
+  };
   const slideToRectInner = (rect, doAnim, direction, force) => {
-    if (rect && typeof rect.left == "number" && typeof rect.top == "number" && typeof rect.width == "number" && typeof rect.height == "number") {
+    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
+          force,
         },
         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;
+    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
+      changed =
+        changed ||
+        newMeasureItem.left !== oldMeasureItem.left ||
+        newMeasureItem.top !== oldMeasureItem.top;
     }
     return changed;
   }
@@ -942,68 +1075,78 @@ export const setup = (
         let maxSameIndex = -1;
         let layoutChange = false;
         let onlyDataChangeList = [];
-        let targetFocusId = focusId
-        if (focusId >= newData.length) {
-          targetFocusId = newData.length - 1
-        }
-
-        if (!forceUpdate) {
-          for (let i = 0; i < dataList.length; ++i) {
-            let oldItem = dataList[i];
-            let newItem = newData[i];
-            if (newItem) {
-              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 {
-                const newMeasureItem = props.measures(newItem);
-                const oldMeasureItem = props.measures(oldItem);
-                layoutChange = ifLayoutChange(props.layoutType, oldMeasureItem, newMeasureItem);
-                if (layoutChange) {
-                  break;
+        let targetFocusId = focusId;
+        let curFocusItemChanged = true;
+        if (newData.length == 0) {
+          layoutChange = true;
+          targetFocusId = -1;
+        } else {
+          if (focusId < 0) {
+            targetFocusId = 0;
+          } else if (focusId >= newData.length) {
+            targetFocusId = newData.length - 1;
+          }
+          if (!forceUpdate) {
+            const curFocusIndex = id2Index(focusId);
+            for (let i = 0; i < dataList.length; ++i) {
+              let oldItem = dataList[i];
+              let newItem = newData[i];
+              if (newItem) {
+                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);
+                  if (curFocusIndex == i) {
+                    curFocusItemChanged = false;
+                  }
                 } else {
-                  if (i < innerData.length) {
-                    onlyDataChangeList.push({
-                      templateInfo: innerData[i].templateInfo,
-                      measureObj: newMeasureItem,
-                      data: newItem,
-                      index: i,
-                    });
+                  const newMeasureItem = props.measures(newItem);
+                  const oldMeasureItem = props.measures(oldItem);
+                  layoutChange = ifLayoutChange(
+                    props.layoutType,
+                    oldMeasureItem,
+                    newMeasureItem
+                  );
+                  if (layoutChange) {
+                    break;
+                  } else {
+                    if (i < innerData.length) {
+                      onlyDataChangeList.push({
+                        templateInfo: innerData[i].templateInfo,
+                        measureObj: newMeasureItem,
+                        data: newItem,
+                        index: i,
+                      });
+                    }
                   }
                 }
-              }
-            } else {
-              if (i >= newData.length) {
-                //item减少需要布局改变
-                layoutChange = true;
-                break;
               } else {
-                //数据中存在undefined item
-                throw new Error("undefined item in data list.", i, newData);
+                if (i >= newData.length) {
+                  //item减少需要布局改变
+                  layoutChange = true;
+                  break;
+                } else {
+                  //数据中存在undefined item
+                  throw new Error("undefined item in data list.", i, newData);
+                }
               }
             }
           }
         }
 
-        //记录刷新前焦点的可视状态, 若焦点可视, 则刷新后也需要保证焦点的可视
-        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;
-          }
+        // 刷新数据时, 重置gazeIndex
+        if (forceUpdate || curFocusItemChanged || targetFocusId != focusId) {
+          gazeIndex = -1;
         }
-        
+        //更新template
         dataList = newData;
-        dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
-
+        dataKeyList = dataList.map((i) => i[DATA_ID_KEY]);
         if (forceUpdate || layoutChange) {
           //需要更新布局
           pageUpdateToken.value++;
@@ -1026,16 +1169,16 @@ export const setup = (
             props.name,
             _onTemplateAddDone
           );
-          if (props.onScroll) {
+          if (props.onScroll || props.touchFlag > 0) {
             templateItemAdder.tryAddItemByIndex(dataList.length - 1);
           } else {
             templateItemAdder.tryAddItemById(targetFocusId);
           }
         } else {
+          templateItemAdder.updateData(newData);
           if (maxSameIndex < newData.length - 1) {
             //追加数据
-            templateItemAdder.updateData(newData);
-            if (props.onScroll) {
+            if (props.onScroll || props.touchFlag > 0) {
               templateItemAdder.tryAddItemByIndex(dataList.length - 1);
             } else {
               templateItemAdder.tryAddItemById(targetFocusId);
@@ -1046,7 +1189,10 @@ export const setup = (
           if (onlyDataChangeList.length > 0) {
             for (let i of onlyDataChangeList) {
               if (i.index < innerData.length) {
-                innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
+                innerData[i.index].updateCustomData(
+                  i.data,
+                  _getItemConfigFromMeasursObj(i.measureObj)
+                );
                 innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
               } else {
                 //之后的数据未布局, 尚未添加到innerData中
@@ -1055,16 +1201,7 @@ 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,
@@ -1074,22 +1211,71 @@ export const setup = (
           permanentItemList
         );
         updater.apply();
-        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);
+
+        //其他处理
+        if (mode.getMode() == TOUCH_MODE) {
+          //TODO touch模式的refresh还是有问题,
+          // 1. 点击删除item, 会触发onDragStart, 这里onDragStart正好更新了visibleInfo.start导致可以运行, 但这里还是要正确更新visibleInfo.start
+          // let divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
+          // visibleInfo.start = getVisibleStart(data);
+        } else {
+          //非触控模式的更新处理
+          //记录刷新前焦点的可视状态, 若焦点可视, 则刷新后也需要保证焦点的可视
+          let needSlide = false;
+          let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+          if (targetFocusId != focusId) {
+            needSlide = true;
+          } else if (slideToFocus == "enable") {
+            needSlide = true;
+          } else if (slideToFocus == "disable") {
+            needSlide = false;
+          } else {
+            if (targetRect) {
+              needSlide = rectVisibleState(targetRect) !== 0;
+            } else {
+              needSlide =
+                rectVisibleState(getItemById(focusId)?.templateInfo) !== 0;
             }
+          }
+          if (targetFocusId != focusId) {
+            //由于template add done 回调里会更新box, 需要在template重新创建前, 重置所有的滚动信息
+            visibleInfo = visibleInfo.copy();
+            visibleInfo.start = 0;
+            visibleInfo._startMax = 0;
+            slideDivLeft.value = 0;
+            slideDivTop.value = 0;
+          }
+
+          if (targetFocusId != focusId) {
+            //重置所有的滚动信息
+            _changeFocusId(targetFocusId, false);
+          }
+
+          const focusItem = getItemById(focusId);
+          if (focusItem) {
+            //数据刷新时, 重置preEdgeRect, 否则再嵌套模式下, 会使用上一次的preEdgeRect, 导致子又findNearestByRect
+            preEdgeRect = null;
+            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);
+              }
+            }
+          } else {
+            slideToInner(0, false);
+            preEdgeRect = null;
+            mRectCache.clean();
+          }
         }
-        
-        //template和slideDivStyle均确定后再次重设box condition
-        updateTouchBoxCondition();
       }
     } catch (e) {
-      console.log(TAG, "refresh error", e)
+      console.log(TAG, "refresh error", e);
     }
   };
 
@@ -1107,16 +1293,34 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
-    if (innerData.length <= 0) { return; }
+    if (innerData.length <= 0) {
+      return;
+    }
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
-    if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
+    if (
+      direction == "left" ||
+      direction == 37 ||
+      direction == EdgeDirection.left
+    ) {
       _moveToNext(-1, 0);
-    } else if (direction == "right" || direction == 39 || direction == EdgeDirection.right) {
+    } else if (
+      direction == "right" ||
+      direction == 39 ||
+      direction == EdgeDirection.right
+    ) {
       _moveToNext(1, 0);
-    } else if (direction == "top" || direction == 38 || direction == EdgeDirection.top) {
+    } else if (
+      direction == "top" ||
+      direction == 38 ||
+      direction == EdgeDirection.top
+    ) {
       _moveToNext(0, -1);
-    } else if (direction == "bottom" || direction == 40 || direction == EdgeDirection.bottom) {
+    } else if (
+      direction == "bottom" ||
+      direction == 40 ||
+      direction == EdgeDirection.bottom
+    ) {
       _moveToNext(0, 1);
     } else {
       console.error(TAG, "moveFocus direction is invalid.", direction);
@@ -1125,23 +1329,23 @@ export const setup = (
 
   const getCustomerDataSize = () => {
     return dataList.length;
-  }
+  };
 
   const getCurrentFocusIndex = () => {
     return id2Index(focusId);
-  }
+  };
 
   const getTemplatePosition = (index) => {
     return _getTemplatePosition(index);
-  }
+  };
 
   const lockSlide = () => {
     slideLock = true;
-  }
+  };
 
   const unlockSlide = () => {
     slideLock = false;
-  }
+  };
 
   const setSlideSetting = (setting) => {
     if (!setting) {
@@ -1149,14 +1353,14 @@ export const setup = (
     } else {
       innerSlideSetting = setting;
     }
-  }
+  };
 
   const tryCancelDelayLoad = () => {
     if (delayLoadHandler > 0) {
       clearTimeout(delayLoadHandler);
       delayLoadHandler = -1;
     }
-  }
+  };
 
   const exportObject = {
     lockSlide,
@@ -1232,16 +1436,14 @@ export const setup = (
       let full_show =
         itemTemplateInfo[key_pos] >= visibleInfo.start &&
         itemTemplateInfo[key_pos] + itemTemplateInfo[key_width] - 1 <=
-        visibleInfo.end;
+          visibleInfo.end;
       if (full_show) {
-        let x_pos =
-          vertical
-            ? itemTemplateInfo.left
-            : itemTemplateInfo.left - visibleInfo.start;
-        let y_pos =
-          vertical
-            ? itemTemplateInfo.top - visibleInfo.start
-            : itemTemplateInfo.top;
+        let x_pos = vertical
+          ? itemTemplateInfo.left
+          : itemTemplateInfo.left - visibleInfo.start;
+        let y_pos = vertical
+          ? itemTemplateInfo.top - visibleInfo.start
+          : itemTemplateInfo.top;
         var target_x_range = new SingleRangeModel(
           x_pos,
           x_pos + itemTemplateInfo.width - 1
@@ -1381,21 +1583,29 @@ 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) {
+      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);
+        if (focusItem) {
+          const preFocusItem = getItemById(focusId);
+          _changeFocusId(focusItem.id, false);
+          if (preFocusItem.id !== focusItem.id) {
+            onItemBlur(preFocusItem);
+          }
+          onItemFocus(focusItem);
         }
-        onItemFocus(focusItem);
+        return true;
       }
     }
     return false;
-  }
+  };
 
   const _moveByKey = (keyCode) => {
     switch (keyCode) {
@@ -1414,13 +1624,14 @@ export const setup = (
       default:
         return false;
     }
-  }
+  };
 
   let clickDownReceived = false;
   let longPressTriggered = false;
 
   const focusBlockOnKeyUp = (ev) => {
-    if (!props.enableLongPress) {
+    const curFocusItem = getItemById(focusId);
+    if (!curFocusItem || !curFocusItem.itemConfig.enableLongPress) {
       return false;
     }
     //支持长按时 onClick 由 keyup 处理
@@ -1429,14 +1640,14 @@ export const setup = (
     if (!longPressTriggered) {
       if (ev.keyCode == 13 && clickDownReceived) {
         clickDownReceived = false;
-        onItemClick(getItemById(focusId));
+        onItemClick(curFocusItem);
         return true;
       }
     } else {
       longPressTriggered = false;
     }
     return false;
-  }
+  };
 
   let preStartKeyDownTime = -1;
   const focusBlockOnKeyDown = (ev) => {
@@ -1459,14 +1670,19 @@ export const setup = (
       return true;
     }
     if (ev.keyCode == 13) {
+      const curFocusItem = getItemById(focusId);
       clickDownReceived = true;
-      if (props.enableLongPress) {
-        if (ev.repeat && ev.timeStamp - preStartKeyDownTime > LONGPRESS_TIMEOUT && !longPressTriggered) {
+      if (curFocusItem.itemConfig.enableLongPress) {
+        if (
+          ev.repeat &&
+          ev.timeStamp - preStartKeyDownTime > LONGPRESS_TIMEOUT &&
+          !longPressTriggered
+        ) {
           longPressTriggered = true;
-          onItemLongPress(getItemById(focusId));
+          onItemLongPress(curFocusItem);
         }
       } else if (!ev.repeat) {
-        onItemClick(getItemById(focusId));
+        onItemClick(curFocusItem);
       }
       return true;
     } else {
@@ -1482,7 +1698,8 @@ export const setup = (
     if (lastTemplateInfo) {
       if (vertical) {
         touchDivSize.width = props.width;
-        touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+        touchDivSize.height =
+          lastTemplateInfo.top + lastTemplateInfo.height - 1;
       } else {
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
@@ -1498,7 +1715,7 @@ export const setup = (
     if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
       updateTouchBoxCondition();
     }
-  }
+  };
 
   const _getItemConfigFromMeasursObj = (measuresObj) => {
     let focusZIndex = -1,
@@ -1523,10 +1740,12 @@ export const setup = (
       focusZIndex,
       normalZIndex,
       permanent: measuresObj.permanent ?? false,
-      itemSlide: measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
+      itemSlide:
+        measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
       showSkeleton: measuresObj.showSkeleton ?? true,
+      enableLongPress: measuresObj.enableLongPress ?? props.enableLongPress,
     };
-  }
+  };
 
   const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
     let itemConfig = _getItemConfigFromMeasursObj(measuresObj);
@@ -1562,10 +1781,31 @@ export const setup = (
         slideTo: slideTo,
         updateItemSize,
         widgetHandler: exportObject,
+      },
+      {
+        onTap: onItemTap,
       }
     );
     item.enableTap = measuresObj.enableTap ?? false;
-
+    // 占位图布局
+    if (props.enableItemRenderBreak) {
+      if (measuresObj.placeHolderLayout 
+        && typeof measuresObj.placeHolderLayout.left == "number" 
+        && typeof measuresObj.placeHolderLayout.top == "number"
+        && typeof measuresObj.placeHolderLayout.width == "number"
+        && typeof measuresObj.placeHolderLayout.height == "number"
+      ) {
+        item.placeHolderLayout = Object.assign({}, measuresObj.placeHolderLayout);
+      } else {
+        item.placeHolderLayout = {
+          left: 0,
+          top: 0,
+          width: item.renderStyle.width - (props.placeHolderSetting.gap ?? 0),
+          height: item.renderStyle.height - (props.placeHolderSetting.gap ?? 0)
+        }
+      }
+    }
+    
     innerData.push(item);
     if (item.itemConfig.permanent) {
       permanentItemList.push({
@@ -1596,7 +1836,10 @@ export const setup = (
         return false;
       }
       const focusItem = getItemById(focusId);
-      if (focusItem.itemConfig.itemSlide !== METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT) {
+      if (
+        focusItem.itemConfig.itemSlide !==
+        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT
+      ) {
         return;
       }
       let item_div = ev.element;
@@ -1614,7 +1857,9 @@ export const setup = (
           direction = 1;
         }
       }
-      const item_layout = item_div.jsvGetRelativePosition(toRaw(locateDiv.value));
+      const item_layout = item_div.jsvGetRelativePosition(
+        toRaw(locateDiv.value)
+      );
 
       let fakeItem = {
         templateInfo: {
@@ -1628,16 +1873,18 @@ export const setup = (
         },
       };
 
-      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction, fakeItem.templateInfo, visibleInfo);
+      let cur_slide = _calculateVisibleStart(
+        fakeItem.templateInfo,
+        direction,
+        fakeItem.templateInfo,
+        visibleInfo
+      );
       if (cur_slide != visibleInfo.start) {
-        slideToInner(
-          cur_slide,
-          true,
-          {
-            //250207 change: 为true时, 会导致不可见的item反复加载,释放, 所以改为false
-            //但之前设为true应该是为了保证滚动时的楼层不提前消失, 此后若再遇到这类问题再考虑
-            mergeTmp: false
-          });
+        slideToInner(cur_slide, true, {
+          //250207 change: 为true时, 会导致不可见的item反复加载,释放, 所以改为false
+          //但之前设为true应该是为了保证滚动时的楼层不提前消失, 此后若再遇到这类问题再考虑
+          mergeTmp: false,
+        });
         return true;
       }
     }
@@ -1646,10 +1893,14 @@ export const setup = (
 
   const _changeFocusId = (id, cache_pre = true) => {
     preFocusId = cache_pre ? focusId : -1;
-    focusId = id >= 0 && id < metroTemplate.size ? id : 0;
-    currentFocusIndex.value = id2Index(id);
+    if (metroTemplate.size == 0) {
+      focusId = -1;
+    } else {
+      focusId = id >= 0 && id < metroTemplate.size ? id : 0;
+    }
+    currentFocusIndex.value = id2Index(focusId);
     taskManager.addTask(TaskType.ON_FOCUS_CHANGE);
-  }
+  };
 
   const _bubbleCustomEvent = (event) => {
     if (props.sendFocusRectEvent && event) {
@@ -1703,8 +1954,10 @@ export const setup = (
       templateItemAdder.tryAddItem(next_focus_item.templateInfo, 1);
 
       // itemFocus 和 itemBlur放在计算visibleStart之前, 以便用户更改template后在计算滚动
-      let x_off_set = preFocusItem.templateInfo.left - next_focus_item.templateInfo.left;
-      let y_off_set = preFocusItem.templateInfo.top - next_focus_item.templateInfo.top;
+      let x_off_set =
+        preFocusItem.templateInfo.left - next_focus_item.templateInfo.left;
+      let y_off_set =
+        preFocusItem.templateInfo.top - next_focus_item.templateInfo.top;
       if (item_edge_rect && item_edge_rect.rect) {
         item_edge_rect.rect.x += x_off_set;
         item_edge_rect.rect.y += y_off_set;
@@ -1733,12 +1986,16 @@ export const setup = (
       onItemBlur(preFocusItem);
       onItemFocus(next_focus_item, preEdgeRect);
 
-      if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+      if (
+        next_focus_item.itemConfig.itemSlide ==
+        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+      ) {
         slideToItemInner(
           next_focus_item.index,
           true,
           vertical ? vertical_direction : horizontal_direction,
-          preFocusItem);
+          preFocusItem
+        );
       } else {
         const updater = pageUpdater.update(
           metroTemplate,
@@ -1769,7 +2026,7 @@ export const setup = (
         edge = EdgeDirection.top;
       }
       const curTemplateInfo = getItemById(focusId)?.templateInfo;
-      let rect
+      let rect;
       if (curTemplateInfo) {
         rect = {
           x: curTemplateInfo.left - x_off_set,
@@ -1789,7 +2046,7 @@ export const setup = (
       props.onEdge?.({
         direction: edge,
         rect: rect,
-        childEdgeInfo: item_edge_rect
+        childEdgeInfo: item_edge_rect,
       });
       innerData[id2Index(focusId)]?.onWidgetEdge({
         direction: edge,
@@ -1813,23 +2070,32 @@ export const setup = (
       }
     }
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
-      let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).templateInfo;
+      let lastTemplateInfo = getItemByIndex(
+        metroTemplate.getTailItemIndex()
+      ).templateInfo;
       const lastEnd = lastTemplateInfo[pos_key] + lastTemplateInfo[size_key];
       const lastVisibleStart = Math.max(lastEnd - vInfo.range, 0);
       //边界必须大于等于0, 同时若最后一个缩进时, 边界采用最后一个item的位置
       if (vInfo.end <= lastEnd) {
         let boundary = lastVisibleStart;
-        visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
+        visibleStart =
+          visibleStart > boundary ? lastVisibleStart : visibleStart;
       } else {
         // 以最后一个item的位置作为动态的保护边界
         visibleStart = visibleStart > vInfo.start ? vInfo.start : visibleStart;
       }
     }
     return visibleStart;
-  }
+  };
 
   const mRectCache = new RectCache();
-  const _calculateVisibleStart = (targetRect, _direction, templateInfo, vInfo, preInfo = null) => {
+  const _calculateVisibleStart = (
+    targetRect,
+    _direction,
+    templateInfo,
+    vInfo,
+    preInfo = null
+  ) => {
     if (!targetRect) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
@@ -1840,7 +2106,7 @@ export const setup = (
       width: targetRect.width,
       height: targetRect.height,
       frameCount: Forge.sFrameCount.count,
-    }
+    };
     mRectCache.cache(curRect);
     let preRect = mRectCache.getPreRect();
     if (preInfo) {
@@ -1874,9 +2140,14 @@ export const setup = (
         }
 
         if (needCalculate) {
+          let target = targetRect[pos_key] + targetRect[size_key] / 2;
+          if (innerSlideSetting.Align == "start") {
+            target = targetRect[pos_key];
+          } else if (innerSlideSetting.Align == "end") {
+            target = targetRect[pos_key] + targetRect[size_key];
+          }
           new_visible_start = Math.ceil(
-            targetRect[pos_key] + targetRect[size_key] / 2 -
-            vInfo.range * innerSlideSetting.FixPercent
+            target - vInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
@@ -1914,14 +2185,19 @@ export const setup = (
 
           if (preRect) {
             const rect0Start = vInfo.start;
-            const rect0End = vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
-            const rect0Range = rect0End - rect0Start + 1
-            const rect1Start = vInfo.start + vInfo.range * innerSlideSetting.EndPercent;
+            const rect0End =
+              vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
+            const rect0Range = rect0End - rect0Start + 1;
+            const rect1Start =
+              vInfo.start + vInfo.range * innerSlideSetting.EndPercent;
             const rect1End = vInfo.start + vInfo.range - 1;
             const rect1Range = rect1End - rect1Start + 1;
 
             let target0 = Math.min(preRect[pos_key], rect0End);
-            let target1 = Math.max(preRect[pos_key] + preRect[size_key] - 1, rect1Start);
+            let target1 = Math.max(
+              preRect[pos_key] + preRect[size_key] - 1,
+              rect1Start
+            );
 
             let rect0Result = undefined;
             let rect1Result = undefined;
@@ -1934,7 +2210,7 @@ export const setup = (
               } else {
                 if (direction <= 0) {
                   //inRect0, 只处理往左/往上
-                  rect0Result = vInfo.start + (itemStart - target0)
+                  rect0Result = vInfo.start + (itemStart - target0);
                 }
               }
             }
@@ -1952,7 +2228,10 @@ export const setup = (
               }
             }
 
-            if (typeof rect0Result !== "undefined" && typeof rect1Result !== "undefined") {
+            if (
+              typeof rect0Result !== "undefined" &&
+              typeof rect1Result !== "undefined"
+            ) {
               //重叠区域
               new_visible_start = rect0Result;
             } else if (typeof rect0Result !== "undefined") {
@@ -1967,11 +2246,16 @@ export const setup = (
           const tailSafeArea = innerSlideSetting.TailSafeArea * vInfo.range;
           if (itemMainSize > vInfo.range - headSafeArea - tailSafeArea) {
             // 大item
-            new_visible_start = Math.round(itemStart - (vInfo.range - itemMainSize) / 2)
+            new_visible_start = Math.round(
+              itemStart - (vInfo.range - itemMainSize) / 2
+            );
           } else {
             if (itemStart < new_visible_start + headSafeArea) {
               new_visible_start = itemStart - headSafeArea;
-            } else if (itemEnd > new_visible_start + vInfo.range - 1 - tailSafeArea) {
+            } else if (
+              itemEnd >
+              new_visible_start + vInfo.range - 1 - tailSafeArea
+            ) {
               new_visible_start = itemEnd - vInfo.range + tailSafeArea;
             }
           }
@@ -1984,7 +2268,12 @@ export const setup = (
         );
     }
 
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index, vInfo);
+    new_visible_start = normalizeVisibleStart(
+      new_visible_start,
+      targetRect,
+      templateInfo?.index,
+      vInfo
+    );
     return Math.round(new_visible_start);
   };
 
@@ -2021,12 +2310,13 @@ export const setup = (
       return;
     }
 
-    let focus_id =
+    let focus_id = index2Id(gazeIndex);
+    focus_id =
       typeof enterFocusId !== "undefined" &&
-        enterFocusId >= 0 &&
-        enterFocusId < metroTemplate.size
+      enterFocusId >= 0 &&
+      enterFocusId < metroTemplate.size
         ? enterFocusId
-        : focusId;
+        : focus_id;
     focus_id = _ifValidEnterRect(enterFocusRect)
       ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
       : focus_id;
@@ -2034,7 +2324,7 @@ export const setup = (
     _changeFocusId(focus_id, false);
     enterFocusId = -1;
     enterFocusRect = null;
-    firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);;
+    firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
     props.onFocus?.();
   };
 
@@ -2046,19 +2336,21 @@ export const setup = (
     onItemBlur(getItemById(preFocusId));
     props.onBlur?.();
     isFocus = false;
-    mRectCache.clean()
+    mRectCache.clean();
   };
 
   const _updatePage = (rangeSet) => {
     let cur = id2Index(focusId);
     if (cur >= 0) {
-      rangeSet.add(cur)
+      rangeSet.add(cur);
     }
     const tmpArray = Array.from(rangeSet);
     let newArray = tmpArray.map((item) => {
       return getItemByIndex(item);
     });
-    const newItemList = newArray.filter((i) => { return !renderData.value?.includes(i) });
+    const newItemList = newArray.filter((i) => {
+      return !renderData.value?.includes(i);
+    });
     renderData.value = newArray;
     if (props.enableItemRenderBreak) {
       itemRender.value = false;
@@ -2074,18 +2366,25 @@ export const setup = (
   };
 
   const _getVisibleFocusableItem = () => {
-    const focusItem = getItemById(focusId);
+    let item = getItemByIndex(gazeIndex);
+    if (rectVisibleState(item.templateInfo) == 2) {
+      return item;
+    }
+    item = getItemById(focusId);
     if (rectVisibleState(focusItem.templateInfo) == 2) {
       return focusItem;
-    } else {
-      //遍历renderList, 找到第一个可见的 focusable item
-      for (let item of renderData.value) {
-        if (item.templateInfo.focusable && rectVisibleState(item.templateInfo) == 2) {
-          return item;
-        }
+    }
+    //遍历renderList, 找到第一个可见的 focusable item
+    for (let item of renderData.value) {
+      if (
+        item.templateInfo.focusable &&
+        rectVisibleState(item.templateInfo) == 2
+      ) {
+        return item;
       }
     }
-  }
+    return null;
+  };
 
   const _onScroll = () => {
     if (props.onScroll) {
@@ -2117,13 +2416,15 @@ export const setup = (
   let onMoveSensitivity = -1;
 
   const getVisibleStart = (moveInfo) => {
-    divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
+    divPos = vertical
+      ? slideDivTop.value + freeMoveSlideGapTop
+      : slideDivLeft.value + freeMoveSlideGapLeft;
     if (vertical) {
       return -(divPos + Math.round(moveInfo.yPos));
     } else {
       return -(divPos + Math.round(moveInfo.xPos));
     }
-  }
+  };
 
   function onSensor(pos) {
     const lastTemplateInfo = getItemByIndex(
@@ -2138,7 +2439,9 @@ export const setup = (
       }
     }
     props.onScroll?.(
-      vertical ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop) : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
+      vertical
+        ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop)
+        : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
       visibleInfo.range,
       totalWidth
     );
@@ -2156,7 +2459,9 @@ export const setup = (
   }
 
   function setSensorSensitivity(sensitivity = DEFAULT_SENSITIVITY) {
-    if (!actorController) { return }
+    if (!actorController) {
+      return;
+    }
     if (sensitivity <= 0) {
       actorController.run((cmds) => [
         cmds.state().removeConditionByGroup(ScensorCondigionGroup),
@@ -2165,11 +2470,10 @@ export const setup = (
     }
 
     if (sensitivity != onMoveSensitivity) {
-      setOnMovement(sensitivity)
+      setOnMovement(sensitivity);
     }
   }
 
-
   const getTouchCount = (nexusCustomData) => {
     let touchCount = -1;
     if (nexusCustomData) {
@@ -2180,7 +2484,7 @@ export const setup = (
       }
     }
     return touchCount;
-  }
+  };
 
   const mergeTouchSlideToSlideDiv = (touchCount) => {
     let originSlideDivTop = slideDivTop.value;
@@ -2192,24 +2496,28 @@ export const setup = (
     }
     let newSlideGapTop = originSlideDivTop - slideDivTop.value;
     let newSlideGapLeft = originSlideDivLeft - slideDivLeft.value;
-    freeMoveSlideGapTop += newSlideGapTop;    // 累计slider变化的gap，等待同步完毕时消除gap
+    freeMoveSlideGapTop += newSlideGapTop; // 累计slider变化的gap，等待同步完毕时消除gap
     freeMoveSlideGapLeft += newSlideGapLeft;
 
     const walls = getTouchWall();
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(wallConditionGroup),
-      cmds.condition(wallConditionGroup, true)
+      cmds
+        .condition(wallConditionGroup, true)
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
         .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       cmds.state().setStartOffsetPos(newSlideGapLeft, newSlideGapTop), // 将div的位置调整回馈给FreeMove计量系统
-      cmds.condition().onNextTick(0).then([
-        SliderEditFuncReOrderWrap(() => {
-          freeMoveSlideGapTop -= newSlideGapTop;
-          freeMoveSlideGapLeft -= newSlideGapLeft;
-        }, true) // Slide调整回调要放在其他事件之前，调整slide的gap值
-      ])
+      cmds
+        .condition()
+        .onNextTick(0)
+        .then([
+          SliderEditFuncReOrderWrap(() => {
+            freeMoveSlideGapTop -= newSlideGapTop;
+            freeMoveSlideGapLeft -= newSlideGapLeft;
+          }, true), // Slide调整回调要放在其他事件之前，调整slide的gap值
+        ]),
     ]);
-  }
+  };
   function onTouchActionDone(touchCount) {
     //一次触控动作结束
     mergeTouchSlideToSlideDiv(touchCount);
@@ -2236,20 +2544,30 @@ export const setup = (
       right: vertical ? undefined : lockThreshhold,
       top: vertical ? lockThreshhold : undefined,
       bottom: vertical ? lockThreshhold : undefined,
-    }
+    };
 
     let passDownTouchInfo = nexusCustomData;
     actorController.run((cmds) => [
       cmds
         .condition(TouchDownConditionGroup, false)
-        .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
+        .offsetPosition(
+          offsetThreshold.left,
+          offsetThreshold.top,
+          offsetThreshold.right,
+          offsetThreshold.bottom
+        )
         .then([
-          cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)]),
+          cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold),
+        ]),
       cmds
         .condition(TouchDownConditionGroup, false)
         .startMove(true, true)
-        .then([SliderEditFuncReOrderWrap((d) => { onDragStart(d, null, passDownTouchInfo) })]),
-    ])
+        .then([
+          SliderEditFuncReOrderWrap((d) => {
+            onDragStart(d, null, passDownTouchInfo);
+          }),
+        ]),
+    ]);
 
     //blur item
     // onItemBlur(getItemById(focusId));
@@ -2269,26 +2587,32 @@ export const setup = (
     //创建锚点
     const anchorArea = 2 * Forge.sRenderBridge.GetScreenInfo().designedWidth;
     let anchorPosList = [];
-    let anchorSpacing = visibleInfo.range * 2 / 3;
+    let anchorSpacing = (visibleInfo.range * 2) / 3;
     let anchorPos = anchorSpacing;
     while (anchorPos < anchorArea) {
       anchorPosList.push(-visibleInfo.start + anchorPos);
-      anchorPosList.push(-visibleInfo.start - visibleInfo.range - anchorPos + 1);
+      anchorPosList.push(
+        -visibleInfo.start - visibleInfo.range - anchorPos + 1
+      );
       anchorPos += anchorSpacing;
     }
     actorController.run((cmds) => {
-      const reachConditionList = anchorPosList.map(pos => {
+      const reachConditionList = anchorPosList.map((pos) => {
         return cmds
           .condition(reachAnchorGroup)
           .reachPosition(pos, undefined)
-          .then([SliderEditFuncReOrderWrap((data) => { updateRenderItems(true, true) })])
-      })
+          .then([
+            SliderEditFuncReOrderWrap((data) => {
+              updateRenderItems(true, true);
+            }),
+          ]);
+      });
       reachConditionList.unshift(
-        cmds.state().removeConditionByGroup(reachAnchorGroup),
-      )
-      return reachConditionList
+        cmds.state().removeConditionByGroup(reachAnchorGroup)
+      );
+      return reachConditionList;
     });
-  }
+  };
 
   const onTouchRelease = (touchCount) => {
     if (mode.getTouchState() == TouchState.TAP) {
@@ -2299,14 +2623,14 @@ export const setup = (
       if (touchRecorder.moved && !mode.duringFling()) {
         onTouchActionDone(touchRecorder.touchCount);
         updateRenderItems(false, false);
-        mode.touchEnd(touchCount)
+        mode.touchEnd(touchCount);
       }
     }
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(TouchDownConditionGroup),
-      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
-    ])
-  }
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2),
+    ]);
+  };
 
   const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
 
@@ -2315,10 +2639,10 @@ export const setup = (
     touchRecorder.move();
     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)
+      mode.dragStart(touchCount);
     }
     visibleInfo.start = getVisibleStart(data);
-  }
+  };
 
   const onDragEnd = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
@@ -2327,7 +2651,7 @@ export const setup = (
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(reachAnchorGroup),
     ]);
-  }
+  };
 
   const onFlingStart = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
@@ -2335,13 +2659,13 @@ export const setup = (
     mode.flingStart(touchCount);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
-  }
+  };
 
   const onFlingProgress = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
-  }
+  };
 
   const onFlingEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
@@ -2353,12 +2677,12 @@ export const setup = (
       mode.flingEnd(touchCount);
       mode.touchEnd(touchCount);
     }
-  }
+  };
 
   const onFlingDrop = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
-  }
+  };
 
   const getTouchWall = () => {
     const boxSize = metroTemplate.getBoundingBoxSize();
@@ -2367,15 +2691,23 @@ export const setup = (
       top: 0,
       right: 0,
       bottom: 0,
-    }
+    };
     if (vertical) {
-      wall.top = -boxSize.height + props.height - slideDivTop.value - (widgetRectInfo.padding.top + widgetRectInfo.padding.bottom);
+      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 - (widgetRectInfo.padding.left + widgetRectInfo.padding.right);
+      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;
@@ -2383,10 +2715,12 @@ export const setup = (
     }
 
     return wall;
-  }
+  };
 
   const updateRenderItems = (applyTmp, expand) => {
-    templateItemAdder.tryAddItemByPosition(visibleInfo.start + visibleInfo.range);
+    templateItemAdder.tryAddItemByPosition(
+      visibleInfo.start + visibleInfo.range
+    );
     const updater = pageUpdater.update(
       metroTemplate,
       visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
@@ -2396,9 +2730,10 @@ export const setup = (
       permanentItemList
     );
     applyTmp ? updater.applyTmp() : updater.apply();
-  }
+  };
 
   const updateTouchBoxCondition = () => {
+    if (mode.getMode() != TOUCH_MODE) return;
     if (actorController != null) {
       const walls = getTouchWall();
 
@@ -2411,7 +2746,7 @@ export const setup = (
           .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       ]);
     }
-  }
+  };
 
   const touchRecorder = {
     moved: false,
@@ -2425,7 +2760,7 @@ export const setup = (
     },
     setTouchCount: function (count) {
       this.touchCount = count;
-    }
+    },
   };
 
   const metroWidgetToken = metroWidgetTokenGen++;
@@ -2433,14 +2768,14 @@ export const setup = (
   let orderTouchSlideCallbacks;
   const SliderEditFuncReOrderWrap = (callback, addHeader = false) => {
     return (...args) => {
-      let pkg = { cb: callback, a: args }
+      let pkg = { cb: callback, a: args };
       if (addHeader) {
         orderTouchSlideCallbacks.splice(0, 0, pkg);
       } else {
         orderTouchSlideCallbacks.push(pkg);
       }
-    }
-  }
+    };
+  };
 
   //TODO debug
   // let debugAnimId = -1;
@@ -2468,7 +2803,7 @@ export const setup = (
         // 执行结束后进行清理
         orderTouchSlideCallbacks.length = 0;
       }
-    )
+    );
 
     // debugAnimId = actorController.debugGetAnimId();
     // debugViewId = divView.ViewId;
@@ -2517,19 +2852,26 @@ export const setup = (
     if (props.onScroll) {
       setOnMovement(DEFAULT_SENSITIVITY);
     }
-  }
+  };
 
   function cleanTouch() {
     actorController.run((cmds) => [
       cmds.state().clearAllConditions(),
-      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
-    ])
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2),
+    ]);
   }
 
   //init
 
   function safeProvideData() {
-    return props.provideData() ?? [];
+    const d = props.provideData();
+    if (d instanceof Array) {
+      return d;
+    }
+    console.warn(
+      `MetroWidget provideData must return an array. name:${props.name} provideData:${d}`
+    );
+    return [];
   }
   pageUpdater = new PageUpdater(_updatePage, props.name);
   visibleInfo.range = vertical
@@ -2544,7 +2886,7 @@ export const setup = (
   } else if (props.data) {
     dataList = toRaw(props.data ?? [])?.concat();
   }
-  dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
+  dataKeyList = dataList.map((i) => i[DATA_ID_KEY]);
 
   templateItemAdder = new TemplateItemAdder(
     metroTemplate,
@@ -2569,8 +2911,16 @@ export const setup = (
     const item = getItemById(props.initFocusId);
     if (item) {
       init_focus_id = props.initFocusId;
-      if (item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-        initVisibleStart = _calculateVisibleStart(item.templateInfo, 0, item.templateInfo, visibleInfo);
+      if (
+        item.itemConfig.itemSlide ==
+        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+      ) {
+        initVisibleStart = _calculateVisibleStart(
+          item.templateInfo,
+          0,
+          item.templateInfo,
+          visibleInfo
+        );
       }
     }
   }
@@ -2624,7 +2974,7 @@ export const setup = (
     }
   });
 
-  onUpdated(() => { });
+  onUpdated(() => {});
 
   onBeforeUnmount(() => {
     taskManager.cancelAllTask();
@@ -2649,6 +2999,6 @@ export const setup = (
     onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
-    onDispatchKeyDown
-  }
-}
+    onDispatchKeyDown,
+  };
+};