@shijiu/jsview-vue 2.2.426-test.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.2.426-test.0",
+  "version": "2.3.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/utils/JsViewEngineWidget/CheckType.js

@@ -44,10 +44,10 @@ function checkType(value, type) {
     let valid;
     const expectedType = getTypeName(t);
     if (isSimpleType(expectedType)) {
-      const t = typeof v;
-      valid = t === expectedType.toLowerCase();
+      const valueType = typeof v;
+      valid = valueType === expectedType.toLowerCase();
       // for primitive wrapper objects
-      if (!valid && t === 'object') {
+      if (!valid && valueType === 'object') {
         valid = v instanceof t;
       }
     }

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusBlock.vue

@@ -221,16 +221,29 @@ onUnmounted(() => {
 });
 
 onActivated(() => {
-  //TODO 首次mounted后会调用onActivated, 考虑避免重复添加
-  focusNodeRef = toRaw(fDivRef.value)?.FocusNodeRef;
-  _mountToFocusSystem();
+  if (fDivRef.value == null) {
+    console.log("FocusBlock onActivated but not mounted name=" + props.name);
+    return;
+  }
 
-  if (!!props.autoFocus || props.autoFocus === "") {
-    requestFocus(props.autoFocus !== "exact");
+  if (focusNodeRef == null) {
+    focusNodeRef = toRaw(fDivRef.value)?.FocusNodeRef;
+    _mountToFocusSystem();
+
+    if (!!props.autoFocus || props.autoFocus === "") {
+      requestFocus(props.autoFocus !== "exact");
+    }
+  } else {
+    // 首次mounted后会调用onActivated, 考虑避免重复添加
   }
 });
 
 onDeactivated(() => {
+  if (fDivRef.value == null) {
+    console.log("FocusBlock onDeactivated but not mounted name=" + props.name);
+    return;
+  }
+
   focusNodeRef?.onUnMount(true);
   if (focusNodeRef?.jsvVueComponent) {
     focusNodeRef.jsvVueComponent = undefined;
@@ -242,7 +255,13 @@ defineExpose(exportObject);
 </script>
 
 <template>
-  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace" :style="style" :data-jsv-focusable="focusable ?? !namespace">
+  <fdiv
+    ref="fDivRef"
+    :fname="name"
+    :new-namespace="namespace"
+    :style="style"
+    :data-jsv-focusable="focusable ?? !namespace"
+  >
     <slot></slot>
   </fdiv>
 </template>

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusManager.ts

@@ -25,8 +25,11 @@ export class JsvFocusManager {
   // #aliasMap = {}
   private $_appMount: any = undefined;
   private $_topFDiv: any = undefined;
+  private $_autoSearchFocus: boolean = false;
 
-  constructor() { }
+  constructor(config: any) {
+    this.$_autoSearchFocus = config.autoSearchFocus;
+  }
 
   install(app: any, ...options: any) {
     console.log("JsvFocusManager install");
@@ -98,6 +101,7 @@ export class JsvFocusManager {
   $_hookMount(app: any, rootNodeId: any) {
     rootNodeId = rootNodeId.replace("#", "");
     this.$_topFDiv = (document as any).jsvInitFDivRoot(rootNodeId);
+    this.$_topFDiv.enableAutoSearchFocus(this.$_autoSearchFocus);
     this.$_appMount = app.mount.bind(app);
 
     return this.$_doAppMount.bind(this);
@@ -115,8 +119,23 @@ export class JsvFocusManager {
   }
 }
 
-function jsvCreateFocusManager() {
-  return new JsvFocusManager();
+/**
+ * 创建 JsView 焦点管理器
+ * 
+ * @param {Object} config: 对象设置，子参数有{
+ *                autoSearchFocus{boolean}: 是否开启自动寻焦，默认为false(兼容旧代码)
+ *             }
+ * @return JsvFocusManager
+ */
+function jsvCreateFocusManager(config: Object | null = null) {
+  let defualt_config = {
+    autoSearchFocus: false
+  };
+
+  return new JsvFocusManager({
+    ...defualt_config,
+    ...config
+  });
 }
 
 export { jsvCreateFocusManager, useFocusHub };

package/utils/JsViewEngineWidget/MetroWidget/DebugFrame.vue

@@ -0,0 +1,22 @@
+<script setup>
+import JsvNinePatch from "../../JsViewVueWidget/JsvNinePatch.vue";
+
+const props = defineProps({
+  width: Number,
+  height: Number,
+  sourceId: String,
+})
+</script>
+<template>
+  <JsvNinePatch
+    :style="{
+      width: width,
+      height: height,
+    }"
+    :imageUrl="`jsvtexturestore://${sourceId}`"
+    :imageWidth="20"
+    :centerWidth="1"
+    :imageDspWidth="20"
+    :borderOutset="2"
+  />
+</template>

package/utils/JsViewEngineWidget/MetroWidget/DebugTools.ts

@@ -0,0 +1,37 @@
+import { JsvTextureStoreApi } from "../../JsViewVueTools"
+
+export const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor + "99"
+  );
+};
+
+const RandomColorPool = [
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#00FFFF",
+  "#FF00FF",
+]
+export function createCanvasText(width: number) {
+  
+  let canvasRef = JsvTextureStoreApi.canvasTexture(
+    width,
+    width
+  ); // 创建画布
+
+  let customPath = canvasRef.rectPath(0, 0, width, width);
+  if (customPath) {
+    customPath.stroke(5, RandomColorPool[Math.floor(Math.random() * RandomColorPool.length)]); // 以给定线宽绘制圆环
+  }
+  let sourceId = canvasRef.commit(); // texture和div的textureStore绑定
+  const releaseHandler = () => {
+    JsvTextureStoreApi.deleteTexture(sourceId); // 释放texture资源
+  }
+  return {
+    sourceId,
+    releaseHandler,
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -2,7 +2,7 @@
  * @file 只显示单列/行的MetroWidget
 -->
 <script setup>
-import { ref, shallowRef, computed, reactive, onMounted } from "vue";
+import { ref, shallowRef, computed, reactive, onMounted, onBeforeUnmount } from "vue";
 import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
@@ -12,6 +12,8 @@ import {
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+import DebugFrame from "./DebugFrame.vue";
+import { createCanvasText } from "./DebugTools.ts";
 
 const props = defineProps({
   padding: {
@@ -147,6 +149,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  enableLongPress: {
+    type: Boolean,
+    default: false,
+  },
+  enableDebug: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -181,13 +191,14 @@ const {
   focusBlockOnFocus,
   focusBlockOnBlur,
   focusBlockOnKeyDown,
+  focusBlockOnKeyUp,
   focusBlockOnCustomEvent,
   _onFocusableItemEdge,
   exportObject,
   onTouchDown,
   onTouchRelease,
   currentFocusIndex,
-  onDispatchKeyDown
+  onDispatchKeyDown,
 } = setup(
   props,
   itemRender,
@@ -203,6 +214,15 @@ const {
   "list"
 );
 
+let debugFrameSourceId = "";
+let debugFrameSourceReleaseHandler = null;
+if (props.enableDebug) {
+  const sourceInfo = createCanvasText(20);
+  debugFrameSourceId = sourceInfo.sourceId;
+  debugFrameSourceReleaseHandler = sourceInfo.releaseHandler;
+}
+
+
 onMounted(() => {
   if (onTouchRelease) {
     touchDiv.value.jsvSetTapListener(
@@ -216,6 +236,14 @@ onMounted(() => {
   }
 });
 
+onBeforeUnmount(() => {
+  if (props.enableDebug) {
+    debugFrameSourceReleaseHandler?.();
+    debugFrameSourceReleaseHandler = null;
+    debugFrameSourceId = "";
+  }
+});
+
 defineExpose(exportObject);
 </script>
 
@@ -262,8 +290,9 @@ defineExpose(exportObject);
                 onFocus: focusBlockOnFocus,
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
+                onKeyUp: focusBlockOnKeyUp,
                 onCustomEvent: focusBlockOnCustomEvent,
-                onDispatchKeyDown
+                onDispatchKeyDown,
               }"
             >
               <div
@@ -286,6 +315,12 @@ defineExpose(exportObject);
                 }"
                 @click="item.onTap.value"
               >
+                <DebugFrame
+                  v-if="enableDebug"
+                  :width="item.templateInfo.width"
+                  :height="item.templateInfo.height"
+                  :sourceId="debugFrameSourceId"
+                ></DebugFrame>
                 <div
                   v-if="
                     !enableItemRenderBreak || item.mounted.value || itemRender
@@ -305,10 +340,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak 
-                    && placeHolderSetting 
-                    && !item.mounted.value
-                    && item.itemConfig.showSkeleton
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value &&
+                    item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -23,7 +23,7 @@
  *      name {string} 用于设置焦点的名称
  *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
  *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL
- *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合
+ *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合. 这些常量在FocusMoveType对象中, 需要import { FocusMoveType } from 'jsview'
                           NO_ADJUST: 无特殊处理
                           COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在水平滚动时生效
                           ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
@@ -84,7 +84,7 @@
                                           uid {string}: item的uid, 可以通过uid来设置焦点
                                           permanent {boolean}: 出去与是否保留
                                           enableTap {boolean}: 是否接受触控tap
-                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图
+                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图, 默认为true
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -105,6 +105,8 @@
  *      flingPageEdge {}
  *      disableClip {boolean} 取消显示范围的clipView
  *      touchFlag {int} 触控的开关, 0:关闭, 1:打开. 打开后支持drag, fling; item的tap则由measuresObject的enableTap控制
+ *      enableLongPress {boolean} 支持长按, 长按模式下, onkeyup时触发onclick, 长按触发后, onclik不触发
+ *      enableDebug {boolean} 显示debug用的item框
  
  *    methods:
         getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
@@ -215,7 +217,10 @@
         setSensorSensitivity
           @description 触控模式下, 设置运动回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低
           @params {number} sensitivity 敏感度, 等于0时关闭触控的移动监听
-                
+        getItemLayoutInfo
+          @description 获取 item 的布局位置信息, index对应的item不存在时, 返回null
+          @params {number} index item 的 index
+          @return {object} {left: number, top: number, width: number, height: number} | null
   slots:
     renderItem: 该slot用于描画每个单元格
     background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
@@ -246,7 +251,13 @@
                 }
  *    onItemEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
  *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册 item 的回调，回调函数有
-                onFocus， onBlur， onClick, onWidgetEdge
+                onFocus: widget获焦状态下, item获焦的回调
+                onBlur: widget获焦状态下, item失焦的回调
+                onGaze: item获焦的回调, 无论widget是否为获焦状态
+                onIgnore: itemh失焦的回调, 无论widget是否为获焦状态
+                onClick: item点击的回调
+                onWidgetEdge: 到达边缘的回调
+                onLongPress: item长按的回调
  * 
  * Q: 如何进行布局，定制每个格的尺寸？
  * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
@@ -275,7 +286,14 @@
 -->
 
 <script setup>
-import { ref, shallowRef, computed, reactive, onMounted } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 import { setup } from "./MetroWidgetSetup";
 import SlotComponent from "./SlotComponent.vue";
 import {
@@ -286,6 +304,8 @@ import {
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+import DebugFrame from "./DebugFrame.vue";
+import { createCanvasText } from "./DebugTools.ts";
 
 const props = defineProps({
   padding: {
@@ -421,6 +441,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  enableLongPress: {
+    type: Boolean,
+    default: false,
+  },
+  enableDebug: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -455,6 +483,7 @@ const {
   focusBlockOnFocus,
   focusBlockOnBlur,
   focusBlockOnKeyDown,
+  focusBlockOnKeyUp,
   focusBlockOnCustomEvent,
   _onFocusableItemEdge,
   exportObject,
@@ -462,7 +491,7 @@ const {
   onTouchRelease,
   currentFocusIndex,
   modeForExport,
-  onDispatchKeyDown
+  onDispatchKeyDown,
 } = setup(
   props,
   itemRender,
@@ -478,6 +507,14 @@ const {
   "common"
 );
 
+let debugFrameSourceId = "";
+let debugFrameSourceReleaseHandler = null;
+if (props.enableDebug) {
+  const sourceInfo = createCanvasText(20);
+  debugFrameSourceId = sourceInfo.sourceId;
+  debugFrameSourceReleaseHandler = sourceInfo.releaseHandler;
+}
+
 onMounted(() => {
   if (onTouchRelease) {
     touchDiv.value.jsvSetTapListener(
@@ -491,6 +528,14 @@ onMounted(() => {
   }
 });
 
+onBeforeUnmount(() => {
+  if (props.enableDebug) {
+    debugFrameSourceReleaseHandler?.();
+    debugFrameSourceReleaseHandler = null;
+    debugFrameSourceId = "";
+  }
+});
+
 defineExpose(exportObject);
 </script>
 
@@ -537,6 +582,7 @@ defineExpose(exportObject);
                 onFocus: focusBlockOnFocus,
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
+                onKeyUp: focusBlockOnKeyUp,
                 onCustomEvent: focusBlockOnCustomEvent,
                 onDispatchKeyDown,
               }"
@@ -561,6 +607,12 @@ defineExpose(exportObject);
                 }"
                 @click="item.onTap.value"
               >
+                <DebugFrame
+                  v-if="enableDebug"
+                  :width="item.templateInfo.width"
+                  :height="item.templateInfo.height"
+                  :sourceId="debugFrameSourceId"
+                ></DebugFrame>
                 <div
                   v-if="
                     !enableItemRenderBreak || item.mounted.value || itemRender
@@ -582,10 +634,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak 
-                    && placeHolderSetting 
-                    && !item.mounted.value
-                    && item.itemConfig.showSkeleton
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value &&
+                    item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,