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