@shijiu/jsview-vue 0.9.500 → 0.9.602

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserQrcode.vue

@@ -18,11 +18,15 @@ export default {
         },
         imageSettings: Object
     },
-    data() {
+    setup() {
         return {
             imageStyle: null,
+            qrcodeRes: null,
         }
     },
+    created() {
+        this.qrcodeRes = this.renderQrcode();
+    },
     methods: {
         convertStr(str) {
             let out = "";
@@ -149,10 +153,10 @@ export default {
             :shapeRendering="'crispEdges'"
             :height="size"
             :width="size"
-            :viewBox="'0 0 ' + renderQrcode().numCells + ' ' + renderQrcode().numCells"
+            :viewBox="'0 0 ' + qrcodeRes.numCells + ' ' + qrcodeRes.numCells"
         >
-            <jsve-path :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
-            <jsve-path :fill="fgColor" :d="renderQrcode().fgPath" />
+            <jsve-path :fill="bgColor" :d="'M0,0 h' + qrcodeRes.numCells + 'v' + qrcodeRes.numCells + 'H0z'" />
+            <jsve-path :fill="fgColor" :d="qrcodeRes.fgPath" />
         </jsve-svg>
         <div :style="imageStyle"></div>
     </div>

package/utils/JsViewVueWidget/JsvApic/JsvApic.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-13 13:14:42
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-25 15:37:04
+ * @LastEditTime: 2022-08-02 13:35:10
  * @Description: file content
 -->
 
@@ -175,5 +175,5 @@ export default {
 </script>
 
 <template>
-  <img alt="" ref="element" :src="src" :style="style" />
+  <img jsv_disable_apic_autoplay alt="" ref="element" :src="src" :style="style" />
 </template>

package/utils/JsViewVueWidget/JsvFilterView.vue

@@ -6,68 +6,76 @@
  *          height  {int}   高
  *          left    {int}   left位置
  *          top     {int}   top位置
- *      methods说明:
- *          enableFilter
-                @description 开关滤镜
-                @params {boolean} enable 滤镜是否生效
+ *          filterType  {String}  滤镜设置:
+ *                                null: 无滤镜
+ *                                "gray-down": 黑白滤镜(公祭日滤镜)
 -->
-<script>
+<script setup>
 import { Forge, ForgeExtension } from "../../dom/jsv-forge-define";
+import { onBeforeUnmount, watchEffect } from "vue";
 
-export default {
-  props: {
-    width: {
-      type: Number,
-    },
-    height: {
-      type: Number,
-    },
-    left: {
-      type: Number,
-      default: 0,
-    },
-    top: {
-      type: Number,
-      default: 0,
-    },
+const props = defineProps({
+  width: {
+    type: Number,
   },
-  setup() {
-    return {
-      filterView: null,
-    };
+  height: {
+    type: Number,
   },
-  created() {
-    this.filterView = new Forge.FilterView();
-    const view_store = ForgeExtension.RootActivity
-      ? ForgeExtension.RootActivity.ViewStore
-      : Forge.sViewStore;
-    this.viewId = view_store.add(
-      new Forge.ViewInfo(this.filterView, {
-        x: this.left,
-        y: this.top,
-        width: this.width,
-        height: this.height,
-      })
-    );
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
   },
-  beforeUnmount() {
-    const view_store = ForgeExtension.RootActivity
+  filterType: {
+    type: String,
+    default: null,
+  }
+});
+
+let filterView = new Forge.FilterView();
+const view_store = ForgeExtension.RootActivity
+  ? ForgeExtension.RootActivity.ViewStore
+  : Forge.sViewStore;
+
+let viewId = view_store.add(
+  new Forge.ViewInfo(filterView)
+);
+
+// 监控filter改变
+watchEffect(() => {
+  if (filterView) {
+    console.log(`filterType change to ${props.filterType}`)
+    switch (props.filterType) {
+      case "gray-down":
+        filterView.FilterSwitch(true);
+        break;
+      default:
+        filterView.FilterSwitch(false);
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  const view_store = ForgeExtension.RootActivity
       ? ForgeExtension.RootActivity.ViewStore
       : Forge.sViewStore;
-    view_store.remove(this.viewId);
-  },
-  methods: {
-    enableFilter(enable) {
-      if (this.filterView) {
-        this.filterView.FilterSwitch(enable);
-      }
-    },
-  },
-};
+  view_store.remove(viewId);
+});
+
 </script>
 
 <template>
-  <div :jsv_innerview="viewId">
+  <div 
+    :style="{
+      left: left,
+      top: top,
+      width: width,
+      height: height
+      }"
+    :jsv_innerview="viewId">
     <slot></slot>
   </div>
 </template>

package/utils/JsViewVueWidget/JsvGrid.vue

@@ -17,11 +17,18 @@
  *      gapInfo {Object} 格子间隔设置 {row: 行间距, colum: 列间距}
  *      verticalUpdate {boolean} 是否纵向滚动
  *      columnFirst {boolean} 单页是否列优先排布 
+ *      loopUpdate {boolean} 焦点移动到边界时循环滚动
  *      onEdge {function} 焦点移动到边缘时的回调
  *              @params {object} edgeInfo {
                                             "direction": {EdgeDirection}边缘方向, 
                                             "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
                                           }
+ *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合
+                            NO_ADJUST: 无特殊处理
+                            COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在水平滚动时生效
+                            ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
+                            COLUMN_FIND_NEAR: 一列中没有下一个元素时是否跳转到相邻列
+                            ROW_FIND_NEAR: 一行中没有下一个元素时是否跳转到相邻行
  *    methods:
         getFocusBlockRef
           @description 获取focusBlock的引用
@@ -38,7 +45,9 @@
                   {
                     dataIndex: {int} 当前格子数据的index,
                     gridIndex: {int} 当前格子的index,
+                    selected: {boolean} 格子是否选中
                     getCurrentFocusId: {function} 获取widget的当前焦点的dataIndex
+                    gridCoord: {{row: 0, column: 0}} 获取当前格子的行列坐标
                   }
  *    onAction: 单元格内控件需要通过onAction.register方法注册 item 的回调，回调函数有
                 onFocus， onBlur， onClick
@@ -84,7 +93,15 @@ class LineType extends UpdateType {
   }
 }
 
-export { PageType, LineType };
+const FocusMoveType = {
+  NO_ADJUST: 0x00000000,
+  COLUMN_LOOP: 0x00000001,
+  ROW_LOOP: 0x00000001 << 1,
+  COLUMN_FIND_NEAR: 0x00000001 << 2,
+  ROW_FIND_NEAR: 0x00000001 << 3,
+};
+
+export { PageType, LineType, FocusMoveType };
 
 export default {
   props: {
@@ -141,6 +158,14 @@ export default {
     onEdge: {
       type: Function,
     },
+    loopUpdate: {
+      type: Boolean,
+      default: false,
+    },
+    focusMoveType: {
+      type: Number,
+      default: FocusMoveType.NO_ADJUST,
+    },
   },
   setup(props) {
     return {
@@ -166,6 +191,11 @@ export default {
       this.focusDataIndex = this._indexConvert(this.initFocusId);
     }
     this._updateData(this._getStartIndex(this.focusDataIndex, 1));
+    if (this.divInfoList[this._getDivIndex(this.focusDataIndex)]) {
+      this.divInfoList[
+        this._getDivIndex(this.focusDataIndex)
+      ].widgetData.selected = true;
+    }
   },
   methods: {
     _getCurrentFocusId() {
@@ -196,6 +226,11 @@ export default {
               dataIndex: -1,
               gridIndex: i,
               getCurrentFocusId: this._getCurrentFocusId,
+              gridCoord: {
+                column: i % this.column,
+                row: Math.floor(i / this.column),
+              },
+              selected: false,
             }),
             userData: reactive({}),
           };
@@ -218,6 +253,11 @@ export default {
               dataIndex: -1,
               gridIndex: i,
               getCurrentFocusId: this._getCurrentFocusId,
+              gridCoord: {
+                column: Math.floor(i / this.row),
+                row: i % this.row,
+              },
+              selected: false,
             }),
             userData: reactive({}),
           };
@@ -349,56 +389,86 @@ export default {
     },
     _moveTo(hOffset, vOffset) {
       let nextIndex = -1;
+      let mainOffset, subOffset, lineNum, mainFindNear, subFindNear, lineLoop;
       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--;
+        mainOffset = vOffset;
+        subOffset = hOffset;
+        lineNum = this.column;
+        mainFindNear = this.focusMoveType & FocusMoveType.COLUMN_FIND_NEAR;
+        subFindNear = this.focusMoveType & FocusMoveType.ROW_FIND_NEAR;
+        lineLoop = this.focusMoveType & FocusMoveType.ROW_LOOP;
+      } else {
+        mainOffset = hOffset;
+        subOffset = vOffset;
+        lineNum = this.row;
+        mainFindNear = this.focusMoveType & FocusMoveType.ROW_FIND_NEAR;
+        subFindNear = this.focusMoveType & FocusMoveType.COLUMN_FIND_NEAR;
+        lineLoop = this.focusMoveType & FocusMoveType.COLUMN_LOOP;
+      }
+      if (mainOffset != 0) {
+        let i = this.focusDataIndex + mainOffset * lineNum;
+        if (this.dataList[i]) {
+          nextIndex = i;
+        } else if (i >= 0) {
+          //下一个为null, 找下一行的最后一个
+          if (mainFindNear) {
+            i = i - (i % this.column);
+            if (this.dataList[i]) {
+              while (this.dataList[i]) {
+                nextIndex = i;
+                i++;
               }
-            } 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--;
+      }
+
+      if (subOffset != 0) {
+        let i = (this.focusDataIndex % lineNum) + subOffset;
+        if (
+          i >= 0 &&
+          i < lineNum &&
+          this.dataList[this.focusDataIndex + subOffset]
+        ) {
+          nextIndex = this.focusDataIndex + subOffset;
+        } else {
+          if (lineLoop) {
+            i =
+              this.focusDataIndex +
+              subOffset * lineNum -
+              (this.focusDataIndex % lineNum);
+            if (subOffset < 0) {
+              //往前是到上一行末尾
+              i = i + lineNum - 1;
+            }
+            if (this.dataList[i]) {
+              nextIndex = i;
+            }
+          } else if (subFindNear) {
+            //只有未到边界时才找临近
+            if (i >= 0 && i < lineNum) {
+              for (
+                i = this.focusDataIndex + subOffset;
+                i >= this.startIndex;
+                i -= lineNum
+              ) {
+                if (this.dataList[i]) {
+                  nextIndex = i;
+                  break;
+                }
               }
-            } else {
-              nextIndex = -1;
             }
           }
         }
       }
+
+      if (nextIndex < 0 && this.loopUpdate) {
+        if (this.verticalUpdate && vOffset != 0) {
+          nextIndex = vOffset > 0 ? 0 : this.dataInfo.endIndex;
+        } else if (!this.verticalUpdate && hOffset != 0) {
+          nextIndex = hOffset > 0 ? 0 : this.dataInfo.endIndex;
+        }
+      }
       if (nextIndex >= 0) {
         let offset;
         if (hOffset !== 0) {
@@ -414,10 +484,16 @@ export default {
             this._getDivIndex(this.preFocusDataIndex)
           ]?.onAction.onBlur?.();
         }
+        this.divInfoList[
+          this._getDivIndex(this.preFocusDataIndex)
+        ].widgetData.selected = false;
         this._updateData(this._getStartIndex(nextIndex, offset));
         this.divInfoList[
           this._getDivIndex(this.focusDataIndex)
         ]?.onAction.onFocus?.();
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ].widgetData.selected = true;
       } else {
         let edgeDirection;
         if (hOffset > 0) {
@@ -503,12 +579,23 @@ export default {
           //焦点跳跃时之前的焦点可能不在divInfoList中
           this.divInfoList[this._getDivIndex(preIndex)]?.onAction.onBlur?.();
         }
+        if (this.divInfoList[this._getDivIndex(preIndex)]) {
+          this.divInfoList[
+            this._getDivIndex(preIndex)
+          ].widgetData.selected = false;
+        }
+
         this._updateData(this._getStartIndex(this.focusDataIndex, 1));
         if (this.focused) {
           this.divInfoList[
             this._getDivIndex(this.focusDataIndex)
           ]?.onAction.onFocus?.();
         }
+        if (this.divInfoList[this._getDivIndex(this.focusDataIndex)]) {
+          this.divInfoList[
+            this._getDivIndex(this.focusDataIndex)
+          ].widgetData.selected = true;
+        }
       }
     },
 
@@ -519,6 +606,12 @@ export default {
           this._getDivIndex(this.focusDataIndex)
         ]?.onAction.onBlur?.();
       }
+      if (this.divInfoList[this._getDivIndex(this.focusDataIndex)]) {
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ].widgetData.selected = false;
+      }
+
       this._formatData();
       this.startIndex = -1;
       this._cleanOldData();
@@ -532,6 +625,11 @@ export default {
           this._getDivIndex(this.focusDataIndex)
         ]?.onAction.onFocus?.();
       }
+      if (this.divInfoList[this._getDivIndex(this.focusDataIndex)]) {
+        this.divInfoList[
+          this._getDivIndex(this.focusDataIndex)
+        ].widgetData.selected = true;
+      }
     },
   },
 };

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -134,7 +134,7 @@ export default {
         // 初始化View
         this.innerView = new Forge.LayoutView();
         this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-          new Forge.ViewInfo(this.innerView, null)
+          new Forge.ViewInfo(this.innerView)
         );
       }
 
@@ -211,6 +211,8 @@ export default {
     :style="{
       top: style.top,
       left: style.left,
+      width: style.width,
+      height: style.height
     }"
   ></div>
 </template>

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -47,19 +47,14 @@ export default {
     // 通过内置函数构造定制的NativeSharedView
     this.jsvMainView = new Forge.NativeSharedView(textureSetting);
     this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-      new Forge.ViewInfo(this.jsvMainView, null)
+      new Forge.ViewInfo(this.jsvMainView)
     );
 
     // 更新宽高
     if(typeof this.jsvMainView!="undefined" && this.jsvMainView){
-      this.jsvMainView.ResetLayoutParams({
-        width: this.style.width,
-        height: this.style.height,
-      });
-
       if (this.setId) {
         // 使用设置进来的track id，而非自动生成
-        this.jsvMainView.SetTrackId();
+        this.jsvMainView.SetTrackId(this.setId);
       }
 
       this.getId?.(this.jsvMainView.GetTrackId());
@@ -77,21 +72,17 @@ export default {
       this.jsvMainView = null;
     }
   },
-  updated() {
-    // 更新宽高
-    if(typeof this.jsvMainView!="undefined" && this.jsvMainView){
-      this.jsvMainView.ResetLayoutParams({
-        width: this.style.width,
-        height: this.style.height,
-      });
-    }
-  }
 };
 </script>
 
  <template>
   <div v-if="!isBrowserDebug"
-    :style="{left: style.left, top: style.top}"
+    :style="{
+      left: style.left, 
+      top: style.top,
+      width: style.width,
+      height: style.height
+      }"
     :jsv_innerview="innerViewId"
   >
     <slot/>

