@eva/plugin-renderer-img 2.1.0-beta.3 → 2.1.0-beta.4

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

@@ -0,0 +1,337 @@
+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 || {};
+var _EVA_IIFE_img = function (exports, eva_js, pluginRenderer, rendererAdapter, pixi_js) {
+  'use strict';
+  function __decorate(decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  }
+  function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+  }
+  function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function (resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+  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 (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 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(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'), __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 = {}
+  }) => {
+    const {
+      image
+    } = data;
+    if (image) {
+      if (image instanceof pixi_js.Texture) {
+        return image;
+      }
+      const texture = pixi_js.Texture.from(image);
+      return texture;
+    }
+    return data;
+  });
+  eva_js.resource.registerDestroy(eva_js.RESOURCE_TYPE.IMAGE, ({
+    instance
+  }) => {
+    if (instance) {
+      instance.destroy(true);
+    }
+  });
+  let Img = class Img extends pluginRenderer.Renderer {
+    constructor() {
+      super(...arguments);
+      this.name = 'ImgSystem';
+      this.imgs = {};
+    }
+    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 component = gameObject.getComponent('Img');
+      this.applySpriteLayout(gameObject, component);
+    }
+    componentChanged(changed) {
+      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[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(gameObjectId, asyncId)) return;
+            if (!instance) {
+              console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+              return;
+            }
+            sprite.image = instance;
+            this.applySpriteLayout(changed.gameObject, component);
+          } else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
+            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);
+            }
+          } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
+            this.increaseAsyncId(gameObjectId);
+            const sprite = this.imgs[gameObjectId];
+            if (!sprite) return;
+            (_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[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) {
+        const sprite = this.imgs[key];
+        (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(parseInt(key))) === null || _b === void 0 ? void 0 : _b.removeChild(sprite.sprite);
+        sprite.sprite.destroy({
+          children: true
+        });
+        delete this.imgs[key];
+      }
+    }
+  };
+  Img.systemName = 'ImgSystem';
+  Img = __decorate([eva_js.decorators.componentObserver({
+    Img: ['resource', {
+      prop: 'anchor',
+      deep: true
+    }, 'width', 'height']
+  })], Img);
+  var Img$1 = Img;
+  exports.Img = Img$2;
+  exports.ImgSystem = Img$1;
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  return exports;
+}({}, EVA, EVA.plugin.renderer, EVA.rendererAdapter, PIXI);
+globalThis.EVA.plugin.renderer.img = globalThis.EVA.plugin.renderer.img || _EVA_IIFE_img;

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

