@shijiu/jsview-vue-samples 2.2.201 → 2.2.373

package/BakeViewDemo/App.vue

@@ -37,7 +37,12 @@ onMounted(() => {
       (textureName, autoRecycle, w, h) => {
         vCapturedTexture.value = textureName;
         console.log(`capture done id=${textureName} w=${w} h=${h}`);
-      }
+
+        if (autoRecycle) {
+          // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+        }
+      },
+      true // 自动回收, 不填也行，默认为true
     );
   }, 2200);
 });

package/Basic/components/anim/AnimEasingCubicBezier.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { getKeyFramesGroup } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const itemStyle = {
+  top: 20,
+  left: 20,
+  width: 60,
+  height: 60,
+  fontSize: 15,
+  color: "rgba(255, 255, 0, 1)",
+  backgroundColor: "rgba(255, 0, 0, 1)",
+};
+
+// 单纯的放大动画使用贝塞尔的timingFunction成为心跳效果
+const cP1 = [0.42, 3.96];
+const cP2 = [0.62, 0];
+const sScaleUpTs = `BasicAnim_PumpUp 0.8s cubic-bezier(${cP1[0]}, ${cP1[1]}, ${cP2[0]}, ${cP2[1]}) infinite`;
+
+// 暂时不暴露fill-mode = forwards接口
+// const sScaleUpOnce = `BasicAnim_PumpUp 0.8s cubic-bezier(${cP1[0]}, ${cP1[1]}, ${cP2[0]}, ${cP2[1]}) 3 forwards`;
+
+// 拿取group句柄
+const styleShell = getKeyFramesGroup();
+
+// 动态注入规则, 注意 keyFrame 名称是全局的, 不要重名
+styleShell.insertRule(
+  "@keyframes BasicAnim_PumpUp \
+    {from {transform: scale3d(1, 1, 1);} \
+    to {transform: scale3d(1.2, 1.2, 1);}}"
+);
+
+// keyFrame 注意unmount时的销毁
+onBeforeUnmount(() => {
+  styleShell.removeRule("BasicAnim_PumpUp");
+});
+</script>
+
+<template>
+  <div id="layout-root">
+    <div :style="{ ...itemStyle, animation: sScaleUpTs }">
+      {{ "心跳\n效果" }}
+    </div>
+    <!-- <div
+      :style="{
+        ...itemStyle,
+        left: 100,
+        animation: sScaleUpOnce,
+      }"
+    >
+      {{ "心跳\n效果2" }}
+    </div> -->
+  </div>
+</template>
+
+<style></style>

package/Basic/components/anim/AnimGroup2.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+import ContentBlock from "../ContentBlock.vue";
+import AnimEasingCubicBezier from "./AnimEasingCubicBezier.vue";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="1"
+      title="贝塞尔动画"
+    >
+      <AnimEasingCubicBezier />
+    </ContentBlock>
+  </div>
+</template>

package/Basic/components/panel/Panel2.vue

@@ -1,13 +1,14 @@
 <script setup>
 import TitleBar from "./TitleBar.vue";
 import ImageGroup from "../img/ImageGroup.vue";
+import AnimGroup2 from "../anim/AnimGroup2.vue";
 
 const props = defineProps({
   panelClass: String,
   itemSides: Object,
 });
 
-const titleData = ["img标签"];
+const titleData = ["img标签", "div动画2"];
 </script>
 
 <template>
@@ -23,9 +24,13 @@ const titleData = ["img标签"];
         :contentClass="panelClass"
         :itemSides="itemSides"
       />
+      <AnimGroup2
+        :style="{ left: itemSides.width * 1 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
     </div>
   </div>
 </template>
 
-<style>
-</style>
+<style></style>

package/CoupletsTest/widget/Banger/Maroon.vue

@@ -110,7 +110,6 @@ const sprayOk = {
   lifeMax: 2000,
   accelerateX: 0,
   accelerateY: 0,
-  addNumSpeed: 0.001,
   enableFade: true,
   enableShrink: true,
 };

package/CoupletsTest/widget/Fireworks/Fireworks.vue

@@ -270,7 +270,6 @@ const sprayOk = {
   lifeMax: 800,
   accelerateX: 0,
   accelerateY: 0,
-  addNumSpeed: 0.001,
   enableFade: false,
   enableShrink: true,
 };
@@ -288,7 +287,6 @@ const sprayOk1 = {
   lifeMax: 2000,
   accelerateX: 0,
   accelerateY: -40,
-  addNumSpeed: 0.001,
   enableFade: false,
   enableShrink: false,
 };

package/CustomShader/App.vue

