@shijiu/jsview-vue-samples 2.1.6-alpha.0 → 2.1.23

package/DemoHomepage/App.vue

@@ -6,8 +6,8 @@
  * @Description: file content
 -->
 <script setup>
-import { shallowRef, onMounted } from "vue";
-import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge, JsvFocusBlock } from "jsview";
+import { shallowRef, onMounted, onUnmounted } from "vue";
+import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge, JsvFocusBlock, useFocusHub } from "jsview";
 import { useRouter } from "vue-router";
 import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js"
 import { getSearchQuery } from "../CommonUtils/getSearchQuery.js"
@@ -17,6 +17,10 @@ let backgroundImageUrl = shallowRef(null);
 
 let preloadInfo = shallowRef([]);
 
+window.DebugFocusHub = useFocusHub();
+
+const router = useRouter();
+
 let _onPreloadDone = () => {
   console.log("background load done");
   jJsvRuntimeBridge.notifyPageLoaded();
@@ -25,7 +29,6 @@ let _onPreloadDone = () => {
 const _OnKeyDown = (ev) => {
   // 结果默认传下来的返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    const router = useRouter();
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
   }
@@ -33,6 +36,10 @@ const _OnKeyDown = (ev) => {
   return false;
 };
 
+// 用于测试DemoHomepage在keep-alive状态下的更新问题
+let testKeepAliveModeText = shallowRef(1);
+let testKeepAliveTimer = -1;
+
 //解析url
 let query = getSearchQuery(window.location.href, undefined, 0)
 if (query.DemoResourceBase) {
@@ -49,12 +56,21 @@ onMounted(() => {
       "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
     preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
   }, 0);
+
+  console.log("start homepage interval");
+  testKeepAliveTimer = setInterval(()=>{
+    testKeepAliveModeText.value++;
+  }, 1000)
 });
-</script>
 
-<script>
-// 从App.vue导出router，解决因为App.vue先加载导致的useRouter返回null的问题。
-export { router } from "./router.js"
+onUnmounted(()=>{
+  if (testKeepAliveTimer > 0) {
+    console.log("remove homepage interval");
+    clearInterval(testKeepAliveTimer);
+    testKeepAliveTimer = -1;
+  }
+})
+
 </script>
 
 <template>
@@ -65,6 +81,9 @@ export { router } from "./router.js"
       height: 720,
       backgroundImage: backgroundImageUrl,
     }" />
+    <div class="TestKeepAliveDiv">
+      {{ "刷新:" + testKeepAliveModeText }}
+    </div>
     <jsv-focus-block :onAction="{
       onKeyDown: _OnKeyDown
     }">
@@ -78,4 +97,15 @@ export { router } from "./router.js"
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.TestKeepAliveDiv {
+  top: 60;
+  left: 30;
+  width: 200;
+  height: 30;
+  font-size: 20;
+  line-height: 30;
+  color: #eb20c6;
+}
+
+</style>

package/DemoHomepage/index.d.ts

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

package/DemoHomepage/index.mjs

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

package/DemoHomepage/router.js

@@ -147,6 +147,11 @@ let routeList  = [
     path: '/Operations/GrayDown',
     component: () => import('jsview-vue-samples/FilterDemo/App.vue'),
   },
