@shijiu/jsview-vue 2.2.35 → 2.2.201

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -27,10 +27,14 @@ 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";
 
+let metroWidgetTokenGen = 1;
+
 const _getMetroTemplate = function (
   widgetRectInfo,
   direction,
@@ -109,7 +113,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) {
@@ -125,25 +129,38 @@ export const setup = (
   const mode = {
     _mode: FOCUS_MODE,
     _touchState: TouchState.IDLE,
+    _touchCount: 0, // 触控流流程ID，解决fling等事件晚于新的touchDown时引起的混乱问题
 
     _duringTouch: false,
     _duringFling: false,
-    touchStart() {
+    touchStart(touchCount) {
       this._mode = TOUCH_MODE;
       modeForExport.value = TOUCH_MODE;
       this._touchState = TouchState.TAP;
+      this._touchCount = touchCount;
     },
-    touchEnd() {
-      this._touchState = TouchState.IDLE;
+    touchEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
     },
-    flingStart() {
-      this._touchState = TouchState.FLING;
+    flingStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.FLING;
+      }
     },
-    flingEnd() { },
-    dragStart() {
-      this._touchState = TouchState.DRAG;
+    flingEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
+    },
+    dragStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.DRAG;
+      }
+    },
+    dragEnd(touchCount) {
     },
-    dragEnd() { },
     keyDown() {
       this._mode = FOCUS_MODE;
       modeForExport.value = FOCUS_MODE;
@@ -173,7 +190,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,11 +198,14 @@ 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);
 
+  // 当sliderDiv变化时，渲染端在响应此变化前的gap记录，用于准确计算getVisibleStart
+  let freeMoveSlideGapTop = 0;
+  let freeMoveSlideGapLeft = 0;
+
   const DEFAULT_ANIMATION_DURATION = 200;
 
   const isItemVisible = (item) => {
@@ -196,125 +215,185 @@ 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) => {
+    if (!innerData || innerData.length <= 0) { return; }
     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);
+        let start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
+        let totalSize = metroTemplate.getBoundingBoxSize();
+        start = Math.min(Math.max(0, start), totalSize[size_key] - visibleInfo.range)
+        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index, visibleInfo);
       } 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) {
+          let totalSize = metroTemplate.getBoundingBoxSize();
+          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), totalSize[size_key] - v.range);
+          preInfo[pos_key] += (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 +402,7 @@ export const setup = (
         }
       });
     }
