@shijiu/jsview-vue 2.2.128 → 2.2.373

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -27,12 +27,15 @@ import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
-import { TaskType, SlideAnimWrapper, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
+import { TaskType, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
 import { getDirectionByRect, RectCache } from "./Slide.ts";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+import { FeatureNames, JsvUseFeature } from "../../JsViewVueTools/FeatureActive.ts";
 
 const TAG = "MetroWidget";
 
+let metroWidgetTokenGen = 1;
+
 const _getMetroTemplate = function (
   widgetRectInfo,
   direction,
@@ -115,6 +118,9 @@ export const setup = (
     innerKeepTraceRange = props.keepTraceRange;
   } else {
     if (props.touchFlag > 0) {
+      // 激活引擎功能的支持
+      JsvUseFeature('MetroWidget', FeatureNames.TouchReceiver);
+
       //触控默认3屏
       innerKeepTraceRange = 3;
     } else {
@@ -127,25 +133,38 @@ export const setup = (
   const mode = {
     _mode: FOCUS_MODE,
     _touchState: TouchState.IDLE,
+    _touchCount: 0, // 触控流流程ID，解决fling等事件晚于新的touchDown时引起的混乱问题
 
     _duringTouch: false,
     _duringFling: false,
-    touchStart() {
+    touchStart(touchCount) {
       this._mode = TOUCH_MODE;
       modeForExport.value = TOUCH_MODE;
       this._touchState = TouchState.TAP;
+      this._touchCount = touchCount;
     },
-    touchEnd() {
-      this._touchState = TouchState.IDLE;
+    touchEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
     },
-    flingStart() {
-      this._touchState = TouchState.FLING;
+    flingStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.FLING;
+      }
     },
-    flingEnd() { },
-    dragStart() {
-      this._touchState = TouchState.DRAG;
+    flingEnd(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.IDLE;
+      }
+    },
+    dragStart(touchCount) {
+      if (touchCount == this._touchCount) {
+        this._touchState = TouchState.DRAG;
+      }
+    },
+    dragEnd(touchCount) {
     },
-    dragEnd() { },
     keyDown() {
       this._mode = FOCUS_MODE;
       modeForExport.value = FOCUS_MODE;
@@ -162,6 +181,9 @@ export const setup = (
     },
     getTouchState() {
       return this._touchState;
+    },
+    getTouchCount() {
+      return this._touchCount;
     }
   }
 
@@ -187,6 +209,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 +231,7 @@ export const setup = (
   }
 
   const onAddTask = (allTask) => {
+    if (!innerData || innerData.length <= 0) { return; }
     let resizeTaskMap = {};
     //统一处理itemResize和slide动画
     let minIndex = Infinity;
@@ -218,7 +245,6 @@ export const setup = (
     let slideDoAnim = false;
 
     mRectCache.cacheManually();
-
     /**
      * 处理resize
      */
@@ -246,6 +272,9 @@ export const setup = (
         })
       });
 
+      //更新touch的size
+      updateTouchDivSize();
+
       //使用上一帧的状态计算anchorPosition
       if (resizeTaskMap[id2Index(focusId)]) {
         const task = resizeTaskMap[id2Index(focusId)];
@@ -272,12 +301,14 @@ export const setup = (
     let direction = undefined;
 
     let validSlideTask = false;
+    let forceSlide = false;
     if (allTask.slide.length > 0) {
       validSlideTask = true;
       //有滚动时, 取消延时加载
       tryCancelDelayLoad();
       let slideTask = lastOfArray(allTask.slide);
       slideDoAnim = slideTask.params.doAnim;
+      forceSlide = slideTask.params.force;
       switch (slideTask.subType) {
         case SlideTaskType.SLIDE_BY_DIV: {
           const div = slideTask.params.div;
@@ -332,8 +363,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 +380,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), Math.max(0, totalSize[size_key] - v.range));
+          preInfo[pos_key] += (v.start - visibleInfo.start);
         }
       }
       targetVisibleStart = _calculateVisibleStart(targetRect, direction, targetRect, v, preInfo);
@@ -441,7 +475,7 @@ export const setup = (
     }
 
     //处理滚动动画
-    if (needSlide) {
+    if (forceSlide || needSlide) {
       let animInfo = undefined;
       if (slideDoAnim) {
         animInfo = {
@@ -638,7 +672,7 @@ export const setup = (
 
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
-    if (!focusItem || mode.getMode() != FOCUS_MODE) return;
+    if (!focusItem) return;
     setItemZIndex(focusItem, innerData.length, true);
     if (isFocus) {
       _itemOnFocusSideEffect(focusItem, rect);
@@ -652,7 +686,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 +699,7 @@ export const setup = (
   }
 
   const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
-    if (id == focusId) {
+    if (id == focusId || innerData.length <= 0) {
       return;
     }
     //有外部触发的滚动时, 取消load
@@ -782,7 +816,7 @@ export const setup = (
     }
   };
 
-  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined) => {
+  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined, force = false) => {
     taskManager.addTask(
       TaskType.SLIDE,
       {
@@ -790,6 +824,7 @@ export const setup = (
         doAnim,
         direction,
         preItem,
+        force,
       },
       SlideTaskType.SLIDE_BY_ITEM);
   };
@@ -812,111 +847,179 @@ export const setup = (
         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') {
+  const slideToRectInner = (rect, doAnim, direction, force) => {
+    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,
+          force
         },
-        SlideTaskType.SLIDE_BY_RECT);
+        SlideTaskType.SLIDE_BY_RECT
+      );
     }
   }
+  const slideToRect = (rect, doAnim, direction = undefined) => {
+    slideToRectInner(rect, doAnim, direction, false);
+  }
+
+  function ifLayoutChange(type, oldMeasureItem, newMeasureItem) {
+    let changed = newMeasureItem.width !== oldMeasureItem.width
+      || newMeasureItem.height !== oldMeasureItem.height
+      || newMeasureItem.focusable !== oldMeasureItem.focusable
+      || newMeasureItem.marginRight !== oldMeasureItem.marginRight
+      || newMeasureItem.marginBottom !== oldMeasureItem.marginBottom;
+    if (type !== "relative") {
+      changed = changed
+        || newMeasureItem.left !== oldMeasureItem.left
+        || newMeasureItem.top !== oldMeasureItem.top
+    }
+    return changed;
+  }
 
-  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()).concat();
+      if (newData instanceof Array) {
+        let maxSameIndex = -1;
+        let layoutChange = false;
+        let onlyDataChangeList = [];
+        let targetFocusId = focusId
+        if (focusId >= newData.length) {
+          targetFocusId = newData.length - 1
+        }
+
+        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);
+                layoutChange = ifLayoutChange(props.layoutType, oldMeasureItem, newMeasureItem);
+                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;
+        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(targetFocusId);
+          }
+        } else {
+          if (maxSameIndex < newData.length - 1) {
+            //追加数据
+            templateItemAdder.updateData(newData);
+            if (props.onScroll) {
+              templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+            } else {
+              templateItemAdder.tryAddItemById(targetFocusId);
+            }
+          }
+
+          //仅用户数据变更
+          if (onlyDataChangeList.length > 0) {
+            for (let i of onlyDataChangeList) {
+              if (i.index < innerData.length) {
+                innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
+                innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
+              } else {
+                //之后的数据未布局, 尚未添加到innerData中
+                break;
+              }
+            }
+          }
         }
+
+        if (targetFocusId != focusId) {
+          //重置所有的滚动信息
+          _changeFocusId(targetFocusId, false);
+          visibleInfo = visibleInfo.copy();
+          visibleInfo.start = 0;
+          visibleInfo._startMax = 0;
+          slideDivLeft.value = 0;
+          slideDivTop.value = 0;
+        }
+        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) {
+          slideToRectInner(targetRect, false, 0, true);
+        } else {
+          slideToItemInner(id2Index(focusId), false, 0, 0, true);
+        }
+        //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 +1036,7 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
+    if (innerData.length <= 0) { return; }
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
@@ -956,10 +1060,6 @@ export const setup = (
     return id2Index(focusId);
   }
 
-  const getCurMode = () => {
-    return mode.getMode();
-  }
-
   const getTemplatePosition = (index) => {
     return _getTemplatePosition(index);
   }
@@ -980,6 +1080,13 @@ export const setup = (
     }
   }
 
+  const tryCancelDelayLoad = () => {
+    if (delayLoadHandler > 0) {
+      clearTimeout(delayLoadHandler);
+      delayLoadHandler = -1;
+    }
+  }
+
   const exportObject = {
     lockSlide,
     unlockSlide,
@@ -999,9 +1106,10 @@ export const setup = (
     getVisibleItems,
     getCustomerDataSize,
     getCurrentFocusIndex,
-    getCurMode,
     getTemplatePosition,
-    setSlideSetting
+    setSlideSetting,
+    cancelDelayLoad: tryCancelDelayLoad,
+    setSensorSensitivity,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1199,6 +1307,24 @@ export const setup = (
     }
   };
 
+  const onDispatchKeyDown = (ev) => {
+    if (mode.getMode() == TOUCH_MODE && !mode.duringTouch()) {
+      if (ev.keyCode == 37 || ev.keyCode == 38 || ev.keyCode == 39 || ev.keyCode == 40) {
+        //只有在上下左右键切换为focus_mode
+        mode.keyDown();
+        //touch切换为focus的首次按键只显示焦点
+        const focusItem = _getVisibleFocusableItem();
+        const preFocusItem = getItemById(focusId);
+        _changeFocusId(focusItem.id, false);
+        if (preFocusItem.id !== focusItem.id) {
+          onItemBlur(preFocusItem);
+        }
+        onItemFocus(focusItem);
+      }
+    }
+    return false;
+  }
+
   const focusBlockOnKeyDown = (ev) => {
     if (onKeyDownLock) {
       return true;
@@ -1208,14 +1334,6 @@ export const setup = (
       if (mode.duringTouch()) {
         //touch过程中的按键不处理
         return true;
-      } else {
-        //切换为focus_mode
-        mode.keyDown();
-        //touch切换为focus的首次按键只显示焦点
-        const focusItem = _getVisibleFocusableItem();
-        _changeFocusId(focusItem.id, false);
-        onItemFocus(focusItem);
-        return true;
       }
     }
 
@@ -1249,14 +1367,11 @@ export const setup = (
     );
   };
 
-  const _onTemplateAddDone = () => {
-    //update slideDiv size
+  function updateTouchDivSize() {
     const lastTemplateInfo = getItemByIndex(
       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;
@@ -1264,13 +1379,20 @@ export const setup = (
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
       }
-      if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
-        updateTouchBoxCondition();
-      }
     }
   }
 
-  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
+  const _onTemplateAddDone = () => {
+    //update slideDiv size
+    let preTouchW = touchDivSize.width;
+    let preTouchH = touchDivSize.height;
+    updateTouchDivSize();
+    if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+      updateTouchBoxCondition();
+    }
+  }
+
+  const _getItemConfigFromMeasursObj = (measuresObj) => {
     let focusZIndex = -1,
       normalZIndex = -1;
     if (
@@ -1289,12 +1411,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,55 +1687,55 @@ 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;
         if (
           targetRect
-          && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
+          && (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)
+          && (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 +1762,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 +1773,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 +1782,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 +1801,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 +1819,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 +1840,7 @@ export const setup = (
               } else {
                 if (direction <= 0) {
                   //inRect0, 只处理往左/往上
-                  rect0Result = visibleInfo.start + (itemStart - target0)
+                  rect0Result = vInfo.start + (itemStart - target0)
                 }
               }
             }
@@ -1726,7 +1853,7 @@ export const setup = (
               } else {
                 if (direction >= 0) {
                   //inRect1, 只处理往右/往下
-                  rect1Result = visibleInfo.start + (itemEnd - target1);
+                  rect1Result = vInfo.start + (itemEnd - target1);
                 }
               }
             }
@@ -1742,16 +1869,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 +1890,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);
   };
 
@@ -1885,17 +2012,18 @@ export const setup = (
 
   //touch setting
   let actorController = null;
-  const touchLoadItemRect = visibleInfo.range;
   const reachAnchorGroup = 2;
   const wallConditionGroup = 1;
-  const touchCountGroup = 3;
+  const ScensorCondigionGroup = 3;
+  const TouchDownConditionGroup = 4;
 
   let divPos = -1;
   let frameCount = -1;
+  const DEFAULT_SENSITIVITY = 10;
+  let onMoveSensitivity = -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 {
@@ -1903,6 +2031,51 @@ export const setup = (
     }
   }
 
+  function onSensor(pos) {
+    const lastTemplateInfo = getItemByIndex(
+      metroTemplate.getTailItemIndex()
+    )?.templateInfo;
+    let totalWidth = 0;
+    if (lastTemplateInfo) {
+      if (vertical) {
+        totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+      } else {
+        totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+      }
+    }
+    props.onScroll?.(
+      vertical ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop) : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
+      visibleInfo.range,
+      totalWidth
+    );
+  }
+
+  function setOnMovement(sensitivity) {
+    onMoveSensitivity = sensitivity;
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(ScensorCondigionGroup),
+      cmds
+        .condition(ScensorCondigionGroup, true)
+        .onMovement(sensitivity) // 设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+        .then([onSensor]),
+    ]);
+  }
+
+  function setSensorSensitivity(sensitivity = DEFAULT_SENSITIVITY) {
+    if (!actorController) { return }
+    if (sensitivity <= 0) {
+      actorController.run((cmds) => [
+        cmds.state().removeConditionByGroup(ScensorCondigionGroup),
+      ]);
+      return;
+    }
+
+    if (sensitivity != onMoveSensitivity) {
+      setOnMovement(sensitivity)
+    }
+  }
+
+
   const getTouchCount = (nexusCustomData) => {
     let touchCount = -1;
     if (nexusCustomData) {
@@ -1916,69 +2089,76 @@ 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值
       ])
-    ])
+    ]);
+  }
+  function onTouchActionDone(touchCount) {
+    //一次触控动作结束
+    mergeTouchSlideToSlideDiv(touchCount);
+    //由于movement的监听是有帧数间隔的, 所以结束时需要再调用一次onScroll
+    _onScroll();
   }
 
   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();
