@shijiu/jsview-vue 2.3.0 → 2.3.151-test.0

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -17,6 +17,7 @@ interface ItemConfig {
   itemSlide: number,
   permanent: boolean,
   showSkeleton: boolean,
+  enableLongPress: boolean,
 }
 
 interface CustomerCallbackMap {
@@ -43,9 +44,11 @@ export class RenderItem {
   public rootDiv: HTMLDivElement | null = null;
   public enableTap: boolean = false;
   public renderKey: Ref<number> = ref(0);
+  public placeHolderLayout = null;
 
   private customerCallbackMap: CustomerCallbackMap = {};
   private onRef: (() => void) | null;
+  private metroWidgetCbk: any;
   public readonly registerObj: object;
   public readonly query: object;
 
@@ -55,7 +58,9 @@ export class RenderItem {
     renderStyle: RenderItemStyle,
     itemConfig: ItemConfig,
     onRef: () => void,
-    query: object) {
+    query: object,
+    metroWidgetCallback: Object,
+  ) {
     this.templateInfo = templateInfo;
     this.customerData = customerData;
     this.renderStyle = renderStyle;
@@ -65,6 +70,7 @@ export class RenderItem {
     const unregister = this.unregister.bind(this);
     this.registerObj = { register, unregister };
     this.query = query;
+    this.metroWidgetCbk = metroWidgetCallback;
   }
 
   get id() {
@@ -147,9 +153,14 @@ 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.metroWidgetCbk?.onTap?.(this);
+    return this.onClick();
+  }
+
   public onClick(): boolean {
     if (this.mounted.value) {
       this.customerCallbackMap.onClick?.();

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,
@@ -141,16 +153,16 @@ export enum SlideTaskType {
 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 +174,9 @@ export class TaskManager {
     slide: [],
     focus: [],
     resize: [],
-  }
+  };
 
-  constructor(private onAddTask: AddTaskCallback) { }
+  constructor(private onAddTask: AddTaskCallback) {}
 
   private cleanTaskCache(): void {
     this.allTaskList.slide = [];
@@ -179,7 +191,7 @@ export class TaskManager {
       this.frameCount = Forge.sFrameCount.count;
     }
     //取消同帧的旧runner
-    this.cancellableRunnerList.forEach(t => {
+    this.cancellableRunnerList.forEach((t) => {
       t.cancel();
     });
 
@@ -188,19 +200,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 +226,9 @@ export class TaskManager {
 
   public cancelAllTask() {
     this.cleanTaskCache();
-    this.cancellableRunnerList.forEach(t => {
+    this.cancellableRunnerList.forEach((t) => {
       t.cancel();
     });
     this.cancellableRunnerList = [];
   }
-}
+}

package/utils/JsViewEngineWidget/TemplateParser/CommonMetroTemplate.ts

@@ -47,6 +47,20 @@ interface VisibleSearchConfig {
   common: VisibleSearchConfigCommon;
 };
 
+
+function left(item: TemplateItem) {
+  return item.left;
+}
+function right(item: TemplateItem) {
+  return item.left + item.width - 1;
+}
+function top(item: TemplateItem) {
+  return item.top;
+}
+function bottom(item: TemplateItem) {
+  return item.top + item.height - 1;
+}
+
 class CommonMetroTemplate extends MetroTemplate {
   private _FenceStack: Array<Fence>;
   private _FenceEdge: { StartX: number, StartY: number };
@@ -445,24 +459,94 @@ class CommonMetroTemplate extends MetroTemplate {
       }
     }
 
-    if (nextTemplateItem === null) {
-      // 临近行的焦点移动
-      if (
-        vOffset != 0 &&
-        moveType & FocusMoveType.ROW_FIND_NEAR
-      ) {
-        nextTemplateItem = this._GetNearLineItem(itemIndex, vOffset, true);
-      } else if (
-        hOffset != 0 &&
-        moveType & FocusMoveType.COLUMN_FIND_NEAR
-      ) {
-        nextTemplateItem = this._GetNearLineItem(itemIndex, hOffset, false);
+    if (
+      vOffset != 0 &&
+      moveType & FocusMoveType.ROW_FIND_NEAR
+    ) {
+      let rowNear = this._GetDirectionNearItem(itemIndex, vOffset > 0 ? "bottom" : "top");
+      if (rowNear) {
+        nextTemplateItem = rowNear;
+      }
+    } else if (
+      hOffset != 0 &&
+      moveType & FocusMoveType.COLUMN_FIND_NEAR
+    ) {
+      let colNear = this._GetDirectionNearItem(itemIndex, hOffset > 0 ? "right" : "left");
+      if (colNear) {
+        nextTemplateItem = colNear;
       }
     }
 
     return nextTemplateItem;
   }
 
+  private _GetDirectionNearItem(index: number, direction: string, mustFocusable: boolean = true) {
+    const SEARCH_RANGE = 100;
+    let searchMin = Math.max(0, index - SEARCH_RANGE);
+    let searchMax = Math.min(this.templateList.length - 1, index + SEARCH_RANGE);
+    let targetItem = this.templateList[index];
+    let tl = left(targetItem);
+    let tr = right(targetItem);
+    let tt = top(targetItem);
+    let tb = bottom(targetItem);
+    let info: {
+      item: TemplateItem | null,
+      minMainDistance: number,
+      minSubDistance: number,
+    } = {
+      item: null,
+      minMainDistance: -1,
+      minSubDistance: -1,
+    };
+    const compare = (item: TemplateItem, getMainDistance: (i: TemplateItem) => number, getSubDistance: (i: TemplateItem) => number) => {
+      if (mustFocusable && !item.focusable) return;
+      const mainDistance = getMainDistance(item);
+      if (mainDistance <= 0) return;
+      const subDistance = getSubDistance(item);
+      if (info.minMainDistance < 0 || mainDistance < info.minMainDistance) {
+        info.minMainDistance = mainDistance;
+        info.minSubDistance = subDistance;
+        info.item = item;
+      } else if (mainDistance === info.minMainDistance && subDistance < info.minSubDistance) {
+        info.minSubDistance = subDistance;
+        info.item = item;
+      }
+    }
+
+    for (let i = searchMin; i <= searchMax; i++) {
+      const item = this.templateList[i];
+      let il = left(item);
+      let ir = right(item);
+      let it = top(item);
+      let ib = bottom(item);
+      switch(direction) {
+        case "left":
+          compare(item, 
+            (item) => {return tl - il}, 
+            (item) => {
+              return Math.min(Math.abs(tt - it), Math.abs(tb - ib), Math.abs(tt - ib), Math.abs(tb - it));
+            });
+          break;
+        case "right":
+          compare(item, 
+            (item) => {return ir - tr}, 
+            (item) => {return Math.min(Math.abs(tt - it), Math.abs(tb - ib), Math.abs(tt - ib), Math.abs(tb - it));});
+          break;
+        case "top":
+          compare(item, 
+            (item) => {return tt - it}, 
+            (item) => {return Math.min(Math.abs(tl - il), Math.abs(tr - ir), Math.abs(tl - ir), Math.abs(tr - il));});
+          break;
+        case "bottom":
+          compare(item, 
+            (item) => {return ib - tb}, 
+            (item) => {return Math.min(Math.abs(tl - il), Math.abs(tr - ir), Math.abs(tl - ir), Math.abs(tr - il));});
+          break;
+      }
+    }
+    return info.item;
+  }
+
 
   private getNextItemInner(index: number, offset: number,
     vertical: boolean, useHistory: boolean, checkAnchor: number = -1): any {
@@ -666,6 +750,22 @@ class CommonMetroTemplate extends MetroTemplate {
     return nearestIndex;
   }
 
+  private _FindNearestByDirection(itemIndexList: Array<number>, direction: string) {
+    return itemIndexList.reduce((acc, cur) => {
+      const curItem = this.templateList[cur];
+      const accItem = this.templateList[acc];
+      if(direction == "left") {
+        return curItem.left < accItem.left ? cur : acc;
+      } else if (direction == "right") {
+        return curItem.left + curItem.width > accItem.left + accItem.width ? cur : acc;
+      } else if (direction == "top") {
+        return curItem.top < accItem.top ? cur : acc;
+      } else {
+        return curItem.top + curItem.height > accItem.top + accItem.height ? cur : acc;
+      }
+    }, itemIndexList[0]);
+  }
+
   private _GetNextLoopItem(index: number, offset: number, isVertical: boolean): TemplateItem | null {
     const templateList = this.templateList;
     const baseItem = templateList[index];
@@ -679,75 +779,46 @@ class CommonMetroTemplate extends MetroTemplate {
     let focusableTarget = -1;
     let startIndex = -1;
     let neighborList = [];
-    //寻找下一列的起始item
-    neighborList = this._GetTotalNeighbor(index, searchDirection);
-    while (startIndex < 0 && neighborList.length > 0) {
-      for (let i of neighborList) {
-        if (this._GetTotalNeighbor(i, startDirection).length > 0) {
-          startIndex = i;
-          break;
-        } else {
-          //TODO 是否要用递归
-          neighborList = this._GetTotalNeighbor(i, searchDirection);
-        }
+    //目前的算法针对规整的列表, 瀑布流这种不对齐, 以及列表中存在非focusable项, 行为不可控
+
+    let curIndex = index;
+    let nextLevelNeighborList = this._GetTotalNeighbor(curIndex, startDirection);
+    while (!nextLevelNeighborList || nextLevelNeighborList.length == 0) {
+      //查询同级的邻居
+      const sameLevelList = this._GetTotalNeighbor(curIndex, searchDirection);
+      if (sameLevelList.length > 0) {
+        //找最边缘的同级邻居
+        const i = this._FindNearestByDirection(sameLevelList, startDirection);
+        nextLevelNeighborList = this._GetTotalNeighbor(i, startDirection);
+        curIndex = i;
+      } else {
+        //没有同级邻居, 返回null
+        return null;
       }
     }
-    if (startIndex >= 0) {
-      neighborList = this._GetTotalNeighbor(startIndex, startDirection);
-
-      //寻找最近的neighbor
-      let nearestIndex = -1,
-        minDistance = Number.POSITIVE_INFINITY;
-      for (let i of neighborList) {
-        const d = this._GetItemDistance(templateList[i], baseItem);
-        if (d < minDistance) {
-          nearestIndex = i;
-          minDistance = d;
-        }
-      }
 
-      neighborList = this._GetTotalNeighbor(nearestIndex, searchDirection);
-      while (neighborList.length > 0) {
-        targetIndex = this._GetNearestItem(nearestIndex, neighborList);
-        if (templateList[targetIndex].focusable) {
-          focusableTarget = targetIndex;
+    if (nextLevelNeighborList && nextLevelNeighborList.length > 0) {
+      for (let i of nextLevelNeighborList) {
+        const item = templateList[i];
+        if (item.focusable) {
+          focusableTarget = i;
+          startIndex = i;
+          break;
         }
-        neighborList = this._GetTotalNeighbor(targetIndex, searchDirection);
-      }
-      if (focusableTarget >= 0) {
-        return templateList[focusableTarget];
-      } else if (targetIndex >= 0) {
-        return this._GetNextLoopItem(targetIndex, offset, isVertical);
       }
-    }
-    return null;
-  }
-
-  //获取临近行的item
-  private _GetNearLineItem(index: number, offset: number, isVertical: boolean) {
-    const templateList = this.templateList;
-    let searchDirection = isVertical ? "right" : "bottom";
-    let startDirection = isVertical ? "top" : "left";
-    if (offset > 0) {
-      searchDirection = isVertical ? "left" : "top";
-      startDirection = isVertical ? "bottom" : "right";
-    }
-    let startIndex = -1;
-    let neighborList = [];
-    //寻找下一列的起始item
-    neighborList = this._GetTotalNeighbor(index, searchDirection);
-    while (startIndex < 0 && neighborList.length > 0) {
-      for (let i of neighborList) {
-        const n = this._GetTotalNeighbor(i, startDirection);
-        if (n.length > 0) {
-          return templateList[this._GetNearestItem(index, n)];
-        } else {
-          //TODO 是否要用递归
-          neighborList = this._GetTotalNeighbor(i, searchDirection);
+      neighborList = this._GetTotalNeighbor(startIndex, searchDirection);
+      while (neighborList.length > 0) {
+        for (let i of neighborList) {
+          const item = templateList[i];
+          if (item.focusable) {
+            focusableTarget = i;
+            break;
+          }
         }
+        neighborList = this._GetTotalNeighbor(focusableTarget, searchDirection);
       }
     }
-    return null;
+    return focusableTarget >= 0 ? templateList[focusableTarget] : null;
   }
 
   public updateItemSize(index: number, newSize: { width: number, height: number }): void {

package/utils/JsViewEngineWidget/WidgetCommon.ts

@@ -225,11 +225,13 @@ export class SeamlessSlide extends SlideSetting {
  *                                      easing: 滚动动画的easing
  *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度
  *                                      fixFirstPage: 首页不滚动
+ *                                      align: 对齐方式 start, center, end
  *                                    }
  **/
 export class FixPositionSlide extends SlideSetting {
   public readonly FixPercent: number;
   public readonly FixFirstPage: boolean;
+  public readonly Align: "start" | "center" | "end";
 
   constructor({
     fixPercent = .5,
@@ -237,11 +239,21 @@ export class FixPositionSlide extends SlideSetting {
     duration = null,
     easing = defaultEasing,
     fixFirstPage = false,
+    align = "center",
     boundaryProtect = SlideSetting.START_PROTECT | SlideSetting.END_PROTECT,
+  }: {
+    fixPercent?: number;
+    speed?: number;
+    duration?: number | null;
+    easing?: string;
+    fixFirstPage?: boolean;
+    align?: "start" | "center" | "end";
+    boundaryProtect?: number;
   } = {}) {
     super(SlideSetting.Type.FIX_POSITION, speed, duration, easing, boundaryProtect);
     this.FixPercent = fixPercent;
     this.FixFirstPage = fixFirstPage;
+    this.Align = align;
   }
 }
 

package/utils/JsViewPlugin/JsvAudio/BrowserAudio/BrowserAudio.vue

@@ -17,12 +17,16 @@ export default {
   methods: {
     onRefProxy(audio_ref) {
       if (audio_ref != null) {
+        // 扩展浏览器端缺少的接口
         audio_ref.closeScreenSaver = () => {
           //浏览器端仅提供接口, 不实现功能
         };
         audio_ref.openScreenSaver = () => {
           //浏览器端仅提供接口, 不实现功能
         };
+        audio_ref.unload = () => {
+          audio_ref.src = "";
+        }
       }
       this.audioRef = audio_ref;
       // 不在此直接回调 onRef，因为onRefProxy可能会因为 .src的设置导致重新触发一次调用(vue本身问题)

package/utils/JsViewPlugin/JsvAudio/BrowserAudio/JsvSystemAudio.vue

@@ -1,14 +1,14 @@
 <template>
   <div :style="{ width: 1, height: 1 }" backgroundColor="rgba(0,0,0,1)"></div>
 </template>
-<script >
+<script>
 export default {
   props: {
     /**
      * 回调函数，播放器对象通知接口
      * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
      */
-    onRef: { type: Function, default: () => { } },
+    onRef: { type: Function, default: () => {} },
     /**
      * 属性，Boolean类型，true表示自动播放，默认false。
      */
@@ -94,8 +94,8 @@ export default {
      */
     preDownload: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup() {
     return {
@@ -103,7 +103,7 @@ export default {
     };
   },
   mounted() {
-    this.Jsvinit()
+    this.Jsvinit();
   },
 
   beforeUnmount() {
@@ -112,7 +112,7 @@ export default {
       this.audio.releaseResource?.();
       this.audio.onPlatformDestroy?.();
       this.onRef?.(null);
-      this.unregisterOnVisibilityChange()
+      this.unregisterOnVisibilityChange();
     }
   },
 
@@ -123,7 +123,7 @@ export default {
         this.audio.addEventListener("error", this.onError);
         this.audio.addEventListener("loadstart", this.onLoadStart);
         this.audio.addEventListener("loadedmetadata", this.onLoadedMetaData);
-        this.audio.addEventListener("load", this.onLoad);
+        this.audio.addEventListener("loadeddata", this.onLoad); // html标准的loadeddata事件相当于jsview的onLoad
         this.audio.addEventListener("audiofocusloss", this.onAudioFocusLoss);
         this.audio.addEventListener("audiofocusgain", this.onAudioFocusGain);
       }
@@ -157,19 +157,19 @@ export default {
     onJsViewShow() {
       //重新加载
       if (!this.audio) {
-        this.Jsvinit()
+        this.Jsvinit();
       }
 
       if (this.stopByOnHide) {
         this.stopByOnHide = false;
-        this.Jsvinit()
+        this.Jsvinit();
       }
     },
     Jsvinit() {
       this.audio = new Audio();
       this.registerEvent();
       if (this.src && this.src !== "") {
-        let realUrl
+        let realUrl;
         if (window.JsView) {
           // jsview上
           realUrl = new window.JsView.Dom.UrlRef(this.src).href;
@@ -200,10 +200,10 @@ export default {
           this.audio.confirmInitSetup?.();
         }
       });
-      this.registerOnVisibilityChange()
-    }
+      this.registerOnVisibilityChange();
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

package/utils/JsViewPlugin/JsvPlayer/BrowserJsvPlayer.vue

@@ -493,7 +493,7 @@ export default {
         this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
         this.video.addEventListener("progress", this.onProgress);
         this.video.addEventListener("loadedmetadata", this.onLoadedMetaData);
-        this.video.addEventListener("load", this.onLoad);
+        this.video.addEventListener("loadeddata", this.onLoad);
         this.video.addEventListener("durationchange", this.onDurationChange);
         this.video.addEventListener("seeking", this.onSeeking);
         this.video.addEventListener("seeked", this.onSeeked);

package/utils/JsViewVueTools/FeatureActive.ts

@@ -53,7 +53,8 @@ function JsvUseFeature(from: String, comp_name: String) {
         return;
     }
 
-    console.error(`Error: ${comp_name}(from ${from}) is not activated, need JsvActiveFeature(JsvFeatureNames.${comp_name}) in boot`);
+    // 未激活简易提示, need JsvActiveFeature(JsvFeatureNames.${ comp_name }) in boot`);
+    console.log(`LOG: ${comp_name}(from ${from}) is not activated`);
 }
 
 // 备用接口: 防止未授权组件被错误激活引起的崩溃和水印显示

package/utils/JsViewVueTools/ForgeHandles.ts

@@ -1,11 +1,13 @@
 let handles: {
     TextureManager: any,
     RootView: any,
-    RootActivity: any
+    RootActivity: any,
+    sRenderBridge: any
 } = {
     TextureManager: null,
     RootView: null,
-    RootActivity: null
+    RootActivity: null,
+    sRenderBridge: null
 }
 
 const jsvCode = (window as any).JsvCode;
@@ -13,6 +15,7 @@ jsvCode.ForgeHandles.listenToReady(() => {
     handles.TextureManager = jsvCode.ForgeHandles.TextureManager;
     handles.RootView = jsvCode.ForgeHandles.RootView;
     handles.RootActivity = jsvCode.ForgeHandles.RootActivity;
+    handles.sRenderBridge = jsvCode.ForgeHandles.sRenderBridge;
 })
 
 export default handles;