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

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>