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

package/DemoForOperator/LongChatBox/Bubble.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { TextManager } from "./TextManager";
+import { ref, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { JsvTextBox } from "@shijiu/jsview-vue";
+
+import VirtualList from "./VirtualList.vue";
+
+const emit = defineEmits(["sizechange"]);
+const props = defineProps({
+  data: Array,
+  onDone: Function,
+  left: Number,
+  visibleRect: Object,
+});
+
+const listRef = shallowRef();
+
+function onAddLine(line) {
+  listRef.value.addItem(line.lineNumber, line);
+}
+
+function onLineUpdate(line) {}
+
+function onLineUpdateDone(line) {
+  listRef.value.itemUpdateDone(line.lineNumber);
+}
+
+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?.();
+    }
+  }, 50);
+}
+
+onBeforeUnmount(() => {
+  clearInterval(intervalHandel);
+});
+
+onMounted(() => {
+  start();
+});
+
+function show() {
+  listRef.value?.show();
+}
+
+function hide() {
+  listRef.value?.hide();
+}
+
+function setVisibleRectStart(distance) {
+  listRef.value?.setVisibleRectStart(distance);
+}
+
+function onSizeChange(height) {
+  emit("sizechange", height);
+}
+
+defineExpose({
+  show,
+  hide,
+  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

@@ -0,0 +1,173 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { testMessage, data1 } from "./testData.js";
+import Bubble from "./Bubble.vue";
+
+//可视范围的位置
+let visibleStart = ref(0);
+
+//聊天泡泡的消息列表
+let messageList = [];
+let renderList = reactive([]);
+let totalHeight = 0;
+
+function createMessageItem(key, data, left, top, width, height) {
+  let item = {
+    key,
+    data,
+    left: ref(left),
+    top: ref(top),
+    width: ref(width),
+    height: ref(height),
+    ref: null,
+    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;
+  }
+}
+
+function updateRenderList() {
+  renderList.length = 0;
+  if (autoSlideMode) {
+    //自动保持一行模式, 根据总高度和可视范围的高度, 计算出可视范围的开始位置
+    visibleStart.value = totalHeight > 600 ? totalHeight - 600 : 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.show();
+      //此处要设置虚拟列表的可视范围的开始位置, 注意是转化为相对这个item的偏移量
+      item.ref?.setVisibleRectStart(visibleStart.value - item.top.value);
+    } else {
+      //不可见的泡泡, 隐藏
+      item.hide();
+    }
+  }
+}
+
+let count = 0;
+function addData() {
+  let item;
+  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
+    );
+  }
+  messageList.push(item);
+  updateRenderList();
+}
+
+function normalizeSlidePos(pos) {
+  return Math.min(Math.max(pos, 0), totalHeight - 600);
+}
+
+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 - 600) {
+        autoSlideMode = false;
+      } else {
+        autoSlideMode = true;
+      }
+      updateRenderList();
+      return true;
+    case 13:
+      addData();
+      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
+          :data="item.data"
+          :onDone="item.onDone"
+          :left="0"
+          :visibleRect="{
+            width: 800,
+            height: 600,
+          }"
+          @sizechange="item.onSizeChange"
+          :ref="item.onRef"
+        ></bubble>
+      </div>
+    </template>
+  </div>
+</template>

package/DemoForOperator/LongChatBox/TextManager.ts

