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

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>

package/Markdown/Bubble.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    :style="{
+      top: -markdownTop,
+      width: visibleRect.width,
+      height: markdownHeight,
+      backgroundColor: backgroundColor,
+    }"
+  ></div>
+  <Markdown
+    ref="markdownRef"
+    :visibleRect="{ width: visibleRect.width, height: visibleRect.height }"
+    :content="''"
+    @sizechange="onSizeChange"
+  />
+</template>
+
+<script setup>
+import { ref, shallowRef, onBeforeUnmount, onMounted } from "vue";
+import { Markdown } from "@shijiu/jsview-vue-plus";
+
+const emit = defineEmits(["sizechange"]);
+const props = defineProps({
+  messages: Array,
+  onDone: Function,
+  left: Number,
+  visibleRect: Object,
+  backgroundColor: String,
+});
+
+//fake data generator
+const generateList = props.messages;
+
+function* testMessageGenerator() {
+  for (const chunk of generateList) {
+    yield chunk;
+  }
+}
+const messageGen = testMessageGenerator();
+
+const addText = () => {
+  const result = messageGen.next();
+  if (result.done) {
+    console.log("所有文本已写入完成");
+    markdownRef.value.writeDone();
+    props.onDone?.();
+    return false;
+  }
+
+  const chunk = typeof result.value === "string" ? result.value : String(result.value ?? "");
+  markdownRef.value.write(chunk);
+  return true;
+};
+
+let timeoutHandle = -1;
+const startTestMessage = () => {
+  const tick = () => {
+    if (!addText()) {
+      timeoutHandle = -1;
+      return;
+    }
+    timeoutHandle = setTimeout(() => {
+      tick();
+    }, 80);
+  };
+  tick();
+};
+
+const stopTestMessage = () => {
+  clearTimeout(timeoutHandle);
+  timeoutHandle = -1;
+};
+
+const markdownRef = shallowRef();
+const markdownHeight = ref(0);
+const markdownTop = ref(0);
+let autoSlide = true;
+const onSizeChange = (width, height) => {
+  emit("sizechange", height);
+  markdownHeight.value = height;
+};
+
+onBeforeUnmount(() => {
+  stopTestMessage();
+});
+
+onMounted(() => {
+  startTestMessage();
+});
+
+function show() {
+  markdownRef.value?.show();
+}
+
+function hide() {
+  markdownRef.value?.hide();
+}
+
+function setVisibleRectStart(distance) {
+  markdownRef.value?.setVisibleStart(distance);
+}
+
+defineExpose({
+  show,
+  hide,
+  setVisibleRectStart,
+});
+
+</script>

package/Markdown/LongChat.vue

