@shijiu/jsview-vue 0.9.602 → 0.9.684

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -29,6 +29,7 @@
 <script>
 import Indicator from "./Indicator.vue";
 import { ref } from "vue";
+import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
 
 const VIEW_NUM = 4;
 
@@ -45,7 +46,7 @@ function modToRange(value, mod, start = 0) {
 window.modToRange = modToRange;
 
 export default {
-  components: { Indicator },
+  components: { Indicator, JsvVisibleSensor },
   props: {
     showIndicator: {
       type: Boolean,
@@ -124,7 +125,7 @@ export default {
     reverseSwipe: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   computed: {
     indicatorLayout() {
@@ -320,6 +321,10 @@ export default {
         }, this.autoplayInterval);
       }
     },
+    _stopAutoPlay() {
+      clearInterval(this.intervalHandler);
+      this.intervalHandler = -1;
+    },
     _onFocus() {
       this.focused = true;
       clearInterval(this.intervalHandler);
@@ -330,6 +335,13 @@ export default {
       this._enableAutoplay();
       this.onBlur?.();
     },
+    onBeVisible(old_h, new_h, old_v, new_v) {
+      if ((old_h && !new_h) || (old_v && !new_h)) {
+        this._stopAutoPlay();
+      } else if ((!old_h && new_h) || (!old_v && new_h)) {
+        this._enableAutoplay();
+      }
+    },
   },
   created() {
     this._enableAutoplay();
@@ -338,6 +350,14 @@ export default {
 </script>
 
 <template>
+  <jsv-visible-sensor
+    :horizonShown="0.2"
+    :verticalShown="0.2"
+    :width="layoutInfo.widgetWidth"
+    :height="layoutInfo.widgetHeight"
+    :enable="true"
+    :callback="onBeVisible"
+  ></jsv-visible-sensor>
   <jsv-focus-block
     :name="name"
     :onAction="{

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -6,94 +6,54 @@
  * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
  *      props说明:
  *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
- *          stylesList {array}    布局样式(必需)，数组中可包含样式对象或者JsvStyleClass，或者JsvTextStyleClass对象，
- *                                  样式对象内容为{left:0, top:0, width:xxx, height:xxx}，
- *                                  布局样式为数组中所有样式的合并。
- *          styleToken {string}     类似于react html元素的key，当style变化时，由使用者改变此Token通知hoc进行style重新识别。
- *                                  Token不变的场景，props变化不会引起render，以提高渲染性能
+ *          style {object}          样式(必需)
  *          enableLatex {bool}     是否启用Latex文字描画模式
 -->
 
-<script>
-import {
-  JsvTextStyleClass,
-  combinedStyles,
-} from "jsview/utils/JsViewVueTools/JsvStyleClass.js";
+<script setup>
+import { ref, computed } from "vue";
 
-let sAreaAlignStyleMap = new Map();
-export default {
-  props: {
-    styleToken: String,
-    stylesList: Object,
-    verticalAlign: {
-      type: String,
-      default: "middle",
-    },
-    lineAlign: {
-      type: String,
-      default: "middle",
-    },
-    enableLatex: Boolean,
+const props = defineProps({
+  style: Object,
+  verticalAlign: {
+    type: String,
+    default: "middle",
   },
-  data() {
-    return {
-      styleCombined: null,
-      styleClasses: null,
-      tokenProcesses: null,
-    };
+  lineAlign: {
+    type: String,
+    default: "middle",
   },
-  beforeMount() {
-    if (this.styleToken !== this.tokenProcesses) {
-      // Token变化时，重新解析style array
-      const style_set = combinedStyles(
-        this.stylesList,
-        !window.JsvDisableReactWrapper // 无ReactWrapper时，全解析style属性
-      );
+  enableLatex: Boolean,
+  className: String,
+});
 
-      this.styleCombined = style_set.combinedStyle;
-      // console.log("styleCombined = ", this.styleCombined);
-      if (!window.JsvDisableReactWrapper) {
-        this.styleClasses = style_set.combinedClass;
-        let key = this.verticalAlign + "_" + this.lineAlign;
-        if (!sAreaAlignStyleMap.has(key)) {
-          const text_class = new JsvTextStyleClass({});
-          text_class.setVerticalAlign(this.verticalAlign);
-          text_class.setLineAlign(this.lineAlign);
-          sAreaAlignStyleMap.set(key, text_class);
-        }
-        const va_set_class = sAreaAlignStyleMap.get(key);
-        if (this.styleClasses.length === 0) {
-          this.styleClasses += va_set_class.getName();
-        } else {
-          this.styleClasses = this.styleClasses + " " + va_set_class.getName();
-        }
-      }
-      this.tokenProcesses = this.styleToken;
-    }
-  },
-  methods: {
-    isJsvDisableReactWrapper() {
-      if (window.JsvDisableReactWrapper) {
-        return true;
-      }
-      return false;
-    },
-  },
-};
+const innerStyle = computed(() => {
+  let result = { ...props.style };
+  if (!result.verticalAlign) {
+    result.verticalAlign = props.verticalAlign;
+  }
+  if (!result.lineAlign) {
+    result.lineAlign = props.lineAlign;
+  }
+  return result;
+});
+const disable = window.JsvDisableReactWrapper;
 </script>
 
 <template>
   <div>
-    <div v-if="isJsvDisableReactWrapper()" :style="styleCombined">
+    <div v-if="disable" :style="style">
       <div :style="{ position: 'static', display: 'table' }">
         <div
+          :className="className"
           :style="{
             position: 'static',
             display: 'table-cell',
-            width: styleCombined.width,
-            height: styleCombined.height,
+            width: style.width,
+            height: style.height,
             verticalAlign: verticalAlign,
           }"
+          jsv-inherit-class="2"
         >
           <slot></slot>
         </div>
@@ -101,9 +61,12 @@ export default {
     </div>
     <div
       v-else
-      :className="styleClasses"
-      :style="{ ...styleCombined }"
+      :className="className"
+      :style="style"
       :jsv_text_latex_enable="enableLatex ? 'true' : ''"
+      :jsv_text_vertical_align="verticalAlign"
+      :jsv_text_line_align="lineAlign"
+      jsv-inherit-class="1"
     >
       <slot></slot>
     </div>

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -2,14 +2,20 @@
  * @Author: ChenChanghua
  * @Date: 2022-02-07 14:21:37
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-21 10:35:18
+ * @LastEditTime: 2022-08-24 13:18:21
  * @Description: file content
 -->
 <script>
 import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
-import { numberCheckSet, urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet";
-import { toNinePatchForgeViewSet } from "../../JsViewVueTools/NinePatchHelper"
-import { DECORATE_BORDER_RADIUS, DECORATE_NINEPATCH_ALPHA_MIX } from "./CommonType"
+import {
+  numberCheckSet,
+  urlCheckSet,
+} from "../../JsViewVueTools/TypeCheckAndSet";
+import { toNinePatchForgeViewSet } from "../../JsViewVueTools/NinePatchHelper";
+import {
+  DECORATE_BORDER_RADIUS,
+  DECORATE_NINEPATCH_ALPHA_MIX,
+} from "./CommonType";
 
 /*
  * JsvTextureAnim：对view的内容进行动画的控件
@@ -29,23 +35,23 @@ import { DECORATE_BORDER_RADIUS, DECORATE_NINEPATCH_ALPHA_MIX } from "./CommonTy
  *                                        bottomLeft {number}: // 左下角圆弧半径 默认 0
  *                                        bottomRight {number}: // 右下角圆弧半径 默认 0
  *                                      }
- * 
+ *
  *                                      NinePatchAlphaMix NinePatch图片的alpha叠加
  *                                      {
  *                                        type {string}: // 装饰类型，固定值"NinePatchAlphaMix"
  *                                        url {string}: // (必填)Alpha mix叠加的图片
  *                                        imageWidth {int} // (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
  *                                        centerWidth  {int} // (必填)原图信息: .9图的中心区域宽度(repeat区域)
- *                                        imageDspWidth {int} // (选填)原图缩放后的显示宽度，计算方法: 
+ *                                        imageDspWidth {int} // (选填)原图缩放后的显示宽度，计算方法:
  *                                                              四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
  *                                                                              原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
  *                                                              四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
  *                                        borderOutset {int} // (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
  *                                        animTime {int} // (必填)缩放动画的时长(单位毫秒)
  *                                      }
- * 
+ *
  *         animation {string}           texture的动画, 为keyframe的格式
- *         duration {number}            动画时长, 毫秒 
+ *         duration {number}            动画时长, 毫秒
  *         onAnimationEnd {function}    动画结束回调
  *         repeat {number}              动画执行次数, 默认1次, -1为无限循环
  *         delay {number}               动画延迟时间, 毫秒
@@ -53,11 +59,29 @@ import { DECORATE_BORDER_RADIUS, DECORATE_NINEPATCH_ALPHA_MIX } from "./CommonTy
  *         autoStart {boolean}          是否自动开始动画, 默认 false
  *         transform {string}           texture的transform, 计算时transform矩阵在动画矩阵右侧
  *         transformOrigin {string}     transform的锚点, 锚点不设置的话默认为中心点(0.5, 0.5)
- * 
+ *         texCoord {object}            {
+ *                                        alignAnchor: 偏差的基准点, 具体为TexAlignAnchor的enum
+ *                                        left: 距离anchor的偏差
+ *                                        top: 距离anchor的偏差
+ *                                        width: texture的宽
+ *                                        height: texture的高
+ *                                      }
  * public methods:
  *        start
  *          @description 开始动画
  */
+const TexAlignAnchor = {
+  LEFT_TOP: 1,
+  CENTER_TOP: 2,
+  RIGHT_TOP: 3,
+  LEFT_MIDDLE: 4,
+  CENTER: 5,
+  RIGHT_MIDDLE: 6,
+  LEFT_BOTTOM: 7,
+  CENTER_BOTTOM: 8,
+  RIGHT_BOTTOM: 9,
+};
+export { TexAlignAnchor };
 
 export default {
   props: {
@@ -88,7 +112,18 @@ export default {
     autoStart: {
       type: Boolean,
       default: false,
-    }
+    },
+    texCoord: {
+      type: Object,
+    },
+  },
+  watch: {
+    texCoord: {
+      handler(newValue, oldValue) {
+        this._updateTexCoord();
+      },
+      deep: true,
+    },
   },
   setup() {
     return {
@@ -100,7 +135,10 @@ export default {
   methods: {
     _createForgeView(view_texture, decorate_setting) {
       if (decorate_setting) {
-        return this._createLayoutViewWithDecorate(view_texture, decorate_setting);
+        return this._createLayoutViewWithDecorate(
+          view_texture,
+          decorate_setting
+        );
       } else {
         // 无特异修饰类型的view
         let texture_set = new Forge.ExternalTextureSetting(view_texture);
@@ -120,24 +158,27 @@ export default {
             topLeft: top_left,
             topRight: top_right,
             bottomRight: match.length > 2 ? match[2] : top_left,
-            bottomLeft: match.length > 3 ? match[3] : top_right
-          }
+            bottomLeft: match.length > 3 ? match[3] : top_right,
+          };
         }
       }
       return null;
     },
 
     _createLayoutViewWithDecorate(view_texture, decorate_setting) {
-      if (decorate_setting && typeof decorate_setting == 'object') {
-        switch(decorate_setting.type) {
+      if (decorate_setting && typeof decorate_setting == "object") {
+        switch (decorate_setting.type) {
           case DECORATE_NINEPATCH_ALPHA_MIX: {
             // NinePatch alpha mix view
-            return this._createNinePatchAlphaMixView(view_texture, decorate_setting);
-          };
+            return this._createNinePatchAlphaMixView(
+              view_texture,
+              decorate_setting
+            );
+          }
           case DECORATE_BORDER_RADIUS: {
             // 圆角view
             return this._createBorderRadius(view_texture, decorate_setting);
-          };
+          }
           default:
             console.error("Unknown set=", decorate_setting);
             return null;
@@ -157,8 +198,7 @@ export default {
       if (decorate_setting.url) {
         let converted_url = urlCheckSet(decorate_setting.url);
         let view_texture = textureManager.GetImage2(converted_url);
-
-        nine_patch_view.EnableAlphaMix(view_texture, true);
+        nine_patch_view.EnableAlphaMix(view_texture);
       } else {
         console.error("ninepatch url not set");
         return null;
@@ -166,13 +206,17 @@ export default {
 
       // calculate padding and repeat
       let view_set = toNinePatchForgeViewSet(
-                    numberCheckSet(decorate_setting.imageWidth),
-                    numberCheckSet(decorate_setting.centerWidth),
-                    decorate_setting.imageDspWidth, 
-                    numberCheckSet(decorate_setting.borderOutset));
+        numberCheckSet(decorate_setting.imageWidth),
+        numberCheckSet(decorate_setting.centerWidth),
+        decorate_setting.imageDspWidth,
+        numberCheckSet(decorate_setting.borderOutset)
+      );
       nine_patch_view.SetPadding(view_set.padding, view_set.padding); // 方图横纵一致
       nine_patch_view.SetRepeat(view_set.repeat, view_set.repeat); // 方图横纵一致
-      nine_patch_view.SetImageDspSize(view_set.imageDspSize, view_set.imageDspSize); // 方图横纵一致
+      nine_patch_view.SetImageDspSize(
+        view_set.imageDspSize,
+        view_set.imageDspSize
+      ); // 方图横纵一致
 
       return nine_patch_view;
     },
@@ -180,11 +224,15 @@ export default {
     _createBorderRadius(view_texture, decorate_setting) {
       // 圆角view
       let texture_mask = new Forge.ViewRoundCornerMask(
-                  numberCheckSet(decorate_setting.topLeft),
-                  numberCheckSet(decorate_setting.topRight),
-                  numberCheckSet(decorate_setting.bottomLeft),
-                  numberCheckSet(decorate_setting.bottomRight));
-      let texture_set = new Forge.ExternalTextureSetting(view_texture, texture_mask);
+        numberCheckSet(decorate_setting.topLeft),
+        numberCheckSet(decorate_setting.topRight),
+        numberCheckSet(decorate_setting.bottomLeft),
+        numberCheckSet(decorate_setting.bottomRight)
+      );
+      let texture_set = new Forge.ExternalTextureSetting(
+        view_texture,
+        texture_mask
+      );
       return new Forge.LayoutView(texture_set);
     },
 
@@ -192,6 +240,31 @@ export default {
       this.onAnimationEnd?.();
     },
 
+    _updateTexCoord() {
+      if (this.texCoord) {
+        if (this.texCoord.width > 0 && this.texCoord.height > 0) {
+          const offsetLeft = !isNaN(this.texCoord.left)
+            ? this.texCoord.left
+            : -this.texCoord.width / 2;
+          const offsetTop = !isNaN(this.texCoord.top)
+            ? this.texCoord.top
+            : -this.texCoord.height / 2;
+          const anchor = Number.isInteger(this.texCoord.alignAnchor)
+            ? this.texCoord.alignAnchor
+            : 5;
+          this.innerView.SetTextureCoord(
+            offsetLeft,
+            offsetTop,
+            this.texCoord.width,
+            this.texCoord.height,
+            anchor
+          );
+        } else {
+          console.error("JsvTextureAnim");
+        }
+      }
+    },
+
     start() {
       if (this.forgeAnimation && this.innerView) {
         this.innerView.StartTextureAnimation(this.forgeAnimation);
@@ -200,16 +273,20 @@ export default {
 
     getTransition() {
       let transition = "";
-      let decorate = this.$props.decorate;
+      let decorate = this.decorate;
 
-      if (decorate && decorate.type == DECORATE_NINEPATCH_ALPHA_MIX && decorate.animTime > 0) {
+      if (
+        decorate &&
+        decorate.type == DECORATE_NINEPATCH_ALPHA_MIX &&
+        decorate.animTime > 0
+      ) {
         // Ninepatch模式可以设置长宽的过渡动画
         let anim_time = decorate.animTime;
         transition = `left ${anim_time}s, top ${anim_time}s, width ${anim_time}s, height ${anim_time}s`;
       }
 
       return transition;
-    }
+    },
   },
 
   created() {
@@ -218,8 +295,13 @@ export default {
 
       // 1.获得主view的展示内容图片 texture
       let image_url = urlCheckSet(this.src);
-      let view_texture = textureManager.GetImage2(image_url, false, null, "RGB_8888", null);
-
+      let view_texture = textureManager.GetImage2(
+        image_url,
+        false,
+        null,
+        "RGB_8888",
+        null
+      );
       // 1.1 兼容border转为decorate
       let decorate = this.$props.decorate;
       if (this.$props.borderRadius) {
@@ -228,7 +310,6 @@ export default {
 
       // 2.创建view
       this.innerView = this._createForgeView(view_texture, decorate);
-
       // 3.设置texture基本形变
       if (this.transform) {
         this.innerView.ResetTextureCssTransform(
@@ -236,6 +317,7 @@ export default {
           this.transformOrigin
         );
       }
+      this._updateTexCoord();
 
       // 4.设置texture的动画形变
       if (this.animation) {
@@ -248,11 +330,7 @@ export default {
         );
         this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
         this.forgeAnimation.SetAnimationListener(
-          new Forge.AnimationListener(
-            null,
-            this._onAnimationEnd,
-            null
-          )
+          new Forge.AnimationListener(null, this._onAnimationEnd, null)
         );
       } else {
         this.forgeAnimation = null;
@@ -283,15 +361,14 @@ export default {
 </script>
 
 <template>
-  <div 
+  <div
     :style="{
       top: top,
-      left: left, 
+      left: left,
       width: width,
       height: height,
       transition: getTransition(),
     }"
-    :jsv_innerview="innerViewId">
-
-  </div>
+    :jsv_innerview="innerViewId"
+  ></div>
 </template>

package/utils/JsViewVueWidget/JsvTextureAnim/index.js

@@ -2,16 +2,20 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-13 15:14:29
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-11 13:34:48
+ * @LastEditTime: 2022-08-18 11:17:37
  * @Description: file content
  */
 //考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvTextureAnim from "./JsvTextureAnim.vue";
-console.log("cchtest texture anim", JsvTextureAnim)
 let _JsvTextureAnim = JsvTextureAnim;
-if (window.JsvWidgetWrapperGroup && window.JsvWidgetWrapperGroup.BrowserTextureAnim) {
+if (
+  window.JsvWidgetWrapperGroup &&
+  window.JsvWidgetWrapperGroup.BrowserTextureAnim
+) {
   _JsvTextureAnim = window.JsvWidgetWrapperGroup.BrowserTextureAnim;
 }
 
-export * from "./CommonType"
-export default _JsvTextureAnim.default
+export * from "./CommonType";
+export default _JsvTextureAnim.default;
+const TexAlignAnchor = JsvTextureAnim.TexAlignAnchor;
+export { TexAlignAnchor };

package/utils/JsViewVueWidget/JsvTouchContainer.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-04-10 20:46:53
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-10 23:07:54
+ * @LastEditTime: 2022-11-07 14:43:44
  * @Description: file content
 -->
 <script>
@@ -68,7 +68,6 @@ export default {
   mounted() {
     if (this.$refs.touchContainer && this.$refs.touchContainer.jsvMaskView) {
       const view = this.$refs.touchContainer.jsvMaskView;
-      const view_lp = view.GetLayoutParams();
       const page_width = this.flingPageWidth;
       const page_edge = this.flingPageEdge;
       const direction = this.direction;
@@ -80,13 +79,13 @@ export default {
             x: 0,
             y: 0,
             width: page_width,
-            height: view_lp.Height,
+            height: this.$refs.touchContainer.style.height,
           };
         } else {
           drag_limit_area = {
             x: 0,
             y: 0,
-            width: view_lp.Width,
+            width: this.$refs.touchContainer.style.width,
             height: page_width,
           };
         }

package/utils/JsViewVueWidget/JsvVideo.vue

@@ -10,21 +10,18 @@
 --> 
 
 <script>
-import { Options, Vue } from "vue-class-component";
-
-@Options({
+export default {
   props: {
-    onRef: { type: Function, default: () => {} },
-    useTexture: { type: Boolean, default: false },
+    onRef: {
+      type: Function,
+      default: () => {}
+    },
+    useTexture: {
+      type: Boolean,
+      default: false
+    },
   },
-})
-class JsvVideo extends Vue {
-  constructor(props) {
-    super(props);
-  }
 }
-
-export default JsvVideo;
 </script>
 
 <template>

package/utils/JsViewVueWidget/index.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-05 11:00:51
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 17:08:08
+ * @LastEditTime: 2022-08-18 13:17:17
  * @Description: file content
  */
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
@@ -18,7 +18,7 @@ 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 JsvTextureAnim, TexAlignAnchor, DECORATE_NINEPATCH_ALPHA_MIX, DECORATE_BORDER_RADIUS } from "./JsvTextureAnim";
 export { default as JsvVisibleSensor } from "./JsvVisibleSensor";
 export { default as JsvFilterView } from "./JsvFilterView.vue";
 export {

package/utils/JsViewVueWidget/utils/index.js

@@ -0,0 +1,8 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-11-09 15:18:52
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-09 15:18:52
+ * @Description: file content
+ */
+export * from "./text"

package/utils/JsViewVueWidget/utils/text.js

@@ -0,0 +1,19 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-11-09 15:18:43
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-10 15:02:54
+ * @Description: file content
+ */
+const getTextWidth = (text, style) => {
+  const textParams = {
+    str: text ? text : "",
+    font: style.fontFamily ? style.fontFamily : Forge.TextUtils._sDefaultFont,
+    size: style.fontSize ? style.fontSize : Forge.TextUtils._sDefaultFontSize,
+    italic: style.fontStyle === "italic" ? "italic" : "",
+    bold: style.fontWeight === "bold" ? "bold" : "",
+  };
+  return window.PlatformUtils.GetTextWidth(textParams);
+};
+
+export { getTextWidth };