@shijiu/jsview-vue 2.1.482-test.0 → 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";
 
@@ -108,6 +110,19 @@ export const setup = (
     FLING: 3,
   };
 
+  let innerKeepTraceRange = 0;
+  if (typeof props.keepTraceRange == "number" && props.keepTraceRange > 0) {
+    innerKeepTraceRange = props.keepTraceRange;
+  } else {
+    if (props.touchFlag > 0) {
+      //触控默认3屏
+      innerKeepTraceRange = 3;
+    } else {
+      //按键模式默认0屏
+      innerKeepTraceRange = 0;
+    }
+  }
+
   const modeForExport = ref(FOCUS_MODE);
   const mode = {
     _mode: FOCUS_MODE,
@@ -160,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;
@@ -169,8 +183,8 @@ 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);
 
   const DEFAULT_ANIMATION_DURATION = 200;
@@ -182,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: props.slideSetting.Speed,
-              duration: props.slideSetting.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;
@@ -309,13 +379,14 @@ export const setup = (
         }
       });
     }
+
     //updatePage
     let updateHandler
     taskManager.run(() => {
       updateHandler = pageUpdater.update(
         metroTemplate,
-        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-        visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+        visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+        visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
         focusId,
         mergeTmp,
         permanentItemList
@@ -328,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;
-              });
+              }
             }
           }
         }
@@ -368,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();
@@ -384,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();
@@ -395,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];
@@ -419,7 +500,7 @@ export const setup = (
           from,
           [0, 0],
           {
-            ...slideInfo.animObj,
+            ...animObj,
             onEnd: () => {
               updateHandler.apply()
             }
@@ -440,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) {
-      return
-    };
-    taskManager.addTask(TaskType.SLIDE, { target: -target, animObj, updateParam });
-  };
-
   let callFocusAfterUpdate = false;
 
   //methods
@@ -675,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: props.slideSetting.Easing,
-          onStart: null,
-          speed: props.slideSetting.Speed,
-          duration: props.slideSetting.Duration,
-        };
-      }
-      _slideTo(position, animObj);
-    }
-  };
-
   const setZIndex = (index, normalZIndex, focusZIndex) => {
     const targetItem = getItemByIndex(index);
     if (targetItem) {
@@ -708,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: props.slideSetting.Speed,
-          duration: props.slideSetting.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);
     }
   }
 
@@ -822,15 +901,22 @@ export const setup = (
     }
     const updater = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       focusId,
       false,
       permanentItemList
     );
     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();
   };
 
   const getVisibleItems = () => {
@@ -886,6 +972,14 @@ export const setup = (
     slideLock = false;
   }
 
+  const setSlideSetting = (setting) => {
+    if (!setting) {
+      innerSlideSetting = props.slideSetting;
+    } else {
+      innerSlideSetting = setting;
+    }
+  }
+
   const exportObject = {
     lockSlide,
     unlockSlide,
@@ -907,6 +1001,7 @@ export const setup = (
     getCurrentFocusIndex,
     getCurMode,
     getTemplatePosition,
+    setSlideSetting
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1160,6 +1255,8 @@ export const setup = (
       metroTemplate.getTailItemIndex()
     )?.templateInfo;
     if (lastTemplateInfo) {
+      let preTouchW = touchDivSize.width;
+      let preTouchH = touchDivSize.height;
       if (vertical) {
         touchDivSize.width = props.width;
         touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
@@ -1167,7 +1264,9 @@ export const setup = (
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
       }
-      resetDragRect(touchDivSize.width, touchDivSize.height);
+      if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+        updateTouchBoxCondition();
+      }
     }
   }
 
@@ -1294,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: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
-          },
+          true,
           {
             mergeTmp: true
           });
@@ -1315,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);
   }
