@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -17,7 +17,7 @@
  *      height {int} (必选)控件的高
  *      layoutType {String} 布局的类型, 目前支持 "relative"(默认)|"absolute", relative为自动布局, 
                             absolute为依据measures中给的top, left布局
- *
+ *      
  *      name {string} 用于设置焦点的名称
  *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
  *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL
@@ -85,6 +85,7 @@
  *      flingPageWidth {}
  *      flingPageEdge {}
  *      disableClip {boolean} 取消显示范围的clipView
+ 
  *    methods:
         getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
 
@@ -131,10 +132,19 @@
           @params {int} type 锁的类型, 通过|来实现多个类型的复合
                               SLIDE: 滚动动画锁
                               CHILD_SLIDE_EVENT: 子组件发送的滚动事件锁
+                              ON_KEY_DOWN: 按键锁
           @return {function} 解锁的函数
         unlock
           @description 解锁
           @params {int} type 参考lock的type参数
+        moveFocus
+          @description 移动焦点
+          @params {int | string | EdgeDirection} 可传三种类型的值: 
+                                                  1. 方向键的数值 37|38|39|40, 
+                                                  2. 字符串 left|top|right|bottom,
+                                                  3. EdgeDirection
+        getCustomerDataSize
+          @description 获取用户数据长度
   slots:
     renderItem: 该slot用于描画每个单元格
     background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
@@ -153,6 +163,11 @@
                                      获取当前焦点信息，id 为在可获得焦点元素列表中的索引，index 为在所有元素列表中的索引
                   slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
                            滚动到指定位置，注意这个位置是 item 的布局坐标，另外当某些item需要接管滚动时，itemConfig中takeOverSlide要为true。
+                  updateItemSize: {(index: number, newSize: {width: number, height: number}, anchor: number, animInfo: {duration: number, onEnd: Function}) => void} 更新item的尺寸, 目前仅在list模式下可用.
+                          params:
+                            index: 更新item的index,
+                            anchor: item大小变化时不动点的位置, 值为0-1
+
                 }
  *    onItemEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
  *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册 item 的回调，回调函数有
@@ -183,101 +198,14 @@
 -->
 
 <script setup>
-/* eslint-disable */
-import {
-  ref,
-  reactive,
-  shallowRef,
-  onMounted,
-  onBeforeUnmount,
-  onUpdated,
-  toRaw,
-  nextTick,
-} from "vue";
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import { TemplateParser, TemplateItemAdder } from "../TemplateParser";
-import { PageUpdater } from "./PageUpdater";
-import { SingleRangeModel } from "../RangeModel";
-import Dispatcher from "./Dispatcher";
-import { METRO_WIDGET } from "./Const";
+import { ref, shallowRef, computed } from "vue";
+import { setup, RENDER_ITEM_BREAK_KEY } from "./MetroWidgetSetup";
 import {
-  EdgeDirection,
   VERTICAL,
   HORIZONTAL,
-  getPositionRelativeToView,
   SlideSetting,
   SeamlessSlide,
 } from "../WidgetCommon";
