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

package/utils/JsViewEngineWidget/MetroWidget/PageUpdater.ts

@@ -8,8 +8,8 @@
 import { MetroTemplate } from "../TemplateParser/MetroTemplate";
 
 export interface PermanentItemInfo {
-  index: number,
-  alreadyShow: boolean,
+  index: number;
+  alreadyShow: boolean;
 }
 
 export class PageUpdater {
@@ -17,13 +17,20 @@ export class PageUpdater {
   private rangeSet: Set<number>;
   private updateFunc: (renderSet: Set<number>) => void;
   private count: number = 1;
+  private applyedRange: { start: number; end: number } = { start: 0, end: 0 };
 
   constructor(updateFunc: (renderSet: Set<number>) => void) {
     this.tmpRangeSet = new Set<number>();
-    this.rangeSet = new Set<number>();;
+    this.rangeSet = new Set<number>();
     this.updateFunc = updateFunc;
   }
 
+  cleanCache() {
+    this.tmpRangeSet.clear();
+    this.rangeSet.clear();
+    this.applyedRange = { start: 0, end: 0 };
+  }
+
   update(
     template: MetroTemplate,
     start: number,
@@ -31,14 +38,17 @@ export class PageUpdater {
     anchorId: number,
     mergeTmp: boolean,
     permanentList: Array<PermanentItemInfo> | null,
-    extensionRange: number = 0
-  ): { apply: Function, applyTmp: Function, recover: Function } {
+    fullDisplayMode: boolean = false
+  ): { apply: Function; applyTmp: Function; recover: Function } {
     this.count++;
-    const [visibleStart, visibleEnd] = template.getVisibleItemList(
-      start - extensionRange,
-      end + extensionRange,
-      anchorId
-    );
+
+    const [visibleStart, visibleEnd] = fullDisplayMode
+      ? [0, template.templateList.length - 1]
+      : template.getVisibleItemList(
+          start,
+          end,
+          anchorId
+        );
     const preTmpRangeSet = this.tmpRangeSet;
     const preRangeSet = this.rangeSet;
 
@@ -51,23 +61,25 @@ export class PageUpdater {
     }
 
     if (permanentList) {
-      const permanentShowList = permanentList.filter((item: PermanentItemInfo) => {
-        let result = false;
-        if (item.alreadyShow || item.index <= visibleEnd) {
-          item.alreadyShow = true;
-          result = true;
+      const permanentShowList = permanentList.filter(
+        (item: PermanentItemInfo) => {
+          let result = false;
+          if (item.alreadyShow || item.index <= visibleEnd) {
+            item.alreadyShow = true;
+            result = true;
+          }
+          return result;
         }
-        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]);
     }
@@ -75,6 +87,7 @@ export class PageUpdater {
     return {
       apply: () => {
         if (c == this.count) {
+          this.applyedRange = { start: start, end: end };
           this.apply();
         } else {
           // console.log("apply expired data")
@@ -82,7 +95,8 @@ export class PageUpdater {
       },
       applyTmp: () => {
         if (c == this.count) {
-          this.applyTmp()
+          this.applyedRange = { start: start, end: end };
+          this.applyTmp();
         } else {
           // console.log("apply tmp expired data")
         }
@@ -90,8 +104,12 @@ export class PageUpdater {
       recover: () => {
         this.rangeSet = preRangeSet;
         this.tmpRangeSet = preTmpRangeSet;
-      }
-    }
+      },
+    };
+  }
+
+  public getApplyedRange(): { start: number; end: number } {
+    return this.applyedRange;
   }
 
   private apply(): void {
@@ -111,4 +129,4 @@ export class PageUpdater {
   public getTmpRange(): Set<number> {
     return this.tmpRangeSet;
   }
-}
+}

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -1,33 +1,42 @@
-import { ref, computed } from "vue";
+import { ref, computed, toRaw, reactive } from "vue";
 import type { Ref } from "vue";
-import { TemplateItem } from "../TemplateParser/MetroTemplate"
+import { TemplateItem } from "../TemplateParser/MetroTemplate";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+import { SpatialNavigationNode } from "../SpatialNavigator/SpatialNavigationNode";
 
 interface RenderItemStyle {
-  zIndex: number,
-  left: number,
-  top: number,
-  width: number,
-  height: number,
-};
+  zIndex: number;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
 
 interface ItemConfig {
-  focusZIndex: number,
-  normalZIndex: number,
-  itemSlide: number,
-  permanent: boolean,
-  showSkeleton: boolean,
+  focusZIndex: number;
+  normalZIndex: number;
+  itemSlide: number;
+  permanent: boolean;
+  showSkeleton: boolean;
+  enableLongPress: boolean;
+  bindSpatialNav: boolean;
 }
 
 interface CustomerCallbackMap {
-  onFocus?: (rect: object) => void,
-  onBlur?: () => void,
-  onClick?: () => void,
-  onLongPress?: () => void,
-  onTap?: () => void,
-  onWidgetEdge?: (rect: object) => void,
-  onGaze?: (rect: object) => void,
-  onIgnore?: () => void,
+  onFocus?: (rect: object) => void;
+  onBlur?: () => void;
+  onClick?: () => void;
+  onLongPress?: () => void;
+  onTap?: () => void;
+  onWidgetEdge?: (rect: object) => void;
+  onGaze?: (rect: object) => void;
+  onIgnore?: () => void;
+  //获取item内组件item的可视状态
+  onGetItemVisibleState?: (
+    leftTop: { x: number; y: number },
+    rightBottom: { x: number; y: number }
+  ) => any;
 }
 
 export class RenderItem {
@@ -38,16 +47,25 @@ export class RenderItem {
   public renderStyle: RenderItemStyle;
   public itemConfig: ItemConfig;
 
-  public mounted: Ref<boolean> = ref(false);
+  //NOTE 使用reactive而不是ref是为了可以通过toRaw再访问以避免被watchEffect监听
+  public mounted = reactive({ value: false });
   public touchInit: boolean = false;
-  public rootDiv: HTMLDivElement | null = null;
+  public rootDiv: HTMLDivElement | undefined = undefined;
   public enableTap: boolean = false;
   public renderKey: Ref<number> = ref(0);
+  public placeHolderLayout = null;
+  public rootNativeViewId: number = -1;
+  private nativeLayoutView: any = null;
 
   private customerCallbackMap: CustomerCallbackMap = {};
   private onRef: (() => void) | null;
+  private metroWidgetInfos: any;
+  private isFocus: boolean = false;
   public readonly registerObj: object;
   public readonly query: object;
+  public enableFboAccelrate: boolean = false;
+  public renderBreak: boolean;
+  private spatialNavNode: SpatialNavigationNode | undefined = undefined;
 
   constructor(
     templateInfo: TemplateItem,
@@ -55,7 +73,11 @@ export class RenderItem {
     renderStyle: RenderItemStyle,
     itemConfig: ItemConfig,
     onRef: () => void,
-    query: object) {
+    query: object,
+    metroWidgetInfos: any,
+    enableFboAccelrate: boolean,
+    widgetRenderBreak: boolean
+  ) {
     this.templateInfo = templateInfo;
     this.customerData = customerData;
     this.renderStyle = renderStyle;
@@ -65,6 +87,9 @@ export class RenderItem {
     const unregister = this.unregister.bind(this);
     this.registerObj = { register, unregister };
     this.query = query;
+    this.metroWidgetInfos = metroWidgetInfos;
+    this.enableFboAccelrate = enableFboAccelrate;
+    this.renderBreak = widgetRenderBreak;
   }
 
   get id() {
@@ -75,6 +100,43 @@ export class RenderItem {
     return this.templateInfo.index;
   }
 
+  public getSpatialNavNode() {
+    if (!this.itemConfig.bindSpatialNav) {
+      return undefined;
+    }
+    if (!this.spatialNavNode) {
+      this.spatialNavNode = new SpatialNavigationNode(
+        (token: number,target: unknown) => {
+          if (!this.rootDiv) {
+            return undefined;
+          }
+          const rect = this.metroWidgetInfos.getItemPositionWithCache(token, target, this.templateInfo.index);
+          return {
+            left: rect.left,
+            top: rect.top,
+            right: rect.left + rect.width,
+            bottom: rect.top + rect.height,
+            centerX: rect.left + rect.width / 2,
+            centerY: rect.top + rect.height / 2,
+          };
+        },
+        () => {
+          return {
+            mwChain: this.metroWidgetInfos.getMwChain(),
+            itemIndex: this.templateInfo.index,
+          };
+        },
+        () => {
+
+        },
+        () => {
+          
+        }
+      );
+    }
+    return this.spatialNavNode;
+  }
+
   public updateCustomData(newCustomData: object, newItemConfig: ItemConfig) {
     this.customerData = newCustomData;
     this.itemConfig = newItemConfig;
@@ -84,14 +146,14 @@ export class RenderItem {
   }
 
   //TODO item的div ref 会调用多次, 待调查
-  public divRef = (ele: HTMLDivElement | null) => {
+  public divRef = (ele: HTMLDivElement | undefined) => {
     this.rootDiv = ele;
     if (ele) {
       this.onDivMounted();
     } else {
       this.onDivUnmounted();
     }
-  }
+  };
 
   public slotRef = (ele: object | null) => {
     if (!this.mounted.value && ele) {
@@ -100,7 +162,7 @@ export class RenderItem {
     } else if (!ele && this.mounted.value) {
       this.mounted.value = false;
     }
-  }
+  };
 
   public register(name: string, callback: Function) {
     (this.customerCallbackMap as any)[name] = callback;
@@ -110,9 +172,24 @@ export class RenderItem {
     delete (this.customerCallbackMap as any)[name];
   }
 
+  public onGetItemVisibleState(
+    leftTop: { x: number; y: number },
+    rightBottom: { x: number; y: number }
+  ): any {
+    return this.customerCallbackMap.onGetItemVisibleState?.(
+      leftTop,
+      rightBottom
+    );
+  }
+
   public onFocus(rect: object): boolean {
-    if (this.mounted.value) {
+    //NOTE 为了避免访问响应式对象被watchEffect捕获引起不必要的触发，访问时统一用toRaw
+    if (toRaw(this.mounted).value) {
+      if (this.rootNativeViewId != -1) {
+        this.nativeLayoutView.SetIsFocus(true);
+      }
       this.customerCallbackMap.onFocus?.(rect);
+      this.isFocus = true;
       return true;
     } else {
       return false;
@@ -120,8 +197,12 @@ export class RenderItem {
   }
 
   public onBlur(): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value && this.isFocus) {
+      if (this.rootNativeViewId != -1) {
+        this.nativeLayoutView.SetIsFocus(false);
+      }
       this.customerCallbackMap.onBlur?.();
+      this.isFocus = false;
       return true;
     } else {
       return false;
@@ -129,7 +210,7 @@ export class RenderItem {
   }
 
   public onGaze(rect: object): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onGaze?.(rect);
       return true;
     } else {
@@ -138,7 +219,7 @@ export class RenderItem {
   }
 
   public onIgnore(): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onIgnore?.();
       return true;
     } else {
@@ -147,11 +228,16 @@ export class RenderItem {
   }
 
   public readonly onTap = computed(() => {
-    return this.enableTap ? this.onClick.bind(this) : null;
-  })
+    return this.enableTap ? this.innerOnTap.bind(this) : null;
+  });
+
+  private innerOnTap(): boolean {
+    this.metroWidgetInfos?.onTap?.(this);
+    return this.onClick();
+  }
 
   public onClick(): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onClick?.();
       return true;
     } else {
@@ -160,7 +246,7 @@ export class RenderItem {
   }
 
   public onLongPress(): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onLongPress?.();
       return true;
     } else {
@@ -169,7 +255,7 @@ export class RenderItem {
   }
 
   public onWidgetEdge(rect: object): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onWidgetEdge?.(rect);
       return true;
     } else {
@@ -181,6 +267,23 @@ export class RenderItem {
     this.divMountedCallback.add(cbk);
     return () => {
       this.divMountedCallback.delete(cbk);
+    };
+  }
+
+  public onInRenderRange() {
+    if (this.enableFboAccelrate && this.rootNativeViewId == -1) {
+      this.nativeLayoutView = new Forge.MetroWidgetItemRootView();
+      this.rootNativeViewId = Forge.sViewStore.add(
+        new Forge.ViewInfo(this.nativeLayoutView, null)
+      );
+    }
+  }
+
+  public onOutOfRenderRange() {
+    if (this.rootNativeViewId != -1) {
+      Forge.sViewStore.remove(this.rootNativeViewId);
+      this.rootNativeViewId = -1;
+      this.nativeLayoutView = null;
     }
   }
 
@@ -190,7 +293,7 @@ export class RenderItem {
         if (this.rootDiv) {
           cbk(this.rootDiv);
         }
-      })
+      });
     }
     this.divMountedCallback.clear();
     if (this.enableTap && this.rootDiv) {
@@ -203,5 +306,10 @@ export class RenderItem {
     this.touchInit = false;
     this.divMountedCallback.clear();
     this.customerCallbackMap = {};
+    if (this.rootNativeViewId != -1) {
+      Forge.sViewStore.remove(this.rootNativeViewId);
+      this.rootNativeViewId = -1;
+      this.nativeLayoutView = null;
+    }
   }
-}
+}

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -4,8 +4,8 @@ interface AnimSetting {
   easing?: string | null;
   onStart?: () => void;
   onEnd?: (done: boolean) => void;
-  duration?: number,
-  speed?: number,
+  duration?: number;
+  speed?: number;
 }
 
 export class SlideAnimWrapper {
@@ -19,7 +19,8 @@ export class SlideAnimWrapper {
     element: any,
     from: [number, number],
     to: [number, number],
-    setting: AnimSetting) {
+    setting: AnimSetting
+  ) {
     this.frameCount = frameCount;
     this.animSetting = setting;
     this.element = element;
@@ -28,7 +29,10 @@ export class SlideAnimWrapper {
     if (typeof setting.duration == "number") {
       duration = setting.duration;
     } else if (typeof setting.speed == "number") {
-      duration = Math.round(Math.max(Math.abs(to[0] - from[0]), Math.abs(to[1] - from[1])) / setting.speed);
+      duration = Math.round(
+        Math.max(Math.abs(to[0] - from[0]), Math.abs(to[1] - from[1])) /
+          setting.speed
+      );
     }
     this.forgeAnim = new Forge.TranslateAnimation(
       from[0],
@@ -36,10 +40,14 @@ export class SlideAnimWrapper {
       from[1],
       to[1],
       duration,
-      setting.easing
+      Forge.Easing.str2Easing(setting.easing)
     );
     this.forgeAnim.SetAnimationListener(
-      new Forge.AnimationListener(this.onStart.bind(this), this.onEnd.bind(this), null)
+      new Forge.AnimationListener(
+        this.onStart.bind(this),
+        this.onEnd.bind(this),
+        null
+      )
     );
   }
 
@@ -72,7 +80,12 @@ export class AnimationManager {
   private animList: Array<SlideAnimWrapper> = [];
   private frameCount: number = 0;
 
-  public startSlideAnim(element: any, from: [number, number], to: [number, number], setting: AnimSetting) {
+  public startSlideAnim(
+    element: any,
+    from: [number, number],
+    to: [number, number],
+    setting: AnimSetting
+  ) {
     let curFrameCount = Forge.sFrameCount.count;
     if (curFrameCount != this.frameCount) {
       this.tryCleanOldAnim();
@@ -86,7 +99,7 @@ export class AnimationManager {
         obj.removeListener();
       }
       obj.stop();
-    }
+    };
   }
 
   private tryCleanOldAnim() {
@@ -124,7 +137,6 @@ class CancellableRunner {
   }
 }
 
-
 export enum TaskType {
   RESIZE_ITEM = 1,
   SLIDE,
@@ -136,21 +148,22 @@ export enum SlideTaskType {
   SLIDE_BY_ITEM,
   SLIDE_BY_DIV,
   SLIDE_BY_RECT,
+  SLIDE_BY_POS_NORMALIZE,
 }
 
 type SubType = SlideTaskType | null;
 
 interface Task {
-  frameCount: number,
-  type: TaskType,
-  subType: SubType,
-  params: any,
+  frameCount: number;
+  type: TaskType;
+  subType: SubType;
+  params: any;
 }
 
 export interface AllTaskList {
-  slide: Array<Task>,
-  focus: Array<Task>,
-  resize: Array<Task>,
+  slide: Array<Task>;
+  focus: Array<Task>;
+  resize: Array<Task>;
 }
 export type AddTaskCallback = (taskList: AllTaskList) => void;
 export class TaskManager {
@@ -162,9 +175,9 @@ export class TaskManager {
     slide: [],
     focus: [],
     resize: [],
-  }
+  };
 
-  constructor(private onAddTask: AddTaskCallback) { }
+  constructor(private onAddTask: AddTaskCallback) {}
 
   private cleanTaskCache(): void {
     this.allTaskList.slide = [];
@@ -179,7 +192,7 @@ export class TaskManager {
       this.frameCount = Forge.sFrameCount.count;
     }
     //取消同帧的旧runner
-    this.cancellableRunnerList.forEach(t => {
+    this.cancellableRunnerList.forEach((t) => {
       t.cancel();
     });
 
@@ -188,19 +201,19 @@ export class TaskManager {
       subType: subtype,
       params,
       frameCount: Forge.sFrameCount.count,
-    }
+    };
     switch (type) {
       case TaskType.SLIDE:
-        this.allTaskList.slide.push(tObj)
+        this.allTaskList.slide.push(tObj);
         break;
       case TaskType.ON_FOCUS_CHANGE:
-        this.allTaskList.focus.push(tObj)
+        this.allTaskList.focus.push(tObj);
         break;
       case TaskType.RESIZE_ITEM:
-        this.allTaskList.resize.push(tObj)
+        this.allTaskList.resize.push(tObj);
         break;
       default:
-        console.error("undefined type")
+        console.error("undefined type");
         break;
     }
     this.onAddTask(this.allTaskList);
@@ -214,9 +227,9 @@ export class TaskManager {
 
   public cancelAllTask() {
     this.cleanTaskCache();
-    this.cancellableRunnerList.forEach(t => {
+    this.cancellableRunnerList.forEach((t) => {
       t.cancel();
     });
     this.cancellableRunnerList = [];
   }
-}
+}

package/utils/JsViewEngineWidget/MetroWidget/Utils.ts

@@ -0,0 +1,6 @@
+let id = 0;
+export function getId() {
+  return ++id;
+}
+
+export const MW_CONTEXT_NAME = "__jsv_metro_widget_context";

package/utils/JsViewEngineWidget/MetroWidget/WidgetRectInfo.ts

@@ -15,7 +15,7 @@ export class WidgetRectInfo {
     bottom: 0
   };
 
-  constructor(w: number, h: number, padding: any) {
+  constructor(w: number, h: number, padding: any, errorLogger: Function) {
     this.mWidth = w;
     this.mHeight = h;
     this.mPadding.left = padding?.left ?? 0;
@@ -23,6 +23,7 @@ export class WidgetRectInfo {
     this.mPadding.right = padding?.right ?? 0;
     this.mPadding.bottom = padding?.bottom ?? 0;
     if (this.contentWidth <= 0 || this.contentHeight <= 0) {
+      errorLogger("padding size is large than widget size.");
       throw new Error("padding size is large than widget size.");
     }
   }

package/utils/JsViewEngineWidget/RectUtils.js

@@ -78,7 +78,7 @@ class RectUtils {
       formatted_target_size = size_object;
     } else if (typeof size_object === "object" && size_object !== null) {
       if (isNaN(size_object.width) || isNaN(size_object.height)) {
-        throw Error(
+        throw new Error(
           "ERROR: target_size format should be {width:XXXX, height:XXXX}"
         );
       }