@shijiu/jsview-vue 2.2.201 → 2.2.373

package/utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue

@@ -1,37 +1,57 @@
-<!-- 
-[模块 export 内容]
-  JsvFragShaderView：自定义Fragment shader的组件
-      props说明:
-          style         {Object}    (必填)left, top, width, height
-          shaderStr     {String}    (必填)shader的函数体
-          duration      {int}       动画时长
-          autoplay      {boolean}   自动播放
-          uniforms      {Array}     uniform参数, [{ name: string, value: number }]
-          textures      {Array}     texture参数, [{ name: string, resource: string }]
-      methods:
-          startAnim
-              @description 开始动画
-              @params {int} duration: 动画时长, 默认为props.duration
-          stopAnim
-              @description 停止动画
-      shader函数体说明:
-        参考网站: https://www.shadertoy.com
-        主函数: 
-          void mainImage( out vec4 fragColor, in vec2 fragCoord )
-            @params {vec4} fragColor: 输出的片元颜色
-            @params {vec2} fragCoord: 片元坐标, 左下角为原点, 往右为x正, 往上为y正
-      注意事项:
-        * 盒子端使用OpenGL ES 2.0版本, 而网站 https://www.shadertoy.com 上使用WebGL, glsl支持的函数和操作符有区别. 
-        * 由于坐标系的差异, texture()采样函数需要替换为jsvTexture2D()
-        * 盒子端的精度有限, 可能会出现精度导致的计算错误
-
- -->
+<script>
+/**
+ * @file
+ *
+ * [模块 export 内容]
+ *   JsvFragShaderView：自定义Fragment shader的组件
+ *       props说明:
+ *           @prop {Object} style  (必填)left, top, width, height
+ *           @prop {String}     shaderStr      (必填)shader的函数体
+ *           @prop {int}        duration       动画时长
+ *           @prop {boolean}    autoplay       自动播放
+ *           @prop {Array}      uniforms       uniform参数, [{ name: string, value: number }]
+ *           @prop {Array}      textures       texture参数, [{ name: string, resource: string }]
+ *           @prop {() => void} onStart        动画开始回调
+ *           @prop {(int,boolean) => void} onEnd
+ *                                动画结束回调,
+ *                                返回值1号 int: 回到参数为动画的序列号，和startAnim的返回值匹配
+ *                                返回值2号 boolean: true: 动画正常结束，false:动画因为cancel而结束
+ *       methods:
+ *           @method startAnim
+ *               @description 开始动画
+ *               @param {int} duration: 动画时长, 默认为props.duration
+ *               @param {()=>void} onTimeout: 如果到达duration的时长，动画因为资源问题还没开始动画的时会回调此函数
+ *               @return {int} 所开动画的序列号，用于和onEnd收到的值匹配
+ *           @method stopAnim
+ *               @description 停止动画
+ *       shader函数体说明:
+ *         参考网站: https://www.shadertoy.com
+ *         主函数:
+ *           void mainImage( out vec4 fragColor, in vec2 fragCoord )
+ *             @params {vec4} fragColor: 输出的片元颜色
+ *             @params {vec2} fragCoord: 片元坐标, 左下角为原点, 往右为x正, 往上为y正
+ *         可用的uniform:
+ *           iResolution:  {vec3}  view的大小, vec3(width, height, 0)
+ *           iTime:        {float} 动画时间
+ *           iDuration:    {float} 动画总时间
+ *       注意事项:
+ *         * 盒子端使用OpenGL ES 2.0版本, 而网站 https://www.shadertoy.com 上使用WebGL, glsl支持的函数和操作符有区别.
+ *         * 由于坐标系的差异, texture()采样函数需要替换为jsvTexture2D()
+ *         * 盒子端的精度有限, 可能会出现精度导致的计算错误
+ */
+</script>
+
 <script setup>
-import { onMounted, onBeforeUnmount } from "vue";
+import { onMounted, onUnmounted, shallowRef } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive.ts";
+import { JsvTextureLoadTool } from "../../JsViewVueTools/JsvTextureLoadTool";
 