@@ -0,0 +1,147 @@
+/**
+ * 处理流式文本的分行
+ */
+import {
+  TypeTransitionApi,
+  StyleTransitionApi2,
+  TextTransitionApi,
+} from "./utile";
+import { reactive, ref, Ref, shallowRef, ShallowRef } from "vue";
+
+interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface LineInfo {
+  type: "text" | "horizontalLine";
+  text: Ref<string>;
+  style: unknown;
+  rect: Rect;
+  lineNumber: number;
+}
+
+export class TextManager {
+  public lines: LineInfo[] = [];
+  public updatingLine: LineInfo | null = null;
+  public currentLineStyle: any = {};
+  private textWidth: number = 0;
+  private onAddLine: Function = (line: LineInfo) => {};
+  private onLineUpdatDone: Function = (line: LineInfo) => {};
+  private onLineUpdate: Function = (line: LineInfo) => {};
+
+  constructor(
+    textWidth: number,
+    onAddLine: (line: LineInfo) => void,
+    onLineUpdate: (line: LineInfo) => void,
+    onLineUpdatDone: (line: LineInfo) => void,
+  ) {
+    this.textWidth = textWidth;
+    this.onAddLine = onAddLine;
+    this.onLineUpdatDone = onLineUpdatDone;
+    this.onLineUpdate = onLineUpdate;
+  }
+
+  public addText(textSlice: string, textRef: Ref<string>) {
+    if (!this.updatingLine) {
+      const type = TypeTransitionApi(textSlice);
+      this.currentLineStyle = StyleTransitionApi2(textSlice);
+      let left = 0,
+        top = 0;
+      if (this.lines.length > 0) {
+        const lastLine = this.lines[this.lines.length - 1];
+        left = lastLine.rect.left;
+        top = lastLine.rect.top + lastLine.rect.height;
+      }
+      this.updatingLine = this.newLine();
+    }
+
+    // 检查是否有换行符
+    if (textSlice.match(/(\r\n|\n|\r)/)) {
+      // 将文本按换行符分割
+      const parts = textSlice.split(/(\r\n|\n|\r)/);
+      // 只处理第一部分（换行符之前的内容）
+      if (parts.length > 0 && parts[0]) {
+        this.updatingLine.text.value += parts[0];
+      }
+
+      // 完成当前行并添加到lines数组
+      this.commitLine();
+
+      // 如果换行符后还有内容，为下一行创建新的行对象
+      if (parts.length > 2 && parts[2]) {
+        const nextType = TypeTransitionApi(parts[2]);
+        const nextStyle = StyleTransitionApi2(parts[2]);
+
+        this.updatingLine = this.newLine(parts[2]);
+      } else {
+        // 如果换行符后没有内容，将updatingLine设为null，等待下一次addText调用
+        this.updatingLine = null;
+      }
+
+      textRef.value = this.updatingLine?.text.value ?? "";
+      return;
+    }
+    // 没有换行符，直接添加到当前行
+    this.updatingLine.text.value += textSlice;
+    if (this.updatingLine.text.value.length > 33) {
+      const preText = this.updatingLine.text.value.slice(0, 33);
+      const nextText = this.updatingLine.text.value.slice(33);
+      this.updatingLine.text.value = preText;
+      this.commitLine();
+      this.updatingLine = this.newLine(nextText);
+    } else {
+      this.onLineUpdate(this.updatingLine);
+    }
+    textRef.value = this.updatingLine?.text.value ?? "";
+  }
+
+  public stopUpdateLineManually() {
+    if (this.updatingLine) {
+      this.commitLine();
+      this.updatingLine = null;
+    }
+  }
+
+  public updateLineHeight(height: number) {
+    if (this.updatingLine) {
+      console.log(
+        "ccht updateLineHeight",
+        this.updatingLine.lineNumber,
+        height
+      );
+      this.updatingLine.rect.height = height;
+    }
+  }
+
+  private commitLine() {
+    if (this.updatingLine) {
+      //做 markdown 的替换
+      this.updatingLine.text.value = TextTransitionApi(
+        this.updatingLine.text.value
+      );
+      this.lines.push(this.updatingLine);
+      this.updatingLine = null;
+      this.onLineUpdatDone(this.lines[this.lines.length - 1]);
+    }
+  }
+
+  private newLine(text: string = "") {
+    const line = {
+      type: "text" as const,
+      text: ref(text),
+      style: this.currentLineStyle,
+      rect: {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+      },
+      lineNumber: this.lines.length,
+    };
+    this.onAddLine(line);
+    return line;
+  }
+}

