@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -1,18 +1,30 @@
-import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate"
-import { VERTICAL, HORIZONTAL, FocusMoveType, getCurFrameCount } from "../WidgetCommon";
+import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate";
+import {
+  VERTICAL,
+  HORIZONTAL,
+  FocusMoveType,
+  getCurFrameCount,
+} from "../WidgetCommon";
 
 const TAG = "ListMetroTemplate";
 
 /** 单行/单列 */
 class ListMetroTemplate extends MetroTemplate {
-  constructor(direction: Symbol, lineMax: number, pageSize: number, layoutType: string) {
-    super(direction, lineMax, pageSize, layoutType, false);
+  constructor(
+    direction: Symbol,
+    lineMax: number,
+    pageSize: number,
+    layoutType: string,
+    supportHistoryPath: boolean,
+    errorLogger: Function
+  ) {
+    super(direction, lineMax, pageSize, layoutType, false, errorLogger);
   }
 
-  public calculateNeighborWhenAddStop(): void { }
+  public calculateNeighborWhenAddStop(): void {}
 
   public addItemInner(itemObj: MeasureInfo): TemplateItem {
-    const templateItem = MetroTemplate.getTemplateItem(itemObj);
+    const templateItem = this.getTemplateItem(itemObj);
     this._addTemplateItem(templateItem);
     this.tailItemIndex = templateItem.index;
     return templateItem;
@@ -21,7 +33,10 @@ class ListMetroTemplate extends MetroTemplate {
   private _addTemplateItem(templateItem: TemplateItem): void {
     let sizeKey = this.direction == VERTICAL ? "width" : "height";
     if ((templateItem as any)[sizeKey] > this.lineMax) {
-      throw new Error(`item size is ${templateItem.width}x${templateItem.height}, large than lineMax ${this.lineMax}`);
+      this.errorLogger(TAG, "parse template error");
+      throw new Error(
+        `item size is ${templateItem.width}x${templateItem.height}, large than lineMax ${this.lineMax}`
+      );
     }
 
     const preItem = this.getItemByIndex(this.size - 1);
@@ -31,7 +46,9 @@ class ListMetroTemplate extends MetroTemplate {
       //position
       if (this.layoutType == "relative") {
         templateItem.left = 0;
-        templateItem.top = preItem ? preItem.top + preItem.height + preItem.marginBottom : 0;
+        templateItem.top = preItem
+          ? preItem.top + preItem.height + preItem.marginBottom
+          : 0;
       }
       //neighbor
       if (preItem) {
@@ -41,15 +58,19 @@ class ListMetroTemplate extends MetroTemplate {
     } else {
       if (this.layoutType == "relative") {
         templateItem.top = 0;
-        templateItem.left = preItem ? preItem.left + preItem.width + preItem.marginRight : 0;
+        templateItem.left = preItem
+          ? preItem.left + preItem.width + preItem.marginRight
+          : 0;
       }
       if (preItem) {
         templateItem.neighborIndexList.left.push(preItem.index);
         preItem.neighborIndexList.right.push(templateItem.index);
       }
     }
-    templateItem.centerXPos = Math.floor(templateItem.left + templateItem.width / 2) - 1;
-    templateItem.centerYPos = Math.floor(templateItem.top + templateItem.height / 2) - 1;
+    templateItem.centerXPos =
+      Math.floor(templateItem.left + templateItem.width / 2) - 1;
+    templateItem.centerYPos =
+      Math.floor(templateItem.top + templateItem.height / 2) - 1;
 
     //分页相关的计算
     let curPageNumber = 0;
@@ -63,8 +84,9 @@ class ListMetroTemplate extends MetroTemplate {
         positionKey = "top";
         sizeKey = "height";
       }
-      const curPageStart =
-        (this.templateList as any)[curPageHeadIndex][positionKey];
+      const curPageStart = (this.templateList as any)[curPageHeadIndex][
+        positionKey
+      ];
       if (
         (templateItem as any)[positionKey] + (templateItem as any)[sizeKey] >
         curPageStart + this.pageSize
@@ -79,8 +101,12 @@ class ListMetroTemplate extends MetroTemplate {
     templateItem.pageHeadIndex = curPageHeadIndex;
   }
 
-  public getNextItem(baseId: number, vOffset: number,
-    hOffset: number, moveType: number): TemplateItem | null {
+  public getNextItem(
+    baseId: number,
+    vOffset: number,
+    hOffset: number,
+    moveType: number
+  ): TemplateItem | null {
     const item = this.getItemById(baseId) as any;
     if (item) {
       let neighborDirection: "left" | "right" | "bottom" | "top" | null = null;
@@ -99,13 +125,17 @@ class ListMetroTemplate extends MetroTemplate {
       }
       if (neighborDirection !== null) {
         if (item.neighborIndexList[neighborDirection].length === 0) return null;
-        let target = this.getItemByIndex(item.neighborIndexList[neighborDirection][0]);
+        let target = this.getItemByIndex(
+          item.neighborIndexList[neighborDirection][0]
+        );
         while (target) {
           if (target.focusable) {
             break;
           } else {
             if (target.neighborIndexList[neighborDirection].length > 0) {
-              target = this.getItemByIndex(target.neighborIndexList[neighborDirection][0]);
+              target = this.getItemByIndex(
+                target.neighborIndexList[neighborDirection][0]
+              );
             } else {
               return null;
             }
@@ -117,21 +147,31 @@ class ListMetroTemplate extends MetroTemplate {
     return null;
   }
 
-  public getVisibleItemList(visibleStart: number, visibleEnd: number,
-    baseId: number): [number, number] {
+  public getVisibleItemList(
+    visibleStart: number,
+    visibleEnd: number,
+    baseId: number
+  ): [number, number] {
     const positionKey = this.direction == VERTICAL ? "top" : "left";
     const sizeKey = this.direction == VERTICAL ? "height" : "width";
     //template is empty
-    if (this.size == 0) { return [-1, -1]; }
+    if (this.size == 0) {
+      return [-1, -1];
+    }
     const lastItem = this.templateList[this.templateList.length - 1];
     // invalid visible range
-    if (visibleStart >= visibleEnd || visibleEnd < 0 || visibleStart >= lastItem[positionKey] + lastItem[sizeKey]) {
-      return [-1, -1]
+    if (
+      visibleStart >= visibleEnd ||
+      visibleEnd < 0 ||
+      visibleStart >= lastItem[positionKey] + lastItem[sizeKey]
+    ) {
+      return [-1, -1];
     }
 
     let item = this.getItemById(baseId);
     const startIndex = item ? item.index : Math.round(this.size / 2);
-    let start = -1, end = -1;
+    let start = -1,
+      end = -1;
     let index = startIndex;
 
     //forward
@@ -180,9 +220,15 @@ class ListMetroTemplate extends MetroTemplate {
     i.pathHistory.bottom = -1;
   }
 
-  public updateItemSize(index: number, newSize: { width: number, height: number }): void {
+  public updateItemSize(
+    index: number,
+    newSize: { width: number; height: number }
+  ): void {
     const item = this.templateList[index];
-    if (!item || (item.width == newSize.width && item.height == newSize.height)) {
+    if (
+      !item ||
+      (item.width == newSize.width && item.height == newSize.height)
+    ) {
       return;
     }
     const needChangeList = this.templateList.splice(index);
@@ -204,9 +250,37 @@ class ListMetroTemplate extends MetroTemplate {
         width: i.width,
         height: i.height,
         frameCount: getCurFrameCount(),
-      })
+      });
+    }
+  }
+
+  public removeItemTo(index: number): void {
+    if (index < 0 || index >= this.templateList.length) {
+      return;
+    }
+    this.templateList.splice(index);
+    const lastItem = this.templateList[this.templateList.length - 1];
+    if (this.direction === VERTICAL) {
+      lastItem.neighborIndexList.bottom = [];
+      lastItem.tmpNeighborIndexList.bottom = [];
+      lastItem.pathHistory.bottom = -1;
+    } else {
+      lastItem.neighborIndexList.right = [];
+      lastItem.tmpNeighborIndexList.right = [];
+      lastItem.pathHistory.right = -1;
+    }
+    for (let i = this.idsMap.length - 1; i >= 0; --i) {
+      if (this.idsMap[i] >= index) {
+        this.idsMap.splice(i, 1);
+      }
+    }
+    this.tailItemIndex = this.templateList.length - 1;
+    for (let uid in this.uidMap) {
+      if ((this.uidMap as any)[uid].index >= index) {
+        delete (this.uidMap as any)[uid];
+      }
     }
   }
 }
 
-export { ListMetroTemplate };
+export { ListMetroTemplate };

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -123,7 +123,7 @@ const measureObjectDefine = {
   },
 }
 
-interface NeighborInfo {
+export interface NeighborInfo {
   left: Array<number>,
   top: Array<number>,
   bottom: Array<number>,
@@ -181,6 +181,22 @@ export interface MeasureInfo {
   uid?: string,
 }
 
+/** 判断两个模板 item 的内容矩形是否相交且面积大于 0（不含 margin） */
+function templateItemContentRectsOverlap(a: TemplateItem, b: TemplateItem): boolean {
+  return (
+    a.left < b.left + b.width &&
+    b.left < a.left + a.width &&
+    a.top < b.top + b.height &&
+    b.top < a.top + a.height
+  );
+}
+
+function formatTemplateItemRectForLog(item: TemplateItem, uidHint?: string): string {
+  const uid = item.uid != null && item.uid !== "" ? item.uid : uidHint;
+  const uidPart = uid != null && uid !== "" ? ` uid=${JSON.stringify(uid)}` : "";
+  return `index=${item.index} id=${item.id}${uidPart} rect=(left=${item.left}, top=${item.top}, width=${item.width}, height=${item.height})`;
+}
+
 abstract class MetroTemplate {
   protected supportHistoryPath: boolean;
   protected idsMap: Array<number>;
@@ -192,8 +208,10 @@ abstract class MetroTemplate {
   public readonly layoutType: string;
   protected tailItemIndex: number = -1;
   private cachedLayoutRange: Array<[number, number]> = [];
+  protected errorLogger: Function = console.error;
+  private debugEnabled: boolean = false;
 
-  constructor(direction: Symbol, lineMax: number, pageSize: number, layoutType: string, supportHistoryPath: boolean) {
+  constructor(direction: Symbol, lineMax: number, pageSize: number, layoutType: string, supportHistoryPath: boolean, errorLogger: Function) {
     this.idsMap = [];
     this.templateList = [];
     this.direction = direction;
@@ -202,6 +220,9 @@ abstract class MetroTemplate {
     this.pageSize = pageSize;
     this.supportHistoryPath = supportHistoryPath;
     this.uidMap = {};
+    if (errorLogger) {
+      this.errorLogger = errorLogger;
+    }
   }
 
   get size(): number {
@@ -261,6 +282,30 @@ abstract class MetroTemplate {
 
   public abstract addItemInner(itemObj: MeasureInfo): TemplateItem;
 
+  /**
+   * 调试开关：开启后每次 addItem 会检查新加入的 item 与之前所有 item 的内容矩形（不含 margin）是否重叠，重叠则 errorLogger 报错。
+   */
+  public enableDebug(enable: boolean): void {
+    this.debugEnabled = enable;
+  }
+
+  private debugReportOverlapIfNewItemOverlapsExisting(newItem: TemplateItem, uidHint?: string): void {
+    if (!this.debugEnabled) {
+      return;
+    }
+    for (let i = 0; i < newItem.index; i++) {
+      const prev = this.templateList[i];
+      if (templateItemContentRectsOverlap(newItem, prev)) {
+        this.errorLogger(
+          TAG,
+          "MetroWidget overlap check error:",
+          "newItem", formatTemplateItemRectForLog(newItem, uidHint),
+          "prev", formatTemplateItemRectForLog(prev),
+        );
+      }
+    }
+  }
+
   public addItem(itemObj: MeasureInfo): TemplateItem {
     const item = this.addItemInner(itemObj);
     //检查uid
@@ -275,6 +320,7 @@ abstract class MetroTemplate {
       height: item.height,
       frameCount: getCurFrameCount(),
     })
+    this.debugReportOverlapIfNewItemOverlapsExisting(item, itemObj.uid);
     return item;
   }
 
@@ -311,9 +357,10 @@ abstract class MetroTemplate {
     return this.tailItemIndex;
   }
 
-  protected static getTemplateItem(itemObj: MeasureInfo): TemplateItem {
+  protected getTemplateItem(itemObj: MeasureInfo): TemplateItem {
     const valid = this.checkMeasureObject(itemObj);
     if (!valid) {
+      this.errorLogger(TAG, "check measure object failed.");
       throw new Error("check measure object failed.");
     }
 
@@ -356,10 +403,10 @@ abstract class MetroTemplate {
     }
   }
 
-  private static checkMeasureObject(obj: object): boolean {
+  private checkMeasureObject(obj: object): boolean {
     let result = true;
     const errorLog = (errorInfo: any) => {
-      console.error(TAG, "measure obj check error: ", errorInfo, ". raw object", obj);
+      this.errorLogger(TAG, "measure obj check error: ", errorInfo, ". raw object", obj);
     }
     for (let key in measureObjectDefine) {
       const defineInfo = (measureObjectDefine as any)[key];
@@ -383,6 +430,8 @@ abstract class MetroTemplate {
     }
     return result;
   }
+
+  public abstract removeItemTo(index: number): void;
 }
 
 export {

package/utils/JsViewEngineWidget/TemplateParser/TemplateItemAdder.ts

@@ -1,4 +1,3 @@
-
 import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate";
 import { HORIZONTAL } from "../WidgetCommon";
 import { METRO_WIDGET_CONST } from "../MetroWidget/Const";
@@ -13,6 +12,7 @@ class TemplateItemAdder {
   private _Key: string;
   private _ID: number;
   private _OnAddDone: Function | null;
+  private _ErrorLogger: Function = console.error;
 
   constructor(
     template_parser: MetroTemplate,
@@ -22,6 +22,7 @@ class TemplateItemAdder {
     side_effect: Function,
     id: number,
     onAddDone: Function | null = null,
+    errorLogger: Function | null
   ) {
     this._MetroTemplate = template_parser;
     this._Data = data;
@@ -31,11 +32,11 @@ class TemplateItemAdder {
     this._CurPage = 0;
     this._SideEffect = side_effect;
     this._OnAddDone = onAddDone;
-    this._Key =
-      this._MetroTemplate.direction === HORIZONTAL
-        ? "left"
-        : "top";
+    this._Key = this._MetroTemplate.direction === HORIZONTAL ? "left" : "top";
     this._ID = id;
+    if (errorLogger) {
+      this._ErrorLogger = errorLogger;
+    }
   }
 
   private addDataToTemplate(data: Array<object>, index: number) {
@@ -44,9 +45,12 @@ class TemplateItemAdder {
 
     //过期属性警告
     if (typeof measureObj.doSlide !== "undefined") {
-      measureObj.itemSlide = measureObj.doSlide ?
-        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS : METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT;
-      console.warn("MetroWidget: doSlide will be deprecated soon. use itemSlide instead.");
+      measureObj.itemSlide = measureObj.doSlide
+        ? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+        : METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT;
+      console.warn(
+        "MetroWidget: doSlide will be deprecated soon. use itemSlide instead."
+      );
     }
 
     let templateItem = this._MetroTemplate.addItem(measureObj);
@@ -54,8 +58,14 @@ class TemplateItemAdder {
     return { templateObj: templateItem, measureObj: measureObj };
   }
 
-  public tryAddItem(cur_item: TemplateItem | null = null, page_num: number = 1) {
-    if (!this._Data || this._Data.length <= 0) { return; }
+  public tryAddItem(
+    cur_item: TemplateItem | null = null,
+    page_num: number = 1,
+    onAddDone?: Function
+  ) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
 
     let added = false;
     if (
@@ -65,14 +75,20 @@ class TemplateItemAdder {
     ) {
       while (this._CurIndex < this._Data.length) {
         try {
-          let { templateObj } = this.addDataToTemplate(this._Data, this._CurIndex);
+          let { templateObj } = this.addDataToTemplate(
+            this._Data,
+            this._CurIndex
+          );
           this._CurIndex++;
-          if ((templateObj as any)[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;
           }
         } catch (e) {
-          console.error(
+          this._ErrorLogger(
             `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data: `,
             this._Data
           );
@@ -82,35 +98,48 @@ class TemplateItemAdder {
       this._MetroTemplate.calculateNeighborWhenAddStop();
       added = true;
     }
-    this._OnAddDone?.();
+    if (onAddDone) {
+      onAddDone()
+    } else {
+      this._OnAddDone?.();
+    }
     // 添加完成需要计算neighbor
     return added;
   }
 
-  tryAddItemByPosition(position: number) {
-    if (!this._Data || this._Data.length <= 0) { return; }
+  tryAddItemByPosition(position: number, onAddDone?: Function) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
 
     const page_num = Math.ceil(position / this._PageRange + 1);
     if (page_num > this._CurPage) {
-      this.tryAddItem(null, page_num - this._CurPage);
+      this.tryAddItem(null, page_num - this._CurPage, onAddDone);
     }
-    this._OnAddDone?.();
   }
 
-  tryAddItemByIndex(index: number) {
-    if (!this._Data || this._Data.length <= 0) { return; }
+  tryAddItemByIndex(index: number, onAddDone?: Function) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     let _index = Math.min(index, this._Data.length - 1);
     let added = false;
     while (this._CurIndex <= _index) {
       added = true;
       try {
-        let { templateObj } = this.addDataToTemplate(this._Data, this._CurIndex);
+        let { templateObj } = this.addDataToTemplate(
+          this._Data,
+          this._CurIndex
+        );
         this._CurIndex++;
-        if ((templateObj as any)[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+        if (
+          (templateObj as any)[this._Key] >=
+          (this._CurPage + 1) * this._PageRange
+        ) {
           this._CurPage++;
         }
       } catch (e) {
-        console.error(
+        this._ErrorLogger(
           `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
           this._Data
         );
@@ -121,12 +150,13 @@ class TemplateItemAdder {
       this._MetroTemplate.calculateNeighborWhenAddStop();
     }
     //再添加一屏
-    this.tryAddItem(this._MetroTemplate.getItemByIndex(index), 2);
-    this._OnAddDone?.();
+    this.tryAddItem(this._MetroTemplate.getItemByIndex(index), 2, onAddDone);
   }
 
-  tryAddItemById(id: number) {
-    if (!this._Data || this._Data.length <= 0) { return; }
+  tryAddItemById(id: number, onAddDone?: Function) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     let _id = Math.min(id, this._Data.length - 1); // id小于等于index, 因此为了避免过界取小值
     const last_id = this._MetroTemplate.focusableSize - 1;
     if (last_id < _id) {
@@ -135,14 +165,20 @@ class TemplateItemAdder {
       while (cur_id < _id && this._CurIndex < this._Data.length) {
         added = true;
         try {
-          let { templateObj } = this.addDataToTemplate(this._Data, this._CurIndex);
+          let { templateObj } = this.addDataToTemplate(
+            this._Data,
+            this._CurIndex
+          );
           cur_id = templateObj.id;
-          if ((templateObj as any)[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+          if (
+            (templateObj as any)[this._Key] >=
+            (this._CurPage + 1) * this._PageRange
+          ) {
             this._CurPage++;
           }
           this._CurIndex++;
         } catch (e) {
-          console.error(
+          this._ErrorLogger(
             `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
             this._Data
           );
@@ -154,12 +190,13 @@ class TemplateItemAdder {
       }
     }
     //再添加一屏
-    this.tryAddItem(this._MetroTemplate.getItemById(id), 2);
-    this._OnAddDone?.();
+    this.tryAddItem(this._MetroTemplate.getItemById(id), 2, onAddDone);
   }
 
-  tryAddItemByUid(uid: string) {
-    if (!this._Data || this._Data.length <= 0) { return; }
+  tryAddItemByUid(uid: string, onAddDone?: Function) {
+    if (!this._Data || this._Data.length <= 0) {
+      return;
+    }
     if (this._MetroTemplate.getItemByUid(uid)) {
       //已经添加
       return;
@@ -169,16 +206,22 @@ class TemplateItemAdder {
     while (!targetItem && this._CurIndex < this._Data.length) {
       added = true;
       try {
-        let { templateObj, measureObj } = this.addDataToTemplate(this._Data, this._CurIndex);
+        let { templateObj, measureObj } = this.addDataToTemplate(
+          this._Data,
+          this._CurIndex
+        );
         if (measureObj.uid == uid) {
           targetItem = templateObj;
         }
         this._CurIndex++;
-        if ((templateObj as any)[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+        if (
+          (templateObj as any)[this._Key] >=
+          (this._CurPage + 1) * this._PageRange
+        ) {
           this._CurPage++;
         }
       } catch (e) {
-        console.error(
+        this._ErrorLogger(
           `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
           this._Data
         );
@@ -189,15 +232,40 @@ class TemplateItemAdder {
       this._MetroTemplate.calculateNeighborWhenAddStop();
     }
     if (targetItem) {
-      this.tryAddItem(targetItem, 2);
+      this.tryAddItem(targetItem, 2, onAddDone);
+    } else {
+      if (onAddDone) {
+        onAddDone()
+      } else {
+        this._OnAddDone?.();
+      }
     }
   }
 
   updateData(data: Array<object>) {
     this._Data = data;
   }
+
+  removeItemTo(index: number) {
+    if (index < 0 || index >= this._Data.length) {
+      return;
+    }
+    this._Data.splice(index);
+    if (index >= this._CurIndex) {
+      //还未添加到模板中，只更新data即可
+      return;
+    }
+    this._MetroTemplate.removeItemTo(index);
+    this._CurIndex = index;
+    const lastItem = this._MetroTemplate.getItemByIndex(-1);
+    if (lastItem) {
+      this._CurPage = Math.floor(
+        (this._MetroTemplate.direction === HORIZONTAL
+          ? lastItem.left + lastItem.width
+          : lastItem.top + lastItem.height) / this._PageRange
+      );
+    }
+  }
 }
 
-export {
-  TemplateItemAdder,
-}
+export { TemplateItemAdder };