@@ -1402,28 +1496,23 @@ export const setup = (
       onItemBlur(preFocusItem);
       onItemFocus(next_focus_item, preEdgeRect);
 
-      let cur_visible_start = _calculateVisibleStart(next_focus_item.templateInfo, vertical ? vertical_direction : horizontal_direction);
-      if (visibleInfo.start !== cur_visible_start) {
-        if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-          let animObj = {
-            easing: "",
-            onStart: null,
-            speed: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
-          };
-          _slideTo(cur_visible_start, animObj, { mergeTmp: false });
-        } else {
-          const updater = pageUpdater.update(
-            metroTemplate,
-            visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-            visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
-            next_focus_item.id,
-            false,
-            permanentItemList
-          );
-          //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
-          updater.applyTmp();
-        }
+      if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+        slideToItemInner(
+          next_focus_item.index,
+          true,
+          vertical ? vertical_direction : horizontal_direction,
+          preFocusItem);
+      } else {
+        const updater = pageUpdater.update(
+          metroTemplate,
+          visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+          visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+          next_focus_item.id,
+          false,
+          permanentItemList
+        );
+        //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
+        updater.applyTmp();
       }
     } else {
       //到达边缘
@@ -1471,67 +1560,93 @@ 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 visible_start = origin;
-    if ((props.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 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
-      ) {
-        boundary = headTemplateInfo[size_key];
+    let visibleStart = origin;
+
+    if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
+      if (visibleInfo.start >= 0) {
+        let boundary = 0;
+        //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
+        const headTemplateInfo = getItemByIndex(0).templateInfo;
+        if (
+          targetRect
+          && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
+          && targetRect[pos_key] + targetRect[size_key] <=
+          visibleInfo.range
+        ) {
+          boundary = headTemplateInfo[size_key];
+        }
+        visibleStart = visibleStart < boundary ? 0 : visibleStart;
+      } else {
+        // 以最后一个item的位置作为动态的保护边界
+        visibleStart = visibleStart < visibleInfo.start ? visibleInfo.start : visibleStart;
       }
-      visible_start = visible_start < boundary ? 0 : visible_start;
     }
-    if ((props.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
+    if ((innerSlideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
       let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).templateInfo;
-      let last_visible_start =
-        lastTemplateInfo[pos_key] +
-        lastTemplateInfo[size_key] -
-        visibleInfo.range;
-      last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
-      let boundary = last_visible_start;
-      if (
-        targetItem
-        && (!lastTemplateInfo.focusable || targetItem.index == lastTemplateInfo.index)
-        && targetItem[pos_key] - last_visible_start >= 0
-      ) {
-        //最后元素是占位符, 在保证获焦区域完全展示的前提下要保证不可获焦元素的完全展示
-        boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+      const lastEnd = lastTemplateInfo[pos_key] + lastTemplateInfo[size_key];
+      const lastVisibleStart = Math.max(lastEnd - visibleInfo.range, 0);
+      //边界必须大于等于0, 同时若最后一个缩进时, 边界采用最后一个item的位置
+      if (visibleInfo.end <= lastEnd) {
+        let boundary = lastVisibleStart;
+        if (
+          targetRect
+          && (!lastTemplateInfo.focusable || index == lastTemplateInfo.index)
+          && targetRect[pos_key] - lastVisibleStart >= 0
+        ) {
+          boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+        }
+        visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
+      } else {
+        // 以最后一个item的位置作为动态的保护边界
+        visibleStart = visibleStart > visibleInfo.start ? visibleInfo.start : visibleStart;
       }
-      visible_start =
-        visible_start > boundary ? last_visible_start : visible_start;
     }
-    return visible_start;
+    return visibleStart;
   }
 
-  const _calculateVisibleStart = (targetTemplateInfo, direction) => {
-    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) {
+      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 needCalculate = true;
-    switch (props.slideSetting.Type) {
+
+    switch (innerSlideSetting.Type) {
       case SlideSetting.Type.FIX_POSITION:
+        //TODO 当item的size和widget的size相同时, 滚动速度会出现未预期的变化
         //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
 
         //首页不滚动
-        if (props.slideSetting.FixFirstPage) {
-          if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
+        if (innerSlideSetting.FixFirstPage) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1539,88 +1654,116 @@ export const setup = (
 
         if (needCalculate) {
           new_visible_start = Math.ceil(
-            targetTemplateInfo[center_key] -
-            visibleInfo.range * props.slideSetting.FixPercent
+            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];
         }
 
         break;
       case SlideSetting.Type.SEAMLESS:
         //首页不滚动
-        if (props.slideSetting.FixFirstPage) {
-          if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
+        if (innerSlideSetting.FixFirstPage) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
         }
+
         if (needCalculate) {
-          if (
-            targetTemplateInfo[size_key] >=
-            visibleInfo.range *
-            (props.slideSetting.EndPercent - props.slideSetting.StartPercent)
-          ) {
-            //尺寸较大的item
-            new_visible_start =
-              targetTemplateInfo[center_key] - visibleInfo.range * 0.5;
-          } else {
-            if (direction > 0) {
-              if (
-                targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] >
-                visibleInfo.start +
-                visibleInfo.range * props.slideSetting.EndPercent
-              ) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] +
-                  targetTemplateInfo[size_key] -
-                  visibleInfo.range * props.slideSetting.EndPercent;
-              }
-            } else if (direction < 0) {
-              if (
-                targetTemplateInfo[pos_key] <
-                visibleInfo.start +
-                visibleInfo.range * props.slideSetting.StartPercent
-              ) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] -
-                  visibleInfo.range * props.slideSetting.StartPercent;
+          /**
+           * seamless滚动规则:
+           * 0-start: 焦点往右时不处理, 往左的时候更新position以保持焦点的start位置一致
+           * end-1.0: 焦点往左时不处理, 往右的时候更新position以保持焦点的end位置一致
+           * 重合区域: 保持焦点的中心位置一致
+           */
+          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)
+                }
               }
-            } else {
-              //不是沿widget方向的移动
-              if (targetTemplateInfo[pos_key] < visibleInfo.start) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] -
-                  visibleInfo.range * props.slideSetting.StartPercent;
-              } else if (
-                targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] >
-                visibleInfo.end
-              ) {
-                new_visible_start =
-                  targetTemplateInfo[pos_key] +
-                  targetTemplateInfo[size_key] -
-                  visibleInfo.range * props.slideSetting.EndPercent;
+            }
+
+            //item的头部对齐rect1的start
+            if (itemEnd > rect1Start) {
+              if (target1 > rect1End) {
+                //preRect位置错误或者item的尺寸大于区域范围(保证item完整显示)
+                // rect1Result = itemEnd - visibleInfo.range;
+              } else {
+                if (direction >= 0) {
+                  //inRect1, 只处理往右/往下
+                  rect1Result = visibleInfo.start + (itemEnd - target1);
+                }
               }
             }
+
+            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;
       default:
         console.error(
           "MetroWidget: undefined slide type",
-          props.slideSetting.Type
+          innerSlideSetting.Type
         );
     }
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetTemplateInfo);
+
+    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index);
     return Math.round(new_visible_start);
   };
 
