@shijiu/jsview-vue-samples 2.1.200 → 2.1.339-test.0

package/MetroWidgetDemos/TripleWidget/Item.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 15:33:54
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+      }"
+    />
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/TripleWidget/SWidgetItem.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST } from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { onMounted, ref, shallowRef } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  onItemEdge: Function,
+});
+
+const focusHub = useFocusHub();
+const mwWidget2 = ref(null);
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 1; i++) {
+    data.push({
+      width: 500,
+      height: 170,
+      name: "3级嵌套_" + i + props.data.index,
+      marginBottom: 10,
+      index: i,
+    });
+  }
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+
+onMounted(() => {});
+
+const widgetRef = shallowRef();
+const onFocus = (rect) => {
+  if (rect) {
+    //多层嵌套时需要将子的edge信息加上
+    let rectInfo = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+    let curRect = rect;
+    while (curRect) {
+      let { x, y, width, height } = curRect.rect;
+      rectInfo.x += x;
+      rectInfo.y += y;
+      rectInfo.width = width;
+      rectInfo.height = height;
+      curRect = curRect.childEdgeInfo;
+    }
+    widgetRef.value?.setEnterFocusRect({
+      direction: rect.direction,
+      rect: rectInfo,
+    });
+  }
+  focusHub.setFocus("mwWidget2" + props.data.index);
+};
+const onWidgetEdge = (info) => {
+  props.onItemEdge(info);
+};
+
+props.onAction.register("onFocus", onFocus);
+</script>
+
+<template>
+  <metro-widget
+    ref="widgetRef"
+    :name="'mwWidget2' + props.data.index"
+    :top="0"
+    :left="0"
+    :width="660"
+    :height="600"
+    :provideData="provideData"
+    :padding="{ left: 30, right: 30 }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onWidgetEdge"
+  >
+    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+    <template #renderItem="{ data, onAction, onItemEdge }">
+      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/TripleWidget/WidgetItem.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: (i + props.data.index) % 2 == 0 ? 90 : 180,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  /** 重要代码: 参数rect为父MetroWidget传递的, 焦点过来的区域
+   *  因此需要调用setEnterFocusRect来设置焦点进入区域, 以寻找最近的焦点
+   */
+  //多层嵌套时, EnterFocusRect需要根据子的信息设置
+  if (rect) {
+    let rectInfo = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+    let curRect = rect;
+    while (curRect) {
+      let { x, y, width, height } = curRect.rect;
+      rectInfo.x += x;
+      rectInfo.y += y;
+      rectInfo.width = width;
+      rectInfo.height = height;
+      curRect = curRect.childEdgeInfo;
+    }
+    mwRef.value?.setEnterFocusRect({
+      direction: rect.direction,
+      rect: rectInfo,
+    });
+  }
+
+  // mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <!-- 重要代码: sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- 重要代码: onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <metro-widget
+    ref="mwRef"
+    :name="data.name"
+    :top="50"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 30,
+      right: 30,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/routeList.js

@@ -74,4 +74,16 @@ export default [
     component: () =>
       import("jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
   },
+  {
+    name: "三层嵌套",
+    path: "/metroWidget/TripleWidget",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/TripleWidget/App.vue"),
+  },
+  {
+    name: "数据刷新demo",
+    path: "/metroWidget/RefreshDemo",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
+  },
 ]

package/ProgressBar/App.vue

