@shijiu/jsview-vue 0.9.502 → 0.9.590

package/samples/BasicFocusControl/components/MainAreaRightBlock.vue

@@ -1,30 +1,27 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-import BaseBlock from "./BaseBlock.vue"
-
-@Options({
-  props: {
-    name: String,
-    style: { type:Object, default: {}},
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+import { useFocusHub } from "jsview";
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
   },
-  components: {
-    BaseBlock
-  }
-})
-export default
-class MainAreaRightBlock extends Vue {
-  onKeyDown(ev: JsvFocusEvent) {
-    if (ev.keyCode === 39) { // Right key
-      (this.$root as any).changeFocusInDemoSpace('sideBarR0C0');
-      return true;
-    }
-    return false;
+});
+
+const focusHub = useFocusHub();
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 39) {
+    // Right key
+    focusHub.setFocus("sideBarR0C0");
+    return true;
   }
-}
+  return false;
+};
 </script>
 
 <template>
-<BaseBlock :name="$props.name" :style="$props.style"
-    :onKeyDown="onKeyDown"/>
+  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
 </template>

package/samples/BasicFocusControl/components/SideBar.vue

@@ -1,56 +1,41 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-// import { globalStore } from "../GlobalStore"
-import SideBarBlock from "./SideBarBlock.vue"
-
-@Options({
-  components: {
-    SideBarBlock,
-  }
-})
-export default
-class SideBar extends Vue {
-  constructor(props: object) {
-    super(props);
+<script setup>
+import SideBarBlock from "./SideBarBlock.vue";
+import { useFocusHub } from "jsview";
+let focusRow = 0;
+const focusHub = useFocusHub();
+
+const onKeyDown = (ev) => {
+  // 子节点未处理的按键事件会流向此节点
+  let keyUsed = true;
+  switch (ev.keyCode) {
+    case 38: // Up
+      focusRow = 0;
+      break;
+    case 40: // Down
+      focusRow = 1;
+      break;
+    default:
+      keyUsed = false;
   }
 
-  private onKeyDown(ev: JsvFocusEvent) {
-    // console.warn("xxxx", globalStore.focusBaseName)
-    // 子节点未处理的按键事件会流向此节点
-    let keyUsed = true;
-    switch (ev.keyCode) {
-      case 38: // Up
-        this.focusRow = 0;
-        break;
-      case 40: // Down
-        this.focusRow = 1;
-        break;
-      default:
-        keyUsed = false;
-    }
-
-    if (keyUsed) {
-      // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
-      const name = `sideBarR${this.focusRow}C0`;
-      ev.ownerNode.findBlockByName(name)?.requestFocus();
-    }
-
-    return keyUsed;
+  if (keyUsed) {
+    // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
+    const name = `sideBarR${focusRow}C0`;
+    focusHub.setFocus(name);
   }
 
-  private focusRow: number = 0;
-}
+  return keyUsed;
+};
 </script>
 
 <template>
-<div>
-  <!--jsv-focus-block是非可描画节点，所以如果想接收style等属性，不要放在顶级-->
-  <jsv-focus-block :onKeyDown="onKeyDown">
-    <SideBarBlock name="sideBarR0C0" :style="{ left: 0, top: 0 }" />
-    <SideBarBlock name="sideBarR1C0" :style="{ left: 0, top: 120 }" />
-  </jsv-focus-block>
-</div>
+  <div>
+    <!--jsv-focus-block是非可描画节点，所以如果想接收style等属性，不要放在顶级-->
+    <jsv-focus-block :onKeyDown="onKeyDown">
+      <SideBarBlock name="sideBarR0C0" :style="{ left: 0, top: 0 }" />
+      <SideBarBlock name="sideBarR1C0" :style="{ left: 0, top: 120 }" />
+    </jsv-focus-block>
+  </div>
 </template>
 
 <style scoped>
@@ -63,7 +48,7 @@ class SideBar extends Vue {
   top: 50;
   width: 400;
   height: 50;
-  background-color: rgba(27,38,151,0.8);
+  background-color: rgba(27, 38, 151, 0.8);
 }
 
 .body {

package/samples/BasicFocusControl/components/SideBarBlock.vue

@@ -1,30 +1,27 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-import BaseBlock from "./BaseBlock.vue"
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
+import { useFocusHub } from "jsview";
 
-@Options({
-  props: {
-    name: String,
-    style: { type:Object, default: {}},
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
   },
-  components: {
-    BaseBlock
+});
+const focusHub = useFocusHub();
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 37) {
+    // Right key
+    focusHub.setFocus("main");
+    return true;
   }
-})
-export default
-class SideBarBlock extends Vue {
-  onKeyDown(ev: JsvFocusEvent) {
-    if (ev.keyCode === 37) { // Left key
-      (this.$root as any).changeFocusInDemoSpace('main');
-      return true;
-    }
-    return false;
-  }
-}
+  return false;
+};
 </script>
 
 <template>
