@shijiu/jsview-vue 0.9.766 → 0.9.783

package/samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection, useFocusHub } from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: 500,
+      height: 170,
+      name: "widget_" + i,
+      marginBottom: 10,
+      index: i,
+    });
+  }
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    /**重要代码: doSlide设置为false, 由子MetroWidget控制滚动 */
+    doSlide: false,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("mwWidget");
+});
+</script>
+
+<template>
+  <div :style="{ width: 1920, height: 1080, backgroundColor: '#007788' }" />
+  <div
+    :style="{
+      left: 100,
+      top: 20,
+      width: 600,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `MetroWidget的item是包含MetroWidget的组件` }}
+  </div>
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+  <metro-widget
+    name="mwWidget"
+    :top="140"
+    :left="50"
+    :width="660"
+    :height="600"
+    :provideData="provideData"
+    :padding="{ left: 30, right: 30 }"
+    :direction="VERTICAL"
+    :measures="measures"
+  >
+    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+    <template #renderItem="{ data, onAction, onItemEdge }">
+      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/{Advanced/widgets → focusableItemMetroWidget}/Item.vue

@@ -1,15 +1,6 @@
 <!--
  * @Author: ChenChanghua
- * @Date: 2022-11-01 15:30:14
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:11:54
- * @Description: file content
--->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-01 15:24:26
+ * @Date: 2023-03-09 15:33:54
  * @Description: file content
 -->
 <script setup>
@@ -17,31 +8,14 @@ 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;
@@ -66,14 +40,22 @@ props.onAction.register("onClick", onClick);
     }"
   >
     <div
-      ref="divRef"
+      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: '30px',
+        fontSize: 30,
         color: '#FFFFFF',
         backgroundColor: data.color,
-        borderRadius: '10px',
       }"
     >
       {{ data.content }}

package/samples/MetroWidgetDemos/{Advanced/widgets → focusableItemMetroWidget}/WidgetItem.vue

@@ -6,7 +6,6 @@ import Item from "./Item.vue";
 
 const props = defineProps({
   data: Object,
-  query: Object,
   onItemEdge: Function,
   onAction: Object,
 });
@@ -37,13 +36,15 @@ const provideData = () => {
   return data;
 };
 const onFocus = (rect) => {
-  //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
+  /** 重要代码: 参数rect为父MetroWidget传递的, 焦点过来的区域
+   *  因此需要调用setEnterFocusRect来设置焦点进入区域, 以寻找最近的焦点
+   */
   mwRef.value?.setEnterFocusRect(rect);
   focusHub.setFocus(props.data.name);
 };
 const onBlur = () => {
   //onBlur时需要返还焦点给父MetroWidget
-  mwRef.value?.getFocusBlockRef().returnFocusToParent();
+  focusHub.returnFocusToParent();
 };
 
 props.onAction.register("onFocus", onFocus);
@@ -61,15 +62,15 @@ props.onAction.register("onBlur", onBlur);
   >
     {{ data.name }}
   </div>
-  <!-- sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
-  <!-- onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <!-- 重要代码: sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- 重要代码: onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
   <metro-widget
     ref="mwRef"
-    :top="50"
     :name="data.name"
-    :provideData="provideData"
+    :top="50"
     :width="data.width"
     :height="data.height"
+    :provideData="provideData"
     :direction="HORIZONTAL"
     :padding="{
       left: 30,
@@ -81,8 +82,8 @@ props.onAction.register("onBlur", onBlur);
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >
-    <template #renderItem="{ data, query, onAction }">
-      <item :data="data" :query="query" :onAction="onAction" />
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
     </template>
   </metro-widget>
 </template>

package/samples/MetroWidgetDemos/focusableItemMix/App.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 15:31:53
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, EdgeDirection, useFocusHub } from "jsview";
+import ButtonItem from "./ButtonItem.vue";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+//item混排的回调
+const provideData = () => {
+  const advanceMix = [];
+  for (let i = 0; i < 20; i++) {
+    advanceMix.push({
+      width: 200,
+      height: 100,
+      name: "mix_button_" + i,
+      marginRight: 10,
+      marginBottom: 10,
+      type: i % 2 == 0 ? "button" : "item",
+      color: randomColor(),
+      content: i,
+    });
+  }
+  return advanceMix;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+
+const onEdge = (edgeInfo) => {};
+
+onMounted(() => {
+  focusHub.setFocus("mwMix");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 50,
+      top: 10,
+      width: 600,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "包含JsvFocusBlock的组件和纯描画组件混排" }}
+  </div>
+  <metro-widget
+    name="mwMix"
+    :top="100"
+    :left="50"
+    :provideData="provideData"
+    :width="600"
+    :height="400"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, onAction }">
+      <button-item
+        v-if="data.type == 'button'"
+        :data="data"
+        :onAction="onAction"
+      />
+      <item v-else :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/focusableItemMix/ButtonItem.vue

