@shijiu/jsview-vue 0.9.631 → 0.9.766

package/samples/MetroWidgetDemos/Advanced/{Widgets.vue → widgets/Widgets.vue}

@@ -2,21 +2,46 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-18 09:59:32
+ * @LastEditTime: 2022-11-02 15:35:12
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
-import { useFocusHub } from "jsview";
-import { advanceMetroWidget } from "../data";
-import WidgetItem from "../WidgetItem.vue";
+import {
+  MetroWidget,
+  VERTICAL,
+  EdgeDirection,
+  JsvNinePatch,
+  useFocusHub,
+} from "jsview";
+import { advanceMetroWidget } from "../../data";
+import WidgetItem from "../widgets/WidgetItem.vue";
+import focusImg from "./focus1.png";
+import { ref, shallowRef, reactive, provide } from "vue";
 
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
+const showFocus = ref(false);
 
-//item为Widgetitem的一些回调
 const provideData = () => {
   return advanceMetroWidget;
 };
+
+const onFocus = () => {
+  console.log("testtest", " widget onfocus");
+  showFocus.value = true;
+};
+
+const onBlur = () => {
+  showFocus.value = false;
+};
+
+const focusSize = reactive({
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+});
+provide("focusSize", focusSize);
+
 // measures中会返回doSlide: false, 既MetroWidget自身不处理滚动, 滚动由子的sendFocusRectEvent控制
 const measures = (item) => {
   return {
@@ -29,7 +54,7 @@ const measures = (item) => {
 };
 const onEdge = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.left) {
-    foucsHub.setFocus("mwButton");
+    focusHub.setFocus("mwButton");
   }
 };
 </script>
