@shijiu/jsview-vue 0.9.490 → 0.9.590

package/samples/MetroWidgetDemos/Advanced/App.vue

@@ -0,0 +1,211 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 18:02:13
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import { useFocusHub } from "jsview";
+import { advanceButton, advanceMetroWidget, advanceMix } from "../data";
+import ButtonItem from "./ButtonItem.vue";
+import WidgetItem from "../WidgetItem.vue";
+import Item from "../Item.vue";
+
+const router = useRouter();
+const foucsHub = useFocusHub();
+
+const onFocus = () => {
+  foucsHub.setFocus("mwButton");
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+
+//item为Buttonitem的一些回调
+const provideData = () => {
+  return advanceButton;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    foucsHub.setFocus("mwWidget");
+  } else if (edgeInfo.direction == EdgeDirection.bottom) {
+    foucsHub.setFocus("mwMix");
+  }
+};
+
+//item为Widgetitem的一些回调
+const provideData2 = () => {
+  return advanceMetroWidget;
+};
+const measures2 = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    doSlide: false,
+  };
+};
+const onEdge2 = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    foucsHub.setFocus("mwButton");
+  }
+};
+
+//item混排的回调
+const provideData3 = () => {
+  return advanceMix;
+};
+const measures3 = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+const onEdge3 = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    foucsHub.setFocus("mwWidget");
+  } else if (edgeInfo.direction == EdgeDirection.top) {
+    foucsHub.setFocus("mwButton");
+  }
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        left: 50,
+        top: 50,
+        width: 300,
+        height: 400,
+        fontSize: 30,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ `item可以是可获得焦点的控件` }}
+    </div>
+    <metro-widget
+      name="mwButton"
+      :top="150"
+      :left="50"
+      :provideData="provideData"
+      :width="220"
+      :height="400"
+      :direction="VERTICAL"
+      :measures="measures"
+      :onEdge="onEdge"
+    >
+      <template #renderItem="{ data, query, onAction, onItemEdge }">
+        <button-item
+          :data="data"
+          :query="query"
+          :onAction="onAction"
+          :onItemEdge="onItemEdge"
+        />
+      </template>
+    </metro-widget>
+
+    <div
+      :style="{
+        left: 50,
+        top: 350,
+        width: 300,
+        height: 400,
+        fontSize: 30,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ `item可以普通描画控件和可获焦控件混排` }}
+    </div>
+    <metro-widget
+      name="mwMix"
+      :top="450"
+      :left="50"
+      :provideData="provideData3"
+      :width="260"
+      :height="440"
+      :padding="{
+        top: 20,
+        left: 20,
+      }"
+      :direction="VERTICAL"
+      :measures="measures3"
+      :onEdge="onEdge3"
+    >
+      <template #renderItem="{ data, query, onAction, onItemEdge }">
+        <button-item
+          v-if="data.type == 'button'"
+          :data="data"
+          :query="query"
+          :onAction="onAction"
+          :onItemEdge="onItemEdge"
+        />
+        <item v-else :data="data" :query="query" :onAction="onAction" />
+      </template>
+    </metro-widget>
+
+    <div
+      :style="{
+        left: 500,
+        top: 50,
+        width: 500,
+        height: 400,
+        fontSize: 30,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
+    </div>
+    <metro-widget
+      name="mwWidget"
+      :top="150"
+      :left="400"
+      :provideData="provideData2"
+      :width="600"
+      :height="600"
+      :direction="VERTICAL"
+      :measures="measures2"
+      :onEdge="onEdge2"
+    >
+      <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
+      <!-- measure2中会返回doSlide: false, 既MetroWidget自身不处理滚动, 滚动由子的sendFocusRectEvent控制 -->
+      <template #renderItem="{ data, query, onAction, onItemEdge }">
+        <widget-item
+          :data="data"
+          :query="query"
+          :onAction="onAction"
+          :onItemEdge="onItemEdge"
+        />
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/samples/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -0,0 +1,90 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:26:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 17:00:47
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { useFocusHub } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  query: String,
+  onAction: Object,
+  onItemEdge: Function,
+});
+const focusHub = useFocusHub();
+
+let focusIndex = ref(0);
+let focused = ref(false);
+let focusBlock = ref(null);
+
+const onFocus = () => {
+  //onFocus时, 获得焦点, 以处理自己内部的焦点逻辑
+  focusHub.setFocus(props.data.name);
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+  focusIndex.value = 0;
+  //onBlur的时候, 需要将焦点返还给父
+  focusBlock.value?.returnFocusToParent();
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 37 && focusIndex.value == 1) {
+    focusIndex.value = 0;
+    return true;
+  } else if (ev.keyCode == 39 && focusIndex.value == 0) {
+    focusIndex.value = 1;
+    return true;
+  } else if (ev.keyCode == 13) {
+    console.log("button click", props.data);
+    return true;
+  }
+  return false;
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusBlock"
+    :name="data.name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: 50,
+        height: 50,
+        fontSize: 20,
+        color: '#FFFFFF',
+        backgroundColor: '#00AA00',
+      }"
+    ></div>
+
+    <div
+      :style="{
+        left: 50,
+        width: 50,
+        height: 50,
+        backgroundColor: '#0000AA',
+      }"
+    ></div>
+
+    <div
+      :style="{
+        visibility: this.focused ? 'visible' : 'hidden',
+        left: 50 * focusIndex,
+        width: 10,
+        height: 10,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>

