@shijiu/jsview-vue-samples 2.2.35 → 2.2.201

package/CustomShader/pageFlip.glsl

@@ -0,0 +1,40 @@
+#define pi 3.14159265359
+#define radius .1
+
+float fastAsin(float x) {
+  float x2 = x * x;
+  float x3 = x2 * x;
+  float x5 = x3 * x2;
+  float x7 = x5 * x2;
+  return x + (1.0 / 6.0) * x3 + (3.0 / 40.0) * x5 + (5.0 / 112.0) * x7;
+}
+
+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 mouseDir = normalize(anchor - mouse);
+  vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
+  float mouseDist = length(mouse - origin);
+
+  float proj = dot(uv - origin, mouseDir);
+  float dist = proj - mouseDist;
+  vec2 linePoint = uv - dist * mouseDir;
+  if(dist > radius) {
+    fragColor = vec4(0.0, 0.5, 0.6, 1.0);
+    fragColor.rgb *= pow(clamp(dist - radius, 0., 1.) * 1.5, .2);
+  } else if(dist >= 0.) {
+    // map to cylinder point
+    float theta = fastAsin(dist / radius);
+    vec2 p2 = linePoint + mouseDir * (pi - theta) * radius;
+    vec2 p1 = linePoint + mouseDir * theta * radius;
+    uv = (p2.x <= aspect.x && p2.y <= aspect.y && p2.x > 0. && p2.y > 0.) ? p2 : p1;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+    fragColor.rgb *= pow(clamp((radius - dist) / radius, 0., 1.), .2);
+  } else {
+    vec2 p = linePoint + mouseDir * (abs(dist) + pi * radius);
+    uv = (p.x <= aspect.x && p.y <= aspect.y && p.x > 0. && p.y > 0.) ? p : uv;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+  }
+}

package/CustomShader/sdf.glsl

@@ -0,0 +1,22 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    // Normalized pixel coordinates (from 0 to 1)
+  vec2 aspect = iResolution.xy / iResolution.y;
+  vec2 originUv = fragCoord / iResolution.xy;
+  vec2 uv = 2. * (originUv - 0.5) * aspect;
+
+  vec2 sum = vec2(0., 0.); // r, g
+
+  float modTime = iTime - (60. * floor(iTime / 60.));
+  float time = 50. * abs(fract(modTime / 30.) - .5);
+
+  for(int i = 10; i < 13; i++) {
+    vec2 pos = uv * 40. + vec2(sin(time / 3. * float(i) / 2.), cos(time / 3. * float(i) / 3.)) * 10. * (1.0 + float(i) / 10.);
+    float dist = 1. / length(pos) * 6.;
+    sum += dist;
+  }
+  sum *= 0.5;
+  // sum.x = clamp(sum.x, 0., 1.);
+  // sum.x = step(.5, sum.x);
+  // fragColor = vec4(.1, sum.x, sum.x, sum.x);
+  fragColor = sum.x > 0.5 ? jsvTexture2D(iChannel0, originUv) : vec4(0.);
+}

package/CustomShader/test.glsl

@@ -0,0 +1,8 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  if (uv.x < .1 && uv.y < .1) {
+    fragColor = vec4(1.);
+  } else {
+    fragColor = vec4(0.);
+  }
+}

package/CustomShader/vortex.glsl

@@ -0,0 +1,38 @@
+#define RANGE 6.
+#define SPEED .5
+#define STRENGTH 6.
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = 0.5 * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = sin(iTime * SPEED);
+
+    //vortex
+  float cTime = STRENGTH * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    //shrink
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0, 0.5, 0.6, 1.);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}

package/DemoHomepage/App.vue

@@ -7,15 +7,21 @@
 -->
 <script setup>
 import { shallowRef, onMounted, onUnmounted } from "vue";
-import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge, JsvFocusBlock, useFocusHub } from "jsview";
+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"
+import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
+import { getSearchQuery } from "../CommonUtils/getSearchQuery.js";
 
-let DemoResourceBase=shallowRef("")
+let DemoResourceBase = shallowRef("");
 let backgroundImageUrl = shallowRef(null);
 
-let preloadInfo = shallowRef([]);
+// let preloadInfo = shallowRef([]);
 
 window.DebugFocusHub = useFocusHub();
 
@@ -41,52 +47,56 @@ let testKeepAliveModeText = shallowRef(1);
 let testKeepAliveTimer = -1;
 
 //解析url