+    updateTouchBoxCondition();
+
+    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
-        .condition(undefined, false)
+    let passDownTouchInfo = nexusCustomData;
+    actorController.run((cmds) => [
+      cmds
+        .condition(TouchDownConditionGroup, false)
         .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
-        .then([actorController.state().touchLockSwitch(true, vertical ? 1 : 2, t)]),
-      actorController
-        .condition(undefined, false)
+        .then([
+          cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)]),
+      cmds
+        .condition(TouchDownConditionGroup, false)
         .startMove(true, true)
-        .then([onDragStart]),
+        .then([SliderEditFuncReOrderWrap((d) => { onDragStart(d, null, passDownTouchInfo) })]),
     ])
 
     //blur item
-    onItemBlur(getItemById(focusId));
+    // onItemBlur(getItemById(focusId));
 
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
@@ -2002,55 +2182,69 @@ 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);
+        onTouchActionDone(touchRecorder.touchCount);
         updateRenderItems(false, false);
-        mode.touchEnd()
+        mode.touchEnd(touchCount)
       }
     }
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(TouchDownConditionGroup),
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
+    ])
   }
 
   const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
 
   const onDragStart = (data, customData, nexusCustomData) => {
+    let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.dragStart()
+    if (!(mode.getTouchCount() == touchCount && mode.duringFling())) {
+      //dragStart event may be triggered after fling event because of sending it when startMove condition is satisfied
+      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);
   }
