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

package/utils/JsViewEngineWidget/MetroWidget/RootView.vue

@@ -0,0 +1,153 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-22 14:03:32
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-03-25 14:29:31
+ * @Description: file content
+-->
+<script>
+import ContentView from "./ContentView.vue";
+import Forge from "../ForgeDefine";
+
+export default {
+  props: {
+    tokenForRefresh: Number,
+    dataUpdateToken: Number,
+    onItemEdge: Function,
+    onLoad: Function,
+    register: Function,
+    widgetHandler: Object,
+    placeHolderSetting: Object,
+
+    x: Number,
+    y: Number,
+    width: Number,
+    height: Number,
+
+    loadAll: Boolean,
+    enableTouch: Boolean,
+    touchListener: Object,
+    flingPageWidth: Number,
+    flingPageEdge: Number,
+    slidePile: Object,
+    direction: Number, //Forge.DragSetting的方向是数字类型
+    enableItemRenderBreak: Boolean,
+  },
+  components: {
+    ContentView,
+  },
+  data() {
+    return {
+      innerX: 0,
+      innerY: 0,
+    };
+  },
+  setup() {
+    let element = {};
+    return {
+      element,
+    };
+  },
+  methods: {
+    $_rootView_initTouch_() {
+      if (this.touchListener && this.$refs.element) {
+        let view = this.$refs.element.jsvMaskView;
+        let page_width = this.flingPageWidth;
+        let page_edge = this.flingPageEdge;
+        let slide_pile = this.slidePile;
+        var drag_setting = new Forge.DragSetting(
+          this.direction,
+          20,
+          false,
+          slide_pile,
+          page_width,
+          page_edge
+        );
+        view.EnableDrag(
+          drag_setting,
+          this.touchListener,
+          "translateMat(dx,dy,0)"
+        );
+      }
+    },
+    updatePosition(x, y, anim_info) {
+      if (this.$refs.element) {
+        let pre_pos = this.$refs.element.jsvMaskView.GetLayoutParams();
+        //jsvMaskView的位置更新时会被设置位0，因此不能通过ResetLayoutParams设置位置
+        this.innerX = x;
+        this.innerY = y;
+        if (anim_info) {
+          let delta_x = Math.abs(pre_pos.MarginLeft - x);
+          let delta_y = Math.abs(pre_pos.MarginTop - 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,
+            0,
+            pre_pos.MarginTop - y,
+            0,
+            duration,
+            anim_info.easing
+          );
+          slide_animation.SetAnimationListener(
+            new Forge.AnimationListener(
+              anim_info.onstart,
+              anim_info.onend,
+              null
+            )
+          );
+          this.$refs.element.jsvMaskView.StartAnimation(slide_animation);
+        }
+      }
+    },
+    updateData(data) {
+      this.$refs?.contentView?.updateData(data);
+    },
+    getLocateDiv() {
+      return this.$refs.locateDiv;
+    },
+  },
+  created() {
+    if (this.register) {
+      this.register(this);
+    }
+  },
+  mounted() {
+    //TODO 触控的处理有待添加
+    // this.$_rootView_initTouch_();
+  },
+};
+</script>
+
+<template>
+  <div :style="{ left: x, top: y }">
+    <div
+      key="touchcontainer"
+      ref="element"
+      :style="{ left: innerX, top: innerY, width: width, height: height }"
+    >
+      <!-- 用于定位的div -->
+      <div ref="locateDiv">
+        <content-view
+          ref="contentView"
+          :tokenForRefresh="tokenForRefresh"
+          :dataUpdateToken="dataUpdateToken"
+          :onItemEdge="onItemEdge"
+          :loadAll="loadAll"
+          :enableTouch="enableTouch"
+          :onLoad="onLoad"
+          :widgetHandler="widgetHandler"
+          :enableItemRenderBreak="enableItemRenderBreak"
+          :placeHolderSetting="placeHolderSetting"
+        >
+          <template v-slot:renderItem="slotProps">
+            <slot name="renderItem" v-bind="slotProps"></slot>
+          </template>
+        </content-view>
+      </div>
+    </div>
+  </div>
+</template>

package/utils/JsViewEngineWidget/SimpleWidget/SimpleWidget.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-11 15:44:05
+ * @LastEditTime: 2022-02-28 18:14:29
  * @Description: file content
 -->
 
