@cc-component/cc-ex-component 1.1.6 → 1.1.8

package/assets/lib/collectView/lib_collect/yx-flow-layout.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "238e51fb-2279-4282-9d75-a8eea31ff882",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/collectView/lib_collect/yx-table-layout.ts

@@ -0,0 +1,352 @@
+import { log, math, UITransform, warn } from "cc";
+import { YXCollectionView, YXIndexPath, YXLayout, YXLayoutAttributes } from "./yx-collection-view";
+
+enum _yx_table_layout_supplementary_kinds {
+    HEADER = 'header',
+    FOOTER = 'footer',
+}
+
+export class YXTableLayout extends YXLayout {
+
+    /**
+     * 行高  
+     */
+    rowHeight: number | ((indexPath: YXIndexPath) => number) = 100
+
+    /**
+     * 内容上边距
+     */
+    top: number = 0
+
+    /**
+     * 内容下边距
+     */
+    bottom: number = 0
+
+    /**
+     * 节点之间间距  
+     */
+    spacing: number = 0
+
+    /**
+     * 区头高度
+     */
+    sectionHeaderHeight: number | ((section: number) => number) = null
+
+    /**
+     * 区尾高度
+     */
+    sectionFooterHeight: number | ((section: number) => number) = null
+
+    /**
+     * 钉住 header 的位置 ( header 吸附在列表可见范围内 )  
+     */
+    sectionHeadersPinToVisibleBounds: boolean = false
+
+    /**
+     * 钉住 footer 的位置 ( footer 吸附在列表可见范围内 )  
+     */
+    sectionFootersPinToVisibleBounds: boolean = false
+
+    /**
+     * 区头/区尾标识  
+     */
+    static SupplementaryKinds = _yx_table_layout_supplementary_kinds
+
+    protected originalHeaderRect: Map<number, math.Rect> = new Map() // 保存所有 header 的原始位置
+    protected originalFooterRect: Map<number, math.Rect> = new Map() // 保存所有 footer 的原始位置
+
+    // 为了优化查找，额外维护几个数组按类别管理所有的布局属性，空间换时间  
+    protected allCellAttributes: YXLayoutAttributes[] = []
+    protected allHeaderAttributes: YXLayoutAttributes[] = []
+    protected allFooterAttributes: YXLayoutAttributes[] = []
+
+    prepare(collectionView: YXCollectionView): void {
+        // 设置列表的滚动方向(这套布局固定为垂直方向滚动)  
+        collectionView.scrollView.horizontal = false
+        collectionView.scrollView.vertical = true
+        if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
+            // 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告  
+            warn(`YXTableLayout 仅支持垂直方向排列`)
+        }
+
+        // 清空一下布局属性数组
+        this.attributes = []
+        this.allCellAttributes = []
+        this.allHeaderAttributes = []
+        this.allFooterAttributes = []
+        this.originalHeaderRect.clear()
+        this.originalFooterRect.clear()
+
+        // 获取列表宽度  
+        const contentWidth = collectionView.node.getComponent(UITransform).width
+
+        // 声明一个临时变量，用来记录当前所有内容的总高度  
+        let contentHeight = 0
+
+        // 获取列表一共分多少个区
+        let numberOfSections = collectionView.getNumberOfSections()
+
+        // 为每条数据对应的生成一个布局属性
+        for (let section = 0; section < numberOfSections; section++) {
+
+            // 创建一个区索引
+            let sectionIndexPath = new YXIndexPath(section, 0)
+
+            // 通过区索引创建一个区头节点布局属性
+            let sectionHeaderHeight = 0
+            if (this.sectionHeaderHeight) {
+                sectionHeaderHeight = this.sectionHeaderHeight instanceof Function ? this.sectionHeaderHeight(section) : this.sectionHeaderHeight
+            }
+            if (sectionHeaderHeight > 0) {
+                let headerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.HEADER)
+
+                // 确定这个节点的位置  
+                headerAttr.frame.x = 0
+                headerAttr.frame.width = contentWidth
+                headerAttr.frame.height = sectionHeaderHeight
+                headerAttr.frame.y = contentHeight
+
+                // 调整层级
+                headerAttr.zIndex = 1
+
+                // 重要: 保存布局属性
+                this.attributes.push(headerAttr)
+                this.originalHeaderRect.set(section, headerAttr.frame.clone())
+                this.allHeaderAttributes.push(headerAttr)
+
+                // 更新整体内容高度
+                contentHeight = headerAttr.frame.yMax
+            }
+
+            // 将 top 配置应用到每个区  
+            contentHeight = contentHeight + this.top
+
+            // 获取这个区内的内容数量，注意这里传入的是 section  
+            let numberOfItems = collectionView.getNumberOfItems(section)
+
+            for (let item = 0; item < numberOfItems; item++) {
+
+                // 创建索引，注意这里的 section 已经改为正确的 section 了  
+                let indexPath = new YXIndexPath(section, item)
+
+                // 通过索引创建一个 cell 节点的布局属性
+                let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
+
+                // 通过索引获取这个节点的高度
+                let rowHeight = this.rowHeight instanceof Function ? this.rowHeight(indexPath) : this.rowHeight
+
+                // 确定这个节点的位置  
+                attr.frame.x = 0
+                attr.frame.width = contentWidth
+                attr.frame.height = rowHeight
+                attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
+
+                // 重要: 保存布局属性
+                this.attributes.push(attr)
+                this.allCellAttributes.push(attr)
+
+                // 更新当前内容高度
+                contentHeight = attr.frame.yMax
+            }
+
+            // 高度补一个底部间距，跟 top 一样，也是应用到每个区  
+            contentHeight = contentHeight + this.bottom
+
+            // 通过区索引创建一个区尾节点布局属性
+            let sectionFooterHeight = 0
+            if (this.sectionFooterHeight) {
+                sectionFooterHeight = this.sectionFooterHeight instanceof Function ? this.sectionFooterHeight(section) : this.sectionFooterHeight
+            }
+            if (sectionFooterHeight > 0) {
+                let footerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.FOOTER)
+
+                // 确定这个节点的位置  
+                footerAttr.frame.x = 0
+                footerAttr.frame.width = contentWidth
+                footerAttr.frame.height = sectionFooterHeight
+                footerAttr.frame.y = contentHeight
+
+                // 调整层级
+                footerAttr.zIndex = 1
+
+                // 重要: 保存布局属性
+                this.attributes.push(footerAttr)
+                this.originalFooterRect.set(section, footerAttr.frame.clone())
+                this.allFooterAttributes.push(footerAttr)
+
+                // 更新整体内容高度
+                contentHeight = footerAttr.frame.yMax
+            }
+        }
+
+        // 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动  
+        this.contentSize = new math.Size(contentWidth, contentHeight)
+    }
+
+    initOffset(collectionView: YXCollectionView): void {
+        // 列表首次刷新时，调整一下列表的偏移位置  
+        collectionView.scrollView.scrollToTop()
+    }
+
+    layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        let result = this.visibleElementsInRect(rect, collectionView)
+        if (this.sectionHeadersPinToVisibleBounds == false && this.sectionFootersPinToVisibleBounds == false) {
+            return result // 不需要调整节点位置，直接返回就好
+        }
+
+        let numberOfSections = collectionView.getNumberOfSections()
+        let scrollOffset = collectionView.scrollView.getScrollOffset()
+        for (let index = 0; index < result.length; index++) {
+            const element = result[index];
+            if (element.elementCategory === 'Supplementary') {
+
+                if (this.sectionHeadersPinToVisibleBounds && element.supplementaryKinds === YXTableLayout.SupplementaryKinds.HEADER) {
+                    const originalFrame = this.originalHeaderRect.get(element.indexPath.section)
+                    element.frame.y = originalFrame.y
+                    if (scrollOffset.y > originalFrame.y) {
+                        element.frame.y = scrollOffset.y
+                    }
+                    const nextOriginalFrame = this.getNextOriginalFrame(element.indexPath.section, YXTableLayout.SupplementaryKinds.FOOTER, numberOfSections)
+                    if (nextOriginalFrame) {
+                        if (element.frame.yMax > nextOriginalFrame.y) {
+                            element.frame.y = nextOriginalFrame.y - element.frame.height
+                        }
+                    }
+                }
+
+                if (this.sectionFootersPinToVisibleBounds && element.supplementaryKinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+                    let bottom = scrollOffset.y + collectionView.scrollView.view.height
+                    const originalFrame = this.originalFooterRect.get(element.indexPath.section)
+                    const previousOriginalFrame = this.getPreviousOriginalFrame(element.indexPath.section, YXTableLayout.SupplementaryKinds.HEADER)
+                    element.frame.y = originalFrame.y
+                    if (bottom < originalFrame.yMax) {
+                        element.frame.y = bottom - element.frame.height
+                        if (previousOriginalFrame) {
+                            if (element.frame.y < previousOriginalFrame.yMax) {
+                                element.frame.y = previousOriginalFrame.yMax
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return result
+    }
+
+    shouldUpdateAttributesZIndex(): boolean {
+        return this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds
+    }
+
+    shouldUpdateAttributesForBoundsChange(): boolean {
+        return this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds
+    }
+
+    /**
+     * 获取 `section` 下一个 header 或者 footer 的位置  
+     */
+    protected getNextOriginalFrame(section: number, kinds: _yx_table_layout_supplementary_kinds, total: number) {
+        if (section >= total) { return null }
+        if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
+            let result = this.originalHeaderRect.get(section)
+            if (result) { return result }
+            return this.getNextOriginalFrame(section, YXTableLayout.SupplementaryKinds.FOOTER, total)
+        }
+        if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+            let result = this.originalFooterRect.get(section)
+            if (result) { return result }
+            return this.getNextOriginalFrame(section + 1, YXTableLayout.SupplementaryKinds.HEADER, total)
+        }
+        return null
+    }
+
+    /**
+     * 获取 `section` 前一个 header 或者 footer 的位置  
+     */
+    protected getPreviousOriginalFrame(section: number, kinds: _yx_table_layout_supplementary_kinds) {
+        if (section < 0) { return null }
+        if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
+            let result = this.originalHeaderRect.get(section)
+            if (result) { return result }
+            return this.getPreviousOriginalFrame(section - 1, YXTableLayout.SupplementaryKinds.FOOTER)
+        }
+        if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+            let result = this.originalFooterRect.get(section)
+            if (result) { return result }
+            return this.getPreviousOriginalFrame(section, YXTableLayout.SupplementaryKinds.HEADER)
+        }
+        return null
+    }
+
+    /**
+     * 抽出来一个方法用来优化列表性能  
+     * 在优化之前，可以先看一下 @see YXLayout.layoutAttributesForElementsInRect 关于返回值的说明  
+     * 对于有序列表来说，一般都是可以通过二分查找来进行优化  
+     */
+    protected visibleElementsInRect(rect: math.Rect, collectionView: YXCollectionView) {
+        if (this.attributes.length <= 100) { return this.attributes } // 少量数据就不查了，直接返回全部  
+
+        let result: YXLayoutAttributes[] = []
+
+        // header 跟 footer 暂时不考虑，数据相对来说不算很多，直接全部返回  
+        result.push(...this.allHeaderAttributes)
+        result.push(...this.allFooterAttributes)
+
+        // 关于 cell，这里用二分查找来优化一下  
+        // 首先通过二分先查出个大概位置  
+        let midIdx = -1
+        let left = 0
+        let right = this.allCellAttributes.length - 1
+
+        while (left <= right && right >= 0) {
+            let mid = left + (right - left) / 2
+            mid = Math.floor(mid)
+            let attr = this.allCellAttributes[mid]
+            if (rect.intersects(attr.frame)) {
+                midIdx = mid
+                break
+            }
+            if (rect.yMax < attr.frame.yMin || rect.xMax < attr.frame.xMin) {
+                right = mid - 1
+            } else {
+                left = mid + 1
+            }
+        }
+
+        // 二分查找出错了，返回全部的布局属性  
+        if (midIdx < 0) {
+            return this.attributes
+        }
+
+        // 把模糊查到这个先加进来
+        result.push(this.allCellAttributes[midIdx])
+
+        // 然后依次往前检查，直到超出当前的显示范围  
+        let startIdx = midIdx
+        while (startIdx > 0) {
+            let idx = startIdx - 1
+            let attr = this.allCellAttributes[idx]
+            if (rect.intersects(attr.frame) == false) {
+                break
+            }
+            result.push(attr)
+            startIdx = idx
+        }
+
+        // 依次往后检查，直到超出当前的显示范围  
+        let endIdx = midIdx
+        while (endIdx < this.allCellAttributes.length - 1) {
+            let idx = endIdx + 1
+            let attr = this.allCellAttributes[idx]
+            if (rect.intersects(attr.frame) == false) {
+                break
+            }
+            result.push(attr)
+            endIdx = idx
+        }
+
+        return result
+    }
+}
+
+

