@shijiu/jsview-vue 0.9.502 → 0.9.590

package/samples/VisibleSensorDemo/App.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { reactive, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
+
+const BOX_WIDTH = 150;
+const BOX_HEIGHT = 150;
+const BOX_COLOR = "#00FFFF";
+
+const router = useRouter();
+
+let shown = reactive({
+  vertical: 0.25,
+  horizon: 1.0,
+});
+
+let left_change = reactive({ left: 0 });
+let top_change = reactive({ top: 0 });
+
+const containerRef = ref(null);
+let case_config = ref(null);
+let status_text = reactive({
+  oldH: "false",
+  newH: "false",
+  oldV: "false",
+  newV: "false",
+});
+
+case_config.value = getTestCase(0);
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+
+// 内部接口
+const onBeVisible = (old_h, new_h, old_v, new_v) => {
+  status_text.oldH = old_h ? "true" : "false";
+  status_text.newH = new_h ? "true" : "false";
+  status_text.oldV = old_v ? "true" : "false";
+  status_text.newV = new_v ? "true" : "false";
+};
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，回退
+    return true;
+  }
+  return false;
+};
+
+function getTestCase(test_index) {
+  let test_config = {
+    animation: null,
+    text: null,
+    horizon: 1.0,
+    vertical: 1.0,
+  };
+
+  switch (test_index) {
+    case 0: {
+      // 上到下
+      test_config.animation = "visibleSensor_upDown 5s infinite linear";
+      test_config.text = "从上到下";
+      test_config.horizon = 1.0;
+      test_config.vertical = 0.25;
+      break;
+    }
+    case 1: {
+      // 左到右
+      test_config.animation = "visibleSensor_leftRight 5s infinite linear";
+      test_config.text = "从左到右";
+      test_config.horizon = 0.25;
+      test_config.vertical = 1.0;
+      break;
+    }
+  }
+
+  return test_config;
+}
+</script>
+
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#00F000' }">
+      <div
+        :style="{
+          left: 10,
+          top: 10,
+          height: 100,
+          width: 900,
+          fontColor: '#000000',
+          fontSize: 15,
+          lineHeight: 20,
+        }"
+      >
+        {{
+          `new horizon: ${status_text.newH}
+new vertical: ${status_text.newV}
+-------
+old horizon: ${status_text.oldH}
+old vertical: ${status_text.oldV}`
+        }}
+      </div>
+      <div
+        ref="containerRef"
+        :style="{
+          left: 240,
+          top: 110,
+          width: 800,
+          height: 500,
+          backgroundColor: '#00F0F0',
+        }"
+      >
+        <div
+          :style="{
+            left: 0,
+            top: 0,
+            animation: case_config.animation,
+          }"
+        >
+          <JsvVisibleSensor
+            :horizonShown="case_config.horizon"
+            :verticalShown="case_config.vertical"
+            :width="BOX_WIDTH"
+            :height="BOX_HEIGHT"
+            :enable="true"
+            :container="containerRef"
+            :callback="onBeVisible"
+          >
+            <div
+              :style="{
+                width: BOX_WIDTH,
+                height: BOX_HEIGHT,
+                backgroundColor: BOX_COLOR,
+                fontSize: 20,
+                lineHeight: 30,
+              }"
+            >
+              {{ case_config.text }}
+            </div>
+          </JsvVisibleSensor>
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes visibleSensor_upDown {
+  from {
+    transform: translate3d(300px, -200px, 0);
+  }
+  to {
+    transform: translate3d(300px, 600px, 0);
+  }
+}
+
+@keyframes visibleSensor_leftRight {
+  from {
+    transform: translate3d(-160px, 200px, 0);
+  }
+  to {
+    transform: translate3d(1400px, 200px, 0);
+  }
+}
+</style>

package/scripts/jsview-jsmap-serve.js

@@ -6,10 +6,37 @@ const os = require('os');
 
 let baseDir = __dirname;
 
+let script_name = __filename.substr(__dirname.length + 1)
+
+let redirect_url;
+if (process.argv.length >= 2) {
+  let args_start = 0;
+  for (let i = 0; i < process.argv.length; i++) {
+    if (process.argv[i].endsWith(script_name)) {
+      args_start = i + 1;
+      break;
+    }
+  }
+  const args = process.argv.slice(args_start)
+  redirect_url = args[0]
+  if (!redirect_url.endsWith('/')) {
+    redirect_url = redirect_url + '/';
+  }
+}
+
 function requestListener(req, res) {
   console.log("[request] " + req.url);
 
   if (req.url.endsWith("\.map")) { // return map source file content
+    if (redirect_url) {
+      // redirect with 302 HTTP code in response
+      let redirect_target = redirect_url
+          + convertMapBaseUrl(req.url)
+      console.log(`redirect ${req.url} -> ${redirect_target}`)
+      res.writeHead(302, { "Location": redirect_target });
+      return res.end();
+    }
+
     try {
       const fileContent = fs.readFileSync(baseDir + '/' + req.url);
 
@@ -26,6 +53,18 @@ function requestListener(req, res) {
   res.end();
 };
 
+function convertMapBaseUrl(origin_url) {
+  if (origin_url.startsWith('/map/')) {
+    /* 去掉子目录/map/ */
+    return origin_url.substr(5); 
+  } else if (origin_url.startsWith('/')) {
+    /* 去掉'/' */
+    return origin_url.substring(1, origin_url.length);
+  } else {
+    return origin_url;
+  }
+}
+
 function getIPAddress() {
   let ret = [];
 
@@ -52,6 +91,9 @@ function main() {
   server.listen(port, '0.0.0.0', () => {
     console.log('');
     console.log('JavaScript source map running at:');
+    if (redirect_url) {
+      console.log('with redirect url=' + redirect_url)
+    }
     console.log(' - Local:   localhost:' + port);
     getIPAddress().forEach(ip => {
       console.log(' - Network: ' + ip + ':' + port);

package/scripts/jsview-post-install.js

@@ -53,7 +53,7 @@ async function printRevision(options) {
 
   console.log('**************************************************');
   console.log('* Update revision to:');
-  console.log('* CORE: ' + jsviewTargetVersion.CoreRevision);
+  console.log('* CORE: ' + jsviewTargetVersion.CoreRevisionAndBranch);
   console.log('* ENGINE JS URL: ' + jsviewTargetVersion.JseUrl);
   console.log('* PLUGIN LIST: ');
 

package/tsconfig.json

@@ -22,6 +22,9 @@
       ],
       "jsview/*": [
         "./*"
+      ],
+      "jsview": [
+        "./index.js"
       ]
     },
     "lib": [

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>