-<BaseBlock :name="$props.name" :style="$props.style"
-    :onKeyDown="onKeyDown"/>
+  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
 </template>

package/samples/ColorSpace/App.vue

@@ -1,36 +1,27 @@
-<script>
-import { Vue } from "vue-class-component";
+<script setup>
 import jpegDemo from "../assets/jpegDemo.jpeg";
 import pngDemo from "../assets/pngDemo.png";
 import pngNoAlphaDemo from "../assets/pngNoAlphaDemo.png";
 import bmpDemo from "../assets/bmpDemo.bmp";
+import { useRouter } from "vue-router";
 
-class App extends Vue {
-  constructor(props) {
-    super(props);
+const router = useRouter();
 
-    this.jpegDemo = jpegDemo;
-    this.pngDemo = pngDemo;
-    this.pngNoAlphaDemo = pngNoAlphaDemo;
-    this.bmpDemo = bmpDemo;
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      window.JsView?.setGlobalConfig({
-        texCache: -1,
-      });
-
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    window.JsView?.setGlobalConfig({
+      texCache: -1,
+    });
 
-    return false;
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
   }
-}
-export default App;
+
+  return false;
+};
 </script>
+
 <template>
   <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
     <div class="allBgc">

package/samples/DemoHomepage/App.vue

@@ -2,23 +2,19 @@
  * @Author: ChenChanghua
  * @Date: 2021-06-02 13:31:00
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-14 17:21:34
+ * @LastEditTime: 2022-07-12 13:40:15
  * @Description: file content
 -->
-<script lang="ts">
-import { Vue } from "vue-class-component";
+<script>
 import { router } from "./router.js";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-
-class App extends Vue {
-  static Router = router;
+import { jJsvRuntimeBridge } from "jsview";
 
+export default {
+  Router: router,
   mounted() {
     jJsvRuntimeBridge.notifyPageLoaded();
-  }
-}
-
-export default App;
+  },
+};
 </script>
 
 <template>

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -1,14 +1,12 @@
 <script>
-import {
-  SimpleWidget,
-  VERTICAL,
-} from "jsview/utils/JsViewEngineWidget";
+import { watch } from "vue";
+import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
 
 export default {
   components: {
     Item,
-    SimpleWidget,
+    MetroWidget,
   },
   props: {
     data: Array,
@@ -20,7 +18,7 @@ export default {
       direction: VERTICAL,
       width: 1280,
       height: 600,
-      initFoucsId: 0,
+      initFocusId: 0,
     };
   },
   methods: {
@@ -39,23 +37,35 @@ export default {
       this.$router.push(data.path);
       localStorage.curFocusId = index;
     },
+    _provideData() {
+      return this.data;
+    },
   },
   beforeCreate() {
     if (typeof localStorage.curFocusId !== "undefined") {
       this.initFocusId = parseInt(localStorage.curFocusId);
     }
     localStorage.curFocusId = 0;
+    watch(
+      () => {
+        return this.data;
+      },
+      () => {
+        this.$refs.mw?.refreshData(true);
+      }
+    );
   },
 };
 </script>
 
 <template>
-  <simple-widget
+  <metro-widget
+    ref="mw"
     :name="name"
     :width="width"
     :height="height"
     :direction="direction"
