@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -1,4 +1,4 @@
-/*! 
+/*!
  * @file JsvTextureStoreApi
  *
  *      canvasTexture:
@@ -6,9 +6,22 @@
  *          a. commit() 接口调用之前可以任意绘制, commit之后就无法更改, commit之后才能使用, commit后绘制内容会被全局保存
  *          b. commit()的返回是其使用名称, 在div.backgroundImage和img.src中可使用, 格式: jsvtexturestore://commit返回名
  *          c.【非常重要】CanvasTexture是全局管理, commit()之后 不会自动释放, 需要手动调用 deleteTexture, 其参数是commit的返回值
+ * 
  *      deleteTexture:
  *          删除全局保存的texture(图片纹理)
- *      
+ * 
+ *      capture2Texture:
+ *          对给定div做截图并生成一个Texture, 在回调函数中返回此Texture的访问名,
+ *          此访问名可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
+ * 
+ *      getDominantColor:
+ *          获取图片的 dominant color
+ *          特殊说明: 此方法产生的内部CanvasTexture资源会自动回收,
+ *          虽然建议使用者在unmount时进行cancel, 但不是强制
+ * 
+ *      getChartHelper:
+ *          获取ChartHelper句柄，用于绘制二维统计图的多点折线(解决数据点之间的平滑衔接问题)
+ *
  *  CanvasTexture的接口(见 ./CanvasTexture/CanvasTexture.ts 的函数头):
  *      Path类型: 例如 rectPath, circlePath (见 ./CanvasTexture/Path.ts 的函数头)
  *          通过 canvasTexture.xxxPath() 获得一个path操作对象，然后通过其接口进行游标运动形成绘制路径
@@ -17,38 +30,46 @@
  */
 
 import CanvasTexture from "./CanvasTexture/CanvasTexture";
-import { CapturedTexture, CapturedCallback } from "./CapturedTexture/CapturedTexture";
+import {
+  CapturedTexture,
+  CapturedCallback,
+} from "./CapturedTexture/CapturedTexture";
 import sStore from "./Store";
