@shijiu/jsview-vue-samples 2.1.482-test.0 → 2.2.128

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -6,7 +6,12 @@
  * @Description: file content
 -->
 <script setup>
-import { VERTICAL, MetroWidget, METRO_WIDGET_CONST, SeamlessSlide } from "jsview";
+import {
+  VERTICAL,
+  MetroWidget,
+  METRO_WIDGET_CONST,
+  SeamlessSlide,
+} from "jsview";
 import WidgetItem from "./WidgetItem.vue";
 import { shallowRef, watch, onBeforeUnmount } from "vue";
 
@@ -26,11 +31,17 @@ const props = defineProps({
 
 const widgetRef = shallowRef(null);
 
-const slideSetting = props.data.tabIndex == 0 ? new SeamlessSlide({
-  startPercent: 0.5,
-  endPercent: 0.5,
-  fixFirstPage: true,
-}) : new SeamlessSlide();
+const slideSetting =
+  props.data.tabIndex == 0
+    ? new SeamlessSlide({
+        startPercent: 0.5,
+        endPercent: 0.5,
+        fixFirstPage: true,
+      })
+    : new SeamlessSlide({
+        startPercent: 0.5,
+        endPercent: 0.5,
+      });
 
 const provideData = () => {
   return props.data.data;
@@ -52,8 +63,7 @@ const watcher = watch(
 
 onBeforeUnmount(() => {
   watcher();
-})
-
+});
 </script>
 
 <template>
@@ -77,4 +87,4 @@ onBeforeUnmount(() => {
       ></widget-item>
     </template>
   </metro-widget>
-</template>
+</template>

package/MetroWidgetDemos/SeamlessSlide/App.vue

@@ -0,0 +1,156 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  HORIZONTAL,
+  useFocusHub,
+  SeamlessSlide,
+  WholePageSlide,
+  EdgeDirection,
+  SlideSetting,
+} from "jsview";
+import Item from "./Item.vue";
+import Controller from "./Controller.vue";
+import { onMounted, ref } from "vue";
+
+const controller = ref(null);
+const widget = ref(null);
+const handler = {
+  widget,
+};
+window.testWidget = widget;
+
+const slideObj = {
+  headRange: 0.5,
+  tailRange: 0.5,
+};
+const defaultSlide = new SeamlessSlide(slideObj);
+
+const slide1 = new SeamlessSlide({
+  ...slideObj,
+  boundaryProtect: SlideSetting.START_PROTECT,
+});
+
+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 dataNumber = 35;
+const provideData = () => {
+  const data = [];
+
+  for (let i = 0; i < dataNumber; i++) {
+    data.push({
+      width: 90,
+      height: 50,
+      marginRight: 10,
+      color: randomColor(),
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    controller.value?.setFocusId(widget.value?.getCurrentFocusIndex());
+    focusHub.setFocus("myController");
+  }
+};
+
+const onBlur = () => {
+  widget.value?.setSlideSetting(slide1);
+};
+
+const onFocus = () => {
+  widget.value?.setSlideSetting(null);
+};
+
+const widgetLayout = {
+  left: 50,
+  top: 100,
+  width: 1000,
+  height: 50,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <div
+    :style="{
+      top: 20,
+      left: widgetLayout.left,
+      width: widgetLayout.width * slideObj.headRange,
+      height: 50,
+      backgroundColor: '#FF0000AA',
+      fontSize: 25,
+      color: '#ffffff',
+    }"
+  >
+    左键滚动区域
+  </div>
+  <div
+    :style="{
+      top: 20,
+      left: widgetLayout.left + widgetLayout.width * slideObj.tailRange,
+      width: widgetLayout.width * (1 - slideObj.tailRange),
+      height: 50,
+      backgroundColor: '#00FF00AA',
+      fontSize: 25,
+      color: '#ffffff',
+    }"
+  >
+    右键滚动区域
+  </div>
+  <metro-widget
+    ref="widget"
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onBlur="onBlur"
+    :onFocus="onFocus"
+    :slideSetting="defaultSlide"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <controller ref="controller" :number="dataNumber" :widgetHandler="handler" />
+</template>

package/MetroWidgetDemos/SeamlessSlide/ControlItem.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  controlCallback: Function,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  props.controlCallback(props.data);
+};
+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/MetroWidgetDemos/SeamlessSlide/Controller.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
+import ControlItem from "./ControlItem.vue";
+import { ref } from "vue";
+
+const widget = ref();
+const props = defineProps({
+  number: Number,
+  widgetHandler: Object,
+});
+
+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 provideData = () => {
+  const data = [];
+  const c = Math.ceil(props.number / 10);
+  for (let i = 0; i < c; ++i) {
+    data.push({
+      width: 200,
+      height: 50,
+      marginRight: 10,
+      color: randomColor(),
+      content: i * 10 + "-" + Math.min((i + 1) * 10 - 1, props.number -1),
+      start: i * 10,
+      end: Math.min((i + 1) * 10 - 1, props.number - 1),
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("mainMw");
+  }
+};
+
+const onBlur = () => {
+  if (!firstLock) {
+    props.widgetHandler.widget.value?.setFocusId(targetFocus, false, false);
+  }
+  firstLock = false;
+};
+
+let targetFocus = 0;
+const controlCallback = (data) => {
+  if (firstLock) {
+    firstLock = false;
+    return;
+  }
+  props.widgetHandler.widget.value?.slideTo(data.start * 100);
+  targetFocus = data.start;
+};
+
+let firstLock = false;
+const setFocusId = (id) => {
+  targetFocus = id;
+  firstLock = true;
+  widget.value.setEnterFocusId(Math.floor(id / 10));
+};
+
+defineExpose({
+  setFocusId,
+});
+</script>
+
+<template>
+  <metro-widget
+    ref="widget"
+    name="myController"
+    :left="50"
+    :top="200"
+    :width="1000"
+    :height="50"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onBlur="onBlur"
+  >
+    <template #renderItem="{ data, onAction }">
+      <control-item
+        :data="data"
+        :onAction="onAction"
+        :controlCallback="controlCallback"
+      />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/SeamlessSlide/Item.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } 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/MetroWidgetDemos/routeList.js

@@ -86,4 +86,16 @@ export default [
     component: () =>
       import("jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
   },
+  {
+    name: "剧集翻页",
+    path: "/metroWidget/SeamlessSlide",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
+  },
+  {
+    name: "多item分段显示",
+    path: "/metroWidget/MassiveItems",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
+  },
 ]

package/SceneTransition/App.vue

@@ -17,8 +17,8 @@
         ></JsvSceneTransition>
       </div>
       <!-- 文字说明 -->
-      <div class="text" :style="{ left: 20, top: 20 }">
-        {{ "操作说明：按【OK】键进行随机遮罩层碎片过渡效果。" }}
+      <div class="textLong" :style="{ left: 20, top: 20 }">
+        {{ "操作说明：按【下】键进行随机碎片下落过渡效果。按【上】键进行过渡还原。" }}
       </div>
       <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
       <div class="text" :style="{ left: 400, top: 500 }">
@@ -165,6 +165,14 @@ onBeforeUnmount(() => {
   line-height: 26;
   font-size: 24;
 }
+.textLong {
+  width: 560;
+  height: 80;
+  color: #ffffff;
+  font-weight: bold;
+  line-height: 26;
+  font-size: 24;
+}
 .bgStyle {
   width: 1280;
   height: 720;

package/ScrollBoxTest/App.vue

@@ -0,0 +1,160 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgSty">
+      <!-- 提示 -->
+      <div class="text" :style="{ left: 210, top: 20 }">
+        {{
+          "操作提示：\n触控进行左右拖拽\n点击进度条空白处游标直接跳过去\n按 返回 键退出"
+        }}
+      </div>
+      <div
+        class="logo-bg"
+        :style="{
+          left: 210,
+          top: 200,
+        }"
+      >
+        <!-- 三个背景色块 -->
+        <div class="bg1" />
+        <div class="bg2" />
+        <div class="bg3" />
+        <!-- 进度条 -->
+        <div :style="{ top: 80, left: 0 }">
+          <JsvScrollBox
+            ref="rJsvScrollBox"
+            :style="{
+              width: 800,
+              height: 84,
+            }"
+            :direction="HORIZONTAL"
+            :sliderSize="{
+              width: 84,
+            }"
+          >
+            <template #FixedBox="{ boxWidth, boxHeight }">
+              <div
+                :style="{
+                  width: boxWidth,
+                  height: boxHeight,
+                  lineHeight: boxHeight,
+                  backgroundColor: 'rgba(255,255,255,0.3)',
+                  borderRadius: Math.floor(boxHeight / 2),
+                  fontSize: Math.floor(boxHeight * 0.5),
+                  textAlign: 'center',
+                  color: 'rgba(0,0,0,1)',
+                }"
+              >
+                {{ `进度:${rPercentDisp}` }}
+              </div>
+            </template>
+            <template #SliderBox="{ boxWidth, boxHeight }">
+              <div
+                :style="{
+                  top: -15,
+                  left: -15,
+                  width: boxWidth + 30,
+                  height: boxHeight + 30,
+                  backgroundColor: 'rgba(255, 0,0,0.8)',
+                  borderRadius: Math.floor((boxHeight + 30) / 2),
+                }"
+                @click="fncOnClick"
+              />
+            </template>
+          </JsvScrollBox>
+        </div>
+        <!-- 图1说明 -->
+        <div :style="{ left: 0, top: 26 }" class="text">
+          {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { JsvScrollBox, HORIZONTAL } from "jsview";
+
+//进度百分比
+let myProgress = shallowRef(20);
+//按键事件 控制进度条的width
+const procKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      myProgress.value -= 5;
+      if (myProgress.value <= 0) {
+        myProgress.value = 0;
+      }
+      break;
+    case 39:
+      myProgress.value += 5;
+      if (myProgress.value >= 100) {
+        myProgress.value = 100;
+      }
+      break;
+    case 13:
+      myProgress.value = 0;
+      break;
+    default:
+      break;
+  }
+};
+
+let fncOnClick = () => {};
+
+let rJsvScrollBox = shallowRef(null);
+let rPercentDisp = shallowRef(0);
+
+onMounted(() => {
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+});
+</script>
+
+<style scoped>
+.bgSty {
+  background-color: #5490d1;
+  width: 1280;
+  height: 720;
+}
+.logo-bg {
+  width: 800;
+  height: 400;
+}
+.text {
+  width: 800;
+  height: 200;
+  font-size: 24;
+  font-weight: bold;
+  line-height: 32;
+  color: #ffffff;
+  text-align: center;
+}
+.bg1 {
+  left: 0;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #007f00;
+}
+.bg2 {
+  left: 267;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #3049b8;
+}
+.bg3 {
+  left: 534;
+  top: 0;
+  height: 400;
+  width: 266;
+  background-color: #d12b8c;
+}
+</style>