@shijiu/jsview-vue 0.9.422 → 0.9.490

package/samples/TouchSample/TouchContainerVertical.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:21:02
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-11 09:04:26
+ * @Description: file content
+-->
+<script>
+import JsvTouchContainer, {
+  DIRECTION_VERTICAL,
+  DIRECTION_HORIZONTAL,
+  DIRECTION_DISABLE,
+} from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+import { touchContainerV, measures } from "./data.js";
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+export default {
+  components: {
+    JsvTouchContainer,
+  },
+  setup() {
+    return {
+      DIRECTION_VERTICAL,
+      DIRECTION_HORIZONTAL,
+      DIRECTION_DISABLE,
+      touchContainerV,
+      measures,
+      randomColor,
+    };
+  },
+  methods: {
+    _onClick(msg) {
+      console.log(`_onClick:${JSON.stringify(msg)}`);
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
+    <jsv-touch-container
+      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
+      :direction="DIRECTION_HORIZONTAL"
+      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
+    >
+      <div
+        :style="{
+          left: 30,
+          top: 0,
+          width: 400,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#f0ef29',
+        }"
+      >
+        整屏幕滑动
+      </div>
+      <jsv-touch-container
+        :style="{
+          left: 30,
+          top: 50,
+          width: 400,
+          height: 500 * 5,
+          backgroundColor: '#810000',
+        }"
+        :direction="DIRECTION_VERTICAL"
+        :flingPageWidth="500"
+        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
+      >
+        <div
+          v-for="(tabList, tabIndex) in touchContainerV"
+          :key="'tab' + tabIndex"
+          :style="{
+            left: 0,
+            top: 500 * tabIndex,
+            width: 400,
+            height: 500,
+            backgroundColor: randomColor(),
+          }"
+        >
+          <jsv-touch-container
+            v-for="(item, itemIndex) in tabList"
+            :key="'tab' + tabIndex + '-' + itemIndex"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+              backgroundColor: item.backgroundColor,
+              fontSize: 18,
+            }"
+            :onClick="_onClick"
+            :direction="DIRECTION_DISABLE"
+            >{{ item.content }}</jsv-touch-container
+          >
+        </div>
+      </jsv-touch-container>
+
+      <div
+        :style="{
+          left: 530,
+          top: 0,
+          width: 400,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#f0ef29',
+        }"
+      >
+        上下滑动
+      </div>
+      <jsv-touch-container
+        :style="{
+          left: 530,
+          top: 50,
+          width: 400,
+          height: 500 * 5,
+          backgroundColor: '#810000',
+        }"
+        :direction="DIRECTION_VERTICAL"
+        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
+      >
+        <div
+          v-for="(tabList, tabIndex) in touchContainerV"
+          :key="'tab' + tabIndex"
+          :style="{
+            left: 0,
+            top: 500 * tabIndex,
+            width: 400,
+            height: 500,
+            backgroundColor: randomColor(),
+          }"
+        >
+          <jsv-touch-container
+            v-for="(item, itemIndex) in tabList"
+            :key="'tab' + tabIndex + '-' + itemIndex"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+              backgroundColor: item.backgroundColor,
+              fontSize: 18,
+            }"
+            :onClick="_onClick"
+            :direction="DIRECTION_DISABLE"
+            >{{ item.content }}</jsv-touch-container
+          >
+        </div>
+      </jsv-touch-container>
+    </jsv-touch-container>
+  </div>
+</template>

package/samples/TouchSample/data.js

@@ -0,0 +1,81 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:23:15
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-11 10:03:21
+ * @Description: file content
+ */
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+
+const metroWidgetH = [];
+for (let i = 0; i < 500; i++) {
+  metroWidgetH.push({
+    content: i,
+    id: i,
+    width: 100,
+    height: 200,
+    color: randomColor(),
+  });
+}
+
+const metroWidgetV = [];
+for (let i = 0; i < 500; i++) {
+  metroWidgetV.push({
+    content: i,
+    id: i,
+    width: 200,
+    height: 100,
+    color: randomColor(),
+  });
+}
+
+const touchContainerH = [];
+for (let i = 0; i < 5; i++) {
+  const tabData = [];
+  for (let i = 0; i < 20; i++) {
+    tabData.push({
+      content: i,
+      id: i,
+      left: (122 / 2) * i,
+      top: 10,
+      width: 122 / 2 - 10,
+      height: 200,
+      backgroundColor: randomColor(),
+    });
+  }
+  touchContainerH.push(tabData);
+}
+
+const touchContainerV = [];
+for (let i = 0; i < 5; i++) {
+  const tabData = [];
+  for (let i = 0; i < 20; i++) {
+    tabData.push({
+      content: i,
+      id: i,
+      left: 10,
+      top: 50 * i,
+      width: 300,
+      height: 40,
+      backgroundColor: randomColor(),
+    });
+  }
+  touchContainerV.push(tabData);
+}
+
+function measures(item) {
+  return item;
+}
+
+export {
+  metroWidgetH,
+  metroWidgetV,
+  touchContainerH,
+  touchContainerV,
+  measures,
+};

