@shijiu/jsview-vue 0.9.359-alpha.0 → 0.9.422

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -0,0 +1,1860 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-22 16:08:58
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-03-25 18:08:58
+ * @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的配置信息
+ *      enableItemRenderBreak {boolean} 按键事件是否能打断item的描画, 默认为false
+ *      placeHolderSetting {Object} item描画可打断时, 显示的占位符
+                                    {
+                                      backgroundColor: 纯色占位符
+                                      borderRadius: 占位符圆角设置
+                                      gap: 占位符之间的gap
+                                    }
+ *      sendFocusRectEvent {boolean} item获焦时在焦点树上冒泡一个事件, MetroWidget接收到事件时会触发滚动操作, 一般用于嵌套
+                                     时的滚动
+
+ *      data {array} 数据列表
+ *      provideData {function} 获取数据的回调, 与data二选一
+ *      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}
+                                          doSlide: item获得焦点时是否滚动, 一般用于嵌套的情景, 由内部组件控制滚动
+                                        }
+ *
+ *      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:
+        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 滚动时是否做动画
+        refreshData
+          @description 刷新数据, 只有存在provideData时才会生效
+          @params {boolean} forceUpdate 是否强制刷新
+ * 【技巧说明】
+ * 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,
+  getPositionRelativeToView,
+  SlideSetting,
+  SeamlessSlide,
+} 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
+//   );
+// },
+
+class TemplateItemAdder {
+  constructor(template_parser, data, measure_func, page_range, side_effect) {
+    this._TemplateParser = template_parser;
+    this._Data = data;
+    this._PageRange = page_range;
+    this._MeasureFunc = measure_func;
+    this._CurIndex = 0;
+    this._CurPage = 0;
+    this._KeyIndex = 0; //分页处的item
+    this._SideEffect = side_effect;
+    this._Key =
+      this._TemplateParser._Template.Orient.type === HORIZONTAL
+        ? "xPos"
+        : "yPos";
+  }
+
+  tryAddItem(cur_item = null, page_num = 1) {
+    let added = false;
+    if (
+      this._CurIndex < this._Data.length &&
+      (!cur_item ||
+        cur_item[this._Key] >= (this._CurPage - 1) * this._PageRange)
+    ) {
+      while (this._CurIndex < this._Data.length) {
+        let item = this._TemplateParser.ParseTemplateItem(
+          this._MeasureFunc(this._Data[this._CurIndex]),
+          this._Data[this._CurIndex]
+        );
+        this._SideEffect?.(item);
+        this._CurIndex++;
+        if (item[this._Key] >= (this._CurPage + page_num) * this._PageRange) {
+          this._CurPage += page_num;
+          break;
+        }
+      }
+      this._TemplateParser.CalculateNeighborWhenAddStop();
+      added = true;
+    }
+    // 添加完成需要计算neighbor
+    return added;
+  }
+
+  tryAddItemByPosition(position) {
+    const page_num = Math.ceil(position / this._PageRange + 1);
+    if (page_num > this._CurPage) {
+      this.tryAddItem(null, page_num - this._CurPage);
+    }
+  }
+
+  tryAddItemByIndex(index) {
+    let added = false;
+    while (this._CurIndex <= index) {
+      added = true;
+      let item = this._TemplateParser.ParseTemplateItem(
+        this._MeasureFunc(this._Data[this._CurIndex]),
+        this._Data[this._CurIndex]
+      );
+      this._SideEffect?.(item);
+      this._CurIndex++;
+      if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+        this._CurPage++;
+      }
+    }
+    if (added) {
+      this._TemplateParser.CalculateNeighborWhenAddStop();
+    }
+    //再添加一屏
+    this.tryAddItem(this._TemplateParser.GetItem(index), 2);
+  }
+
+  tryAddItemById(id) {
+    const last_item = this._TemplateParser.GetItem(-1);
+    if (!last_item || last_item.id < id) {
+      let added = false;
+      let item = last_item;
+      while (!item || item.id < id) {
+        added = true;
+        item = this._TemplateParser.ParseTemplateItem(
+          this._MeasureFunc(this._Data[this._CurIndex]),
+          this._Data[this._CurIndex]
+        );
+        this._SideEffect?.(item);
+        if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+          this._CurPage++;
+        }
+        this._CurIndex++;
+      }
+      if (added) {
+        this._TemplateParser.CalculateNeighborWhenAddStop();
+      }
+    }
+    //再添加一屏
+    this.tryAddItem(this._TemplateParser.GetItemById(id), 2);
+  }
+
+  updateData(data) {
+    this._Data = data;
+  }
+}
+
+class ItemRange {
+  constructor(start, end) {
+    this.start = start;
+    this.end = end;
+  }
+
+  _merge(from, to) {
+    if (to.ifOverlap(from)) {
+      to.start = Math.min(from.start, to.start);
+      to.end = Math.max(from.end, to.end);
+      return true;
+    }
+    return false;
+  }
+
+  merge(from) {
+    let to = this.clone();
+    this._merge(from, to);
+    return to;
+  }
+
+  selfMerge(from) {
+    return this._merge(from, this);
+  }
+
+  ifOverlap(range) {
+    return this.start <= range.end && range.start <= this.end;
+  }
+
+  clone() {
+    return new ItemRange(this.start, this.end);
+  }
+}
+
+function mergeRangeList(list_1, list_2) {
+  const result_list = list_1.concat();
+  for (let list_2_item of list_2) {
+    let item = list_2_item.clone();
+    for (let i = result_list.length - 1; i >= 0; i--) {
+      if (item.selfMerge(result_list[i])) {
+        result_list.splice(i, 1);
+      }
+    }
+    result_list.push(item);
+  }
+  return result_list;
+}
+
+class PageUpdater {
+  constructor(update_func) {
+    this.tmpRangeList = [];
+    this.rangeList = [];
+
+    this._updateFunc = update_func;
+  }
+
+  update(template, visible_start, visible_end, anchor_id, merge_tmp) {
+    let visible_range = template.GetVisibleItemList(
+      visible_start,
+      visible_end,
+      anchor_id
+    );
+    let range = new ItemRange(
+      visible_range.visibleStart,
+      visible_range.visibleEnd
+    );
+
+    if (this.rangeList.length > 0) {
+      let pre_tmp = this.tmpRangeList;
+      if (range.ifOverlap(this.rangeList[0])) {
+        this.tmpRangeList = [range.merge(this.rangeList[0])];
+      } else {
+        this.tmpRangeList = [range, this.rangeList[0]];
+      }
+      if (merge_tmp) {
+        this.tmpRangeList = mergeRangeList(this.tmpRangeList, pre_tmp);
+      }
+    }
+
+    this.rangeList = [range];
+  }
+
+  debugPrint() {
+    return (
+      "list: " +
+      JSON.stringify(this.rangeList) +
+      ", tmplist: " +
+      JSON.stringify(this.tmpRangeList)
+    );
+  }
+
+  apply() {
+    this.tmpRangeList = [];
+    this._updateFunc(this.rangeList);
+  }
+
+  applyTmp() {
+    if (this.tmpRangeList.length > 0) {
+      this._updateFunc(this.tmpRangeList);
+    }
+  }
+
+  getRange() {
+    return this.rangeList[0];
+  }
+}
+
+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 _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 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,
+    },
+    placeHolderSetting: {
+      type: Object,
+    },
+    sendFocusRectEvent: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    data: function (value, oldValue) {
+      console.log("watch data change ", value, oldValue);
+    },
+  },
+  setup(props) {
+    return {
+      refreshToken: ref(0),
+      dataUpdateToken: 0,
+      templateParser: null,
+      innerData: [],
+      dataList: [],
+      pageUpdater: null,
+
+      enterFocusId: -1,
+      enterFocusRect: null,
+      focusId: 0,
+      preFocusId: -1,
+      preEdgeRect: null,
+      isFocus: false,
+      perAnchor: null,
+      rootElement: null,
+
+      visibleStart: 0,
+      visibleRange: 0,
+      visibleRangeWithPadding: 0,
+
+      touchContainerW: 0,
+      touchContainerH: 0,
+      touchListener: null,
+      innerPadding: null,
+      slidePile: null,
+      dragDirection: Forge.DragSetting.DIRECTION_HORIZONTAL,
+      vertical: props.direction == VERTICAL,
+      preAnchorItemIndex: -1,
+      templateItemAdder: null,
+      itemRender: ref(false),
+    };
+  },
+  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,
+        getPreEdgeRect: this._getPreEdgeRect,
+        sendCustomerEvent: this._bubbleCustomerEvent,
+        handler: this,
+      };
+    },
+
+    _getPreEdgeRect() {
+      return this.preEdgeRect;
+    },
+
+    _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) {
+      this.templateItemAdder.tryAddItemById(id);
+      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.templateItemAdder.tryAddItemById(id);
+      this.enterFocusId = id;
+    },
+
+    setEnterFocusRect(rect) {
+      this.enterFocusRect = rect;
+    },
+
+    slideTo(position, doAnim) {
+      this.templateItemAdder.tryAddItemByPosition(position);
+      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._slideTo(this.visibleStart, animObj);
+
+        this.pageUpdater.update(
+          this.templateParser,
+          this.visibleStart,
+          this.visibleStart + this.visibleRangeWithPadding - 1,
+          this.focusId
+        );
+        if (doAnim) {
+          this.pageUpdater.applyTmp();
+        } else {
+          this.pageUpdater.apply();
+        }
+      }
+    },
+
+    slideToItem(index, doAnim) {
+      this.templateItemAdder.tryAddItemByIndex(index);
+      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);
+      }
+    },
+
+    refreshData(force_update) {
+      //由于data不支持reactive, 因此数据的更新只通过provideData
+      if (!this.provideData) {
+        console.error("refreshData: provideData is null.");
+        return;
+      }
+      let template_list = this.templateParser.GetTemplate().List;
+      let new_list = this.provideData();
+      if (this.focusId >= new_list.length) {
+        this.focusId = 0;
+        this.preFocusId = -1;
+        if (this.visibleStart !== 0) {
+          this.visibleStart = 0;
+          this._slideTo(0, null);
+        }
+      }
+      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 (new_index === template_list.length) {
+        //原始数据都在
+        if (new_index !== new_list.length) {
+          //增加数据
+          need_update_content = true;
+          this.templateItemAdder.updateData(new_list);
+        } else {
+          //数据没变
+        }
+      } else {
+        //数据更改
+        need_update_content = true;
+        let template_parser = _getTemplateParser(
+          this.width,
+          this.height,
+          this.direction,
+          this.padding,
+          this.supportHistoryPath,
+          this.layoutType
+        );
+        this.innerData = [];
+        this.dataList = new_list;
+        this.templateItemAdder = new TemplateItemAdder(
+          template_parser,
+          new_list,
+          this.measures,
+          this.visibleRangeWithPadding,
+          this._onTemplateAdd
+        );
+        this.templateItemAdder.tryAddItemById(this.focusId);
+        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.pageUpdater.update(
+        this.templateParser,
+        this.visibleStart,
+        this.visibleStart + this.visibleRangeWithPadding - 1,
+        this.focusId
+      );
+      this.dataUpdateToken++;
+      this.pageUpdater.apply();
+      if (
+        this.isFocus &&
+        this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
+      ) {
+        this._updateFocusItem();
+        this.innerData[
+          this.templateParser.FocusIdToIndex(this.focusId)
+        ].itemHandler.onFocus?.(null);
+      }
+    },
+
+    _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 = this.direction === VERTICAL ? "yPos" : "xPos";
+      let key_width = this.direction === VERTICAL ? "height" : "width";
+      for (
+        let index = visible_range.start;
+        index <= visible_range.end;
+        index++
+      ) {
+        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;
+      }
+    },
+
+    _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;
+    },
+
+    _slideTo(target, animObj) {
+      if (this.direction === HORIZONTAL) {
+        this.rootElement.updatePosition(-target, 0, animObj);
+      } else {
+        this.rootElement.updatePosition(0, -target, animObj);
+      }
+    },
+
+    _onTemplateAdd(item) {
+      this.innerData.push({
+        data: item,
+        index: this.innerData.length,
+        controller: reactive({
+          // visible: false,
+          zIndex: 0,
+        }),
+        mounted: false,
+        itemRef: null,
+        itemHandler: {},
+        itemConfig: this.itemConfig?.(item.data),
+      });
+    },
+
+    _onCustomerEvent(ev) {
+      if (ev.type === "focusRect") {
+        if (ev.ownerNode == this) {
+          return false;
+        }
+        let item_div = ev.element;
+        let direction = 0;
+        if (this.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;
+          }
+        }
+        let item_layout = getPositionRelativeToView(
+          item_div,
+          this.$refs.rootView.getLocateDiv()
+        );
+        let obj = {
+          xPos: item_layout.left,
+          yPos: item_layout.top,
+          width: item_layout.width,
+          height: item_layout.height,
+          index: this.templateParser.FocusIdToIndex(this.focusId),
+        };
+        let cur_slide = this._calculateVisibleStart(obj, direction);
+        if (cur_slide != this.visibleStart) {
+          this.visibleStart = cur_slide;
+          this.pageUpdater.update(
+            this.templateParser,
+            this.visibleStart,
+            this.visibleStart + this.visibleRangeWithPadding - 1,
+            this.focusId,
+            true
+          );
+          this.pageUpdater.applyTmp();
+          this._slideTo(this.visibleStart, {
+            easing: "",
+            onstart: null,
+            speed: this.slideSetting.Speed,
+            onend: this._onSlideEnd,
+          });
+
+          return true;
+        }
+      }
+      return false;
+    },
+
+    _bubbleCustomerEvent(event) {
+      if (this.sendFocusRectEvent && event) {
+        event.ownerNode = this;
+        this.$refs.focusNode?.bubbleCustomerEvent(event);
+      }
+    },
+
+    _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.templateItemAdder.tryAddItem(next_focus_item, 1);
+        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
+        ) {
+          if (next_focus_item.doSlide) {
+            this.visibleStart = cur_visible_start;
+            let animObj = {
+              easing: "",
+              onstart: null,
+              speed: this.slideSetting.Speed,
+              onend: this._onSlideEnd,
+            };
+            this._slideTo(this.visibleStart, animObj);
+          }
+          this.pageUpdater.update(
+            this.templateParser,
+            cur_visible_start,
+            cur_visible_start + this.visibleRangeWithPadding - 1,
+            next_item_id
+          );
+          this.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.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,
+            },
+          };
+        }
+        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;
+      }
+    },
+
+    _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;
+
+      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:
+          new_visible_start = this.templateParser.GetItem(
+            target_item.pageHeadIndex
+          )[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;
+        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.pageUpdater.getRange(),
+            this.enterFocusRect
+          )
+        : focus_id;
+      this.preEdgeRect = this.enterFocusRect;
+      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();
+      }
+    },
+
+    _onSlideEnd(event) {
+      if (event && event.stopPropagation) {
+        event.stopPropagation();
+      }
+      this.pageUpdater.apply();
+    },
+
+    _onContentUpdate() {
+      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.pageUpdater.getRange(),
+        enterFocusRect
+      );
+    },
+
+    _registerRootView(ele) {
+      this.rootElement = ele;
+    },
+
+    _tryReoprtVisibleEvent(msg) {
+      if (msg) {
+        return;
+      }
+      // 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,
+        onCustomerEvent: this._onCustomerEvent,
+      };
+    },
+    _updatePage(range_list) {
+      let list = [];
+      for (let range of range_list) {
+        list = list.concat(this.innerData.slice(range.start, range.end + 1));
+      }
+      this.$refs.rootView?.updateData(list);
+      this.refreshToken++;
+      this.itemRender = false;
+      setTimeout(() => {
+        this.itemRender = true;
+      }, 0);
+    },
+  },
+  created() {
+    this.pageUpdater = new PageUpdater(this._updatePage);
+    if (this.dispatcher) {
+      this.dispatcher.registerComponent(this);
+    }
+    this.innerPadding = _getPadding(this.padding);
+    this.dragDirection =
+      this.direction === VERTICAL
+        ? Forge.DragSetting.DIRECTION_VERTICAL
+        : Forge.DragSetting.DIRECTION_HORIZONTAL;
+    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.provideData) {
+      this.dataList = this.provideData();
+    } else if (this.data) {
+      this.dataList = this.data;
+    }
+    let template_parser = _getTemplateParser(
+      this.width,
+      this.height,
+      this.direction,
+      this.padding,
+      this.supportHistoryPath,
+      this.layoutType
+    );
+    this.templateItemAdder = new TemplateItemAdder(
+      template_parser,
+      this.dataList,
+      this.measures,
+      this.visibleRangeWithPadding,
+      this._onTemplateAdd
+    );
+    this.templateItemAdder.tryAddItem(null, 2);
+    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.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
+    );
+    let init_focus_id = 0;
+    let cur_visible_start = 0;
+
+    if (this.initFocusId) {
+      const item = this.templateParser.GetItemById(this.initFocusId);
+      if (item) {
+        init_focus_id = this.initFocusId;
+        cur_visible_start = this._calculateVisibleStart(item, 1);
+      }
+    }
+    this.focusId = init_focus_id;
+    this.visibleStart = cur_visible_start;
+  },
+  mounted() {
+    if (this.visibleStart) {
+      this._slideTo(this.visibleStart, null);
+    }
+    this.pageUpdater.update(
+      this.templateParser,
+      this.visibleStart,
+      this.visibleStart + this.visibleRangeWithPadding - 1,
+      0
+    );
+    this.pageUpdater.apply();
+  },
+  beforeUnmount() {
+    if (this.dispatcher) {
+      this.dispatcher.unregisterComponent();
+    }
+  },
+};
+
+export default SimpleWidget;
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    :onAction="_getFocusBlockActions()"
+  >
+    <div
+      ref="rootDiv"
+      :style="{
+        left: left,
+        top: top,
+        width: width,
+        height: height,
+        overflow: 'hidden',
+      }"
+    >
+      <root-view
+        ref="rootView"
+        :refreshToken="refreshToken"
+        :dataUpdateToken="dataUpdateToken"
+        :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"
+        :onLoad="_onContentUpdate"
+        :onItemEdge="_onFocusableItemEdge"
+        :widgetHandler="_injectHandler()"
+        :enableItemRenderBreak="enableItemRenderBreak"
+        :placeHolderSetting="placeHolderSetting"
+      >
+        <template v-slot:renderItem="slotProps">
+          <slot name="renderItem" v-bind="slotProps"></slot>
+        </template>
+      </root-view>
+    </div>
+  </jsv-focus-block>
+</template>