@shijiu/jsview-vue 0.9.602 → 0.9.684

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -3,236 +3,209 @@
  * JsvMarquee：Vue高阶组件，文字跑马灯
  *      props说明:
  *          text          {String}   文字内容
- *          layoutStyles  {Array|Object}   控件位置信息 [{top: 0, left: 0, width: 0, height: 0}]
- *          fontStyles    {Array|Object}   文字样式
+ *          style         {Object}   样式
  *          slideSpeed    {int}      滚动速度 px/s, 默认60
  *          forceSlide    {boolean}  短文字是否滚动，默认false
 -->
 
-<script>
+<script setup>
 import { Forge } from "../../dom/jsv-forge-define";
-import {
-  JsvStyleClass,
-  JsvTextStyleClass,
-  combinedStyles,
-} from "../JsViewVueTools/JsvStyleClass";
+import { getTextWidth } from "./utils";
+import { ref, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
 
-const sDefaultLayoutStyle = new JsvStyleClass({
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 20,
-});
-const sDefaultFontStyle = new JsvTextStyleClass({
-  color: "rgba(255,255,255,1.0)",
-  fontSize: 10,
-  textAlign: "center",
-  lineHeight: "20px",
-});
-const sCommonFontStyle = new JsvTextStyleClass({
-  whiteSpace: "nowrap",
-});
-export default {
-  props: {
-    text: {
-      type: String,
-      default: "",
-    },
-    layoutStyles: {
-      type: [Array, Object],
-      default: () => [sDefaultLayoutStyle],
-    },
-    fontStyles: {
-      type: [Array, Object],
-    },
-    styleToken: String,
-    slideSpeed: {
-      // 60px per second
-      type: Number,
-      default: 60,
-    },
-    forceSlide: {
-      type: Boolean,
-      default: false,
-    },
-    className: {
-      type: String,
+const defaultFontStyle = () => {
+  return {
+    color: "rgba(255,255,255,1.0)",
+    fontSize: 10,
+    textAlign: "start",
+    lineHeight: "20px",
+    whiteSpace: "nowrap",
+    direction: 'ltr'
+  };
+};
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  style: {
+    type: Object,
+    default() {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 20,
+        color: "rgba(255,255,255,1.0)",
+        fontSize: 10,
+        textAlign: "start",
+        lineHeight: "20px",
+        whiteSpace: "nowrap",
+        direction: 'ltr,'
+      };
     },
   },
-  data() {
-    return {
-      asyncTextLenTimer: -1,
-      rollTimeId: -1,
-      animationCount: 0,
-      LayoutStyle: null,
-      FontStyle: null,
-      FontStyleClass: null,
-      TokenProcessed: null,
-    };
+  slideSpeed: {
+    type: Number,
+    default: 60,
   },
-  setup() {},
-  computed: {
-    _className() {
-      return this.FontStyleClass ? this.FontStyleClass : this.className;
-    },
+  forceSlide: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    _asyncStartSlider() {
-      // 清理之前的Slider处理
-      this._resetSlider();
+});
+const slideDiv = ref(null);
+const textDiv = ref(null);
+let animState = 0;
+let animIdleHandler = -1;
+let asyncStartHandler = -1;
+const fontStyle = computed(() => {
+  let { left, top, width, height, ...rest } = props.style;
+  let r = defaultFontStyle();
+  Object.assign(r, rest);
+  if (props.forceSlide) {
+    //滚送时必需start对齐
+    r.textAlign = "start";
+  }
+  return r;
+});
+//rtl文字需要先获得文字宽度
+let textWidth =
+  fontStyle.value.direction == "rtl" ? getTextWidth(props.text, fontStyle.value) : 0;
+const slideDivLeft = computed(() =>
+  fontStyle.value.direction == "rtl" && props.style.width < textWidth
+    ? props.style.width - textWidth
+    : 0
+);
 
-      // 稍进行延迟，以等待JsView的native端描绘文字并回传文字宽度
-      if (this.asyncTextLenTimer < 0) {
-        this.asyncTextLenTimer = setTimeout(() => {
-          if (
-            this.forceSlide ||
-            this.$refs.textRef.clientWidth > this.LayoutStyle.width
-          ) {
-            this._slideNextStep();
-          }
-          this.asyncTextLenTimer = -1;
-        }, 500);
-      }
-    },
-    _resetSlider() {
-      if (this.rollTimeId >= 0) {
-        clearTimeout(this.rollTimeId);
-        this.rollTimeId = -1;
-      }
-      this.animationCount = 0;
-      this.$refs.sliderRef?.jsvMaskView?.StopAnimation();
-    },
-    _slideNextStep() {
-      const text_width = this.$refs.textRef.clientWidth;
-      if (this.animationCount % 2 === 0) {
-        // 文字从原始位置，向左移动出屏幕(每次完整移动，停顿1秒)
-        this.rollTimeId = setTimeout(() => {
-          this.rollTimeId = -1;
-          const anim = new Forge.TranslateFrameAnimation(
-            0,
-            -text_width,
-            this.$props.slideSpeed,
-            true,
-            0,
-            0
-          );
-          anim.SetAnimationListener(
-            new Forge.AnimationListener(
-              null,
-              (ended) => {
-                if (ended) {
-                  // 正常结束，非Cancel时，进行下一个动作
-                  this._slideNextStep();
-                }
-              },
-              null
-            )
-          );
-          anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-          this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
-          this.animationCount += 1;
-        }, 1000);
-      } else {
-        // 文字从右边屏幕外部，移动回屏幕中的文字原始位置
-        const anim = new Forge.TranslateFrameAnimation(
-          this.LayoutStyle.width,
-          0,
-          this.$props.slideSpeed,
-          true,
-          this.LayoutStyle.width,
-          0
-        );
-        anim.SetAnimationListener(
-          new Forge.AnimationListener(
-            null,
-            (ended) => {
-              if (ended) {
-                // 正常结束，非Cancel时，进行下一个动作
-                this._slideNextStep();
-              }
-            },
-            null
-          )
-        );
-        this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
-        this.animationCount += 1;
-      }
-    },
-    _AnalyzeStyleChange() {
-      if (this.$props.styleToken !== this.TokenProcessed) {
-        // Token变化时，重新解析style array
-        let style_list;
-        if (this.layoutStyles instanceof Array) {
-          style_list = this.layoutStyles;
-        } else {
-          style_list = [this.layoutStyles];
-        }
-        const layout_set = combinedStyles(style_list, true);
-        this.LayoutStyle = layout_set.combinedStyle;
-        if (this.fontStyles) {
-          if (this.fontStyles instanceof Array) {
-            if (this.fontStyles[0] instanceof JsvStyleClass) {
-              style_list = [...this.fontStyles, sCommonFontStyle];
-            } else {
-              style_list = this.fontStyles.map(
-                (item) => new JsvStyleClass(item)
-              );
-              style_list.push(sCommonFontStyle);
+const slideStep = () => {
+  if (animState == 0) {
+    // 文字从原始位置，移动出屏幕(每次完整移动，停顿1秒)
+    let start = 0,
+      end = fontStyle.value.direction == "rtl" ? textWidth : -textWidth;
+    animIdleHandler = setTimeout(() => {
+      animIdleHandler = -1;
+      const anim = new Forge.TranslateFrameAnimation(
+        start,
+        end,
+        props.slideSpeed,
+        true,
+        0,
+        0
+      );
+      anim.SetAnimationListener(
+        new Forge.AnimationListener(
+          null,
+          (ended) => {
+            if (ended) {
+              // 正常结束，非Cancel时，进行下一个动作
+              slideStep();
             }
-          } else {
-            style_list = [
-              this.fontStyles instanceof JsvStyleClass
-                ? this.fontStyles
-                : new JsvStyleClass(this.fontStyles),
-              sCommonFontStyle,
-            ];
+          },
+          null
+        )
+      );
+      anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+      toRaw(slideDiv.value.jsvMaskView).StartAnimation(anim);
+      animState = 1;
+    }, 1000);
+  } else {
+    // 文字从屏幕外部，移动回屏幕中的文字原始位置
+    let start =
+        fontStyle.value.direction == "rtl" ? -props.style.width : props.style.width,
+      end = 0;
+    const anim = new Forge.TranslateFrameAnimation(
+      start,
+      end,
+      props.slideSpeed,
+      true,
+      props.style.width,
+      0
+    );
+    anim.SetAnimationListener(
+      new Forge.AnimationListener(
+        null,
+        (ended) => {
+          if (ended) {
+            // 正常结束，非Cancel时，进行下一个动作
+            slideStep();
           }
-          const font_set = combinedStyles(style_list);
-          this.FontStyle = font_set.combinedStyle;
-          this.FontStyleClass = font_set.combinedClass;
-        }
+        },
+        null
+      )
+    );
+    toRaw(slideDiv.value.jsvMaskView).StartAnimation(anim);
+    animState = 0;
+  }
+};
 
-        if (this.FontStyleClass && this.FontStyleClass.length === 0) {
-          this.FontStyleClass = null;
-        }
-        this.TokenProcessed = this.styleToken;
-      }
-    },
-  },
-  created() {
-    this._AnalyzeStyleChange();
-  },
-  mounted() {
-    this._asyncStartSlider();
-  },
-  unmounted() {
-    // 清理所有异步处理，并停止Slider动作
-    if (this.asyncTextLenTimer >= 0) {
-      clearTimeout(this.asyncTextLenTimer);
-      this.asyncTextLenTimer = -1;
+const stopSlide = () => {
+  if (animIdleHandler > 0) {
+    clearTimeout(animIdleHandler);
+    animIdleHandler = -1;
+  }
+  animState = 0;
+  toRaw(slideDiv.value?.jsvMaskView)?.StopAnimation();
+};
+
+const asyncStartAnim = () => {
+  stopSlide();
+  // 稍进行延迟，以等待JsView的native端描绘文字并回传文字宽度
+  if (asyncStartHandler > 0) {
+    clearTimeout(asyncStartHandler);
+  }
+  asyncStartHandler = setTimeout(() => {
+    if (textWidth <= 0) {
+      textWidth = textDiv.value.clientWidth;
     }
-    this._resetSlider();
-  },
+    if (props.forceSlide || textWidth > props.style.width) {
+      slideStep();
+    }
+    asyncStartHandler = -1;
+  }, 500);
 };
+
+onMounted(() => {
+  if (fontStyle.value.direction == "ltr") {
+    //普通的ltr文字异步通过clientWidth获取文字宽度
+    asyncStartAnim();
+  } else {
+    if (props.forceSlide || textWidth > props.style.width) {
+      slideStep();
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(asyncStartHandler);
+  asyncStartHandler = -1;
+  stopSlide();
+});
 </script>
 
 <template>
-  <div :style="{ ...LayoutStyle, overflow: 'hidden' }">
+  <div
+    :style="{
+      left: style.left,
+      top: style.top,
+      width: style.width,
+      height: style.height,
+      overflow: 'hidden',
+    }"
+  >
     <div
-      ref="sliderRef"
+      ref="slideDiv"
       :style="{
-        left: 0,
+        left: slideDivLeft,
         top: 0,
-        width: LayoutStyle.width,
-        height: LayoutStyle.height,
+        width: style.width,
+        height: style.height,
       }"
     >
       <div
-        ref="textRef"
-        :className="_className"
-        :style="{ ...FontStyle, height: LayoutStyle.height }"
-        :jsv_text_align_minwidth="LayoutStyle.width"
-        jsv-inherit-class="2"
+        ref="textDiv"
+        :style="{ ...fontStyle, height: style.height }"
+        :jsv_text_align_minwidth="style.width"
       >
         {{ text }}
       </div>

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -7,42 +7,51 @@
  *                                 例如`${window.JsView?.getJsContextId()}_${you_name}`
  -->
 
- <script>
+<script>
 import { Forge, ForgeExtension } from "../../dom/jsv-forge-define";
 
 export default {
   props: {
     style: {
       type: Object,
-      default: () => { return {} }
+      default: () => {
+        return {};
+      },
     },
     getId: Function,
     setId: String,
+    seeThrough: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     return {
       isBrowserDebug: window.jsvIsBrowserDebug,
       jsvMainView: undefined,
       innerViewId: undefined,
-    }
+    };
   },
   beforeMount() {
-    if(this.isBrowserDebug) {
+    if (this.isBrowserDebug) {
       return;
     }
 
     // 初始化View
 
     // 创建JsView图层穿透的texture，抠洞处理
-    const seeThroughTexture = ForgeExtension.TextureManager.GetColorTexture(
-      "rgba(0,0,0,0)"
-    );
-    const textureSetting = new Forge.TextureSetting(
-      seeThroughTexture,
-      null,
-      null,
-      false
-    );
+    // 默认为扣洞，有的场景不需要扣洞
+    let textureSetting = null;
+    if (this.seeThrough) {
+      const seeThroughTexture =
+        ForgeExtension.TextureManager.GetColorTexture("rgba(0,0,0,0)");
+      textureSetting = new Forge.TextureSetting(
+        seeThroughTexture,
+        null,
+        null,
+        false
+      );
+    }
 
     // 通过内置函数构造定制的NativeSharedView
     this.jsvMainView = new Forge.NativeSharedView(textureSetting);
@@ -51,7 +60,7 @@ export default {
     );
 
     // 更新宽高
-    if(typeof this.jsvMainView!="undefined" && this.jsvMainView){
+    if (typeof this.jsvMainView != "undefined" && this.jsvMainView) {
       if (this.setId) {
         // 使用设置进来的track id，而非自动生成
         this.jsvMainView.SetTrackId(this.setId);
@@ -61,7 +70,7 @@ export default {
     }
   },
   beforeUnmount() {
-    if(this.isBrowserDebug) {
+    if (this.isBrowserDebug) {
       return;
     }
 
@@ -75,21 +84,20 @@ export default {
 };
 </script>
 
- <template>
-  <div v-if="!isBrowserDebug"
+<template>
+  <div
+    v-if="!isBrowserDebug"
     :style="{
-      left: style.left, 
+      left: style.left,
       top: style.top,
       width: style.width,
-      height: style.height
-      }"
+      height: style.height,
+    }"
     :jsv_innerview="innerViewId"
   >
-    <slot/>
-  </div> <div v-else
-    :style="{...style}"
-  >
-    <slot/>
+    <slot />
   </div>
-</template>
-
+  <div v-else :style="{ ...style }">
+    <slot />
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -44,7 +44,6 @@ export default {
       if (!this.waitForInit) {
         return true;
       }
-
       return this.style && this.style.width !== 0 && this.style.height !== 0;
     },
     getTransition() {
@@ -79,7 +78,7 @@ export default {
 
 <template>
   <div
-    v-if="isReady"
+    v-if="isReady()"
     :style="{
       ...style,
       transition: getTransition(),

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -7,8 +7,8 @@
  *                                  列表的内容可以是图片，音频等任何网络资源，下载后缓存在本地，归入本地缓存管理(LRU清理策略)
  *      onPreloading {Function(float percent)}: 预加载中回调，返回预加载进度
  *      onPreloadDone {Function(sizeArray)}: 预加载完成回调，sizeArray(格式Object[])，每个的格式为{width, height}
- *      onDownloadDone {Function(pathesArray)}: 预下载完成回调,pathesArray(格式为String[])为下载好回调的地址, 
- *                                         其中pathesArray为存储位置的路径列表
+ *      onDownloadDone {Function(pathesArray, extra)}: 预下载完成回调,pathesArray(格式为String[])为下载好回调的地址, 
+ *                                         其中pathesArray为存储位置的路径列表, extra为额外信息(目前只有下载图片时的尺寸)
  *
  * 注意事项:
  *      指定加载时的尺寸(0为不指定)，与img标签中的 jsv_img_scaledown_tex 属性一起使用
@@ -54,10 +54,11 @@ const buildPreloadInfo = (
   };
 };
 
-const buildDownloadInfo = (url, net_setting = null) => {
+const buildDownloadInfo = (url, net_setting = null, get_image_size) => {
   return {
     url,
     netSetting: net_setting,
+    getImageSize: get_image_size,
     magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
   };
 };
@@ -79,6 +80,7 @@ export default {
       downloadViewList: [],
       preloadStateList: [],
       downloadStateList: [],
+      downloadResultMap: {},
       preloadResultMap: {},
       CONST_FORMAT_TOKEN: "_JsvP_",
       preloadIsNullNum: 0, // 纪录传入的preload为null的数量，由于vue不支持在子组件修改props值，所有在删除值为null时，需要++，这样才能保证与传入数据的length相等从而触发回调
@@ -136,29 +138,6 @@ export default {
       }
     },
 
-    // shouldComponentUpdate(nextProps, nextState) {
-    //     if (
-    //         nextProps.preloadList.length === this.preloadList.length &&
-    //         nextProps.downloadList.length === this.downloadList.length
-    //     ) {
-    //     let same = true;
-    //     for (let i = 0; i < nextProps.preloadList.length; i++) {
-    //         if (nextProps.preloadList[i].url !== this.preloadList[i].url) {
-    //             same = false;
-    //             break;
-    //         }
-    //     }
-    //     for (let i = 0; i < nextProps.downloadList.length; i++) {
-    //         if (nextProps.downloadList[i].url !== this.downloadList[i].url) {
-    //             same = false;
-    //             break;
-    //         }
-    //     }
-    //     return !same;
-    //     }
-    //     return true;
-    // },
-
     _checkPreload() {
       let loadedNum = 0;
       this.preloadStateList.forEach((state) => {
@@ -261,7 +240,10 @@ export default {
         if (!state) return;
       }
       if (this.$props.onDownloadDone) {
-        this.$props.onDownloadDone(this.downloadStateList);
+        this.$props.onDownloadDone(
+          this.downloadStateList,
+          this.downloadResultMap
+        );
       }
     },
 
@@ -269,7 +251,6 @@ export default {
       if (!this.downloadList) {
         return;
       }
-      this.downloadStateList = new Array(this.downloadList.length).fill(null);
       // 直接在map前将url为null的值清除掉
       let downloadListData = this.downloadList;
       for (let i = 0; i < downloadListData.length; i++) {
@@ -277,13 +258,14 @@ export default {
           downloadListData.splice(i, 1);
         }
       }
+      this.downloadStateList = new Array(downloadListData.length).fill(null);
       this.downloadViewList = downloadListData.map((item, index) => {
         if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
           console.error(
             "Error:format mismatch, data should comes from function buildDownloadInfo()"
           );
         }
-        console.log(`OnDownload get${index} url=${item.url}`)
+        console.log(`OnDownload get${index} url=${item.url}`);
         const base_url = item.url;
         let image_url = base_url;
         if (base_url && base_url.indexOf("http") < 0) {
@@ -292,19 +274,33 @@ export default {
             image_url = new window.JsView.Dom.UrlRef(base_url).href;
           }
         }
-        const texture =
-          ForgeExtension.TextureManager.GetDownloadTexture(image_url);
+        const texture = ForgeExtension.TextureManager.GetDownloadTexture(
+          image_url,
+          null,
+          item.getImageSize
+        );
         if (!texture) {
-        console.error("Error: Down view build texture failed for " + image_url);
-        // 无法创建texture的图片先认为加载完成
-        this.downloadStateList[index] = "invalid";
-        return;
-      }
-      const callback_token = texture.RegisterLoadImageCallback(null, (texture_info) => {
-        console.log(`OnDownload done index${index}`)
-        this.downloadStateList[index] = texture_info.extra.absolutePath;
-        this._checkDownload();
-      });
+          console.error(
+            "Error: Down view build texture failed for " + image_url
+          );
+          // 无法创建texture的图片先认为加载完成
+          this.downloadStateList[index] = "invalid";
+          return;
+        }
+        const callback_token = texture.RegisterLoadImageCallback(
+          null,
+          (texture_info) => {
+            console.log(`OnDownload done index${index}`);
+            this.downloadStateList[index] = texture_info.extra.absolutePath;
+            if (item.getImageSize && texture_info.extra.width && texture_info.extra.height) {
+              this.downloadResultMap[texture_info.extra.absolutePath] = {
+                width: texture_info.extra.width,
+                height: texture_info.extra.height,
+              };
+            }
+            this._checkDownload();
+          }
+        );
         if (texture.EnableBackgroundLoad) {
           texture.EnableBackgroundLoad(this);
         }