+
     //updatePage
     let updateHandler
     taskManager.run(() => {
@@ -342,39 +422,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 +464,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 +489,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 +500,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 +523,7 @@ export const setup = (
           from,
           [0, 0],
           {
-            ...slideInfo.animObj,
+            ...animObj,
             onEnd: () => {
               updateHandler.apply()
             }
@@ -454,26 +544,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
@@ -584,7 +675,7 @@ export const setup = (
   };
 
   const setFocusByUid = (uid, needSlide = true, doAnim = false, extraSetting) => {
-    if (!uid) { return; }
+    if (!uid || innerData.length <= 0) { return; }
     //添加item
     templateItemAdder.tryAddItemByUid(uid);
     const item = metroTemplate.getItemByUid(uid);
@@ -597,7 +688,7 @@ export const setup = (
   }
 
   const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
-    if (id == focusId) {
+    if (id == focusId || innerData.length <= 0) {
       return;
     }
     //有外部触发的滚动时, 取消load
@@ -689,27 +780,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,131 +792,200 @@ 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);
     }
   }
 
-  const refreshData = (force_update) => {
+  const DATA_ID_KEY = "jsvKey";
+  const refreshData = (forceUpdate) => {
     //由于data不支持reactive, 因此数据的更新只通过provideData
     if (!props.provideData) {
       console.error("refreshData: provideData is null.");
       return;
     }
-    let _force_update = force_update;
-    if (metroTemplate.size === 0) {
-      _force_update = true;
-    }
-    let new_list = toRaw(props.provideData());
-    if (focusId >= new_list.length) {
-      _changeFocusId(new_list.length - 1, false)
-    }
-    let new_index = 0;
-    if (!_force_update) {
-      for (new_index = 0; new_index < new_list.length; ++new_index) {
-        let already_add = false;
-        for (let j = 0; j < innerData.length; ++j) {
-          if (new_list[new_index] === innerData[j].customerData) {
-            already_add = true;
-            break;
+    try {
+      let newData = toRaw(props.provideData());
+      if (newData instanceof Array) {
+        let maxSameIndex = -1;
+        let layoutChange = false;
+        let onlyDataChangeList = [];
+        if (focusId >= newData.length) {
+          _changeFocusId(newData.length - 1, false)
+        }
+
+        if (!forceUpdate) {
+          for (let i = 0; i < dataList.length; ++i) {
+            let oldItem = dataList[i];
+            let newItem = newData[i];
+            if (newItem) {
+              if (newItem === oldItem
+                || (typeof newItem[DATA_ID_KEY] !== "undefined" && typeof oldItem[DATA_ID_KEY] !== "undefined" && newItem[DATA_ID_KEY] === oldItem[DATA_ID_KEY])) {
+                //相同的item
+                maxSameIndex = Math.max(maxSameIndex, i);
+              } else {
+                const newMeasureItem = props.measures(newItem);
+                const oldMeasureItem = props.measures(oldItem);
+                if (props.layoutType == "relative") {
+                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height;
+                } else {
+                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height || newMeasureItem.left !== oldMeasureItem.left || newMeasureItem.top !== oldMeasureItem.top;
+                }
+                if (layoutChange) {
+                  break;
+                } else {
+                  if (i < innerData.length) {
+                    onlyDataChangeList.push({
+                      templateInfo: innerData[i].templateInfo,
+                      measureObj: newMeasureItem,
+                      data: newItem,
+                      index: i,
+                    });
+                  }
+                }
+              }
+            } else {
+              if (i >= newData.length) {
+                //item减少需要布局改变
+                layoutChange = true;
+                break;
+              } else {
+                //数据中存在undefined item
+                throw new Error("undefined item in data list.", i, newData);
+              }
+            }
           }
         }
-        if (!already_add) {
-          break;
+
+        dataList = newData.concat();
+        if (forceUpdate || layoutChange) {
+          //需要更新布局
+          pageUpdateToken.value++;
+          //数据更改
+          permanentItemList = [];
+          metroTemplate = _getMetroTemplate(
+            widgetRectInfo,
+            props.direction,
+            props.supportHistoryPath,
+            props.layoutType,
+            templateMode
+          );
+          innerData = [];
+          templateItemAdder = new TemplateItemAdder(
+            metroTemplate,
+            dataList,
+            props.measures,
+            pageRange,
+            _onTemplateItemAdd,
+            props.name,
+            _onTemplateAddDone
+          );
+          if (props.onScroll) {
+            templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+          } else {
+            templateItemAdder.tryAddItemById(focusId);
+          }
+        } else {
+          if (maxSameIndex < newData.length) {
+            //追加数据
+            templateItemAdder.updateData(newData);
+            if (props.onScroll) {
+              templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+            } else {
+              templateItemAdder.tryAddItemById(focusId);
+            }
+          }
+
+          //仅用户数据变更
+          if (onlyDataChangeList.length > 0) {
+            for (let i of onlyDataChangeList) {
+              if (i.index < innerData.length) {
+                innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
+              } else {
+                //之后的数据未布局, 尚未添加到innerData中
+                break;
+              }
+            }
+          }
         }
+
+        const updater = pageUpdater.update(
+          metroTemplate,
+          visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+          visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+          focusId,
+          false,
+          permanentItemList
+        );
+        updater.apply();
+        onItemFocus(getItemById(focusId), null);
+        let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+        if (targetRect) {
+          slideToRect(targetRect, false);
+        } else {
+          slideToItem(id2Index(focusId), false);
+        }
+        //template和slideDivStyle均确定后再次重设box condition
+        updateTouchBoxCondition();
       }
+    } catch (e) {
+      console.log(TAG, "refresh error", e)
     }
-    let need_update_content = false;
-    if (!_force_update && new_index === metroTemplate.size) {
-      //原始数据都在
-      if (new_index !== new_list.length) {
-        //增加数据
-        need_update_content = true;
-        templateItemAdder.updateData(new_list);
-      } else {
-        //数据没变
-      }
-    } else {
-      pageUpdateToken.value++;
-      //数据更改
-      permanentItemList = [];
-      need_update_content = true;
-      metroTemplate = _getMetroTemplate(
-        widgetRectInfo,
-        props.direction,
-        props.supportHistoryPath,
-        props.layoutType,
-        templateMode
-      );
-      innerData = [];
-      dataList = new_list;
-      templateItemAdder = new TemplateItemAdder(
-        metroTemplate,
-        dataList,
-        props.measures,
-        pageRange,
-        _onTemplateItemAdd,
-        props.name,
-        _onTemplateAddDone
-      );
-    }
-    if (need_update_content) {
-      if (props.onScroll) {
-        templateItemAdder.tryAddItemByIndex(dataList.length - 1);
-      } else {
-        templateItemAdder.tryAddItemById(focusId);
-      }
-    }
-    const updater = pageUpdater.update(
-      metroTemplate,
-      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-      focusId,
-      false,
-      permanentItemList
-    );
-    updater.apply();
-    onItemFocus(getItemById(focusId), null);
-    slideToItem(id2Index(focusId), false);
-    //template和slideDivStyle均确定后再次重设box condition
-    updateTouchBoxCondition();
   };
 
   const getVisibleItems = () => {
@@ -863,6 +1002,7 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
+    if (innerData.length <= 0) { return; }
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
@@ -1200,7 +1340,7 @@ export const setup = (
     }
   }
 
-  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
+  const _getItemConfigFromMeasursObj = (measuresObj) => {
     let focusZIndex = -1,
       normalZIndex = -1;
     if (
@@ -1219,12 +1359,17 @@ export const setup = (
         normalZIndex = measuresObj["zIndex"];
       }
     }
-    let itemConfig = {
+    return {
       focusZIndex,
       normalZIndex,
       permanent: measuresObj.permanent ?? false,
       itemSlide: measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
+      showSkeleton: measuresObj.showSkeleton ?? true,
     };
+  }
+
+  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
+    let itemConfig = _getItemConfigFromMeasursObj(measuresObj);
 
     const renderStyle = reactive({
       left: templateItem.left,
@@ -1323,16 +1468,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 +1484,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 +1571,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,68 +1635,83 @@ export const setup = (
     }
   };
 
-  const normalizeVisibleStart = (origin, targetItem = null) => {
+  const normalizeVisibleStart = (origin, targetRect, index, _visibleInfo) => {
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let visibleStart = origin;
+    let vInfo = _visibleInfo;
+
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
-      if (visibleInfo.start >= 0) {
+      if (vInfo.start >= 0) {
         let boundary = 0;
         //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
         const headTemplateInfo = getItemByIndex(0).templateInfo;
         if (
-          targetItem
-          && (!headTemplateInfo.focusable || targetItem.index == headTemplateInfo.index)
-          && targetItem[pos_key] + targetItem[size_key] <=
-          visibleInfo.range
+          targetRect
+          && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
+          && targetRect[pos_key] + targetRect[size_key] <=
+          vInfo.range
         ) {
           boundary = headTemplateInfo[size_key];
         }
         visibleStart = visibleStart < boundary ? 0 : visibleStart;
       } else {
         // 以最后一个item的位置作为动态的保护边界
-        visibleStart = visibleStart < visibleInfo.start ? visibleInfo.start : visibleStart;
+        visibleStart = visibleStart < vInfo.start ? vInfo.start : visibleStart;
       }
     }
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
       let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).templateInfo;
       const lastEnd = lastTemplateInfo[pos_key] + lastTemplateInfo[size_key];
-      const lastVisibleStart = Math.max(lastEnd - visibleInfo.range, 0);
+      const lastVisibleStart = Math.max(lastEnd - vInfo.range, 0);
       //边界必须大于等于0, 同时若最后一个缩进时, 边界采用最后一个item的位置
-      if (visibleInfo.end <= lastEnd) {
+      if (vInfo.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;
+          boundary = lastTemplateInfo[pos_key] - vInfo.range;
         }
         visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
       } else {
         // 以最后一个item的位置作为动态的保护边界
-        visibleStart = visibleStart > visibleInfo.start ? visibleInfo.start : visibleStart;
+        visibleStart = visibleStart > vInfo.start ? vInfo.start : visibleStart;
       }
     }
     return visibleStart;
   }
 
-  let preTemplateInfo = null;
-  const _calculateVisibleStart = (targetTemplateInfo, direction, preInfo = null) => {
-    if (!targetTemplateInfo) {
+  const mRectCache = new RectCache();
+  const _calculateVisibleStart = (targetRect, _direction, templateInfo, vInfo, 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";
-    let new_visible_start = visibleInfo.start;
+    let new_visible_start = vInfo.start;
 
     let needCalculate = true;
 
@@ -1577,7 +1722,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 < vInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1585,19 +1730,19 @@ export const setup = (
 
         if (needCalculate) {
           new_visible_start = Math.ceil(
-            targetTemplateInfo[center_key] -
-            visibleInfo.range * innerSlideSetting.FixPercent
+            targetRect[pos_key] + targetRect[size_key] / 2 -
+            vInfo.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 +1750,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 < vInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1618,68 +1763,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 = vInfo.start;
+            const rect0End = vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
+            const rect0Range = rect0End - rect0Start + 1
+            const rect1Start = vInfo.start + vInfo.range * innerSlideSetting.EndPercent;
+            const rect1End = vInfo.start + vInfo.range - 1;
+            const rect1Range = rect1End - rect1Start + 1;
+
+            let target0 = Math.min(preRect[pos_key], rect0End);
+            let target1 = Math.max(preRect[pos_key] + preRect[size_key] - 1, rect1Start);
+
+            let 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 = vInfo.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 = vInfo.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 * vInfo.range;
+          const tailSafeArea = innerSlideSetting.TailSafeArea * vInfo.range;
+          if (itemMainSize > vInfo.range - headSafeArea - tailSafeArea) {
+            // 大item
+            new_visible_start = Math.round(itemStart - (vInfo.range - itemMainSize) / 2)
+          } else {
+            if (itemStart < new_visible_start + headSafeArea) {
+              new_visible_start = itemStart - headSafeArea;
+            } else if (itemEnd > new_visible_start + vInfo.range - 1 - tailSafeArea) {
+              new_visible_start = itemEnd - vInfo.range + tailSafeArea;
+            }
           }
         }
         break;
@@ -1690,8 +1839,7 @@ export const setup = (
         );
     }
 
-    preTemplateInfo = targetTemplateInfo;
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetTemplateInfo);
+    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index, vInfo);
     return Math.round(new_visible_start);
   };
 
@@ -1727,6 +1875,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 +1901,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);
     }
   };
 
@@ -1808,9 +1969,7 @@ export const setup = (
   let divPos = -1;
   let frameCount = -1;
   const getVisibleStart = (moveInfo) => {
-    if (frameCount != Forge.sFrameCount.count) {
-      divPos = vertical ? slideDivTop.value : slideDivLeft.value;
-    }
+    divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
     if (vertical) {
       return -(divPos + Math.round(moveInfo.yPos));
     } else {
@@ -1831,35 +1990,32 @@ export const setup = (
   }
 
   const mergeTouchSlideToSlideDiv = (touchCount) => {
-    // console.log("testtest", props.name, `touchToDiv div: ${slideDivTop.value}, visibleStart:${visibleInfo.start} swapCount: ${Forge.sFrameCount.count}`)
+    let originSlideDivTop = slideDivTop.value;
+    let originSlideDivLeft = slideDivLeft.value;
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
       slideDivLeft.value = -visibleInfo.start;
     }
+    let newSlideGapTop = originSlideDivTop - slideDivTop.value;
+    let newSlideGapLeft = originSlideDivLeft - slideDivLeft.value;
+    freeMoveSlideGapTop += newSlideGapTop;    // 累计slider变化的gap，等待同步完毕时消除gap
+    freeMoveSlideGapLeft += newSlideGapLeft;
 
     const walls = getTouchWall();
-    actorController.run([
-      actorController.state().removeConditionByGroup(wallConditionGroup),
-      actorController
-        .condition(wallConditionGroup, true)
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(wallConditionGroup),
+      cmds.condition(wallConditionGroup, true)
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
-        .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
-      actorController
-        .condition(touchCountGroup, false)
-        .touchCount(touchCount)
-        .then([
-          actorController
-            .action()
-            .teleportTo(0, 0)
-        ])
-    ]);
-    //下一帧删除touchCount
-    actorController.run([
-      actorController.condition().onNextTick().then([
-        actorController.state().removeConditionByGroup(touchCountGroup),
+        .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
+      cmds.state().setStartOffsetPos(newSlideGapLeft, newSlideGapTop), // 将div的位置调整回馈给FreeMove计量系统
+      cmds.condition().onNextTick(0).then([
+        SliderEditFuncReOrderWrap(() => {
+          freeMoveSlideGapTop -= newSlideGapTop;
+          freeMoveSlideGapLeft -= newSlideGapLeft;
+        }, true) // Slide调整回调要放在其他事件之前，调整slide的gap值
       ])
-    ])
+    ]);
   }
 
   const onTouchDown = (data, customData, nexusCustomData) => {
@@ -1870,27 +2026,32 @@ export const setup = (
       //模式切换, 更新boxPosition
       updateTouchBoxCondition();
     }
-    mode.touchStart();
-    mode.flingEnd();
+    mode.touchStart(touchCount);
     // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
     //  "onTouchDown", data, customData, nexusCustomData)
-    const t = 100;
+
+    // 运动方向锁定机制
+    // 当MetroWidget在某一方向拖动后，讲另一方向的移动进行锁定
+    const lockThreshhold = 10;
+    const unlockThreshold = 100;
     const offsetThreshold = {
-      left: vertical ? undefined : t,
-      right: vertical ? undefined : t,
-      top: vertical ? t : undefined,
-      bottom: vertical ? t : undefined,
+      left: vertical ? undefined : lockThreshhold,
+      right: vertical ? undefined : lockThreshhold,
+      top: vertical ? lockThreshhold : undefined,
+      bottom: vertical ? lockThreshhold : undefined,
     }
 
-    actorController.run([
-      actorController
+    let passDownTouchInfo = nexusCustomData;
+    actorController.run((cmds) => [
+      cmds
         .condition(undefined, false)
         .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
-        .then([actorController.state().touchLockSwitch(true, vertical ? 1 : 2, t)]),
-      actorController
+        .then([
+          cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)]),
+      cmds
         .condition(undefined, false)
         .startMove(true, true)
-        .then([onDragStart]),
+        .then([SliderEditFuncReOrderWrap((d) => { onDragStart(d, null, passDownTouchInfo) })]),
     ])
 
     //blur item
@@ -1918,28 +2079,30 @@ export const setup = (
       anchorPosList.push(-visibleInfo.start - visibleInfo.range - anchorPos + 1);
       anchorPos += anchorSpacing;
     }
-    const reachConditionList = anchorPosList.map(pos => {
-      actorController
-        .condition(reachAnchorGroup)
-        .reachPosition(pos, undefined)
-        .then([(data) => { updateRenderItems(true, true) }])
-    })
-    reachConditionList.unshift(
-      actorController.state().removeConditionByGroup(reachAnchorGroup),
-    )
-    actorController.run(reachConditionList);
+    actorController.run((cmds) => {
+      const reachConditionList = anchorPosList.map(pos => {
+        return cmds
+          .condition(reachAnchorGroup)
+          .reachPosition(pos, undefined)
+          .then([SliderEditFuncReOrderWrap((data) => { updateRenderItems(true, true) })])
+      })
+      reachConditionList.unshift(
+        cmds.state().removeConditionByGroup(reachAnchorGroup),
+      )
+      return reachConditionList
+    });
   }
 
-  const onTouchRelease = () => {
+  const onTouchRelease = (touchCount) => {
     if (mode.getTouchState() == TouchState.TAP) {
       //只点击, 没有移动或者fling
       updateRenderItems(false, false);
-      mode.touchEnd();
+      mode.touchEnd(touchCount);
     } else {
       if (touchRecorder.moved && !mode.duringFling()) {
         mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
         updateRenderItems(false, false);
-        mode.touchEnd()
+        mode.touchEnd(touchCount)
       }
     }
   }
@@ -1947,43 +2110,50 @@ export const setup = (
   const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
 
   const onDragStart = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData); // 注意，由startMove触发的onDragStart是没有touchCount的
     touchRecorder.move();
-    mode.dragStart()
+    mode.dragStart(touchCount)
     visibleInfo.start = getVisibleStart(data);
   }
 
   const onDragEnd = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
+    mode.dragEnd(touchCount);
     visibleInfo.start = getVisibleStart(data);
-    actorController.run([
-      actorController.state().removeConditionByGroup(reachAnchorGroup),
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(reachAnchorGroup),
     ]);
   }
 
   const onFlingStart = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.flingStart();
+    mode.flingStart(touchCount);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   }
 
   const onFlingProgress = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   }
 
   const onFlingEnd = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     //记录拖拽的距离
     if (mode.duringFling()) {
       let touchCount = getTouchCount(nexusCustomData);
       mergeTouchSlideToSlideDiv(touchCount);
       updateRenderItems(false, false);
-      mode.flingEnd();
-      mode.touchEnd();
+      mode.flingEnd(touchCount);
+      mode.touchEnd(touchCount);
     }
   }
 
   const onFlingDrop = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
   }
 
@@ -2008,6 +2178,7 @@ export const setup = (
         wall.left = wall.right;
       }
     }
+
     return wall;
   }
 
@@ -2029,12 +2200,12 @@ export const setup = (
       const walls = getTouchWall();
 
       //更新wall设置
-      actorController.run([
-        actorController.state().removeConditionByGroup(wallConditionGroup),
-        actorController
+      actorController.run((cmds) => [
+        cmds.state().removeConditionByGroup(wallConditionGroup),
+        cmds
           .condition(wallConditionGroup, true)
           .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
-          .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
+          .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       ]);
     }
   }
@@ -2054,6 +2225,21 @@ export const setup = (
     }
   };
 
+  const metroWidgetToken = metroWidgetTokenGen++;
+
+  let orderTouchSlideCallbacks;
+  const SliderEditFuncReOrderWrap = (callback, addHeader = false) => {
+    return (...args) => {
+      let pkg = { cb: callback, a: args }
+      if (addHeader) {
+        orderTouchSlideCallbacks.splice(0, 0, pkg);
+      } else {
+        orderTouchSlideCallbacks.push(pkg);
+      }
+    }
+  }
+
+
   //TODO debug
   // let debugAnimId = -1;
   // let debugViewId = -1
@@ -2061,50 +2247,68 @@ export const setup = (
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
-    divView.DragEnables?.(4 | 0x08 | 0x10); // 只激活drag
+
+    // 对触控回调进行顺序管理
+    orderTouchSlideCallbacks = new Array();
+    actorController.addCondCycleListener(
+      // starter
+      () => {
+        // TODO: condtion回调的开始处理时机，预留函数为了加打印追踪
+      },
+      // finish
+      () => {
+        // 按照排好的顺序，进行cb调用
+        for (let pkg of orderTouchSlideCallbacks) {
+          pkg.cb(...pkg.a);
+        }
+        // 执行结束后进行清理
+        orderTouchSlideCallbacks.length = 0;
+      }
+    )
+
+
     // debugAnimId = actorController.debugGetAnimId();
     // debugViewId = divView.ViewId;
     // console.log("testtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
     const walls = getTouchWall();
     //注册回调
-    actorController.run([
-      actorController
+    actorController.run((cmds) => [
+      cmds
         .condition(undefined, true)
         .onTouchDown()
-        .then([onTouchDown]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onTouchDown)]),
+      cmds
         .condition(undefined, true)
         .onDragStart()
-        .then([onDragStart]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onDragStart)]),
+      cmds
         .condition(undefined, true)
         .onDragEnd()
-        .then([onDragEnd]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onDragEnd)]),
+      cmds
         .condition(undefined, true)
         .onFlingStart()
-        .then([onFlingStart]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onFlingStart)]),
+      cmds
         .condition(undefined, true)
         .onFlingProgress()
-        .then([onFlingProgress]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onFlingProgress)]),
+      cmds
         .condition(undefined, true)
         .onFlingEnd()
-        .then([onFlingEnd]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onFlingEnd)]),
+      cmds
         .condition(undefined, true)
         .onFlingDrop()
-        .then([onFlingDrop]),
-      actorController
+        .then([SliderEditFuncReOrderWrap(onFlingDrop)]),
+      cmds
         .condition(undefined, true)
         .onTouchRelease()
-        .then([actorController.state().touchLockSwitch(false, vertical ? 1 : 2)]),
-
-      actorController
+        .then([cmds.state().touchLockSwitch(false, vertical ? 1 : 2)]),
+      cmds
         .condition(wallConditionGroup, true)
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
-        .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
+        .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
     ]);
   }
 
@@ -2139,7 +2343,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 +2351,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 +2373,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 +2388,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);
@@ -2203,6 +2408,7 @@ export const setup = (
   onUpdated(() => { });
 
   onBeforeUnmount(() => {
+    taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
   });