@eva/plugin-a11y 2.0.0-beta.1 → 2.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EVA.plugin.a11y.js +314 -516
- package/dist/EVA.plugin.a11y.min.js +1 -1
- package/dist/plugin-a11y.cjs.js +239 -385
- package/dist/plugin-a11y.cjs.prod.js +16 -1
- package/dist/plugin-a11y.esm.js +240 -386
- package/package.json +3 -3
package/dist/EVA.plugin.a11y.js
CHANGED
|
@@ -3,33 +3,6 @@ window.EVA = window.EVA || {};
|
|
|
3
3
|
window.EVA.plugin = window.EVA.plugin || {};
|
|
4
4
|
var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
|
|
5
5
|
'use strict';
|
|
6
|
-
var extendStatics = function (d, b) {
|
|
7
|
-
extendStatics = Object.setPrototypeOf || {
|
|
8
|
-
__proto__: []
|
|
9
|
-
} instanceof Array && function (d, b) {
|
|
10
|
-
d.__proto__ = b;
|
|
11
|
-
} || function (d, b) {
|
|
12
|
-
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
13
|
-
};
|
|
14
|
-
return extendStatics(d, b);
|
|
15
|
-
};
|
|
16
|
-
function __extends(d, b) {
|
|
17
|
-
extendStatics(d, b);
|
|
18
|
-
function __() {
|
|
19
|
-
this.constructor = d;
|
|
20
|
-
}
|
|
21
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
22
|
-
}
|
|
23
|
-
var __assign = function () {
|
|
24
|
-
__assign = Object.assign || function __assign(t) {
|
|
25
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
26
|
-
s = arguments[i];
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
28
|
-
}
|
|
29
|
-
return t;
|
|
30
|
-
};
|
|
31
|
-
return __assign.apply(this, arguments);
|
|
32
|
-
};
|
|
33
6
|
function __decorate(decorators, target, key, desc) {
|
|
34
7
|
var c = arguments.length,
|
|
35
8
|
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
@@ -64,110 +37,6 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
|
|
|
64
37
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
65
38
|
});
|
|
66
39
|
}
|
|
67
|
-
function __generator(thisArg, body) {
|
|
68
|
-
var _ = {
|
|
69
|
-
label: 0,
|
|
70
|
-
sent: function () {
|
|
71
|
-
if (t[0] & 1) throw t[1];
|
|
72
|
-
return t[1];
|
|
73
|
-
},
|
|
74
|
-
trys: [],
|
|
75
|
-
ops: []
|
|
76
|
-
},
|
|
77
|
-
f,
|
|
78
|
-
y,
|
|
79
|
-
t,
|
|
80
|
-
g;
|
|
81
|
-
return g = {
|
|
82
|
-
next: verb(0),
|
|
83
|
-
"throw": verb(1),
|
|
84
|
-
"return": verb(2)
|
|
85
|
-
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
|
|
86
|
-
return this;
|
|
87
|
-
}), g;
|
|
88
|
-
function verb(n) {
|
|
89
|
-
return function (v) {
|
|
90
|
-
return step([n, v]);
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
function step(op) {
|
|
94
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
95
|
-
while (_) try {
|
|
96
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
97
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
98
|
-
switch (op[0]) {
|
|
99
|
-
case 0:
|
|
100
|
-
case 1:
|
|
101
|
-
t = op;
|
|
102
|
-
break;
|
|
103
|
-
case 4:
|
|
104
|
-
_.label++;
|
|
105
|
-
return {
|
|
106
|
-
value: op[1],
|
|
107
|
-
done: false
|
|
108
|
-
};
|
|
109
|
-
case 5:
|
|
110
|
-
_.label++;
|
|
111
|
-
y = op[1];
|
|
112
|
-
op = [0];
|
|
113
|
-
continue;
|
|
114
|
-
case 7:
|
|
115
|
-
op = _.ops.pop();
|
|
116
|
-
_.trys.pop();
|
|
117
|
-
continue;
|
|
118
|
-
default:
|
|
119
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
|
|
120
|
-
_ = 0;
|
|
121
|
-
continue;
|
|
122
|
-
}
|
|
123
|
-
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
|
|
124
|
-
_.label = op[1];
|
|
125
|
-
break;
|
|
126
|
-
}
|
|
127
|
-
if (op[0] === 6 && _.label < t[1]) {
|
|
128
|
-
_.label = t[1];
|
|
129
|
-
t = op;
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
if (t && _.label < t[2]) {
|
|
133
|
-
_.label = t[2];
|
|
134
|
-
_.ops.push(op);
|
|
135
|
-
break;
|
|
136
|
-
}
|
|
137
|
-
if (t[2]) _.ops.pop();
|
|
138
|
-
_.trys.pop();
|
|
139
|
-
continue;
|
|
140
|
-
}
|
|
141
|
-
op = body.call(thisArg, _);
|
|
142
|
-
} catch (e) {
|
|
143
|
-
op = [6, e];
|
|
144
|
-
y = 0;
|
|
145
|
-
} finally {
|
|
146
|
-
f = t = 0;
|
|
147
|
-
}
|
|
148
|
-
if (op[0] & 5) throw op[1];
|
|
149
|
-
return {
|
|
150
|
-
value: op[0] ? op[1] : void 0,
|
|
151
|
-
done: true
|
|
152
|
-
};
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
function __values(o) {
|
|
156
|
-
var s = typeof Symbol === "function" && Symbol.iterator,
|
|
157
|
-
m = s && o[s],
|
|
158
|
-
i = 0;
|
|
159
|
-
if (m) return m.call(o);
|
|
160
|
-
if (o && typeof o.length === "number") return {
|
|
161
|
-
next: function () {
|
|
162
|
-
if (o && i >= o.length) o = void 0;
|
|
163
|
-
return {
|
|
164
|
-
value: o && o[i++],
|
|
165
|
-
done: !o
|
|
166
|
-
};
|
|
167
|
-
}
|
|
168
|
-
};
|
|
169
|
-
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
170
|
-
}
|
|
171
40
|
function getIDEPropsPropertyObj(target, propertyKey) {
|
|
172
41
|
if (!target.constructor.IDEProps) {
|
|
173
42
|
target.constructor.IDEProps = {};
|
|
@@ -192,87 +61,83 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
|
|
|
192
61
|
};
|
|
193
62
|
}
|
|
194
63
|
function uuid(len) {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
for (
|
|
64
|
+
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
|
65
|
+
let uuid = [];
|
|
66
|
+
let radix = chars.length;
|
|
67
|
+
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
|
|
199
68
|
return uuid.join('');
|
|
200
69
|
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
left =
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
element.style.width = width
|
|
213
|
-
element.style.height = height
|
|
70
|
+
const setStyle = (element, style) => {
|
|
71
|
+
const {
|
|
72
|
+
width,
|
|
73
|
+
height,
|
|
74
|
+
position,
|
|
75
|
+
left = 0,
|
|
76
|
+
top = 0,
|
|
77
|
+
zIndex,
|
|
78
|
+
pointerEvents,
|
|
79
|
+
background
|
|
80
|
+
} = style;
|
|
81
|
+
element.style.width = `${width}px`;
|
|
82
|
+
element.style.height = `${height}px`;
|
|
214
83
|
element.style.position = position;
|
|
215
|
-
element.style.left =
|
|
216
|
-
element.style.top =
|
|
217
|
-
element.style.zIndex =
|
|
84
|
+
element.style.left = `${left}`;
|
|
85
|
+
element.style.top = `${top}`;
|
|
86
|
+
element.style.zIndex = `${zIndex}`;
|
|
218
87
|
element.style.pointerEvents = pointerEvents;
|
|
219
88
|
element.style.background = background;
|
|
220
89
|
element.style.border = 'none';
|
|
221
90
|
element.style.overflow = 'hidden';
|
|
222
91
|
};
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
92
|
+
const setTransform = (element, transform, ratioX, ratioY) => {
|
|
93
|
+
const {
|
|
94
|
+
worldTransform
|
|
95
|
+
} = transform;
|
|
96
|
+
const {
|
|
97
|
+
a,
|
|
98
|
+
b,
|
|
99
|
+
c,
|
|
100
|
+
d,
|
|
101
|
+
tx,
|
|
102
|
+
ty
|
|
103
|
+
} = worldTransform;
|
|
104
|
+
const matrix = `matrix(${a}, ${b}, ${c}, ${d}, ${tx * ratioX}, ${ty * ratioY})`;
|
|
105
|
+
element.style.transform = `${matrix}`;
|
|
106
|
+
element.style.webkitTransform = `${matrix}`;
|
|
234
107
|
element.style.transformOrigin = 'left top';
|
|
235
108
|
element.style.webkitTransformOrigin = 'left top';
|
|
236
109
|
};
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
_this.attr = attr;
|
|
259
|
-
_this.role = role;
|
|
260
|
-
_this.props = props;
|
|
261
|
-
_this.state = state;
|
|
262
|
-
_this.a11yId = "_" + uuid(6);
|
|
263
|
-
return _this;
|
|
110
|
+
class A11y extends eva_js.Component {
|
|
111
|
+
constructor(param) {
|
|
112
|
+
super();
|
|
113
|
+
_extends(this, param);
|
|
114
|
+
const {
|
|
115
|
+
hint = '',
|
|
116
|
+
event,
|
|
117
|
+
delay = 0,
|
|
118
|
+
attr = {},
|
|
119
|
+
role = '',
|
|
120
|
+
props = {},
|
|
121
|
+
state = {}
|
|
122
|
+
} = param;
|
|
123
|
+
this.hint = hint;
|
|
124
|
+
this.event = event;
|
|
125
|
+
this.delay = delay;
|
|
126
|
+
this.attr = attr;
|
|
127
|
+
this.role = role;
|
|
128
|
+
this.props = props;
|
|
129
|
+
this.state = state;
|
|
130
|
+
this.a11yId = `_${uuid(6)}`;
|
|
264
131
|
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
var POSITION = 'absolute';
|
|
275
|
-
var ZINDEX = 3;
|
|
132
|
+
}
|
|
133
|
+
A11y.componentName = 'A11y';
|
|
134
|
+
__decorate([type('boolean')], A11y.prototype, "interactive", void 0);
|
|
135
|
+
__decorate([type('string')], A11y.prototype, "hint", void 0);
|
|
136
|
+
__decorate([type('number'), step(1)], A11y.prototype, "delay", void 0);
|
|
137
|
+
__decorate([type('string')], A11y.prototype, "role", void 0);
|
|
138
|
+
__decorate([type('string')], A11y.prototype, "a11yId", void 0);
|
|
139
|
+
const POSITION = 'absolute';
|
|
140
|
+
const ZINDEX = 3;
|
|
276
141
|
exports.A11yActivate = void 0;
|
|
277
142
|
(function (A11yActivate) {
|
|
278
143
|
A11yActivate[A11yActivate["ENABLE"] = 0] = "ENABLE";
|
|
@@ -294,128 +159,95 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
|
|
|
294
159
|
ElementType["BUTTON"] = "button";
|
|
295
160
|
ElementType["DIV"] = "div";
|
|
296
161
|
})(ElementType || (ElementType = {}));
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
['touchstart', 'touchend', 'tap'].forEach(function (name) {
|
|
162
|
+
const notAttr = ['hint', 'event', 'delay', 'attr', 'role', 'props', 'state', 'a11yId', 'name'];
|
|
163
|
+
const getEventFunc = function (event, gameObject, e) {
|
|
164
|
+
['touchstart', 'touchend', 'tap'].forEach(name => {
|
|
301
165
|
event.emit(name, {
|
|
302
|
-
stopPropagation:
|
|
303
|
-
return e.stopPropagation();
|
|
304
|
-
},
|
|
166
|
+
stopPropagation: () => e.stopPropagation(),
|
|
305
167
|
data: {
|
|
306
|
-
position:
|
|
168
|
+
position: this.eventPosition
|
|
307
169
|
},
|
|
308
|
-
gameObject
|
|
170
|
+
gameObject
|
|
309
171
|
});
|
|
310
172
|
});
|
|
311
173
|
};
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
_this.zIndex = ZINDEX;
|
|
319
|
-
return _this;
|
|
174
|
+
let A11ySystem = class A11ySystem extends eva_js.System {
|
|
175
|
+
constructor(opt) {
|
|
176
|
+
super(opt);
|
|
177
|
+
this.cache = new Map();
|
|
178
|
+
this.eventCache = new Map();
|
|
179
|
+
this.zIndex = ZINDEX;
|
|
320
180
|
}
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
181
|
+
get ratioX() {
|
|
182
|
+
if (this._ratioX) {
|
|
183
|
+
return this._ratioX;
|
|
184
|
+
} else {
|
|
185
|
+
const success = this.setRatio();
|
|
186
|
+
if (success) {
|
|
324
187
|
return this._ratioX;
|
|
325
188
|
} else {
|
|
326
|
-
|
|
327
|
-
if (success) {
|
|
328
|
-
return this._ratioX;
|
|
329
|
-
} else {
|
|
330
|
-
return 0;
|
|
331
|
-
}
|
|
189
|
+
return 0;
|
|
332
190
|
}
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
get ratioY() {
|
|
194
|
+
if (this._ratioY) {
|
|
195
|
+
return this._ratioY;
|
|
196
|
+
} else {
|
|
197
|
+
const success = this.setRatio();
|
|
198
|
+
if (success) {
|
|
340
199
|
return this._ratioY;
|
|
341
200
|
} else {
|
|
342
|
-
|
|
343
|
-
if (success) {
|
|
344
|
-
return this._ratioY;
|
|
345
|
-
} else {
|
|
346
|
-
return 0;
|
|
347
|
-
}
|
|
201
|
+
return 0;
|
|
348
202
|
}
|
|
349
|
-
},
|
|
350
|
-
enumerable: false,
|
|
351
|
-
configurable: true
|
|
352
|
-
});
|
|
353
|
-
A11ySystem.prototype.init = function (opt) {
|
|
354
|
-
if (opt === void 0) {
|
|
355
|
-
opt = {};
|
|
356
203
|
}
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
case exports.A11yActivate.ENABLE:
|
|
374
|
-
return [3, 6];
|
|
375
|
-
}
|
|
376
|
-
return [3, 7];
|
|
377
|
-
case 1:
|
|
378
|
-
_f.trys.push([1, 3,, 4]);
|
|
379
|
-
_e = this;
|
|
380
|
-
return [4, checkA11yOpen()];
|
|
381
|
-
case 2:
|
|
382
|
-
_e.activate = _f.sent();
|
|
383
|
-
return [3, 4];
|
|
384
|
-
case 3:
|
|
385
|
-
_f.sent();
|
|
386
|
-
this.activate = false;
|
|
387
|
-
return [3, 4];
|
|
388
|
-
case 4:
|
|
389
|
-
return [3, 7];
|
|
390
|
-
case 5:
|
|
204
|
+
}
|
|
205
|
+
init(opt = {}) {
|
|
206
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
207
|
+
const {
|
|
208
|
+
activate = exports.A11yActivate.CHECK,
|
|
209
|
+
delay = 100,
|
|
210
|
+
checkA11yOpen = () => Promise.resolve(false),
|
|
211
|
+
zIndex
|
|
212
|
+
} = opt;
|
|
213
|
+
this.delay = delay;
|
|
214
|
+
this.zIndex = zIndex || this.zIndex;
|
|
215
|
+
switch (activate) {
|
|
216
|
+
case exports.A11yActivate.CHECK:
|
|
217
|
+
try {
|
|
218
|
+
this.activate = yield checkA11yOpen();
|
|
219
|
+
} catch (error) {
|
|
391
220
|
this.activate = false;
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
221
|
+
}
|
|
222
|
+
break;
|
|
223
|
+
case exports.A11yActivate.DISABLE:
|
|
224
|
+
this.activate = false;
|
|
225
|
+
break;
|
|
226
|
+
case exports.A11yActivate.ENABLE:
|
|
227
|
+
this.activate = true;
|
|
228
|
+
break;
|
|
229
|
+
}
|
|
230
|
+
this.debug = opt.debug || false;
|
|
231
|
+
if (this.debug) {
|
|
232
|
+
this.activate = true;
|
|
233
|
+
}
|
|
234
|
+
if (!this.activate) return;
|
|
235
|
+
const div = document.createElement('div');
|
|
236
|
+
this.div = div;
|
|
237
|
+
if (this.game.canvas.parentNode) {
|
|
238
|
+
this.game.canvas.parentNode.insertBefore(this.div, this.game.canvas);
|
|
239
|
+
}
|
|
410
240
|
});
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
width
|
|
415
|
-
height
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
241
|
+
}
|
|
242
|
+
setRatio() {
|
|
243
|
+
const {
|
|
244
|
+
width,
|
|
245
|
+
height
|
|
246
|
+
} = this.getCanvasBoundingClientRect();
|
|
247
|
+
const {
|
|
248
|
+
renderWidth,
|
|
249
|
+
renderHeight
|
|
250
|
+
} = this.getRenderRect();
|
|
419
251
|
this._ratioX = width / renderWidth;
|
|
420
252
|
this._ratioY = height / renderHeight;
|
|
421
253
|
if (width || height) {
|
|
@@ -424,264 +256,231 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
|
|
|
424
256
|
} else {
|
|
425
257
|
return false;
|
|
426
258
|
}
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
params =
|
|
259
|
+
}
|
|
260
|
+
getRenderRect() {
|
|
261
|
+
const {
|
|
262
|
+
params = {
|
|
431
263
|
width: 300,
|
|
432
264
|
height: 300
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
|
|
265
|
+
}
|
|
266
|
+
} = this.game.getSystem(pluginRenderer.RendererSystem);
|
|
267
|
+
const {
|
|
268
|
+
height: renderHeight,
|
|
269
|
+
width: renderWidth
|
|
270
|
+
} = params;
|
|
436
271
|
return {
|
|
437
|
-
renderWidth
|
|
438
|
-
renderHeight
|
|
272
|
+
renderWidth,
|
|
273
|
+
renderHeight
|
|
439
274
|
};
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
width
|
|
444
|
-
height
|
|
445
|
-
left
|
|
446
|
-
top
|
|
275
|
+
}
|
|
276
|
+
getCanvasBoundingClientRect() {
|
|
277
|
+
const {
|
|
278
|
+
width,
|
|
279
|
+
height,
|
|
280
|
+
left,
|
|
281
|
+
top
|
|
282
|
+
} = this.game.canvas.getBoundingClientRect();
|
|
447
283
|
return {
|
|
448
|
-
width
|
|
449
|
-
height
|
|
450
|
-
left
|
|
451
|
-
top
|
|
284
|
+
width,
|
|
285
|
+
height,
|
|
286
|
+
left,
|
|
287
|
+
top
|
|
452
288
|
};
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
pageYOffset
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
289
|
+
}
|
|
290
|
+
initDiv() {
|
|
291
|
+
const {
|
|
292
|
+
pageXOffset,
|
|
293
|
+
pageYOffset
|
|
294
|
+
} = window;
|
|
295
|
+
const {
|
|
296
|
+
width,
|
|
297
|
+
height,
|
|
298
|
+
left,
|
|
299
|
+
top
|
|
300
|
+
} = this.getCanvasBoundingClientRect();
|
|
301
|
+
const style = {
|
|
302
|
+
width,
|
|
303
|
+
height,
|
|
304
|
+
left: `${left + pageXOffset}px`,
|
|
305
|
+
top: `${top + pageYOffset}px`,
|
|
468
306
|
position: POSITION,
|
|
469
307
|
zIndex: this.zIndex,
|
|
470
308
|
pointerEvents: PointerEvents.NONE,
|
|
471
309
|
background: MaskBackground.NONE
|
|
472
310
|
};
|
|
473
311
|
setStyle(this.div, style);
|
|
474
|
-
this.div.addEventListener('click',
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
left
|
|
478
|
-
top
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
312
|
+
this.div.addEventListener('click', e => {
|
|
313
|
+
const currentTarget = e.currentTarget;
|
|
314
|
+
const {
|
|
315
|
+
left,
|
|
316
|
+
top
|
|
317
|
+
} = currentTarget.getBoundingClientRect();
|
|
318
|
+
const x = (e.pageX - left) / this.ratioX;
|
|
319
|
+
const y = (e.pageY - top) / this.ratioY;
|
|
320
|
+
this.eventPosition = {
|
|
321
|
+
x,
|
|
322
|
+
y
|
|
484
323
|
};
|
|
485
324
|
}, true);
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
changed.componentName === 'A11y' && this.change(changed);
|
|
507
|
-
break;
|
|
508
|
-
case eva_js.OBSERVER_TYPE.REMOVE:
|
|
509
|
-
changed.componentName === 'Event' && this.removeEvent(changed);
|
|
510
|
-
changed.componentName === 'A11y' && this.remove(changed);
|
|
511
|
-
}
|
|
512
|
-
}
|
|
513
|
-
} catch (e_1_1) {
|
|
514
|
-
e_1 = {
|
|
515
|
-
error: e_1_1
|
|
516
|
-
};
|
|
517
|
-
} finally {
|
|
518
|
-
try {
|
|
519
|
-
if (changes_1_1 && !changes_1_1.done && (_a = changes_1.return)) _a.call(changes_1);
|
|
520
|
-
} finally {
|
|
521
|
-
if (e_1) throw e_1.error;
|
|
522
|
-
}
|
|
325
|
+
}
|
|
326
|
+
update() {
|
|
327
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
328
|
+
const changes = this.componentObserver.clear();
|
|
329
|
+
if (!this.activate) {
|
|
330
|
+
return;
|
|
331
|
+
}
|
|
332
|
+
for (const changed of changes) {
|
|
333
|
+
switch (changed.type) {
|
|
334
|
+
case eva_js.OBSERVER_TYPE.ADD:
|
|
335
|
+
changed.componentName === 'Event' && this.addEvent(changed.gameObject);
|
|
336
|
+
changed.componentName === 'A11y' && this.add(changed);
|
|
337
|
+
break;
|
|
338
|
+
case eva_js.OBSERVER_TYPE.CHANGE:
|
|
339
|
+
changed.componentName === 'Transform' && this.transformChange(changed);
|
|
340
|
+
changed.componentName === 'A11y' && this.change(changed);
|
|
341
|
+
break;
|
|
342
|
+
case eva_js.OBSERVER_TYPE.REMOVE:
|
|
343
|
+
changed.componentName === 'Event' && this.removeEvent(changed);
|
|
344
|
+
changed.componentName === 'A11y' && this.remove(changed);
|
|
523
345
|
}
|
|
524
|
-
|
|
525
|
-
});
|
|
346
|
+
}
|
|
526
347
|
});
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
|
|
348
|
+
}
|
|
349
|
+
change(changed) {
|
|
350
|
+
const component = changed.component;
|
|
530
351
|
if (changed.prop.prop[0] === 'hint') {
|
|
531
|
-
|
|
352
|
+
const dom = this.cache.get(component.a11yId);
|
|
532
353
|
dom === null || dom === void 0 ? void 0 : dom.setAttribute('aria-label', component.hint);
|
|
533
354
|
dom && this.setPosition(dom, changed.gameObject.transform);
|
|
534
355
|
}
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
|
|
356
|
+
}
|
|
357
|
+
remove(changed) {
|
|
358
|
+
const component = changed.component;
|
|
538
359
|
if (!component) return;
|
|
539
|
-
|
|
540
|
-
|
|
360
|
+
const {
|
|
361
|
+
a11yId
|
|
362
|
+
} = component;
|
|
363
|
+
const element = this.div.querySelector(`#${a11yId}`);
|
|
541
364
|
element && this.div.removeChild(element);
|
|
542
365
|
this.cache.delete(a11yId);
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
var _this = this;
|
|
366
|
+
}
|
|
367
|
+
add(changed) {
|
|
546
368
|
if (!this.activate) return;
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
369
|
+
const component = changed.component;
|
|
370
|
+
const {
|
|
371
|
+
gameObject
|
|
372
|
+
} = changed;
|
|
373
|
+
const {
|
|
374
|
+
delay,
|
|
375
|
+
a11yId: id
|
|
376
|
+
} = component;
|
|
377
|
+
let {
|
|
378
|
+
event
|
|
379
|
+
} = component;
|
|
552
380
|
if (!gameObject) return;
|
|
553
|
-
|
|
381
|
+
const {
|
|
382
|
+
transform
|
|
383
|
+
} = gameObject;
|
|
554
384
|
if (!transform) return;
|
|
555
|
-
|
|
385
|
+
const element = document.createElement('div');
|
|
556
386
|
this.cache.set(id, element);
|
|
557
387
|
if (!event) {
|
|
558
388
|
event = gameObject.getComponent('Event');
|
|
559
389
|
}
|
|
560
|
-
setTimeout(
|
|
561
|
-
|
|
562
|
-
|
|
390
|
+
setTimeout(() => {
|
|
391
|
+
this.setPosition(element, transform);
|
|
392
|
+
this.setA11yAttr(element, component);
|
|
563
393
|
if (event) {
|
|
564
|
-
|
|
394
|
+
this.addEvent(gameObject);
|
|
565
395
|
}
|
|
566
396
|
if (gameObject.scene) {
|
|
567
|
-
|
|
397
|
+
this.div.appendChild(element);
|
|
568
398
|
}
|
|
569
399
|
}, delay || this.delay);
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
400
|
+
}
|
|
401
|
+
transformChange(changed) {
|
|
402
|
+
const component = changed.component;
|
|
403
|
+
const {
|
|
404
|
+
gameObject
|
|
405
|
+
} = changed;
|
|
406
|
+
const a11yComponent = gameObject.getComponent(A11y);
|
|
575
407
|
if (!a11yComponent) return;
|
|
576
|
-
|
|
408
|
+
const {
|
|
409
|
+
a11yId
|
|
410
|
+
} = a11yComponent;
|
|
577
411
|
if (!component.inScene) {
|
|
578
|
-
|
|
412
|
+
const dom = this.div.querySelector(`#${a11yId}`);
|
|
579
413
|
dom && this.div.removeChild(dom);
|
|
580
414
|
} else {
|
|
581
415
|
if (this.cache.has(a11yId)) {
|
|
582
|
-
|
|
416
|
+
const addDom = this.cache.get(a11yId);
|
|
583
417
|
addDom && this.div.appendChild(addDom);
|
|
584
418
|
}
|
|
585
419
|
}
|
|
586
|
-
}
|
|
587
|
-
|
|
420
|
+
}
|
|
421
|
+
setEvent(element, event, gameObject, id) {
|
|
588
422
|
if (!event) {
|
|
589
423
|
return;
|
|
590
424
|
}
|
|
591
|
-
|
|
425
|
+
const func = getEventFunc.bind(this, event, gameObject);
|
|
592
426
|
this.eventCache.set(id, func);
|
|
593
427
|
element.addEventListener('click', func);
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
|
|
428
|
+
}
|
|
429
|
+
addEvent(gameObject) {
|
|
430
|
+
const a11y = gameObject.getComponent(A11y);
|
|
597
431
|
if (!a11y) return;
|
|
598
|
-
|
|
432
|
+
const event = gameObject.getComponent('Event');
|
|
599
433
|
if (!event) return;
|
|
600
|
-
|
|
434
|
+
const element = this.cache.get(a11y.a11yId);
|
|
601
435
|
element && this.setEvent(element, event, gameObject, a11y.a11yId);
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
436
|
+
}
|
|
437
|
+
removeEvent(changed) {
|
|
438
|
+
const {
|
|
439
|
+
gameObject
|
|
440
|
+
} = changed;
|
|
441
|
+
const a11y = gameObject.getComponent(A11y);
|
|
606
442
|
if (!a11y) return;
|
|
607
|
-
|
|
443
|
+
const event = changed.component;
|
|
608
444
|
if (!event) return;
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
445
|
+
const {
|
|
446
|
+
a11yId
|
|
447
|
+
} = a11y;
|
|
448
|
+
const func = this.eventCache.get(a11yId);
|
|
449
|
+
const element = this.cache.get(a11yId);
|
|
612
450
|
element && element.removeEventListener('click', func);
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
var realRole = role || 'text';
|
|
451
|
+
}
|
|
452
|
+
setA11yAttr(element, component) {
|
|
453
|
+
const {
|
|
454
|
+
hint,
|
|
455
|
+
props = {},
|
|
456
|
+
state = {},
|
|
457
|
+
role,
|
|
458
|
+
a11yId: id
|
|
459
|
+
} = component;
|
|
460
|
+
const realRole = role || 'text';
|
|
624
461
|
element.setAttribute('role', realRole);
|
|
625
462
|
element.setAttribute('aria-label', hint);
|
|
626
463
|
element.id = id;
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
var key = ariaProps_1_1.value;
|
|
631
|
-
element.setAttribute(key, props[key]);
|
|
632
|
-
}
|
|
633
|
-
} catch (e_2_1) {
|
|
634
|
-
e_2 = {
|
|
635
|
-
error: e_2_1
|
|
636
|
-
};
|
|
637
|
-
} finally {
|
|
638
|
-
try {
|
|
639
|
-
if (ariaProps_1_1 && !ariaProps_1_1.done && (_a = ariaProps_1.return)) _a.call(ariaProps_1);
|
|
640
|
-
} finally {
|
|
641
|
-
if (e_2) throw e_2.error;
|
|
642
|
-
}
|
|
464
|
+
const ariaProps = Object.keys(props);
|
|
465
|
+
for (const key of ariaProps) {
|
|
466
|
+
element.setAttribute(key, props[key]);
|
|
643
467
|
}
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
var key = ariaState_1_1.value;
|
|
648
|
-
element.setAttribute(key, state[key]);
|
|
649
|
-
}
|
|
650
|
-
} catch (e_3_1) {
|
|
651
|
-
e_3 = {
|
|
652
|
-
error: e_3_1
|
|
653
|
-
};
|
|
654
|
-
} finally {
|
|
655
|
-
try {
|
|
656
|
-
if (ariaState_1_1 && !ariaState_1_1.done && (_b = ariaState_1.return)) _b.call(ariaState_1);
|
|
657
|
-
} finally {
|
|
658
|
-
if (e_3) throw e_3.error;
|
|
659
|
-
}
|
|
468
|
+
const ariaState = Object.keys(state);
|
|
469
|
+
for (const key of ariaState) {
|
|
470
|
+
element.setAttribute(key, state[key]);
|
|
660
471
|
}
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
if (typeof component[key] === 'string' && notAttr.indexOf(key) === -1 && key.indexOf('_') !== 1) {
|
|
665
|
-
element.setAttribute(key, component[key]);
|
|
666
|
-
}
|
|
667
|
-
}
|
|
668
|
-
} catch (e_4_1) {
|
|
669
|
-
e_4 = {
|
|
670
|
-
error: e_4_1
|
|
671
|
-
};
|
|
672
|
-
} finally {
|
|
673
|
-
try {
|
|
674
|
-
if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
|
|
675
|
-
} finally {
|
|
676
|
-
if (e_4) throw e_4.error;
|
|
472
|
+
for (const key of Object.keys(component)) {
|
|
473
|
+
if (typeof component[key] === 'string' && notAttr.indexOf(key) === -1 && key.indexOf('_') !== 1) {
|
|
474
|
+
element.setAttribute(key, component[key]);
|
|
677
475
|
}
|
|
678
476
|
}
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
width
|
|
683
|
-
height
|
|
684
|
-
|
|
477
|
+
}
|
|
478
|
+
setPosition(element, transform) {
|
|
479
|
+
const {
|
|
480
|
+
width,
|
|
481
|
+
height
|
|
482
|
+
} = transform.size;
|
|
483
|
+
const style = {
|
|
685
484
|
width: width === 0 ? 1 : width * this.ratioX,
|
|
686
485
|
height: height === 0 ? 1 : height * this.ratioY,
|
|
687
486
|
position: POSITION,
|
|
@@ -689,26 +488,25 @@ var _EVA_IIFE_a11y = function (exports, eva_js, pluginRenderer) {
|
|
|
689
488
|
pointerEvents: PointerEvents.AUTO,
|
|
690
489
|
background: this.debug ? MaskBackground.DEBUG : MaskBackground.NONE
|
|
691
490
|
};
|
|
692
|
-
|
|
491
|
+
const transformProps = _extends({}, transform);
|
|
693
492
|
setStyle(element, style);
|
|
694
493
|
setTransform(element, transformProps, this.ratioX, this.ratioY);
|
|
695
|
-
}
|
|
696
|
-
|
|
494
|
+
}
|
|
495
|
+
onDestroy() {
|
|
697
496
|
this.div.parentElement.removeChild(this.div);
|
|
698
497
|
this.cache = null;
|
|
699
498
|
this.eventCache = null;
|
|
700
499
|
this.div = null;
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
}(eva_js.System);
|
|
500
|
+
}
|
|
501
|
+
};
|
|
502
|
+
A11ySystem.systemName = 'A11ySystem';
|
|
503
|
+
A11ySystem = __decorate([eva_js.decorators.componentObserver({
|
|
504
|
+
A11y: ['hint'],
|
|
505
|
+
Transform: ['inScene'],
|
|
506
|
+
Event: []
|
|
507
|
+
})], A11ySystem);
|
|
710
508
|
var A11ySystem$1 = A11ySystem;
|
|
711
|
-
exports.A11y = A11y
|
|
509
|
+
exports.A11y = A11y;
|
|
712
510
|
exports.A11ySystem = A11ySystem$1;
|
|
713
511
|
Object.defineProperty(exports, '__esModule', {
|
|
714
512
|
value: true
|