@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0

package/MetroWidgetDemos/{TripleWidget → SpatialNav}/Item.vue

@@ -9,7 +9,6 @@ import { ref, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   data: Object,
   onAction: Object,
-  rowNum: Number,
   queryInfo: Object,
 });
 
@@ -32,15 +31,9 @@ props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
 
 onMounted(() => {
-  console.log(
-    `+++++++++ 加载 item 所在行列: ${props.rowNum} ${props.queryInfo.id}`
-  );
 });
 
 onUnmounted(() => {
-  console.log(
-    `---------卸载 item 所在行列: ${props.rowNum} ${props.queryInfo.id}`
-  );
 });
 </script>
 
@@ -49,7 +42,7 @@ onUnmounted(() => {
     :style="{
       width: data.width,
       height: data.height,
-      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transform: focused ? 'scale3d(1.05, 1.05, 1.05)' : '',
       transition: 'transform 0.2s linear',
     }"
   >

package/MetroWidgetDemos/{TripleWidget/WidgetItem.vue → SpatialNav/SimpleFloor.vue}

@@ -1,19 +1,19 @@
 <script setup>
-import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { HORIZONTAL, MetroWidget, useFocusHub, ONEDGE_TYPE } from "jsview";
 import { shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
   data: Object,
-  onItemEdge: Function,
   onAction: Object,
-  rowNum: Object,
+  queryInfo: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = shallowRef(null);
-
 const measures = (item) => {
-  return item;
+  return {
+    ...item,
+    bindSpatialNav: true,
+  };
 };
 const randomColor = () => {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
@@ -25,8 +25,8 @@ const provideData = () => {
   const data = [];
   for (let i = 0; i < 10; i++) {
     data.push({
-      width: (i + props.data.index) % 2 == 0 ? 90 : 180,
-      height: 90,
+      width: 160,
+      height: 100,
       marginRight: 10,
       marginBottom: 10,
       content: i,
@@ -36,33 +36,6 @@ const provideData = () => {
   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 = () => {
@@ -85,31 +58,27 @@ props.onAction.register("onBlur", onBlur);
   >
     {{ 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"
+    :top="40"
+    :width="900"
+    :height="250"
     :provideData="provideData"
     :direction="HORIZONTAL"
     :padding="{
-      left: 30,
-      right: 30,
+      left: 20,
+      right: 20,
       top: 10,
       bottom: 10,
     }"
     :measures="measures"
-    :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
+    :onEdge="ONEDGE_TYPE.SPATIAL_NAV"
   >
     <template #renderItem="{ data, onAction, query }">
       <item
         :data="data"
         :onAction="onAction"
-        :rowNum="props.rowNum"
         :queryInfo="query"
       />
     </template>

package/MetroWidgetDemos/SpatialNav/StepMw.vue

@@ -0,0 +1,113 @@
+<script setup>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  useFocusHub,
+  ONEDGE_TYPE,
+  EdgeDirection,
+  SPATIAL_NAV_PROVIDER_NAME,
+} from "jsview";
+import { inject, shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: Object,
+});
+const focusHub = useFocusHub();
+const spatialNavProvider = inject(SPATIAL_NAV_PROVIDER_NAME, undefined);
+const measures = (item) => {
+  return {
+    ...item,
+    bindSpatialNav: true,
+  };
+};
+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 < 6; i++) {
+    data.push({
+      left: i * 110,
+      width: 100,
+      height: 50,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  if (props.data.revert) {
+    data[0].top = 100;
+    data[1].top = 90;
+    data[2].top = 80;
+    data[3].top = 30;
+    data[4].top = 10;
+    data[5].top = 0;
+  } else {
+    data[0].top = 0;
+    data[1].top = 10;
+    data[2].top = 30;
+    data[3].top = 80;
+    data[4].top = 90;
+    data[5].top = 100;
+  }
+
+  return data;
+};
+const onFocus = (rect) => {
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+
+const onEdge = (rect) => {
+  console.log("myt onEdge", rect);
+  spatialNavProvider.moveTo(rect.direction, { yMoveType: "layerFirst" });
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <metro-widget
+    :name="data.name"
+    :top="40"
+    :width="900"
+    :height="250"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    layoutType="absolute"
+    :padding="{
+      left: 20,
+      right: 20,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :sendFocusRectEvent="true"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/SpatialNav/TabContent/TabContent.vue

@@ -0,0 +1,185 @@
+<script setup>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  useFocusHub,
+  EdgeDirection,
+  SPATIAL_NAV_PROVIDER_NAME,
+  ONEDGE_TYPE,
+} from "jsview";
+import { shallowRef, inject } from "vue";
+import Item from "../Item.vue";
+
+/**
+ * 此组件由于tab和content的焦点切换逻辑不是就近原则，所以不需要设置autoOnEdge, 而是在onEdge回调中处理逻辑，并使用spatialNavProvider实现往外移动时的就近寻找焦点
+ */
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: Object,
+});
+const focusHub = useFocusHub();
+const spatialNavProvider = inject(SPATIAL_NAV_PROVIDER_NAME, undefined);
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const tabName = props.data.name + "-tab";
+const tabRef = shallowRef(null);
+const tabData = [
+  {
+    name: "tab1",
+    content: "tab1",
+    width: 120,
+    height: 50,
+    marginRight: 10,
+    color: randomColor(),
+  },
+  {
+    name: "tab2",
+    content: "tab2",
+    width: 120,
+    height: 50,
+    marginRight: 10,
+    color: randomColor(),
+  },
+  {
+    name: "tab3",
+    content: "tab3",
+    width: 120,
+    height: 50,
+    marginRight: 10,
+    color: randomColor(),
+  },
+];
+function tabProvideData() {
+  return tabData;
+}
+function tabMeasures(item) {
+  return {
+    ...item,
+    bindSpatialNav: true,
+  };
+}
+function tabOnFocus(item) {
+  focusHub.setFocus(tabName);
+}
+function tabOnBlur(item) {
+  focusHub.returnFocusToParent();
+}
+function tabOnEdge(rect) {
+  if (rect.direction == EdgeDirection.bottom) {
+    focusHub.setFocus(contentName);
+  } else {
+    spatialNavProvider.moveTo(rect.direction);
+  }
+}
+function tabOnFocusChange(id) {
+  if (id === curTab) return;
+  curTab = id;
+  contentRef.value.setFocusId(0);
+  contentRef.value.refreshData(true);
+}
+
+let curTab = 0;
+const contentRef = shallowRef(null);
+const contentName = props.data.name + "-content";
+const contentData = {};
+for (let i = 0; i < tabData.length; ++i) {
+  contentData[tabData[i].name] = [];
+  for (let j = 0; j < 10; ++j) {
+    contentData[tabData[i].name].push({
+      width: 100,
+      height: 170,
+      marginRight: 10,
+      marginBottom: 10,
+      content: j + " " + tabData[i].name,
+      color: randomColor(),
+    });
+  }
+}
+function contentProvideData() {
+  return contentData[tabData[curTab].name];
+}
+function contentMeasures(item) {
+  return {
+    ...item,
+    bindSpatialNav: true,
+  };
+}
+function contentOnFocus(item) {
+  focusHub.setFocus(item.name);
+}
+function contentOnBlur(item) {
+  focusHub.returnFocusToParent();
+}
+function contentOnEdge(rect) {
+  if (rect.direction == EdgeDirection.top) {
+    focusHub.setFocus(tabName);
+  } else {
+    spatialNavProvider.moveTo(rect.direction);
+  }
+}
+
+const onFocus = (rect) => {
+  focusHub.setFocus(tabName);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <metro-widget
+    :name="tabName"
+    ref="tabRef"
+    :width="900"
+    :height="80"
+    :provideData="tabProvideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 10,
+      right: 10,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="tabMeasures"
+    :sendFocusRectEvent="true"
+    :onEdge="tabOnEdge"
+    :onFocusChange="tabOnFocusChange"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+
+  <metro-widget
+    :name="contentName"
+    ref="contentRef"
+    :top="100"
+    :width="900"
+    :height="200"
+    :provideData="contentProvideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 10,
+      right: 10,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="contentMeasures"
+    :sendFocusRectEvent="true"
+    :onEdge="contentOnEdge"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/SpatialNav/TripleSection/TripleSection.vue

@@ -0,0 +1,69 @@
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  HORIZONTAL,
+  useFocusHub,
+  METRO_WIDGET_CONST,
+} from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { onMounted, ref, shallowRef } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: Object,
+});
+
+const focusHub = useFocusHub();
+const mwWidget2 = ref(null);
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 4; i++) {
+    data.push({
+      width: 300,
+      height: 170,
+      name: "tripleSection" + i,
+      marginRight: 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 onFocus = (rect) => {
+  focusHub.setFocus(props.data.name);
+};
+
+props.onAction.register("onFocus", onFocus);
+</script>
+
+<template>
+  <metro-widget
+    :name="data.name"
+    :width="900"
+    :height="250"
+    :provideData="provideData"
+    :padding="{ left: 10, right: 10, top: 10, bottom: 10 }"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <widget-item :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/SpatialNav/TripleSection/WidgetItem.vue

@@ -0,0 +1,100 @@
+<script setup>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  useFocusHub,
+  EdgeDirection,
+  SPATIAL_NAV_PROVIDER_NAME,
+  ONEDGE_TYPE,
+} from "jsview";
+import { inject, ref } from "vue";
+import Item from "../Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: Object,
+});
+const focusHub = useFocusHub();
+
+const measures = (item) => {
+  return {
+    ...item,
+    bindSpatialNav: true,
+  };
+};
+const isFocused = ref(false);
+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 < 4; i++) {
+    data.push({
+      width: 100,
+      height: 150,
+      marginRight: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  console.log("myt onFocus", props.data.name);
+  focusHub.setFocus(props.data.name);
+  isFocused.value = true;
+};
+const onBlur = () => {
+  isFocused.value = false;
+  console.log("myt onBlur", props.data.name);
+};
+
+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>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: isFocused ? '#009900' : '#000099',
+    }"
+  ></div>
+  <metro-widget
+    :name="data.name"
+    :top="50"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 10,
+      right: 10,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :sendFocusRectEvent="true"
+    :onEdge="ONEDGE_TYPE.SPATIAL_NAV"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/SpatialNav/TvSection/List.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { VERTICAL, MetroWidget, useFocusHub, ONEDGE_TYPE } from "jsview";
+import { shallowRef } from "vue";
+import Item from "../Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: Object,
+});
+const focusHub = useFocusHub();
+const measures = (item) => {
+  return {
+    ...item,
+    bindSpatialNav: true,
+  };
+};
+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 < 5; i++) {
+    data.push({
+      width: 160,
+      height: 90,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (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>
+  <metro-widget
+    :name="data.name"
+    :width="180"
+    :height="600"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :sendFocusRectEvent="true"
+    :onEdge="ONEDGE_TYPE.SPATIAL_NAV"
+    :disableClip="true"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+</template>