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

package/utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue

@@ -12,6 +12,7 @@
  *           @prop {Array}      uniforms       uniform参数, [{ name: string, value: number }]
  *           @prop {Array}      textures       texture参数, [{ name: string, resource: string }]
  *           @prop {() => void} onStart        动画开始回调
+ *           @prop {boolean}    reverseAnimate 是否反向动画
  *           @prop {(int,boolean) => void} onEnd
  *                                动画结束回调,
  *                                返回值1号 int: 回到参数为动画的序列号，和startAnim的返回值匹配
@@ -65,6 +66,10 @@ const rProps = defineProps({
     type: Boolean,
     default: false,
   },
+  reverseAnimate: {
+    type: Boolean,
+    default: false,
+  },
   shaderStr: {
     type: String,
     required: true,
@@ -88,8 +93,6 @@ const rProps = defineProps({
 // 激活引擎中的功能支持
 JsvUseFeature("JsvFragShaderView", FeatureNames.CustomFragShader);
 
-console.log("LudlDebug using JsvFragShaderView...");
-
 let rAnimRunning = shallowRef(false); // 动画是否在执行，画面只在动画进行时进行显示
 let vPreloadHandler = null;
 let vPreloadDone = false;
@@ -133,26 +136,25 @@ if (rProps.textures) {
       });
       preload_textures.push(new JsvTextureLoadTool.ItemSet(image_url));
     }
+  }
+  // 对图片进行预加载，等所有图片预加载完成后才能开始动画，以确保动画的完整性
 
-    // 对图片进行预加载，等所有图片预加载完成后才能开始动画，以确保动画的完整性
-
-    vPreloadHandler = JsvTextureLoadTool.preload(preload_textures, () => {
-      vPreloadDone = true;
+  vPreloadHandler = JsvTextureLoadTool.preload(preload_textures, () => {
+    vPreloadDone = true;
 
-      // 加载完成后直接释放句柄即可
-      vPreloadHandler.recycleResource();
-      vPreloadHandler = null;
+    // 加载完成后直接释放句柄即可
+    vPreloadHandler.recycleResource();
+    vPreloadHandler = null;
 
-      if (vStartingPromise != null) {
-        vStartingPromise.resolve();
-      }
-    });
-    if (vPreloadHandler == null) {
-      // 无需要preload的内容，直接视为preloadDone
-      vPreloadDone = true;
-      if (vStartingPromise != null) {
-        vStartingPromise.resolve();
-      }
+    if (vStartingPromise != null) {
+      vStartingPromise.resolve();
+    }
+  });
+  if (vPreloadHandler == null) {
+    // 无需要preload的内容，直接视为preloadDone
+    vPreloadDone = true;
+    if (vStartingPromise != null) {
+      vStartingPromise.resolve();
     }
   }
 }
@@ -178,7 +180,7 @@ function clearStartAnimTimeout() {
   }
 }
 
