@shijiu/jsview-vue-samples 2.2.128 → 2.2.201

package/LongText/Scroll.vue

@@ -1,14 +1,33 @@
-<script setup>
-defineProps({
+<script setup lang="ts">
+import { VERTICAL, JsvScrollBox, SeamlessSlide, ScrollBoxStyle } from "jsview";
+
+let rProps = defineProps({
   scrollStyle: Object,
-  top: Number,
   scrollBlockStyle: Object,
 });
+
+let { left: cScrollLeft, ...cScrollSubStyle } = rProps.scrollStyle as any;
 </script>
 <template>
-  <div :style="{ ...scrollStyle }">
-    <div :style="{ top: top }">
-      <div :style="{ ...scrollBlockStyle }"></div>
-    </div>
-  </div>
-</template>
+  <jsv-scroll-box
+    linkName="ScrollBarTextArea"
+    syncWith="ScrollBoxTextArea"
+    :style="{
+      left: cScrollLeft,
+      width: cScrollSubStyle.width,
+      height: cScrollSubStyle.height,
+    }"
+    :direction="VERTICAL"
+    :mode="ScrollBoxStyle.PinMode"
+    :sliderSize="{
+      height: (rProps.scrollBlockStyle as any).height,
+    }"
+  >
+    <template #FixedBox>
+      <div :style="{ ...cScrollSubStyle }" />
+    </template>
+    <template #SliderBox>
+      <div :style="{ ...rProps.scrollBlockStyle }" />
+    </template>
+  </jsv-scroll-box>
+</template>

package/MetroWidgetDemos/RefreshDemo/App.vue

@@ -1,13 +1,36 @@
 <script setup>
-import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import {
+  MetroWidget,
+  VERTICAL,
+  HORIZONTAL,
+  useFocusHub,
+  EdgeDirection,
+} from "jsview";
 import Item from "./Item.vue";
+import ControlItem from "./ControlItem.vue";
 import { onMounted, shallowRef } from "vue";
 import { useRouter } from "vue-router";
-import data from "./data.js";
+import imageUrl from "./assets/imageList.json";
 
-const data1 = data.slice(0, 20);
-const data2 = data.slice(0, 40);
-const data3 = data.slice(0, 60);
+let freshToken = 0;
+const prepareData = (data, w, h, start, end, contentPrefix = "test") => {
+  for (let i = start; i < end; ++i) {
+    data.push({
+      jsvKey: i + "_" + freshToken,
+      width: w,
+      height: h,
+      url: imageUrl[i],
+      index: i,
+      content: contentPrefix + "_" + i,
+    });
+  }
+};
+
+const data1 = [];
+const data2 = [];
+prepareData(data2, 200, 200, 0, 40);
+const data3 = [];
+prepareData(data3, 200, 200, 0, 60);
 
 const router = useRouter();
 const focusHub = useFocusHub();
@@ -21,13 +44,6 @@ const measures = (item) => {
   };
 };
 
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1);
-  }
-  return true;
-};
-
 let curData = data1;
 const provideData = () => {
   return curData;
@@ -38,64 +54,164 @@ onMounted(() => {
   setTimeout(() => {
     curData = data2;
     widgetRef.value.refreshData();
-
     setTimeout(() => {
       curData = data3;
       widgetRef.value.refreshData();
-    }, 100);
-  }, 100);
+    }, 1000);
+  }, 1000);
 });
 
 const widgetRef = shallowRef();
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus("control");
+  }
+};
+
+//controller
+const controlList = [
+  {
+    name: "追加",
+    callback: () => {
+      if (curData.length + 20 < imageUrl.length) {
+        prepareData(curData, 200, 200, curData.length, curData.length + 20);
+        widgetRef.value.refreshData();
+      }
+    },
+  },
+  {
+    name: "全部替换",
+    callback: () => {
+      freshToken++;
+      const data = [];
+      prepareData(data, 200, 100, 0, 60);
+      curData = data;
+      widgetRef.value.refreshData();
+    },
+  },
+  {
+    name: "刷新第5个item",
+    callback: () => {
+      if (curData.length > 5) {
+        freshToken++;
+        let oldItem = curData[5];
+        curData[5] = {
+          ...oldItem,
+          jsvKey: 5 + "_" + freshToken,
+          content: Math.round(Math.random() * 100) + "",
+        };
+        widgetRef.value.refreshData();
+      }
+    },
+  },
+  // {
+  //   name: "新数据旧id:不刷新",
+  //   callback: () => {
+  //     const data = [];
+  //     prepareData(data, 200, 200, 0, curData.length);
+  //     data.forEach((i, index) => {
+  //       i.jsvKey = curData[index].jsvKey;
+  //     });
+  //     curData = data;
+  //     widgetRef.value.refreshData();
+  //   },
+  // },
+  {
+    name: "同尺寸新数据:刷新",
+    callback: () => {
+      freshToken++;
+      const data = [];
+      prepareData(data, 200, 200, 0, curData.length > 0 ? curData.length : 40);
+      curData = data;
+      widgetRef.value.refreshData();
+    },
+  },
+  {
+    name: "刷新为空数据",
+    callback: () => {
+      freshToken++;
+      const data = [];
+      curData = data;
+      widgetRef.value.refreshData();
+    },
+  },
+];
+const controlWidgetMeasure = (data) => {
+  return {
+    width: 300,
+    height: 50,
+    marginBottom: 10,
+  };
+};
+const controlWidgetProvideData = () => {
+  return controlList;
+};
+const controlOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus("myFocusWidget");
+  }
+};
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
+  <div
     :style="{
       width: 1920,
       height: 1080,
       backgroundColor: '#007788',
     }"
