@shijiu/jsview-vue 2.2.373 → 2.3.0

package/bin/types/{JsViewVueWidget → utils/JsViewVueWidget}/JsvVisibleSensor/JsvVisibleSensor.vue.d.ts

@@ -1,28 +1,3 @@
-/** 
- + @file {@link file://./../../../../utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue}
- */
-
-/**
-* @file
-*
-* 【模块 export 内容】
-* JsvVisibleSensor: 可视区域监控器
-* props说明:
-*     horizonShown  {number}  (可选, 可响应式, 默认1.0完全露出)横轴百分比区域完全显示时(左边或右边完全露出，仅中间段判断会失效),
-*                             横轴切换到显示状态，否则为不可视状态
-*     verticalShown  {number} (可选, 可响应式)纵轴百分比区域完全显示时(上边或下边完全露出，仅中间段判断会失效),
-*                             纵轴切换到显示状态，否则为不可视状态
-*     left   {number}  (可选, 可响应式)可视检测区域的left
-*     top   {number}  (可选, 可响应式)可视检测区域的top
-*     width   {number}  (可选, 可响应式)可视检测区域的width
-*     height   {number}  (可选, 可响应式)可视检测区域的height
-*
-*     container {div reference}  (可选, 可响应式)子区域参照，若为null，则认为检测可视区域为全屏幕
-*
-*     callback {function} (必须, 可响应式)可视变化时的回调处理, 参数
-*               (old_horizantal_visible, new_horizantal_visible, old_vertical_visible, new_vertical_visible)
-*/
-
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -43,14 +18,14 @@ declare const _default: {
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {
             $props: {
-                readonly left?: number | undefined;
                 readonly top?: number | undefined;
+                readonly left?: number | undefined;
                 readonly enable?: boolean | undefined;
-                readonly height?: number | undefined;
                 readonly width?: number | undefined;
-                readonly container?: Record<string, any> | undefined;
+                readonly height?: number | undefined;
                 readonly horizonShown?: number | undefined;
                 readonly verticalShown?: number | undefined;
+                readonly container?: Record<string, any> | undefined;
                 readonly callback?: Function | undefined;
             };
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
@@ -75,14 +50,14 @@ declare const _default: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{
         $props: {
-            readonly left?: number | undefined;
             readonly top?: number | undefined;
+            readonly left?: number | undefined;
             readonly enable?: boolean | undefined;
-            readonly height?: number | undefined;
             readonly width?: number | undefined;
-            readonly container?: Record<string, any> | undefined;
+            readonly height?: number | undefined;
             readonly horizonShown?: number | undefined;
             readonly verticalShown?: number | undefined;
+            readonly container?: Record<string, any> | undefined;
             readonly callback?: Function | undefined;
         };
     }> & {} & import("vue").ComponentCustomProperties & {};
@@ -91,14 +66,14 @@ declare const _default: {
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {
     $props: {
-        readonly left?: number | undefined;
         readonly top?: number | undefined;
+        readonly left?: number | undefined;
         readonly enable?: boolean | undefined;
-        readonly height?: number | undefined;
         readonly width?: number | undefined;
-        readonly container?: Record<string, any> | undefined;
+        readonly height?: number | undefined;
         readonly horizonShown?: number | undefined;
         readonly verticalShown?: number | undefined;
+        readonly container?: Record<string, any> | undefined;
         readonly callback?: Function | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/bin/types/{JsViewVueWidget → utils/JsViewVueWidget}/JsvVisibleSensor/index.d.ts

@@ -1,7 +1,3 @@
-/** 
- + @file {@link file://./../../../../utils/JsViewVueWidget/JsvVisibleSensor/index.js}
- */
-
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -22,14 +18,14 @@ declare const _default: {
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {
             $props: {
-                readonly left?: number | undefined;
                 readonly top?: number | undefined;
+                readonly left?: number | undefined;
                 readonly enable?: boolean | undefined;
-                readonly height?: number | undefined;
                 readonly width?: number | undefined;
-                readonly container?: Record<string, any> | undefined;
+                readonly height?: number | undefined;
                 readonly horizonShown?: number | undefined;
                 readonly verticalShown?: number | undefined;
+                readonly container?: Record<string, any> | undefined;
                 readonly callback?: Function | undefined;
             };
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
@@ -54,14 +50,14 @@ declare const _default: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{
         $props: {
-            readonly left?: number | undefined;
             readonly top?: number | undefined;
+            readonly left?: number | undefined;
             readonly enable?: boolean | undefined;
-            readonly height?: number | undefined;
             readonly width?: number | undefined;
-            readonly container?: Record<string, any> | undefined;
+            readonly height?: number | undefined;
             readonly horizonShown?: number | undefined;
             readonly verticalShown?: number | undefined;
+            readonly container?: Record<string, any> | undefined;
             readonly callback?: Function | undefined;
         };
     }> & {} & import("vue").ComponentCustomProperties & {};
@@ -70,14 +66,14 @@ declare const _default: {
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {
     $props: {
-        readonly left?: number | undefined;
         readonly top?: number | undefined;
+        readonly left?: number | undefined;
         readonly enable?: boolean | undefined;
-        readonly height?: number | undefined;
         readonly width?: number | undefined;
-        readonly container?: Record<string, any> | undefined;
+        readonly height?: number | undefined;
         readonly horizonShown?: number | undefined;
         readonly verticalShown?: number | undefined;
+        readonly container?: Record<string, any> | undefined;
         readonly callback?: Function | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/bin/types/{JsViewVueWidget → utils/JsViewVueWidget}/index.d.ts

@@ -1,7 +1,3 @@
-/** 
- + @file {@link file://./../../../utils/JsViewVueWidget/index.js}
- */
-
 export * from "./JsvFreeMoveActor";
 export * from "./JsvFlexCell";
 export * from "./JsvSpriteAnim";
@@ -10,8 +6,8 @@ export * from "./JsvClipDiv";
 export * from "./JsvDriftScope";
 export { default as JsvApic } from "./JsvApic/JsvApic";
 export { default as JsvApic2 } from "./JsvApic/JsvApic2";
-export { default as JsvQrcode } from "./JsvQrcode";
-export { default as JsvSpray } from "./JsvSpray";
+export { default as JsvQrcode } from "./JsvQrcode/JsvQrcode.vue";
+export { default as JsvSpray } from "./JsvSpray/JsvSpray.vue";
 export { default as JsvSwiper } from "./JsvSwiper";
 export { default as JsvSwiper3D } from "./JsvSwiper3D";
 export { default as JsvVisibleSensor } from "./JsvVisibleSensor";
@@ -36,6 +32,8 @@ export { JsvMindMap } from "./JsvMindMap";
 export { default as JsvFragShaderView } from "./JsvFragShaderView";
 export { default as JsvTouchModeSwitcher } from "./JsvTouchModeSwitcher.vue";
 export { default as JsvDragBox } from "./JsvDragBox/JsvDragBox.vue";
+export { default as Jsv3dDiv } from "./Jsv3dDiv.vue";
+export { default as Jsv3dStage } from "./Jsv3dStage.vue";
 import JsvNativeSharedDiv from "./JsvNativeSharedDiv.vue";
 export { JsvNativeSharedDiv as JsvTransparentDiv, JsvNativeSharedDiv };
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";

package/bin/types/{index.d.ts → utils/index.d.ts}

@@ -1,7 +1,3 @@
-/** 
- + @file {@link file://./../../utils/index.js}
- */
-
 export * from "./JsViewEngineWidget";
 export * from "./JsViewPlugin";
 export * from "./JsViewVueTools";

package/index.d.ts

@@ -4,8 +4,8 @@
 
 export {
   MetroWidget
-} from "./bin/types/index";
+} from "./bin/types/utils/index";
 
 // 二选一 "./bin" 用于执行打包的js，"./utils" 用于调试
-export * from "./bin/types/index";
+export * from "./bin/types/utils/index";
 // export * from "./utils";

package/package.json

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

package/tools/jsview-vue-build.mjs

@@ -99,11 +99,12 @@ async function main(argv)
 
   if(!argv.withoutNpmInstall || fs.existsSync(npmInstalledFlag) == false) {
     const registry = getNpmRegistry();
+    const jsviewPostInstall = `${options.jsviewVueDir}/node_modules/@shijiu/jsview/tools/jsview-post-install.mjs`;
     fs.rmSync(`${options.jsviewVueDir}/node_modules`, { recursive: true, force: true });
     batchCommand = [
       `npm install --registry=${registry}`,
       `npm install --registry=${registry} --force --no-save ${noSavePackages}`,
-      `node ${options.jsviewVueDir}/node_modules/@shijiu/jsview/tools/jsview-post-install.mjs --framework=vue`,
+      `node ${jsviewPostInstall} --framework=vue --skip-check-npmcmd`,
     ];
   }
   batchCommand = [
@@ -122,7 +123,7 @@ async function main(argv)
 
   if(!argv.withoutTsDeclare) {
     batchCommand = [
-      `${options.jsviewVueDir}/node_modules/.bin/vue-tsc --project ${options.jsviewVueDir}/tools/config/tsconfig.json`,
+      `${options.jsviewVueDir}/node_modules/.bin/vue-tsc --project ${options.jsviewVueDir}/tsconfig.json`,
     ];
     fs.rmSync(options.jsviewVueBinTypesDir, { recursive: true, force: true });
     for(const command of batchCommand) {

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    // "checkJs": true,
+    "declaration": true,
+    "declarationDir": "bin/types",
+    "emitDeclarationOnly": true,
+    "module": "es2022",
+    "moduleResolution": "node",
+    "strict": true,
+    "target": "es2022",
+    "composite": true,
+    "useDefineForClassFields": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "tsBuildInfoFile": "node_modules/.cache/tsconfig.tsbuildinfo"
+  },
+  "include": [
+    "utils",
+    "utils/index.js"
+  ],
+}

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/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,