@@ -1656,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 &&
@@ -1681,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);
     }
   };
 
@@ -1747,8 +1903,19 @@ export const setup = (
     }
   }
 
+  const getTouchCount = (nexusCustomData) => {
+    let touchCount = -1;
+    if (nexusCustomData) {
+      try {
+        touchCount = JSON.parse(nexusCustomData).tc;
+      } catch (e) {
+        touchCount = -1;
+      }
+    }
+    return touchCount;
+  }
+
   const mergeTouchSlideToSlideDiv = (touchCount) => {
-    // console.log("touchtest", props.name, `touchToDiv div: ${slideDivTop.value}, visibleStart:${visibleInfo.start} swapCount: ${Forge.sFrameCount.count}`)
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
@@ -1780,6 +1947,13 @@ export const setup = (
   }
 
   const onTouchDown = (data, customData, nexusCustomData) => {
+    touchRecorder.reset();
+    let touchCount = getTouchCount(nexusCustomData);
+    touchRecorder.setTouchCount(touchCount);
+    if (mode.getMode() == FOCUS_MODE) {
+      //模式切换, 更新boxPosition
+      updateTouchBoxCondition();
+    }
     mode.touchStart();
     mode.flingEnd();
     // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
@@ -1791,6 +1965,7 @@ export const setup = (
       top: vertical ? t : undefined,
       bottom: vertical ? t : undefined,
     }
+
     actorController.run([
       actorController
         .condition(undefined, false)
@@ -1809,8 +1984,8 @@ export const setup = (
 
     const updater = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       false,
       permanentItemList
@@ -1828,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) }])
@@ -1844,35 +2019,32 @@ export const setup = (
       //只点击, 没有移动或者fling
       updateRenderItems(false, false);
       mode.touchEnd();
+    } else {
+      if (touchRecorder.moved && !mode.duringFling()) {
+        mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
+        updateRenderItems(false, false);
+        mode.touchEnd()
+      }
     }
   }
 
+  const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
+
   const onDragStart = (data, customData, nexusCustomData) => {
+    touchRecorder.move();
     mode.dragStart()
     visibleInfo.start = getVisibleStart(data);
   }
 
   const onDragEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
-    // console.log("touchtest", props.name + " animId:" + debugAnimId,
-    //  `onDragEnd ${visibleInfo.start}`)
     actorController.run([
       actorController.state().removeConditionByGroup(reachAnchorGroup),
     ]);
