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

package/MetroWidgetDemos/slideSetting/App.vue

@@ -7,19 +7,38 @@
 import {
   MetroWidget,
   HORIZONTAL,
+  VERTICAL,
   useFocusHub,
   EdgeDirection,
   SeamlessSlide,
   WholePageSlide,
-  FixPositionSlide,
 } from "jsview";
 import Item from "./Item.vue";
-import { onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 const TAG = "MetroWidgetDemo";
 
 const focusHub = useFocusHub();
 
+// 以 720 为“屏高”对齐外部可视窗口：切到第 4 个样例时整体上移 720
+const SCREEN_HEIGHT = 720;
+const stageOffsetY = ref(0);
+
+// 外层“单屏窗口”一共两屏：stageOffsetY=0 显示 widget1~widget3，stageOffsetY=SCREEN_HEIGHT 显示 widget4
+const TOTAL_PAGES = 2;
+const currentPageIndex = ref(0); // 0: 第 1 屏，1: 第 2 屏
+const showUpTip = computed(() => currentPageIndex.value > 0);
+const showDownTip = computed(() => currentPageIndex.value < TOTAL_PAGES - 1);
+
+// 元素尺寸与间距（用于计算 MetroWidget 可容纳的列数/宽度）
+const ITEM_WIDTH = 60;
+const ITEM_HEIGHT = 60;
+const ITEM_MARGIN_RIGHT = 10;
+const ITEM_MARGIN_BOTTOM = 10;
+const HORIZONTAL_ITEM_COUNT = 10;
+// direction=HORIZONTAL 时，横向扩展主要由每列的 x 轴步长决定：width + marginRight
+const METRO_WIDGET_WIDTH = HORIZONTAL_ITEM_COUNT * (ITEM_WIDTH + ITEM_MARGIN_RIGHT);
+
 const randomColor = () => {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
   return (
@@ -30,10 +49,10 @@ const randomColor = () => {
 const data = [];
 for (let i = 0; i < 30; i++) {
   data.push({
-    width: 60,
-    height: 60,
-    marginRight: 10,
-    marginBottom: 10,
+    width: ITEM_WIDTH,
+    height: ITEM_HEIGHT,
+    marginRight: ITEM_MARGIN_RIGHT,
+    marginBottom: ITEM_MARGIN_BOTTOM,
     color: randomColor(),
     content: i,
   });
@@ -59,13 +78,9 @@ const widget1 = {
   widgetLayout: {
     left: 50,
     top: 50,
-    width: 350,
+    width: METRO_WIDGET_WIDTH,
     height: 140,
   },
-  slideSetting: new SeamlessSlide({
-    startPercent: 0.2,
-    endPercent: 0.8,
-  }),
 };
 
 const widget2 = {
@@ -90,7 +105,7 @@ const widget2 = {
   widgetLayout: {
     left: 50,
     top: 300,
-    width: 350,
+    width: METRO_WIDGET_WIDTH,
     height: 160,
   },
   slideSetting: new WholePageSlide(),
@@ -111,115 +126,289 @@ const widget3 = {
   onEdge: (edgeInfo) => {
     if (edgeInfo.direction == EdgeDirection.top) {
       focusHub.setFocus("widget2");
+    } else if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget4");
+      stageOffsetY.value = SCREEN_HEIGHT;
+      currentPageIndex.value = 1;
     }
   },
   widgetLayout: {
     left: 50,
     top: 550,
-    width: 350,
+    width: METRO_WIDGET_WIDTH,
+    height: 140,
+  },
+  // 使用无缝滚动，并通过 headRange/tailRange = 0.5 尽量让滚动居中
+  slideSetting: new SeamlessSlide({ headRange: 0.5, tailRange: 0.5 }),
+};
+
+const middleAimPosition = 0.5 - ITEM_WIDTH / 2 / METRO_WIDGET_WIDTH;
+
+const widget4 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget3");
+      stageOffsetY.value = 0;
+      currentPageIndex.value = 0;
+    } else if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget5");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    // 放在 widget3 和 widget4(原 widget4 -> widget5) 之间
+    top: 800,
+    width: METRO_WIDGET_WIDTH,
     height: 140,
   },
-  slideSetting: new FixPositionSlide({ fixPercent: 0.5 }),
+  // fixFirstPage=true，且 headRange/tailRange 走默认值
+  slideSetting: new SeamlessSlide({ fixFirstPage: true }),
 };
 
+const widget5 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget4");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 1050,
+    // 竖向滚轴：宽度固定为单列宽度，视觉更像日期滚轮
+    width: METRO_WIDGET_WIDTH,
+    height: 140,
+  },
+  // 关闭 boundaryProtect，让首尾边界可“越出” head/tail range，呈现更像日期调整的滚轴手感
+  slideSetting: new SeamlessSlide({
+    headRange: middleAimPosition, 
+    tailRange: middleAimPosition, 
+    boundaryProtect: 0 }),
+};
+
+const widget5Ref = ref(null);
+
 onMounted(() => {
   //组件mount后设置焦点
   focusHub.setFocus("widget1");
+  stageOffsetY.value = 0;
+  currentPageIndex.value = 0;
 });
 </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',
+      height: 720,
+      backgroundColor: '#007788',
+      overflow: 'hidden',
     }"
   >