-import { bindFunctions } from "./ToolFunctions";
-
-const _getPadding = function (padding) {
-  return Object.assign(
-    {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-    },
-    padding
-  );
-};
-
-const _getTemplateParser = function (
-  width,
-  height,
-  direction,
-  padding,
-  support_history_path,
-  layout_type
-) {
-  let fixed_padding = _getPadding(padding);
-  let page_size;
-  let line_max;
-  if (direction === VERTICAL) {
-    line_max = width - fixed_padding.left - fixed_padding.right;
-    page_size = height - fixed_padding.top - fixed_padding.bottom;
-  } else {
-    line_max = height - fixed_padding.top - fixed_padding.bottom;
-    page_size = width - fixed_padding.left - fixed_padding.right;
-  }
-  return new TemplateParser(
-    direction,
-    line_max,
-    page_size,
-    layout_type,
-    support_history_path
-  );
-};
-
-// direction key 是 vertical 的值
-const directionFreeKeyMap = {
-  pos: {
-    true: "yPos",
-    false: "xPos",
-  },
-  size: {
-    true: "height",
-    false: "width",
-  },
-  neighbor: {
-    true: {
-      1: "bottom",
-      "-1": "top",
-    },
-    false: {
-      1: "bottom",
-      "-1": "top",
-    },
-  },
-  margin: {
-    true: "marginBottom",
-    false: "marginRight",
-  },
-  center: {
-    true: "centerYPos",
-    false: "centerXPos",
-  },
-};
 
 const props = defineProps({
   padding: {
@@ -416,1525 +344,46 @@ const props = defineProps({
   },
 });
 
-let dataUpdateToken = ref(0);
-let templateParser = null;
-let innerData = [];
-let dataList = [];
-let pageUpdater = null;
-let enterFocusId = -1;
-let enterFocusRect = null;
-let focusId = 0;
-let preFocusId = -1;
-let preEdgeRect = null;
-let isFocus = false;
-let touchContainerW = ref(0);
-let touchContainerH = ref(0);
-let touchListener = null;
-let innerPadding = null;
-let slidePile = null;
-let dragDirection = Forge.DragSetting.DIRECTION_HORIZONTAL;
-let vertical = props.direction == VERTICAL;
-let preAnchorItemIndex = -1;
-let templateItemAdder = null;
-let itemRender = ref(!props.enableItemRenderBreak);
-let permanentItemList = [];
-let preUpdateVisibleStart = 0;
-let mounted = false;
-let focusNode = shallowRef(null);
-let pageRange = vertical ? props.height : props.width;
-
-let slideLock = false;
-let childSlideEventLock = false;
-
-let visibleInfo = {
-  _start: 0,
-  range: 0,
-  padding: {
-    start: 0,
-    end: 0,
-  },
-  _startMax: 0,
-
-  set start(value) {
-    this._start = value;
-    this._startMax = Math.max(this._start, this._startMax);
-  },
-
-  get start() {
-    return this._start;
-  },
-
-  get end() {
-    return this._start + this.range - 1;
-  },
-
-  get startMax() {
-    return this._startMax;
-  },
-
-  get startWithPadding() {
-    return this._start - this.padding.start;
-  },
-
-  get endWithPadding() {
-    return this._start + this.range + this.padding.end - 1;
-  },
-};
-
-let locateDiv = shallowRef(null);
-let slideDiv = shallowRef(null);
-let renderData = shallowRef([]);
-let slideDivLeft = ref(0);
-let slideDivTop = ref(0);
-let callFocusAfterUpdate = false;
-let renderBreakKey = props.enableItemRenderBreak
-  ? "__QcodeJsviewMetroWidgetSlot"
-  : "";
-let pageUpdateToken = ref(0);
-
-//methods
-const _onFocusChange = (id) => {
-  props.onFocusChange?.(id);
-};
-
-const _getCurrentId = () => {
-  return {
-    id: focusId,
-    index: templateParser.IdToIndex(focusId),
-  };
-};
-
-const _getPosition = (index) => {
-  let item = templateParser.GetItem(index);
-  let x_offset = props.direction === VERTICAL ? 0 : -visibleInfo.start;
-  let y_offset = props.direction === VERTICAL ? -visibleInfo.start : 0;
-  return {
-    left: item.xPos + x_offset,
-    top: item.yPos + y_offset,
-    width: item.width,
-    height: item.height,
-  };
-};
-
-const _getTemplatePosition = (index) => {
-  let item = templateParser.GetItem(index);
-  return {
-    left: item.xPos,
-    top: item.yPos,
-    width: item.width,
-    height: item.height,
-  };
-};
-
-const _dispatchEvent = (event) => {
-  switch (event.type) {
-    case Dispatcher.Type.setEnterFocusId:
-      setEnterFocusId(event.data);
-      break;
-    case Dispatcher.Type.setEnterFocusRect:
-      setEnterFocusRect(event.data);
-      break;
-    case Dispatcher.Type.updateItem:
-      break;
-    case Dispatcher.Type.slideToItem:
-      if (event.data) {
-        slideToItem(event.data?.id, event.data?.doAnim);
-      }
-      break;
-    case Dispatcher.Type.setFocusId:
-      setFocusId(event.data?.id, event.data?.needSlide, event.data?.doAnim);
-      break;
-    default:
-      break;
-  }
-};
-
-const onItemClick = (index) => {
-  if (isFocus && innerData[index]?.callbacks.callable("onClick")) {
-    innerData[index].callbacks.onClick();
-  }
-};
-
-const onItemBlur = (index) => {
-  if (isFocus && innerData[index]?.callbacks.callable("onBlur")) {
-    innerData[index].callbacks.onBlur();
-  }
-};
-
-const onItemFocus = (index, rect) => {
-  if (isFocus) {
-    if (innerData[index]) {
-      _itemOnFocusSideEffect(innerData[index], rect);
-      if (innerData[index].callbacks.callable("onFocus")) {
-        innerData[index].callbacks.onFocus(rect);
-      } else {
-        callFocusAfterUpdate = true;
-      }
-    }
-  }
-};
-
-const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
-  if (id == focusId) {
-    return;
-  }
-  templateItemAdder.tryAddItemById(id);
-  let next_focus_item = templateParser.GetItemById(id);
-  if (next_focus_item) {
-    if (needSlide) {
-      slideToItem(templateParser.IdToIndex(id), doAnim);
-    }
-    let unlock = null;
-    if (extraSetting) {
-      if (extraSetting.lockChildSlideEvent) {
-        unlock = lock(METRO_WIDGET.CHILD_SLIDE_EVENT);
-      }
-    }
-
-    const cur_focus_item = templateParser.GetItemById(focusId);
-    preFocusId = focusId;
-    focusId = next_focus_item.id;
-
-    let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
-    let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
-    preEdgeRect = {
-      direction: null,
-      rect: {
-        x: x_off_set,
-        y: y_off_set,
-        width: cur_focus_item.width,
-        height: cur_focus_item.height,
-      },
-    };
-    _updateBlurItem();
-    _updateFocusItem();
-    onItemBlur(templateParser.IdToIndex(preFocusId));
-    onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
-    unlock?.();
-  }
-};
-
-const lock = (type) => {
-  const unlocker = [];
-  if (type & METRO_WIDGET.SLIDE) {
-    slideLock = true;
-    unlocker.push(() => {
-      slideLock = false;
-    });
-  }
-  if (type & METRO_WIDGET.CHILD_SLIDE_EVENT) {
-    childSlideEventLock = true;
-    unlocker.push(() => {
-      childSlideEventLock = false;
-    });
-  }
-  return () => {
-    unlocker.map((item) => {
-      item();
-    });
-  };
-};
-
-const unlock = (type) => {
-  if (type & METRO_WIDGET.SLIDE) {
-    slideLock = true;
-  }
-  if (type & METRO_WIDGET.CHILD_SLIDE_EVENT) {
-    childSlideEventLock = true;
-  }
-};
-
-const getFocusBlockRef = () => {
-  return toRaw(focusNode.value);
-};
-
-const setEnterFocusId = (id) => {
-  templateItemAdder.tryAddItemById(id);
-  enterFocusId = id;
-};
-
-const setEnterFocusRect = (rect) => {
-  enterFocusRect = rect;
-};
-
-const slideTo = (position, doAnim) => {
-  templateItemAdder.tryAddItemByPosition(position);
-  if (
-    typeof position !== "undefined" &&
-    position != null &&
-    visibleInfo.start !== position
-  ) {
-    visibleInfo.start = position;
-    let animObj = null;
-    if (doAnim) {
-      animObj = {
-        easing: props.slideSetting.Easing,
-        onstart: null,
-        speed: props.slideSetting.Speed,
-        onend: _onSlideEnd,
-      };
-    }
-    _slideTo(visibleInfo.start, animObj);
-
-    pageUpdater.update(
-      templateParser,
-      visibleInfo.startWithPadding,
-      visibleInfo.endWithPadding,
-      focusId,
-      false,
-      permanentItemList
-    );
-    if (doAnim) {
-      pageUpdater.applyTmp();
-    } else {
-      pageUpdater.apply();
-    }
-  }
-};
-
-const slideToItem = (index, doAnim) => {
-  templateItemAdder.tryAddItemByIndex(index);
-  const targetItem = templateParser.GetItem(index);
-  if (targetItem) {
-    const direction = index - preAnchorItemIndex > 0 ? 1 : -1;
-    const visible_start = _calculateVisibleStart(targetItem, direction);
-    slideTo(visible_start, doAnim);
-  }
-};
-
-const refreshData = (force_update) => {
-  //由于data不支持reactive, 因此数据的更新只通过provideData
-  if (!props.provideData) {
-    console.error("refreshData: provideData is null.");
-    return;
-  }
-  let _force_update = force_update;
-  let template_list = templateParser.GetTemplate().List;
-  if (!template_list || template_list.length === 0) {
-    _force_update = true;
-  }
-  let new_list = toRaw(props.provideData());
-  let needSlide = false;
-  if (focusId >= new_list.length) {
-    focusId = 0;
-    preFocusId = -1;
-    if (visibleInfo.start !== 0) {
-      visibleInfo.start = 0;
-      needSlide = true;
-    }
-  }
-  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 < template_list.length; ++j) {
-        if (new_list[new_index] === template_list[j].data) {
-          already_add = true;
-          break;
-        }
-      }
-      if (!already_add) {
-        break;
-      }
-    }
-  }
-  let need_update_content = false;
-  if (!_force_update && new_index === template_list.length) {
-    //原始数据都在
-    if (new_index !== new_list.length) {
-      //增加数据
-      need_update_content = true;
-      templateItemAdder.updateData(new_list);
-    } else {
-      //数据没变
-    }
-  } else {
-    pageUpdateToken.value++;
-    //数据更改
-    permanentItemList = [];
-    need_update_content = true;
-    templateParser = _getTemplateParser(
-      props.width,
-      props.height,
-      props.direction,
-      props.padding,
-      props.supportHistoryPath,
-      props.layoutType
-    );
-    innerData = [];
-    dataList = new_list;
-    templateItemAdder = new TemplateItemAdder(
-      templateParser,
-      dataList,
-      props.measures,
-      pageRange,
-      _onTemplateAdd,
-      props.name
-    );
-  }
-  if (need_update_content) {
-    if (props.onScroll) {
-      templateItemAdder.tryAddItemByIndex(dataList.length - 1);
-    } else {
-      templateItemAdder.tryAddItemById(focusId);
-    }
-    let template_list = templateParser.GetTemplate().List;
-    let last_item = template_list[template_list.length - 1];
-    touchListener = _getTouchListener();
-    innerPadding = _getPadding(props.padding);
-    touchContainerW.value =
-      props.direction === VERTICAL
-        ? props.width
-        : last_item
-        ? last_item.xPos + last_item.width
-        : 0;
-    touchContainerH.value =
-      props.direction === VERTICAL
-        ? last_item
-          ? last_item.yPos + last_item.height
-          : 0
-        : props.height;
-    slidePile = new Forge.RectArea(
-      0,
-      0,
-      props.width - innerPadding.left - innerPadding.right,
-      props.height - innerPadding.top - innerPadding.bottom
-    );
-    dragDirection =
-      props.direction === VERTICAL
-        ? Forge.DragSetting.DIRECTION_VERTICAL
-        : Forge.DragSetting.DIRECTION_HORIZONTAL;
-  }
-  pageUpdater.update(
-    templateParser,
-    visibleInfo.startWithPadding,
-    visibleInfo.endWithPadding,
-    focusId,
-    false,
-    permanentItemList
-  );
-  dataUpdateToken.value++;
-  pageUpdater.apply();
-  _updateFocusItem();
-  onItemFocus(templateParser.IdToIndex(focusId), null);
-  if (needSlide) {
-    _slideTo(visibleInfo.start, null);
-  } else if (need_update_content) {
-    _onScroll();
-  }
-};
-
-const getVisibleItems = () => {
-  const info = templateParser.GetVisibleItemList(
-    visibleInfo.startWithPadding,
-    visibleInfo.endWithPadding,
-    focusId,
-    false,
-    null
-  );
-  return {
-    start: info.visibleStart,
-    end: info.visibleEnd,
-    dataList: dataList.slice(info.visibleStart, info.visibleEnd + 1),
-  };
-};
-
-const exportObject = {
-  lock,
-  unlock,
-  slideTo,
-  setFocusId,
-  getFocusBlockRef,
-  setEnterFocusId,
-  setEnterFocusRect,
-  slideToItem,
-  refreshData,
-  _dispatchEvent,
-  getVisibleItems,
-};
-
-const _calculateNearestItemByRect = (visible_range, enter_rect_info) => {
-  let edge_direction = enter_rect_info.direction;
-  let rect = enter_rect_info.rect;
-  var direction = "";
-  var point = { x: 0, y: 0 };
-  switch (edge_direction) {
-    case EdgeDirection.left:
-      direction = "left";
-      point.x = rect.x;
-      point.y = rect.y + rect.height / 4;
-      break;
-    case EdgeDirection.right:
-      direction = "right";
-      point.x = rect.x + rect.width;
-      point.y = rect.y + rect.height / 4;
-      break;
-    case EdgeDirection.top:
-      direction = "up";
-      point.x = rect.x + rect.width / 4;
-      point.y = rect.y;
-      break;
-    case EdgeDirection.bottom:
-      direction = "down";
-      point.x = rect.x + rect.width / 4;
-      point.y = rect.y + rect.height;
-      break;
-    default:
-      break;
-  }
-
-  var src_x_range = new SingleRangeModel(point.x, point.x);
-  var src_y_range = new SingleRangeModel(point.y, point.y);
-
-  var min_distance_item = null;
-  var min_distance = -1;
-  var min_direction_weighted = 0;
-  var distance = 0;
-  var direction_weighted = 0; // 根据进入方向决定的权值，用于保证
-
-  let key_pos = props.direction === VERTICAL ? "yPos" : "xPos";
-  let key_width = props.direction === VERTICAL ? "height" : "width";
-  for (let index = visible_range.start; index <= visible_range.end; index++) {
-    let item = templateParser.GetItem(index);
-    if (!item.focusable) continue;
-    let full_show =
-      item[key_pos] >= visibleInfo.start &&
-      item[key_pos] + item[key_width] - 1 <= visibleInfo.end;
-    if (full_show) {
-      let x_pos =
-        props.direction === VERTICAL
-          ? item.xPos
-          : item.xPos - visibleInfo.start;
-      let y_pos =
-        props.direction === VERTICAL
-          ? item.yPos - visibleInfo.start
-          : item.yPos;
-      var target_x_range = new SingleRangeModel(x_pos, x_pos + item.width - 1);
-      var target_y_range = new SingleRangeModel(y_pos, y_pos + item.height - 1);
-      switch (direction) {
-        case "left":
-          if (point.x < x_pos + item.width - 1) {
-            // 这个点在item左侧，不可能左移到item
-            continue;
-          }
-          if (point.y < y_pos) {
-            //1.该点在其上，计算point和item右上角的距离
-            distance =
-              Math.pow(point.x - (x_pos + item.width - 1), 2) +
-              Math.pow(y_pos - point.y, 2);
-          } else if (src_y_range.IsInterAct(target_y_range)) {
-            //2.该点在其中，计算point和item右边框的垂直距离
-            distance = Math.pow(point.x - (x_pos + item.width - 1), 2);
-          } else if (point.y > y_pos + item.height - 1) {
-            //3.该点在其下，计算point到item右下角的距离
-            distance =
-              Math.pow(point.x - (x_pos + item.width - 1), 2) +
-              Math.pow(point.y - (y_pos + item.height - 1), 2);
-          }
-          // point与item右边框的距离作为权值
-          direction_weighted = Math.abs(point.x - (x_pos + item.width - 1));
-          break;
-        case "right":
-          if (point.x > x_pos) {
-            // 这个点在item右侧，不可能右移到item
-            continue;
-          }
-          if (point.y < y_pos) {
-            //1.该点在其上， 计算point和item左上角的距离
-            distance =
-              Math.pow(x_pos - point.x, 2) + Math.pow(y_pos - point.y, 2);
-          } else if (src_y_range.IsInterAct(target_y_range)) {
-            //2.该点在其中，计算point和item左边框的垂直距离
-            distance = Math.pow(x_pos - point.x, 2);
-            //(x2-x1)^2
-          } else if (point.y > y_pos + item.height - 1) {
-            //3.该点在其下，计算point和item左下角的距离
-            distance =
-              Math.pow(x_pos - point.x, 2) +
-              Math.pow(point.y - (y_pos + item.height - 1), 2);
-          }
-          // point与item左边框的距离作为权值
-          direction_weighted = Math.abs(point.x - x_pos);
-          break;
-        case "up":
-          if (point.y < y_pos + item.height - 1) {
-            // 这个点在item上侧，不可能上移到item
-            continue;
-          }
-          if (point.x < x_pos) {
-            //1.该点在其前，计算point和item右下角的距离
-            distance =
-              Math.pow(point.x - x_pos, 2) +
-              Math.pow(point.y - (y_pos + item.height - 1), 2);
-          } else if (src_x_range.IsInterAct(target_x_range)) {
-            //2.该点在其中，计算point和item下边框的垂直距离
-            distance = Math.pow(point.y - (y_pos + item.height - 1), 2);
-          } else if (point.x > x_pos + item.width - 1) {
-            //3.该点在其后，计算point和item左下角的距离
-            distance =
-              Math.pow(point.x - (x_pos + item.width - 1), 2) +
-              Math.pow(point.y - (y_pos + item.height - 1), 2);
-          }
-          // point与item下边框的距离作为权值
-          direction_weighted = Math.abs(point.y - (y_pos + item.height - 1));
-          break;
-        case "down":
-          if (point.y > y_pos) {
-            // 这个点在item下侧，不可能下移到item
-            continue;
-          }
-          if (point.x < x_pos) {
-            //1.该点在其前，计算point和item右上角的距离
-            distance =
-              Math.pow(point.x - x_pos, 2) + Math.pow(y_pos - point.y, 2);
-          } else if (src_x_range.IsInterAct(target_x_range)) {
-            //2.该点在其中，计算point和item上边框的垂直距离
-            distance = Math.pow(y_pos - point.y, 2);
-          } else if (point.x > x_pos + item.width - 1) {
-            //3.该点在其后，计算point和item左上角的距离
-            distance =
-              Math.pow(point.x - (x_pos + item.width - 1), 2) +
-              Math.pow(y_pos - point.y, 2);
-          }
-          // point与item上边框的距离作为权值
-          direction_weighted = Math.abs(point.y - y_pos);
-          break;
-        default:
-          console.log("direction is error:" + direction);
-          break;
-      }
-      if (min_distance < 0) {
-        // 设置首个找到的项目
-        min_distance = distance;
-        min_direction_weighted = direction_weighted;
-        min_distance_item = item;
-      } else {
-        if (
-          min_direction_weighted > direction_weighted ||
-          (min_direction_weighted === direction_weighted &&
-            min_distance > distance)
-        ) {
-          // 先进行权值比较，在权值相等时，再比较距离
-          min_distance = distance;
-          min_direction_weighted = direction_weighted;
-          min_distance_item = item;
-        }
-      }
-    }
-  }
-
-  if (min_distance_item) {
-    return min_distance_item.id;
-  } else {
-    return 0;
-  }
-};
-
-const onKeyDown = (ev) => {
-  if (innerData.length == 0) {
-    const edgeDirectionMap = {
-      37: EdgeDirection.left,
-      38: EdgeDirection.top,
-      39: EdgeDirection.right,
-      40: EdgeDirection.bottom,
-    };
-    if (typeof edgeDirectionMap[ev.keyCode] !== "undefined") {
-      props.onEdge?.({
-        direction: edgeDirectionMap[ev.keyCode],
-        rect: {
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0,
-        },
-      });
-      return true;
-    }
-    return false;
-  }
-  let horizontal_direction = 0;
-  let vertical_direction = 0;
-  switch (ev.keyCode) {
-    case 37:
-      horizontal_direction = -1;
-      _moveToNext(horizontal_direction, vertical_direction);
-      break;
-    case 38:
-      vertical_direction = -1;
-      _moveToNext(horizontal_direction, vertical_direction);
-      break;
-    case 39:
-      horizontal_direction = 1;
-      _moveToNext(horizontal_direction, vertical_direction);
-      break;
-    case 40:
-      vertical_direction = 1;
-      _moveToNext(horizontal_direction, vertical_direction);
-      break;
-    case 13:
-      onItemClick(templateParser.IdToIndex(focusId));
-      break;
-    default:
-      //只接受上下左右确定键
-      return false;
-  }
-  return true;
-};
-
-const _slideTo = (target, animObj) => {
-  if (props.direction === HORIZONTAL) {
-    _updatePosition(-target, 0, animObj);
-  } else {
-    _updatePosition(0, -target, animObj);
-  }
-};
-
-const _onTemplateAdd = (item) => {
-  let obj = {
-    data: item,
-    index: innerData.length,
-    controller: reactive({
-      zIndex: item.normalZIndex >= 0 ? item.normalZIndex : 0,
-    }),
-    mounted: false,
-    itemDivRef: null,
-    touchInited: false,
-    refCallback(el) {
-      if (el == null) {
-        this.touchInited = false;
-        this.customerCallback = {};
-      }
-      this.itemDivRef = el;
-    },
-    slotMounted: ref(false),
-    slotDivRef(el) {
-      if (!this.slotMounted.value && el) {
-        this.slotMounted.value = true;
-        if (callFocusAfterUpdate && this.data.id === focusId) {
-          nextTick(() => {
-            onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
-          });
-          callFocusAfterUpdate = false;
-        }
-      } else if (!el && this.slotMounted.value) {
-        this.slotMounted.value = false;
-      }
-    },
-    customerCallback: {},
-    register: {
-      register(name, func) {
-        this.customerCallback[name] = func;
-      },
-      unregister(name) {
-        delete this.customerCallback[name];
-      },
-    },
-    callbacks: {
-      callable(name) {
-        return this.slotMounted.value && this.customerCallback[name];
-      },
-      onFocus(preEdge) {
-        this.customerCallback.onFocus?.(preEdge);
-      },
-      onBlur() {
-        this.customerCallback.onBlur?.();
-      },
-      onClick() {
-        this.customerCallback.onClick?.();
-      },
-      onWidgetEdge(rect) {
-        this.customerCallback.onWidgetEdge?.(rect);
-      },
-    },
-    itemConfig: props.itemConfig?.(item.data),
-    query: {
-      id: item.id,
-      index: item.index,
-      position: _getPosition,
-      templatePosition: _getTemplatePosition,
-      getCurrentFocusId: _getCurrentId,
-      slideTo: slideTo,
-    },
-  };
-  bindFunctions(obj, obj);
-  innerData.push(obj);
-  if (item.permanent) {
-    permanentItemList.push({
-      index: innerData.length - 1,
-      alreadyShow: false,
-    });
-  }
-  const lastItem = templateParser.GetItem(-1);
-  if (props.direction == VERTICAL) {
-    touchContainerH.value = lastItem.yPos + lastItem.height - 1;
-  } else {
-    touchContainerW.value = lastItem.xPos + lastItem.width - 1;
-  }
-};
-
-const _itemOnFocusSideEffect = (item, edgeRect) => {
-  _onFocusChange(item.data.id);
-  if (item.itemDivRef) {
-    let event = {
-      type: "focusRect",
-      direction: edgeRect?.direction?.description,
-      element: toRaw(item.itemDivRef),
-    };
-    _bubbleCustomerEvent(event);
-  }
-};
-
-const _onCustomerEvent = (ev) => {
-  if (ev.type === "focusRect") {
-    if (childSlideEventLock) {
-      return true;
-    }
-    if (ev.ownerNode == exportObject) {
-      return false;
-    }
-    let item_div = ev.element;
-    let direction = 0;
-    if (props.direction == HORIZONTAL) {
-      if (ev.direction == "left") {
-        direction = -1;
-      } else if (ev.direction == "right") {
-        direction = 1;
-      }
-    } else {
-      if (ev.direction == "top") {
-        direction = -1;
-      } else if (ev.direction == "bottom") {
-        direction = 1;
-      }
-    }
-    const item_layout = item_div.jsvGetRelativePosition(toRaw(locateDiv.value));
-
-    let obj = {
-      xPos: item_layout.left,
-      yPos: 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: templateParser.IdToIndex(focusId),
-    };
-
-    let cur_slide = _calculateVisibleStart(obj, direction);
-    if (cur_slide != visibleInfo.start) {
-      visibleInfo.start = cur_slide;
-      pageUpdater.update(
-        templateParser,
-        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-        Math.min(
-          visibleInfo.startMax +
-            visibleInfo.range +
-            visibleInfo.padding.end -
-            1,
-          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-        ),
-        focusId,
-        true,
-        permanentItemList
-      );
-      pageUpdater.applyTmp();
-      _slideTo(visibleInfo.start, {
-        easing: "",
-        onstart: null,
-        speed: props.slideSetting.Speed,
-        onend: _onSlideEnd,
-      });
-      return true;
-    }
-  }
-  return false;
-};
-
-const _bubbleCustomerEvent = (event) => {
-  if (props.sendFocusRectEvent && event) {
-    event.ownerNode = exportObject;
-    toRaw(focusNode.value)?.bubbleCustomerEvent(event);
-  }
-};
-
-const _moveToNext = (
-  horizontal_direction,
-  vertical_direction,
-  item_edge_rect
-) => {
-  let cur_focus_item = templateParser.GetItemById(focusId);
-  let next_focus_item = templateParser.GetNextItem(
-    focusId,
-    vertical_direction,
-    horizontal_direction,
-    props.focusMoveType
-  );
-  if (next_focus_item !== null) {
-    preFocusId = focusId;
-    templateItemAdder.tryAddItem(next_focus_item, 1);
-    focusId = next_focus_item.id;
-
-    let direction =
-      props.direction === VERTICAL ? vertical_direction : horizontal_direction;
-
-    let cur_visible_start = _calculateVisibleStart(next_focus_item, direction);
-    if (
-      !innerData[templateParser.IdToIndex(focusId)].itemConfig?.takeOverSlide &&
-      visibleInfo.start !== cur_visible_start
-    ) {
-      if (next_focus_item.doSlide) {
-        visibleInfo.start = cur_visible_start;
-        let animObj = {
-          easing: "",
-          onstart: null,
-          speed: props.slideSetting.Speed,
-          onend: _onSlideEnd,
-        };
-        _slideTo(visibleInfo.start, animObj);
-        pageUpdater.update(
-          templateParser,
-          visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-          Math.min(
-            visibleInfo.startMax +
-              visibleInfo.range +
-              visibleInfo.padding.end -
-              1,
-            visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-          ),
-          next_focus_item.id,
-          false,
-          permanentItemList
-        );
-      } else {
-        //不做滚动时,保证获焦的item创建
-        pageUpdater.update(
-          templateParser,
-          cur_visible_start,
-          cur_visible_start + visibleInfo.range + visibleInfo.padding.end - 1,
-          next_focus_item.id,
-          false,
-          permanentItemList
-        );
-      }
-      pageUpdater.applyTmp();
-    }
-
-    let rect;
-    let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
-    let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
-    if (item_edge_rect && item_edge_rect.rect) {
-      item_edge_rect.rect.x += x_off_set;
-      item_edge_rect.rect.y += y_off_set;
-      rect = item_edge_rect;
-    } else {
-      let direction;
-      if (horizontal_direction > 0) {
-        direction = EdgeDirection.right;
-      } else if (horizontal_direction < 0) {
-        direction = EdgeDirection.left;
-      } else if (vertical_direction > 0) {
-        direction = EdgeDirection.bottom;
-      } else if (vertical_direction < 0) {
-        direction = EdgeDirection.top;
-      }
-      rect = {
-        direction,
-        rect: {
-          x: x_off_set,
-          y: y_off_set,
-          width: cur_focus_item.width,
-          height: cur_focus_item.height,
-        },
-      };
-    }
-    preEdgeRect = rect;
-    _updateBlurItem();
-    _updateFocusItem();
-    onItemBlur(templateParser.IdToIndex(preFocusId));
-    onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
-  } else {
-    let x_off_set = props.direction === VERTICAL ? 0 : visibleInfo.start;
-    let y_off_set = props.direction === VERTICAL ? visibleInfo.start : 0;
-    let edge;
-    if (horizontal_direction === 1) {
-      edge = EdgeDirection.right;
-    }
-    if (horizontal_direction === -1) {
-      edge = EdgeDirection.left;
-    }
-    if (vertical_direction === 1) {
-      edge = EdgeDirection.bottom;
-    }
-    if (vertical_direction === -1) {
-      edge = EdgeDirection.top;
-    }
-    let rect = {
-      x: cur_focus_item.xPos - x_off_set,
-      y: cur_focus_item.yPos - y_off_set,
-      width: cur_focus_item.width,
-      height: cur_focus_item.height,
-    };
-    props.onEdge?.({ direction: edge, rect: rect });
-    innerData[templateParser.IdToIndex(focusId)].callbacks.onWidgetEdge?.({
-      direction: edge,
-    });
-  }
-};
-
-const _calculateVisibleStart = (target_item, direction) => {
-  if (!target_item) {
-    console.error("MetroWidget: _calculateVisibleStart target item is null");
-    return 0;
-  }
-  preAnchorItemIndex = target_item.index;
-  let pos_key = directionFreeKeyMap.pos[vertical];
-  let size_key = directionFreeKeyMap.size[vertical];
-  let center_key = directionFreeKeyMap.center[vertical];
-  let new_visible_start = visibleInfo.start;
-
-  switch (props.slideSetting.Type) {
-    case SlideSetting.Type.FIX_POSITION:
-      //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
-      new_visible_start = Math.ceil(
-        target_item[center_key] -
-          visibleInfo.range * props.slideSetting.FixPercent
-      );
-      break;
-    case SlideSetting.Type.WHOLE_PAGE:
-      if (typeof target_item.pageHeadIndex == "undefined") {
-        //TODO 子控制滚动时whole page滚动
-        console.error(
-          "child controlled whole page slide type is not supported."
-        );
-      } else {
-        new_visible_start = templateParser.GetItem(target_item.pageHeadIndex)[
-          pos_key
-        ];
-      }
-
-      break;
-    case SlideSetting.Type.SEAMLESS:
-      if (
-        target_item[size_key] >=
-        visibleInfo.range *
-          (props.slideSetting.EndPercent - props.slideSetting.StartPercent)
-      ) {
-        //尺寸较大的item
-        new_visible_start = target_item[center_key] - visibleInfo.range * 0.5;
-      } else {
-        if (direction > 0) {
-          if (
-            target_item[pos_key] + target_item[size_key] >
-            visibleInfo.start +
-              visibleInfo.range * props.slideSetting.EndPercent
-          ) {
-            new_visible_start =
-              target_item[pos_key] +
-              target_item[size_key] -
-              visibleInfo.range * props.slideSetting.EndPercent;
-          }
-        } else if (direction < 0) {
-          if (
-            target_item[pos_key] <
-            visibleInfo.start +
-              visibleInfo.range * props.slideSetting.StartPercent
-          ) {
-            new_visible_start =
-              target_item[pos_key] -
-              visibleInfo.range * props.slideSetting.StartPercent;
-          }
-        } else {
-          //不是沿widget方向的移动
-          if (target_item[pos_key] < visibleInfo.start) {
-            new_visible_start =
-              target_item[pos_key] -
-              visibleInfo.range * props.slideSetting.StartPercent;
-          } else if (
-            target_item[pos_key] + target_item[size_key] >
-            visibleInfo.end
-          ) {
-            new_visible_start =
-              target_item[pos_key] +
-              target_item[size_key] -
-              visibleInfo.range * props.slideSetting.EndPercent;
-          }
-        }
-      }
-      break;
-    default:
-      console.error(
-        "MetroWidget: undefined slide type",
-        props.slideSetting.Type
-      );
-  }
-
-  if ((props.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
-    let boundary = 0;
-    //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
-    if (
-      !templateParser.GetItem(0).focusable &&
-      target_item[pos_key] + target_item[size_key] <= visibleInfo.range
-    ) {
-      boundary = templateParser.GetItem(0)[size_key];
-    }
-    new_visible_start = new_visible_start < boundary ? 0 : new_visible_start;
-  }
-  if ((props.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
-    let last_item = templateParser.GetItem(-1);
-    let last_visible_start =
-      last_item[pos_key] + last_item[size_key] - visibleInfo.range;
-    last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
-    let boundary = last_visible_start;
-    if (
-      !last_item.focusable &&
-      target_item[pos_key] - last_visible_start >= 0
-    ) {
-      //最后元素是占位符, 在保证获焦区域完全展示的前提下要保证不可获焦元素的完全展示
-      boundary = last_item[pos_key] - visibleInfo.range;
-    }
-    new_visible_start =
-      new_visible_start > boundary ? last_visible_start : new_visible_start;
-  }
-  return Math.round(new_visible_start);
-};
-
-const _onFocusableItemEdge = (edge_info) => {
-  let horizontal_direction = 0;
-  let vertical_direction = 0;
-  switch (edge_info.direction) {
-    case EdgeDirection.left:
-      horizontal_direction = -1;
-      break;
-    case EdgeDirection.right:
-      horizontal_direction = 1;
-      break;
-    case EdgeDirection.top:
-      vertical_direction = -1;
-      break;
-    case EdgeDirection.bottom:
-      vertical_direction = 1;
-      break;
-    default:
-      break;
-  }
-  _moveToNext(horizontal_direction, vertical_direction, edge_info);
-};
-
-const _ifValidEnterRect = (rect_info) => {
-  return rect_info && rect_info.direction && rect_info.rect;
-};
-
-const _setZIndex = (index, z_index, is_focus) => {
-  if (innerData[index]) {
-    let data = innerData[index].data,
-      i = z_index;
-    if (is_focus && data.focusZIndex >= 0) {
-      i = data.focusZIndex;
-    } else if (data.normalZIndex >= 0) {
-      i = data.normalZIndex;
-    }
-    innerData[index].controller.zIndex = i;
-  }
-};
-
-const _onFocus = (params) => {
-  isFocus = true;
-  preFocusId = -1;
-  if (innerData.length === 0) {
-    console.warn(`MetroWidget: ${props.name} get focus while data is empty.`);
-    return;
-  }
-  let focus_id =
-    typeof enterFocusId !== "undefined" &&
-    enterFocusId >= 0 &&
-    enterFocusId < templateParser.GetTemplate().List.length
-      ? enterFocusId
-      : focusId;
-  focus_id = _ifValidEnterRect(enterFocusRect)
-    ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
-    : focus_id;
-
-  preEdgeRect = enterFocusRect;
-  focusId = focus_id;
-  enterFocusId = -1;
-  enterFocusRect = null;
-  _updateFocusItem();
-  onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
-  props.onFocus?.();
-};
-
-const _onBlur = () => {
-  isFocus = false;
-  enterFocusId = -1;
-  enterFocusRect = null;
-  preEdgeRect = null;
-  if (innerData.length === 0) {
-    return;
-  }
-  preFocusId = focusId;
-  _updateBlurItem();
-  innerData[templateParser.IdToIndex(preFocusId)].callbacks.onBlur();
-
-  props.onBlur?.();
-};
-
-const _onSlideEnd = (event) => {
-  if (event && event.stopPropagation) {
-    event.stopPropagation();
-  }
-  pageUpdater.apply();
-};
-
-const _updateFocusItem = () => {
-  _setZIndex(templateParser.IdToIndex(focusId), innerData.length, true);
-};
-
-const _updateBlurItem = () => {
-  _setZIndex(templateParser.IdToIndex(preFocusId), 0, false);
-};
-
-const _updateFocusByDragInfo = (viewX, viewY) => {
-  let enterFocusRect = null;
-  //模拟最小区域作为输入区域
-  if (props.direction === VERTICAL) {
-    enterFocusRect = {
-      direction: EdgeDirection.top,
-      rect: {
-        x: props.left - viewX,
-        y: props.top - viewY,
-        width: 10,
-        height: 10,
-      },
-    };
-  } else {
-    enterFocusRect = {
-      direction: EdgeDirection.left,
-      rect: {
-        x: props.left - viewX,
-        y: props.top - viewY,
-        width: 10,
-        height: 10,
-      },
-    };
-  }
-  focusId = _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect);
-};
-
-const _onDragUpdateItem = (visible_start, visible_end) => {
-  templateItemAdder.tryAddItemByPosition(visible_end);
-  pageUpdater.update(
-    templateParser,
-    visible_start,
-    visible_end,
-    0,
-    false,
-    permanentItemList
-  );
-  pageUpdater.apply();
-
-  Forge.sRenderBridge.InstantPerformSwap();
-};
-
-const _getTouchListener = () => {
-  if (!props.enableTouch) {
-    return null;
-  }
-  let callback = {
-    OnDragStart: (msg) => {
-      if (mounted) {
-        Promise.resolve().then(() => {
-          let cur_visible_start = visibleInfo.start - pageRange * 2;
-          let cur_visible_end = visibleInfo.start + pageRange * 3 - 1;
-          preUpdateVisibleStart = cur_visible_start;
-          _onDragUpdateItem(cur_visible_start, cur_visible_end);
-        });
-      }
-      return true;
-    },
-    OnMoved: (msg) => {
-      if (mounted) {
-        Promise.resolve().then(() => {
-          if (
-            typeof msg.viewY != "undefined" &&
-            typeof msg.viewX != "undefined"
-          ) {
-            if (props.direction === VERTICAL) {
-              visibleInfo.start = -msg.viewY;
-            } else {
-              visibleInfo.start = -msg.viewX;
-            }
-            if (visibleInfo.start < 0) {
-              visibleInfo.start = 0;
-            }
-          }
-          if (
-            Math.abs(visibleInfo.start - preUpdateVisibleStart) <= pageRange
-          ) {
-            let cur_visible_start = visibleInfo.start - pageRange * 2;
-            let cur_visible_end = visibleInfo.start + pageRange * 3 - 1;
-            preUpdateVisibleStart = cur_visible_start;
-            _onDragUpdateItem(cur_visible_start, cur_visible_end);
-          }
-        });
-      }
-
-      return true;
-    },
-    OnDragEnd: (msg) => {
-      _updatePosition(msg["viewX"], msg["viewY"], null);
-      preUpdateVisibleStart = visibleInfo.start;
-      _onDragUpdateItem(
-        visibleInfo.startWithPadding,
-        visibleInfo.endWithPadding
-      );
-      _updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-      return true;
-    },
-    OnFling: (msg) => {
-      _updatePosition(msg["viewX"], msg["viewY"], null);
-      preUpdateVisibleStart = visibleInfo.start;
-      _onDragUpdateItem(
-        visibleInfo.startWithPadding,
-        visibleInfo.endWithPadding
-      );
-      _updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-      return true;
-    },
-    OnRelease: (msg) => {
-      return true;
-    },
-  };
-  return callback;
-};
-
-const _updatePage = (range_list) => {
-  let list = [];
-  for (let range of range_list) {
-    list = list.concat(innerData.slice(range.start, range.end + 1));
-  }
-  renderData.value = list;
-  if (props.enableItemRenderBreak) {
-    itemRender.value = false;
-    nextTick(() => {
-      itemRender.value = true;
-    });
-  }
-};
-
-const _onScroll = () => {
-  if (props.onScroll) {
-    const lastItem = templateParser.GetItem(-1);
-    let totalWidth;
-    if (vertical) {
-      totalWidth = lastItem.yPos + lastItem.height - 1;
-    } else {
-      totalWidth = lastItem.xPos + lastItem.width - 1;
-    }
-    props.onScroll(visibleInfo.start, visibleInfo.range, totalWidth);
-  }
-};
-
-//之前rootview相关的代码
-const _updatePosition = (x, y, anim_info) => {
-  if (slideLock) return;
-  if (toRaw(slideDiv.value)) {
-    let pre_left = slideDivLeft.value,
-      pre_top = slideDivTop.value;
-    //jsvMaskView的位置更新时会被设置位0，因此不能通过ResetLayoutParams设置位置
-    slideDivLeft.value = x;
-    slideDivTop.value = y;
-    if (anim_info) {
-      let delta_x = Math.abs(pre_left - x);
-      let delta_y = Math.abs(pre_top - y);
-      let duration = Math.round(
-        delta_x === 0 ? delta_y / anim_info.speed : delta_x / anim_info.speed
-      );
-      let slide_animation = new Forge.TranslateAnimation(
-        pre_left - x,
-        0,
-        pre_top - y,
-        0,
-        duration,
-        anim_info.easing
-      );
-      slide_animation.SetAnimationListener(
-        new Forge.AnimationListener(anim_info.onstart, anim_info.onend, null)
-      );
-      toRaw(slideDiv.value)
-        .jsvGetProxyView(true)
-        .StartAnimation(slide_animation);
-    }
-    _onScroll();
-  }
-};
-
-const _initRootTouch = () => {
-  if (props.enableTouch && toRaw(slideDiv.value)) {
-    let view = toRaw(slideDiv.value).jsvGetProxyView(true);
-    var drag_setting = new Forge.DragSetting(
-      dragDirection,
-      20,
-      false,
-      slidePile,
-      props.flingPageWidth,
-      props.flingPageEdge
-    );
-    view.EnableDrag(drag_setting, touchListener, "translateMat(dx,dy,0)");
-  }
-};
-
-const _initItemViewTouch = (itemDivRef, index) => {
-  if (props.enableTouch) {
-    if (itemDivRef) {
-      // 为view添加触控处理
-      let view = itemDivRef.jsvGetProxyView(true);
-      let dragSetting = new Forge.DragSetting(
-        Forge.DragSetting.DIRECTION_DISABLE,
-        20,
-        false,
-        new Forge.RectArea(0, 0, 0, 0),
-        -1,
-        3 / 4
-      );
-      let callback = {
-        OnTap: (msg) => {
-          return onItemClick(index);
-        },
-      };
-      view.EnableDrag(dragSetting, callback, "translateMat(dx,dy,0)");
-    }
-  }
-};
-
-//init
-pageUpdater = new PageUpdater(_updatePage);
-if (props.dispatcher) {
-  props.dispatcher.registerComponent(exportObject);
-}
-innerPadding = _getPadding(props.padding);
-dragDirection = vertical
-  ? Forge.DragSetting.DIRECTION_VERTICAL
-  : Forge.DragSetting.DIRECTION_HORIZONTAL;
-visibleInfo.range = vertical
-  ? props.height - innerPadding.top - innerPadding.bottom
-  : props.width - innerPadding.left - innerPadding.right;
-visibleInfo.padding = vertical
-  ? { start: innerPadding.top, end: innerPadding.bottom }
-  : { start: innerPadding.left, end: innerPadding.right };
-
-if (props.provideData) {
-  dataList = toRaw(props.provideData());
-} else if (props.data) {
-  dataList = toRaw(props.data);
-}
-
-templateParser = _getTemplateParser(
-  props.width,
-  props.height,
-  props.direction,
-  props.padding,
-  props.supportHistoryPath,
-  props.layoutType
-);
-
-templateItemAdder = new TemplateItemAdder(
-  templateParser,
-  dataList,
-  props.measures,
-  pageRange,
-  _onTemplateAdd,
-  props.name
+const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
+const touchContainerW = ref(0);
+const touchContainerH = ref(0);
+const itemRender = ref(!props.enableItemRenderBreak);
+const locateDiv = shallowRef(null);
+const renderData = shallowRef([]);
+const slideDiv = shallowRef(null);
+const slideDivLeft = ref(0);
+const slideDivTop = ref(0);
+const itemResizeSlideDiv = shallowRef(null);
+const itemResizeSlideLeft = ref(0);
+const itemResizeSlideTop = ref(0);
+const focusNode = shallowRef(null);
+const pageUpdateToken = ref(0);
+
+const {
+  widgetRectInfo,
+  focusBlockOnFocus,
+  focusBlockOnBlur,
+  focusBlockOnKeyDown,
+  focusBlockOnCustomerEvent,
+  _onFocusableItemEdge,
+  exportObject,
+} = setup(
+  props,
+  touchContainerW,
+  touchContainerH,
+  itemRender,
+  locateDiv,
+  renderData,
+  slideDiv,
+  slideDivLeft,
+  slideDivTop,
+  itemResizeSlideDiv,
+  itemResizeSlideLeft,
+  itemResizeSlideTop,
+  focusNode,
+  pageUpdateToken,
+  "common"
 );
-if (props.onScroll) {
-  templateItemAdder.tryAddItemByIndex(dataList.length - 1);
-} else {
-  templateItemAdder.tryAddItem(null, 2);
-}
-
-let template_list = templateParser.GetTemplate().List;
-
-//触控相关
-let last_item = template_list[template_list.length - 1];
-if (last_item) {
-  touchListener = _getTouchListener();
-  touchContainerW.value =
-    props.direction === VERTICAL
-      ? props.width
-      : last_item.xPos + last_item.width;
-  touchContainerH.value =
-    props.direction === VERTICAL
-      ? last_item.yPos + last_item.height
-      : props.height;
-}
-slidePile = new Forge.RectArea(
-  0,
-  0,
-  props.width - innerPadding.left - innerPadding.right,
-  props.height - innerPadding.top - innerPadding.bottom
-);
-let init_focus_id = 0;
-let cur_visible_start = 0;
-
-if (typeof props.initFocusId == "number") {
-  templateItemAdder.tryAddItemById(props.initFocusId);
-  const item = templateParser.GetItemById(props.initFocusId);
-  if (item) {
-    init_focus_id = props.initFocusId;
-    if (item.doSlide) {
-      cur_visible_start = _calculateVisibleStart(item, 1);
-    }
-  }
-}
-focusId = init_focus_id;
-visibleInfo.start = cur_visible_start;
-
-pageUpdater.update(
-  templateParser,
-  visibleInfo.startWithPadding,
-  visibleInfo.endWithPadding,
-  0,
-  false,
-  permanentItemList
-);
-let list = [];
-for (let range of pageUpdater.rangeList) {
-  list = list.concat(innerData.slice(range.start, range.end + 1));
-}
-renderData.value = list;
-
-onMounted(() => {
-  mounted = true;
-  _initRootTouch();
-  for (let item of renderData.value) {
-    _initItemViewTouch(toRaw(item.itemDivRef), item.index);
-  }
-
-  if (visibleInfo.start) {
-    _slideTo(visibleInfo.start, null);
-  }
-
-  onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
-
-  if (props.enableItemRenderBreak) {
-    nextTick(() => {
-      itemRender.value = true;
-    });
-  }
-});
-
-onUpdated(() => {
-  for (let item of renderData.value) {
-    if (!item.touchInited) {
-      _initItemViewTouch(toRaw(item.itemDivRef), item.index);
-    }
-  }
-});
-
-onBeforeUnmount(() => {
-  mounted = false;
-  if (props.dispatcher) {
-    props.dispatcher.unregisterComponent();
-  }
-});
 
 defineExpose(exportObject);
 </script>
@@ -1949,8 +398,14 @@ defineExpose(exportObject);
       overflow: disableClip ? null : 'hidden',
     }"
   >
-    <div :style="{ left: innerPadding.left, top: innerPadding.top }">
+    <div
+      :style="{
+        left: widgetRectInfo.padding.left,
+        top: widgetRectInfo.padding.top,
+      }"
+    >
       <div
