@leafer-draw/worker 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/worker.cjs +77 -47
- package/dist/worker.esm.js +78 -48
- package/dist/worker.esm.min.js +1 -1
- package/dist/worker.esm.min.js.map +1 -1
- package/dist/worker.js +230 -134
- package/dist/worker.min.cjs +1 -1
- package/dist/worker.min.cjs.map +1 -1
- package/dist/worker.min.js +1 -1
- package/dist/worker.min.js.map +1 -1
- package/dist/worker.module.js +228 -134
- package/dist/worker.module.min.js +1 -1
- package/dist/worker.module.min.js.map +1 -1
- package/package.json +9 -9
package/dist/worker.cjs
CHANGED
|
@@ -697,9 +697,14 @@ function fills(fills, ui, canvas) {
|
|
|
697
697
|
}
|
|
698
698
|
}
|
|
699
699
|
canvas.fillStyle = item.style;
|
|
700
|
-
if (item.transform) {
|
|
700
|
+
if (item.transform || item.scaleFixed) {
|
|
701
701
|
canvas.save();
|
|
702
|
-
|
|
702
|
+
if (item.transform)
|
|
703
|
+
canvas.transform(item.transform);
|
|
704
|
+
if (item.scaleFixed) {
|
|
705
|
+
const { scaleX, scaleY } = ui.getRenderScaleData(true);
|
|
706
|
+
canvas.scale(1 / scaleX, 1 / scaleY);
|
|
707
|
+
}
|
|
703
708
|
if (item.blendMode)
|
|
704
709
|
canvas.blendMode = item.blendMode;
|
|
705
710
|
fillPathOrText(ui, canvas);
|
|
@@ -735,8 +740,13 @@ function strokeText(stroke, ui, canvas) {
|
|
|
735
740
|
}
|
|
736
741
|
function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
|
|
737
742
|
const data = ui.__;
|
|
738
|
-
|
|
739
|
-
|
|
743
|
+
if (typeof stroke === 'object') {
|
|
744
|
+
drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
|
|
745
|
+
}
|
|
746
|
+
else {
|
|
747
|
+
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
748
|
+
drawTextStroke(ui, canvas);
|
|
749
|
+
}
|
|
740
750
|
}
|
|
741
751
|
function drawAlign(stroke, align, ui, canvas) {
|
|
742
752
|
const out = canvas.getSameCanvas(true, true);
|
|
@@ -745,15 +755,9 @@ function drawAlign(stroke, align, ui, canvas) {
|
|
|
745
755
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
746
756
|
fillText(ui, out);
|
|
747
757
|
out.blendMode = 'normal';
|
|
748
|
-
|
|
758
|
+
core.LeafHelper.copyCanvasByWorld(ui, canvas, out);
|
|
749
759
|
out.recycle(ui.__nowWorld);
|
|
750
760
|
}
|
|
751
|
-
function copyWorld(canvas, out, ui) {
|
|
752
|
-
if (ui.__worldFlipped || core.Platform.fullImageShadow)
|
|
753
|
-
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
754
|
-
else
|
|
755
|
-
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
756
|
-
}
|
|
757
761
|
function drawTextStroke(ui, canvas) {
|
|
758
762
|
let row, data = ui.__.__textDrawData;
|
|
759
763
|
const { rows, decorationY } = data;
|
|
@@ -769,14 +773,21 @@ function drawTextStroke(ui, canvas) {
|
|
|
769
773
|
rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
|
|
770
774
|
}
|
|
771
775
|
}
|
|
772
|
-
function drawStrokesStyle(strokes, isText, ui, canvas) {
|
|
776
|
+
function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
|
|
773
777
|
let item;
|
|
778
|
+
const data = ui.__, { __hasMultiStrokeStyle } = data;
|
|
779
|
+
__hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
|
|
774
780
|
for (let i = 0, len = strokes.length; i < len; i++) {
|
|
775
781
|
item = strokes[i];
|
|
776
782
|
if (item.image && draw.PaintImage.checkImage(ui, canvas, item, false))
|
|
777
783
|
continue;
|
|
778
784
|
if (item.style) {
|
|
779
|
-
|
|
785
|
+
if (__hasMultiStrokeStyle) {
|
|
786
|
+
const { strokeStyle } = item;
|
|
787
|
+
strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
|
|
788
|
+
}
|
|
789
|
+
else
|
|
790
|
+
canvas.strokeStyle = item.style;
|
|
780
791
|
if (item.blendMode) {
|
|
781
792
|
canvas.saveBlendMode(item.blendMode);
|
|
782
793
|
isText ? drawTextStroke(ui, canvas) : canvas.stroke();
|
|
@@ -815,8 +826,13 @@ function strokes(strokes, ui, canvas) {
|
|
|
815
826
|
}
|
|
816
827
|
function drawCenter(stroke, strokeWidthScale, ui, canvas) {
|
|
817
828
|
const data = ui.__;
|
|
818
|
-
|
|
819
|
-
|
|
829
|
+
if (typeof stroke === 'object') {
|
|
830
|
+
drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
|
|
831
|
+
}
|
|
832
|
+
else {
|
|
833
|
+
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
834
|
+
canvas.stroke();
|
|
835
|
+
}
|
|
820
836
|
if (data.__useArrow)
|
|
821
837
|
draw.Paint.strokeArrow(stroke, ui, canvas);
|
|
822
838
|
}
|
|
@@ -838,7 +854,7 @@ function drawOutside(stroke, ui, canvas) {
|
|
|
838
854
|
drawCenter(stroke, 2, ui, out);
|
|
839
855
|
out.clipUI(data);
|
|
840
856
|
out.clearWorld(renderBounds);
|
|
841
|
-
|
|
857
|
+
core.LeafHelper.copyCanvasByWorld(ui, canvas, out);
|
|
842
858
|
out.recycle(ui.__nowWorld);
|
|
843
859
|
}
|
|
844
860
|
}
|
|
@@ -893,8 +909,16 @@ function compute(attrName, ui) {
|
|
|
893
909
|
if (!(paints instanceof Array))
|
|
894
910
|
paints = [paints];
|
|
895
911
|
recycleMap = draw.PaintImage.recycleImage(attrName, data);
|
|
912
|
+
let maxChildStrokeWidth;
|
|
896
913
|
for (let i = 0, len = paints.length, item; i < len; i++) {
|
|
897
|
-
(item = getLeafPaint(attrName, paints[i], ui))
|
|
914
|
+
if (item = getLeafPaint(attrName, paints[i], ui)) {
|
|
915
|
+
leafPaints.push(item);
|
|
916
|
+
if (item.strokeStyle) {
|
|
917
|
+
maxChildStrokeWidth || (maxChildStrokeWidth = 1);
|
|
918
|
+
if (item.strokeStyle.strokeWidth)
|
|
919
|
+
maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
|
|
920
|
+
}
|
|
921
|
+
}
|
|
898
922
|
}
|
|
899
923
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
900
924
|
if (leafPaints.length) {
|
|
@@ -911,6 +935,7 @@ function compute(attrName, ui) {
|
|
|
911
935
|
else {
|
|
912
936
|
stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
|
|
913
937
|
stintSet(data, '__isTransparentStroke', isTransparent);
|
|
938
|
+
stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
|
|
914
939
|
}
|
|
915
940
|
}
|
|
916
941
|
function getLeafPaint(attrName, paint, ui) {
|
|
@@ -942,6 +967,11 @@ function getLeafPaint(attrName, paint, ui) {
|
|
|
942
967
|
if (data) {
|
|
943
968
|
if (typeof data.style === 'string' && hasTransparent$1(data.style))
|
|
944
969
|
data.isTransparent = true;
|
|
970
|
+
if (paint.style) {
|
|
971
|
+
if (paint.style.strokeWidth === 0)
|
|
972
|
+
return undefined;
|
|
973
|
+
data.strokeStyle = paint.style;
|
|
974
|
+
}
|
|
945
975
|
if (paint.blendMode)
|
|
946
976
|
data.blendMode = paint.blendMode;
|
|
947
977
|
}
|
|
@@ -961,8 +991,8 @@ const PaintModule = {
|
|
|
961
991
|
shape
|
|
962
992
|
};
|
|
963
993
|
|
|
964
|
-
let origin = {};
|
|
965
|
-
const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate, skew: skewHelper } = core.MatrixHelper;
|
|
994
|
+
let origin = {}, tempMatrix = core.getMatrixData();
|
|
995
|
+
const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = core.MatrixHelper;
|
|
966
996
|
function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
|
|
967
997
|
const transform = get$3();
|
|
968
998
|
translate$1(transform, box.x + x, box.y + y);
|
|
@@ -971,7 +1001,7 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
|
|
|
971
1001
|
rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
|
|
972
1002
|
data.transform = transform;
|
|
973
1003
|
}
|
|
974
|
-
function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
|
|
1004
|
+
function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
|
|
975
1005
|
const transform = get$3();
|
|
976
1006
|
if (rotation)
|
|
977
1007
|
rotate(transform, rotation);
|
|
@@ -980,6 +1010,10 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
|
|
|
980
1010
|
if (scaleX)
|
|
981
1011
|
scaleHelper(transform, scaleX, scaleY);
|
|
982
1012
|
translate$1(transform, box.x + x, box.y + y);
|
|
1013
|
+
if (clipSize) {
|
|
1014
|
+
tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
|
|
1015
|
+
multiplyParent(transform, tempMatrix);
|
|
1016
|
+
}
|
|
983
1017
|
data.transform = transform;
|
|
984
1018
|
}
|
|
985
1019
|
function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
|
|
@@ -1016,13 +1050,15 @@ const tempBox = new core.Bounds();
|
|
|
1016
1050
|
const tempScaleData = {};
|
|
1017
1051
|
const tempImage = {};
|
|
1018
1052
|
function createData(leafPaint, image, paint, box) {
|
|
1019
|
-
const { changeful, sync, editing } = paint;
|
|
1053
|
+
const { changeful, sync, editing, scaleFixed } = paint;
|
|
1020
1054
|
if (changeful)
|
|
1021
1055
|
leafPaint.changeful = changeful;
|
|
1022
1056
|
if (sync)
|
|
1023
1057
|
leafPaint.sync = sync;
|
|
1024
1058
|
if (editing)
|
|
1025
1059
|
leafPaint.editing = editing;
|
|
1060
|
+
if (scaleFixed)
|
|
1061
|
+
leafPaint.scaleFixed = scaleFixed;
|
|
1026
1062
|
leafPaint.data = getPatternData(paint, box, image);
|
|
1027
1063
|
}
|
|
1028
1064
|
function getPatternData(paint, box, image) {
|
|
@@ -1031,7 +1067,7 @@ function getPatternData(paint, box, image) {
|
|
|
1031
1067
|
if (paint.mode === 'strench')
|
|
1032
1068
|
paint.mode = 'stretch';
|
|
1033
1069
|
let { width, height } = image;
|
|
1034
|
-
const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint;
|
|
1070
|
+
const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
|
|
1035
1071
|
const sameBox = box.width === width && box.height === height;
|
|
1036
1072
|
const data = { mode };
|
|
1037
1073
|
const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
|
|
@@ -1065,8 +1101,8 @@ function getPatternData(paint, box, image) {
|
|
|
1065
1101
|
break;
|
|
1066
1102
|
case 'normal':
|
|
1067
1103
|
case 'clip':
|
|
1068
|
-
if (tempImage.x || tempImage.y || scaleX || rotation || skew)
|
|
1069
|
-
clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
|
|
1104
|
+
if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
|
|
1105
|
+
clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
|
|
1070
1106
|
break;
|
|
1071
1107
|
case 'repeat':
|
|
1072
1108
|
if (!sameBox || scaleX || rotation)
|
|
@@ -1203,18 +1239,16 @@ function ignoreRender(ui, value) {
|
|
|
1203
1239
|
}
|
|
1204
1240
|
|
|
1205
1241
|
const { get: get$1, scale, copy: copy$1 } = core.MatrixHelper;
|
|
1206
|
-
const { ceil, abs
|
|
1242
|
+
const { ceil, abs } = Math;
|
|
1207
1243
|
function createPattern(ui, paint, pixelRatio) {
|
|
1208
|
-
let { scaleX, scaleY } =
|
|
1244
|
+
let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1209
1245
|
const id = scaleX + '-' + scaleY + '-' + pixelRatio;
|
|
1210
1246
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
1211
|
-
scaleX = abs$1(scaleX);
|
|
1212
|
-
scaleY = abs$1(scaleY);
|
|
1213
1247
|
const { image, data } = paint;
|
|
1214
1248
|
let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
|
|
1215
1249
|
if (sx) {
|
|
1216
|
-
sx = abs
|
|
1217
|
-
sy = abs
|
|
1250
|
+
sx = abs(sx);
|
|
1251
|
+
sy = abs(sy);
|
|
1218
1252
|
imageMatrix = get$1();
|
|
1219
1253
|
copy$1(imageMatrix, transform);
|
|
1220
1254
|
scale(imageMatrix, 1 / sx, 1 / sy);
|
|
@@ -1299,9 +1333,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
1299
1333
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
1300
1334
|
};
|
|
1301
1335
|
|
|
1302
|
-
const { abs } = Math;
|
|
1303
1336
|
function checkImage(ui, canvas, paint, allowDraw) {
|
|
1304
|
-
const { scaleX, scaleY } =
|
|
1337
|
+
const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1305
1338
|
const { pixelRatio } = canvas, { data } = paint;
|
|
1306
1339
|
if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
|
|
1307
1340
|
return false;
|
|
@@ -1314,8 +1347,8 @@ function checkImage(ui, canvas, paint, allowDraw) {
|
|
|
1314
1347
|
else {
|
|
1315
1348
|
if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
|
|
1316
1349
|
let { width, height } = data;
|
|
1317
|
-
width *=
|
|
1318
|
-
height *=
|
|
1350
|
+
width *= scaleX * pixelRatio;
|
|
1351
|
+
height *= scaleY * pixelRatio;
|
|
1319
1352
|
if (data.scaleX) {
|
|
1320
1353
|
width *= data.scaleX;
|
|
1321
1354
|
height *= data.scaleY;
|
|
@@ -1325,6 +1358,10 @@ function checkImage(ui, canvas, paint, allowDraw) {
|
|
|
1325
1358
|
}
|
|
1326
1359
|
}
|
|
1327
1360
|
if (allowDraw) {
|
|
1361
|
+
if (ui.__.__isFastShadow) {
|
|
1362
|
+
canvas.fillStyle = paint.style || '#000';
|
|
1363
|
+
canvas.fill();
|
|
1364
|
+
}
|
|
1328
1365
|
drawImage(ui, canvas, paint, data);
|
|
1329
1366
|
return true;
|
|
1330
1367
|
}
|
|
@@ -1513,10 +1550,7 @@ function shadow(ui, current, shape) {
|
|
|
1513
1550
|
}
|
|
1514
1551
|
worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
|
|
1515
1552
|
}
|
|
1516
|
-
|
|
1517
|
-
current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
|
|
1518
|
-
else
|
|
1519
|
-
current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
|
|
1553
|
+
core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
|
|
1520
1554
|
if (end && index < end)
|
|
1521
1555
|
other.clearWorld(copyBounds, true);
|
|
1522
1556
|
});
|
|
@@ -1575,10 +1609,7 @@ function innerShadow(ui, current, shape) {
|
|
|
1575
1609
|
copyBounds = bounds;
|
|
1576
1610
|
}
|
|
1577
1611
|
other.fillWorld(copyBounds, draw.ColorConvert.string(item.color), 'source-in');
|
|
1578
|
-
|
|
1579
|
-
current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
|
|
1580
|
-
else
|
|
1581
|
-
current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
|
|
1612
|
+
core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
|
|
1582
1613
|
if (end && index < end)
|
|
1583
1614
|
other.clearWorld(copyBounds, true);
|
|
1584
1615
|
});
|
|
@@ -1634,12 +1665,11 @@ draw.Group.prototype.__renderMask = function (canvas, options) {
|
|
|
1634
1665
|
contentCanvas = getCanvas(canvas);
|
|
1635
1666
|
child.__render(maskCanvas, options);
|
|
1636
1667
|
}
|
|
1637
|
-
if (
|
|
1638
|
-
|
|
1639
|
-
}
|
|
1640
|
-
if (excludeRenderBounds(child, options))
|
|
1668
|
+
if (mask === 'clipping' || mask === 'clipping-path')
|
|
1669
|
+
excludeRenderBounds(child, options) || child.__render(canvas, options);
|
|
1641
1670
|
continue;
|
|
1642
|
-
|
|
1671
|
+
}
|
|
1672
|
+
excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
|
|
1643
1673
|
}
|
|
1644
1674
|
maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
|
|
1645
1675
|
};
|
package/dist/worker.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LeaferCanvasBase, Platform, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, ResizeEvent, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
|
|
1
|
+
import { LeaferCanvasBase, Platform, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, ResizeEvent, BoundsHelper, getMatrixData, MatrixHelper, MathHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4 } from '@leafer/core';
|
|
2
2
|
export * from '@leafer/core';
|
|
3
3
|
export { LeaferImage } from '@leafer/core';
|
|
4
4
|
import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from '@leafer-ui/draw';
|
|
@@ -698,9 +698,14 @@ function fills(fills, ui, canvas) {
|
|
|
698
698
|
}
|
|
699
699
|
}
|
|
700
700
|
canvas.fillStyle = item.style;
|
|
701
|
-
if (item.transform) {
|
|
701
|
+
if (item.transform || item.scaleFixed) {
|
|
702
702
|
canvas.save();
|
|
703
|
-
|
|
703
|
+
if (item.transform)
|
|
704
|
+
canvas.transform(item.transform);
|
|
705
|
+
if (item.scaleFixed) {
|
|
706
|
+
const { scaleX, scaleY } = ui.getRenderScaleData(true);
|
|
707
|
+
canvas.scale(1 / scaleX, 1 / scaleY);
|
|
708
|
+
}
|
|
704
709
|
if (item.blendMode)
|
|
705
710
|
canvas.blendMode = item.blendMode;
|
|
706
711
|
fillPathOrText(ui, canvas);
|
|
@@ -736,8 +741,13 @@ function strokeText(stroke, ui, canvas) {
|
|
|
736
741
|
}
|
|
737
742
|
function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
|
|
738
743
|
const data = ui.__;
|
|
739
|
-
|
|
740
|
-
|
|
744
|
+
if (typeof stroke === 'object') {
|
|
745
|
+
drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
|
|
746
|
+
}
|
|
747
|
+
else {
|
|
748
|
+
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
749
|
+
drawTextStroke(ui, canvas);
|
|
750
|
+
}
|
|
741
751
|
}
|
|
742
752
|
function drawAlign(stroke, align, ui, canvas) {
|
|
743
753
|
const out = canvas.getSameCanvas(true, true);
|
|
@@ -746,15 +756,9 @@ function drawAlign(stroke, align, ui, canvas) {
|
|
|
746
756
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
747
757
|
fillText(ui, out);
|
|
748
758
|
out.blendMode = 'normal';
|
|
749
|
-
|
|
759
|
+
LeafHelper.copyCanvasByWorld(ui, canvas, out);
|
|
750
760
|
out.recycle(ui.__nowWorld);
|
|
751
761
|
}
|
|
752
|
-
function copyWorld(canvas, out, ui) {
|
|
753
|
-
if (ui.__worldFlipped || Platform.fullImageShadow)
|
|
754
|
-
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
755
|
-
else
|
|
756
|
-
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
757
|
-
}
|
|
758
762
|
function drawTextStroke(ui, canvas) {
|
|
759
763
|
let row, data = ui.__.__textDrawData;
|
|
760
764
|
const { rows, decorationY } = data;
|
|
@@ -770,14 +774,21 @@ function drawTextStroke(ui, canvas) {
|
|
|
770
774
|
rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
|
|
771
775
|
}
|
|
772
776
|
}
|
|
773
|
-
function drawStrokesStyle(strokes, isText, ui, canvas) {
|
|
777
|
+
function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
|
|
774
778
|
let item;
|
|
779
|
+
const data = ui.__, { __hasMultiStrokeStyle } = data;
|
|
780
|
+
__hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
|
|
775
781
|
for (let i = 0, len = strokes.length; i < len; i++) {
|
|
776
782
|
item = strokes[i];
|
|
777
783
|
if (item.image && PaintImage.checkImage(ui, canvas, item, false))
|
|
778
784
|
continue;
|
|
779
785
|
if (item.style) {
|
|
780
|
-
|
|
786
|
+
if (__hasMultiStrokeStyle) {
|
|
787
|
+
const { strokeStyle } = item;
|
|
788
|
+
strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
|
|
789
|
+
}
|
|
790
|
+
else
|
|
791
|
+
canvas.strokeStyle = item.style;
|
|
781
792
|
if (item.blendMode) {
|
|
782
793
|
canvas.saveBlendMode(item.blendMode);
|
|
783
794
|
isText ? drawTextStroke(ui, canvas) : canvas.stroke();
|
|
@@ -816,8 +827,13 @@ function strokes(strokes, ui, canvas) {
|
|
|
816
827
|
}
|
|
817
828
|
function drawCenter(stroke, strokeWidthScale, ui, canvas) {
|
|
818
829
|
const data = ui.__;
|
|
819
|
-
|
|
820
|
-
|
|
830
|
+
if (typeof stroke === 'object') {
|
|
831
|
+
drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
|
|
832
|
+
}
|
|
833
|
+
else {
|
|
834
|
+
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
|
|
835
|
+
canvas.stroke();
|
|
836
|
+
}
|
|
821
837
|
if (data.__useArrow)
|
|
822
838
|
Paint.strokeArrow(stroke, ui, canvas);
|
|
823
839
|
}
|
|
@@ -839,7 +855,7 @@ function drawOutside(stroke, ui, canvas) {
|
|
|
839
855
|
drawCenter(stroke, 2, ui, out);
|
|
840
856
|
out.clipUI(data);
|
|
841
857
|
out.clearWorld(renderBounds);
|
|
842
|
-
|
|
858
|
+
LeafHelper.copyCanvasByWorld(ui, canvas, out);
|
|
843
859
|
out.recycle(ui.__nowWorld);
|
|
844
860
|
}
|
|
845
861
|
}
|
|
@@ -894,8 +910,16 @@ function compute(attrName, ui) {
|
|
|
894
910
|
if (!(paints instanceof Array))
|
|
895
911
|
paints = [paints];
|
|
896
912
|
recycleMap = PaintImage.recycleImage(attrName, data);
|
|
913
|
+
let maxChildStrokeWidth;
|
|
897
914
|
for (let i = 0, len = paints.length, item; i < len; i++) {
|
|
898
|
-
(item = getLeafPaint(attrName, paints[i], ui))
|
|
915
|
+
if (item = getLeafPaint(attrName, paints[i], ui)) {
|
|
916
|
+
leafPaints.push(item);
|
|
917
|
+
if (item.strokeStyle) {
|
|
918
|
+
maxChildStrokeWidth || (maxChildStrokeWidth = 1);
|
|
919
|
+
if (item.strokeStyle.strokeWidth)
|
|
920
|
+
maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
|
|
921
|
+
}
|
|
922
|
+
}
|
|
899
923
|
}
|
|
900
924
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
901
925
|
if (leafPaints.length) {
|
|
@@ -912,6 +936,7 @@ function compute(attrName, ui) {
|
|
|
912
936
|
else {
|
|
913
937
|
stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
|
|
914
938
|
stintSet(data, '__isTransparentStroke', isTransparent);
|
|
939
|
+
stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
|
|
915
940
|
}
|
|
916
941
|
}
|
|
917
942
|
function getLeafPaint(attrName, paint, ui) {
|
|
@@ -943,6 +968,11 @@ function getLeafPaint(attrName, paint, ui) {
|
|
|
943
968
|
if (data) {
|
|
944
969
|
if (typeof data.style === 'string' && hasTransparent$1(data.style))
|
|
945
970
|
data.isTransparent = true;
|
|
971
|
+
if (paint.style) {
|
|
972
|
+
if (paint.style.strokeWidth === 0)
|
|
973
|
+
return undefined;
|
|
974
|
+
data.strokeStyle = paint.style;
|
|
975
|
+
}
|
|
946
976
|
if (paint.blendMode)
|
|
947
977
|
data.blendMode = paint.blendMode;
|
|
948
978
|
}
|
|
@@ -962,8 +992,8 @@ const PaintModule = {
|
|
|
962
992
|
shape
|
|
963
993
|
};
|
|
964
994
|
|
|
965
|
-
let origin = {};
|
|
966
|
-
const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
|
|
995
|
+
let origin = {}, tempMatrix = getMatrixData();
|
|
996
|
+
const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
|
|
967
997
|
function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
|
|
968
998
|
const transform = get$3();
|
|
969
999
|
translate$1(transform, box.x + x, box.y + y);
|
|
@@ -972,7 +1002,7 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
|
|
|
972
1002
|
rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
|
|
973
1003
|
data.transform = transform;
|
|
974
1004
|
}
|
|
975
|
-
function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
|
|
1005
|
+
function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
|
|
976
1006
|
const transform = get$3();
|
|
977
1007
|
if (rotation)
|
|
978
1008
|
rotate(transform, rotation);
|
|
@@ -981,6 +1011,10 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
|
|
|
981
1011
|
if (scaleX)
|
|
982
1012
|
scaleHelper(transform, scaleX, scaleY);
|
|
983
1013
|
translate$1(transform, box.x + x, box.y + y);
|
|
1014
|
+
if (clipSize) {
|
|
1015
|
+
tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
|
|
1016
|
+
multiplyParent(transform, tempMatrix);
|
|
1017
|
+
}
|
|
984
1018
|
data.transform = transform;
|
|
985
1019
|
}
|
|
986
1020
|
function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
|
|
@@ -1017,13 +1051,15 @@ const tempBox = new Bounds();
|
|
|
1017
1051
|
const tempScaleData = {};
|
|
1018
1052
|
const tempImage = {};
|
|
1019
1053
|
function createData(leafPaint, image, paint, box) {
|
|
1020
|
-
const { changeful, sync, editing } = paint;
|
|
1054
|
+
const { changeful, sync, editing, scaleFixed } = paint;
|
|
1021
1055
|
if (changeful)
|
|
1022
1056
|
leafPaint.changeful = changeful;
|
|
1023
1057
|
if (sync)
|
|
1024
1058
|
leafPaint.sync = sync;
|
|
1025
1059
|
if (editing)
|
|
1026
1060
|
leafPaint.editing = editing;
|
|
1061
|
+
if (scaleFixed)
|
|
1062
|
+
leafPaint.scaleFixed = scaleFixed;
|
|
1027
1063
|
leafPaint.data = getPatternData(paint, box, image);
|
|
1028
1064
|
}
|
|
1029
1065
|
function getPatternData(paint, box, image) {
|
|
@@ -1032,7 +1068,7 @@ function getPatternData(paint, box, image) {
|
|
|
1032
1068
|
if (paint.mode === 'strench')
|
|
1033
1069
|
paint.mode = 'stretch';
|
|
1034
1070
|
let { width, height } = image;
|
|
1035
|
-
const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint;
|
|
1071
|
+
const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
|
|
1036
1072
|
const sameBox = box.width === width && box.height === height;
|
|
1037
1073
|
const data = { mode };
|
|
1038
1074
|
const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
|
|
@@ -1066,8 +1102,8 @@ function getPatternData(paint, box, image) {
|
|
|
1066
1102
|
break;
|
|
1067
1103
|
case 'normal':
|
|
1068
1104
|
case 'clip':
|
|
1069
|
-
if (tempImage.x || tempImage.y || scaleX || rotation || skew)
|
|
1070
|
-
clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
|
|
1105
|
+
if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
|
|
1106
|
+
clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
|
|
1071
1107
|
break;
|
|
1072
1108
|
case 'repeat':
|
|
1073
1109
|
if (!sameBox || scaleX || rotation)
|
|
@@ -1204,18 +1240,16 @@ function ignoreRender(ui, value) {
|
|
|
1204
1240
|
}
|
|
1205
1241
|
|
|
1206
1242
|
const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
|
|
1207
|
-
const { ceil, abs
|
|
1243
|
+
const { ceil, abs } = Math;
|
|
1208
1244
|
function createPattern(ui, paint, pixelRatio) {
|
|
1209
|
-
let { scaleX, scaleY } =
|
|
1245
|
+
let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1210
1246
|
const id = scaleX + '-' + scaleY + '-' + pixelRatio;
|
|
1211
1247
|
if (paint.patternId !== id && !ui.destroyed) {
|
|
1212
|
-
scaleX = abs$1(scaleX);
|
|
1213
|
-
scaleY = abs$1(scaleY);
|
|
1214
1248
|
const { image, data } = paint;
|
|
1215
1249
|
let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
|
|
1216
1250
|
if (sx) {
|
|
1217
|
-
sx = abs
|
|
1218
|
-
sy = abs
|
|
1251
|
+
sx = abs(sx);
|
|
1252
|
+
sy = abs(sy);
|
|
1219
1253
|
imageMatrix = get$1();
|
|
1220
1254
|
copy$1(imageMatrix, transform);
|
|
1221
1255
|
scale(imageMatrix, 1 / sx, 1 / sy);
|
|
@@ -1300,9 +1334,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
1300
1334
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
1301
1335
|
};
|
|
1302
1336
|
|
|
1303
|
-
const { abs } = Math;
|
|
1304
1337
|
function checkImage(ui, canvas, paint, allowDraw) {
|
|
1305
|
-
const { scaleX, scaleY } =
|
|
1338
|
+
const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
|
|
1306
1339
|
const { pixelRatio } = canvas, { data } = paint;
|
|
1307
1340
|
if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
|
|
1308
1341
|
return false;
|
|
@@ -1315,8 +1348,8 @@ function checkImage(ui, canvas, paint, allowDraw) {
|
|
|
1315
1348
|
else {
|
|
1316
1349
|
if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
|
|
1317
1350
|
let { width, height } = data;
|
|
1318
|
-
width *=
|
|
1319
|
-
height *=
|
|
1351
|
+
width *= scaleX * pixelRatio;
|
|
1352
|
+
height *= scaleY * pixelRatio;
|
|
1320
1353
|
if (data.scaleX) {
|
|
1321
1354
|
width *= data.scaleX;
|
|
1322
1355
|
height *= data.scaleY;
|
|
@@ -1326,6 +1359,10 @@ function checkImage(ui, canvas, paint, allowDraw) {
|
|
|
1326
1359
|
}
|
|
1327
1360
|
}
|
|
1328
1361
|
if (allowDraw) {
|
|
1362
|
+
if (ui.__.__isFastShadow) {
|
|
1363
|
+
canvas.fillStyle = paint.style || '#000';
|
|
1364
|
+
canvas.fill();
|
|
1365
|
+
}
|
|
1329
1366
|
drawImage(ui, canvas, paint, data);
|
|
1330
1367
|
return true;
|
|
1331
1368
|
}
|
|
@@ -1514,10 +1551,7 @@ function shadow(ui, current, shape) {
|
|
|
1514
1551
|
}
|
|
1515
1552
|
worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
|
|
1516
1553
|
}
|
|
1517
|
-
|
|
1518
|
-
current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
|
|
1519
|
-
else
|
|
1520
|
-
current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
|
|
1554
|
+
LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
|
|
1521
1555
|
if (end && index < end)
|
|
1522
1556
|
other.clearWorld(copyBounds, true);
|
|
1523
1557
|
});
|
|
@@ -1576,10 +1610,7 @@ function innerShadow(ui, current, shape) {
|
|
|
1576
1610
|
copyBounds = bounds;
|
|
1577
1611
|
}
|
|
1578
1612
|
other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
|
|
1579
|
-
|
|
1580
|
-
current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
|
|
1581
|
-
else
|
|
1582
|
-
current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
|
|
1613
|
+
LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
|
|
1583
1614
|
if (end && index < end)
|
|
1584
1615
|
other.clearWorld(copyBounds, true);
|
|
1585
1616
|
});
|
|
@@ -1635,12 +1666,11 @@ Group.prototype.__renderMask = function (canvas, options) {
|
|
|
1635
1666
|
contentCanvas = getCanvas(canvas);
|
|
1636
1667
|
child.__render(maskCanvas, options);
|
|
1637
1668
|
}
|
|
1638
|
-
if (
|
|
1639
|
-
|
|
1640
|
-
}
|
|
1641
|
-
if (excludeRenderBounds(child, options))
|
|
1669
|
+
if (mask === 'clipping' || mask === 'clipping-path')
|
|
1670
|
+
excludeRenderBounds(child, options) || child.__render(canvas, options);
|
|
1642
1671
|
continue;
|
|
1643
|
-
|
|
1672
|
+
}
|
|
1673
|
+
excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
|
|
1644
1674
|
}
|
|
1645
1675
|
maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
|
|
1646
1676
|
};
|