lyb-pixi-js 1.13.0 → 1.13.2

package/Components/Base/LibPixiBorderRect.d.ts

@@ -0,0 +1,39 @@
+import { Graphics } from "pixi.js";
+/** @description 矩形描边参数 */
+export interface LibPixiBorderRectParams {
+    /** 宽度 */
+    width: number;
+    /** 高度 */
+    height: number;
+    /** 圆角 */
+    radius?: number;
+    /** 描边宽度 */
+    lineWidth?: number;
+    /** 描边颜色 */
+    color?: string | number;
+    /** 描边透明度 */
+    alpha?: number;
+    /** 内缩偏移 */
+    inset?: number;
+}
+/** @description Pixi矩形描边 */
+export declare class LibPixiBorderRect extends Graphics {
+    /** 宽度 */
+    private readonly _widthValue;
+    /** 高度 */
+    private readonly _heightValue;
+    /** 圆角 */
+    private readonly _radius;
+    /** 描边宽度 */
+    private readonly _lineWidth;
+    /** 描边颜色 */
+    private readonly _color;
+    /** 描边透明度 */
+    private readonly _alphaValue;
+    /** 内缩偏移 */
+    private readonly _inset;
+    /** @description 创建矩形描边 */
+    constructor(params: LibPixiBorderRectParams);
+    /** @description 重绘描边 */
+    private _drawBorder;
+}

package/Components/Base/LibPixiBorderRect.js