@@ -0,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 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,"function"==typeof SuppressedError&&SuppressedError;class a extends Error{constructor(){super("Symbol keys are not supported yet!"),Object.setPrototypeOf(this,new.target.prototype)}}const u="IDE_PROPERTY_METADATA";function l(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(u,e.constructor)||{},a=_extends(_extends(_extends({},c[t]||{}),{type:o,isArray:i}),r);c[t]=a,Reflect.defineMetadata(u,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);l(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,u;return c(this,void 0,void 0,function*(){if("Img"===e.componentName){const c=e.gameObject.id,l=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,l);const s=this.increaseAsyncId(c),{instance:a}=yield t.resource.getResource(l.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,l)}else if(e.type===t.OBSERVER_TYPE.CHANGE){if(this.applySpriteLayout(e.gameObject,l),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(l.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,l)}}else if(e.type===t.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(c);const e=this.imgs[c];if(!e)return;null===(u=null===(a=this.containerManager)||void 0===a?void 0:a.getContainer(c))||void 0===u||u.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,u=null!==(n=null==t?void 0:t.width)&&void 0!==n?n:null==a?void 0:a.width,l=null!==(o=null==t?void 0:t.height)&&void 0!==o?o:null==a?void 0:a.height;"number"==typeof u&&(c.sprite.width=u),"number"==typeof l&&(c.sprite.height=l);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

@@ -0,0 +1,269 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var inspectorDecorator = require('@eva/inspector-decorator');
+var eva_js = require('@eva/eva.js');
+var pluginRenderer = require('@eva/plugin-renderer');
+var rendererAdapter = require('@eva/renderer-adapter');
+var pixi_js = require('pixi.js');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * 图片组件
+ *
+ * Img 组件用于渲染单张图片。
+ * 它是最基础的图像渲染组件，适用于背景、UI 元素、静态贴图等场景。
+ *
+ * @example
+ * ```typescript
+ * // 渲染一张背景图
+ * const background = new GameObject('background');
+ * background.addComponent(new Img({
+ *   resource: 'bgImage' // 资源名称
+ * }));
+ * ```
+ */
+class Img$2 extends eva_js.Component {
+    constructor(params) {
+        super(params);
+        /** 图片资源名称 */
+        this.resource = '';
+        /** 图片锚点 */
+        this.anchor = { x: 0, y: 0 };
+        this.init(params);
+    }
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     *
+     * 配置项包括 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'),
+    __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;
+    if (image) {
+        if (image instanceof pixi_js.Texture) {
+            return image;
+        }
+        const texture = pixi_js.Texture.from(image);
+        return texture;
+    }
+    return data;
+});
+eva_js.resource.registerDestroy(eva_js.RESOURCE_TYPE.IMAGE, ({ instance }) => {
+    if (instance) {
+        instance.destroy(true);
+    }
+});
+let Img = class Img extends pluginRenderer.Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'ImgSystem';
+        this.imgs = {};
+    }
+    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 component = gameObject.getComponent('Img');
+        this.applySpriteLayout(gameObject, component);
+    }
+    componentChanged(changed) {
+        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[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(gameObjectId, asyncId))
+                        return;
+                    if (!instance) {
+                        console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                        return;
+                    }
+                    sprite.image = instance;
+                    this.applySpriteLayout(changed.gameObject, component);
+                }
+                else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
+                    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);
+                    }
+                }
+                else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
+                    this.increaseAsyncId(gameObjectId);
+                    const sprite = this.imgs[gameObjectId];
+                    if (!sprite)
+                        return;
+                    (_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[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) {
+            const sprite = this.imgs[key];
+            (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(parseInt(key))) === null || _b === void 0 ? void 0 : _b.removeChild(sprite.sprite);
+            sprite.sprite.destroy({ children: true });
+            delete this.imgs[key];
+        }
+    }
+};
+Img.systemName = 'ImgSystem';
+Img = __decorate([
+    eva_js.decorators.componentObserver({
+        Img: ['resource', { prop: 'anchor', deep: true }, 'width', 'height'],
+    })
+], Img);
+var Img$1 = Img;
+
+exports.Img = Img$2;
+exports.ImgSystem = Img$1;

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

@@ -0,0 +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"),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

@@ -0,0 +1,90 @@
+import { Component } from '@eva/eva.js';
+import { ComponentChanged } from '@eva/eva.js';
+import { ContainerManager } from '@eva/plugin-renderer';
+import { GameObject } from '@eva/eva.js';
+import { Renderer } from '@eva/plugin-renderer';
+import { RendererManager } from '@eva/plugin-renderer';
+import { RendererSystem } from '@eva/plugin-renderer';
+import { Sprite } from '@eva/renderer-adapter';
+
+/**
+ * 图片组件
+ *
+ * Img 组件用于渲染单张图片。
+ * 它是最基础的图像渲染组件，适用于背景、UI 元素、静态贴图等场景。
+ *
+ * @example
+ * ```typescript
+ * // 渲染一张背景图
+ * const background = new GameObject('background');
+ * background.addComponent(new Img({
+ *   resource: 'bgImage' // 资源名称
+ * }));
+ * ```
+ */
+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 - 初始化参数
+     *
+     * 配置项包括 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 {
+    static systemName: string;
+    name: string;
+    imgs: {
+        [propName: number]: Sprite;
+    };
+    renderSystem: RendererSystem;
+    rendererManager: RendererManager;
+    containerManager: ContainerManager;
+    init(_params?: unknown): void;
+    update(_frame?: unknown): void;
+    rendererUpdate(gameObject: GameObject): void;
+    componentChanged(changed: ComponentChanged): Promise<void>;
+    private applySpriteLayout;
+    destroy(): void;
+}
+
+export { }

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