@@ -149,9 +149,9 @@ import {
   EdgeDirection,
   VERTICAL,
   HORIZONTAL,
-  getPositionRelativeToView,
   SlideSetting,
   SeamlessSlide,
+  getPositionRelativeToView,
 } from "../WidgetCommon";
 
 let emptyFunc = () => {};
@@ -326,7 +326,6 @@ const SimpleWidget = {
     },
     data: {
       type: Array,
-      required: true,
     },
     left: {
       type: Number,
@@ -360,7 +359,10 @@ const SimpleWidget = {
     enableItemRenderBreak: {
       type: Boolean,
       default: false,
-    }
+    },
+    provideData: {
+      type: Function,
+    },
   },
   watch: {
     data: function (value, oldValue) {
@@ -372,6 +374,7 @@ const SimpleWidget = {
       token: ref(0),
       templateParser: null,
       innerData: [],
+      dataList: [],
 
       enterFocusId: -1,
       enterFocusRect: null,
@@ -593,6 +596,126 @@ const SimpleWidget = {
       }
     },
 
+    freshData(force_update) {
+      //由于data不支持reactive, 因此数据的更新只通过provideData
+      if (!this.provideData) {
+        console.error("freshData: provideData is null.");
+        return;
+      }
+      let new_list = this.provideData();
+      let new_index = 0;
+      let template_list = this.templateParser.GetTemplate().List;
+      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) {
+            if (new_list[new_index] === template_list[j].data) {
+              already_add = true;
+              break;
+            }
+          }
+          if (!already_add) {
+            break;
+          }
+        }
+      }
+      let need_update_content = false;
+      if (new_index === template_list.length) {
+        //原始数据都在
+        if (new_index !== new_list.length) {
+          //增加数据
+          need_update_content = true;
+          _AddTemplateItem(
+            new_list,
+            this.measures,
+            this.templateParser,
+            new_index
+          );
+        } else {
+          //数据没变
+        }
+      } else {
+        //数据更改
+        need_update_content = true;
+        let template_parser = _getTemplateParser(
+          this.width,
+          this.height,
+          this.direction,
+          this.padding,
+          this.supportHistoryPath,
+          this.layoutType
+        );
+        _AddTemplateItem(new_list, this.measures, template_parser, 0);
+        this.templateParser = template_parser;
+      }
+      if (need_update_content) {
+        let template_list = this.templateParser.GetTemplate().List;
+        let last_item = template_list[template_list.length - 1];
+        this.touchListener = this._getTouchListener();
+        this.innerPadding = _getPadding(this.padding);
+        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,
+          this.width - this.innerPadding.left - this.innerPadding.right,
+          this.height - this.innerPadding.top - this.innerPadding.bottom
+        );
+        this.dragDirection =
+          this.direction === VERTICAL
+            ? Forge.DragSetting.DIRECTION_VERTICAL
+            : Forge.DragSetting.DIRECTION_HORIZONTAL;
+        this.innerData = template_list.map((item, index) => {
+          return {
+            data: item,
+            index: index,
+            controller: reactive({
+              visible: false,
+              zIndex: 0,
+            }),
+            mounted: false,
+            itemRef: null,
+            //之前的update时itemView不一定会重新create，因此注册的函数可以重复使用。若create了则会覆盖。
+            itemHandler: this.innerData[index]
+              ? { ...this.innerData[index].itemHandler }
+              : {},
+            itemConfig: this.itemConfig?.(item.data),
+          };
+        });
+        this.token++;
+      }
+      if (this.focusId >= new_list.length) {
+        this.focusId = 0;
+        this.preFocusId = -1;
+        this.visibleRangeSearchBaseItem = 0;
+        if (this.visibleStart !== 0) {
+          this.visibleStart = 0;
+          this._slideTo(0, null);
+        }
+      }
+      //重新获取可视itemlist
+      this.visibleItemIndexList = this._getVisibleItemIndexList(
+        this.visibleRangeSearchBaseItem,
+        this.visibleStart,
+        this.visibleStart + this.visibleRange - 1
+      );
+      if (
+        this.isFocus &&
+        this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
+      ) {
+        this._updateFocusItem();
+        this.innerData[
+          this.templateParser.FocusIdToIndex(this.focusId)
+        ].itemHandler.onFocus?.(null);
+      }
+    },
+
     _getVisibleItemIndexList(id, start, end) {
       // 扩展可视范围，避免快速滚动时闪烁
       let s = start - 100 > 0 ? start - 100 : 0;
@@ -909,6 +1032,8 @@ const SimpleWidget = {
             cur_visible_start,
             cur_visible_start + this.visibleRangeWithPadding - 1
           );
+        } else {
+          // 无滚动, 通知父滚动
         }
 
         let rect;
