@shijiu/jsview-vue 0.9.684 → 0.9.783

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) {
@@ -1064,8 +1064,13 @@ class TemplateParser {
     return this._Template.List.length;
   }
 
-  FocusIdToIndex(id) {
-    return this._Template.IdsMap[id];
+  IdToIndex(id) {
+    const index = this._Template.IdsMap[id];
+    if (typeof index !== "undefined") {
+      return index;
+    } else {
+      return -1;
+    }
   }
 
   /**
@@ -1200,64 +1205,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);
-    //         }
-    //       }
-    //     }
-    //   }
-    // }
   }
 
   /**
@@ -1270,47 +1217,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) {
@@ -1476,94 +1452,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;
   }
 

package/utils/JsViewEngineWidget/WidgetCommon.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2020-12-30 14:08:38
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-09 09:33:15
+ * @LastEditTime: 2022-12-01 16:49:21
  * @Description: file content
  */
 class BaseDispatcher {
@@ -84,7 +84,7 @@ function getPositionRelativeToView(divElement, targetElement) {
   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;
 }
@@ -174,7 +174,7 @@ class SeamlessSlide extends SlideSetting {
  **/
 class FixPositionSlide extends SlideSetting {
   constructor({
-    fixPercent,
+    fixPercent = .5,
     speed = defaultSpeed,
     easing = defaultEasing,
     boundaryProtect = SlideSetting.START_PROTECT | SlideSetting.END_PROTECT,
@@ -184,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 (
@@ -203,4 +211,5 @@ export {
   WholePageSlide,
   SeamlessSlide,
   FixPositionSlide,
+  FocusMoveType,
 };

package/utils/JsViewPlugin/BrowserPluginLoader.js

@@ -1,14 +1,16 @@
 /*
  * @Author: LuDonglin
  * @Date: 2022-2-24 14:00:00
- * @LastEditors: LuDonglin
- * @LastEditTime: 2022-2-24 14:00:00
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-02 10:56:24
  * @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";
+import * as BrowserJsvAudio from "./JsvAudio/JsvAudioBrowser.vue";
 
 JsvWidgetWrapperGroup.BrowserJsvPlayer = BrowserJsvPlayer;
+JsvWidgetWrapperGroup.BrowserJsvAudio = BrowserJsvAudio;
 
 console.log("load browser plugin widgets.");