@shijiu/jsview-vue 2.1.200 → 2.1.340-test.0

package/index.js

@@ -1,4 +1,3 @@
-export * from "./utils/JsViewEngineWidget";
-export * from "./utils/JsViewPlugin";
-export * from "./utils/JsViewVueTools";
-export * from "./utils/JsViewVueWidget";
+// 二选一 "./bin" 用于执行打包的js，"./utils" 用于调试
+export * from "./bin/jsview-vue.mjs";
+// export * from "./utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.1.200",
+  "version": "2.1.340-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",
@@ -13,7 +13,6 @@
   "dependencies": {
     "qr.js": "0.0.0"
   },
-  "devDependencies": {},
   "engines": {
     "node": ">=16.0.0"
   }

package/tools/config/rollup.config.mjs

@@ -0,0 +1,52 @@
+import path from 'node:path'
+
+const projectDir = process.cwd();
+
+export default {
+  external: [
+    '@shijiu/jsview',
+    '@shijiu/jsview/dom/*',
+    '@shijiu/jsview/dom/jsv-forge-define',
+    'plugin-vue:export-helper',
+    'qr.js',
+    'vue',
+    'vue-router',
+  ],
+  input: path.resolve(projectDir, 'node_modules', '.cache', 'utils/index.mjs'),
+  output: {
+    chunkFileNames: (chunkInfo) => getChunkFileName(chunkInfo),
+    dir: 'bin',
+    entryFileNames: 'jsview-vue.mjs',
+    format: 'esm',
+    manualChunks: (id) => getManualChunks(id),
+    name: 'jsview-vue',
+    sourcemap: false,
+    exports: 'named',
+  },
+  treeshake: false,
+}
+
+function getManualChunks(id) {
+  if(path.relative(projectDir, id) == 'node_modules/.cache/_virtual/_plugin-vue_export-helper.mjs') { // 解决非显示字符问题
+    return 'export-sfc';
+  } else if(path.basename(id).startsWith('JsvCommon')) { // 解决Browser和Native同时引用问题。
+    return 'jsview-common';
+  }
+}
+
+function getChunkFileName(chunkInfo) {
+  if (chunkInfo.name == 'jsview-common') {
+    return 'jsview-common.mjs'
+  } else if (chunkInfo.name.startsWith('Browser')) {
+    return 'browser/[name].mjs'
+  } else if (chunkInfo.name == 'export-sfc') {
+    return '[name].mjs'
+  }
+
+  console.error("JsView Rollup Error: Unexpected chunk name:", chunkInfo.name)
+  return '[name].mjs'
+
+  // 执行到此处可能会引起循环import的问题，什么也不返回，以此来引起rollup的打包失败。
+  // 需要根据失败信息来修复此风险
+  undefined = undefined  // 使用console或throw不能定位到此处
+}

package/tools/config/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "es2022",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "allowJs": true,
+    "paths": {
+      "jsview": [ "./node_modules/@shijiu/jsview-vue" ],
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue",
+    "node_modules/@shijiu/jsview-vue/**/*.vue"
+  ]
+}

package/tools/config/vite.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import fs from 'node:fs'
+import path from 'node:path'
+
+const projectDir = process.cwd();
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(projectDir, 'utils/index.js'),
+      formats: ["es"],
+    },
+    minify: false,
+    rollupOptions: {
+      external: [
+        '@shijiu/jsview',
+        '@shijiu/jsview/dom/*',
+        '@shijiu/jsview/dom/jsv-forge-define',
+        'qr.js',
+        'vue',
+        'vue-router',
+      ],
+      output: {
+        banner: (chunkInfo) => getBanner(chunkInfo),
+        dir: path.resolve(projectDir, 'node_modules', '.cache'),
+        entryFileNames: '[name].mjs',
+        format: 'esm',
+        preserveModules: true,
+        preserveModulesRoot: projectDir,
+        sourcemap: false,
+      },
+      treeshake: false,
+    },
+  },
+  plugins: [
+    vue()
+  ],
+})
+
+function getBanner(chunkInfo) {
+  let filePath = chunkInfo.facadeModuleId
+  filePath = filePath.replace(/^\x00/, '') // '\0plugin-vue:export-helper',
+  const modulePath = path.relative(projectDir, filePath)
+  let banner = `
+ //!
+ //! ${modulePath};
+ //!
+ `;
+
+  if(filePath.endsWith('.vue')) {
+    const regex = /<script.*?<\/script>|<style.*?<\/style>|<template.*?<\/template>/gs
+    const content = fs.readFileSync(filePath, 'utf-8')
+    const topLevelComments = content.replace(regex, '');
+    banner += `/*! ${topLevelComments} */`;
+  }
+
+  return banner;
+}

