@shijiu/jsview-vue 2.2.128 → 2.2.201

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -33,6 +33,8 @@ import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 
 const TAG = "MetroWidget";
 
+let metroWidgetTokenGen = 1;
+
 const _getMetroTemplate = function (
   widgetRectInfo,
   direction,
@@ -127,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(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.FLING;
+      }
+    },
+    flingEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
     },
-    flingStart() {
-      this._touchState = TouchState.FLING;
+    dragStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.DRAG;
+      }
     },
-    flingEnd() { },
-    dragStart() {
-      this._touchState = TouchState.DRAG;
+    dragEnd(touchCount) {
     },
-    dragEnd() { },
     keyDown() {
       this._mode = FOCUS_MODE;
       modeForExport.value = FOCUS_MODE;
@@ -187,6 +202,10 @@ export const setup = (
   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) => {
@@ -205,6 +224,7 @@ export const setup = (
   }
 
   const onAddTask = (allTask) => {
+    if (!innerData || innerData.length <= 0) { return; }
     let resizeTaskMap = {};
     //统一处理itemResize和slide动画
     let minIndex = Infinity;
@@ -332,8 +352,10 @@ export const setup = (
       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, focusItem.templateInfo.index);
+        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 {
         targetRect = getItemById(focusId).templateInfo;
       }
@@ -347,8 +369,9 @@ export const setup = (
         //存在resize时, 需要调整targetRect
         preInfo = mRectCache.getPreRect();
         if (preInfo) {
-          v.start = targetRect.left - preInfo.left + v.start;
-          preInfo.left += (v.start - visibleInfo.start);
+          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);
@@ -652,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);
@@ -665,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
@@ -829,94 +852,140 @@ export const setup = (
     }
   }
 
-  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);
-    let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
-    if (targetRect) {
-      slideToRect(targetRect, false);
-    } else {
-      slideToItem(id2Index(focusId), false);
-    }
-    //template和slideDivStyle均确定后再次重设box condition
-    updateTouchBoxCondition();
   };
 
   const getVisibleItems = () => {
@@ -933,6 +1002,7 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
+    if (innerData.length <= 0) { return; }
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
@@ -1270,7 +1340,7 @@ export const setup = (
     }
   }
 
-  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
+  const _getItemConfigFromMeasursObj = (measuresObj) => {
     let focusZIndex = -1,
       normalZIndex = -1;
     if (
@@ -1289,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,
@@ -1560,13 +1635,14 @@ export const setup = (
     }
   };
 
-  const normalizeVisibleStart = (origin, targetRect = undefined, index = undefined) => {
+  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;
@@ -1574,41 +1650,41 @@ export const setup = (
           targetRect
           && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
           && targetRect[pos_key] + targetRect[size_key] <=
-          visibleInfo.range
+          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 (
           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;
   }
 
   const mRectCache = new RectCache();
-  const _calculateVisibleStart = (targetRect, _direction, templateInfo, visibleInfo, preInfo = null) => {
+  const _calculateVisibleStart = (targetRect, _direction, templateInfo, vInfo, preInfo = null) => {
     if (!targetRect) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
@@ -1635,7 +1711,7 @@ export const setup = (
     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;
 
@@ -1646,7 +1722,7 @@ export const setup = (
 
         //首页不滚动
         if (innerSlideSetting.FixFirstPage) {
-          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo.range) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < vInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1655,7 +1731,7 @@ export const setup = (
         if (needCalculate) {
           new_visible_start = Math.ceil(
             targetRect[pos_key] + targetRect[size_key] / 2 -
-            visibleInfo.range * innerSlideSetting.FixPercent
+            vInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
@@ -1674,7 +1750,7 @@ export const setup = (
       case SlideSetting.Type.SEAMLESS:
         //首页不滚动
         if (innerSlideSetting.FixFirstPage) {
-          if (targetRect[pos_key] + targetRect[size_key] - 1 < visibleInfo.range) {
+          if (targetRect[pos_key] + targetRect[size_key] - 1 < vInfo.range) {
             new_visible_start = 0;
             needCalculate = false;
           }
@@ -1692,11 +1768,11 @@ export const setup = (
           const itemMainSize = targetRect[size_key];
 
           if (preRect) {
-            const rect0Start = visibleInfo.start;
-            const rect0End = visibleInfo.start + visibleInfo.range * innerSlideSetting.StartPercent;
+            const rect0Start = vInfo.start;
+            const rect0End = vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
             const rect0Range = rect0End - rect0Start + 1
-            const rect1Start = visibleInfo.start + visibleInfo.range * innerSlideSetting.EndPercent;
-            const rect1End = visibleInfo.start + visibleInfo.range - 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);
@@ -1713,7 +1789,7 @@ export const setup = (
               } else {
                 if (direction <= 0) {
                   //inRect0, 只处理往左/往上
-                  rect0Result = visibleInfo.start + (itemStart - target0)
+                  rect0Result = vInfo.start + (itemStart - target0)
                 }
               }
             }
@@ -1726,7 +1802,7 @@ export const setup = (
               } else {
                 if (direction >= 0) {
                   //inRect1, 只处理往右/往下
-                  rect1Result = visibleInfo.start + (itemEnd - target1);
+                  rect1Result = vInfo.start + (itemEnd - target1);
                 }
               }
             }
@@ -1742,16 +1818,16 @@ export const setup = (
           }
 
           //保证item处于safe area范围
-          const headSafeArea = innerSlideSetting.HeadSafeArea * visibleInfo.range;
-          const tailSafeArea = innerSlideSetting.TailSafeArea * visibleInfo.range;
-          if (itemMainSize > visibleInfo.range - headSafeArea - tailSafeArea) {
+          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 - (visibleInfo.range - itemMainSize) / 2)
+            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 + visibleInfo.range - 1 - tailSafeArea) {
-              new_visible_start = itemEnd - visibleInfo.range + tailSafeArea;
+            } else if (itemEnd > new_visible_start + vInfo.range - 1 - tailSafeArea) {
+              new_visible_start = itemEnd - vInfo.range + tailSafeArea;
             }
           }
         }
@@ -1763,7 +1839,7 @@ export const setup = (
         );
     }
 
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index);
+    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index, vInfo);
     return Math.round(new_visible_start);
   };
 
@@ -1893,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 {
@@ -1916,34 +1990,32 @@ export const setup = (
   }
 
   const mergeTouchSlideToSlideDiv = (touchCount) => {
+    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) => {
@@ -1954,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
@@ -2002,28 +2079,30 @@ export const setup = (
       anchorPosList.push(-visibleInfo.start - visibleInfo.range - anchorPos + 1);
       anchorPos += anchorSpacing;
     }
-    const reachConditionList = anchorPosList.map(pos => {
-      return 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)
       }
     }
   }
@@ -2031,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);
   }
 
@@ -2092,6 +2178,7 @@ export const setup = (
         wall.left = wall.right;
       }
     }
+
     return wall;
   }
 
@@ -2113,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
       ]);
     }
   }
@@ -2138,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
@@ -2145,54 +2247,68 @@ export const setup = (
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
-    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);
+
+    // 对触控回调进行顺序管理
+    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
     ]);
   }
 
@@ -2292,6 +2408,7 @@ export const setup = (
   onUpdated(() => { });
 
   onBeforeUnmount(() => {
+    taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
   });