@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -27,7 +27,7 @@
                           ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
                           COLUMN_FIND_NEAR: 一列中没有下一个元素时是否跳转到相邻列
                           ROW_FIND_NEAR: 一行中没有下一个元素时是否跳转到相邻行
-
+ *      keepTraceRange { number } 可视区域前后多少屏的item在移出可视范围后不释放(默认移出可视区域的item会被释放)
  *      initFocusId {int} 初始焦点，默认为0
  *      slideSetting {SlideSetting} 页面滑动的设置, 目前SlideSetting有三个子类, 具体见 WidgetCommon 中的说明
                                     WholePageSlide
@@ -44,6 +44,7 @@
  *      placeHolderSetting {Object} item描画可打断时, 显示的占位符
                                     {
                                       backgroundColor: 纯色占位符
+                                      focusBackgroundColor: 获焦时的颜色
                                       borderRadius: 占位符圆角设置
                                       gap: 占位符之间的gap
                                     }
@@ -83,7 +84,6 @@
                                 visibleRange: 可视区域大小(不含padding)
                                 totalSize: 所有item的总长
  *
- *      enableTouch {boolean} 支持触控
  *      loadAll {boolean} 加载不显示的view，触控场景使用
  *      flingPageWidth {}
  *      flingPageEdge {}
@@ -172,10 +172,14 @@
                                      获取当前焦点信息，id 为在可获得焦点元素列表中的索引，index 为在所有元素列表中的索引
                   slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
                            滚动到指定位置，注意这个位置是 item 的布局坐标，另外当某些item需要接管滚动时，itemConfig中takeOverSlide要为true。
-                  updateItemSize: {(index: number, newSize: {width: number, height: number}, anchor: number, animInfo: {duration: number, onEnd: Function}) => void} 更新item的尺寸, 目前仅在list模式下可用.
+                  updateItemSize: {(index: number, newSize: {width: number, height: number}, animInfo: {anchor: number, duration: number, onEnd: Function}) => void} 更新item的尺寸, 目前仅在list模式下可用.
                           params:
                             index: 更新item的index,
-                            anchor: item大小变化时不动点的位置, 值为0-1
+                            newSize: 新的尺寸
+                            animInfo: 动画设置
+                              anchor: 缩放锚点
+                              duration: 动画时长(毫秒)
+                              onEnd: 动画结束回调
 
                 }
  *    onItemEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
@@ -204,16 +208,19 @@
  * A: 焦点处理: item内的元素需要在注册的onFocus和onBlue回调中管理焦点. 即在onFocus时把焦点设置到内部的可获焦节点;
       onBlur时将焦点给回父MetroWidget, 注意此时是焦点树上的子节点往父节点切换, 此时为了把子节点blur掉, 
       requestFocus函数需要传递一个false参数
+ * 注意点:
+ *    1. MetroWidget中存在一些处理依赖vue的callback执行顺序, 因此涉及更改MetroWidget状态的处理不要在watchPostEffect中调用
 -->
 
 <script setup>
 import { ref, shallowRef, computed } from "vue";
-import { setup, RENDER_ITEM_BREAK_KEY } from "./MetroWidgetSetup";
+import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
   HORIZONTAL,
   SlideSetting,
   SeamlessSlide,