-    {{ "无缝滚动" }}
-  </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"
-    :slideSetting="widget1.slideSetting"
-  >
-    <template #renderItem="{ data, onAction }">
-      <item :data="data" :onAction="onAction" />
-    </template>
-  </metro-widget>
+    <!-- 上/下边缘翻页提示：根据当前显示的页数自动显隐 -->
+    <div
+      v-if="showUpTip"
+      :style="{
+        top: 0,
+        left: 0,
+        width: 1280,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 22,
+        color: '#FFFFFF',
+        backgroundColor: '#00000088',
+      }"
+    >
+      {{ "<<可上翻页>>" }}
+    </div>
+    <div
+      v-if="showDownTip"
+      :style="{
+        left: 0,
+        width: 1280,
+        height: 50,
+        textAlign: 'center',
+        fontSize: 22,
+        color: '#FFFFFF',
+        backgroundColor: '#00000088',
+        top: SCREEN_HEIGHT - 30,
+      }"
+    >
+      {{ "<<可下翻页>>" }}
+    </div>
 
-  <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"
-    :slideSetting="widget2.slideSetting"
-  >
-    <template #renderItem="{ data, onAction }">
-      <item :data="data" :onAction="onAction" />
-    </template>
-  </metro-widget>
+    <!-- 外部“单屏窗口”舞台：切到第 4 个样例时整体上移 720（无动画） -->
+    <div
+      :style="{
+        top: -stageOffsetY,
+      }"
+    >
+      <div
+        :style="{
+          left: widget1.widgetLayout.left,
+          top: widget1.widgetLayout.top - 50,
+          width: 1280,
+          height: 50,
+          fontSize: 20,
+          color: '#FFFFFF',
+        }"
+      >
+        {{ "默认无缝左右滚动(head=0.3, tail=0.3)" }}
+      </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"
+        :slideSetting="widget1.slideSetting"
+      >
+        <template #renderItem="{ data, onAction }">
+          <item :data="data" :onAction="onAction" />
+        </template>
+      </metro-widget>
 
