@meta2d/core 1.0.21 → 1.0.23
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/package.json +1 -1
- package/src/canvas/canvas.d.ts +2 -1
- package/src/canvas/canvas.js +14 -7
- package/src/canvas/canvas.js.map +1 -1
- package/src/canvas/canvasImage.js +8 -6
- package/src/canvas/canvasImage.js.map +1 -1
- package/src/core.d.ts +2 -2
- package/src/core.js +155 -74
- package/src/core.js.map +1 -1
- package/src/event/event.d.ts +3 -1
- package/src/pen/model.d.ts +0 -1
- package/src/pen/model.js.map +1 -1
- package/src/pen/render.js +81 -73
- package/src/pen/render.js.map +1 -1
- package/src/store/store.d.ts +5 -3
- package/src/store/store.js +2 -2
- package/src/store/store.js.map +1 -1
package/src/pen/render.js
CHANGED
|
@@ -377,6 +377,12 @@ function ctxDrawLinearGradientPath(ctx, pen) {
|
|
|
377
377
|
}
|
|
378
378
|
function getSmoothAdjacent(smoothLenth, p1, p2) {
|
|
379
379
|
var nexLength = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
|
|
380
|
+
if (nexLength === 0) {
|
|
381
|
+
return {
|
|
382
|
+
x: p1.x,
|
|
383
|
+
y: p1.y,
|
|
384
|
+
};
|
|
385
|
+
}
|
|
380
386
|
if (smoothLenth < nexLength) {
|
|
381
387
|
return {
|
|
382
388
|
x: p1.x + ((p2.x - p1.x) * smoothLenth) / nexLength,
|
|
@@ -948,111 +954,112 @@ export function renderPen(ctx, pen) {
|
|
|
948
954
|
inspectRect(ctx, store, pen); // 审查 rect
|
|
949
955
|
var fill;
|
|
950
956
|
// 该变量控制在 hover active 状态下的节点是否设置填充颜色
|
|
951
|
-
|
|
957
|
+
// let setBack = true;
|
|
952
958
|
var lineGradientFlag = false;
|
|
959
|
+
var _stroke = undefined;
|
|
953
960
|
if (pen.calculative.hover) {
|
|
954
|
-
|
|
961
|
+
_stroke = pen.hoverColor || store.options.hoverColor;
|
|
955
962
|
fill = pen.hoverBackground || store.options.hoverBackground;
|
|
956
|
-
ctx.fillStyle = fill;
|
|
957
|
-
fill && (setBack = false);
|
|
963
|
+
// ctx.fillStyle = fill;
|
|
964
|
+
// fill && (setBack = false);
|
|
958
965
|
}
|
|
959
966
|
else if (pen.calculative.active) {
|
|
960
|
-
|
|
967
|
+
_stroke = pen.activeColor || store.options.activeColor;
|
|
961
968
|
fill = pen.activeBackground || store.options.activeBackground;
|
|
962
|
-
ctx.fillStyle = fill;
|
|
963
|
-
fill && (setBack = false);
|
|
969
|
+
// ctx.fillStyle = fill;
|
|
970
|
+
// fill && (setBack = false);
|
|
964
971
|
}
|
|
965
972
|
else if (pen.calculative.isDock) {
|
|
966
973
|
if (pen.type === PenType.Line) {
|
|
967
|
-
|
|
974
|
+
_stroke = store.options.dockPenColor;
|
|
968
975
|
}
|
|
969
976
|
else {
|
|
970
977
|
fill = rgba(store.options.dockPenColor, 0.2);
|
|
971
|
-
ctx.fillStyle = fill;
|
|
972
|
-
fill && (setBack = false);
|
|
978
|
+
// ctx.fillStyle = fill;
|
|
979
|
+
// fill && (setBack = false);
|
|
973
980
|
}
|
|
974
981
|
}
|
|
982
|
+
// else {
|
|
983
|
+
var strokeImg = pen.calculative.strokeImg;
|
|
984
|
+
if (pen.calculative.strokeImage && strokeImg) {
|
|
985
|
+
ctx.strokeStyle = _stroke || ctx.createPattern(strokeImg, 'repeat');
|
|
986
|
+
// fill = true;
|
|
987
|
+
}
|
|
975
988
|
else {
|
|
976
|
-
var
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
if (pen.name === 'line') {
|
|
987
|
-
lineGradientFlag = true;
|
|
989
|
+
var stroke = void 0;
|
|
990
|
+
// TODO: 线只有线性渐变
|
|
991
|
+
if (pen.calculative.strokeType) {
|
|
992
|
+
if (pen.calculative.lineGradientColors) {
|
|
993
|
+
if (pen.name === 'line') {
|
|
994
|
+
lineGradientFlag = true;
|
|
995
|
+
}
|
|
996
|
+
else {
|
|
997
|
+
if (pen.calculative.lineGradient) {
|
|
998
|
+
stroke = pen.calculative.lineGradient;
|
|
988
999
|
}
|
|
989
1000
|
else {
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
}
|
|
993
|
-
else {
|
|
994
|
-
stroke = getLineGradient(ctx, pen);
|
|
995
|
-
pen.calculative.lineGradient = stroke;
|
|
996
|
-
}
|
|
1001
|
+
stroke = getLineGradient(ctx, pen);
|
|
1002
|
+
pen.calculative.lineGradient = stroke;
|
|
997
1003
|
}
|
|
998
1004
|
}
|
|
999
|
-
else {
|
|
1000
|
-
stroke = strokeLinearGradient(ctx, pen);
|
|
1001
|
-
}
|
|
1002
1005
|
}
|
|
1003
1006
|
else {
|
|
1004
|
-
stroke = pen
|
|
1007
|
+
stroke = strokeLinearGradient(ctx, pen);
|
|
1005
1008
|
}
|
|
1006
|
-
ctx.strokeStyle = stroke;
|
|
1007
|
-
}
|
|
1008
|
-
}
|
|
1009
|
-
if (setBack) {
|
|
1010
|
-
var backgroundImg = pen.calculative.backgroundImg;
|
|
1011
|
-
if (pen.calculative.backgroundImage && backgroundImg) {
|
|
1012
|
-
ctx.fillStyle = ctx.createPattern(backgroundImg, 'repeat');
|
|
1013
|
-
fill = true;
|
|
1014
1009
|
}
|
|
1015
1010
|
else {
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
if (pen.calculative.gradientColors) {
|
|
1037
|
-
if (pen.calculative.radialGradient) {
|
|
1038
|
-
back = pen.calculative.radialGradient;
|
|
1011
|
+
stroke = pen.calculative.color || getGlobalColor(store);
|
|
1012
|
+
}
|
|
1013
|
+
ctx.strokeStyle = _stroke || stroke;
|
|
1014
|
+
}
|
|
1015
|
+
// }
|
|
1016
|
+
//if (setBack) {
|
|
1017
|
+
var backgroundImg = pen.calculative.backgroundImg;
|
|
1018
|
+
if (pen.calculative.backgroundImage && backgroundImg) {
|
|
1019
|
+
ctx.fillStyle = fill || ctx.createPattern(backgroundImg, 'repeat');
|
|
1020
|
+
fill = true;
|
|
1021
|
+
}
|
|
1022
|
+
else {
|
|
1023
|
+
var back = void 0;
|
|
1024
|
+
if (pen.calculative.bkType === Gradient.Linear) {
|
|
1025
|
+
if (pen.calculative.gradientColors) {
|
|
1026
|
+
if (pen.name !== 'line') {
|
|
1027
|
+
//连线不考虑渐进背景
|
|
1028
|
+
if (pen.calculative.gradient) {
|
|
1029
|
+
//位置变化/放大缩小操作不会触发重新计算
|
|
1030
|
+
back = pen.calculative.gradient;
|
|
1039
1031
|
}
|
|
1040
1032
|
else {
|
|
1041
|
-
back =
|
|
1042
|
-
pen.calculative.
|
|
1033
|
+
back = getBkGradient(ctx, pen);
|
|
1034
|
+
pen.calculative.gradient = back;
|
|
1043
1035
|
}
|
|
1044
1036
|
}
|
|
1037
|
+
}
|
|
1038
|
+
else {
|
|
1039
|
+
back = drawBkLinearGradient(ctx, pen);
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
else if (pen.calculative.bkType === Gradient.Radial) {
|
|
1043
|
+
if (pen.calculative.gradientColors) {
|
|
1044
|
+
if (pen.calculative.radialGradient) {
|
|
1045
|
+
back = pen.calculative.radialGradient;
|
|
1046
|
+
}
|
|
1045
1047
|
else {
|
|
1046
|
-
back =
|
|
1048
|
+
back = getBkRadialGradient(ctx, pen);
|
|
1049
|
+
pen.calculative.radialGradient = back;
|
|
1047
1050
|
}
|
|
1048
1051
|
}
|
|
1049
1052
|
else {
|
|
1050
|
-
back = pen
|
|
1053
|
+
back = drawBkRadialGradient(ctx, pen);
|
|
1051
1054
|
}
|
|
1052
|
-
ctx.fillStyle = back;
|
|
1053
|
-
fill = !!back;
|
|
1054
1055
|
}
|
|
1056
|
+
else {
|
|
1057
|
+
back = pen.calculative.background || store.data.penBackground;
|
|
1058
|
+
}
|
|
1059
|
+
ctx.fillStyle = fill || back;
|
|
1060
|
+
fill = !!back;
|
|
1055
1061
|
}
|
|
1062
|
+
// }
|
|
1056
1063
|
setLineCap(ctx, pen);
|
|
1057
1064
|
setLineJoin(ctx, pen);
|
|
1058
1065
|
setGlobalAlpha(ctx, pen);
|
|
@@ -1567,7 +1574,8 @@ export function calcWorldRects(pen) {
|
|
|
1567
1574
|
x: pen.x,
|
|
1568
1575
|
y: pen.y,
|
|
1569
1576
|
};
|
|
1570
|
-
if (!pen.parentId) {
|
|
1577
|
+
if (!pen.parentId || (pen.parentId && !store.pens[pen.parentId])) {
|
|
1578
|
+
pen.parentId = undefined;
|
|
1571
1579
|
rect.width = pen.width;
|
|
1572
1580
|
rect.height = pen.height;
|
|
1573
1581
|
rect.rotate = pen.rotate;
|
|
@@ -2535,7 +2543,7 @@ function inspectRect(ctx, store, pen) {
|
|
|
2535
2543
|
}
|
|
2536
2544
|
export function setGlobalAlpha(ctx, pen) {
|
|
2537
2545
|
var globalAlpha = pen.calculative.globalAlpha;
|
|
2538
|
-
if (globalAlpha < 1) {
|
|
2546
|
+
if (globalAlpha < 1 || globalAlpha !== '') {
|
|
2539
2547
|
ctx.globalAlpha = globalAlpha;
|
|
2540
2548
|
}
|
|
2541
2549
|
}
|
|
@@ -2572,7 +2580,7 @@ export function setChildValue(pen, data) {
|
|
|
2572
2580
|
var children = pen.children;
|
|
2573
2581
|
children === null || children === void 0 ? void 0 : children.forEach(function (childId) {
|
|
2574
2582
|
var child = pen.calculative.canvas.store.pens[childId];
|
|
2575
|
-
setChildValue(child, data);
|
|
2583
|
+
child && setChildValue(child, data);
|
|
2576
2584
|
});
|
|
2577
2585
|
}
|
|
2578
2586
|
}
|