package/utils/JsViewVueWidget/JsvNinePatch.vue

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

package/utils/JsViewVueWidget/JsvPosterDiv.vue

@@ -1,17 +1,47 @@
 <!--
  * 【模块 export 内容】
  * JsvPosterDiv：Vue高阶组件，海报描画
+ *  props说明:
+ *      style    {Object}   包含
+ *                          left/top/width/height
+ *                          border-radius
+ *                          backgroundImage/backgroundColor 
+ *                          的style设置
 -->
+<script setup>
+
+import { reactive, watchEffect } from "vue";
+
+const props = defineProps({
+  style: Object,
+});
+
+let common_style = reactive({});
+let image_style = reactive({});
+
+watchEffect(()=>{
+  if (props.style) {
+    let {left, top, width, height, ...others} = props.style;
+
+    common_style.left = left;
+    common_style.top = top;
+
+    image_style.width = width;
+    image_style.height = height;
+    Object.assign(image_style, others)
+  }
+})
 
-<script>
-export default {
-  //不让根元素继承style，以导致多画一个图片。同时注意slot和div的位置
-  inheritAttrs: false,
-};
 </script>
+
 <template>
-  <div>
+  <div :style="common_style">
     <slot></slot>
-    <div jsv_enable_fade="true" jsv_poster_on_top="true" v-bind="$attrs" />
+    <div
+      jsv_enable_fade="true"
+      jsv_poster_on_top="true"
+      :style="image_style"
+      v-bind="$attrs"
+    />
   </div>
 </template>

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -1,30 +1,51 @@
 <!--
  * 【模块 export 内容】
  * JsvPosterImage：Vue高阶组件，海报描画，可设置color space 和 texture size
