@shijiu/jsview-vue 1.9.650 → 1.9.720

package/utils/JsViewEngineWidget/MetroPage.js

@@ -1,2128 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2021-06-02 10:43:57
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-06-29 18:07:43
- * @Description: file content
- */
-import Forge from "./ForgeDefine";
-import { TemplateParser } from "./TemplateParser";
-import { SingleRangeModel } from "./RangeModel";
-import {
-  EdgeDirection,
-  SlideStyle,
-  VERTICAL,
-  HORIZONTAL,
-  BaseDispatcher,
-} from "./WidgetCommon";
-import FDiv from "./FDiv.vue";
-
-let empty_func = () => {};
-
-let Event = {
-  ShowLoadingView: 0,
-  ShowLoadingViewDone: 1,
-  UpdatePage: 2,
-  UpdatePageDone: 3,
-};
-
-class EventHub {
-  constructor() {
-    this._runCallbacks = this._runCallbacks.bind(this);
-
-    this._EventCallbackMap = {};
-    this._EventCallbackMap[Event.ShowLoadingView] = [];
-    this._EventCallbackMap[Event.ShowLoadingViewDone] = [];
-    this._EventCallbackMap[Event.UpdatePage] = [];
-    this._EventCallbackMap[Event.UpdatePageDone] = [];
-  }
-
-  registerEvent(event, callback) {
-    this._EventCallbackMap[event].push(callback);
-  }
-
-  unregisterEvent(event, callback) {
-    for (let i = 0; i < this._EventCallbackMap[event].length; i++) {
-      if (this._EventCallbackMap[event][i] === callback) {
-        this._EventCallbackMap[event].splice(i, 1);
-        break;
-      }
-    }
-  }
-
-  _runCallbacks(event) {
-    for (let callback of this._EventCallbackMap[event]) {
-      callback();
-    }
-  }
-
-  dispatch(event, sync) {
-    if (sync) {
-      this._runCallbacks(event);
-    } else {
-      setTimeout(() => {
-        this._runCallbacks(event);
-      }, 0);
-    }
-  }
-}
-let eventHub = new EventHub();
-
-class MetroPageDispatcher extends BaseDispatcher {}
-MetroPageDispatcher.Type = {
-  setFocusId: Symbol("setFocusId"),
-  setFocusRect: Symbol("setFocusRect"),
-  updateItem: Symbol("updateItem"),
-  slideToItem: Symbol("slideTo"),
-};
-
-let PAGE_INFO_TOKEN = 0;
-class PageData {
-  constructor(
-    _width,
-    _height,
-    _direction,
-    _padding,
-    _layoutType,
-    _data,
-    _measure_func,
-    _visible_range
-  ) {
-    this._VisibleRange = _visible_range;
-    this._Direction = _direction;
-    this._PageList = [];
-    let line_max =
-      _direction === VERTICAL
-        ? _width - _padding.left - _padding.right
-        : _height - _padding.top - _padding.bottom;
-    let layout_type = _layoutType ? _layoutType : "relative";
-    this._TemplateParser = new TemplateParser(
-      _direction,
-      line_max,
-      layout_type,
-      _width,
-      _height
-    );
-    for (let i = 0; i < _data.length; i++) {
-      let block_item = _measure_func(_data[i]);
-      this._TemplateParser.ParseTemplateItem(block_item, _data[i]);
-    }
-    this._TemplateParser.CalculateNeighborWhenAddStop();
-    this._splitPages(this._TemplateParser.GetTemplate().List, 0, 0);
-  }
-
-  addItems(_new_data, _measure_func, _start_index) {
-    for (let i = _start_index; i < _new_data.length; i++) {
-      let block_item = _measure_func(_new_data[i]);
-      this._TemplateParser.ParseTemplateItem(block_item, _new_data[i]);
-    }
-    this._TemplateParser.CalculateNeighborWhenAddStop();
-    //todo 动态添加item时的分页
-    let start_index = 0;
-    let start_line = 0;
-    if (this._PageList.length > 0) {
-      let last_page = this._PageList.splice(this._PageList.length - 1, 1)[0];
-      start_index = last_page.startIndex;
-      start_line = last_page.top;
-    }
-    this._splitPages(
-      this._TemplateParser.GetTemplate().List,
-      start_index,
-      start_line
-    );
-  }
-
-  _splitPages(_template_list, _start_index, _start_line) {
-    let start_line = _start_line;
-    let start_index = _start_index;
-    let data_list = _template_list;
-    while (start_index < data_list.length) {
-      let visible_info = this._TemplateParser.GetVisibleItemList(
-        start_line,
-        start_line + this._VisibleRange - 1,
-        start_index
-      );
-      let page_bottom = 0;
-      let page_top = -1;
-      for (
-        let i = visible_info.visibleStart;
-        i < visible_info.visibleEnd + 1;
-        i++
-      ) {
-        let item = data_list[i];
-        let item_bottom =
-          this._Direction == VERTICAL
-            ? item.yPos + item.height - 1
-            : item.xPos + item.width - 1;
-        let item_top = this._Direction == VERTICAL ? item.yPos : item.xPos;
-        if (page_bottom < item_bottom) {
-          page_bottom = item_bottom;
-        }
-        if (page_top === -1 || item_top < item_top) {
-          page_top = item_top;
-        }
-      }
-      if (page_bottom > start_line + this._VisibleRange - 1) {
-        let new_visible_info = this._TemplateParser.GetVisibleItemList(
-          start_line + this._VisibleRange,
-          page_bottom,
-          visible_info.visibleEnd
-        );
-        visible_info.visibleEnd = new_visible_info.visibleEnd;
-        start_line = page_bottom + 1;
-      } else {
-        start_line = start_line + this._VisibleRange;
-      }
-      start_index = visible_info.visibleEnd + 1;
-
-      //添加page信息
-      let page_info = {
-        token: PAGE_INFO_TOKEN++,
-        top: page_top,
-        bottom: page_bottom,
-        direction: this._Direction,
-        startIndex: visible_info.visibleStart,
-        endIndex: visible_info.visibleEnd,
-        itemList: data_list.slice(
-          visible_info.visibleStart,
-          visible_info.visibleEnd + 1
-        ),
-      };
-      //清理重复的item
-      if (this._PageList.length > 0) {
-        let pre_page = this._PageList[this._PageList.length - 1];
-        if (page_info.startIndex < pre_page.startIndex) {
-          page_info.startIndex = pre_page.startIndex + 1;
-        }
-      }
-      if (page_info.endIndex >= page_info.startIndex) {
-        this._PageList.push(page_info);
-      }
-    }
-  }
-
-  getPageByIndex(page_list, focus_index) {
-    for (let i = 0; i < page_list.length; i++) {
-      if (
-        focus_index >= page_list[i].startIndex &&
-        focus_index <= page_list[i].endIndex
-      ) {
-        return i;
-      }
-    }
-    return -1;
-  }
-
-  getPageList(visible_start, visible_end, direction, count = 5) {
-    if (this._PageList.length < count) {
-      return this._PageList;
-    }
-
-    let already_find = false;
-    let start_index = -1;
-    let end_index = -1;
-    for (let index = 0; index < this._PageList.length; index++) {
-      if (
-        this._PageList[index].top <= visible_end &&
-        this._PageList[index].bottom >= visible_start
-      ) {
-        if (!already_find) {
-          start_index = index;
-        }
-        already_find = true;
-      } else if (already_find) {
-        end_index = index;
-        break;
-      }
-    }
-    if (start_index < 0) {
-      console.error("getPageList: no page is visible.");
-      return [];
-    }
-    if (end_index < 0) {
-      end_index = this._PageList.length;
-    }
-
-    if (end_index - start_index > count) {
-      console.error("getPageList error " + count);
-    } else {
-      let need_add = count - (end_index - start_index);
-      if (direction > 0) {
-        end_index += need_add;
-        if (end_index > this._PageList.length) {
-          end_index = this._PageList.length;
-          start_index -= count - (end_index - start_index);
-        }
-      } else {
-        start_index -= need_add;
-        if (start_index < 0) {
-          start_index = 0;
-          end_index += count - (end_index - start_index);
-        }
-      }
-    }
-    return this._PageList.slice(start_index, end_index);
-  }
-}
-
-const MetroPageItem = {
-  name: "MetroPageItem",
-  props: {
-    x: {
-      type: Number,
-      default: 0,
-    },
-    y: {
-      type: Number,
-      default: 0,
-    },
-    width: {
-      type: Number,
-      default: 0,
-    },
-    height: {
-      type: Number,
-      default: 0,
-    },
-    mountStateUpdate: {
-      type: Function,
-      default: empty_func,
-    },
-    renderFunc: {
-      type: Function,
-      default: empty_func,
-    },
-    setControlFunc: {
-      type: Function,
-      default: empty_func,
-    },
-    onClick: {
-      type: Function,
-      default: empty_func,
-    },
-    index: {
-      type: Number,
-    },
-  },
-  setup() {},
-  data() {
-    return {
-      zIndex: 0,
-    };
-  },
-  methods: {
-    _setZIndex(z) {
-      this.zIndex = z;
-    },
-  },
-  render() {
-    // console.log("item render ", this.index)
-    return (
-      <div
-        key={this.$props.x + "_" + this.$props.y}
-        style={{
-          left: this.$props.x,
-          top: this.$props.y,
-          width: this.$props.width,
-          height: this.$props.height,
-          visibility: "inherit",
-          zIndex: this.zIndex,
-        }}
-      >
-        {this.$props.renderFunc()}
-      </div>
-    );
-  },
-  created() {
-    console.log("item created", this.index);
-    this.$props.setControlFunc(this._setZIndex);
-  },
-  mounted() {
-    this.$props.mountStateUpdate(true);
-  },
-  beforeUnmount() {
-    this.$props.mountStateUpdate(false);
-  },
-};
-
-//为了避免重复render添加一层组件做隔离
-const MetroItemPage = {
-  name: "MetroItemPage",
-  components: {
-    [MetroPageItem.name]: MetroPageItem,
-  },
-  props: ["data", "renderFunc"],
-  render() {
-    return (
-      <template>{this.data.map((item) => this.renderFunc(item))}</template>
-    );
-  },
-};
-
-const MetroPageSubPage = {
-  name: "MetroPageSubPage",
-  components: {
-    [MetroItemPage.name]: MetroItemPage,
-  },
-  props: {
-    register: {
-      type: Function,
-      default: empty_func,
-    },
-    renderFunc: {
-      type: Function,
-      default: empty_func,
-    },
-    idx: {
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      renderList: [],
-    };
-  },
-  setup() {
-    return {
-      pageInfo: [],
-      timeoutId: -1,
-      updateDone: false,
-      onUpdateDone: empty_func,
-    };
-  },
-  methods: {
-    _clearPreTask() {
-      clearTimeout(this.timeoutId);
-    },
-    _updateInBatch() {
-      if (this.pageInfo) {
-        if (
-          !this.renderList ||
-          this.renderList.length < this.pageInfo.itemList.length
-        ) {
-          this.timeoutId = setTimeout(() => {
-            let end_index = 0;
-            if (!this.renderList) {
-              end_index = 1;
-            } else {
-              end_index = this.renderList.length + 1;
-            }
-            this.renderList = this.pageInfo.itemList.slice(0, end_index);
-            this._updateInBatch();
-          }, 0);
-        }
-      }
-    },
-    updatePage(pageInfo, onUpdateDone, inBatch) {
-      if (!pageInfo) {
-        return;
-      }
-      this.updateDone = false;
-      this.onUpdateDone = onUpdateDone;
-      this._clearPreTask();
-      if (inBatch) {
-        this.pageInfo = pageInfo;
-        this.renderList = pageInfo.itemList.slice(0, 1);
-        this._updateInBatch();
-      } else {
-        this.pageInfo = pageInfo;
-        this.renderList = pageInfo.itemList;
-      }
-    },
-    ifUpdateDone() {
-      return this.updateDone;
-    },
-    getPageDataToken() {
-      return this.pageInfo ? this.pageInfo.token : -1;
-    },
-  },
-  render() {
-    return this.renderList ? (
-      <template>
-        <MetroItemPage data={this.renderList} renderFunc={this.renderFunc} />
-      </template>
-    ) : null;
-  },
-  created() {
-    this.$props.register(this);
-  },
-  mounted() {
-    this.updateDone = true;
-  },
-  beforeUnmount() {
-    this._clearPreTask();
-  },
-  updated() {
-    if (
-      this.renderList &&
-      this.pageInfo &&
-      this.renderList.length == this.pageInfo.itemList.length
-    ) {
-      this.updateDone = true;
-      if (this.onUpdateDone) {
-        this.onUpdateDone();
-        this.onUpdateDone = null;
-      }
-    }
-  },
-};
-
-const MetroPageRoot = {
-  name: "MetroPageRoot",
-  components: {
-    [MetroPageSubPage.name]: MetroPageSubPage,
-  },
-  props: {
-    x: {
-      type: Number,
-      default: 0,
-    },
-    y: {
-      type: Number,
-      default: 0,
-    },
-    width: {
-      type: Number,
-      default: 0,
-    },
-    height: {
-      type: Number,
-      default: 0,
-    },
-    registerRootView: {
-      type: Function,
-      default: empty_func,
-    },
-    renderFunc: {
-      type: Function,
-      default: empty_func,
-    },
-  },
-  data() {
-    return {
-      focusPageIndex: -1,
-    };
-  },
-  setup() {
-    return {
-      element: null,
-      pageList: new Array(5),
-    };
-  },
-  methods: {
-    _pageUpdateDoneCallback() {
-      console.log("_pageUpdateDoneCallback");
-    },
-    _showLoadingViewCallback() {
-      console.log("_showLoadingViewCallback");
-    },
-    _registerFunc(index) {
-      return (page) => (this.pageList[index] = page);
-    },
-    updateFocusPage(page_info) {
-      for (let index = 0; index < this.pageList.length; index++) {
-        if (
-          this.pageList[index].getPageDataToken() === page_info.token &&
-          index !== this.focusPageIndex
-        ) {
-          console.log("root view update focus page", page_info);
-          this.focusPageIndex = index;
-          break;
-        }
-      }
-    },
-    ifPageUpdateDone(page_token) {
-      this._tmp = 123;
-      for (let page of this.pageList) {
-        if (page.getPageDataToken() === page_token) {
-          return page.ifUpdateDone();
-        }
-      }
-      //未找到对应的page
-      console.error("can not find page", page_token);
-      return false;
-    },
-    updatePages(page_data_list, update_in_batch) {
-      console.log("update pages", page_data_list);
-      let new_list = page_data_list.concat();
-      let inbatch_set;
-      if (update_in_batch instanceof Array) {
-        inbatch_set = update_in_batch;
-      } else {
-        inbatch_set = new Array(new_list.length).fill(update_in_batch);
-      }
-      let page_index = [0, 1, 2, 3, 4];
-      for (let i = page_index.length - 1; i >= 0; i--) {
-        let pre_page = this.pageList[page_index[i]].getPageDataToken();
-        for (let j = new_list.length - 1; j >= 0; j--) {
-          if (pre_page == new_list[j].token) {
-            page_index.splice(i, 1);
-            new_list.splice(j, 1);
-            inbatch_set.splice(j, 1);
-          }
-        }
-      }
-
-      if (page_index.length === 0) {
-        return;
-      }
-
-      let callback = () => {
-        let all_page_updated = true;
-        for (let page of this.pageList) {
-          if (!page.ifUpdateDone()) {
-            all_page_updated = false;
-            break;
-          }
-        }
-
-        if (all_page_updated) {
-          eventHub.dispatch(Event.UpdatePageDone);
-        }
-      };
-      for (let i = 0; i < page_index.length; i++) {
-        if (i < new_list.length) {
-          this.pageList[page_index[i]].updatePage(
-            new_list[i],
-            callback,
-            inbatch_set[i]
-          );
-        } else {
-          this.pageList[page_index[i]].updatePage(null, callback, false);
-        }
-      }
-    },
-    updatePosition(x, y, anim_info) {
-      if (this.element) {
-        let pre_pos = this.element.jsvMaskView.GetLayoutParams();
-        this.element.jsvMaskView.ResetLayoutParams({
-          x: x,
-          y: y,
-        });
-        if (anim_info) {
-          let delta_x = Math.abs(pre_pos.MarginLeft - x);
-          let delta_y = Math.abs(pre_pos.MarginTop - y);
-          let duration = Math.round(
-            delta_x === 0
-              ? delta_y / anim_info.speed
-              : delta_x / anim_info.speed
-          );
-          let slide_animation = new Forge.TranslateAnimation(
-            pre_pos.MarginLeft - x,
-            0,
-            pre_pos.MarginTop - y,
-            0,
-            duration,
-            anim_info.easing
-          );
-          slide_animation.SetAnimationListener(
-            new Forge.AnimationListener(
-              anim_info.onstart,
-              anim_info.onend,
-              null
-            )
-          );
-          this.element.jsvMaskView.StartAnimation(slide_animation);
-        }
-      }
-    },
-    _ifPageVisible(index) {
-      if (this.pageList[index]) {
-        return this.pageList[index].ifUpdateDone();
-      } else {
-        return true;
-      }
-    },
-  },
-  render() {
-    let pageIndexs = [0, 1, 2, 3, 4];
-    return (
-      <div
-        key="metroPageRoot"
-        style={{ left: this.$props.x, top: this.$props.y }}
-      >
-        <div key="position" ref={(ele) => (this.element = ele)}>
-          <div
-            key="touchcontainer"
-            // ref={this._initTouchRef}
-            style={{
-              width: this.$props.width,
-              height: this.$props.height,
-            }}
-          >
-            {pageIndexs.map((index) => (
-              <div
-                style={{
-                  zIndex: this.focusPageIndex == index ? 5 : 0,
-                  visibility: this._ifPageVisible(index) ? "inherit" : "hidden",
-                }}
-              >
-                <metro-page-sub-page
-                  key={"page" + index}
-                  idx={index}
-                  register={this._registerFunc(index)}
-                  renderFunc={this.$props.renderFunc}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-  created() {
-    this.$props.registerRootView(this);
-  },
-  mounted() {
-    eventHub.registerEvent(
-      Event.ShowLoadingView,
-      this._showLoadingViewCallback
-    );
-    eventHub.registerEvent(Event.UpdatePageDone, this._pageUpdateDoneCallback);
-  },
-  beforeUnmount() {
-    eventHub.unregisterEvent(
-      Event.ShowLoadingView,
-      this._showLoadingViewCallback
-    );
-    eventHub.unregisterEvent(
-      Event.UpdatePageDone,
-      this._pageUpdateDoneCallback
-    );
-  },
-};
-
-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,
-//   _layoutType
-// ) {
-//   let padding = _getPadding(_padding);
-//   let line_max =
-//     _direction === VERTICAL
-//       ? _width - padding.left - padding.right
-//       : _height - padding.top - padding.bottom;
-//   let layout_type = _layoutType ? _layoutType : "relative";
-//   return new TemplateParser(_direction, line_max, layout_type, _width, _height);
-// };
-
-// 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 _mountStateUpdate = (item) => (state) => (item.mounted = state);
-
-const MetroPage = {
-  name: "MetroPage",
-  components: {
-    [MetroPageItem.name]: MetroPageItem,
-    [MetroPageRoot.name]: MetroPageRoot,
-    FDiv,
-  },
-  props: {
-    branchName: {
-      type: String,
-      required: true,
-    },
-    direction: {
-      default: HORIZONTAL,
-    },
-    onClick: {
-      type: Function,
-      default: empty_func,
-    },
-    loopFocus: {
-      type: Boolean,
-      default: false,
-    },
-    loadViewSize: {
-      type: Object,
-      default() {
-        return { width: 0, height: 0 };
-      },
-    },
-    onFocusPosChange: {
-      type: Function,
-      default: empty_func,
-    },
-    onItemFocus: {
-      type: Function,
-      default: empty_func,
-    },
-    onItemBlur: {
-      type: Function,
-      default: empty_func,
-    },
-    onEdge: {
-      type: Function,
-      default: empty_func,
-    },
-    slideStyle: {
-      default: SlideStyle.seamLess,
-    },
-    padding: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    onFocus: {
-      type: Function,
-      default: empty_func,
-    },
-    onBlur: {
-      type: Function,
-      default: empty_func,
-    },
-    data: {
-      type: Array,
-      required: true,
-    },
-    enableTouch: {
-      type: Boolean,
-      default: false,
-    },
-    flingPageEdge: {
-      type: Number,
-      default: 1 / 4,
-    },
-    flingPageWidth: {
-      type: Number,
-      default: -1,
-    },
-    measures: {
-      type: Function,
-      required: true,
-    },
-    baseAnchor: {
-      type: Object,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    layoutType: {
-      type: String,
-      default: "relative",
-    },
-    dispatcher: {
-      type: BaseDispatcher,
-    },
-  },
-  setup(props) {
-    let pageData = new PageData(
-      props.width,
-      props.height,
-      props.direction,
-      props.padding,
-      props.layoutType,
-      props.data,
-      props.measures,
-      props.direction === VERTICAL ? props.height : props.width
-    );
-    return {
-      pageData,
-      isFocus: false,
-      visibleItemList: [],
-      itemControlFuncMap: [],
-      itemRefList: [],
-      prePages: [],
-
-      enterFocusId: -1,
-      enterFocusRect: null,
-      focusId: -1,
-      preFocusId: -1,
-      preEdgeRect: null,
-      visibleStart: -1,
-      visibleRange: 0,
-      searchBaseItem: -1,
-
-      keyLock: {
-        lockTime: -1,
-        unlockTime: -1,
-        lockEventTime: -1,
-        keyEventTime: -1,
-        locked: false,
-      },
-    };
-  },
-  data() {
-    return {
-      loadingView: {
-        show: false,
-        position: null,
-      },
-    };
-  },
-  methods: {
-    _getQueryObj(id) {
-      return {
-        id: id,
-        queryPosition: this._queryPosition,
-        queryTempPosition: this._queryTemplatePosition,
-      };
-    },
-
-    _queryPosition(id) {
-      let item = this.pageData._TemplateParser.GetItem(id);
-      let x_offset =
-        this.$props.direction === VERTICAL ? 0 : -this.visibleStart;
-      let y_offset =
-        this.$props.direction === VERTICAL ? -this.visibleStart : 0;
-      return {
-        xPos: item.xPos + x_offset,
-        yPos: item.yPos + y_offset,
-        width: item.width,
-        height: item.height,
-      };
-    },
-
-    _queryTemplatePosition(id) {
-      let item = this.pageData._TemplateParser.GetItem(id);
-      return {
-        xPos: item.xPos,
-        yPos: item.yPos,
-        width: item.width,
-        height: item.height,
-      };
-    },
-
-    _dispathcEvent(event) {
-      let id_list;
-      switch (event.type) {
-        case MetroPageDispatcher.Type.setFocusId:
-          this.enterFocusId = event.data;
-          break;
-        case MetroPageDispatcher.Type.setFocusRect:
-          this.enterFocusRect = event.data;
-          break;
-        case MetroPageDispatcher.Type.updateItem:
-          id_list = event.data;
-          if (id_list) {
-            for (let id of id_list) {
-              if (this.focusId === id) {
-                this._updateFocusItem();
-              }
-            }
-          }
-          break;
-        case MetroPageDispatcher.Type.slideToItem:
-          if (event.data) {
-            this._slideViewToAnchor(event.data);
-          }
-          break;
-        default:
-          break;
-      }
-    },
-
-    _getVisibleItemList(id, start, end) {
-      let visible_info = this.pageData._TemplateParser.GetVisibleItemList(
-        start,
-        end,
-        id
-      );
-      return this.pageData._TemplateParser
-        .GetTemplate()
-        .List.slice(visible_info.visibleStart, visible_info.visibleEnd + 1);
-    },
-
-    _calculateNearestItemByRect(template_item_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.$props.direction === VERTICAL ? "yPos" : "xPos";
-      let key_width = this.$props.direction === VERTICAL ? "height" : "width";
-      for (let item of template_item_list) {
-        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.$props.direction === VERTICAL
-              ? item.xPos
-              : item.xPos - this.visibleStart;
-          let y_pos =
-            this.$props.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) {
-      let item = this.pageData._TemplateParser.GetItem(index);
-      if (!item.hasSub && this.$props.onClick) {
-        this.$props.onClick(item.data);
-      }
-    },
-
-    onKeyDown(ev) {
-      this.keyLock.keyEventTime = ev.timeStamp;
-      if (
-        this.keyLock.lockEventTime > 0 &&
-        this.keyLock.lockTime > 0 &&
-        ev.timeStamp <
-          this.keyLock.lockEventTime +
-            (this.keyLock.unlockTime - this.keyLock.lockTime)
-      ) {
-        return true;
-      }
-      //todo unlock后超过200毫秒的事件丢弃
-      if (this.keyLock.locked) {
-        if (
-          ev.keyCode === 37 ||
-          ev.keyCode === 38 ||
-          ev.keyCode === 39 ||
-          ev.keyCode === 40 ||
-          ev.keyCode === 13
-        ) {
-          return true;
-        } else {
-          return false;
-        }
-      }
-      switch (ev.keyCode) {
-        case 37:
-          this._moveToNext(-1, 0);
-          break;
-        case 38:
-          this._moveToNext(0, -1);
-          break;
-        case 39:
-          this._moveToNext(1, 0);
-          break;
-        case 40:
-          this._moveToNext(0, 1);
-          break;
-        case 13:
-          this._onClick(this.focusId);
-          break;
-        default:
-          //只接受上下左右确定键
-          return false;
-      }
-      return true;
-    },
-
-    onKeyUp(ev) {
-      if (this.keyLock.locked) {
-        return true;
-      }
-      let direction = 0;
-      switch (ev.keyCode) {
-        case 37:
-          direction = this.$props.direction === VERTICAL ? 0 : -1;
-          break;
-        case 38:
-          direction = this.$props.direction === VERTICAL ? -1 : 0;
-          break;
-        case 39:
-          direction = this.$props.direction === VERTICAL ? 0 : 1;
-          break;
-        case 40:
-          direction = this.$props.direction === VERTICAL ? 1 : 0;
-          break;
-        default:
-          return;
-      }
-      if (direction !== 0) {
-        let pages = this.pageData.getPageList(
-          this.visibleStart - this.visibleRange,
-          this.visibleStart + 2 * this.visibleRange - 1,
-          direction
-        );
-        this.prePages = pages;
-        this.rootView.updatePages(pages, true);
-      }
-    },
-
-    _reportVisibleEvent(
-      baseItemId,
-      cur_visible_start,
-      cur_visible_end,
-      do_anim,
-      need_update_root
-    ) {
-      this.visibleStart = cur_visible_start;
-      //可见的item设置visibility
-      let x = this.$props.direction === VERTICAL ? 0 : -this.visibleStart;
-      let y = this.$props.direction === VERTICAL ? -this.visibleStart : 0;
-      if (!do_anim) {
-        if (need_update_root) {
-          this.rootView.updatePosition(x, y, do_anim, this._onTransitionEnd);
-        }
-      } else {
-        //更新rootview
-        this.rootView.updatePosition(x, y, do_anim, this._onTransitionEnd);
-      }
-    },
-
-    _moveToNext(horizontal_direction, vertical_direction, item_edge_rect) {
-      let template = this.pageData._TemplateParser.GetTemplate();
-      let focus_index = template.IdsMap[this.focusId];
-      let next_index = this.pageData._TemplateParser.GetNextItem(
-        this.focusId,
-        vertical_direction,
-        horizontal_direction,
-        this.$props.loopFocus
-      );
-
-      if (next_index >= 0) {
-        let direction =
-          this.$props.direction === VERTICAL
-            ? vertical_direction
-            : horizontal_direction;
-        let next_item = this.pageData._TemplateParser.GetItem(next_index);
-        let visible_info = this._CalculateSlide(
-          next_item,
-          direction,
-          this.visibleStart
-        );
-        let new_visible_start = visible_info.visibleStart;
-        let pre_visible_start = this.visibleStart;
-        let need_update_foucs = true;
-
-        if (direction !== 0) {
-          //direction 方向的按键才触发page更新处理
-          let focus_page_index = this.pageData.getPageByIndex(
-            this.prePages,
-            next_index
-          );
-          let focus_page = this.prePages[focus_page_index];
-          let next_page_index = focus_page_index + direction;
-          let next_page = null;
-          if (next_page_index < this.prePages.length && next_page_index >= 0) {
-            next_page = this.prePages[next_page_index];
-          }
-
-          let pos_key = this.$props.direction === VERTICAL ? "yPos" : "xPos";
-          let size_key =
-            this.$props.direction === VERTICAL ? "height" : "width";
-          let next_item_key_pos =
-            direction > 0
-              ? next_item[pos_key] + next_item[size_key] - 1
-              : next_item[pos_key];
-          let if_page_end =
-            direction > 0
-              ? next_item_key_pos >= focus_page.bottom
-              : next_item_key_pos <= focus_page.top;
-          let need_show_loading = false;
-
-          let focus_page_done = this.rootView.ifPageUpdateDone(
-            focus_page.token
-          );
-
-          if (focus_page) {
-            this.rootView.updateFocusPage(focus_page);
-          } else {
-            return;
-          }
-          if (!focus_page_done) {
-            need_update_foucs = false;
-            need_show_loading = true;
-            let cur_item = this.pageData._TemplateParser.GetItem(this.focusId);
-            next_item_key_pos =
-              direction > 0
-                ? cur_item[pos_key] + cur_item[size_key] - 1
-                : cur_item[pos_key];
-            this.keyLock.lockTime = Date.now();
-            this.keyLock.lockEventTime = this.keyLock.keyEventTime;
-            this.keyLock.locked = true;
-          } else {
-            if (next_page == null) {
-              //没有下一页
-              if (!visible_info.toEdge && direction !== 0 && if_page_end) {
-                //加载新的page
-                let pages = this.pageData.getPageList(
-                  this.visibleStart - this.visibleRange,
-                  this.visibleStart + 2 * this.visibleRange - 1,
-                  direction
-                );
-                let page_changed = false;
-                if (this.prePages) {
-                  for (let i = 0; i < pages.length; i++) {
-                    if (pages[i].token !== this.prePages[i].token) {
-                      page_changed = true;
-                      break;
-                    }
-                  }
-                } else {
-                  page_changed = true;
-                }
-                if (page_changed) {
-                  this.prePages = pages;
-                  this.keyLock.lockTime = Date.now();
-                  this.keyLock.lockEventTime = this.keyLock.keyEventTime;
-                  this.keyLock.locked = true;
-                }
-                need_show_loading = true;
-              }
-            } else if (!this.rootView.ifPageUpdateDone(next_page.token)) {
-              //下一页未加载完
-              if (if_page_end) {
-                //到达page边缘，等待页面加载
-                this.keyLock.locked = true;
-                this.keyLock.lockTime = Date.now();
-                this.keyLock.lockEventTime = this.keyLock.keyEventTime;
-
-                need_show_loading = true;
-              }
-            } else {
-              //下一页存在
-            }
-          }
-
-          if (need_show_loading) {
-            //计算展示loading view时的滚动距离
-            if (this.$props.loadViewSize && this.$slots.loadingView) {
-              let loading_view_pos = {
-                x: 0,
-                y: 0,
-              };
-              let padding = _getPadding(this.$props.padding);
-              let padding_pos =
-                this.$props.direction === VERTICAL
-                  ? padding["top"]
-                  : padding["left"];
-              let w_key =
-                this.$props.direction === VERTICAL ? "height" : "width";
-              if (direction > 0) {
-                new_visible_start =
-                  next_item_key_pos -
-                  this.visibleRange +
-                  1 +
-                  this.$props.loadViewSize[w_key] +
-                  padding_pos;
-                let loading_pos_key =
-                  this.$props.direction === VERTICAL ? "y" : "x";
-                loading_view_pos[loading_pos_key] =
-                  this.visibleRange - this.$props.loadViewSize[w_key];
-              } else {
-                new_visible_start =
-                  next_item_key_pos -
-                  this.$props.loadViewSize[w_key] +
-                  padding_pos;
-              }
-
-              eventHub.dispatch(Event.ShowLoadingView, true);
-              this.loadingView.show = true;
-              this.loadingView.position = loading_view_pos;
-              eventHub.dispatch(Event.ShowLoadingViewDone);
-            }
-          }
-        }
-
-        this.visibleStart = new_visible_start;
-        if (pre_visible_start !== this.visibleStart) {
-          let anim_info = {
-            speed: 1.5,
-            easing: null,
-            onstart: null,
-            onend: null,
-          };
-          if (this.$props.direction === HORIZONTAL) {
-            this.rootView.updatePosition(-this.visibleStart, 0, anim_info);
-          } else {
-            this.rootView.updatePosition(0, -this.visibleStart, anim_info);
-          }
-        }
-
-        let target_focus_item = need_update_foucs
-          ? next_item
-          : this.pageData._TemplateParser.GetItem(this.focusId);
-        //更新焦点位置
-        if (this.$props.onFocusPosChange) {
-          this.$props.onFocusPosChange(
-            target_focus_item.data,
-            this._queryPosition(target_focus_item.id)
-          );
-        }
-
-        if (need_update_foucs) {
-          this.searchBaseItem = next_index;
-          this.preFocusId = this.focusId;
-          this.focusId = next_item.id;
-
-          if (next_item.hasSub) {
-            let rect;
-            let x_off_set =
-              template.List[focus_index].xPos - template.List[next_index].xPos;
-            let y_off_set =
-              template.List[focus_index].yPos - template.List[next_index].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: template.List[focus_index].width,
-                  height: template.List[focus_index].height,
-                },
-              };
-            }
-            this.preEdgeRect = rect;
-          } else {
-            this._updateBlurItem();
-            this._updateFocusItem();
-          }
-
-          if (this.preFocusId >= 0 && this.$props.onItemBlur) {
-            let data = this.pageData._TemplateParser.GetItem(this.preFocusId)
-              .data;
-            this.$props.onItemBlur(
-              data,
-              this._getQueryObj(this.preFocusId),
-              this.itemRefList[this.preFocusId]
-            );
-          }
-
-          if (this.isFocus) {
-            if (this.$props.onItemFocus) {
-              this.$props.onItemFocus(
-                next_item.data,
-                this.preEdgeRect,
-                this._getQueryObj(next_item.id),
-                this.itemRefList[next_item.id]
-              );
-            }
-          }
-        }
-      } else {
-        if (this.$props.onEdge) {
-          let x_off_set =
-            this.$props.direction === VERTICAL ? 0 : this.visibleStart;
-          let y_off_set =
-            this.$props.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: template.List[focus_index].xPos - x_off_set,
-            y: template.List[focus_index].yPos - y_off_set,
-            width: template.List[focus_index].width,
-            height: template.List[focus_index].height,
-          };
-          this.$props.onEdge({ direction: edge, rect: rect });
-        }
-      }
-    },
-
-    _CalculateSlide(target_item, direction, visible_start) {
-      let pre_visible_start = visible_start;
-      let cur_visible_start = pre_visible_start;
-      let template_list = this.pageData._TemplateParser.GetTemplate().List;
-      let last_item = template_list[template_list.length - 1];
-      let pos_key = this.$props.direction === VERTICAL ? "yPos" : "xPos";
-      let width_key = this.$props.direction === VERTICAL ? "height" : "width";
-      let padding_key = this.$props.direction === VERTICAL ? "bottom" : "right";
-      let visible_range =
-        this.$props.direction === VERTICAL
-          ? this.$props.height
-          : this.$props.width;
-      let move_to_edge = false;
-
-      let last_item_off_set;
-      switch (this.$props.slideStyle) {
-        case SlideStyle.seamLess:
-          last_item_off_set =
-            last_item[pos_key] +
-            last_item[width_key] -
-            visible_range +
-            _getPadding(this.$props.padding)[padding_key];
-          if (direction > 0) {
-            if (
-              target_item[pos_key] + target_item[width_key] >
-              pre_visible_start + (visible_range * 4) / 5
-            ) {
-              cur_visible_start =
-                target_item[pos_key] +
-                target_item[width_key] -
-                (visible_range * 4) / 5;
-            }
-          } else if (direction < 0) {
-            if (target_item[pos_key] < pre_visible_start + visible_range / 5) {
-              cur_visible_start = target_item[pos_key] - visible_range / 5;
-            }
-          } else {
-            //不是沿widget方向的移动
-            if (target_item[pos_key] < pre_visible_start) {
-              cur_visible_start = target_item[pos_key] - visible_range / 5;
-            } else if (
-              target_item[pos_key] + target_item[width_key] >
-              pre_visible_start + visible_range
-            ) {
-              cur_visible_start =
-                target_item[pos_key] +
-                target_item[width_key] -
-                (visible_range * 4) / 5;
-            }
-          }
-          if (cur_visible_start > last_item_off_set) {
-            move_to_edge = true;
-            cur_visible_start = last_item_off_set;
-          }
-          if (cur_visible_start < 0) {
-            move_to_edge = true;
-            cur_visible_start = 0;
-          }
-          break;
-        case SlideStyle.wholePage:
-          if (direction > 0) {
-            if (
-              target_item[pos_key] + target_item[width_key] >
-              pre_visible_start + visible_range + 1
-            ) {
-              cur_visible_start = target_item[pos_key];
-            }
-          } else if (direction < 0) {
-            if (target_item[pos_key] < pre_visible_start) {
-              cur_visible_start =
-                target_item[pos_key] + target_item[width_key] - visible_range;
-              if (cur_visible_start < 0) {
-                move_to_edge = true;
-                cur_visible_start = 0;
-              }
-            }
-          }
-          break;
-        case SlideStyle.seamlessFixedId:
-          break;
-        default:
-          break;
-      }
-      return {
-        toEdge: move_to_edge,
-        visibleStart: cur_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) {
-      let visible_item = this.itemControlFuncMap[index];
-      if (visible_item && visible_item.zIndexFunc) {
-        visible_item.zIndexFunc(z_index);
-      }
-    },
-
-    _onFocus() {
-      let focus_id =
-        typeof this.enterFocusId !== "undefined" &&
-        this.enterFocusId >= 0 &&
-        this.enterFocusId <
-          this.pageData._TemplateParser.GetTemplate().List.length
-          ? this.enterFocusId
-          : this.focusId;
-      focus_id = this._ifValidEnterRect(this.enterFocusRect)
-        ? this._calculateNearestItemByRect(
-            this.visibleItemList,
-            this.enterFocusRect
-          )
-        : focus_id;
-
-      this.isFocus = true;
-      this.focusId = focus_id;
-      this.preFocusId = -1;
-      this._updateFocusItem();
-
-      let focus_item = this.pageData._TemplateParser.GetItem(focus_id);
-      if (this.$props.onItemFocus) {
-        if (focus_item.mounted) {
-          this.$props.onItemFocus(
-            focus_item.data,
-            null,
-            this._getQueryObj(focus_item.id),
-            this.itemRefList[focus_item.id]
-          );
-        } else {
-          Promise.resolve().then(() => {
-            this.$props.onItemFocus(
-              focus_item.data,
-              null,
-              this._getQueryObj(focus_item.id),
-              this.itemRefList[focus_item.id]
-            );
-            this._updateFocusItem();
-          });
-        }
-      }
-
-      if (this.$props.onFocusPosChange) {
-        this.$props.onFocusPosChange(
-          focus_item.data,
-          this._queryPosition(focus_item.id)
-        );
-      }
-
-      if (this.$props.onFocus) {
-        this.$props.onFocus();
-      }
-    },
-
-    _onBlur() {
-      this.isFocus = false;
-      this.enterFocusId = -1;
-      this.enterFocusRect = null;
-
-      this.preFocusId = this.focusId;
-      this.preEdgeRect = null;
-      this._updateBlurItem();
-      if (this.$props.onItemBlur) {
-        let data = this.pageData._TemplateParser.GetItem(this.preFocusId).data;
-        this.$props.onItemBlur(
-          data,
-          this._getQueryObj(this.preFocusId),
-          this.itemRefList[this.preFocusId]
-        );
-      }
-      if (this.$props.onBlur) {
-        this.$props.onBlur();
-      }
-    },
-
-    _onTransitionEnd(event) {
-      //todo
-      empty_func(event);
-    },
-
-    _drawItem(item) {
-      let item_view = this.itemRefList[item.id];
-      if (!item_view) {
-        item_view = {};
-        this.itemRefList[item.id] = item_view;
-      }
-      return function() {
-        console.log("render func ", item.id);
-        return this.$slots.renderItem({
-          data: item.data,
-          onEdge: this._OnFocusableItemEdge,
-          query: this._getQueryObj(item.id),
-          refObj: item_view,
-        });
-      }.bind(this);
-    },
-
-    _updateFocusItem() {
-      let focus_item = this.pageData._TemplateParser.GetItem(this.focusId);
-      if (focus_item) {
-        this._setZIndex(
-          this.pageData._TemplateParser.GetTemplate().IdsMap[this.focusId],
-          this.$props.data.length
-        );
-      }
-    },
-
-    _updateBlurItem() {
-      this._setZIndex(
-        this.pageData._TemplateParser.GetTemplate().IdsMap[this.preFocusId],
-        0
-      );
-    },
-
-    _BaseAnchorInfo2Pos(anchor_info, visible_start, visible_range) {
-      let id = anchor_info.id;
-      let target_pos = {
-        xPos: this.$props.direction === VERTICAL ? 0 : visible_start,
-        yPos: this.$props.direction === VERTICAL ? visible_start : 0,
-      };
-      if (typeof id !== "undefined" && id !== null) {
-        let template_list = this.pageData._TemplateParser.GetTemplate().List;
-        let item = template_list[id];
-        let last_item = template_list[template_list.length - 1];
-        if (item) {
-          let type =
-            typeof anchor_info.type !== "undefined"
-              ? anchor_info.type
-              : "start";
-          let key_pos = this.$props.direction === VERTICAL ? "yPos" : "xPos";
-          let key_width =
-            this.$props.direction === VERTICAL ? "height" : "width";
-          let padding_key =
-            this.$props.direction === VERTICAL ? "bottom" : "right";
-          switch (type) {
-            case "start":
-              target_pos[key_pos] = item[key_pos];
-              break;
-            case "center":
-              target_pos[key_pos] =
-                item[key_pos] - visible_range / 2 + item[key_width] / 2;
-              break;
-            case "end":
-              target_pos[key_pos] =
-                item[key_pos] +
-                item[key_width] -
-                1 -
-                visible_range +
-                _getPadding(this.$props.padding)[padding_key];
-              break;
-            default:
-              break;
-          }
-          let last_item_off_set =
-            last_item[key_pos] +
-            last_item[key_width] -
-            visible_range +
-            _getPadding(this.$props.padding)[padding_key];
-          target_pos[key_pos] =
-            target_pos[key_pos] > last_item_off_set
-              ? last_item_off_set
-              : target_pos[key_pos];
-          target_pos[key_pos] =
-            target_pos[key_pos] < 0 ? 0 : target_pos[key_pos];
-        }
-      }
-      return target_pos;
-    },
-
-    _slideViewToAnchor(anchor_info) {
-      if (
-        anchor_info.id < 0 ||
-        anchor_info.id >=
-          this.pageData._TemplateParser.GetTemplate().List.length
-      ) {
-        return;
-      }
-      let pos = this._BaseAnchorInfo2Pos(
-        anchor_info,
-        this.visibleStart,
-        this.visibleRange
-      );
-      this.visibleStart =
-        this.$props.direction === VERTICAL ? pos.yPos : pos.xPos;
-
-      let do_anim =
-        typeof anchor_info.doAnim === "undefined" ||
-        anchor_info.doAnim === null ||
-        anchor_info.doAnim;
-      let anim_info = null;
-      if (do_anim) {
-        anim_info = {
-          speed: 1.5,
-          easing: null,
-          onstart: null,
-          onend: null,
-        };
-      }
-
-      this.rootView.updatePosition(-pos.xPos, -pos.yPos, anim_info);
-      this.searchBaseItem = anchor_info.id;
-
-      let pages = this.pageData.getPageList(
-        this.visibleStart - this.visibleRange,
-        this.visibleStart + 2 * this.visibleRange - 1,
-        1
-      );
-      this.prePages = pages;
-      this.rootView.updatePages(pages, false);
-    },
-
-    _updateFocusByDragInfo(viewX, viewY) {
-      let enterFocusRect = null;
-      //模拟最小区域作为输入区域
-      if (this.$props.direction === VERTICAL) {
-        enterFocusRect = {
-          direction: EdgeDirection.top,
-          rect: {
-            x: this.$props.left - viewX,
-            y: this.$props.top - viewY,
-            width: 10,
-            height: 10,
-          },
-        };
-      } else {
-        enterFocusRect = {
-          direction: EdgeDirection.left,
-          rect: {
-            x: this.$props.left - viewX,
-            y: this.$props.top - viewY,
-            width: 10,
-            height: 10,
-          },
-        };
-      }
-      this.focusId = this._calculateNearestItemByRect(
-        this.visibleItemList,
-        enterFocusRect
-      );
-    },
-
-    _tryReoprtVisibleEvent(msg) {
-      if (typeof msg.viewY != "undefined" && typeof msg.viewX != "undefined") {
-        if (this.$props.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.visibleRange * 2;
-      let cur_visible_end = this.visibleStart + this.visibleRange * 3 - 1;
-      let baseItemId = this.searchBaseItem ? this.searchBaseItem : 0;
-      this._reportVisibleEvent(
-        baseItemId,
-        cur_visible_start,
-        cur_visible_end,
-        false
-      );
-    },
-
-    _getTouchListener() {
-      if (!this.$props.enableTouch) {
-        return null;
-      }
-      let callback = {
-        OnDragStart: (msg) => {
-          //console.log("MetroPage Container OnDragStart:" + JSON.stringify(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("MetroPage Container OnDragEnd:" + JSON.stringify(msg));
-          this._tryReoprtVisibleEvent(msg);
-          this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          this._onTransitionEnd();
-          return true;
-        },
-        OnFling: (msg) => {
-          //console.log("MetroPage Container OnFling:" + JSON.stringify(msg));
-          this._tryReoprtVisibleEvent(msg);
-          this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          this._onTransitionEnd();
-          return true;
-        },
-        OnRelease: (msg) => {
-          empty_func(msg);
-          //console.log("MetroPage Container OnRelease:" + JSON.stringify(msg));
-          return true;
-        },
-      };
-      return callback;
-    },
-
-    _registerItemControlFunc(id) {
-      return (zindex_func) => {
-        this.itemControlFuncMap[id] = {
-          zIndexFunc: zindex_func,
-        };
-      };
-    },
-    _renderFunc(item) {
-      return (
-        <metro-page-item
-          // key={item.id}
-          x={item.xPos}
-          y={item.yPos}
-          w={item.width}
-          h={item.height}
-          index={item.id}
-          enableTouch={this.$props.enableTouch}
-          onClick={this._onClick}
-          setControlFunc={this._registerItemControlFunc(item.id)}
-          renderFunc={this._drawItem(item)}
-          mountStateUpdate={_mountStateUpdate(item)}
-        />
-      );
-    },
-
-    _registerRootView(ref) {
-      this.rootView = ref;
-    },
-
-    _showLoadingPageDoneCallback() {
-      this.rootView.updatePages(this.prePages, false);
-    },
-
-    _updatePageDoneCallback() {
-      this.keyLock.unlockTime = Date.now();
-      this.keyLock.locked = false;
-      if (this.loadingView.show) {
-        this.loadingView.show = false;
-        this.loadingView.position = null;
-      }
-    },
-  },
-  render() {
-    const template_list = this.pageData._TemplateParser.GetTemplate().List;
-    const last_item = template_list[template_list.length - 1];
-    const touchListener = this._getTouchListener();
-    let padding = _getPadding(this.$props.padding);
-    const touchcontainer_w =
-      this.$props.direction === VERTICAL
-        ? this.$props.width
-        : last_item.xPos + last_item.width;
-    const touchcontainer_h =
-      this.$props.direction === VERTICAL
-        ? last_item.yPos + last_item.height
-        : this.$props.height;
-
-    return (
-      <FDiv
-        branchName={this.branchName}
-        onFocus={this._onFocus}
-        onBlur={this._onBlur}
-        onKeyDown={this.onKeyDown}
-        onKeyUp={this.onKeyUp}
-      >
-        <div
-          style={{
-            left: this.$props.left,
-            top: this.$props.top,
-            width: this.$props.width,
-            height: this.$props.height,
-            overflow: "hidden",
-          }}
-        >
-          <metro-page-root
-            x={padding.left}
-            y={padding.top}
-            w={touchcontainer_w}
-            h={touchcontainer_h}
-            flingPageWidth={this.$props.flingPageWidth}
-            flingPageEdge={this.$props.flingPageEdge}
-            slidePile={
-              new Forge.RectArea(
-                0,
-                0,
-                this.$props.width - padding.left - padding.right,
-                this.$props.height - padding.top - padding.bottom
-              )
-            }
-            touchListener={touchListener}
-            registerRootView={this._registerRootView}
-            renderFunc={this._renderFunc}
-          />
-          {this.loadingView.show ? (
-            <div
-              style={{
-                left: this.loadingView.position.x,
-                top: this.loadingView.position.y,
-              }}
-            >
-              {this.$slots.loadingView()}
-            </div>
-          ) : null}
-        </div>
-      </FDiv>
-    );
-  },
-  created() {
-    let init_focus_id = 0;
-    let cur_visible_start = 0;
-    let visible_range =
-      this.$props.direction === VERTICAL
-        ? this.$props.height
-        : this.$props.width;
-    this.visibleItemList = this._getVisibleItemList(
-      init_focus_id,
-      cur_visible_start,
-      cur_visible_start + visible_range - 1
-    );
-    if (typeof this.$props.baseAnchor !== "undefined") {
-      let pos = this._BaseAnchorInfo2Pos(
-        this.$props.baseAnchor,
-        0,
-        visible_range
-      );
-      cur_visible_start =
-        this.$props.direction === VERTICAL ? pos.yPos : pos.xPos;
-      this.visibleItemList = this._getVisibleItemList(
-        this.$props.baseAnchor.id,
-        cur_visible_start,
-        cur_visible_start + visible_range - 1
-      );
-    }
-    if (this.$props.initFocusId) {
-      init_focus_id = this.$props.initFocusId;
-      if (typeof this.$props.baseAnchor === "undefined") {
-        cur_visible_start = this._CalculateSlide(
-          this.pageData._TemplateParser.GetItem(init_focus_id),
-          1,
-          0
-        ).visibleStart;
-        this.visibleItemList = this._getVisibleItemList(
-          init_focus_id,
-          cur_visible_start,
-          cur_visible_start + visible_range - 1
-        );
-      }
-    }
-    this.focusId = init_focus_id;
-    this.visibleStart = cur_visible_start;
-    this.visibleRange = visible_range;
-  },
-  mounted() {
-    //注册事件
-    eventHub.registerEvent(
-      Event.ShowLoadingViewDone,
-      this._showLoadingPageDoneCallback
-    );
-    eventHub.registerEvent(Event.UpdatePageDone, this._updatePageDoneCallback);
-
-    let visible_start = this.visibleStart;
-    let visible_end = this.visibleStart + this.visibleRange - 1;
-    let pages = this.pageData.getPageList(visible_start, visible_end, 1);
-    this.prePages = pages;
-    let load_type_list = new Array(pages.length);
-    for (let i = 0; i < pages.length; i++) {
-      load_type_list[i] = !(
-        pages[i].top <= visible_end + this.visibleRange &&
-        pages[i].bottom >= visible_start
-      );
-    }
-    this.rootView.updatePages(pages, load_type_list);
-    if (this.visibleStart !== 0) {
-      let x = this.$props.direction === VERTICAL ? 0 : -this.visibleStart;
-      let y = this.$props.direction === VERTICAL ? -this.visibleStart : 0;
-      this.rootView.updatePosition(x, y);
-    }
-  },
-  beforeUnmount() {
-    if (this.$props.dispatcher) {
-      this.$props.dispatcher.unregisterComponent();
-    }
-  },
-};
-
-export { MetroPage };