@eva/plugin-renderer-mask - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0-beta.1

dist/EVA.plugin.renderer.mask.js

@@ -7,2 +7,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
   'use strict';
+  function __rest$1(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) {
@@ -15,2 +23,5 @@ var c = arguments.length,
   }
+  function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+  }
   function __awaiter(thisArg, _arguments, P, generator) {
@@ -43,19 +54,102 @@ function adopt(value) {
   }
-  function getIDEPropsPropertyObj(target, propertyKey) {
-    if (!target.constructor.IDEProps) {
-      target.constructor.IDEProps = {};
+  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]];
     }
-    if (!target.constructor.IDEProps[propertyKey]) {
-      target.constructor.IDEProps[propertyKey] = {};
+    return t;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+  class SymbolKeysNotSupportedError extends Error {
+    constructor() {
+      super('Symbol keys are not supported yet!');
+      Object.setPrototypeOf(this, new.target.prototype);
     }
-    var propertyObj = target.constructor.IDEProps[propertyKey];
-    return propertyObj;
   }
+  const IDE_PROPERTY_METADATA = 'IDE_PROPERTY_METADATA';
+  function transformBasicType(type) {
+    if (type === String) {
+      return 'string';
+    }
+    if (type === Number) {
+      return 'number';
+    }
+    if (type === Boolean) {
+      return 'boolean';
+    }
+    return 'unknown';
+  }
+  function defineLegacyIDEProp(target, propertyKey, patch) {
+    const constructor = target.constructor;
+    const current = constructor.IDEProps || {};
+    current[propertyKey] = _extends(_extends({
+      key: propertyKey
+    }, current[propertyKey]), patch);
+    constructor.IDEProps = current;
+  }
+  function defineTypes(target, key, options, returnTypeFunction) {
+    let type = Reflect.getMetadata('design:type', target, key);
+    let isArray = type === Array;
+    const str = transformBasicType(type);
+    if (str !== 'unknown') {
+      type = str;
+    }
+    if (returnTypeFunction) {
+      const returnType = returnTypeFunction();
+      if (Array.isArray(returnType)) {
+        isArray = true;
+        type = returnType[0];
+      } else {
+        type = returnType;
+      }
+    }
+    const properties = Reflect.getMetadata(IDE_PROPERTY_METADATA, target.constructor) || {};
+    const current = properties[key] || {};
+    const property = _extends(_extends(_extends({}, current), {
+      type,
+      isArray: isArray
+    }), options);
+    properties[key] = property;
+    Reflect.defineMetadata(IDE_PROPERTY_METADATA, properties, target.constructor);
+    const legacyProperty = __rest(property, ["isArray"]);
+    defineLegacyIDEProp(target, key, legacyProperty);
+  }
   function type(type) {
-    return function (target, propertyKey) {
-      var prop = getIDEPropsPropertyObj(target, propertyKey);
-      prop.key = propertyKey;
-      prop.type = type;
+    return Field({
+      type
+    });
+  }
+  function getTypeDecoratorParams(returnTypeFuncOrOptions, maybeOptions) {
+    if (typeof returnTypeFuncOrOptions === 'function') {
+      return {
+        returnTypeFunc: returnTypeFuncOrOptions,
+        options: maybeOptions || {}
+      };
+    }
+    return {
+      options: returnTypeFuncOrOptions || {}
     };
   }
+  function Field(returnTypeFunction, maybeOptions) {
+    return (target, propertyKey) => {
+      if (typeof propertyKey === 'symbol') {
+        throw new SymbolKeysNotSupportedError();
+      }
+      const {
+        options,
+        returnTypeFunc
+      } = getTypeDecoratorParams(returnTypeFunction, maybeOptions);
+      defineTypes(target, propertyKey, options, returnTypeFunc);
+    };
+  }
+  var ExecuteMode;
+  (function (ExecuteMode) {
+    ExecuteMode[ExecuteMode["Edit"] = 2] = "Edit";
+    ExecuteMode[ExecuteMode["Game"] = 4] = "Game";
+    ExecuteMode[ExecuteMode["All"] = 6] = "All";
+  })(ExecuteMode || (ExecuteMode = {}));
   exports.MASK_TYPE = void 0;
@@ -72,15 +166,49 @@ (function (MASK_TYPE) {
   class Mask$2 extends eva_js.Component {
-    constructor() {
-      super(...arguments);
+    constructor(params) {
+      super(params);
+      this.type = exports.MASK_TYPE.Rect;
       this.style = {};
+      this.x = 0;
+      this.y = 0;
       this.resource = '';
       this.spriteName = '';
+      this.enabled = true;
+      this.init(params);
     }
     init(obj) {
-      _extends(this, 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$1(obj, ["style"]);
+      _extends(this, rest);
+      this.style = _extends(_extends(_extends({}, 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('string')], Mask$2.prototype, "resource", void 0);
-  __decorate([type('string')], Mask$2.prototype, "spriteName", void 0);
+  __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_';
@@ -101,16 +229,22 @@ const propertyForGraphics = {
   };
-  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 = {}));
+  const maskTypeAliases = {
+    circle: exports.MASK_TYPE.Circle,
+    ellipse: exports.MASK_TYPE.Ellipse,
+    rect: exports.MASK_TYPE.Rect,
+    roundedrect: exports.MASK_TYPE.RoundedRect,
+    roundedRect: exports.MASK_TYPE.RoundedRect,
+    polygon: exports.MASK_TYPE.Polygon,
+    img: exports.MASK_TYPE.Img,
+    image: exports.MASK_TYPE.Img,
+    sprite: exports.MASK_TYPE.Sprite
+  };
+  function normalizeMaskType(type) {
+    if (!type) return undefined;
+    if (Object.values(exports.MASK_TYPE).includes(type)) return type;
+    return maskTypeAliases[String(type)] || maskTypeAliases[String(type).toLowerCase()];
+  }
   let Mask = class Mask extends pluginRenderer.Renderer {
     constructor() {
       super(...arguments);
-      this.name = 'Mask';
+      this.name = 'MaskSystem';
       this.changedCache = {};
@@ -142,3 +276,5 @@ this.maskSpriteCache = {};
       const component = changed.component;
-      if (!(component.type in MASK_TYPE)) {
+      if (component.enabled === false) return;
+      const maskType = normalizeMaskType(component.type);
+      if (!maskType) {
         throw new Error('no have Mask type: ' + component.type);
@@ -150,22 +286,22 @@ }
       let mask;
-      switch (component.type) {
-        case MASK_TYPE.Circle:
+      switch (maskType) {
+        case exports.MASK_TYPE.Circle:
           mask = this.createGraphics(component);
           break;
-        case MASK_TYPE.Ellipse:
+        case exports.MASK_TYPE.Ellipse:
           mask = this.createGraphics(component);
           break;
-        case MASK_TYPE.Rect:
+        case exports.MASK_TYPE.Rect:
           mask = this.createGraphics(component);
           break;
-        case MASK_TYPE.RoundedRect:
+        case exports.MASK_TYPE.RoundedRect:
           mask = this.createGraphics(component);
           break;
-        case MASK_TYPE.Polygon:
+        case exports.MASK_TYPE.Polygon:
           mask = this.createGraphics(component);
           break;
-        case MASK_TYPE.Img:
+        case exports.MASK_TYPE.Img:
           mask = this.createSprite(component);
           break;
-        case MASK_TYPE.Sprite:
+        case exports.MASK_TYPE.Sprite:
           mask = this.createSprite(component);
@@ -183,2 +319,3 @@ break;
       const container = this.containerManager.getContainer(changed.gameObject.id);
+      if (!(container === null || container === void 0 ? void 0 : container.mask)) return;
       container.removeChild(container.mask);
@@ -194,5 +331,16 @@ container.mask.destroy({
       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;
-        if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1 || component._lastType !== component.type) {
+        const maskType = normalizeMaskType(component.type);
+        const lastType = normalizeMaskType(component._lastType);
+        if ([exports.MASK_TYPE.Sprite, exports.MASK_TYPE.Img].indexOf(maskType) > -1 || lastType !== maskType) {
           this.remove(changed);
@@ -204,4 +352,6 @@ this.add(changed);
         }
-      } else if (changed.prop.prop[0] === 'style') {
-        if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1) {
+      } else if (['style', 'x', 'y', 'radius', 'width', 'height', 'paths'].indexOf(changed.prop.prop[0]) > -1) {
+        this.syncComponentStyle(component);
+        const maskType = normalizeMaskType(component.type);
+        if ([exports.MASK_TYPE.Sprite, exports.MASK_TYPE.Img].indexOf(maskType) > -1) {
           this.changeSpriteStyle(component);
@@ -231,7 +381,9 @@ } else {
     draw(graphics, component) {
+      const maskType = normalizeMaskType(component.type);
+      const style = this.syncComponentStyle(component);
       const params = [];
-      for (const key of propertyForGraphics[component.type]) {
-        params.push(component.style[key]);
+      for (const key of propertyForGraphics[maskType]) {
+        params.push(style[key]);
       }
-      graphics[functionForGraphics[component.type]](...params);
+      graphics[functionForGraphics[maskType]](...params);
       graphics.fill(0x000000);
@@ -259,2 +411,3 @@ }
       return __awaiter(this, void 0, void 0, function* () {
+        const maskType = normalizeMaskType(component.type);
         let res;
@@ -268,3 +421,3 @@ try {
         }
-        if (component.type === MASK_TYPE.Sprite) {
+        if (maskType === exports.MASK_TYPE.Sprite) {
           const img = component.resource + resourceKeySplit + component.spriteName;
@@ -286,4 +439,16 @@ const texture = (_a = res === null || res === void 0 ? void 0 : res.instance) === null || _a === void 0 ? void 0 : _a[img];
     }
+    syncComponentStyle(component) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+      component.style = _extends(_extends({}, 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 = 'Mask';
+  Mask.systemName = 'MaskSystem';
   Mask = __decorate([eva_js.decorators.componentObserver({
@@ -293,3 +458,3 @@ Mask: ['type', {
       deep: true
-    }, 'resource', 'spriteName']
+    }, 'x', 'y', 'radius', 'width', 'height', 'paths', 'resource', 'spriteName', 'enabled']
   })], Mask);
@@ -296,0 +461,0 @@ var Mask$1 = Mask;

dist/EVA.plugin.renderer.mask.min.js

@@ -1,1 +0,1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)({}).hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_mask=function(e,t,r,i){"use strict";function s(e,t,r,i){var s,n=arguments.length,o=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(o=(n<3?s(o):n>3?s(t,r,o):s(t,r))||o);return n>3&&o&&Object.defineProperty(t,r,o),o}function n(e,t,r,i){return new(r||(r=Promise))(function(s,n){function o(e){try{c(i.next(e))}catch(e){n(e)}}function a(e){try{c(i.throw(e))}catch(e){n(e)}}function c(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(o,a)}c((i=i.apply(e,t||[])).next())})}function o(e){return function(t,r){var i=function(e,t){return e.constructor.IDEProps||(e.constructor.IDEProps={}),e.constructor.IDEProps[t]||(e.constructor.IDEProps[t]={}),e.constructor.IDEProps[t]}(t,r);i.key=r,i.type=e}}e.MASK_TYPE=void 0,function(e){e.Circle="Circle",e.Ellipse="Ellipse",e.Rect="Rect",e.RoundedRect="RoundedRect",e.Polygon="Polygon",e.Img="Img",e.Sprite="Sprite"}(e.MASK_TYPE||(e.MASK_TYPE={}));class a extends t.Component{constructor(){super(...arguments),this.style={},this.resource="",this.spriteName=""}init(e){_extends(this,e)}}a.componentName="Mask",s([o("string")],a.prototype,"resource",void 0),s([o("string")],a.prototype,"spriteName",void 0);const c={Circle:["x","y","radius"],Ellipse:["x","y","width","height"],Rect:["x","y","width","height"],RoundedRect:["x","y","width","height","radius"],Polygon:["paths"]},p={Circle:"circle",Ellipse:"ellipse",Rect:"rect",RoundedRect:"roundRect",Polygon:"poly"};var h;!function(e){e.Circle="Circle",e.Ellipse="Ellipse",e.Rect="Rect",e.RoundedRect="RoundedRect",e.Polygon="Polygon",e.Img="Img",e.Sprite="Sprite"}(h||(h={}));let l=class extends r.Renderer{constructor(){super(...arguments),this.name="Mask",this.changedCache={},this.maskSpriteCache={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(){this.changedCache={}}componentChanged(e){if("Mask"===e.component.name)switch(e.type){case t.OBSERVER_TYPE.ADD:this.add(e);break;case t.OBSERVER_TYPE.REMOVE:this.remove(e);break;case t.OBSERVER_TYPE.CHANGE:this.change(e)}}add(e){const t=e.component;if(!(t.type in h))throw new Error("no have Mask type: "+t.type);if(!t.style)throw new Error("no have Mask style: "+t.type);let r;switch(t.type){case h.Circle:case h.Ellipse:case h.Rect:case h.RoundedRect:case h.Polygon:r=this.createGraphics(t);break;case h.Img:case h.Sprite:r=this.createSprite(t)}if(!r)throw new Error("no have mask instance, check your mask params: "+t.type);const i=this.containerManager.getContainer(e.gameObject.id);i.mask=r,i.addChild(r)}remove(e){const t=this.containerManager.getContainer(e.gameObject.id);t.removeChild(t.mask),t.mask.destroy({children:!0}),t.mask=null,delete this.maskSpriteCache[e.gameObject.id]}change(e){if(this.changedCache[e.gameObject.id])return;const t=e.component;"type"===e.prop.prop[0]?(this.changedCache[e.gameObject.id]=!0,[h.Sprite,h.Img].indexOf(t.type)>-1||t._lastType!==t.type?(this.remove(e),this.add(e),t._lastType=t.type):this.redrawGraphics(e)):"style"===e.prop.prop[0]?[h.Sprite,h.Img].indexOf(t.type)>-1?this.changeSpriteStyle(t):this.redrawGraphics(e):("resource"===e.prop.prop[0]||"spriteName"===e.prop.prop[0])&&(this.changedCache[e.gameObject.id]=!0,this.changeSprite(t))}createGraphics(e){const t=new i.Graphics;return this.draw(t,e),t}redrawGraphics(e){const t=this.containerManager.getContainer(e.gameObject.id).mask;t.clear(),this.draw(t,e.component)}draw(e,t){const r=[];for(const e of c[t.type])r.push(t.style[e]);e[p[t.type]](...r),e.fill(0)}createSprite(e){const t=new i.Sprite(null);return this.maskSpriteCache[e.gameObject.id]=t,this.setSprite(e,t),t.sprite}changeSpriteStyle(e){const t=this.maskSpriteCache[e.gameObject.id];t.sprite.width=e.style.width,t.sprite.height=e.style.height,t.sprite.position.x=e.style.x,t.sprite.position.y=e.style.y}changeSprite(e){const t=this.maskSpriteCache[e.gameObject.id];this.setSprite(e,t)}setSprite(e,r){var i,s;return n(this,void 0,void 0,function*(){let n;try{const r=this.increaseAsyncId(e.gameObject.id);if(n=yield t.resource.getResource(e.resource),!this.validateAsyncId(e.gameObject.id,r))return}catch(e){throw new Error("mask resource load error")}if(e.type===h.Sprite){const t=e.resource+"_s|r|c_"+e.spriteName,s=null===(i=null==n?void 0:n.instance)||void 0===i?void 0:i[t];s&&(r.image=s)}else(null===(s=null==n?void 0:n.data)||void 0===s?void 0:s.image)&&(r.image=n.data.image);r.sprite.width=e.style.width,r.sprite.height=e.style.height,r.sprite.position.x=e.style.x,r.sprite.position.y=e.style.y})}};l.systemName="Mask",l=s([t.decorators.componentObserver({Mask:["type",{prop:["style"],deep:!0},"resource","spriteName"]})],l);var d=l;return e.Mask=a,e.MaskSystem=d,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.mask=globalThis.EVA.plugin.renderer.mask||_EVA_IIFE_mask;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)({}).hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_mask=function(e,t,i,r){"use strict";function n(e,t,i,r){var n,s=arguments.length,o=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(o=(s<3?n(o):s>3?n(t,i,o):n(t,i))||o);return s>3&&o&&Object.defineProperty(t,i,o),o}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function o(e,t,i,r){return new(i||(i=Promise))(function(n,s){function o(e){try{a(r.next(e))}catch(e){s(e)}}function l(e){try{a(r.throw(e))}catch(e){s(e)}}function a(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(o,l)}a((r=r.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class l extends Error{constructor(){super("Symbol keys are not supported yet!"),Object.setPrototypeOf(this,new.target.prototype)}}const a="IDE_PROPERTY_METADATA";function d(e,t,i,r){let n=Reflect.getMetadata("design:type",e,t),s=n===Array;const o=function(e){return e===String?"string":e===Number?"number":e===Boolean?"boolean":"unknown"}(n);if("unknown"!==o&&(n=o),r){const e=r();Array.isArray(e)?(s=!0,n=e[0]):n=e}const l=Reflect.getMetadata(a,e.constructor)||{},d=_extends(_extends(_extends({},l[t]||{}),{type:n,isArray:s}),i);l[t]=d,Reflect.defineMetadata(a,l,e.constructor);!function(e,t,i){const r=e.constructor,n=r.IDEProps||{};n[t]=_extends(_extends({key:t},n[t]),i),r.IDEProps=n}(e,t,function(e,t){var i={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(i[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(i[r[n]]=e[r[n]])}return i}(d,["isArray"]))}function c(e){return t={type:e},(e,r)=>{if("symbol"==typeof r)throw new l;const{options:n,returnTypeFunc:s}=function(e,t){return"function"==typeof e?{returnTypeFunc:e,options:t||{}}:{options:e||{}}}(t,i);d(e,r,n,s)};var t,i}var p,h;!function(e){e[e.Edit=2]="Edit",e[e.Game=4]="Game",e[e.All=6]="All"}(p||(p={})),e.MASK_TYPE=void 0,(h=e.MASK_TYPE||(e.MASK_TYPE={})).Circle="Circle",h.Ellipse="Ellipse",h.Rect="Rect",h.RoundedRect="RoundedRect",h.Polygon="Polygon",h.Img="Img",h.Sprite="Sprite";class u extends t.Component{constructor(t){super(t),this.type=e.MASK_TYPE.Rect,this.style={},this.x=0,this.y=0,this.resource="",this.spriteName="",this.enabled=!0,this.init(t)}init(e){var t,i,r,n,s,o,l,a,d,c,p,h,u,y,g,v,m,f,E,S,b,_;if(!e)return;const{style:w}=e;_extends(this,function(e,t){var i={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(i[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(i[r[n]]=e[r[n]])}return i}(e,["style"])),this.style=_extends(_extends(_extends({},this.style),w),{x:null!==(n=null!==(i=null!==(t=e.x)&&void 0!==t?t:null==w?void 0:w.x)&&void 0!==i?i:null===(r=this.style)||void 0===r?void 0:r.x)&&void 0!==n?n:this.x,y:null!==(a=null!==(o=null!==(s=e.y)&&void 0!==s?s:null==w?void 0:w.y)&&void 0!==o?o:null===(l=this.style)||void 0===l?void 0:l.y)&&void 0!==a?a:this.y,radius:null!==(c=null!==(d=e.radius)&&void 0!==d?d:null==w?void 0:w.radius)&&void 0!==c?c:null===(p=this.style)||void 0===p?void 0:p.radius,width:null!==(u=null!==(h=e.width)&&void 0!==h?h:null==w?void 0:w.width)&&void 0!==u?u:null===(y=this.style)||void 0===y?void 0:y.width,height:null!==(v=null!==(g=e.height)&&void 0!==g?g:null==w?void 0:w.height)&&void 0!==v?v:null===(m=this.style)||void 0===m?void 0:m.height,paths:null!==(E=null!==(f=e.paths)&&void 0!==f?f:null==w?void 0:w.paths)&&void 0!==E?E:null===(S=this.style)||void 0===S?void 0:S.paths}),this.x=null!==(b=this.style.x)&&void 0!==b?b:0,this.y=null!==(_=this.style.y)&&void 0!==_?_:0,this.radius=this.style.radius,this.width=this.style.width,this.height=this.style.height,this.paths=this.style.paths}destroy(){return this}}u.componentName="Mask",n([c("number"),s("design:type",Number)],u.prototype,"x",void 0),n([c("number"),s("design:type",Number)],u.prototype,"y",void 0),n([c("number"),s("design:type",Number)],u.prototype,"radius",void 0),n([c("number"),s("design:type",Number)],u.prototype,"width",void 0),n([c("number"),s("design:type",Number)],u.prototype,"height",void 0),n([c("string"),s("design:type",String)],u.prototype,"resource",void 0),n([c("string"),s("design:type",String)],u.prototype,"spriteName",void 0),n([c("boolean"),s("design:type",Boolean)],u.prototype,"enabled",void 0);const y={Circle:["x","y","radius"],Ellipse:["x","y","width","height"],Rect:["x","y","width","height"],RoundedRect:["x","y","width","height","radius"],Polygon:["paths"]},g={Circle:"circle",Ellipse:"ellipse",Rect:"rect",RoundedRect:"roundRect",Polygon:"poly"},v={circle:e.MASK_TYPE.Circle,ellipse:e.MASK_TYPE.Ellipse,rect:e.MASK_TYPE.Rect,roundedrect:e.MASK_TYPE.RoundedRect,roundedRect:e.MASK_TYPE.RoundedRect,polygon:e.MASK_TYPE.Polygon,img:e.MASK_TYPE.Img,image:e.MASK_TYPE.Img,sprite:e.MASK_TYPE.Sprite};function m(t){if(t)return Object.values(e.MASK_TYPE).includes(t)?t:v[String(t)]||v[String(t).toLowerCase()]}let f=class extends i.Renderer{constructor(){super(...arguments),this.name="MaskSystem",this.changedCache={},this.maskSpriteCache={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(){this.changedCache={}}componentChanged(e){if("Mask"===e.component.name)switch(e.type){case t.OBSERVER_TYPE.ADD:this.add(e);break;case t.OBSERVER_TYPE.REMOVE:this.remove(e);break;case t.OBSERVER_TYPE.CHANGE:this.change(e)}}add(t){const i=t.component;if(!1===i.enabled)return;const r=m(i.type);if(!r)throw new Error("no have Mask type: "+i.type);if(!i.style)throw new Error("no have Mask style: "+i.type);let n;switch(r){case e.MASK_TYPE.Circle:case e.MASK_TYPE.Ellipse:case e.MASK_TYPE.Rect:case e.MASK_TYPE.RoundedRect:case e.MASK_TYPE.Polygon:n=this.createGraphics(i);break;case e.MASK_TYPE.Img:case e.MASK_TYPE.Sprite:n=this.createSprite(i)}if(!n)throw new Error("no have mask instance, check your mask params: "+i.type);const s=this.containerManager.getContainer(t.gameObject.id);s.mask=n,s.addChild(n)}remove(e){const t=this.containerManager.getContainer(e.gameObject.id);(null==t?void 0:t.mask)&&(t.removeChild(t.mask),t.mask.destroy({children:!0}),t.mask=null,delete this.maskSpriteCache[e.gameObject.id])}change(t){if(this.changedCache[t.gameObject.id])return;const i=t.component;if("enabled"===t.prop.prop[0])return this.changedCache[t.gameObject.id]=!0,void(!1===i.enabled?this.remove(t):this.add(t));if("type"===t.prop.prop[0]){this.changedCache[t.gameObject.id]=!0;const r=m(i.type),n=m(i._lastType);[e.MASK_TYPE.Sprite,e.MASK_TYPE.Img].indexOf(r)>-1||n!==r?(this.remove(t),this.add(t),i._lastType=i.type):this.redrawGraphics(t)}else if(["style","x","y","radius","width","height","paths"].indexOf(t.prop.prop[0])>-1){this.syncComponentStyle(i);const r=m(i.type);[e.MASK_TYPE.Sprite,e.MASK_TYPE.Img].indexOf(r)>-1?this.changeSpriteStyle(i):this.redrawGraphics(t)}else("resource"===t.prop.prop[0]||"spriteName"===t.prop.prop[0])&&(this.changedCache[t.gameObject.id]=!0,this.changeSprite(i))}createGraphics(e){const t=new r.Graphics;return this.draw(t,e),t}redrawGraphics(e){const t=this.containerManager.getContainer(e.gameObject.id).mask;t.clear(),this.draw(t,e.component)}draw(e,t){const i=m(t.type),r=this.syncComponentStyle(t),n=[];for(const e of y[i])n.push(r[e]);e[g[i]](...n),e.fill(0)}createSprite(e){const t=new r.Sprite(null);return this.maskSpriteCache[e.gameObject.id]=t,this.setSprite(e,t),t.sprite}changeSpriteStyle(e){const t=this.maskSpriteCache[e.gameObject.id];t.sprite.width=e.style.width,t.sprite.height=e.style.height,t.sprite.position.x=e.style.x,t.sprite.position.y=e.style.y}changeSprite(e){const t=this.maskSpriteCache[e.gameObject.id];this.setSprite(e,t)}setSprite(i,r){var n,s;return o(this,void 0,void 0,function*(){const o=m(i.type);let l;try{const e=this.increaseAsyncId(i.gameObject.id);if(l=yield t.resource.getResource(i.resource),!this.validateAsyncId(i.gameObject.id,e))return}catch(e){throw new Error("mask resource load error")}if(o===e.MASK_TYPE.Sprite){const e=i.resource+"_s|r|c_"+i.spriteName,t=null===(n=null==l?void 0:l.instance)||void 0===n?void 0:n[e];t&&(r.image=t)}else(null===(s=null==l?void 0:l.data)||void 0===s?void 0:s.image)&&(r.image=l.data.image);r.sprite.width=i.style.width,r.sprite.height=i.style.height,r.sprite.position.x=i.style.x,r.sprite.position.y=i.style.y})}syncComponentStyle(e){var t,i,r,n,s,o,l,a,d,c,p,h,u,y;return e.style=_extends(_extends({},e.style),{x:null!==(r=null!==(t=e.x)&&void 0!==t?t:null===(i=e.style)||void 0===i?void 0:i.x)&&void 0!==r?r:0,y:null!==(o=null!==(n=e.y)&&void 0!==n?n:null===(s=e.style)||void 0===s?void 0:s.y)&&void 0!==o?o:0,radius:null!==(l=e.radius)&&void 0!==l?l:null===(a=e.style)||void 0===a?void 0:a.radius,width:null!==(d=e.width)&&void 0!==d?d:null===(c=e.style)||void 0===c?void 0:c.width,height:null!==(p=e.height)&&void 0!==p?p:null===(h=e.style)||void 0===h?void 0:h.height,paths:null!==(u=e.paths)&&void 0!==u?u:null===(y=e.style)||void 0===y?void 0:y.paths}),e.style}};f.systemName="MaskSystem",f=n([t.decorators.componentObserver({Mask:["type",{prop:["style"],deep:!0},"x","y","radius","width","height","paths","resource","spriteName","enabled"]})],f);var E=f;return e.Mask=u,e.MaskSystem=E,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.mask=globalThis.EVA.plugin.renderer.mask||_EVA_IIFE_mask;

dist/plugin-renderer-mask.cjs.js

@@ -25,2 +25,14 @@ 'use strict';
 
+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) {
@@ -33,2 +45,6 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -107,7 +123,12 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 class Mask$2 extends eva_js.Component {
-    constructor() {
-        super(...arguments);
+    constructor(params) {
+        super(params);
+        /** 遮罩类型 */
+        // @decorators.IDEProp 复杂编辑后续添加
+        this.type = exports.MASK_TYPE.Rect;
         /** 遮罩样式配置 */
         // @decorators.IDEProp 复杂编辑后续添加
         this.style = {};
+        this.x = 0;
+        this.y = 0;
         /** 遮罩图片资源名称（用于 Img 类型） */
@@ -117,2 +138,5 @@ this.resource = '';
         this.spriteName = '';
+        /** 是否启用遮罩 */
+        this.enabled = true;
+        this.init(params);
     }
@@ -122,10 +146,20 @@ /**
      * @param obj - 初始化参数
-     * @param obj.type - 遮罩类型
-     * @param obj.style - 遮罩样式
-     * @param obj.resource - 遮罩资源（可选）
-     * @param obj.spriteName - 精灵名称（可选）
      */
     init(obj) {
-        Object.assign(this, 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;
+    }
 }
@@ -135,7 +169,33 @@ /** 组件名称 */
 __decorate([
-    inspectorDecorator.type('string')
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Mask$2.prototype, "x", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Mask$2.prototype, "y", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Mask$2.prototype, "radius", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Mask$2.prototype, "width", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Mask$2.prototype, "height", void 0);
+__decorate([
+    inspectorDecorator.type('string'),
+    __metadata("design:type", String)
 ], Mask$2.prototype, "resource", void 0);
 __decorate([
-    inspectorDecorator.type('string')
+    inspectorDecorator.type('string'),
+    __metadata("design:type", String)
 ], Mask$2.prototype, "spriteName", void 0);
+__decorate([
+    inspectorDecorator.type('boolean'),
+    __metadata("design:type", Boolean)
+], Mask$2.prototype, "enabled", void 0);
 
@@ -157,16 +217,24 @@ const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
 };
-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 = {}));
+const maskTypeAliases = {
+    circle: exports.MASK_TYPE.Circle,
+    ellipse: exports.MASK_TYPE.Ellipse,
+    rect: exports.MASK_TYPE.Rect,
+    roundedrect: exports.MASK_TYPE.RoundedRect,
+    roundedRect: exports.MASK_TYPE.RoundedRect,
+    polygon: exports.MASK_TYPE.Polygon,
+    img: exports.MASK_TYPE.Img,
+    image: exports.MASK_TYPE.Img,
+    sprite: exports.MASK_TYPE.Sprite,
+};
+function normalizeMaskType(type) {
+    if (!type)
+        return undefined;
+    if (Object.values(exports.MASK_TYPE).includes(type))
+        return type;
+    return maskTypeAliases[String(type)] || maskTypeAliases[String(type).toLowerCase()];
+}
 let Mask = class Mask extends pluginRenderer.Renderer {
     constructor() {
         super(...arguments);
-        this.name = 'Mask';
+        this.name = 'MaskSystem';
         this.changedCache = {};
@@ -199,3 +267,6 @@ this.maskSpriteCache = {};
         const component = changed.component;
-        if (!(component.type in MASK_TYPE)) {
+        if (component.enabled === false)
+            return;
+        const maskType = normalizeMaskType(component.type);
+        if (!maskType) {
             throw new Error('no have Mask type: ' + component.type);
@@ -207,22 +278,22 @@ }
         let mask;
-        switch (component.type) {
-            case MASK_TYPE.Circle:
+        switch (maskType) {
+            case exports.MASK_TYPE.Circle:
                 mask = this.createGraphics(component);
                 break;
-            case MASK_TYPE.Ellipse:
+            case exports.MASK_TYPE.Ellipse:
                 mask = this.createGraphics(component);
                 break;
-            case MASK_TYPE.Rect:
+            case exports.MASK_TYPE.Rect:
                 mask = this.createGraphics(component);
                 break;
-            case MASK_TYPE.RoundedRect:
+            case exports.MASK_TYPE.RoundedRect:
                 mask = this.createGraphics(component);
                 break;
-            case MASK_TYPE.Polygon:
+            case exports.MASK_TYPE.Polygon:
                 mask = this.createGraphics(component);
                 break;
-            case MASK_TYPE.Img:
+            case exports.MASK_TYPE.Img:
                 mask = this.createSprite(component);
                 break;
-            case MASK_TYPE.Sprite:
+            case exports.MASK_TYPE.Sprite:
                 mask = this.createSprite(component);
@@ -240,2 +311,4 @@ break;
         const container = this.containerManager.getContainer(changed.gameObject.id);
+        if (!(container === null || container === void 0 ? void 0 : container.mask))
+            return;
         container.removeChild(container.mask);
@@ -250,5 +323,17 @@ container.mask.destroy({ children: true });
         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;
-            if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1 || component._lastType !== component.type) {
+            const maskType = normalizeMaskType(component.type);
+            const lastType = normalizeMaskType(component._lastType);
+            if ([exports.MASK_TYPE.Sprite, exports.MASK_TYPE.Img].indexOf(maskType) > -1 || lastType !== maskType) {
                 this.remove(changed);
@@ -262,4 +347,6 @@ this.add(changed);
         }
-        else if (changed.prop.prop[0] === 'style') {
-            if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1) {
+        else if (['style', 'x', 'y', 'radius', 'width', 'height', 'paths'].indexOf(changed.prop.prop[0]) > -1) {
+            this.syncComponentStyle(component);
+            const maskType = normalizeMaskType(component.type);
+            if ([exports.MASK_TYPE.Sprite, exports.MASK_TYPE.Img].indexOf(maskType) > -1) {
                 this.changeSpriteStyle(component);
@@ -292,8 +379,10 @@ }
     draw(graphics, component) {
+        const maskType = normalizeMaskType(component.type);
+        const style = this.syncComponentStyle(component);
         const params = [];
-        for (const key of propertyForGraphics[component.type]) {
-            params.push(component.style[key]);
+        for (const key of propertyForGraphics[maskType]) {
+            params.push(style[key]);
         }
         // @ts-ignore
-        graphics[functionForGraphics[component.type]](...params);
+        graphics[functionForGraphics[maskType]](...params);
         graphics.fill(0x000000);
@@ -321,2 +410,3 @@ }
         return __awaiter(this, void 0, void 0, function* () {
+            const maskType = normalizeMaskType(component.type);
             let res;
@@ -332,3 +422,3 @@ try {
             }
-            if (component.type === MASK_TYPE.Sprite) {
+            if (maskType === exports.MASK_TYPE.Sprite) {
                 const img = component.resource + resourceKeySplit + component.spriteName;
@@ -351,7 +441,24 @@ const texture = (_a = res === null || res === void 0 ? void 0 : res.instance) === null || _a === void 0 ? void 0 : _a[img];
     }
+    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 = 'Mask';
+Mask.systemName = 'MaskSystem';
 Mask = __decorate([
     eva_js.decorators.componentObserver({
-        Mask: ['type', { prop: ['style'], deep: true }, 'resource', 'spriteName'],
+        Mask: [
+            'type',
+            { prop: ['style'], deep: true },
+            'x',
+            'y',
+            'radius',
+            'width',
+            'height',
+            'paths',
+            'resource',
+            'spriteName',
+            'enabled',
+        ],
     })
@@ -358,0 +465,0 @@ ], Mask);

dist/plugin-renderer-mask.cjs.prod.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("@eva/inspector-decorator"),r=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");function s(e,t,r,i){var s,n=arguments.length,a=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(a=(n<3?s(a):n>3?s(t,r,a):s(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a}function n(e,t,r,i){return new(r||(r=Promise))(function(s,n){function a(e){try{c(i.next(e))}catch(e){n(e)}}function o(e){try{c(i.throw(e))}catch(e){n(e)}}function c(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(a,o)}c((i=i.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError,exports.MASK_TYPE=void 0,function(e){e.Circle="Circle",e.Ellipse="Ellipse",e.Rect="Rect",e.RoundedRect="RoundedRect",e.Polygon="Polygon",e.Img="Img",e.Sprite="Sprite"}(exports.MASK_TYPE||(exports.MASK_TYPE={}));class a extends e.Component{constructor(){super(...arguments),this.style={},this.resource="",this.spriteName=""}init(e){Object.assign(this,e)}}a.componentName="Mask",s([t.type("string")],a.prototype,"resource",void 0),s([t.type("string")],a.prototype,"spriteName",void 0);const o={Circle:["x","y","radius"],Ellipse:["x","y","width","height"],Rect:["x","y","width","height"],RoundedRect:["x","y","width","height","radius"],Polygon:["paths"]},c={Circle:"circle",Ellipse:"ellipse",Rect:"rect",RoundedRect:"roundRect",Polygon:"poly"};var p;!function(e){e.Circle="Circle",e.Ellipse="Ellipse",e.Rect="Rect",e.RoundedRect="RoundedRect",e.Polygon="Polygon",e.Img="Img",e.Sprite="Sprite"}(p||(p={}));let h=class extends r.Renderer{constructor(){super(...arguments),this.name="Mask",this.changedCache={},this.maskSpriteCache={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(){this.changedCache={}}componentChanged(t){if("Mask"===t.component.name)switch(t.type){case e.OBSERVER_TYPE.ADD:this.add(t);break;case e.OBSERVER_TYPE.REMOVE:this.remove(t);break;case e.OBSERVER_TYPE.CHANGE:this.change(t)}}add(e){const t=e.component;if(!(t.type in p))throw new Error("no have Mask type: "+t.type);if(!t.style)throw new Error("no have Mask style: "+t.type);let r;switch(t.type){case p.Circle:case p.Ellipse:case p.Rect:case p.RoundedRect:case p.Polygon:r=this.createGraphics(t);break;case p.Img:case p.Sprite:r=this.createSprite(t)}if(!r)throw new Error("no have mask instance, check your mask params: "+t.type);const i=this.containerManager.getContainer(e.gameObject.id);i.mask=r,i.addChild(r)}remove(e){const t=this.containerManager.getContainer(e.gameObject.id);t.removeChild(t.mask),t.mask.destroy({children:!0}),t.mask=null,delete this.maskSpriteCache[e.gameObject.id]}change(e){if(this.changedCache[e.gameObject.id])return;const t=e.component;"type"===e.prop.prop[0]?(this.changedCache[e.gameObject.id]=!0,[p.Sprite,p.Img].indexOf(t.type)>-1||t._lastType!==t.type?(this.remove(e),this.add(e),t._lastType=t.type):this.redrawGraphics(e)):"style"===e.prop.prop[0]?[p.Sprite,p.Img].indexOf(t.type)>-1?this.changeSpriteStyle(t):this.redrawGraphics(e):("resource"===e.prop.prop[0]||"spriteName"===e.prop.prop[0])&&(this.changedCache[e.gameObject.id]=!0,this.changeSprite(t))}createGraphics(e){const t=new i.Graphics;return this.draw(t,e),t}redrawGraphics(e){const t=this.containerManager.getContainer(e.gameObject.id).mask;t.clear(),this.draw(t,e.component)}draw(e,t){const r=[];for(const e of o[t.type])r.push(t.style[e]);e[c[t.type]](...r),e.fill(0)}createSprite(e){const t=new i.Sprite(null);return this.maskSpriteCache[e.gameObject.id]=t,this.setSprite(e,t),t.sprite}changeSpriteStyle(e){const t=this.maskSpriteCache[e.gameObject.id];t.sprite.width=e.style.width,t.sprite.height=e.style.height,t.sprite.position.x=e.style.x,t.sprite.position.y=e.style.y}changeSprite(e){const t=this.maskSpriteCache[e.gameObject.id];this.setSprite(e,t)}setSprite(t,r){var i,s;return n(this,void 0,void 0,function*(){let n;try{const r=this.increaseAsyncId(t.gameObject.id);if(n=yield e.resource.getResource(t.resource),!this.validateAsyncId(t.gameObject.id,r))return}catch(e){throw new Error("mask resource load error")}if(t.type===p.Sprite){const e=t.resource+"_s|r|c_"+t.spriteName,s=null===(i=null==n?void 0:n.instance)||void 0===i?void 0:i[e];s&&(r.image=s)}else(null===(s=null==n?void 0:n.data)||void 0===s?void 0:s.image)&&(r.image=n.data.image);r.sprite.width=t.style.width,r.sprite.height=t.style.height,r.sprite.position.x=t.style.x,r.sprite.position.y=t.style.y})}};h.systemName="Mask",h=s([e.decorators.componentObserver({Mask:["type",{prop:["style"],deep:!0},"resource","spriteName"]})],h);var d=h;exports.Mask=a,exports.MaskSystem=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@eva/eva.js"),i=require("@eva/inspector-decorator"),s=require("@eva/plugin-renderer"),r=require("@eva/renderer-adapter");function o(e,t,i,s){var r,o=arguments.length,n=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n}function n(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function l(e,t,i,s){return new(i||(i=Promise))(function(r,o){function n(e){try{a(s.next(e))}catch(e){o(e)}}function l(e){try{a(s.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(n,l)}a((s=s.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError,exports.MASK_TYPE=void 0,(e=exports.MASK_TYPE||(exports.MASK_TYPE={})).Circle="Circle",e.Ellipse="Ellipse",e.Rect="Rect",e.RoundedRect="RoundedRect",e.Polygon="Polygon",e.Img="Img",e.Sprite="Sprite";class a extends t.Component{constructor(e){super(e),this.type=exports.MASK_TYPE.Rect,this.style={},this.x=0,this.y=0,this.resource="",this.spriteName="",this.enabled=!0,this.init(e)}init(e){var t,i,s,r,o,n,l,a,d,p,c,h,y,u,g,v,m,S,x,f,b,E;if(!e)return;const{style:w}=e,P=function(e,t){var i={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(i[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(i[s[r]]=e[s[r]])}return i}(e,["style"]);Object.assign(this,P),this.style=Object.assign(Object.assign(Object.assign({},this.style),w),{x:null!==(r=null!==(i=null!==(t=e.x)&&void 0!==t?t:null==w?void 0:w.x)&&void 0!==i?i:null===(s=this.style)||void 0===s?void 0:s.x)&&void 0!==r?r:this.x,y:null!==(a=null!==(n=null!==(o=e.y)&&void 0!==o?o:null==w?void 0:w.y)&&void 0!==n?n:null===(l=this.style)||void 0===l?void 0:l.y)&&void 0!==a?a:this.y,radius:null!==(p=null!==(d=e.radius)&&void 0!==d?d:null==w?void 0:w.radius)&&void 0!==p?p:null===(c=this.style)||void 0===c?void 0:c.radius,width:null!==(y=null!==(h=e.width)&&void 0!==h?h:null==w?void 0:w.width)&&void 0!==y?y:null===(u=this.style)||void 0===u?void 0:u.width,height:null!==(v=null!==(g=e.height)&&void 0!==g?g:null==w?void 0:w.height)&&void 0!==v?v:null===(m=this.style)||void 0===m?void 0:m.height,paths:null!==(x=null!==(S=e.paths)&&void 0!==S?S:null==w?void 0:w.paths)&&void 0!==x?x:null===(f=this.style)||void 0===f?void 0:f.paths}),this.x=null!==(b=this.style.x)&&void 0!==b?b:0,this.y=null!==(E=this.style.y)&&void 0!==E?E:0,this.radius=this.style.radius,this.width=this.style.width,this.height=this.style.height,this.paths=this.style.paths}destroy(){return this}}a.componentName="Mask",o([i.type("number"),n("design:type",Number)],a.prototype,"x",void 0),o([i.type("number"),n("design:type",Number)],a.prototype,"y",void 0),o([i.type("number"),n("design:type",Number)],a.prototype,"radius",void 0),o([i.type("number"),n("design:type",Number)],a.prototype,"width",void 0),o([i.type("number"),n("design:type",Number)],a.prototype,"height",void 0),o([i.type("string"),n("design:type",String)],a.prototype,"resource",void 0),o([i.type("string"),n("design:type",String)],a.prototype,"spriteName",void 0),o([i.type("boolean"),n("design:type",Boolean)],a.prototype,"enabled",void 0);const d={Circle:["x","y","radius"],Ellipse:["x","y","width","height"],Rect:["x","y","width","height"],RoundedRect:["x","y","width","height","radius"],Polygon:["paths"]},p={Circle:"circle",Ellipse:"ellipse",Rect:"rect",RoundedRect:"roundRect",Polygon:"poly"},c={circle:exports.MASK_TYPE.Circle,ellipse:exports.MASK_TYPE.Ellipse,rect:exports.MASK_TYPE.Rect,roundedrect:exports.MASK_TYPE.RoundedRect,roundedRect:exports.MASK_TYPE.RoundedRect,polygon:exports.MASK_TYPE.Polygon,img:exports.MASK_TYPE.Img,image:exports.MASK_TYPE.Img,sprite:exports.MASK_TYPE.Sprite};function h(e){if(e)return Object.values(exports.MASK_TYPE).includes(e)?e:c[String(e)]||c[String(e).toLowerCase()]}let y=class extends s.Renderer{constructor(){super(...arguments),this.name="MaskSystem",this.changedCache={},this.maskSpriteCache={}}init(){this.renderSystem=this.game.getSystem(s.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(){this.changedCache={}}componentChanged(e){if("Mask"===e.component.name)switch(e.type){case t.OBSERVER_TYPE.ADD:this.add(e);break;case t.OBSERVER_TYPE.REMOVE:this.remove(e);break;case t.OBSERVER_TYPE.CHANGE:this.change(e)}}add(e){const t=e.component;if(!1===t.enabled)return;const i=h(t.type);if(!i)throw new Error("no have Mask type: "+t.type);if(!t.style)throw new Error("no have Mask style: "+t.type);let s;switch(i){case exports.MASK_TYPE.Circle:case exports.MASK_TYPE.Ellipse:case exports.MASK_TYPE.Rect:case exports.MASK_TYPE.RoundedRect:case exports.MASK_TYPE.Polygon:s=this.createGraphics(t);break;case exports.MASK_TYPE.Img:case exports.MASK_TYPE.Sprite:s=this.createSprite(t)}if(!s)throw new Error("no have mask instance, check your mask params: "+t.type);const r=this.containerManager.getContainer(e.gameObject.id);r.mask=s,r.addChild(s)}remove(e){const t=this.containerManager.getContainer(e.gameObject.id);(null==t?void 0:t.mask)&&(t.removeChild(t.mask),t.mask.destroy({children:!0}),t.mask=null,delete this.maskSpriteCache[e.gameObject.id])}change(e){if(this.changedCache[e.gameObject.id])return;const t=e.component;if("enabled"===e.prop.prop[0])return this.changedCache[e.gameObject.id]=!0,void(!1===t.enabled?this.remove(e):this.add(e));if("type"===e.prop.prop[0]){this.changedCache[e.gameObject.id]=!0;const i=h(t.type),s=h(t._lastType);[exports.MASK_TYPE.Sprite,exports.MASK_TYPE.Img].indexOf(i)>-1||s!==i?(this.remove(e),this.add(e),t._lastType=t.type):this.redrawGraphics(e)}else if(["style","x","y","radius","width","height","paths"].indexOf(e.prop.prop[0])>-1){this.syncComponentStyle(t);const i=h(t.type);[exports.MASK_TYPE.Sprite,exports.MASK_TYPE.Img].indexOf(i)>-1?this.changeSpriteStyle(t):this.redrawGraphics(e)}else("resource"===e.prop.prop[0]||"spriteName"===e.prop.prop[0])&&(this.changedCache[e.gameObject.id]=!0,this.changeSprite(t))}createGraphics(e){const t=new r.Graphics;return this.draw(t,e),t}redrawGraphics(e){const t=this.containerManager.getContainer(e.gameObject.id).mask;t.clear(),this.draw(t,e.component)}draw(e,t){const i=h(t.type),s=this.syncComponentStyle(t),r=[];for(const e of d[i])r.push(s[e]);e[p[i]](...r),e.fill(0)}createSprite(e){const t=new r.Sprite(null);return this.maskSpriteCache[e.gameObject.id]=t,this.setSprite(e,t),t.sprite}changeSpriteStyle(e){const t=this.maskSpriteCache[e.gameObject.id];t.sprite.width=e.style.width,t.sprite.height=e.style.height,t.sprite.position.x=e.style.x,t.sprite.position.y=e.style.y}changeSprite(e){const t=this.maskSpriteCache[e.gameObject.id];this.setSprite(e,t)}setSprite(e,i){var s,r;return l(this,void 0,void 0,function*(){const o=h(e.type);let n;try{const i=this.increaseAsyncId(e.gameObject.id);if(n=yield t.resource.getResource(e.resource),!this.validateAsyncId(e.gameObject.id,i))return}catch(e){throw new Error("mask resource load error")}if(o===exports.MASK_TYPE.Sprite){const t=e.resource+"_s|r|c_"+e.spriteName,r=null===(s=null==n?void 0:n.instance)||void 0===s?void 0:s[t];r&&(i.image=r)}else(null===(r=null==n?void 0:n.data)||void 0===r?void 0:r.image)&&(i.image=n.data.image);i.sprite.width=e.style.width,i.sprite.height=e.style.height,i.sprite.position.x=e.style.x,i.sprite.position.y=e.style.y})}syncComponentStyle(e){var t,i,s,r,o,n,l,a,d,p,c,h,y,u;return e.style=Object.assign(Object.assign({},e.style),{x:null!==(s=null!==(t=e.x)&&void 0!==t?t:null===(i=e.style)||void 0===i?void 0:i.x)&&void 0!==s?s:0,y:null!==(n=null!==(r=e.y)&&void 0!==r?r:null===(o=e.style)||void 0===o?void 0:o.y)&&void 0!==n?n:0,radius:null!==(l=e.radius)&&void 0!==l?l:null===(a=e.style)||void 0===a?void 0:a.radius,width:null!==(d=e.width)&&void 0!==d?d:null===(p=e.style)||void 0===p?void 0:p.width,height:null!==(c=e.height)&&void 0!==c?c:null===(h=e.style)||void 0===h?void 0:h.height,paths:null!==(y=e.paths)&&void 0!==y?y:null===(u=e.style)||void 0===u?void 0:u.paths}),e.style}};y.systemName="MaskSystem",y=o([t.decorators.componentObserver({Mask:["type",{prop:["style"],deep:!0},"x","y","radius","width","height","paths","resource","spriteName","enabled"]})],y);var u=y;exports.Mask=a,exports.MaskSystem=u;

dist/plugin-renderer-mask.d.ts

@@ -62,7 +62,13 @@ import { Component } from '@eva/eva.js';
     /** 上一次的遮罩类型 */
-    _lastType: MaskParams['type'];
+    _lastType: MaskTypeValue;
     /** 遮罩类型 */
-    type: MaskParams['type'];
+    type: MaskTypeValue;
     /** 遮罩样式配置 */
     style?: MaskParams['style'];
+    x: number;
+    y: number;
+    radius?: number;
+    width?: number;
+    height?: number;
+    paths?: number[];
     /** 遮罩图片资源名称（用于 Img 类型） */
@@ -72,11 +78,11 @@ resource?: string;
     spriteName?: string;
+    /** 是否启用遮罩 */
+    enabled: boolean;
+    constructor(params?: MaskParams);
     /**
      * 初始化组件
      * @param obj - 初始化参数
-     * @param obj.type - 遮罩类型
-     * @param obj.style - 遮罩样式
-     * @param obj.resource - 遮罩资源（可选）
-     * @param obj.spriteName - 精灵名称（可选）
      */
     init(obj?: MaskParams): void;
+    destroy(): this;
 }
@@ -95,3 +101,3 @@
 export declare interface MaskParams {
-    type: MASK_TYPE;
+    type: MaskTypeValue;
     style?: {
@@ -105,4 +111,11 @@ x?: number;
     };
+    x?: number;
+    y?: number;
+    radius?: number;
+    width?: number;
+    height?: number;
+    paths?: number[];
     resource?: string;
     spriteName?: string;
+    enabled?: boolean;
 }
@@ -135,4 +148,7 @@
     setSprite(component: Mask, sprite: any): Promise<void>;
+    private syncComponentStyle;
 }
 
+declare type MaskTypeValue = MASK_TYPE | 'circle' | 'ellipse' | 'rect' | 'roundedRect' | 'polygon' | 'img' | 'sprite';
+
 export { }

dist/plugin-renderer-mask.esm.js

@@ -21,2 +21,14 @@ import { Component, OBSERVER_TYPE, decorators, resource } from '@eva/eva.js';
 
+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) {
@@ -29,2 +41,6 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -45,3 +61,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 
-var MASK_TYPE$1;
+var MASK_TYPE;
 (function (MASK_TYPE) {
@@ -55,3 +71,3 @@ MASK_TYPE["Circle"] = "Circle";
     MASK_TYPE["Sprite"] = "Sprite";
-})(MASK_TYPE$1 || (MASK_TYPE$1 = {}));
+})(MASK_TYPE || (MASK_TYPE = {}));
 /**
@@ -105,7 +121,12 @@ * 遮罩组件
 class Mask$2 extends Component {
-    constructor() {
-        super(...arguments);
+    constructor(params) {
+        super(params);
+        /** 遮罩类型 */
+        // @decorators.IDEProp 复杂编辑后续添加
+        this.type = MASK_TYPE.Rect;
         /** 遮罩样式配置 */
         // @decorators.IDEProp 复杂编辑后续添加
         this.style = {};
+        this.x = 0;
+        this.y = 0;
         /** 遮罩图片资源名称（用于 Img 类型） */
@@ -115,2 +136,5 @@ this.resource = '';
         this.spriteName = '';
+        /** 是否启用遮罩 */
+        this.enabled = true;
+        this.init(params);
     }
@@ -120,10 +144,20 @@ /**
      * @param obj - 初始化参数
-     * @param obj.type - 遮罩类型
-     * @param obj.style - 遮罩样式
-     * @param obj.resource - 遮罩资源（可选）
-     * @param obj.spriteName - 精灵名称（可选）
      */
     init(obj) {
-        Object.assign(this, 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;
+    }
 }
@@ -133,7 +167,33 @@ /** 组件名称 */
 __decorate([
-    type('string')
+    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')
+    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);
 
@@ -155,16 +215,24 @@ const resourceKeySplit = '_s|r|c_'; // Notice: This key be created by sprite system.
 };
-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 = {}));
+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 = 'Mask';
+        this.name = 'MaskSystem';
         this.changedCache = {};
@@ -197,3 +265,6 @@ this.maskSpriteCache = {};
         const component = changed.component;
-        if (!(component.type in MASK_TYPE)) {
+        if (component.enabled === false)
+            return;
+        const maskType = normalizeMaskType(component.type);
+        if (!maskType) {
             throw new Error('no have Mask type: ' + component.type);
@@ -205,3 +276,3 @@ }
         let mask;
-        switch (component.type) {
+        switch (maskType) {
             case MASK_TYPE.Circle:
@@ -238,2 +309,4 @@ mask = this.createGraphics(component);
         const container = this.containerManager.getContainer(changed.gameObject.id);
+        if (!(container === null || container === void 0 ? void 0 : container.mask))
+            return;
         container.removeChild(container.mask);
@@ -248,5 +321,17 @@ container.mask.destroy({ children: true });
         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;
-            if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1 || component._lastType !== component.type) {
+            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);
@@ -260,4 +345,6 @@ this.add(changed);
         }
-        else if (changed.prop.prop[0] === 'style') {
-            if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1) {
+        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);
@@ -290,8 +377,10 @@ }
     draw(graphics, component) {
+        const maskType = normalizeMaskType(component.type);
+        const style = this.syncComponentStyle(component);
         const params = [];
-        for (const key of propertyForGraphics[component.type]) {
-            params.push(component.style[key]);
+        for (const key of propertyForGraphics[maskType]) {
+            params.push(style[key]);
         }
         // @ts-ignore
-        graphics[functionForGraphics[component.type]](...params);
+        graphics[functionForGraphics[maskType]](...params);
         graphics.fill(0x000000);
@@ -319,2 +408,3 @@ }
         return __awaiter(this, void 0, void 0, function* () {
+            const maskType = normalizeMaskType(component.type);
             let res;
@@ -330,3 +420,3 @@ try {
             }
-            if (component.type === MASK_TYPE.Sprite) {
+            if (maskType === MASK_TYPE.Sprite) {
                 const img = component.resource + resourceKeySplit + component.spriteName;
@@ -349,7 +439,24 @@ const texture = (_a = res === null || res === void 0 ? void 0 : res.instance) === null || _a === void 0 ? void 0 : _a[img];
     }
+    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 = 'Mask';
+Mask.systemName = 'MaskSystem';
 Mask = __decorate([
     decorators.componentObserver({
-        Mask: ['type', { prop: ['style'], deep: true }, 'resource', 'spriteName'],
+        Mask: [
+            'type',
+            { prop: ['style'], deep: true },
+            'x',
+            'y',
+            'radius',
+            'width',
+            'height',
+            'paths',
+            'resource',
+            'spriteName',
+            'enabled',
+        ],
     })
@@ -359,2 +466,2 @@ ], Mask);
 
-export { MASK_TYPE$1 as MASK_TYPE, Mask$2 as Mask, Mask$1 as MaskSystem };
+export { MASK_TYPE, Mask$2 as Mask, Mask$1 as MaskSystem };

package.json

 {
   "name": "@eva/plugin-renderer-mask",
-  "version": "2.0.2",
+  "version": "2.1.0-beta.1",
   "description": "@eva/plugin-renderer-mask",
@@ -21,8 +21,8 @@ "main": "index.js",
   "dependencies": {
-    "@eva/inspector-decorator": "^0.0.5",
-    "@eva/plugin-renderer": "2.0.2",
-    "@eva/renderer-adapter": "2.0.2",
-    "@eva/eva.js": "2.0.2",
+    "@eva/inspector-decorator": "^2.0.0-beta.0",
+    "@eva/plugin-renderer": "2.1.0-beta.1",
+    "@eva/renderer-adapter": "2.1.0-beta.1",
+    "@eva/eva.js": "2.1.0-beta.1",
     "pixi.js": "^8.17.0"
   }
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Improved metrics

Total package byte prevSize

81695

57.95%

Lines of code

1564

38.41%

Worsened metrics

Number of low quality alerts

3

50%

Dependency changes

• + Added

  @eva/eva.js@2.1.0-beta.1
  (transitive)

• + Added

  @eva/inspector-decorator@2.0.0-beta.0
  (transitive)

• + Added

  @eva/plugin-renderer@2.1.0-beta.1
  (transitive)

• + Added

  @eva/renderer-adapter@2.1.0-beta.1
  (transitive)

• + Added

  reflect-metadata@0.1.14
  (transitive)

• + Added

  tslib@2.8.1
  (transitive)

• - Removed

  @eva/eva.js@2.0.2
  (transitive)

• - Removed

  @eva/inspector-decorator@0.0.5
  (transitive)

• - Removed

  @eva/plugin-renderer@2.0.2
  (transitive)

• - Removed

  @eva/renderer-adapter@2.0.2
  (transitive)

• Updated

  @eva/eva.js@2.1.0-beta.1

• Updated

  @eva/inspector-decorator@^2.0.0-beta.0

• Updated

  @eva/plugin-renderer@2.1.0-beta.1

• Updated

  @eva/renderer-adapter@2.1.0-beta.1