@shijiu/jsview-vue 2.2.128 → 2.2.373

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -1,13 +1,18 @@
-<!--
+<script>
+/**
+ * @file
+ *
  * 【控件介绍】
  * JsvNativeSharedDiv：创建一个Native端可以跟进显示位置的div，用于Native端外挂插件的开发
- *                  style {Object}  布局样式(必须)，必须包含的信息为{left, top, width, height}
- *                  getId {function} 回调函数，用于接收ID信息，ID信息用于Native端对该view进行跟踪的标识
- *                  setId {String} 给定命名ID，避免同进程不同context重名要和Context相关，
- *                                 例如`${window.JsView?.getJsContextId()}_${you_name}`
- *                  corner {Number} 圆角的尺寸，默认为0 
- *                  
- -->
+ *     @param {Object} style  布局样式(必须)，必须包含的信息为{left, top, width, height}
+ *     @param {function} getId 回调函数，用于接收ID信息，ID信息用于Native端对该view进行跟踪的标识
+ *     @param {String} setId  给定命名ID，避免同进程不同context重名要和Context相关，
+ *                            例如`${window.JsView?.getJsContextId()}_${you_name}`
+ *     @param {number} corner 圆角的尺寸，默认为0
+ *     @param {number} oversize  为了去除黑边的调整选项，让native video的尺寸信息比扣洞大多少, 默认为0
+ *     @param {boolean} frontLayer 视图是在JsView界面前方，不是需要扣洞的后方，默认为false
+ */
+</script>
 
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
@@ -16,7 +21,7 @@ import { JsvTextureStoreApi } from "../JsViewVueTools/JsvTextureStore/JsvTexture
 import { onUnmounted, shallowRef } from "vue";
 import JsvNinePatch from "./JsvNinePatch.vue";
 
