@eva/plugin-a11y 2.0.0-beta.9 → 2.0.0

package/dist/EVA.plugin.a11y.js

@@ -1,6 +1,6 @@
 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); }
-window.EVA = window.EVA || {};
-window.EVA.plugin = window.EVA.plugin || {};
+globalThis.EVA = globalThis.EVA || {};
+globalThis.EVA.plugin = globalThis.EVA.plugin || {};
 var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
   'use strict';
   function __decorate(decorators, target, key, desc) {
@@ -488,9 +488,8 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
         pointerEvents: PointerEvents.AUTO,
         background: this.debug ? MaskBackground.DEBUG : MaskBackground.NONE
       };
-      const transformProps = _extends({}, transform);
       setStyle(element, style);
-      setTransform(element, transformProps, this.ratioX, this.ratioY);
+      setTransform(element, transform, this.ratioX, this.ratioY);
     }
     onDestroy() {
       this.div.parentElement.removeChild(this.div);
@@ -513,4 +512,4 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
   });
   return exports;
 }({}, EVA, EVA.plugin.renderer);
-window.EVA.plugin.a11y = window.EVA.plugin.a11y || _EVA_IIFE_a11y;
+globalThis.EVA.plugin.a11y = globalThis.EVA.plugin.a11y || _EVA_IIFE_a11y;