@@ -0,0 +1,29 @@
+import { Graphics } from "pixi.js";
+/** @description Pixi矩形描边 */
+export class LibPixiBorderRect extends Graphics {
+    /** @description 创建矩形描边 */
+    constructor(params) {
+        var _a, _b, _c, _d, _e;
+        super();
+        this._widthValue = params.width;
+        this._heightValue = params.height;
+        this._radius = (_a = params.radius) !== null && _a !== void 0 ? _a : 0;
+        this._lineWidth = (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 1;
+        this._color = (_c = params.color) !== null && _c !== void 0 ? _c : "#ffffff";
+        this._alphaValue = (_d = params.alpha) !== null && _d !== void 0 ? _d : 1;
+        this._inset = (_e = params.inset) !== null && _e !== void 0 ? _e : 0;
+        this._drawBorder();
+    }
+    /** @description 重绘描边 */
+    _drawBorder() {
+        const drawWidth = Math.max(0, this._widthValue - this._inset * 2);
+        const drawHeight = Math.max(0, this._heightValue - this._inset * 2);
+        this.clear();
+        this.lineStyle(this._lineWidth, this._color, this._alphaValue);
+        if (this._radius > 0) {
+            this.drawRoundedRect(this._inset, this._inset, drawWidth, drawHeight, this._radius);
+            return;
+        }
+        this.drawRect(this._inset, this._inset, drawWidth, drawHeight);
+    }
+}

package/Components/Base/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./LibPixiArc.js";
 export * from "./LibPixiBit.js";
 export * from "./LibPixiBitText.js";
+export * from "./LibPixiBorderRect.js";
 export * from "./LibPixiCircular.js";
 export * from "./LibPixiContainer.js";
 export * from "./LibPixiHtmlText.js";

package/Components/Base/index.js

@@ -1,6 +1,7 @@
 export * from "./LibPixiArc.js";
 export * from "./LibPixiBit.js";
 export * from "./LibPixiBitText.js";
+export * from "./LibPixiBorderRect.js";
 export * from "./LibPixiCircular.js";
 export * from "./LibPixiContainer.js";
 export * from "./LibPixiHtmlText.js";

package/Components/Custom/LibPixiFlex.d.ts

@@ -0,0 +1,105 @@
+import { Container, Sprite } from "pixi.js";
+/** @description 布局方向 */
+export type LibPixiFlexDirection = "row" | "column";
+/** @description 列推进方向 */
+export type LibPixiFlexColumnDirection = "ltr" | "rtl";
+/** @description 主轴对齐方式 */
+export type LibPixiFlexJustifyContent = "start" | "space-between";
+/** @description 交叉轴对齐方式 */
+export type LibPixiFlexAlignItems = "start" | "center";
+/** @description 布局配置 */
+export interface LibPixiFlexOptions {
+    /** 布局方向 */
+    direction?: LibPixiFlexDirection;
+    /** 统一内边距 */
+    padding?: number;
+    /** 横向内边距 */
+    paddingX?: number;
+    /** 纵向内边距 */
+    paddingY?: number;
+    /** 上内边距 */
+    paddingTop?: number;
+    /** 右内边距 */
+    paddingRight?: number;
+    /** 下内边距 */
+    paddingBottom?: number;
+    /** 左内边距 */
+    paddingLeft?: number;
+    /** 滚动可视高度 */
+    scrollHeight?: number;
+    /** 是否显示测试背景 */
+    showBg?: boolean;
+    /** 测试背景颜色 */
+    bgColor?: string;
+    /** 主轴对齐方式 */
+    justifyContent?: LibPixiFlexJustifyContent;
+    /** 交叉轴对齐方式 */
+    alignItems?: LibPixiFlexAlignItems;
+    /** 子项间距 */
+    gap?: number;
+    /** 行间距 */
+    rowGap?: number;
+    /** 列间距 */
+    columnGap?: number;
+    /** 最大宽度 */
+    maxWidth?: number;
+    /** 最大高度 */
+    maxHeight?: number;
+    /** 列推进方向 */
+    columnDirection?: LibPixiFlexColumnDirection;
+}
+/** @description Pixi弹性布局骨架类 */
+export declare class LibPixiFlex extends Container {
+    /** 布局子项 */
+    private readonly _items;
+    /** 布局内容容器 */
+    private readonly _content;
+    /** 测试背景 */
+    private readonly _bg;
+    /** 滚动容器 */
+    private readonly _scrollContainer?;
+    /** 布局配置 */
+    private readonly _options;
+    /** @description 创建Pixi弹性布局骨架类 */
+    constructor(items: Container[], options?: LibPixiFlexOptions);
+    /** @description 创建Pixi弹性布局骨架类 */
+    constructor(items: Sprite[], options?: LibPixiFlexOptions);
+    /** @description 执行布局 */
+    layout(): this;
+    /** @description 统一修正子项基准点 */
+    private _normalizeItemsPivot;
+    /** @description 重绘测试背景 */
+    private _renderBg;
+    /** @description 更新滚动容器尺寸 */
+    private _updateScrollContainer;
+    /** @description 获取背景可视区域包围盒 */
+    private _getBgViewportBounds;
+    /** @description 获取可视区域包围盒 */
+    private _getViewportBounds;
+    /** @description 获取可视宽度 */
+    private _getViewportWidth;
+    /** @description 获取内容包围盒 */
+    private _getContentBounds;
+    /** @description 执行横向布局 */
+    private _layoutRow;
+    /** @description 执行纵向布局 */
+    private _layoutColumn;
+    /** @description 获取横向布局主轴间距 */
+    private _getRowGap;
+    /** @description 获取纵向布局主轴间距 */
+    private _getColumnGap;
+    /** @description 获取布局内边距 */
+    private _getPadding;
+    /** @description 获取可用内容宽度 */
+    private _getContentWidth;
+    /** @description 获取可用内容高度 */
+    private _getContentHeight;
+    /** @description 获取横向布局子项纵坐标 */
+    private _getRowItemY;
+    /** @description 获取纵向布局子项横坐标 */
+    private _getColumnItemX;
+    /** @description 创建横向行分组 */
+    private _createRowGroups;
+    /** @description 创建纵向列分组 */
+    private _createColumnGroups;
+}

package/Components/Custom/LibPixiFlex.js

@@ -0,0 +1,313 @@
+import { Container, Graphics } from "pixi.js";
+import { LibPixiScrollContainerY } from "./LibPixiScrollContainerY.js";
+/** @description Pixi弹性布局骨架类 */
+export class LibPixiFlex extends Container {
+    /** @description 创建Pixi弹性布局骨架类 */
+    constructor(items, options = {}) {
+        super();
+        this._items = items;
+        this._options = options;
+        this._content = new Container();
+        this._bg = new Graphics();
+        this._normalizeItemsPivot();
+        this.addChild(this._bg);
+        if (this._items.length > 0) {
+            this._content.addChild(...this._items);
+        }
+        if (this._options.scrollHeight) {
+            this._scrollContainer = new LibPixiScrollContainerY({
+                width: 1,
+                height: this._options.scrollHeight,
+                scrollContent: this._content,
+                scrollbarRgiht: LibPixiScrollContainerY.scrollbarStyle.scrollbarRgiht,
+                scrollbarWidth: LibPixiScrollContainerY.scrollbarStyle.scrollbarWidth,
+                scrollbarColor: LibPixiScrollContainerY.scrollbarStyle.scrollbarColor,
+            });
+            this.addChild(this._scrollContainer);
+        }
+        else {
+            this.addChild(this._content);
+        }
+        this.layout();
+    }
+    /** @description 执行布局 */
+    layout() {
+        var _a;
+        const direction = (_a = this._options.direction) !== null && _a !== void 0 ? _a : "row";
+        if (direction === "column") {
+            this._layoutColumn();
+            this._updateScrollContainer();
+            this._renderBg();
+            return this;
+        }
+        this._layoutRow();
+        this._updateScrollContainer();
+        this._renderBg();
+        return this;
+    }
+    /** @description 统一修正子项基准点 */
+    _normalizeItemsPivot() {
+        this._items.forEach((item) => {
+            const { x, y } = item.getLocalBounds();
+            item.pivot.x = x;
+            item.pivot.y = y;
+        });
+    }
+    /** @description 重绘测试背景 */
+    _renderBg() {
+        var _a;
+        this._bg.clear();
+        if (this._options.showBg === false) {
+            return;
+        }
+        const { width, height } = this._getBgViewportBounds();
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        this._bg.beginFill((_a = this._options.bgColor) !== null && _a !== void 0 ? _a : "#000000");
+        this._bg.drawRect(0, 0, width, height);
+        this._bg.endFill();
+    }
+    /** @description 更新滚动容器尺寸 */
+    _updateScrollContainer() {
+        if (!this._scrollContainer || !this._options.scrollHeight) {
+            return;
+        }
+        const { width } = this._getContentBounds();
+        const viewportWidth = this._getViewportWidth(width);
+        this._scrollContainer.position.set(0, 0);
+        this._scrollContainer.setDimensions(viewportWidth, this._options.scrollHeight);
+    }
+    /** @description 获取背景可视区域包围盒 */
+    _getBgViewportBounds() {
+        if (this._options.scrollHeight !== undefined) {
+            const { width } = this._getContentBounds();
+            return {
+                width: this._getViewportWidth(width),
+                height: this._options.scrollHeight,
+            };
+        }
+        return this._getViewportBounds();
+    }
+    /** @description 获取可视区域包围盒 */
+    _getViewportBounds() {
+        if (this._scrollContainer) {
+            return {
+                width: this._scrollContainer.width,
+                height: this._scrollContainer.height,
+            };
+        }
+        const { width, height } = this._getContentBounds();
+        return {
+            width,
+            height,
+        };
+    }
+    /** @description 获取可视宽度 */
+    _getViewportWidth(contentWidth) {
+        if (this._options.maxWidth !== undefined) {
+            return this._options.maxWidth;
+        }
+        return contentWidth;
+    }
+    /** @description 获取内容包围盒 */
+    _getContentBounds() {
+        const { width, height } = this._content.getLocalBounds();
+        const padding = this._getPadding();
+        return {
+            width: width + padding.left + padding.right,
+            height: height + padding.top + padding.bottom,
+        };
+    }
+    /** @description 执行横向布局 */
+    _layoutRow() {
+        const rowGroups = this._createRowGroups();
+        const padding = this._getPadding();
+        let rowStartY = padding.top;
+        rowGroups.forEach((group, groupIndex) => {
+            var _a;
+            const currentGap = this._getRowGap(group);
+            let currentX = padding.left;
+            group.items.forEach((item, itemIndex) => {
+                item.x = currentX;
+                item.y = this._getRowItemY(rowStartY, group.crossSize, item.height);
+                if (itemIndex < group.items.length - 1) {
+                    currentX += item.width + currentGap;
+                }
+            });
+            if (groupIndex < rowGroups.length - 1) {
+                rowStartY += group.crossSize + ((_a = this._options.rowGap) !== null && _a !== void 0 ? _a : 0);
+            }
+        });
+    }
+    /** @description 执行纵向布局 */
+    _layoutColumn() {
+        var _a;
+        const columnGroups = this._createColumnGroups();
+        const columnDirection = (_a = this._options.columnDirection) !== null && _a !== void 0 ? _a : "ltr";
+        const padding = this._getPadding();
+        let columnStartX = padding.left;
+        columnGroups.forEach((group, groupIndex) => {
+            var _a, _b;
+            const currentGap = this._getColumnGap(group);
+            let currentY = padding.top;
+            if (groupIndex > 0) {
+                const prevGroup = columnGroups[groupIndex - 1];
+                if (columnDirection === "rtl") {
+                    columnStartX -= ((_a = this._options.columnGap) !== null && _a !== void 0 ? _a : 0) + group.crossSize;
+                }
+                else {
+                    columnStartX += prevGroup.crossSize + ((_b = this._options.columnGap) !== null && _b !== void 0 ? _b : 0);
+                }
+            }
+            group.items.forEach((item, itemIndex) => {
+                item.x = this._getColumnItemX(columnStartX, group.crossSize, item.width);
+                item.y = currentY;
+                if (itemIndex < group.items.length - 1) {
+                    currentY += item.height + currentGap;
+                }
+            });
+        });
+    }
+    /** @description 获取横向布局主轴间距 */
+    _getRowGap(group) {
+        var _a, _b, _c, _d;
+        const justifyContent = (_a = this._options.justifyContent) !== null && _a !== void 0 ? _a : "start";
+        if (justifyContent !== "space-between") {
+            return (_b = this._options.gap) !== null && _b !== void 0 ? _b : 0;
+        }
+        if (group.items.length <= 1 || this._options.maxWidth === undefined) {
+            return (_c = this._options.gap) !== null && _c !== void 0 ? _c : 0;
+        }
+        const contentWidth = this._getContentWidth(this._options.maxWidth);
+        const remainWidth = contentWidth - group.mainSize;
+        return ((_d = this._options.gap) !== null && _d !== void 0 ? _d : 0) + remainWidth / (group.items.length - 1);
+    }
+    /** @description 获取纵向布局主轴间距 */
+    _getColumnGap(group) {
+        var _a, _b, _c, _d;
+        const justifyContent = (_a = this._options.justifyContent) !== null && _a !== void 0 ? _a : "start";
+        if (justifyContent !== "space-between") {
+            return (_b = this._options.gap) !== null && _b !== void 0 ? _b : 0;
+        }
+        if (group.items.length <= 1 || this._options.maxHeight === undefined) {
+            return (_c = this._options.gap) !== null && _c !== void 0 ? _c : 0;
+        }
+        const contentHeight = this._getContentHeight(this._options.maxHeight);
+        const remainHeight = contentHeight - group.mainSize;
+        return ((_d = this._options.gap) !== null && _d !== void 0 ? _d : 0) + remainHeight / (group.items.length - 1);
+    }
+    /** @description 获取布局内边距 */
+    _getPadding() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const padding = (_a = this._options.padding) !== null && _a !== void 0 ? _a : 0;
+        const paddingX = (_b = this._options.paddingX) !== null && _b !== void 0 ? _b : padding;
+        const paddingY = (_c = this._options.paddingY) !== null && _c !== void 0 ? _c : padding;
+        return {
+            top: (_d = this._options.paddingTop) !== null && _d !== void 0 ? _d : paddingY,
+            right: (_e = this._options.paddingRight) !== null && _e !== void 0 ? _e : paddingX,
+            bottom: (_f = this._options.paddingBottom) !== null && _f !== void 0 ? _f : paddingY,
+            left: (_g = this._options.paddingLeft) !== null && _g !== void 0 ? _g : paddingX,
+        };
+    }
+    /** @description 获取可用内容宽度 */
+    _getContentWidth(totalWidth) {
+        const padding = this._getPadding();
+        return Math.max(0, totalWidth - padding.left - padding.right);
+    }
+    /** @description 获取可用内容高度 */
+    _getContentHeight(totalHeight) {
+        const padding = this._getPadding();
+        return Math.max(0, totalHeight - padding.top - padding.bottom);
+    }
+    /** @description 获取横向布局子项纵坐标 */
+    _getRowItemY(rowStartY, rowHeight, itemHeight) {
+        var _a;
+        const alignItems = (_a = this._options.alignItems) !== null && _a !== void 0 ? _a : "start";
+        if (alignItems === "start") {
+            return rowStartY;
+        }
+        return rowStartY + (rowHeight - itemHeight) / 2;
+    }
+    /** @description 获取纵向布局子项横坐标 */
+    _getColumnItemX(columnStartX, columnWidth, itemWidth) {
+        var _a;
+        const alignItems = (_a = this._options.alignItems) !== null && _a !== void 0 ? _a : "start";
+        if (alignItems === "start") {
+            return columnStartX;
+        }
+        return columnStartX + (columnWidth - itemWidth) / 2;
+    }
+    /** @description 创建横向行分组 */
+    _createRowGroups() {
+        var _a;
+        const groups = [];
+        let currentItems = [];
+        let currentMainSize = 0;
+        let currentCrossSize = 0;
+        const maxWidth = this._options.maxWidth === undefined ? undefined : this._getContentWidth(this._options.maxWidth);
+        const gap = (_a = this._options.gap) !== null && _a !== void 0 ? _a : 0;
+        this._items.forEach((item) => {
+            const itemWidth = item.width;
+            const itemHeight = item.height;
+            const nextMainSize = currentItems.length === 0 ? itemWidth : currentMainSize + gap + itemWidth;
+            if (currentItems.length > 0 && maxWidth !== undefined && nextMainSize > maxWidth) {
+                groups.push({
+                    items: currentItems,
+                    mainSize: currentMainSize,
+                    crossSize: currentCrossSize,
+                });
+                currentItems = [];
+                currentMainSize = 0;
+                currentCrossSize = 0;
+            }
+            currentItems.push(item);
+            currentMainSize = currentItems.length === 1 ? itemWidth : currentMainSize + gap + itemWidth;
+            currentCrossSize = Math.max(currentCrossSize, itemHeight);
+        });
+        if (currentItems.length > 0) {
+            groups.push({
+                items: currentItems,
+                mainSize: currentMainSize,
+                crossSize: currentCrossSize,
+            });
+        }
+        return groups;
+    }
+    /** @description 创建纵向列分组 */
+    _createColumnGroups() {
+        var _a;
+        const groups = [];
+        let currentItems = [];
+        let currentMainSize = 0;
+        let currentCrossSize = 0;
+        const maxHeight = this._options.maxHeight === undefined ? undefined : this._getContentHeight(this._options.maxHeight);
+        const gap = (_a = this._options.gap) !== null && _a !== void 0 ? _a : 0;
+        this._items.forEach((item) => {
+            const itemWidth = item.width;
+            const itemHeight = item.height;
+            const nextMainSize = currentItems.length === 0 ? itemHeight : currentMainSize + gap + itemHeight;
+            if (currentItems.length > 0 && maxHeight !== undefined && nextMainSize > maxHeight) {
+                groups.push({
+                    items: currentItems,
+                    mainSize: currentMainSize,
+                    crossSize: currentCrossSize,
+                });
+                currentItems = [];
+                currentMainSize = 0;
+                currentCrossSize = 0;
+            }
+            currentItems.push(item);
+            currentMainSize = currentItems.length === 1 ? itemHeight : currentMainSize + gap + itemHeight;
+            currentCrossSize = Math.max(currentCrossSize, itemWidth);
+        });
+        if (currentItems.length > 0) {
+            groups.push({
+                items: currentItems,
+                mainSize: currentMainSize,
+                crossSize: currentCrossSize,
+            });
+        }
+        return groups;
+    }
+}