+        id="slideDiv"
         key="touchcontainer"
         ref="slideDiv"
         :style="{
@@ -1968,58 +423,62 @@ defineExpose(exportObject);
             ref="focusNode"
             :name="name"
             :onAction="{
-              onFocus: _onFocus,
-              onBlur: _onBlur,
-              onKeyDown: onKeyDown,
-              onCustomerEvent: _onCustomerEvent,
+              onFocus: focusBlockOnFocus,
+              onBlur: focusBlockOnBlur,
+              onKeyDown: focusBlockOnKeyDown,
+              onCustomerEvent: focusBlockOnCustomerEvent,
             }"
           >
             <div
-              v-for="item in renderData"
-              :key="pageUpdateToken + '_' + item.index"
-              :ref="item.refCallback"
+              id="itemResizeSlide"
+              key="itemResizeSlide"
+              ref="itemResizeSlideDiv"
               :style="{
-                left: item.data.xPos,
-                top: item.data.yPos,
-                width: item.data.width,
-                height: item.data.height,
-                zIndex: item.controller.zIndex,
+                left: itemResizeSlideLeft,
+                top: itemResizeSlideTop,
               }"
             >
               <div
-                v-if="
-                  !enableItemRenderBreak || item.slotMounted.value || itemRender
-                "
-                :key="renderBreakKey"
-                :ref="item.slotDivRef"
+                v-for="item in renderData"
+                :key="pageUpdateToken + '_' + item.index"
+                :ref="item.divRef"
+                :style="{
+                  ...item.renderStyle,
+                }"
               >