- *      props说明:
- *          colorSpace          {String}   颜色空间，默认RGBA_8888
+ *  props说明:
+ *      colorSpace          {String}   颜色空间，默认RGBA_8888
+ *      style    {Object}   包含left/top/width/height/border-radius的style设置
 -->
 
-<script>
-export default {
-  props: {
-    colorSpace: {
-      type: String,
-      default: "RGBA_8888",
-    },
+<script setup>
+
+import { reactive, watchEffect } from "vue";
+
+const props = defineProps({
+  colorSpace: {
+    type: String,
+    default: "RGBA_8888",
   },
-  inheritAttrs: false,
-};
+
+  style: Object,
+});
+
+let common_style = reactive({});
+let image_style = reactive({});
+
+watchEffect(()=>{
+  if (props.style) {
+    let {left, top, width, height, ...others} = props.style;
+
+    common_style.left = left;
+    common_style.top = top;
+
+    image_style.width = width;
+    image_style.height = height;
+    Object.assign(image_style, others)
+  }
+})
+
 </script>
 
 <template>
-  <div>
+  <div :style="common_style">
     <slot></slot>
     <img
       jsv_enable_fade="true"
       jsv_poster_on_top="true"
       jsv_img_scaledown_tex="true"
-      :jsv_img_color_space="{ colorSpace }"
+      :jsv_img_color_space="colorSpace"
+      :style="image_style"
       v-bind="$attrs"
     />
   </div>

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -248,12 +248,7 @@ export default {
         const preload_view = new Forge.PreloadView(texture_setting);
         return {
           viewId: ForgeExtension.RootActivity.ViewStore.add(
-            new Forge.ViewInfo(preload_view, {
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0,
-            })
+            new Forge.ViewInfo(preload_view)
           ),
           textureRef: texture,
           callToken: callback_token,
@@ -318,12 +313,7 @@ export default {
 
         return {
           viewId: ForgeExtension.RootActivity.ViewStore.add(
-            new Forge.ViewInfo(preload_view, {
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0,
-            })
+            new Forge.ViewInfo(preload_view)
           ),
           textureRef: texture,
           callToken: callback_token,