@shijiu/jsview-vue 0.9.631 → 0.9.766

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-09 11:10:07
+ * @LastEditTime: 2022-12-19 11:17:10
  * @Description: file content
 -->
 
@@ -23,7 +23,13 @@
  *      name {string} 用于设置焦点的名称
  *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
  *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL
- *      loopFocus {boolean} 焦点到边界后自动转到下一行，默认false
+ *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合
+                          NO_ADJUST: 无特殊处理
+                          COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在水平滚动时生效
+                          ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
+                          COLUMN_FIND_NEAR: 一列中没有下一个元素时是否跳转到相邻列
+                          ROW_FIND_NEAR: 一行中没有下一个元素时是否跳转到相邻行
+
  *      initFocusId {int} 初始焦点，默认为0
  *      slideSetting {SlideSetting} 页面滑动的设置, 目前SlideSetting有三个子类, 具体见 WidgetCommon 中的说明
                                     WholePageSlide
@@ -52,15 +58,16 @@
  *                              @params item {object} data中的数据
  *                              @return 模板信息，
                                         {
-                                          left: 绝对布局时的left,
-                                          top: 绝对布局时的top,
-                                          width: item的宽,
-                                          height: item的高,
-                                          focusable: item是否可以获得焦点,
-                                          marginBottom: item的下方margin,
-                                          marginRight: item的右方margin,
-                                          findNextAnchor: 自定义上下左右四条边寻找临近item的基准位置，值为0-1 {left: 0.5, right: 0.5, top: 0.5, bottom: 0.5}
-                                          doSlide: item获得焦点时是否滚动, 一般用于嵌套的情景, 由内部组件控制滚动
+                                          left {int}: 绝对布局时的left,
+                                          top {int}: 绝对布局时的top,
+                                          width {int}: item的宽,
+                                          height {int}: item的高,
+                                          focusable {boolean}: item是否可以获得焦点,
+                                          marginBottom {int}: item的下方margin,
+                                          marginRight {int}: item的右方margin,
+                                          findNextAnchor {object}: 自定义上下左右四条边寻找临近item的基准位置，值为0-1 {left: 0.5, right: 0.5, top: 0.5, bottom: 0.5}
+                                          doSlide {boolean}: item获得焦点时是否滚动, 一般用于嵌套的情景, 由内部组件控制滚动,
+                                          zIndex {int | object}: item的zIndex, 为object时可以分别设置{focus: 0, normal: 0}, 为number时则同时设置获焦和不获焦的zIndex
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -79,6 +86,7 @@
  *      loadAll {boolean} 加载不显示的view，触控场景使用
  *      flingPageWidth {}
  *      flingPageEdge {}
+ *      disableClip {boolean} 取消显示范围的clipView
  *    methods:
         getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
 
@@ -110,9 +118,25 @@
           @params {int} id 焦点id
           @params {boolean} needSlide 是否需要滚动
           @params {boolean} doAnim 滚动时是否做动画
+          @params {object} extraSetting 额外的参数设置
+                                          {
+                                            lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
+                                          }
         refreshData
           @description 刷新数据, 只有存在provideData时才会生效
           @params {boolean} forceUpdate 是否强制刷新
+        getVisibleItems
+          @description 获取可视item的列表信息
+          @return {start: 开始的index, end: 结束的index, dataList: 可视item的数据列表}
+        lock
+          @description 设置内部的锁
+          @params {int} type 锁的类型, 通过|来实现多个类型的复合
+                              SLIDE: 滚动动画锁
+                              CHILD_SLIDE_EVENT: 子组件发送的滚动事件锁
+          @return {function} 解锁的函数
+        unlock
+          @description 解锁
+          @params {int} type 参考lock的type参数
  * 【技巧说明】
  * Q: 插槽props如何使用？
  * A: data: 当前item的数据
@@ -123,8 +147,6 @@
                             获取 item 相对 MetroWidget 左上角坐标
                   templatePosition: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
                                     获取 item 的布局坐标, 一般用于自定义滚动
-                  absolutePosition: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0}
-                                    获取 item 的绝对坐标, 一般用于控制焦点
                   getCurrentFocusId: {Function} () => {id: 0, index: 0} 
                                      获取当前焦点信息，id 为在可获得焦点元素列表中的索引，index 为在所有元素列表中的索引
                   slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
