@idraw/core 0.2.0-alpha.16 → 0.2.0-alpha.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +3964 -2453
- package/dist/index.d.ts +4 -12
- package/dist/index.es.js +3964 -2453
- package/dist/index.global.js +3964 -2453
- package/dist/index.global.min.js +1 -4490
- package/package.json +8 -6
package/dist/index.global.min.js
CHANGED
|
@@ -1,4490 +1 @@
|
|
|
1
|
-
var iDrawCore = (function () {
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var extendStatics = function(d, b) {
|
|
5
|
-
extendStatics = Object.setPrototypeOf ||
|
|
6
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
7
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
8
|
-
return extendStatics(d, b);
|
|
9
|
-
};
|
|
10
|
-
function __extends(d, b) {
|
|
11
|
-
if (typeof b !== "function" && b !== null)
|
|
12
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
13
|
-
extendStatics(d, b);
|
|
14
|
-
function __() { this.constructor = d; }
|
|
15
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
16
|
-
}
|
|
17
|
-
var __assign$1 = function() {
|
|
18
|
-
__assign$1 = Object.assign || function __assign(t) {
|
|
19
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
-
s = arguments[i];
|
|
21
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
22
|
-
}
|
|
23
|
-
return t;
|
|
24
|
-
};
|
|
25
|
-
return __assign$1.apply(this, arguments);
|
|
26
|
-
};
|
|
27
|
-
function __awaiter$2(thisArg, _arguments, P, generator) {
|
|
28
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
29
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
30
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
31
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
32
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
33
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
function __generator$2(thisArg, body) {
|
|
37
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
38
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
39
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
40
|
-
function step(op) {
|
|
41
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
42
|
-
while (_) try {
|
|
43
|
-
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;
|
|
44
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
45
|
-
switch (op[0]) {
|
|
46
|
-
case 0: case 1: t = op; break;
|
|
47
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
48
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
49
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
50
|
-
default:
|
|
51
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
52
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
53
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
54
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
55
|
-
if (t[2]) _.ops.pop();
|
|
56
|
-
_.trys.pop(); continue;
|
|
57
|
-
}
|
|
58
|
-
op = body.call(thisArg, _);
|
|
59
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
60
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
var __assign = function() {
|
|
65
|
-
__assign = Object.assign || function __assign(t) {
|
|
66
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
67
|
-
s = arguments[i];
|
|
68
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
69
|
-
}
|
|
70
|
-
return t;
|
|
71
|
-
};
|
|
72
|
-
return __assign.apply(this, arguments);
|
|
73
|
-
};
|
|
74
|
-
function compose$1(middleware) {
|
|
75
|
-
return function (context, next) {
|
|
76
|
-
return dispatch(0);
|
|
77
|
-
function dispatch(i) {
|
|
78
|
-
var fn = middleware[i];
|
|
79
|
-
if (i === middleware.length && next) {
|
|
80
|
-
fn = next;
|
|
81
|
-
}
|
|
82
|
-
if (!fn)
|
|
83
|
-
return Promise.resolve();
|
|
84
|
-
try {
|
|
85
|
-
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
|
|
86
|
-
}
|
|
87
|
-
catch (err) {
|
|
88
|
-
return Promise.reject(err);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
function delay$1(time) {
|
|
94
|
-
return new Promise(function (resolve) {
|
|
95
|
-
setTimeout(function () {
|
|
96
|
-
resolve();
|
|
97
|
-
}, time);
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
function throttle$1(fn, timeout) {
|
|
101
|
-
var timer = -1;
|
|
102
|
-
return function () {
|
|
103
|
-
var args = [];
|
|
104
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
105
|
-
args[_i] = arguments[_i];
|
|
106
|
-
}
|
|
107
|
-
if (timer > 0) {
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
timer = setTimeout(function () {
|
|
111
|
-
fn.apply(void 0, args);
|
|
112
|
-
timer = -1;
|
|
113
|
-
}, timeout);
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
function downloadImageFromCanvas$1(canvas, opts) {
|
|
117
|
-
var filename = opts.filename, _a = opts.type, type = _a === void 0 ? 'image/jpeg' : _a;
|
|
118
|
-
var stream = canvas.toDataURL(type);
|
|
119
|
-
var downloadLink = document.createElement('a');
|
|
120
|
-
downloadLink.href = stream;
|
|
121
|
-
downloadLink.download = filename;
|
|
122
|
-
var downloadClickEvent = document.createEvent('MouseEvents');
|
|
123
|
-
downloadClickEvent.initEvent('click', true, false);
|
|
124
|
-
downloadLink.dispatchEvent(downloadClickEvent);
|
|
125
|
-
}
|
|
126
|
-
function toColorHexNum$1(color) {
|
|
127
|
-
return parseInt(color.replace(/^\#/, '0x'));
|
|
128
|
-
}
|
|
129
|
-
function toColorHexStr$1(color) {
|
|
130
|
-
return '#' + color.toString(16);
|
|
131
|
-
}
|
|
132
|
-
function isColorStr$3(color) {
|
|
133
|
-
return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
|
|
134
|
-
}
|
|
135
|
-
function createUUID$3() {
|
|
136
|
-
function str4() {
|
|
137
|
-
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
138
|
-
}
|
|
139
|
-
return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
|
|
140
|
-
}
|
|
141
|
-
function deepClone$6(target) {
|
|
142
|
-
function _clone(t) {
|
|
143
|
-
var type = is$2(t);
|
|
144
|
-
if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
|
|
145
|
-
return t;
|
|
146
|
-
}
|
|
147
|
-
else if (type === 'Array') {
|
|
148
|
-
var arr_1 = [];
|
|
149
|
-
t.forEach(function (item) {
|
|
150
|
-
arr_1.push(_clone(item));
|
|
151
|
-
});
|
|
152
|
-
return arr_1;
|
|
153
|
-
}
|
|
154
|
-
else if (type === 'Object') {
|
|
155
|
-
var obj_1 = {};
|
|
156
|
-
var keys = Object.keys(t);
|
|
157
|
-
keys.forEach(function (key) {
|
|
158
|
-
obj_1[key] = _clone(t[key]);
|
|
159
|
-
});
|
|
160
|
-
return obj_1;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
return _clone(target);
|
|
164
|
-
}
|
|
165
|
-
function is$2(data) {
|
|
166
|
-
return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
|
|
167
|
-
}
|
|
168
|
-
function parsePrototype$1(data) {
|
|
169
|
-
var typeStr = Object.prototype.toString.call(data) || '';
|
|
170
|
-
var result = typeStr.replace(/(\[object|\])/ig, '').trim();
|
|
171
|
-
return result;
|
|
172
|
-
}
|
|
173
|
-
var istype$2 = {
|
|
174
|
-
type: function (data, lowerCase) {
|
|
175
|
-
var result = parsePrototype$1(data);
|
|
176
|
-
return lowerCase === true ? result.toLocaleLowerCase() : result;
|
|
177
|
-
},
|
|
178
|
-
array: function (data) {
|
|
179
|
-
return parsePrototype$1(data) === 'Array';
|
|
180
|
-
},
|
|
181
|
-
json: function (data) {
|
|
182
|
-
return parsePrototype$1(data) === 'Object';
|
|
183
|
-
},
|
|
184
|
-
function: function (data) {
|
|
185
|
-
return parsePrototype$1(data) === 'Function';
|
|
186
|
-
},
|
|
187
|
-
asyncFunction: function (data) {
|
|
188
|
-
return parsePrototype$1(data) === 'AsyncFunction';
|
|
189
|
-
},
|
|
190
|
-
string: function (data) {
|
|
191
|
-
return parsePrototype$1(data) === 'String';
|
|
192
|
-
},
|
|
193
|
-
number: function (data) {
|
|
194
|
-
return parsePrototype$1(data) === 'Number';
|
|
195
|
-
},
|
|
196
|
-
undefined: function (data) {
|
|
197
|
-
return parsePrototype$1(data) === 'Undefined';
|
|
198
|
-
},
|
|
199
|
-
null: function (data) {
|
|
200
|
-
return parsePrototype$1(data) === 'Null';
|
|
201
|
-
},
|
|
202
|
-
promise: function (data) {
|
|
203
|
-
return parsePrototype$1(data) === 'Promise';
|
|
204
|
-
},
|
|
205
|
-
};
|
|
206
|
-
function __awaiter$1(thisArg, _arguments, P, generator) {
|
|
207
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
208
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
209
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
210
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
211
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
212
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
213
|
-
});
|
|
214
|
-
}
|
|
215
|
-
function __generator$1(thisArg, body) {
|
|
216
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
217
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
218
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
219
|
-
function step(op) {
|
|
220
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
221
|
-
while (_) try {
|
|
222
|
-
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;
|
|
223
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
224
|
-
switch (op[0]) {
|
|
225
|
-
case 0: case 1: t = op; break;
|
|
226
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
227
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
228
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
229
|
-
default:
|
|
230
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
231
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
232
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
233
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
234
|
-
if (t[2]) _.ops.pop();
|
|
235
|
-
_.trys.pop(); continue;
|
|
236
|
-
}
|
|
237
|
-
op = body.call(thisArg, _);
|
|
238
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
239
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
function parseHTMLToDataURL$1(html, opts) {
|
|
243
|
-
var width = opts.width, height = opts.height;
|
|
244
|
-
return new Promise(function (resolve, reject) {
|
|
245
|
-
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 ";
|
|
246
|
-
var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
|
|
247
|
-
var reader = new FileReader();
|
|
248
|
-
reader.readAsDataURL(blob);
|
|
249
|
-
reader.onload = function (event) {
|
|
250
|
-
var _a;
|
|
251
|
-
var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
|
|
252
|
-
resolve(base64);
|
|
253
|
-
};
|
|
254
|
-
reader.onerror = function (err) {
|
|
255
|
-
reject(err);
|
|
256
|
-
};
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
function parseSVGToDataURL$1(svg) {
|
|
260
|
-
return new Promise(function (resolve, reject) {
|
|
261
|
-
var _svg = svg;
|
|
262
|
-
var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
|
|
263
|
-
var reader = new FileReader();
|
|
264
|
-
reader.readAsDataURL(blob);
|
|
265
|
-
reader.onload = function (event) {
|
|
266
|
-
var _a;
|
|
267
|
-
var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
|
|
268
|
-
resolve(base64);
|
|
269
|
-
};
|
|
270
|
-
reader.onerror = function (err) {
|
|
271
|
-
reject(err);
|
|
272
|
-
};
|
|
273
|
-
});
|
|
274
|
-
}
|
|
275
|
-
var Image$1 = window.Image;
|
|
276
|
-
function loadImage$2(src) {
|
|
277
|
-
return new Promise(function (resolve, reject) {
|
|
278
|
-
var img = new Image$1;
|
|
279
|
-
img.onload = function () {
|
|
280
|
-
resolve(img);
|
|
281
|
-
};
|
|
282
|
-
img.onabort = reject;
|
|
283
|
-
img.onerror = reject;
|
|
284
|
-
img.src = src;
|
|
285
|
-
});
|
|
286
|
-
}
|
|
287
|
-
function loadSVG$2(svg) {
|
|
288
|
-
return __awaiter$1(this, void 0, void 0, function () {
|
|
289
|
-
var dataURL, image;
|
|
290
|
-
return __generator$1(this, function (_a) {
|
|
291
|
-
switch (_a.label) {
|
|
292
|
-
case 0: return [4, parseSVGToDataURL$1(svg)];
|
|
293
|
-
case 1:
|
|
294
|
-
dataURL = _a.sent();
|
|
295
|
-
return [4, loadImage$2(dataURL)];
|
|
296
|
-
case 2:
|
|
297
|
-
image = _a.sent();
|
|
298
|
-
return [2, image];
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
});
|
|
302
|
-
}
|
|
303
|
-
function loadHTML$2(html, opts) {
|
|
304
|
-
return __awaiter$1(this, void 0, void 0, function () {
|
|
305
|
-
var dataURL, image;
|
|
306
|
-
return __generator$1(this, function (_a) {
|
|
307
|
-
switch (_a.label) {
|
|
308
|
-
case 0: return [4, parseHTMLToDataURL$1(html, opts)];
|
|
309
|
-
case 1:
|
|
310
|
-
dataURL = _a.sent();
|
|
311
|
-
return [4, loadImage$2(dataURL)];
|
|
312
|
-
case 2:
|
|
313
|
-
image = _a.sent();
|
|
314
|
-
return [2, image];
|
|
315
|
-
}
|
|
316
|
-
});
|
|
317
|
-
});
|
|
318
|
-
}
|
|
319
|
-
var index$1 = {
|
|
320
|
-
time: {
|
|
321
|
-
delay: delay$1,
|
|
322
|
-
compose: compose$1,
|
|
323
|
-
throttle: throttle$1,
|
|
324
|
-
},
|
|
325
|
-
loader: {
|
|
326
|
-
loadImage: loadImage$2,
|
|
327
|
-
loadSVG: loadSVG$2,
|
|
328
|
-
loadHTML: loadHTML$2,
|
|
329
|
-
},
|
|
330
|
-
file: {
|
|
331
|
-
downloadImageFromCanvas: downloadImageFromCanvas$1,
|
|
332
|
-
},
|
|
333
|
-
color: {
|
|
334
|
-
toColorHexStr: toColorHexStr$1,
|
|
335
|
-
toColorHexNum: toColorHexNum$1,
|
|
336
|
-
isColorStr: isColorStr$3,
|
|
337
|
-
},
|
|
338
|
-
uuid: {
|
|
339
|
-
createUUID: createUUID$3
|
|
340
|
-
},
|
|
341
|
-
istype: istype$2,
|
|
342
|
-
data: {
|
|
343
|
-
deepClone: deepClone$6,
|
|
344
|
-
}
|
|
345
|
-
};
|
|
346
|
-
var BoardEvent = (function () {
|
|
347
|
-
function BoardEvent() {
|
|
348
|
-
this._listeners = new Map();
|
|
349
|
-
}
|
|
350
|
-
BoardEvent.prototype.on = function (eventKey, callback) {
|
|
351
|
-
if (this._listeners.has(eventKey)) {
|
|
352
|
-
var callbacks = this._listeners.get(eventKey);
|
|
353
|
-
callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
|
|
354
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
355
|
-
}
|
|
356
|
-
else {
|
|
357
|
-
this._listeners.set(eventKey, [callback]);
|
|
358
|
-
}
|
|
359
|
-
};
|
|
360
|
-
BoardEvent.prototype.off = function (eventKey, callback) {
|
|
361
|
-
if (this._listeners.has(eventKey)) {
|
|
362
|
-
var callbacks = this._listeners.get(eventKey);
|
|
363
|
-
if (Array.isArray(callbacks)) {
|
|
364
|
-
for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
|
|
365
|
-
if (callbacks[i] === callback) {
|
|
366
|
-
callbacks.splice(i, 1);
|
|
367
|
-
break;
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
372
|
-
}
|
|
373
|
-
};
|
|
374
|
-
BoardEvent.prototype.trigger = function (eventKey, arg) {
|
|
375
|
-
var callbacks = this._listeners.get(eventKey);
|
|
376
|
-
if (Array.isArray(callbacks)) {
|
|
377
|
-
callbacks.forEach(function (cb) {
|
|
378
|
-
cb(arg);
|
|
379
|
-
});
|
|
380
|
-
return true;
|
|
381
|
-
}
|
|
382
|
-
else {
|
|
383
|
-
return false;
|
|
384
|
-
}
|
|
385
|
-
};
|
|
386
|
-
BoardEvent.prototype.has = function (name) {
|
|
387
|
-
if (this._listeners.has(name)) {
|
|
388
|
-
var list = this._listeners.get(name);
|
|
389
|
-
if (Array.isArray(list) && list.length > 0) {
|
|
390
|
-
return true;
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
return false;
|
|
394
|
-
};
|
|
395
|
-
return BoardEvent;
|
|
396
|
-
}());
|
|
397
|
-
function createTempData() {
|
|
398
|
-
return {
|
|
399
|
-
prevClickPoint: null,
|
|
400
|
-
isHoverCanvas: false,
|
|
401
|
-
isDragCanvas: false,
|
|
402
|
-
statusMap: {
|
|
403
|
-
canScrollYPrev: true,
|
|
404
|
-
canScrollYNext: true,
|
|
405
|
-
canScrollXPrev: true,
|
|
406
|
-
canScrollXNext: true,
|
|
407
|
-
}
|
|
408
|
-
};
|
|
409
|
-
}
|
|
410
|
-
var TempData$1 = (function () {
|
|
411
|
-
function TempData() {
|
|
412
|
-
this._temp = createTempData();
|
|
413
|
-
}
|
|
414
|
-
TempData.prototype.set = function (name, value) {
|
|
415
|
-
this._temp[name] = value;
|
|
416
|
-
};
|
|
417
|
-
TempData.prototype.get = function (name) {
|
|
418
|
-
return this._temp[name];
|
|
419
|
-
};
|
|
420
|
-
TempData.prototype.clear = function () {
|
|
421
|
-
this._temp = createTempData();
|
|
422
|
-
};
|
|
423
|
-
return TempData;
|
|
424
|
-
}());
|
|
425
|
-
var ScreenWatcher = (function () {
|
|
426
|
-
function ScreenWatcher(canvas, ctx) {
|
|
427
|
-
this._isMoving = false;
|
|
428
|
-
this._temp = new TempData$1;
|
|
429
|
-
this._container = window;
|
|
430
|
-
this._canvas = canvas;
|
|
431
|
-
this._isMoving = false;
|
|
432
|
-
this._initEvent();
|
|
433
|
-
this._event = new BoardEvent;
|
|
434
|
-
}
|
|
435
|
-
ScreenWatcher.prototype.setStatusMap = function (statusMap) {
|
|
436
|
-
this._temp.set('statusMap', statusMap);
|
|
437
|
-
};
|
|
438
|
-
ScreenWatcher.prototype.on = function (name, callback) {
|
|
439
|
-
this._event.on(name, callback);
|
|
440
|
-
};
|
|
441
|
-
ScreenWatcher.prototype.off = function (name, callback) {
|
|
442
|
-
this._event.off(name, callback);
|
|
443
|
-
};
|
|
444
|
-
ScreenWatcher.prototype._initEvent = function () {
|
|
445
|
-
var canvas = this._canvas;
|
|
446
|
-
var container = this._container;
|
|
447
|
-
container.addEventListener('mousemove', this._listenWindowMove.bind(this), false);
|
|
448
|
-
container.addEventListener('mouseup', this._listenWindowMoveEnd.bind(this), false);
|
|
449
|
-
canvas.addEventListener('mousemove', this._listenHover.bind(this), false);
|
|
450
|
-
canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), false);
|
|
451
|
-
canvas.addEventListener('mousemove', this._listenMove.bind(this), false);
|
|
452
|
-
canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), false);
|
|
453
|
-
canvas.addEventListener('click', this._listenCanvasClick.bind(this), false);
|
|
454
|
-
canvas.addEventListener('wheel', this._listenCanvasWheel.bind(this), false);
|
|
455
|
-
canvas.addEventListener('mousedown', this._listenCanvasMoveStart.bind(this), true);
|
|
456
|
-
canvas.addEventListener('mouseup', this._listenCanvasMoveEnd.bind(this), true);
|
|
457
|
-
canvas.addEventListener('mouseover', this._listenCanvasMoveOver.bind(this), true);
|
|
458
|
-
canvas.addEventListener('mouseleave', this._listenCanvasMoveLeave.bind(this), true);
|
|
459
|
-
this._initParentEvent();
|
|
460
|
-
};
|
|
461
|
-
ScreenWatcher.prototype._initParentEvent = function () {
|
|
462
|
-
var target = window;
|
|
463
|
-
var targetOrigin = target.origin;
|
|
464
|
-
while (target.self !== target.top) {
|
|
465
|
-
if (target.self !== target.parent) {
|
|
466
|
-
if (target.origin === targetOrigin) {
|
|
467
|
-
target.parent.window.addEventListener('mousemove', this._listSameOriginParentWindow.bind(this), false);
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
target = target.parent;
|
|
471
|
-
if (!target) {
|
|
472
|
-
break;
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
};
|
|
476
|
-
ScreenWatcher.prototype._listenHover = function (e) {
|
|
477
|
-
e.preventDefault();
|
|
478
|
-
var p = this._getPosition(e);
|
|
479
|
-
if (this._isVaildPoint(p)) {
|
|
480
|
-
if (this._event.has('hover')) {
|
|
481
|
-
this._event.trigger('hover', p);
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
this._isMoving = true;
|
|
485
|
-
};
|
|
486
|
-
ScreenWatcher.prototype._listenMoveStart = function (e) {
|
|
487
|
-
e.preventDefault();
|
|
488
|
-
var p = this._getPosition(e);
|
|
489
|
-
if (this._isVaildPoint(p)) {
|
|
490
|
-
if (this._event.has('point')) {
|
|
491
|
-
this._event.trigger('point', p);
|
|
492
|
-
}
|
|
493
|
-
if (this._event.has('moveStart')) {
|
|
494
|
-
this._event.trigger('moveStart', p);
|
|
495
|
-
}
|
|
496
|
-
}
|
|
497
|
-
this._isMoving = true;
|
|
498
|
-
};
|
|
499
|
-
ScreenWatcher.prototype._listenMove = function (e) {
|
|
500
|
-
e.preventDefault();
|
|
501
|
-
e.stopPropagation();
|
|
502
|
-
if (this._event.has('move') && this._isMoving === true) {
|
|
503
|
-
var p = this._getPosition(e);
|
|
504
|
-
if (this._isVaildPoint(p)) {
|
|
505
|
-
this._event.trigger('move', p);
|
|
506
|
-
}
|
|
507
|
-
}
|
|
508
|
-
};
|
|
509
|
-
ScreenWatcher.prototype._listenMoveEnd = function (e) {
|
|
510
|
-
e.preventDefault();
|
|
511
|
-
if (this._event.has('moveEnd')) {
|
|
512
|
-
var p = this._getPosition(e);
|
|
513
|
-
if (this._isVaildPoint(p)) {
|
|
514
|
-
this._event.trigger('moveEnd', p);
|
|
515
|
-
}
|
|
516
|
-
}
|
|
517
|
-
this._isMoving = false;
|
|
518
|
-
};
|
|
519
|
-
ScreenWatcher.prototype._listSameOriginParentWindow = function () {
|
|
520
|
-
if (this._temp.get('isHoverCanvas')) {
|
|
521
|
-
if (this._event.has('leave')) {
|
|
522
|
-
this._event.trigger('leave', undefined);
|
|
523
|
-
}
|
|
524
|
-
}
|
|
525
|
-
if (this._temp.get('isDragCanvas')) {
|
|
526
|
-
if (this._event.has('moveEnd')) {
|
|
527
|
-
this._event.trigger('moveEnd', { x: NaN, y: NaN });
|
|
528
|
-
}
|
|
529
|
-
}
|
|
530
|
-
this._isMoving = false;
|
|
531
|
-
this._temp.set('isDragCanvas', false);
|
|
532
|
-
this._temp.set('isHoverCanvas', false);
|
|
533
|
-
};
|
|
534
|
-
ScreenWatcher.prototype._listenCanvasMoveStart = function () {
|
|
535
|
-
if (this._temp.get('isHoverCanvas')) {
|
|
536
|
-
this._temp.set('isDragCanvas', true);
|
|
537
|
-
}
|
|
538
|
-
};
|
|
539
|
-
ScreenWatcher.prototype._listenCanvasMoveEnd = function () {
|
|
540
|
-
this._temp.set('isDragCanvas', false);
|
|
541
|
-
};
|
|
542
|
-
ScreenWatcher.prototype._listenCanvasMoveOver = function () {
|
|
543
|
-
this._temp.set('isHoverCanvas', true);
|
|
544
|
-
};
|
|
545
|
-
ScreenWatcher.prototype._listenCanvasMoveLeave = function () {
|
|
546
|
-
this._temp.set('isHoverCanvas', false);
|
|
547
|
-
if (this._event.has('leave')) {
|
|
548
|
-
this._event.trigger('leave', undefined);
|
|
549
|
-
}
|
|
550
|
-
};
|
|
551
|
-
ScreenWatcher.prototype._listenWindowMove = function (e) {
|
|
552
|
-
if (this._temp.get('isDragCanvas') !== true) {
|
|
553
|
-
return;
|
|
554
|
-
}
|
|
555
|
-
e.preventDefault();
|
|
556
|
-
e.stopPropagation();
|
|
557
|
-
if (this._event.has('move') && this._isMoving === true) {
|
|
558
|
-
var p = this._getPosition(e);
|
|
559
|
-
if (this._isVaildPoint(p)) {
|
|
560
|
-
this._event.trigger('move', p);
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
};
|
|
564
|
-
ScreenWatcher.prototype._listenWindowMoveEnd = function (e) {
|
|
565
|
-
if (!this._temp.get('isDragCanvas') === true) {
|
|
566
|
-
return;
|
|
567
|
-
}
|
|
568
|
-
e.preventDefault();
|
|
569
|
-
if (this._event.has('moveEnd')) {
|
|
570
|
-
var p = this._getPosition(e);
|
|
571
|
-
if (this._isVaildPoint(p)) {
|
|
572
|
-
this._event.trigger('moveEnd', p);
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
this._temp.set('isDragCanvas', false);
|
|
576
|
-
this._isMoving = false;
|
|
577
|
-
};
|
|
578
|
-
ScreenWatcher.prototype._listenCanvasWheel = function (e) {
|
|
579
|
-
if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) {
|
|
580
|
-
this._event.trigger('wheelX', e.deltaX);
|
|
581
|
-
}
|
|
582
|
-
if (this._event.has('wheelY') && (e.deltaY > 0 || e.deltaY < 0)) {
|
|
583
|
-
this._event.trigger('wheelY', e.deltaY);
|
|
584
|
-
}
|
|
585
|
-
var _a = this._temp.get('statusMap'), canScrollYNext = _a.canScrollYNext, canScrollYPrev = _a.canScrollYPrev;
|
|
586
|
-
if (e.deltaX > 0 && e.deltaX < 0) {
|
|
587
|
-
e.preventDefault();
|
|
588
|
-
}
|
|
589
|
-
else if (e.deltaY > 0 && canScrollYNext === true) {
|
|
590
|
-
e.preventDefault();
|
|
591
|
-
}
|
|
592
|
-
else if (e.deltaY < 0 && canScrollYPrev === true) {
|
|
593
|
-
e.preventDefault();
|
|
594
|
-
}
|
|
595
|
-
};
|
|
596
|
-
ScreenWatcher.prototype._listenCanvasClick = function (e) {
|
|
597
|
-
e.preventDefault();
|
|
598
|
-
var maxLimitTime = 500;
|
|
599
|
-
var p = this._getPosition(e);
|
|
600
|
-
var t = Date.now();
|
|
601
|
-
if (this._isVaildPoint(p)) {
|
|
602
|
-
var preClickPoint = this._temp.get('prevClickPoint');
|
|
603
|
-
if (preClickPoint && (t - preClickPoint.t <= maxLimitTime)
|
|
604
|
-
&& Math.abs(preClickPoint.x - p.x) <= 5
|
|
605
|
-
&& Math.abs(preClickPoint.y - p.y) <= 5) {
|
|
606
|
-
if (this._event.has('doubleClick')) {
|
|
607
|
-
this._event.trigger('doubleClick', { x: p.x, y: p.y });
|
|
608
|
-
}
|
|
609
|
-
}
|
|
610
|
-
else {
|
|
611
|
-
this._temp.set('prevClickPoint', { x: p.x, y: p.y, t: t, });
|
|
612
|
-
}
|
|
613
|
-
}
|
|
614
|
-
};
|
|
615
|
-
ScreenWatcher.prototype._getPosition = function (e) {
|
|
616
|
-
var canvas = this._canvas;
|
|
617
|
-
var x = 0;
|
|
618
|
-
var y = 0;
|
|
619
|
-
if (e && e.touches && e.touches.length > 0) {
|
|
620
|
-
var touch = e.touches[0];
|
|
621
|
-
if (touch) {
|
|
622
|
-
x = touch.clientX;
|
|
623
|
-
y = touch.clientY;
|
|
624
|
-
}
|
|
625
|
-
}
|
|
626
|
-
else {
|
|
627
|
-
x = e.clientX;
|
|
628
|
-
y = e.clientY;
|
|
629
|
-
}
|
|
630
|
-
var p = {
|
|
631
|
-
x: x - canvas.getBoundingClientRect().left,
|
|
632
|
-
y: y - canvas.getBoundingClientRect().top,
|
|
633
|
-
t: Date.now(),
|
|
634
|
-
};
|
|
635
|
-
return p;
|
|
636
|
-
};
|
|
637
|
-
ScreenWatcher.prototype._isVaildPoint = function (p) {
|
|
638
|
-
return isAvailableNum(p.x) && isAvailableNum(p.y);
|
|
639
|
-
};
|
|
640
|
-
return ScreenWatcher;
|
|
641
|
-
}());
|
|
642
|
-
function isAvailableNum(num) {
|
|
643
|
-
return (num > 0 || num < 0 || num === 0);
|
|
644
|
-
}
|
|
645
|
-
function setStyle(dom, style) {
|
|
646
|
-
var originStyle = getStyle(dom);
|
|
647
|
-
var _style = __assign(__assign({}, originStyle), style);
|
|
648
|
-
var keys = Object.keys(_style);
|
|
649
|
-
var styleStr = '';
|
|
650
|
-
keys.forEach(function (key) {
|
|
651
|
-
styleStr += key + ":" + (_style[key] || '') + ";";
|
|
652
|
-
});
|
|
653
|
-
dom.setAttribute('style', styleStr);
|
|
654
|
-
}
|
|
655
|
-
function getStyle(dom) {
|
|
656
|
-
var styleObj = {};
|
|
657
|
-
var style = dom.getAttribute('style') || '';
|
|
658
|
-
var styleList = style.split(';');
|
|
659
|
-
styleList.forEach(function (item) {
|
|
660
|
-
var dataList = item.split(':');
|
|
661
|
-
if (dataList[0] && typeof dataList[0] === 'string') {
|
|
662
|
-
styleObj[dataList[0]] = dataList[1] || '';
|
|
663
|
-
}
|
|
664
|
-
});
|
|
665
|
-
return styleObj;
|
|
666
|
-
}
|
|
667
|
-
var Context = (function () {
|
|
668
|
-
function Context(ctx, opts) {
|
|
669
|
-
this._opts = opts;
|
|
670
|
-
this._ctx = ctx;
|
|
671
|
-
this._transform = {
|
|
672
|
-
scale: 1,
|
|
673
|
-
scrollX: 0,
|
|
674
|
-
scrollY: 0,
|
|
675
|
-
};
|
|
676
|
-
}
|
|
677
|
-
Context.prototype.resetSize = function (opts) {
|
|
678
|
-
this._opts = __assign(__assign({}, this._opts), opts);
|
|
679
|
-
};
|
|
680
|
-
Context.prototype.calcDeviceNum = function (num) {
|
|
681
|
-
return num * this._opts.devicePixelRatio;
|
|
682
|
-
};
|
|
683
|
-
Context.prototype.calcScreenNum = function (num) {
|
|
684
|
-
return num / this._opts.devicePixelRatio;
|
|
685
|
-
};
|
|
686
|
-
Context.prototype.getSize = function () {
|
|
687
|
-
return {
|
|
688
|
-
width: this._opts.width,
|
|
689
|
-
height: this._opts.height,
|
|
690
|
-
contextWidth: this._opts.contextWidth,
|
|
691
|
-
contextHeight: this._opts.contextHeight,
|
|
692
|
-
devicePixelRatio: this._opts.devicePixelRatio,
|
|
693
|
-
};
|
|
694
|
-
};
|
|
695
|
-
Context.prototype.setTransform = function (config) {
|
|
696
|
-
this._transform = __assign(__assign({}, this._transform), config);
|
|
697
|
-
};
|
|
698
|
-
Context.prototype.getTransform = function () {
|
|
699
|
-
return {
|
|
700
|
-
scale: this._transform.scale,
|
|
701
|
-
scrollX: this._transform.scrollX,
|
|
702
|
-
scrollY: this._transform.scrollY,
|
|
703
|
-
};
|
|
704
|
-
};
|
|
705
|
-
Context.prototype.setFillStyle = function (color) {
|
|
706
|
-
this._ctx.fillStyle = color;
|
|
707
|
-
};
|
|
708
|
-
Context.prototype.fill = function (fillRule) {
|
|
709
|
-
return this._ctx.fill(fillRule || 'nonzero');
|
|
710
|
-
};
|
|
711
|
-
Context.prototype.arc = function (x, y, radius, startAngle, endAngle, anticlockwise) {
|
|
712
|
-
return this._ctx.arc(this._doSize(x), this._doSize(y), this._doSize(radius), startAngle, endAngle, anticlockwise);
|
|
713
|
-
};
|
|
714
|
-
Context.prototype.rect = function (x, y, w, h) {
|
|
715
|
-
return this._ctx.rect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
|
|
716
|
-
};
|
|
717
|
-
Context.prototype.fillRect = function (x, y, w, h) {
|
|
718
|
-
return this._ctx.fillRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
|
|
719
|
-
};
|
|
720
|
-
Context.prototype.clearRect = function (x, y, w, h) {
|
|
721
|
-
return this._ctx.clearRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
|
|
722
|
-
};
|
|
723
|
-
Context.prototype.beginPath = function () {
|
|
724
|
-
return this._ctx.beginPath();
|
|
725
|
-
};
|
|
726
|
-
Context.prototype.closePath = function () {
|
|
727
|
-
return this._ctx.closePath();
|
|
728
|
-
};
|
|
729
|
-
Context.prototype.lineTo = function (x, y) {
|
|
730
|
-
return this._ctx.lineTo(this._doSize(x), this._doSize(y));
|
|
731
|
-
};
|
|
732
|
-
Context.prototype.moveTo = function (x, y) {
|
|
733
|
-
return this._ctx.moveTo(this._doSize(x), this._doSize(y));
|
|
734
|
-
};
|
|
735
|
-
Context.prototype.arcTo = function (x1, y1, x2, y2, radius) {
|
|
736
|
-
return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
|
|
737
|
-
};
|
|
738
|
-
Context.prototype.setLineWidth = function (w) {
|
|
739
|
-
return this._ctx.lineWidth = this._doSize(w);
|
|
740
|
-
};
|
|
741
|
-
Context.prototype.setLineDash = function (nums) {
|
|
742
|
-
var _this = this;
|
|
743
|
-
return this._ctx.setLineDash(nums.map(function (n) { return _this._doSize(n); }));
|
|
744
|
-
};
|
|
745
|
-
Context.prototype.isPointInPath = function (x, y) {
|
|
746
|
-
return this._ctx.isPointInPath(this._doX(x), this._doY(y));
|
|
747
|
-
};
|
|
748
|
-
Context.prototype.isPointInPathWithoutScroll = function (x, y) {
|
|
749
|
-
return this._ctx.isPointInPath(this._doSize(x), this._doSize(y));
|
|
750
|
-
};
|
|
751
|
-
Context.prototype.setStrokeStyle = function (color) {
|
|
752
|
-
this._ctx.strokeStyle = color;
|
|
753
|
-
};
|
|
754
|
-
Context.prototype.stroke = function () {
|
|
755
|
-
return this._ctx.stroke();
|
|
756
|
-
};
|
|
757
|
-
Context.prototype.translate = function (x, y) {
|
|
758
|
-
return this._ctx.translate(this._doSize(x), this._doSize(y));
|
|
759
|
-
};
|
|
760
|
-
Context.prototype.rotate = function (angle) {
|
|
761
|
-
return this._ctx.rotate(angle);
|
|
762
|
-
};
|
|
763
|
-
Context.prototype.drawImage = function () {
|
|
764
|
-
var args = [];
|
|
765
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
766
|
-
args[_i] = arguments[_i];
|
|
767
|
-
}
|
|
768
|
-
var image = args[0];
|
|
769
|
-
var sx = args[1];
|
|
770
|
-
var sy = args[2];
|
|
771
|
-
var sw = args[3];
|
|
772
|
-
var sh = args[4];
|
|
773
|
-
var dx = args[args.length - 4];
|
|
774
|
-
var dy = args[args.length - 3];
|
|
775
|
-
var dw = args[args.length - 2];
|
|
776
|
-
var dh = args[args.length - 1];
|
|
777
|
-
if (args.length === 9) {
|
|
778
|
-
return this._ctx.drawImage(image, this._doSize(sx), this._doSize(sy), this._doSize(sw), this._doSize(sh), this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
|
|
779
|
-
}
|
|
780
|
-
else {
|
|
781
|
-
return this._ctx.drawImage(image, this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
|
|
782
|
-
}
|
|
783
|
-
};
|
|
784
|
-
Context.prototype.createPattern = function (image, repetition) {
|
|
785
|
-
return this._ctx.createPattern(image, repetition);
|
|
786
|
-
};
|
|
787
|
-
Context.prototype.measureText = function (text) {
|
|
788
|
-
return this._ctx.measureText(text);
|
|
789
|
-
};
|
|
790
|
-
Context.prototype.setTextAlign = function (align) {
|
|
791
|
-
this._ctx.textAlign = align;
|
|
792
|
-
};
|
|
793
|
-
Context.prototype.fillText = function (text, x, y, maxWidth) {
|
|
794
|
-
if (maxWidth !== undefined) {
|
|
795
|
-
return this._ctx.fillText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
|
|
796
|
-
}
|
|
797
|
-
else {
|
|
798
|
-
return this._ctx.fillText(text, this._doSize(x), this._doSize(y));
|
|
799
|
-
}
|
|
800
|
-
};
|
|
801
|
-
Context.prototype.strokeText = function (text, x, y, maxWidth) {
|
|
802
|
-
if (maxWidth !== undefined) {
|
|
803
|
-
return this._ctx.strokeText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
|
|
804
|
-
}
|
|
805
|
-
else {
|
|
806
|
-
return this._ctx.strokeText(text, this._doSize(x), this._doSize(y));
|
|
807
|
-
}
|
|
808
|
-
};
|
|
809
|
-
Context.prototype.setFont = function (opts) {
|
|
810
|
-
var strList = [];
|
|
811
|
-
if (opts.fontWeight === 'bold') {
|
|
812
|
-
strList.push("" + opts.fontWeight);
|
|
813
|
-
}
|
|
814
|
-
strList.push(this._doSize(opts.fontSize || 12) + "px");
|
|
815
|
-
strList.push("" + (opts.fontFamily || 'sans-serif'));
|
|
816
|
-
this._ctx.font = "" + strList.join(' ');
|
|
817
|
-
};
|
|
818
|
-
Context.prototype.setTextBaseline = function (baseline) {
|
|
819
|
-
this._ctx.textBaseline = baseline;
|
|
820
|
-
};
|
|
821
|
-
Context.prototype.setGlobalAlpha = function (alpha) {
|
|
822
|
-
this._ctx.globalAlpha = alpha;
|
|
823
|
-
};
|
|
824
|
-
Context.prototype.save = function () {
|
|
825
|
-
this._ctx.save();
|
|
826
|
-
};
|
|
827
|
-
Context.prototype.restore = function () {
|
|
828
|
-
this._ctx.restore();
|
|
829
|
-
};
|
|
830
|
-
Context.prototype.scale = function (ratioX, ratioY) {
|
|
831
|
-
this._ctx.scale(ratioX, ratioY);
|
|
832
|
-
};
|
|
833
|
-
Context.prototype.setShadowColor = function (color) {
|
|
834
|
-
this._ctx.shadowColor = color;
|
|
835
|
-
};
|
|
836
|
-
Context.prototype.setShadowOffsetX = function (offsetX) {
|
|
837
|
-
this._ctx.shadowOffsetX = this._doSize(offsetX);
|
|
838
|
-
};
|
|
839
|
-
Context.prototype.setShadowOffsetY = function (offsetY) {
|
|
840
|
-
this._ctx.shadowOffsetY = this._doSize(offsetY);
|
|
841
|
-
};
|
|
842
|
-
Context.prototype.setShadowBlur = function (blur) {
|
|
843
|
-
this._ctx.shadowBlur = this._doSize(blur);
|
|
844
|
-
};
|
|
845
|
-
Context.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
|
|
846
|
-
this._ctx.ellipse(this._doSize(x), this._doSize(y), this._doSize(radiusX), this._doSize(radiusY), rotation, startAngle, endAngle, counterclockwise);
|
|
847
|
-
};
|
|
848
|
-
Context.prototype._doSize = function (num) {
|
|
849
|
-
return this._opts.devicePixelRatio * num;
|
|
850
|
-
};
|
|
851
|
-
Context.prototype._doX = function (x) {
|
|
852
|
-
var _a = this._transform, scale = _a.scale, scrollX = _a.scrollX;
|
|
853
|
-
var _x = (x - scrollX) / scale;
|
|
854
|
-
return this._doSize(_x);
|
|
855
|
-
};
|
|
856
|
-
Context.prototype._doY = function (y) {
|
|
857
|
-
var _a = this._transform, scale = _a.scale, scrollY = _a.scrollY;
|
|
858
|
-
var _y = (y - scrollY) / scale;
|
|
859
|
-
return this._doSize(_y);
|
|
860
|
-
};
|
|
861
|
-
return Context;
|
|
862
|
-
}());
|
|
863
|
-
var defaultScrollConfig = {
|
|
864
|
-
lineWidth: 12,
|
|
865
|
-
color: '#a0a0a0'
|
|
866
|
-
};
|
|
867
|
-
var Scroller = (function () {
|
|
868
|
-
function Scroller(ctx, opts) {
|
|
869
|
-
this._displayCtx = ctx;
|
|
870
|
-
this._opts = this._getOpts(opts);
|
|
871
|
-
}
|
|
872
|
-
Scroller.prototype.draw = function (position) {
|
|
873
|
-
var _a = this._opts, width = _a.width, height = _a.height;
|
|
874
|
-
var wrapper = this.calc(position);
|
|
875
|
-
var ctx = this._displayCtx;
|
|
876
|
-
if (wrapper.xSize > 0) {
|
|
877
|
-
ctx.globalAlpha = 0.2;
|
|
878
|
-
ctx.fillStyle = wrapper.color;
|
|
879
|
-
ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize));
|
|
880
|
-
ctx.globalAlpha = 1;
|
|
881
|
-
drawBox$1(ctx, {
|
|
882
|
-
x: this._doSize(wrapper.translateX),
|
|
883
|
-
y: this._doSize(height - wrapper.lineSize),
|
|
884
|
-
w: this._doSize(wrapper.xSize),
|
|
885
|
-
h: this._doSize(wrapper.lineSize),
|
|
886
|
-
r: this._doSize(wrapper.lineSize / 2),
|
|
887
|
-
color: wrapper.color,
|
|
888
|
-
});
|
|
889
|
-
}
|
|
890
|
-
if (wrapper.ySize > 0) {
|
|
891
|
-
ctx.globalAlpha = 0.2;
|
|
892
|
-
ctx.fillStyle = wrapper.color;
|
|
893
|
-
ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height));
|
|
894
|
-
ctx.globalAlpha = 1;
|
|
895
|
-
drawBox$1(ctx, {
|
|
896
|
-
x: this._doSize(width - wrapper.lineSize),
|
|
897
|
-
y: this._doSize(wrapper.translateY),
|
|
898
|
-
w: this._doSize(wrapper.lineSize),
|
|
899
|
-
h: this._doSize(wrapper.ySize),
|
|
900
|
-
r: this._doSize(wrapper.lineSize / 2),
|
|
901
|
-
color: wrapper.color,
|
|
902
|
-
});
|
|
903
|
-
}
|
|
904
|
-
ctx.globalAlpha = 1;
|
|
905
|
-
};
|
|
906
|
-
Scroller.prototype.resetSize = function (opts) {
|
|
907
|
-
this._opts = __assign(__assign({}, this._opts), opts);
|
|
908
|
-
};
|
|
909
|
-
Scroller.prototype.isPointAtScrollY = function (p) {
|
|
910
|
-
var _a = this._opts, width = _a.width, height = _a.height, scrollConfig = _a.scrollConfig;
|
|
911
|
-
var ctx = this._displayCtx;
|
|
912
|
-
ctx.beginPath();
|
|
913
|
-
ctx.rect(this._doSize(width - scrollConfig.lineWidth), 0, this._doSize(scrollConfig.lineWidth), this._doSize(height));
|
|
914
|
-
ctx.closePath();
|
|
915
|
-
if (ctx.isPointInPath(this._doSize(p.x), this._doSize(p.y))) {
|
|
916
|
-
return true;
|
|
917
|
-
}
|
|
918
|
-
return false;
|
|
919
|
-
};
|
|
920
|
-
Scroller.prototype.isPointAtScrollX = function (p) {
|
|
921
|
-
var _a = this._opts, width = _a.width, height = _a.height, scrollConfig = _a.scrollConfig;
|
|
922
|
-
var ctx = this._displayCtx;
|
|
923
|
-
ctx.beginPath();
|
|
924
|
-
ctx.rect(0, this._doSize(height - scrollConfig.lineWidth), this._doSize(width - scrollConfig.lineWidth), this._doSize(scrollConfig.lineWidth));
|
|
925
|
-
ctx.closePath();
|
|
926
|
-
if (ctx.isPointInPath(this._doSize(p.x), this._doSize(p.y))) {
|
|
927
|
-
return true;
|
|
928
|
-
}
|
|
929
|
-
return false;
|
|
930
|
-
};
|
|
931
|
-
Scroller.prototype.getLineWidth = function () {
|
|
932
|
-
var lineWidth = this._opts.scrollConfig.lineWidth;
|
|
933
|
-
return lineWidth;
|
|
934
|
-
};
|
|
935
|
-
Scroller.prototype.calc = function (position) {
|
|
936
|
-
var _a = this._opts, width = _a.width, height = _a.height, scrollConfig = _a.scrollConfig;
|
|
937
|
-
var sliderMinSize = scrollConfig.lineWidth * 2.5;
|
|
938
|
-
var lineSize = scrollConfig.lineWidth;
|
|
939
|
-
var xSize = 0;
|
|
940
|
-
var ySize = 0;
|
|
941
|
-
if (position.left <= 0 && position.right <= 0) {
|
|
942
|
-
xSize = Math.max(sliderMinSize, width - (Math.abs(position.left) + Math.abs(position.right)));
|
|
943
|
-
if (xSize >= width)
|
|
944
|
-
xSize = 0;
|
|
945
|
-
}
|
|
946
|
-
if (position.top <= 0 || position.bottom <= 0) {
|
|
947
|
-
ySize = Math.max(sliderMinSize, height - (Math.abs(position.top) + Math.abs(position.bottom)));
|
|
948
|
-
if (ySize >= height)
|
|
949
|
-
ySize = 0;
|
|
950
|
-
}
|
|
951
|
-
var translateX = 0;
|
|
952
|
-
if (xSize > 0) {
|
|
953
|
-
translateX = xSize / 2 + (width - xSize) * Math.abs(position.left) / (Math.abs(position.left) + Math.abs(position.right));
|
|
954
|
-
translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
|
|
955
|
-
}
|
|
956
|
-
var translateY = 0;
|
|
957
|
-
if (ySize > 0) {
|
|
958
|
-
translateY = ySize / 2 + (height - ySize) * Math.abs(position.top) / (Math.abs(position.top) + Math.abs(position.bottom));
|
|
959
|
-
translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
|
|
960
|
-
}
|
|
961
|
-
var scrollWrapper = {
|
|
962
|
-
lineSize: lineSize,
|
|
963
|
-
xSize: xSize,
|
|
964
|
-
ySize: ySize,
|
|
965
|
-
translateY: translateY,
|
|
966
|
-
translateX: translateX,
|
|
967
|
-
color: this._opts.scrollConfig.color
|
|
968
|
-
};
|
|
969
|
-
return scrollWrapper;
|
|
970
|
-
};
|
|
971
|
-
Scroller.prototype._doSize = function (num) {
|
|
972
|
-
return num * this._opts.devicePixelRatio;
|
|
973
|
-
};
|
|
974
|
-
Scroller.prototype._getOpts = function (opts) {
|
|
975
|
-
var options = __assign({ scrollConfig: defaultScrollConfig }, opts);
|
|
976
|
-
if (!options.scrollConfig) {
|
|
977
|
-
options.scrollConfig = defaultScrollConfig;
|
|
978
|
-
}
|
|
979
|
-
if (!(options.scrollConfig.lineWidth > 0)) {
|
|
980
|
-
options.scrollConfig.lineWidth = defaultScrollConfig.lineWidth;
|
|
981
|
-
}
|
|
982
|
-
options.scrollConfig.lineWidth = Math.max(options.scrollConfig.lineWidth, defaultScrollConfig.lineWidth);
|
|
983
|
-
if (index$1.color.isColorStr(options.scrollConfig.color) !== true) {
|
|
984
|
-
options.scrollConfig.color = options.scrollConfig.color;
|
|
985
|
-
}
|
|
986
|
-
return options;
|
|
987
|
-
};
|
|
988
|
-
return Scroller;
|
|
989
|
-
}());
|
|
990
|
-
function drawBox$1(ctx, opts) {
|
|
991
|
-
var x = opts.x, y = opts.y, w = opts.w, h = opts.h, color = opts.color;
|
|
992
|
-
var r = opts.r;
|
|
993
|
-
r = Math.min(r, w / 2, h / 2);
|
|
994
|
-
if (w < r * 2 || h < r * 2) {
|
|
995
|
-
r = 0;
|
|
996
|
-
}
|
|
997
|
-
ctx.beginPath();
|
|
998
|
-
ctx.moveTo(x + r, y);
|
|
999
|
-
ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
1000
|
-
ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
1001
|
-
ctx.arcTo(x, y + h, x, y, r);
|
|
1002
|
-
ctx.arcTo(x, y, x + w, y, r);
|
|
1003
|
-
ctx.closePath();
|
|
1004
|
-
ctx.fillStyle = color;
|
|
1005
|
-
ctx.fill();
|
|
1006
|
-
}
|
|
1007
|
-
var _opts$1$1 = Symbol('_opts');
|
|
1008
|
-
var _ctx$1 = Symbol('_ctx');
|
|
1009
|
-
var Screen = (function () {
|
|
1010
|
-
function Screen(ctx, opts) {
|
|
1011
|
-
this[_opts$1$1] = opts;
|
|
1012
|
-
this[_ctx$1] = ctx;
|
|
1013
|
-
}
|
|
1014
|
-
Screen.prototype.resetSize = function (opts) {
|
|
1015
|
-
this[_opts$1$1] = __assign(__assign({}, this[_opts$1$1]), opts);
|
|
1016
|
-
};
|
|
1017
|
-
Screen.prototype.calcScreen = function () {
|
|
1018
|
-
var scaleRatio = this[_ctx$1].getTransform().scale;
|
|
1019
|
-
var _a = this[_opts$1$1], width = _a.width, height = _a.height, contextWidth = _a.contextWidth, contextHeight = _a.contextHeight, pxRatio = _a.devicePixelRatio;
|
|
1020
|
-
var canScrollXPrev = true;
|
|
1021
|
-
var canScrollXNext = true;
|
|
1022
|
-
var canScrollYPrev = true;
|
|
1023
|
-
var canScrollYNext = true;
|
|
1024
|
-
if (contextWidth * scaleRatio <= width) {
|
|
1025
|
-
this[_ctx$1].setTransform({
|
|
1026
|
-
scrollX: (width - contextWidth * scaleRatio) / 2,
|
|
1027
|
-
});
|
|
1028
|
-
canScrollXPrev = false;
|
|
1029
|
-
canScrollXNext = false;
|
|
1030
|
-
}
|
|
1031
|
-
if (contextHeight * scaleRatio <= height) {
|
|
1032
|
-
this[_ctx$1].setTransform({
|
|
1033
|
-
scrollY: (height - contextHeight * scaleRatio) / 2,
|
|
1034
|
-
});
|
|
1035
|
-
canScrollYPrev = false;
|
|
1036
|
-
canScrollYNext = false;
|
|
1037
|
-
}
|
|
1038
|
-
if (contextWidth * scaleRatio >= width && this[_ctx$1].getTransform().scrollX > 0) {
|
|
1039
|
-
this[_ctx$1].setTransform({
|
|
1040
|
-
scrollX: 0,
|
|
1041
|
-
});
|
|
1042
|
-
canScrollXPrev = false;
|
|
1043
|
-
}
|
|
1044
|
-
if (contextHeight * scaleRatio >= height && this[_ctx$1].getTransform().scrollY > 0) {
|
|
1045
|
-
this[_ctx$1].setTransform({
|
|
1046
|
-
scrollY: 0,
|
|
1047
|
-
});
|
|
1048
|
-
canScrollYPrev = false;
|
|
1049
|
-
}
|
|
1050
|
-
var _b = this[_ctx$1].getTransform(), _scrollX = _b.scrollX, _scrollY = _b.scrollY;
|
|
1051
|
-
if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) {
|
|
1052
|
-
this[_ctx$1].setTransform({
|
|
1053
|
-
scrollX: 0 - Math.abs(contextWidth * scaleRatio - width)
|
|
1054
|
-
});
|
|
1055
|
-
canScrollXNext = false;
|
|
1056
|
-
}
|
|
1057
|
-
if (_scrollY < 0 && Math.abs(_scrollY) > Math.abs(contextHeight * scaleRatio - height)) {
|
|
1058
|
-
this[_ctx$1].setTransform({
|
|
1059
|
-
scrollY: 0 - Math.abs(contextHeight * scaleRatio - height)
|
|
1060
|
-
});
|
|
1061
|
-
canScrollYNext = false;
|
|
1062
|
-
}
|
|
1063
|
-
var _c = this[_ctx$1].getTransform(), scrollX = _c.scrollX, scrollY = _c.scrollY;
|
|
1064
|
-
var size = {
|
|
1065
|
-
x: scrollX * scaleRatio,
|
|
1066
|
-
y: scrollY * scaleRatio,
|
|
1067
|
-
w: contextWidth * scaleRatio,
|
|
1068
|
-
h: contextHeight * scaleRatio,
|
|
1069
|
-
};
|
|
1070
|
-
var deviceSize = {
|
|
1071
|
-
x: scrollX * pxRatio,
|
|
1072
|
-
y: scrollY * pxRatio,
|
|
1073
|
-
w: contextWidth * pxRatio * scaleRatio,
|
|
1074
|
-
h: contextHeight * pxRatio * scaleRatio,
|
|
1075
|
-
};
|
|
1076
|
-
var position = {
|
|
1077
|
-
top: scrollY,
|
|
1078
|
-
bottom: height - (contextHeight * scaleRatio + scrollY),
|
|
1079
|
-
left: scrollX,
|
|
1080
|
-
right: width - (contextWidth * scaleRatio + scrollX),
|
|
1081
|
-
};
|
|
1082
|
-
return {
|
|
1083
|
-
size: size,
|
|
1084
|
-
position: position,
|
|
1085
|
-
deviceSize: deviceSize,
|
|
1086
|
-
width: this[_opts$1$1].width,
|
|
1087
|
-
height: this[_opts$1$1].height,
|
|
1088
|
-
devicePixelRatio: this[_opts$1$1].devicePixelRatio,
|
|
1089
|
-
canScrollYPrev: canScrollYPrev,
|
|
1090
|
-
canScrollYNext: canScrollYNext,
|
|
1091
|
-
canScrollXPrev: canScrollXPrev,
|
|
1092
|
-
canScrollXNext: canScrollXNext,
|
|
1093
|
-
};
|
|
1094
|
-
};
|
|
1095
|
-
Screen.prototype.calcScreenScroll = function (start, end, sliderSize, limitLen, moveDistance) {
|
|
1096
|
-
var scrollDistance = start;
|
|
1097
|
-
var scrollLen = limitLen - sliderSize;
|
|
1098
|
-
if (start <= 0 && end <= 0) {
|
|
1099
|
-
scrollLen = Math.abs(start) + Math.abs(end);
|
|
1100
|
-
}
|
|
1101
|
-
var unit = 1;
|
|
1102
|
-
if (scrollLen > 0) {
|
|
1103
|
-
unit = scrollLen / (limitLen - sliderSize);
|
|
1104
|
-
}
|
|
1105
|
-
scrollDistance = 0 - unit * moveDistance;
|
|
1106
|
-
return scrollDistance;
|
|
1107
|
-
};
|
|
1108
|
-
return Screen;
|
|
1109
|
-
}());
|
|
1110
|
-
var _canvas = Symbol('_canvas');
|
|
1111
|
-
var _displayCanvas = Symbol('_displayCanvas');
|
|
1112
|
-
var _mount = Symbol('_mount');
|
|
1113
|
-
var _opts$2 = Symbol('_opts');
|
|
1114
|
-
var _hasRendered = Symbol('_hasRendered');
|
|
1115
|
-
var _ctx = Symbol('_ctx');
|
|
1116
|
-
var _displayCtx = Symbol('_displayCtx');
|
|
1117
|
-
var _originCtx = Symbol('_originCtx');
|
|
1118
|
-
var _watcher = Symbol('_watcher');
|
|
1119
|
-
var _render = Symbol('_render');
|
|
1120
|
-
var _parsePrivateOptions = Symbol('_parsePrivateOptions');
|
|
1121
|
-
var _scroller = Symbol('_scroller');
|
|
1122
|
-
var _initEvent = Symbol('_initEvent');
|
|
1123
|
-
var _doScrollX = Symbol('_doScrollX');
|
|
1124
|
-
var _doScrollY = Symbol('_doScrollY');
|
|
1125
|
-
var _doMoveScroll = Symbol('_doMoveScroll');
|
|
1126
|
-
var _resetContext = Symbol('_resetContext');
|
|
1127
|
-
var _screen = Symbol('_screen');
|
|
1128
|
-
var _a$1;
|
|
1129
|
-
var throttle$2 = index$1.time.throttle;
|
|
1130
|
-
var Board = (function () {
|
|
1131
|
-
function Board(mount, opts) {
|
|
1132
|
-
this[_a$1] = false;
|
|
1133
|
-
this[_mount] = mount;
|
|
1134
|
-
this[_canvas] = document.createElement('canvas');
|
|
1135
|
-
this[_displayCanvas] = document.createElement('canvas');
|
|
1136
|
-
this[_mount].appendChild(this[_displayCanvas]);
|
|
1137
|
-
this[_opts$2] = this[_parsePrivateOptions](opts);
|
|
1138
|
-
this[_originCtx] = this[_canvas].getContext('2d');
|
|
1139
|
-
this[_displayCtx] = this[_displayCanvas].getContext('2d');
|
|
1140
|
-
this[_ctx] = new Context(this[_originCtx], this[_opts$2]);
|
|
1141
|
-
this[_screen] = new Screen(this[_ctx], this[_opts$2]);
|
|
1142
|
-
this[_watcher] = new ScreenWatcher(this[_displayCanvas], this[_ctx]);
|
|
1143
|
-
this[_scroller] = new Scroller(this[_displayCtx], {
|
|
1144
|
-
width: opts.width,
|
|
1145
|
-
height: opts.height,
|
|
1146
|
-
devicePixelRatio: opts.devicePixelRatio || 1,
|
|
1147
|
-
scrollConfig: opts.scrollConfig,
|
|
1148
|
-
});
|
|
1149
|
-
this[_render]();
|
|
1150
|
-
}
|
|
1151
|
-
Board.prototype.getDisplayContext = function () {
|
|
1152
|
-
return this[_displayCtx];
|
|
1153
|
-
};
|
|
1154
|
-
Board.prototype.getOriginContext = function () {
|
|
1155
|
-
return this[_originCtx];
|
|
1156
|
-
};
|
|
1157
|
-
Board.prototype.getContext = function () {
|
|
1158
|
-
return this[_ctx];
|
|
1159
|
-
};
|
|
1160
|
-
Board.prototype.scale = function (scaleRatio) {
|
|
1161
|
-
if (scaleRatio > 0) {
|
|
1162
|
-
this[_ctx].setTransform({ scale: scaleRatio });
|
|
1163
|
-
}
|
|
1164
|
-
var _b = this[_screen].calcScreen(), position = _b.position, size = _b.size;
|
|
1165
|
-
return { position: position, size: size };
|
|
1166
|
-
};
|
|
1167
|
-
Board.prototype.scrollX = function (x) {
|
|
1168
|
-
this[_watcher].setStatusMap({
|
|
1169
|
-
canScrollYPrev: true,
|
|
1170
|
-
canScrollYNext: true,
|
|
1171
|
-
canScrollXPrev: true,
|
|
1172
|
-
canScrollXNext: true,
|
|
1173
|
-
});
|
|
1174
|
-
if (x >= 0 || x < 0) {
|
|
1175
|
-
this[_ctx].setTransform({ scrollX: x });
|
|
1176
|
-
}
|
|
1177
|
-
var _b = this[_screen].calcScreen(), position = _b.position, size = _b.size, canScrollXNext = _b.canScrollXNext, canScrollYNext = _b.canScrollYNext, canScrollXPrev = _b.canScrollXPrev, canScrollYPrev = _b.canScrollYPrev;
|
|
1178
|
-
this[_watcher].setStatusMap({
|
|
1179
|
-
canScrollYPrev: canScrollYPrev,
|
|
1180
|
-
canScrollYNext: canScrollYNext,
|
|
1181
|
-
canScrollXPrev: canScrollXPrev,
|
|
1182
|
-
canScrollXNext: canScrollXNext,
|
|
1183
|
-
});
|
|
1184
|
-
return { position: position, size: size };
|
|
1185
|
-
};
|
|
1186
|
-
Board.prototype.scrollY = function (y) {
|
|
1187
|
-
this[_watcher].setStatusMap({
|
|
1188
|
-
canScrollYPrev: true,
|
|
1189
|
-
canScrollYNext: true,
|
|
1190
|
-
canScrollXPrev: true,
|
|
1191
|
-
canScrollXNext: true,
|
|
1192
|
-
});
|
|
1193
|
-
if (y >= 0 || y < 0) {
|
|
1194
|
-
this[_ctx].setTransform({ scrollY: y });
|
|
1195
|
-
}
|
|
1196
|
-
var _b = this[_screen].calcScreen(), position = _b.position, size = _b.size, canScrollXNext = _b.canScrollXNext, canScrollYNext = _b.canScrollYNext, canScrollXPrev = _b.canScrollXPrev, canScrollYPrev = _b.canScrollYPrev;
|
|
1197
|
-
this[_watcher].setStatusMap({
|
|
1198
|
-
canScrollYPrev: canScrollYPrev,
|
|
1199
|
-
canScrollYNext: canScrollYNext,
|
|
1200
|
-
canScrollXPrev: canScrollXPrev,
|
|
1201
|
-
canScrollXNext: canScrollXNext,
|
|
1202
|
-
});
|
|
1203
|
-
return { position: position, size: size };
|
|
1204
|
-
};
|
|
1205
|
-
Board.prototype.getTransform = function () {
|
|
1206
|
-
return this[_ctx].getTransform();
|
|
1207
|
-
};
|
|
1208
|
-
Board.prototype.draw = function () {
|
|
1209
|
-
this.clear();
|
|
1210
|
-
var _b = this[_screen].calcScreen(), position = _b.position, deviceSize = _b.deviceSize, size = _b.size;
|
|
1211
|
-
this[_displayCtx].drawImage(this[_canvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h);
|
|
1212
|
-
if (this[_opts$2].canScroll === true) {
|
|
1213
|
-
this[_scroller].draw(position);
|
|
1214
|
-
}
|
|
1215
|
-
return { position: position, size: size };
|
|
1216
|
-
};
|
|
1217
|
-
Board.prototype.clear = function () {
|
|
1218
|
-
this[_displayCtx].clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
|
|
1219
|
-
};
|
|
1220
|
-
Board.prototype.on = function (name, callback) {
|
|
1221
|
-
this[_watcher].on(name, callback);
|
|
1222
|
-
};
|
|
1223
|
-
Board.prototype.off = function (name, callback) {
|
|
1224
|
-
this[_watcher].off(name, callback);
|
|
1225
|
-
};
|
|
1226
|
-
Board.prototype.getScreenInfo = function () {
|
|
1227
|
-
return this[_screen].calcScreen();
|
|
1228
|
-
};
|
|
1229
|
-
Board.prototype.setCursor = function (cursor) {
|
|
1230
|
-
this[_displayCanvas].style.cursor = cursor;
|
|
1231
|
-
};
|
|
1232
|
-
Board.prototype.resetCursor = function () {
|
|
1233
|
-
this[_displayCanvas].style.cursor = 'auto';
|
|
1234
|
-
};
|
|
1235
|
-
Board.prototype.resetSize = function (opts) {
|
|
1236
|
-
this[_opts$2] = __assign(__assign({}, this[_opts$2]), opts);
|
|
1237
|
-
this[_resetContext]();
|
|
1238
|
-
this[_ctx].resetSize(opts);
|
|
1239
|
-
this[_screen].resetSize(opts);
|
|
1240
|
-
this[_scroller].resetSize({
|
|
1241
|
-
width: this[_opts$2].width,
|
|
1242
|
-
height: this[_opts$2].height,
|
|
1243
|
-
devicePixelRatio: this[_opts$2].devicePixelRatio
|
|
1244
|
-
});
|
|
1245
|
-
this.draw();
|
|
1246
|
-
};
|
|
1247
|
-
Board.prototype.getScrollLineWidth = function () {
|
|
1248
|
-
var lineWidth = 0;
|
|
1249
|
-
if (this[_opts$2].canScroll === true) {
|
|
1250
|
-
lineWidth = this[_scroller].getLineWidth();
|
|
1251
|
-
}
|
|
1252
|
-
return lineWidth;
|
|
1253
|
-
};
|
|
1254
|
-
Board.prototype.pointScreenToContext = function (screenPoint) {
|
|
1255
|
-
var _b = this.getTransform(), scrollX = _b.scrollX, scrollY = _b.scrollY, scale = _b.scale;
|
|
1256
|
-
var ctxPoint = {
|
|
1257
|
-
x: (screenPoint.x - scrollX) / scale,
|
|
1258
|
-
y: (screenPoint.y - scrollY) / scale,
|
|
1259
|
-
};
|
|
1260
|
-
return ctxPoint;
|
|
1261
|
-
};
|
|
1262
|
-
Board.prototype.pointContextToScreen = function (ctxPoint) {
|
|
1263
|
-
var _b = this.getTransform(), scrollX = _b.scrollX, scrollY = _b.scrollY, scale = _b.scale;
|
|
1264
|
-
var screenPoint = {
|
|
1265
|
-
x: ctxPoint.x * scale + scrollX,
|
|
1266
|
-
y: ctxPoint.y * scale + scrollY,
|
|
1267
|
-
};
|
|
1268
|
-
return screenPoint;
|
|
1269
|
-
};
|
|
1270
|
-
Board.prototype[(_a$1 = _hasRendered, _render)] = function () {
|
|
1271
|
-
if (this[_hasRendered] === true) {
|
|
1272
|
-
return;
|
|
1273
|
-
}
|
|
1274
|
-
this[_resetContext]();
|
|
1275
|
-
this[_initEvent]();
|
|
1276
|
-
this[_hasRendered] = true;
|
|
1277
|
-
};
|
|
1278
|
-
Board.prototype[_resetContext] = function () {
|
|
1279
|
-
var _b = this[_opts$2], width = _b.width, height = _b.height, contextWidth = _b.contextWidth, contextHeight = _b.contextHeight, devicePixelRatio = _b.devicePixelRatio;
|
|
1280
|
-
this[_canvas].width = contextWidth * devicePixelRatio;
|
|
1281
|
-
this[_canvas].height = contextHeight * devicePixelRatio;
|
|
1282
|
-
this[_displayCanvas].width = width * devicePixelRatio;
|
|
1283
|
-
this[_displayCanvas].height = height * devicePixelRatio;
|
|
1284
|
-
setStyle(this[_displayCanvas], {
|
|
1285
|
-
width: width + "px",
|
|
1286
|
-
height: height + "px",
|
|
1287
|
-
});
|
|
1288
|
-
};
|
|
1289
|
-
Board.prototype[_parsePrivateOptions] = function (opts) {
|
|
1290
|
-
var defaultOpts = {
|
|
1291
|
-
devicePixelRatio: 1,
|
|
1292
|
-
};
|
|
1293
|
-
return __assign(__assign({}, defaultOpts), opts);
|
|
1294
|
-
};
|
|
1295
|
-
Board.prototype[_initEvent] = function () {
|
|
1296
|
-
var _this = this;
|
|
1297
|
-
if (this[_hasRendered] === true) {
|
|
1298
|
-
return;
|
|
1299
|
-
}
|
|
1300
|
-
if (this[_opts$2].canScroll === true) {
|
|
1301
|
-
this.on('wheelX', throttle$2(function (deltaX) {
|
|
1302
|
-
_this[_doScrollX](deltaX);
|
|
1303
|
-
}, 16));
|
|
1304
|
-
this.on('wheelY', throttle$2(function (deltaY) {
|
|
1305
|
-
_this[_doScrollY](deltaY);
|
|
1306
|
-
}, 16));
|
|
1307
|
-
var scrollType_1 = null;
|
|
1308
|
-
this.on('moveStart', throttle$2(function (p) {
|
|
1309
|
-
if (_this[_scroller].isPointAtScrollX(p)) {
|
|
1310
|
-
scrollType_1 = 'x';
|
|
1311
|
-
}
|
|
1312
|
-
else if (_this[_scroller].isPointAtScrollY(p)) {
|
|
1313
|
-
scrollType_1 = 'y';
|
|
1314
|
-
}
|
|
1315
|
-
}, 16));
|
|
1316
|
-
this.on('move', throttle$2(function (p) {
|
|
1317
|
-
if (scrollType_1) {
|
|
1318
|
-
_this[_doMoveScroll](scrollType_1, p);
|
|
1319
|
-
}
|
|
1320
|
-
}, 16));
|
|
1321
|
-
this.on('moveEnd', throttle$2(function (p) {
|
|
1322
|
-
if (scrollType_1) {
|
|
1323
|
-
_this[_doMoveScroll](scrollType_1, p);
|
|
1324
|
-
}
|
|
1325
|
-
scrollType_1 = null;
|
|
1326
|
-
}, 16));
|
|
1327
|
-
}
|
|
1328
|
-
};
|
|
1329
|
-
Board.prototype[_doScrollX] = function (dx, prevScrollX) {
|
|
1330
|
-
var width = this[_opts$2].width;
|
|
1331
|
-
var scrollX = prevScrollX;
|
|
1332
|
-
if (!(typeof scrollX === 'number' && (scrollX > 0 || scrollX <= 0))) {
|
|
1333
|
-
scrollX = this[_ctx].getTransform().scrollX;
|
|
1334
|
-
}
|
|
1335
|
-
var position = this[_screen].calcScreen().position;
|
|
1336
|
-
var xSize = this[_scroller].calc(position).xSize;
|
|
1337
|
-
var moveX = this[_screen].calcScreenScroll(position.left, position.right, xSize, width, dx);
|
|
1338
|
-
this.scrollX(scrollX + moveX);
|
|
1339
|
-
this.draw();
|
|
1340
|
-
};
|
|
1341
|
-
Board.prototype[_doScrollY] = function (dy, prevScrollY) {
|
|
1342
|
-
var height = this[_opts$2].height;
|
|
1343
|
-
var scrollY = prevScrollY;
|
|
1344
|
-
if (!(typeof scrollY === 'number' && (scrollY > 0 || scrollY <= 0))) {
|
|
1345
|
-
scrollY = this[_ctx].getTransform().scrollY;
|
|
1346
|
-
}
|
|
1347
|
-
var position = this[_screen].calcScreen().position;
|
|
1348
|
-
var ySize = this[_scroller].calc(position).ySize;
|
|
1349
|
-
var moveY = this[_screen].calcScreenScroll(position.top, position.bottom, ySize, height, dy);
|
|
1350
|
-
this.scrollY(scrollY + moveY);
|
|
1351
|
-
this.draw();
|
|
1352
|
-
};
|
|
1353
|
-
Board.prototype[_doMoveScroll] = function (scrollType, point) {
|
|
1354
|
-
if (!scrollType) {
|
|
1355
|
-
return;
|
|
1356
|
-
}
|
|
1357
|
-
var position = this[_screen].calcScreen().position;
|
|
1358
|
-
var _b = this[_scroller].calc(position), xSize = _b.xSize, ySize = _b.ySize;
|
|
1359
|
-
if (scrollType === 'x') {
|
|
1360
|
-
this[_doScrollX](point.x - xSize / 2, 0);
|
|
1361
|
-
}
|
|
1362
|
-
else if (scrollType === 'y') {
|
|
1363
|
-
this[_doScrollY](point.y - ySize / 2, 0);
|
|
1364
|
-
}
|
|
1365
|
-
};
|
|
1366
|
-
return Board;
|
|
1367
|
-
}());
|
|
1368
|
-
|
|
1369
|
-
function compose(middleware) {
|
|
1370
|
-
return function (context, next) {
|
|
1371
|
-
return dispatch(0);
|
|
1372
|
-
function dispatch(i) {
|
|
1373
|
-
var fn = middleware[i];
|
|
1374
|
-
if (i === middleware.length && next) {
|
|
1375
|
-
fn = next;
|
|
1376
|
-
}
|
|
1377
|
-
if (!fn)
|
|
1378
|
-
return Promise.resolve();
|
|
1379
|
-
try {
|
|
1380
|
-
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
|
|
1381
|
-
}
|
|
1382
|
-
catch (err) {
|
|
1383
|
-
return Promise.reject(err);
|
|
1384
|
-
}
|
|
1385
|
-
}
|
|
1386
|
-
};
|
|
1387
|
-
}
|
|
1388
|
-
function delay(time) {
|
|
1389
|
-
return new Promise(function (resolve) {
|
|
1390
|
-
setTimeout(function () {
|
|
1391
|
-
resolve();
|
|
1392
|
-
}, time);
|
|
1393
|
-
});
|
|
1394
|
-
}
|
|
1395
|
-
function throttle(fn, timeout) {
|
|
1396
|
-
var timer = -1;
|
|
1397
|
-
return function () {
|
|
1398
|
-
var args = [];
|
|
1399
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
1400
|
-
args[_i] = arguments[_i];
|
|
1401
|
-
}
|
|
1402
|
-
if (timer > 0) {
|
|
1403
|
-
return;
|
|
1404
|
-
}
|
|
1405
|
-
timer = setTimeout(function () {
|
|
1406
|
-
fn.apply(void 0, args);
|
|
1407
|
-
timer = -1;
|
|
1408
|
-
}, timeout);
|
|
1409
|
-
};
|
|
1410
|
-
}
|
|
1411
|
-
function downloadImageFromCanvas(canvas, opts) {
|
|
1412
|
-
var filename = opts.filename, _a = opts.type, type = _a === void 0 ? 'image/jpeg' : _a;
|
|
1413
|
-
var stream = canvas.toDataURL(type);
|
|
1414
|
-
var downloadLink = document.createElement('a');
|
|
1415
|
-
downloadLink.href = stream;
|
|
1416
|
-
downloadLink.download = filename;
|
|
1417
|
-
var downloadClickEvent = document.createEvent('MouseEvents');
|
|
1418
|
-
downloadClickEvent.initEvent('click', true, false);
|
|
1419
|
-
downloadLink.dispatchEvent(downloadClickEvent);
|
|
1420
|
-
}
|
|
1421
|
-
function toColorHexNum(color) {
|
|
1422
|
-
return parseInt(color.replace(/^\#/, '0x'));
|
|
1423
|
-
}
|
|
1424
|
-
function toColorHexStr(color) {
|
|
1425
|
-
return '#' + color.toString(16);
|
|
1426
|
-
}
|
|
1427
|
-
function isColorStr$2(color) {
|
|
1428
|
-
return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
|
|
1429
|
-
}
|
|
1430
|
-
function createUUID$2() {
|
|
1431
|
-
function str4() {
|
|
1432
|
-
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
1433
|
-
}
|
|
1434
|
-
return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
|
|
1435
|
-
}
|
|
1436
|
-
function deepClone$5(target) {
|
|
1437
|
-
function _clone(t) {
|
|
1438
|
-
var type = is$1(t);
|
|
1439
|
-
if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
|
|
1440
|
-
return t;
|
|
1441
|
-
}
|
|
1442
|
-
else if (type === 'Array') {
|
|
1443
|
-
var arr_1 = [];
|
|
1444
|
-
t.forEach(function (item) {
|
|
1445
|
-
arr_1.push(_clone(item));
|
|
1446
|
-
});
|
|
1447
|
-
return arr_1;
|
|
1448
|
-
}
|
|
1449
|
-
else if (type === 'Object') {
|
|
1450
|
-
var obj_1 = {};
|
|
1451
|
-
var keys = Object.keys(t);
|
|
1452
|
-
keys.forEach(function (key) {
|
|
1453
|
-
obj_1[key] = _clone(t[key]);
|
|
1454
|
-
});
|
|
1455
|
-
return obj_1;
|
|
1456
|
-
}
|
|
1457
|
-
}
|
|
1458
|
-
return _clone(target);
|
|
1459
|
-
}
|
|
1460
|
-
function is$1(data) {
|
|
1461
|
-
return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
|
|
1462
|
-
}
|
|
1463
|
-
function parsePrototype(data) {
|
|
1464
|
-
var typeStr = Object.prototype.toString.call(data) || '';
|
|
1465
|
-
var result = typeStr.replace(/(\[object|\])/ig, '').trim();
|
|
1466
|
-
return result;
|
|
1467
|
-
}
|
|
1468
|
-
var istype$1 = {
|
|
1469
|
-
type: function (data, lowerCase) {
|
|
1470
|
-
var result = parsePrototype(data);
|
|
1471
|
-
return lowerCase === true ? result.toLocaleLowerCase() : result;
|
|
1472
|
-
},
|
|
1473
|
-
array: function (data) {
|
|
1474
|
-
return parsePrototype(data) === 'Array';
|
|
1475
|
-
},
|
|
1476
|
-
json: function (data) {
|
|
1477
|
-
return parsePrototype(data) === 'Object';
|
|
1478
|
-
},
|
|
1479
|
-
function: function (data) {
|
|
1480
|
-
return parsePrototype(data) === 'Function';
|
|
1481
|
-
},
|
|
1482
|
-
asyncFunction: function (data) {
|
|
1483
|
-
return parsePrototype(data) === 'AsyncFunction';
|
|
1484
|
-
},
|
|
1485
|
-
string: function (data) {
|
|
1486
|
-
return parsePrototype(data) === 'String';
|
|
1487
|
-
},
|
|
1488
|
-
number: function (data) {
|
|
1489
|
-
return parsePrototype(data) === 'Number';
|
|
1490
|
-
},
|
|
1491
|
-
undefined: function (data) {
|
|
1492
|
-
return parsePrototype(data) === 'Undefined';
|
|
1493
|
-
},
|
|
1494
|
-
null: function (data) {
|
|
1495
|
-
return parsePrototype(data) === 'Null';
|
|
1496
|
-
},
|
|
1497
|
-
promise: function (data) {
|
|
1498
|
-
return parsePrototype(data) === 'Promise';
|
|
1499
|
-
},
|
|
1500
|
-
};
|
|
1501
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
1502
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
1503
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
1504
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
1505
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
1506
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
1507
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
1508
|
-
});
|
|
1509
|
-
}
|
|
1510
|
-
function __generator(thisArg, body) {
|
|
1511
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
1512
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
1513
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
1514
|
-
function step(op) {
|
|
1515
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
1516
|
-
while (_) try {
|
|
1517
|
-
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;
|
|
1518
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
1519
|
-
switch (op[0]) {
|
|
1520
|
-
case 0: case 1: t = op; break;
|
|
1521
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
1522
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
1523
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
1524
|
-
default:
|
|
1525
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
1526
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
1527
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
1528
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
1529
|
-
if (t[2]) _.ops.pop();
|
|
1530
|
-
_.trys.pop(); continue;
|
|
1531
|
-
}
|
|
1532
|
-
op = body.call(thisArg, _);
|
|
1533
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
1534
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
1535
|
-
}
|
|
1536
|
-
}
|
|
1537
|
-
function parseHTMLToDataURL(html, opts) {
|
|
1538
|
-
var width = opts.width, height = opts.height;
|
|
1539
|
-
return new Promise(function (resolve, reject) {
|
|
1540
|
-
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 ";
|
|
1541
|
-
var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
|
|
1542
|
-
var reader = new FileReader();
|
|
1543
|
-
reader.readAsDataURL(blob);
|
|
1544
|
-
reader.onload = function (event) {
|
|
1545
|
-
var _a;
|
|
1546
|
-
var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
|
|
1547
|
-
resolve(base64);
|
|
1548
|
-
};
|
|
1549
|
-
reader.onerror = function (err) {
|
|
1550
|
-
reject(err);
|
|
1551
|
-
};
|
|
1552
|
-
});
|
|
1553
|
-
}
|
|
1554
|
-
function parseSVGToDataURL(svg) {
|
|
1555
|
-
return new Promise(function (resolve, reject) {
|
|
1556
|
-
var _svg = svg;
|
|
1557
|
-
var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
|
|
1558
|
-
var reader = new FileReader();
|
|
1559
|
-
reader.readAsDataURL(blob);
|
|
1560
|
-
reader.onload = function (event) {
|
|
1561
|
-
var _a;
|
|
1562
|
-
var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
|
|
1563
|
-
resolve(base64);
|
|
1564
|
-
};
|
|
1565
|
-
reader.onerror = function (err) {
|
|
1566
|
-
reject(err);
|
|
1567
|
-
};
|
|
1568
|
-
});
|
|
1569
|
-
}
|
|
1570
|
-
var Image = window.Image;
|
|
1571
|
-
function loadImage$1(src) {
|
|
1572
|
-
return new Promise(function (resolve, reject) {
|
|
1573
|
-
var img = new Image;
|
|
1574
|
-
img.onload = function () {
|
|
1575
|
-
resolve(img);
|
|
1576
|
-
};
|
|
1577
|
-
img.onabort = reject;
|
|
1578
|
-
img.onerror = reject;
|
|
1579
|
-
img.src = src;
|
|
1580
|
-
});
|
|
1581
|
-
}
|
|
1582
|
-
function loadSVG$1(svg) {
|
|
1583
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
1584
|
-
var dataURL, image;
|
|
1585
|
-
return __generator(this, function (_a) {
|
|
1586
|
-
switch (_a.label) {
|
|
1587
|
-
case 0: return [4, parseSVGToDataURL(svg)];
|
|
1588
|
-
case 1:
|
|
1589
|
-
dataURL = _a.sent();
|
|
1590
|
-
return [4, loadImage$1(dataURL)];
|
|
1591
|
-
case 2:
|
|
1592
|
-
image = _a.sent();
|
|
1593
|
-
return [2, image];
|
|
1594
|
-
}
|
|
1595
|
-
});
|
|
1596
|
-
});
|
|
1597
|
-
}
|
|
1598
|
-
function loadHTML$1(html, opts) {
|
|
1599
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
1600
|
-
var dataURL, image;
|
|
1601
|
-
return __generator(this, function (_a) {
|
|
1602
|
-
switch (_a.label) {
|
|
1603
|
-
case 0: return [4, parseHTMLToDataURL(html, opts)];
|
|
1604
|
-
case 1:
|
|
1605
|
-
dataURL = _a.sent();
|
|
1606
|
-
return [4, loadImage$1(dataURL)];
|
|
1607
|
-
case 2:
|
|
1608
|
-
image = _a.sent();
|
|
1609
|
-
return [2, image];
|
|
1610
|
-
}
|
|
1611
|
-
});
|
|
1612
|
-
});
|
|
1613
|
-
}
|
|
1614
|
-
var index = {
|
|
1615
|
-
time: {
|
|
1616
|
-
delay: delay,
|
|
1617
|
-
compose: compose,
|
|
1618
|
-
throttle: throttle,
|
|
1619
|
-
},
|
|
1620
|
-
loader: {
|
|
1621
|
-
loadImage: loadImage$1,
|
|
1622
|
-
loadSVG: loadSVG$1,
|
|
1623
|
-
loadHTML: loadHTML$1,
|
|
1624
|
-
},
|
|
1625
|
-
file: {
|
|
1626
|
-
downloadImageFromCanvas: downloadImageFromCanvas,
|
|
1627
|
-
},
|
|
1628
|
-
color: {
|
|
1629
|
-
toColorHexStr: toColorHexStr,
|
|
1630
|
-
toColorHexNum: toColorHexNum,
|
|
1631
|
-
isColorStr: isColorStr$2,
|
|
1632
|
-
},
|
|
1633
|
-
uuid: {
|
|
1634
|
-
createUUID: createUUID$2
|
|
1635
|
-
},
|
|
1636
|
-
istype: istype$1,
|
|
1637
|
-
data: {
|
|
1638
|
-
deepClone: deepClone$5,
|
|
1639
|
-
}
|
|
1640
|
-
};
|
|
1641
|
-
|
|
1642
|
-
var isColorStr$1 = index.color.isColorStr;
|
|
1643
|
-
function number(value) {
|
|
1644
|
-
return (typeof value === 'number' && (value > 0 || value <= 0));
|
|
1645
|
-
}
|
|
1646
|
-
function x(value) {
|
|
1647
|
-
return number(value);
|
|
1648
|
-
}
|
|
1649
|
-
function y(value) {
|
|
1650
|
-
return number(value);
|
|
1651
|
-
}
|
|
1652
|
-
function w(value) {
|
|
1653
|
-
return (typeof value === 'number' && value >= 0);
|
|
1654
|
-
}
|
|
1655
|
-
function h(value) {
|
|
1656
|
-
return (typeof value === 'number' && value >= 0);
|
|
1657
|
-
}
|
|
1658
|
-
function angle(value) {
|
|
1659
|
-
return (typeof value === 'number' && value >= -360 && value <= 360);
|
|
1660
|
-
}
|
|
1661
|
-
function borderWidth(value) {
|
|
1662
|
-
return w(value);
|
|
1663
|
-
}
|
|
1664
|
-
function borderRadius(value) {
|
|
1665
|
-
return number(value) && value >= 0;
|
|
1666
|
-
}
|
|
1667
|
-
function color$1(value) {
|
|
1668
|
-
return isColorStr$1(value);
|
|
1669
|
-
}
|
|
1670
|
-
function imageURL(value) {
|
|
1671
|
-
return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
|
|
1672
|
-
}
|
|
1673
|
-
function imageBase64(value) {
|
|
1674
|
-
return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
|
|
1675
|
-
}
|
|
1676
|
-
function imageSrc(value) {
|
|
1677
|
-
return (imageBase64(value) || imageURL(value));
|
|
1678
|
-
}
|
|
1679
|
-
function svg(value) {
|
|
1680
|
-
return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
|
|
1681
|
-
}
|
|
1682
|
-
function html(value) {
|
|
1683
|
-
var result = false;
|
|
1684
|
-
if (typeof value === 'string') {
|
|
1685
|
-
var div = document.createElement('div');
|
|
1686
|
-
div.innerHTML = value;
|
|
1687
|
-
if (div.children.length > 0) {
|
|
1688
|
-
result = true;
|
|
1689
|
-
}
|
|
1690
|
-
div = null;
|
|
1691
|
-
}
|
|
1692
|
-
return result;
|
|
1693
|
-
}
|
|
1694
|
-
function text(value) {
|
|
1695
|
-
return typeof value === 'string';
|
|
1696
|
-
}
|
|
1697
|
-
function fontSize(value) {
|
|
1698
|
-
return number(value) && value > 0;
|
|
1699
|
-
}
|
|
1700
|
-
function lineHeight(value) {
|
|
1701
|
-
return number(value) && value > 0;
|
|
1702
|
-
}
|
|
1703
|
-
function strokeWidth(value) {
|
|
1704
|
-
return number(value) && value > 0;
|
|
1705
|
-
}
|
|
1706
|
-
function textAlign(value) {
|
|
1707
|
-
return ['center', 'left', 'right'].includes(value);
|
|
1708
|
-
}
|
|
1709
|
-
function fontFamily(value) {
|
|
1710
|
-
return typeof value === 'string' && value.length > 0;
|
|
1711
|
-
}
|
|
1712
|
-
function fontWeight(value) {
|
|
1713
|
-
return ['bold'].includes(value);
|
|
1714
|
-
}
|
|
1715
|
-
var is = {
|
|
1716
|
-
x: x,
|
|
1717
|
-
y: y,
|
|
1718
|
-
w: w,
|
|
1719
|
-
h: h,
|
|
1720
|
-
angle: angle,
|
|
1721
|
-
number: number,
|
|
1722
|
-
borderWidth: borderWidth,
|
|
1723
|
-
borderRadius: borderRadius,
|
|
1724
|
-
color: color$1,
|
|
1725
|
-
imageSrc: imageSrc,
|
|
1726
|
-
imageURL: imageURL,
|
|
1727
|
-
imageBase64: imageBase64,
|
|
1728
|
-
svg: svg,
|
|
1729
|
-
html: html,
|
|
1730
|
-
text: text,
|
|
1731
|
-
fontSize: fontSize,
|
|
1732
|
-
lineHeight: lineHeight,
|
|
1733
|
-
textAlign: textAlign,
|
|
1734
|
-
fontFamily: fontFamily,
|
|
1735
|
-
fontWeight: fontWeight,
|
|
1736
|
-
strokeWidth: strokeWidth,
|
|
1737
|
-
};
|
|
1738
|
-
|
|
1739
|
-
function attrs(attrs) {
|
|
1740
|
-
var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
|
|
1741
|
-
if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
|
|
1742
|
-
return false;
|
|
1743
|
-
}
|
|
1744
|
-
if (!(angle >= -360 && angle <= 360)) {
|
|
1745
|
-
return false;
|
|
1746
|
-
}
|
|
1747
|
-
return true;
|
|
1748
|
-
}
|
|
1749
|
-
function box(desc) {
|
|
1750
|
-
if (desc === void 0) { desc = {}; }
|
|
1751
|
-
var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
|
|
1752
|
-
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
|
1753
|
-
return false;
|
|
1754
|
-
}
|
|
1755
|
-
if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
|
|
1756
|
-
return false;
|
|
1757
|
-
}
|
|
1758
|
-
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
|
1759
|
-
return false;
|
|
1760
|
-
}
|
|
1761
|
-
return true;
|
|
1762
|
-
}
|
|
1763
|
-
function rectDesc(desc) {
|
|
1764
|
-
var bgColor = desc.bgColor;
|
|
1765
|
-
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
1766
|
-
return false;
|
|
1767
|
-
}
|
|
1768
|
-
if (!box(desc)) {
|
|
1769
|
-
return false;
|
|
1770
|
-
}
|
|
1771
|
-
return true;
|
|
1772
|
-
}
|
|
1773
|
-
function circleDesc(desc) {
|
|
1774
|
-
var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
|
|
1775
|
-
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
1776
|
-
return false;
|
|
1777
|
-
}
|
|
1778
|
-
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
|
1779
|
-
return false;
|
|
1780
|
-
}
|
|
1781
|
-
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
|
1782
|
-
return false;
|
|
1783
|
-
}
|
|
1784
|
-
return true;
|
|
1785
|
-
}
|
|
1786
|
-
function imageDesc(desc) {
|
|
1787
|
-
var src = desc.src;
|
|
1788
|
-
if (!is.imageSrc(src)) {
|
|
1789
|
-
return false;
|
|
1790
|
-
}
|
|
1791
|
-
return true;
|
|
1792
|
-
}
|
|
1793
|
-
function svgDesc(desc) {
|
|
1794
|
-
var svg = desc.svg;
|
|
1795
|
-
if (!is.svg(svg)) {
|
|
1796
|
-
return false;
|
|
1797
|
-
}
|
|
1798
|
-
return true;
|
|
1799
|
-
}
|
|
1800
|
-
function htmlDesc(desc) {
|
|
1801
|
-
var html = desc.html;
|
|
1802
|
-
if (!is.html(html)) {
|
|
1803
|
-
return false;
|
|
1804
|
-
}
|
|
1805
|
-
return true;
|
|
1806
|
-
}
|
|
1807
|
-
function textDesc(desc) {
|
|
1808
|
-
var text = desc.text, color = desc.color, fontSize = desc.fontSize, lineHeight = desc.lineHeight, fontFamily = desc.fontFamily, textAlign = desc.textAlign, fontWeight = desc.fontWeight, bgColor = desc.bgColor, strokeWidth = desc.strokeWidth, strokeColor = desc.strokeColor;
|
|
1809
|
-
if (!is.text(text)) {
|
|
1810
|
-
return false;
|
|
1811
|
-
}
|
|
1812
|
-
if (!is.color(color)) {
|
|
1813
|
-
return false;
|
|
1814
|
-
}
|
|
1815
|
-
if (!is.fontSize(fontSize)) {
|
|
1816
|
-
return false;
|
|
1817
|
-
}
|
|
1818
|
-
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
1819
|
-
return false;
|
|
1820
|
-
}
|
|
1821
|
-
if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
|
|
1822
|
-
return false;
|
|
1823
|
-
}
|
|
1824
|
-
if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
|
|
1825
|
-
return false;
|
|
1826
|
-
}
|
|
1827
|
-
if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
|
|
1828
|
-
return false;
|
|
1829
|
-
}
|
|
1830
|
-
if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
|
|
1831
|
-
return false;
|
|
1832
|
-
}
|
|
1833
|
-
if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
|
|
1834
|
-
return false;
|
|
1835
|
-
}
|
|
1836
|
-
if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
|
|
1837
|
-
return false;
|
|
1838
|
-
}
|
|
1839
|
-
if (!box(desc)) {
|
|
1840
|
-
return false;
|
|
1841
|
-
}
|
|
1842
|
-
return true;
|
|
1843
|
-
}
|
|
1844
|
-
var check = {
|
|
1845
|
-
attrs: attrs,
|
|
1846
|
-
textDesc: textDesc,
|
|
1847
|
-
rectDesc: rectDesc,
|
|
1848
|
-
circleDesc: circleDesc,
|
|
1849
|
-
imageDesc: imageDesc,
|
|
1850
|
-
svgDesc: svgDesc,
|
|
1851
|
-
htmlDesc: htmlDesc,
|
|
1852
|
-
};
|
|
1853
|
-
|
|
1854
|
-
function parseRadianToAngle(radian) {
|
|
1855
|
-
return radian / Math.PI * 180;
|
|
1856
|
-
}
|
|
1857
|
-
function parseAngleToRadian(angle) {
|
|
1858
|
-
return angle / 180 * Math.PI;
|
|
1859
|
-
}
|
|
1860
|
-
function calcElementCenter(elem) {
|
|
1861
|
-
var p = {
|
|
1862
|
-
x: elem.x + elem.w / 2,
|
|
1863
|
-
y: elem.y + elem.h / 2,
|
|
1864
|
-
};
|
|
1865
|
-
return p;
|
|
1866
|
-
}
|
|
1867
|
-
function calcRadian(center, start, end) {
|
|
1868
|
-
var startAngle = calcLineAngle(center, start);
|
|
1869
|
-
var endAngle = calcLineAngle(center, end);
|
|
1870
|
-
if (endAngle !== null && startAngle !== null) {
|
|
1871
|
-
if (startAngle > Math.PI * 3 / 2 && endAngle < Math.PI / 2) {
|
|
1872
|
-
return endAngle + (Math.PI * 2 - startAngle);
|
|
1873
|
-
}
|
|
1874
|
-
else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
|
|
1875
|
-
return startAngle + (Math.PI * 2 - endAngle);
|
|
1876
|
-
}
|
|
1877
|
-
else {
|
|
1878
|
-
return endAngle - startAngle;
|
|
1879
|
-
}
|
|
1880
|
-
}
|
|
1881
|
-
else {
|
|
1882
|
-
return 0;
|
|
1883
|
-
}
|
|
1884
|
-
}
|
|
1885
|
-
function calcLineAngle(center, p) {
|
|
1886
|
-
var x = p.x - center.x;
|
|
1887
|
-
var y = center.y - p.y;
|
|
1888
|
-
if (x === 0) {
|
|
1889
|
-
if (y < 0) {
|
|
1890
|
-
return Math.PI / 2;
|
|
1891
|
-
}
|
|
1892
|
-
else if (y > 0) {
|
|
1893
|
-
return Math.PI * (3 / 2);
|
|
1894
|
-
}
|
|
1895
|
-
}
|
|
1896
|
-
else if (y === 0) {
|
|
1897
|
-
if (x < 0) {
|
|
1898
|
-
return Math.PI;
|
|
1899
|
-
}
|
|
1900
|
-
else if (x > 0) {
|
|
1901
|
-
return 0;
|
|
1902
|
-
}
|
|
1903
|
-
}
|
|
1904
|
-
if (x > 0 && y < 0) {
|
|
1905
|
-
return Math.atan(Math.abs(y) / Math.abs(x));
|
|
1906
|
-
}
|
|
1907
|
-
else if (x < 0 && y < 0) {
|
|
1908
|
-
return Math.PI - Math.atan(Math.abs(y) / Math.abs(x));
|
|
1909
|
-
}
|
|
1910
|
-
else if (x < 0 && y > 0) {
|
|
1911
|
-
return Math.PI + Math.atan(Math.abs(y) / Math.abs(x));
|
|
1912
|
-
}
|
|
1913
|
-
else if (x > 0 && y > 0) {
|
|
1914
|
-
return Math.PI * 2 - Math.atan(Math.abs(y) / Math.abs(x));
|
|
1915
|
-
}
|
|
1916
|
-
return null;
|
|
1917
|
-
}
|
|
1918
|
-
|
|
1919
|
-
function rotateElement(ctx, elem, callback) {
|
|
1920
|
-
var center = calcElementCenter(elem);
|
|
1921
|
-
var radian = parseAngleToRadian(elem.angle || 0);
|
|
1922
|
-
return rotateContext(ctx, center, radian || 0, callback);
|
|
1923
|
-
}
|
|
1924
|
-
function rotateContext(ctx, center, radian, callback) {
|
|
1925
|
-
if (center && (radian > 0 || radian < 0)) {
|
|
1926
|
-
ctx.translate(center.x, center.y);
|
|
1927
|
-
ctx.rotate(radian);
|
|
1928
|
-
ctx.translate(-center.x, -center.y);
|
|
1929
|
-
}
|
|
1930
|
-
callback(ctx);
|
|
1931
|
-
if (center && (radian > 0 || radian < 0)) {
|
|
1932
|
-
ctx.translate(center.x, center.y);
|
|
1933
|
-
ctx.rotate(-radian);
|
|
1934
|
-
ctx.translate(-center.x, -center.y);
|
|
1935
|
-
}
|
|
1936
|
-
}
|
|
1937
|
-
|
|
1938
|
-
var istype = index.istype, color = index.color;
|
|
1939
|
-
function clearContext(ctx) {
|
|
1940
|
-
ctx.setFillStyle('#000000');
|
|
1941
|
-
ctx.setStrokeStyle('#000000');
|
|
1942
|
-
ctx.setLineDash([]);
|
|
1943
|
-
ctx.setGlobalAlpha(1);
|
|
1944
|
-
ctx.setShadowColor('#00000000');
|
|
1945
|
-
ctx.setShadowOffsetX(0);
|
|
1946
|
-
ctx.setShadowOffsetY(0);
|
|
1947
|
-
ctx.setShadowBlur(0);
|
|
1948
|
-
}
|
|
1949
|
-
function drawBgColor(ctx, color) {
|
|
1950
|
-
var size = ctx.getSize();
|
|
1951
|
-
ctx.setFillStyle(color);
|
|
1952
|
-
ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
|
|
1953
|
-
}
|
|
1954
|
-
function drawBox(ctx, elem, pattern) {
|
|
1955
|
-
clearContext(ctx);
|
|
1956
|
-
drawBoxBorder(ctx, elem);
|
|
1957
|
-
clearContext(ctx);
|
|
1958
|
-
rotateElement(ctx, elem, function () {
|
|
1959
|
-
var x = elem.x, y = elem.y, w = elem.w, h = elem.h;
|
|
1960
|
-
var r = elem.desc.borderRadius || 0;
|
|
1961
|
-
r = Math.min(r, w / 2, h / 2);
|
|
1962
|
-
if (w < r * 2 || h < r * 2) {
|
|
1963
|
-
r = 0;
|
|
1964
|
-
}
|
|
1965
|
-
ctx.beginPath();
|
|
1966
|
-
ctx.moveTo(x + r, y);
|
|
1967
|
-
ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
1968
|
-
ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
1969
|
-
ctx.arcTo(x, y + h, x, y, r);
|
|
1970
|
-
ctx.arcTo(x, y, x + w, y, r);
|
|
1971
|
-
ctx.closePath();
|
|
1972
|
-
if (typeof pattern === 'string') {
|
|
1973
|
-
ctx.setFillStyle(pattern);
|
|
1974
|
-
}
|
|
1975
|
-
else if (['CanvasPattern'].includes(istype.type(pattern))) {
|
|
1976
|
-
ctx.setFillStyle(pattern);
|
|
1977
|
-
}
|
|
1978
|
-
ctx.fill();
|
|
1979
|
-
});
|
|
1980
|
-
}
|
|
1981
|
-
function drawBoxBorder(ctx, elem) {
|
|
1982
|
-
clearContext(ctx);
|
|
1983
|
-
rotateElement(ctx, elem, function () {
|
|
1984
|
-
if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
|
|
1985
|
-
return;
|
|
1986
|
-
}
|
|
1987
|
-
var bw = elem.desc.borderWidth;
|
|
1988
|
-
var borderColor = '#000000';
|
|
1989
|
-
if (color.isColorStr(elem.desc.borderColor) === true) {
|
|
1990
|
-
borderColor = elem.desc.borderColor;
|
|
1991
|
-
}
|
|
1992
|
-
var x = elem.x - bw / 2;
|
|
1993
|
-
var y = elem.y - bw / 2;
|
|
1994
|
-
var w = elem.w + bw;
|
|
1995
|
-
var h = elem.h + bw;
|
|
1996
|
-
var r = elem.desc.borderRadius || 0;
|
|
1997
|
-
r = Math.min(r, w / 2, h / 2);
|
|
1998
|
-
if (r < w / 2 && r < h / 2) {
|
|
1999
|
-
r = r + bw / 2;
|
|
2000
|
-
}
|
|
2001
|
-
var desc = elem.desc;
|
|
2002
|
-
if (desc.shadowColor !== undefined && index.color.isColorStr(desc.shadowColor)) {
|
|
2003
|
-
ctx.setShadowColor(desc.shadowColor);
|
|
2004
|
-
}
|
|
2005
|
-
if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
|
|
2006
|
-
ctx.setShadowOffsetX(desc.shadowOffsetX);
|
|
2007
|
-
}
|
|
2008
|
-
if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
|
|
2009
|
-
ctx.setShadowOffsetY(desc.shadowOffsetY);
|
|
2010
|
-
}
|
|
2011
|
-
if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
|
|
2012
|
-
ctx.setShadowBlur(desc.shadowBlur);
|
|
2013
|
-
}
|
|
2014
|
-
ctx.beginPath();
|
|
2015
|
-
ctx.setLineWidth(bw);
|
|
2016
|
-
ctx.setStrokeStyle(borderColor);
|
|
2017
|
-
ctx.moveTo(x + r, y);
|
|
2018
|
-
ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
2019
|
-
ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
2020
|
-
ctx.arcTo(x, y + h, x, y, r);
|
|
2021
|
-
ctx.arcTo(x, y, x + w, y, r);
|
|
2022
|
-
ctx.closePath();
|
|
2023
|
-
ctx.stroke();
|
|
2024
|
-
});
|
|
2025
|
-
}
|
|
2026
|
-
|
|
2027
|
-
function drawRect(ctx, elem) {
|
|
2028
|
-
drawBox(ctx, elem, elem.desc.bgColor);
|
|
2029
|
-
}
|
|
2030
|
-
|
|
2031
|
-
function drawImage(ctx, elem, loader) {
|
|
2032
|
-
var content = loader.getContent(elem.uuid);
|
|
2033
|
-
rotateElement(ctx, elem, function () {
|
|
2034
|
-
if (content) {
|
|
2035
|
-
ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
|
|
2036
|
-
}
|
|
2037
|
-
});
|
|
2038
|
-
}
|
|
2039
|
-
|
|
2040
|
-
function drawSVG(ctx, elem, loader) {
|
|
2041
|
-
var content = loader.getContent(elem.uuid);
|
|
2042
|
-
rotateElement(ctx, elem, function () {
|
|
2043
|
-
if (content) {
|
|
2044
|
-
ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
|
|
2045
|
-
}
|
|
2046
|
-
});
|
|
2047
|
-
}
|
|
2048
|
-
|
|
2049
|
-
function drawHTML(ctx, elem, loader) {
|
|
2050
|
-
var content = loader.getContent(elem.uuid);
|
|
2051
|
-
rotateElement(ctx, elem, function () {
|
|
2052
|
-
if (content) {
|
|
2053
|
-
ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
|
|
2054
|
-
}
|
|
2055
|
-
});
|
|
2056
|
-
}
|
|
2057
|
-
|
|
2058
|
-
function drawText(ctx, elem, loader, helperConfig) {
|
|
2059
|
-
clearContext(ctx);
|
|
2060
|
-
drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
|
|
2061
|
-
rotateElement(ctx, elem, function () {
|
|
2062
|
-
var desc = __assign$1({
|
|
2063
|
-
fontSize: 12,
|
|
2064
|
-
fontFamily: 'sans-serif',
|
|
2065
|
-
textAlign: 'center',
|
|
2066
|
-
}, elem.desc);
|
|
2067
|
-
ctx.setFillStyle(elem.desc.color);
|
|
2068
|
-
ctx.setTextBaseline('top');
|
|
2069
|
-
ctx.setFont({
|
|
2070
|
-
fontWeight: desc.fontWeight,
|
|
2071
|
-
fontSize: desc.fontSize,
|
|
2072
|
-
fontFamily: desc.fontFamily
|
|
2073
|
-
});
|
|
2074
|
-
var descText = desc.text.replace(/\r\n/ig, '\n');
|
|
2075
|
-
var fontHeight = desc.lineHeight || desc.fontSize;
|
|
2076
|
-
var descTextList = descText.split('\n');
|
|
2077
|
-
var lines = [];
|
|
2078
|
-
descTextList.forEach(function (tempText) {
|
|
2079
|
-
var lineText = '';
|
|
2080
|
-
var lineNum = 0;
|
|
2081
|
-
for (var i = 0; i < tempText.length; i++) {
|
|
2082
|
-
if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
|
|
2083
|
-
lineText += (tempText[i] || '');
|
|
2084
|
-
}
|
|
2085
|
-
else {
|
|
2086
|
-
lines.push({
|
|
2087
|
-
text: lineText,
|
|
2088
|
-
width: ctx.calcScreenNum(ctx.measureText(lineText).width),
|
|
2089
|
-
});
|
|
2090
|
-
lineText = (tempText[i] || '');
|
|
2091
|
-
lineNum++;
|
|
2092
|
-
}
|
|
2093
|
-
if ((lineNum + 1) * fontHeight > elem.h) {
|
|
2094
|
-
break;
|
|
2095
|
-
}
|
|
2096
|
-
if (lineText && tempText.length - 1 === i) {
|
|
2097
|
-
if ((lineNum + 1) * fontHeight < elem.h) {
|
|
2098
|
-
lines.push({
|
|
2099
|
-
text: lineText,
|
|
2100
|
-
width: ctx.calcScreenNum(ctx.measureText(lineText).width),
|
|
2101
|
-
});
|
|
2102
|
-
break;
|
|
2103
|
-
}
|
|
2104
|
-
}
|
|
2105
|
-
}
|
|
2106
|
-
});
|
|
2107
|
-
{
|
|
2108
|
-
var _y_1 = elem.y;
|
|
2109
|
-
if (lines.length * fontHeight < elem.h) {
|
|
2110
|
-
_y_1 += ((elem.h - lines.length * fontHeight) / 2);
|
|
2111
|
-
}
|
|
2112
|
-
if (desc.textShadowColor !== undefined && index.color.isColorStr(desc.textShadowColor)) {
|
|
2113
|
-
ctx.setShadowColor(desc.textShadowColor);
|
|
2114
|
-
}
|
|
2115
|
-
if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
|
|
2116
|
-
ctx.setShadowOffsetX(desc.textShadowOffsetX);
|
|
2117
|
-
}
|
|
2118
|
-
if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
|
|
2119
|
-
ctx.setShadowOffsetY(desc.textShadowOffsetY);
|
|
2120
|
-
}
|
|
2121
|
-
if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
|
|
2122
|
-
ctx.setShadowBlur(desc.textShadowBlur);
|
|
2123
|
-
}
|
|
2124
|
-
lines.forEach(function (line, i) {
|
|
2125
|
-
var _x = elem.x;
|
|
2126
|
-
if (desc.textAlign === 'center') {
|
|
2127
|
-
_x = elem.x + (elem.w - line.width) / 2;
|
|
2128
|
-
}
|
|
2129
|
-
else if (desc.textAlign === 'right') {
|
|
2130
|
-
_x = elem.x + (elem.w - line.width);
|
|
2131
|
-
}
|
|
2132
|
-
ctx.fillText(line.text, _x, _y_1 + fontHeight * i);
|
|
2133
|
-
});
|
|
2134
|
-
clearContext(ctx);
|
|
2135
|
-
}
|
|
2136
|
-
if (index.color.isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
|
|
2137
|
-
var _y_2 = elem.y;
|
|
2138
|
-
if (lines.length * fontHeight < elem.h) {
|
|
2139
|
-
_y_2 += ((elem.h - lines.length * fontHeight) / 2);
|
|
2140
|
-
}
|
|
2141
|
-
lines.forEach(function (line, i) {
|
|
2142
|
-
var _x = elem.x;
|
|
2143
|
-
if (desc.textAlign === 'center') {
|
|
2144
|
-
_x = elem.x + (elem.w - line.width) / 2;
|
|
2145
|
-
}
|
|
2146
|
-
else if (desc.textAlign === 'right') {
|
|
2147
|
-
_x = elem.x + (elem.w - line.width);
|
|
2148
|
-
}
|
|
2149
|
-
if (desc.strokeColor !== undefined) {
|
|
2150
|
-
ctx.setStrokeStyle(desc.strokeColor);
|
|
2151
|
-
}
|
|
2152
|
-
if (desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
|
|
2153
|
-
ctx.setLineWidth(desc.strokeWidth);
|
|
2154
|
-
}
|
|
2155
|
-
ctx.strokeText(line.text, _x, _y_2 + fontHeight * i);
|
|
2156
|
-
});
|
|
2157
|
-
}
|
|
2158
|
-
});
|
|
2159
|
-
}
|
|
2160
|
-
|
|
2161
|
-
function drawCircle(ctx, elem) {
|
|
2162
|
-
clearContext(ctx);
|
|
2163
|
-
rotateElement(ctx, elem, function (ctx) {
|
|
2164
|
-
var x = elem.x, y = elem.y, w = elem.w, h = elem.h, desc = elem.desc;
|
|
2165
|
-
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;
|
|
2166
|
-
var a = w / 2;
|
|
2167
|
-
var b = h / 2;
|
|
2168
|
-
var centerX = x + a;
|
|
2169
|
-
var centerY = y + b;
|
|
2170
|
-
if (borderWidth && borderWidth > 0) {
|
|
2171
|
-
var ba = borderWidth / 2 + a;
|
|
2172
|
-
var bb = borderWidth / 2 + b;
|
|
2173
|
-
ctx.beginPath();
|
|
2174
|
-
ctx.setStrokeStyle(borderColor);
|
|
2175
|
-
ctx.setLineWidth(borderWidth);
|
|
2176
|
-
ctx.ellipse(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
|
|
2177
|
-
ctx.closePath();
|
|
2178
|
-
ctx.stroke();
|
|
2179
|
-
}
|
|
2180
|
-
ctx.beginPath();
|
|
2181
|
-
ctx.setFillStyle(bgColor);
|
|
2182
|
-
ctx.ellipse(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
|
|
2183
|
-
ctx.closePath();
|
|
2184
|
-
ctx.fill();
|
|
2185
|
-
});
|
|
2186
|
-
}
|
|
2187
|
-
|
|
2188
|
-
function drawElementWrapper(ctx, config) {
|
|
2189
|
-
if (!(config === null || config === void 0 ? void 0 : config.selectedElementWrapper)) {
|
|
2190
|
-
return;
|
|
2191
|
-
}
|
|
2192
|
-
var wrapper = config.selectedElementWrapper;
|
|
2193
|
-
clearContext(ctx);
|
|
2194
|
-
rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
|
|
2195
|
-
ctx.beginPath();
|
|
2196
|
-
ctx.setLineDash(wrapper.lineDash);
|
|
2197
|
-
ctx.setLineWidth(wrapper.lineWidth);
|
|
2198
|
-
ctx.setStrokeStyle(wrapper.color);
|
|
2199
|
-
ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
|
|
2200
|
-
ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
|
|
2201
|
-
ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
|
|
2202
|
-
ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
|
|
2203
|
-
ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
|
|
2204
|
-
ctx.stroke();
|
|
2205
|
-
ctx.closePath();
|
|
2206
|
-
if (wrapper.lock !== true) {
|
|
2207
|
-
if (wrapper.controllers.rotate.invisible !== true) {
|
|
2208
|
-
ctx.beginPath();
|
|
2209
|
-
ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
|
|
2210
|
-
ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
|
|
2211
|
-
ctx.stroke();
|
|
2212
|
-
ctx.closePath();
|
|
2213
|
-
ctx.beginPath();
|
|
2214
|
-
ctx.setLineDash([]);
|
|
2215
|
-
ctx.setLineWidth(wrapper.controllerSize / 2);
|
|
2216
|
-
ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
|
|
2217
|
-
ctx.stroke();
|
|
2218
|
-
ctx.closePath();
|
|
2219
|
-
}
|
|
2220
|
-
ctx.setFillStyle(wrapper.color);
|
|
2221
|
-
[
|
|
2222
|
-
wrapper.controllers.topLeft,
|
|
2223
|
-
wrapper.controllers.top,
|
|
2224
|
-
wrapper.controllers.topRight,
|
|
2225
|
-
wrapper.controllers.right,
|
|
2226
|
-
wrapper.controllers.bottomRight,
|
|
2227
|
-
wrapper.controllers.bottom,
|
|
2228
|
-
wrapper.controllers.bottomLeft,
|
|
2229
|
-
wrapper.controllers.left,
|
|
2230
|
-
].forEach(function (controller) {
|
|
2231
|
-
if (controller.invisible !== true) {
|
|
2232
|
-
ctx.beginPath();
|
|
2233
|
-
ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
|
|
2234
|
-
ctx.fill();
|
|
2235
|
-
ctx.closePath();
|
|
2236
|
-
}
|
|
2237
|
-
});
|
|
2238
|
-
}
|
|
2239
|
-
else {
|
|
2240
|
-
clearContext(ctx);
|
|
2241
|
-
ctx.setStrokeStyle(wrapper.color);
|
|
2242
|
-
[
|
|
2243
|
-
wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
|
|
2244
|
-
wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
|
|
2245
|
-
].forEach(function (controller) {
|
|
2246
|
-
ctx.beginPath();
|
|
2247
|
-
ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
|
|
2248
|
-
ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
|
|
2249
|
-
ctx.stroke();
|
|
2250
|
-
ctx.closePath();
|
|
2251
|
-
ctx.beginPath();
|
|
2252
|
-
ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
|
|
2253
|
-
ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
|
|
2254
|
-
ctx.stroke();
|
|
2255
|
-
ctx.closePath();
|
|
2256
|
-
});
|
|
2257
|
-
}
|
|
2258
|
-
});
|
|
2259
|
-
}
|
|
2260
|
-
function drawAreaWrapper(ctx, config) {
|
|
2261
|
-
if (!(config === null || config === void 0 ? void 0 : config.selectedAreaWrapper)) {
|
|
2262
|
-
return;
|
|
2263
|
-
}
|
|
2264
|
-
var wrapper = config.selectedAreaWrapper;
|
|
2265
|
-
if (wrapper && wrapper.w > 0 && wrapper.h > 0) {
|
|
2266
|
-
clearContext(ctx);
|
|
2267
|
-
ctx.setGlobalAlpha(0.3);
|
|
2268
|
-
ctx.setFillStyle(wrapper.color);
|
|
2269
|
-
ctx.fillRect(wrapper.x, wrapper.y, wrapper.w, wrapper.h);
|
|
2270
|
-
clearContext(ctx);
|
|
2271
|
-
ctx.beginPath();
|
|
2272
|
-
ctx.setLineDash(wrapper.lineDash);
|
|
2273
|
-
ctx.setLineWidth(wrapper.lineWidth);
|
|
2274
|
-
ctx.setStrokeStyle(wrapper.color);
|
|
2275
|
-
ctx.moveTo(wrapper.x, wrapper.y);
|
|
2276
|
-
ctx.lineTo(wrapper.x + wrapper.w, wrapper.y);
|
|
2277
|
-
ctx.lineTo(wrapper.x + wrapper.w, wrapper.y + wrapper.h);
|
|
2278
|
-
ctx.lineTo(wrapper.x, wrapper.y + wrapper.h);
|
|
2279
|
-
ctx.lineTo(wrapper.x, wrapper.y);
|
|
2280
|
-
ctx.stroke();
|
|
2281
|
-
ctx.closePath();
|
|
2282
|
-
}
|
|
2283
|
-
}
|
|
2284
|
-
function drawElementListWrappers(ctx, config) {
|
|
2285
|
-
if (!Array.isArray(config === null || config === void 0 ? void 0 : config.selectedElementListWrappers)) {
|
|
2286
|
-
return;
|
|
2287
|
-
}
|
|
2288
|
-
var wrapperList = config.selectedElementListWrappers;
|
|
2289
|
-
wrapperList === null || wrapperList === void 0 ? void 0 : wrapperList.forEach(function (wrapper) {
|
|
2290
|
-
clearContext(ctx);
|
|
2291
|
-
rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
|
|
2292
|
-
clearContext(ctx);
|
|
2293
|
-
ctx.setGlobalAlpha(0.05);
|
|
2294
|
-
ctx.setFillStyle(wrapper.color);
|
|
2295
|
-
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);
|
|
2296
|
-
clearContext(ctx);
|
|
2297
|
-
ctx.beginPath();
|
|
2298
|
-
ctx.setLineDash(wrapper.lineDash);
|
|
2299
|
-
ctx.setLineWidth(wrapper.lineWidth);
|
|
2300
|
-
ctx.setStrokeStyle(wrapper.color);
|
|
2301
|
-
ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
|
|
2302
|
-
ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
|
|
2303
|
-
ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
|
|
2304
|
-
ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
|
|
2305
|
-
ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
|
|
2306
|
-
ctx.stroke();
|
|
2307
|
-
ctx.closePath();
|
|
2308
|
-
if (wrapper.lock === true) {
|
|
2309
|
-
clearContext(ctx);
|
|
2310
|
-
ctx.setStrokeStyle(wrapper.color);
|
|
2311
|
-
[
|
|
2312
|
-
wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
|
|
2313
|
-
wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
|
|
2314
|
-
].forEach(function (controller) {
|
|
2315
|
-
ctx.beginPath();
|
|
2316
|
-
ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
|
|
2317
|
-
ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
|
|
2318
|
-
ctx.stroke();
|
|
2319
|
-
ctx.closePath();
|
|
2320
|
-
ctx.beginPath();
|
|
2321
|
-
ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
|
|
2322
|
-
ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
|
|
2323
|
-
ctx.stroke();
|
|
2324
|
-
ctx.closePath();
|
|
2325
|
-
});
|
|
2326
|
-
}
|
|
2327
|
-
});
|
|
2328
|
-
});
|
|
2329
|
-
}
|
|
2330
|
-
|
|
2331
|
-
var isColorStr = index.color.isColorStr;
|
|
2332
|
-
function drawContext(ctx, data, helperConfig, loader) {
|
|
2333
|
-
var _a;
|
|
2334
|
-
clearContext(ctx);
|
|
2335
|
-
var size = ctx.getSize();
|
|
2336
|
-
ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
|
|
2337
|
-
if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) {
|
|
2338
|
-
drawBgColor(ctx, data.bgColor);
|
|
2339
|
-
}
|
|
2340
|
-
if (!(data.elements.length > 0)) {
|
|
2341
|
-
return;
|
|
2342
|
-
}
|
|
2343
|
-
for (var i = 0; i < data.elements.length; i++) {
|
|
2344
|
-
var elem = data.elements[i];
|
|
2345
|
-
if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
|
|
2346
|
-
continue;
|
|
2347
|
-
}
|
|
2348
|
-
switch (elem.type) {
|
|
2349
|
-
case 'rect': {
|
|
2350
|
-
drawRect(ctx, elem);
|
|
2351
|
-
break;
|
|
2352
|
-
}
|
|
2353
|
-
case 'text': {
|
|
2354
|
-
drawText(ctx, elem);
|
|
2355
|
-
break;
|
|
2356
|
-
}
|
|
2357
|
-
case 'image': {
|
|
2358
|
-
drawImage(ctx, elem, loader);
|
|
2359
|
-
break;
|
|
2360
|
-
}
|
|
2361
|
-
case 'svg': {
|
|
2362
|
-
drawSVG(ctx, elem, loader);
|
|
2363
|
-
break;
|
|
2364
|
-
}
|
|
2365
|
-
case 'html': {
|
|
2366
|
-
drawHTML(ctx, elem, loader);
|
|
2367
|
-
break;
|
|
2368
|
-
}
|
|
2369
|
-
case 'circle': {
|
|
2370
|
-
drawCircle(ctx, elem);
|
|
2371
|
-
break;
|
|
2372
|
-
}
|
|
2373
|
-
}
|
|
2374
|
-
}
|
|
2375
|
-
drawElementWrapper(ctx, helperConfig);
|
|
2376
|
-
drawAreaWrapper(ctx, helperConfig);
|
|
2377
|
-
drawElementListWrappers(ctx, helperConfig);
|
|
2378
|
-
}
|
|
2379
|
-
|
|
2380
|
-
var defaultConfig = {
|
|
2381
|
-
elementWrapper: {
|
|
2382
|
-
color: '#2ab6f1',
|
|
2383
|
-
lockColor: '#aaaaaa',
|
|
2384
|
-
controllerSize: 6,
|
|
2385
|
-
lineWidth: 1,
|
|
2386
|
-
lineDash: [4, 3],
|
|
2387
|
-
}
|
|
2388
|
-
};
|
|
2389
|
-
function mergeConfig(config) {
|
|
2390
|
-
var result = index.data.deepClone(defaultConfig);
|
|
2391
|
-
if (config) {
|
|
2392
|
-
if (config.elementWrapper) {
|
|
2393
|
-
result.elementWrapper = __assign$1(__assign$1({}, result.elementWrapper), config.elementWrapper);
|
|
2394
|
-
}
|
|
2395
|
-
}
|
|
2396
|
-
return result;
|
|
2397
|
-
}
|
|
2398
|
-
|
|
2399
|
-
var CoreEvent = (function () {
|
|
2400
|
-
function CoreEvent() {
|
|
2401
|
-
this._listeners = new Map();
|
|
2402
|
-
}
|
|
2403
|
-
CoreEvent.prototype.on = function (eventKey, callback) {
|
|
2404
|
-
if (this._listeners.has(eventKey)) {
|
|
2405
|
-
var callbacks = this._listeners.get(eventKey);
|
|
2406
|
-
callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
|
|
2407
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
2408
|
-
}
|
|
2409
|
-
else {
|
|
2410
|
-
this._listeners.set(eventKey, [callback]);
|
|
2411
|
-
}
|
|
2412
|
-
};
|
|
2413
|
-
CoreEvent.prototype.off = function (eventKey, callback) {
|
|
2414
|
-
if (this._listeners.has(eventKey)) {
|
|
2415
|
-
var callbacks = this._listeners.get(eventKey);
|
|
2416
|
-
if (Array.isArray(callbacks)) {
|
|
2417
|
-
for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
|
|
2418
|
-
if (callbacks[i] === callback) {
|
|
2419
|
-
callbacks.splice(i, 1);
|
|
2420
|
-
break;
|
|
2421
|
-
}
|
|
2422
|
-
}
|
|
2423
|
-
}
|
|
2424
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
2425
|
-
}
|
|
2426
|
-
};
|
|
2427
|
-
CoreEvent.prototype.trigger = function (eventKey, arg) {
|
|
2428
|
-
var callbacks = this._listeners.get(eventKey);
|
|
2429
|
-
if (Array.isArray(callbacks)) {
|
|
2430
|
-
callbacks.forEach(function (cb) {
|
|
2431
|
-
cb(arg);
|
|
2432
|
-
});
|
|
2433
|
-
return true;
|
|
2434
|
-
}
|
|
2435
|
-
else {
|
|
2436
|
-
return false;
|
|
2437
|
-
}
|
|
2438
|
-
};
|
|
2439
|
-
CoreEvent.prototype.has = function (name) {
|
|
2440
|
-
if (this._listeners.has(name)) {
|
|
2441
|
-
var list = this._listeners.get(name);
|
|
2442
|
-
if (Array.isArray(list) && list.length > 0) {
|
|
2443
|
-
return true;
|
|
2444
|
-
}
|
|
2445
|
-
}
|
|
2446
|
-
return false;
|
|
2447
|
-
};
|
|
2448
|
-
return CoreEvent;
|
|
2449
|
-
}());
|
|
2450
|
-
|
|
2451
|
-
function isChangeImageElementResource(before, after) {
|
|
2452
|
-
var _a, _b;
|
|
2453
|
-
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));
|
|
2454
|
-
}
|
|
2455
|
-
function isChangeSVGElementResource(before, after) {
|
|
2456
|
-
var _a, _b;
|
|
2457
|
-
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));
|
|
2458
|
-
}
|
|
2459
|
-
function isChangeHTMLElementResource(before, after) {
|
|
2460
|
-
var _a, _b, _c, _d, _e, _f;
|
|
2461
|
-
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)
|
|
2462
|
-
|| ((_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)
|
|
2463
|
-
|| ((_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));
|
|
2464
|
-
}
|
|
2465
|
-
function diffElementResourceChange(before, after) {
|
|
2466
|
-
var result = null;
|
|
2467
|
-
var isChange = false;
|
|
2468
|
-
switch (after.type) {
|
|
2469
|
-
case 'image': {
|
|
2470
|
-
isChange = isChangeImageElementResource(before, after);
|
|
2471
|
-
break;
|
|
2472
|
-
}
|
|
2473
|
-
case 'svg': {
|
|
2474
|
-
isChange = isChangeSVGElementResource(before, after);
|
|
2475
|
-
break;
|
|
2476
|
-
}
|
|
2477
|
-
case 'html': {
|
|
2478
|
-
isChange = isChangeHTMLElementResource(before, after);
|
|
2479
|
-
break;
|
|
2480
|
-
}
|
|
2481
|
-
}
|
|
2482
|
-
if (isChange === true) {
|
|
2483
|
-
result = after.uuid;
|
|
2484
|
-
}
|
|
2485
|
-
return result;
|
|
2486
|
-
}
|
|
2487
|
-
function diffElementResourceChangeList(before, after) {
|
|
2488
|
-
var _a;
|
|
2489
|
-
var uuids = [];
|
|
2490
|
-
var beforeMap = parseDataElementMap(before);
|
|
2491
|
-
var afterMap = parseDataElementMap(after);
|
|
2492
|
-
for (var uuid in afterMap) {
|
|
2493
|
-
if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
|
|
2494
|
-
continue;
|
|
2495
|
-
}
|
|
2496
|
-
if (beforeMap[uuid]) {
|
|
2497
|
-
var isChange = false;
|
|
2498
|
-
switch (beforeMap[uuid].type) {
|
|
2499
|
-
case 'image': {
|
|
2500
|
-
isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
|
|
2501
|
-
break;
|
|
2502
|
-
}
|
|
2503
|
-
case 'svg': {
|
|
2504
|
-
isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
|
|
2505
|
-
break;
|
|
2506
|
-
}
|
|
2507
|
-
case 'html': {
|
|
2508
|
-
isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
|
|
2509
|
-
break;
|
|
2510
|
-
}
|
|
2511
|
-
}
|
|
2512
|
-
if (isChange === true) {
|
|
2513
|
-
uuids.push(uuid);
|
|
2514
|
-
}
|
|
2515
|
-
}
|
|
2516
|
-
else {
|
|
2517
|
-
uuids.push(uuid);
|
|
2518
|
-
}
|
|
2519
|
-
}
|
|
2520
|
-
return uuids;
|
|
2521
|
-
}
|
|
2522
|
-
function parseDataElementMap(data) {
|
|
2523
|
-
var elemMap = {};
|
|
2524
|
-
data.elements.forEach(function (elem) {
|
|
2525
|
-
elemMap[elem.uuid] = elem;
|
|
2526
|
-
});
|
|
2527
|
-
return elemMap;
|
|
2528
|
-
}
|
|
2529
|
-
|
|
2530
|
-
function limitNum(num) {
|
|
2531
|
-
var numStr = num.toFixed(2);
|
|
2532
|
-
return parseFloat(numStr);
|
|
2533
|
-
}
|
|
2534
|
-
function limitAngle(angle) {
|
|
2535
|
-
return limitNum(angle % 360);
|
|
2536
|
-
}
|
|
2537
|
-
|
|
2538
|
-
var elementTypes = {
|
|
2539
|
-
'text': {},
|
|
2540
|
-
'rect': {},
|
|
2541
|
-
'image': {},
|
|
2542
|
-
'svg': {},
|
|
2543
|
-
'circle': {},
|
|
2544
|
-
'html': {},
|
|
2545
|
-
};
|
|
2546
|
-
var elementNames = Object.keys(elementTypes);
|
|
2547
|
-
var LIMIT_QBLIQUE_ANGLE = 15;
|
|
2548
|
-
|
|
2549
|
-
var createUUID$1 = index.uuid.createUUID;
|
|
2550
|
-
var limitQbliqueAngle$1 = LIMIT_QBLIQUE_ANGLE;
|
|
2551
|
-
var Element = (function () {
|
|
2552
|
-
function Element(ctx) {
|
|
2553
|
-
this._ctx = ctx;
|
|
2554
|
-
}
|
|
2555
|
-
Element.prototype.initData = function (data) {
|
|
2556
|
-
data.elements.forEach(function (elem) {
|
|
2557
|
-
if (!(elem.uuid && typeof elem.uuid === 'string')) {
|
|
2558
|
-
elem.uuid = createUUID$1();
|
|
2559
|
-
}
|
|
2560
|
-
});
|
|
2561
|
-
return data;
|
|
2562
|
-
};
|
|
2563
|
-
Element.prototype.isPointInElement = function (p, data) {
|
|
2564
|
-
var _a, _b;
|
|
2565
|
-
var ctx = this._ctx;
|
|
2566
|
-
var idx = -1;
|
|
2567
|
-
var uuid = null;
|
|
2568
|
-
var _loop_1 = function (i) {
|
|
2569
|
-
var ele = data.elements[i];
|
|
2570
|
-
if (((_a = ele.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true)
|
|
2571
|
-
return "continue";
|
|
2572
|
-
var bw = 0;
|
|
2573
|
-
if (((_b = ele.desc) === null || _b === void 0 ? void 0 : _b.borderWidth) > 0) {
|
|
2574
|
-
bw = ele.desc.borderWidth;
|
|
2575
|
-
}
|
|
2576
|
-
rotateElement(ctx, ele, function () {
|
|
2577
|
-
ctx.beginPath();
|
|
2578
|
-
ctx.moveTo(ele.x - bw, ele.y - bw);
|
|
2579
|
-
ctx.lineTo(ele.x + ele.w + bw, ele.y - bw);
|
|
2580
|
-
ctx.lineTo(ele.x + ele.w + bw, ele.y + ele.h + bw);
|
|
2581
|
-
ctx.lineTo(ele.x - bw, ele.y + ele.h + bw);
|
|
2582
|
-
ctx.lineTo(ele.x - bw, ele.y - bw);
|
|
2583
|
-
ctx.closePath();
|
|
2584
|
-
if (ctx.isPointInPath(p.x, p.y)) {
|
|
2585
|
-
idx = i;
|
|
2586
|
-
uuid = ele.uuid;
|
|
2587
|
-
}
|
|
2588
|
-
});
|
|
2589
|
-
if (idx >= 0) {
|
|
2590
|
-
return "break";
|
|
2591
|
-
}
|
|
2592
|
-
};
|
|
2593
|
-
for (var i = data.elements.length - 1; i >= 0; i--) {
|
|
2594
|
-
var state_1 = _loop_1(i);
|
|
2595
|
-
if (state_1 === "break")
|
|
2596
|
-
break;
|
|
2597
|
-
}
|
|
2598
|
-
return [idx, uuid];
|
|
2599
|
-
};
|
|
2600
|
-
Element.prototype.dragElement = function (data, uuid, point, prevPoint, scale) {
|
|
2601
|
-
var index = this.getElementIndex(data, uuid);
|
|
2602
|
-
if (!data.elements[index]) {
|
|
2603
|
-
return;
|
|
2604
|
-
}
|
|
2605
|
-
var moveX = point.x - prevPoint.x;
|
|
2606
|
-
var moveY = point.y - prevPoint.y;
|
|
2607
|
-
data.elements[index].x += (moveX / scale);
|
|
2608
|
-
data.elements[index].y += (moveY / scale);
|
|
2609
|
-
this.limitElementAttrs(data.elements[index]);
|
|
2610
|
-
};
|
|
2611
|
-
Element.prototype.transformElement = function (data, uuid, point, prevPoint, scale, direction) {
|
|
2612
|
-
var _a, _b;
|
|
2613
|
-
var index = this.getElementIndex(data, uuid);
|
|
2614
|
-
if (!data.elements[index]) {
|
|
2615
|
-
return null;
|
|
2616
|
-
}
|
|
2617
|
-
if (((_b = (_a = data.elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.lock) === true) {
|
|
2618
|
-
return null;
|
|
2619
|
-
}
|
|
2620
|
-
var moveX = (point.x - prevPoint.x) / scale;
|
|
2621
|
-
var moveY = (point.y - prevPoint.y) / scale;
|
|
2622
|
-
var elem = data.elements[index];
|
|
2623
|
-
if ([
|
|
2624
|
-
'top-left', 'top', 'top-right', 'right',
|
|
2625
|
-
'bottom-right', 'bottom', 'bottom-left', 'left'
|
|
2626
|
-
].includes(direction)) {
|
|
2627
|
-
var p = calcuScaleElemPosition(elem, moveX, moveY, direction);
|
|
2628
|
-
elem.x = p.x;
|
|
2629
|
-
elem.y = p.y;
|
|
2630
|
-
elem.w = p.w;
|
|
2631
|
-
elem.h = p.h;
|
|
2632
|
-
}
|
|
2633
|
-
else if (direction === 'rotate') {
|
|
2634
|
-
var center = calcElementCenter(elem);
|
|
2635
|
-
var radian = calcRadian(center, prevPoint, point);
|
|
2636
|
-
elem.angle = (elem.angle || 0) + parseRadianToAngle(radian);
|
|
2637
|
-
}
|
|
2638
|
-
this.limitElementAttrs(elem);
|
|
2639
|
-
return {
|
|
2640
|
-
width: limitNum(elem.w),
|
|
2641
|
-
height: limitNum(elem.h),
|
|
2642
|
-
angle: limitAngle(elem.angle || 0),
|
|
2643
|
-
};
|
|
2644
|
-
};
|
|
2645
|
-
Element.prototype.getElementIndex = function (data, uuid) {
|
|
2646
|
-
var idx = -1;
|
|
2647
|
-
for (var i = 0; i < data.elements.length; i++) {
|
|
2648
|
-
if (data.elements[i].uuid === uuid) {
|
|
2649
|
-
idx = i;
|
|
2650
|
-
break;
|
|
2651
|
-
}
|
|
2652
|
-
}
|
|
2653
|
-
return idx;
|
|
2654
|
-
};
|
|
2655
|
-
Element.prototype.limitElementAttrs = function (elem) {
|
|
2656
|
-
elem.x = limitNum(elem.x);
|
|
2657
|
-
elem.y = limitNum(elem.y);
|
|
2658
|
-
elem.w = limitNum(elem.w);
|
|
2659
|
-
elem.h = limitNum(elem.h);
|
|
2660
|
-
elem.angle = limitAngle(elem.angle || 0);
|
|
2661
|
-
};
|
|
2662
|
-
return Element;
|
|
2663
|
-
}());
|
|
2664
|
-
function calcuScaleElemPosition(elem, moveX, moveY, direction, scale) {
|
|
2665
|
-
var p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h };
|
|
2666
|
-
elem.angle;
|
|
2667
|
-
switch (direction) {
|
|
2668
|
-
case 'top-left': {
|
|
2669
|
-
if (elem.w - moveX > 0 && elem.h - moveY > 0) {
|
|
2670
|
-
p.x += moveX;
|
|
2671
|
-
p.y += moveY;
|
|
2672
|
-
p.w -= moveX;
|
|
2673
|
-
p.h -= moveY;
|
|
2674
|
-
}
|
|
2675
|
-
break;
|
|
2676
|
-
}
|
|
2677
|
-
case 'top': {
|
|
2678
|
-
if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
|
|
2679
|
-
if (p.h - moveY > 0) {
|
|
2680
|
-
p.y += moveY;
|
|
2681
|
-
p.h -= moveY;
|
|
2682
|
-
}
|
|
2683
|
-
}
|
|
2684
|
-
else if (elem.angle > 0 || elem.angle < 0) {
|
|
2685
|
-
var angle_1 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
|
2686
|
-
var moveDist = calcMoveDist(moveX, moveY);
|
|
2687
|
-
var centerX = p.x + elem.w / 2;
|
|
2688
|
-
var centerY = p.y + elem.h / 2;
|
|
2689
|
-
if (angle_1 < 90) {
|
|
2690
|
-
moveDist = 0 - changeMoveDistDirect(moveDist, moveY);
|
|
2691
|
-
var radian = parseRadian(angle_1);
|
|
2692
|
-
var centerMoveDist = moveDist / 2;
|
|
2693
|
-
centerX = centerX + centerMoveDist * Math.sin(radian);
|
|
2694
|
-
centerY = centerY - centerMoveDist * Math.cos(radian);
|
|
2695
|
-
}
|
|
2696
|
-
else if (angle_1 < 180) {
|
|
2697
|
-
moveDist = changeMoveDistDirect(moveDist, moveX);
|
|
2698
|
-
var radian = parseRadian(angle_1 - 90);
|
|
2699
|
-
var centerMoveDist = moveDist / 2;
|
|
2700
|
-
centerX = centerX + centerMoveDist * Math.cos(radian);
|
|
2701
|
-
centerY = centerY + centerMoveDist * Math.sin(radian);
|
|
2702
|
-
}
|
|
2703
|
-
else if (angle_1 < 270) {
|
|
2704
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2705
|
-
var radian = parseRadian(angle_1 - 180);
|
|
2706
|
-
var centerMoveDist = moveDist / 2;
|
|
2707
|
-
centerX = centerX - centerMoveDist * Math.sin(radian);
|
|
2708
|
-
centerY = centerY + centerMoveDist * Math.cos(radian);
|
|
2709
|
-
}
|
|
2710
|
-
else if (angle_1 < 360) {
|
|
2711
|
-
moveDist = 0 - changeMoveDistDirect(moveDist, moveX);
|
|
2712
|
-
var radian = parseRadian(angle_1 - 270);
|
|
2713
|
-
var centerMoveDist = moveDist / 2;
|
|
2714
|
-
centerX = centerX - centerMoveDist * Math.cos(radian);
|
|
2715
|
-
centerY = centerY - centerMoveDist * Math.sin(radian);
|
|
2716
|
-
}
|
|
2717
|
-
if (p.h + moveDist > 0) {
|
|
2718
|
-
p.h = p.h + moveDist;
|
|
2719
|
-
p.x = centerX - p.w / 2;
|
|
2720
|
-
p.y = centerY - p.h / 2;
|
|
2721
|
-
}
|
|
2722
|
-
}
|
|
2723
|
-
else {
|
|
2724
|
-
if (p.h - moveY > 0) {
|
|
2725
|
-
p.y += moveY;
|
|
2726
|
-
p.h -= moveY;
|
|
2727
|
-
}
|
|
2728
|
-
}
|
|
2729
|
-
break;
|
|
2730
|
-
}
|
|
2731
|
-
case 'top-right': {
|
|
2732
|
-
if (p.h - moveY > 0 && p.w + moveX > 0) {
|
|
2733
|
-
p.y += moveY;
|
|
2734
|
-
p.w += moveX;
|
|
2735
|
-
p.h -= moveY;
|
|
2736
|
-
}
|
|
2737
|
-
break;
|
|
2738
|
-
}
|
|
2739
|
-
case 'right': {
|
|
2740
|
-
if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
|
|
2741
|
-
if (elem.w + moveX > 0) {
|
|
2742
|
-
p.w += moveX;
|
|
2743
|
-
}
|
|
2744
|
-
}
|
|
2745
|
-
else if (elem.angle > 0 || elem.angle < 0) {
|
|
2746
|
-
var angle_2 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
|
2747
|
-
var moveDist = calcMoveDist(moveX, moveY);
|
|
2748
|
-
var centerX = p.x + elem.w / 2;
|
|
2749
|
-
var centerY = p.y + elem.h / 2;
|
|
2750
|
-
if (angle_2 < 90) {
|
|
2751
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2752
|
-
var radian = parseRadian(angle_2);
|
|
2753
|
-
var centerMoveDist = moveDist / 2;
|
|
2754
|
-
centerX = centerX + centerMoveDist * Math.cos(radian);
|
|
2755
|
-
centerY = centerY + centerMoveDist * Math.sin(radian);
|
|
2756
|
-
}
|
|
2757
|
-
else if (angle_2 < 180) {
|
|
2758
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2759
|
-
var radian = parseRadian(angle_2 - 90);
|
|
2760
|
-
var centerMoveDist = moveDist / 2;
|
|
2761
|
-
centerX = centerX - centerMoveDist * Math.sin(radian);
|
|
2762
|
-
centerY = centerY + centerMoveDist * Math.cos(radian);
|
|
2763
|
-
}
|
|
2764
|
-
else if (angle_2 < 270) {
|
|
2765
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2766
|
-
var radian = parseRadian(angle_2 - 180);
|
|
2767
|
-
var centerMoveDist = moveDist / 2;
|
|
2768
|
-
centerX = centerX + centerMoveDist * Math.cos(radian);
|
|
2769
|
-
centerY = centerY + centerMoveDist * Math.sin(radian);
|
|
2770
|
-
moveDist = 0 - moveDist;
|
|
2771
|
-
}
|
|
2772
|
-
else if (angle_2 < 360) {
|
|
2773
|
-
moveDist = changeMoveDistDirect(moveDist, moveX);
|
|
2774
|
-
var radian = parseRadian(angle_2 - 270);
|
|
2775
|
-
var centerMoveDist = moveDist / 2;
|
|
2776
|
-
centerX = centerX + centerMoveDist * Math.sin(radian);
|
|
2777
|
-
centerY = centerY - centerMoveDist * Math.cos(radian);
|
|
2778
|
-
}
|
|
2779
|
-
if (p.w + moveDist > 0) {
|
|
2780
|
-
p.w = p.w + moveDist;
|
|
2781
|
-
p.x = centerX - p.w / 2;
|
|
2782
|
-
p.y = centerY - p.h / 2;
|
|
2783
|
-
}
|
|
2784
|
-
}
|
|
2785
|
-
else {
|
|
2786
|
-
if (elem.w + moveX > 0) {
|
|
2787
|
-
p.w += moveX;
|
|
2788
|
-
}
|
|
2789
|
-
}
|
|
2790
|
-
break;
|
|
2791
|
-
}
|
|
2792
|
-
case 'bottom-right': {
|
|
2793
|
-
if (elem.w + moveX > 0 && elem.h + moveY > 0) {
|
|
2794
|
-
p.w += moveX;
|
|
2795
|
-
p.h += moveY;
|
|
2796
|
-
}
|
|
2797
|
-
break;
|
|
2798
|
-
}
|
|
2799
|
-
case 'bottom': {
|
|
2800
|
-
if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
|
|
2801
|
-
if (elem.h + moveY > 0) {
|
|
2802
|
-
p.h += moveY;
|
|
2803
|
-
}
|
|
2804
|
-
}
|
|
2805
|
-
else if (elem.angle > 0 || elem.angle < 0) {
|
|
2806
|
-
var angle_3 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
|
2807
|
-
var moveDist = calcMoveDist(moveX, moveY);
|
|
2808
|
-
var centerX = p.x + elem.w / 2;
|
|
2809
|
-
var centerY = p.y + elem.h / 2;
|
|
2810
|
-
if (angle_3 < 90) {
|
|
2811
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2812
|
-
var radian = parseRadian(angle_3);
|
|
2813
|
-
var centerMoveDist = moveDist / 2;
|
|
2814
|
-
centerX = centerX - centerMoveDist * Math.sin(radian);
|
|
2815
|
-
centerY = centerY + centerMoveDist * Math.cos(radian);
|
|
2816
|
-
}
|
|
2817
|
-
else if (angle_3 < 180) {
|
|
2818
|
-
moveDist = 0 - changeMoveDistDirect(moveDist, moveX);
|
|
2819
|
-
var radian = parseRadian(angle_3 - 90);
|
|
2820
|
-
var centerMoveDist = moveDist / 2;
|
|
2821
|
-
centerX = centerX - centerMoveDist * Math.cos(radian);
|
|
2822
|
-
centerY = centerY - centerMoveDist * Math.sin(radian);
|
|
2823
|
-
}
|
|
2824
|
-
else if (angle_3 < 270) {
|
|
2825
|
-
moveDist = changeMoveDistDirect(moveDist, moveX);
|
|
2826
|
-
var radian = parseRadian(angle_3 - 180);
|
|
2827
|
-
var centerMoveDist = moveDist / 2;
|
|
2828
|
-
centerX = centerX + centerMoveDist * Math.sin(radian);
|
|
2829
|
-
centerY = centerY - centerMoveDist * Math.cos(radian);
|
|
2830
|
-
}
|
|
2831
|
-
else if (angle_3 < 360) {
|
|
2832
|
-
moveDist = changeMoveDistDirect(moveDist, moveX);
|
|
2833
|
-
var radian = parseRadian(angle_3 - 270);
|
|
2834
|
-
var centerMoveDist = moveDist / 2;
|
|
2835
|
-
centerX = centerX + centerMoveDist * Math.cos(radian);
|
|
2836
|
-
centerY = centerY + centerMoveDist * Math.sin(radian);
|
|
2837
|
-
}
|
|
2838
|
-
if (p.h + moveDist > 0) {
|
|
2839
|
-
p.h = p.h + moveDist;
|
|
2840
|
-
p.x = centerX - p.w / 2;
|
|
2841
|
-
p.y = centerY - p.h / 2;
|
|
2842
|
-
}
|
|
2843
|
-
}
|
|
2844
|
-
else {
|
|
2845
|
-
if (elem.h + moveY > 0) {
|
|
2846
|
-
p.h += moveY;
|
|
2847
|
-
}
|
|
2848
|
-
}
|
|
2849
|
-
break;
|
|
2850
|
-
}
|
|
2851
|
-
case 'bottom-left': {
|
|
2852
|
-
if (elem.w - moveX > 0 && elem.h + moveY > 0) {
|
|
2853
|
-
p.x += moveX;
|
|
2854
|
-
p.w -= moveX;
|
|
2855
|
-
p.h += moveY;
|
|
2856
|
-
}
|
|
2857
|
-
break;
|
|
2858
|
-
}
|
|
2859
|
-
case 'left': {
|
|
2860
|
-
if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle$1) {
|
|
2861
|
-
if (elem.w - moveX > 0) {
|
|
2862
|
-
p.x += moveX;
|
|
2863
|
-
p.w -= moveX;
|
|
2864
|
-
}
|
|
2865
|
-
}
|
|
2866
|
-
else if (elem.angle > 0 || elem.angle < 0) {
|
|
2867
|
-
var angle_4 = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
|
2868
|
-
var moveDist = calcMoveDist(moveX, moveY);
|
|
2869
|
-
var centerX = p.x + elem.w / 2;
|
|
2870
|
-
var centerY = p.y + elem.h / 2;
|
|
2871
|
-
if (angle_4 < 90) {
|
|
2872
|
-
moveDist = 0 - changeMoveDistDirect(moveDist, moveX);
|
|
2873
|
-
var radian = parseRadian(angle_4);
|
|
2874
|
-
var centerMoveDist = moveDist / 2;
|
|
2875
|
-
centerX = centerX - centerMoveDist * Math.cos(radian);
|
|
2876
|
-
centerY = centerY - centerMoveDist * Math.sin(radian);
|
|
2877
|
-
}
|
|
2878
|
-
else if (angle_4 < 180) {
|
|
2879
|
-
moveDist = changeMoveDistDirect(moveDist, moveX);
|
|
2880
|
-
var radian = parseRadian(angle_4 - 90);
|
|
2881
|
-
var centerMoveDist = moveDist / 2;
|
|
2882
|
-
centerX = centerX + centerMoveDist * Math.sin(radian);
|
|
2883
|
-
centerY = centerY - centerMoveDist * Math.cos(radian);
|
|
2884
|
-
}
|
|
2885
|
-
else if (angle_4 < 270) {
|
|
2886
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2887
|
-
var radian = parseRadian(angle_4 - 180);
|
|
2888
|
-
var centerMoveDist = moveDist / 2;
|
|
2889
|
-
centerX = centerX + centerMoveDist * Math.cos(radian);
|
|
2890
|
-
centerY = centerY + centerMoveDist * Math.sin(radian);
|
|
2891
|
-
}
|
|
2892
|
-
else if (angle_4 < 360) {
|
|
2893
|
-
moveDist = changeMoveDistDirect(moveDist, moveY);
|
|
2894
|
-
var radian = parseRadian(angle_4 - 270);
|
|
2895
|
-
var centerMoveDist = moveDist / 2;
|
|
2896
|
-
centerX = centerX - centerMoveDist * Math.sin(radian);
|
|
2897
|
-
centerY = centerY + centerMoveDist * Math.cos(radian);
|
|
2898
|
-
}
|
|
2899
|
-
if (p.w + moveDist > 0) {
|
|
2900
|
-
p.w = p.w + moveDist;
|
|
2901
|
-
p.x = centerX - p.w / 2;
|
|
2902
|
-
p.y = centerY - p.h / 2;
|
|
2903
|
-
}
|
|
2904
|
-
}
|
|
2905
|
-
else {
|
|
2906
|
-
if (elem.w - moveX > 0) {
|
|
2907
|
-
p.x += moveX;
|
|
2908
|
-
p.w -= moveX;
|
|
2909
|
-
}
|
|
2910
|
-
}
|
|
2911
|
-
break;
|
|
2912
|
-
}
|
|
2913
|
-
}
|
|
2914
|
-
return p;
|
|
2915
|
-
}
|
|
2916
|
-
function parseRadian(angle) {
|
|
2917
|
-
return angle * Math.PI / 180;
|
|
2918
|
-
}
|
|
2919
|
-
function calcMoveDist(moveX, moveY) {
|
|
2920
|
-
return Math.sqrt(moveX * moveX + moveY * moveY);
|
|
2921
|
-
}
|
|
2922
|
-
function changeMoveDistDirect(moveDist, moveDirect) {
|
|
2923
|
-
return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
|
|
2924
|
-
}
|
|
2925
|
-
|
|
2926
|
-
var limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
|
|
2927
|
-
var deepClone$4 = index.data.deepClone;
|
|
2928
|
-
var Helper = (function () {
|
|
2929
|
-
function Helper(board, config) {
|
|
2930
|
-
this._areaStart = { x: 0, y: 0 };
|
|
2931
|
-
this._areaEnd = { x: 0, y: 0 };
|
|
2932
|
-
this._board = board;
|
|
2933
|
-
this._ctx = this._board.getContext();
|
|
2934
|
-
this._coreConfig = config;
|
|
2935
|
-
this._helperConfig = {
|
|
2936
|
-
elementIndexMap: {}
|
|
2937
|
-
};
|
|
2938
|
-
}
|
|
2939
|
-
Helper.prototype.updateConfig = function (data, opts) {
|
|
2940
|
-
this._updateElementIndex(data);
|
|
2941
|
-
this._updateSelectedElementWrapper(data, opts);
|
|
2942
|
-
this._updateSelectedElementListWrapper(data, opts);
|
|
2943
|
-
};
|
|
2944
|
-
Helper.prototype.getConfig = function () {
|
|
2945
|
-
return deepClone$4(this._helperConfig);
|
|
2946
|
-
};
|
|
2947
|
-
Helper.prototype.getElementIndexByUUID = function (uuid) {
|
|
2948
|
-
var index = this._helperConfig.elementIndexMap[uuid];
|
|
2949
|
-
if (index >= 0) {
|
|
2950
|
-
return index;
|
|
2951
|
-
}
|
|
2952
|
-
return null;
|
|
2953
|
-
};
|
|
2954
|
-
Helper.prototype.isPointInElementWrapperController = function (p, data) {
|
|
2955
|
-
var _a, _b;
|
|
2956
|
-
var ctx = this._ctx;
|
|
2957
|
-
var uuid = ((_b = (_a = this._helperConfig) === null || _a === void 0 ? void 0 : _a.selectedElementWrapper) === null || _b === void 0 ? void 0 : _b.uuid) || null;
|
|
2958
|
-
var directIndex = null;
|
|
2959
|
-
var selectedControllerDirection = null;
|
|
2960
|
-
var hoverControllerDirection = null;
|
|
2961
|
-
if (!this._helperConfig.selectedElementWrapper) {
|
|
2962
|
-
return { uuid: uuid, selectedControllerDirection: selectedControllerDirection, directIndex: directIndex, hoverControllerDirection: hoverControllerDirection };
|
|
2963
|
-
}
|
|
2964
|
-
var wrapper = this._helperConfig.selectedElementWrapper;
|
|
2965
|
-
var controllers = [
|
|
2966
|
-
wrapper.controllers.right,
|
|
2967
|
-
wrapper.controllers.topRight,
|
|
2968
|
-
wrapper.controllers.top,
|
|
2969
|
-
wrapper.controllers.topLeft,
|
|
2970
|
-
wrapper.controllers.left,
|
|
2971
|
-
wrapper.controllers.bottomLeft,
|
|
2972
|
-
wrapper.controllers.bottom,
|
|
2973
|
-
wrapper.controllers.bottomRight,
|
|
2974
|
-
];
|
|
2975
|
-
var directionNames = [
|
|
2976
|
-
'right',
|
|
2977
|
-
'top-right',
|
|
2978
|
-
'top',
|
|
2979
|
-
'top-left',
|
|
2980
|
-
'left',
|
|
2981
|
-
'bottom-left',
|
|
2982
|
-
'bottom',
|
|
2983
|
-
'bottom-right',
|
|
2984
|
-
];
|
|
2985
|
-
var hoverDirectionNames = index.data.deepClone(directionNames);
|
|
2986
|
-
var angleMoveNum = 0;
|
|
2987
|
-
if (data && uuid) {
|
|
2988
|
-
var elemIdx = this.getElementIndexByUUID(uuid);
|
|
2989
|
-
if (elemIdx !== null && elemIdx >= 0) {
|
|
2990
|
-
var elem = data.elements[elemIdx];
|
|
2991
|
-
var angle = elem.angle;
|
|
2992
|
-
if (angle < 0) {
|
|
2993
|
-
angle += 360;
|
|
2994
|
-
}
|
|
2995
|
-
if (angle < 45) {
|
|
2996
|
-
angleMoveNum = 0;
|
|
2997
|
-
}
|
|
2998
|
-
else if (angle < 90) {
|
|
2999
|
-
angleMoveNum = 1;
|
|
3000
|
-
}
|
|
3001
|
-
else if (angle < 135) {
|
|
3002
|
-
angleMoveNum = 2;
|
|
3003
|
-
}
|
|
3004
|
-
else if (angle < 180) {
|
|
3005
|
-
angleMoveNum = 3;
|
|
3006
|
-
}
|
|
3007
|
-
else if (angle < 225) {
|
|
3008
|
-
angleMoveNum = 4;
|
|
3009
|
-
}
|
|
3010
|
-
else if (angle < 270) {
|
|
3011
|
-
angleMoveNum = 5;
|
|
3012
|
-
}
|
|
3013
|
-
else if (angle < 315) {
|
|
3014
|
-
angleMoveNum = 6;
|
|
3015
|
-
}
|
|
3016
|
-
}
|
|
3017
|
-
}
|
|
3018
|
-
if (angleMoveNum > 0) {
|
|
3019
|
-
hoverDirectionNames = hoverDirectionNames.slice(-angleMoveNum).concat(hoverDirectionNames.slice(0, -angleMoveNum));
|
|
3020
|
-
}
|
|
3021
|
-
rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
|
|
3022
|
-
for (var i = 0; i < controllers.length; i++) {
|
|
3023
|
-
var controller = controllers[i];
|
|
3024
|
-
if (controller.invisible === true) {
|
|
3025
|
-
continue;
|
|
3026
|
-
}
|
|
3027
|
-
ctx.beginPath();
|
|
3028
|
-
ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
|
|
3029
|
-
ctx.closePath();
|
|
3030
|
-
if (ctx.isPointInPath(p.x, p.y)) {
|
|
3031
|
-
selectedControllerDirection = directionNames[i];
|
|
3032
|
-
hoverControllerDirection = hoverDirectionNames[i];
|
|
3033
|
-
}
|
|
3034
|
-
if (selectedControllerDirection) {
|
|
3035
|
-
directIndex = i;
|
|
3036
|
-
break;
|
|
3037
|
-
}
|
|
3038
|
-
}
|
|
3039
|
-
});
|
|
3040
|
-
if (selectedControllerDirection === null) {
|
|
3041
|
-
var controller_1 = wrapper.controllers.rotate;
|
|
3042
|
-
if (controller_1.invisible !== true) {
|
|
3043
|
-
rotateContext(ctx, wrapper.translate, wrapper.radian || 0, function () {
|
|
3044
|
-
ctx.beginPath();
|
|
3045
|
-
ctx.arc(controller_1.x, controller_1.y, wrapper.controllerSize, 0, Math.PI * 2);
|
|
3046
|
-
ctx.closePath();
|
|
3047
|
-
if (ctx.isPointInPath(p.x, p.y)) {
|
|
3048
|
-
selectedControllerDirection = 'rotate';
|
|
3049
|
-
hoverControllerDirection = 'rotate';
|
|
3050
|
-
}
|
|
3051
|
-
});
|
|
3052
|
-
}
|
|
3053
|
-
}
|
|
3054
|
-
return { uuid: uuid, selectedControllerDirection: selectedControllerDirection, hoverControllerDirection: hoverControllerDirection, directIndex: directIndex };
|
|
3055
|
-
};
|
|
3056
|
-
Helper.prototype.isPointInElementList = function (p, data) {
|
|
3057
|
-
var _a, _b, _c;
|
|
3058
|
-
var ctx = this._ctx;
|
|
3059
|
-
var idx = -1;
|
|
3060
|
-
var uuid = null;
|
|
3061
|
-
var wrapperList = ((_a = this._helperConfig) === null || _a === void 0 ? void 0 : _a.selectedElementListWrappers) || [];
|
|
3062
|
-
var _loop_1 = function (i) {
|
|
3063
|
-
var wrapper = wrapperList[i];
|
|
3064
|
-
var elemIdx = this_1._helperConfig.elementIndexMap[wrapper.uuid];
|
|
3065
|
-
var ele = data.elements[elemIdx];
|
|
3066
|
-
if (!ele)
|
|
3067
|
-
return "continue";
|
|
3068
|
-
if (((_b = ele.operation) === null || _b === void 0 ? void 0 : _b.invisible) === true)
|
|
3069
|
-
return "continue";
|
|
3070
|
-
var bw = 0;
|
|
3071
|
-
if (((_c = ele.desc) === null || _c === void 0 ? void 0 : _c.borderWidth) > 0) {
|
|
3072
|
-
bw = ele.desc.borderWidth;
|
|
3073
|
-
}
|
|
3074
|
-
rotateElement(ctx, ele, function () {
|
|
3075
|
-
ctx.beginPath();
|
|
3076
|
-
ctx.moveTo(ele.x - bw, ele.y - bw);
|
|
3077
|
-
ctx.lineTo(ele.x + ele.w + bw, ele.y - bw);
|
|
3078
|
-
ctx.lineTo(ele.x + ele.w + bw, ele.y + ele.h + bw);
|
|
3079
|
-
ctx.lineTo(ele.x - bw, ele.y + ele.h + bw);
|
|
3080
|
-
ctx.lineTo(ele.x - bw, ele.y - bw);
|
|
3081
|
-
ctx.closePath();
|
|
3082
|
-
if (ctx.isPointInPath(p.x, p.y)) {
|
|
3083
|
-
idx = i;
|
|
3084
|
-
uuid = ele.uuid;
|
|
3085
|
-
}
|
|
3086
|
-
});
|
|
3087
|
-
if (idx >= 0) {
|
|
3088
|
-
return "break";
|
|
3089
|
-
}
|
|
3090
|
-
};
|
|
3091
|
-
var this_1 = this;
|
|
3092
|
-
for (var i = 0; i < wrapperList.length; i++) {
|
|
3093
|
-
var state_1 = _loop_1(i);
|
|
3094
|
-
if (state_1 === "break")
|
|
3095
|
-
break;
|
|
3096
|
-
}
|
|
3097
|
-
if (uuid && idx >= 0) {
|
|
3098
|
-
return true;
|
|
3099
|
-
}
|
|
3100
|
-
else {
|
|
3101
|
-
return false;
|
|
3102
|
-
}
|
|
3103
|
-
};
|
|
3104
|
-
Helper.prototype.startSelectArea = function (p) {
|
|
3105
|
-
this._areaStart = p;
|
|
3106
|
-
this._areaEnd = p;
|
|
3107
|
-
};
|
|
3108
|
-
Helper.prototype.changeSelectArea = function (p) {
|
|
3109
|
-
this._areaEnd = p;
|
|
3110
|
-
this._calcSelectedArea();
|
|
3111
|
-
};
|
|
3112
|
-
Helper.prototype.clearSelectedArea = function () {
|
|
3113
|
-
this._areaStart = { x: 0, y: 0 };
|
|
3114
|
-
this._areaEnd = { x: 0, y: 0 };
|
|
3115
|
-
this._calcSelectedArea();
|
|
3116
|
-
};
|
|
3117
|
-
Helper.prototype.calcSelectedElements = function (data) {
|
|
3118
|
-
var transform = this._ctx.getTransform();
|
|
3119
|
-
var _a = transform.scale, scale = _a === void 0 ? 1 : _a, _b = transform.scrollX, scrollX = _b === void 0 ? 0 : _b, _c = transform.scrollY, scrollY = _c === void 0 ? 0 : _c;
|
|
3120
|
-
var start = this._areaStart;
|
|
3121
|
-
var end = this._areaEnd;
|
|
3122
|
-
var x = (Math.min(start.x, end.x) - scrollX) / scale;
|
|
3123
|
-
var y = (Math.min(start.y, end.y) - scrollY) / scale;
|
|
3124
|
-
var w = Math.abs(end.x - start.x) / scale;
|
|
3125
|
-
var h = Math.abs(end.y - start.y) / scale;
|
|
3126
|
-
var uuids = [];
|
|
3127
|
-
var ctx = this._ctx;
|
|
3128
|
-
ctx.beginPath();
|
|
3129
|
-
ctx.moveTo(x, y);
|
|
3130
|
-
ctx.lineTo(x + w, y);
|
|
3131
|
-
ctx.lineTo(x + w, y + h);
|
|
3132
|
-
ctx.lineTo(x, y + h);
|
|
3133
|
-
ctx.lineTo(x, y);
|
|
3134
|
-
ctx.closePath();
|
|
3135
|
-
data.elements.forEach(function (elem) {
|
|
3136
|
-
var _a;
|
|
3137
|
-
if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) !== true) {
|
|
3138
|
-
var centerX = elem.x + elem.w / 2;
|
|
3139
|
-
var centerY = elem.y + elem.h / 2;
|
|
3140
|
-
if (ctx.isPointInPathWithoutScroll(centerX, centerY)) {
|
|
3141
|
-
uuids.push(elem.uuid);
|
|
3142
|
-
}
|
|
3143
|
-
}
|
|
3144
|
-
});
|
|
3145
|
-
return uuids;
|
|
3146
|
-
};
|
|
3147
|
-
Helper.prototype._calcSelectedArea = function () {
|
|
3148
|
-
var start = this._areaStart;
|
|
3149
|
-
var end = this._areaEnd;
|
|
3150
|
-
var transform = this._ctx.getTransform();
|
|
3151
|
-
var _a = transform.scale, scale = _a === void 0 ? 1 : _a, _b = transform.scrollX, scrollX = _b === void 0 ? 0 : _b, _c = transform.scrollY, scrollY = _c === void 0 ? 0 : _c;
|
|
3152
|
-
var elemWrapper = this._coreConfig.elementWrapper;
|
|
3153
|
-
var lineWidth = elemWrapper.lineWidth / scale;
|
|
3154
|
-
var lineDash = elemWrapper.lineDash.map(function (n) { return (n / scale); });
|
|
3155
|
-
this._helperConfig.selectedAreaWrapper = {
|
|
3156
|
-
x: (Math.min(start.x, end.x) - scrollX) / scale,
|
|
3157
|
-
y: (Math.min(start.y, end.y) - scrollY) / scale,
|
|
3158
|
-
w: Math.abs(end.x - start.x) / scale,
|
|
3159
|
-
h: Math.abs(end.y - start.y) / scale,
|
|
3160
|
-
startPoint: { x: start.x, y: start.y },
|
|
3161
|
-
endPoint: { x: end.x, y: end.y },
|
|
3162
|
-
lineWidth: lineWidth,
|
|
3163
|
-
lineDash: lineDash,
|
|
3164
|
-
color: elemWrapper.color,
|
|
3165
|
-
};
|
|
3166
|
-
};
|
|
3167
|
-
Helper.prototype._updateElementIndex = function (data) {
|
|
3168
|
-
var _this = this;
|
|
3169
|
-
this._helperConfig.elementIndexMap = {};
|
|
3170
|
-
data.elements.forEach(function (elem, i) {
|
|
3171
|
-
_this._helperConfig.elementIndexMap[elem.uuid] = i;
|
|
3172
|
-
});
|
|
3173
|
-
};
|
|
3174
|
-
Helper.prototype._updateSelectedElementWrapper = function (data, opts) {
|
|
3175
|
-
var _a;
|
|
3176
|
-
var uuid = opts.selectedUUID;
|
|
3177
|
-
if (!(typeof uuid === 'string' && this._helperConfig.elementIndexMap[uuid] >= 0)) {
|
|
3178
|
-
delete this._helperConfig.selectedElementWrapper;
|
|
3179
|
-
return;
|
|
3180
|
-
}
|
|
3181
|
-
var index = this._helperConfig.elementIndexMap[uuid];
|
|
3182
|
-
var elem = data.elements[index];
|
|
3183
|
-
if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
|
|
3184
|
-
return;
|
|
3185
|
-
}
|
|
3186
|
-
var wrapper = this._createSelectedElementWrapper(elem, opts);
|
|
3187
|
-
this._helperConfig.selectedElementWrapper = wrapper;
|
|
3188
|
-
};
|
|
3189
|
-
Helper.prototype._updateSelectedElementListWrapper = function (data, opts) {
|
|
3190
|
-
var _this = this;
|
|
3191
|
-
var selectedUUIDList = opts.selectedUUIDList;
|
|
3192
|
-
var wrapperList = [];
|
|
3193
|
-
data.elements.forEach(function (elem, i) {
|
|
3194
|
-
if (selectedUUIDList === null || selectedUUIDList === void 0 ? void 0 : selectedUUIDList.includes(elem.uuid)) {
|
|
3195
|
-
var wrapper = _this._createSelectedElementWrapper(elem, opts);
|
|
3196
|
-
wrapperList.push(wrapper);
|
|
3197
|
-
}
|
|
3198
|
-
});
|
|
3199
|
-
this._helperConfig.selectedElementListWrappers = wrapperList;
|
|
3200
|
-
};
|
|
3201
|
-
Helper.prototype._createSelectedElementWrapper = function (elem, opts) {
|
|
3202
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
3203
|
-
var scale = opts.scale;
|
|
3204
|
-
var elemWrapper = this._coreConfig.elementWrapper;
|
|
3205
|
-
var controllerSize = elemWrapper.controllerSize / scale;
|
|
3206
|
-
var lineWidth = elemWrapper.lineWidth / scale;
|
|
3207
|
-
var lineDash = elemWrapper.lineDash.map(function (n) { return (n / scale); });
|
|
3208
|
-
var rotateLimit = 12;
|
|
3209
|
-
var bw = ((_a = elem.desc) === null || _a === void 0 ? void 0 : _a.borderWidth) || 0;
|
|
3210
|
-
var hideObliqueDirection = false;
|
|
3211
|
-
if (typeof elem.angle === 'number' && Math.abs(elem.angle) > limitQbliqueAngle) {
|
|
3212
|
-
hideObliqueDirection = true;
|
|
3213
|
-
}
|
|
3214
|
-
var wrapper = {
|
|
3215
|
-
uuid: elem.uuid,
|
|
3216
|
-
controllerSize: controllerSize,
|
|
3217
|
-
lock: ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.lock) === true,
|
|
3218
|
-
controllers: {
|
|
3219
|
-
topLeft: {
|
|
3220
|
-
x: elem.x - controllerSize - bw,
|
|
3221
|
-
y: elem.y - controllerSize - bw,
|
|
3222
|
-
invisible: hideObliqueDirection || ((_c = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _c === void 0 ? void 0 : _c.disbaleScale) === true,
|
|
3223
|
-
},
|
|
3224
|
-
top: {
|
|
3225
|
-
x: elem.x + elem.w / 2,
|
|
3226
|
-
y: elem.y - controllerSize - bw,
|
|
3227
|
-
invisible: ((_d = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _d === void 0 ? void 0 : _d.disbaleScale) === true,
|
|
3228
|
-
},
|
|
3229
|
-
topRight: {
|
|
3230
|
-
x: elem.x + elem.w + controllerSize + bw,
|
|
3231
|
-
y: elem.y - controllerSize - bw,
|
|
3232
|
-
invisible: hideObliqueDirection || ((_e = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _e === void 0 ? void 0 : _e.disbaleScale) === true,
|
|
3233
|
-
},
|
|
3234
|
-
right: {
|
|
3235
|
-
x: elem.x + elem.w + controllerSize + bw,
|
|
3236
|
-
y: elem.y + elem.h / 2,
|
|
3237
|
-
invisible: ((_f = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _f === void 0 ? void 0 : _f.disbaleScale) === true
|
|
3238
|
-
},
|
|
3239
|
-
bottomRight: {
|
|
3240
|
-
x: elem.x + elem.w + controllerSize + bw,
|
|
3241
|
-
y: elem.y + elem.h + controllerSize + bw,
|
|
3242
|
-
invisible: hideObliqueDirection || ((_g = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _g === void 0 ? void 0 : _g.disbaleScale) === true,
|
|
3243
|
-
},
|
|
3244
|
-
bottom: {
|
|
3245
|
-
x: elem.x + elem.w / 2,
|
|
3246
|
-
y: elem.y + elem.h + controllerSize + bw,
|
|
3247
|
-
invisible: ((_h = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _h === void 0 ? void 0 : _h.disbaleScale) === true,
|
|
3248
|
-
},
|
|
3249
|
-
bottomLeft: {
|
|
3250
|
-
x: elem.x - controllerSize - bw,
|
|
3251
|
-
y: elem.y + elem.h + controllerSize + bw,
|
|
3252
|
-
invisible: hideObliqueDirection || ((_j = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _j === void 0 ? void 0 : _j.disbaleScale) === true,
|
|
3253
|
-
},
|
|
3254
|
-
left: {
|
|
3255
|
-
x: elem.x - controllerSize - bw,
|
|
3256
|
-
y: elem.y + elem.h / 2,
|
|
3257
|
-
invisible: ((_k = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _k === void 0 ? void 0 : _k.disbaleScale) === true
|
|
3258
|
-
},
|
|
3259
|
-
rotate: {
|
|
3260
|
-
x: elem.x + elem.w / 2,
|
|
3261
|
-
y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw,
|
|
3262
|
-
invisible: ((_l = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _l === void 0 ? void 0 : _l.disbaleRotate) === true
|
|
3263
|
-
}
|
|
3264
|
-
},
|
|
3265
|
-
lineWidth: lineWidth,
|
|
3266
|
-
lineDash: lineDash,
|
|
3267
|
-
color: ((_m = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _m === void 0 ? void 0 : _m.lock) === true ? elemWrapper.lockColor : elemWrapper.color,
|
|
3268
|
-
};
|
|
3269
|
-
if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) {
|
|
3270
|
-
wrapper.radian = parseAngleToRadian(elem.angle);
|
|
3271
|
-
wrapper.translate = calcElementCenter(elem);
|
|
3272
|
-
}
|
|
3273
|
-
return wrapper;
|
|
3274
|
-
};
|
|
3275
|
-
return Helper;
|
|
3276
|
-
}());
|
|
3277
|
-
|
|
3278
|
-
var LoaderEvent = (function () {
|
|
3279
|
-
function LoaderEvent() {
|
|
3280
|
-
this._listeners = new Map();
|
|
3281
|
-
}
|
|
3282
|
-
LoaderEvent.prototype.on = function (eventKey, callback) {
|
|
3283
|
-
if (this._listeners.has(eventKey)) {
|
|
3284
|
-
var callbacks = this._listeners.get(eventKey);
|
|
3285
|
-
callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
|
|
3286
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
3287
|
-
}
|
|
3288
|
-
else {
|
|
3289
|
-
this._listeners.set(eventKey, [callback]);
|
|
3290
|
-
}
|
|
3291
|
-
};
|
|
3292
|
-
LoaderEvent.prototype.off = function (eventKey, callback) {
|
|
3293
|
-
if (this._listeners.has(eventKey)) {
|
|
3294
|
-
var callbacks = this._listeners.get(eventKey);
|
|
3295
|
-
if (Array.isArray(callbacks)) {
|
|
3296
|
-
for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
|
|
3297
|
-
if (callbacks[i] === callback) {
|
|
3298
|
-
callbacks.splice(i, 1);
|
|
3299
|
-
break;
|
|
3300
|
-
}
|
|
3301
|
-
}
|
|
3302
|
-
}
|
|
3303
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
3304
|
-
}
|
|
3305
|
-
};
|
|
3306
|
-
LoaderEvent.prototype.trigger = function (eventKey, arg) {
|
|
3307
|
-
var callbacks = this._listeners.get(eventKey);
|
|
3308
|
-
if (Array.isArray(callbacks)) {
|
|
3309
|
-
callbacks.forEach(function (cb) {
|
|
3310
|
-
cb(arg);
|
|
3311
|
-
});
|
|
3312
|
-
return true;
|
|
3313
|
-
}
|
|
3314
|
-
else {
|
|
3315
|
-
return false;
|
|
3316
|
-
}
|
|
3317
|
-
};
|
|
3318
|
-
LoaderEvent.prototype.has = function (name) {
|
|
3319
|
-
if (this._listeners.has(name)) {
|
|
3320
|
-
var list = this._listeners.get(name);
|
|
3321
|
-
if (Array.isArray(list) && list.length > 0) {
|
|
3322
|
-
return true;
|
|
3323
|
-
}
|
|
3324
|
-
}
|
|
3325
|
-
return false;
|
|
3326
|
-
};
|
|
3327
|
-
return LoaderEvent;
|
|
3328
|
-
}());
|
|
3329
|
-
|
|
3330
|
-
function filterScript(html) {
|
|
3331
|
-
return html.replace(/<script[\s\S]*?<\/script>/ig, '');
|
|
3332
|
-
}
|
|
3333
|
-
|
|
3334
|
-
var _a = index.loader, loadImage = _a.loadImage, loadSVG = _a.loadSVG, loadHTML = _a.loadHTML;
|
|
3335
|
-
var LoaderStatus;
|
|
3336
|
-
(function (LoaderStatus) {
|
|
3337
|
-
LoaderStatus["FREE"] = "free";
|
|
3338
|
-
LoaderStatus["LOADING"] = "loading";
|
|
3339
|
-
LoaderStatus["COMPLETE"] = "complete";
|
|
3340
|
-
})(LoaderStatus || (LoaderStatus = {}));
|
|
3341
|
-
var Loader = (function () {
|
|
3342
|
-
function Loader(opts) {
|
|
3343
|
-
this._currentLoadData = {};
|
|
3344
|
-
this._currentUUIDQueue = [];
|
|
3345
|
-
this._storageLoadData = {};
|
|
3346
|
-
this._status = LoaderStatus.FREE;
|
|
3347
|
-
this._waitingLoadQueue = [];
|
|
3348
|
-
this._opts = opts;
|
|
3349
|
-
this._event = new LoaderEvent();
|
|
3350
|
-
this._waitingLoadQueue = [];
|
|
3351
|
-
}
|
|
3352
|
-
Loader.prototype.load = function (data, changeResourceUUIDs) {
|
|
3353
|
-
var _a = this._resetLoadData(data, changeResourceUUIDs), uuidQueue = _a[0], loadData = _a[1];
|
|
3354
|
-
if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
|
|
3355
|
-
this._currentUUIDQueue = uuidQueue;
|
|
3356
|
-
this._currentLoadData = loadData;
|
|
3357
|
-
this._loadTask();
|
|
3358
|
-
}
|
|
3359
|
-
else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
|
|
3360
|
-
this._waitingLoadQueue.push({
|
|
3361
|
-
uuidQueue: uuidQueue,
|
|
3362
|
-
loadData: loadData,
|
|
3363
|
-
});
|
|
3364
|
-
}
|
|
3365
|
-
};
|
|
3366
|
-
Loader.prototype.on = function (name, callback) {
|
|
3367
|
-
this._event.on(name, callback);
|
|
3368
|
-
};
|
|
3369
|
-
Loader.prototype.off = function (name, callback) {
|
|
3370
|
-
this._event.off(name, callback);
|
|
3371
|
-
};
|
|
3372
|
-
Loader.prototype.isComplete = function () {
|
|
3373
|
-
return this._status === LoaderStatus.COMPLETE;
|
|
3374
|
-
};
|
|
3375
|
-
Loader.prototype.getContent = function (uuid) {
|
|
3376
|
-
var _a;
|
|
3377
|
-
if (((_a = this._storageLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.status) === 'loaded') {
|
|
3378
|
-
return this._storageLoadData[uuid].content;
|
|
3379
|
-
}
|
|
3380
|
-
return null;
|
|
3381
|
-
};
|
|
3382
|
-
Loader.prototype._resetLoadData = function (data, changeResourceUUIDs) {
|
|
3383
|
-
var loadData = {};
|
|
3384
|
-
var uuidQueue = [];
|
|
3385
|
-
var storageLoadData = this._storageLoadData;
|
|
3386
|
-
for (var i = data.elements.length - 1; i >= 0; i--) {
|
|
3387
|
-
var elem = data.elements[i];
|
|
3388
|
-
if (['image', 'svg', 'html',].includes(elem.type)) {
|
|
3389
|
-
if (!storageLoadData[elem.uuid]) {
|
|
3390
|
-
loadData[elem.uuid] = this._createEmptyLoadItem(elem);
|
|
3391
|
-
uuidQueue.push(elem.uuid);
|
|
3392
|
-
}
|
|
3393
|
-
else {
|
|
3394
|
-
if (changeResourceUUIDs.includes(elem.uuid)) {
|
|
3395
|
-
loadData[elem.uuid] = this._createEmptyLoadItem(elem);
|
|
3396
|
-
uuidQueue.push(elem.uuid);
|
|
3397
|
-
}
|
|
3398
|
-
}
|
|
3399
|
-
}
|
|
3400
|
-
}
|
|
3401
|
-
return [uuidQueue, loadData];
|
|
3402
|
-
};
|
|
3403
|
-
Loader.prototype._createEmptyLoadItem = function (elem) {
|
|
3404
|
-
var source = '';
|
|
3405
|
-
var type = elem.type;
|
|
3406
|
-
var elemW = elem.w;
|
|
3407
|
-
var elemH = elem.h;
|
|
3408
|
-
if (elem.type === 'image') {
|
|
3409
|
-
var _elem = elem;
|
|
3410
|
-
source = _elem.desc.src || '';
|
|
3411
|
-
}
|
|
3412
|
-
else if (elem.type === 'svg') {
|
|
3413
|
-
var _elem = elem;
|
|
3414
|
-
source = _elem.desc.svg || '';
|
|
3415
|
-
}
|
|
3416
|
-
else if (elem.type === 'html') {
|
|
3417
|
-
var _elem = elem;
|
|
3418
|
-
source = filterScript(_elem.desc.html || '');
|
|
3419
|
-
elemW = _elem.desc.width || elem.w;
|
|
3420
|
-
elemH = _elem.desc.height || elem.h;
|
|
3421
|
-
}
|
|
3422
|
-
return {
|
|
3423
|
-
type: type,
|
|
3424
|
-
status: 'null',
|
|
3425
|
-
content: null,
|
|
3426
|
-
source: source,
|
|
3427
|
-
elemW: elemW,
|
|
3428
|
-
elemH: elemH,
|
|
3429
|
-
};
|
|
3430
|
-
};
|
|
3431
|
-
Loader.prototype._loadTask = function () {
|
|
3432
|
-
var _this = this;
|
|
3433
|
-
if (this._status === LoaderStatus.LOADING) {
|
|
3434
|
-
return;
|
|
3435
|
-
}
|
|
3436
|
-
this._status = LoaderStatus.LOADING;
|
|
3437
|
-
if (this._currentUUIDQueue.length === 0) {
|
|
3438
|
-
if (this._waitingLoadQueue.length === 0) {
|
|
3439
|
-
this._status = LoaderStatus.COMPLETE;
|
|
3440
|
-
this._event.trigger('complete', undefined);
|
|
3441
|
-
return;
|
|
3442
|
-
}
|
|
3443
|
-
else {
|
|
3444
|
-
var waitingItem = this._waitingLoadQueue.shift();
|
|
3445
|
-
if (waitingItem) {
|
|
3446
|
-
var uuidQueue = waitingItem.uuidQueue, loadData = waitingItem.loadData;
|
|
3447
|
-
this._currentLoadData = loadData;
|
|
3448
|
-
this._currentUUIDQueue = uuidQueue;
|
|
3449
|
-
}
|
|
3450
|
-
}
|
|
3451
|
-
}
|
|
3452
|
-
var maxParallelNum = this._opts.maxParallelNum;
|
|
3453
|
-
var uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
|
|
3454
|
-
var uuidMap = {};
|
|
3455
|
-
uuids.forEach(function (url, i) {
|
|
3456
|
-
uuidMap[url] = i;
|
|
3457
|
-
});
|
|
3458
|
-
var loadUUIDList = [];
|
|
3459
|
-
var _loadAction = function () {
|
|
3460
|
-
if (loadUUIDList.length >= maxParallelNum) {
|
|
3461
|
-
return false;
|
|
3462
|
-
}
|
|
3463
|
-
if (uuids.length === 0) {
|
|
3464
|
-
return true;
|
|
3465
|
-
}
|
|
3466
|
-
var _loop_1 = function (i) {
|
|
3467
|
-
var uuid = uuids.shift();
|
|
3468
|
-
if (uuid === undefined) {
|
|
3469
|
-
return "break";
|
|
3470
|
-
}
|
|
3471
|
-
loadUUIDList.push(uuid);
|
|
3472
|
-
_this._loadElementSource(_this._currentLoadData[uuid]).then(function (image) {
|
|
3473
|
-
loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
|
|
3474
|
-
var status = _loadAction();
|
|
3475
|
-
_this._storageLoadData[uuid] = {
|
|
3476
|
-
type: _this._currentLoadData[uuid].type,
|
|
3477
|
-
status: 'loaded',
|
|
3478
|
-
content: image,
|
|
3479
|
-
source: _this._currentLoadData[uuid].source,
|
|
3480
|
-
elemW: _this._currentLoadData[uuid].elemW,
|
|
3481
|
-
elemH: _this._currentLoadData[uuid].elemH,
|
|
3482
|
-
};
|
|
3483
|
-
if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
|
|
3484
|
-
_this._status = LoaderStatus.FREE;
|
|
3485
|
-
_this._loadTask();
|
|
3486
|
-
}
|
|
3487
|
-
_this._event.trigger('load', {
|
|
3488
|
-
type: _this._storageLoadData[uuid].type,
|
|
3489
|
-
status: _this._storageLoadData[uuid].status,
|
|
3490
|
-
content: _this._storageLoadData[uuid].content,
|
|
3491
|
-
source: _this._storageLoadData[uuid].source,
|
|
3492
|
-
elemW: _this._storageLoadData[uuid].elemW,
|
|
3493
|
-
elemH: _this._storageLoadData[uuid].elemH,
|
|
3494
|
-
});
|
|
3495
|
-
}).catch(function (err) {
|
|
3496
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
3497
|
-
console.warn(err);
|
|
3498
|
-
loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
|
|
3499
|
-
var status = _loadAction();
|
|
3500
|
-
if (_this._currentLoadData[uuid]) {
|
|
3501
|
-
_this._storageLoadData[uuid] = {
|
|
3502
|
-
type: (_a = _this._currentLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.type,
|
|
3503
|
-
status: 'fail',
|
|
3504
|
-
content: null,
|
|
3505
|
-
error: err,
|
|
3506
|
-
source: (_b = _this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
|
|
3507
|
-
elemW: (_c = _this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.elemW,
|
|
3508
|
-
elemH: (_d = _this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
|
|
3509
|
-
};
|
|
3510
|
-
}
|
|
3511
|
-
if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
|
|
3512
|
-
_this._status = LoaderStatus.FREE;
|
|
3513
|
-
_this._loadTask();
|
|
3514
|
-
}
|
|
3515
|
-
if (_this._currentLoadData[uuid]) {
|
|
3516
|
-
_this._event.trigger('error', {
|
|
3517
|
-
type: (_e = _this._storageLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.type,
|
|
3518
|
-
status: (_f = _this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.status,
|
|
3519
|
-
content: (_g = _this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.content,
|
|
3520
|
-
source: (_h = _this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.source,
|
|
3521
|
-
elemW: (_j = _this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.elemW,
|
|
3522
|
-
elemH: (_k = _this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemH,
|
|
3523
|
-
});
|
|
3524
|
-
}
|
|
3525
|
-
});
|
|
3526
|
-
};
|
|
3527
|
-
for (var i = loadUUIDList.length; i < maxParallelNum; i++) {
|
|
3528
|
-
var state_1 = _loop_1();
|
|
3529
|
-
if (state_1 === "break")
|
|
3530
|
-
break;
|
|
3531
|
-
}
|
|
3532
|
-
return false;
|
|
3533
|
-
};
|
|
3534
|
-
_loadAction();
|
|
3535
|
-
};
|
|
3536
|
-
Loader.prototype._loadElementSource = function (params) {
|
|
3537
|
-
return __awaiter$2(this, void 0, void 0, function () {
|
|
3538
|
-
var image, image, image;
|
|
3539
|
-
return __generator$2(this, function (_a) {
|
|
3540
|
-
switch (_a.label) {
|
|
3541
|
-
case 0:
|
|
3542
|
-
if (!(params && params.type === 'image')) return [3, 2];
|
|
3543
|
-
return [4, loadImage(params.source)];
|
|
3544
|
-
case 1:
|
|
3545
|
-
image = _a.sent();
|
|
3546
|
-
return [2, image];
|
|
3547
|
-
case 2:
|
|
3548
|
-
if (!(params && params.type === 'svg')) return [3, 4];
|
|
3549
|
-
return [4, loadSVG(params.source)];
|
|
3550
|
-
case 3:
|
|
3551
|
-
image = _a.sent();
|
|
3552
|
-
return [2, image];
|
|
3553
|
-
case 4:
|
|
3554
|
-
if (!(params && params.type === 'html')) return [3, 6];
|
|
3555
|
-
return [4, loadHTML(params.source, {
|
|
3556
|
-
width: params.elemW, height: params.elemH
|
|
3557
|
-
})];
|
|
3558
|
-
case 5:
|
|
3559
|
-
image = _a.sent();
|
|
3560
|
-
return [2, image];
|
|
3561
|
-
case 6: throw Error('Element\'s source is not support!');
|
|
3562
|
-
}
|
|
3563
|
-
});
|
|
3564
|
-
});
|
|
3565
|
-
};
|
|
3566
|
-
return Loader;
|
|
3567
|
-
}());
|
|
3568
|
-
|
|
3569
|
-
var _board$1 = Symbol('_displayCtx');
|
|
3570
|
-
var _helper$1 = Symbol('_helper');
|
|
3571
|
-
var _element$1 = Symbol('_element');
|
|
3572
|
-
var _opts$1 = Symbol('_opts');
|
|
3573
|
-
var Mapper = (function () {
|
|
3574
|
-
function Mapper(opts) {
|
|
3575
|
-
this[_opts$1] = opts;
|
|
3576
|
-
this[_board$1] = this[_opts$1].board;
|
|
3577
|
-
this[_element$1] = this[_opts$1].element;
|
|
3578
|
-
this[_helper$1] = this[_opts$1].helper;
|
|
3579
|
-
}
|
|
3580
|
-
Mapper.prototype.isEffectivePoint = function (p) {
|
|
3581
|
-
var scrollLineWidth = this[_board$1].getScrollLineWidth();
|
|
3582
|
-
var screenInfo = this[_board$1].getScreenInfo();
|
|
3583
|
-
if (p.x <= (screenInfo.width - scrollLineWidth) && p.y <= (screenInfo.height - scrollLineWidth)) {
|
|
3584
|
-
return true;
|
|
3585
|
-
}
|
|
3586
|
-
return false;
|
|
3587
|
-
};
|
|
3588
|
-
Mapper.prototype.judgePointCursor = function (p, data) {
|
|
3589
|
-
var cursor = 'auto';
|
|
3590
|
-
var elementUUID = null;
|
|
3591
|
-
if (!this.isEffectivePoint(p)) {
|
|
3592
|
-
return { cursor: cursor, elementUUID: elementUUID };
|
|
3593
|
-
}
|
|
3594
|
-
var _a = this[_helper$1].isPointInElementWrapperController(p, data), uuid = _a.uuid, hoverControllerDirection = _a.hoverControllerDirection;
|
|
3595
|
-
var direction = hoverControllerDirection;
|
|
3596
|
-
if (uuid && direction) {
|
|
3597
|
-
switch (direction) {
|
|
3598
|
-
case 'top-right': {
|
|
3599
|
-
cursor = 'ne-resize';
|
|
3600
|
-
break;
|
|
3601
|
-
}
|
|
3602
|
-
case 'top-left': {
|
|
3603
|
-
cursor = 'nw-resize';
|
|
3604
|
-
break;
|
|
3605
|
-
}
|
|
3606
|
-
case 'top': {
|
|
3607
|
-
cursor = 'n-resize';
|
|
3608
|
-
break;
|
|
3609
|
-
}
|
|
3610
|
-
case 'right': {
|
|
3611
|
-
cursor = 'e-resize';
|
|
3612
|
-
break;
|
|
3613
|
-
}
|
|
3614
|
-
case 'bottom-right': {
|
|
3615
|
-
cursor = 'se-resize';
|
|
3616
|
-
break;
|
|
3617
|
-
}
|
|
3618
|
-
case 'bottom': {
|
|
3619
|
-
cursor = 's-resize';
|
|
3620
|
-
break;
|
|
3621
|
-
}
|
|
3622
|
-
case 'bottom-left': {
|
|
3623
|
-
cursor = 'sw-resize';
|
|
3624
|
-
break;
|
|
3625
|
-
}
|
|
3626
|
-
case 'left': {
|
|
3627
|
-
cursor = 'w-resize';
|
|
3628
|
-
break;
|
|
3629
|
-
}
|
|
3630
|
-
case 'rotate': {
|
|
3631
|
-
cursor = 'grab';
|
|
3632
|
-
break;
|
|
3633
|
-
}
|
|
3634
|
-
}
|
|
3635
|
-
if (uuid) {
|
|
3636
|
-
elementUUID = uuid;
|
|
3637
|
-
}
|
|
3638
|
-
}
|
|
3639
|
-
else {
|
|
3640
|
-
var _b = this[_element$1].isPointInElement(p, data), index = _b[0], uuid_1 = _b[1];
|
|
3641
|
-
if (index >= 0) {
|
|
3642
|
-
cursor = 'move';
|
|
3643
|
-
}
|
|
3644
|
-
if (uuid_1) {
|
|
3645
|
-
elementUUID = uuid_1;
|
|
3646
|
-
}
|
|
3647
|
-
}
|
|
3648
|
-
return {
|
|
3649
|
-
cursor: cursor,
|
|
3650
|
-
elementUUID: elementUUID,
|
|
3651
|
-
};
|
|
3652
|
-
};
|
|
3653
|
-
return Mapper;
|
|
3654
|
-
}());
|
|
3655
|
-
|
|
3656
|
-
function parseData(data) {
|
|
3657
|
-
var result = {
|
|
3658
|
-
elements: [],
|
|
3659
|
-
};
|
|
3660
|
-
if (Array.isArray(data === null || data === void 0 ? void 0 : data.elements)) {
|
|
3661
|
-
data === null || data === void 0 ? void 0 : data.elements.forEach(function (elem) {
|
|
3662
|
-
if (elem === void 0) { elem = {}; }
|
|
3663
|
-
if (isElement(elem)) {
|
|
3664
|
-
result.elements.push(elem);
|
|
3665
|
-
}
|
|
3666
|
-
});
|
|
3667
|
-
}
|
|
3668
|
-
if (typeof data.bgColor === 'string') {
|
|
3669
|
-
result.bgColor = data.bgColor;
|
|
3670
|
-
}
|
|
3671
|
-
return result;
|
|
3672
|
-
}
|
|
3673
|
-
function isElement(elem) {
|
|
3674
|
-
if (!(isNumber(elem.x) && isNumber(elem.y) && isNumber(elem.w) && isNumber(elem.h))) {
|
|
3675
|
-
return false;
|
|
3676
|
-
}
|
|
3677
|
-
if (!(typeof elem.type === 'string' && elementNames.includes(elem.type))) {
|
|
3678
|
-
return false;
|
|
3679
|
-
}
|
|
3680
|
-
return true;
|
|
3681
|
-
}
|
|
3682
|
-
function isNumber(num) {
|
|
3683
|
-
return (num >= 0 || num < 0);
|
|
3684
|
-
}
|
|
3685
|
-
|
|
3686
|
-
var RendererEvent = (function () {
|
|
3687
|
-
function RendererEvent() {
|
|
3688
|
-
this._listeners = new Map();
|
|
3689
|
-
}
|
|
3690
|
-
RendererEvent.prototype.on = function (eventKey, callback) {
|
|
3691
|
-
if (this._listeners.has(eventKey)) {
|
|
3692
|
-
var callbacks = this._listeners.get(eventKey);
|
|
3693
|
-
callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
|
|
3694
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
3695
|
-
}
|
|
3696
|
-
else {
|
|
3697
|
-
this._listeners.set(eventKey, [callback]);
|
|
3698
|
-
}
|
|
3699
|
-
};
|
|
3700
|
-
RendererEvent.prototype.off = function (eventKey, callback) {
|
|
3701
|
-
if (this._listeners.has(eventKey)) {
|
|
3702
|
-
var callbacks = this._listeners.get(eventKey);
|
|
3703
|
-
if (Array.isArray(callbacks)) {
|
|
3704
|
-
for (var i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
|
|
3705
|
-
if (callbacks[i] === callback) {
|
|
3706
|
-
callbacks.splice(i, 1);
|
|
3707
|
-
break;
|
|
3708
|
-
}
|
|
3709
|
-
}
|
|
3710
|
-
}
|
|
3711
|
-
this._listeners.set(eventKey, callbacks || []);
|
|
3712
|
-
}
|
|
3713
|
-
};
|
|
3714
|
-
RendererEvent.prototype.trigger = function (eventKey, arg) {
|
|
3715
|
-
var callbacks = this._listeners.get(eventKey);
|
|
3716
|
-
if (Array.isArray(callbacks)) {
|
|
3717
|
-
callbacks.forEach(function (cb) {
|
|
3718
|
-
cb(arg);
|
|
3719
|
-
});
|
|
3720
|
-
return true;
|
|
3721
|
-
}
|
|
3722
|
-
else {
|
|
3723
|
-
return false;
|
|
3724
|
-
}
|
|
3725
|
-
};
|
|
3726
|
-
RendererEvent.prototype.has = function (name) {
|
|
3727
|
-
if (this._listeners.has(name)) {
|
|
3728
|
-
var list = this._listeners.get(name);
|
|
3729
|
-
if (Array.isArray(list) && list.length > 0) {
|
|
3730
|
-
return true;
|
|
3731
|
-
}
|
|
3732
|
-
}
|
|
3733
|
-
return false;
|
|
3734
|
-
};
|
|
3735
|
-
return RendererEvent;
|
|
3736
|
-
}());
|
|
3737
|
-
|
|
3738
|
-
var requestAnimationFrame = window.requestAnimationFrame;
|
|
3739
|
-
var deepClone$3 = index.data.deepClone;
|
|
3740
|
-
var DrawStatus;
|
|
3741
|
-
(function (DrawStatus) {
|
|
3742
|
-
DrawStatus["NULL"] = "null";
|
|
3743
|
-
DrawStatus["FREE"] = "free";
|
|
3744
|
-
DrawStatus["DRAWING"] = "drawing";
|
|
3745
|
-
DrawStatus["FREEZE"] = "freeze";
|
|
3746
|
-
})(DrawStatus || (DrawStatus = {}));
|
|
3747
|
-
var Renderer = (function (_super) {
|
|
3748
|
-
__extends(Renderer, _super);
|
|
3749
|
-
function Renderer(board) {
|
|
3750
|
-
var _this = _super.call(this) || this;
|
|
3751
|
-
_this._queue = [];
|
|
3752
|
-
_this._status = DrawStatus.NULL;
|
|
3753
|
-
_this._board = board;
|
|
3754
|
-
_this._loader = new Loader({
|
|
3755
|
-
board: board,
|
|
3756
|
-
maxParallelNum: 6
|
|
3757
|
-
});
|
|
3758
|
-
_this._loader.on('load', function (res) {
|
|
3759
|
-
_this._drawFrame();
|
|
3760
|
-
});
|
|
3761
|
-
_this._loader.on('error', function (res) {
|
|
3762
|
-
console.log('Loader Error: ', res);
|
|
3763
|
-
});
|
|
3764
|
-
_this._loader.on('complete', function (res) {
|
|
3765
|
-
});
|
|
3766
|
-
return _this;
|
|
3767
|
-
}
|
|
3768
|
-
Renderer.prototype.freeze = function () {
|
|
3769
|
-
this._status = DrawStatus.FREEZE;
|
|
3770
|
-
};
|
|
3771
|
-
Renderer.prototype.thaw = function () {
|
|
3772
|
-
this._status = DrawStatus.FREE;
|
|
3773
|
-
};
|
|
3774
|
-
Renderer.prototype.render = function (data, helper, changeResourceUUIDs) {
|
|
3775
|
-
if ([DrawStatus.FREEZE].includes(this._status)) {
|
|
3776
|
-
return;
|
|
3777
|
-
}
|
|
3778
|
-
var _data = deepClone$3({ data: data, helper: helper });
|
|
3779
|
-
this._queue.push(_data);
|
|
3780
|
-
if (this._status !== DrawStatus.DRAWING) {
|
|
3781
|
-
this._status = DrawStatus.DRAWING;
|
|
3782
|
-
this._drawFrame();
|
|
3783
|
-
}
|
|
3784
|
-
this._loader.load(data, changeResourceUUIDs);
|
|
3785
|
-
};
|
|
3786
|
-
Renderer.prototype._drawFrame = function () {
|
|
3787
|
-
var _this = this;
|
|
3788
|
-
if (this._status === DrawStatus.FREEZE) {
|
|
3789
|
-
return;
|
|
3790
|
-
}
|
|
3791
|
-
requestAnimationFrame(function () {
|
|
3792
|
-
if (_this._status === DrawStatus.FREEZE) {
|
|
3793
|
-
return;
|
|
3794
|
-
}
|
|
3795
|
-
var ctx = _this._board.getContext();
|
|
3796
|
-
var item = _this._queue[0];
|
|
3797
|
-
var isLastFrame = false;
|
|
3798
|
-
if (_this._queue.length > 1) {
|
|
3799
|
-
item = _this._queue.shift();
|
|
3800
|
-
}
|
|
3801
|
-
else {
|
|
3802
|
-
isLastFrame = true;
|
|
3803
|
-
}
|
|
3804
|
-
if (_this._loader.isComplete() !== true) {
|
|
3805
|
-
_this._drawFrame();
|
|
3806
|
-
if (item) {
|
|
3807
|
-
drawContext(ctx, item.data, item.helper, _this._loader);
|
|
3808
|
-
_this._board.draw();
|
|
3809
|
-
}
|
|
3810
|
-
}
|
|
3811
|
-
else if (item) {
|
|
3812
|
-
drawContext(ctx, item.data, item.helper, _this._loader);
|
|
3813
|
-
_this._board.draw();
|
|
3814
|
-
_this._retainQueueOneItem();
|
|
3815
|
-
if (!isLastFrame) {
|
|
3816
|
-
_this._drawFrame();
|
|
3817
|
-
}
|
|
3818
|
-
else {
|
|
3819
|
-
_this._status = DrawStatus.FREE;
|
|
3820
|
-
}
|
|
3821
|
-
}
|
|
3822
|
-
else {
|
|
3823
|
-
_this._status = DrawStatus.FREE;
|
|
3824
|
-
}
|
|
3825
|
-
_this.trigger('drawFrame', undefined);
|
|
3826
|
-
if (_this._loader.isComplete() === true && _this._queue.length === 1 && _this._status === DrawStatus.FREE) {
|
|
3827
|
-
_this.trigger('drawFrameComplete', undefined);
|
|
3828
|
-
_this.freeze();
|
|
3829
|
-
}
|
|
3830
|
-
});
|
|
3831
|
-
};
|
|
3832
|
-
Renderer.prototype._retainQueueOneItem = function () {
|
|
3833
|
-
if (this._queue.length <= 1) {
|
|
3834
|
-
return;
|
|
3835
|
-
}
|
|
3836
|
-
var lastOne = deepClone$3(this._queue[this._queue.length - 1]);
|
|
3837
|
-
this._queue = [lastOne];
|
|
3838
|
-
};
|
|
3839
|
-
return Renderer;
|
|
3840
|
-
}(RendererEvent));
|
|
3841
|
-
|
|
3842
|
-
var Mode;
|
|
3843
|
-
(function (Mode) {
|
|
3844
|
-
Mode["NULL"] = "null";
|
|
3845
|
-
Mode["SELECT_ELEMENT"] = "select-element";
|
|
3846
|
-
Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
|
|
3847
|
-
Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
|
|
3848
|
-
Mode["SELECT_AREA"] = "select-area";
|
|
3849
|
-
})(Mode || (Mode = {}));
|
|
3850
|
-
var CursorStatus;
|
|
3851
|
-
(function (CursorStatus) {
|
|
3852
|
-
CursorStatus["DRAGGING"] = "dragging";
|
|
3853
|
-
CursorStatus["NULL"] = "null";
|
|
3854
|
-
})(CursorStatus || (CursorStatus = {}));
|
|
3855
|
-
|
|
3856
|
-
function createData() {
|
|
3857
|
-
return {
|
|
3858
|
-
onlyRender: false,
|
|
3859
|
-
hasInited: false,
|
|
3860
|
-
mode: Mode.NULL,
|
|
3861
|
-
cursorStatus: CursorStatus.NULL,
|
|
3862
|
-
selectedUUID: null,
|
|
3863
|
-
selectedUUIDList: [],
|
|
3864
|
-
hoverUUID: null,
|
|
3865
|
-
selectedControllerDirection: null,
|
|
3866
|
-
hoverControllerDirection: null,
|
|
3867
|
-
prevPoint: null,
|
|
3868
|
-
};
|
|
3869
|
-
}
|
|
3870
|
-
var TempData = (function () {
|
|
3871
|
-
function TempData() {
|
|
3872
|
-
this._temp = createData();
|
|
3873
|
-
}
|
|
3874
|
-
TempData.prototype.set = function (name, value) {
|
|
3875
|
-
this._temp[name] = value;
|
|
3876
|
-
};
|
|
3877
|
-
TempData.prototype.get = function (name) {
|
|
3878
|
-
return this._temp[name];
|
|
3879
|
-
};
|
|
3880
|
-
TempData.prototype.clear = function () {
|
|
3881
|
-
this._temp = createData();
|
|
3882
|
-
};
|
|
3883
|
-
return TempData;
|
|
3884
|
-
}());
|
|
3885
|
-
|
|
3886
|
-
var _board = Symbol('_board');
|
|
3887
|
-
var _data = Symbol('_data');
|
|
3888
|
-
var _opts = Symbol('_opts');
|
|
3889
|
-
var _config = Symbol('_config');
|
|
3890
|
-
var _renderer = Symbol('_renderer');
|
|
3891
|
-
var _element = Symbol('_element');
|
|
3892
|
-
var _helper = Symbol('_helper');
|
|
3893
|
-
var _tempData = Symbol('_tempData');
|
|
3894
|
-
var _draw = Symbol('_draw');
|
|
3895
|
-
var _coreEvent = Symbol('_coreEvent');
|
|
3896
|
-
var _mapper = Symbol('_mapper');
|
|
3897
|
-
var _emitChangeScreen = Symbol('_emitChangeScreen');
|
|
3898
|
-
var _emitChangeData = Symbol('_emitChangeData');
|
|
3899
|
-
var _todo = Symbol('_todo');
|
|
3900
|
-
|
|
3901
|
-
var deepClone$2 = index.data.deepClone;
|
|
3902
|
-
var createUUID = index.uuid.createUUID;
|
|
3903
|
-
function getSelectedElements(core) {
|
|
3904
|
-
var elems = [];
|
|
3905
|
-
var list = [];
|
|
3906
|
-
var uuid = core[_tempData].get('selectedUUID');
|
|
3907
|
-
if (typeof uuid === 'string' && uuid) {
|
|
3908
|
-
list.push(uuid);
|
|
3909
|
-
}
|
|
3910
|
-
else {
|
|
3911
|
-
list = core[_tempData].get('selectedUUIDList');
|
|
3912
|
-
}
|
|
3913
|
-
list.forEach(function (uuid) {
|
|
3914
|
-
var _a;
|
|
3915
|
-
var index = core[_helper].getElementIndexByUUID(uuid);
|
|
3916
|
-
if (index !== null && index >= 0) {
|
|
3917
|
-
var elem = (_a = core[_data]) === null || _a === void 0 ? void 0 : _a.elements[index];
|
|
3918
|
-
if (elem)
|
|
3919
|
-
elems.push(elem);
|
|
3920
|
-
}
|
|
3921
|
-
});
|
|
3922
|
-
return deepClone$2(elems);
|
|
3923
|
-
}
|
|
3924
|
-
function getElement(core, uuid) {
|
|
3925
|
-
var elem = null;
|
|
3926
|
-
var index = core[_helper].getElementIndexByUUID(uuid);
|
|
3927
|
-
if (index !== null && core[_data].elements[index]) {
|
|
3928
|
-
elem = deepClone$2(core[_data].elements[index]);
|
|
3929
|
-
}
|
|
3930
|
-
return elem;
|
|
3931
|
-
}
|
|
3932
|
-
function getElementByIndex(core, index) {
|
|
3933
|
-
var elem = null;
|
|
3934
|
-
if (index >= 0 && core[_data].elements[index]) {
|
|
3935
|
-
elem = deepClone$2(core[_data].elements[index]);
|
|
3936
|
-
}
|
|
3937
|
-
return elem;
|
|
3938
|
-
}
|
|
3939
|
-
function updateElement(core, elem) {
|
|
3940
|
-
var _a;
|
|
3941
|
-
var _elem = deepClone$2(elem);
|
|
3942
|
-
var data = core[_data];
|
|
3943
|
-
var resourceChangeUUIDs = [];
|
|
3944
|
-
for (var i = 0; i < data.elements.length; i++) {
|
|
3945
|
-
if (_elem.uuid === ((_a = data.elements[i]) === null || _a === void 0 ? void 0 : _a.uuid)) {
|
|
3946
|
-
var result = diffElementResourceChange(data.elements[i], _elem);
|
|
3947
|
-
if (typeof result === 'string') {
|
|
3948
|
-
resourceChangeUUIDs.push(result);
|
|
3949
|
-
}
|
|
3950
|
-
data.elements[i] = _elem;
|
|
3951
|
-
break;
|
|
3952
|
-
}
|
|
3953
|
-
}
|
|
3954
|
-
core[_emitChangeData]();
|
|
3955
|
-
core[_draw]({ resourceChangeUUIDs: resourceChangeUUIDs });
|
|
3956
|
-
}
|
|
3957
|
-
function selectElementByIndex(core, index, opts) {
|
|
3958
|
-
if (core[_tempData].get('onlyRender') === true)
|
|
3959
|
-
return;
|
|
3960
|
-
if (core[_data].elements[index]) {
|
|
3961
|
-
var uuid = core[_data].elements[index].uuid;
|
|
3962
|
-
if ((opts === null || opts === void 0 ? void 0 : opts.useMode) === true) {
|
|
3963
|
-
core[_tempData].set('mode', Mode.SELECT_ELEMENT);
|
|
3964
|
-
}
|
|
3965
|
-
else {
|
|
3966
|
-
core[_tempData].set('mode', Mode.NULL);
|
|
3967
|
-
}
|
|
3968
|
-
if (typeof uuid === 'string') {
|
|
3969
|
-
core[_tempData].set('selectedUUID', uuid);
|
|
3970
|
-
core[_tempData].set('selectedUUIDList', []);
|
|
3971
|
-
}
|
|
3972
|
-
core[_draw]();
|
|
3973
|
-
}
|
|
3974
|
-
}
|
|
3975
|
-
function selectElement(core, uuid, opts) {
|
|
3976
|
-
if (core[_tempData].get('onlyRender') === true)
|
|
3977
|
-
return;
|
|
3978
|
-
var index = core[_helper].getElementIndexByUUID(uuid);
|
|
3979
|
-
if (typeof index === 'number' && index >= 0) {
|
|
3980
|
-
core.selectElementByIndex(index, opts);
|
|
3981
|
-
}
|
|
3982
|
-
}
|
|
3983
|
-
function moveUpElement(core, uuid) {
|
|
3984
|
-
var index = core[_helper].getElementIndexByUUID(uuid);
|
|
3985
|
-
if (typeof index === 'number' && index >= 0 && index < core[_data].elements.length - 1) {
|
|
3986
|
-
var temp = core[_data].elements[index];
|
|
3987
|
-
core[_data].elements[index] = core[_data].elements[index + 1];
|
|
3988
|
-
core[_data].elements[index + 1] = temp;
|
|
3989
|
-
}
|
|
3990
|
-
core[_emitChangeData]();
|
|
3991
|
-
core[_draw]();
|
|
3992
|
-
}
|
|
3993
|
-
function moveDownElement(core, uuid) {
|
|
3994
|
-
var index = core[_helper].getElementIndexByUUID(uuid);
|
|
3995
|
-
if (typeof index === 'number' && index > 0 && index < core[_data].elements.length) {
|
|
3996
|
-
var temp = core[_data].elements[index];
|
|
3997
|
-
core[_data].elements[index] = core[_data].elements[index - 1];
|
|
3998
|
-
core[_data].elements[index - 1] = temp;
|
|
3999
|
-
}
|
|
4000
|
-
core[_emitChangeData]();
|
|
4001
|
-
core[_draw]();
|
|
4002
|
-
}
|
|
4003
|
-
function addElement(core, elem) {
|
|
4004
|
-
var _elem = deepClone$2(elem);
|
|
4005
|
-
_elem.uuid = createUUID();
|
|
4006
|
-
core[_data].elements.push(_elem);
|
|
4007
|
-
core[_emitChangeData]();
|
|
4008
|
-
core[_draw]();
|
|
4009
|
-
return _elem.uuid;
|
|
4010
|
-
}
|
|
4011
|
-
function deleteElement(core, uuid) {
|
|
4012
|
-
var index = core[_element].getElementIndex(core[_data], uuid);
|
|
4013
|
-
if (index >= 0) {
|
|
4014
|
-
core[_data].elements.splice(index, 1);
|
|
4015
|
-
core[_emitChangeData]();
|
|
4016
|
-
core[_draw]();
|
|
4017
|
-
}
|
|
4018
|
-
}
|
|
4019
|
-
function insertElementBefore(core, elem, beforeUUID) {
|
|
4020
|
-
var index = core[_helper].getElementIndexByUUID(beforeUUID);
|
|
4021
|
-
if (index !== null) {
|
|
4022
|
-
return core.insertElementBeforeIndex(elem, index);
|
|
4023
|
-
}
|
|
4024
|
-
return null;
|
|
4025
|
-
}
|
|
4026
|
-
function insertElementBeforeIndex(core, elem, index) {
|
|
4027
|
-
var _elem = deepClone$2(elem);
|
|
4028
|
-
_elem.uuid = createUUID();
|
|
4029
|
-
if (index >= 0) {
|
|
4030
|
-
core[_data].elements.splice(index, 0, _elem);
|
|
4031
|
-
core[_emitChangeData]();
|
|
4032
|
-
core[_draw]();
|
|
4033
|
-
return _elem.uuid;
|
|
4034
|
-
}
|
|
4035
|
-
return null;
|
|
4036
|
-
}
|
|
4037
|
-
function insertElementAfter(core, elem, beforeUUID) {
|
|
4038
|
-
var index = core[_helper].getElementIndexByUUID(beforeUUID);
|
|
4039
|
-
if (index !== null) {
|
|
4040
|
-
return core.insertElementAfterIndex(elem, index);
|
|
4041
|
-
}
|
|
4042
|
-
return null;
|
|
4043
|
-
}
|
|
4044
|
-
function insertElementAfterIndex(core, elem, index) {
|
|
4045
|
-
var _elem = deepClone$2(elem);
|
|
4046
|
-
_elem.uuid = createUUID();
|
|
4047
|
-
if (index >= 0) {
|
|
4048
|
-
core[_data].elements.splice(index + 1, 0, _elem);
|
|
4049
|
-
core[_emitChangeData]();
|
|
4050
|
-
core[_draw]();
|
|
4051
|
-
return _elem.uuid;
|
|
4052
|
-
}
|
|
4053
|
-
return null;
|
|
4054
|
-
}
|
|
4055
|
-
|
|
4056
|
-
var time = index.time;
|
|
4057
|
-
var deepClone$1 = index.data.deepClone;
|
|
4058
|
-
function initEvent(core) {
|
|
4059
|
-
if (core[_tempData].get('hasInited') === true) {
|
|
4060
|
-
return;
|
|
4061
|
-
}
|
|
4062
|
-
core[_board].on('hover', time.throttle(handleHover(core), 32));
|
|
4063
|
-
core[_board].on('leave', time.throttle(handleLeave(core), 32));
|
|
4064
|
-
core[_board].on('point', time.throttle(handleClick(core), 16));
|
|
4065
|
-
core[_board].on('doubleClick', handleDoubleClick(core));
|
|
4066
|
-
if (core[_tempData].get('onlyRender') === true) {
|
|
4067
|
-
return;
|
|
4068
|
-
}
|
|
4069
|
-
core[_board].on('point', handlePoint(core));
|
|
4070
|
-
core[_board].on('moveStart', handleMoveStart(core));
|
|
4071
|
-
core[_board].on('move', time.throttle(handleMove(core), 16));
|
|
4072
|
-
core[_board].on('moveEnd', handleMoveEnd(core));
|
|
4073
|
-
core[_renderer].on('drawFrame', function () {
|
|
4074
|
-
core[_coreEvent].trigger('drawFrame', undefined);
|
|
4075
|
-
});
|
|
4076
|
-
core[_renderer].on('drawFrameComplete', function () {
|
|
4077
|
-
core[_coreEvent].trigger('drawFrameComplete', undefined);
|
|
4078
|
-
});
|
|
4079
|
-
core[_tempData].set('hasInited', true);
|
|
4080
|
-
}
|
|
4081
|
-
function handleDoubleClick(core) {
|
|
4082
|
-
return function (point) {
|
|
4083
|
-
var _a, _b, _c;
|
|
4084
|
-
var _d = core[_element].isPointInElement(point, core[_data]), index = _d[0], uuid = _d[1];
|
|
4085
|
-
if (index >= 0 && uuid) {
|
|
4086
|
-
var elem = deepClone$1((_a = core[_data].elements) === null || _a === void 0 ? void 0 : _a[index]);
|
|
4087
|
-
if (((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
|
|
4088
|
-
core[_coreEvent].trigger('screenDoubleClickElement', { index: index, uuid: uuid, element: deepClone$1((_c = core[_data].elements) === null || _c === void 0 ? void 0 : _c[index]) });
|
|
4089
|
-
}
|
|
4090
|
-
}
|
|
4091
|
-
core[_draw]();
|
|
4092
|
-
};
|
|
4093
|
-
}
|
|
4094
|
-
function handlePoint(core) {
|
|
4095
|
-
return function (point) {
|
|
4096
|
-
var _a, _b, _c;
|
|
4097
|
-
if (!core[_mapper].isEffectivePoint(point)) {
|
|
4098
|
-
return;
|
|
4099
|
-
}
|
|
4100
|
-
if (core[_helper].isPointInElementList(point, core[_data])) {
|
|
4101
|
-
core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST);
|
|
4102
|
-
}
|
|
4103
|
-
else {
|
|
4104
|
-
var _d = core[_helper].isPointInElementWrapperController(point, core[_data]), uuid = _d.uuid, selectedControllerDirection = _d.selectedControllerDirection;
|
|
4105
|
-
if (uuid && selectedControllerDirection) {
|
|
4106
|
-
core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
|
|
4107
|
-
core[_tempData].set('selectedControllerDirection', selectedControllerDirection);
|
|
4108
|
-
core[_tempData].set('selectedUUID', uuid);
|
|
4109
|
-
}
|
|
4110
|
-
else {
|
|
4111
|
-
var _e = core[_element].isPointInElement(point, core[_data]), index = _e[0], uuid_1 = _e[1];
|
|
4112
|
-
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) {
|
|
4113
|
-
core.selectElementByIndex(index, { useMode: true });
|
|
4114
|
-
if (typeof uuid_1 === 'string' && core[_coreEvent].has('screenSelectElement')) {
|
|
4115
|
-
core[_coreEvent].trigger('screenSelectElement', { index: index, uuid: uuid_1, element: deepClone$1((_c = core[_data].elements) === null || _c === void 0 ? void 0 : _c[index]) });
|
|
4116
|
-
core[_emitChangeScreen]();
|
|
4117
|
-
}
|
|
4118
|
-
core[_tempData].set('mode', Mode.SELECT_ELEMENT);
|
|
4119
|
-
}
|
|
4120
|
-
else {
|
|
4121
|
-
core[_tempData].set('selectedUUIDList', []);
|
|
4122
|
-
core[_tempData].set('selectedUUID', null);
|
|
4123
|
-
core[_tempData].set('mode', Mode.SELECT_AREA);
|
|
4124
|
-
}
|
|
4125
|
-
}
|
|
4126
|
-
}
|
|
4127
|
-
core[_draw]();
|
|
4128
|
-
};
|
|
4129
|
-
}
|
|
4130
|
-
function handleClick(core) {
|
|
4131
|
-
return function (point) {
|
|
4132
|
-
var _a;
|
|
4133
|
-
var _b = core[_element].isPointInElement(point, core[_data]), index = _b[0], uuid = _b[1];
|
|
4134
|
-
if (index >= 0 && uuid) {
|
|
4135
|
-
core[_coreEvent].trigger('screenClickElement', { index: index, uuid: uuid, element: deepClone$1((_a = core[_data].elements) === null || _a === void 0 ? void 0 : _a[index]) });
|
|
4136
|
-
}
|
|
4137
|
-
core[_draw]();
|
|
4138
|
-
};
|
|
4139
|
-
}
|
|
4140
|
-
function handleMoveStart(core) {
|
|
4141
|
-
return function (point) {
|
|
4142
|
-
core[_tempData].set('prevPoint', point);
|
|
4143
|
-
var uuid = core[_tempData].get('selectedUUID');
|
|
4144
|
-
if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_LIST) ;
|
|
4145
|
-
else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT) {
|
|
4146
|
-
if (typeof uuid === 'string' && core[_coreEvent].has('screenMoveElementStart')) {
|
|
4147
|
-
core[_coreEvent].trigger('screenMoveElementStart', {
|
|
4148
|
-
index: core[_element].getElementIndex(core[_data], uuid),
|
|
4149
|
-
uuid: uuid,
|
|
4150
|
-
x: point.x,
|
|
4151
|
-
y: point.y
|
|
4152
|
-
});
|
|
4153
|
-
}
|
|
4154
|
-
}
|
|
4155
|
-
else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
|
|
4156
|
-
core[_helper].startSelectArea(point);
|
|
4157
|
-
}
|
|
4158
|
-
};
|
|
4159
|
-
}
|
|
4160
|
-
function handleMove(core) {
|
|
4161
|
-
return function (point) {
|
|
4162
|
-
if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_LIST) {
|
|
4163
|
-
dragElements(core, core[_tempData].get('selectedUUIDList'), point, core[_tempData].get('prevPoint'));
|
|
4164
|
-
core[_draw]();
|
|
4165
|
-
core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
|
|
4166
|
-
}
|
|
4167
|
-
else if (typeof core[_tempData].get('selectedUUID') === 'string') {
|
|
4168
|
-
if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT) {
|
|
4169
|
-
dragElements(core, [core[_tempData].get('selectedUUID')], point, core[_tempData].get('prevPoint'));
|
|
4170
|
-
core[_draw]();
|
|
4171
|
-
core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
|
|
4172
|
-
}
|
|
4173
|
-
else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && core[_tempData].get('selectedControllerDirection')) {
|
|
4174
|
-
transfromElement(core, core[_tempData].get('selectedUUID'), point, core[_tempData].get('prevPoint'), core[_tempData].get('selectedControllerDirection'));
|
|
4175
|
-
core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
|
|
4176
|
-
}
|
|
4177
|
-
}
|
|
4178
|
-
else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
|
|
4179
|
-
core[_helper].changeSelectArea(point);
|
|
4180
|
-
core[_draw]();
|
|
4181
|
-
}
|
|
4182
|
-
core[_tempData].set('prevPoint', point);
|
|
4183
|
-
};
|
|
4184
|
-
}
|
|
4185
|
-
function dragElements(core, uuids, point, prevPoint) {
|
|
4186
|
-
if (!prevPoint) {
|
|
4187
|
-
return;
|
|
4188
|
-
}
|
|
4189
|
-
uuids.forEach(function (uuid) {
|
|
4190
|
-
var _a, _b;
|
|
4191
|
-
var idx = core[_helper].getElementIndexByUUID(uuid);
|
|
4192
|
-
if (idx === null)
|
|
4193
|
-
return;
|
|
4194
|
-
var elem = core[_data].elements[idx];
|
|
4195
|
-
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) {
|
|
4196
|
-
core[_element].dragElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale);
|
|
4197
|
-
}
|
|
4198
|
-
});
|
|
4199
|
-
core[_draw]();
|
|
4200
|
-
}
|
|
4201
|
-
function handleMoveEnd(core) {
|
|
4202
|
-
return function (point) {
|
|
4203
|
-
var uuid = core[_tempData].get('selectedUUID');
|
|
4204
|
-
if (typeof uuid === 'string') {
|
|
4205
|
-
var index = core[_element].getElementIndex(core[_data], uuid);
|
|
4206
|
-
var elem = core[_data].elements[index];
|
|
4207
|
-
if (elem) {
|
|
4208
|
-
if (core[_coreEvent].has('screenMoveElementEnd')) {
|
|
4209
|
-
core[_coreEvent].trigger('screenMoveElementEnd', {
|
|
4210
|
-
index: index,
|
|
4211
|
-
uuid: uuid,
|
|
4212
|
-
x: point.x,
|
|
4213
|
-
y: point.y
|
|
4214
|
-
});
|
|
4215
|
-
}
|
|
4216
|
-
if (core[_coreEvent].has('screenChangeElement')) {
|
|
4217
|
-
core[_coreEvent].trigger('screenChangeElement', {
|
|
4218
|
-
index: index,
|
|
4219
|
-
uuid: uuid,
|
|
4220
|
-
width: elem.w,
|
|
4221
|
-
height: elem.h,
|
|
4222
|
-
angle: elem.angle || 0
|
|
4223
|
-
});
|
|
4224
|
-
}
|
|
4225
|
-
core[_emitChangeData]();
|
|
4226
|
-
}
|
|
4227
|
-
}
|
|
4228
|
-
else if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
|
|
4229
|
-
var uuids = core[_helper].calcSelectedElements(core[_data]);
|
|
4230
|
-
if (uuids.length > 0) {
|
|
4231
|
-
core[_tempData].set('selectedUUIDList', uuids);
|
|
4232
|
-
core[_tempData].set('selectedUUID', null);
|
|
4233
|
-
}
|
|
4234
|
-
else {
|
|
4235
|
-
core[_tempData].set('mode', Mode.NULL);
|
|
4236
|
-
}
|
|
4237
|
-
core[_helper].clearSelectedArea();
|
|
4238
|
-
core[_draw]();
|
|
4239
|
-
}
|
|
4240
|
-
if (core[_tempData].get('mode') !== Mode.SELECT_ELEMENT) {
|
|
4241
|
-
core[_tempData].set('selectedUUID', null);
|
|
4242
|
-
}
|
|
4243
|
-
core[_tempData].set('cursorStatus', CursorStatus.NULL);
|
|
4244
|
-
core[_tempData].set('mode', Mode.NULL);
|
|
4245
|
-
};
|
|
4246
|
-
}
|
|
4247
|
-
function handleHover(core) {
|
|
4248
|
-
return function (point) {
|
|
4249
|
-
var _a, _b;
|
|
4250
|
-
var isMouseOverElement = false;
|
|
4251
|
-
if (core[_tempData].get('mode') === Mode.SELECT_AREA) {
|
|
4252
|
-
if (core[_tempData].get('onlyRender') !== true)
|
|
4253
|
-
core[_board].resetCursor();
|
|
4254
|
-
}
|
|
4255
|
-
else if (core[_tempData].get('cursorStatus') === CursorStatus.NULL) {
|
|
4256
|
-
var _c = core[_mapper].judgePointCursor(point, core[_data]), cursor = _c.cursor, elementUUID = _c.elementUUID;
|
|
4257
|
-
if (core[_tempData].get('onlyRender') !== true)
|
|
4258
|
-
core[_board].setCursor(cursor);
|
|
4259
|
-
if (elementUUID) {
|
|
4260
|
-
var index = core[_helper].getElementIndexByUUID(elementUUID);
|
|
4261
|
-
if (index !== null && index >= 0) {
|
|
4262
|
-
var elem = core[_data].elements[index];
|
|
4263
|
-
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) {
|
|
4264
|
-
core[_board].resetCursor();
|
|
4265
|
-
return;
|
|
4266
|
-
}
|
|
4267
|
-
if (core[_tempData].get('hoverUUID') !== elem.uuid) {
|
|
4268
|
-
var preIndex = core[_helper].getElementIndexByUUID(core[_tempData].get('hoverUUID') || '');
|
|
4269
|
-
if (preIndex !== null && core[_data].elements[preIndex]) {
|
|
4270
|
-
core[_coreEvent].trigger('mouseLeaveElement', {
|
|
4271
|
-
uuid: core[_tempData].get('hoverUUID'),
|
|
4272
|
-
index: preIndex,
|
|
4273
|
-
element: core[_data].elements[preIndex]
|
|
4274
|
-
});
|
|
4275
|
-
}
|
|
4276
|
-
}
|
|
4277
|
-
if (elem) {
|
|
4278
|
-
core[_coreEvent].trigger('mouseOverElement', { uuid: elem.uuid, index: index, element: elem, });
|
|
4279
|
-
core[_tempData].set('hoverUUID', elem.uuid);
|
|
4280
|
-
isMouseOverElement = true;
|
|
4281
|
-
}
|
|
4282
|
-
}
|
|
4283
|
-
}
|
|
4284
|
-
}
|
|
4285
|
-
if (isMouseOverElement !== true && core[_tempData].get('hoverUUID') !== null) {
|
|
4286
|
-
var uuid = core[_tempData].get('hoverUUID');
|
|
4287
|
-
var index = core[_helper].getElementIndexByUUID(uuid || '');
|
|
4288
|
-
if (index !== null)
|
|
4289
|
-
core[_coreEvent].trigger('mouseLeaveElement', { uuid: uuid, index: index, element: core[_data].elements[index] });
|
|
4290
|
-
core[_tempData].set('hoverUUID', null);
|
|
4291
|
-
}
|
|
4292
|
-
if (core[_coreEvent].has('mouseOverScreen'))
|
|
4293
|
-
core[_coreEvent].trigger('mouseOverScreen', point);
|
|
4294
|
-
};
|
|
4295
|
-
}
|
|
4296
|
-
function handleLeave(core) {
|
|
4297
|
-
return function () {
|
|
4298
|
-
if (core[_coreEvent].has('mouseLeaveScreen')) {
|
|
4299
|
-
core[_coreEvent].trigger('mouseLeaveScreen', undefined);
|
|
4300
|
-
}
|
|
4301
|
-
};
|
|
4302
|
-
}
|
|
4303
|
-
function transfromElement(core, uuid, point, prevPoint, direction) {
|
|
4304
|
-
if (!prevPoint) {
|
|
4305
|
-
return null;
|
|
4306
|
-
}
|
|
4307
|
-
var result = core[_element].transformElement(core[_data], uuid, point, prevPoint, core[_board].getContext().getTransform().scale, direction);
|
|
4308
|
-
core[_draw]();
|
|
4309
|
-
return result;
|
|
4310
|
-
}
|
|
4311
|
-
|
|
4312
|
-
var deepClone = index.data.deepClone;
|
|
4313
|
-
var Core = (function () {
|
|
4314
|
-
function Core(mount, opts, config) {
|
|
4315
|
-
var _c, _d, _e;
|
|
4316
|
-
this[_a] = new CoreEvent();
|
|
4317
|
-
this[_b] = new TempData();
|
|
4318
|
-
this[_data] = { elements: [] };
|
|
4319
|
-
this[_opts] = opts;
|
|
4320
|
-
this[_tempData].set('onlyRender', opts.onlyRender === true);
|
|
4321
|
-
this[_config] = mergeConfig(config || {});
|
|
4322
|
-
this[_board] = new Board(mount, __assign$1(__assign$1({}, this[_opts]), { canScroll: (_c = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _c === void 0 ? void 0 : _c.use, scrollConfig: {
|
|
4323
|
-
color: ((_d = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _d === void 0 ? void 0 : _d.color) || '#a0a0a0',
|
|
4324
|
-
lineWidth: ((_e = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _e === void 0 ? void 0 : _e.lineWidth) || 12,
|
|
4325
|
-
} }));
|
|
4326
|
-
this[_renderer] = new Renderer(this[_board]);
|
|
4327
|
-
this[_element] = new Element(this[_board].getContext());
|
|
4328
|
-
this[_helper] = new Helper(this[_board], this[_config]);
|
|
4329
|
-
this[_mapper] = new Mapper({
|
|
4330
|
-
board: this[_board],
|
|
4331
|
-
helper: this[_helper],
|
|
4332
|
-
element: this[_element]
|
|
4333
|
-
});
|
|
4334
|
-
initEvent(this);
|
|
4335
|
-
}
|
|
4336
|
-
Core.prototype[(_a = _coreEvent, _b = _tempData, _draw)] = function (opts) {
|
|
4337
|
-
var _c, _d;
|
|
4338
|
-
var transfrom = this[_board].getTransform();
|
|
4339
|
-
this[_helper].updateConfig(this[_data], {
|
|
4340
|
-
width: this[_opts].width,
|
|
4341
|
-
height: this[_opts].height,
|
|
4342
|
-
canScroll: ((_d = (_c = this[_config]) === null || _c === void 0 ? void 0 : _c.scrollWrapper) === null || _d === void 0 ? void 0 : _d.use) === true,
|
|
4343
|
-
selectedUUID: this[_tempData].get('selectedUUID'),
|
|
4344
|
-
selectedUUIDList: this[_tempData].get('selectedUUIDList'),
|
|
4345
|
-
devicePixelRatio: this[_opts].devicePixelRatio,
|
|
4346
|
-
scale: transfrom.scale,
|
|
4347
|
-
scrollX: transfrom.scrollX,
|
|
4348
|
-
scrollY: transfrom.scrollY,
|
|
4349
|
-
});
|
|
4350
|
-
this[_renderer].thaw();
|
|
4351
|
-
this[_renderer].render(this[_data], this[_helper].getConfig(), (opts === null || opts === void 0 ? void 0 : opts.resourceChangeUUIDs) || []);
|
|
4352
|
-
};
|
|
4353
|
-
Core.prototype.getElement = function (uuid) {
|
|
4354
|
-
return getElement(this, uuid);
|
|
4355
|
-
};
|
|
4356
|
-
Core.prototype.getElementByIndex = function (index) {
|
|
4357
|
-
return getElementByIndex(this, index);
|
|
4358
|
-
};
|
|
4359
|
-
Core.prototype.selectElementByIndex = function (index, opts) {
|
|
4360
|
-
return selectElementByIndex(this, index, opts);
|
|
4361
|
-
};
|
|
4362
|
-
Core.prototype.selectElement = function (uuid, opts) {
|
|
4363
|
-
return selectElement(this, uuid, opts);
|
|
4364
|
-
};
|
|
4365
|
-
Core.prototype.moveUpElement = function (uuid) {
|
|
4366
|
-
return moveUpElement(this, uuid);
|
|
4367
|
-
};
|
|
4368
|
-
Core.prototype.moveDownElement = function (uuid) {
|
|
4369
|
-
return moveDownElement(this, uuid);
|
|
4370
|
-
};
|
|
4371
|
-
Core.prototype.updateElement = function (elem) {
|
|
4372
|
-
return updateElement(this, elem);
|
|
4373
|
-
};
|
|
4374
|
-
Core.prototype.addElement = function (elem) {
|
|
4375
|
-
return addElement(this, elem);
|
|
4376
|
-
};
|
|
4377
|
-
Core.prototype.deleteElement = function (uuid) {
|
|
4378
|
-
return deleteElement(this, uuid);
|
|
4379
|
-
};
|
|
4380
|
-
Core.prototype.insertElementBefore = function (elem, beforeUUID) {
|
|
4381
|
-
return insertElementBefore(this, elem, beforeUUID);
|
|
4382
|
-
};
|
|
4383
|
-
Core.prototype.insertElementBeforeIndex = function (elem, index) {
|
|
4384
|
-
return insertElementBeforeIndex(this, elem, index);
|
|
4385
|
-
};
|
|
4386
|
-
Core.prototype.getSelectedElements = function () {
|
|
4387
|
-
return getSelectedElements(this);
|
|
4388
|
-
};
|
|
4389
|
-
Core.prototype.insertElementAfter = function (elem, beforeUUID) {
|
|
4390
|
-
return insertElementAfter(this, elem, beforeUUID);
|
|
4391
|
-
};
|
|
4392
|
-
Core.prototype.insertElementAfterIndex = function (elem, index) {
|
|
4393
|
-
return insertElementAfterIndex(this, elem, index);
|
|
4394
|
-
};
|
|
4395
|
-
Core.prototype.resetSize = function (opts) {
|
|
4396
|
-
this[_opts] = __assign$1(__assign$1({}, this[_opts]), opts);
|
|
4397
|
-
this[_board].resetSize(opts);
|
|
4398
|
-
this[_draw]();
|
|
4399
|
-
};
|
|
4400
|
-
Core.prototype.scale = function (ratio) {
|
|
4401
|
-
var screen = this[_board].scale(ratio);
|
|
4402
|
-
this[_draw]();
|
|
4403
|
-
this[_emitChangeScreen]();
|
|
4404
|
-
return screen;
|
|
4405
|
-
};
|
|
4406
|
-
Core.prototype.scrollLeft = function (left) {
|
|
4407
|
-
var screen = this[_board].scrollX(0 - left);
|
|
4408
|
-
this[_draw]();
|
|
4409
|
-
this[_emitChangeScreen]();
|
|
4410
|
-
return screen;
|
|
4411
|
-
};
|
|
4412
|
-
Core.prototype.scrollTop = function (top) {
|
|
4413
|
-
var screen = this[_board].scrollY(0 - top);
|
|
4414
|
-
this[_draw]();
|
|
4415
|
-
this[_emitChangeScreen]();
|
|
4416
|
-
return screen;
|
|
4417
|
-
};
|
|
4418
|
-
Core.prototype.getScreenTransform = function () {
|
|
4419
|
-
var transform = this[_board].getTransform();
|
|
4420
|
-
return {
|
|
4421
|
-
scale: transform.scale,
|
|
4422
|
-
scrollTop: Math.max(0, 0 - transform.scrollY),
|
|
4423
|
-
scrollLeft: Math.max(0, 0 - transform.scrollX),
|
|
4424
|
-
};
|
|
4425
|
-
};
|
|
4426
|
-
Core.prototype.getData = function () {
|
|
4427
|
-
return deepClone(this[_data]);
|
|
4428
|
-
};
|
|
4429
|
-
Core.prototype.setData = function (data, opts) {
|
|
4430
|
-
var resourceChangeUUIDs = diffElementResourceChangeList(this[_data], data);
|
|
4431
|
-
this[_data] = this[_element].initData(deepClone(parseData(data)));
|
|
4432
|
-
if (opts && opts.triggerChangeEvent === true) {
|
|
4433
|
-
this[_emitChangeData]();
|
|
4434
|
-
}
|
|
4435
|
-
this[_draw]({ resourceChangeUUIDs: resourceChangeUUIDs });
|
|
4436
|
-
};
|
|
4437
|
-
Core.prototype.clearOperation = function () {
|
|
4438
|
-
this[_tempData].clear();
|
|
4439
|
-
this[_tempData].set('onlyRender', this[_opts].onlyRender === true);
|
|
4440
|
-
this[_draw]();
|
|
4441
|
-
};
|
|
4442
|
-
Core.prototype.on = function (key, callback) {
|
|
4443
|
-
this[_coreEvent].on(key, callback);
|
|
4444
|
-
};
|
|
4445
|
-
Core.prototype.off = function (key, callback) {
|
|
4446
|
-
this[_coreEvent].off(key, callback);
|
|
4447
|
-
};
|
|
4448
|
-
Core.prototype.pointScreenToContext = function (p) {
|
|
4449
|
-
return this[_board].pointScreenToContext(p);
|
|
4450
|
-
};
|
|
4451
|
-
Core.prototype.pointContextToScreen = function (p) {
|
|
4452
|
-
return this[_board].pointContextToScreen(p);
|
|
4453
|
-
};
|
|
4454
|
-
Core.prototype.setOnlyRender = function () {
|
|
4455
|
-
this[_tempData].set('onlyRender', true);
|
|
4456
|
-
};
|
|
4457
|
-
Core.prototype.cancelOnlyRender = function () {
|
|
4458
|
-
this[_tempData].set('onlyRender', false);
|
|
4459
|
-
};
|
|
4460
|
-
Core.prototype.__getBoardContext = function () {
|
|
4461
|
-
return this[_board].getContext();
|
|
4462
|
-
};
|
|
4463
|
-
Core.prototype.__getDisplayContext = function () {
|
|
4464
|
-
return this[_board].getDisplayContext();
|
|
4465
|
-
};
|
|
4466
|
-
Core.prototype.__getOriginContext = function () {
|
|
4467
|
-
return this[_board].getOriginContext();
|
|
4468
|
-
};
|
|
4469
|
-
Core.prototype[_emitChangeScreen] = function () {
|
|
4470
|
-
if (this[_coreEvent].has('changeScreen')) {
|
|
4471
|
-
this[_coreEvent].trigger('changeScreen', __assign$1({}, this.getScreenTransform()));
|
|
4472
|
-
}
|
|
4473
|
-
};
|
|
4474
|
-
Core.prototype[_emitChangeData] = function () {
|
|
4475
|
-
if (this[_coreEvent].has('changeData')) {
|
|
4476
|
-
this[_coreEvent].trigger('changeData', deepClone(this[_data]));
|
|
4477
|
-
}
|
|
4478
|
-
};
|
|
4479
|
-
Core.prototype[_todo] = function () {
|
|
4480
|
-
console.log(this[_mapper]);
|
|
4481
|
-
};
|
|
4482
|
-
var _a, _b;
|
|
4483
|
-
Core.is = is;
|
|
4484
|
-
Core.check = check;
|
|
4485
|
-
return Core;
|
|
4486
|
-
}());
|
|
4487
|
-
|
|
4488
|
-
return Core;
|
|
4489
|
-
|
|
4490
|
-
})();
|
|
1
|
+
var iDrawCore=function(){'use strict';var t=function(){return t=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},t.apply(this,arguments)},e=function(){return e=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},e.apply(this,arguments)};function n(t){return'string'==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function o(t){return(Object.prototype.toString.call(t)||'').replace(/(\[object|\])/gi,'').trim()}var i={type:function(t,e){var n=o(t);return!0===e?n.toLocaleLowerCase():n},array:function(t){return'Array'===o(t)},json:function(t){return'Object'===o(t)},function:function(t){return'Function'===o(t)},asyncFunction:function(t){return'AsyncFunction'===o(t)},string:function(t){return'String'===o(t)},number:function(t){return'Number'===o(t)},undefined:function(t){return'Undefined'===o(t)},null:function(t){return'Null'===o(t)},promise:function(t){return'Promise'===o(t)}},r=function(){return r=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},r.apply(this,arguments)};function s(t,e,n,o){return new(n||(n=Promise))((function(i,r){function s(t){try{a(o.next(t))}catch(t){r(t)}}function l(t){try{a(o.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,l)}a((o=o.apply(t,e||[])).next())}))}function l(t,e){var n,o,i,r,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,o=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(i=s.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){s=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){s.label=r[1];break}if(6===r[0]&&s.label<i[1]){s.label=i[1],i=r;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(r);break}i[2]&&s.ops.pop(),s.trys.pop();continue}r=e.call(t,s)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}function a(t,e){var n=e.width,o=e.height;return new Promise((function(e,i){var r=new Blob(["\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\""+(n||'')+"\" height = \""+(o||'')+"\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n "+t+"\n </div>\n </foreignObject>\n </svg>\n "],{type:'image/svg+xml;charset=utf-8'}),s=new FileReader;s.readAsDataURL(r),s.onload=function(t){var n,o=null===(n=null==t?void 0:t.target)||void 0===n?void 0:n.result;e(o)},s.onerror=function(t){i(t)}}))}function c(t){return new Promise((function(e,n){var o=new Blob([t],{type:'image/svg+xml;charset=utf-8'}),i=new FileReader;i.readAsDataURL(o),i.onload=function(t){var n,o=null===(n=null==t?void 0:t.target)||void 0===n?void 0:n.result;e(o)},i.onerror=function(t){n(t)}}))}var h=window.Image;function u(t){return new Promise((function(e,n){var o=new h;o.onload=function(){e(o)},o.onabort=n,o.onerror=n,o.src=t}))}var f=function(){function t(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}return t.prototype.getContext=function(){return this._ctx},t.prototype.resetSize=function(t){this._opts=r(r({},this._opts),t)},t.prototype.calcDeviceNum=function(t){return t*this._opts.devicePixelRatio},t.prototype.calcScreenNum=function(t){return t/this._opts.devicePixelRatio},t.prototype.getSize=function(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}},t.prototype.setTransform=function(t){this._transform=r(r({},this._transform),t)},t.prototype.getTransform=function(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}},t.prototype.setFillStyle=function(t){this._ctx.fillStyle=t},t.prototype.fill=function(t){return this._ctx.fill(t||'nonzero')},t.prototype.arc=function(t,e,n,o,i,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(n),o,i,r)},t.prototype.rect=function(t,e,n,o){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.fillRect=function(t,e,n,o){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.clearRect=function(t,e,n,o){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.beginPath=function(){return this._ctx.beginPath()},t.prototype.closePath=function(){return this._ctx.closePath()},t.prototype.lineTo=function(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))},t.prototype.moveTo=function(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))},t.prototype.arcTo=function(t,e,n,o,i){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o),this._doSize(i))},t.prototype.setLineWidth=function(t){return this._ctx.lineWidth=this._doSize(t)},t.prototype.setLineDash=function(t){var e=this;return this._ctx.setLineDash(t.map((function(t){return e._doSize(t)})))},t.prototype.isPointInPath=function(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))},t.prototype.isPointInPathWithoutScroll=function(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))},t.prototype.setStrokeStyle=function(t){this._ctx.strokeStyle=t},t.prototype.stroke=function(){return this._ctx.stroke()},t.prototype.translate=function(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))},t.prototype.rotate=function(t){return this._ctx.rotate(t)},t.prototype.drawImage=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=t[1],i=t[2],r=t[3],s=t[4],l=t[t.length-4],a=t[t.length-3],c=t[t.length-2],h=t[t.length-1];return 9===t.length?this._ctx.drawImage(n,this._doSize(o),this._doSize(i),this._doSize(r),this._doSize(s),this._doSize(l),this._doSize(a),this._doSize(c),this._doSize(h)):this._ctx.drawImage(n,this._doSize(l),this._doSize(a),this._doSize(c),this._doSize(h))},t.prototype.createPattern=function(t,e){return this._ctx.createPattern(t,e)},t.prototype.measureText=function(t){return this._ctx.measureText(t)},t.prototype.setTextAlign=function(t){this._ctx.textAlign=t},t.prototype.fillText=function(t,e,n,o){return void 0!==o?this._ctx.fillText(t,this._doSize(e),this._doSize(n),this._doSize(o)):this._ctx.fillText(t,this._doSize(e),this._doSize(n))},t.prototype.strokeText=function(t,e,n,o){return void 0!==o?this._ctx.strokeText(t,this._doSize(e),this._doSize(n),this._doSize(o)):this._ctx.strokeText(t,this._doSize(e),this._doSize(n))},t.prototype.setFont=function(t){var e=[];'bold'===t.fontWeight&&e.push(""+t.fontWeight),e.push(this._doSize(t.fontSize||12)+"px"),e.push(""+(t.fontFamily||'sans-serif')),this._ctx.font=""+e.join(' ')},t.prototype.setTextBaseline=function(t){this._ctx.textBaseline=t},t.prototype.setGlobalAlpha=function(t){this._ctx.globalAlpha=t},t.prototype.save=function(){this._ctx.save()},t.prototype.restore=function(){this._ctx.restore()},t.prototype.scale=function(t,e){this._ctx.scale(t,e)},t.prototype.setShadowColor=function(t){this._ctx.shadowColor=t},t.prototype.setShadowOffsetX=function(t){this._ctx.shadowOffsetX=this._doSize(t)},t.prototype.setShadowOffsetY=function(t){this._ctx.shadowOffsetY=this._doSize(t)},t.prototype.setShadowBlur=function(t){this._ctx.shadowBlur=this._doSize(t)},t.prototype.ellipse=function(t,e,n,o,i,r,s,l){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o),i,r,s,l)},t.prototype._doSize=function(t){return this._opts.devicePixelRatio*t},t.prototype._doX=function(t){var e=this._transform,n=e.scale,o=(t-e.scrollX)/n;return this._doSize(o)},t.prototype._doY=function(t){var e=this._transform,n=e.scale,o=(t-e.scrollY)/n;return this._doSize(o)},t}();function d(t){return'number'==typeof t&&(t>0||t<=0)}function p(t){return'number'==typeof t&&t>=0}function v(t){return'string'==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(""+t)}function g(t){return'string'==typeof t&&/^(data:image\/)/.test(""+t)}var m={x:function(t){return d(t)},y:function(t){return d(t)},w:p,h:function(t){return'number'==typeof t&&t>=0},angle:function(t){return'number'==typeof t&&t>=-360&&t<=360},number:d,borderWidth:function(t){return p(t)},borderRadius:function(t){return d(t)&&t>=0},color:function(t){return n(t)},imageSrc:function(t){return g(t)||v(t)},imageURL:v,imageBase64:g,svg:function(t){return'string'==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test((""+t).trim())&&/<\/[\s]{0,}svg>$/i.test((""+t).trim())},html:function(t){var e=!1;if('string'==typeof t){var n=document.createElement('div');n.innerHTML=t,n.children.length>0&&(e=!0),n=null}return e},text:function(t){return'string'==typeof t},fontSize:function(t){return d(t)&&t>0},lineHeight:function(t){return d(t)&&t>0},textAlign:function(t){return['center','left','right'].includes(t)},fontFamily:function(t){return'string'==typeof t&&t.length>0},fontWeight:function(t){return['bold'].includes(t)},strokeWidth:function(t){return d(t)&&t>0}};function y(t){void 0===t&&(t={});var e=t.borderColor,n=t.borderRadius,o=t.borderWidth;return!(t.hasOwnProperty('borderColor')&&!m.color(e))&&(!(t.hasOwnProperty('borderRadius')&&!m.number(n))&&!(t.hasOwnProperty('borderWidth')&&!m.number(o)))}var _={attrs:function(t){var e=t.x,n=t.y,o=t.w,i=t.h,r=t.angle;return!!(m.x(e)&&m.y(n)&&m.w(o)&&m.h(i)&&m.angle(r))&&(r>=-360&&r<=360)},textDesc:function(t){var e=t.text,n=t.color,o=t.fontSize,i=t.lineHeight,r=t.fontFamily,s=t.textAlign,l=t.fontWeight,a=t.bgColor,c=t.strokeWidth,h=t.strokeColor;return!!m.text(e)&&(!!m.color(n)&&(!!m.fontSize(o)&&(!(t.hasOwnProperty('bgColor')&&!m.color(a))&&(!(t.hasOwnProperty('fontWeight')&&!m.fontWeight(l))&&(!(t.hasOwnProperty('lineHeight')&&!m.lineHeight(i))&&(!(t.hasOwnProperty('fontFamily')&&!m.fontFamily(r))&&(!(t.hasOwnProperty('textAlign')&&!m.textAlign(s))&&(!(t.hasOwnProperty('strokeWidth')&&!m.strokeWidth(c))&&(!(t.hasOwnProperty('strokeColor')&&!m.color(h))&&!!y(t))))))))))},rectDesc:function(t){var e=t.bgColor;return!(t.hasOwnProperty('bgColor')&&!m.color(e))&&!!y(t)},circleDesc:function(t){var e=t.bgColor,n=t.borderColor,o=t.borderWidth;return!(t.hasOwnProperty('bgColor')&&!m.color(e))&&(!(t.hasOwnProperty('borderColor')&&!m.color(n))&&!(t.hasOwnProperty('borderWidth')&&!m.number(o)))},imageDesc:function(t){var e=t.src;return!!m.imageSrc(e)},svgDesc:function(t){var e=t.svg;return!!m.svg(e)},htmlDesc:function(t){var e=t.html;return!!m.html(e)}},S={is:m,check:_,time:{delay:function(t){return new Promise((function(e){setTimeout((function(){e()}),t)}))},compose:function(t){return function(e,n){return function o(i){var r=t[i];i===t.length&&n&&(r=n);if(!r)return Promise.resolve();try{return Promise.resolve(r(e,o.bind(null,i+1)))}catch(t){return Promise.reject(t)}}(0)}},throttle:function(t,e){var n=-1;return function(){for(var o=[],i=0;i<arguments.length;i++)o[i]=arguments[i];n>0||(n=setTimeout((function(){t.apply(void 0,o),n=-1}),e))}}},loader:{loadImage:u,loadSVG:function(t){return s(this,void 0,void 0,(function(){return l(this,(function(e){switch(e.label){case 0:return[4,c(t)];case 1:return[4,u(e.sent())];case 2:return[2,e.sent()]}}))}))},loadHTML:function(t,e){return s(this,void 0,void 0,(function(){return l(this,(function(n){switch(n.label){case 0:return[4,a(t,e)];case 1:return[4,u(n.sent())];case 2:return[2,n.sent()]}}))}))}},file:{downloadImageFromCanvas:function(t,e){var n=e.filename,o=e.type,i=void 0===o?'image/jpeg':o,r=t.toDataURL(i),s=document.createElement('a');s.href=r,s.download=n;var l=document.createEvent('MouseEvents');l.initEvent('click',!0,!1),s.dispatchEvent(l)}},color:{toColorHexStr:function(t){return'#'+t.toString(16)},toColorHexNum:function(t){return parseInt(t.replace(/^\#/,'0x'))},isColorStr:n},uuid:{createUUID:function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return""+t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}},istype:i,data:{deepClone:function(t){return function t(e){var n,o=(n=e,Object.prototype.toString.call(n).replace(/[\]|\[]{1,1}/gi,'').split(' ')[1]);if(['Null','Number','String','Boolean','Undefined'].indexOf(o)>=0)return e;if('Array'===o){var i=[];return e.forEach((function(e){i.push(t(e))})),i}if('Object'===o){var r={};return Object.keys(e).forEach((function(n){r[n]=t(e[n])})),r}}(t)}},Context:f},x=function(){function t(){this._listeners=new Map}return t.prototype.on=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);null==n||n.push(e),this._listeners.set(t,n||[])}else this._listeners.set(t,[e])},t.prototype.off=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);if(Array.isArray(n))for(var o=0;o<(null==n?void 0:n.length);o++)if(n[o]===e){n.splice(o,1);break}this._listeners.set(t,n||[])}},t.prototype.trigger=function(t,e){var n=this._listeners.get(t);return!!Array.isArray(n)&&(n.forEach((function(t){t(e)})),!0)},t.prototype.has=function(t){if(this._listeners.has(t)){var e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1},t}();var b=function(){function t(){this._temp={prevClickPoint:null,isHoverCanvas:!1,isDragCanvas:!1,statusMap:{canScrollYPrev:!0,canScrollYNext:!0,canScrollXPrev:!0,canScrollXNext:!0}}}return t.prototype.set=function(t,e){this._temp[t]=e},t.prototype.get=function(t){return this._temp[t]},t.prototype.clear=function(){this._temp={prevClickPoint:null,isHoverCanvas:!1,isDragCanvas:!1,statusMap:{canScrollYPrev:!0,canScrollYNext:!0,canScrollXPrev:!0,canScrollXNext:!0}}},t}(),w=function(){function t(t,e){this._isMoving=!1,this._temp=new b,this._container=window,this._canvas=t,this._isMoving=!1,this._initEvent(),this._event=new x}return t.prototype.setStatusMap=function(t){this._temp.set('statusMap',t)},t.prototype.on=function(t,e){this._event.on(t,e)},t.prototype.off=function(t,e){this._event.off(t,e)},t.prototype._initEvent=function(){var t=this._canvas,e=this._container;e.addEventListener('mousemove',this._listenWindowMove.bind(this),!1),e.addEventListener('mouseup',this._listenWindowMoveEnd.bind(this),!1),t.addEventListener('mousemove',this._listenHover.bind(this),!1),t.addEventListener('mousedown',this._listenMoveStart.bind(this),!1),t.addEventListener('mousemove',this._listenMove.bind(this),!1),t.addEventListener('mouseup',this._listenMoveEnd.bind(this),!1),t.addEventListener('click',this._listenCanvasClick.bind(this),!1),t.addEventListener('wheel',this._listenCanvasWheel.bind(this),!1),t.addEventListener('mousedown',this._listenCanvasMoveStart.bind(this),!0),t.addEventListener('mouseup',this._listenCanvasMoveEnd.bind(this),!0),t.addEventListener('mouseover',this._listenCanvasMoveOver.bind(this),!0),t.addEventListener('mouseleave',this._listenCanvasMoveLeave.bind(this),!0),this._initParentEvent()},t.prototype._initParentEvent=function(){for(var t=window,e=t.origin;t.self!==t.top&&(t.self!==t.parent&&t.origin===e&&t.parent.window.addEventListener('mousemove',this._listSameOriginParentWindow.bind(this),!1),t=t.parent););},t.prototype._listenHover=function(t){t.preventDefault();var e=this._getPosition(t);this._isVaildPoint(e)&&this._event.has('hover')&&this._event.trigger('hover',e),this._isMoving=!0},t.prototype._listenMoveStart=function(t){t.preventDefault();var e=this._getPosition(t);this._isVaildPoint(e)&&(this._event.has('point')&&this._event.trigger('point',e),this._event.has('moveStart')&&this._event.trigger('moveStart',e)),this._isMoving=!0},t.prototype._listenMove=function(t){if(t.preventDefault(),t.stopPropagation(),this._event.has('move')&&!0===this._isMoving){var e=this._getPosition(t);this._isVaildPoint(e)&&this._event.trigger('move',e)}},t.prototype._listenMoveEnd=function(t){if(t.preventDefault(),this._event.has('moveEnd')){var e=this._getPosition(t);this._isVaildPoint(e)&&this._event.trigger('moveEnd',e)}this._isMoving=!1},t.prototype._listSameOriginParentWindow=function(){this._temp.get('isHoverCanvas')&&this._event.has('leave')&&this._event.trigger('leave',void 0),this._temp.get('isDragCanvas')&&this._event.has('moveEnd')&&this._event.trigger('moveEnd',{x:NaN,y:NaN}),this._isMoving=!1,this._temp.set('isDragCanvas',!1),this._temp.set('isHoverCanvas',!1)},t.prototype._listenCanvasMoveStart=function(){this._temp.get('isHoverCanvas')&&this._temp.set('isDragCanvas',!0)},t.prototype._listenCanvasMoveEnd=function(){this._temp.set('isDragCanvas',!1)},t.prototype._listenCanvasMoveOver=function(){this._temp.set('isHoverCanvas',!0)},t.prototype._listenCanvasMoveLeave=function(){this._temp.set('isHoverCanvas',!1),this._event.has('leave')&&this._event.trigger('leave',void 0)},t.prototype._listenWindowMove=function(t){if(!0===this._temp.get('isDragCanvas')&&(t.preventDefault(),t.stopPropagation(),this._event.has('move')&&!0===this._isMoving)){var e=this._getPosition(t);this._isVaildPoint(e)&&this._event.trigger('move',e)}},t.prototype._listenWindowMoveEnd=function(t){if(!0!=!this._temp.get('isDragCanvas')){if(t.preventDefault(),this._event.has('moveEnd')){var e=this._getPosition(t);this._isVaildPoint(e)&&this._event.trigger('moveEnd',e)}this._temp.set('isDragCanvas',!1),this._isMoving=!1}},t.prototype._listenCanvasWheel=function(t){this._event.has('wheelX')&&(t.deltaX>0||t.deltaX<0)&&this._event.trigger('wheelX',t.deltaX),this._event.has('wheelY')&&(t.deltaY>0||t.deltaY<0)&&this._event.trigger('wheelY',t.deltaY);var e=this._temp.get('statusMap'),n=e.canScrollYNext,o=e.canScrollYPrev;(t.deltaX>0&&t.deltaX<0||t.deltaY>0&&!0===n||t.deltaY<0&&!0===o)&&t.preventDefault()},t.prototype._listenCanvasClick=function(t){t.preventDefault();var e=this._getPosition(t),n=Date.now();if(this._isVaildPoint(e)){var o=this._temp.get('prevClickPoint');o&&n-o.t<=500&&Math.abs(o.x-e.x)<=5&&Math.abs(o.y-e.y)<=5?this._event.has('doubleClick')&&this._event.trigger('doubleClick',{x:e.x,y:e.y}):this._temp.set('prevClickPoint',{x:e.x,y:e.y,t:n})}},t.prototype._getPosition=function(t){var e=this._canvas,n=0,o=0;if(t&&t.touches&&t.touches.length>0){var i=t.touches[0];i&&(n=i.clientX,o=i.clientY)}else n=t.clientX,o=t.clientY;return{x:n-e.getBoundingClientRect().left,y:o-e.getBoundingClientRect().top,t:Date.now()}},t.prototype._isVaildPoint=function(t){return E(t.x)&&E(t.y)},t}();function E(t){return t>0||t<0||0===t}var P={lineWidth:12,color:'#a0a0a0'},C=function(){function t(t,e){this._displayCtx=t,this._opts=this._getOpts(e)}return t.prototype.draw=function(t){var e=this._opts,n=e.width,o=e.height,i=this.calc(t),r=this._displayCtx;i.xSize>0&&(r.globalAlpha=.2,r.fillStyle=i.color,r.fillRect(0,this._doSize(o-i.lineSize),this._doSize(n),this._doSize(i.lineSize)),r.globalAlpha=1,z(r,{x:this._doSize(i.translateX),y:this._doSize(o-i.lineSize),w:this._doSize(i.xSize),h:this._doSize(i.lineSize),r:this._doSize(i.lineSize/2),color:i.color})),i.ySize>0&&(r.globalAlpha=.2,r.fillStyle=i.color,r.fillRect(this._doSize(n-i.lineSize),0,this._doSize(i.lineSize),this._doSize(o)),r.globalAlpha=1,z(r,{x:this._doSize(n-i.lineSize),y:this._doSize(i.translateY),w:this._doSize(i.lineSize),h:this._doSize(i.ySize),r:this._doSize(i.lineSize/2),color:i.color})),r.globalAlpha=1},t.prototype.resetSize=function(t){this._opts=e(e({},this._opts),t)},t.prototype.isPointAtScrollY=function(t){var e=this._opts,n=e.width,o=e.height,i=e.scrollConfig,r=this._displayCtx;return r.beginPath(),r.rect(this._doSize(n-i.lineWidth),0,this._doSize(i.lineWidth),this._doSize(o)),r.closePath(),!!r.isPointInPath(this._doSize(t.x),this._doSize(t.y))},t.prototype.isPointAtScrollX=function(t){var e=this._opts,n=e.width,o=e.height,i=e.scrollConfig,r=this._displayCtx;return r.beginPath(),r.rect(0,this._doSize(o-i.lineWidth),this._doSize(n-i.lineWidth),this._doSize(i.lineWidth)),r.closePath(),!!r.isPointInPath(this._doSize(t.x),this._doSize(t.y))},t.prototype.getLineWidth=function(){return this._opts.scrollConfig.lineWidth},t.prototype.calc=function(t){var e=this._opts,n=e.width,o=e.height,i=e.scrollConfig,r=2.5*i.lineWidth,s=i.lineWidth,l=0,a=0;t.left<=0&&t.right<=0&&(l=Math.max(r,n-(Math.abs(t.left)+Math.abs(t.right))))>=n&&(l=0),(t.top<=0||t.bottom<=0)&&(a=Math.max(r,o-(Math.abs(t.top)+Math.abs(t.bottom))))>=o&&(a=0);var c=0;l>0&&(c=l/2+(n-l)*Math.abs(t.left)/(Math.abs(t.left)+Math.abs(t.right)),c=Math.min(Math.max(0,c-l/2),n-l));var h=0;return a>0&&(h=a/2+(o-a)*Math.abs(t.top)/(Math.abs(t.top)+Math.abs(t.bottom)),h=Math.min(Math.max(0,h-a/2),o-a)),{lineSize:s,xSize:l,ySize:a,translateY:h,translateX:c,color:this._opts.scrollConfig.color}},t.prototype._doSize=function(t){return t*this._opts.devicePixelRatio},t.prototype._getOpts=function(t){var n=e({scrollConfig:P},t);return n.scrollConfig||(n.scrollConfig=P),n.scrollConfig.lineWidth>0||(n.scrollConfig.lineWidth=P.lineWidth),n.scrollConfig.lineWidth=Math.max(n.scrollConfig.lineWidth,P.lineWidth),!0!==S.color.isColorStr(n.scrollConfig.color)&&(n.scrollConfig.color=n.scrollConfig.color),n},t}();function z(t,e){var n=e.x,o=e.y,i=e.w,r=e.h,s=e.color,l=e.r;(i<2*(l=Math.min(l,i/2,r/2))||r<2*l)&&(l=0),t.beginPath(),t.moveTo(n+l,o),t.arcTo(n+i,o,n+i,o+r,l),t.arcTo(n+i,o+r,n,o+r,l),t.arcTo(n,o+r,n,o,l),t.arcTo(n,o,n+i,o,l),t.closePath(),t.fillStyle=s,t.fill()}var D,L=Symbol('_opts'),T=Symbol('_ctx'),M=function(){function t(t,e){this[L]=e,this[T]=t}return t.prototype.resetSize=function(t){this[L]=e(e({},this[L]),t)},t.prototype.calcScreen=function(){var t=this[T].getTransform().scale,e=this[L],n=e.width,o=e.height,i=e.contextWidth,r=e.contextHeight,s=e.devicePixelRatio,l=!0,a=!0,c=!0,h=!0;i*t<=n&&(this[T].setTransform({scrollX:(n-i*t)/2}),l=!1,a=!1),r*t<=o&&(this[T].setTransform({scrollY:(o-r*t)/2}),c=!1,h=!1),i*t>=n&&this[T].getTransform().scrollX>0&&(this[T].setTransform({scrollX:0}),l=!1),r*t>=o&&this[T].getTransform().scrollY>0&&(this[T].setTransform({scrollY:0}),c=!1);var u=this[T].getTransform(),f=u.scrollX,d=u.scrollY;f<0&&Math.abs(f)>Math.abs(i*t-n)&&(this[T].setTransform({scrollX:0-Math.abs(i*t-n)}),a=!1),d<0&&Math.abs(d)>Math.abs(r*t-o)&&(this[T].setTransform({scrollY:0-Math.abs(r*t-o)}),h=!1);var p=this[T].getTransform(),v=p.scrollX,g=p.scrollY;return{size:{x:v*t,y:g*t,w:i*t,h:r*t},position:{top:g,bottom:o-(r*t+g),left:v,right:n-(i*t+v)},deviceSize:{x:v*s,y:g*s,w:i*s*t,h:r*s*t},width:this[L].width,height:this[L].height,devicePixelRatio:this[L].devicePixelRatio,canScrollYPrev:c,canScrollYNext:h,canScrollXPrev:l,canScrollXNext:a}},t.prototype.calcScreenScroll=function(t,e,n,o,i){var r=o-n;t<=0&&e<=0&&(r=Math.abs(t)+Math.abs(e));var s=1;return r>0&&(s=r/(o-n)),0-s*i},t}(),k=Symbol('_canvas'),I=Symbol('_displayCanvas'),W=Symbol('_helperCanvas'),O=Symbol('_mount'),U=Symbol('_opts'),R=Symbol('_hasRendered'),A=Symbol('_ctx'),F=Symbol('_helperCtx'),Y=Symbol('_watcher'),X=Symbol('_render'),N=Symbol('_parsePrivateOptions'),H=Symbol('_scroller'),B=Symbol('_initEvent'),j=Symbol('_doScrollX'),G=Symbol('_doScrollY'),Q=Symbol('_doMoveScroll'),V=Symbol('_resetContext'),$=Symbol('_screen'),Z=S.Context,q=S.time.throttle,J=function(){function t(t,e){this[D]=!1,this[O]=t,this[k]=document.createElement('canvas'),this[W]=document.createElement('canvas'),this[I]=document.createElement('canvas'),this[O].appendChild(this[I]),this[U]=this[N](e);var n=this[k].getContext('2d'),o=this[I].getContext('2d'),i=this[W].getContext('2d');this[A]=new Z(n,this[U]),this[F]=new Z(i,this[U]),this[$]=new M(this[A],this[U]),this[Y]=new w(this[I],this[A]),this[H]=new C(o,{width:e.width,height:e.height,devicePixelRatio:e.devicePixelRatio||1,scrollConfig:e.scrollConfig}),this[X]()}return t.prototype.getDisplayContext2D=function(){return this[I].getContext('2d')},t.prototype.getOriginContext2D=function(){return this[A].getContext()},t.prototype.getHelperContext2D=function(){return this[F].getContext()},t.prototype.getContext=function(){return this[A]},t.prototype.getHelperContext=function(){return this[F]},t.prototype.scale=function(t){t>0&&(this[A].setTransform({scale:t}),this[F].setTransform({scale:t}));var e=this[$].calcScreen();return{position:e.position,size:e.size}},t.prototype.scrollX=function(t){this[Y].setStatusMap({canScrollYPrev:!0,canScrollYNext:!0,canScrollXPrev:!0,canScrollXNext:!0}),(t>=0||t<0)&&(this[A].setTransform({scrollX:t}),this[F].setTransform({scrollX:t}));var e=this[$].calcScreen(),n=e.position,o=e.size,i=e.canScrollXNext,r=e.canScrollYNext,s=e.canScrollXPrev,l=e.canScrollYPrev;return this[Y].setStatusMap({canScrollYPrev:l,canScrollYNext:r,canScrollXPrev:s,canScrollXNext:i}),{position:n,size:o}},t.prototype.scrollY=function(t){this[Y].setStatusMap({canScrollYPrev:!0,canScrollYNext:!0,canScrollXPrev:!0,canScrollXNext:!0}),(t>=0||t<0)&&(this[A].setTransform({scrollY:t}),this[F].setTransform({scrollY:t}));var e=this[$].calcScreen(),n=e.position,o=e.size,i=e.canScrollXNext,r=e.canScrollYNext,s=e.canScrollXPrev,l=e.canScrollYPrev;return this[Y].setStatusMap({canScrollYPrev:l,canScrollYNext:r,canScrollXPrev:s,canScrollXNext:i}),{position:n,size:o}},t.prototype.getTransform=function(){return this[A].getTransform()},t.prototype.draw=function(){this.clear();var t=this[$].calcScreen(),e=t.position,n=t.deviceSize,o=t.size,i=this[I].getContext('2d');return null==i||i.drawImage(this[k],n.x,n.y,n.w,n.h),null==i||i.drawImage(this[W],n.x,n.y,n.w,n.h),!0===this[U].canScroll&&this[H].draw(e),{position:e,size:o}},t.prototype.clear=function(){var t=this[I].getContext('2d');null==t||t.clearRect(0,0,this[I].width,this[I].height)},t.prototype.on=function(t,e){this[Y].on(t,e)},t.prototype.off=function(t,e){this[Y].off(t,e)},t.prototype.getScreenInfo=function(){return this[$].calcScreen()},t.prototype.setCursor=function(t){this[I].style.cursor=t},t.prototype.resetCursor=function(){this[I].style.cursor='auto'},t.prototype.resetSize=function(t){this[U]=e(e({},this[U]),t),this[V](),this[A].resetSize(t),this[F].resetSize(t),this[$].resetSize(t),this[H].resetSize({width:this[U].width,height:this[U].height,devicePixelRatio:this[U].devicePixelRatio}),this.draw()},t.prototype.getScrollLineWidth=function(){var t=0;return!0===this[U].canScroll&&(t=this[H].getLineWidth()),t},t.prototype.pointScreenToContext=function(t){var e=this.getTransform(),n=e.scrollX,o=e.scrollY,i=e.scale;return{x:(t.x-n)/i,y:(t.y-o)/i}},t.prototype.pointContextToScreen=function(t){var e=this.getTransform(),n=e.scrollX,o=e.scrollY,i=e.scale;return{x:t.x*i+n,y:t.y*i+o}},t.prototype[(D=R,X)]=function(){!0!==this[R]&&(this[V](),this[B](),this[R]=!0)},t.prototype[V]=function(){var t,n,o,i,r,s,l=this[U],a=l.width,c=l.height,h=l.contextWidth,u=l.contextHeight,f=l.devicePixelRatio;this[k].width=h*f,this[k].height=u*f,this[W].width=h*f,this[W].height=u*f,this[I].width=a*f,this[I].height=c*f,t=this[I],n={width:a+"px",height:c+"px"},o=function(t){var e={};return(t.getAttribute('style')||'').split(';').forEach((function(t){var n=t.split(':');n[0]&&'string'==typeof n[0]&&(e[n[0]]=n[1]||'')})),e}(t),i=e(e({},o),n),r=Object.keys(i),s='',r.forEach((function(t){s+=t+":"+(i[t]||'')+";"})),t.setAttribute('style',s)},t.prototype[N]=function(t){return e(e({},{devicePixelRatio:1}),t)},t.prototype[B]=function(){var t=this;if(!0!==this[R]&&!0===this[U].canScroll){this.on('wheelX',q((function(e){t[j](e)}),16)),this.on('wheelY',q((function(e){t[G](e)}),16));var e=null;this.on('moveStart',q((function(n){t[H].isPointAtScrollX(n)?e='x':t[H].isPointAtScrollY(n)&&(e='y')}),16)),this.on('move',q((function(n){e&&t[Q](e,n)}),16)),this.on('moveEnd',q((function(n){e&&t[Q](e,n),e=null}),16))}},t.prototype[j]=function(t,e){var n=this[U].width,o=e;'number'==typeof o&&(o>0||o<=0)||(o=this[A].getTransform().scrollX);var i=this[$].calcScreen().position,r=this[H].calc(i).xSize,s=this[$].calcScreenScroll(i.left,i.right,r,n,t);this.scrollX(o+s),this.draw()},t.prototype[G]=function(t,e){var n=this[U].height,o=e;'number'==typeof o&&(o>0||o<=0)||(o=this[A].getTransform().scrollY);var i=this[$].calcScreen().position,r=this[H].calc(i).ySize,s=this[$].calcScreenScroll(i.top,i.bottom,r,n,t);this.scrollY(o+s),this.draw()},t.prototype[Q]=function(t,e){if(t){var n=this[$].calcScreen().position,o=this[H].calc(n),i=o.xSize,r=o.ySize;'x'===t?this[j](e.x-i/2,0):'y'===t&&this[G](e.y-r/2,0)}},t}();function K(t){return'string'==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function tt(t){return(Object.prototype.toString.call(t)||'').replace(/(\[object|\])/gi,'').trim()}var et={type:function(t,e){var n=tt(t);return!0===e?n.toLocaleLowerCase():n},array:function(t){return'Array'===tt(t)},json:function(t){return'Object'===tt(t)},function:function(t){return'Function'===tt(t)},asyncFunction:function(t){return'AsyncFunction'===tt(t)},string:function(t){return'String'===tt(t)},number:function(t){return'Number'===tt(t)},undefined:function(t){return'Undefined'===tt(t)},null:function(t){return'Null'===tt(t)},promise:function(t){return'Promise'===tt(t)}},nt=function(){return nt=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},nt.apply(this,arguments)};function ot(t,e,n,o){return new(n||(n=Promise))((function(i,r){function s(t){try{a(o.next(t))}catch(t){r(t)}}function l(t){try{a(o.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,l)}a((o=o.apply(t,e||[])).next())}))}function it(t,e){var n,o,i,r,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,o=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(i=s.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){s=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){s.label=r[1];break}if(6===r[0]&&s.label<i[1]){s.label=i[1],i=r;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(r);break}i[2]&&s.ops.pop(),s.trys.pop();continue}r=e.call(t,s)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}function rt(t,e){var n=e.width,o=e.height;return new Promise((function(e,i){var r=new Blob(["\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\""+(n||'')+"\" height = \""+(o||'')+"\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n "+t+"\n </div>\n </foreignObject>\n </svg>\n "],{type:'image/svg+xml;charset=utf-8'}),s=new FileReader;s.readAsDataURL(r),s.onload=function(t){var n,o=null===(n=null==t?void 0:t.target)||void 0===n?void 0:n.result;e(o)},s.onerror=function(t){i(t)}}))}function st(t){return new Promise((function(e,n){var o=new Blob([t],{type:'image/svg+xml;charset=utf-8'}),i=new FileReader;i.readAsDataURL(o),i.onload=function(t){var n,o=null===(n=null==t?void 0:t.target)||void 0===n?void 0:n.result;e(o)},i.onerror=function(t){n(t)}}))}var lt=window.Image;function at(t){return new Promise((function(e,n){var o=new lt;o.onload=function(){e(o)},o.onabort=n,o.onerror=n,o.src=t}))}var ct=function(){function t(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}return t.prototype.getContext=function(){return this._ctx},t.prototype.resetSize=function(t){this._opts=nt(nt({},this._opts),t)},t.prototype.calcDeviceNum=function(t){return t*this._opts.devicePixelRatio},t.prototype.calcScreenNum=function(t){return t/this._opts.devicePixelRatio},t.prototype.getSize=function(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}},t.prototype.setTransform=function(t){this._transform=nt(nt({},this._transform),t)},t.prototype.getTransform=function(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}},t.prototype.setFillStyle=function(t){this._ctx.fillStyle=t},t.prototype.fill=function(t){return this._ctx.fill(t||'nonzero')},t.prototype.arc=function(t,e,n,o,i,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(n),o,i,r)},t.prototype.rect=function(t,e,n,o){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.fillRect=function(t,e,n,o){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.clearRect=function(t,e,n,o){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.beginPath=function(){return this._ctx.beginPath()},t.prototype.closePath=function(){return this._ctx.closePath()},t.prototype.lineTo=function(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))},t.prototype.moveTo=function(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))},t.prototype.arcTo=function(t,e,n,o,i){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o),this._doSize(i))},t.prototype.setLineWidth=function(t){return this._ctx.lineWidth=this._doSize(t)},t.prototype.setLineDash=function(t){var e=this;return this._ctx.setLineDash(t.map((function(t){return e._doSize(t)})))},t.prototype.isPointInPath=function(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))},t.prototype.isPointInPathWithoutScroll=function(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))},t.prototype.setStrokeStyle=function(t){this._ctx.strokeStyle=t},t.prototype.stroke=function(){return this._ctx.stroke()},t.prototype.translate=function(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))},t.prototype.rotate=function(t){return this._ctx.rotate(t)},t.prototype.drawImage=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=t[1],i=t[2],r=t[3],s=t[4],l=t[t.length-4],a=t[t.length-3],c=t[t.length-2],h=t[t.length-1];return 9===t.length?this._ctx.drawImage(n,this._doSize(o),this._doSize(i),this._doSize(r),this._doSize(s),this._doSize(l),this._doSize(a),this._doSize(c),this._doSize(h)):this._ctx.drawImage(n,this._doSize(l),this._doSize(a),this._doSize(c),this._doSize(h))},t.prototype.createPattern=function(t,e){return this._ctx.createPattern(t,e)},t.prototype.measureText=function(t){return this._ctx.measureText(t)},t.prototype.setTextAlign=function(t){this._ctx.textAlign=t},t.prototype.fillText=function(t,e,n,o){return void 0!==o?this._ctx.fillText(t,this._doSize(e),this._doSize(n),this._doSize(o)):this._ctx.fillText(t,this._doSize(e),this._doSize(n))},t.prototype.strokeText=function(t,e,n,o){return void 0!==o?this._ctx.strokeText(t,this._doSize(e),this._doSize(n),this._doSize(o)):this._ctx.strokeText(t,this._doSize(e),this._doSize(n))},t.prototype.setFont=function(t){var e=[];'bold'===t.fontWeight&&e.push(""+t.fontWeight),e.push(this._doSize(t.fontSize||12)+"px"),e.push(""+(t.fontFamily||'sans-serif')),this._ctx.font=""+e.join(' ')},t.prototype.setTextBaseline=function(t){this._ctx.textBaseline=t},t.prototype.setGlobalAlpha=function(t){this._ctx.globalAlpha=t},t.prototype.save=function(){this._ctx.save()},t.prototype.restore=function(){this._ctx.restore()},t.prototype.scale=function(t,e){this._ctx.scale(t,e)},t.prototype.setShadowColor=function(t){this._ctx.shadowColor=t},t.prototype.setShadowOffsetX=function(t){this._ctx.shadowOffsetX=this._doSize(t)},t.prototype.setShadowOffsetY=function(t){this._ctx.shadowOffsetY=this._doSize(t)},t.prototype.setShadowBlur=function(t){this._ctx.shadowBlur=this._doSize(t)},t.prototype.ellipse=function(t,e,n,o,i,r,s,l){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o),i,r,s,l)},t.prototype._doSize=function(t){return this._opts.devicePixelRatio*t},t.prototype._doX=function(t){var e=this._transform,n=e.scale,o=(t-e.scrollX)/n;return this._doSize(o)},t.prototype._doY=function(t){var e=this._transform,n=e.scale,o=(t-e.scrollY)/n;return this._doSize(o)},t}();function ht(t){return'number'==typeof t&&(t>0||t<=0)}function ut(t){return'number'==typeof t&&t>=0}function ft(t){return'string'==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(""+t)}function dt(t){return'string'==typeof t&&/^(data:image\/)/.test(""+t)}var pt={x:function(t){return ht(t)},y:function(t){return ht(t)},w:ut,h:function(t){return'number'==typeof t&&t>=0},angle:function(t){return'number'==typeof t&&t>=-360&&t<=360},number:ht,borderWidth:function(t){return ut(t)},borderRadius:function(t){return ht(t)&&t>=0},color:function(t){return K(t)},imageSrc:function(t){return dt(t)||ft(t)},imageURL:ft,imageBase64:dt,svg:function(t){return'string'==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test((""+t).trim())&&/<\/[\s]{0,}svg>$/i.test((""+t).trim())},html:function(t){var e=!1;if('string'==typeof t){var n=document.createElement('div');n.innerHTML=t,n.children.length>0&&(e=!0),n=null}return e},text:function(t){return'string'==typeof t},fontSize:function(t){return ht(t)&&t>0},lineHeight:function(t){return ht(t)&&t>0},textAlign:function(t){return['center','left','right'].includes(t)},fontFamily:function(t){return'string'==typeof t&&t.length>0},fontWeight:function(t){return['bold'].includes(t)},strokeWidth:function(t){return ht(t)&&t>0}};function vt(t){void 0===t&&(t={});var e=t.borderColor,n=t.borderRadius,o=t.borderWidth;return!(t.hasOwnProperty('borderColor')&&!pt.color(e))&&(!(t.hasOwnProperty('borderRadius')&&!pt.number(n))&&!(t.hasOwnProperty('borderWidth')&&!pt.number(o)))}var gt={attrs:function(t){var e=t.x,n=t.y,o=t.w,i=t.h,r=t.angle;return!!(pt.x(e)&&pt.y(n)&&pt.w(o)&&pt.h(i)&&pt.angle(r))&&(r>=-360&&r<=360)},textDesc:function(t){var e=t.text,n=t.color,o=t.fontSize,i=t.lineHeight,r=t.fontFamily,s=t.textAlign,l=t.fontWeight,a=t.bgColor,c=t.strokeWidth,h=t.strokeColor;return!!pt.text(e)&&(!!pt.color(n)&&(!!pt.fontSize(o)&&(!(t.hasOwnProperty('bgColor')&&!pt.color(a))&&(!(t.hasOwnProperty('fontWeight')&&!pt.fontWeight(l))&&(!(t.hasOwnProperty('lineHeight')&&!pt.lineHeight(i))&&(!(t.hasOwnProperty('fontFamily')&&!pt.fontFamily(r))&&(!(t.hasOwnProperty('textAlign')&&!pt.textAlign(s))&&(!(t.hasOwnProperty('strokeWidth')&&!pt.strokeWidth(c))&&(!(t.hasOwnProperty('strokeColor')&&!pt.color(h))&&!!vt(t))))))))))},rectDesc:function(t){var e=t.bgColor;return!(t.hasOwnProperty('bgColor')&&!pt.color(e))&&!!vt(t)},circleDesc:function(t){var e=t.bgColor,n=t.borderColor,o=t.borderWidth;return!(t.hasOwnProperty('bgColor')&&!pt.color(e))&&(!(t.hasOwnProperty('borderColor')&&!pt.color(n))&&!(t.hasOwnProperty('borderWidth')&&!pt.number(o)))},imageDesc:function(t){var e=t.src;return!!pt.imageSrc(e)},svgDesc:function(t){var e=t.svg;return!!pt.svg(e)},htmlDesc:function(t){var e=t.html;return!!pt.html(e)}},mt={is:pt,check:gt,time:{delay:function(t){return new Promise((function(e){setTimeout((function(){e()}),t)}))},compose:function(t){return function(e,n){return function o(i){var r=t[i];i===t.length&&n&&(r=n);if(!r)return Promise.resolve();try{return Promise.resolve(r(e,o.bind(null,i+1)))}catch(t){return Promise.reject(t)}}(0)}},throttle:function(t,e){var n=-1;return function(){for(var o=[],i=0;i<arguments.length;i++)o[i]=arguments[i];n>0||(n=setTimeout((function(){t.apply(void 0,o),n=-1}),e))}}},loader:{loadImage:at,loadSVG:function(t){return ot(this,void 0,void 0,(function(){return it(this,(function(e){switch(e.label){case 0:return[4,st(t)];case 1:return[4,at(e.sent())];case 2:return[2,e.sent()]}}))}))},loadHTML:function(t,e){return ot(this,void 0,void 0,(function(){return it(this,(function(n){switch(n.label){case 0:return[4,rt(t,e)];case 1:return[4,at(n.sent())];case 2:return[2,n.sent()]}}))}))}},file:{downloadImageFromCanvas:function(t,e){var n=e.filename,o=e.type,i=void 0===o?'image/jpeg':o,r=t.toDataURL(i),s=document.createElement('a');s.href=r,s.download=n;var l=document.createEvent('MouseEvents');l.initEvent('click',!0,!1),s.dispatchEvent(l)}},color:{toColorHexStr:function(t){return'#'+t.toString(16)},toColorHexNum:function(t){return parseInt(t.replace(/^\#/,'0x'))},isColorStr:K},uuid:{createUUID:function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return""+t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}},istype:et,data:{deepClone:function(t){return function t(e){var n,o=(n=e,Object.prototype.toString.call(n).replace(/[\]|\[]{1,1}/gi,'').split(' ')[1]);if(['Null','Number','String','Boolean','Undefined'].indexOf(o)>=0)return e;if('Array'===o){var i=[];return e.forEach((function(e){i.push(t(e))})),i}if('Object'===o){var r={};return Object.keys(e).forEach((function(n){r[n]=t(e[n])})),r}}(t)}},Context:ct},yt=function(t,e){return yt=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},yt(t,e)};var _t=function(){return _t=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},_t.apply(this,arguments)};function St(t,e,n,o){return new(n||(n=Promise))((function(i,r){function s(t){try{a(o.next(t))}catch(t){r(t)}}function l(t){try{a(o.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,l)}a((o=o.apply(t,e||[])).next())}))}function xt(t,e){var n,o,i,r,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,o=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(i=s.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){s=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){s.label=r[1];break}if(6===r[0]&&s.label<i[1]){s.label=i[1],i=r;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(r);break}i[2]&&s.ops.pop(),s.trys.pop();continue}r=e.call(t,s)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}function bt(t){return'string'==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function wt(t){return(Object.prototype.toString.call(t)||'').replace(/(\[object|\])/gi,'').trim()}var Et={type:function(t,e){var n=wt(t);return!0===e?n.toLocaleLowerCase():n},array:function(t){return'Array'===wt(t)},json:function(t){return'Object'===wt(t)},function:function(t){return'Function'===wt(t)},asyncFunction:function(t){return'AsyncFunction'===wt(t)},string:function(t){return'String'===wt(t)},number:function(t){return'Number'===wt(t)},undefined:function(t){return'Undefined'===wt(t)},null:function(t){return'Null'===wt(t)},promise:function(t){return'Promise'===wt(t)}},Pt=function(){return Pt=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},Pt.apply(this,arguments)};function Ct(t,e,n,o){return new(n||(n=Promise))((function(i,r){function s(t){try{a(o.next(t))}catch(t){r(t)}}function l(t){try{a(o.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,l)}a((o=o.apply(t,e||[])).next())}))}function zt(t,e){var n,o,i,r,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,o=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(!(i=s.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){s=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){s.label=r[1];break}if(6===r[0]&&s.label<i[1]){s.label=i[1],i=r;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(r);break}i[2]&&s.ops.pop(),s.trys.pop();continue}r=e.call(t,s)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}function Dt(t,e){var n=e.width,o=e.height;return new Promise((function(e,i){var r=new Blob(["\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\""+(n||'')+"\" height = \""+(o||'')+"\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n "+t+"\n </div>\n </foreignObject>\n </svg>\n "],{type:'image/svg+xml;charset=utf-8'}),s=new FileReader;s.readAsDataURL(r),s.onload=function(t){var n,o=null===(n=null==t?void 0:t.target)||void 0===n?void 0:n.result;e(o)},s.onerror=function(t){i(t)}}))}function Lt(t){return new Promise((function(e,n){var o=new Blob([t],{type:'image/svg+xml;charset=utf-8'}),i=new FileReader;i.readAsDataURL(o),i.onload=function(t){var n,o=null===(n=null==t?void 0:t.target)||void 0===n?void 0:n.result;e(o)},i.onerror=function(t){n(t)}}))}var Tt=window.Image;function Mt(t){return new Promise((function(e,n){var o=new Tt;o.onload=function(){e(o)},o.onabort=n,o.onerror=n,o.src=t}))}var kt=function(){function t(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}return t.prototype.getContext=function(){return this._ctx},t.prototype.resetSize=function(t){this._opts=Pt(Pt({},this._opts),t)},t.prototype.calcDeviceNum=function(t){return t*this._opts.devicePixelRatio},t.prototype.calcScreenNum=function(t){return t/this._opts.devicePixelRatio},t.prototype.getSize=function(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}},t.prototype.setTransform=function(t){this._transform=Pt(Pt({},this._transform),t)},t.prototype.getTransform=function(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}},t.prototype.setFillStyle=function(t){this._ctx.fillStyle=t},t.prototype.fill=function(t){return this._ctx.fill(t||'nonzero')},t.prototype.arc=function(t,e,n,o,i,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(n),o,i,r)},t.prototype.rect=function(t,e,n,o){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.fillRect=function(t,e,n,o){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.clearRect=function(t,e,n,o){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o))},t.prototype.beginPath=function(){return this._ctx.beginPath()},t.prototype.closePath=function(){return this._ctx.closePath()},t.prototype.lineTo=function(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))},t.prototype.moveTo=function(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))},t.prototype.arcTo=function(t,e,n,o,i){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o),this._doSize(i))},t.prototype.setLineWidth=function(t){return this._ctx.lineWidth=this._doSize(t)},t.prototype.setLineDash=function(t){var e=this;return this._ctx.setLineDash(t.map((function(t){return e._doSize(t)})))},t.prototype.isPointInPath=function(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))},t.prototype.isPointInPathWithoutScroll=function(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))},t.prototype.setStrokeStyle=function(t){this._ctx.strokeStyle=t},t.prototype.stroke=function(){return this._ctx.stroke()},t.prototype.translate=function(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))},t.prototype.rotate=function(t){return this._ctx.rotate(t)},t.prototype.drawImage=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=t[1],i=t[2],r=t[3],s=t[4],l=t[t.length-4],a=t[t.length-3],c=t[t.length-2],h=t[t.length-1];return 9===t.length?this._ctx.drawImage(n,this._doSize(o),this._doSize(i),this._doSize(r),this._doSize(s),this._doSize(l),this._doSize(a),this._doSize(c),this._doSize(h)):this._ctx.drawImage(n,this._doSize(l),this._doSize(a),this._doSize(c),this._doSize(h))},t.prototype.createPattern=function(t,e){return this._ctx.createPattern(t,e)},t.prototype.measureText=function(t){return this._ctx.measureText(t)},t.prototype.setTextAlign=function(t){this._ctx.textAlign=t},t.prototype.fillText=function(t,e,n,o){return void 0!==o?this._ctx.fillText(t,this._doSize(e),this._doSize(n),this._doSize(o)):this._ctx.fillText(t,this._doSize(e),this._doSize(n))},t.prototype.strokeText=function(t,e,n,o){return void 0!==o?this._ctx.strokeText(t,this._doSize(e),this._doSize(n),this._doSize(o)):this._ctx.strokeText(t,this._doSize(e),this._doSize(n))},t.prototype.setFont=function(t){var e=[];'bold'===t.fontWeight&&e.push(""+t.fontWeight),e.push(this._doSize(t.fontSize||12)+"px"),e.push(""+(t.fontFamily||'sans-serif')),this._ctx.font=""+e.join(' ')},t.prototype.setTextBaseline=function(t){this._ctx.textBaseline=t},t.prototype.setGlobalAlpha=function(t){this._ctx.globalAlpha=t},t.prototype.save=function(){this._ctx.save()},t.prototype.restore=function(){this._ctx.restore()},t.prototype.scale=function(t,e){this._ctx.scale(t,e)},t.prototype.setShadowColor=function(t){this._ctx.shadowColor=t},t.prototype.setShadowOffsetX=function(t){this._ctx.shadowOffsetX=this._doSize(t)},t.prototype.setShadowOffsetY=function(t){this._ctx.shadowOffsetY=this._doSize(t)},t.prototype.setShadowBlur=function(t){this._ctx.shadowBlur=this._doSize(t)},t.prototype.ellipse=function(t,e,n,o,i,r,s,l){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(n),this._doSize(o),i,r,s,l)},t.prototype._doSize=function(t){return this._opts.devicePixelRatio*t},t.prototype._doX=function(t){var e=this._transform,n=e.scale,o=(t-e.scrollX)/n;return this._doSize(o)},t.prototype._doY=function(t){var e=this._transform,n=e.scale,o=(t-e.scrollY)/n;return this._doSize(o)},t}();function It(t){return'number'==typeof t&&(t>0||t<=0)}function Wt(t){return'number'==typeof t&&t>=0}function Ot(t){return'string'==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(""+t)}function Ut(t){return'string'==typeof t&&/^(data:image\/)/.test(""+t)}var Rt={x:function(t){return It(t)},y:function(t){return It(t)},w:Wt,h:function(t){return'number'==typeof t&&t>=0},angle:function(t){return'number'==typeof t&&t>=-360&&t<=360},number:It,borderWidth:function(t){return Wt(t)},borderRadius:function(t){return It(t)&&t>=0},color:function(t){return bt(t)},imageSrc:function(t){return Ut(t)||Ot(t)},imageURL:Ot,imageBase64:Ut,svg:function(t){return'string'==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test((""+t).trim())&&/<\/[\s]{0,}svg>$/i.test((""+t).trim())},html:function(t){var e=!1;if('string'==typeof t){var n=document.createElement('div');n.innerHTML=t,n.children.length>0&&(e=!0),n=null}return e},text:function(t){return'string'==typeof t},fontSize:function(t){return It(t)&&t>0},lineHeight:function(t){return It(t)&&t>0},textAlign:function(t){return['center','left','right'].includes(t)},fontFamily:function(t){return'string'==typeof t&&t.length>0},fontWeight:function(t){return['bold'].includes(t)},strokeWidth:function(t){return It(t)&&t>0}};function At(t){void 0===t&&(t={});var e=t.borderColor,n=t.borderRadius,o=t.borderWidth;return!(t.hasOwnProperty('borderColor')&&!Rt.color(e))&&(!(t.hasOwnProperty('borderRadius')&&!Rt.number(n))&&!(t.hasOwnProperty('borderWidth')&&!Rt.number(o)))}var Ft={attrs:function(t){var e=t.x,n=t.y,o=t.w,i=t.h,r=t.angle;return!!(Rt.x(e)&&Rt.y(n)&&Rt.w(o)&&Rt.h(i)&&Rt.angle(r))&&(r>=-360&&r<=360)},textDesc:function(t){var e=t.text,n=t.color,o=t.fontSize,i=t.lineHeight,r=t.fontFamily,s=t.textAlign,l=t.fontWeight,a=t.bgColor,c=t.strokeWidth,h=t.strokeColor;return!!Rt.text(e)&&(!!Rt.color(n)&&(!!Rt.fontSize(o)&&(!(t.hasOwnProperty('bgColor')&&!Rt.color(a))&&(!(t.hasOwnProperty('fontWeight')&&!Rt.fontWeight(l))&&(!(t.hasOwnProperty('lineHeight')&&!Rt.lineHeight(i))&&(!(t.hasOwnProperty('fontFamily')&&!Rt.fontFamily(r))&&(!(t.hasOwnProperty('textAlign')&&!Rt.textAlign(s))&&(!(t.hasOwnProperty('strokeWidth')&&!Rt.strokeWidth(c))&&(!(t.hasOwnProperty('strokeColor')&&!Rt.color(h))&&!!At(t))))))))))},rectDesc:function(t){var e=t.bgColor;return!(t.hasOwnProperty('bgColor')&&!Rt.color(e))&&!!At(t)},circleDesc:function(t){var e=t.bgColor,n=t.borderColor,o=t.borderWidth;return!(t.hasOwnProperty('bgColor')&&!Rt.color(e))&&(!(t.hasOwnProperty('borderColor')&&!Rt.color(n))&&!(t.hasOwnProperty('borderWidth')&&!Rt.number(o)))},imageDesc:function(t){var e=t.src;return!!Rt.imageSrc(e)},svgDesc:function(t){var e=t.svg;return!!Rt.svg(e)},htmlDesc:function(t){var e=t.html;return!!Rt.html(e)}},Yt={is:Rt,check:Ft,time:{delay:function(t){return new Promise((function(e){setTimeout((function(){e()}),t)}))},compose:function(t){return function(e,n){return function o(i){var r=t[i];i===t.length&&n&&(r=n);if(!r)return Promise.resolve();try{return Promise.resolve(r(e,o.bind(null,i+1)))}catch(t){return Promise.reject(t)}}(0)}},throttle:function(t,e){var n=-1;return function(){for(var o=[],i=0;i<arguments.length;i++)o[i]=arguments[i];n>0||(n=setTimeout((function(){t.apply(void 0,o),n=-1}),e))}}},loader:{loadImage:Mt,loadSVG:function(t){return Ct(this,void 0,void 0,(function(){return zt(this,(function(e){switch(e.label){case 0:return[4,Lt(t)];case 1:return[4,Mt(e.sent())];case 2:return[2,e.sent()]}}))}))},loadHTML:function(t,e){return Ct(this,void 0,void 0,(function(){return zt(this,(function(n){switch(n.label){case 0:return[4,Dt(t,e)];case 1:return[4,Mt(n.sent())];case 2:return[2,n.sent()]}}))}))}},file:{downloadImageFromCanvas:function(t,e){var n=e.filename,o=e.type,i=void 0===o?'image/jpeg':o,r=t.toDataURL(i),s=document.createElement('a');s.href=r,s.download=n;var l=document.createEvent('MouseEvents');l.initEvent('click',!0,!1),s.dispatchEvent(l)}},color:{toColorHexStr:function(t){return'#'+t.toString(16)},toColorHexNum:function(t){return parseInt(t.replace(/^\#/,'0x'))},isColorStr:bt},uuid:{createUUID:function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return""+t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}},istype:Et,data:{deepClone:function(t){return function t(e){var n,o=(n=e,Object.prototype.toString.call(n).replace(/[\]|\[]{1,1}/gi,'').split(' ')[1]);if(['Null','Number','String','Boolean','Undefined'].indexOf(o)>=0)return e;if('Array'===o){var i=[];return e.forEach((function(e){i.push(t(e))})),i}if('Object'===o){var r={};return Object.keys(e).forEach((function(n){r[n]=t(e[n])})),r}}(t)}},Context:kt};function Xt(t,e,n){var o=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e),i=function(t){return t/180*Math.PI}(e.angle||0);return function(t,e,n,o){e&&(n>0||n<0)&&(t.translate(e.x,e.y),t.rotate(n),t.translate(-e.x,-e.y));o(t),e&&(n>0||n<0)&&(t.translate(e.x,e.y),t.rotate(-n),t.translate(-e.x,-e.y))}(t,o,i||0,n)}var Nt=Yt.is,Ht=Yt.istype,Bt=Yt.color;function jt(t){t.setFillStyle('#000000'),t.setStrokeStyle('#000000'),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor('#00000000'),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function Gt(t,e,n){jt(t),function(t,e){jt(t),Xt(t,e,(function(){if(e.desc.borderWidth&&e.desc.borderWidth>0){var n=e.desc.borderWidth,o='#000000';!0===Bt.isColorStr(e.desc.borderColor)&&(o=e.desc.borderColor);var i=e.x-n/2,r=e.y-n/2,s=e.w+n,l=e.h+n,a=e.desc.borderRadius||0;(a=Math.min(a,s/2,l/2))<s/2&&a<l/2&&(a+=n/2);var c=e.desc;void 0!==c.shadowColor&&Bt.isColorStr(c.shadowColor)&&t.setShadowColor(c.shadowColor),void 0!==c.shadowOffsetX&&Nt.number(c.shadowOffsetX)&&t.setShadowOffsetX(c.shadowOffsetX),void 0!==c.shadowOffsetY&&Nt.number(c.shadowOffsetY)&&t.setShadowOffsetY(c.shadowOffsetY),void 0!==c.shadowBlur&&Nt.number(c.shadowBlur)&&t.setShadowBlur(c.shadowBlur),t.beginPath(),t.setLineWidth(n),t.setStrokeStyle(o),t.moveTo(i+a,r),t.arcTo(i+s,r,i+s,r+l,a),t.arcTo(i+s,r+l,i,r+l,a),t.arcTo(i,r+l,i,r,a),t.arcTo(i,r,i+s,r,a),t.closePath(),t.stroke()}}))}(t,e),jt(t),Xt(t,e,(function(){var o=e.x,i=e.y,r=e.w,s=e.h,l=e.desc.borderRadius||0;(r<2*(l=Math.min(l,r/2,s/2))||s<2*l)&&(l=0),t.beginPath(),t.moveTo(o+l,i),t.arcTo(o+r,i,o+r,i+s,l),t.arcTo(o+r,i+s,o,i+s,l),t.arcTo(o,i+s,o,i,l),t.arcTo(o,i,o+r,i,l),t.closePath(),('string'==typeof n||['CanvasPattern'].includes(Ht.type(n)))&&t.setFillStyle(n),t.fill()}))}function Qt(t,e){Gt(t,e,e.desc.bgColor)}function Vt(t,e,n){var o=n.getContent(e.uuid);Xt(t,e,(function(){o&&t.drawImage(o,e.x,e.y,e.w,e.h)}))}function $t(t,e,n){var o=n.getContent(e.uuid);Xt(t,e,(function(){o&&t.drawImage(o,e.x,e.y,e.w,e.h)}))}function Zt(t,e,n){var o=n.getContent(e.uuid);Xt(t,e,(function(){o&&t.drawImage(o,e.x,e.y,e.w,e.h)}))}var qt=Yt.is,Jt=Yt.color;function Kt(t,e,n){jt(t),Gt(t,e,e.desc.bgColor||'transparent'),Xt(t,e,(function(){var n=_t({fontSize:12,fontFamily:'sans-serif',textAlign:'center'},e.desc);t.setFillStyle(e.desc.color),t.setTextBaseline('top'),t.setFont({fontWeight:n.fontWeight,fontSize:n.fontSize,fontFamily:n.fontFamily});var o=n.text.replace(/\r\n/gi,'\n'),i=n.lineHeight||n.fontSize,r=o.split('\n'),s=[];r.forEach((function(n){for(var o='',r=0,l=0;l<n.length&&(t.measureText(o+(n[l]||'')).width<t.calcDeviceNum(e.w)?o+=n[l]||'':(s.push({text:o,width:t.calcScreenNum(t.measureText(o).width)}),o=n[l]||'',r++),!((r+1)*i>e.h));l++)if(o&&n.length-1===l&&(r+1)*i<e.h){s.push({text:o,width:t.calcScreenNum(t.measureText(o).width)});break}}));var l=e.y;if(s.length*i<e.h&&(l+=(e.h-s.length*i)/2),void 0!==n.textShadowColor&&Jt.isColorStr(n.textShadowColor)&&t.setShadowColor(n.textShadowColor),void 0!==n.textShadowOffsetX&&qt.number(n.textShadowOffsetX)&&t.setShadowOffsetX(n.textShadowOffsetX),void 0!==n.textShadowOffsetY&&qt.number(n.textShadowOffsetY)&&t.setShadowOffsetY(n.textShadowOffsetY),void 0!==n.textShadowBlur&&qt.number(n.textShadowBlur)&&t.setShadowBlur(n.textShadowBlur),s.forEach((function(o,r){var s=e.x;'center'===n.textAlign?s=e.x+(e.w-o.width)/2:'right'===n.textAlign&&(s=e.x+(e.w-o.width)),t.fillText(o.text,s,l+i*r)})),jt(t),Jt.isColorStr(n.strokeColor)&&void 0!==n.strokeWidth&&n.strokeWidth>0){var a=e.y;s.length*i<e.h&&(a+=(e.h-s.length*i)/2),s.forEach((function(o,r){var s=e.x;'center'===n.textAlign?s=e.x+(e.w-o.width)/2:'right'===n.textAlign&&(s=e.x+(e.w-o.width)),void 0!==n.strokeColor&&t.setStrokeStyle(n.strokeColor),void 0!==n.strokeWidth&&n.strokeWidth>0&&t.setLineWidth(n.strokeWidth),t.strokeText(o.text,s,a+i*r)}))}}))}function te(t,e){jt(t),Xt(t,e,(function(t){var n=e.x,o=e.y,i=e.w,r=e.h,s=e.desc,l=s.bgColor,a=void 0===l?'#000000':l,c=s.borderColor,h=void 0===c?'#000000':c,u=s.borderWidth,f=void 0===u?0:u,d=i/2,p=r/2,v=n+d,g=o+p;if(f&&f>0){var m=f/2+d,y=f/2+p;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(f),t.ellipse(v,g,m,y,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(v,g,d,p,0,0,2*Math.PI),t.closePath(),t.fill()}))}var ee=Yt.color.isColorStr;function ne(t,e,n){var o;jt(t);var i=t.getSize();if(t.clearRect(0,0,i.contextWidth,i.contextHeight),'string'==typeof e.bgColor&&ee(e.bgColor)&&function(t,e){var n=t.getSize();t.setFillStyle(e),t.fillRect(0,0,n.contextWidth,n.contextHeight)}(t,e.bgColor),e.elements.length>0)for(var r=0;r<e.elements.length;r++){var s=e.elements[r];if(!0!==(null===(o=null==s?void 0:s.operation)||void 0===o?void 0:o.invisible))switch(s.type){case'rect':Qt(t,s);break;case'text':Kt(t,s);break;case'image':Vt(t,s,n);break;case'svg':$t(t,s,n);break;case'html':Zt(t,s,n);break;case'circle':te(t,s)}}}var oe=function(){function t(){this._listeners=new Map}return t.prototype.on=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);null==n||n.push(e),this._listeners.set(t,n||[])}else this._listeners.set(t,[e])},t.prototype.off=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);if(Array.isArray(n))for(var o=0;o<(null==n?void 0:n.length);o++)if(n[o]===e){n.splice(o,1);break}this._listeners.set(t,n||[])}},t.prototype.trigger=function(t,e){var n=this._listeners.get(t);return!!Array.isArray(n)&&(n.forEach((function(t){t(e)})),!0)},t.prototype.has=function(t){if(this._listeners.has(t)){var e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1},t}();var ie,re=Yt.loader,se=re.loadImage,le=re.loadSVG,ae=re.loadHTML,ce=Yt.data.deepClone;!function(t){t.FREE="free",t.LOADING="loading",t.COMPLETE="complete"}(ie||(ie={}));var he,ue,fe,de,pe=function(){function t(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status=ie.FREE,this._waitingLoadQueue=[],this._opts=t,this._event=new oe,this._waitingLoadQueue=[]}return t.prototype.load=function(t,e){var n=this._resetLoadData(t,e),o=n[0],i=n[1];this._status===ie.FREE||this._status===ie.COMPLETE?(this._currentUUIDQueue=o,this._currentLoadData=i,this._loadTask()):this._status===ie.LOADING&&o.length>0&&this._waitingLoadQueue.push({uuidQueue:o,loadData:i})},t.prototype.on=function(t,e){this._event.on(t,e)},t.prototype.off=function(t,e){this._event.off(t,e)},t.prototype.isComplete=function(){return this._status===ie.COMPLETE},t.prototype.getContent=function(t){var e;return'loaded'===(null===(e=this._storageLoadData[t])||void 0===e?void 0:e.status)?this._storageLoadData[t].content:null},t.prototype._resetLoadData=function(t,e){for(var n={},o=[],i=this._storageLoadData,r=t.elements.length-1;r>=0;r--){var s=t.elements[r];['image','svg','html'].includes(s.type)&&(i[s.uuid]?e.includes(s.uuid)&&(n[s.uuid]=this._createEmptyLoadItem(s),o.push(s.uuid)):(n[s.uuid]=this._createEmptyLoadItem(s),o.push(s.uuid)))}return[o,n]},t.prototype._createEmptyLoadItem=function(t){var e='',n=t.type,o=t.w,i=t.h;if('image'===t.type)e=(r=t).desc.src||'';else if('svg'===t.type){e=(r=t).desc.svg||''}else if('html'===t.type){var r;e=function(t){return t.replace(/<script[\s\S]*?<\/script>/gi,'')}((r=t).desc.html||''),o=r.desc.width||t.w,i=r.desc.height||t.h}return{uuid:t.uuid,type:n,status:'null',content:null,source:e,elemW:o,elemH:i,element:ce(t)}},t.prototype._loadTask=function(){var t=this;if(this._status!==ie.LOADING){if(this._status=ie.LOADING,0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status=ie.COMPLETE,void this._event.trigger('complete',void 0);var e=this._waitingLoadQueue.shift();if(e){var n=e.uuidQueue,o=e.loadData;this._currentLoadData=o,this._currentUUIDQueue=n}}var i=this._opts.maxParallelNum,r=this._currentUUIDQueue.splice(0,i),s={};r.forEach((function(t,e){s[t]=e}));var l=[],a=function(){if(l.length>=i)return!1;if(0===r.length)return!0;for(var e=function(e){var n=r.shift();if(void 0===n)return"break";l.push(n),t._loadElementSource(t._currentLoadData[n]).then((function(e){var o,i;l.splice(l.indexOf(n),1);var s=a();t._storageLoadData[n]={uuid:n,type:t._currentLoadData[n].type,status:'loaded',content:e,source:t._currentLoadData[n].source,elemW:t._currentLoadData[n].elemW,elemH:t._currentLoadData[n].elemH,element:t._currentLoadData[n].element},0===l.length&&0===r.length&&!0===s&&(t._status=ie.FREE,t._loadTask()),t._event.trigger('load',{uuid:null===(o=t._storageLoadData[n])||void 0===o?void 0:o.uuid,type:t._storageLoadData[n].type,status:t._storageLoadData[n].status,content:t._storageLoadData[n].content,source:t._storageLoadData[n].source,elemW:t._storageLoadData[n].elemW,elemH:t._storageLoadData[n].elemH,element:null===(i=t._storageLoadData[n])||void 0===i?void 0:i.element})})).catch((function(e){var o,i,s,c,h,u,f,d,p,v,g,m;console.warn(e),l.splice(l.indexOf(n),1);var y=a();t._currentLoadData[n]&&(t._storageLoadData[n]={uuid:n,type:null===(o=t._currentLoadData[n])||void 0===o?void 0:o.type,status:'fail',content:null,error:e,source:null===(i=t._currentLoadData[n])||void 0===i?void 0:i.source,elemW:null===(s=t._currentLoadData[n])||void 0===s?void 0:s.elemW,elemH:null===(c=t._currentLoadData[n])||void 0===c?void 0:c.elemH,element:null===(h=t._currentLoadData[n])||void 0===h?void 0:h.element}),0===l.length&&0===r.length&&!0===y&&(t._status=ie.FREE,t._loadTask()),t._currentLoadData[n]&&t._event.trigger('error',{uuid:n,type:null===(u=t._storageLoadData[n])||void 0===u?void 0:u.type,status:null===(f=t._storageLoadData[n])||void 0===f?void 0:f.status,content:null===(d=t._storageLoadData[n])||void 0===d?void 0:d.content,source:null===(p=t._storageLoadData[n])||void 0===p?void 0:p.source,elemW:null===(v=t._storageLoadData[n])||void 0===v?void 0:v.elemW,elemH:null===(g=t._storageLoadData[n])||void 0===g?void 0:g.elemH,element:null===(m=t._storageLoadData[n])||void 0===m?void 0:m.element})}))},n=l.length;n<i;n++){if("break"===e())break}return!1};a()}},t.prototype._loadElementSource=function(t){return St(this,void 0,void 0,(function(){return xt(this,(function(e){switch(e.label){case 0:return t&&'image'===t.type?[4,se(t.source)]:[3,2];case 1:case 3:case 5:return[2,e.sent()];case 2:return t&&'svg'===t.type?[4,le(t.source)]:[3,4];case 4:return t&&'html'===t.type?[4,ae(t.source,{width:t.elemW,height:t.elemH})]:[3,6];case 6:throw Error('Element\'s source is not support!')}}))}))},t}(),ve=function(){function t(){this._listeners=new Map}return t.prototype.on=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);null==n||n.push(e),this._listeners.set(t,n||[])}else this._listeners.set(t,[e])},t.prototype.off=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);if(Array.isArray(n))for(var o=0;o<(null==n?void 0:n.length);o++)if(n[o]===e){n.splice(o,1);break}this._listeners.set(t,n||[])}},t.prototype.trigger=function(t,e){var n=this._listeners.get(t);return!!Array.isArray(n)&&(n.forEach((function(t){t(e)})),!0)},t.prototype.has=function(t){if(this._listeners.has(t)){var e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1},t}(),ge=Symbol('_queue'),me=Symbol('_ctx'),ye=Symbol('_status'),_e=Symbol('_loader'),Se=Symbol('_opts'),xe=Symbol('_freeze'),be=Symbol('_drawFrame'),we=Symbol('_retainQueueOneItem'),Ee=window.requestAnimationFrame,Pe=Yt.uuid.createUUID,Ce=Yt.data.deepClone,ze=Yt.Context;!function(t){t.NULL="null",t.FREE="free",t.DRAWING="drawing",t.FREEZE="freeze"}(de||(de={}));var De=function(t){function e(e){var n=t.call(this)||this;return n[he]=[],n[ue]=null,n[fe]=de.NULL,n[Se]=e,n[_e]=new pe({maxParallelNum:6}),n[_e].on('load',(function(t){n[be](),n.trigger('load',{element:t.element})})),n[_e].on('error',(function(t){n.trigger('error',{element:t.element,error:t.error})})),n[_e].on('complete',(function(){n.trigger('loadComplete',{t:Date.now()})})),n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}yt(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),e.prototype.render=function(t,e,n){var o=(n||{}).changeResourceUUIDs,i=void 0===o?[]:o;this[ye]=de.FREE;var r=Ce(e);if(Array.isArray(r.elements)&&r.elements.forEach((function(t){'string'==typeof t.uuid&&t.uuid||(t.uuid=Pe())})),!this[me])if(this[Se]&&'[object HTMLCanvasElement]'===Object.prototype.toString.call(t)){var s=this[Se],l=s.width,a=s.height,c=s.contextWidth,h=s.contextHeight,u=s.devicePixelRatio,f=t;f.width=l*u,f.height=a*u;var d=f.getContext('2d');this[me]=new ze(d,{width:l,height:a,contextWidth:c||l,contextHeight:h||a,devicePixelRatio:u})}else t&&(this[me]=t);if(![de.FREEZE].includes(this[ye])){var p=Ce({data:r});this[ge].push(p),this[be](),this[_e].load(r,i||[])}},e.prototype.getContext=function(){return this[me]},e.prototype.thaw=function(){this[ye]=de.FREE},e.prototype[(he=ge,ue=me,fe=ye,xe)]=function(){this[ye]=de.FREEZE},e.prototype[be]=function(){var t=this;this[ye]!==de.FREEZE&&Ee((function(){if(t[ye]!==de.FREEZE){var e=t[me],n=t[ge][0],o=!1;t[ge].length>1?n=t[ge].shift():o=!0,!0!==t[_e].isComplete()?(t[be](),n&&e&&ne(e,n.data,t[_e])):n&&e?(ne(e,n.data,t[_e]),t[we](),o?t[ye]=de.FREE:t[be]()):t[ye]=de.FREE,t.trigger('drawFrame',{t:Date.now()}),!0===t[_e].isComplete()&&1===t[ge].length&&t[ye]===de.FREE&&(e&&t[ge][0]&&t[ge][0].data&&ne(e,t[ge][0].data,t[_e]),t.trigger('drawFrameComplete',{t:Date.now()}),t[xe]())}}))},e.prototype[we]=function(){if(!(this[ge].length<=1)){var t=Ce(this[ge][this[ge].length-1]);this[ge]=[t]}},e}(ve),Le=mt.color.isColorStr;function Te(t){return'number'==typeof t&&(t>0||t<=0)}function Me(t){return'number'==typeof t&&t>=0}function ke(t){return'string'==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(""+t)}function Ie(t){return'string'==typeof t&&/^(data:image\/)/.test(""+t)}var We={x:function(t){return Te(t)},y:function(t){return Te(t)},w:Me,h:function(t){return'number'==typeof t&&t>=0},angle:function(t){return'number'==typeof t&&t>=-360&&t<=360},number:Te,borderWidth:function(t){return Me(t)},borderRadius:function(t){return Te(t)&&t>=0},color:function(t){return Le(t)},imageSrc:function(t){return Ie(t)||ke(t)},imageURL:ke,imageBase64:Ie,svg:function(t){return'string'==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test((""+t).trim())&&/<\/[\s]{0,}svg>$/i.test((""+t).trim())},html:function(t){var e=!1;if('string'==typeof t){var n=document.createElement('div');n.innerHTML=t,n.children.length>0&&(e=!0),n=null}return e},text:function(t){return'string'==typeof t},fontSize:function(t){return Te(t)&&t>0},lineHeight:function(t){return Te(t)&&t>0},textAlign:function(t){return['center','left','right'].includes(t)},fontFamily:function(t){return'string'==typeof t&&t.length>0},fontWeight:function(t){return['bold'].includes(t)},strokeWidth:function(t){return Te(t)&&t>0}};function Oe(t){void 0===t&&(t={});var e=t.borderColor,n=t.borderRadius,o=t.borderWidth;return!(t.hasOwnProperty('borderColor')&&!We.color(e))&&(!(t.hasOwnProperty('borderRadius')&&!We.number(n))&&!(t.hasOwnProperty('borderWidth')&&!We.number(o)))}var Ue={attrs:function(t){var e=t.x,n=t.y,o=t.w,i=t.h,r=t.angle;return!!(We.x(e)&&We.y(n)&&We.w(o)&&We.h(i)&&We.angle(r))&&(r>=-360&&r<=360)},textDesc:function(t){var e=t.text,n=t.color,o=t.fontSize,i=t.lineHeight,r=t.fontFamily,s=t.textAlign,l=t.fontWeight,a=t.bgColor,c=t.strokeWidth,h=t.strokeColor;return!!We.text(e)&&(!!We.color(n)&&(!!We.fontSize(o)&&(!(t.hasOwnProperty('bgColor')&&!We.color(a))&&(!(t.hasOwnProperty('fontWeight')&&!We.fontWeight(l))&&(!(t.hasOwnProperty('lineHeight')&&!We.lineHeight(i))&&(!(t.hasOwnProperty('fontFamily')&&!We.fontFamily(r))&&(!(t.hasOwnProperty('textAlign')&&!We.textAlign(s))&&(!(t.hasOwnProperty('strokeWidth')&&!We.strokeWidth(c))&&(!(t.hasOwnProperty('strokeColor')&&!We.color(h))&&!!Oe(t))))))))))},rectDesc:function(t){var e=t.bgColor;return!(t.hasOwnProperty('bgColor')&&!We.color(e))&&!!Oe(t)},circleDesc:function(t){var e=t.bgColor,n=t.borderColor,o=t.borderWidth;return!(t.hasOwnProperty('bgColor')&&!We.color(e))&&(!(t.hasOwnProperty('borderColor')&&!We.color(n))&&!(t.hasOwnProperty('borderWidth')&&!We.number(o)))},imageDesc:function(t){var e=t.src;return!!We.imageSrc(e)},svgDesc:function(t){var e=t.svg;return!!We.svg(e)},htmlDesc:function(t){var e=t.html;return!!We.html(e)}};function Re(t){return t/180*Math.PI}function Ae(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}function Fe(t,e){var n=e.x-t.x,o=t.y-e.y;if(0===n){if(o<0)return Math.PI/2;if(o>0)return 1.5*Math.PI}else if(0===o){if(n<0)return Math.PI;if(n>0)return 0}return n>0&&o<0?Math.atan(Math.abs(o)/Math.abs(n)):n<0&&o<0?Math.PI-Math.atan(Math.abs(o)/Math.abs(n)):n<0&&o>0?Math.PI+Math.atan(Math.abs(o)/Math.abs(n)):n>0&&o>0?2*Math.PI-Math.atan(Math.abs(o)/Math.abs(n)):null}var Ye={elementWrapper:{color:'#2ab6f1',lockColor:'#aaaaaa',controllerSize:6,lineWidth:1,lineDash:[4,3]}};var Xe=function(){function t(){this._listeners=new Map}return t.prototype.on=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);null==n||n.push(e),this._listeners.set(t,n||[])}else this._listeners.set(t,[e])},t.prototype.off=function(t,e){if(this._listeners.has(t)){var n=this._listeners.get(t);if(Array.isArray(n))for(var o=0;o<(null==n?void 0:n.length);o++)if(n[o]===e){n.splice(o,1);break}this._listeners.set(t,n||[])}},t.prototype.trigger=function(t,e){var n=this._listeners.get(t);return!!Array.isArray(n)&&(n.forEach((function(t){t(e)})),!0)},t.prototype.has=function(t){if(this._listeners.has(t)){var e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1},t}();function Ne(t,e){var n,o;return(null===(n=null==t?void 0:t.desc)||void 0===n?void 0:n.src)!==(null===(o=null==e?void 0:e.desc)||void 0===o?void 0:o.src)}function He(t,e){var n,o;return(null===(n=null==t?void 0:t.desc)||void 0===n?void 0:n.svg)!==(null===(o=null==e?void 0:e.desc)||void 0===o?void 0:o.svg)}function Be(t,e){var n,o,i,r,s,l;return(null===(n=null==t?void 0:t.desc)||void 0===n?void 0:n.html)!==(null===(o=null==e?void 0:e.desc)||void 0===o?void 0:o.html)||(null===(i=null==t?void 0:t.desc)||void 0===i?void 0:i.width)!==(null===(r=null==e?void 0:e.desc)||void 0===r?void 0:r.width)||(null===(s=null==t?void 0:t.desc)||void 0===s?void 0:s.height)!==(null===(l=null==e?void 0:e.desc)||void 0===l?void 0:l.height)}function je(t,e){var n=null,o=!1;switch(e.type){case'image':o=Ne(t,e);break;case'svg':o=He(t,e);break;case'html':o=Be(t,e)}return!0===o&&(n=e.uuid),n}function Ge(t){var e={};return t.elements.forEach((function(t){e[t.uuid]=t})),e}function Qe(t,e,n){return Ve(t,Ae(e),Re(e.angle||0)||0,n)}function Ve(t,e,n,o){e&&(n>0||n<0)&&(t.translate(e.x,e.y),t.rotate(n),t.translate(-e.x,-e.y)),o(t),e&&(n>0||n<0)&&(t.translate(e.x,e.y),t.rotate(-n),t.translate(-e.x,-e.y))}function $e(t){var e=t.toFixed(2);return parseFloat(e)}function Ze(t){return $e(t%360)}var qe=Object.keys({text:{},rect:{},image:{},svg:{},circle:{},html:{}}),Je=mt.uuid.createUUID,Ke=15,tn=function(){function t(t){this._ctx=t}return t.prototype.initData=function(t){return t.elements.forEach((function(t){t.uuid&&'string'==typeof t.uuid||(t.uuid=Je())})),t},t.prototype.isPointInElement=function(t,e){for(var n,o,i=this._ctx,r=-1,s=null,l=function(l){var a=e.elements[l];if(!0===(null===(n=a.operation)||void 0===n?void 0:n.invisible))return"continue";var c=0;return(null===(o=a.desc)||void 0===o?void 0:o.borderWidth)>0&&(c=a.desc.borderWidth),Qe(i,a,(function(){i.beginPath(),i.moveTo(a.x-c,a.y-c),i.lineTo(a.x+a.w+c,a.y-c),i.lineTo(a.x+a.w+c,a.y+a.h+c),i.lineTo(a.x-c,a.y+a.h+c),i.lineTo(a.x-c,a.y-c),i.closePath(),i.isPointInPath(t.x,t.y)&&(r=l,s=a.uuid)})),r>=0?"break":void 0},a=e.elements.length-1;a>=0;a--){if("break"===l(a))break}return[r,s]},t.prototype.dragElement=function(t,e,n,o,i){var r=this.getElementIndex(t,e);if(t.elements[r]){var s=n.x-o.x,l=n.y-o.y;t.elements[r].x+=s/i,t.elements[r].y+=l/i,this.limitElementAttrs(t.elements[r])}},t.prototype.transformElement=function(t,e,n,o,i,r){var s,l,a=this.getElementIndex(t,e);if(!t.elements[a])return null;if(!0===(null===(l=null===(s=t.elements[a])||void 0===s?void 0:s.operation)||void 0===l?void 0:l.lock))return null;var c=(n.x-o.x)/i,h=(n.y-o.y)/i,u=t.elements[a];if(['top-left','top','top-right','right','bottom-right','bottom','bottom-left','left'].includes(r)){var f=function(t,e,n,o,i){var r={x:t.x,y:t.y,w:t.w,h:t.h};switch(t.angle,o){case'top-left':t.w-e>0&&t.h-n>0&&(r.x+=e,r.y+=n,r.w-=e,r.h-=n);break;case'top':if(0===t.angle||Math.abs(t.angle)<Ke)r.h-n>0&&(r.y+=n,r.h-=n);else if(t.angle>0||t.angle<0){var s=t.angle>0?t.angle:Math.max(0,t.angle+360),l=nn(e,n),a=r.x+t.w/2,c=r.y+t.h/2;if(s<90){l=0-on(l,n);var h=en(s);a+=(p=l/2)*Math.sin(h),c-=p*Math.cos(h)}else if(s<180){l=on(l,e);h=en(s-90);a+=(p=l/2)*Math.cos(h),c+=p*Math.sin(h)}else if(s<270){l=on(l,n);h=en(s-180);a-=(p=l/2)*Math.sin(h),c+=p*Math.cos(h)}else if(s<360){l=0-on(l,e);h=en(s-270);a-=(p=l/2)*Math.cos(h),c-=p*Math.sin(h)}r.h+l>0&&(r.h=r.h+l,r.x=a-r.w/2,r.y=c-r.h/2)}else r.h-n>0&&(r.y+=n,r.h-=n);break;case'top-right':r.h-n>0&&r.w+e>0&&(r.y+=n,r.w+=e,r.h-=n);break;case'right':if(0===t.angle||Math.abs(t.angle)<Ke)t.w+e>0&&(r.w+=e);else if(t.angle>0||t.angle<0){var u=t.angle>0?t.angle:Math.max(0,t.angle+360);l=nn(e,n),a=r.x+t.w/2,c=r.y+t.h/2;if(u<90){l=on(l,n);h=en(u);a+=(p=l/2)*Math.cos(h),c+=p*Math.sin(h)}else if(u<180){l=on(l,n);h=en(u-90);a-=(p=l/2)*Math.sin(h),c+=p*Math.cos(h)}else if(u<270){l=on(l,n);h=en(u-180);a+=(p=l/2)*Math.cos(h),c+=p*Math.sin(h),l=0-l}else if(u<360){l=on(l,e);h=en(u-270);a+=(p=l/2)*Math.sin(h),c-=p*Math.cos(h)}r.w+l>0&&(r.w=r.w+l,r.x=a-r.w/2,r.y=c-r.h/2)}else t.w+e>0&&(r.w+=e);break;case'bottom-right':t.w+e>0&&t.h+n>0&&(r.w+=e,r.h+=n);break;case'bottom':if(0===t.angle||Math.abs(t.angle)<Ke)t.h+n>0&&(r.h+=n);else if(t.angle>0||t.angle<0){var f=t.angle>0?t.angle:Math.max(0,t.angle+360);l=nn(e,n),a=r.x+t.w/2,c=r.y+t.h/2;if(f<90){l=on(l,n);h=en(f);a-=(p=l/2)*Math.sin(h),c+=p*Math.cos(h)}else if(f<180){l=0-on(l,e);h=en(f-90);a-=(p=l/2)*Math.cos(h),c-=p*Math.sin(h)}else if(f<270){l=on(l,e);h=en(f-180);a+=(p=l/2)*Math.sin(h),c-=p*Math.cos(h)}else if(f<360){l=on(l,e);h=en(f-270);a+=(p=l/2)*Math.cos(h),c+=p*Math.sin(h)}r.h+l>0&&(r.h=r.h+l,r.x=a-r.w/2,r.y=c-r.h/2)}else t.h+n>0&&(r.h+=n);break;case'bottom-left':t.w-e>0&&t.h+n>0&&(r.x+=e,r.w-=e,r.h+=n);break;case'left':if(0===t.angle||Math.abs(t.angle)<Ke)t.w-e>0&&(r.x+=e,r.w-=e);else if(t.angle>0||t.angle<0){var d=t.angle>0?t.angle:Math.max(0,t.angle+360);l=nn(e,n),a=r.x+t.w/2,c=r.y+t.h/2;if(d<90){l=0-on(l,e);h=en(d);a-=(p=l/2)*Math.cos(h),c-=p*Math.sin(h)}else if(d<180){l=on(l,e);h=en(d-90);a+=(p=l/2)*Math.sin(h),c-=p*Math.cos(h)}else if(d<270){l=on(l,n);h=en(d-180);a+=(p=l/2)*Math.cos(h),c+=p*Math.sin(h)}else if(d<360){l=on(l,n);var p;h=en(d-270);a-=(p=l/2)*Math.sin(h),c+=p*Math.cos(h)}r.w+l>0&&(r.w=r.w+l,r.x=a-r.w/2,r.y=c-r.h/2)}else t.w-e>0&&(r.x+=e,r.w-=e)}return r}(u,c,h,r);u.x=f.x,u.y=f.y,u.w=f.w,u.h=f.h}else if('rotate'===r){var d=function(t,e,n){var o=Fe(t,e),i=Fe(t,n);return null!==i&&null!==o?o>3*Math.PI/2&&i<Math.PI/2?i+(2*Math.PI-o):i>3*Math.PI/2&&o<Math.PI/2?o+(2*Math.PI-i):i-o:0}(Ae(u),o,n);u.angle=(u.angle||0)+function(t){return t/Math.PI*180}(d)}return this.limitElementAttrs(u),{width:$e(u.w),height:$e(u.h),angle:Ze(u.angle||0)}},t.prototype.getElementIndex=function(t,e){for(var n=-1,o=0;o<t.elements.length;o++)if(t.elements[o].uuid===e){n=o;break}return n},t.prototype.limitElementAttrs=function(t){t.x=$e(t.x),t.y=$e(t.y),t.w=$e(t.w),t.h=$e(t.h),t.angle=Ze(t.angle||0)},t}();function en(t){return t*Math.PI/180}function nn(t,e){return Math.sqrt(t*t+e*e)}function on(t,e){return e>0?Math.abs(t):0-Math.abs(t)}var rn=mt.data.deepClone,sn=function(){function t(t,e){this._areaStart={x:0,y:0},this._areaEnd={x:0,y:0},this._board=t,this._ctx=this._board.getContext(),this._coreConfig=e,this._helperConfig={elementIndexMap:{}}}return t.prototype.updateConfig=function(t,e){this._updateElementIndex(t),this._updateSelectedElementWrapper(t,e),this._updateSelectedElementListWrapper(t,e)},t.prototype.getConfig=function(){return rn(this._helperConfig)},t.prototype.getElementIndexByUUID=function(t){var e=this._helperConfig.elementIndexMap[t];return e>=0?e:null},t.prototype.isPointInElementWrapperController=function(t,e){var n,o,i=this._ctx,r=(null===(o=null===(n=this._helperConfig)||void 0===n?void 0:n.selectedElementWrapper)||void 0===o?void 0:o.uuid)||null,s=null,l=null,a=null;if(!this._helperConfig.selectedElementWrapper)return{uuid:r,selectedControllerDirection:l,directIndex:s,hoverControllerDirection:a};var c=this._helperConfig.selectedElementWrapper,h=[c.controllers.right,c.controllers.topRight,c.controllers.top,c.controllers.topLeft,c.controllers.left,c.controllers.bottomLeft,c.controllers.bottom,c.controllers.bottomRight],u=['right','top-right','top','top-left','left','bottom-left','bottom','bottom-right'],f=mt.data.deepClone(u),d=0;if(e&&r){var p=this.getElementIndexByUUID(r);if(null!==p&&p>=0){var v=e.elements[p].angle;v<0&&(v+=360),v<45?d=0:v<90?d=1:v<135?d=2:v<180?d=3:v<225?d=4:v<270?d=5:v<315&&(d=6)}}if(d>0&&(f=f.slice(-d).concat(f.slice(0,-d))),Ve(i,c.translate,c.radian||0,(function(){for(var e=0;e<h.length;e++){var n=h[e];if(!0!==n.invisible&&(i.beginPath(),i.arc(n.x,n.y,c.controllerSize,0,2*Math.PI),i.closePath(),i.isPointInPath(t.x,t.y)&&(l=u[e],a=f[e]),l)){s=e;break}}})),null===l){var g=c.controllers.rotate;!0!==g.invisible&&Ve(i,c.translate,c.radian||0,(function(){i.beginPath(),i.arc(g.x,g.y,c.controllerSize,0,2*Math.PI),i.closePath(),i.isPointInPath(t.x,t.y)&&(l='rotate',a='rotate')}))}return{uuid:r,selectedControllerDirection:l,hoverControllerDirection:a,directIndex:s}},t.prototype.isPointInElementList=function(t,e){for(var n,o,i,r=this._ctx,s=-1,l=null,a=(null===(n=this._helperConfig)||void 0===n?void 0:n.selectedElementListWrappers)||[],c=function(n){var c=a[n],u=h._helperConfig.elementIndexMap[c.uuid],f=e.elements[u];if(!f)return"continue";if(!0===(null===(o=f.operation)||void 0===o?void 0:o.invisible))return"continue";var d=0;return(null===(i=f.desc)||void 0===i?void 0:i.borderWidth)>0&&(d=f.desc.borderWidth),Qe(r,f,(function(){r.beginPath(),r.moveTo(f.x-d,f.y-d),r.lineTo(f.x+f.w+d,f.y-d),r.lineTo(f.x+f.w+d,f.y+f.h+d),r.lineTo(f.x-d,f.y+f.h+d),r.lineTo(f.x-d,f.y-d),r.closePath(),r.isPointInPath(t.x,t.y)&&(s=n,l=f.uuid)})),s>=0?"break":void 0},h=this,u=0;u<a.length;u++){if("break"===c(u))break}return!!(l&&s>=0)},t.prototype.startSelectArea=function(t){this._areaStart=t,this._areaEnd=t},t.prototype.changeSelectArea=function(t){this._areaEnd=t,this._calcSelectedArea()},t.prototype.clearSelectedArea=function(){this._areaStart={x:0,y:0},this._areaEnd={x:0,y:0},this._calcSelectedArea()},t.prototype.calcSelectedElements=function(t){var e=this._ctx.getTransform(),n=e.scale,o=void 0===n?1:n,i=e.scrollX,r=void 0===i?0:i,s=e.scrollY,l=void 0===s?0:s,a=this._areaStart,c=this._areaEnd,h=(Math.min(a.x,c.x)-r)/o,u=(Math.min(a.y,c.y)-l)/o,f=Math.abs(c.x-a.x)/o,d=Math.abs(c.y-a.y)/o,p=[],v=this._ctx;return v.beginPath(),v.moveTo(h,u),v.lineTo(h+f,u),v.lineTo(h+f,u+d),v.lineTo(h,u+d),v.lineTo(h,u),v.closePath(),t.elements.forEach((function(t){var e;if(!0!==(null===(e=null==t?void 0:t.operation)||void 0===e?void 0:e.invisible)){var n=t.x+t.w/2,o=t.y+t.h/2;v.isPointInPathWithoutScroll(n,o)&&p.push(t.uuid)}})),p},t.prototype._calcSelectedArea=function(){var t=this._areaStart,e=this._areaEnd,n=this._ctx.getTransform(),o=n.scale,i=void 0===o?1:o,r=n.scrollX,s=void 0===r?0:r,l=n.scrollY,a=void 0===l?0:l,c=this._coreConfig.elementWrapper,h=c.lineWidth/i,u=c.lineDash.map((function(t){return t/i}));this._helperConfig.selectedAreaWrapper={x:(Math.min(t.x,e.x)-s)/i,y:(Math.min(t.y,e.y)-a)/i,w:Math.abs(e.x-t.x)/i,h:Math.abs(e.y-t.y)/i,startPoint:{x:t.x,y:t.y},endPoint:{x:e.x,y:e.y},lineWidth:h,lineDash:u,color:c.color}},t.prototype._updateElementIndex=function(t){var e=this;this._helperConfig.elementIndexMap={},t.elements.forEach((function(t,n){e._helperConfig.elementIndexMap[t.uuid]=n}))},t.prototype._updateSelectedElementWrapper=function(t,e){var n,o=e.selectedUUID;if('string'==typeof o&&this._helperConfig.elementIndexMap[o]>=0){var i=this._helperConfig.elementIndexMap[o],r=t.elements[i];if(!0!==(null===(n=null==r?void 0:r.operation)||void 0===n?void 0:n.invisible)){var s=this._createSelectedElementWrapper(r,e);this._helperConfig.selectedElementWrapper=s}}else delete this._helperConfig.selectedElementWrapper},t.prototype._updateSelectedElementListWrapper=function(t,e){var n=this,o=e.selectedUUIDList,i=[];t.elements.forEach((function(t,r){if(null==o?void 0:o.includes(t.uuid)){var s=n._createSelectedElementWrapper(t,e);i.push(s)}})),this._helperConfig.selectedElementListWrappers=i},t.prototype._createSelectedElementWrapper=function(t,e){var n,o,i,r,s,l,a,c,h,u,f,d,p=e.scale,v=this._coreConfig.elementWrapper,g=v.controllerSize/p,m=v.lineWidth/p,y=v.lineDash.map((function(t){return t/p})),_=(null===(n=t.desc)||void 0===n?void 0:n.borderWidth)||0,S=!1;'number'==typeof t.angle&&Math.abs(t.angle)>15&&(S=!0);var x={uuid:t.uuid,controllerSize:g,lock:!0===(null===(o=null==t?void 0:t.operation)||void 0===o?void 0:o.lock),controllers:{topLeft:{x:t.x-g-_,y:t.y-g-_,invisible:S||!0===(null===(i=null==t?void 0:t.operation)||void 0===i?void 0:i.disbaleScale)},top:{x:t.x+t.w/2,y:t.y-g-_,invisible:!0===(null===(r=null==t?void 0:t.operation)||void 0===r?void 0:r.disbaleScale)},topRight:{x:t.x+t.w+g+_,y:t.y-g-_,invisible:S||!0===(null===(s=null==t?void 0:t.operation)||void 0===s?void 0:s.disbaleScale)},right:{x:t.x+t.w+g+_,y:t.y+t.h/2,invisible:!0===(null===(l=null==t?void 0:t.operation)||void 0===l?void 0:l.disbaleScale)},bottomRight:{x:t.x+t.w+g+_,y:t.y+t.h+g+_,invisible:S||!0===(null===(a=null==t?void 0:t.operation)||void 0===a?void 0:a.disbaleScale)},bottom:{x:t.x+t.w/2,y:t.y+t.h+g+_,invisible:!0===(null===(c=null==t?void 0:t.operation)||void 0===c?void 0:c.disbaleScale)},bottomLeft:{x:t.x-g-_,y:t.y+t.h+g+_,invisible:S||!0===(null===(h=null==t?void 0:t.operation)||void 0===h?void 0:h.disbaleScale)},left:{x:t.x-g-_,y:t.y+t.h/2,invisible:!0===(null===(u=null==t?void 0:t.operation)||void 0===u?void 0:u.disbaleScale)},rotate:{x:t.x+t.w/2,y:t.y-g-(2*g+12)-_,invisible:!0===(null===(f=null==t?void 0:t.operation)||void 0===f?void 0:f.disbaleRotate)}},lineWidth:m,lineDash:y,color:!0===(null===(d=null==t?void 0:t.operation)||void 0===d?void 0:d.lock)?v.lockColor:v.color};return'number'==typeof t.angle&&(t.angle>0||t.angle<0)&&(x.radian=Re(t.angle),x.translate=Ae(t)),x},t}(),ln=Symbol('_displayCtx'),an=Symbol('_helper'),cn=Symbol('_element'),hn=Symbol('_opts'),un=function(){function t(t){this[hn]=t,this[ln]=this[hn].board,this[cn]=this[hn].element,this[an]=this[hn].helper}return t.prototype.isEffectivePoint=function(t){var e=this[ln].getScrollLineWidth(),n=this[ln].getScreenInfo();return t.x<=n.width-e&&t.y<=n.height-e},t.prototype.judgePointCursor=function(t,e){var n='auto',o=null;if(!this.isEffectivePoint(t))return{cursor:n,elementUUID:o};var i=this[an].isPointInElementWrapperController(t,e),r=i.uuid,s=i.hoverControllerDirection;if(r&&s){switch(s){case'top-right':n='ne-resize';break;case'top-left':n='nw-resize';break;case'top':n='n-resize';break;case'right':n='e-resize';break;case'bottom-right':n='se-resize';break;case'bottom':n='s-resize';break;case'bottom-left':n='sw-resize';break;case'left':n='w-resize';break;case'rotate':n='grab'}r&&(o=r)}else{var l=this[cn].isPointInElement(t,e),a=l[0],c=l[1];a>=0&&(n='move'),c&&(o=c)}return{cursor:n,elementUUID:o}},t}();function fn(t){var e={elements:[]};return Array.isArray(null==t?void 0:t.elements)&&(null==t||t.elements.forEach((function(t){void 0===t&&(t={}),function(t){if(!(dn(t.x)&&dn(t.y)&&dn(t.w)&&dn(t.h)))return!1;if('string'!=typeof t.type||!qe.includes(t.type))return!1;return!0}(t)&&e.elements.push(t)}))),'string'==typeof t.bgColor&&(e.bgColor=t.bgColor),e}function dn(t){return t>=0||t<0}var pn,vn,gn=function(){function t(){this._temp={hasInited:!1}}return t.prototype.set=function(t,e){this._temp[t]=e},t.prototype.get=function(t){return this._temp[t]},t.prototype.clear=function(){this._temp={hasInited:!1}},t}(),mn=Symbol('_board'),yn=Symbol('_data'),_n=Symbol('_opts'),Sn=Symbol('_config'),xn=Symbol('_renderer'),bn=Symbol('_element'),wn=Symbol('_tempData'),En=Symbol('_draw'),Pn=Symbol('_coreEvent'),Cn=Symbol('_emitChangeScreen'),zn=Symbol('_emitChangeData'),Dn=Symbol('_engine');!function(t){t.NULL="null",t.SELECT_ELEMENT="select-element",t.SELECT_ELEMENT_LIST="select-element-list",t.SELECT_ELEMENT_WRAPPER_CONTROLLER="select-element-wrapper-controller",t.SELECT_AREA="select-area"}(pn||(pn={})),function(t){t.DRAGGING="dragging",t.NULL="null"}(vn||(vn={}));var Ln=mt.data.deepClone,Tn=mt.uuid.createUUID;function Mn(){return{hasInited:!1,mode:pn.NULL,cursorStatus:vn.NULL,selectedUUID:null,selectedUUIDList:[],hoverUUID:null,selectedControllerDirection:null,hoverControllerDirection:null,prevPoint:null}}var kn=function(){function t(){this._temp=Mn()}return t.prototype.set=function(t,e){this._temp[t]=e},t.prototype.get=function(t){return this._temp[t]},t.prototype.clear=function(){this._temp=Mn()},t}(),In=mt.time,Wn=mt.data.deepClone,On=function(){function t(t){this._plugins=[];var e=t.board,n=t.config,o=t.element,i=new sn(e,n);this._opts=t,this.temp=new kn,this.helper=i,this._mapper=new un({board:e,helper:i,element:o})}return t.prototype.addPlugin=function(t){this._plugins.push(t)},t.prototype.getHelperConfig=function(){return this.helper.getConfig()},t.prototype.updateHelperConfig=function(t){var e,n=this._opts,o=n.board,i=n.getDataFeekback,r=n.config,s=i(),l=o.getTransform();this.helper.updateConfig(s,{width:t.width,height:t.height,devicePixelRatio:t.devicePixelRatio,canScroll:!0===(null===(e=null==r?void 0:r.scrollWrapper)||void 0===e?void 0:e.use),selectedUUID:this.temp.get('selectedUUID'),selectedUUIDList:this.temp.get('selectedUUIDList'),scale:l.scale,scrollX:l.scrollX,scrollY:l.scrollY})},t.prototype.init=function(){this._initEvent()},t.prototype._initEvent=function(){if(!0!==this.temp.get('hasInited')){var t=this._opts.board;t.on('hover',In.throttle(this._handleHover.bind(this),32)),t.on('leave',In.throttle(this._handleLeave.bind(this),32)),t.on('point',In.throttle(this._handleClick.bind(this),16)),t.on('doubleClick',this._handleDoubleClick.bind(this)),t.on('point',this._handlePoint.bind(this)),t.on('moveStart',this._handleMoveStart.bind(this)),t.on('move',In.throttle(this._handleMove.bind(this),16)),t.on('moveEnd',this._handleMoveEnd.bind(this))}},t.prototype._handleDoubleClick=function(t){var e,n,o,i=this._opts,r=i.element,s=i.getDataFeekback,l=i.drawFeekback,a=i.coreEvent,c=s(),h=r.isPointInElement(t,c),u=h[0],f=h[1];if(u>=0&&f){var d=Wn(null===(e=c.elements)||void 0===e?void 0:e[u]);!0!==(null===(n=null==d?void 0:d.operation)||void 0===n?void 0:n.invisible)&&a.trigger('screenDoubleClickElement',{index:u,uuid:f,element:Wn(null===(o=c.elements)||void 0===o?void 0:o[u])})}l()},t.prototype._handlePoint=function(t){var e,n,o;if(this._mapper.isEffectivePoint(t)){var i=this._opts,r=i.element,s=i.getDataFeekback,l=i.selectElementByIndex,a=i.coreEvent,c=i.emitChangeScreen,h=i.drawFeekback,u=this.helper,f=s();if(u.isPointInElementList(t,f))this.temp.set('mode',pn.SELECT_ELEMENT_LIST);else{var d=u.isPointInElementWrapperController(t,f),p=d.uuid,v=d.selectedControllerDirection;if(p&&v)this.temp.set('mode',pn.SELECT_ELEMENT_WRAPPER_CONTROLLER),this.temp.set('selectedControllerDirection',v),this.temp.set('selectedUUID',p);else{var g=r.isPointInElement(t,f),m=g[0],y=g[1];m>=0&&!0!==(null===(n=null===(e=f.elements[m])||void 0===e?void 0:e.operation)||void 0===n?void 0:n.invisible)?(l(m,{useMode:!0}),'string'==typeof y&&a.has('screenSelectElement')&&(a.trigger('screenSelectElement',{index:m,uuid:y,element:Wn(null===(o=f.elements)||void 0===o?void 0:o[m])}),c()),this.temp.set('mode',pn.SELECT_ELEMENT)):(this.temp.set('selectedUUIDList',[]),this.temp.set('selectedUUID',null),this.temp.set('mode',pn.SELECT_AREA))}}h()}},t.prototype._handleClick=function(t){var e,n=this._opts,o=n.element,i=n.getDataFeekback,r=n.coreEvent,s=n.drawFeekback,l=i(),a=o.isPointInElement(t,l),c=a[0],h=a[1];c>=0&&h&&r.trigger('screenClickElement',{index:c,uuid:h,element:Wn(null===(e=l.elements)||void 0===e?void 0:e[c])}),s()},t.prototype._handleMoveStart=function(t){var e=this._opts,n=e.element,o=e.getDataFeekback,i=e.coreEvent,r=o(),s=this.helper;this.temp.set('prevPoint',t);var l=this.temp.get('selectedUUID');this.temp.get('mode')===pn.SELECT_ELEMENT_LIST||(this.temp.get('mode')===pn.SELECT_ELEMENT?'string'==typeof l&&i.has('screenMoveElementStart')&&i.trigger('screenMoveElementStart',{index:n.getElementIndex(r,l),uuid:l,x:t.x,y:t.y}):this.temp.get('mode')===pn.SELECT_AREA&&s.startSelectArea(t))},t.prototype._handleMove=function(t){var e=this._opts.drawFeekback,n=this.helper;this.temp.get('mode')===pn.SELECT_ELEMENT_LIST?(this._dragElements(this.temp.get('selectedUUIDList'),t,this.temp.get('prevPoint')),e(),this.temp.set('cursorStatus',vn.DRAGGING)):'string'==typeof this.temp.get('selectedUUID')?this.temp.get('mode')===pn.SELECT_ELEMENT?(this._dragElements([this.temp.get('selectedUUID')],t,this.temp.get('prevPoint')),e(),this.temp.set('cursorStatus',vn.DRAGGING)):this.temp.get('mode')===pn.SELECT_ELEMENT_WRAPPER_CONTROLLER&&this.temp.get('selectedControllerDirection')&&(this._transfromElement(this.temp.get('selectedUUID'),t,this.temp.get('prevPoint'),this.temp.get('selectedControllerDirection')),this.temp.set('cursorStatus',vn.DRAGGING)):this.temp.get('mode')===pn.SELECT_AREA&&(n.changeSelectArea(t),e()),this.temp.set('prevPoint',t)},t.prototype._dragElements=function(t,e,n){if(n){var o=this._opts,i=o.board,r=o.element,s=o.getDataFeekback,l=o.drawFeekback,a=s(),c=this.helper;t.forEach((function(t){var o,s,l=c.getElementIndexByUUID(t);if(null!==l){var h=a.elements[l];!0!==(null===(o=null==h?void 0:h.operation)||void 0===o?void 0:o.lock)&&!0!==(null===(s=null==h?void 0:h.operation)||void 0===s?void 0:s.invisible)&&r.dragElement(a,t,e,n,i.getContext().getTransform().scale)}})),l()}},t.prototype._transfromElement=function(t,e,n,o){if(!n)return null;var i=this._opts,r=i.board,s=i.element,l=i.getDataFeekback,a=i.drawFeekback,c=l(),h=s.transformElement(c,t,e,n,r.getContext().getTransform().scale,o);return a(),h},t.prototype._handleMoveEnd=function(t){var e=this._opts,n=e.element,o=e.getDataFeekback,i=e.coreEvent,r=e.drawFeekback,s=e.emitChangeData,l=o(),a=this.helper,c=this.temp.get('selectedUUID');if('string'==typeof c){var h=n.getElementIndex(l,c),u=l.elements[h];u&&(i.has('screenMoveElementEnd')&&i.trigger('screenMoveElementEnd',{index:h,uuid:c,x:t.x,y:t.y}),i.has('screenChangeElement')&&i.trigger('screenChangeElement',{index:h,uuid:c,width:u.w,height:u.h,angle:u.angle||0}),s())}else if(this.temp.get('mode')===pn.SELECT_AREA){var f=a.calcSelectedElements(l);f.length>0?(this.temp.set('selectedUUIDList',f),this.temp.set('selectedUUID',null)):this.temp.set('mode',pn.NULL),a.clearSelectedArea(),r()}this.temp.get('mode')!==pn.SELECT_ELEMENT&&this.temp.set('selectedUUID',null),this.temp.set('cursorStatus',vn.NULL),this.temp.set('mode',pn.NULL)},t.prototype._handleHover=function(t){var e,n,o=!1,i=this._opts,r=i.board,s=i.getDataFeekback,l=i.coreEvent,a=s(),c=this.helper,h=this._mapper;if(this.temp.get('mode')===pn.SELECT_AREA)r.resetCursor();else if(this.temp.get('cursorStatus')===vn.NULL){var u=h.judgePointCursor(t,a),f=u.cursor,d=u.elementUUID;if(r.setCursor(f),d)if(null!==(g=c.getElementIndexByUUID(d))&&g>=0){var p=a.elements[g];if(!0===(null===(e=null==p?void 0:p.operation)||void 0===e?void 0:e.lock)||!0===(null===(n=null==p?void 0:p.operation)||void 0===n?void 0:n.invisible))return void r.resetCursor();if(this.temp.get('hoverUUID')!==p.uuid){var v=c.getElementIndexByUUID(this.temp.get('hoverUUID')||'');null!==v&&a.elements[v]&&l.trigger('mouseLeaveElement',{uuid:this.temp.get('hoverUUID'),index:v,element:a.elements[v]})}p&&(l.trigger('mouseOverElement',{uuid:p.uuid,index:g,element:p}),this.temp.set('hoverUUID',p.uuid),o=!0)}}if(!0!==o&&null!==this.temp.get('hoverUUID')){var g,m=this.temp.get('hoverUUID');null!==(g=c.getElementIndexByUUID(m||''))&&l.trigger('mouseLeaveElement',{uuid:m,index:g,element:a.elements[g]}),this.temp.set('hoverUUID',null)}l.has('mouseOverScreen')&&l.trigger('mouseOverScreen',t)},t.prototype._handleLeave=function(){var t=this._opts.coreEvent;t.has('mouseLeaveScreen')&&t.trigger('mouseLeaveScreen',void 0)},t}();function Un(t){t.setFillStyle('#000000'),t.setStrokeStyle('#000000'),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor('#00000000'),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}var Rn=mt.data.deepClone,An=function(){function e(e,i,r){var s,l,a,c=this;this[n]=new Xe,this[o]=new gn,this[yn]={elements:[]},this[_n]=i,this[Sn]=function(e){var n=mt.data.deepClone(Ye);return e&&e.elementWrapper&&(n.elementWrapper=t(t({},n.elementWrapper),e.elementWrapper)),n}(r||{}),this[mn]=new J(e,t(t({},this[_n]),{canScroll:null===(s=null==r?void 0:r.scrollWrapper)||void 0===s?void 0:s.use,scrollConfig:{color:(null===(l=null==r?void 0:r.scrollWrapper)||void 0===l?void 0:l.color)||'#a0a0a0',lineWidth:(null===(a=null==r?void 0:r.scrollWrapper)||void 0===a?void 0:a.lineWidth)||12}})),this[xn]=new De;var h=function(){var t=c[mn].getHelperContext(),e=c[Dn].getHelperConfig();c[mn].clear();var n=c[_n],o=n.contextWidth,i=n.contextHeight,r=n.devicePixelRatio;t.clearRect(0,0,o*r,i*r),function(t,e){if(null==e?void 0:e.selectedElementWrapper){var n=e.selectedElementWrapper;Un(t),Ve(t,n.translate,n.radian||0,(function(){t.beginPath(),t.setLineDash(n.lineDash),t.setLineWidth(n.lineWidth),t.setStrokeStyle(n.color),t.moveTo(n.controllers.topLeft.x,n.controllers.topLeft.y),t.lineTo(n.controllers.topRight.x,n.controllers.topRight.y),t.lineTo(n.controllers.bottomRight.x,n.controllers.bottomRight.y),t.lineTo(n.controllers.bottomLeft.x,n.controllers.bottomLeft.y),t.lineTo(n.controllers.topLeft.x,n.controllers.topLeft.y-n.lineWidth/2),t.stroke(),t.closePath(),!0!==n.lock?(!0!==n.controllers.rotate.invisible&&(t.beginPath(),t.moveTo(n.controllers.top.x,n.controllers.top.y),t.lineTo(n.controllers.rotate.x,n.controllers.rotate.y+n.controllerSize),t.stroke(),t.closePath(),t.beginPath(),t.setLineDash([]),t.setLineWidth(n.controllerSize/2),t.arc(n.controllers.rotate.x,n.controllers.rotate.y,.8*n.controllerSize,Math.PI/6,2*Math.PI),t.stroke(),t.closePath()),t.setFillStyle(n.color),[n.controllers.topLeft,n.controllers.top,n.controllers.topRight,n.controllers.right,n.controllers.bottomRight,n.controllers.bottom,n.controllers.bottomLeft,n.controllers.left].forEach((function(e){!0!==e.invisible&&(t.beginPath(),t.arc(e.x,e.y,n.controllerSize,0,2*Math.PI),t.fill(),t.closePath())}))):(Un(t),t.setStrokeStyle(n.color),[n.controllers.topLeft,n.controllers.top,n.controllers.topRight,n.controllers.right,n.controllers.bottomRight,n.controllers.bottom,n.controllers.bottomLeft,n.controllers.left].forEach((function(e){t.beginPath(),t.moveTo(e.x-n.controllerSize/2,e.y-n.controllerSize/2),t.lineTo(e.x+n.controllerSize/2,e.y+n.controllerSize/2),t.stroke(),t.closePath(),t.beginPath(),t.moveTo(e.x+n.controllerSize/2,e.y-n.controllerSize/2),t.lineTo(e.x-n.controllerSize/2,e.y+n.controllerSize/2),t.stroke(),t.closePath()})))}))}}(t,e),function(t,e){if(null==e?void 0:e.selectedAreaWrapper){var n=e.selectedAreaWrapper;n&&n.w>0&&n.h>0&&(Un(t),t.setGlobalAlpha(.3),t.setFillStyle(n.color),t.fillRect(n.x,n.y,n.w,n.h),Un(t),t.beginPath(),t.setLineDash(n.lineDash),t.setLineWidth(n.lineWidth),t.setStrokeStyle(n.color),t.moveTo(n.x,n.y),t.lineTo(n.x+n.w,n.y),t.lineTo(n.x+n.w,n.y+n.h),t.lineTo(n.x,n.y+n.h),t.lineTo(n.x,n.y),t.stroke(),t.closePath())}}(t,e),function(t,e){if(Array.isArray(null==e?void 0:e.selectedElementListWrappers)){var n=e.selectedElementListWrappers;null==n||n.forEach((function(e){Un(t),Ve(t,e.translate,e.radian||0,(function(){Un(t),t.setGlobalAlpha(.05),t.setFillStyle(e.color),t.fillRect(e.controllers.topLeft.x,e.controllers.topLeft.y,e.controllers.bottomRight.x-e.controllers.topLeft.x,e.controllers.bottomRight.y-e.controllers.topLeft.y),Un(t),t.beginPath(),t.setLineDash(e.lineDash),t.setLineWidth(e.lineWidth),t.setStrokeStyle(e.color),t.moveTo(e.controllers.topLeft.x,e.controllers.topLeft.y),t.lineTo(e.controllers.topRight.x,e.controllers.topRight.y),t.lineTo(e.controllers.bottomRight.x,e.controllers.bottomRight.y),t.lineTo(e.controllers.bottomLeft.x,e.controllers.bottomLeft.y),t.lineTo(e.controllers.topLeft.x,e.controllers.topLeft.y-e.lineWidth/2),t.stroke(),t.closePath(),!0===e.lock&&(Un(t),t.setStrokeStyle(e.color),[e.controllers.topLeft,e.controllers.top,e.controllers.topRight,e.controllers.right,e.controllers.bottomRight,e.controllers.bottom,e.controllers.bottomLeft,e.controllers.left].forEach((function(n){t.beginPath(),t.moveTo(n.x-e.controllerSize/2,n.y-e.controllerSize/2),t.lineTo(n.x+e.controllerSize/2,n.y+e.controllerSize/2),t.stroke(),t.closePath(),t.beginPath(),t.moveTo(n.x+e.controllerSize/2,n.y-e.controllerSize/2),t.lineTo(n.x-e.controllerSize/2,n.y+e.controllerSize/2),t.stroke(),t.closePath()})))}))}))}}(t,e),c[mn].draw()};this[xn].on('drawFrame',(function(t){h()})),this[xn].on('drawFrameComplete',(function(t){h()})),this[bn]=new tn(this[mn].getContext()),this[Dn]=new On({coreEvent:this[Pn],board:this[mn],element:this[bn],config:this[Sn],drawFeekback:this[En].bind(this),getDataFeekback:function(){return c[yn]},selectElementByIndex:this.selectElementByIndex.bind(this),emitChangeScreen:this[Cn].bind(this),emitChangeData:this[zn].bind(this)}),this[Dn].init(),this[xn].on('drawFrame',(function(){c[Pn].trigger('drawFrame',void 0)})),this[xn].on('drawFrameComplete',(function(){c[Pn].trigger('drawFrameComplete',void 0)})),this[wn].set('hasInited',!0)}var n,o;return e.prototype[(n=Pn,o=wn,En)]=function(t){this[Dn].updateHelperConfig({width:this[_n].width,height:this[_n].height,devicePixelRatio:this[_n].devicePixelRatio}),this[xn].thaw(),this[xn].render(this[mn].getContext(),this[yn],{changeResourceUUIDs:(null==t?void 0:t.resourceChangeUUIDs)||[]})},e.prototype.getElement=function(t){return function(t,e){var n=null,o=t[Dn].helper.getElementIndexByUUID(e);return null!==o&&t[yn].elements[o]&&(n=Ln(t[yn].elements[o])),n}(this,t)},e.prototype.getElementByIndex=function(t){return function(t,e){var n=null;return e>=0&&t[yn].elements[e]&&(n=Ln(t[yn].elements[e])),n}(this,t)},e.prototype.selectElementByIndex=function(t,e){return function(t,e,n){if(t[yn].elements[e]){var o=t[yn].elements[e].uuid;!0===(null==n?void 0:n.useMode)?t[Dn].temp.set('mode',pn.SELECT_ELEMENT):t[Dn].temp.set('mode',pn.NULL),'string'==typeof o&&(t[Dn].temp.set('selectedUUID',o),t[Dn].temp.set('selectedUUIDList',[])),t[En]()}}(this,t,e)},e.prototype.selectElement=function(t,e){return function(t,e,n){var o=t[Dn].helper.getElementIndexByUUID(e);'number'==typeof o&&o>=0&&t.selectElementByIndex(o,n)}(this,t,e)},e.prototype.moveUpElement=function(t){return function(t,e){var n=t[Dn].helper.getElementIndexByUUID(e);if('number'==typeof n&&n>=0&&n<t[yn].elements.length-1){var o=t[yn].elements[n];t[yn].elements[n]=t[yn].elements[n+1],t[yn].elements[n+1]=o}t[zn](),t[En]()}(this,t)},e.prototype.moveDownElement=function(t){return function(t,e){var n=t[Dn].helper.getElementIndexByUUID(e);if('number'==typeof n&&n>0&&n<t[yn].elements.length){var o=t[yn].elements[n];t[yn].elements[n]=t[yn].elements[n-1],t[yn].elements[n-1]=o}t[zn](),t[En]()}(this,t)},e.prototype.updateElement=function(t){return function(t,e){for(var n,o=Ln(e),i=t[yn],r=[],s=0;s<i.elements.length;s++)if(o.uuid===(null===(n=i.elements[s])||void 0===n?void 0:n.uuid)){var l=je(i.elements[s],o);'string'==typeof l&&r.push(l),i.elements[s]=o;break}t[zn](),t[En]({resourceChangeUUIDs:r})}(this,t)},e.prototype.addElement=function(t){return function(t,e){var n=Ln(e);return n.uuid=Tn(),t[yn].elements.push(n),t[zn](),t[En](),n.uuid}(this,t)},e.prototype.deleteElement=function(t){return function(t,e){var n=t[bn].getElementIndex(t[yn],e);n>=0&&(t[yn].elements.splice(n,1),t[zn](),t[En]())}(this,t)},e.prototype.insertElementBefore=function(t,e){return function(t,e,n){var o=t[Dn].helper.getElementIndexByUUID(n);return null!==o?t.insertElementBeforeIndex(e,o):null}(this,t,e)},e.prototype.insertElementBeforeIndex=function(t,e){return function(t,e,n){var o=Ln(e);return o.uuid=Tn(),n>=0?(t[yn].elements.splice(n,0,o),t[zn](),t[En](),o.uuid):null}(this,t,e)},e.prototype.getSelectedElements=function(){return e=[],n=[],'string'==typeof(o=(t=this)[Dn].temp.get('selectedUUID'))&&o?n.push(o):n=t[Dn].temp.get('selectedUUIDList'),n.forEach((function(n){var o,i=t[Dn].helper.getElementIndexByUUID(n);if(null!==i&&i>=0){var r=null===(o=t[yn])||void 0===o?void 0:o.elements[i];r&&e.push(r)}})),Ln(e);var t,e,n,o},e.prototype.insertElementAfter=function(t,e){return function(t,e,n){var o=t[Dn].helper.getElementIndexByUUID(n);return null!==o?t.insertElementAfterIndex(e,o):null}(this,t,e)},e.prototype.insertElementAfterIndex=function(t,e){return function(t,e,n){var o=Ln(e);return o.uuid=Tn(),n>=0?(t[yn].elements.splice(n+1,0,o),t[zn](),t[En](),o.uuid):null}(this,t,e)},e.prototype.resetSize=function(e){this[_n]=t(t({},this[_n]),e),this[mn].resetSize(e),this[En]()},e.prototype.scale=function(t){var e=this[mn].scale(t);return this[En](),this[Cn](),e},e.prototype.scrollLeft=function(t){var e=this[mn].scrollX(0-t);return this[En](),this[Cn](),e},e.prototype.scrollTop=function(t){var e=this[mn].scrollY(0-t);return this[En](),this[Cn](),e},e.prototype.getScreenTransform=function(){var t=this[mn].getTransform();return{scale:t.scale,scrollTop:Math.max(0,0-t.scrollY),scrollLeft:Math.max(0,0-t.scrollX)}},e.prototype.getData=function(){return Rn(this[yn])},e.prototype.setData=function(t,e){var n=function(t,e){var n,o=[],i=Ge(t),r=Ge(e);for(var s in r)if(!0===['image','svg','html'].includes(null===(n=r[s])||void 0===n?void 0:n.type))if(i[s]){var l=!1;switch(i[s].type){case'image':l=Ne(i[s],r[s]);break;case'svg':l=He(i[s],r[s]);break;case'html':l=Be(i[s],r[s])}!0===l&&o.push(s)}else o.push(s);return o}(this[yn],t);this[yn]=this[bn].initData(Rn(fn(t))),e&&!0===e.triggerChangeEvent&&this[zn](),this[En]({resourceChangeUUIDs:n})},e.prototype.clearOperation=function(){this[wn].clear(),this[En]()},e.prototype.on=function(t,e){this[Pn].on(t,e)},e.prototype.off=function(t,e){this[Pn].off(t,e)},e.prototype.pointScreenToContext=function(t){return this[mn].pointScreenToContext(t)},e.prototype.pointContextToScreen=function(t){return this[mn].pointContextToScreen(t)},e.prototype.__getBoardContext=function(){return this[mn].getContext()},e.prototype.__getDisplayContext2D=function(){return this[mn].getDisplayContext2D()},e.prototype.__getOriginContext2D=function(){return this[mn].getOriginContext2D()},e.prototype[Cn]=function(){this[Pn].has('changeScreen')&&this[Pn].trigger('changeScreen',t({},this.getScreenTransform()))},e.prototype[zn]=function(){this[Pn].has('changeData')&&this[Pn].trigger('changeData',Rn(this[yn]))},e.is=We,e.check=Ue,e}();return An}();
|