@@ -38,7 +63,7 @@ const onEdge = (edgeInfo) => {
   <div
     :style="{
       left: 500,
-      top: 50,
+      top: 20,
       width: 500,
       height: 400,
       fontSize: 30,
@@ -47,16 +72,20 @@ const onEdge = (edgeInfo) => {
   >
     {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
   </div>
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
   <metro-widget
     name="mwWidget"
-    :top="150"
+    :top="100"
     :left="400"
     :provideData="provideData"
-    :width="600"
+    :width="660"
     :height="600"
+    :padding="{ left: 30, right: 30 }"
     :direction="VERTICAL"
     :measures="measures"
     :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
   >
     <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
     <template #renderItem="{ data, query, onAction, onItemEdge }">
@@ -68,4 +97,20 @@ const onEdge = (edgeInfo) => {
       />
     </template>
   </metro-widget>
+  <jsv-nine-patch
+    v-show="showFocus"
+    :style="{
+      width: focusSize.width,
+      height: focusSize.height,
+      top: focusSize.top,
+      left: focusSize.left,
+    }"
+    :imageUrl="focusImg"
+    :imageWidth="55"
+    :centerWidth="1"
+    :borderOutset="13"
+    :imageDspWidth="55"
+    :animTime="0.2"
+    :waitForInit="true"
+  ></jsv-nine-patch>
 </template>

package/samples/MetroWidgetDemos/Item.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 17:00:58
+ * @LastEditTime: 2022-12-02 16:12:43
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -14,6 +14,7 @@ const props = defineProps({
   onAction: Object,
 });
 
+const divRef = shallowRef(null);
 const focused = ref(false);
 
 // 自身的焦点状态自己记录, 通过回调来改变
@@ -53,6 +54,7 @@ props.onAction.register("onClick", onClick);
       }"
     ></div>
     <div
+      ref="divRef"
       :style="{
         width: data.width,
         height: data.height,

package/samples/MetroWidgetDemos/PerformanceTest/App.vue

@@ -76,7 +76,7 @@ import { data1, data2, data3 } from "./data";
 import borderImgPath from "./border.png";
 import Item from "./components/ContentItem.vue";
 import MyTab from "./components/MyTab.vue";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import {
   VERTICAL,
@@ -90,7 +90,7 @@ const router = useRouter();
 const focusHub = useFocusHub();
 let contentData = data1;
 let requestDataTime = 0;
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -127,7 +127,7 @@ const onItemFocus = (id) => {
     clearTimeout(requestDataTime);
     requestDataTime = 0;
   }
-  requestDataTime = setTimeout(() => {
+  // requestDataTime = setTimeout(() => {
     switch (id) {
       case 0:
         contentData = data1;
@@ -140,7 +140,7 @@ const onItemFocus = (id) => {
         break;
     }
     mwRef.value?.refreshData(true);
-  }, 0);
+  // }, 0);
 };
 
 onBeforeUnmount(() => {

package/samples/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -13,7 +13,7 @@ import couponMid from "../assets/coupon_mid.png";
 import borderLeft from "../assets/line_left.png";
 import borderMid from "../assets/line_mid.png";
 import borderRight from "../assets/line_right.png";
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -2,15 +2,15 @@
  * @Author: ChenChanghua
  * @Date: 2021-09-29 16:13:35
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 17:07:19
+ * @LastEditTime: 2022-12-02 16:14:11
  * @Description: file content
 -->
 <script>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 export default {
   props: {
-    name: Object,
+    name: String,
     onEdgeDown: Function,
     onItemFocus: Function,
   },

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -8,7 +8,7 @@
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "../WidgetItem.vue";
-import { ref, watch, onBeforeUnmount } from "vue";
+import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,7 +24,7 @@ const props = defineProps({
   },
 });
 
-const widgetRef = ref(null);
+const widgetRef = shallowRef(null);
 
 const provideData = () => {
   return props.data.data;

package/samples/MetroWidgetDemos/PingPong/TabItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, inject } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -8,7 +8,7 @@
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive, ref } from "vue";
+import { reactive, ref, shallowRef } from "vue";
 
 export default {
   components: {
@@ -187,7 +187,7 @@ export default {
         animation: page0Anim.anim,
         animationFillMode: 'forwards',
       }"
-      :onAnimationEnd="page0Anim.onend"
+      @animationend="page0Anim.onend"
     >
       <app-page
         v-if="page0Show"
@@ -201,7 +201,7 @@ export default {
         animation: page1Anim.anim,
         animationFillMode: 'forwards',
       }"
-      :onAnimationEnd="page1Anim.onend"
+      @animationend="page1Anim.onend"
     >
       <app-page
         v-if="page1Show"

package/samples/MetroWidgetDemos/Simple/AbsoluteTemplate.vue

@@ -10,7 +10,7 @@ import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
 import { useFocusHub } from "jsview";
 import { simpleDataAbs } from "../data";
 import Item from "../Item.vue";
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 const wholePageSlide = new WholePageSlide();
 
@@ -29,7 +29,7 @@ const measuresAbs = (item) => {
 };
 const onEdgeAbs = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.left) {
-    foucsHub.setFocus("mw");
+    focusHub.setFocus("mw");
   }
 };
 </script>

package/samples/MetroWidgetDemos/Simple/App.vue

@@ -13,10 +13,10 @@ import AbsoluteTemplate from "./AbsoluteTemplate.vue";
 import RelativeTemplate from "./RelativeTemplate.vue";
 
 const router = useRouter();
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 const onFocus = () => {
-  foucsHub.setFocus("button");
+  focusHub.setFocus("button");
 };
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {

package/samples/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -7,13 +7,13 @@
 -->
 <script setup>
 import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useFocusHub } from "jsview";
 import { simpleData } from "../data";
 import Item from "../Item.vue";
 
-const foucsHub = useFocusHub();
-const mwRef = ref(null);
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
 
 const wholePageSlide = new WholePageSlide();
 let innerData = simpleData.concat();
@@ -34,9 +34,9 @@ const onEdge = (edgeInfo) => {
   // MetroWidget焦点到达边缘后的回调
   if (edgeInfo.direction == EdgeDirection.top) {
     buttonFocus.value = true;
-    foucsHub.setFocus("button");
+    focusHub.setFocus("button");
   } else if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwAbs");
+    focusHub.setFocus("mwAbs");
   }
 };
 
@@ -45,7 +45,7 @@ const buttonOnKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 40:
       buttonFocus.value = false;
-      foucsHub.setFocus("mw");
+      focusHub.setFocus("mw");
       return true;
     case 13:
       if (innerData.length == simpleData.length) {

package/samples/MetroWidgetDemos/WidgetItem.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
@@ -11,7 +11,7 @@ const props = defineProps({
   onAction: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const measures = (item) => {
   return item;
@@ -78,7 +78,6 @@ props.onAction.register("onBlur", onBlur);
       bottom: 10,
     }"
     :measures="measures"
-    :slideSetting="seamlessSlide"
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >

package/samples/MetroWidgetDemos/data.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 14:00:33
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 14:35:01
+ * @LastEditTime: 2022-11-02 15:23:08
  * @Description: file content
  */
 
@@ -177,6 +177,7 @@ for (let i = 0; i < 10; i++) {
     height: 170,
     name: "widget_" + i,
     marginBottom: 10,
+    index: i,
   });
 }
 

package/samples/NinePatchDemo/App.vue

@@ -7,7 +7,7 @@ import {
 } from "jsview";
 import Item from "./Item.vue";
 import borderImageUrl from "./assets/border.png";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 const router = useRouter();
@@ -77,7 +77,7 @@ const _onKeyDown = (ev) => {
   return false;
 };
 
-const myFocusWidget = ref(null);
+const myFocusWidget = shallowRef(null);
 
 onMounted(() => {
   myFocusWidget.value.getFocusBlockRef().requestFocus();

package/samples/NinePatchDemo/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -50,7 +50,7 @@ props.onAction.register("onClick", onClicked);
 
 <template>
   <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
-    {{ "" + props.data.content + (testData != null ? testData.MyName : "") }}
+    {{ data.content }}
   </div>
 </template>
 

package/samples/Preload/App.vue

@@ -11,7 +11,7 @@ import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
 import { data } from "./data.js";
 import Item from "./Item.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";

package/samples/Preload/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   data: Object,
   query: Object,

package/samples/QrcodeDemo/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { JsvQrcode } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();

package/samples/ScaleDownNeon/App.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-10-24 13:19:41
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-10-24 13:50:18
+ * @Description: file content
+-->
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+const test3 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
+const test4 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (window.JsView) {
+      window.JsView.setGlobalConfig({
+        texCache: -1,
+      });
+    }
+
+    router.go(-1); // 有router时，回退
+    return true;
+  }
+  return false;
+};
+
+const style1 = {
+  left: 0,
+  top: 0,
+  width: 250,
+  height: 250,
+  borderRadius: "15px",
+};
+
+const style2 = {
+  left: 0,
+  top: 260,
+  width: 250,
+  height: 250,
+  borderRadius: "15px",
+};
+</script>
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 0, top: 0 }">
+          <div class="leftFont top0">
+            {{ `原图加载` }}
+          </div>
+          <div class="leftFont top250">
+            {{ `使用缩小算法优化` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 120, top: 0 }">
+          <img alt="" :style="style1" :src="test4" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test4" />
+        </div>
+
+        <div :style="{ left: 380, top: 0 }">
+          <img alt="" :style="style1" :src="test1" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test1" />
+        </div>
+
+        <div :style="{ left: 640, top: 0 }">
+          <img alt="" :style="style1" :src="test2" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test2" />
+        </div>
+
+        <div :style="{ left: 900, top: 0 }">
+          <img alt="" :style="style1" :src="test3" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test3" />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+<style scoped>
+.allBgc {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+.block {
+  left: 20;
+  top: 50;
+}
+.leftFont {
+  left: 0;
+  width: 100;
+  height: 200;
+  color: #ffffff;
+  font-size: 25px;
+}
+.top0 {
+  top: 0;
+}
+.top250 {
+  top: 250;
+}
+</style>

package/samples/SoundPool/App.vue

@@ -10,7 +10,7 @@ import coin from "./coin.mp3";
 import lose from "./lose.mp3";
 import bgmusic from "./bgmusic.mp3";
 import { JsvSoundPool, jJsvRuntimeBridge } from "jsview";
-import { onMounted, onBeforeUnmount, ref } from "vue";
+import { onMounted, onBeforeUnmount, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -19,7 +19,7 @@ let coinController1 = null;
 let coinController2 = null;
 let loseController1 = null;
 let loseController2 = null;
-let bgm = ref(null);
+let bgm = shallowRef(null);
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router.go(-1); // 有router时，是从DemoHomepage进入，回退
@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
           `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
         }}
       </div>
-      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
+      <jsv-audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
 </template>

package/samples/SpriteImage/App.vue

@@ -110,6 +110,11 @@ export default {
     :onAction="{
       onKeyDown: onKeyDown,
     }"
+    :style="{
+      width:1280,
+      height:720,
+      backgroundColor:'#000000'
+    }"
   >
     <div
       :style="{