package/samples/MetroWidgetDemos/Item.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 17:00:58
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: 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>
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/samples/{SimpleWidgetDemo → MetroWidgetDemos/PerformanceTest}/App.vue

@@ -1,9 +1,9 @@
 <!--
  * 【界面概述】
- * 展示SimpleWidget控件的用法
+ * 展示MetroWidget控件的用法
  *
  * 【控件介绍】
- * SimpleWidget:
+ * MetroWidget:
  *      top {int} 控件的y，默认为0
  *      left {int} 控件的x， 默认为0
  *      width {int} (必选)控件的宽
@@ -19,7 +19,7 @@
  *      slideEasing {string} 页面滑动动画easing
 
  *      data {array} (必选)数据列表
- *      dispatcher {SWidgetDispatcher} 用于设置SimpleWidget控件内部的状态，默认为null
+ *      dispatcher {SWidgetDispatcher} 用于设置MetroWidget控件内部的状态，默认为null
  *      measures {function} (必选)返回item的模板信息的回调,
  *                              @params item {object} data中的数据
  *                              @return 模板信息，
@@ -49,8 +49,8 @@
                                             @params id {int} item的id
                                             @return {object} item的位置 {xPos, yPos, width, height}
                 }
- *    onEdge: 若单元格内另有可接管按键的控件（如SimpleWidget），该控件到达边缘需要通知SimpleWidget时的回调
- *    onAction: 单元格内控件需要通过onAction.register方法向SimpleWidget注册onFocus， onBlur， onClick
+ *    onEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
+ *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册onFocus， onBlur， onClick
  * 
  * Q: 如何进行布局，定制每个格的尺寸？
  * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
@@ -71,102 +71,88 @@
  * A: 当焦点移动到控件边缘时，会调用onEdge回调。在回调中通过参数传递的值来决定焦点转移的行为
 -->
 
-<script>
-import { Options, Vue } from "vue-class-component";
+<script setup>
 import { data1, data2, data3 } from "./data";
-import {
-  VERTICAL,
-  SimpleWidget,
-  EdgeDirection,
-} from "jsview/utils/JsViewEngineWidget";
-import JsvNinePatch from "jsview/utils/JsViewVueWidget/JsvNinePatch";
 import borderImgPath from "./border.png";
 import Item from "./components/ContentItem.vue";
 import MyTab from "./components/MyTab.vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import {
+  VERTICAL,
+  MetroWidget,
+  EdgeDirection,
+  jJsvRuntimeBridge,
+  useFocusHub,
+} from "jsview";
 
-@Options({
-  components: {
-    SimpleWidget,
-    Item,
-    JsvNinePatch,
-    MyTab,
-  },
-})
-class App extends Vue {
-  constructor(props) {
-    super(props);
-    this.focusNode = null;
-    this.direction = VERTICAL;
-    this.contentData = data1;
-    this.myId = 0;
-    this.focusImgPath = borderImgPath;
-    this.focusStyle = {};
-    console.log("image path " + this.focusImgPath);
-    this.requestDataTime = 0;
-  }
+const router = useRouter();
+const focusHub = useFocusHub();
+let contentData = data1;
+let requestDataTime = 0;
+const mwRef = ref(null);
 
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
-    return false;
+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;
+};
 