-    :onKeyDown="onKeyDown"
+  ></div>
+  <metro-widget
+    ref="widgetRef"
+    name="myFocusWidget"
+    :top="100"
+    :left="50"
+    :width="1000"
+    :height="550"
+    :direction="VERTICAL"
+    :provideData="provideData"
+    :measures="measures"
+    :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
+    :enableItemRenderBreak="true"
+    :onEdge="onEdge"
+    :placeHolderSetting="{
+      backgroundColor: 'rgba(78,105,127, 0.8)',
+      focusBackgroundColor: '#770088aa',
+      borderRadius: 10,
+      gap: 10,
+    }"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <item :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <metro-widget
+    name="control"
+    :left="1100"
+    :top="50"
+    :width="300"
+    :height="500"
+    :direction="HORIZONTAL"
+    :provideData="controlWidgetProvideData"
+    :measures="controlWidgetMeasure"
+    :onEdge="controlOnEdge"
+  >
+    <template #renderItem="{ data, onAction }">
+      <control-item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: 50,
+      top: 50,
+      width: 800,
+      height: 200,
+      color: '#FFFFFF',
+      fontSize: 30,
+    }"
   >
-    <metro-widget
-      ref="widgetRef"
-      name="myFocusWidget"
-      :top="100"
-      :left="50"
-      :width="1000"
-      :height="550"
-      :direction="VERTICAL"
-      :provideData="provideData"
-      :measures="measures"
-      :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
-      :enableItemRenderBreak="true"
-      :placeHolderSetting="{
-        backgroundColor: 'rgba(78,105,127, 0.8)',
-        focusBackgroundColor: '#770088aa',
-        borderRadius: 10,
-        gap: 10,
-      }"
-    >
-      <template #renderItem="{ data, query, onEdge, onAction }">
-        <item
-          :data="data"
-          :query="query"
-          :onEdge="onEdge"
-          :onAction="onAction"
-        />
-      </template>
-    </metro-widget>
-  </jsv-focus-block>
-  <div :style="{
-    left: 50,
-    top: 50,
-    width: 800,
-    height: 200,
-    color: '#FFFFFF',
-    fontSize: 30
-  }">
-    起来时会刷新两次数据, 看起来无闪烁即可
+    起来时先是无数据, 1s后有数据, 再1s后刷新, 无报错, 无闪烁即可
   </div>
 </template>

package/MetroWidgetDemos/RefreshDemo/ControlItem.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+let focused = ref(false);
+
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  props.data.callback();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 300,
+      height: 50,
+      backgroundColor: focused ? '#444444' : '#778800',
+      fontSize: 30,
+      color: '#ffffff',
+    }"
+  >
+    {{ data.name }}
+  </div>
+</template>

