KnitFlow/assets/module_basic/element/container/ContainerView.ts

import { _decorator, CCInteger, color, Color, Component, EventTouch, Graphics, instantiate, Label, Mask, Node, PolygonCollider2D, Prefab, sp, Sprite, SpriteAtlas, SpriteFrame, tween, UITransform, Vec2, Vec3 } from 'cc';
import { Container, KnittPathGroup } from './Container';

const { ccclass, property } = _decorator;

@ccclass('ContainerView')
export class ContainerView extends Component {

    container: Container
    @property(Prefab)
    Knitt: Prefab = null

    @property(Prefab)
    KnittLink: Prefab = null

    @property(Node)
    KnittFlow: Node = null;

    @property([SpriteFrame])
    emptyCell: SpriteFrame[]= [];

    private cellNodes: Node[][] = [];
    private touchCallbacks: {
        onTouchStart?: (cellIndex: number, groupIndex: number, event: EventTouch) => void;
        onTouchMove?: (cellIndex: number, groupIndex: number, event: EventTouch) => void;
        onTouchEnd?: (cellIndex: number, groupIndex: number, event: EventTouch) => void;
    } = {};

    init(container: Container) {
        this.container = container
        container.view = this.node
    }

    setemptyCell(emptyCell: SpriteFrame[]) {
        this.emptyCell = emptyCell;
    }
    setTouchCallbacks(
        onTouchStart: (cellIndex: number, groupIndex: number, event: EventTouch) => void,
        onTouchMove: (cellIndex: number, groupIndex: number, event: EventTouch) => void,
        onTouchEnd: (cellIndex: number, groupIndex: number, event: EventTouch) => void
    ) {
        this.touchCallbacks = { onTouchStart, onTouchMove, onTouchEnd };
    }

    setupKnittPaths(cellNodes: Node[][], boardCols: number, boardRows: number) {
        this.cellNodes = cellNodes;

        if (!this.Knitt) {
            console.warn('Knitt预制体未设置');
            return;
        }

        this.container.pathGroups.forEach((pathGroup) => {
            const { path, groupIndex } = pathGroup;

            if (path.length >= 2) {
                const startIndex = path[0];
                const endIndex = path[path.length - 1];

                this.createKnittAtCell(startIndex, groupIndex, boardCols, boardRows);
                this.createKnittAtCell(endIndex, groupIndex, boardCols, boardRows);
            }
        });
    }

    // 创建Knitt（修改后的版本）
    private createKnittAtCell(cellIndex: number, groupIndex: number, boardCols: number, boardRows: number) {
        const { row, col } = this.getRowColFromIndex(cellIndex, boardCols);

        if (row >= 0 && row < boardRows && col >= 0 && col < boardCols) {
            const cellNode = this.cellNodes[row][col];
            if (cellNode && this.KnittFlow) { // 确保KnittFlow存在
                const knittNode = instantiate(this.Knitt);

                // 将Knitt节点设置为KnittFlow的子节点
                knittNode.setParent(this.KnittFlow);

                // 获取格子节点的世界坐标
                const worldPos = cellNode.worldPosition;

                // 将世界坐标转换为KnittFlow节点的本地坐标
                const localPos = new Vec3();
                this.KnittFlow.inverseTransformPoint(localPos, worldPos);

                knittNode.setPosition(localPos);

                this.setupKnittProperties(knittNode, groupIndex);

                // 绑定触摸事件
                this.setupKnittTouchEvents(knittNode, cellIndex, groupIndex);
            }
        }
    }

    // 设置Knitt触摸事件
    private setupKnittTouchEvents(knittNode: Node, cellIndex: number, groupIndex: number) {
        knittNode.on(Node.EventType.TOUCH_START, (event: EventTouch) => {
            this.playSelectAnimation(knittNode);
            if (this.touchCallbacks.onTouchStart) {
                this.touchCallbacks.onTouchStart(cellIndex, groupIndex, event);
            }
        });

        knittNode.on(Node.EventType.TOUCH_MOVE, (event: EventTouch) => {
            if (this.touchCallbacks.onTouchMove) {
                this.touchCallbacks.onTouchMove(cellIndex, groupIndex, event);
            }
        });

        knittNode.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
            if (this.touchCallbacks.onTouchEnd) {
                this.touchCallbacks.onTouchEnd(cellIndex, groupIndex, event);
            }
        });

        knittNode.on(Node.EventType.TOUCH_CANCEL, (event: EventTouch) => {
            if (this.touchCallbacks.onTouchEnd) {
                this.touchCallbacks.onTouchEnd(cellIndex, groupIndex, event);
            }
        });
    }

    // 根据索引获取行列坐标
    getRowColFromIndex(index: number, boardCols: number): { row: number, col: number } {
        const row = Math.floor(index / boardCols);
        const col = index % boardCols;
        return { row, col };
    }

    // 设置Knitt的属性
    private setupKnittProperties(knittNode: Node, groupIndex: number) {
        const colorIndex = groupIndex % this.emptyCell.length;
        const emsp = this.emptyCell[colorIndex];
        const sprite = knittNode.getComponent(Sprite);
        if (sprite) {
            sprite.spriteFrame = emsp;
        }
    }

    // 播放选择动画
    playSelectAnimation(node: Node) {
        if (node) {
            tween(node)
                .to(0.1, { scale: new Vec3(1.2, 1.2, 1.2) })
                .to(0.1, { scale: new Vec3(1, 1, 1) })
                .start();
        }
    }
}