@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -0,0 +1,1867 @@
+import {
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+  onUpdated,
+  toRaw,
+  nextTick,
+} from "vue";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import {
+  CommonMetroTemplate,
+  ListMetroTemplate,
+  TemplateItemAdder,
+} from "../TemplateParser/index";
+import { PageUpdater } from "./PageUpdater";
+import { SingleRangeModel } from "../RangeModel";
+import { METRO_WIDGET_CONST } from "./Const";
+import {
+  EdgeDirection,
+  VERTICAL,
+  HORIZONTAL,
+  SlideSetting,
+} from "../WidgetCommon";
+import { RenderItem } from "./RenderItem";
+import { VisibleInfo } from "./VisibleInfo";
+import { AnimationManager, AnimationTools } from "./AnimationManager";
+import { WidgetRectInfo } from "./WidgetRectInfo";
+import { checkType } from "../CheckType";
+
+const TAG = "MetroWidget";
+
+const _getMetroTemplate = function (
+  widgetRectInfo,
+  direction,
+  support_history_path,
+  layout_type,
+  mode
+) {
+  let page_size;
+  let line_max;
+  if (direction === VERTICAL) {
+    line_max = widgetRectInfo.contentWidth;
+    page_size = widgetRectInfo.contentHeight;
+  } else {
+    line_max = widgetRectInfo.contentHeight;
+    page_size = widgetRectInfo.contentWidth;
+  }
+  let metroWidget;
+  switch (mode) {
+    case "list":
+      metroWidget = new ListMetroTemplate(
+        direction,
+        line_max,
+        page_size,
+        layout_type,
+        support_history_path
+      );
+      break;
+    default:
+      metroWidget = new CommonMetroTemplate(
+        direction,
+        line_max,
+        page_size,
+        layout_type,
+        support_history_path
+      );
+      break;
+  }
+  return metroWidget;
+};
+
+export const setup = (
+  props,
+  touchContainerW,
+  touchContainerH,
+  itemRender,
+  locateDiv,
+  renderData,
+  slideDiv,
+  slideDivLeft,
+  slideDivTop,
+  itemResizeSlideDiv,
+  itemResizeSlideLeft,
+  itemResizeSlideTop,
+  focusNode,
+  pageUpdateToken,
+  templateMode) => {
+  let widgetRectInfo = new WidgetRectInfo(props.width, props.height, props.padding);
+  let metroTemplate = _getMetroTemplate(
+    widgetRectInfo,
+    props.direction,
+    props.supportHistoryPath,
+    props.layoutType,
+    templateMode
+  );
+  let innerData = [];
+  let dataList = [];
+  let pageUpdater = null;
+  let enterFocusId = -1;
+  let enterFocusRect = null;
+  let focusId = 0;
+  let preFocusId = -1;
+  let preEdgeRect = null;
+  let isFocus = false;
+  let touchListener = null;
+  let slidePile = null;
+  let dragDirection = Forge.DragSetting.DIRECTION_HORIZONTAL;
+  let vertical = props.direction == VERTICAL;
+  let preAnchorItemIndex = -1;
+  let preSeamlessSlideDirection = 1;
+  let templateItemAdder = null;
+  let permanentItemList = [];
+  let preUpdateVisibleStart = 0;
+  let mounted = false;
+  let pageRange = vertical ? props.height : props.width;
+  let slideLock = false;
+  let childSlideEventLock = false;
+  let onKeyDownLock = false;
+  let visibleInfo = new VisibleInfo();
+
+  const DEFAULT_ANIMATION_DURATION = 200;
+  const animationManager = new AnimationManager();
+
+  const updateDivPosition =
+    (divRef, leftRef, topRef, onStart, onEnd) => (x, y, animInfo) => {
+      if (toRaw(divRef.value)) {
+        const pre_left = leftRef.value;
+        const pre_top = topRef.value;
+        leftRef.value = x;
+        topRef.value = y;
+
+        if (animInfo) {
+          let startCallback = () => {
+            onStart?.();
+            animInfo?.onStart?.();
+          };
+          let endCallback = (animDone) => {
+            onEnd?.(animDone);
+            animInfo?.onEnd?.(animDone);
+          };
+
+          const delta_x = Math.round(pre_left - x);
+          const delta_y = Math.round(pre_top - y);
+
+          const animNode = AnimationTools.getDivSlideAnim(
+            toRaw(divRef.value),
+            delta_x,
+            delta_y,
+            0,
+            0,
+            {
+              easing: animInfo.easing,
+              duration: animInfo.duration,
+              speed: animInfo.speed,
+              onStart: startCallback,
+              onEnd: endCallback,
+            }
+          );
+          animationManager.tryStartAnim(Forge.sFrameCount.count, animNode);
+        } else {
+          onStart?.();
+          onEnd?.();
+        }
+      }
+    };
+
+  const updateSlideDiv = updateDivPosition(slideDiv, slideDivLeft, slideDivTop);
+
+  const _slideTo = (target, animObj) => {
+    if (vertical) {
+      updateSlideDiv(0, -target - itemResizeSlideTop.value, animObj);
+    } else {
+      updateSlideDiv(-target - itemResizeSlideLeft.value, 0, animObj);
+    }
+    _onScroll();
+  };
+
+  const updateItemResizeSlideDiv = updateDivPosition(
+    itemResizeSlideDiv,
+    itemResizeSlideLeft,
+    itemResizeSlideTop
+  );
+
+  let itemMovingInfo = null;
+
+  let callFocusAfterUpdate = false;
+
+  //methods
+  const _onFocusChange = (id) => {
+    props.onFocusChange?.(id);
+  };
+
+  // query functions
+  const _getCurrentId = () => {
+    return {
+      id: focusId,
+      index: id2Index(focusId),
+    };
+  };
+
+  const _getPosition = (index) => {
+    let templateInfo = getItemByIndex(index).templateInfo;
+    let x_offset = vertical ? 0 : -visibleInfo.start;
+    let y_offset = vertical ? -visibleInfo.start : 0;
+    return {
+      left: templateInfo.left + x_offset,
+      top: templateInfo.top + y_offset,
+      width: templateInfo.width,
+      height: templateInfo.height,
+    };
+  };
+  const _getTemplatePosition = (index) => {
+    let templateInfo = getItemByIndex(index).templateInfo;
+    return {
+      left: templateInfo.left,
+      top: templateInfo.top,
+      width: templateInfo.width,
+      height: templateInfo.height,
+    };
+  };
+
+  const _dispatchEvent = (event) => {
+    console.error("dispatchEvent is deprecated and will be removed soon. Use MetroWidget exported method instead.")
+    switch (event.type) {
+      case Dispatcher.Type.setEnterFocusId:
+        setEnterFocusId(event.data);
+        break;
+      case Dispatcher.Type.setEnterFocusRect:
+        setEnterFocusRect(event.data);
+        break;
+      case Dispatcher.Type.updateItem:
+        break;
+      case Dispatcher.Type.slideToItem:
+        if (event.data) {
+          slideToItem(event.data?.id, event.data?.doAnim);
+        }
+        break;
+      case Dispatcher.Type.setFocusId:
+        setFocusId(event.data?.id, event.data?.needSlide, event.data?.doAnim);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const id2Index = (id) => {
+    return metroTemplate.id2Index(id);
+  };
+
+  const index2Id = (index) => {
+    return metroTemplate.index2Id(index);
+  };
+
+  const getItemByIndex = (index) => {
+    return innerData[index];
+  };
+
+  const getItemById = (id) => {
+    return innerData[id2Index(id)];
+  };
+
+  const getNextItem = (anchorId, vDirection, hDirection, moveType) => {
+    const nextItem = metroTemplate.getNextItem(
+      anchorId,
+      vDirection,
+      hDirection,
+      moveType
+    );
+    if (nextItem) {
+      return innerData[nextItem.index];
+    } else {
+      return null;
+    }
+  };
+
+  const setItemZIndex = (item, z_index, is_focus) => {
+    if (item) {
+      let i = z_index;
+      if (is_focus && item.itemConfig.focusZIndex >= 0) {
+        i = item.itemConfig.focusZIndex;
+      } else if (item.itemConfig.normalZIndex >= 0) {
+        i = item.itemConfig.normalZIndex;
+      }
+      item.renderStyle.zIndex = i;
+    }
+  };
+
+  const onItemClick = (item) => {
+    if (!item) { return };
+    if (isFocus) {
+      item.onClick();
+    }
+  };
+
+  const onItemBlur = (blurItem) => {
+    if (!blurItem) return;
+    setItemZIndex(blurItem, 0, false);
+    if (isFocus) {
+      blurItem.onBlur();
+    }
+  };
+
+  const onItemFocus = (focusItem, rect) => {
+    if (!focusItem) return;
+    setItemZIndex(focusItem, innerData.length, true);
+    if (isFocus) {
+      _itemOnFocusSideEffect(focusItem, rect);
+      const called = focusItem.onFocus(rect);
+      if (!called) {
+        callFocusAfterUpdate = true;
+      }
+    }
+  };
+
+  const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
+    if (id == focusId) {
+      return;
+    }
+    templateItemAdder.tryAddItemById(id);
+    let next_focus_item = getItemById(id);
+    if (next_focus_item) {
+      preFocusId = focusId;
+      const preFocusItem = getItemById(preFocusId);
+      const nextTemplateInfo = next_focus_item.templateInfo;
+      focusId = nextTemplateInfo.id;
+      onItemBlur(preFocusItem);
+      onItemFocus(next_focus_item, preEdgeRect);
+      if (needSlide) {
+        slideToItem(id2Index(id), doAnim);
+      }
+      let unlock = null;
+      if (extraSetting) {
+        if (extraSetting.lockChildSlideEvent) {
+          unlock = lock(METRO_WIDGET_CONST.CHILD_SLIDE_EVENT);
+        }
+      }
+
+      const curTemplateInfo = getItemById(focusId).templateInfo;
+
+      let x_off_set = curTemplateInfo.left - nextTemplateInfo.left;
+      let y_off_set = curTemplateInfo.top - nextTemplateInfo.top;
+      preEdgeRect = {
+        direction: null,
+        rect: {
+          x: x_off_set,
+          y: y_off_set,
+          width: curTemplateInfo.width,
+          height: curTemplateInfo.height,
+        },
+      };
+      unlock?.();
+    }
+  };
+
+  const lock = (type) => {
+    const unlocker = [];
+    if (type & METRO_WIDGET_CONST.SLIDE) {
+      slideLock = true;
+      unlocker.push(() => {
+        slideLock = false;
+      });
+    }
+    if (type & METRO_WIDGET_CONST.CHILD_SLIDE_EVENT) {
+      childSlideEventLock = true;
+      unlocker.push(() => {
+        childSlideEventLock = false;
+      });
+    }
+    if (type & METRO_WIDGET_CONST.ON_KEY_DOWN) {
+      onKeyDownLock = true;
+      unlocker.push(() => {
+        onKeyDownLock = false;
+      });
+    }
+    return () => {
+      unlocker.map((item) => {
+        item();
+      });
+    };
+  };
+
+  const unlock = (type) => {
+    if (type & METRO_WIDGET_CONST.SLIDE) {
+      slideLock = true;
+    }
+    if (type & METRO_WIDGET_CONST.CHILD_SLIDE_EVENT) {
+      childSlideEventLock = true;
+    }
+    if (type & METRO_WIDGET_CONST.ON_KEY_DOWN) {
+      onKeyDownLock = true;
+    }
+  };
+
+  const getFocusBlockRef = () => {
+    return toRaw(focusNode.value);
+  };
+
+  const setEnterFocusId = (id) => {
+    templateItemAdder.tryAddItemById(id);
+    enterFocusId = id;
+  };
+
+  const setEnterFocusRect = (rect) => {
+    enterFocusRect = rect;
+  };
+
+  const slideTo = (position, doAnim) => {
+    templateItemAdder.tryAddItemByPosition(position);
+    if (
+      typeof position !== "undefined" &&
+      position != null &&
+      visibleInfo.start !== position
+    ) {
+      visibleInfo.start = position;
+
+      const updater = pageUpdater.update(
+        metroTemplate,
+        visibleInfo.startWithPadding,
+        visibleInfo.endWithPadding,
+        focusId,
+        false,
+        permanentItemList
+      );
+
+      let animObj = null;
+      if (doAnim) {
+        animObj = {
+          easing: props.slideSetting.Easing,
+          onStart: null,
+          speed: props.slideSetting.Speed,
+          onEnd: () => {
+            updater.apply();
+          },
+        };
+        pageUpdater.applyTmp();
+      } else {
+        pageUpdater.apply();
+      }
+      _slideTo(visibleInfo.start, animObj);
+    }
+  };
+
+  const slideToItem = (index, doAnim) => {
+    templateItemAdder.tryAddItemByIndex(index);
+    const targetItem = getItemByIndex(index);
+    if (targetItem) {
+      const direction = index - preAnchorItemIndex > 0 ? 1 : -1;
+      const visible_start = _calculateVisibleStart(targetItem.templateInfo, direction);
+      slideTo(visible_start, doAnim);
+    }
+  };
+
+  const refreshData = (force_update) => {
+    //由于data不支持reactive, 因此数据的更新只通过provideData
+    if (!props.provideData) {
+      console.error("refreshData: provideData is null.");
+      return;
+    }
+    let _force_update = force_update;
+    if (metroTemplate.size === 0) {
+      _force_update = true;
+    }
+    let new_list = toRaw(props.provideData());
+    let needSlide = false;
+    if (focusId >= new_list.length) {
+      focusId = 0;
+      preFocusId = -1;
+      if (visibleInfo.start !== 0) {
+        visibleInfo.start = 0;
+        needSlide = true;
+      }
+    }
+    let new_index = 0;
+    if (!_force_update) {
+      for (new_index = 0; new_index < new_list.length; ++new_index) {
+        let already_add = false;
+        for (let j = 0; j < innerData.length; ++j) {
+          if (new_list[new_index] === innerData[j].customerData) {
+            already_add = true;
+            break;
+          }
+        }
+        if (!already_add) {
+          break;
+        }
+      }
+    }
+    let need_update_content = false;
+    if (!_force_update && new_index === metroTemplate.size) {
+      //原始数据都在
+      if (new_index !== new_list.length) {
+        //增加数据
+        need_update_content = true;
+        templateItemAdder.updateData(new_list);
+      } else {
+        //数据没变
+      }
+    } else {
+      pageUpdateToken.value++;
+      //数据更改
+      permanentItemList = [];
+      need_update_content = true;
+      metroTemplate = _getMetroTemplate(
+        widgetRectInfo,
+        props.direction,
+        props.supportHistoryPath,
+        props.layoutType,
+        templateMode
+      );
+      innerData = [];
+      dataList = new_list;
+      templateItemAdder = new TemplateItemAdder(
+        metroTemplate,
+        dataList,
+        props.measures,
+        pageRange,
+        _onTemplateAdd,
+        props.name
+      );
+    }
+    if (need_update_content) {
+      if (props.onScroll) {
+        templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+      } else {
+        templateItemAdder.tryAddItemById(focusId);
+      }
+      let lastTemplateInfo = getItemByIndex(metroTemplate.size - 1)?.templateInfo;
+      touchListener = _getTouchListener();
+      touchContainerW.value = vertical
+        ? props.width
+        : lastTemplateInfo
+          ? lastTemplateInfo.left + lastTemplateInfo.width
+          : 0;
+      touchContainerH.value = vertical
+        ? lastTemplateInfo
+          ? lastTemplateInfo.top + lastTemplateInfo.height
+          : 0
+        : props.height;
+      slidePile = new Forge.RectArea(
+        0,
+        0,
+        widgetRectInfo.contentWidth,
+        widgetRectInfo.contentHeight,
+      );
+      dragDirection =
+        vertical
+          ? Forge.DragSetting.DIRECTION_VERTICAL
+          : Forge.DragSetting.DIRECTION_HORIZONTAL;
+    }
+    const updater = pageUpdater.update(
+      metroTemplate,
+      visibleInfo.startWithPadding,
+      visibleInfo.endWithPadding,
+      focusId,
+      false,
+      permanentItemList
+    );
+    updater.apply();
+    onItemFocus(getItemById(focusId), null);
+    if (needSlide) {
+      _slideTo(visibleInfo.start, null);
+    } else if (need_update_content) {
+      _onScroll();
+    }
+  };
+
+  const getVisibleItems = () => {
+    const [visibleStart, visibleEnd] = metroTemplate.getVisibleItemList(
+      visibleInfo.startWithPadding,
+      visibleInfo.endWithPadding,
+      focusId
+    );
+    return {
+      start: visibleStart,
+      end: visibleEnd,
+      dataList: dataList.slice(info.visibleStart, info.visibleEnd + 1),
+    };
+  };
+
+  const moveFocus = (direction) => {
+    if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
+      _moveToNext(-1, 0);
+    } else if (direction == "right" || direction == 39 || direction == EdgeDirection.right) {
+      _moveToNext(1, 0);
+    } else if (direction == "top" || direction == 38 || direction == EdgeDirection.top) {
+      _moveToNext(0, -1);
+    } else if (direction == "bottom" || direction == 40 || direction == EdgeDirection.bottom) {
+      _moveToNext(0, 1);
+    } else {
+      console.error(TAG, "moveFocus direction is invalid.", direction);
+    }
+  };
+
+  const getCustomerDataSize = () => {
+    return dataList.length;
+  }
+
+  const exportObject = {
+    lock,
+    unlock,
+    slideTo,
+    setFocusId,
+    getFocusBlockRef,
+    setEnterFocusId,
+    setEnterFocusRect,
+    slideToItem,
+    refreshData,
+    _dispatchEvent,
+    getVisibleItems,
+    moveFocus,
+    getCustomerDataSize,
+  };
+
+  const _calculateNearestItemByRect = (visibleSet, 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 = vertical ? "top" : "left";
+    let key_width = vertical ? "height" : "width";
+
+    for (let index of visibleSet) {
+      let itemTemplateInfo = getItemByIndex(index).templateInfo;
+      if (!itemTemplateInfo.focusable) continue;
+      let full_show =
+        itemTemplateInfo[key_pos] >= visibleInfo.start &&
+        itemTemplateInfo[key_pos] + itemTemplateInfo[key_width] - 1 <=
+        visibleInfo.end;
+      if (full_show) {
+        let x_pos =
+          vertical
+            ? itemTemplateInfo.left
+            : itemTemplateInfo.left - visibleInfo.start;
+        let y_pos =
+          vertical
+            ? itemTemplateInfo.top - visibleInfo.start
+            : itemTemplateInfo.top;
+        var target_x_range = new SingleRangeModel(
+          x_pos,
+          x_pos + itemTemplateInfo.width - 1
+        );
+        var target_y_range = new SingleRangeModel(
+          y_pos,
+          y_pos + itemTemplateInfo.height - 1
+        );
+        switch (direction) {
+          case "left":
+            if (point.x < x_pos + itemTemplateInfo.width - 1) {
+              // 这个点在item左侧，不可能左移到item
+              continue;
+            }
+            if (point.y < y_pos) {
+              //1.该点在其上，计算point和item右上角的距离
+              distance =
+                Math.pow(point.x - (x_pos + itemTemplateInfo.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 + itemTemplateInfo.width - 1),
+                2
+              );
+            } else if (point.y > y_pos + itemTemplateInfo.height - 1) {
+              //3.该点在其下，计算point到item右下角的距离
+              distance =
+                Math.pow(point.x - (x_pos + itemTemplateInfo.width - 1), 2) +
+                Math.pow(point.y - (y_pos + itemTemplateInfo.height - 1), 2);
+            }
+            // point与item右边框的距离作为权值
+            direction_weighted = Math.abs(
+              point.x - (x_pos + itemTemplateInfo.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 + itemTemplateInfo.height - 1) {
+              //3.该点在其下，计算point和item左下角的距离
+              distance =
+                Math.pow(x_pos - point.x, 2) +
+                Math.pow(point.y - (y_pos + itemTemplateInfo.height - 1), 2);
+            }
+            // point与item左边框的距离作为权值
+            direction_weighted = Math.abs(point.x - x_pos);
+            break;
+          case "up":
+            if (point.y < y_pos + itemTemplateInfo.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 + itemTemplateInfo.height - 1), 2);
+            } else if (src_x_range.IsInterAct(target_x_range)) {
+              //2.该点在其中，计算point和item下边框的垂直距离
+              distance = Math.pow(
+                point.y - (y_pos + itemTemplateInfo.height - 1),
+                2
+              );
+            } else if (point.x > x_pos + itemTemplateInfo.width - 1) {
+              //3.该点在其后，计算point和item左下角的距离
+              distance =
+                Math.pow(point.x - (x_pos + itemTemplateInfo.width - 1), 2) +
+                Math.pow(point.y - (y_pos + itemTemplateInfo.height - 1), 2);
+            }
+            // point与item下边框的距离作为权值
+            direction_weighted = Math.abs(
+              point.y - (y_pos + itemTemplateInfo.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 + itemTemplateInfo.width - 1) {
+              //3.该点在其后，计算point和item左上角的距离
+              distance =
+                Math.pow(point.x - (x_pos + itemTemplateInfo.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 = itemTemplateInfo;
+        } 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 = itemTemplateInfo;
+          }
+        }
+      }
+    }
+
+    if (min_distance_item) {
+      return min_distance_item.id;
+    } else {
+      return 0;
+    }
+  };
+
+  const focusBlockOnKeyDown = (ev) => {
+    if (onKeyDownLock) {
+      return true;
+    }
+    switch (ev.keyCode) {
+      case 37:
+        _moveToNext(-1, 0);
+        break;
+      case 38:
+        _moveToNext(0, -1);
+        break;
+      case 39:
+        _moveToNext(1, 0);
+        break;
+      case 40:
+        _moveToNext(0, 1);
+        break;
+      case 13:
+        onItemClick(getItemById(focusId));
+        break;
+      default:
+        //只接受上下左右确定键
+        return false;
+    }
+    return true;
+  };
+
+  const flushItemCoord = (index) => {
+    for (let i = index; i < innerData.length; ++i) {
+      const item = getItemByIndex(i);
+      const renderStyle = item.renderStyle;
+      const templateInfo = item.templateInfo;
+      renderStyle.left = templateInfo.left;
+      renderStyle.top = templateInfo.top;
+      renderStyle.width = templateInfo.width;
+      renderStyle.height = templateInfo.height;
+    }
+  };
+
+  const updateItemSize = (index, newSize, locateSet, animInfo = null) => {
+    if (index < 0 || !newSize) {
+      console.warn(TAG, "updateItemSize params invalid.");
+      return;
+    }
+
+    const keyItem = getItemByIndex(index);
+    if (
+      keyItem.renderStyle.width == newSize.width &&
+      keyItem.renderStyle.height == newSize.height
+    ) {
+      return;
+    }
+
+    const keyItemPreRect = {
+      left: keyItem.templateInfo.left,
+      top: keyItem.templateInfo.top,
+      width: keyItem.templateInfo.width,
+      height: keyItem.templateInfo.height,
+    };
+    const preVisibleStart = visibleInfo.start;
+
+    metroTemplate.updateItemSize(index, newSize);
+
+    const locateType = locateSet?.type ?? METRO_WIDGET_CONST.ITEM_RESIZE.WIDGET_SET;
+    switch (locateType) {
+      case METRO_WIDGET_CONST.ITEM_RESIZE.ANCHOR:
+        let anchor = locateSet.anchor;
+        if (!checkType(anchor, Number)) {
+          console.error(`updateItemSize error: params of locateType 'ANCHOR' is invalid, expected Number but got ${typeof locateSet.anchor}.\n Use default anchor 0.`);
+          anchor = 0;
+        }
+        const sizeKey = vertical ? "height" : "width";
+        const newVisibleStart = Math.round(
+          keyItem.templateInfo[sizeKey] * anchor
+          + preVisibleStart
+          - keyItemPreRect[sizeKey] * anchor
+        );
+        visibleInfo.start = newVisibleStart < 0 ? 0 : newVisibleStart;
+        break;
+      case METRO_WIDGET_CONST.ITEM_RESIZE.WIDGET_SET:
+        visibleInfo.start = _calculateVisibleStart(keyItem.templateInfo, preSeamlessSlideDirection);
+        break;
+      case METRO_WIDGET_CONST.ITEM_RESIZE.CUSTOMER_SET:
+        const customerFunc = locateSet.func;
+        if (!checkType(customerFunc, Function)) {
+          console.error(`updateItemSize error: params of locateType 'CUSTOMER_SETTING' is invalid, expected Function but got ${typeof locateSet.func}.\n Use locateType 'WIDGET_SETTING'`);
+          visibleInfo.start = _calculateVisibleStart(keyItem, preSeamlessSlideDirection);
+          break;
+        } else {
+          // 为了方便理解, 提供给外部以及外部返回的可视区域起始包含padding
+          const paddingStart = vertical ? widgetRectInfo.padding.top : widgetRectInfo.padding.left;
+          const newItemPadding = customerFunc(
+            keyItemPreRect,
+            {
+              left: keyItem.templateInfo.left,
+              top: keyItem.templateInfo.top,
+              width: keyItem.templateInfo.width,
+              height: keyItem.templateInfo.height,
+            },
+            (vertical ? keyItemPreRect.top : keyItemPreRect.left) - (preVisibleStart - paddingStart),
+          );
+          visibleInfo.start = (vertical ? keyItem.templateInfo.top : keyItem.templateInfo.left) - newItemPadding + paddingStart;
+        }
+        break;
+      default:
+        throw new Error("undefined locate type", locateSet.type);
+    }
+
+    const updater = pageUpdater.update(
+      metroTemplate,
+      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+      Math.min(
+        visibleInfo.startMax + visibleInfo.range + visibleInfo.padding.end - 1,
+        visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+      ),
+      keyItem.id,
+      false,
+      permanentItemList
+    );
+
+    let renderList = [];
+    const tmpRange = pageUpdater.getTmpRange();
+    if (tmpRange) {
+      renderList = Array.from(tmpRange).map((i) => {
+        return getItemByIndex(i);
+      });
+    }
+
+    const preRectInfo = {};
+    for (let i of renderList) {
+      preRectInfo[i.index] = {
+        left: i.renderStyle.left,
+        top: i.renderStyle.top,
+        width: i.renderStyle.width,
+        height: i.renderStyle.height,
+      };
+    }
+    flushItemCoord(index);
+
+    //item animation
+    if (animInfo) {
+      const onItemMoveEnd = (animDone) => {
+        itemMovingInfo = null;
+        animInfo?.onEnd();
+      };
+      let curFrameCount = Forge.sFrameCount.count;
+      for (let i of renderList) {
+        if (i.index < index) {
+          continue;
+        }
+        if (
+          preRectInfo[i.index].left != i.renderStyle.left ||
+          preRectInfo[i.index].top != i.renderStyle.top
+        ) {
+          itemMovingInfo = {
+            index: index,
+            deltaLeft: preRectInfo[i.index].left - i.renderStyle.left,
+            deltaTop: preRectInfo[i.index].top - i.renderStyle.top,
+            easing: animInfo.easing,
+            duration: animInfo.duration,
+            frameCount: curFrameCount,
+          };
+        }
+        const doItemAnim = (div) => {
+          const animNode = AnimationTools.getDivSlideAnim(
+            div,
+            preRectInfo[i.index].left - i.renderStyle.left,
+            preRectInfo[i.index].top - i.renderStyle.top,
+            0,
+            0,
+            {
+              easing: animInfo.easing ?? null,
+              duration: animInfo.duration ?? DEFAULT_ANIMATION_DURATION,
+              onEnd: i.index === index ? onItemMoveEnd : null,
+            }
+          );
+          animationManager.tryStartAnim(curFrameCount, animNode, i.index);
+        };
+        if (i.rootDiv) {
+          doItemAnim(toRaw(i.rootDiv));
+        } else {
+          i.addDivMountedListener(doItemAnim);
+        }
+      }
+    } else {
+      itemMovingInfo = null;
+    }
+
+    const slideDivPos =
+      (vertical ? itemResizeSlideTop.value : itemResizeSlideLeft.value) -
+      (visibleInfo.start - preVisibleStart);
+
+    if (animInfo) {
+      const slideAnim = {
+        easing: animInfo.easing ?? null,
+        onStart: null,
+        duration: animInfo.duration ?? DEFAULT_ANIMATION_DURATION,
+        onEnd: (animDone) => {
+          updater.apply();
+        },
+      };
+      updater.applyTmp();
+
+      updateItemResizeSlideDiv(
+        vertical ? 0 : slideDivPos,
+        vertical ? slideDivPos : 0,
+        slideAnim
+      );
+    } else {
+      updateItemResizeSlideDiv(
+        vertical ? 0 : slideDivPos,
+        vertical ? slideDivPos : 0,
+        null
+      );
+      pageUpdater.apply();
+    }
+  };
+
+  const _onTemplateAdd = (customerData, templateItem, measuresObj) => {
+    let focusZIndex = -1,
+      normalZIndex = -1;
+    if (
+      typeof measuresObj["zIndex"] != "undefined" &&
+      measuresObj["zIndex"] != null
+    ) {
+      if (typeof measuresObj["zIndex"] == "object") {
+        if (typeof measuresObj["zIndex"]["focus"] == "number") {
+          focusZIndex = measuresObj["zIndex"]["focus"];
+        }
+        if (typeof measuresObj["zIndex"]["normal"] == "number") {
+          normalZIndex = measuresObj["zIndex"]["normal"];
+        }
+      } else if (typeof measuresObj["zIndex"] == "number") {
+        focusZIndex = measuresObj["zIndex"];
+        normalZIndex = measuresObj["zIndex"];
+      }
+    }
+    let itemConfig = {
+      focusZIndex,
+      normalZIndex,
+      permanent: measuresObj.permanent ?? false,
+      doSlide: measuresObj.doSlide ?? true,
+      takeOverSlide: false,
+    };
+
+    if (props.itemConfig) {
+      const c = props.itemConfig(customerData);
+      itemConfig.takeOverSlide = c?.takeOverSlide ?? false;
+    }
+
+    const renderStyle = reactive({
+      left: templateItem.left,
+      top: templateItem.top,
+      width: templateItem.width,
+      height: templateItem.height,
+      zIndex: itemConfig.normalZIndex,
+    });
+
+    const item = new RenderItem(
+      templateItem,
+      customerData,
+      renderStyle,
+      itemConfig,
+      () => {
+        if (callFocusAfterUpdate && item.id === focusId) {
+          nextTick(() => {
+            onItemFocus(item, preEdgeRect);
+          });
+          callFocusAfterUpdate = false;
+        }
+      },
+      //query object
+      {
+        id: templateItem.id,
+        index: templateItem.index,
+        position: _getPosition,
+        templatePosition: _getTemplatePosition,
+        getCurrentFocusId: _getCurrentId,
+        slideTo: slideTo,
+        updateItemSize,
+        widgetHandler: exportObject,
+      }
+    );
+
+    innerData.push(item);
+    if (item.itemConfig.permanent) {
+      permanentItemList.push({
+        index: item.index - 1,
+        alreadyShow: false,
+      });
+    }
+    const lastTemplateInfo = getItemByIndex(metroTemplate.size - 1).templateInfo;
+    if (vertical) {
+      touchContainerH.value = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+    } else {
+      touchContainerW.value = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+    }
+  };
+
+  const _itemOnFocusSideEffect = (item, edgeRect) => {
+    _onFocusChange(item.id);
+    if (item.rootDiv) {
+      let event = {
+        type: "focusRect",
+        direction: edgeRect?.direction?.description,
+        element: toRaw(item.rootDiv),
+      };
+      _bubbleCustomerEvent(event);
+    }
+  };
+
+  const focusBlockOnCustomerEvent = (ev) => {
+    if (ev.type === "focusRect") {
+      if (childSlideEventLock) {
+        return true;
+      }
+      if (ev.ownerNode == exportObject) {
+        return false;
+      }
+      let item_div = ev.element;
+      let direction = 0;
+      if (props.direction == HORIZONTAL) {
+        if (ev.direction == "left") {
+          direction = -1;
+        } else if (ev.direction == "right") {
+          direction = 1;
+        }
+      } else {
+        if (ev.direction == "top") {
+          direction = -1;
+        } else if (ev.direction == "bottom") {
+          direction = 1;
+        }
+      }
+      const item_layout = item_div.jsvGetRelativePosition(toRaw(locateDiv.value));
+
+      let fakeItem = {
+        templateInfo: {
+          left: item_layout.left,
+          top: item_layout.top,
+          width: item_layout.width,
+          height: item_layout.height,
+          centerYPos: Math.floor(item_layout.top + item_layout.height / 2),
+          centerXPos: Math.floor(item_layout.left + item_layout.width / 2),
+          index: id2Index(focusId),
+        },
+      };
+
+      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction);
+      if (cur_slide != visibleInfo.start) {
+        visibleInfo.start = cur_slide;
+        const updater = pageUpdater.update(
+          metroTemplate,
+          visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+          Math.min(
+            visibleInfo.startMax +
+            visibleInfo.range +
+            visibleInfo.padding.end -
+            1,
+            visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+          ),
+          focusId,
+          true,
+          permanentItemList
+        );
+        updater.applyTmp();
+        _slideTo(visibleInfo.start, {
+          easing: "",
+          onStart: null,
+          speed: props.slideSetting.Speed,
+          onEnd: () => {
+            updater.apply();
+          },
+        });
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const _bubbleCustomerEvent = (event) => {
+    if (props.sendFocusRectEvent && event) {
+      event.ownerNode = exportObject;
+      toRaw(focusNode.value)?.bubbleCustomerEvent(event);
+    }
+  };
+
+  const _moveToNext = (
+    horizontal_direction,
+    vertical_direction,
+    item_edge_rect
+  ) => {
+    //数据为空时
+    if (innerData.length == 0) {
+      let direction;
+      if (horizontal_direction > 0) {
+        direction = EdgeDirection.right;
+      } else if (horizontal_direction < 0) {
+        direction = EdgeDirection.left;
+      } else if (vertical_direction > 0) {
+        direction = EdgeDirection.bottom;
+      } else if (vertical_direction < 0) {
+        direction = EdgeDirection.top;
+      } else {
+        console.warn(TAG, "moveToNext error");
+      }
+      if (direction) {
+        props.onEdge?.({
+          direction: direction,
+          rect: {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+          },
+        });
+      }
+      return;
+    }
+    let next_focus_item = getNextItem(
+      focusId,
+      vertical_direction,
+      horizontal_direction,
+      props.focusMoveType
+    );
+    if (next_focus_item !== null) {
+      preFocusId = focusId;
+      const preFocusItem = getItemByIndex(preFocusId);
+      focusId = next_focus_item.id;
+
+      templateItemAdder.tryAddItem(next_focus_item.templateInfo, 1);
+
+      // itemFocus 和 itemBlur放在计算visibleStart之前, 以便用户更改template后在计算滚动
+      let x_off_set = preFocusItem.templateInfo.left - next_focus_item.templateInfo.left;
+      let y_off_set = preFocusItem.templateInfo.top - next_focus_item.templateInfo.top;
+      if (item_edge_rect && item_edge_rect.rect) {
+        item_edge_rect.rect.x += x_off_set;
+        item_edge_rect.rect.y += y_off_set;
+        preEdgeRect = item_edge_rect;
+      } else {
+        let direction;
+        if (horizontal_direction > 0) {
+          direction = EdgeDirection.right;
+        } else if (horizontal_direction < 0) {
+          direction = EdgeDirection.left;
+        } else if (vertical_direction > 0) {
+          direction = EdgeDirection.bottom;
+        } else if (vertical_direction < 0) {
+          direction = EdgeDirection.top;
+        }
+        preEdgeRect = {
+          direction,
+          rect: {
+            x: x_off_set,
+            y: y_off_set,
+            width: preFocusItem.templateInfo.width,
+            height: preFocusItem.templateInfo.height,
+          },
+        };
+      }
+      onItemBlur(preFocusItem);
+      onItemFocus(next_focus_item, preEdgeRect);
+
+      let cur_visible_start = _calculateVisibleStart(next_focus_item.templateInfo, vertical ? vertical_direction : horizontal_direction);
+      if (
+        !next_focus_item.itemConfig.takeOverSlide &&
+        visibleInfo.start !== cur_visible_start
+      ) {
+        if (next_focus_item.itemConfig.doSlide) {
+          visibleInfo.start = cur_visible_start;
+          const updater = pageUpdater.update(
+            metroTemplate,
+            visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+            Math.min(
+              visibleInfo.startMax +
+              visibleInfo.range +
+              visibleInfo.padding.end -
+              1,
+              visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+            ),
+            next_focus_item.id,
+            false,
+            permanentItemList
+          );
+          updater.applyTmp();
+          let animObj = {
+            easing: "",
+            onStart: null,
+            speed: props.slideSetting.Speed,
+            onEnd: (animDone) => {
+              updater.apply();
+            },
+          };
+          _slideTo(visibleInfo.start, animObj);
+        } else {
+          //不做滚动时,保证获焦的item创建
+          const updater = pageUpdater.update(
+            metroTemplate,
+            cur_visible_start,
+            cur_visible_start + visibleInfo.range + visibleInfo.padding.end - 1,
+            next_focus_item.id,
+            false,
+            permanentItemList
+          );
+          updater.apply();
+        }
+        if (
+          itemMovingInfo &&
+          itemMovingInfo.frameCount == Forge.sFrameCount.count
+        ) {
+          //缩放的动画正在进行时
+          const tmpRangeList = pageUpdater.getTmpRange();
+          for (let index of tmpRangeList) {
+            const item = getItemByIndex(index);
+            if (item.index > itemMovingInfo.index && !toRaw(item.rootDiv)) {
+              item.addDivMountedListener((div) => {
+                const animNode = AnimationTools.getDivSlideAnim(
+                  toRaw(div),
+                  itemMovingInfo.deltaLeft,
+                  itemMovingInfo.deltaTop,
+                  0,
+                  0,
+                  {
+                    easing: itemMovingInfo.easing,
+                    duration: itemMovingInfo.duration,
+                  }
+                );
+                animationManager.tryStartAnim(
+                  Forge.sFrameCount.count,
+                  animNode,
+                  item.index
+                );
+              });
+            }
+          }
+        }
+      }
+    } else {
+      //到达边缘
+      let x_off_set = vertical ? 0 : visibleInfo.start;
+      let y_off_set = vertical ? visibleInfo.start : 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;
+      }
+      const curTemplateInfo = getItemById(focusId)?.templateInfo;
+      let rect = {
+        x: curTemplateInfo.left - x_off_set,
+        y: curTemplateInfo.top - y_off_set,
+        width: curTemplateInfo.width,
+        height: curTemplateInfo.height,
+      };
+      props.onEdge?.({ direction: edge, rect: rect });
+      innerData[id2Index(focusId)].onWidgetEdge({
+        direction: edge,
+      });
+    }
+  };
+
+  const _calculateVisibleStart = (targetTemplateInfo, direction) => {
+    if (!targetTemplateInfo) {
+      console.error("MetroWidget: _calculateVisibleStart target item is null");
+      return 0;
+    }
+
+    preSeamlessSlideDirection = direction;
+    preAnchorItemIndex = targetTemplateInfo.index;
+    let pos_key = vertical ? "top" : "left";
+    let size_key = vertical ? "height" : "width";
+    let center_key = vertical ? "centerYPos" : "centerXPos";
+    let new_visible_start = visibleInfo.start;
+
+    switch (props.slideSetting.Type) {
+      case SlideSetting.Type.FIX_POSITION:
+        //FIX_POSITION 模式会将当前 item 的中心固定到指定位置
+        new_visible_start = Math.ceil(
+          targetTemplateInfo[center_key] -
+          visibleInfo.range * props.slideSetting.FixPercent
+        );
+        break;
+      case SlideSetting.Type.WHOLE_PAGE:
+        if (typeof targetTemplateInfo.pageHeadIndex == "undefined") {
+          //TODO 子控制滚动时whole page滚动
+          console.error(
+            "child controlled whole page slide type is not supported."
+          );
+        } else {
+          new_visible_start = getItemByIndex(targetTemplateInfo.pageHeadIndex)
+            .templateInfo[pos_key];
+        }
+
+        break;
+      case SlideSetting.Type.SEAMLESS:
+        if (
+          targetTemplateInfo[size_key] >=
+          visibleInfo.range *
+          (props.slideSetting.EndPercent - props.slideSetting.StartPercent)
+        ) {
+          //尺寸较大的item
+          new_visible_start =
+            targetTemplateInfo[center_key] - visibleInfo.range * 0.5;
+        } else {
+          if (direction > 0) {
+            if (
+              targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] >
+              visibleInfo.start +
+              visibleInfo.range * props.slideSetting.EndPercent
+            ) {
+              new_visible_start =
+                targetTemplateInfo[pos_key] +
+                targetTemplateInfo[size_key] -
+                visibleInfo.range * props.slideSetting.EndPercent;
+            }
+          } else if (direction < 0) {
+            if (
+              targetTemplateInfo[pos_key] <
+              visibleInfo.start +
+              visibleInfo.range * props.slideSetting.StartPercent
+            ) {
+              new_visible_start =
+                targetTemplateInfo[pos_key] -
+                visibleInfo.range * props.slideSetting.StartPercent;
+            }
+          } else {
+            //不是沿widget方向的移动
+            if (targetTemplateInfo[pos_key] < visibleInfo.start) {
+              new_visible_start =
+                targetTemplateInfo[pos_key] -
+                visibleInfo.range * props.slideSetting.StartPercent;
+            } else if (
+              targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] >
+              visibleInfo.end
+            ) {
+              new_visible_start =
+                targetTemplateInfo[pos_key] +
+                targetTemplateInfo[size_key] -
+                visibleInfo.range * props.slideSetting.EndPercent;
+            }
+          }
+        }
+        break;
+      default:
+        console.error(
+          "MetroWidget: undefined slide type",
+          props.slideSetting.Type
+        );
+    }
+
+    if ((props.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
+      let boundary = 0;
+      //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
+      const headTemplateInfo = getItemByIndex(0).templateInfo;
+      if (
+        !headTemplateInfo.focusable &&
+        targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] <=
+        visibleInfo.range
+      ) {
+        boundary = headTemplateInfo[size_key];
+      }
+      new_visible_start = new_visible_start < boundary ? 0 : new_visible_start;
+    }
+    if ((props.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
+      let lastTemplateInfo = getItemByIndex(metroTemplate.size - 1).templateInfo;
+      let last_visible_start =
+        lastTemplateInfo[pos_key] +
+        lastTemplateInfo[size_key] -
+        visibleInfo.range;
+      last_visible_start = last_visible_start < 0 ? 0 : last_visible_start;
+      let boundary = last_visible_start;
+      if (
+        !lastTemplateInfo.focusable &&
+        targetTemplateInfo[pos_key] - last_visible_start >= 0
+      ) {
+        //最后元素是占位符, 在保证获焦区域完全展示的前提下要保证不可获焦元素的完全展示
+        boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+      }
+      new_visible_start =
+        new_visible_start > boundary ? last_visible_start : new_visible_start;
+    }
+    return Math.round(new_visible_start);
+  };
+
+  const _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;
+    }
+    _moveToNext(horizontal_direction, vertical_direction, edge_info);
+  };
+
+  const _ifValidEnterRect = (rect_info) => {
+    return rect_info && rect_info.direction && rect_info.rect;
+  };
+
+  const focusBlockOnFocus = (params) => {
+    isFocus = true;
+    preFocusId = -1;
+    if (innerData.length === 0) {
+      console.warn(`MetroWidget: ${props.name} get focus while data is empty.`);
+      return;
+    }
+    let focus_id =
+      typeof enterFocusId !== "undefined" &&
+        enterFocusId >= 0 &&
+        enterFocusId < metroTemplate.size
+        ? enterFocusId
+        : focusId;
+    focus_id = _ifValidEnterRect(enterFocusRect)
+      ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
+      : focus_id;
+
+    preEdgeRect = enterFocusRect;
+    focusId = focus_id;
+    enterFocusId = -1;
+    enterFocusRect = null;
+    onItemFocus(getItemById(focusId), preEdgeRect);
+    props.onFocus?.();
+  };
+
+  const focusBlockOnBlur = () => {
+    enterFocusId = -1;
+    enterFocusRect = null;
+    preEdgeRect = null;
+    preFocusId = focusId;
+    console.log("testtest focusblock on blur", preFocusId)
+    onItemBlur(getItemById(preFocusId));
+    props.onBlur?.();
+    isFocus = false;
+  };
+
+  const _updateFocusByDragInfo = (viewX, viewY) => {
+    let enterFocusRect = null;
+    //模拟最小区域作为输入区域
+    if (vertical) {
+      enterFocusRect = {
+        direction: EdgeDirection.top,
+        rect: {
+          x: props.left - viewX,
+          y: props.top - viewY,
+          width: 10,
+          height: 10,
+        },
+      };
+    } else {
+      enterFocusRect = {
+        direction: EdgeDirection.left,
+        rect: {
+          x: props.left - viewX,
+          y: props.top - viewY,
+          width: 10,
+          height: 10,
+        },
+      };
+    }
+    focusId = _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect);
+  };
+
+  const _onDragUpdateItem = (visible_start, visible_end) => {
+    templateItemAdder.tryAddItemByPosition(visible_end);
+    const updater = pageUpdater.update(
+      metroTemplate,
+      visible_start,
+      visible_end,
+      0,
+      false,
+      permanentItemList
+    );
+    updater.apply();
+
+    Forge.sRenderBridge.InstantPerformSwap();
+  };
+
+  const _getTouchListener = () => {
+    if (!props.enableTouch) {
+      return null;
+    }
+    let callback = {
+      OnDragStart: (msg) => {
+        if (mounted) {
+          Promise.resolve().then(() => {
+            let cur_visible_start = visibleInfo.start - pageRange * 2;
+            let cur_visible_end = visibleInfo.start + pageRange * 3 - 1;
+            preUpdateVisibleStart = cur_visible_start;
+            _onDragUpdateItem(cur_visible_start, cur_visible_end);
+          });
+        }
+        return true;
+      },
+      OnMoved: (msg) => {
+        if (mounted) {
+          Promise.resolve().then(() => {
+            if (
+              typeof msg.viewY != "undefined" &&
+              typeof msg.viewX != "undefined"
+            ) {
+              if (vertical) {
+                visibleInfo.start = -msg.viewY;
+              } else {
+                visibleInfo.start = -msg.viewX;
+              }
+              if (visibleInfo.start < 0) {
+                visibleInfo.start = 0;
+              }
+            }
+            if (
+              Math.abs(visibleInfo.start - preUpdateVisibleStart) <= pageRange
+            ) {
+              let cur_visible_start = visibleInfo.start - pageRange * 2;
+              let cur_visible_end = visibleInfo.start + pageRange * 3 - 1;
+              preUpdateVisibleStart = cur_visible_start;
+              _onDragUpdateItem(cur_visible_start, cur_visible_end);
+            }
+          });
+        }
+
+        return true;
+      },
+      OnDragEnd: (msg) => {
+        updateSlideDiv(msg["viewX"], msg["viewY"], null);
+        preUpdateVisibleStart = visibleInfo.start;
+        _onDragUpdateItem(
+          visibleInfo.startWithPadding,
+          visibleInfo.endWithPadding
+        );
+        _updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
+        _onScroll();
+        return true;
+      },
+      OnFling: (msg) => {
+        updateSlideDiv(msg["viewX"], msg["viewY"], null);
+        preUpdateVisibleStart = visibleInfo.start;
+        _onDragUpdateItem(
+          visibleInfo.startWithPadding,
+          visibleInfo.endWithPadding
+        );
+        _updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
+        _onScroll();
+        return true;
+      },
+      OnRelease: (msg) => {
+        return true;
+      },
+    };
+    return callback;
+  };
+
+  const _updatePage = (rangeSet) => {
+    const tmpArray = Array.from(rangeSet);
+    renderData.value = tmpArray.map((item) => {
+      return getItemByIndex(item);
+    });
+    if (props.enableItemRenderBreak) {
+      itemRender.value = false;
+      nextTick(() => {
+        itemRender.value = true;
+      });
+    }
+  };
+
+  const _onScroll = () => {
+    if (props.onScroll) {
+      const lastTemplateInfo = getItemByIndex(
+        metroTemplate.size - 1
+      ).templateInfo;
+      let totalWidth;
+      if (vertical) {
+        totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+      } else {
+        totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+      }
+      props.onScroll(visibleInfo.start, visibleInfo.range, totalWidth);
+    }
+  };
+
+  const _initRootTouch = () => {
+    if (props.enableTouch && toRaw(slideDiv.value)) {
+      let view = toRaw(slideDiv.value).jsvGetProxyView(true);
+      var drag_setting = new Forge.DragSetting(
+        dragDirection,
+        20,
+        false,
+        slidePile,
+        props.flingPageWidth,
+        props.flingPageEdge
+      );
+      view.EnableDrag(drag_setting, touchListener, "translateMat(dx,dy,0)");
+    }
+  };
+
+  const _initItemViewTouch = (itemDivRef, index) => {
+    if (props.enableTouch) {
+      if (itemDivRef) {
+        // 为view添加触控处理
+        let view = itemDivRef.jsvGetProxyView(true);
+        let dragSetting = new Forge.DragSetting(
+          Forge.DragSetting.DIRECTION_DISABLE,
+          20,
+          false,
+          new Forge.RectArea(0, 0, 0, 0),
+          -1,
+          3 / 4
+        );
+        let callback = {
+          OnTap: (msg) => {
+            return onItemClick(getItemById(index));
+          },
+        };
+        view.EnableDrag(dragSetting, callback, "translateMat(dx,dy,0)");
+      }
+    }
+  };
+
+  //init
+  pageUpdater = new PageUpdater(_updatePage);
+  dragDirection = vertical
+    ? Forge.DragSetting.DIRECTION_VERTICAL
+    : Forge.DragSetting.DIRECTION_HORIZONTAL;
+  visibleInfo.range = vertical
+    ? widgetRectInfo.contentHeight
+    : widgetRectInfo.contentWidth;
+  visibleInfo.padding = vertical
+    ? { start: widgetRectInfo.padding.top, end: widgetRectInfo.padding.bottom }
+    : { start: widgetRectInfo.padding.left, end: widgetRectInfo.padding.right };
+
+  if (props.provideData) {
+    dataList = toRaw(props.provideData());
+  } else if (props.data) {
+    dataList = toRaw(props.data);
+  }
+
+  window.metroTemplate = metroTemplate;
+  window.innerData = innerData;
+
+  templateItemAdder = new TemplateItemAdder(
+    metroTemplate,
+    dataList,
+    props.measures,
+    pageRange,
+    _onTemplateAdd,
+    props.name
+  );
+  if (props.onScroll) {
+    templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+  } else {
+    templateItemAdder.tryAddItem(null, 2);
+  }
+
+  //触控相关
+  const lastTemplateInfo = getItemByIndex(metroTemplate.size - 1)?.templateInfo;
+  if (lastTemplateInfo) {
+    touchListener = _getTouchListener();
+    touchContainerW.value =
+      vertical
+        ? props.width
+        : lastTemplateInfo.left + lastTemplateInfo.width;
+    touchContainerH.value =
+      vertical
+        ? lastTemplateInfo.top + lastTemplateInfo.height
+        : props.height;
+  }
+  slidePile = new Forge.RectArea(
+    0,
+    0,
+    widgetRectInfo.contentWidth,
+    widgetRectInfo.contentHeight,
+  );
+  let init_focus_id = 0;
+  let cur_visible_start = 0;
+
+  if (typeof props.initFocusId == "number") {
+    templateItemAdder.tryAddItemById(props.initFocusId);
+    const item = getItemById(props.initFocusId);
+    if (item) {
+      init_focus_id = props.initFocusId;
+      if (item.itemConfig.doSlide) {
+        cur_visible_start = _calculateVisibleStart(item.templateInfo, 1);
+      }
+    }
+  }
+  focusId = init_focus_id;
+  visibleInfo.start = cur_visible_start;
+
+  const updater = pageUpdater.update(
+    metroTemplate,
+    visibleInfo.startWithPadding,
+    visibleInfo.endWithPadding,
+    0,
+    false,
+    permanentItemList
+  );
+  updater.apply();
+
+  onMounted(() => {
+    mounted = true;
+    _initRootTouch();
+    for (let item of renderData.value) {
+      _initItemViewTouch(toRaw(item.rootDiv), item.index);
+    }
+
+    if (visibleInfo.start) {
+      _slideTo(visibleInfo.start, null);
+    }
+
+    onItemFocus(getItemById(focusId), preEdgeRect);
+
+    if (props.enableItemRenderBreak) {
+      nextTick(() => {
+        itemRender.value = true;
+      });
+    }
+  });
+
+  onUpdated(() => {
+    for (let item of renderData.value) {
+      if (!item.touchInit) {
+        _initItemViewTouch(toRaw(item.rootDiv), item.index);
+      }
+    }
+  });
+
+  onBeforeUnmount(() => {
+    mounted = false;
+  });
+
+  return {
+    widgetRectInfo,
+    focusBlockOnFocus,
+    focusBlockOnBlur,
+    focusBlockOnKeyDown,
+    focusBlockOnCustomerEvent,
+    _onFocusableItemEdge,
+    exportObject,
+  }
+}
+
+export const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";