-let query = getSearchQuery(window.location.href, undefined, 0)
+let query = getSearchQuery(window.location.href, undefined, 0);
 if (query.DemoResourceBase) {
-  setDataUrl(query.DemoResourceBase)
+  setDataUrl(query.DemoResourceBase);
   //无网络环境下使用
-  DemoResourceBase.value = getDataUrl()
+  DemoResourceBase.value = getDataUrl();
 }
 onMounted(() => {
   console.log("simulate async get background url");
   setTimeout(() => {
     console.log("simulate background url got");
-    backgroundImageUrl.value = DemoResourceBase.value ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
-      :
-      "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
-    preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
+    backgroundImageUrl.value = DemoResourceBase.value
+      ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
+      : "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(()=>{
+  testKeepAliveTimer = setInterval(() => {
     testKeepAliveModeText.value++;
-  }, 1000)
+  }, 1000);
 });
 
-onUnmounted(()=>{
+onUnmounted(() => {
   if (testKeepAliveTimer > 0) {
     console.log("remove homepage interval");
     clearInterval(testKeepAliveTimer);
     testKeepAliveTimer = -1;
   }
-})
-
+});
 </script>
 
 <template>
   <div>
-    <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" />
-    <div :style="{
-      width: 1280,
-      height: 720,
-      backgroundImage: backgroundImageUrl,
-    }" />
+    <!-- <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" /> -->
+    <img
+      :src="backgroundImageUrl"
+      :style="{
+        width: 1280,
+        height: 720,
+      }"
+      @load="_onPreloadDone"
+    />
     <div class="TestKeepAliveDiv">
       {{ "刷新:" + testKeepAliveModeText }}
     </div>
-    <jsv-focus-block :onAction="{
-      onKeyDown: _OnKeyDown
-    }">
+    <jsv-focus-block
+      :onAction="{
+        onKeyDown: _OnKeyDown,
+      }"
+    >
       <router-view v-slot="{ Component, route }">
         <keep-alive>
           <component v-if="route.meta.keepAlive" :is="Component" />
@@ -107,5 +117,4 @@ onUnmounted(()=>{
   line-height: 30;
   color: #eb20c6;
 }
-
 </style>

package/DemoHomepage/components/Dialog.vue

@@ -1,11 +1,20 @@
 <script setup>
-import { shallowRef } from "vue"
+import { shallowRef, watchEffect } from "vue";
+import { useFocusHub } from "jsview";
 const props = defineProps({
   name: String,
   onAction: Function,
-})
+  focused: Boolean,
+});
 
-let focusId = shallowRef(0)
+let focusId = shallowRef(0);
+
+const focusHub = useFocusHub();
+watchEffect(() => {
+  if (props.focused) {
+    focusHub.setFocus(props.name);
+  }
+});
 
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
@@ -29,25 +38,42 @@ const onKeyDown = (ev) => {
     default:
   }
   return true;
-}
+};
 const actionDefines = {
-  onKeyDown
-}
+  onKeyDown,
+};
+
+const funcDialogOuterClick = () => {
+  console.log("Clicked on dialog outer");
+  props.onAction("back");
+};
+
+const funcDialogBackClick = () => {
+  console.log("Clicked on dialog back");
+};
+
+const funcDialogOKClick = () => {
+  props.onAction("ok");
+};
 
+const funcDialogNGClick = () => {
+  props.onAction("cancel");
+};
 </script>
 
 <template>
-  <jsv-focus-block autoFocus :name="props.name" :onAction="actionDefines">
+  <jsv-focus-block :name="props.name" :onAction="actionDefines">
+    <div :style="{ width: 1280, height: 720 }" @click="funcDialogOuterClick" />
     <div :style="{ top: 200, left: 465 }">
-      <div class="background"></div>
+      <div class="background" @click="funcDialogBackClick"></div>
       <div class="message">是否退出</div>
       <div :style="{ top: 120, left: 30 }">
         <div v-if="focusId == 0" class="focus"></div>
-        <div class="normal">确定</div>
+        <div class="normal" @click="funcDialogOKClick">确定</div>
       </div>
       <div :style="{ top: 120, left: 220 }">
         <div v-if="focusId == 1" class="focus"></div>
-        <div class="normal">取消</div>
+        <div class="normal" @click="funcDialogNGClick">取消</div>
       </div>
     </div>
   </jsv-focus-block>
@@ -86,4 +112,4 @@ const actionDefines = {
   font-size: 40;
   text-align: center;
 }
