@shijiu/jsview-vue 1.9.650 → 1.9.719

package/utils/JsViewEngineWidget/TemplateParser.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { RangesModel, SingleRangeModel } from "./RangeModel";
 import { RectArea } from "./RectUtils";
-import { VERTICAL, HORIZONTAL } from "./WidgetCommon";
+import { VERTICAL, HORIZONTAL, FocusMoveType } from "./WidgetCommon";
 const TAG = "TemplateParser: ";
 
 function integerCheck(value, warn_func) {
@@ -34,12 +34,12 @@ const measureObjectCheckMap = {
   width: (obj) => {
     if (isNaN(obj.width)) {
       if (isNaN(obj.block?.w)) {
+        throw new Error(TAG + "width is not defined");
+      } else {
         console.warn(TAG, "key 'block' is deprecated ");
         return integerCheck(obj.blocks.w, () => {
           console.warn(TAG, "width is not integer", obj);
         });
-      } else {
-        throw new Error(TAG + "width is not definied");
       }
     } else {
       return integerCheck(obj.width, () => {
@@ -50,12 +50,12 @@ const measureObjectCheckMap = {
   height: (obj) => {
     if (isNaN(obj.height)) {
       if (isNaN(obj.block?.h)) {
+        throw new Error(TAG + "height is not defined");
+      } else {
         console.warn(TAG, "key 'block' is deprecated ");
         return integerCheck(obj.blocks.h, () => {
           console.warn(TAG, "height is not integer", obj);
         });
-      } else {
-        throw new Error(TAG + "height is not definied");
       }
     } else {
       return integerCheck(obj.height, () => {
@@ -72,6 +72,26 @@ function measureObjectChecker(obj) {
 
 function getTemplateItem(measure_obj, data_info) {
   measureObjectChecker(measure_obj);
+
+  let focusZIndex = -1,
+    normalZIndex = -1;
+  if (
+    typeof measure_obj["zIndex"] != "undefined" &&
+    measure_obj["zIndex"] != null
+  ) {
+    if (typeof measure_obj["zIndex"] == "object") {
+      if (typeof measure_obj["zIndex"]["focus"] == "number") {
+        focusZIndex = measure_obj["zIndex"]["focus"];
+      }
+      if (typeof measure_obj["zIndex"]["normal"] == "number") {
+        normalZIndex = measure_obj["zIndex"]["normal"];
+      }
+    } else if (typeof measure_obj["zIndex"] == "number") {
+      focusZIndex = measure_obj["zIndex"];
+      normalZIndex = measure_obj["zIndex"];
+    }
+  }
+
   return {
     id: -1,
     index: -1,
@@ -106,6 +126,8 @@ function getTemplateItem(measure_obj, data_info) {
       typeof measure_obj.permanent !== "undefined"
         ? measure_obj.permanent
         : false,
+    focusZIndex,
+    normalZIndex,
   };
 }
 
@@ -867,7 +889,10 @@ class TemplateParser {
         item_key_pos = gap_info.startPos;
         item_second_pos = top_fence.AheadOffset;
       } else {
-        console.error(TAG, "ERROR: coding error, header full gap fence lost");
+        throw new Error(
+          `${TAG} item size ${item_width}x${item_height} is greater than widget line max ${this._Template.Orient.widthMax}`
+        );
+        // console.error(TAG, "ERROR: coding error, header full gap fence lost");
       }
 
       if (this._Template.Orient.type === VERTICAL) {
@@ -1039,7 +1064,7 @@ class TemplateParser {
     return this._Template.List.length;
   }
 
-  FocusIdToIndex(id) {
+  IdToIndex(id) {
     return this._Template.IdsMap[id];
   }
 
@@ -1175,64 +1200,6 @@ class TemplateParser {
         this._FindFocusableNeighbor("right", item);
       }
     }
-    // if (this._Template.Orient.type !== VERTICAL) {
-    //   // 从后向前找(最后一项不用检查）
-    //   // 如果向下未找到对象，则查找最后一行的最后一项
-    //   let last_down_idx = null;
-    //   let min_distance = -1;
-    //   let distance = 0;
-    //   // 向下操作 只检查最后一项
-    //   for (let k = last_item_index - 1; k >= 0; k--) {
-    //     const pre_col_item = template_list[k];
-    //     if (pre_col_item.focusable) {
-    //       if (pre_col_item.yPos >= last_item.yPos + last_item.height) {
-    //         if (
-    //           pre_col_item.neighborIndexList.right.length === 0 ||
-    //           !this._CheckIdsHasFocusable(
-    //             pre_col_item.neighborIndexList.right
-    //           ) ||
-    //           this._IsInNeighborList(
-    //             pre_col_item.neighborIndexList.right,
-    //             last_item_index
-    //           )
-    //         ) {
-    //           // 有邻居中有last_item_index
-    //           distance =
-    //             (last_item.xPos - pre_col_item.xPos) ** 2 +
-    //             (last_item.yPos - pre_col_item.yPos) ** 2;
-    //           if (min_distance === -1) {
-    //             min_distance = distance;
-    //             last_down_idx = k;
-    //           } else if (min_distance > distance) {
-    //             min_distance = distance;
-    //             last_down_idx = k;
-    //           }
-    //         }
-    //       }
-    //     }
-    //   }
-    //   if (last_down_idx) {
-    //     last_item.neighborIndexList.bottom = []; // 清除无效项
-    //     console.log('cchtest bottom add 2', last_down_idx)
-    //     last_item.neighborIndexList.bottom.push(last_down_idx);
-    //   }
-    // } else {
-    //   // vertical
-    //   for (let k = last_item_index - 1; k >= 0; k--) {
-    //     const pre_row_item = template_list[k];
-    //     if (pre_row_item.focusable) {
-    //       if (
-    //         pre_row_item.yPos + pre_row_item.height <
-    //         last_item.yPos + last_item.height
-    //       ) {
-    //         if (pre_row_item.neighborIndexList.bottom.length === 0) {
-    //           console.log('cchtest bottom add 3', last_item_index)
-    //           pre_row_item.neighborIndexList.bottom.push(last_item_index);
-    //         }
-    //       }
-    //     }
-    //   }
-    // }
   }
 
   /**
@@ -1245,47 +1212,76 @@ class TemplateParser {
    * @param {int} base_item_id         Item的Id
    * @param {int} vertical_offset     纵向偏移(-1为向上，1为向下）
    * @param {int} horizontal_offset   横向偏移(-1为向左，1为向右）
-   * @param {bool} need_loop          循环查找
+   * @param {int} focus_move_type     焦点移动设置
    * @return {int}    下一个Item的Id，-1为该方向未找到Item(到达边缘)
    * */
-  GetNextItem(base_item_id, vertical_offset, horizontal_offset, need_loop) {
+  GetNextItem(
+    base_item_id,
+    vertical_offset,
+    horizontal_offset,
+    focus_move_type
+  ) {
     if (vertical_offset === 0 && horizontal_offset === 0)
       console.log("GetNextItem(): offset is 0");
     // Forge.ThrowError("GetNextItem(): offset is 0");
 
     if (vertical_offset !== 0 && horizontal_offset !== 0) {
       console.log(
-        "GetNextItem(): not support change vertical and horizontal and the same time"
+        "GetNextItem(): not support change vertical and horizontal at the same time"
       );
       // Forge.ThrowError("GetNextItem(): not support change vertical and horizontal and the same time");
     }
 
-    const list_index = this._Template.IdsMap[base_item_id];
+    const item_index = this.IdToIndex(base_item_id);
     const offset = vertical_offset !== 0 ? vertical_offset : horizontal_offset;
     let next_template_item = this._GetNextItem(
-      list_index,
+      item_index,
       offset,
       vertical_offset !== 0
     );
+    const is_vertical = this._Template.Orient.type === VERTICAL;
 
-    if (need_loop && next_template_item === null) {
-      if (vertical_offset !== 0) {
-        next_template_item = this._GetNextLoopItemVertical(
-          list_index,
-          vertical_offset
+    if (next_template_item === null) {
+      // 在次方向的焦点移动才会loop
+      if (
+        is_vertical &&
+        focus_move_type & FocusMoveType.ROW_LOOP &&
+        horizontal_offset != 0
+      ) {
+        next_template_item = this._GetNextLoopItem(
+          item_index,
+          horizontal_offset,
+          is_vertical
         );
-      } else {
-        next_template_item = this._GetNextLoopItemHorizontal(
-          list_index,
-          horizontal_offset
+      } else if (
+        !is_vertical &&
+        focus_move_type & FocusMoveType.COLUMN_LOOP &&
+        vertical_offset != 0
+      ) {
+        next_template_item = this._GetNextLoopItem(
+          item_index,
+          vertical_offset,
+          is_vertical
         );
       }
     }
 
     if (next_template_item === null) {
-      return -1;
+      // 临近行的焦点移动
+      if (
+        vertical_offset != 0 &&
+        focus_move_type & FocusMoveType.ROW_FIND_NEAR
+      ) {
+        next_template_item = this._GetNearLineItem(item_index, vertical_offset, true);
+      } else if (
+        horizontal_offset != 0 &&
+        focus_move_type & FocusMoveType.COLUMN_FIND_NEAR
+      ) {
+        next_template_item = this._GetNearLineItem(item_index, horizontal_offset, false);
+      }
     }
-    return next_template_item.id;
+
+    return next_template_item;
   }
 
   _GetNextItem(index, offset, vertical) {
@@ -1451,94 +1447,115 @@ class TemplateParser {
     return null;
   }
 
-  _GetNextLoopItemVertical(index, offset) {
-    const template_list = this._Template.List;
-    const base_item = template_list[index];
-    const center_x = base_item.centerXPos;
-    let direction = "bottom";
-    // Normalize offset
-    if (offset > 0) {
-      direction = "top";
-    }
-    let found = false;
-    let next_index = -1;
+  _GetItemDistance(item1, item2) {
+    return (
+      Math.pow(item1.centerXPos - item2.centerXPos, 2) +
+      Math.pow(item1.centerYPos - item2.centerYPos, 2)
+    );
+  }
 
-    // 获得邻近点列表
-    let neighbor_list = template_list[index].neighborIndexList[direction];
-    if (template_list[index].tmpNeighborIndexList[direction].length > 0) {
-      neighbor_list = neighbor_list.concat(
-        template_list[index].tmpNeighborIndexList[direction]
-      );
+  _GetTotalNeighbor(index, direction) {
+    const item = this._Template.List[index];
+    return item.neighborIndexList[direction].concat(
+      item.tmpNeighborIndexList[direction]
+    );
+  }
+
+  _GetNearestItem(target_item_index, item_index_list) {
+    let nearest_index = -1,
+      min_distance = Number.POSITIVE_INFINITY;
+    let target_item = this._Template.List[target_item_index];
+    for (let i of item_index_list) {
+      const d = this._GetItemDistance(this._Template.List[i], target_item);
+      if (d < min_distance) {
+        nearest_index = i;
+        min_distance = d;
+      }
     }
+    return nearest_index;
+  }
 
-    while (neighbor_list.length >= 1) {
-      for (let i = 0; i < neighbor_list.length; i++) {
-        next_index = neighbor_list[i];
-        const checking_item = template_list[next_index];
-        if (
-          center_x <= checking_item.xPos + checking_item.width - 1 &&
-          center_x >= checking_item.xPos
-        ) {
-          neighbor_list =
-            template_list[next_index].neighborIndexList[direction];
-          found = true;
+  _GetNextLoopItem(index, offset, is_vertical) {
+    const template_list = this._Template.List;
+    const base_item = template_list[index];
+    let search_direction = is_vertical ? "right" : "bottom";
+    let start_direction = is_vertical ? "top" : "left";
+    if (offset > 0) {
+      search_direction = is_vertical ? "left" : "top";
+      start_direction = is_vertical ? "bottom" : "right";
+    }
+    let target_index = -1;
+    let focusable_target = -1;
+    let start_index = -1;
+    let neighbor_list = [];
+    //寻找下一列的起始item
+    neighbor_list = this._GetTotalNeighbor(index, search_direction);
+    while (start_index < 0 && neighbor_list.length > 0) {
+      for (let i of neighbor_list) {
+        if (this._GetTotalNeighbor(i, start_direction).length > 0) {
+          start_index = i;
           break;
+        } else {
+          //TODO 是否要用递归
+          neighbor_list = this._GetTotalNeighbor(i, search_direction);
         }
       }
     }
+    if (start_index >= 0) {
+      neighbor_list = this._GetTotalNeighbor(start_index, start_direction);
+
+      //寻找最近的neighbor
+      let nearest_index = -1,
+        min_distance = Number.POSITIVE_INFINITY;
+      for (let i of neighbor_list) {
+        const d = this._GetItemDistance(template_list[i], base_item);
+        if (d < min_distance) {
+          nearest_index = i;
+          min_distance = d;
+        }
+      }
 
-    if (found) {
-      if (!template_list[next_index].focusable) {
-        // 如果是占位符，则查找占位符的下一个
-        return this._GetNextLoopItemVertical(next_index, offset);
+      neighbor_list = this._GetTotalNeighbor(nearest_index, search_direction);
+      while (neighbor_list.length > 0) {
+        target_index = this._GetNearestItem(nearest_index, neighbor_list);
+        if (template_list[target_index].focusable) {
+          focusable_target = target_index;
+        }
+        neighbor_list = this._GetTotalNeighbor(target_index, search_direction);
+      }
+      if (focusable_target >= 0) {
+        return template_list[focusable_target];
+      } else if (target_index >= 0) {
+        return this._GetNextLoopItem(target_index, offset, is_vertical);
       }
-      return template_list[next_index];
     }
     return null;
   }
 
-  _GetNextLoopItemHorizontal(index, offset) {
+  //获取临近行的item
+  _GetNearLineItem(index, offset, is_vertical) {
     const template_list = this._Template.List;
-    const base_item = template_list[index];
-    const center_y = base_item.centerYPos;
-    let direction = "right";
+    let search_direction = is_vertical ? "right" : "bottom";
+    let start_direction = is_vertical ? "top" : "left";
     if (offset > 0) {
-      direction = "left";
-    }
-    let found = false;
-    let next_index = -1;
-
-    // 获得邻近点列表
-    let neighbor_list = template_list[index].neighborIndexList[direction];
-    if (template_list[index].tmpNeighborIndexList[direction].length > 0) {
-      neighbor_list = neighbor_list.concat(
-        template_list[index].tmpNeighborIndexList[direction]
-      );
-    }
-
-    while (neighbor_list.length >= 1) {
-      for (let i = 0; i < neighbor_list.length; i++) {
-        next_index = neighbor_list[i];
-        const checking_item = template_list[next_index];
-        if (
-          center_y <= checking_item.yPos + checking_item.height - 1 &&
-          center_y >= checking_item.yPos
-        ) {
-          neighbor_list =
-            template_list[next_index].neighborIndexList[direction];
-          found = true;
-          break;
+      search_direction = is_vertical ? "left" : "top";
+      start_direction = is_vertical ? "bottom" : "right";
+    }
+    let start_index = -1;
+    let neighbor_list = [];
+    //寻找下一列的起始item
+    neighbor_list = this._GetTotalNeighbor(index, search_direction);
+    while (start_index < 0 && neighbor_list.length > 0) {
+      for (let i of neighbor_list) {
+        const n = this._GetTotalNeighbor(i, start_direction);
+        if (n.length > 0) {
+          return template_list[this._GetNearestItem(index, n)];
+        } else {
+          //TODO 是否要用递归
+          neighbor_list = this._GetTotalNeighbor(i, search_direction);
         }
       }
     }
-
-    if (found) {
-      if (!template_list[next_index].focusable) {
-        // 如果是占位符，则查找占位符的下一个
-        return this._GetNextLoopItemHorizontal(next_index, offset);
-      }
-      return template_list[next_index];
-    }
     return null;
   }
 
@@ -1846,7 +1863,14 @@ class TemplateParser {
 }
 
 class TemplateItemAdder {
-  constructor(template_parser, data, measure_func, page_range, side_effect) {
+  constructor(
+    template_parser,
+    data,
+    measure_func,
+    page_range,
+    side_effect,
+    id
+  ) {
     this._TemplateParser = template_parser;
     this._Data = data;
     this._PageRange = page_range;
@@ -1859,6 +1883,7 @@ class TemplateItemAdder {
       this._TemplateParser._Template.Orient.type === HORIZONTAL
         ? "xPos"
         : "yPos";
+    this._ID = id;
   }
 
   tryAddItem(cur_item = null, page_num = 1) {
@@ -1869,15 +1894,23 @@ class TemplateItemAdder {
         cur_item[this._Key] >= (this._CurPage - 1) * this._PageRange)
     ) {
       while (this._CurIndex < this._Data.length) {
-        let item = this._TemplateParser.ParseTemplateItem(
-          this._MeasureFunc(this._Data[this._CurIndex]),
-          this._Data[this._CurIndex]
-        );
-        this._SideEffect?.(item);
-        this._CurIndex++;
-        if (item[this._Key] >= (this._CurPage + page_num) * this._PageRange) {
-          this._CurPage += page_num;
-          break;
+        try {
+          let item = this._TemplateParser.ParseTemplateItem(
+            this._MeasureFunc(this._Data[this._CurIndex]),
+            this._Data[this._CurIndex]
+          );
+          this._SideEffect?.(item);
+          this._CurIndex++;
+          if (item[this._Key] >= (this._CurPage + page_num) * this._PageRange) {
+            this._CurPage += page_num;
+            break;
+          }
+        } catch (e) {
+          console.error(
+            `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data: `,
+            this._Data
+          );
+          throw e;
         }
       }
       this._TemplateParser.CalculateNeighborWhenAddStop();
@@ -1899,14 +1932,22 @@ class TemplateItemAdder {
     let added = false;
     while (this._CurIndex <= _index) {
       added = true;
-      let item = this._TemplateParser.ParseTemplateItem(
-        this._MeasureFunc(this._Data[this._CurIndex]),
-        this._Data[this._CurIndex]
-      );
-      this._SideEffect?.(item);
-      this._CurIndex++;
-      if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
-        this._CurPage++;
+      try {
+        let item = this._TemplateParser.ParseTemplateItem(
+          this._MeasureFunc(this._Data[this._CurIndex]),
+          this._Data[this._CurIndex]
+        );
+        this._SideEffect?.(item);
+        this._CurIndex++;
+        if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+          this._CurPage++;
+        }
+      } catch (e) {
+        console.error(
+          `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
+          this._Data
+        );
+        throw e;
       }
     }
     if (added) {
@@ -1924,16 +1965,24 @@ class TemplateItemAdder {
       let cur_id = last_id;
       while (cur_id < _id && this._CurIndex < this._Data.length) {
         added = true;
-        const item = this._TemplateParser.ParseTemplateItem(
-          this._MeasureFunc(this._Data[this._CurIndex]),
-          this._Data[this._CurIndex]
-        );
-        cur_id = item.id;
-        this._SideEffect?.(item);
-        if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
-          this._CurPage++;
+        try {
+          const item = this._TemplateParser.ParseTemplateItem(
+            this._MeasureFunc(this._Data[this._CurIndex]),
+            this._Data[this._CurIndex]
+          );
+          cur_id = item.id;
+          this._SideEffect?.(item);
+          if (item[this._Key] >= (this._CurPage + 1) * this._PageRange) {
+            this._CurPage++;
+          }
+          this._CurIndex++;
+        } catch (e) {
+          console.error(
+            `MetroWidget: ${this._ID} parse template item ${this._CurIndex} failed. data:`,
+            this._Data
+          );
+          throw e;
         }
-        this._CurIndex++;
       }
       if (added) {
         this._TemplateParser.CalculateNeighborWhenAddStop();

package/utils/JsViewEngineWidget/WidgetCommon.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2020-12-30 14:08:38
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-06-09 17:16:41
+ * @LastEditTime: 2022-11-22 09:57:18
  * @Description: file content
  */
 class BaseDispatcher {
@@ -75,17 +75,16 @@ function getPositionRelativeToView(divElement, targetElement) {
     return null;
   }
   let element = divElement;
-  const elementLayoutParams = element.jsvMaskView.GetLayoutParams();
   let position = {
     left: 0,
     top: 0,
-    width: elementLayoutParams.Width,
-    height: elementLayoutParams.Height,
+    width: element.style.width,
+    height: element.style.height,
   };
   while (element && element !== targetElement) {
     position.left += element.style.left ? element.style.left : 0;
     position.top += element.style.top ? element.style.top : 0;
-    element = element.parentElement;
+    element = element.parentNode;
   }
   return position;
 }
@@ -185,6 +184,14 @@ class FixPositionSlide extends SlideSetting {
   }
 }
 
+const FocusMoveType = {
+  NO_ADJUST: 0x00000000,
+  COLUMN_LOOP: 0x00000001,
+  ROW_LOOP: 0x00000001 << 1,
+  COLUMN_FIND_NEAR: 0x00000001 << 2,
+  ROW_FIND_NEAR: 0x00000001 << 3,
+};
+
 // randomColor() {
 //   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
 //   return (
@@ -204,4 +211,5 @@ export {
   WholePageSlide,
   SeamlessSlide,
   FixPositionSlide,
+  FocusMoveType,
 };

package/utils/JsViewEngineWidget/index.js

@@ -2,14 +2,15 @@
  * @Author: ChenChanghua
  * @Date: 2021-06-16 10:07:20
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-05 15:44:06
+ * @LastEditTime: 2022-11-07 14:50:02
  * @Description: file content
  */
 export * from "./WidgetCommon";
-export * from "./SimpleWidget/Dispatcher";
+export * from "./MetroWidget/Dispatcher";
 
 export { default as SimpleWidget } from "./MetroWidget/MetroWidget.vue";
 export { default as MetroWidget } from "./MetroWidget/MetroWidget.vue";
+export { METRO_WIDGET } from "./MetroWidget/Const.js";
 
 export { default as JsvFocusBlock } from "./JsvFocusBlock.vue";
 export { jsvCreateFocusManager, useFocusHub } from "./JsvFocusManager";

package/utils/JsViewPlugin/BrowserPluginLoader.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2022-2-24 14:00:00
  * @Description: file content
  */
-import { JsvWidgetWrapperGroup } from 'jsview/utils/JsViewVueWidget/BrowserDebugWidget/WidgetWrapper.js';
+import { JsvWidgetWrapperGroup } from '../JsViewVueWidget/BrowserDebugWidget/WidgetWrapper.js';
 //考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as BrowserJsvPlayer from "./JsvPlayer/JsvPlayerBrowser.vue";