@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -23,9 +23,10 @@ import {
 } from "../WidgetCommon";
 import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
-import { AnimationManager, AnimationTools } from "./AnimationManager";
+// import { AnimationManager, AnimationTools } from "./AnimationManager";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import { checkType } from "../CheckType";
+import { TaskType, MacroEndTaskManager, AnimationManager } from "./AnimationManager.ts"
 
 const TAG = "MetroWidget";
 
@@ -71,17 +72,12 @@ const _getMetroTemplate = function (
 
 export const setup = (
   props,
-  touchContainerW,
-  touchContainerH,
   itemRender,
   locateDiv,
   renderData,
   slideDiv,
   slideDivLeft,
   slideDivTop,
-  itemResizeSlideDiv,
-  itemResizeSlideLeft,
-  itemResizeSlideTop,
   focusNode,
   pageUpdateToken,
   templateMode) => {
@@ -107,86 +103,202 @@ export const setup = (
   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();
+  let preSlideDirection = 0;
 
   const DEFAULT_ANIMATION_DURATION = 200;
+
+  const isItemVisible = (item) => {
+    let pos_key = vertical ? "top" : "left";
+    let size_key = vertical ? "height" : "width";
+    return item.templateInfo[pos_key] >= visibleInfo.start
+      && item.templateInfo[pos_key] + item.templateInfo[size_key] - 1 < visibleInfo.end;
+  }
+
   const animationManager = new AnimationManager();
+  const onMacroTaskEnd = (taskList) => {
+    let resizeList = [];
+    let resizeTaskMap = {};
+    let slideTask = null;
+    //统一处理itemResize和slide动画
+    let minIndex = Infinity;
+    let slideInfo = null;
+    let anchorInfo = null;
+    let duration = 200;
+    let easing = null;
 
-  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);
-          };
+    let pos_key = vertical ? "top" : "left";
+    let size_key = vertical ? "height" : "width";
+    let doAnim = false;
+
+    for (let task of taskList) {
+      if (task.type == TaskType.RESIZE_ITEM) {
+        resizeTaskMap[task.params.index] = task;
+        resizeList.push(task);
+        const { index, animInfo } = task.params;
+        doAnim = doAnim || !!animInfo;
+        minIndex = Math.min(minIndex, index);
+
+        duration = task.params.animInfo?.duration ?? duration;
+        easing = task.params.animInfo?.easing ?? easing;
+
+        if (index == id2Index(focusId) && typeof animInfo?.anchor != "undefined") {
+          //记录锚点信息
+          const item = getItemByIndex(index);
+          anchorInfo = {
+            anchorPosition: item.templateInfo[pos_key] + item.templateInfo[size_key] * animInfo.anchor - 1 - visibleInfo.start,
+            anchor: animInfo.anchor,
+          }
+        }
+      } else if (task.type == TaskType.SLIDE) {
+        //滚动动画取最后一个
+        slideTask = task;
+      }
+    }
 
-          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,
+    if (slideTask) {
+      slideInfo = {
+        target: slideTask.params.target,
+        animObj: slideTask.params.animObj,
+      }
+    }
+
+    if (resizeList.length > 0) {
+      //TODO 应该是尺寸变化后的可视item需要记录位置, 但暂时先记录20个
+      metroTemplate.cacheLayout(minIndex, minIndex + 20);
+      //resize
+      resizeList.forEach(task => {
+        metroTemplate.updateItemSize(task.params.index, {
+          width: task.params.width,
+          height: task.params.height,
+        })
+      });
+      let preVisibleStart = visibleInfo.start;
+      //保持anchor
+      if (anchorInfo) {
+        const focusItem = getItemById(focusId);
+        const start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
+        visibleInfo.start = normalizeVisibleStart(start, focusItem.templateInfo);
+        if (!isItemVisible(focusItem)) {
+          visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
+        }
+      } else {
+        visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
+      }
+      if (preVisibleStart != visibleInfo.start) {
+        //只有resize引起的slide动画时, 动画时长使用resize设置, 否者使用slideSetting设置
+        slideInfo = {
+          target: -visibleInfo.start,
+          animObj: doAnim ? {
+            easing: "",
+            onStart: null,
+            speed: slideTask ? props.slideSetting.Speed : null,
+            duration: slideTask ? props.slideSetting.Duration : duration,
+            onEnd: (animDone) => {
+            },
+          } : {
+            //resize无动画时正常slide
+            easing: "",
+            onStart: null,
+            onEnd: null,
+            speed: props.slideSetting.Speed,
+            duration: props.slideSetting.Duration,
+          },
+        }
+      }
+      const handler = pageUpdater.update(
+        metroTemplate,
+        visibleInfo.startWithPadding,
+        visibleInfo.endWithPadding,
+        focusId,
+        true,
+        permanentItemList
+      );
+      handler.applyTmp();
+      if (doAnim) {
+        const visibleIndexList = Array.from(pageUpdater.getTmpRange());
+        //创建item slide anim
+        for (let index of visibleIndexList) {
+          const renderItem = getItemByIndex(index);
+          const { left, top } = renderItem.templateInfo;
+          if (index >= minIndex) {
+            const layoutCache = renderItem.templateInfo.layoutCache;
+            if (renderItem.mounted.value) {
+              animationManager.startSlideAnim(renderItem.rootDiv,
+                [layoutCache.left - left, layoutCache.top - top],
+                [0, 0],
+                resizeTaskMap[index] ?
+                  resizeTaskMap[index].params.animInfo
+                  : { duration: duration });
+            } else {
+              renderItem.addDivMountedListener((div) => {
+                animationManager.startSlideAnim(div,
+                  [layoutCache.left - left, layoutCache.top - top],
+                  [0, 0],
+                  resizeTaskMap[index] ?
+                    resizeTaskMap[index].params.animInfo
+                    : { duration: duration });
+              })
             }
-          );
-          animationManager.tryStartAnim(Forge.sFrameCount.count, animNode);
-        } else {
-          onStart?.();
-          onEnd?.();
+          }
         }
       }
-    };
+    }
 
