@shijiu/jsview-vue 0.9.766 → 0.9.783

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>

package/samples/FocusBlockDemos/ProgressiveFocusControl/BaseBlock.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { shallowRef } from "vue";
+import { DefaultKeyCodeMap } from "jsview"
+
+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;
+    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/ProgressiveFocusControl/DownPlaneBlock.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { inject } from "vue" 
+import { useFocusHub } from "jsview"
+import BaseBlock from "./BaseBlock.vue";
+import FocusNames from "./FocusNamesDefine"
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.Box1, FocusNames.Box2, FocusNames.Box3];
+let globalColumn = inject("globalColumn"); // 从App获取的全局coloumn信息
+let lastIndex = 0;
+let planeName = FocusNames.DownPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 让子焦点获焦
+  lastIndex = globalColumn.index; // 同步全局节点信息
+  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)=>{
+  let indexChanged = false;
+
+  if (action == "left") {
+    if (lastIndex >= 0) {
+      lastIndex--;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+
+  if (indexChanged) {
+    // 回传lastIndex columen, 以方便Plane切换后保持column
+    globalColumn.index = 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/FocusNamesDefine.js

@@ -0,0 +1,12 @@
+const FocusNames = {
+    UpPlane: "UpPlane",
+    DownPlane: "DownPlane",
+    BoxA: "A",
+    BoxB: "B",
+    BoxC: "C",
+    Box1: "1",
+    Box2: "2",
+    Box3: "3",
+}
+
+export default FocusNames;

package/samples/FocusBlockDemos/ProgressiveFocusControl/UpPlaneBlock.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { inject } from "vue" 
+import { useFocusHub } from "jsview"
+import BaseBlock from "./BaseBlock.vue";
+import FocusNames from "./FocusNamesDefine"
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.BoxA, FocusNames.BoxB, FocusNames.BoxC];
+let globalColumn = inject("globalColumn"); // 从App获取的全局coloumn信息
+let lastIndex = 0;
+let planeName = FocusNames.UpPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 让子焦点获焦
+  lastIndex = globalColumn.index; // 同步全局节点信息
+  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)=>{
+  let indexChanged = false;
+
+  if (action == "left") {
+    if (lastIndex >= 0) {
+      lastIndex--;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+
+  if (indexChanged) {
+    // 回传lastIndex columen, 以方便Plane切换后保持column
+    globalColumn.index = 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/Marquee/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-18 18:24:18
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-10 15:29:12
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 13:43:43
  * @Description: file content
 -->
 <script setup>
@@ -168,7 +168,6 @@ onMounted(() => {
           lineHeight: 70,
           fontSize: 50,
           color: '#000000',
-          direction: 'rtl',
         }"
         text="انجليزي"
         :slideSpeed="slideSpeed"
@@ -243,5 +242,37 @@ onMounted(() => {
         超长rtl文字
       </div>
     </div>
+    <div
+      :style="{
+        left: 50,
+        top: 610,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee
+        :style="{
+          width,
+          height,
+          lineHeight: 70,
+          fontSize: 50,
+          color: '#000000',
+        }"
+        text="测试文字"
+        :forceSlide="true"
+        :slideSpeed="slideSpeed"
+        slideDirection="ets"
+      />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        反向滚动示例
+      </div>
+    </div>
   </jsv-focus-block>
 </template>