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

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetState.ts

@@ -24,6 +24,14 @@ class StatePackBuilder {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByGroup(group));
   }
 
+  /*
+   * removeConditionByGroup
+   * 清理指定名字的condition
+   */
+  removeConditionByName(specName: String) {
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByName(specName));
+  }
+
   /**
    * activeCondition
    * 重新激活对应gid或者specName的condition

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -24,7 +24,7 @@ export class EditViewOperator {
     private _EditViewHandle: any = null;
     private _CursorHandle: CursorOperater | null = null;
     private _EditViewId: number = -1;
-    private _CursorResumeTimeoutToken: number = -1;
+    private _CursorResumeTimeoutToken: any = -1;
 
     private _InputType: number = 0;
     private _FontStyle: FontStyleDefine | null = null

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -168,15 +168,6 @@ export default {
 
 <template>
   <div
-    v-if="html"
-    ref="innerViewDiv"
-    :style="{
-      top: style.top,
-      left: style.left,
-    }"
-  ></div>
-  <div
-    v-else
     :data-jsv-vw-innerview="innerViewId"
     :style="{
       top: style.top,

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -7,7 +7,7 @@
  *     @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}`
+ *                            例如`${window.JsvCoreApi?.getJsContextId()}_${you_name}`
  *     @param {number} corner 圆角的尺寸，默认为0
  *     @param {number} oversize  为了去除黑边的调整选项，让native video的尺寸信息比扣洞大多少, 默认为0
  *     @param {boolean} frontLayer 视图是在JsView界面前方，不是需要扣洞的后方，默认为false
@@ -16,7 +16,6 @@
 
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import ForgeHandles from "../JsViewVueTools/ForgeHandles";
 import { JsvTextureStoreApi } from "../JsViewVueTools/JsvTextureStore/JsvTextureStore";
 import { onUnmounted, shallowRef } from "vue";
 import JsvNinePatch from "./JsvNinePatch.vue";
@@ -49,77 +48,69 @@ let vInnerViewId = -1;
 let vNinePatchSet = null;
 let vBackgroudnColorValue = null;
 
-let isBrowserDebug = !window.JsView;
-
-if (window.JsView) {
-  // 创建JsView图层穿透的texture，抠洞处理
-
-  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
-  vJsvMainView = new Forge.NativeSharedView();
-  vInnerViewId = Forge.sViewStore.add(new Forge.ViewInfo(vJsvMainView));
-  if (rProps.oversize != 0) {
-    vJsvMainView.SetOverSize(rProps.oversize);
+// 创建JsView图层穿透的texture，抠洞处理
+
+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)";
   }
+}
 
-  // 更新宽高
-  if (typeof vJsvMainView != "undefined" && vJsvMainView) {
-    if (rProps.setId) {
-      // 使用设置进来的track id，而非自动生成
-      vJsvMainView.SetTrackId(rProps.setId);
-    }
+// 通过内置函数构造定制的NativeSharedView
+vJsvMainView = new Forge.NativeSharedView();
+vInnerViewId = Forge.sViewStore.add(new Forge.ViewInfo(vJsvMainView));
+if (rProps.oversize != 0) {
+  vJsvMainView.SetOverSize(rProps.oversize);
+}
 
-    rProps.getId?.(vJsvMainView.GetTrackId());
+// 更新宽高
+if (typeof vJsvMainView != "undefined" && vJsvMainView) {
+  if (rProps.setId) {
+    // 使用设置进来的track id，而非自动生成
+    vJsvMainView.SetTrackId(rProps.setId);
   }
+
+  rProps.getId?.(vJsvMainView.GetTrackId());
 }
 
 onUnmounted(() => {
-  if (!window.JsView) {
-    return;
-  }
-
   // 清理View管理缓存
   if (vInnerViewId !== -1) {
     Forge.sViewStore.remove(vInnerViewId);
@@ -135,7 +126,6 @@ onUnmounted(() => {
 
 <template>
   <div
-    v-if="!isBrowserDebug"
     :style="{
       left: style.left,
       top: style.top,
@@ -173,8 +163,4 @@ onUnmounted(() => {
       <slot />
     </div>
   </div>
-
-  <div v-else :style="{ ...style }">
-    <slot />
-  </div>
 </template>

package/utils/JsViewVueWidget/JsvPosterDiv.vue

@@ -2,38 +2,44 @@
  * @file
  *
  * 【模块 export 内容】
- * JsvPosterDiv：Vue高阶组件，海报描画
+ * JsvPosterDiv：Vue高阶组件，海报描画, 其字内容为占位图
  *  props说明:
  *      style    {Object}   包含
  *                          left/top/width/height
  *                          border-radius
  *                          backgroundImage/backgroundColor 
  *                          的style设置
+ *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点
 -->
 <script setup>
-
-import { reactive, watchEffect } from "vue";
+import { reactive, watchEffect, shallowRef } from "vue";
 
 const props = defineProps({
   style: Object,
+  enableAA: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 let common_style = reactive({});
 let image_style = reactive({});
+let rEnableAA = shallowRef("0");
 
-watchEffect(()=>{
+watchEffect(() => {
   if (props.style) {
-    let {left, top, width, height, ...others} = props.style;
+    let { left, top, width, height, transformStyle, ...others } = props.style;
 
     common_style.left = left;
     common_style.top = top;
+    common_style.transformStyle = transformStyle;
 
     image_style.width = width;
     image_style.height = height;
-    Object.assign(image_style, others)
+    Object.assign(image_style, others);
   }
-})
-
+  rEnableAA.value = props.enableAA ? "1" : "0";
+});
 </script>
 
 <template>
@@ -43,6 +49,7 @@ watchEffect(()=>{
       data-jsv-vw-enable-fade="true"
       data-jsv-vw-mask-poster-on-top="true"
       :style="image_style"
+      :data-jsv-img-enable-aa="rEnableAA"
       v-bind="$attrs"
     />
   </div>

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -10,10 +10,11 @@
  *      src {string}        图片的加载地址
  *      fadeIn: {boolean}   图片加载完成是否有淡入效果，默认为打开
  *      isPosterImage:      标识是否用于海报位，对于海报位的内容，可以有下载线程控制等策略来优化整体体验
+ *      enableAA: {boolean} 启用非全局的抗锯齿处理，不过这个处理会使绘制的矩形比原尺寸每边少2~3像素点
 -->
 
 <script setup>
-import { reactive, watchEffect, computed } from "vue";
+import { reactive, watchEffect, computed, shallowRef } from "vue";
 import { JsvPerformance } from "../JsViewVueTools/JsvPerformance.ts";
 
 const props = defineProps({
@@ -37,6 +38,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  enableAA: {
+    type: Boolean,
+    default: false,
+  },
   style: Object,
 });
 
@@ -52,6 +57,7 @@ const isPosterImage = computed(() => {
 
 let common_style = reactive({});
 let image_style = reactive({});
+let rEnableAA = shallowRef("0");
 
 watchEffect(() => {
   if (props.style) {
@@ -61,6 +67,7 @@ watchEffect(() => {
       top,
       width,
       height,
+      transformStyle,
       backgroundImage,
       backgroundColor,
       ...others
@@ -69,11 +76,13 @@ watchEffect(() => {
     // 承接x,y偏移和动画设置, 规避默认淡出动画被影响
     common_style.left = left;
     common_style.top = top;
+    common_style.transformStyle = transformStyle;
 
     image_style.width = width;
     image_style.height = height;
     Object.assign(image_style, others);
   }
+  rEnableAA.value = props.enableAA ? "1" : "0";
 });
 </script>
 
@@ -87,6 +96,7 @@ watchEffect(() => {
       :data-jsv-img-scaledown-tex="scaleddown"
       :data-jsv-img-color-space="colorSpace"
       :data-jsv-img-poster-image="isPosterImage"
+      :data-jsv-img-enable-aa="rEnableAA"
       :style="image_style"
       :src="props.src"
       v-bind="$attrs"

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -14,7 +14,7 @@
  *            imageSettings {Object}    设置中心logo图片，默认值为null，设置格式为：
  *                       {
  *                              src {string}        logo的url地址
- *                              height {int}     logo的宽度
+ *                              width {int}     logo的宽度
  *                              height {int}     logo的高度
  *                       }
  -->

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -13,6 +13,7 @@
  *          pointRes {string} (必需)粒子图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
  *          sprayStyle {object}  (必需)粒子效果配置
  *          ignoreClip {boolean} 无视clipView描画
+ *          onStop      {() => void} 停止喷射回调
  *
  * prop中的sprayStyle说明:
  *      type {int} (必需)喷射类型 0: 一次喷射 1: 持续喷射
@@ -38,13 +39,56 @@
  *      alphaMax {float} 透明度最大值, 默认为1
  *      angleMin {float} 角度最小值(角度)
  *      angleMax {float} 角度最大值(角度)
+ * 方法
+ *    start { () => void }
+ *      @descripe 开始喷射
+ *    stop { (immediate: boolean) => void }
+ *      @descripe 停止喷射
+ *      @param immediate { boolean } 是否立即消除粒子, false时会停止喷射,等待已有粒子消失
 -->
-<script>
+<script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import { urlCheckSet } from "../../JsViewVueTools";
+import { ref, onBeforeUnmount, onUpdated, onMounted } from "vue";
 
-let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
+const props = defineProps({
+  pointRes: {
+    type: String,
+    required: true,
+  },
+  sprayStyle: {
+    type: Object,
+    required: true,
+  },
+  ignoreClip: {
+    type: Boolean,
+    default: false,
+  },
+  onStop: {
+    type: Function,
+    default: null,
+  },
+});
+
+const widthSize = ref(0);
+const heightSize = ref(0);
+let sprayView = null;
+
+function unloadView() {
+  if (viewId.value != -1) {
+    Forge.sViewStore.remove(viewId.value);
+    viewId.value = -1;
+  }
+}
+
+let buildForgeView = (
+  pointRes,
+  sprayStyle,
+  ignoreClip,
+  widthRef,
+  heightRef
+) => {
   if (!pointRes) {
     return -1;
   }
@@ -60,7 +104,7 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
       texture_manager.GetImage2(image_url, false, null, "RGB_8888", null)
     );
   }
-  const spray_view = new Forge.SprayView(texture_setting);
+  sprayView = new Forge.SprayView(texture_setting);
   let add_speed = 0.1;
   if (typeof sprayStyle.particleAddSpeed == "number") {
     add_speed = sprayStyle.particleAddSpeed;
@@ -113,7 +157,7 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
     }
   }
 
-  spray_view.SetSprayInfo(
+  sprayView.SetSprayInfo(
     sprayStyle.type,
     sprayStyle.particleNum,
     add_speed,
@@ -142,69 +186,63 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
     sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
   const view_height =
     sprayStyle.deltaHeight === 0 ? 1 : 2 * sprayStyle.deltaHeight;
-  sizeRef.width = view_width;
-  sizeRef.height = view_height;
-  return Forge.sViewStore.add(new Forge.ViewInfo(spray_view, null));
+  widthRef.value = view_width;
+  heightRef.value = view_height;
+  return Forge.sViewStore.add(new Forge.ViewInfo(sprayView, null));
 };
+const viewId = ref(
+  buildForgeView(
+    props.pointRes,
+    props.sprayStyle,
+    props.ignoreClip,
+    widthSize,
+    heightSize
+  )
+);
 
-export default {
-  props: {
-    pointRes: {
-      type: String,
-      required: true,
-    },
-    sprayStyle: {
-      type: Object,
-      required: true,
-    },
-    ignoreClip: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      size: {
-        width: 0,
-        height: 0,
-      },
-      viewId: -1,
-    };
-  },
-  methods: {
-    unloadView() {
-      if (this.viewId != -1) {
-        Forge.sViewStore.remove(this.viewId);
-        this.viewId = -1;
-      }
-    },
-  },
-  created() {
-    this.viewId = buildForgeView(
-      this.pointRes,
-      this.sprayStyle,
-      this.size,
-      this.ignoreClip
-    );
-  },
-  updated() {
-    this.unloadView();
-    this.viewId = buildForgeView(
-      this.pointRes,
-      this.sprayStyle,
-      this.size,
-      this.ignoreClip
-    );
-  },
-  beforeUnmount() {
-    this.unloadView();
-  },
-};
+function onStop() {
+  props.onStop?.();
+}
+
+sprayView.RegisterOnStop(onStop);
+sprayView.RegisterEventListener();
+
+function start() {
+  sprayView.Start();
+}
+
+function stop(immediate) {
+  sprayView.Stop(immediate);
+}
+
+onMounted(() => {
+  start();
+});
+
+onUpdated(() => {
+  unloadView();
+  viewId.value = buildForgeView(
+    props.pointRes,
+    props.sprayStyle,
+    props.ignoreClip,
+    widthSize,
+    heightSize
+  );
+});
+
+onBeforeUnmount(() => {
+  unloadView();
+});
+
+defineExpose({
+  start,
+  stop,
+});
 </script>
 
 <template>
   <div
-    :style="{ width: size.width, height: size.height }"
+    :style="{ width: widthSize, height: heightSize }"
     :data-jsv-vw-innerview="viewId"
   ></div>
 </template>