-  const updateSlideDiv = updateDivPosition(slideDiv, slideDivLeft, slideDivTop);
+    //处理滚动动画
+    if (slideInfo) {
+      const target = slideInfo.target;
+      let preLeft = slideDivLeft.value;
+      let preTop = slideDivTop.value;
+      slideDivLeft.value = vertical ? 0 : target;
+      slideDivTop.value = vertical ? target : 0;
+      if (slideInfo.animObj) {
+        animationManager.startSlideAnim(
+          slideDiv.value,
+          vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0],
+          [0, 0],
+          slideInfo.animObj);
+      }
+      _onScroll();
+    }
+  }
 
-  const _slideTo = (target, animObj) => {
-    if (vertical) {
-      updateSlideDiv(0, -target - itemResizeSlideTop.value, animObj);
-    } else {
-      updateSlideDiv(-target - itemResizeSlideLeft.value, 0, animObj);
+  const onMacroEndTaskBreak = (list) => {
+    if (list) {
+      list.forEach(task => {
+        if (task.type == TaskType.RESIZE_ITEM) {
+          metroTemplate.updateItemSize(task.params.index, {
+            width: task.params.width,
+            height: task.params.height,
+          })
+        }
+      })
     }
-    _onScroll();
-  };
+  }
+  const macroEndTaskManager = new MacroEndTaskManager(onMacroTaskEnd, onMacroEndTaskBreak);
 
-  const updateItemResizeSlideDiv = updateDivPosition(
-    itemResizeSlideDiv,
-    itemResizeSlideLeft,
-    itemResizeSlideTop
-  );
+  const updateItemSize = (index, newSize, animInfo) => {
+    macroEndTaskManager.addTask(TaskType.RESIZE_ITEM,
+      {
+        index,
+        width: newSize.width,
+        height: newSize.height,
+        animInfo,
+      });
+  }
 
-  let itemMovingInfo = null;
+  const _slideTo = (target, animObj) => {
+    macroEndTaskManager.addTask(TaskType.SLIDE, { target: -target, animObj })
+  };
 
   let callFocusAfterUpdate = false;
 
@@ -224,30 +336,6 @@ export const setup = (
     };
   };
 
