@shijiu/jsview-vue 0.9.684 → 0.9.766

package/utils/JsViewVueWidget/JsvApic/JsvApic.vue

@@ -68,7 +68,7 @@ export default {
   methods: {
     play() {
       if (this.$refs.element) {
-        let main_view = this.$refs.element.jsvMainView;
+        let main_view = this.$refs.element.jsvGetProxyView();
         if (main_view && main_view.ChildViews.length > 0) {
           let target_view = main_view.ChildViews[0];
           if (
@@ -106,7 +106,7 @@ export default {
     },
     stop() {
       if (this.$refs.element) {
-        let main_view = this.$refs.element.jsvMainView;
+        let main_view = this.$refs.element.jsvGetProxyView();
         if (main_view && main_view.ChildViews.length > 0) {
           let target_view = main_view.ChildViews[0];
           if (
@@ -130,7 +130,7 @@ export default {
     }
     if (this.onLoad) {
       if (this.$refs.element) {
-        let main_view = this.$refs.element.jsvMainView;
+        let main_view = this.$refs.element.jsvGetProxyView();
         if (main_view && main_view.ChildViews.length > 0) {
           let target_view = main_view.ChildViews[0];
           if (
@@ -151,7 +151,7 @@ export default {
   beforeUnmount() {
     this.stop();
     if (this.$refs.element) {
-      let main_view = this.$refs.element.jsvMainView;
+      let main_view = this.$refs.element.jsvGetProxyView();
       if (main_view && main_view.ChildViews.length > 0) {
         let target_view = main_view.ChildViews[0];
         if (

package/utils/JsViewVueWidget/JsvGrid.vue

@@ -66,7 +66,7 @@
 -->
 <script>
 import { reactive } from "vue";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+import { EdgeDirection, FocusMoveType } from "jsview/utils/JsViewEngineWidget";
 
 const TAG = "JsvGrid";
 
@@ -93,14 +93,6 @@ class LineType extends UpdateType {
   }
 }
 
-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 {

package/utils/JsViewVueWidget/JsvInput/Cursor.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 export default {
   props: {
     left: Number,

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -10,8 +10,14 @@
 
 <script setup>
 import { Forge } from "../../dom/jsv-forge-define";
-import { getTextWidth } from "./utils";
-import { ref, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
+import { getTextWidth } from "../JsViewVueTools/JsvTextTools";
+import {
+  shallowRef,
+  computed,
+  toRaw,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 
 const defaultFontStyle = () => {
   return {
@@ -20,7 +26,7 @@ const defaultFontStyle = () => {
     textAlign: "start",
     lineHeight: "20px",
     whiteSpace: "nowrap",
-    direction: 'ltr'
+    direction: "ltr",
   };
 };
 const props = defineProps({
@@ -41,7 +47,7 @@ const props = defineProps({
         textAlign: "start",
         lineHeight: "20px",
         whiteSpace: "nowrap",
-        direction: 'ltr,'
+        direction: "ltr,",
       };
     },
   },
@@ -54,8 +60,8 @@ const props = defineProps({
     default: false,
   },
 });
-const slideDiv = ref(null);
-const textDiv = ref(null);
+const slideDiv = shallowRef(null);
+const textDiv = shallowRef(null);
 let animState = 0;
 let animIdleHandler = -1;
 let asyncStartHandler = -1;
@@ -71,7 +77,9 @@ const fontStyle = computed(() => {
 });
 //rtl文字需要先获得文字宽度
 let textWidth =
-  fontStyle.value.direction == "rtl" ? getTextWidth(props.text, fontStyle.value) : 0;
+  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
@@ -106,13 +114,15 @@ const slideStep = () => {
         )
       );
       anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-      toRaw(slideDiv.value.jsvMaskView).StartAnimation(anim);
+      toRaw(slideDiv.value).jsvGetProxyView(true).StartAnimation(anim);
       animState = 1;
     }, 1000);
   } else {
     // 文字从屏幕外部，移动回屏幕中的文字原始位置
     let start =
-        fontStyle.value.direction == "rtl" ? -props.style.width : props.style.width,
+        fontStyle.value.direction == "rtl"
+          ? -props.style.width
+          : props.style.width,
       end = 0;
     const anim = new Forge.TranslateFrameAnimation(
       start,
@@ -134,7 +144,7 @@ const slideStep = () => {
         null
       )
     );
-    toRaw(slideDiv.value.jsvMaskView).StartAnimation(anim);
+    toRaw(slideDiv.value.jsvGetProxyView(true)).StartAnimation(anim);
     animState = 0;
   }
 };
@@ -145,7 +155,7 @@ const stopSlide = () => {
     animIdleHandler = -1;
   }
   animState = 0;
-  toRaw(slideDiv.value?.jsvMaskView)?.StopAnimation();
+  toRaw(slideDiv.value?.jsvGetProxyView(true))?.StopAnimation();
 };
 
 const asyncStartAnim = () => {
@@ -211,4 +221,4 @@ onBeforeUnmount(() => {
       </div>
     </div>
   </div>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -110,7 +110,7 @@ export default {
       const canvas = window.originDocument.createElement("canvas");
       canvas.style.width = this.style.width + "px";
       canvas.style.height = this.style.height + "px";
-      this.$refs.innerView?.jsvMaskView.Element.appendChild(canvas);
+      this.$refs.innerView?.jsvGetProxyView(true).Element.appendChild(canvas);
 
       const clip_image = new Image();
       const bg_image = new Image();

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -16,64 +16,77 @@
  *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
 -->
 
-<script>
-export default {
-  name: "JsvNinePatch",
-  props: {
-    style: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    top: { type: Number, default: 0 },
-    left: { type: Number, default: 0 },
-    waitForInit: { type: Boolean, default: true },
-
-    imageUrl: { type:String, required: true },
-    imageWidth: { type:Number, required: true },
-    imageDspWidth: { type:Number, default:0 },
-    contentWidth: { type:Number, default: -1},
-    centerWidth: { type:Number, default: -1, required: true },
-    borderOutset: { type:Number, required: true },
-    animTime: Number,
-  },
+<script setup>
+import { ref, watchEffect, computed } from "vue";
 
-  methods: {
-    isReady() {
-      if (!this.waitForInit) {
-        return true;
-      }
-      return this.style && this.style.width !== 0 && this.style.height !== 0;
-    },
-    getTransition() {
-      let transition = "";
-      if (this.animTime) {
-        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
-      }
-
-      return transition;
+const props = defineProps({
+  style: {
+    type: Object,
+    default: () => {
+      return {};
     },
   },
+  top: { type: Number, default: 0 },
+  left: { type: Number, default: 0 },
+  waitForInit: { type: Boolean, default: true },
 
-  data() {
-    let center_width = (this.contentWidth >= 0 ? this.contentWidth : 0); // 兼容处理，contentWidth变更为centerWidth
-    if (this.centerWidth >= 0) {
-      center_width = this.centerWidth;
-    }
+  imageUrl: { type: String, required: true },
+  imageWidth: { type: Number, required: true },
+  imageDspWidth: { type: Number, default: 0 },
+  contentWidth: { type: Number, default: -1 },
+  centerWidth: { type: Number, default: -1, required: true },
+  borderOutset: { type: Number, required: true },
+  animTime: { type: Number, default: 0 },
+});
 
-    // slice_width 获取
-    let slice_width = Math.ceil(Math.max(0, (this.imageWidth - center_width) / 2));
+const isReady = () => {
+  if (!props.waitForInit) {
+    return true;
+  }
+  return props.style && props.style.width !== 0 && props.style.height !== 0;
+};
 
-    let image_dsp_width = this.imageDspWidth > 0 ? this.imageDspWidth : this.imageWidth;
+const getTransition = () => {
+  let transition = "";
+  if (props.animTime && props.animTime > 0) {
+    transition = `left ${props.animTime}s, top ${props.animTime}s, width ${props.animTime}s, height ${props.animTime}s`;
+  }
 
-    return {
-      sliceWidth: slice_width,
-      borderDspWidth: Math.ceil(slice_width * image_dsp_width / this.imageWidth), // 跟进图片的缩放信息
-      convertedBorderOutset: Math.ceil(this.borderOutset * image_dsp_width / this.imageWidth),
-    };
-  },
+  return transition;
 };
+
+let centerWidth = props.contentWidth >= 0 ? props.contentWidth : 0; // 兼容处理，contentWidth变更为centerWidth
+if (props.centerWidth >= 0) {
+  centerWidth = props.centerWidth;
+}
+
+const imageDspWidthInner = computed(() =>
+  props.imageDspWidth > 0 ? props.imageDspWidth : props.imageWidth
+);
+// slice_width 获取
+const sliceWidth = ref(
+  Math.ceil(Math.max(0, (props.imageWidth - centerWidth) / 2))
+);
+const borderDspWidth = ref(
+  Math.ceil((sliceWidth.value * imageDspWidthInner.value) / props.imageWidth)
+);
+const convertedBorderOutset = ref(
+  Math.ceil((props.borderOutset * imageDspWidthInner.value) / props.imageWidth)
+);
+
+watchEffect(() => {
+  if (
+    (props.style?.width && props.style.width <= imageDspWidthInner.value) ||
+    (props.style?.height && props.style.height <= imageDspWidthInner.value)
+  ) {
+    console.warn(
+      "JsvNinePatch: style size must be larger than imageDspWidth. style is",
+      props.style,
+      "imageDspWidth is",
+      imageDspWidthInner.value
+    );
+  }
+});
 </script>
 
 <template>
@@ -88,6 +101,3 @@ export default {
     }"
   />
 </template>
-
-<style scoped>
-</style>

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-12 18:20:43
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-18 16:42:20
+ * @LastEditTime: 2022-11-25 18:26:40
  * @Description: file content
 -->
 
@@ -12,6 +12,7 @@
  *      prop说明:
  *          pointRes {string} (必需)粒子图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
  *          sprayStyle {object}  (必需)粒子效果配置
+ *          ignoreClip {boolean} 无视clipView描画
  *
  * prop中的sprayStyle说明:
  *      type {int} (必需)喷射类型 0: 一次喷射 1: 持续喷射
@@ -34,7 +35,7 @@
 <script>
 import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
 
-let buildForgeView = (pointRes, sprayStyle, sizeRef) => {
+let buildForgeView = (pointRes, sprayStyle, sizeRef, ignoreClip) => {
   if (!pointRes) {
     return -1;
   }
@@ -56,7 +57,7 @@ let buildForgeView = (pointRes, sprayStyle, sizeRef) => {
       texture_manager.GetImage2(image_url, false, null, "RGB_8888", null)
     );
   }
-  const spray_view = new Forge.SprayView(texture_setting);
+  const spray_view = new Forge.SprayView(texture_setting, ignoreClip);
   const add_num_per_frame = sprayStyle.addNumSpeed
     ? sprayStyle.addNumSpeed
     : 0.001;
@@ -105,6 +106,10 @@ export default {
       type: Object,
       required: true,
     },
+    ignoreClip: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -124,11 +129,11 @@ export default {
     },
   },
   created() {
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size);
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size, this.ignoreClip);
   },
   updated() {
     this.unloadView();
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size);
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle, this.size, this.ignoreClip);
   },
   beforeUnmount() {
     this.unloadView();

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue

@@ -433,8 +433,8 @@ export default {
 <template>
     <div id="canvas">
         <div id="clip" :style="{...transform_style.clipStyle}">
-            <div id="trans" :style="{...transform_style.transStyle}" :onAnimationEnd="onAnimEndDelegate">
-            <div id="image" :style="{...transform_style.imageStyle, animation: blinkAnim}" :onAnimationEnd="onBlinkAnimEnd"></div>
+            <div id="trans" :style="{...transform_style.transStyle}" @animationend="onAnimEndDelegate">
+            <div id="image" :style="{...transform_style.imageStyle, animation: blinkAnim}" @animationend="onBlinkAnimEnd"></div>
             </div>
         </div>
     </div>

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -36,7 +36,7 @@ import JsvActorMove, {
 } from "jsview/utils/JsViewVueWidget/JsvActorMove";
 import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
 import Indicator from "./Indicator.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const VIEW_NUM = 3;
 
@@ -370,12 +370,12 @@ export default {
       curViewAnimation.SetAnimationListener(
         new Forge.AnimationListener(null, this._onAnimationEnd, null)
       );
-      this.$refs["element" + this.currentViewIndex]?.jsvMaskView.StartAnimation(
+      this.$refs["element" + this.currentViewIndex]?.jsvGetProxyView(true).StartAnimation(
         curViewAnimation
       );
       this.$refs[
         "element" + modToRange(this.currentViewIndex - direction, VIEW_NUM)
-      ]?.jsvMaskView.StartAnimation(preViewAnimation);
+      ]?.jsvGetProxyView(true).StartAnimation(preViewAnimation);
     },
     _startSmoothTranslateAnimation() {
       let curController = this.controllerList[this.currentViewIndex];

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -28,7 +28,7 @@
 
 <script>
 import Indicator from "./Indicator.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
 
 const VIEW_NUM = 4;

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -8,10 +8,11 @@
  *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
  *          style {object}          样式(必需)
  *          enableLatex {bool}     是否启用Latex文字描画模式
+ *          textDirection {string} 内容文字的方向, 默认是unset, 此时会根据第一个字符的语言确定文字是ltr还是rtl
 -->
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   style: Object,
@@ -23,49 +24,28 @@ const props = defineProps({
     type: String,
     default: "middle",
   },
-  enableLatex: Boolean,
+  enableLatex: {
+    type: Boolean,
+    default: false,
+  },
   className: String,
+  textDirection: {
+    type: String,
+    default: "unset",
+  },
 });
 
-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="disable" :style="style">
-      <div :style="{ position: 'static', display: 'table' }">
-        <div
-          :className="className"
-          :style="{
-            position: 'static',
-            display: 'table-cell',
-            width: style.width,
-            height: style.height,
-            verticalAlign: verticalAlign,
-          }"
-          jsv-inherit-class="2"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    </div>
     <div
-      v-else
       :className="className"
       :style="style"
       :jsv_text_latex_enable="enableLatex ? 'true' : ''"
       :jsv_text_vertical_align="verticalAlign"
       :jsv_text_line_align="lineAlign"
+      :jsv_text_inner_direction="textDirection"
       jsv-inherit-class="1"
     >
       <slot></slot>

package/utils/JsViewVueWidget/JsvTouchContainer.vue

@@ -66,8 +66,8 @@ export default {
   },
   created() {},
   mounted() {
-    if (this.$refs.touchContainer && this.$refs.touchContainer.jsvMaskView) {
-      const view = this.$refs.touchContainer.jsvMaskView;
+    const view = this.$refs.touchContainer?.jsvGetProxyView(true);
+    if (view) {
       const page_width = this.flingPageWidth;
       const page_edge = this.flingPageEdge;
       const direction = this.direction;

package/utils/JsViewVueWidget/JsvTransparentDiv.vue

@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     _updateInnerView() {
-      if (this.innerView === null) {
+      if (this.innerView === null && !this.html) {
         // 初始化View
 
         // 创建JsView图层穿透的texture，抠洞处理

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
+import { reactive, ref, shallowRef, toRaw, watchEffect, onMounted, defineExpose } from 'vue'
 import { Forge } from "jsview/dom/jsv-forge-define";
 
 const props = defineProps({
@@ -69,7 +69,7 @@ const props = defineProps({
 });
 
 // 内部状态变量
-const viewRef = ref(null);
+const viewRef = shallowRef(null);
 const viewMounted = reactive({status: false})
 let sensorRef = null;
 
@@ -96,9 +96,9 @@ watchEffect(()=>{
         if (props.container) {
             window.MyContainerView = toRaw(props.container);
 
-            let jsv_main_view_ref = toRaw(props.container).jsvMainView;
+            let jsv_main_view_ref = toRaw(props.container).jsvGetProxyView();
             if (jsv_main_view_ref) {
-                sensorRef.ResetContainer(toRaw(props.container).jsvMainView);
+                sensorRef.ResetContainer(jsv_main_view_ref);
             } else {
                 console.error("Error: container is NOT a div");
             }
@@ -111,7 +111,7 @@ watchEffect(()=>{
 onMounted(()=>{
     console.log("JsvVisibleSensor: on mounted");
 
-    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvMainView, (old_h, new_h, old_v, new_v)=>{
+    sensorRef = new Forge.VisibleSensor(toRaw(viewRef.value).jsvGetProxyView(), (old_h, new_h, old_v, new_v)=>{
         // 获得横向和纵向的新旧状态值
         if (props.callback) {
             props.callback(old_h, new_h, old_v, new_v);

package/utils/JsViewVueWidget/index.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-05 11:00:51
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-18 13:17:17
+ * @LastEditTime: 2022-11-23 14:06:24
  * @Description: file content
  */
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
@@ -18,15 +18,15 @@ 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, TexAlignAnchor, DECORATE_NINEPATCH_ALPHA_MIX, DECORATE_BORDER_RADIUS } 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 {
-  default as JsvGrid,
-  PageType,
-  LineType,
-  FocusMoveType,
-} from "./JsvGrid.vue";
+export { default as JsvGrid, PageType, LineType } from "./JsvGrid.vue";
 export { default as JsvHole } from "./JsvHole.js";
 export { default as JsvMarquee } from "./JsvMarquee.vue";
 export { default as JsvMaskClipDiv } from "./JsvMaskClipDiv.vue";

package/utils/JsViewVueWidget/utils/index.js

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