package/scripts/jsview-jsmap-serve.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const http = require('http');
+const os = require('os');
+
+let baseDir = __dirname;
+
+function requestListener(req, res) {
+  console.log("[request] " + req.url);
+
+  if (req.url.endsWith("\.map")) { // return map source file content
+    try {
+      const fileContent = fs.readFileSync(baseDir + '/' + req.url);
+
+      res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
+      res.write(fileContent);
+      res.end();
+      return;
+    } catch (ex) {
+      console.log("Failed to process " + req.url + "\nException: " + ex);
+    }
+  }
+
+  res.writeHead(404);
+  res.end();
+};
+
+function getIPAddress() {
+  let ret = [];
+
+  var interfaces = os.networkInterfaces();
+  for (var devname in interfaces) {
+    var iface = interfaces[devname];
+
+    for (var i = 0; i < iface.length; i++) {
+      var alias = iface[i];
+      if (alias.family === 'IPv4' && !alias.internal)
+        ret.push(alias.address);
+    }
+  }
+  return ret;
+}
+
+function main() {
+  if (process.argv.length >= 3) {
+    baseDir = process.argv[2];
+  }
+
+  const server = http.createServer(requestListener);
+  const port = 57245;
+  server.listen(port, '0.0.0.0', () => {
+    console.log('');
+    console.log('JavaScript source map running at:');
+    console.log(' - Local:   localhost:' + port);
+    getIPAddress().forEach(ip => {
+      console.log(' - Network: ' + ip + ':' + port);
+    });
+    console.log('');
+  });
+}
+
+main();

package/scripts/jsview-post-build.js

@@ -92,6 +92,10 @@ function signApp(options)
     console.log('Updating ' + path.relative(options.projectDir, jsFile));
 
     var jsvAppContents = fs.readFileSync(jsFile);
+    jsvAppContents = jsvAppContents.toString();
+    jsvAppContents = jsvAppContents.replace('# sourceMappingURL=', '# sourceMappingURL=http://localhost:57245/map/');
+    jsvAppContents += '\n'; // 把\n归入算进md5计算中
+
     const jsvAppMd5 = crypto.createHash('md5').update(jsvAppContents).digest('hex');
     let appDataInfo = '';
     if (jsFile.indexOf('main.jsv.') > 0) {
@@ -101,21 +105,53 @@ function signApp(options)
       // 格式化jsvapp信息 /*jsvapp:内容长度:{内容}*/
       // 使用TextEncoder解决中文长度问题
       const infoLen = new TextEncoder().encode(appDataInfo).length;
-      appDataInfo = '/*jsvapp:' + infoLen + ':' + appDataInfo + '*/';
+      appDataInfo = '/*jsvapp:' + infoLen + ':' + appDataInfo + ':' + infoLen + ':jsvapp*/';
     }
-    jsvAppContents = '/*jsvmd5:' + jsvAppMd5 + '*/' + appDataInfo + jsvAppContents;
+    jsvAppContents = jsvAppContents + appDataInfo + '/*jsvmd5:' + jsvAppMd5 + '*/';
     fs.writeFileSync(jsFile, jsvAppContents);
   });
 }
 