@@ -24,6 +24,7 @@ const cShaderSettings = [
         resource: ImageOwl,
       },
     ],
+    duration: 100000,
   },
   {
     name: "pageFlip",
@@ -35,6 +36,16 @@ const cShaderSettings = [
         resource: ImageOwl,
       },
     ],
+    duration: 500,
+    onEnd: (id, status) => {
+      if (status) {
+        // 动画正常结束，而非cancel打断
+        console.log("flip anim end");
+        rShowShaderView.value = false;
+      } else {
+        console.log("flip anim cancel");
+      }
+    },
   },
   {
     name: "sdf",
@@ -46,7 +57,9 @@ const cShaderSettings = [
         resource: ImageOwl,
       },
     ],
+    duration: 100000,
   },
+  // 高斯模糊性能太差，先不做推广
   {
     name: "gaussianBlur",
     shader: gaussianBlurShader,
@@ -57,27 +70,31 @@ const cShaderSettings = [
         resource: ImageOwl,
       },
     ],
+    duration: 0,
   },
 ];
 
+const rShowShaderView = ref(true);
 const rKeyCount = ref(0);
 const rShaderInfo = computed(() => {
   return cShaderSettings[rKeyCount.value];
 });
 
 const rAutoplay = computed(() => {
-  return rKeyCount.value != 3;
+  return true;
 });
 
 const rWidgetRef = ref();
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 37: {
+      rShowShaderView.value = true;
       rKeyCount.value =
         rKeyCount.value > 0 ? rKeyCount.value - 1 : rKeyCount.value;
       return true;
     }
     case 39: {
+      rShowShaderView.value = true;
       rKeyCount.value =
         rKeyCount.value < cShaderSettings.length - 1
           ? rKeyCount.value + 1
@@ -85,9 +102,8 @@ const onKeyDown = (ev) => {
       return true;
     }
     case 13: {
-      if (rKeyCount.value != 3) {
-        rWidgetRef.value?.startAnim();
-      }
+      rShowShaderView.value = true;
+      rWidgetRef.value?.startAnim();
       return true;
     }
     default:
@@ -111,30 +127,31 @@ onUnmounted(() => {
       onKeyDown,
     }"
     :style="{
-      width: 1920,
-      height: 1080,
+      width: 1280,
+      height: 720,
       backgroundImage: `url(${ImageChinChilla})`,
     }"
   ></jsv-focus-block>
 
   <jsv-frag-shader-view
+    v-if="rShowShaderView"
     :key="rKeyCount"
     ref="rWidgetRef"
-    :style="{ left: 0, top: 0, width: 1920, height: 1080 }"
-    :duration="100000"
+    :style="{ left: 0, top: 0, width: 1280, height: 720 }"
+    :duration="rShaderInfo.duration"
     :shaderStr="rShaderInfo.shader"
     :autoplay="rAutoplay"
     :textures="rShaderInfo.textures"
+    :onEnd="rShaderInfo.onEnd"
   ></jsv-frag-shader-view>
   <div
     :key="rKeyCount"
     :style="{
-      top: 20,
-      left: 500,
+      top: 100,
+      left: 20,
       width: 500,
       height: 50,
       fontSize: 30,
-      textAlign: 'center',
       backgroundColor: '#00000055',
       color: '#ffffff',
     }"
