@shijiu/jsview-vue 0.9.426 → 0.9.502

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -2,16 +2,16 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-25 18:08:58
+ * @LastEditTime: 2022-05-17 13:01:47
  * @Description: file content
 -->
 
 <!--
  * 【界面概述】
- * 展示SimpleWidget控件的用法
+ * 展示MetroWidget控件的用法
  *
  * 【控件介绍】
- * SimpleWidget:
+ * MetroWidget:
  *    props:
  *      top {int} 控件的y，默认为0
  *      left {int} 控件的x， 默认为0
@@ -76,6 +76,8 @@
  *      flingPageWidth {}
  *      flingPageEdge {}
  *    methods:
+        getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
+
         slideTo
           @description 滚动到指定位置
           @params {int} position 滚动目标位置
@@ -89,7 +91,7 @@
           @params {int} id 落焦时的焦点id
         setEnterFocusRect
           @description 设置落焦时的焦点查找去区域
-          @params {Object} rectInfo 焦点移入时的区域,SimpleWidget 将会根据此区域寻找最近的item
+          @params {Object} rectInfo 焦点移入时的区域,MetroWidget 将会根据此区域寻找最近的item
                             {
                               direction: {EdgeDirection}
                               rect: {
@@ -114,7 +116,7 @@
                 { 
                   id: {int} item的id,
                   position: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
-                            获取 item 相对 SimpleWidget 左上角坐标
+                            获取 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}
@@ -152,6 +154,8 @@
       requestFocus函数需要传递一个false参数
 -->
 <script>
+/* eslint-disable no-unused-vars */
+
 import { ref, reactive } from "vue";
 import RootView from "./RootView.vue";
 import Forge from "../ForgeDefine";
@@ -331,30 +335,50 @@ class PageUpdater {
     this._updateFunc = update_func;
   }
 
-  update(template, visible_start, visible_end, anchor_id, merge_tmp) {
+  update(
+    template,
+    visible_start,
+    visible_end,
+    anchor_id,
+    merge_tmp,
+    permanent_list
+  ) {
+    if (!template || template.GetLength() === 0) return;
     let visible_range = template.GetVisibleItemList(
       visible_start,
       visible_end,
       anchor_id
     );
+    if (!visible_range) {
+      return;
+    }
+    let pre_tmp = this.tmpRangeList;
+    let pre_list = this.rangeList;
     let range = new ItemRange(
       visible_range.visibleStart,
       visible_range.visibleEnd
     );
-
-    if (this.rangeList.length > 0) {
-      let pre_tmp = this.tmpRangeList;
-      if (range.ifOverlap(this.rangeList[0])) {
-        this.tmpRangeList = [range.merge(this.rangeList[0])];
-      } else {
-        this.tmpRangeList = [range, this.rangeList[0]];
-      }
+    this.rangeList = [range];
+    if (permanent_list) {
+      let permanent_show_list = permanent_list.filter((item) => {
+        let result = false;
+        if (item.alreadyShow || item.index <= range.end) {
+          item.alreadyShow = true;
+          result = true;
+        }
+        return result;
+      });
+      let permanent_range_list = permanent_show_list.map((item) => {
+        return new ItemRange(item.index, item.index);
+      });
+      this.rangeList = mergeRangeList([range], permanent_range_list);
+    }
+    if (pre_list.length > 0) {
+      this.tmpRangeList = mergeRangeList(this.rangeList, pre_list);
       if (merge_tmp) {
         this.tmpRangeList = mergeRangeList(this.tmpRangeList, pre_tmp);
       }
     }
-
-    this.rangeList = [range];
   }
 
   debugPrint() {
@@ -454,7 +478,7 @@ const directionFreeKeyMap = {
 };
 
 const defaultSlideSetting = new SeamlessSlide(0.2, 0.8);
-const SimpleWidget = {
+const MetroWidget = {
   components: { RootView },
   props: {
     padding: {
@@ -610,8 +634,8 @@ const SimpleWidget = {
       visibleRange: 0,
       visibleRangeWithPadding: 0,
 
-      touchContainerW: 0,
-      touchContainerH: 0,
+      touchContainerW: ref(0),
+      touchContainerH: ref(0),
       touchListener: null,
       innerPadding: null,
       slidePile: null,
@@ -620,6 +644,11 @@ const SimpleWidget = {
       preAnchorItemIndex: -1,
       templateItemAdder: null,
       itemRender: ref(false),
+      permanentItemList: [],
+      preUpdateVisibleStart: 0,
+
+      updateTimerHandler: -1,
+      mounted: false,
     };
   },
   methods: {
@@ -775,6 +804,10 @@ const SimpleWidget = {
       }
     },
 
+    getFocusBlockRef() {
+      return this.$refs.focusNode;
+    },
+
     setEnterFocusId(id) {
       this.templateItemAdder.tryAddItemById(id);
       this.enterFocusId = id;
@@ -807,7 +840,9 @@ const SimpleWidget = {
           this.templateParser,
           this.visibleStart,
           this.visibleStart + this.visibleRangeWithPadding - 1,
-          this.focusId
+          this.focusId,
+          false,
+          this.permanentItemList
         );
         if (doAnim) {
           this.pageUpdater.applyTmp();
@@ -836,7 +871,11 @@ const SimpleWidget = {
         console.error("refreshData: provideData is null.");
         return;
       }
+      let _force_update = force_update;
       let template_list = this.templateParser.GetTemplate().List;
+      if (!template_list || template_list.length === 0) {
+        _force_update = true;
+      }
       let new_list = this.provideData();
       if (this.focusId >= new_list.length) {
         this.focusId = 0;
@@ -847,7 +886,7 @@ const SimpleWidget = {
         }
       }
       let new_index = 0;
-      if (!force_update) {
+      if (!_force_update) {
         for (new_index = 0; new_index < new_list.length; ++new_index) {
           let already_add = false;
           for (let j = 0; j < template_list.length; ++j) {
@@ -862,7 +901,7 @@ const SimpleWidget = {
         }
       }
       let need_update_content = false;
-      if (new_index === template_list.length) {
+      if (!_force_update && new_index === template_list.length) {
         //原始数据都在
         if (new_index !== new_list.length) {
           //增加数据
@@ -873,8 +912,9 @@ const SimpleWidget = {
         }
       } else {
         //数据更改
+        this.permanentItemList = [];
         need_update_content = true;
-        let template_parser = _getTemplateParser(
+        this.templateParser = _getTemplateParser(
           this.width,
           this.height,
           this.direction,
@@ -885,14 +925,13 @@ const SimpleWidget = {
         this.innerData = [];
         this.dataList = new_list;
         this.templateItemAdder = new TemplateItemAdder(
-          template_parser,
+          this.templateParser,
           new_list,
           this.measures,
           this.visibleRangeWithPadding,
           this._onTemplateAdd
         );
         this.templateItemAdder.tryAddItemById(this.focusId);
-        this.templateParser = template_parser;
       }
       if (need_update_content) {
         let template_list = this.templateParser.GetTemplate().List;
@@ -922,7 +961,9 @@ const SimpleWidget = {
         this.templateParser,
         this.visibleStart,
         this.visibleStart + this.visibleRangeWithPadding - 1,
-        this.focusId
+        this.focusId,
+        false,
+        this.permanentItemList
       );
       this.dataUpdateToken++;
       this.pageUpdater.apply();
@@ -1132,6 +1173,27 @@ const SimpleWidget = {
     },
 
     onKeyDown(ev) {
+      if (this.innerData.length == 0) {
+        const edgeDirectionMap = {
+          37: EdgeDirection.left,
+          38: EdgeDirection.top,
+          39: EdgeDirection.right,
+          40: EdgeDirection.bottom,
+        };
+        if (typeof edgeDirectionMap[ev.keyCode] !== "undefined") {
+          this.onEdge?.({
+            direction: edgeDirectionMap[ev.keyCode],
+            rect: {
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+            },
+          });
+          return true;
+        }
+        return false;
+      }
       let horizontal_direction = 0;
       let vertical_direction = 0;
       switch (ev.keyCode) {
@@ -1182,6 +1244,18 @@ const SimpleWidget = {
         itemHandler: {},
         itemConfig: this.itemConfig?.(item.data),
       });
+      if (item.permanent) {
+        this.permanentItemList.push({
+          index: this.innerData.length - 1,
+          alreadyShow: false,
+        });
+      }
+      const lastItem = this.templateParser.GetItem(-1);
+      if (this.direction == VERTICAL) {
+        this.touchContainerH = lastItem.yPos + lastItem.height - 1;
+      } else {
+        this.touchContainerW = lastItem.xPos + lastItem.width - 1;
+      }
     },
 
     _onCustomerEvent(ev) {
@@ -1223,7 +1297,8 @@ const SimpleWidget = {
             this.visibleStart,
             this.visibleStart + this.visibleRangeWithPadding - 1,
             this.focusId,
-            true
+            true,
+            this.permanentItemList
           );
           this.pageUpdater.applyTmp();
           this._slideTo(this.visibleStart, {
@@ -1288,7 +1363,9 @@ const SimpleWidget = {
             this.templateParser,
             cur_visible_start,
             cur_visible_start + this.visibleRangeWithPadding - 1,
-            next_item_id
+            next_item_id,
+            false,
+            this.permanentItemList
           );
           this.pageUpdater.applyTmp();
         }
@@ -1401,7 +1478,7 @@ const SimpleWidget = {
     _calculateVisibleStart(target_item, direction) {
       if (!target_item) {
         console.error(
-          "SimpleWidget: _calculateVisibleStart target item is null"
+          "MetroWidget: _calculateVisibleStart target item is null"
         );
         return 0;
       }
@@ -1465,7 +1542,7 @@ const SimpleWidget = {
           break;
         default:
           console.error(
-            "SimpleWidget: undefined slide type",
+            "MetroWidget: undefined slide type",
             this.slideSetting.Type
           );
       }
@@ -1525,10 +1602,20 @@ const SimpleWidget = {
     },
 
     _setZIndex(index, z_index) {
-      this.innerData[index].controller.zIndex = z_index;
+      if (this.innerData[index]) {
+        this.innerData[index].controller.zIndex = z_index;
+      }
     },
 
     _onFocus() {
+      this.isFocus = true;
+      this.preFocusId = -1;
+      if (this.innerData.length === 0) {
+        console.warn(
+          `MetroWidget: ${this.name} get focus while data is empty.`
+        );
+        return;
+      }
       let focus_id =
         typeof this.enterFocusId !== "undefined" &&
         this.enterFocusId >= 0 &&
@@ -1542,9 +1629,7 @@ const SimpleWidget = {
           )
         : focus_id;
       this.preEdgeRect = this.enterFocusRect;
-      this.isFocus = true;
       this.focusId = focus_id;
-      this.preFocusId = -1;
       this.enterFocusId = -1;
       this.enterFocusRect = null;
       this._updateFocusItem();
@@ -1566,9 +1651,11 @@ const SimpleWidget = {
       this.isFocus = false;
       this.enterFocusId = -1;
       this.enterFocusRect = null;
-
-      this.preFocusId = this.focusId;
       this.preEdgeRect = null;
+      if (this.innerData.length === 0) {
+        return;
+      }
+      this.preFocusId = this.focusId;
       this._updateBlurItem();
       this.innerData[
         this.templateParser.FocusIdToIndex(this.preFocusId)
@@ -1635,28 +1722,22 @@ const SimpleWidget = {
       this.rootElement = ele;
     },
 
-    _tryReoprtVisibleEvent(msg) {
-      if (msg) {
-        return;
-      }
-      // if (typeof msg.viewY != "undefined" && typeof msg.viewX != "undefined") {
-      //   if (this.direction === VERTICAL) {
-      //     this.visibleStart = -msg.viewY;
-      //   } else {
-      //     this.visibleStart = -msg.viewX;
-      //   }
-      //   if (this.visibleStart < 0) {
-      //     this.visibleStart = 0;
-      //   }
-      // }
-      // let cur_visible_start =
-      //   this.visibleStart - this.visibleRangeWithPadding * 2;
-      // let cur_visible_end =
-      //   this.visibleStart + this.visibleRangeWithPadding * 3 - 1;
-      // let baseItemId = this.visibleRangeSearchBaseItem
-      //   ? this.visibleRangeSearchBaseItem
-      //   : 0;
-      // this._updateVisibleList(baseItemId, cur_visible_start, cur_visible_end);
+    _onDragUpdateItem(visible_start, visible_end) {
+      this.templateItemAdder.tryAddItemByPosition(visible_end);
+      let baseItemId = this.visibleRangeSearchBaseItem
+        ? this.visibleRangeSearchBaseItem
+        : 0;
+      this.pageUpdater.update(
+        this.templateParser,
+        visible_start,
+        visible_end,
+        baseItemId,
+        false,
+        this.permanentItemList
+      );
+      this.pageUpdater.apply();
+
+      Forge.sRenderBridge.InstantPerformSwap();
     },
 
     _getTouchListener() {
@@ -1665,37 +1746,72 @@ const SimpleWidget = {
       }
       let callback = {
         OnDragStart: (msg) => {
-          // console.log("SimpleWidget Container OnDragStart:", msg);
           //删除焦点
-          Promise.resolve().then(() => {
-            this._tryReoprtVisibleEvent(msg);
-            Forge.sRenderBridge.InstantPerformSwap();
-          });
+          if (this.mounted) {
+            Promise.resolve().then(() => {
+              let cur_visible_start =
+                this.visibleStart - this.visibleRangeWithPadding * 2;
+              let cur_visible_end =
+                this.visibleStart + this.visibleRangeWithPadding * 3 - 1;
+              this.preUpdateVisibleStart = cur_visible_start;
+              this._onDragUpdateItem(cur_visible_start, cur_visible_end);
+            });
+          }
           return true;
         },
         OnMoved: (msg) => {
-          Promise.resolve().then(() => {
-            this._tryReoprtVisibleEvent(msg);
-            Forge.sRenderBridge.InstantPerformSwap();
-          });
+          if (this.mounted) {
+            Promise.resolve().then(() => {
+              if (
+                typeof msg.viewY != "undefined" &&
+                typeof msg.viewX != "undefined"
+              ) {
+                if (this.direction === VERTICAL) {
+                  this.visibleStart = -msg.viewY;
+                } else {
+                  this.visibleStart = -msg.viewX;
+                }
+                if (this.visibleStart < 0) {
+                  this.visibleStart = 0;
+                }
+              }
+              if (
+                Math.abs(this.visibleStart - this.preUpdateVisibleStart) <=
+                this.visibleRangeWithPadding
+              ) {
+                let cur_visible_start =
+                  this.visibleStart - this.visibleRangeWithPadding * 2;
+                let cur_visible_end =
+                  this.visibleStart + this.visibleRangeWithPadding * 3 - 1;
+                this.preUpdateVisibleStart = cur_visible_start;
+                this._onDragUpdateItem(cur_visible_start, cur_visible_end);
+              }
+            });
+          }
+
           return true;
         },
         OnDragEnd: (msg) => {
-          // console.log("SimpleWidget Container OnDragEnd:", msg);
-          this._tryReoprtVisibleEvent(msg);
+          this.$refs.rootView?.updatePosition(msg["viewX"], msg["viewY"], null);
+          this.preUpdateVisibleStart = this.visibleStart;
+          this._onDragUpdateItem(
+            this.visibleStart,
+            this.visibleStart + this.visibleRangeWithPadding - 1
+          );
           this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          this._onSlideEnd();
           return true;
         },
         OnFling: (msg) => {
-          // console.log("SimpleWidget Container OnFling:", msg);
-          this._tryReoprtVisibleEvent(msg);
+          this.$refs.rootView?.updatePosition(msg["viewX"], msg["viewY"], null);
+          this.preUpdateVisibleStart = this.visibleStart;
+          this._onDragUpdateItem(
+            this.visibleStart,
+            this.visibleStart + this.visibleRangeWithPadding - 1
+          );
           this._updateFocusByDragInfo(msg["viewX"], msg["viewY"]);
-          this._onSlideEnd();
           return true;
         },
-        OnRelease: () => {
-          // console.log("SimpleWidget Container OnRelease:", msg);
+        OnRelease: (msg) => {
           return true;
         },
       };
@@ -1717,7 +1833,8 @@ const SimpleWidget = {
       this.$refs.rootView?.updateData(list);
       this.refreshToken++;
       this.itemRender = false;
-      setTimeout(() => {
+      clearTimeout(this.updateTimerHandler);
+      this.updateTimerHandler = setTimeout(() => {
         this.itemRender = true;
       }, 0);
     },
@@ -1744,7 +1861,8 @@ const SimpleWidget = {
     } else if (this.data) {
       this.dataList = this.data;
     }
-    let template_parser = _getTemplateParser(
+
+    this.templateParser = _getTemplateParser(
       this.width,
       this.height,
       this.direction,
@@ -1753,25 +1871,26 @@ const SimpleWidget = {
       this.layoutType
     );
     this.templateItemAdder = new TemplateItemAdder(
-      template_parser,
+      this.templateParser,
       this.dataList,
       this.measures,
       this.visibleRangeWithPadding,
       this._onTemplateAdd
     );
     this.templateItemAdder.tryAddItem(null, 2);
-    this.templateParser = template_parser;
     let template_list = this.templateParser.GetTemplate().List;
     let last_item = template_list[template_list.length - 1];
-    this.touchListener = this._getTouchListener();
-    this.touchContainerW =
-      this.direction === VERTICAL
-        ? this.width
-        : last_item.xPos + last_item.width;
-    this.touchContainerH =
-      this.direction === VERTICAL
-        ? last_item.yPos + last_item.height
-        : this.height;
+    if (last_item) {
+      this.touchListener = this._getTouchListener();
+      this.touchContainerW =
+        this.direction === VERTICAL
+          ? this.width
+          : last_item.xPos + last_item.width;
+      this.touchContainerH =
+        this.direction === VERTICAL
+          ? last_item.yPos + last_item.height
+          : this.height;
+    }
     this.slidePile = new Forge.RectArea(
       0,
       0,
@@ -1782,6 +1901,7 @@ const SimpleWidget = {
     let cur_visible_start = 0;
 
     if (this.initFocusId) {
+      this.templateItemAdder.tryAddItemById(this.initFocusId);
       const item = this.templateParser.GetItemById(this.initFocusId);
       if (item) {
         init_focus_id = this.initFocusId;
@@ -1799,18 +1919,23 @@ const SimpleWidget = {
       this.templateParser,
       this.visibleStart,
       this.visibleStart + this.visibleRangeWithPadding - 1,
-      0
+      0,
+      false,
+      this.permanentItemList
     );
     this.pageUpdater.apply();
+    this.mounted = true;
   },
   beforeUnmount() {
+    this.mounted = false;
     if (this.dispatcher) {
       this.dispatcher.unregisterComponent();
     }
+    clearTimeout(this.updateTimerHandler);
   },
 };
 
-export default SimpleWidget;
+export default MetroWidget;
 </script>
 
 <template>

package/utils/JsViewEngineWidget/MetroWidget/RootView.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 14:03:32
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-25 14:29:31
+ * @LastEditTime: 2022-04-12 09:14:22
  * @Description: file content
 -->
 <script>
@@ -117,7 +117,8 @@ export default {
   },
   mounted() {
     //TODO 触控的处理有待添加
-    // this.$_rootView_initTouch_();
+    this.$_rootView_initTouch_();
+    //window.touchDiv = this.$refs.element
   },
 };
 </script>
@@ -150,4 +151,4 @@ export default {
       </div>
     </div>
   </div>
-</template>
+</template>

package/utils/JsViewEngineWidget/SimpleWidget/SimpleWidget.vue

@@ -65,6 +65,8 @@
  *      flingPageWidth {}
  *      flingPageEdge {}
  *    methods:
+        getFocusBlockRef 获取此SimpleWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
+
         slideTo
           @description 滚动到指定位置
           @params {int} position 滚动目标位置

package/utils/JsViewEngineWidget/TemplateParser.js

@@ -102,6 +102,10 @@ function getTemplateItem(measure_obj, data_info) {
       typeof measure_obj.doSlide !== "undefined" ? measure_obj.doSlide : true,
     pageNumber: -1,
     pageHeadIndex: -1,
+    permanent:
+      typeof measure_obj.permanent !== "undefined"
+        ? measure_obj.permanent
+        : false,
   };
 }
 
@@ -235,11 +239,9 @@ class Fence {
       }
     }
 
-    if (gap_idx === -1)
-      console.log(
-        `Error in mark gap used, not found suitable gap of offset=${this.AheadOffset}`
-      );
-    // Forge.ThrowError("Error in mark gap used, not found suitable gap of offset=" + this.AheadOffset);
+    if (gap_idx === -1) {
+      return; // 区域完全重复，无法找到新区域
+    }
 
     this._SplitGap(gap_idx, start_pos, width);
 
@@ -848,7 +850,7 @@ class TemplateParser {
       let gap_info = null;
       while (fence_stack.length > 0) {
         const checking_fence = fence_stack[fence_stack.length - 1];
-        gap_info = checking_fence.HasGapFor(item_key_width);
+        gap_info = checking_fence.HasGapFor(item_key_width + item_key_margin);
         if (gap_info !== null) {
           top_fence = checking_fence;
           break;

package/utils/JsViewPlugin/JsvPlayer/GetVersion.js

@@ -0,0 +1,20 @@
+import PluginInfo from './version'
+
+function reconfigPluginInfo() {
+    if(typeof window.jJsvRuntimeBridge!=='undefined' && window.jJsvRuntimeBridge && typeof window.jJsvRuntimeBridge.getPluginBaseUrl !== "undefined"){
+        let plugin_base_url = window.jJsvRuntimeBridge.getPluginBaseUrl();
+        if(plugin_base_url){
+            PluginInfo.downloadUrl = (plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+PluginInfo.packageName+"/JsvPlayer-"+PluginInfo.versionCodeMax+".zip?md5="+PluginInfo.md5;
+        }
+    }
+}
+
+reconfigPluginInfo();
+
+function getPluginInfo(){
+    return PluginInfo;
+}
+
+export {
+    getPluginInfo
+}