@@ -2060,14 +2254,15 @@ export const setup = (
     //记录拖拽的距离
     if (mode.duringFling()) {
       let touchCount = getTouchCount(nexusCustomData);
-      mergeTouchSlideToSlideDiv(touchCount);
+      onTouchActionDone(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);
   }
 
@@ -2080,18 +2275,19 @@ export const setup = (
       bottom: 0,
     }
     if (vertical) {
-      wall.top = -boxSize.height + props.height - slideDivTop.value;
+      wall.top = -boxSize.height + props.height - slideDivTop.value - (widgetRectInfo.padding.top + widgetRectInfo.padding.bottom);
       wall.bottom = -slideDivTop.value;
       if (wall.top > wall.bottom) {
         wall.top = wall.bottom;
       }
     } else {
-      wall.left = -boxSize.width + props.width - slideDivLeft.value;
+      wall.left = -boxSize.width + props.width - slideDivLeft.value - (widgetRectInfo.padding.left + widgetRectInfo.padding.right);
       wall.right = -slideDivLeft.value;
       if (wall.left > wall.right) {
         wall.left = wall.right;
       }
     }
+
     return wall;
   }
 
@@ -2113,12 +2309,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,62 +2334,102 @@ 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
+  let touchInited = false;
   const initTouch = () => {
+    touchInited = true;
     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
     ]);
