mirror of
https://gitee.com/ccc_28/level-render
synced 2025-11-15 10:38:09 +00:00
589 lines
21 KiB
TypeScript
589 lines
21 KiB
TypeScript
import { director } from "cc";
|
|
import { CCFloat } from "cc";
|
|
import { Component, Node, Prefab, ScrollView, UITransform, Vec2, _decorator, error, instantiate, isValid, log, v2, v3 } from "cc";
|
|
import { EDITOR } from "cc/env";
|
|
const { ccclass, property, menu } = _decorator;
|
|
|
|
// let createFlag = 0;
|
|
|
|
/**
|
|
* 循环+分帧滑动面板
|
|
*/
|
|
@ccclass('RecycleScroll')
|
|
@menu("性能优化/RecycleScroll")
|
|
export default class RecycleScroll extends Component {
|
|
/** item预制 */
|
|
@property(Prefab)
|
|
itemPrefab: Prefab = null;
|
|
|
|
/** item间隔 */
|
|
@property(Vec2)
|
|
spacing: Vec2 = v2();
|
|
|
|
/** 上下间隔 */
|
|
@property(CCFloat)
|
|
paddingTop: number = 0;
|
|
|
|
/** 子节点缩放 */
|
|
@property(CCFloat)
|
|
itemScale: number = 1;
|
|
|
|
/** item数量 */
|
|
private _numItems: number = 0;
|
|
public get numItems() {
|
|
return this._numItems;
|
|
}
|
|
public set numItems(value: number) {
|
|
this._numItems = value;
|
|
this._hideAllItems();
|
|
this._initialize();
|
|
this._updateContentHeight();
|
|
this.updateAllItems();
|
|
}
|
|
|
|
frameLoadParama = { fun: null, count: 0, index: 0 };
|
|
|
|
/** 视图内显示列数 */
|
|
private _viewCol: number = 0;
|
|
/** 视图内显示行数 */
|
|
private _viewRow: number = 0;
|
|
/** 视图窗宽 */
|
|
private _viewW: number = 0;
|
|
/** 视图窗高 */
|
|
private _viewH: number = 0;
|
|
/** item格子宽 */
|
|
private _itemW: number = 0;
|
|
/** item格子高 */
|
|
private _itemH: number = 0;
|
|
/** content上一次y坐标 */
|
|
private _lastPosY: number = 0;
|
|
/** 是否已初始化 */
|
|
private _isInit: boolean = false;
|
|
/** item的index */
|
|
private _itemsUUIDToIndex: { [uuid: string]: number } = {};
|
|
/**index对应的item */
|
|
private _indexToItem: { [index: number]: Node } = {};
|
|
|
|
/**是否能选中 */
|
|
private _isSelectable: boolean = false;
|
|
public get isSelectable() {
|
|
return this._isSelectable;
|
|
}
|
|
public set isSelectable(value: boolean) {
|
|
this._isSelectable = value;
|
|
}
|
|
|
|
/**选中索引 */
|
|
private _selectedIndex: number = -1;
|
|
public get selectedIndex() {
|
|
return this._selectedIndex;
|
|
}
|
|
public set selectedIndex(value: number) {
|
|
this._selectedIndex = value;
|
|
this.updateAllItems();
|
|
}
|
|
|
|
/**能否多选 */
|
|
private _isMultiSelect: boolean = false;
|
|
public get isMultiSelect() {
|
|
return this._isMultiSelect;
|
|
}
|
|
public set isMultiSelect(value: boolean) {
|
|
this._isMultiSelect = value;
|
|
}
|
|
|
|
/**选中索引列表 */
|
|
private _selectedIndexes: number[] = [];
|
|
public get selectedIndexes() {
|
|
return this._selectedIndexes;
|
|
}
|
|
public set selectedIndexes(value: number[]) {
|
|
this._selectedIndexes = value;
|
|
this.updateAllItems();
|
|
}
|
|
// private _itemsIndexToNode: { [index: string]: Node } = {};
|
|
|
|
private _fleshInterval: number = 0.2;
|
|
private _fleshCounter: number = 0;
|
|
private _initTimer: number = 0.05;
|
|
private _initCounter: number = 0;
|
|
private _isResize: boolean = false;
|
|
private _itemStartPos: Vec2 = v2();
|
|
private _isResizeFinish: boolean = false;
|
|
private _lineIndex: number = -1;
|
|
private _isLongPress: boolean = false;
|
|
|
|
public longPressTime: number = 0.5;
|
|
public longPressTimer: number = 0;
|
|
|
|
/** item列表 */
|
|
public itemList: Node[] = [];
|
|
/** item父节点 */
|
|
public content: UITransform = null;
|
|
|
|
/** item刷新回调 */
|
|
public onItemRender(index: number, node: Node) { }
|
|
/** item点击回调 */
|
|
public onItemLongPress: (index: number, node: Node) => void = null;;
|
|
/** item点击回调 */
|
|
public onItemClicked(index: number, node: Node) { }
|
|
/**选中回调 */
|
|
public onItemSelected: (index: number, node: Node) => void = null;
|
|
/** 清除某选中 */
|
|
public clearSelection(index: number) {
|
|
if (this._isMultiSelect && this._selectedIndexes.indexOf(index) != -1) {
|
|
this._selectedIndexes.splice(this._selectedIndexes.indexOf(index), 1);
|
|
|
|
if (this.onItemSelected) {
|
|
this.onItemSelected(index, this._indexToItem[index]);
|
|
}
|
|
}
|
|
|
|
if (this._isSelectable && this._selectedIndex == index) {
|
|
this._selectedIndex = -1;
|
|
|
|
if (this.onItemSelected) {
|
|
this.onItemSelected(index, this._indexToItem[index]);
|
|
}
|
|
}
|
|
}
|
|
/** 清除所有选中 */
|
|
public clearSelectionAll() {
|
|
this._selectedIndexes = [];
|
|
this._selectedIndex = -1;
|
|
this.updateAllItems();
|
|
}
|
|
|
|
/** 刷新所有item */
|
|
public updateAllItems() {
|
|
this.itemList.forEach((item: Node) => this._updateItem(this._itemsUUIDToIndex[item.uuid], item, true));
|
|
}
|
|
|
|
public scrollToIndexVertical(index: number, duration: number = 0.2) {
|
|
const scrollComp = this.node.getComponent(ScrollView);
|
|
scrollComp.stopAutoScroll();
|
|
const contentUTF = this._getContentUTF();
|
|
const p = (this._itemH * Math.floor(index / this._viewCol)) / (contentUTF.height - this._viewH);
|
|
scrollComp.scrollToPercentVertical(1 - p, duration);
|
|
}
|
|
|
|
/** 使指定索引物品处于可视范围 */
|
|
public scrollItemVisible(index: number, duration: number = 0.2) {
|
|
if (index < 0 || index >= this.numItems) return;
|
|
const scrollView = this.node.getComponent(ScrollView);
|
|
scrollView.stopAutoScroll();
|
|
const itemRow = Math.floor(index / this._viewCol);
|
|
const itemPosY = -this._itemH * (itemRow + 0.5);
|
|
const itemWposy = itemPosY + this.content.node.worldPosition.y;
|
|
const viewWposy = this.content.node.parent.getWorldPosition().y;
|
|
const posH = (this._viewH - this._itemH) >> 1;
|
|
const deltaY = viewWposy - itemWposy;
|
|
if (Math.abs(deltaY) < posH) return;
|
|
const sign = deltaY > 0 ? -1 : 1;
|
|
|
|
const offset = scrollView.getScrollOffset().clone();
|
|
offset.y += deltaY + (sign * posH);
|
|
scrollView.scrollToOffset(offset, duration);
|
|
}
|
|
|
|
public getItemDirPos(itemIndex: number) {
|
|
const x = (itemIndex % this._viewCol) * this._itemW;
|
|
const y = -Math.floor(itemIndex / this._viewCol) * this._itemH + (this.spacing.y >> 1) - this.paddingTop;
|
|
const contentUTF = this._getContentUTF();
|
|
const wpos = contentUTF.convertToWorldSpaceAR(v3(x, y));
|
|
const parentUTF = this._getContentUTF().node.parent.getComponent(UITransform);
|
|
const itemInViewPos = parentUTF.convertToNodeSpaceAR(wpos);
|
|
let horizon = 0;
|
|
let vertical = 0;
|
|
horizon = itemInViewPos.x < -this._viewW / 2 ? -1 : (itemInViewPos.x > this._viewW / 2 ? 1 : 0);
|
|
vertical = itemInViewPos.y < -this._viewH / 2 ? -1 : (itemInViewPos.y > this._viewH / 2 ? 1 : 0);
|
|
return [horizon, vertical];
|
|
}
|
|
|
|
protected onLoad(): void {
|
|
this.node.on(Node.EventType.SIZE_CHANGED, this.onSizeChange, this);
|
|
this._initContentPos();
|
|
}
|
|
|
|
protected onDestroy(): void {
|
|
this.node.targetOff(this);
|
|
// screen.off(`window-resize`, this.onWindowResize, this);
|
|
}
|
|
|
|
/** 初始化content位置 */
|
|
private _initContentPos() {
|
|
const scroll = this.node.getComponent(ScrollView);
|
|
const content = scroll.content.getComponent(UITransform);
|
|
const view = content.node.parent.getComponent(UITransform);
|
|
content.node.position = v3(0, (view.height / 2) - (content.height * (1 - content.anchorY)));
|
|
}
|
|
|
|
protected onSizeChange() {
|
|
this._isResize = true;
|
|
this._initCounter = 0;
|
|
this._itemsUUIDToIndex = {};
|
|
this._indexToItem = {};
|
|
// this.itemList = [];
|
|
if (!EDITOR)
|
|
this._getContentUTF().node.removeAllChildren();
|
|
}
|
|
|
|
private _hideAllItems() {
|
|
this.itemList.forEach((item: Node, index: number) => item.active = false);
|
|
}
|
|
|
|
/** 获取content */
|
|
private _getContentUTF() {
|
|
return this.node.getComponent(ScrollView).content.getComponent(UITransform);
|
|
}
|
|
|
|
/** 初始化 */
|
|
private _initialize(force: boolean = false) {
|
|
if (this._isInit && !force) return;
|
|
const scroll = this.node.getComponent(ScrollView);
|
|
scroll.enabled = false;
|
|
this._isInit = true;
|
|
const content = this._getContentUTF();
|
|
this.content = content;
|
|
if (!EDITOR)
|
|
content.node.removeAllChildren()
|
|
this.itemList = [];
|
|
const viewUTF = content.node.parent.getComponent(UITransform);
|
|
this._viewW = viewUTF.width;
|
|
this._viewH = viewUTF.height;
|
|
|
|
const itemData = this.itemPrefab.data.getComponent(UITransform);
|
|
this._itemW = itemData.width * this.itemScale + this.spacing.x;
|
|
this._itemH = itemData.height * this.itemScale + this.spacing.y;
|
|
|
|
this._lastPosY = content.node.position.y;
|
|
this._viewRow = Math.ceil((this._viewH - this.spacing.y) / this._itemH) + 1;
|
|
this._viewCol = Math.floor((this._viewW + this.spacing.x) / this._itemW);
|
|
const surplusW = this._viewW - (this._viewCol * this._itemW);
|
|
const startPos = v2(
|
|
(-this._viewW >> 1) + (this._itemW >> 1) + (surplusW >> 1),
|
|
(-this._itemH >> 1) - this.paddingTop
|
|
);
|
|
this._itemStartPos = startPos;
|
|
|
|
const cNum = this._viewRow * this._viewCol;
|
|
log(`实例化数量:${cNum}`);
|
|
|
|
let createNum = 0;
|
|
const createFunc = (index: number) => {
|
|
if (!isValid(content)) return; //异步创建，创建完回来父节点有可能已经被销毁
|
|
const item = instantiate(this.itemPrefab);
|
|
item.parent = content.node;
|
|
const x = (index % this._viewCol) * this._itemW;
|
|
const y = -Math.floor(index / this._viewCol) * this._itemH + (this.spacing.y >> 1);
|
|
const pos = v3(x + startPos.x, y + startPos.y);
|
|
item.setPosition(pos);
|
|
item.setScale(v3(this.itemScale, this.itemScale, 1));
|
|
item.on(Node.EventType.TOUCH_START, () => {
|
|
this._isLongPress = false;
|
|
if (this.onItemLongPress) {
|
|
this.longPressTimer = Number(setTimeout(() => {
|
|
this._isLongPress = true;
|
|
this.longPressTimer = 0;
|
|
this.onItemLongPress(this._itemsUUIDToIndex[item.uuid], item);
|
|
}, this.longPressTime * 1000))
|
|
}
|
|
})
|
|
item.on(Node.EventType.TOUCH_MOVE, () => {
|
|
if (this.longPressTimer) {
|
|
clearTimeout(this.longPressTimer);
|
|
this.longPressTimer = 0;
|
|
}
|
|
})
|
|
item.on(Node.EventType.TOUCH_END, () => {
|
|
if (this._isLongPress) return;
|
|
if (this.longPressTimer) {
|
|
clearTimeout(this.longPressTimer);
|
|
this.longPressTimer = 0;
|
|
}
|
|
this.onItemClicked(this._itemsUUIDToIndex[item.uuid], item);
|
|
|
|
if (this._isSelectable && this.onItemSelected) {
|
|
const lastSelectedIndex = this._selectedIndex;
|
|
this._selectedIndex = this._itemsUUIDToIndex[item.uuid];
|
|
this.onItemSelected(this._itemsUUIDToIndex[item.uuid], item);
|
|
const lastItem = this._indexToItem[lastSelectedIndex];
|
|
if (lastItem && !this._isMultiSelect) {
|
|
this.onItemSelected(lastSelectedIndex, lastItem);
|
|
}
|
|
}
|
|
|
|
if (this._isMultiSelect && this.onItemSelected) {
|
|
const selectedIndex = this._itemsUUIDToIndex[item.uuid];
|
|
if (this._selectedIndexes.indexOf(selectedIndex) == -1) {
|
|
this._selectedIndexes.push(selectedIndex);
|
|
} else {
|
|
this._selectedIndexes.splice(this._selectedIndexes.indexOf(selectedIndex), 1);
|
|
}
|
|
this.onItemSelected(selectedIndex, item);
|
|
}
|
|
}, this);
|
|
|
|
this.itemList[index] = item;
|
|
|
|
item["needRender"] = true;
|
|
this._updateItem(index, item);
|
|
|
|
this._itemsUUIDToIndex[item.uuid] = index;
|
|
this._indexToItem[index] = item;
|
|
|
|
createNum++;
|
|
if (createNum == cNum) {
|
|
scroll.enabled = true;
|
|
|
|
director.emit('recycle_init_success');
|
|
}
|
|
}
|
|
// createFlag++;
|
|
/** 分帧创建item */
|
|
// frameLoad(cNum, createFunc, 16, 0, 0);
|
|
this.frameLoadParama = { fun: createFunc, count: cNum, index: 0 };
|
|
}
|
|
|
|
/** 更新centent高度 */
|
|
private _updateContentHeight() {
|
|
const content = this._getContentUTF();
|
|
const col = Math.floor((this._viewW + this.spacing.x) / this._itemW);
|
|
const row = Math.ceil(this.numItems / col);
|
|
const itemH = this.itemPrefab.data.getComponent(UITransform).height * this.itemScale + this.spacing.y;
|
|
content.height = (row * itemH) - (this.spacing.y) + (this.paddingTop * 2);
|
|
}
|
|
|
|
/** 获取item在view坐标系的对标 */
|
|
private _getPosInView(item: Node) {
|
|
const content = this._getContentUTF();
|
|
const viewUTF = content.node.parent.getComponent(UITransform);
|
|
const wpos = content.convertToWorldSpaceAR(item.position);
|
|
const lpos = viewUTF.convertToNodeSpaceAR(wpos);
|
|
return lpos;
|
|
}
|
|
|
|
/** 更新item */
|
|
private _updateItem(index: number, item: Node, force = false) {
|
|
const isShow = index >= 0 && index < this.numItems;
|
|
item.active = isShow;
|
|
if (isShow) {
|
|
if (item["needRender"] || force) {
|
|
this.onItemRender(index, item);
|
|
item["needRender"] = false;
|
|
|
|
if (this._isSelectable && this.onItemSelected) {
|
|
this.onItemSelected(index, item);
|
|
}
|
|
|
|
if (this._isMultiSelect && this.onItemSelected) {
|
|
this.onItemSelected(index, item);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 根据索引刷新单个Item
|
|
* @param index 要刷新的Item索引
|
|
*/
|
|
public refreshItem(index: number) {
|
|
// 检查索引是否有效
|
|
if (index < 0 || index >= this.numItems) {
|
|
console.warn(`刷新Item失败: 无效的索引 ${index}`);
|
|
return;
|
|
}
|
|
|
|
// 查找对应的Item节点
|
|
const item = this.itemList.find(item => this._itemsUUIDToIndex[item.uuid] === index);
|
|
|
|
if (item) {
|
|
// 强制更新Item
|
|
this._updateItem(index, item, true);
|
|
} else {
|
|
console.warn(`刷新Item失败: 未找到索引 ${index} 对应的Item节点`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 刷新所有可见的Items
|
|
*/
|
|
public refreshVisibleItems() {
|
|
this.itemList.forEach(item => {
|
|
const index = this._itemsUUIDToIndex[item.uuid];
|
|
if (item.active) {
|
|
this._updateItem(index, item, true);
|
|
}
|
|
});
|
|
}
|
|
|
|
public update(dt: number) {
|
|
if (this.frameLoadParama?.count) {
|
|
const fun = this.frameLoadParama.fun;
|
|
fun && fun(this.frameLoadParama.index);
|
|
this.frameLoadParama.index++;
|
|
if (this.frameLoadParama.index >= this.frameLoadParama.count) {
|
|
this.frameLoadParama = null;
|
|
}
|
|
}
|
|
if (this._isResize) {
|
|
this._initCounter += dt;
|
|
if (this._initCounter >= this._initTimer) {
|
|
this._isInit = false;
|
|
this._isResize = false;
|
|
this.numItems = this._numItems;
|
|
this._isResizeFinish = true;
|
|
}
|
|
return;
|
|
}
|
|
const content = this._getContentUTF();
|
|
const currY = content.node.position.y;
|
|
const dtY = currY - this._lastPosY;
|
|
this._lastPosY = currY;
|
|
this._fleshCounter += dt;
|
|
if (dtY == 0 && !this._isResizeFinish) return;
|
|
const isDown = dtY < 0;
|
|
const viewHalfH = this._viewH >> 1;
|
|
const itemHalfH = this._itemH >> 1;
|
|
const lineIndex = Math.floor((currY - viewHalfH + (this.spacing.y >> 1) - this.paddingTop) / (this._itemH));
|
|
let isLineChange = this._lineIndex != lineIndex;
|
|
|
|
if (!isLineChange && !this._isResizeFinish) return;
|
|
this._isResizeFinish = false;
|
|
this._lineIndex = lineIndex;
|
|
const pageHeight = this._itemH * this._viewRow;
|
|
const pageLen = this._viewRow * this._viewCol;
|
|
const pageIndex = Math.floor((currY - viewHalfH - this.paddingTop) / pageHeight);
|
|
const itemsLen = this.itemList.length;
|
|
for (let i = 0; i < itemsLen; ++i) {
|
|
const index = i;
|
|
const item = this.itemList[i];
|
|
const x = (index % this._viewCol) * this._itemW;
|
|
const y = -Math.floor(index / this._viewCol) * this._itemH + (this.spacing.y >> 1);
|
|
const pos = v3(x + this._itemStartPos.x, y + this._itemStartPos.y - pageIndex * (pageHeight));
|
|
item.setPosition(pos);
|
|
|
|
const posInView = this._getPosInView(item);
|
|
const lastIndex = this._itemsUUIDToIndex[item.uuid];
|
|
let currIndex = pageIndex * pageLen + i;
|
|
if (!isDown) {
|
|
if (posInView.y >= (viewHalfH + itemHalfH)) {
|
|
item.setPosition(v3(item.position.x, item.position.y - (this._viewRow * this._itemH)));
|
|
currIndex += itemsLen;
|
|
}
|
|
} else {
|
|
if (posInView.y >= viewHalfH + itemHalfH) {
|
|
item.setPosition(v3(item.position.x, item.position.y - (this._viewRow * this._itemH)));
|
|
currIndex += itemsLen;
|
|
}
|
|
if (isLineChange) {
|
|
const posInView = this._getPosInView(item);
|
|
if (posInView.y <= -(viewHalfH + itemHalfH)) {
|
|
item.setPosition(v3(item.position.x, item.position.y + (this._viewRow * this._itemH)));
|
|
currIndex -= itemsLen;
|
|
}
|
|
}
|
|
}
|
|
if (currIndex != lastIndex) {
|
|
item["needRender"] = true;
|
|
this._updateItem(currIndex, item);
|
|
}
|
|
this._itemsUUIDToIndex[item.uuid] = currIndex;
|
|
|
|
this._indexToItem[currIndex] = item;
|
|
}
|
|
}
|
|
|
|
/** 获取item */
|
|
getItemByIndex(index: number): Node | undefined {
|
|
if (index < 0 || index >= this.numItems) {
|
|
return undefined;
|
|
}
|
|
|
|
let uiid = ``;
|
|
for (const key in this._itemsUUIDToIndex) {
|
|
if (this._itemsUUIDToIndex[key] == index) {
|
|
uiid = key;
|
|
break;
|
|
}
|
|
}
|
|
|
|
for (const node of this.itemList) {
|
|
if (node.uuid == uiid) {
|
|
return node;
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
/** 强制显示指定索引的Item
|
|
* @param index 索引
|
|
*/
|
|
forcedDisplayItemByIndex(index: number) {
|
|
// 获取滚动视图组件
|
|
const scrollView = this.getComponent(ScrollView);
|
|
if (!scrollView) {
|
|
error("RecycleScroll: 找不到 ScrollView 组件");
|
|
return;
|
|
}
|
|
|
|
//停止滑动滑动视图的滑动和惯性滑动
|
|
scrollView.stopAutoScroll();
|
|
// 检查索引是否有效
|
|
if (index < 0 || index >= this._numItems) {
|
|
error("RecycleScroll: 无效的索引值");
|
|
return;
|
|
}
|
|
|
|
// 计算目标位置
|
|
const content = scrollView.content;
|
|
const viewHeight = this.node.getComponent(UITransform).height;
|
|
|
|
const contentHeight = content.getComponent(UITransform).height;
|
|
const contentAnchor = content.getComponent(UITransform).anchorPoint;
|
|
|
|
|
|
// 处理ScrollView锚点问题
|
|
const scrollViewAnchor = scrollView.node.getComponent(UITransform).anchorPoint;
|
|
let initPosY = 0 + scrollViewAnchor.y * viewHeight;
|
|
|
|
// 计算目标行数和目标Y坐标
|
|
const targetRow = Math.floor(index / this._viewCol);
|
|
let targetY = targetRow * this._itemH + initPosY;
|
|
|
|
content.setPosition(v3(content.position.x, targetY, content.position.z));
|
|
|
|
// 计算content底部的y坐标
|
|
const contentBottomY = content.worldPosition.y - contentHeight * contentAnchor.y;
|
|
//计算scrollview底部的坐标
|
|
const scrollViewBottomY = this.node.worldPosition.y - viewHeight * scrollViewAnchor.y;
|
|
|
|
//如果content底部超出scrollview底部,则将content位置调整到底部对齐
|
|
if (contentBottomY > scrollViewBottomY) {
|
|
content.setPosition(v3(content.position.x, targetY - (contentBottomY - scrollViewBottomY), content.position.z));
|
|
}
|
|
|
|
// 强制更新一次显示
|
|
this.updateAllItems();
|
|
}
|
|
|
|
/** 检查索引是否正在渲染
|
|
* @param index
|
|
* @returns
|
|
*/
|
|
isRanderingItemByIndex(index: number) {
|
|
// 检查索引是否有效
|
|
if (index < 0 || index >= this._numItems) {
|
|
return false;
|
|
}
|
|
|
|
for (const key in this._itemsUUIDToIndex) {
|
|
if (this._itemsUUIDToIndex[key] == index) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
} |