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

package/DemoForOperator/LongChatBox/TextManager.ts

@@ -1,147 +0,0 @@
-/**
- * 处理流式文本的分行
- */
-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

@@ -1,298 +0,0 @@
-<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>