@@ -0,0 +1,216 @@
+<script setup>
+import { ref, reactive } from "vue";
+import {
+  testMessage2,
+  longLatexMessage,
+  nodeTestStream,
+  dollarTestStream,
+  sizeBugTestStream,
+} from "./data.js";
+import Bubble from "./Bubble.vue";
+
+//可视范围的位置
+let visibleStart = ref(0);
+
+//聊天泡泡的消息列表
+let messageList = [];
+let renderList = reactive([]);
+let totalHeight = 0;
+let generating = false;
+
+function createMessageItem(
+  key,
+  data,
+  left,
+  top,
+  width,
+  height,
+  backgroundColor
+) {
+  let item = {
+    key,
+    data,
+    left: ref(left),
+    top: ref(top),
+    width: ref(width ?? 0),
+    height: ref(height ?? 0),
+    ref: null,
+    backgroundColor: backgroundColor,
+    onDone() {
+      generating = false;
+      console.log("onDone");
+    },
+    onSizeChange(height) {
+      this.height.value = height;
+      arrangeLayout();
+      updateRenderList();
+    },
+    onRef(ref) {
+      this.ref = ref;
+    },
+    show() {
+      this.ref?.show();
+    },
+    hide() {
+      this.ref?.hide();
+    },
+  };
+  item.onDone = item.onDone.bind(item);
+  item.onSizeChange = item.onSizeChange.bind(item);
+  item.onRef = item.onRef.bind(item);
+  item.show = item.show.bind(item);
+  item.hide = item.hide.bind(item);
+  return item;
+}
+
+function arrangeLayout() {
+  //更新item的布局
+  totalHeight = 0;
+  for (let i = 0; i < messageList.length; i++) {
+    const item = messageList[i];
+    item.top.value = totalHeight;
+    totalHeight += item.height.value;
+  }
+}
+const viewWidth = 400;
+const viewHeight = 600;
+
+function updateRenderList() {
+  renderList.length = 0;
+  if (autoSlideMode) {
+    //自动保持一行模式, 根据总高度和可视范围的高度, 计算出可视范围的开始位置
+    visibleStart.value =
+      totalHeight > viewHeight ? totalHeight - viewHeight : 0;
+  }
+  for (let i = 0; i < messageList.length; i++) {
+    const item = messageList[i];
+    renderList.push(item);
+    if (
+      item.top.value + item.height.value >= visibleStart.value &&
+      item.top.value <= visibleStart.value + viewHeight
+    ) {
+      //可见的泡泡, 显示
+      item.show();
+      //此处要设置虚拟列表的可视范围的开始位置, 注意是转化为相对这个item的偏移量
+      item.ref?.setVisibleRectStart(visibleStart.value - item.top.value);
+    } else {
+      //不可见的泡泡, 隐藏
+      item.hide();
+    }
+  }
+}
+
+const messages = [longLatexMessage, dollarTestStream, testMessage2, nodeTestStream, sizeBugTestStream];
+function addData(message) {
+  const lastItem = messageList[messageList.length - 1];
+  const item = createMessageItem(
+    messageList.length,
+    message,
+    messageList.length % 2 == 0 ? 0 : 400,
+    lastItem ? lastItem.top.value + lastItem.height.value : 0,
+    800,
+    100,
+    messageList.length % 2 ? "#339933" : "#993333"
+  );
+  messageList.push(item);
+  updateRenderList();
+  generating = true;
+}
+
+function normalizeSlidePos(pos) {
+  return Math.max(Math.min(pos, totalHeight - viewHeight), 0);
+}
+
+let autoSlideMode = true;
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 38:
+      autoSlideMode = false;
+      visibleStart.value = normalizeSlidePos(visibleStart.value - 100);
+      updateRenderList();
+      return true;
+    case 40:
+      visibleStart.value = normalizeSlidePos(visibleStart.value + 100);
+      if (visibleStart.value != totalHeight - viewHeight) {
+        autoSlideMode = false;
+      } else {
+        autoSlideMode = true;
+      }
+      updateRenderList();
+      return true;
+    case 49:
+      if (!generating) {
+        addData(messages[0]);
+      }
+      return true;
+    case 50:
+      if (!generating) {
+        addData(messages[1]);
+      }
+      return true;
+    case 51:
+      if (!generating) {
+        addData(messages[2]);
+      }
+      return true;
+    case 52:
+      if (!generating) {
+        addData(messages[3]);
+      }
+      return true;
+    case 53:
+      if (!generating) {
+        addData(messages[4]);
+      }
+      return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  ></jsv-focus-block>
+  <div
+    :style="{
+      top: -visibleStart,
+    }"
+  >
+    <template v-for="item in renderList">
+      <div
+        :style="{
+          left: item.left,
+          top: item.top,
+          width: item.width,
+          height: item.height,
+          // backgroundColor: '#99999999',
+        }"
+      >
+        <bubble
+          :messages="item.data"
+          :onDone="item.onDone"
+          :left="0"
+          :backgroundColor="item.backgroundColor"
+          :visibleRect="{
+            width: viewWidth,
+            height: viewHeight,
+          }"
+          @sizechange="item.onSizeChange"
+          :ref="item.onRef"
+        ></bubble>
+      </div>
+    </template>
+  </div>
+  <div :style="{
+    top: 10,
+    left: 900,
+    width: 250,
+    height: 300,
+    color: '#fff',
+    fontSize: 20,
+  }">{{ "1键: latex + markdown\n2键: $格式latex\n3键: markdown\n4键: 图片表格测试\n5键: 尺寸获取bug测试" }}</div>
+</template>