@shijiu/jsview-vue 2.1.367-test.0 → 2.1.428

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -0,0 +1,173 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+
+interface AnimSetting {
+  easing?: string | null;
+  onStart?: () => void;
+  onEnd?: (done: boolean) => void;
+  duration?: number,
+  speed?: number,
+}
+
+export class SlideAnimWrapper {
+  private frameCount: number;
+  private forgeAnim: any;
+  private element: any;
+  private animSetting: AnimSetting;
+
+  constructor(
+    frameCount: number,
+    element: any,
+    from: [number, number],
+    to: [number, number],
+    setting: AnimSetting) {
+    this.frameCount = frameCount;
+    this.animSetting = setting;
+    this.element = element;
+
+    let duration = 0;
+    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);
+    }
+    this.forgeAnim = new Forge.TranslateAnimation(
+      from[0],
+      to[0],
+      from[1],
+      to[1],
+      duration,
+      setting.easing
+    );
+    this.forgeAnim.SetAnimationListener(
+      new Forge.AnimationListener(this.onStart.bind(this), this.onEnd.bind(this), null)
+    );
+  }
+
+  public start() {
+    this.element?.jsvGetProxyView(true).StartAnimation(this.forgeAnim);
+  }
+
+  public removeListener() {
+    this.forgeAnim?.RemoveAnimationListener();
+  }
+
+  public stop() {
+    this.element?.jsvGetProxyView(true).StopAnimation();
+  }
+
+  public getFrameCount() {
+    return this.frameCount;
+  }
+
+  private onStart() {
+    this.animSetting?.onStart?.();
+  }
+
+  private onEnd(done: boolean) {
+    this.animSetting?.onEnd?.(done);
+  }
+}
+
+export class AnimationManager {
+  private animList: Array<SlideAnimWrapper> = [];
+  private frameCount: number = 0;
+
+  public startSlideAnim(element: any, from: [number, number], to: [number, number], setting: AnimSetting) {
+    let curFrameCount = Forge.sFrameCount.count;
+    if (curFrameCount != this.frameCount) {
+      this.tryCleanOldAnim();
+      this.frameCount = curFrameCount;
+    }
+    const obj = new SlideAnimWrapper(curFrameCount, element, from, to, setting);
+    this.animList.push(obj);
+    obj.start();
+    return () => {
+      if (obj.getFrameCount() == Forge.sFrameCount.count) {
+        obj.removeListener();
+      }
+      obj.stop();
+    }
+  }
+
+  private tryCleanOldAnim() {
+    for (let i = this.animList.length - 1; i >= 0; --i) {
+      const anim = this.animList[i];
+      if (anim.getFrameCount() != this.frameCount) {
+        this.animList.splice(i, 1);
+        anim.stop();
+      }
+    }
+  }
+}
+
+type CancelFunc = () => {};
+
+export type TaskRunner = () => CancelFunc;
+
+class CancellableRunner {
+  private cancelHandler: CancelFunc | null = null;
+  private runner: TaskRunner | null = null;
+  constructor(r: TaskRunner) { 
+    this.runner = r;
+  }
+
+  run() {
+    if (this.runner) {
+      this.cancelHandler = this.runner();
+    }
+  }
+
+  cancel() {
+    this.cancelHandler?.();
+    this.runner = null;
+    this.cancelHandler = null;
+  }
+}
+
+
+export enum TaskType {
+  RESIZE_ITEM,
+  SLIDE,
+  ON_FOCUS_CHANGE,
+}
+
+interface Task {
+  frameCount: number,
+  type: TaskType,
+  params: any,
+}
+
+export type AddTaskCallback = (taskList: Array<object>) => void;
+
+export class TaskManager {
+  private frameCount: number = -1;
+  private widgetTaskCacheList: Array<Task> = [];
+  private cancellableRunnerList: Array<CancellableRunner> = [];
+
+  constructor(private onAddTask: AddTaskCallback) { }
+
+  public addTask(type: TaskType, params: any) {
+    if (this.frameCount != Forge.sFrameCount.count) {
+      this.widgetTaskCacheList = [];
+      this.cancellableRunnerList = [];
+      this.frameCount = Forge.sFrameCount.count;
+    }
+    //取消同帧的旧runner
+    this.cancellableRunnerList.forEach(t => {
+      t.cancel();
+    });
+
+    this.widgetTaskCacheList.push({
+      type,
+      params,
+      frameCount: Forge.sFrameCount.count,
+    });
+    this.onAddTask(this.widgetTaskCacheList);
+  }
+
+  public run(func: TaskRunner) {
+    const cancellableRunner = new CancellableRunner(func);
+    this.cancellableRunnerList.push(cancellableRunner);
+    cancellableRunner.run();
+  }
+}

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -160,6 +160,10 @@ class ListMetroTemplate extends MetroTemplate {
   }
 
   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)) {
+      return;
+    }
     const needChangeList = this.templateList.splice(index);
     needChangeList[0].width = newSize.width;
     needChangeList[0].height = newSize.height;

