@shijiu/jsview-vue 0.9.490 → 0.9.590

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,

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -22,9 +22,18 @@ export default {
   props: {
     value: String,
     size: Number,
-    fgColor: String,
-    bgColor: String,
-    level: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+    fgColor: {
+        type: String,
+        default: "#000000"
+    },
+    bgColor: {
+        type: String,
+        default: "#ffffff"
+    },
+    level: {
+        type: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+        default: "L"
+    },
     imageSettings: Object,
   },
   methods: {
@@ -107,7 +116,7 @@ export default {
     if (this.jsvBaseView === null) {
       this.jsvBaseView = new Forge.LayoutView();
       this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-        new Forge.ViewInfo(this.jsvBaseView, { x: 0, y: 0 })
+        new Forge.ViewInfo(this.jsvBaseView)
       );
     }
     // 构建QRCdoe view

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -34,7 +34,7 @@
 <script>
 import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
 
-let buildForgeView = (pointRes, sprayStyle) => {
+let buildForgeView = (pointRes, sprayStyle, sizeRef) => {
   if (!pointRes) {
     return -1;
   }
@@ -88,13 +88,10 @@ let buildForgeView = (pointRes, sprayStyle) => {
     sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
   const view_height =
     sprayStyle.deltaHeight === 0 ? 1 : 2 * sprayStyle.deltaHeight;
+  sizeRef.width = view_width;
+  sizeRef.height = view_height;
   return ForgeExtension.RootActivity.ViewStore.add(
-    new Forge.ViewInfo(spray_view, {
-      x: 0,
-      y: 0,
-      width: view_width,
-      height: view_height,
-    })
+    new Forge.ViewInfo(spray_view)
   );
 };
 
@@ -111,6 +108,10 @@ export default {
   },
   data() {
     return {
+      size: {
+        width: 0,
+        height: 0
+      },
       viewId: -1,
     };
   },
@@ -123,11 +124,11 @@ export default {
     },
   },
   created() {
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size);
   },
   updated() {
     this.unloadView();
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size);
   },
   beforeUnmount() {
     this.unloadView();
@@ -136,5 +137,7 @@ export default {
 </script>
 
 <template>
-  <div :jsv_innerview="viewId"></div>
+  <div 
+    :style="{width: size.width, height: size.height}"
+    :jsv_innerview="viewId"></div>
 </template>

package/utils/JsViewVueWidget/JsvSpriteAnim/index.js

@@ -1,6 +1,5 @@
-import JsvSpriteAnim from './JsvSpriteAnim.vue';
-import SpriteController from './SpriteController.js';
+import JsvSpriteAnim from "./JsvSpriteAnim.vue";
+import { SpriteController } from "./SpriteController.js";
 
 export default JsvSpriteAnim;
 export { SpriteController };
-

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -204,7 +204,8 @@ export default {
 
       if (decorate && decorate.type == DECORATE_NINEPATCH_ALPHA_MIX && decorate.animTime > 0) {
         // Ninepatch模式可以设置长宽的过渡动画
-        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
+        let anim_time = decorate.animTime;
+        transition = `left ${anim_time}s, top ${anim_time}s, width ${anim_time}s, height ${anim_time}s`;
       }
 
       return transition;
@@ -237,21 +238,25 @@ export default {
       }
 
       // 4.设置texture的动画形变
-      this.forgeAnimation = new Forge.CssKeyframeAnimation(
-        "@keyframes test" + this.animation,
-        this.duration,
-        null,
-        1,
-        1
-      );
-      this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
-      this.forgeAnimation.SetAnimationListener(
-        new Forge.AnimationListener(
+      if (this.animation) {
+        this.forgeAnimation = new Forge.CssKeyframeAnimation(
+          "@keyframes test" + this.animation,
+          this.duration,
           null,
-          this._onAnimationEnd,
-          null
-        )
-  		);
+          1,
+          1
+        );
+        this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
+        this.forgeAnimation.SetAnimationListener(
+          new Forge.AnimationListener(
+            null,
+            this._onAnimationEnd,
+            null
+          )
+        );
+      } else {
+        this.forgeAnimation = null;
+      }
 
       // 5. inner view标准处理
       this.viewStoreRef = ForgeExtension.RootActivity
@@ -259,12 +264,7 @@ export default {
         : Forge.sViewStore;
 
       this.innerViewId = this.viewStoreRef.add(
-        new Forge.ViewInfo(this.innerView, {
-          x: 0,
-          y: 0,
-          width: this.width,
-          height: this.height,
-        })
+        new Forge.ViewInfo(this.innerView)
       );
     }
   },
@@ -285,6 +285,10 @@ export default {
 <template>
   <div 
     :style="{
+      top: top,
+      left: left, 
+      width: width,
+      height: height,
       transition: getTransition(),
     }"
     :jsv_innerview="innerViewId">

package/utils/JsViewVueWidget/JsvTransparentDiv.vue

@@ -41,15 +41,9 @@ export default {
         // 通过内置函数构造定制的LayoutView
         this.innerView = new Forge.LayoutView(textureSetting);
         this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-          new Forge.ViewInfo(this.innerView, null)
+          new Forge.ViewInfo(this.innerView)
         );
       }
-
-      // 更新宽高
-      this.innerView.ResetLayoutParams({
-        width: this.style.width,
-        height: this.style.height,
-      });
     },
   },
   created() {
@@ -81,7 +75,12 @@ export default {
   ></div>
   <div
     :jsv_innerview="innerViewId"
-    :style="{ left: style.left, top: style.top }"
+    :style="{ 
+      left: style.left, 
+      top: style.top,
+      width: style.width, 
+      height: style.height 
+    }"
   >
     <slot></slot>
   </div>

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -0,0 +1,141 @@
+<!--
+ * 【模块 export 内容】
+ * JsvVisibleSensor: 可视区域监控器
+ * props说明:
+ *     horizonShown  {number}  (可选, 可响应式, 默认1.0完全露出)横轴百分比区域完全显示时(左边或右边完全露出，仅中间段判断会失效),
+ *                             横轴切换到显示状态，否则为不可视状态
+ *     verticalShown  {number} (可选, 可响应式)纵轴百分比区域完全显示时(上边或下边完全露出，仅中间段判断会失效),
+ *                             纵轴切换到显示状态，否则为不可视状态
+ *     left   {number}  (可选, 可响应式)可视检测区域的left
+ *     top   {number}  (可选, 可响应式)可视检测区域的top
+ *     width   {number}  (可选, 可响应式)可视检测区域的width
+ *     height   {number}  (可选, 可响应式)可视检测区域的height
+ *
+ *     container {div reference}  (可选, 可响应式)子区域参照，若为null，则认为检测可视区域为全屏幕
+ *
+ *     callback {function} (必须, 可响应式)可视变化时的回调处理, 参数
+ *               (old_horizantal_visible, new_horizantal_visible, old_vertical_visible, new_vertical_visible)
+ -->
+
+<template>
+    <div ref="viewRef" :style="{
+        top: props.top,
+        left: props.left,
+        width: props.width,
+        height: props.height,
+        }" >
+        <slot/>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
+import { Forge } from "jsview/dom/jsv-forge-define";
+
+const props = defineProps({
+    // (支持reactive)可视区域设定
+    horizonShown: Number,
+    verticalShown: Number,
+
+    // (支持reactive)Container, 父区域的div引用, 
+    container: Object,
+
+    // (不支持reactive)回调处理
+    callback: Function,
+
+    // (支持reactive)位置信息
+    left: {
+        type: Number,
+        default: 0,
+    },
+    top: {
+        type: Number,
+        default: 0,
+    },
+    width: {
+        type: Number,
+        require: true,
+    },
+    height: {
+        type: Number,
+        require: true,
+    },
+
+    // (支持reactive)是否激活，仍然在渲染树时，非必须可以通过enable关闭以节省CPU开销
+    enable: {
+        type: Boolean,
+        default: true,
+    }
+});
+
+// 内部状态变量
+const viewRef = ref(null);
+const viewMounted = reactive({status: false})
+let sensorRef = null;
+
+// 变更检测范围
+watchEffect(()=>{
+    if (viewMounted.status) {
+        let horizon = fixAreaValue(props.horizonShown);
+        let vertical = fixAreaValue(props.verticalShown);
+
+        sensorRef.ResetArea({horizon, vertical})
+    }
+})
+
+// 变更enable状态
+watchEffect(()=>{
+    if (viewMounted.status) {
+        sensorRef.Enable(props.enable)
+    }
+})
+
+// 检测container变化
+watchEffect(()=>{
+    if (viewMounted.status) {
+        if (props.container) {
+            window.MyContainerView = toRaw(props.container);
+
+            let jsv_main_view_ref = toRaw(props.container).jsvMainView;
+            if (jsv_main_view_ref) {
+                sensorRef.ResetContainer(toRaw(props.container).jsvMainView);
+            } else {
+                console.error("Error: container is NOT a div");
+            }
+        } else {
+            sensorRef.ResetContainer(null); // 无container
+        }
+    }
+})
+
+onMounted(()=>{
+    console.log("JsvVisibleSensor: on mounted");
+
+    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvMainView, (old_h, new_h, old_v, new_v)=>{
+        // 获得横向和纵向的新旧状态值
+        if (props.callback) {
+            props.callback(old_h, new_h, old_v, new_v);
+        }
+    });
+    viewMounted.status = true;
+})
+
+// 外部方法
+defineExpose({
+
+})
+
+// 内部方法
+function fixAreaValue(origin_value) {
+    if (origin_value > 1) {
+        console.warn(`will limited to 1 origin=${origin_value}`);
+        return 1;
+    } else if (origin_value < 0) {
+        console.warn(`will limited to 0 origin=${origin_value}`);
+        return 0;
+    } else {
+        return origin_value;
+    }
+}
+
+</script>