-    let touchCount = -1;
-    if (nexusCustomData) {
-      try {
-        touchCount = JSON.parse(nexusCustomData).tc;
-      } catch (e) {
-        touchCount = -1;
-      }
-    }
-    mergeTouchSlideToSlideDiv(touchCount);
-    updateRenderItems(false, false);
-    mode.touchEnd()
   }
 
   const onFlingStart = (data, customData, nexusCustomData) => {
+    touchRecorder.move();
     mode.flingStart();
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
@@ -1885,17 +2057,9 @@ export const setup = (
 
   const onFlingEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
-    // console.log("touchtest", props.name, `onFlingEnd ${visibleInfo.start}`, data, customData, nexusCustomData)
     //记录拖拽的距离
     if (mode.duringFling()) {
-      let touchCount = -1;
-      if (nexusCustomData) {
-        try {
-          touchCount = JSON.parse(nexusCustomData).tc;
-        } catch (e) {
-          touchCount = -1;
-        }
-      }
+      let touchCount = getTouchCount(nexusCustomData);
       mergeTouchSlideToSlideDiv(touchCount);
       updateRenderItems(false, false);
       mode.flingEnd();
@@ -1903,6 +2067,10 @@ export const setup = (
     }
   }
 
+  const onFlingDrop = (data, customData, nexusCustomData) => {
+    visibleInfo.start = getVisibleStart(data);
+  }
+
   const getTouchWall = () => {
     const boxSize = metroTemplate.getBoundingBoxSize();
     let wall = {
@@ -1914,9 +2082,15 @@ export const setup = (
     if (vertical) {
       wall.top = -boxSize.height + props.height - slideDivTop.value;
       wall.bottom = -slideDivTop.value;
+      if (wall.top > wall.bottom) {
+        wall.top = wall.bottom;
+      }
     } else {
       wall.left = -boxSize.width + props.width - slideDivLeft.value;
       wall.right = -slideDivLeft.value;
+      if (wall.left > wall.right) {
+        wall.left = wall.right;
+      }
     }
     return wall;
   }
@@ -1925,8 +2099,8 @@ export const setup = (
     templateItemAdder.tryAddItemByPosition(visibleInfo.start + visibleInfo.range);
     const updater = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       true,
       permanentItemList
@@ -1934,9 +2108,10 @@ export const setup = (
     applyTmp ? updater.applyTmp() : updater.apply();
   }
 
-  const resetDragRect = () => {
+  const updateTouchBoxCondition = () => {
     if (actorController != null) {
       const walls = getTouchWall();
+
       //更新wall设置
       actorController.run([
         actorController.state().removeConditionByGroup(wallConditionGroup),
@@ -1948,6 +2123,21 @@ export const setup = (
     }
   }
 
+  const touchRecorder = {
+    moved: false,
+    touchCount: -1,
+    reset: function () {
+      this.moved = false;
+      this.touchCount = -1;
+    },
+    move: function () {
+      this.moved = true;
+    },
+    setTouchCount: function (count) {
+      this.touchCount = count;
+    }
+  };
+
   //TODO debug
   // let debugAnimId = -1;
   // let debugViewId = -1
@@ -1955,10 +2145,14 @@ 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("touchtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
+    // console.log("testtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
     const walls = getTouchWall();
     //注册回调
     actorController.run([
@@ -1966,10 +2160,10 @@ export const setup = (
         .condition(undefined, true)
         .onTouchDown()
         .then([onTouchDown]),
-      // actorController
-      //   .condition(undefined, true)
-      //   .onDragStart()
-      //   .then([onDragStart]),
+      actorController
+        .condition(undefined, true)
+        .onDragStart()
+        .then([onDragStart]),
       actorController
         .condition(undefined, true)
         .onDragEnd()
@@ -1986,6 +2180,10 @@ export const setup = (
         .condition(undefined, true)
         .onFlingEnd()
         .then([onFlingEnd]),
+      actorController
+        .condition(undefined, true)
+        .onFlingDrop()
+        .then([onFlingDrop]),
       actorController
         .condition(undefined, true)
         .onTouchRelease()
@@ -2029,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);
@@ -2037,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, 1);
+        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
@@ -2058,8 +2257,8 @@ export const setup = (
   const delayLoadHandler = setTimeout(() => {
     const updateHandler = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+      initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       focusId,
       false,
       permanentItemList
@@ -2073,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);
@@ -2107,7 +2306,7 @@ export const setup = (
     exportObject,
     setZIndex,
     onTouchDown,
-    onTouchRelease,
+    onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
   }