@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/utils/JsViewEngineWidget/MetroWidget/PageUpdater.ts

@@ -0,0 +1,111 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-06-10 10:17:35
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-06-10 10:17:36
+ * @Description: file content
+ */
+import { MetroTemplate } from "../TemplateParser/MetroTemplate";
+
+export interface PermanentItemInfo {
+  index: number,
+  alreadyShow: boolean,
+}
+
+export class PageUpdater {
+  private tmpRangeSet: Set<number>;
+  private rangeSet: Set<number>;
+  private updateFunc: (renderSet: Set<number>) => void;
+  private count: number = 1;
+
+  constructor(updateFunc: (renderSet: Set<number>) => void) {
+    this.tmpRangeSet = new Set<number>();
+    this.rangeSet = new Set<number>();;
+    this.updateFunc = updateFunc;
+  }
+
+  update(
+    template: MetroTemplate,
+    start: number,
+    end: number,
+    anchorId: number,
+    mergeTmp: boolean,
+    permanentList: Array<PermanentItemInfo> | null,
+    extensionRange: number = 0
+  ) {
+    if (!template || template.size === 0) return;
+    this.count++;
+    const [visibleStart, visibleEnd] = template.getVisibleItemList(
+      start - extensionRange,
+      end + extensionRange,
+      anchorId
+    );
+    const preTmpRangeSet = this.tmpRangeSet;
+    const preRangeSet = this.rangeSet;
+
+    this.rangeSet = new Set();
+    this.tmpRangeSet = new Set();
+    if (visibleStart >= 0 && visibleEnd >= 0) {
+      for (let i = visibleStart; i <= visibleEnd; ++i) {
+        this.rangeSet.add(i);
+      }
+    }
+
+    if (permanentList) {
+      const permanentShowList = permanentList.filter((item: PermanentItemInfo) => {
+        let result = false;
+        if (item.alreadyShow || item.index <= visibleEnd) {
+          item.alreadyShow = true;
+          result = true;
+        }
+        return result;
+      });
+      for (let pItem of permanentShowList) {
+        this.rangeSet.add(pItem.index);
+      }
+    }
+    if (preRangeSet.size > 0) {
+      this.tmpRangeSet = new Set([...this.rangeSet, ...preRangeSet]);
+    }
+    if (mergeTmp) {
+      this.tmpRangeSet = new Set([...this.tmpRangeSet, ...preTmpRangeSet]);
+    }
+
+    const c = this.count;
+    return {
+      apply: () => {
+        if (c == this.count) {
+          this.apply();
+        } else {
+          // console.log("apply expired data")
+        }
+      },
+      applyTmp: () => {
+        if (c == this.count) {
+          this.applyTmp()
+        } else {
+          // console.log("apply tmp expired data")
+        }
+      },
+    }
+  }
+
+  private apply(): void {
+    this.tmpRangeSet.clear();
+    this.updateFunc(this.rangeSet);
+  }
+
+  private applyTmp(): void {
+    if (this.tmpRangeSet.size > 0) {
+      this.updateFunc(this.tmpRangeSet);
+    }
+  }
+
+  public getRange(): Set<number> {
+    return this.rangeSet;
+  }
+
+  public getTmpRange(): Set<number> {
+    return this.tmpRangeSet;
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -0,0 +1,153 @@
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { TemplateItem } from "../TemplateParser/MetroTemplate"
+
+interface RenderItemStyle {
+  zIndex: number,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+};
+
+interface ItemConfig {
+  takeOverSlide: boolean,
+  focusZIndex: number,
+  normalZIndex: number,
+  doSlide: boolean,
+  permanent: boolean,
+}
+
+interface CustomerCallbackMap {
+  onFocus?: (rect: object) => void,
+  onBlur?: () => void,
+  onClick?: () => void,
+  onWidgetEdge?: (rect: object) => void,
+}
+
+export class RenderItem {
+  private divMountedCallback: Array<(div: HTMLDivElement) => void> = [];
+
+  public customerData: object;
+  public templateInfo: TemplateItem;
+  public renderStyle: RenderItemStyle;
+  public itemConfig: ItemConfig;
+
+  public mounted: Ref<boolean> = ref(false);
+  public touchInit: boolean = false;
+  public rootDiv: HTMLDivElement | null = null;
+
+  private customerCallbackMap: CustomerCallbackMap = {};
+  private onRef: (() => void) | null;
+  public readonly registerObj: object;
+  public readonly query: object;
+
+  constructor(
+    templateInfo: TemplateItem,
+    customerData: object,
+    renderStyle: RenderItemStyle,
+    itemConfig: ItemConfig,
+    onRef: () => void,
+    query: object) {
+    this.templateInfo = templateInfo;
+    this.customerData = customerData;
+    this.renderStyle = renderStyle;
+    this.itemConfig = itemConfig;
+    this.onRef = onRef;
+    const register = this.register.bind(this);
+    const unregister = this.unregister.bind(this);
+    this.registerObj = { register, unregister };
+    this.query = query;
+  }
+
+  get id() {
+    return this.templateInfo.id;
+  }
+
+  get index() {
+    return this.templateInfo.index;
+  }
+
+  //TODO item的div ref 会调用多次, 待调查
+  public divRef = (ele: HTMLDivElement | null) => {
+    this.rootDiv = ele;
+    if (ele) {
+      this.onDivMounted();
+    } else {
+      this.onDivUnmounted();
+    }
+  }
+
+  public slotRef = (ele: object | null) => {
+    if (!this.mounted.value && ele) {
+      this.mounted.value = true;
+      this.onRef?.();
+    } else if (!ele && this.mounted.value) {
+      this.mounted.value = false;
+    }
+  }
+
+  public register(name: string, callback: Function) {
+    this.customerCallbackMap[name] = callback;
+  }
+
+  public unregister(name: string) {
+    delete this.customerCallbackMap[name];
+  }
+
+  public onFocus(rect: object): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onFocus?.(rect);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  public onBlur(): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onBlur?.();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  public onClick(): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onClick?.();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  public onWidgetEdge(rect: object): boolean {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onWidgetEdge?.(rect);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  public addDivMountedListener(cbk: (div: HTMLDivElement) => void) {
+    this.divMountedCallback.push(cbk);;
+  }
+
+  private onDivMounted(): void {
+    if (this.divMountedCallback.length > 0) {
+      this.divMountedCallback.forEach((cbk: (ele: HTMLDivElement) => void) => {
+        if (this.rootDiv) {
+          cbk(this.rootDiv);
+        }
+      })
+    }
+    this.divMountedCallback = [];
+  }
+
+  private onDivUnmounted(): void {
+    this.touchInit = false;
+    this.divMountedCallback = [];
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/VisibleInfo.ts

@@ -0,0 +1,43 @@
+export class VisibleInfo {
+  private _start: number = 0;
+  public range: number = 0;
+  public padding: {
+    start: 0,
+    end: 0,
+  };
+  private _startMax: number = 0;
+
+  set start(value) {
+    this._start = value;
+    this._startMax = Math.max(this._start, this._startMax);
+  }
+
+  get start() {
+    return this._start;
+  }
+
+  get end() {
+    return this._start + this.range - 1;
+  }
+
+  get startMax() {
+    return this._startMax;
+  }
+
+  get startWithPadding() {
+    return this._start - this.padding.start;
+  }
+
+  get endWithPadding() {
+    return this._start + this.range + this.padding.end - 1;
+  }
+
+  public copy(): VisibleInfo {
+    const obj = new VisibleInfo();
+    obj._start = this._start;
+    obj.padding = { ...this.padding };
+    obj._startMax = this._startMax;
+    obj.range = this.range;
+    return obj
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/WidgetRectInfo.ts

@@ -0,0 +1,49 @@
+export interface Padding {
+  left: number,
+  top: number,
+  right: number,
+  bottom: number,
+}
+
+export class WidgetRectInfo {
+  private mWidth: number;
+  private mHeight: number;
+  private mPadding: Padding = {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  };
+
+  constructor(w: number, h: number, padding: any) {
+    this.mWidth = w;
+    this.mHeight = h;
+    this.mPadding.left = padding?.left ?? 0;
+    this.mPadding.top = padding?.top ?? 0;
+    this.mPadding.right = padding?.right ?? 0;
+    this.mPadding.bottom = padding?.bottom ?? 0;
+    if (this.contentWidth <= 0 || this.contentHeight <= 0) {
+      throw new Error("padding size is large than widget size.");
+    }
+  }
+
+  get width() {
+    return this.mWidth;
+  }
+
+  get height() {
+    return this.mHeight;
+  }
+
+  get contentWidth() {
+    return this.mWidth - this.mPadding.left - this.mPadding.right;
+  }
+
+  get contentHeight() {
+    return this.mHeight - this.mPadding.top - this.mPadding.bottom;
+  }
+
+  get padding() {
+    return this.mPadding;
+  }
+}