@shijiu/jsview-vue 0.9.766 → 0.9.783

package/samples/NinePatchDemo/App.vue

@@ -1,145 +1,101 @@
 <script setup>
-import {
-  jJsvRuntimeBridge,
-  MetroWidget,
-  HORIZONTAL,
-  JsvNinePatch,
-} from "jsview";
+import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub } from "jsview";
 import Item from "./Item.vue";
 import borderImageUrl from "./assets/border.png";
-import { ref, shallowRef, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { reactive, provide, onMounted } from "vue";
 
-const router = useRouter();
+const focusHub = useFocusHub();
 
-const data = [
-  {
-    blocks: {
-      w: 160,
-      h: 160,
+const focusSize = reactive({
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+});
+provide("focusSize", focusSize);
+
+const provideData = () => {
+  return [
+    {
+      width: 160,
+      height: 160,
+      color: "#FF9900",
+      content: 0,
     },
-    color: "#FF9900",
-    content: 0,
-  },
-  {
-    blocks: {
-      w: 300,
-      h: 300,
+    {
+      width: 300,
+      height: 300,
+      color: "#0099FF",
+      content: 1,
     },
-    color: "#0099FF",
-    content: 1,
-  },
-  {
-    blocks: {
-      w: 160,
-      h: 160,
+    {
+      width: 160,
+      height: 160,
+      color: "#FF9900",
+      content: 2,
     },
-    color: "#FF9900",
-    content: 2,
-  },
-];
-
-const framePosition = ref({
-  x: 0,
-  y: 0,
-  width: 50,
-  height: 50,
-});
-
-const _onFramePositionChanged = (new_x, new_y, new_width, new_height) => {
-  console.log(
-    `new x=${new_x} y=${new_y} width=${new_width} height=${new_height}`
-  );
-
-  framePosition.value = {
-    x: new_x,
-    y: new_y,
-    width: new_width,
-    height: new_height,
-  };
+  ];
 };
 
-const _measures = (item) => {
+const measures = (item) => {
   return {
-    width: item.blocks.w,
-    height: item.blocks.h,
+    width: item.width,
+    height: item.height,
     marginRight: 10,
-    marginTop: 10,
   };
 };
 
-const _onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-    return true;
-  }
-  return false;
-};
-
-const myFocusWidget = shallowRef(null);
-
 onMounted(() => {
-  myFocusWidget.value.getFocusBlockRef().requestFocus();
-  jJsvRuntimeBridge.notifyPageLoaded();
+  focusHub.setFocus("myWidget");
 });
 </script>
 
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#FFFFFF' }">
-    <jsv-focus-block ref="focusNode" :onKeyDown="_onKeyDown">
-      <div
-        :style="{
-          textAlign: 'center',
-          fontSize: 30,
-          lineHeight: 50,
-          color: '#ffffff',
-          left: 140,
-          top: 20,
-          width: 1000,
-          height: 50,
-          backgroundColor: 'rgba(27,38,151,0.8)',
-        }"
-      >
-        NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐
-      </div>
-      <metro-widget
-        ref="myFocusWidget"
-        :top="100"
-        :left="250"
-        :width="1000"
-        :height="400"
-        :direction="HORIZONTAL"
-        :data="data"
-        :measures="_measures"
-        :padding="{ left: 50, right: 50, top: 50, height: 50 }"
-      >
-        <template #renderItem="{ data, query, onEdge, onAction }">
-          <item
-            :data="data"
-            :query="query"
-            :onEdge="onEdge"
-            :onAction="onAction"
-            :frameChanged="_onFramePositionChanged"
-          />
-        </template>
-      </metro-widget>
-      <div :style="{ top: 150, left: 300 }">
-        <jsv-nine-patch
-          :style="{
-            width: framePosition.width,
-            height: framePosition.height,
-            top: framePosition.y,
-            left: framePosition.x,
-          }"
-          :imageUrl="borderImageUrl"
-          :imageWidth="81"
-          :centerWidth="25"
-          :borderOutset="14"
-          :imageDspWidth="81"
-          :animTime="0.2"
-        ></jsv-nine-patch>
-      </div>
-    </jsv-focus-block>
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐
+    </div>
+    <metro-widget
+      name="myWidget"
+      :top="100"
+      :left="250"
+      :width="1000"
+      :height="400"
+      :direction="HORIZONTAL"
+      :provideData="provideData"
+      :measures="measures"
+      :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+    >
+      <template #renderItem="{ data, onAction }">
+        <item :data="data" :onAction="onAction" />
+      </template>
+    </metro-widget>
+    <jsv-nine-patch
+      :style="{
+        width: focusSize.width,
+        height: focusSize.height,
+        top: focusSize.top,
+        left: focusSize.left,
+      }"
+      :imageUrl="borderImageUrl"
+      :imageWidth="81"
+      :centerWidth="25"
+      :borderOutset="14"
+      :imageDspWidth="81"
+      :animTime="0.2"
+      :waitForInit="true"
+    ></jsv-nine-patch>
   </div>
 </template>

package/samples/NinePatchDemo/Item.vue

@@ -1,37 +1,30 @@
 <script setup>
-import { ref, shallowRef, computed } from "vue";
+import { ref, inject } from "vue";
+
+const focusSize = inject("focusSize");
 
 const props = defineProps({
   data: Object,
-  query: Object,
-  onEdge: Function,
   onAction: Object,
-  frameChanged: Function,
 });
 
-let focused = ref(false);
-
-let styleValue = computed(() => {
-  return {
-    width: props.data.blocks.w,
-    height: props.data.blocks.h,
-    color: "#FFFFFF",
-    backgroundColor: props.data.color,
-  };
-});
+const focused = ref(false);
+const divRef = ref(null);
 
 const onFocus = () => {
   focused.value = true;
-  if (props.frameChanged) {
-    let pos = props.query.position(props.query.id);
-
-    // 焦点时套在放大的item外缘，所以要计算按照中心放大后的焦点框x,y,width,height
-    const new_x = pos.left + (pos.width - pos.width * 1.05) / 2;
-    const new_y = pos.top + (pos.height - pos.height * 1.05) / 2;
-    const new_width = pos.width * 1.05;
-    const new_height = pos.height * 1.05;
-
-    props.frameChanged(new_x, new_y, new_width, new_height);
+  if (focusSize) {
+    divRef.value?.getBoundingClientRect().then(
+      (data) => {
+        focusSize.width = data.width;
+        focusSize.height = data.height;
+        focusSize.left = data.left;
+        focusSize.top = data.top;
+      },
+      (error) => {
+        console.log("get absolute position failed", error);
+      }
+    );
   }
 };
 
@@ -40,7 +33,7 @@ const onBlur = () => {
 };
 
 const onClicked = () => {
-  onsole.log(`item ${props.query.id} clicked`);
+  console.log("item clicked", props.data);
 };
 
 props.onAction.register("onFocus", onFocus);
@@ -49,7 +42,16 @@ props.onAction.register("onClick", onClicked);
 </script>
 
 <template>
-  <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
+  <div
+    ref="divRef"
+    :class="focused ? 'focus' : 'blur'"
+    :style="{
+      width: data.width,
+      height: data.height,
+      color: '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
     {{ data.content }}
   </div>
 </template>

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: '15px',
+          }"
+        ></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/JsvPlayer/version.js

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

package/utils/JsViewVueTools/JsvTextTools.js

@@ -1,8 +1,8 @@
 /*
  * @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
  */
 const getTextWidth = (text, style) => {
@@ -15,4 +15,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 };