-                <slot
-                  name="renderItem"
+                <div
+                  v-if="!enableItemRenderBreak || item.mounted || itemRender"
                   :key="renderBreakKey"
-                  :data="item.data.data"
-                  :onEdge="_onFocusableItemEdge"
-                  :onAction="item.register"
-                  :query="item.query"
-                  :onItemEdge="_onFocusableItemEdge"
-                ></slot>
+                  :ref="item.slotRef"
+                >
+                  <slot
+                    name="renderItem"
+                    :key="renderBreakKey"
+                    :data="item.customerData"
+                    :onEdge="_onFocusableItemEdge"
+                    :onAction="item.registerObj"
+                    :query="item.query"
+                    :onItemEdge="_onFocusableItemEdge"
+                  ></slot>
+                </div>
+                <div
+                  v-if="
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value
+                  "
+                  :style="{
+                    width:
+                      item.renderStyle.width -
+                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
+                    height:
+                      item.renderStyle.height -
+                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
+                    backgroundColor: placeHolderSetting.backgroundColor,
+                    borderRadius: placeHolderSetting.borderRadius,
+                  }"
+                ></div>
               </div>
-              <div
-                v-if="
-                  enableItemRenderBreak &&
-                  placeHolderSetting &&
-                  !item.slotMounted.value
-                "
-                :style="{
-                  width:
-                    item.data.width -
-                    (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
-                  height:
-                    item.data.height -
-                    (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
-                  backgroundColor: placeHolderSetting.backgroundColor,
-                  borderRadius: placeHolderSetting.borderRadius,
-                }"
-              ></div>
             </div>
           </jsv-focus-block>
         </div>