@shijiu/jsview-vue 0.9.287 → 0.9.295-alpha.0

package/dom/target_core_revision.js

@@ -3,10 +3,10 @@
  */
 
 const TargetRevision = {
-  "CoreRevision": 810895,
-  "JseRevision": "1.0.772",
+  "CoreRevision": 810953,
+  "JseRevision": "1.0.774",
   "JseUrl":
-	"http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r772.jsv.91a55796.js"
+	"http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r774.jsv.dfae49bd.js"
 };
 
 // 不要用export default，update-env脚本不能解析

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "0.9.287",
+  "version": "0.9.295-alpha.0",
   "bin": {
     "jsview-post-build": "./scripts/jsview-post-build.js",
     "jsview-post-install": "./scripts/jsview-post-install.js",

package/samples/Basic/App.vue

@@ -48,7 +48,7 @@
 <script>
 import { Options, Vue } from "vue-class-component";
 import TitleBar from './components/TitleBar';
-import DivGroup1 from './components/div/DivGroup1';
+import DivGroup1 from './components/div/DivGroup1.vue';
 import DivGroup2 from './components/div/DivGroup2';
 import TextGroup from './components/text/TextGroup';
 import AnimGroup from './components/anim/AnimGroup';

package/utils/JsViewEngineWidget/ForgeDefine.js

@@ -0,0 +1,7 @@
+/**
+ * Created by luocf on 2020/1/17.
+ */
+if (typeof window.Forge === "undefined") window.Forge = {};
+
+const Forge = window.Forge;
+export default Forge;

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -0,0 +1,200 @@
+<!--
+ *  onKeyUp: 按键抬起回调
+ *           @params keyEvent
+ *           @return 是否消耗 true: 已消耗，不再冒泡; false: 继续冒泡
+ *  onKeyDown: 按键落下回调
+ *             @params keyEvent
+ *             @return 是否消耗 true: 已消耗，不再冒泡; false: 继续冒泡
+ *  onFocus: 获得焦点回调
+ *  onBlur: 失去焦点回调
+ *  dispathchKeyDown: 分发按键落下事件回调
+ *                    @params keyEvent
+ *                    @return 是否消耗 true: 已消耗，不再分发; false: 继续分发
+ *  dispathcKeyUp: 分发按键抬起事件回调
+ *                 @params keyEvent
+ *                 @return 是否消耗 true: 已消耗，不再分发; false: 继续分发
+ *  fid/branchName: 用于设置焦点的id
+ *  autoFocus: 当Mount后自动获得焦点, 设置为"exact"，将把其子节点的焦点给抢过来
+ *  asHub:  true/false，设置后，此节点会创建二级hub，不同的hub之间fid可以重复(用于子场景由不同开发者开发后进行合并的场景)
+-->
+
+<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,
+  },
+
+  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 "."'
+      );
+    }
+    if (props.name && props.name.indexOf(".") >= 0) {
+      throw new Error(
+        'JsvFocusBlock Error: Invalid name of "' +
+          props.name +
+          '". name must not contains "."'
+      );
+    }
+
+    return {
+      actionCallback: {},
+    };
+  },
+  mounted() {
+    this.$_mountToFocusSystem();
+
+    if (!!this.$props.autoFocus || this.$props.autoFocus === "") {
+      this.requestFocus(this.$props.autoFocus !== "exact");
+    }
+  },
+  beforeUnmount() {
+    this.$el.FocusNodeRef.onUnMount();
+  },
+
+  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);
+    },
+
+    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.setOnDispatchKeyDown(this.$_onDispatchKeyDown);
+      }
+      this.actionCallback.onDispatchKeyUp =
+        this.$props.onDispatchKeyUp || this.$props.onAction?.onDispatchKeyUp;
+      if (this.actionCallback.onDispatchKeyUp) {
+        focusNode.setOnDispatchKeyUp(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);
+      }
+
+      // 建立父子关系链
+      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;
+    },
+  },
+};
+</script>
+
+<template>
+  <fdiv :fname="$props.name" :new-namespace="$props.namespace">
+    <slot></slot>
+  </fdiv>
+</template>

package/utils/JsViewEngineWidget/JsvFocusManager.js

@@ -0,0 +1,91 @@
+/* eslint-disable no-prototype-builtins */
+
+import JsvFocusBlock from './JsvFocusBlock.vue'
+
+export class JsvFocusManager {
+  constructor() {
+  }
+
+  install(app, ...options) {
+    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
+
+    // 注册全局jsv-focus-block组件
+    app.component('JsvFocusBlock', JsvFocusBlock)
+
+    // 注册全局$jsvFocusManager变量
+    app.config.globalProperties.$jsvFocusManager = this;
+  }
+
+  // declareAlias(alias, blockName) {
+  //   if(typeof alias !== 'string') {
+  //     throw new Error('JsvFocusManager Error: 1st argument must be a string as alias.')
+  //   }
+  //   if(typeof blockName !== 'string') {
+  //     throw new Error('JsvFocusManager Error: 2nd argument must be a string as block name or namespace.')
+  //   }
+  //   if(this.#aliasMap.hasOwnProperty(alias)) {
+  //     throw new Error('JsvFocusManager Error: "' + '" has been decleared.')
+  //   }
+
+  //   this.#aliasMap[alias] = blockName
+  // }
+
+  // changeFocusTo(nameOrSpace, name, exact) {
+  //   if(this.#aliasMap.hasOwnProperty(nameOrSpace)) {
+  //     nameOrSpace = this.#aliasMap[nameOrSpace]
+  //   }
+  //   if(name && this.#aliasMap.hasOwnProperty(name)) {
+  //     name = this.#aliasMap[name]
+  //   }
+  //   if(name) {
+  //     nameOrSpace += ("." + name)
+  //   }
+
+  //   if(!this.$_topFDiv) {
+  //     console.warn("JsvFocusManager Warning: Failed to change focus to " + nameOrSpace)
+  //     return
+  //   }
+
+  //   const rootNodeRef = this.$_topFDiv.getElement().FocusNodeRef;
+  //   const focusNode = rootNodeRef.getNodeByName(nameOrSpace);
+  //   if(!focusNode) {
+  //     console.warn("JsvFocusManager Warning: Failed to find focus to " + nameOrSpace)
+  //     return
+  //   }
+
+  //   focusNode.requestFocus(exact);
+  // }
+
+  $_hookMount(app, rootNodeId) {
+    rootNodeId = rootNodeId.replace('#', '')
+    this.$_topFDiv = document.jsvInitFDivRoot(rootNodeId)
+    this.$_appMount = app.mount.bind(app)
+
+    return this.$_doAppMount.bind(this)
+  }
+
+  $_doAppMount(rootContainer) {
+    // 调用app原有的mount函数
+    const rootComponent = this.$_appMount(rootContainer)
+    // console.log('FocusManager: do mount')
+
+    // 在app.mount后添加焦点控制调用
+    this.$_topFDiv.onMounted()
+
+    return rootComponent;
+  }
+
+  // #aliasMap = {}
+  $_appMount = undefined;
+  $_topFDiv = undefined;
+}
+
+export function jsvCreateFocusManager() {
+  return new JsvFocusManager()
+}