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

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -7,6 +7,11 @@ import {
   toRaw,
   nextTick,
   computed,
+  inject,
+  watch,
+  onActivated,
+  onDeactivated,
+  provide,
 } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import {
@@ -16,7 +21,7 @@ import {
 } from "../TemplateParser/index";
 import { PageUpdater } from "./PageUpdater";
 import { SingleRangeModel } from "../RangeModel";
-import { METRO_WIDGET_CONST } from "./Const";
+import { METRO_WIDGET_CONST, ONEDGE_TYPE } from "./Const";
 import {
   EdgeDirection,
   VERTICAL,
@@ -39,19 +44,27 @@ import {
   JsvUseFeature,
 } from "../../JsViewVueTools/FeatureActive.ts";
 import { randomColor } from "./DebugTools.ts";
+import {
+  KEY_MODE,
+  TOUCH_MODE,
+  JsvInteractionMode,
+  hasJsvTouchModeSwitcher,
+} from "../../JsViewVueTools/JsvInteractionMode";
+import { getId } from "./Utils";
+import { MW_CONTEXT_NAME } from "./Utils";
+import { SPATIAL_NAV_PROVIDER_NAME } from "../SpatialNavigator/SpatialNavigator";
 
 const TAG = "MetroWidget";
 const LONGPRESS_TIMEOUT = 600;
 const DATA_ID_KEY = "jsvKey";
 
-let metroWidgetTokenGen = 1;
-
 const _getMetroTemplate = function (
   widgetRectInfo,
   direction,
   support_history_path,
   layout_type,
-  mode
+  type,
+  errorLogger
 ) {
   let page_size;
   let line_max;
@@ -63,14 +76,15 @@ const _getMetroTemplate = function (
     page_size = widgetRectInfo.contentWidth;
   }
   let metroWidget;
-  switch (mode) {
+  switch (type) {
     case "list":
       metroWidget = new ListMetroTemplate(
         direction,
         line_max,
         page_size,
         layout_type,
-        support_history_path
+        support_history_path,
+        errorLogger
       );
       break;
     default:
@@ -79,15 +93,69 @@ const _getMetroTemplate = function (
         line_max,
         page_size,
         layout_type,
-        support_history_path
+        support_history_path,
+        errorLogger
       );
       break;
   }
   return metroWidget;
 };
 
-const TOUCH_MODE = 1; //触控模式
-const FOCUS_MODE = 2; //按键模式
+const TouchState = {
+  IDLE: 0,
+  TAP: 1,
+  DRAG: 2,
+  FLING: 3,
+};
+
+class TouchStateMgr {
+  constructor(name) {
+    this._name = name;
+    this._touchState = TouchState.IDLE;
+    this._touchCount = 0;
+  }
+  touchStart(touchCount) {
+    this._touchState = TouchState.TAP;
+    this._touchCount = touchCount;
+  }
+  touchEnd(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.IDLE;
+    }
+  }
+  flingStart(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.FLING;
+    }
+  }
+  flingEnd(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.IDLE;
+    }
+  }
+  dragStart(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.DRAG;
+    }
+  }
+  dragEnd(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.IDLE;
+    }
+  }
+  duringFling() {
+    return this._touchState == TouchState.FLING;
+  }
+  duringTouch() {
+    return this._touchState != TouchState.IDLE;
+  }
+  getTouchState() {
+    return this._touchState;
+  }
+  getTouchCount() {
+    return this._touchCount;
+  }
+}
 
 export const setup = (
   props,
@@ -101,40 +169,56 @@ export const setup = (
   pageUpdateToken,
   touchDiv,
   touchDivSize,
+  rootDiv,
   templateMode
 ) => {
+  const errorLogger = (...args) => {
+    console.error(...args, `name=${props.name}`);
+  };
   if (props.itemConfig) {
-    console.error(TAG, "prop: itemCofig will be deprecated soon.");
+    errorLogger(TAG, "prop: itemCofig will be deprecated soon.");
+  }
+
+  function debugLog(...args) {
+    console.debug(
+      `%cccht name:${props.name} %c`,
+      "background-color: #e6ffe6",
+      "",
+      ...args
+    );
   }
 
+  const metroWidgetId = getId();
+  const spatialNavigator = inject(SPATIAL_NAV_PROVIDER_NAME, undefined);
+  const parentMetroWidget = inject(MW_CONTEXT_NAME, undefined);
+
   let widgetRectInfo = new WidgetRectInfo(
     props.width,
     props.height,
-    props.padding
+    props.padding,
+    errorLogger
   );
   let metroTemplate = _getMetroTemplate(
     widgetRectInfo,
     props.direction,
     props.supportHistoryPath,
     props.layoutType,
-    templateMode
+    templateMode,
+    errorLogger
   );
 
-  const TouchState = {
-    IDLE: 0,
-    TAP: 1,
-    DRAG: 2,
-    FLING: 3,
-  };
+  let innerEnableRenderBreak = props.enableItemRenderBreak;
+  const touchEnable = computed(() => {
+    return props.touchFlag > 0 && hasJsvTouchModeSwitcher();
+  });
 
   let innerKeepTraceRange = 0;
   if (typeof props.keepTraceRange == "number" && props.keepTraceRange > 0) {
     innerKeepTraceRange = props.keepTraceRange;
   } else {
-    if (props.touchFlag > 0) {
+    if (touchEnable.value) {
       // 激活引擎功能的支持
       JsvUseFeature("MetroWidget", FeatureNames.TouchReceiver);
-
       //触控默认3屏
       innerKeepTraceRange = 3;
     } else {
@@ -143,63 +227,49 @@ export const setup = (
     }
   }
 
-  const modeForExport = ref(FOCUS_MODE);
-  const mode = {
-    _mode: FOCUS_MODE,
-    _touchState: TouchState.IDLE,
-    _touchCount: 0, // 触控流流程ID，解决fling等事件晚于新的touchDown时引起的混乱问题
-
-    _duringTouch: false,
-    _duringFling: false,
-    touchStart(touchCount) {
-      this._mode = TOUCH_MODE;
-      modeForExport.value = TOUCH_MODE;
-      this._touchState = TouchState.TAP;
-      this._touchCount = touchCount;
-    },
-    touchEnd(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.IDLE;
-      }
-    },
-    flingStart(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.FLING;
+  const onInteractionModeChange = (newMode, oldMode) => {
+    if (newMode === KEY_MODE) {
+      if (touchStateMgr.duringFling()) {
+        return;
       }
-    },
-    flingEnd(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.IDLE;
+      if (focusWhenInTouch) {
+        isFocus.value = true;
       }
-    },
-    dragStart(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.DRAG;
+      const focusItem = _getVisibleFocusableItem();
+      if (focusItem) {
+        const preFocusItem = getItemById(focusId);
+        _changeFocusId(focusItem.id, false);
+        if (preFocusItem && preFocusItem.id !== focusItem.id) {
+          onItemBlur(preFocusItem);
+        }
+        onItemFocus(focusItem);
       }
-    },
-    dragEnd(touchCount) {},
-    keyDown() {
-      this._mode = FOCUS_MODE;
-      modeForExport.value = FOCUS_MODE;
-      this._touchState = TouchState.IDLE;
-    },
-    duringFling() {
-      return this._touchState == TouchState.FLING;
-    },
-    duringTouch() {
-      return this._touchState != TouchState.IDLE;
-    },
-    getMode() {
-      return this._mode;
-    },
-    getTouchState() {
-      return this._touchState;
-    },
-    getTouchCount() {
-      return this._touchCount;
-    },
+    } else if (newMode === TOUCH_MODE) {
+      //进入触控模式, 触发onBlur (onBlur中会有各种副作用, 先不触发)
+      // onItemBlur(getItemById(focusId));
+    } else {
+      console.error("unknown interaction mode", newMode);
+    }
   };
+  let unwatchInteractionMode = watch(
+    JsvInteractionMode,
+    onInteractionModeChange
+  );
 
+  onActivated(() => {
+    if (unwatchInteractionMode) {
+      unwatchInteractionMode();
+    }
+    unwatchInteractionMode = watch(JsvInteractionMode, onInteractionModeChange);
+  });
+
+  onDeactivated(() => {
+    unwatchInteractionMode?.();
+    unwatchInteractionMode = null;
+    isFocus.value = false;
+  });
+
+  const touchStateMgr = new TouchStateMgr(props.name);
   let innerData = [];
   let dataList = [];
   let dataKeyList = [];
@@ -209,7 +279,8 @@ export const setup = (
   let focusId = 0;
   let preFocusId = -1;
   let preEdgeRect = null;
-  let isFocus = false;
+  let isFocus = ref(false);
+  let focusWhenInTouch = false;
   let vertical = props.direction == VERTICAL;
   let templateItemAdder = null;
   let permanentItemList = [];
@@ -227,23 +298,39 @@ export const setup = (
   let freeMoveSlideGapTop = 0;
   let freeMoveSlideGapLeft = 0;
 
+  //使用fbo加速
+  let rootNativeViewId = -1;
+  if (props.renderAcc) {
+    const metroWidgetBox = new Forge.MetroWidgetBoxView();
+    metroWidgetBox.SetEnable(true);
+    rootNativeViewId = Forge.sViewStore.add(
+      new Forge.ViewInfo(metroWidgetBox, null)
+    );
+  }
+
   const DEFAULT_ANIMATION_DURATION = 200;
 
   //rect {left: number, top: number, width: number, height: number }
-  const rectVisibleState = (rect) => {
+  const rectVisibleState = (rect, rectStart, rectEnd) => {
     if (!rect) {
       return 0;
     }
+    if (typeof rectStart == "undefined") {
+      rectStart = visibleInfo.startWithPadding;
+    }
+    if (typeof rectEnd == "undefined") {
+      rectEnd = visibleInfo.endWithPadding;
+    }
     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
+      rect[pos_key] + rect[size_key] - 1 < rectStart ||
+      rect[pos_key] > rectEnd
     ) {
       return 0; // 完全不可见
     } else if (
-      rect[pos_key] < visibleInfo.start ||
-      rect[pos_key] + rect[size_key] - 1 > visibleInfo.end
+      rect[pos_key] < rectStart ||
+      rect[pos_key] + rect[size_key] - 1 > rectEnd
     ) {
       return 1; // 部分可见
     } else {
@@ -251,6 +338,15 @@ export const setup = (
     }
   };
 
+  //判断是否是大于widget尺寸的item
+  const isLargeItem = (itemRect) => {
+    if (vertical) {
+      return itemRect.height > widgetRectInfo.contentHeight;
+    } else {
+      return itemRect.width > widgetRectInfo.contentWidth;
+    }
+  };
+
   //tools
   const lastOfArray = (array) => {
     if (array instanceof Array && array.length > 0) {
@@ -304,6 +400,11 @@ export const setup = (
         });
       });
 
+      if (props.fullDisplayMode) {
+        const totalSize = metroTemplate.getBoundingBoxSize();
+        visibleInfo.range = totalSize[size_key];
+      }
+
       //更新touch的size
       updateTouchDivSize();
 
@@ -315,12 +416,11 @@ export const setup = (
           const preRect =
             getItemById(focusId)?.templateInfo?.layoutCache.getPreRect();
           if (preRect) {
+            //anchorPosition记录之前anchor的布局位置，而不是视口位置
             anchorInfo = {
               anchorPosition:
                 preRect[pos_key] +
-                preRect[size_key] * animInfo.anchor -
-                1 -
-                visibleInfo.start,
+                preRect[size_key] * animInfo.anchor - 1,
               anchor: animInfo.anchor,
             };
           }
@@ -405,6 +505,11 @@ export const setup = (
             targetRect = slideTask.params.rect;
           }
           break;
+        case SlideTaskType.SLIDE_BY_POS_NORMALIZE:
+          const position = slideTask.params.position;
+          templateItemAdder.tryAddItemByPosition(position);
+          targetVisibleStart = normalizeVisibleStart(position, visibleInfo);
+          break;
         default:
           break;
       }
@@ -416,45 +521,48 @@ 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;
+        //新旧item anchor之间的差值
+        let delta = focusItem.templateInfo[pos_key] +
+        focusItem.templateInfo[size_key] * anchorInfo.anchor -
+        1 -
+        anchorInfo.anchorPosition;
+
+        //delta是新旧item anchor之间的差值，需要转换为视口位置
+        let start = visibleInfo.start + delta;
         let totalSize = metroTemplate.getBoundingBoxSize();
         start = Math.min(
           Math.max(0, start),
           totalSize[size_key] - visibleInfo.range
         );
         //resize的情况下, 需要保证第一个和最后一个尺寸变化后, 能完整展示
-        if (focusItem.index == 0) {
-          if (start > focusItem.templateInfo[pos_key]) {
-            start = 0;
-          }
-        } else if (
-          focusItem.templateInfo.index == metroTemplate.getTailItemIndex()
-        ) {
-          if (start + visibleInfo.range > focusItem.templateInfo[pos_key]) {
-            start = Math.max(
-              focusItem.templateInfo[size_key] +
-                focusItem.templateInfo[pos_key] -
-                visibleInfo.range,
-              0
-            );
+        if (JsvInteractionMode.value != TOUCH_MODE) {
+          if (focusItem.index == 0) {
+            if (start > focusItem.templateInfo[pos_key]) {
+              start = 0;
+            }
+          } else if (
+            focusItem.templateInfo.index == metroTemplate.getTailItemIndex()
+          ) {
+            if (start + visibleInfo.range > focusItem.templateInfo[pos_key]) {
+              start = Math.max(
+                focusItem.templateInfo[size_key] +
+                  focusItem.templateInfo[pos_key] -
+                  visibleInfo.range,
+                0
+              );
+            }
           }
         }
-        targetVisibleStart = normalizeVisibleStart(
-          start,
-          focusItem.templateInfo,
-          focusItem.templateInfo.index,
-          visibleInfo
-        );
+        targetVisibleStart = normalizeVisibleStart(start, visibleInfo);
+        slideDoAnim = resizeAnimInfo.doAnim;
       } else {
-        targetRect = getItemById(focusId).templateInfo;
+        //260410fix: 触控的时候不需要做把item移动到可见位置的逻辑
+        if (JsvInteractionMode.value != TOUCH_MODE) {
+          targetRect = getItemById(focusId)?.templateInfo;
+          slideDoAnim = resizeAnimInfo.doAnim;
+        }
       }
-      slideDoAnim = resizeAnimInfo.doAnim;
     }
-
     if (targetRect) {
       const v = visibleInfo.copy();
       let preInfo = null;
@@ -464,7 +572,7 @@ export const setup = (
         if (preInfo) {
           let totalSize = metroTemplate.getBoundingBoxSize();
           v.start = Math.min(
-            Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start),
+            v.start,
             Math.max(0, totalSize[size_key] - v.range)
           );
           preInfo[pos_key] += v.start - visibleInfo.start;
@@ -507,14 +615,19 @@ export const setup = (
 
     //updatePage
     let updateHandler;
+    let updatePageRange = {
+      start: visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      end: visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+    };
     taskManager.run(() => {
       updateHandler = pageUpdater.update(
         metroTemplate,
-        visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-        visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+        updatePageRange.start,
+        updatePageRange.end,
         focusId,
         mergeTmp,
-        permanentItemList
+        permanentItemList,
+        props.fullDisplayMode
       );
       return () => {
         updateHandler.recover();
@@ -553,7 +666,7 @@ export const setup = (
                 });
               };
 
-              if (renderItem.mounted.value) {
+              if (toRaw(renderItem.mounted).value) {
                 doItemSlide(renderItem.rootDiv);
               } else {
                 taskManager.run(() => {
@@ -586,6 +699,15 @@ export const setup = (
         };
       }
       executeSlide(visibleInfo.start, animInfo, updateHandler);
+    } else {
+      //不滚动的时候检查是否已经更新可视的item
+      const applyedRange = pageUpdater.getApplyedRange();
+      if (
+        applyedRange.start != updatePageRange.start ||
+        applyedRange.end != updatePageRange.end
+      ) {
+        updateHandler.apply();
+      }
     }
 
     //回调
@@ -609,6 +731,16 @@ export const setup = (
         };
       });
     }
+    if (resizeList.length > 0 && props.onSizeChange) {
+      taskManager.run(() => {
+        const handler = setTimeout(() => {
+          _onSizeChange();
+        }, 0);
+        return () => {
+          clearTimeout(handler);
+        };
+      });
+    }
   };
   const taskManager = new TaskManager(onAddTask);
   const animationManager = new AnimationManager();
@@ -648,6 +780,7 @@ export const setup = (
     } else {
       updateHandler.apply();
     }
+    _syncOnScroll();
     taskManager.run(() => {
       const handler = setTimeout(() => {
         _onScroll();
@@ -695,6 +828,18 @@ export const setup = (
     };
   };
 
+  const _getPostionRelativeToRoot = (index) => {
+    let templateInfo = getItemByIndex(index).templateInfo;
+    let x_offset = vertical ? 0 : -visibleInfo.start;
+    let y_offset = vertical ? -visibleInfo.start : 0;
+    return {
+      left: templateInfo.left + x_offset + widgetRectInfo.padding.left,
+      top: templateInfo.top + y_offset + widgetRectInfo.padding.top,
+      width: templateInfo.width,
+      height: templateInfo.height,
+    };
+  };
+
   const _getPosition = (index) => {
     let templateInfo = getItemByIndex(index).templateInfo;
     let x_offset = vertical ? 0 : -visibleInfo.start;
@@ -767,38 +912,57 @@ export const setup = (
     if (!item) {
       return;
     }
-    if (isFocus) {
+    if (isFocus.value) {
       item.onClick();
     }
   };
 
   const onItemBlur = (blurItem) => {
     if (!blurItem) return;
-    setItemZIndex(blurItem, 0, false);
-    if (isFocus) {
+    if (isFocus.value) {
       blurItem.onBlur();
     }
   };
 
+  const onItemIgnore = (item) => {
+    if (!item) return;
+    setItemZIndex(item, 0, false);
+    item.onIgnore();
+  }
+
   let gazeIndex = -1;
+  let preGazeIndex = -1;
+  let callGazeAfterUpdate = false;
+  const onItemGaze = (item, rect) => {
+    if (!item || item.index == gazeIndex) { return; }
+    setItemZIndex(item, innerData.length, true);
+    preGazeIndex = gazeIndex;
+    gazeIndex = item.index;
+    if (toRaw(item.mounted).value) {
+      item.onGaze(rect);
+    } else {
+      callGazeAfterUpdate = true;
+    }
+  }
+  
+  let topZItemIndex = -1;
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
-    if (!focusItem) return;
+    if (!focusItem) return false;
+    if (topZItemIndex != focusItem.index) {
+      setItemZIndex(getItemByIndex(topZItemIndex), 0, false);
+    }
     setItemZIndex(focusItem, innerData.length, true);
-    if (isFocus) {
+    topZItemIndex = focusItem.index;
+    if (JsvInteractionMode.value == KEY_MODE && isFocus.value) {
       _itemOnFocusSideEffect(focusItem, rect);
+      if (spatialNavigator) {
+        spatialNavigator.setFocus(focusItem.getSpatialNavNode());
+      }
     }
 
-    if (focusItem.mounted.value) {
-      if (gazeIndex != focusItem.templateInfo.index) {
-        let preGazeItem = getItemByIndex(gazeIndex);
-        if (preGazeItem) {
-          preGazeItem.onIgnore();
-        }
-        gazeIndex = focusItem.templateInfo.index;
-        focusItem.onGaze(rect);
-      }
-      if (isFocus) {
+    if (toRaw(focusItem.mounted).value) {  
+      if (JsvInteractionMode.value == KEY_MODE && isFocus.value) {
         focusItem.onFocus(rect);
       }
       return true;
@@ -812,7 +976,7 @@ export const setup = (
     if (!item) {
       return;
     }
-    if (isFocus) {
+    if (isFocus.value) {
       item.onLongPress();
     }
   };
@@ -822,7 +986,7 @@ export const setup = (
     if (gazeIndex != gazeItem.templateInfo.index) {
       let preGazeItem = getItemByIndex(gazeIndex);
       if (preGazeItem) {
-        preGazeItem.onIgnore();
+        onItemIgnore(preGazeItem);
       }
       gazeIndex = gazeItem.templateInfo.index;
       gazeItem.onGaze(null);
@@ -853,6 +1017,7 @@ export const setup = (
     if (id == focusId || innerData.length <= 0) {
       return;
     }
+    mRectCache.clean();
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
     templateItemAdder.tryAddItemById(id);
@@ -861,7 +1026,9 @@ export const setup = (
       const nextTemplateInfo = next_focus_item.templateInfo;
       _changeFocusId(nextTemplateInfo.id);
       const preFocusItem = getItemById(preFocusId);
+      onItemIgnore(preFocusItem)
       onItemBlur(preFocusItem);
+      onItemGaze(next_focus_item, preEdgeRect);
       onItemFocus(next_focus_item, preEdgeRect);
       if (needSlide) {
         slideToItem(id2Index(id), doAnim);
@@ -873,19 +1040,20 @@ export const setup = (
         }
       }
 
-      const curTemplateInfo = getItemById(focusId).templateInfo;
-
-      let x_off_set = curTemplateInfo.left - nextTemplateInfo.left;
-      let y_off_set = curTemplateInfo.top - nextTemplateInfo.top;
-      preEdgeRect = {
-        direction: null,
-        rect: {
-          x: x_off_set,
-          y: y_off_set,
-          width: curTemplateInfo.width,
-          height: curTemplateInfo.height,
-        },
-      };
+      const curTemplateInfo = getItemById(focusId)?.templateInfo;
+      if (curTemplateInfo) {
+        let x_off_set = curTemplateInfo.left - nextTemplateInfo.left;
+        let y_off_set = curTemplateInfo.top - nextTemplateInfo.top;
+        preEdgeRect = {
+          direction: null,
+          rect: {
+            x: x_off_set,
+            y: y_off_set,
+            width: curTemplateInfo.width,
+            height: curTemplateInfo.height,
+          },
+        };
+      }
       unlock?.();
     }
   };
@@ -950,7 +1118,7 @@ export const setup = (
 
       targetItem.itemConfig.focusZIndex = f;
       targetItem.itemConfig.normalZIndex = n;
-      const focused = isFocus && focusId == index2Id(index);
+      const focused = isFocus.value && focusId == index2Id(index);
       setItemZIndex(targetItem, focused ? f : n, focused);
     }
   };
@@ -960,6 +1128,9 @@ export const setup = (
     doAnim,
     updateParam = { mergeTmp: false }
   ) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
     if (
       slideLock ||
       position == (vertical ? slideDivTop.value : slideDivLeft.value)
@@ -986,6 +1157,9 @@ export const setup = (
     preItem = undefined,
     force = false
   ) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
     taskManager.addTask(
       TaskType.SLIDE,
       {
@@ -1006,6 +1180,9 @@ export const setup = (
     slideToDivInner(div, doAnim);
   };
   const slideToDivInner = (div, doAnim, direction = undefined) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
     if (div) {
       taskManager.addTask(
         TaskType.SLIDE,
@@ -1019,6 +1196,9 @@ export const setup = (
     }
   };
   const slideToRectInner = (rect, doAnim, direction, force) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
     if (
       rect &&
       typeof rect.left == "number" &&
@@ -1038,6 +1218,18 @@ export const setup = (
       );
     }
   };
+
+  const slideToNormalize = (position, doAnim) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
+    taskManager.addTask(
+      TaskType.SLIDE,
+      { position, doAnim },
+      SlideTaskType.SLIDE_BY_POS_NORMALIZE
+    );
+  };
+
   const slideToRect = (rect, doAnim, direction = undefined) => {
     slideToRectInner(rect, doAnim, direction, false);
   };
@@ -1066,26 +1258,23 @@ export const setup = (
   const refreshData = (forceUpdate, slideToFocus = "auto") => {
     //由于data不支持reactive, 因此数据的更新只通过provideData
     if (!props.provideData) {
-      console.error("refreshData: provideData is null.");
+      errorLogger("refreshData: provideData is null.");
       return;
     }
     try {
       let newData = toRaw(safeProvideData()).concat();
       if (newData instanceof Array) {
         let maxSameIndex = -1;
-        let layoutChange = false;
+        let layoutChange = 0; //0: 不需要更新布局, 1: 需要更新布局, 2: 仅删除数据
         let onlyDataChangeList = [];
+        let preGazeId = index2Id(gazeIndex);
         let targetFocusId = focusId;
+        let targetGazeIndex = gazeIndex;
         let curFocusItemChanged = true;
         if (newData.length == 0) {
-          layoutChange = true;
-          targetFocusId = -1;
+          layoutChange = 1;
+          cleanFocusStatus();
         } 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) {
@@ -1108,12 +1297,13 @@ export const setup = (
                 } else {
                   const newMeasureItem = props.measures(newItem);
                   const oldMeasureItem = props.measures(oldItem);
-                  layoutChange = ifLayoutChange(
+                  const changed = ifLayoutChange(
                     props.layoutType,
                     oldMeasureItem,
                     newMeasureItem
                   );
-                  if (layoutChange) {
+                  if (changed) {
+                    layoutChange = 1;
                     break;
                   } else {
                     if (i < innerData.length) {
@@ -1129,10 +1319,11 @@ export const setup = (
               } else {
                 if (i >= newData.length) {
                   //item减少需要布局改变
-                  layoutChange = true;
+                  layoutChange = 2;
                   break;
                 } else {
                   //数据中存在undefined item
+                  errorLogger("undefined item in data list.");
                   throw new Error("undefined item in data list.", i, newData);
                 }
               }
@@ -1140,14 +1331,13 @@ export const setup = (
           }
         }
 
-        // 刷新数据时, 重置gazeIndex
-        if (forceUpdate || curFocusItemChanged || targetFocusId != focusId) {
-          gazeIndex = -1;
-        }
+        //判断是否需要重新onGaze
+        let needReOnGaze = false;
         //更新template
+        const oldDataCount = dataList.length;
         dataList = newData;
         dataKeyList = dataList.map((i) => i[DATA_ID_KEY]);
-        if (forceUpdate || layoutChange) {
+        if (forceUpdate || layoutChange == 1) {
           //需要更新布局
           pageUpdateToken.value++;
           //数据更改
@@ -1157,7 +1347,8 @@ export const setup = (
             props.direction,
             props.supportHistoryPath,
             props.layoutType,
-            templateMode
+            templateMode,
+            errorLogger
           );
           innerData = [];
           templateItemAdder = new TemplateItemAdder(
@@ -1167,116 +1358,179 @@ export const setup = (
             pageRange,
             _onTemplateItemAdd,
             props.name,
-            _onTemplateAddDone
+            getOnTemplateAddDone(true),
+            errorLogger
           );
-          if (props.onScroll || props.touchFlag > 0) {
-            templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+          if (props.onScroll || touchEnable.value || props.fullDisplayMode) {
+            templateItemAdder.tryAddItemByIndex(dataList.length - 1, getOnTemplateAddDone(false));
           } else {
-            templateItemAdder.tryAddItemById(targetFocusId);
+            //加到旧数据的个数，保险一点
+            templateItemAdder.tryAddItemByIndex(Math.min(dataList.length, oldDataCount), getOnTemplateAddDone(false));
           }
+          needReOnGaze = true;
+        } else if (layoutChange == 2) {
+          //仅删除
+          templateItemAdder.removeItemTo(dataList.length);
+          innerData.splice(dataList.length);
         } else {
           templateItemAdder.updateData(newData);
           if (maxSameIndex < newData.length - 1) {
             //追加数据
-            if (props.onScroll || props.touchFlag > 0) {
-              templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+            if (props.onScroll || touchEnable.value || props.fullDisplayMode) {
+              templateItemAdder.tryAddItemByIndex(dataList.length - 1, getOnTemplateAddDone(false));
             } else {
-              templateItemAdder.tryAddItemById(targetFocusId);
+              templateItemAdder.tryAddItemByIndex(Math.min(dataList.length, oldDataCount), getOnTemplateAddDone(false));
             }
           }
+        }
+        //更新focudId 和 gazeIndex
+        let lastFocusableItemId = metroTemplate.idsMap.length - 1;
 
-          //仅用户数据变更
-          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].enableTap = i.measureObj.enableTap ?? false;
-              } else {
-                //之后的数据未布局, 尚未添加到innerData中
-                break;
+        if (lastFocusableItemId < 0) {
+          targetFocusId = -1;
+          targetGazeIndex = -1;
+        } else {
+          targetFocusId = Math.max(0, Math.min(lastFocusableItemId, focusId));
+          targetGazeIndex = id2Index(Math.max(0, Math.min(lastFocusableItemId, preGazeId)));
+        }
+
+        //仅用户数据变更
+        if (onlyDataChangeList.length > 0) {
+          for (let i of onlyDataChangeList) {
+            if (i.index < innerData.length) {
+              if (i.index == gazeIndex) {
+                needReOnGaze = true;
               }
+              innerData[i.index].updateCustomData(
+                i.data,
+                _getItemConfigFromMeasursObj(i.measureObj)
+              );
+              innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
+            } else {
+              //之后的数据未布局, 尚未添加到innerData中
+              break;
             }
           }
         }
+
+        //数据更新，清理缓存的范围信息，避免旧的范围与新的有冲突
+        pageUpdater.cleanCache();
         //更新可视
         const updater = pageUpdater.update(
           metroTemplate,
           visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
           visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-          focusId,
+          index2Id(targetGazeIndex),
           false,
-          permanentItemList
+          permanentItemList,
+          props.fullDisplayMode
         );
         updater.apply();
+        if (!renderData.value.some((i) => i.templateInfo.index == gazeIndex)) {
+          needReOnGaze = false;
+        }
 
-        //其他处理
-        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);
+        let preVisibleStart = visibleInfo.start;
+
+        if (targetGazeIndex != gazeIndex || layoutChange == 2) {
+          //仅在删除数据的时候更新, 其他情况都保留之前的滚动信息
+          //由于template add done 回调里会更新box, 需要在template重新创建前, 重置所有的滚动信息
+          visibleInfo = visibleInfo.copy();
+          visibleInfo.start = 0;
+          visibleInfo._startMax = 0;
+          slideDivLeft.value = 0;
+          slideDivTop.value = 0;
+        }
+
+        let needSlide = false;
+        let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+        if (targetGazeIndex != gazeIndex) {
+          needSlide = true;
+        } else if (slideToFocus == "enable") {
+          needSlide = true;
+        } else if (slideToFocus == "disable") {
+          needSlide = false;
+        } else if (layoutChange == 2) {
+          needSlide = true;
         } 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 (JsvInteractionMode.value == KEY_MODE) {
             if (targetRect) {
-              needSlide = rectVisibleState(targetRect) !== 0;
+              needSlide = rectVisibleState(targetRect) !== 2;
             } else {
               needSlide =
-                rectVisibleState(getItemById(focusId)?.templateInfo) !== 0;
+                rectVisibleState(getItemByIndex(targetGazeIndex)?.templateInfo) !==
+                2;
             }
+          } else {
+            //touch模式下，不需要滑动
           }
-          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);
+        }
 
-          if (targetFocusId != focusId) {
-            //重置所有的滚动信息
-            _changeFocusId(targetFocusId, false);
+        const gazeItem = getItemByIndex(targetGazeIndex);
+        const focusItem = getItemById(focusId);
+        if (gazeItem) {
+          //数据刷新时, 重置preEdgeRect, 否则再嵌套模式下, 会使用上一次的preEdgeRect, 导致子又findNearestByRect
+          preEdgeRect = null;
+          if (needSlide) {
+            if (layoutChange == 2) {
+              slideToNormalize(preVisibleStart, false);
+            } else if (targetRect) {
+              slideToRectInner(targetRect, false, 0, true);
+            } else if (
+              focusItem && focusItem.itemConfig.itemSlide ==
+              METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+            ) {
+              //只有这个item是控制滚动的才slide, 其他如嵌套时不需要slide
+              slideToItemInner(targetGazeIndex, false, 0, 0, true);
+            }
           }
+        } else {
+          slideToInner(0, false);
+          preEdgeRect = null;
+          mRectCache.clean();
+        }
 
-          const focusItem = getItemById(focusId);
+        //与交互模式相关的处理
+        if (JsvInteractionMode.value == 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);
+
+          updateTouchBoxCondition();
+          if (gazeIndex != targetGazeIndex) {
+            gazeIndex = targetGazeIndex;
+          }
+          if (needReOnGaze) {
+            getItemByIndex(gazeIndex)?.onGaze(null);
+          }
+        } else {
+          if (gazeItem) {
+            onItemGaze(gazeItem, null);
+          }
           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();
           }
         }
       }
     } catch (e) {
       console.log(TAG, "refresh error", e);
     }
+
+    //refresh完成后, 重置renderBreak
+    if (props.enableItemRenderBreak !== innerEnableRenderBreak) {
+      nextTick(() => {
+        innerEnableRenderBreak = props.enableItemRenderBreak;
+        window.JsView?.setRenderBreakEnable?.(true);
+        vRenderBreakChanged = false;
+      });
+    }
+    _onSizeChange();
   };
 
   const getVisibleItems = () => {
@@ -1323,7 +1577,7 @@ export const setup = (
     ) {
       _moveToNext(0, 1);
     } else {
-      console.error(TAG, "moveFocus direction is invalid.", direction);
+      errorLogger(TAG, "moveFocus direction is invalid.", direction);
     }
   };
 
@@ -1362,6 +1616,99 @@ export const setup = (
     }
   };
 
+  let vRenderBreakChanged = false;
+  const tmpDisableRenderBreak = () => {
+    if (props.enableItemRenderBreak) {
+      innerEnableRenderBreak = false;
+      window.JsView?.setRenderBreakEnable?.(false);
+      vRenderBreakChanged = true;
+    }
+  };
+
+  const getCurrentVisibleRange = () => {
+    return {
+      leftTop: {
+        x: props.direction == VERTICAL ? 0 : visibleInfo.startWithPadding,
+        y: props.direction == VERTICAL ? visibleInfo.startWithPadding : 0,
+      },
+      rightBottom: {
+        x:
+          props.direction == VERTICAL
+            ? props.width
+            : visibleInfo.endWithPadding,
+        y:
+          props.direction == VERTICAL
+            ? visibleInfo.endWithPadding
+            : props.height,
+      },
+    };
+  };
+
+  //获取指定区间内可视item的树(MetroWidget嵌套时)
+  const getItemVisibleState = (leftTop, rightBottom) => {
+    //传过来的区域已经是真实区域了，不需要再减去padding
+    const rangeStart =
+      props.direction == VERTICAL
+        ? leftTop.y
+        : leftTop.x;
+    const rangeEnd =
+      props.direction == VERTICAL
+        ? rightBottom.y
+        : rightBottom.x;
+    const [startIndex, endIndex] = metroTemplate.getVisibleItemList(
+      rangeStart,
+      rangeEnd,
+      gazeIndex
+    );
+    const result = [];
+    for (let index = startIndex; index <= endIndex; index++) {
+      const item = getItemByIndex(index);
+      if (item) {
+        const s = rectVisibleState(item.templateInfo, rangeStart, rangeEnd);
+        if (s == 0) {
+          //getVisibleItemList返回的区间内可能还有不可见的item
+          continue;
+        }
+        //rangeStart和rangeEnd转化为相对与item的相对位置
+        const itemLeftTop = {
+          x: item.templateInfo.left + widgetRectInfo.padding.left,
+          y: item.templateInfo.top + widgetRectInfo.padding.top,
+        };
+        const newLeftTop = {
+          x: leftTop.x - itemLeftTop.x,
+          y: leftTop.y - itemLeftTop.y,
+        };
+        const newRightBottom = {
+          x: rightBottom.x - itemLeftTop.x,
+          y: rightBottom.y - itemLeftTop.y,
+        };
+        const itemVisibleState = item.onGetItemVisibleState(
+          newLeftTop,
+          newRightBottom
+        );
+        let info = {
+          name: props.name,
+          index: index,
+          visibleState: s == 1 ? "partial" : "full",
+          children: itemVisibleState ? itemVisibleState : [],
+          widgetHandler: exportObject,
+        };
+        if (index == gazeIndex) {
+          result.unshift(info);
+        } else {
+          result.push(info);
+        }
+      }
+    }
+    return result;
+  };
+
+  const cleanFocusStatus = () => {
+    preFocusId = -1;
+    focusId = -1;
+    gazeIndex = -1;
+  };
+
   const exportObject = {
     lockSlide,
     unlockSlide,
@@ -1386,6 +1733,11 @@ export const setup = (
     cancelDelayLoad: tryCancelDelayLoad,
     setSensorSensitivity,
     getItemLayoutInfo: _getTemplatePosition,
+    tmpDisableRenderBreak,
+    getItemVisibleState,
+    getCurrentVisibleRange,
+    cleanFocusStatus,
+    getName: () => props.name,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1582,25 +1934,20 @@ 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();
-        if (focusItem) {
-          const preFocusItem = getItemById(focusId);
-          _changeFocusId(focusItem.id, false);
-          if (preFocusItem.id !== focusItem.id) {
-            onItemBlur(preFocusItem);
-          }
-          onItemFocus(focusItem);
-        }
+    if (
+      ev.keyCode == 37 ||
+      ev.keyCode == 38 ||
+      ev.keyCode == 39 ||
+      ev.keyCode == 40
+    ) {
+      //fling过程中不处理按键
+      if (touchStateMgr.duringFling()) {
+        window.JsView?.changeInteractionMode?.("touch", "key");
+      }
+
+      if (JsvInteractionMode.value == TOUCH_MODE) {
+        JsvInteractionMode.value = KEY_MODE;
+        touchStateMgr.touchEnd(touchStateMgr.getTouchCount());
         return true;
       }
     }
@@ -1659,11 +2006,9 @@ export const setup = (
       preStartKeyDownTime = ev.timeStamp;
     }
     tryCancelDelayLoad();
-    if (mode.getMode() == TOUCH_MODE) {
-      if (mode.duringTouch()) {
-        //touch过程中的按键不处理
-        return true;
-      }
+    if (JsvInteractionMode.value == TOUCH_MODE && touchStateMgr.duringTouch()) {
+      //touch过程中的按键不处理
+      return true;
     }
 
     if (_moveByKey(ev.keyCode)) {
@@ -1672,7 +2017,7 @@ export const setup = (
     if (ev.keyCode == 13) {
       const curFocusItem = getItemById(focusId);
       clickDownReceived = true;
-      if (curFocusItem.itemConfig.enableLongPress) {
+      if (curFocusItem?.itemConfig.enableLongPress) {
         if (
           ev.repeat &&
           ev.timeStamp - preStartKeyDownTime > LONGPRESS_TIMEOUT &&
@@ -1707,13 +2052,21 @@ export const setup = (
     }
   }
 
-  const _onTemplateAddDone = () => {
-    //update slideDiv size
-    let preTouchW = touchDivSize.width;
-    let preTouchH = touchDivSize.height;
-    updateTouchDivSize();
-    if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
-      updateTouchBoxCondition();
+  const getOnTemplateAddDone = (needUpdateBox) => {
+    return () => {
+      //update slideDiv size
+      let preTouchW = touchDivSize.width;
+      let preTouchH = touchDivSize.height;
+      updateTouchDivSize();
+      if (needUpdateBox) {
+        if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+          updateTouchBoxCondition();
+        }
+      }
+      if (props.fullDisplayMode) {
+        let size_key = vertical ? "height" : "width";
+        visibleInfo.range = metroTemplate.getBoundingBoxSize()[size_key];
+      }
     }
   };
 
@@ -1744,9 +2097,39 @@ export const setup = (
         measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
       showSkeleton: measuresObj.showSkeleton ?? true,
       enableLongPress: measuresObj.enableLongPress ?? props.enableLongPress,
+      bindSpatialNav: measuresObj.bindSpatialNav ?? false,
     };
   };
 
+  const rootPositionCache = {
+    cacheToken: -1,
+    cacheTargetDiv: undefined,
+    cacheRect: undefined,
+  }
+  const getItemPositionWithCache = (token, target, itemIndex) => {
+    if (!target || !rootDiv.value) {
+      return undefined;
+    }
+    let rootRect;
+    if (rootPositionCache.cacheToken === token 
+      && rootPositionCache.cacheTargetDiv === target 
+      && rootPositionCache.cacheRect) {
+      rootRect = rootPositionCache.cacheRect;
+    } else {
+      rootRect = rootDiv.value.jsvGetRelativePosition(target);
+      rootPositionCache.cacheToken = token;
+      rootPositionCache.cacheTargetDiv = target;
+      rootPositionCache.cacheRect = rootRect;
+    }
+    const itemRect = _getPostionRelativeToRoot(itemIndex);
+    return {
+      left: rootRect.left + itemRect.left,
+      top: rootRect.top + itemRect.top,
+      width: itemRect.width,
+      height: itemRect.height,
+    };
+  }
+
   const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
     let itemConfig = _getItemConfigFromMeasursObj(measuresObj);
 
@@ -1764,6 +2147,12 @@ export const setup = (
       renderStyle,
       itemConfig,
       () => {
+        if (callGazeAfterUpdate && item.index == gazeIndex) {
+          nextTick(() => {
+            item.onGaze(preEdgeRect);
+          });
+          callGazeAfterUpdate = false;
+        }
         if (callFocusAfterUpdate && item.id === focusId) {
           nextTick(() => {
             onItemFocus(item, preEdgeRect);
@@ -1784,28 +2173,53 @@ export const setup = (
       },
       {
         onTap: onItemTap,
-      }
+        getMwChain: () => {
+          return metroWidgetChain;
+        },
+        name: props.name,
+        getItemPositionWithCache,
+      },
+      props.renderAcc,
+      innerEnableRenderBreak
     );
     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)
-        }
-      }
+      let l, t, w, h, logoW, logoH;
+      l =
+        typeof measuresObj.placeHolderLayout?.left == "number"
+          ? measuresObj.placeHolderLayout.left
+          : 0;
+      t =
+        typeof measuresObj.placeHolderLayout?.top == "number"
+          ? measuresObj.placeHolderLayout.top
+          : 0;
+      w =
+        typeof measuresObj.placeHolderLayout?.width == "number"
+          ? measuresObj.placeHolderLayout.width
+          : item.renderStyle.width - (props.placeHolderSetting.gap ?? 0);
+      h =
+        typeof measuresObj.placeHolderLayout?.height == "number"
+          ? measuresObj.placeHolderLayout.height
+          : item.renderStyle.height - (props.placeHolderSetting.gap ?? 0);
+      logoW =
+        typeof measuresObj.placeHolderLayout?.logoWidth == "number"
+          ? measuresObj.placeHolderLayout.logoWidth
+          : props.placeHolderSetting.logoWidth ?? 0;
+      logoH =
+        typeof measuresObj.placeHolderLayout?.logoHeight == "number"
+          ? measuresObj.placeHolderLayout.logoHeight
+          : props.placeHolderSetting.logoHeight ?? 0;
+      item.placeHolderLayout = {
+        left: l,
+        top: t,
+        width: w,
+        height: h,
+        logoWidth: logoW,
+        logoHeight: logoH,
+      };
     }
-    
+
     innerData.push(item);
     if (item.itemConfig.permanent) {
       permanentItemList.push({
@@ -1909,6 +2323,26 @@ export const setup = (
     }
   };
 
+  const _innerOnEdge = (rect) => {
+    if (props.onEdge) {
+      if (typeof props.onEdge === "string") {
+        if (props.onEdge === ONEDGE_TYPE.SPATIAL_NAV) {
+          if (spatialNavigator) {
+            spatialNavigator.moveTo(rect.direction);
+          } else {
+            console.warn("MetroWidget: onEdge is spatialNav, but spatialNavigator is not set", props.name);
+          }
+        } else {
+          console.warn("MetroWidget: onEdge string is not valid", props.name, props.onEdge);
+        }
+      } else if (typeof props.onEdge === "function") {
+        props.onEdge(rect);
+      } else {
+        console.warn("MetroWidget: onEdge is not a function nor a string", props.name);
+      }
+    }
+  }
+
   const _moveToNext = (
     horizontal_direction,
     vertical_direction,
@@ -1929,7 +2363,7 @@ export const setup = (
         console.warn(TAG, "moveToNext error");
       }
       if (direction) {
-        props.onEdge?.({
+        _innerOnEdge({
           direction: direction,
           rect: {
             x: 0,
@@ -1983,7 +2417,9 @@ export const setup = (
           },
         };
       }
+      onItemIgnore(preFocusItem)
       onItemBlur(preFocusItem);
+      onItemGaze(next_focus_item, preEdgeRect);
       onItemFocus(next_focus_item, preEdgeRect);
 
       if (
@@ -2003,7 +2439,8 @@ export const setup = (
           visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
           next_focus_item.id,
           false,
-          permanentItemList
+          permanentItemList,
+          props.fullDisplayMode
         );
         //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
         updater.applyTmp();
@@ -2043,7 +2480,7 @@ export const setup = (
         };
       }
 
-      props.onEdge?.({
+      _innerOnEdge({
         direction: edge,
         rect: rect,
         childEdgeInfo: item_edge_rect,
@@ -2054,7 +2491,7 @@ export const setup = (
     }
   };
 
-  const normalizeVisibleStart = (origin, targetRect, index, _visibleInfo) => {
+  const normalizeVisibleStart = (origin, _visibleInfo) => {
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let visibleStart = origin;
@@ -2097,7 +2534,7 @@ export const setup = (
     preInfo = null
   ) => {
     if (!targetRect) {
-      console.error("MetroWidget: _calculateVisibleStart target item is null");
+      errorLogger("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
     }
     const curRect = {
@@ -2154,7 +2591,7 @@ export const setup = (
       case SlideSetting.Type.WHOLE_PAGE:
         if (!templateInfo || typeof templateInfo.pageHeadIndex == "undefined") {
           //TODO 子控制滚动时whole page滚动
-          console.error(
+          errorLogger(
             "child controlled whole page slide type is not supported."
           );
         } else {
@@ -2262,18 +2699,13 @@ export const setup = (
         }
         break;
       default:
-        console.error(
+        errorLogger(
           "MetroWidget: undefined slide type",
           innerSlideSetting.Type
         );
     }
 
-    new_visible_start = normalizeVisibleStart(
-      new_visible_start,
-      targetRect,
-      templateInfo?.index,
-      vInfo
-    );
+    new_visible_start = normalizeVisibleStart(new_visible_start, vInfo);
     return Math.round(new_visible_start);
   };
 
@@ -2304,38 +2736,43 @@ export const setup = (
   };
 
   const focusBlockOnFocus = (params) => {
-    isFocus = true;
-    if (innerData.length === 0) {
-      console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
+    if (JsvInteractionMode.value == TOUCH_MODE) {
+      focusWhenInTouch = true;
       return;
     }
-
-    let focus_id = index2Id(gazeIndex);
-    focus_id =
-      typeof enterFocusId !== "undefined" &&
-      enterFocusId >= 0 &&
-      enterFocusId < metroTemplate.size
-        ? enterFocusId
+    isFocus.value = true;
+
+    if (innerData.length !== 0) {
+      let focus_id = focusId;
+      focus_id =
+        typeof enterFocusId !== "undefined" &&
+        enterFocusId >= 0 &&
+        enterFocusId < metroTemplate.size
+          ? enterFocusId
+          : focus_id;
+      focus_id = _ifValidEnterRect(enterFocusRect)
+        ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
         : focus_id;
-    focus_id = _ifValidEnterRect(enterFocusRect)
-      ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
-      : focus_id;
-    preEdgeRect = enterFocusRect;
-    _changeFocusId(focus_id, false);
-    enterFocusId = -1;
-    enterFocusRect = null;
-    firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
+      preEdgeRect = enterFocusRect;
+      _changeFocusId(focus_id, false);
+      enterFocusId = -1;
+      enterFocusRect = null;
+      firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
+    } else {
+      console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
+    }
     props.onFocus?.();
   };
 
   const focusBlockOnBlur = () => {
+    focusWhenInTouch = false;
     enterFocusId = -1;
     enterFocusRect = null;
     preEdgeRect = null;
     preFocusId = focusId;
     onItemBlur(getItemById(preFocusId));
     props.onBlur?.();
-    isFocus = false;
+    isFocus.value = false;
     mRectCache.clean();
   };
 
@@ -2348,11 +2785,44 @@ export const setup = (
     let newArray = tmpArray.map((item) => {
       return getItemByIndex(item);
     });
-    const newItemList = newArray.filter((i) => {
-      return !renderData.value?.includes(i);
-    });
+    //新进的item
+    newArray
+      .filter((i) => {
+        return !renderData.value?.includes(i);
+      })
+      .forEach((i) => {
+        i.onInRenderRange();
+        i.renderBreak = innerEnableRenderBreak;
+      });
+    //退出的item
+    renderData.value
+      .filter((i) => {
+        return !newArray.includes(i);
+      })
+      .forEach((i) => {
+        i.onOutOfRenderRange();
+        if (spatialNavigator) {
+          spatialNavigator.unregisterNode(i.getSpatialNavNode());
+        }
+      });
+
+    //注册spatial navigator
+    if (spatialNavigator) {
+      for (let item of newArray) {
+        const visibleState = rectVisibleState(item.templateInfo);
+        const n = item.getSpatialNavNode();
+        if (visibleState == 2 || visibleState == 1) {
+          if (n) {
+            spatialNavigator.registerNode(n);
+          }
+        } else {
+          spatialNavigator.unregisterNode(n);
+        }
+      }
+    }
+
     renderData.value = newArray;
-    if (props.enableItemRenderBreak) {
+    if (innerEnableRenderBreak) {
       itemRender.value = false;
       const f = () => {
         // 关闭强制TriggerManualBlock，改为vue内部通过dom的任务数来确定是否执行打断
@@ -2367,25 +2837,67 @@ export const setup = (
 
   const _getVisibleFocusableItem = () => {
     let item = getItemByIndex(gazeIndex);
-    if (rectVisibleState(item.templateInfo) == 2) {
-      return item;
+    if (item) {
+      let itemVisibility = rectVisibleState(item.templateInfo);
+      let isLarge = isLargeItem(item.templateInfo);
+      if (itemVisibility == 2) {
+        return item;
+      }
     }
+
     item = getItemById(focusId);
-    if (rectVisibleState(focusItem.templateInfo) == 2) {
-      return focusItem;
+    if (item) {
+      let itemVisibility = rectVisibleState(item.templateInfo);
+      let isLarge = isLargeItem(item.templateInfo);
+      if (itemVisibility == 2) {
+        return item;
+      }
     }
+
     //遍历renderList, 找到第一个可见的 focusable item
+    let resultItem = null;
     for (let item of renderData.value) {
+      let itemVisibility = rectVisibleState(item.templateInfo);
+      let isLarge = isLargeItem(item.templateInfo);
       if (
         item.templateInfo.focusable &&
-        rectVisibleState(item.templateInfo) == 2
+        (itemVisibility == 2 || (itemVisibility == 1 && isLarge))
       ) {
-        return item;
+        resultItem = item;
+        break;
       }
     }
+    if (resultItem == null) {
+      //找到占空间最大的部分可视item;
+    }
     return null;
   };
 
+  let preSize = 0;
+  const _onSizeChange = () => {
+    if (props.fullDisplayMode) {
+      nextTick(() => {
+        let size = 0;
+        if (innerData.length > 0) {
+          const lastTemplateInfo =
+            innerData[innerData.length - 1]?.templateInfo;
+          if (vertical) {
+            size = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+          } else {
+            size = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+          }
+        }
+        if (size != preSize) {
+          preSize = size;
+          props.onSizeChange?.({
+            width: vertical ? props.width : size,
+            height: vertical ? size : props.height,
+          });
+        }
+      });
+    }
+  };
+
   const _onScroll = () => {
     if (props.onScroll) {
       const lastTemplateInfo = getItemByIndex(
@@ -2402,6 +2914,22 @@ export const setup = (
       props.onScroll(visibleInfo.start, visibleInfo.range, totalWidth);
     }
   };
+  const _syncOnScroll = () => {
+    if (props.syncOnScroll) {
+      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.syncOnScroll(visibleInfo.start, visibleInfo.range, totalWidth);
+    }
+  }
 
   //touch setting
   let actorController = null;
@@ -2523,17 +3051,23 @@ export const setup = (
     mergeTouchSlideToSlideDiv(touchCount);
     //由于movement的监听是有帧数间隔的, 所以结束时需要再调用一次onScroll
     _onScroll();
+    _syncOnScroll();
   }
 
   const onTouchDown = (data, customData, nexusCustomData) => {
+    const curPos = vertical ? slideDivTop.value : slideDivLeft.value;
+    let needMerge = -visibleInfo.start != curPos;
+    if (needMerge) {
+      mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
+    }
+
     touchRecorder.reset();
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.setTouchCount(touchCount);
     updateTouchBoxCondition();
 
-    mode.touchStart(touchCount);
-    // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
-    //  "onTouchDown", data, customData, nexusCustomData)
+    JsvInteractionMode.value = TOUCH_MODE;
+    touchStateMgr.touchStart(touchCount);
 
     // 运动方向锁定机制
     // 当MetroWidget在某一方向拖动后，讲另一方向的移动进行锁定
@@ -2569,9 +3103,6 @@ export const setup = (
         ]),
     ]);
 
-    //blur item
-    // onItemBlur(getItemById(focusId));
-
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
     const updater = pageUpdater.update(
@@ -2580,7 +3111,8 @@ export const setup = (
       visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       false,
-      permanentItemList
+      permanentItemList,
+      props.fullDisplayMode
     );
     updater.apply();
 
@@ -2612,18 +3144,20 @@ export const setup = (
       );
       return reachConditionList;
     });
+
+    props.onTouchFocus?.();
   };
 
   const onTouchRelease = (touchCount) => {
-    if (mode.getTouchState() == TouchState.TAP) {
+    if (touchStateMgr.getTouchState() == TouchState.TAP) {
       //只点击, 没有移动或者fling
       updateRenderItems(false, false);
-      mode.touchEnd(touchCount);
+      touchStateMgr.touchEnd(touchCount);
     } else {
-      if (touchRecorder.moved && !mode.duringFling()) {
+      if (touchRecorder.moved && !touchStateMgr.duringFling()) {
         onTouchActionDone(touchRecorder.touchCount);
         updateRenderItems(false, false);
-        mode.touchEnd(touchCount);
+        touchStateMgr.touchEnd(touchCount);
       }
     }
     actorController.run((cmds) => [
@@ -2632,21 +3166,26 @@ export const setup = (
     ]);
   };
 
-  const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
+  const exportOnTouchRelease = touchEnable.value ? onTouchRelease : undefined;
 
   const onDragStart = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    if (!(mode.getTouchCount() == touchCount && mode.duringFling())) {
+    if (
+      !(
+        touchStateMgr.getTouchCount() == touchCount &&
+        touchStateMgr.duringFling()
+      )
+    ) {
       //dragStart event may be triggered after fling event because of sending it when startMove condition is satisfied
-      mode.dragStart(touchCount);
+      touchStateMgr.dragStart(touchCount);
     }
     visibleInfo.start = getVisibleStart(data);
   };
 
   const onDragEnd = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
-    mode.dragEnd(touchCount);
+    touchStateMgr.dragEnd(touchCount);
     visibleInfo.start = getVisibleStart(data);
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(reachAnchorGroup),
@@ -2656,7 +3195,7 @@ export const setup = (
   const onFlingStart = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.flingStart(touchCount);
+    touchStateMgr.flingStart(touchCount);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   };
@@ -2670,12 +3209,12 @@ export const setup = (
   const onFlingEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
     //记录拖拽的距离
-    if (mode.duringFling()) {
+    if (touchStateMgr.duringFling()) {
       let touchCount = getTouchCount(nexusCustomData);
       onTouchActionDone(touchCount);
       updateRenderItems(false, false);
-      mode.flingEnd(touchCount);
-      mode.touchEnd(touchCount);
+      touchStateMgr.flingEnd(touchCount);
+      touchStateMgr.touchEnd(touchCount);
     }
   };
 
@@ -2684,6 +3223,16 @@ export const setup = (
     visibleInfo.start = getVisibleStart(data);
   };
 
+  const onFlingCancel = (data, customData, nexusCustomData) => {
+    visibleInfo.start = getVisibleStart(data);
+    if (touchStateMgr.duringFling()) {
+      let touchCount = getTouchCount(nexusCustomData);
+      onTouchActionDone(touchCount);
+      updateRenderItems(false, false);
+      touchStateMgr.flingEnd(touchCount);
+    }
+  };
+
   const getTouchWall = () => {
     const boxSize = metroTemplate.getBoundingBoxSize();
     let wall = {
@@ -2692,6 +3241,9 @@ export const setup = (
       right: 0,
       bottom: 0,
     };
+    if (props.fullDisplayMode) {
+      return wall;
+    }
     if (vertical) {
       wall.top =
         -boxSize.height +
@@ -2727,16 +3279,16 @@ export const setup = (
       visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       true,
-      permanentItemList
+      permanentItemList,
+      props.fullDisplayMode
     );
     applyTmp ? updater.applyTmp() : updater.apply();
   };
 
   const updateTouchBoxCondition = () => {
-    if (mode.getMode() != TOUCH_MODE) return;
+    if (JsvInteractionMode.value != TOUCH_MODE) return;
     if (actorController != null) {
       const walls = getTouchWall();
-
       //更新wall设置
       actorController.run((cmds) => [
         cmds.state().removeConditionByGroup(wallConditionGroup),
@@ -2763,8 +3315,6 @@ export const setup = (
     },
   };
 
-  const metroWidgetToken = metroWidgetTokenGen++;
-
   let orderTouchSlideCallbacks;
   const SliderEditFuncReOrderWrap = (callback, addHeader = false) => {
     return (...args) => {
@@ -2839,6 +3389,10 @@ export const setup = (
         .condition(undefined, true)
         .onFlingDrop()
         .then([SliderEditFuncReOrderWrap(onFlingDrop)]),
+      cmds
+        .condition(undefined, true)
+        .onFlingCancel()
+        .then([SliderEditFuncReOrderWrap(onFlingCancel)]),
       cmds
         .condition(undefined, true)
         .onTouchRelease()
@@ -2854,7 +3408,35 @@ export const setup = (
     }
   };
 
-  function cleanTouch() {
+  const onMouseWheelScrollProgress = (data) => {
+    visibleInfo.start = getVisibleStart(data);
+    updateRenderItems(true, true);
+    mergeTouchSlideToSlideDiv();
+  };
+
+  const DEFAULT_MOUSE_CONFIG = {
+    wheelRate: 10,
+  }
+  let mouseInited = false;
+  const initMouse = () => {
+    mouseInited = true;
+    const divView = touchDiv.value.jsvGetProxyView();
+    if (!actorController) {
+      actorController = new ActorControl();
+      actorController.bindForgeView(divView, true);
+    }
+    // 1: hover, 2: scroll, 目前只打开scroll
+    divView.HoverEnables(2);
+    divView.SetMouseWheelRate(props.mouseConfig?.wheelRate ?? DEFAULT_MOUSE_CONFIG.wheelRate);
+    actorController.run((cmds) => [
+      cmds
+        .condition(undefined, true)
+        .onMouseWheelScrollProgress()
+        .then([onMouseWheelScrollProgress]),
+    ]);
+  };
+
+  function cleanFreeMoveConditions() {
     actorController.run((cmds) => [
       cmds.state().clearAllConditions(),
       cmds.state().touchLockSwitch(false, vertical ? 1 : 2),
@@ -2895,9 +3477,10 @@ export const setup = (
     pageRange,
     _onTemplateItemAdd,
     props.name,
-    _onTemplateAddDone
+    getOnTemplateAddDone(true),
+    errorLogger
   );
-  if (props.onScroll) {
+  if (props.onScroll || props.fullDisplayMode) {
     templateItemAdder.tryAddItemByIndex(dataList.length - 1);
   } else {
     templateItemAdder.tryAddItem(null, 2);
@@ -2935,12 +3518,13 @@ export const setup = (
     initVisibleInfo.endWithPadding,
     0,
     false,
-    permanentItemList
+    permanentItemList,
+    props.fullDisplayMode
   );
   initUpdater.apply();
   //触控时, 延时加载剩余屏
   let delayLoadHandler = -1;
-  if (props.touchFlag > 0) {
+  if (touchEnable.value) {
     delayLoadHandler = setTimeout(() => {
       const updateHandler = pageUpdater.update(
         metroTemplate,
@@ -2948,7 +3532,8 @@ export const setup = (
         initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
         focusId,
         false,
-        permanentItemList
+        permanentItemList,
+        props.fullDisplayMode
       );
       updateHandler.apply();
     }, 200);
@@ -2963,28 +3548,74 @@ export const setup = (
     if (!firstOnItemFocusCalled) {
       firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
     }
+    //第一次ongaze
+    onItemGaze(getItemById(focusId), preEdgeRect);
 
     if (props.enableItemRenderBreak) {
       nextTick(() => {
         itemRender.value = true;
       });
     }
-    if (props.touchFlag === 1) {
+    if (touchEnable.value) {
       initTouch();
     }
+    if (props.mouseFlag > 0) {
+      initMouse();
+    }
+    _onSizeChange();
   });
 
   onUpdated(() => {});
 
   onBeforeUnmount(() => {
+    if (vRenderBreakChanged) {
+      window.JsView?.setRenderBreakEnable?.(true);
+    }
     taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
     if (touchInited) {
-      cleanTouch();
+      cleanFreeMoveConditions();
+    }
+    if (rootNativeViewId != -1) {
+      Forge.sViewStore.remove(rootNativeViewId);
+    }
+    if (spatialNavigator) {
+      renderData.value.forEach((item) => {
+        spatialNavigator.unregisterNode(item.getSpatialNavNode());
+      });
     }
   });
 
+  //spatial navigator相关
+  //作为子MetroWidget时的index
+  let selfChildIndex = undefined;
+  function getSelfChildIndex () {
+    if (!parentMetroWidget) { return undefined; }
+    if (!rootDiv.value) {
+      console.warn("getSelfChildIndex before mounted.")
+      return undefined;
+    }
+    if (selfChildIndex !== undefined) { return selfChildIndex; }
+    let n = rootDiv.value;
+    while(n) {
+      if (n.getAttribute("__metrowidget-index") !== undefined) {
+        selfChildIndex = parseInt(n.getAttribute("__metrowidget-index"));
+        break;
+      }
+      n = n.parentNode;
+    }
+    return selfChildIndex;
+  };
+  const provideObj = {
+    id: metroWidgetId,
+    divRef: rootDiv,
+    handler: exportObject,
+    getSelfChildIndex,
+  }
+  const metroWidgetChain = parentMetroWidget ? [...parentMetroWidget, provideObj] : [provideObj];
+  provide(MW_CONTEXT_NAME, metroWidgetChain);
+
   return {
     widgetRectInfo,
     focusBlockOnFocus,
@@ -2998,7 +3629,8 @@ export const setup = (
     onTouchDown,
     onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
-    modeForExport,
     onDispatchKeyDown,
+    isFocus,
+    rootNativeViewId,
   };
 };