@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0

package/DemoForOperator/Genie/geniePakcer/GenieImage.vue

@@ -0,0 +1,298 @@
+<script setup>
+import buildGenieAnimation from "./GenieTools.ts";
+import {
+  shallowRef,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+} from "jsview";
+const props = defineProps({
+  /** 
+   * 组件宽度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  width: { type: Number, require: true },
+  
+  /** 
+   * 组件高度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  height: { type: Number, require: true },
+  
+  /** 
+   * 左侧定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  left: { type: Number, default: 0 },
+  
+  /** 
+   * 顶部定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  top: { type: Number, default: 0 },
+  
+  /** 
+   * 动画持续时间（秒），且不支持响应式
+   * @type {Number}
+   * @default 2
+   */
+  time: { type: Number, default: 2 },
+  
+  /** 
+   * 动画中心点坐标（必填），且不支持响应式
+   * @type {Object} 
+   * @property {Number} x - X轴坐标
+   * @property {Number} y - Y轴坐标
+   */
+  position: { type: Object, require: true },
+  
+  /** 
+   * 缩放比例，且不支持响应式
+   * @type {Number}
+   * @default 1
+   */
+  size: { type: Number, default: 1 },
+  
+  /** 
+   * 动画方向（必填），且不支持响应式
+   * @type {'horizontal'|'vertical'}
+   */
+  direction: { type: String, require: true },
+  
+  /** 
+   * 动画结束回调函数
+   * @type {Function}
+   * @default () => {}
+   */
+  onAnimEnd: { type: Function, default: () => {} },
+  
+  /** 
+   * 初始显示状态（必填），且不支持响应式
+   * @type {Boolean}
+   */
+  initShow: { type: Boolean, require: true },
+
+  /** 
+   * 截屏后的纹理名称
+   * @type {String}
+   */
+  textureName: { type: String, default: null },
+
+  /** 
+   * 图片url, 与截屏二选一
+   * @type {String}
+   */
+  imageUrl: { type: String, default: null },
+});
+
+
+let rSlotShowOnDone = shallowRef(false);
+
+let vUnmounted = false; // 当前组件是否已经卸载, 用于控制Timer回调后的有效性
+
+// 初始状态slot显示状态
+const STAGE_DONE = 1;
+// 截屏回调执行了doAnim后, 此动作会v-if加载JsvFragShaderView, 并隐藏slot
+const STAGE_STARTING_ANIMATION = 3;
+// JsvFragShaderView加载完成(onRef回调), 设置动画属性来开始动画
+const STAGE_ANIMATING = 4;
+// 动画结束的onAllAnimEnd回调后, 至此, setTimeout(1)后, 设置为STAGE_DONE, 并进行props.onAnimEnd回调
+const STAGE_CLOSING_ANIMATION = 5;
+
+let rStageMachine = shallowRef(STAGE_DONE);
+
+//动画
+const cStyleShell = getKeyFramesGroup();
+//动画字符串
+let vAniStr = shallowRef(null);
+
+const { 
+  vRelease, 
+  vContract, 
+  vShader,
+  vTransformDirection, //位移动画中心点方向
+  KeyFrameReleaseName,
+  KeyFrameContractName,
+} = buildGenieAnimation(props.position, props.width, props.height, props.direction);
+
+// Shader配置, 因为组件在动画时都是重新创建的, 所以不用做成响应式 
+const cShaderInfo = {
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: null,
+    },
+  ],
+  duration: props.time * 1000,
+};
+
+// 制作基础版shader
+const cLocalizationShader = vShader;
+
+//根据初始状态展示
+if (props.initShow) {
+  rSlotShowOnDone.value = true;
+} else {
+  rSlotShowOnDone.value = false;
+}
+
+const onAllAnimEnd = () => {
+  rStageMachine.value = STAGE_CLOSING_ANIMATION;
+
+  setTimeout(() => {
+    rStageMachine.value = STAGE_DONE;
+    if (!vUnmounted) {
+      if (props.onAnimEnd) {
+        props.onAnimEnd();
+      }
+    }
+  }, 1);
+}
+
+const onShaderViewNewRef = (widgetRef) => {
+  if (widgetRef != null) {
+    rStageMachine.value = STAGE_ANIMATING;
+
+    widgetRef.startAnim();
+  } else {
+    // 动画结束后的组件消失回调, 不需要做任何事情
+  }
+}
+
+cStyleShell.insertRule(vContract);
+cStyleShell.insertRule(vRelease);
+
+function doAnim() {
+  rStageMachine.value = STAGE_STARTING_ANIMATION;
+
+  if (rSlotShowOnDone.value) {
+    vAniStr = KeyFrameReleaseName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "(iDuration - iTime) / iDuration");
+  } else {
+    vAniStr = KeyFrameContractName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "iTime / iDuration");
+  }
+}
+
+let vWaitingImageLoadResolveFunc = null;
+let vImageLoaded = false;
+
+const onImageLoad = () => {
+  if (vUnmounted) {
+    return;
+  }
+
+  vImageLoaded = true;
+
+  if (vWaitingImageLoadResolveFunc) {
+    vWaitingImageLoadResolveFunc();
+  }
+}
+
+const switcher = async () => {
+  if (rStageMachine.value != STAGE_DONE) {
+    // 动画还没结束, 不能切换
+    // 结束后因为slot显示资源可能要重新加载, 所以也不适宜做switcher指令堆积处理
+    return;
+  }
+
+  if (props.imageUrl && !vImageLoaded) {
+    // 等待图片加载完成
+    await new Promise((resolve) => {
+      vWaitingImageLoadResolveFunc = resolve;
+    });
+  }
+
+  if (props.textureName) {
+    cShaderInfo.textures[0].resource = `jsvtexturestore://${props.textureName}`;
+  } else {
+    cShaderInfo.textures[0].resource = props.imageUrl;
+  }
+
+  // 反转显示目标
+  rSlotShowOnDone.value = !rSlotShowOnDone.value;
+
+  doAnim();
+};
+
+onMounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  vUnmounted = true;
+  window.JsvCoreApi.enableFpsDisplay(false);
+});
+
+onBeforeUnmount(() => {
+  cStyleShell.removeRule(KeyFrameContractName);
+  cStyleShell.removeRule(KeyFrameReleaseName);
+});
+
+defineExpose({
+  /**
+   * 触发精灵动画切换
+   * 执行截屏并启动收缩/展开动画
+   */
+  switcher,
+});
+
+</script>
+<template>
+  <div
+    :style="{
+      left: props.left,
+      top: props.top,
+    }"
+  >
+    <div
+      v-if="rStageMachine == STAGE_ANIMATING || rStageMachine == STAGE_STARTING_ANIMATION"
+      :style="{
+        width: props.width,
+        height: props.height,
+        animation: `${vAniStr} ${props.time}s`,
+        transformOrigin: vTransformDirection,
+      }"
+      @animationend="onAllAnimEnd"
+    >
+      <jsv-frag-shader-view
+        :ref="onShaderViewNewRef"
+        :style="{
+          width: props.width,
+          height: props.height,
+        }"
+        :duration="cShaderInfo.duration"
+        :shaderStr="cShaderInfo.shader"
+        :autoplay="false"
+        :textures="cShaderInfo.textures"
+        :loadComfirmed="true"
+      >
+      </jsv-frag-shader-view>
+    </div>
+    <div
+      v-show="rStageMachine == STAGE_DONE || rStageMachine == STAGE_CLOSING_ANIMATION"
+    >
+      <div
+        v-if="props.textureName"
+        :style="{
+            width: rSlotShowOnDone ? props.width : 1,
+            height: rSlotShowOnDone ? props.height : 1,
+            backgroundImage: `url(jsvtexturestore://${props.textureName})`,
+        }"/>
+        <img v-else :src="props.imageUrl" :style="{
+            width: rSlotShowOnDone ? props.width : 1,
+            height: rSlotShowOnDone ? props.height : 1,
+          }" 
+          @load="onImageLoad"
+        />
+    </div>
+  </div>
+</template>

