@ray-js/t-agent-ui-ray 0.2.3-beta-1 → 0.2.3-beta-3

package/dist/LazyScrollView/LazyItem/index.d.ts

@@ -5,7 +5,6 @@ interface Props {
   children?: React.ReactNode;
   update?: string;
   bindclick?: () => void;
-  bindshow?: (event: { detail: { show: boolean } }) => void;
   style?: React.CSSProperties;
   ready?: boolean;
   scrollViewId?: string;

package/dist/LazyScrollView/LazyItem/index.js

@@ -28,23 +28,17 @@ Component({
       type: Number
     }
   },
-  data: {
-    show: true
+  data: {},
+  relations: {
+    '../index': {
+      type: 'ancestor',
+      unlinked() {}
+    }
   },
   lifetimes: {},
   methods: {
     click() {
       this.triggerEvent('click');
-    },
-    setShow(show) {
-      if (show !== this.data.show) {
-        this.setData({
-          show
-        });
-        this.triggerEvent('show', {
-          show
-        });
-      }
     }
   },
   observers: {}

package/dist/LazyScrollView/LazyItem/index.tyml

@@ -1,16 +1,16 @@
 <sjs src="../lazy-scroll-view.sjs" module="lazyScrollView"></sjs>
 
 <view
-  change:update="{{lazyScrollView.itemUpdateObserver}}"
-  update="{{update}}"
-  change:ready="{{lazyScrollView.itemReadyObserver}}"
-  ready="{{ready}}"
-  change:index="{{lazyScrollView.itemIndexObserver}}"
-  index="{{index}}"
+  change:data-update="{{lazyScrollView.itemUpdateObserver}}"
+  data-update="{{update}}"
+  change:data-ready="{{lazyScrollView.itemReadyObserver}}"
+  data-ready="{{ready}}"
+  change:data-index="{{lazyScrollView.itemIndexObserver}}"
+  data-index="{{index}}"
   bind:tap="click"
   data-scroll-view-id="{{scrollViewId}}"
   data-item-id="{{itemId}}"
   class="{{className || ''}}"
 >
-  <slot ty:if="{{show}}"></slot>
+  <slot></slot>
 </view>

package/dist/LazyScrollView/get-visible-items.sjs

@@ -0,0 +1,53 @@
+export function getVisibleItems(input) {
+  const { sizes, containerSize, offset, overscanCount } = input;
+
+  if (offset == null || !containerSize || !sizes.length) {
+    return null;
+  }
+
+  const total = sizes.length;
+
+  // Step 1: 构建 offsets（每个 item 的 top）
+  const offsets = [];
+  let currTop = 0;
+  for (let i = 0; i < total; i++) {
+    offsets.push(currTop);
+    currTop += sizes[i].height;
+  }
+
+  // Step 2: 二分查找第一个 bottom > visibleTop 的 item
+  const visibleTop = offset;
+  const visibleBottom = offset + containerSize;
+
+  let start = 0;
+  let end = total - 1;
+  let startIndex = total;
+  while (start <= end) {
+    const mid = Math.floor((start + end) / 2);
+    const bottom = offsets[mid] + sizes[mid].height;
+    if (bottom >= visibleTop) {
+      startIndex = mid;
+      end = mid - 1;
+    } else {
+      start = mid + 1;
+    }
+  }
+
+  // Step 3: 向后遍历直到 top > visibleBottom
+  let endIndex = startIndex;
+  while (endIndex < total && offsets[endIndex] < visibleBottom) {
+    endIndex++;
+  }
+
+  // Step 4: 往前数五个，往后数五个
+  const finalStartIndex = Math.max(0, startIndex - overscanCount);
+  const finalEndIndex = Math.min(total, endIndex + overscanCount);
+
+  // Step 5: 构建结果
+  const map = Object.create(null);
+  for (let i = finalStartIndex; i < finalEndIndex; i++) {
+    map[sizes[i].itemId] = true;
+  }
+
+  return map;
+}

package/dist/LazyScrollView/index.d.ts

@@ -19,6 +19,7 @@ interface Props {
   scrollIntoView?: string;
   bindscroll?: (event: { detail: ScrollEventDetail }) => void;
   binddone?: (event: { detail: { scrollIntoView: string } }) => void;
+  bindchanged?: (event: { detail: { changes: Record<string, boolean> } }) => void;
 }
 
 declare function LazyScrollView(props: Props): React.JSX.Element;

package/dist/LazyScrollView/index.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.json.stringify.js";
 // eslint-disable-next-line no-undef
 Component({
   options: {
@@ -20,7 +21,23 @@ Component({
       value: ''
     }
   },
-  data: {},
+  relations: {
+    './LazyItem/index': {
+      type: 'descendant',
+      unlinked(target) {
+        this.setData({
+          op: JSON.stringify({
+            type: 'detachItem',
+            itemId: target.properties.itemId,
+            t: Math.random()
+          })
+        });
+      }
+    }
+  },
+  data: {
+    op: ''
+  },
   lifetimes: {},
   methods: {},
   observers: {}

package/dist/LazyScrollView/index.tyml

@@ -10,6 +10,8 @@
   change:scrollIntoView="{{lazyScrollView.scrollIntoViewObserver}}"
   scrollIntoView="{{scrollIntoView}}"
   bind:scroll="{{lazyScrollView.scroll}}"
+  change:data-op="{{lazyScrollView.opObserver}}"
+  data-op="{{op}}"
 >
   <slot></slot>
 </scroll-view>

package/dist/LazyScrollView/lazy-item-context.sjs

@@ -0,0 +1,90 @@
+// 为了尽可能防止内存泄漏，LazyItemContext 不引用 ownerInstance、instance
+export class LazyItemContext {
+  constructor(prefix) {
+    this.prefix = prefix;
+    this.show = null; // 是否显示, null 表示未初始化
+    this.ready = false;
+  }
+
+  emitToScroll(ownerInstance, data) {
+    ownerInstance.eventChannel.emit(`${this.prefix}${this.scrollViewId}`, data);
+  }
+
+  init(ownerInstance, instance) {
+    const { scrollViewId, itemId, index } = instance.getDataset();
+    const rect = instance.getBoundingClientRect();
+    this.scrollViewId = scrollViewId;
+    this.itemId = itemId;
+    this.index = index;
+
+    this.height = rect.height;
+    this.eventName = `${this.prefix}${scrollViewId}/${itemId}`;
+
+    ownerInstance.eventChannel.on(this.eventName, (event) => {
+      switch (event.type) {
+        case 'refreshSize':
+          this._refreshSize(ownerInstance, instance, false);
+          ownerInstance.eventChannel.emit(`${this.eventName}/${event.id}`, this.height);
+          break;
+      }
+    });
+
+    this.emitToScroll(ownerInstance, {
+      type: 'itemAdd',
+      itemContext: this,
+    });
+  }
+
+  refreshSize(ownerInstance) {
+    return new Promise((resolve) => {
+      const id = Math.random()
+      ownerInstance.eventChannel.once(`${this.eventName}/${id}`, resolve)
+      ownerInstance.eventChannel.emit(this.eventName, { type: 'refreshSize', id });
+    })
+  }
+
+  _refreshSize(ownerInstance, instance, byUpdate = false) {
+    if (this.show === false) {
+      return;
+    }
+
+    if (byUpdate && this.ready && this.show === true) {
+      // 为了测量真实的高度，先清除 minHeight
+      instance.setStyle({
+        minHeight: '',
+      });
+    }
+
+    const rect = instance.getBoundingClientRect();
+    this.height = rect.height;
+    if (this.ready) {
+      instance.setStyle({
+        minHeight: `${rect.height}px`,
+      });
+    }
+  }
+
+  onUpdate(ownerInstance, instance) {
+    this._refreshSize(ownerInstance, instance, true);
+
+    if (this.ready) {
+      this.emitToScroll(ownerInstance,{
+        type: 'itemUpdate',
+        itemContext: this,
+      });
+    }
+  }
+
+  onReady(ownerInstance, instance) {
+    this.ready = true;
+    this._refreshSize(ownerInstance, instance, false);
+  }
+
+  onIndex(ownerInstance, instance, index) {
+    this.index = index;
+    this.emitToScroll(ownerInstance, {
+      type: 'itemIndexChange',
+      itemContext: this,
+    });
+  }
+}

package/dist/LazyScrollView/lazy-scroll-view.sjs

@@ -1,145 +1,18 @@
 // ownerInstance：表示的是触发事件的组件所在组件的 ComponentDescriptor 实例。如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。
 // instance：表示触发事件的组件的 ComponentDescriptor 实例。
 
-const { createWeakRefPonyfill } = require('./weak-ref.sjs');
+const { ScrollViewContext } = require('./scroll-view-context.sjs');
+const { LazyItemContext } = require('./lazy-item-context.sjs');
 
-const WeakRef = createWeakRefPonyfill();
-
-// scrollViewId -> WeakRef(ScrollViewContext)
-const map = new Map();
-
-function getVisibleItemIdsBinary(input) {
-  const {
-    sizes,
-    containerSize,
-    offset,
-    overscanCount,
-  } = input
-
-  if (!offset || !containerSize || !sizes.length) {
-    return null
-  }
-
-  const total = sizes.length;
-  const avgHeight = sizes.reduce((sum, s) => sum + s.height, 0) / total || 0;
-  const overscanHeight = overscanCount * avgHeight;
-
-  const visibleTop = offset;
-  const visibleBottom = offset + containerSize;
-  const overscanTop = visibleTop - overscanHeight;
-  const overscanBottom = visibleBottom + overscanHeight;
-
-  // Step 1: 构建 offsets（每个 item 的 top）
-  const offsets = [];
-  let currTop = 0;
-  for (let i = 0; i < total; i++) {
-    offsets.push(currTop);
-    currTop += sizes[i].height;
-  }
-
-  // Step 2: 二分查找第一个 bottom > overscanTop 的 item
-  let start = 0, end = total - 1, startIndex = total;
-  while (start <= end) {
-    const mid = Math.floor((start + end) / 2);
-    const bottom = offsets[mid] + sizes[mid].height;
-    if (bottom >= overscanTop) {
-      startIndex = mid;
-      end = mid - 1;
-    } else {
-      start = mid + 1;
-    }
-  }
-
-  // Step 3: 向后遍历直到 top > overscanBottom
-  const visibleMap = Object.create(null);
-
-  let i = 0;
-  while (i < startIndex) {
-    i++
-  }
-
-  while (i < total && offsets[i] <= overscanBottom) {
-    visibleMap[sizes[i].itemId] = true;
-    i++;
-  }
-
-  return visibleMap
-}
+const prefix = `t-agent-lazy-scroll-view-${Math.random()}@`;
 
 const getScrollViewContext = function (ownerInstance, instance) {
   const state = ownerInstance.getState()
   let context = state.scrollViewContext
   if (!context) {
-    const { scrollViewId } = instance.getDataset()
-    const rect = instance.getBoundingClientRect()
-
-    context = {
-      scrollViewId,
-      height: rect.height,
-      width: rect.width,
-      overscanCount: 5,
-      items: new Map(), // itemId -> WeakRef(ItemContext)
-      updateShowPending: false,
-      offset: 0,
-      lastScrollEventDetail: null,
-      lastScrollIntoView: null,
-      refresh() {
-        const rect = instance.getBoundingClientRect()
-        context.height = rect.height
-        context.width = rect.width
-      },
-      refreshSizes() {
-        const sizes = [];
-        context.items.forEach((ref) => {
-          const itemContext = ref.deref()
-          if (itemContext) {
-            sizes.push(itemContext.data)
-          }
-        })
-        sizes.sort((a, b) => a.index - b.index); // 按照 top 排序
-        context.sizes = sizes;
-      },
-      updateVisibleItems() {
-        if (context.updateShowPending) {
-          return
-        }
-        context.updateShowPending = true;
-        ownerInstance.requestAnimationFrame(() => {
-          const visibleMap = getVisibleItemIdsBinary({
-            sizes: context.sizes,
-            containerSize: context.height,
-            offset: context.offset,
-            overscanCount: context.overscanCount,
-          })
-          if (visibleMap) {
-            context.items.forEach((ref, itemId) => {
-              const itemContext = ref.deref()
-              if (itemContext) {
-                itemContext.setShow(!!visibleMap[itemId]);
-              }
-            })
-          }
-          context.updateShowPending = false;
-        })
-      }
-    }
+    context = new ScrollViewContext(prefix, 10);
+    context.init(ownerInstance, instance)
     state.scrollViewContext = context;
-     // 使用 WeakRef 来避免内存泄漏
-    map.set(scrollViewId, new WeakRef(context));
-  }
-  return context;
-}
-
-const getScrollViewContextById = function (scrollViewId) {
-  const ref = map.get(scrollViewId);
-  if (!ref) {
-    return null;
-  }
-  const context = ref.deref();
-  if (!context) {
-    console.warn(`ScrollViewContext for scrollViewId ${scrollViewId} has been garbage collected.`);
-    map.delete(scrollViewId);
-    return null;
   }
   return context;
 }
@@ -147,89 +20,28 @@ const getScrollViewContextById = function (scrollViewId) {
 const scroll = function (event, ownerInstance) {
   const instance = event.instance
   const context = getScrollViewContext(ownerInstance, instance)
-  context.offset = event.detail.scrollTop;
-  // 触发父组件的滚动事件
-  ownerInstance.triggerEvent('scroll', {
-    ...event.detail,
-    clientHeight: context.height,
-    clientWidth: context.width,
-  });
-  context.lastScrollEventDetail = event.detail;
-  context.updateVisibleItems();
+  context.onScroll(event, ownerInstance, instance)
 }
 
 const getItemContext = function (ownerInstance, instance) {
   const state = ownerInstance.getState()
   let itemContext = state.context
   if (!itemContext) {
-    const { scrollViewId, itemId } = instance.getDataset()
-    const rect = instance.getBoundingClientRect()
-    itemContext = {
-      show: true,
-      scrollViewId,
-      data: {
-        itemId,
-        index: null,
-        height: rect.height,
-      },
-      ready: false,
-      setShow(show) {
-        if (show === itemContext.show || !itemContext.ready) {
-          return;
-        }
-        itemContext.show = show;
-        if (show) {
-          ownerInstance.requestAnimationFrame(() => {
-            itemContext.refreshSize();
-          })
-        }
-        ownerInstance.callMethod('setShow', show);
-      },
-      refreshSize(byUpdate = false) {
-        if (byUpdate && itemContext.ready && itemContext.show) {
-          // 为了测量真实的高度，先清除 minHeight
-          instance.setStyle({
-            minHeight: '',
-          });
-        }
-
-        const rect = instance.getBoundingClientRect()
-        itemContext.data.height = rect.height;
-        if (itemContext.ready) {
-          instance.setStyle({
-            minHeight: `${rect.height}px`,
-          });
-        }
-      }
-    }
-    const context = getScrollViewContextById(scrollViewId)
-    if (context) {
-      context.items.set(itemId, new WeakRef(itemContext));
-    } else {
-      console.warn(`ScrollViewContext not found for scrollViewId: ${scrollViewId}`);
-    }
+    itemContext = new LazyItemContext(prefix);
+    itemContext.init(ownerInstance, instance);
     state.context = itemContext;
   }
   return itemContext;
 }
 
 const itemUpdateObserver = function (newValue, oldValue, ownerInstance, instance) {
-  if (newValue === oldValue) {
+  // 没有旧值就表示第一次挂载，跳过，以防止刚挂载上时，由于外部 show === false，导致高度计算为 0。
+  if (newValue === oldValue || !oldValue) {
     return;
   }
 
   const itemContext = getItemContext(ownerInstance, instance)
-  itemContext.refreshSize(true);
-  if (itemContext.ready) {
-    ownerInstance.requestAnimationFrame(() => {
-      const context = getScrollViewContextById(itemContext.scrollViewId);
-      if (context) {
-        context.refreshSizes();
-        context.updateVisibleItems();
-      }
-    })
-  }
-
+  itemContext.onUpdate(ownerInstance, instance);
 };
 
 const itemReadyObserver = function (newValue, oldValue, ownerInstance, instance) {
@@ -238,13 +50,7 @@ const itemReadyObserver = function (newValue, oldValue, ownerInstance, instance)
   }
 
   const itemContext = getItemContext(ownerInstance, instance)
-
-  // ready 属性变化时，设置 ready 状态
-  if (newValue === true) {
-    itemContext.ready = true;
-  }
-
-  itemContext.refreshSize();
+  itemContext.onReady(ownerInstance, instance);
 };
 
 const itemIndexObserver = function (newValue, oldValue, ownerInstance, instance) {
@@ -252,60 +58,17 @@ const itemIndexObserver = function (newValue, oldValue, ownerInstance, instance)
     return;
   }
   const itemContext = getItemContext(ownerInstance, instance)
-  itemContext.data.index = newValue;
-  const context = getScrollViewContextById(itemContext.scrollViewId);
-  if (context) {
-    context.refreshSizes();
-    context.updateVisibleItems();
-  }
+  itemContext.onIndex(ownerInstance, instance, newValue);
+}
+
+const opObserver = function (opJson, old, ownerInstance, instance) {
+  const context = getScrollViewContext(ownerInstance, instance);
+  context.doOp(opJson, old, ownerInstance, instance);
 }
 
 const scrollIntoViewObserver = function (newValue, oldValue, ownerInstance, instance) {
   const context = getScrollViewContext(ownerInstance, instance)
-  if (newValue === oldValue) {
-    return;
-  }
-
-  ownerInstance.requestAnimationFrame(() => {
-    ownerInstance.triggerEvent('done', {
-      scrollIntoView: newValue,
-    })
-  })
-
-  if (!newValue) {
-    return
-  }
-
-  const last = context.lastScrollIntoView;
-
-  if (last && last === newValue) {
-    return;
-  }
-
-  context.lastScrollIntoView = newValue
-
-  const rect = instance.getBoundingClientRect()
-  if (context.lastScrollEventDetail == null) {
-    return
-  }
-
-  // 这个就是用来滚动到底部的，所以直接计算底部 offset 就行
-
-  const lastOffset = context.offset
-  context.offset = context.lastScrollEventDetail.scrollHeight - rect.height;
-  context.refresh()
-  context.updateVisibleItems();
-
-  ownerInstance.triggerEvent('scroll', {
-    scrollTop: context.offset,
-    deltaX: 0,
-    deltaY: context.offset - lastOffset,
-    scrollLeft: context.lastScrollEventDetail.scrollLeft,
-    scrollHeight: context.lastScrollEventDetail.scrollHeight,
-    scrollWidth: context.lastScrollEventDetail.scrollWidth,
-    clientHeight: context.height,
-    clientWidth: context.width,
-  });
+  context.onScrollBottom(newValue, oldValue, ownerInstance, instance)
 }
 
 export default {
@@ -313,5 +76,6 @@ export default {
   itemUpdateObserver,
   itemReadyObserver,
   scrollIntoViewObserver,
+  opObserver,
   scroll
 };

package/dist/LazyScrollView/ordered-list.sjs

@@ -0,0 +1,57 @@
+export class OrderedList {
+  constructor() {
+    this.map = new Map(); // 用于快速通过 itemId 查找元素
+    this.list = [];       // 存储有序元素
+  }
+
+  // 添加或更新元素
+  upsert(item) {
+    const { itemId, index } = item;
+    if (!itemId || typeof index !== 'number') {
+      throw new Error('Item must have itemId and index');
+    }
+
+    const exists = this.map.has(itemId);
+    if (exists) {
+      // 更新旧元素
+      const i = this.list.findIndex(el => el.itemId === itemId);
+      if (i !== -1) {
+        this.list.splice(i, 1);
+      }
+    }
+
+    this.map.set(itemId, item);
+    // 插入并排序（插入后保持 list 有序）
+    this._insertSorted(item);
+  }
+
+  // 删除元素
+  remove(itemId) {
+    if (this.map.has(itemId)) {
+      this.map.delete(itemId);
+      const i = this.list.findIndex(el => el.itemId === itemId);
+      if (i !== -1) {
+        this.list.splice(i, 1);
+      }
+    }
+  }
+
+  // 获取有序元素
+  getAll() {
+    return this.list;
+  }
+
+  _insertSorted(item) {
+    // 二分插入，保持排序
+    let left = 0, right = this.list.length;
+    while (left < right) {
+      const mid = (left + right) >> 1;
+      if (this.list[mid].index < item.index) {
+        left = mid + 1;
+      } else {
+        right = mid;
+      }
+    }
+    this.list.splice(left, 0, item);
+  }
+}