@shijiu/jsview-vue 0.9.422 → 0.9.490

package/utils/JsViewVueWidget/JsvGrid.vue

@@ -0,0 +1,573 @@
+<!--
+ * 【界面概述】
+ *  表格式布局控件, 页面滚动时无动画. 一般用于对页面刷新速度有要求的场景
+ *
+ * 【控件介绍】
+ * JsvGrid:
+ *    props:
+ *      left {int} 控件的left
+ *      top {int} 控件的top
+ *      name {String} (必选)控件的焦点Id
+ *      provideData {function} (必选)提供数据的接口, 数据中每个item均会包装成reactive对象,出于优化性能考虑, 请简化item中的属性
+ *      row {int} (必选)布局的行数
+ *      column {int} (必选)布局的列数
+ *      itemSize {Object} 格子的大小 {width: 0, height: 0}
+ *      updateType {UpdateType} 滚动的类型, 目前有两种PageType(整页), LineType(逐行)
+ *      initFocusId {int} 初始的焦点
+ *      gapInfo {Object} 格子间隔设置 {row: 行间距, colum: 列间距}
+ *      verticalUpdate {boolean} 是否纵向滚动
+ *      columnFirst {boolean} 单页是否列优先排布 
+ *      onEdge {function} 焦点移动到边缘时的回调
+ *              @params {object} edgeInfo {
+                                            "direction": {EdgeDirection}边缘方向, 
+                                            "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
+                                          }
+ *    methods:
+        getFocusBlockRef
+          @description 获取focusBlock的引用
+          @return {boolean} focusBlock的引用
+        setFocusId
+          @description 设置焦点id
+          @params {int} id 焦点id
+        refreshData
+          @description 刷新数据
+ * 【技巧说明】
+ * Q: 插槽props如何使用？
+ * A: userData: 通过provideData返回的数据会包装成reactive对象后给插槽内的item
+ *    widgetData: 控件内部的关于item的属性 
+                  {
+                    dataIndex: {int} 当前格子数据的index,
+                    gridIndex: {int} 当前格子的index,
+                    getCurrentFocusId: {function} 获取widget的当前焦点的dataIndex
+                  }
+ *    onAction: 单元格内控件需要通过onAction.register方法注册 item 的回调，回调函数有
+                onFocus， onBlur， onClick
+ * 
+ * Q: 单元格的普通状态，焦点状态，失焦状态如何渲染？
+ * A: 在单元的空间中通过往onAction注册的onFocus，onBlur控制显示
+ *
+ * Q: 控件中的导航处理(上下左右，OK键)需要什么响应的开发？
+ * A: 上下左右键已经由控件接管，不需要开发者而外处理，上下左右键会触发翻页时间
+ * 
+ * Q: 焦点怎么移出控件？
+ * A: 当焦点移动到控件边缘时，会调用onEdge回调。在回调中通过参数传递的值来决定焦点转移的行为
+ * 
+ * Q: item内是可获焦的元素时该如何处理?
+ * A: 焦点处理: item内的元素需要在注册的onFocus中管理焦点. 子组件通过onKeyDown处理按键, 未处理的方向键会冒泡给JsvGrid, 从而触发格子间焦点的变换
+-->
+<script>
+import { reactive } from "vue";
+import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+
+const TAG = "JsvGrid";
+
+const WHOLE_PAGE = 0;
+const FIX_LINE = 1;
+
+class UpdateType {
+  constructor(type) {
+    this.type = type;
+  }
+}
+
+class PageType extends UpdateType {
+  constructor() {
+    super(WHOLE_PAGE);
+  }
+}
+
+class LineType extends UpdateType {
+  constructor(start, end) {
+    super(FIX_LINE);
+    this.start = start;
+    this.end = end;
+  }
+}
+
+export { PageType, LineType };
+
+export default {
+  props: {
+    left: {
+      type: Number,
+    },
+    top: {
+      type: Number,
+    },
+    name: {
+      type: String,
+    },
+    provideData: {
+      type: Function,
+      require: true,
+    },
+    row: {
+      type: Number,
+      require: true,
+    },
+    column: {
+      type: Number,
+      require: true,
+    },
+    itemSize: {
+      type: Object,
+      require: true,
+    },
+    updateType: {
+      type: UpdateType,
+      default() {
+        return new PageType();
+      },
+    },
+    initFocusId: {
+      type: Number,
+      default: 0,
+    },
+    gapInfo: {
+      type: Object,
+      default() {
+        return {
+          row: 0,
+          column: 0,
+        };
+      },
+    },
+    verticalUpdate: {
+      type: Boolean,
+    },
+    columnFirst: {
+      type: Boolean,
+    },
+    onEdge: {
+      type: Function,
+    },
+  },
+  setup(props) {
+    return {
+      originDataList: [],
+      divInfoList: [],
+      startIndex: -1,
+      dataList: [],
+      dataInfo: {
+        endIndex: -1,
+      },
+      focusDataIndex: 0,
+      preFocusDataIndex: -1,
+      focused: false,
+    };
+  },
+  created() {
+    this._formatData();
+    this._initDivInfoList();
+    if (
+      this.initFocusId >= 0 &&
+      this.initFocusId < this.originDataList.length
+    ) {
+      this.focusDataIndex = this._indexConvert(this.initFocusId);
+    }
+    this._updateData(this._getStartIndex(this.focusDataIndex, 1));
+  },
+  methods: {
+    _getCurrentFocusId() {
+      return this.dataList[this.focusDataIndex].originIndex;
+    },
+    _getDivIndex(dataIndex) {
+      return dataIndex - this.startIndex;
+    },
+    _initDivInfoList() {
+      this.divInfoList = new Array(this.row * this.column);
+      const realWidth = this.itemSize.width + this.gapInfo.column;
+      const realHeight = this.itemSize.height + this.gapInfo.row;
+      if (this.verticalUpdate) {
+        for (let i = 0; i < this.divInfoList.length; i++) {
+          this.divInfoList[i] = {
+            left: (i % this.column) * realWidth,
+            top: Math.floor(i / this.column) * realHeight,
+            onAction: {
+              register(name, func) {
+                this[name] = func;
+              },
+              unregister(name) {
+                delete this[name];
+              },
+            },
+            widgetData: reactive({
+              visibility: false,
+              dataIndex: -1,
+              gridIndex: i,
+              getCurrentFocusId: this._getCurrentFocusId,
+            }),
+            userData: reactive({}),
+          };
+        }
+      } else {
+        for (let i = 0; i < this.divInfoList.length; i++) {
+          this.divInfoList[i] = {
+            left: Math.floor(i / this.row) * realWidth,
+            top: (i % this.row) * realHeight,
+            onAction: {
+              register(name, func) {
+                this[name] = func;
+              },
+              unregister(name) {
+                delete this[name];
+              },
+            },
+            widgetData: reactive({
+              visibility: false,
+              dataIndex: -1,
+              gridIndex: i,
+              getCurrentFocusId: this._getCurrentFocusId,
+            }),
+            userData: reactive({}),
+          };
+        }
+      }
+    },
+    _cleanOldData() {
+      for (let i = 0; i < this.divInfoList.length; i++) {
+        this.divInfoList[i].widgetData.visibility = false;
+        this.divInfoList[i].widgetData.dataIndex = false;
+
+        for (let key in this.divInfoList[i].userData) {
+          this.divInfoList[i].userData[key] = null;
+        }
+      }
+    },
+    _indexConvert(i) {
+      const pageItemNumber = this.row * this.column;
+      const pageStart = i - (i % pageItemNumber);
+      const pageIndex = i % pageItemNumber;
+      if (this.verticalUpdate && this.columnFirst) {
+        const r = pageIndex % this.row;
+        const c = Math.floor(pageIndex / this.row);
+        return c + r * this.column + pageStart;
+      } else if (!this.verticalUpdate && !this.columnFirst) {
+        const r = Math.floor(pageIndex / this.column);
+        const c = pageIndex % this.column;
+        return c * this.row + r + pageStart;
+      } else {
+        return i;
+      }
+    },
+    _formatData() {
+      this.originDataList = this.provideData();
+      const totalPage = Math.ceil(
+        this.originDataList.length / this.row / this.column
+      );
+      this.dataList = new Array(totalPage * this.row * this.column).fill(null);
+      let endIndex = -1;
+      for (let i = 0; i < this.originDataList.length; i++) {
+        const newIndex = this._indexConvert(i);
+        this.dataList[newIndex] = {
+          data: this.originDataList[i],
+          originIndex: i,
+        };
+        if (newIndex > endIndex) {
+          endIndex = newIndex;
+        }
+      }
+      this.dataInfo.endIndex = endIndex;
+    },
+    _updateData(startIndex) {
+      if (this.startIndex === startIndex) return;
+      if (startIndex + this.row * this.column >= this.dataList.length) {
+        this.startIndex = this.dataList.length - this.row * this.column;
+      } else {
+        this.startIndex = startIndex;
+      }
+      for (let i = 0; i < this.divInfoList.length; i++) {
+        const item = this.divInfoList[i];
+        const data = this.dataList[i + this.startIndex];
+        if (data == null) {
+          item.widgetData.visibility = false;
+        } else {
+          item.widgetData.dataIndex = data.originIndex;
+          for (let key in data.data) {
+            item.userData[key] = data.data[key];
+          }
+          if (!item.widgetData.visibility) {
+            item.widgetData.visibility = true;
+          }
+        }
+      }
+    },
+    _getStartIndex(targetIndex, direction) {
+      const type = this.updateType.type;
+      let preStartIndex = this.startIndex < 0 ? 0 : this.startIndex;
+      let startIndex = preStartIndex;
+      if (type == WHOLE_PAGE) {
+        startIndex = targetIndex - (targetIndex % (this.row * this.column));
+      } else if (type == FIX_LINE) {
+        const lineNum = this.verticalUpdate ? this.column : this.row;
+        const lastStartIndex = Math.max(
+          0,
+          this.dataInfo.endIndex +
+            lineNum -
+            (this.dataInfo.endIndex % lineNum) -
+            this.row * this.column
+        );
+        const targetLineStart = targetIndex - (targetIndex % lineNum);
+        // console.log(
+        //   "_getStartIndex",
+        //   `target:${targetIndex} targetStart:${targetLineStart} last:${lastStartIndex} preStart:${preStartIndex} direction:${direction}`
+        // );
+        if (targetLineStart >= preStartIndex + this.updateType.end * lineNum) {
+          startIndex = targetLineStart - this.updateType.end * lineNum;
+        }
+
+        if (
+          targetLineStart <=
+          preStartIndex + this.updateType.start * lineNum
+        ) {
+          startIndex = targetLineStart - this.updateType.start * lineNum;
+        }
+        startIndex = Math.min(Math.max(0, startIndex), lastStartIndex);
+      }
+      return startIndex;
+    },
+    _sendOnEdge(edgeDirection, divIndex) {
+      let rect;
+      if (divIndex >= 0) {
+        let focusDiv = this.divInfoList[divIndex];
+        rect = {
+          x: focusDiv.left,
+          y: focusDiv.top,
+          width: this.itemSize.width,
+          height: this.itemSize.height,
+        };
+      } else {
+        rect = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+        };
+      }
+
+      this.onEdge({ direction: edgeDirection, rect: rect });
+    },
+    _moveTo(hOffset, vOffset) {
+      let nextIndex = -1;
+      if (this.verticalUpdate) {
+        if (hOffset != 0) {
+          if (
+            !(this.focusDataIndex % this.column == 0 && hOffset < 0) &&
+            !(
+              this.focusDataIndex % this.column == this.column - 1 &&
+              hOffset > 0
+            ) &&
+            this.dataList[this.focusDataIndex + hOffset]
+          ) {
+            nextIndex = this.focusDataIndex + hOffset;
+          }
+        }
+        if (vOffset != 0) {
+          nextIndex = this.focusDataIndex + vOffset * this.column;
+          if (nextIndex > 0 && !this.dataList[nextIndex]) {
+            if (nextIndex <= this.dataInfo.endIndex) {
+              nextIndex--;
+              while (!this.dataList[nextIndex]) {
+                nextIndex--;
+              }
+            } else {
+              nextIndex = -1;
+            }
+          }
+        }
+      } else {
+        if (vOffset != 0) {
+          if (
+            !(this.focusDataIndex % this.row == 0 && vOffset < 0) &&
+            !(this.focusDataIndex % this.row == this.row - 1 && vOffset > 0) &&
+            this.dataList[this.focusDataIndex + vOffset]
+          ) {
+            nextIndex = this.focusDataIndex + vOffset;
+          }
+        }
+        if (hOffset != 0) {
+          nextIndex = this.focusDataIndex + hOffset * this.row;
+          if (nextIndex >= 0 && !this.dataList[nextIndex]) {
+            if (nextIndex <= this.dataInfo.endIndex) {
+              nextIndex--;
+              while (!this.dataList[nextIndex]) {
+                nextIndex--;
+              }
+            } else {
+              nextIndex = -1;
+            }
+          }
+        }
+      }
+      if (nextIndex >= 0) {
+        let offset;
+        if (hOffset !== 0) {
+          offset = hOffset;
+        }
+        if (vOffset != 0) {
+          offset = vOffset;
+        }
+        this.preFocusDataIndex = this.focusDataIndex;
+        this.focusDataIndex = nextIndex;
+        if (this.preFocusDataIndex >= 0) {
+          this.divInfoList[
+            this._getDivIndex(this.preFocusDataIndex)
+          ]?.onAction.onBlur?.();
+        }
+        this._updateData(this._getStartIndex(nextIndex, offset));
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ]?.onAction.onFocus?.();
+      } else {
+        let edgeDirection;
+        if (hOffset > 0) {
+          edgeDirection = EdgeDirection.right;
+        }
+        if (hOffset < 0) {
+          edgeDirection = EdgeDirection.left;
+        }
+        if (vOffset > 0) {
+          edgeDirection = EdgeDirection.bottom;
+        }
+        if (vOffset < 0) {
+          edgeDirection = EdgeDirection.top;
+        }
+        this._sendOnEdge(edgeDirection, this._getDivIndex(this.focusDataIndex));
+      }
+    },
+    _onFocus() {
+      this.focused = true;
+      if (this.originDataList && this.originDataList.length > 0) {
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ]?.onAction.onFocus?.();
+      } else {
+        console.warn(`${TAG}: ${this.name} focus while data is empty`);
+      }
+    },
+    _onBlur() {
+      this.focused = false;
+      if (this.originDataList && this.originDataList.length > 0) {
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ]?.onAction.onBlur?.();
+      }
+    },
+    _onKeyDown(ev) {
+      if (!this.originDataList || this.originDataList.length == 0) {
+        const edgeDirectionMap = {
+          37: EdgeDirection.left,
+          38: EdgeDirection.top,
+          39: EdgeDirection.right,
+          40: EdgeDirection.bottom,
+        };
+        if (typeof edgeDirectionMap[ev.keyCode] !== "undefined") {
+          this._sendOnEdge(edgeDirectionMap[ev.keyCode], -1);
+          return true;
+        }
+        return false;
+      }
+      switch (ev.keyCode) {
+        case 37:
+          this._moveTo(-1, 0);
+          return true;
+        case 39:
+          this._moveTo(1, 0);
+          return true;
+        case 38:
+          this._moveTo(0, -1);
+          return true;
+        case 40:
+          this._moveTo(0, 1);
+          return true;
+        case 13:
+          this.divInfoList[
+            this._getDivIndex(this.focusDataIndex)
+          ]?.onAction.onClick?.();
+          return true;
+        default:
+          return false;
+      }
+    },
+
+    getFocusBlockRef() {
+      return this.$refs.focusBlock;
+    },
+
+    setFocusId(id) {
+      if (id >= 0 && id < this.originDataList.length) {
+        let preIndex = this.focusDataIndex;
+        this.preFocusDataIndex = -1;
+        this.focusDataIndex = this._indexConvert(id);
+        if (this.focused) {
+          //焦点跳跃时之前的焦点可能不在divInfoList中
+          this.divInfoList[this._getDivIndex(preIndex)]?.onAction.onBlur?.();
+        }
+        this._updateData(this._getStartIndex(this.focusDataIndex, 1));
+        if (this.focused) {
+          this.divInfoList[
+            this._getDivIndex(this.focusDataIndex)
+          ]?.onAction.onFocus?.();
+        }
+      }
+    },
+
+    refreshData() {
+      if (this.focused) {
+        //焦点跳跃时之前的焦点可能不在divInfoList中
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ]?.onAction.onBlur?.();
+      }
+      this._formatData();
+      this.startIndex = -1;
+      this._cleanOldData();
+      if (this.focusDataIndex > this.originDataList.length) {
+        this.focusDataIndex = 0;
+        this.preFocusDataIndex = -1;
+      }
+      this._updateData(this._getStartIndex(this.focusDataIndex, 1));
+      if (this.focused) {
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ]?.onAction.onFocus?.();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusBlock"
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+    :style="{
+      left: left,
+      top: top,
+    }"
+  >
+    <div
+      v-for="(item, index) in divInfoList"
+      :key="index"
+      :style="{
+        left: item.left,
+        top: item.top,
+        width: itemSize.width,
+        height: itemSize.height,
+        visibility: item.widgetData.visibility ? 'visible' : 'hidden',
+      }"
+    >
+      <slot
+        name="renderItem"
+        :userData="item.userData"
+        :widgetData="item.widgetData"
+        :onAction="item.onAction"
+      ></slot>
+    </div>
+  </jsv-focus-block>
+</template>

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -733,6 +733,13 @@ export default {
   },
   mounted() {},
   beforeUnmount() {
+    if (this.editControlViewId != -1) {
+      const view_store = ForgeExtension.RootActivity
+        ? ForgeExtension.RootActivity.ViewStore
+        : Forge.sViewStore;
+      view_store.remove(this.editControlViewId);
+      this.editControlViewId = -1;
+    }
     this.clearCursorPauseTimer();
   },
 };

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -11,9 +11,9 @@
  *                                四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
  *                                                原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
  *                                四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
- *          borderOutset {int}      (必填)原图信息: 图片边缘到中心内容区域的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
+ *          borderOutset {int}      (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
  *          animTime    {int}       (必填)缩放动画的时长(单位毫秒)
- *          waitForInit {boolean}  尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
+ *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
 -->
 
 <script>

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -116,7 +116,7 @@ export default {
   },
   methods: {
     unloadView() {
-      if (this.viewId >= 0) {
+      if (this.viewId != -1) {
         ForgeExtension.RootActivity.ViewStore.remove(this.viewId);
         this.viewId = -1;
       }

package/utils/JsViewVueWidget/JsvTextureAnim/CommonType.js

@@ -0,0 +1,8 @@
+
+const DECORATE_BORDER_RADIUS = "BroderRaidus";
+const DECORATE_NINEPATCH_ALPHA_MIX = "NinePatchAlphaMix";
+
+export {
+    DECORATE_BORDER_RADIUS,
+    DECORATE_NINEPATCH_ALPHA_MIX
+}