package/DemoForOperator/Genie/geniePakcer/GenieSlot.vue

@@ -0,0 +1,292 @@
+<script setup>
+import buildGenieAnimation from "./GenieTools.ts";
+import {
+  shallowRef,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+  JsvTextureStoreApi,
+} from "jsview";
+const props = defineProps({
+  /** 
+   * 组件宽度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  width: { type: Number, require: true },
+  
+  /** 
+   * 组件高度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  height: { type: Number, require: true },
+  
+  /** 
+   * 左侧定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  left: { type: Number, default: 0 },
+  
+  /** 
+   * 顶部定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  top: { type: Number, default: 0 },
+  
+  /** 
+   * 动画持续时间（秒），且不支持响应式
+   * @type {Number}
+   * @default 2
+   */
+  time: { type: Number, default: 2 },
+  
+  /** 
+   * 动画中心点坐标（必填），且不支持响应式
+   * @type {Object} 
+   * @property {Number} x - X轴坐标
+   * @property {Number} y - Y轴坐标
+   */
+  position: { type: Object, require: true },
+  
+  /** 
+   * 缩放比例，且不支持响应式
+   * @type {Number}
+   * @default 1
+   */
+  size: { type: Number, default: 1 },
+  
+  /** 
+   * 动画方向（必填），且不支持响应式
+   * @type {'horizontal'|'vertical'}
+   */
+  direction: { type: String, require: true },
+  
+  /** 
+   * 动画结束回调函数
+   * @type {Function}
+   * @default () => {}
+   */
+  onAnimEnd: { type: Function, default: () => {} },
+  
+  /** 
+   * 初始显示状态（必填），且不支持响应式
+   * @type {Boolean}
+   */
+  initShow: { type: Boolean, require: true },
+});
+
+
+let rSlotShowOnDone = shallowRef(false);
+
+let vUnmounted = false; // 当前组件是否已经卸载, 用于控制Timer回调后的有效性
+
+// 初始状态slot显示状态
+const STAGE_DONE = 1;
+// 对slot进行截屏
+const STAGE_CAPTURE = 2;
+// 截屏回调执行了doAnim后, 此动作会v-if加载JsvFragShaderView, 并隐藏slot
+const STAGE_STARTING_ANIMATION = 3;
+// JsvFragShaderView加载完成(onRef回调), 设置动画属性来开始动画
+const STAGE_ANIMATING = 4;
+// 动画结束的onAllAnimEnd回调后, 至此, setTimeout(1)后, 设置为STAGE_DONE, 并进行props.onAnimEnd回调
+const STAGE_CLOSING_ANIMATION = 5;
+
+let rStageMachine = shallowRef(STAGE_DONE);
+
+//动画
+const cStyleShell = getKeyFramesGroup();
+//动画字符串
+let vAniStr = shallowRef(null);
+
+const { 
+  vRelease, 
+  vContract, 
+  vShader,
+  vTransformDirection, //位移动画中心点方向
+  KeyFrameReleaseName,
+  KeyFrameContractName,
+} = buildGenieAnimation(props.position, props.width, props.height, props.direction);
+
+// Shader配置, 因为组件在动画时都是重新创建的, 所以不用做成响应式 
+const cShaderInfo = {
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: null,
+    },
+  ],
+  duration: props.time * 1000,
+};
+
+// 制作基础版shader
+const cLocalizationShader = vShader;
+
+//根据初始状态展示
+if (props.initShow) {
+  rSlotShowOnDone.value = true;
+} else {
+  rSlotShowOnDone.value = false;
+}
+
+const onAllAnimEnd = () => {
+  rStageMachine.value = STAGE_CLOSING_ANIMATION;
+
+  setTimeout(() => {
+    rStageMachine.value = STAGE_DONE;
+    if (!vUnmounted) {
+      if (props.onAnimEnd) {
+        props.onAnimEnd();
+      }
+    }
+  }, 1);
+}
+
+const onShaderViewNewRef = (widgetRef) => {
+  if (widgetRef != null) {
+    rStageMachine.value = STAGE_ANIMATING;
+
+    widgetRef.startAnim();
+  } else {
+    // 动画结束后的组件消失回调, 不需要做任何事情
+  }
+}
+
+cStyleShell.insertRule(vContract);
+cStyleShell.insertRule(vRelease);
+
+function doAnim() {
+  rStageMachine.value = STAGE_STARTING_ANIMATION;
+
+  if (rSlotShowOnDone.value) {
+    vAniStr = KeyFrameReleaseName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "(iDuration - iTime) / iDuration");
+  } else {
+    vAniStr = KeyFrameContractName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "iTime / iDuration");
+  }
+}
+
+let rSlotRootRef = shallowRef(null);
+
+let rDebugCaptureResult = shallowRef(null);
+
+const switcher = () => {
+  if (rStageMachine.value != STAGE_DONE) {
+    // 动画还没结束, 不能切换
+    // 结束后因为slot显示资源可能要重新加载, 所以也不适宜做switcher指令堆积处理
+    return;
+  }
+
+
+  rStageMachine.value = STAGE_CAPTURE;
+  JsvTextureStoreApi.capture2Texture(
+    rSlotRootRef.value,
+    (textureName, autoRecycle, w, h) => {
+      if (vUnmounted) {
+        return;
+      }
+
+      cShaderInfo.textures[0].resource = `jsvtexturestore://${textureName}`;
+      rDebugCaptureResult.value = `jsvtexturestore://${textureName}`;
+
+      if (autoRecycle) {
+        // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+      }
+
+      // 截图后反转状态
+      rSlotShowOnDone.value = !rSlotShowOnDone.value;
+
+      doAnim();
+    },
+    true // 自动回收, 不填也行，默认为true
+  );
+};
+
+onMounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  vUnmounted = true;
+  window.JsvCoreApi.enableFpsDisplay(false);
+});
+
+onBeforeUnmount(() => {
+  cStyleShell.removeRule(KeyFrameContractName);
+  cStyleShell.removeRule(KeyFrameReleaseName);
+});
+
+defineExpose({
+  /**
+   * 触发精灵动画切换
+   * 执行截屏并启动收缩/展开动画
+   */
+  switcher,
+});
+
+</script>
+<template>
+  <div
+    :style="{
+      left: props.left,
+      top: props.top,
+    }"
+  >
+    <div
+      v-if="rStageMachine == STAGE_ANIMATING || rStageMachine == STAGE_STARTING_ANIMATION"
+      :style="{
+        width: props.width,
+        height: props.height,
+        animation: `${vAniStr} ${props.time}s`,
+        transformOrigin: vTransformDirection,
+      }"
+      @animationend="onAllAnimEnd"
+    >
+      <jsv-frag-shader-view
+        :ref="onShaderViewNewRef"
+        :style="{
+          width: props.width,
+          height: props.height,
+        }"
+        :duration="cShaderInfo.duration"
+        :shaderStr="cShaderInfo.shader"
+        :autoplay="false"
+        :textures="cShaderInfo.textures"
+      >
+      </jsv-frag-shader-view>
+    </div>
+    <div
+      v-show="rStageMachine == STAGE_CAPTURE || rStageMachine == STAGE_DONE || rStageMachine == STAGE_CLOSING_ANIMATION"
+      :style="{
+        width: rSlotShowOnDone ? props.width : 1,
+        height: rSlotShowOnDone ? props.height : 1,
+        overflow: rSlotShowOnDone ? null : 'hidden',
+        // width: props.width,
+        // height: props.height,
+      }"
+    >
+      <div
+        ref="rSlotRootRef"
+        :style="{
+          width: props.width,
+          height: props.height,
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <!-- <div :style="{
+      width: 320,
+      height: 160,
+      backgroundImage: rDebugCaptureResult ? `url(${rDebugCaptureResult})` : '',
+    }"/> -->
+
+  </div>
+</template>