@shijiu/jsview-vue 0.9.631 → 0.9.684

package/utils/JsViewEngineWidget/SimpleWidget/SimpleWidget.vue

@@ -1,1629 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-22 16:08:58
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-28 18:14:29
- * @Description: file content
--->
-
-<!--
- * 【界面概述】
- * 展示SimpleWidget控件的用法
- *
- * 【控件介绍】
- * SimpleWidget:
- *    props:
- *      top {int} 控件的y，默认为0
- *      left {int} 控件的x， 默认为0
- *      width {int} (必选)控件的宽
- *      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
- *      loopFocus {boolean} 焦点到边界后自动转到下一行，默认false
- *      initFocusId {int} 初始焦点，默认为0
- *      slideSetting {SlideSetting} 页面滑动的设置, 目前SlideSetting有三个子类, 具体见 WidgetCommon 中的说明
-                                    WholePageSlide
-                                      @description 整页滚动的设置类
-                                      @constructor {Object} {speed, easing, boundProtect}
-                                    SeamlessSlide
-                                      @description 平滑滚动的设置类
-                                      @constructor {Object} {startPercent, endPercent, speed, easing, boundProtect}
-                                    FixPositionSlide
-                                      @description 固定位置滚动的设置类
-                                      @constructor {Object} {fixPercent, speed, easing, boundProtect}
- *      itemConfig {Function (item) => {takeOverSlide: true}} 返回item的配置信息
-
- *      data {array} (必选)数据列表
- *      measures {function} (必选)返回item的模板信息的回调,
- *                              @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}
-                                        }
- *
- *      onFocus {function} 控件获取焦点的回调
- *      onBlur {function} 控件失去焦点的回调
- *      onEdge {function} 焦点移动到边缘时的回调
- *              @params {object} edgeInfo {
-                                            "direction": {EdgeDirection}边缘方向, 
-                                            "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
-                                          }
- *
- *      enableTouch {boolean} 支持触控
- *      loadAll {boolean} 加载不显示的view，触控场景使用
- *      flingPageWidth {}
- *      flingPageEdge {}
- *    methods:
-        getFocusBlockRef 获取此SimpleWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
-
-        slideTo
-          @description 滚动到指定位置
-          @params {int} position 滚动目标位置
-          @params {boolean} doAnim 是否做动画
-        slideToItem
-          @description 滚动到指定item
-          @params {int} index 目标item的index, 注意与item的id区别, id是可获焦item的序号
-          @params {boolean} doAnim 是否做动画
-        setEnterFocusId
-          @description 设置落焦时的焦点
-          @params {int} id 落焦时的焦点id
-        setEnterFocusRect
-          @description 设置落焦时的焦点查找去区域
-          @params {Object} rectInfo 焦点移入时的区域,SimpleWidget 将会根据此区域寻找最近的item
-                            {
-                              direction: {EdgeDirection}
-                              rect: {
-                                x: {int},
-                                y: {int},
-                                width: {int},
-                                height: {int}
-                              }
-                            }
-        setFocusId
-          @description 设置焦点
-          @params {int} id 焦点id
-          @params {boolean} needSlide 是否需要滚动
-          @params {boolean} doAnim 滚动时是否做动画
-
- * 【技巧说明】
- * Q: 插槽props如何使用？
- * A: data: 当前item的数据
- *    query: 获取一些额外信息的对象
-                { 
-                  id: {int} item的id,
-                  position: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
-                            获取 item 相对 SimpleWidget 左上角坐标
-                  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 
-                           滚动到指定位置，注意这个位置是 item 的布局坐标，另外当某些item需要接管滚动时，itemConfig中takeOverSlide要为true。
-                }
- *    onEdge: 若单元格内另有可接管按键的控件（如SimpleWidget），该控件到达边缘需要通知SimpleWidget时的回调
- *    onAction: 单元格内控件需要通过onAction.register方法向SimpleWidget注册 item 的回调，回调函数有
-                onFocus， onBlur， onClick, onWidgetEdge
- * 
- * Q: 如何进行布局，定制每个格的尺寸？
- * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
- *    然后将单元格尺寸反馈器(函数)设置到measures中，进行布局时，组件会回调measures函数获得每个单元格的尺寸，
- *    当一列放满单元格后(如果是纵向布局，则是一行放满后)，自动换列去布局下一列。
- *
- * Q: 单元格的普通状态，焦点状态，失焦状态如何渲染？
- * A: 在单元的空间中通过往onAction注册的onFocus，onBlur控制显示
- *
- * Q: 控件中的导航处理(上下左右，OK键)需要什么响应的开发？
- * A: 上下左右键已经由控件接管，不需要开发者而外处理，上下左右键会触发翻页时间，翻页的形式由属性slideStyle来定制。
- *    另外，通过OnClick属性可以注册按键回调函数，来处理用户的OK键动作。
- *
- * Q: 边缘格获取焦点放大后显示不全？
- * A: 设置padding，注意item的排布范围是控件的宽高减去对应的padding
- *
- * Q: 焦点怎么移出控件？
- * A: 当焦点移动到控件边缘时，会调用onEdge回调。在回调中通过参数传递的值来决定焦点转移的行为
- * 
- * Q: item内是可获焦的元素时该如何处理?
- * A: 焦点处理: item内的元素需要在注册的onFocus和onBlue回调中管理焦点. 即在onFocus时把焦点设置到内部的可获焦节点;
-      onBlur时将焦点给回父SimpleWidget, 注意此时是焦点树上的子节点往父节点切换, 此时为了把子节点blur掉, 
-      requestFocus函数需要传递一个false参数
--->
-<script>
-import { ref, reactive } from "vue";
-import RootView from "./RootView.vue";
-import Forge from "../ForgeDefine";
-import { TemplateParser } from "../TemplateParser";
-import { SingleRangeModel } from "../RangeModel";
-import Dispatcher from "./Dispatcher";
-import {
-  EdgeDirection,
-  VERTICAL,
-  HORIZONTAL,
-  SlideSetting,
-  SeamlessSlide,
-  getPositionRelativeToView,
-} from "../WidgetCommon";
-
-let emptyFunc = () => {};
-// randomColor() {
-//   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-//   return (
-//     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-//   );
-// },
-const _getPadding = function (padding) {
-  let result = {
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-  };
-
-  if (typeof padding !== "undefined" && padding !== null) {
-    Object.assign(result, padding);
-  }
-  return result;
-};
-
-const _AddTemplateItem = function (
-  data,
-  measure_func,
-  template_parser,
-  start_index
-) {
-  for (let i = start_index; i < data.length; i++) {
-    let block_item = measure_func(data[i]);
-    template_parser.ParseTemplateItem(block_item, data[i]);
-  }
-  template_parser.CalculateNeighborWhenAddStop();
-};
-
-const _getTemplateParser = function (
-  width,
-  height,
-  direction,
-  padding,
-  support_history_path,
-  layout_type
-) {
-  let fixed_padding = _getPadding(padding);
-  let line_max =
-    direction === VERTICAL
-      ? width - fixed_padding.left - fixed_padding.right
-      : height - fixed_padding.top - fixed_padding.bottom;
-  return new TemplateParser(
-    direction,
-    line_max,
-    layout_type,
-    width,
-    height,
-    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 defaultSlideSetting = new SeamlessSlide(0.2, 0.8);
-const SimpleWidget = {
-  components: { RootView },
-  props: {
-    padding: {
-      type: Object,
-      default() {
-        return {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        };
-      },
-    },
-    direction: {
-      type: Symbol,
-      default: HORIZONTAL,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    slideBoundary: {
-      validator(value) {
-        return !isNaN(value) && value < 0.5;
-      },
-      default: 0.2,
-    },
-    onClick: {
-      type: Function,
-      default: emptyFunc,
-    },
-    loopFocus: {
-      type: Boolean,
-      default: false,
-    },
-    onEdge: {
-      type: Function,
-      default: emptyFunc,
-    },
-    onFocus: {
-      type: Function,
-      default: emptyFunc,
-    },
-    onBlur: {
-      type: Function,
-      default: emptyFunc,
-    },
-    loadAll: {
-      type: Boolean,
-      default: false,
-    },
-    enableTouch: {
-      type: Boolean,
-      default: false,
-    },
-    flingPageWidth: {
-      type: Number,
-      default: -1,
-    },
-    flingPageEdge: {
-      type: Number,
-      default: 1 / 4,
-    },
-    dispatcher: {
-      type: Object,
-    },
-    measures: {
-      type: Function,
-      required: true,
-    },
-    baseAnchor: {
-      type: Object,
-    },
-    initFocusId: {
-      type: Number,
-      default: 0,
-    },
-    data: {
-      type: Array,
-    },
-    left: {
-      type: Number,
-      default: 0,
-    },
-    top: {
-      type: Number,
-      default: 0,
-    },
-    name: {
-      type: String,
-    },
-    supportHistoryPath: {
-      type: Boolean,
-      default: true,
-    },
-    itemConfig: {
-      type: Function,
-    },
-    onFocusChange: {
-      type: Function,
-    },
-    slideSetting: {
-      type: SlideSetting,
-      default: defaultSlideSetting,
-    },
-    layoutType: {
-      type: String,
-      default: "relative",
-    },
-    enableItemRenderBreak: {
-      type: Boolean,
-      default: false,
-    },
-    provideData: {
-      type: Function,
-    },
-  },
-  watch: {
-    data: function (value, oldValue) {
-      console.log("watch data change ", value, oldValue);
-    },
-  },
-  setup(props) {
-    return {
-      token: ref(0),
-      templateParser: null,
-      innerData: [],
-      dataList: [],
-
-      enterFocusId: -1,
-      enterFocusRect: null,
-      focusId: 0,
-      preFocusId: -1,
-      preEdgeRect: null,
-      isFocus: false,
-      perAnchor: null,
-      rootElement: null,
-
-      visibleStart: 0,
-      visibleRange: 0,
-      visibleRangeWithPadding: 0,
-
-      visibleItemIndexList: [],
-      needHideItemIndexList: [],
-
-      visibleRangeSearchBaseItem: 0,
-
-      touchContainerW: 0,
-      touchContainerH: 0,
-      touchListener: null,
-      innerPadding: null,
-      slidePile: null,
-      dragDirection: Forge.DragSetting.DIRECTION_HORIZONTAL,
-      vertical: props.direction == VERTICAL,
-      preAnchorItemIndex: -1,
-      wholePageHeadItem: {},
-    };
-  },
-  methods: {
-    //供外部获取SimpleWidget内部状态
-    _injectHandler() {
-      return {
-        getPosition: this._getPosition,
-        getTemplatePosition: this._getTemplatePosition,
-        getAbsolutePosition: this._getAbsolutePosition,
-        registerItemFunc: this._registerItemFunc,
-        getCurrentFocusId: this._getCurrentId,
-        isFocus: this._isFocus,
-        customerSlide: this.slideTo,
-        updateMounted: this._updateMounted,
-        registerItemRef: this._registerItemRef,
-        onFocusChange: this._onFocusChange,
-      };
-    },
-
-    _onFocusChange(id) {
-      this.onFocusChange?.(id);
-    },
-
-    _isFocus() {
-      return this.isFocus;
-    },
-
-    _getCurrentId() {
-      return {
-        id: this.focusId,
-        index: this.templateParser.FocusIdToIndex(this.focusId),
-      };
-    },
-
-    _registerItemFunc(index, handlerObj) {
-      this.innerData[index].itemHandler = handlerObj;
-    },
-
-    _registerItemRef(index, itemRef) {
-      this.innerData[index].itemRef = itemRef;
-    },
-
-    _updateMounted(index, mounted) {
-      if (index >= this.innerData.length) {
-        console.warn("sw updateMounted error: over range");
-        return;
-      }
-      this.innerData[index].mounted = mounted;
-    },
-
-    _getPosition(index) {
-      let item = this.templateParser.GetItem(index);
-      let x_offset = this.direction === VERTICAL ? 0 : -this.visibleStart;
-      let y_offset = this.direction === VERTICAL ? -this.visibleStart : 0;
-      return {
-        left: item.xPos + x_offset,
-        top: item.yPos + y_offset,
-        width: item.width,
-        height: item.height,
-      };
-    },
-
-    _getTemplatePosition(index) {
-      let item = this.templateParser.GetItem(index);
-      return {
-        left: item.xPos,
-        top: item.yPos,
-        width: item.width,
-        height: item.height,
-      };
-    },
-
-    _getAbsolutePosition(index, targetEle) {
-      return getPositionRelativeToView(
-        this.innerData[index].itemRef?.getDivElement(),
-        targetEle
-      );
-    },
-
-    _dispatchEvent(event) {
-      switch (event.type) {
-        case Dispatcher.Type.setEnterFocusId:
-          this.setEnterFocusId(event.data);
-          break;
-        case Dispatcher.Type.setEnterFocusRect:
-          this.setEnterFocusRect(event.data);
-          break;
-        case Dispatcher.Type.updateItem:
-          break;
-        case Dispatcher.Type.slideToItem:
-          if (event.data) {
-            this.slideToItem(event.data?.id, event.data?.doAnim);
-          }
-          break;
-        case Dispatcher.Type.setFocusId:
-          this.setFocusId(
-            event.data?.id,
-            event.data?.needSlide,
-            event.data?.doAnim
-          );
-          break;
-        default:
-          break;
-      }
-    },
-
-    setFocusId(id, needSlide = true, doAnim = false) {
-      let next_focus_item = this.templateParser.GetItemById(id);
-      if (next_focus_item) {
-        if (needSlide) {
-          this.slideToItem(this.templateParser.FocusIdToIndex(id), doAnim);
-        }
-
-        const cur_focus_item = this.templateParser.GetItemById(this.focusId);
-        this.preFocusId = this.focusId;
-        this.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;
-        this.preEdgeRect = {
-          direction: null,
-          rect: {
-            x: x_off_set,
-            y: y_off_set,
-            width: cur_focus_item.width,
-            height: cur_focus_item.height,
-          },
-        };
-        this._updateBlurItem();
-        this._updateFocusItem();
-        if (this.isFocus) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.preFocusId)
-          ].itemHandler.onBlur?.();
-        }
-        if (
-          this.isFocus &&
-          this.innerData[this.templateParser.FocusIdToIndex(this.focusId)]
-            .mounted
-        ) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.focusId)
-          ].itemHandler.onFocus?.(this.preEdgeRect);
-        }
-      }
-    },
-
-    setEnterFocusId(id) {
-      this.enterFocusId = id;
-    },
-
-    setEnterFocusRect(rect) {
-      this.enterFocusRect = rect;
-    },
-
-    slideTo(position, doAnim) {
-      if (
-        typeof position !== "undefined" &&
-        position != null &&
-        this.visibleStart !== position
-      ) {
-        this.visibleStart = position;
-        let animObj = null;
-        if (doAnim) {
-          animObj = {
-            easing: this.slideSetting.Easing,
-            onstart: null,
-            speed: this.slideSetting.Speed,
-            onend: this._onSlideEnd,
-          };
-        }
-        this.visibleRangeSearchBaseItem = this.focusId;
-        this._updateVisibleList(
-          this.focusId,
-          this.visibleStart,
-          this.visibleStart + this.visibleRangeWithPadding - 1
-        );
-        this._slideTo(this.visibleStart, animObj);
-      }
-    },
-
-    slideToItem(index, doAnim) {
-      const targetItem = this.templateParser.GetItem(index);
-      if (targetItem) {
-        const direction = index - this.preAnchorItemIndex > 0 ? 1 : -1;
-        const visible_start = this._calculateVisibleStart(
-          targetItem,
-          direction
-        );
-        this.slideTo(visible_start, doAnim);
-      }
-    },
-
-    freshData(force_update) {
-      //由于data不支持reactive, 因此数据的更新只通过provideData
-      if (!this.provideData) {
-        console.error("freshData: provideData is null.");
-        return;
-      }
-      let new_list = this.provideData();
-      let new_index = 0;
-      let template_list = this.templateParser.GetTemplate().List;
-      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 (new_index === template_list.length) {
-        //原始数据都在
-        if (new_index !== new_list.length) {
-          //增加数据
-          need_update_content = true;
-          _AddTemplateItem(
-            new_list,
-            this.measures,
-            this.templateParser,
-            new_index
-          );
-        } else {
-          //数据没变
-        }
-      } else {
-        //数据更改
-        need_update_content = true;
-        let template_parser = _getTemplateParser(
-          this.width,
-          this.height,
-          this.direction,
-          this.padding,
-          this.supportHistoryPath,
-          this.layoutType
-        );
-        _AddTemplateItem(new_list, this.measures, template_parser, 0);
-        this.templateParser = template_parser;
-      }
-      if (need_update_content) {
-        let template_list = this.templateParser.GetTemplate().List;
-        let last_item = template_list[template_list.length - 1];
-        this.touchListener = this._getTouchListener();
-        this.innerPadding = _getPadding(this.padding);
-        this.touchContainerW =
-          this.direction === VERTICAL
-            ? this.width
-            : last_item.xPos + last_item.width;
-        this.touchContainerH =
-          this.direction === VERTICAL
-            ? last_item.yPos + last_item.height
-            : this.height;
-        this.slidePile = new Forge.RectArea(
-          0,
-          0,
-          this.width - this.innerPadding.left - this.innerPadding.right,
-          this.height - this.innerPadding.top - this.innerPadding.bottom
-        );
-        this.dragDirection =
-          this.direction === VERTICAL
-            ? Forge.DragSetting.DIRECTION_VERTICAL
-            : Forge.DragSetting.DIRECTION_HORIZONTAL;
-        this.innerData = template_list.map((item, index) => {
-          return {
-            data: item,
-            index: index,
-            controller: reactive({
-              visible: false,
-              zIndex: 0,
-            }),
-            mounted: false,
-            itemRef: null,
-            //之前的update时itemView不一定会重新create，因此注册的函数可以重复使用。若create了则会覆盖。
-            itemHandler: this.innerData[index]
-              ? { ...this.innerData[index].itemHandler }
-              : {},
-            itemConfig: this.itemConfig?.(item.data),
-          };
-        });
-        this.token++;
-      }
-      if (this.focusId >= new_list.length) {
-        this.focusId = 0;
-        this.preFocusId = -1;
-        this.visibleRangeSearchBaseItem = 0;
-        if (this.visibleStart !== 0) {
-          this.visibleStart = 0;
-          this._slideTo(0, null);
-        }
-      }
-      //重新获取可视itemlist
-      this.visibleItemIndexList = this._getVisibleItemIndexList(
-        this.visibleRangeSearchBaseItem,
-        this.visibleStart,
-        this.visibleStart + this.visibleRange - 1
-      );
-      if (
-        this.isFocus &&
-        this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
-      ) {
-        this._updateFocusItem();
-        this.innerData[
-          this.templateParser.FocusIdToIndex(this.focusId)
-        ].itemHandler.onFocus?.(null);
-      }
-    },
-
-    _getVisibleItemIndexList(id, start, end) {
-      // 扩展可视范围，避免快速滚动时闪烁
-      let s = start - 100 > 0 ? start - 100 : 0;
-      let e = end + 100;
-      let visible_info = this.templateParser.GetVisibleItemList(s, e, id);
-      let start_index = visible_info.visibleStart;
-      let end_index = visible_info.visibleEnd;
-
-      let index_list = new Array(end_index - start_index + 1);
-      for (let i = start_index; i <= end_index; i++) {
-        index_list[i - start_index] = i;
-      }
-      return index_list;
-    },
-
-    _calculateNearestItemByRect(visible_item_index_list, 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 = this.direction === VERTICAL ? "yPos" : "xPos";
-      let key_width = this.direction === VERTICAL ? "height" : "width";
-      for (let index of visible_item_index_list) {
-        let item = this.templateParser.GetItem(index);
-        if (!item.focusable) continue;
-        let full_show =
-          item[key_pos] >= this.visibleStart &&
-          item[key_pos] + item[key_width] - 1 <=
-            this.visibleStart + this.visibleRange - 1;
-        if (full_show) {
-          let x_pos =
-            this.direction === VERTICAL
-              ? item.xPos
-              : item.xPos - this.visibleStart;
-          let y_pos =
-            this.direction === VERTICAL
-              ? item.yPos - this.visibleStart
-              : 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;
-      }
-    },
-
-    _updateItemVisibility(item_index_list, visibility) {
-      for (let index of item_index_list) {
-        this.innerData[index].controller.visible = visibility;
-      }
-    },
-
-    _onClick(index) {
-      return this.innerData[index].itemHandler.onClick?.();
-    },
-
-    onKeyDown(ev) {
-      let horizontal_direction = 0;
-      let vertical_direction = 0;
-      switch (ev.keyCode) {
-        case 37:
-          horizontal_direction = -1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 38:
-          vertical_direction = -1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 39:
-          horizontal_direction = 1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 40:
-          vertical_direction = 1;
-          this._moveToNext(horizontal_direction, vertical_direction);
-          break;
-        case 13:
-          this._onClick(this.templateParser.FocusIdToIndex(this.focusId));
-          break;
-        default:
-          //只接受上下左右确定键
-          return false;
-      }
-      return true;
-    },
-
-    _updateVisibleList(baseItemId, cur_visible_start, cur_visible_end) {
-      let pre_visible_list = this.visibleItemIndexList;
-      this.visibleItemIndexList = this._getVisibleItemIndexList(
-        baseItemId,
-        cur_visible_start,
-        cur_visible_end
-      );
-      for (let index of pre_visible_list) {
-        if (
-          this.visibleItemIndexList.indexOf(index) < 0 &&
-          this.needHideItemIndexList.indexOf(index) < 0
-        ) {
-          this.needHideItemIndexList.push(index);
-        }
-      }
-      for (let index of this.visibleItemIndexList) {
-        let i = this.needHideItemIndexList.indexOf(index);
-        if (i >= 0) {
-          this.needHideItemIndexList.splice(i, 1);
-        }
-      }
-
-      this.visibleStart = cur_visible_start;
-      //可见的item设置visibility
-      this._updateItemVisibility(this.visibleItemIndexList, true);
-    },
-
-    _slideTo(target, animObj) {
-      if (this.direction === HORIZONTAL) {
-        this.rootElement.updatePosition(-target, 0, animObj);
-      } else {
-        this.rootElement.updatePosition(0, -target, animObj);
-      }
-    },
-
-    _moveToNext(horizontal_direction, vertical_direction, item_edge_rect) {
-      let cur_focus_item = this.templateParser.GetItemById(this.focusId);
-      let next_item_id = this.templateParser.GetNextItem(
-        this.focusId,
-        vertical_direction,
-        horizontal_direction,
-        this.loopFocus
-      );
-      if (next_item_id >= 0) {
-        this.preFocusId = this.focusId;
-        let next_focus_item = this.templateParser.GetItemById(next_item_id);
-        this.focusId = next_focus_item.id;
-        let direction =
-          this.direction === VERTICAL
-            ? vertical_direction
-            : horizontal_direction;
-
-        let cur_visible_start = this._calculateVisibleStart(
-          next_focus_item,
-          direction
-        );
-        if (
-          !this.innerData[this.templateParser.FocusIdToIndex(next_item_id)]
-            .itemConfig?.takeOverSlide &&
-          this.visibleStart !== cur_visible_start
-        ) {
-          this.visibleStart = cur_visible_start;
-          let animObj = {
-            easing: "",
-            onstart: null,
-            speed: this.slideSetting.Speed,
-            onend: this._onSlideEnd,
-          };
-          this._slideTo(this.visibleStart, animObj);
-          this.visibleRangeSearchBaseItem = next_item_id;
-          this._updateVisibleList(
-            next_item_id,
-            cur_visible_start,
-            cur_visible_start + this.visibleRangeWithPadding - 1
-          );
-        } else {
-          // 无滚动, 通知父滚动
-        }
-
-        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.x += x_off_set;
-          item_edge_rect.rect.y += y_off_set;
-          rect = item_edge_rect;
-        } else {
-          rect = {
-            direction: null,
-            rect: {
-              x: x_off_set,
-              y: y_off_set,
-              width: cur_focus_item.width,
-              height: cur_focus_item.height,
-            },
-          };
-        }
-        this.preEdgeRect = rect;
-        this._updateBlurItem();
-        this._updateFocusItem();
-        if (this.isFocus) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.preFocusId)
-          ].itemHandler.onBlur?.();
-        }
-
-        if (
-          this.isFocus &&
-          this.innerData[this.templateParser.FocusIdToIndex(this.focusId)]
-            .mounted
-        ) {
-          this.innerData[
-            this.templateParser.FocusIdToIndex(this.focusId)
-          ].itemHandler.onFocus?.(this.preEdgeRect);
-        }
-      } else {
-        let x_off_set = this.direction === VERTICAL ? 0 : this.visibleStart;
-        let y_off_set = this.direction === VERTICAL ? this.visibleStart : 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,
-        };
-        if (this.onEdge) {
-          this.onEdge({ direction: edge, rect: rect });
-        }
-        this.innerData[
-          this.templateParser.FocusIdToIndex(this.focusId)
-        ].itemHandler.reachEdge?.({
-          direction: edge,
-        });
-      }
-    },
-
-    _adjustToValidPosition(visible_start, adjust_end) {
-      //TODO 优化
-      let last_item = this.templateParser.GetItem(-1);
-      let pos_key = directionFreeKeyMap.pos[this.direction === VERTICAL];
-      let size_key = directionFreeKeyMap.size[this.direction === VERTICAL];
-      let padding = _getPadding(this.padding);
-
-      let padding_offset =
-        this.direction === VERTICAL
-          ? padding["bottom"] + padding["top"]
-          : padding["right"] + padding["left"];
-      let visible_range =
-        (this.direction === VERTICAL ? this.height : this.width) -
-        padding_offset;
-
-      let last_position = last_item[pos_key] + last_item[size_key];
-      let last_item_off_set = last_position - visible_range;
-      last_item_off_set = last_item_off_set < 0 ? 0 : last_item_off_set;
-      if (adjust_end && visible_start > last_item_off_set) {
-        return last_item_off_set;
-      } else if (visible_start < 0) {
-        return 0;
-      } else {
-        return visible_start;
-      }
-    },
-
-    _getPageHeadItem(start, end, visible_start, pos_key) {
-      if (start != end) {
-        const center = Math.floor((start + end) / 2);
-        if (this.templateParser.GetItem(center)[pos_key] >= visible_start) {
-          return this._getPageHeadItem(start, center, visible_start, pos_key);
-        } else {
-          return this._getPageHeadItem(center + 1, end, visible_start, pos_key);
-        }
-      } else {
-        return start;
-      }
-    },
-
-    _findNearestPageHeadItem(num) {
-      let max_page = -1;
-      for (let i in this.wholePageHeadItem) {
-        if (i < num && i > max_page) {
-          max_page = i;
-        }
-      }
-      if (max_page >= 0) {
-        return this.wholePageHeadItem[max_page];
-      } else {
-        return 0;
-      }
-    },
-
-    _calculateVisibleStart(target_item, direction) {
-      if (!target_item) {
-        console.error(
-          "SimpleWidget: _calculateVisibleStart target item is null"
-        );
-        return 0;
-      }
-      this.preAnchorItemIndex = target_item.index;
-      let pos_key = directionFreeKeyMap.pos[this.vertical];
-      let size_key = directionFreeKeyMap.size[this.vertical];
-      let center_key = directionFreeKeyMap.center[this.vertical];
-      let new_visible_start = this.visibleStart;
-
-      let page_start_index;
-      let page_num;
-      switch (this.slideSetting.Type) {
-        case SlideSetting.Type.FIX_POSITION:
-          //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
-          new_visible_start = Math.ceil(
-            target_item[center_key] -
-              this.visibleRange * this.slideSetting.FixPercent
-          );
-          break;
-        case SlideSetting.Type.WHOLE_PAGE:
-          page_num = Math.floor(target_item[pos_key] / this.visibleRange);
-          if (typeof this.wholePageHeadItem[page_num] !== "undefined") {
-            page_start_index = this.wholePageHeadItem[page_num];
-          } else {
-            new_visible_start = page_num * this.visibleRange;
-            page_start_index = this._getPageHeadItem(
-              this._findNearestPageHeadItem(page_num),
-              target_item.index,
-              new_visible_start,
-              pos_key
-            );
-            this.wholePageHeadItem[page_num] = page_start_index;
-          }
-          new_visible_start =
-            this.templateParser.GetItem(page_start_index)[pos_key];
-          break;
-        case SlideSetting.Type.SEAMLESS:
-          if (direction > 0) {
-            if (
-              target_item[pos_key] + target_item[size_key] >
-              this.visibleStart +
-                this.visibleRange * this.slideSetting.EndPercent
-            ) {
-              new_visible_start =
-                target_item[pos_key] +
-                target_item[size_key] -
-                this.visibleRange * this.slideSetting.EndPercent;
-            }
-          } else if (direction < 0) {
-            if (
-              target_item[pos_key] <
-              this.visibleStart +
-                this.visibleRange * this.slideSetting.StartPercent
-            ) {
-              new_visible_start =
-                target_item[pos_key] -
-                this.visibleRange * this.slideSetting.StartPercent;
-            }
-          } else {
-            //不是沿widget方向的移动
-            if (target_item[pos_key] < this.visibleStart) {
-              new_visible_start =
-                target_item[pos_key] -
-                this.visibleRange * this.slideSetting.StartPercent;
-            } else if (
-              target_item[pos_key] + target_item[size_key] >
-              this.visibleStart + this.visibleRange
-            ) {
-              new_visible_start =
-                target_item[pos_key] +
-                target_item[size_key] -
-                this.visibleRange * this.slideSetting.EndPercent;
-            }
-          }
-          break;
-        default:
-          console.error(
-            "SimpleWidget: undefined slide type",
-            this.slideSetting.Type
-          );
-      }
-
-      if (
-        (this.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) >
-        0
-      ) {
-        let boundary = 0;
-        if (!this.templateParser.GetItem(0).focusable) {
-          //首个元素是占位符
-          boundary = this.templateParser.GetItem(0)[size_key];
-        }
-        new_visible_start =
-          new_visible_start < boundary ? 0 : new_visible_start;
-      }
-      if ((this.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
-        let last_item = this.templateParser.GetItem(-1);
-        let last_visible_start =
-          last_item[pos_key] + last_item[size_key] - this.visibleRange - 1;
-        last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
-        let boundary = last_visible_start;
-        if (!last_item.focusable) {
-          //最后个元素是占位符
-          boundary = last_item[pos_key] - this.visibleRange;
-        }
-        new_visible_start =
-          new_visible_start > boundary ? last_visible_start : new_visible_start;
-      }
-      return new_visible_start;
-    },
-
-    _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;
-      }
-      this._moveToNext(horizontal_direction, vertical_direction, edge_info);
-    },
-
-    _ifValidEnterRect(rect_info) {
-      return rect_info && rect_info.direction && rect_info.rect;
-    },
-
-    _setZIndex(index, z_index) {
-      this.innerData[index].controller.zIndex = z_index;
-    },
-
-    _onFocus() {
-      let focus_id =
-        typeof this.enterFocusId !== "undefined" &&
-        this.enterFocusId >= 0 &&
-        this.enterFocusId < this.templateParser.GetTemplate().List.length
-          ? this.enterFocusId
-          : this.focusId;
-      focus_id = this._ifValidEnterRect(this.enterFocusRect)
-        ? this._calculateNearestItemByRect(
-            this.visibleItemIndexList,
-            this.enterFocusRect
-          )
-        : focus_id;
-
-      this.isFocus = true;
-      this.focusId = focus_id;
-      this.preFocusId = -1;
-      this.enterFocusId = -1;
-      this.enterFocusRect = null;
-      this._updateFocusItem();
-
-      if (
-        this.isFocus &&
-        this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
-      ) {
-        this.innerData[
-          this.templateParser.FocusIdToIndex(this.focusId)
-        ].itemHandler.onFocus?.(this.preEdgeRect);
-      }
-
-      if (this.onFocus) {
-        this.onFocus();
-      }
-    },
-
-    _onBlur() {
-      this.isFocus = false;
-      this.enterFocusId = -1;
-      this.enterFocusRect = null;
-
-      this.preFocusId = this.focusId;
-      this.preEdgeRect = null;
-      this._updateBlurItem();
-      this.innerData[
-        this.templateParser.FocusIdToIndex(this.preFocusId)
-      ].itemHandler.onBlur?.();
-
-      if (this.onBlur) {
-        this.onBlur();
-      }
-    },
-
-    _applyHideItemIndexList() {
-      this._updateItemVisibility(this.needHideItemIndexList, false);
-      this.needHideItemIndexList = [];
-    },
-
-    _onSlideEnd(event) {
-      if (event && event.stopPropagation) {
-        event.stopPropagation();
-      }
-      this._applyHideItemIndexList();
-    },
-
-    _onContentUpdate() {
-      this._updateItemVisibility(this.visibleItemIndexList, true);
-      this._updateFocusItem();
-    },
-
-    _updateFocusItem() {
-      this._setZIndex(
-        this.templateParser.FocusIdToIndex(this.focusId),
-        this.innerData.length
-      );
-    },
-
-    _updateBlurItem() {
-      this._setZIndex(this.templateParser.FocusIdToIndex(this.preFocusId), 0);
-    },
-
-    _updateFocusByDragInfo(viewX, viewY) {
-      let enterFocusRect = null;
-      //模拟最小区域作为输入区域
-      if (this.direction === VERTICAL) {
-        enterFocusRect = {
-          direction: EdgeDirection.top,
-          rect: {
-            x: this.left - viewX,
-            y: this.top - viewY,
-            width: 10,
-            height: 10,
-          },
-        };
-      } else {
-        enterFocusRect = {
-          direction: EdgeDirection.left,
-          rect: {
-            x: this.left - viewX,
-            y: this.top - viewY,
-            width: 10,
-            height: 10,
-          },
-        };
-      }
-      this.focusId = this._calculateNearestItemByRect(
-        this.visibleItemIndexList,
-        enterFocusRect
-      );
-    },
-
-    _registerRootView(ele) {
-      this.rootElement = ele;
-    },
-
-    _tryReoprtVisibleEvent(msg) {
-      if (typeof msg.viewY != "undefined" && typeof msg.viewX != "undefined") {
-        if (this.direction === VERTICAL) {
-          this.visibleStart = -msg.viewY;
-        } else {
-          this.visibleStart = -msg.viewX;
-        }
-        if (this.visibleStart < 0) {
-          this.visibleStart = 0;
-        }
-      }
-
-      let cur_visible_start =
-        this.visibleStart - this.visibleRangeWithPadding * 2;
-      let cur_visible_end =
-        this.visibleStart + this.visibleRangeWithPadding * 3 - 1;
-      let baseItemId = this.visibleRangeSearchBaseItem
-        ? this.visibleRangeSearchBaseItem
-        : 0;
-      this._updateVisibleList(baseItemId, cur_visible_start, cur_visible_end);
-    },
-
-    _getTouchListener() {
-      if (!this.enableTouch) {
-        return null;
-      }
-      let callback = {
-        OnDragStart: (msg) => {
-          // console.log("SimpleWidget Container OnDragStart:", msg);
-          //删除焦点
-          Promise.resolve().then(() => {
-            this._tryReoprtVisibleEvent(msg);
-            Forge.sRenderBridge.InstantPerformSwap();
-          });
-          return true;
-        },
-        OnMoved: (msg) => {
-          Promise.resolve().then(() => {
-            this._tryReoprtVisibleEvent(msg);
-            Forge.sRenderBridge.InstantPerformSwap();
-          });
-          return true;
-        },
-        OnDragEnd: (msg) => {
-          // console.log("SimpleWidget Container OnDragEnd:", msg);
-          this._tryReoprtVisibleEvent(msg);
-          this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          this._onSlideEnd();
-          return true;
-        },
-        OnFling: (msg) => {
-          // console.log("SimpleWidget Container OnFling:", msg);
-          this._tryReoprtVisibleEvent(msg);
-          this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          this._onSlideEnd();
-          return true;
-        },
-        OnRelease: () => {
-          // console.log("SimpleWidget Container OnRelease:", msg);
-          return true;
-        },
-      };
-      return callback;
-    },
-    _getFocusBlockActions() {
-      return {
-        onFocus: this._onFocus,
-        onBlur: this._onBlur,
-        onKeyDown: this.onKeyDown,
-      };
-    },
-  },
-  created() {
-    if (this.dispatcher) {
-      this.dispatcher.registerComponent(this);
-    }
-
-    let template_parser = _getTemplateParser(
-      this.width,
-      this.height,
-      this.direction,
-      this.padding,
-      this.supportHistoryPath,
-      this.layoutType
-    );
-    if (this.provideData) {
-      this.dataList = this.provideData();
-    } else if (this.data) {
-      this.dataList = this.data;
-    }
-    _AddTemplateItem(this.dataList, this.measures, template_parser, 0);
-    this.templateParser = template_parser;
-    let template_list = this.templateParser.GetTemplate().List;
-    let last_item = template_list[template_list.length - 1];
-    this.touchListener = this._getTouchListener();
-    this.innerPadding = _getPadding(this.padding);
-    this.touchContainerW =
-      this.direction === VERTICAL
-        ? this.width
-        : last_item.xPos + last_item.width;
-    this.touchContainerH =
-      this.direction === VERTICAL
-        ? last_item.yPos + last_item.height
-        : this.height;
-    this.slidePile = new Forge.RectArea(
-      0,
-      0,
-      this.width - this.innerPadding.left - this.innerPadding.right,
-      this.height - this.innerPadding.top - this.innerPadding.bottom
-    );
-    this.dragDirection =
-      this.direction === VERTICAL
-        ? Forge.DragSetting.DIRECTION_VERTICAL
-        : Forge.DragSetting.DIRECTION_HORIZONTAL;
-    this.innerData = template_list.map((item, index) => {
-      return {
-        data: item,
-        index: index,
-        controller: reactive({
-          visible: false,
-          zIndex: 0,
-        }),
-        mounted: false,
-        itemRef: null,
-        itemHandler: {},
-        itemConfig: this.itemConfig?.(item.data),
-      };
-    });
-    let visible_base_index = 0;
-    let init_focus_id = 0;
-    let cur_visible_start = 0;
-    this.visibleRange =
-      this.direction === VERTICAL
-        ? this.height - this.innerPadding.top - this.innerPadding.bottom
-        : this.width - this.innerPadding.left - this.innerPadding.right;
-    this.visibleRangeWithPadding =
-      this.direction === VERTICAL ? this.height : this.width;
-    if (this.initFocusId) {
-      init_focus_id = this.initFocusId;
-      visible_base_index = this.templateParser.FocusIdToIndex(init_focus_id);
-      cur_visible_start = this._calculateVisibleStart(
-        this.templateParser.GetItemById(this.initFocusId),
-        1
-      );
-    }
-
-    this.visibleItemIndexList = this._getVisibleItemIndexList(
-      visible_base_index,
-      cur_visible_start,
-      cur_visible_start + this.visibleRange - 1
-    );
-    this.focusId = init_focus_id;
-    this.visibleStart = cur_visible_start;
-  },
-  updated() {},
-  mounted() {
-    if (this.visibleStart) {
-      this._slideTo(this.visibleStart, null);
-    }
-  },
-  beforeUnmount() {
-    if (this.dispatcher) {
-      this.dispatcher.unregisterComponent();
-    }
-  },
-};
-
-export default SimpleWidget;
-</script>
-
-<template>
-  <jsv-focus-block :name="name" :onAction="_getFocusBlockActions()">
-    <div
-      :style="{
-        left: left,
-        top: top,
-        width: width,
-        height: height,
-        overflow: 'hidden',
-      }"
-    >
-      <root-view
-        :token="token"
-        :x="innerPadding.left"
-        :y="innerPadding.top"
-        :width="touchContainerW"
-        :height="touchContainerH"
-        :flingPageWidth="flingPageWidth"
-        :flingPageEdge="flingPageEdge"
-        :slidePile="slidePile"
-        :direction="dragDirection"
-        :touchListener="touchListener"
-        :enableTouch="enableTouch"
-        :loadAll="loadAll"
-        :register="_registerRootView"
-        :data="innerData"
-        :onLoad="_onContentUpdate"
-        :onItemEdge="_onFocusableItemEdge"
-        :widgetHandler="_injectHandler()"
-        :enableItemRenderBreak="enableItemRenderBreak"
-      >
-        <template v-slot:renderItem="slotProps">
-          <slot name="renderItem" v-bind="slotProps"></slot>
-        </template>
-      </root-view>
-    </div>
-  </jsv-focus-block>
-</template>