@shijiu/jsview-vue 0.9.766 → 0.9.804

package/samples/Swiper/App.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-10 14:45:39
+ * @Description: file content
+-->
+<script setup>
+import { JsvSwiper, useFocusHub, EdgeDirection } from "jsview";
+import { ref, onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const mySwiper = ref(null);
+
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+let data = [];
+for (let i = 0; i < 10; i++) {
+  data.push({
+    width: 400,
+    height: 300,
+    index: i,
+    backgroundColor: randomColor(),
+  });
+}
+
+const swiper1 = {
+  onChange: (currentId) => {
+    console.log("swiper1: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper1: onClick", currentId);
+  },
+  onEdge: (info) => {
+    if (info.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("mySwiper2");
+    }
+  },
+};
+
+const swiper2 = {
+  onChange: (currentId) => {
+    console.log("swiper2: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper2: onClick", currentId);
+  },
+  onEdge: (info) => {
+    if (info.direction == EdgeDirection.top) {
+      focusHub.setFocus("mySwiper1");
+    }
+  },
+};
+onMounted(() => {
+  focusHub.setFocus("mySwiper1");
+});
+</script>
+
+<template>
+  <div>
+    <jsv-swiper
+      name="mySwiper1"
+      ref="mySwiper1"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        left: 50,
+        top: 50,
+        width: 400,
+        height: 200,
+      }"
+      :animation="{
+        duration: 300,
+        easing: 'linear',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper1.onChange"
+      :onClick="swiper1.onClick"
+      :onEdge="swiper1.onEdge"
+    >
+      <template #itemView="{ dataIndex, focused }">
+        <div
+          :style="{
+            width: data[dataIndex].width,
+            height: data[dataIndex].height,
+            backgroundColor: data[dataIndex].backgroundColor,
+            fontSize: 40,
+            color: focused ? '#FF0000' : '#FFFFFF',
+          }"
+        >
+          {{ data[dataIndex].index }}
+        </div>
+      </template>
+    </jsv-swiper>
+
+    <jsv-swiper
+      name="mySwiper2"
+      ref="mySwiper2"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        left: 50,
+        top: 300,
+        width: 400,
+        height: 200,
+      }"
+      :animation="{
+        duration: 300,
+        easing: 'linear',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper2.onChange"
+      :onClick="swiper2.onClick"
+      :onEdge="swiper2.onEdge"
+      :reverseSwipe="true"
+      :dotSize="20"
+      :disableLoopWhenFocus="true"
+    >
+      <template #itemView="{ dataIndex, focused }">
+        <div
+          :style="{
+            width: data[dataIndex].width,
+            height: data[dataIndex].height,
+            backgroundColor: data[dataIndex].backgroundColor,
+            fontSize: 40,
+            color: focused ? '#FF0000' : '#FFFFFF',
+          }"
+        >
+          {{ data[dataIndex].index }}
+        </div>
+      </template>
+      <template #indicatorDot="{ dataIndex, currentIndex }">
+        <div
+          :style="{
+            width: 20,
+            height: 20,
+            backgroundColor:
+              dataIndex == currentIndex
+                ? 'rgba(100, 100, 100, 0.7)'
+                : '#ff0000',
+            borderRadius: 10,
+          }"
+        ></div>
+      </template>
+    </jsv-swiper>
+  </div>
+</template>

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-09-22 16:08:58
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-19 11:17:10
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 11:17:00
  * @Description: file content
 -->
 
@@ -36,7 +36,7 @@
                                       @description 整页滚动的设置类
                                       @constructor {Object} {speed, easing, boundProtect}
                                     SeamlessSlide
-                                      @description 平滑滚动的设置类
+                                      @description 无缝滚动的设置类
                                       @constructor {Object} {startPercent, endPercent, speed, easing, boundProtect}
                                     FixPositionSlide
                                       @description 固定位置滚动的设置类