package/assets/lib/collectView/lib_collect/yx-table-layout.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "952a15e3-b44b-49eb-b09c-df418ba5a6c3",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/collectView/lib_collect.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "1bb2bf39-991d-44bf-85d0-fdfc16f4144d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/{video/list.meta → lib/collectView.meta}

@@ -1,9 +1,9 @@
-{
-  "ver": "1.2.0",
-  "importer": "directory",
-  "imported": true,
-  "uuid": "c4221e61-65e7-45ad-b33a-ab1ee494586c",
-  "files": [],
-  "subMetas": {},
-  "userData": {}
-}
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "3e16331d-321f-4cff-86f3-d1740e9f5915",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/tableView/IListView.ts

@@ -0,0 +1,17 @@
+import { Size, Node } from "cc";
+import { ListView } from "./ListView";
+
+export interface IIndexPath {
+    row: number;
+}
+export interface ILayout {
+    horizontalSpacing: number;
+    verticalSpacing: number;
+}
+export interface IListView {
+    cellForItemAt(indexPath: IIndexPath, collectionView: ListView): Node;
+    numberOfItems(): number;
+    onTouchCellAt(indexPath: IIndexPath);
+    itemSize(): Size;
+    moveFinish?(indexPath: IIndexPath);
+}

package/assets/lib/tableView/IListView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "afcba0d7-2455-45d3-af24-db4650301eb6",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/tableView/ListView.ts