+  RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
 
 const props = defineProps({
@@ -260,10 +267,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  enableTouch: {
-    type: Boolean,
-    default: false,
-  },
   flingPageWidth: {
     type: Number,
     default: -1,
@@ -272,9 +275,6 @@ const props = defineProps({
     type: Number,
     default: 1 / 4,
   },
-  dispatcher: {
-    type: Object,
-  },
   measures: {
     type: Function,
     required: true,
@@ -354,20 +354,26 @@ const props = defineProps({
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
-const touchContainerW = ref(0);
-const touchContainerH = ref(0);
 const itemRender = ref(!props.enableItemRenderBreak);
 const locateDiv = shallowRef(null);
 const renderData = shallowRef([]);
 const slideDiv = shallowRef(null);
 const slideDivLeft = ref(0);
 const slideDivTop = ref(0);
-const itemResizeSlideDiv = shallowRef(null);
-const itemResizeSlideLeft = ref(0);
-const itemResizeSlideTop = ref(0);
 const focusNode = shallowRef(null);
 const pageUpdateToken = ref(0);
 
+const normalizedPlaceHolder = computed(() => {
+  return {
+    gap: props.placeHolderSetting.gap ?? 0,
+    borderRadius: props.placeHolderSetting.borderRadius ?? 0,
+    backgroundColor: props.placeHolderSetting.backgroundColor,
+    focusBackgroundColor:
+      props.placeHolderSetting.focusBackgroundColor ??
+      props.placeHolderSetting.backgroundColor,
+  };
+});
+
 const {
   widgetRectInfo,
   focusBlockOnFocus,
@@ -378,24 +384,18 @@ const {
   exportObject,
 } = setup(
   props,
-  touchContainerW,
-  touchContainerH,
   itemRender,
   locateDiv,
   renderData,
   slideDiv,
   slideDivLeft,
   slideDivTop,
-  itemResizeSlideDiv,
-  itemResizeSlideLeft,
-  itemResizeSlideTop,
   focusNode,
   pageUpdateToken,
   "common"
 );
 
 defineExpose(exportObject);
-
 </script>
 
 <template>
@@ -416,15 +416,12 @@ defineExpose(exportObject);
     >
       <div
         id="slideDiv"
-        key="touchcontainer"
+        key="slideDiv"
         ref="slideDiv"
         :style="{
           left: slideDivLeft,
           top: slideDivTop,
-          width: touchContainerW,
-          height: touchContainerH,
         }"
-
       >
         <div>
           <slot name="background"></slot>
@@ -441,56 +438,50 @@ defineExpose(exportObject);
             }"
           >
             <div
-              id="itemResizeSlide"
-              key="itemResizeSlide"
-              ref="itemResizeSlideDiv"
+              v-for="(item, index) in renderData"
+              :key="pageUpdateToken + '_' + item.index"
+              :ref="item.divRef"
               :style="{
-                left: itemResizeSlideLeft,
-                top: itemResizeSlideTop,
+                left: item.templateInfo.left,
+                top: item.templateInfo.top,
+                width: item.templateInfo.width,
+                height: item.templateInfo.height,
+                zIndex: item.renderStyle.zIndex,
               }"
             >
               <div
-                v-for="(item, index) in renderData"
-                :key="pageUpdateToken + '_' + item.index"
-                :ref="item.divRef"
-                :style="{
-                  ...item.renderStyle,
-                }"
+                v-if="
+                  !enableItemRenderBreak || item.mounted.value || itemRender
+                "
+                :key="renderBreakKey"
+                :ref="item.slotRef"
+                :id="`${name}_${index}`"
               >
-                <div
-                  v-if="!enableItemRenderBreak || item.mounted.value || itemRender"
-                  :key="renderBreakKey"
-                  :ref="item.slotRef"
-                  :id="`${name}_${index}`"
-                >
-                  <slot
-                    name="renderItem"
-                    :key="renderBreakKey"
-                    :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 -
-                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
-                    height:
-                      item.renderStyle.height -
-                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
-                    backgroundColor: placeHolderSetting.backgroundColor,
-                    borderRadius: placeHolderSetting.borderRadius,
-                  }"
-                ></div>
+                <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:
+                    exportObject.getCurrentFocusIndex() == item.index
+                      ? normalizedPlaceHolder.focusBackgroundColor
+                      : normalizedPlaceHolder.backgroundColor,
+                  borderRadius: normalizedPlaceHolder.borderRadius,
+                }"
+              ></div>
             </div>
           </jsv-focus-block>
         </div>