@leafer-ui/node 1.6.2 → 1.6.3
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 +172 -179
- package/dist/node.esm.js +182 -189
- 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
|
@@ -174,17 +174,15 @@ class Watcher {
|
|
|
174
174
|
this.target.emitEvent(new core.WatchEvent(core.WatchEvent.DATA, { updatedList: this.updatedList }));
|
|
175
175
|
this.__updatedList = new core.LeafList();
|
|
176
176
|
this.totalTimes++;
|
|
177
|
-
this.changed = false;
|
|
178
|
-
this.hasVisible = false;
|
|
179
|
-
this.hasRemove = false;
|
|
180
|
-
this.hasAdd = false;
|
|
177
|
+
this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false;
|
|
181
178
|
}
|
|
182
179
|
__listenEvents() {
|
|
183
|
-
const { target } = this;
|
|
184
180
|
this.__eventIds = [
|
|
185
|
-
target.on_(
|
|
186
|
-
|
|
187
|
-
|
|
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
|
+
])
|
|
188
186
|
];
|
|
189
187
|
}
|
|
190
188
|
__removeListenEvents() {
|
|
@@ -194,8 +192,7 @@ class Watcher {
|
|
|
194
192
|
if (this.target) {
|
|
195
193
|
this.stop();
|
|
196
194
|
this.__removeListenEvents();
|
|
197
|
-
this.target = null;
|
|
198
|
-
this.__updatedList = null;
|
|
195
|
+
this.target = this.__updatedList = null;
|
|
199
196
|
}
|
|
200
197
|
}
|
|
201
198
|
}
|
|
@@ -300,7 +297,7 @@ class Layouter {
|
|
|
300
297
|
this.disabled = true;
|
|
301
298
|
}
|
|
302
299
|
layout() {
|
|
303
|
-
if (!this.running)
|
|
300
|
+
if (this.layouting || !this.running)
|
|
304
301
|
return;
|
|
305
302
|
const { target } = this;
|
|
306
303
|
this.times = 0;
|
|
@@ -383,12 +380,10 @@ class Layouter {
|
|
|
383
380
|
}
|
|
384
381
|
static fullLayout(target) {
|
|
385
382
|
updateAllMatrix(target, true);
|
|
386
|
-
if (target.isBranch)
|
|
383
|
+
if (target.isBranch)
|
|
387
384
|
core.BranchHelper.updateBounds(target);
|
|
388
|
-
|
|
389
|
-
else {
|
|
385
|
+
else
|
|
390
386
|
core.LeafHelper.updateBounds(target);
|
|
391
|
-
}
|
|
392
387
|
updateAllChange(target);
|
|
393
388
|
}
|
|
394
389
|
addExtra(leaf) {
|
|
@@ -411,11 +406,12 @@ class Layouter {
|
|
|
411
406
|
this.__updatedList = event.data.updatedList;
|
|
412
407
|
}
|
|
413
408
|
__listenEvents() {
|
|
414
|
-
const { target } = this;
|
|
415
409
|
this.__eventIds = [
|
|
416
|
-
target.on_(
|
|
417
|
-
|
|
418
|
-
|
|
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
|
+
])
|
|
419
415
|
];
|
|
420
416
|
}
|
|
421
417
|
__removeListenEvents() {
|
|
@@ -646,12 +642,13 @@ class Renderer {
|
|
|
646
642
|
this.target.emitEvent(new core.RenderEvent(type, this.times, bounds, options));
|
|
647
643
|
}
|
|
648
644
|
__listenEvents() {
|
|
649
|
-
const { target } = this;
|
|
650
645
|
this.__eventIds = [
|
|
651
|
-
target.on_(
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
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
|
+
])
|
|
655
652
|
];
|
|
656
653
|
}
|
|
657
654
|
__removeListenEvents() {
|
|
@@ -894,32 +891,34 @@ function fillPathOrText(ui, canvas) {
|
|
|
894
891
|
ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
|
|
895
892
|
}
|
|
896
893
|
|
|
894
|
+
const Paint = {};
|
|
895
|
+
|
|
897
896
|
function strokeText(stroke, ui, canvas) {
|
|
898
|
-
|
|
899
|
-
const isStrokes = typeof stroke !== 'string';
|
|
900
|
-
switch (strokeAlign) {
|
|
897
|
+
switch (ui.__.strokeAlign) {
|
|
901
898
|
case 'center':
|
|
902
|
-
|
|
903
|
-
isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
|
|
899
|
+
drawCenter$1(stroke, 1, ui, canvas);
|
|
904
900
|
break;
|
|
905
901
|
case 'inside':
|
|
906
|
-
|
|
902
|
+
drawAlign(stroke, 'inside', ui, canvas);
|
|
907
903
|
break;
|
|
908
904
|
case 'outside':
|
|
909
|
-
|
|
905
|
+
ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas);
|
|
910
906
|
break;
|
|
911
907
|
}
|
|
912
908
|
}
|
|
913
|
-
function
|
|
914
|
-
const
|
|
909
|
+
function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
|
|
910
|
+
const data = ui.__;
|
|
911
|
+
canvas.setStroke(!data.__isStrokes && stroke, data.strokeWidth * strokeWidthScale, data);
|
|
912
|
+
data.__isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
|
|
913
|
+
}
|
|
914
|
+
function drawAlign(stroke, align, ui, canvas) {
|
|
915
915
|
const out = canvas.getSameCanvas(true, true);
|
|
916
|
-
out.
|
|
917
|
-
|
|
918
|
-
isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
|
|
916
|
+
out.font = ui.__.__font;
|
|
917
|
+
drawCenter$1(stroke, 2, ui, out);
|
|
919
918
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
920
919
|
fillText(ui, out);
|
|
921
920
|
out.blendMode = 'normal';
|
|
922
|
-
if (ui.__worldFlipped)
|
|
921
|
+
if (ui.__worldFlipped || core$1.Platform.fullImageShadow)
|
|
923
922
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
924
923
|
else
|
|
925
924
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
@@ -961,90 +960,60 @@ function drawStrokesStyle(strokes, isText, ui, canvas) {
|
|
|
961
960
|
}
|
|
962
961
|
|
|
963
962
|
function stroke(stroke, ui, canvas) {
|
|
964
|
-
const
|
|
965
|
-
|
|
966
|
-
if (!__strokeWidth)
|
|
963
|
+
const data = ui.__;
|
|
964
|
+
if (!data.__strokeWidth)
|
|
967
965
|
return;
|
|
968
|
-
if (__font) {
|
|
966
|
+
if (data.__font) {
|
|
969
967
|
strokeText(stroke, ui, canvas);
|
|
970
968
|
}
|
|
971
969
|
else {
|
|
972
|
-
switch (strokeAlign) {
|
|
970
|
+
switch (data.strokeAlign) {
|
|
973
971
|
case 'center':
|
|
974
|
-
|
|
975
|
-
canvas.stroke();
|
|
976
|
-
if (options.__useArrow)
|
|
977
|
-
strokeArrow(ui, canvas);
|
|
972
|
+
drawCenter(stroke, 1, ui, canvas);
|
|
978
973
|
break;
|
|
979
974
|
case 'inside':
|
|
980
|
-
canvas
|
|
981
|
-
canvas.setStroke(stroke, __strokeWidth * 2, options);
|
|
982
|
-
options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
|
|
983
|
-
canvas.stroke();
|
|
984
|
-
canvas.restore();
|
|
975
|
+
drawInside(stroke, ui, canvas);
|
|
985
976
|
break;
|
|
986
977
|
case 'outside':
|
|
987
|
-
|
|
988
|
-
out.setStroke(stroke, __strokeWidth * 2, options);
|
|
989
|
-
ui.__drawRenderPath(out);
|
|
990
|
-
out.stroke();
|
|
991
|
-
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
992
|
-
out.clearWorld(ui.__layout.renderBounds);
|
|
993
|
-
if (ui.__worldFlipped)
|
|
994
|
-
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
995
|
-
else
|
|
996
|
-
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
997
|
-
out.recycle(ui.__nowWorld);
|
|
978
|
+
drawOutside(stroke, ui, canvas);
|
|
998
979
|
break;
|
|
999
980
|
}
|
|
1000
981
|
}
|
|
1001
982
|
}
|
|
1002
983
|
function strokes(strokes, ui, canvas) {
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
984
|
+
stroke(strokes, ui, canvas);
|
|
985
|
+
}
|
|
986
|
+
function drawCenter(stroke, strokeWidthScale, ui, canvas) {
|
|
987
|
+
const data = ui.__;
|
|
988
|
+
canvas.setStroke(!data.__isStrokes && stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
989
|
+
data.__isStrokes ? drawStrokesStyle(stroke, false, ui, canvas) : canvas.stroke();
|
|
990
|
+
if (data.__useArrow)
|
|
991
|
+
Paint.strokeArrow(stroke, ui, canvas);
|
|
992
|
+
}
|
|
993
|
+
function drawInside(stroke, ui, canvas) {
|
|
994
|
+
const data = ui.__;
|
|
995
|
+
canvas.save();
|
|
996
|
+
data.windingRule ? canvas.clip(data.windingRule) : canvas.clip();
|
|
997
|
+
drawCenter(stroke, 2, ui, canvas);
|
|
998
|
+
canvas.restore();
|
|
999
|
+
}
|
|
1000
|
+
function drawOutside(stroke, ui, canvas) {
|
|
1001
|
+
const data = ui.__;
|
|
1002
|
+
if (data.__fillAfterStroke) {
|
|
1003
|
+
drawCenter(stroke, 2, ui, canvas);
|
|
1009
1004
|
}
|
|
1010
1005
|
else {
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
drawStrokesStyle(strokes, false, ui, canvas);
|
|
1023
|
-
canvas.restore();
|
|
1024
|
-
break;
|
|
1025
|
-
case 'outside':
|
|
1026
|
-
const { renderBounds } = ui.__layout;
|
|
1027
|
-
const out = canvas.getSameCanvas(true, true);
|
|
1028
|
-
ui.__drawRenderPath(out);
|
|
1029
|
-
out.setStroke(undefined, __strokeWidth * 2, options);
|
|
1030
|
-
drawStrokesStyle(strokes, false, ui, out);
|
|
1031
|
-
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
1032
|
-
out.clearWorld(renderBounds);
|
|
1033
|
-
if (ui.__worldFlipped)
|
|
1034
|
-
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1035
|
-
else
|
|
1036
|
-
canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
|
|
1037
|
-
out.recycle(ui.__nowWorld);
|
|
1038
|
-
break;
|
|
1039
|
-
}
|
|
1040
|
-
}
|
|
1041
|
-
}
|
|
1042
|
-
function strokeArrow(ui, canvas) {
|
|
1043
|
-
if (ui.__.dashPattern) {
|
|
1044
|
-
canvas.beginPath();
|
|
1045
|
-
ui.__drawPathByData(canvas, ui.__.__pathForArrow);
|
|
1046
|
-
canvas.dashPattern = null;
|
|
1047
|
-
canvas.stroke();
|
|
1006
|
+
const { renderBounds } = ui.__layout;
|
|
1007
|
+
const out = canvas.getSameCanvas(true, true);
|
|
1008
|
+
ui.__drawRenderPath(out);
|
|
1009
|
+
drawCenter(stroke, 2, ui, out);
|
|
1010
|
+
data.windingRule ? out.clip(data.windingRule) : out.clip();
|
|
1011
|
+
out.clearWorld(renderBounds);
|
|
1012
|
+
if (ui.__worldFlipped || core$1.Platform.fullImageShadow)
|
|
1013
|
+
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
1014
|
+
else
|
|
1015
|
+
canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
|
|
1016
|
+
out.recycle(ui.__nowWorld);
|
|
1048
1017
|
}
|
|
1049
1018
|
}
|
|
1050
1019
|
|
|
@@ -1091,9 +1060,10 @@ function shape(ui, current, options) {
|
|
|
1091
1060
|
}
|
|
1092
1061
|
|
|
1093
1062
|
let recycleMap;
|
|
1063
|
+
const { stintSet } = core.DataHelper, { hasTransparent: hasTransparent$1 } = draw.ColorConvert;
|
|
1094
1064
|
function compute(attrName, ui) {
|
|
1095
1065
|
const data = ui.__, leafPaints = [];
|
|
1096
|
-
let paints = data.__input[attrName],
|
|
1066
|
+
let paints = data.__input[attrName], isAlphaPixel, isTransparent;
|
|
1097
1067
|
if (!(paints instanceof Array))
|
|
1098
1068
|
paints = [paints];
|
|
1099
1069
|
recycleMap = draw.PaintImage.recycleImage(attrName, data);
|
|
@@ -1103,29 +1073,55 @@ function compute(attrName, ui) {
|
|
|
1103
1073
|
leafPaints.push(item);
|
|
1104
1074
|
}
|
|
1105
1075
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
1106
|
-
if (leafPaints.length
|
|
1107
|
-
|
|
1108
|
-
|
|
1076
|
+
if (leafPaints.length) {
|
|
1077
|
+
if (leafPaints.every(item => item.isTransparent)) {
|
|
1078
|
+
if (leafPaints.some(item => item.image))
|
|
1079
|
+
isAlphaPixel = true;
|
|
1080
|
+
isTransparent = true;
|
|
1081
|
+
}
|
|
1082
|
+
}
|
|
1083
|
+
if (attrName === 'fill') {
|
|
1084
|
+
stintSet(data, '__isAlphaPixelFill', isAlphaPixel);
|
|
1085
|
+
stintSet(data, '__isTransparentFill', isTransparent);
|
|
1086
|
+
}
|
|
1087
|
+
else {
|
|
1088
|
+
stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
|
|
1089
|
+
stintSet(data, '__isTransparentStroke', isTransparent);
|
|
1090
|
+
}
|
|
1109
1091
|
}
|
|
1110
1092
|
function getLeafPaint(attrName, paint, ui) {
|
|
1111
1093
|
if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
|
|
1112
1094
|
return undefined;
|
|
1095
|
+
let data;
|
|
1113
1096
|
const { boxBounds } = ui.__layout;
|
|
1114
1097
|
switch (paint.type) {
|
|
1115
|
-
case 'solid':
|
|
1116
|
-
let { type, blendMode, color, opacity } = paint;
|
|
1117
|
-
return { type, blendMode, style: draw.ColorConvert.string(color, opacity) };
|
|
1118
1098
|
case 'image':
|
|
1119
|
-
|
|
1099
|
+
data = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
|
|
1100
|
+
break;
|
|
1120
1101
|
case 'linear':
|
|
1121
|
-
|
|
1102
|
+
data = draw.PaintGradient.linearGradient(paint, boxBounds);
|
|
1103
|
+
break;
|
|
1122
1104
|
case 'radial':
|
|
1123
|
-
|
|
1105
|
+
data = draw.PaintGradient.radialGradient(paint, boxBounds);
|
|
1106
|
+
break;
|
|
1124
1107
|
case 'angular':
|
|
1125
|
-
|
|
1108
|
+
data = draw.PaintGradient.conicGradient(paint, boxBounds);
|
|
1109
|
+
break;
|
|
1110
|
+
case 'solid':
|
|
1111
|
+
const { type, blendMode, color, opacity } = paint;
|
|
1112
|
+
data = { type, blendMode, style: draw.ColorConvert.string(color, opacity) };
|
|
1113
|
+
break;
|
|
1126
1114
|
default:
|
|
1127
|
-
|
|
1115
|
+
if (paint.r !== undefined)
|
|
1116
|
+
data = { type: 'solid', style: draw.ColorConvert.string(paint) };
|
|
1117
|
+
}
|
|
1118
|
+
if (data) {
|
|
1119
|
+
if (typeof data.style === 'string' && hasTransparent$1(data.style))
|
|
1120
|
+
data.isTransparent = true;
|
|
1121
|
+
if (paint.blendMode)
|
|
1122
|
+
data.blendMode = paint.blendMode;
|
|
1128
1123
|
}
|
|
1124
|
+
return data;
|
|
1129
1125
|
}
|
|
1130
1126
|
|
|
1131
1127
|
const PaintModule = {
|
|
@@ -1191,12 +1187,10 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
|
|
|
1191
1187
|
|
|
1192
1188
|
const { get: get$2, translate } = core.MatrixHelper;
|
|
1193
1189
|
const tempBox = new core.Bounds();
|
|
1194
|
-
const tempPoint = {};
|
|
1195
1190
|
const tempScaleData = {};
|
|
1191
|
+
const tempImage = {};
|
|
1196
1192
|
function createData(leafPaint, image, paint, box) {
|
|
1197
|
-
const {
|
|
1198
|
-
if (blendMode)
|
|
1199
|
-
leafPaint.blendMode = blendMode;
|
|
1193
|
+
const { changeful, sync } = paint;
|
|
1200
1194
|
if (changeful)
|
|
1201
1195
|
leafPaint.changeful = changeful;
|
|
1202
1196
|
if (sync)
|
|
@@ -1204,38 +1198,38 @@ function createData(leafPaint, image, paint, box) {
|
|
|
1204
1198
|
leafPaint.data = getPatternData(paint, box, image);
|
|
1205
1199
|
}
|
|
1206
1200
|
function getPatternData(paint, box, image) {
|
|
1207
|
-
let { width, height } = image;
|
|
1208
1201
|
if (paint.padding)
|
|
1209
1202
|
box = tempBox.set(box).shrink(paint.padding);
|
|
1210
1203
|
if (paint.mode === 'strench')
|
|
1211
1204
|
paint.mode = 'stretch';
|
|
1205
|
+
let { width, height } = image;
|
|
1212
1206
|
const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
|
|
1213
1207
|
const sameBox = box.width === width && box.height === height;
|
|
1214
1208
|
const data = { mode };
|
|
1215
1209
|
const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
|
|
1216
|
-
|
|
1217
|
-
let
|
|
1210
|
+
core.BoundsHelper.set(tempImage, 0, 0, swapSize ? height : width, swapSize ? width : height);
|
|
1211
|
+
let scaleX, scaleY;
|
|
1218
1212
|
if (!mode || mode === 'cover' || mode === 'fit') {
|
|
1219
1213
|
if (!sameBox || rotation) {
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1214
|
+
scaleX = scaleY = core.BoundsHelper.getFitScale(box, tempImage, mode !== 'fit');
|
|
1215
|
+
core.BoundsHelper.put(box, image, align, scaleX, false, tempImage);
|
|
1216
|
+
core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
|
|
1223
1217
|
}
|
|
1224
1218
|
}
|
|
1225
|
-
else
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1219
|
+
else {
|
|
1220
|
+
if (scale || size) {
|
|
1221
|
+
core.MathHelper.getScaleData(scale, size, image, tempScaleData);
|
|
1222
|
+
scaleX = tempScaleData.scaleX;
|
|
1223
|
+
scaleY = tempScaleData.scaleY;
|
|
1224
|
+
}
|
|
1225
|
+
if (align) {
|
|
1226
|
+
if (scaleX)
|
|
1227
|
+
core.BoundsHelper.scale(tempImage, scaleX, scaleY, true);
|
|
1228
|
+
core.AlignHelper.toPoint(align, tempImage, box, tempImage, true, true);
|
|
1229
|
+
}
|
|
1236
1230
|
}
|
|
1237
1231
|
if (offset)
|
|
1238
|
-
|
|
1232
|
+
core.PointHelper.move(tempImage, offset);
|
|
1239
1233
|
switch (mode) {
|
|
1240
1234
|
case 'stretch':
|
|
1241
1235
|
if (!sameBox)
|
|
@@ -1243,12 +1237,12 @@ function getPatternData(paint, box, image) {
|
|
|
1243
1237
|
break;
|
|
1244
1238
|
case 'normal':
|
|
1245
1239
|
case 'clip':
|
|
1246
|
-
if (x || y || scaleX || rotation)
|
|
1247
|
-
clipMode(data, box, x, y, scaleX, scaleY, rotation);
|
|
1240
|
+
if (tempImage.x || tempImage.y || scaleX || rotation)
|
|
1241
|
+
clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
|
|
1248
1242
|
break;
|
|
1249
1243
|
case 'repeat':
|
|
1250
1244
|
if (!sameBox || scaleX || rotation)
|
|
1251
|
-
repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align);
|
|
1245
|
+
repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, align);
|
|
1252
1246
|
if (!repeat)
|
|
1253
1247
|
data.repeat = 'repeat';
|
|
1254
1248
|
break;
|
|
@@ -1256,7 +1250,7 @@ function getPatternData(paint, box, image) {
|
|
|
1256
1250
|
case 'cover':
|
|
1257
1251
|
default:
|
|
1258
1252
|
if (scaleX)
|
|
1259
|
-
fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
|
|
1253
|
+
fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
|
|
1260
1254
|
}
|
|
1261
1255
|
if (!data.transform) {
|
|
1262
1256
|
if (box.x || box.y) {
|
|
@@ -1289,6 +1283,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
|
|
|
1289
1283
|
}
|
|
1290
1284
|
else {
|
|
1291
1285
|
leafPaint = { type: paint.type, image };
|
|
1286
|
+
if (image.hasAlphaPixel)
|
|
1287
|
+
leafPaint.isTransparent = true;
|
|
1292
1288
|
cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
|
|
1293
1289
|
}
|
|
1294
1290
|
if (firstUse || image.loading)
|
|
@@ -1313,7 +1309,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
|
|
|
1313
1309
|
ignoreRender(ui, false);
|
|
1314
1310
|
if (!ui.destroyed) {
|
|
1315
1311
|
if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
|
|
1316
|
-
if (image.
|
|
1312
|
+
if (image.hasAlphaPixel)
|
|
1317
1313
|
ui.__layout.hitCanvasChanged = true;
|
|
1318
1314
|
ui.forceUpdate('surface');
|
|
1319
1315
|
}
|
|
@@ -1325,13 +1321,17 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
|
|
|
1325
1321
|
onLoadError(ui, event, error);
|
|
1326
1322
|
leafPaint.loadId = null;
|
|
1327
1323
|
});
|
|
1328
|
-
if (ui.placeholderColor)
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1324
|
+
if (ui.placeholderColor) {
|
|
1325
|
+
if (!ui.placeholderDelay)
|
|
1326
|
+
image.isPlacehold = true;
|
|
1327
|
+
else
|
|
1328
|
+
setTimeout(() => {
|
|
1329
|
+
if (!image.ready) {
|
|
1330
|
+
image.isPlacehold = true;
|
|
1331
|
+
ui.forceUpdate('surface');
|
|
1332
|
+
}
|
|
1333
|
+
}, ui.placeholderDelay);
|
|
1334
|
+
}
|
|
1335
1335
|
}
|
|
1336
1336
|
return leafPaint;
|
|
1337
1337
|
}
|
|
@@ -1537,32 +1537,33 @@ const PaintImageModule = {
|
|
|
1537
1537
|
repeatMode
|
|
1538
1538
|
};
|
|
1539
1539
|
|
|
1540
|
-
const { toPoint: toPoint$2 } = core.AroundHelper;
|
|
1540
|
+
const { toPoint: toPoint$2 } = core.AroundHelper, { hasTransparent } = draw.ColorConvert;
|
|
1541
1541
|
const realFrom$2 = {};
|
|
1542
1542
|
const realTo$2 = {};
|
|
1543
1543
|
function linearGradient(paint, box) {
|
|
1544
|
-
let { from, to, type,
|
|
1544
|
+
let { from, to, type, opacity } = paint;
|
|
1545
1545
|
toPoint$2(from || 'top', box, realFrom$2);
|
|
1546
1546
|
toPoint$2(to || 'bottom', box, realTo$2);
|
|
1547
1547
|
const style = core.Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
|
|
1548
|
-
applyStops(style, paint.stops, opacity);
|
|
1549
1548
|
const data = { type, style };
|
|
1550
|
-
|
|
1551
|
-
data.blendMode = blendMode;
|
|
1549
|
+
applyStops(data, style, paint.stops, opacity);
|
|
1552
1550
|
return data;
|
|
1553
1551
|
}
|
|
1554
|
-
function applyStops(gradient, stops, opacity) {
|
|
1552
|
+
function applyStops(data, gradient, stops, opacity) {
|
|
1555
1553
|
if (stops) {
|
|
1556
|
-
let stop;
|
|
1554
|
+
let stop, color, offset, isTransparent;
|
|
1557
1555
|
for (let i = 0, len = stops.length; i < len; i++) {
|
|
1558
1556
|
stop = stops[i];
|
|
1559
|
-
if (typeof stop === 'string')
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1557
|
+
if (typeof stop === 'string')
|
|
1558
|
+
offset = i / (len - 1), color = draw.ColorConvert.string(stop, opacity);
|
|
1559
|
+
else
|
|
1560
|
+
offset = stop.offset, color = draw.ColorConvert.string(stop.color, opacity);
|
|
1561
|
+
gradient.addColorStop(offset, color);
|
|
1562
|
+
if (!isTransparent && hasTransparent(color))
|
|
1563
|
+
isTransparent = true;
|
|
1565
1564
|
}
|
|
1565
|
+
if (isTransparent)
|
|
1566
|
+
data.isTransparent = true;
|
|
1566
1567
|
}
|
|
1567
1568
|
}
|
|
1568
1569
|
|
|
@@ -1572,17 +1573,15 @@ const { toPoint: toPoint$1 } = core.AroundHelper;
|
|
|
1572
1573
|
const realFrom$1 = {};
|
|
1573
1574
|
const realTo$1 = {};
|
|
1574
1575
|
function radialGradient(paint, box) {
|
|
1575
|
-
let { from, to, type, opacity,
|
|
1576
|
+
let { from, to, type, opacity, stretch } = paint;
|
|
1576
1577
|
toPoint$1(from || 'center', box, realFrom$1);
|
|
1577
1578
|
toPoint$1(to || 'bottom', box, realTo$1);
|
|
1578
1579
|
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));
|
|
1579
|
-
applyStops(style, paint.stops, opacity);
|
|
1580
1580
|
const data = { type, style };
|
|
1581
|
+
applyStops(data, style, paint.stops, opacity);
|
|
1581
1582
|
const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
|
|
1582
1583
|
if (transform)
|
|
1583
1584
|
data.transform = transform;
|
|
1584
|
-
if (blendMode)
|
|
1585
|
-
data.blendMode = blendMode;
|
|
1586
1585
|
return data;
|
|
1587
1586
|
}
|
|
1588
1587
|
function getTransform(box, from, to, stretch, rotate90) {
|
|
@@ -1608,17 +1607,15 @@ const { toPoint } = core.AroundHelper;
|
|
|
1608
1607
|
const realFrom = {};
|
|
1609
1608
|
const realTo = {};
|
|
1610
1609
|
function conicGradient(paint, box) {
|
|
1611
|
-
let { from, to, type, opacity,
|
|
1610
|
+
let { from, to, type, opacity, stretch } = paint;
|
|
1612
1611
|
toPoint(from || 'center', box, realFrom);
|
|
1613
1612
|
toPoint(to || 'bottom', box, realTo);
|
|
1614
1613
|
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));
|
|
1615
|
-
applyStops(style, paint.stops, opacity);
|
|
1616
1614
|
const data = { type, style };
|
|
1615
|
+
applyStops(data, style, paint.stops, opacity);
|
|
1617
1616
|
const transform = getTransform(box, realFrom, realTo, stretch || 1, core.Platform.conicGradientRotate90);
|
|
1618
1617
|
if (transform)
|
|
1619
1618
|
data.transform = transform;
|
|
1620
|
-
if (blendMode)
|
|
1621
|
-
data.blendMode = blendMode;
|
|
1622
1619
|
return data;
|
|
1623
1620
|
}
|
|
1624
1621
|
|
|
@@ -1951,6 +1948,8 @@ function createRows(drawData, content, style) {
|
|
|
1951
1948
|
lastCharType = null;
|
|
1952
1949
|
startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
|
|
1953
1950
|
word = { data: [] }, row = { words: [] };
|
|
1951
|
+
if (__letterSpacing)
|
|
1952
|
+
content = [...content];
|
|
1954
1953
|
for (let i = 0, len = content.length; i < len; i++) {
|
|
1955
1954
|
char = content[i];
|
|
1956
1955
|
if (char === '\n') {
|
|
@@ -2400,10 +2399,9 @@ const ExportModule = {
|
|
|
2400
2399
|
else {
|
|
2401
2400
|
let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
|
|
2402
2401
|
const { worldTransform, isLeafer, leafer, isFrame } = leaf;
|
|
2403
|
-
const { slice, clip, trim, padding, onCanvas } = options;
|
|
2402
|
+
const { slice, clip, trim, screenshot, padding, onCanvas } = options;
|
|
2404
2403
|
const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
|
|
2405
2404
|
const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
|
|
2406
|
-
const screenshot = options.screenshot || leaf.isApp;
|
|
2407
2405
|
const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
|
|
2408
2406
|
const needFill = draw.FileHelper.isOpaqueImage(filename) || fill, matrix = new draw.Matrix();
|
|
2409
2407
|
if (screenshot) {
|
|
@@ -2439,11 +2437,6 @@ const ExportModule = {
|
|
|
2439
2437
|
const scaleData = { scaleX: 1, scaleY: 1 };
|
|
2440
2438
|
draw.MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
|
|
2441
2439
|
let pixelRatio = options.pixelRatio || 1;
|
|
2442
|
-
if (leaf.isApp) {
|
|
2443
|
-
scaleData.scaleX *= pixelRatio;
|
|
2444
|
-
scaleData.scaleY *= pixelRatio;
|
|
2445
|
-
pixelRatio = leaf.app.pixelRatio;
|
|
2446
|
-
}
|
|
2447
2440
|
let { x, y, width, height } = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
|
|
2448
2441
|
if (clip)
|
|
2449
2442
|
x += clip.x, y += clip.y, width = clip.width, height = clip.height;
|