@shijiu/jsview-vue 2.3.151-test.0 → 3.0.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>,
@@ -192,8 +192,9 @@ abstract class MetroTemplate {
   public readonly layoutType: string;
   protected tailItemIndex: number = -1;
   private cachedLayoutRange: Array<[number, number]> = [];
+  protected errorLogger: Function = console.error;
 
-  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 +203,9 @@ abstract class MetroTemplate {
     this.pageSize = pageSize;
     this.supportHistoryPath = supportHistoryPath;
     this.uidMap = {};
+    if (errorLogger) {
+      this.errorLogger = errorLogger;
+    }
   }
 
   get size(): number {
@@ -311,9 +315,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 +361,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 +388,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 };

package/utils/JsViewEngineWidget/WidgetCommon.ts

@@ -154,22 +154,32 @@ export class WholePageSlide extends SlideSetting {
 }
 
 /**
- * 平滑滚动的设置, 当前 item 小于/大于指定的阈值时会触发滚动
+ * 无缝滚动的设置类
  *
  * @public
  * @constructor SeamlessSlide
  * @extends SlideSetting
  * @param {Object} settings 设置，结构为{
  *                                      startPercent: 左/上侧触发滚动的比例 0-1
- *                                      endPercennt: 右/下侧触发滚动的比例 0-1
+ *                                      endPercent: 右/下侧触发滚动的比例 0-1, 从起点计数, 末尾为1.0
  *                                      headRange: 左/上按键触发滚动的区域比例 0-1
- *                                      tailRange: 右/下按键触发滚动的区域比例 0-1
+ *                                      tailRange: 右/下按键触发滚动的区域比例 0-1, 从终点计数，末尾为0
+ *                                              startPercent/endPercent 和 headRange/tailRange 二选一
  *                                      headSafeArea: 保证头部item完整显示的安全区域大小
  *                                      tailSafeArea: 保证尾部item完整显示的安全区域大小
- *                                      speed: 滚动速度, 像素/毫秒 
- *                                      easing: 滚动动画的easing
- *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度
- *                                      fixFirstPage: 首页不滚动
+ *                                      speed: 像素/毫秒, 用于计算duration的辅助值, 因为MetroWidget每个行间可能距离不一样, 
+ *                                              使用时根据speed, 按匀速反算duration
+ *                                      duration: 动画时长(毫秒)。当 duration 为 number 时优先于 speed；
+ *                                               若为 null/不传则按 speed 计算时长
+ *                                      easing(String): 滚动动画的easing，可不填(实现中默认为空字符串)；
+ *                                                      非匀速时推荐为 "cubic-bezier(X, X, X, X)"
+ *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度，默认值为 START_PROTECT | END_PROTECT，即都开启
+ *                                                  START_PROTECT: 是否要让头部卡在边缘而不是滚动到 headRange 的位置
+ *                                                  END_PROTECT: 是否要让尾部卡在边缘而不是滚动到 tailRange 的位置
+ *                                                  若不开启，则 slide 出来的项目可能不是完整的项目，而是以焦点元素的边缘对齐 range(head 或 tail)的百分比位置；
+ *                                                  对齐策略为：往 head 滑动时，用起始边缘对准 headRange，往 tail 滑动时，用起始边缘对准 tailRange
+ *                                      fixFirstPage: 默认为false, 代表第一屏不滚动, 当到第一屏边缘开始才按照正常的无缝滚动逻辑滚动, 
+                                                   若回到第一屏区域时则会把第一屏完整的滚动回来
  *                                    }
  **/
 export class SeamlessSlide extends SlideSetting {

package/utils/JsViewEngineWidget/index.ts

@@ -8,10 +8,15 @@
 export * from "./WidgetCommon";
 export * from "./MetroWidget/Dispatcher";
 
+// SimpleWidget is deprecated, please use MetroWidget instead
 export { default as SimpleWidget } from "./MetroWidget/MetroWidget.vue";
+
 export { default as MetroWidget } from "./MetroWidget/MetroWidget.vue";
 export { default as ListWidget } from "./MetroWidget/ListWidget.vue";
-export { METRO_WIDGET, METRO_WIDGET_CONST } from "./MetroWidget/Const";
+export { METRO_WIDGET, METRO_WIDGET_CONST, ONEDGE_TYPE } from "./MetroWidget/Const";
 
 export { default as JsvFocusBlock } from "./JsvFocus/JsvFocusBlock.vue";
-export { jsvCreateFocusManager, useFocusHub } from "./JsvFocus/JsvFocusManager";
+export { jsvCreateFocusManager, useFocusHub } from "./JsvFocus/JsvFocusManager";
+
+export { default as SpatialNavProvider } from "./SpatialNavigator/SpatialNavProvider.vue";
+export { SPATIAL_NAV_PROVIDER_NAME } from "./SpatialNavigator/SpatialNavigator";