@shijiu/jsview-vue 2.2.128 → 2.2.373

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

@@ -5,15 +5,15 @@ import {
   JsvFocusHubApi,
   ROOT_HUB_PROVIDE_NAME,
   HUB_NS_PROVIDE_NAME
-} from "./JsvFocusHub.ts";
+} from "./JsvFocusHub";
 import { inject } from "vue";
 
-const useFocusHub = (withNameSpace) => {
+const useFocusHub = (withNameSpace: any) => {
   if (withNameSpace) {
-    let nameSpace = inject(HUB_NS_PROVIDE_NAME); // nameSpace变更由JsvFocusBlock设置namespace时变更
+    let nameSpace: any = inject(HUB_NS_PROVIDE_NAME); // nameSpace变更由JsvFocusBlock设置namespace时变更
     if (nameSpace && nameSpace.length > 0) {
       // 使用带有namespace的hub
-      return new JsvFocusHubApi((inject(ROOT_HUB_PROVIDE_NAME)).getOrigin().wrapWithNameSpace(nameSpace));
+      return new JsvFocusHubApi((inject(ROOT_HUB_PROVIDE_NAME) as any).getOrigin().wrapWithNameSpace(nameSpace));
     }
   }
 
@@ -22,9 +22,16 @@ const useFocusHub = (withNameSpace) => {
 };
 
 export class JsvFocusManager {
-  constructor() { }
+  // #aliasMap = {}
+  private $_appMount: any = undefined;
+  private $_topFDiv: any = undefined;
+  private $_autoSearchFocus: boolean = false;
+
+  constructor(config: any) {
+    this.$_autoSearchFocus = config.autoSearchFocus;
+  }
 
-  install(app, ...options) {
+  install(app: any, ...options: any) {
     console.log("JsvFocusManager install");
     if (typeof options[0] !== "string") {
       throw new Error(
@@ -91,15 +98,16 @@ export class JsvFocusManager {
   //   focusNode.requestFocus(exact);
   // }
 
-  $_hookMount(app, rootNodeId) {
+  $_hookMount(app: any, rootNodeId: any) {
     rootNodeId = rootNodeId.replace("#", "");
-    this.$_topFDiv = document.jsvInitFDivRoot(rootNodeId);
+    this.$_topFDiv = (document as any).jsvInitFDivRoot(rootNodeId);
+    this.$_topFDiv.enableAutoSearchFocus(this.$_autoSearchFocus);
     this.$_appMount = app.mount.bind(app);
 
     return this.$_doAppMount.bind(this);
   }
 
-  $_doAppMount(rootContainer) {
+  $_doAppMount(rootContainer: any) {
     // 调用app原有的mount函数
     const rootComponent = this.$_appMount(rootContainer);
     // console.log('FocusManager: do mount')
@@ -109,14 +117,25 @@ export class JsvFocusManager {
 
     return rootComponent;
   }
-
-  // #aliasMap = {}
-  $_appMount = undefined;
-  $_topFDiv = undefined;
 }
 
-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/Dispatcher.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-09-22 16:50:09
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-01-26 10:17:47
+ * @Description: file content
+ */
+import { BaseDispatcher } from "../WidgetCommon";
+
+class Dispatcher extends BaseDispatcher {
+  public static Type = {
+    setFocusId: Symbol("setFocusId"),
+    updateItem: Symbol("updateItem"),
+    slideToItem: Symbol("slideTo"),
+    setEnterFocusId: Symbol("setEnterFocusId"),
+    setEnterFocusRect: Symbol("setEnterFocusRect"),
+  };
+}
+export { Dispatcher as SWidgetDispatcher };
+export default Dispatcher;

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -1,8 +1,8 @@
 <!--
-  只显示单列/行的MetroWidget
+ * @file 只显示单列/行的MetroWidget
 -->
 <script setup>
-import { ref, shallowRef, computed, reactive } from "vue";
+import { ref, shallowRef, computed, reactive, onMounted } from "vue";
 import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
@@ -11,6 +11,7 @@ import {
   SeamlessSlide,
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 
 const props = defineProps({
   padding: {
@@ -186,6 +187,7 @@ const {
   onTouchDown,
   onTouchRelease,
   currentFocusIndex,
+  onDispatchKeyDown
 } = setup(
   props,
   itemRender,
@@ -200,10 +202,20 @@ const {
   touchDivSize,
   "list"
 );
-let touchDivVOn = {};
-if (onTouchRelease) {
-  touchDivVOn["jsv-touchend"] = onTouchRelease;
-}
+
+onMounted(() => {
+  if (onTouchRelease) {
+    touchDiv.value.jsvSetTapListener(
+      {
+        onTouchEnd: onTouchRelease,
+      },
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    );
+  }
+});
+
 defineExpose(exportObject);
 </script>
 
@@ -238,7 +250,6 @@ defineExpose(exportObject);
             width: touchDivSize.width,
             height: touchDivSize.height,
           }"
-          v-on="touchDivVOn"
         >
           <div>
             <slot name="background"></slot>
@@ -252,11 +263,18 @@ defineExpose(exportObject);
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
                 onCustomEvent: focusBlockOnCustomEvent,
+                onDispatchKeyDown
               }"
             >
               <div
                 v-for="(item, index) in renderData"
-                :key="pageUpdateToken + '_' + item.index"
+                :key="
+                  pageUpdateToken +
+                  '_' +
+                  item.index +
+                  '-' +
+                  item.renderKey.value
+                "
                 :ref="item.divRef"
                 data-jsv-vw-test-rect="1"
                 :style="{
@@ -287,9 +305,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value
+                    enableItemRenderBreak 
+                    && placeHolderSetting 
+                    && !item.mounted.value
+                    && item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -5,6 +5,8 @@
 -->
 
 <!--
+ * @file 
+ *
  * 【界面概述】
  * 展示MetroWidget控件的用法
  *
@@ -82,6 +84,7 @@
                                           uid {string}: item的uid, 可以通过uid来设置焦点
                                           permanent {boolean}: 出去与是否保留
                                           enableTap {boolean}: 是否接受触控tap
+                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -92,10 +95,6 @@
                                             "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
                                           }
         onScroll {function} 滚动时的回调 (visibleStart, visibleRange, totalSize) => {}
-                                (TBD: 
-                                  当前版本暂时不支持触控过程的实时回调，
-                                  由于回调js会严重拖慢性能，所以也不会设计实时回调，
-                                  关于边缘的拖动进度展示，将来会有额外组件支撑)
                                 visibleStart: 可视区域的起点
                                 visibleRange: 可视区域大小(不含padding)
                                 totalSize: 所有item的总长
@@ -156,7 +155,21 @@
                                             lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
                                           }
         refreshData
-          @description 刷新数据, 只有存在provideData时才会生效. refresh时对比的array里的object, 所以可以建一个新的array, 只要保证数据成员还是之前的那个object就行
+          @description  刷新数据, 只有存在provideData时才会生效
+                        当refresh时，根据下面的数据对比规则找出变化的数据
+                        refresh时的对比逻辑:
+                          1. 对比array里的object是否是同一个对象
+                          2. 对比array里的jsvKey字段, 若一致则认为该数据未改变，即使object不相同
+                        发现array中存在数据变化时，会如下的场景进行处理
+                          场景1: array内部的数据变化了，无论末尾有没有增加: 变化的项目会重新触发measure, 
+                                若measure返回尺寸变化则调用所有项目measure重做布局  
+                                若measure返回尺寸未变化，则仅对变化项目的div进行key的调整来触发item的remount
+                          场景2: array内部未变化，仅array末尾新增内容: 对末尾内容的项目做measure，布局进行追加处理，原布局内容保持(节省性能)
+                        特别说明: jsvKey的使用方法提示
+                          1. 用lastModify设置jsvKey，并将所有的item设置成同一个jsvKey，后续局部更新项目的jsvKey代表的lastModify
+                          2. 后台运营对于素材是只新增不改动的策略时，用素材的id来命名jsvKey，array中间位置素材变化的时候，
+                             更换jsvKey，以达到局部更新的目的，防止全体更新，从而提高响应的性能
+                        
           @params {boolean} forceUpdate 是否强制刷新
         getVisibleItems
           @description 获取可视item的列表信息
@@ -179,6 +192,8 @@
                                                   3. EdgeDirection
         getCustomerDataSize
           @description 获取用户数据长度
+        getCurrentFocusIndex
+          @description 获取当前获焦item的index
         setZIndex
           @description 设置item的zIndex
           @params {int} index: item的index
@@ -195,7 +210,12 @@
         setSlideSetting
           @description 设置slideSetting
           @params { SlideSetting | null } setting 滚动设置, 为null时使用props.slideSetting
-            
+        cancelDelayLoad
+          @description 取消延迟加载首屏以外内容
+        setSensorSensitivity
+          @description 触控模式下, 设置运动回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低
+          @params {number} sensitivity 敏感度, 等于0时关闭触控的移动监听
+                
   slots:
     renderItem: 该slot用于描画每个单元格
     background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
@@ -265,6 +285,8 @@ import {
   SeamlessSlide,
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
+import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+
 const props = defineProps({
   padding: {
     type: Object,
@@ -440,6 +462,7 @@ const {
   onTouchRelease,
   currentFocusIndex,
   modeForExport,
+  onDispatchKeyDown
 } = setup(
   props,
   itemRender,
@@ -454,10 +477,19 @@ const {
   touchDivSize,
   "common"
 );
-let touchDivVOn = {};
-if (onTouchRelease) {
-  touchDivVOn["jsv-touchend"] = onTouchRelease;
-}
+
+onMounted(() => {
+  if (onTouchRelease) {
+    touchDiv.value.jsvSetTapListener(
+      {
+        onTouchEnd: onTouchRelease,
+      },
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_FLING_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    );
+  }
+});
 
 defineExpose(exportObject);
 </script>
@@ -493,7 +525,6 @@ defineExpose(exportObject);
             width: touchDivSize.width,
             height: touchDivSize.height,
           }"
-          v-on="touchDivVOn"
         >
           <div>
             <slot name="background"></slot>
@@ -507,11 +538,18 @@ defineExpose(exportObject);
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
                 onCustomEvent: focusBlockOnCustomEvent,
+                onDispatchKeyDown,
               }"
             >
               <div
                 v-for="(item, index) in renderData"
-                :key="pageUpdateToken + '_' + item.index"
+                :key="
+                  pageUpdateToken +
+                  '_' +
+                  item.index +
+                  '-' +
+                  item.renderKey.value
+                "
                 :ref="item.divRef"
                 data-jsv-vw-test-rect="1"
                 :style="{
@@ -544,9 +582,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value
+                    enableItemRenderBreak 
+                    && placeHolderSetting 
+                    && !item.mounted.value
+                    && item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,