@@ -371,7 +371,7 @@ const props = defineProps({
   slideSetting: {
     type: SlideSetting,
     default() {
-      return new SeamlessSlide(0.2, 0.8);
+      return new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });
     },
   },
   layoutType: {
@@ -548,24 +548,26 @@ const _dispatchEvent = (event) => {
 };
 
 const onItemClick = (index) => {
-  if (isFocus && innerData[index].callbacks.callable("onClick")) {
+  if (isFocus && innerData[index]?.callbacks.callable("onClick")) {
     innerData[index].callbacks.onClick();
   }
 };
 
 const onItemBlur = (index) => {
-  if (isFocus && innerData[index].callbacks.callable("onBlur")) {
+  if (isFocus && innerData[index]?.callbacks.callable("onBlur")) {
     innerData[index].callbacks.onBlur();
   }
 };
 
 const onItemFocus = (index, rect) => {
   if (isFocus) {
-    _itemOnFocusSideEffect(innerData[index], rect);
-    if (innerData[index].callbacks.callable("onFocus")) {
-      innerData[index].callbacks.onFocus(rect);
-    } else {
-      callFocusAfterUpdate = true;
+    if (innerData[index]) {
+      _itemOnFocusSideEffect(innerData[index], rect);
+      if (innerData[index].callbacks.callable("onFocus")) {
+        innerData[index].callbacks.onFocus(rect);
+      } else {
+        callFocusAfterUpdate = true;
+      }
     }
   }
 };
@@ -1320,7 +1322,7 @@ const _moveToNext = (
     let rect;
     let x_off_set = cur_focus_item.xPos - next_focus_item.xPos;
     let y_off_set = cur_focus_item.yPos - next_focus_item.yPos;
-    if (item_edge_rect) {
+    if (item_edge_rect && item_edge_rect.rect) {
       item_edge_rect.rect.x += x_off_set;
       item_edge_rect.rect.y += y_off_set;
       rect = item_edge_rect;
@@ -1551,6 +1553,7 @@ const _onFocus = (params) => {
   focus_id = _ifValidEnterRect(enterFocusRect)
     ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
     : focus_id;
+
   preEdgeRect = enterFocusRect;
   focusId = focus_id;
   enterFocusId = -1;

package/utils/JsViewEngineWidget/TemplateParser.js

@@ -1065,7 +1065,12 @@ class TemplateParser {
   }
 
   IdToIndex(id) {
-    return this._Template.IdsMap[id];
+    const index = this._Template.IdsMap[id];
+    if (typeof index !== "undefined") {
+      return index;
+    } else {
+      return -1;
+    }
   }
 
   /**

package/utils/JsViewPlugin/JsvAudio/AudioProxy.js

@@ -247,8 +247,24 @@ class AudioProxy {
   get currentTime() { return this.getProperty("currentTime"); }
 
   setSrc(url, head) {
+    if (!url) {
+      console.error("JsvAudio: src is null");
+      return;
+    }
+    let realUrl = url.trim();
+    if (window.JsView) {
+      // jsview上
+      if (realUrl.startsWith("/") || realUrl.startsWith("file://")) {
+        //本地文件
+        realUrl = url;
+      } else {
+        realUrl = new window.JsView.Dom.UrlRef(url).href;
+      }
+    } else {
+      realUrl = url;
+    }
     const param = {
-      url: url,
+      url: realUrl,
       head: JSON.stringify(head),
     };
     this.setProperty("src", param);

package/utils/JsViewPlugin/JsvAudio/JsvAudio.vue

@@ -92,22 +92,6 @@ export default {
         return {};
       },
     },
-    /**
-     * 属性，Boolean类型，活跃状态
-     */
-    active: { type: Boolean, default: true },
-  },
-
-  watch: {
-    active(newValue) {
-      console.log("active newValue: " + newValue);
-      if (this.audio) {
-        if (newValue) {
-          //同key的player切换时需要切换回调
-          this.registerEvent();
-        }
-      }
-    },
   },
   setup() {
     return {
@@ -122,26 +106,22 @@ export default {
     console.log("player key:" + key);
 
     this.audio = sAudioManager.createAudio(key);
+    this.registerEvent();
+    if (this.src && this.src !== "") {
+      this.audio.src = this.src;
+    }
 
-    if (this.active) {
-      this.registerEvent();
-      if (this.src && this.src !== "") this.audio.src = this.src;
-
-      if (this.currentTime !== 0) this.audio.currentTime = this.currentTime;
-
-      if (this.autoplay) {
-        this.audio.autoplay = this.autoplay;
-      }
-
-      if (this.muted) {
-        this.audio.muted = this.muted;
-      }
+    if (this.autoplay) {
+      this.audio.autoplay = this.autoplay;
+    }
 
-      if (this.loop) {
-        this.audio.loop = this.loop;
-      }
+    if (this.muted) {
+      this.audio.muted = this.muted;
     }
 
+    if (this.loop) {
+      this.audio.loop = this.loop;
+    }
     this.onRef?.(this.audio);
   },
 
@@ -154,13 +134,10 @@ export default {
 
   methods: {
     registerEvent() {
-      if (this.audio && this.active) {
+      if (this.audio) {
         this.audio.addEventListener("end", this.onEnded);
         this.audio.addEventListener("error", this.onError);
-        this.audio.addEventListener("loadstart", () => {
-          console.log("JsAudio received loadstart event.");
-          this.onLoadStart();
-        });
+        this.audio.addEventListener("loadstart", this.onLoadStart);
         this.audio.addEventListener("loadedmetadata", this.onLoadedMetaData);
         this.audio.addEventListener("load", this.onLoad);
         this.audio.addEventListener("audiofocusloss", this.onAudioFocusLoss);
@@ -172,5 +149,5 @@ export default {
 </script>
 
 <template>
-  <div :style="{width: 1, height: 1}" backgroundColor="rgba(0,0,0,1)"></div>
+  <div :style="{ width: 1, height: 1 }" backgroundColor="rgba(0,0,0,1)"></div>
 </template>

package/utils/JsViewPlugin/JsvAudio/version.js

@@ -3,17 +3,17 @@
  * @Date: 2023-02-22 18:22:26
  * @Description: file content
  */
-let PluginInfo={
+let PluginInfo = {
     // downloadUrl:"http://192.168.0.63:8080/plugin/JsvAudio-164.zip", //插件下载地址
-    packageName:"com.qcode.jsvaudio",
-    name:"音频插件",
-    version:"1.0.1",  //插件需要的版本号
-    versionCodeMin:1,
-    versionCodeMax:1,
-    bridgeName:"jsvAudioBridge", //插件bridge注册到jsview的名称
-    className:"com.qcode.jsvaudio.JsvAudio",  //插件初始化类名称
-    initMethod:"createInstance",   //插件初始化方法
-    listener:"top.JsvAudioPluginLoadResult",  //插件加载结果回调
+    packageName: "com.qcode.jsvaudio",
+    name: "音频插件",
+    version: "1.0.19",  //插件需要的版本号
+    versionCodeMin: 19,
+    versionCodeMax: 19,
+    bridgeName: "jsvAudioBridge", //插件bridge注册到jsview的名称
+    className: "com.qcode.jsvaudio.JsvAudio",  //插件初始化类名称
+    initMethod: "createInstance",   //插件初始化方法
+    listener: "top.JsvAudioPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvAudioPluginStatus",
     // debug:true,
     // md5:"baafc8ea737adcad5443f44cc0112498"

package/utils/JsViewPlugin/JsvPlayer/version.js

@@ -1,17 +1,17 @@
 let PluginInfo={
-    // downloadUrl:"http://10.61.2.170:8080/plugin/JsvPlayer-194.zip", //插件下载地址
+    // downloadUrl:"http://192.168.0.85:8080/plugin/JsvPlayer-199.zip", //插件下载地址
     packageName:"com.qcode.jsvplayer",
     name:"播放器插件",
-    version:"1.9.6",  //插件需要的版本号
-    versionCodeMin:196,
-    versionCodeMax:196,
+    version:"2.0.2",  //插件需要的版本号
+    versionCodeMin:202,
+    versionCodeMax:202,
     bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
     className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
     initMethod:"createInstance",   //插件初始化方法
     listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvPlayerPluginStatus",
     // debug:true,
-    md5:"e671a5c28a8fece02115625430c6b56d"
+    md5:"6de8d620492bf0143bbccc62636a6271"
 };
 
 // 不要用export default，update-env脚本不能解析

package/utils/JsViewVueTools/JsvTextTools.js

@@ -1,10 +1,12 @@
 /*
  * @Author: ChenChanghua
  * @Date: 2022-11-29 14:26:20
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-29 14:27:03
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 13:34:59
  * @Description: file content
  */
+import { Forge } from "../../dom/jsv-forge-define";
+
 const getTextWidth = (text, style) => {
   const textParams = {
     str: text ? text : "",
@@ -15,4 +17,25 @@ const getTextWidth = (text, style) => {
   };
   return window.PlatformUtils.GetTextWidth(textParams);
 };
-export { getTextWidth };
+
+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 = {
+  getTextWidth,
+  isRtl,
+}
+
+export { getTextWidth, TextTools };

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -35,7 +35,7 @@
 -->
 <script setup>
 import JsvActorMoveControl from "./JsvActorMoveControl";
-import { shallowRef, onMounted } from "vue";
+import { shallowRef, onMounted, defineProps, defineExpose } from "vue";
 
 const props = defineProps({
   control: {

package/utils/JsViewVueWidget/JsvFilterView.vue

@@ -12,7 +12,7 @@
 -->
 <script setup>
 import { Forge, ForgeExtension } from "../../dom/jsv-forge-define";
-import { onBeforeUnmount, watchEffect } from "vue";
+import { onBeforeUnmount, watchEffect, defineProps } from "vue";
 
 const props = defineProps({
   width: {

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -5,19 +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 "../JsViewVueTools/JsvTextTools";
-import {
-  shallowRef,
-  computed,
-  toRaw,
-  onMounted,
-  onBeforeUnmount,
-} from "vue";
+import { TextTools } from "../JsViewVueTools/JsvTextTools";
+import { shallowRef, computed, toRaw, onMounted, onBeforeUnmount, defineProps } from "vue";
 
 const defaultFontStyle = () => {
   return {
@@ -55,6 +52,14 @@ 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,
@@ -65,6 +70,15 @@ 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();
@@ -73,12 +87,14 @@ 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)
+    ? TextTools.getTextWidth(props.text, fontStyle.value)
     : 0;
 const slideDivLeft = computed(() =>
   fontStyle.value.direction == "rtl" && props.style.width < textWidth
@@ -86,16 +102,61 @@ const slideDivLeft = computed(() =>
     : 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,
@@ -119,14 +180,14 @@ const slideStep = () => {
     }, 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,

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -17,7 +17,7 @@
 -->
 
 <script setup>
-import { ref, watchEffect, computed } from "vue";
+import { ref, watchEffect, computed, defineProps } from "vue";
 
 const props = defineProps({
   style: {

package/utils/JsViewVueWidget/JsvPosterDiv.vue

@@ -10,7 +10,7 @@
 -->
 <script setup>
 
-import { reactive, watchEffect } from "vue";
+import { reactive, watchEffect, defineProps } from "vue";
 
 const props = defineProps({
   style: Object,

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -8,7 +8,7 @@
 
 <script setup>
 
-import { reactive, watchEffect } from "vue";
+import { reactive, watchEffect, defineProps } from "vue";
 
 const props = defineProps({
   colorSpace: {