@eva/plugin-renderer-img 2.0.2 → 2.1.0-beta.2

package/dist/EVA.plugin.renderer.img.js

@@ -1,3 +1,4 @@
+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); }
 globalThis.EVA = globalThis.EVA || {};
 globalThis.EVA.plugin = globalThis.EVA.plugin || {};
 globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
@@ -10,6 +11,9 @@ var _EVA_IIFE_img = function (exports, eva_js, pluginRenderer, rendererAdapter,
     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) {
@@ -37,36 +41,158 @@ var _EVA_IIFE_img = function (exports, eva_js, pluginRenderer, rendererAdapter,
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   }
-  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]];
+    }
+    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);
+    }
+  }
+  const IDE_PROPERTY_METADATA = 'IDE_PROPERTY_METADATA';
+  function transformBasicType(type) {
+    if (type === String) {
+      return 'string';
+    }
+    if (type === Number) {
+      return 'number';
     }
-    if (!target.constructor.IDEProps[propertyKey]) {
-      target.constructor.IDEProps[propertyKey] = {};
+    if (type === Boolean) {
+      return 'boolean';
     }
-    var propertyObj = target.constructor.IDEProps[propertyKey];
-    return propertyObj;
+    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 = {}));
   class Img$2 extends eva_js.Component {
-    constructor() {
-      super(...arguments);
+    constructor(params) {
+      super(params);
       this.resource = '';
+      this.anchor = {
+        x: 0,
+        y: 0
+      };
+      this.init(params);
     }
     init(obj) {
+      var _a, _b;
       if (obj && obj.resource) {
         this.resource = obj.resource;
       }
+      if (obj && obj.anchor) {
+        this.anchor = {
+          x: (_a = obj.anchor.x) !== null && _a !== void 0 ? _a : this.anchor.x,
+          y: (_b = obj.anchor.y) !== null && _b !== void 0 ? _b : this.anchor.y
+        };
+      }
+      if (obj && typeof obj.width === 'number') {
+        this.width = obj.width;
+      }
+      if (obj && typeof obj.height === 'number') {
+        this.height = obj.height;
+      }
+    }
+    load(resource) {
+      if (resource) {
+        this.resource = resource;
+      }
+      return this;
+    }
+    setAnchor(x, y = x) {
+      this.anchor.x = x;
+      this.anchor.y = y;
+      return this;
+    }
+    setSize(width, height) {
+      this.width = width;
+      this.height = height;
+      return this;
+    }
+    destroy() {
+      return this;
     }
   }
   Img$2.componentName = 'Img';
-  __decorate([type('string')], Img$2.prototype, "resource", void 0);
+  __decorate([type('string'), __metadata("design:type", String)], Img$2.prototype, "resource", void 0);
+  __decorate([type('number'), __metadata("design:type", Number)], Img$2.prototype, "width", void 0);
+  __decorate([type('number'), __metadata("design:type", Number)], Img$2.prototype, "height", void 0);
   eva_js.resource.registerInstance(eva_js.RESOURCE_TYPE.IMAGE, ({
     data = {}
   }) => {
@@ -92,64 +218,91 @@ var _EVA_IIFE_img = function (exports, eva_js, pluginRenderer, rendererAdapter,
   let Img = class Img extends pluginRenderer.Renderer {
     constructor() {
       super(...arguments);
-      this.name = 'Img';
+      this.name = 'ImgSystem';
       this.imgs = {};
     }
-    init() {
-      this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
+    init(_params) {
+      var _a, _b;
+      const renderSystem = (_b = (_a = this.game) === null || _a === void 0 ? void 0 : _a.getSystem) === null || _b === void 0 ? void 0 : _b.call(_a, pluginRenderer.RendererSystem);
+      if (!(renderSystem === null || renderSystem === void 0 ? void 0 : renderSystem.rendererManager)) return;
+      this.renderSystem = renderSystem;
       this.renderSystem.rendererManager.register(this);
     }
+    update(_frame) {
+      super.update(_frame);
+    }
     rendererUpdate(gameObject) {
-      const {
-        width,
-        height
-      } = gameObject.transform.size;
-      if (this.imgs[gameObject.id]) {
-        this.imgs[gameObject.id].sprite.width = width;
-        this.imgs[gameObject.id].sprite.height = height;
-      }
+      const component = gameObject.getComponent('Img');
+      this.applySpriteLayout(gameObject, component);
     }
     componentChanged(changed) {
-      var _a, _b;
+      var _a, _b, _c, _d, _e, _f;
       return __awaiter(this, void 0, void 0, function* () {
         if (changed.componentName === 'Img') {
+          const gameObjectId = changed.gameObject.id;
           const component = changed.component;
           if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
             const sprite = new rendererAdapter.Sprite(null);
-            this.imgs[changed.gameObject.id] = sprite;
-            this.containerManager.getContainer(changed.gameObject.id).addChildAt(sprite.sprite, 0);
-            const asyncId = this.increaseAsyncId(changed.gameObject.id);
+            this.imgs[gameObjectId] = sprite;
+            (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(gameObjectId)) === null || _b === void 0 ? void 0 : _b.addChildAt(sprite.sprite, 0);
+            this.applySpriteLayout(changed.gameObject, component);
+            const asyncId = this.increaseAsyncId(gameObjectId);
             const {
               instance
             } = yield eva_js.resource.getResource(component.resource);
-            if (!this.validateAsyncId(changed.gameObject.id, asyncId)) return;
+            if (!this.validateAsyncId(gameObjectId, asyncId)) return;
             if (!instance) {
               console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+              return;
             }
-            this.imgs[changed.gameObject.id].image = instance;
+            sprite.image = instance;
+            this.applySpriteLayout(changed.gameObject, component);
           } else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
-            const asyncId = this.increaseAsyncId(changed.gameObject.id);
-            const {
-              instance
-            } = yield eva_js.resource.getResource(component.resource);
-            if (!this.validateAsyncId(changed.gameObject.id, asyncId)) return;
-            if (!instance) {
-              console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+            this.applySpriteLayout(changed.gameObject, component);
+            if ((_d = (_c = changed.prop) === null || _c === void 0 ? void 0 : _c.prop) === null || _d === void 0 ? void 0 : _d.includes('resource')) {
+              const asyncId = this.increaseAsyncId(gameObjectId);
+              const {
+                instance
+              } = yield eva_js.resource.getResource(component.resource);
+              if (!this.validateAsyncId(gameObjectId, asyncId)) return;
+              if (!instance) {
+                console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                return;
+              }
+              this.imgs[gameObjectId].image = instance;
+              this.applySpriteLayout(changed.gameObject, component);
             }
-            this.imgs[changed.gameObject.id].image = instance;
           } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
-            this.increaseAsyncId(changed.gameObject.id);
-            const sprite = this.imgs[changed.gameObject.id];
+            this.increaseAsyncId(gameObjectId);
+            const sprite = this.imgs[gameObjectId];
             if (!sprite) return;
-            (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id)) === null || _b === void 0 ? void 0 : _b.removeChild(sprite.sprite);
+            (_f = (_e = this.containerManager) === null || _e === void 0 ? void 0 : _e.getContainer(gameObjectId)) === null || _f === void 0 ? void 0 : _f.removeChild(sprite.sprite);
             sprite.sprite.destroy({
               children: true
             });
-            delete this.imgs[changed.gameObject.id];
+            delete this.imgs[gameObjectId];
           }
         }
       });
     }
+    applySpriteLayout(gameObject, component) {
+      var _a, _b, _c, _d, _e;
+      const sprite = this.imgs[gameObject.id];
+      if (!sprite) return;
+      const size = (_a = gameObject.transform) === null || _a === void 0 ? void 0 : _a.size;
+      const width = (_b = component === null || component === void 0 ? void 0 : component.width) !== null && _b !== void 0 ? _b : size === null || size === void 0 ? void 0 : size.width;
+      const height = (_c = component === null || component === void 0 ? void 0 : component.height) !== null && _c !== void 0 ? _c : size === null || size === void 0 ? void 0 : size.height;
+      if (typeof width === 'number') {
+        sprite.sprite.width = width;
+      }
+      if (typeof height === 'number') {
+        sprite.sprite.height = height;
+      }
+      const anchor = component === null || component === void 0 ? void 0 : component.anchor;
+      if (anchor) {
+        (_e = (_d = sprite.sprite.anchor) === null || _d === void 0 ? void 0 : _d.set) === null || _e === void 0 ? void 0 : _e.call(_d, anchor.x, anchor.y);
+      }
+    }
     destroy() {
       var _a, _b;
       for (const key in this.imgs) {
@@ -162,12 +315,12 @@ var _EVA_IIFE_img = function (exports, eva_js, pluginRenderer, rendererAdapter,
       }
     }
   };
-  Img.systemName = 'Img';
+  Img.systemName = 'ImgSystem';
   Img = __decorate([eva_js.decorators.componentObserver({
-    Img: [{
-      prop: ['resource'],
-      deep: false
-    }]
+    Img: ['resource', {
+      prop: 'anchor',
+      deep: true
+    }, 'width', 'height']
   })], Img);
   var Img$1 = Img;
   exports.Img = Img$2;

package/dist/EVA.plugin.renderer.img.min.js

@@ -1 +1 @@
-globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_img=function(e,t,r,i,n){"use strict";function s(e,t,r,i){var n,s=arguments.length,o=s<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 c=e.length-1;c>=0;c--)(n=e[c])&&(o=(s<3?n(o):s>3?n(t,r,o):n(t,r))||o);return s>3&&o&&Object.defineProperty(t,r,o),o}function o(e,t,r,i){return new(r||(r=Promise))(function(n,s){function o(e){try{a(i.next(e))}catch(e){s(e)}}function c(e){try{a(i.throw(e))}catch(e){s(e)}}function a(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(o,c)}a((i=i.apply(e,t||[])).next())})}class c extends t.Component{constructor(){super(...arguments),this.resource=""}init(e){e&&e.resource&&(this.resource=e.resource)}}c.componentName="Img",s([function(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}}("string")],c.prototype,"resource",void 0),t.resource.registerInstance(t.RESOURCE_TYPE.IMAGE,({data:e={}})=>{const{image:t}=e;if(t){if(t instanceof n.Texture)return t;return n.Texture.from(t)}return e}),t.resource.registerDestroy(t.RESOURCE_TYPE.IMAGE,({instance:e})=>{e&&e.destroy(!0)});let a=class extends r.Renderer{constructor(){super(...arguments),this.name="Img",this.imgs={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:r}=e.transform.size;this.imgs[e.id]&&(this.imgs[e.id].sprite.width=t,this.imgs[e.id].sprite.height=r)}componentChanged(e){var r,n;return o(this,void 0,void 0,function*(){if("Img"===e.componentName){const s=e.component;if(e.type===t.OBSERVER_TYPE.ADD){const r=new i.Sprite(null);this.imgs[e.gameObject.id]=r,this.containerManager.getContainer(e.gameObject.id).addChildAt(r.sprite,0);const n=this.increaseAsyncId(e.gameObject.id),{instance:o}=yield t.resource.getResource(s.resource);if(!this.validateAsyncId(e.gameObject.id,n))return;o||console.error(`GameObject:${e.gameObject.name}'s Img resource load error`),this.imgs[e.gameObject.id].image=o}else if(e.type===t.OBSERVER_TYPE.CHANGE){const r=this.increaseAsyncId(e.gameObject.id),{instance:i}=yield t.resource.getResource(s.resource);if(!this.validateAsyncId(e.gameObject.id,r))return;i||console.error(`GameObject:${e.gameObject.name}'s Img resource load error`),this.imgs[e.gameObject.id].image=i}else if(e.type===t.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(e.gameObject.id);const t=this.imgs[e.gameObject.id];if(!t)return;null===(n=null===(r=this.containerManager)||void 0===r?void 0:r.getContainer(e.gameObject.id))||void 0===n||n.removeChild(t.sprite),t.sprite.destroy({children:!0}),delete this.imgs[e.gameObject.id]}}})}destroy(){var e,t;for(const r in this.imgs){const i=this.imgs[r];null===(t=null===(e=this.containerManager)||void 0===e?void 0:e.getContainer(parseInt(r)))||void 0===t||t.removeChild(i.sprite),i.sprite.destroy({children:!0}),delete this.imgs[r]}}};a.systemName="Img",a=s([t.decorators.componentObserver({Img:[{prop:["resource"],deep:!1}]})],a);var g=a;return e.Img=c,e.ImgSystem=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer,EVA.rendererAdapter,PIXI);globalThis.EVA.plugin.renderer.img=globalThis.EVA.plugin.renderer.img||_EVA_IIFE_img;
+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 n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}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_img=function(e,t,r,n,o){"use strict";function i(e,t,r,n){var o,i=arguments.length,s=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(s=(i<3?o(s):i>3?o(t,r,s):o(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function c(e,t,r,n){return new(r||(r=Promise))(function(o,i){function s(e){try{a(n.next(e))}catch(e){i(e)}}function c(e){try{a(n.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(s,c)}a((n=n.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class a extends Error{constructor(){super("Symbol keys are not supported yet!"),Object.setPrototypeOf(this,new.target.prototype)}}const l="IDE_PROPERTY_METADATA";function u(e,t,r,n){let o=Reflect.getMetadata("design:type",e,t),i=o===Array;const s=function(e){return e===String?"string":e===Number?"number":e===Boolean?"boolean":"unknown"}(o);if("unknown"!==s&&(o=s),n){const e=n();Array.isArray(e)?(i=!0,o=e[0]):o=e}const c=Reflect.getMetadata(l,e.constructor)||{},a=_extends(_extends(_extends({},c[t]||{}),{type:o,isArray:i}),r);c[t]=a,Reflect.defineMetadata(l,c,e.constructor);!function(e,t,r){const n=e.constructor,o=n.IDEProps||{};o[t]=_extends(_extends({key:t},o[t]),r),n.IDEProps=o}(e,t,function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(a,["isArray"]))}function d(e){return t={type:e},(e,n)=>{if("symbol"==typeof n)throw new a;const{options:o,returnTypeFunc:i}=function(e,t){return"function"==typeof e?{returnTypeFunc:e,options:t||{}}:{options:e||{}}}(t,r);u(e,n,o,i)};var t,r}var p;!function(e){e[e.Edit=2]="Edit",e[e.Game=4]="Game",e[e.All=6]="All"}(p||(p={}));class h extends t.Component{constructor(e){super(e),this.resource="",this.anchor={x:0,y:0},this.init(e)}init(e){var t,r;e&&e.resource&&(this.resource=e.resource),e&&e.anchor&&(this.anchor={x:null!==(t=e.anchor.x)&&void 0!==t?t:this.anchor.x,y:null!==(r=e.anchor.y)&&void 0!==r?r:this.anchor.y}),e&&"number"==typeof e.width&&(this.width=e.width),e&&"number"==typeof e.height&&(this.height=e.height)}load(e){return e&&(this.resource=e),this}setAnchor(e,t=e){return this.anchor.x=e,this.anchor.y=t,this}setSize(e,t){return this.width=e,this.height=t,this}destroy(){return this}}h.componentName="Img",i([d("string"),s("design:type",String)],h.prototype,"resource",void 0),i([d("number"),s("design:type",Number)],h.prototype,"width",void 0),i([d("number"),s("design:type",Number)],h.prototype,"height",void 0),t.resource.registerInstance(t.RESOURCE_TYPE.IMAGE,({data:e={}})=>{const{image:t}=e;if(t){if(t instanceof o.Texture)return t;return o.Texture.from(t)}return e}),t.resource.registerDestroy(t.RESOURCE_TYPE.IMAGE,({instance:e})=>{e&&e.destroy(!0)});let g=class extends r.Renderer{constructor(){super(...arguments),this.name="ImgSystem",this.imgs={}}init(e){var t,n;const o=null===(n=null===(t=this.game)||void 0===t?void 0:t.getSystem)||void 0===n?void 0:n.call(t,r.RendererSystem);(null==o?void 0:o.rendererManager)&&(this.renderSystem=o,this.renderSystem.rendererManager.register(this))}update(e){super.update(e)}rendererUpdate(e){const t=e.getComponent("Img");this.applySpriteLayout(e,t)}componentChanged(e){var r,o,i,s,a,l;return c(this,void 0,void 0,function*(){if("Img"===e.componentName){const c=e.gameObject.id,u=e.component;if(e.type===t.OBSERVER_TYPE.ADD){const i=new n.Sprite(null);this.imgs[c]=i,null===(o=null===(r=this.containerManager)||void 0===r?void 0:r.getContainer(c))||void 0===o||o.addChildAt(i.sprite,0),this.applySpriteLayout(e.gameObject,u);const s=this.increaseAsyncId(c),{instance:a}=yield t.resource.getResource(u.resource);if(!this.validateAsyncId(c,s))return;if(!a)return void console.error(`GameObject:${e.gameObject.name}'s Img resource load error`);i.image=a,this.applySpriteLayout(e.gameObject,u)}else if(e.type===t.OBSERVER_TYPE.CHANGE){if(this.applySpriteLayout(e.gameObject,u),null===(s=null===(i=e.prop)||void 0===i?void 0:i.prop)||void 0===s?void 0:s.includes("resource")){const r=this.increaseAsyncId(c),{instance:n}=yield t.resource.getResource(u.resource);if(!this.validateAsyncId(c,r))return;if(!n)return void console.error(`GameObject:${e.gameObject.name}'s Img resource load error`);this.imgs[c].image=n,this.applySpriteLayout(e.gameObject,u)}}else if(e.type===t.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(c);const e=this.imgs[c];if(!e)return;null===(l=null===(a=this.containerManager)||void 0===a?void 0:a.getContainer(c))||void 0===l||l.removeChild(e.sprite),e.sprite.destroy({children:!0}),delete this.imgs[c]}}})}applySpriteLayout(e,t){var r,n,o,i,s;const c=this.imgs[e.id];if(!c)return;const a=null===(r=e.transform)||void 0===r?void 0:r.size,l=null!==(n=null==t?void 0:t.width)&&void 0!==n?n:null==a?void 0:a.width,u=null!==(o=null==t?void 0:t.height)&&void 0!==o?o:null==a?void 0:a.height;"number"==typeof l&&(c.sprite.width=l),"number"==typeof u&&(c.sprite.height=u);const d=null==t?void 0:t.anchor;d&&(null===(s=null===(i=c.sprite.anchor)||void 0===i?void 0:i.set)||void 0===s||s.call(i,d.x,d.y))}destroy(){var e,t;for(const r in this.imgs){const n=this.imgs[r];null===(t=null===(e=this.containerManager)||void 0===e?void 0:e.getContainer(parseInt(r)))||void 0===t||t.removeChild(n.sprite),n.sprite.destroy({children:!0}),delete this.imgs[r]}}};g.systemName="ImgSystem",g=i([t.decorators.componentObserver({Img:["resource",{prop:"anchor",deep:!0},"width","height"]})],g);var y=g;return e.Img=h,e.ImgSystem=y,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer,EVA.rendererAdapter,PIXI);globalThis.EVA.plugin.renderer.img=globalThis.EVA.plugin.renderer.img||_EVA_IIFE_img;

package/dist/plugin-renderer-img.cjs.js

@@ -30,6 +30,10 @@ function __decorate(decorators, target, key, desc) {
     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) {
@@ -61,27 +65,82 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * ```
  */
 class Img$2 extends eva_js.Component {
-    constructor() {
-        super(...arguments);
+    constructor(params) {
+        super(params);
         /** 图片资源名称 */
         this.resource = '';
+        /** 图片锚点 */
+        this.anchor = { x: 0, y: 0 };
+        this.init(params);
     }
     /**
      * 初始化组件
      * @param obj - 初始化参数
-     * @param obj.resource - 图片资源名称
+     *
+     * 配置项包括 resource、anchor、width 和 height。
      */
     init(obj) {
+        var _a, _b;
         if (obj && obj.resource) {
             this.resource = obj.resource;
         }
+        if (obj && obj.anchor) {
+            this.anchor = {
+                x: (_a = obj.anchor.x) !== null && _a !== void 0 ? _a : this.anchor.x,
+                y: (_b = obj.anchor.y) !== null && _b !== void 0 ? _b : this.anchor.y,
+            };
+        }
+        if (obj && typeof obj.width === 'number') {
+            this.width = obj.width;
+        }
+        if (obj && typeof obj.height === 'number') {
+            this.height = obj.height;
+        }
+    }
+    /**
+     * 切换当前图片资源。
+     *
+     * ImgSystem 会监听 resource 变化并刷新渲染纹理。
+     *
+     * @param resource - 图片资源名称
+     */
+    load(resource) {
+        if (resource) {
+            this.resource = resource;
+        }
+        return this;
+    }
+    /** 设置图片锚点。 */
+    setAnchor(x, y = x) {
+        this.anchor.x = x;
+        this.anchor.y = y;
+        return this;
+    }
+    /** 设置显式渲染尺寸。 */
+    setSize(width, height) {
+        this.width = width;
+        this.height = height;
+        return this;
+    }
+    /** 释放组件持有的可编辑状态。渲染资源由 ImgSystem 统一管理。 */
+    destroy() {
+        return this;
     }
 }
 /** 组件名称 */
 Img$2.componentName = 'Img';
 __decorate([
-    inspectorDecorator.type('string')
-], Img$2.prototype, "resource", void 0);
+    inspectorDecorator.type('string'),
+    __metadata("design:type", String)
+], Img$2.prototype, "resource", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Img$2.prototype, "width", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Img$2.prototype, "height", void 0);
 
 eva_js.resource.registerInstance(eva_js.RESOURCE_TYPE.IMAGE, ({ data = {} }) => {
     const { image } = data;
@@ -102,60 +161,92 @@ eva_js.resource.registerDestroy(eva_js.RESOURCE_TYPE.IMAGE, ({ instance }) => {
 let Img = class Img extends pluginRenderer.Renderer {
     constructor() {
         super(...arguments);
-        this.name = 'Img';
+        this.name = 'ImgSystem';
         this.imgs = {};
     }
-    init() {
-        this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
+    init(_params) {
+        var _a, _b;
+        const renderSystem = (_b = (_a = this.game) === null || _a === void 0 ? void 0 : _a.getSystem) === null || _b === void 0 ? void 0 : _b.call(_a, pluginRenderer.RendererSystem);
+        if (!(renderSystem === null || renderSystem === void 0 ? void 0 : renderSystem.rendererManager))
+            return;
+        this.renderSystem = renderSystem;
         this.renderSystem.rendererManager.register(this);
     }
+    update(_frame) {
+        super.update(_frame);
+    }
     rendererUpdate(gameObject) {
-        const { width, height } = gameObject.transform.size;
-        if (this.imgs[gameObject.id]) {
-            this.imgs[gameObject.id].sprite.width = width;
-            this.imgs[gameObject.id].sprite.height = height;
-        }
+        const component = gameObject.getComponent('Img');
+        this.applySpriteLayout(gameObject, component);
     }
     componentChanged(changed) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
             if (changed.componentName === 'Img') {
+                const gameObjectId = changed.gameObject.id;
                 const component = changed.component;
                 if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
                     const sprite = new rendererAdapter.Sprite(null);
-                    this.imgs[changed.gameObject.id] = sprite;
-                    this.containerManager.getContainer(changed.gameObject.id).addChildAt(sprite.sprite, 0);
-                    const asyncId = this.increaseAsyncId(changed.gameObject.id);
+                    this.imgs[gameObjectId] = sprite;
+                    (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(gameObjectId)) === null || _b === void 0 ? void 0 : _b.addChildAt(sprite.sprite, 0);
+                    this.applySpriteLayout(changed.gameObject, component);
+                    const asyncId = this.increaseAsyncId(gameObjectId);
                     const { instance } = yield eva_js.resource.getResource(component.resource);
-                    if (!this.validateAsyncId(changed.gameObject.id, asyncId))
+                    if (!this.validateAsyncId(gameObjectId, asyncId))
                         return;
                     if (!instance) {
                         console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                        return;
                     }
-                    this.imgs[changed.gameObject.id].image = instance;
+                    sprite.image = instance;
+                    this.applySpriteLayout(changed.gameObject, component);
                 }
                 else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
-                    const asyncId = this.increaseAsyncId(changed.gameObject.id);
-                    const { instance } = yield eva_js.resource.getResource(component.resource);
-                    if (!this.validateAsyncId(changed.gameObject.id, asyncId))
-                        return;
-                    if (!instance) {
-                        console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                    this.applySpriteLayout(changed.gameObject, component);
+                    if ((_d = (_c = changed.prop) === null || _c === void 0 ? void 0 : _c.prop) === null || _d === void 0 ? void 0 : _d.includes('resource')) {
+                        const asyncId = this.increaseAsyncId(gameObjectId);
+                        const { instance } = yield eva_js.resource.getResource(component.resource);
+                        if (!this.validateAsyncId(gameObjectId, asyncId))
+                            return;
+                        if (!instance) {
+                            console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                            return;
+                        }
+                        this.imgs[gameObjectId].image = instance;
+                        this.applySpriteLayout(changed.gameObject, component);
                     }
-                    this.imgs[changed.gameObject.id].image = instance;
                 }
                 else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
-                    this.increaseAsyncId(changed.gameObject.id);
-                    const sprite = this.imgs[changed.gameObject.id];
+                    this.increaseAsyncId(gameObjectId);
+                    const sprite = this.imgs[gameObjectId];
                     if (!sprite)
                         return;
-                    (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id)) === null || _b === void 0 ? void 0 : _b.removeChild(sprite.sprite);
+                    (_f = (_e = this.containerManager) === null || _e === void 0 ? void 0 : _e.getContainer(gameObjectId)) === null || _f === void 0 ? void 0 : _f.removeChild(sprite.sprite);
                     sprite.sprite.destroy({ children: true });
-                    delete this.imgs[changed.gameObject.id];
+                    delete this.imgs[gameObjectId];
                 }
             }
         });
     }
+    applySpriteLayout(gameObject, component) {
+        var _a, _b, _c, _d, _e;
+        const sprite = this.imgs[gameObject.id];
+        if (!sprite)
+            return;
+        const size = (_a = gameObject.transform) === null || _a === void 0 ? void 0 : _a.size;
+        const width = (_b = component === null || component === void 0 ? void 0 : component.width) !== null && _b !== void 0 ? _b : size === null || size === void 0 ? void 0 : size.width;
+        const height = (_c = component === null || component === void 0 ? void 0 : component.height) !== null && _c !== void 0 ? _c : size === null || size === void 0 ? void 0 : size.height;
+        if (typeof width === 'number') {
+            sprite.sprite.width = width;
+        }
+        if (typeof height === 'number') {
+            sprite.sprite.height = height;
+        }
+        const anchor = component === null || component === void 0 ? void 0 : component.anchor;
+        if (anchor) {
+            (_e = (_d = sprite.sprite.anchor) === null || _d === void 0 ? void 0 : _d.set) === null || _e === void 0 ? void 0 : _e.call(_d, anchor.x, anchor.y);
+        }
+    }
     destroy() {
         var _a, _b;
         for (const key in this.imgs) {
@@ -166,10 +257,10 @@ let Img = class Img extends pluginRenderer.Renderer {
         }
     }
 };
-Img.systemName = 'Img';
+Img.systemName = 'ImgSystem';
 Img = __decorate([
     eva_js.decorators.componentObserver({
-        Img: [{ prop: ['resource'], deep: false }],
+        Img: ['resource', { prop: 'anchor', deep: true }, 'width', 'height'],
     })
 ], Img);
 var Img$1 = Img;

package/dist/plugin-renderer-img.cjs.prod.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/inspector-decorator"),t=require("@eva/eva.js"),r=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter"),s=require("pixi.js");function n(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 c=e.length-1;c>=0;c--)(s=e[c])&&(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 o(e,t,r,i){return new(r||(r=Promise))(function(s,n){function o(e){try{a(i.next(e))}catch(e){n(e)}}function c(e){try{a(i.throw(e))}catch(e){n(e)}}function a(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(o,c)}a((i=i.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class c extends t.Component{constructor(){super(...arguments),this.resource=""}init(e){e&&e.resource&&(this.resource=e.resource)}}c.componentName="Img",n([e.type("string")],c.prototype,"resource",void 0),t.resource.registerInstance(t.RESOURCE_TYPE.IMAGE,({data:e={}})=>{const{image:t}=e;if(t){if(t instanceof s.Texture)return t;return s.Texture.from(t)}return e}),t.resource.registerDestroy(t.RESOURCE_TYPE.IMAGE,({instance:e})=>{e&&e.destroy(!0)});let a=class extends r.Renderer{constructor(){super(...arguments),this.name="Img",this.imgs={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:r}=e.transform.size;this.imgs[e.id]&&(this.imgs[e.id].sprite.width=t,this.imgs[e.id].sprite.height=r)}componentChanged(e){var r,s;return o(this,void 0,void 0,function*(){if("Img"===e.componentName){const n=e.component;if(e.type===t.OBSERVER_TYPE.ADD){const r=new i.Sprite(null);this.imgs[e.gameObject.id]=r,this.containerManager.getContainer(e.gameObject.id).addChildAt(r.sprite,0);const s=this.increaseAsyncId(e.gameObject.id),{instance:o}=yield t.resource.getResource(n.resource);if(!this.validateAsyncId(e.gameObject.id,s))return;o||console.error(`GameObject:${e.gameObject.name}'s Img resource load error`),this.imgs[e.gameObject.id].image=o}else if(e.type===t.OBSERVER_TYPE.CHANGE){const r=this.increaseAsyncId(e.gameObject.id),{instance:i}=yield t.resource.getResource(n.resource);if(!this.validateAsyncId(e.gameObject.id,r))return;i||console.error(`GameObject:${e.gameObject.name}'s Img resource load error`),this.imgs[e.gameObject.id].image=i}else if(e.type===t.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(e.gameObject.id);const t=this.imgs[e.gameObject.id];if(!t)return;null===(s=null===(r=this.containerManager)||void 0===r?void 0:r.getContainer(e.gameObject.id))||void 0===s||s.removeChild(t.sprite),t.sprite.destroy({children:!0}),delete this.imgs[e.gameObject.id]}}})}destroy(){var e,t;for(const r in this.imgs){const i=this.imgs[r];null===(t=null===(e=this.containerManager)||void 0===e?void 0:e.getContainer(parseInt(r)))||void 0===t||t.removeChild(i.sprite),i.sprite.destroy({children:!0}),delete this.imgs[r]}}};a.systemName="Img",a=n([t.decorators.componentObserver({Img:[{prop:["resource"],deep:!1}]})],a);var d=a;exports.Img=c,exports.ImgSystem=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/inspector-decorator"),t=require("@eva/eva.js"),r=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter"),n=require("pixi.js");function o(e,t,r,i){var n,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(o<3?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function c(e,t,r,i){return new(r||(r=Promise))(function(n,o){function s(e){try{a(i.next(e))}catch(e){o(e)}}function c(e){try{a(i.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(s,c)}a((i=i.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class a extends t.Component{constructor(e){super(e),this.resource="",this.anchor={x:0,y:0},this.init(e)}init(e){var t,r;e&&e.resource&&(this.resource=e.resource),e&&e.anchor&&(this.anchor={x:null!==(t=e.anchor.x)&&void 0!==t?t:this.anchor.x,y:null!==(r=e.anchor.y)&&void 0!==r?r:this.anchor.y}),e&&"number"==typeof e.width&&(this.width=e.width),e&&"number"==typeof e.height&&(this.height=e.height)}load(e){return e&&(this.resource=e),this}setAnchor(e,t=e){return this.anchor.x=e,this.anchor.y=t,this}setSize(e,t){return this.width=e,this.height=t,this}destroy(){return this}}a.componentName="Img",o([e.type("string"),s("design:type",String)],a.prototype,"resource",void 0),o([e.type("number"),s("design:type",Number)],a.prototype,"width",void 0),o([e.type("number"),s("design:type",Number)],a.prototype,"height",void 0),t.resource.registerInstance(t.RESOURCE_TYPE.IMAGE,({data:e={}})=>{const{image:t}=e;if(t){if(t instanceof n.Texture)return t;return n.Texture.from(t)}return e}),t.resource.registerDestroy(t.RESOURCE_TYPE.IMAGE,({instance:e})=>{e&&e.destroy(!0)});let d=class extends r.Renderer{constructor(){super(...arguments),this.name="ImgSystem",this.imgs={}}init(e){var t,i;const n=null===(i=null===(t=this.game)||void 0===t?void 0:t.getSystem)||void 0===i?void 0:i.call(t,r.RendererSystem);(null==n?void 0:n.rendererManager)&&(this.renderSystem=n,this.renderSystem.rendererManager.register(this))}update(e){super.update(e)}rendererUpdate(e){const t=e.getComponent("Img");this.applySpriteLayout(e,t)}componentChanged(e){var r,n,o,s,a,d;return c(this,void 0,void 0,function*(){if("Img"===e.componentName){const c=e.gameObject.id,u=e.component;if(e.type===t.OBSERVER_TYPE.ADD){const o=new i.Sprite(null);this.imgs[c]=o,null===(n=null===(r=this.containerManager)||void 0===r?void 0:r.getContainer(c))||void 0===n||n.addChildAt(o.sprite,0),this.applySpriteLayout(e.gameObject,u);const s=this.increaseAsyncId(c),{instance:a}=yield t.resource.getResource(u.resource);if(!this.validateAsyncId(c,s))return;if(!a)return void console.error(`GameObject:${e.gameObject.name}'s Img resource load error`);o.image=a,this.applySpriteLayout(e.gameObject,u)}else if(e.type===t.OBSERVER_TYPE.CHANGE){if(this.applySpriteLayout(e.gameObject,u),null===(s=null===(o=e.prop)||void 0===o?void 0:o.prop)||void 0===s?void 0:s.includes("resource")){const r=this.increaseAsyncId(c),{instance:i}=yield t.resource.getResource(u.resource);if(!this.validateAsyncId(c,r))return;if(!i)return void console.error(`GameObject:${e.gameObject.name}'s Img resource load error`);this.imgs[c].image=i,this.applySpriteLayout(e.gameObject,u)}}else if(e.type===t.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(c);const e=this.imgs[c];if(!e)return;null===(d=null===(a=this.containerManager)||void 0===a?void 0:a.getContainer(c))||void 0===d||d.removeChild(e.sprite),e.sprite.destroy({children:!0}),delete this.imgs[c]}}})}applySpriteLayout(e,t){var r,i,n,o,s;const c=this.imgs[e.id];if(!c)return;const a=null===(r=e.transform)||void 0===r?void 0:r.size,d=null!==(i=null==t?void 0:t.width)&&void 0!==i?i:null==a?void 0:a.width,u=null!==(n=null==t?void 0:t.height)&&void 0!==n?n:null==a?void 0:a.height;"number"==typeof d&&(c.sprite.width=d),"number"==typeof u&&(c.sprite.height=u);const h=null==t?void 0:t.anchor;h&&(null===(s=null===(o=c.sprite.anchor)||void 0===o?void 0:o.set)||void 0===s||s.call(o,h.x,h.y))}destroy(){var e,t;for(const r in this.imgs){const i=this.imgs[r];null===(t=null===(e=this.containerManager)||void 0===e?void 0:e.getContainer(parseInt(r)))||void 0===t||t.removeChild(i.sprite),i.sprite.destroy({children:!0}),delete this.imgs[r]}}};d.systemName="ImgSystem",d=o([t.decorators.componentObserver({Img:["resource",{prop:"anchor",deep:!0},"width","height"]})],d);var u=d;exports.Img=a,exports.ImgSystem=u;

package/dist/plugin-renderer-img.d.ts

@@ -27,16 +27,47 @@ export declare class Img extends Component<ImgParams> {
     static componentName: string;
     /** 图片资源名称 */
     resource: string;
+    /** 图片锚点 */
+    anchor: {
+        x: number;
+        y: number;
+    };
+    /** 显式渲染宽度 */
+    width?: number;
+    /** 显式渲染高度 */
+    height?: number;
+    constructor(params?: ImgParams);
     /**
      * 初始化组件
      * @param obj - 初始化参数
-     * @param obj.resource - 图片资源名称
+     *
+     * 配置项包括 resource、anchor、width 和 height。
      */
     init(obj?: ImgParams): void;
+    /**
+     * 切换当前图片资源。
+     *
+     * ImgSystem 会监听 resource 变化并刷新渲染纹理。
+     *
+     * @param resource - 图片资源名称
+     */
+    load(resource?: string): this;
+    /** 设置图片锚点。 */
+    setAnchor(x: number, y?: number): this;
+    /** 设置显式渲染尺寸。 */
+    setSize(width?: number, height?: number): this;
+    /** 释放组件持有的可编辑状态。渲染资源由 ImgSystem 统一管理。 */
+    destroy(): this;
 }
 
 export declare interface ImgParams {
     resource: string;
+    anchor?: {
+        x?: number;
+        y?: number;
+    };
+    width?: number;
+    height?: number;
 }
 
 export declare class ImgSystem extends Renderer {
@@ -48,9 +79,11 @@ export declare class ImgSystem extends Renderer {
     renderSystem: RendererSystem;
     rendererManager: RendererManager;
     containerManager: ContainerManager;
-    init(): void;
+    init(_params?: unknown): void;
+    update(_frame?: unknown): void;
     rendererUpdate(gameObject: GameObject): void;
     componentChanged(changed: ComponentChanged): Promise<void>;
+    private applySpriteLayout;
     destroy(): void;
 }
 

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

@@ -26,6 +26,10 @@ function __decorate(decorators, target, key, desc) {
     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) {
@@ -57,27 +61,82 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * ```
  */
 class Img$2 extends Component {
-    constructor() {
-        super(...arguments);
+    constructor(params) {
+        super(params);
         /** 图片资源名称 */
         this.resource = '';
+        /** 图片锚点 */
+        this.anchor = { x: 0, y: 0 };
+        this.init(params);
     }
     /**
      * 初始化组件
      * @param obj - 初始化参数
-     * @param obj.resource - 图片资源名称
+     *
+     * 配置项包括 resource、anchor、width 和 height。
      */
     init(obj) {
+        var _a, _b;
         if (obj && obj.resource) {
             this.resource = obj.resource;
         }
+        if (obj && obj.anchor) {
+            this.anchor = {
+                x: (_a = obj.anchor.x) !== null && _a !== void 0 ? _a : this.anchor.x,
+                y: (_b = obj.anchor.y) !== null && _b !== void 0 ? _b : this.anchor.y,
+            };
+        }
+        if (obj && typeof obj.width === 'number') {
+            this.width = obj.width;
+        }
+        if (obj && typeof obj.height === 'number') {
+            this.height = obj.height;
+        }
+    }
+    /**
+     * 切换当前图片资源。
+     *
+     * ImgSystem 会监听 resource 变化并刷新渲染纹理。
+     *
+     * @param resource - 图片资源名称
+     */
+    load(resource) {
+        if (resource) {
+            this.resource = resource;
+        }
+        return this;
+    }
+    /** 设置图片锚点。 */
+    setAnchor(x, y = x) {
+        this.anchor.x = x;
+        this.anchor.y = y;
+        return this;
+    }
+    /** 设置显式渲染尺寸。 */
+    setSize(width, height) {
+        this.width = width;
+        this.height = height;
+        return this;
+    }
+    /** 释放组件持有的可编辑状态。渲染资源由 ImgSystem 统一管理。 */
+    destroy() {
+        return this;
     }
 }
 /** 组件名称 */
 Img$2.componentName = 'Img';
 __decorate([
-    type('string')
-], Img$2.prototype, "resource", void 0);
+    type('string'),
+    __metadata("design:type", String)
+], Img$2.prototype, "resource", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Number)
+], Img$2.prototype, "width", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Number)
+], Img$2.prototype, "height", void 0);
 
 resource.registerInstance(RESOURCE_TYPE.IMAGE, ({ data = {} }) => {
     const { image } = data;
@@ -98,60 +157,92 @@ resource.registerDestroy(RESOURCE_TYPE.IMAGE, ({ instance }) => {
 let Img = class Img extends Renderer {
     constructor() {
         super(...arguments);
-        this.name = 'Img';
+        this.name = 'ImgSystem';
         this.imgs = {};
     }
-    init() {
-        this.renderSystem = this.game.getSystem(RendererSystem);
+    init(_params) {
+        var _a, _b;
+        const renderSystem = (_b = (_a = this.game) === null || _a === void 0 ? void 0 : _a.getSystem) === null || _b === void 0 ? void 0 : _b.call(_a, RendererSystem);
+        if (!(renderSystem === null || renderSystem === void 0 ? void 0 : renderSystem.rendererManager))
+            return;
+        this.renderSystem = renderSystem;
         this.renderSystem.rendererManager.register(this);
     }
+    update(_frame) {
+        super.update(_frame);
+    }
     rendererUpdate(gameObject) {
-        const { width, height } = gameObject.transform.size;
-        if (this.imgs[gameObject.id]) {
-            this.imgs[gameObject.id].sprite.width = width;
-            this.imgs[gameObject.id].sprite.height = height;
-        }
+        const component = gameObject.getComponent('Img');
+        this.applySpriteLayout(gameObject, component);
     }
     componentChanged(changed) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
             if (changed.componentName === 'Img') {
+                const gameObjectId = changed.gameObject.id;
                 const component = changed.component;
                 if (changed.type === OBSERVER_TYPE.ADD) {
                     const sprite = new Sprite(null);
-                    this.imgs[changed.gameObject.id] = sprite;
-                    this.containerManager.getContainer(changed.gameObject.id).addChildAt(sprite.sprite, 0);
-                    const asyncId = this.increaseAsyncId(changed.gameObject.id);
+                    this.imgs[gameObjectId] = sprite;
+                    (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(gameObjectId)) === null || _b === void 0 ? void 0 : _b.addChildAt(sprite.sprite, 0);
+                    this.applySpriteLayout(changed.gameObject, component);
+                    const asyncId = this.increaseAsyncId(gameObjectId);
                     const { instance } = yield resource.getResource(component.resource);
-                    if (!this.validateAsyncId(changed.gameObject.id, asyncId))
+                    if (!this.validateAsyncId(gameObjectId, asyncId))
                         return;
                     if (!instance) {
                         console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                        return;
                     }
-                    this.imgs[changed.gameObject.id].image = instance;
+                    sprite.image = instance;
+                    this.applySpriteLayout(changed.gameObject, component);
                 }
                 else if (changed.type === OBSERVER_TYPE.CHANGE) {
-                    const asyncId = this.increaseAsyncId(changed.gameObject.id);
-                    const { instance } = yield resource.getResource(component.resource);
-                    if (!this.validateAsyncId(changed.gameObject.id, asyncId))
-                        return;
-                    if (!instance) {
-                        console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                    this.applySpriteLayout(changed.gameObject, component);
+                    if ((_d = (_c = changed.prop) === null || _c === void 0 ? void 0 : _c.prop) === null || _d === void 0 ? void 0 : _d.includes('resource')) {
+                        const asyncId = this.increaseAsyncId(gameObjectId);
+                        const { instance } = yield resource.getResource(component.resource);
+                        if (!this.validateAsyncId(gameObjectId, asyncId))
+                            return;
+                        if (!instance) {
+                            console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                            return;
+                        }
+                        this.imgs[gameObjectId].image = instance;
+                        this.applySpriteLayout(changed.gameObject, component);
                     }
-                    this.imgs[changed.gameObject.id].image = instance;
                 }
                 else if (changed.type === OBSERVER_TYPE.REMOVE) {
-                    this.increaseAsyncId(changed.gameObject.id);
-                    const sprite = this.imgs[changed.gameObject.id];
+                    this.increaseAsyncId(gameObjectId);
+                    const sprite = this.imgs[gameObjectId];
                     if (!sprite)
                         return;
-                    (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id)) === null || _b === void 0 ? void 0 : _b.removeChild(sprite.sprite);
+                    (_f = (_e = this.containerManager) === null || _e === void 0 ? void 0 : _e.getContainer(gameObjectId)) === null || _f === void 0 ? void 0 : _f.removeChild(sprite.sprite);
                     sprite.sprite.destroy({ children: true });
-                    delete this.imgs[changed.gameObject.id];
+                    delete this.imgs[gameObjectId];
                 }
             }
         });
     }
+    applySpriteLayout(gameObject, component) {
+        var _a, _b, _c, _d, _e;
+        const sprite = this.imgs[gameObject.id];
+        if (!sprite)
+            return;
+        const size = (_a = gameObject.transform) === null || _a === void 0 ? void 0 : _a.size;
+        const width = (_b = component === null || component === void 0 ? void 0 : component.width) !== null && _b !== void 0 ? _b : size === null || size === void 0 ? void 0 : size.width;
+        const height = (_c = component === null || component === void 0 ? void 0 : component.height) !== null && _c !== void 0 ? _c : size === null || size === void 0 ? void 0 : size.height;
+        if (typeof width === 'number') {
+            sprite.sprite.width = width;
+        }
+        if (typeof height === 'number') {
+            sprite.sprite.height = height;
+        }
+        const anchor = component === null || component === void 0 ? void 0 : component.anchor;
+        if (anchor) {
+            (_e = (_d = sprite.sprite.anchor) === null || _d === void 0 ? void 0 : _d.set) === null || _e === void 0 ? void 0 : _e.call(_d, anchor.x, anchor.y);
+        }
+    }
     destroy() {
         var _a, _b;
         for (const key in this.imgs) {
@@ -162,10 +253,10 @@ let Img = class Img extends Renderer {
         }
     }
 };
-Img.systemName = 'Img';
+Img.systemName = 'ImgSystem';
 Img = __decorate([
     decorators.componentObserver({
-        Img: [{ prop: ['resource'], deep: false }],
+        Img: ['resource', { prop: 'anchor', deep: true }, 'width', 'height'],
     })
 ], Img);
 var Img$1 = Img;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-img",
-  "version": "2.0.2",
+  "version": "2.1.0-beta.2",
   "description": "@eva/plugin-renderer-img",
   "main": "index.js",
   "module": "dist/plugin-renderer-img.esm.js",
@@ -18,10 +18,10 @@
   "license": "MIT",
   "homepage": "https://eva.js.org",
   "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.2",
+    "@eva/renderer-adapter": "2.1.0-beta.2",
+    "@eva/eva.js": "2.1.0-beta.2",
     "pixi.js": "^8.17.0"
   }
 }