@@ -0,0 +1,128 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgSty">
+      <!-- 提示 -->
+      <div class="text" :style="{ left: 210, top: 20 }">
+        {{
+          "操作提示：\n按 左 键减小，\n按 右 键增加，\n按【OK】键恢复初始状态，\n按 返回 键退出"
+        }}
+      </div>
+      <!-- 第一幅图 点九 -->
+      <div
+        class="logo-bg"
+        :style="{
+          left: 210,
+          top: 200,
+        }"
+      >
+        <!-- 三个背景色块 -->
+        <div class="bg1" />
+        <div class="bg2" />
+        <div class="bg3" />
+        <!-- 点九进度条 -->
+        <div :style="{ top: 80, left: 0 }">
+          <JsvProgressBar
+            :width="800"
+            :height="84"
+            :progress="myProgress"
+            :aniTime="0.5"
+            :bgcBefore="'rgba(108, 196,187,0.8)'"
+            :bgcBehind="'rgba(255,255,255,0.3)'"
+          ></JsvProgressBar>
+        </div>
+        <!-- 图1说明 -->
+        <div :style="{ left: 0, top: 26 }" class="text">
+          {{ "CanvasTexture配合点九完成" }}
+        </div>
+        <!-- 第二幅图 clipView -->
+        <div :style="{ top: 260 }">
+          <JsvProgressBar
+            :width="800"
+            :height="84"
+            :aniTime="0.5"
+            :progress="myProgress"
+            :bgcBefore="'rgba(108, 196,187,0.8)'"
+            :bgcBehind="'rgba(255,255,255,0.3)'"
+            :isCanvas="false"
+          ></JsvProgressBar>
+        </div>
+        <!-- 图2说明 -->
+        <div :style="{ left: 0, top: 210 }" class="text">
+          {{ "ClipView的方式完成" }}
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { shallowRef } from "vue";
+import { JsvProgressBar } from "jsview";
+
+//进度百分比
+let myProgress = shallowRef(20);
+//按键事件 控制进度条的width
+const procKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      myProgress.value -= 5;
+      if (myProgress.value <= 0) {
+        myProgress.value = 0;
+      }
+      break;
+    case 39:
+      myProgress.value += 5;
+      if (myProgress.value >= 100) {
+        myProgress.value = 100;
+      }
+      break;
+    case 13:
+      myProgress.value = 0;
+      break;
+    default:
+      break;
+  }
+};
+</script>
+
+<style scoped>
+.bgSty {
+  background-color: #5490d1;
+  width: 1280;
+  height: 720;
+}
+.logo-bg {
+  width: 800;
+  height: 400;
+}
+.text {
+  width: 800;
+  height: 200;
+  font-size: 24;
+  font-weight: bold;
+  line-height: 32;
+  color: #ffffff;
+  text-align: center;
+}
+.bg1 {
+  left: 0;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #007f00;
+}
+.bg2 {
+  left: 267;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #3049b8;
+}
+.bg3 {
+  left: 534;
+  top: 0;
+  height: 400;
+  width: 266;
+  background-color: #d12b8c;
+}
+</style>

package/QrcodeDemo/App.vue

@@ -12,7 +12,7 @@ const includeImage = true;
 const imageH = 64;
 const imageW = 64;
 const imageSrc =