+import { ChartHelper } from "./CanvasTexture/DrawHelper";
+import { BitPalette } from "./BitPalette/BitPalette";
 
 let sJsvTextureConst = {
-    LEFT: 1,
-    TOP: 2,
-    RIGHT: 3,
-    BOTTOM: 4,
-}
+  LEFT: 1,
+  TOP: 2,
+  RIGHT: 3,
+  BOTTOM: 4,
+};
 
 let sTextureStoreApi = {
-    /**
-     * canvasTexture
-     * 创建CanvasTexture句柄，执行commit()后, 获取访问名(访问名规则: 输入参数 baseName + 分配id)
-     * 可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
-     * 
-     * @param {int} width  此Canvas画布的宽度
-     * @param {int} height  此Canvas画布的高度
-     * @param {String|null} baseName 可选, 访问名的前缀信息
-     * @return {CanvasTexture}
-     */
-    canvasTexture: (width: Number, height: Number, baseName: String | null = null): CanvasTexture => {
-        return new CanvasTexture(width, height, baseName);
-    },
+  /**
+   * canvasTexture
+   * 创建CanvasTexture句柄，执行commit()后, 获取访问名(访问名规则: 输入参数 baseName + 分配id)
+   * 可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
+   *
+   * @param {int} width  此Canvas画布的宽度
+   * @param {int} height  此Canvas画布的高度
+   * @param {String|null} baseName 可选, 访问名的前缀信息
+   * @return {CanvasTexture}
+   */
+  canvasTexture: (
+    width: Number,
+    height: Number,
+    baseName: String | null = null
+  ): CanvasTexture => {
+    return new CanvasTexture(width, height, baseName);
+  },
 
-    /**
+  /**
      * capture2Texture
      * 对给定div做截图并生成一个Texture, 在回调函数中返回此Texture的访问名,
      * 此访问名可以在 img.src 或者 div.backgroundImage 通过 "texturestore://访问名" 来使用
-     * 注意: PC模拟环境下，无法截取运动物体的中间状态，但盒子端可以正常截取
      * 
-     * 关于 autoRecycle:
+     * 关于 autoRecycle: 此api生成的CanvasTexture根据这个标识有自动释放功能
      *   true(默认值): 收到callback的访问名后，请立即设置给使用的地方，若此宏任务结束(其触发的所有微任务全完成后)时，
      *                若资源未被div和img使用，则会自动回收，回收后此访问名对应内容为黑屏
      *   false: 截图资源永久存在，可被反复使用，直到 JsvTextureStoreApi.deleteTexture(访问名) 进行清理
@@ -61,39 +82,124 @@ let sTextureStoreApi = {
      *                                      height: number) => void     // 截取div的高
      * @param {boolean} autoRecycle 可选, 是否当无div/img引用时会自动释放
      *                              true默认值: 此场景在回调时要立刻赋值给响应式变量控制template的节点立刻使用(并且不是v-if=false的节点),
-                                    否则会自动释放掉, 此时, texture当使用它的template节点从dom树中去掉的时候(v-if=false也算)会自动释放，
-                                    不需要主动调用deleteTexture释放.
+                                      否则会自动释放掉, 此时, texture当使用它的template节点从dom树中去掉的时候(v-if=false也算)会自动释放，
+                                      不需要主动调用deleteTexture释放.
                                     false: 此场景在callback收到资源名后, 需要使用完毕后调用 deleteTexture 手动释放
-                                    在手动释放之前，可以赋给其他div/img来复用 
+                                      在手动释放之前，可以赋给其他div/img来复用 
+     * @param {any} postProcessParams 可选, 截图处理的参数
      * @return {CapturedTexture} 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
      */
-    capture2Texture: (
-        captureDiv: any,
-        callback: CapturedCallback,
-        autoRecycle: boolean = true): CapturedTexture => {
+  capture2Texture: (
+    captureDiv: any,
+    callback: CapturedCallback,
+    autoRecycle: boolean = true,
+    postProcessParams: any = null
+  ): CapturedTexture => {
+    let texture = new CapturedTexture(
+      captureDiv,
+      callback,
+      autoRecycle,
+      postProcessParams
+    );
+    texture.commit();
 
-        let texture = new CapturedTexture(captureDiv, callback, autoRecycle);
-        texture.commit();
+    return texture;
+  },
 
-        return texture;
-    },
+  /**
+   * deleteTexture
+   * 删除访问名对应的texture资源
+   *
+   * @param {String} accessName 此Texture的访问名，访问名来自: CanvasTexture.commit 或 capture2Texture 的回调
+   */
+  deleteTexture: (accessName: String) => {
+    let textureRef = sStore.getFromStore(accessName);
+    if (textureRef) {
+      // 释放native端的texture实体
+      textureRef.recycle();
+    }
+  },
 
-    /**
-     * deleteTexture
-     * 删除访问名对应的texture资源
-     * 
-     * @param {String} accessName 此Texture的访问名，访问名来自: CanvasTexture.commit 或 capture2Texture 的回调
-     */
-    deleteTexture: (accessName: String) => {
-        let textureRef = sStore.getFromStore(accessName);
-        if (textureRef) {
-            // 释放native端的texture实体
-            textureRef.recycle();
-        }
-    },
+  /**
+   * getDominantColor
+   * 获取图片的 dominant color
+   * 特殊说明: 此方法产生的内部CanvasTexture资源会自动回收,
+   * 虽然建议使用者在unmount时进行cancel, 但不是强制
+   *
+   * @param src 图片的src
+   * @param callback 回调函数, 参数: info
+   * @return 用于cancel的句柄的函数, 
+   *        例如 let c = JsvTextureStoreApi.getDominantColor(src, callback); c(); 为资源清理
+   *        若callback前清理, 则callback不会被调用
+   */
+  getDominantColor: (src: string, callback: (info: any) => void) => {
+    let bitPalette = sTextureStoreApi.getBitPalette(src, async ()=>{
+      let result: any = await bitPalette.Ctrl!.getDomainColorSync();
+      bitPalette.recycle();
+      let cbk_ret = null;
+      if (result) {
+        cbk_ret = {dominantColors: JSON.parse(result)};
+      }
+      callback(cbk_ret);
+    });
+
+    // 返回cancel的句柄
+    return ()=>{
+      bitPalette.recycle();
+    };
+  },
+
+
+  /**
+   * getBitPalette
+   * 获取 BitPalette 实例
+   *
+   * 用法示例:
+   * 
+   *   let bp = JsvTextureStoreApi.getBitPalette(src);
+   *   await bp.Ready;
+   *   let result = await bp.Ctrl?.doCommand(cmd_id, {...});
+   * 
+   * 说明:
+   * - 该方法会立即返回 BitPalette 实例，但 BitPalette 数据初始化可能为异步过程。
+   * - 若在await Ready之前直接操作 bitPalette，其状态未必已完成加载。
+   * 
+   * 特别注意: 不再使用时, 请务必调用 bitPalette.recycle() 释放资源, recycle接口不需要等待Ready完成
+   *
+   * @param {string} src 图片的 src 链接, 可以是 "jsvtexturestore://访问名" 或者 图片的url
+   * @return {BitPalette} BitPalette 实例
+   */
+  getBitPalette: (src: string, callback: () => void): BitPalette => {
+    let bitPalette = new BitPalette(src, callback);
+    return bitPalette;
+  },
+
+  /**
+   * getChartHelper
+   * 获取ChartHelper句柄，用于绘制二维统计图
+   * 
+   * @param {number} width 画布宽度
+   * @param {number} height 画布高度
+   * @param {number[]} xAxis x轴范围(可以为负数到正数的范围)
+   * @param {number[]} yAxis y轴范围(可以为负数到正数的范围)
+   * @throws {Error} 如果画布宽度或高度小于等于 0，或者 x 或 y 轴范围不是长度为 2 的数组，或者 x 或 y 轴范围不是升序
+   * @return {ChartHelper}  ChartHelper接口说明见 ./CanvasTexture/DrawHelper.ts 的 ChartHelper 类
+   */
+  getChartHelper(
+    width: number,
+    height: number,
+    xAxis: number[],
+    yAxis: number[]
+  ): ChartHelper {
+    return new ChartHelper(width, height, xAxis, yAxis);
+  },
+};
+
+export enum CaptureProcessType {
+  Blur = 1,
 }
 
 export {
-    sTextureStoreApi as JsvTextureStoreApi,
-    sJsvTextureConst as JsvTextureConst,
-}
+  sTextureStoreApi as JsvTextureStoreApi,
+  sJsvTextureConst as JsvTextureConst,
+};