-  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);
   };
@@ -434,6 +522,7 @@ export const setup = (
           easing: props.slideSetting.Easing,
           onStart: null,
           speed: props.slideSetting.Speed,
+          duration: props.slideSetting.Duration,
           onEnd: () => {
             updater.apply();
           },
@@ -537,40 +626,21 @@ export const setup = (
       } 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,
+      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+      Math.min(
+        visibleInfo.startMax + visibleInfo.range + visibleInfo.padding.end - 1,
+        visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+      ),
       focusId,
       false,
       permanentItemList
     );
     updater.apply();
     onItemFocus(getItemById(focusId), null);
-    slideToItem(focusId, false);
+    slideToItem(id2Index(focusId), false);
   };
 
   const getVisibleItems = () => {
@@ -586,8 +656,6 @@ export const setup = (
     };
   };
 
-  window.aaa = getVisibleItems;
-
   const moveFocus = (direction) => {
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
       _moveToNext(-1, 0);
@@ -606,6 +674,10 @@ export const setup = (
     return dataList.length;
   }
 
+  const getCurrentFocusIndex = () => {
+    return id2Index(focusId);
+  }
+
   const exportObject = {
     lock,
     unlock,
@@ -616,11 +688,11 @@ export const setup = (
     setEnterFocusRect,
     slideToItem,
     refreshData,
-    _dispatchEvent,
     getVisibleItems,
     moveFocus,
     getCustomerDataSize,
     setZIndex,
+    getCurrentFocusIndex,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -845,195 +917,11 @@ export const setup = (
     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
+  const randomColor = () => {
+    let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+    return (
+      "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor + "77"
     );
-
-    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) => {
@@ -1103,16 +991,10 @@ export const setup = (
     innerData.push(item);
     if (item.itemConfig.permanent) {
       permanentItemList.push({
-        index: item.index - 1,
+        index: item.index,
         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) => {
@@ -1190,6 +1072,7 @@ export const setup = (
           easing: "",
           onStart: null,
           speed: props.slideSetting.Speed,
+          duration: props.slideSetting.Duration,
           onEnd: () => {
             updater.apply();
           },
@@ -1306,6 +1189,7 @@ export const setup = (
             easing: "",
             onStart: null,
             speed: props.slideSetting.Speed,
+            duration: props.slideSetting.Duration,
             onEnd: (animDone) => {
               updater.apply();
             },
@@ -1323,36 +1207,6 @@ export const setup = (
           //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
           updater.applyTmp();
         }
-        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 {
       //到达边缘
@@ -1396,26 +1250,78 @@ export const setup = (
     }
   };
 
+  const normalizeVisibleStart = (origin, targetItem = null) => {
+    let pos_key = vertical ? "top" : "left";
+    let size_key = vertical ? "height" : "width";
+    let visible_start = origin;
+    if ((props.slideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
+      let boundary = 0;
+      //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
+      const headTemplateInfo = getItemByIndex(0).templateInfo;
+      if (
+        targetItem
+        && (!headTemplateInfo.focusable || targetItem.index == headTemplateInfo.index)
+        && targetItem[pos_key] + targetItem[size_key] <=
+        visibleInfo.range
+      ) {
+        boundary = headTemplateInfo[size_key];
+      }
+      visible_start = visible_start < boundary ? 0 : visible_start;
+    }
+    if ((props.slideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
+      let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).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 (
+        targetItem
+        && (!lastTemplateInfo.focusable || targetItem.index == lastTemplateInfo.index)
+        && targetItem[pos_key] - last_visible_start >= 0
+      ) {
+        //最后元素是占位符, 在保证获焦区域完全展示的前提下要保证不可获焦元素的完全展示
+        boundary = lastTemplateInfo[pos_key] - visibleInfo.range;
+      }
+      visible_start =
+        visible_start > boundary ? last_visible_start : visible_start;
+    }
+    return visible_start;
+  }
+
   const _calculateVisibleStart = (targetTemplateInfo, direction) => {
     if (!targetTemplateInfo) {
       console.error("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
     }
 
-    preSeamlessSlideDirection = direction;
+    preSlideDirection = 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;
 
+    let needCalculate = true;
     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
-        );
+
+        //首页不滚动
+        if (props.slideSetting.FixFirstPage) {
+          if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
+            new_visible_start = 0;
+            needCalculate = false;
+          }
+        }
+
+        if (needCalculate) {
+          new_visible_start = Math.ceil(
+            targetTemplateInfo[center_key] -
+            visibleInfo.range * props.slideSetting.FixPercent
+          );
+        }
         break;
       case SlideSetting.Type.WHOLE_PAGE:
         if (typeof targetTemplateInfo.pageHeadIndex == "undefined") {
@@ -1430,50 +1336,59 @@ export const setup = (
 
         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;
-            }
+        //首页不滚动
+        if (props.slideSetting.FixFirstPage) {
+          if (targetTemplateInfo[pos_key] + targetTemplateInfo[size_key] - 1 < visibleInfo.range) {
+            new_visible_start = 0;
+            needCalculate = false;
+          }
+        }
+        if (needCalculate) {
+          if (
+            targetTemplateInfo[size_key] >=
+            visibleInfo.range *
+            (props.slideSetting.EndPercent - props.slideSetting.StartPercent)
+          ) {
+            //尺寸较大的item
+            new_visible_start =
+              targetTemplateInfo[center_key] - visibleInfo.range * 0.5;
           } 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;
+            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;
+              }
             }
           }
         }
@@ -1484,38 +1399,7 @@ export const setup = (
           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;
-    }
+    new_visible_start = normalizeVisibleStart(new_visible_start, targetTemplateInfo);
     return Math.round(new_visible_start);
   };
 
@@ -1549,7 +1433,7 @@ export const setup = (
     isFocus = true;
     preFocusId = -1;
     if (innerData.length === 0) {
-      console.warn(`MetroWidget: ${props.name} get focus while data is empty.`);
+      console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
       return;
     }
     let focus_id =
@@ -1580,122 +1464,6 @@ export const setup = (
     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) => {
@@ -1712,7 +1480,7 @@ export const setup = (
   const _onScroll = () => {
     if (props.onScroll) {
       const lastTemplateInfo = getItemByIndex(
-        metroTemplate.size - 1
+        metroTemplate.getTailItemIndex()
       )?.templateInfo;
       let totalWidth = 0;
       if (lastTemplateInfo) {
@@ -1726,49 +1494,8 @@ export const setup = (
     }
   };
 
-  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;
@@ -1799,25 +1526,6 @@ export const setup = (
     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;
 
@@ -1846,11 +1554,6 @@ export const setup = (
 
   onMounted(() => {
     mounted = true;
-    _initRootTouch();
-    for (let item of renderData.value) {
-      _initItemViewTouch(toRaw(item.rootDiv), item.index);
-    }
-
     if (visibleInfo.start) {
       _slideTo(visibleInfo.start, null);
     }
@@ -1865,13 +1568,7 @@ export const setup = (
     }
   });
 
-  onUpdated(() => {
-    for (let item of renderData.value) {
-      if (!item.touchInit) {
-        _initItemViewTouch(toRaw(item.rootDiv), item.index);
-      }
-    }
-  });
+  onUpdated(() => { });
 
   onBeforeUnmount(() => {
     mounted = false;
@@ -1887,6 +1584,4 @@ export const setup = (
     exportObject,
     setZIndex,
   }
-}
-
-export const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";
+}