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

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,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
  *              centerWidth和borderOutset传值比较抽象，若 imageDspWidth 和图片素材的原图尺寸一直，
@@ -17,6 +19,7 @@
  *          animTime    {int}       (必填)缩放动画的时长(单位秒)
  *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
  *          onTransitionEnd { Function } (选填)transition动画结束的回调
+ *          onAnimationEnd { Function } (选填)animation动画结束的回调
  *          imageBlendType {String}  (选填) alpha合并模式，默认为普通合成，可设置"alphaOverride", 用于Video挖洞操作
 -->
 
@@ -42,6 +45,7 @@ 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 },
 
@@ -119,5 +123,6 @@ function innerOnDivRef(ref) {
       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说明:
@@ -50,7 +52,6 @@ const isPosterImage = computed(() => {
 
 let common_style = reactive({});
 let image_style = reactive({});
-let show_background_holder = !!window.JsView; // PC浏览器模拟时, 不显示占位图，避免误导
 
 watchEffect(() => {
   if (props.style) {
@@ -78,7 +79,7 @@ watchEffect(() => {
 
 <template>
   <div :style="common_style">
-    <slot v-if="show_background_holder"></slot>
+    <slot />
     <img
       v-if="!!props.src"
       :data-jsv-vw-enable-fade="props.fadeIn"

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvPreload：Vue高阶组件，图片预加载的控件
  *      preloadList {ObjectArray}: 预加载的信息列表，单个内容通过buildPreloadInfo构建
@@ -69,8 +71,7 @@ export { buildPreloadInfo, buildDownloadInfo };
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import { reactive, onBeforeUnmount, watchEffect } from "vue";
-
-const CONST_FORMAT_TOKEN = "_JsvP_";
+import { urlCheckSet } from "../../JsViewVueTools";
 
 const props = defineProps({
   preloadList: Object,
@@ -96,37 +97,29 @@ let preloadToken = 1;
 let downloadToken = 1;
 
 const _releasePreloadView = () => {
-  if (window.JsView) {
-    if (loadViewList.preloadViewList.length > 0) {
-      for (const view_info of loadViewList.preloadViewList) {
-        if (view_info) {
-          // 当预加载url为null时view_info为null
-          const id = view_info.viewId;
-          view_info.textureRef?.DisableBackgroundLoad();
-          view_info.textureRef?.UnregisterLoadImageCallback(
-            view_info.callToken
-          );
-          Forge.sViewStore.remove(id);
-        }
+  if (loadViewList.preloadViewList.length > 0) {
+    for (const view_info of loadViewList.preloadViewList) {
+      if (view_info) {
+        // 当预加载url为null时view_info为null
+        const id = view_info.viewId;
+        view_info.textureRef?.DisableBackgroundLoad();
+        view_info.textureRef?.UnregisterLoadImageCallback(view_info.callToken);
+        Forge.sViewStore.remove(id);
       }
     }
-    loadViewList.preloadViewList = [];
-    preloadStateList = [];
   }
+  loadViewList.preloadViewList = [];
+  preloadStateList = [];
 };
 const _releaseDownloadView = () => {
-  if (window.JsView) {
-    if (loadViewList.downloadViewList.length > 0) {
-      for (const view_info of loadViewList.downloadViewList) {
-        if (view_info) {
-          // 当预加载url为null时view_info为null
-          const id = view_info.viewId;
-          view_info.textureRef?.DisableBackgroundLoad();
-          view_info.textureRef?.UnregisterLoadImageCallback(
-            view_info.callToken
-          );
-          Forge.sViewStore.remove(id);
-        }
+  if (loadViewList.downloadViewList.length > 0) {
+    for (const view_info of loadViewList.downloadViewList) {
+      if (view_info) {
+        // 当预加载url为null时view_info为null
+        const id = view_info.viewId;
+        view_info.textureRef?.DisableBackgroundLoad();
+        view_info.textureRef?.UnregisterLoadImageCallback(view_info.callToken);
+        Forge.sViewStore.remove(id);
       }
     }
   }
@@ -174,14 +167,7 @@ const _getPreloadViewIdList = () => {
         "Error:format mismatch, data should comes from function buildPreloadInfo()"
       );
     }
-    const base_url = item.url;
-    let image_url = base_url;
-    if (base_url && base_url.indexOf("http") < 0) {
-      // 包含http和https两种请求
-      if (window.JsView.Dom.UrlRef) {
-        image_url = new window.JsView.Dom.UrlRef(base_url).href;
-      }
-    }
+    let image_url = urlCheckSet(item.url);
     let target_size = null;
     if (item.width !== 0 && item.height !== 0) {
       target_size = { width: item.width, height: item.height };
@@ -265,14 +251,7 @@ const _getDownloadViewIdList = () => {
       );
     }
     console.log(`OnDownload get${index} url=${item.url}`);
-    const base_url = item.url;
-    let image_url = base_url;
-    if (base_url && base_url.indexOf("http") < 0) {
-      // 包含http和https两种请求
-      if (window.JsView.Dom.UrlRef) {
-        image_url = new window.JsView.Dom.UrlRef(base_url).href;
-      }
-    }
+    let image_url = urlCheckSet(item.url);
     const texture = ForgeHandles.TextureManager.GetDownloadTexture(
       image_url,
       null,

package/utils/JsViewVueWidget/JsvPreload/index.js

@@ -6,17 +6,6 @@
  * @Description: file content
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
-import * as JsvPreload from "./JsvPreload.vue";
+export * from "./JsvPreload.vue";
+export { default } from "./JsvPreload.vue";
 
-let _JsvPreload;
-if (window.JsView) {
-  _JsvPreload = JsvPreload.default;
-} else {
-  const BrowserPreload = await import("./BrowserPreload.vue");
-  _JsvPreload = BrowserPreload.default;
-}
-
-let buildPreloadInfo = JsvPreload.buildPreloadInfo;
-let buildDownloadInfo = JsvPreload.buildDownloadInfo;
-export default _JsvPreload;
-export { buildPreloadInfo, buildDownloadInfo };

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说明:
@@ -20,6 +22,7 @@
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import { TextureInstantType } from "../../JsViewVueTools/JsvTextureDefines.ts";
+import { urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet.ts";
 
 export default {
   props: {
@@ -94,30 +97,27 @@ export default {
       if (this.imageSettings && calculatedImageSettings) {
         let url = this.imageSettings.src;
         if (typeof url === "string") {
-          url = new window.JsView.Dom.UrlRef(this.imageSettings.src).href;
+          url = urlCheckSet(this.imageSettings.src);
         }
         const img_texture = texture_manager.GetImage(url);
         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，可以控制其内部的文字图层的清晰度，

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollBox.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvScrollBox：Vue高阶组件，支持触控拖动的滚动型组件。
  *  props说明:
@@ -91,6 +93,10 @@ import {
   SyncLinkSource,
 } from "../../JsViewVueWidget/JsvFreeMoveActor/SyncLinkManager";
 import { newNexus, NexusNode } from "../JsvFreeMoveActor/NexusNode";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive";
 
 let rProps = defineProps({
   // 底座的尺寸
@@ -146,6 +152,9 @@ let rProps = defineProps({
   },
 });
 
+// 激活引擎中的功能支持
+JsvUseFeature("JsvScrollBox", FeatureNames.TouchReceiver);
+
 /** 本地常量 **/
 const cDirection = rProps.direction;
 const cMode = rProps.mode;

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollFollow.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvScrollFollow：Vue高阶组件，响应并同步JsvScrollBox的移动的div/ninePatch特殊类型的进度展示组件
  *  props说明:
@@ -64,6 +66,10 @@ import { GetSyncLinkManager } from "../JsvFreeMoveActor/SyncLinkManager";
 import { NexusNode } from "../JsvFreeMoveActor/NexusNode";
 import { ScrollInnerStyle } from "./ScrollInnerSymbol";
 import JsvNinePatch from "../JsvNinePatch.vue";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive";
 
 const rProps = withDefaults(
   defineProps<{
@@ -103,6 +109,9 @@ const rProps = withDefaults(
   }
 );
 
+// 激活引擎中的功能支持
+JsvUseFeature("JsvScrollFollow", FeatureNames.TouchReceiver);
+
 /** 本地类型定义 **/
 interface PosSizeType {
   start: number;

package/utils/JsViewVueWidget/JsvSector.vue

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

package/utils/JsViewVueWidget/JsvSoundPool.js

@@ -3,6 +3,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * JsvSoundPool: 面向对象的类，用于播放效果音，创建JsvSoundPool对象后通过request的回调获得AudioController句柄后进行控制
  *      功能函数: (参数说明见函数本体)
@@ -38,6 +40,8 @@
  *              功能: 设置播放优先级
  */
 
+import { urlCheckSet } from "../JsViewVueTools";
+
 const supportSoundPool = !!window.SoundPool;
 class AudioController {
   constructor(soundPool, soundId, url) {
@@ -163,13 +167,7 @@ class JsvSoundPool {
       return;
     }
 
-    let realUrl;
-    if (window.JsView) {
-      // jsview上
-      realUrl = new window.JsView.Dom.UrlRef(url).href;
-    } else {
-      realUrl = url;
-    }
+    let realUrl = urlCheckSet(url);
     if (this._SoundIdMap[realUrl]) {
       this._SoundIdMap[realUrl].referCount++;
       const controller = new AudioController(this._SoundPool, this._SoundIdMap[realUrl].soundId);