package/Components/Custom/LibPixiGrid.d.ts

@@ -0,0 +1,97 @@
+import { Container, Sprite } from "pixi.js";
+/** @description 网格布局方向 */
+export type LibPixiGridDirection = "row" | "column";
+/** @description 网格列推进方向 */
+export type LibPixiGridColumnDirection = "ltr" | "rtl";
+/** @description 网格布局参数 */
+export interface LibPixiGridOptions {
+    /** 网格布局方向 */
+    direction?: LibPixiGridDirection;
+    /** 每行或每列个数 */
+    count: number;
+    /** 滚动可视宽度 */
+    scrollWidth?: number;
+    /** 行间隔 */
+    rowGap?: number;
+    /** 列间隔 */
+    columnGap?: number;
+    /** 统一内边距 */
+    padding?: number;
+    /** 横向内边距 */
+    paddingX?: number;
+    /** 纵向内边距 */
+    paddingY?: number;
+    /** 上内边距 */
+    paddingTop?: number;
+    /** 右内边距 */
+    paddingRight?: number;
+    /** 下内边距 */
+    paddingBottom?: number;
+    /** 左内边距 */
+    paddingLeft?: number;
+    /** 列推进方向 */
+    columnDirection?: LibPixiGridColumnDirection;
+    /** 滚动可视高度 */
+    scrollHeight?: number;
+    /** 滚动条右边距 */
+    scrollbarRight?: number;
+    /** 滚动条宽度 */
+    scrollbarWidth?: number;
+    /** 滚动条颜色 */
+    scrollbarColor?: string;
+    /** 滚动内容顶部留白 */
+    scrollMarginTop?: number;
+    /** 滚动内容底部留白 */
+    scrollMarginBottom?: number;
+    /** 是否显示测试背景 */
+    showBg?: boolean;
+    /** 测试背景颜色 */
+    bgColor?: string;
+}
+/** @description Pixi网格布局组件 */
+export declare class LibPixiGrid extends Container {
+    /** 布局子项 */
+    private readonly _items;
+    /** 布局内容容器 */
+    private readonly _content;
+    /** 测试背景 */
+    private readonly _bg;
+    /** 滚动容器 */
+    private readonly _scrollContainer?;
+    /** 布局配置 */
+    private readonly _options;
+    /** @description 创建Pixi网格布局组件 */
+    constructor(items: Container[], options: LibPixiGridOptions);
+    /** @description 创建Pixi网格布局组件 */
+    constructor(items: Sprite[], options: LibPixiGridOptions);
+    /** @description 执行布局 */
+    layout(): this;
+    /** @description 统一修正子项基准点 */
+    private _normalizeItemsPivot;
+    /** @description 重绘测试背景 */
+    private _renderBg;
+    /** @description 执行横向网格布局 */
+    private _layoutRow;
+    /** @description 执行纵向网格布局 */
+    private _layoutColumn;
+    /** @description 创建横向行分组 */
+    private _createRowGroups;
+    /** @description 创建纵向列分组 */
+    private _createColumnGroups;
+    /** @description 创建网格分组 */
+    private _createGroup;
+    /** @description 更新滚动容器尺寸 */
+    private _updateScrollContainer;
+    /** @description 获取背景可视区域包围盒 */
+    private _getBgViewportBounds;
+    /** @description 获取可视区域包围盒 */
+    private _getViewportBounds;
+    /** @description 获取可视宽度 */
+    private _getViewportWidth;
+    /** @description 获取内容包围盒 */
+    private _getContentBounds;
+    /** @description 获取子项包围盒 */
+    private _getItemsBounds;
+    /** @description 获取布局内边距 */
+    private _getPadding;
+}