@shijiu/jsview-vue 2.2.201 → 2.2.373

package/utils/JsViewVueTools/JsvTextTools.ts

@@ -0,0 +1,223 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+
+declare interface FontStyleDefine {
+  fontFamily: string,
+  fontSize: number,
+  fontStyle: string,
+  fontWeight: string
+}
+
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-11-29 14:26:20
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-02 10:20:45
+ * @Description: file content
+ */
+
+/*!
+ * 获取文字宽度, 一般用于测量文字宽度
+ *
+ * @param {string} text   文字
+ * @param {object} style  文字的css style
+ * @return {int} 文字宽度
+ **/
+const getTextWidth = (text: string, style: FontStyleDefine) => {
+  const textParams = {
+    str: text ? text : "",
+    font: style.fontFamily ? style.fontFamily : Forge.TextUtils.sDefaultFont,
+    size: style.fontSize ? style.fontSize : Forge.TextUtils.sDefaultFontSize,
+    italic: style.fontStyle === "italic" ? "italic" : "",
+    bold: style.fontWeight === "bold" ? "bold" : "",
+  };
+  return (window as any).PlatformUtils.GetTextWidth(textParams);
+};
+
+/*!
+ * @typedef {object} SliceInfo
+ * @property {int} start - 文字起始index
+ * @property {int} end - 文字结束index
+ * @property {int} width - 文字宽度
+ */
+
+/*!
+ * @typedef {object} TextInfo
+ * @property {int} totalWidth - 文字整体宽度
+ * @property {Array<SliceInfo>} sliceInfo - 每段文字的信息
+ */
+
+/*!
+ * 单行超长文字会切成多个div拼接, 由于jsview坐标的取整机制, 拼接出的width和文字width会产生误差, 此接口会返回拼接后的width
+ *
+ * @param {string} text   文字
+ * @param {object} style  文字的css style
+ * @return {TextInfo} 文字信息
+ **/
+const getOneLineTextDrawWidth = (text: string, style: FontStyleDefine) => {
+  if (text && typeof text != "string") {
+    text = "" + text; // 规避text为非字符串导致接口调用错误的问题
+  }
+  const info: Array<any> = (window as any).PlatformUtils.GetOneLineTextDrawWidth(
+    text ?? "",
+    style.fontFamily ?? Forge.TextUtils.sDefaultFont,
+    style.fontSize ?? Forge.TextUtils.sDefaultFontSize,
+    style.fontStyle === "italic" ? "italic" : "",
+    style.fontWeight === "bold" ? "bold" : "");
+  const result: {
+    totalWidth: number,
+    sliceInfo: Array<any>
+  } = {
+    totalWidth: info[0],
+    sliceInfo: [],
+  }
+  for (let i = 1; i < info.length; i += 3) {
+    result.sliceInfo.push({
+      start: info[i],
+      end: info[i + 1],
+      width: info[2 + 2],
+    })
+  }
+  return result;
+}
+
+const isRtl = (str: string) => {
+  //arabic
+  for (let i = 0; i < str.length; i++) {
+    let c = str.charCodeAt(i);
+    if (c != 32) {
+      if (c >= 0x0600 && c <= 0x06ff) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }
+  return false;
+}
+
+
+
+declare interface RectSize {
+  width: number,
+  height: number,
+}
+
+declare interface PostionDefine {
+  x: number,
+  y: number
+}
+
+/**
+ * 获取光标的位置
+ *
+ * @public
+ * @func GetCursorPosition
+ * @memberof Forge.TextUtils
+ * @params {string} str	文字字符串
+ * @params {Forge.RectArea} max_rect
+ * @param {PackedFontParams} font_params	文本描述符(来源自 PackFontParams 函数)
+ * @param {PackedTextAttrs} text_attr  (来源自 PackTextAttrs 函数)
+ * @param {int} line_height
+ * @param {int} pos_x   光标的偏移
+ * @return {Object}	 光标的所在位置{x:0,y:0}
+ **/
+function GetCursorPosition(
+  str: string,
+  max_rect: RectSize,
+  font_params: PackedFontParams,
+  text_attr: PackedTextAttrs,
+  line_height: number,
+  cursor_offset: number
+): PostionDefine {
+  let api = (window as any).PlatformUtils?.GetCursorPosition.bind((window as any).PlatformUtils);
+
+  if (api) {
+    return api(str, max_rect, font_params, text_attr, line_height, cursor_offset);
+  } else {
+    return { x: 0, y: 0 }
+  }
+}
+
+class PackedFontParams {
+  public font?: string;  // font family name
+  public size?: number;  // font size
+  public bold?: string;  // ""/"bold"
+  public italic?: string; // ""/"italic"
+  public alignment?: string; // left / right /center
+  public textColour?: string;
+}
+
+/**k
+   * 创建文本描述符
+   *
+   * @public
+   * @func PackFontParam
+   * @param {string} font_family 			CSS字体名字，如“黑体 欧文”（支持多字体设置）
+   * @param {int} font_size
+   * @param {boolean} italic			是否为斜体
+   * @param {boolean} bold			是否加粗
+   * @param {string} alignment 		水平对齐方式，支持("left", "middle", "right", "justify")
+   * @param {string} text_color		文字颜色(format "#FFFFFF")
+   **/
+function PackFontParams(
+  font_family: string | null,
+  font_size: number,
+  bold: boolean,
+  italic: boolean,
+  alignment: string,
+  text_color: string | null): PackedFontParams {
+
+  let packed = new PackedFontParams();
+
+  if (!font_size) font_size = Forge.TextUtils.sDefaultFontSize;
+  if (!font_family) font_family = Forge.TextUtils.sDefaultFont;
+
+  packed.size = font_size;
+  packed.font = font_family!;
+  packed.italic = italic ? "italic" : "";
+  packed.bold = bold ? "bold" : "";
+
+  packed.alignment = (alignment && alignment.length > 0) ? alignment : "left";
+  packed.textColour = text_color ? text_color : Forge.TextUtils.sDefaultFontColor;
+
+  return packed;
+}
+
+declare interface PackedTextAttrs {
+  text_overflow: string;
+  word_wrap: string;
+}
+
+/**
+   * 创建文本区域描述符
+   *
+   * @public
+   * @func PackTextAttrs
+   * @param {String} text_overflow 超过描画边界时的处理方式：<br>
+   *     							"none" 按照文字宽度描画<br>
+   *     							"clip" 超出本分不显示（默认）<br>
+   *     							"ellipsis" 如果超出，则末尾显示“...”
+   *     							其余字符 当文字超出时，用此字符替换“...”的位置
+   * @param {String} word_wrap  设置自然换行规则<br>
+   *     							"none":“不折行”<br>
+   *     							"normal"：折行时，尽量不切断单词（仅支持英文单词）<br>
+   *     							"break_word"：不去识别单词，到达边缘就折行（执行效率高）
+   * @return {PackedTextAttrs} 文本区域描述符
+   **/
+function PackTextAttrs(text_overflow: string, word_wrap: string): PackedTextAttrs {
+  if (!text_overflow) text_overflow = "none";
+  if (!word_wrap) word_wrap = "none";
+
+  return { text_overflow: text_overflow, word_wrap: word_wrap };
+}
+
+const TextTools = {
+  getOneLineTextDrawWidth,
+  getTextWidth,
+  isRtl,
+  PackFontParams,
+  PackTextAttrs,
+  GetCursorPosition
+}
+
+export { getTextWidth, TextTools };

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/index.js

@@ -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 来触发重绘):