@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/utils/JsViewEngineWidget/TemplateParser/Fence.ts

@@ -0,0 +1,135 @@
+interface GapInfo {
+  readonly GapStart: number,
+  readonly GapEnd: number,
+}
+
+class Fence {
+  /**
+   * MetroLayout用于计算使用区域的Fence(栅栏)
+   *
+   * @private
+   * @constructor _Fence
+   * @memberof Forge.MetroLayout
+   * @param {int} takenStartPos     栅栏使用区域的起始位置
+   * @param {int} width               栅栏使用区域的宽度
+   * @param {int} fenceWidth         栅栏的总宽度
+   * @param {int} offsetAhead        栅栏的横向位置
+   * */
+  private Gaps: Array<GapInfo>;
+  private FenceTotalWidth: number;
+  private AheadOffsetInner: number;
+
+  constructor(takenStartPos: number, width: number, fenceWidth: number, offsetAhead: number) {
+    this.Gaps = [{ GapStart: 0, GapEnd: fenceWidth - 1 }];
+    this.FenceTotalWidth = fenceWidth;
+    this.AheadOffsetInner = offsetAhead;
+    if (width > 0) this.SplitGap(0, takenStartPos, width);
+  }
+
+  get AheadOffset(): number {
+    return this.AheadOffsetInner;
+  }
+
+  /**
+   * 查询栅栏是否能放下给定宽度的方块
+   *
+   * @public
+   * @func HasGapFor
+   * @memberof Forge.MetroLayout._Fence
+   * @instance
+   * @param {int} width
+   * @return {Object} 格式为{startPos: 栅栏空隙的起始位置}，null为没有能容下的空隙。
+   * */
+  HasGapFor(width: number): GapInfo | null {
+    for (let i = 0; i < this.Gaps.length; i++) {
+      if (this.Gaps[i].GapEnd - this.Gaps[i].GapStart + 1 >= width) {
+        return this.Gaps[i];
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * 标记栅栏空隙被占用
+   *
+   * @public
+   * @func MarkGapUsed
+   * @memberof Forge.MetroLayout._Fence
+   * @instance
+   * @param {int} startPos       占用块的起始位置
+   * @param {int} width           占用快的宽度
+   * @return {int} 剩余栅栏的个数
+   * */
+  MarkGapUsed(startPos: number, width: number): number {
+    if (width <= 0) return this.Gaps.length;
+
+    const end_pos = startPos + width - 1;
+    let gapIdx = -1;
+    for (let i = 0; i < this.Gaps.length; i++) {
+      if (
+        this.Gaps[i].GapStart <= startPos &&
+        this.Gaps[i].GapEnd >= end_pos
+      ) {
+        gapIdx = i;
+        break;
+      }
+    }
+
+    if (gapIdx === -1) {
+      return 0; // 区域完全重复，无法找到新区域
+    }
+
+    this.SplitGap(gapIdx, startPos, width);
+
+    return this.Gaps.length;
+  }
+
+  private SplitGap(gapIdx: number, takerStartPos: number, takerWidth: number) {
+    const editGap = this.Gaps.splice(gapIdx, 1)[0];
+    const takerEndPos = takerStartPos + takerWidth - 1;
+
+    if (
+      takerStartPos < editGap.GapStart ||
+      takerEndPos > editGap.GapEnd
+    ) {
+      console.log("ERROR in split Fence Gap, range overflow");
+    }
+
+    // Insert end side gap
+    if (takerEndPos !== editGap.GapEnd) {
+      this.Gaps.splice(gapIdx, 0, {
+        GapStart: takerEndPos + 1,
+        GapEnd: editGap.GapEnd,
+      });
+    }
+
+    // Insert start side gap
+    if (takerStartPos !== editGap.GapStart) {
+      this.Gaps.splice(gapIdx, 0, {
+        GapStart: editGap.GapStart,
+        GapEnd: takerStartPos - 1,
+      });
+    }
+  }
+
+  /**
+   * 标记栅栏空隙被占用
+   *
+   * @public
+   * @func Fork
+   * @memberof Forge.MetroLayout._Fence
+   * @instance
+   * @param {int} new_ahead_offset 新栅栏的起点位置
+   * @return {Forge.MetroLayout._Fence} 复制出来的Fence
+   * */
+  Fork(new_ahead_offset: number): Fence {
+    const newFence = new Fence(0, 0, 0, 0);
+    newFence.Gaps = JSON.parse(JSON.stringify(this.Gaps));
+    newFence.FenceTotalWidth = this.FenceTotalWidth;
+    newFence.AheadOffsetInner = new_ahead_offset;
+
+    return newFence;
+  }
+}
+export { Fence, GapInfo }

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -0,0 +1,177 @@
+import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate"
+import { VERTICAL, HORIZONTAL, FocusMoveType } from "../WidgetCommon";
+
+const TAG = "ListMetroTemplate";
+
+/** 单行/单列 */
+class ListMetroTemplate extends MetroTemplate {
+  constructor(direction: Symbol, lineMax: number, pageSize: number, layoutType: string) {
+    super(direction, lineMax, pageSize, layoutType, false);
+  }
+
+  public calculateNeighborWhenAddStop(): void { }
+
+  public addItem(itemObj: MeasureInfo): TemplateItem {
+    const templateItem = MetroTemplate.getTemplateItem(itemObj);
+    this._addTemplateItem(templateItem);
+    return templateItem;
+  }
+
+  private _addTemplateItem(templateItem: TemplateItem): void {
+    let sizeKey = this.direction == VERTICAL ? "width" : "height";
+    if (templateItem[sizeKey] > this.lineMax) {
+      throw new Error(`item size is ${templateItem.width}x${templateItem.height}, large than lineMax ${this.lineMax}`);
+    }
+
+    const preItem = this.getItemByIndex(this.size - 1);
+    this.addTemplateItem(templateItem);
+
+    if (this.direction == VERTICAL) {
+      //position
+      if (this.layoutType == "relative") {
+        templateItem.left = 0;
+        templateItem.top = preItem ? preItem.top + preItem.height + preItem.marginBottom : 0;
+      }
+      //neighbor
+      if (preItem) {
+        templateItem.neighborIndexList.top.push(preItem.index);
+        preItem.neighborIndexList.bottom.push(templateItem.index);
+      }
+    } else {
+      if (this.layoutType == "relative") {
+        templateItem.top = 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;
+
+    //分页相关的计算
+    let curPageNumber = 0;
+    let curPageHeadIndex = 0;
+    if (preItem) {
+      curPageNumber = preItem.pageNumber;
+      curPageHeadIndex = preItem.pageHeadIndex;
+      let positionKey = "left";
+      let sizeKey = "width";
+      if (this.direction === VERTICAL) {
+        positionKey = "top";
+        sizeKey = "height";
+      }
+      const curPageStart =
+        this.templateList[curPageHeadIndex][positionKey];
+      if (
+        templateItem[positionKey] + templateItem[sizeKey] >
+        curPageStart + this.pageSize
+      ) {
+        //新的页
+        curPageNumber++;
+        curPageHeadIndex = templateItem.index;
+      }
+    }
+
+    templateItem.pageNumber = curPageNumber;
+    templateItem.pageHeadIndex = curPageHeadIndex;
+  }
+
+  public getNextItem(baseId: number, vOffset: number,
+    hOffset: number, moveType: number): TemplateItem | null {
+    const item = this.getItemById(baseId);
+    if (item) {
+      let neighborDirection: string | null = null;
+      if (this.direction == VERTICAL) {
+        if (vOffset > 0) {
+          neighborDirection = "bottom";
+        } else if (vOffset < 0) {
+          neighborDirection = "top";
+        }
+      } else {
+        if (hOffset > 0) {
+          neighborDirection = "right";
+        } else if (hOffset < 0) {
+          neighborDirection = "left";
+        }
+      }
+      if (!neighborDirection) return null;
+      let target = this.getItemByIndex(item.neighborIndexList[neighborDirection]?.[0]);
+      while (target) {
+        if (target.focusable) {
+          break;
+        } else {
+          target = this.getItemByIndex(item.neighborIndexList[neighborDirection]?.[0]);
+        }
+      }
+      return target;
+    }
+    return null;
+  }
+
+  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]; }
+    const lastItem = this.templateList[this.templateList.length - 1];
+    // invalid visible range
+    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 index = startIndex;
+
+    //forward
+    while (index >= 0) {
+      const item = this.getItemByIndex(index);
+      if (!item) break;
+      if (item[positionKey] + item[sizeKey] > visibleStart) {
+        start = item.index;
+      }
+      if (end < 0 && item[positionKey] <= visibleEnd) {
+        end = item.index;
+      }
+      --index;
+    }
+    //backward
+    index = startIndex;
+    const s = this.size;
+    while (index < s) {
+      const item = this.getItemByIndex(index);
+      if (!item) break;
+      if (item[positionKey] <= visibleEnd) {
+        end = item.index;
+      }
+      if (start < 0 && item[positionKey] + item[sizeKey] > visibleStart) {
+        start = item.index;
+      }
+      ++index;
+    }
+    return [start, end];
+  }
+
+  public updateItemSize(index: number, newSize: { width: number, height: number }): void {
+    const needChangeList = this.templateList.splice(index);
+    needChangeList[0].width = newSize.width;
+    needChangeList[0].height = newSize.height;
+    for (let i of needChangeList) {
+      if (i.id >= 0) {
+        this.idsMap.splice(i.id);
+        break;
+      }
+    }
+    for (let i of needChangeList) {
+      this._addTemplateItem(i);
+    }
+  }
+}
+
+export { ListMetroTemplate };

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -0,0 +1,334 @@
+import { checkType, toRawType, getTypeName } from "../CheckType.js";
+
+const TAG = "MetroTemplate";
+
+const measureObjectDefine = {
+  left: {
+    type: Number,
+    default: 0,
+    validator(value: number, errorLogger: Function) {
+      if (Math.round(value) != value) {
+        errorLogger(`prop left value expected integer, got float. value is ${value}`);
+        return false;
+      }
+      return true;
+    }
+  },
+  top: {
+    type: Number,
+    default: 0,
+    validator(value: number, errorLogger: Function) {
+      if (Math.round(value) != value) {
+        errorLogger(`prop top value expected integer, got float. value is ${value}`);
+        return false;
+      }
+      return true;
+    }
+  },
+  width: {
+    type: Number,
+    validator(value: number, errorLogger: Function) {
+      const _v = Math.round(value);
+      if (_v != value) {
+        errorLogger(`prop width value expected integer, got float. value is ${value}`);
+        return false;
+      }
+      if (_v <= 0) {
+        errorLogger(`prop width value must be larger than 0. value is ${value}`);
+        return false;
+      }
+      return true;
+    }
+  },
+  height: {
+    type: Number,
+    validator(value: number, errorLogger: Function) {
+      const _v = Math.round(value);
+      if (_v != value) {
+        errorLogger(`prop height value expected integer, got float. value is ${value}`);
+        return false;
+      }
+      if (_v <= 0) {
+        errorLogger(`prop height value must be larger than 0. value is ${value}`);
+        return false;
+      }
+      return true;
+    }
+  },
+  marginRight: {
+    type: Number,
+    default: 0,
+    validator(value: number, errorLogger: Function) {
+      if (Math.round(value) != value) {
+        errorLogger(`prop marginRight value expected integer, got float. value is ${value}`);
+        return false;
+      }
+      return true;
+    }
+  },
+  marginBottom: {
+    type: Number,
+    default: 0,
+    validator(value: number, errorLogger: Function) {
+      if (Math.round(value) != value) {
+        errorLogger(`prop marginBottom value expected integer, got float. value is ${value}`);
+        return false;
+      }
+      return true;
+    }
+  },
+  focusable: {
+    type: Boolean,
+    default: true,
+  },
+  findNextAnchor: {
+    type: [Object, null],
+    default: null,
+    validator(value, errorLogger) {
+      if (value) {
+        if (!checkType(value.left, Number)) {
+          errorLogger(`findNextAnchor.left expected integer, got ${toRawType(value.left)}. value is ${value.left}`)
+          return false;
+        }
+        if (!checkType(value.top, Number)) {
+          errorLogger(`findNextAnchor.top expected integer, got ${toRawType(value.top)}. value is ${value.top}`)
+          return false;
+        }
+        if (!checkType(value.right, Number)) {
+          errorLogger(`findNextAnchor.right expected integer, got ${toRawType(value.right)}. value is ${value.right}`)
+          return false;
+        }
+        if (!checkType(value.bottom, Number)) {
+          errorLogger(`findNextAnchor.bottom expected integer, got ${toRawType(value.bottom)}. value is ${value.bottom}`)
+          return false;
+        }
+      }
+      return true;
+    }
+  },
+  doSlide: {
+    type: Boolean,
+    default: true,
+  },
+  permanent: {
+    type: Boolean,
+    default: false,
+  },
+  zIndex: {
+    type: Number,
+    default: -1,
+  },
+}
+
+interface NeighborInfo {
+  left: Array<number>,
+  top: Array<number>,
+  bottom: Array<number>,
+  right: Array<number>,
+}
+
+interface FindNextAnchor {
+  left: number,
+  top: number,
+  right: number,
+  bottom: number,
+}
+
+interface TemplateItem {
+  id: number,
+  index: number,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  marginRight: number,
+  marginBottom: number,
+  focusable: boolean,
+
+  centerXPos: number,
+  centerYPos: number,
+  pageNumber: number,
+  pageHeadIndex: number,
+  neighborIndexList: NeighborInfo,
+  tmpNeighborIndexList: NeighborInfo,
+  pathHistory: {
+    left: number,
+    right: number,
+    top: number,
+    bottom: number,
+  }
+  findNextAnchor: FindNextAnchor | null,
+}
+
+interface MeasureInfo {
+  left?: number,
+  top?: number,
+  width: number,
+  height: number,
+  marginRight?: number,
+  marginBottom?: number,
+  focusable?: boolean,
+
+  findNextAnchor?: FindNextAnchor | null,
+  doSlide?: boolean,
+  permanent?: boolean,
+  zIndex?: number | object,
+}
+
+abstract class MetroTemplate {
+  protected supportHistoryPath: boolean;
+  protected idsMap: Array<number>;
+  public templateList: Array<TemplateItem>;
+  public readonly direction: Symbol;
+  public readonly lineMax: number;
+  public readonly pageSize: number;
+  public readonly layoutType: string;
+
+  constructor(direction: Symbol, lineMax: number, pageSize: number, layoutType: string, supportHistoryPath: boolean) {
+    this.idsMap = [];
+    this.templateList = [];
+    this.direction = direction;
+    this.lineMax = lineMax;
+    this.layoutType = layoutType
+    this.pageSize = pageSize;
+    this.supportHistoryPath = supportHistoryPath;
+  }
+
+  get size(): number {
+    return this.templateList.length;
+  }
+
+  get focusableSize(): number {
+    return this.idsMap.length;
+  }
+
+  protected addTemplateItem(item: TemplateItem) {
+    this.templateList.push(item);
+    item.index = this.templateList.length - 1;
+    if (item.focusable) {
+      this.idsMap.push(item.index);
+      item.id = this.idsMap.length - 1;
+    } else {
+      item.id = -1;
+    }
+  }
+
+  public index2Id(index: number): number {
+    const item = this.templateList[index];
+    if (typeof item == "undefined") {
+      console.warn(TAG, "index not exist", index, ", template length", this.templateList.length);
+      return -1;
+    } else {
+      return item.id
+    }
+  }
+
+  public id2Index(id: number): number {
+    const index = this.idsMap[id];
+    if (typeof index == "undefined") {
+      console.warn(TAG, "id not exist", id);
+      return -1;
+    }
+    return index;
+  }
+
+  public getItemById(id: number): TemplateItem | null {
+    return this.getItemByIndex(this.id2Index(id));
+  }
+
+  public getItemByIndex(index: number): TemplateItem | null {
+    const item = index >= 0
+      ? this.templateList[index]
+      : this.templateList[this.templateList.length + index];
+    return item ? item : null;
+  }
+
+  public abstract calculateNeighborWhenAddStop(): void;
+
+  public abstract addItem(itemObj: MeasureInfo): TemplateItem;
+
+  public abstract getNextItem(baseId: number, hOffset: number, vOffset: number, moveType: number): TemplateItem | null;
+
+  public abstract getVisibleItemList(visibleStart: number, visibleEnd: number, baseId: number): [number, number];
+
+  public abstract updateItemSize(index: number,
+    newSize: { width: number, height: number }): void;
+
+  protected static getTemplateItem(itemObj: MeasureInfo): TemplateItem {
+    const valid = this.checkMeasureObject(itemObj);
+    if (!valid) {
+      throw new Error("check measure object failed.");
+    }
+
+    return {
+      id: -1,
+      index: -1,
+      centerXPos: 0, // Set after template be layout
+      centerYPos: 0, // Set after template be layout
+      pageNumber: 0,
+      pageHeadIndex: 0,
+
+      width: itemObj.width,
+      height: itemObj.height,
+      left: itemObj.left ? itemObj.left : 0,
+      top: itemObj.top ? itemObj.top : 0,
+      marginRight: itemObj.marginRight ? itemObj.marginRight : 0,
+      marginBottom: itemObj.marginBottom ? itemObj.marginBottom : 0,
+      focusable: itemObj.focusable ? itemObj.focusable : true,
+      findNextAnchor: itemObj.findNextAnchor ? itemObj.findNextAnchor : null,
+
+      neighborIndexList: {
+        left: [],
+        top: [],
+        right: [],
+        bottom: [],
+      },
+      tmpNeighborIndexList: {
+        left: [],
+        top: [],
+        right: [],
+        bottom: [],
+      },
+      pathHistory: {
+        left: -1,
+        right: -1,
+        top: -1,
+        bottom: -1,
+      },
+    }
+  }
+
+  private static checkMeasureObject(obj: object): boolean {
+    let result = true;
+    const errorLog = (errorInfo) => {
+      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") {
+        if (typeof defineInfo.default != "undefined") {
+          obj[key] = typeof defineInfo.default == "function" ? defineInfo.default() : defineInfo.default;
+        }
+      }
+      if (checkType(obj[key], defineInfo.type)) {
+        if (typeof defineInfo.validator != "undefined") {
+          if (!defineInfo.validator(obj[key], errorLog)) {
+            result = false;
+            break;
+          }
+        }
+      } else {
+        result = false;
+        errorLog(`prop ${key} expected ${getTypeName(defineInfo.type)} value, got ${toRawType(obj[key])}`)
+        break;
+      }
+    }
+    return result;
+  }
+}
+
+export {
+  MeasureInfo,
+  MetroTemplate,
+  TemplateItem,
+}