const { ccclass, property, executeInEditMode, requireComponent } = cc._decorator;

/** Editable rounded panels; geometry follows the prefab node size, with no generated child nodes. */
@ccclass
@executeInEditMode
@requireComponent(cc.Graphics)
export default class CloudRiseSurface extends cc.Component {
    @property radius = 25;
    @property borderWidth = 0;
    @property fillOpacity = 255;
    @property tailSize = 0;
    @property(cc.Color) borderColor = cc.color(182, 132, 245);
    private previous = "";
    onEnable(): void { this.previous = ""; this.update(); }
    update(): void {
        const key = [this.node.width, this.node.height, this.node.color.toHEX(), this.radius, this.borderWidth, this.fillOpacity, this.tailSize, this.borderColor.toHEX()].join(":");
        if (key === this.previous) return;
        this.previous = key;
        const g = this.getComponent(cc.Graphics); g.clear();
        const fill = this.node.color; fill.a = this.fillOpacity; g.fillColor = fill;
        g.strokeColor = this.borderColor; g.lineWidth = this.borderWidth;
        g.roundRect(-this.node.width / 2, -this.node.height / 2, this.node.width, this.node.height, this.radius);
        g.fill(); if (this.borderWidth > 0) g.stroke();
        if (this.tailSize > 0) {
            const y = -this.node.height / 2;
            g.moveTo(-this.tailSize, y + 2); g.lineTo(0, y - this.tailSize); g.lineTo(this.tailSize, y + 2);
            g.close(); g.fill();
        }
    }
}