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

package/DemoForOperator/LongChatBox/Bubble.vue

@@ -1,74 +1,111 @@
+<template>
+  <div
+    :style="{
+      top: -markdownTop,
+      width: visibleRect.width,
+      height: markdownHeight,
+      backgroundColor: backgroundColor,
+    }"
+  ></div>
+  <Markdown
+    ref="markdownRef"
+    :visibleRect="{ width: visibleRect.width, height: visibleRect.height }"
+    :content="''"
+    :enableLatex="false"
+    @sizechange="onSizeChange"
+  />
+</template>
+
 <script setup>
-import { TextManager } from "./TextManager";
-import { ref, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { JsvTextBox } from "@shijiu/jsview-vue";
+import { ref, shallowRef, onBeforeUnmount, onMounted } from "vue";
+import { Markdown } from "@shijiu/jsview-vue-plus";
 
-import VirtualList from "./VirtualList.vue";
+const text = ref("")
 
 const emit = defineEmits(["sizechange"]);
 const props = defineProps({
-  data: Array,
+  messages: Array,
   onDone: Function,
   left: Number,
   visibleRect: Object,
+  backgroundColor: String,
 });
 
-const listRef = shallowRef();
+//fake data generator
+const generateList = props.messages;
 
-function onAddLine(line) {
-  listRef.value.addItem(line.lineNumber, line);
+function* testMessageGenerator() {
+  for (const chunk of generateList) {
+    yield chunk;
+  }
 }
+const messageGen = testMessageGenerator();
 
-function onLineUpdate(line) {}
+const addText = () => {
+  const result = messageGen.next();
+  if (result.done) {
+    console.log("所有文本已写入完成");
+    markdownRef.value.writeDone();
+    props.onDone?.();
+    return false;
+  }
 
-function onLineUpdateDone(line) {
-  listRef.value.itemUpdateDone(line.lineNumber);
-}
+  text.value += result.value;
+
+  const chunk =
+    typeof result.value === "string"
+      ? result.value
+      : String(result.value ?? "");
+  markdownRef.value.write(chunk);
+  return true;
+};
 
-const textManager = new TextManager(
-  props.visibleRect.width,
-  onAddLine,
-  onLineUpdate,
-  onLineUpdateDone
-);
-const textRef = ref("");
-let intervalHandel = -1;
-function start() {
-  let currentIndex = 0;
-  intervalHandel = setInterval(() => {
-    if (currentIndex < props.data.length) {
-      textManager.addText(props.data[currentIndex], textRef);
-      currentIndex++;
-    } else {
-      clearInterval(intervalHandel);
-      textManager.stopUpdateLineManually();
-      props.onDone?.();
+let timeoutHandle = -1;
+const startTestMessage = () => {
+  const tick = () => {
+    if (!addText()) {
+      timeoutHandle = -1;
+      return;
     }
-  }, 50);
-}
+    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(() => {
-  clearInterval(intervalHandel);
+  stopTestMessage();
 });
 
 onMounted(() => {
-  start();
+  startTestMessage();
 });
 
 function show() {
-  listRef.value?.show();
+  markdownRef.value?.show();
 }
 
 function hide() {
-  listRef.value?.hide();
+  markdownRef.value?.hide();
 }
 
 function setVisibleRectStart(distance) {
-  listRef.value?.setVisibleRectStart(distance);
-}
-
-function onSizeChange(height) {
-  emit("sizechange", height);
+  markdownRef.value?.setVisibleStart(distance);
 }
 
 defineExpose({
@@ -77,28 +114,3 @@ defineExpose({
   setVisibleRectStart,
 });
 </script>
-
-<template>
-  <virtual-list
-    :layout="{
-      width: visibleRect.width,
-      height: visibleRect.height,
-      left: left,
-    }"
-    ref="listRef"
-    @sizechange="onSizeChange"
-  >
-    <template #="{ data }">
-      <jsv-text-box
-        :enableLatex="true"
-        syncDraw="sync"
-        :style="{
-          width: visibleRect.width,
-          ...data.style,
-        }"
-      >
-        {{ data.lineNumber + ":" + String(data.text) }}
-      </jsv-text-box>
-    </template>
-  </virtual-list>
-</template>

package/DemoForOperator/LongChatBox/LongChat.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { ref, reactive } from "vue";
-import { testMessage, data1 } from "./testData.js";
+import {
+  data1,
+  data2,
+  data3,
+} from "./testData.js";
 import Bubble from "./Bubble.vue";
 
 //可视范围的位置
@@ -10,17 +14,30 @@ let visibleStart = ref(0);
 let messageList = [];
 let renderList = reactive([]);
 let totalHeight = 0;
+let generating = false;
 
-function createMessageItem(key, data, left, top, width, height) {
+function createMessageItem(
+  key,
+  data,
+  left,
+  top,
+  width,
+  height,
+  backgroundColor
+) {
   let item = {
     key,
     data,
     left: ref(left),
     top: ref(top),
-    width: ref(width),
-    height: ref(height),
+    width: ref(width ?? 0),
+    height: ref(height ?? 0),
     ref: null,
-    onDone() {},
+    backgroundColor: backgroundColor,
+    onDone() {
+      generating = false;
+      console.log("onDone");
+    },
     onSizeChange(height) {
       this.height.value = height;
       arrangeLayout();
@@ -53,19 +70,22 @@ function arrangeLayout() {
     totalHeight += item.height.value;
   }
 }
+const viewWidth = 400;
+const viewHeight = 600;
 
 function updateRenderList() {
   renderList.length = 0;
   if (autoSlideMode) {
     //自动保持一行模式, 根据总高度和可视范围的高度, 计算出可视范围的开始位置
-    visibleStart.value = totalHeight > 600 ? totalHeight - 600 : 0;
+    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 + 600
+      item.top.value <= visibleStart.value + viewHeight
     ) {
       //可见的泡泡, 显示
       item.show();
@@ -78,35 +98,25 @@ function updateRenderList() {
   }
 }
 
-let count = 0;
-function addData() {
-  let item;
+const messages = [data1, data2, data3];
+function addData(message) {
   const lastItem = messageList[messageList.length - 1];
-  if (count++ % 3 == 1) {
-    item = createMessageItem(
-      count,
-      testMessage,
-      200,
-      lastItem ? lastItem.top.value + lastItem.height.value : 0,
-      800,
-      100
-    );
-  } else {
-    item = createMessageItem(
-      count,
-      data1,
-      0,
-      lastItem ? lastItem.top.value + lastItem.height.value : 0,
-      800,
-      100
-    );
-  }
+  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.min(Math.max(pos, 0), totalHeight - 600);
+  return Math.max(Math.min(pos, totalHeight - viewHeight), 0);
 }
 
 let autoSlideMode = true;
@@ -119,15 +129,27 @@ const onKeyDown = (ev) => {
       return true;
     case 40:
       visibleStart.value = normalizeSlidePos(visibleStart.value + 100);
-      if (visibleStart.value != totalHeight - 600) {
+      if (visibleStart.value != totalHeight - viewHeight) {
         autoSlideMode = false;
       } else {
         autoSlideMode = true;
       }
       updateRenderList();
       return true;
-    case 13:
-      addData();
+    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;
   }
   return false;
@@ -157,12 +179,13 @@ const onKeyDown = (ev) => {
         }"
       >
         <bubble
-          :data="item.data"
+          :messages="item.data"
           :onDone="item.onDone"
           :left="0"
+          :backgroundColor="item.backgroundColor"
           :visibleRect="{
-            width: 800,
-            height: 600,
+            width: viewWidth,
+            height: viewHeight,
           }"
           @sizechange="item.onSizeChange"
           :ref="item.onRef"
@@ -170,4 +193,12 @@ const onKeyDown = (ev) => {
       </div>
     </template>
   </div>
+  <div :style="{
+    top: 10,
+    left: 900,
+    width: 250,
+    height: 300,
+    color: '#fff',
+    fontSize: 20,
+  }">{{ "1键: 长文本\n2键: 中文本\n3键: 短文本" }}</div>
 </template>