@shijiu/jsview-vue-samples 1.9.747

package/MetroWidgetDemos/Advanced/App.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 14:51:40
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection, useFocusHub } from "jsview";
+import { useRouter } from "vue-router";
+import Buttons from "./Buttons.vue";
+import Mixed from "./Mixed.vue";
+import Widgets from "./widgets/Widgets.vue";
+
+const router = useRouter();
+const focusHub = useFocusHub();
+
+const onFocus = () => {
+  focusHub.setFocus("mwButton");
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <buttons></buttons>
+    <mixed></mixed>
+    <widgets></widgets>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -0,0 +1,90 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:26:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 15:37:33
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } 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 = shallowRef(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/MetroWidgetDemos/Advanced/Buttons.vue

@@ -0,0 +1,70 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 09:49:59
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { advanceButton } from "../data";
+import ButtonItem from "./ButtonItem.vue";
+
+const focusHub = useFocusHub();
+
+//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) {
+    focusHub.setFocus("mwWidget");
+  } else if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus("mwMix");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 50,
+      top: 20,
+      width: 300,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `item可以是可获得焦点的控件` }}
+  </div>
+  <metro-widget
+    name="mwButton"
+    :top="120"
+    :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>
+</template>

package/MetroWidgetDemos/Advanced/Mixed.vue

@@ -0,0 +1,77 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 15:37:40
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { advanceMix } from "../data";
+import ButtonItem from "./ButtonItem.vue";
+import Item from "../Item.vue";
+
+const focusHub = useFocusHub();
+
+//item混排的回调
+const provideData = () => {
+  return advanceMix;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus("mwWidget");
+  } else if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("mwButton");
+  }
+};
+</script>
+
+<template>
+  <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="provideData"
+    :width="260"
+    :height="440"
+    :padding="{
+      top: 20,
+      left: 20,
+    }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <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>
+</template>

package/MetroWidgetDemos/Advanced/widgets/Item.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-11-01 15:30:14
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 15:39:17
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-01 15:24:26
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+const focusSize = inject("focusSize");
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+  if (focusSize) {
+    divRef.value?.getBoundingClientRect().then(
+      (data) => {
+        focusSize.width = data.width;
+        focusSize.height = data.height;
+        focusSize.left = data.left;
+        focusSize.top = data.top;
+      },
+      (error) => {
+        console.log("get absolute position failed", error);
+      }
+    );
+  }
+};
+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
+      ref="divRef"
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+        borderRadius: '10px',
+        animation: animation,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/Advanced/widgets/WidgetItem.vue

@@ -0,0 +1,89 @@
+
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { ref, shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  query: 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) => {
+  //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  mwRef.value?.getFocusBlockRef().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"
+    :top="50"
+    :name="data.name"
+    :provideData="provideData"
+    :width="data.width"
+    :height="data.height"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 30,
+      right: 30,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :slideSetting="seamlessSlide"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, query, onAction }">
+      <item :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/Advanced/widgets/Widgets.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 15:35:12
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  EdgeDirection,
+  JsvNinePatch,
+  useFocusHub,
+} from "jsview";
+import { advanceMetroWidget } from "../../data";
+import WidgetItem from "../widgets/WidgetItem.vue";
+import focusImg from "./focus1.png";
+import { ref, shallowRef, reactive, provide } from "vue";
+
+const focusHub = useFocusHub();
+const showFocus = ref(false);
+
+const provideData = () => {
+  return advanceMetroWidget;
+};
+
+const onFocus = () => {
+  console.log("testtest", " widget onfocus");
+  showFocus.value = true;
+};
+
+const onBlur = () => {
+  showFocus.value = false;
+};
+
+const focusSize = reactive({
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+});
+provide("focusSize", focusSize);
+
+// measures中会返回doSlide: false, 既MetroWidget自身不处理滚动, 滚动由子的sendFocusRectEvent控制
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    doSlide: false,
+  };
+};
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus("mwButton");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 500,
+      top: 20,
+      width: 500,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
+  </div>
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+  <metro-widget
+    name="mwWidget"
+    :top="100"
+    :left="400"
+    :provideData="provideData"
+    :width="660"
+    :height="600"
+    :padding="{ left: 30, right: 30 }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+  >
+    <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
+    <template #renderItem="{ data, query, onAction, onItemEdge }">
+      <widget-item
+        :data="data"
+        :query="query"
+        :onAction="onAction"
+        :onItemEdge="onItemEdge"
+      />
+    </template>
+  </metro-widget>
+  <jsv-nine-patch
+    v-show="showFocus"
+    :style="{
+      width: focusSize.width,
+      height: focusSize.height,
+      top: focusSize.top,
+      left: focusSize.left,
+    }"
+    :imageUrl="focusImg"
+    :imageWidth="55"
+    :centerWidth="1"
+    :borderOutset="13"
+    :imageDspWidth="55"
+    :animTime="0.2"
+    :waitForInit="true"
+  ></jsv-nine-patch>
+</template>

package/MetroWidgetDemos/Item.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-01 15:24:26
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+const focusSize = inject("focusSize");
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+  if (focusSize) {
+    divRef.value?.getBoundingClientRect().then(
+      (data) => {
+        console.log("testtest focus size", data)
+        focusSize.width = data.width;
+        focusSize.height = data.height;
+        focusSize.left = data.left;
+        focusSize.top = data.top;
+      },
+      (error) => {
+        console.log("testtest abs failed", error);
+      }
+    );
+  }
+};
+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
+      ref="divRef"
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>