-const startAnim = (alt_duration, on_timeout_func) => {
+const startAnim = (alt_duration, on_timeout_func, reverse = false) => {
   vStartingPromise = null; // 重置promise回执处理
   rAnimRunning.value = false;
   vStartToken++;
@@ -223,7 +225,9 @@ const startAnim = (alt_duration, on_timeout_func) => {
 
       if (duration > 0) {
         let shaderAnimation = new Forge.ShaderAnimation(duration, null);
-        shaderAnimation.Enable(0x1); // ReleaseAfterEndCallback
+        shaderAnimation.Enable(
+          0x1 | (reverse ? Forge.AnimationEnable.Reverse : 0)
+        ); // ReleaseAfterEndCallback
         shaderAnimation.SetAnimationListener(
           new Forge.AnimationListener(
             null /* animation的onStart目前不调用 */,
@@ -263,7 +267,7 @@ const stopAnim = () => {
 
 onMounted(() => {
   if (rProps.autoplay) {
-    startAnim(rProps.duration);
+    startAnim(rProps.duration, undefined, rProps.reverseAnimate);
   }
 });
 

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetAction.ts

@@ -280,7 +280,7 @@ class ActorPackBuilder {
         ActOnGetToSpeed(
           this,
           xSpeed, ySpeed,
-          [ActionCmdBuilder.ResetAcc(0, 0),
+          [ActionCmdBuilder.SetAccel(0, 0),
           this._NexusRecv ? StateCmdBuilder.FireNexusEvent(ActEventDefine.ActFinish, this._NexusRecv.token) : null
           ],
           true, // isFinal

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/JsvInput/JsvInput.vue

@@ -157,6 +157,7 @@ function _OnTextChanged(input_final_text, dsp_text) {
   );
   rInputFinalText.value = dsp_text;
   rInputFinalTextLenth.value = dsp_text.length;
+  rProps.onTextChange?.(dsp_text);
 }
 
 function _OnCursorPositionChanged(text_left, cursor_left) {

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/JsvPreload/JsvPreload.vue

@@ -197,13 +197,13 @@ const _getPreloadViewIdList = () => {
       return;
     }
     const callback_token = texture.RegisterLoadImageCallback(null, (params) => {
-      console.log(`preload succeed ${image_url}`, params);
+      // console.log(`preload succeed ${image_url}`, params);
       preloadStateList[index] = true;
       preloadResultMap[item.url] = {
         width: params.width,
         height: params.height,
       };
-      console.log(`preload succeed ${item.url}, params:${params}`);
+      // console.log(`preload succeed ${item.url}, params:${params}`);
       _checkPreload();
     });
     texture.EnableBackgroundLoad();

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/JsvSmoothSlideContainer.vue

@@ -0,0 +1,108 @@
+<template>
+  <div ref="root">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import ActorControl from "./JsvFreeMoveActor/ActorControl";
+import { shallowRef, onMounted, computed, ref } from "vue";
+
+const props = defineProps({
+  initPosition: {
+    type: Array,
+    default: () => [0, 0],
+  },
+});
+
+const ReachConditionGroup = 2;
+
+const root = shallowRef();
+const actorControl = new ActorControl();
+let preTarget = props.initPosition;
+let curTarget = props.initPosition;
+
+onMounted(() => {
+  actorControl.bindForgeView(root.value.jsvGetProxyView(), true);
+  // 初始化位置
+  actorControl.run((cmds) => [
+    cmds.action().teleportTo(props.initPosition[0], props.initPosition[1]),
+  ]);
+});
+
+let curSpeed = 0;
+
+/**
+ * 移动到指定位置
+ * @param speed 速度
+ * @param x 目标x坐标
+ * @param y 目标y坐标
+ * @param onReach 到达目标位置后的回调
+ * @param prex 到达前x坐标
+ * @param prey 到达前y坐标
+ * @param onPreReach 到达前回调
+ */
+const moveTo = (speed, x, y, onReach, prex, prey, onPreReach) => {
+  if (x == curTarget[0] && y == curTarget[1] && curSpeed == speed) {
+    return;
+  }
+  curSpeed = speed;
+  let targetX = undefined;
+  let targetY = undefined;
+  let preTargetX = undefined;
+  let preTargetY = undefined;
+  let speedX = undefined;
+  let speedY = undefined;
+
+  preTarget = [curTarget[0], curTarget[1]];
+  curTarget = [x, y];
+  const vec = [x - preTarget[0], y - preTarget[1]];
+  const module = Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1]);
+  if (vec[0] != 0) {
+    speedX = (vec[0] / module) * speed;
+    targetX = x;
+    preTargetX = prex;
+  } else if (vec[1] != 0) {
+    speedY = (vec[1] / module) * speed;
+    targetY = y;
+    preTargetY = prey;
+  }
+
+  actorControl.run((cmds) => [
+    cmds.state().removeConditionByGroup(ReachConditionGroup),
+    cmds.action(0, 0).setSpeed(speedX, speedY),
+    cmds
+      .condition(ReachConditionGroup)
+      .reachPosition(preTargetX, preTargetY)
+      .then([onPreReach]),
+    cmds
+      .condition(ReachConditionGroup)
+      .reachPosition(targetX, targetY)
+      .then([onReach]),
+  ]);
+};
+
+/**
+ * 刹车到指定位置
+ * @param x 目标x坐标
+ * @param y 目标y坐标
+ */
+const brakeTo = (x, y) => {
+  actorControl.run((cmds) => [cmds.action(3, 0).brakeToPosition(x, y)]);
+};
+
+const stop = () => {
+  actorControl.run((cmds) => [cmds.action().setSpeed(0, 0)]);
+};
+
+const setSpeed = (speedX, speedY) => {
+  actorControl.run((cmds) => [cmds.action().setSpeed(speedX, speedY)]);
+};
+
+defineExpose({
+  moveTo,
+  brakeTo,
+  stop,
+  setSpeed,
+});
+</script>