@shijiu/jsview-vue 0.9.684 → 0.9.783

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-07 15:51:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 11:17:00
  * @Description: file content
 -->
 
@@ -23,14 +23,20 @@
  *      name {string} 用于设置焦点的名称
  *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
  *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL
- *      loopFocus {boolean} 焦点到边界后自动转到下一行，默认false
+ *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合
+                          NO_ADJUST: 无特殊处理
+                          COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在水平滚动时生效
+                          ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
+                          COLUMN_FIND_NEAR: 一列中没有下一个元素时是否跳转到相邻列
+                          ROW_FIND_NEAR: 一行中没有下一个元素时是否跳转到相邻行
+
  *      initFocusId {int} 初始焦点，默认为0
  *      slideSetting {SlideSetting} 页面滑动的设置, 目前SlideSetting有三个子类, 具体见 WidgetCommon 中的说明
                                     WholePageSlide
                                       @description 整页滚动的设置类
                                       @constructor {Object} {speed, easing, boundProtect}
                                     SeamlessSlide
-                                      @description 平滑滚动的设置类
+                                      @description 无缝滚动的设置类
                                       @constructor {Object} {startPercent, endPercent, speed, easing, boundProtect}
                                     FixPositionSlide
                                       @description 固定位置滚动的设置类
@@ -80,6 +86,7 @@
  *      loadAll {boolean} 加载不显示的view，触控场景使用
  *      flingPageWidth {}
  *      flingPageEdge {}
+ *      disableClip {boolean} 取消显示范围的clipView
  *    methods:
         getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
 