package/utils/JsViewVueTools/JsvTextureDefines.ts

@@ -0,0 +1,11 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+
+class TextureInstantType {
+    public static Auto: number = Forge.TextureInstantLoad.AUTO;
+    public static Sync: number = Forge.TextureInstantLoad.SYNC;
+    public static Async: number = Forge.TextureInstantLoad.ASYNC;
+}
+
+export {
+    TextureInstantType,
+}

package/utils/JsViewVueTools/JsvTextureStore/CanvasTexture/CanvasTexture.ts

@@ -2,10 +2,12 @@ import ForgeHandles from "../../../JsViewVueTools/ForgeHandles.js";
 import { TextureBase } from "../Texture"
 import * as Constants from "./CommandList"
 import { RectPath, CirclePath, CustomPath } from "./Path"
+import { TextureInstantType } from "../../JsvTextureDefines";
 
 class CanvasTexture extends TextureBase {
     private drawCommands: Array<Object> | null = [];
     private commited: boolean = false; // commit只能执行一次, 执行过后无法再更改texture内容
+    private instantLoad: number = TextureInstantType.Sync;
 
     /**
      * canvasTexture
@@ -134,14 +136,18 @@ class CanvasTexture extends TextureBase {
      * @param {Array<String>} colorArray 颜色设定的数组
      * @param {Array<double>} stopsArray 与color数组个数相同,颜色基准点位置
      */
-    fillLinearGradient(
+    drawLinearGradientRect(
         fromX: Number, fromY: Number,
         toX: Number, toY: Number,
         colorArray: Array<String>,
         stopsArray: Array<Number>,
     ) {
+        if (!colorArray || !stopsArray || colorArray.length !== stopsArray.length) {
+            console.error("CanvasTexture error: drawLinearGradientRect colorArray.length must be equal to stopsArray.length. Current array is:", Array.from(colorArray), Array.from(stopsArray));
+            return;
+        }
         this.drawCommands?.push({
-            "cmd": Constants.CMD_FILL_LINEAR_GRADIENT,
+            "cmd": Constants.CMD_DRAW_LINEAR_GRADIENT_RECT,
             "x0": fromX,
             "y0": fromY,
             "x1": toX,
@@ -151,11 +157,29 @@ class CanvasTexture extends TextureBase {
         })
     }
 
+    /**
+     * setAsyncLoad
+     * texture异步加载，让界面不会卡顿
+     * 
+     * @param {int} fromX 绘制起点X
+     * @param {int} fromY 绘制起点Y
+     * @param {int} toX 绘制终点X
+     * @param {int} toY 绘制终点Y
+     * @param {Array<String>} colorArray 颜色设定的数组
+     * @param {Array<double>} stopsArray 与color数组个数相同,颜色基准点位置
+     */
+    setAsyncLoad() {
+        this.instantLoad = TextureInstantType.Async;
+    }
+
     // override
     commit(): String {
         if (!this.commited) {
             // 使用当前的指令列表创建CanvasTexture
-            this.textureRef = (ForgeHandles.TextureManager as any).GetCanvasTexture(JSON.stringify(this.drawCommands));
+            this.textureRef = (ForgeHandles.TextureManager as any).GetCanvasTexture(
+                JSON.stringify(this.drawCommands),
+                this.instantLoad
+            );
             this.addToStore();
             this.commited = true;
 

package/utils/JsViewVueTools/JsvTextureStore/CanvasTexture/CommandList.ts

@@ -16,7 +16,7 @@ export const CMD_DRAW_CIRCLE_WITH_PAINT = 12;
 export const CMD_DRAW_RECT_WITH_PAINT = 13;
 export const CMD_DRAW_PATH_WITH_PAINT = 14;
 export const CMD_DRAW_LINE = 15;
-export const CMD_FILL_LINEAR_GRADIENT = 16;
+export const CMD_DRAW_LINEAR_GRADIENT_RECT = 16;
 
 //! Path的子命令
 export const PATH_CMD_MOVE_TO = 30;

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -40,34 +40,6 @@ let sTextureStoreApi: Object = {
         return new CanvasTexture(width, height, baseName);
     },
 
-    /**
-     * getLinearGradientTexture
-     * 按照要求创建一个绘制渐变色的纹理,
-     * 绘制从起始位置到终止位置的一条线，
-     * 例如从右边上的中点绘制到上边缘的中点的直线: RIGHT:0.5 -> TOP:0.5
-     * 返回值为访问名
-     * 
-     * @param {int} startSide  JsvTextureConst的 LEFT/TOP/RIGHT/BOTTOM, 起始位置
-     * @param {double} startSidePercent  起始点在所在边的比例位置
-     * @param {int} endSide  JsvTextureConst的 LEFT/TOP/RIGHT/BOTTOM, 终止位置
-     * @param {double} endSidePercent  终止点在所在边的比例位置
-     * @param {Array<String>} colorArray 颜色基准点的颜色队列
-     * @param {int} stopsDenominator  stops信息百分比的分母，值越小其texture越省内存
-     * @param {Array<int>} stopsArray  颜色基准点的百分比的分子队列
-     * 
-     * @return {String} 此Texture的访问名，可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名"使用
-     */
-    getLinearGradientTexture: (
-        startSide: Number, startSidePercent: Number,
-        endSide: Number, endSidePercent: Number,
-        colorArray: Array<String>,
-        stopsDenominator: Number, stopsArray: Array<Number>
-    ): String => {
-        // TODO: 仿照ResProvider的GetLinearGradientTexture调用 this.canvasTexture 创建width+x/height+x的的texture
-        // 然后进行绘制一个填满整个canvas的texture
-        return "";
-    },
-
     /**
      * deleteTexture
      * 删除commit后的texture

package/utils/JsViewVueTools/index.js

@@ -22,3 +22,4 @@ export { default as DefaultKeyCodeMap } from "./DefaultKeyMap.js";
 export * from "./JsvDemoTester.js"
 export * from "./JsvPerformance.ts"
 export * from "./JsvTextureStore/JsvTextureStore.ts"
+export * from "./JsvTextureDefines.ts"

package/utils/JsViewVueWidget/JsvFlexCell/JsvFlexDiv.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: donglin.lu@qcast.cn
+ * @Date: 2024-01-26 17:24:00
+ * @LastEditors: donglin.lu@qcast.cn
+ * @Description: file content
+-->
+
+<!--
+ * 【模块 export 内容】
+ *  JsvFlexDiv: 包装成一个支持flex属性的div
+ *      props说明:
+ *          class: 等同于div的class设置(目前未实装，后续支持...)
+ *          style: 等同于div的style，关于flex的属性支持如下：
+ *              作为container:
+ *                  flexDirection: row|row-reverse|column|column-reverse  默认row, 决定主轴为行还是列，正向还是反向
+ *                  flexWrap: nowrap|wrap  默认nowrap, 主轴方向是否换行
+ *                  justifyContent: flex-start|flex-end|center  默认flex-start
+ *                                  主轴对齐方式(与direction相关决定start为左还是右)
+ *                  alignItems: flex-start|flex-end|center|stretch  默认center
+ *                                  副轴方向单行内的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
+ *                  alignContent: flex-start|flex-end|center  默认flex-start
+ *                                  副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
+ *              作为item(二级container):
+ *                  alignSelf: auto|flex-start|flex-end|center|stretch  默认auto, 覆盖container的alignItems设置
+ *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
+ *          askSize: boolean  设置会跟进flex的尺寸变化，但会降低性能
+ *          onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
+ *
+ *      expose说明:
+ *          getWidth():  当askSize或者onSize生效时，获取元素的宽度
+ *          getHeight():  当askSize或者onSize生效时，获取元素的高度
+ *                   
+-->
+<script setup>
+import { shallowRef, watchEffect } from "vue";
+
+const props = defineProps({
+  style: Object,
+  askSize: {
+    type: Boolean,
+    default: false,
+  },
+  onSized: {
+    type: Function,
+    default: null,
+  },
+});
+
+let config = shallowRef({});
+config.value["data-jsv-flex-container"] = true;
+
+watchEffect(() => {
+  // 追加一个默认的flexWrap设置，以触发ElementDelegate的flex读取机制
+  // flex-div直接设置的属性不能为以下内容，在此进行清理:
+  // 1. 不能有 overflow:'hidden' 属性
+  config.value.style = { flexWrap: "nowrap", ...props.style, overflow: "" };
+});
+
+// 尺寸信息记录
+let SizeX = shallowRef(undefined);
+let SizeY = shallowRef(undefined);
+let SizeWidth = shallowRef(undefined);
+let SizeHeight = shallowRef(undefined);
+
+// 尺寸信息的回调处理
+let onSizeCallback = (x, y, width, height) => {
+  SizeX.value = x;
+  SizeY.value = y;
+  SizeWidth.value = width;
+  SizeHeight.value = height;
+
+  if (width != 0 && height != 0) {
+    // 忽略0尺寸这个中间过程的回调
+    props.onSized?.(width, height);
+  }
+};
+let containerRef = shallowRef(null);
+let flexCallbackRegisted = false;
+watchEffect(() => {
+  if ((props.askSize || props.onSized != null) && containerRef.value != null) {
+    if (!flexCallbackRegisted) {
+      // 注册只做一次，反复注册会影响性能
+      containerRef.value.jsvGetProxyView().RegisterFlexAssigned(onSizeCallback);
+      flexCallbackRegisted = true;
+    }
+  } else {
+    // 取消注册
+    if (flexCallbackRegisted) {
+      containerRef.value.jsvGetProxyView().RegisterFlexAssigned(null);
+      flexCallbackRegisted = false;
+    }
+  }
+});
+
+defineExpose({
+  // TODO: PC模拟环境中目前没有浏览器的类似ResizeObserver接口
+  //       可以监听到left/ top变化，所以先关闭Left / Top的获取
+  // getLeft: () => {
+  //   return SizeX.value;
+  // },
+  // getTop: () => {
+  //   return SizeY.value;
+  // },
+
+  getWidth: () => {
+    return SizeWidth.value;
+  },
+  getHeight: () => {
+    return SizeHeight.value;
+  },
+});
+</script>
+
+<template>
+  <div ref="containerRef" v-bind="{ ...$attrs, ...config }">
+    <slot />
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvFlexCell/index.js

@@ -0,0 +1,6 @@
+
+import JsvFlexDiv from "./JsvFlexDiv.vue";
+
+export {
+  JsvFlexDiv
+}

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetCondition.ts

@@ -97,6 +97,27 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.BoxPosition(left, top, right, bottom, this._CommonInfo));
   }
 
+  offsetPosition(left: UNumber, top: UNumber, right: UNumber, bottom: UNumber): object | null {
+    if (!this._CheckCommonInfo()) {
+      return null;
+    }
+    this._CommonInfoValid = false;
+
+    return this._BuildPack(ConditionSetBuilder.OffsetPosition(left, top, right, bottom, this._CommonInfo));
+  }
+
+  startMove(xEnable: boolean, yEnable: boolean) {
+    if (!this._CheckCommonInfo()) {
+      return null;
+    }
+    this._CommonInfoValid = false;
+    let direction = 0;
+    if (xEnable) { direction |= 1; }
+    if (yEnable) { direction |= 2; } 
+
+    return this._BuildPack(ConditionSetBuilder.StartMove(direction, this._CommonInfo));
+  }
+
   /**
    * AcrossPosition
    * 获取 AcrossPosition 的condition
@@ -230,6 +251,14 @@ class ConditionPackBuilder {
     return this._BuildPack(ConditionSetBuilder.OnFlingEnd(this._CommonInfo, this._ContorlSlefNexus.token));
   }
 
+  onFlingCancel() {
+    if (!this._CheckCommonInfo()) {
+      return null;
+    }
+    this._CommonInfoValid = false;
+    return this._BuildPack(ConditionSetBuilder.OnFlingCancel(this._CommonInfo, this._ContorlSlefNexus.token));
+  }
+
   _CheckCommonInfo(): boolean {
     if (!this._CommonInfoValid) {
       console.error("Error: must call from new conditoin()");

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetState.ts

@@ -87,6 +87,10 @@ class StatePackBuilder {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.SetHitWallOverflow());
   }
 
+  touchLockSwitch(isLock: boolean, direction: number, unlockThreshold: number = -1) {
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.TouchLockSwitch(isLock, direction, unlockThreshold));
+  }
+
   /*
    * fireNexusEvent 发出Nexus event
    */

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -109,32 +109,34 @@ export default {
     },
     _initForHtml() {
       let _this = this;
-      this.$refs.innerView?.jsvGetProxyView(true).RegisterOnProxyReady(() => {
-        const canvas = window.originDocument.createElement("canvas");
-        canvas.style.width = _this.style.width + "px";
-        canvas.style.height = _this.style.height + "px";
-        _this.$refs.innerView
-          ?.jsvGetProxyView(true)
-          .HtmlGetElement()
-          .appendChild(canvas);
+      this.$refs.innerViewDiv
+        ?.jsvGetProxyView(true)
+        .RegisterOnProxyReady(() => {
+          const canvas = window.originDocument.createElement("canvas");
+          canvas.style.width = _this.style.width + "px";
+          canvas.style.height = _this.style.height + "px";
+          _this.$refs.innerViewDiv
+            ?.jsvGetProxyView(true)
+            .HtmlGetElement()
+            .appendChild(canvas);
 
-        const clip_image = new Image();
-        const bg_image = new Image();
-        clip_image.src = _this.maskSrc;
-        bg_image.src = _this.viewSrc;
-        let clip_ready = false;
-        let bg_ready = false;
+          const clip_image = new Image();
+          const bg_image = new Image();
+          clip_image.src = _this.maskSrc;
+          bg_image.src = _this.viewSrc;
+          let clip_ready = false;
+          let bg_ready = false;
 
-        clip_image.onload = () => {
-          clip_ready = true;
-          _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
-        };
+          clip_image.onload = () => {
+            clip_ready = true;
+            _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
+          };
 
-        bg_image.onload = () => {
-          bg_ready = true;
-          _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
-        };
-      });
+          bg_image.onload = () => {
+            bg_ready = true;
+            _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
+          };
+        });
     },
     _updateInnerView() {
       if (this.innerView === null) {
@@ -205,7 +207,7 @@ export default {
 <template>
   <div
     v-if="html"
-    ref="innerView"
+    ref="innerViewDiv"
     :style="{
       top: style.top,
       left: style.left,
@@ -213,7 +215,6 @@ export default {
   ></div>
   <div
     v-else
-    ref="innerView"
     :data-jsv-vw-innerview="innerViewId"
     :style="{
       top: style.top,