@shijiu/jsview-vue 2.3.151-test.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,34 +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,
-  enableLongPress: 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 {
@@ -39,18 +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 metroWidgetCbk: any;
+  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,
@@ -59,7 +74,9 @@ export class RenderItem {
     itemConfig: ItemConfig,
     onRef: () => void,
     query: object,
-    metroWidgetCallback: Object,
+    metroWidgetInfos: any,
+    enableFboAccelrate: boolean,
+    widgetRenderBreak: boolean
   ) {
     this.templateInfo = templateInfo;
     this.customerData = customerData;
@@ -70,7 +87,9 @@ export class RenderItem {
     const unregister = this.unregister.bind(this);
     this.registerObj = { register, unregister };
     this.query = query;
-    this.metroWidgetCbk = metroWidgetCallback;
+    this.metroWidgetInfos = metroWidgetInfos;
+    this.enableFboAccelrate = enableFboAccelrate;
+    this.renderBreak = widgetRenderBreak;
   }
 
   get id() {
@@ -81,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;
@@ -90,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) {
@@ -106,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;
@@ -116,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;
@@ -126,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;
@@ -135,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 {
@@ -144,7 +219,7 @@ export class RenderItem {
   }
 
   public onIgnore(): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onIgnore?.();
       return true;
     } else {
@@ -154,15 +229,15 @@ export class RenderItem {
 
   public readonly onTap = computed(() => {
     return this.enableTap ? this.innerOnTap.bind(this) : null;
-  })
+  });
 
   private innerOnTap(): boolean {
-    this.metroWidgetCbk?.onTap?.(this);
+    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 {
@@ -171,7 +246,7 @@ export class RenderItem {
   }
 
   public onLongPress(): boolean {
-    if (this.mounted.value) {
+    if (toRaw(this.mounted).value) {
       this.customerCallbackMap.onLongPress?.();
       return true;
     } else {
@@ -180,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 {
@@ -192,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;
     }
   }
 
@@ -201,7 +293,7 @@ export class RenderItem {
         if (this.rootDiv) {
           cbk(this.rootDiv);
         }
-      })
+      });
     }
     this.divMountedCallback.clear();
     if (this.enableTap && this.rootDiv) {
@@ -214,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

@@ -148,6 +148,7 @@ export enum SlideTaskType {
   SLIDE_BY_ITEM,
   SLIDE_BY_DIV,
   SLIDE_BY_RECT,
+  SLIDE_BY_POS_NORMALIZE,
 }
 
 type SubType = SlideTaskType | null;

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}"
         );
       }

package/utils/JsViewEngineWidget/SpatialNavigator/SpatialNavProvider.vue

@@ -0,0 +1,62 @@
+<template>
+  <div ref="rootDiv">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+/**
+* 【界面概述】
+* 用来寻找最近MetroWidget Item的控件
+* 使用时, 内部嵌套mw的配置上的注意事项:
+     1. 通过 measure 中 bindSpatialNav, 然后选择以下一种onEdge处理
+        a. onEdge="ONEDGE_TYPE.SPATIAL_NAV" 替换原复杂的onEdge寻焦逻辑处理
+        b. onEdge函数为自定义函数, 可以做一些内部状态记录, 然后寻焦动作使用spatialNavProvider.moveTo(direction) 来简化
+     2. 所有mw要把 sendFocusRectEvent 设置为 true, 
+        否则会遇到在子节点进行焦点移动时, 无法让最外层的mw整体布局以此焦点为准进行滚动
+        导致焦点框移动到屏幕外
+     3. 每个嵌套的mw, 非最子mw时, 要设置 keepTraceRange 为大于1(建议1.2), 
+        否则容易遇到SpatialNav感知不到未创建的节点, 导致onEdge时寻焦失败。
+        比如一个布局为纵向的楼层mw, 每个楼层为横向的mw, 在这个嵌套中进行上下移动时, 
+        若纵向mw的keepTraceRange为1, 因为纵向的可视区域外的节点没创建, 导致SpatialNav感知不到, 
+        从而导致纵向滚动时寻焦失败。
+*
+* 【控件介绍】
+*  props:
+*     onEdge {({direction: EdgeDirection, rect: {x: number, y: number, width: number, height: number}}) => void}
+*     xDefaultMoveType {String} x方向默认移动方式：normal(默认)、layerFirst
+*     yDefaultMoveType {String} y方向默认移动方式：normal(默认)、layerFirst
+*  provider:
+*     SpatialNavigator
+*       moveTo
+*         @description 移动到最近的item
+*         @params {Symbol} direction 移动方向
+*/
+import { provide, shallowRef } from "vue";
+import { SpatialNavigator } from "./SpatialNavigator";
+import { SPATIAL_NAV_PROVIDER_NAME } from "./SpatialNavigator";
+import { useFocusHub } from "../JsvFocus/JsvFocusManager";
+
+const props = defineProps({
+  onEdge: {
+    type: Function,
+  },
+  xDefaultMoveType: {
+    type: String,
+    default: "normal",
+  },
+  yDefaultMoveType: {
+    type: String,
+    default: "normal",
+  },
+});
+
+const focusHub = useFocusHub(false);
+const rootDiv = shallowRef(null);
+const spatialNavigator = new SpatialNavigator(rootDiv, focusHub, props.onEdge);
+spatialNavigator.setDefaultMoveType(props.xDefaultMoveType, props.yDefaultMoveType);
+provide(SPATIAL_NAV_PROVIDER_NAME, spatialNavigator);
+defineExpose({
+  getSpatialNavigator: () => spatialNavigator,
+});
+</script>