@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/LongText/LongTextScroll.vue

@@ -6,7 +6,7 @@ import {
   JsvFlexDiv,
   VERTICAL,
   JsvScrollBox,
-  ScrollStyle,
+  ScrollBoxStyle,
 } from "jsview";
 
 const props = defineProps({
@@ -48,7 +48,7 @@ const onAction = {
         case 38:
           if (textY !== 0) {
             text_y = textY + props.step >= 0 ? 0 : textY + props.step;
-            SlideToYByKey(text_y);
+            slideToYByKey(text_y);
           }
           break;
         case 40:
@@ -57,7 +57,7 @@ const onAction = {
               textY - props.step <= props.style.height - textTotalHeight
                 ? props.style.height - textTotalHeight
                 : textY - props.step;
-            SlideToYByKey(text_y);
+            slideToYByKey(text_y);
           } else {
             focusHub.setFocus("button");
           }
@@ -73,35 +73,37 @@ const onAction = {
   },
 };
 
-function SlideToYByKey(newY) {
+function slideToYByKey(newY) {
   // 使用新的Y来调整ScrollBox的显示位置
   rJsvScrollBox.value.updatePercent(
     -newY / (textTotalHeight - props.style.height)
   );
 
-  // 记录新的Y, 并更新右边的进度条
-  UpdateRightBar(newY);
+  recordTextY(newY);
+
+  // 不再直接更新右边进度条的进度
+  // 将由 JsvScrollBox 的syncWith机制来同步
+  // 注意: 目前这个机制在PC上没有模拟，
+  // 如果PC上也需要看到同步效果，则可通过 window.JsView 是否存在来识别非盒子情况，此时主动改变bar的top
 }
 
-function UpdateRightBar(newY) {
+function recordTextY(newY) {
+  // 记录text Y，为为下次按键的基准坐标
   textY = newY;
-
-  scrollY.value =
-    (-newY / (textTotalHeight - props.style.height)) *
-    (props.scrollStyle.height - props.scrollBlockStyle.height);
 }
 
 onMounted(() => {
   rootRef.value.requestFocus();
+
+  // 检测滚动触控触发的移动，
+  // 当 updatePercent 调用后如果移动距离大于阈值也会回调
   rJsvScrollBox.value.setSensor((percent, x, y) => {
     let newY = Math.floor(y);
     console.log(
-      `onProgress dragged percent=${percent} \
-x=${Math.floor(x)} \
-y=${newY}`
+      `onProgress dragged percent=${percent} x=${Math.floor(x)} y=${newY}`
     );
-    UpdateRightBar(newY);
-  }, 15);
+    recordTextY(newY);
+  }, 15 /* 每动15px才接收一次通知，减少js被调用的频率，从而减小对性能的影响 */);
 });
 </script>
 
@@ -110,12 +112,14 @@ y=${newY}`
     <div :style="{ overflow: 'hidden', ...style }">
       <jsv-scroll-box
         ref="rJsvScrollBox"
+        linkName="ScrollBoxTextArea"
+        syncWith="ScrollBarTextArea"
         :style="{
           width: style.width,
           height: style.height,
         }"
         :direction="VERTICAL"
-        :mode="ScrollStyle.DrawerMode"
+        :mode="ScrollBoxStyle.DrawerMode"
         :enableFling="true"
         :sliderSize="{
           height: rScrollHeight == 0 ? style.height : rScrollHeight,
@@ -235,10 +239,6 @@ y=${newY}`
         </template>
       </jsv-scroll-box>
     </div>
-    <Scroll
-      :top="scrollY"
-      :scrollStyle="scrollStyle"
-      :scrollBlockStyle="scrollBlockStyle"
-    />
+    <Scroll :scrollStyle="scrollStyle" :scrollBlockStyle="scrollBlockStyle" />
   </jsv-focus-block>
 </template>

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/MetroWidgetDemos/itemSizeUpdate/backward/Item.vue

@@ -33,7 +33,7 @@ const duration = 200;
 let timeoutHandler = -1;
 
 const animInfo = {
-  anchor: 0,
+  anchor: props.query.index == 28 ? undefined : 0,
   duration: duration,
   onEnd: () => {
     console.log("resize end", props.query.index);

package/MetroWidgetDemos/routeList.js

@@ -7,95 +7,95 @@ export default [
   {
     name: "基础示例",
     path: "/metroWidget/basic",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/basic/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/basic/App.vue"),
   },
   {
     name: "direction",
     path: "/metroWidget/direction",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/direction/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/direction/App.vue"),
   },
   {
     name: "padding",
     path: "/metroWidget/padding",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/padding/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/padding/App.vue"),
   },
   {
     name: "slideSetting",
     path: "/metroWidget/slideSetting",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/slideSetting/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/slideSetting/App.vue"),
   },
   {
     name: "layoutType",
     path: "/metroWidget/layoutType",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/layoutType/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/layoutType/App.vue"),
   },
   {
     name: "嵌套(基础)",
     path: "/metroWidget/focusableItemBasic",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemBasic/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemBasic/App.vue"),
   },
   {
     name: "嵌套(混合)",
     path: "/metroWidget/focusableItemMix",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemMix/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemMix/App.vue"),
   },
   {
     name: "嵌套(MetroWidget)",
     path: "/metroWidget/focusableItemMetroWidget",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue"),
   },
   {
     name: "乒乓模式",
     path: "/metroWidget/PingPong",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/PingPong/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/PingPong/App.vue"),
   },
   {
     name: "性能测试",
     path: "/metroWidget/PerformanceTest",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue"),
   },
   {
     name: "骨架图",
     path: "/metroWidget/SkeletonDiagram",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/SkeletonDiagram/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/SkeletonDiagram/App.vue"),
   },
   {
     name: ".9焦点页面",
     path: "/metroWidget/ninePatchFocusPage",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/ninePatchFocusPage/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/ninePatchFocusPage/App.vue"),
   },
   {
     name: "item尺寸更新",
     path: "/metroWidget/itemSizeUpdate",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
   },
   {
     name: "三层嵌套",
     path: "/metroWidget/TripleWidget",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/TripleWidget/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/TripleWidget/App.vue"),
   },
   {
     name: "数据刷新demo",
     path: "/metroWidget/RefreshDemo",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
   },
   {
     name: "剧集翻页",
     path: "/metroWidget/SeamlessSlide",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
   },
   {
     name: "多item分段显示",
     path: "/metroWidget/MassiveItems",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
   },
 ]

package/MindMap/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from "vue"
+import { onMounted, shallowRef } from "vue"
 import { JsvMindMap, useFocusHub } from "jsview";
 import Item from "./Item.vue";
 import { data } from "./data"
@@ -9,6 +9,7 @@ const provideData = () => {
 };
 
 const focusHub = useFocusHub();
+const widgetRef = shallowRef();
 
 const lineColor = {
   0: "#ff0000",
@@ -31,20 +32,27 @@ const formatNode = (item, depth) => {
       backgroundColor: lineColor[depth],
       lineWidth: 3,
     },
+    enableTap: true,
   };
 };
 const onEdge = (info) => {
   console.log("onEdge ", info);
 };
 
+function onMove(pos) {
+  console.log("onMove", pos)
+}
+
 const componentName = "mindMapDemo";
 onMounted(() => {
   focusHub.setFocus(componentName);
+  widgetRef.value?.setSensor(onMove)
 })
 </script>
 
 <template>
   <jsv-mind-map
+    ref="widgetRef"
     :name="componentName"
     :left="200"
     :top="100"
@@ -53,6 +61,7 @@ onMounted(() => {
     :formatNode="formatNode"
     :provideData="provideData"
     :onEdge="onEdge"
+    :touchFlag="1"
   >
     <template v-slot="{ data, onAction, handler }">
       <item :data="data" :onAction="onAction" :handler="handler"></item>