@eva/plugin-renderer-mask 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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Component, OBSERVER_TYPE, decorators, resource } from '@eva/eva.js';
|
|
2
2
|
import { type } from '@eva/inspector-decorator';
|
|
3
|
-
import {
|
|
3
|
+
import { Renderer, RendererSystem } from '@eva/plugin-renderer';
|
|
4
4
|
import { Graphics, Sprite } from '@eva/renderer-adapter';
|
|
5
5
|
|
|
6
6
|
/*! *****************************************************************************
|
|
@@ -17,20 +17,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
17
17
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
18
18
|
and limitations under the License.
|
|
19
19
|
***************************************************************************** */
|
|
20
|
-
/* global Reflect, Promise */
|
|
21
|
-
|
|
22
|
-
var extendStatics = function(d, b) {
|
|
23
|
-
extendStatics = Object.setPrototypeOf ||
|
|
24
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
25
|
-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
26
|
-
return extendStatics(d, b);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
function __extends(d, b) {
|
|
30
|
-
extendStatics(d, b);
|
|
31
|
-
function __() { this.constructor = d; }
|
|
32
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
33
|
-
}
|
|
34
20
|
|
|
35
21
|
function __decorate(decorators, target, key, desc) {
|
|
36
22
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -46,68 +32,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
46
32
|
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
|
|
47
33
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
48
34
|
});
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function __generator(thisArg, body) {
|
|
52
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
53
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
54
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
55
|
-
function step(op) {
|
|
56
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
57
|
-
while (_) try {
|
|
58
|
-
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;
|
|
59
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
60
|
-
switch (op[0]) {
|
|
61
|
-
case 0: case 1: t = op; break;
|
|
62
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
63
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
64
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
65
|
-
default:
|
|
66
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
67
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
68
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
69
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
70
|
-
if (t[2]) _.ops.pop();
|
|
71
|
-
_.trys.pop(); continue;
|
|
72
|
-
}
|
|
73
|
-
op = body.call(thisArg, _);
|
|
74
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
75
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
function __values(o) {
|
|
80
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
|
|
81
|
-
if (m) return m.call(o);
|
|
82
|
-
return {
|
|
83
|
-
next: function () {
|
|
84
|
-
if (o && i >= o.length) o = void 0;
|
|
85
|
-
return { value: o && o[i++], done: !o };
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function __read(o, n) {
|
|
91
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
92
|
-
if (!m) return o;
|
|
93
|
-
var i = m.call(o), r, ar = [], e;
|
|
94
|
-
try {
|
|
95
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
96
|
-
}
|
|
97
|
-
catch (error) { e = { error: error }; }
|
|
98
|
-
finally {
|
|
99
|
-
try {
|
|
100
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
101
|
-
}
|
|
102
|
-
finally { if (e) throw e.error; }
|
|
103
|
-
}
|
|
104
|
-
return ar;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function __spread() {
|
|
108
|
-
for (var ar = [], i = 0; i < arguments.length; i++)
|
|
109
|
-
ar = ar.concat(__read(arguments[i]));
|
|
110
|
-
return ar;
|
|
111
35
|
}
|
|
112
36
|
|
|
113
37
|
var MASK_TYPE$1;
|
|
@@ -120,38 +44,34 @@ var MASK_TYPE$1;
|
|
|
120
44
|
MASK_TYPE["Img"] = "Img";
|
|
121
45
|
MASK_TYPE["Sprite"] = "Sprite";
|
|
122
46
|
})(MASK_TYPE$1 || (MASK_TYPE$1 = {}));
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
_this.spriteName = '';
|
|
130
|
-
return _this;
|
|
47
|
+
class Mask$2 extends Component {
|
|
48
|
+
constructor() {
|
|
49
|
+
super(...arguments);
|
|
50
|
+
this.style = {};
|
|
51
|
+
this.resource = '';
|
|
52
|
+
this.spriteName = '';
|
|
131
53
|
}
|
|
132
|
-
|
|
54
|
+
init(obj) {
|
|
133
55
|
Object.assign(this, obj);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}(Component));
|
|
144
|
-
var Mask$3 = Mask$2;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
Mask$2.componentName = 'Mask';
|
|
59
|
+
__decorate([
|
|
60
|
+
type('string')
|
|
61
|
+
], Mask$2.prototype, "resource", void 0);
|
|
62
|
+
__decorate([
|
|
63
|
+
type('string')
|
|
64
|
+
], Mask$2.prototype, "spriteName", void 0);
|
|
145
65
|
|
|
146
|
-
|
|
147
|
-
|
|
66
|
+
const resourceKeySplit = '_s|r|c_';
|
|
67
|
+
const propertyForGraphics = {
|
|
148
68
|
Circle: ['x', 'y', 'radius'],
|
|
149
69
|
Ellipse: ['x', 'y', 'width', 'height'],
|
|
150
70
|
Rect: ['x', 'y', 'width', 'height'],
|
|
151
71
|
RoundedRect: ['x', 'y', 'width', 'height', 'radius'],
|
|
152
72
|
Polygon: ['paths'],
|
|
153
73
|
};
|
|
154
|
-
|
|
74
|
+
const functionForGraphics = {
|
|
155
75
|
Circle: 'circle',
|
|
156
76
|
Ellipse: 'ellipse',
|
|
157
77
|
Rect: 'rect',
|
|
@@ -168,23 +88,21 @@ var MASK_TYPE;
|
|
|
168
88
|
MASK_TYPE["Img"] = "Img";
|
|
169
89
|
MASK_TYPE["Sprite"] = "Sprite";
|
|
170
90
|
})(MASK_TYPE || (MASK_TYPE = {}));
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
_this.maskSpriteCache = {};
|
|
178
|
-
return _this;
|
|
91
|
+
let Mask = class Mask extends Renderer {
|
|
92
|
+
constructor() {
|
|
93
|
+
super(...arguments);
|
|
94
|
+
this.name = 'Mask';
|
|
95
|
+
this.changedCache = {};
|
|
96
|
+
this.maskSpriteCache = {};
|
|
179
97
|
}
|
|
180
|
-
|
|
98
|
+
init() {
|
|
181
99
|
this.renderSystem = this.game.getSystem(RendererSystem);
|
|
182
100
|
this.renderSystem.rendererManager.register(this);
|
|
183
|
-
}
|
|
184
|
-
|
|
101
|
+
}
|
|
102
|
+
rendererUpdate() {
|
|
185
103
|
this.changedCache = {};
|
|
186
|
-
}
|
|
187
|
-
|
|
104
|
+
}
|
|
105
|
+
componentChanged(changed) {
|
|
188
106
|
if (changed.component.name !== 'Mask')
|
|
189
107
|
return;
|
|
190
108
|
switch (changed.type) {
|
|
@@ -198,16 +116,16 @@ var Mask = (function (_super) {
|
|
|
198
116
|
this.change(changed);
|
|
199
117
|
break;
|
|
200
118
|
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
|
|
119
|
+
}
|
|
120
|
+
add(changed) {
|
|
121
|
+
const component = changed.component;
|
|
204
122
|
if (!(component.type in MASK_TYPE)) {
|
|
205
123
|
throw new Error('no have Mask type: ' + component.type);
|
|
206
124
|
}
|
|
207
125
|
if (!component.style) {
|
|
208
126
|
throw new Error('no have Mask style: ' + component.type);
|
|
209
127
|
}
|
|
210
|
-
|
|
128
|
+
let mask;
|
|
211
129
|
switch (component.type) {
|
|
212
130
|
case MASK_TYPE.Circle:
|
|
213
131
|
mask = this.createGraphics(component);
|
|
@@ -234,21 +152,21 @@ var Mask = (function (_super) {
|
|
|
234
152
|
if (!mask) {
|
|
235
153
|
throw new Error('no have mask instance, check your mask params: ' + component.type);
|
|
236
154
|
}
|
|
237
|
-
|
|
155
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
238
156
|
container.mask = mask;
|
|
239
157
|
container.addChild(mask);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
|
|
158
|
+
}
|
|
159
|
+
remove(changed) {
|
|
160
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
243
161
|
container.removeChild(container.mask);
|
|
244
162
|
container.mask.destroy({ children: true });
|
|
245
163
|
container.mask = null;
|
|
246
164
|
delete this.maskSpriteCache[changed.gameObject.id];
|
|
247
|
-
}
|
|
248
|
-
|
|
165
|
+
}
|
|
166
|
+
change(changed) {
|
|
249
167
|
if (this.changedCache[changed.gameObject.id])
|
|
250
168
|
return;
|
|
251
|
-
|
|
169
|
+
const component = changed.component;
|
|
252
170
|
if (changed.prop.prop[0] === 'type') {
|
|
253
171
|
this.changedCache[changed.gameObject.id] = true;
|
|
254
172
|
if ([MASK_TYPE.Sprite, MASK_TYPE.Img].indexOf(component.type) > -1 || component._lastType !== component.type) {
|
|
@@ -276,97 +194,76 @@ var Mask = (function (_super) {
|
|
|
276
194
|
this.changedCache[changed.gameObject.id] = true;
|
|
277
195
|
this.changeSprite(component);
|
|
278
196
|
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
|
|
197
|
+
}
|
|
198
|
+
createGraphics(component) {
|
|
199
|
+
const graphics = new Graphics();
|
|
282
200
|
this.draw(graphics, component);
|
|
283
201
|
return graphics;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
202
|
+
}
|
|
203
|
+
redrawGraphics(changed) {
|
|
204
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
205
|
+
const graphics = container.mask;
|
|
288
206
|
graphics.clear();
|
|
289
207
|
this.draw(graphics, changed.component);
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
for (var _b = __values(propertyForGraphics[component.type]), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
296
|
-
var key = _c.value;
|
|
297
|
-
params.push(component.style[key]);
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
301
|
-
finally {
|
|
302
|
-
try {
|
|
303
|
-
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
304
|
-
}
|
|
305
|
-
finally { if (e_1) throw e_1.error; }
|
|
208
|
+
}
|
|
209
|
+
draw(graphics, component) {
|
|
210
|
+
const params = [];
|
|
211
|
+
for (const key of propertyForGraphics[component.type]) {
|
|
212
|
+
params.push(component.style[key]);
|
|
306
213
|
}
|
|
307
|
-
graphics[functionForGraphics[component.type]]
|
|
214
|
+
graphics[functionForGraphics[component.type]](...params);
|
|
308
215
|
graphics.fill(0x000000);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
|
|
216
|
+
}
|
|
217
|
+
createSprite(component) {
|
|
218
|
+
const sprite = new Sprite(null);
|
|
312
219
|
this.maskSpriteCache[component.gameObject.id] = sprite;
|
|
313
220
|
this.setSprite(component, sprite);
|
|
314
221
|
return sprite.sprite;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
|
|
222
|
+
}
|
|
223
|
+
changeSpriteStyle(component) {
|
|
224
|
+
const sprite = this.maskSpriteCache[component.gameObject.id];
|
|
318
225
|
sprite.sprite.width = component.style.width;
|
|
319
226
|
sprite.sprite.height = component.style.height;
|
|
320
227
|
sprite.sprite.position.x = component.style.x;
|
|
321
228
|
sprite.sprite.position.y = component.style.y;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
|
|
229
|
+
}
|
|
230
|
+
changeSprite(component) {
|
|
231
|
+
const sprite = this.maskSpriteCache[component.gameObject.id];
|
|
325
232
|
this.setSprite(component, sprite);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
sprite.image = res.data.image;
|
|
352
|
-
}
|
|
353
|
-
sprite.sprite.width = component.style.width;
|
|
354
|
-
sprite.sprite.height = component.style.height;
|
|
355
|
-
sprite.sprite.position.x = component.style.x;
|
|
356
|
-
sprite.sprite.position.y = component.style.y;
|
|
357
|
-
return [2];
|
|
358
|
-
}
|
|
359
|
-
});
|
|
233
|
+
}
|
|
234
|
+
setSprite(component, sprite) {
|
|
235
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
236
|
+
let res;
|
|
237
|
+
try {
|
|
238
|
+
const asyncId = this.increaseAsyncId(component.gameObject.id);
|
|
239
|
+
res = yield resource.getResource(component.resource);
|
|
240
|
+
if (!this.validateAsyncId(component.gameObject.id, asyncId))
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
catch (e) {
|
|
244
|
+
throw new Error('mask resource load error');
|
|
245
|
+
}
|
|
246
|
+
if (component.type === MASK_TYPE.Sprite) {
|
|
247
|
+
const img = component.resource + resourceKeySplit + component.spriteName;
|
|
248
|
+
const texture = res.instance[img];
|
|
249
|
+
sprite.image = texture;
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
sprite.image = res.data.image;
|
|
253
|
+
}
|
|
254
|
+
sprite.sprite.width = component.style.width;
|
|
255
|
+
sprite.sprite.height = component.style.height;
|
|
256
|
+
sprite.sprite.position.x = component.style.x;
|
|
257
|
+
sprite.sprite.position.y = component.style.y;
|
|
360
258
|
});
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
}(Renderer));
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
Mask.systemName = 'Mask';
|
|
262
|
+
Mask = __decorate([
|
|
263
|
+
decorators.componentObserver({
|
|
264
|
+
Mask: ['type', { prop: ['style'], deep: true }, 'resource', 'spriteName'],
|
|
265
|
+
})
|
|
266
|
+
], Mask);
|
|
370
267
|
var Mask$1 = Mask;
|
|
371
268
|
|
|
372
|
-
export { MASK_TYPE$1 as MASK_TYPE, Mask$
|
|
269
|
+
export { MASK_TYPE$1 as MASK_TYPE, Mask$2 as Mask, Mask$1 as MaskSystem };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-mask",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.3",
|
|
4
4
|
"description": "@eva/plugin-renderer-mask",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-mask.esm.js",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@eva/inspector-decorator": "^0.0.5",
|
|
22
|
-
"@eva/plugin-renderer": "2.0.0-beta.
|
|
23
|
-
"@eva/renderer-adapter": "2.0.0-beta.
|
|
24
|
-
"@eva/eva.js": "2.0.0-beta.
|
|
22
|
+
"@eva/plugin-renderer": "2.0.0-beta.3",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.0-beta.3",
|
|
24
|
+
"@eva/eva.js": "2.0.0-beta.3",
|
|
25
25
|
"pixi.js": "^8.6.3"
|
|
26
26
|
}
|
|
27
27
|
}
|