-const props = defineProps({
+const rProps = defineProps({
   style: {
     type: Object,
     required: true,
@@ -56,13 +76,29 @@ const props = defineProps({
   textures: {
     type: Array,
   },
+  onEnd: {
+    type: Function,
+  },
+  onStart: {
+    type: Function,
+  },
 });
 
+// 激活引擎中的功能支持
+JsvUseFeature("JsvFragShaderView", FeatureNames.CustomFragShader);
+
+let rAnimRunning = shallowRef(false); // 动画是否在执行，画面只在动画进行时进行显示
+let vPreloadHandler = null;
+let vPreloadDone = false;
+let vStartingPromise = null; // 用于后加载启动处理
+let vStartToken = 0; // 计数，规避onEnd和start的不匹配
+let vStartAnimTimeoutId = -1; // 动画启动的timeout句柄
+
 //uniforms
-let uniformList = [];
-if (props.uniforms) {
-  for (let item of props.uniforms) {
-    uniformList.push({
+let cUniformList = [];
+if (rProps.uniforms) {
+  for (let item of rProps.uniforms) {
+    cUniformList.push({
       name: item.name,
       type: 1,
       value: item.value,
@@ -71,10 +107,11 @@ if (props.uniforms) {
 }
 
 //prepare texture
-let textureList = [];
-if (props.textures) {
+let cTextureList = [];
+if (rProps.textures) {
   const texture_manager = ForgeHandles.TextureManager;
-  for (let item of props.textures) {
+  let preload_textures = [];
+  for (let item of rProps.textures) {
     if (typeof item.resource == "string") {
       let image_url = item.resource;
       if (item.resource && item.resource.trim().indexOf("url(") === 0) {
@@ -87,51 +124,161 @@ if (props.textures) {
         "RGB_8888",
         null
       );
-      textureList.push({
+      cTextureList.push({
         name: item.name,
         id: texture.TexId,
       });
+      preload_textures.push(new JsvTextureLoadTool.ItemSet(image_url));
+    }
+
+    // 对图片进行预加载，等所有图片预加载完成后才能开始动画，以确保动画的完整性
+
+    vPreloadHandler = JsvTextureLoadTool.preload(preload_textures, () => {
+      vPreloadDone = true;
+
+      // 加载完成后直接释放句柄即可
+      vPreloadHandler.recycleResource();
+      vPreloadHandler = null;
+
+      if (vStartingPromise != null) {
+        vStartingPromise.resolve();
+      }
+    });
+    if (vPreloadHandler == null) {
+      // 无需要preload的内容，直接视为preloadDone
+      vPreloadDone = true;
+      if (vStartingPromise != null) {
+        vStartingPromise.resolve();
+      }
     }
   }
 }
 
-const fragShaderView = new Forge.FragShaderView();
-fragShaderView.SetShaderInfo(
-  props.shaderStr,
-  uniformList,
-  textureList,
-  (state, detail) => {
-    console.log("haha", state, detail);
-  }
+const cFragShaderView = new Forge.FragShaderView();
+cFragShaderView.SetShaderInfo(
+  rProps.shaderStr,
+  cUniformList,
+  cTextureList,
+  null
+  // (state, detail) => {
+  //   console.log("set shader reuslt: ", state, detail);
+  // }
 );
-let viewId = Forge.sViewStore.add(new Forge.ViewInfo(fragShaderView, ""));
+let vViewId = Forge.sViewStore.add(new Forge.ViewInfo(cFragShaderView, ""));
 
-const { left, top, width, height } = props.style;
+const { left: cLeft, top: cTop, width: cWidth, height: cHeight } = rProps.style;
 
-const startAnim = (d) => {
-  let duration = typeof d == "number" ? d : props.duration;
-  if (duration > 0) {
-    let shaderAnimation = new Forge.ShaderAnimation(duration, null);
-    fragShaderView.StartAnimation(shaderAnimation);
+function clearStartAnimTimeout() {
+  if (vStartAnimTimeoutId != -1) {
+    clearTimeout(vStartAnimTimeoutId);
+    vStartAnimTimeoutId = -1;
   }
+}
+
+const startAnim = (alt_duration, on_timeout_func) => {
+  vStartingPromise = null; // 重置promise回执处理
+  rAnimRunning.value = false;
+  vStartToken++;
+
+  let track_token = vStartToken;
+
+  // 确认duration的具体值
+  let duration =
+    typeof alt_duration == "number" ? alt_duration : rProps.duration;
+
+  // 制作timeout回调
+  clearStartAnimTimeout();
+  if (typeof on_timeout_func == "function" && !vPreloadDone) {
+    // 启动动画时，加载未结束
+    vStartAnimTimeoutId = setTimeout(() => {
+      vStartAnimTimeoutId = -1;
+      if (!rAnimRunning.value) {
+        // 超时后动画仍未开始则执行timeout回调
+        on_timeout_func();
+      }
+    }, Math.max(500, duration)); // 最低延迟500毫秒,避免0ms的时序问题
+  }
+
+  // 等待图片加载完成后进行
+  new Promise((resolve, reject) => {
+    if (!vPreloadDone) {
+      vStartingPromise = {
+        resolve,
+        reject,
+      };
+    } else {
+      resolve();
+    }
+  })
+    .then(() => {
+      if (vStartToken != track_token) {
+        // 序列不匹配
+        return;
+      }
+
+      vStartingPromise = null; // 重置promise回执处理
+
+      if (duration > 0) {
+        let shaderAnimation = new Forge.ShaderAnimation(duration, null);
+        shaderAnimation.Enable(0x1); // ReleaseAfterEndCallback
+        shaderAnimation.SetAnimationListener(
+          new Forge.AnimationListener(
+            null /* animation的onStart目前不调用 */,
+            (status) => {
+              if (vStartToken == track_token) {
+                // 序列匹配时才调整全局状态
+                rAnimRunning.value = false; // 动画结束，停止展示
+              }
+              rProps.onEnd?.(track_token, status);
+            },
+            null
+          )
+        );
+        rProps.onStart?.();
+        cFragShaderView.StartAnimation(shaderAnimation);
+      }
+
+      clearStartAnimTimeout();
+      rAnimRunning.value = true; // 动画启动后，展示界面，无论是否动画是否有时长
+    })
+    .catch(() => {
+      vStartingPromise = null;
+    });
+
+  return vStartToken;
 };
 
 const stopAnim = () => {
-  fragShaderView?.StopAnimation();
+  if (rAnimRunning.value) {
+    cFragShaderView?.StopAnimation();
+  } else {
+    if (vStartingPromise != null) {
+      vStartingPromise.reject();
+    }
+  }
 };
 
 onMounted(() => {
-  if (props.autoplay) {
-    startAnim(props.duration);
+  if (rProps.autoplay) {
+    startAnim(rProps.duration);
   }
 });
 
-onBeforeUnmount(() => {
-  if (viewId != -1) {
-    Forge.sViewStore.remove(viewId);
-    viewId = -1;
+onUnmounted(() => {
+  clearStartAnimTimeout();
+
+  if (vViewId != -1) {
+    Forge.sViewStore.remove(vViewId);
+    vViewId = -1;
+  }
+
+  if (vPreloadHandler != null) {
+    // 当preload句柄仍然未加载完并释放掉的场景
+    vPreloadHandler.recycleResource();
+    vPreloadHandler = null;
   }
 });
+
 defineExpose({
   startAnim,
   stopAnim,
@@ -139,7 +286,8 @@ defineExpose({
 </script>
 <template>
   <div
-    :style="{ left, top, width, height }"
-    :data-jsv-vw-innerview="viewId"
+    v-show="rAnimRunning"
+    :style="{ left: cLeft, top: cTop, width: cWidth, height: cHeight }"
+    :data-jsv-vw-innerview="vViewId"
   ></div>
 </template>

package/utils/JsViewVueWidget/JsvFreeMoveActor/FreeMoveActor.vue

@@ -6,6 +6,8 @@
 -->
 
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvFreeMoveActor/JsvFreeMoveDiv：
  *          帧动画控制组件，通过control
@@ -26,6 +28,10 @@
 <script setup>
 import ActControl from "./ActorControl.ts";
 import { shallowRef, onMounted } from "vue";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive.ts";
 
 const props = defineProps({
   // div的style设置,
@@ -67,6 +73,9 @@ const props = defineProps({
   },
 });
 
+// 激活引擎中的功能支持
+JsvUseFeature("FreeMoveActor", FeatureNames.FreeMoveDiv);
+
 let mainDivRef = shallowRef(null);
 let controller = new ActControl();
 if (props.sizeMode) {

package/utils/JsViewVueWidget/JsvFreeMoveActor/JsvEnvBlocker.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvEnvBlocker: 触发FreeMoveAnimation的 blockerCondition 的全屏碰撞体
  *                与FreeMoveAnimation的 setCondition.onHitBlock 配合使用

package/utils/JsViewVueWidget/JsvGrid.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【界面概述】
  *  表格式布局控件, 页面滚动时无动画. 一般用于对页面刷新速度有要求的场景
  *

package/utils/JsViewVueWidget/JsvHole.js

@@ -1,4 +1,6 @@
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * JsvHole 为video展示区域挖洞
  *      props说明:

package/utils/JsViewVueWidget/JsvInput/Cursor.vue

@@ -4,50 +4,54 @@
  * @LastEditTime: 2023-02-01 13:47:13
  * @Description: file content
 -->
-<script>
-import { ref } from "vue";
-export default {
-  props: {
-    left: {
-      type: Number,
-      default: 0,
-    },
-    top: { type: Number, default: 0 },
-    width: Number,
-    height: Number,
-    color: String,
-  },
-  setup() {
-    return {
-      intervalToken: -1,
-      visible: ref(false),
-    };
-  },
-  methods: {
-    _cleanInterval() {
-      if (this.intervalToken > 0) {
-        clearInterval(this.intervalToken);
-        this.intervalToken = -1;
-      }
-    },
-    startBlink() {
-      this._cleanInterval();
-      this.intervalToken = setInterval(() => {
-        this.visible = !this.visible;
-      }, 750);
-    },
-    stopBlink(show) {
-      this._cleanInterval();
-      this.visible = show;
-    },
-  },
-  mounted() {
-    this.startBlink();
-  },
-  beforeUnmount() {
-    this._cleanInterval();
+<script setup>
+import { shallowRef, onUnmounted, onMounted } from "vue";
+
+const rProps = defineProps({
+  left: {
+    type: Number,
+    default: 0,
   },
-};
+  top: { type: Number, default: 0 },
+  width: Number,
+  height: Number,
+  color: String,
+});
+
+let vIntervalToken = -1;
+let rVisible = shallowRef(false);
+
+function _CleanInterval() {
+  if (vIntervalToken > 0) {
+    clearInterval(vIntervalToken);
+    vIntervalToken = -1;
+  }
+}
+
+function startBlink() {
+  _CleanInterval();
+  vIntervalToken = setInterval(() => {
+    rVisible.value = !rVisible.value;
+  }, 750);
+}
+
+function stopBlink(show) {
+  _CleanInterval();
+  rVisible.value = show;
+}
+
+onMounted(() => {
+  startBlink();
+});
+
+onUnmounted(() => {
+  _CleanInterval();
+});
+
+defineExpose({
+  startBlink,
+  stopBlink,
+});
 </script>
 
 <template>
@@ -58,7 +62,7 @@ export default {
       width,
       height,
       backgroundColor: color,
-      visibility: visible ? 'inherit' : 'hidden',
+      visibility: rVisible ? 'inherit' : 'hidden',
     }"
   />
-</template>
+</template>