+  {
+    name: '水波特效',
+    path: '/Operations/Ripple',
+    component: () => import('jsview-vue-samples/Ripple/App.vue'),
+  },
   {
     name: '预加载',
     path: '/feature/Preload',

package/Ripple/App.vue

@@ -0,0 +1,182 @@
+<!--
+ * 【模块 export 内容】
+ * JsvFilterView：黑白滤镜组件
+ *      props说明:
+ *          width   {int}   宽
+ *          height  {int}   高
+ *          left    {int}   left位置
+ *          top     {int}   top位置
+ *          filterType  {String}  滤镜设置:
+ *                                null: 无滤镜
+ *                                "gray-down": 黑白滤镜(公祭日滤镜)
+-->
+<script setup>
+import { Forge, ForgeExtension } from "@shijiu/jsview/dom/jsv-forge-define";
+import { shallowRef, ref } from "vue";
+import { JsvRipple, JsvRippleShape } from "jsview";
+
+import img from "../assets/jpegDemo.jpeg";
+
+const rippleViewRef = shallowRef(null);
+
+const imgUrl =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/demo_images/colorful-blocks.jpg";
+
+const genSource = () => {
+  return [
+    Math.round(Math.random() * 800),
+    Math.round(Math.random() * 300),
+    Math.round(Math.random() * 60 + 20),
+  ];
+};
+
+const foucsIndex = ref(0);
+
+const button1 = {
+  left: 300,
+  top: 300,
+  width: 200,
+  height: 100,
+};
+const button2 = {
+  left: 600,
+  top: 300,
+  width: 200,
+  height: 100,
+};
+const clamp = (min, max, num) => Math.min(Math.max(num, min), max);
+
+let waveToken = -1;
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 13:
+      const b = foucsIndex.value == 0 ? button1 : button2;
+      rippleViewRef.value.addSource(
+        Math.round(b.left + b.width / 2), //波中心的x
+        Math.round(b.top + b.height / 2), // 波中心的y
+        40, // 波的振幅
+        {
+          type: JsvRippleShape.RECTANGLE, // 波的类型, 圆角矩形波
+          width: 200, // 矩形宽
+          height: 100, //矩形高
+          radius: 45, // 圆角半径
+        },
+        {
+          timeDecay: 10, //时间衰减因子
+          distanceDecay: 50, // 距离衰减因子
+          speed: 100, // 波速 px/s
+          frequency: 8, // 频率 次/s
+          waveNum: 2, // 波的个数
+        }
+      );
+      break;
+    case 38:
+      const p = genSource();
+      rippleViewRef.value.addSource(
+        ...p,
+        {
+          type: JsvRippleShape.CIRCLE,
+        },
+        {
+          timeDecay: 3,
+          distanceDecay: 8,
+          speed: 100,
+          frequency: 8,
+          waveNum: 2,
+        }
+      );
+      break;
+    case 37:
+      foucsIndex.value = clamp(0, 1, foucsIndex.value - 1);
+      break;
+    case 39:
+      foucsIndex.value = clamp(0, 1, foucsIndex.value + 1);
+      break;
+    default:
+      break;
+  }
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  ></jsv-focus-block>
+  <jsv-ripple ref="rippleViewRef" :width="1280" :height="720">
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundImage: `url(${imgUrl})`,
+      }"
+    ></div>
+    <div
+      :style="{
+        left: 50,
+        top: 250,
+        width: 200,
+        height: 200,
+        backgroundImage: `url(${imgUrl})`,
+        animation: 'test-anim 1s infinite',
+      }"
+    ></div>
+
+    <div
+      :style="{
+        left: 50,
+        top: 50,
+        width: 800,
+        height: 50,
+        backgroundColor: '#007788',
+        fontSize: 27,
+        lineHeight: 50,
+        color: '#FFFFFF',
+        textAlign: 'center',
+      }"
+    >
+      按上键添加随机波纹, 最多同时存在5个
+    </div>
+
+    <div
+      :style="{
+        ...button1,
+        backgroundColor: '#007788',
+        borderRadius: 45,
+        fontSize: 23,
+        lineHeight: 50,
+        textAlign: 'center',
+        color: foucsIndex == 0 ? '#FF0000' : '#FFFFFF',
+      }"
+    >
+      按键1
+    </div>
+
+    <div
+      :style="{
+        ...button2,
+        backgroundColor: '#007788',
+        borderRadius: 45,
+        fontSize: 23,
+        lineHeight: 50,
+        textAlign: 'center',
+        color: foucsIndex == 1 ? '#FF0000' : '#FFFFFF',
+      }"
+    >
+      按键2
+    </div>
+  </jsv-ripple>
+</template>
+
+<style scoped>
+@keyframes test-anim {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/Swiper/App.vue

@@ -115,6 +115,7 @@ onMounted(() => {
       :reverseSwipe="true"
       :dotSize="20"
       :disableLoopWhenFocus="true"
+      :smoothTranslate="true"
     >
       <template #itemView="{ dataIndex, focused }">
         <div

package/index.mjs

@@ -1,4 +1,4 @@
-import App, { router } from './DemoHomepage/App.vue'
+import App, { router } from './DemoHomepage'
 
 export default App
 export { router }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.6-alpha.0",
+  "version": "2.1.23",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",