-  "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
+  "http://oss.image.qcast.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
 const tipsInfo = `功能：二维码展示可配置项：1.前景色 
 2.背景色 
 3.指定小图标 
@@ -64,4 +64,4 @@ const onKeyDown = (ev) => {
       </div>
     </div>
   </jsv-focus-block>
-</template>
+</template>

package/SpriteImage/App.vue

@@ -12,10 +12,7 @@
  *                  loop {string} 动图的循环次数 infinite/数字，默认为infinite
  *                  spriteName {string} 动图的名称，默认为null
  *                  autostart{boolean} 是否自动播放动图
- *                  controller {SpriteController} 控制动图的对象
- *                      stop(end_frame) 停止动画 end_frame: "start", "end"
- *                      start() 开始动画
- *
+ *                  ref 控制动图的对象
  *
  * 【技巧说明】
  * Q: 动图和切图如何实现?
@@ -26,16 +23,49 @@
  -->
 
 <script setup>
-import { SpriteController, JsvSpriteAnim } from "jsview";
-import spriteImage from "./images/egg_break.png";
-import config_json from "./images/egg_break.json";
-import { shallowRef } from "vue"
+import { JsvSpriteAnim, JsvSpriteLoader } from "jsview";
+import localSpriteImage from "./images/egg_break.png";
+import localConfigJson from "./images/egg_break.json";
+import { shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
-console.log("test spriteImage =", spriteImage, "/n config_json=", config_json);
+console.log(
+  "test localSpriteImage =",
+  localSpriteImage,
+  "/n localConfigJson=",
+  localConfigJson
+);
 const router = useRouter();
+let useLocalData = shallowRef(true);
+let animateImage = shallowRef(null);
+let preloadJsonUrl = shallowRef(null);
+let preloadCallback = shallowRef(null);
+let spriteJsonIfno = shallowRef(null);
+
+const _UseLocalData = () => {
+  console.log("using local data");
+  useLocalData.value = true;
+  animateImage.value = `url(${localSpriteImage})`;
+  preloadJsonUrl.value = null;
+  preloadCallback.value = null;
+  spriteJsonIfno.value = _formatInfo(localConfigJson).info;
+};
+
+const _UseRemoteData = () => {
+  const testRemoteImageUrl = "http://192.168.2.179:8077/images/egg_break.png";
+  const testRemoteConfigUrl = "http://192.168.2.179:8077/images/egg_break.json";
+
+  console.log("using remote data");
+  useLocalData.value = false;
+  animateImage.value = testRemoteImageUrl;
+  preloadJsonUrl.value = testRemoteConfigUrl;
+  preloadCallback.value = (config_json, resolve_set) => {
+    spriteJsonIfno.value = _formatInfo(config_json).info;
+    resolve_set(); // 通知loader数组设置完成
+  };
+};
 
-const _formatInfo = () => {
+const _formatInfo = (config_json) => {
   const info = {
     frames: [],
     meta: {
@@ -44,8 +74,6 @@ const _formatInfo = () => {
   };
 
   let frames_ref = info.frames;
-  let max_width = 0;
-  let max_height = 0;
 
   for (let i = 0; i < config_json.frames.length; i++) {
     const target = config_json.frames[i].spriteSourceSize;
@@ -53,85 +81,102 @@ const _formatInfo = () => {
       target,
       source: config_json.frames[i].frame,
     });
-    const sprite_with = target.x + target.w;
-    const sprite_height = target.y + target.h;
-    if (sprite_with > max_width) {
-      max_width = sprite_with;
-    }
-    if (sprite_height > max_height) {
-      max_height = sprite_height;
-    }
   }
-  return { info, maxW: max_width, maxH: max_height };
-}
-
-const spriteController = new SpriteController()
-const sprite_info = _formatInfo();
-console.log("test sprite_into =", sprite_info);
-
-const view_size = {
-  w: sprite_info.maxW,
-  h: sprite_info.maxH,
+  return { info };
 };
 
-let show = shallowRef(true)
+const spriteController = shallowRef(null);
+
+let show = shallowRef(true);
 
 const spriteAnimEnd = () => {
   show.value = false;
-}
+};
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
   }
   return true;
-}
+};
+
+_UseLocalData();
+// TODO: 当需要测试远程数据时打开
+// setTimeout(() => {
+//   _UseRemoteData();
+// }, 2000);
 </script>
 
 <template>
-  <jsv-focus-block autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div :style="{
-      textAlign: 'center',
-      fontSize: 30,
-      lineHeight: 50,
-      color: '#ffffff',
-      left: 200,
-      top: 100,
-      width: 434,
-      height: 50,
-      backgroundColor: 'rgba(27,38,151,0.8)',
-    }">
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 200,
+        top: 100,
+        width: 434,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
       精灵图效果
     </div>
     <!--
                 通过show进行 清理精灵图，用于验证精灵图清理后，StyleSheet中cssRules的keyFrame清理工作能正常完成
             -->
-    <div v-if="show" :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }">
-      <JsvSpriteAnim :spriteInfo="sprite_info.info" :loop="10" :viewSize="view_size" :duration="0.8"
-        :controller="spriteController" :autostart="true" :onAnimEnd="spriteAnimEnd" :imageUrl="spriteImage" />
+    <div
+      v-if="show"
+      :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }"
+    >
+      <JsvSpriteLoader
+        :imageUrl="animateImage"
+        :configUrl="preloadJsonUrl"
+        :onConfigReady="preloadCallback"
+        :noNeedResource="useLocalData"
+      >
+        <JsvSpriteAnim
+          ref="spriteController"
+          :spriteInfo="spriteJsonIfno"
+          :loop="3"
+          :duration="0.8"
+          :autostart="true"
+          :onAnimEnd="spriteAnimEnd"
+          :imageUrl="animateImage"
+        />
+      </JsvSpriteLoader>
     </div>
 
-    <div :style="{
-      textAlign: 'center',
-      fontSize: 30,
-      lineHeight: 50,
-      color: '#ffffff',
-      left: 700,
-      top: 100,
-      width: 434,
-      height: 50,
-      backgroundColor: 'rgba(27,38,151,0.8)',
-    }">
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 700,
+        top: 100,
+        width: 434,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
       原始图片
     </div>
-    <div :style="{
-      left: 700,
-      top: 150,
-      width: 434,
-      height: 372,
-      backgroundImage: `url(${spriteImage})`,
-    }" />
+    <div
+      :style="{
+        left: 700,
+        top: 150,
+        width: 434,
+        height: 372,
+        backgroundImage: animateImage,
+      }"
+    />
   </jsv-focus-block>
 </template>