package/utils/JsViewVueWidget/JsvVisibleSensor/index.js

@@ -0,0 +1,9 @@
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvVisibleSensor from "./JsvVisibleSensor.vue";
+
+let _JsvVisibleSensor = JsvVisibleSensor;
+// if (window.JsvWidgetWrapperGroup && window.JsvWidgetWrapperGroup.BrowserVisibleSensor) {
+//     JsvVisibleSensor = window.JsvWidgetWrapperGroup.BrowserVisibleSensor;
+// }
+
+export default _JsvVisibleSensor.default

package/utils/JsViewVueWidget/index.js

@@ -0,0 +1,42 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-07-05 11:00:51
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:08:08
+ * @Description: file content
+ */
+export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
+export { default as JsvApic, LoopType } from "./JsvApic";
+export { default as JsvInput, InputType } from "./JsvInput";
+export {
+  default as JsvPreload,
+  buildPreloadInfo,
+  buildDownloadInfo,
+} from "./JsvPreload";
+export { default as JsvQrcode } from "./JsvQrcode";
+export { default as JsvSpray } from "./JsvSpray";
+export { default as JsvSpriteAnim, SpriteController } from "./JsvSpriteAnim";
+export { default as JsvSwiper } from "./JsvSwiper";
+export { default as JsvSwiper3D } from "./JsvSwiper3D";
+export { default as JsvTextureAnim } from "./JsvTextureAnim";
+export { default as JsvVisibleSensor } from "./JsvVisibleSensor";
+export { default as JsvFilterView } from "./JsvFilterView.vue";
+export {
+  default as JsvGrid,
+  PageType,
+  LineType,
+  FocusMoveType,
+} from "./JsvGrid.vue";
+export { default as JsvHole } from "./JsvHole.js";
+export { default as JsvMarquee } from "./JsvMarquee.vue";
+export { default as JsvMaskClipDiv } from "./JsvMaskClipDiv.vue";
+export { default as JsvNativeSharedDiv } from "./JsvNativeSharedDiv.vue";
+export { default as JsvNinePatch } from "./JsvNinePatch.vue";
+export { default as JsvPosterDiv } from "./JsvPosterDiv.vue";
+export { default as JsvPosterImage } from "./JsvPosterImage.vue";
+export { default as JsvScaleTextBox } from "./JsvScaleTextBox.vue";
+export { JsvSoundPool } from "./JsvSoundPool.js";
+export { default as JsvTextBox } from "./JsvTextBox.vue";
+export { default as JsvTouchContainer } from "./JsvTouchContainer.vue";
+export { default as JsvTransparentDiv } from "./JsvTransparentDiv.vue";
+export { default as JsvVideo } from "./JsvVideo.vue";