@shijiu/jsview-vue 2.1.482-test.0 → 2.2.128

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -1,6 +1,7 @@
 import { ref, computed } from "vue";
 import type { Ref } from "vue";
 import { TemplateItem } from "../TemplateParser/MetroTemplate"
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine";
 
 interface RenderItemStyle {
   zIndex: number,
@@ -89,11 +90,11 @@ export class RenderItem {
   }
 
   public register(name: string, callback: Function) {
-    this.customerCallbackMap[name] = callback;
+    (this.customerCallbackMap as any)[name] = callback;
   }
 
   public unregister(name: string) {
-    delete this.customerCallbackMap[name];
+    delete (this.customerCallbackMap as any)[name];
   }
 
   public onFocus(rect: object): boolean {
@@ -154,7 +155,7 @@ export class RenderItem {
     this.divMountedCallback.clear();
     if (this.enableTap && this.rootDiv) {
       const divView = (this.rootDiv as any).jsvGetProxyView();
-      divView.DragEnables?.(0x01); // 只激活tap
+      divView.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_CLICK_BIT); // 只激活tap
     }
   }
 

package/utils/JsViewEngineWidget/MetroWidget/Slide.ts

@@ -0,0 +1,56 @@
+import { getCurFrameCount } from "../WidgetCommon";
+
+export interface TargetRectInfo {
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  frameCount: number,
+}
+
+export class RectCache {
+  private preRect: TargetRectInfo | null = null;
+  private curRect: TargetRectInfo | null = null;
+
+  public cache(rect: TargetRectInfo) {
+    if (this.curRect && this.curRect.frameCount < rect?.frameCount) {
+      this.preRect = this.curRect;
+    }
+    this.curRect = rect;
+  }
+
+  public cacheManually() {
+    if (this.curRect && this.curRect.frameCount < getCurFrameCount()) {
+      this.preRect = this.curRect;
+      this.curRect = null;
+    }
+  }
+
+  public getCurRect(): TargetRectInfo | null {
+    return this.curRect ? { ...this.curRect } : null;
+  }
+
+  public getPreRect(): TargetRectInfo | null {
+    return this.preRect ? { ...this.preRect } : null;
+  }
+
+  public updatePre(key: "left" | "top" | "width" | "height", value: number) {
+    if (this.preRect) {
+      let p = this.preRect[key];
+      this.preRect[key] = value;
+    }
+  }
+  
+  public clean() {
+    this.preRect = null;
+    this.curRect = null;
+  }
+}
+
+export const getDirectionByRect = (curRect: TargetRectInfo, preRect: TargetRectInfo) => {
+  if (!preRect || !curRect) return { horizontal: 0, vertical: 0 };
+  return {
+    horizontal: curRect.left < preRect.left ? -1 : (curRect.left > preRect.left ? 1 : 0),
+    vertical: curRect.top < preRect.top ? -1 : (curRect.top > preRect.top ? 1 : 0),
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -107,7 +107,7 @@ export type TaskRunner = () => CancelFunc;
 class CancellableRunner {
   private cancelHandler: CancelFunc | null = null;
   private runner: TaskRunner | null = null;
-  constructor(r: TaskRunner) { 
+  constructor(r: TaskRunner) {
     this.runner = r;
   }
 
@@ -126,29 +126,55 @@ class CancellableRunner {
 
 
 export enum TaskType {
-  RESIZE_ITEM,
+  RESIZE_ITEM = 1,
   SLIDE,
   ON_FOCUS_CHANGE,
 }
 
+export enum SlideTaskType {
+  SLIDE_BY_POS = 1,
+  SLIDE_BY_ITEM,
+  SLIDE_BY_DIV,
+  SLIDE_BY_RECT,
+}
+
+type SubType = SlideTaskType | null;
+
 interface Task {
   frameCount: number,
   type: TaskType,
+  subType: SubType,
   params: any,
 }
 
-export type AddTaskCallback = (taskList: Array<object>) => void;
-
+export interface AllTaskList {
+  slide: Array<Task>,
+  focus: Array<Task>,
+  resize: Array<Task>,
+}
+export type AddTaskCallback = (taskList: AllTaskList) => void;
 export class TaskManager {
   private frameCount: number = -1;
-  private widgetTaskCacheList: Array<Task> = [];
   private cancellableRunnerList: Array<CancellableRunner> = [];
 
+  //三类task: 1.slide, 2.resize, 3.focus
+  private allTaskList: AllTaskList = {
+    slide: [],
+    focus: [],
+    resize: [],
+  }
+
   constructor(private onAddTask: AddTaskCallback) { }
 
-  public addTask(type: TaskType, params: any) {
+  private cleanTaskCache(): void {
+    this.allTaskList.slide = [];
+    this.allTaskList.focus = [];
+    this.allTaskList.resize = [];
+  }
+
+  public addTask(type: TaskType, params: any, subtype: SubType = null) {
     if (this.frameCount != Forge.sFrameCount.count) {
-      this.widgetTaskCacheList = [];
+      this.cleanTaskCache();
       this.cancellableRunnerList = [];
       this.frameCount = Forge.sFrameCount.count;
     }
@@ -157,12 +183,27 @@ export class TaskManager {
       t.cancel();
     });
 
-    this.widgetTaskCacheList.push({
+    const tObj = {
       type,
+      subType: subtype,
       params,
       frameCount: Forge.sFrameCount.count,
-    });
-    this.onAddTask(this.widgetTaskCacheList);
+    }
+    switch (type) {
+      case TaskType.SLIDE:
+        this.allTaskList.slide.push(tObj)
+        break;
+      case TaskType.ON_FOCUS_CHANGE:
+        this.allTaskList.focus.push(tObj)
+        break;
+      case TaskType.RESIZE_ITEM:
+        this.allTaskList.resize.push(tObj)
+        break;
+      default:
+        console.error("undefined type")
+        break;
+    }
+    this.onAddTask(this.allTaskList);
   }
 
   public run(func: TaskRunner) {

package/utils/JsViewEngineWidget/MetroWidget/TokenGenerator.ts

@@ -0,0 +1,10 @@
+const MaxNumber = Math.round(Number.MAX_SAFE_INTEGER / 2);
+export class TokenGenerator {
+  private token = 0;
+  public get(): number {
+    if (this.token + 1 > MaxNumber) {
+      this.token = 1;
+    }
+    return ++this.token;
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/VisibleInfo.ts

@@ -1,7 +1,7 @@
 export class VisibleInfo {
   private _start: number = 0;
   public range: number = 0;
-  public padding: {
+  public padding = {
     start: 0,
     end: 0,
   };

package/utils/JsViewEngineWidget/TemplateParser/CommonMetroTemplate.ts

@@ -186,23 +186,23 @@ class CommonMetroTemplate extends MetroTemplate {
 
   private _FindFocusableNeighbor(direction: string, item: TemplateItem) {
     if (
-      item.neighborIndexList[direction].length > 0 &&
-      !this._CheckIdsHasFocusable(item.neighborIndexList[direction])
+      (item.neighborIndexList as any)[direction].length > 0 &&
+      !this._CheckIdsHasFocusable((item.neighborIndexList as any)[direction])
     ) {
       const lastItemId =
-        item.neighborIndexList[direction][
-        item.neighborIndexList[direction].length - 1
+        (item.neighborIndexList as any)[direction][
+        (item.neighborIndexList as any)[direction].length - 1
         ];
       const idx = this._GetValidNeighborIndex(item.id, lastItemId, direction); // 查找其左右邻居
       if (idx !== -1) {
-        item.neighborIndexList[direction] = []; // 清除无效项
-        item.neighborIndexList[direction].push(idx);
+        (item.neighborIndexList as any)[direction] = []; // 清除无效项
+        (item.neighborIndexList as any)[direction].push(idx);
       }
     }
   }
 
   public addItemInner(itemObj: MeasureInfo): TemplateItem {
-    const templateItem = MetroTemplate.getTemplateItem(itemObj);
+    const templateItem: any = MetroTemplate.getTemplateItem(itemObj);
     // Layout template items
     const fenceStack = this._FenceStack;
     const itemWidth = templateItem.width;
@@ -292,7 +292,7 @@ class CommonMetroTemplate extends MetroTemplate {
         sizeKey = "height";
       }
       const curPageStart =
-        this.templateList[curPageHeadIndex][positionKey];
+        (this.templateList as any)[curPageHeadIndex][positionKey];
       if (
         templateItem[positionKey] + templateItem[sizeKey] >
         curPageStart + this.pageSize
@@ -465,8 +465,8 @@ class CommonMetroTemplate extends MetroTemplate {
 
 
   private getNextItemInner(index: number, offset: number,
-    vertical: boolean, useHistory: boolean, checkAnchor: number = -1) {
-    const templateList = this.templateList;
+    vertical: boolean, useHistory: boolean, checkAnchor: number = -1): any {
+    const templateList: any = this.templateList;
     const baseItem = templateList[index];
     if (checkAnchor < 0) {
       // let checkAnchor = -1;
@@ -645,8 +645,8 @@ class CommonMetroTemplate extends MetroTemplate {
     );
   }
 
-  private _GetTotalNeighbor(index: number, direction: string) {
-    const item = this.templateList[index];
+  private _GetTotalNeighbor(index: number, direction: string): any {
+    const item: any = this.templateList[index];
     return item.neighborIndexList[direction].concat(
       item.tmpNeighborIndexList[direction]
     );
@@ -666,7 +666,7 @@ class CommonMetroTemplate extends MetroTemplate {
     return nearestIndex;
   }
 
-  private _GetNextLoopItem(index: number, offset: number, isVertical: boolean) {
+  private _GetNextLoopItem(index: number, offset: number, isVertical: boolean): TemplateItem | null {
     const templateList = this.templateList;
     const baseItem = templateList[index];
     let searchDirection = isVertical ? "right" : "bottom";
@@ -953,7 +953,7 @@ class CommonMetroTemplate extends MetroTemplate {
       }
 
       // 查找与交叉项上下左右最近的各项目，做交叉
-      const neighbor = this._FindNearestNeighbor(crossItem);
+      const neighbor: any = this._FindNearestNeighbor(crossItem);
       // console.log(
       //   "%c cchtest find nearest neighbor",
       //   "color:red;",
@@ -1005,8 +1005,8 @@ class CommonMetroTemplate extends MetroTemplate {
         console.log(`_IfBlockedByOtherNeighbor unknown direction:${direction}`);
         break;
     }
-    const crossTemplateItem = this.getItemByIndex(crossItem.index);
-    const targetTemplateItem = this.getItemByIndex(targetItem.index);
+    const crossTemplateItem: any = this.getItemByIndex(crossItem.index);
+    const targetTemplateItem: any = this.getItemByIndex(targetItem.index);
 
     let valid = true;
     if (crossTemplateItem && targetTemplateItem) {
@@ -1015,7 +1015,7 @@ class CommonMetroTemplate extends MetroTemplate {
       const targetStart = targetTemplateItem[positionKey];
       const targetEnd = targetStart + targetTemplateItem[sizeKey] - 1;
       for (let i = crossNeighborList.length - 1; i >= 0; i--) {
-        const item = this.getItemByIndex(crossNeighborList[i]);
+        const item: any = this.getItemByIndex(crossNeighborList[i]);
 
         if (item == null) continue;
 
@@ -1046,8 +1046,8 @@ class CommonMetroTemplate extends MetroTemplate {
   }
 
   private _CheckNeighborItemMatching(direction: string, crossItem: EdgeInfo, targetItem: EdgeInfo) {
-    const crossEdgeObj = crossItem.edgeObj;
-    const targetEdgeObj = targetItem.edgeObj;
+    const crossEdgeObj: any = crossItem.edgeObj;
+    const targetEdgeObj: any = targetItem.edgeObj;
     let targetEdgeName = "rightEdge";
     let crossEdgeName = "leftEdge";
     switch (direction) {
@@ -1255,7 +1255,7 @@ class CommonMetroTemplate extends MetroTemplate {
   }
 
   private _TryUpdateItemNeighbor(tmpNeighbor: boolean, direction: string, crossItem: EdgeInfo, targetItem: EdgeInfo) {
-    const keyMap = {
+    const keyMap: any = {
       target: {
         left: "right",
         right: "left",
@@ -1277,7 +1277,7 @@ class CommonMetroTemplate extends MetroTemplate {
 
     const targetIndex = targetItem.index;
     const crossItemIndex = crossItem.index;
-    const templateList = this.templateList;
+    const templateList: any = this.templateList;
     if (this._IfBlockedByOtherNeighbor(direction, crossItem, targetItem)) {
       if (!tmpNeighbor) {
         this._CheckNeighborItemMatching(direction, crossItem, targetItem);

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -1,5 +1,5 @@
 import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate"
-import { VERTICAL, HORIZONTAL, FocusMoveType } from "../WidgetCommon";
+import { VERTICAL, HORIZONTAL, FocusMoveType, getCurFrameCount } from "../WidgetCommon";
 
 const TAG = "ListMetroTemplate";
 
@@ -20,7 +20,7 @@ class ListMetroTemplate extends MetroTemplate {
 
   private _addTemplateItem(templateItem: TemplateItem): void {
     let sizeKey = this.direction == VERTICAL ? "width" : "height";
-    if (templateItem[sizeKey] > this.lineMax) {
+    if ((templateItem as any)[sizeKey] > this.lineMax) {
       throw new Error(`item size is ${templateItem.width}x${templateItem.height}, large than lineMax ${this.lineMax}`);
     }
 
@@ -64,9 +64,9 @@ class ListMetroTemplate extends MetroTemplate {
         sizeKey = "height";
       }
       const curPageStart =
-        this.templateList[curPageHeadIndex][positionKey];
+        (this.templateList as any)[curPageHeadIndex][positionKey];
       if (
-        templateItem[positionKey] + templateItem[sizeKey] >
+        (templateItem as any)[positionKey] + (templateItem as any)[sizeKey] >
         curPageStart + this.pageSize
       ) {
         //新的页
@@ -81,7 +81,7 @@ class ListMetroTemplate extends MetroTemplate {
 
   public getNextItem(baseId: number, vOffset: number,
     hOffset: number, moveType: number): TemplateItem | null {
-    const item = this.getItemById(baseId);
+    const item = this.getItemById(baseId) as any;
     if (item) {
       let neighborDirection: string | null = null;
       if (this.direction == VERTICAL) {
@@ -123,8 +123,6 @@ class ListMetroTemplate extends MetroTemplate {
       return [-1, -1]
     }
 
-
-
     let item = this.getItemById(baseId);
     const startIndex = item ? item.index : Math.round(this.size / 2);
     let start = -1, end = -1;
@@ -173,8 +171,16 @@ class ListMetroTemplate extends MetroTemplate {
         break;
       }
     }
+    //TODO 不是一次性加载全部, 可视区域外的懒惰加载
     for (let i of needChangeList) {
       this._addTemplateItem(i);
+      i.layoutCache.cache({
+        left: i.left,
+        top: i.top,
+        width: i.width,
+        height: i.height,
+        frameCount: getCurFrameCount(),
+      })
     }
   }
 }

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -1,6 +1,7 @@
 import { checkType, toRawType, getTypeName } from "../CheckType.js";
 import { METRO_WIDGET } from "../MetroWidget/Const";
-import { VERTICAL } from "../WidgetCommon";
+import { VERTICAL, getCurFrameCount } from "../WidgetCommon";
+import { RectCache } from "../MetroWidget/Slide";
 
 const TAG = "MetroTemplate";
 
@@ -86,7 +87,7 @@ const measureObjectDefine = {
   findNextAnchor: {
     type: [Object, null],
     default: null,
-    validator(value, errorLogger) {
+    validator(value: any, errorLogger: any) {
       if (value) {
         if (!checkType(value.left, Number)) {
           errorLogger(`findNextAnchor.left expected integer, got ${toRawType(value.left)}. value is ${value.left}`)
@@ -160,7 +161,7 @@ interface TemplateItem {
     bottom: number,
   }
   findNextAnchor: FindNextAnchor | null,
-  layoutCache: { top: number, left: number, width: number, height: number } | null,
+  layoutCache: RectCache,
   uid?: string,
 }
 
@@ -253,7 +254,7 @@ abstract class MetroTemplate {
   }
 
   public getItemByUid(uid: string): TemplateItem | null {
-    return this.uidMap[uid];
+    return (this.uidMap as any)[uid];
   }
 
   public abstract calculateNeighborWhenAddStop(): void;
@@ -264,8 +265,16 @@ abstract class MetroTemplate {
     const item = this.addItemInner(itemObj);
     //检查uid
     if (itemObj.uid) {
-      this.uidMap[itemObj.uid] = item;
+      (this.uidMap as any)[itemObj.uid] = item;
     }
+    //初次缓存rect, 为resize准备
+    item.layoutCache.cache({
+      left: item.left,
+      top: item.top,
+      width: item.width,
+      height: item.height,
+      frameCount: getCurFrameCount(),
+    })
     return item;
   }
 
@@ -278,15 +287,22 @@ abstract class MetroTemplate {
 
   public getBoundingBoxSize() {
     const lastItem = this.templateList[this.templateList.length - 1];
-    if (this.direction == VERTICAL) {
-      return {
-        width: this.lineMax,
-        height: lastItem.height + lastItem.top - 1,
+    if (lastItem) {
+      if (this.direction == VERTICAL) {
+        return {
+          width: this.lineMax,
+          height: lastItem.height + lastItem.top - 1,
+        }
+      } else {
+        return {
+          height: this.lineMax,
+          width: lastItem.width + lastItem.left - 1,
+        }
       }
     } else {
       return {
-        height: this.lineMax,
-        width: lastItem.width + lastItem.left - 1,
+        width: 0,
+        height: 0,
       }
     }
   }
@@ -295,32 +311,6 @@ abstract class MetroTemplate {
     return this.tailItemIndex;
   }
 
-  public cacheLayout(start: number, end: number) {
-    if (typeof end == "undefined") {
-      end = this.templateList.length;
-    }
-    end = Math.min(end, this.templateList.length);
-    for (let i = start; i < end; ++i) {
-      let item = this.templateList[i];
-      item.layoutCache = {
-        left: item.left,
-        top: item.top,
-        width: item.width,
-        height: item.height,
-      }
-    }
-    this.cachedLayoutRange.push([start, end]);
-  }
-
-  public cleanLayoutCache() {
-    for (let r of this.cachedLayoutRange) {
-      for (let i = r[0]; i < r[1]; ++i) {
-        this.templateList[i].layoutCache = null;
-      }
-    }
-    this.cachedLayoutRange = [];
-  }
-
   protected static getTemplateItem(itemObj: MeasureInfo): TemplateItem {
     const valid = this.checkMeasureObject(itemObj);
     if (!valid) {
@@ -362,32 +352,32 @@ abstract class MetroTemplate {
         top: -1,
         bottom: -1,
       },
-      layoutCache: null,
+      layoutCache: new RectCache(),
     }
   }
 
   private static checkMeasureObject(obj: object): boolean {
     let result = true;
-    const errorLog = (errorInfo) => {
+    const errorLog = (errorInfo: any) => {
       console.error(TAG, "measure obj check error: ", errorInfo, ". raw object", obj);
     }
     for (let key in measureObjectDefine) {
-      const defineInfo = measureObjectDefine[key];
-      if (typeof obj[key] == "undefined") {
+      const defineInfo = (measureObjectDefine as any)[key];
+      if (typeof (obj as any)[key] == "undefined") {
         if (typeof defineInfo.default != "undefined") {
-          obj[key] = typeof defineInfo.default == "function" ? defineInfo.default() : defineInfo.default;
+          (obj as any)[key] = typeof defineInfo.default == "function" ? defineInfo.default() : defineInfo.default;
         }
       }
-      if (checkType(obj[key], defineInfo.type)) {
+      if (checkType((obj as any)[key], defineInfo.type)) {
         if (typeof defineInfo.validator != "undefined") {
-          if (!defineInfo.validator(obj[key], errorLog)) {
+          if (!defineInfo.validator((obj as any)[key], errorLog)) {
             result = false;
             break;
           }
         }
       } else {
         result = false;
-        errorLog(`prop ${key} expected ${getTypeName(defineInfo.type)} value, got ${toRawType(obj[key])}`)
+        errorLog(`prop ${key} expected ${getTypeName(defineInfo.type)} value, got ${toRawType((obj as any)[key])}`)
         break;
       }
     }

package/utils/JsViewEngineWidget/TemplateParser/TemplateItemAdder.ts

@@ -1,5 +1,5 @@
 
-import { MetroTemplate, TemplateItem } from "./MetroTemplate";
+import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate";
 import { HORIZONTAL } from "../WidgetCommon";
 import { METRO_WIDGET_CONST } from "../MetroWidget/Const";
 class TemplateItemAdder {
@@ -59,13 +59,13 @@ class TemplateItemAdder {
     if (
       this._CurIndex < this._Data.length &&
       (!cur_item ||
-        cur_item[this._Key] >= (this._CurPage - 1) * this._PageRange)
+        (cur_item as any)[this._Key] >= (this._CurPage - 1) * this._PageRange)
     ) {
       while (this._CurIndex < this._Data.length) {
         try {
           let { templateObj } = this.addDataToTemplate(this._Data, this._CurIndex);
           this._CurIndex++;
-          if (templateObj[this._Key] >= (this._CurPage + page_num) * this._PageRange) {
+          if ((templateObj as any)[this._Key] >= (this._CurPage + page_num) * this._PageRange) {
             this._CurPage += page_num;
             break;
           }
@@ -101,7 +101,7 @@ class TemplateItemAdder {
       try {
         let { templateObj } = this.addDataToTemplate(this._Data, this._CurIndex);
         this._CurIndex++;
-        if (templateObj[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+        if ((templateObj as any)[this._Key] >= (this._CurPage + 1) * this._PageRange) {
           this._CurPage++;
         }
       } catch (e) {
@@ -131,7 +131,7 @@ class TemplateItemAdder {
         try {
           let { templateObj } = this.addDataToTemplate(this._Data, this._CurIndex);
           cur_id = templateObj.id;
-          if (templateObj[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+          if ((templateObj as any)[this._Key] >= (this._CurPage + 1) * this._PageRange) {
             this._CurPage++;
           }
           this._CurIndex++;
@@ -167,7 +167,7 @@ class TemplateItemAdder {
           targetItem = templateObj;
         }
         this._CurIndex++;
-        if (templateObj[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+        if ((templateObj as any)[this._Key] >= (this._CurPage + 1) * this._PageRange) {
           this._CurPage++;
         }
       } catch (e) {

package/utils/JsViewEngineWidget/WidgetCommon.ts

@@ -5,6 +5,12 @@
  * @LastEditTime: 2022-12-01 16:49:21
  * @Description: file content
  */
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+
+export const getCurFrameCount = () => {
+  return Forge.sFrameCount.count;
+}
+
 export class BaseDispatcher {
   private _Component: any;
 
@@ -92,8 +98,7 @@ export const SlideStyle = {
   endBoundaryProtect: 2,
 };
 
-export const VERTICAL = Symbol("vertical");
-export const HORIZONTAL = Symbol("horizontal");
+export { VERTICAL, HORIZONTAL } from "../JsViewVueTools/ConstSymbol";
 
 const defaultSpeed = 1.5;
 const defaultEasing = "";
@@ -155,8 +160,12 @@ export class WholePageSlide extends SlideSetting {
  * @constructor SeamlessSlide
  * @extends SlideSetting
  * @param {Object} settings 设置，结构为{
- *                                      startPercent: 左/上侧触发滚动的比例
- *                                      endPercennt: 右/下侧触发滚动的比例
+ *                                      startPercent: 左/上侧触发滚动的比例 0-1
+ *                                      endPercennt: 右/下侧触发滚动的比例 0-1
+ *                                      headRange: 左/上按键触发滚动的区域比例 0-1
+ *                                      tailRange: 右/下按键触发滚动的区域比例 0-1
+ *                                      headSafeArea: 保证头部item完整显示的安全区域大小
+ *                                      tailSafeArea: 保证尾部item完整显示的安全区域大小
  *                                      speed: 滚动速度, 像素/毫秒 
  *                                      easing: 滚动动画的easing
  *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度
@@ -167,10 +176,16 @@ export class SeamlessSlide extends SlideSetting {
   public readonly StartPercent: number;
   public readonly EndPercent: number;
   public readonly FixFirstPage: boolean;
+  public readonly HeadSafeArea: number;
+  public readonly TailSafeArea: number;
 
   constructor({
     startPercent = 0.2,
     endPercent = 0.8,
+    headRange = undefined,
+    tailRange = undefined,
+    headSafeArea = 0.1,
+    tailSafeArea = 0.1,
     speed = defaultSpeed,
     duration = null,
     easing = defaultEasing,
@@ -180,6 +195,20 @@ export class SeamlessSlide extends SlideSetting {
     super(SlideSetting.Type.SEAMLESS, speed, duration, easing, boundaryProtect);
     this.StartPercent = startPercent;
     this.EndPercent = endPercent;
+    if (typeof headRange !== "undefined") {
+      this.StartPercent = headRange;
+    }
+    if (typeof tailRange !== "undefined") {
+      this.EndPercent = 1 - tailRange;
+    }
+
+    if (this.StartPercent < 0 || this.StartPercent > 1 || this.EndPercent < 0 || this.EndPercent > 1) {
+      console.error(`SeamlessSlideSetting error: invalide value, startPercent(${this.StartPercent}) and endPercent(${this.EndPercent}) must between 0 and 1.`);
+      this.StartPercent = 0.3;
+      this.EndPercent = 0.7;
+    }
+    this.HeadSafeArea = headSafeArea;
+    this.TailSafeArea = tailSafeArea;
     this.FixFirstPage = fixFirstPage;
   }
 }
@@ -224,4 +253,4 @@ export const FocusMoveType = {
   ROW_FIND_NEAR: 0x00000001 << 3,
 };
 
-export const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";
+export const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";