@shijiu/jsview-vue 0.9.684 → 0.9.783

package/samples/DemoHomepage/views/Homepage.vue

@@ -1,5 +1,6 @@
-<script>
-import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
+<script setup>
+import { computed, shallowRef, onActivated } from "vue";
+import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
@@ -9,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,
@@ -23,104 +25,95 @@ 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];
-
-export default {
-  components: {
-    TabFrame,
-    Dialog,
-    BodyFrame,
-  },
-  data() {
-    return {
-      showExitDialog: false,
-      contentData: dataList[0],
-      tabId: 0,
-      preFocusName: "",
-      curFocusName: "",
-    };
-  },
-  setup() {
-    return {
-      name: "/home",
-    };
-  },
-  computed: {
-    address() {
-      return window.localStorage.href;
-    },
-  },
-  methods: {
-    onFocus() {
-      this.changeFocus(this.name + "/bodyFrame");
-    },
-    onKeyDown(ev) {
-      // 处理返回键
-      if (
-        ev.keyCode == 8 || // Backspace
-        ev.keyCode == 27 || // Escape
-        ev.keyCode == 10000 // 盒子返回键
-      ) {
-        this.showExitDialog = !this.showExitDialog;
-        if (!this.showExitDialog) {
-          this.changeFocus(this.preFocusName);
-        } else {
-          this.preFocusName = this.curFocusName;
-          this.curFocusName = this.name + "/exitDialog";
-        }
-      }
-      return true;
-    },
-    changeFocus(name) {
-      this.preFocusName = this.curFocusName;
-      this.curFocusName = name;
-      this.$refs.rootNode.findBlockByName(name).requestFocus();
-    },
-    onTabEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.changeFocus(this.name + "/bodyFrame");
-      }
-    },
-    onContentEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.top) {
-        this.changeFocus(this.name + "/tabFrame");
-      }
-    },
-    tabItemFocus(data) {
-      if (data.id != this.tabId) {
-        this.tabId = data.id;
-        this.contentData = dataList[this.tabId];
-      }
-    },
-    onDialogAction(msg) {
-      this.showExitDialog = false;
-      this.changeFocus(this.preFocusName);
-      switch (msg) {
-        case "ok":
-          jJsvRuntimeBridge.closePage();
-          // if (!window.JsView) {
-          //   // 浏览器调试
-          //   window.location.href = "about:blank";
-          // }
-          break;
-        case "back":
-        case "cancel":
-          break;
-      }
-    },
-  },
-  created() {
-    if (typeof localStorage.curTab !== "undefined") {
-      this.tabId = parseInt(localStorage.curTab);
+const dataList = [featureData, metroWidgetData, focusBlockData];
+
+let showExitDialog = shallowRef(false);
+let contentData = shallowRef(dataList[0]);
+let tabId = shallowRef(0);
+
+let preFocusName = "";
+let curFocusName = "";
+let name = "/home";
+
+let focusHub = useFocusHub();
+
+let address = computed(() => {
+  return window.localStorage.href;
+});
+
+let onFocus = () => {
+  changeFocus(name + "/bodyFrame");
+};
+
+let onKeyDown = (ev) => {
+  // 处理返回键
+  if (
+    ev.keyCode == 8 || // Backspace
+    ev.keyCode == 27 || // Escape
+    ev.keyCode == 10000 // 盒子返回键
+  ) {
+    showExitDialog.value = !showExitDialog.value;
+    if (!showExitDialog.value) {
+      changeFocus(preFocusName);
+    } else {
+      preFocusName = curFocusName;
+      curFocusName = name + "/exitDialog";
     }
-    localStorage.curTab = 0;
-    this.contentData = dataList[this.tabId];
-  },
-  mounted() {},
-  beforeUnmount() {},
+  }
+  return true;
+};
+
+let changeFocus = (name) => {
+  preFocusName = curFocusName;
+  curFocusName = name;
+  focusHub.setFocus(name);
 };
+
+let onTabEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.bottom) {
+    changeFocus(name + "/bodyFrame");
+  }
+};
+
+let onContentEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.top) {
+    changeFocus(name + "/tabFrame");
+  }
+};
+
+let tabItemFocus = (data) => {
+  if (data.id != tabId.value) {
+    tabId.value = data.id;
+    contentData.value = dataList[data.id];
+  }
+};
+
+let onDialogAction = (msg) => {
+  showExitDialog.value = false;
+  changeFocus(preFocusName);
+  switch (msg) {
+    case "ok":
+      jJsvRuntimeBridge.closePage();
+      // if (!window.JsView) {
+      //   // 浏览器调试
+      //   window.location.href = "about:blank";
+      // }
+      break;
+    case "back":
+    case "cancel":
+      break;
+  }
+};
+
+// keep-alive后 router 返回本页面时要激活一下focus
+onActivated(() => {
+  onFocus();
+});
 </script>
 
 <template>