@@ -0,0 +1,264 @@
+import { type } from '@eva/inspector-decorator';
+import { Component, resource, RESOURCE_TYPE, decorators, OBSERVER_TYPE } from '@eva/eva.js';
+import { Renderer, RendererSystem } from '@eva/plugin-renderer';
+import { Sprite } from '@eva/renderer-adapter';
+import { Texture } from 'pixi.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * 图片组件
+ *
+ * Img 组件用于渲染单张图片。
+ * 它是最基础的图像渲染组件，适用于背景、UI 元素、静态贴图等场景。
+ *
+ * @example
+ * ```typescript
+ * // 渲染一张背景图
+ * const background = new GameObject('background');
+ * background.addComponent(new Img({
+ *   resource: 'bgImage' // 资源名称
+ * }));
+ * ```
+ */
+class Img$2 extends Component {
+    constructor(params) {
+        super(params);
+        /** 图片资源名称 */
+        this.resource = '';
+        /** 图片锚点 */
+        this.anchor = { x: 0, y: 0 };
+        this.init(params);
+    }
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     *
+     * 配置项包括 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'),
+    __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;
+    if (image) {
+        if (image instanceof Texture) {
+            return image;
+        }
+        const texture = Texture.from(image);
+        return texture;
+    }
+    return data;
+});
+resource.registerDestroy(RESOURCE_TYPE.IMAGE, ({ instance }) => {
+    if (instance) {
+        instance.destroy(true);
+    }
+});
+let Img = class Img extends Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'ImgSystem';
+        this.imgs = {};
+    }
+    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 component = gameObject.getComponent('Img');
+        this.applySpriteLayout(gameObject, component);
+    }
+    componentChanged(changed) {
+        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[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(gameObjectId, asyncId))
+                        return;
+                    if (!instance) {
+                        console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
+                        return;
+                    }
+                    sprite.image = instance;
+                    this.applySpriteLayout(changed.gameObject, component);
+                }
+                else if (changed.type === OBSERVER_TYPE.CHANGE) {
+                    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);
+                    }
+                }
+                else if (changed.type === OBSERVER_TYPE.REMOVE) {
+                    this.increaseAsyncId(gameObjectId);
+                    const sprite = this.imgs[gameObjectId];
+                    if (!sprite)
+                        return;
+                    (_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[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) {
+            const sprite = this.imgs[key];
+            (_b = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(parseInt(key))) === null || _b === void 0 ? void 0 : _b.removeChild(sprite.sprite);
+            sprite.sprite.destroy({ children: true });
+            delete this.imgs[key];
+        }
+    }
+};
+Img.systemName = 'ImgSystem';
+Img = __decorate([
+    decorators.componentObserver({
+        Img: ['resource', { prop: 'anchor', deep: true }, 'width', 'height'],
+    })
+], Img);
+var Img$1 = Img;
+
+export { Img$2 as Img, Img$1 as ImgSystem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-img",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.4",
   "description": "@eva/plugin-renderer-img",
   "main": "index.js",
   "module": "dist/plugin-renderer-img.esm.js",
@@ -19,9 +19,9 @@
   "homepage": "https://eva.js.org",
   "dependencies": {
     "@eva/inspector-decorator": "^2.0.0-beta.0",
-    "@eva/plugin-renderer": "2.1.0-beta.3",
-    "@eva/renderer-adapter": "2.1.0-beta.3",
-    "@eva/eva.js": "2.1.0-beta.3",
+    "@eva/plugin-renderer": "2.1.0-beta.4",
+    "@eva/renderer-adapter": "2.1.0-beta.4",
+    "@eva/eva.js": "2.1.0-beta.4",
     "pixi.js": "^8.17.0"
   }
 }