@shijiu/jsview-vue 2.2.35 → 2.2.201

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -1,6 +1,7 @@
 import { ref, computed } from "vue";
 import type { Ref } from "vue";
 import { TemplateItem } from "../TemplateParser/MetroTemplate"
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine";
 
 interface RenderItemStyle {
   zIndex: number,
@@ -15,6 +16,7 @@ interface ItemConfig {
   normalZIndex: number,
   itemSlide: number,
   permanent: boolean,
+  showSkeleton: boolean,
 }
 
 interface CustomerCallbackMap {
@@ -37,6 +39,7 @@ export class RenderItem {
   public touchInit: boolean = false;
   public rootDiv: HTMLDivElement | null = null;
   public enableTap: boolean = false;
+  public renderKey: Ref<number> = ref(0);
 
   private customerCallbackMap: CustomerCallbackMap = {};
   private onRef: (() => void) | null;
@@ -69,6 +72,14 @@ export class RenderItem {
     return this.templateInfo.index;
   }
 
+  public updateCustomData(newCustomData: object, newItemConfig: ItemConfig) {
+    this.customerData = newCustomData;
+    this.itemConfig = newItemConfig;
+    this.customerCallbackMap = {};
+    this.mounted.value = false;
+    this.renderKey.value++;
+  }
+
   //TODO item的div ref 会调用多次, 待调查
   public divRef = (ele: HTMLDivElement | null) => {
     this.rootDiv = ele;
@@ -154,12 +165,13 @@ export class RenderItem {
     this.divMountedCallback.clear();
     if (this.enableTap && this.rootDiv) {
       const divView = (this.rootDiv as any).jsvGetProxyView();
-      divView.DragEnables?.(0x01); // 只激活tap
+      divView.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_CLICK_BIT); // 只激活tap
     }
   }
 
   private onDivUnmounted(): void {
     this.touchInit = false;
     this.divMountedCallback.clear();
+    this.customerCallbackMap = {};
   }
 }

package/utils/JsViewEngineWidget/MetroWidget/Slide.ts

@@ -0,0 +1,56 @@
+import { getCurFrameCount } from "../WidgetCommon";
+
+export interface TargetRectInfo {
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  frameCount: number,
+}
+
+export class RectCache {
+  private preRect: TargetRectInfo | null = null;
+  private curRect: TargetRectInfo | null = null;
+
+  public cache(rect: TargetRectInfo) {
+    if (this.curRect && this.curRect.frameCount < rect?.frameCount) {
+      this.preRect = this.curRect;
+    }
+    this.curRect = rect;
+  }
+
+  public cacheManually() {
+    if (this.curRect && this.curRect.frameCount < getCurFrameCount()) {
+      this.preRect = this.curRect;
+      this.curRect = null;
+    }
+  }
+
+  public getCurRect(): TargetRectInfo | null {
+    return this.curRect ? { ...this.curRect } : null;
+  }
+
+  public getPreRect(): TargetRectInfo | null {
+    return this.preRect ? { ...this.preRect } : null;
+  }
+
+  public updatePre(key: "left" | "top" | "width" | "height", value: number) {
+    if (this.preRect) {
+      let p = this.preRect[key];
+      this.preRect[key] = value;
+    }
+  }
+  
+  public clean() {
+    this.preRect = null;
+    this.curRect = null;
+  }
+}
+
+export const getDirectionByRect = (curRect: TargetRectInfo, preRect: TargetRectInfo) => {
+  if (!preRect || !curRect) return { horizontal: 0, vertical: 0 };
+  return {
+    horizontal: curRect.left < preRect.left ? -1 : (curRect.left > preRect.left ? 1 : 0),
+    vertical: curRect.top < preRect.top ? -1 : (curRect.top > preRect.top ? 1 : 0),
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -107,7 +107,7 @@ export type TaskRunner = () => CancelFunc;
 class CancellableRunner {
   private cancelHandler: CancelFunc | null = null;
   private runner: TaskRunner | null = null;
-  constructor(r: TaskRunner) { 
+  constructor(r: TaskRunner) {
     this.runner = r;
   }
 
@@ -126,29 +126,55 @@ class CancellableRunner {
 
 
 export enum TaskType {
-  RESIZE_ITEM,
+  RESIZE_ITEM = 1,
   SLIDE,
   ON_FOCUS_CHANGE,
 }
 
+export enum SlideTaskType {
+  SLIDE_BY_POS = 1,
+  SLIDE_BY_ITEM,
+  SLIDE_BY_DIV,
+  SLIDE_BY_RECT,
+}
+
+type SubType = SlideTaskType | null;
+
 interface Task {
   frameCount: number,
   type: TaskType,
+  subType: SubType,
   params: any,
 }
 
-export type AddTaskCallback = (taskList: Array<object>) => void;
-
+export interface AllTaskList {
+  slide: Array<Task>,
+  focus: Array<Task>,
+  resize: Array<Task>,
+}
+export type AddTaskCallback = (taskList: AllTaskList) => void;
 export class TaskManager {
   private frameCount: number = -1;
-  private widgetTaskCacheList: Array<Task> = [];
   private cancellableRunnerList: Array<CancellableRunner> = [];
 
+  //三类task: 1.slide, 2.resize, 3.focus
+  private allTaskList: AllTaskList = {
+    slide: [],
+    focus: [],
+    resize: [],
+  }
+
   constructor(private onAddTask: AddTaskCallback) { }
 
-  public addTask(type: TaskType, params: any) {
+  private cleanTaskCache(): void {
+    this.allTaskList.slide = [];
+    this.allTaskList.focus = [];
+    this.allTaskList.resize = [];
+  }
+
+  public addTask(type: TaskType, params: any, subtype: SubType = null) {
     if (this.frameCount != Forge.sFrameCount.count) {
-      this.widgetTaskCacheList = [];
+      this.cleanTaskCache();
       this.cancellableRunnerList = [];
       this.frameCount = Forge.sFrameCount.count;
     }
@@ -157,12 +183,27 @@ export class TaskManager {
       t.cancel();
     });
 
-    this.widgetTaskCacheList.push({
+    const tObj = {
       type,
+      subType: subtype,
       params,
       frameCount: Forge.sFrameCount.count,
-    });
-    this.onAddTask(this.widgetTaskCacheList);
+    }
+    switch (type) {
+      case TaskType.SLIDE:
+        this.allTaskList.slide.push(tObj)
+        break;
+      case TaskType.ON_FOCUS_CHANGE:
+        this.allTaskList.focus.push(tObj)
+        break;
+      case TaskType.RESIZE_ITEM:
+        this.allTaskList.resize.push(tObj)
+        break;
+      default:
+        console.error("undefined type")
+        break;
+    }
+    this.onAddTask(this.allTaskList);
   }
 
   public run(func: TaskRunner) {
@@ -170,4 +211,12 @@ export class TaskManager {
     this.cancellableRunnerList.push(cancellableRunner);
     cancellableRunner.run();
   }
+
+  public cancelAllTask() {
+    this.cleanTaskCache();
+    this.cancellableRunnerList.forEach(t => {
+      t.cancel();
+    });
+    this.cancellableRunnerList = [];
+  }
 }

package/utils/JsViewEngineWidget/MetroWidget/TokenGenerator.ts

@@ -0,0 +1,10 @@
+const MaxNumber = Math.round(Number.MAX_SAFE_INTEGER / 2);
+export class TokenGenerator {
+  private token = 0;
+  public get(): number {
+    if (this.token + 1 > MaxNumber) {
+      this.token = 1;
+    }
+    return ++this.token;
+  }
+}

package/utils/JsViewEngineWidget/TemplateParser/CommonMetroTemplate.ts

@@ -794,18 +794,28 @@ class CommonMetroTemplate extends MetroTemplate {
         endIndex = baseItem.index;
       }
       if (Math.abs(startIndex - endIndex) <= 1) {
-        const tailItem = this.templateList[this.getTailItemIndex()];
-        let tailInfo: any = null;
-        if (tailItem) {
-          tailInfo = {
-            left: tailItem.left,
-            top: tailItem.top,
-            width: tailItem.width,
-            height: tailItem.height,
+        const startItem = this.templateList[startIndex];
+        const endItem = this.templateList[endIndex];
+        if (visible(startItem[posKey], startItem[posKey] + startItem[sizeKey])) {
+          baseItem = startItem;
+          break;
+        } else if (visible(endItem[posKey], endItem[posKey] + endItem[sizeKey])) {
+          baseItem = endItem;
+          break;
+        } else {
+          const tailItem = this.templateList[this.getTailItemIndex()];
+          let tailInfo: any = null;
+          if (tailItem) {
+            tailInfo = {
+              left: tailItem.left,
+              top: tailItem.top,
+              width: tailItem.width,
+              height: tailItem.height,
+            }
           }
+          console.log("MetroWidget: can not find visible item", visibleStart, visibleEnd, tailInfo);
+          return [-1, -1];
         }
-        console.log("MetroWidget: can not find visible item", visibleStart, visibleEnd, tailInfo);
-        return [-1, -1];
       } else {
         baseItem = this.templateList[Math.round((startIndex + endIndex) / 2)];
       }

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -1,5 +1,5 @@
 import { MetroTemplate, TemplateItem, MeasureInfo } from "./MetroTemplate"
-import { VERTICAL, HORIZONTAL, FocusMoveType } from "../WidgetCommon";
+import { VERTICAL, HORIZONTAL, FocusMoveType, getCurFrameCount } from "../WidgetCommon";
 
 const TAG = "ListMetroTemplate";
 
@@ -123,8 +123,6 @@ class ListMetroTemplate extends MetroTemplate {
       return [-1, -1]
     }
 
-
-
     let item = this.getItemById(baseId);
     const startIndex = item ? item.index : Math.round(this.size / 2);
     let start = -1, end = -1;
@@ -159,6 +157,23 @@ class ListMetroTemplate extends MetroTemplate {
     return [start, end];
   }
 
+  private cleanResizeChangeItem(i: TemplateItem) {
+    i.neighborIndexList.left = [];
+    i.neighborIndexList.top = [];
+    i.neighborIndexList.right = [];
+    i.neighborIndexList.bottom = [];
+
+    i.tmpNeighborIndexList.left = [];
+    i.tmpNeighborIndexList.top = [];
+    i.tmpNeighborIndexList.right = [];
+    i.tmpNeighborIndexList.bottom = [];
+
+    i.pathHistory.left = -1;
+    i.pathHistory.top = -1;
+    i.pathHistory.right = -1;
+    i.pathHistory.bottom = -1;
+  }
+
   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)) {
@@ -173,8 +188,17 @@ class ListMetroTemplate extends MetroTemplate {
         break;
       }
     }
+    //TODO 不是一次性加载全部, 可视区域外的懒惰加载
     for (let i of needChangeList) {
+      this.cleanResizeChangeItem(i);
       this._addTemplateItem(i);
+      i.layoutCache.cache({
+        left: i.left,
+        top: i.top,
+        width: i.width,
+        height: i.height,
+        frameCount: getCurFrameCount(),
+      })
     }
   }
 }

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -1,6 +1,7 @@
 import { checkType, toRawType, getTypeName } from "../CheckType.js";
 import { METRO_WIDGET } from "../MetroWidget/Const";
-import { VERTICAL } from "../WidgetCommon";
+import { VERTICAL, getCurFrameCount } from "../WidgetCommon";
+import { RectCache } from "../MetroWidget/Slide";
 
 const TAG = "MetroTemplate";
 
@@ -160,7 +161,7 @@ interface TemplateItem {
     bottom: number,
   }
   findNextAnchor: FindNextAnchor | null,
-  layoutCache: { top: number, left: number, width: number, height: number } | null,
+  layoutCache: RectCache,
   uid?: string,
 }
 
@@ -266,6 +267,14 @@ abstract class MetroTemplate {
     if (itemObj.uid) {
       (this.uidMap as any)[itemObj.uid] = item;
     }
+    //初次缓存rect, 为resize准备
+    item.layoutCache.cache({
+      left: item.left,
+      top: item.top,
+      width: item.width,
+      height: item.height,
+      frameCount: getCurFrameCount(),
+    })
     return item;
   }
 
@@ -278,15 +287,22 @@ abstract class MetroTemplate {
 
   public getBoundingBoxSize() {
     const lastItem = this.templateList[this.templateList.length - 1];
-    if (this.direction == VERTICAL) {
-      return {
-        width: this.lineMax,
-        height: lastItem.height + lastItem.top - 1,
+    if (lastItem) {
+      if (this.direction == VERTICAL) {
+        return {
+          width: this.lineMax,
+          height: lastItem.height + lastItem.top - 1,
+        }
+      } else {
+        return {
+          height: this.lineMax,
+          width: lastItem.width + lastItem.left - 1,
+        }
       }
     } else {
       return {
-        height: this.lineMax,
-        width: lastItem.width + lastItem.left - 1,
+        width: 0,
+        height: 0,
       }
     }
   }
@@ -295,32 +311,6 @@ abstract class MetroTemplate {
     return this.tailItemIndex;
   }
 
-  public cacheLayout(start: number, end: number) {
-    if (typeof end == "undefined") {
-      end = this.templateList.length;
-    }
-    end = Math.min(end, this.templateList.length);
-    for (let i = start; i < end; ++i) {
-      let item = this.templateList[i];
-      item.layoutCache = {
-        left: item.left,
-        top: item.top,
-        width: item.width,
-        height: item.height,
-      }
-    }
-    this.cachedLayoutRange.push([start, end]);
-  }
-
-  public cleanLayoutCache() {
-    for (let r of this.cachedLayoutRange) {
-      for (let i = r[0]; i < r[1]; ++i) {
-        this.templateList[i].layoutCache = null;
-      }
-    }
-    this.cachedLayoutRange = [];
-  }
-
   protected static getTemplateItem(itemObj: MeasureInfo): TemplateItem {
     const valid = this.checkMeasureObject(itemObj);
     if (!valid) {
@@ -362,7 +352,7 @@ abstract class MetroTemplate {
         top: -1,
         bottom: -1,
       },
-      layoutCache: null,
+      layoutCache: new RectCache(),
     }
   }
 

package/utils/JsViewEngineWidget/TemplateParser/TemplateItemAdder.ts

@@ -55,6 +55,8 @@ class TemplateItemAdder {
   }
 
   public tryAddItem(cur_item: TemplateItem | null = null, page_num: number = 1) {
+    if (!this._Data || this._Data.length <= 0) { return; }
+
     let added = false;
     if (
       this._CurIndex < this._Data.length &&
@@ -86,6 +88,8 @@ class TemplateItemAdder {
   }
 
   tryAddItemByPosition(position: number) {
+    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);
@@ -94,6 +98,7 @@ class TemplateItemAdder {
   }
 
   tryAddItemByIndex(index: number) {
+    if (!this._Data || this._Data.length <= 0) { return; }
     let _index = Math.min(index, this._Data.length - 1);
     let added = false;
     while (this._CurIndex <= _index) {
@@ -121,6 +126,7 @@ class TemplateItemAdder {
   }
 
   tryAddItemById(id: number) {
+    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) {
@@ -153,6 +159,7 @@ class TemplateItemAdder {
   }
 
   tryAddItemByUid(uid: string) {
+    if (!this._Data || this._Data.length <= 0) { return; }
     if (this._MetroTemplate.getItemByUid(uid)) {
       //已经添加
       return;

package/utils/JsViewEngineWidget/WidgetCommon.ts

@@ -5,6 +5,12 @@
  * @LastEditTime: 2022-12-01 16:49:21
  * @Description: file content
  */
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+
+export const getCurFrameCount = () => {
+  return Forge.sFrameCount.count;
+}
+
 export class BaseDispatcher {
   private _Component: any;
 
@@ -92,8 +98,7 @@ export const SlideStyle = {
   endBoundaryProtect: 2,
 };
 
-export const VERTICAL = Symbol("vertical");
-export const HORIZONTAL = Symbol("horizontal");
+export { VERTICAL, HORIZONTAL } from "../JsViewVueTools/ConstSymbol";
 
 const defaultSpeed = 1.5;
 const defaultEasing = "";
@@ -159,6 +164,8 @@ export class WholePageSlide extends SlideSetting {
  *                                      endPercennt: 右/下侧触发滚动的比例 0-1
  *                                      headRange: 左/上按键触发滚动的区域比例 0-1
  *                                      tailRange: 右/下按键触发滚动的区域比例 0-1
+ *                                      headSafeArea: 保证头部item完整显示的安全区域大小
+ *                                      tailSafeArea: 保证尾部item完整显示的安全区域大小
  *                                      speed: 滚动速度, 像素/毫秒 
  *                                      easing: 滚动动画的easing
  *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度
@@ -169,12 +176,16 @@ export class SeamlessSlide extends SlideSetting {
   public readonly StartPercent: number;
   public readonly EndPercent: number;
   public readonly FixFirstPage: boolean;
+  public readonly HeadSafeArea: number;
+  public readonly TailSafeArea: number;
 
   constructor({
     startPercent = 0.2,
     endPercent = 0.8,
     headRange = undefined,
     tailRange = undefined,
+    headSafeArea = 0.1,
+    tailSafeArea = 0.1,
     speed = defaultSpeed,
     duration = null,
     easing = defaultEasing,
@@ -188,14 +199,16 @@ export class SeamlessSlide extends SlideSetting {
       this.StartPercent = headRange;
     }
     if (typeof tailRange !== "undefined") {
-      this.EndPercent = tailRange;
+      this.EndPercent = 1 - tailRange;
     }
-    
+
     if (this.StartPercent < 0 || this.StartPercent > 1 || this.EndPercent < 0 || this.EndPercent > 1) {
       console.error(`SeamlessSlideSetting error: invalide value, startPercent(${this.StartPercent}) and endPercent(${this.EndPercent}) must between 0 and 1.`);
-      this.StartPercent = 0.2;
-      this.EndPercent = 0.8;
+      this.StartPercent = 0.3;
+      this.EndPercent = 0.7;
     }
+    this.HeadSafeArea = headSafeArea;
+    this.TailSafeArea = tailSafeArea;
     this.FixFirstPage = fixFirstPage;
   }
 }
@@ -240,4 +253,4 @@ export const FocusMoveType = {
   ROW_FIND_NEAR: 0x00000001 << 3,
 };
 
-export const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";
+export const RENDER_ITEM_BREAK_KEY = "__QcodeJsviewMetroWidgetSlot";

package/utils/JsViewEngineWidget/{index.js → index.ts}

@@ -11,7 +11,7 @@ export * from "./MetroWidget/Dispatcher";
 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.ts";
+export { METRO_WIDGET, METRO_WIDGET_CONST } from "./MetroWidget/Const";
 
 export { default as JsvFocusBlock } from "./JsvFocus/JsvFocusBlock.vue";
 export { jsvCreateFocusManager, useFocusHub } from "./JsvFocus/JsvFocusManager";

package/utils/JsViewPlugin/JsvAudio/AudioProxy.js

@@ -11,7 +11,7 @@ import { ScreenLockManager } from "./ScreenLockManager.js";
 
 let sPluginLoader = GetPluginLoader();
 
-const TAG = "JsvAudio";
+const TAG = "JsvAudio:";
 
 let keyToken = 0;
 const getKeyToken = () => {
@@ -77,6 +77,8 @@ class AudioProxy {
     this._created = false;
     this._eventListener = {};
     this._propCache = {};
+    this._unloaded = false;
+    this._visibility = window.JsView?.getVisibility();
     this._onVisibilityChange = this.onVisibilityChange.bind(this);
     window.JsView?.onVisibilityChange(this._onVisibilityChange);
   }
@@ -207,18 +209,33 @@ class AudioProxy {
 
   /** control */
   load() {
+    if (this._unloaded) {
+      console.warn(TAG, "Instead of calling load() after unload(), please update component's key to create a new JsvAudio.");
+      return;
+    }
     this.setProperty("enablePlayer", true);
   }
 
   play() {
-    this.setProperty("paused", false);
+    if (this._visibility) {
+      this.setProperty("paused", false);
+      if (typeof this._propCache["customerPause"] !== "undefined") {
+        this._propCache["customerPause"] = false;
+      }
+    } else {
+      console.warn(TAG, "JsvAudio can not play when it is invisible.");
+    }
   }
 
   pause() {
     this.setProperty("paused", true);
+    if (typeof this._propCache["customerPause"] !== "undefined") {
+      this._propCache["customerPause"] = true;
+    }
   }
 
   unload() {
+    this._unloaded = true;
     this.pause();
     this.setProperty("enablePlayer", false);
   }
@@ -321,6 +338,7 @@ class AudioProxy {
   onVisibilityChange(state) {
     console.log(TAG, "audio visibility change", JSON.stringify(state));
     if (state.status == "show") {
+      this._visibility = true;
       if (typeof this._propCache["customerPause"] != "undefined") {
         const customerPause = this._propCache["customerPause"];
         delete this._propCache["customerPause"];
@@ -330,6 +348,7 @@ class AudioProxy {
       }
     } else {
       // pause when invisible
+      this._visibility = false;
       this._propCache["customerPause"] = this._propCache["paused"];
       this.pause();
     }

package/utils/JsViewPlugin/JsvPlayer/BrowserJsvPlayer.vue

@@ -270,6 +270,11 @@ export default {
      * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
      */
     active: { type: Boolean, default: true },
+
+    /**
+     * 属性，Number，视频播放窗的圆角设置
+     */
+    corner: { type: Number, default: 0 },
   },
   components: {},
   watch: {
@@ -366,6 +371,7 @@ export default {
       // 创建PC版本的video标签
       this.video = window.originDocument.createElement("video");
       this._extendsApi(this.video);
+      this.video.style.borderRadius = this.corner + "px";
     } else {
       this.video.setRef();
       first_create = false;
@@ -489,7 +495,13 @@ export default {
 </script>
 
 <template>
-  <div :style="holeStyle" backgroundColor="rgba(0,0,0,1)">
+  <div
+    :style="{
+      ...holeStyle,
+      backgroundColor: 'rgba(0,0,0,1)',
+      borderRadius: corner,
+    }"
+  >
     <div
       :style="{
         left: holeStyle.left,