@@ -132,7 +125,6 @@ export default {
 
     <jsv-focus-block
       autoFocus
-      ref="rootNode"
       :onAction="{
         onKeyDown: onKeyDown,
         onFocus: onFocus,
@@ -174,7 +166,6 @@ export default {
 .rootSize {
   width: 1920;
   height: 1080;
-  background-color: #334c4c;
 }
 
 .address {

package/samples/FilterDemo/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, shallowRef, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
 import sample from "../assets/jpegDemo.jpeg";

package/samples/FlipCard/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget } from "jsview";
 import FlipCard from "./FlipCard.vue";
 import { data } from "./data.js";
@@ -8,7 +8,7 @@ import redEgg from "./assets/red_egg.png";
 import blueEgg from "./assets/blue_egg.png";
 
 const name = "/flipCard";
-const focusNode = ref(null);
+const focusNode = shallowRef(null);
 const router = useRouter();
 
 const onKeyDown = (ev) => {

package/samples/FlipCard/FlipCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   initFlipped: Boolean,
   width: Number,
@@ -18,7 +18,7 @@ let flipAnim = ref("");
 let flipped = ref(props.initFlipped);
 let focused = ref(false);
 let keyLocked = false;
-let focusNode = ref(null);
+let focusNode = shallowRef(null);
 
 const onFocus = () => {
   focused.value = true;
@@ -65,7 +65,7 @@ props.onAction.register("onClick", onClick);
           transformStyle: 'preserve-3d',
           backgroundColor: '#FFFF00',
         }"
-        :onAnimationEnd="onFlipped"
+        @animationend="onFlipped"
       >
         <div
           :style="{

package/samples/FocusBlockDemos/AutoFocus/App.vue

@@ -0,0 +1,51 @@
+<!--
+ * 【界面概述】
+ * 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 } from "vue"
+import { useFocusHub, jJsvRuntimeBridge } from "jsview"
+import PlaneBlock from "./PlaneBlock.vue"
+import DialogBlock from "./DialogBlock.vue"
+import { CreateDialogControl } 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);
+    }
+})
+
+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,42 @@
+let dialogConfigRef = null;
+
+function CreateDialogControl(switcherRef) {
+    if (dialogConfigRef == null) {
+        dialogConfigRef = {
+            messageText: null,
+            switcher: switcherRef, // shallowRef对象
+        }    
+        console.log("对话框控制对象创建完毕");
+    } else {
+        console.warn("对话框控制对象已经创建过");
+    }
+
+    return dialogConfigRef;
+}
+
+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,
+    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,78 @@
+<!--
+ * 【界面概述】
+ * 渐进式焦点展示，整个界面分为上下两个部分，每个部分有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:
+      focusHub.setFocus("UpPlane");
+      break;
+    case DefaultKeyCodeMap.Down:
+      focusHub.setFocus("DownPlane");
+      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>