package/DemoForOperator/LongChatBox/VirtualList.vue

@@ -0,0 +1,298 @@
+<script>
+/**
+ * 虚拟列表, 超出可以范围的元素会被隐藏
+ */
+let IdToken = 0;
+</script>
+<script setup>
+import { JsvFlexDiv } from "jsview";
+import { ref, shallowRef, reactive, computed } from "vue";
+
+const emit = defineEmits(["sizechange"]);
+
+const props = defineProps({
+  layout: {
+    type: Object,
+    default: () => ({
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0,
+    }),
+  },
+  initVisibleStart: {
+    type: Number,
+    default: 0,
+  },
+});
+const renderList = reactive([]);
+const visibleStart = ref(props.initVisibleStart);
+const totalContentWidth = ref(props.layout.width);
+const totalContentHeight = ref(0);
+let isVisible = true;
+//默认自动显示最后一行, 外部调用 slideTo 后不再自动移动
+let enableAutoSlide = true;
+let itemList = [];
+
+class ItemInfo {
+  constructor(customKey, id, customData, tmpTop) {
+    this.id = id;
+    this.customKey = customKey;
+    this.layout = {
+      left: 0,
+      top: tmpTop,
+      width: 0,
+      height: 0,
+    };
+    this.data = customData;
+    this.onSize = this._onSize.bind(this);
+    this.done = this._done.bind(this);
+    this._onSizeCalled = false;
+    this._updateDone = false;
+  }
+
+  _onSize(width, height) {
+    this.layout.width = width;
+    this.layout.height = height;
+    onItemSizeUpdate(this.id);
+    updateRenderList();
+    this._onSizeCalled = true;
+  }
+
+  _done() {
+    this._updateDone = true;
+  }
+
+  isStatic() {
+    return this._updateDone && this._onSizeCalled;
+  }
+}
+
+function onItemSizeUpdate(id) {
+  //更新itemlayout
+  let start = 0;
+  for (let i = 0; i < itemList.length; i++) {
+    const item = itemList[i];
+    if (item.id >= id) {
+      item.layout.top = start;
+    }
+    start += item.layout.height;
+  }
+  totalContentHeight.value = start;
+  emit("sizechange", totalContentHeight.value);
+}
+
+const EXTRA_RECT = 100;
+function updateRenderList() {
+  renderList.splice(0);
+  if (!isVisible) {
+    return;
+  }
+  if (enableAutoSlide) {
+    let h = 0;
+    for (let i = itemList.length - 1; i >= 0; --i) {
+      const item = itemList[i];
+      renderList.unshift(item);
+      h += item.layout.height;
+      if (h >= props.layout.height + EXTRA_RECT) {
+        break;
+      }
+    }
+    visibleStart.value = Math.max(
+      totalContentHeight.value - props.layout.height,
+      0
+    );
+  } else {
+    for (let i = 0; i < itemList.length; i++) {
+      const item = itemList[i];
+      if (
+        (item.layout.top + item.layout.height >=
+          visibleStart.value - EXTRA_RECT &&
+          item.layout.top <= visibleStart.value + props.layout.height) ||
+        (item.layout.top > visibleStart.value + props.layout.height &&
+          !item.isStatic()) // 未更新完高度的需要继续描画, 以获取其size
+      ) {
+        renderList.push(item);
+      }
+    }
+  }
+}
+
+function addItem(key, data) {
+  const curLastItemPos =
+    itemList.length > 0
+      ? itemList[itemList.length - 1].layout.top +
+        itemList[itemList.length - 1].layout.height
+      : 0;
+  const item = new ItemInfo(key, IdToken++, data, curLastItemPos);
+  itemList.push(item);
+  updateRenderList();
+  return item;
+}
+
+function itemUpdateDone(key) {
+  // 通过key找到对应的item，并调用其done方法
+  const item = itemList.find((item) => item.customKey === key);
+  if (item) {
+    item.done();
+  }
+}
+
+function totalSizeOnUpdate(width, height) {
+  // totalContentHeight.value = height;
+}
+
+function slideTo(position) {
+  visibleStart.value = position;
+  updateRenderList();
+}
+
+function goUp(distance) {
+  let newPos = Math.max(visibleStart.value - distance, 0);
+  if (visibleStart.value != newPos) {
+    enableAutoSlide = false;
+  }
+  slideTo(newPos);
+}
+
+function goDown(distance) {
+  let newPos;
+  if (
+    visibleStart.value + distance >=
+    totalContentHeight.value - props.layout.height
+  ) {
+    enableAutoSlide = true;
+    newPos = totalContentHeight.value - props.layout.height;
+  } else {
+    enableAutoSlide = false;
+    newPos = visibleStart.value + distance;
+  }
+  slideTo(newPos);
+}
+
+const prePlaceHolderHeight = computed(() => {
+  if (renderList.length > 0) {
+    return renderList[0].layout.top;
+  } else {
+    //为0时, jsv-flex-div排版有问题
+    return totalContentHeight.value === 0 ? 1 : totalContentHeight.value;
+  }
+});
+
+const postPlaceHolderHeight = computed(() => {
+  if (renderList.length > 0) {
+    return (
+      totalContentHeight.value -
+      renderList[renderList.length - 1].layout.top -
+      renderList[renderList.length - 1].layout.height
+    );
+  } else {
+    return 1;
+  }
+});
+
+/**
+ * 获取虚拟列表的总高度
+ * @returns 
+ */
+function getTotalHeight() {
+  return totalContentHeight.value;
+}
+
+/**
+ * 隐藏
+ */
+function hide() {
+  if (isVisible) {
+    isVisible = false;
+    updateRenderList();
+  }
+}
+
+/**
+ * 显示
+ */
+function show() {
+  if (!isVisible) {
+    isVisible = true;
+    updateRenderList();
+  }
+}
+
+/**
+ * 设置可视范围的开始位置
+ * @param pos 
+ */
+function setVisibleRectStart(pos) {
+  const endPos = totalContentHeight.value - props.layout.height;
+  let newPos = Math.min(endPos, Math.max(pos, 0));
+  if (newPos == visibleStart.value) {
+    return;
+  }
+  if (newPos == endPos) {
+    enableAutoSlide = true;
+  } else {
+    enableAutoSlide = false;
+  }
+  slideTo(newPos);
+}
+
+defineExpose({
+  addItem,
+  goUp,
+  goDown,
+  itemUpdateDone,
+  getTotalHeight,
+  hide,
+  show,
+  setVisibleRectStart,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: props.layout.width,
+      height: totalContentHeight,
+    }"
+  >
+    <jsv-flex-div
+      key="root"
+      :style="{
+        flexDirection: 'column',
+        width: props.layout.width,
+      }"
+      :onSized="totalSizeOnUpdate"
+    >
+      <div
+        id="pre-placeholder"
+        :style="{
+          width: props.layout.width,
+          height: prePlaceHolderHeight,
+        }"
+      ></div>
+      <template v-for="item in renderList" :key="item.id">
+        <div
+          v-if="item.isStatic()"
+          :key="item.id"
+          :style="{
+            width: props.layout.width,
+            height: item.layout.height,
+          }"
+        >
+          <slot :data="item.data"></slot>
+        </div>
+        <jsv-flex-div v-else :onSized="item.onSize" :key="item.id">
+          <slot :data="item.data"></slot>
+        </jsv-flex-div>
+      </template>
+      <div
+        id="post-placeholder"
+        :style="{
+          width: props.layout.width,
+          height: postPlaceHolderHeight,
+        }"
+      ></div>
+    </jsv-flex-div>
+  </div>
+</template>