@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/MetroWidgetDemos/SpatialNav/Item.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 15:33:54
+ * @Description: file content
+-->
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: 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);
+
+onMounted(() => {
+});
+
+onUnmounted(() => {
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.05, 1.05, 1.05)' : '',
+      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/SpatialNav/SimpleFloor.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { HORIZONTAL, 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 < 10; i++) {
+    data.push({
+      width: 160,
+      height: 100,
+      marginRight: 10,
+      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"
+    :top="40"
+    :width="900"
+    :height="250"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 20,
+      right: 20,
+      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/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>