@shijiu/jsview-vue 2.2.35 → 2.2.128

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,
@@ -154,7 +155,7 @@ 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
     }
   }
 

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) {

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/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;
@@ -173,8 +171,16 @@ class ListMetroTemplate extends MetroTemplate {
         break;
       }
     }
+    //TODO 不是一次性加载全部, 可视区域外的懒惰加载
     for (let i of needChangeList) {
       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/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/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,