@shijiu/jsview-vue 0.9.631 → 0.9.684

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/JsvSwiper/JsvSwiper.vue

@@ -34,6 +34,7 @@ import { Forge } from "../../../dom/jsv-forge-define";
 import JsvActorMove, {
   JsvActorMoveControl,
 } from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
 import Indicator from "./Indicator.vue";
 import { ref } from "vue";
 
@@ -50,7 +51,7 @@ function modToRange(value, mod, start = 0) {
 }
 
 export default {
-  components: { Indicator, JsvActorMove },
+  components: { Indicator, JsvActorMove, JsvVisibleSensor },
   props: {
     showIndicator: {
       type: Boolean,
@@ -127,7 +128,7 @@ export default {
     reverseSwipe: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   computed: {
     indicatorLayout() {
@@ -407,6 +408,13 @@ export default {
       this.offset += direction;
       this._startAnimation(direction > 0 ? 1 : -1);
     },
+    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.startAutoplay();
+      }
+    },
   },
   mounted() {
     if (!this.focused) {
@@ -420,6 +428,14 @@ export default {
 </script>
 
 <template>
+  <jsv-visible-sensor
+    :horizonShown="0.2"
+    :verticalShown="0.2"
+    :width="layoutInfo.width"
+    :height="layoutInfo.height"
+    :enable="true"
+    :callback="onBeVisible"
+  ></jsv-visible-sensor>
   <jsv-focus-block
     :name="name"
     :onAction="{

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/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/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 };