@@ -1250,7 +1375,7 @@ const SimpleWidget = {
     _updateFocusItem() {
       this._setZIndex(
         this.templateParser.FocusIdToIndex(this.focusId),
-        this.data.length
+        this.innerData.length
       );
     },
 
@@ -1377,7 +1502,12 @@ const SimpleWidget = {
       this.supportHistoryPath,
       this.layoutType
     );
-    _AddTemplateItem(this.data, this.measures, template_parser, 0);
+    if (this.provideData) {
+      this.dataList = this.provideData();
+    } else if (this.data) {
+      this.dataList = this.data;
+    }
+    _AddTemplateItem(this.dataList, this.measures, template_parser, 0);
     this.templateParser = template_parser;
     let template_list = this.templateParser.GetTemplate().List;
     let last_item = template_list[template_list.length - 1];
@@ -1441,118 +1571,7 @@ const SimpleWidget = {
     this.focusId = init_focus_id;
     this.visibleStart = cur_visible_start;
   },
-  updated() {
-    let template_list = this.templateParser.GetTemplate().List;
-    let new_list = this.data;
-    let new_index = 0;
-    for (new_index = 0; new_index < new_list.length; ++new_index) {
-      let already_add = false;
-      for (let j = 0; j < template_list.length; ++j) {
-        if (new_list[new_index] === template_list[j].data) {
-          already_add = true;
-          break;
-        }
-      }
-      if (!already_add) {
-        break;
-      }
-    }
-    let need_update_content = false;
-    if (new_index === template_list.length) {
-      //原始数据都在
-      if (new_index !== new_list.length) {
-        //增加数据
-        need_update_content = true;
-        _AddTemplateItem(
-          this.data,
-          this.measures,
-          this.templateParser,
-          new_index
-        );
-      } else {
-        //数据没变
-      }
-    } else {
-      //数据更改
-      need_update_content = true;
-      let template_parser = _getTemplateParser(
-        this.width,
-        this.height,
-        this.direction,
-        this.padding,
-        this.supportHistoryPath,
-        this.layoutType
-      );
-      _AddTemplateItem(this.data, this.measures, template_parser, 0);
-      this.templateParser = template_parser;
-    }
-    if (need_update_content) {
-      let template_list = this.templateParser.GetTemplate().List;
-      let last_item = template_list[template_list.length - 1];
-      this.touchListener = this._getTouchListener();
-      this.innerPadding = _getPadding(this.padding);
-      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,
-        this.width - this.innerPadding.left - this.innerPadding.right,
-        this.height - this.innerPadding.top - this.innerPadding.bottom
-      );
-      this.dragDirection =
-        this.direction === VERTICAL
-          ? Forge.DragSetting.DIRECTION_VERTICAL
-          : Forge.DragSetting.DIRECTION_HORIZONTAL;
-      this.innerData = template_list.map((item, index) => {
-        return {
-          data: item,
-          index: index,
-          controller: reactive({
-            visible: false,
-            zIndex: 0,
-          }),
-          mounted: false,
-          itemRef: null,
-          //之前的update时itemView不一定会重新create，因此注册的函数可以重复使用。若create了则会覆盖。
-          itemHandler: this.innerData[index]
-            ? { ...this.innerData[index].itemHandler }
-            : {},
-          itemConfig: this.itemConfig?.(item.data),
-        };
-      });
-      this.token++;
-    }
-    if (this.focusId >= this.data.length) {
-      this.focusId = 0;
-      this.preFocusId = -1;
-      this.visibleRangeSearchBaseItem = 0;
-      if (this.visibleStart !== 0) {
-        this.visibleStart = 0;
-        this._slideTo(0, null);
-      }
-    }
-    //重新获取可视itemlist
-    this.visibleItemIndexList = this._getVisibleItemIndexList(
-      this.visibleRangeSearchBaseItem,
-      this.visibleStart,
-      this.visibleStart + this.visibleRange - 1
-    );
-    if (
-      this.isFocus &&
-      this.innerData[this.templateParser.FocusIdToIndex(this.focusId)].mounted
-    ) {
-      this._updateFocusItem();
-      this.innerData[
-        this.templateParser.FocusIdToIndex(this.focusId)
-      ].itemHandler.onFocus?.(null);
-    }
-  },
+  updated() {},
   mounted() {
     if (this.visibleStart) {
       this._slideTo(this.visibleStart, null);