@@ -0,0 +1,86 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 14:19:01
+ * @Description: 一个简单的按左右键, 焦点在左右两个view来回切换的控件
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+import { useFocusHub } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+
+let focused = ref(false);
+let focusIndex = ref(0);
+const onFocus = () => {
+  /**重要代码: onFocus时, 获得焦点, 以处理自己内部的焦点逻辑*/
+  focusHub.setFocus(props.data.name);
+  /*******/
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+  focusIndex.value = 0;
+  /**重要代码: onBlur的时候, 需要将焦点返还给父*/
+  focusHub.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
+    :name="data.name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: 100,
+        height: 100,
+        fontSize: 20,
+        color: '#FFFFFF',
+        backgroundColor: '#00AA00',
+      }"
+    ></div>
+
+    <div
+      :style="{
+        left: 100,
+        width: 100,
+        height: 100,
+        backgroundColor: '#0000AA',
+      }"
+    ></div>
+
+    <div
+      :style="{
+        visibility: focused ? 'visible' : 'hidden',
+        left: 100 * focusIndex,
+        width: 10,
+        height: 10,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>

package/samples/MetroWidgetDemos/focusableItemMix/Item.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 15:05:27
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: 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);
+};
+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,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/samples/MetroWidgetDemos/index.js

@@ -0,0 +1,6 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 14:03:58
+ * @Description: file content
+ */
+export { default as metroWidgetRouteList } from "./routeList"

package/samples/MetroWidgetDemos/layoutType/App.vue

@@ -0,0 +1,180 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 16:15:45
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const widget1 = {
+  provideData: () => {
+    const data = [];
+    for (let i = 0; i < 30; i++) {
+      data.push({
+        width: 90,
+        height: 90,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: i,
+      });
+    }
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget2");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 50,
+    width: 500,
+    height: 200,
+  },
+};
+
+const widget2 = {
+  provideData: () => {
+    const data = [];
+    for (let i = 0; i < 30; i++) {
+      const p = Math.floor(i / 3);
+      let left, top;
+      if (i % 3 == 0) {
+        left = p * 200;
+        top = 50;
+      } else if (i % 3 == 1) {
+        left = p * 200 + 100;
+        top = 0;
+      } else if (i % 3 == 2) {
+        left = p * 200 + 100;
+        top = 100;
+      }
+      data.push({
+        left,
+        top,
+        width: 90,
+        height: 90,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: i,
+      });
+    }
+    return data;
+  },
+  measures: (data) => {
+    return {
+      left: data.left,
+      top: data.top,
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget1");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 300,
+    width: 500,
+    height: 220,
+  },
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("widget1");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <div
+    :style="{
+      left: widget1.widgetLayout.left,
+      top: widget1.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "根据尺寸自动布局" }}
+  </div>
+  <metro-widget
+    name="widget1"
+    :left="widget1.widgetLayout.left"
+    :top="widget1.widgetLayout.top"
+    :width="widget1.widgetLayout.width"
+    :height="widget1.widgetLayout.height"
+    :provideData="widget1.provideData"
+    :measures="widget1.measures"
+    :onEdge="widget1.onEdge"
+    :direction="HORIZONTAL"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: widget2.widgetLayout.left,
+      top: widget2.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "绝对坐标布局" }}
+  </div>
+  <metro-widget
+    name="widget2"
+    :left="widget2.widgetLayout.left"
+    :top="widget2.widgetLayout.top"
+    :width="widget2.widgetLayout.width"
+    :height="widget2.widgetLayout.height"
+    :provideData="widget2.provideData"
+    :measures="widget2.measures"
+    :onEdge="widget2.onEdge"
+    :direction="HORIZONTAL"
+    layoutType="absolute"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/layoutType/Item.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    ref="divRef"
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>