@shijiu/jsview-vue 0.9.502 → 0.9.631

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -1,215 +1,226 @@
 <!--
- *  onKeyUp: 按键抬起回调
+ *  props:
+ *    onKeyUp: 按键抬起回调
  *           @params keyEvent
  *           @return 是否消耗 true: 已消耗，不再冒泡; false: 继续冒泡
- *  onKeyDown: 按键落下回调
+ *    onKeyDown: 按键落下回调
  *             @params keyEvent
  *             @return 是否消耗 true: 已消耗，不再冒泡; false: 继续冒泡
- *  onFocus: 获得焦点回调
- *  onBlur: 失去焦点回调
- *  onDispatchKeyDown: 分发按键落下事件回调
+ *    onFocus: 获得焦点回调
+ *    onBlur: 失去焦点回调
+ *    onDispatchKeyDown: 分发按键落下事件回调
  *                    @params keyEvent
  *                    @return 是否消耗 true: 已消耗，不再分发; false: 继续分发
- *  onDispatchKeyUp: 分发按键抬起事件回调
+ *    onDispatchKeyUp: 分发按键抬起事件回调
  *                 @params keyEvent
  *                 @return 是否消耗 true: 已消耗，不再分发; false: 继续分发
- *  name: 用于设置焦点的id
- *  namespace: 焦点id的命名空间
- *  autoFocus: 当Mount后自动获得焦点, 设置为"exact"，将把其子节点的焦点给抢过来
+ *    name: 用于设置焦点的id
+ *    namespace: 焦点id的命名空间
+ *    autoFocus: 当Mount后自动获得焦点, 设置为"exact"，将把其子节点的焦点给抢过来
+ *  methods:
+ *    findBlockByName
+        @description 寻找焦点树上的节点
+        @params {string} name 节点的id名
+ *    requestFocus
+        @description 赋予焦点
+        @params {boolean} passToChild 焦点由子往父时是否保持子的焦点
+ *    returnFocusToParent
+        @description 把焦点给自己的父节点
 -->
 
