@idraw/renderer 0.3.0-beta.6 → 0.3.0-beta.7

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.
Files changed (3) hide show
  1. package/dist/index.global.js +206 -309
  2. package/dist/index.global.min.js +1 -1
  3. package/package.json +4 -4
package/dist/index.global.js CHANGED
@@ -7,26 +7,26 @@ var iDrawRenderer = function() {
7
7
  function str4() {
8
8
  return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
9
9
  }
10
- return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
10
+ return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`;
11
11
  }
12
12
  function deepClone(target) {
13
13
  function _clone(t) {
14
- var type = is$1(t);
14
+ const type = is$1(t);
15
15
  if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
16
16
  return t;
17
17
  } else if (type === "Array") {
18
- var arr_1 = [];
19
- t.forEach(function(item) {
20
- arr_1.push(_clone(item));
18
+ const arr = [];
19
+ t.forEach((item) => {
20
+ arr.push(_clone(item));
21
21
  });
22
- return arr_1;
22
+ return arr;
23
23
  } else if (type === "Object") {
24
- var obj_1 = {};
25
- var keys = Object.keys(t);
26
- keys.forEach(function(key) {
27
- obj_1[key] = _clone(t[key]);
24
+ const obj = {};
25
+ const keys = Object.keys(t);
26
+ keys.forEach((key) => {
27
+ obj[key] = _clone(t[key]);
28
28
  });
29
- return obj_1;
29
+ return obj;
30
30
  }
31
31
  }
32
32
  return _clone(target);
@@ -35,56 +35,85 @@ var iDrawRenderer = function() {
35
35
  return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, "").split(" ")[1];
36
36
  }
37
37
  function parsePrototype(data) {
38
- var typeStr = Object.prototype.toString.call(data) || "";
39
- var result = typeStr.replace(/(\[object|\])/ig, "").trim();
38
+ const typeStr = Object.prototype.toString.call(data) || "";
39
+ const result = typeStr.replace(/(\[object|\])/ig, "").trim();
40
40
  return result;
41
41
  }
42
- var istype = {
43
- type: function(data, lowerCase) {
44
- var result = parsePrototype(data);
42
+ const istype = {
43
+ type(data, lowerCase) {
44
+ const result = parsePrototype(data);
45
45
  return lowerCase === true ? result.toLocaleLowerCase() : result;
46
46
  },
47
- array: function(data) {
47
+ array(data) {
48
48
  return parsePrototype(data) === "Array";
49
49
  },
50
- json: function(data) {
50
+ json(data) {
51
51
  return parsePrototype(data) === "Object";
52
52
  },
53
- function: function(data) {
53
+ function(data) {
54
54
  return parsePrototype(data) === "Function";
55
55
  },
56
- asyncFunction: function(data) {
56
+ asyncFunction(data) {
57
57
  return parsePrototype(data) === "AsyncFunction";
58
58
  },
59
- string: function(data) {
59
+ string(data) {
60
60
  return parsePrototype(data) === "String";
61
61
  },
62
- number: function(data) {
62
+ number(data) {
63
63
  return parsePrototype(data) === "Number";
64
64
  },
65
- undefined: function(data) {
65
+ undefined(data) {
66
66
  return parsePrototype(data) === "Undefined";
67
67
  },
68
- null: function(data) {
68
+ null(data) {
69
69
  return parsePrototype(data) === "Null";
70
70
  },
71
- promise: function(data) {
71
+ promise(data) {
72
72
  return parsePrototype(data) === "Promise";
73
73
  }
74
74
  };
75
- var __assign = function() {
76
- __assign = Object.assign || function __assign2(t) {
77
- for (var s, i = 1, n = arguments.length; i < n; i++) {
78
- s = arguments[i];
79
- for (var p in s)
80
- if (Object.prototype.hasOwnProperty.call(s, p))
81
- t[p] = s[p];
82
- }
83
- return t;
84
- };
85
- return __assign.apply(this, arguments);
86
- };
87
- function __awaiter(thisArg, _arguments, P, generator) {
75
+ function parseHTMLToDataURL(html2, opts) {
76
+ const { width, height } = opts;
77
+ return new Promise((resolve, reject) => {
78
+ const _svg = `
79
+ <svg xmlns="http://www.w3.org/2000/svg" width="${width || ""}" height = "${height || ""}">
80
+ <foreignObject width="100%" height="100%">
81
+ <div xmlns = "http://www.w3.org/1999/xhtml">
82
+ ${html2}
83
+ </div>
84
+ </foreignObject>
85
+ </svg>
86
+ `;
87
+ const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
88
+ const reader = new FileReader();
89
+ reader.readAsDataURL(blob);
90
+ reader.onload = function(event) {
91
+ var _a;
92
+ const base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
93
+ resolve(base64);
94
+ };
95
+ reader.onerror = function(err) {
96
+ reject(err);
97
+ };
98
+ });
99
+ }
100
+ function parseSVGToDataURL(svg2) {
101
+ return new Promise((resolve, reject) => {
102
+ const _svg = svg2;
103
+ const blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
104
+ const reader = new FileReader();
105
+ reader.readAsDataURL(blob);
106
+ reader.onload = function(event) {
107
+ var _a;
108
+ const base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
109
+ resolve(base64);
110
+ };
111
+ reader.onerror = function(err) {
112
+ reject(err);
113
+ };
114
+ });
115
+ }
116
+ var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
88
117
  function adopt(value) {
89
118
  return value instanceof P ? value : new P(function(resolve) {
90
119
  resolve(value);
@@ -110,120 +139,12 @@ var iDrawRenderer = function() {
110
139
  }
111
140
  step((generator = generator.apply(thisArg, _arguments || [])).next());
112
141
  });
113
- }
114
- function __generator(thisArg, body) {
115
- var _ = { label: 0, sent: function() {
116
- if (t[0] & 1)
117
- throw t[1];
118
- return t[1];
119
- }, trys: [], ops: [] }, f, y2, t, g;
120
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
121
- return this;
122
- }), g;
123
- function verb(n) {
124
- return function(v) {
125
- return step([n, v]);
126
- };
127
- }
128
- function step(op) {
129
- if (f)
130
- throw new TypeError("Generator is already executing.");
131
- while (_)
132
- try {
133
- if (f = 1, y2 && (t = op[0] & 2 ? y2["return"] : op[0] ? y2["throw"] || ((t = y2["return"]) && t.call(y2), 0) : y2.next) && !(t = t.call(y2, op[1])).done)
134
- return t;
135
- if (y2 = 0, t)
136
- op = [op[0] & 2, t.value];
137
- switch (op[0]) {
138
- case 0:
139
- case 1:
140
- t = op;
141
- break;
142
- case 4:
143
- _.label++;
144
- return { value: op[1], done: false };
145
- case 5:
146
- _.label++;
147
- y2 = op[1];
148
- op = [0];
149
- continue;
150
- case 7:
151
- op = _.ops.pop();
152
- _.trys.pop();
153
- continue;
154
- default:
155
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
156
- _ = 0;
157
- continue;
158
- }
159
- if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
160
- _.label = op[1];
161
- break;
162
- }
163
- if (op[0] === 6 && _.label < t[1]) {
164
- _.label = t[1];
165
- t = op;
166
- break;
167
- }
168
- if (t && _.label < t[2]) {
169
- _.label = t[2];
170
- _.ops.push(op);
171
- break;
172
- }
173
- if (t[2])
174
- _.ops.pop();
175
- _.trys.pop();
176
- continue;
177
- }
178
- op = body.call(thisArg, _);
179
- } catch (e) {
180
- op = [6, e];
181
- y2 = 0;
182
- } finally {
183
- f = t = 0;
184
- }
185
- if (op[0] & 5)
186
- throw op[1];
187
- return { value: op[0] ? op[1] : void 0, done: true };
188
- }
189
- }
190
- function parseHTMLToDataURL(html2, opts) {
191
- var width = opts.width, height = opts.height;
192
- return new Promise(function(resolve, reject) {
193
- var _svg = '\n <svg xmlns="http://www.w3.org/2000/svg" width="'.concat(width || "", '" height = "').concat(height || "", '">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ').concat(html2, "\n </div>\n </foreignObject>\n </svg>\n ");
194
- var blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
195
- var reader = new FileReader();
196
- reader.readAsDataURL(blob);
197
- reader.onload = function(event) {
198
- var _a;
199
- var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
200
- resolve(base64);
201
- };
202
- reader.onerror = function(err) {
203
- reject(err);
204
- };
205
- });
206
- }
207
- function parseSVGToDataURL(svg2) {
208
- return new Promise(function(resolve, reject) {
209
- var _svg = svg2;
210
- var blob = new Blob([_svg], { type: "image/svg+xml;charset=utf-8" });
211
- var reader = new FileReader();
212
- reader.readAsDataURL(blob);
213
- reader.onload = function(event) {
214
- var _a;
215
- var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
216
- resolve(base64);
217
- };
218
- reader.onerror = function(err) {
219
- reject(err);
220
- };
221
- });
222
- }
223
- var Image = window.Image;
142
+ };
143
+ const { Image } = window;
224
144
  function loadImage(src) {
225
- return new Promise(function(resolve, reject) {
226
- var img = new Image();
145
+ return new Promise((resolve, reject) => {
146
+ const img = new Image();
147
+ img.crossOrigin = "anonymous";
227
148
  img.onload = function() {
228
149
  resolve(img);
229
150
  };
@@ -233,41 +154,25 @@ var iDrawRenderer = function() {
233
154
  });
234
155
  }
235
156
  function loadSVG(svg2) {
236
- return __awaiter(this, void 0, void 0, function() {
237
- var dataURL, image;
238
- return __generator(this, function(_a) {
239
- switch (_a.label) {
240
- case 0:
241
- return [4, parseSVGToDataURL(svg2)];
242
- case 1:
243
- dataURL = _a.sent();
244
- return [4, loadImage(dataURL)];
245
- case 2:
246
- image = _a.sent();
247
- return [2, image];
248
- }
249
- });
157
+ return __awaiter(this, void 0, void 0, function* () {
158
+ const dataURL = yield parseSVGToDataURL(svg2);
159
+ const image = yield loadImage(dataURL);
160
+ return image;
250
161
  });
251
162
  }
163
+ function filterAmpersand(str) {
164
+ return str.replace(/\&/ig, "&amp;");
165
+ }
252
166
  function loadHTML(html2, opts) {
253
- return __awaiter(this, void 0, void 0, function() {
254
- var dataURL, image;
255
- return __generator(this, function(_a) {
256
- switch (_a.label) {
257
- case 0:
258
- return [4, parseHTMLToDataURL(html2, opts)];
259
- case 1:
260
- dataURL = _a.sent();
261
- return [4, loadImage(dataURL)];
262
- case 2:
263
- image = _a.sent();
264
- return [2, image];
265
- }
266
- });
167
+ return __awaiter(this, void 0, void 0, function* () {
168
+ html2 = filterAmpersand(html2);
169
+ const dataURL = yield parseHTMLToDataURL(html2, opts);
170
+ const image = yield loadImage(dataURL);
171
+ return image;
267
172
  });
268
173
  }
269
- var Context = function() {
270
- function Context2(ctx, opts) {
174
+ class Context {
175
+ constructor(ctx, opts) {
271
176
  this._opts = opts;
272
177
  this._ctx = ctx;
273
178
  this._transform = {
@@ -276,19 +181,19 @@ var iDrawRenderer = function() {
276
181
  scrollY: 0
277
182
  };
278
183
  }
279
- Context2.prototype.getContext = function() {
184
+ getContext() {
280
185
  return this._ctx;
281
- };
282
- Context2.prototype.resetSize = function(opts) {
283
- this._opts = __assign(__assign({}, this._opts), opts);
284
- };
285
- Context2.prototype.calcDeviceNum = function(num) {
186
+ }
187
+ resetSize(opts) {
188
+ this._opts = Object.assign(Object.assign({}, this._opts), opts);
189
+ }
190
+ calcDeviceNum(num) {
286
191
  return num * this._opts.devicePixelRatio;
287
- };
288
- Context2.prototype.calcScreenNum = function(num) {
192
+ }
193
+ calcScreenNum(num) {
289
194
  return num / this._opts.devicePixelRatio;
290
- };
291
- Context2.prototype.getSize = function() {
195
+ }
196
+ getSize() {
292
197
  return {
293
198
  width: this._opts.width,
294
199
  height: this._opts.height,
@@ -296,174 +201,166 @@ var iDrawRenderer = function() {
296
201
  contextHeight: this._opts.contextHeight,
297
202
  devicePixelRatio: this._opts.devicePixelRatio
298
203
  };
299
- };
300
- Context2.prototype.setTransform = function(config) {
301
- this._transform = __assign(__assign({}, this._transform), config);
302
- };
303
- Context2.prototype.getTransform = function() {
204
+ }
205
+ setTransform(config) {
206
+ this._transform = Object.assign(Object.assign({}, this._transform), config);
207
+ }
208
+ getTransform() {
304
209
  return {
305
210
  scale: this._transform.scale,
306
211
  scrollX: this._transform.scrollX,
307
212
  scrollY: this._transform.scrollY
308
213
  };
309
- };
310
- Context2.prototype.setFillStyle = function(color2) {
214
+ }
215
+ setFillStyle(color2) {
311
216
  this._ctx.fillStyle = color2;
312
- };
313
- Context2.prototype.fill = function(fillRule) {
217
+ }
218
+ fill(fillRule) {
314
219
  return this._ctx.fill(fillRule || "nonzero");
315
- };
316
- Context2.prototype.arc = function(x2, y2, radius, startAngle, endAngle, anticlockwise) {
220
+ }
221
+ arc(x2, y2, radius, startAngle, endAngle, anticlockwise) {
317
222
  return this._ctx.arc(this._doSize(x2), this._doSize(y2), this._doSize(radius), startAngle, endAngle, anticlockwise);
318
- };
319
- Context2.prototype.rect = function(x2, y2, w2, h2) {
223
+ }
224
+ rect(x2, y2, w2, h2) {
320
225
  return this._ctx.rect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
321
- };
322
- Context2.prototype.fillRect = function(x2, y2, w2, h2) {
226
+ }
227
+ fillRect(x2, y2, w2, h2) {
323
228
  return this._ctx.fillRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
324
- };
325
- Context2.prototype.clearRect = function(x2, y2, w2, h2) {
229
+ }
230
+ clearRect(x2, y2, w2, h2) {
326
231
  return this._ctx.clearRect(this._doSize(x2), this._doSize(y2), this._doSize(w2), this._doSize(h2));
327
- };
328
- Context2.prototype.beginPath = function() {
232
+ }
233
+ beginPath() {
329
234
  return this._ctx.beginPath();
330
- };
331
- Context2.prototype.closePath = function() {
235
+ }
236
+ closePath() {
332
237
  return this._ctx.closePath();
333
- };
334
- Context2.prototype.lineTo = function(x2, y2) {
238
+ }
239
+ lineTo(x2, y2) {
335
240
  return this._ctx.lineTo(this._doSize(x2), this._doSize(y2));
336
- };
337
- Context2.prototype.moveTo = function(x2, y2) {
241
+ }
242
+ moveTo(x2, y2) {
338
243
  return this._ctx.moveTo(this._doSize(x2), this._doSize(y2));
339
- };
340
- Context2.prototype.arcTo = function(x1, y1, x2, y2, radius) {
244
+ }
245
+ arcTo(x1, y1, x2, y2, radius) {
341
246
  return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
342
- };
343
- Context2.prototype.setLineWidth = function(w2) {
247
+ }
248
+ setLineWidth(w2) {
344
249
  return this._ctx.lineWidth = this._doSize(w2);
345
- };
346
- Context2.prototype.setLineDash = function(nums) {
347
- var _this = this;
348
- return this._ctx.setLineDash(nums.map(function(n) {
349
- return _this._doSize(n);
350
- }));
351
- };
352
- Context2.prototype.isPointInPath = function(x2, y2) {
250
+ }
251
+ setLineDash(nums) {
252
+ return this._ctx.setLineDash(nums.map((n) => this._doSize(n)));
253
+ }
254
+ isPointInPath(x2, y2) {
353
255
  return this._ctx.isPointInPath(this._doX(x2), this._doY(y2));
354
- };
355
- Context2.prototype.isPointInPathWithoutScroll = function(x2, y2) {
256
+ }
257
+ isPointInPathWithoutScroll(x2, y2) {
356
258
  return this._ctx.isPointInPath(this._doSize(x2), this._doSize(y2));
357
- };
358
- Context2.prototype.setStrokeStyle = function(color2) {
259
+ }
260
+ setStrokeStyle(color2) {
359
261
  this._ctx.strokeStyle = color2;
360
- };
361
- Context2.prototype.stroke = function() {
262
+ }
263
+ stroke() {
362
264
  return this._ctx.stroke();
363
- };
364
- Context2.prototype.translate = function(x2, y2) {
265
+ }
266
+ translate(x2, y2) {
365
267
  return this._ctx.translate(this._doSize(x2), this._doSize(y2));
366
- };
367
- Context2.prototype.rotate = function(angle2) {
268
+ }
269
+ rotate(angle2) {
368
270
  return this._ctx.rotate(angle2);
369
- };
370
- Context2.prototype.drawImage = function() {
371
- var args = [];
372
- for (var _i = 0; _i < arguments.length; _i++) {
373
- args[_i] = arguments[_i];
374
- }
375
- var image = args[0];
376
- var sx = args[1];
377
- var sy = args[2];
378
- var sw = args[3];
379
- var sh = args[4];
380
- var dx = args[args.length - 4];
381
- var dy = args[args.length - 3];
382
- var dw = args[args.length - 2];
383
- var dh = args[args.length - 1];
271
+ }
272
+ drawImage(...args) {
273
+ const image = args[0];
274
+ const sx = args[1];
275
+ const sy = args[2];
276
+ const sw = args[3];
277
+ const sh = args[4];
278
+ const dx = args[args.length - 4];
279
+ const dy = args[args.length - 3];
280
+ const dw = args[args.length - 2];
281
+ const dh = args[args.length - 1];
384
282
  if (args.length === 9) {
385
283
  return this._ctx.drawImage(image, this._doSize(sx), this._doSize(sy), this._doSize(sw), this._doSize(sh), this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
386
284
  } else {
387
285
  return this._ctx.drawImage(image, this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
388
286
  }
389
- };
390
- Context2.prototype.createPattern = function(image, repetition) {
287
+ }
288
+ createPattern(image, repetition) {
391
289
  return this._ctx.createPattern(image, repetition);
392
- };
393
- Context2.prototype.measureText = function(text2) {
290
+ }
291
+ measureText(text2) {
394
292
  return this._ctx.measureText(text2);
395
- };
396
- Context2.prototype.setTextAlign = function(align) {
293
+ }
294
+ setTextAlign(align) {
397
295
  this._ctx.textAlign = align;
398
- };
399
- Context2.prototype.fillText = function(text2, x2, y2, maxWidth) {
296
+ }
297
+ fillText(text2, x2, y2, maxWidth) {
400
298
  if (maxWidth !== void 0) {
401
299
  return this._ctx.fillText(text2, this._doSize(x2), this._doSize(y2), this._doSize(maxWidth));
402
300
  } else {
403
301
  return this._ctx.fillText(text2, this._doSize(x2), this._doSize(y2));
404
302
  }
405
- };
406
- Context2.prototype.strokeText = function(text2, x2, y2, maxWidth) {
303
+ }
304
+ strokeText(text2, x2, y2, maxWidth) {
407
305
  if (maxWidth !== void 0) {
408
306
  return this._ctx.strokeText(text2, this._doSize(x2), this._doSize(y2), this._doSize(maxWidth));
409
307
  } else {
410
308
  return this._ctx.strokeText(text2, this._doSize(x2), this._doSize(y2));
411
309
  }
412
- };
413
- Context2.prototype.setFont = function(opts) {
414
- var strList = [];
310
+ }
311
+ setFont(opts) {
312
+ const strList = [];
415
313
  if (opts.fontWeight === "bold") {
416
- strList.push("".concat(opts.fontWeight));
314
+ strList.push(`${opts.fontWeight}`);
417
315
  }
418
- strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
419
- strList.push("".concat(opts.fontFamily || "sans-serif"));
420
- this._ctx.font = "".concat(strList.join(" "));
421
- };
422
- Context2.prototype.setTextBaseline = function(baseline) {
316
+ strList.push(`${this._doSize(opts.fontSize || 12)}px`);
317
+ strList.push(`${opts.fontFamily || "sans-serif"}`);
318
+ this._ctx.font = `${strList.join(" ")}`;
319
+ }
320
+ setTextBaseline(baseline) {
423
321
  this._ctx.textBaseline = baseline;
424
- };
425
- Context2.prototype.setGlobalAlpha = function(alpha) {
322
+ }
323
+ setGlobalAlpha(alpha) {
426
324
  this._ctx.globalAlpha = alpha;
427
- };
428
- Context2.prototype.save = function() {
325
+ }
326
+ save() {
429
327
  this._ctx.save();
430
- };
431
- Context2.prototype.restore = function() {
328
+ }
329
+ restore() {
432
330
  this._ctx.restore();
433
- };
434
- Context2.prototype.scale = function(ratioX, ratioY) {
331
+ }
332
+ scale(ratioX, ratioY) {
435
333
  this._ctx.scale(ratioX, ratioY);
436
- };
437
- Context2.prototype.setShadowColor = function(color2) {
334
+ }
335
+ setShadowColor(color2) {
438
336
  this._ctx.shadowColor = color2;
439
- };
440
- Context2.prototype.setShadowOffsetX = function(offsetX) {
337
+ }
338
+ setShadowOffsetX(offsetX) {
441
339
  this._ctx.shadowOffsetX = this._doSize(offsetX);
442
- };
443
- Context2.prototype.setShadowOffsetY = function(offsetY) {
340
+ }
341
+ setShadowOffsetY(offsetY) {
444
342
  this._ctx.shadowOffsetY = this._doSize(offsetY);
445
- };
446
- Context2.prototype.setShadowBlur = function(blur) {
343
+ }
344
+ setShadowBlur(blur) {
447
345
  this._ctx.shadowBlur = this._doSize(blur);
448
- };
449
- Context2.prototype.ellipse = function(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
346
+ }
347
+ ellipse(x2, y2, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
450
348
  this._ctx.ellipse(this._doSize(x2), this._doSize(y2), this._doSize(radiusX), this._doSize(radiusY), rotation, startAngle, endAngle, counterclockwise);
451
- };
452
- Context2.prototype._doSize = function(num) {
349
+ }
350
+ _doSize(num) {
453
351
  return this._opts.devicePixelRatio * num;
454
- };
455
- Context2.prototype._doX = function(x2) {
456
- var _a = this._transform, scale = _a.scale, scrollX = _a.scrollX;
457
- var _x = (x2 - scrollX) / scale;
352
+ }
353
+ _doX(x2) {
354
+ const { scale, scrollX } = this._transform;
355
+ const _x = (x2 - scrollX) / scale;
458
356
  return this._doSize(_x);
459
- };
460
- Context2.prototype._doY = function(y2) {
461
- var _a = this._transform, scale = _a.scale, scrollY = _a.scrollY;
462
- var _y = (y2 - scrollY) / scale;
357
+ }
358
+ _doY(y2) {
359
+ const { scale, scrollY } = this._transform;
360
+ const _y = (y2 - scrollY) / scale;
463
361
  return this._doSize(_y);
464
- };
465
- return Context2;
466
- }();
362
+ }
363
+ }
467
364
  function number(value) {
468
365
  return typeof value === "number" && (value > 0 || value <= 0);
469
366
  }
@@ -492,21 +389,21 @@ var iDrawRenderer = function() {
492
389
  return isColorStr(value);
493
390
  }
494
391
  function imageURL(value) {
495
- return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value));
392
+ return typeof value === "string" && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`);
496
393
  }
