@shijiu/jsview-vue 0.9.359-alpha.0 → 0.9.422

package/utils/JsViewEngineWidget/TemplateParser.js

@@ -1,48 +1,107 @@
+/* eslint-disable */
 import { RangesModel, SingleRangeModel } from "./RangeModel";
 import { RectArea } from "./RectUtils";
 import { VERTICAL, HORIZONTAL } from "./WidgetCommon";
+const TAG = "TemplateParser: ";
 
-function getTemplateItem(layout_info, data_info) {
+function integerCheck(value, warn_func) {
+  const result = Math.round(value);
+  if (result !== value) {
+    warn_func();
+  }
+  return result;
+}
+
+const measureObjectCheckMap = {
+  left: (obj) => {
+    if (isNaN(obj.left)) {
+      return 0;
+    } else {
+      return integerCheck(obj.left, () => {
+        console.warn(TAG, "left is not integer", obj);
+      });
+    }
+  },
+  top: (obj) => {
+    if (isNaN(obj.top)) {
+      return 0;
+    } else {
+      return integerCheck(obj.top, () => {
+        console.warn(TAG, "top is not integer", obj);
+      });
+    }
+  },
+  width: (obj) => {
+    if (isNaN(obj.width)) {
+      if (isNaN(obj.block?.w)) {
+        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, () => {
+        console.warn(TAG, "width is not integer", obj);
+      });
+    }
+  },
+  height: (obj) => {
+    if (isNaN(obj.height)) {
+      if (isNaN(obj.block?.h)) {
+        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, () => {
+        console.warn(TAG, "height is not integer", obj);
+      });
+    }
+  },
+};
+function measureObjectChecker(obj) {
+  for (let key in measureObjectCheckMap) {
+    obj[key] = measureObjectCheckMap[key](obj);
+  }
+}
+
+function getTemplateItem(measure_obj, data_info) {
+  measureObjectChecker(measure_obj);
   return {
     id: -1,
     index: -1,
-    xPos: layout_info.left ? layout_info.left : 0, // Set after template be layout
-    yPos: layout_info.top ? layout_info.top : 0, // Set after template be layout
+    xPos: measure_obj.left, // Set after template be layout
+    yPos: measure_obj.top, // Set after template be layout
     centerXPos: 0, // Set after template be layout
     centerYPos: 0, // Set after template be layout
-    width:
-      typeof layout_info.width !== "undefined"
-        ? layout_info.width
-        : layout_info.blocks.w,
-    height:
-      typeof layout_info.height !== "undefined"
-        ? layout_info.height
-        : layout_info.blocks.h,
+    width: measure_obj.width,
+    height: measure_obj.height,
     focusable:
-      typeof layout_info.focusable === "undefined"
+      typeof measure_obj.focusable === "undefined"
         ? true
-        : layout_info.focusable,
+        : measure_obj.focusable,
     data: data_info,
     marginRight:
-      typeof layout_info.marginRight !== "undefined"
-        ? layout_info.marginRight
+      typeof measure_obj.marginRight !== "undefined"
+        ? measure_obj.marginRight
         : 0,
     marginBottom:
-      typeof layout_info.marginBottom !== "undefined"
-        ? layout_info.marginBottom
+      typeof measure_obj.marginBottom !== "undefined"
+        ? measure_obj.marginBottom
         : 0,
     findNextAnchor:
-      typeof layout_info.findNextAnchor !== "undefined"
-        ? layout_info.findNextAnchor
+      typeof measure_obj.findNextAnchor !== "undefined"
+        ? measure_obj.findNextAnchor
         : null,
-    // hasSub: !!layout_info.hasSub,
-    // needRedraw:
-    //   typeof layout_info.needRedraw === "undefined"
-    //     ? true
-    //     : layout_info.needRedraw,
-    // onBottomLine: false, // is bottom line of horizontal mode metro(which can draw with reflection effect)
-    // view: null,
-    // mounted: false,
+    doSlide:
+      typeof measure_obj.doSlide !== "undefined" ? measure_obj.doSlide : true,
+    pageNumber: -1,
+    pageHeadIndex: -1,
   };
 }
 
@@ -237,21 +296,14 @@ class Fence {
 }
 
 class TemplateParser {
-  constructor(
-    direction,
-    lineMax,
-    layoutType,
-    visibleWidth,
-    visibleHeight,
-    supportHistoryPath
-  ) {
+  constructor(direction, lineMax, pageSize, layoutType, supportHistoryPath) {
     this._Template = new MetroTemplate(direction, lineMax, layoutType);
     this._FenceStack = [new Fence(0, 0, this._Template.Orient.widthMax, 0)];
     this._Identity = 0;
-    this._MoveLimitArea = new RectArea(0, 0, visibleWidth, visibleHeight);
     this._FenceEdge = { StartX: 0, StartY: 0 }; // 新的未占用边列表生成
     this._NotOccupiedEdgeList = []; // 未占用边列表
     this._SupportHistoryPath = supportHistoryPath;
+    this._PageSize = pageSize;
     // this._VisibleRangeSearchBaseItem = null;
   }
 
@@ -538,7 +590,7 @@ class TemplateParser {
       },
     };
     let cross_neighbor_key = key_map.cross[direction];
-    let target_neighbor_key =  key_map.target[direction];
+    let target_neighbor_key = key_map.target[direction];
     if (!cross_neighbor_key || !target_neighbor_key) {
       console.error("_TryUpdateItemNeighbor: undefined direction", direction);
     }
@@ -764,9 +816,6 @@ class TemplateParser {
     const template_item = getTemplateItem(item_obj, data_obj);
     // Layout template items
     const fence_stack = this._FenceStack;
-    let cur_page_head_id = -1; // 获取当前页的头ID，MetroWidget默认焦点时用
-    let cur_page_index = 1;
-
     const item_id = template_item.id;
     const item_width = template_item.width;
     const item_height = template_item.height;
@@ -777,11 +826,9 @@ class TemplateParser {
     let y_width;
     let item_key_pos = 0;
     let item_second_pos = 0;
-    let tmp_index = 0;
 
     let item_key_width = 0;
     let item_second_width = 0;
-
     let item_key_margin = 0;
     let item_second_margin = 0;
     if (this._Template.Layout.type === "relative") {
@@ -814,8 +861,7 @@ class TemplateParser {
         item_key_pos = gap_info.startPos;
         item_second_pos = top_fence.AheadOffset;
       } else {
-        // Forge.ThrowError("ERROR: coding error, header full gap fence lost");
-        console.log("ERROR: coding error, header full gap fence lost");
+        console.error(TAG, "ERROR: coding error, header full gap fence lost");
       }
 
       if (this._Template.Orient.type === VERTICAL) {
@@ -823,35 +869,19 @@ class TemplateParser {
         y_pos = item_second_pos;
         x_width = item_key_width;
         y_width = item_second_width;
-        tmp_index = (y_pos + y_width) / this._MoveLimitArea.height;
       } else {
         x_pos = item_second_pos;
         y_pos = item_key_pos;
         x_width = item_second_width;
         y_width = item_key_width;
-        tmp_index = (x_pos + x_width) / this._MoveLimitArea.width;
       }
     } else {
       x_pos = template_item.xPos;
       y_pos = template_item.yPos;
       x_width = item_width;
       y_width = item_height;
-      if (this._Template.Orient.type === VERTICAL) {
-        tmp_index = (y_pos + y_width) / this._MoveLimitArea.height;
-      } else {
-        tmp_index = (x_pos + x_width) / this._MoveLimitArea.width;
-      }
     }
 
-    if (cur_page_head_id === -1) {
-      cur_page_head_id = item_id;
-    }
-    const tmp_page_index = Math.ceil(tmp_index);
-    if (tmp_index >= 0 && tmp_page_index !== cur_page_index) {
-      cur_page_index = tmp_page_index;
-      cur_page_head_id = item_id;
-    }
-    template_item.curPageHeadId = cur_page_head_id;
     // Update template item information
     template_item.neighborIndexList = {
       left: [],
@@ -876,6 +906,33 @@ class TemplateParser {
     template_item.yPos = y_pos;
     template_item.centerXPos = Math.floor(x_pos + x_width / 2) - 1;
     template_item.centerYPos = Math.floor(y_pos + y_width / 2) - 1;
+    //分页相关的计算
+    let cur_page_number = 0;
+    let cur_page_head_index = 0;
+    if (this._Template.List.length > 0) {
+      const last_item = this._Template.List[this._Template.List.length - 1];
+      cur_page_number = last_item.pageNumber;
+      cur_page_head_index = last_item.pageHeadIndex;
+      let position_key = "xPos";
+      let size_key = "width";
+      if (this._Template.Orient.type === VERTICAL) {
+        position_key = "yPos";
+        size_key = "height";
+      }
+      const cur_page_start =
+        this._Template.List[cur_page_head_index][position_key];
+      if (
+        template_item[position_key] + template_item[size_key] >
+        cur_page_start + this._PageSize
+      ) {
+        //新的页
+        cur_page_number++;
+        cur_page_head_index = this._Template.List.length;
+      }
+    }
+
+    template_item.pageNumber = cur_page_number;
+    template_item.pageHeadIndex = cur_page_head_index;
     // if (
     //   this._Template.Orient.type !== VERTICAL &&
     //   y_pos + y_width === this._Template.Orient.widthMax
@@ -955,6 +1012,7 @@ class TemplateParser {
         fence_stack.splice(one_ahead_last_fence_idx + 1, 0, fence);
       }
     }
+    return template_item;
   }
 
   GetItemById(id) {
@@ -1062,6 +1120,23 @@ class TemplateParser {
     return valid_id;
   }
 
+  _FindFocusableNeighbor(direction, item) {
+    if (
+      item.neighborIndexList[direction].length > 0 &&
+      !this._CheckIdsHasFocusable(item.neighborIndexList[direction])
+    ) {
+      const last_item_id =
+        item.neighborIndexList[direction][
+          item.neighborIndexList[direction].length - 1
+        ];
+      const idx = this._GetValidNeighborIndex(item.id, last_item_id, direction); // 查找其左右邻居
+      if (idx !== -1) {
+        item.neighborIndexList[direction] = []; // 清除无效项
+        item.neighborIndexList[direction].push(idx);
+      }
+    }
+  }
+
   CalculateNeighborWhenAddStop() {
     // Update Last Fence Edge(更新最后一行的fence edge）
     this._UpdateLastFenceEdge();
@@ -1080,99 +1155,74 @@ class TemplateParser {
         break;
       }
     }
+    //处理找到的neighbor均是占位符的情况
     for (let j = template_list.length - 1; j >= 0; j--) {
       const item = template_list[j];
       if (item.focusable) {
-        if (
-          item.neighborIndexList.bottom.length > 0 &&
-          !this._CheckIdsHasFocusable(item.neighborIndexList.bottom)
-        ) {
-          const last_bottom_item_id =
-            item.neighborIndexList.bottom[
-              item.neighborIndexList.bottom.length - 1
-            ];
-          const bottom_idx = this._GetValidNeighborIndex(
-            j,
-            last_bottom_item_id,
-            "bottom"
-          ); // 查找其左右邻居
-          if (bottom_idx !== -1) {
-            item.neighborIndexList.bottom = []; // 清除无效项
-            item.neighborIndexList.bottom.push(bottom_idx);
-          }
-        }
-        if (
-          item.neighborIndexList.top.length > 0 &&
-          !this._CheckIdsHasFocusable(item.neighborIndexList.top)
-        ) {
-          const top_idx = this._GetValidNeighborIndex(
-            j,
-            item.neighborIndexList.top[item.neighborIndexList.top.length - 1],
-            "top"
-          );
-          if (top_idx !== -1) {
-            item.neighborIndexList.top = []; // 清除无效项
-            item.neighborIndexList.top.push(top_idx);
-          }
-        }
-      }
-    }
-    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 = []; // 清除无效项
-        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) {
-              pre_row_item.neighborIndexList.bottom.push(last_item_index);
-            }
-          }
-        }
+        this._FindFocusableNeighbor("bottom", item);
+        this._FindFocusableNeighbor("top", item);
+        this._FindFocusableNeighbor("left", item);
+        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);
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
   }
 
   /**
@@ -1628,10 +1678,14 @@ class TemplateParser {
     const key_width = be_vertical_template
       ? check_item.width + check_item.marginRight
       : check_item.height + check_item.marginBottom;
+    const key_start = Math.round(key_pos);
+    const key_end = Math.round(key_pos + key_width - 1);
     const second_pos = be_vertical_template ? check_item.yPos : check_item.xPos;
     const second_width = be_vertical_template
       ? check_item.height + check_item.marginBottom
       : check_item.width + check_item.marginRight;
+    const second_start = Math.round(second_pos);
+    const second_end = Math.round(second_pos + second_width - 1);
     // console.log(
     //   "idx=" +
     //     (configures.baseIdx + offset) +
@@ -1649,24 +1703,24 @@ class TemplateParser {
     ) {
       let is_range_changed = false;
       if (
-        second_pos <= configures.common.checkingStartLinePos &&
-        second_pos + second_width - 1 >= configures.common.checkingStartLinePos
+        second_start <= configures.common.checkingStartLinePos &&
+        second_end >= configures.common.checkingStartLinePos
       ) {
         // Overlap the visbible start line
         configures.latestOverStartLineIdx = configures.baseIdx + offset;
         if (configures.firstStartLineBlockIdx < 0)
           configures.firstStartLineBlockIdx = configures.baseIdx + offset;
         configures.checkingStartLineRanges.Merge(
-          new SingleRangeModel(key_pos, key_pos + key_width - 1)
+          new SingleRangeModel(key_start, key_end)
         );
         is_range_changed = true;
       } else if (
         configures.searchDirect < 0 &&
-        second_pos + second_width - 1 <= configures.common.checkingStartLinePos
+        second_end <= configures.common.checkingStartLinePos
       ) {
         // above the visible start line
         configures.checkingStartLineRanges.Merge(
-          new SingleRangeModel(key_pos, key_pos + key_width - 1)
+          new SingleRangeModel(key_start, key_end)
         );
         is_range_changed = true;
       }
@@ -1716,24 +1770,24 @@ class TemplateParser {
     if (configures.common.resultEndIdx < 0 && !configures.endLineRangesFulled) {
       let is_range_changed = false;
       if (
-        second_pos <= configures.common.checkingEndLinePos &&
-        second_pos + second_width - 1 >= configures.common.checkingEndLinePos
+        second_start <= configures.common.checkingEndLinePos &&
+        second_end >= configures.common.checkingEndLinePos
       ) {
         // Overlap the visbible end line
         configures.latestOverEndLineIdx = configures.baseIdx + offset;
         if (configures.firstEndLineBlockIdx < 0)
           configures.firstEndLineBlockIdx = configures.baseIdx + offset;
         configures.checkingEndLineRanges.Merge(
-          new SingleRangeModel(key_pos, key_pos + key_width - 1)
+          new SingleRangeModel(key_start, key_end)
         );
         is_range_changed = true;
       } else if (
         configures.searchDirect > 0 &&
-        second_pos >= configures.common.checkingEndLinePos
+        second_start >= configures.common.checkingEndLinePos
       ) {
         // below the visible end line
         configures.checkingEndLineRanges.Merge(
-          new SingleRangeModel(key_pos, key_pos + key_width - 1)
+          new SingleRangeModel(key_start, key_end)
         );
         is_range_changed = true;
       }

package/utils/JsViewEngineWidget/index.js

@@ -2,13 +2,14 @@
  * @Author: ChenChanghua
  * @Date: 2021-06-16 10:07:20
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 10:40:47
+ * @LastEditTime: 2022-03-08 15:52:24
  * @Description: file content
  */
 
 export * from "./WidgetCommon";
 export * from "./SimpleWidget/Dispatcher";
 
-export { default as SimpleWidget } from "./SimpleWidget/SimpleWidget.vue";
+export { default as SimpleWidget } from "./MetroWidget/MetroWidget.vue";
 export { default as JsvFocusBlock } from "./JsvFocusBlock.vue";
+export { default as MetroWidget } from "./MetroWidget/MetroWidget.vue";
 export { jsvCreateFocusManager } from "./JsvFocusManager";

package/utils/JsViewPlugin/BrowserPluginLoader.js

@@ -0,0 +1,14 @@
+/*
+ * @Author: LuDonglin
+ * @Date: 2022-2-24 14:00:00
+ * @LastEditors: LuDonglin
+ * @LastEditTime: 2022-2-24 14:00:00
+ * @Description: file content
+ */
+import { JsvWidgetWrapperGroup } from 'jsview/utils/JsViewVueWidget/BrowserDebugWidget/WidgetWrapper.js';
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as BrowserJsvPlayer from "./JsvPlayer/JsvPlayerBrowser.vue";
+
+JsvWidgetWrapperGroup.BrowserJsvPlayer = BrowserJsvPlayer;
+
+console.log("load browser plugin widgets.");