@shijiu/jsview-vue 0.9.602 → 0.9.684

package/samples/VisibleSensorDemo/App.vue

@@ -1,22 +1,15 @@
 <script setup>
-import { reactive, onMounted, ref } from "vue";
+import { watch, reactive, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
 
 const BOX_WIDTH = 150;
 const BOX_HEIGHT = 150;
-const BOX_COLOR = "#00FFFF";
+const BOX_COLOR = "rgba(0,255,255,0.6)";
+const VISIBLE_RANGE = 0.25;
 
 const router = useRouter();
 
-let shown = reactive({
-  vertical: 0.25,
-  horizon: 1.0,
-});
-
-let left_change = reactive({ left: 0 });
-let top_change = reactive({ top: 0 });
-
 const containerRef = ref(null);
 let case_config = ref(null);
 let status_text = reactive({
@@ -26,12 +19,24 @@ let status_text = reactive({
   newV: "false",
 });
 
-case_config.value = getTestCase(0);
+let test_case_type = ref(0);
+
+window.LudlTestCase = test_case_type;
+
+case_config.value = getTestCase(test_case_type.value);
+
+watch(test_case_type, () => {
+  case_config.value = getTestCase(test_case_type.value);
+});
 
 onMounted(() => {
   jJsvRuntimeBridge.notifyPageLoaded();
 });
 
+// const onAnimDone = () => {
+//   test_case_type.value = (test_case_type.value + 1) % 2;
+// };
+
 // 内部接口
 const onBeVisible = (old_h, new_h, old_v, new_v) => {
   status_text.oldH = old_h ? "true" : "false";
@@ -46,6 +51,9 @@ const onKeyDown = (ev) => {
     router?.go(-1); // 有router时，回退
     return true;
   }
+  if (ev.keyCode == 13) {
+    test_case_type.value = (test_case_type.value + 1) % 2;
+  }
   return false;
 };
 
@@ -60,17 +68,17 @@ function getTestCase(test_index) {
   switch (test_index) {
     case 0: {
       // 上到下
-      test_config.animation = "visibleSensor_upDown 5s infinite linear";
+      test_config.animation = "visibleSensor_upDown 8s infinite linear";
       test_config.text = "从上到下";
       test_config.horizon = 1.0;
-      test_config.vertical = 0.25;
+      test_config.vertical = VISIBLE_RANGE;
       break;
     }
     case 1: {
       // 左到右
-      test_config.animation = "visibleSensor_leftRight 5s infinite linear";
+      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
       test_config.text = "从左到右";
-      test_config.horizon = 0.25;
+      test_config.horizon = VISIBLE_RANGE;
       test_config.vertical = 1.0;
       break;
     }
@@ -87,7 +95,7 @@ function getTestCase(test_index) {
         :style="{
           left: 10,
           top: 10,
-          height: 100,
+          height: 120,
           width: 900,
           fontColor: '#000000',
           fontSize: 15,
@@ -95,7 +103,8 @@ function getTestCase(test_index) {
         }"
       >
         {{
-          `new horizon: ${status_text.newH}
+          `按OK键切换方向
+new horizon: ${status_text.newH}
 new vertical: ${status_text.newV}
 -------
 old horizon: ${status_text.oldH}
@@ -106,12 +115,34 @@ old vertical: ${status_text.oldV}`
         ref="containerRef"
         :style="{
           left: 240,
-          top: 110,
-          width: 800,
-          height: 500,
+          top: 180,
+          width: 300,
+          height: 300,
           backgroundColor: '#00F0F0',
         }"
       >
+        <div
+          :style="{
+            left: 50,
+            top: 50,
+            width: 200,
+            height: 200,
+            backgroundColor: '#00AAAA',
+            zIndex: test_case_type == 0 ? -22 : 0,
+          }"
+        />
+
+        <div
+          :style="{
+            left: 80,
+            top: 30,
+            width: 140,
+            height: 240,
+            backgroundColor: '#0000AA',
+            zIndex: test_case_type == 0 ? -33 : 0,
+          }"
+        />
+
         <div
           :style="{
             left: 0,
@@ -128,6 +159,40 @@ old vertical: ${status_text.oldV}`
             :container="containerRef"
             :callback="onBeVisible"
           >
+            <div v-if="test_case_type == 0">
+              <div
+                :style="{
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  top: BOX_HEIGHT * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
+            <div v-else>
+              <div
+                :style="{
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  left: BOX_WIDTH * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
             <div
               :style="{
                 width: BOX_WIDTH,
@@ -137,7 +202,9 @@ old vertical: ${status_text.oldV}`
                 lineHeight: 30,
               }"
             >
-              {{ case_config.text }}
+              {{
+                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
+              }}
             </div>
           </JsvVisibleSensor>
         </div>
@@ -149,19 +216,19 @@ old vertical: ${status_text.oldV}`
 <style scoped>
 @keyframes visibleSensor_upDown {
   from {
-    transform: translate3d(300px, -200px, 0);
+    transform: translate3d(75px, -180px, 0);
   }
   to {
-    transform: translate3d(300px, 600px, 0);
+    transform: translate3d(75px, 330px, 0);
   }
 }
 
 @keyframes visibleSensor_leftRight {
   from {
-    transform: translate3d(-160px, 200px, 0);
+    transform: translate3d(-180px, 75px, 0);
   }
   to {
-    transform: translate3d(1400px, 200px, 0);
+    transform: translate3d(330px, 75px, 0);
   }
 }
 </style>

package/utils/JsViewEngineWidget/MetroWidget/Const.js

@@ -0,0 +1,11 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-09-21 10:09:15
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-21 10:15:34
+ * @Description: file content
+ */
+export const METRO_WIDGET = {
+  SLIDE: 0x1,
+  CHILD_SLIDE_EVENT: 0x1 << 1,
+};

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-09 11:10:07
+ * @LastEditTime: 2022-11-07 15:51:14
  * @Description: file content
 -->
 
@@ -52,15 +52,16 @@
  *                              @params item {object} data中的数据
  *                              @return 模板信息，
                                         {
-                                          left: 绝对布局时的left,
-                                          top: 绝对布局时的top,
-                                          width: item的宽,
-                                          height: item的高,
-                                          focusable: item是否可以获得焦点,
-                                          marginBottom: item的下方margin,
-                                          marginRight: item的右方margin,
-                                          findNextAnchor: 自定义上下左右四条边寻找临近item的基准位置，值为0-1 {left: 0.5, right: 0.5, top: 0.5, bottom: 0.5}
-                                          doSlide: item获得焦点时是否滚动, 一般用于嵌套的情景, 由内部组件控制滚动
+                                          left {int}: 绝对布局时的left,
+                                          top {int}: 绝对布局时的top,
+                                          width {int}: item的宽,
+                                          height {int}: item的高,
+                                          focusable {boolean}: item是否可以获得焦点,
+                                          marginBottom {int}: item的下方margin,
+                                          marginRight {int}: item的右方margin,
+                                          findNextAnchor {object}: 自定义上下左右四条边寻找临近item的基准位置，值为0-1 {left: 0.5, right: 0.5, top: 0.5, bottom: 0.5}
+                                          doSlide {boolean}: item获得焦点时是否滚动, 一般用于嵌套的情景, 由内部组件控制滚动,
+                                          zIndex {int | object}: item的zIndex, 为object时可以分别设置{focus: 0, normal: 0}, 为number时则同时设置获焦和不获焦的zIndex
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -110,9 +111,25 @@
           @params {int} id 焦点id
           @params {boolean} needSlide 是否需要滚动
           @params {boolean} doAnim 滚动时是否做动画
+          @params {object} extraSetting 额外的参数设置
+                                          {
+                                            lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
+                                          }
         refreshData
           @description 刷新数据, 只有存在provideData时才会生效
           @params {boolean} forceUpdate 是否强制刷新
+        getVisibleItems
+          @description 获取可视item的列表信息
+          @return {start: 开始的index, end: 结束的index, dataList: 可视item的数据列表}
+        lock
+          @description 设置内部的锁
+          @params {int} type 锁的类型, 通过|来实现多个类型的复合
+                              SLIDE: 滚动动画锁
+                              CHILD_SLIDE_EVENT: 子组件发送的滚动事件锁
+          @return {function} 解锁的函数
+        unlock
+          @description 解锁
+          @params {int} type 参考lock的type参数
  * 【技巧说明】
  * Q: 插槽props如何使用？
  * A: data: 当前item的数据
@@ -123,8 +140,6 @@
                             获取 item 相对 MetroWidget 左上角坐标
                   templatePosition: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
                                     获取 item 的布局坐标, 一般用于自定义滚动
-                  absolutePosition: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0}
-                                    获取 item 的绝对坐标, 一般用于控制焦点
                   getCurrentFocusId: {Function} () => {id: 0, index: 0} 
                                      获取当前焦点信息，id 为在可获得焦点元素列表中的索引，index 为在所有元素列表中的索引
                   slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
@@ -175,6 +190,7 @@ import { TemplateParser, TemplateItemAdder } from "../TemplateParser";
 import { PageUpdater } from "./PageUpdater";
 import { SingleRangeModel } from "../RangeModel";
 import Dispatcher from "./Dispatcher";
+import { METRO_WIDGET } from "./Const";
 import {
   EdgeDirection,
   VERTICAL,
@@ -409,6 +425,10 @@ let preUpdateVisibleStart = 0;
 let mounted = false;
 let focusNode = ref(null);
 let pageRange = vertical ? props.height : props.width;
+
+let slideLock = false;
+let childSlideEventLock = false;
+
 let visibleInfo = {
   _start: 0,
   range: 0,
@@ -489,10 +509,6 @@ const _getTemplatePosition = (index) => {
   };
 };
 
-const _getAbsolutePosition = (index, targetEle) => {
-  return getPositionRelativeToView(innerData[index].itemDivRef, targetEle);
-};
-
 const _dispatchEvent = (event) => {
   switch (event.type) {
     case Dispatcher.Type.setEnterFocusId:
@@ -539,13 +555,22 @@ const onItemFocus = (index, rect) => {
   }
 };
 
-const setFocusId = (id, needSlide = true, doAnim = false) => {
+const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
+  if (id == focusId) {
+    return;
+  }
   templateItemAdder.tryAddItemById(id);
   let next_focus_item = templateParser.GetItemById(id);
   if (next_focus_item) {
     if (needSlide) {
       slideToItem(templateParser.FocusIdToIndex(id), doAnim);
     }
+    let unlock = null;
+    if (extraSetting) {
+      if (extraSetting.lockChildSlideEvent) {
+        unlock = lock(METRO_WIDGET.CHILD_SLIDE_EVENT);
+      }
+    }
 
     const cur_focus_item = templateParser.GetItemById(focusId);
     preFocusId = focusId;
@@ -566,6 +591,37 @@ const setFocusId = (id, needSlide = true, doAnim = false) => {
     _updateFocusItem();
     onItemBlur(templateParser.FocusIdToIndex(preFocusId));
     onItemFocus(templateParser.FocusIdToIndex(focusId), preEdgeRect);
+    unlock?.();
+  }
+};
+
+const lock = (type) => {
+  const unlocker = [];
+  if (type & METRO_WIDGET.SLIDE) {
+    slideLock = true;
+    unlocker.push(() => {
+      slideLock = false;
+    });
+  }
+  if (type & METRO_WIDGET.CHILD_SLIDE_EVENT) {
+    childSlideEventLock = true;
+    unlocker.push(() => {
+      childSlideEventLock = false;
+    });
+  }
+  return () => {
+    unlocker.map((item) => {
+      item();
+    });
+  };
+};
+
+const unlock = (type) => {
+  if (type & METRO_WIDGET.SLIDE) {
+    slideLock = true;
+  }
+  if (type & METRO_WIDGET.CHILD_SLIDE_EVENT) {
+    childSlideEventLock = true;
   }
 };
 
@@ -693,7 +749,8 @@ const refreshData = (force_update) => {
       dataList,
       props.measures,
       pageRange,
-      _onTemplateAdd
+      _onTemplateAdd,
+      props.name
     );
   }
   if (need_update_content) {
@@ -748,7 +805,24 @@ const refreshData = (force_update) => {
   }
 };
 
+const getVisibleItems = () => {
+  const info = templateParser.GetVisibleItemList(
+    visibleInfo.startWithPadding,
+    visibleInfo.endWithPadding,
+    focusId,
+    false,
+    null
+  );
+  return {
+    start: info.visibleStart,
+    end: info.visibleEnd,
+    dataList: dataList.slice(info.visibleStart, info.visibleEnd + 1),
+  };
+};
+
 const exportObject = {
+  lock,
+  unlock,
   slideTo,
   setFocusId,
   getFocusBlockRef,
@@ -757,7 +831,7 @@ const exportObject = {
   slideToItem,
   refreshData,
   _dispatchEvent,
-  _getAbsolutePosition,
+  getVisibleItems,
 };
 
 const _calculateNearestItemByRect = (visible_range, enter_rect_info) => {
@@ -1001,7 +1075,7 @@ const _onTemplateAdd = (item) => {
     data: item,
     index: innerData.length,
     controller: reactive({
-      zIndex: 0,
+      zIndex: item.normalZIndex >= 0 ? item.normalZIndex : 0,
     }),
     mounted: false,
     itemDivRef: null,
@@ -1059,7 +1133,6 @@ const _onTemplateAdd = (item) => {
       index: item.index,
       position: _getPosition,
       templatePosition: _getTemplatePosition,
-      absolutePosition: _getAbsolutePosition,
       getCurrentFocusId: _getCurrentId,
       slideTo: slideTo,
     },
@@ -1094,6 +1167,9 @@ const _itemOnFocusSideEffect = (item, edgeRect) => {
 
 const _onCustomerEvent = (ev) => {
   if (ev.type === "focusRect") {
+    if (childSlideEventLock) {
+      return true;
+    }
     if (ev.ownerNode == exportObject) {
       return false;
     }
@@ -1198,21 +1274,31 @@ const _moveToNext = (
           onend: _onSlideEnd,
         };
         _slideTo(visibleInfo.start, animObj);
+        pageUpdater.update(
+          templateParser,
+          visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+          Math.min(
+            visibleInfo.startMax +
+              visibleInfo.range +
+              visibleInfo.padding.end -
+              1,
+            visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+          ),
+          next_item_id,
+          false,
+          permanentItemList
+        );
+      } else {
+        //不做滚动时,保证获焦的item创建
+        pageUpdater.update(
+          templateParser,
+          cur_visible_start,
+          cur_visible_start + visibleInfo.range + visibleInfo.padding.end - 1,
+          next_item_id,
+          false,
+          permanentItemList
+        );
       }
-      pageUpdater.update(
-        templateParser,
-        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-        Math.min(
-          visibleInfo.startMax +
-            visibleInfo.range +
-            visibleInfo.padding.end -
-            1,
-          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-        ),
-        next_item_id,
-        false,
-        permanentItemList
-      );
       pageUpdater.applyTmp();
     }
 
@@ -1303,40 +1389,50 @@ const _calculateVisibleStart = (target_item, direction) => {
       ];
       break;
     case SlideSetting.Type.SEAMLESS:
-      if (direction > 0) {
-        if (
-          target_item[pos_key] + target_item[size_key] >
-          visibleInfo.start + visibleInfo.range * props.slideSetting.EndPercent
-        ) {
-          new_visible_start =
-            target_item[pos_key] +
-            target_item[size_key] -
-            visibleInfo.range * props.slideSetting.EndPercent;
-        }
-      } else if (direction < 0) {
-        if (
-          target_item[pos_key] <
-          visibleInfo.start +
-            visibleInfo.range * props.slideSetting.StartPercent
-        ) {
-          new_visible_start =
-            target_item[pos_key] -
-            visibleInfo.range * props.slideSetting.StartPercent;
-        }
+      if (
+        target_item[size_key] >=
+        visibleInfo.range *
+          (props.slideSetting.EndPercent - props.slideSetting.StartPercent)
+      ) {
+        //尺寸较大的item
+        new_visible_start = target_item[center_key] - visibleInfo.range * 0.5;
       } else {
-        //不是沿widget方向的移动
-        if (target_item[pos_key] < visibleInfo.start) {
-          new_visible_start =
-            target_item[pos_key] -
-            visibleInfo.range * props.slideSetting.StartPercent;
-        } else if (
-          target_item[pos_key] + target_item[size_key] >
-          visibleInfo.end
-        ) {
-          new_visible_start =
-            target_item[pos_key] +
-            target_item[size_key] -
-            visibleInfo.range * props.slideSetting.EndPercent;
+        if (direction > 0) {
+          if (
+            target_item[pos_key] + target_item[size_key] >
+            visibleInfo.start +
+              visibleInfo.range * props.slideSetting.EndPercent
+          ) {
+            new_visible_start =
+              target_item[pos_key] +
+              target_item[size_key] -
+              visibleInfo.range * props.slideSetting.EndPercent;
+          }
+        } else if (direction < 0) {
+          if (
+            target_item[pos_key] <
+            visibleInfo.start +
+              visibleInfo.range * props.slideSetting.StartPercent
+          ) {
+            new_visible_start =
+              target_item[pos_key] -
+              visibleInfo.range * props.slideSetting.StartPercent;
+          }
+        } else {
+          //不是沿widget方向的移动
+          if (target_item[pos_key] < visibleInfo.start) {
+            new_visible_start =
+              target_item[pos_key] -
+              visibleInfo.range * props.slideSetting.StartPercent;
+          } else if (
+            target_item[pos_key] + target_item[size_key] >
+            visibleInfo.end
+          ) {
+            new_visible_start =
+              target_item[pos_key] +
+              target_item[size_key] -
+              visibleInfo.range * props.slideSetting.EndPercent;
+          }
         }
       }
       break;
@@ -1403,9 +1499,16 @@ const _ifValidEnterRect = (rect_info) => {
   return rect_info && rect_info.direction && rect_info.rect;
 };
 
-const _setZIndex = (index, z_index) => {
+const _setZIndex = (index, z_index, is_focus) => {
   if (innerData[index]) {
-    innerData[index].controller.zIndex = z_index;
+    let data = innerData[index].data,
+      i = z_index;
+    if (is_focus && data.focusZIndex >= 0) {
+      i = data.focusZIndex;
+    } else if (data.normalZIndex >= 0) {
+      i = data.normalZIndex;
+    }
+    innerData[index].controller.zIndex = i;
   }
 };
 
@@ -1457,11 +1560,11 @@ const _onSlideEnd = (event) => {
 };
 
 const _updateFocusItem = () => {
-  _setZIndex(templateParser.FocusIdToIndex(focusId), innerData.length);
+  _setZIndex(templateParser.FocusIdToIndex(focusId), innerData.length, true);
 };
 
 const _updateBlurItem = () => {
-  _setZIndex(templateParser.FocusIdToIndex(preFocusId), 0);
+  _setZIndex(templateParser.FocusIdToIndex(preFocusId), 0, false);
 };
 
 const _updateFocusByDragInfo = (viewX, viewY) => {
@@ -1607,21 +1710,23 @@ const _onScroll = () => {
 
 //之前rootview相关的代码
 const _updatePosition = (x, y, anim_info) => {
+  if (slideLock) return;
   if (toRaw(slideDiv.value)) {
-    let pre_pos = toRaw(slideDiv.value).jsvMaskView.GetLayoutParams();
+    let pre_left = toRaw(slideDiv.value).style.left,
+      pre_top = toRaw(slideDiv.value).style.top;
     //jsvMaskView的位置更新时会被设置位0，因此不能通过ResetLayoutParams设置位置
     slideDivLeft.value = x;
     slideDivTop.value = y;
     if (anim_info) {
-      let delta_x = Math.abs(pre_pos.MarginLeft - x);
-      let delta_y = Math.abs(pre_pos.MarginTop - y);
+      let delta_x = Math.abs(pre_left - x);
+      let delta_y = Math.abs(pre_top - y);
       let duration = Math.round(
         delta_x === 0 ? delta_y / anim_info.speed : delta_x / anim_info.speed
       );
       let slide_animation = new Forge.TranslateAnimation(
-        pre_pos.MarginLeft - x,
+        pre_left - x,
         0,
-        pre_pos.MarginTop - y,
+        pre_top - y,
         0,
         duration,
         anim_info.easing
@@ -1708,7 +1813,8 @@ templateItemAdder = new TemplateItemAdder(
   dataList,
   props.measures,
   pageRange,
-  _onTemplateAdd
+  _onTemplateAdd,
+  props.name
 );
 if (props.onScroll) {
   templateItemAdder.tryAddItemByIndex(dataList.length - 1);
@@ -1740,12 +1846,14 @@ slidePile = new Forge.RectArea(
 let init_focus_id = 0;
 let cur_visible_start = 0;
 
-if (props.initFocusId) {
+if (typeof props.initFocusId == 'number') {
   templateItemAdder.tryAddItemById(props.initFocusId);
   const item = templateParser.GetItemById(props.initFocusId);
   if (item) {
     init_focus_id = props.initFocusId;
-    cur_visible_start = _calculateVisibleStart(item, 1);
+    if (item.doSlide) {
+      cur_visible_start = _calculateVisibleStart(item, 1);
+    }
   }
 }
 focusId = init_focus_id;