-</style>
+</style>

package/DemoHomepage/components/TabFrame.vue

@@ -46,10 +46,17 @@ const data = [
   {
     width: 200,
     height: 50,
-    name: "游戏实例",
+    name: "触控",
     focusable: true,
     id: 3,
   },
+  {
+    width: 200,
+    height: 50,
+    name: "游戏实例",
+    focusable: true,
+    id: 4,
+  },
 ];
 const direction = VERTICAL;
 </script>

package/DemoHomepage/router.js

@@ -16,10 +16,15 @@ let routeList = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  // {
+  //   name: 'FreeMoveResize',
+  //   path: '/feature/FreeMoveResize',
+  //   component: () => import('jsview-vue-samples/FreeMoveResize/App.vue'),
+  // },
   {
-    name: '清明节组件效果测试',
-    path: '/Operations/TombSweepingDayTest',
-    component: () => import('jsview-vue-samples/TombSweepingDayTest/App.vue'),
+    name: 'div快照功能',
+    path: '/feature/BakeViewDemo',
+    component: () => import('jsview-vue-samples/BakeViewDemo/App.vue'),
   },
   {
     name: 'FlexDemo',
@@ -73,11 +78,6 @@ let routeList = [
     path: '/feature/GridDemo',
     component: () => import('jsview-vue-samples/GridDemo/App.vue'),
   },
-  {
-    name: '.9图焦点框漂移',
-    path: '/Operations/NinePatchDemo',
-    component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
-  },
   {
     name: '有命名空间的焦点切换',
     path: '/feature/BasicFocusControl',
@@ -104,25 +104,15 @@ let routeList = [
     path: '/feature/TextureSize',
     component: () => import('jsview-vue-samples/TextureSize/App.vue'),
   },
-  {
-    name: '动图',
-    path: '/Operations/AnimPicture',
-    component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
-  },
-  {
-    name: '粒子效果',
-    path: '/Operations/SprayView',
-    component: () => import('jsview-vue-samples/SprayView/App.vue'),
-  },
   {
     name: '长文字',
     path: '/feature/LongText',
     component: () => import('jsview-vue-samples/LongText/App.vue'),
   },
   {
-    name: '长图片',
-    path: '/Operations/LongImage',
-    component: () => import('jsview-vue-samples/LongImage/App.vue'),
+    name: '长文字Latex',
+    path: '/feature/LongTextLatex',
+    component: () => import('jsview-vue-samples/LongTextLatex/App.vue'),
   },
   {
     name: '二维码',
@@ -160,6 +150,31 @@ let routeList = [
     path: '/feature/Input',
     component: () => import('jsview-vue-samples/Input/App.vue'),
   },
+  {
+    name: '情景主题效果:雨',
+    path: '/Operations/TombSweepingDayTest',
+    component: () => import('jsview-vue-samples/TombSweepingDayTest/App.vue'),
+  },
+  {
+    name: '.9图焦点框漂移',
+    path: '/Operations/NinePatchDemo',
+    component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
+  },
+  {
+    name: '动图',
+    path: '/Operations/AnimPicture',
+    component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
+  },
+  {
+    name: '粒子效果',
+    path: '/Operations/SprayView',
+    component: () => import('jsview-vue-samples/SprayView/App.vue'),
+  },
+  {
+    name: '长图片',
+    path: '/Operations/LongImage',
+    component: () => import('jsview-vue-samples/LongImage/App.vue'),
+  },
   {
     name: '拼图demo',
     path: '/Operations/MaskClip',
@@ -306,11 +321,6 @@ let routeList = [
     path: '/feature/LatexFormula',
     component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
   },
-  {
-    name: '触控示例',
-    path: '/feature/TouchWidget',
-    component: () => import('jsview-vue-samples/TouchWidget/App.vue'),
-  },
   {
     name: 'Swiper3dTest',
     path: '/Operations/Swiper3D',
@@ -331,6 +341,41 @@ let routeList = [
     path: '/Operations/SceneTransition',
     component: () => import('jsview-vue-samples/SceneTransition/App.vue'),
   },
+  {
+    name: '点击Div',
+    path: '/touch/ClickDivDemo',
+    component: () => import('jsview-vue-samples/ClickDivDemo/App.vue'),
+  },
+  {
+    name: '触控示例',
+    path: '/touch/TouchWidget',
+    component: () => import('jsview-vue-samples/TouchWidget/App.vue'),
+  },
+  // {
+  //   name: 'FreeMove触控磁吸',
+  //   path: '/touch/FreeMoveChildAttract',
+  //   component: () => import('jsview-vue-samples/FreeMoveChildAttract/App.vue'),
+  // },
+  // {
+  //   name: 'FreeMoveLink',
+  //   path: '/touch/FreeMoveLink',
+  //   component: () => import('jsview-vue-samples/FreeMoveLink/App.vue'),
+  // },
+  {
+    name: '可拖拽进度条',
+    path: '/touch/ScrollBoxTest',
+    component: () => import('jsview-vue-samples/ScrollBoxTest/App.vue'),
+  },
+  // {
+  //   name: '透视镜效果样例',
+  //   path: '/Operations/DriftScopeTest',
+  //   component: () => import('jsview-vue-samples/DriftScopeTest/App.vue'),
+  // },
+  {
+    name: '自定义shader',
+    path: '/Operations/CustomShader',
+    component: () => import('jsview-vue-samples/CustomShader/App.vue'),
+  },
 ];
 
 //添加MetroWidget demo

package/DemoHomepage/views/Homepage.vue

@@ -6,15 +6,16 @@ import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
+const isDevelopment = process.env.NODE_ENV !== "production";
 
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 //功能实例 MetroWidgetData 首页/运营 游戏实例
 const featureData = [];
 const metroWidgetData = [];
-const operationsData=[];
-const gameData=[]
+const operationsData = [];
+const gameData = [];
+const touchTestData = [];
 
 const routeList = useRouter().getRoutes();
 for (let item of routeList) {
@@ -25,23 +26,35 @@ for (let item of routeList) {
     height: 100,
     focusable: true,
   };
-  if (item.path.indexOf("feature") >= 0) {
+  if (item.path.indexOf("/feature/") >= 0) {
     obj.backgroundColor = colorTemplete[featureData.length % 4];
     featureData.push(obj);
-  } else if (item.path.indexOf("metroWidget") >= 0) {
+  } else if (item.path.indexOf("/metroWidget/") >= 0) {
     obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
     metroWidgetData.push(obj);
-  }else if (item.path.indexOf("Operations") >= 0) {
+  } else if (item.path.indexOf("/Operations/") >= 0) {
     obj.backgroundColor = colorTemplete[operationsData.length % 4];
     operationsData.push(obj);
-  }else if (item.path.indexOf("Game") >= 0) {
+  } else if (item.path.indexOf("/Game/") >= 0) {
     obj.backgroundColor = colorTemplete[gameData.length % 4];
     gameData.push(obj);
+  } else if (item.path.indexOf("/touch/") >= 0) {
+    obj.backgroundColor = colorTemplete[touchTestData.length % 4];
+    touchTestData.push(obj);
   }
 }
-const dataList = [featureData, metroWidgetData,operationsData,gameData];
-
+const dataList = [
+  featureData,
+  metroWidgetData,
+  operationsData,
+  touchTestData,
+  gameData,
+];
+
+// 控制v-show
+// 不用v-if是为了测试已存在的view从hide到show，并挡住其他view，是否touch判断层级正常
 let showExitDialog = shallowRef(false);
+
 let contentData = shallowRef(dataList[0]);
 let tabId = shallowRef(0);
 
@@ -108,7 +121,7 @@ let tabItemClick = (id, data) => {
     tabId.value = data.id;
     contentData.value = dataList[data.id];
   }
-}
+};
 
 let onDialogAction = (msg) => {
   showExitDialog.value = false;
@@ -141,7 +154,6 @@ onActivated(() => {
 onDeactivated(() => {
   focusNameOfDeactive = focusHub.getDeactivedPageFocus();
 });
-
 </script>
 
 <template>
@@ -149,7 +161,11 @@ onDeactivated(() => {
     <div class="address">
       {{ address }}
     </div>
-    <div class="logo">{{ 'JsView-Vue3 (Vite3) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
+    <div class="logo">
+      {{
+        "JsView-Vue3 (Vite3) [" + (isDevelopment ? "Debug" : "Release") + "]"
+      }}
+    </div>
 
     <jsv-focus-block
       autoFocus
@@ -183,9 +199,10 @@ onDeactivated(() => {
       </div>
 
       <Dialog
-        v-if="showExitDialog"
+        v-show="showExitDialog"
         :name="name + '/exitDialog'"
         :onAction="onDialogAction"
+        :focused="showExitDialog"
       ></Dialog>
     </jsv-focus-block>
   </div>