+
+    if (props.onScroll) {
+      setOnMovement(DEFAULT_SENSITIVITY);
+    }
+  }
+
+  function cleanTouch() {
+    actorController.run((cmds) => [
+      cmds.state().clearAllConditions(),
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
+    ])
   }
 
   //init
@@ -2206,9 +2442,9 @@ export const setup = (
     : { start: widgetRectInfo.padding.left, end: widgetRectInfo.padding.right };
 
   if (props.provideData) {
-    dataList = toRaw(props.provideData());
+    dataList = toRaw(props.provideData())?.concat();
   } else if (props.data) {
-    dataList = toRaw(props.data);
+    dataList = toRaw(props.data)?.concat();
   }
 
   templateItemAdder = new TemplateItemAdder(
@@ -2253,20 +2489,20 @@ export const setup = (
     permanentItemList
   );
   initUpdater.apply();
-  //延时加载剩余屏
-  const delayLoadHandler = setTimeout(() => {
-    const updateHandler = pageUpdater.update(
-      metroTemplate,
-      initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-      initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-      focusId,
-      false,
-      permanentItemList
-    );
-    updateHandler.apply();
-  }, 200);
-  const tryCancelDelayLoad = () => {
-    clearTimeout(delayLoadHandler);
+  //触控时, 延时加载剩余屏
+  let delayLoadHandler = -1;
+  if (props.touchFlag > 0) {
+    delayLoadHandler = setTimeout(() => {
+      const updateHandler = pageUpdater.update(
+        metroTemplate,
+        initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+        initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+        focusId,
+        false,
+        permanentItemList
+      );
+      updateHandler.apply();
+    }, 200);
   }
 
   onMounted(() => {
@@ -2292,8 +2528,12 @@ export const setup = (
   onUpdated(() => { });
 
   onBeforeUnmount(() => {
+    taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
+    if (touchInited) {
+      cleanTouch();
+    }
   });
 
   return {
@@ -2309,5 +2549,6 @@ export const setup = (
     onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
+    onDispatchKeyDown
   }
 }