package/utils/JsViewVueTools/JsvTextureStore/Store.ts

@@ -1,32 +1,44 @@
 import { TextureBase } from "./Texture";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 
 class JsvTextureStore {
-    private textureMap: Map<String, TextureBase> = new Map();
+  private textureMap: Map<String, TextureBase> = new Map();
+  private hasAutoRecycle: boolean = false;
 
-    constructor() {
+  constructor() { }
 
+  public addToStore(storeName: String, textureRef: TextureBase) {
+    if (!this.hasAutoRecycle && textureRef && textureRef.isAutoRecycle()) {
+      this.hasAutoRecycle = true;
+      ForgeHandles.sRenderBridge.AddWillSwapListener("jsv-texture-store", this.onWillSwap.bind(this));
     }
-
-    public addToStore(storeName: String, textureRef: TextureBase) {
-        this.textureMap.set(storeName, textureRef);
-    }
-
-    public getFromStore(storeName: String): TextureBase | undefined {
-        return this.textureMap.get(storeName);
-    }
-
-    public removeFromStore(storeName: String): TextureBase | undefined {
-        if (this.textureMap.has(storeName)) {
-            let textureBaseRef = this.textureMap.get(storeName);
-            this.textureMap.delete(storeName);
-            return textureBaseRef;
-        } else {
-            console.error(`Error: name=${storeName} not in map`);
-            return undefined;
-        }
+    this.textureMap.set(storeName, textureRef);
+  }
+
+  public getFromStore(storeName: String): TextureBase | undefined {
+    return this.textureMap.get(storeName);
+  }
+
+  public removeFromStore(storeName: String): TextureBase | undefined {
+    if (this.textureMap.has(storeName)) {
+      let textureBaseRef = this.textureMap.get(storeName);
+      this.textureMap.delete(storeName);
+      return textureBaseRef;
+    } else {
+      console.warn(`Warn: name=${storeName} not in map, maybe auto recycled`);
+      return undefined;
     }
+  }
+
+  private onWillSwap() {
+    this.textureMap.forEach((texture, key) => {
+      if (texture && texture.isAutoRecycle()) {
+        texture.tryRecycle();
+      }
+    });
+  }
 }
 
 let sStore: JsvTextureStore = new JsvTextureStore();
 
-export default sStore;
+export default sStore;

package/utils/JsViewVueTools/JsvTextureStore/Texture.ts

@@ -1,53 +1,68 @@
 import sStore from "./Store";
 
+const AUTO_RECYCLE_DELAY = 3;
 export class TextureBase {
-    private baseName: String = 'T';
-    protected textureRef: any = null; // Forge.ImageTexture
-    public storeName: String = '';
-
-    constructor(baseName: String | null) {
-        if (baseName) {
-            this.baseName = baseName;
-        }
-    }
+  private baseName: String = "T";
+  protected textureRef: any = null; // Forge.ImageTexture
+  public storeName: String = "";
+  protected autoRecycle: boolean = false;
+  private autoRecycleDelay: number = AUTO_RECYCLE_DELAY;
 
-    protected addToStore() {
-        this.storeName = this.getStoreName();
-        this.textureRef.DisableAutoRecycle(); // 被store管理的，取消自动清理
-        sStore.addToStore(this.storeName, this);
+  constructor(baseName: String | null) {
+    if (baseName) {
+      this.baseName = baseName;
     }
+  }
 
-    protected getStoreName() {
-        return `${this.baseName}-${this.textureRef?.GetTextureId()}`;
+  tryRecycle() {
+    if (!this.autoRecycle) return;
+    this.autoRecycleDelay--;
+    if (this.autoRecycleDelay < 0) {
+      this.recycle();
     }
+  }
 
-    /**
-     * commit
-     * 完成绘制设置，出发制作目标texture
-     * 
-     * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
-     */
-    public commit(): String {
-        // Should override by extends to create Forge.ImageTexture -> textureRef
-        return this.storeName;
-    }
+  isAutoRecycle() {
+    return this.autoRecycle;
+  }
 
-    /**
-     * getTextureRef
-     * 内部接口，获取内联的Forge.ImageTexture的句柄
-     * 
-     * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
-     */
-    public getTextureRef(): any {
-        return this.textureRef;
-    }
+  protected addToStore() {
+    this.storeName = this.getStoreName();
+    this.textureRef.DisableAutoRecycle(); // 被store管理的，取消自动清理
+    sStore.addToStore(this.storeName, this);
+  }
+
+  protected getStoreName() {
+    return `${this.baseName}-${this.textureRef?.GetTextureId()}`;
+  }
+
+  /**
+   * commit
+   * 完成绘制设置，出发制作目标texture
+   *
+   * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
+   */
+  public commit(): String {
+    // Should override by extends to create Forge.ImageTexture -> textureRef
+    return this.storeName;
+  }
+
+  /**
+   * getTextureRef
+   * 内部接口，获取内联的Forge.ImageTexture的句柄
+   *
+   * @return {String} BaseName-textureId 格式的名字，用于 jsvtexturestore:// 的访问链接
+   */
+  public getTextureRef(): any {
+    return this.textureRef;
+  }
 
-    public recycle() {
-        // 释放native端的texture实体
-        let textureRef = sStore.removeFromStore(this.storeName);
-        if (textureRef) {
-            // 释放native端的texture实体
-            this.textureRef?.RequestToUnload();
-        }
+  public recycle() {
+    // 释放native端的texture实体
+    let textureRef = sStore.removeFromStore(this.storeName);
+    if (textureRef) {
+      // 释放native端的texture实体
+      this.textureRef?.RequestToUnload();
     }
+  }
 }

package/utils/JsViewVueTools/JsvTextureStore/TextureBuilder.ts

@@ -0,0 +1,92 @@
+import { JsvTextureStoreApi } from "./JsvTextureStore";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+
+/**
+ * CircleNinePatchTextureOptions
+ * 生成圆角九宫格纹理时的输入参数
+ *
+ * @property {number} targetCornerRadius 目标圆角半径
+ * @property {number} circleLineWidth 圆环描边宽度
+ * @property {string} [bgColor] 画布背景色，默认值: rgba(255,255,255,0)
+ * @property {string} [circleColor] 圆环描边颜色，默认值: #000000FF
+ * @property {number} [displayScale] 显示缩放比例，提高此值一提高清晰度, 
+ *                                   默认值: jsview.config.js的designMap.displayScale
+ */
+type CircleNinePatchTextureOptions = {
+  cornerRadius: number;
+  circleLineWidth: number;
+  bgColor?: string;
+  circleColor?: string;
+  displayScale?: number;
+};
+
+/**
+ * NinePatchTextureResult
+ * 圆角九宫格纹理构建结果
+ *
+ * @property {number} BorderOutset 九宫格外边距(像素)
+ * @property {number} ImageWidth 纹理图片宽度(像素)
+ * @property {number} CenterWidth 九宫格中心区域宽度(像素)
+ * @property {string} textureUrl 可用于背景图/图片src的纹理访问地址
+ */
+type NinePatchTextureResult = {
+  BorderOutset: number;
+  ImageWidth: number;
+  ImageDspWidth: number;
+  CenterWidth: number;
+  texAccessName: string;
+};
+
+/**
+ * buildCircleNinePatchTexture
+ * 生成用于 JsvNinePatch 的圆角九宫格纹理，
+ * 并返回可用于样式访问的texture URL与JsvNinePatch的参数
+ * 
+ * 特别注意!!: texAccessName 需要在不使用时使用 JsvTextureStoreApi.deleteTexture 释放资源
+ *
+ * @param {CircleNinePatchTextureOptions} options 生成圆角九宫格纹理的参数
+ * @return {NinePatchTextureResult}
+ */
+function buildCircleNinePatchTexture(
+  options: CircleNinePatchTextureOptions
+): NinePatchTextureResult {
+  const {
+    cornerRadius,
+    circleLineWidth,
+    bgColor = "rgba(255,255,255,0)", // 默认为透明白色底色
+    circleColor = "#000000FF", // 默认为黑色
+    displayScale = ForgeHandles.sRenderBridge.GetScreenInfo().scaleRatio,
+  } = options;
+  const innerRadius2 = Math.floor(cornerRadius * 2 * displayScale);
+  const innerLineWidth = Math.floor(circleLineWidth * displayScale);
+  const borderOutset = innerLineWidth + 4; // 外延4像素, 因为Canvas绘制外边缘有至少2px的过渡色以提升抗锯齿效果
+  const imageWidth = innerRadius2 + borderOutset * 2;
+  const centerWidth = 1;
+
+  const canvasRef = JsvTextureStoreApi.canvasTexture(imageWidth, imageWidth);
+  const circleRadius =
+    Math.floor(innerRadius2 / 2) + Math.floor(innerLineWidth / 2);
+  const circlePath = canvasRef.circlePath(
+    Math.floor(imageWidth / 2),
+    Math.floor(imageWidth / 2),
+    circleRadius
+  );
+
+  canvasRef.drawColor(bgColor);
+  circlePath?.stroke(innerLineWidth, circleColor);
+
+  const sourceId = String(canvasRef.commit());
+  return {
+    BorderOutset: borderOutset,
+    ImageWidth: imageWidth,
+    ImageDspWidth: Math.floor(imageWidth / displayScale),
+    CenterWidth: centerWidth,
+    texAccessName: sourceId,
+  };
+}
+
+const TextureBuilder = {
+  buildCircleNinePatchTexture,
+};
+
+export default TextureBuilder;

package/utils/JsViewVueTools/JsvTextureStore/index.js

@@ -0,0 +1,2 @@
+export * from "./JsvTextureStore";
+export { default as JsvTextureBuilder } from "./TextureBuilder";

package/utils/JsViewVueTools/index.js

@@ -20,7 +20,7 @@ export * from "./JsvTextTools";
 export * from "./JsvPreDownloader"
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap";
 export * from "./JsvPerformance"
-export * from "./JsvTextureStore/JsvTextureStore"
+export * from "./JsvTextureStore"
 export * from "./JsvTextureDefines"
 export * from "./JsvFederationTools"
 export * from "./ConstSymbol"
@@ -28,3 +28,5 @@ export * from "./ForgeConstDefine"
 export * from "./TextureManagerTools"
 export * from "./FeatureActive"
 export * from "./JsvTextureLoadTool"
+export * from "./JsvInteractionMode"
+export {default as BlobApi} from "./BlobApi"