-  <div
-    :style="{
-      left: widget3.widgetLayout.left,
-      top: widget3.widgetLayout.top - 50,
-      width: 1280,
-      height: 50,
-      fontSize: 20,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ "焦点固定位置" }}
+      <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"
+        :slideSetting="widget2.slideSetting"
+      >
+        <template #renderItem="{ data, onAction }">
+          <item :data="data" :onAction="onAction" />
+        </template>
+      </metro-widget>
+
+      <div
+        :style="{
+          left: widget3.widgetLayout.left,
+          top: widget3.widgetLayout.top - 50,
+          width: 1280,
+          height: 50,
+          fontSize: 20,
+          color: '#FFFFFF',
+        }"
+      >
+        {{ "无缝左右滚动焦点尽量为居中(head=0.5, tail=0.5)" }}
+      </div>
+      <metro-widget
+        name="widget3"
+        :left="widget3.widgetLayout.left"
+        :top="widget3.widgetLayout.top"
+        :width="widget3.widgetLayout.width"
+        :height="widget3.widgetLayout.height"
+        :provideData="widget3.provideData"
+        :measures="widget3.measures"
+        :onEdge="widget3.onEdge"
+        :direction="HORIZONTAL"
+        :slideSetting="widget3.slideSetting"
+      >
+        <template #renderItem="{ data, onAction }">
+          <item :data="data" :onAction="onAction" />
+        </template>
+      </metro-widget>
+
+      <div
+        :style="{
+          left: widget4.widgetLayout.left,
+          top: widget4.widgetLayout.top - 50,
+          width: 1280,
+          height: 50,
+          fontSize: 20,
+          color: '#FFFFFF',
+        }"
+      >
+        {{ "第一屏不滚动的无缝滚动(fixFirstPage=true, head/tail 默认)" }}
+      </div>
+      <metro-widget
+        name="widget4"
+        :left="widget4.widgetLayout.left"
+        :top="widget4.widgetLayout.top"
+        :width="widget4.widgetLayout.width"
+        :height="widget4.widgetLayout.height"
+        :provideData="widget4.provideData"
+        :measures="widget4.measures"
+        :onEdge="widget4.onEdge"
+        :direction="HORIZONTAL"
+        :slideSetting="widget4.slideSetting"
+      >
+        <template #renderItem="{ data, onAction }">
+          <item :data="data" :onAction="onAction" />
+        </template>
+      </metro-widget>
+
+      <div
+        :style="{
+          left: widget5.widgetLayout.left,
+          top: widget5.widgetLayout.top - 50,
+          width: 1280,
+          height: 50,
+          fontSize: 20,
+          color: '#FFFFFF',
+        }"
+      >
+        {{ "无缝滚动(边界保护关闭, head/tail 调整)" }}
+      </div>
+      <metro-widget
+        name="widget5"
+        :ref="widget5Ref"
+        :left="widget5.widgetLayout.left"
+        :top="widget5.widgetLayout.top"
+        :width="widget5.widgetLayout.width"
+        :height="widget5.widgetLayout.height"
+        :provideData="widget5.provideData"
+        :measures="widget5.measures"
+        :onEdge="widget5.onEdge"
+        :direction="HORIZONTAL"
+        :slideSetting="widget5.slideSetting"
+      >
+        <template #renderItem="{ data, onAction }">
+          <item :data="data" :onAction="onAction" />
+        </template>
+      </metro-widget>
+    </div>
   </div>
-  <metro-widget
-    name="widget3"
-    :left="widget3.widgetLayout.left"
-    :top="widget3.widgetLayout.top"
-    :width="widget3.widgetLayout.width"
-    :height="widget3.widgetLayout.height"
-    :provideData="widget3.provideData"
-    :measures="widget3.measures"
-    :onEdge="widget3.onEdge"
-    :direction="HORIZONTAL"
-    :slideSetting="widget3.slideSetting"
-  >
-    <template #renderItem="{ data, onAction }">
-      <item :data="data" :onAction="onAction" />
-    </template>
-  </metro-widget>
 </template>

package/MetroWidgetDemos/zIndex/App.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @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 data = [];
+for (let i = 0; i < 10; ++i) {
+  data.push({
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: i,
+  });
+}
+
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const topOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus("bottomMw");
+  }
+};
+
+const bottomOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("topMw");
+  }
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("topMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <div :style="{
+    top: 20,
+    width: 1280,
+    height: 50,
+    fontSize: 30,
+    textAlign: 'center',
+    color: '#FFFFFF',
+  }">
+    未获焦时item保持放大，且层级正确，不被遮挡
+  </div>
+  <metro-widget
+    name="topMw"
+    :left="50"
+    :top="70"
+    :width="700"
+    :height="200"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :padding="{ left: 20, right: 20, top: 20, bottom: 20 }"
+    :onEdge="topOnEdge"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <metro-widget
+    name="bottomMw"
+    :left="50"
+    :top="250"
+    :width="700"
+    :height="200"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :padding="{ left: 20, right: 20, top: 20, bottom: 20 }"
+    :onEdge="bottomOnEdge"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/zIndex/Item.vue

@@ -0,0 +1,61 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const gazed = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+const onIgnore = () => {
+  gazed.value = false;
+};
+const onGaze = () => {
+  gazed.value = true;
+};
+
+const bgColor = computed(() => {
+  return focused.value ? "#FF0000" : gazed.value ? "#00FF00" : props.data.color;
+});
+const transform = computed(() => {
+  return gazed.value ? "scale3d(1.2, 1.2, 1.1)" : "";
+});
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+props.onAction.register("onIgnore", onIgnore);
+props.onAction.register("onGaze", onGaze);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#778800' : '#FFFFFF',
+      backgroundColor: bgColor,
+      transform: transform,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>