@shijiu/jsview-vue 2.1.482-test.0 → 2.2.35

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -108,6 +108,19 @@ export const setup = (
     FLING: 3,
   };
 
+  let innerKeepTraceRange = 0;
+  if (typeof 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,
@@ -171,6 +184,7 @@ export const setup = (
   let visibleInfo = new VisibleInfo();
   let preSlideDirection = 0;
   let alreadyCallItemFocus = false;
+  let innerSlideSetting = props.slideSetting
   const currentFocusIndex = ref(0);
 
   const DEFAULT_ANIMATION_DURATION = 200;
@@ -292,8 +306,8 @@ export const setup = (
               easing: "",
               onStart: null,
               onEnd: null,
-              speed: props.slideSetting.Speed,
-              duration: props.slideSetting.Duration,
+              speed: innerSlideSetting.Speed,
+              duration: innerSlideSetting.Duration,
             }
           }
         }
@@ -314,8 +328,8 @@ export const setup = (
     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
@@ -454,7 +468,7 @@ export const setup = (
   }
 
   const _slideTo = (target, animObj, updateParam = { mergeTmp: false }) => {
-    if (slideLock) {
+    if (slideLock || target == visibleInfo.start) {
       return
     };
     taskManager.addTask(TaskType.SLIDE, { target: -target, animObj, updateParam });
@@ -686,10 +700,10 @@ export const setup = (
       let animObj = null;
       if (doAnim) {
         animObj = {
-          easing: props.slideSetting.Easing,
+          easing: innerSlideSetting.Easing,
           onStart: null,
-          speed: props.slideSetting.Speed,
-          duration: props.slideSetting.Duration,
+          speed: innerSlideSetting.Speed,
+          duration: innerSlideSetting.Duration,
         };
       }
       _slideTo(position, animObj);
@@ -742,8 +756,8 @@ export const setup = (
         _slideTo(cur_slide, doAnim ? {
           easing: "",
           onStart: null,
-          speed: props.slideSetting.Speed,
-          duration: props.slideSetting.Duration,
+          speed: innerSlideSetting.Speed,
+          duration: innerSlideSetting.Duration,
           onEnd: null,
         } : null);
       }
@@ -822,8 +836,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,
       focusId,
       false,
       permanentItemList
@@ -831,6 +845,8 @@ export const setup = (
     updater.apply();
     onItemFocus(getItemById(focusId), null);
     slideToItem(id2Index(focusId), false);
+    //template和slideDivStyle均确定后再次重设box condition
+    updateTouchBoxCondition();
   };
 
   const getVisibleItems = () => {
@@ -886,6 +902,14 @@ export const setup = (
     slideLock = false;
   }
 
+  const setSlideSetting = (setting) => {
+    if (!setting) {
+      innerSlideSetting = props.slideSetting;
+    } else {
+      innerSlideSetting = setting;
+    }
+  }
+
   const exportObject = {
     lockSlide,
     unlockSlide,
@@ -907,6 +931,7 @@ export const setup = (
     getCurrentFocusIndex,
     getCurMode,
     getTemplatePosition,
+    setSlideSetting
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1160,6 +1185,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 +1194,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();
+      }
     }
   }
 
@@ -1301,8 +1330,8 @@ export const setup = (
           {
             easing: "",
             onStart: null,
-            speed: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
+            speed: innerSlideSetting.Speed,
+            duration: innerSlideSetting.Duration,
           },
           {
             mergeTmp: true
@@ -1402,28 +1431,33 @@ 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) {
+
+      if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+        let cur_visible_start = _calculateVisibleStart(
+          next_focus_item.templateInfo,
+          vertical ? vertical_direction : horizontal_direction,
+          preFocusItem.templateInfo,
+        );
+        if (visibleInfo.start !== cur_visible_start) {
           let animObj = {
             easing: "",
             onStart: null,
-            speed: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
+            speed: innerSlideSetting.Speed,
+            duration: innerSlideSetting.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();
         }
+      } 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 {
       //到达边缘
@@ -1474,48 +1508,58 @@ export const setup = (
   const normalizeVisibleStart = (origin, targetItem = null) => {
     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 (
+          targetItem
+          && (!headTemplateInfo.focusable || targetItem.index == headTemplateInfo.index)
+          && targetItem[pos_key] + targetItem[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 (
+          targetItem
+          && (!lastTemplateInfo.focusable || targetItem.index == lastTemplateInfo.index)
+          && targetItem[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) => {
+  let preTemplateInfo = null;
+  const _calculateVisibleStart = (targetTemplateInfo, direction, preInfo = null) => {
     if (!targetTemplateInfo) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
     }
+    if (preInfo) {
+      preTemplateInfo = preInfo;
+    }
 
     preSlideDirection = direction;
     preAnchorItemIndex = targetTemplateInfo.index;
@@ -1525,12 +1569,14 @@ export const setup = (
     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 (innerSlideSetting.FixFirstPage) {
           if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
@@ -1540,7 +1586,7 @@ export const setup = (
         if (needCalculate) {
           new_visible_start = Math.ceil(
             targetTemplateInfo[center_key] -
-            visibleInfo.range * props.slideSetting.FixPercent
+            visibleInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
@@ -1558,68 +1604,93 @@ export const setup = (
         break;
       case SlideSetting.Type.SEAMLESS:
         //首页不滚动
-        if (props.slideSetting.FixFirstPage) {
+        if (innerSlideSetting.FixFirstPage) {
           if (targetTemplateInfo[pos_key] + targetTemplateInfo[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;
+          /**
+           * seamless滚动规则:
+           * 0-start: 焦点往右时不处理, 往左的时候更新position以保持焦点的start位置一致
+           * 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 {
-            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;
+            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;
+                }
+                rect0Result = visibleInfo.start + (itemStart - pre);
               }
+            }
+          }
+          if (itemEnd > rect1Start) {
+            if (targetEnd > rect1End) {
+              rect1Result = itemEnd - visibleInfo.range;
             } 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;
+              //inRect1, 只处理往右/往下
+              let pre;
+              if (targetEnd > rect1Start) {
+                pre = targetEnd;
+              } else {
+                pre = rect1Start;
+              }
+              if (direction >= 0) {
+                rect1Result = visibleInfo.start + (itemEnd - pre);
               }
             }
+          } 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;
           }
         }
         break;
       default:
         console.error(
           "MetroWidget: undefined slide type",
-          props.slideSetting.Type
+          innerSlideSetting.Type
         );
     }
+
+    preTemplateInfo = targetTemplateInfo;
     new_visible_start = normalizeVisibleStart(new_visible_start, targetTemplateInfo);
     return Math.round(new_visible_start);
   };
@@ -1747,8 +1818,20 @@ 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}`)
+    // console.log("testtest", props.name, `touchToDiv div: ${slideDivTop.value}, visibleStart:${visibleInfo.start} swapCount: ${Forge.sFrameCount.count}`)
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
@@ -1780,6 +1863,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 +1881,7 @@ export const setup = (
       top: vertical ? t : undefined,
       bottom: vertical ? t : undefined,
     }
+
     actorController.run([
       actorController
         .condition(undefined, false)
@@ -1809,8 +1900,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
@@ -1844,35 +1935,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 +1973,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 +1983,10 @@ export const setup = (
     }
   }
 
+  const onFlingDrop = (data, customData, nexusCustomData) => {
+    visibleInfo.start = getVisibleStart(data);
+  }
+
   const getTouchWall = () => {
     const boxSize = metroTemplate.getBoundingBoxSize();
     let wall = {
@@ -1914,9 +1998,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 +2015,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 +2024,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 +2039,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
@@ -1958,7 +2064,7 @@ export const setup = (
     divView.DragEnables?.(4 | 0x08 | 0x10); // 只激活drag
     // 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 +2072,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 +2092,10 @@ export const setup = (
         .condition(undefined, true)
         .onFlingEnd()
         .then([onFlingEnd]),
+      actorController
+        .condition(undefined, true)
+        .onFlingDrop()
+        .then([onFlingDrop]),
       actorController
         .condition(undefined, true)
         .onTouchRelease()
@@ -2037,7 +2147,7 @@ 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);
+        cur_visible_start = _calculateVisibleStart(item.templateInfo, 0);
       }
     }
   }
@@ -2058,8 +2168,8 @@ export const setup = (
   const delayLoadHandler = setTimeout(() => {
     const updateHandler = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+      visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       focusId,
       false,
       permanentItemList
@@ -2107,7 +2217,7 @@ export const setup = (
     exportObject,
     setZIndex,
     onTouchDown,
-    onTouchRelease,
+    onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
   }