@leafer-ui/node 1.0.0-beta.8 → 1.0.0-rc.2
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/node.cjs +2165 -0
- package/dist/node.esm.js +2145 -0
- package/dist/node.esm.min.js +1 -0
- package/dist/node.min.cjs +1 -0
- package/package.json +16 -10
- package/src/index.ts +3 -6
- package/types/index.d.ts +3 -0
- package/dist/index.js +0 -1
- package/src/index.d.ts +0 -4
- package/src/node.ts +0 -2
package/dist/node.esm.js
ADDED
|
@@ -0,0 +1,2145 @@
|
|
|
1
|
+
import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, BoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, Creator, LeaferCanvasBase, LeaferImage, InteractionBase, MatrixHelper, ImageEvent, PointHelper, MathHelper, TaskProcessor } from '@leafer/core';
|
|
2
|
+
export * from '@leafer/core';
|
|
3
|
+
export { LeaferImage } from '@leafer/core';
|
|
4
|
+
import { ColorConvert as ColorConvert$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$1 } from '@leafer-ui/core';
|
|
5
|
+
export * from '@leafer-ui/core';
|
|
6
|
+
|
|
7
|
+
class Watcher {
|
|
8
|
+
get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
|
|
9
|
+
get updatedList() {
|
|
10
|
+
if (this.hasRemove) {
|
|
11
|
+
const updatedList = new LeafList();
|
|
12
|
+
this.__updatedList.list.forEach(item => { if (item.leafer)
|
|
13
|
+
updatedList.push(item); });
|
|
14
|
+
return updatedList;
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
return this.__updatedList;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
constructor(target, userConfig) {
|
|
21
|
+
this.totalTimes = 0;
|
|
22
|
+
this.config = {};
|
|
23
|
+
this.__updatedList = new LeafList();
|
|
24
|
+
this.target = target;
|
|
25
|
+
if (userConfig)
|
|
26
|
+
this.config = DataHelper.default(userConfig, this.config);
|
|
27
|
+
this.__listenEvents();
|
|
28
|
+
}
|
|
29
|
+
start() {
|
|
30
|
+
if (this.disabled)
|
|
31
|
+
return;
|
|
32
|
+
this.running = true;
|
|
33
|
+
}
|
|
34
|
+
stop() {
|
|
35
|
+
this.running = false;
|
|
36
|
+
}
|
|
37
|
+
disable() {
|
|
38
|
+
this.stop();
|
|
39
|
+
this.__removeListenEvents();
|
|
40
|
+
this.disabled = true;
|
|
41
|
+
}
|
|
42
|
+
update() {
|
|
43
|
+
this.changed = true;
|
|
44
|
+
if (this.running)
|
|
45
|
+
this.target.emit(RenderEvent.REQUEST);
|
|
46
|
+
}
|
|
47
|
+
__onAttrChange(event) {
|
|
48
|
+
this.__updatedList.push(event.target);
|
|
49
|
+
this.update();
|
|
50
|
+
}
|
|
51
|
+
__onChildEvent(event) {
|
|
52
|
+
if (event.type === ChildEvent.ADD) {
|
|
53
|
+
this.hasAdd = true;
|
|
54
|
+
this.__pushChild(event.child);
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
this.hasRemove = true;
|
|
58
|
+
this.__updatedList.push(event.parent);
|
|
59
|
+
}
|
|
60
|
+
this.update();
|
|
61
|
+
}
|
|
62
|
+
__pushChild(child) {
|
|
63
|
+
this.__updatedList.push(child);
|
|
64
|
+
if (child.isBranch)
|
|
65
|
+
this.__loopChildren(child);
|
|
66
|
+
}
|
|
67
|
+
__loopChildren(parent) {
|
|
68
|
+
const { children } = parent;
|
|
69
|
+
for (let i = 0, len = children.length; i < len; i++)
|
|
70
|
+
this.__pushChild(children[i]);
|
|
71
|
+
}
|
|
72
|
+
__onRquestData() {
|
|
73
|
+
this.target.emitEvent(new WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }));
|
|
74
|
+
this.__updatedList = new LeafList();
|
|
75
|
+
this.totalTimes++;
|
|
76
|
+
this.changed = false;
|
|
77
|
+
this.hasVisible = false;
|
|
78
|
+
this.hasRemove = false;
|
|
79
|
+
this.hasAdd = false;
|
|
80
|
+
}
|
|
81
|
+
__listenEvents() {
|
|
82
|
+
const { target } = this;
|
|
83
|
+
this.__eventIds = [
|
|
84
|
+
target.on_(PropertyEvent.CHANGE, this.__onAttrChange, this),
|
|
85
|
+
target.on_([ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this),
|
|
86
|
+
target.on_(WatchEvent.REQUEST, this.__onRquestData, this)
|
|
87
|
+
];
|
|
88
|
+
}
|
|
89
|
+
__removeListenEvents() {
|
|
90
|
+
this.target.off_(this.__eventIds);
|
|
91
|
+
}
|
|
92
|
+
destroy() {
|
|
93
|
+
if (this.target) {
|
|
94
|
+
this.stop();
|
|
95
|
+
this.__removeListenEvents();
|
|
96
|
+
this.target = null;
|
|
97
|
+
this.__updatedList = null;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
const { updateAllWorldMatrix: updateAllWorldMatrix$1, updateAllWorldOpacity } = LeafHelper;
|
|
103
|
+
const { pushAllChildBranch, pushAllParent } = BranchHelper;
|
|
104
|
+
function updateMatrix(updateList, levelList) {
|
|
105
|
+
let layout;
|
|
106
|
+
updateList.list.forEach(leaf => {
|
|
107
|
+
layout = leaf.__layout;
|
|
108
|
+
if (levelList.without(leaf) && !layout.useZoomProxy) {
|
|
109
|
+
if (layout.matrixChanged) {
|
|
110
|
+
updateAllWorldMatrix$1(leaf);
|
|
111
|
+
levelList.push(leaf);
|
|
112
|
+
if (leaf.isBranch)
|
|
113
|
+
pushAllChildBranch(leaf, levelList);
|
|
114
|
+
pushAllParent(leaf, levelList);
|
|
115
|
+
}
|
|
116
|
+
else if (layout.boundsChanged) {
|
|
117
|
+
levelList.push(leaf);
|
|
118
|
+
if (leaf.isBranch)
|
|
119
|
+
leaf.__tempNumber = 0;
|
|
120
|
+
pushAllParent(leaf, levelList);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
function updateBounds(boundsList) {
|
|
126
|
+
let itemList, branch;
|
|
127
|
+
boundsList.sort(true);
|
|
128
|
+
boundsList.levels.forEach(level => {
|
|
129
|
+
itemList = boundsList.levelMap[level];
|
|
130
|
+
for (let i = 0, len = itemList.length; i < len; i++) {
|
|
131
|
+
branch = itemList[i];
|
|
132
|
+
if (branch.isBranch && branch.__tempNumber) {
|
|
133
|
+
for (let j = 0, jLen = branch.children.length; j < jLen; j++) {
|
|
134
|
+
if (!branch.children[j].isBranch) {
|
|
135
|
+
branch.children[j].__updateWorldBounds();
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
branch.__updateWorldBounds();
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
function updateChange(updateList) {
|
|
144
|
+
updateList.list.forEach(leaf => {
|
|
145
|
+
if (leaf.__layout.opacityChanged)
|
|
146
|
+
updateAllWorldOpacity(leaf);
|
|
147
|
+
leaf.__updateChange();
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const { worldBounds } = LeafBoundsHelper;
|
|
152
|
+
const { setByListWithHandle } = BoundsHelper;
|
|
153
|
+
class LayoutBlockData {
|
|
154
|
+
constructor(list) {
|
|
155
|
+
this.updatedBounds = new Bounds();
|
|
156
|
+
this.beforeBounds = new Bounds();
|
|
157
|
+
this.afterBounds = new Bounds();
|
|
158
|
+
if (list instanceof Array)
|
|
159
|
+
list = new LeafList(list);
|
|
160
|
+
this.updatedList = list;
|
|
161
|
+
}
|
|
162
|
+
setBefore() {
|
|
163
|
+
setByListWithHandle(this.beforeBounds, this.updatedList.list, worldBounds);
|
|
164
|
+
}
|
|
165
|
+
setAfter() {
|
|
166
|
+
setByListWithHandle(this.afterBounds, this.updatedList.list, worldBounds);
|
|
167
|
+
this.updatedBounds.setByList([this.beforeBounds, this.afterBounds]);
|
|
168
|
+
}
|
|
169
|
+
merge(data) {
|
|
170
|
+
this.updatedList.pushList(data.updatedList.list);
|
|
171
|
+
this.beforeBounds.add(data.beforeBounds);
|
|
172
|
+
this.afterBounds.add(data.afterBounds);
|
|
173
|
+
this.updatedBounds.add(data.updatedBounds);
|
|
174
|
+
}
|
|
175
|
+
destroy() {
|
|
176
|
+
this.updatedList = null;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
const { updateAllWorldMatrix, updateAllChange } = LeafHelper;
|
|
181
|
+
const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
|
|
182
|
+
const debug$1 = Debug.get('Layouter');
|
|
183
|
+
class Layouter {
|
|
184
|
+
constructor(target, userConfig) {
|
|
185
|
+
this.totalTimes = 0;
|
|
186
|
+
this.config = {};
|
|
187
|
+
this.__levelList = new LeafLevelList();
|
|
188
|
+
this.target = target;
|
|
189
|
+
if (userConfig)
|
|
190
|
+
this.config = DataHelper.default(userConfig, this.config);
|
|
191
|
+
this.__listenEvents();
|
|
192
|
+
}
|
|
193
|
+
start() {
|
|
194
|
+
if (this.disabled)
|
|
195
|
+
return;
|
|
196
|
+
this.running = true;
|
|
197
|
+
}
|
|
198
|
+
stop() {
|
|
199
|
+
this.running = false;
|
|
200
|
+
}
|
|
201
|
+
disable() {
|
|
202
|
+
this.stop();
|
|
203
|
+
this.__removeListenEvents();
|
|
204
|
+
this.disabled = true;
|
|
205
|
+
}
|
|
206
|
+
layout() {
|
|
207
|
+
if (!this.running)
|
|
208
|
+
return;
|
|
209
|
+
const { target } = this;
|
|
210
|
+
this.times = 0;
|
|
211
|
+
try {
|
|
212
|
+
target.emit(LayoutEvent.START);
|
|
213
|
+
this.layoutOnce();
|
|
214
|
+
target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
|
|
215
|
+
}
|
|
216
|
+
catch (e) {
|
|
217
|
+
debug$1.error(e);
|
|
218
|
+
}
|
|
219
|
+
this.layoutedBlocks = null;
|
|
220
|
+
}
|
|
221
|
+
layoutAgain() {
|
|
222
|
+
if (this.layouting) {
|
|
223
|
+
this.waitAgain = true;
|
|
224
|
+
}
|
|
225
|
+
else {
|
|
226
|
+
this.layoutOnce();
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
layoutOnce() {
|
|
230
|
+
if (this.layouting)
|
|
231
|
+
return debug$1.warn('layouting');
|
|
232
|
+
if (this.times > 3)
|
|
233
|
+
return debug$1.warn('layout max times');
|
|
234
|
+
this.times++;
|
|
235
|
+
this.totalTimes++;
|
|
236
|
+
this.layouting = true;
|
|
237
|
+
this.target.emit(WatchEvent.REQUEST);
|
|
238
|
+
if (this.totalTimes > 1) {
|
|
239
|
+
this.partLayout();
|
|
240
|
+
}
|
|
241
|
+
else {
|
|
242
|
+
this.fullLayout();
|
|
243
|
+
}
|
|
244
|
+
this.layouting = false;
|
|
245
|
+
if (this.waitAgain) {
|
|
246
|
+
this.waitAgain = false;
|
|
247
|
+
this.layoutOnce();
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
partLayout() {
|
|
251
|
+
var _a;
|
|
252
|
+
if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
|
|
253
|
+
return;
|
|
254
|
+
const t = Run.start('PartLayout');
|
|
255
|
+
const { target, __updatedList: updateList } = this;
|
|
256
|
+
const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
|
|
257
|
+
const blocks = this.getBlocks(updateList);
|
|
258
|
+
blocks.forEach(item => { item.setBefore(); });
|
|
259
|
+
target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
|
|
260
|
+
updateList.sort();
|
|
261
|
+
updateMatrix(updateList, this.__levelList);
|
|
262
|
+
updateBounds(this.__levelList);
|
|
263
|
+
updateChange(updateList);
|
|
264
|
+
blocks.forEach(item => item.setAfter());
|
|
265
|
+
target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
|
|
266
|
+
target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
|
|
267
|
+
this.addBlocks(blocks);
|
|
268
|
+
this.__levelList.reset();
|
|
269
|
+
this.__updatedList = null;
|
|
270
|
+
Run.end(t);
|
|
271
|
+
}
|
|
272
|
+
fullLayout() {
|
|
273
|
+
const t = Run.start('FullLayout');
|
|
274
|
+
const { target } = this;
|
|
275
|
+
const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
|
|
276
|
+
const blocks = this.getBlocks(new LeafList(target));
|
|
277
|
+
target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
|
|
278
|
+
Layouter.fullLayout(target);
|
|
279
|
+
blocks.forEach(item => { item.setAfter(); });
|
|
280
|
+
target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
|
|
281
|
+
target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
|
|
282
|
+
this.addBlocks(blocks);
|
|
283
|
+
Run.end(t);
|
|
284
|
+
}
|
|
285
|
+
static fullLayout(target) {
|
|
286
|
+
updateAllWorldMatrix(target);
|
|
287
|
+
if (target.isBranch) {
|
|
288
|
+
const branchStack = [target];
|
|
289
|
+
pushAllBranchStack(target, branchStack);
|
|
290
|
+
updateWorldBoundsByBranchStack(branchStack);
|
|
291
|
+
}
|
|
292
|
+
else {
|
|
293
|
+
target.__updateWorldBounds();
|
|
294
|
+
}
|
|
295
|
+
updateAllChange(target);
|
|
296
|
+
}
|
|
297
|
+
createBlock(data) {
|
|
298
|
+
return new LayoutBlockData(data);
|
|
299
|
+
}
|
|
300
|
+
getBlocks(list) {
|
|
301
|
+
return [this.createBlock(list)];
|
|
302
|
+
}
|
|
303
|
+
addBlocks(current) {
|
|
304
|
+
this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current;
|
|
305
|
+
}
|
|
306
|
+
__onReceiveWatchData(event) {
|
|
307
|
+
this.__updatedList = event.data.updatedList;
|
|
308
|
+
}
|
|
309
|
+
__listenEvents() {
|
|
310
|
+
const { target } = this;
|
|
311
|
+
this.__eventIds = [
|
|
312
|
+
target.on_(LayoutEvent.REQUEST, this.layout, this),
|
|
313
|
+
target.on_(LayoutEvent.AGAIN, this.layoutAgain, this),
|
|
314
|
+
target.on_(WatchEvent.DATA, this.__onReceiveWatchData, this)
|
|
315
|
+
];
|
|
316
|
+
}
|
|
317
|
+
__removeListenEvents() {
|
|
318
|
+
this.target.off_(this.__eventIds);
|
|
319
|
+
}
|
|
320
|
+
destroy() {
|
|
321
|
+
if (this.target) {
|
|
322
|
+
this.stop();
|
|
323
|
+
this.__removeListenEvents();
|
|
324
|
+
this.target = null;
|
|
325
|
+
this.config = null;
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
const debug = Debug.get('Renderer');
|
|
331
|
+
class Renderer {
|
|
332
|
+
get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
|
|
333
|
+
constructor(target, canvas, userConfig) {
|
|
334
|
+
this.FPS = 60;
|
|
335
|
+
this.totalTimes = 0;
|
|
336
|
+
this.times = 0;
|
|
337
|
+
this.config = {
|
|
338
|
+
usePartRender: true,
|
|
339
|
+
maxFPS: 60
|
|
340
|
+
};
|
|
341
|
+
this.target = target;
|
|
342
|
+
this.canvas = canvas;
|
|
343
|
+
if (userConfig)
|
|
344
|
+
this.config = DataHelper.default(userConfig, this.config);
|
|
345
|
+
this.__listenEvents();
|
|
346
|
+
this.__requestRender();
|
|
347
|
+
}
|
|
348
|
+
start() {
|
|
349
|
+
this.running = true;
|
|
350
|
+
}
|
|
351
|
+
stop() {
|
|
352
|
+
this.running = false;
|
|
353
|
+
}
|
|
354
|
+
update() {
|
|
355
|
+
this.changed = true;
|
|
356
|
+
}
|
|
357
|
+
requestLayout() {
|
|
358
|
+
this.target.emit(LayoutEvent.REQUEST);
|
|
359
|
+
}
|
|
360
|
+
render(callback) {
|
|
361
|
+
if (!(this.running && this.canvas.view)) {
|
|
362
|
+
this.changed = true;
|
|
363
|
+
return;
|
|
364
|
+
}
|
|
365
|
+
const { target } = this;
|
|
366
|
+
this.times = 0;
|
|
367
|
+
this.totalBounds = new Bounds();
|
|
368
|
+
debug.log(target.innerName, '--->');
|
|
369
|
+
try {
|
|
370
|
+
this.emitRender(RenderEvent.START);
|
|
371
|
+
this.renderOnce(callback);
|
|
372
|
+
this.emitRender(RenderEvent.END, this.totalBounds);
|
|
373
|
+
ImageManager.clearRecycled();
|
|
374
|
+
}
|
|
375
|
+
catch (e) {
|
|
376
|
+
this.rendering = false;
|
|
377
|
+
debug.error(e);
|
|
378
|
+
}
|
|
379
|
+
debug.log('-------------|');
|
|
380
|
+
}
|
|
381
|
+
renderAgain() {
|
|
382
|
+
if (this.rendering) {
|
|
383
|
+
this.waitAgain = true;
|
|
384
|
+
}
|
|
385
|
+
else {
|
|
386
|
+
this.renderOnce();
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
renderOnce(callback) {
|
|
390
|
+
if (this.rendering)
|
|
391
|
+
return debug.warn('rendering');
|
|
392
|
+
if (this.times > 3)
|
|
393
|
+
return debug.warn('render max times');
|
|
394
|
+
this.times++;
|
|
395
|
+
this.totalTimes++;
|
|
396
|
+
this.rendering = true;
|
|
397
|
+
this.changed = false;
|
|
398
|
+
this.renderBounds = new Bounds();
|
|
399
|
+
this.renderOptions = {};
|
|
400
|
+
if (callback) {
|
|
401
|
+
this.emitRender(RenderEvent.BEFORE);
|
|
402
|
+
callback();
|
|
403
|
+
}
|
|
404
|
+
else {
|
|
405
|
+
this.requestLayout();
|
|
406
|
+
this.emitRender(RenderEvent.BEFORE);
|
|
407
|
+
if (this.config.usePartRender && this.totalTimes > 1) {
|
|
408
|
+
this.partRender();
|
|
409
|
+
}
|
|
410
|
+
else {
|
|
411
|
+
this.fullRender();
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
this.emitRender(RenderEvent.RENDER, this.renderBounds, this.renderOptions);
|
|
415
|
+
this.emitRender(RenderEvent.AFTER, this.renderBounds, this.renderOptions);
|
|
416
|
+
this.updateBlocks = null;
|
|
417
|
+
this.rendering = false;
|
|
418
|
+
if (this.waitAgain) {
|
|
419
|
+
this.waitAgain = false;
|
|
420
|
+
this.renderOnce();
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
partRender() {
|
|
424
|
+
const { canvas, updateBlocks: list } = this;
|
|
425
|
+
if (!list)
|
|
426
|
+
return debug.warn('PartRender: need update attr');
|
|
427
|
+
if (list.some(block => block.includes(this.target.__world)))
|
|
428
|
+
this.mergeBlocks();
|
|
429
|
+
list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
|
|
430
|
+
this.clipRender(block); });
|
|
431
|
+
}
|
|
432
|
+
clipRender(block) {
|
|
433
|
+
const t = Run.start('PartRender');
|
|
434
|
+
const { canvas } = this;
|
|
435
|
+
const bounds = block.getIntersect(canvas.bounds);
|
|
436
|
+
const includes = block.includes(this.target.__world);
|
|
437
|
+
const realBounds = new Bounds().copy(bounds);
|
|
438
|
+
canvas.save();
|
|
439
|
+
if (includes && !Debug.showRepaint) {
|
|
440
|
+
canvas.clear();
|
|
441
|
+
}
|
|
442
|
+
else {
|
|
443
|
+
bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil();
|
|
444
|
+
canvas.clearWorld(bounds, true);
|
|
445
|
+
canvas.clipWorld(bounds, true);
|
|
446
|
+
}
|
|
447
|
+
this.__render(bounds, realBounds);
|
|
448
|
+
canvas.restore();
|
|
449
|
+
Run.end(t);
|
|
450
|
+
}
|
|
451
|
+
fullRender() {
|
|
452
|
+
const t = Run.start('FullRender');
|
|
453
|
+
const { canvas } = this;
|
|
454
|
+
canvas.save();
|
|
455
|
+
canvas.clear();
|
|
456
|
+
this.__render(canvas.bounds);
|
|
457
|
+
canvas.restore();
|
|
458
|
+
Run.end(t);
|
|
459
|
+
}
|
|
460
|
+
__render(bounds, realBounds) {
|
|
461
|
+
const options = (bounds === null || bounds === void 0 ? void 0 : bounds.includes(this.target.__world)) ? {} : { bounds };
|
|
462
|
+
if (this.needFill)
|
|
463
|
+
this.canvas.fillWorld(bounds, this.config.fill);
|
|
464
|
+
if (Debug.showRepaint)
|
|
465
|
+
this.canvas.strokeWorld(bounds, 'red');
|
|
466
|
+
this.target.__render(this.canvas, options);
|
|
467
|
+
this.renderBounds = realBounds || bounds;
|
|
468
|
+
this.renderOptions = options;
|
|
469
|
+
this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
|
|
470
|
+
if (Debug.showHitView)
|
|
471
|
+
this.renderHitView(options);
|
|
472
|
+
if (Debug.showBoundsView)
|
|
473
|
+
this.renderBoundsView(options);
|
|
474
|
+
this.canvas.updateRender();
|
|
475
|
+
}
|
|
476
|
+
renderHitView(_options) { }
|
|
477
|
+
renderBoundsView(_options) { }
|
|
478
|
+
addBlock(block) {
|
|
479
|
+
if (!this.updateBlocks)
|
|
480
|
+
this.updateBlocks = [];
|
|
481
|
+
this.updateBlocks.push(block);
|
|
482
|
+
}
|
|
483
|
+
mergeBlocks() {
|
|
484
|
+
const { updateBlocks: list } = this;
|
|
485
|
+
if (list) {
|
|
486
|
+
const bounds = new Bounds();
|
|
487
|
+
bounds.setByList(list);
|
|
488
|
+
list.length = 0;
|
|
489
|
+
list.push(bounds);
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
__requestRender() {
|
|
493
|
+
const startTime = Date.now();
|
|
494
|
+
Platform.requestRender(() => {
|
|
495
|
+
this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
|
|
496
|
+
if (this.changed) {
|
|
497
|
+
if (this.running && this.canvas.view)
|
|
498
|
+
this.render();
|
|
499
|
+
}
|
|
500
|
+
if (this.running)
|
|
501
|
+
this.target.emit(AnimateEvent.FRAME);
|
|
502
|
+
if (this.target)
|
|
503
|
+
this.__requestRender();
|
|
504
|
+
});
|
|
505
|
+
}
|
|
506
|
+
__onResize(e) {
|
|
507
|
+
if (this.canvas.unreal)
|
|
508
|
+
return;
|
|
509
|
+
if (e.bigger || !e.samePixelRatio) {
|
|
510
|
+
const { width, height } = e.old;
|
|
511
|
+
const bounds = new Bounds(0, 0, width, height);
|
|
512
|
+
if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
|
|
513
|
+
this.addBlock(this.canvas.bounds);
|
|
514
|
+
this.target.forceUpdate('blendMode');
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
__onLayoutEnd(event) {
|
|
519
|
+
if (event.data)
|
|
520
|
+
event.data.map(item => {
|
|
521
|
+
let empty;
|
|
522
|
+
if (item.updatedList)
|
|
523
|
+
item.updatedList.list.some(leaf => {
|
|
524
|
+
empty = (!leaf.__world.width || !leaf.__world.height);
|
|
525
|
+
if (empty) {
|
|
526
|
+
if (!leaf.isLeafer)
|
|
527
|
+
debug.warn(leaf.innerName, ': empty');
|
|
528
|
+
empty = (!leaf.isBranch || leaf.isBranchLeaf);
|
|
529
|
+
}
|
|
530
|
+
return empty;
|
|
531
|
+
});
|
|
532
|
+
this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
|
|
533
|
+
});
|
|
534
|
+
}
|
|
535
|
+
emitRender(type, bounds, options) {
|
|
536
|
+
this.target.emitEvent(new RenderEvent(type, this.times, bounds, options));
|
|
537
|
+
}
|
|
538
|
+
__listenEvents() {
|
|
539
|
+
const { target } = this;
|
|
540
|
+
this.__eventIds = [
|
|
541
|
+
target.on_(RenderEvent.REQUEST, this.update, this),
|
|
542
|
+
target.on_(LayoutEvent.END, this.__onLayoutEnd, this),
|
|
543
|
+
target.on_(RenderEvent.AGAIN, this.renderAgain, this),
|
|
544
|
+
target.on_(ResizeEvent.RESIZE, this.__onResize, this)
|
|
545
|
+
];
|
|
546
|
+
}
|
|
547
|
+
__removeListenEvents() {
|
|
548
|
+
this.target.off_(this.__eventIds);
|
|
549
|
+
}
|
|
550
|
+
destroy() {
|
|
551
|
+
if (this.target) {
|
|
552
|
+
this.stop();
|
|
553
|
+
this.__removeListenEvents();
|
|
554
|
+
this.target = null;
|
|
555
|
+
this.canvas = null;
|
|
556
|
+
this.config = null;
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
const { hitRadiusPoint } = BoundsHelper;
|
|
562
|
+
class FindPath {
|
|
563
|
+
constructor(target, selector) {
|
|
564
|
+
this.target = target;
|
|
565
|
+
this.selector = selector;
|
|
566
|
+
}
|
|
567
|
+
getByPoint(hitPoint, hitRadius, options) {
|
|
568
|
+
if (!hitRadius)
|
|
569
|
+
hitRadius = 0;
|
|
570
|
+
if (!options)
|
|
571
|
+
options = {};
|
|
572
|
+
const through = options.through || false;
|
|
573
|
+
const ignoreHittable = options.ignoreHittable || false;
|
|
574
|
+
this.exclude = options.exclude || null;
|
|
575
|
+
this.point = { x: hitPoint.x, y: hitPoint.y, radiusX: hitRadius, radiusY: hitRadius };
|
|
576
|
+
this.findList = [];
|
|
577
|
+
this.eachFind(this.target.children, this.target.__onlyHitMask);
|
|
578
|
+
const list = this.findList;
|
|
579
|
+
const leaf = this.getBestMatchLeaf();
|
|
580
|
+
const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
|
|
581
|
+
this.clear();
|
|
582
|
+
return through ? { path, leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, leaf };
|
|
583
|
+
}
|
|
584
|
+
getBestMatchLeaf() {
|
|
585
|
+
const { findList: targets } = this;
|
|
586
|
+
if (targets.length > 1) {
|
|
587
|
+
let find;
|
|
588
|
+
this.findList = [];
|
|
589
|
+
const { x, y } = this.point;
|
|
590
|
+
const point = { x, y, radiusX: 0, radiusY: 0 };
|
|
591
|
+
for (let i = 0, len = targets.length; i < len; i++) {
|
|
592
|
+
find = targets[i];
|
|
593
|
+
if (LeafHelper.worldHittable(find)) {
|
|
594
|
+
this.hitChild(find, point);
|
|
595
|
+
if (this.findList.length)
|
|
596
|
+
return this.findList[0];
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
return targets[0];
|
|
601
|
+
}
|
|
602
|
+
getPath(leaf) {
|
|
603
|
+
const path = new LeafList();
|
|
604
|
+
while (leaf) {
|
|
605
|
+
path.push(leaf);
|
|
606
|
+
leaf = leaf.parent;
|
|
607
|
+
}
|
|
608
|
+
path.push(this.target);
|
|
609
|
+
return path;
|
|
610
|
+
}
|
|
611
|
+
getHitablePath(leaf) {
|
|
612
|
+
const path = this.getPath(leaf);
|
|
613
|
+
let item, hittablePath = new LeafList();
|
|
614
|
+
for (let i = path.list.length - 1; i > -1; i--) {
|
|
615
|
+
item = path.list[i];
|
|
616
|
+
if (!item.__.hittable)
|
|
617
|
+
break;
|
|
618
|
+
hittablePath.unshift(item);
|
|
619
|
+
if (!item.__.hitChildren)
|
|
620
|
+
break;
|
|
621
|
+
}
|
|
622
|
+
return hittablePath;
|
|
623
|
+
}
|
|
624
|
+
getThroughPath(list) {
|
|
625
|
+
const throughPath = new LeafList();
|
|
626
|
+
const pathList = [];
|
|
627
|
+
for (let i = list.length - 1; i > -1; i--) {
|
|
628
|
+
pathList.push(this.getPath(list[i]));
|
|
629
|
+
}
|
|
630
|
+
let path, nextPath, leaf;
|
|
631
|
+
for (let i = 0, len = pathList.length; i < len; i++) {
|
|
632
|
+
path = pathList[i], nextPath = pathList[i + 1];
|
|
633
|
+
for (let j = 0, jLen = path.length; j < jLen; j++) {
|
|
634
|
+
leaf = path.list[j];
|
|
635
|
+
if (nextPath && nextPath.has(leaf))
|
|
636
|
+
break;
|
|
637
|
+
throughPath.push(leaf);
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
return throughPath;
|
|
641
|
+
}
|
|
642
|
+
eachFind(children, hitMask) {
|
|
643
|
+
let child, hit;
|
|
644
|
+
const { point } = this, len = children.length;
|
|
645
|
+
for (let i = len - 1; i > -1; i--) {
|
|
646
|
+
child = children[i];
|
|
647
|
+
if (!child.__.visible || (hitMask && !child.__.isMask))
|
|
648
|
+
continue;
|
|
649
|
+
hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point);
|
|
650
|
+
if (child.isBranch) {
|
|
651
|
+
if (hit || child.__ignoreHitWorld) {
|
|
652
|
+
this.eachFind(child.children, child.__onlyHitMask);
|
|
653
|
+
if (child.isBranchLeaf && !this.findList.length)
|
|
654
|
+
this.hitChild(child, point);
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
else {
|
|
658
|
+
if (hit)
|
|
659
|
+
this.hitChild(child, point);
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
hitChild(child, point) {
|
|
664
|
+
if (this.exclude && this.exclude.has(child))
|
|
665
|
+
return;
|
|
666
|
+
if (child.__hitWorld(point))
|
|
667
|
+
this.findList.push(child);
|
|
668
|
+
}
|
|
669
|
+
clear() {
|
|
670
|
+
this.point = null;
|
|
671
|
+
this.findList = null;
|
|
672
|
+
this.exclude = null;
|
|
673
|
+
}
|
|
674
|
+
destroy() {
|
|
675
|
+
this.clear();
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
class Selector {
|
|
680
|
+
constructor(target, userConfig) {
|
|
681
|
+
this.config = {};
|
|
682
|
+
this.innerIdList = {};
|
|
683
|
+
this.idList = {};
|
|
684
|
+
this.classNameList = {};
|
|
685
|
+
this.tagNameList = {};
|
|
686
|
+
this.target = target;
|
|
687
|
+
if (userConfig)
|
|
688
|
+
this.config = DataHelper.default(userConfig, this.config);
|
|
689
|
+
this.findPath = new FindPath(target, this);
|
|
690
|
+
this.__listenEvents();
|
|
691
|
+
}
|
|
692
|
+
getByPoint(hitPoint, hitRadius, options) {
|
|
693
|
+
if (Platform.name === 'node')
|
|
694
|
+
this.target.emit(LayoutEvent.CHECK_UPDATE);
|
|
695
|
+
return this.findPath.getByPoint(hitPoint, hitRadius, options);
|
|
696
|
+
}
|
|
697
|
+
find(name, branch) {
|
|
698
|
+
if (typeof name === 'number') {
|
|
699
|
+
return this.getByInnerId(name, branch);
|
|
700
|
+
}
|
|
701
|
+
else if (name.startsWith('#')) {
|
|
702
|
+
return this.getById(name.substring(1), branch);
|
|
703
|
+
}
|
|
704
|
+
else if (name.startsWith('.')) {
|
|
705
|
+
return this.getByClassName(name.substring(1), branch);
|
|
706
|
+
}
|
|
707
|
+
else {
|
|
708
|
+
return this.getByTagName(name, branch);
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
getByInnerId(name, branch) {
|
|
712
|
+
let cache = this.innerIdList[name];
|
|
713
|
+
if (cache)
|
|
714
|
+
return cache;
|
|
715
|
+
if (!branch)
|
|
716
|
+
branch = this.target;
|
|
717
|
+
let find;
|
|
718
|
+
this.loopFind(branch, (leaf) => {
|
|
719
|
+
if (leaf.innerId === name) {
|
|
720
|
+
find = leaf;
|
|
721
|
+
this.innerIdList[name] = find;
|
|
722
|
+
return true;
|
|
723
|
+
}
|
|
724
|
+
else {
|
|
725
|
+
return false;
|
|
726
|
+
}
|
|
727
|
+
});
|
|
728
|
+
return find;
|
|
729
|
+
}
|
|
730
|
+
getById(name, branch) {
|
|
731
|
+
let cache = this.idList[name];
|
|
732
|
+
if (cache)
|
|
733
|
+
return cache;
|
|
734
|
+
if (!branch)
|
|
735
|
+
branch = this.target;
|
|
736
|
+
let find;
|
|
737
|
+
this.loopFind(branch, (leaf) => {
|
|
738
|
+
if (leaf.id === name) {
|
|
739
|
+
find = leaf;
|
|
740
|
+
this.idList[name] = find;
|
|
741
|
+
return true;
|
|
742
|
+
}
|
|
743
|
+
else {
|
|
744
|
+
return false;
|
|
745
|
+
}
|
|
746
|
+
});
|
|
747
|
+
return find;
|
|
748
|
+
}
|
|
749
|
+
getByClassName(name, branch) {
|
|
750
|
+
if (!branch)
|
|
751
|
+
branch = this.target;
|
|
752
|
+
let find = [];
|
|
753
|
+
this.loopFind(branch, (leaf) => {
|
|
754
|
+
if (leaf.className === name)
|
|
755
|
+
find.push(leaf);
|
|
756
|
+
return false;
|
|
757
|
+
});
|
|
758
|
+
return find;
|
|
759
|
+
}
|
|
760
|
+
getByTagName(name, branch) {
|
|
761
|
+
if (!branch)
|
|
762
|
+
branch = this.target;
|
|
763
|
+
let find = [];
|
|
764
|
+
this.loopFind(branch, (leaf) => {
|
|
765
|
+
if (leaf.__tag === name)
|
|
766
|
+
find.push(leaf);
|
|
767
|
+
return false;
|
|
768
|
+
});
|
|
769
|
+
return find;
|
|
770
|
+
}
|
|
771
|
+
loopFind(branch, find) {
|
|
772
|
+
if (find(branch))
|
|
773
|
+
return;
|
|
774
|
+
const { children } = branch;
|
|
775
|
+
for (let i = 0, len = children.length; i < len; i++) {
|
|
776
|
+
branch = children[i];
|
|
777
|
+
if (find(branch))
|
|
778
|
+
return;
|
|
779
|
+
if (branch.isBranch)
|
|
780
|
+
this.loopFind(branch, find);
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
__onRemoveChild(event) {
|
|
784
|
+
const target = event.target;
|
|
785
|
+
if (this.idList[target.id])
|
|
786
|
+
this.idList[target.id] = null;
|
|
787
|
+
if (this.innerIdList[target.id])
|
|
788
|
+
this.innerIdList[target.innerId] = null;
|
|
789
|
+
}
|
|
790
|
+
__listenEvents() {
|
|
791
|
+
this.__eventIds = [
|
|
792
|
+
this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this)
|
|
793
|
+
];
|
|
794
|
+
}
|
|
795
|
+
__removeListenEvents() {
|
|
796
|
+
this.target.off_(this.__eventIds);
|
|
797
|
+
this.__eventIds.length = 0;
|
|
798
|
+
}
|
|
799
|
+
destroy() {
|
|
800
|
+
if (this.__eventIds.length) {
|
|
801
|
+
this.__removeListenEvents();
|
|
802
|
+
this.findPath.destroy();
|
|
803
|
+
this.innerIdList = {};
|
|
804
|
+
this.idList = {};
|
|
805
|
+
this.classNameList = {};
|
|
806
|
+
this.tagNameList = {};
|
|
807
|
+
}
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
Object.assign(Creator, {
|
|
812
|
+
watcher: (target, options) => new Watcher(target, options),
|
|
813
|
+
layouter: (target, options) => new Layouter(target, options),
|
|
814
|
+
renderer: (target, canvas, options) => new Renderer(target, canvas, options),
|
|
815
|
+
selector: (target, options) => new Selector(target, options)
|
|
816
|
+
});
|
|
817
|
+
Platform.layout = Layouter.fullLayout;
|
|
818
|
+
|
|
819
|
+
class LeaferCanvas extends LeaferCanvasBase {
|
|
820
|
+
get allowBackgroundColor() { return true; }
|
|
821
|
+
init() {
|
|
822
|
+
this.__createView();
|
|
823
|
+
this.__createContext();
|
|
824
|
+
this.resize(this.config);
|
|
825
|
+
}
|
|
826
|
+
__createView() {
|
|
827
|
+
this.view = Platform.origin.createCanvas(1, 1);
|
|
828
|
+
}
|
|
829
|
+
updateViewSize() {
|
|
830
|
+
const { width, height, pixelRatio } = this;
|
|
831
|
+
this.view.width = width * pixelRatio;
|
|
832
|
+
this.view.height = height * pixelRatio;
|
|
833
|
+
this.clientBounds = this.bounds;
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
Object.assign(Creator, {
|
|
838
|
+
canvas: (options, manager) => new LeaferCanvas(options, manager),
|
|
839
|
+
image: (options) => new LeaferImage(options),
|
|
840
|
+
hitCanvas: (options, manager) => new LeaferCanvas(options, manager),
|
|
841
|
+
interaction: (target, canvas, selector, options) => { return new InteractionBase(target, canvas, selector, options); }
|
|
842
|
+
});
|
|
843
|
+
function useCanvas(canvasType, power) {
|
|
844
|
+
if (!Platform.origin) {
|
|
845
|
+
if (canvasType === 'skia') {
|
|
846
|
+
const { Canvas, loadImage } = power;
|
|
847
|
+
Platform.origin = {
|
|
848
|
+
createCanvas: (width, height, format) => new Canvas(width, height, format),
|
|
849
|
+
canvasToDataURL: (canvas, type, quality) => canvas.toDataURLSync(type, { quality }),
|
|
850
|
+
canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
|
|
851
|
+
canvasSaveAs: (canvas, filename, quality) => canvas.saveAs(filename, { quality }),
|
|
852
|
+
loadImage
|
|
853
|
+
};
|
|
854
|
+
}
|
|
855
|
+
Platform.canvas = Creator.canvas();
|
|
856
|
+
}
|
|
857
|
+
}
|
|
858
|
+
Platform.name = 'node';
|
|
859
|
+
Platform.requestRender = function (render) { setTimeout(render); };
|
|
860
|
+
Platform.devicePixelRatio = 1;
|
|
861
|
+
Platform.conicGradientSupport = true;
|
|
862
|
+
Platform.realtimeLayout = true;
|
|
863
|
+
|
|
864
|
+
const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper$1, rotate } = MatrixHelper;
|
|
865
|
+
function fillOrFitMode(data, mode, box, width, height, rotation) {
|
|
866
|
+
const transform = get$4();
|
|
867
|
+
const swap = rotation && rotation !== 180;
|
|
868
|
+
const sw = box.width / (swap ? height : width);
|
|
869
|
+
const sh = box.height / (swap ? width : height);
|
|
870
|
+
const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
|
|
871
|
+
const x = box.x + (box.width - width * scale) / 2;
|
|
872
|
+
const y = box.y + (box.height - height * scale) / 2;
|
|
873
|
+
translate$1(transform, x, y);
|
|
874
|
+
scaleHelper$1(transform, scale);
|
|
875
|
+
if (rotation)
|
|
876
|
+
rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
|
|
877
|
+
data.scaleX = data.scaleY = scale;
|
|
878
|
+
data.transform = transform;
|
|
879
|
+
}
|
|
880
|
+
function clipMode(data, box, offset, scale, rotation) {
|
|
881
|
+
const transform = get$4();
|
|
882
|
+
translate$1(transform, box.x, box.y);
|
|
883
|
+
if (offset)
|
|
884
|
+
translate$1(transform, offset.x, offset.y);
|
|
885
|
+
if (scale) {
|
|
886
|
+
typeof scale === 'number' ? scaleHelper$1(transform, scale) : scaleHelper$1(transform, scale.x, scale.y);
|
|
887
|
+
data.scaleX = transform.a;
|
|
888
|
+
data.scaleY = transform.d;
|
|
889
|
+
}
|
|
890
|
+
if (rotation)
|
|
891
|
+
rotate(transform, rotation);
|
|
892
|
+
data.transform = transform;
|
|
893
|
+
}
|
|
894
|
+
function repeatMode(data, box, width, height, scale, rotation) {
|
|
895
|
+
const transform = get$4();
|
|
896
|
+
if (rotation) {
|
|
897
|
+
rotate(transform, rotation);
|
|
898
|
+
switch (rotation) {
|
|
899
|
+
case 90:
|
|
900
|
+
translate$1(transform, height, 0);
|
|
901
|
+
break;
|
|
902
|
+
case 180:
|
|
903
|
+
translate$1(transform, width, height);
|
|
904
|
+
break;
|
|
905
|
+
case 270:
|
|
906
|
+
translate$1(transform, 0, width);
|
|
907
|
+
break;
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
translate$1(transform, box.x, box.y);
|
|
911
|
+
if (scale) {
|
|
912
|
+
scaleOfOuter$2(transform, box, scale);
|
|
913
|
+
data.scaleX = data.scaleY = scale;
|
|
914
|
+
}
|
|
915
|
+
data.transform = transform;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
const { get: get$3, translate } = MatrixHelper;
|
|
919
|
+
function createData(leafPaint, image, paint, box) {
|
|
920
|
+
let { width, height } = image;
|
|
921
|
+
const { opacity, mode, offset, scale, rotation, blendMode } = paint;
|
|
922
|
+
const sameBox = box.width === width && box.height === height;
|
|
923
|
+
if (blendMode)
|
|
924
|
+
leafPaint.blendMode = blendMode;
|
|
925
|
+
const data = leafPaint.data = { mode };
|
|
926
|
+
switch (mode) {
|
|
927
|
+
case 'strench':
|
|
928
|
+
if (!sameBox)
|
|
929
|
+
width = box.width, height = box.height;
|
|
930
|
+
if (box.x || box.y) {
|
|
931
|
+
data.transform = get$3();
|
|
932
|
+
translate(data.transform, box.x, box.y);
|
|
933
|
+
}
|
|
934
|
+
break;
|
|
935
|
+
case 'clip':
|
|
936
|
+
if (offset || scale || rotation)
|
|
937
|
+
clipMode(data, box, offset, scale, rotation);
|
|
938
|
+
break;
|
|
939
|
+
case 'repeat':
|
|
940
|
+
if (!sameBox || scale || rotation)
|
|
941
|
+
repeatMode(data, box, width, height, scale, rotation);
|
|
942
|
+
break;
|
|
943
|
+
case 'fit':
|
|
944
|
+
case 'cover':
|
|
945
|
+
default:
|
|
946
|
+
if (!sameBox || rotation)
|
|
947
|
+
fillOrFitMode(data, mode, box, width, height, rotation);
|
|
948
|
+
}
|
|
949
|
+
data.width = width;
|
|
950
|
+
data.height = height;
|
|
951
|
+
if (opacity)
|
|
952
|
+
data.opacity = opacity;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
function image(ui, attrName, attrValue, box, firstUse) {
|
|
956
|
+
const leafPaint = { type: attrValue.type };
|
|
957
|
+
const image = leafPaint.image = ImageManager.get(attrValue);
|
|
958
|
+
const event = (firstUse || image.loading) && { target: ui, image, attrName, attrValue };
|
|
959
|
+
if (image.ready) {
|
|
960
|
+
if (hasNaturalSize(ui, attrName, image))
|
|
961
|
+
createData(leafPaint, image, attrValue, box);
|
|
962
|
+
if (firstUse) {
|
|
963
|
+
emit(ImageEvent.LOAD, event);
|
|
964
|
+
emit(ImageEvent.LOADED, event);
|
|
965
|
+
}
|
|
966
|
+
}
|
|
967
|
+
else if (image.error) {
|
|
968
|
+
if (firstUse) {
|
|
969
|
+
ui.forceUpdate('surface');
|
|
970
|
+
event.error = image.error;
|
|
971
|
+
emit(ImageEvent.ERROR, event);
|
|
972
|
+
}
|
|
973
|
+
}
|
|
974
|
+
else {
|
|
975
|
+
if (firstUse)
|
|
976
|
+
emit(ImageEvent.LOAD, event);
|
|
977
|
+
leafPaint.loadId = image.load(() => {
|
|
978
|
+
if (!ui.destroyed) {
|
|
979
|
+
if (hasNaturalSize(ui, attrName, image)) {
|
|
980
|
+
createData(leafPaint, image, attrValue, box);
|
|
981
|
+
ui.forceUpdate('surface');
|
|
982
|
+
}
|
|
983
|
+
emit(ImageEvent.LOADED, event);
|
|
984
|
+
}
|
|
985
|
+
}, (error) => {
|
|
986
|
+
ui.forceUpdate('surface');
|
|
987
|
+
event.error = error;
|
|
988
|
+
emit(ImageEvent.ERROR, event);
|
|
989
|
+
});
|
|
990
|
+
}
|
|
991
|
+
return leafPaint;
|
|
992
|
+
}
|
|
993
|
+
function hasNaturalSize(ui, attrName, image) {
|
|
994
|
+
if (attrName === 'fill' && !ui.__.__naturalWidth) {
|
|
995
|
+
const { __: d } = ui;
|
|
996
|
+
d.__naturalWidth = image.width;
|
|
997
|
+
d.__naturalHeight = image.height;
|
|
998
|
+
if (!d.__getInput('width') || !d.__getInput('height')) {
|
|
999
|
+
ui.forceUpdate('width');
|
|
1000
|
+
return false;
|
|
1001
|
+
}
|
|
1002
|
+
}
|
|
1003
|
+
return true;
|
|
1004
|
+
}
|
|
1005
|
+
function emit(type, data) {
|
|
1006
|
+
if (data.target.hasEvent(type))
|
|
1007
|
+
data.target.emitEvent(new ImageEvent(type, data));
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
/******************************************************************************
|
|
1011
|
+
Copyright (c) Microsoft Corporation.
|
|
1012
|
+
|
|
1013
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
1014
|
+
purpose with or without fee is hereby granted.
|
|
1015
|
+
|
|
1016
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
1017
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
1018
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
1019
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
1020
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
1021
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
1022
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
1023
|
+
***************************************************************************** */
|
|
1024
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
1025
|
+
|
|
1026
|
+
|
|
1027
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
1028
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
1029
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
1030
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
1031
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
1032
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
1033
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
1034
|
+
});
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
1038
|
+
var e = new Error(message);
|
|
1039
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
1040
|
+
};
|
|
1041
|
+
|
|
1042
|
+
const { get: get$2, scale: scaleHelper, copy: copy$1 } = MatrixHelper;
|
|
1043
|
+
function createPattern(ui, paint, pixelRatio) {
|
|
1044
|
+
let { scaleX, scaleY } = ui.__world;
|
|
1045
|
+
const id = scaleX + '-' + scaleY;
|
|
1046
|
+
if (paint.patternId !== id && !ui.destroyed) {
|
|
1047
|
+
paint.patternId = id;
|
|
1048
|
+
scaleX = Math.abs(scaleX);
|
|
1049
|
+
scaleY = Math.abs(scaleY);
|
|
1050
|
+
const { image, data } = paint;
|
|
1051
|
+
const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096);
|
|
1052
|
+
const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096);
|
|
1053
|
+
let scale, matrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
|
|
1054
|
+
if (sx) {
|
|
1055
|
+
matrix = get$2();
|
|
1056
|
+
copy$1(matrix, transform);
|
|
1057
|
+
scaleHelper(matrix, 1 / sx, 1 / sy);
|
|
1058
|
+
scaleX *= sx;
|
|
1059
|
+
scaleY *= sy;
|
|
1060
|
+
}
|
|
1061
|
+
scaleX *= pixelRatio;
|
|
1062
|
+
scaleY *= pixelRatio;
|
|
1063
|
+
width *= scaleX;
|
|
1064
|
+
height *= scaleY;
|
|
1065
|
+
if (width > maxWidth || height > maxHeight) {
|
|
1066
|
+
scale = Math.max(width / maxWidth, height / maxHeight);
|
|
1067
|
+
}
|
|
1068
|
+
if (scale) {
|
|
1069
|
+
scaleX /= scale;
|
|
1070
|
+
scaleY /= scale;
|
|
1071
|
+
width /= scale;
|
|
1072
|
+
height /= scale;
|
|
1073
|
+
}
|
|
1074
|
+
if (sx) {
|
|
1075
|
+
scaleX /= sx;
|
|
1076
|
+
scaleY /= sy;
|
|
1077
|
+
}
|
|
1078
|
+
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
1079
|
+
if (!matrix) {
|
|
1080
|
+
matrix = get$2();
|
|
1081
|
+
if (transform)
|
|
1082
|
+
copy$1(matrix, transform);
|
|
1083
|
+
}
|
|
1084
|
+
scaleHelper(matrix, 1 / scaleX, 1 / scaleY);
|
|
1085
|
+
}
|
|
1086
|
+
const style = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
|
|
1087
|
+
try {
|
|
1088
|
+
if (paint.transform)
|
|
1089
|
+
paint.transform = null;
|
|
1090
|
+
if (matrix)
|
|
1091
|
+
style.setTransform ? style.setTransform(matrix) : paint.transform = matrix;
|
|
1092
|
+
}
|
|
1093
|
+
catch (_a) {
|
|
1094
|
+
paint.transform = matrix;
|
|
1095
|
+
}
|
|
1096
|
+
paint.style = style;
|
|
1097
|
+
return true;
|
|
1098
|
+
}
|
|
1099
|
+
else {
|
|
1100
|
+
return false;
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
function checkImage(ui, canvas, paint, allowPaint) {
|
|
1105
|
+
const { scaleX, scaleY } = ui.__world;
|
|
1106
|
+
if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
|
|
1107
|
+
return false;
|
|
1108
|
+
}
|
|
1109
|
+
else {
|
|
1110
|
+
if (allowPaint) {
|
|
1111
|
+
if (paint.image.isSVG && paint.data.mode !== 'repeat') {
|
|
1112
|
+
let { width, height } = paint.data;
|
|
1113
|
+
width *= scaleX * canvas.pixelRatio;
|
|
1114
|
+
height *= scaleY * canvas.pixelRatio;
|
|
1115
|
+
allowPaint = width > 4096 || height > 4096;
|
|
1116
|
+
}
|
|
1117
|
+
else {
|
|
1118
|
+
allowPaint = false;
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
if (allowPaint) {
|
|
1122
|
+
canvas.save();
|
|
1123
|
+
canvas.clip();
|
|
1124
|
+
const { data } = paint;
|
|
1125
|
+
if (paint.blendMode)
|
|
1126
|
+
canvas.blendMode = paint.blendMode;
|
|
1127
|
+
if (data.opacity)
|
|
1128
|
+
canvas.opacity *= data.opacity;
|
|
1129
|
+
if (data.transform)
|
|
1130
|
+
canvas.transform(data.transform);
|
|
1131
|
+
canvas.drawImage(paint.image.view, 0, 0, data.width, data.height);
|
|
1132
|
+
canvas.restore();
|
|
1133
|
+
return true;
|
|
1134
|
+
}
|
|
1135
|
+
else {
|
|
1136
|
+
if (!paint.style) {
|
|
1137
|
+
createPattern(ui, paint, canvas.pixelRatio);
|
|
1138
|
+
}
|
|
1139
|
+
else {
|
|
1140
|
+
ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
|
|
1141
|
+
if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
|
|
1142
|
+
ui.forceUpdate('surface');
|
|
1143
|
+
}), 300);
|
|
1144
|
+
}
|
|
1145
|
+
return false;
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
function recycleImage(data, attrName) {
|
|
1151
|
+
const paints = (attrName === 'fill' ? data._fill : data._stroke);
|
|
1152
|
+
if (paints instanceof Array) {
|
|
1153
|
+
let image, recycleMap, input, url;
|
|
1154
|
+
for (let i = 0, len = paints.length; i < len; i++) {
|
|
1155
|
+
image = paints[i].image;
|
|
1156
|
+
url = image && image.url;
|
|
1157
|
+
if (url) {
|
|
1158
|
+
if (!recycleMap)
|
|
1159
|
+
recycleMap = {};
|
|
1160
|
+
recycleMap[url] = true;
|
|
1161
|
+
ImageManager.recycle(image);
|
|
1162
|
+
if (image.loading) {
|
|
1163
|
+
if (!input) {
|
|
1164
|
+
input = (data.__input && data.__input[attrName]) || [];
|
|
1165
|
+
if (!(input instanceof Array))
|
|
1166
|
+
input = [input];
|
|
1167
|
+
}
|
|
1168
|
+
image.unload(paints[i].loadId, !input.some((item) => item.url === url));
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
}
|
|
1172
|
+
return recycleMap;
|
|
1173
|
+
}
|
|
1174
|
+
return null;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
function fillText(ui, canvas) {
|
|
1178
|
+
let row;
|
|
1179
|
+
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
1180
|
+
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1181
|
+
row = rows[i];
|
|
1182
|
+
if (row.text) {
|
|
1183
|
+
canvas.fillText(row.text, row.x, row.y);
|
|
1184
|
+
}
|
|
1185
|
+
else if (row.data) {
|
|
1186
|
+
row.data.forEach(charData => {
|
|
1187
|
+
canvas.fillText(charData.char, charData.x, row.y);
|
|
1188
|
+
});
|
|
1189
|
+
}
|
|
1190
|
+
if (decorationY)
|
|
1191
|
+
canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
1192
|
+
}
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
function fill(ui, canvas, fill) {
|
|
1196
|
+
canvas.fillStyle = fill;
|
|
1197
|
+
ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
|
|
1198
|
+
}
|
|
1199
|
+
function fills(ui, canvas, fills) {
|
|
1200
|
+
let item;
|
|
1201
|
+
const { windingRule, __font } = ui.__;
|
|
1202
|
+
for (let i = 0, len = fills.length; i < len; i++) {
|
|
1203
|
+
item = fills[i];
|
|
1204
|
+
if (item.image && checkImage(ui, canvas, item, !__font))
|
|
1205
|
+
continue;
|
|
1206
|
+
if (item.style) {
|
|
1207
|
+
canvas.fillStyle = item.style;
|
|
1208
|
+
if (item.transform) {
|
|
1209
|
+
canvas.save();
|
|
1210
|
+
canvas.transform(item.transform);
|
|
1211
|
+
if (item.blendMode)
|
|
1212
|
+
canvas.blendMode = item.blendMode;
|
|
1213
|
+
__font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
|
|
1214
|
+
canvas.restore();
|
|
1215
|
+
}
|
|
1216
|
+
else {
|
|
1217
|
+
if (item.blendMode) {
|
|
1218
|
+
canvas.saveBlendMode(item.blendMode);
|
|
1219
|
+
__font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
|
|
1220
|
+
canvas.restoreBlendMode();
|
|
1221
|
+
}
|
|
1222
|
+
else {
|
|
1223
|
+
__font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
|
|
1224
|
+
}
|
|
1225
|
+
}
|
|
1226
|
+
}
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
function strokeText(ui, canvas, stroke) {
|
|
1231
|
+
const { strokeAlign } = ui.__;
|
|
1232
|
+
const isStrokes = typeof stroke !== 'string';
|
|
1233
|
+
switch (strokeAlign) {
|
|
1234
|
+
case 'center':
|
|
1235
|
+
canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
|
|
1236
|
+
isStrokes ? drawStrokesStyle(ui, stroke, canvas, true) : drawTextStroke(ui, canvas);
|
|
1237
|
+
break;
|
|
1238
|
+
case 'inside':
|
|
1239
|
+
drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes);
|
|
1240
|
+
break;
|
|
1241
|
+
case 'outside':
|
|
1242
|
+
drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes);
|
|
1243
|
+
break;
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
function drawAlignStroke(ui, canvas, stroke, align, isStrokes) {
|
|
1247
|
+
const { strokeWidth, __font } = ui.__;
|
|
1248
|
+
const out = canvas.getSameCanvas(true);
|
|
1249
|
+
out.setStroke(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__);
|
|
1250
|
+
out.font = __font;
|
|
1251
|
+
isStrokes ? drawStrokesStyle(ui, stroke, out, true) : drawTextStroke(ui, out);
|
|
1252
|
+
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
1253
|
+
fillText(ui, out);
|
|
1254
|
+
out.blendMode = 'normal';
|
|
1255
|
+
canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
|
|
1256
|
+
out.recycle();
|
|
1257
|
+
}
|
|
1258
|
+
function drawTextStroke(ui, canvas) {
|
|
1259
|
+
let row;
|
|
1260
|
+
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
1261
|
+
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1262
|
+
row = rows[i];
|
|
1263
|
+
if (row.text) {
|
|
1264
|
+
canvas.strokeText(row.text, row.x, row.y);
|
|
1265
|
+
}
|
|
1266
|
+
else if (row.data) {
|
|
1267
|
+
row.data.forEach(charData => {
|
|
1268
|
+
canvas.strokeText(charData.char, charData.x, row.y);
|
|
1269
|
+
});
|
|
1270
|
+
}
|
|
1271
|
+
if (decorationY)
|
|
1272
|
+
canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
1273
|
+
}
|
|
1274
|
+
}
|
|
1275
|
+
function drawStrokesStyle(ui, strokes, canvas, isText) {
|
|
1276
|
+
let item;
|
|
1277
|
+
for (let i = 0, len = strokes.length; i < len; i++) {
|
|
1278
|
+
item = strokes[i];
|
|
1279
|
+
if (item.image && checkImage(ui, canvas, item, false))
|
|
1280
|
+
continue;
|
|
1281
|
+
if (item.style) {
|
|
1282
|
+
canvas.strokeStyle = item.style;
|
|
1283
|
+
if (item.blendMode) {
|
|
1284
|
+
canvas.saveBlendMode(item.blendMode);
|
|
1285
|
+
isText ? drawTextStroke(ui, canvas) : canvas.stroke();
|
|
1286
|
+
canvas.restoreBlendMode();
|
|
1287
|
+
}
|
|
1288
|
+
else {
|
|
1289
|
+
isText ? drawTextStroke(ui, canvas) : canvas.stroke();
|
|
1290
|
+
}
|
|
1291
|
+
}
|
|
1292
|
+
}
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
function stroke(ui, canvas, stroke) {
|
|
1296
|
+
const options = ui.__;
|
|
1297
|
+
const { strokeWidth, strokeAlign, __font } = options;
|
|
1298
|
+
if (!strokeWidth)
|
|
1299
|
+
return;
|
|
1300
|
+
if (__font) {
|
|
1301
|
+
strokeText(ui, canvas, stroke);
|
|
1302
|
+
}
|
|
1303
|
+
else {
|
|
1304
|
+
switch (strokeAlign) {
|
|
1305
|
+
case 'center':
|
|
1306
|
+
canvas.setStroke(stroke, strokeWidth, options);
|
|
1307
|
+
canvas.stroke();
|
|
1308
|
+
break;
|
|
1309
|
+
case 'inside':
|
|
1310
|
+
canvas.save();
|
|
1311
|
+
canvas.setStroke(stroke, strokeWidth * 2, options);
|
|
1312
|
+
options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
|
|
1313
|
+
canvas.stroke();
|
|
1314
|
+
canvas.restore();
|
|
1315
|
+
break;
|
|
1316
|
+
case 'outside':
|
|
1317
|
+
const out = canvas.getSameCanvas(true);
|
|
1318
|
+
out.setStroke(stroke, strokeWidth * 2, ui.__);
|
|
1319
|
+
ui.__drawRenderPath(out);
|
|
1320
|
+
out.stroke();
|
|
1321
|
+
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1322
|
+
out.clearWorld(ui.__layout.renderBounds);
|
|
1323
|
+
canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
|
|
1324
|
+
out.recycle();
|
|
1325
|
+
break;
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
}
|
|
1329
|
+
function strokes(ui, canvas, strokes) {
|
|
1330
|
+
const options = ui.__;
|
|
1331
|
+
const { strokeWidth, strokeAlign, __font } = options;
|
|
1332
|
+
if (!strokeWidth)
|
|
1333
|
+
return;
|
|
1334
|
+
if (__font) {
|
|
1335
|
+
strokeText(ui, canvas, strokes);
|
|
1336
|
+
}
|
|
1337
|
+
else {
|
|
1338
|
+
switch (strokeAlign) {
|
|
1339
|
+
case 'center':
|
|
1340
|
+
canvas.setStroke(undefined, strokeWidth, options);
|
|
1341
|
+
drawStrokesStyle(ui, strokes, canvas);
|
|
1342
|
+
break;
|
|
1343
|
+
case 'inside':
|
|
1344
|
+
canvas.save();
|
|
1345
|
+
canvas.setStroke(undefined, strokeWidth * 2, options);
|
|
1346
|
+
options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
|
|
1347
|
+
drawStrokesStyle(ui, strokes, canvas);
|
|
1348
|
+
canvas.restore();
|
|
1349
|
+
break;
|
|
1350
|
+
case 'outside':
|
|
1351
|
+
const { renderBounds } = ui.__layout;
|
|
1352
|
+
const out = canvas.getSameCanvas(true);
|
|
1353
|
+
ui.__drawRenderPath(out);
|
|
1354
|
+
out.setStroke(undefined, strokeWidth * 2, ui.__);
|
|
1355
|
+
drawStrokesStyle(ui, strokes, out);
|
|
1356
|
+
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1357
|
+
out.clearWorld(renderBounds);
|
|
1358
|
+
canvas.copyWorldToInner(out, ui.__world, renderBounds);
|
|
1359
|
+
out.recycle();
|
|
1360
|
+
break;
|
|
1361
|
+
}
|
|
1362
|
+
}
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1365
|
+
const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
|
|
1366
|
+
function shape(ui, current, options) {
|
|
1367
|
+
const canvas = current.getSameCanvas();
|
|
1368
|
+
let bounds, matrix, shapeBounds;
|
|
1369
|
+
let worldCanvas;
|
|
1370
|
+
const { __world } = ui;
|
|
1371
|
+
let { scaleX, scaleY } = __world;
|
|
1372
|
+
if (scaleX < 0)
|
|
1373
|
+
scaleX = -scaleX;
|
|
1374
|
+
if (scaleY < 0)
|
|
1375
|
+
scaleY = -scaleY;
|
|
1376
|
+
if (!current.bounds.includes(__world, options.matrix)) {
|
|
1377
|
+
const { renderShapeSpread: spread } = ui.__layout;
|
|
1378
|
+
const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, __world, options.matrix);
|
|
1379
|
+
matrix = current.bounds.getFitMatrix(worldClipBounds);
|
|
1380
|
+
if (matrix.a < 1) {
|
|
1381
|
+
worldCanvas = current.getSameCanvas();
|
|
1382
|
+
ui.__renderShape(worldCanvas, options);
|
|
1383
|
+
scaleX *= matrix.a;
|
|
1384
|
+
scaleY *= matrix.d;
|
|
1385
|
+
}
|
|
1386
|
+
shapeBounds = getOuterOf(__world, matrix);
|
|
1387
|
+
bounds = getByMove(shapeBounds, -matrix.e, -matrix.f);
|
|
1388
|
+
if (options.matrix)
|
|
1389
|
+
matrix.multiply(options.matrix);
|
|
1390
|
+
options = Object.assign(Object.assign({}, options), { matrix });
|
|
1391
|
+
}
|
|
1392
|
+
else {
|
|
1393
|
+
if (options.matrix) {
|
|
1394
|
+
scaleX *= options.matrix.a;
|
|
1395
|
+
scaleY *= options.matrix.d;
|
|
1396
|
+
bounds = shapeBounds = getOuterOf(__world, options.matrix);
|
|
1397
|
+
}
|
|
1398
|
+
else {
|
|
1399
|
+
bounds = shapeBounds = __world;
|
|
1400
|
+
}
|
|
1401
|
+
worldCanvas = canvas;
|
|
1402
|
+
}
|
|
1403
|
+
ui.__renderShape(canvas, options);
|
|
1404
|
+
return {
|
|
1405
|
+
canvas, matrix, bounds,
|
|
1406
|
+
worldCanvas, shapeBounds, scaleX, scaleY
|
|
1407
|
+
};
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
const defaultFrom$2 = { x: 0.5, y: 0 };
|
|
1411
|
+
const defaultTo$2 = { x: 0.5, y: 1 };
|
|
1412
|
+
function linearGradient(paint, box) {
|
|
1413
|
+
let { from, to, type, blendMode, opacity } = paint;
|
|
1414
|
+
from || (from = defaultFrom$2);
|
|
1415
|
+
to || (to = defaultTo$2);
|
|
1416
|
+
const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height);
|
|
1417
|
+
applyStops(style, paint.stops, opacity);
|
|
1418
|
+
const data = { type, style };
|
|
1419
|
+
if (blendMode)
|
|
1420
|
+
data.blendMode = blendMode;
|
|
1421
|
+
return data;
|
|
1422
|
+
}
|
|
1423
|
+
function applyStops(gradient, stops, opacity) {
|
|
1424
|
+
let stop;
|
|
1425
|
+
for (let i = 0, len = stops.length; i < len; i++) {
|
|
1426
|
+
stop = stops[i];
|
|
1427
|
+
gradient.addColorStop(stop.offset, ColorConvert$1.string(stop.color, opacity));
|
|
1428
|
+
}
|
|
1429
|
+
}
|
|
1430
|
+
|
|
1431
|
+
const { set: set$1, getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
|
|
1432
|
+
const { get: get$1, rotateOfOuter: rotateOfOuter$1, scaleOfOuter: scaleOfOuter$1 } = MatrixHelper;
|
|
1433
|
+
const defaultFrom$1 = { x: 0.5, y: 0.5 };
|
|
1434
|
+
const defaultTo$1 = { x: 0.5, y: 1 };
|
|
1435
|
+
const realFrom$1 = {};
|
|
1436
|
+
const realTo$1 = {};
|
|
1437
|
+
function radialGradient(paint, box) {
|
|
1438
|
+
let { from, to, type, opacity, blendMode, stretch } = paint;
|
|
1439
|
+
from || (from = defaultFrom$1);
|
|
1440
|
+
to || (to = defaultTo$1);
|
|
1441
|
+
const { x, y, width, height } = box;
|
|
1442
|
+
set$1(realFrom$1, x + from.x * width, y + from.y * height);
|
|
1443
|
+
set$1(realTo$1, x + to.x * width, y + to.y * height);
|
|
1444
|
+
let transform;
|
|
1445
|
+
if (width !== height || stretch) {
|
|
1446
|
+
transform = get$1();
|
|
1447
|
+
scaleOfOuter$1(transform, realFrom$1, width / height * (stretch || 1), 1);
|
|
1448
|
+
rotateOfOuter$1(transform, realFrom$1, getAngle$1(realFrom$1, realTo$1) + 90);
|
|
1449
|
+
}
|
|
1450
|
+
const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
|
|
1451
|
+
applyStops(style, paint.stops, opacity);
|
|
1452
|
+
const data = { type, style, transform };
|
|
1453
|
+
if (blendMode)
|
|
1454
|
+
data.blendMode = blendMode;
|
|
1455
|
+
return data;
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
const { set, getAngle, getDistance } = PointHelper;
|
|
1459
|
+
const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
|
|
1460
|
+
const defaultFrom = { x: 0.5, y: 0.5 };
|
|
1461
|
+
const defaultTo = { x: 0.5, y: 1 };
|
|
1462
|
+
const realFrom = {};
|
|
1463
|
+
const realTo = {};
|
|
1464
|
+
function conicGradient(paint, box) {
|
|
1465
|
+
let { from, to, type, opacity, blendMode, stretch } = paint;
|
|
1466
|
+
from || (from = defaultFrom);
|
|
1467
|
+
to || (to = defaultTo);
|
|
1468
|
+
const { x, y, width, height } = box;
|
|
1469
|
+
set(realFrom, x + from.x * width, y + from.y * height);
|
|
1470
|
+
set(realTo, x + to.x * width, y + to.y * height);
|
|
1471
|
+
const transform = get();
|
|
1472
|
+
const angle = getAngle(realFrom, realTo);
|
|
1473
|
+
if (Platform.conicGradientRotate90) {
|
|
1474
|
+
scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1);
|
|
1475
|
+
rotateOfOuter(transform, realFrom, angle + 90);
|
|
1476
|
+
}
|
|
1477
|
+
else {
|
|
1478
|
+
scaleOfOuter(transform, realFrom, 1, width / height * (stretch || 1));
|
|
1479
|
+
rotateOfOuter(transform, realFrom, angle);
|
|
1480
|
+
}
|
|
1481
|
+
const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
|
|
1482
|
+
applyStops(style, paint.stops, opacity);
|
|
1483
|
+
const data = { type, style, transform };
|
|
1484
|
+
if (blendMode)
|
|
1485
|
+
data.blendMode = blendMode;
|
|
1486
|
+
return data;
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
let recycleMap;
|
|
1490
|
+
function compute(ui, attrName) {
|
|
1491
|
+
const value = [];
|
|
1492
|
+
let item;
|
|
1493
|
+
let paints = ui.__.__input[attrName];
|
|
1494
|
+
if (!(paints instanceof Array))
|
|
1495
|
+
paints = [paints];
|
|
1496
|
+
recycleMap = recycleImage(ui.__, attrName);
|
|
1497
|
+
for (let i = 0, len = paints.length; i < len; i++) {
|
|
1498
|
+
item = getLeafPaint(ui, paints[i], attrName);
|
|
1499
|
+
if (item)
|
|
1500
|
+
value.push(item);
|
|
1501
|
+
}
|
|
1502
|
+
ui.__['_' + attrName] = value.length ? value : undefined;
|
|
1503
|
+
}
|
|
1504
|
+
function getLeafPaint(ui, paint, attrName) {
|
|
1505
|
+
if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
|
|
1506
|
+
return undefined;
|
|
1507
|
+
const { boxBounds } = ui.__layout;
|
|
1508
|
+
switch (paint.type) {
|
|
1509
|
+
case 'solid':
|
|
1510
|
+
let { type, blendMode, color, opacity } = paint;
|
|
1511
|
+
return { type, blendMode, style: ColorConvert$1.string(color, opacity) };
|
|
1512
|
+
case 'image':
|
|
1513
|
+
return image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
|
|
1514
|
+
case 'linear':
|
|
1515
|
+
return linearGradient(paint, boxBounds);
|
|
1516
|
+
case 'radial':
|
|
1517
|
+
return radialGradient(paint, boxBounds);
|
|
1518
|
+
case 'angular':
|
|
1519
|
+
return conicGradient(paint, boxBounds);
|
|
1520
|
+
default:
|
|
1521
|
+
return paint.r ? { type: 'solid', style: ColorConvert$1.string(paint) } : undefined;
|
|
1522
|
+
}
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
var UIPaint = /*#__PURE__*/Object.freeze({
|
|
1526
|
+
__proto__: null,
|
|
1527
|
+
compute: compute,
|
|
1528
|
+
drawTextStroke: drawTextStroke,
|
|
1529
|
+
fill: fill,
|
|
1530
|
+
fillText: fillText,
|
|
1531
|
+
fills: fills,
|
|
1532
|
+
recycleImage: recycleImage,
|
|
1533
|
+
shape: shape,
|
|
1534
|
+
stroke: stroke,
|
|
1535
|
+
strokeText: strokeText,
|
|
1536
|
+
strokes: strokes
|
|
1537
|
+
});
|
|
1538
|
+
|
|
1539
|
+
const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
|
|
1540
|
+
const tempBounds = {};
|
|
1541
|
+
const offsetOutBounds$1 = {};
|
|
1542
|
+
function shadow(ui, current, shape, _options) {
|
|
1543
|
+
let copyBounds, spreadScale;
|
|
1544
|
+
const { __world, __layout } = ui;
|
|
1545
|
+
const { shadow } = ui.__;
|
|
1546
|
+
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1547
|
+
const other = current.getSameCanvas();
|
|
1548
|
+
const end = shadow.length - 1;
|
|
1549
|
+
toOffsetOutBounds$1(bounds, offsetOutBounds$1);
|
|
1550
|
+
shadow.forEach((item, index) => {
|
|
1551
|
+
other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, item.color);
|
|
1552
|
+
spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
|
|
1553
|
+
drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
|
|
1554
|
+
copyBounds = bounds;
|
|
1555
|
+
if (item.box) {
|
|
1556
|
+
other.restore();
|
|
1557
|
+
other.save();
|
|
1558
|
+
if (worldCanvas) {
|
|
1559
|
+
other.copyWorld(other, bounds, __world, 'copy');
|
|
1560
|
+
copyBounds = __world;
|
|
1561
|
+
}
|
|
1562
|
+
worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
|
|
1563
|
+
}
|
|
1564
|
+
if (ui.__hasMirror) {
|
|
1565
|
+
current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
|
|
1566
|
+
}
|
|
1567
|
+
else {
|
|
1568
|
+
current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
|
|
1569
|
+
}
|
|
1570
|
+
if (end && index < end)
|
|
1571
|
+
other.clear();
|
|
1572
|
+
});
|
|
1573
|
+
other.recycle();
|
|
1574
|
+
}
|
|
1575
|
+
function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
|
|
1576
|
+
const { bounds, shapeBounds } = shape;
|
|
1577
|
+
if (Platform.fullImageShadow) {
|
|
1578
|
+
copy(tempBounds, canvas.bounds);
|
|
1579
|
+
tempBounds.x += (outBounds.x - shapeBounds.x);
|
|
1580
|
+
tempBounds.y += (outBounds.y - shapeBounds.y);
|
|
1581
|
+
if (spreadScale) {
|
|
1582
|
+
const { matrix } = shape;
|
|
1583
|
+
tempBounds.x -= (bounds.x + (matrix ? matrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
|
|
1584
|
+
tempBounds.y -= (bounds.y + (matrix ? matrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
|
|
1585
|
+
tempBounds.width *= spreadScale;
|
|
1586
|
+
tempBounds.height *= spreadScale;
|
|
1587
|
+
}
|
|
1588
|
+
canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
|
|
1589
|
+
}
|
|
1590
|
+
else {
|
|
1591
|
+
if (spreadScale) {
|
|
1592
|
+
copy(tempBounds, outBounds);
|
|
1593
|
+
tempBounds.x -= (outBounds.width / 2) * (spreadScale - 1);
|
|
1594
|
+
tempBounds.y -= (outBounds.height / 2) * (spreadScale - 1);
|
|
1595
|
+
tempBounds.width *= spreadScale;
|
|
1596
|
+
tempBounds.height *= spreadScale;
|
|
1597
|
+
}
|
|
1598
|
+
canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds);
|
|
1599
|
+
}
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
const { toOffsetOutBounds } = BoundsHelper;
|
|
1603
|
+
const offsetOutBounds = {};
|
|
1604
|
+
function innerShadow(ui, current, shape, _options) {
|
|
1605
|
+
let copyBounds, spreadScale;
|
|
1606
|
+
const { __world, __layout: __layout } = ui;
|
|
1607
|
+
const { innerShadow } = ui.__;
|
|
1608
|
+
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1609
|
+
const other = current.getSameCanvas();
|
|
1610
|
+
const end = innerShadow.length - 1;
|
|
1611
|
+
toOffsetOutBounds(bounds, offsetOutBounds);
|
|
1612
|
+
innerShadow.forEach((item, index) => {
|
|
1613
|
+
other.save();
|
|
1614
|
+
other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX);
|
|
1615
|
+
spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
|
|
1616
|
+
drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
|
|
1617
|
+
other.restore();
|
|
1618
|
+
if (worldCanvas) {
|
|
1619
|
+
other.copyWorld(other, bounds, __world, 'copy');
|
|
1620
|
+
other.copyWorld(worldCanvas, __world, __world, 'source-out');
|
|
1621
|
+
copyBounds = __world;
|
|
1622
|
+
}
|
|
1623
|
+
else {
|
|
1624
|
+
other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
|
|
1625
|
+
copyBounds = bounds;
|
|
1626
|
+
}
|
|
1627
|
+
other.fillWorld(copyBounds, item.color, 'source-in');
|
|
1628
|
+
if (ui.__hasMirror) {
|
|
1629
|
+
current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
|
|
1630
|
+
}
|
|
1631
|
+
else {
|
|
1632
|
+
current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
|
|
1633
|
+
}
|
|
1634
|
+
if (end && index < end)
|
|
1635
|
+
other.clear();
|
|
1636
|
+
});
|
|
1637
|
+
other.recycle();
|
|
1638
|
+
}
|
|
1639
|
+
|
|
1640
|
+
function blur(ui, current, origin) {
|
|
1641
|
+
const { blur } = ui.__;
|
|
1642
|
+
origin.setWorldBlur(blur * ui.__world.a);
|
|
1643
|
+
origin.copyWorldToInner(current, ui.__world, ui.__layout.renderBounds);
|
|
1644
|
+
origin.filter = 'none';
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
var UIEffect = /*#__PURE__*/Object.freeze({
|
|
1648
|
+
__proto__: null,
|
|
1649
|
+
blur: blur,
|
|
1650
|
+
innerShadow: innerShadow,
|
|
1651
|
+
shadow: shadow
|
|
1652
|
+
});
|
|
1653
|
+
|
|
1654
|
+
const money = '¥¥$€££¢¢';
|
|
1655
|
+
const letter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
|
|
1656
|
+
const langBefore = '《(「〈『〖【〔{┌<‘“=' + money;
|
|
1657
|
+
const langAfter = '》)」〉』〗】〕}┐>’”!?,、。:;‰';
|
|
1658
|
+
const langSymbol = '≮≯≈≠=…';
|
|
1659
|
+
const langBreak$1 = '—/~|┆·';
|
|
1660
|
+
const beforeChar = '{[(<\'"' + langBefore;
|
|
1661
|
+
const afterChar = '>)]}%!?,.:;\'"' + langAfter;
|
|
1662
|
+
const symbolChar = afterChar + '_#~&*+\\=|' + langSymbol;
|
|
1663
|
+
const breakChar = '- ' + langBreak$1;
|
|
1664
|
+
const cjkRangeList = [
|
|
1665
|
+
[0x4E00, 0x9FFF],
|
|
1666
|
+
[0x3400, 0x4DBF],
|
|
1667
|
+
[0x20000, 0x2A6DF],
|
|
1668
|
+
[0x2A700, 0x2B73F],
|
|
1669
|
+
[0x2B740, 0x2B81F],
|
|
1670
|
+
[0x2B820, 0x2CEAF],
|
|
1671
|
+
[0x2CEB0, 0x2EBEF],
|
|
1672
|
+
[0x30000, 0x3134F],
|
|
1673
|
+
[0x31350, 0x323AF],
|
|
1674
|
+
[0x2E80, 0x2EFF],
|
|
1675
|
+
[0x2F00, 0x2FDF],
|
|
1676
|
+
[0x2FF0, 0x2FFF],
|
|
1677
|
+
[0x3000, 0x303F],
|
|
1678
|
+
[0x31C0, 0x31EF],
|
|
1679
|
+
[0x3200, 0x32FF],
|
|
1680
|
+
[0x3300, 0x33FF],
|
|
1681
|
+
[0xF900, 0xFAFF],
|
|
1682
|
+
[0xFE30, 0xFE4F],
|
|
1683
|
+
[0x1F200, 0x1F2FF],
|
|
1684
|
+
[0x2F800, 0x2FA1F],
|
|
1685
|
+
];
|
|
1686
|
+
const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join('|'));
|
|
1687
|
+
function mapChar(str) {
|
|
1688
|
+
const map = {};
|
|
1689
|
+
str.split('').forEach(char => map[char] = true);
|
|
1690
|
+
return map;
|
|
1691
|
+
}
|
|
1692
|
+
const letterMap = mapChar(letter);
|
|
1693
|
+
const beforeMap = mapChar(beforeChar);
|
|
1694
|
+
const afterMap = mapChar(afterChar);
|
|
1695
|
+
const symbolMap = mapChar(symbolChar);
|
|
1696
|
+
const breakMap = mapChar(breakChar);
|
|
1697
|
+
var CharType;
|
|
1698
|
+
(function (CharType) {
|
|
1699
|
+
CharType[CharType["Letter"] = 0] = "Letter";
|
|
1700
|
+
CharType[CharType["Single"] = 1] = "Single";
|
|
1701
|
+
CharType[CharType["Before"] = 2] = "Before";
|
|
1702
|
+
CharType[CharType["After"] = 3] = "After";
|
|
1703
|
+
CharType[CharType["Symbol"] = 4] = "Symbol";
|
|
1704
|
+
CharType[CharType["Break"] = 5] = "Break";
|
|
1705
|
+
})(CharType || (CharType = {}));
|
|
1706
|
+
const { Letter: Letter$1, Single: Single$1, Before: Before$1, After: After$1, Symbol: Symbol$1, Break: Break$1 } = CharType;
|
|
1707
|
+
function getCharType(char) {
|
|
1708
|
+
if (letterMap[char]) {
|
|
1709
|
+
return Letter$1;
|
|
1710
|
+
}
|
|
1711
|
+
else if (breakMap[char]) {
|
|
1712
|
+
return Break$1;
|
|
1713
|
+
}
|
|
1714
|
+
else if (beforeMap[char]) {
|
|
1715
|
+
return Before$1;
|
|
1716
|
+
}
|
|
1717
|
+
else if (afterMap[char]) {
|
|
1718
|
+
return After$1;
|
|
1719
|
+
}
|
|
1720
|
+
else if (symbolMap[char]) {
|
|
1721
|
+
return Symbol$1;
|
|
1722
|
+
}
|
|
1723
|
+
else if (cjkReg.test(char)) {
|
|
1724
|
+
return Single$1;
|
|
1725
|
+
}
|
|
1726
|
+
else {
|
|
1727
|
+
return Letter$1;
|
|
1728
|
+
}
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
const TextRowHelper = {
|
|
1732
|
+
trimRight(row) {
|
|
1733
|
+
const { words } = row;
|
|
1734
|
+
let trimRight = 0, len = words.length, char;
|
|
1735
|
+
for (let i = len - 1; i > -1; i--) {
|
|
1736
|
+
char = words[i].data[0];
|
|
1737
|
+
if (char.char === ' ') {
|
|
1738
|
+
trimRight++;
|
|
1739
|
+
row.width -= char.width;
|
|
1740
|
+
}
|
|
1741
|
+
else {
|
|
1742
|
+
break;
|
|
1743
|
+
}
|
|
1744
|
+
}
|
|
1745
|
+
if (trimRight)
|
|
1746
|
+
words.splice(len - trimRight, trimRight);
|
|
1747
|
+
}
|
|
1748
|
+
};
|
|
1749
|
+
|
|
1750
|
+
function getTextCase(char, textCase, firstChar) {
|
|
1751
|
+
switch (textCase) {
|
|
1752
|
+
case 'title':
|
|
1753
|
+
return firstChar ? char.toUpperCase() : char;
|
|
1754
|
+
case 'upper':
|
|
1755
|
+
return char.toUpperCase();
|
|
1756
|
+
case 'lower':
|
|
1757
|
+
return char.toLowerCase();
|
|
1758
|
+
default:
|
|
1759
|
+
return char;
|
|
1760
|
+
}
|
|
1761
|
+
}
|
|
1762
|
+
|
|
1763
|
+
const { trimRight } = TextRowHelper;
|
|
1764
|
+
const { Letter, Single, Before, After, Symbol, Break } = CharType;
|
|
1765
|
+
let word, row, wordWidth, rowWidth, realWidth;
|
|
1766
|
+
let char, charWidth, charType, lastCharType, langBreak, afterBreak, paraStart;
|
|
1767
|
+
let textDrawData, rows = [], bounds;
|
|
1768
|
+
function createRows(drawData, content, style) {
|
|
1769
|
+
textDrawData = drawData;
|
|
1770
|
+
rows = drawData.rows;
|
|
1771
|
+
bounds = drawData.bounds;
|
|
1772
|
+
const { __letterSpacing, paraIndent, textCase } = style;
|
|
1773
|
+
const { canvas } = Platform;
|
|
1774
|
+
const { width, height } = bounds;
|
|
1775
|
+
const charMode = width || height || __letterSpacing || (textCase !== 'none');
|
|
1776
|
+
if (charMode) {
|
|
1777
|
+
paraStart = true;
|
|
1778
|
+
lastCharType = null;
|
|
1779
|
+
wordWidth = rowWidth = 0;
|
|
1780
|
+
word = { data: [] }, row = { words: [] };
|
|
1781
|
+
for (let i = 0, len = content.length; i < len; i++) {
|
|
1782
|
+
char = content[i];
|
|
1783
|
+
if (char === '\n') {
|
|
1784
|
+
if (wordWidth)
|
|
1785
|
+
addWord();
|
|
1786
|
+
row.paraEnd = true;
|
|
1787
|
+
addRow();
|
|
1788
|
+
paraStart = true;
|
|
1789
|
+
}
|
|
1790
|
+
else {
|
|
1791
|
+
charType = getCharType(char);
|
|
1792
|
+
if (charType === Letter && textCase !== 'none')
|
|
1793
|
+
char = getTextCase(char, textCase, !wordWidth);
|
|
1794
|
+
charWidth = canvas.measureText(char).width;
|
|
1795
|
+
if (__letterSpacing)
|
|
1796
|
+
charWidth += __letterSpacing;
|
|
1797
|
+
langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After);
|
|
1798
|
+
afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After));
|
|
1799
|
+
realWidth = paraStart && paraIndent ? width - paraIndent : width;
|
|
1800
|
+
if (width && rowWidth + wordWidth + charWidth > realWidth) {
|
|
1801
|
+
if (!afterBreak)
|
|
1802
|
+
afterBreak = charType === Letter && lastCharType == After;
|
|
1803
|
+
if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
|
|
1804
|
+
if (wordWidth)
|
|
1805
|
+
addWord();
|
|
1806
|
+
addRow();
|
|
1807
|
+
}
|
|
1808
|
+
else {
|
|
1809
|
+
addRow();
|
|
1810
|
+
}
|
|
1811
|
+
}
|
|
1812
|
+
if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
|
|
1813
|
+
else {
|
|
1814
|
+
if (charType === Break) {
|
|
1815
|
+
if (char === ' ' && wordWidth)
|
|
1816
|
+
addWord();
|
|
1817
|
+
addChar(char, charWidth);
|
|
1818
|
+
addWord();
|
|
1819
|
+
}
|
|
1820
|
+
else if (langBreak || afterBreak) {
|
|
1821
|
+
if (wordWidth)
|
|
1822
|
+
addWord();
|
|
1823
|
+
addChar(char, charWidth);
|
|
1824
|
+
}
|
|
1825
|
+
else {
|
|
1826
|
+
addChar(char, charWidth);
|
|
1827
|
+
}
|
|
1828
|
+
}
|
|
1829
|
+
lastCharType = charType;
|
|
1830
|
+
}
|
|
1831
|
+
}
|
|
1832
|
+
if (wordWidth)
|
|
1833
|
+
addWord();
|
|
1834
|
+
if (rowWidth)
|
|
1835
|
+
addRow();
|
|
1836
|
+
rows.length > 0 && (rows[rows.length - 1].paraEnd = true);
|
|
1837
|
+
}
|
|
1838
|
+
else {
|
|
1839
|
+
content.split('\n').forEach(content => {
|
|
1840
|
+
textDrawData.paraNumber++;
|
|
1841
|
+
rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true });
|
|
1842
|
+
});
|
|
1843
|
+
}
|
|
1844
|
+
}
|
|
1845
|
+
function addChar(char, width) {
|
|
1846
|
+
word.data.push({ char, width });
|
|
1847
|
+
wordWidth += width;
|
|
1848
|
+
}
|
|
1849
|
+
function addWord() {
|
|
1850
|
+
rowWidth += wordWidth;
|
|
1851
|
+
word.width = wordWidth;
|
|
1852
|
+
row.words.push(word);
|
|
1853
|
+
word = { data: [] };
|
|
1854
|
+
wordWidth = 0;
|
|
1855
|
+
}
|
|
1856
|
+
function addRow() {
|
|
1857
|
+
if (paraStart) {
|
|
1858
|
+
textDrawData.paraNumber++;
|
|
1859
|
+
row.paraStart = true;
|
|
1860
|
+
paraStart = false;
|
|
1861
|
+
}
|
|
1862
|
+
row.width = rowWidth;
|
|
1863
|
+
if (bounds.width)
|
|
1864
|
+
trimRight(row);
|
|
1865
|
+
rows.push(row);
|
|
1866
|
+
row = { words: [] };
|
|
1867
|
+
rowWidth = 0;
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
const CharMode = 0;
|
|
1871
|
+
const WordMode = 1;
|
|
1872
|
+
const RowMode = 2;
|
|
1873
|
+
function layoutChar(drawData, style, width, _height) {
|
|
1874
|
+
const { rows } = drawData;
|
|
1875
|
+
const { textAlign, paraIndent, letterSpacing } = style;
|
|
1876
|
+
let charX, addWordWidth, indentWidth, mode, wordChar;
|
|
1877
|
+
rows.forEach(row => {
|
|
1878
|
+
if (row.words) {
|
|
1879
|
+
indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
|
|
1880
|
+
addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
|
|
1881
|
+
mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : RowMode);
|
|
1882
|
+
if (mode === RowMode) {
|
|
1883
|
+
row.text = '';
|
|
1884
|
+
row.x += indentWidth;
|
|
1885
|
+
row.words.forEach(word => {
|
|
1886
|
+
word.data.forEach(char => {
|
|
1887
|
+
row.text += char.char;
|
|
1888
|
+
});
|
|
1889
|
+
});
|
|
1890
|
+
}
|
|
1891
|
+
else {
|
|
1892
|
+
row.x += indentWidth;
|
|
1893
|
+
charX = row.x;
|
|
1894
|
+
row.data = [];
|
|
1895
|
+
row.words.forEach(word => {
|
|
1896
|
+
if (mode === WordMode) {
|
|
1897
|
+
wordChar = { char: '', x: charX };
|
|
1898
|
+
charX = toWordChar(word.data, charX, wordChar);
|
|
1899
|
+
if (wordChar.char !== ' ')
|
|
1900
|
+
row.data.push(wordChar);
|
|
1901
|
+
}
|
|
1902
|
+
else {
|
|
1903
|
+
charX = toChar(word.data, charX, row.data);
|
|
1904
|
+
}
|
|
1905
|
+
if (!row.paraEnd && addWordWidth) {
|
|
1906
|
+
charX += addWordWidth;
|
|
1907
|
+
row.width += addWordWidth;
|
|
1908
|
+
}
|
|
1909
|
+
});
|
|
1910
|
+
}
|
|
1911
|
+
row.words = null;
|
|
1912
|
+
}
|
|
1913
|
+
});
|
|
1914
|
+
}
|
|
1915
|
+
function toWordChar(data, charX, wordChar) {
|
|
1916
|
+
data.forEach(char => {
|
|
1917
|
+
wordChar.char += char.char;
|
|
1918
|
+
charX += char.width;
|
|
1919
|
+
});
|
|
1920
|
+
return charX;
|
|
1921
|
+
}
|
|
1922
|
+
function toChar(data, charX, rowData) {
|
|
1923
|
+
data.forEach(char => {
|
|
1924
|
+
if (char.char !== ' ') {
|
|
1925
|
+
char.x = charX;
|
|
1926
|
+
rowData.push(char);
|
|
1927
|
+
}
|
|
1928
|
+
charX += char.width;
|
|
1929
|
+
});
|
|
1930
|
+
return charX;
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1933
|
+
function layoutText(drawData, style) {
|
|
1934
|
+
const { rows, bounds } = drawData;
|
|
1935
|
+
const { __lineHeight, __baseLine, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
|
|
1936
|
+
let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
|
|
1937
|
+
let starY = __baseLine;
|
|
1938
|
+
if (textOverflow !== 'show' && realHeight > height) {
|
|
1939
|
+
realHeight = Math.max(height, __lineHeight);
|
|
1940
|
+
drawData.overflow = rows.length;
|
|
1941
|
+
}
|
|
1942
|
+
else {
|
|
1943
|
+
switch (verticalAlign) {
|
|
1944
|
+
case 'middle':
|
|
1945
|
+
y += (height - realHeight) / 2;
|
|
1946
|
+
break;
|
|
1947
|
+
case 'bottom':
|
|
1948
|
+
y += (height - realHeight);
|
|
1949
|
+
}
|
|
1950
|
+
}
|
|
1951
|
+
starY += y;
|
|
1952
|
+
let row;
|
|
1953
|
+
for (let i = 0, len = rows.length; i < len; i++) {
|
|
1954
|
+
row = rows[i];
|
|
1955
|
+
row.x = x;
|
|
1956
|
+
switch (textAlign) {
|
|
1957
|
+
case 'center':
|
|
1958
|
+
row.x += (width - row.width) / 2;
|
|
1959
|
+
break;
|
|
1960
|
+
case 'right':
|
|
1961
|
+
row.x += width - row.width;
|
|
1962
|
+
}
|
|
1963
|
+
if (row.paraStart && paraSpacing && i > 0)
|
|
1964
|
+
starY += paraSpacing;
|
|
1965
|
+
row.y = starY;
|
|
1966
|
+
starY += __lineHeight;
|
|
1967
|
+
if (drawData.overflow > i && starY > realHeight) {
|
|
1968
|
+
row.isOverflow = true;
|
|
1969
|
+
drawData.overflow = i + 1;
|
|
1970
|
+
}
|
|
1971
|
+
if (row.width < 0) {
|
|
1972
|
+
const charWidth = row.words[0].data[0].width;
|
|
1973
|
+
const rowX = row.x + row.width;
|
|
1974
|
+
if (rowX < bounds.x)
|
|
1975
|
+
bounds.x = rowX - charWidth;
|
|
1976
|
+
if (-row.width > bounds.width)
|
|
1977
|
+
bounds.width = -row.width + style.fontSize + charWidth;
|
|
1978
|
+
}
|
|
1979
|
+
else {
|
|
1980
|
+
if (row.x < bounds.x)
|
|
1981
|
+
bounds.x = row.x;
|
|
1982
|
+
if (row.width > bounds.width)
|
|
1983
|
+
bounds.width = row.width;
|
|
1984
|
+
}
|
|
1985
|
+
}
|
|
1986
|
+
bounds.y = y;
|
|
1987
|
+
bounds.height = realHeight;
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
function clipText(drawData, textOverflow) {
|
|
1991
|
+
const { rows, overflow } = drawData;
|
|
1992
|
+
rows.splice(overflow);
|
|
1993
|
+
if (textOverflow !== 'hide') {
|
|
1994
|
+
if (textOverflow === 'ellipsis')
|
|
1995
|
+
textOverflow = '...';
|
|
1996
|
+
const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
|
|
1997
|
+
const row = rows[overflow - 1];
|
|
1998
|
+
let char, end = row.data.length - 1, charRight;
|
|
1999
|
+
const { x, width } = drawData.bounds;
|
|
2000
|
+
const right = x + width - ellipsisWidth;
|
|
2001
|
+
for (let i = end; i > -1; i--) {
|
|
2002
|
+
char = row.data[i];
|
|
2003
|
+
charRight = char.x + char.width;
|
|
2004
|
+
if (i === end && charRight < right) {
|
|
2005
|
+
break;
|
|
2006
|
+
}
|
|
2007
|
+
else if (charRight < right && char.char !== ' ') {
|
|
2008
|
+
row.data.splice(i + 1);
|
|
2009
|
+
row.width -= char.width;
|
|
2010
|
+
break;
|
|
2011
|
+
}
|
|
2012
|
+
row.width -= char.width;
|
|
2013
|
+
}
|
|
2014
|
+
row.width += ellipsisWidth;
|
|
2015
|
+
row.data.push({ char: textOverflow, x: charRight });
|
|
2016
|
+
}
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
function decorationText(drawData, style) {
|
|
2020
|
+
const { fontSize } = style;
|
|
2021
|
+
drawData.decorationHeight = fontSize / 11;
|
|
2022
|
+
switch (style.textDecoration) {
|
|
2023
|
+
case 'under':
|
|
2024
|
+
drawData.decorationY = fontSize * 0.15;
|
|
2025
|
+
break;
|
|
2026
|
+
case 'delete':
|
|
2027
|
+
drawData.decorationY = -fontSize * 0.35;
|
|
2028
|
+
}
|
|
2029
|
+
}
|
|
2030
|
+
|
|
2031
|
+
const TextConvert = {
|
|
2032
|
+
getDrawData(content, style) {
|
|
2033
|
+
if (typeof content !== 'string')
|
|
2034
|
+
content = String(content);
|
|
2035
|
+
let x = 0, y = 0;
|
|
2036
|
+
let { width, height, padding } = style;
|
|
2037
|
+
const { textDecoration, textOverflow, __font } = style;
|
|
2038
|
+
if (!width)
|
|
2039
|
+
width = 0;
|
|
2040
|
+
if (padding) {
|
|
2041
|
+
const [top, right, bottom, left] = MathHelper.fourNumber(padding);
|
|
2042
|
+
if (width) {
|
|
2043
|
+
x = left;
|
|
2044
|
+
width -= (right + left);
|
|
2045
|
+
}
|
|
2046
|
+
if (height) {
|
|
2047
|
+
y = top;
|
|
2048
|
+
height -= (top + bottom);
|
|
2049
|
+
}
|
|
2050
|
+
}
|
|
2051
|
+
const drawData = {
|
|
2052
|
+
bounds: { x, y, width, height },
|
|
2053
|
+
rows: [],
|
|
2054
|
+
paraNumber: 0,
|
|
2055
|
+
font: Platform.canvas.font = __font
|
|
2056
|
+
};
|
|
2057
|
+
createRows(drawData, content, style);
|
|
2058
|
+
layoutText(drawData, style);
|
|
2059
|
+
layoutChar(drawData, style, width);
|
|
2060
|
+
if (drawData.overflow)
|
|
2061
|
+
clipText(drawData, textOverflow);
|
|
2062
|
+
if (textDecoration !== 'none')
|
|
2063
|
+
decorationText(drawData, style);
|
|
2064
|
+
return drawData;
|
|
2065
|
+
}
|
|
2066
|
+
};
|
|
2067
|
+
|
|
2068
|
+
const ColorConvert = {
|
|
2069
|
+
string(color, opacity) {
|
|
2070
|
+
if (typeof color === 'string')
|
|
2071
|
+
return color;
|
|
2072
|
+
let a = color.a === undefined ? 1 : color.a;
|
|
2073
|
+
if (opacity)
|
|
2074
|
+
a *= opacity;
|
|
2075
|
+
const rgb = color.r + ',' + color.g + ',' + color.b;
|
|
2076
|
+
return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
|
|
2077
|
+
}
|
|
2078
|
+
};
|
|
2079
|
+
|
|
2080
|
+
const Export = {
|
|
2081
|
+
export(leaf, filename, options) {
|
|
2082
|
+
return addTask((success) => new Promise((resolve) => {
|
|
2083
|
+
const { leafer } = leaf;
|
|
2084
|
+
if (leafer) {
|
|
2085
|
+
leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
|
|
2086
|
+
let quality, blob;
|
|
2087
|
+
let { canvas } = leafer;
|
|
2088
|
+
let { unreal } = canvas;
|
|
2089
|
+
if (unreal) {
|
|
2090
|
+
canvas = canvas.getSameCanvas();
|
|
2091
|
+
canvas.backgroundColor = leafer.config.fill;
|
|
2092
|
+
leafer.__render(canvas, {});
|
|
2093
|
+
}
|
|
2094
|
+
switch (typeof options) {
|
|
2095
|
+
case 'object':
|
|
2096
|
+
if (options.quality)
|
|
2097
|
+
quality = options.quality;
|
|
2098
|
+
if (options.blob)
|
|
2099
|
+
blob = true;
|
|
2100
|
+
break;
|
|
2101
|
+
case 'number':
|
|
2102
|
+
quality = options;
|
|
2103
|
+
break;
|
|
2104
|
+
case 'boolean':
|
|
2105
|
+
blob = options;
|
|
2106
|
+
}
|
|
2107
|
+
let data;
|
|
2108
|
+
if (filename.includes('.')) {
|
|
2109
|
+
data = yield canvas.saveAs(filename, quality);
|
|
2110
|
+
}
|
|
2111
|
+
else if (blob) {
|
|
2112
|
+
data = yield canvas.toBlob(filename, quality);
|
|
2113
|
+
}
|
|
2114
|
+
else {
|
|
2115
|
+
data = yield canvas.toDataURL(filename, quality);
|
|
2116
|
+
}
|
|
2117
|
+
success({ data });
|
|
2118
|
+
resolve();
|
|
2119
|
+
if (unreal)
|
|
2120
|
+
canvas.recycle();
|
|
2121
|
+
}));
|
|
2122
|
+
}
|
|
2123
|
+
else {
|
|
2124
|
+
success({ data: false });
|
|
2125
|
+
resolve();
|
|
2126
|
+
}
|
|
2127
|
+
}));
|
|
2128
|
+
}
|
|
2129
|
+
};
|
|
2130
|
+
let tasker;
|
|
2131
|
+
function addTask(task) {
|
|
2132
|
+
if (!tasker)
|
|
2133
|
+
tasker = new TaskProcessor();
|
|
2134
|
+
return new Promise((resolve) => {
|
|
2135
|
+
tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
|
|
2136
|
+
});
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
Object.assign(Paint, UIPaint);
|
|
2140
|
+
Object.assign(Effect, UIEffect);
|
|
2141
|
+
Object.assign(TextConvert$1, TextConvert);
|
|
2142
|
+
Object.assign(ColorConvert$1, ColorConvert);
|
|
2143
|
+
Object.assign(Export$1, Export);
|
|
2144
|
+
|
|
2145
|
+
export { Layouter, LeaferCanvas, Renderer, Selector, Watcher, useCanvas };
|