Source: scene/sprite-nine-slice/NineSliceGeometry.ts

import { PlaneGeometry } from '../mesh-plane/PlaneGeometry';

/**
 * Options for the NineSliceGeometry.
 * @memberof scene
 */
export interface NineSliceGeometryOptions
{

    /** The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
    width?: number
    /** The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
    height?: number
    /** The original width of the texture */
    originalWidth?: number
    /** The original height of the texture */
    originalHeight?: number
    /** The width of the left column. */
    leftWidth?: number
    /** The height of the top row. */
    topHeight?: number
    /** The width of the right column. */
    rightWidth?: number
    /** The height of the bottom row. */
    bottomHeight?: number
}

/**
 * The NineSliceGeometry class allows you to create a NineSlicePlane object.
 * @memberof scene
 */
export class NineSliceGeometry extends PlaneGeometry
{
    /** The default options for the NineSliceGeometry. */
    public static defaultOptions: NineSliceGeometryOptions = {
        /** The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
        width: 100,
        /** The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
        height: 100,
        /** The width of the left column. */
        leftWidth: 10,
        /** The height of the top row. */
        topHeight: 10,
        /** The width of the right column. */
        rightWidth: 10,
        /** The height of the bottom row. */
        bottomHeight: 10,

        /** The original width of the texture */
        originalWidth: 100,
        /** The original height of the texture */
        originalHeight: 100,
    };

    public _leftWidth: number;
    public _rightWidth: number;
    public _topHeight: number;
    public _bottomHeight: number;

    private _originalWidth: number;
    private _originalHeight: number;

    constructor(options: NineSliceGeometryOptions = {})
    {
        options = { ...NineSliceGeometry.defaultOptions, ...options };

        super({
            width: options.width,
            height: options.height,
            verticesX: 4,
            verticesY: 4,
        });

        this.update(options);
    }

    /**
     * Updates the NineSliceGeometry with the options.
     * @param options - The options of the NineSliceGeometry.
     */
    public update(options: NineSliceGeometryOptions)
    {
        this.width = options.width ?? this.width;
        this.height = options.height ?? this.height;
        this._originalWidth = options.originalWidth ?? this._originalWidth;
        this._originalHeight = options.originalHeight ?? this._originalHeight;
        this._leftWidth = options.leftWidth ?? this._leftWidth;
        this._rightWidth = options.rightWidth ?? this._rightWidth;
        this._topHeight = options.topHeight ?? this._topHeight;
        this._bottomHeight = options.bottomHeight ?? this._bottomHeight;

        this.updateUvs();
        this.updatePositions();
    }

    /** Updates the positions of the vertices. */
    public updatePositions()
    {
        const positions = this.positions;

        const w = this._leftWidth + this._rightWidth;
        const scaleW = this.width > w ? 1.0 : this.width / w;

        const h = this._topHeight + this._bottomHeight;
        const scaleH = this.height > h ? 1.0 : this.height / h;

        const scale = Math.min(scaleW, scaleH);

        positions[9] = positions[11] = positions[13] = positions[15] = this._topHeight * scale;
        positions[17] = positions[19] = positions[21] = positions[23] = this.height - (this._bottomHeight * scale);
        positions[25] = positions[27] = positions[29] = positions[31] = this.height;

        positions[2] = positions[10] = positions[18] = positions[26] = this._leftWidth * scale;
        positions[4] = positions[12] = positions[20] = positions[28] = this.width - (this._rightWidth * scale);
        positions[6] = positions[14] = positions[22] = positions[30] = this.width;

        this.getBuffer('aPosition').update();
    }

    /** Updates the UVs of the vertices. */
    public updateUvs()
    {
        const uvs = this.uvs;

        uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0;
        uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0;

        uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1;
        uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1;

        const _uvw = 1.0 / this._originalWidth;
        const _uvh = 1.0 / this._originalHeight;

        uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth;
        uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight;

        uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth);
        uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight);

        this.getBuffer('aUV').update();
    }
}