@shijiu/jsview-vue 2.1.200 → 2.1.339-test.0

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -1,10 +1,12 @@
 import {
+  ref,
   reactive,
   onMounted,
   onBeforeUnmount,
   onUpdated,
   toRaw,
   nextTick,
+  computed,
 } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import {
@@ -23,10 +25,9 @@ import {
 } from "../WidgetCommon";
 import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
-// import { AnimationManager, AnimationTools } from "./AnimationManager";
 import { WidgetRectInfo } from "./WidgetRectInfo";
-import { checkType } from "../CheckType";
 import { TaskType, MacroEndTaskManager, AnimationManager } from "./AnimationManager.ts"
+import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
 
 const TAG = "MetroWidget";
 
@@ -70,6 +71,9 @@ const _getMetroTemplate = function (
   return metroWidget;
 };
 
+const TOUCH_MODE = 1; //触控模式
+const FOCUS_MODE = 2; //按键模式
+
 export const setup = (
   props,
   itemRender,
@@ -80,6 +84,8 @@ export const setup = (
   slideDivTop,
   focusNode,
   pageUpdateToken,
+  touchDiv,
+  touchDivSize,
   templateMode) => {
 
   if (props.itemConfig) {
@@ -94,6 +100,53 @@ export const setup = (
     props.layoutType,
     templateMode
   );
+
+  const TouchState = {
+    IDLE: 0,
+    TAP: 1,
+    DRAG: 2,
+    FLING: 3,
+  };
+
+  const mode = {
+    _mode: FOCUS_MODE,
+    _touchState: TouchState.IDLE,
+
+    _duringTouch: false,
+    _duringFling: false,
+    touchStart() {
+      this._mode = TOUCH_MODE;
+      this._touchState = TouchState.TAP;
+    },
+    touchEnd() {
+      this._touchState = TouchState.IDLE;
+    },
+    flingStart() {
+      this._touchState = TouchState.FLING;
+    },
+    flingEnd() { },
+    dragStart() {
+      this._touchState = TouchState.DRAG;
+    },
+    dragEnd() { },
+    keyDown() {
+      this._mode = FOCUS_MODE;
+      this._touchState = TouchState.IDLE;
+    },
+    duringFling() {
+      return this._touchState == TouchState.FLING;
+    },
+    duringTouch() {
+      return this._touchState != TouchState.IDLE;
+    },
+    getMode() {
+      return this._mode;
+    },
+    getTouchState() {
+      return this._touchState;
+    }
+  }
+
   let innerData = [];
   let dataList = [];
   let pageUpdater = null;
@@ -114,6 +167,8 @@ export const setup = (
   let onKeyDownLock = false;
   let visibleInfo = new VisibleInfo();
   let preSlideDirection = 0;
+  let alreadyCallItemFocus = false;
+  const currentFocusIndex = ref(0);
 
   const DEFAULT_ANIMATION_DURATION = 200;
 
@@ -140,6 +195,7 @@ export const setup = (
     let size_key = vertical ? "height" : "width";
     let doAnim = false;
 
+    let existOnFocusChange = false;
     for (let task of taskList) {
       if (task.type == TaskType.RESIZE_ITEM) {
         resizeTaskMap[task.params.index] = task;
@@ -162,6 +218,8 @@ export const setup = (
       } else if (task.type == TaskType.SLIDE) {
         //滚动动画取最后一个
         slideTask = task;
+      } else if (task.type == TaskType.ON_FOCUS_CHANGE) {
+        existOnFocusChange = true;
       }
     }
 
@@ -172,7 +230,9 @@ export const setup = (
       }
     }
 
+    let existItemResize = false;
     if (resizeList.length > 0) {
+      existItemResize = true;
       //TODO 应该是尺寸变化后的可视item需要记录位置, 但暂时先记录20个
       metroTemplate.cacheLayout(minIndex, minIndex + 20);
       //resize
@@ -188,9 +248,11 @@ export const setup = (
         const focusItem = getItemById(focusId);
         const start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
         visibleInfo.start = normalizeVisibleStart(start, focusItem.templateInfo);
-        if (!isItemVisible(focusItem)) {
-          visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
-        }
+
+        // resize的item不能完整显示时不需要调整
+        // if (!isItemVisible(focusItem)) {
+        //   visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
+        // }
       } else {
         visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
       }
@@ -198,21 +260,31 @@ export const setup = (
         //只有resize引起的slide动画时, 动画时长使用resize设置, 否者使用slideSetting设置
         slideInfo = {
           target: -visibleInfo.start,
-          animObj: doAnim ? {
+        };
+        if (doAnim) {
+          slideInfo.animObj = {
             easing: "",
             onStart: null,
-            speed: slideTask ? props.slideSetting.Speed : null,
-            duration: slideTask ? props.slideSetting.Duration : duration,
+            speed: null,
+            duration,
             onEnd: (animDone) => {
             },
-          } : {
-            //resize无动画时正常slide
-            easing: "",
-            onStart: null,
-            onEnd: null,
-            speed: props.slideSetting.Speed,
-            duration: props.slideSetting.Duration,
-          },
+          }
+        } else {
+          //resize无动画时正常slide
+          if (slideTask) {
+            slideInfo.animObj = slideTask.params?.animObj
+          } else {
+            //默认滚动
+            slideInfo.animObj = {
+              //resize无动画时正常slide
+              easing: "",
+              onStart: null,
+              onEnd: null,
+              speed: props.slideSetting.Speed,
+              duration: props.slideSetting.Duration,
+            }
+          }
         }
       }
       const handler = pageUpdater.update(
@@ -255,21 +327,59 @@ export const setup = (
     }
 
     //处理滚动动画
+    let viewSlid = false;
     if (slideInfo) {
       const target = slideInfo.target;
-      let preLeft = slideDivLeft.value;
-      let preTop = slideDivTop.value;
-      slideDivLeft.value = vertical ? 0 : target;
-      slideDivTop.value = vertical ? target : 0;
-      if (slideInfo.animObj) {
-        animationManager.startSlideAnim(
-          slideDiv.value,
-          vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0],
-          [0, 0],
-          slideInfo.animObj);
-      }
-      _onScroll();
+      viewSlid = executeSlide(target, slideInfo);
     }
+
+    //回调
+    if (existItemResize) {
+      props.onAllItemResizeDone?.();
+    }
+    if (viewSlid || existOnFocusChange) {
+      props.onFocusRectChange?.();
+    }
+  }
+
+  const executeSlide = (target, slideInfo) => {
+    let preLeft = slideDivLeft.value;
+    let preTop = slideDivTop.value;
+    slideDivLeft.value = vertical ? 0 : target;
+    slideDivTop.value = vertical ? target : 0;
+    let viewSlid = preLeft != slideDivLeft.value || preTop != slideDivTop.value;
+    visibleInfo.start = -target;
+    const updater = pageUpdater.update(
+      metroTemplate,
+      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+      Math.min(
+        visibleInfo.startMax +
+        visibleInfo.range +
+        visibleInfo.padding.end -
+        1,
+        visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+      ),
+      focusId,
+      true,
+      permanentItemList
+    );
+    if (slideInfo.animObj) {
+      updater.applyTmp();
+      animationManager.startSlideAnim(
+        slideDiv.value,
+        vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0],
+        [0, 0],
+        {
+          ...slideInfo.animObj,
+          onEnd: () => {
+            updater.apply()
+          }
+        });
+    } else {
+      updater.apply();
+    }
+    _onScroll();
+    return viewSlid
   }
 
   const onMacroEndTaskBreak = (list) => {
@@ -297,6 +407,9 @@ export const setup = (
   }
 
   const _slideTo = (target, animObj) => {
+    if (slideLock) {
+      return
+    };
     macroEndTaskManager.addTask(TaskType.SLIDE, { target: -target, animObj })
   };
 
@@ -395,7 +508,8 @@ export const setup = (
   };
 
   const onItemFocus = (focusItem, rect) => {
-    if (!focusItem) return;
+    //触控模式不触发item的onFocus
+    if (!focusItem || mode.getMode() != FOCUS_MODE) return;
     setItemZIndex(focusItem, innerData.length, true);
     if (isFocus) {
       _itemOnFocusSideEffect(focusItem, rect);
@@ -403,9 +517,24 @@ export const setup = (
       if (!called) {
         callFocusAfterUpdate = true;
       }
+      return called;
     }
+    return false;
   };
 
+  const setFocusByUid = (uid, needSlide = true, doAnim = false, extraSetting) => {
+    if (!uid) { return; }
+    //添加item
+    templateItemAdder.tryAddItemByUid(uid);
+    const item = metroTemplate.getItemByUid(uid);
+    if (!item) {
+      console.warn(TAG, `setFocusByUid failed: uid ${uid} not exist.`);
+      return;
+    }
+
+    setFocusId(item.id, needSlide, doAnim, extraSetting);
+  }
+
   const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
     if (id == focusId) {
       return;
@@ -413,10 +542,9 @@ export const setup = (
     templateItemAdder.tryAddItemById(id);
     let next_focus_item = getItemById(id);
     if (next_focus_item) {
-      preFocusId = focusId;
-      const preFocusItem = getItemById(preFocusId);
       const nextTemplateInfo = next_focus_item.templateInfo;
-      focusId = nextTemplateInfo.id;
+      _changeFocusId(nextTemplateInfo.id);
+      const preFocusItem = getItemById(preFocusId);
       onItemBlur(preFocusItem);
       onItemFocus(next_focus_item, preEdgeRect);
       if (needSlide) {
@@ -557,6 +685,36 @@ export const setup = (
     }
   };
 
+  const slideToDiv = (div, doAnim) => {
+    if (div) {
+      const item_layout = div.jsvGetRelativePosition(toRaw(locateDiv.value));
+      const direction = 1;
+
+      let fakeItem = {
+        templateInfo: {
+          left: item_layout.left,
+          top: item_layout.top,
+          width: item_layout.width,
+          height: item_layout.height,
+          centerYPos: Math.floor(item_layout.top + item_layout.height / 2),
+          centerXPos: Math.floor(item_layout.left + item_layout.width / 2),
+          index: id2Index(focusId),
+        },
+      };
+
+      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction);
+      if (cur_slide != visibleInfo.start) {
+        _slideTo(cur_slide, doAnim ? {
+          easing: "",
+          onStart: null,
+          speed: props.slideSetting.Speed,
+          duration: props.slideSetting.Duration,
+          onEnd: null,
+        } : null);
+      }
+    }
+  }
+
   const refreshData = (force_update) => {
     //由于data不支持reactive, 因此数据的更新只通过provideData
     if (!props.provideData) {
@@ -569,8 +727,7 @@ export const setup = (
     }
     let new_list = toRaw(props.provideData());
     if (focusId >= new_list.length) {
-      focusId = new_list.length - 1;
-      preFocusId = -1;
+      _changeFocusId(new_list.length - 1, false)
     }
     let new_index = 0;
     if (!_force_update) {
@@ -616,8 +773,9 @@ export const setup = (
         dataList,
         props.measures,
         pageRange,
-        _onTemplateAdd,
-        props.name
+        _onTemplateItemAdd,
+        props.name,
+        _onTemplateAddDone
       );
     }
     if (need_update_content) {
@@ -678,21 +836,43 @@ export const setup = (
     return id2Index(focusId);
   }
 
+  const getCurMode = () => {
+    return mode.getMode();
+  }
+
+  const getTemplatePosition = (index) => {
+    return _getTemplatePosition(index);
+  }
+
+  const lockSlide = () => {
+    slideLock = true;
+  }
+
+  const unlockSlide = () => {
+    slideLock = false;
+  }
+
   const exportObject = {
+    lockSlide,
+    unlockSlide,
     lock,
     unlock,
     slideTo,
     setFocusId,
+    setFocusByUid,
     getFocusBlockRef,
     setEnterFocusId,
     setEnterFocusRect,
     slideToItem,
+    slideToDiv,
     refreshData,
     getVisibleItems,
     moveFocus,
     getCustomerDataSize,
     setZIndex,
     getCurrentFocusIndex,
+    getCurMode,
+    getTemplatePosition,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -894,6 +1074,21 @@ export const setup = (
     if (onKeyDownLock) {
       return true;
     }
+    if (mode.getMode() == TOUCH_MODE) {
+      if (mode.duringTouch()) {
+        //touch过程中的按键不处理
+        return true;
+      } else {
+        //切换为focus_mode
+        mode.keyDown();
+        //touch切换为focus的首次按键只显示焦点
+        const focusItem = _getVisibleFocusableItem();
+        _changeFocusId(focusItem.id, false);
+        onItemFocus(focusItem);
+        return true;
+      }
+    }
+
     switch (ev.keyCode) {
       case 37:
         _moveToNext(-1, 0);
@@ -924,7 +1119,24 @@ export const setup = (
     );
   };
 
-  const _onTemplateAdd = (customerData, templateItem, measuresObj) => {
+  const _onTemplateAddDone = () => {
+    //update slideDiv size
+    const lastTemplateInfo = getItemByIndex(
+      metroTemplate.getTailItemIndex()
+    )?.templateInfo;
+    if (lastTemplateInfo) {
+      if (vertical) {
+        touchDivSize.width = props.width;
+        touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+      } else {
+        touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+        touchDivSize.height = props.height;
+      }
+      resetDragRect(touchDivSize.width, touchDivSize.height);
+    }
+  }
+
+  const _onTemplateItemAdd = (customerData, templateItem, measuresObj) => {
     let focusZIndex = -1,
       normalZIndex = -1;
     if (
@@ -950,10 +1162,6 @@ export const setup = (
       itemSlide: measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
     };
 
-    if (props.itemConfig) {
-      const c = props.itemConfig(customerData);
-    }
-
     const renderStyle = reactive({
       left: templateItem.left,
       top: templateItem.top,
@@ -987,6 +1195,7 @@ export const setup = (
         widgetHandler: exportObject,
       }
     );
+    item.enableTap = measuresObj.enableTap ?? false;
 
     innerData.push(item);
     if (item.itemConfig.permanent) {
@@ -1005,11 +1214,11 @@ export const setup = (
         direction: edgeRect?.direction?.description,
         element: toRaw(item.rootDiv),
       };
-      _bubbleCustomerEvent(event);
+      _bubbleCustomEvent(event);
     }
   };
 
-  const focusBlockOnCustomerEvent = (ev) => {
+  const focusBlockOnCustomEvent = (ev) => {
     if (ev.type === "focusRect") {
       if (childSlideEventLock) {
         return true;
@@ -1083,10 +1292,17 @@ export const setup = (
     return false;
   };
 
-  const _bubbleCustomerEvent = (event) => {
+  const _changeFocusId = (id, cache_pre = true) => {
+    preFocusId = cache_pre ? focusId : -1;
+    focusId = id;
+    currentFocusIndex.value = id2Index(id);
+    macroEndTaskManager.addTask(TaskType.ON_FOCUS_CHANGE);
+  }
+
+  const _bubbleCustomEvent = (event) => {
     if (props.sendFocusRectEvent && event) {
       event.ownerNode = exportObject;
-      toRaw(focusNode.value)?.bubbleCustomerEvent(event);
+      toRaw(focusNode.value)?.bubbleCustomEvent(event);
     }
   };
 
@@ -1129,9 +1345,8 @@ export const setup = (
       props.focusMoveType
     );
     if (next_focus_item !== null) {
-      preFocusId = focusId;
+      _changeFocusId(next_focus_item.id);
       const preFocusItem = getItemById(preFocusId);
-      focusId = next_focus_item.id;
 
       templateItemAdder.tryAddItem(next_focus_item.templateInfo, 1);
 
@@ -1243,7 +1458,11 @@ export const setup = (
         };
       }
 
-      props.onEdge?.({ direction: edge, rect: rect });
+      props.onEdge?.({
+        direction: edge,
+        rect: rect,
+        childEdgeInfo: item_edge_rect
+      });
       innerData[id2Index(focusId)]?.onWidgetEdge({
         direction: edge,
       });
@@ -1431,7 +1650,6 @@ export const setup = (
 
   const focusBlockOnFocus = (params) => {
     isFocus = true;
-    preFocusId = -1;
     if (innerData.length === 0) {
       console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
       return;
@@ -1445,12 +1663,11 @@ export const setup = (
     focus_id = _ifValidEnterRect(enterFocusRect)
       ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
       : focus_id;
-
     preEdgeRect = enterFocusRect;
-    focusId = focus_id;
+    _changeFocusId(focus_id, false);
     enterFocusId = -1;
     enterFocusRect = null;
-    onItemFocus(getItemById(focusId), preEdgeRect);
+    alreadyCallItemFocus = onItemFocus(getItemById(focusId), preEdgeRect);
     props.onFocus?.();
   };
 
@@ -1477,6 +1694,20 @@ export const setup = (
     }
   };
 
+  const _getVisibleFocusableItem = () => {
+    const focusItem = getItemById(focusId);
+    if (isItemVisible(focusItem)) {
+      return focusItem;
+    } else {
+      //遍历renderList, 找到第一个可见的 focusable item
+      for (let item of renderData.value) {
+        if (item.templateInfo.focusable && isItemVisible(item)) {
+          return item;
+        }
+      }
+    }
+  }
+
   const _onScroll = () => {
     if (props.onScroll) {
       const lastTemplateInfo = getItemByIndex(
@@ -1494,6 +1725,214 @@ export const setup = (
     }
   };
 
+  //touch setting
+  let actorController = null;
+  const touchLoadItemRect = visibleInfo.range;
+  const reachAnchorGroup = 2;
+  const wallConditionGroup = 1;
+
+  const getVisibleStart = (moveInfo) => {
+    if (vertical) {
+      return -(slideDivTop.value + Math.round(moveInfo.yPos));
+    } else {
+      return -(slideDivLeft.value + Math.round(moveInfo.xPos));
+    }
+  }
+
+  const mergeTouchSlideToSlideDiv = () => {
+    if (vertical) {
+      slideDivTop.value = -visibleInfo.start;
+    } else {
+      slideDivLeft.value = -visibleInfo.start;
+    }
+
+    const walls = getTouchWall();
+    actorController.run([
+      actorController.state().removeConditionByGroup(wallConditionGroup),
+      actorController
+        .condition(wallConditionGroup, true)
+        .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
+        .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
+      actorController
+        .action()
+        .teleportTo(0, 0)]);
+  }
+
+  const onTouchDown = (data) => {
+    mode.touchStart();
+    mode.flingEnd();
+
+    //blur item
+    onItemBlur(getItemById(focusId));
+
+    visibleInfo.start = getVisibleStart(data);
+    templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
+
+    const updater = pageUpdater.update(
+      metroTemplate,
+      visibleInfo.startWithPadding - visibleInfo.range,
+      visibleInfo.endWithPadding + visibleInfo.range,
+      0,
+      false,
+      permanentItemList
+    );
+    updater.apply();
+
+    //创建锚点
+    const anchorArea = 2 * Forge.sRenderBridge.GetScreenInfo().designedWidth;
+    let anchorPosList = [];
+    let anchorSpacing = visibleInfo.range * 2 / 3;
+    let anchorPos = anchorSpacing;
+    while (anchorPos < anchorArea) {
+      anchorPosList.push(-visibleInfo.start + anchorPos);
+      anchorPosList.push(-visibleInfo.start - visibleInfo.range - anchorPos + 1);
+      anchorPos += anchorSpacing;
+    }
+    const reachConditionList = anchorPosList.map(pos => {
+      actorController
+        .condition(reachAnchorGroup)
+        .reachPosition(pos, undefined)
+        .then([(data) => { updateRenderItems(true, true) }])
+    })
+    reachConditionList.unshift(
+      actorController.state().removeConditionByGroup(reachAnchorGroup),
+    )
+    actorController.run(reachConditionList);
+  }
+
+  const onTouchRelease = () => {
+    if (mode.getTouchState() == TouchState.TAP) {
+      //只点击, 没有移动或者fling
+      mergeTouchSlideToSlideDiv();
+      updateRenderItems(false, false);
+      mode.touchEnd();
+    }
+  }
+
+  const onDragStart = (data) => {
+    mode.dragStart()
+    visibleInfo.start = getVisibleStart(data);
+  }
+
+  const onDragEnd = (data) => {
+    visibleInfo.start = getVisibleStart(data);
+
+    actorController.run([
+      actorController.state().removeConditionByGroup(reachAnchorGroup),
+    ]);
+    mergeTouchSlideToSlideDiv();
+    updateRenderItems(false, false);
+    mode.touchEnd()
+  }
+
+  const onFlingStart = (data) => {
+    mode.flingStart();
+    visibleInfo.start = getVisibleStart(data);
+    updateRenderItems(true, true);
+  }
+
+  const onFlingProgress = (data) => {
+    visibleInfo.start = getVisibleStart(data);
+    updateRenderItems(true, true);
+  }
+
+  const onFlingEnd = (data) => {
+    visibleInfo.start = getVisibleStart(data);
+    //记录拖拽的距离
+    if (mode.duringFling()) {
+      mergeTouchSlideToSlideDiv();
+      updateRenderItems(false, false);
+      mode.flingEnd();
+      mode.touchEnd();
+    }
+  }
+
+  const getTouchWall = () => {
+    const boxSize = metroTemplate.getBoundingBoxSize();
+    let wall = {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    }
+    if (vertical) {
+      wall.top = -boxSize.height + props.height - slideDivTop.value;
+      wall.bottom = -slideDivTop.value;
+    } else {
+      wall.left = -boxSize.width + props.width - slideDivLeft.value;
+      wall.right = -slideDivLeft.value;
+    }
+    return wall;
+  }
+
+  const updateRenderItems = (applyTmp, expand) => {
+    templateItemAdder.tryAddItemByPosition(visibleInfo.start + visibleInfo.range);
+    const updater = pageUpdater.update(
+      metroTemplate,
+      expand ? visibleInfo.start - visibleInfo.range : visibleInfo.startWithPadding,
+      expand ? visibleInfo.start + 2 * visibleInfo.range : visibleInfo.endWithPadding,
+      0,
+      true,
+      permanentItemList
+    );
+    applyTmp ? updater.applyTmp() : updater.apply();
+  }
+
+  const resetDragRect = () => {
+    if (actorController != null) {
+      const walls = getTouchWall();
+      //更新wall设置
+      actorController.run([
+        actorController.state().removeConditionByGroup(wallConditionGroup),
+        actorController
+          .condition(wallConditionGroup, true)
+          .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
+          .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
+      ]);
+    }
+  }
+
+  const initTouch = () => {
+    actorController = new ActorControl();
+    const divView = touchDiv.value.jsvGetProxyView();
+    actorController.bindForgeView(divView, true);
+    divView.DragEnables?.(4 | 0x08 | 0x10); // 只激活drag
+
+    const walls = getTouchWall();
+    //注册回调
+    actorController.run([
+      actorController
+        .condition(undefined, true)
+        .onTouchDown()
+        .then([onTouchDown]),
+      actorController
+        .condition(undefined, true)
+        .onDragStart()
+        .then([onDragStart]),
+      actorController
+        .condition(undefined, true)
+        .onDragEnd()
+        .then([onDragEnd]),
+      actorController
+        .condition(undefined, true)
+        .onFlingStart()
+        .then([onFlingStart]),
+      actorController
+        .condition(undefined, true)
+        .onFlingProgress()
+        .then([onFlingProgress]),
+      actorController
+        .condition(undefined, true)
+        .onFlingEnd()
+        .then([onFlingEnd]),
+
+      actorController
+        .condition(wallConditionGroup, true)
+        .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
+        .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
+    ]);
+  }
+
   //init
   pageUpdater = new PageUpdater(_updatePage);
   visibleInfo.range = vertical
@@ -1509,16 +1948,14 @@ export const setup = (
     dataList = toRaw(props.data);
   }
 
-  window.metroTemplate = metroTemplate;
-  window.innerData = innerData;
-
   templateItemAdder = new TemplateItemAdder(
     metroTemplate,
     dataList,
     props.measures,
     pageRange,
-    _onTemplateAdd,
-    props.name
+    _onTemplateItemAdd,
+    props.name,
+    _onTemplateAddDone
   );
   if (props.onScroll) {
     templateItemAdder.tryAddItemByIndex(dataList.length - 1);
@@ -1553,11 +1990,12 @@ export const setup = (
   updater.apply();
 
   onMounted(() => {
+    _changeFocusId(focusId, false);
     mounted = true;
     if (visibleInfo.start) {
       _slideTo(visibleInfo.start, null);
     }
-    if (isFocus) {
+    if (isFocus && !alreadyCallItemFocus) {
       onItemFocus(getItemById(focusId), preEdgeRect);
     }
 
@@ -1566,6 +2004,9 @@ export const setup = (
         itemRender.value = true;
       });
     }
+    if (props.enableTouch) {
+      initTouch();
+    }
   });
 
   onUpdated(() => { });
@@ -1579,9 +2020,12 @@ export const setup = (
     focusBlockOnFocus,
     focusBlockOnBlur,
     focusBlockOnKeyDown,
-    focusBlockOnCustomerEvent,
+    focusBlockOnCustomEvent,
     _onFocusableItemEdge,
     exportObject,
     setZIndex,
+    onTouchDown,
+    onTouchRelease,
+    currentFocusIndex,
   }
-}
+}