@@ -175,6 +197,7 @@ import { TemplateParser, TemplateItemAdder } from "../TemplateParser";
 import { PageUpdater } from "./PageUpdater";
 import { SingleRangeModel } from "../RangeModel";
 import Dispatcher from "./Dispatcher";
+import { METRO_WIDGET } from "./Const";
 import {
   EdgeDirection,
   VERTICAL,
@@ -381,6 +404,14 @@ const props = defineProps({
   onScroll: {
     type: Function,
   },
+  focusMoveType: {
+    type: Number,
+    default: 0,
+  },
+  disableClip: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 let dataUpdateToken = ref(0);
@@ -407,8 +438,12 @@ let itemRender = ref(!props.enableItemRenderBreak);
 let permanentItemList = [];
 let preUpdateVisibleStart = 0;
 let mounted = false;
-let focusNode = ref(null);
+let focusNode = shallowRef(null);
 let pageRange = vertical ? props.height : props.width;
+
+let slideLock = false;
+let childSlideEventLock = false;
+
 let visibleInfo = {
   _start: 0,
   range: 0,
@@ -444,8 +479,8 @@ let visibleInfo = {
   },
 };
 
-let locateDiv = ref(null);
-let slideDiv = ref(null);
+let locateDiv = shallowRef(null);
+let slideDiv = shallowRef(null);
 let renderData = shallowRef([]);
 let slideDivLeft = ref(0);
 let slideDivTop = ref(0);
@@ -463,7 +498,7 @@ const _onFocusChange = (id) => {
 const _getCurrentId = () => {
   return {
     id: focusId,
-    index: templateParser.FocusIdToIndex(focusId),
+    index: templateParser.IdToIndex(focusId),
   };
 };
 
@@ -489,10 +524,6 @@ const _getTemplatePosition = (index) => {
   };
 };
 
-const _getAbsolutePosition = (index, targetEle) => {
-  return getPositionRelativeToView(innerData[index].itemDivRef, targetEle);
-};
-
 const _dispatchEvent = (event) => {
   switch (event.type) {
     case Dispatcher.Type.setEnterFocusId:
@@ -539,12 +570,21 @@ const onItemFocus = (index, rect) => {
   }
 };
 
-const setFocusId = (id, needSlide = true, doAnim = false) => {
+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.FocusIdToIndex(id), doAnim);
+      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);
@@ -564,8 +604,39 @@ const setFocusId = (id, needSlide = true, doAnim = false) => {
     };
     _updateBlurItem();
     _updateFocusItem();
-    onItemBlur(templateParser.FocusIdToIndex(preFocusId));
-    onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+    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;
   }
 };
 
@@ -693,7 +764,8 @@ const refreshData = (force_update) => {
       dataList,
       props.measures,
       pageRange,
-      _onTemplateAdd
+      _onTemplateAdd,
+      props.name
     );
   }
   if (need_update_content) {
@@ -740,7 +812,7 @@ const refreshData = (force_update) => {
   dataUpdateToken.value++;
   pageUpdater.apply();
   _updateFocusItem();
-  onItemFocus(templateParser.FocusIdToIndex(focusId), null);
+  onItemFocus(templateParser.IdToIndex(focusId), null);
   if (needSlide) {
     _slideTo(visibleInfo.start, null);
   } else if (need_update_content) {
@@ -748,7 +820,24 @@ const refreshData = (force_update) => {
   }
 };
 
+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,
@@ -757,7 +846,7 @@ const exportObject = {
   slideToItem,
   refreshData,
   _dispatchEvent,
-  _getAbsolutePosition,
+  getVisibleItems,
 };
 
 const _calculateNearestItemByRect = (visible_range, enter_rect_info) => {
@@ -979,7 +1068,7 @@ const onKeyDown = (ev) => {
       _moveToNext(horizontal_direction, vertical_direction);
       break;
     case 13:
-      onItemClick(templateParser.FocusIdToIndex(focusId));
+      onItemClick(templateParser.IdToIndex(focusId));
       break;
     default:
       //只接受上下左右确定键
@@ -1001,7 +1090,7 @@ const _onTemplateAdd = (item) => {
     data: item,
     index: innerData.length,
     controller: reactive({
-      zIndex: 0,
+      zIndex: item.normalZIndex >= 0 ? item.normalZIndex : 0,
     }),
     mounted: false,
     itemDivRef: null,
@@ -1019,7 +1108,7 @@ const _onTemplateAdd = (item) => {
         this.slotMounted.value = true;
         if (callFocusAfterUpdate && this.data.id === focusId) {
           nextTick(() => {
-            onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+            onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
           });
           callFocusAfterUpdate = false;
         }
@@ -1059,7 +1148,6 @@ const _onTemplateAdd = (item) => {
       index: item.index,
       position: _getPosition,
       templatePosition: _getTemplatePosition,
-      absolutePosition: _getAbsolutePosition,
       getCurrentFocusId: _getCurrentId,
       slideTo: slideTo,
     },
@@ -1094,6 +1182,9 @@ const _itemOnFocusSideEffect = (item, edgeRect) => {
 
 const _onCustomerEvent = (ev) => {
   if (ev.type === "focusRect") {
+    if (childSlideEventLock) {
+      return true;
+    }
     if (ev.ownerNode == exportObject) {
       return false;
     }
@@ -1122,7 +1213,9 @@ const _onCustomerEvent = (ev) => {
       yPos: item_layout.top,
       width: item_layout.width,
       height: item_layout.height,
-      index: templateParser.FocusIdToIndex(focusId),
+      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);
@@ -1168,15 +1261,14 @@ const _moveToNext = (
   item_edge_rect
 ) => {
   let cur_focus_item = templateParser.GetItemById(focusId);
-  let next_item_id = templateParser.GetNextItem(
+  let next_focus_item = templateParser.GetNextItem(
     focusId,
     vertical_direction,
     horizontal_direction,
-    props.loopFocus
+    props.focusMoveType
   );
-  if (next_item_id >= 0) {
+  if (next_focus_item !== null) {
     preFocusId = focusId;
-    let next_focus_item = templateParser.GetItemById(next_item_id);
     templateItemAdder.tryAddItem(next_focus_item, 1);
     focusId = next_focus_item.id;
 
@@ -1185,8 +1277,7 @@ const _moveToNext = (
 
     let cur_visible_start = _calculateVisibleStart(next_focus_item, direction);
     if (
-      !innerData[templateParser.FocusIdToIndex(next_item_id)].itemConfig
-        ?.takeOverSlide &&
+      !innerData[templateParser.IdToIndex(focusId)].itemConfig?.takeOverSlide &&
       visibleInfo.start !== cur_visible_start
     ) {
       if (next_focus_item.doSlide) {
@@ -1198,21 +1289,31 @@ const _moveToNext = (
           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.update(
-        templateParser,
-        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-        Math.min(
-          visibleInfo.startMax +
-            visibleInfo.range +
-            visibleInfo.padding.end -
-            1,
-          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-        ),
-        next_item_id,
-        false,
-        permanentItemList
-      );
       pageUpdater.applyTmp();
     }
 
@@ -1247,8 +1348,8 @@ const _moveToNext = (
     preEdgeRect = rect;
     _updateBlurItem();
     _updateFocusItem();
-    onItemBlur(templateParser.FocusIdToIndex(preFocusId));
-    onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+    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;
@@ -1272,7 +1373,7 @@ const _moveToNext = (
       height: cur_focus_item.height,
     };
     props.onEdge?.({ direction: edge, rect: rect });
-    innerData[templateParser.FocusIdToIndex(focusId)].callbacks.onWidgetEdge?.({
+    innerData[templateParser.IdToIndex(focusId)].callbacks.onWidgetEdge?.({
       direction: edge,
     });
   }
@@ -1298,45 +1399,63 @@ const _calculateVisibleStart = (target_item, direction) => {
       );
       break;
     case SlideSetting.Type.WHOLE_PAGE:
-      new_visible_start = templateParser.GetItem(target_item.pageHeadIndex)[
-        pos_key
-      ];
+      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 (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;
-        }
+      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 {
-        //不是沿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;
+        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;
@@ -1403,9 +1522,16 @@ const _ifValidEnterRect = (rect_info) => {
   return rect_info && rect_info.direction && rect_info.rect;
 };
 
-const _setZIndex = (index, z_index) => {
+const _setZIndex = (index, z_index, is_focus) => {
   if (innerData[index]) {
-    innerData[index].controller.zIndex = z_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;
   }
 };
 
@@ -1430,7 +1556,7 @@ const _onFocus = (params) => {
   enterFocusId = -1;
   enterFocusRect = null;
   _updateFocusItem();
-  onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
   props.onFocus?.();
 };
 
@@ -1444,7 +1570,7 @@ const _onBlur = () => {
   }
   preFocusId = focusId;
   _updateBlurItem();
-  innerData[templateParser.FocusIdToIndex(preFocusId)].callbacks.onBlur();
+  innerData[templateParser.IdToIndex(preFocusId)].callbacks.onBlur();
 
   props.onBlur?.();
 };
@@ -1457,11 +1583,11 @@ const _onSlideEnd = (event) => {
 };
 
 const _updateFocusItem = () => {
-  _setZIndex(templateParser.FocusIdToIndex(focusId), innerData.length);
+  _setZIndex(templateParser.IdToIndex(focusId), innerData.length, true);
 };
 
 const _updateBlurItem = () => {
-  _setZIndex(templateParser.FocusIdToIndex(preFocusId), 0);
+  _setZIndex(templateParser.IdToIndex(preFocusId), 0, false);
 };
 
 const _updateFocusByDragInfo = (viewX, viewY) => {
@@ -1607,21 +1733,23 @@ const _onScroll = () => {
 
 //之前rootview相关的代码
 const _updatePosition = (x, y, anim_info) => {
+  if (slideLock) return;
   if (toRaw(slideDiv.value)) {
-    let pre_pos = toRaw(slideDiv.value).jsvMaskView.GetLayoutParams();
+    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_pos.MarginLeft - x);
-      let delta_y = Math.abs(pre_pos.MarginTop - y);
+      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_pos.MarginLeft - x,
+        pre_left - x,
         0,
-        pre_pos.MarginTop - y,
+        pre_top - y,
         0,
         duration,
         anim_info.easing
@@ -1629,7 +1757,9 @@ const _updatePosition = (x, y, anim_info) => {
       slide_animation.SetAnimationListener(
         new Forge.AnimationListener(anim_info.onstart, anim_info.onend, null)
       );
-      toRaw(slideDiv.value).jsvMaskView.StartAnimation(slide_animation);
+      toRaw(slideDiv.value)
+        .jsvGetProxyView(true)
+        .StartAnimation(slide_animation);
     }
     _onScroll();
   }
@@ -1637,7 +1767,7 @@ const _updatePosition = (x, y, anim_info) => {
 
 const _initRootTouch = () => {
   if (props.enableTouch && toRaw(slideDiv.value)) {
-    let view = toRaw(slideDiv.value).jsvMaskView;
+    let view = toRaw(slideDiv.value).jsvGetProxyView(true);
     var drag_setting = new Forge.DragSetting(
       dragDirection,
       20,
@@ -1654,7 +1784,7 @@ const _initItemViewTouch = (itemDivRef, index) => {
   if (props.enableTouch) {
     if (itemDivRef) {
       // 为view添加触控处理
-      let view = itemDivRef.jsvMaskView;
+      let view = itemDivRef.jsvGetProxyView(true);
       let dragSetting = new Forge.DragSetting(
         Forge.DragSetting.DIRECTION_DISABLE,
         20,
@@ -1703,12 +1833,14 @@ templateParser = _getTemplateParser(
   props.supportHistoryPath,
   props.layoutType
 );
+
 templateItemAdder = new TemplateItemAdder(
   templateParser,
   dataList,
   props.measures,
   pageRange,
-  _onTemplateAdd
+  _onTemplateAdd,
+  props.name
 );
 if (props.onScroll) {
   templateItemAdder.tryAddItemByIndex(dataList.length - 1);
@@ -1740,12 +1872,14 @@ slidePile = new Forge.RectArea(
 let init_focus_id = 0;
 let cur_visible_start = 0;
 
-if (props.initFocusId) {
+if (typeof props.initFocusId == "number") {
   templateItemAdder.tryAddItemById(props.initFocusId);
   const item = templateParser.GetItemById(props.initFocusId);
   if (item) {
     init_focus_id = props.initFocusId;
-    cur_visible_start = _calculateVisibleStart(item, 1);
+    if (item.doSlide) {
+      cur_visible_start = _calculateVisibleStart(item, 1);
+    }
   }
 }
 focusId = init_focus_id;
@@ -1776,7 +1910,7 @@ onMounted(() => {
     _slideTo(visibleInfo.start, null);
   }
 
-  onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
 
   if (props.enableItemRenderBreak) {
     nextTick(() => {
@@ -1810,7 +1944,7 @@ defineExpose(exportObject);
       top: top,
       width: width,
       height: height,
-      overflow: 'hidden',
+      overflow: disableClip ? null : 'hidden',
     }"
   >
     <div :style="{ left: innerPadding.left, top: innerPadding.top }">