@@ -364,7 +371,7 @@ const props = defineProps({
   slideSetting: {
     type: SlideSetting,
     default() {
-      return new SeamlessSlide(0.2, 0.8);
+      return new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });
     },
   },
   layoutType: {
@@ -397,6 +404,14 @@ const props = defineProps({
   onScroll: {
     type: Function,
   },
+  focusMoveType: {
+    type: Number,
+    default: 0,
+  },
+  disableClip: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 let dataUpdateToken = ref(0);
@@ -423,7 +438,7 @@ let itemRender = ref(!props.enableItemRenderBreak);
 let permanentItemList = [];
 let preUpdateVisibleStart = 0;
 let mounted = false;
-let focusNode = ref(null);
+let focusNode = shallowRef(null);
 let pageRange = vertical ? props.height : props.width;
 
 let slideLock = false;
@@ -464,8 +479,8 @@ let visibleInfo = {
   },
 };
 
-let locateDiv = ref(null);
-let slideDiv = ref(null);
+let locateDiv = shallowRef(null);
+let slideDiv = shallowRef(null);
 let renderData = shallowRef([]);
 let slideDivLeft = ref(0);
 let slideDivTop = ref(0);
@@ -483,7 +498,7 @@ const _onFocusChange = (id) => {
 const _getCurrentId = () => {
   return {
     id: focusId,
-    index: templateParser.FocusIdToIndex(focusId),
+    index: templateParser.IdToIndex(focusId),
   };
 };
 
@@ -533,24 +548,26 @@ const _dispatchEvent = (event) => {
 };
 
 const onItemClick = (index) => {
-  if (isFocus && innerData[index].callbacks.callable("onClick")) {
+  if (isFocus && innerData[index]?.callbacks.callable("onClick")) {
     innerData[index].callbacks.onClick();
   }
 };
 
 const onItemBlur = (index) => {
-  if (isFocus && innerData[index].callbacks.callable("onBlur")) {
+  if (isFocus && innerData[index]?.callbacks.callable("onBlur")) {
     innerData[index].callbacks.onBlur();
   }
 };
 
 const onItemFocus = (index, rect) => {
   if (isFocus) {
-    _itemOnFocusSideEffect(innerData[index], rect);
-    if (innerData[index].callbacks.callable("onFocus")) {
-      innerData[index].callbacks.onFocus(rect);
-    } else {
-      callFocusAfterUpdate = true;
+    if (innerData[index]) {
+      _itemOnFocusSideEffect(innerData[index], rect);
+      if (innerData[index].callbacks.callable("onFocus")) {
+        innerData[index].callbacks.onFocus(rect);
+      } else {
+        callFocusAfterUpdate = true;
+      }
     }
   }
 };
@@ -563,7 +580,7 @@ const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
   let next_focus_item = templateParser.GetItemById(id);
   if (next_focus_item) {
     if (needSlide) {
-      slideToItem(templateParser.FocusIdToIndex(id), doAnim);
+      slideToItem(templateParser.IdToIndex(id), doAnim);
     }
     let unlock = null;
     if (extraSetting) {
@@ -589,8 +606,8 @@ const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
     };
     _updateBlurItem();
     _updateFocusItem();
-    onItemBlur(templateParser.FocusIdToIndex(preFocusId));
-    onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+    onItemBlur(templateParser.IdToIndex(preFocusId));
+    onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
     unlock?.();
   }
 };
@@ -797,7 +814,7 @@ const refreshData = (force_update) => {
   dataUpdateToken.value++;
   pageUpdater.apply();
   _updateFocusItem();
-  onItemFocus(templateParser.FocusIdToIndex(focusId), null);
+  onItemFocus(templateParser.IdToIndex(focusId), null);
   if (needSlide) {
     _slideTo(visibleInfo.start, null);
   } else if (need_update_content) {
@@ -1053,7 +1070,7 @@ const onKeyDown = (ev) => {
       _moveToNext(horizontal_direction, vertical_direction);
       break;
     case 13:
-      onItemClick(templateParser.FocusIdToIndex(focusId));
+      onItemClick(templateParser.IdToIndex(focusId));
       break;
     default:
       //只接受上下左右确定键
@@ -1093,7 +1110,7 @@ const _onTemplateAdd = (item) => {
         this.slotMounted.value = true;
         if (callFocusAfterUpdate && this.data.id === focusId) {
           nextTick(() => {
-            onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+            onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
           });
           callFocusAfterUpdate = false;
         }
@@ -1198,7 +1215,9 @@ const _onCustomerEvent = (ev) => {
       yPos: item_layout.top,
       width: item_layout.width,
       height: item_layout.height,
-      index: templateParser.FocusIdToIndex(focusId),
+      centerYPos: Math.floor(item_layout.top + item_layout.height / 2),
+      centerXPos: Math.floor(item_layout.left + item_layout.width / 2),
+      index: templateParser.IdToIndex(focusId),
     };
 
     let cur_slide = _calculateVisibleStart(obj, direction);
@@ -1244,15 +1263,14 @@ const _moveToNext = (
   item_edge_rect
 ) => {
   let cur_focus_item = templateParser.GetItemById(focusId);
-  let next_item_id = templateParser.GetNextItem(
+  let next_focus_item = templateParser.GetNextItem(
     focusId,
     vertical_direction,
     horizontal_direction,
-    props.loopFocus
+    props.focusMoveType
   );
-  if (next_item_id >= 0) {
+  if (next_focus_item !== null) {
     preFocusId = focusId;
-    let next_focus_item = templateParser.GetItemById(next_item_id);
     templateItemAdder.tryAddItem(next_focus_item, 1);
     focusId = next_focus_item.id;
 
@@ -1261,8 +1279,7 @@ const _moveToNext = (
 
     let cur_visible_start = _calculateVisibleStart(next_focus_item, direction);
     if (
-      !innerData[templateParser.FocusIdToIndex(next_item_id)].itemConfig
-        ?.takeOverSlide &&
+      !innerData[templateParser.IdToIndex(focusId)].itemConfig?.takeOverSlide &&
       visibleInfo.start !== cur_visible_start
     ) {
       if (next_focus_item.doSlide) {
@@ -1284,7 +1301,7 @@ const _moveToNext = (
               1,
             visibleInfo.endWithPadding + props.keepTraceRange * pageRange
           ),
-          next_item_id,
+          next_focus_item.id,
           false,
           permanentItemList
         );
@@ -1294,7 +1311,7 @@ const _moveToNext = (
           templateParser,
           cur_visible_start,
           cur_visible_start + visibleInfo.range + visibleInfo.padding.end - 1,
-          next_item_id,
+          next_focus_item.id,
           false,
           permanentItemList
         );
@@ -1305,7 +1322,7 @@ const _moveToNext = (
     let rect;
     let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
     let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
-    if (item_edge_rect) {
+    if (item_edge_rect && item_edge_rect.rect) {
       item_edge_rect.rect.x += x_off_set;
       item_edge_rect.rect.y += y_off_set;
       rect = item_edge_rect;
@@ -1333,8 +1350,8 @@ const _moveToNext = (
     preEdgeRect = rect;
     _updateBlurItem();
     _updateFocusItem();
-    onItemBlur(templateParser.FocusIdToIndex(preFocusId));
-    onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+    onItemBlur(templateParser.IdToIndex(preFocusId));
+    onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
   } else {
     let x_off_set = props.direction === VERTICAL ? 0 : visibleInfo.start;
     let y_off_set = props.direction === VERTICAL ? visibleInfo.start : 0;
@@ -1358,7 +1375,7 @@ const _moveToNext = (
       height: cur_focus_item.height,
     };
     props.onEdge?.({ direction: edge, rect: rect });
-    innerData[templateParser.FocusIdToIndex(focusId)].callbacks.onWidgetEdge?.({
+    innerData[templateParser.IdToIndex(focusId)].callbacks.onWidgetEdge?.({
       direction: edge,
     });
   }
@@ -1384,9 +1401,17 @@ const _calculateVisibleStart = (target_item, direction) => {
       );
       break;
     case SlideSetting.Type.WHOLE_PAGE:
-      new_visible_start = templateParser.GetItem(target_item.pageHeadIndex)[
-        pos_key
-      ];
+      if (typeof target_item.pageHeadIndex == "undefined") {
+        //TODO 子控制滚动时whole page滚动
+        console.error(
+          "child controlled whole page slide type is not supported."
+        );
+      } else {
+        new_visible_start = templateParser.GetItem(target_item.pageHeadIndex)[
+          pos_key
+        ];
+      }
+
       break;
     case SlideSetting.Type.SEAMLESS:
       if (
@@ -1528,12 +1553,13 @@ const _onFocus = (params) => {
   focus_id = _ifValidEnterRect(enterFocusRect)
     ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
     : focus_id;
+
   preEdgeRect = enterFocusRect;
   focusId = focus_id;
   enterFocusId = -1;
   enterFocusRect = null;
   _updateFocusItem();
-  onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
   props.onFocus?.();
 };
 
@@ -1547,7 +1573,7 @@ const _onBlur = () => {
   }
   preFocusId = focusId;
   _updateBlurItem();
-  innerData[templateParser.FocusIdToIndex(preFocusId)].callbacks.onBlur();
+  innerData[templateParser.IdToIndex(preFocusId)].callbacks.onBlur();
 
   props.onBlur?.();
 };
@@ -1560,11 +1586,11 @@ const _onSlideEnd = (event) => {
 };
 
 const _updateFocusItem = () => {
-  _setZIndex(templateParser.FocusIdToIndex(focusId), innerData.length, true);
+  _setZIndex(templateParser.IdToIndex(focusId), innerData.length, true);
 };
 
 const _updateBlurItem = () => {
-  _setZIndex(templateParser.FocusIdToIndex(preFocusId), 0, false);
+  _setZIndex(templateParser.IdToIndex(preFocusId), 0, false);
 };
 
 const _updateFocusByDragInfo = (viewX, viewY) => {
@@ -1712,8 +1738,8 @@ const _onScroll = () => {
 const _updatePosition = (x, y, anim_info) => {
   if (slideLock) return;
   if (toRaw(slideDiv.value)) {
-    let pre_left = toRaw(slideDiv.value).style.left,
-      pre_top = toRaw(slideDiv.value).style.top;
+    let pre_left = slideDivLeft.value,
+      pre_top = slideDivTop.value;
     //jsvMaskView的位置更新时会被设置位0，因此不能通过ResetLayoutParams设置位置
     slideDivLeft.value = x;
     slideDivTop.value = y;
@@ -1734,7 +1760,9 @@ const _updatePosition = (x, y, anim_info) => {
       slide_animation.SetAnimationListener(
         new Forge.AnimationListener(anim_info.onstart, anim_info.onend, null)
       );
-      toRaw(slideDiv.value).jsvMaskView.StartAnimation(slide_animation);
+      toRaw(slideDiv.value)
+        .jsvGetProxyView(true)
+        .StartAnimation(slide_animation);
     }
     _onScroll();
   }
@@ -1742,7 +1770,7 @@ const _updatePosition = (x, y, anim_info) => {
 
 const _initRootTouch = () => {
   if (props.enableTouch && toRaw(slideDiv.value)) {
-    let view = toRaw(slideDiv.value).jsvMaskView;
+    let view = toRaw(slideDiv.value).jsvGetProxyView(true);
     var drag_setting = new Forge.DragSetting(
       dragDirection,
       20,
@@ -1759,7 +1787,7 @@ const _initItemViewTouch = (itemDivRef, index) => {
   if (props.enableTouch) {
     if (itemDivRef) {
       // 为view添加触控处理
-      let view = itemDivRef.jsvMaskView;
+      let view = itemDivRef.jsvGetProxyView(true);
       let dragSetting = new Forge.DragSetting(
         Forge.DragSetting.DIRECTION_DISABLE,
         20,
@@ -1808,6 +1836,7 @@ templateParser = _getTemplateParser(
   props.supportHistoryPath,
   props.layoutType
 );
+
 templateItemAdder = new TemplateItemAdder(
   templateParser,
   dataList,
@@ -1846,7 +1875,7 @@ slidePile = new Forge.RectArea(
 let init_focus_id = 0;
 let cur_visible_start = 0;
 
-if (typeof props.initFocusId == 'number') {
+if (typeof props.initFocusId == "number") {
   templateItemAdder.tryAddItemById(props.initFocusId);
   const item = templateParser.GetItemById(props.initFocusId);
   if (item) {
@@ -1884,7 +1913,7 @@ onMounted(() => {
     _slideTo(visibleInfo.start, null);
   }
 
-  onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+  onItemFocus(templateParser.IdToIndex(focusId), preEdgeRect);
 
   if (props.enableItemRenderBreak) {
     nextTick(() => {
@@ -1918,7 +1947,7 @@ defineExpose(exportObject);
       top: top,
       width: width,
       height: height,
-      overflow: 'hidden',
+      overflow: disableClip ? null : 'hidden',
     }"
   >
     <div :style="{ left: innerPadding.left, top: innerPadding.top }">