@eva/plugin-renderer-mask 2.1.0-beta.2 → 2.1.0-beta.3

package/dist/plugin-renderer-mask.esm.js

@@ -1,448 +0,0 @@
-import { Component, OBSERVER_TYPE, decorators, resource } from '@eva/eva.js';
-import { type } from '@eva/inspector-decorator';
-import { Renderer, RendererSystem } from '@eva/plugin-renderer';
-import { Graphics, Sprite } from '@eva/renderer-adapter';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var MASK_TYPE;
-(function (MASK_TYPE) {
-    MASK_TYPE["Circle"] = "Circle";
-    MASK_TYPE["Ellipse"] = "Ellipse";
-    MASK_TYPE["Rect"] = "Rect";
-    MASK_TYPE["RoundedRect"] = "RoundedRect";
-    MASK_TYPE["Polygon"] = "Polygon";
-    MASK_TYPE["Img"] = "Img";
-    MASK_TYPE["Sprite"] = "Sprite";
-})(MASK_TYPE || (MASK_TYPE = {}));
-/**
- * 遮罩组件
- *
- * Mask 组件用于裁剪游戏对象的显示区域，只显示遮罩形状内的内容。
- * 支持多种遮罩形状（矩形、圆形、多边形、图片、精灵等），
- * 适用于头像裁剪、窗口遮罩、特殊形状显示等场景。
- *
- * 遮罩类型：
- * - Circle - 圆形遮罩
- * - Ellipse - 椭圆形遮罩
- * - Rect - 矩形遮罩
- * - RoundedRect - 圆角矩形遮罩
- * - Polygon - 多边形遮罩
- * - Img - 图片遮罩（基于图片 alpha 通道）
- * - Sprite - 精灵遮罩
- *
- * @example
- * ```typescript
- * // 圆形头像遮罩
- * const avatar = new GameObject('avatar');
- * avatar.addComponent(new Img({ resource: 'userAvatar' }));
- * avatar.addComponent(new Mask({
- *   type: MASK_TYPE.Circle,
- *   style: {
- *     x: 50, // 圆心 x
- *     y: 50, // 圆心 y
- *     radius: 50 // 半径
- *   }
- * }));
- *
- * // 矩形遮罩
- * avatar.addComponent(new Mask({
- *   type: MASK_TYPE.Rect,
- *   style: {
- *     x: 0, y: 0,
- *     width: 100,
- *     height: 100
- *   }
- * }));
- *
- * // 使用图片作为遮罩
- * avatar.addComponent(new Mask({
- *   type: MASK_TYPE.Img,
- *   resource: 'maskImage' // alpha 通道作为遮罩
- * }));
- * ```
- */
-class Mask$2 extends Component {
-    constructor(params) {
-        super(params);
-        /** 遮罩类型 */
-        // @decorators.IDEProp 复杂编辑后续添加
-        this.type = MASK_TYPE.Rect;
-        /** 遮罩样式配置 */
-        // @decorators.IDEProp 复杂编辑后续添加
-        this.style = {};
-        this.x = 0;
-        this.y = 0;
-        /** 遮罩图片资源名称（用于 Img 类型） */
-        this.resource = '';
-        /** 遮罩精灵名称（用于 Sprite 类型） */
-        this.spriteName = '';
-        /** 是否启用遮罩 */
-        this.enabled = true;
-        this.init(params);
-    }
-    /**
-     * 初始化组件
-     * @param obj - 初始化参数
-     */
-    init(obj) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        if (!obj)
-            return;
-        const { style } = obj, rest = __rest(obj, ["style"]);
-        Object.assign(this, rest);
-        this.style = Object.assign(Object.assign(Object.assign({}, this.style), style), { x: (_d = (_b = (_a = obj.x) !== null && _a !== void 0 ? _a : style === null || style === void 0 ? void 0 : style.x) !== null && _b !== void 0 ? _b : (_c = this.style) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : this.x, y: (_h = (_f = (_e = obj.y) !== null && _e !== void 0 ? _e : style === null || style === void 0 ? void 0 : style.y) !== null && _f !== void 0 ? _f : (_g = this.style) === null || _g === void 0 ? void 0 : _g.y) !== null && _h !== void 0 ? _h : this.y, radius: (_k = (_j = obj.radius) !== null && _j !== void 0 ? _j : style === null || style === void 0 ? void 0 : style.radius) !== null && _k !== void 0 ? _k : (_l = this.style) === null || _l === void 0 ? void 0 : _l.radius, width: (_o = (_m = obj.width) !== null && _m !== void 0 ? _m : style === null || style === void 0 ? void 0 : style.width) !== null && _o !== void 0 ? _o : (_p = this.style) === null || _p === void 0 ? void 0 : _p.width, height: (_r = (_q = obj.height) !== null && _q !== void 0 ? _q : style === null || style === void 0 ? void 0 : style.height) !== null && _r !== void 0 ? _r : (_s = this.style) === null || _s === void 0 ? void 0 : _s.height, paths: (_u = (_t = obj.paths) !== null && _t !== void 0 ? _t : style === null || style === void 0 ? void 0 : style.paths) !== null && _u !== void 0 ? _u : (_v = this.style) === null || _v === void 0 ? void 0 : _v.paths });
-        this.x = (_w = this.style.x) !== null && _w !== void 0 ? _w : 0;
-        this.y = (_x = this.style.y) !== null && _x !== void 0 ? _x : 0;
-        this.radius = this.style.radius;
-        this.width = this.style.width;
-        this.height = this.style.height;
-        this.paths = this.style.paths;
-    }
-    destroy() {
-        return this;
-    }
-}
-/** 组件名称 */
-Mask$2.componentName = 'Mask';
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Mask$2.prototype, "x", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Mask$2.prototype, "y", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Mask$2.prototype, "radius", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Mask$2.prototype, "width", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Mask$2.prototype, "height", void 0);
-__decorate([
-    type('string'),
-    __metadata("design:type", String)
-], Mask$2.prototype, "resource", void 0);
-__decorate([
-    type('string'),
-    __metadata("design:type", String)
-], Mask$2.prototype, "spriteName", void 0);
-__decorate([
-    type('boolean'),
-    __metadata("design:type", Boolean)
-], Mask$2.prototype, "enabled", void 0);
-
-const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
-const propertyForGraphics = {
-    Circle: ['x', 'y', 'radius'],
-    Ellipse: ['x', 'y', 'width', 'height'],
-    Rect: ['x', 'y', 'width', 'height'],
-    RoundedRect: ['x', 'y', 'width', 'height', 'radius'],
-    Polygon: ['paths'],
-};
-const functionForGraphics = {
-    Circle: 'circle',
-    Ellipse: 'ellipse',
-    Rect: 'rect',
-    RoundedRect: 'roundRect',
-    Polygon: 'poly',
-};
-const maskTypeAliases = {
-    circle: MASK_TYPE.Circle,
-    ellipse: MASK_TYPE.Ellipse,
-    rect: MASK_TYPE.Rect,
-    roundedrect: MASK_TYPE.RoundedRect,
-    roundedRect: MASK_TYPE.RoundedRect,
-    polygon: MASK_TYPE.Polygon,
-    img: MASK_TYPE.Img,
-    image: MASK_TYPE.Img,
-    sprite: MASK_TYPE.Sprite,
-};
-function normalizeMaskType(type) {
-    if (!type)
-        return undefined;
-    if (Object.values(MASK_TYPE).includes(type))
-        return type;
-    return maskTypeAliases[String(type)] || maskTypeAliases[String(type).toLowerCase()];
-}
-let Mask = class Mask extends Renderer {
-    constructor() {
-        super(...arguments);
-        this.name = 'MaskSystem';
-        this.changedCache = {};
-        this.maskSpriteCache = {};
-    }
-    init() {
-        this.renderSystem = this.game.getSystem(RendererSystem);
-        this.renderSystem.rendererManager.register(this);
-    }
-    rendererUpdate() {
-        this.changedCache = {};
-    }
-    componentChanged(changed) {
-        if (changed.component.name !== 'Mask')
-            return;
-        switch (changed.type) {
-            case OBSERVER_TYPE.ADD:
-                this.add(changed);
-                break;
-            case OBSERVER_TYPE.REMOVE:
-                this.remove(changed);
-                break;
-            case OBSERVER_TYPE.CHANGE:
-                this.change(changed);
-                break;
-        }
-    }
-    add(changed) {
-        const component = changed.component;
-        if (component.enabled === false)
-            return;
-        const maskType = normalizeMaskType(component.type);
-        if (!maskType) {
-            throw new Error('no have Mask type: ' + component.type);
-        }
-        if (!component.style) {
-            throw new Error('no have Mask style: ' + component.type);
-        }
-        let mask;
-        switch (maskType) {
-            case MASK_TYPE.Circle:
-                mask = this.createGraphics(component);
-                break;
-            case MASK_TYPE.Ellipse:
-                mask = this.createGraphics(component);
-                break;
-            case MASK_TYPE.Rect:
-                mask = this.createGraphics(component);
-                break;
-            case MASK_TYPE.RoundedRect:
-                mask = this.createGraphics(component);
-                break;
-            case MASK_TYPE.Polygon:
-                mask = this.createGraphics(component);
-                break;
-            case MASK_TYPE.Img:
-                mask = this.createSprite(component);
-                break;
-            case MASK_TYPE.Sprite:
-                mask = this.createSprite(component);
-                break;
-        }
-        if (!mask) {
-            throw new Error('no have mask instance, check your mask params: ' + component.type);
-        }
-        const container = this.containerManager.getContainer(changed.gameObject.id);
-        container.mask = mask;
-        container.addChild(mask);
-    }
-    remove(changed) {
-        const container = this.containerManager.getContainer(changed.gameObject.id);
-        if (!(container === null || container === void 0 ? void 0 : container.mask))
-            return;
-        container.removeChild(container.mask);
-        container.mask.destroy({ children: true });
-        container.mask = null;
-        delete this.maskSpriteCache[changed.gameObject.id];
-    }
-    change(changed) {
-        if (this.changedCache[changed.gameObject.id])
-            return;
-        const component = changed.component;
-        if (changed.prop.prop[0] === 'enabled') {
-            this.changedCache[changed.gameObject.id] = true;
-            if (component.enabled === false) {
-                this.remove(changed);
-            }
-            else {
-                this.add(changed);
-            }
-            return;
-        }
-        if (changed.prop.prop[0] === 'type') {
-            this.changedCache[changed.gameObject.id] = true;
-            const maskType = normalizeMaskType(component.type);
-            const lastType = normalizeMaskType(component._lastType);
-            if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(maskType) > -1 || lastType !== maskType) {
-                this.remove(changed);
-                this.add(changed);
-                component._lastType = component.type;
-            }
-            else {
-                this.redrawGraphics(changed);
-            }
-        }
-        else if (['style', 'x', 'y', 'radius', 'width', 'height', 'paths'].indexOf(changed.prop.prop[0]) > -1) {
-            this.syncComponentStyle(component);
-            const maskType = normalizeMaskType(component.type);
-            if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(maskType) > -1) {
-                this.changeSpriteStyle(component);
-            }
-            else {
-                this.redrawGraphics(changed);
-            }
-        }
-        else if (changed.prop.prop[0] === 'resource') {
-            this.changedCache[changed.gameObject.id] = true;
-            this.changeSprite(component);
-        }
-        else if (changed.prop.prop[0] === 'spriteName') {
-            this.changedCache[changed.gameObject.id] = true;
-            this.changeSprite(component);
-        }
-    }
-    createGraphics(component) {
-        const graphics = new Graphics();
-        this.draw(graphics, component);
-        return graphics;
-    }
-    redrawGraphics(changed) {
-        const container = this.containerManager.getContainer(changed.gameObject.id);
-        const graphics = container.mask;
-        graphics.clear();
-        this.draw(graphics, changed.component);
-    }
-    draw(graphics, component) {
-        const maskType = normalizeMaskType(component.type);
-        const style = this.syncComponentStyle(component);
-        const params = [];
-        for (const key of propertyForGraphics[maskType]) {
-            params.push(style[key]);
-        }
-        // @ts-ignore
-        graphics[functionForGraphics[maskType]](...params);
-        graphics.fill(0x000000);
-    }
-    createSprite(component) {
-        const sprite = new Sprite(null);
-        this.maskSpriteCache[component.gameObject.id] = sprite;
-        this.setSprite(component, sprite);
-        return sprite.sprite;
-    }
-    changeSpriteStyle(component) {
-        const sprite = this.maskSpriteCache[component.gameObject.id];
-        sprite.sprite.width = component.style.width;
-        sprite.sprite.height = component.style.height;
-        sprite.sprite.position.x = component.style.x;
-        sprite.sprite.position.y = component.style.y;
-    }
-    changeSprite(component) {
-        const sprite = this.maskSpriteCache[component.gameObject.id];
-        this.setSprite(component, sprite);
-    }
-    setSprite(component, sprite) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const maskType = normalizeMaskType(component.type);
-            let res;
-            try {
-                const asyncId = this.increaseAsyncId(component.gameObject.id);
-                res = yield resource.getResource(component.resource);
-                if (!this.validateAsyncId(component.gameObject.id, asyncId))
-                    return;
-            }
-            catch (e) {
-                throw new Error('mask resource load error');
-            }
-            if (maskType === MASK_TYPE.Sprite) {
-                const img = component.resource + resourceKeySplit + component.spriteName;
-                const texture = (_a = res === null || res === void 0 ? void 0 : res.instance) === null || _a === void 0 ? void 0 : _a[img];
-                if (texture) {
-                    sprite.image = texture;
-                }
-            }
-            else {
-                if ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) {
-                    sprite.image = res.data.image;
-                }
-            }
-            sprite.sprite.width = component.style.width;
-            sprite.sprite.height = component.style.height;
-            sprite.sprite.position.x = component.style.x;
-            sprite.sprite.position.y = component.style.y;
-        });
-    }
-    syncComponentStyle(component) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        component.style = Object.assign(Object.assign({}, component.style), { x: (_c = (_a = component.x) !== null && _a !== void 0 ? _a : (_b = component.style) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0, y: (_f = (_d = component.y) !== null && _d !== void 0 ? _d : (_e = component.style) === null || _e === void 0 ? void 0 : _e.y) !== null && _f !== void 0 ? _f : 0, radius: (_g = component.radius) !== null && _g !== void 0 ? _g : (_h = component.style) === null || _h === void 0 ? void 0 : _h.radius, width: (_j = component.width) !== null && _j !== void 0 ? _j : (_k = component.style) === null || _k === void 0 ? void 0 : _k.width, height: (_l = component.height) !== null && _l !== void 0 ? _l : (_m = component.style) === null || _m === void 0 ? void 0 : _m.height, paths: (_o = component.paths) !== null && _o !== void 0 ? _o : (_p = component.style) === null || _p === void 0 ? void 0 : _p.paths });
-        return component.style;
-    }
-};
-Mask.systemName = 'MaskSystem';
-Mask = __decorate([
-    decorators.componentObserver({
-        Mask: [
-            'type',
-            { prop: ['style'], deep: true },
-            'x',
-            'y',
-            'radius',
-            'width',
-            'height',
-            'paths',
-            'resource',
-            'spriteName',
-            'enabled',
-        ],
-    })
-], Mask);
-var Mask$1 = Mask;
-
-export { MASK_TYPE, Mask$2 as Mask, Mask$1 as MaskSystem };