@shijiu/jsview-vue 0.9.684 → 0.9.783

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

@@ -5,13 +5,16 @@
  *          text          {String}   文字内容
  *          style         {Object}   样式
  *          slideSpeed    {int}      滚动速度 px/s, 默认60
+ *          slideDirection{String}   滚动方向 ste(start to end)/ets(end to start)/ltr/rtl
  *          forceSlide    {boolean}  短文字是否滚动，默认false
+ * 说明
+ * JsvMarquee会识别阿拉伯字符自动设置direction
 -->
 
 <script setup>
 import { Forge } from "../../dom/jsv-forge-define";
-import { getTextWidth } from "./utils";
-import { ref, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
+import { TextTools } from "../JsViewVueTools/JsvTextTools";
+import { shallowRef, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
 
 const defaultFontStyle = () => {
   return {
@@ -20,7 +23,7 @@ const defaultFontStyle = () => {
     textAlign: "start",
     lineHeight: "20px",
     whiteSpace: "nowrap",
-    direction: 'ltr'
+    direction: "ltr",
   };
 };
 const props = defineProps({
@@ -41,7 +44,7 @@ const props = defineProps({
         textAlign: "start",
         lineHeight: "20px",
         whiteSpace: "nowrap",
-        direction: 'ltr,'
+        direction: "ltr,",
       };
     },
   },
@@ -49,16 +52,33 @@ const props = defineProps({
     type: Number,
     default: 60,
   },
+  slideDirection: {
+    type: String,
+    validator(value) {
+      // The value must match one of these strings
+      return ["ste", "ets", "ltr", "rtl"].includes(value);
+    },
+    default: "ste",
+  },
   forceSlide: {
     type: Boolean,
     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;
+
+const _direction = computed(() => {
+  if (props.style?.direction == "rtl" || props.style.direction == "ltr") {
+    return props.style.direction;
+  } else {
+    return TextTools.isRtl(props.text) ? "rtl" : "ltr";
+  }
+});
+
 const fontStyle = computed(() => {
   let { left, top, width, height, ...rest } = props.style;
   let r = defaultFontStyle();
@@ -67,27 +87,76 @@ const fontStyle = computed(() => {
     //滚送时必需start对齐
     r.textAlign = "start";
   }
+  r.direction = _direction.value;
   return r;
 });
+
 //rtl文字需要先获得文字宽度
 let textWidth =
-  fontStyle.value.direction == "rtl" ? getTextWidth(props.text, fontStyle.value) : 0;
+  fontStyle.value.direction == "rtl"
+    ? TextTools.getTextWidth(props.text, fontStyle.value)
+    : 0;
 const slideDivLeft = computed(() =>
   fontStyle.value.direction == "rtl" && props.style.width < textWidth
     ? props.style.width - textWidth
     : 0
 );
 
+const getAnimInfo = (state) => {
+  const info = {
+    start: 0,
+    end: 0,
+  };
+  const isRtl = _direction.value == "rtl";
+  if (state == 0) {
+    //滚出
+    if (isRtl) {
+      if (props.slideDirection == "rtl" || props.slideDirection == "ste") {
+        info.end = textWidth;
+      } else {
+        //反向滚动
+        info.end = -props.style.width;
+      }
+    } else {
+      if (props.slideDirection == "ltr" || props.slideDirection == "ste") {
+        info.end = -textWidth;
+      } else {
+        //反向滚动
+        info.end = props.style.width;
+      }
+    }
+  } else {
+    //滚入
+    if (isRtl) {
+      if (props.slideDirection == "rtl" || props.slideDirection == "ste") {
+        info.start = -props.style.width;
+      } else {
+        //反向滚动
+        info.start = textWidth;
+      }
+    } else {
+      if (props.slideDirection == "ltr" || props.slideDirection == "ste") {
+        info.start = props.style.width;
+      } else {
+        //反向滚动
+        info.start = -textWidth;
+      }
+    }
+  }
+  return info;
+};
+
 const slideStep = () => {
+  let animInfo = getAnimInfo(animState);
   if (animState == 0) {
     // 文字从原始位置，移动出屏幕(每次完整移动，停顿1秒)
-    let start = 0,
-      end = fontStyle.value.direction == "rtl" ? textWidth : -textWidth;
+    // let start = 0,
+    //   end = fontStyle.value.direction == "rtl" ? textWidth : -textWidth;
     animIdleHandler = setTimeout(() => {
       animIdleHandler = -1;
       const anim = new Forge.TranslateFrameAnimation(
-        start,
-        end,
+        animInfo.start,
+        animInfo.end,
         props.slideSpeed,
         true,
         0,
@@ -106,17 +175,19 @@ 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,
-      end = 0;
+    // let start =
+    //     fontStyle.value.direction == "rtl"
+    //       ? -props.style.width
+    //       : props.style.width,
+    //   end = 0;
     const anim = new Forge.TranslateFrameAnimation(
-      start,
-      end,
+      animInfo.start,
+      animInfo.end,
       props.slideSpeed,
       true,
       props.style.width,
@@ -134,7 +205,7 @@ const slideStep = () => {
         null
       )
     );
-    toRaw(slideDiv.value.jsvMaskView).StartAnimation(anim);
+    toRaw(slideDiv.value.jsvGetProxyView(true)).StartAnimation(anim);
     animState = 0;
   }
 };
@@ -145,7 +216,7 @@ const stopSlide = () => {
     animIdleHandler = -1;
   }
   animState = 0;
-  toRaw(slideDiv.value?.jsvMaskView)?.StopAnimation();
+  toRaw(slideDiv.value?.jsvGetProxyView(true))?.StopAnimation();
 };
 
 const asyncStartAnim = () => {
@@ -211,4 +282,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>