@shijiu/jsview-vue 2.2.201 → 2.2.426-test.0

package/utils/JsViewVueTools/JsvTextureLoadTool.ts

@@ -0,0 +1,233 @@
+/**
+ * @file 
+ * 
+ * 内部组件
+ * 
+ * JsvTextureLoadTool: 对给定列表的图片资源进行后台预加载
+ * 特别注意: 在vue组件进行关联时，要在unmounted中进行对preload返回的句柄进行主动的release动作
+ * 
+ * @method 
+ *      preload
+ *          @param {Array(ItemSet)} preloadList
+ *          @param {Function} finishCallback
+*/
+
+import ForgeHandles from "./ForgeHandles";
+
+const CONST_FORMAT_TOKEN = 3349;
+class ItemSet {
+    public url: String | null;
+    public width: number;
+    public height: number;
+    public colorType: String;
+    public netSetting: any;
+    public isPosterImg: boolean;
+    public magicToken: number = CONST_FORMAT_TOKEN; // 用于规避非规定的输入值
+
+    /**
+     * @constructor
+     * @param {String} url  必填，图片的url，目前只支持 http:// 和 ./ 两个格式
+     * @param {number} width  选填，是否为了省内存而按照给定尺寸压缩图片
+     * @param {number} height  选填，是否为了省内存而按照给定尺寸压缩图片
+     * @param {String} color_type 选填，是否为了省内存而做成其他的图片解码格式
+     * @param {String} net_setting  选填，是否有特殊的网络header设置
+     * @param {boolean} is_poster_img 选填, 是否为统计为海报,海报有一套解码优先级处理
+     */
+    constructor(
+        url: String,
+        width: number = 0,
+        height: number = 0,
+        color_type: String = "RGBA_8888",
+        net_setting: any = null,
+        is_poster_img: boolean = false
+    ) {
+        if (!url || url.length == 0) {
+            console.warn("Error: url should not empty(null, \"\")");
+        }
+        this.url = url;
+        this.width = width;
+        this.height = height;
+        this.colorType = color_type;
+        this.netSetting = net_setting;
+        this.isPosterImg = is_poster_img;
+    }
+}
+
+class ItemStatus {
+    public loadStatus: boolean = false;
+    public listenerToken: number = -1;
+    public textureRef: any;
+
+    releaseResource() {
+        if (this.listenerToken != -1 && this.textureRef) {
+            this.textureRef.DisableBackgroundLoad();
+            this.textureRef.UnregisterLoadImageCallback(
+                this.listenerToken
+            );
+
+            this.listenerToken = -1;
+            this.textureRef = null;
+        }
+    }
+}
+
+class ListStatus {
+    public loadStatusList: Array<ItemStatus>;
+    public loadedInfoList: Array<any>;
+    public originDataList: Array<ItemSet>;
+    public loadingItemCount: number = 0;
+    public finishCallback: Function;
+
+    constructor(origin_data: Array<ItemSet>, finish_callback: Function) {
+        this.loadStatusList = new Array(origin_data.length).fill(null);
+        this.loadedInfoList = new Array(origin_data.length).fill(null);
+        this.originDataList = origin_data;
+        this.finishCallback = finish_callback;
+    }
+
+    onLoaded(index: number, loaded_info: any) {
+        let item_status = this.loadStatusList[index];
+        if (item_status && !item_status.loadStatus) {
+            item_status.loadStatus = true;
+            this.loadedInfoList[index] = loaded_info;
+            this.loadingItemCount--;
+            if (this.loadingItemCount == 0) {
+                this.finishCallback?.(this.loadedInfoList);
+            }
+        } else {
+            console.warn(`warn: url=${this.originDataList[index].url} already true`)
+        }
+    }
+
+    recycleResource() {
+        for (let item of this.loadStatusList) {
+            item?.releaseResource();
+        }
+    }
+}
+
+const _buildTextureRequest = (index: number, item_set: ItemSet, list_recorder: ListStatus): boolean => {
+    if (item_set.magicToken !== CONST_FORMAT_TOKEN) {
+        console.error(
+            "Error:format mismatch, data should comes from function buildPreloadInfo()"
+        );
+        return false;
+    }
+
+    const base_url = item_set.url;
+    let image_url = base_url;
+    if (base_url) {
+        if (base_url.startsWith("jsvtexturestore://")) {
+            // 直接加载，不需要跟踪
+            return false;
+        } else if (base_url.startsWith(".") || base_url?.startsWith("/")) {
+            // 相对路径，要根据jsview的api进行改造
+            if ((window as any).JsView) {
+                image_url = (((window as any).JsView as any).Dom as any).UrlRef(base_url).herf;
+            } else {
+                // Browser端不需要调整url
+            }
+        }
+
+        // 是否为指定size节省内存的texture
+        let target_size: { width: number, height: number } | null = null;
+        if (item_set.width !== 0 && item_set.height !== 0) {
+            target_size = { width: item_set.width, height: item_set.height };
+        }
+
+        let texture: any = ForgeHandles.TextureManager.GetImage2(
+            image_url,
+            false,
+            target_size,
+            item_set.colorType,
+            item_set.netSetting ?? "",
+            item_set.isPosterImg
+        );
+
+        if (!texture) {
+            console.error(
+                "Error: Preload view build texture failed for " + image_url
+            );
+            return false;
+        }
+
+        let item_status: ItemStatus = new ItemStatus();
+        list_recorder.loadStatusList[index] = item_status;
+
+        // 追加回调处理
+        item_status.listenerToken = texture.RegisterLoadImageCallback(null, (params: any) => {
+            console.log(`preload succeed ${item_set.url}, params:${JSON.stringify(params)}`);
+            list_recorder.loadStatusList[index].releaseResource();
+            list_recorder.onLoaded(index, params);
+        });
+        // 脱离view进行加载，
+        // 如果没有真实的view进行挂载很可能就会被快速地清理掉
+        // 但理论上，使用此组件的外部vue会对图片进行捆绑
+        texture.EnableBackgroundLoad();
+
+        // 记录textureRef，为了进行release时的释放动作
+        item_status.textureRef = texture;
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+const _readPreloadViewIdList = (
+    preload_list_data: Array<ItemSet> | null,
+    finish_callback: Function): ListStatus | null => {
+
+    if (!preload_list_data || preload_list_data?.length == 0) {
+        console.warn("empty list");
+        return null;
+    }
+
+    let ret_list_status: ListStatus = new ListStatus(preload_list_data, finish_callback);
+
+    // 直接在map前将为null的值删除掉
+    for (let i = 0; i < preload_list_data.length; i++) {
+        if (!preload_list_data[i] || !preload_list_data[i].url) {
+            continue;
+        }
+
+        if (_buildTextureRequest(i, preload_list_data[i], ret_list_status)) {
+            // 记录已经发送的texture请求
+            ret_list_status.loadingItemCount++;
+        } else {
+            // jsvtexturestore or build texture failed
+        }
+    }
+
+    if (ret_list_status.loadingItemCount == 0) {
+        // 无需要preload的内容
+        return null;
+    } else {
+        return ret_list_status;
+    }
+};
+
+/**
+ * 对给定的ItemSet进行preload加载，返回 ListStatus，
+ * 注意: 在vue的unmount处理中要调用ListStatus.recycleResource()进行资源回收
+ * 
+ * @function
+ * @param {ItemSet} preload_list_data  要加载资源的ItemSet列表
+ * @param {Function} finish_callback  全加载完成后的回调函数
+ * @returns {ListStatus}
+ */
+function preload(
+    preload_list_data: Array<ItemSet> | null,
+    finish_callback: Function): ListStatus | null {
+
+    return _readPreloadViewIdList(preload_list_data, finish_callback);
+}
+
+const JsvTextureLoadTool = {
+    preload,
+    ItemSet
+}
+
+export {
+    JsvTextureLoadTool
+}

package/utils/JsViewVueTools/JsvTextureStore/CapturedTexture/CapturedTexture.ts

@@ -1,5 +1,6 @@
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
 import { TextureBase } from "../Texture"
+import { FeatureNames, JsvUseFeature } from "../../FeatureActive";
 
 export type CapturedCallback = (
   textureAccessName: string,
@@ -19,6 +20,9 @@ export class CapturedTexture extends TextureBase {
     autoRecycle: boolean) {
     super(null);
 
+    // 激活引擎的功能支持
+    JsvUseFeature('JsvTextureStoreApi', FeatureNames.Capture2Texture);
+
     this._CaptureDiv = captureDiv;
     this._Callback = callback;
     this._AutoRecycle = autoRecycle;
@@ -45,7 +49,6 @@ export class CapturedTexture extends TextureBase {
 
         // 处理自动回收
         if (!this._AutoRecycle) {
-          this.textureRef.DisableAutoRecycle(); // 取消自动清理
           this.addToStore(); // 用TextureStore来跟进引用状态
         }
 

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -1,5 +1,6 @@
 /*! 
- *  JsvTextureStoreApi
+ * @file JsvTextureStoreApi
+ *
  *      canvasTexture:
  *          创建texture(图片纹理)句柄, 通过 CanvasTexture 的API进行绘制, 使用注意以下几点
  *          a. commit() 接口调用之前可以任意绘制, commit之后就无法更改, commit之后才能使用, commit后绘制内容会被全局保存
@@ -59,8 +60,11 @@ let sTextureStoreApi = {
      *                                      width: number,              // 截取div的宽
      *                                      height: number) => void     // 截取div的高
      * @param {boolean} autoRecycle 可选, 是否当无div/img引用时会自动释放
-     *                              为true的场景在callback收到资源名后, 需要使用完毕后调用 deleteTexture 手动释放
-     *                              在手动释放之前，可以赋给其他div/img来复用 
+     *                              true默认值: 此场景在回调时要立刻赋值给响应式变量控制template的节点立刻使用(并且不是v-if=false的节点),
+                                    否则会自动释放掉, 此时, texture当使用它的template节点从dom树中去掉的时候(v-if=false也算)会自动释放，
+                                    不需要主动调用deleteTexture释放.
+                                    false: 此场景在callback收到资源名后, 需要使用完毕后调用 deleteTexture 手动释放
+                                    在手动释放之前，可以赋给其他div/img来复用 
      * @return {CapturedTexture} 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
      */
     capture2Texture: (

package/utils/JsViewVueTools/JsvTextureStore/Texture.ts

@@ -13,6 +13,7 @@ export class TextureBase {
 
     protected addToStore() {
         this.storeName = this.getStoreName();
+        this.textureRef.DisableAutoRecycle(); // 被store管理的，取消自动清理
         sStore.addToStore(this.storeName, this);
     }
 

package/utils/JsViewVueTools/TextureManagerTools.ts

@@ -0,0 +1,17 @@
+
+function GetColorTexture(manager_ref: any, color_define: string) {
+    return manager_ref.GetColorTexture(color_define);
+}
+
+function GetImage(manager_ref: any, image_url: string) {
+    return manager_ref.GetImage2(image_url, false, null, "RGB_8888", null)
+}
+
+let ForgeTextureApis = {
+    GetColorTexture,
+    GetImage
+}
+
+export {
+    ForgeTextureApis,
+}

package/utils/JsViewVueTools/TypeCheckAndSet.ts

@@ -0,0 +1,66 @@
+var number_convert_tmp = new Float32Array(1);
+
+/**
+ * 创建基于基地址的全地址模式
+ * 主要用于转化以下的URL类型
+ * 类型1: "url(/相对路径/项目资源/1.png)"
+ * 类型2: "/相对路径/项目资源/1.png"
+ * 类型3: jsview内定类型 "jsvtexturestore:xxxx"
+ * 类型4: 未知的内定类型 "data:xxxx"
+ * 
+ * 同时兼容送入http://完整路径/1.png，转换出来结果等同于没有对此url进行变化
+ * 
+ * @param {string} origin_url 
+ * @return {String}
+ */
+function parseUrl(origin_url: String): String {
+    let url_result = origin_url;
+
+    // url(/xxx/xxx) 格式
+    if (url_result.startsWith('url') === true) {
+        let startIdx = url_result.indexOf('(') + 1;
+        let endIdx = url_result.lastIndexOf(')');
+        url_result = url_result.substring(startIdx, endIdx).trim();
+        if (url_result === "undefined" || url_result === "null" || url_result.length === 0) {
+            // 空内容，不进行其他自动解析和填充
+            return url_result;
+        }
+    }
+
+    // data:xxxx, jsvtexturestore:xxxx 格式
+    if (url_result.startsWith('data:') === true || url_result.startsWith('jsvtexturestore:') === true) {
+        return url_result;
+    }
+
+    // 拆掉 url() 包装后的url相对路径转换
+    let base_url = (window.location as any).jsvGetLocation ?
+        (window.location as any).jsvGetLocation()    // native运行场景，启动链接为 mjs 非 index.html场景
+        : window.location.href;
+    let url_parse = new (window as any).JsvCoreApi.UrlBuilder(url_result, base_url);
+
+    return url_parse.href;
+}
+
+function numberCheckSet(number: number): number {
+    number_convert_tmp[0] = number; // 强制类型转换, 避免JSON化时类型出错，因为 '123' 123 都能通过Nan检测
+    if (!isNaN(number_convert_tmp[0])) {
+        return number_convert_tmp[0];
+    } else {
+        console.warn(`${number} is not type of number, default as 0`);
+        return 0;
+    }
+}
+
+function urlCheckSet(origin_url: String): String {
+    if (origin_url && origin_url.indexOf("http") === 0) {
+        // 包含http和https两种请求
+        return origin_url;
+    } else {
+        return parseUrl(origin_url);
+    }
+}
+
+export {
+    numberCheckSet,
+    urlCheckSet
+};

package/utils/JsViewVueTools/index.js

@@ -9,7 +9,7 @@ export * from "./JsvDynamicCssStyle";
 export * from "./JsvDynamicKeyFrames";
 export * from "./JsvRuntimeBridge";
 export * from "./NinePatchHelper";
-export * from "./TypeCheckAndSet";
+export * from "./TypeCheckAndSet.ts";
 export * from "./JsvRefTaker";
 export * from "./JsvStyleClass";
 export * from "./JsvStyleSheetsDeclarer";
@@ -26,3 +26,6 @@ export * from "./JsvTextureDefines"
 export * from "./JsvFederationTools"
 export * from "./ConstSymbol"
 export * from "./ForgeConstDefine"
+export * from "./TextureManagerTools"
+export * from "./FeatureActive"
+export * from "./JsvTextureLoadTool"

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -7,6 +7,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvActorMove：单轴(X 或 Y)运动控制控件，可控制完成单方向的匀速运动和变速运动（抛物运动），
  *               若想进行X和Y轴同时的运动，可以通过运动分解后的两个JsvActorMove进行组合来实现

package/utils/JsViewVueWidget/JsvApic/JsvApic/JsvApic.vue

@@ -7,6 +7,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvApic：Vue高阶组件，控制动图播放
  *      prop说明:
@@ -21,8 +23,14 @@
 -->
 <script>
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-import { LoopType } from "../JsvCommonLoopToolBase";
-
+// import { LoopType } from "../JsvCommonLoopToolBase";
+export const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+  LOOP_SINGLE: 4,
+};
 export default {
   props: {
     src: String,

package/utils/JsViewVueWidget/JsvApic/JsvApic2/JsvApic2.vue

@@ -7,6 +7,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvApic：Vue高阶组件，控制动图播放
  *      prop说明:
@@ -29,7 +31,16 @@
 -->
 <script>
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-import { LoopType } from "../JsvCommonLoopToolBase";
+// import { LoopType } from "../JsvCommonLoopToolBase";
+
+//为了打包后少加载一个文件这里单独定义
+const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+  LOOP_SINGLE: 4,
+};
 
 export default {
   props: {

package/utils/JsViewVueWidget/JsvClipDiv/JsvClipDiv.vue

@@ -1,9 +1,11 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvClipDiv: Vue高阶组件，overhidden:true的div，附带有其他clip设定能力
  *  props说明:
-        style:  {Object}    (必选, 响应式) 同div的style, 提供top, left, width, height, transition, transform信息，
-                            但目前不支持borderRaduis
+ *      style:  {Object}    (必选, 响应式) 同div的style, 提供top, left, width, height, transition, transform信息，
+ *                          但目前不支持borderRaduis
  *
  *  expose函数说明:
  *

package/utils/JsViewVueWidget/JsvConnectLine/JsvConnectLine.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvConnectLine：Vue高阶组件，由JsvLine组件变化而来，用于连接两个区域的线条。
  *      props说明(注意:全部属性非响应式, 需要变更时用 key 来触发重绘):

package/utils/JsViewVueWidget/JsvDragBox/JsvDragBox.vue

@@ -0,0 +1,219 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvDragBox：在一定限制区域内拖动的容器
+ *  props说明:
+ *      boxRect   {Object}  (必填) 限制区域 { left?: number, top?: number, width: number, height: number }
+ *      dragRect  {Object}  (必填) 拖拽区域 { left?: number, top?: number, width: number, height: number }
+ *  expose函数说明:
+ *      定义: type CBK = ({left: number, top: number}) => void;
+ *      setSensor {(callback: CBK, sensitivity: number) => void} 
+ *          设置运动后触发的回调, sensitivity为回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低 
+ *      setTouchCallback { (onDragStart: CBK, onDragRelease: CBK) => void }
+ *          设置触控开始和结束回调
+ *      moveTo { (left: number, top: number) => void },
+ *          将拖拽块移动到指定位置
+ *      getPosition { () => {left: number, top: number} }
+ *          获取当前拖拽块的位置
+ *
+-->
+
+<script setup>
+import ActControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine";
+import { shallowRef, onMounted, computed } from "vue";
+
+const props = defineProps({
+  boxRect: {
+    type: Object,
+    require: true,
+    validator(value) {
+      return (
+        typeof value?.width == "number" && typeof value?.height == "number"
+      );
+    },
+  },
+  dragRect: {
+    type: Object,
+    require: true,
+    validator(value) {
+      return (
+        typeof value?.width == "number" && typeof value?.height == "number"
+      );
+    },
+  },
+});
+
+const valide = true;
+if (
+  props.boxRect.width <= props.dragRect.width ||
+  props.boxRect.height <= props.dragRect.height
+) {
+  console.error("JsvDragBox: box size must be large than drag size.");
+  valide = false;
+}
+
+let rMainDiv = shallowRef(null);
+let cController = new ActControl();
+const cWallConditionGroup = 1;
+const cSensorConditionGroup = 2;
+const rBoxStyle = computed(() => {
+  return {
+    left: props.boxRect.left ?? 0,
+    top: props.boxRect.top ?? 0,
+    width: props.boxRect.width,
+    height: props.boxRect.height,
+  };
+});
+
+let vLeft = 0;
+let vTop = 0;
+let vSensitivity = 10;
+let vSensorCallback = null;
+let vOnDragStart = null;
+let vOnDragRelease = null;
+
+function initDragBox() {
+  cController.run((cmds) => [
+    cmds.state().removeConditionByGroup(cWallConditionGroup),
+    cmds
+      .condition(cWallConditionGroup, true)
+      .boxPosition(
+        0,
+        0,
+        props.boxRect.width - props.dragRect.width,
+        props.boxRect.height - props.dragRect.height
+      )
+      .then([cmds.action().stopMoving(true)]),
+  ]);
+}
+
+function onSensor(pos) {
+  vLeft = pos.xPos;
+  vTop = pos.yPos;
+  vSensorCallback?.({ left: pos.xPos, top: pos.yPos });
+}
+
+function setSensor(callback, sensitivity) {
+  if (!callback) {
+    cController.run((cmds) => [
+      cmds.state().removeConditionByGroup(cSensorConditionGroup),
+    ]);
+    return;
+  }
+
+  vSensorCallback = callback;
+  if (sensitivity != vSensitivity) {
+    cController.run((cmds) => [
+      cmds.state().removeConditionByGroup(cSensorConditionGroup),
+    ]);
+    if (callback != null) {
+      cController.run((cmds) => [
+        cmds
+          .condition(cSensorConditionGroup, true)
+          .onMovement(sensitivity) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
+          .then([onSensor]),
+      ]);
+    }
+  }
+}
+
+function setTouchCallback(onDragStart, onDragEnd) {
+  vOnDragStart = onDragStart;
+  vOnDragRelease = onDragEnd;
+}
+
+function moveTo(left, top) {
+  if (typeof left !== "number" || typeof top !== "number") {
+    console.error(
+      `JsvDragBox: moveTo params type must be number, current params:{${left}, ${top}}`
+    );
+    return;
+  }
+  cController.run((cmds) => [cmds.action().teleportTo(left, top)]);
+}
+
+function getPosition() {
+  return { left: vLeft, top: vTop };
+}
+
+onMounted(() => {
+  if (!valide) {
+    return;
+  }
+  let divView = rMainDiv.value.jsvGetProxyView();
+  cController.bindForgeView(divView, true);
+  divView.DragEnables?.(
+    ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+      // (cEnableFling ? ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT : 0) |
+      ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+      ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+  ); // 激活 Move | TouchDown | TouchEnd
+
+  initDragBox();
+
+  let initLeft =
+    typeof props.dragRect.left == "number" ? props.dragRect.left : 0;
+  let initTop = typeof props.dragRect.top == "number" ? props.dragRect.top : 0;
+  if (initLeft != 0 || initTop != 0) {
+    cController.run((cmds) => [cmds.action().teleportTo(initLeft, initTop)]);
+  }
+
+  cController.run((cmds) => [
+    cmds
+      .condition(undefined, true)
+      .onDragStart()
+      .then([
+        (data) => {
+          vLeft = data.xPos;
+          vTop = data.yPos;
+          vOnDragStart?.({
+            left: data.xPos,
+            top: data.yPos,
+          });
+        },
+      ]),
+    cmds
+      .condition(undefined, true)
+      .onTouchRelease()
+      .then([
+        (data) => {
+          vLeft = data.xPos;
+          vTop = data.yPos;
+          vOnDragRelease?.({
+            left: data.xPos,
+            top: data.yPos,
+          });
+        },
+      ]),
+    cmds
+      .condition(cSensorConditionGroup, true)
+      .onMovement(10) // 默认设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+      .then([onSensor]),
+  ]);
+});
+
+defineExpose({
+  setSensor,
+  setTouchCallback,
+  moveTo,
+  getPosition,
+});
+</script>
+
+<template>
+  <div :style="rBoxStyle">
+    <div
+      ref="rMainDiv"
+      :style="{
+        left: 0,
+        top: 0,
+        width: props.dragRect.width,
+        height: props.dragRect.height,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>