package/tools/jsview-vue-build.mjs

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+'use strict';
+
+import childProcess from 'node:child_process';
+import fs from 'node:fs';
+import path from 'path';
+import url from 'url';
+
+function checkNodeVersion(minMajorVersion = 16)
+{
+  const versions = process.version.replace('v', '').split('.');
+  const [majorVersion, minorVersion, patchVersion] = versions;
+
+  console.info(`Node version: v${majorVersion}.${minorVersion}.${patchVersion}`);
+  if (majorVersion < minMajorVersion) {
+    console.error('Error: Node version is too low! Please upgrade your Node.js first.');
+    process.exit(1)
+  }
+}
+
+function execCommand(cmdline)
+{
+  console.info('Run [' + cmdline + ']... ');
+  try {
+    const ret = childProcess.execSync(cmdline, { stdio: 'inherit' });
+    if (ret) {
+      return ret.toString();
+    }
+    return null;
+  } catch (err) {
+    console.error('Error: ', err);
+    process.exit(1);
+  }
+}
+
+function parseArguments()
+{
+  const options = {
+    withoutNpmInstall: false,
+  };
+
+  // arg0: node
+  // arg1: script.js
+  const arguList = process.argv.slice(2);
+  for (const argu of arguList) {
+    if (argu == '--without-npm-install' || argu == '-n') {
+      options.withoutNpmInstall = true;  
+    } else if (argu == '--help' || argu == '-h') {
+      console.log('Usages:')
+      console.log('')
+      console.log('  -n | --without-npm-install: Ignore to run npm install.')
+      console.log('')
+      console.log('  -h | --help:                Print help usages.')
+      console.log('')
+      process.exit(0)
+    } else {
+      console.error('Failed to parse argument: ' + argu)
+      process.exit(1)
+    }
+  }
+
+  return options
+}
+
+async function main()
+{
+  checkNodeVersion();
+
+  const options = parseArguments();
+
+  const currJsFilePath = url.fileURLToPath(import.meta.url)
+  const jsviewVueDir = path.resolve(currJsFilePath, '../../') // jsview-framework/@shijiu/jsview-vue
+
+  const noSavePkgList = [
+    // jsview
+    `${jsviewVueDir}/../jsview`,
+    'gifuct-js@2.1.2',
+    'postcss-js@4.0.0',
+
+    // vue + vite
+    'vue@3.2.45',
+    'vue-router@4.1.6',
+    '@vitejs/plugin-vue@5.0.3 ',
+    'typescript@4.9.3',
+    'vite@5.0.11',
+    'vue-tsc@1.0.11',
+
+    // jsview-vue dep
+    'sass@1.58.1',
+  ];
+
+  const noSavePackages = noSavePkgList.toString().replaceAll(',', ' ');
+  const version = process.env['JSVIEW_VUE_VERSION'];
+
+  let batchCommand = []
+
+  fs.rmSync(`${jsviewVueDir}/bin`, { recursive: true, force: true });
+  if(options.withoutNpmInstall == false
+  || fs.existsSync(`${jsviewVueDir}/node_modules`) == false) {
+    fs.rmSync(`${jsviewVueDir}/node_modules`, { recursive: true, force: true });
+    batchCommand = [
+      'npm install',
+      `npm install --no-save ${noSavePackages}`,
+      `node ${jsviewVueDir}/node_modules/@shijiu/jsview/tools/jsview-post-install.mjs --framework=vue`,
+    ];
+  }
+  batchCommand = [
+    ...batchCommand,
+    `${jsviewVueDir}/node_modules/.bin/vue-tsc --project ${jsviewVueDir}/tools/config/tsconfig.json`,
+    `JSVIEW_DISABLE_MANUALCHUNKS=true ${jsviewVueDir}/node_modules/.bin/vite build --config ${jsviewVueDir}/tools/config/vite.config.ts`,
+    `${version ? 'JSVIEW_VUE_VERSION='+version : ''} ${jsviewVueDir}/node_modules/.bin/rollup  --config ${jsviewVueDir}/tools/config/rollup.config.mjs`,
+  ];
+  for(const command of batchCommand) {
+    execCommand(`cd ${jsviewVueDir} && ${command}`);
+  }
+
+  if(options.withoutNpmInstall == false) {
+    fs.rmSync(`${jsviewVueDir}/node_modules`, { recursive: true, force: true });
+    fs.rmSync(`${jsviewVueDir}/package-lock.json`, { recursive: true, force: true });
+  }
+
+  console.info('Done...');
+}
+
+main();