-const props = defineProps({
+const rProps = defineProps({
   style: {
     type: Object,
     default: () => {
@@ -29,83 +34,101 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  oversize: {
+    type: Number,
+    default: 0,
+  },
+  frontLayer: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-let isBrowserDebug = window.jsvIsBrowserDebug;
-let jsvMainView = undefined;
-let innerViewId = -1;
-let ninePatchSet = null;
+let vJsvMainView = undefined;
+let vInnerViewId = -1;
+let vNinePatchSet = null;
+let vBackgroudnColorValue = null;
+
+let isBrowserDebug = !window.JsView;
 
-if (!isBrowserDebug) {
+if (window.JsView) {
   // 创建JsView图层穿透的texture，抠洞处理
 
-  // 有圆角
-  if (props.corner > 0) {
-    let presetGap = 1; // 外延距离，以保证圆角光滑
-    ninePatchSet = {
-      imageSize: (props.corner + presetGap) * 2, // 半径 + 中心点1像素
-      textureName: null,
-    };
-
-    // 用 JsvTextureStoreApi 绘制半径对等的圆形
-    let sampleImageWidth = ninePatchSet.imageSize;
-    let innerRadius2 = sampleImageWidth; // 内直径
-    let circleLineWidth = 1.5 * props.corner + presetGap - props.corner; // 线粗要把四角盖上
-    let canvasRef;
-
-    // 创建画布
-    canvasRef = JsvTextureStoreApi.canvasTexture(
-      sampleImageWidth,
-      sampleImageWidth
-    );
-
-    let circleRadius =
-      Math.floor(innerRadius2 / 2) +
-      Math.floor(circleLineWidth / 2) -
-      presetGap; // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
-    let customPath = canvasRef.circlePath(
-      Math.floor(sampleImageWidth / 2),
-      Math.floor(sampleImageWidth / 2),
-      circleRadius
-    ); // 创建圆环绘制路径，圆形在画布的中心点位置
-    canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制透明底色
-    customPath.stroke(circleLineWidth, "#FF0000FF"); // 绘制alpha=1的边缘留色
-
-    // 获取填入url的内容
-    // 进行.9拉伸以适配目标尺寸
-    // 通过 alphaOverride 进行alpah叠加
-    ninePatchSet.textureName = canvasRef.commit();
+  if (!rProps.frontLayer) {
+    // 有圆角
+    if (rProps.corner > 0) {
+      let presetGap = 1; // 外延距离，以保证圆角光滑
+      vNinePatchSet = {
+        imageSize: (rProps.corner + presetGap) * 2, // 半径 + 中心点1像素
+        textureName: null,
+      };
+
+      // 用 JsvTextureStoreApi 绘制半径对等的圆形
+      let sampleImageWidth = vNinePatchSet.imageSize;
+      let innerRadius2 = sampleImageWidth; // 内直径
+      let circleLineWidth = 1.5 * rProps.corner + presetGap - rProps.corner; // 线粗要把四角盖上
+      let canvasRef;
+
+      // 创建画布
+      canvasRef = JsvTextureStoreApi.canvasTexture(
+        sampleImageWidth,
+        sampleImageWidth
+      );
+
+      let circleRadius =
+        Math.floor(innerRadius2 / 2) +
+        Math.floor(circleLineWidth / 2) -
+        presetGap; // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
+      let customPath = canvasRef.circlePath(
+        Math.floor(sampleImageWidth / 2),
+        Math.floor(sampleImageWidth / 2),
+        circleRadius
+      ); // 创建圆环绘制路径，圆形在画布的中心点位置
+      canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制透明底色
+      customPath.stroke(circleLineWidth, "#FF0000FF"); // 绘制alpha=1的边缘留色
+
+      // 获取填入url的内容
+      // 进行.9拉伸以适配目标尺寸
+      // 通过 alphaOverride 进行alpah叠加
+      vNinePatchSet.textureName = canvasRef.commit();
+    } else {
+      // 用背景色
+      vBackgroudnColorValue = "rgba(0,0,0,0)";
+    }
   }
 
   // 通过内置函数构造定制的NativeSharedView
-  jsvMainView = new Forge.NativeSharedView();
-  innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(jsvMainView));
+  vJsvMainView = new Forge.NativeSharedView();
+  vInnerViewId = Forge.sViewStore.add(new Forge.ViewInfo(vJsvMainView));
+  if (rProps.oversize != 0) {
+    vJsvMainView.SetOverSize(rProps.oversize);
+  }
 
   // 更新宽高
-  if (typeof jsvMainView != "undefined" && jsvMainView) {
-    if (props.setId) {
+  if (typeof vJsvMainView != "undefined" && vJsvMainView) {
+    if (rProps.setId) {
       // 使用设置进来的track id，而非自动生成
-      jsvMainView.SetTrackId(props.setId);
+      vJsvMainView.SetTrackId(rProps.setId);
     }
 
-    props.getId?.(jsvMainView.GetTrackId());
+    rProps.getId?.(vJsvMainView.GetTrackId());
   }
 }
 
 onUnmounted(() => {
-  if (isBrowserDebug) {
+  if (!window.JsView) {
     return;
   }
 
   // 清理View管理缓存
-  if (innerViewId !== -1) {
-    Forge.sViewStore.remove(innerViewId);
-    innerViewId = -1;
-    jsvMainView = null;
+  if (vInnerViewId !== -1) {
+    Forge.sViewStore.remove(vInnerViewId);
+    vInnerViewId = -1;
+    vJsvMainView = null;
   }
 
-  if (ninePatchSet != null) {
-    JsvTextureStoreApi.deleteTexture(ninePatchSet.textureName); // 释放texture资源
+  if (vNinePatchSet != null) {
+    JsvTextureStoreApi.deleteTexture(vNinePatchSet.textureName); // 释放texture资源
   }
 });
 </script>
@@ -119,13 +142,13 @@ onUnmounted(() => {
     }"
   >
     <jsv-nine-patch
-      v-if="ninePatchSet != null"
+      v-if="vNinePatchSet != null"
       :style="{
         width: style.width,
         height: style.height,
       }"
-      :imageUrl="`jsvtexturestore://${ninePatchSet.textureName}`"
-      :imageWidth="ninePatchSet.imageSize"
+      :imageUrl="`jsvtexturestore://${vNinePatchSet.textureName}`"
+      :imageWidth="vNinePatchSet.imageSize"
       :centerWidth="1"
       :borderOutset="0"
       :waitForInit="false"
@@ -136,7 +159,7 @@ onUnmounted(() => {
       :style="{
         width: style.width,
         height: style.height,
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: vBackgroudnColorValue,
         JsvImageBlendType: 'alphaOverride',
       }"
     />
@@ -145,7 +168,7 @@ onUnmounted(() => {
         width: style.width,
         height: style.height,
       }"
-      :data-jsv-vw-innerview="innerViewId"
+      :data-jsv-vw-innerview="vInnerViewId"
     >
       <slot />
     </div>

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -1,6 +1,10 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
+ *              centerWidth和borderOutset传值比较抽象，若 imageDspWidth 和图片素材的原图尺寸一直，
+ *              则可以参考 samples/NinePatchTester 的样例图示
  *      props说明:
  *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
  *          imageUrl    {String}    (必填)显示图片的加载地址
@@ -15,11 +19,12 @@
  *          animTime    {int}       (必填)缩放动画的时长(单位秒)
  *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
  *          onTransitionEnd { Function } (选填)transition动画结束的回调
+ *          onAnimationEnd { Function } (选填)animation动画结束的回调
  *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
 -->
 
 <script setup>
-import { ref, watchEffect, computed } from "vue";
+import { ref, watchEffect, computed, shallowRef, onMounted } from "vue";
 
 const props = defineProps({
   style: {
@@ -40,8 +45,12 @@ const props = defineProps({
   borderOutset: { type: Number, required: true },
   animTime: { type: Number, default: 0 },
   onTransitionEnd: { type: Function },
+  onAnimationEnd: { type: Function },
   animation: { type: String },
   imageBlendType: { type: String, default: null },
+
+  // 获取实际div的句柄
+  onDivRef: { type: Function, default: null },
 });
 
 const isReady = () => {
@@ -92,10 +101,17 @@ watchEffect(() => {
     );
   }
 });
+
+// 向外提出div的引用，因为v-if缘故，不能在mounted时输出
+// 特别注意: 析构时， onDivRef会输出 null
+function innerOnDivRef(ref) {
+  props.onDivRef?.(ref);
+}
 </script>
 
 <template>
   <div
+    :ref="innerOnDivRef"
     v-if="isReady()"
     :style="{
       ...style,
@@ -107,5 +123,6 @@ watchEffect(() => {
       JsvImageBlendType: props.imageBlendType,
     }"
     @transitionend="props.onTransitionEnd"
+    @animationend="props.onAnimationEnd"
   />
 </template>

package/utils/JsViewVueWidget/JsvPieChart.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvPieChart：Vue高阶组件，饼图。
  *      props说明:

package/utils/JsViewVueWidget/JsvPosterDiv.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvPosterDiv：Vue高阶组件，海报描画
  *  props说明:

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvPosterImage：Vue高阶组件，海报描画，可设置color space 和 texture size
  *  props说明:

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvPreload：Vue高阶组件，图片预加载的控件
  *      preloadList {ObjectArray}: 预加载的信息列表，单个内容通过buildPreloadInfo构建

package/utils/JsViewVueWidget/JsvProgressBar.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvProgressBar：Vue高阶组件，进度条组件。
  *      props说明:

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * QRCode：Vue高阶组件，描绘二维码，
  *      props说明:
@@ -100,24 +102,21 @@ export default {
         const img_view = new Forge.LayoutView(
           new Forge.TextureSetting(img_texture)
         );
-        view.AddView(
-          img_view,
-          new Forge.LayoutParams({
-            x: calculatedImageSettings.x,
-            y: calculatedImageSettings.y,
-            width: calculatedImageSettings.w,
-            height: calculatedImageSettings.h,
-          })
-        );
+        view.AddView(img_view, {
+          x: calculatedImageSettings.x,
+          y: calculatedImageSettings.y,
+          width: calculatedImageSettings.w,
+          height: calculatedImageSettings.h,
+        });
         console.log("view = " + view);
       }
       // 二维码都位置与大小
-      lp_params = new Forge.LayoutParams({
+      lp_params = {
         x: 0,
         y: 0,
         width: this.size,
         height: this.size,
-      });
+      };
 
       // Add new QRCode
       this.qrCodeView = view;

package/utils/JsViewVueWidget/JsvRadarChart.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvRadarChart：Vue高阶组件，多维属性图展示控件，又称雷达图，该控件的原图要求为正方形，按对角线划分，一边为透明，一边为带边框的正三角形，
  *                    带上等分线。

package/utils/JsViewVueWidget/JsvRipple/Constant.js

@@ -1,4 +1,4 @@
 export const JsvRippleShape = {
-  CIRCLE: Forge.FilterView.WAVE.CIRCLE_WAVE,
-  RECTANGLE: Forge.FilterView.WAVE.RECTANGLE_WAVE,
+  CIRCLE: Forge.FilterViewType.Wave.CIRCLE_WAVE,
+  RECTANGLE: Forge.FilterViewType.Wave.RECTANGLE_WAVE,
 }

package/utils/JsViewVueWidget/JsvRipple/JsvRipple.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvRipple: 波纹组件
  *      组件说明:
@@ -63,7 +65,7 @@ const props = defineProps({
 });
 const TAG = "JsvRipple";
 
-let filterView = new Forge.FilterView(null, Forge.FilterView.Type.WAVE);
+let filterView = new Forge.FilterView(null, Forge.FilterViewType.Type.WAVE);
 let viewId = Forge.sViewStore.add(new Forge.ViewInfo(filterView, null));
 
 // 监控filter改变

package/utils/JsViewVueWidget/JsvScaleTextBox.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【控件介绍】
  * JsvScaleTextBox：
  *          创建一个div，可以控制其内部的文字图层的清晰度，