@leafer-draw/worker 1.8.0 → 1.9.0
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/worker.cjs +1007 -948
- package/dist/worker.esm.js +992 -943
- package/dist/worker.esm.min.js +1 -1
- package/dist/worker.esm.min.js.map +1 -1
- package/dist/worker.js +4182 -4652
- package/dist/worker.min.cjs +1 -1
- package/dist/worker.min.cjs.map +1 -1
- package/dist/worker.min.js +1 -1
- package/dist/worker.min.js.map +1 -1
- package/dist/worker.module.js +4825 -4487
- package/dist/worker.module.min.js +1 -1
- package/dist/worker.module.min.js.map +1 -1
- package/package.json +9 -9
- package/src/core.ts +2 -2
package/dist/worker.cjs
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
|
-
var core = require(
|
|
4
|
-
|
|
3
|
+
var core = require("@leafer/core");
|
|
4
|
+
|
|
5
|
+
var draw = require("@leafer-ui/draw");
|
|
5
6
|
|
|
6
7
|
class LeaferCanvas extends core.LeaferCanvasBase {
|
|
7
|
-
get allowBackgroundColor() {
|
|
8
|
+
get allowBackgroundColor() {
|
|
9
|
+
return true;
|
|
10
|
+
}
|
|
8
11
|
init() {
|
|
9
12
|
this.__createView();
|
|
10
13
|
this.__createContext();
|
|
@@ -14,7 +17,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
|
|
|
14
17
|
this.view = core.Platform.origin.createCanvas(1, 1);
|
|
15
18
|
}
|
|
16
19
|
updateViewSize() {
|
|
17
|
-
const { width, height, pixelRatio } = this;
|
|
20
|
+
const {width: width, height: height, pixelRatio: pixelRatio} = this;
|
|
18
21
|
this.view.width = Math.ceil(width * pixelRatio);
|
|
19
22
|
this.view.height = Math.ceil(height * pixelRatio);
|
|
20
23
|
this.clientBounds = this.bounds;
|
|
@@ -22,35 +25,44 @@ class LeaferCanvas extends core.LeaferCanvasBase {
|
|
|
22
25
|
}
|
|
23
26
|
|
|
24
27
|
core.canvasPatch(OffscreenCanvasRenderingContext2D.prototype);
|
|
28
|
+
|
|
25
29
|
core.canvasPatch(Path2D.prototype);
|
|
26
30
|
|
|
27
|
-
const { mineType
|
|
31
|
+
const {mineType: mineType} = core.FileHelper;
|
|
32
|
+
|
|
28
33
|
Object.assign(core.Creator, {
|
|
29
34
|
canvas: (options, manager) => new LeaferCanvas(options, manager),
|
|
30
|
-
image:
|
|
35
|
+
image: options => new core.LeaferImage(options)
|
|
31
36
|
});
|
|
37
|
+
|
|
32
38
|
function useCanvas(_canvasType, _power) {
|
|
33
39
|
core.Platform.origin = {
|
|
34
40
|
createCanvas: (width, height) => new OffscreenCanvas(width, height),
|
|
35
|
-
canvasToDataURL: (canvas, type, quality) => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
canvasToDataURL: (canvas, type, quality) => new Promise((resolve, reject) => {
|
|
42
|
+
canvas.convertToBlob({
|
|
43
|
+
type: mineType(type),
|
|
44
|
+
quality: quality
|
|
45
|
+
}).then(blob => {
|
|
46
|
+
var reader = new FileReader;
|
|
47
|
+
reader.onload = e => resolve(e.target.result);
|
|
48
|
+
reader.onerror = e => reject(e);
|
|
49
|
+
reader.readAsDataURL(blob);
|
|
50
|
+
}).catch(e => {
|
|
51
|
+
reject(e);
|
|
45
52
|
});
|
|
53
|
+
}),
|
|
54
|
+
canvasToBolb: (canvas, type, quality) => canvas.convertToBlob({
|
|
55
|
+
type: mineType(type),
|
|
56
|
+
quality: quality
|
|
57
|
+
}),
|
|
58
|
+
canvasSaveAs: (_canvas, _filename, _quality) => new Promise(resolve => resolve()),
|
|
59
|
+
download(_url, _filename) {
|
|
60
|
+
return undefined;
|
|
46
61
|
},
|
|
47
|
-
canvasToBolb: (canvas, type, quality) => canvas.convertToBlob({ type: mineType(type), quality }),
|
|
48
|
-
canvasSaveAs: (_canvas, _filename, _quality) => new Promise((resolve) => resolve()),
|
|
49
|
-
download(_url, _filename) { return undefined; },
|
|
50
62
|
loadImage(src) {
|
|
51
63
|
return new Promise((resolve, reject) => {
|
|
52
|
-
let req = new XMLHttpRequest
|
|
53
|
-
req.open(
|
|
64
|
+
let req = new XMLHttpRequest;
|
|
65
|
+
req.open("GET", core.Platform.image.getRealURL(src), true);
|
|
54
66
|
req.responseType = "blob";
|
|
55
67
|
req.onload = () => {
|
|
56
68
|
createImageBitmap(req.response).then(img => {
|
|
@@ -59,7 +71,7 @@ function useCanvas(_canvasType, _power) {
|
|
|
59
71
|
reject(e);
|
|
60
72
|
});
|
|
61
73
|
};
|
|
62
|
-
req.onerror =
|
|
74
|
+
req.onerror = e => reject(e);
|
|
63
75
|
req.send();
|
|
64
76
|
});
|
|
65
77
|
}
|
|
@@ -67,55 +79,66 @@ function useCanvas(_canvasType, _power) {
|
|
|
67
79
|
core.Platform.canvas = core.Creator.canvas();
|
|
68
80
|
core.Platform.conicGradientSupport = !!core.Platform.canvas.context.createConicGradient;
|
|
69
81
|
}
|
|
70
|
-
|
|
82
|
+
|
|
83
|
+
core.Platform.name = "web";
|
|
84
|
+
|
|
71
85
|
core.Platform.isWorker = true;
|
|
86
|
+
|
|
72
87
|
core.Platform.backgrounder = true;
|
|
73
|
-
|
|
74
|
-
core.
|
|
75
|
-
|
|
88
|
+
|
|
89
|
+
core.Platform.requestRender = function(render) {
|
|
90
|
+
requestAnimationFrame(render);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
core.defineKey(core.Platform, "devicePixelRatio", {
|
|
94
|
+
get() {
|
|
95
|
+
return 1;
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
const {userAgent: userAgent} = navigator;
|
|
100
|
+
|
|
76
101
|
if (userAgent.indexOf("Firefox") > -1) {
|
|
77
102
|
core.Platform.conicGradientRotate90 = true;
|
|
78
103
|
core.Platform.intWheelDeltaY = true;
|
|
79
|
-
}
|
|
80
|
-
else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
|
|
104
|
+
} else if (/iPhone|iPad|iPod/.test(navigator.userAgent) || /Macintosh/.test(navigator.userAgent) && /Version\/[\d.]+.*Safari/.test(navigator.userAgent)) {
|
|
81
105
|
core.Platform.fullImageShadow = true;
|
|
82
106
|
}
|
|
83
|
-
|
|
84
|
-
|
|
107
|
+
|
|
108
|
+
if (userAgent.indexOf("Windows") > -1) {
|
|
109
|
+
core.Platform.os = "Windows";
|
|
85
110
|
core.Platform.intWheelDeltaY = true;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
else if (userAgent.indexOf('Linux') > -1) {
|
|
91
|
-
core.Platform.os = 'Linux';
|
|
111
|
+
} else if (userAgent.indexOf("Mac") > -1) {
|
|
112
|
+
core.Platform.os = "Mac";
|
|
113
|
+
} else if (userAgent.indexOf("Linux") > -1) {
|
|
114
|
+
core.Platform.os = "Linux";
|
|
92
115
|
}
|
|
93
116
|
|
|
94
117
|
class Watcher {
|
|
95
|
-
get childrenChanged() {
|
|
118
|
+
get childrenChanged() {
|
|
119
|
+
return this.hasAdd || this.hasRemove || this.hasVisible;
|
|
120
|
+
}
|
|
96
121
|
get updatedList() {
|
|
97
122
|
if (this.hasRemove) {
|
|
98
|
-
const updatedList = new core.LeafList
|
|
99
|
-
this.__updatedList.list.forEach(item => {
|
|
100
|
-
updatedList.add(item);
|
|
123
|
+
const updatedList = new core.LeafList;
|
|
124
|
+
this.__updatedList.list.forEach(item => {
|
|
125
|
+
if (item.leafer) updatedList.add(item);
|
|
126
|
+
});
|
|
101
127
|
return updatedList;
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
128
|
+
} else {
|
|
104
129
|
return this.__updatedList;
|
|
105
130
|
}
|
|
106
131
|
}
|
|
107
132
|
constructor(target, userConfig) {
|
|
108
133
|
this.totalTimes = 0;
|
|
109
134
|
this.config = {};
|
|
110
|
-
this.__updatedList = new core.LeafList
|
|
135
|
+
this.__updatedList = new core.LeafList;
|
|
111
136
|
this.target = target;
|
|
112
|
-
if (userConfig)
|
|
113
|
-
this.config = core.DataHelper.default(userConfig, this.config);
|
|
137
|
+
if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
|
|
114
138
|
this.__listenEvents();
|
|
115
139
|
}
|
|
116
140
|
start() {
|
|
117
|
-
if (this.disabled)
|
|
118
|
-
return;
|
|
141
|
+
if (this.disabled) return;
|
|
119
142
|
this.running = true;
|
|
120
143
|
}
|
|
121
144
|
stop() {
|
|
@@ -128,8 +151,7 @@ class Watcher {
|
|
|
128
151
|
}
|
|
129
152
|
update() {
|
|
130
153
|
this.changed = true;
|
|
131
|
-
if (this.running)
|
|
132
|
-
this.target.emit(core.RenderEvent.REQUEST);
|
|
154
|
+
if (this.running) this.target.emit(core.RenderEvent.REQUEST);
|
|
133
155
|
}
|
|
134
156
|
__onAttrChange(event) {
|
|
135
157
|
this.__updatedList.add(event.target);
|
|
@@ -139,8 +161,7 @@ class Watcher {
|
|
|
139
161
|
if (event.type === core.ChildEvent.ADD) {
|
|
140
162
|
this.hasAdd = true;
|
|
141
163
|
this.__pushChild(event.child);
|
|
142
|
-
}
|
|
143
|
-
else {
|
|
164
|
+
} else {
|
|
144
165
|
this.hasRemove = true;
|
|
145
166
|
this.__updatedList.add(event.parent);
|
|
146
167
|
}
|
|
@@ -148,28 +169,22 @@ class Watcher {
|
|
|
148
169
|
}
|
|
149
170
|
__pushChild(child) {
|
|
150
171
|
this.__updatedList.add(child);
|
|
151
|
-
if (child.isBranch)
|
|
152
|
-
this.__loopChildren(child);
|
|
172
|
+
if (child.isBranch) this.__loopChildren(child);
|
|
153
173
|
}
|
|
154
174
|
__loopChildren(parent) {
|
|
155
|
-
const { children
|
|
156
|
-
for (let i = 0, len = children.length; i < len; i++)
|
|
157
|
-
this.__pushChild(children[i]);
|
|
175
|
+
const {children: children} = parent;
|
|
176
|
+
for (let i = 0, len = children.length; i < len; i++) this.__pushChild(children[i]);
|
|
158
177
|
}
|
|
159
178
|
__onRquestData() {
|
|
160
|
-
this.target.emitEvent(new core.WatchEvent(core.WatchEvent.DATA, {
|
|
161
|
-
|
|
179
|
+
this.target.emitEvent(new core.WatchEvent(core.WatchEvent.DATA, {
|
|
180
|
+
updatedList: this.updatedList
|
|
181
|
+
}));
|
|
182
|
+
this.__updatedList = new core.LeafList;
|
|
162
183
|
this.totalTimes++;
|
|
163
184
|
this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false;
|
|
164
185
|
}
|
|
165
186
|
__listenEvents() {
|
|
166
|
-
this.__eventIds = [
|
|
167
|
-
this.target.on_([
|
|
168
|
-
[core.PropertyEvent.CHANGE, this.__onAttrChange, this],
|
|
169
|
-
[[core.ChildEvent.ADD, core.ChildEvent.REMOVE], this.__onChildEvent, this],
|
|
170
|
-
[core.WatchEvent.REQUEST, this.__onRquestData, this]
|
|
171
|
-
])
|
|
172
|
-
];
|
|
187
|
+
this.__eventIds = [ this.target.on_([ [ core.PropertyEvent.CHANGE, this.__onAttrChange, this ], [ [ core.ChildEvent.ADD, core.ChildEvent.REMOVE ], this.__onChildEvent, this ], [ core.WatchEvent.REQUEST, this.__onRquestData, this ] ]) ];
|
|
173
188
|
}
|
|
174
189
|
__removeListenEvents() {
|
|
175
190
|
this.target.off_(this.__eventIds);
|
|
@@ -183,8 +198,10 @@ class Watcher {
|
|
|
183
198
|
}
|
|
184
199
|
}
|
|
185
200
|
|
|
186
|
-
const {
|
|
187
|
-
|
|
201
|
+
const {updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange} = core.LeafHelper;
|
|
202
|
+
|
|
203
|
+
const {pushAllChildBranch: pushAllChildBranch, pushAllParent: pushAllParent} = core.BranchHelper;
|
|
204
|
+
|
|
188
205
|
function updateMatrix(updateList, levelList) {
|
|
189
206
|
let layout;
|
|
190
207
|
updateList.list.forEach(leaf => {
|
|
@@ -193,19 +210,17 @@ function updateMatrix(updateList, levelList) {
|
|
|
193
210
|
if (layout.matrixChanged) {
|
|
194
211
|
updateAllMatrix$1(leaf, true);
|
|
195
212
|
levelList.add(leaf);
|
|
196
|
-
if (leaf.isBranch)
|
|
197
|
-
pushAllChildBranch(leaf, levelList);
|
|
213
|
+
if (leaf.isBranch) pushAllChildBranch(leaf, levelList);
|
|
198
214
|
pushAllParent(leaf, levelList);
|
|
199
|
-
}
|
|
200
|
-
else if (layout.boundsChanged) {
|
|
215
|
+
} else if (layout.boundsChanged) {
|
|
201
216
|
levelList.add(leaf);
|
|
202
|
-
if (leaf.isBranch)
|
|
203
|
-
leaf.__tempNumber = 0;
|
|
217
|
+
if (leaf.isBranch) leaf.__tempNumber = 0;
|
|
204
218
|
pushAllParent(leaf, levelList);
|
|
205
219
|
}
|
|
206
220
|
}
|
|
207
221
|
});
|
|
208
222
|
}
|
|
223
|
+
|
|
209
224
|
function updateBounds(boundsList) {
|
|
210
225
|
let list, branch, children;
|
|
211
226
|
boundsList.sort(true);
|
|
@@ -225,18 +240,19 @@ function updateBounds(boundsList) {
|
|
|
225
240
|
}
|
|
226
241
|
});
|
|
227
242
|
}
|
|
243
|
+
|
|
228
244
|
function updateChange(updateList) {
|
|
229
245
|
updateList.list.forEach(updateOneChange);
|
|
230
246
|
}
|
|
231
247
|
|
|
232
|
-
const { worldBounds
|
|
248
|
+
const {worldBounds: worldBounds} = core.LeafBoundsHelper;
|
|
249
|
+
|
|
233
250
|
class LayoutBlockData {
|
|
234
251
|
constructor(list) {
|
|
235
|
-
this.updatedBounds = new core.Bounds
|
|
236
|
-
this.beforeBounds = new core.Bounds
|
|
237
|
-
this.afterBounds = new core.Bounds
|
|
238
|
-
if (list
|
|
239
|
-
list = new core.LeafList(list);
|
|
252
|
+
this.updatedBounds = new core.Bounds;
|
|
253
|
+
this.beforeBounds = new core.Bounds;
|
|
254
|
+
this.afterBounds = new core.Bounds;
|
|
255
|
+
if (core.isArray(list)) list = new core.LeafList(list);
|
|
240
256
|
this.updatedList = list;
|
|
241
257
|
}
|
|
242
258
|
setBefore() {
|
|
@@ -244,7 +260,7 @@ class LayoutBlockData {
|
|
|
244
260
|
}
|
|
245
261
|
setAfter() {
|
|
246
262
|
this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
247
|
-
this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
|
|
263
|
+
this.updatedBounds.setList([ this.beforeBounds, this.afterBounds ]);
|
|
248
264
|
}
|
|
249
265
|
merge(data) {
|
|
250
266
|
this.updatedList.addList(data.updatedList.list);
|
|
@@ -257,21 +273,21 @@ class LayoutBlockData {
|
|
|
257
273
|
}
|
|
258
274
|
}
|
|
259
275
|
|
|
260
|
-
const { updateAllMatrix, updateAllChange } = core.LeafHelper;
|
|
261
|
-
|
|
276
|
+
const {updateAllMatrix: updateAllMatrix, updateAllChange: updateAllChange} = core.LeafHelper;
|
|
277
|
+
|
|
278
|
+
const debug$1 = core.Debug.get("Layouter");
|
|
279
|
+
|
|
262
280
|
class Layouter {
|
|
263
281
|
constructor(target, userConfig) {
|
|
264
282
|
this.totalTimes = 0;
|
|
265
283
|
this.config = {};
|
|
266
|
-
this.__levelList = new core.LeafLevelList
|
|
284
|
+
this.__levelList = new core.LeafLevelList;
|
|
267
285
|
this.target = target;
|
|
268
|
-
if (userConfig)
|
|
269
|
-
this.config = core.DataHelper.default(userConfig, this.config);
|
|
286
|
+
if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
|
|
270
287
|
this.__listenEvents();
|
|
271
288
|
}
|
|
272
289
|
start() {
|
|
273
|
-
if (this.disabled)
|
|
274
|
-
return;
|
|
290
|
+
if (this.disabled) return;
|
|
275
291
|
this.running = true;
|
|
276
292
|
}
|
|
277
293
|
stop() {
|
|
@@ -283,16 +299,14 @@ class Layouter {
|
|
|
283
299
|
this.disabled = true;
|
|
284
300
|
}
|
|
285
301
|
layout() {
|
|
286
|
-
if (this.layouting || !this.running)
|
|
287
|
-
|
|
288
|
-
const { target } = this;
|
|
302
|
+
if (this.layouting || !this.running) return;
|
|
303
|
+
const {target: target} = this;
|
|
289
304
|
this.times = 0;
|
|
290
305
|
try {
|
|
291
306
|
target.emit(core.LayoutEvent.START);
|
|
292
307
|
this.layoutOnce();
|
|
293
308
|
target.emitEvent(new core.LayoutEvent(core.LayoutEvent.END, this.layoutedBlocks, this.times));
|
|
294
|
-
}
|
|
295
|
-
catch (e) {
|
|
309
|
+
} catch (e) {
|
|
296
310
|
debug$1.error(e);
|
|
297
311
|
}
|
|
298
312
|
this.layoutedBlocks = null;
|
|
@@ -300,24 +314,20 @@ class Layouter {
|
|
|
300
314
|
layoutAgain() {
|
|
301
315
|
if (this.layouting) {
|
|
302
316
|
this.waitAgain = true;
|
|
303
|
-
}
|
|
304
|
-
else {
|
|
317
|
+
} else {
|
|
305
318
|
this.layoutOnce();
|
|
306
319
|
}
|
|
307
320
|
}
|
|
308
321
|
layoutOnce() {
|
|
309
|
-
if (this.layouting)
|
|
310
|
-
|
|
311
|
-
if (this.times > 3)
|
|
312
|
-
return debug$1.warn('layout max times');
|
|
322
|
+
if (this.layouting) return debug$1.warn("layouting");
|
|
323
|
+
if (this.times > 3) return debug$1.warn("layout max times");
|
|
313
324
|
this.times++;
|
|
314
325
|
this.totalTimes++;
|
|
315
326
|
this.layouting = true;
|
|
316
327
|
this.target.emit(core.WatchEvent.REQUEST);
|
|
317
328
|
if (this.totalTimes > 1) {
|
|
318
329
|
this.partLayout();
|
|
319
|
-
}
|
|
320
|
-
else {
|
|
330
|
+
} else {
|
|
321
331
|
this.fullLayout();
|
|
322
332
|
}
|
|
323
333
|
this.layouting = false;
|
|
@@ -328,11 +338,10 @@ class Layouter {
|
|
|
328
338
|
}
|
|
329
339
|
partLayout() {
|
|
330
340
|
var _a;
|
|
331
|
-
if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
|
|
332
|
-
|
|
333
|
-
const
|
|
334
|
-
const {
|
|
335
|
-
const { BEFORE, LAYOUT, AFTER } = core.LayoutEvent;
|
|
341
|
+
if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length)) return;
|
|
342
|
+
const t = core.Run.start("PartLayout");
|
|
343
|
+
const {target: target, __updatedList: updateList} = this;
|
|
344
|
+
const {BEFORE: BEFORE, LAYOUT: LAYOUT, AFTER: AFTER} = core.LayoutEvent;
|
|
336
345
|
const blocks = this.getBlocks(updateList);
|
|
337
346
|
blocks.forEach(item => item.setBefore());
|
|
338
347
|
target.emitEvent(new core.LayoutEvent(BEFORE, blocks, this.times));
|
|
@@ -341,8 +350,7 @@ class Layouter {
|
|
|
341
350
|
updateMatrix(updateList, this.__levelList);
|
|
342
351
|
updateBounds(this.__levelList);
|
|
343
352
|
updateChange(updateList);
|
|
344
|
-
if (this.extraBlock)
|
|
345
|
-
blocks.push(this.extraBlock);
|
|
353
|
+
if (this.extraBlock) blocks.push(this.extraBlock);
|
|
346
354
|
blocks.forEach(item => item.setAfter());
|
|
347
355
|
target.emitEvent(new core.LayoutEvent(LAYOUT, blocks, this.times));
|
|
348
356
|
target.emitEvent(new core.LayoutEvent(AFTER, blocks, this.times));
|
|
@@ -352,13 +360,15 @@ class Layouter {
|
|
|
352
360
|
core.Run.end(t);
|
|
353
361
|
}
|
|
354
362
|
fullLayout() {
|
|
355
|
-
const t = core.Run.start(
|
|
356
|
-
const { target
|
|
357
|
-
const { BEFORE, LAYOUT, AFTER } = core.LayoutEvent;
|
|
363
|
+
const t = core.Run.start("FullLayout");
|
|
364
|
+
const {target: target} = this;
|
|
365
|
+
const {BEFORE: BEFORE, LAYOUT: LAYOUT, AFTER: AFTER} = core.LayoutEvent;
|
|
358
366
|
const blocks = this.getBlocks(new core.LeafList(target));
|
|
359
367
|
target.emitEvent(new core.LayoutEvent(BEFORE, blocks, this.times));
|
|
360
368
|
Layouter.fullLayout(target);
|
|
361
|
-
blocks.forEach(item => {
|
|
369
|
+
blocks.forEach(item => {
|
|
370
|
+
item.setAfter();
|
|
371
|
+
});
|
|
362
372
|
target.emitEvent(new core.LayoutEvent(LAYOUT, blocks, this.times));
|
|
363
373
|
target.emitEvent(new core.LayoutEvent(AFTER, blocks, this.times));
|
|
364
374
|
this.addBlocks(blocks);
|
|
@@ -366,15 +376,12 @@ class Layouter {
|
|
|
366
376
|
}
|
|
367
377
|
static fullLayout(target) {
|
|
368
378
|
updateAllMatrix(target, true);
|
|
369
|
-
if (target.isBranch)
|
|
370
|
-
core.BranchHelper.updateBounds(target);
|
|
371
|
-
else
|
|
372
|
-
core.LeafHelper.updateBounds(target);
|
|
379
|
+
if (target.isBranch) core.BranchHelper.updateBounds(target); else core.LeafHelper.updateBounds(target);
|
|
373
380
|
updateAllChange(target);
|
|
374
381
|
}
|
|
375
382
|
addExtra(leaf) {
|
|
376
383
|
if (!this.__updatedList.has(leaf)) {
|
|
377
|
-
const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
|
|
384
|
+
const {updatedList: updatedList, beforeBounds: beforeBounds} = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
|
|
378
385
|
updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world);
|
|
379
386
|
updatedList.add(leaf);
|
|
380
387
|
}
|
|
@@ -383,7 +390,7 @@ class Layouter {
|
|
|
383
390
|
return new LayoutBlockData(data);
|
|
384
391
|
}
|
|
385
392
|
getBlocks(list) {
|
|
386
|
-
return [this.createBlock(list)];
|
|
393
|
+
return [ this.createBlock(list) ];
|
|
387
394
|
}
|
|
388
395
|
addBlocks(current) {
|
|
389
396
|
this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current;
|
|
@@ -392,13 +399,7 @@ class Layouter {
|
|
|
392
399
|
this.__updatedList = event.data.updatedList;
|
|
393
400
|
}
|
|
394
401
|
__listenEvents() {
|
|
395
|
-
this.__eventIds = [
|
|
396
|
-
this.target.on_([
|
|
397
|
-
[core.LayoutEvent.REQUEST, this.layout, this],
|
|
398
|
-
[core.LayoutEvent.AGAIN, this.layoutAgain, this],
|
|
399
|
-
[core.WatchEvent.DATA, this.__onReceiveWatchData, this]
|
|
400
|
-
])
|
|
401
|
-
];
|
|
402
|
+
this.__eventIds = [ this.target.on_([ [ core.LayoutEvent.REQUEST, this.layout, this ], [ core.LayoutEvent.AGAIN, this.layoutAgain, this ], [ core.WatchEvent.DATA, this.__onReceiveWatchData, this ] ]) ];
|
|
402
403
|
}
|
|
403
404
|
__removeListenEvents() {
|
|
404
405
|
this.target.off_(this.__eventIds);
|
|
@@ -412,9 +413,12 @@ class Layouter {
|
|
|
412
413
|
}
|
|
413
414
|
}
|
|
414
415
|
|
|
415
|
-
const debug = core.Debug.get(
|
|
416
|
+
const debug = core.Debug.get("Renderer");
|
|
417
|
+
|
|
416
418
|
class Renderer {
|
|
417
|
-
get needFill() {
|
|
419
|
+
get needFill() {
|
|
420
|
+
return !!(!this.canvas.allowBackgroundColor && this.config.fill);
|
|
421
|
+
}
|
|
418
422
|
constructor(target, canvas, userConfig) {
|
|
419
423
|
this.FPS = 60;
|
|
420
424
|
this.totalTimes = 0;
|
|
@@ -425,8 +429,7 @@ class Renderer {
|
|
|
425
429
|
};
|
|
426
430
|
this.target = target;
|
|
427
431
|
this.canvas = canvas;
|
|
428
|
-
if (userConfig)
|
|
429
|
-
this.config = core.DataHelper.default(userConfig, this.config);
|
|
432
|
+
if (userConfig) this.config = core.DataHelper.default(userConfig, this.config);
|
|
430
433
|
this.__listenEvents();
|
|
431
434
|
}
|
|
432
435
|
start() {
|
|
@@ -437,8 +440,7 @@ class Renderer {
|
|
|
437
440
|
this.running = false;
|
|
438
441
|
}
|
|
439
442
|
update(change = true) {
|
|
440
|
-
if (!this.changed)
|
|
441
|
-
this.changed = change;
|
|
443
|
+
if (!this.changed) this.changed = change;
|
|
442
444
|
this.__requestRender();
|
|
443
445
|
}
|
|
444
446
|
requestLayout() {
|
|
@@ -446,7 +448,7 @@ class Renderer {
|
|
|
446
448
|
}
|
|
447
449
|
checkRender() {
|
|
448
450
|
if (this.running) {
|
|
449
|
-
const { target
|
|
451
|
+
const {target: target} = this;
|
|
450
452
|
if (target.isApp) {
|
|
451
453
|
target.emit(core.RenderEvent.CHILD_START, target);
|
|
452
454
|
target.children.forEach(leafer => {
|
|
@@ -455,54 +457,47 @@ class Renderer {
|
|
|
455
457
|
});
|
|
456
458
|
target.emit(core.RenderEvent.CHILD_END, target);
|
|
457
459
|
}
|
|
458
|
-
if (this.changed && this.canvas.view)
|
|
459
|
-
this.render();
|
|
460
|
+
if (this.changed && this.canvas.view) this.render();
|
|
460
461
|
this.target.emit(core.RenderEvent.NEXT);
|
|
461
462
|
}
|
|
462
463
|
}
|
|
463
464
|
render(callback) {
|
|
464
|
-
if (!(this.running && this.canvas.view))
|
|
465
|
-
|
|
466
|
-
const { target } = this;
|
|
465
|
+
if (!(this.running && this.canvas.view)) return this.update();
|
|
466
|
+
const {target: target} = this;
|
|
467
467
|
this.times = 0;
|
|
468
|
-
this.totalBounds = new core.Bounds
|
|
469
|
-
debug.log(target.innerName,
|
|
468
|
+
this.totalBounds = new core.Bounds;
|
|
469
|
+
debug.log(target.innerName, "---\x3e");
|
|
470
470
|
try {
|
|
471
471
|
this.emitRender(core.RenderEvent.START);
|
|
472
472
|
this.renderOnce(callback);
|
|
473
473
|
this.emitRender(core.RenderEvent.END, this.totalBounds);
|
|
474
474
|
core.ImageManager.clearRecycled();
|
|
475
|
-
}
|
|
476
|
-
catch (e) {
|
|
475
|
+
} catch (e) {
|
|
477
476
|
this.rendering = false;
|
|
478
477
|
debug.error(e);
|
|
479
478
|
}
|
|
480
|
-
debug.log(
|
|
479
|
+
debug.log("-------------|");
|
|
481
480
|
}
|
|
482
481
|
renderAgain() {
|
|
483
482
|
if (this.rendering) {
|
|
484
483
|
this.waitAgain = true;
|
|
485
|
-
}
|
|
486
|
-
else {
|
|
484
|
+
} else {
|
|
487
485
|
this.renderOnce();
|
|
488
486
|
}
|
|
489
487
|
}
|
|
490
488
|
renderOnce(callback) {
|
|
491
|
-
if (this.rendering)
|
|
492
|
-
|
|
493
|
-
if (this.times > 3)
|
|
494
|
-
return debug.warn('render max times');
|
|
489
|
+
if (this.rendering) return debug.warn("rendering");
|
|
490
|
+
if (this.times > 3) return debug.warn("render max times");
|
|
495
491
|
this.times++;
|
|
496
492
|
this.totalTimes++;
|
|
497
493
|
this.rendering = true;
|
|
498
494
|
this.changed = false;
|
|
499
|
-
this.renderBounds = new core.Bounds
|
|
495
|
+
this.renderBounds = new core.Bounds;
|
|
500
496
|
this.renderOptions = {};
|
|
501
497
|
if (callback) {
|
|
502
498
|
this.emitRender(core.RenderEvent.BEFORE);
|
|
503
499
|
callback();
|
|
504
|
-
}
|
|
505
|
-
else {
|
|
500
|
+
} else {
|
|
506
501
|
this.requestLayout();
|
|
507
502
|
if (this.ignore) {
|
|
508
503
|
this.ignore = this.rendering = false;
|
|
@@ -511,8 +506,7 @@ class Renderer {
|
|
|
511
506
|
this.emitRender(core.RenderEvent.BEFORE);
|
|
512
507
|
if (this.config.usePartRender && this.totalTimes > 1) {
|
|
513
508
|
this.partRender();
|
|
514
|
-
}
|
|
515
|
-
else {
|
|
509
|
+
} else {
|
|
516
510
|
this.fullRender();
|
|
517
511
|
}
|
|
518
512
|
}
|
|
@@ -526,16 +520,16 @@ class Renderer {
|
|
|
526
520
|
}
|
|
527
521
|
}
|
|
528
522
|
partRender() {
|
|
529
|
-
const { canvas, updateBlocks: list
|
|
530
|
-
if (!list)
|
|
531
|
-
return;
|
|
523
|
+
const {canvas: canvas, updateBlocks: list} = this;
|
|
524
|
+
if (!list) return;
|
|
532
525
|
this.mergeBlocks();
|
|
533
|
-
list.forEach(block => {
|
|
534
|
-
this.clipRender(block);
|
|
526
|
+
list.forEach(block => {
|
|
527
|
+
if (canvas.bounds.hit(block) && !block.isEmpty()) this.clipRender(block);
|
|
528
|
+
});
|
|
535
529
|
}
|
|
536
530
|
clipRender(block) {
|
|
537
|
-
const t = core.Run.start(
|
|
538
|
-
const { canvas
|
|
531
|
+
const t = core.Run.start("PartRender");
|
|
532
|
+
const {canvas: canvas} = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
|
|
539
533
|
canvas.save();
|
|
540
534
|
bounds.spread(Renderer.clipSpread).ceil();
|
|
541
535
|
canvas.clearWorld(bounds, true);
|
|
@@ -545,8 +539,8 @@ class Renderer {
|
|
|
545
539
|
core.Run.end(t);
|
|
546
540
|
}
|
|
547
541
|
fullRender() {
|
|
548
|
-
const t = core.Run.start(
|
|
549
|
-
const { canvas
|
|
542
|
+
const t = core.Run.start("FullRender");
|
|
543
|
+
const {canvas: canvas} = this;
|
|
550
544
|
canvas.save();
|
|
551
545
|
canvas.clear();
|
|
552
546
|
this.__render(canvas.bounds);
|
|
@@ -554,11 +548,14 @@ class Renderer {
|
|
|
554
548
|
core.Run.end(t);
|
|
555
549
|
}
|
|
556
550
|
__render(bounds, realBounds) {
|
|
557
|
-
const { canvas
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
551
|
+
const {canvas: canvas} = this, includes = bounds.includes(this.target.__world), options = includes ? {
|
|
552
|
+
includes: includes
|
|
553
|
+
} : {
|
|
554
|
+
bounds: bounds,
|
|
555
|
+
includes: includes
|
|
556
|
+
};
|
|
557
|
+
if (this.needFill) canvas.fillWorld(bounds, this.config.fill);
|
|
558
|
+
if (core.Debug.showRepaint) core.Debug.drawRepaint(canvas, bounds);
|
|
562
559
|
this.target.__render(canvas, options);
|
|
563
560
|
this.renderBounds = realBounds = realBounds || bounds;
|
|
564
561
|
this.renderOptions = options;
|
|
@@ -566,14 +563,13 @@ class Renderer {
|
|
|
566
563
|
canvas.updateRender(realBounds);
|
|
567
564
|
}
|
|
568
565
|
addBlock(block) {
|
|
569
|
-
if (!this.updateBlocks)
|
|
570
|
-
this.updateBlocks = [];
|
|
566
|
+
if (!this.updateBlocks) this.updateBlocks = [];
|
|
571
567
|
this.updateBlocks.push(block);
|
|
572
568
|
}
|
|
573
569
|
mergeBlocks() {
|
|
574
|
-
const {
|
|
570
|
+
const {updateBlocks: list} = this;
|
|
575
571
|
if (list) {
|
|
576
|
-
const bounds = new core.Bounds
|
|
572
|
+
const bounds = new core.Bounds;
|
|
577
573
|
bounds.setList(list);
|
|
578
574
|
list.length = 0;
|
|
579
575
|
list.push(bounds);
|
|
@@ -581,26 +577,23 @@ class Renderer {
|
|
|
581
577
|
}
|
|
582
578
|
__requestRender() {
|
|
583
579
|
const target = this.target;
|
|
584
|
-
if (this.requestTime || !target)
|
|
585
|
-
|
|
586
|
-
if (target.parentApp)
|
|
587
|
-
return target.parentApp.requestRender(false);
|
|
580
|
+
if (this.requestTime || !target) return;
|
|
581
|
+
if (target.parentApp) return target.parentApp.requestRender(false);
|
|
588
582
|
const requestTime = this.requestTime = Date.now();
|
|
589
583
|
core.Platform.requestRender(() => {
|
|
590
|
-
this.FPS = Math.min(60, Math.ceil(
|
|
584
|
+
this.FPS = Math.min(60, Math.ceil(1e3 / (Date.now() - requestTime)));
|
|
591
585
|
this.requestTime = 0;
|
|
592
586
|
this.checkRender();
|
|
593
587
|
});
|
|
594
588
|
}
|
|
595
589
|
__onResize(e) {
|
|
596
|
-
if (this.canvas.unreal)
|
|
597
|
-
return;
|
|
590
|
+
if (this.canvas.unreal) return;
|
|
598
591
|
if (e.bigger || !e.samePixelRatio) {
|
|
599
|
-
const { width, height } = e.old;
|
|
592
|
+
const {width: width, height: height} = e.old;
|
|
600
593
|
const bounds = new core.Bounds(0, 0, width, height);
|
|
601
594
|
if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
|
|
602
595
|
this.addBlock(this.canvas.bounds);
|
|
603
|
-
this.target.forceUpdate(
|
|
596
|
+
this.target.forceUpdate("surface");
|
|
604
597
|
return;
|
|
605
598
|
}
|
|
606
599
|
}
|
|
@@ -608,34 +601,24 @@ class Renderer {
|
|
|
608
601
|
this.update();
|
|
609
602
|
}
|
|
610
603
|
__onLayoutEnd(event) {
|
|
611
|
-
if (event.data)
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
empty = (!leaf.isBranch || leaf.isBranchLeaf);
|
|
621
|
-
}
|
|
622
|
-
return empty;
|
|
623
|
-
});
|
|
624
|
-
this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
|
|
604
|
+
if (event.data) event.data.map(item => {
|
|
605
|
+
let empty;
|
|
606
|
+
if (item.updatedList) item.updatedList.list.some(leaf => {
|
|
607
|
+
empty = !leaf.__world.width || !leaf.__world.height;
|
|
608
|
+
if (empty) {
|
|
609
|
+
if (!leaf.isLeafer) debug.tip(leaf.innerName, ": empty");
|
|
610
|
+
empty = !leaf.isBranch || leaf.isBranchLeaf;
|
|
611
|
+
}
|
|
612
|
+
return empty;
|
|
625
613
|
});
|
|
614
|
+
this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
|
|
615
|
+
});
|
|
626
616
|
}
|
|
627
617
|
emitRender(type, bounds, options) {
|
|
628
618
|
this.target.emitEvent(new core.RenderEvent(type, this.times, bounds, options));
|
|
629
619
|
}
|
|
630
620
|
__listenEvents() {
|
|
631
|
-
this.__eventIds = [
|
|
632
|
-
this.target.on_([
|
|
633
|
-
[core.RenderEvent.REQUEST, this.update, this],
|
|
634
|
-
[core.LayoutEvent.END, this.__onLayoutEnd, this],
|
|
635
|
-
[core.RenderEvent.AGAIN, this.renderAgain, this],
|
|
636
|
-
[core.ResizeEvent.RESIZE, this.__onResize, this]
|
|
637
|
-
])
|
|
638
|
-
];
|
|
621
|
+
this.__eventIds = [ this.target.on_([ [ core.RenderEvent.REQUEST, this.update, this ], [ core.LayoutEvent.END, this.__onLayoutEnd, this ], [ core.RenderEvent.AGAIN, this.renderAgain, this ], [ core.ResizeEvent.RESIZE, this.__onResize, this ] ]) ];
|
|
639
622
|
}
|
|
640
623
|
__removeListenEvents() {
|
|
641
624
|
this.target.off_(this.__eventIds);
|
|
@@ -648,6 +631,7 @@ class Renderer {
|
|
|
648
631
|
}
|
|
649
632
|
}
|
|
650
633
|
}
|
|
634
|
+
|
|
651
635
|
Renderer.clipSpread = 10;
|
|
652
636
|
|
|
653
637
|
Object.assign(core.Creator, {
|
|
@@ -657,24 +641,22 @@ Object.assign(core.Creator, {
|
|
|
657
641
|
selector: (_target, _options) => undefined,
|
|
658
642
|
interaction: (_target, _canvas, _selector, _options) => undefined
|
|
659
643
|
});
|
|
644
|
+
|
|
660
645
|
core.Platform.layout = Layouter.fullLayout;
|
|
661
646
|
|
|
662
647
|
function fillText(ui, canvas) {
|
|
663
|
-
const data = ui.__, { rows, decorationY } = data.__textDrawData;
|
|
664
|
-
if (data.__isPlacehold && data.placeholderColor)
|
|
665
|
-
canvas.fillStyle = data.placeholderColor;
|
|
648
|
+
const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
|
|
649
|
+
if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
|
|
666
650
|
let row;
|
|
667
651
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
668
652
|
row = rows[i];
|
|
669
|
-
if (row.text)
|
|
670
|
-
canvas.fillText(
|
|
671
|
-
|
|
672
|
-
row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
|
|
653
|
+
if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
|
|
654
|
+
canvas.fillText(charData.char, charData.x, row.y);
|
|
655
|
+
});
|
|
673
656
|
}
|
|
674
657
|
if (decorationY) {
|
|
675
|
-
const { decorationColor, decorationHeight } = data.__textDrawData;
|
|
676
|
-
if (decorationColor)
|
|
677
|
-
canvas.fillStyle = decorationColor;
|
|
658
|
+
const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
|
|
659
|
+
if (decorationColor) canvas.fillStyle = decorationColor;
|
|
678
660
|
rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
|
|
679
661
|
}
|
|
680
662
|
}
|
|
@@ -683,117 +665,112 @@ function fill(fill, ui, canvas) {
|
|
|
683
665
|
canvas.fillStyle = fill;
|
|
684
666
|
fillPathOrText(ui, canvas);
|
|
685
667
|
}
|
|
668
|
+
|
|
686
669
|
function fills(fills, ui, canvas) {
|
|
687
670
|
let item;
|
|
688
671
|
for (let i = 0, len = fills.length; i < len; i++) {
|
|
689
672
|
item = fills[i];
|
|
690
673
|
if (item.image) {
|
|
691
|
-
if (draw.PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
|
|
692
|
-
continue;
|
|
674
|
+
if (draw.PaintImage.checkImage(ui, canvas, item, !ui.__.__font)) continue;
|
|
693
675
|
if (!item.style) {
|
|
694
|
-
if (!i && item.image.isPlacehold)
|
|
695
|
-
ui.drawImagePlaceholder(canvas, item.image);
|
|
676
|
+
if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas, item.image);
|
|
696
677
|
continue;
|
|
697
678
|
}
|
|
698
679
|
}
|
|
699
680
|
canvas.fillStyle = item.style;
|
|
700
681
|
if (item.transform || item.scaleFixed) {
|
|
701
682
|
canvas.save();
|
|
702
|
-
if (item.transform)
|
|
703
|
-
canvas.transform(item.transform);
|
|
683
|
+
if (item.transform) canvas.transform(item.transform);
|
|
704
684
|
if (item.scaleFixed) {
|
|
705
|
-
const { scaleX, scaleY } = ui.getRenderScaleData(true);
|
|
706
|
-
canvas.scale(1 / scaleX, 1 / scaleY);
|
|
685
|
+
const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
|
|
686
|
+
if (item.scaleFixed === true || item.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
|
|
707
687
|
}
|
|
708
|
-
if (item.blendMode)
|
|
709
|
-
canvas.blendMode = item.blendMode;
|
|
688
|
+
if (item.blendMode) canvas.blendMode = item.blendMode;
|
|
710
689
|
fillPathOrText(ui, canvas);
|
|
711
690
|
canvas.restore();
|
|
712
|
-
}
|
|
713
|
-
else {
|
|
691
|
+
} else {
|
|
714
692
|
if (item.blendMode) {
|
|
715
693
|
canvas.saveBlendMode(item.blendMode);
|
|
716
694
|
fillPathOrText(ui, canvas);
|
|
717
695
|
canvas.restoreBlendMode();
|
|
718
|
-
}
|
|
719
|
-
else
|
|
720
|
-
fillPathOrText(ui, canvas);
|
|
696
|
+
} else fillPathOrText(ui, canvas);
|
|
721
697
|
}
|
|
722
698
|
}
|
|
723
699
|
}
|
|
700
|
+
|
|
724
701
|
function fillPathOrText(ui, canvas) {
|
|
725
|
-
ui.__.__font ? fillText(ui, canvas) :
|
|
702
|
+
ui.__.__font ? fillText(ui, canvas) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
|
|
726
703
|
}
|
|
727
704
|
|
|
728
705
|
function strokeText(stroke, ui, canvas) {
|
|
729
706
|
switch (ui.__.strokeAlign) {
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
707
|
+
case "center":
|
|
708
|
+
drawCenter$1(stroke, 1, ui, canvas);
|
|
709
|
+
break;
|
|
710
|
+
|
|
711
|
+
case "inside":
|
|
712
|
+
drawAlign(stroke, "inside", ui, canvas);
|
|
713
|
+
break;
|
|
714
|
+
|
|
715
|
+
case "outside":
|
|
716
|
+
ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, "outside", ui, canvas);
|
|
717
|
+
break;
|
|
739
718
|
}
|
|
740
719
|
}
|
|
720
|
+
|
|
741
721
|
function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
|
|
742
722
|
const data = ui.__;
|
|
743
|
-
if (
|
|
723
|
+
if (core.isObject(stroke)) {
|
|
744
724
|
drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
|
|
745
|
-
}
|
|
746
|
-
else {
|
|
725
|
+
} else {
|
|
747
726
|
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
748
727
|
drawTextStroke(ui, canvas);
|
|
749
728
|
}
|
|
750
729
|
}
|
|
730
|
+
|
|
751
731
|
function drawAlign(stroke, align, ui, canvas) {
|
|
752
732
|
const out = canvas.getSameCanvas(true, true);
|
|
753
733
|
out.font = ui.__.__font;
|
|
754
734
|
drawCenter$1(stroke, 2, ui, out);
|
|
755
|
-
out.blendMode = align ===
|
|
735
|
+
out.blendMode = align === "outside" ? "destination-out" : "destination-in";
|
|
756
736
|
fillText(ui, out);
|
|
757
|
-
out.blendMode =
|
|
737
|
+
out.blendMode = "normal";
|
|
758
738
|
core.LeafHelper.copyCanvasByWorld(ui, canvas, out);
|
|
759
739
|
out.recycle(ui.__nowWorld);
|
|
760
740
|
}
|
|
741
|
+
|
|
761
742
|
function drawTextStroke(ui, canvas) {
|
|
762
743
|
let row, data = ui.__.__textDrawData;
|
|
763
|
-
const { rows, decorationY } = data;
|
|
744
|
+
const {rows: rows, decorationY: decorationY} = data;
|
|
764
745
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
765
746
|
row = rows[i];
|
|
766
|
-
if (row.text)
|
|
767
|
-
canvas.strokeText(
|
|
768
|
-
|
|
769
|
-
row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
|
|
747
|
+
if (row.text) canvas.strokeText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
|
|
748
|
+
canvas.strokeText(charData.char, charData.x, row.y);
|
|
749
|
+
});
|
|
770
750
|
}
|
|
771
751
|
if (decorationY) {
|
|
772
|
-
const { decorationHeight
|
|
752
|
+
const {decorationHeight: decorationHeight} = data;
|
|
773
753
|
rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
|
|
774
754
|
}
|
|
775
755
|
}
|
|
756
|
+
|
|
776
757
|
function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
|
|
777
758
|
let item;
|
|
778
|
-
const data = ui.__, { __hasMultiStrokeStyle
|
|
759
|
+
const data = ui.__, {__hasMultiStrokeStyle: __hasMultiStrokeStyle} = data;
|
|
779
760
|
__hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
|
|
780
761
|
for (let i = 0, len = strokes.length; i < len; i++) {
|
|
781
762
|
item = strokes[i];
|
|
782
|
-
if (item.image && draw.PaintImage.checkImage(ui, canvas, item, false))
|
|
783
|
-
continue;
|
|
763
|
+
if (item.image && draw.PaintImage.checkImage(ui, canvas, item, false)) continue;
|
|
784
764
|
if (item.style) {
|
|
785
765
|
if (__hasMultiStrokeStyle) {
|
|
786
|
-
const { strokeStyle
|
|
766
|
+
const {strokeStyle: strokeStyle} = item;
|
|
787
767
|
strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
|
|
788
|
-
}
|
|
789
|
-
else
|
|
790
|
-
canvas.strokeStyle = item.style;
|
|
768
|
+
} else canvas.strokeStyle = item.style;
|
|
791
769
|
if (item.blendMode) {
|
|
792
770
|
canvas.saveBlendMode(item.blendMode);
|
|
793
771
|
isText ? drawTextStroke(ui, canvas) : canvas.stroke();
|
|
794
772
|
canvas.restoreBlendMode();
|
|
795
|
-
}
|
|
796
|
-
else {
|
|
773
|
+
} else {
|
|
797
774
|
isText ? drawTextStroke(ui, canvas) : canvas.stroke();
|
|
798
775
|
}
|
|
799
776
|
}
|
|
@@ -802,53 +779,54 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
|
|
|
802
779
|
|
|
803
780
|
function stroke(stroke, ui, canvas) {
|
|
804
781
|
const data = ui.__;
|
|
805
|
-
if (!data.__strokeWidth)
|
|
806
|
-
return;
|
|
782
|
+
if (!data.__strokeWidth) return;
|
|
807
783
|
if (data.__font) {
|
|
808
784
|
strokeText(stroke, ui, canvas);
|
|
809
|
-
}
|
|
810
|
-
else {
|
|
785
|
+
} else {
|
|
811
786
|
switch (data.strokeAlign) {
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
787
|
+
case "center":
|
|
788
|
+
drawCenter(stroke, 1, ui, canvas);
|
|
789
|
+
break;
|
|
790
|
+
|
|
791
|
+
case "inside":
|
|
792
|
+
drawInside(stroke, ui, canvas);
|
|
793
|
+
break;
|
|
794
|
+
|
|
795
|
+
case "outside":
|
|
796
|
+
drawOutside(stroke, ui, canvas);
|
|
797
|
+
break;
|
|
821
798
|
}
|
|
822
799
|
}
|
|
823
800
|
}
|
|
801
|
+
|
|
824
802
|
function strokes(strokes, ui, canvas) {
|
|
825
803
|
stroke(strokes, ui, canvas);
|
|
826
804
|
}
|
|
805
|
+
|
|
827
806
|
function drawCenter(stroke, strokeWidthScale, ui, canvas) {
|
|
828
807
|
const data = ui.__;
|
|
829
|
-
if (
|
|
808
|
+
if (core.isObject(stroke)) {
|
|
830
809
|
drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
|
|
831
|
-
}
|
|
832
|
-
else {
|
|
810
|
+
} else {
|
|
833
811
|
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
834
812
|
canvas.stroke();
|
|
835
813
|
}
|
|
836
|
-
if (data.__useArrow)
|
|
837
|
-
draw.Paint.strokeArrow(stroke, ui, canvas);
|
|
814
|
+
if (data.__useArrow) draw.Paint.strokeArrow(stroke, ui, canvas);
|
|
838
815
|
}
|
|
816
|
+
|
|
839
817
|
function drawInside(stroke, ui, canvas) {
|
|
840
818
|
canvas.save();
|
|
841
819
|
canvas.clipUI(ui);
|
|
842
820
|
drawCenter(stroke, 2, ui, canvas);
|
|
843
821
|
canvas.restore();
|
|
844
822
|
}
|
|
823
|
+
|
|
845
824
|
function drawOutside(stroke, ui, canvas) {
|
|
846
825
|
const data = ui.__;
|
|
847
826
|
if (data.__fillAfterStroke) {
|
|
848
827
|
drawCenter(stroke, 2, ui, canvas);
|
|
849
|
-
}
|
|
850
|
-
|
|
851
|
-
const { renderBounds } = ui.__layout;
|
|
828
|
+
} else {
|
|
829
|
+
const {renderBounds: renderBounds} = ui.__layout;
|
|
852
830
|
const out = canvas.getSameCanvas(true, true);
|
|
853
831
|
ui.__drawRenderPath(out);
|
|
854
832
|
drawCenter(stroke, 2, ui, out);
|
|
@@ -859,25 +837,23 @@ function drawOutside(stroke, ui, canvas) {
|
|
|
859
837
|
}
|
|
860
838
|
}
|
|
861
839
|
|
|
862
|
-
const { getSpread, getOuterOf, getByMove, getIntersectData } = core.BoundsHelper;
|
|
840
|
+
const {getSpread: getSpread, getOuterOf: getOuterOf, getByMove: getByMove, getIntersectData: getIntersectData} = core.BoundsHelper;
|
|
841
|
+
|
|
863
842
|
function shape(ui, current, options) {
|
|
864
843
|
const canvas = current.getSameCanvas();
|
|
865
844
|
const nowWorld = ui.__nowWorld;
|
|
866
|
-
let bounds, fitMatrix, shapeBounds, worldCanvas;
|
|
867
|
-
let { scaleX, scaleY } = nowWorld;
|
|
868
|
-
if (scaleX < 0)
|
|
869
|
-
|
|
870
|
-
if (scaleY < 0)
|
|
871
|
-
scaleY = -scaleY;
|
|
845
|
+
let bounds, matrix, fitMatrix, shapeBounds, worldCanvas;
|
|
846
|
+
let {scaleX: scaleX, scaleY: scaleY} = nowWorld;
|
|
847
|
+
if (scaleX < 0) scaleX = -scaleX;
|
|
848
|
+
if (scaleY < 0) scaleY = -scaleY;
|
|
872
849
|
if (current.bounds.includes(nowWorld)) {
|
|
873
850
|
worldCanvas = canvas;
|
|
874
851
|
bounds = shapeBounds = nowWorld;
|
|
875
|
-
}
|
|
876
|
-
|
|
877
|
-
const
|
|
878
|
-
const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [spread * scaleY, spread * scaleX]) : current.bounds, nowWorld);
|
|
852
|
+
} else {
|
|
853
|
+
const {renderShapeSpread: spread} = ui.__layout;
|
|
854
|
+
const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [ spread * scaleY, spread * scaleX ]) : current.bounds, nowWorld);
|
|
879
855
|
fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
|
|
880
|
-
let {
|
|
856
|
+
let {a: fitScaleX, d: fitScaleY} = fitMatrix;
|
|
881
857
|
if (fitMatrix.a < 1) {
|
|
882
858
|
worldCanvas = current.getSameCanvas();
|
|
883
859
|
ui.__renderShape(worldCanvas, options);
|
|
@@ -886,28 +862,39 @@ function shape(ui, current, options) {
|
|
|
886
862
|
}
|
|
887
863
|
shapeBounds = getOuterOf(nowWorld, fitMatrix);
|
|
888
864
|
bounds = getByMove(shapeBounds, -fitMatrix.e, -fitMatrix.f);
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
865
|
+
const userMatrix = options.matrix;
|
|
866
|
+
if (userMatrix) {
|
|
867
|
+
matrix = new core.Matrix(fitMatrix);
|
|
868
|
+
matrix.multiply(userMatrix);
|
|
869
|
+
fitScaleX *= userMatrix.scaleX;
|
|
870
|
+
fitScaleY *= userMatrix.scaleY;
|
|
871
|
+
} else matrix = fitMatrix;
|
|
872
|
+
matrix.withScale(fitScaleX, fitScaleY);
|
|
873
|
+
options = Object.assign(Object.assign({}, options), {
|
|
874
|
+
matrix: matrix
|
|
875
|
+
});
|
|
896
876
|
}
|
|
897
877
|
ui.__renderShape(canvas, options);
|
|
898
878
|
return {
|
|
899
|
-
canvas
|
|
900
|
-
|
|
879
|
+
canvas: canvas,
|
|
880
|
+
matrix: matrix,
|
|
881
|
+
fitMatrix: fitMatrix,
|
|
882
|
+
bounds: bounds,
|
|
883
|
+
worldCanvas: worldCanvas,
|
|
884
|
+
shapeBounds: shapeBounds,
|
|
885
|
+
scaleX: scaleX,
|
|
886
|
+
scaleY: scaleY
|
|
901
887
|
};
|
|
902
888
|
}
|
|
903
889
|
|
|
904
890
|
let recycleMap;
|
|
905
|
-
|
|
891
|
+
|
|
892
|
+
const {stintSet: stintSet} = core.DataHelper, {hasTransparent: hasTransparent$1} = draw.ColorConvert;
|
|
893
|
+
|
|
906
894
|
function compute(attrName, ui) {
|
|
907
895
|
const data = ui.__, leafPaints = [];
|
|
908
896
|
let paints = data.__input[attrName], isAlphaPixel, isTransparent;
|
|
909
|
-
if (!(paints
|
|
910
|
-
paints = [paints];
|
|
897
|
+
if (!core.isArray(paints)) paints = [ paints ];
|
|
911
898
|
recycleMap = draw.PaintImage.recycleImage(attrName, data);
|
|
912
899
|
let maxChildStrokeWidth;
|
|
913
900
|
for (let i = 0, len = paints.length, item; i < len; i++) {
|
|
@@ -915,206 +902,222 @@ function compute(attrName, ui) {
|
|
|
915
902
|
leafPaints.push(item);
|
|
916
903
|
if (item.strokeStyle) {
|
|
917
904
|
maxChildStrokeWidth || (maxChildStrokeWidth = 1);
|
|
918
|
-
if (item.strokeStyle.strokeWidth)
|
|
919
|
-
maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
|
|
905
|
+
if (item.strokeStyle.strokeWidth) maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
|
|
920
906
|
}
|
|
921
907
|
}
|
|
922
908
|
}
|
|
923
|
-
data[
|
|
909
|
+
data["_" + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
924
910
|
if (leafPaints.length) {
|
|
925
911
|
if (leafPaints.every(item => item.isTransparent)) {
|
|
926
|
-
if (leafPaints.some(item => item.image))
|
|
927
|
-
isAlphaPixel = true;
|
|
912
|
+
if (leafPaints.some(item => item.image)) isAlphaPixel = true;
|
|
928
913
|
isTransparent = true;
|
|
929
914
|
}
|
|
930
915
|
}
|
|
931
|
-
if (attrName ===
|
|
932
|
-
stintSet(data,
|
|
933
|
-
stintSet(data,
|
|
934
|
-
}
|
|
935
|
-
|
|
936
|
-
stintSet(data,
|
|
937
|
-
stintSet(data,
|
|
938
|
-
stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
|
|
916
|
+
if (attrName === "fill") {
|
|
917
|
+
stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
|
|
918
|
+
stintSet(data, "__isTransparentFill", isTransparent);
|
|
919
|
+
} else {
|
|
920
|
+
stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
|
|
921
|
+
stintSet(data, "__isTransparentStroke", isTransparent);
|
|
922
|
+
stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
|
|
939
923
|
}
|
|
940
924
|
}
|
|
925
|
+
|
|
941
926
|
function getLeafPaint(attrName, paint, ui) {
|
|
942
|
-
if (
|
|
943
|
-
return undefined;
|
|
927
|
+
if (!core.isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
|
|
944
928
|
let data;
|
|
945
|
-
const { boxBounds
|
|
929
|
+
const {boxBounds: boxBounds} = ui.__layout;
|
|
946
930
|
switch (paint.type) {
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
931
|
+
case "image":
|
|
932
|
+
data = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
|
|
933
|
+
break;
|
|
934
|
+
|
|
935
|
+
case "linear":
|
|
936
|
+
data = draw.PaintGradient.linearGradient(paint, boxBounds);
|
|
937
|
+
break;
|
|
938
|
+
|
|
939
|
+
case "radial":
|
|
940
|
+
data = draw.PaintGradient.radialGradient(paint, boxBounds);
|
|
941
|
+
break;
|
|
942
|
+
|
|
943
|
+
case "angular":
|
|
944
|
+
data = draw.PaintGradient.conicGradient(paint, boxBounds);
|
|
945
|
+
break;
|
|
946
|
+
|
|
947
|
+
case "solid":
|
|
948
|
+
const {type: type, color: color, opacity: opacity} = paint;
|
|
949
|
+
data = {
|
|
950
|
+
type: type,
|
|
951
|
+
style: draw.ColorConvert.string(color, opacity)
|
|
952
|
+
};
|
|
953
|
+
break;
|
|
954
|
+
|
|
955
|
+
default:
|
|
956
|
+
if (!core.isUndefined(paint.r)) data = {
|
|
957
|
+
type: "solid",
|
|
958
|
+
style: draw.ColorConvert.string(paint)
|
|
959
|
+
};
|
|
966
960
|
}
|
|
967
961
|
if (data) {
|
|
968
|
-
if (
|
|
969
|
-
data.isTransparent = true;
|
|
962
|
+
if (core.isString(data.style) && hasTransparent$1(data.style)) data.isTransparent = true;
|
|
970
963
|
if (paint.style) {
|
|
971
|
-
if (paint.style.strokeWidth === 0)
|
|
972
|
-
return undefined;
|
|
964
|
+
if (paint.style.strokeWidth === 0) return undefined;
|
|
973
965
|
data.strokeStyle = paint.style;
|
|
974
966
|
}
|
|
975
|
-
if (paint.
|
|
976
|
-
|
|
967
|
+
if (paint.editing) data.editing = paint.editing;
|
|
968
|
+
if (paint.blendMode) data.blendMode = paint.blendMode;
|
|
977
969
|
}
|
|
978
970
|
return data;
|
|
979
971
|
}
|
|
980
972
|
|
|
981
973
|
const PaintModule = {
|
|
982
|
-
compute,
|
|
983
|
-
fill,
|
|
984
|
-
fills,
|
|
985
|
-
fillPathOrText,
|
|
986
|
-
fillText,
|
|
987
|
-
stroke,
|
|
988
|
-
strokes,
|
|
989
|
-
strokeText,
|
|
990
|
-
drawTextStroke,
|
|
991
|
-
shape
|
|
974
|
+
compute: compute,
|
|
975
|
+
fill: fill,
|
|
976
|
+
fills: fills,
|
|
977
|
+
fillPathOrText: fillPathOrText,
|
|
978
|
+
fillText: fillText,
|
|
979
|
+
stroke: stroke,
|
|
980
|
+
strokes: strokes,
|
|
981
|
+
strokeText: strokeText,
|
|
982
|
+
drawTextStroke: drawTextStroke,
|
|
983
|
+
shape: shape
|
|
992
984
|
};
|
|
993
985
|
|
|
994
986
|
let origin = {}, tempMatrix = core.getMatrixData();
|
|
995
|
-
|
|
987
|
+
|
|
988
|
+
const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = core.MatrixHelper;
|
|
989
|
+
|
|
996
990
|
function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
|
|
997
991
|
const transform = get$3();
|
|
998
992
|
translate$1(transform, box.x + x, box.y + y);
|
|
999
993
|
scaleHelper(transform, scaleX, scaleY);
|
|
1000
|
-
if (rotation)
|
|
1001
|
-
|
|
994
|
+
if (rotation) rotateOfOuter$1(transform, {
|
|
995
|
+
x: box.x + box.width / 2,
|
|
996
|
+
y: box.y + box.height / 2
|
|
997
|
+
}, rotation);
|
|
1002
998
|
data.transform = transform;
|
|
1003
999
|
}
|
|
1000
|
+
|
|
1004
1001
|
function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
|
|
1005
1002
|
const transform = get$3();
|
|
1006
|
-
|
|
1007
|
-
rotate(transform, rotation);
|
|
1008
|
-
if (skew)
|
|
1009
|
-
skewHelper(transform, skew.x, skew.y);
|
|
1010
|
-
if (scaleX)
|
|
1011
|
-
scaleHelper(transform, scaleX, scaleY);
|
|
1012
|
-
translate$1(transform, box.x + x, box.y + y);
|
|
1003
|
+
layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
|
|
1013
1004
|
if (clipSize) {
|
|
1014
1005
|
tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
|
|
1015
1006
|
multiplyParent(transform, tempMatrix);
|
|
1016
1007
|
}
|
|
1017
1008
|
data.transform = transform;
|
|
1018
1009
|
}
|
|
1019
|
-
|
|
1010
|
+
|
|
1011
|
+
function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, skew, align, freeTransform) {
|
|
1020
1012
|
const transform = get$3();
|
|
1021
|
-
if (
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1013
|
+
if (freeTransform) {
|
|
1014
|
+
layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
|
|
1015
|
+
} else {
|
|
1016
|
+
if (rotation) {
|
|
1017
|
+
if (align === "center") {
|
|
1018
|
+
rotateOfOuter$1(transform, {
|
|
1019
|
+
x: width / 2,
|
|
1020
|
+
y: height / 2
|
|
1021
|
+
}, rotation);
|
|
1022
|
+
} else {
|
|
1023
|
+
rotate(transform, rotation);
|
|
1024
|
+
switch (rotation) {
|
|
1025
|
+
case 90:
|
|
1029
1026
|
translate$1(transform, height, 0);
|
|
1030
1027
|
break;
|
|
1031
|
-
|
|
1028
|
+
|
|
1029
|
+
case 180:
|
|
1032
1030
|
translate$1(transform, width, height);
|
|
1033
1031
|
break;
|
|
1034
|
-
|
|
1032
|
+
|
|
1033
|
+
case 270:
|
|
1035
1034
|
translate$1(transform, 0, width);
|
|
1036
1035
|
break;
|
|
1036
|
+
}
|
|
1037
1037
|
}
|
|
1038
1038
|
}
|
|
1039
|
+
origin.x = box.x + x;
|
|
1040
|
+
origin.y = box.y + y;
|
|
1041
|
+
translate$1(transform, origin.x, origin.y);
|
|
1042
|
+
if (scaleX) scaleOfOuter$1(transform, origin, scaleX, scaleY);
|
|
1039
1043
|
}
|
|
1040
|
-
origin.x = box.x + x;
|
|
1041
|
-
origin.y = box.y + y;
|
|
1042
|
-
translate$1(transform, origin.x, origin.y);
|
|
1043
|
-
if (scaleX)
|
|
1044
|
-
scaleOfOuter$1(transform, origin, scaleX, scaleY);
|
|
1045
1044
|
data.transform = transform;
|
|
1046
1045
|
}
|
|
1047
1046
|
|
|
1048
|
-
|
|
1049
|
-
|
|
1047
|
+
function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
|
|
1048
|
+
if (rotation) rotate(transform, rotation);
|
|
1049
|
+
if (skew) skewHelper(transform, skew.x, skew.y);
|
|
1050
|
+
if (scaleX) scaleHelper(transform, scaleX, scaleY);
|
|
1051
|
+
translate$1(transform, box.x + x, box.y + y);
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
const {get: get$2, translate: translate} = core.MatrixHelper;
|
|
1055
|
+
|
|
1056
|
+
const tempBox = new core.Bounds;
|
|
1057
|
+
|
|
1050
1058
|
const tempScaleData = {};
|
|
1059
|
+
|
|
1051
1060
|
const tempImage = {};
|
|
1061
|
+
|
|
1052
1062
|
function createData(leafPaint, image, paint, box) {
|
|
1053
|
-
const { changeful, sync
|
|
1054
|
-
if (changeful)
|
|
1055
|
-
|
|
1056
|
-
if (
|
|
1057
|
-
leafPaint.sync = sync;
|
|
1058
|
-
if (editing)
|
|
1059
|
-
leafPaint.editing = editing;
|
|
1060
|
-
if (scaleFixed)
|
|
1061
|
-
leafPaint.scaleFixed = scaleFixed;
|
|
1063
|
+
const {changeful: changeful, sync: sync, scaleFixed: scaleFixed} = paint;
|
|
1064
|
+
if (changeful) leafPaint.changeful = changeful;
|
|
1065
|
+
if (sync) leafPaint.sync = sync;
|
|
1066
|
+
if (scaleFixed) leafPaint.scaleFixed = scaleFixed;
|
|
1062
1067
|
leafPaint.data = getPatternData(paint, box, image);
|
|
1063
1068
|
}
|
|
1069
|
+
|
|
1064
1070
|
function getPatternData(paint, box, image) {
|
|
1065
|
-
if (paint.padding)
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
let { width, height } = image;
|
|
1070
|
-
const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
|
|
1071
|
+
if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
|
|
1072
|
+
if (paint.mode === "strench") paint.mode = "stretch";
|
|
1073
|
+
let {width: width, height: height} = image;
|
|
1074
|
+
const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters} = paint;
|
|
1071
1075
|
const sameBox = box.width === width && box.height === height;
|
|
1072
|
-
const data = {
|
|
1073
|
-
|
|
1076
|
+
const data = {
|
|
1077
|
+
mode: mode
|
|
1078
|
+
};
|
|
1079
|
+
const swapSize = align !== "center" && (rotation || 0) % 180 === 90;
|
|
1074
1080
|
core.BoundsHelper.set(tempImage, 0, 0, swapSize ? height : width, swapSize ? width : height);
|
|
1075
1081
|
let scaleX, scaleY;
|
|
1076
|
-
if (!mode || mode ===
|
|
1082
|
+
if (!mode || mode === "cover" || mode === "fit") {
|
|
1077
1083
|
if (!sameBox || rotation) {
|
|
1078
|
-
scaleX = scaleY = core.BoundsHelper.getFitScale(box, tempImage, mode !==
|
|
1084
|
+
scaleX = scaleY = core.BoundsHelper.getFitScale(box, tempImage, mode !== "fit");
|
|
1079
1085
|
core.BoundsHelper.put(box, image, align, scaleX, false, tempImage);
|
|
1080
1086
|
core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
|
|
1081
1087
|
}
|
|
1082
|
-
}
|
|
1083
|
-
else {
|
|
1088
|
+
} else {
|
|
1084
1089
|
if (scale || size) {
|
|
1085
1090
|
core.MathHelper.getScaleData(scale, size, image, tempScaleData);
|
|
1086
1091
|
scaleX = tempScaleData.scaleX;
|
|
1087
1092
|
scaleY = tempScaleData.scaleY;
|
|
1088
1093
|
}
|
|
1089
|
-
if (align) {
|
|
1090
|
-
if (scaleX)
|
|
1091
|
-
|
|
1092
|
-
core.AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
|
|
1094
|
+
if (align || gap || repeat) {
|
|
1095
|
+
if (scaleX) core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
|
|
1096
|
+
if (align) core.AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
|
|
1093
1097
|
}
|
|
1094
1098
|
}
|
|
1095
|
-
if (offset)
|
|
1096
|
-
core.PointHelper.move(tempImage, offset);
|
|
1099
|
+
if (offset) core.PointHelper.move(tempImage, offset);
|
|
1097
1100
|
switch (mode) {
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1101
|
+
case "stretch":
|
|
1102
|
+
if (!sameBox) width = box.width, height = box.height;
|
|
1103
|
+
break;
|
|
1104
|
+
|
|
1105
|
+
case "normal":
|
|
1106
|
+
case "clip":
|
|
1107
|
+
if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
|
|
1108
|
+
break;
|
|
1109
|
+
|
|
1110
|
+
case "repeat":
|
|
1111
|
+
if (!sameBox || scaleX || rotation || skew) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
|
|
1112
|
+
if (!repeat) data.repeat = "repeat";
|
|
1113
|
+
const count = core.isObject(repeat);
|
|
1114
|
+
if (gap || count) data.gap = getGapData(gap, count && repeat, tempImage.width, tempImage.height, box);
|
|
1115
|
+
break;
|
|
1116
|
+
|
|
1117
|
+
case "fit":
|
|
1118
|
+
case "cover":
|
|
1119
|
+
default:
|
|
1120
|
+
if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
|
|
1118
1121
|
}
|
|
1119
1122
|
if (!data.transform) {
|
|
1120
1123
|
if (box.x || box.y) {
|
|
@@ -1122,49 +1125,69 @@ function getPatternData(paint, box, image) {
|
|
|
1122
1125
|
translate(data.transform, box.x, box.y);
|
|
1123
1126
|
}
|
|
1124
1127
|
}
|
|
1125
|
-
if (scaleX && mode !==
|
|
1128
|
+
if (scaleX && mode !== "stretch") {
|
|
1126
1129
|
data.scaleX = scaleX;
|
|
1127
1130
|
data.scaleY = scaleY;
|
|
1128
1131
|
}
|
|
1129
1132
|
data.width = width;
|
|
1130
1133
|
data.height = height;
|
|
1131
|
-
if (opacity)
|
|
1132
|
-
|
|
1133
|
-
if (
|
|
1134
|
-
data.filters = filters;
|
|
1135
|
-
if (repeat)
|
|
1136
|
-
data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
|
|
1134
|
+
if (opacity) data.opacity = opacity;
|
|
1135
|
+
if (filters) data.filters = filters;
|
|
1136
|
+
if (repeat) data.repeat = core.isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
|
|
1137
1137
|
return data;
|
|
1138
1138
|
}
|
|
1139
1139
|
|
|
1140
|
-
|
|
1141
|
-
|
|
1140
|
+
function getGapData(gap, repeat, width, height, box) {
|
|
1141
|
+
let xGap, yGap;
|
|
1142
|
+
if (core.isObject(gap)) xGap = gap.x, yGap = gap.y; else xGap = yGap = gap;
|
|
1143
|
+
return {
|
|
1144
|
+
x: getGapValue(xGap, width, box.width, repeat && repeat.x),
|
|
1145
|
+
y: getGapValue(yGap, height, box.height, repeat && repeat.y)
|
|
1146
|
+
};
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
function getGapValue(gap, size, totalSize, rows) {
|
|
1150
|
+
const auto = core.isString(gap) || rows;
|
|
1151
|
+
const remain = rows ? totalSize - rows * size : totalSize % size;
|
|
1152
|
+
const value = auto ? remain / ((rows || Math.floor(totalSize / size)) - 1) : gap;
|
|
1153
|
+
return gap === "auto" ? value < 0 ? 0 : value : value;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
let cache, box = new core.Bounds;
|
|
1157
|
+
|
|
1158
|
+
const {isSame: isSame} = core.BoundsHelper;
|
|
1159
|
+
|
|
1142
1160
|
function image(ui, attrName, paint, boxBounds, firstUse) {
|
|
1143
1161
|
let leafPaint, event;
|
|
1144
1162
|
const image = core.ImageManager.get(paint);
|
|
1145
1163
|
if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
|
|
1146
1164
|
leafPaint = cache.leafPaint;
|
|
1147
|
-
}
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1165
|
+
} else {
|
|
1166
|
+
leafPaint = {
|
|
1167
|
+
type: paint.type,
|
|
1168
|
+
image: image
|
|
1169
|
+
};
|
|
1170
|
+
if (image.hasAlphaPixel) leafPaint.isTransparent = true;
|
|
1171
|
+
cache = image.use > 1 ? {
|
|
1172
|
+
leafPaint: leafPaint,
|
|
1173
|
+
paint: paint,
|
|
1174
|
+
boxBounds: box.set(boxBounds)
|
|
1175
|
+
} : null;
|
|
1176
|
+
}
|
|
1177
|
+
if (firstUse || image.loading) event = {
|
|
1178
|
+
image: image,
|
|
1179
|
+
attrName: attrName,
|
|
1180
|
+
attrValue: paint
|
|
1181
|
+
};
|
|
1156
1182
|
if (image.ready) {
|
|
1157
1183
|
checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
|
|
1158
1184
|
if (firstUse) {
|
|
1159
1185
|
onLoad(ui, event);
|
|
1160
1186
|
onLoadSuccess(ui, event);
|
|
1161
1187
|
}
|
|
1162
|
-
}
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
onLoadError(ui, event, image.error);
|
|
1166
|
-
}
|
|
1167
|
-
else {
|
|
1188
|
+
} else if (image.error) {
|
|
1189
|
+
if (firstUse) onLoadError(ui, event, image.error);
|
|
1190
|
+
} else {
|
|
1168
1191
|
if (firstUse) {
|
|
1169
1192
|
ignoreRender(ui, true);
|
|
1170
1193
|
onLoad(ui, event);
|
|
@@ -1173,79 +1196,84 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
|
|
|
1173
1196
|
ignoreRender(ui, false);
|
|
1174
1197
|
if (!ui.destroyed) {
|
|
1175
1198
|
if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
|
|
1176
|
-
if (image.hasAlphaPixel)
|
|
1177
|
-
|
|
1178
|
-
ui.forceUpdate('surface');
|
|
1199
|
+
if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true;
|
|
1200
|
+
ui.forceUpdate("surface");
|
|
1179
1201
|
}
|
|
1180
1202
|
onLoadSuccess(ui, event);
|
|
1181
1203
|
}
|
|
1182
1204
|
leafPaint.loadId = undefined;
|
|
1183
|
-
},
|
|
1205
|
+
}, error => {
|
|
1184
1206
|
ignoreRender(ui, false);
|
|
1185
1207
|
onLoadError(ui, event, error);
|
|
1186
1208
|
leafPaint.loadId = undefined;
|
|
1187
1209
|
});
|
|
1188
1210
|
if (ui.placeholderColor) {
|
|
1189
|
-
if (!ui.placeholderDelay)
|
|
1190
|
-
image.
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
ui.forceUpdate('surface');
|
|
1196
|
-
}
|
|
1197
|
-
}, ui.placeholderDelay);
|
|
1211
|
+
if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
|
|
1212
|
+
if (!image.ready) {
|
|
1213
|
+
image.isPlacehold = true;
|
|
1214
|
+
ui.forceUpdate("surface");
|
|
1215
|
+
}
|
|
1216
|
+
}, ui.placeholderDelay);
|
|
1198
1217
|
}
|
|
1199
1218
|
}
|
|
1200
1219
|
return leafPaint;
|
|
1201
1220
|
}
|
|
1221
|
+
|
|
1202
1222
|
function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
|
|
1203
|
-
if (attrName ===
|
|
1223
|
+
if (attrName === "fill" && !ui.__.__naturalWidth) {
|
|
1204
1224
|
const data = ui.__;
|
|
1205
1225
|
data.__naturalWidth = image.width / data.pixelRatio;
|
|
1206
1226
|
data.__naturalHeight = image.height / data.pixelRatio;
|
|
1207
1227
|
if (data.__autoSide) {
|
|
1208
|
-
ui.forceUpdate(
|
|
1228
|
+
ui.forceUpdate("width");
|
|
1209
1229
|
if (ui.__proxyData) {
|
|
1210
|
-
ui.setProxyAttr(
|
|
1211
|
-
ui.setProxyAttr(
|
|
1230
|
+
ui.setProxyAttr("width", data.width);
|
|
1231
|
+
ui.setProxyAttr("height", data.height);
|
|
1212
1232
|
}
|
|
1213
1233
|
return false;
|
|
1214
1234
|
}
|
|
1215
1235
|
}
|
|
1216
|
-
if (!leafPaint.data)
|
|
1217
|
-
createData(leafPaint, image, paint, boxBounds);
|
|
1236
|
+
if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds);
|
|
1218
1237
|
return true;
|
|
1219
1238
|
}
|
|
1239
|
+
|
|
1220
1240
|
function onLoad(ui, event) {
|
|
1221
1241
|
emit(ui, core.ImageEvent.LOAD, event);
|
|
1222
1242
|
}
|
|
1243
|
+
|
|
1223
1244
|
function onLoadSuccess(ui, event) {
|
|
1224
1245
|
emit(ui, core.ImageEvent.LOADED, event);
|
|
1225
1246
|
}
|
|
1247
|
+
|
|
1226
1248
|
function onLoadError(ui, event, error) {
|
|
1227
1249
|
event.error = error;
|
|
1228
|
-
ui.forceUpdate(
|
|
1250
|
+
ui.forceUpdate("surface");
|
|
1229
1251
|
emit(ui, core.ImageEvent.ERROR, event);
|
|
1230
1252
|
}
|
|
1253
|
+
|
|
1231
1254
|
function emit(ui, type, data) {
|
|
1232
|
-
if (ui.hasEvent(type))
|
|
1233
|
-
ui.emitEvent(new core.ImageEvent(type, data));
|
|
1255
|
+
if (ui.hasEvent(type)) ui.emitEvent(new core.ImageEvent(type, data));
|
|
1234
1256
|
}
|
|
1257
|
+
|
|
1235
1258
|
function ignoreRender(ui, value) {
|
|
1236
|
-
const { leafer
|
|
1237
|
-
if (leafer && leafer.viewReady)
|
|
1238
|
-
leafer.renderer.ignore = value;
|
|
1259
|
+
const {leafer: leafer} = ui;
|
|
1260
|
+
if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
|
|
1239
1261
|
}
|
|
1240
1262
|
|
|
1241
|
-
const {
|
|
1242
|
-
|
|
1263
|
+
const {get: get$1, scale: scale, copy: copy$1} = core.MatrixHelper;
|
|
1264
|
+
|
|
1265
|
+
const {floor: floor, max: max, abs: abs} = Math;
|
|
1266
|
+
|
|
1243
1267
|
function createPattern(ui, paint, pixelRatio) {
|
|
1244
|
-
let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1245
|
-
const id = scaleX +
|
|
1268
|
+
let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1269
|
+
const id = scaleX + "-" + scaleY + "-" + pixelRatio;
|
|
1246
1270
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
1247
|
-
const { image, data } = paint;
|
|
1248
|
-
let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
|
|
1271
|
+
const {image: image, data: data} = paint;
|
|
1272
|
+
let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
|
|
1273
|
+
scaleX *= pixelRatio;
|
|
1274
|
+
scaleY *= pixelRatio;
|
|
1275
|
+
const xGap = gap && gap.x * scaleX;
|
|
1276
|
+
const yGap = gap && gap.y * scaleY;
|
|
1249
1277
|
if (sx) {
|
|
1250
1278
|
sx = abs(sx);
|
|
1251
1279
|
sy = abs(sy);
|
|
@@ -1255,23 +1283,18 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1255
1283
|
scaleX *= sx;
|
|
1256
1284
|
scaleY *= sy;
|
|
1257
1285
|
}
|
|
1258
|
-
scaleX *= pixelRatio;
|
|
1259
|
-
scaleY *= pixelRatio;
|
|
1260
1286
|
width *= scaleX;
|
|
1261
1287
|
height *= scaleY;
|
|
1262
1288
|
const size = width * height;
|
|
1263
1289
|
if (!repeat) {
|
|
1264
|
-
if (size > core.Platform.image.maxCacheSize)
|
|
1265
|
-
return false;
|
|
1290
|
+
if (size > core.Platform.image.maxCacheSize) return false;
|
|
1266
1291
|
}
|
|
1267
1292
|
let maxSize = core.Platform.image.maxPatternSize;
|
|
1268
1293
|
if (!image.isSVG) {
|
|
1269
1294
|
const imageSize = image.width * image.height;
|
|
1270
|
-
if (maxSize > imageSize)
|
|
1271
|
-
maxSize = imageSize;
|
|
1295
|
+
if (maxSize > imageSize) maxSize = imageSize;
|
|
1272
1296
|
}
|
|
1273
|
-
if (size > maxSize)
|
|
1274
|
-
imageScale = Math.sqrt(size / maxSize);
|
|
1297
|
+
if (size > maxSize) imageScale = Math.sqrt(size / maxSize);
|
|
1275
1298
|
if (imageScale) {
|
|
1276
1299
|
scaleX /= imageScale;
|
|
1277
1300
|
scaleY /= imageScale;
|
|
@@ -1285,97 +1308,95 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1285
1308
|
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
1286
1309
|
if (!imageMatrix) {
|
|
1287
1310
|
imageMatrix = get$1();
|
|
1288
|
-
if (transform)
|
|
1289
|
-
copy$1(imageMatrix, transform);
|
|
1311
|
+
if (transform) copy$1(imageMatrix, transform);
|
|
1290
1312
|
}
|
|
1291
1313
|
scale(imageMatrix, 1 / scaleX, 1 / scaleY);
|
|
1292
1314
|
}
|
|
1293
|
-
|
|
1294
|
-
|
|
1315
|
+
if (imageMatrix) {
|
|
1316
|
+
const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0);
|
|
1317
|
+
scale(imageMatrix, canvasWidth / max(floor(canvasWidth), 1), canvasHeight / max(floor(canvasHeight), 1));
|
|
1318
|
+
}
|
|
1319
|
+
const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap);
|
|
1320
|
+
const pattern = image.getPattern(canvas, repeat || (core.Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
|
|
1295
1321
|
paint.style = pattern;
|
|
1296
1322
|
paint.patternId = id;
|
|
1297
1323
|
return true;
|
|
1298
|
-
}
|
|
1299
|
-
else {
|
|
1324
|
+
} else {
|
|
1300
1325
|
return false;
|
|
1301
1326
|
}
|
|
1302
1327
|
}
|
|
1303
1328
|
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
function
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
}
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1329
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
1330
|
+
function adopt(value) {
|
|
1331
|
+
return value instanceof P ? value : new P(function(resolve) {
|
|
1332
|
+
resolve(value);
|
|
1333
|
+
});
|
|
1334
|
+
}
|
|
1335
|
+
return new (P || (P = Promise))(function(resolve, reject) {
|
|
1336
|
+
function fulfilled(value) {
|
|
1337
|
+
try {
|
|
1338
|
+
step(generator.next(value));
|
|
1339
|
+
} catch (e) {
|
|
1340
|
+
reject(e);
|
|
1341
|
+
}
|
|
1342
|
+
}
|
|
1343
|
+
function rejected(value) {
|
|
1344
|
+
try {
|
|
1345
|
+
step(generator["throw"](value));
|
|
1346
|
+
} catch (e) {
|
|
1347
|
+
reject(e);
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
function step(result) {
|
|
1351
|
+
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
1352
|
+
}
|
|
1353
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
1354
|
+
});
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
|
|
1358
|
+
var e = new Error(message);
|
|
1359
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
1334
1360
|
};
|
|
1335
1361
|
|
|
1336
1362
|
function checkImage(ui, canvas, paint, allowDraw) {
|
|
1337
|
-
const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1338
|
-
const { pixelRatio
|
|
1339
|
-
if (!data ||
|
|
1363
|
+
const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1364
|
+
const {pixelRatio: pixelRatio} = canvas, {data: data} = paint;
|
|
1365
|
+
if (!data || paint.patternId === scaleX + "-" + scaleY + "-" + pixelRatio && !draw.Export.running) {
|
|
1340
1366
|
return false;
|
|
1341
|
-
}
|
|
1342
|
-
else {
|
|
1367
|
+
} else {
|
|
1343
1368
|
if (allowDraw) {
|
|
1344
1369
|
if (data.repeat) {
|
|
1345
1370
|
allowDraw = false;
|
|
1346
|
-
}
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
let { width, height } = data;
|
|
1371
|
+
} else {
|
|
1372
|
+
if (!(paint.changeful || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
|
|
1373
|
+
let {width: width, height: height} = data;
|
|
1350
1374
|
width *= scaleX * pixelRatio;
|
|
1351
1375
|
height *= scaleY * pixelRatio;
|
|
1352
1376
|
if (data.scaleX) {
|
|
1353
1377
|
width *= data.scaleX;
|
|
1354
1378
|
height *= data.scaleY;
|
|
1355
1379
|
}
|
|
1356
|
-
allowDraw =
|
|
1380
|
+
allowDraw = width * height > core.Platform.image.maxCacheSize;
|
|
1357
1381
|
}
|
|
1358
1382
|
}
|
|
1359
1383
|
}
|
|
1360
1384
|
if (allowDraw) {
|
|
1361
1385
|
if (ui.__.__isFastShadow) {
|
|
1362
|
-
canvas.fillStyle = paint.style ||
|
|
1386
|
+
canvas.fillStyle = paint.style || "#000";
|
|
1363
1387
|
canvas.fill();
|
|
1364
1388
|
}
|
|
1365
1389
|
drawImage(ui, canvas, paint, data);
|
|
1366
1390
|
return true;
|
|
1367
|
-
}
|
|
1368
|
-
else {
|
|
1391
|
+
} else {
|
|
1369
1392
|
if (!paint.style || paint.sync || draw.Export.running) {
|
|
1370
1393
|
createPattern(ui, paint, pixelRatio);
|
|
1371
|
-
}
|
|
1372
|
-
else {
|
|
1394
|
+
} else {
|
|
1373
1395
|
if (!paint.patternTask) {
|
|
1374
|
-
paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*
|
|
1396
|
+
paint.patternTask = core.ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
|
|
1375
1397
|
paint.patternTask = null;
|
|
1376
|
-
if (canvas.bounds.hit(ui.__nowWorld))
|
|
1377
|
-
|
|
1378
|
-
ui.forceUpdate('surface');
|
|
1398
|
+
if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, pixelRatio);
|
|
1399
|
+
ui.forceUpdate("surface");
|
|
1379
1400
|
}), 300);
|
|
1380
1401
|
}
|
|
1381
1402
|
}
|
|
@@ -1383,39 +1404,35 @@ function checkImage(ui, canvas, paint, allowDraw) {
|
|
|
1383
1404
|
}
|
|
1384
1405
|
}
|
|
1385
1406
|
}
|
|
1407
|
+
|
|
1386
1408
|
function drawImage(ui, canvas, paint, data) {
|
|
1387
1409
|
canvas.save();
|
|
1388
1410
|
canvas.clipUI(ui);
|
|
1389
|
-
if (paint.blendMode)
|
|
1390
|
-
|
|
1391
|
-
if (data.
|
|
1392
|
-
canvas.opacity *= data.opacity;
|
|
1393
|
-
if (data.transform)
|
|
1394
|
-
canvas.transform(data.transform);
|
|
1411
|
+
if (paint.blendMode) canvas.blendMode = paint.blendMode;
|
|
1412
|
+
if (data.opacity) canvas.opacity *= data.opacity;
|
|
1413
|
+
if (data.transform) canvas.transform(data.transform);
|
|
1395
1414
|
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1396
1415
|
canvas.restore();
|
|
1397
1416
|
}
|
|
1398
1417
|
|
|
1399
1418
|
function recycleImage(attrName, data) {
|
|
1400
|
-
const paints = data[
|
|
1401
|
-
if (paints
|
|
1419
|
+
const paints = data["_" + attrName];
|
|
1420
|
+
if (core.isArray(paints)) {
|
|
1402
1421
|
let paint, image, recycleMap, input, url;
|
|
1403
1422
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
1404
1423
|
paint = paints[i];
|
|
1405
1424
|
image = paint.image;
|
|
1406
1425
|
url = image && image.url;
|
|
1407
1426
|
if (url) {
|
|
1408
|
-
if (!recycleMap)
|
|
1409
|
-
recycleMap = {};
|
|
1427
|
+
if (!recycleMap) recycleMap = {};
|
|
1410
1428
|
recycleMap[url] = true;
|
|
1411
1429
|
core.ImageManager.recycle(image);
|
|
1412
1430
|
if (image.loading) {
|
|
1413
1431
|
if (!input) {
|
|
1414
|
-
input =
|
|
1415
|
-
if (!(input
|
|
1416
|
-
input = [input];
|
|
1432
|
+
input = data.__input && data.__input[attrName] || [];
|
|
1433
|
+
if (!core.isArray(input)) input = [ input ];
|
|
1417
1434
|
}
|
|
1418
|
-
image.unload(paints[i].loadId, !input.some(
|
|
1435
|
+
image.unload(paints[i].loadId, !input.some(item => item.url === url));
|
|
1419
1436
|
}
|
|
1420
1437
|
}
|
|
1421
1438
|
}
|
|
@@ -1425,75 +1442,85 @@ function recycleImage(attrName, data) {
|
|
|
1425
1442
|
}
|
|
1426
1443
|
|
|
1427
1444
|
const PaintImageModule = {
|
|
1428
|
-
image,
|
|
1429
|
-
checkImage,
|
|
1430
|
-
createPattern,
|
|
1431
|
-
recycleImage,
|
|
1432
|
-
createData,
|
|
1433
|
-
getPatternData,
|
|
1434
|
-
fillOrFitMode,
|
|
1435
|
-
clipMode,
|
|
1436
|
-
repeatMode
|
|
1445
|
+
image: image,
|
|
1446
|
+
checkImage: checkImage,
|
|
1447
|
+
createPattern: createPattern,
|
|
1448
|
+
recycleImage: recycleImage,
|
|
1449
|
+
createData: createData,
|
|
1450
|
+
getPatternData: getPatternData,
|
|
1451
|
+
fillOrFitMode: fillOrFitMode,
|
|
1452
|
+
clipMode: clipMode,
|
|
1453
|
+
repeatMode: repeatMode
|
|
1437
1454
|
};
|
|
1438
1455
|
|
|
1439
|
-
const {
|
|
1456
|
+
const {toPoint: toPoint$2} = core.AroundHelper, {hasTransparent: hasTransparent} = draw.ColorConvert;
|
|
1457
|
+
|
|
1440
1458
|
const realFrom$2 = {};
|
|
1459
|
+
|
|
1441
1460
|
const realTo$2 = {};
|
|
1461
|
+
|
|
1442
1462
|
function linearGradient(paint, box) {
|
|
1443
|
-
let { from, to, type, opacity } = paint;
|
|
1444
|
-
toPoint$2(from ||
|
|
1445
|
-
toPoint$2(to ||
|
|
1463
|
+
let {from: from, to: to, type: type, opacity: opacity} = paint;
|
|
1464
|
+
toPoint$2(from || "top", box, realFrom$2);
|
|
1465
|
+
toPoint$2(to || "bottom", box, realTo$2);
|
|
1446
1466
|
const style = core.Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
|
|
1447
|
-
const data = {
|
|
1467
|
+
const data = {
|
|
1468
|
+
type: type,
|
|
1469
|
+
style: style
|
|
1470
|
+
};
|
|
1448
1471
|
applyStops(data, style, paint.stops, opacity);
|
|
1449
1472
|
return data;
|
|
1450
1473
|
}
|
|
1474
|
+
|
|
1451
1475
|
function applyStops(data, gradient, stops, opacity) {
|
|
1452
1476
|
if (stops) {
|
|
1453
1477
|
let stop, color, offset, isTransparent;
|
|
1454
1478
|
for (let i = 0, len = stops.length; i < len; i++) {
|
|
1455
1479
|
stop = stops[i];
|
|
1456
|
-
if (
|
|
1457
|
-
|
|
1458
|
-
else
|
|
1459
|
-
offset = stop.offset, color = draw.ColorConvert.string(stop.color, opacity);
|
|
1480
|
+
if (core.isString(stop)) offset = i / (len - 1), color = draw.ColorConvert.string(stop, opacity); else offset = stop.offset,
|
|
1481
|
+
color = draw.ColorConvert.string(stop.color, opacity);
|
|
1460
1482
|
gradient.addColorStop(offset, color);
|
|
1461
|
-
if (!isTransparent && hasTransparent(color))
|
|
1462
|
-
isTransparent = true;
|
|
1483
|
+
if (!isTransparent && hasTransparent(color)) isTransparent = true;
|
|
1463
1484
|
}
|
|
1464
|
-
if (isTransparent)
|
|
1465
|
-
data.isTransparent = true;
|
|
1485
|
+
if (isTransparent) data.isTransparent = true;
|
|
1466
1486
|
}
|
|
1467
1487
|
}
|
|
1468
1488
|
|
|
1469
|
-
const { getAngle, getDistance: getDistance$1
|
|
1470
|
-
|
|
1471
|
-
const {
|
|
1489
|
+
const {getAngle: getAngle, getDistance: getDistance$1} = core.PointHelper;
|
|
1490
|
+
|
|
1491
|
+
const {get: get, rotateOfOuter: rotateOfOuter, scaleOfOuter: scaleOfOuter} = core.MatrixHelper;
|
|
1492
|
+
|
|
1493
|
+
const {toPoint: toPoint$1} = core.AroundHelper;
|
|
1494
|
+
|
|
1472
1495
|
const realFrom$1 = {};
|
|
1496
|
+
|
|
1473
1497
|
const realTo$1 = {};
|
|
1498
|
+
|
|
1474
1499
|
function radialGradient(paint, box) {
|
|
1475
|
-
let { from, to, type, opacity, stretch } = paint;
|
|
1476
|
-
toPoint$1(from ||
|
|
1477
|
-
toPoint$1(to ||
|
|
1500
|
+
let {from: from, to: to, type: type, opacity: opacity, stretch: stretch} = paint;
|
|
1501
|
+
toPoint$1(from || "center", box, realFrom$1);
|
|
1502
|
+
toPoint$1(to || "bottom", box, realTo$1);
|
|
1478
1503
|
const style = core.Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
|
|
1479
|
-
const data = {
|
|
1504
|
+
const data = {
|
|
1505
|
+
type: type,
|
|
1506
|
+
style: style
|
|
1507
|
+
};
|
|
1480
1508
|
applyStops(data, style, paint.stops, opacity);
|
|
1481
1509
|
const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
|
|
1482
|
-
if (transform)
|
|
1483
|
-
data.transform = transform;
|
|
1510
|
+
if (transform) data.transform = transform;
|
|
1484
1511
|
return data;
|
|
1485
1512
|
}
|
|
1513
|
+
|
|
1486
1514
|
function getTransform(box, from, to, stretch, rotate90) {
|
|
1487
1515
|
let transform;
|
|
1488
|
-
const { width, height } = box;
|
|
1516
|
+
const {width: width, height: height} = box;
|
|
1489
1517
|
if (width !== height || stretch) {
|
|
1490
1518
|
const angle = getAngle(from, to);
|
|
1491
1519
|
transform = get();
|
|
1492
1520
|
if (rotate90) {
|
|
1493
1521
|
scaleOfOuter(transform, from, width / height * (stretch || 1), 1);
|
|
1494
1522
|
rotateOfOuter(transform, from, angle + 90);
|
|
1495
|
-
}
|
|
1496
|
-
else {
|
|
1523
|
+
} else {
|
|
1497
1524
|
scaleOfOuter(transform, from, 1, width / height * (stretch || 1));
|
|
1498
1525
|
rotateOfOuter(transform, from, angle);
|
|
1499
1526
|
}
|
|
@@ -1501,81 +1528,94 @@ function getTransform(box, from, to, stretch, rotate90) {
|
|
|
1501
1528
|
return transform;
|
|
1502
1529
|
}
|
|
1503
1530
|
|
|
1504
|
-
const { getDistance
|
|
1505
|
-
|
|
1531
|
+
const {getDistance: getDistance} = core.PointHelper;
|
|
1532
|
+
|
|
1533
|
+
const {toPoint: toPoint} = core.AroundHelper;
|
|
1534
|
+
|
|
1506
1535
|
const realFrom = {};
|
|
1536
|
+
|
|
1507
1537
|
const realTo = {};
|
|
1538
|
+
|
|
1508
1539
|
function conicGradient(paint, box) {
|
|
1509
|
-
let { from, to, type, opacity, stretch } = paint;
|
|
1510
|
-
toPoint(from ||
|
|
1511
|
-
toPoint(to ||
|
|
1540
|
+
let {from: from, to: to, type: type, opacity: opacity, stretch: stretch} = paint;
|
|
1541
|
+
toPoint(from || "center", box, realFrom);
|
|
1542
|
+
toPoint(to || "bottom", box, realTo);
|
|
1512
1543
|
const style = core.Platform.conicGradientSupport ? core.Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : core.Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
|
|
1513
|
-
const data = {
|
|
1544
|
+
const data = {
|
|
1545
|
+
type: type,
|
|
1546
|
+
style: style
|
|
1547
|
+
};
|
|
1514
1548
|
applyStops(data, style, paint.stops, opacity);
|
|
1515
1549
|
const transform = getTransform(box, realFrom, realTo, stretch || 1, core.Platform.conicGradientRotate90);
|
|
1516
|
-
if (transform)
|
|
1517
|
-
data.transform = transform;
|
|
1550
|
+
if (transform) data.transform = transform;
|
|
1518
1551
|
return data;
|
|
1519
1552
|
}
|
|
1520
1553
|
|
|
1521
1554
|
const PaintGradientModule = {
|
|
1522
|
-
linearGradient,
|
|
1523
|
-
radialGradient,
|
|
1524
|
-
conicGradient,
|
|
1525
|
-
getTransform
|
|
1555
|
+
linearGradient: linearGradient,
|
|
1556
|
+
radialGradient: radialGradient,
|
|
1557
|
+
conicGradient: conicGradient,
|
|
1558
|
+
getTransform: getTransform
|
|
1526
1559
|
};
|
|
1527
1560
|
|
|
1528
|
-
const { copy, toOffsetOutBounds: toOffsetOutBounds$1
|
|
1561
|
+
const {copy: copy, toOffsetOutBounds: toOffsetOutBounds$1} = core.BoundsHelper;
|
|
1562
|
+
|
|
1529
1563
|
const tempBounds = {};
|
|
1564
|
+
|
|
1530
1565
|
const offsetOutBounds$1 = {};
|
|
1566
|
+
|
|
1531
1567
|
function shadow(ui, current, shape) {
|
|
1532
1568
|
let copyBounds, spreadScale;
|
|
1533
|
-
const {
|
|
1534
|
-
const { shadow
|
|
1535
|
-
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1569
|
+
const {__nowWorld: nowWorld, __layout: __layout} = ui;
|
|
1570
|
+
const {shadow: shadow} = ui.__;
|
|
1571
|
+
const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
|
|
1536
1572
|
const other = current.getSameCanvas();
|
|
1537
1573
|
const end = shadow.length - 1;
|
|
1538
1574
|
toOffsetOutBounds$1(bounds, offsetOutBounds$1);
|
|
1539
1575
|
shadow.forEach((item, index) => {
|
|
1540
|
-
|
|
1541
|
-
|
|
1576
|
+
let otherScale = 1;
|
|
1577
|
+
if (item.scaleFixed) {
|
|
1578
|
+
const sx = Math.abs(nowWorld.scaleX);
|
|
1579
|
+
if (sx > 1) otherScale = 1 / sx;
|
|
1580
|
+
}
|
|
1581
|
+
other.setWorldShadow(offsetOutBounds$1.offsetX + item.x * scaleX * otherScale, offsetOutBounds$1.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale, draw.ColorConvert.string(item.color));
|
|
1582
|
+
spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
|
|
1542
1583
|
drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
|
|
1543
1584
|
copyBounds = bounds;
|
|
1544
1585
|
if (item.box) {
|
|
1545
1586
|
other.restore();
|
|
1546
1587
|
other.save();
|
|
1547
1588
|
if (worldCanvas) {
|
|
1548
|
-
other.copyWorld(other, bounds, nowWorld,
|
|
1589
|
+
other.copyWorld(other, bounds, nowWorld, "copy");
|
|
1549
1590
|
copyBounds = nowWorld;
|
|
1550
1591
|
}
|
|
1551
|
-
worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld,
|
|
1592
|
+
worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
|
|
1552
1593
|
}
|
|
1553
1594
|
core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
|
|
1554
|
-
if (end && index < end)
|
|
1555
|
-
other.clearWorld(copyBounds, true);
|
|
1595
|
+
if (end && index < end) other.clearWorld(copyBounds, true);
|
|
1556
1596
|
});
|
|
1557
1597
|
other.recycle(copyBounds);
|
|
1558
1598
|
}
|
|
1599
|
+
|
|
1559
1600
|
function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
|
|
1560
|
-
const { bounds, shapeBounds } = shape;
|
|
1601
|
+
const {bounds: bounds, shapeBounds: shapeBounds} = shape;
|
|
1561
1602
|
if (core.Platform.fullImageShadow) {
|
|
1562
1603
|
copy(tempBounds, canvas.bounds);
|
|
1563
|
-
tempBounds.x +=
|
|
1564
|
-
tempBounds.y +=
|
|
1604
|
+
tempBounds.x += outBounds.x - shapeBounds.x;
|
|
1605
|
+
tempBounds.y += outBounds.y - shapeBounds.y;
|
|
1565
1606
|
if (spreadScale) {
|
|
1566
|
-
const {
|
|
1567
|
-
tempBounds.x -= (bounds.x + (
|
|
1568
|
-
tempBounds.y -= (bounds.y + (
|
|
1607
|
+
const {fitMatrix: fitMatrix} = shape;
|
|
1608
|
+
tempBounds.x -= (bounds.x + (fitMatrix ? fitMatrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
|
|
1609
|
+
tempBounds.y -= (bounds.y + (fitMatrix ? fitMatrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
|
|
1569
1610
|
tempBounds.width *= spreadScale;
|
|
1570
1611
|
tempBounds.height *= spreadScale;
|
|
1571
1612
|
}
|
|
1572
1613
|
canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
|
|
1573
|
-
}
|
|
1574
|
-
else {
|
|
1614
|
+
} else {
|
|
1575
1615
|
if (spreadScale) {
|
|
1576
1616
|
copy(tempBounds, outBounds);
|
|
1577
|
-
tempBounds.x -=
|
|
1578
|
-
tempBounds.y -=
|
|
1617
|
+
tempBounds.x -= outBounds.width / 2 * (spreadScale - 1);
|
|
1618
|
+
tempBounds.y -= outBounds.height / 2 * (spreadScale - 1);
|
|
1579
1619
|
tempBounds.width *= spreadScale;
|
|
1580
1620
|
tempBounds.height *= spreadScale;
|
|
1581
1621
|
}
|
|
@@ -1583,174 +1623,184 @@ function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
|
|
|
1583
1623
|
}
|
|
1584
1624
|
}
|
|
1585
1625
|
|
|
1586
|
-
const { toOffsetOutBounds
|
|
1626
|
+
const {toOffsetOutBounds: toOffsetOutBounds} = core.BoundsHelper;
|
|
1627
|
+
|
|
1587
1628
|
const offsetOutBounds = {};
|
|
1629
|
+
|
|
1588
1630
|
function innerShadow(ui, current, shape) {
|
|
1589
1631
|
let copyBounds, spreadScale;
|
|
1590
|
-
const {
|
|
1591
|
-
const { innerShadow
|
|
1592
|
-
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1632
|
+
const {__nowWorld: nowWorld, __layout: __layout} = ui;
|
|
1633
|
+
const {innerShadow: innerShadow} = ui.__;
|
|
1634
|
+
const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
|
|
1593
1635
|
const other = current.getSameCanvas();
|
|
1594
1636
|
const end = innerShadow.length - 1;
|
|
1595
1637
|
toOffsetOutBounds(bounds, offsetOutBounds);
|
|
1596
1638
|
innerShadow.forEach((item, index) => {
|
|
1639
|
+
let otherScale = 1;
|
|
1640
|
+
if (item.scaleFixed) {
|
|
1641
|
+
const sx = Math.abs(nowWorld.scaleX);
|
|
1642
|
+
if (sx > 1) otherScale = 1 / sx;
|
|
1643
|
+
}
|
|
1597
1644
|
other.save();
|
|
1598
|
-
other.setWorldShadow(
|
|
1599
|
-
spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
|
|
1645
|
+
other.setWorldShadow(offsetOutBounds.offsetX + item.x * scaleX * otherScale, offsetOutBounds.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale);
|
|
1646
|
+
spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
|
|
1600
1647
|
drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
|
|
1601
1648
|
other.restore();
|
|
1602
1649
|
if (worldCanvas) {
|
|
1603
|
-
other.copyWorld(other, bounds, nowWorld,
|
|
1604
|
-
other.copyWorld(worldCanvas, nowWorld, nowWorld,
|
|
1650
|
+
other.copyWorld(other, bounds, nowWorld, "copy");
|
|
1651
|
+
other.copyWorld(worldCanvas, nowWorld, nowWorld, "source-out");
|
|
1605
1652
|
copyBounds = nowWorld;
|
|
1606
|
-
}
|
|
1607
|
-
|
|
1608
|
-
other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
|
|
1653
|
+
} else {
|
|
1654
|
+
other.copyWorld(shape.canvas, shapeBounds, bounds, "source-out");
|
|
1609
1655
|
copyBounds = bounds;
|
|
1610
1656
|
}
|
|
1611
|
-
other.fillWorld(copyBounds, draw.ColorConvert.string(item.color),
|
|
1657
|
+
other.fillWorld(copyBounds, draw.ColorConvert.string(item.color), "source-in");
|
|
1612
1658
|
core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
|
|
1613
|
-
if (end && index < end)
|
|
1614
|
-
other.clearWorld(copyBounds, true);
|
|
1659
|
+
if (end && index < end) other.clearWorld(copyBounds, true);
|
|
1615
1660
|
});
|
|
1616
1661
|
other.recycle(copyBounds);
|
|
1617
1662
|
}
|
|
1618
1663
|
|
|
1619
1664
|
function blur(ui, current, origin) {
|
|
1620
|
-
const { blur
|
|
1665
|
+
const {blur: blur} = ui.__;
|
|
1621
1666
|
origin.setWorldBlur(blur * ui.__nowWorld.a);
|
|
1622
1667
|
origin.copyWorldToInner(current, ui.__nowWorld, ui.__layout.renderBounds);
|
|
1623
|
-
origin.filter =
|
|
1668
|
+
origin.filter = "none";
|
|
1624
1669
|
}
|
|
1625
1670
|
|
|
1626
|
-
function backgroundBlur(_ui, _current, _shape) {
|
|
1627
|
-
}
|
|
1671
|
+
function backgroundBlur(_ui, _current, _shape) {}
|
|
1628
1672
|
|
|
1629
1673
|
const EffectModule = {
|
|
1630
|
-
shadow,
|
|
1631
|
-
innerShadow,
|
|
1632
|
-
blur,
|
|
1633
|
-
backgroundBlur
|
|
1674
|
+
shadow: shadow,
|
|
1675
|
+
innerShadow: innerShadow,
|
|
1676
|
+
blur: blur,
|
|
1677
|
+
backgroundBlur: backgroundBlur
|
|
1634
1678
|
};
|
|
1635
1679
|
|
|
1636
|
-
const { excludeRenderBounds
|
|
1637
|
-
|
|
1680
|
+
const {excludeRenderBounds: excludeRenderBounds} = core.LeafBoundsHelper;
|
|
1681
|
+
|
|
1682
|
+
let usedGrayscaleAlpha;
|
|
1683
|
+
|
|
1684
|
+
draw.Group.prototype.__renderMask = function(canvas, options) {
|
|
1638
1685
|
let child, maskCanvas, contentCanvas, maskOpacity, currentMask, mask;
|
|
1639
|
-
const { children
|
|
1686
|
+
const {children: children} = this;
|
|
1640
1687
|
for (let i = 0, len = children.length; i < len; i++) {
|
|
1641
1688
|
child = children[i], mask = child.__.mask;
|
|
1642
1689
|
if (mask) {
|
|
1643
1690
|
if (currentMask) {
|
|
1644
|
-
maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
|
|
1691
|
+
maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, true);
|
|
1645
1692
|
maskCanvas = contentCanvas = null;
|
|
1646
1693
|
}
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
}
|
|
1654
|
-
|
|
1655
|
-
currentMask = 'path';
|
|
1694
|
+
maskOpacity = child.__.opacity;
|
|
1695
|
+
usedGrayscaleAlpha = false;
|
|
1696
|
+
if (mask === "path" || mask === "clipping-path") {
|
|
1697
|
+
if (maskOpacity < 1) {
|
|
1698
|
+
currentMask = "opacity-path";
|
|
1699
|
+
if (!contentCanvas) contentCanvas = getCanvas(canvas);
|
|
1700
|
+
} else {
|
|
1701
|
+
currentMask = "path";
|
|
1656
1702
|
canvas.save();
|
|
1657
1703
|
}
|
|
1658
1704
|
child.__clip(contentCanvas || canvas, options);
|
|
1659
|
-
}
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
if (!
|
|
1663
|
-
maskCanvas = getCanvas(canvas);
|
|
1664
|
-
if (!contentCanvas)
|
|
1665
|
-
contentCanvas = getCanvas(canvas);
|
|
1705
|
+
} else {
|
|
1706
|
+
currentMask = mask === "grayscale" ? "grayscale" : "alpha";
|
|
1707
|
+
if (!maskCanvas) maskCanvas = getCanvas(canvas);
|
|
1708
|
+
if (!contentCanvas) contentCanvas = getCanvas(canvas);
|
|
1666
1709
|
child.__render(maskCanvas, options);
|
|
1667
1710
|
}
|
|
1668
|
-
if (mask ===
|
|
1669
|
-
excludeRenderBounds(child, options) || child.__render(canvas, options);
|
|
1711
|
+
if (mask === "clipping" || mask === "clipping-path") excludeRenderBounds(child, options) || child.__render(canvas, options);
|
|
1670
1712
|
continue;
|
|
1671
1713
|
}
|
|
1714
|
+
const childBlendMode = maskOpacity === 1 && child.__.__blendMode;
|
|
1715
|
+
if (childBlendMode) maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, false);
|
|
1672
1716
|
excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
|
|
1717
|
+
if (childBlendMode) maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, childBlendMode, false);
|
|
1673
1718
|
}
|
|
1674
|
-
maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
|
|
1719
|
+
maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, true);
|
|
1675
1720
|
};
|
|
1676
|
-
|
|
1721
|
+
|
|
1722
|
+
function maskEnd(leaf, maskMode, canvas, contentCanvas, maskCanvas, maskOpacity, blendMode, recycle) {
|
|
1677
1723
|
switch (maskMode) {
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1724
|
+
case "grayscale":
|
|
1725
|
+
if (!usedGrayscaleAlpha) usedGrayscaleAlpha = true, maskCanvas.useGrayscaleAlpha(leaf.__nowWorld);
|
|
1726
|
+
|
|
1727
|
+
case "alpha":
|
|
1728
|
+
usePixelMask(leaf, canvas, contentCanvas, maskCanvas, blendMode, recycle);
|
|
1729
|
+
break;
|
|
1730
|
+
|
|
1731
|
+
case "opacity-path":
|
|
1732
|
+
copyContent(leaf, canvas, contentCanvas, maskOpacity, blendMode, recycle);
|
|
1733
|
+
break;
|
|
1734
|
+
|
|
1735
|
+
case "path":
|
|
1736
|
+
if (recycle) canvas.restore();
|
|
1688
1737
|
}
|
|
1689
1738
|
}
|
|
1739
|
+
|
|
1690
1740
|
function getCanvas(canvas) {
|
|
1691
1741
|
return canvas.getSameCanvas(false, true);
|
|
1692
1742
|
}
|
|
1693
|
-
|
|
1743
|
+
|
|
1744
|
+
function usePixelMask(leaf, canvas, content, mask, blendMode, recycle) {
|
|
1694
1745
|
const realBounds = leaf.__nowWorld;
|
|
1695
1746
|
content.resetTransform();
|
|
1696
1747
|
content.opacity = 1;
|
|
1697
1748
|
content.useMask(mask, realBounds);
|
|
1698
|
-
mask.recycle(realBounds);
|
|
1699
|
-
copyContent(leaf, canvas, content, 1);
|
|
1749
|
+
if (recycle) mask.recycle(realBounds);
|
|
1750
|
+
copyContent(leaf, canvas, content, 1, blendMode, recycle);
|
|
1700
1751
|
}
|
|
1701
|
-
|
|
1752
|
+
|
|
1753
|
+
function copyContent(leaf, canvas, content, maskOpacity, blendMode, recycle) {
|
|
1702
1754
|
const realBounds = leaf.__nowWorld;
|
|
1703
1755
|
canvas.resetTransform();
|
|
1704
1756
|
canvas.opacity = maskOpacity;
|
|
1705
|
-
canvas.copyWorld(content, realBounds);
|
|
1706
|
-
content.recycle(realBounds);
|
|
1707
|
-
}
|
|
1708
|
-
|
|
1709
|
-
const money =
|
|
1710
|
-
|
|
1711
|
-
const
|
|
1712
|
-
|
|
1713
|
-
const
|
|
1714
|
-
|
|
1715
|
-
const
|
|
1716
|
-
|
|
1717
|
-
const
|
|
1718
|
-
|
|
1719
|
-
const
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
[0x31C0, 0x31EF],
|
|
1734
|
-
[0x3200, 0x32FF],
|
|
1735
|
-
[0x3300, 0x33FF],
|
|
1736
|
-
[0xF900, 0xFAFF],
|
|
1737
|
-
[0xFE30, 0xFE4F],
|
|
1738
|
-
[0x1F200, 0x1F2FF],
|
|
1739
|
-
[0x2F800, 0x2FA1F],
|
|
1740
|
-
];
|
|
1741
|
-
const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join('|'));
|
|
1757
|
+
canvas.copyWorld(content, realBounds, undefined, blendMode);
|
|
1758
|
+
recycle ? content.recycle(realBounds) : content.clearWorld(realBounds, true);
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
const money = "¥￥＄€£￡¢￠";
|
|
1762
|
+
|
|
1763
|
+
const letter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
|
|
1764
|
+
|
|
1765
|
+
const langBefore = "《（「〈『〖【〔｛┌＜‘“＝" + money;
|
|
1766
|
+
|
|
1767
|
+
const langAfter = "》）」〉』〗】〕｝┐＞’”！？，、。：；‰";
|
|
1768
|
+
|
|
1769
|
+
const langSymbol = "≮≯≈≠＝…";
|
|
1770
|
+
|
|
1771
|
+
const langBreak$1 = "—／～｜┆·";
|
|
1772
|
+
|
|
1773
|
+
const beforeChar = "{[(<'\"" + langBefore;
|
|
1774
|
+
|
|
1775
|
+
const afterChar = ">)]}%!?,.:;'\"" + langAfter;
|
|
1776
|
+
|
|
1777
|
+
const symbolChar = afterChar + "_#~&*+\\=|" + langSymbol;
|
|
1778
|
+
|
|
1779
|
+
const breakChar = "- " + langBreak$1;
|
|
1780
|
+
|
|
1781
|
+
const cjkRangeList = [ [ 19968, 40959 ], [ 13312, 19903 ], [ 131072, 173791 ], [ 173824, 177983 ], [ 177984, 178207 ], [ 178208, 183983 ], [ 183984, 191471 ], [ 196608, 201551 ], [ 201552, 205743 ], [ 11904, 12031 ], [ 12032, 12255 ], [ 12272, 12287 ], [ 12288, 12351 ], [ 12736, 12783 ], [ 12800, 13055 ], [ 13056, 13311 ], [ 63744, 64255 ], [ 65072, 65103 ], [ 127488, 127743 ], [ 194560, 195103 ] ];
|
|
1782
|
+
|
|
1783
|
+
const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join("|"));
|
|
1784
|
+
|
|
1742
1785
|
function mapChar(str) {
|
|
1743
1786
|
const map = {};
|
|
1744
|
-
str.split(
|
|
1787
|
+
str.split("").forEach(char => map[char] = true);
|
|
1745
1788
|
return map;
|
|
1746
1789
|
}
|
|
1790
|
+
|
|
1747
1791
|
const letterMap = mapChar(letter);
|
|
1792
|
+
|
|
1748
1793
|
const beforeMap = mapChar(beforeChar);
|
|
1794
|
+
|
|
1749
1795
|
const afterMap = mapChar(afterChar);
|
|
1796
|
+
|
|
1750
1797
|
const symbolMap = mapChar(symbolChar);
|
|
1798
|
+
|
|
1751
1799
|
const breakMap = mapChar(breakChar);
|
|
1800
|
+
|
|
1752
1801
|
var CharType;
|
|
1753
|
-
|
|
1802
|
+
|
|
1803
|
+
(function(CharType) {
|
|
1754
1804
|
CharType[CharType["Letter"] = 0] = "Letter";
|
|
1755
1805
|
CharType[CharType["Single"] = 1] = "Single";
|
|
1756
1806
|
CharType[CharType["Before"] = 2] = "Before";
|
|
@@ -1758,179 +1808,175 @@ var CharType;
|
|
|
1758
1808
|
CharType[CharType["Symbol"] = 4] = "Symbol";
|
|
1759
1809
|
CharType[CharType["Break"] = 5] = "Break";
|
|
1760
1810
|
})(CharType || (CharType = {}));
|
|
1761
|
-
|
|
1811
|
+
|
|
1812
|
+
const {Letter: Letter$1, Single: Single$1, Before: Before$1, After: After$1, Symbol: Symbol$1, Break: Break$1} = CharType;
|
|
1813
|
+
|
|
1762
1814
|
function getCharType(char) {
|
|
1763
1815
|
if (letterMap[char]) {
|
|
1764
1816
|
return Letter$1;
|
|
1765
|
-
}
|
|
1766
|
-
else if (breakMap[char]) {
|
|
1817
|
+
} else if (breakMap[char]) {
|
|
1767
1818
|
return Break$1;
|
|
1768
|
-
}
|
|
1769
|
-
else if (beforeMap[char]) {
|
|
1819
|
+
} else if (beforeMap[char]) {
|
|
1770
1820
|
return Before$1;
|
|
1771
|
-
}
|
|
1772
|
-
else if (afterMap[char]) {
|
|
1821
|
+
} else if (afterMap[char]) {
|
|
1773
1822
|
return After$1;
|
|
1774
|
-
}
|
|
1775
|
-
else if (symbolMap[char]) {
|
|
1823
|
+
} else if (symbolMap[char]) {
|
|
1776
1824
|
return Symbol$1;
|
|
1777
|
-
}
|
|
1778
|
-
else if (cjkReg.test(char)) {
|
|
1825
|
+
} else if (cjkReg.test(char)) {
|
|
1779
1826
|
return Single$1;
|
|
1780
|
-
}
|
|
1781
|
-
else {
|
|
1827
|
+
} else {
|
|
1782
1828
|
return Letter$1;
|
|
1783
1829
|
}
|
|
1784
1830
|
}
|
|
1785
1831
|
|
|
1786
1832
|
const TextRowHelper = {
|
|
1787
1833
|
trimRight(row) {
|
|
1788
|
-
const { words
|
|
1834
|
+
const {words: words} = row;
|
|
1789
1835
|
let trimRight = 0, len = words.length, char;
|
|
1790
1836
|
for (let i = len - 1; i > -1; i--) {
|
|
1791
1837
|
char = words[i].data[0];
|
|
1792
|
-
if (char.char ===
|
|
1838
|
+
if (char.char === " ") {
|
|
1793
1839
|
trimRight++;
|
|
1794
1840
|
row.width -= char.width;
|
|
1795
|
-
}
|
|
1796
|
-
else {
|
|
1841
|
+
} else {
|
|
1797
1842
|
break;
|
|
1798
1843
|
}
|
|
1799
1844
|
}
|
|
1800
|
-
if (trimRight)
|
|
1801
|
-
words.splice(len - trimRight, trimRight);
|
|
1845
|
+
if (trimRight) words.splice(len - trimRight, trimRight);
|
|
1802
1846
|
}
|
|
1803
1847
|
};
|
|
1804
1848
|
|
|
1805
1849
|
function getTextCase(char, textCase, firstChar) {
|
|
1806
1850
|
switch (textCase) {
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1851
|
+
case "title":
|
|
1852
|
+
return firstChar ? char.toUpperCase() : char;
|
|
1853
|
+
|
|
1854
|
+
case "upper":
|
|
1855
|
+
return char.toUpperCase();
|
|
1856
|
+
|
|
1857
|
+
case "lower":
|
|
1858
|
+
return char.toLowerCase();
|
|
1859
|
+
|
|
1860
|
+
default:
|
|
1861
|
+
return char;
|
|
1815
1862
|
}
|
|
1816
1863
|
}
|
|
1817
1864
|
|
|
1818
|
-
const { trimRight
|
|
1819
|
-
|
|
1865
|
+
const {trimRight: trimRight} = TextRowHelper;
|
|
1866
|
+
|
|
1867
|
+
const {Letter: Letter, Single: Single, Before: Before, After: After, Symbol: Symbol, Break: Break} = CharType;
|
|
1868
|
+
|
|
1820
1869
|
let word, row, wordWidth, rowWidth, realWidth;
|
|
1870
|
+
|
|
1821
1871
|
let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
|
|
1872
|
+
|
|
1822
1873
|
let textDrawData, rows = [], bounds, findMaxWidth;
|
|
1874
|
+
|
|
1823
1875
|
function createRows(drawData, content, style) {
|
|
1824
1876
|
textDrawData = drawData;
|
|
1825
1877
|
rows = drawData.rows;
|
|
1826
1878
|
bounds = drawData.bounds;
|
|
1827
1879
|
findMaxWidth = !bounds.width && !style.autoSizeAlign;
|
|
1828
|
-
const { __letterSpacing, paraIndent, textCase } = style;
|
|
1829
|
-
const { canvas
|
|
1830
|
-
const { width, height } = bounds;
|
|
1831
|
-
const charMode = width || height || __letterSpacing ||
|
|
1880
|
+
const {__letterSpacing: __letterSpacing, paraIndent: paraIndent, textCase: textCase} = style;
|
|
1881
|
+
const {canvas: canvas} = core.Platform;
|
|
1882
|
+
const {width: width, height: height} = bounds;
|
|
1883
|
+
const charMode = width || height || __letterSpacing || textCase !== "none";
|
|
1832
1884
|
if (charMode) {
|
|
1833
|
-
const wrap = style.textWrap !==
|
|
1834
|
-
const breakAll = style.textWrap ===
|
|
1885
|
+
const wrap = style.textWrap !== "none";
|
|
1886
|
+
const breakAll = style.textWrap === "break";
|
|
1835
1887
|
paraStart = true;
|
|
1836
1888
|
lastCharType = null;
|
|
1837
1889
|
startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
|
|
1838
|
-
word = {
|
|
1839
|
-
|
|
1840
|
-
|
|
1890
|
+
word = {
|
|
1891
|
+
data: []
|
|
1892
|
+
}, row = {
|
|
1893
|
+
words: []
|
|
1894
|
+
};
|
|
1895
|
+
if (__letterSpacing) content = [ ...content ];
|
|
1841
1896
|
for (let i = 0, len = content.length; i < len; i++) {
|
|
1842
1897
|
char = content[i];
|
|
1843
|
-
if (char ===
|
|
1844
|
-
if (wordWidth)
|
|
1845
|
-
addWord();
|
|
1898
|
+
if (char === "\n") {
|
|
1899
|
+
if (wordWidth) addWord();
|
|
1846
1900
|
row.paraEnd = true;
|
|
1847
1901
|
addRow();
|
|
1848
1902
|
paraStart = true;
|
|
1849
|
-
}
|
|
1850
|
-
else {
|
|
1903
|
+
} else {
|
|
1851
1904
|
charType = getCharType(char);
|
|
1852
|
-
if (charType === Letter && textCase !==
|
|
1853
|
-
char = getTextCase(char, textCase, !wordWidth);
|
|
1905
|
+
if (charType === Letter && textCase !== "none") char = getTextCase(char, textCase, !wordWidth);
|
|
1854
1906
|
charWidth = canvas.measureText(char).width;
|
|
1855
1907
|
if (__letterSpacing) {
|
|
1856
|
-
if (__letterSpacing < 0)
|
|
1857
|
-
charSize = charWidth;
|
|
1908
|
+
if (__letterSpacing < 0) charSize = charWidth;
|
|
1858
1909
|
charWidth += __letterSpacing;
|
|
1859
1910
|
}
|
|
1860
|
-
langBreak =
|
|
1861
|
-
afterBreak = (
|
|
1911
|
+
langBreak = charType === Single && (lastCharType === Single || lastCharType === Letter) || lastCharType === Single && charType !== After;
|
|
1912
|
+
afterBreak = (charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After);
|
|
1862
1913
|
realWidth = paraStart && paraIndent ? width - paraIndent : width;
|
|
1863
1914
|
if (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) {
|
|
1864
1915
|
if (breakAll) {
|
|
1865
|
-
if (wordWidth)
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
if (wordWidth)
|
|
1875
|
-
addWord();
|
|
1876
|
-
if (rowWidth)
|
|
1877
|
-
addRow();
|
|
1878
|
-
}
|
|
1879
|
-
else {
|
|
1880
|
-
if (rowWidth)
|
|
1881
|
-
addRow();
|
|
1916
|
+
if (wordWidth) addWord();
|
|
1917
|
+
if (rowWidth) addRow();
|
|
1918
|
+
} else {
|
|
1919
|
+
if (!afterBreak) afterBreak = charType === Letter && lastCharType == After;
|
|
1920
|
+
if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || wordWidth + charWidth > realWidth) {
|
|
1921
|
+
if (wordWidth) addWord();
|
|
1922
|
+
if (rowWidth) addRow();
|
|
1923
|
+
} else {
|
|
1924
|
+
if (rowWidth) addRow();
|
|
1882
1925
|
}
|
|
1883
1926
|
}
|
|
1884
1927
|
}
|
|
1885
|
-
if (char ===
|
|
1886
|
-
else {
|
|
1928
|
+
if (char === " " && paraStart !== true && rowWidth + wordWidth === 0) ; else {
|
|
1887
1929
|
if (charType === Break) {
|
|
1888
|
-
if (char ===
|
|
1889
|
-
addWord();
|
|
1930
|
+
if (char === " " && wordWidth) addWord();
|
|
1890
1931
|
addChar(char, charWidth);
|
|
1891
1932
|
addWord();
|
|
1892
|
-
}
|
|
1893
|
-
|
|
1894
|
-
if (wordWidth)
|
|
1895
|
-
addWord();
|
|
1933
|
+
} else if (langBreak || afterBreak) {
|
|
1934
|
+
if (wordWidth) addWord();
|
|
1896
1935
|
addChar(char, charWidth);
|
|
1897
|
-
}
|
|
1898
|
-
else {
|
|
1936
|
+
} else {
|
|
1899
1937
|
addChar(char, charWidth);
|
|
1900
1938
|
}
|
|
1901
1939
|
}
|
|
1902
1940
|
lastCharType = charType;
|
|
1903
1941
|
}
|
|
1904
1942
|
}
|
|
1905
|
-
if (wordWidth)
|
|
1906
|
-
|
|
1907
|
-
if (rowWidth)
|
|
1908
|
-
addRow();
|
|
1943
|
+
if (wordWidth) addWord();
|
|
1944
|
+
if (rowWidth) addRow();
|
|
1909
1945
|
rows.length > 0 && (rows[rows.length - 1].paraEnd = true);
|
|
1910
|
-
}
|
|
1911
|
-
|
|
1912
|
-
content.split('\n').forEach(content => {
|
|
1946
|
+
} else {
|
|
1947
|
+
content.split("\n").forEach(content => {
|
|
1913
1948
|
textDrawData.paraNumber++;
|
|
1914
1949
|
rowWidth = canvas.measureText(content).width;
|
|
1915
|
-
rows.push({
|
|
1916
|
-
|
|
1917
|
-
|
|
1950
|
+
rows.push({
|
|
1951
|
+
x: paraIndent || 0,
|
|
1952
|
+
text: content,
|
|
1953
|
+
width: rowWidth,
|
|
1954
|
+
paraStart: true
|
|
1955
|
+
});
|
|
1956
|
+
if (findMaxWidth) setMaxWidth();
|
|
1918
1957
|
});
|
|
1919
1958
|
}
|
|
1920
1959
|
}
|
|
1960
|
+
|
|
1921
1961
|
function addChar(char, width) {
|
|
1922
|
-
if (charSize && !startCharSize)
|
|
1923
|
-
|
|
1924
|
-
|
|
1962
|
+
if (charSize && !startCharSize) startCharSize = charSize;
|
|
1963
|
+
word.data.push({
|
|
1964
|
+
char: char,
|
|
1965
|
+
width: width
|
|
1966
|
+
});
|
|
1925
1967
|
wordWidth += width;
|
|
1926
1968
|
}
|
|
1969
|
+
|
|
1927
1970
|
function addWord() {
|
|
1928
1971
|
rowWidth += wordWidth;
|
|
1929
1972
|
word.width = wordWidth;
|
|
1930
1973
|
row.words.push(word);
|
|
1931
|
-
word = {
|
|
1974
|
+
word = {
|
|
1975
|
+
data: []
|
|
1976
|
+
};
|
|
1932
1977
|
wordWidth = 0;
|
|
1933
1978
|
}
|
|
1979
|
+
|
|
1934
1980
|
function addRow() {
|
|
1935
1981
|
if (paraStart) {
|
|
1936
1982
|
textDrawData.paraNumber++;
|
|
@@ -1943,52 +1989,53 @@ function addRow() {
|
|
|
1943
1989
|
startCharSize = 0;
|
|
1944
1990
|
}
|
|
1945
1991
|
row.width = rowWidth;
|
|
1946
|
-
if (bounds.width)
|
|
1947
|
-
trimRight(row);
|
|
1948
|
-
else if (findMaxWidth)
|
|
1949
|
-
setMaxWidth();
|
|
1992
|
+
if (bounds.width) trimRight(row); else if (findMaxWidth) setMaxWidth();
|
|
1950
1993
|
rows.push(row);
|
|
1951
|
-
row = {
|
|
1994
|
+
row = {
|
|
1995
|
+
words: []
|
|
1996
|
+
};
|
|
1952
1997
|
rowWidth = 0;
|
|
1953
1998
|
}
|
|
1999
|
+
|
|
1954
2000
|
function setMaxWidth() {
|
|
1955
|
-
if (rowWidth > (textDrawData.maxWidth || 0))
|
|
1956
|
-
textDrawData.maxWidth = rowWidth;
|
|
2001
|
+
if (rowWidth > (textDrawData.maxWidth || 0)) textDrawData.maxWidth = rowWidth;
|
|
1957
2002
|
}
|
|
1958
2003
|
|
|
1959
2004
|
const CharMode = 0;
|
|
2005
|
+
|
|
1960
2006
|
const WordMode = 1;
|
|
2007
|
+
|
|
1961
2008
|
const TextMode = 2;
|
|
2009
|
+
|
|
1962
2010
|
function layoutChar(drawData, style, width, _height) {
|
|
1963
|
-
const { rows
|
|
1964
|
-
const { textAlign, paraIndent, letterSpacing } = style;
|
|
2011
|
+
const {rows: rows} = drawData;
|
|
2012
|
+
const {textAlign: textAlign, paraIndent: paraIndent, letterSpacing: letterSpacing} = style;
|
|
1965
2013
|
let charX, addWordWidth, indentWidth, mode, wordChar, wordsLength;
|
|
1966
2014
|
rows.forEach(row => {
|
|
1967
2015
|
if (row.words) {
|
|
1968
2016
|
indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length;
|
|
1969
|
-
addWordWidth =
|
|
1970
|
-
mode =
|
|
1971
|
-
if (row.isOverflow && !letterSpacing)
|
|
1972
|
-
row.textMode = true;
|
|
2017
|
+
addWordWidth = width && (textAlign === "justify" || textAlign === "both") && wordsLength > 1 ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
|
|
2018
|
+
mode = letterSpacing || row.isOverflow ? CharMode : addWordWidth > .01 ? WordMode : TextMode;
|
|
2019
|
+
if (row.isOverflow && !letterSpacing) row.textMode = true;
|
|
1973
2020
|
if (mode === TextMode) {
|
|
1974
2021
|
row.x += indentWidth;
|
|
1975
2022
|
toTextChar$1(row);
|
|
1976
|
-
}
|
|
1977
|
-
else {
|
|
2023
|
+
} else {
|
|
1978
2024
|
row.x += indentWidth;
|
|
1979
2025
|
charX = row.x;
|
|
1980
2026
|
row.data = [];
|
|
1981
2027
|
row.words.forEach((word, index) => {
|
|
1982
2028
|
if (mode === WordMode) {
|
|
1983
|
-
wordChar = {
|
|
2029
|
+
wordChar = {
|
|
2030
|
+
char: "",
|
|
2031
|
+
x: charX
|
|
2032
|
+
};
|
|
1984
2033
|
charX = toWordChar(word.data, charX, wordChar);
|
|
1985
|
-
if (row.isOverflow || wordChar.char !==
|
|
1986
|
-
|
|
1987
|
-
}
|
|
1988
|
-
else {
|
|
2034
|
+
if (row.isOverflow || wordChar.char !== " ") row.data.push(wordChar);
|
|
2035
|
+
} else {
|
|
1989
2036
|
charX = toChar(word.data, charX, row.data, row.isOverflow);
|
|
1990
2037
|
}
|
|
1991
|
-
if (addWordWidth && (!row.paraEnd || textAlign ===
|
|
2038
|
+
if (addWordWidth && (!row.paraEnd || textAlign === "both") && index !== wordsLength - 1) {
|
|
1992
2039
|
charX += addWordWidth;
|
|
1993
2040
|
row.width += addWordWidth;
|
|
1994
2041
|
}
|
|
@@ -1998,14 +2045,16 @@ function layoutChar(drawData, style, width, _height) {
|
|
|
1998
2045
|
}
|
|
1999
2046
|
});
|
|
2000
2047
|
}
|
|
2048
|
+
|
|
2001
2049
|
function toTextChar$1(row) {
|
|
2002
|
-
row.text =
|
|
2050
|
+
row.text = "";
|
|
2003
2051
|
row.words.forEach(word => {
|
|
2004
2052
|
word.data.forEach(char => {
|
|
2005
2053
|
row.text += char.char;
|
|
2006
2054
|
});
|
|
2007
2055
|
});
|
|
2008
2056
|
}
|
|
2057
|
+
|
|
2009
2058
|
function toWordChar(data, charX, wordChar) {
|
|
2010
2059
|
data.forEach(char => {
|
|
2011
2060
|
wordChar.char += char.char;
|
|
@@ -2013,9 +2062,10 @@ function toWordChar(data, charX, wordChar) {
|
|
|
2013
2062
|
});
|
|
2014
2063
|
return charX;
|
|
2015
2064
|
}
|
|
2065
|
+
|
|
2016
2066
|
function toChar(data, charX, rowData, isOverflow) {
|
|
2017
2067
|
data.forEach(char => {
|
|
2018
|
-
if (isOverflow || char.char !==
|
|
2068
|
+
if (isOverflow || char.char !== " ") {
|
|
2019
2069
|
char.x = charX;
|
|
2020
2070
|
rowData.push(char);
|
|
2021
2071
|
}
|
|
@@ -2025,38 +2075,39 @@ function toChar(data, charX, rowData, isOverflow) {
|
|
|
2025
2075
|
}
|
|
2026
2076
|
|
|
2027
2077
|
function layoutText(drawData, style) {
|
|
2028
|
-
const { rows, bounds } = drawData, countRows = rows.length;
|
|
2029
|
-
const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
|
|
2030
|
-
let { x, y, width, height } = bounds, realHeight = __lineHeight * countRows + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
|
|
2078
|
+
const {rows: rows, bounds: bounds} = drawData, countRows = rows.length;
|
|
2079
|
+
const {__lineHeight: __lineHeight, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __clipText: __clipText, textAlign: textAlign, verticalAlign: verticalAlign, paraSpacing: paraSpacing, autoSizeAlign: autoSizeAlign} = style;
|
|
2080
|
+
let {x: x, y: y, width: width, height: height} = bounds, realHeight = __lineHeight * countRows + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
|
|
2031
2081
|
let starY = __baseLine;
|
|
2032
2082
|
if (__clipText && realHeight > height) {
|
|
2033
2083
|
realHeight = Math.max(height, __lineHeight);
|
|
2034
|
-
if (countRows > 1)
|
|
2035
|
-
|
|
2036
|
-
}
|
|
2037
|
-
else if (height || autoSizeAlign) {
|
|
2084
|
+
if (countRows > 1) drawData.overflow = countRows;
|
|
2085
|
+
} else if (height || autoSizeAlign) {
|
|
2038
2086
|
switch (verticalAlign) {
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2087
|
+
case "middle":
|
|
2088
|
+
y += (height - realHeight) / 2;
|
|
2089
|
+
break;
|
|
2090
|
+
|
|
2091
|
+
case "bottom":
|
|
2092
|
+
y += height - realHeight;
|
|
2043
2093
|
}
|
|
2044
2094
|
}
|
|
2045
2095
|
starY += y;
|
|
2046
|
-
let row, rowX, rowWidth, layoutWidth =
|
|
2096
|
+
let row, rowX, rowWidth, layoutWidth = width || autoSizeAlign ? width : drawData.maxWidth;
|
|
2047
2097
|
for (let i = 0, len = countRows; i < len; i++) {
|
|
2048
2098
|
row = rows[i];
|
|
2049
2099
|
row.x = x;
|
|
2050
|
-
if (row.width < width ||
|
|
2100
|
+
if (row.width < width || row.width > width && !__clipText) {
|
|
2051
2101
|
switch (textAlign) {
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2102
|
+
case "center":
|
|
2103
|
+
row.x += (layoutWidth - row.width) / 2;
|
|
2104
|
+
break;
|
|
2105
|
+
|
|
2106
|
+
case "right":
|
|
2107
|
+
row.x += layoutWidth - row.width;
|
|
2056
2108
|
}
|
|
2057
2109
|
}
|
|
2058
|
-
if (row.paraStart && paraSpacing && i > 0)
|
|
2059
|
-
starY += paraSpacing;
|
|
2110
|
+
if (row.paraStart && paraSpacing && i > 0) starY += paraSpacing;
|
|
2060
2111
|
row.y = starY;
|
|
2061
2112
|
starY += __lineHeight;
|
|
2062
2113
|
if (drawData.overflow > i && starY > realHeight) {
|
|
@@ -2070,19 +2121,15 @@ function layoutText(drawData, style) {
|
|
|
2070
2121
|
rowWidth = -row.width + style.fontSize + __letterSpacing;
|
|
2071
2122
|
rowX -= rowWidth;
|
|
2072
2123
|
rowWidth += style.fontSize;
|
|
2073
|
-
}
|
|
2074
|
-
else {
|
|
2124
|
+
} else {
|
|
2075
2125
|
rowWidth -= __letterSpacing;
|
|
2076
2126
|
}
|
|
2077
2127
|
}
|
|
2078
|
-
if (rowX < bounds.x)
|
|
2079
|
-
|
|
2080
|
-
if (rowWidth > bounds.width)
|
|
2081
|
-
bounds.width = rowWidth;
|
|
2128
|
+
if (rowX < bounds.x) bounds.x = rowX;
|
|
2129
|
+
if (rowWidth > bounds.width) bounds.width = rowWidth;
|
|
2082
2130
|
if (__clipText && width && width < rowWidth) {
|
|
2083
2131
|
row.isOverflow = true;
|
|
2084
|
-
if (!drawData.overflow)
|
|
2085
|
-
drawData.overflow = rows.length;
|
|
2132
|
+
if (!drawData.overflow) drawData.overflow = rows.length;
|
|
2086
2133
|
}
|
|
2087
2134
|
}
|
|
2088
2135
|
bounds.y = y;
|
|
@@ -2090,20 +2137,16 @@ function layoutText(drawData, style) {
|
|
|
2090
2137
|
}
|
|
2091
2138
|
|
|
2092
2139
|
function clipText(drawData, style, x, width) {
|
|
2093
|
-
if (!width)
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
let { textOverflow } = style;
|
|
2140
|
+
if (!width) return;
|
|
2141
|
+
const {rows: rows, overflow: overflow} = drawData;
|
|
2142
|
+
let {textOverflow: textOverflow} = style;
|
|
2097
2143
|
rows.splice(overflow);
|
|
2098
|
-
if (textOverflow && textOverflow !==
|
|
2099
|
-
if (textOverflow ===
|
|
2100
|
-
textOverflow = '';
|
|
2101
|
-
else if (textOverflow === 'ellipsis')
|
|
2102
|
-
textOverflow = '...';
|
|
2144
|
+
if (textOverflow && textOverflow !== "show") {
|
|
2145
|
+
if (textOverflow === "hide") textOverflow = ""; else if (textOverflow === "ellipsis") textOverflow = "...";
|
|
2103
2146
|
let char, charRight;
|
|
2104
2147
|
const ellipsisWidth = textOverflow ? core.Platform.canvas.measureText(textOverflow).width : 0;
|
|
2105
2148
|
const right = x + width - ellipsisWidth;
|
|
2106
|
-
const list = style.textWrap ===
|
|
2149
|
+
const list = style.textWrap === "none" ? rows : [ rows[overflow - 1] ];
|
|
2107
2150
|
list.forEach(row => {
|
|
2108
2151
|
if (row.isOverflow && row.data) {
|
|
2109
2152
|
let end = row.data.length - 1;
|
|
@@ -2112,8 +2155,7 @@ function clipText(drawData, style, x, width) {
|
|
|
2112
2155
|
charRight = char.x + char.width;
|
|
2113
2156
|
if (i === end && charRight < right) {
|
|
2114
2157
|
break;
|
|
2115
|
-
}
|
|
2116
|
-
else if ((charRight < right && char.char !== ' ') || !i) {
|
|
2158
|
+
} else if (charRight < right && char.char !== " " || !i) {
|
|
2117
2159
|
row.data.splice(i + 1);
|
|
2118
2160
|
row.width -= char.width;
|
|
2119
2161
|
break;
|
|
@@ -2121,15 +2163,18 @@ function clipText(drawData, style, x, width) {
|
|
|
2121
2163
|
row.width -= char.width;
|
|
2122
2164
|
}
|
|
2123
2165
|
row.width += ellipsisWidth;
|
|
2124
|
-
row.data.push({
|
|
2125
|
-
|
|
2126
|
-
|
|
2166
|
+
row.data.push({
|
|
2167
|
+
char: textOverflow,
|
|
2168
|
+
x: charRight
|
|
2169
|
+
});
|
|
2170
|
+
if (row.textMode) toTextChar(row);
|
|
2127
2171
|
}
|
|
2128
2172
|
});
|
|
2129
2173
|
}
|
|
2130
2174
|
}
|
|
2175
|
+
|
|
2131
2176
|
function toTextChar(row) {
|
|
2132
|
-
row.text =
|
|
2177
|
+
row.text = "";
|
|
2133
2178
|
row.data.forEach(char => {
|
|
2134
2179
|
row.text += char.char;
|
|
2135
2180
|
});
|
|
@@ -2138,137 +2183,151 @@ function toTextChar(row) {
|
|
|
2138
2183
|
|
|
2139
2184
|
function decorationText(drawData, style) {
|
|
2140
2185
|
let type;
|
|
2141
|
-
const { fontSize, textDecoration } = style;
|
|
2186
|
+
const {fontSize: fontSize, textDecoration: textDecoration} = style;
|
|
2142
2187
|
drawData.decorationHeight = fontSize / 11;
|
|
2143
|
-
if (
|
|
2188
|
+
if (core.isObject(textDecoration)) {
|
|
2144
2189
|
type = textDecoration.type;
|
|
2145
|
-
if (textDecoration.color)
|
|
2146
|
-
|
|
2147
|
-
}
|
|
2148
|
-
else
|
|
2149
|
-
type = textDecoration;
|
|
2190
|
+
if (textDecoration.color) drawData.decorationColor = draw.ColorConvert.string(textDecoration.color);
|
|
2191
|
+
} else type = textDecoration;
|
|
2150
2192
|
switch (type) {
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2193
|
+
case "under":
|
|
2194
|
+
drawData.decorationY = [ fontSize * .15 ];
|
|
2195
|
+
break;
|
|
2196
|
+
|
|
2197
|
+
case "delete":
|
|
2198
|
+
drawData.decorationY = [ -fontSize * .35 ];
|
|
2199
|
+
break;
|
|
2200
|
+
|
|
2201
|
+
case "under-delete":
|
|
2202
|
+
drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
|
|
2159
2203
|
}
|
|
2160
2204
|
}
|
|
2161
2205
|
|
|
2162
|
-
const { top, right, bottom, left } = core.Direction4;
|
|
2206
|
+
const {top: top, right: right, bottom: bottom, left: left} = core.Direction4;
|
|
2207
|
+
|
|
2163
2208
|
function getDrawData(content, style) {
|
|
2164
|
-
if (
|
|
2165
|
-
content = String(content);
|
|
2209
|
+
if (!core.isString(content)) content = String(content);
|
|
2166
2210
|
let x = 0, y = 0;
|
|
2167
|
-
let width = style.__getInput(
|
|
2168
|
-
let height = style.__getInput(
|
|
2169
|
-
const { textDecoration, __font, __padding: padding
|
|
2211
|
+
let width = style.__getInput("width") || 0;
|
|
2212
|
+
let height = style.__getInput("height") || 0;
|
|
2213
|
+
const {textDecoration: textDecoration, __font: __font, __padding: padding} = style;
|
|
2170
2214
|
if (padding) {
|
|
2171
|
-
if (width)
|
|
2172
|
-
|
|
2173
|
-
else if (!style.autoSizeAlign)
|
|
2174
|
-
x = padding[left];
|
|
2175
|
-
if (height)
|
|
2176
|
-
y = padding[top], height -= (padding[top] + padding[bottom]);
|
|
2177
|
-
else if (!style.autoSizeAlign)
|
|
2178
|
-
y = padding[top];
|
|
2215
|
+
if (width) x = padding[left], width -= padding[right] + padding[left]; else if (!style.autoSizeAlign) x = padding[left];
|
|
2216
|
+
if (height) y = padding[top], height -= padding[top] + padding[bottom]; else if (!style.autoSizeAlign) y = padding[top];
|
|
2179
2217
|
}
|
|
2180
2218
|
const drawData = {
|
|
2181
|
-
bounds: {
|
|
2219
|
+
bounds: {
|
|
2220
|
+
x: x,
|
|
2221
|
+
y: y,
|
|
2222
|
+
width: width,
|
|
2223
|
+
height: height
|
|
2224
|
+
},
|
|
2182
2225
|
rows: [],
|
|
2183
2226
|
paraNumber: 0,
|
|
2184
2227
|
font: core.Platform.canvas.font = __font
|
|
2185
2228
|
};
|
|
2186
2229
|
createRows(drawData, content, style);
|
|
2187
|
-
if (padding)
|
|
2188
|
-
padAutoText(padding, drawData, style, width, height);
|
|
2230
|
+
if (padding) padAutoText(padding, drawData, style, width, height);
|
|
2189
2231
|
layoutText(drawData, style);
|
|
2190
2232
|
layoutChar(drawData, style, width);
|
|
2191
|
-
if (drawData.overflow)
|
|
2192
|
-
|
|
2193
|
-
if (textDecoration !== 'none')
|
|
2194
|
-
decorationText(drawData, style);
|
|
2233
|
+
if (drawData.overflow) clipText(drawData, style, x, width);
|
|
2234
|
+
if (textDecoration !== "none") decorationText(drawData, style);
|
|
2195
2235
|
return drawData;
|
|
2196
2236
|
}
|
|
2237
|
+
|
|
2197
2238
|
function padAutoText(padding, drawData, style, width, height) {
|
|
2198
2239
|
if (!width && style.autoSizeAlign) {
|
|
2199
2240
|
switch (style.textAlign) {
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2241
|
+
case "left":
|
|
2242
|
+
offsetText(drawData, "x", padding[left]);
|
|
2243
|
+
break;
|
|
2244
|
+
|
|
2245
|
+
case "right":
|
|
2246
|
+
offsetText(drawData, "x", -padding[right]);
|
|
2204
2247
|
}
|
|
2205
2248
|
}
|
|
2206
2249
|
if (!height && style.autoSizeAlign) {
|
|
2207
2250
|
switch (style.verticalAlign) {
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2251
|
+
case "top":
|
|
2252
|
+
offsetText(drawData, "y", padding[top]);
|
|
2253
|
+
break;
|
|
2254
|
+
|
|
2255
|
+
case "bottom":
|
|
2256
|
+
offsetText(drawData, "y", -padding[bottom]);
|
|
2212
2257
|
}
|
|
2213
2258
|
}
|
|
2214
2259
|
}
|
|
2260
|
+
|
|
2215
2261
|
function offsetText(drawData, attrName, value) {
|
|
2216
|
-
const { bounds, rows } = drawData;
|
|
2262
|
+
const {bounds: bounds, rows: rows} = drawData;
|
|
2217
2263
|
bounds[attrName] += value;
|
|
2218
|
-
for (let i = 0; i < rows.length; i++)
|
|
2219
|
-
rows[i][attrName] += value;
|
|
2264
|
+
for (let i = 0; i < rows.length; i++) rows[i][attrName] += value;
|
|
2220
2265
|
}
|
|
2221
2266
|
|
|
2222
2267
|
const TextConvertModule = {
|
|
2223
|
-
getDrawData
|
|
2268
|
+
getDrawData: getDrawData
|
|
2224
2269
|
};
|
|
2225
2270
|
|
|
2226
2271
|
function string(color, opacity) {
|
|
2227
|
-
const doOpacity =
|
|
2228
|
-
if (
|
|
2229
|
-
if (doOpacity && draw.ColorConvert.object)
|
|
2230
|
-
color = draw.ColorConvert.object(color);
|
|
2231
|
-
else
|
|
2232
|
-
return color;
|
|
2272
|
+
const doOpacity = core.isNumber(opacity) && opacity < 1;
|
|
2273
|
+
if (core.isString(color)) {
|
|
2274
|
+
if (doOpacity && draw.ColorConvert.object) color = draw.ColorConvert.object(color); else return color;
|
|
2233
2275
|
}
|
|
2234
|
-
let a = color.a
|
|
2235
|
-
if (doOpacity)
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
|
|
2276
|
+
let a = core.isUndefined(color.a) ? 1 : color.a;
|
|
2277
|
+
if (doOpacity) a *= opacity;
|
|
2278
|
+
const rgb = color.r + "," + color.g + "," + color.b;
|
|
2279
|
+
return a === 1 ? "rgb(" + rgb + ")" : "rgba(" + rgb + "," + a + ")";
|
|
2239
2280
|
}
|
|
2240
2281
|
|
|
2241
2282
|
const ColorConvertModule = {
|
|
2242
|
-
string
|
|
2283
|
+
string: string
|
|
2243
2284
|
};
|
|
2244
2285
|
|
|
2245
2286
|
Object.assign(draw.TextConvert, TextConvertModule);
|
|
2287
|
+
|
|
2246
2288
|
Object.assign(draw.ColorConvert, ColorConvertModule);
|
|
2289
|
+
|
|
2247
2290
|
Object.assign(draw.Paint, PaintModule);
|
|
2291
|
+
|
|
2248
2292
|
Object.assign(draw.PaintImage, PaintImageModule);
|
|
2293
|
+
|
|
2249
2294
|
Object.assign(draw.PaintGradient, PaintGradientModule);
|
|
2295
|
+
|
|
2250
2296
|
Object.assign(draw.Effect, EffectModule);
|
|
2251
2297
|
|
|
2252
2298
|
useCanvas();
|
|
2253
2299
|
|
|
2254
2300
|
Object.defineProperty(exports, "LeaferImage", {
|
|
2255
2301
|
enumerable: true,
|
|
2256
|
-
get: function
|
|
2302
|
+
get: function() {
|
|
2303
|
+
return core.LeaferImage;
|
|
2304
|
+
}
|
|
2257
2305
|
});
|
|
2306
|
+
|
|
2258
2307
|
exports.Layouter = Layouter;
|
|
2308
|
+
|
|
2259
2309
|
exports.LeaferCanvas = LeaferCanvas;
|
|
2310
|
+
|
|
2260
2311
|
exports.Renderer = Renderer;
|
|
2312
|
+
|
|
2261
2313
|
exports.Watcher = Watcher;
|
|
2314
|
+
|
|
2262
2315
|
exports.useCanvas = useCanvas;
|
|
2263
|
-
|
|
2264
|
-
|
|
2316
|
+
|
|
2317
|
+
Object.keys(core).forEach(function(k) {
|
|
2318
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
2265
2319
|
enumerable: true,
|
|
2266
|
-
get: function
|
|
2320
|
+
get: function() {
|
|
2321
|
+
return core[k];
|
|
2322
|
+
}
|
|
2267
2323
|
});
|
|
2268
2324
|
});
|
|
2269
|
-
|
|
2270
|
-
|
|
2325
|
+
|
|
2326
|
+
Object.keys(draw).forEach(function(k) {
|
|
2327
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
2271
2328
|
enumerable: true,
|
|
2272
|
-
get: function
|
|
2329
|
+
get: function() {
|
|
2330
|
+
return draw[k];
|
|
2331
|
+
}
|
|
2273
2332
|
});
|
|
2274
2333
|
});
|