-    :data="data"
+    :provideData="_provideData"
     :enableTouch="true"
     :measures="measures"
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
@@ -79,5 +89,5 @@ export default {
         {{ data.name }}
       </Item>
     </template>
-  </simple-widget>
+  </metro-widget>
 </template>

package/samples/DemoHomepage/components/TabFrame.vue

@@ -1,8 +1,5 @@
 <script>
-import {
-  SimpleWidget,
-  VERTICAL,
-} from "jsview/utils/JsViewEngineWidget";
+import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
 
 const measures = (item) => {
@@ -15,13 +12,14 @@ const measures = (item) => {
 
 export default {
   components: {
-    SimpleWidget,
+    MetroWidget,
     Item,
   },
   props: {
     name: String,
     itemFocus: Function,
     onEdge: Function,
+    initId: Number,
   },
   setup() {
     const width = 1280;
@@ -37,7 +35,7 @@ export default {
       {
         width: 200,
         height: 50,
-        name: "场景实例",
+        name: "MetroWidget",
         focusable: true,
         id: 1,
       },
@@ -55,7 +53,7 @@ export default {
 </script>
 
 <template>
-  <simple-widget
+  <metro-widget
     :name="name"
     :width="width"
     :height="height"
@@ -64,6 +62,7 @@ export default {
     :measures="measures"
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
     :onEdge="onEdge"
+    :initFocusId="initId"
   >
     <template #renderItem="{ data, query, onEdge, onAction }">
       <Item
@@ -82,5 +81,5 @@ export default {
         {{ data.name }}
       </Item>
     </template>
-  </simple-widget>
+  </metro-widget>
 </template>

package/samples/DemoHomepage/router.js

@@ -1,5 +1,5 @@
 import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview/utils/JsViewVueTools/JsvHashHistory";
+import { createJsvHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
@@ -8,6 +8,16 @@ const routeList = [
     path: "/",
     component: () => import("./views/Homepage"),
   },
+  {
+    name: "基础示例合集",
+    path: "/feature/Basic",
+    component: () => import("jsview/samples/Basic/App"),
+  },
+  {
+    name: "可视化变化通知",
+    path: "/feature/VisibleSensorDemo",
+    component: () => import("jsview/samples/VisibleSensorDemo/App"),
+  },
   {
     name: "快速刷新的表格布局组件",
     path: "/feature/GridDemo",
@@ -18,21 +28,6 @@ const routeList = [
     path: "/feature/NinePatchDemo",
     component: () => import("jsview/samples/NinePatchDemo/App"),
   },
-  {
-    name: "基础示例合集",
-    path: "/feature/Basic",
-    component: () => import("jsview/samples/Basic/App"),
-  },
-  {
-    name: "SimpleWidget",
-    path: "/feature/SimpleWidgetDemo",
-    component: () => import("jsview/samples/SimpleWidgetDemo/App"),
-  },
-  {
-    name: "SimpleWidget(进阶)",
-    path: "/feature/AdvanceMetroWidget",
-    component: () => import("jsview/samples/AdvanceMetroWidget/App"),
-  },
   {
     name: "视频",
     path: "/feature/VideoDemo",
@@ -49,12 +44,6 @@ const routeList = [
     props: { routePath: "/feature/HashHistory" },
     component: () => import("jsview/samples/HashHistory/App"),
   },
-  //TODO MetroPage未完成
-  // {
-  //   name: "ClassName写法样例",
-  //   path: "/feature/ClassNameDemo",
-  //   component: () => import("jsview/samples/ClassNameDemo/App"),
-  // },
   {
     name: "翻牌游戏",
     path: "/feature/FlipCard",
@@ -70,11 +59,6 @@ const routeList = [
     path: "/feature/TextureSize",
     component: () => import("jsview/samples/TextureSize/App"),
   },
-  {
-    name: "橱窗",
-    path: "/feature/FlowMultiWidget",
-    component: () => import("jsview/samples/FlowMultiWidget/App"),
-  },
   {
     name: "动图",
     path: "/feature/AnimPicture",
@@ -85,13 +69,11 @@ const routeList = [
     path: "/feature/SprayView",
     component: () => import("jsview/samples/SprayView/App"),
   },
-  //TODO 代码需要优化
   {
     name: "长文字",
     path: "/feature/LongText",
     component: () => import("jsview/samples/LongText/App"),
   },
-  //TODO 代码需要优化
   {
     name: "长图片",
     path: "/feature/LongImage",
@@ -153,11 +135,28 @@ const routeList = [
     component: () => import("jsview/samples/FilterDemo/App"),
   },
 
-  // 场景实例
+  // MetroWidget示例
+  {
+    name: "简单示例",
+    path: "/metroWidget/Simple",
+    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App"),
+  },
+  {
+    name: "嵌套示例",
+    path: "/metroWidget/Advanced",
+    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App"),
+  },
+  {
+    name: "性能测试",
+    path: "/metroWidget/PerformanceTest",
+    component: () =>
+      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App"),
+  },
   {
-    name: "直播间(TBD)",
-    path: "/scene/LiveRoom",
-    // component: () => import("jsview/samples/Basic/App"),
+    name: "乒乓模式",
+    path: "/metroWidget/PingPong",
+    component: () =>
+      import("jsview/samples/MetroWidgetDemos/PingPong/App"),
   },
 ];
 

package/samples/DemoHomepage/views/Homepage.vue

@@ -1,6 +1,5 @@
 <script>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
@@ -9,7 +8,7 @@ import { routeList } from "../router.js";
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 const featureData = [];
-const sceneData = [];
+const metroWidgetData = [];
 for (let item of routeList) {
   let obj = {
     name: item.name,
@@ -21,12 +20,12 @@ for (let item of routeList) {
   if (item.path.indexOf("feature") >= 0) {
     obj.backgroundColor = colorTemplete[featureData.length % 4];
     featureData.push(obj);
-  } else if (item.path.indexOf("scene") >= 0) {
-    obj.backgroundColor = colorTemplete[sceneData.length % 4];
-    sceneData.push(obj);
+  } else if (item.path.indexOf("metroWidget") >= 0) {
+    obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
+    metroWidgetData.push(obj);
   }
 }
-const dataList = [featureData, sceneData];
+const dataList = [featureData, metroWidgetData];
 
 export default {
   components: {
@@ -90,9 +89,11 @@ export default {
       }
     },
     tabItemFocus(data) {
+      console.log("cchtest tabItemFocus");
       if (data.id != this.tabId) {
         this.tabId = data.id;
         this.contentData = dataList[this.tabId];
+        localStorage.curTab = this.tabId;
       }
     },
     onDialogAction(msg) {
@@ -113,6 +114,20 @@ export default {
       }
     },
   },
+  created() {
+    console.log("cchtest homepage beforeCreated", localStorage.curTab);
+    if (typeof localStorage.curTab !== "undefined") {
+      this.tabId = parseInt(localStorage.curTab);
+    }
+    localStorage.curTab = 0;
+    this.contentData = dataList[this.tabId];
+  },
+  mounted() {
+    console.log("cchtest homepage mounted", localStorage.curTab);
+  },
+  beforeUnmount() {
+    console.log("cchtest homePage beforeUnmount");
+  },
 };
 </script>
 
@@ -136,6 +151,7 @@ export default {
           :name="name + '/tabFrame'"
           :onEdge="onTabEdge"
           :itemFocus="tabItemFocus"
+          :initId="tabId"
         />
       </div>
 
@@ -156,7 +172,7 @@ export default {
         v-if="showExitDialog"
         :name="name + '/exitDialog'"
         :onAction="onDialogAction"
-      />
+      ></Dialog>
     </jsv-focus-block>
   </div>
 </template>

package/samples/FilterDemo/AnimatePic.vue

@@ -0,0 +1,58 @@
+<script setup>
+const item_url =
+  "http://oss.image.51vtv.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
+</script>
+
+<template>
+  <div
+    className="blockStyle"
+    :style="{
+      backgroundColor: '#0000FF',
+      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+    }"
+  />
+  <img
+    className="blockStyle"
+    :style="{
+      objectFit: 'contain',
+      animation: 'opacityDemo_CompositeOpacity 3s infinite',
+    }"
+    :src="item_url"
+  />
+</template>
+
+<style scoped>
+.blockStyle {
+  top: 50;
+  left: 50;
+  width: 150;
+  height: 150;
+}
+
+.picTitleTextClass {
+  font-size: 25;
+  height: 68;
+  line-height: 34;
+  color: "#000000";
+  text-align: "center";
+}
+
+@keyframes opacityDemo_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+} ;
+</style>