package/MetroWidgetDemos/RefreshDemo/Item.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { JsvPosterImage, JsvPosterDiv } from "jsview";
 
 const props = defineProps({
@@ -31,6 +31,10 @@ const onClicked = () => {
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClicked);
+
+onMounted(() => {
+  console.log("item mounted", props.data.index);
+});
 </script>
 
 <template>
@@ -52,8 +56,7 @@ props.onAction.register("onClick", onClicked);
         backgroundColor: '#770088',
         borderRadius: 10,
       }"
-    >
-    </div>
+    ></div>
     <div v-if="query.index % 2 == 0">
       <jsv-poster-image
         :style="{
@@ -112,5 +115,18 @@ props.onAction.register("onClick", onClicked);
         {{ "div" }}
       </div>
     </div>
+
+    <div
+      :style="{
+        top: 50,
+        width: data.width,
+        height: 40,
+        backgroundColor: '#444444aa',
+        fontSize: 30,
+        color: '#ffffff',
+      }"
+    >
+      {{ data.content }}
+    </div>
   </div>
-</template>
+</template>

package/SceneTransition/JsvSceneTransition.vue

@@ -98,61 +98,49 @@ const randomSelect = () => {
 const sag = () => {
   centerItemArray.forEach((item, index) => {
     if (center.x - item.x <= Math.abs(60)) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(16, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(16, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x <= 200) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(8, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(8, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x <= 500) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(-8, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(-8, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x > 500) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(-16, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(-16, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x < -60) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(20, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(20, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([
-            controlArray[index].action().stopMoving(),
-          ]),
+          .then([cmds.action().stopMoving()]),
       ]);
     }
     //给所有运动物体创建onNexusEvent条件以便召回
-    controlArray[index].run([
-      controlArray[index]
+    controlArray[index].run((cmds) => [
+      cmds
         .condition()
         .onNexusEvent(interactNexus, 1001 + index)
         .then([
@@ -171,16 +159,16 @@ const sag = () => {
 
 const fireNeEvent = () => {
   controlArray.forEach((item, index) => {
-    item.run([
-      item.action().stopMoving(),
-      item.state().fireNexusEvent(interactNexus, 1001 + index),
+    item.run((cmds) => [
+      cmds.action().stopMoving(),
+      cmds.state().fireNexusEvent(interactNexus, 1001 + index),
     ]);
   });
 };
 //往回恢复的函数
 const recover = (index) => {
-  controlArray[index].run([
-    controlArray[index]
+  controlArray[index].run((cmds) => [
+    cmds
       .action()
       .moveTo(
         0,
@@ -189,9 +177,9 @@ const recover = (index) => {
           Math.abs(recallArray[index].y),
         recallArray[index].y / 15,
         () => {
-          controlArray[index].run([
-            controlArray[index].action().teleportTo(0, 0),
-            controlArray[index].state().clearAllConditions(),
+          controlArray[index].run((cmds) => [
+            cmds.action().teleportTo(0, 0),
+            cmds.state().clearAllConditions(),
           ]);
         }
       ),

package/ScrollBoxTest/App.vue

@@ -11,57 +11,17 @@
         class="logo-bg"
         :style="{
           left: 210,
-          top: 200,
+          top: 160,
         }"
       >
-        <!-- 三个背景色块 -->
+        <!-- 三个背景色块,用来确认进度条的透明度 -->
         <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>
+        <SizeDivBar :top="80" :left="0" />
+        <ClipBar :top="210" :left="0" />
+        <NinePatchBar :top="340" :left="0" />
         <!-- 图1说明 -->
         <div :style="{ left: 0, top: 26 }" class="text">
           {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
@@ -73,48 +33,37 @@
 
 <script setup>
 import { shallowRef, onMounted } from "vue";
-import { JsvScrollBox, HORIZONTAL } from "jsview";
+import NoBackgroundBar from "./NoBackgroundBar.vue";
+import ClipBar from "./ClipBar.vue";
+import NinePatchBar from "./NinePatchBar.vue";
+import SizeDivBar from "./SizeDivBar.vue";
 
-//进度百分比
-let myProgress = shallowRef(20);
-//按键事件 控制进度条的width
+// //进度百分比
+// 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;
-  }
+  //   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);
-});
+onMounted(() => {});
 </script>
 
 <style scoped>
@@ -139,21 +88,21 @@ y=${Math.floor(y)}`
 .bg1 {
   left: 0;
   top: 0;
-  height: 400;
+  height: 500;
   width: 267;
   background-color: #007f00;
 }
 .bg2 {
   left: 267;
   top: 0;
-  height: 400;
+  height: 500;
   width: 267;
   background-color: #3049b8;
 }
 .bg3 {
   left: 534;
   top: 0;
-  height: 400;
+  height: 500;
   width: 266;
   background-color: #d12b8c;
 }