@shijiu/jsview-vue 2.2.35 → 2.2.128

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -27,7 +27,9 @@ import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
-import { TaskType, SlideAnimWrapper, TaskManager, AnimationManager } from "./TaskManager.ts";
+import { TaskType, SlideAnimWrapper, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
+import { getDirectionByRect, RectCache } from "./Slide.ts";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 
 const TAG = "MetroWidget";
 
@@ -109,7 +111,7 @@ export const setup = (
   };
 
   let innerKeepTraceRange = 0;
-  if (typeof props.keepTraceRange > 0) {
+  if (typeof props.keepTraceRange == "number" && props.keepTraceRange > 0) {
     innerKeepTraceRange = props.keepTraceRange;
   } else {
     if (props.touchFlag > 0) {
@@ -173,7 +175,6 @@ export const setup = (
   let preEdgeRect = null;
   let isFocus = false;
   let vertical = props.direction == VERTICAL;
-  let preAnchorItemIndex = -1;
   let templateItemAdder = null;
   let permanentItemList = [];
   let mounted = false;
@@ -182,7 +183,6 @@ export const setup = (
   let childSlideEventLock = false;
   let onKeyDownLock = false;
   let visibleInfo = new VisibleInfo();
-  let preSlideDirection = 0;
   let alreadyCallItemFocus = false;
   let innerSlideSetting = props.slideSetting
   const currentFocusIndex = ref(0);
@@ -196,125 +196,181 @@ export const setup = (
       && item.templateInfo[pos_key] + item.templateInfo[size_key] - 1 < visibleInfo.end;
   }
 
-  let templateCacheFrameCount = -1;
-  const onMacroTaskEnd = (taskList) => {
-    let resizeList = [];
+  //tools
+  const lastOfArray = (array) => {
+    if (array instanceof Array && array.length > 0) {
+      return array[array.length - 1]
+    }
+    return null;
+  }
+
+  const onAddTask = (allTask) => {
     let resizeTaskMap = {};
-    let slideTask = null;
     //统一处理itemResize和slide动画
     let minIndex = Infinity;
-    let slideInfo = null;
     let mergeTmp = false;
     let anchorInfo = null;
-    let duration = 200;
-    let easing = null;
 
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
-    let doAnim = false;
 
-    let existOnFocusChange = false;
     let targetVisibleStart = visibleInfo.start;
+    let slideDoAnim = false;
 
-    //先遍历寻找slide task, 确认目标位置. 有多个slide task时取最后一个
-    taskList.forEach(i => {
-      if (i.type == TaskType.SLIDE) {
-        slideTask = i;
-        mergeTmp = mergeTmp || i.params?.updateParam?.mergeTmp;
-        if (!isNaN(i.params?.target)) {
-          targetVisibleStart = -i.params.target;
-        }
-      }
-    });
+    mRectCache.cacheManually();
 
-    for (let task of taskList) {
-      if (task.type == TaskType.RESIZE_ITEM) {
-        mergeTmp = mergeTmp || task.params?.updateParam?.mergeTmp;
+    /**
+     * 处理resize
+     */
+    let resizeAnimInfo = {
+      doAnim: false,
+      duration: 200,
+      easing: "",
+    }
+    let resizeList = allTask.resize.concat();
+    if (resizeList.length > 0) {
+      //resize
+      resizeList.forEach(task => {
         resizeTaskMap[task.params.index] = task;
-        resizeList.push(task);
         const { index, animInfo } = task.params;
-        doAnim = doAnim || !!animInfo;
+        if (animInfo) {
+          resizeAnimInfo.doAnim = true;
+          resizeAnimInfo.duration = animInfo.duration ?? resizeAnimInfo.duration;
+          resizeAnimInfo.easing = animInfo.duration ?? "";
+        }
         minIndex = Math.min(minIndex, index);
 
-        duration = task.params.animInfo?.duration ?? duration;
-        easing = task.params.animInfo?.easing ?? easing;
+        metroTemplate.updateItemSize(task.params.index, {
+          width: task.params.width,
+          height: task.params.height,
+        })
+      });
 
-        if (index == id2Index(focusId) && typeof animInfo?.anchor != "undefined") {
-          //记录锚点信息
-          const item = getItemByIndex(index);
-          anchorInfo = {
-            anchorPosition: item.templateInfo[pos_key] + item.templateInfo[size_key] * animInfo.anchor - 1 - targetVisibleStart,
-            anchor: animInfo.anchor,
+      //使用上一帧的状态计算anchorPosition
+      if (resizeTaskMap[id2Index(focusId)]) {
+        const task = resizeTaskMap[id2Index(focusId)];
+        const animInfo = task.params.animInfo;
+        if (typeof animInfo?.anchor == "number") {
+          const preRect = getItemById(focusId)?.templateInfo?.layoutCache.getPreRect();
+          if (preRect) {
+            anchorInfo = {
+              anchorPosition: preRect[pos_key] + preRect[size_key] * animInfo.anchor - 1 - visibleInfo.start,
+              anchor: animInfo.anchor,
+            }
           }
         }
-      } else if (task.type == TaskType.ON_FOCUS_CHANGE) {
-        existOnFocusChange = true;
       }
     }
 
-    if (slideTask) {
-      slideInfo = {
-        target: slideTask.params.target,
-        animObj: slideTask.params.animObj,
+    /**
+     * 获取slide的targetRect
+     * 多个slide task取最后一个
+     */
+
+    /* 两种改变方式: 直接指定Position; 通过targetRect计算 */
+    let targetRect = null;
+    let direction = undefined;
+
+    let validSlideTask = false;
+    if (allTask.slide.length > 0) {
+      validSlideTask = true;
+      //有滚动时, 取消延时加载
+      tryCancelDelayLoad();
+      let slideTask = lastOfArray(allTask.slide);
+      slideDoAnim = slideTask.params.doAnim;
+      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) {
+            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;
+        } break;
+        default:
+          break;
       }
-    }
 
-    let existItemResize = false;
-    if (resizeList.length > 0) {
-      existItemResize = true;
-      //TODO 应该是尺寸变化后的可视item需要记录位置, 但暂时先记录20个
-      if (templateCacheFrameCount != Forge.sFrameCount.count) {
-        metroTemplate.cacheLayout(minIndex, minIndex + 20);
-        templateCacheFrameCount = Forge.sFrameCount.count;
-      }
-      //resize
-      resizeList.forEach(task => {
-        metroTemplate.updateItemSize(task.params.index, {
-          width: task.params.width,
-          height: task.params.height,
-        })
-      });
-      //保持anchor
+      mergeTmp = mergeTmp || slideTask.params?.updateParam?.mergeTmp;
+    }
+    if (!validSlideTask && resizeList.length > 0) {
+      //没有slide任务时, 采用resize的slide位置计算
       if (anchorInfo) {
+        //保持anchor
         const focusItem = getItemById(focusId);
         const start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
-        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo);
+        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index);
       } else {
-        targetVisibleStart = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
+        targetRect = getItemById(focusId).templateInfo;
       }
-
-      if (visibleInfo.start != targetVisibleStart) {
-        //只有resize引起的slide动画时, 动画时长使用resize设置, 否者使用slideSetting设置
-        slideInfo = {
-          target: -targetVisibleStart,
-        };
-        if (doAnim) {
-          slideInfo.animObj = {
-            easing: "",
-            onStart: null,
-            speed: null,
-            duration,
-          }
-        } else {
-          //resize无动画时正常slide
-          if (slideTask) {
-            slideInfo.animObj = slideTask.params?.animObj
-          } else {
-            //默认滚动
-            slideInfo.animObj = {
-              //resize无动画时正常slide
-              easing: "",
-              onStart: null,
-              onEnd: null,
-              speed: innerSlideSetting.Speed,
-              duration: innerSlideSetting.Duration,
-            }
-          }
+      slideDoAnim = resizeAnimInfo.doAnim;
+    }
+
+    if (targetRect) {
+      const v = visibleInfo.copy();
+      let preInfo = null;
+      if (resizeList.length > 0) {
+        //存在resize时, 需要调整targetRect
+        preInfo = mRectCache.getPreRect();
+        if (preInfo) {
+          v.start = targetRect.left - preInfo.left + v.start;
+          preInfo.left += (v.start - visibleInfo.start);
+        }
+      }
+      targetVisibleStart = _calculateVisibleStart(targetRect, direction, targetRect, v, preInfo);
+    } else {
+      //resize通过anchor直接设置了visibleStart
+      if (resizeList.length > 0) {
+        let tRect = getItemById(focusId)?.templateInfo;
+        if (tRect) {
+          mRectCache.cache({
+            left: tRect.left,
+            top: tRect.top,
+            width: tRect.width,
+            height: tRect.height,
+            frameCount: Forge.sFrameCount.count,
+          })
         }
       }
     }
 
+    let needSlide = false;
     if (targetVisibleStart != visibleInfo.start) {
+      needSlide = true;
       taskManager.run(() => {
         const preVisibleStart = visibleInfo.start;
         visibleInfo.start = targetVisibleStart;
@@ -323,6 +379,7 @@ export const setup = (
         }
       });
     }
+
     //updatePage
     let updateHandler
     taskManager.run(() => {
@@ -342,39 +399,41 @@ export const setup = (
     // resize item 动画
     if (resizeList.length > 0) {
       updateHandler.applyTmp();
-      if (doAnim) {
+      if (resizeAnimInfo.doAnim) {
         const visibleIndexList = Array.from(pageUpdater.getTmpRange());
         //创建item slide anim
         for (let index of visibleIndexList) {
           const renderItem = getItemByIndex(index);
           const { left, top } = renderItem.templateInfo;
           if (index >= minIndex) {
-            const layoutCache = renderItem.templateInfo.layoutCache;
-            const doItemSlide = (div) => {
-              taskManager.run(() => {
-                const cancel = animationManager.startSlideAnim(
-                  div,
-                  [layoutCache.left - left, layoutCache.top - top],
-                  [0, 0],
-                  resizeTaskMap[index] ?
-                    resizeTaskMap[index].params.animInfo
-                    : { duration: duration }
-                )
-                return () => {
-                  cancel()
-                }
-              });
-            }
+            const layoutCache = renderItem.templateInfo.layoutCache.getPreRect();
+            if (layoutCache) {
+              const doItemSlide = (div) => {
+                taskManager.run(() => {
+                  const cancel = animationManager.startSlideAnim(
+                    div,
+                    [layoutCache.left - left, layoutCache.top - top],
+                    [0, 0],
+                    resizeTaskMap[index] ?
+                      resizeTaskMap[index].params.animInfo
+                      : { duration: resizeAnimInfo.duration }
+                  )
+                  return () => {
+                    cancel()
+                  }
+                });
+              }
 
-            if (renderItem.mounted.value) {
-              doItemSlide(renderItem.rootDiv);
-            } else {
-              taskManager.run(() => {
-                const unregister = renderItem.addDivMountedListener((div) => {
-                  doItemSlide(div);
+              if (renderItem.mounted.value) {
+                doItemSlide(renderItem.rootDiv);
+              } else {
+                taskManager.run(() => {
+                  const unregister = renderItem.addDivMountedListener((div) => {
+                    doItemSlide(div);
+                  });
+                  return unregister;
                 });
-                return unregister;
-              });
+              }
             }
           }
         }
@@ -382,13 +441,22 @@ export const setup = (
     }
 
     //处理滚动动画
-    let viewSlid = false;
-    if (slideInfo) {
-      viewSlid = executeSlide(slideInfo, updateHandler);
+    if (needSlide) {
+      let animInfo = undefined;
+      if (slideDoAnim) {
+        animInfo = {
+          easing: null,//resizeAnimInfo.doAnim ? resizeAnimInfo.easing : '' /* innerSlideSetting.Easing */,
+          duration: resizeAnimInfo.doAnim ? resizeAnimInfo.duration : innerSlideSetting.Duration,
+          speed: innerSlideSetting.Speed,
+          onStart: null,
+          onEnd: null,
+        }
+      }
+      executeSlide(visibleInfo.start, animInfo, updateHandler)
     }
 
     //回调
-    if (existItemResize && props.onAllItemResizeDone) {
+    if (resizeList.length > 0 && props.onAllItemResizeDone) {
       taskManager.run(() => {
         const handler = setTimeout(() => {
           props.onAllItemResizeDone();
@@ -398,7 +466,7 @@ export const setup = (
         }
       })
     }
-    if ((viewSlid || existOnFocusChange) && props.onFocusRectChange) {
+    if ((needSlide || allTask.focus.length > 0) && props.onFocusRectChange) {
       taskManager.run(() => {
         const handler = setTimeout(() => {
           props.onFocusRectChange();
@@ -409,22 +477,21 @@ export const setup = (
       })
     }
   }
-  const taskManager = new TaskManager(onMacroTaskEnd);
+  const taskManager = new TaskManager(onAddTask);
   const animationManager = new AnimationManager();
 
-  const executeSlide = (slideInfo, updateHandler) => {
+  const executeSlide = (target, animObj, updateHandler) => {
     let preLeft = slideDivLeft.value;
     let preTop = slideDivTop.value;
     taskManager.run(() => {
-      slideDivLeft.value = vertical ? 0 : -visibleInfo.start;
-      slideDivTop.value = vertical ? -visibleInfo.start : 0;
+      slideDivLeft.value = vertical ? 0 : -target;
+      slideDivTop.value = vertical ? -target : 0;
       return () => {
         slideDivLeft.value = preLeft;
         slideDivTop.value = preTop;
       }
     });
-    let viewSlid = preLeft != slideDivLeft.value || preTop != slideDivTop.value;
-    if (slideInfo.animObj) {
+    if (animObj) {
       updateHandler.applyTmp();
       taskManager.run(() => {
         const from = vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0];
@@ -433,7 +500,7 @@ export const setup = (
           from,
           [0, 0],
           {
-            ...slideInfo.animObj,
+            ...animObj,
             onEnd: () => {
               updateHandler.apply()
             }
@@ -454,26 +521,27 @@ export const setup = (
         clearTimeout(handler);
       }
     })
-    return viewSlid
   }
 
   const updateItemSize = (index, newSize, animInfo) => {
-    taskManager.addTask(TaskType.RESIZE_ITEM,
-      {
-        index,
-        width: newSize.width,
-        height: newSize.height,
-        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,
+          },
+        });
+    }
   }
 
-  const _slideTo = (target, animObj, updateParam = { mergeTmp: false }) => {
-    if (slideLock || target == visibleInfo.start) {
-      return
-    };
-    taskManager.addTask(TaskType.SLIDE, { target: -target, animObj, updateParam });
-  };
-
   let callFocusAfterUpdate = false;
 
   //methods
@@ -689,27 +757,6 @@ export const setup = (
     enterFocusRect = rect;
   };
 
-  const slideTo = (position, doAnim) => {
-    //有外部触发的滚动时, 取消load
-    tryCancelDelayLoad();
-    templateItemAdder.tryAddItemByPosition(position);
-    if (
-      typeof position !== "undefined" &&
-      position != null
-    ) {
-      let animObj = null;
-      if (doAnim) {
-        animObj = {
-          easing: innerSlideSetting.Easing,
-          onStart: null,
-          speed: innerSlideSetting.Speed,
-          duration: innerSlideSetting.Duration,
-        };
-      }
-      _slideTo(position, animObj);
-    }
-  };
-
   const setZIndex = (index, normalZIndex, focusZIndex) => {
     const targetItem = getItemByIndex(index);
     if (targetItem) {
@@ -722,45 +769,63 @@ export const setup = (
     }
   }
 
-  const slideToItem = (index, doAnim) => {
-    templateItemAdder.tryAddItemByIndex(index);
-    const targetItem = getItemByIndex(index);
-    if (targetItem) {
-      const direction = index - preAnchorItemIndex >= 0 ? 1 : -1;
-      const visible_start = _calculateVisibleStart(targetItem.templateInfo, direction);
-      slideTo(visible_start, doAnim);
+  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) => {
+    if (typeof position == "number") {
+      slideToInner(position, doAnim);
     }
   };
 
+  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined) => {
+    taskManager.addTask(
+      TaskType.SLIDE,
+      {
+        index,
+        doAnim,
+        direction,
+        preItem,
+      },
+      SlideTaskType.SLIDE_BY_ITEM);
+  };
+  const slideToItem = (index, doAnim) => {
+    slideToItemInner(index, doAnim)
+  }
+
   const slideToDiv = (div, doAnim) => {
-    //有外部触发的滚动时, 取消load
-    tryCancelDelayLoad();
+    slideToDivInner(div, doAnim);
+  }
+  const slideToDivInner = (div, doAnim, direction = undefined) => {
     if (div) {
-      const item_layout = div.jsvGetRelativePosition(toRaw(locateDiv.value));
-      const direction = 1;
-
-      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),
+      taskManager.addTask(
+        TaskType.SLIDE,
+        {
+          div,
+          doAnim,
+          direction,
         },
-      };
-
-      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction);
-      if (cur_slide != visibleInfo.start) {
-        _slideTo(cur_slide, doAnim ? {
-          easing: "",
-          onStart: null,
-          speed: innerSlideSetting.Speed,
-          duration: innerSlideSetting.Duration,
-          onEnd: null,
-        } : null);
-      }
+        SlideTaskType.SLIDE_BY_DIV);
+    }
+  }
+  const slideToRect = (rect, doAnim, direction = undefined) => {
+    if (rect
+      && typeof rect.left == 'number'
+      && typeof rect.top == 'number'
+      && typeof rect.width == 'number'
+      && typeof rect.height == 'number') {
+      taskManager.addTask(
+        TaskType.SLIDE,
+        {
+          rect,
+          doAnim,
+          direction,
+        },
+        SlideTaskType.SLIDE_BY_RECT);
     }
   }
 
@@ -844,7 +909,12 @@ export const setup = (
     );
     updater.apply();
     onItemFocus(getItemById(focusId), null);
-    slideToItem(id2Index(focusId), false);
+    let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+    if (targetRect) {
+      slideToRect(targetRect, false);
+    } else {
+      slideToItem(id2Index(focusId), false);
+    }
     //template和slideDivStyle均确定后再次重设box condition
     updateTouchBoxCondition();
   };
@@ -1323,16 +1393,11 @@ export const setup = (
         },
       };
 
-      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction);
+      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction, fakeItem.templateInfo, visibleInfo);
       if (cur_slide != visibleInfo.start) {
-        _slideTo(
+        slideToInner(
           cur_slide,
-          {
-            easing: "",
-            onStart: null,
-            speed: innerSlideSetting.Speed,
-            duration: innerSlideSetting.Duration,
-          },
+          true,
           {
             mergeTmp: true
           });
@@ -1344,7 +1409,7 @@ export const setup = (
 
   const _changeFocusId = (id, cache_pre = true) => {
     preFocusId = cache_pre ? focusId : -1;
-    focusId = id;
+    focusId = id >= 0 && id < metroTemplate.size ? id : 0;
     currentFocusIndex.value = id2Index(id);
     taskManager.addTask(TaskType.ON_FOCUS_CHANGE);
   }
@@ -1431,22 +1496,12 @@ export const setup = (
       onItemBlur(preFocusItem);
       onItemFocus(next_focus_item, preEdgeRect);
 
-
       if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-        let cur_visible_start = _calculateVisibleStart(
-          next_focus_item.templateInfo,
+        slideToItemInner(
+          next_focus_item.index,
+          true,
           vertical ? vertical_direction : horizontal_direction,
-          preFocusItem.templateInfo,
-        );
-        if (visibleInfo.start !== cur_visible_start) {
-          let animObj = {
-            easing: "",
-            onStart: null,
-            speed: innerSlideSetting.Speed,
-            duration: innerSlideSetting.Duration,
-          };
-          _slideTo(cur_visible_start, animObj, { mergeTmp: false });
-        }
+          preFocusItem);
       } else {
         const updater = pageUpdater.update(
           metroTemplate,
@@ -1505,19 +1560,20 @@ export const setup = (
     }
   };
 
-  const normalizeVisibleStart = (origin, targetItem = null) => {
+  const normalizeVisibleStart = (origin, targetRect = undefined, index = undefined) => {
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let visibleStart = origin;
+
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
       if (visibleInfo.start >= 0) {
         let boundary = 0;
         //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
         const headTemplateInfo = getItemByIndex(0).templateInfo;
         if (
-          targetItem
-          && (!headTemplateInfo.focusable || targetItem.index == headTemplateInfo.index)
-          && targetItem[pos_key] + targetItem[size_key] <=
+          targetRect
+          && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
+          && targetRect[pos_key] + targetRect[size_key] <=
           visibleInfo.range
         ) {
           boundary = headTemplateInfo[size_key];
@@ -1536,9 +1592,9 @@ export const setup = (
       if (visibleInfo.end <= lastEnd) {
         let boundary = lastVisibleStart;
         if (
-          targetItem
-          && (!lastTemplateInfo.focusable || targetItem.index == lastTemplateInfo.index)
-          && targetItem[pos_key] - lastVisibleStart >= 0
+          targetRect
+          && (!lastTemplateInfo.focusable || index == lastTemplateInfo.index)
+          && targetRect[pos_key] - lastVisibleStart >= 0
         ) {
           boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
         }
@@ -1551,18 +1607,31 @@ export const setup = (
     return visibleStart;
   }
 
-  let preTemplateInfo = null;
-  const _calculateVisibleStart = (targetTemplateInfo, direction, preInfo = null) => {
-    if (!targetTemplateInfo) {
+  const mRectCache = new RectCache();
+  const _calculateVisibleStart = (targetRect, _direction, templateInfo, visibleInfo, preInfo = null) => {
+    if (!targetRect) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
     }
+    const curRect = {
+      left: targetRect.left,
+      top: targetRect.top,
+      width: targetRect.width,
+      height: targetRect.height,
+      frameCount: Forge.sFrameCount.count,
+    }
+    mRectCache.cache(curRect);
+    let preRect = mRectCache.getPreRect();
     if (preInfo) {
-      preTemplateInfo = preInfo;
+      preRect = preInfo;
+    }
+    let direction = _direction;
+    if (typeof direction != "number") {
+      //通过preRect确定direction
+      let d = getDirectionByRect(curRect, preRect);
+      direction = vertical ? d.vertical : d.horizontal;
     }
 
-    preSlideDirection = direction;
-    preAnchorItemIndex = targetTemplateInfo.index;
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let center_key = vertical ? "centerYPos" : "centerXPos";
@@ -1577,7 +1646,7 @@ export const setup = (
 
         //首页不滚动
         if (innerSlideSetting.FixFirstPage) {
-          if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1585,19 +1654,19 @@ export const setup = (
 
         if (needCalculate) {
           new_visible_start = Math.ceil(
-            targetTemplateInfo[center_key] -
+            targetRect[pos_key] + targetRect[size_key] / 2 -
             visibleInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
       case SlideSetting.Type.WHOLE_PAGE:
-        if (typeof targetTemplateInfo.pageHeadIndex == "undefined") {
+        if (!templateInfo || typeof templateInfo.pageHeadIndex == "undefined") {
           //TODO 子控制滚动时whole page滚动
           console.error(
             "child controlled whole page slide type is not supported."
           );
         } else {
-          new_visible_start = getItemByIndex(targetTemplateInfo.pageHeadIndex)
+          new_visible_start = getItemByIndex(templateInfo.pageHeadIndex)
             .templateInfo[pos_key];
         }
 
@@ -1605,7 +1674,7 @@ export const setup = (
       case SlideSetting.Type.SEAMLESS:
         //首页不滚动
         if (innerSlideSetting.FixFirstPage) {
-          if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1618,68 +1687,72 @@ export const setup = (
            * end-1.0: 焦点往左时不处理, 往右的时候更新position以保持焦点的end位置一致
            * 重合区域: 保持焦点的中心位置一致
            */
-          const rect0Start = visibleInfo.start;
-          const rect0End = visibleInfo.start + visibleInfo.range * innerSlideSetting.StartPercent;
-          const rect1Start = visibleInfo.start + visibleInfo.range * innerSlideSetting.EndPercent;
-          const rect1End = visibleInfo.end;
-
-          const itemStart = targetTemplateInfo[pos_key];
-          const itemEnd = targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1;
-
-          let targetStart;
-          let targetEnd;
-          if (preTemplateInfo != null) {
-            targetStart = preTemplateInfo[pos_key];
-            targetEnd = preTemplateInfo[pos_key] + preTemplateInfo[size_key] - 1;
-          } else {
-            targetStart = rect0End;
-            targetEnd = rect1Start;
-          }
-
-          let rect0Result = undefined;
-          let rect1Result = undefined;
-          if (itemStart < rect0End) {
-            if (targetStart < rect0Start) {
-              rect0Result = itemStart;
-            } else {
-              //inRect0, 只处理往左/往上
-              if (direction <= 0) {
-                let pre;
-                if (targetStart < rect0End) {
-                  pre = targetStart;
-                } else {
-                  pre = rect0End;
+          const itemStart = targetRect[pos_key];
+          const itemEnd = targetRect[pos_key] + targetRect[size_key] - 1;
+          const itemMainSize = targetRect[size_key];
+
+          if (preRect) {
+            const rect0Start = visibleInfo.start;
+            const rect0End = visibleInfo.start + visibleInfo.range * innerSlideSetting.StartPercent;
+            const rect0Range = rect0End - rect0Start + 1
+            const rect1Start = visibleInfo.start + visibleInfo.range * innerSlideSetting.EndPercent;
+            const rect1End = visibleInfo.start + visibleInfo.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 rect0Result = undefined;
+            let rect1Result = undefined;
+
+            //item的head对齐rect0的end
+            if (itemStart < rect0End) {
+              if (target0 < rect0Start) {
+                //preRect位置错误或者item的尺寸大于区域范围(保证item完整显示)
+                // rect0Result = itemStart;
+              } else {
+                if (direction <= 0) {
+                  //inRect0, 只处理往左/往上
+                  rect0Result = visibleInfo.start + (itemStart - target0)
                 }
-                rect0Result = visibleInfo.start + (itemStart - pre);
               }
             }
-          }
-          if (itemEnd > rect1Start) {
-            if (targetEnd > rect1End) {
-              rect1Result = itemEnd - visibleInfo.range;
-            } else {
-              //inRect1, 只处理往右/往下
-              let pre;
-              if (targetEnd > rect1Start) {
-                pre = targetEnd;
+
+            //item的头部对齐rect1的start
+            if (itemEnd > rect1Start) {
+              if (target1 > rect1End) {
+                //preRect位置错误或者item的尺寸大于区域范围(保证item完整显示)
+                // rect1Result = itemEnd - visibleInfo.range;
               } else {
-                pre = rect1Start;
-              }
-              if (direction >= 0) {
-                rect1Result = visibleInfo.start + (itemEnd - pre);
+                if (direction >= 0) {
+                  //inRect1, 只处理往右/往下
+                  rect1Result = visibleInfo.start + (itemEnd - target1);
+                }
               }
             }
-          } else {
-            //不移动
+
+            if (typeof rect0Result !== "undefined" && typeof rect1Result !== "undefined") {
+              //重叠区域
+              new_visible_start = rect0Result;
+            } else if (typeof rect0Result !== "undefined") {
+              new_visible_start = rect0Result;
+            } else if (typeof rect1Result !== "undefined") {
+              new_visible_start = rect1Result;
+            }
           }
 
-          if (typeof rect0Result !== "undefined" && typeof rect1Result !== "undefined") {
-            //重叠区域
-            new_visible_start = rect0Result;
-          } else if (typeof rect0Result !== "undefined") {
-            new_visible_start = rect0Result;
-          } else if (typeof rect1Result !== "undefined") {
-            new_visible_start = rect1Result;
+          //保证item处于safe area范围
+          const headSafeArea = innerSlideSetting.HeadSafeArea * visibleInfo.range;
+          const tailSafeArea = innerSlideSetting.TailSafeArea * visibleInfo.range;
+          if (itemMainSize > visibleInfo.range - headSafeArea - tailSafeArea) {
+            // 大item
+            new_visible_start = Math.round(itemStart - (visibleInfo.range - itemMainSize) / 2)
+          } else {
+            if (itemStart < new_visible_start + headSafeArea) {
+              new_visible_start = itemStart - headSafeArea;
+            } else if (itemEnd > new_visible_start + visibleInfo.range - 1 - tailSafeArea) {
+              new_visible_start = itemEnd - visibleInfo.range + tailSafeArea;
+            }
           }
         }
         break;
@@ -1690,8 +1763,7 @@ export const setup = (
         );
     }
 
-    preTemplateInfo = targetTemplateInfo;
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetTemplateInfo);
+    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index);
     return Math.round(new_visible_start);
   };
 
@@ -1727,6 +1799,7 @@ export const setup = (
       console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
       return;
     }
+
     let focus_id =
       typeof enterFocusId !== "undefined" &&
         enterFocusId >= 0 &&
@@ -1752,18 +1825,30 @@ export const setup = (
     onItemBlur(getItemById(preFocusId));
     props.onBlur?.();
     isFocus = false;
+    mRectCache.clean()
   };
 
   const _updatePage = (rangeSet) => {
+    let cur = id2Index(focusId);
+    if (cur >= 0) {
+      rangeSet.add(cur)
+    }
     const tmpArray = Array.from(rangeSet);
-    renderData.value = tmpArray.map((item) => {
+    let newArray = tmpArray.map((item) => {
       return getItemByIndex(item);
     });
+    const newItemList = newArray.filter((i) => { return !renderData.value?.includes(i) });
+    renderData.value = newArray;
     if (props.enableItemRenderBreak) {
       itemRender.value = false;
-      nextTick(() => {
+      const f = () => {
+        // 关闭强制TriggerManualBlock，改为vue内部通过dom的任务数来确定是否执行打断
+        // if (newItemList.length > 12 && props.enableItemRenderBreak) {
+        //   window.JsView?.triggerManualBlocker?.();
+        // }
         itemRender.value = true;
-      });
+      };
+      nextTick(f);
     }
   };
 
@@ -1831,7 +1916,6 @@ export const setup = (
   }
 
   const mergeTouchSlideToSlideDiv = (touchCount) => {
-    // console.log("testtest", props.name, `touchToDiv div: ${slideDivTop.value}, visibleStart:${visibleInfo.start} swapCount: ${Forge.sFrameCount.count}`)
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
@@ -1919,7 +2003,7 @@ export const setup = (
       anchorPos += anchorSpacing;
     }
     const reachConditionList = anchorPosList.map(pos => {
-      actorController
+      return actorController
         .condition(reachAnchorGroup)
         .reachPosition(pos, undefined)
         .then([(data) => { updateRenderItems(true, true) }])
@@ -2061,7 +2145,11 @@ export const setup = (
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
-    divView.DragEnables?.(4 | 0x08 | 0x10); // 只激活drag
+    divView.DragEnables?.(
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+      ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT |
+      ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+      ForgeConst.DragFlags.TOUCH_RECV_LAST_END);
     // debugAnimId = actorController.debugGetAnimId();
     // debugViewId = divView.ViewId;
     // console.log("testtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
@@ -2139,7 +2227,7 @@ export const setup = (
   }
 
   let init_focus_id = 0;
-  let cur_visible_start = 0;
+  let initVisibleStart = 0;
 
   if (typeof props.initFocusId == "number") {
     templateItemAdder.tryAddItemById(props.initFocusId);
@@ -2147,18 +2235,19 @@ export const setup = (
     if (item) {
       init_focus_id = props.initFocusId;
       if (item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-        cur_visible_start = _calculateVisibleStart(item.templateInfo, 0);
+        initVisibleStart = _calculateVisibleStart(item.templateInfo, 0, item.templateInfo, visibleInfo);
       }
     }
   }
   focusId = init_focus_id;
-  visibleInfo.start = cur_visible_start;
 
-  //保证创建速度, 你描画一屏
+  let initVisibleInfo = visibleInfo.copy();
+  initVisibleInfo.start = initVisibleStart;
+  //保证创建速度, 先描画一屏
   const initUpdater = pageUpdater.update(
     metroTemplate,
-    visibleInfo.startWithPadding,
-    visibleInfo.endWithPadding,
+    initVisibleInfo.startWithPadding,
+    initVisibleInfo.endWithPadding,
     0,
     false,
     permanentItemList
@@ -2168,8 +2257,8 @@ export const setup = (
   const delayLoadHandler = setTimeout(() => {
     const updateHandler = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+      initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       focusId,
       false,
       permanentItemList
@@ -2183,8 +2272,8 @@ export const setup = (
   onMounted(() => {
     _changeFocusId(focusId, false);
     mounted = true;
-    if (visibleInfo.start) {
-      _slideTo(visibleInfo.start, null);
+    if (initVisibleStart) {
+      slideToInner(initVisibleStart, false);
     }
     if (isFocus && !alreadyCallItemFocus) {
       onItemFocus(getItemById(focusId), preEdgeRect);