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

package/JsvLine/App.vue

@@ -16,60 +16,75 @@
 </template>
 
 <script setup>
+import { shallowRef, onMounted, onBeforeUnmount } from "vue"
 import { JsvLine } from "jsview"
 import bg from "./bgimage.jpg"
 
-const startPos1={
-    x:340,
-    y:40
+const startPos1 = {
+    x: 340,
+    y: 40
 }
-const endPos1={
-    x:340,
-    y:160
+const endPos1 = {
+    x: 340,
+    y: 160
 }
 
-const startPos2={
-    x:840,
-    y:150
-}
-const endPos2={
-    x:1040,
-    y:50
-}
+// 修改为响应式并定时切换
+const states = [
+    { start: { x: 840, y: 150 }, end: { x: 1040, y: 50 } },
+    { start: { x: 840, y: 150 }, end: { x: 1140, y: 100 } }
+];
+const startPos2 = shallowRef({ ...states[0].start });
+const endPos2 = shallowRef({ ...states[0].end });
+
+let posIndex = 0;
+let timer = null;
+
+onMounted(() => {
+    timer = setInterval(() => {
+        posIndex = (posIndex + 1) % states.length;
+        startPos2.value = { ...states[posIndex].start };
+        endPos2.value = { ...states[posIndex].end };
+    }, 1500);
+});
+onBeforeUnmount(() => {
+    clearInterval(timer);
+});
 
-const startPos3={
-    x:340,
-    y:300
+// 其它样例保持不变
+const startPos3 = {
+    x: 340,
+    y: 300
 }
-const endPos3={
-    x:560,
-    y:400
+const endPos3 = {
+    x: 560,
+    y: 400
 }
 
-const startPos4={
-    x:760,
-    y:400
+const startPos4 = {
+    x: 760,
+    y: 400
 }
-const endPos4={
-    x:980,
-    y:300
+const endPos4 = {
+    x: 980,
+    y: 300
 }
 
-const startPos5={
-    x:240,
-    y:550
+const startPos5 = {
+    x: 240,
+    y: 550
 }
-const endPos5={
-    x:500,
-    y:520
+const endPos5 = {
+    x: 500,
+    y: 520
 }
-const startPos6={
-    x:840,
-    y:520
+const startPos6 = {
+    x: 840,
+    y: 520
 }
-const endPos6={
-    x:1100,
-    y:550
+const endPos6 = {
+    x: 1100,
+    y: 550
 }
 </script>
 

package/LatexDemo/App.vue

@@ -10,6 +10,8 @@ const baseStyle = {
 
 //TODO 此字符串直接写在双花括号内编译出错, 待调查
 const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
+
+const testText = `测试\\textcolor{#FF0000}{{红色}试花括号{ 文字 }}文字`
 </script>
 
 <template>
@@ -19,7 +21,7 @@ const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
     :style="{ top: 50, ...baseStyle }"
     class="textStyle"
   >
-    {{ "测试\\textcolor{#FF0000}{红色}文字" }}
+    {{ testText }}
   </jsv-text-box>
   <jsv-text-box
     :enableLatex="true"

package/LatexFormula/App.vue

@@ -78,8 +78,189 @@ const stringList = [
 
 这个角的正切值是 \\(0.75\\)，余切值是 \\(1.33333333\\)。`,
   },
+  {
+    width: 1100,
+    detail: '说明：超长的公式文本不会描画',
+    str: `
+    测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\`,
+  },
 ];
 const dataIndex = ref(0);
+const testDetail = ref("");
 const width = computed(() => {
   return stringList[dataIndex.value].width;
 });
@@ -90,6 +271,10 @@ const latexStr = computed(() => {
   return processLatexStr(s);
 });
 
+const detail = computed(() => {
+  return stringList[dataIndex.value].detail || '';
+});
+
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 37:
@@ -117,6 +302,17 @@ const onKeyDown = (ev) => {
       backgroundColor: '#007788',
     }"
   ></jsv-focus-block>
+  <div
+    :style="{
+      width: 320,
+      left: 1280 - 320,
+      top: 30,
+      height: 200,
+      fontSize: 20,
+    }"
+  >
+    {{ detail }}
+  </div>
   <jsv-latex
     :key="dataIndex"
     :latexStr="latexStr"

package/LongImage/App.vue

@@ -4,7 +4,7 @@
  * 带下拉条的长图片展示样例
  *
  * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
+ * MetroWidget：见MetroWidget.vue的头说明
  *
  * 【技巧说明】
  * Q: 如何让图片的高度自适应？

package/LongImage/LongImageScroll.vue

@@ -1,7 +1,13 @@
 <script setup>
 import Scroll from "./Scroll.vue";
 import { ref, shallowRef, onMounted } from "vue";
-import { useFocusHub } from "jsview";
+import {
+  useFocusHub,
+  JsvFlexDiv,
+  VERTICAL,
+  JsvScrollBox,
+  ScrollBoxStyle,
+} from "jsview";
 
 const props = defineProps({
   step: Number,
@@ -11,41 +17,51 @@ const props = defineProps({
   imageSrc: String,
 });
 
-const focusHub = useFocusHub();
-const element = shallowRef(null);
+
+const rootRef = ref(null);
+const element = ref(null);
 const scrollY = ref(0);
-const textY = ref(0);
+
+const focusHub = useFocusHub();
+
+let imageY = 0;
+let rScrollHeight = shallowRef(0);
+let rJsvScrollBox = shallowRef(null);
+let imageTotalHeight = 0;
+let underKeyOperation = false; // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+const onSizeReady = (width, height) => {
+  imageTotalHeight = height;
+  rScrollHeight.value = height;
+  console.log(`size ready width=${width} height=${height}`);
+};
+
 const onAction = {
   onKeyDown: (ev) => {
-    const valid =
-      element.value &&
-      element.value.clientHeight &&
-      element.value.clientHeight > props.style.height;
+    const valid = element.value && imageTotalHeight > 0;
     // let keyUsed = true;
     if (valid) {
-      let text_y;
+      // 测试用比对代码，正式场景不需要
+      // if (imageTotalHeight != element.value.clientHeight) {
+      //   console.error("Error: height miss match");
+      // }
+
+      let image_y;
       switch (ev.keyCode) {
         case 38:
-          if (textY.value !== 0) {
-            text_y =
-              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (element.value.clientHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          if (imageY !== 0) {
+            image_y = imageY + props.step >= 0 ? 0 : imageY + props.step;
+            slideToYByKey(image_y);
           }
+          underKeyOperation = true;
           break;
         case 40:
-          if (textY.value !== props.style.height - element.value.clientHeight) {
-            text_y =
-              textY.value - props.step <=
-              props.style.height - element.value.clientHeight
-                ? props.style.height - element.value.clientHeight
-                : textY.value - props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (element.value.clientHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          if (imageY !== props.style.height - imageTotalHeight) {
+            image_y =
+              imageY - props.step <= props.style.height - imageTotalHeight
+                ? props.style.height - imageTotalHeight
+                : imageY - props.step;
+            slideToYByKey(image_y);
+            underKeyOperation = true;
           } else {
             focusHub.setFocus("button");
           }
@@ -53,35 +69,84 @@ const onAction = {
       }
     }
   },
-  onFocus: () => {
-    console.log("LongImageScroll getFocus");
-  },
-  onBlur: () => {
-    console.log("LongImageScroll loseFocus");
+  onKeyUp: () => {
+    underKeyOperation = false;
   },
 };
+function slideToYByKey(newY) {
+  // 使用新的Y来调整ScrollBox的显示位置
+  rJsvScrollBox.value.updatePercent(
+    -newY / (imageTotalHeight - props.style.height)
+  );
 
-const onLoad = () => {
-  // 图片加载完成的回调
-  console.log("Image loaded!");
-};
+  recordY(newY);
+
+  // 不再直接更新右边进度条的进度
+  // 将由 JsvScrollBox 的syncWith机制来同步
+  // 注意: 目前这个机制在PC上没有模拟，
+  // 如果PC上也需要看到同步效果，则可通过 window.JsView 是否存在来识别非盒子情况，此时主动改变bar的top
+}
+
+function recordY(newY) {
+  // 记录text Y，为为下次按键的基准坐标
+  imageY = newY;
+}
 
 onMounted(() => {
-  focusHub.setFocus("longImageScroll");
+  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}`
+    );
+    if (!underKeyOperation) {
+      // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+      // 以规避, 当按键操作的设置动作频率快于渲染端响应调整值并通过Sensor反馈的频率时
+      // 例如当两次由按键发起的更新位置处理都执行后, 第一次的位置调整才被Sensor反馈, 导致第三次动作的位置基础会被回设为第一次的位置的问题
+      // 从而会引发进度条来回抖动
+      recordY(newY);
+    }
+  }, 15 /* 每动15px才接收一次通知，减少js被调用的频率，从而减小对性能的影响 */);
 });
 </script>
 
-
 <template>
-  <jsv-focus-block name="longImageScroll" :onAction="onAction">
+  
+  <jsv-focus-block ref="rootRef" name="longImageScroll" :onAction="onAction">
     <div :style="{ overflow: 'hidden', ...style }">
-      <img
-        alt=""
-        ref="element"
-        :src="imageSrc"
-        :style="{ top: textY, width: style.width }"
-        :onLoad="onLoad"
-      />
+      <jsv-scroll-box
+        ref="rJsvScrollBox"
+        linkName="ScrollBoxTextArea"
+        syncWith="ScrollBarTextArea"
+        :style="{
+          width: style.width,
+          height: style.height,
+        }"
+        :direction="VERTICAL"
+        :mode="ScrollBoxStyle.DrawerMode"
+        :enableFling="true"
+        :sliderSize="{
+          height: rScrollHeight == 0 ? style.height : rScrollHeight,
+        }"
+        :enableMouseWheel="true"
+      >
+        <template #SliderBox>
+          <jsv-flex-div
+            :style="{ width: style.width }"
+            :onSized="onSizeReady"
+          >
+            <img
+              alt=""
+              ref="element"
+              :src="imageSrc"
+              :style="{ top: imageY, width: style.width }"
+            />
+          </jsv-flex-div>
+        </template>
+      </jsv-scroll-box>
     </div>
     <Scroll
       :top="scrollY"
@@ -89,4 +154,4 @@ onMounted(() => {
       :scrollBlockStyle="scrollBlockStyle"
     />
   </jsv-focus-block>
-</template>
+</template>

package/LongImage/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/LongText/LongTextScroll.vue

@@ -27,6 +27,7 @@ let textY = 0;
 let rScrollHeight = shallowRef(0);
 let rJsvScrollBox = shallowRef(null);
 let textTotalHeight = 0;
+let underKeyOperation = false; // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
 const onTextSizeReady = (width, height) => {
   textTotalHeight = height;
   rScrollHeight.value = height;
@@ -50,6 +51,7 @@ const onAction = {
             text_y = textY + props.step >= 0 ? 0 : textY + props.step;
             slideToYByKey(text_y);
           }
+          underKeyOperation = true;
           break;
         case 40:
           if (textY !== props.style.height - textTotalHeight) {
@@ -58,6 +60,7 @@ const onAction = {
                 ? props.style.height - textTotalHeight
                 : textY - props.step;
             slideToYByKey(text_y);
+            underKeyOperation = true;
           } else {
             focusHub.setFocus("button");
           }
@@ -65,6 +68,9 @@ const onAction = {
       }
     }
   },
+  onKeyUp: (ev) => {
+    underKeyOperation = false;
+  },
   onFocus: () => {
     console.log("LongTextScroll getFocus");
   },
@@ -102,7 +108,13 @@ onMounted(() => {
     console.log(
       `onProgress dragged percent=${percent} x=${Math.floor(x)} y=${newY}`
     );
-    recordTextY(newY);
+    if (!underKeyOperation) {
+      // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+      // 以规避, 当按键操作的设置动作频率快于渲染端响应调整值并通过Sensor反馈的频率时
+      // 例如当两次由按键发起的更新位置处理都执行后, 第一次的位置调整才被Sensor反馈, 导致第三次动作的位置基础会被回设为第一次的位置的问题
+      // 从而会引发进度条来回抖动
+      recordTextY(newY);
+    }
   }, 15 /* 每动15px才接收一次通知，减少js被调用的频率，从而减小对性能的影响 */);
 });
 </script>
@@ -124,6 +136,7 @@ onMounted(() => {
         :sliderSize="{
           height: rScrollHeight == 0 ? style.height : rScrollHeight,
         }"
+        :enableMouseWheel="true"
       >
         <template #SliderBox>
           <jsv-flex-div

package/Markdown/App.vue

@@ -0,0 +1,36 @@
+<script setup>
+import LongChat from "./LongChat.vue";
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#666',
+    }"
+  >
+    <div :style="{
+      width: 1280,
+      height: 30,
+      left: 50,
+      top: 10,
+      backgroundColor: '#666',
+      fontSize: 20,
+      color: '#fff',
+    }">
+      按ok键添加对话框，按上下键滚动
+    </div>
+    <div
+      :style="{
+        top: 70,
+        left: 50,
+        width: 1280,
+        height: 600,
+        overflow: 'hidden',
+      }"
+    >
+      <LongChat />
+    </div>
+  </div>
+</template>