package/dist/EVA.plugin.a11y.min.js

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}window.EVA=window.EVA||{},window.EVA.plugin=window.EVA.plugin||{};var _EVA_IIFE_a11y=function(t,e,n){"use strict";function i(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,n,r):o(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}function o(t,e,n,i){return new(n||(n=Promise))((function(o,s){function r(t){try{c(i.next(t))}catch(t){s(t)}}function a(t){try{c(i.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,a)}c((i=i.apply(t,e||[])).next())}))}function s(t,e){return t.constructor.IDEProps||(t.constructor.IDEProps={}),t.constructor.IDEProps[e]||(t.constructor.IDEProps[e]={}),t.constructor.IDEProps[e]}function r(t){return function(e,n){var i=s(e,n);i.key=n,i.type=t}}const a=(t,e)=>{const{width:n,height:i,position:o,left:s=0,top:r=0,zIndex:a,pointerEvents:c,background:h}=e;t.style.width=`${n}px`,t.style.height=`${i}px`,t.style.position=o,t.style.left=`${s}`,t.style.top=`${r}`,t.style.zIndex=`${a}`,t.style.pointerEvents=c,t.style.background=h,t.style.border="none",t.style.overflow="hidden"};class c extends e.Component{constructor(t){super(),_extends(this,t);const{hint:e="",event:n,delay:i=0,attr:o={},role:s="",props:r={},state:a={}}=t;this.hint=e,this.event=n,this.delay=i,this.attr=o,this.role=s,this.props=r,this.state=a,this.a11yId=`_${function(t){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),n=[],i=e.length;for(let o=0;o<t;o++)n[o]=e[0|Math.random()*i];return n.join("")}(6)}`}}c.componentName="A11y",i([r("boolean")],c.prototype,"interactive",void 0),i([r("string")],c.prototype,"hint",void 0),i([r("number"),function(t){return function(e,n){s(e,n).step=t}}(1)],c.prototype,"delay",void 0),i([r("string")],c.prototype,"role",void 0),i([r("string")],c.prototype,"a11yId",void 0);const h="absolute";var d,p,u,l;t.A11yActivate=void 0,(d=t.A11yActivate||(t.A11yActivate={}))[d.ENABLE=0]="ENABLE",d[d.DISABLE=1]="DISABLE",d[d.CHECK=2]="CHECK",function(t){t.NONE="none",t.AUTO="auto"}(p||(p={})),function(t){t.DEBUG="rgba(255,0,0,0.5)",t.NONE="transparent"}(u||(u={})),function(t){t.BUTTON="button",t.DIV="div"}(l||(l={}));const v=["hint","event","delay","attr","role","props","state","a11yId","name"],f=function(t,e,n){["touchstart","touchend","tap"].forEach((i=>{t.emit(i,{stopPropagation:()=>n.stopPropagation(),data:{position:this.eventPosition},gameObject:e})}))};let y=class extends e.System{constructor(t){super(t),this.cache=new Map,this.eventCache=new Map,this.zIndex=3}get ratioX(){if(this._ratioX)return this._ratioX;return this.setRatio()?this._ratioX:0}get ratioY(){if(this._ratioY)return this._ratioY;return this.setRatio()?this._ratioY:0}init(e={}){return o(this,void 0,void 0,(function*(){const{activate:n=t.A11yActivate.CHECK,delay:i=100,checkA11yOpen:o=()=>Promise.resolve(!1),zIndex:s}=e;switch(this.delay=i,this.zIndex=s||this.zIndex,n){case t.A11yActivate.CHECK:try{this.activate=yield o()}catch(t){this.activate=!1}break;case t.A11yActivate.DISABLE:this.activate=!1;break;case t.A11yActivate.ENABLE:this.activate=!0}if(this.debug=e.debug||!1,this.debug&&(this.activate=!0),!this.activate)return;const r=document.createElement("div");this.div=r,this.game.canvas.parentNode&&this.game.canvas.parentNode.insertBefore(this.div,this.game.canvas)}))}setRatio(){const{width:t,height:e}=this.getCanvasBoundingClientRect(),{renderWidth:n,renderHeight:i}=this.getRenderRect();return this._ratioX=t/n,this._ratioY=e/i,!(!t&&!e)&&(this.initDiv(),!0)}getRenderRect(){const{params:t={width:300,height:300}}=this.game.getSystem(n.RendererSystem),{height:e,width:i}=t;return{renderWidth:i,renderHeight:e}}getCanvasBoundingClientRect(){const{width:t,height:e,left:n,top:i}=this.game.canvas.getBoundingClientRect();return{width:t,height:e,left:n,top:i}}initDiv(){const{pageXOffset:t,pageYOffset:e}=window,{width:n,height:i,left:o,top:s}=this.getCanvasBoundingClientRect(),r={width:n,height:i,left:`${o+t}px`,top:`${s+e}px`,position:h,zIndex:this.zIndex,pointerEvents:p.NONE,background:u.NONE};a(this.div,r),this.div.addEventListener("click",(t=>{const e=t.currentTarget,{left:n,top:i}=e.getBoundingClientRect(),o=(t.pageX-n)/this.ratioX,s=(t.pageY-i)/this.ratioY;this.eventPosition={x:o,y:s}}),!0)}update(){return o(this,void 0,void 0,(function*(){const t=this.componentObserver.clear();if(this.activate)for(const n of t)switch(n.type){case e.OBSERVER_TYPE.ADD:"Event"===n.componentName&&this.addEvent(n.gameObject),"A11y"===n.componentName&&this.add(n);break;case e.OBSERVER_TYPE.CHANGE:"Transform"===n.componentName&&this.transformChange(n),"A11y"===n.componentName&&this.change(n);break;case e.OBSERVER_TYPE.REMOVE:"Event"===n.componentName&&this.removeEvent(n),"A11y"===n.componentName&&this.remove(n)}}))}change(t){const e=t.component;if("hint"===t.prop.prop[0]){const n=this.cache.get(e.a11yId);null==n||n.setAttribute("aria-label",e.hint),n&&this.setPosition(n,t.gameObject.transform)}}remove(t){const e=t.component;if(!e)return;const{a11yId:n}=e,i=this.div.querySelector(`#${n}`);i&&this.div.removeChild(i),this.cache.delete(n)}add(t){if(!this.activate)return;const e=t.component,{gameObject:n}=t,{delay:i,a11yId:o}=e;let{event:s}=e;if(!n)return;const{transform:r}=n;if(!r)return;const a=document.createElement("div");this.cache.set(o,a),s||(s=n.getComponent("Event")),setTimeout((()=>{this.setPosition(a,r),this.setA11yAttr(a,e),s&&this.addEvent(n),n.scene&&this.div.appendChild(a)}),i||this.delay)}transformChange(t){const e=t.component,{gameObject:n}=t,i=n.getComponent(c);if(!i)return;const{a11yId:o}=i;if(e.inScene){if(this.cache.has(o)){const t=this.cache.get(o);t&&this.div.appendChild(t)}}else{const t=this.div.querySelector(`#${o}`);t&&this.div.removeChild(t)}}setEvent(t,e,n,i){if(!e)return;const o=f.bind(this,e,n);this.eventCache.set(i,o),t.addEventListener("click",o)}addEvent(t){const e=t.getComponent(c);if(!e)return;const n=t.getComponent("Event");if(!n)return;const i=this.cache.get(e.a11yId);i&&this.setEvent(i,n,t,e.a11yId)}removeEvent(t){const{gameObject:e}=t,n=e.getComponent(c);if(!n)return;if(!t.component)return;const{a11yId:i}=n,o=this.eventCache.get(i),s=this.cache.get(i);s&&s.removeEventListener("click",o)}setA11yAttr(t,e){const{hint:n,props:i={},state:o={},role:s,a11yId:r}=e,a=s||"text";t.setAttribute("role",a),t.setAttribute("aria-label",n),t.id=r;const c=Object.keys(i);for(const e of c)t.setAttribute(e,i[e]);const h=Object.keys(o);for(const e of h)t.setAttribute(e,o[e]);for(const n of Object.keys(e))"string"==typeof e[n]&&-1===v.indexOf(n)&&1!==n.indexOf("_")&&t.setAttribute(n,e[n])}setPosition(t,e){const{width:n,height:i}=e.size,o={width:0===n?1:n*this.ratioX,height:0===i?1:i*this.ratioY,position:h,zIndex:this.zIndex,pointerEvents:p.AUTO,background:this.debug?u.DEBUG:u.NONE},s=_extends({},e);a(t,o),((t,e,n,i)=>{const{worldTransform:o}=e,{a:s,b:r,c:a,d:c,tx:h,ty:d}=o,p=`matrix(${s}, ${r}, ${a}, ${c}, ${h*n}, ${d*i})`;t.style.transform=`${p}`,t.style.webkitTransform=`${p}`,t.style.transformOrigin="left top",t.style.webkitTransformOrigin="left top"})(t,s,this.ratioX,this.ratioY)}onDestroy(){this.div.parentElement.removeChild(this.div),this.cache=null,this.eventCache=null,this.div=null}};y.systemName="A11ySystem",y=i([e.decorators.componentObserver({A11y:["hint"],Transform:["inScene"],Event:[]})],y);var g=y;return t.A11y=c,t.A11ySystem=g,Object.defineProperty(t,"__esModule",{value:!0}),t}({},EVA,EVA.plugin.renderer);window.EVA.plugin.a11y=window.EVA.plugin.a11y||_EVA_IIFE_a11y;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{};var _EVA_IIFE_a11y=function(t,e,n){"use strict";function i(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,n,r):o(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}function o(t,e,n,i){return new(n||(n=Promise))((function(o,s){function r(t){try{c(i.next(t))}catch(t){s(t)}}function a(t){try{c(i.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,a)}c((i=i.apply(t,e||[])).next())}))}function s(t,e){return t.constructor.IDEProps||(t.constructor.IDEProps={}),t.constructor.IDEProps[e]||(t.constructor.IDEProps[e]={}),t.constructor.IDEProps[e]}function r(t){return function(e,n){var i=s(e,n);i.key=n,i.type=t}}const a=(t,e)=>{const{width:n,height:i,position:o,left:s=0,top:r=0,zIndex:a,pointerEvents:c,background:h}=e;t.style.width=`${n}px`,t.style.height=`${i}px`,t.style.position=o,t.style.left=`${s}`,t.style.top=`${r}`,t.style.zIndex=`${a}`,t.style.pointerEvents=c,t.style.background=h,t.style.border="none",t.style.overflow="hidden"};class c extends e.Component{constructor(t){super(),_extends(this,t);const{hint:e="",event:n,delay:i=0,attr:o={},role:s="",props:r={},state:a={}}=t;this.hint=e,this.event=n,this.delay=i,this.attr=o,this.role=s,this.props=r,this.state=a,this.a11yId=`_${function(t){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),n=[],i=e.length;for(let o=0;o<t;o++)n[o]=e[0|Math.random()*i];return n.join("")}(6)}`}}c.componentName="A11y",i([r("boolean")],c.prototype,"interactive",void 0),i([r("string")],c.prototype,"hint",void 0),i([r("number"),function(t){return function(e,n){s(e,n).step=t}}(1)],c.prototype,"delay",void 0),i([r("string")],c.prototype,"role",void 0),i([r("string")],c.prototype,"a11yId",void 0);const h="absolute";var d,l,p,u;t.A11yActivate=void 0,(d=t.A11yActivate||(t.A11yActivate={}))[d.ENABLE=0]="ENABLE",d[d.DISABLE=1]="DISABLE",d[d.CHECK=2]="CHECK",function(t){t.NONE="none",t.AUTO="auto"}(l||(l={})),function(t){t.DEBUG="rgba(255,0,0,0.5)",t.NONE="transparent"}(p||(p={})),function(t){t.BUTTON="button",t.DIV="div"}(u||(u={}));const v=["hint","event","delay","attr","role","props","state","a11yId","name"],g=function(t,e,n){["touchstart","touchend","tap"].forEach((i=>{t.emit(i,{stopPropagation:()=>n.stopPropagation(),data:{position:this.eventPosition},gameObject:e})}))};let f=class extends e.System{constructor(t){super(t),this.cache=new Map,this.eventCache=new Map,this.zIndex=3}get ratioX(){if(this._ratioX)return this._ratioX;return this.setRatio()?this._ratioX:0}get ratioY(){if(this._ratioY)return this._ratioY;return this.setRatio()?this._ratioY:0}init(e={}){return o(this,void 0,void 0,(function*(){const{activate:n=t.A11yActivate.CHECK,delay:i=100,checkA11yOpen:o=()=>Promise.resolve(!1),zIndex:s}=e;switch(this.delay=i,this.zIndex=s||this.zIndex,n){case t.A11yActivate.CHECK:try{this.activate=yield o()}catch(t){this.activate=!1}break;case t.A11yActivate.DISABLE:this.activate=!1;break;case t.A11yActivate.ENABLE:this.activate=!0}if(this.debug=e.debug||!1,this.debug&&(this.activate=!0),!this.activate)return;const r=document.createElement("div");this.div=r,this.game.canvas.parentNode&&this.game.canvas.parentNode.insertBefore(this.div,this.game.canvas)}))}setRatio(){const{width:t,height:e}=this.getCanvasBoundingClientRect(),{renderWidth:n,renderHeight:i}=this.getRenderRect();return this._ratioX=t/n,this._ratioY=e/i,!(!t&&!e)&&(this.initDiv(),!0)}getRenderRect(){const{params:t={width:300,height:300}}=this.game.getSystem(n.RendererSystem),{height:e,width:i}=t;return{renderWidth:i,renderHeight:e}}getCanvasBoundingClientRect(){const{width:t,height:e,left:n,top:i}=this.game.canvas.getBoundingClientRect();return{width:t,height:e,left:n,top:i}}initDiv(){const{pageXOffset:t,pageYOffset:e}=window,{width:n,height:i,left:o,top:s}=this.getCanvasBoundingClientRect(),r={width:n,height:i,left:`${o+t}px`,top:`${s+e}px`,position:h,zIndex:this.zIndex,pointerEvents:l.NONE,background:p.NONE};a(this.div,r),this.div.addEventListener("click",(t=>{const e=t.currentTarget,{left:n,top:i}=e.getBoundingClientRect(),o=(t.pageX-n)/this.ratioX,s=(t.pageY-i)/this.ratioY;this.eventPosition={x:o,y:s}}),!0)}update(){return o(this,void 0,void 0,(function*(){const t=this.componentObserver.clear();if(this.activate)for(const n of t)switch(n.type){case e.OBSERVER_TYPE.ADD:"Event"===n.componentName&&this.addEvent(n.gameObject),"A11y"===n.componentName&&this.add(n);break;case e.OBSERVER_TYPE.CHANGE:"Transform"===n.componentName&&this.transformChange(n),"A11y"===n.componentName&&this.change(n);break;case e.OBSERVER_TYPE.REMOVE:"Event"===n.componentName&&this.removeEvent(n),"A11y"===n.componentName&&this.remove(n)}}))}change(t){const e=t.component;if("hint"===t.prop.prop[0]){const n=this.cache.get(e.a11yId);null==n||n.setAttribute("aria-label",e.hint),n&&this.setPosition(n,t.gameObject.transform)}}remove(t){const e=t.component;if(!e)return;const{a11yId:n}=e,i=this.div.querySelector(`#${n}`);i&&this.div.removeChild(i),this.cache.delete(n)}add(t){if(!this.activate)return;const e=t.component,{gameObject:n}=t,{delay:i,a11yId:o}=e;let{event:s}=e;if(!n)return;const{transform:r}=n;if(!r)return;const a=document.createElement("div");this.cache.set(o,a),s||(s=n.getComponent("Event")),setTimeout((()=>{this.setPosition(a,r),this.setA11yAttr(a,e),s&&this.addEvent(n),n.scene&&this.div.appendChild(a)}),i||this.delay)}transformChange(t){const e=t.component,{gameObject:n}=t,i=n.getComponent(c);if(!i)return;const{a11yId:o}=i;if(e.inScene){if(this.cache.has(o)){const t=this.cache.get(o);t&&this.div.appendChild(t)}}else{const t=this.div.querySelector(`#${o}`);t&&this.div.removeChild(t)}}setEvent(t,e,n,i){if(!e)return;const o=g.bind(this,e,n);this.eventCache.set(i,o),t.addEventListener("click",o)}addEvent(t){const e=t.getComponent(c);if(!e)return;const n=t.getComponent("Event");if(!n)return;const i=this.cache.get(e.a11yId);i&&this.setEvent(i,n,t,e.a11yId)}removeEvent(t){const{gameObject:e}=t,n=e.getComponent(c);if(!n)return;if(!t.component)return;const{a11yId:i}=n,o=this.eventCache.get(i),s=this.cache.get(i);s&&s.removeEventListener("click",o)}setA11yAttr(t,e){const{hint:n,props:i={},state:o={},role:s,a11yId:r}=e,a=s||"text";t.setAttribute("role",a),t.setAttribute("aria-label",n),t.id=r;const c=Object.keys(i);for(const e of c)t.setAttribute(e,i[e]);const h=Object.keys(o);for(const e of h)t.setAttribute(e,o[e]);for(const n of Object.keys(e))"string"==typeof e[n]&&-1===v.indexOf(n)&&1!==n.indexOf("_")&&t.setAttribute(n,e[n])}setPosition(t,e){const{width:n,height:i}=e.size,o={width:0===n?1:n*this.ratioX,height:0===i?1:i*this.ratioY,position:h,zIndex:this.zIndex,pointerEvents:l.AUTO,background:this.debug?p.DEBUG:p.NONE};a(t,o),((t,e,n,i)=>{const{worldTransform:o}=e,{a:s,b:r,c:a,d:c,tx:h,ty:d}=o,l=`matrix(${s}, ${r}, ${a}, ${c}, ${h*n}, ${d*i})`;t.style.transform=`${l}`,t.style.webkitTransform=`${l}`,t.style.transformOrigin="left top",t.style.webkitTransformOrigin="left top"})(t,e,this.ratioX,this.ratioY)}onDestroy(){this.div.parentElement.removeChild(this.div),this.cache=null,this.eventCache=null,this.div=null}};f.systemName="A11ySystem",f=i([e.decorators.componentObserver({A11y:["hint"],Transform:["inScene"],Event:[]})],f);var y=f;return t.A11y=c,t.A11ySystem=y,Object.defineProperty(t,"__esModule",{value:!0}),t}({},EVA,EVA.plugin.renderer);globalThis.EVA.plugin.a11y=globalThis.EVA.plugin.a11y||_EVA_IIFE_a11y;

package/dist/plugin-a11y.cjs.js

@@ -397,9 +397,8 @@ let A11ySystem = class A11ySystem extends eva_js.System {
             pointerEvents: PointerEvents.AUTO,
             background: this.debug ? MaskBackground.DEBUG : MaskBackground.NONE,
         };
-        const transformProps = Object.assign({}, transform);
         setStyle(element, style);
-        setTransform(element, transformProps, this.ratioX, this.ratioY);
+        setTransform(element, transform, this.ratioX, this.ratioY);
     }
     onDestroy() {
         this.div.parentElement.removeChild(this.div);

package/dist/plugin-a11y.cjs.prod.js

@@ -13,4 +13,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
 See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
-function n(t,e,i,n){var s,o=arguments.length,r=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(o<3?s(r):o>3?s(e,i,r):s(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r}function s(t,e,i,n){return new(i||(i=Promise))((function(s,o){function r(t){try{c(n.next(t))}catch(t){o(t)}}function a(t){try{c(n.throw(t))}catch(t){o(t)}}function c(t){t.done?s(t.value):new i((function(e){e(t.value)})).then(r,a)}c((n=n.apply(t,e||[])).next())}))}const o=(t,e)=>{const{width:i,height:n,position:s,left:o=0,top:r=0,zIndex:a,pointerEvents:c,background:h}=e;t.style.width=`${i}px`,t.style.height=`${n}px`,t.style.position=s,t.style.left=`${o}`,t.style.top=`${r}`,t.style.zIndex=`${a}`,t.style.pointerEvents=c,t.style.background=h,t.style.border="none",t.style.overflow="hidden"};class r extends t.Component{constructor(t){super(),Object.assign(this,t);const{hint:e="",event:i,delay:n=0,attr:s={},role:o="",props:r={},state:a={}}=t;this.hint=e,this.event=i,this.delay=n,this.attr=s,this.role=o,this.props=r,this.state=a,this.a11yId=`_${function(t){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),i=[],n=e.length;for(let s=0;s<t;s++)i[s]=e[0|Math.random()*n];return i.join("")}(6)}`}}r.componentName="A11y",n([i.type("boolean")],r.prototype,"interactive",void 0),n([i.type("string")],r.prototype,"hint",void 0),n([i.type("number"),i.step(1)],r.prototype,"delay",void 0),n([i.type("string")],r.prototype,"role",void 0),n([i.type("string")],r.prototype,"a11yId",void 0);const a="absolute";var c,h,d,p;exports.A11yActivate=void 0,(c=exports.A11yActivate||(exports.A11yActivate={}))[c.ENABLE=0]="ENABLE",c[c.DISABLE=1]="DISABLE",c[c.CHECK=2]="CHECK",function(t){t.NONE="none",t.AUTO="auto"}(h||(h={})),function(t){t.DEBUG="rgba(255,0,0,0.5)",t.NONE="transparent"}(d||(d={})),function(t){t.BUTTON="button",t.DIV="div"}(p||(p={}));const v=["hint","event","delay","attr","role","props","state","a11yId","name"],l=function(t,e,i){["touchstart","touchend","tap"].forEach((n=>{t.emit(n,{stopPropagation:()=>i.stopPropagation(),data:{position:this.eventPosition},gameObject:e})}))};let u=class extends t.System{constructor(t){super(t),this.cache=new Map,this.eventCache=new Map,this.zIndex=3}get ratioX(){if(this._ratioX)return this._ratioX;return this.setRatio()?this._ratioX:0}get ratioY(){if(this._ratioY)return this._ratioY;return this.setRatio()?this._ratioY:0}init(t={}){return s(this,void 0,void 0,(function*(){const{activate:e=exports.A11yActivate.CHECK,delay:i=100,checkA11yOpen:n=()=>Promise.resolve(!1),zIndex:s}=t;switch(this.delay=i,this.zIndex=s||this.zIndex,e){case exports.A11yActivate.CHECK:try{this.activate=yield n()}catch(t){this.activate=!1}break;case exports.A11yActivate.DISABLE:this.activate=!1;break;case exports.A11yActivate.ENABLE:this.activate=!0}if(this.debug=t.debug||!1,this.debug&&(this.activate=!0),!this.activate)return;const o=document.createElement("div");this.div=o,this.game.canvas.parentNode&&this.game.canvas.parentNode.insertBefore(this.div,this.game.canvas)}))}setRatio(){const{width:t,height:e}=this.getCanvasBoundingClientRect(),{renderWidth:i,renderHeight:n}=this.getRenderRect();return this._ratioX=t/i,this._ratioY=e/n,!(!t&&!e)&&(this.initDiv(),!0)}getRenderRect(){const{params:t={width:300,height:300}}=this.game.getSystem(e.RendererSystem),{height:i,width:n}=t;return{renderWidth:n,renderHeight:i}}getCanvasBoundingClientRect(){const{width:t,height:e,left:i,top:n}=this.game.canvas.getBoundingClientRect();return{width:t,height:e,left:i,top:n}}initDiv(){const{pageXOffset:t,pageYOffset:e}=window,{width:i,height:n,left:s,top:r}=this.getCanvasBoundingClientRect(),c={width:i,height:n,left:`${s+t}px`,top:`${r+e}px`,position:a,zIndex:this.zIndex,pointerEvents:h.NONE,background:d.NONE};o(this.div,c),this.div.addEventListener("click",(t=>{const e=t.currentTarget,{left:i,top:n}=e.getBoundingClientRect(),s=(t.pageX-i)/this.ratioX,o=(t.pageY-n)/this.ratioY;this.eventPosition={x:s,y:o}}),!0)}update(){return s(this,void 0,void 0,(function*(){const e=this.componentObserver.clear();if(this.activate)for(const i of e)switch(i.type){case t.OBSERVER_TYPE.ADD:"Event"===i.componentName&&this.addEvent(i.gameObject),"A11y"===i.componentName&&this.add(i);break;case t.OBSERVER_TYPE.CHANGE:"Transform"===i.componentName&&this.transformChange(i),"A11y"===i.componentName&&this.change(i);break;case t.OBSERVER_TYPE.REMOVE:"Event"===i.componentName&&this.removeEvent(i),"A11y"===i.componentName&&this.remove(i)}}))}change(t){const e=t.component;if("hint"===t.prop.prop[0]){const i=this.cache.get(e.a11yId);null==i||i.setAttribute("aria-label",e.hint),i&&this.setPosition(i,t.gameObject.transform)}}remove(t){const e=t.component;if(!e)return;const{a11yId:i}=e,n=this.div.querySelector(`#${i}`);n&&this.div.removeChild(n),this.cache.delete(i)}add(t){if(!this.activate)return;const e=t.component,{gameObject:i}=t,{delay:n,a11yId:s}=e;let{event:o}=e;if(!i)return;const{transform:r}=i;if(!r)return;const a=document.createElement("div");this.cache.set(s,a),o||(o=i.getComponent("Event")),setTimeout((()=>{this.setPosition(a,r),this.setA11yAttr(a,e),o&&this.addEvent(i),i.scene&&this.div.appendChild(a)}),n||this.delay)}transformChange(t){const e=t.component,{gameObject:i}=t,n=i.getComponent(r);if(!n)return;const{a11yId:s}=n;if(e.inScene){if(this.cache.has(s)){const t=this.cache.get(s);t&&this.div.appendChild(t)}}else{const t=this.div.querySelector(`#${s}`);t&&this.div.removeChild(t)}}setEvent(t,e,i,n){if(!e)return;const s=l.bind(this,e,i);this.eventCache.set(n,s),t.addEventListener("click",s)}addEvent(t){const e=t.getComponent(r);if(!e)return;const i=t.getComponent("Event");if(!i)return;const n=this.cache.get(e.a11yId);n&&this.setEvent(n,i,t,e.a11yId)}removeEvent(t){const{gameObject:e}=t,i=e.getComponent(r);if(!i)return;if(!t.component)return;const{a11yId:n}=i,s=this.eventCache.get(n),o=this.cache.get(n);o&&o.removeEventListener("click",s)}setA11yAttr(t,e){const{hint:i,props:n={},state:s={},role:o,a11yId:r}=e,a=o||"text";t.setAttribute("role",a),t.setAttribute("aria-label",i),t.id=r;const c=Object.keys(n);for(const e of c)t.setAttribute(e,n[e]);const h=Object.keys(s);for(const e of h)t.setAttribute(e,s[e]);for(const i of Object.keys(e))"string"==typeof e[i]&&-1===v.indexOf(i)&&1!==i.indexOf("_")&&t.setAttribute(i,e[i])}setPosition(t,e){const{width:i,height:n}=e.size,s={width:0===i?1:i*this.ratioX,height:0===n?1:n*this.ratioY,position:a,zIndex:this.zIndex,pointerEvents:h.AUTO,background:this.debug?d.DEBUG:d.NONE},r=Object.assign({},e);o(t,s),((t,e,i,n)=>{const{worldTransform:s}=e,{a:o,b:r,c:a,d:c,tx:h,ty:d}=s,p=`matrix(${o}, ${r}, ${a}, ${c}, ${h*i}, ${d*n})`;t.style.transform=`${p}`,t.style.webkitTransform=`${p}`,t.style.transformOrigin="left top",t.style.webkitTransformOrigin="left top"})(t,r,this.ratioX,this.ratioY)}onDestroy(){this.div.parentElement.removeChild(this.div),this.cache=null,this.eventCache=null,this.div=null}};u.systemName="A11ySystem",u=n([t.decorators.componentObserver({A11y:["hint"],Transform:["inScene"],Event:[]})],u);var y=u;exports.A11y=r,exports.A11ySystem=y;
+function n(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,i,r):o(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r}function o(t,e,i,n){return new(i||(i=Promise))((function(o,s){function r(t){try{c(n.next(t))}catch(t){s(t)}}function a(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){t.done?o(t.value):new i((function(e){e(t.value)})).then(r,a)}c((n=n.apply(t,e||[])).next())}))}const s=(t,e)=>{const{width:i,height:n,position:o,left:s=0,top:r=0,zIndex:a,pointerEvents:c,background:h}=e;t.style.width=`${i}px`,t.style.height=`${n}px`,t.style.position=o,t.style.left=`${s}`,t.style.top=`${r}`,t.style.zIndex=`${a}`,t.style.pointerEvents=c,t.style.background=h,t.style.border="none",t.style.overflow="hidden"};class r extends t.Component{constructor(t){super(),Object.assign(this,t);const{hint:e="",event:i,delay:n=0,attr:o={},role:s="",props:r={},state:a={}}=t;this.hint=e,this.event=i,this.delay=n,this.attr=o,this.role=s,this.props=r,this.state=a,this.a11yId=`_${function(t){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),i=[],n=e.length;for(let o=0;o<t;o++)i[o]=e[0|Math.random()*n];return i.join("")}(6)}`}}r.componentName="A11y",n([i.type("boolean")],r.prototype,"interactive",void 0),n([i.type("string")],r.prototype,"hint",void 0),n([i.type("number"),i.step(1)],r.prototype,"delay",void 0),n([i.type("string")],r.prototype,"role",void 0),n([i.type("string")],r.prototype,"a11yId",void 0);const a="absolute";var c,h,d,p;exports.A11yActivate=void 0,(c=exports.A11yActivate||(exports.A11yActivate={}))[c.ENABLE=0]="ENABLE",c[c.DISABLE=1]="DISABLE",c[c.CHECK=2]="CHECK",function(t){t.NONE="none",t.AUTO="auto"}(h||(h={})),function(t){t.DEBUG="rgba(255,0,0,0.5)",t.NONE="transparent"}(d||(d={})),function(t){t.BUTTON="button",t.DIV="div"}(p||(p={}));const v=["hint","event","delay","attr","role","props","state","a11yId","name"],l=function(t,e,i){["touchstart","touchend","tap"].forEach((n=>{t.emit(n,{stopPropagation:()=>i.stopPropagation(),data:{position:this.eventPosition},gameObject:e})}))};let u=class extends t.System{constructor(t){super(t),this.cache=new Map,this.eventCache=new Map,this.zIndex=3}get ratioX(){if(this._ratioX)return this._ratioX;return this.setRatio()?this._ratioX:0}get ratioY(){if(this._ratioY)return this._ratioY;return this.setRatio()?this._ratioY:0}init(t={}){return o(this,void 0,void 0,(function*(){const{activate:e=exports.A11yActivate.CHECK,delay:i=100,checkA11yOpen:n=()=>Promise.resolve(!1),zIndex:o}=t;switch(this.delay=i,this.zIndex=o||this.zIndex,e){case exports.A11yActivate.CHECK:try{this.activate=yield n()}catch(t){this.activate=!1}break;case exports.A11yActivate.DISABLE:this.activate=!1;break;case exports.A11yActivate.ENABLE:this.activate=!0}if(this.debug=t.debug||!1,this.debug&&(this.activate=!0),!this.activate)return;const s=document.createElement("div");this.div=s,this.game.canvas.parentNode&&this.game.canvas.parentNode.insertBefore(this.div,this.game.canvas)}))}setRatio(){const{width:t,height:e}=this.getCanvasBoundingClientRect(),{renderWidth:i,renderHeight:n}=this.getRenderRect();return this._ratioX=t/i,this._ratioY=e/n,!(!t&&!e)&&(this.initDiv(),!0)}getRenderRect(){const{params:t={width:300,height:300}}=this.game.getSystem(e.RendererSystem),{height:i,width:n}=t;return{renderWidth:n,renderHeight:i}}getCanvasBoundingClientRect(){const{width:t,height:e,left:i,top:n}=this.game.canvas.getBoundingClientRect();return{width:t,height:e,left:i,top:n}}initDiv(){const{pageXOffset:t,pageYOffset:e}=window,{width:i,height:n,left:o,top:r}=this.getCanvasBoundingClientRect(),c={width:i,height:n,left:`${o+t}px`,top:`${r+e}px`,position:a,zIndex:this.zIndex,pointerEvents:h.NONE,background:d.NONE};s(this.div,c),this.div.addEventListener("click",(t=>{const e=t.currentTarget,{left:i,top:n}=e.getBoundingClientRect(),o=(t.pageX-i)/this.ratioX,s=(t.pageY-n)/this.ratioY;this.eventPosition={x:o,y:s}}),!0)}update(){return o(this,void 0,void 0,(function*(){const e=this.componentObserver.clear();if(this.activate)for(const i of e)switch(i.type){case t.OBSERVER_TYPE.ADD:"Event"===i.componentName&&this.addEvent(i.gameObject),"A11y"===i.componentName&&this.add(i);break;case t.OBSERVER_TYPE.CHANGE:"Transform"===i.componentName&&this.transformChange(i),"A11y"===i.componentName&&this.change(i);break;case t.OBSERVER_TYPE.REMOVE:"Event"===i.componentName&&this.removeEvent(i),"A11y"===i.componentName&&this.remove(i)}}))}change(t){const e=t.component;if("hint"===t.prop.prop[0]){const i=this.cache.get(e.a11yId);null==i||i.setAttribute("aria-label",e.hint),i&&this.setPosition(i,t.gameObject.transform)}}remove(t){const e=t.component;if(!e)return;const{a11yId:i}=e,n=this.div.querySelector(`#${i}`);n&&this.div.removeChild(n),this.cache.delete(i)}add(t){if(!this.activate)return;const e=t.component,{gameObject:i}=t,{delay:n,a11yId:o}=e;let{event:s}=e;if(!i)return;const{transform:r}=i;if(!r)return;const a=document.createElement("div");this.cache.set(o,a),s||(s=i.getComponent("Event")),setTimeout((()=>{this.setPosition(a,r),this.setA11yAttr(a,e),s&&this.addEvent(i),i.scene&&this.div.appendChild(a)}),n||this.delay)}transformChange(t){const e=t.component,{gameObject:i}=t,n=i.getComponent(r);if(!n)return;const{a11yId:o}=n;if(e.inScene){if(this.cache.has(o)){const t=this.cache.get(o);t&&this.div.appendChild(t)}}else{const t=this.div.querySelector(`#${o}`);t&&this.div.removeChild(t)}}setEvent(t,e,i,n){if(!e)return;const o=l.bind(this,e,i);this.eventCache.set(n,o),t.addEventListener("click",o)}addEvent(t){const e=t.getComponent(r);if(!e)return;const i=t.getComponent("Event");if(!i)return;const n=this.cache.get(e.a11yId);n&&this.setEvent(n,i,t,e.a11yId)}removeEvent(t){const{gameObject:e}=t,i=e.getComponent(r);if(!i)return;if(!t.component)return;const{a11yId:n}=i,o=this.eventCache.get(n),s=this.cache.get(n);s&&s.removeEventListener("click",o)}setA11yAttr(t,e){const{hint:i,props:n={},state:o={},role:s,a11yId:r}=e,a=s||"text";t.setAttribute("role",a),t.setAttribute("aria-label",i),t.id=r;const c=Object.keys(n);for(const e of c)t.setAttribute(e,n[e]);const h=Object.keys(o);for(const e of h)t.setAttribute(e,o[e]);for(const i of Object.keys(e))"string"==typeof e[i]&&-1===v.indexOf(i)&&1!==i.indexOf("_")&&t.setAttribute(i,e[i])}setPosition(t,e){const{width:i,height:n}=e.size,o={width:0===i?1:i*this.ratioX,height:0===n?1:n*this.ratioY,position:a,zIndex:this.zIndex,pointerEvents:h.AUTO,background:this.debug?d.DEBUG:d.NONE};s(t,o),((t,e,i,n)=>{const{worldTransform:o}=e,{a:s,b:r,c:a,d:c,tx:h,ty:d}=o,p=`matrix(${s}, ${r}, ${a}, ${c}, ${h*i}, ${d*n})`;t.style.transform=`${p}`,t.style.webkitTransform=`${p}`,t.style.transformOrigin="left top",t.style.webkitTransformOrigin="left top"})(t,e,this.ratioX,this.ratioY)}onDestroy(){this.div.parentElement.removeChild(this.div),this.cache=null,this.eventCache=null,this.div=null}};u.systemName="A11ySystem",u=n([t.decorators.componentObserver({A11y:["hint"],Transform:["inScene"],Event:[]})],u);var y=u;exports.A11y=r,exports.A11ySystem=y;

package/dist/plugin-a11y.esm.js

@@ -393,9 +393,8 @@ let A11ySystem = class A11ySystem extends System {
             pointerEvents: PointerEvents.AUTO,
             background: this.debug ? MaskBackground.DEBUG : MaskBackground.NONE,
         };
-        const transformProps = Object.assign({}, transform);
         setStyle(element, style);
-        setTransform(element, transformProps, this.ratioX, this.ratioY);
+        setTransform(element, transform, this.ratioX, this.ratioY);
     }
     onDestroy() {
         this.div.parentElement.removeChild(this.div);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-a11y",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "description": "@eva/plugin-a11y",
   "main": "index.js",
   "module": "dist/plugin-a11y.esm.js",
@@ -18,9 +18,9 @@
   "license": "MIT",
   "homepage": "https://eva.js.org",
   "dependencies": {
-    "@eva/eva.js": "2.0.0-beta.9",
+    "@eva/eva.js": "2.0.0",
     "@eva/inspector-decorator": "^0.0.5",
-    "@eva/plugin-renderer": "2.0.0-beta.9",
+    "@eva/plugin-renderer": "2.0.0",
     "eventemitter3": "^3.1.2"
   }
 }