-  getMeasures() {
-    return {
-      width: 227,
-      height: 351,
-      focusable: true,
-    };
+const provideData = () => {
+  return contentData;
+};
+const measures = () => {
+  return {
+    width: 227,
+    height: 351,
+    focusable: true,
+  };
+};
+const onFocus = () => {
+  focusHub.setFocus("mw");
+};
+const onWidgetEdge = (edge) => {
+  if (edge.direction === EdgeDirection.top) {
+    focusHub.setFocus("tab");
   }
-  onFocus() {
-    console.log("App onFocus", this.$refs.rootNode);
-    this.$refs.rootNode.findBlockByName("simpleWidget").requestFocus();
+};
+const onTabEdge = () => {
+  focusHub.setFocus("mw");
+};
+const onItemFocus = (id) => {
+  if (requestDataTime != 0) {
+    clearTimeout(requestDataTime);
+    requestDataTime = 0;
   }
-  onWidgetEdge(edge) {
-    if (edge.direction === EdgeDirection.top) {
-      this.$refs.rootNode.findBlockByName("tab").requestFocus();
+  requestDataTime = setTimeout(() => {
+    switch (id) {
+      case 0:
+        contentData = data1;
+        break;
+      case 1:
+        contentData = data2;
+        break;
+      case 2:
+        contentData = data3;
+        break;
     }
-  }
-  onTabEdge() {
-    this.$refs.rootNode.findBlockByName("simpleWidget").requestFocus();
-  }
-  onItemFocus(id) {
-    if (this.requestDataTime != 0) {
-      clearTimeout(this.requestDataTime);
-      this.requestDataTime = 0;
-    }
-    this.requestDataTime = setTimeout(()=>{
-      switch(id) {
-        case 0:
-          this.contentData = data1;
-          break;
-        case 1:
-          this.contentData = data2;
-          break;
-        case 2:
-          this.contentData = data3;
-          break;
-      }
-      this.myId = id;
-    }, 0);  
-  }
+    mwRef.value?.refreshData(true);
+  }, 0);
+};
 
-  beforeUnmount() {
-    if (this.requestDataTime != 0) {
-      clearTimeout(this.requestDataTime);
-      this.requestDataTime = 0;
-    }
-  }
-
-  mounted() {
-    window.jJsvRuntimeBridge?.notifyPageLoaded();
+onBeforeUnmount(() => {
+  if (requestDataTime != 0) {
+    clearTimeout(requestDataTime);
+    requestDataTime = 0;
   }
-}
+});
 
-export default App;
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>
@@ -182,15 +168,15 @@ export default App;
       </div>
 
       <div class="widgetPos">
-        <simple-widget
-          name="simpleWidget"
-          :key="myId"
-          :data="contentData"
+        <metro-widget
+          name="mw"
+          ref="mwRef"
+          :provideData="provideData"
           :width="1253"
           :height="600"
           :padding="{ left: 26, top: 36, right: 26, bottom: 36 }"
-          :direction="direction"
-          :measures="getMeasures"
+          :direction="VERTICAL"
+          :measures="measures"
           :onEdge="onWidgetEdge"
         >
           <template #renderItem="{ data, query, onEdge, onAction }">
@@ -201,17 +187,7 @@ export default App;
               :onAction="onAction"
             />
           </template>
-        </simple-widget>
-        <div class="focusPos">
-          <JsvNinePatch
-            :style="focusStyle"
-            :imageUrl="focusImgPath"
-            :imageWidth="81"
-            :contentWidth="25"
-            :borderOutset="14"
-            :animTime="0.2"
-          />
-        </div>
+        </metro-widget>
       </div>
     </div>
   </jsv-focus-block>

package/samples/{SimpleWidgetDemo → MetroWidgetDemos/PerformanceTest}/Item.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 18:03:22
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 18:03:23
+ * @Description: file content
+-->
 <script>
 export default {
   props: {