@shijiu/jsview-vue 2.2.201 → 2.2.373

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -84,6 +84,11 @@ const TexAlignAnchor = {
 };
 export { TexAlignAnchor };
 
+const STATE_IDLE = 0;
+const STATE_RUNNING = 1;
+const STATE_PAUSED = 2;
+const STATE_END = 3;
+
 export default {
   props: {
     src: String,
@@ -128,7 +133,7 @@ export default {
   },
   setup() {
     return {
-      forgeAnimation: null,
+      runningState: STATE_IDLE, // 0:未开始, 1:运行中, 2:暂停, 3:正常结束
       innerViewId: -1,
     };
   },
@@ -244,7 +249,10 @@ export default {
       return new Forge.LayoutView(texture_set);
     },
 
-    _onAnimationEnd() {
+    _onAnimationEnd(normal_end) {
+      if (normal_end) {
+        this.runningState = STATE_END;
+      }
       this.onAnimationEnd?.();
     },
 
@@ -273,9 +281,34 @@ export default {
       }
     },
 
+    _buildAnimation() {
+      if (this.animation) {
+        let anim = new Forge.CssKeyframeAnimation(
+          "@keyframes texAnimDef" + this.animation,
+          this.duration,
+          null,
+          1,
+          1
+        );
+        anim.EnableDelay(this.delay).SetRepeat(this.repeat);
+        anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+        anim.SetAnimationListener(
+          new Forge.AnimationListener(null, this._onAnimationEnd, null)
+        );
+
+        return anim;
+      } else {
+        return null;
+      }
+    },
+
     start() {
-      if (this.forgeAnimation && this.innerView) {
-        this.innerView.StartTextureAnimation(this.forgeAnimation);
+      if (this.innerView) {
+        let anim = this._buildAnimation();
+        if (anim) {
+          this.runningState = STATE_RUNNING;
+          this.innerView.StartTextureAnimation(anim);
+        }
       }
     },
 
@@ -327,24 +360,6 @@ export default {
       }
       this._updateTexCoord();
 
-      // 4.设置texture的动画形变
-      if (this.animation) {
-        this.forgeAnimation = new Forge.CssKeyframeAnimation(
-          "@keyframes texAnimDef" + this.animation,
-          this.duration,
-          null,
-          1,
-          1
-        );
-        this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
-        this.forgeAnimation.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-        this.forgeAnimation.SetAnimationListener(
-          new Forge.AnimationListener(null, this._onAnimationEnd, null)
-        );
-      } else {
-        this.forgeAnimation = null;
-      }
-
       // 5. inner view标准处理
 
       this.innerViewId = Forge.sViewStore.add(
@@ -364,31 +379,19 @@ export default {
     }
   },
   activated() {
-    if (this.innerView) {
-      if (this.animation && this.forgeAnimation == null) {
-        this.forgeAnimation = new Forge.CssKeyframeAnimation(
-          "@keyframes texAnimDef" + this.animation,
-          this.duration,
-          null,
-          1,
-          1
-        );
-        this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
-        this.forgeAnimation.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-        this.forgeAnimation.SetAnimationListener(
-          new Forge.AnimationListener(null, this._onAnimationEnd, null)
-        );
-        this.innerView.StartTextureAnimation(this.forgeAnimation);
-      } else {
-        this.forgeAnimation = null;
-      }
+    if (this.innerView && this.runningState == STATE_PAUSED) {
+      // 动画未正常结束，重新开始动画
+      let anim = this._buildAnimation();
+      this.innerView.StartTextureAnimation(anim); // pause状态，一定有值
     }
   },
   deactivated() {
     if (this.innerView) {
       this.innerView.StopTextureAnimation();
+      if (this.runningState == STATE_RUNNING) {
+        this.runningState = STATE_PAUSED;
+      }
     }
-    this.forgeAnimation = null;
   },
 };
 </script>

package/utils/JsViewVueWidget/JsvTouchModeSwitcher.vue

@@ -0,0 +1,101 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvTouchModeSwitcher：Vue高阶组件，监听交互模式的变更
+ *      props说明:
+ *          width       {number}   宽
+ *          height      {number}   高
+ *          initMode    {number}   初始模式, 1:按键, 2:触控, 默认为1
+ *      methods:
+ *          registerCallback: (callback: (mode: number) => void) => void
+              注册回调
+ *          unregisterCallback: (callback: (mode: number) => void) => void
+              注销回调
+ *          getInteractiveMode: () => number
+              获取当前的交互模式. 1:按键, 2:触控    
+ *      注意:
+ *          在MetroWidget的item中,如需监听交互模式变动, 为了避免过多回调, 一般在onFocus中注册, 在onBlur中注销          
+ * 
+-->
+<script setup>
+import { shallowRef, onMounted } from "vue";
+const props = defineProps({
+  width: {
+    type: Number,
+  },
+  height: {
+    type: Number,
+  },
+  initMode: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const KEY_MODE = 1;
+const TOUCH_MODE = 2;
+let mode = props.initMode;
+let callbacks = [];
+const divRef = shallowRef();
+const registerCallback = (callback) => {
+  callbacks.push(callback);
+};
+
+const unregisterCallback = (callback) => {
+  callbacks = callbacks.filter((i) => i !== callback);
+};
+const getInteractiveMode = () => {
+  return mode;
+};
+
+const updateMode = (m) => {
+  let preMode = mode;
+  mode = m;
+  if (preMode !== mode) {
+    for (let c of callbacks) {
+      c(mode);
+    }
+  }
+};
+
+const onDispatchKeyDown = (ev) => {
+  if (ev.keyCode == 37 || ev.keyCode == 38 || ev.keyCode == 39 || ev.keyCode == 40) {
+    updateMode(KEY_MODE);
+  }
+  return false;
+};
+
+const onTouchStart = () => {
+  updateMode(TOUCH_MODE);
+};
+
+onMounted(() => {
+  divRef.value.jsvSetTapListener({
+    onTouchStart,
+  });
+});
+
+defineExpose({
+  registerCallback,
+  unregisterCallback,
+  getInteractiveMode,
+});
+</script>
+<template>
+  <jsv-focus-block
+    :onAction="{
+      onDispatchKeyDown,
+    }"
+  >
+    <div
+      ref="divRef"
+      :style="{
+        width: width,
+        height: height,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </jsv-focus-block>
+</template>

package/utils/JsViewVueWidget/JsvVideo.vue

@@ -1,12 +1,12 @@
 <!--
-/*
+ * @file
+ *
  * JsvVideo：Vue高阶组件，包装<video>标签，添加离屏模式这种可以支持圆角和旋转效果，但绘制性能略有焦点的特效
  *      props说明:
  *          usetexture {bool}          是否使用texture即离屏模式，true:使用离屏模式，false:使用普通video
  *          videoref {object} (必须)    video 句柄，对video进行播控
  *      特别说明:
  *          其他属性同video标签
- */
 --> 
 
 <script>

package/utils/JsViewVueWidget/JsvVisibleSensor/JsvVisibleSensor.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  * 【模块 export 内容】
  * JsvVisibleSensor: 可视区域监控器
  * props说明:

package/utils/JsViewVueWidget/index.js

@@ -61,3 +61,5 @@ export * from "./JsvScrollBox"
 export { default as JsvFragShaderView } from "./JsvFragShaderView"
 export * from "./JsvClipDiv"
 export * from "./JsvDriftScope"
+export { default as JsvTouchModeSwitcher } from "./JsvTouchModeSwitcher.vue"
+export { default as JsvDragBox } from "./JsvDragBox/JsvDragBox.vue"

package/utils/JsViewVueTools/JsvTextTools.js

@@ -1,89 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2022-11-29 14:26:20
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-02-02 10:20:45
- * @Description: file content
- */
-
-/*!
- * 获取文字宽度, 一般用于测量文字宽度
- *
- * @param {string} text   文字
- * @param {object} style  文字的css style
- * @return {int} 文字宽度
- **/
-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);
-};
-
-/*!
- * @typedef {object} SliceInfo
- * @property {int} start - 文字起始index
- * @property {int} end - 文字结束index
- * @property {int} width - 文字宽度
- */
-
-/*!
- * @typedef {object} TextInfo
- * @property {int} totalWidth - 文字整体宽度
- * @property {Array<SliceInfo>} sliceInfo - 每段文字的信息
- */
-
-/*!
- * 单行超长文字会切成多个div拼接, 由于jsview坐标的取整机制, 拼接出的width和文字width会产生误差, 此接口会返回拼接后的width
- *
- * @param {string} text   文字
- * @param {object} style  文字的css style
- * @return {TextInfo} 文字信息
- **/
-const getOneLineTextDrawWidth = (text, style) => {
-  const info = window.PlatformUtils.GetOneLineTextDrawWidth(
-    text ?? "",
-    style.fontFamily ?? Forge.TextUtils._sDefaultFont,
-    style.fontSize ?? Forge.TextUtils._sDefaultFontSize,
-    style.fontStyle === "italic" ? "italic" : "",
-    style.fontWeight === "bold" ? "bold" : "");
-  const result = {
-    totalWidth: info[0],
-    sliceInfo: [],
-  }
-  for (let i = 1; i < info.length; i += 3) {
-    result.sliceInfo.push({
-      start: info[i],
-      end: info[i + 1],
-      width: info[2 + 2],
-    })
-  }
-  return result;
-}
-
-const isRtl = (str) => {
-  //arabic
-  for (let i = 0; i < str.length; i++) {
-    let c = str.charCodeAt(i);
-    if (c != 32) {
-      if (c >= 0x0600 && c <= 0x06ff) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  }
-  return false;
-}
-
-const TextTools = {
-  getOneLineTextDrawWidth,
-  getTextWidth,
-  isRtl,
-}
-
-export { getTextWidth, TextTools };