-<script>
-/* eslint-disable no-extra-boolean-cast */
-/* eslint-disable no-prototype-builtins */
-
-export default {
-  props: {
-    name: String,
-    namespace: String,
-    autoFocus: String,
-    onAction: Object,
-    onDispatchKeyUp: Function,
-    onDispatchKeyDown: Function,
-    onKeyUp: Function,
-    onKeyDown: Function,
-    onFocus: Function,
-    onBlur: Function,
-    onCustomerEvent: Function,
-  },
-
-  setup(props) {
-    // 有效性检查
-    if (props.namespace && props.name) {
-      throw new Error(
-        "JsvFocusBlock Error: Either name or namespace can be set."
-      );
-    }
-    if (props.namespace === "") {
-      throw new Error("JsvFocusBlock Error: Invalid namespace of empty value.");
-    }
-    if (props.namespace && props.namespace.indexOf(".") >= 0) {
-      throw new Error(
-        'JsvFocusBlock Error: Invalid namespace of "' +
-          props.namespace +
-          '". namespace must not contains "."'
-      );
+<script setup>
+/* eslint-disable */
+import { onMounted, onBeforeUnmount, ref, toRaw } from "vue";
+const props = defineProps({
+  name: String,
+  namespace: String,
+  autoFocus: String,
+  onAction: Object,
+  onDispatchKeyUp: Function,
+  onDispatchKeyDown: Function,
+  onKeyUp: Function,
+  onKeyDown: Function,
+  onFocus: Function,
+  onBlur: Function,
+  onCustomerEvent: Function,
+});
+if (props.namespace && props.name) {
+  throw new Error("JsvFocusBlock Error: Either name or namespace can be set.");
+}
+if (props.namespace === "") {
+  throw new Error("JsvFocusBlock Error: Invalid namespace of empty value.");
+}
+if (props.namespace && props.namespace.indexOf(".") >= 0) {
+  throw new Error(
+    'JsvFocusBlock Error: Invalid namespace of "' +
+      props.namespace +
+      '". namespace must not contains "."'
+  );
+}
+if (props.name && props.name.indexOf(".") >= 0) {
+  throw new Error(
+    'JsvFocusBlock Error: Invalid name of "' +
+      props.name +
+      '". name must not contains "."'
+  );
+}
+let actionCallback = {};
+let fDivRef = ref(null);
+
+//methods
+const getName = () => {
+  return toRaw(fDivRef.value)?.FocusNodeRef.getName();
+};
+
+const getNamespace = () => {
+  let focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
+  if (focusNode?.AsHub) {
+    // hub的getHub返回的是自己
+    focusNode = toRaw(fDivRef.value)?.FocusNodeRef.GetParentPage();
+  }
+  const namespace = focusNode.getName();
+  return namespace !== ".__AppRoot__" ? namespace : "";
+};
+
+const findBlockByName = (name) => {
+  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef.getNodeByName(name);
+  return focusNode?.jsvVueComponent;
+};
+
+const requestFocus = (passToChild) => {
+  toRaw(fDivRef.value)?.FocusNodeRef.requestFocus(passToChild);
+};
+
+const returnFocusToParent = () => {
+  toRaw(fDivRef.value)?.FocusNodeRef.ReturnFocusToParent();
+};
+
+const bubbleCustomerEvent = (ev) => {
+  toRaw(fDivRef.value)?.FocusNodeRef.bubbleCustomerEvent(ev);
+};
+
+const debugPrintFocusChain = () => {
+  toRaw(fDivRef.value)?.FocusNodeRef.printFocusNodeList();
+};
+
+const debugPrintLastFocus = () => {
+  toRaw(fDivRef.value)?.FocusNodeRef.printGlobalLastFocus();
+};
+
+const exportObject = {
+  getName,
+  getNamespace,
+  findBlockByName,
+  requestFocus,
+  returnFocusToParent,
+  bubbleCustomerEvent,
+  debugPrintFocusChain,
+  debugPrintLastFocus,
+};
+const _mountToFocusSystem = () => {
+  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
+
+  // 保存self，find用, 通过exportObject代表自己的instance
+  focusNode.jsvVueComponent = exportObject;
+
+  // 注册回调函数
+  actionCallback.onDispatchKeyDown =
+    props.onDispatchKeyDown || props.onAction?.onDispatchKeyDown;
+  if (actionCallback.onDispatchKeyDown) {
+    focusNode.setDispatchKeyDown(_onDispatchKeyDown);
+  }
+  actionCallback.onDispatchKeyUp =
+    props.onDispatchKeyUp || props.onAction?.onDispatchKeyUp;
+  if (actionCallback.onDispatchKeyUp) {
+    focusNode.setDispatchKeyUp(_onDispatchKeyUp);
+  }
+  actionCallback.onKeyDown = props.onKeyDown || props.onAction?.onKeyDown;
+  if (actionCallback.onKeyDown) {
+    focusNode.setOnKeyDown(_onKeyDown);
+  }
+  actionCallback.onKeyUp = props.onKeyUp || props.onAction?.onKeyUp;
+  if (actionCallback.onKeyUp) {
+    focusNode.setOnKeyUp(_onKeyUp);
+  }
+  actionCallback.onFocus = props.onFocus || props.onAction?.onFocus;
+  if (actionCallback.onFocus) {
+    focusNode.setOnFocus(_onFocus);
+  }
+  actionCallback.onBlur = props.onBlur || props.onAction?.onBlur;
+  if (actionCallback.onBlur) {
+    focusNode.setOnBlur(_onBlur);
+  }
+
+  actionCallback.onCustomerEvent =
+    props.onCustomerEvent || props.onAction?.onCustomerEvent;
+  if (actionCallback.onCustomerEvent) {
+    focusNode.setOnCustomerEvent(_onCustomerEvent);
+  }
+  // 建立父子关系链
+  let self = toRaw(fDivRef.value);
+  let parent = self.parentElement;
+  while (parent) {
+    if (self.FocusNodeRef.GetParentPage()) {
+      break;
     }
-    if (props.name && props.name.indexOf(".") >= 0) {
-      throw new Error(
-        'JsvFocusBlock Error: Invalid name of "' +
-          props.name +
-          '". name must not contains "."'
-      );
+
+    if (parent.tagName !== "FDIV") {
+      parent = parent.parentElement;
+      continue;
     }
 
-    return {
-      actionCallback: {},
-    };
-  },
-  mounted() {
-    this.$_mountToFocusSystem();
+    self.FocusNodeRef.setParent(parent.FocusNodeRef);
+    break;
+  }
+};
 
-    if (!!this.$props.autoFocus || this.$props.autoFocus === "") {
-      this.requestFocus(this.$props.autoFocus !== "exact");
-    }
-  },
-  beforeUnmount() {
-    const focusNode = this.$el.FocusNodeRef;
-    focusNode.onUnMount();
-    focusNode.jsvVueComponent = undefined;
-  },
-
-  methods: {
-    getName() {
-      return this.$el.FocusNodeRef.getName();
-    },
-
-    getNamespace() {
-      let focusNode = this.$el.FocusNodeRef;
-      if (focusNode?.AsHub) {
-        // hub的getHub返回的是自己
-        focusNode = this.$el.FocusNodeRef.GetParentPage();
-      }
-      const namespace = focusNode.getName();
-      return namespace !== ".__AppRoot__" ? namespace : "";
-    },
-
-    findBlockByName(name) {
-      const focusNode = this.$el.FocusNodeRef.getNodeByName(name);
-      return focusNode?.jsvVueComponent;
-    },
-
-    requestFocus(passToChild) {
-      this.$el.FocusNodeRef.requestFocus(passToChild);
-    },
-
-    bubbleCustomerEvent(ev) {
-      this.$el.FocusNodeRef.bubbleCustomerEvent(ev);
-    },
-
-    debugPrintFocusChain() {
-      this.$el.FocusNodeRef.printFocusNodeList();
-    },
-
-    debugPrintLastFocus() {
-      this.$el.FocusNodeRef.printGlobalLastFocus();
-    },
-
-    $_mountToFocusSystem() {
-      const focusNode = this.$el.FocusNodeRef;
-
-      // 保存self，find用
-      focusNode.jsvVueComponent = this;
-
-      // 注册回调函数
-      this.actionCallback.onDispatchKeyDown =
-        this.$props.onDispatchKeyDown ||
-        this.$props.onAction?.onDispatchKeyDown;
-      if (this.actionCallback.onDispatchKeyDown) {
-        focusNode.setDispatchKeyDown(this.$_onDispatchKeyDown);
-      }
-      this.actionCallback.onDispatchKeyUp =
-        this.$props.onDispatchKeyUp || this.$props.onAction?.onDispatchKeyUp;
-      if (this.actionCallback.onDispatchKeyUp) {
-        focusNode.setDispatchKeyUp(this.$_onDispatchKeyUp);
-      }
-      this.actionCallback.onKeyDown =
-        this.$props.onKeyDown || this.$props.onAction?.onKeyDown;
-      if (this.actionCallback.onKeyDown) {
-        focusNode.setOnKeyDown(this.$_onKeyDown);
-      }
-      this.actionCallback.onKeyUp =
-        this.$props.onKeyUp || this.$props.onAction?.onKeyUp;
-      if (this.actionCallback.onKeyUp) {
-        focusNode.setOnKeyUp(this.$_onKeyUp);
-      }
-      this.actionCallback.onFocus =
-        this.$props.onFocus || this.$props.onAction?.onFocus;
-      if (this.actionCallback.onFocus) {
-        focusNode.setOnFocus(this.$_onFocus);
-      }
-      this.actionCallback.onBlur =
-        this.$props.onBlur || this.$props.onAction?.onBlur;
-      if (this.actionCallback.onBlur) {
-        focusNode.setOnBlur(this.$_onBlur);
-      }
-
-      this.actionCallback.onCustomerEvent =
-        this.$props.onCustomerEvent || this.$props.onAction?.onCustomerEvent;
-      if (this.actionCallback.onCustomerEvent) {
-        focusNode.setOnCustomerEvent(this.$_onCustomerEvent);
-      }
-      // 建立父子关系链
-      let self = this.$el;
-      let parent = self.parentElement;
-      while (parent) {
-        if (self.FocusNodeRef.GetParentPage()) {
-          break;
-        }
-
-        if (parent.tagName !== "FDIV") {
-          parent = parent.parentElement;
-          continue;
-        }
-
-        self.FocusNodeRef.setParent(parent.FocusNodeRef);
-
-        self = parent;
-        parent = self.parentElement;
-      }
-    },
-
-    $_onDispatchKeyDown(ev) {
-      ev.ownerNode = this;
-      return this.actionCallback?.onDispatchKeyDown(ev) || false;
-    },
-    $_onDispatchKeyUp(ev) {
-      ev.ownerNode = this;
-      return this.actionCallback?.onDispatchKeyUp(ev) || false;
-    },
-    $_onKeyDown(ev) {
-      ev.ownerNode = this;
-      return this.actionCallback?.onKeyDown(ev) || false;
-    },
-    $_onKeyUp(ev) {
-      ev.ownerNode = this;
-      return this.actionCallback?.onKeyUp(ev) || false;
-    },
-    $_onFocus() {
-      this.actionCallback?.onFocus(this) || false;
-    },
-    $_onBlur() {
-      this.actionCallback?.onBlur(this) || false;
-    },
-    $_onCustomerEvent(ev) {
-      return this.actionCallback?.onCustomerEvent(ev) || false;
-    },
-  },
+const _onDispatchKeyDown = (ev) => {
+  ev.ownerNode = exportObject;
+  return actionCallback?.onDispatchKeyDown(ev) || false;
+};
+const _onDispatchKeyUp = (ev) => {
+  ev.ownerNode = exportObject;
+  return actionCallback?.onDispatchKeyUp(ev) || false;
+};
+const _onKeyDown = (ev) => {
+  ev.ownerNode = exportObject;
+  return actionCallback?.onKeyDown(ev) || false;
+};
+const _onKeyUp = (ev) => {
+  ev.ownerNode = exportObject;
+  return actionCallback?.onKeyUp(ev) || false;
 };
+const _onFocus = () => {
+  actionCallback?.onFocus(exportObject);
+};
+const _onBlur = () => {
+  actionCallback?.onBlur(exportObject);
+};
+const _onCustomerEvent = (ev) => {
+  return actionCallback?.onCustomerEvent(ev) || false;
+};
+
+onMounted(() => {
+  _mountToFocusSystem();
+
+  if (!!props.autoFocus || props.autoFocus === "") {
+    requestFocus(props.autoFocus !== "exact");
+  }
+});
+
+onBeforeUnmount(() => {
+  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
+  focusNode?.onUnMount();
+  if (focusNode?.jsvVueComponent) {
+    focusNode.jsvVueComponent = undefined;
+  }
+});
+
+defineExpose(exportObject);
 </script>
 
 <template>
-  <fdiv :fname="$props.name" :new-namespace="$props.namespace">
+  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace">
     <slot></slot>
   </fdiv>
 </template>

package/utils/JsViewEngineWidget/JsvFocusManager.js

@@ -1,30 +1,41 @@
 /* eslint-disable no-prototype-builtins */
 
-import JsvFocusBlock from './JsvFocusBlock.vue'
+import JsvFocusBlock from "./JsvFocusBlock.vue";
+import { inject } from "vue";
+
+const ROOT_HUB_PROVIDE_NAME = "__jsvFocusRootHub__";
+
+const useFocusHub = () => {
+  return inject(ROOT_HUB_PROVIDE_NAME);
+};
 
 export class JsvFocusManager {
-  constructor() {
-  }
+  constructor() {}
 
   install(app, ...options) {
-    if(typeof options[0] !== 'string') {
-      throw new Error("JsvFocusManager Error: 2nd argument is required. Such as: app.use(FocusManager, '#app')")
+    console.log("JsvFocusManager install");
+    if (typeof options[0] !== "string") {
+      throw new Error(
+        "JsvFocusManager Error: 2nd argument is required. Such as: app.use(FocusManager, '#app')"
+      );
     }
 
     // hook掉app原有的mount函数
-    const doAppMount = this.$_hookMount(app, options[0])
-    app.mount = doAppMount
+    const doAppMount = this.$_hookMount(app, options[0]);
+    app.mount = doAppMount;
 
     // 注册全局jsv-focus-block组件
-    app.component('JsvFocusBlock', JsvFocusBlock)
+    app.component("JsvFocusBlock", JsvFocusBlock);
 
     // 注册全局$jsvFocusManager变量
     app.config.globalProperties.$jsvFocusManager = this;
+
+    app.provide(ROOT_HUB_PROVIDE_NAME, this.$_topFDiv.getHub());
   }
 
   getCurrentFocusStack() {
     let focus_stack = this.$_topFDiv?.getHub()?.getCurrentFocusStack();
-    return (focus_stack ? focus_stack : []);
+    return focus_stack ? focus_stack : [];
   }
 
   // declareAlias(alias, blockName) {
@@ -68,20 +79,20 @@ export class JsvFocusManager {
   // }
 
   $_hookMount(app, rootNodeId) {
-    rootNodeId = rootNodeId.replace('#', '')
-    this.$_topFDiv = document.jsvInitFDivRoot(rootNodeId)
-    this.$_appMount = app.mount.bind(app)
+    rootNodeId = rootNodeId.replace("#", "");
+    this.$_topFDiv = document.jsvInitFDivRoot(rootNodeId);
+    this.$_appMount = app.mount.bind(app);
 
-    return this.$_doAppMount.bind(this)
+    return this.$_doAppMount.bind(this);
   }
 
   $_doAppMount(rootContainer) {
     // 调用app原有的mount函数
-    const rootComponent = this.$_appMount(rootContainer)
+    const rootComponent = this.$_appMount(rootContainer);
     // console.log('FocusManager: do mount')
 
     // 在app.mount后添加焦点控制调用
-    this.$_topFDiv.onMounted()
+    this.$_topFDiv.onMounted();
 
     return rootComponent;
   }
@@ -91,6 +102,8 @@ export class JsvFocusManager {
   $_topFDiv = undefined;
 }
 
-export function jsvCreateFocusManager() {
-  return new JsvFocusManager()
+function jsvCreateFocusManager() {
+  return new JsvFocusManager();
 }
+
+export { jsvCreateFocusManager, useFocusHub };