@@ -143,8 +160,8 @@ onUnmounted(() => {
   </div>
   <div
     :style="{
-      top: 20,
-      left: 1400,
+      top: 150,
+      left: 20,
       width: 500,
       height: 50,
       fontSize: 30,

package/CustomShader/pageFlip.glsl

@@ -1,3 +1,4 @@
+//https://andrewhungblog.wordpress.com/2018/04/29/page-curl-shader-breakdown/
 #define pi 3.14159265359
 #define radius .1
 
@@ -13,7 +14,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 aspect = iResolution.xy / iResolution.y;
   vec2 uv = fragCoord * aspect / iResolution.xy;
   vec2 anchor = aspect;
-  vec2 mouse = anchor - abs(sin(iTime / 2.)) * anchor;
+  vec2 mouse = anchor - abs(iTime / iDuration) * anchor;
   vec2 mouseDir = normalize(anchor - mouse);
   vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
   float mouseDist = length(mouse - origin);
@@ -22,7 +23,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float dist = proj - mouseDist;
   vec2 linePoint = uv - dist * mouseDir;
   if(dist > radius) {
-    fragColor = vec4(0.0, 0.5, 0.6, 1.0);
+    fragColor = vec4(0.0, 0.0, 0.0, 0.0);
     fragColor.rgb *= pow(clamp(dist - radius, 0., 1.) * 1.5, .2);
   } else if(dist >= 0.) {
     // map to cylinder point

package/DemoHomepage/App.vue

@@ -6,13 +6,14 @@
  * @Description: file content
 -->
 <script setup>
-import { shallowRef, onMounted, onUnmounted } from "vue";
+import { shallowRef, onMounted, onUnmounted, provide } from "vue";
 import {
   JsvPreload,
   buildPreloadInfo,
   jJsvRuntimeBridge,
   JsvFocusBlock,
   useFocusHub,
+  JsvTouchModeSwitcher,
 } from "jsview";
 import { useRouter } from "vue-router";
 import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
@@ -20,7 +21,8 @@ import { getSearchQuery } from "../CommonUtils/getSearchQuery.js";
 
 let DemoResourceBase = shallowRef("");
 let backgroundImageUrl = shallowRef(null);
-
+const touchModeSwitcherRef = shallowRef();
+provide("touchModeSwitcherRef", touchModeSwitcherRef);
 // let preloadInfo = shallowRef([]);
 
 window.DebugFocusHub = useFocusHub();
@@ -54,6 +56,9 @@ if (query.DemoResourceBase) {
   DemoResourceBase.value = getDataUrl();
 }
 onMounted(() => {
+  touchModeSwitcherRef.value?.registerCallback((mode) => {
+    console.log("change mode to", mode == 1 ? "key" : "touch");
+  });
   console.log("simulate async get background url");
   setTimeout(() => {
     console.log("simulate background url got");
@@ -79,7 +84,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <jsv-touch-mode-switcher
+    ref="touchModeSwitcherRef"
+    :width="1280"
+    :height="720"
+  >
     <!-- <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" /> -->
     <img
       :src="backgroundImageUrl"
@@ -90,7 +99,7 @@ onUnmounted(() => {
       @load="_onPreloadDone"
     />
     <div class="TestKeepAliveDiv">
-      {{ "刷新:" + testKeepAliveModeText }}
+      {{ "更新页面计数:" + testKeepAliveModeText }}
     </div>
     <jsv-focus-block
       :onAction="{
@@ -104,7 +113,7 @@ onUnmounted(() => {
         <component v-if="!route.meta.keepAlive" :is="Component" />
       </router-view>
     </jsv-focus-block>
-  </div>
+  </jsv-touch-mode-switcher>
 </template>
 
 <style scoped>

package/DemoHomepage/components/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { shallowRef, computed } from "vue"
+import { shallowRef, computed, inject } from "vue";
 const props = defineProps({
   style: Object,
   itemClick: Function,
@@ -7,16 +7,17 @@ const props = defineProps({
   data: Object,
   query: Object,
   onAction: Object,
-})
+});
 
-let focused = shallowRef(false)
+let focused = shallowRef(false);
+const touchModeSwitcherRef = inject("touchModeSwitcherRef");
 
 const foucsStyle = computed(() => {
   return {
     width: props.style.width,
     height: props.style.height,
   };
-})
+});
 
 const itemStyle = computed(() => {
   return {
@@ -25,31 +26,41 @@ const itemStyle = computed(() => {
     backgroundColor: props.style.backgroundColor,
     color: props.style.color,
   };
+});
 
-})
+const modeChangeCallback = (mode) => {
+  if (mode == 2) {
+    focused.value = false;
+  } else {
+    focused.value = true;
+  }
+};
 
 const onFocus = () => {
-  focused.value = true;
+  //为了避免每个item都注册回调, 这里onFocus时注册, onBlur时注销
+  touchModeSwitcherRef.value.registerCallback(modeChangeCallback);
+  if (touchModeSwitcherRef.value.getInteractiveMode() == 1) {
+    focused.value = true;
+  }
   if (props.itemFocus) {
     props.itemFocus(props.data);
   }
-}
+};
 
 const onBlur = () => {
+  touchModeSwitcherRef.value.unregisterCallback(modeChangeCallback);
   focused.value = false;
-}
+};
 
 const onClick = () => {
-  console.log("testtest", "onclick ", props.data.name)
   if (props.itemClick) {
     props?.itemClick(props.query.id, props.data);
   }
-}
+};
 
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
-
 </script>
 
 <template>
@@ -72,4 +83,4 @@ props.onAction.register("onClick", onClick);
   text-align: center;
   font-size: 30;
 }
-</style>
+</style>

package/DemoHomepage/index.d.ts

@@ -1,5 +1,8 @@
 import App from './App.vue'
 
-export * from "./router.js"
+import { router } from "./router.js"
 
-export default App
+export default App
+export {
+  router
+}