@leafer-ui/node 1.0.0-rc.6 → 1.0.0-rc.8
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 +171 -97
- package/dist/node.esm.js +174 -100
- package/dist/node.esm.min.js +1 -1
- package/dist/node.min.cjs +1 -1
- package/package.json +6 -6
package/dist/node.esm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper,
|
|
1
|
+
import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, BoundsHelper, Creator, LeaferCanvasBase, canvasPatch, LeaferImage, InteractionBase, FileHelper, MatrixHelper, ImageEvent, PointHelper, Direction4, TaskProcessor } from '@leafer/core';
|
|
2
2
|
export * from '@leafer/core';
|
|
3
3
|
export { LeaferImage } from '@leafer/core';
|
|
4
4
|
import { writeFileSync } from 'fs';
|
|
5
|
-
import { ColorConvert as ColorConvert$1, ImageManager as ImageManager$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$
|
|
5
|
+
import { ColorConvert as ColorConvert$1, ImageManager as ImageManager$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$2 } from '@leafer-ui/core';
|
|
6
6
|
export * from '@leafer-ui/core';
|
|
7
7
|
|
|
8
8
|
/******************************************************************************
|
|
@@ -43,7 +43,7 @@ class Watcher {
|
|
|
43
43
|
if (this.hasRemove) {
|
|
44
44
|
const updatedList = new LeafList();
|
|
45
45
|
this.__updatedList.list.forEach(item => { if (item.leafer)
|
|
46
|
-
updatedList.
|
|
46
|
+
updatedList.add(item); });
|
|
47
47
|
return updatedList;
|
|
48
48
|
}
|
|
49
49
|
else {
|
|
@@ -78,7 +78,7 @@ class Watcher {
|
|
|
78
78
|
this.target.emit(RenderEvent.REQUEST);
|
|
79
79
|
}
|
|
80
80
|
__onAttrChange(event) {
|
|
81
|
-
this.__updatedList.
|
|
81
|
+
this.__updatedList.add(event.target);
|
|
82
82
|
this.update();
|
|
83
83
|
}
|
|
84
84
|
__onChildEvent(event) {
|
|
@@ -88,12 +88,12 @@ class Watcher {
|
|
|
88
88
|
}
|
|
89
89
|
else {
|
|
90
90
|
this.hasRemove = true;
|
|
91
|
-
this.__updatedList.
|
|
91
|
+
this.__updatedList.add(event.parent);
|
|
92
92
|
}
|
|
93
93
|
this.update();
|
|
94
94
|
}
|
|
95
95
|
__pushChild(child) {
|
|
96
|
-
this.__updatedList.
|
|
96
|
+
this.__updatedList.add(child);
|
|
97
97
|
if (child.isBranch)
|
|
98
98
|
this.__loopChildren(child);
|
|
99
99
|
}
|
|
@@ -132,7 +132,7 @@ class Watcher {
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
-
const {
|
|
135
|
+
const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
|
|
136
136
|
const { pushAllChildBranch, pushAllParent } = BranchHelper;
|
|
137
137
|
function updateMatrix(updateList, levelList) {
|
|
138
138
|
let layout;
|
|
@@ -140,14 +140,14 @@ function updateMatrix(updateList, levelList) {
|
|
|
140
140
|
layout = leaf.__layout;
|
|
141
141
|
if (levelList.without(leaf) && !layout.proxyZoom) {
|
|
142
142
|
if (layout.matrixChanged) {
|
|
143
|
-
|
|
144
|
-
levelList.
|
|
143
|
+
updateAllMatrix$1(leaf, true);
|
|
144
|
+
levelList.add(leaf);
|
|
145
145
|
if (leaf.isBranch)
|
|
146
146
|
pushAllChildBranch(leaf, levelList);
|
|
147
147
|
pushAllParent(leaf, levelList);
|
|
148
148
|
}
|
|
149
149
|
else if (layout.boundsChanged) {
|
|
150
|
-
levelList.
|
|
150
|
+
levelList.add(leaf);
|
|
151
151
|
if (leaf.isBranch)
|
|
152
152
|
leaf.__tempNumber = 0;
|
|
153
153
|
pushAllParent(leaf, levelList);
|
|
@@ -156,20 +156,21 @@ function updateMatrix(updateList, levelList) {
|
|
|
156
156
|
});
|
|
157
157
|
}
|
|
158
158
|
function updateBounds(boundsList) {
|
|
159
|
-
let
|
|
159
|
+
let list, branch, children;
|
|
160
160
|
boundsList.sort(true);
|
|
161
161
|
boundsList.levels.forEach(level => {
|
|
162
|
-
|
|
163
|
-
for (let i = 0, len =
|
|
164
|
-
branch =
|
|
162
|
+
list = boundsList.levelMap[level];
|
|
163
|
+
for (let i = 0, len = list.length; i < len; i++) {
|
|
164
|
+
branch = list[i];
|
|
165
165
|
if (branch.isBranch && branch.__tempNumber) {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
166
|
+
children = branch.children;
|
|
167
|
+
for (let j = 0, jLen = children.length; j < jLen; j++) {
|
|
168
|
+
if (!children[j].isBranch) {
|
|
169
|
+
updateOneBounds(children[j]);
|
|
169
170
|
}
|
|
170
171
|
}
|
|
171
172
|
}
|
|
172
|
-
branch
|
|
173
|
+
updateOneBounds(branch);
|
|
173
174
|
}
|
|
174
175
|
});
|
|
175
176
|
}
|
|
@@ -182,7 +183,7 @@ function updateChange(updateList) {
|
|
|
182
183
|
}
|
|
183
184
|
|
|
184
185
|
const { worldBounds } = LeafBoundsHelper;
|
|
185
|
-
const {
|
|
186
|
+
const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
|
|
186
187
|
class LayoutBlockData {
|
|
187
188
|
constructor(list) {
|
|
188
189
|
this.updatedBounds = new Bounds();
|
|
@@ -193,14 +194,20 @@ class LayoutBlockData {
|
|
|
193
194
|
this.updatedList = list;
|
|
194
195
|
}
|
|
195
196
|
setBefore() {
|
|
196
|
-
|
|
197
|
+
this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
197
198
|
}
|
|
198
199
|
setAfter() {
|
|
199
|
-
|
|
200
|
-
|
|
200
|
+
const { list } = this.updatedList;
|
|
201
|
+
if (list.some(leaf => leaf.noBounds)) {
|
|
202
|
+
this.afterBounds.set(bigBounds);
|
|
203
|
+
}
|
|
204
|
+
else {
|
|
205
|
+
this.afterBounds.setListWithFn(list, worldBounds);
|
|
206
|
+
}
|
|
207
|
+
this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
|
|
201
208
|
}
|
|
202
209
|
merge(data) {
|
|
203
|
-
this.updatedList.
|
|
210
|
+
this.updatedList.addList(data.updatedList.list);
|
|
204
211
|
this.beforeBounds.add(data.beforeBounds);
|
|
205
212
|
this.afterBounds.add(data.afterBounds);
|
|
206
213
|
this.updatedBounds.add(data.updatedBounds);
|
|
@@ -210,8 +217,7 @@ class LayoutBlockData {
|
|
|
210
217
|
}
|
|
211
218
|
}
|
|
212
219
|
|
|
213
|
-
const {
|
|
214
|
-
const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
|
|
220
|
+
const { updateAllMatrix, updateAllChange } = LeafHelper;
|
|
215
221
|
const debug$1 = Debug.get('Layouter');
|
|
216
222
|
class Layouter {
|
|
217
223
|
constructor(target, userConfig) {
|
|
@@ -288,12 +294,15 @@ class Layouter {
|
|
|
288
294
|
const { target, __updatedList: updateList } = this;
|
|
289
295
|
const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
|
|
290
296
|
const blocks = this.getBlocks(updateList);
|
|
291
|
-
blocks.forEach(item =>
|
|
297
|
+
blocks.forEach(item => item.setBefore());
|
|
292
298
|
target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
|
|
299
|
+
this.extraBlock = null;
|
|
293
300
|
updateList.sort();
|
|
294
301
|
updateMatrix(updateList, this.__levelList);
|
|
295
302
|
updateBounds(this.__levelList);
|
|
296
303
|
updateChange(updateList);
|
|
304
|
+
if (this.extraBlock)
|
|
305
|
+
blocks.push(this.extraBlock);
|
|
297
306
|
blocks.forEach(item => item.setAfter());
|
|
298
307
|
target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
|
|
299
308
|
target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
|
|
@@ -316,17 +325,20 @@ class Layouter {
|
|
|
316
325
|
Run.end(t);
|
|
317
326
|
}
|
|
318
327
|
static fullLayout(target) {
|
|
319
|
-
|
|
328
|
+
updateAllMatrix(target, true);
|
|
320
329
|
if (target.isBranch) {
|
|
321
|
-
|
|
322
|
-
pushAllBranchStack(target, branchStack);
|
|
323
|
-
updateWorldBoundsByBranchStack(branchStack);
|
|
330
|
+
BranchHelper.updateBounds(target);
|
|
324
331
|
}
|
|
325
332
|
else {
|
|
326
|
-
|
|
333
|
+
LeafHelper.updateBounds(target);
|
|
327
334
|
}
|
|
328
335
|
updateAllChange(target);
|
|
329
336
|
}
|
|
337
|
+
addExtra(leaf) {
|
|
338
|
+
const block = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
|
|
339
|
+
block.updatedList.add(leaf);
|
|
340
|
+
block.beforeBounds.add(leaf.__world);
|
|
341
|
+
}
|
|
330
342
|
createBlock(data) {
|
|
331
343
|
return new LayoutBlockData(data);
|
|
332
344
|
}
|
|
@@ -354,8 +366,7 @@ class Layouter {
|
|
|
354
366
|
if (this.target) {
|
|
355
367
|
this.stop();
|
|
356
368
|
this.__removeListenEvents();
|
|
357
|
-
this.target = null;
|
|
358
|
-
this.config = null;
|
|
369
|
+
this.target = this.config = null;
|
|
359
370
|
}
|
|
360
371
|
}
|
|
361
372
|
}
|
|
@@ -466,7 +477,7 @@ class Renderer {
|
|
|
466
477
|
const { canvas } = this;
|
|
467
478
|
const bounds = block.getIntersect(canvas.bounds);
|
|
468
479
|
const includes = block.includes(this.target.__world);
|
|
469
|
-
const realBounds = new Bounds(
|
|
480
|
+
const realBounds = new Bounds(bounds);
|
|
470
481
|
canvas.save();
|
|
471
482
|
if (includes && !Debug.showRepaint) {
|
|
472
483
|
canvas.clear();
|
|
@@ -516,7 +527,7 @@ class Renderer {
|
|
|
516
527
|
const { updateBlocks: list } = this;
|
|
517
528
|
if (list) {
|
|
518
529
|
const bounds = new Bounds();
|
|
519
|
-
bounds.
|
|
530
|
+
bounds.setList(list);
|
|
520
531
|
list.length = 0;
|
|
521
532
|
list.push(bounds);
|
|
522
533
|
}
|
|
@@ -556,7 +567,7 @@ class Renderer {
|
|
|
556
567
|
empty = (!leaf.__world.width || !leaf.__world.height);
|
|
557
568
|
if (empty) {
|
|
558
569
|
if (!leaf.isLeafer)
|
|
559
|
-
debug.
|
|
570
|
+
debug.tip(leaf.innerName, ': empty');
|
|
560
571
|
empty = (!leaf.isBranch || leaf.isBranchLeaf);
|
|
561
572
|
}
|
|
562
573
|
return empty;
|
|
@@ -590,6 +601,14 @@ class Renderer {
|
|
|
590
601
|
}
|
|
591
602
|
}
|
|
592
603
|
|
|
604
|
+
var AnswerType;
|
|
605
|
+
(function (AnswerType) {
|
|
606
|
+
AnswerType[AnswerType["No"] = 0] = "No";
|
|
607
|
+
AnswerType[AnswerType["Yes"] = 1] = "Yes";
|
|
608
|
+
AnswerType[AnswerType["NoAndSkip"] = 2] = "NoAndSkip";
|
|
609
|
+
AnswerType[AnswerType["YesAndSkip"] = 3] = "YesAndSkip";
|
|
610
|
+
})(AnswerType || (AnswerType = {}));
|
|
611
|
+
|
|
593
612
|
const { hitRadiusPoint } = BoundsHelper;
|
|
594
613
|
class Pather {
|
|
595
614
|
constructor(target, selector) {
|
|
@@ -634,10 +653,10 @@ class Pather {
|
|
|
634
653
|
getPath(leaf) {
|
|
635
654
|
const path = new LeafList();
|
|
636
655
|
while (leaf) {
|
|
637
|
-
path.
|
|
656
|
+
path.add(leaf);
|
|
638
657
|
leaf = leaf.parent;
|
|
639
658
|
}
|
|
640
|
-
path.
|
|
659
|
+
path.add(this.target);
|
|
641
660
|
return path;
|
|
642
661
|
}
|
|
643
662
|
getHitablePath(leaf) {
|
|
@@ -647,7 +666,7 @@ class Pather {
|
|
|
647
666
|
item = path.list[i];
|
|
648
667
|
if (!item.__.hittable)
|
|
649
668
|
break;
|
|
650
|
-
hittablePath.
|
|
669
|
+
hittablePath.addAt(item, 0);
|
|
651
670
|
if (!item.__.hitChildren)
|
|
652
671
|
break;
|
|
653
672
|
}
|
|
@@ -666,7 +685,7 @@ class Pather {
|
|
|
666
685
|
leaf = path.list[j];
|
|
667
686
|
if (nextPath && nextPath.has(leaf))
|
|
668
687
|
break;
|
|
669
|
-
throughPath.
|
|
688
|
+
throughPath.add(leaf);
|
|
670
689
|
}
|
|
671
690
|
}
|
|
672
691
|
return throughPath;
|
|
@@ -708,14 +727,15 @@ class Pather {
|
|
|
708
727
|
}
|
|
709
728
|
}
|
|
710
729
|
|
|
730
|
+
const { Yes, NoAndSkip, YesAndSkip } = AnswerType;
|
|
711
731
|
class Selector {
|
|
712
732
|
constructor(target, userConfig) {
|
|
713
733
|
this.config = {};
|
|
714
734
|
this.innerIdMap = {};
|
|
715
735
|
this.idMap = {};
|
|
716
736
|
this.methods = {
|
|
717
|
-
id: (leaf, name) => leaf.id === name ? this.idMap[name] = leaf : 0,
|
|
718
|
-
innerId: (leaf, innerId) => leaf.innerId === innerId ? this.innerIdMap[innerId] = leaf : 0,
|
|
737
|
+
id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
|
|
738
|
+
innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
|
|
719
739
|
className: (leaf, name) => leaf.className === name ? 1 : 0,
|
|
720
740
|
tag: (leaf, name) => leaf.__tag === name ? 1 : 0
|
|
721
741
|
};
|
|
@@ -725,11 +745,6 @@ class Selector {
|
|
|
725
745
|
this.pather = new Pather(target, this);
|
|
726
746
|
this.__listenEvents();
|
|
727
747
|
}
|
|
728
|
-
getByPoint(hitPoint, hitRadius, options) {
|
|
729
|
-
if (Platform.name === 'node')
|
|
730
|
-
this.target.emit(LayoutEvent.CHECK_UPDATE);
|
|
731
|
-
return this.pather.getByPoint(hitPoint, hitRadius, options);
|
|
732
|
-
}
|
|
733
748
|
getBy(condition, branch, one, options) {
|
|
734
749
|
switch (typeof condition) {
|
|
735
750
|
case 'number':
|
|
@@ -749,6 +764,11 @@ class Selector {
|
|
|
749
764
|
return this.getByMethod(condition, branch, one, options);
|
|
750
765
|
}
|
|
751
766
|
}
|
|
767
|
+
getByPoint(hitPoint, hitRadius, options) {
|
|
768
|
+
if (Platform.name === 'node')
|
|
769
|
+
this.target.emit(LayoutEvent.CHECK_UPDATE);
|
|
770
|
+
return this.pather.getByPoint(hitPoint, hitRadius, options);
|
|
771
|
+
}
|
|
752
772
|
getByInnerId(innerId, branch) {
|
|
753
773
|
const cache = this.innerIdMap[innerId];
|
|
754
774
|
if (cache)
|
|
@@ -775,10 +795,11 @@ class Selector {
|
|
|
775
795
|
return list || this.findLeaf;
|
|
776
796
|
}
|
|
777
797
|
eachFind(children, method, list, options) {
|
|
778
|
-
let child;
|
|
798
|
+
let child, result;
|
|
779
799
|
for (let i = 0, len = children.length; i < len; i++) {
|
|
780
800
|
child = children[i];
|
|
781
|
-
|
|
801
|
+
result = method(child, options);
|
|
802
|
+
if (result === Yes || result === YesAndSkip) {
|
|
782
803
|
if (list) {
|
|
783
804
|
list.push(child);
|
|
784
805
|
}
|
|
@@ -787,7 +808,7 @@ class Selector {
|
|
|
787
808
|
return;
|
|
788
809
|
}
|
|
789
810
|
}
|
|
790
|
-
if (child.isBranch)
|
|
811
|
+
if (child.isBranch && result < NoAndSkip)
|
|
791
812
|
this.eachFind(child.children, method, list, options);
|
|
792
813
|
}
|
|
793
814
|
}
|
|
@@ -904,9 +925,8 @@ Platform.name = 'node';
|
|
|
904
925
|
Platform.requestRender = function (render) { setTimeout(render); };
|
|
905
926
|
Platform.devicePixelRatio = 1;
|
|
906
927
|
Platform.conicGradientSupport = true;
|
|
907
|
-
Platform.realtimeLayout = true;
|
|
908
928
|
|
|
909
|
-
const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper
|
|
929
|
+
const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
|
|
910
930
|
function fillOrFitMode(data, mode, box, width, height, rotation) {
|
|
911
931
|
const transform = get$4();
|
|
912
932
|
const swap = rotation && rotation !== 180;
|
|
@@ -916,7 +936,7 @@ function fillOrFitMode(data, mode, box, width, height, rotation) {
|
|
|
916
936
|
const x = box.x + (box.width - width * scale) / 2;
|
|
917
937
|
const y = box.y + (box.height - height * scale) / 2;
|
|
918
938
|
translate$1(transform, x, y);
|
|
919
|
-
scaleHelper
|
|
939
|
+
scaleHelper(transform, scale);
|
|
920
940
|
if (rotation)
|
|
921
941
|
rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
|
|
922
942
|
data.scaleX = data.scaleY = scale;
|
|
@@ -928,7 +948,7 @@ function clipMode(data, box, offset, scale, rotation) {
|
|
|
928
948
|
if (offset)
|
|
929
949
|
translate$1(transform, offset.x, offset.y);
|
|
930
950
|
if (scale) {
|
|
931
|
-
typeof scale === 'number' ? scaleHelper
|
|
951
|
+
typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y);
|
|
932
952
|
data.scaleX = transform.a;
|
|
933
953
|
data.scaleY = transform.d;
|
|
934
954
|
}
|
|
@@ -963,7 +983,7 @@ function repeatMode(data, box, width, height, scale, rotation) {
|
|
|
963
983
|
const { get: get$3, translate } = MatrixHelper;
|
|
964
984
|
function createData(leafPaint, image, paint, box) {
|
|
965
985
|
let { width, height } = image;
|
|
966
|
-
const { opacity, mode, offset, scale, rotation, blendMode } = paint;
|
|
986
|
+
const { opacity, mode, offset, scale, rotation, blendMode, repeat } = paint;
|
|
967
987
|
const sameBox = box.width === width && box.height === height;
|
|
968
988
|
if (blendMode)
|
|
969
989
|
leafPaint.blendMode = blendMode;
|
|
@@ -984,6 +1004,8 @@ function createData(leafPaint, image, paint, box) {
|
|
|
984
1004
|
case 'repeat':
|
|
985
1005
|
if (!sameBox || scale || rotation)
|
|
986
1006
|
repeatMode(data, box, width, height, scale, rotation);
|
|
1007
|
+
if (!repeat)
|
|
1008
|
+
data.repeat = 'repeat';
|
|
987
1009
|
break;
|
|
988
1010
|
case 'fit':
|
|
989
1011
|
case 'cover':
|
|
@@ -995,6 +1017,8 @@ function createData(leafPaint, image, paint, box) {
|
|
|
995
1017
|
data.height = height;
|
|
996
1018
|
if (opacity)
|
|
997
1019
|
data.opacity = opacity;
|
|
1020
|
+
if (repeat)
|
|
1021
|
+
data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
|
|
998
1022
|
}
|
|
999
1023
|
|
|
1000
1024
|
function image(ui, attrName, attrValue, box, firstUse) {
|
|
@@ -1042,6 +1066,10 @@ function hasNaturalSize(ui, attrName, image) {
|
|
|
1042
1066
|
d.__naturalHeight = image.height;
|
|
1043
1067
|
if (!d.__getInput('width') || !d.__getInput('height')) {
|
|
1044
1068
|
ui.forceUpdate('width');
|
|
1069
|
+
if (ui.__proxyData) {
|
|
1070
|
+
ui.setProxyAttr('width', ui.__.width);
|
|
1071
|
+
ui.setProxyAttr('height', ui.__.height);
|
|
1072
|
+
}
|
|
1045
1073
|
return false;
|
|
1046
1074
|
}
|
|
1047
1075
|
}
|
|
@@ -1052,22 +1080,21 @@ function emit(type, data) {
|
|
|
1052
1080
|
data.target.emitEvent(new ImageEvent(type, data));
|
|
1053
1081
|
}
|
|
1054
1082
|
|
|
1055
|
-
const
|
|
1083
|
+
const Export$1 = {};
|
|
1084
|
+
|
|
1085
|
+
const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
|
|
1056
1086
|
function createPattern(ui, paint, pixelRatio) {
|
|
1057
1087
|
let { scaleX, scaleY } = ui.__world;
|
|
1058
1088
|
const id = scaleX + '-' + scaleY;
|
|
1059
1089
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
1060
|
-
paint.patternId = id;
|
|
1061
1090
|
scaleX = Math.abs(scaleX);
|
|
1062
1091
|
scaleY = Math.abs(scaleY);
|
|
1063
1092
|
const { image, data } = paint;
|
|
1064
|
-
|
|
1065
|
-
const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096);
|
|
1066
|
-
let scale, matrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
|
|
1093
|
+
let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
|
|
1067
1094
|
if (sx) {
|
|
1068
|
-
|
|
1069
|
-
copy$1(
|
|
1070
|
-
|
|
1095
|
+
imageMatrix = get$2();
|
|
1096
|
+
copy$1(imageMatrix, transform);
|
|
1097
|
+
scale(imageMatrix, 1 / sx, 1 / sy);
|
|
1071
1098
|
scaleX *= sx;
|
|
1072
1099
|
scaleY *= sy;
|
|
1073
1100
|
}
|
|
@@ -1075,38 +1102,49 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1075
1102
|
scaleY *= pixelRatio;
|
|
1076
1103
|
width *= scaleX;
|
|
1077
1104
|
height *= scaleY;
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1105
|
+
const size = width * height;
|
|
1106
|
+
if (!repeat) {
|
|
1107
|
+
if (size > Platform.image.maxCacheSize)
|
|
1108
|
+
return false;
|
|
1109
|
+
}
|
|
1110
|
+
let maxSize = Platform.image.maxPatternSize;
|
|
1111
|
+
if (!image.isSVG) {
|
|
1112
|
+
const imageSize = image.width * image.height;
|
|
1113
|
+
if (maxSize > imageSize)
|
|
1114
|
+
maxSize = imageSize;
|
|
1115
|
+
}
|
|
1116
|
+
if (size > maxSize)
|
|
1117
|
+
imageScale = Math.sqrt(size / maxSize);
|
|
1118
|
+
if (imageScale) {
|
|
1119
|
+
scaleX /= imageScale;
|
|
1120
|
+
scaleY /= imageScale;
|
|
1121
|
+
width /= imageScale;
|
|
1122
|
+
height /= imageScale;
|
|
1086
1123
|
}
|
|
1087
1124
|
if (sx) {
|
|
1088
1125
|
scaleX /= sx;
|
|
1089
1126
|
scaleY /= sy;
|
|
1090
1127
|
}
|
|
1091
1128
|
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
1092
|
-
if (!
|
|
1093
|
-
|
|
1129
|
+
if (!imageMatrix) {
|
|
1130
|
+
imageMatrix = get$2();
|
|
1094
1131
|
if (transform)
|
|
1095
|
-
copy$1(
|
|
1132
|
+
copy$1(imageMatrix, transform);
|
|
1096
1133
|
}
|
|
1097
|
-
|
|
1134
|
+
scale(imageMatrix, 1 / scaleX, 1 / scaleY);
|
|
1098
1135
|
}
|
|
1099
|
-
const
|
|
1136
|
+
const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), repeat || (Platform.origin.noRepeat || 'no-repeat'));
|
|
1100
1137
|
try {
|
|
1101
1138
|
if (paint.transform)
|
|
1102
1139
|
paint.transform = null;
|
|
1103
|
-
if (
|
|
1104
|
-
|
|
1140
|
+
if (imageMatrix)
|
|
1141
|
+
pattern.setTransform ? pattern.setTransform(imageMatrix) : paint.transform = imageMatrix;
|
|
1105
1142
|
}
|
|
1106
1143
|
catch (_a) {
|
|
1107
|
-
paint.transform =
|
|
1144
|
+
paint.transform = imageMatrix;
|
|
1108
1145
|
}
|
|
1109
|
-
paint.style =
|
|
1146
|
+
paint.style = pattern;
|
|
1147
|
+
paint.patternId = id;
|
|
1110
1148
|
return true;
|
|
1111
1149
|
}
|
|
1112
1150
|
else {
|
|
@@ -1114,18 +1152,24 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1114
1152
|
}
|
|
1115
1153
|
}
|
|
1116
1154
|
|
|
1155
|
+
const { abs } = Math;
|
|
1117
1156
|
function checkImage(ui, canvas, paint, allowPaint) {
|
|
1118
1157
|
const { scaleX, scaleY } = ui.__world;
|
|
1119
1158
|
if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
|
|
1120
1159
|
return false;
|
|
1121
1160
|
}
|
|
1122
1161
|
else {
|
|
1162
|
+
const { data } = paint;
|
|
1123
1163
|
if (allowPaint) {
|
|
1124
|
-
if (
|
|
1125
|
-
let { width, height } =
|
|
1126
|
-
width *= scaleX * canvas.pixelRatio;
|
|
1127
|
-
height *= scaleY * canvas.pixelRatio;
|
|
1128
|
-
|
|
1164
|
+
if (!data.repeat) {
|
|
1165
|
+
let { width, height } = data;
|
|
1166
|
+
width *= abs(scaleX) * canvas.pixelRatio;
|
|
1167
|
+
height *= abs(scaleY) * canvas.pixelRatio;
|
|
1168
|
+
if (data.scaleX) {
|
|
1169
|
+
width *= data.scaleX;
|
|
1170
|
+
height *= data.scaleY;
|
|
1171
|
+
}
|
|
1172
|
+
allowPaint = width * height > Platform.image.maxCacheSize;
|
|
1129
1173
|
}
|
|
1130
1174
|
else {
|
|
1131
1175
|
allowPaint = false;
|
|
@@ -1134,7 +1178,6 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1134
1178
|
if (allowPaint) {
|
|
1135
1179
|
canvas.save();
|
|
1136
1180
|
canvas.clip();
|
|
1137
|
-
const { data } = paint;
|
|
1138
1181
|
if (paint.blendMode)
|
|
1139
1182
|
canvas.blendMode = paint.blendMode;
|
|
1140
1183
|
if (data.opacity)
|
|
@@ -1146,7 +1189,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1146
1189
|
return true;
|
|
1147
1190
|
}
|
|
1148
1191
|
else {
|
|
1149
|
-
if (!paint.style) {
|
|
1192
|
+
if (!paint.style || Export$1.running) {
|
|
1150
1193
|
createPattern(ui, paint, canvas.pixelRatio);
|
|
1151
1194
|
}
|
|
1152
1195
|
else {
|
|
@@ -1165,7 +1208,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1165
1208
|
}
|
|
1166
1209
|
|
|
1167
1210
|
function recycleImage(attrName, data) {
|
|
1168
|
-
const paints =
|
|
1211
|
+
const paints = data['_' + attrName];
|
|
1169
1212
|
if (paints instanceof Array) {
|
|
1170
1213
|
let image, recycleMap, input, url;
|
|
1171
1214
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
@@ -1269,7 +1312,7 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas, renderOptions) {
|
|
|
1269
1312
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
1270
1313
|
fillText(ui, out);
|
|
1271
1314
|
out.blendMode = 'normal';
|
|
1272
|
-
if (ui.
|
|
1315
|
+
if (ui.__worldFlipped || renderOptions.matrix) {
|
|
1273
1316
|
canvas.copyWorldByReset(out);
|
|
1274
1317
|
}
|
|
1275
1318
|
else {
|
|
@@ -1342,7 +1385,7 @@ function stroke(stroke, ui, canvas, renderOptions) {
|
|
|
1342
1385
|
out.stroke();
|
|
1343
1386
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1344
1387
|
out.clearWorld(ui.__layout.renderBounds);
|
|
1345
|
-
if (ui.
|
|
1388
|
+
if (ui.__worldFlipped || renderOptions.matrix) {
|
|
1346
1389
|
canvas.copyWorldByReset(out);
|
|
1347
1390
|
}
|
|
1348
1391
|
else {
|
|
@@ -1382,7 +1425,7 @@ function strokes(strokes, ui, canvas, renderOptions) {
|
|
|
1382
1425
|
drawStrokesStyle(strokes, false, ui, out);
|
|
1383
1426
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1384
1427
|
out.clearWorld(renderBounds);
|
|
1385
|
-
if (ui.
|
|
1428
|
+
if (ui.__worldFlipped || renderOptions.matrix) {
|
|
1386
1429
|
canvas.copyWorldByReset(out);
|
|
1387
1430
|
}
|
|
1388
1431
|
else {
|
|
@@ -1606,7 +1649,7 @@ function shadow(ui, current, shape, renderOptions) {
|
|
|
1606
1649
|
}
|
|
1607
1650
|
worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
|
|
1608
1651
|
}
|
|
1609
|
-
if (ui.
|
|
1652
|
+
if (ui.__worldFlipped || renderOptions.matrix) {
|
|
1610
1653
|
current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
|
|
1611
1654
|
}
|
|
1612
1655
|
else {
|
|
@@ -1670,7 +1713,7 @@ function innerShadow(ui, current, shape, renderOptions) {
|
|
|
1670
1713
|
copyBounds = bounds;
|
|
1671
1714
|
}
|
|
1672
1715
|
other.fillWorld(copyBounds, item.color, 'source-in');
|
|
1673
|
-
if (ui.
|
|
1716
|
+
if (ui.__worldFlipped || renderOptions.matrix) {
|
|
1674
1717
|
current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
|
|
1675
1718
|
}
|
|
1676
1719
|
else {
|
|
@@ -2118,6 +2161,7 @@ function decorationText(drawData, style) {
|
|
|
2118
2161
|
}
|
|
2119
2162
|
}
|
|
2120
2163
|
|
|
2164
|
+
const { top, right, bottom, left } = Direction4;
|
|
2121
2165
|
const TextConvert = {
|
|
2122
2166
|
getDrawData(content, style) {
|
|
2123
2167
|
if (typeof content !== 'string')
|
|
@@ -2125,16 +2169,15 @@ const TextConvert = {
|
|
|
2125
2169
|
let x = 0, y = 0;
|
|
2126
2170
|
let width = style.__getInput('width') || 0;
|
|
2127
2171
|
let height = style.__getInput('height') || 0;
|
|
2128
|
-
const { textDecoration, __font, padding } = style;
|
|
2172
|
+
const { textDecoration, __font, __padding: padding } = style;
|
|
2129
2173
|
if (padding) {
|
|
2130
|
-
const [top, right, bottom, left] = MathHelper.fourNumber(padding);
|
|
2131
2174
|
if (width) {
|
|
2132
|
-
x = left;
|
|
2133
|
-
width -= (right + left);
|
|
2175
|
+
x = padding[left];
|
|
2176
|
+
width -= (padding[right] + padding[left]);
|
|
2134
2177
|
}
|
|
2135
2178
|
if (height) {
|
|
2136
|
-
y = top;
|
|
2137
|
-
height -= (top + bottom);
|
|
2179
|
+
y = padding[top];
|
|
2180
|
+
height -= (padding[top] + padding[bottom]);
|
|
2138
2181
|
}
|
|
2139
2182
|
}
|
|
2140
2183
|
const drawData = {
|
|
@@ -2144,6 +2187,8 @@ const TextConvert = {
|
|
|
2144
2187
|
font: Platform.canvas.font = __font
|
|
2145
2188
|
};
|
|
2146
2189
|
createRows(drawData, content, style);
|
|
2190
|
+
if (padding)
|
|
2191
|
+
padAutoText(padding, drawData, style, width, height);
|
|
2147
2192
|
layoutText(drawData, style);
|
|
2148
2193
|
layoutChar(drawData, style, width);
|
|
2149
2194
|
if (drawData.overflow)
|
|
@@ -2153,6 +2198,32 @@ const TextConvert = {
|
|
|
2153
2198
|
return drawData;
|
|
2154
2199
|
}
|
|
2155
2200
|
};
|
|
2201
|
+
function padAutoText(padding, drawData, style, width, height) {
|
|
2202
|
+
if (!width) {
|
|
2203
|
+
switch (style.textAlign) {
|
|
2204
|
+
case 'left':
|
|
2205
|
+
offsetText(drawData, 'x', padding[left]);
|
|
2206
|
+
break;
|
|
2207
|
+
case 'right':
|
|
2208
|
+
offsetText(drawData, 'x', -padding[right]);
|
|
2209
|
+
}
|
|
2210
|
+
}
|
|
2211
|
+
if (!height) {
|
|
2212
|
+
switch (style.verticalAlign) {
|
|
2213
|
+
case 'top':
|
|
2214
|
+
offsetText(drawData, 'y', padding[top]);
|
|
2215
|
+
break;
|
|
2216
|
+
case 'bottom':
|
|
2217
|
+
offsetText(drawData, 'y', -padding[bottom]);
|
|
2218
|
+
}
|
|
2219
|
+
}
|
|
2220
|
+
}
|
|
2221
|
+
function offsetText(drawData, attrName, value) {
|
|
2222
|
+
const { bounds, rows } = drawData;
|
|
2223
|
+
bounds[attrName] += value;
|
|
2224
|
+
for (let i = 0; i < rows.length; i++)
|
|
2225
|
+
rows[i][attrName] += value;
|
|
2226
|
+
}
|
|
2156
2227
|
|
|
2157
2228
|
const ColorConvert = {
|
|
2158
2229
|
string(color, opacity) {
|
|
@@ -2168,6 +2239,7 @@ const ColorConvert = {
|
|
|
2168
2239
|
|
|
2169
2240
|
const Export = {
|
|
2170
2241
|
export(leaf, filename, options) {
|
|
2242
|
+
Export.running = true;
|
|
2171
2243
|
return addTask((success) => new Promise((resolve) => {
|
|
2172
2244
|
const { leafer } = leaf;
|
|
2173
2245
|
if (leafer) {
|
|
@@ -2205,6 +2277,7 @@ const Export = {
|
|
|
2205
2277
|
}
|
|
2206
2278
|
success({ data });
|
|
2207
2279
|
resolve();
|
|
2280
|
+
Export.running = false;
|
|
2208
2281
|
if (unreal)
|
|
2209
2282
|
canvas.recycle();
|
|
2210
2283
|
}));
|
|
@@ -2212,6 +2285,7 @@ const Export = {
|
|
|
2212
2285
|
else {
|
|
2213
2286
|
success({ data: false });
|
|
2214
2287
|
resolve();
|
|
2288
|
+
Export.running = false;
|
|
2215
2289
|
}
|
|
2216
2290
|
}));
|
|
2217
2291
|
}
|
|
@@ -2229,6 +2303,6 @@ Object.assign(Paint, UIPaint);
|
|
|
2229
2303
|
Object.assign(Effect, UIEffect);
|
|
2230
2304
|
Object.assign(TextConvert$1, TextConvert);
|
|
2231
2305
|
Object.assign(ColorConvert$1, ColorConvert);
|
|
2232
|
-
Object.assign(Export$
|
|
2306
|
+
Object.assign(Export$2, Export);
|
|
2233
2307
|
|
|
2234
2308
|
export { Layouter, LeaferCanvas, Renderer, Selector, Watcher, useCanvas };
|