package/utils/JsViewEngineWidget/{JsvFocusBlock.vue → JsvFocus/JsvFocusBlock.vue}

@@ -38,7 +38,7 @@ import {
   onActivated,
   onDeactivated,
 } from "vue";
-import { HUB_NS_PROVIDE_NAME } from "./JsvFocusManager.js";
+import { HUB_NS_PROVIDE_NAME } from "./JsvFocusHub";
 
 const props = defineProps({
   name: String,
@@ -51,7 +51,7 @@ const props = defineProps({
   onKeyDown: Function,
   onFocus: Function,
   onBlur: Function,
-  onCustomerEvent: Function,
+  onCustomEvent: Function,
 });
 if (props.namespace && props.name) {
   throw new Error("JsvFocusBlock Error: Either name or namespace can be set.");
@@ -102,8 +102,8 @@ const requestFocus = async (passToChild) => {
   node?.requestFocus(passToChild);
 };
 
-const bubbleCustomerEvent = (ev) => {
-  toRaw(fDivRef.value)?.FocusNodeRef.bubbleCustomerEvent(ev);
+const bubbleCustomEvent = (ev) => {
+  toRaw(fDivRef.value)?.FocusNodeRef.bubbleCustomEvent(ev);
 };
 
 const returnFocusToParent = (ev) => {
@@ -113,7 +113,7 @@ const returnFocusToParent = (ev) => {
 const exportObject = {
   getFullName,
   requestFocus,
-  bubbleCustomerEvent,
+  bubbleCustomEvent,
   returnFocusToParent,
 };
 const _mountToFocusSystem = () => {
@@ -150,10 +150,10 @@ const _mountToFocusSystem = () => {
     focusNode.setOnBlur(_onBlur);
   }
 
-  actionCallback.onCustomerEvent =
-    props.onCustomerEvent || props.onAction?.onCustomerEvent;
-  if (actionCallback.onCustomerEvent) {
-    focusNode.setOnCustomerEvent(_onCustomerEvent);
+  actionCallback.onCustomEvent =
+    props.onCustomEvent || props.onAction?.onCustomEvent;
+  if (actionCallback.onCustomEvent) {
+    focusNode.setOnCustomEvent(_onCustomEvent);
   }
   // 建立父子关系链
   let self = toRaw(fDivRef.value);
@@ -195,8 +195,8 @@ const _onFocus = () => {
 const _onBlur = () => {
   actionCallback?.onBlur(exportObject);
 };
-const _onCustomerEvent = (ev) => {
-  return actionCallback?.onCustomerEvent(ev) || false;
+const _onCustomEvent = (ev) => {
+  return actionCallback?.onCustomEvent(ev) || false;
 };
 
 onMounted(() => {

package/utils/JsViewEngineWidget/{JsvFocusHub.ts → JsvFocus/JsvFocusHub.ts}

@@ -1,6 +1,5 @@
 
-
-class FocusHubApi {
+class JsvFocusHubApi {
     private _FocusHub: any; // JsvFocusableNode中的class Hub
 
     constructor(focusableHubRef: any) {
@@ -120,4 +119,11 @@ class FocusHubApi {
     }
 }
 
-export default FocusHubApi;
+const ROOT_HUB_PROVIDE_NAME = "__jsvFocusRootHub__";
+const HUB_NS_PROVIDE_NAME = "__jsvFocusNameSpace__";
+
+export {
+    JsvFocusHubApi,
+    ROOT_HUB_PROVIDE_NAME,
+    HUB_NS_PROVIDE_NAME
+};

package/utils/JsViewEngineWidget/{JsvFocusManager.js → JsvFocus/JsvFocusManager.js}

@@ -1,12 +1,13 @@
 /* eslint-disable no-prototype-builtins */
 
 import JsvFocusBlock from "./JsvFocusBlock.vue";
-import JsvFocusHubApi from "./JsvFocusHub.ts";
+import {
+  JsvFocusHubApi,
+  ROOT_HUB_PROVIDE_NAME,
+  HUB_NS_PROVIDE_NAME
+} from "./JsvFocusHub.ts";
 import { inject } from "vue";
 
-const ROOT_HUB_PROVIDE_NAME = "__jsvFocusRootHub__";
-const HUB_NS_PROVIDE_NAME = "__jsvFocusNameSpace__";
-
 const useFocusHub = (withNameSpace) => {
   if (withNameSpace) {
     let nameSpace = inject(HUB_NS_PROVIDE_NAME); // nameSpace变更由JsvFocusBlock设置namespace时变更
@@ -118,4 +119,4 @@ function jsvCreateFocusManager() {
   return new JsvFocusManager();
 }
 
-export { jsvCreateFocusManager, useFocusHub, HUB_NS_PROVIDE_NAME };
+export { jsvCreateFocusManager, useFocusHub };

package/utils/JsViewEngineWidget/MetroWidget/AnimationManager.ts

@@ -3,7 +3,8 @@ import { ShallowRef, watch, ref, Ref } from "vue";
 
 export enum TaskType {
   RESIZE_ITEM,
-  SLIDE
+  SLIDE,
+  ON_FOCUS_CHANGE,
 }
 
 interface Task {
@@ -21,18 +22,20 @@ export class MacroEndTaskManager {
   private customerOnBreak: TaskCallback;
   private mTaskToken: Ref<number> = ref(0);
   private mToken: number = 0;
+  private mFlushedFrameCount = -1;
 
   constructor(onFlushTask: TaskCallback, onBreak: TaskCallback) {
     this.customerOnBreak = onBreak;
     this.customerOnFlushTakEnd = onFlushTask;
-    watch(
-      () => this.mTaskToken.value,
-      () => {
-        this.onFlushTask();
-      },
-      {
-        flush: 'post'
-      })
+    // watch(
+    //   () => this.mTaskToken.value,
+    //   () => {
+    //     this.onFlushTask();
+    //     this.mFlushedFrameCount = this.frameCount;
+    //   },
+    //   {
+    //     flush: 'post'
+    //   })
   }
 
   private getToken(): number {
@@ -45,6 +48,11 @@ export class MacroEndTaskManager {
   }
 
   public addTask(type: TaskType, params: any) {
+    if (this.mFlushedFrameCount == Forge.sFrameCount.count) {
+      console.log("MetroWidget: tasks in currnet frame flushed. ignore task", type, params);
+      return;
+    }
+
     this.taskList.push({
       type,
       params,
@@ -60,8 +68,23 @@ export class MacroEndTaskManager {
         }
       }
       this.onBreak(breakList);
-      this.mTaskToken.value = this.getToken();
+      // this.mTaskToken.value = this.getToken();
     }
+
+    //每次添加task时推迟处理
+    this.mTaskToken.value = this.getToken();
+    let selfToken = this.mTaskToken.value;
+    Promise.resolve().then(() => {
+      // console.log("flushtask", selfToken, this.mTaskToken.value)
+      if (selfToken == this.mTaskToken.value) {
+        this.onFlushTask();
+        this.mFlushedFrameCount = this.frameCount;
+        //task flush 完成后有按键过来时, 按键触发的task会被丢掉, 因此任务完成后RequestSwap
+        Forge.sRenderBridge.RequestSwap();
+      } else {
+        // console.log("drop promise");
+      }
+    })
   }
 
   private onFlushTask() {

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -2,7 +2,7 @@
   只显示单列/行的MetroWidget
 -->
 <script setup>
-import { ref, shallowRef, computed } from "vue";
+import { ref, shallowRef, computed, reactive } from "vue";
 import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
@@ -140,6 +140,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  onFocusRectChange: {
+    type: Function,
+  },
+  onAllItemResizeDone: {
+    type: Function,
+  },
+  // enableTouch: {
+  //   type: Boolean,
+  //   default: false,
+  // },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -152,6 +162,12 @@ const slideDivTop = ref(0);
 const focusNode = shallowRef(null);
 const pageUpdateToken = ref(0);
 
+const touchDiv = shallowRef(null);
+const touchDivSize = reactive({
+  width: 0,
+  height: 0,
+});
+
 const normalizedPlaceHolder = computed(() => {
   return {
     gap: props.placeHolderSetting.gap ?? 0,
@@ -168,9 +184,12 @@ const {
   focusBlockOnFocus,
   focusBlockOnBlur,
   focusBlockOnKeyDown,
-  focusBlockOnCustomerEvent,
+  focusBlockOnCustomEvent,
   _onFocusableItemEdge,
   exportObject,
+  onTouchDown,
+  onTouchRelease,
+  currentFocusIndex,
 } = setup(
   props,
   itemRender,
@@ -181,6 +200,8 @@ const {
   slideDivTop,
   focusNode,
   pageUpdateToken,
+  touchDiv,
+  touchDivSize,
   "list"
 );
 
@@ -212,66 +233,77 @@ defineExpose(exportObject);
           top: slideDivTop,
         }"
       >
-        <div>
-          <slot name="background"></slot>
-        </div>
-        <div ref="locateDiv">
-          <jsv-focus-block
-            ref="focusNode"
-            :name="name"
-            :onAction="{
-              onFocus: focusBlockOnFocus,
-              onBlur: focusBlockOnBlur,
-              onKeyDown: focusBlockOnKeyDown,
-              onCustomerEvent: focusBlockOnCustomerEvent,
-            }"
-          >
-            <div
-              v-for="item in renderData"
-              :key="pageUpdateToken + '_' + item.index"
-              :ref="item.divRef"
-              :style="{
-                left: item.templateInfo.left,
-                top: item.templateInfo.top,
-                width: item.templateInfo.width,
-                height: item.templateInfo.height,
-                zIndex: item.renderStyle.zIndex,
+        <div
+          ref="touchDiv"
+          :style="{
+            width: touchDivSize.width,
+            height: touchDivSize.height,
+          }"
+          @jsv-touchend="onTouchRelease"
+        >
+          <div>
+            <slot name="background"></slot>
+          </div>
+          <div ref="locateDiv">
+            <jsv-focus-block
+              ref="focusNode"
+              :name="name"
+              :onAction="{
+                onFocus: focusBlockOnFocus,
+                onBlur: focusBlockOnBlur,
+                onKeyDown: focusBlockOnKeyDown,
+                onCustomEvent: focusBlockOnCustomEvent,
               }"
             >
               <div
-                v-if="
-                  !enableItemRenderBreak || item.mounted.value || itemRender
-                "
-                :key="renderBreakKey"
-                :ref="item.slotRef"
-              >
-                <slot
-                  name="renderItem"
-                  :data="item.customerData"
-                  :onEdge="_onFocusableItemEdge"
-                  :onAction="item.registerObj"
-                  :query="item.query"
-                  :onItemEdge="_onFocusableItemEdge"
-                ></slot>
-              </div>
-              <div
-                v-if="
-                  enableItemRenderBreak &&
-                  placeHolderSetting &&
-                  !item.mounted.value
-                "
+                v-for="(item, index) in renderData"
+                :key="pageUpdateToken + '_' + item.index"
+                :ref="item.divRef"
                 :style="{
-                  width: item.renderStyle.width - normalizedPlaceHolder.gap,
-                  height: item.renderStyle.height - normalizedPlaceHolder.gap,
-                  backgroundColor:
-                    exportObject.getCurrentFocusIndex() == item.index
-                      ? normalizedPlaceHolder.focusBackgroundColor
-                      : normalizedPlaceHolder.backgroundColor,
-                  borderRadius: normalizedPlaceHolder.borderRadius,
+                  left: item.templateInfo.left,
+                  top: item.templateInfo.top,
+                  width: item.templateInfo.width,
+                  height: item.templateInfo.height,
+                  zIndex: item.renderStyle.zIndex,
                 }"
-              ></div>
-            </div>
-          </jsv-focus-block>
+                @click="item.onTap.value"
+              >
+                <div
+                  v-if="
+                    !enableItemRenderBreak || item.mounted.value || itemRender
+                  "
+                  :key="renderBreakKey"
+                  :ref="item.slotRef"
+                  :id="`${name}_${index}`"
+                >
+                  <slot
+                    name="renderItem"
+                    :data="item.customerData"
+                    :onEdge="_onFocusableItemEdge"
+                    :onAction="item.registerObj"
+                    :query="item.query"
+                    :onItemEdge="_onFocusableItemEdge"
+                  ></slot>
+                </div>
+                <div
+                  v-if="
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value
+                  "
+                  :style="{
+                    width: item.renderStyle.width - normalizedPlaceHolder.gap,
+                    height: item.renderStyle.height - normalizedPlaceHolder.gap,
+                    backgroundColor:
+                      currentFocusIndex == item.index
+                        ? normalizedPlaceHolder.focusBackgroundColor
+                        : normalizedPlaceHolder.backgroundColor,
+                    borderRadius: normalizedPlaceHolder.borderRadius,
+                  }"
+                ></div>
+              </div>
+            </jsv-focus-block>
+          </div>
         </div>
         <div>
           <slot name="foreground"></slot>