497
394
  function imageBase64(value) {
498
- return typeof value === "string" && /^(data:image\/)/.test("".concat(value));
395
+ return typeof value === "string" && /^(data:image\/)/.test(`${value}`);
499
396
  }
500
397
  function imageSrc(value) {
501
398
  return imageBase64(value) || imageURL(value);
502
399
  }
503
400
  function svg(value) {
504
- return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim());
401
+ return typeof value === "string" && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim());
505
402
  }
506
403
  function html(value) {
507
- var result = false;
404
+ let result = false;
508
405
  if (typeof value === "string") {
509
- var div = document.createElement("div");
406
+ let div = document.createElement("div");
510
407
  div.innerHTML = value;
511
408
  if (div.children.length > 0) {
512
409
  result = true;
@@ -536,7 +433,7 @@ var iDrawRenderer = function() {
536
433
  function fontWeight(value) {
537
434
  return ["bold"].includes(value);
538
435
  }
539
- var is = {
436
+ const is = {
540
437
  x,
541
438
  y,
542
439
  w,
package/dist/index.global.min.js CHANGED
@@ -1 +1 @@
1
- var iDrawRenderer=function(){"use strict";function t(t){return"string"==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function e(t){return function t(e){var o,i=(o=e,Object.prototype.toString.call(o).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]);if(["Null","Number","String","Boolean","Undefined"].indexOf(i)>=0)return e;if("Array"===i){var n=[];return e.forEach((function(e){n.push(t(e))})),n}if("Object"===i){var r={};return Object.keys(e).forEach((function(o){r[o]=t(e[o])})),r}}(t)}function o(t){return(Object.prototype.toString.call(t)||"").replace(/(\[object|\])/gi,"").trim()}var i={type:function(t,e){var i=o(t);return!0===e?i.toLocaleLowerCase():i},array:function(t){return"Array"===o(t)},json:function(t){return"Object"===o(t)},function:function(t){return"Function"===o(t)},asyncFunction:function(t){return"AsyncFunction"===o(t)},string:function(t){return"String"===o(t)},number:function(t){return"Number"===o(t)},undefined:function(t){return"Undefined"===o(t)},null:function(t){return"Null"===o(t)},promise:function(t){return"Promise"===o(t)}},n=function(){return n=Object.assign||function(t){for(var e,o=1,i=arguments.length;o<i;o++)for(var n in e=arguments[o])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},n.apply(this,arguments)};function r(t,e,o,i){return new(o||(o=Promise))((function(n,r){function s(t){try{h(i.next(t))}catch(t){r(t)}}function a(t){try{h(i.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?n(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,a)}h((i=i.apply(t,e||[])).next())}))}function s(t,e){var o,i,n,r,s={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return r={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function a(r){return function(a){return function(r){if(o)throw new TypeError("Generator is already executing.");for(;s;)try{if(o=1,i&&(n=2&r[0]?i.return:r[0]?i.throw||((n=i.return)&&n.call(i),0):i.next)&&!(n=n.call(i,r[1])).done)return n;switch(i=0,n&&(r=[2&r[0],n.value]),r[0]){case 0:case 1:n=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,i=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(n=s.trys,(n=n.length>0&&n[n.length-1])||6!==r[0]&&2!==r[0])){s=0;continue}if(3===r[0]&&(!n||r[1]>n[0]&&r[1]<n[3])){s.label=r[1];break}if(6===r[0]&&s.label<n[1]){s.label=n[1],n=r;break}if(n&&s.label<n[2]){s.label=n[2],s.ops.push(r);break}n[2]&&s.ops.pop(),s.trys.pop();continue}r=e.call(t,s)}catch(t){r=[6,t],i=0}finally{o=n=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,a])}}}function a(t,e){var o=e.width,i=e.height;return new Promise((function(e,n){var r='\n <svg xmlns="http://www.w3.org/2000/svg" width="'.concat(o||"",'" height = "').concat(i||"",'">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ').concat(t,"\n </div>\n </foreignObject>\n </svg>\n "),s=new Blob([r],{type:"image/svg+xml;charset=utf-8"}),a=new FileReader;a.readAsDataURL(s),a.onload=function(t){var o,i=null===(o=null==t?void 0:t.target)||void 0===o?void 0:o.result;e(i)},a.onerror=function(t){n(t)}}))}function h(t){return new Promise((function(e,o){var i=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),n=new FileReader;n.readAsDataURL(i),n.onload=function(t){var o,i=null===(o=null==t?void 0:t.target)||void 0===o?void 0:o.result;e(i)},n.onerror=function(t){o(t)}}))}var u=window.Image;function c(t){return new Promise((function(e,o){var i=new u;i.onload=function(){e(i)},i.onabort=o,i.onerror=o,i.src=t}))}var l=function(){function t(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}return t.prototype.getContext=function(){return this._ctx},t.prototype.resetSize=function(t){this._opts=n(n({},this._opts),t)},t.prototype.calcDeviceNum=function(t){return t*this._opts.devicePixelRatio},t.prototype.calcScreenNum=function(t){return t/this._opts.devicePixelRatio},t.prototype.getSize=function(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}},t.prototype.setTransform=function(t){this._transform=n(n({},this._transform),t)},t.prototype.getTransform=function(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}},t.prototype.setFillStyle=function(t){this._ctx.fillStyle=t},t.prototype.fill=function(t){return this._ctx.fill(t||"nonzero")},t.prototype.arc=function(t,e,o,i,n,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(o),i,n,r)},t.prototype.rect=function(t,e,o,i){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(o),this._doSize(i))},t.prototype.fillRect=function(t,e,o,i){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(o),this._doSize(i))},t.prototype.clearRect=function(t,e,o,i){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(o),this._doSize(i))},t.prototype.beginPath=function(){return this._ctx.beginPath()},t.prototype.closePath=function(){return this._ctx.closePath()},t.prototype.lineTo=function(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))},t.prototype.moveTo=function(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))},t.prototype.arcTo=function(t,e,o,i,n){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(o),this._doSize(i),this._doSize(n))},t.prototype.setLineWidth=function(t){return this._ctx.lineWidth=this._doSize(t)},t.prototype.setLineDash=function(t){var e=this;return this._ctx.setLineDash(t.map((function(t){return e._doSize(t)})))},t.prototype.isPointInPath=function(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))},t.prototype.isPointInPathWithoutScroll=function(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))},t.prototype.setStrokeStyle=function(t){this._ctx.strokeStyle=t},t.prototype.stroke=function(){return this._ctx.stroke()},t.prototype.translate=function(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))},t.prototype.rotate=function(t){return this._ctx.rotate(t)},t.prototype.drawImage=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var o=t[0],i=t[1],n=t[2],r=t[3],s=t[4],a=t[t.length-4],h=t[t.length-3],u=t[t.length-2],c=t[t.length-1];return 9===t.length?this._ctx.drawImage(o,this._doSize(i),this._doSize(n),this._doSize(r),this._doSize(s),this._doSize(a),this._doSize(h),this._doSize(u),this._doSize(c)):this._ctx.drawImage(o,this._doSize(a),this._doSize(h),this._doSize(u),this._doSize(c))},t.prototype.createPattern=function(t,e){return this._ctx.createPattern(t,e)},t.prototype.measureText=function(t){return this._ctx.measureText(t)},t.prototype.setTextAlign=function(t){this._ctx.textAlign=t},t.prototype.fillText=function(t,e,o,i){return void 0!==i?this._ctx.fillText(t,this._doSize(e),this._doSize(o),this._doSize(i)):this._ctx.fillText(t,this._doSize(e),this._doSize(o))},t.prototype.strokeText=function(t,e,o,i){return void 0!==i?this._ctx.strokeText(t,this._doSize(e),this._doSize(o),this._doSize(i)):this._ctx.strokeText(t,this._doSize(e),this._doSize(o))},t.prototype.setFont=function(t){var e=[];"bold"===t.fontWeight&&e.push("".concat(t.fontWeight)),e.push("".concat(this._doSize(t.fontSize||12),"px")),e.push("".concat(t.fontFamily||"sans-serif")),this._ctx.font="".concat(e.join(" "))},t.prototype.setTextBaseline=function(t){this._ctx.textBaseline=t},t.prototype.setGlobalAlpha=function(t){this._ctx.globalAlpha=t},t.prototype.save=function(){this._ctx.save()},t.prototype.restore=function(){this._ctx.restore()},t.prototype.scale=function(t,e){this._ctx.scale(t,e)},t.prototype.setShadowColor=function(t){this._ctx.shadowColor=t},t.prototype.setShadowOffsetX=function(t){this._ctx.shadowOffsetX=this._doSize(t)},t.prototype.setShadowOffsetY=function(t){this._ctx.shadowOffsetY=this._doSize(t)},t.prototype.setShadowBlur=function(t){this._ctx.shadowBlur=this._doSize(t)},t.prototype.ellipse=function(t,e,o,i,n,r,s,a){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(o),this._doSize(i),n,r,s,a)},t.prototype._doSize=function(t){return this._opts.devicePixelRatio*t},t.prototype._doX=function(t){var e=this._transform,o=e.scale,i=(t-e.scrollX)/o;return this._doSize(i)},t.prototype._doY=function(t){var e=this._transform,o=e.scale,i=(t-e.scrollY)/o;return this._doSize(i)},t}();function d(t){return"number"==typeof t&&(t>0||t<=0)}function f(t){return"number"==typeof t&&t>=0}function _(t){return"string"==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(t))}function p(t){return"string"==typeof t&&/^(data:image\/)/.test("".concat(t))}var g={x:function(t){return d(t)},y:function(t){return d(t)},w:f,h:function(t){return"number"==typeof t&&t>=0},angle:function(t){return"number"==typeof t&&t>=-360&&t<=360},number:d,borderWidth:function(t){return f(t)},borderRadius:function(t){return d(t)&&t>=0},color:function(e){return t(e)},imageSrc:function(t){return p(t)||_(t)},imageURL:_,imageBase64:p,svg:function(t){return"string"==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test("".concat(t).trim())&&/<\/[\s]{0,}svg>$/i.test("".concat(t).trim())},html:function(t){var e=!1;if("string"==typeof t){var o=document.createElement("div");o.innerHTML=t,o.children.length>0&&(e=!0),o=null}return e},text:function(t){return"string"==typeof t},fontSize:function(t){return d(t)&&t>0},lineHeight:function(t){return d(t)&&t>0},textAlign:function(t){return["center","left","right"].includes(t)},fontFamily:function(t){return"string"==typeof t&&t.length>0},fontWeight:function(t){return["bold"].includes(t)},strokeWidth:function(t){return d(t)&&t>0}};function m(t,e,o){const i=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e);return function(t,e,o,i){e&&(o>0||o<0)&&(t.translate(e.x,e.y),t.rotate(o),t.translate(-e.x,-e.y));i(t),e&&(o>0||o<0)&&(t.translate(e.x,e.y),t.rotate(-o),t.translate(-e.x,-e.y))}(t,i,(e.angle||0)/180*Math.PI||0,o)}function y(t){t.setFillStyle("#000000"),t.setStrokeStyle("#000000"),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor("#00000000"),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function x(e,o,n){y(e),function(e,o){y(e),m(e,o,(()=>{if(!(o.desc.borderWidth&&o.desc.borderWidth>0))return;const i=o.desc.borderWidth;let n="#000000";!0===t(o.desc.borderColor)&&(n=o.desc.borderColor);const r=o.x-i/2,s=o.y-i/2,a=o.w+i,h=o.h+i;let u=o.desc.borderRadius||0;u=Math.min(u,a/2,h/2),u<a/2&&u<h/2&&(u+=i/2);const{desc:c}=o;void 0!==c.shadowColor&&t(c.shadowColor)&&e.setShadowColor(c.shadowColor),void 0!==c.shadowOffsetX&&g.number(c.shadowOffsetX)&&e.setShadowOffsetX(c.shadowOffsetX),void 0!==c.shadowOffsetY&&g.number(c.shadowOffsetY)&&e.setShadowOffsetY(c.shadowOffsetY),void 0!==c.shadowBlur&&g.number(c.shadowBlur)&&e.setShadowBlur(c.shadowBlur),e.beginPath(),e.setLineWidth(i),e.setStrokeStyle(n),e.moveTo(r+u,s),e.arcTo(r+a,s,r+a,s+h,u),e.arcTo(r+a,s+h,r,s+h,u),e.arcTo(r,s+h,r,s,u),e.arcTo(r,s,r+a,s,u),e.closePath(),e.stroke()}))}(e,o),y(e),m(e,o,(()=>{const{x:t,y:r,w:s,h:a}=o;let h=o.desc.borderRadius||0;h=Math.min(h,s/2,a/2),(s<2*h||a<2*h)&&(h=0),e.beginPath(),e.moveTo(t+h,r),e.arcTo(t+s,r,t+s,r+a,h),e.arcTo(t+s,r+a,t,r+a,h),e.arcTo(t,r+a,t,r,h),e.arcTo(t,r,t+s,r,h),e.closePath(),("string"==typeof n||["CanvasPattern"].includes(i.type(n)))&&e.setFillStyle(n),e.fill()}))}function w(t,e){x(t,e,e.desc.bgColor)}function S(t,e,o){const i=o.getContent(e.uuid);m(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function v(t,e,o){const i=o.getContent(e.uuid);m(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function b(t,e,o){const i=o.getContent(e.uuid);m(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function z(e,o,i){y(e),x(e,o,o.desc.bgColor||"transparent"),m(e,o,(()=>{const i={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...o.desc};e.setFillStyle(o.desc.color),e.setTextBaseline("top"),e.setFont({fontWeight:i.fontWeight,fontSize:i.fontSize,fontFamily:i.fontFamily});const n=i.text.replace(/\r\n/gi,"\n"),r=i.lineHeight||i.fontSize,s=n.split("\n"),a=[];let h=0;s.forEach(((t,i)=>{let n="";if(t.length>0){for(let u=0;u<t.length&&(e.measureText(n+(t[u]||"")).width<e.calcDeviceNum(o.w)?n+=t[u]||"":(a.push({text:n,width:e.calcScreenNum(e.measureText(n).width)}),n=t[u]||"",h++),!((h+1)*r>o.h));u++)if(t.length-1===u&&(h+1)*r<o.h){a.push({text:n,width:e.calcScreenNum(e.measureText(n).width)}),i<s.length-1&&h++;break}}else a.push({text:"",width:0})}));let u=0;a.length*r<o.h&&("top"===o.desc.verticalAlign?u=0:"bottom"===o.desc.verticalAlign?u+=o.h-a.length*r:u+=(o.h-a.length*r)/2);{const n=o.y+u;void 0!==i.textShadowColor&&t(i.textShadowColor)&&e.setShadowColor(i.textShadowColor),void 0!==i.textShadowOffsetX&&g.number(i.textShadowOffsetX)&&e.setShadowOffsetX(i.textShadowOffsetX),void 0!==i.textShadowOffsetY&&g.number(i.textShadowOffsetY)&&e.setShadowOffsetY(i.textShadowOffsetY),void 0!==i.textShadowBlur&&g.number(i.textShadowBlur)&&e.setShadowBlur(i.textShadowBlur),a.forEach(((t,s)=>{let a=o.x;"center"===i.textAlign?a=o.x+(o.w-t.width)/2:"right"===i.textAlign&&(a=o.x+(o.w-t.width)),e.fillText(t.text,a,n+r*s)})),y(e)}if(t(i.strokeColor)&&void 0!==i.strokeWidth&&i.strokeWidth>0){const t=o.y+u;a.forEach(((n,s)=>{let a=o.x;"center"===i.textAlign?a=o.x+(o.w-n.width)/2:"right"===i.textAlign&&(a=o.x+(o.w-n.width)),void 0!==i.strokeColor&&e.setStrokeStyle(i.strokeColor),void 0!==i.strokeWidth&&i.strokeWidth>0&&e.setLineWidth(i.strokeWidth),e.strokeText(n.text,a,t+r*s)}))}}))}function L(t,e){y(t),m(t,e,(t=>{const{x:o,y:i,w:n,h:r,desc:s}=e,{bgColor:a="#000000",borderColor:h="#000000",borderWidth:u=0}=s,c=n/2,l=r/2,d=o+c,f=i+l;if(u&&u>0){const e=u/2+c,o=u/2+l;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(u),t.ellipse(d,f,e,o,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(d,f,c,l,0,0,2*Math.PI),t.closePath(),t.fill()}))}function D(e,o,i){var n;y(e);const r=e.getSize();if(e.clearRect(0,0,r.contextWidth,r.contextHeight),"string"==typeof o.bgColor&&t(o.bgColor)&&function(t,e){const o=t.getSize();t.setFillStyle(e),t.fillRect(0,0,o.contextWidth,o.contextHeight)}(e,o.bgColor),o.elements.length>0)for(let t=0;t<o.elements.length;t++){const r=o.elements[t];if(!0!==(null==(n=null==r?void 0:r.operation)?void 0:n.invisible))switch(r.type){case"rect":w(e,r);break;case"text":z(e,r);break;case"image":S(e,r,i);break;case"svg":v(e,r,i);break;case"html":b(e,r,i);break;case"circle":L(e,r)}}}class k{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const o=this._listeners.get(t);null==o||o.push(e),this._listeners.set(t,o||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const o=this._listeners.get(t);if(Array.isArray(o))for(let t=0;t<(null==o?void 0:o.length);t++)if(o[t]===e){o.splice(t,1);break}this._listeners.set(t,o||[])}}trigger(t,e){const o=this._listeners.get(t);return!!Array.isArray(o)&&(o.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}class P{constructor(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status="free",this._waitingLoadQueue=[],this._opts=t,this._event=new k,this._waitingLoadQueue=[]}load(t,e){const[o,i]=this._resetLoadData(t,e);"free"===this._status||"complete"===this._status?(this._currentUUIDQueue=o,this._currentLoadData=i,this._loadTask()):"loading"===this._status&&o.length>0&&this._waitingLoadQueue.push({uuidQueue:o,loadData:i})}on(t,e){this._event.on(t,e)}off(t,e){this._event.off(t,e)}isComplete(){return"complete"===this._status}getContent(t){var e;return"loaded"===(null==(e=this._storageLoadData[t])?void 0:e.status)?this._storageLoadData[t].content:null}_resetLoadData(t,e){const o={},i=[],n=this._storageLoadData;for(let r=t.elements.length-1;r>=0;r--){const s=t.elements[r];["image","svg","html"].includes(s.type)&&(n[s.uuid]?e.includes(s.uuid)&&(o[s.uuid]=this._createEmptyLoadItem(s),i.push(s.uuid)):(o[s.uuid]=this._createEmptyLoadItem(s),i.push(s.uuid)))}return[i,o]}_createEmptyLoadItem(t){let o="";const i=t.type;let n=t.w,r=t.h;if("image"===t.type){o=t.desc.src||""}else if("svg"===t.type){o=t.desc.svg||""}else if("html"===t.type){const e=t;o=(e.desc.html||"").replace(/<script[\s\S]*?<\/script>/gi,""),n=e.desc.width||t.w,r=e.desc.height||t.h}return{uuid:t.uuid,type:i,status:"null",content:null,source:o,elemW:n,elemH:r,element:e(t)}}_loadTask(){if("loading"===this._status)return;if(this._status="loading",0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status="complete",void this._event.trigger("complete",void 0);{const t=this._waitingLoadQueue.shift();if(t){const{uuidQueue:e,loadData:o}=t;this._currentLoadData=o,this._currentUUIDQueue=e}}}const{maxParallelNum:t}=this._opts,e=this._currentUUIDQueue.splice(0,t);e.forEach(((t,e)=>{}));const o=[],i=()=>{if(o.length>=t)return!1;if(0===e.length)return!0;for(let n=o.length;n<t;n++){const t=e.shift();if(void 0===t)break;o.push(t),this._loadElementSource(this._currentLoadData[t]).then((n=>{var r,s;o.splice(o.indexOf(t),1);const a=i();this._storageLoadData[t]={uuid:t,type:this._currentLoadData[t].type,status:"loaded",content:n,source:this._currentLoadData[t].source,elemW:this._currentLoadData[t].elemW,elemH:this._currentLoadData[t].elemH,element:this._currentLoadData[t].element},0===o.length&&0===e.length&&!0===a&&(this._status="free",this._loadTask()),this._event.trigger("load",{uuid:null==(r=this._storageLoadData[t])?void 0:r.uuid,type:this._storageLoadData[t].type,status:this._storageLoadData[t].status,content:this._storageLoadData[t].content,source:this._storageLoadData[t].source,elemW:this._storageLoadData[t].elemW,elemH:this._storageLoadData[t].elemH,element:null==(s=this._storageLoadData[t])?void 0:s.element})})).catch((n=>{var r,s,a,h,u,c,l,d,f,_,p,g;console.warn(n),o.splice(o.indexOf(t),1);const m=i();this._currentLoadData[t]&&(this._storageLoadData[t]={uuid:t,type:null==(r=this._currentLoadData[t])?void 0:r.type,status:"fail",content:null,error:n,source:null==(s=this._currentLoadData[t])?void 0:s.source,elemW:null==(a=this._currentLoadData[t])?void 0:a.elemW,elemH:null==(h=this._currentLoadData[t])?void 0:h.elemH,element:null==(u=this._currentLoadData[t])?void 0:u.element}),0===o.length&&0===e.length&&!0===m&&(this._status="free",this._loadTask()),this._currentLoadData[t]&&this._event.trigger("error",{uuid:t,type:null==(c=this._storageLoadData[t])?void 0:c.type,status:null==(l=this._storageLoadData[t])?void 0:l.status,content:null==(d=this._storageLoadData[t])?void 0:d.content,source:null==(f=this._storageLoadData[t])?void 0:f.source,elemW:null==(_=this._storageLoadData[t])?void 0:_.elemW,elemH:null==(p=this._storageLoadData[t])?void 0:p.elemH,element:null==(g=this._storageLoadData[t])?void 0:g.element})}))}return!1};i()}async _loadElementSource(t){if(t&&"image"===t.type){return await c(t.source)}if(t&&"svg"===t.type){return await function(t){return r(this,void 0,void 0,(function(){return s(this,(function(e){switch(e.label){case 0:return[4,h(t)];case 1:return[4,c(e.sent())];case 2:return[2,e.sent()]}}))}))}(t.source)}if(t&&"html"===t.type){return await function(t,e){return r(this,void 0,void 0,(function(){return s(this,(function(o){switch(o.label){case 0:return[4,a(t,e)];case 1:return[4,c(o.sent())];case 2:return[2,o.sent()]}}))}))}(t.source,{width:t.elemW,height:t.elemH})}throw Error("Element's source is not support!")}}class T{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const o=this._listeners.get(t);null==o||o.push(e),this._listeners.set(t,o||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const o=this._listeners.get(t);if(Array.isArray(o))for(let t=0;t<(null==o?void 0:o.length);t++)if(o[t]===e){o.splice(t,1);break}this._listeners.set(t,o||[])}}trigger(t,e){const o=this._listeners.get(t);return!!Array.isArray(o)&&(o.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}const{requestAnimationFrame:C}=window;return class extends T{constructor(t){super(),this._queue=[],this._ctx=null,this._status="null",this._opts=t,this._loader=new P({maxParallelNum:6}),this._loader.on("load",(t=>{this._drawFrame(),this.trigger("load",{element:t.element})})),this._loader.on("error",(t=>{this.trigger("error",{element:t.element,error:t.error})})),this._loader.on("complete",(()=>{this.trigger("loadComplete",{t:Date.now()})}))}render(t,o,i){const{changeResourceUUIDs:n=[]}=i||{};this._status="free";const r=e(o);if(Array.isArray(r.elements)&&r.elements.forEach((t=>{"string"==typeof t.uuid&&t.uuid||(t.uuid=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return"".concat(t()).concat(t(),"-").concat(t(),"-").concat(t(),"-").concat(t(),"-").concat(t()).concat(t()).concat(t())}())})),!this._ctx)if(this._opts&&"[object HTMLCanvasElement]"===Object.prototype.toString.call(t)){const{width:e,height:o,contextWidth:i,contextHeight:n,devicePixelRatio:r}=this._opts,s=t;s.width=e*r,s.height=o*r;const a=s.getContext("2d");this._ctx=new l(a,{width:e,height:o,contextWidth:i||e,contextHeight:n||o,devicePixelRatio:r})}else t&&(this._ctx=t);if(["freeze"].includes(this._status))return;const s=e({data:r});this._queue.push(s),this._drawFrame(),this._loader.load(r,n||[])}getContext(){return this._ctx}thaw(){this._status="free"}_freeze(){this._status="freeze"}_drawFrame(){"freeze"!==this._status&&C((()=>{if("freeze"===this._status)return;const t=this._ctx;let e=this._queue[0],o=!1;this._queue.length>1?e=this._queue.shift():o=!0,!0!==this._loader.isComplete()?(this._drawFrame(),e&&t&&D(t,e.data,this._loader)):e&&t?(D(t,e.data,this._loader),this._retainQueueOneItem(),o?this._status="free":this._drawFrame()):this._status="free",this.trigger("drawFrame",{t:Date.now()}),!0===this._loader.isComplete()&&1===this._queue.length&&"free"===this._status&&(t&&this._queue[0]&&this._queue[0].data&&D(t,this._queue[0].data,this._loader),this.trigger("drawFrameComplete",{t:Date.now()}),this._freeze())}))}_retainQueueOneItem(){if(this._queue.length<=1)return;const t=e(this._queue[this._queue.length-1]);this._queue=[t]}}}();
1
+ var iDrawRenderer=function(){"use strict";function t(t){return"string"==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function e(t){return function t(e){const s=(i=e,Object.prototype.toString.call(i).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]);var i;if(["Null","Number","String","Boolean","Undefined"].indexOf(s)>=0)return e;if("Array"===s){const s=[];return e.forEach((e=>{s.push(t(e))})),s}if("Object"===s){const s={};return Object.keys(e).forEach((i=>{s[i]=t(e[i])})),s}}(t)}function s(t){return(Object.prototype.toString.call(t)||"").replace(/(\[object|\])/gi,"").trim()}const i={type(t,e){const i=s(t);return!0===e?i.toLocaleLowerCase():i},array:t=>"Array"===s(t),json:t=>"Object"===s(t),function:t=>"Function"===s(t),asyncFunction:t=>"AsyncFunction"===s(t),string:t=>"String"===s(t),number:t=>"Number"===s(t),undefined:t=>"Undefined"===s(t),null:t=>"Null"===s(t),promise:t=>"Promise"===s(t)};var o=globalThis&&globalThis.__awaiter||function(t,e,s,i){return new(s||(s=Promise))((function(o,r){function n(t){try{h(i.next(t))}catch(t){r(t)}}function a(t){try{h(i.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(n,a)}h((i=i.apply(t,e||[])).next())}))};const{Image:r}=window;function n(t){return new Promise(((e,s)=>{const i=new r;i.crossOrigin="anonymous",i.onload=function(){e(i)},i.onabort=s,i.onerror=s,i.src=t}))}function a(t){return o(this,void 0,void 0,(function*(){const e=yield function(t){return new Promise(((e,s)=>{const i=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(i),o.onload=function(t){var s;const i=null===(s=null==t?void 0:t.target)||void 0===s?void 0:s.result;e(i)},o.onerror=function(t){s(t)}}))}(t);return yield n(e)}))}function h(t,e){return o(this,void 0,void 0,(function*(){t=t.replace(/\&/gi,"&amp;");const s=yield function(t,e){const{width:s,height:i}=e;return new Promise(((e,o)=>{const r=new Blob([`\n <svg xmlns="http://www.w3.org/2000/svg" width="${s||""}" height = "${i||""}">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ${t}\n </div>\n </foreignObject>\n </svg>\n `],{type:"image/svg+xml;charset=utf-8"}),n=new FileReader;n.readAsDataURL(r),n.onload=function(t){var s;const i=null===(s=null==t?void 0:t.target)||void 0===s?void 0:s.result;e(i)},n.onerror=function(t){o(t)}}))}(t,e);return yield n(s)}))}class l{constructor(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}getContext(){return this._ctx}resetSize(t){this._opts=Object.assign(Object.assign({},this._opts),t)}calcDeviceNum(t){return t*this._opts.devicePixelRatio}calcScreenNum(t){return t/this._opts.devicePixelRatio}getSize(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}}setTransform(t){this._transform=Object.assign(Object.assign({},this._transform),t)}getTransform(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}}setFillStyle(t){this._ctx.fillStyle=t}fill(t){return this._ctx.fill(t||"nonzero")}arc(t,e,s,i,o,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(s),i,o,r)}rect(t,e,s,i){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i))}fillRect(t,e,s,i){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i))}clearRect(t,e,s,i){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i))}beginPath(){return this._ctx.beginPath()}closePath(){return this._ctx.closePath()}lineTo(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))}moveTo(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))}arcTo(t,e,s,i,o){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i),this._doSize(o))}setLineWidth(t){return this._ctx.lineWidth=this._doSize(t)}setLineDash(t){return this._ctx.setLineDash(t.map((t=>this._doSize(t))))}isPointInPath(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))}isPointInPathWithoutScroll(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))}setStrokeStyle(t){this._ctx.strokeStyle=t}stroke(){return this._ctx.stroke()}translate(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))}rotate(t){return this._ctx.rotate(t)}drawImage(...t){const e=t[0],s=t[1],i=t[2],o=t[3],r=t[4],n=t[t.length-4],a=t[t.length-3],h=t[t.length-2],l=t[t.length-1];return 9===t.length?this._ctx.drawImage(e,this._doSize(s),this._doSize(i),this._doSize(o),this._doSize(r),this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l)):this._ctx.drawImage(e,this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l))}createPattern(t,e){return this._ctx.createPattern(t,e)}measureText(t){return this._ctx.measureText(t)}setTextAlign(t){this._ctx.textAlign=t}fillText(t,e,s,i){return void 0!==i?this._ctx.fillText(t,this._doSize(e),this._doSize(s),this._doSize(i)):this._ctx.fillText(t,this._doSize(e),this._doSize(s))}strokeText(t,e,s,i){return void 0!==i?this._ctx.strokeText(t,this._doSize(e),this._doSize(s),this._doSize(i)):this._ctx.strokeText(t,this._doSize(e),this._doSize(s))}setFont(t){const e=[];"bold"===t.fontWeight&&e.push(`${t.fontWeight}`),e.push(`${this._doSize(t.fontSize||12)}px`),e.push(`${t.fontFamily||"sans-serif"}`),this._ctx.font=`${e.join(" ")}`}setTextBaseline(t){this._ctx.textBaseline=t}setGlobalAlpha(t){this._ctx.globalAlpha=t}save(){this._ctx.save()}restore(){this._ctx.restore()}scale(t,e){this._ctx.scale(t,e)}setShadowColor(t){this._ctx.shadowColor=t}setShadowOffsetX(t){this._ctx.shadowOffsetX=this._doSize(t)}setShadowOffsetY(t){this._ctx.shadowOffsetY=this._doSize(t)}setShadowBlur(t){this._ctx.shadowBlur=this._doSize(t)}ellipse(t,e,s,i,o,r,n,a){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(s),this._doSize(i),o,r,n,a)}_doSize(t){return this._opts.devicePixelRatio*t}_doX(t){const{scale:e,scrollX:s}=this._transform,i=(t-s)/e;return this._doSize(i)}_doY(t){const{scale:e,scrollY:s}=this._transform,i=(t-s)/e;return this._doSize(i)}}function u(t){return"number"==typeof t&&(t>0||t<=0)}function c(t){return"number"==typeof t&&t>=0}function d(t){return"string"==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${t}`)}function _(t){return"string"==typeof t&&/^(data:image\/)/.test(`${t}`)}const f={x:function(t){return u(t)},y:function(t){return u(t)},w:c,h:function(t){return"number"==typeof t&&t>=0},angle:function(t){return"number"==typeof t&&t>=-360&&t<=360},number:u,borderWidth:function(t){return c(t)},borderRadius:function(t){return u(t)&&t>=0},color:function(e){return t(e)},imageSrc:function(t){return _(t)||d(t)},imageURL:d,imageBase64:_,svg:function(t){return"string"==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test(`${t}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${t}`.trim())},html:function(t){let e=!1;if("string"==typeof t){let s=document.createElement("div");s.innerHTML=t,s.children.length>0&&(e=!0),s=null}return e},text:function(t){return"string"==typeof t},fontSize:function(t){return u(t)&&t>0},lineHeight:function(t){return u(t)&&t>0},textAlign:function(t){return["center","left","right"].includes(t)},fontFamily:function(t){return"string"==typeof t&&t.length>0},fontWeight:function(t){return["bold"].includes(t)},strokeWidth:function(t){return u(t)&&t>0}};function g(t,e,s){const i=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e);return function(t,e,s,i){e&&(s>0||s<0)&&(t.translate(e.x,e.y),t.rotate(s),t.translate(-e.x,-e.y));i(t),e&&(s>0||s<0)&&(t.translate(e.x,e.y),t.rotate(-s),t.translate(-e.x,-e.y))}(t,i,(e.angle||0)/180*Math.PI||0,s)}function m(t){t.setFillStyle("#000000"),t.setStrokeStyle("#000000"),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor("#00000000"),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function x(e,s,o){m(e),function(e,s){m(e),g(e,s,(()=>{if(!(s.desc.borderWidth&&s.desc.borderWidth>0))return;const i=s.desc.borderWidth;let o="#000000";!0===t(s.desc.borderColor)&&(o=s.desc.borderColor);const r=s.x-i/2,n=s.y-i/2,a=s.w+i,h=s.h+i;let l=s.desc.borderRadius||0;l=Math.min(l,a/2,h/2),l<a/2&&l<h/2&&(l+=i/2);const{desc:u}=s;void 0!==u.shadowColor&&t(u.shadowColor)&&e.setShadowColor(u.shadowColor),void 0!==u.shadowOffsetX&&f.number(u.shadowOffsetX)&&e.setShadowOffsetX(u.shadowOffsetX),void 0!==u.shadowOffsetY&&f.number(u.shadowOffsetY)&&e.setShadowOffsetY(u.shadowOffsetY),void 0!==u.shadowBlur&&f.number(u.shadowBlur)&&e.setShadowBlur(u.shadowBlur),e.beginPath(),e.setLineWidth(i),e.setStrokeStyle(o),e.moveTo(r+l,n),e.arcTo(r+a,n,r+a,n+h,l),e.arcTo(r+a,n+h,r,n+h,l),e.arcTo(r,n+h,r,n,l),e.arcTo(r,n,r+a,n,l),e.closePath(),e.stroke()}))}(e,s),m(e),g(e,s,(()=>{const{x:t,y:r,w:n,h:a}=s;let h=s.desc.borderRadius||0;h=Math.min(h,n/2,a/2),(n<2*h||a<2*h)&&(h=0),e.beginPath(),e.moveTo(t+h,r),e.arcTo(t+n,r,t+n,r+a,h),e.arcTo(t+n,r+a,t,r+a,h),e.arcTo(t,r+a,t,r,h),e.arcTo(t,r,t+n,r,h),e.closePath(),("string"==typeof o||["CanvasPattern"].includes(i.type(o)))&&e.setFillStyle(o),e.fill()}))}function w(t,e){x(t,e,e.desc.bgColor)}function S(t,e,s){const i=s.getContent(e.uuid);g(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function p(t,e,s){const i=s.getContent(e.uuid);g(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function y(t,e,s){const i=s.getContent(e.uuid);g(t,e,(()=>{i&&t.drawImage(i,e.x,e.y,e.w,e.h)}))}function v(e,s,i){m(e),x(e,s,s.desc.bgColor||"transparent"),g(e,s,(()=>{const i={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...s.desc};e.setFillStyle(s.desc.color),e.setTextBaseline("top"),e.setFont({fontWeight:i.fontWeight,fontSize:i.fontSize,fontFamily:i.fontFamily});const o=i.text.replace(/\r\n/gi,"\n"),r=i.lineHeight||i.fontSize,n=o.split("\n"),a=[];let h=0;n.forEach(((t,i)=>{let o="";if(t.length>0){for(let l=0;l<t.length&&(e.measureText(o+(t[l]||"")).width<e.calcDeviceNum(s.w)?o+=t[l]||"":(a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),o=t[l]||"",h++),!((h+1)*r>s.h));l++)if(t.length-1===l&&(h+1)*r<s.h){a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),i<n.length-1&&h++;break}}else a.push({text:"",width:0})}));let l=0;a.length*r<s.h&&("top"===s.desc.verticalAlign?l=0:"bottom"===s.desc.verticalAlign?l+=s.h-a.length*r:l+=(s.h-a.length*r)/2);{const o=s.y+l;void 0!==i.textShadowColor&&t(i.textShadowColor)&&e.setShadowColor(i.textShadowColor),void 0!==i.textShadowOffsetX&&f.number(i.textShadowOffsetX)&&e.setShadowOffsetX(i.textShadowOffsetX),void 0!==i.textShadowOffsetY&&f.number(i.textShadowOffsetY)&&e.setShadowOffsetY(i.textShadowOffsetY),void 0!==i.textShadowBlur&&f.number(i.textShadowBlur)&&e.setShadowBlur(i.textShadowBlur),a.forEach(((t,n)=>{let a=s.x;"center"===i.textAlign?a=s.x+(s.w-t.width)/2:"right"===i.textAlign&&(a=s.x+(s.w-t.width)),e.fillText(t.text,a,o+r*n)})),m(e)}if(t(i.strokeColor)&&void 0!==i.strokeWidth&&i.strokeWidth>0){const t=s.y+l;a.forEach(((o,n)=>{let a=s.x;"center"===i.textAlign?a=s.x+(s.w-o.width)/2:"right"===i.textAlign&&(a=s.x+(s.w-o.width)),void 0!==i.strokeColor&&e.setStrokeStyle(i.strokeColor),void 0!==i.strokeWidth&&i.strokeWidth>0&&e.setLineWidth(i.strokeWidth),e.strokeText(o.text,a,t+r*n)}))}}))}function z(t,e){m(t),g(t,e,(t=>{const{x:s,y:i,w:o,h:r,desc:n}=e,{bgColor:a="#000000",borderColor:h="#000000",borderWidth:l=0}=n,u=o/2,c=r/2,d=s+u,_=i+c;if(l&&l>0){const e=l/2+u,s=l/2+c;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(l),t.ellipse(d,_,e,s,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(d,_,u,c,0,0,2*Math.PI),t.closePath(),t.fill()}))}function b(e,s,i){var o;m(e);const r=e.getSize();if(e.clearRect(0,0,r.contextWidth,r.contextHeight),"string"==typeof s.bgColor&&t(s.bgColor)&&function(t,e){const s=t.getSize();t.setFillStyle(e),t.fillRect(0,0,s.contextWidth,s.contextHeight)}(e,s.bgColor),s.elements.length>0)for(let t=0;t<s.elements.length;t++){const r=s.elements[t];if(!0!==(null==(o=null==r?void 0:r.operation)?void 0:o.invisible))switch(r.type){case"rect":w(e,r);break;case"text":v(e,r);break;case"image":S(e,r,i);break;case"svg":p(e,r,i);break;case"html":y(e,r,i);break;case"circle":z(e,r)}}}class L{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);null==s||s.push(e),this._listeners.set(t,s||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);if(Array.isArray(s))for(let t=0;t<(null==s?void 0:s.length);t++)if(s[t]===e){s.splice(t,1);break}this._listeners.set(t,s||[])}}trigger(t,e){const s=this._listeners.get(t);return!!Array.isArray(s)&&(s.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}class D{constructor(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status="free",this._waitingLoadQueue=[],this._opts=t,this._event=new L,this._waitingLoadQueue=[]}load(t,e){const[s,i]=this._resetLoadData(t,e);"free"===this._status||"complete"===this._status?(this._currentUUIDQueue=s,this._currentLoadData=i,this._loadTask()):"loading"===this._status&&s.length>0&&this._waitingLoadQueue.push({uuidQueue:s,loadData:i})}on(t,e){this._event.on(t,e)}off(t,e){this._event.off(t,e)}isComplete(){return"complete"===this._status}getContent(t){var e;return"loaded"===(null==(e=this._storageLoadData[t])?void 0:e.status)?this._storageLoadData[t].content:null}_resetLoadData(t,e){const s={},i=[],o=this._storageLoadData;for(let r=t.elements.length-1;r>=0;r--){const n=t.elements[r];["image","svg","html"].includes(n.type)&&(o[n.uuid]?e.includes(n.uuid)&&(s[n.uuid]=this._createEmptyLoadItem(n),i.push(n.uuid)):(s[n.uuid]=this._createEmptyLoadItem(n),i.push(n.uuid)))}return[i,s]}_createEmptyLoadItem(t){let s="";const i=t.type;let o=t.w,r=t.h;if("image"===t.type){s=t.desc.src||""}else if("svg"===t.type){s=t.desc.svg||""}else if("html"===t.type){const e=t;s=(e.desc.html||"").replace(/<script[\s\S]*?<\/script>/gi,""),o=e.desc.width||t.w,r=e.desc.height||t.h}return{uuid:t.uuid,type:i,status:"null",content:null,source:s,elemW:o,elemH:r,element:e(t)}}_loadTask(){if("loading"===this._status)return;if(this._status="loading",0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status="complete",void this._event.trigger("complete",void 0);{const t=this._waitingLoadQueue.shift();if(t){const{uuidQueue:e,loadData:s}=t;this._currentLoadData=s,this._currentUUIDQueue=e}}}const{maxParallelNum:t}=this._opts,e=this._currentUUIDQueue.splice(0,t);e.forEach(((t,e)=>{}));const s=[],i=()=>{if(s.length>=t)return!1;if(0===e.length)return!0;for(let o=s.length;o<t;o++){const t=e.shift();if(void 0===t)break;s.push(t),this._loadElementSource(this._currentLoadData[t]).then((o=>{var r,n;s.splice(s.indexOf(t),1);const a=i();this._storageLoadData[t]={uuid:t,type:this._currentLoadData[t].type,status:"loaded",content:o,source:this._currentLoadData[t].source,elemW:this._currentLoadData[t].elemW,elemH:this._currentLoadData[t].elemH,element:this._currentLoadData[t].element},0===s.length&&0===e.length&&!0===a&&(this._status="free",this._loadTask()),this._event.trigger("load",{uuid:null==(r=this._storageLoadData[t])?void 0:r.uuid,type:this._storageLoadData[t].type,status:this._storageLoadData[t].status,content:this._storageLoadData[t].content,source:this._storageLoadData[t].source,elemW:this._storageLoadData[t].elemW,elemH:this._storageLoadData[t].elemH,element:null==(n=this._storageLoadData[t])?void 0:n.element})})).catch((o=>{var r,n,a,h,l,u,c,d,_,f,g,m;console.warn(o),s.splice(s.indexOf(t),1);const x=i();this._currentLoadData[t]&&(this._storageLoadData[t]={uuid:t,type:null==(r=this._currentLoadData[t])?void 0:r.type,status:"fail",content:null,error:o,source:null==(n=this._currentLoadData[t])?void 0:n.source,elemW:null==(a=this._currentLoadData[t])?void 0:a.elemW,elemH:null==(h=this._currentLoadData[t])?void 0:h.elemH,element:null==(l=this._currentLoadData[t])?void 0:l.element}),0===s.length&&0===e.length&&!0===x&&(this._status="free",this._loadTask()),this._currentLoadData[t]&&this._event.trigger("error",{uuid:t,type:null==(u=this._storageLoadData[t])?void 0:u.type,status:null==(c=this._storageLoadData[t])?void 0:c.status,content:null==(d=this._storageLoadData[t])?void 0:d.content,source:null==(_=this._storageLoadData[t])?void 0:_.source,elemW:null==(f=this._storageLoadData[t])?void 0:f.elemW,elemH:null==(g=this._storageLoadData[t])?void 0:g.elemH,element:null==(m=this._storageLoadData[t])?void 0:m.element})}))}return!1};i()}async _loadElementSource(t){if(t&&"image"===t.type){return await n(t.source)}if(t&&"svg"===t.type){return await a(t.source)}if(t&&"html"===t.type){return await h(t.source,{width:t.elemW,height:t.elemH})}throw Error("Element's source is not support!")}}class T{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);null==s||s.push(e),this._listeners.set(t,s||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const s=this._listeners.get(t);if(Array.isArray(s))for(let t=0;t<(null==s?void 0:s.length);t++)if(s[t]===e){s.splice(t,1);break}this._listeners.set(t,s||[])}}trigger(t,e){const s=this._listeners.get(t);return!!Array.isArray(s)&&(s.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}const{requestAnimationFrame:O}=window;return class extends T{constructor(t){super(),this._queue=[],this._ctx=null,this._status="null",this._opts=t,this._loader=new D({maxParallelNum:6}),this._loader.on("load",(t=>{this._drawFrame(),this.trigger("load",{element:t.element})})),this._loader.on("error",(t=>{this.trigger("error",{element:t.element,error:t.error})})),this._loader.on("complete",(()=>{this.trigger("loadComplete",{t:Date.now()})}))}render(t,s,i){const{changeResourceUUIDs:o=[]}=i||{};this._status="free";const r=e(s);if(Array.isArray(r.elements)&&r.elements.forEach((t=>{"string"==typeof t.uuid&&t.uuid||(t.uuid=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${t()}${t()}-${t()}-${t()}-${t()}-${t()}${t()}${t()}`}())})),!this._ctx)if(this._opts&&"[object HTMLCanvasElement]"===Object.prototype.toString.call(t)){const{width:e,height:s,contextWidth:i,contextHeight:o,devicePixelRatio:r}=this._opts,n=t;n.width=e*r,n.height=s*r;const a=n.getContext("2d");this._ctx=new l(a,{width:e,height:s,contextWidth:i||e,contextHeight:o||s,devicePixelRatio:r})}else t&&(this._ctx=t);if(["freeze"].includes(this._status))return;const n=e({data:r});this._queue.push(n),this._drawFrame(),this._loader.load(r,o||[])}getContext(){return this._ctx}thaw(){this._status="free"}_freeze(){this._status="freeze"}_drawFrame(){"freeze"!==this._status&&O((()=>{if("freeze"===this._status)return;const t=this._ctx;let e=this._queue[0],s=!1;this._queue.length>1?e=this._queue.shift():s=!0,!0!==this._loader.isComplete()?(this._drawFrame(),e&&t&&b(t,e.data,this._loader)):e&&t?(b(t,e.data,this._loader),this._retainQueueOneItem(),s?this._status="free":this._drawFrame()):this._status="free",this.trigger("drawFrame",{t:Date.now()}),!0===this._loader.isComplete()&&1===this._queue.length&&"free"===this._status&&(t&&this._queue[0]&&this._queue[0].data&&b(t,this._queue[0].data,this._loader),this.trigger("drawFrameComplete",{t:Date.now()}),this._freeze())}))}_retainQueueOneItem(){if(this._queue.length<=1)return;const t=e(this._queue[this._queue.length-1]);this._queue=[t]}}}();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idraw/renderer",
3
- "version": "0.3.0-beta.6",
3
+ "version": "0.3.0-beta.7",
4
4
  "description": "",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -21,13 +21,13 @@
21
21
  "author": "chenshenhai",
22
22
  "license": "MIT",
23
23
  "devDependencies": {
24
- "@idraw/types": "^0.3.0-beta.6"
24
+ "@idraw/types": "^0.3.0-beta.7"
25
25
  },
26
26
  "dependencies": {
27
- "@idraw/util": "^0.3.0-beta.6"
27
+ "@idraw/util": "^0.3.0-beta.7"
28
28
  },
29
29
  "publishConfig": {
30
30
  "access": "public"
31
31
  },
32
- "gitHead": "afbadcfac219cd8e1897a080385b730374c980ea"
32
+ "gitHead": "2be8fc67cf7ffb642e839d52a9caf9c62b41178d"
33
33
  }