@shijiu/jsview-vue 0.9.766 → 0.9.804

package/dom/target_core_revision.js

@@ -3,11 +3,11 @@
  */
 
 const TargetRevision = {
-  "CoreRevision": 1021277,
-  "CoreRevisionAndBranch": "1021277",
-  "JseRevision": "1.0.830",
+  "CoreRevision": 1021336,
+  "CoreRevisionAndBranch": "1021336",
+  "JseRevision": "1.0.882",
   "JseUrl":
-    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r830.jsv.9e271859.js"
+    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r882.jsv.d4cae49e.js"
 };
 
 // 不要用export default，update-env脚本不能解析

package/package.json

@@ -7,7 +7,7 @@
     "./dom/*.js",
     "./loader/*.js"
   ],
-  "version": "0.9.766",
+  "version": "0.9.804",
   "bin": {
     "jsview-post-build": "./scripts/jsview-post-build.js",
     "jsview-post-install": "./scripts/jsview-post-install.js",

package/samples/Basic/components/anim/AnimTransition.vue

@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
           transformOrigin: state.transformOrigin,
         }"
       >
-        移动缩放旋转
+        {{"移动缩放旋转"}}
       </div>
       <div
         class="content-font"
@@ -117,7 +117,7 @@ onBeforeUnmount(() => {
           transform: state.transformTranslate,
         }"
       >
-        移动
+      {{"移动"}}
       </div>
       <div
         class="content-font"
@@ -130,7 +130,7 @@ onBeforeUnmount(() => {
           transform: state.transformScale,
         }"
       >
-        缩放
+      {{"缩放"}}
       </div>
       <div
         class="content-font"
@@ -143,7 +143,7 @@ onBeforeUnmount(() => {
           transform: state.transformRotate,
         }"
       >
-        旋转
+      {{"旋转"}}
       </div>
     </div>
   </div>

package/samples/DemoHomepage/App.vue

@@ -8,16 +8,31 @@
 <script setup>
 import { shallowRef, onMounted, defineExpose } from "vue";
 import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge } from "jsview";
+import { useRouter, useRoute } from "vue-router";
 
 let backgroundImageUrl = shallowRef(null);
 
 let preloadInfo = shallowRef([]);
 
+let globalRoute = useRoute();
+let globalRouter = useRouter();
+
 let _onPreloadDone = () => {
   console.log("background load done");
   jJsvRuntimeBridge.notifyPageLoaded();
 };
 
+const onKeyDown = (ev)=>{
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (globalRoute.fullPath != "/") {
+      // 回调一级路由
+      globalRouter.go(-1);
+    }
+    return true;
+  } 
+  return false;
+}
+
 onMounted(() => {
   console.log("simulate async get background url");
   setTimeout(() => {
@@ -26,6 +41,9 @@ onMounted(() => {
       "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
     preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
   }, 0);
+
+  // window.myJsvRouter = useRouter();
+  // window.myJsvRoute = useRoute();
 });
 </script>
 
@@ -50,12 +68,18 @@ export default {
         backgroundImage: backgroundImageUrl,
       }"
     />
-    <router-view v-slot="{ Component, route }">
-          <keep-alive>
-            <component v-if="route.meta.keepAlive" :is="Component" />
-          </keep-alive>
-          <component v-if="!route.meta.keepAlive" :is="Component" />
-    </router-view>
+    <jsv-focus-block
+      :onAction="{
+        onKeyDown,
+      }"
+    >
+      <router-view v-slot="{ Component, route }">
+            <keep-alive>
+              <component v-if="route.meta.keepAlive" :is="Component" />
+            </keep-alive>
+            <component v-if="!route.meta.keepAlive" :is="Component" />
+      </router-view>
+    </jsv-focus-block>
   </div>
 </template>
 

package/samples/DemoHomepage/components/TabFrame.vue

@@ -39,6 +39,13 @@ export default {
         focusable: true,
         id: 1,
       },
+      {
+        width: 200,
+        height: 50,
+        name: "FocusBlock",
+        focusable: true,
+        id: 2,
+      },
     ];
     const direction = VERTICAL;
     return {

package/samples/DemoHomepage/router.js

@@ -1,7 +1,7 @@
 import { createRouter } from "vue-router";
 import { createJsvHashHistory } from "jsview";
-
-const routeList = [
+import { metroWidgetRouteList } from "../MetroWidgetDemos"
+let routeList = [
   // 功能实例
   {
     name: "Home",
@@ -162,32 +162,35 @@ const routeList = [
     path: "/feature/ImpactStop",
     component: () => import("jsview/samples/ImpactStop/App"),
   },
-
-  // MetroWidget示例
-  {
-    name: "简单示例",
-    path: "/metroWidget/Simple",
-    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App"),
-  },
   {
-    name: "嵌套示例",
-    path: "/metroWidget/Advanced",
-    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App"),
+    name: "轮播",
+    path: "/feature/JsvSwiper",
+    component: () => import("jsview/samples/Swiper/App"),
   },
+
+  // Focus示例
   {
-    name: "性能测试",
-    path: "/metroWidget/PerformanceTest",
+    name: "渐进式焦点处理",
+    path: "/focusBlock/ProgressiveFocusControl",
     component: () =>
-      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App"),
+      import("jsview/samples/FocusBlockDemos/ProgressiveFocusControl/App"),
   },
   {
-    name: "乒乓模式",
-    path: "/metroWidget/PingPong",
+    name: "autoFocus对话框",
+    path: "/focusBlock/AutoFocusDialog",
     component: () =>
-      import("jsview/samples/MetroWidgetDemos/PingPong/App"),
+      import("jsview/samples/FocusBlockDemos/AutoFocus/App"),
   },
+  {
+    name:"红包雨",
+    path:"/feature/GiftRain",
+    component:()=>import("jsview/samples/GiftRain/App"),
+  }
 ];
 
+//添加MetroWidget demo
+routeList = routeList.concat(metroWidgetRouteList);
+
 const router = createRouter({
   // 浏览器调试和盒子上都可以使用类WebHashHistory的createJsvHashHistory(推荐)
   // 或 createMemoryHistory;

package/samples/DemoHomepage/views/Homepage.vue

@@ -10,6 +10,7 @@ const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 const featureData = [];
 const metroWidgetData = [];
+const focusBlockData = [];
 for (let item of routeList) {
   let obj = {
     name: item.name,
@@ -24,9 +25,12 @@ for (let item of routeList) {
   } else if (item.path.indexOf("metroWidget") >= 0) {
     obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
     metroWidgetData.push(obj);
+  } else if (item.path.indexOf("focusBlock") >= 0) {
+    obj.backgroundColor = colorTemplete[focusBlockData.length % 4];
+    focusBlockData.push(obj);
   }
 }
-const dataList = [featureData, metroWidgetData];
+const dataList = [featureData, metroWidgetData, focusBlockData];
 
 let showExitDialog = shallowRef(false);
 let contentData = shallowRef(dataList[0]);

package/samples/FilterDemo/VideoLayer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { JsvVideo } from "jsview";
+import  JsvPlayer  from "jsview/utils/JsViewPlugin/JsvPlayer";
 
 const props = defineProps({
   top: {
@@ -47,7 +47,7 @@ const video_url =
       animation: 'opacityVideoDemo_CompositeOpacity 3s infinite',
     }"
   >
-    <jsv-video
+    <JsvPlayer
       :src="video_url"
       autoplay="autoplay"
       loop="loop"

package/samples/FocusBlockDemos/AutoFocus/App.vue

@@ -0,0 +1,56 @@
+<!--
+ * 【界面概述】
+ * JsvFocusBlock的autoFocus效果展示
+ * 主要用于Dialog弹出的场景，当Dialog内部的JsvFocusBlock设置autoFocus后，
+ * Dialog只要展示就会抢走焦点,同时，此样例也展示了，当Dialog退出后，只要App讲焦点
+ * 还给Dialog弹出前的焦点分支的根部，按照渐进式焦点处理写法，各级的onFocus触发后
+ * 后会再次将焦点传递给目标的子节点
+ *
+-->
+
+<template>
+    <plane-block :style="{left: 50, top: 50}"/>
+    <dialog-block v-if="showDialog"/>
+</template>
+  
+
+<script setup>
+import { shallowRef, watch, onMounted, onUnmounted } from "vue"
+import { useFocusHub, jJsvRuntimeBridge } from "jsview"
+import PlaneBlock from "./PlaneBlock.vue"
+import DialogBlock from "./DialogBlock.vue"
+import { CreateDialogControl, ReleaseDialogControl } from "./DialogContorls.js"
+import FocusNames from "./FocusNamesDefine.js"
+
+// 获取 FocusHub 操作句柄
+let focusHub = useFocusHub();
+
+// 创建 Dialog 控制节点，并讲showDialog这个reactive变量和控制节点关联上
+let showDialog = shallowRef(false);
+CreateDialogControl(showDialog);
+
+watch(showDialog, ()=>{
+    if (showDialog.value == false) {
+        // Dialog消失后，将焦点设置给主区域，而主区域具体的focus对象则
+        // 按照渐进式焦点写法，触发了MainPlane的onFocus后，自动在一点点讲焦点给回原本的焦点子节点
+        focusHub.setFocus(FocusNames.MainPlane);
+    }
+})
+
+onUnmounted(()=>{
+    // 退出时释放control全局引用
+    ReleaseDialogControl();
+})
+
+onMounted(()=>{
+  // 启动后先让主区域获得焦点
+  focusHub.setFocus(FocusNames.MainPlane);
+
+  // 通知小程序之家关闭启动图
+  jJsvRuntimeBridge.notifyPageLoaded();
+})
+
+</script>
+
+<style scoped>
+</style>

package/samples/FocusBlockDemos/AutoFocus/BaseBlock.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { shallowRef } from "vue";
+import { DefaultKeyCodeMap } from "jsview"
+import { ShowDialog } from "./DialogContorls.js"
+
+const props = defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default: {},
+  },
+  onLeftRight: Function,
+});
+
+const hasFocused = shallowRef(false);
+
+const onFocusFunc = () => {
+  console.log(`子节点 ${props.name} 获得焦点`);
+  hasFocused.value = true;
+};
+
+const onBlurFunc = () => {
+  console.log(`子节点 ${props.name} 失去焦点`);
+  hasFocused.value = false;
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`子节点 ${props.name} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`子节点 ${props.name} 收到回流按键 code=${ev.keyCode}`);
+  
+  // 将按键转化为left/right指令
+  let keyConsumed = true;
+  switch(ev.keyCode) {
+    case DefaultKeyCodeMap.Left:
+      props.onLeftRight?.("left");
+      break;
+    case DefaultKeyCodeMap.Right:
+      props.onLeftRight?.("right");
+      break;
+    case DefaultKeyCodeMap.Ok:
+      // 启动对话框，并让对话框显示自己的模块名
+      ShowDialog(`来自 ${props.name} 的信息`);
+      break;
+    default:
+      keyConsumed = false;
+  }
+
+  if (keyConsumed) {
+    console.log(`子节点 ${props.name} 截断按键回流处理`)
+  }
+  return keyConsumed;
+}
+
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+  >
+    <div
+      :style="{
+        ...props.style,
+        width: 100,
+        height: 100,
+        fontSize: 35,
+        backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
+      }"
+    >
+      {{ props.name }}
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/FocusBlockDemos/AutoFocus/DialogBlock.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { onUnmounted } from "vue";
+import { DefaultKeyCodeMap } from "jsview"
+import { CloseDialog, GetDialogControl } from "./DialogContorls.js";
+import FocusNames from "./FocusNamesDefine.js";
+
+const dialogControlRef = GetDialogControl();
+
+// 声明按键处理函数，只处理OK键
+const onKeyDownFunc = (ev)=>{
+    console.log(`对话框收到回流按键 keyCode=${ev.keyCode}`);
+    if (ev.keyCode == DefaultKeyCodeMap.Ok) {
+        CloseDialog();
+        return true; // 阻断继续回流
+    }
+
+    return false;
+}
+
+const onFocusFunc = ()=>{
+  console.log(`对话框获得焦点`);
+}
+
+const onBlurFunc = ()=>{
+  console.log(`对话框失去焦点`);
+}
+
+onUnmounted(()=>{
+  console.log(`对话框被卸载`);
+})
+
+// 当此组件加载后，会通过autoFocus自动抢到焦点
+
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="FocusNames.Dialog"
+    autoFocus
+    :onAction="{
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+      onKeyDown: onKeyDownFunc,
+    }"
+  >
+    <div :style="{ top: 200, left: 465 }">
+      <div class="background"></div>
+      <div class="message">{{dialogControlRef.messageText}}</div>
+      <div :style="{ top: 120, left: 125 }">
+        <div class="focus"></div>
+        <div class="normal">确定</div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.focus {
+  top: -5px;
+  left: -5px;
+  width: 100px;
+  height: 50px;
+  background-color: #0000ff;
+}
+
+.normal {
+  width: 90px;
+  height: 40px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 30px;
+}
+
+.background {
+  left: 0px;
+  top: 0px;
+  width: 350px;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.message {
+  top: 20px;
+  width: 350px;
+  height: 50px;
+  color: #ffffff;
+  font-size: 40px;
+  text-align: center;
+}
+</style>

package/samples/FocusBlockDemos/AutoFocus/DialogContorls.js

@@ -0,0 +1,47 @@
+let dialogConfigRef = null;
+
+function CreateDialogControl(switcherRef) {
+    if (dialogConfigRef == null) {
+        dialogConfigRef = {
+            messageText: null,
+            switcher: switcherRef, // shallowRef对象
+        }    
+        console.log("对话框控制对象创建完毕");
+    } else {
+        console.warn("对话框控制对象已经创建过");
+    }
+
+    return dialogConfigRef;
+}
+
+function ReleaseDialogControl() {
+    dialogConfigRef = null;
+}
+
+function ShowDialog(message) {
+    if (dialogConfigRef) {
+        console.log("通过showDialog开启对话框");
+        dialogConfigRef.messageText = message;
+        dialogConfigRef.switcher.value = true;
+    }
+}
+
+function CloseDialog() {
+    if (dialogConfigRef) {
+        console.log("通过closeDialog关闭对话框");
+        dialogConfigRef.messageText = null;
+        dialogConfigRef.switcher.value = false;
+    }
+}
+
+function GetDialogControl() {
+    return dialogConfigRef;
+}
+
+export {
+    CreateDialogControl,
+    ReleaseDialogControl,
+    ShowDialog,
+    CloseDialog,
+    GetDialogControl
+}

package/samples/FocusBlockDemos/AutoFocus/FocusNamesDefine.js

@@ -0,0 +1,9 @@
+const FocusNames = {
+    MainPlane: "MainPlane",
+    Dialog: "Dialog",
+    BoxX: "方格X",
+    BoxY: "方格Y",
+    BoxZ: "方格Z",
+}
+
+export default FocusNames;

package/samples/FocusBlockDemos/AutoFocus/PlaneBlock.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { useFocusHub } from "jsview"
+import FocusNames from "./FocusNamesDefine";
+import BaseBlock from "./BaseBlock.vue";
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.BoxX, FocusNames.BoxY, FocusNames.BoxZ];
+let lastIndex = 0;
+let planeName = FocusNames.MainPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 渐进式焦点设置方式，让子焦点获焦
+  focusHub.setFocus(ChildBlockNames[lastIndex]);
+};
+
+const onBlurFunc = () => {
+  console.log(`父节点 ${planeName} 失去焦点`);
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到回流按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const leftRightFunc = (action)=>{
+  if (action == "left") {
+    if (lastIndex > 0) {
+      lastIndex--;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到"${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到"${ChildBlockNames[lastIndex]}"`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="planeName"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+    :style="props.style"
+  >
+    <base-block :name="ChildBlockNames[0]" :style="{left:150 * 1}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[1]" :style="{left:150 * 2}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[2]" :style="{left:150 * 3}" :onLeftRight="leftRightFunc" />
+  </jsv-focus-block>
+</template>

package/samples/FocusBlockDemos/ProgressiveFocusControl/App.vue

@@ -0,0 +1,84 @@
+<!--
+ * 【界面概述】
+ * 渐进式焦点展示，整个界面分为上下两个部分，每个部分有3个方格，当方格获焦的时候会变更颜色。
+ * 所展示的效果是，上下两个部分只了解到兄弟节点focusBlock的名字，而并不知道其子节点的名字。
+ * 当从上部分的子焦点切换到下部分的子焦点过程，是首先指定父节点来进行setFocus，
+ * 然后通过onFocus事件处理再进一步setFocus到子焦点上
+ *
+ *
+ * 【技巧说明】
+ * Q: 如何进行按键响应？
+ * A: 重载函数onKeyDown/onKeyUp/onDispatchKeyDown/onDispatchKeyUp中任何一个关心
+ *    的按键事件响应函数，处理ev.keyCode判断按键值，通过返回值控制消息传递链是否中止
+ *
+ * Q: 如何进行焦点切换？
+ * A: 首先为子焦点设置name属性，当需要进行焦点切换的时候，通过 useFocusHub() 提供的hub
+ *    的 setFocus 函数处理
+ *
+ * Q: setFocus的第二个参数keepChildFocus的作用是什么？
+ * A: 使用场景举例：
+ *    针对有子节点的FocusBlock，当子节点已经获焦后，通过对自身进行setFocus并且设置
+ *    keepChildFocus=false，可让自己的子焦点失焦
+ *
+-->
+
+<script setup>
+import { onMounted, shallowRef, provide } from "vue"
+import { useFocusHub } from "jsview"
+import UpPlaneBlock from "./UpPlaneBlock.vue";
+import DownPlaneBlock from "./DownPlaneBlock.vue";
+import { DefaultKeyCodeMap } from "jsview"
+
+let focusHub = useFocusHub();
+
+let columnIndexData = {
+  index: 0
+}; // Plane切换时的共享column数据
+
+provide("globalColumn", columnIndexData);
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`App 根节点 收到回流按键 code=${ev.keyCode}`);
+
+  // 将按键转化为left/right指令
+  let keyConsumed = true;
+  switch(ev.keyCode) {
+    case DefaultKeyCodeMap.Up:
+      // 通过第二个参数 焦点pass to child,回避掉对焦点链上父节点设置focus会使使其子焦点失焦的问题
+      // pass to child功能:
+      // 1. 当子焦点在焦点链上时,对父节点进行setFocus操作,不会让子焦点失焦(不会抢子节点的焦点状态)
+      // 2. 当父节点从失焦状态，通过setFocus获焦时，若此父节点上一次失焦时，其子节点有焦点状态，
+      //    则此次父节点获焦也会让这个子焦点获焦
+      focusHub.setFocus("UpPlane", true);
+      break;
+    case DefaultKeyCodeMap.Down:
+      // 同UpPlane, 设置第二个参数 焦点pass to child, 回避掉对焦点链上父节点设置focus会使使其子焦点失焦的问题
+      focusHub.setFocus("DownPlane", true);
+      break;
+    default:
+      keyConsumed = false;
+  }
+
+  return keyConsumed; // 若为true则会阻止按键下发到子节点
+}
+
+onMounted(()=>{
+  // 启动后先让上半区域获得焦点
+  focusHub.setFocus("UpPlane");
+})
+
+</script>
+
+<template>
+  <jsv-focus-block
+    :onAction = "{
+      onKeyDown: onKeyDownFunc
+    }"
+  >
+    <up-plane-block :style="{top:100}" />
+    <down-plane-block :style="{top:220}"/>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+</style>