@@ -0,0 +1,197 @@
+import { _decorator, Component, Enum, NodePool, Prefab, ScrollView, Size, UITransform, utils, v2, v3 } from 'cc';
+import { IIndexPath, ILayout, IListView } from './IListView';
+import { Sprite } from 'cc';
+import { Color } from 'cc';
+import { Vec2 } from 'cc';
+import { EventTouch } from 'cc';
+import { Vec3 } from 'cc';
+import { Node } from 'cc';
+import { Layers, Widget } from 'cc';
+const { ccclass, property } = _decorator;
+
+@ccclass(`register_element_info`)
+export class register_element_info {
+    @property({ type: Prefab, tooltip: `cell 节点预制体，必须配置` })
+    prefab: Prefab = null
+    @property({ tooltip: `节点重用标识符，必须配置` })
+    identifier: string = ``
+    // @property({ tooltip: `节点挂载的自定义组件\n如果需要监听 NodePool 的重用/回收事件，确保你的自定义组件已经实现了 YXCollectionViewCell 接口并配置此属性为你的自定义组件名\n如果不需要，可以忽略此配置` })
+    // comp: string = ``
+}
+
+
+export class node_element_comp extends Component {
+    /**
+     * 此节点是通过哪个标识符创建的
+     */
+    identifier: string
+    node: Node;
+    row: number;
+    col: number;
+    row_data: number;
+}
+
+/**
+ * 定义列表的滚动方向  
+ */
+export enum collection_view_scroll_direction {
+    /**
+     * 水平滚动
+     */
+    HORIZONTAL,
+
+    /**
+     * 垂直滚动
+     */
+    VERTICAL,
+}
+Enum(collection_view_scroll_direction)
+export enum DirectionScroll {
+    UP,
+    DOWN,
+    NONE,
+}
+
+
+@ccclass('scroll_config')
+export class scroll_config {
+    @property({ type: Node, tooltip: `content` })
+    content: Node = null;
+    @property({ type: collection_view_scroll_direction, tooltip: `列表滚动方向` })
+    scrollDirection: collection_view_scroll_direction = collection_view_scroll_direction.HORIZONTAL
+    @property({ type: [register_element_info], visible: true, displayName: `Register Cells`, tooltip: `配置此列表内需要用到的 cell 节点类型` })
+    registerCell: register_element_info[] = []
+    @property({ displayName: `最大显示cell数量` })
+    maxShowCount = 7;
+    @property({ displayName: `中间大两边小` })
+    isScale: boolean = false;
+    @property({ displayName: `循环滚动>>>>` })
+    isLoop: boolean = false;
+    @property({ displayName: `cell间隔` })
+    cellSpace: number = 20
+    @property({
+        visible() {
+            return !this.isLoop
+        }, displayName: `cell间隔左`
+    })
+    cellSpaceLeft: number = 20
+    @property({
+        visible() {
+            return !this.isLoop
+        }, displayName: `cell间隔右`
+    })
+    cellSpaceRight: number = 20
+
+    @property({ displayName: `整页滚动>>>>` })
+    isPage: boolean = false
+
+    @property({
+        visible() {
+            return this.isPage
+        }, displayName: `轻扫时间`
+    })
+    swipeTime = 0.5;
+    @property({
+        visible() {
+            return this.isPage || this.isCenter
+        }, displayName: `居中动画时间`
+    })
+    pageTime = 0.4
+    @property({
+        visible() {
+            return !this.isLoop
+        }, displayName: `停止后cell居中`
+    })
+    isCenter: boolean = false
+}
+@ccclass('ListView')
+export class ListView extends ScrollView {
+    @property({ serializable: true, type: scroll_config, visible: true, displayName: `配置滚动` })
+    config: scroll_config = new scroll_config();
+
+
+    public delegate: IListView
+    protected contentUT: UITransform;
+    public nodeUT: UITransform;
+    protected cellPool: Map<string, NodePool> = new Map()
+    protected cellListAll: Node[] = []
+    protected visbleCellList: node_element_comp[] = []
+    numberOfItems = 0;
+    itemSize = new Size();
+
+    scrollDir: number;
+    isReload: boolean = false;
+    lastOffset: Vec2;
+    isRighthHua = false;
+    isScroll = true;
+    public init() {
+        this.elastic = false
+        this.bounceDuration = 0
+    }
+    public reloadData() {
+
+    }
+    public moveToRow(index: number, time = 0.2) {
+
+    }
+
+    //子类重写
+    dequeueReusableCell(identifier: string, indexPath: IIndexPath): Node {
+        return null
+    }
+
+    putNode(cell: Node) {
+        const view = cell.getComponent(node_element_comp)
+        this.cellPool.get(view.identifier).put(cell)
+        //console.log(this.cellPool.get(view.identifier))
+    }
+
+
+    inBox(box1: UITransform, box2: UITransform, inBox: boolean): boolean {
+        // 获取 box 和 box2 的边界框
+        const rect1 = this.getBoxRect(box1)
+        const rect2 = this.getBoxRect(box2)
+        // 检查 box 的四个边是否都在 box2 的边界框内
+        let isInside = false;
+        if (inBox) {
+            isInside =
+                rect1.minX <= rect2.minX && // box 左边界在 box2 左边界右侧
+                rect1.maxX >= rect2.maxX && // box 右边界在 box2 右边界左侧
+                rect1.minY <= rect2.minY && // box 下边界在 box2 下边界上侧
+                rect1.maxY >= rect2.maxY;   // box 上边界在 box2 上边界下侧
+        } else {
+            isInside =
+                rect1.minX > rect2.maxX ||
+                rect1.maxX < rect2.minX || // box 右边界在 box2 右边界左侧
+                rect1.minY > rect2.maxY || // box 下边界在 box2 下边界上侧
+                rect1.maxY < rect2.minY;   // box 上边界在 box2 上边界下侧
+        }
+        return isInside;
+    };
+
+    getBoxRect(box: UITransform) {
+        const min_x = box.node.worldPosition.x - box.width * 0.5
+        const max_x = box.node.worldPosition.x + box.width * 0.5
+        const minY = box.node.worldPosition.y - box.height * 0.5
+        const maxY = box.node.worldPosition.y + box.height * 0.5
+        return { minX: min_x, maxX: max_x, minY: minY, maxY: maxY }
+    };
+
+
+    public CreateNnode(name: string, isWidget: boolean = true) {
+        const node = new Node(name);
+        node.addComponent(UITransform)
+        node.layer = Layers.Enum.UI_2D;
+        if (isWidget) {
+            const w: Widget = node.addComponent(Widget);
+            w.isAlignLeft = w.isAlignRight = w.isAlignTop = w.isAlignBottom = true;
+            w.left = w.right = w.top = w.bottom = 0;
+            w.alignMode = 2;
+            w.enabled = true;
+        }
+
+        return node;
+    }
+
+
+}

package/assets/lib/tableView/ListView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "cacea2ef-1572-4b38-94fc-71ca11e3709e",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}