@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/utils/JsViewEngineWidget/TemplateParser.js

@@ -1,2004 +0,0 @@
-/* eslint-disable */
-import { RangesModel, SingleRangeModel } from "./RangeModel";
-import { RectArea } from "./RectUtils";
-import { VERTICAL, HORIZONTAL, FocusMoveType } from "./WidgetCommon";
-const TAG = "TemplateParser: ";
-
-function integerCheck(value, warn_func) {
-  const result = Math.round(value);
-  if (result !== value) {
-    warn_func();
-  }
-  return result;
-}
-
-const measureObjectCheckMap = {
-  left: (obj) => {
-    if (isNaN(obj.left)) {
-      return 0;
-    } else {
-      return integerCheck(obj.left, () => {
-        console.warn(TAG, "left is not integer", obj);
-      });
-    }
-  },
-  top: (obj) => {
-    if (isNaN(obj.top)) {
-      return 0;
-    } else {
-      return integerCheck(obj.top, () => {
-        console.warn(TAG, "top is not integer", obj);
-      });
-    }
-  },
-  width: (obj) => {
-    if (isNaN(obj.width)) {
-      if (isNaN(obj.block?.w)) {
-        throw new Error(TAG + "width is not defined");
-      } else {
-        console.warn(TAG, "key 'block' is deprecated ");
-        return integerCheck(obj.blocks.w, () => {
-          console.warn(TAG, "width is not integer", obj);
-        });
-      }
-    } else {
-      return integerCheck(obj.width, () => {
-        console.warn(TAG, "width is not integer", obj);
-      });
-    }
-  },
-  height: (obj) => {
-    if (isNaN(obj.height)) {
-      if (isNaN(obj.block?.h)) {
-        throw new Error(TAG + "height is not defined");
-      } else {
-        console.warn(TAG, "key 'block' is deprecated ");
-        return integerCheck(obj.blocks.h, () => {
-          console.warn(TAG, "height is not integer", obj);
-        });
-      }
-    } else {
-      return integerCheck(obj.height, () => {
-        console.warn(TAG, "height is not integer", obj);
-      });
-    }
-  },
-};
-function measureObjectChecker(obj) {
-  for (let key in measureObjectCheckMap) {
-    obj[key] = measureObjectCheckMap[key](obj);
-  }
-}
-
-function getTemplateItem(measure_obj, data_info) {
-  measureObjectChecker(measure_obj);
-
-  let focusZIndex = -1,
-    normalZIndex = -1;
-  if (
-    typeof measure_obj["zIndex"] != "undefined" &&
-    measure_obj["zIndex"] != null
-  ) {
-    if (typeof measure_obj["zIndex"] == "object") {
-      if (typeof measure_obj["zIndex"]["focus"] == "number") {
-        focusZIndex = measure_obj["zIndex"]["focus"];
-      }
-      if (typeof measure_obj["zIndex"]["normal"] == "number") {
-        normalZIndex = measure_obj["zIndex"]["normal"];
-      }
-    } else if (typeof measure_obj["zIndex"] == "number") {
-      focusZIndex = measure_obj["zIndex"];
-      normalZIndex = measure_obj["zIndex"];
-    }
-  }
-
-  return {
-    id: -1,
-    index: -1,
-    xPos: measure_obj.left, // Set after template be layout
-    yPos: measure_obj.top, // Set after template be layout
-    centerXPos: 0, // Set after template be layout
-    centerYPos: 0, // Set after template be layout
-    width: measure_obj.width,
-    height: measure_obj.height,
-    focusable:
-      typeof measure_obj.focusable === "undefined"
-        ? true
-        : measure_obj.focusable,
-    data: data_info,
-    marginRight:
-      typeof measure_obj.marginRight !== "undefined"
-        ? measure_obj.marginRight
-        : 0,
-    marginBottom:
-      typeof measure_obj.marginBottom !== "undefined"
-        ? measure_obj.marginBottom
-        : 0,
-    findNextAnchor:
-      typeof measure_obj.findNextAnchor !== "undefined"
-        ? measure_obj.findNextAnchor
-        : null,
-    doSlide:
-      typeof measure_obj.doSlide !== "undefined" ? measure_obj.doSlide : true,
-    pageNumber: -1,
-    pageHeadIndex: -1,
-    permanent:
-      typeof measure_obj.permanent !== "undefined"
-        ? measure_obj.permanent
-        : false,
-    focusZIndex,
-    normalZIndex,
-  };
-}
-
-class MetroTemplate {
-  /**
-   * 在MetroLayout中使用的模板管理类
-   *
-   * @protected
-   * @constructor Forge.MetroTemplate
-   * */
-  constructor(direction, line_max, layout_type) {
-    this.IdsMap = [];
-    this._IdsTotal = -1;
-    this.List = [];
-    this.Orient = {
-      type: direction,
-      widthMax: line_max,
-    };
-    this.Layout = {
-      type: layout_type || "relative",
-    };
-  }
-
-  /**
-   * Set id map to index
-   *
-   * @public
-   * @func SetIdsMap
-   * @memberof Forge.MetroTemplate
-   * @params {int} identity
-   * @instance
-   * */
-  SetIdsMap(identity, index) {
-    this.IdsMap[identity] = index;
-    this._IdsTotal = -1;
-    this.List[index].id = identity;
-  }
-
-  AddItem(item) {
-    this.List.push(item);
-    item.index = this.List.length - 1;
-  }
-
-  /**
-   * 非占位的Template的个数
-   *
-   * @private
-   * @func GetIdsTotal
-   * @memberof Forge.MetroTemplate
-   * @params
-   * @instance
-   * @return {int} 个数
-   * */
-  GetIdsTotal() {
-    if (this._IdsTotal < 0) {
-      let total = 0;
-      for (let i = 0; i < this.List.length; i++) {
-        if (this.List[i].id >= 0) {
-          total++;
-        }
-      }
-      this._IdsTotal = total;
-    }
-
-    return this._IdsTotal;
-  }
-
-  GetLastId() {
-    return this.IdsMap.length - 1;
-  }
-}
-
-class Fence {
-  /**
-   * MetroLayout用于计算使用区域的Fence(栅栏)
-   *
-   * @private
-   * @constructor _Fence
-   * @memberof Forge.MetroLayout
-   * @param {int} taken_start_pos     栅栏使用区域的起始位置
-   * @param {int} width               栅栏使用区域的宽度
-   * @param {int} fence_width         栅栏的总宽度
-   * @param {int} offset_ahead        栅栏的横向位置
-   * */
-  constructor(taken_start_pos, width, fence_width, offset_ahead) {
-    this._Gaps = [{ GapStart: 0, GapEnd: fence_width - 1 }];
-    this._FenceTotalWidth = fence_width;
-    this.AheadOffset = offset_ahead;
-    if (width > 0) this._SplitGap(0, taken_start_pos, width);
-  }
-
-  /**
-   * 查询栅栏是否能放下给定宽度的方块
-   *
-   * @public
-   * @func HasGapFor
-   * @memberof Forge.MetroLayout._Fence
-   * @instance
-   * @param {int} width
-   * @return {Object} 格式为{startPos: 栅栏空隙的起始位置}，null为没有能容下的空隙。
-   * */
-  HasGapFor(width) {
-    for (let i = 0; i < this._Gaps.length; i++) {
-      if (this._Gaps[i].GapEnd - this._Gaps[i].GapStart + 1 >= width) {
-        return { startPos: this._Gaps[i].GapStart };
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * 标记栅栏空隙被占用
-   *
-   * @public
-   * @func MarkGapUsed
-   * @memberof Forge.MetroLayout._Fence
-   * @instance
-   * @param {int} start_pos       占用块的起始位置
-   * @param {int} width           占用快的宽度
-   * @return {int} 剩余栅栏的个数
-   * */
-  MarkGapUsed(start_pos, width) {
-    if (width <= 0) return this._Gaps.length;
-
-    const end_pos = start_pos + width - 1;
-    let gap_idx = -1;
-    for (let i = 0; i < this._Gaps.length; i++) {
-      if (
-        this._Gaps[i].GapStart <= start_pos &&
-        this._Gaps[i].GapEnd >= end_pos
-      ) {
-        gap_idx = i;
-        break;
-      }
-    }
-
-    if (gap_idx === -1) {
-      return; // 区域完全重复，无法找到新区域
-    }
-
-    this._SplitGap(gap_idx, start_pos, width);
-
-    return this._Gaps.length;
-  }
-
-  _SplitGap(gap_idx, taker_start_pos, taker_width) {
-    const edit_gap = this._Gaps.splice(gap_idx, 1)[0];
-    const taker_end_pos = taker_start_pos + taker_width - 1;
-
-    if (
-      taker_start_pos < edit_gap.GapStart ||
-      taker_end_pos > edit_gap.GapEnd
-    ) {
-      console.log("ERROR in split Fence Gap, range overflow");
-      // Forge.ThrowError("ERROR in split Fence Gap, range overflow");
-    }
-
-    // Insert end side gap
-    if (taker_end_pos !== edit_gap.GapEnd) {
-      this._Gaps.splice(gap_idx, 0, {
-        GapStart: taker_end_pos + 1,
-        GapEnd: edit_gap.GapEnd,
-      });
-    }
-
-    // Insert start side gap
-    if (taker_start_pos !== edit_gap.GapStart) {
-      this._Gaps.splice(gap_idx, 0, {
-        GapStart: edit_gap.GapStart,
-        GapEnd: taker_start_pos - 1,
-      });
-    }
-  }
-
-  /**
-   * 标记栅栏空隙被占用
-   *
-   * @public
-   * @func Fork
-   * @memberof Forge.MetroLayout._Fence
-   * @instance
-   * @param {int} new_ahead_offset 新栅栏的起点位置
-   * @return {Forge.MetroLayout._Fence} 复制出来的Fence
-   * */
-  Fork(new_ahead_offset) {
-    const new_fence = new Fence(0, 0, 0, 0);
-    new_fence._Gaps = JSON.parse(JSON.stringify(this._Gaps));
-    new_fence._FenceTotalWidth = this._FenceTotalWidth;
-    new_fence.AheadOffset = new_ahead_offset;
-
-    return new_fence;
-  }
-}
-
-class TemplateParser {
-  constructor(direction, lineMax, pageSize, layoutType, supportHistoryPath) {
-    this._Template = new MetroTemplate(direction, lineMax, layoutType);
-    this._FenceStack = [new Fence(0, 0, this._Template.Orient.widthMax, 0)];
-    this._Identity = 0;
-    this._FenceEdge = { StartX: 0, StartY: 0 }; // 新的未占用边列表生成
-    this._NotOccupiedEdgeList = []; // 未占用边列表
-    this._SupportHistoryPath = supportHistoryPath;
-    this._PageSize = pageSize;
-    // this._VisibleRangeSearchBaseItem = null;
-  }
-
-  _IfBlockedByOtherNeighbor(direction, cross_item, target_item) {
-    //检查是否被其他neighbor遮挡
-    let position_key = "yPos";
-    let size_key = "height";
-    let sub_position_key = "xPos";
-    switch (direction) {
-      case "left":
-        break;
-      case "right":
-        break;
-      case "top":
-        position_key = "xPos";
-        sub_position_key = "yPos";
-        size_key = "width";
-        break;
-      case "bottom":
-        position_key = "xPos";
-        sub_position_key = "yPos";
-        size_key = "width";
-        break;
-      default:
-        console.log(`_IfBlockedByOtherNeighbor unknown direction:${direction}`);
-        break;
-    }
-    const cross_template_item = this.GetItem(cross_item.index);
-    const cross_neighbor_list =
-      cross_template_item.neighborIndexList[direction];
-    const target_template_item = this.GetItem(target_item.index);
-    const target_start = target_template_item[position_key];
-    const target_end = target_start + target_template_item[size_key] - 1;
-    let valid = true;
-    for (let i = cross_neighbor_list.length - 1; i >= 0; i--) {
-      const item = this.GetItem(cross_neighbor_list[i]);
-      const item_start = item[position_key];
-      const item_end = item_start + item[size_key] - 1;
-      if (item_start <= target_end && item_end >= target_start) {
-        //有重叠, 检查两个item那个离 cross item 更近
-        if (
-          Math.abs(
-            item[sub_position_key] - cross_template_item[sub_position_key]
-          ) <
-          Math.abs(
-            target_template_item[sub_position_key] -
-              cross_template_item[sub_position_key]
-          )
-        ) {
-          //已有的neighbor更近
-          valid = false;
-          break;
-        } else {
-          //target item更近, 删除已有的neighbor
-          cross_neighbor_list.splice(i, 1);
-        }
-      }
-    }
-    return valid;
-  }
-
-  _CheckNeighborItemMatching(direction, cross_item, target_item) {
-    const cross_edge_obj = cross_item.edgeObj;
-    const target_edge_obj = target_item.edgeObj;
-    let target_edge_name = "rightEdge";
-    let cross_edge_name = "leftEdge";
-    switch (direction) {
-      case "left":
-        target_edge_name = "rightEdge";
-        cross_edge_name = "leftEdge";
-        break;
-      case "right":
-        target_edge_name = "leftEdge";
-        cross_edge_name = "rightEdge";
-        break;
-      case "top":
-        target_edge_name = "bottomEdge";
-        cross_edge_name = "topEdge";
-        break;
-      case "bottom":
-        cross_edge_name = "bottomEdge";
-        target_edge_name = "topEdge";
-        break;
-      default:
-        console.log(
-          `_CheckNeighborItemMatching unknown direction:${direction}`
-        );
-        break;
-    }
-    // console.log(
-    //   "cchtest exclude edge",
-    //   cross_item.index,
-    //   target_item.index,
-    //   cross_edge_name,
-    //   target_edge_name,
-    //   cross_edge_obj[cross_edge_name].range.Clone().Ranges,
-    //   target_edge_obj[target_edge_name].range.Clone().Ranges
-    // );
-
-    const target_edge_range_clone =
-      target_edge_obj[target_edge_name].range.Clone();
-    target_edge_obj[target_edge_name].range.ExcludeRanges(
-      cross_edge_obj[cross_edge_name].range
-    );
-    cross_edge_obj[cross_edge_name].range.ExcludeRanges(
-      target_edge_range_clone
-    );
-
-    // console.log(
-    //   "cchtest after exclude",
-    //   cross_edge_obj[cross_edge_name].range.Clone().Ranges,
-    //   target_edge_obj[target_edge_name].range.Clone().Ranges
-    // );
-
-    if (target_edge_obj[target_edge_name].range.IsEmpty()) {
-      // 完全匹配，更新该边的状态为已被占用
-      target_edge_obj[target_edge_name] = null;
-    }
-
-    if (cross_edge_obj[cross_edge_name].range.IsEmpty()) {
-      // 清除该边
-      cross_edge_obj[cross_edge_name] = null;
-    }
-  }
-
-  _FindNearestNeighbor(cross_item) {
-    const cross_edge_obj = cross_item.edgeObj;
-
-    let nearest_left_index = -1;
-    let nearest_right_index = -1;
-    let nearest_top_index = -1;
-    let nearest_bottom_index = -1;
-    let left_distance = -1;
-    let right_distance = -1;
-    let top_distance = -1;
-    let bottom_distance = -1;
-
-    for (let j = 0; j < this._NotOccupiedEdgeList.length; j++) {
-      const target_item = this._NotOccupiedEdgeList[j];
-      const target_edge_obj = target_item.edgeObj;
-      if (cross_item === target_item) {
-        continue;
-      }
-      // 左边最近项
-      if (
-        cross_edge_obj.leftEdge !== null &&
-        target_edge_obj.rightEdge !== null
-      ) {
-        if (
-          cross_edge_obj.leftEdge.x >= target_edge_obj.rightEdge.x &&
-          cross_edge_obj.leftEdge.range.IsInterAct(
-            target_edge_obj.rightEdge.range
-          )
-        ) {
-          // 在其左侧，且有交叉，才为neighbor
-          // 计算最短距离
-          if (left_distance === -1) {
-            left_distance =
-              cross_edge_obj.leftEdge.x - target_edge_obj.rightEdge.x;
-            nearest_left_index = j;
-            continue;
-          } else if (
-            left_distance >
-            cross_edge_obj.leftEdge.x - target_edge_obj.rightEdge.x
-          ) {
-            left_distance =
-              cross_edge_obj.leftEdge.x - target_edge_obj.rightEdge.x;
-            nearest_left_index = j;
-            continue;
-          }
-        }
-      }
-      // 右边最近项
-      if (
-        cross_edge_obj.rightEdge !== null &&
-        target_edge_obj.leftEdge !== null
-      ) {
-        if (
-          cross_edge_obj.rightEdge.x <= target_edge_obj.leftEdge.x &&
-          cross_edge_obj.rightEdge.range.IsInterAct(
-            target_edge_obj.leftEdge.range
-          )
-        ) {
-          // 在其左侧，且有交叉，才为neighbor
-          // 计算最短距离
-          if (right_distance === -1) {
-            right_distance =
-              target_edge_obj.leftEdge.x - cross_edge_obj.rightEdge.x;
-            nearest_right_index = j;
-            continue;
-          } else if (
-            right_distance >
-            target_edge_obj.leftEdge.x - cross_edge_obj.rightEdge.x
-          ) {
-            right_distance =
-              target_edge_obj.leftEdge.x - cross_edge_obj.rightEdge.x;
-            nearest_right_index = j;
-            continue;
-          }
-        }
-      }
-
-      // 上边最近项
-      if (
-        cross_edge_obj.topEdge !== null &&
-        target_edge_obj.bottomEdge !== null
-      ) {
-        if (
-          cross_edge_obj.topEdge.y >= target_edge_obj.bottomEdge.y &&
-          cross_edge_obj.topEdge.range.IsInterAct(
-            target_edge_obj.bottomEdge.range
-          )
-        ) {
-          // 在其左侧，且有交叉，才为neighbor
-          // 计算最短距离
-          if (top_distance === -1) {
-            top_distance =
-              cross_edge_obj.topEdge.y - target_edge_obj.bottomEdge.y;
-            nearest_top_index = j;
-            continue;
-          } else if (
-            top_distance >
-            cross_edge_obj.topEdge.y - target_edge_obj.bottomEdge.y
-          ) {
-            top_distance =
-              cross_edge_obj.topEdge.y - target_edge_obj.bottomEdge.y;
-            nearest_top_index = j;
-            continue;
-          }
-        }
-      }
-      // 下边的最近项
-      if (
-        cross_edge_obj.bottomEdge !== null &&
-        target_edge_obj.topEdge !== null
-      ) {
-        if (
-          cross_edge_obj.bottomEdge.y <= target_edge_obj.topEdge.y &&
-          cross_edge_obj.bottomEdge.range.IsInterAct(
-            target_edge_obj.topEdge.range
-          )
-        ) {
-          // 在其左侧，且有交叉，才为neighbor
-          // 计算最短距离
-          if (bottom_distance === -1) {
-            bottom_distance =
-              target_edge_obj.topEdge.y - cross_edge_obj.bottomEdge.y;
-            nearest_bottom_index = j;
-            continue;
-          } else if (
-            bottom_distance >
-            target_edge_obj.topEdge.y - cross_edge_obj.bottomEdge.y
-          ) {
-            bottom_distance =
-              target_edge_obj.topEdge.y - cross_edge_obj.bottomEdge.y;
-            nearest_bottom_index = j;
-            continue;
-          }
-        }
-      }
-    }
-
-    return {
-      left: nearest_left_index,
-      right: nearest_right_index,
-      top: nearest_top_index,
-      bottom: nearest_bottom_index,
-    };
-  }
-
-  _TryUpdateItemNeighbor(tmp_neighbor, direction, cross_item, target_item) {
-    const key_map = {
-      target: {
-        left: "right",
-        right: "left",
-        top: "bottom",
-        bottom: "top",
-      },
-      cross: {
-        left: "left",
-        right: "right",
-        top: "top",
-        bottom: "bottom",
-      },
-    };
-    let cross_neighbor_key = key_map.cross[direction];
-    let target_neighbor_key = key_map.target[direction];
-    if (!cross_neighbor_key || !target_neighbor_key) {
-      console.error("_TryUpdateItemNeighbor: undefined direction", direction);
-    }
-
-    const target_index = target_item.index;
-    const cross_item_index = cross_item.index;
-    const template_list = this._Template.List;
-    if (this._IfBlockedByOtherNeighbor(direction, cross_item, target_item)) {
-      if (!tmp_neighbor) {
-        this._CheckNeighborItemMatching(direction, cross_item, target_item);
-        // 查看是否有交集,有交集，更新临近边
-        template_list[target_index].neighborIndexList[target_neighbor_key].push(
-          cross_item_index
-        );
-        template_list[cross_item_index].neighborIndexList[
-          cross_neighbor_key
-        ].push(target_index);
-        template_list[target_index].tmpNeighborIndexList[target_neighbor_key] =
-          [];
-        template_list[cross_item_index].tmpNeighborIndexList[
-          cross_neighbor_key
-        ] = [];
-      } else {
-        template_list[target_index].tmpNeighborIndexList[
-          target_neighbor_key
-        ].push(cross_item_index);
-        template_list[cross_item_index].tmpNeighborIndexList[
-          cross_neighbor_key
-        ].push(target_index);
-      }
-    }
-  }
-
-  _CalculateNeighborItem(tmp_neighbor) {
-    const template_list = this._Template.List;
-    // 更新邻近边,以及未占用的边
-    for (let i = 0; i < this._NotOccupiedEdgeList.length; i++) {
-      const cross_item = this._NotOccupiedEdgeList[i];
-      const cross_edge_obj = cross_item.edgeObj;
-      const cross_item_index = cross_item.index;
-      if (
-        cross_edge_obj.leftEdge == null &&
-        cross_edge_obj.rightEdge == null &&
-        cross_edge_obj.topEdge == null &&
-        cross_edge_obj.bottomEdge == null
-      ) {
-        this._NotOccupiedEdgeList.splice(i, 1);
-        i--;
-        continue;
-      }
-      if (this._Template.Orient.type === VERTICAL) {
-        // 如果下边被占用，则将其从列表中删除
-        // if (cross_edge_obj.bottomEdge === null) {
-        //   this._NotOccupiedEdgeList.splice(i, 1);
-        //   i--;
-        //   continue;
-        // }
-        // 临时邻居不触发fence edge
-        // 超过fenceedge范围，不作为对比相
-        if (
-          !tmp_neighbor &&
-          cross_edge_obj.bottomEdge?.y > this._FenceEdge.StartY
-        ) {
-          continue;
-        }
-      } else {
-        // 如果右边被占用，则将其从列表中删除
-        // if (cross_edge_obj.rightEdge === null) {
-        //   this._NotOccupiedEdgeList.splice(i, 1);
-        //   i--;
-        //   continue;
-        // }
-        // 临时邻居不触发fence edge
-        // 超过fenceedge范围，不作为对比相
-        if (
-          !tmp_neighbor &&
-          cross_edge_obj.rightEdge?.x > this._FenceEdge.StartX
-        ) {
-          continue;
-        }
-      }
-
-      // 查找与交叉项上下左右最近的各项目，做交叉
-      const neighbor = this._FindNearestNeighbor(cross_item);
-      // console.log(
-      //   "%c cchtest find nearest neighbor",
-      //   "color:red;",
-      //   cross_item.index,
-      //   {
-      //     left: this._NotOccupiedEdgeList[neighbor.left]?.index,
-      //     right: this._NotOccupiedEdgeList[neighbor.right]?.index,
-      //     top: this._NotOccupiedEdgeList[neighbor.top]?.index,
-      //     bottom: this._NotOccupiedEdgeList[neighbor.bottom]?.index,
-      //   }
-      // );
-
-      for (let key in neighbor) {
-        //更新每个方向找到的邻居
-        if (neighbor[key] !== -1) {
-          const target_item = this._NotOccupiedEdgeList[neighbor[key]];
-          this._TryUpdateItemNeighbor(
-            tmp_neighbor,
-            key,
-            cross_item,
-            target_item
-          );
-        }
-      }
-    }
-  }
-
-  /**
-   * 计算相邻节点（包含占位符）
-   *
-   * @func _TryCalculateNeighborItem
-   * @memberof Forge.MetroLayout
-   * @param index Template 索引
-   * @param {int} x_pos
-   * @param {int} y_pos
-   * @param {int} width
-   * @param {int} height
-   * @private
-   */
-  _TryCalculateNeighborItem(index, x_pos, y_pos, width, height) {
-    const cur_not_occupied_edge = {
-      index,
-      edgeObj: {
-        leftEdge: {
-          x: x_pos,
-          range: new RangesModel(y_pos, y_pos + height - 1),
-        },
-        rightEdge: {
-          x: x_pos + width,
-          range: new RangesModel(y_pos, y_pos + height - 1),
-        },
-        topEdge: {
-          y: y_pos,
-          range: new RangesModel(x_pos, x_pos + width - 1),
-        },
-        bottomEdge: {
-          y: y_pos + height,
-          range: new RangesModel(x_pos, x_pos + width - 1),
-        },
-      },
-    };
-    // 边界处理，重置leftEdge和topEdge；
-    if (x_pos === 0) {
-      cur_not_occupied_edge.edgeObj.leftEdge = null;
-    }
-    if (y_pos === 0) {
-      cur_not_occupied_edge.edgeObj.topEdge = null;
-    }
-    let new_fance = false;
-    // 边界处理，重置bootomEdge和rightEdge
-    const width_max = this._Template.Orient.widthMax;
-    let new_fence_edge_start_x = this._FenceEdge.StartX;
-    let new_fence_edge_start_y = this._FenceEdge.StartY;
-    if (this._Template.Orient.type === VERTICAL) {
-      if (x_pos + width === width_max) {
-        cur_not_occupied_edge.edgeObj.rightEdge = null;
-      }
-      // 判断FenceEdge，是否产生新的fence
-      if (y_pos > this._FenceEdge.StartY) {
-        // 产生新的Fence
-        new_fance = true;
-        new_fence_edge_start_y = y_pos;
-      }
-    } else {
-      if (y_pos + height === width_max) {
-        cur_not_occupied_edge.edgeObj.bottomEdge = null;
-      }
-      // 判断FenceEdge，是否产生新的fence
-      if (x_pos > this._FenceEdge.StartX) {
-        // 产生新的Fence
-        new_fance = true;
-        new_fence_edge_start_x = x_pos;
-      }
-    }
-    this._FenceEdge.StartX = new_fence_edge_start_x;
-    this._FenceEdge.StartY = new_fence_edge_start_y;
-    // 添加节点
-    this._NotOccupiedEdgeList.push(cur_not_occupied_edge);
-    // 如果产生新fence,则对NotOccupiedEdgeList进行相邻节点计算
-    if (new_fance) {
-      this._CalculateNeighborItem();
-    }
-  }
-
-  _UpdateLastFenceEdge() {
-    const old_fence = this._FenceEdge;
-    const new_min_fence = { StartX: -1, StartY: -1 };
-    // 查找最后一条FenceEdge
-    for (let i = 0; i < this._NotOccupiedEdgeList.length; i++) {
-      const cross_item = this._NotOccupiedEdgeList[i];
-      const cross_edge_obj = cross_item.edgeObj;
-      if (this._Template.Orient.type === VERTICAL) {
-        if (cross_edge_obj.bottomEdge !== null) {
-          if (cross_edge_obj.bottomEdge.y > old_fence.StartY) {
-            if (new_min_fence.StartY === -1) {
-              new_min_fence.StartY = cross_edge_obj.bottomEdge.y;
-            } else if (cross_edge_obj.bottomEdge.y < new_min_fence.StartY) {
-              new_min_fence.StartY = cross_edge_obj.bottomEdge.y;
-            }
-          }
-        }
-      } else {
-        if (cross_edge_obj.rightEdge !== null) {
-          if (cross_edge_obj.rightEdge.x > old_fence.StartX) {
-            if (new_min_fence.StartX === -1) {
-              new_min_fence.StartX = cross_edge_obj.rightEdge.x;
-            } else if (cross_edge_obj.rightEdge.y < new_min_fence.StartX) {
-              new_min_fence.StartX = cross_edge_obj.rightEdge.x;
-            }
-          }
-        }
-      }
-    }
-
-    this._FenceEdge = new_min_fence;
-  }
-
-  ParseTemplateItem(item_obj, data_obj) {
-    const template_item = getTemplateItem(item_obj, data_obj);
-    // Layout template items
-    const fence_stack = this._FenceStack;
-    const item_id = template_item.id;
-    const item_width = template_item.width;
-    const item_height = template_item.height;
-    // Add view to contents view layer
-    let x_pos;
-    let y_pos;
-    let x_width;
-    let y_width;
-    let item_key_pos = 0;
-    let item_second_pos = 0;
-
-    let item_key_width = 0;
-    let item_second_width = 0;
-    let item_key_margin = 0;
-    let item_second_margin = 0;
-    if (this._Template.Layout.type === "relative") {
-      if (this._Template.Orient.type === VERTICAL) {
-        item_key_width = item_width;
-        item_second_width = item_height;
-        item_key_margin = template_item.marginRight;
-        item_second_margin = template_item.marginBottom;
-      } else {
-        item_key_width = item_height;
-        item_second_width = item_width;
-        item_key_margin = template_item.marginBottom;
-        item_second_margin = template_item.marginRight;
-      }
-      // Find capability fence in stack
-      let top_fence = null;
-      let gap_info = null;
-      while (fence_stack.length > 0) {
-        const checking_fence = fence_stack[fence_stack.length - 1];
-        gap_info = checking_fence.HasGapFor(item_key_width + item_key_margin);
-        if (gap_info !== null) {
-          top_fence = checking_fence;
-          break;
-        }
-        fence_stack.pop();
-      }
-
-      // Layout the item in top fence
-      if (gap_info !== null) {
-        item_key_pos = gap_info.startPos;
-        item_second_pos = top_fence.AheadOffset;
-      } else {
-        throw new Error(
-          `${TAG} item size ${item_width}x${item_height} is greater than widget line max ${this._Template.Orient.widthMax}`
-        );
-        // console.error(TAG, "ERROR: coding error, header full gap fence lost");
-      }
-
-      if (this._Template.Orient.type === VERTICAL) {
-        x_pos = item_key_pos;
-        y_pos = item_second_pos;
-        x_width = item_key_width;
-        y_width = item_second_width;
-      } else {
-        x_pos = item_second_pos;
-        y_pos = item_key_pos;
-        x_width = item_second_width;
-        y_width = item_key_width;
-      }
-    } else {
-      x_pos = template_item.xPos;
-      y_pos = template_item.yPos;
-      x_width = item_width;
-      y_width = item_height;
-    }
-
-    // Update template item information
-    template_item.neighborIndexList = {
-      left: [],
-      top: [],
-      right: [],
-      bottom: [],
-    };
-    template_item.tmpNeighborIndexList = {
-      left: [],
-      top: [],
-      right: [],
-      bottom: [],
-    };
-    // 记录历史路径
-    template_item.pathHistory = {
-      left: null,
-      top: null,
-      right: null,
-      bottom: null,
-    };
-    template_item.xPos = x_pos;
-    template_item.yPos = y_pos;
-    template_item.centerXPos = Math.floor(x_pos + x_width / 2) - 1;
-    template_item.centerYPos = Math.floor(y_pos + y_width / 2) - 1;
-    //分页相关的计算
-    let cur_page_number = 0;
-    let cur_page_head_index = 0;
-    if (this._Template.List.length > 0) {
-      const last_item = this._Template.List[this._Template.List.length - 1];
-      cur_page_number = last_item.pageNumber;
-      cur_page_head_index = last_item.pageHeadIndex;
-      let position_key = "xPos";
-      let size_key = "width";
-      if (this._Template.Orient.type === VERTICAL) {
-        position_key = "yPos";
-        size_key = "height";
-      }
-      const cur_page_start =
-        this._Template.List[cur_page_head_index][position_key];
-      if (
-        template_item[position_key] + template_item[size_key] >
-        cur_page_start + this._PageSize
-      ) {
-        //新的页
-        cur_page_number++;
-        cur_page_head_index = this._Template.List.length;
-      }
-    }
-
-    template_item.pageNumber = cur_page_number;
-    template_item.pageHeadIndex = cur_page_head_index;
-    // if (
-    //   this._Template.Orient.type !== VERTICAL &&
-    //   y_pos + y_width === this._Template.Orient.widthMax
-    // ) {
-    //   template_item.onBottomLine = true;
-    // }
-    this._Template.AddItem(template_item);
-    // Update template item id
-    if (template_item.focusable) {
-      this._Template.SetIdsMap(
-        this._Identity++,
-        this._Template.List.length - 1
-      );
-    }
-    // 计算相邻项
-    this._TryCalculateNeighborItem(
-      this._Template.List.length - 1,
-      template_item.xPos,
-      template_item.yPos,
-      template_item.width + template_item.marginRight,
-      template_item.height + template_item.marginBottom
-    );
-
-    const item_second_end_pos =
-      item_second_pos + item_second_width + item_second_margin - 1;
-
-    // Ensure header fence
-    if (fence_stack[0].AheadOffset <= item_second_end_pos) {
-      // Need new header fence
-      fence_stack.splice(
-        0,
-        0,
-        new Fence(0, 0, this._Template.Orient.widthMax, item_second_end_pos + 1)
-      );
-    }
-
-    // Mark gap used in fence stack
-    let end_fence_existed = false;
-    let far_away_end_fence_existed = false;
-    let one_ahead_last_fence_idx = -1;
-    for (let fence_idx = fence_stack.length - 1; fence_idx >= 0; fence_idx--) {
-      if (fence_stack[fence_idx].AheadOffset <= item_second_end_pos) {
-        if (fence_stack[fence_idx].AheadOffset === item_second_end_pos)
-          end_fence_existed = true;
-        const left_gaps = fence_stack[fence_idx].MarkGapUsed(
-          item_key_pos,
-          item_key_width + item_key_margin
-        );
-        if (left_gaps === 0) {
-          // remove fence
-          fence_stack.splice(fence_idx, 1);
-        }
-      } else {
-        if (fence_stack[fence_idx].AheadOffset === item_second_end_pos + 1)
-          far_away_end_fence_existed = true;
-        one_ahead_last_fence_idx = fence_idx;
-        break;
-      }
-    }
-
-    const fence_ahead_offset = item_second_end_pos;
-    // Create fences
-    if (!end_fence_existed) {
-      // Build fence edge which close to the beginning
-      if (one_ahead_last_fence_idx + 1 <= fence_stack.length - 1) {
-        const fence =
-          fence_stack[one_ahead_last_fence_idx + 1].Fork(fence_ahead_offset);
-        fence_stack.splice(one_ahead_last_fence_idx + 1, 0, fence);
-      }
-    }
-    if (!far_away_end_fence_existed) {
-      // Build fence edge which far away from the beginning
-      if (one_ahead_last_fence_idx > 0) {
-        const fence = fence_stack[one_ahead_last_fence_idx].Fork(
-          fence_ahead_offset + 1
-        );
-        fence_stack.splice(one_ahead_last_fence_idx + 1, 0, fence);
-      }
-    }
-    return template_item;
-  }
-
-  GetItemById(id) {
-    return this._Template.List[this._Template.IdsMap[id]];
-  }
-
-  GetLastId() {
-    return this._Template.GetLastId();
-  }
-
-  GetItem(index) {
-    return index >= 0
-      ? this._Template.List[index]
-      : this._Template.List[this._Template.List.length + index];
-  }
-
-  GetLength() {
-    return this._Template.List.length;
-  }
-
-  IdToIndex(id) {
-    const index = this._Template.IdsMap[id];
-    if (typeof index !== "undefined") {
-      return index;
-    } else {
-      return -1;
-    }
-  }
-
-  /**
-   * 查看Ids中是否有能够获得焦点的项
-   * @param ids
-   * @returns {boolean}
-   * @private
-   */
-  _CheckIdsHasFocusable(ids) {
-    const template_list = this._Template.List;
-    let found = false;
-    for (let i = 0; i < ids.length; i++) {
-      const id = ids[i];
-      if (template_list[id].focusable) {
-        found = true;
-        break;
-      }
-    }
-    return found;
-  }
-
-  _IsInNeighborList(neighbor_index_list, target_idx) {
-    let found = false;
-    for (let i = neighbor_index_list.length - 1; i >= 0; i--) {
-      if (neighbor_index_list[i] === target_idx) {
-        found = true;
-        break;
-      }
-    }
-    return found;
-  }
-
-  _GetValidNeighborIndex(src_item_id, last_item_id, neighbor_direction) {
-    const template_list = this._Template.List;
-    let valid_id = -1;
-    const item = template_list[last_item_id];
-    const src_item = template_list[src_item_id];
-    let first_ids = null;
-    let second_ids = null;
-
-    if (neighbor_direction === "top") {
-      // 查找左侧邻居节点
-      second_ids = item.neighborIndexList.left;
-      first_ids = item.neighborIndexList.right;
-    } else {
-      // left, right
-      second_ids = item.neighborIndexList.right;
-      first_ids = item.neighborIndexList.left;
-    }
-
-    if (first_ids.length > 0) {
-      for (let i = 0; i < first_ids.length; i++) {
-        const id = first_ids[i];
-        const check_item = template_list[id];
-        if (
-          check_item.focusable &&
-          ((neighbor_direction === "top" &&
-            check_item.yPos + check_item.height <= src_item.yPos) ||
-            (neighbor_direction === "bottom" &&
-              check_item.yPos >= src_item.yPos + src_item.height))
-        ) {
-          // 并且在src_item_id之上或之下
-          valid_id = id;
-          break;
-        }
-      }
-    }
-    if (valid_id === -1) {
-      if (second_ids.length > 0) {
-        for (let i = 0; i < second_ids.length; i++) {
-          const id = second_ids[i];
-          const check_item = template_list[id];
-          if (
-            check_item.focusable &&
-            ((neighbor_direction === "top" &&
-              check_item.yPos + check_item.height <= src_item.yPos) ||
-              (neighbor_direction === "bottom" &&
-                check_item.yPos >= src_item.yPos + src_item.height))
-          ) {
-            // 并且在src_item_id之上或之下
-            valid_id = id;
-            break;
-          }
-        }
-      }
-    }
-    return valid_id;
-  }
-
-  _FindFocusableNeighbor(direction, item) {
-    if (
-      item.neighborIndexList[direction].length > 0 &&
-      !this._CheckIdsHasFocusable(item.neighborIndexList[direction])
-    ) {
-      const last_item_id =
-        item.neighborIndexList[direction][
-          item.neighborIndexList[direction].length - 1
-        ];
-      const idx = this._GetValidNeighborIndex(item.id, last_item_id, direction); // 查找其左右邻居
-      if (idx !== -1) {
-        item.neighborIndexList[direction] = []; // 清除无效项
-        item.neighborIndexList[direction].push(idx);
-      }
-    }
-  }
-
-  CalculateNeighborWhenAddStop() {
-    // Update Last Fence Edge(更新最后一行的fence edge）
-    this._UpdateLastFenceEdge();
-    // Last fence edge to get neighbor
-    this._CalculateNeighborItem();
-    this._CalculateNeighborItem(true);
-    const template_list = this._Template.List;
-    // 若下一行或者上一行的邻居都为非焦点项,则查找向下向上有效项
-    let last_item_index = template_list.length - 1;
-    let last_item = template_list[last_item_index];
-    // 查找有效的最后项
-    for (let i = template_list.length - 1; i >= 0; i--) {
-      last_item = template_list[i];
-      if (last_item.focusable) {
-        last_item_index = i;
-        break;
-      }
-    }
-    //处理找到的neighbor均是占位符的情况
-    for (let j = template_list.length - 1; j >= 0; j--) {
-      const item = template_list[j];
-      if (item.focusable) {
-        this._FindFocusableNeighbor("bottom", item);
-        this._FindFocusableNeighbor("top", item);
-        this._FindFocusableNeighbor("left", item);
-        this._FindFocusableNeighbor("right", item);
-      }
-    }
-  }
-
-  /**
-   * 获取指定id的下一个Item
-   *
-   * @public
-   * @func GetNextItem
-   * @memberof Forge.MetroLayout
-   * @instance
-   * @param {int} base_item_id         Item的Id
-   * @param {int} vertical_offset     纵向偏移(-1为向上，1为向下）
-   * @param {int} horizontal_offset   横向偏移(-1为向左，1为向右）
-   * @param {int} focus_move_type     焦点移动设置
-   * @return {int}    下一个Item的Id，-1为该方向未找到Item(到达边缘)
-   * */
-  GetNextItem(
-    base_item_id,
-    vertical_offset,
-    horizontal_offset,
-    focus_move_type
-  ) {
-    if (vertical_offset === 0 && horizontal_offset === 0)
-      console.log("GetNextItem(): offset is 0");
-    // Forge.ThrowError("GetNextItem(): offset is 0");
-
-    if (vertical_offset !== 0 && horizontal_offset !== 0) {
-      console.log(
-        "GetNextItem(): not support change vertical and horizontal at the same time"
-      );
-      // Forge.ThrowError("GetNextItem(): not support change vertical and horizontal and the same time");
-    }
-
-    const item_index = this.IdToIndex(base_item_id);
-    const offset = vertical_offset !== 0 ? vertical_offset : horizontal_offset;
-    let next_template_item = this._GetNextItem(
-      item_index,
-      offset,
-      vertical_offset !== 0
-    );
-    const is_vertical = this._Template.Orient.type === VERTICAL;
-
-    if (next_template_item === null) {
-      // 在次方向的焦点移动才会loop
-      if (
-        is_vertical &&
-        focus_move_type & FocusMoveType.ROW_LOOP &&
-        horizontal_offset != 0
-      ) {
-        next_template_item = this._GetNextLoopItem(
-          item_index,
-          horizontal_offset,
-          is_vertical
-        );
-      } else if (
-        !is_vertical &&
-        focus_move_type & FocusMoveType.COLUMN_LOOP &&
-        vertical_offset != 0
-      ) {
-        next_template_item = this._GetNextLoopItem(
-          item_index,
-          vertical_offset,
-          is_vertical
-        );
-      }
-    }
-
-    if (next_template_item === null) {
-      // 临近行的焦点移动
-      if (
-        vertical_offset != 0 &&
-        focus_move_type & FocusMoveType.ROW_FIND_NEAR
-      ) {
-        next_template_item = this._GetNearLineItem(item_index, vertical_offset, true);
-      } else if (
-        horizontal_offset != 0 &&
-        focus_move_type & FocusMoveType.COLUMN_FIND_NEAR
-      ) {
-        next_template_item = this._GetNearLineItem(item_index, horizontal_offset, false);
-      }
-    }
-
-    return next_template_item;
-  }
-
-  _GetNextItem(index, offset, vertical) {
-    const template_list = this._Template.List;
-    const base_item = template_list[index];
-    let check_anchor = -1;
-    if (base_item.findNextAnchor) {
-      //有自定义的 anchor
-      // TODO 优化
-      if (vertical) {
-        if (offset > 0) {
-          if (base_item.findNextAnchor.bottom) {
-            check_anchor =
-              base_item.xPos +
-              base_item.findNextAnchor.bottom *
-                (base_item.width + base_item.marginRight);
-          }
-        } else {
-          if (base_item.findNextAnchor.top) {
-            check_anchor =
-              base_item.xPos +
-              base_item.findNextAnchor.top *
-                (base_item.width + base_item.marginRight);
-          }
-        }
-      } else {
-        if (offset > 0) {
-          if (base_item.findNextAnchor.right) {
-            check_anchor =
-              base_item.yPos +
-              base_item.findNextAnchor.right *
-                (base_item.height + base_item.marginBottom);
-          }
-        } else {
-          if (base_item.findNextAnchor.left) {
-            check_anchor =
-              base_item.yPos +
-              base_item.findNextAnchor.left *
-                (base_item.height + base_item.marginBottom);
-          }
-        }
-      }
-    }
-    if (check_anchor < 0) {
-      check_anchor = vertical ? base_item.centerXPos : base_item.centerYPos;
-    }
-    const pos_key = vertical ? "xPos" : "yPos";
-    const size_key = vertical ? "width" : "height";
-    let direction = vertical ? "top" : "left";
-    let path_history_direction = vertical ? "bottom" : "right";
-    // Normalize offset
-    if (offset > 0) {
-      path_history_direction = vertical ? "top" : "left";
-      direction = vertical ? "bottom" : "right";
-    }
-    const not_record_history_direction = vertical ? "bottom" : "right";
-    const not_record_history_orient = vertical ? HORIZONTAL : VERTICAL;
-    let last_item_index = template_list.length - 1;
-    const orient_type = this._Template.Orient.type;
-    // 查找有效的最后项
-    for (let i = template_list.length - 1; i >= 0; i--) {
-      const last_item = template_list[i];
-      if (last_item.focusable) {
-        last_item_index = i;
-        break;
-      }
-    }
-    let found = false;
-    let next_index = -1;
-    let path_history_index = null;
-    if (this._SupportHistoryPath && !base_item.findNextAnchor) {
-      path_history_index = template_list[index].pathHistory[direction];
-    }
-    if (path_history_index === null) {
-      // 无历史路径
-      // 获得邻近点列表
-      let neighbor_list = template_list[index].neighborIndexList[direction];
-      if (template_list[index].tmpNeighborIndexList[direction].length > 0) {
-        neighbor_list = neighbor_list.concat(
-          template_list[index].tmpNeighborIndexList[direction]
-        );
-      }
-      if (neighbor_list.length === 1) {
-        next_index = neighbor_list[0];
-        if (
-          last_item_index !== index ||
-          direction !== not_record_history_direction ||
-          orient_type !== not_record_history_orient
-        ) {
-          // horizontal last_item_index bottom 不记历史路径
-          template_list[index].pathHistory[direction] = next_index; // 更新历史路径
-          template_list[next_index].pathHistory[path_history_direction] = index; // 更新历史路径
-        }
-        found = true;
-      } else {
-        for (let i = 0; i < neighbor_list.length; i++) {
-          next_index = neighbor_list[i];
-          const checking_item = template_list[next_index];
-          if (
-            check_anchor <=
-              checking_item[pos_key] + checking_item[size_key] - 1 &&
-            check_anchor >= checking_item[pos_key]
-          ) {
-            if (
-              last_item_index !== index ||
-              direction !== not_record_history_direction ||
-              orient_type !== not_record_history_orient
-            ) {
-              // horizontal last_item_index bottom 不记历史路径
-              template_list[index].pathHistory[direction] = next_index; // 更新历史路径
-              template_list[next_index].pathHistory[path_history_direction] =
-                index; // 更新历史路径
-            }
-            found = true;
-            break;
-          }
-        }
-        // 若未找到中间位置的项目
-        // 若找到了项目，但是该项为非 focusable
-        // 则使用neighbor list中focusable项
-        if (!found || !template_list[next_index].focusable) {
-          for (let i = 0; i < neighbor_list.length; i++) {
-            const neighbor_index = neighbor_list[i];
-            const checking_item = template_list[neighbor_index];
-            if (checking_item.focusable) {
-              if (
-                last_item_index !== index ||
-                direction !== not_record_history_direction ||
-                orient_type !== not_record_history_orient
-              ) {
-                // horizontal last_item_index bottom 不记历史路径
-                template_list[index].pathHistory[direction] = next_index; // 更新历史路径
-                template_list[next_index].pathHistory[path_history_direction] =
-                  index; // 更新历史路径
-              }
-              next_index = neighbor_index;
-              found = true;
-              break;
-            }
-          }
-        }
-      }
-    } else {
-      next_index = path_history_index;
-      if (
-        last_item_index !== index ||
-        direction !== not_record_history_direction ||
-        orient_type !== not_record_history_orient
-      ) {
-        // horizontal last_item_index bottom 不记历史路径
-        template_list[next_index].pathHistory[path_history_direction] = index; // 更新历史路径
-      }
-      found = true;
-    }
-
-    if (found) {
-      if (!template_list[next_index].focusable) {
-        // 如果是占位符，则查找占位符的下一个
-        return this._GetNextItem(next_index, offset, vertical);
-      }
-      return template_list[next_index];
-    }
-    return null;
-  }
-
-  _GetItemDistance(item1, item2) {
-    return (
-      Math.pow(item1.centerXPos - item2.centerXPos, 2) +
-      Math.pow(item1.centerYPos - item2.centerYPos, 2)
-    );
-  }
-
-  _GetTotalNeighbor(index, direction) {
-    const item = this._Template.List[index];
-    return item.neighborIndexList[direction].concat(
-      item.tmpNeighborIndexList[direction]
-    );
-  }
-
-  _GetNearestItem(target_item_index, item_index_list) {
-    let nearest_index = -1,
-      min_distance = Number.POSITIVE_INFINITY;
-    let target_item = this._Template.List[target_item_index];
-    for (let i of item_index_list) {
-      const d = this._GetItemDistance(this._Template.List[i], target_item);
-      if (d < min_distance) {
-        nearest_index = i;
-        min_distance = d;
-      }
-    }
-    return nearest_index;
-  }
-
-  _GetNextLoopItem(index, offset, is_vertical) {
-    const template_list = this._Template.List;
-    const base_item = template_list[index];
-    let search_direction = is_vertical ? "right" : "bottom";
-    let start_direction = is_vertical ? "top" : "left";
-    if (offset > 0) {
-      search_direction = is_vertical ? "left" : "top";
-      start_direction = is_vertical ? "bottom" : "right";
-    }
-    let target_index = -1;
-    let focusable_target = -1;
-    let start_index = -1;
-    let neighbor_list = [];
-    //寻找下一列的起始item
-    neighbor_list = this._GetTotalNeighbor(index, search_direction);
-    while (start_index < 0 && neighbor_list.length > 0) {
-      for (let i of neighbor_list) {
-        if (this._GetTotalNeighbor(i, start_direction).length > 0) {
-          start_index = i;
-          break;
-        } else {
-          //TODO 是否要用递归
-          neighbor_list = this._GetTotalNeighbor(i, search_direction);
-        }
-      }
-    }
-    if (start_index >= 0) {
-      neighbor_list = this._GetTotalNeighbor(start_index, start_direction);
-
-      //寻找最近的neighbor
-      let nearest_index = -1,
-        min_distance = Number.POSITIVE_INFINITY;
-      for (let i of neighbor_list) {
-        const d = this._GetItemDistance(template_list[i], base_item);
-        if (d < min_distance) {
-          nearest_index = i;
-          min_distance = d;
-        }
-      }
-
-      neighbor_list = this._GetTotalNeighbor(nearest_index, search_direction);
-      while (neighbor_list.length > 0) {
-        target_index = this._GetNearestItem(nearest_index, neighbor_list);
-        if (template_list[target_index].focusable) {
-          focusable_target = target_index;
-        }
-        neighbor_list = this._GetTotalNeighbor(target_index, search_direction);
-      }
-      if (focusable_target >= 0) {
-        return template_list[focusable_target];
-      } else if (target_index >= 0) {
-        return this._GetNextLoopItem(target_index, offset, is_vertical);
-      }
-    }
-    return null;
-  }
-
-  //获取临近行的item
-  _GetNearLineItem(index, offset, is_vertical) {
-    const template_list = this._Template.List;
-    let search_direction = is_vertical ? "right" : "bottom";
-    let start_direction = is_vertical ? "top" : "left";
-    if (offset > 0) {
-      search_direction = is_vertical ? "left" : "top";
-      start_direction = is_vertical ? "bottom" : "right";
-    }
-    let start_index = -1;
-    let neighbor_list = [];
-    //寻找下一列的起始item
-    neighbor_list = this._GetTotalNeighbor(index, search_direction);
-    while (start_index < 0 && neighbor_list.length > 0) {
-      for (let i of neighbor_list) {
-        const n = this._GetTotalNeighbor(i, start_direction);
-        if (n.length > 0) {
-          return template_list[this._GetNearestItem(index, n)];
-        } else {
-          //TODO 是否要用递归
-          neighbor_list = this._GetTotalNeighbor(i, search_direction);
-        }
-      }
-    }
-    return null;
-  }
-
-  GetTemplate() {
-    return this._Template;
-  }
-
-  GetVisibleItemList(visibleStartLine, visibleEndLine, search_base_item) {
-    if (visibleStartLine > visibleEndLine) {
-      // No visible item
-      return null;
-    }
-    //取整以避免starline和endline找不到骑线的item的bug
-    visibleStartLine = Math.round(visibleStartLine);
-    visibleEndLine = Math.round(visibleEndLine);
-    // let search_base_item = this._VisibleRangeSearchBaseItem;
-    // if (search_base_item ===null) {
-    //   search_base_item = this._Template.List[this._Template.IdsMap[0]];
-    // }
-    let search_base_item_idx = this._Template.IdsMap[search_base_item];
-    if (typeof search_base_item_idx === "undefined") search_base_item_idx = 0;
-    const common_data = {
-      resultStartIdx: -1,
-      resultEndIdx: -1,
-      enableBackwardSearching: true,
-      enableForwardSearching: true,
-      checkingStartLinePos: visibleStartLine,
-      checkingEndLinePos: visibleEndLine,
-    };
-    const backward_configure = {
-      searchDirect: -1,
-      baseIdx: search_base_item_idx,
-      checkingStartLineRanges: new RangesModel(),
-      startLineRangesFulled: false,
-      latestOverStartLineIdx: -1,
-      checkingEndLineRanges: new RangesModel(),
-      endLineRangesFulled: false,
-      latestOverEndLineIdx: -1,
-      endSearchingIndex: 0,
-      firstStartLineBlockIdx: -1,
-      firstEndLineBlockIdx: -1,
-      searchToBorder: false,
-      common: common_data,
-    };
-    const forward_configure = {
-      searchDirect: 1,
-      baseIdx: search_base_item_idx,
-      checkingStartLineRanges: new RangesModel(),
-      startLineRangesFulled: false,
-      latestOverStartLineIdx: -1,
-      checkingEndLineRanges: new RangesModel(),
-      endLineRangesFulled: false,
-      latestOverEndLineIdx: -1,
-      endSearchingIndex: this._Template.List.length - 1,
-      firstStartLineBlockIdx: -1,
-      firstEndLineBlockIdx: -1,
-      searchToBorder: false,
-      common: common_data,
-    };
-
-    const is_template_vertical = this._Template.Orient.type === VERTICAL;
-    let offset = 0;
-    while (
-      common_data.enableBackwardSearching ||
-      common_data.enableForwardSearching
-    ) {
-      if (common_data.enableBackwardSearching) {
-        this._DoSearching(backward_configure, -offset, is_template_vertical);
-      }
-
-      if (common_data.enableForwardSearching) {
-        this._DoSearching(forward_configure, offset, is_template_vertical);
-      }
-      offset++;
-    }
-    // console.log(
-    //   "GetVisibleItemList [" +
-    //     JSON.stringify(common_data) +
-    //     ", " +
-    //     JSON.stringify(backward_configure) +
-    //     ", " +
-    //     JSON.stringify(forward_configure) +
-    //     "]"
-    // );
-
-    if (common_data.resultStartIdx < 0) {
-      // When start index not found
-      // Use just over start line block as start idx
-      if (
-        backward_configure.latestOverStartLineIdx >= 0 &&
-        backward_configure.firstStartLineBlockIdx >= 0
-      )
-        common_data.resultStartIdx = backward_configure.latestOverStartLineIdx;
-      else if (forward_configure.firstStartLineBlockIdx >= 0)
-        common_data.resultStartIdx = forward_configure.firstStartLineBlockIdx;
-    }
-
-    if (common_data.resultEndIdx < 0) {
-      // When end index not found
-      // Use just over end line block as end idx
-      if (
-        forward_configure.latestOverEndLineIdx >= 0 &&
-        forward_configure.firstEndLineBlockIdx >= 0
-      )
-        common_data.resultEndIdx = forward_configure.latestOverEndLineIdx;
-      else if (backward_configure.firstEndLineBlockIdx >= 0)
-        common_data.resultEndIdx = backward_configure.firstEndLineBlockIdx;
-    }
-    // Recheck if whole contents inside the range
-    if (common_data.resultStartIdx < 0 && common_data.resultEndIdx < 0) {
-      // Check if whole contents inside the range
-      const first_item = this._Template.List[0];
-      const first_second_pos = is_template_vertical
-        ? first_item.yPos
-        : first_item.xPos;
-      const last_item = this._Template.List[this._Template.List.length - 1];
-      const last_second_pos = is_template_vertical
-        ? last_item.yPos
-        : last_item.xPos;
-      const last_second_width = is_template_vertical
-        ? last_item.height
-        : last_item.width;
-      if (
-        first_second_pos > visibleStartLine &&
-        last_second_pos + last_second_width < visibleEndLine
-      ) {
-        common_data.resultStartIdx = 0;
-        common_data.resultEndIdx = this._Template.List.length - 1;
-      }
-    }
-    let ret = null;
-    if (common_data.resultStartIdx >= 0 || common_data.resultEndIdx >= 0) {
-      const start_idx =
-        common_data.resultStartIdx >= 0 ? common_data.resultStartIdx : 0;
-      const end_idx =
-        common_data.resultEndIdx >= 0
-          ? common_data.resultEndIdx
-          : this._Template.List.length - 1;
-      ret = { visibleStart: start_idx, visibleEnd: end_idx };
-    }
-    return ret;
-  }
-
-  _DoSearching(configures, offset, be_vertical_template) {
-    const check_item = this._Template.List[configures.baseIdx + offset];
-    const key_pos = be_vertical_template ? check_item.xPos : check_item.yPos;
-    const key_width = be_vertical_template
-      ? check_item.width + check_item.marginRight
-      : check_item.height + check_item.marginBottom;
-    const key_start = Math.round(key_pos);
-    const key_end = Math.round(key_pos + key_width - 1);
-    const second_pos = be_vertical_template ? check_item.yPos : check_item.xPos;
-    const second_width = be_vertical_template
-      ? check_item.height + check_item.marginBottom
-      : check_item.width + check_item.marginRight;
-    const second_start = Math.round(second_pos);
-    const second_end = Math.round(second_pos + second_width - 1);
-    // console.log(
-    //   "idx=" +
-    //     (configures.baseIdx + offset) +
-    //     " pos=" +
-    //     second_pos +
-    //     " posend=" +
-    //     (second_pos + second_width - 1) +
-    //     " line_pos=" +
-    //     configures.common.checkingStartLinePos
-    // );
-
-    if (
-      configures.common.resultStartIdx < 0 &&
-      !configures.startLineRangesFulled
-    ) {
-      let is_range_changed = false;
-      if (
-        second_start <= configures.common.checkingStartLinePos &&
-        second_end >= configures.common.checkingStartLinePos
-      ) {
-        // Overlap the visbible start line
-        configures.latestOverStartLineIdx = configures.baseIdx + offset;
-        if (configures.firstStartLineBlockIdx < 0)
-          configures.firstStartLineBlockIdx = configures.baseIdx + offset;
-        configures.checkingStartLineRanges.Merge(
-          new SingleRangeModel(key_start, key_end)
-        );
-        is_range_changed = true;
-      } else if (
-        configures.searchDirect < 0 &&
-        second_end <= configures.common.checkingStartLinePos
-      ) {
-        // above the visible start line
-        configures.checkingStartLineRanges.Merge(
-          new SingleRangeModel(key_start, key_end)
-        );
-        is_range_changed = true;
-      }
-
-      if (is_range_changed) {
-        const current_acrossed_range =
-          configures.checkingStartLineRanges.Ranges[0];
-        if (current_acrossed_range) {
-          if (this.DebugPrint) {
-            if (
-              current_acrossed_range.Start <= 0 &&
-              current_acrossed_range.End >= this._Template.Orient.widthMax - 1
-            ) {
-              if (
-                current_acrossed_range.End >
-                  this._Template.Orient.widthMax - 1 ||
-                current_acrossed_range.Start < 0
-              ) {
-                configures.startLineRangesFulled = true;
-              }
-
-              // Update result start index
-              if (configures.searchDirect > 0)
-                configures.common.resultStartIdx =
-                  configures.firstStartLineBlockIdx;
-              else
-                configures.common.resultStartIdx =
-                  configures.latestOverStartLineIdx;
-
-              if (configures.common.resultStartIdx >= 0)
-                configures.common.enableBackwardSearching = false;
-            }
-          }
-        }
-      }
-    }
-    // console.log(
-    //   "idx=" +
-    //     (configures.baseIdx + offset) +
-    //     " pos=" +
-    //     second_pos +
-    //     " posend=" +
-    //     (second_pos + second_width - 1) +
-    //     " line_pos=" +
-    //     configures.common.checkingEndLinePos
-    // );
-    if (configures.common.resultEndIdx < 0 && !configures.endLineRangesFulled) {
-      let is_range_changed = false;
-      if (
-        second_start <= configures.common.checkingEndLinePos &&
-        second_end >= configures.common.checkingEndLinePos
-      ) {
-        // Overlap the visbible end line
-        configures.latestOverEndLineIdx = configures.baseIdx + offset;
-        if (configures.firstEndLineBlockIdx < 0)
-          configures.firstEndLineBlockIdx = configures.baseIdx + offset;
-        configures.checkingEndLineRanges.Merge(
-          new SingleRangeModel(key_start, key_end)
-        );
-        is_range_changed = true;
-      } else if (
-        configures.searchDirect > 0 &&
-        second_start >= configures.common.checkingEndLinePos
-      ) {
-        // below the visible end line
-        configures.checkingEndLineRanges.Merge(
-          new SingleRangeModel(key_start, key_end)
-        );
-        is_range_changed = true;
-      }
-
-      if (is_range_changed) {
-        const current_acrossed_range =
-          configures.checkingEndLineRanges.Ranges[0];
-        if (current_acrossed_range) {
-          if (this.DebugPrint) {
-            if (
-              current_acrossed_range.Start <= 0 &&
-              current_acrossed_range.End >= this._Template.Orient.widthMax - 1
-            ) {
-              if (
-                current_acrossed_range.End >
-                  this._Template.Orient.widthMax - 1 ||
-                current_acrossed_range.Start < 0
-              ) {
-                configures.endLineRangesFulled = true;
-              }
-
-              // Update end index
-              if (configures.searchDirect < 0)
-                configures.common.resultEndIdx =
-                  configures.firstEndLineBlockIdx;
-              else
-                configures.common.resultEndIdx =
-                  configures.latestOverEndLineIdx;
-
-              if (configures.common.resultEndIdx >= 0)
-                configures.common.enableForwardSearching = false;
-            }
-          }
-        }
-      }
-    }
-    if (configures.baseIdx + offset === configures.endSearchingIndex) {
-      if (configures.searchDirect > 0) {
-        configures.common.enableForwardSearching = false;
-      } else {
-        configures.common.enableBackwardSearching = false;
-      }
-      configures.searchToBorder = true;
-    }
-  }
-}
-
-class TemplateItemAdder {
-  constructor(
-    template_parser,
-    data,
-    measure_func,
-    page_range,
-    side_effect,
-    id
-  ) {
-    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";
-    this._ID = id;
-  }
-
-  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) {
-        try {
-          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;
-          }
-        } catch (e) {
-          console.error(
-            `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data: `,
-            this._Data
-          );
-          throw e;
-        }
-      }
-      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 _index = Math.min(index, this._Data.length - 1);
-    let added = false;
-    while (this._CurIndex <= _index) {
-      added = true;
-      try {
-        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++;
-        }
-      } catch (e) {
-        console.error(
-          `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
-          this._Data
-        );
-        throw e;
-      }
-    }
-    if (added) {
-      this._TemplateParser.CalculateNeighborWhenAddStop();
-    }
-    //再添加一屏
-    this.tryAddItem(this._TemplateParser.GetItem(index), 2);
-  }
-
-  tryAddItemById(id) {
-    let _id = Math.min(id, this._Data.length - 1); // id小于等于index, 因此为了避免过界取小值
-    const last_id = this._TemplateParser.GetLastId();
-    if (last_id < _id) {
-      let added = false;
-      let cur_id = last_id;
-      while (cur_id < _id && this._CurIndex < this._Data.length) {
-        added = true;
-        try {
-          const item = this._TemplateParser.ParseTemplateItem(
-            this._MeasureFunc(this._Data[this._CurIndex]),
-            this._Data[this._CurIndex]
-          );
-          cur_id = item.id;
-          this._SideEffect?.(item);
-          if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
-            this._CurPage++;
-          }
-          this._CurIndex++;
-        } catch (e) {
-          console.error(
-            `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
-            this._Data
-          );
-          throw e;
-        }
-      }
-      if (added) {
-        this._TemplateParser.CalculateNeighborWhenAddStop();
-      }
-    }
-    //再添加一屏
-    this.tryAddItem(this._TemplateParser.GetItemById(id), 2);
-  }
-
-  updateData(data) {
-    this._Data = data;
-  }
-}
-export { TemplateParser, TemplateItemAdder };