+function makeDebugMap(options)
+{
+  fs.mkdirSync(options.mapDir, { recursive: true });
+
+  const jsDir = path.resolve(options.distDir, 'js');
+  const jsFiles = fs.readdirSync(jsDir);
+  jsFiles.forEach((file, index) => {
+    if (!file.endsWith('.map')) {
+      return;
+    }
+
+    const from = path.resolve(jsDir, file);
+    const to = path.resolve(options.mapDir, file);
+    console.log("Moving " + path.relative(options.projectDir, to));
+    fs.renameSync(from, to);
+  });
+
+  const jsmapServeName = "jsview-jsmap-serve.js";
+  const jsmapServePath = path.resolve(options.scriptsDir, jsmapServeName);
+  if (!fs.existsSync(jsmapServePath)) {
+    console.error("Failed to copy jsview-jsmap-serve.js, file not exists.");
+    process.exit(1);
+  }
+
+  const to = path.resolve(options.debugDir, jsmapServeName);
+  console.log("Making " + path.relative(options.projectDir, to));
+  fs.copyFileSync(jsmapServePath, to);
+}
+
 function main() {
   const options = {};
   options.projectDir = process.cwd();
   options.modulesDir = path.resolve(options.projectDir, "node_modules");
   options.jsviewDir = path.resolve(options.modulesDir, "@shijiu/jsview-vue");
   options.patchesDir = path.resolve(options.jsviewDir, "patches");
+  options.scriptsDir = path.resolve(options.jsviewDir, "scripts");
   options.distDir = path.resolve(options.projectDir, "dist");
   options.appConfigDir = path.resolve(options.projectDir, "src/appConfig");
+  options.debugDir = path.resolve(options.distDir, "debug");
+  options.mapDir = path.resolve(options.debugDir, "map");
 
 
   vueConfigFile = path.resolve(options.projectDir, 'vue.config.js');
@@ -130,7 +166,13 @@ function main() {
   console.info();
   signApp(options);
   console.info();
-  console.info('Sign complete.');
+  console.info('Signed JsView App.');
+
+  console.info('Making JsView Debug map...');
+  console.info();
+  makeDebugMap(options);
+  console.info();
+  console.info('Made JsView Debug map.');
 }
 
 main();

package/scripts/jsview-post-install.js

@@ -55,6 +55,28 @@ async function printRevision(options) {
   console.log('* Update revision to:');
   console.log('* CORE: ' + jsviewTargetVersion.CoreRevision);
   console.log('* ENGINE JS URL: ' + jsviewTargetVersion.JseUrl);
+  console.log('* PLUGIN LIST: ');
+
+  // print plugin info
+  let pluginCount = 0;
+  {
+    let pluginDirPath = path.join(options.jsviewDir, '/utils/JsViewPlugin');
+    fs.readdirSync(pluginDirPath).forEach((file) => {
+      var pathname = path.join(pluginDirPath, file);
+      if (fs.statSync(pathname).isDirectory()) {
+        let versionFilePath = path.join(pathname, 'version.js'); 
+        if (fs.existsSync(versionFilePath)) {
+          const targetVersion = require(versionFilePath);
+          console.log(`*    [${path.basename
+            (pathname)}] : ${targetVersion.packageName
+            } : ${targetVersion.version}`);
+          pluginCount++;
+        }
+      }
+    })
+  }
+  console.log(`*    total:${pluginCount}`);
+
   console.log('**************************************************');
 }
 

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -7,15 +7,15 @@
  *             @return 是否消耗 true: 已消耗，不再冒泡; false: 继续冒泡
  *  onFocus: 获得焦点回调
  *  onBlur: 失去焦点回调
- *  dispathchKeyDown: 分发按键落下事件回调
+ *  onDispatchKeyDown: 分发按键落下事件回调
  *                    @params keyEvent
  *                    @return 是否消耗 true: 已消耗，不再分发; false: 继续分发
- *  dispathcKeyUp: 分发按键抬起事件回调
+ *  onDispatchKeyUp: 分发按键抬起事件回调
  *                 @params keyEvent
  *                 @return 是否消耗 true: 已消耗，不再分发; false: 继续分发
- *  fid/branchName: 用于设置焦点的id
+ *  name: 用于设置焦点的id
+ *  namespace: 焦点id的命名空间
  *  autoFocus: 当Mount后自动获得焦点, 设置为"exact"，将把其子节点的焦点给抢过来
- *  asHub:  true/false，设置后，此节点会创建二级hub，不同的hub之间fid可以重复(用于子场景由不同开发者开发后进行合并的场景)
 -->
 
 <script>
@@ -74,7 +74,9 @@ export default {
     }
   },
   beforeUnmount() {
-    this.$el.FocusNodeRef.onUnMount();
+    const focusNode = this.$el.FocusNodeRef;
+    focusNode.onUnMount();
+    focusNode.jsvVueComponent = undefined;
   },
 
   methods: {

package/utils/JsViewEngineWidget/JsvFocusManager.js

@@ -22,6 +22,11 @@ export class JsvFocusManager {
     app.config.globalProperties.$jsvFocusManager = this;
   }
 
+  getCurrentFocusStack() {
+    let focus_stack = this.$_topFDiv?.getHub()?.getCurrentFocusStack();
+    return (focus_stack ? focus_stack : []);
+  }
+
   // declareAlias(alias, blockName) {
   //   if(typeof alias !== 'string') {
   //     throw new Error('JsvFocusManager Error: 1st argument must be a string as alias.')

package/utils/JsViewEngineWidget/MetroWidget/ItemView.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-18 14:34:20
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-25 14:30:24
+ * @LastEditTime: 2022-04-02 16:21:15
  * @Description: file content
 -->
 <script>
@@ -99,12 +99,13 @@ export default {
       return this.$refs.itemDiv;
     },
     testTouchEnable() {
+      
       if (this.enableTouch) {
-        if (this.$refs.element) {
+        if (this.$refs.itemDiv) {
           if (!this.touchTested) {
             // 为view添加触控处理
-            let view = this.$refs.element.jsvMaskView;
-            var dragSetting = new Forge.DragSetting(
+            let view = this.$refs.itemDiv.jsvMaskView;
+            let dragSetting = new Forge.DragSetting(
               Forge.DragSetting.DIRECTION_DISABLE,
               20,
               false,
@@ -152,18 +153,10 @@ export default {
   },
   mounted() {
     this.widgetHandler.updateMounted(this.index, true);
-    //TODO 触控的处理有待添加
-    // this.testTouchEnable();
-    // this.widgetHandler.updateMounted(this.index, true);
-    // const curFocus = this.widgetHandler.getCurrentFocusId();
-    // if (this.widgetHandler.isFocus() && curFocus.index === this.index) {
-    //   //unmount 后导致的onFocus 在 mount 前，onFocus 为生效的问题
-    //   this.onFocus();
-    // }
+    this.testTouchEnable();
   },
   updated() {
-    //TODO 触控的处理有待添加
-    // this.testTouchEnable();
+    this.testTouchEnable();
   },
   beforeUnmount() {
     this.widgetHandler.updateMounted(this.index, false);