@idraw/core 0.2.0-alpha.21 → 0.2.0-alpha.25

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 (6) hide show
  1. package/dist/index.cjs.js +771 -1541
  2. package/dist/index.d.ts +2 -10
  3. package/dist/index.es.js +771 -1541
  4. package/dist/index.global.js +771 -1541
  5. package/dist/index.global.min.js +1 -1
  6. package/package.json +6 -6
package/dist/index.cjs.js CHANGED
@@ -1,18 +1,5 @@
1
1
  'use strict';
2
2
 
3
- var extendStatics$1 = function(d, b) {
4
- extendStatics$1 = Object.setPrototypeOf ||
5
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
7
- return extendStatics$1(d, b);
8
- };
9
- function __extends$1(d, b) {
10
- if (typeof b !== "function" && b !== null)
11
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
12
- extendStatics$1(d, b);
13
- function __() { this.constructor = d; }
14
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
15
- }
16
3
  var __assign$4 = function() {
17
4
  __assign$4 = Object.assign || function __assign(t) {
18
5
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23,42 +10,6 @@ var __assign$4 = function() {
23
10
  };
24
11
  return __assign$4.apply(this, arguments);
25
12
  };
26
- function __awaiter$4(thisArg, _arguments, P, generator) {
27
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
28
- return new (P || (P = Promise))(function (resolve, reject) {
29
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
30
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
31
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
32
- step((generator = generator.apply(thisArg, _arguments || [])).next());
33
- });
34
- }
35
- function __generator$4(thisArg, body) {
36
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
37
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
38
- function verb(n) { return function (v) { return step([n, v]); }; }
39
- function step(op) {
40
- if (f) throw new TypeError("Generator is already executing.");
41
- while (_) try {
42
- 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;
43
- if (y = 0, t) op = [op[0] & 2, t.value];
44
- switch (op[0]) {
45
- case 0: case 1: t = op; break;
46
- case 4: _.label++; return { value: op[1], done: false };
47
- case 5: _.label++; y = op[1]; op = [0]; continue;
48
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
49
- default:
50
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
51
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
52
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
53
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
54
- if (t[2]) _.ops.pop();
55
- _.trys.pop(); continue;
56
- }
57
- op = body.call(thisArg, _);
58
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
59
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
60
- }
61
- }
62
13
 
63
14
  var __assign$1$1 = function() {
64
15
  __assign$1$1 = Object.assign || function __assign(t) {
@@ -135,9 +86,9 @@ function createUUID$4() {
135
86
  function str4() {
136
87
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
137
88
  }
138
- return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
89
+ return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
139
90
  }
140
- function deepClone$7(target) {
91
+ function deepClone$6(target) {
141
92
  function _clone(t) {
142
93
  var type = is$1$3(t);
143
94
  if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
@@ -169,7 +120,7 @@ function parsePrototype$2(data) {
169
120
  var result = typeStr.replace(/(\[object|\])/ig, '').trim();
170
121
  return result;
171
122
  }
172
- var istype$4 = {
123
+ var istype$3 = {
173
124
  type: function (data, lowerCase) {
174
125
  var result = parsePrototype$2(data);
175
126
  return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -251,7 +202,7 @@ function __generator$3(thisArg, body) {
251
202
  function parseHTMLToDataURL$2(html, opts) {
252
203
  var width = opts.width, height = opts.height;
253
204
  return new Promise(function (resolve, reject) {
254
- var _svg = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n " + html + "\n </div>\n </foreignObject>\n </svg>\n ";
205
+ 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(html, "\n </div>\n </foreignObject>\n </svg>\n ");
255
206
  var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
256
207
  var reader = new FileReader();
257
208
  reader.readAsDataURL(blob);
@@ -282,7 +233,7 @@ function parseSVGToDataURL$2(svg) {
282
233
  });
283
234
  }
284
235
  var Image$2 = window.Image;
285
- function loadImage$4(src) {
236
+ function loadImage$3(src) {
286
237
  return new Promise(function (resolve, reject) {
287
238
  var img = new Image$2;
288
239
  img.onload = function () {
@@ -293,7 +244,7 @@ function loadImage$4(src) {
293
244
  img.src = src;
294
245
  });
295
246
  }
296
- function loadSVG$4(svg) {
247
+ function loadSVG$3(svg) {
297
248
  return __awaiter$3(this, void 0, void 0, function () {
298
249
  var dataURL, image;
299
250
  return __generator$3(this, function (_a) {
@@ -301,7 +252,7 @@ function loadSVG$4(svg) {
301
252
  case 0: return [4, parseSVGToDataURL$2(svg)];
302
253
  case 1:
303
254
  dataURL = _a.sent();
304
- return [4, loadImage$4(dataURL)];
255
+ return [4, loadImage$3(dataURL)];
305
256
  case 2:
306
257
  image = _a.sent();
307
258
  return [2, image];
@@ -309,7 +260,7 @@ function loadSVG$4(svg) {
309
260
  });
310
261
  });
311
262
  }
312
- function loadHTML$4(html, opts) {
263
+ function loadHTML$3(html, opts) {
313
264
  return __awaiter$3(this, void 0, void 0, function () {
314
265
  var dataURL, image;
315
266
  return __generator$3(this, function (_a) {
@@ -317,7 +268,7 @@ function loadHTML$4(html, opts) {
317
268
  case 0: return [4, parseHTMLToDataURL$2(html, opts)];
318
269
  case 1:
319
270
  dataURL = _a.sent();
320
- return [4, loadImage$4(dataURL)];
271
+ return [4, loadImage$3(dataURL)];
321
272
  case 2:
322
273
  image = _a.sent();
323
274
  return [2, image];
@@ -325,7 +276,7 @@ function loadHTML$4(html, opts) {
325
276
  });
326
277
  });
327
278
  }
328
- var Context$2$1 = (function () {
279
+ var Context$1$1 = (function () {
329
280
  function Context(ctx, opts) {
330
281
  this._opts = opts;
331
282
  this._ctx = ctx;
@@ -473,11 +424,11 @@ var Context$2$1 = (function () {
473
424
  Context.prototype.setFont = function (opts) {
474
425
  var strList = [];
475
426
  if (opts.fontWeight === 'bold') {
476
- strList.push("" + opts.fontWeight);
427
+ strList.push("".concat(opts.fontWeight));
477
428
  }
478
- strList.push(this._doSize(opts.fontSize || 12) + "px");
479
- strList.push("" + (opts.fontFamily || 'sans-serif'));
480
- this._ctx.font = "" + strList.join(' ');
429
+ strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
430
+ strList.push("".concat(opts.fontFamily || 'sans-serif'));
431
+ this._ctx.font = "".concat(strList.join(' '));
481
432
  };
482
433
  Context.prototype.setTextBaseline = function (baseline) {
483
434
  this._ctx.textBaseline = baseline;
@@ -552,16 +503,16 @@ function color$5(value) {
552
503
  return isColorStr$4(value);
553
504
  }
554
505
  function imageURL$3(value) {
555
- return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
506
+ return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
556
507
  }
557
508
  function imageBase64$3(value) {
558
- return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
509
+ return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
559
510
  }
560
511
  function imageSrc$3(value) {
561
512
  return (imageBase64$3(value) || imageURL$3(value));
562
513
  }
563
514
  function svg$3(value) {
564
- return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
515
+ return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
565
516
  }
566
517
  function html$3(value) {
567
518
  var result = false;
@@ -742,9 +693,9 @@ var index$2 = {
742
693
  throttle: throttle$1$1,
743
694
  },
744
695
  loader: {
745
- loadImage: loadImage$4,
746
- loadSVG: loadSVG$4,
747
- loadHTML: loadHTML$4,
696
+ loadImage: loadImage$3,
697
+ loadSVG: loadSVG$3,
698
+ loadHTML: loadHTML$3,
748
699
  },
749
700
  file: {
750
701
  downloadImageFromCanvas: downloadImageFromCanvas$2,
@@ -757,11 +708,11 @@ var index$2 = {
757
708
  uuid: {
758
709
  createUUID: createUUID$4
759
710
  },
760
- istype: istype$4,
711
+ istype: istype$3,
761
712
  data: {
762
- deepClone: deepClone$7,
713
+ deepClone: deepClone$6,
763
714
  },
764
- Context: Context$2$1,
715
+ Context: Context$1$1,
765
716
  };
766
717
  var BoardEvent = (function () {
767
718
  function BoardEvent() {
@@ -827,7 +778,7 @@ function createTempData() {
827
778
  }
828
779
  };
829
780
  }
830
- var TempData$1 = (function () {
781
+ var TempData$2 = (function () {
831
782
  function TempData() {
832
783
  this._temp = createTempData();
833
784
  }
@@ -845,7 +796,7 @@ var TempData$1 = (function () {
845
796
  var ScreenWatcher = (function () {
846
797
  function ScreenWatcher(canvas, ctx) {
847
798
  this._isMoving = false;
848
- this._temp = new TempData$1;
799
+ this._temp = new TempData$2;
849
800
  this._container = window;
850
801
  this._canvas = canvas;
851
802
  this._isMoving = false;
@@ -879,19 +830,24 @@ var ScreenWatcher = (function () {
879
830
  this._initParentEvent();
880
831
  };
881
832
  ScreenWatcher.prototype._initParentEvent = function () {
882
- var target = window;
883
- var targetOrigin = target.origin;
884
- while (target.self !== target.top) {
885
- if (target.self !== target.parent) {
886
- if (target.origin === targetOrigin) {
887
- target.parent.window.addEventListener('mousemove', this._listSameOriginParentWindow.bind(this), false);
833
+ try {
834
+ var target = window;
835
+ var targetOrigin = target.origin;
836
+ while (target.self !== target.top) {
837
+ if (target.self !== target.parent) {
838
+ if (target.origin === targetOrigin) {
839
+ target.parent.window.addEventListener('mousemove', this._listSameOriginParentWindow.bind(this), false);
840
+ }
841
+ }
842
+ target = target.parent;
843
+ if (!target) {
844
+ break;
888
845
  }
889
- }
890
- target = target.parent;
891
- if (!target) {
892
- break;
893
846
  }
894
847
  }
848
+ catch (err) {
849
+ console.warn(err);
850
+ }
895
851
  };
896
852
  ScreenWatcher.prototype._listenHover = function (e) {
897
853
  e.preventDefault();
@@ -1068,7 +1024,7 @@ function setStyle(dom, style) {
1068
1024
  var keys = Object.keys(_style);
1069
1025
  var styleStr = '';
1070
1026
  keys.forEach(function (key) {
1071
- styleStr += key + ":" + (_style[key] || '') + ";";
1027
+ styleStr += "".concat(key, ":").concat(_style[key] || '', ";");
1072
1028
  });
1073
1029
  dom.setAttribute('style', styleStr);
1074
1030
  }
@@ -1102,7 +1058,7 @@ var Scroller = (function () {
1102
1058
  ctx.fillStyle = wrapper.color;
1103
1059
  ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize));
1104
1060
  ctx.globalAlpha = 1;
1105
- drawBox$2(ctx, {
1061
+ drawBox$1(ctx, {
1106
1062
  x: this._doSize(wrapper.translateX),
1107
1063
  y: this._doSize(height - wrapper.lineSize),
1108
1064
  w: this._doSize(wrapper.xSize),
@@ -1116,7 +1072,7 @@ var Scroller = (function () {
1116
1072
  ctx.fillStyle = wrapper.color;
1117
1073
  ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height));
1118
1074
  ctx.globalAlpha = 1;
1119
- drawBox$2(ctx, {
1075
+ drawBox$1(ctx, {
1120
1076
  x: this._doSize(width - wrapper.lineSize),
1121
1077
  y: this._doSize(wrapper.translateY),
1122
1078
  w: this._doSize(wrapper.lineSize),
@@ -1211,7 +1167,7 @@ var Scroller = (function () {
1211
1167
  };
1212
1168
  return Scroller;
1213
1169
  }());
1214
- function drawBox$2(ctx, opts) {
1170
+ function drawBox$1(ctx, opts) {
1215
1171
  var x = opts.x, y = opts.y, w = opts.w, h = opts.h, color = opts.color;
1216
1172
  var r = opts.r;
1217
1173
  r = Math.min(r, w / 2, h / 2);
@@ -1331,37 +1287,6 @@ var Screen = (function () {
1331
1287
  };
1332
1288
  return Screen;
1333
1289
  }());
1334
- var Context$1$1 = index$2.Context;
1335
- function createDefaultData(opts) {
1336
- var canvas = document.createElement('canvas');
1337
- var ctx2d = canvas.getContext('2d');
1338
- var ctx = new Context$1$1(ctx2d, {
1339
- width: opts.width,
1340
- height: opts.height,
1341
- contextWidth: opts.contextWidth,
1342
- contextHeight: opts.contextHeight,
1343
- devicePixelRatio: opts.devicePixelRatio || window.devicePixelRatio || 1,
1344
- });
1345
- return {
1346
- plugins: [],
1347
- ctx: ctx
1348
- };
1349
- }
1350
- var TempData$2 = (function () {
1351
- function TempData(opts) {
1352
- this._temp = createDefaultData(opts);
1353
- }
1354
- TempData.prototype.set = function (name, value) {
1355
- this._temp[name] = value;
1356
- };
1357
- TempData.prototype.get = function (name) {
1358
- return this._temp[name];
1359
- };
1360
- TempData.prototype.clear = function (opts) {
1361
- this._temp = createDefaultData(opts);
1362
- };
1363
- return TempData;
1364
- }());
1365
1290
  var _canvas = Symbol('_canvas');
1366
1291
  var _displayCanvas = Symbol('_displayCanvas');
1367
1292
  var _helperCanvas = Symbol('_helperCanvas');
@@ -1380,14 +1305,12 @@ var _doScrollY = Symbol('_doScrollY');
1380
1305
  var _doMoveScroll = Symbol('_doMoveScroll');
1381
1306
  var _resetContext = Symbol('_resetContext');
1382
1307
  var _screen = Symbol('_screen');
1383
- var _tempData$1 = Symbol('_tempData');
1384
- var _a$3;
1308
+ var _a$2;
1385
1309
  var Context$3 = index$2.Context;
1386
1310
  var throttle$2 = index$2.time.throttle;
1387
1311
  var Board = (function () {
1388
1312
  function Board(mount, opts) {
1389
- this[_a$3] = false;
1390
- this[_tempData$1] = new TempData$2(opts);
1313
+ this[_a$2] = false;
1391
1314
  this[_mount] = mount;
1392
1315
  this[_canvas] = document.createElement('canvas');
1393
1316
  this[_helperCanvas] = document.createElement('canvas');
@@ -1486,9 +1409,6 @@ var Board = (function () {
1486
1409
  }
1487
1410
  return { position: position, size: size };
1488
1411
  };
1489
- Board.prototype.addPlugin = function (plugin) {
1490
- this[_tempData$1].get('plugins').push(plugin);
1491
- };
1492
1412
  Board.prototype.clear = function () {
1493
1413
  var displayCtx = this[_displayCanvas].getContext('2d');
1494
1414
  displayCtx === null || displayCtx === void 0 ? void 0 : displayCtx.clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
@@ -1544,7 +1464,7 @@ var Board = (function () {
1544
1464
  };
1545
1465
  return screenPoint;
1546
1466
  };
1547
- Board.prototype[(_a$3 = _hasRendered, _render)] = function () {
1467
+ Board.prototype[(_a$2 = _hasRendered, _render)] = function () {
1548
1468
  if (this[_hasRendered] === true) {
1549
1469
  return;
1550
1470
  }
@@ -1561,8 +1481,8 @@ var Board = (function () {
1561
1481
  this[_displayCanvas].width = width * devicePixelRatio;
1562
1482
  this[_displayCanvas].height = height * devicePixelRatio;
1563
1483
  setStyle(this[_displayCanvas], {
1564
- width: width + "px",
1565
- height: height + "px",
1484
+ width: "".concat(width, "px"),
1485
+ height: "".concat(height, "px"),
1566
1486
  });
1567
1487
  };
1568
1488
  Board.prototype[_parsePrivateOptions] = function (opts) {
@@ -1710,9 +1630,9 @@ function createUUID$3() {
1710
1630
  function str4() {
1711
1631
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
1712
1632
  }
1713
- return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
1633
+ return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
1714
1634
  }
1715
- function deepClone$6(target) {
1635
+ function deepClone$5(target) {
1716
1636
  function _clone(t) {
1717
1637
  var type = is$1$2(t);
1718
1638
  if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
@@ -1744,7 +1664,7 @@ function parsePrototype$1(data) {
1744
1664
  var result = typeStr.replace(/(\[object|\])/ig, '').trim();
1745
1665
  return result;
1746
1666
  }
1747
- var istype$3 = {
1667
+ var istype$2 = {
1748
1668
  type: function (data, lowerCase) {
1749
1669
  var result = parsePrototype$1(data);
1750
1670
  return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -1826,7 +1746,7 @@ function __generator$2(thisArg, body) {
1826
1746
  function parseHTMLToDataURL$1(html, opts) {
1827
1747
  var width = opts.width, height = opts.height;
1828
1748
  return new Promise(function (resolve, reject) {
1829
- var _svg = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n " + html + "\n </div>\n </foreignObject>\n </svg>\n ";
1749
+ 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(html, "\n </div>\n </foreignObject>\n </svg>\n ");
1830
1750
  var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
1831
1751
  var reader = new FileReader();
1832
1752
  reader.readAsDataURL(blob);
@@ -1857,7 +1777,7 @@ function parseSVGToDataURL$1(svg) {
1857
1777
  });
1858
1778
  }
1859
1779
  var Image$1 = window.Image;
1860
- function loadImage$3(src) {
1780
+ function loadImage$2(src) {
1861
1781
  return new Promise(function (resolve, reject) {
1862
1782
  var img = new Image$1;
1863
1783
  img.onload = function () {
@@ -1868,7 +1788,7 @@ function loadImage$3(src) {
1868
1788
  img.src = src;
1869
1789
  });
1870
1790
  }
1871
- function loadSVG$3(svg) {
1791
+ function loadSVG$2(svg) {
1872
1792
  return __awaiter$2(this, void 0, void 0, function () {
1873
1793
  var dataURL, image;
1874
1794
  return __generator$2(this, function (_a) {
@@ -1876,7 +1796,7 @@ function loadSVG$3(svg) {
1876
1796
  case 0: return [4, parseSVGToDataURL$1(svg)];
1877
1797
  case 1:
1878
1798
  dataURL = _a.sent();
1879
- return [4, loadImage$3(dataURL)];
1799
+ return [4, loadImage$2(dataURL)];
1880
1800
  case 2:
1881
1801
  image = _a.sent();
1882
1802
  return [2, image];
@@ -1884,7 +1804,7 @@ function loadSVG$3(svg) {
1884
1804
  });
1885
1805
  });
1886
1806
  }
1887
- function loadHTML$3(html, opts) {
1807
+ function loadHTML$2(html, opts) {
1888
1808
  return __awaiter$2(this, void 0, void 0, function () {
1889
1809
  var dataURL, image;
1890
1810
  return __generator$2(this, function (_a) {
@@ -1892,7 +1812,7 @@ function loadHTML$3(html, opts) {
1892
1812
  case 0: return [4, parseHTMLToDataURL$1(html, opts)];
1893
1813
  case 1:
1894
1814
  dataURL = _a.sent();
1895
- return [4, loadImage$3(dataURL)];
1815
+ return [4, loadImage$2(dataURL)];
1896
1816
  case 2:
1897
1817
  image = _a.sent();
1898
1818
  return [2, image];
@@ -2048,11 +1968,11 @@ var Context$2 = (function () {
2048
1968
  Context.prototype.setFont = function (opts) {
2049
1969
  var strList = [];
2050
1970
  if (opts.fontWeight === 'bold') {
2051
- strList.push("" + opts.fontWeight);
1971
+ strList.push("".concat(opts.fontWeight));
2052
1972
  }
2053
- strList.push(this._doSize(opts.fontSize || 12) + "px");
2054
- strList.push("" + (opts.fontFamily || 'sans-serif'));
2055
- this._ctx.font = "" + strList.join(' ');
1973
+ strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
1974
+ strList.push("".concat(opts.fontFamily || 'sans-serif'));
1975
+ this._ctx.font = "".concat(strList.join(' '));
2056
1976
  };
2057
1977
  Context.prototype.setTextBaseline = function (baseline) {
2058
1978
  this._ctx.textBaseline = baseline;
@@ -2127,16 +2047,16 @@ function color$4(value) {
2127
2047
  return isColorStr$3(value);
2128
2048
  }
2129
2049
  function imageURL$2(value) {
2130
- return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
2050
+ return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
2131
2051
  }
2132
2052
  function imageBase64$2(value) {
2133
- return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
2053
+ return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
2134
2054
  }
2135
2055
  function imageSrc$2(value) {
2136
2056
  return (imageBase64$2(value) || imageURL$2(value));
2137
2057
  }
2138
2058
  function svg$2(value) {
2139
- return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
2059
+ return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
2140
2060
  }
2141
2061
  function html$2(value) {
2142
2062
  var result = false;
@@ -2317,9 +2237,9 @@ var index$1 = {
2317
2237
  throttle: throttle$1,
2318
2238
  },
2319
2239
  loader: {
2320
- loadImage: loadImage$3,
2321
- loadSVG: loadSVG$3,
2322
- loadHTML: loadHTML$3,
2240
+ loadImage: loadImage$2,
2241
+ loadSVG: loadSVG$2,
2242
+ loadHTML: loadHTML$2,
2323
2243
  },
2324
2244
  file: {
2325
2245
  downloadImageFromCanvas: downloadImageFromCanvas$1,
@@ -2332,9 +2252,9 @@ var index$1 = {
2332
2252
  uuid: {
2333
2253
  createUUID: createUUID$3
2334
2254
  },
2335
- istype: istype$3,
2255
+ istype: istype$2,
2336
2256
  data: {
2337
- deepClone: deepClone$6,
2257
+ deepClone: deepClone$5,
2338
2258
  },
2339
2259
  Context: Context$2,
2340
2260
  };
@@ -2456,14 +2376,14 @@ function toColorHexNum(color) {
2456
2376
  function toColorHexStr(color) {
2457
2377
  return '#' + color.toString(16);
2458
2378
  }
2459
- function isColorStr$1$1(color) {
2379
+ function isColorStr$1(color) {
2460
2380
  return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
2461
2381
  }
2462
2382
  function createUUID$1$1() {
2463
2383
  function str4() {
2464
2384
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
2465
2385
  }
2466
- return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
2386
+ return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
2467
2387
  }
2468
2388
  function deepClone$2$1(target) {
2469
2389
  function _clone(t) {
@@ -2579,7 +2499,7 @@ function __generator(thisArg, body) {
2579
2499
  function parseHTMLToDataURL(html, opts) {
2580
2500
  var width = opts.width, height = opts.height;
2581
2501
  return new Promise(function (resolve, reject) {
2582
- var _svg = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n " + html + "\n </div>\n </foreignObject>\n </svg>\n ";
2502
+ 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(html, "\n </div>\n </foreignObject>\n </svg>\n ");
2583
2503
  var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
2584
2504
  var reader = new FileReader();
2585
2505
  reader.readAsDataURL(blob);
@@ -2801,11 +2721,11 @@ var Context$1 = (function () {
2801
2721
  Context.prototype.setFont = function (opts) {
2802
2722
  var strList = [];
2803
2723
  if (opts.fontWeight === 'bold') {
2804
- strList.push("" + opts.fontWeight);
2724
+ strList.push("".concat(opts.fontWeight));
2805
2725
  }
2806
- strList.push(this._doSize(opts.fontSize || 12) + "px");
2807
- strList.push("" + (opts.fontFamily || 'sans-serif'));
2808
- this._ctx.font = "" + strList.join(' ');
2726
+ strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
2727
+ strList.push("".concat(opts.fontFamily || 'sans-serif'));
2728
+ this._ctx.font = "".concat(strList.join(' '));
2809
2729
  };
2810
2730
  Context.prototype.setTextBaseline = function (baseline) {
2811
2731
  this._ctx.textBaseline = baseline;
@@ -2877,19 +2797,19 @@ function borderRadius$1(value) {
2877
2797
  return number$1(value) && value >= 0;
2878
2798
  }
2879
2799
  function color$2(value) {
2880
- return isColorStr$1$1(value);
2800
+ return isColorStr$1(value);
2881
2801
  }
2882
2802
  function imageURL$1(value) {
2883
- return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
2803
+ return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
2884
2804
  }
2885
2805
  function imageBase64$1(value) {
2886
- return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
2806
+ return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
2887
2807
  }
2888
2808
  function imageSrc$1(value) {
2889
2809
  return (imageBase64$1(value) || imageURL$1(value));
2890
2810
  }
2891
2811
  function svg$1(value) {
2892
- return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
2812
+ return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
2893
2813
  }
2894
2814
  function html$1(value) {
2895
2815
  var result = false;
@@ -3080,7 +3000,7 @@ var index = {
3080
3000
  color: {
3081
3001
  toColorHexStr: toColorHexStr,
3082
3002
  toColorHexNum: toColorHexNum,
3083
- isColorStr: isColorStr$1$1,
3003
+ isColorStr: isColorStr$1,
3084
3004
  },
3085
3005
  uuid: {
3086
3006
  createUUID: createUUID$1$1
@@ -3119,7 +3039,7 @@ function rotateContext$1(ctx, center, radian, callback) {
3119
3039
  ctx.translate(-center.x, -center.y);
3120
3040
  }
3121
3041
  }
3122
- var is$1 = index.is, istype$2 = index.istype, color$1$1 = index.color;
3042
+ var is$1 = index.is, istype = index.istype, color$1 = index.color;
3123
3043
  function clearContext$1(ctx) {
3124
3044
  ctx.setFillStyle('#000000');
3125
3045
  ctx.setStrokeStyle('#000000');
@@ -3130,14 +3050,14 @@ function clearContext$1(ctx) {
3130
3050
  ctx.setShadowOffsetY(0);
3131
3051
  ctx.setShadowBlur(0);
3132
3052
  }
3133
- function drawBgColor$1(ctx, color) {
3053
+ function drawBgColor(ctx, color) {
3134
3054
  var size = ctx.getSize();
3135
3055
  ctx.setFillStyle(color);
3136
3056
  ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
3137
3057
  }
3138
- function drawBox$1(ctx, elem, pattern) {
3058
+ function drawBox(ctx, elem, pattern) {
3139
3059
  clearContext$1(ctx);
3140
- drawBoxBorder$1(ctx, elem);
3060
+ drawBoxBorder(ctx, elem);
3141
3061
  clearContext$1(ctx);
3142
3062
  rotateElement$1(ctx, elem, function () {
3143
3063
  var x = elem.x, y = elem.y, w = elem.w, h = elem.h;
@@ -3156,13 +3076,13 @@ function drawBox$1(ctx, elem, pattern) {
3156
3076
  if (typeof pattern === 'string') {
3157
3077
  ctx.setFillStyle(pattern);
3158
3078
  }
3159
- else if (['CanvasPattern'].includes(istype$2.type(pattern))) {
3079
+ else if (['CanvasPattern'].includes(istype.type(pattern))) {
3160
3080
  ctx.setFillStyle(pattern);
3161
3081
  }
3162
3082
  ctx.fill();
3163
3083
  });
3164
3084
  }
3165
- function drawBoxBorder$1(ctx, elem) {
3085
+ function drawBoxBorder(ctx, elem) {
3166
3086
  clearContext$1(ctx);
3167
3087
  rotateElement$1(ctx, elem, function () {
3168
3088
  if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
@@ -3170,7 +3090,7 @@ function drawBoxBorder$1(ctx, elem) {
3170
3090
  }
3171
3091
  var bw = elem.desc.borderWidth;
3172
3092
  var borderColor = '#000000';
3173
- if (color$1$1.isColorStr(elem.desc.borderColor) === true) {
3093
+ if (color$1.isColorStr(elem.desc.borderColor) === true) {
3174
3094
  borderColor = elem.desc.borderColor;
3175
3095
  }
3176
3096
  var x = elem.x - bw / 2;
@@ -3183,7 +3103,7 @@ function drawBoxBorder$1(ctx, elem) {
3183
3103
  r = r + bw / 2;
3184
3104
  }
3185
3105
  var desc = elem.desc;
3186
- if (desc.shadowColor !== undefined && color$1$1.isColorStr(desc.shadowColor)) {
3106
+ if (desc.shadowColor !== undefined && color$1.isColorStr(desc.shadowColor)) {
3187
3107
  ctx.setShadowColor(desc.shadowColor);
3188
3108
  }
3189
3109
  if (desc.shadowOffsetX !== undefined && is$1.number(desc.shadowOffsetX)) {
@@ -3207,10 +3127,10 @@ function drawBoxBorder$1(ctx, elem) {
3207
3127
  ctx.stroke();
3208
3128
  });
3209
3129
  }
3210
- function drawRect$1(ctx, elem) {
3211
- drawBox$1(ctx, elem, elem.desc.bgColor);
3130
+ function drawRect(ctx, elem) {
3131
+ drawBox(ctx, elem, elem.desc.bgColor);
3212
3132
  }
3213
- function drawImage$1(ctx, elem, loader) {
3133
+ function drawImage(ctx, elem, loader) {
3214
3134
  var content = loader.getContent(elem.uuid);
3215
3135
  rotateElement$1(ctx, elem, function () {
3216
3136
  if (content) {
@@ -3218,7 +3138,7 @@ function drawImage$1(ctx, elem, loader) {
3218
3138
  }
3219
3139
  });
3220
3140
  }
3221
- function drawSVG$1(ctx, elem, loader) {
3141
+ function drawSVG(ctx, elem, loader) {
3222
3142
  var content = loader.getContent(elem.uuid);
3223
3143
  rotateElement$1(ctx, elem, function () {
3224
3144
  if (content) {
@@ -3226,7 +3146,7 @@ function drawSVG$1(ctx, elem, loader) {
3226
3146
  }
3227
3147
  });
3228
3148
  }
3229
- function drawHTML$1(ctx, elem, loader) {
3149
+ function drawHTML(ctx, elem, loader) {
3230
3150
  var content = loader.getContent(elem.uuid);
3231
3151
  rotateElement$1(ctx, elem, function () {
3232
3152
  if (content) {
@@ -3235,9 +3155,9 @@ function drawHTML$1(ctx, elem, loader) {
3235
3155
  });
3236
3156
  }
3237
3157
  var is$3 = index.is, color$3 = index.color;
3238
- function drawText$1(ctx, elem, loader) {
3158
+ function drawText(ctx, elem, loader) {
3239
3159
  clearContext$1(ctx);
3240
- drawBox$1(ctx, elem, elem.desc.bgColor || 'transparent');
3160
+ drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
3241
3161
  rotateElement$1(ctx, elem, function () {
3242
3162
  var desc = __assign$1({
3243
3163
  fontSize: 12,
@@ -3337,7 +3257,7 @@ function drawText$1(ctx, elem, loader) {
3337
3257
  }
3338
3258
  });
3339
3259
  }
3340
- function drawCircle$1(ctx, elem) {
3260
+ function drawCircle(ctx, elem) {
3341
3261
  clearContext$1(ctx);
3342
3262
  rotateElement$1(ctx, elem, function (ctx) {
3343
3263
  var x = elem.x, y = elem.y, w = elem.w, h = elem.h, desc = elem.desc;
@@ -3364,13 +3284,13 @@ function drawCircle$1(ctx, elem) {
3364
3284
  });
3365
3285
  }
3366
3286
  var isColorStr$2 = index.color.isColorStr;
3367
- function drawContext$1(ctx, data, loader) {
3287
+ function drawContext(ctx, data, loader) {
3368
3288
  var _a;
3369
3289
  clearContext$1(ctx);
3370
3290
  var size = ctx.getSize();
3371
3291
  ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
3372
3292
  if (typeof data.bgColor === 'string' && isColorStr$2(data.bgColor)) {
3373
- drawBgColor$1(ctx, data.bgColor);
3293
+ drawBgColor(ctx, data.bgColor);
3374
3294
  }
3375
3295
  if (!(data.elements.length > 0)) {
3376
3296
  return;
@@ -3382,33 +3302,33 @@ function drawContext$1(ctx, data, loader) {
3382
3302
  }
3383
3303
  switch (elem.type) {
3384
3304
  case 'rect': {
3385
- drawRect$1(ctx, elem);
3305
+ drawRect(ctx, elem);
3386
3306
  break;
3387
3307
  }
3388
3308
  case 'text': {
3389
- drawText$1(ctx, elem);
3309
+ drawText(ctx, elem);
3390
3310
  break;
3391
3311
  }
3392
3312
  case 'image': {
3393
- drawImage$1(ctx, elem, loader);
3313
+ drawImage(ctx, elem, loader);
3394
3314
  break;
3395
3315
  }
3396
3316
  case 'svg': {
3397
- drawSVG$1(ctx, elem, loader);
3317
+ drawSVG(ctx, elem, loader);
3398
3318
  break;
3399
3319
  }
3400
3320
  case 'html': {
3401
- drawHTML$1(ctx, elem, loader);
3321
+ drawHTML(ctx, elem, loader);
3402
3322
  break;
3403
3323
  }
3404
3324
  case 'circle': {
3405
- drawCircle$1(ctx, elem);
3325
+ drawCircle(ctx, elem);
3406
3326
  break;
3407
3327
  }
3408
3328
  }
3409
3329
  }
3410
3330
  }
3411
- var LoaderEvent$1 = (function () {
3331
+ var LoaderEvent = (function () {
3412
3332
  function LoaderEvent() {
3413
3333
  this._listeners = new Map();
3414
3334
  }
@@ -3459,36 +3379,36 @@ var LoaderEvent$1 = (function () {
3459
3379
  };
3460
3380
  return LoaderEvent;
3461
3381
  }());
3462
- function filterScript$1(html) {
3382
+ function filterScript(html) {
3463
3383
  return html.replace(/<script[\s\S]*?<\/script>/ig, '');
3464
3384
  }
3465
- var _a$1 = index.loader, loadImage$2 = _a$1.loadImage, loadSVG$2 = _a$1.loadSVG, loadHTML$2 = _a$1.loadHTML;
3385
+ var _a$1 = index.loader, loadImage = _a$1.loadImage, loadSVG = _a$1.loadSVG, loadHTML = _a$1.loadHTML;
3466
3386
  var deepClone$1$1 = index.data.deepClone;
3467
- var LoaderStatus$1;
3387
+ var LoaderStatus;
3468
3388
  (function (LoaderStatus) {
3469
3389
  LoaderStatus["FREE"] = "free";
3470
3390
  LoaderStatus["LOADING"] = "loading";
3471
3391
  LoaderStatus["COMPLETE"] = "complete";
3472
- })(LoaderStatus$1 || (LoaderStatus$1 = {}));
3473
- var Loader$1 = (function () {
3392
+ })(LoaderStatus || (LoaderStatus = {}));
3393
+ var Loader = (function () {
3474
3394
  function Loader(opts) {
3475
3395
  this._currentLoadData = {};
3476
3396
  this._currentUUIDQueue = [];
3477
3397
  this._storageLoadData = {};
3478
- this._status = LoaderStatus$1.FREE;
3398
+ this._status = LoaderStatus.FREE;
3479
3399
  this._waitingLoadQueue = [];
3480
3400
  this._opts = opts;
3481
- this._event = new LoaderEvent$1();
3401
+ this._event = new LoaderEvent();
3482
3402
  this._waitingLoadQueue = [];
3483
3403
  }
3484
3404
  Loader.prototype.load = function (data, changeResourceUUIDs) {
3485
3405
  var _a = this._resetLoadData(data, changeResourceUUIDs), uuidQueue = _a[0], loadData = _a[1];
3486
- if (this._status === LoaderStatus$1.FREE || this._status === LoaderStatus$1.COMPLETE) {
3406
+ if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
3487
3407
  this._currentUUIDQueue = uuidQueue;
3488
3408
  this._currentLoadData = loadData;
3489
3409
  this._loadTask();
3490
3410
  }
3491
- else if (this._status === LoaderStatus$1.LOADING && uuidQueue.length > 0) {
3411
+ else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
3492
3412
  this._waitingLoadQueue.push({
3493
3413
  uuidQueue: uuidQueue,
3494
3414
  loadData: loadData,
@@ -3502,7 +3422,7 @@ var Loader$1 = (function () {
3502
3422
  this._event.off(name, callback);
3503
3423
  };
3504
3424
  Loader.prototype.isComplete = function () {
3505
- return this._status === LoaderStatus$1.COMPLETE;
3425
+ return this._status === LoaderStatus.COMPLETE;
3506
3426
  };
3507
3427
  Loader.prototype.getContent = function (uuid) {
3508
3428
  var _a;
@@ -3547,7 +3467,7 @@ var Loader$1 = (function () {
3547
3467
  }
3548
3468
  else if (elem.type === 'html') {
3549
3469
  var _elem = elem;
3550
- source = filterScript$1(_elem.desc.html || '');
3470
+ source = filterScript(_elem.desc.html || '');
3551
3471
  elemW = _elem.desc.width || elem.w;
3552
3472
  elemH = _elem.desc.height || elem.h;
3553
3473
  }
@@ -3564,13 +3484,13 @@ var Loader$1 = (function () {
3564
3484
  };
3565
3485
  Loader.prototype._loadTask = function () {
3566
3486
  var _this = this;
3567
- if (this._status === LoaderStatus$1.LOADING) {
3487
+ if (this._status === LoaderStatus.LOADING) {
3568
3488
  return;
3569
3489
  }
3570
- this._status = LoaderStatus$1.LOADING;
3490
+ this._status = LoaderStatus.LOADING;
3571
3491
  if (this._currentUUIDQueue.length === 0) {
3572
3492
  if (this._waitingLoadQueue.length === 0) {
3573
- this._status = LoaderStatus$1.COMPLETE;
3493
+ this._status = LoaderStatus.COMPLETE;
3574
3494
  this._event.trigger('complete', undefined);
3575
3495
  return;
3576
3496
  }
@@ -3618,7 +3538,7 @@ var Loader$1 = (function () {
3618
3538
  element: _this._currentLoadData[uuid].element,
3619
3539
  };
3620
3540
  if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
3621
- _this._status = LoaderStatus$1.FREE;
3541
+ _this._status = LoaderStatus.FREE;
3622
3542
  _this._loadTask();
3623
3543
  }
3624
3544
  _this._event.trigger('load', {
@@ -3650,7 +3570,7 @@ var Loader$1 = (function () {
3650
3570
  };
3651
3571
  }
3652
3572
  if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
3653
- _this._status = LoaderStatus$1.FREE;
3573
+ _this._status = LoaderStatus.FREE;
3654
3574
  _this._loadTask();
3655
3575
  }
3656
3576
  if (_this._currentLoadData[uuid]) {
@@ -3683,19 +3603,19 @@ var Loader$1 = (function () {
3683
3603
  switch (_a.label) {
3684
3604
  case 0:
3685
3605
  if (!(params && params.type === 'image')) return [3, 2];
3686
- return [4, loadImage$2(params.source)];
3606
+ return [4, loadImage(params.source)];
3687
3607
  case 1:
3688
3608
  image = _a.sent();
3689
3609
  return [2, image];
3690
3610
  case 2:
3691
3611
  if (!(params && params.type === 'svg')) return [3, 4];
3692
- return [4, loadSVG$2(params.source)];
3612
+ return [4, loadSVG(params.source)];
3693
3613
  case 3:
3694
3614
  image = _a.sent();
3695
3615
  return [2, image];
3696
3616
  case 4:
3697
3617
  if (!(params && params.type === 'html')) return [3, 6];
3698
- return [4, loadHTML$2(params.source, {
3618
+ return [4, loadHTML(params.source, {
3699
3619
  width: params.elemW, height: params.elemH
3700
3620
  })];
3701
3621
  case 5:
@@ -3708,7 +3628,7 @@ var Loader$1 = (function () {
3708
3628
  };
3709
3629
  return Loader;
3710
3630
  }());
3711
- var RendererEvent$1 = (function () {
3631
+ var RendererEvent = (function () {
3712
3632
  function RendererEvent() {
3713
3633
  this._listeners = new Map();
3714
3634
  }
@@ -3767,27 +3687,27 @@ var _opts$2 = Symbol('_opts');
3767
3687
  var _freeze = Symbol('_freeze');
3768
3688
  var _drawFrame = Symbol('_drawFrame');
3769
3689
  var _retainQueueOneItem = Symbol('_retainQueueOneItem');
3770
- var _a$2, _b, _c;
3771
- var requestAnimationFrame$1 = window.requestAnimationFrame;
3690
+ var _a, _b, _c;
3691
+ var requestAnimationFrame = window.requestAnimationFrame;
3772
3692
  var createUUID$2 = index.uuid.createUUID;
3773
- var deepClone$5 = index.data.deepClone;
3693
+ var deepClone$4 = index.data.deepClone;
3774
3694
  var Context = index.Context;
3775
- var DrawStatus$1;
3695
+ var DrawStatus;
3776
3696
  (function (DrawStatus) {
3777
3697
  DrawStatus["NULL"] = "null";
3778
3698
  DrawStatus["FREE"] = "free";
3779
3699
  DrawStatus["DRAWING"] = "drawing";
3780
3700
  DrawStatus["FREEZE"] = "freeze";
3781
- })(DrawStatus$1 || (DrawStatus$1 = {}));
3701
+ })(DrawStatus || (DrawStatus = {}));
3782
3702
  var Renderer = (function (_super) {
3783
3703
  __extends(Renderer, _super);
3784
3704
  function Renderer(opts) {
3785
3705
  var _this = _super.call(this) || this;
3786
- _this[_a$2] = [];
3706
+ _this[_a] = [];
3787
3707
  _this[_b] = null;
3788
- _this[_c] = DrawStatus$1.NULL;
3708
+ _this[_c] = DrawStatus.NULL;
3789
3709
  _this[_opts$2] = opts;
3790
- _this[_loader] = new Loader$1({
3710
+ _this[_loader] = new Loader({
3791
3711
  maxParallelNum: 6
3792
3712
  });
3793
3713
  _this[_loader].on('load', function (res) {
@@ -3804,8 +3724,8 @@ var Renderer = (function (_super) {
3804
3724
  }
3805
3725
  Renderer.prototype.render = function (target, originData, opts) {
3806
3726
  var _d = (opts || {}).changeResourceUUIDs, changeResourceUUIDs = _d === void 0 ? [] : _d;
3807
- this[_status] = DrawStatus$1.FREE;
3808
- var data = deepClone$5(originData);
3727
+ this[_status] = DrawStatus.FREE;
3728
+ var data = deepClone$4(originData);
3809
3729
  if (Array.isArray(data.elements)) {
3810
3730
  data.elements.forEach(function (elem) {
3811
3731
  if (!(typeof elem.uuid === 'string' && elem.uuid)) {
@@ -3832,10 +3752,10 @@ var Renderer = (function (_super) {
3832
3752
  this[_ctx] = target;
3833
3753
  }
3834
3754
  }
3835
- if ([DrawStatus$1.FREEZE].includes(this[_status])) {
3755
+ if ([DrawStatus.FREEZE].includes(this[_status])) {
3836
3756
  return;
3837
3757
  }
3838
- var _data = deepClone$5({ data: data, });
3758
+ var _data = deepClone$4({ data: data, });
3839
3759
  this[_queue].push(_data);
3840
3760
  this[_drawFrame]();
3841
3761
  this[_loader].load(data, changeResourceUUIDs || []);
@@ -3844,18 +3764,18 @@ var Renderer = (function (_super) {
3844
3764
  return this[_ctx];
3845
3765
  };
3846
3766
  Renderer.prototype.thaw = function () {
3847
- this[_status] = DrawStatus$1.FREE;
3767
+ this[_status] = DrawStatus.FREE;
3848
3768
  };
3849
- Renderer.prototype[(_a$2 = _queue, _b = _ctx, _c = _status, _freeze)] = function () {
3850
- this[_status] = DrawStatus$1.FREEZE;
3769
+ Renderer.prototype[(_a = _queue, _b = _ctx, _c = _status, _freeze)] = function () {
3770
+ this[_status] = DrawStatus.FREEZE;
3851
3771
  };
3852
3772
  Renderer.prototype[_drawFrame] = function () {
3853
3773
  var _this = this;
3854
- if (this[_status] === DrawStatus$1.FREEZE) {
3774
+ if (this[_status] === DrawStatus.FREEZE) {
3855
3775
  return;
3856
3776
  }
3857
- requestAnimationFrame$1(function () {
3858
- if (_this[_status] === DrawStatus$1.FREEZE) {
3777
+ requestAnimationFrame(function () {
3778
+ if (_this[_status] === DrawStatus.FREEZE) {
3859
3779
  return;
3860
3780
  }
3861
3781
  var ctx = _this[_ctx];
@@ -3870,26 +3790,26 @@ var Renderer = (function (_super) {
3870
3790
  if (_this[_loader].isComplete() !== true) {
3871
3791
  _this[_drawFrame]();
3872
3792
  if (item && ctx) {
3873
- drawContext$1(ctx, item.data, _this[_loader]);
3793
+ drawContext(ctx, item.data, _this[_loader]);
3874
3794
  }
3875
3795
  }
3876
3796
  else if (item && ctx) {
3877
- drawContext$1(ctx, item.data, _this[_loader]);
3797
+ drawContext(ctx, item.data, _this[_loader]);
3878
3798
  _this[_retainQueueOneItem]();
3879
3799
  if (!isLastFrame) {
3880
3800
  _this[_drawFrame]();
3881
3801
  }
3882
3802
  else {
3883
- _this[_status] = DrawStatus$1.FREE;
3803
+ _this[_status] = DrawStatus.FREE;
3884
3804
  }
3885
3805
  }
3886
3806
  else {
3887
- _this[_status] = DrawStatus$1.FREE;
3807
+ _this[_status] = DrawStatus.FREE;
3888
3808
  }
3889
3809
  _this.trigger('drawFrame', { t: Date.now() });
3890
- if (_this[_loader].isComplete() === true && _this[_queue].length === 1 && _this[_status] === DrawStatus$1.FREE) {
3810
+ if (_this[_loader].isComplete() === true && _this[_queue].length === 1 && _this[_status] === DrawStatus.FREE) {
3891
3811
  if (ctx && _this[_queue][0] && _this[_queue][0].data) {
3892
- drawContext$1(ctx, _this[_queue][0].data, _this[_loader]);
3812
+ drawContext(ctx, _this[_queue][0].data, _this[_loader]);
3893
3813
  }
3894
3814
  _this.trigger('drawFrameComplete', { t: Date.now() });
3895
3815
  _this[_freeze]();
@@ -3900,13 +3820,13 @@ var Renderer = (function (_super) {
3900
3820
  if (this[_queue].length <= 1) {
3901
3821
  return;
3902
3822
  }
3903
- var lastOne = deepClone$5(this[_queue][this[_queue].length - 1]);
3823
+ var lastOne = deepClone$4(this[_queue][this[_queue].length - 1]);
3904
3824
  this[_queue] = [lastOne];
3905
3825
  };
3906
3826
  return Renderer;
3907
- }(RendererEvent$1));
3827
+ }(RendererEvent));
3908
3828
 
3909
- var isColorStr$1 = index$1.color.isColorStr;
3829
+ var isColorStr = index$1.color.isColorStr;
3910
3830
  function number(value) {
3911
3831
  return (typeof value === 'number' && (value > 0 || value <= 0));
3912
3832
  }
@@ -3931,20 +3851,20 @@ function borderWidth(value) {
3931
3851
  function borderRadius(value) {
3932
3852
  return number(value) && value >= 0;
3933
3853
  }
3934
- function color$1(value) {
3935
- return isColorStr$1(value);
3854
+ function color(value) {
3855
+ return isColorStr(value);
3936
3856
  }
3937
3857
  function imageURL(value) {
3938
- return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
3858
+ return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
3939
3859
  }
3940
3860
  function imageBase64(value) {
3941
- return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
3861
+ return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
3942
3862
  }
3943
3863
  function imageSrc(value) {
3944
3864
  return (imageBase64(value) || imageURL(value));
3945
3865
  }
3946
3866
  function svg(value) {
3947
- return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
3867
+ return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
3948
3868
  }
3949
3869
  function html(value) {
3950
3870
  var result = false;
@@ -3988,7 +3908,7 @@ var is = {
3988
3908
  number: number,
3989
3909
  borderWidth: borderWidth,
3990
3910
  borderRadius: borderRadius,
3991
- color: color$1,
3911
+ color: color,
3992
3912
  imageSrc: imageSrc,
3993
3913
  imageURL: imageURL,
3994
3914
  imageBase64: imageBase64,
@@ -4183,6 +4103,156 @@ function calcLineAngle(center, p) {
4183
4103
  return null;
4184
4104
  }
4185
4105
 
4106
+ var defaultConfig = {
4107
+ elementWrapper: {
4108
+ color: '#2ab6f1',
4109
+ lockColor: '#aaaaaa',
4110
+ controllerSize: 6,
4111
+ lineWidth: 1,
4112
+ lineDash: [4, 3],
4113
+ }
4114
+ };
4115
+ function mergeConfig(config) {
4116
+ var result = index$1.data.deepClone(defaultConfig);
4117
+ if (config) {
4118
+ if (config.elementWrapper) {
4119
+ result.elementWrapper = __assign$4(__assign$4({}, result.elementWrapper), config.elementWrapper);
4120
+ }
4121
+ }
4122
+ return result;
4123
+ }
4124
+
4125
+ var CoreEvent = (function () {
4126
+ function CoreEvent() {
4127
+ this._listeners = new Map();
4128
+ }
4129
+ CoreEvent.prototype.on = function (eventKey, callback) {
4130
+ if (this._listeners.has(eventKey)) {
4131
+ var callbacks = this._listeners.get(eventKey);
4132
+ callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
4133
+ this._listeners.set(eventKey, callbacks || []);
4134
+ }
4135
+ else {
4136
+ this._listeners.set(eventKey, [callback]);
4137
+ }
4138
+ };
4139
+ CoreEvent.prototype.off = function (eventKey, callback) {
4140
+ if (this._listeners.has(eventKey)) {
4141
+ var callbacks = this._listeners.get(eventKey);
4142
+ if (Array.isArray(callbacks)) {
4143
+ for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
4144
+ if (callbacks[i] === callback) {
4145
+ callbacks.splice(i, 1);
4146
+ break;
4147
+ }
4148
+ }
4149
+ }
4150
+ this._listeners.set(eventKey, callbacks || []);
4151
+ }
4152
+ };
4153
+ CoreEvent.prototype.trigger = function (eventKey, arg) {
4154
+ var callbacks = this._listeners.get(eventKey);
4155
+ if (Array.isArray(callbacks)) {
4156
+ callbacks.forEach(function (cb) {
4157
+ cb(arg);
4158
+ });
4159
+ return true;
4160
+ }
4161
+ else {
4162
+ return false;
4163
+ }
4164
+ };
4165
+ CoreEvent.prototype.has = function (name) {
4166
+ if (this._listeners.has(name)) {
4167
+ var list = this._listeners.get(name);
4168
+ if (Array.isArray(list) && list.length > 0) {
4169
+ return true;
4170
+ }
4171
+ }
4172
+ return false;
4173
+ };
4174
+ return CoreEvent;
4175
+ }());
4176
+
4177
+ function isChangeImageElementResource(before, after) {
4178
+ var _a, _b;
4179
+ return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src));
4180
+ }
4181
+ function isChangeSVGElementResource(before, after) {
4182
+ var _a, _b;
4183
+ return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg));
4184
+ }
4185
+ function isChangeHTMLElementResource(before, after) {
4186
+ var _a, _b, _c, _d, _e, _f;
4187
+ return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html)
4188
+ || ((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width)
4189
+ || ((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
4190
+ }
4191
+ function diffElementResourceChange(before, after) {
4192
+ var result = null;
4193
+ var isChange = false;
4194
+ switch (after.type) {
4195
+ case 'image': {
4196
+ isChange = isChangeImageElementResource(before, after);
4197
+ break;
4198
+ }
4199
+ case 'svg': {
4200
+ isChange = isChangeSVGElementResource(before, after);
4201
+ break;
4202
+ }
4203
+ case 'html': {
4204
+ isChange = isChangeHTMLElementResource(before, after);
4205
+ break;
4206
+ }
4207
+ }
4208
+ if (isChange === true) {
4209
+ result = after.uuid;
4210
+ }
4211
+ return result;
4212
+ }
4213
+ function diffElementResourceChangeList(before, after) {
4214
+ var _a;
4215
+ var uuids = [];
4216
+ var beforeMap = parseDataElementMap(before);
4217
+ var afterMap = parseDataElementMap(after);
4218
+ for (var uuid in afterMap) {
4219
+ if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
4220
+ continue;
4221
+ }
4222
+ if (beforeMap[uuid]) {
4223
+ var isChange = false;
4224
+ switch (beforeMap[uuid].type) {
4225
+ case 'image': {
4226
+ isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
4227
+ break;
4228
+ }
4229
+ case 'svg': {
4230
+ isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
4231
+ break;
4232
+ }
4233
+ case 'html': {
4234
+ isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
4235
+ break;
4236
+ }
4237
+ }
4238
+ if (isChange === true) {
4239
+ uuids.push(uuid);
4240
+ }
4241
+ }
4242
+ else {
4243
+ uuids.push(uuid);
4244
+ }
4245
+ }
4246
+ return uuids;
4247
+ }
4248
+ function parseDataElementMap(data) {
4249
+ var elemMap = {};
4250
+ data.elements.forEach(function (elem) {
4251
+ elemMap[elem.uuid] = elem;
4252
+ });
4253
+ return elemMap;
4254
+ }
4255
+
4186
4256
  function rotateElement(ctx, elem, callback) {
4187
4257
  var center = calcElementCenter(elem);
4188
4258
  var radian = parseAngleToRadian(elem.angle || 0);
@@ -4202,601 +4272,9 @@ function rotateContext(ctx, center, radian, callback) {
4202
4272
  }
4203
4273
  }
4204
4274
 
4205
- var istype = index$1.istype, color = index$1.color;
4206
- function clearContext(ctx) {
4207
- ctx.setFillStyle('#000000');
4208
- ctx.setStrokeStyle('#000000');
4209
- ctx.setLineDash([]);
4210
- ctx.setGlobalAlpha(1);
4211
- ctx.setShadowColor('#00000000');
4212
- ctx.setShadowOffsetX(0);
4213
- ctx.setShadowOffsetY(0);
4214
- ctx.setShadowBlur(0);
4215
- }
4216
- function drawBgColor(ctx, color) {
4217
- var size = ctx.getSize();
4218
- ctx.setFillStyle(color);
4219
- ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
4220
- }
4221
- function drawBox(ctx, elem, pattern) {
4222
- clearContext(ctx);
4223
- drawBoxBorder(ctx, elem);
4224
- clearContext(ctx);
4225
- rotateElement(ctx, elem, function () {
4226
- var x = elem.x, y = elem.y, w = elem.w, h = elem.h;
4227
- var r = elem.desc.borderRadius || 0;
4228
- r = Math.min(r, w / 2, h / 2);
4229
- if (w < r * 2 || h < r * 2) {
4230
- r = 0;
4231
- }
4232
- ctx.beginPath();
4233
- ctx.moveTo(x + r, y);
4234
- ctx.arcTo(x + w, y, x + w, y + h, r);
4235
- ctx.arcTo(x + w, y + h, x, y + h, r);
4236
- ctx.arcTo(x, y + h, x, y, r);
4237
- ctx.arcTo(x, y, x + w, y, r);
4238
- ctx.closePath();
4239
- if (typeof pattern === 'string') {
4240
- ctx.setFillStyle(pattern);
4241
- }
4242
- else if (['CanvasPattern'].includes(istype.type(pattern))) {
4243
- ctx.setFillStyle(pattern);
4244
- }
4245
- ctx.fill();
4246
- });
4247
- }
4248
- function drawBoxBorder(ctx, elem) {
4249
- clearContext(ctx);
4250
- rotateElement(ctx, elem, function () {
4251
- if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
4252
- return;
4253
- }
4254
- var bw = elem.desc.borderWidth;
4255
- var borderColor = '#000000';
4256
- if (color.isColorStr(elem.desc.borderColor) === true) {
4257
- borderColor = elem.desc.borderColor;
4258
- }
4259
- var x = elem.x - bw / 2;
4260
- var y = elem.y - bw / 2;
4261
- var w = elem.w + bw;
4262
- var h = elem.h + bw;
4263
- var r = elem.desc.borderRadius || 0;
4264
- r = Math.min(r, w / 2, h / 2);
4265
- if (r < w / 2 && r < h / 2) {
4266
- r = r + bw / 2;
4267
- }
4268
- var desc = elem.desc;
4269
- if (desc.shadowColor !== undefined && index$1.color.isColorStr(desc.shadowColor)) {
4270
- ctx.setShadowColor(desc.shadowColor);
4271
- }
4272
- if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
4273
- ctx.setShadowOffsetX(desc.shadowOffsetX);
4274
- }
4275
- if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
4276
- ctx.setShadowOffsetY(desc.shadowOffsetY);
4277
- }
4278
- if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
4279
- ctx.setShadowBlur(desc.shadowBlur);
4280
- }
4281
- ctx.beginPath();
4282
- ctx.setLineWidth(bw);
4283
- ctx.setStrokeStyle(borderColor);
4284
- ctx.moveTo(x + r, y);
4285
- ctx.arcTo(x + w, y, x + w, y + h, r);
4286
- ctx.arcTo(x + w, y + h, x, y + h, r);
4287
- ctx.arcTo(x, y + h, x, y, r);
4288
- ctx.arcTo(x, y, x + w, y, r);
4289
- ctx.closePath();
4290
- ctx.stroke();
4291
- });
4292
- }
4293
-
4294
- function drawRect(ctx, elem) {
4295
- drawBox(ctx, elem, elem.desc.bgColor);
4296
- }
4297
-
4298
- function drawImage(ctx, elem, loader) {
4299
- var content = loader.getContent(elem.uuid);
4300
- rotateElement(ctx, elem, function () {
4301
- if (content) {
4302
- ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
4303
- }
4304
- });
4305
- }
4306
-
4307
- function drawSVG(ctx, elem, loader) {
4308
- var content = loader.getContent(elem.uuid);
4309
- rotateElement(ctx, elem, function () {
4310
- if (content) {
4311
- ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
4312
- }
4313
- });
4314
- }
4315
-
4316
- function drawHTML(ctx, elem, loader) {
4317
- var content = loader.getContent(elem.uuid);
4318
- rotateElement(ctx, elem, function () {
4319
- if (content) {
4320
- ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
4321
- }
4322
- });
4323
- }
4324
-
4325
- function drawText(ctx, elem, loader, helperConfig) {
4326
- clearContext(ctx);
4327
- drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
4328
- rotateElement(ctx, elem, function () {
4329
- var desc = __assign$4({
4330
- fontSize: 12,
4331
- fontFamily: 'sans-serif',
4332
- textAlign: 'center',
4333
- }, elem.desc);
4334
- ctx.setFillStyle(elem.desc.color);
4335
- ctx.setTextBaseline('top');
4336
- ctx.setFont({
4337
- fontWeight: desc.fontWeight,
4338
- fontSize: desc.fontSize,
4339
- fontFamily: desc.fontFamily
4340
- });
4341
- var descText = desc.text.replace(/\r\n/ig, '\n');
4342
- var fontHeight = desc.lineHeight || desc.fontSize;
4343
- var descTextList = descText.split('\n');
4344
- var lines = [];
4345
- descTextList.forEach(function (tempText) {
4346
- var lineText = '';
4347
- var lineNum = 0;
4348
- for (var i = 0; i < tempText.length; i++) {
4349
- if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
4350
- lineText += (tempText[i] || '');
4351
- }
4352
- else {
4353
- lines.push({
4354
- text: lineText,
4355
- width: ctx.calcScreenNum(ctx.measureText(lineText).width),
4356
- });
4357
- lineText = (tempText[i] || '');
4358
- lineNum++;
4359
- }
4360
- if ((lineNum + 1) * fontHeight > elem.h) {
4361
- break;
4362
- }
4363
- if (lineText && tempText.length - 1 === i) {
4364
- if ((lineNum + 1) * fontHeight < elem.h) {
4365
- lines.push({
4366
- text: lineText,
4367
- width: ctx.calcScreenNum(ctx.measureText(lineText).width),
4368
- });
4369
- break;
4370
- }
4371
- }
4372
- }
4373
- });
4374
- {
4375
- var _y_1 = elem.y;
4376
- if (lines.length * fontHeight < elem.h) {
4377
- _y_1 += ((elem.h - lines.length * fontHeight) / 2);
4378
- }
4379
- if (desc.textShadowColor !== undefined && index$1.color.isColorStr(desc.textShadowColor)) {
4380
- ctx.setShadowColor(desc.textShadowColor);
4381
- }
4382
- if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
4383
- ctx.setShadowOffsetX(desc.textShadowOffsetX);
4384
- }
4385
- if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
4386
- ctx.setShadowOffsetY(desc.textShadowOffsetY);
4387
- }
4388
- if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
4389
- ctx.setShadowBlur(desc.textShadowBlur);
4390
- }
4391
- lines.forEach(function (line, i) {
4392
- var _x = elem.x;
4393
- if (desc.textAlign === 'center') {
4394
- _x = elem.x + (elem.w - line.width) / 2;
4395
- }
4396
- else if (desc.textAlign === 'right') {
4397
- _x = elem.x + (elem.w - line.width);
4398
- }
4399
- ctx.fillText(line.text, _x, _y_1 + fontHeight * i);
4400
- });
4401
- clearContext(ctx);
4402
- }
4403
- if (index$1.color.isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
4404
- var _y_2 = elem.y;
4405
- if (lines.length * fontHeight < elem.h) {
4406
- _y_2 += ((elem.h - lines.length * fontHeight) / 2);
4407
- }
4408
- lines.forEach(function (line, i) {
4409
- var _x = elem.x;
4410
- if (desc.textAlign === 'center') {
4411
- _x = elem.x + (elem.w - line.width) / 2;
4412
- }
4413
- else if (desc.textAlign === 'right') {
4414
- _x = elem.x + (elem.w - line.width);
4415
- }
4416
- if (desc.strokeColor !== undefined) {
4417
- ctx.setStrokeStyle(desc.strokeColor);
4418
- }
4419
- if (desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
4420
- ctx.setLineWidth(desc.strokeWidth);
4421
- }
4422
- ctx.strokeText(line.text, _x, _y_2 + fontHeight * i);
4423
- });
4424
- }
4425
- });
4426
- }
4427
-
4428
- function drawCircle(ctx, elem) {
4429
- clearContext(ctx);
4430
- rotateElement(ctx, elem, function (ctx) {
4431
- var x = elem.x, y = elem.y, w = elem.w, h = elem.h, desc = elem.desc;
4432
- var _a = desc.bgColor, bgColor = _a === void 0 ? '#000000' : _a, _b = desc.borderColor, borderColor = _b === void 0 ? '#000000' : _b, _c = desc.borderWidth, borderWidth = _c === void 0 ? 0 : _c;
4433
- var a = w / 2;
4434
- var b = h / 2;
4435
- var centerX = x + a;
4436
- var centerY = y + b;
4437
- if (borderWidth && borderWidth > 0) {
4438
- var ba = borderWidth / 2 + a;
4439
- var bb = borderWidth / 2 + b;
4440
- ctx.beginPath();
4441
- ctx.setStrokeStyle(borderColor);
4442
- ctx.setLineWidth(borderWidth);
4443
- ctx.ellipse(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
4444
- ctx.closePath();
4445
- ctx.stroke();
4446
- }
4447
- ctx.beginPath();
4448
- ctx.setFillStyle(bgColor);
4449
- ctx.ellipse(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
4450
- ctx.closePath();
4451
- ctx.fill();
4452
- });
4453
- }
4454
-
4455
- function drawElementWrapper(ctx, config) {
4456
- if (!(config === null || config === void 0 ? void 0 : config.selectedElementWrapper)) {
4457
- return;
4458
- }
4459
- var wrapper = config.selectedElementWrapper;
4460
- clearContext(ctx);
4461
- rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
4462
- ctx.beginPath();
4463
- ctx.setLineDash(wrapper.lineDash);
4464
- ctx.setLineWidth(wrapper.lineWidth);
4465
- ctx.setStrokeStyle(wrapper.color);
4466
- ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
4467
- ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
4468
- ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
4469
- ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
4470
- ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
4471
- ctx.stroke();
4472
- ctx.closePath();
4473
- if (wrapper.lock !== true) {
4474
- if (wrapper.controllers.rotate.invisible !== true) {
4475
- ctx.beginPath();
4476
- ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
4477
- ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
4478
- ctx.stroke();
4479
- ctx.closePath();
4480
- ctx.beginPath();
4481
- ctx.setLineDash([]);
4482
- ctx.setLineWidth(wrapper.controllerSize / 2);
4483
- ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
4484
- ctx.stroke();
4485
- ctx.closePath();
4486
- }
4487
- ctx.setFillStyle(wrapper.color);
4488
- [
4489
- wrapper.controllers.topLeft,
4490
- wrapper.controllers.top,
4491
- wrapper.controllers.topRight,
4492
- wrapper.controllers.right,
4493
- wrapper.controllers.bottomRight,
4494
- wrapper.controllers.bottom,
4495
- wrapper.controllers.bottomLeft,
4496
- wrapper.controllers.left,
4497
- ].forEach(function (controller) {
4498
- if (controller.invisible !== true) {
4499
- ctx.beginPath();
4500
- ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
4501
- ctx.fill();
4502
- ctx.closePath();
4503
- }
4504
- });
4505
- }
4506
- else {
4507
- clearContext(ctx);
4508
- ctx.setStrokeStyle(wrapper.color);
4509
- [
4510
- wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
4511
- wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
4512
- ].forEach(function (controller) {
4513
- ctx.beginPath();
4514
- ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
4515
- ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
4516
- ctx.stroke();
4517
- ctx.closePath();
4518
- ctx.beginPath();
4519
- ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
4520
- ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
4521
- ctx.stroke();
4522
- ctx.closePath();
4523
- });
4524
- }
4525
- });
4526
- }
4527
- function drawAreaWrapper(ctx, config) {
4528
- if (!(config === null || config === void 0 ? void 0 : config.selectedAreaWrapper)) {
4529
- return;
4530
- }
4531
- var wrapper = config.selectedAreaWrapper;
4532
- if (wrapper && wrapper.w > 0 && wrapper.h > 0) {
4533
- clearContext(ctx);
4534
- ctx.setGlobalAlpha(0.3);
4535
- ctx.setFillStyle(wrapper.color);
4536
- ctx.fillRect(wrapper.x, wrapper.y, wrapper.w, wrapper.h);
4537
- clearContext(ctx);
4538
- ctx.beginPath();
4539
- ctx.setLineDash(wrapper.lineDash);
4540
- ctx.setLineWidth(wrapper.lineWidth);
4541
- ctx.setStrokeStyle(wrapper.color);
4542
- ctx.moveTo(wrapper.x, wrapper.y);
4543
- ctx.lineTo(wrapper.x + wrapper.w, wrapper.y);
4544
- ctx.lineTo(wrapper.x + wrapper.w, wrapper.y + wrapper.h);
4545
- ctx.lineTo(wrapper.x, wrapper.y + wrapper.h);
4546
- ctx.lineTo(wrapper.x, wrapper.y);
4547
- ctx.stroke();
4548
- ctx.closePath();
4549
- }
4550
- }
4551
- function drawElementListWrappers(ctx, config) {
4552
- if (!Array.isArray(config === null || config === void 0 ? void 0 : config.selectedElementListWrappers)) {
4553
- return;
4554
- }
4555
- var wrapperList = config.selectedElementListWrappers;
4556
- wrapperList === null || wrapperList === void 0 ? void 0 : wrapperList.forEach(function (wrapper) {
4557
- clearContext(ctx);
4558
- rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
4559
- clearContext(ctx);
4560
- ctx.setGlobalAlpha(0.05);
4561
- ctx.setFillStyle(wrapper.color);
4562
- ctx.fillRect(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x, wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y);
4563
- clearContext(ctx);
4564
- ctx.beginPath();
4565
- ctx.setLineDash(wrapper.lineDash);
4566
- ctx.setLineWidth(wrapper.lineWidth);
4567
- ctx.setStrokeStyle(wrapper.color);
4568
- ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
4569
- ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
4570
- ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
4571
- ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
4572
- ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
4573
- ctx.stroke();
4574
- ctx.closePath();
4575
- if (wrapper.lock === true) {
4576
- clearContext(ctx);
4577
- ctx.setStrokeStyle(wrapper.color);
4578
- [
4579
- wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
4580
- wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
4581
- ].forEach(function (controller) {
4582
- ctx.beginPath();
4583
- ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
4584
- ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
4585
- ctx.stroke();
4586
- ctx.closePath();
4587
- ctx.beginPath();
4588
- ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
4589
- ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
4590
- ctx.stroke();
4591
- ctx.closePath();
4592
- });
4593
- }
4594
- });
4595
- });
4596
- }
4597
-
4598
- var isColorStr = index$1.color.isColorStr;
4599
- function drawContext(ctx, data, helperConfig, loader) {
4600
- var _a;
4601
- clearContext(ctx);
4602
- var size = ctx.getSize();
4603
- ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
4604
- if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) {
4605
- drawBgColor(ctx, data.bgColor);
4606
- }
4607
- if (!(data.elements.length > 0)) {
4608
- return;
4609
- }
4610
- for (var i = 0; i < data.elements.length; i++) {
4611
- var elem = data.elements[i];
4612
- if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
4613
- continue;
4614
- }
4615
- switch (elem.type) {
4616
- case 'rect': {
4617
- drawRect(ctx, elem);
4618
- break;
4619
- }
4620
- case 'text': {
4621
- drawText(ctx, elem);
4622
- break;
4623
- }
4624
- case 'image': {
4625
- drawImage(ctx, elem, loader);
4626
- break;
4627
- }
4628
- case 'svg': {
4629
- drawSVG(ctx, elem, loader);
4630
- break;
4631
- }
4632
- case 'html': {
4633
- drawHTML(ctx, elem, loader);
4634
- break;
4635
- }
4636
- case 'circle': {
4637
- drawCircle(ctx, elem);
4638
- break;
4639
- }
4640
- }
4641
- }
4642
- drawElementWrapper(ctx, helperConfig);
4643
- drawAreaWrapper(ctx, helperConfig);
4644
- drawElementListWrappers(ctx, helperConfig);
4645
- }
4646
-
4647
- var defaultConfig = {
4648
- elementWrapper: {
4649
- color: '#2ab6f1',
4650
- lockColor: '#aaaaaa',
4651
- controllerSize: 6,
4652
- lineWidth: 1,
4653
- lineDash: [4, 3],
4654
- }
4655
- };
4656
- function mergeConfig(config) {
4657
- var result = index$1.data.deepClone(defaultConfig);
4658
- if (config) {
4659
- if (config.elementWrapper) {
4660
- result.elementWrapper = __assign$4(__assign$4({}, result.elementWrapper), config.elementWrapper);
4661
- }
4662
- }
4663
- return result;
4664
- }
4665
-
4666
- var CoreEvent = (function () {
4667
- function CoreEvent() {
4668
- this._listeners = new Map();
4669
- }
4670
- CoreEvent.prototype.on = function (eventKey, callback) {
4671
- if (this._listeners.has(eventKey)) {
4672
- var callbacks = this._listeners.get(eventKey);
4673
- callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
4674
- this._listeners.set(eventKey, callbacks || []);
4675
- }
4676
- else {
4677
- this._listeners.set(eventKey, [callback]);
4678
- }
4679
- };
4680
- CoreEvent.prototype.off = function (eventKey, callback) {
4681
- if (this._listeners.has(eventKey)) {
4682
- var callbacks = this._listeners.get(eventKey);
4683
- if (Array.isArray(callbacks)) {
4684
- for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
4685
- if (callbacks[i] === callback) {
4686
- callbacks.splice(i, 1);
4687
- break;
4688
- }
4689
- }
4690
- }
4691
- this._listeners.set(eventKey, callbacks || []);
4692
- }
4693
- };
4694
- CoreEvent.prototype.trigger = function (eventKey, arg) {
4695
- var callbacks = this._listeners.get(eventKey);
4696
- if (Array.isArray(callbacks)) {
4697
- callbacks.forEach(function (cb) {
4698
- cb(arg);
4699
- });
4700
- return true;
4701
- }
4702
- else {
4703
- return false;
4704
- }
4705
- };
4706
- CoreEvent.prototype.has = function (name) {
4707
- if (this._listeners.has(name)) {
4708
- var list = this._listeners.get(name);
4709
- if (Array.isArray(list) && list.length > 0) {
4710
- return true;
4711
- }
4712
- }
4713
- return false;
4714
- };
4715
- return CoreEvent;
4716
- }());
4717
-
4718
- function isChangeImageElementResource(before, after) {
4719
- var _a, _b;
4720
- return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src));
4721
- }
4722
- function isChangeSVGElementResource(before, after) {
4723
- var _a, _b;
4724
- return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg));
4725
- }
4726
- function isChangeHTMLElementResource(before, after) {
4727
- var _a, _b, _c, _d, _e, _f;
4728
- return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html)
4729
- || ((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width)
4730
- || ((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
4731
- }
4732
- function diffElementResourceChange(before, after) {
4733
- var result = null;
4734
- var isChange = false;
4735
- switch (after.type) {
4736
- case 'image': {
4737
- isChange = isChangeImageElementResource(before, after);
4738
- break;
4739
- }
4740
- case 'svg': {
4741
- isChange = isChangeSVGElementResource(before, after);
4742
- break;
4743
- }
4744
- case 'html': {
4745
- isChange = isChangeHTMLElementResource(before, after);
4746
- break;
4747
- }
4748
- }
4749
- if (isChange === true) {
4750
- result = after.uuid;
4751
- }
4752
- return result;
4753
- }
4754
- function diffElementResourceChangeList(before, after) {
4755
- var _a;
4756
- var uuids = [];
4757
- var beforeMap = parseDataElementMap(before);
4758
- var afterMap = parseDataElementMap(after);
4759
- for (var uuid in afterMap) {
4760
- if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
4761
- continue;
4762
- }
4763
- if (beforeMap[uuid]) {
4764
- var isChange = false;
4765
- switch (beforeMap[uuid].type) {
4766
- case 'image': {
4767
- isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
4768
- break;
4769
- }
4770
- case 'svg': {
4771
- isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
4772
- break;
4773
- }
4774
- case 'html': {
4775
- isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
4776
- break;
4777
- }
4778
- }
4779
- if (isChange === true) {
4780
- uuids.push(uuid);
4781
- }
4782
- }
4783
- else {
4784
- uuids.push(uuid);
4785
- }
4786
- }
4787
- return uuids;
4788
- }
4789
- function parseDataElementMap(data) {
4790
- var elemMap = {};
4791
- data.elements.forEach(function (elem) {
4792
- elemMap[elem.uuid] = elem;
4793
- });
4794
- return elemMap;
4795
- }
4796
-
4797
- function limitNum(num) {
4798
- var numStr = num.toFixed(2);
4799
- return parseFloat(numStr);
4275
+ function limitNum(num) {
4276
+ var numStr = num.toFixed(2);
4277
+ return parseFloat(numStr);
4800
4278
  }
4801
4279
  function limitAngle(angle) {
4802
4280
  return limitNum(angle % 360);
@@ -5191,7 +4669,7 @@ function changeMoveDistDirect(moveDist, moveDirect) {
5191
4669
  }
5192
4670
 
5193
4671
  var limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
5194
- var deepClone$4 = index$1.data.deepClone;
4672
+ var deepClone$3 = index$1.data.deepClone;
5195
4673
  var Helper = (function () {
5196
4674
  function Helper(board, config) {
5197
4675
  this._areaStart = { x: 0, y: 0 };
@@ -5209,7 +4687,7 @@ var Helper = (function () {
5209
4687
  this._updateSelectedElementListWrapper(data, opts);
5210
4688
  };
5211
4689
  Helper.prototype.getConfig = function () {
5212
- return deepClone$4(this._helperConfig);
4690
+ return deepClone$3(this._helperConfig);
5213
4691
  };
5214
4692
  Helper.prototype.getElementIndexByUUID = function (uuid) {
5215
4693
  var index = this._helperConfig.elementIndexMap[uuid];
@@ -5478,48 +4956,50 @@ var Helper = (function () {
5478
4956
  if (typeof elem.angle === 'number' && Math.abs(elem.angle) > limitQbliqueAngle) {
5479
4957
  hideObliqueDirection = true;
5480
4958
  }
4959
+ var controllerOffset = lineWidth;
5481
4960
  var wrapper = {
5482
4961
  uuid: elem.uuid,
5483
4962
  controllerSize: controllerSize,
4963
+ controllerOffset: controllerOffset,
5484
4964
  lock: ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.lock) === true,
5485
4965
  controllers: {
5486
4966
  topLeft: {
5487
- x: elem.x - controllerSize - bw,
5488
- y: elem.y - controllerSize - bw,
4967
+ x: elem.x - controllerOffset - bw,
4968
+ y: elem.y - controllerOffset - bw,
5489
4969
  invisible: hideObliqueDirection || ((_c = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _c === void 0 ? void 0 : _c.disbaleScale) === true,
5490
4970
  },
5491
4971
  top: {
5492
4972
  x: elem.x + elem.w / 2,
5493
- y: elem.y - controllerSize - bw,
4973
+ y: elem.y - controllerOffset - bw,
5494
4974
  invisible: ((_d = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _d === void 0 ? void 0 : _d.disbaleScale) === true,
5495
4975
  },
5496
4976
  topRight: {
5497
- x: elem.x + elem.w + controllerSize + bw,
5498
- y: elem.y - controllerSize - bw,
4977
+ x: elem.x + elem.w + controllerOffset + bw,
4978
+ y: elem.y - controllerOffset - bw,
5499
4979
  invisible: hideObliqueDirection || ((_e = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _e === void 0 ? void 0 : _e.disbaleScale) === true,
5500
4980
  },
5501
4981
  right: {
5502
- x: elem.x + elem.w + controllerSize + bw,
4982
+ x: elem.x + elem.w + controllerOffset + bw,
5503
4983
  y: elem.y + elem.h / 2,
5504
4984
  invisible: ((_f = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _f === void 0 ? void 0 : _f.disbaleScale) === true
5505
4985
  },
5506
4986
  bottomRight: {
5507
- x: elem.x + elem.w + controllerSize + bw,
5508
- y: elem.y + elem.h + controllerSize + bw,
4987
+ x: elem.x + elem.w + controllerOffset + bw,
4988
+ y: elem.y + elem.h + controllerOffset + bw,
5509
4989
  invisible: hideObliqueDirection || ((_g = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _g === void 0 ? void 0 : _g.disbaleScale) === true,
5510
4990
  },
5511
4991
  bottom: {
5512
4992
  x: elem.x + elem.w / 2,
5513
- y: elem.y + elem.h + controllerSize + bw,
4993
+ y: elem.y + elem.h + controllerOffset + bw,
5514
4994
  invisible: ((_h = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _h === void 0 ? void 0 : _h.disbaleScale) === true,
5515
4995
  },
5516
4996
  bottomLeft: {
5517
- x: elem.x - controllerSize - bw,
5518
- y: elem.y + elem.h + controllerSize + bw,
4997
+ x: elem.x - controllerOffset - bw,
4998
+ y: elem.y + elem.h + controllerOffset + bw,
5519
4999
  invisible: hideObliqueDirection || ((_j = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _j === void 0 ? void 0 : _j.disbaleScale) === true,
5520
5000
  },
5521
5001
  left: {
5522
- x: elem.x - controllerSize - bw,
5002
+ x: elem.x - controllerOffset - bw,
5523
5003
  y: elem.y + elem.h / 2,
5524
5004
  invisible: ((_k = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _k === void 0 ? void 0 : _k.disbaleScale) === true
5525
5005
  },
@@ -5542,299 +5022,8 @@ var Helper = (function () {
5542
5022
  return Helper;
5543
5023
  }());
5544
5024
 
5545
- var LoaderEvent = (function () {
5546
- function LoaderEvent() {
5547
- this._listeners = new Map();
5548
- }
5549
- LoaderEvent.prototype.on = function (eventKey, callback) {
5550
- if (this._listeners.has(eventKey)) {
5551
- var callbacks = this._listeners.get(eventKey);
5552
- callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
5553
- this._listeners.set(eventKey, callbacks || []);
5554
- }
5555
- else {
5556
- this._listeners.set(eventKey, [callback]);
5557
- }
5558
- };
5559
- LoaderEvent.prototype.off = function (eventKey, callback) {
5560
- if (this._listeners.has(eventKey)) {
5561
- var callbacks = this._listeners.get(eventKey);
5562
- if (Array.isArray(callbacks)) {
5563
- for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
5564
- if (callbacks[i] === callback) {
5565
- callbacks.splice(i, 1);
5566
- break;
5567
- }
5568
- }
5569
- }
5570
- this._listeners.set(eventKey, callbacks || []);
5571
- }
5572
- };
5573
- LoaderEvent.prototype.trigger = function (eventKey, arg) {
5574
- var callbacks = this._listeners.get(eventKey);
5575
- if (Array.isArray(callbacks)) {
5576
- callbacks.forEach(function (cb) {
5577
- cb(arg);
5578
- });
5579
- return true;
5580
- }
5581
- else {
5582
- return false;
5583
- }
5584
- };
5585
- LoaderEvent.prototype.has = function (name) {
5586
- if (this._listeners.has(name)) {
5587
- var list = this._listeners.get(name);
5588
- if (Array.isArray(list) && list.length > 0) {
5589
- return true;
5590
- }
5591
- }
5592
- return false;
5593
- };
5594
- return LoaderEvent;
5595
- }());
5596
-
5597
- function filterScript(html) {
5598
- return html.replace(/<script[\s\S]*?<\/script>/ig, '');
5599
- }
5600
-
5601
- var _a = index$1.loader, loadImage = _a.loadImage, loadSVG = _a.loadSVG, loadHTML = _a.loadHTML;
5602
- var LoaderStatus;
5603
- (function (LoaderStatus) {
5604
- LoaderStatus["FREE"] = "free";
5605
- LoaderStatus["LOADING"] = "loading";
5606
- LoaderStatus["COMPLETE"] = "complete";
5607
- })(LoaderStatus || (LoaderStatus = {}));
5608
- var Loader = (function () {
5609
- function Loader(opts) {
5610
- this._currentLoadData = {};
5611
- this._currentUUIDQueue = [];
5612
- this._storageLoadData = {};
5613
- this._status = LoaderStatus.FREE;
5614
- this._waitingLoadQueue = [];
5615
- this._opts = opts;
5616
- this._event = new LoaderEvent();
5617
- this._waitingLoadQueue = [];
5618
- }
5619
- Loader.prototype.load = function (data, changeResourceUUIDs) {
5620
- var _a = this._resetLoadData(data, changeResourceUUIDs), uuidQueue = _a[0], loadData = _a[1];
5621
- if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
5622
- this._currentUUIDQueue = uuidQueue;
5623
- this._currentLoadData = loadData;
5624
- this._loadTask();
5625
- }
5626
- else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
5627
- this._waitingLoadQueue.push({
5628
- uuidQueue: uuidQueue,
5629
- loadData: loadData,
5630
- });
5631
- }
5632
- };
5633
- Loader.prototype.on = function (name, callback) {
5634
- this._event.on(name, callback);
5635
- };
5636
- Loader.prototype.off = function (name, callback) {
5637
- this._event.off(name, callback);
5638
- };
5639
- Loader.prototype.isComplete = function () {
5640
- return this._status === LoaderStatus.COMPLETE;
5641
- };
5642
- Loader.prototype.getContent = function (uuid) {
5643
- var _a;
5644
- if (((_a = this._storageLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.status) === 'loaded') {
5645
- return this._storageLoadData[uuid].content;
5646
- }
5647
- return null;
5648
- };
5649
- Loader.prototype._resetLoadData = function (data, changeResourceUUIDs) {
5650
- var loadData = {};
5651
- var uuidQueue = [];
5652
- var storageLoadData = this._storageLoadData;
5653
- for (var i = data.elements.length - 1; i >= 0; i--) {
5654
- var elem = data.elements[i];
5655
- if (['image', 'svg', 'html',].includes(elem.type)) {
5656
- if (!storageLoadData[elem.uuid]) {
5657
- loadData[elem.uuid] = this._createEmptyLoadItem(elem);
5658
- uuidQueue.push(elem.uuid);
5659
- }
5660
- else {
5661
- if (changeResourceUUIDs.includes(elem.uuid)) {
5662
- loadData[elem.uuid] = this._createEmptyLoadItem(elem);
5663
- uuidQueue.push(elem.uuid);
5664
- }
5665
- }
5666
- }
5667
- }
5668
- return [uuidQueue, loadData];
5669
- };
5670
- Loader.prototype._createEmptyLoadItem = function (elem) {
5671
- var source = '';
5672
- var type = elem.type;
5673
- var elemW = elem.w;
5674
- var elemH = elem.h;
5675
- if (elem.type === 'image') {
5676
- var _elem = elem;
5677
- source = _elem.desc.src || '';
5678
- }
5679
- else if (elem.type === 'svg') {
5680
- var _elem = elem;
5681
- source = _elem.desc.svg || '';
5682
- }
5683
- else if (elem.type === 'html') {
5684
- var _elem = elem;
5685
- source = filterScript(_elem.desc.html || '');
5686
- elemW = _elem.desc.width || elem.w;
5687
- elemH = _elem.desc.height || elem.h;
5688
- }
5689
- return {
5690
- type: type,
5691
- status: 'null',
5692
- content: null,
5693
- source: source,
5694
- elemW: elemW,
5695
- elemH: elemH,
5696
- };
5697
- };
5698
- Loader.prototype._loadTask = function () {
5699
- var _this = this;
5700
- if (this._status === LoaderStatus.LOADING) {
5701
- return;
5702
- }
5703
- this._status = LoaderStatus.LOADING;
5704
- if (this._currentUUIDQueue.length === 0) {
5705
- if (this._waitingLoadQueue.length === 0) {
5706
- this._status = LoaderStatus.COMPLETE;
5707
- this._event.trigger('complete', undefined);
5708
- return;
5709
- }
5710
- else {
5711
- var waitingItem = this._waitingLoadQueue.shift();
5712
- if (waitingItem) {
5713
- var uuidQueue = waitingItem.uuidQueue, loadData = waitingItem.loadData;
5714
- this._currentLoadData = loadData;
5715
- this._currentUUIDQueue = uuidQueue;
5716
- }
5717
- }
5718
- }
5719
- var maxParallelNum = this._opts.maxParallelNum;
5720
- var uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
5721
- var uuidMap = {};
5722
- uuids.forEach(function (url, i) {
5723
- uuidMap[url] = i;
5724
- });
5725
- var loadUUIDList = [];
5726
- var _loadAction = function () {
5727
- if (loadUUIDList.length >= maxParallelNum) {
5728
- return false;
5729
- }
5730
- if (uuids.length === 0) {
5731
- return true;
5732
- }
5733
- var _loop_1 = function (i) {
5734
- var uuid = uuids.shift();
5735
- if (uuid === undefined) {
5736
- return "break";
5737
- }
5738
- loadUUIDList.push(uuid);
5739
- _this._loadElementSource(_this._currentLoadData[uuid]).then(function (image) {
5740
- loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
5741
- var status = _loadAction();
5742
- _this._storageLoadData[uuid] = {
5743
- type: _this._currentLoadData[uuid].type,
5744
- status: 'loaded',
5745
- content: image,
5746
- source: _this._currentLoadData[uuid].source,
5747
- elemW: _this._currentLoadData[uuid].elemW,
5748
- elemH: _this._currentLoadData[uuid].elemH,
5749
- };
5750
- if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
5751
- _this._status = LoaderStatus.FREE;
5752
- _this._loadTask();
5753
- }
5754
- _this._event.trigger('load', {
5755
- type: _this._storageLoadData[uuid].type,
5756
- status: _this._storageLoadData[uuid].status,
5757
- content: _this._storageLoadData[uuid].content,
5758
- source: _this._storageLoadData[uuid].source,
5759
- elemW: _this._storageLoadData[uuid].elemW,
5760
- elemH: _this._storageLoadData[uuid].elemH,
5761
- });
5762
- }).catch(function (err) {
5763
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
5764
- console.warn(err);
5765
- loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
5766
- var status = _loadAction();
5767
- if (_this._currentLoadData[uuid]) {
5768
- _this._storageLoadData[uuid] = {
5769
- type: (_a = _this._currentLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.type,
5770
- status: 'fail',
5771
- content: null,
5772
- error: err,
5773
- source: (_b = _this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
5774
- elemW: (_c = _this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.elemW,
5775
- elemH: (_d = _this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
5776
- };
5777
- }
5778
- if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
5779
- _this._status = LoaderStatus.FREE;
5780
- _this._loadTask();
5781
- }
5782
- if (_this._currentLoadData[uuid]) {
5783
- _this._event.trigger('error', {
5784
- type: (_e = _this._storageLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.type,
5785
- status: (_f = _this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.status,
5786
- content: (_g = _this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.content,
5787
- source: (_h = _this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.source,
5788
- elemW: (_j = _this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.elemW,
5789
- elemH: (_k = _this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemH,
5790
- });
5791
- }
5792
- });
5793
- };
5794
- for (var i = loadUUIDList.length; i < maxParallelNum; i++) {
5795
- var state_1 = _loop_1();
5796
- if (state_1 === "break")
5797
- break;
5798
- }
5799
- return false;
5800
- };
5801
- _loadAction();
5802
- };
5803
- Loader.prototype._loadElementSource = function (params) {
5804
- return __awaiter$4(this, void 0, void 0, function () {
5805
- var image, image, image;
5806
- return __generator$4(this, function (_a) {
5807
- switch (_a.label) {
5808
- case 0:
5809
- if (!(params && params.type === 'image')) return [3, 2];
5810
- return [4, loadImage(params.source)];
5811
- case 1:
5812
- image = _a.sent();
5813
- return [2, image];
5814
- case 2:
5815
- if (!(params && params.type === 'svg')) return [3, 4];
5816
- return [4, loadSVG(params.source)];
5817
- case 3:
5818
- image = _a.sent();
5819
- return [2, image];
5820
- case 4:
5821
- if (!(params && params.type === 'html')) return [3, 6];
5822
- return [4, loadHTML(params.source, {
5823
- width: params.elemW, height: params.elemH
5824
- })];
5825
- case 5:
5826
- image = _a.sent();
5827
- return [2, image];
5828
- case 6: throw Error('Element\'s source is not support!');
5829
- }
5830
- });
5831
- });
5832
- };
5833
- return Loader;
5834
- }());
5835
-
5836
5025
  var _board$1 = Symbol('_displayCtx');
5837
- var _helper$1 = Symbol('_helper');
5026
+ var _helper = Symbol('_helper');
5838
5027
  var _element$1 = Symbol('_element');
5839
5028
  var _opts$1 = Symbol('_opts');
5840
5029
  var Mapper = (function () {
@@ -5842,7 +5031,7 @@ var Mapper = (function () {
5842
5031
  this[_opts$1] = opts;
5843
5032
  this[_board$1] = this[_opts$1].board;
5844
5033
  this[_element$1] = this[_opts$1].element;
5845
- this[_helper$1] = this[_opts$1].helper;
5034
+ this[_helper] = this[_opts$1].helper;
5846
5035
  }
5847
5036
  Mapper.prototype.isEffectivePoint = function (p) {
5848
5037
  var scrollLineWidth = this[_board$1].getScrollLineWidth();
@@ -5858,7 +5047,7 @@ var Mapper = (function () {
5858
5047
  if (!this.isEffectivePoint(p)) {
5859
5048
  return { cursor: cursor, elementUUID: elementUUID };
5860
5049
  }
5861
- var _a = this[_helper$1].isPointInElementWrapperController(p, data), uuid = _a.uuid, hoverControllerDirection = _a.hoverControllerDirection;
5050
+ var _a = this[_helper].isPointInElementWrapperController(p, data), uuid = _a.uuid, hoverControllerDirection = _a.hoverControllerDirection;
5862
5051
  var direction = hoverControllerDirection;
5863
5052
  if (uuid && direction) {
5864
5053
  switch (direction) {
@@ -5945,198 +5134,19 @@ function isElement(elem) {
5945
5134
  return false;
5946
5135
  }
5947
5136
  return true;
5948
- }
5949
- function isNumber(num) {
5950
- return (num >= 0 || num < 0);
5951
- }
5952
-
5953
- var RendererEvent = (function () {
5954
- function RendererEvent() {
5955
- this._listeners = new Map();
5956
- }
5957
- RendererEvent.prototype.on = function (eventKey, callback) {
5958
- if (this._listeners.has(eventKey)) {
5959
- var callbacks = this._listeners.get(eventKey);
5960
- callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
5961
- this._listeners.set(eventKey, callbacks || []);
5962
- }
5963
- else {
5964
- this._listeners.set(eventKey, [callback]);
5965
- }
5966
- };
5967
- RendererEvent.prototype.off = function (eventKey, callback) {
5968
- if (this._listeners.has(eventKey)) {
5969
- var callbacks = this._listeners.get(eventKey);
5970
- if (Array.isArray(callbacks)) {
5971
- for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
5972
- if (callbacks[i] === callback) {
5973
- callbacks.splice(i, 1);
5974
- break;
5975
- }
5976
- }
5977
- }
5978
- this._listeners.set(eventKey, callbacks || []);
5979
- }
5980
- };
5981
- RendererEvent.prototype.trigger = function (eventKey, arg) {
5982
- var callbacks = this._listeners.get(eventKey);
5983
- if (Array.isArray(callbacks)) {
5984
- callbacks.forEach(function (cb) {
5985
- cb(arg);
5986
- });
5987
- return true;
5988
- }
5989
- else {
5990
- return false;
5991
- }
5992
- };
5993
- RendererEvent.prototype.has = function (name) {
5994
- if (this._listeners.has(name)) {
5995
- var list = this._listeners.get(name);
5996
- if (Array.isArray(list) && list.length > 0) {
5997
- return true;
5998
- }
5999
- }
6000
- return false;
6001
- };
6002
- return RendererEvent;
6003
- }());
6004
-
6005
- var requestAnimationFrame = window.requestAnimationFrame;
6006
- var deepClone$3 = index$1.data.deepClone;
6007
- var DrawStatus;
6008
- (function (DrawStatus) {
6009
- DrawStatus["NULL"] = "null";
6010
- DrawStatus["FREE"] = "free";
6011
- DrawStatus["DRAWING"] = "drawing";
6012
- DrawStatus["FREEZE"] = "freeze";
6013
- })(DrawStatus || (DrawStatus = {}));
6014
- ((function (_super) {
6015
- __extends$1(Renderer, _super);
6016
- function Renderer(board) {
6017
- var _this = _super.call(this) || this;
6018
- _this._queue = [];
6019
- _this._status = DrawStatus.NULL;
6020
- _this._board = board;
6021
- _this._loader = new Loader({
6022
- board: board,
6023
- maxParallelNum: 6
6024
- });
6025
- _this._loader.on('load', function (res) {
6026
- _this._drawFrame();
6027
- });
6028
- _this._loader.on('error', function (res) {
6029
- console.log('Loader Error: ', res);
6030
- });
6031
- _this._loader.on('complete', function (res) {
6032
- });
6033
- return _this;
6034
- }
6035
- Renderer.prototype.freeze = function () {
6036
- this._status = DrawStatus.FREEZE;
6037
- };
6038
- Renderer.prototype.thaw = function () {
6039
- this._status = DrawStatus.FREE;
6040
- };
6041
- Renderer.prototype.render = function (data, helper, changeResourceUUIDs) {
6042
- if ([DrawStatus.FREEZE].includes(this._status)) {
6043
- return;
6044
- }
6045
- var _data = deepClone$3({ data: data, helper: helper });
6046
- this._queue.push(_data);
6047
- if (this._status !== DrawStatus.DRAWING) {
6048
- this._status = DrawStatus.DRAWING;
6049
- this._drawFrame();
6050
- }
6051
- this._loader.load(data, changeResourceUUIDs);
6052
- };
6053
- Renderer.prototype._drawFrame = function () {
6054
- var _this = this;
6055
- if (this._status === DrawStatus.FREEZE) {
6056
- return;
6057
- }
6058
- requestAnimationFrame(function () {
6059
- if (_this._status === DrawStatus.FREEZE) {
6060
- return;
6061
- }
6062
- var ctx = _this._board.getContext();
6063
- var item = _this._queue[0];
6064
- var isLastFrame = false;
6065
- if (_this._queue.length > 1) {
6066
- item = _this._queue.shift();
6067
- }
6068
- else {
6069
- isLastFrame = true;
6070
- }
6071
- if (_this._loader.isComplete() !== true) {
6072
- _this._drawFrame();
6073
- if (item) {
6074
- drawContext(ctx, item.data, item.helper, _this._loader);
6075
- _this._board.draw();
6076
- }
6077
- }
6078
- else if (item) {
6079
- drawContext(ctx, item.data, item.helper, _this._loader);
6080
- _this._board.draw();
6081
- _this._retainQueueOneItem();
6082
- if (!isLastFrame) {
6083
- _this._drawFrame();
6084
- }
6085
- else {
6086
- _this._status = DrawStatus.FREE;
6087
- }
6088
- }
6089
- else {
6090
- _this._status = DrawStatus.FREE;
6091
- }
6092
- _this.trigger('drawFrame', undefined);
6093
- if (_this._loader.isComplete() === true && _this._queue.length === 1 && _this._status === DrawStatus.FREE) {
6094
- _this.trigger('drawFrameComplete', undefined);
6095
- _this.freeze();
6096
- }
6097
- });
6098
- };
6099
- Renderer.prototype._retainQueueOneItem = function () {
6100
- if (this._queue.length <= 1) {
6101
- return;
6102
- }
6103
- var lastOne = deepClone$3(this._queue[this._queue.length - 1]);
6104
- this._queue = [lastOne];
6105
- };
6106
- return Renderer;
6107
- })(RendererEvent));
6108
-
6109
- var Mode;
6110
- (function (Mode) {
6111
- Mode["NULL"] = "null";
6112
- Mode["SELECT_ELEMENT"] = "select-element";
6113
- Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
6114
- Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
6115
- Mode["SELECT_AREA"] = "select-area";
6116
- })(Mode || (Mode = {}));
6117
- var CursorStatus;
6118
- (function (CursorStatus) {
6119
- CursorStatus["DRAGGING"] = "dragging";
6120
- CursorStatus["NULL"] = "null";
6121
- })(CursorStatus || (CursorStatus = {}));
6122
-
6123
- function createData() {
6124
- return {
6125
- onlyRender: false,
6126
- hasInited: false,
6127
- mode: Mode.NULL,
6128
- cursorStatus: CursorStatus.NULL,
6129
- selectedUUID: null,
6130
- selectedUUIDList: [],
6131
- hoverUUID: null,
6132
- selectedControllerDirection: null,
6133
- hoverControllerDirection: null,
6134
- prevPoint: null,
5137
+ }
5138
+ function isNumber(num) {
5139
+ return (num >= 0 || num < 0);
5140
+ }
5141
+
5142
+ function createData$1() {
5143
+ return {
5144
+ hasInited: false,
6135
5145
  };
6136
5146
  }
6137
- var TempData = (function () {
5147
+ var TempData$1 = (function () {
6138
5148
  function TempData() {
6139
- this._temp = createData();
5149
+ this._temp = createData$1();
6140
5150
  }
6141
5151
  TempData.prototype.set = function (name, value) {
6142
5152
  this._temp[name] = value;
@@ -6145,7 +5155,7 @@ var TempData = (function () {
6145
5155
  return this._temp[name];
6146
5156
  };
6147
5157
  TempData.prototype.clear = function () {
6148
- this._temp = createData();
5158
+ this._temp = createData$1();
6149
5159
  };
6150
5160
  return TempData;
6151
5161
  }());
@@ -6156,30 +5166,42 @@ var _opts = Symbol('_opts');
6156
5166
  var _config = Symbol('_config');
6157
5167
  var _renderer = Symbol('_renderer');
6158
5168
  var _element = Symbol('_element');
6159
- var _helper = Symbol('_helper');
6160
5169
  var _tempData = Symbol('_tempData');
6161
5170
  var _draw = Symbol('_draw');
6162
5171
  var _coreEvent = Symbol('_coreEvent');
6163
- var _mapper = Symbol('_mapper');
6164
5172
  var _emitChangeScreen = Symbol('_emitChangeScreen');
6165
5173
  var _emitChangeData = Symbol('_emitChangeData');
6166
- var _todo = Symbol('_todo');
5174
+ var _engine = Symbol('_engine');
5175
+
5176
+ var Mode;
5177
+ (function (Mode) {
5178
+ Mode["NULL"] = "null";
5179
+ Mode["SELECT_ELEMENT"] = "select-element";
5180
+ Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
5181
+ Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
5182
+ Mode["SELECT_AREA"] = "select-area";
5183
+ })(Mode || (Mode = {}));
5184
+ var CursorStatus;
5185
+ (function (CursorStatus) {
5186
+ CursorStatus["DRAGGING"] = "dragging";
5187
+ CursorStatus["NULL"] = "null";
5188
+ })(CursorStatus || (CursorStatus = {}));
6167
5189
 
6168
5190
  var deepClone$2 = index$1.data.deepClone;
6169
5191
  var createUUID = index$1.uuid.createUUID;
6170
5192
  function getSelectedElements(core) {
6171
5193
  var elems = [];
6172
5194
  var list = [];
6173
- var uuid = core[_tempData].get('selectedUUID');
5195
+ var uuid = core[_engine].temp.get('selectedUUID');
6174
5196
  if (typeof uuid === 'string' && uuid) {
6175
5197
  list.push(uuid);
6176
5198
  }
6177
5199
  else {
6178
- list = core[_tempData].get('selectedUUIDList');
5200
+ list = core[_engine].temp.get('selectedUUIDList');
6179
5201
  }
6180
5202
  list.forEach(function (uuid) {
6181
5203
  var _a;
6182
- var index = core[_helper].getElementIndexByUUID(uuid);
5204
+ var index = core[_engine].helper.getElementIndexByUUID(uuid);
6183
5205
  if (index !== null && index >= 0) {
6184
5206
  var elem = (_a = core[_data]) === null || _a === void 0 ? void 0 : _a.elements[index];
6185
5207
  if (elem)
@@ -6190,7 +5212,7 @@ function getSelectedElements(core) {
6190
5212
  }
6191
5213
  function getElement(core, uuid) {
6192
5214
  var elem = null;
6193
- var index = core[_helper].getElementIndexByUUID(uuid);
5215
+ var index = core[_engine].helper.getElementIndexByUUID(uuid);
6194
5216
  if (index !== null && core[_data].elements[index]) {
6195
5217
  elem = deepClone$2(core[_data].elements[index]);
6196
5218
  }
@@ -6222,33 +5244,29 @@ function updateElement(core, elem) {
6222
5244
  core[_draw]({ resourceChangeUUIDs: resourceChangeUUIDs });
6223
5245
  }
6224
5246
  function selectElementByIndex(core, index, opts) {
6225
- if (core[_tempData].get('onlyRender') === true)
6226
- return;
6227
5247
  if (core[_data].elements[index]) {
6228
5248
  var uuid = core[_data].elements[index].uuid;
6229
5249
  if ((opts === null || opts === void 0 ? void 0 : opts.useMode) === true) {
6230
- core[_tempData].set('mode', Mode.SELECT_ELEMENT);
5250
+ core[_engine].temp.set('mode', Mode.SELECT_ELEMENT);
6231
5251
  }
6232
5252
  else {
6233
- core[_tempData].set('mode', Mode.NULL);
5253
+ core[_engine].temp.set('mode', Mode.NULL);
6234
5254
  }
6235
5255
  if (typeof uuid === 'string') {
6236
- core[_tempData].set('selectedUUID', uuid);
6237
- core[_tempData].set('selectedUUIDList', []);
5256
+ core[_engine].temp.set('selectedUUID', uuid);
5257
+ core[_engine].temp.set('selectedUUIDList', []);
6238
5258
  }
6239
5259
  core[_draw]();
6240
5260
  }
6241
5261
  }
6242
5262
  function selectElement(core, uuid, opts) {
6243
- if (core[_tempData].get('onlyRender') === true)
6244
- return;
6245
- var index = core[_helper].getElementIndexByUUID(uuid);
5263
+ var index = core[_engine].helper.getElementIndexByUUID(uuid);
6246
5264
  if (typeof index === 'number' && index >= 0) {
6247
5265
  core.selectElementByIndex(index, opts);
6248
5266
  }
6249
5267
  }
6250
5268
  function moveUpElement(core, uuid) {
6251
- var index = core[_helper].getElementIndexByUUID(uuid);
5269
+ var index = core[_engine].helper.getElementIndexByUUID(uuid);
6252
5270
  if (typeof index === 'number' && index >= 0 && index < core[_data].elements.length - 1) {
6253
5271
  var temp = core[_data].elements[index];
6254
5272
  core[_data].elements[index] = core[_data].elements[index + 1];
@@ -6258,7 +5276,7 @@ function moveUpElement(core, uuid) {
6258
5276
  core[_draw]();
6259
5277
  }
6260
5278
  function moveDownElement(core, uuid) {
6261
- var index = core[_helper].getElementIndexByUUID(uuid);
5279
+ var index = core[_engine].helper.getElementIndexByUUID(uuid);
6262
5280
  if (typeof index === 'number' && index > 0 && index < core[_data].elements.length) {
6263
5281
  var temp = core[_data].elements[index];
6264
5282
  core[_data].elements[index] = core[_data].elements[index - 1];
@@ -6284,7 +5302,7 @@ function deleteElement(core, uuid) {
6284
5302
  }
6285
5303
  }
6286
5304
  function insertElementBefore(core, elem, beforeUUID) {
6287
- var index = core[_helper].getElementIndexByUUID(beforeUUID);
5305
+ var index = core[_engine].helper.getElementIndexByUUID(beforeUUID);
6288
5306
  if (index !== null) {
6289
5307
  return core.insertElementBeforeIndex(elem, index);
6290
5308
  }
@@ -6302,7 +5320,7 @@ function insertElementBeforeIndex(core, elem, index) {
6302
5320
  return null;
6303
5321
  }
6304
5322
  function insertElementAfter(core, elem, beforeUUID) {
6305
- var index = core[_helper].getElementIndexByUUID(beforeUUID);
5323
+ var index = core[_engine].helper.getElementIndexByUUID(beforeUUID);
6306
5324
  if (index !== null) {
6307
5325
  return core.insertElementAfterIndex(elem, index);
6308
5326
  }
@@ -6320,168 +5338,241 @@ function insertElementAfterIndex(core, elem, index) {
6320
5338
  return null;
6321
5339
  }
6322
5340
 
5341
+ function createData() {
5342
+ return {
5343
+ hasInited: false,
5344
+ mode: Mode.NULL,
5345
+ cursorStatus: CursorStatus.NULL,
5346
+ selectedUUID: null,
5347
+ selectedUUIDList: [],
5348
+ hoverUUID: null,
5349
+ selectedControllerDirection: null,
5350
+ hoverControllerDirection: null,
5351
+ prevPoint: null,
5352
+ };
5353
+ }
5354
+ var TempData = (function () {
5355
+ function TempData() {
5356
+ this._temp = createData();
5357
+ }
5358
+ TempData.prototype.set = function (name, value) {
5359
+ this._temp[name] = value;
5360
+ };
5361
+ TempData.prototype.get = function (name) {
5362
+ return this._temp[name];
5363
+ };
5364
+ TempData.prototype.clear = function () {
5365
+ this._temp = createData();
5366
+ };
5367
+ return TempData;
5368
+ }());
5369
+
6323
5370
  var time = index$1.time;
6324
5371
  var deepClone$1 = index$1.data.deepClone;
6325
- function initEvent(core) {
6326
- if (core[_tempData].get('hasInited') === true) {
6327
- return;
6328
- }
6329
- core[_board].on('hover', time.throttle(handleHover(core), 32));
6330
- core[_board].on('leave', time.throttle(handleLeave(core), 32));
6331
- core[_board].on('point', time.throttle(handleClick(core), 16));
6332
- core[_board].on('doubleClick', handleDoubleClick(core));
6333
- if (core[_tempData].get('onlyRender') === true) {
6334
- return;
5372
+ var Engine = (function () {
5373
+ function Engine(opts) {
5374
+ this._plugins = [];
5375
+ var board = opts.board, config = opts.config, element = opts.element;
5376
+ var helper = new Helper(board, config);
5377
+ this._opts = opts;
5378
+ this.temp = new TempData();
5379
+ this.helper = helper;
5380
+ this._mapper = new Mapper({ board: board, helper: helper, element: element });
6335
5381
  }
6336
- core[_board].on('point', handlePoint(core));
6337
- core[_board].on('moveStart', handleMoveStart(core));
6338
- core[_board].on('move', time.throttle(handleMove(core), 16));
6339
- core[_board].on('moveEnd', handleMoveEnd(core));
6340
- core[_renderer].on('drawFrame', function () {
6341
- core[_coreEvent].trigger('drawFrame', undefined);
6342
- });
6343
- core[_renderer].on('drawFrameComplete', function () {
6344
- core[_coreEvent].trigger('drawFrameComplete', undefined);
6345
- });
6346
- core[_tempData].set('hasInited', true);
6347
- }
6348
- function handleDoubleClick(core) {
6349
- return function (point) {
5382
+ Engine.prototype.addPlugin = function (plugin) {
5383
+ this._plugins.push(plugin);
5384
+ };
5385
+ Engine.prototype.getHelperConfig = function () {
5386
+ return this.helper.getConfig();
5387
+ };
5388
+ Engine.prototype.updateHelperConfig = function (opts) {
5389
+ var _a;
5390
+ var _b = this._opts, board = _b.board, getDataFeekback = _b.getDataFeekback, config = _b.config;
5391
+ var data = getDataFeekback();
5392
+ var transform = board.getTransform();
5393
+ this.helper.updateConfig(data, {
5394
+ width: opts.width,
5395
+ height: opts.height,
5396
+ devicePixelRatio: opts.devicePixelRatio,
5397
+ canScroll: ((_a = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _a === void 0 ? void 0 : _a.use) === true,
5398
+ selectedUUID: this.temp.get('selectedUUID'),
5399
+ selectedUUIDList: this.temp.get('selectedUUIDList'),
5400
+ scale: transform.scale,
5401
+ scrollX: transform.scrollX,
5402
+ scrollY: transform.scrollY,
5403
+ });
5404
+ };
5405
+ Engine.prototype.init = function () {
5406
+ this._initEvent();
5407
+ };
5408
+ Engine.prototype._initEvent = function () {
5409
+ if (this.temp.get('hasInited') === true) {
5410
+ return;
5411
+ }
5412
+ var board = this._opts.board;
5413
+ board.on('hover', time.throttle(this._handleHover.bind(this), 32));
5414
+ board.on('leave', time.throttle(this._handleLeave.bind(this), 32));
5415
+ board.on('point', time.throttle(this._handleClick.bind(this), 16));
5416
+ board.on('doubleClick', this._handleDoubleClick.bind(this));
5417
+ board.on('point', this._handlePoint.bind(this));
5418
+ board.on('moveStart', this._handleMoveStart.bind(this));
5419
+ board.on('move', time.throttle(this._handleMove.bind(this), 16));
5420
+ board.on('moveEnd', this._handleMoveEnd.bind(this));
5421
+ };
5422
+ Engine.prototype._handleDoubleClick = function (point) {
6350
5423
  var _a, _b, _c;
6351
- var _d = core[_element].isPointInElement(point, core[_data]), index = _d[0], uuid = _d[1];
5424
+ var _d = this._opts, element = _d.element, getDataFeekback = _d.getDataFeekback, drawFeekback = _d.drawFeekback, coreEvent = _d.coreEvent;
5425
+ var data = getDataFeekback();
5426
+ var _e = element.isPointInElement(point, data), index = _e[0], uuid = _e[1];
6352
5427
  if (index >= 0 && uuid) {
6353
- var elem = deepClone$1((_a = core[_data].elements) === null || _a === void 0 ? void 0 : _a[index]);
5428
+ var elem = deepClone$1((_a = data.elements) === null || _a === void 0 ? void 0 : _a[index]);
6354
5429
  if (((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
6355
- core[_coreEvent].trigger('screenDoubleClickElement', { index: index, uuid: uuid, element: deepClone$1((_c = core[_data].elements) === null || _c === void 0 ? void 0 : _c[index]) });
5430
+ coreEvent.trigger('screenDoubleClickElement', { index: index, uuid: uuid, element: deepClone$1((_c = data.elements) === null || _c === void 0 ? void 0 : _c[index]) });
6356
5431
  }
6357
5432
  }
6358
- core[_draw]();
5433
+ drawFeekback();
6359
5434
  };
6360
- }
6361
- function handlePoint(core) {
6362
- return function (point) {
5435
+ Engine.prototype._handlePoint = function (point) {
6363
5436
  var _a, _b, _c;
6364
- if (!core[_mapper].isEffectivePoint(point)) {
5437
+ if (!this._mapper.isEffectivePoint(point)) {
6365
5438
  return;
6366
5439
  }
6367
- if (core[_helper].isPointInElementList(point, core[_data])) {
6368
- core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST);
5440
+ var _d = this._opts, element = _d.element, getDataFeekback = _d.getDataFeekback, selectElementByIndex = _d.selectElementByIndex, coreEvent = _d.coreEvent, emitChangeScreen = _d.emitChangeScreen, drawFeekback = _d.drawFeekback;
5441
+ var helper = this.helper;
5442
+ var data = getDataFeekback();
5443
+ if (helper.isPointInElementList(point, data)) {
5444
+ this.temp.set('mode', Mode.SELECT_ELEMENT_LIST);
6369
5445
  }
6370
5446
  else {
6371
- var _d = core[_helper].isPointInElementWrapperController(point, core[_data]), uuid = _d.uuid, selectedControllerDirection = _d.selectedControllerDirection;
5447
+ var _e = helper.isPointInElementWrapperController(point, data), uuid = _e.uuid, selectedControllerDirection = _e.selectedControllerDirection;
6372
5448
  if (uuid && selectedControllerDirection) {
6373
- core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
6374
- core[_tempData].set('selectedControllerDirection', selectedControllerDirection);
6375
- core[_tempData].set('selectedUUID', uuid);
5449
+ this.temp.set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
5450
+ this.temp.set('selectedControllerDirection', selectedControllerDirection);
5451
+ this.temp.set('selectedUUID', uuid);
6376
5452
  }
6377
5453
  else {
6378
- var _e = core[_element].isPointInElement(point, core[_data]), index = _e[0], uuid_1 = _e[1];
6379
- if (index >= 0 && ((_b = (_a = core[_data].elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
6380
- core.selectElementByIndex(index, { useMode: true });
6381
- if (typeof uuid_1 === 'string' && core[_coreEvent].has('screenSelectElement')) {
6382
- core[_coreEvent].trigger('screenSelectElement', { index: index, uuid: uuid_1, element: deepClone$1((_c = core[_data].elements) === null || _c === void 0 ? void 0 : _c[index]) });
6383
- core[_emitChangeScreen]();
5454
+ var _f = element.isPointInElement(point, data), index = _f[0], uuid_1 = _f[1];
5455
+ if (index >= 0 && ((_b = (_a = data.elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
5456
+ selectElementByIndex(index, { useMode: true });
5457
+ if (typeof uuid_1 === 'string' && coreEvent.has('screenSelectElement')) {
5458
+ coreEvent.trigger('screenSelectElement', { index: index, uuid: uuid_1, element: deepClone$1((_c = data.elements) === null || _c === void 0 ? void 0 : _c[index]) });
5459
+ emitChangeScreen();
6384
5460
  }
6385
- core[_tempData].set('mode', Mode.SELECT_ELEMENT);
5461
+ this.temp.set('mode', Mode.SELECT_ELEMENT);
6386
5462
  }
6387
5463
  else {
6388
- core[_tempData].set('selectedUUIDList', []);
6389
- core[_tempData].set('selectedUUID', null);
6390
- core[_tempData].set('mode', Mode.SELECT_AREA);
5464
+ this.temp.set('selectedUUIDList', []);
5465
+ this.temp.set('selectedUUID', null);
5466
+ this.temp.set('mode', Mode.SELECT_AREA);
6391
5467
  }
6392
5468
  }
6393
5469
  }
6394
- core[_draw]();
5470
+ drawFeekback();
6395
5471
  };
6396
- }
6397
- function handleClick(core) {
6398
- return function (point) {
5472
+ Engine.prototype._handleClick = function (point) {
6399
5473
  var _a;
6400
- var _b = core[_element].isPointInElement(point, core[_data]), index = _b[0], uuid = _b[1];
5474
+ var _b = this._opts, element = _b.element, getDataFeekback = _b.getDataFeekback, coreEvent = _b.coreEvent, drawFeekback = _b.drawFeekback;
5475
+ var data = getDataFeekback();
5476
+ var _c = element.isPointInElement(point, data), index = _c[0], uuid = _c[1];
6401
5477
  if (index >= 0 && uuid) {
6402
- core[_coreEvent].trigger('screenClickElement', { index: index, uuid: uuid, element: deepClone$1((_a = core[_data].elements) === null || _a === void 0 ? void 0 : _a[index]) });
5478
+ coreEvent.trigger('screenClickElement', { index: index, uuid: uuid, element: deepClone$1((_a = data.elements) === null || _a === void 0 ? void 0 : _a[index]) });
6403
5479
  }
6404
- core[_draw]();
5480
+ drawFeekback();
6405
5481
  };
6406
- }
6407
- function handleMoveStart(core) {
6408
- return function (point) {
6409
- core[_tempData].set('prevPoint', point);
6410
- var uuid = core[_tempData].get('selectedUUID');
6411
- if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_LIST) ;
6412
- else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT) {
6413
- if (typeof uuid === 'string' && core[_coreEvent].has('screenMoveElementStart')) {
6414
- core[_coreEvent].trigger('screenMoveElementStart', {
6415
- index: core[_element].getElementIndex(core[_data], uuid),
5482
+ Engine.prototype._handleMoveStart = function (point) {
5483
+ var _a = this._opts, element = _a.element, getDataFeekback = _a.getDataFeekback, coreEvent = _a.coreEvent;
5484
+ var data = getDataFeekback();
5485
+ var helper = this.helper;
5486
+ this.temp.set('prevPoint', point);
5487
+ var uuid = this.temp.get('selectedUUID');
5488
+ if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) ;
5489
+ else if (this.temp.get('mode') === Mode.SELECT_ELEMENT) {
5490
+ if (typeof uuid === 'string' && coreEvent.has('screenMoveElementStart')) {
5491
+ coreEvent.trigger('screenMoveElementStart', {
5492
+ index: element.getElementIndex(data, uuid),
6416
5493
  uuid: uuid,
6417
5494
  x: point.x,
6418
5495
  y: point.y
6419
5496
  });
6420
5497
  }
6421
5498
  }
6422
- else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
6423
- core[_helper].startSelectArea(point);
5499
+ else if (this.temp.get('mode') === Mode.SELECT_AREA) {
5500
+ helper.startSelectArea(point);
6424
5501
  }
6425
5502
  };
6426
- }
6427
- function handleMove(core) {
6428
- return function (point) {
6429
- if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_LIST) {
6430
- dragElements(core, core[_tempData].get('selectedUUIDList'), point, core[_tempData].get('prevPoint'));
6431
- core[_draw]();
6432
- core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
5503
+ Engine.prototype._handleMove = function (point) {
5504
+ var drawFeekback = this._opts.drawFeekback;
5505
+ var helper = this.helper;
5506
+ if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) {
5507
+ this._dragElements(this.temp.get('selectedUUIDList'), point, this.temp.get('prevPoint'));
5508
+ drawFeekback();
5509
+ this.temp.set('cursorStatus', CursorStatus.DRAGGING);
6433
5510
  }
6434
- else if (typeof core[_tempData].get('selectedUUID') === 'string') {
6435
- if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT) {
6436
- dragElements(core, [core[_tempData].get('selectedUUID')], point, core[_tempData].get('prevPoint'));
6437
- core[_draw]();
6438
- core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
5511
+ else if (typeof this.temp.get('selectedUUID') === 'string') {
5512
+ if (this.temp.get('mode') === Mode.SELECT_ELEMENT) {
5513
+ this._dragElements([this.temp.get('selectedUUID')], point, this.temp.get('prevPoint'));
5514
+ drawFeekback();
5515
+ this.temp.set('cursorStatus', CursorStatus.DRAGGING);
6439
5516
  }
6440
- else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && core[_tempData].get('selectedControllerDirection')) {
6441
- transfromElement(core, core[_tempData].get('selectedUUID'), point, core[_tempData].get('prevPoint'), core[_tempData].get('selectedControllerDirection'));
6442
- core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
5517
+ else if (this.temp.get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && this.temp.get('selectedControllerDirection')) {
5518
+ this._transfromElement(this.temp.get('selectedUUID'), point, this.temp.get('prevPoint'), this.temp.get('selectedControllerDirection'));
5519
+ this.temp.set('cursorStatus', CursorStatus.DRAGGING);
6443
5520
  }
6444
5521
  }
6445
- else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
6446
- core[_helper].changeSelectArea(point);
6447
- core[_draw]();
5522
+ else if (this.temp.get('mode') === Mode.SELECT_AREA) {
5523
+ helper.changeSelectArea(point);
5524
+ drawFeekback();
6448
5525
  }
6449
- core[_tempData].set('prevPoint', point);
5526
+ this.temp.set('prevPoint', point);
6450
5527
  };
6451
- }
6452
- function dragElements(core, uuids, point, prevPoint) {
6453
- if (!prevPoint) {
6454
- return;
6455
- }
6456
- uuids.forEach(function (uuid) {
6457
- var _a, _b;
6458
- var idx = core[_helper].getElementIndexByUUID(uuid);
6459
- if (idx === null)
5528
+ Engine.prototype._dragElements = function (uuids, point, prevPoint) {
5529
+ if (!prevPoint) {
6460
5530
  return;
6461
- var elem = core[_data].elements[idx];
6462
- if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) !== true && ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
6463
- core[_element].dragElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale);
6464
5531
  }
6465
- });
6466
- core[_draw]();
6467
- }
6468
- function handleMoveEnd(core) {
6469
- return function (point) {
6470
- var uuid = core[_tempData].get('selectedUUID');
5532
+ var _a = this._opts, board = _a.board, element = _a.element, getDataFeekback = _a.getDataFeekback, drawFeekback = _a.drawFeekback;
5533
+ var data = getDataFeekback();
5534
+ var helper = this.helper;
5535
+ uuids.forEach(function (uuid) {
5536
+ var _a, _b;
5537
+ var idx = helper.getElementIndexByUUID(uuid);
5538
+ if (idx === null)
5539
+ return;
5540
+ var elem = data.elements[idx];
5541
+ if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) !== true && ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
5542
+ element.dragElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale);
5543
+ }
5544
+ });
5545
+ drawFeekback();
5546
+ };
5547
+ Engine.prototype._transfromElement = function (uuid, point, prevPoint, direction) {
5548
+ if (!prevPoint) {
5549
+ return null;
5550
+ }
5551
+ var _a = this._opts, board = _a.board, element = _a.element, getDataFeekback = _a.getDataFeekback, drawFeekback = _a.drawFeekback;
5552
+ var data = getDataFeekback();
5553
+ var result = element.transformElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale, direction);
5554
+ drawFeekback();
5555
+ return result;
5556
+ };
5557
+ Engine.prototype._handleMoveEnd = function (point) {
5558
+ var _a = this._opts, element = _a.element, getDataFeekback = _a.getDataFeekback, coreEvent = _a.coreEvent, drawFeekback = _a.drawFeekback, emitChangeData = _a.emitChangeData;
5559
+ var data = getDataFeekback();
5560
+ var helper = this.helper;
5561
+ var uuid = this.temp.get('selectedUUID');
6471
5562
  if (typeof uuid === 'string') {
6472
- var index = core[_element].getElementIndex(core[_data], uuid);
6473
- var elem = core[_data].elements[index];
5563
+ var index = element.getElementIndex(data, uuid);
5564
+ var elem = data.elements[index];
6474
5565
  if (elem) {
6475
- if (core[_coreEvent].has('screenMoveElementEnd')) {
6476
- core[_coreEvent].trigger('screenMoveElementEnd', {
5566
+ if (coreEvent.has('screenMoveElementEnd')) {
5567
+ coreEvent.trigger('screenMoveElementEnd', {
6477
5568
  index: index,
6478
5569
  uuid: uuid,
6479
5570
  x: point.x,
6480
5571
  y: point.y
6481
5572
  });
6482
5573
  }
6483
- if (core[_coreEvent].has('screenChangeElement')) {
6484
- core[_coreEvent].trigger('screenChangeElement', {
5574
+ if (coreEvent.has('screenChangeElement')) {
5575
+ coreEvent.trigger('screenChangeElement', {
6485
5576
  index: index,
6486
5577
  uuid: uuid,
6487
5578
  width: elem.w,
@@ -6489,91 +5580,237 @@ function handleMoveEnd(core) {
6489
5580
  angle: elem.angle || 0
6490
5581
  });
6491
5582
  }
6492
- core[_emitChangeData]();
5583
+ emitChangeData();
6493
5584
  }
6494
5585
  }
6495
- else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
6496
- var uuids = core[_helper].calcSelectedElements(core[_data]);
5586
+ else if (this.temp.get('mode') === Mode.SELECT_AREA) {
5587
+ var uuids = helper.calcSelectedElements(data);
6497
5588
  if (uuids.length > 0) {
6498
- core[_tempData].set('selectedUUIDList', uuids);
6499
- core[_tempData].set('selectedUUID', null);
5589
+ this.temp.set('selectedUUIDList', uuids);
5590
+ this.temp.set('selectedUUID', null);
6500
5591
  }
6501
5592
  else {
6502
- core[_tempData].set('mode', Mode.NULL);
5593
+ this.temp.set('mode', Mode.NULL);
6503
5594
  }
6504
- core[_helper].clearSelectedArea();
6505
- core[_draw]();
5595
+ helper.clearSelectedArea();
5596
+ drawFeekback();
6506
5597
  }
6507
- if (core[_tempData].get('mode') !== Mode.SELECT_ELEMENT) {
6508
- core[_tempData].set('selectedUUID', null);
5598
+ if (this.temp.get('mode') !== Mode.SELECT_ELEMENT) {
5599
+ this.temp.set('selectedUUID', null);
6509
5600
  }
6510
- core[_tempData].set('cursorStatus', CursorStatus.NULL);
6511
- core[_tempData].set('mode', Mode.NULL);
5601
+ this.temp.set('cursorStatus', CursorStatus.NULL);
5602
+ this.temp.set('mode', Mode.NULL);
6512
5603
  };
6513
- }
6514
- function handleHover(core) {
6515
- return function (point) {
5604
+ Engine.prototype._handleHover = function (point) {
6516
5605
  var _a, _b;
6517
5606
  var isMouseOverElement = false;
6518
- if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
6519
- if (core[_tempData].get('onlyRender') !== true)
6520
- core[_board].resetCursor();
5607
+ var _c = this._opts, board = _c.board, getDataFeekback = _c.getDataFeekback, coreEvent = _c.coreEvent;
5608
+ var data = getDataFeekback();
5609
+ var helper = this.helper;
5610
+ var mapper = this._mapper;
5611
+ if (this.temp.get('mode') === Mode.SELECT_AREA) {
5612
+ board.resetCursor();
6521
5613
  }
6522
- else if (core[_tempData].get('cursorStatus') === CursorStatus.NULL) {
6523
- var _c = core[_mapper].judgePointCursor(point, core[_data]), cursor = _c.cursor, elementUUID = _c.elementUUID;
6524
- if (core[_tempData].get('onlyRender') !== true)
6525
- core[_board].setCursor(cursor);
5614
+ else if (this.temp.get('cursorStatus') === CursorStatus.NULL) {
5615
+ var _d = mapper.judgePointCursor(point, data), cursor = _d.cursor, elementUUID = _d.elementUUID;
5616
+ board.setCursor(cursor);
6526
5617
  if (elementUUID) {
6527
- var index = core[_helper].getElementIndexByUUID(elementUUID);
5618
+ var index = helper.getElementIndexByUUID(elementUUID);
6528
5619
  if (index !== null && index >= 0) {
6529
- var elem = core[_data].elements[index];
5620
+ var elem = data.elements[index];
6530
5621
  if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) === true || ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) === true) {
6531
- core[_board].resetCursor();
5622
+ board.resetCursor();
6532
5623
  return;
6533
5624
  }
6534
- if (core[_tempData].get('hoverUUID') !== elem.uuid) {
6535
- var preIndex = core[_helper].getElementIndexByUUID(core[_tempData].get('hoverUUID') || '');
6536
- if (preIndex !== null && core[_data].elements[preIndex]) {
6537
- core[_coreEvent].trigger('mouseLeaveElement', {
6538
- uuid: core[_tempData].get('hoverUUID'),
5625
+ if (this.temp.get('hoverUUID') !== elem.uuid) {
5626
+ var preIndex = helper.getElementIndexByUUID(this.temp.get('hoverUUID') || '');
5627
+ if (preIndex !== null && data.elements[preIndex]) {
5628
+ coreEvent.trigger('mouseLeaveElement', {
5629
+ uuid: this.temp.get('hoverUUID'),
6539
5630
  index: preIndex,
6540
- element: core[_data].elements[preIndex]
5631
+ element: data.elements[preIndex]
6541
5632
  });
6542
5633
  }
6543
5634
  }
6544
5635
  if (elem) {
6545
- core[_coreEvent].trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
6546
- core[_tempData].set('hoverUUID', elem.uuid);
5636
+ coreEvent.trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
5637
+ this.temp.set('hoverUUID', elem.uuid);
6547
5638
  isMouseOverElement = true;
6548
5639
  }
6549
5640
  }
6550
5641
  }
6551
5642
  }
6552
- if (isMouseOverElement !== true && core[_tempData].get('hoverUUID') !== null) {
6553
- var uuid = core[_tempData].get('hoverUUID');
6554
- var index = core[_helper].getElementIndexByUUID(uuid || '');
5643
+ if (isMouseOverElement !== true && this.temp.get('hoverUUID') !== null) {
5644
+ var uuid = this.temp.get('hoverUUID');
5645
+ var index = helper.getElementIndexByUUID(uuid || '');
6555
5646
  if (index !== null)
6556
- core[_coreEvent].trigger('mouseLeaveElement', { uuid: uuid, index: index, element: core[_data].elements[index] });
6557
- core[_tempData].set('hoverUUID', null);
5647
+ coreEvent.trigger('mouseLeaveElement', { uuid: uuid, index: index, element: data.elements[index] });
5648
+ this.temp.set('hoverUUID', null);
6558
5649
  }
6559
- if (core[_coreEvent].has('mouseOverScreen'))
6560
- core[_coreEvent].trigger('mouseOverScreen', point);
5650
+ if (coreEvent.has('mouseOverScreen'))
5651
+ coreEvent.trigger('mouseOverScreen', point);
6561
5652
  };
6562
- }
6563
- function handleLeave(core) {
6564
- return function () {
6565
- if (core[_coreEvent].has('mouseLeaveScreen')) {
6566
- core[_coreEvent].trigger('mouseLeaveScreen', undefined);
5653
+ Engine.prototype._handleLeave = function () {
5654
+ var coreEvent = this._opts.coreEvent;
5655
+ if (coreEvent.has('mouseLeaveScreen')) {
5656
+ coreEvent.trigger('mouseLeaveScreen', undefined);
6567
5657
  }
6568
5658
  };
5659
+ return Engine;
5660
+ }());
5661
+
5662
+ function clearContext(ctx) {
5663
+ ctx.setFillStyle('#000000');
5664
+ ctx.setStrokeStyle('#000000');
5665
+ ctx.setLineDash([]);
5666
+ ctx.setGlobalAlpha(1);
5667
+ ctx.setShadowColor('#00000000');
5668
+ ctx.setShadowOffsetX(0);
5669
+ ctx.setShadowOffsetY(0);
5670
+ ctx.setShadowBlur(0);
5671
+ }
5672
+
5673
+ function drawElementWrapper(ctx, config) {
5674
+ if (!(config === null || config === void 0 ? void 0 : config.selectedElementWrapper)) {
5675
+ return;
5676
+ }
5677
+ var wrapper = config.selectedElementWrapper;
5678
+ clearContext(ctx);
5679
+ rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
5680
+ ctx.beginPath();
5681
+ ctx.setLineDash(wrapper.lineDash);
5682
+ ctx.setLineWidth(wrapper.lineWidth);
5683
+ ctx.setStrokeStyle(wrapper.color);
5684
+ ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
5685
+ ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
5686
+ ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
5687
+ ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
5688
+ ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
5689
+ ctx.stroke();
5690
+ ctx.closePath();
5691
+ if (wrapper.lock !== true) {
5692
+ if (wrapper.controllers.rotate.invisible !== true) {
5693
+ ctx.beginPath();
5694
+ ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
5695
+ ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
5696
+ ctx.stroke();
5697
+ ctx.closePath();
5698
+ ctx.beginPath();
5699
+ ctx.setLineDash([]);
5700
+ ctx.setLineWidth(wrapper.controllerSize / 2);
5701
+ ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
5702
+ ctx.stroke();
5703
+ ctx.closePath();
5704
+ }
5705
+ ctx.setFillStyle(wrapper.color);
5706
+ [
5707
+ wrapper.controllers.topLeft,
5708
+ wrapper.controllers.top,
5709
+ wrapper.controllers.topRight,
5710
+ wrapper.controllers.right,
5711
+ wrapper.controllers.bottomRight,
5712
+ wrapper.controllers.bottom,
5713
+ wrapper.controllers.bottomLeft,
5714
+ wrapper.controllers.left,
5715
+ ].forEach(function (controller) {
5716
+ if (controller.invisible !== true) {
5717
+ ctx.beginPath();
5718
+ ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
5719
+ ctx.fill();
5720
+ ctx.closePath();
5721
+ }
5722
+ });
5723
+ }
5724
+ else {
5725
+ clearContext(ctx);
5726
+ ctx.setStrokeStyle(wrapper.color);
5727
+ [
5728
+ wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
5729
+ wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
5730
+ ].forEach(function (controller) {
5731
+ ctx.beginPath();
5732
+ ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
5733
+ ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
5734
+ ctx.stroke();
5735
+ ctx.closePath();
5736
+ ctx.beginPath();
5737
+ ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
5738
+ ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
5739
+ ctx.stroke();
5740
+ ctx.closePath();
5741
+ });
5742
+ }
5743
+ });
6569
5744
  }
6570
- function transfromElement(core, uuid, point, prevPoint, direction) {
6571
- if (!prevPoint) {
6572
- return null;
5745
+ function drawAreaWrapper(ctx, config) {
5746
+ if (!(config === null || config === void 0 ? void 0 : config.selectedAreaWrapper)) {
5747
+ return;
6573
5748
  }
6574
- var result = core[_element].transformElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale, direction);
6575
- core[_draw]();
6576
- return result;
5749
+ var wrapper = config.selectedAreaWrapper;
5750
+ if (wrapper && wrapper.w > 0 && wrapper.h > 0) {
5751
+ clearContext(ctx);
5752
+ ctx.setGlobalAlpha(0.3);
5753
+ ctx.setFillStyle(wrapper.color);
5754
+ ctx.fillRect(wrapper.x, wrapper.y, wrapper.w, wrapper.h);
5755
+ clearContext(ctx);
5756
+ ctx.beginPath();
5757
+ ctx.setLineDash(wrapper.lineDash);
5758
+ ctx.setLineWidth(wrapper.lineWidth);
5759
+ ctx.setStrokeStyle(wrapper.color);
5760
+ ctx.moveTo(wrapper.x, wrapper.y);
5761
+ ctx.lineTo(wrapper.x + wrapper.w, wrapper.y);
5762
+ ctx.lineTo(wrapper.x + wrapper.w, wrapper.y + wrapper.h);
5763
+ ctx.lineTo(wrapper.x, wrapper.y + wrapper.h);
5764
+ ctx.lineTo(wrapper.x, wrapper.y);
5765
+ ctx.stroke();
5766
+ ctx.closePath();
5767
+ }
5768
+ }
5769
+ function drawElementListWrappers(ctx, config) {
5770
+ if (!Array.isArray(config === null || config === void 0 ? void 0 : config.selectedElementListWrappers)) {
5771
+ return;
5772
+ }
5773
+ var wrapperList = config.selectedElementListWrappers;
5774
+ wrapperList === null || wrapperList === void 0 ? void 0 : wrapperList.forEach(function (wrapper) {
5775
+ clearContext(ctx);
5776
+ rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
5777
+ clearContext(ctx);
5778
+ ctx.setGlobalAlpha(0.05);
5779
+ ctx.setFillStyle(wrapper.color);
5780
+ ctx.fillRect(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x, wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y);
5781
+ clearContext(ctx);
5782
+ ctx.beginPath();
5783
+ ctx.setLineDash(wrapper.lineDash);
5784
+ ctx.setLineWidth(wrapper.lineWidth);
5785
+ ctx.setStrokeStyle(wrapper.color);
5786
+ ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
5787
+ ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
5788
+ ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
5789
+ ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
5790
+ ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
5791
+ ctx.stroke();
5792
+ ctx.closePath();
5793
+ if (wrapper.lock === true) {
5794
+ clearContext(ctx);
5795
+ ctx.setStrokeStyle(wrapper.color);
5796
+ [
5797
+ wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
5798
+ wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
5799
+ ].forEach(function (controller) {
5800
+ ctx.beginPath();
5801
+ ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
5802
+ ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
5803
+ ctx.stroke();
5804
+ ctx.closePath();
5805
+ ctx.beginPath();
5806
+ ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
5807
+ ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
5808
+ ctx.stroke();
5809
+ ctx.closePath();
5810
+ });
5811
+ }
5812
+ });
5813
+ });
6577
5814
  }
6578
5815
 
6579
5816
  var deepClone = index$1.data.deepClone;
@@ -6582,10 +5819,9 @@ var Core = (function () {
6582
5819
  var _this = this;
6583
5820
  var _c, _d, _e;
6584
5821
  this[_a] = new CoreEvent();
6585
- this[_b] = new TempData();
5822
+ this[_b] = new TempData$1();
6586
5823
  this[_data] = { elements: [] };
6587
5824
  this[_opts] = opts;
6588
- this[_tempData].set('onlyRender', opts.onlyRender === true);
6589
5825
  this[_config] = mergeConfig(config || {});
6590
5826
  this[_board] = new Board(mount, __assign$4(__assign$4({}, this[_opts]), { canScroll: (_c = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _c === void 0 ? void 0 : _c.use, scrollConfig: {
6591
5827
  color: ((_d = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _d === void 0 ? void 0 : _d.color) || '#a0a0a0',
@@ -6594,7 +5830,7 @@ var Core = (function () {
6594
5830
  this[_renderer] = new Renderer();
6595
5831
  var drawFrame = function () {
6596
5832
  var helperCtx = _this[_board].getHelperContext();
6597
- var helperConfig = _this[_helper].getConfig();
5833
+ var helperConfig = _this[_engine].getHelperConfig();
6598
5834
  _this[_board].clear();
6599
5835
  var _c = _this[_opts], contextWidth = _c.contextWidth, contextHeight = _c.contextHeight, devicePixelRatio = _c.devicePixelRatio;
6600
5836
  helperCtx.clearRect(0, 0, contextWidth * devicePixelRatio, contextHeight * devicePixelRatio);
@@ -6610,27 +5846,31 @@ var Core = (function () {
6610
5846
  drawFrame();
6611
5847
  });
6612
5848
  this[_element] = new Element(this[_board].getContext());
6613
- this[_helper] = new Helper(this[_board], this[_config]);
6614
- this[_mapper] = new Mapper({
5849
+ this[_engine] = new Engine({
5850
+ coreEvent: this[_coreEvent],
6615
5851
  board: this[_board],
6616
- helper: this[_helper],
6617
- element: this[_element]
5852
+ element: this[_element],
5853
+ config: this[_config],
5854
+ drawFeekback: this[_draw].bind(this),
5855
+ getDataFeekback: function () { return _this[_data]; },
5856
+ selectElementByIndex: this.selectElementByIndex.bind(this),
5857
+ emitChangeScreen: this[_emitChangeScreen].bind(this),
5858
+ emitChangeData: this[_emitChangeData].bind(this),
5859
+ });
5860
+ this[_engine].init();
5861
+ this[_renderer].on('drawFrame', function () {
5862
+ _this[_coreEvent].trigger('drawFrame', undefined);
6618
5863
  });
6619
- initEvent(this);
5864
+ this[_renderer].on('drawFrameComplete', function () {
5865
+ _this[_coreEvent].trigger('drawFrameComplete', undefined);
5866
+ });
5867
+ this[_tempData].set('hasInited', true);
6620
5868
  }
6621
5869
  Core.prototype[(_a = _coreEvent, _b = _tempData, _draw)] = function (opts) {
6622
- var _c, _d;
6623
- var transfrom = this[_board].getTransform();
6624
- this[_helper].updateConfig(this[_data], {
5870
+ this[_engine].updateHelperConfig({
6625
5871
  width: this[_opts].width,
6626
5872
  height: this[_opts].height,
6627
- canScroll: ((_d = (_c = this[_config]) === null || _c === void 0 ? void 0 : _c.scrollWrapper) === null || _d === void 0 ? void 0 : _d.use) === true,
6628
- selectedUUID: this[_tempData].get('selectedUUID'),
6629
- selectedUUIDList: this[_tempData].get('selectedUUIDList'),
6630
5873
  devicePixelRatio: this[_opts].devicePixelRatio,
6631
- scale: transfrom.scale,
6632
- scrollX: transfrom.scrollX,
6633
- scrollY: transfrom.scrollY,
6634
5874
  });
6635
5875
  this[_renderer].thaw();
6636
5876
  this[_renderer].render(this[_board].getContext(), this[_data], {
@@ -6723,7 +5963,6 @@ var Core = (function () {
6723
5963
  };
6724
5964
  Core.prototype.clearOperation = function () {
6725
5965
  this[_tempData].clear();
6726
- this[_tempData].set('onlyRender', this[_opts].onlyRender === true);
6727
5966
  this[_draw]();
6728
5967
  };
6729
5968
  Core.prototype.on = function (key, callback) {
@@ -6738,12 +5977,6 @@ var Core = (function () {
6738
5977
  Core.prototype.pointContextToScreen = function (p) {
6739
5978
  return this[_board].pointContextToScreen(p);
6740
5979
  };
6741
- Core.prototype.setOnlyRender = function () {
6742
- this[_tempData].set('onlyRender', true);
6743
- };
6744
- Core.prototype.cancelOnlyRender = function () {
6745
- this[_tempData].set('onlyRender', false);
6746
- };
6747
5980
  Core.prototype.__getBoardContext = function () {
6748
5981
  return this[_board].getContext();
6749
5982
  };
@@ -6763,9 +5996,6 @@ var Core = (function () {
6763
5996
  this[_coreEvent].trigger('changeData', deepClone(this[_data]));
6764
5997
  }
6765
5998
  };
6766
- Core.prototype[_todo] = function () {
6767
- console.log(this[_mapper]);
6768
- };
6769
5999
  var _a, _b;
6770
6000
  Core.is = is;
6771
6001
  Core.check = check;