@meta2d/core 1.0.51 → 1.0.53

package/src/pen/render.js

@@ -418,7 +418,40 @@ function ctxDrawLinearGradientPath(ctx, pen) {
             if (i < anchors.length - 2) {
                 _last = getSmoothAdjacent(smoothLenth, anchors[i + 1], anchors[i]);
             }
+            var flag = false;
+            if (i === 0) {
+                if (pen.fromLineCap && pen.fromLineCap !== 'butt') {
+                    ctx.save();
+                    flag = true;
+                    ctx.lineCap = pen.fromLineCap;
+                }
+            }
+            if (i !== 0 && i === anchors.length - 2) {
+                if (pen.toLineCap && pen.toLineCap !== 'butt') {
+                    ctx.save();
+                    flag = true;
+                    ctx.lineCap = pen.toLineCap;
+                }
+            }
             drawLinearGradientLine(ctx, pen, [_next, _last]);
+            if (flag) {
+                ctx.restore();
+            }
+            if (anchors.length === 2 && i === 0) {
+                ctx.save();
+                flag = true;
+                ctx.lineCap = pen.toLineCap;
+                var _y = 0.1;
+                var _x = 0.1;
+                if (_next.x - _last.x === 0) {
+                    _x = 0;
+                }
+                else {
+                    _y = (_next.y - _last.y) / (_next.x - _last.x) * 0.1;
+                }
+                drawLinearGradientLine(ctx, pen, [{ x: _last.x - _x, y: _last.y - _y }, _last]);
+                ctx.restore();
+            }
         }
     }
 }
@@ -1078,6 +1111,10 @@ export function renderPen(ctx, pen, download) {
         _stroke = pen.disabledColor || store.options.disabledColor || pSBC(0.4, pen.calculative.color || getGlobalColor(store));
         fill = pen.disabledBackground || store.options.disabledBackground || pSBC(0.4, pen.calculative.background || store.data.penBackground);
     }
+    else if (pen.mouseDownValid && pen.calculative.mouseDown) {
+        _stroke = pen.mouseDownColor || pSBC(-0.4, pen.calculative.color || getGlobalColor(store));
+        fill = pen.mouseDownBackground || pSBC(-0.4, pen.calculative.background || store.data.penBackground);
+    }
     else if (pen.calculative.hover) {
         _stroke = pen.hoverColor || store.options.hoverColor;
         fill = pen.hoverBackground || store.options.hoverBackground;
@@ -1437,6 +1474,23 @@ export function ctxDrawPath(canUsePath, ctx, pen, store, fill) {
     var path = canUsePath
         ? store.path2dMap.get(pen)
         : globalStore.path2dDraws[pen.name];
+    var path_from = null;
+    var path_to = null;
+    if (pen.type === PenType.Line) {
+        //线段的起始和结束线帽 分别配置
+        if (pen.fromLineCap && pen.fromLineCap !== 'butt') {
+            ctx.lineCap = 'butt';
+            path_from = new Path2D();
+            path_from.moveTo(pen.calculative.worldAnchors[0].x, pen.calculative.worldAnchors[0].y);
+            path_from.lineTo(pen.calculative.worldAnchors[0].x, pen.calculative.worldAnchors[0].y);
+        }
+        if (pen.toLineCap && pen.toLineCap !== 'butt') {
+            ctx.lineCap = 'butt';
+            path_to = new Path2D();
+            path_to.moveTo(pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1].x, pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1].y);
+            path_to.lineTo(pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1].x, pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1].y);
+        }
+    }
     if (path) {
         if (pen.type === PenType.Line && pen.borderWidth) {
             ctx.save();
@@ -1444,6 +1498,12 @@ export function ctxDrawPath(canUsePath, ctx, pen, store, fill) {
             var lineWidth = pen.calculative.lineWidth + pen.calculative.borderWidth;
             ctx.lineWidth = lineWidth;
             ctx.strokeStyle = pen.borderColor;
+            if (path_from) {
+                ctx.save();
+                ctx.lineCap = pen.fromLineCap;
+                ctx.stroke(path_from);
+                ctx.restore();
+            }
             if (path instanceof Path2D) {
                 fill && ctx.fill(path);
                 lineWidth && ctx.stroke(path);
@@ -1453,6 +1513,12 @@ export function ctxDrawPath(canUsePath, ctx, pen, store, fill) {
                 fill && ctx.fill();
                 lineWidth && ctx.stroke();
             }
+            if (path_to) {
+                ctx.save();
+                ctx.lineCap = pen.toLineCap;
+                ctx.stroke(path_to);
+                ctx.restore();
+            }
             ctx.restore();
         }
         if (path instanceof Path2D) {
@@ -1518,7 +1584,19 @@ export function ctxDrawPath(canUsePath, ctx, pen, store, fill) {
         if (pen.calculative.lineWidth) {
             if (path instanceof Path2D) {
                 if (store.options.svgPathStroke || pen.name !== 'svgPath') {
+                    if (path_from) {
+                        ctx.save();
+                        ctx.lineCap = pen.fromLineCap;
+                        ctx.stroke(path_from);
+                        ctx.restore();
+                    }
                     ctx.stroke(path);
+                    if (path_to) {
+                        ctx.save();
+                        ctx.lineCap = pen.toLineCap;
+                        ctx.stroke(path_to);
+                        ctx.restore();
+                    }
                 }
             }
             else {
@@ -1544,6 +1622,13 @@ export function ctxDrawPath(canUsePath, ctx, pen, store, fill) {
                 }
                 else {
                     if (path instanceof Path2D) {
+                        if (path_from && !pen.lineAnimateType) {
+                            ctx.save();
+                            ctx.lineCap = pen.fromLineCap;
+                            ctx.stroke(path_from);
+                            ctx.restore();
+                        }
+                        ctx.lineCap = pen.lineCap;
                         ctx.stroke(path);
                     }
                     else {
@@ -1896,6 +1981,33 @@ export function calcWorldAnchors(pen) {
     }
     pen.calculative.gradientAnimatePath = undefined;
 }
+export function calcChildrenInitRect(pen) {
+    var _a;
+    // 重新计算子节点初始化坐标
+    if ((_a = pen.children) === null || _a === void 0 ? void 0 : _a.length) {
+        var parentRect_1 = pen.calculative.worldRect;
+        pen.children.forEach(function (id) {
+            var child = pen.calculative.canvas.store.pens[id];
+            if (child.calculative.initRect && child.calculative.initRelativeRect) {
+                child.calculative.initRect.x =
+                    parentRect_1.x +
+                        parentRect_1.width * child.calculative.initRelativeRect.x;
+                child.calculative.initRect.y =
+                    parentRect_1.y +
+                        parentRect_1.height * child.calculative.initRelativeRect.y;
+                child.calculative.initRect.ex =
+                    child.calculative.initRect.x +
+                        parentRect_1.width * child.calculative.initRelativeRect.width;
+                child.calculative.initRect.ey =
+                    child.calculative.initRect.y +
+                        parentRect_1.height +
+                        child.calculative.initRelativeRect.height;
+                calcCenter(child.calculative.initRect);
+            }
+            calcChildrenInitRect(child);
+        });
+    }
+}
 export function calcWorldPointOfPen(pen, pt) {
     var p = __assign({}, pt);
     var _a = pen.calculative.worldRect, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
@@ -1962,6 +2074,7 @@ export function scalePen(pen, scale, center) {
     if (pen.calculative.initRect) {
         scaleRect(pen.calculative.initRect, scale, center, pen.pivot);
     }
+    scaleChildrenInitRect(pen, scale, center);
     if (pen.calculative.x) {
         scalePoint(pen.calculative, scale, center);
     }
@@ -1969,6 +2082,19 @@ export function scalePen(pen, scale, center) {
         calcWorldAnchors(pen);
     }
 }
+export function scaleChildrenInitRect(pen, scale, center) {
+    var _a;
+    if ((_a = pen.children) === null || _a === void 0 ? void 0 : _a.length) {
+        pen.children.forEach(function (id) {
+            var child = pen.calculative.canvas.store.pens[id];
+            if (child &&
+                child.calculative.initRect) {
+                scaleRect(child.calculative.initRect, scale, center);
+            }
+            scaleChildrenInitRect(child, scale, center);
+        });
+    }
+}
 export function pushPenAnchor(pen, pt) {
     if (!pen.anchors) {
         pen.anchors = [];
@@ -2260,6 +2386,14 @@ export function setNodeAnimate(pen, now) {
         pen.calculative.x = pen.calculative.worldRect.x;
         pen.calculative.y = pen.calculative.worldRect.y;
         pen.calculative.initRect = deepClone(pen.calculative.worldRect);
+        if (pen.parentId) {
+            pen.calculative.initRelativeRect = {
+                x: pen.x,
+                y: pen.y,
+                width: pen.width,
+                height: pen.height,
+            };
+        }
         pen.calculative.initRect.rotate = pen.calculative.rotate || 0;
         initPrevFrame(pen);
     }
@@ -2313,8 +2447,8 @@ export function setNodeAnimate(pen, now) {
             // 以初始位置为参考点。因为网页在后台时，不执行动画帧，网页恢复显示时，位置不确定
             pen.calculative.x = pen.calculative.initRect.x;
             pen.calculative.y = pen.calculative.initRect.y;
-            if ((_c = pen.children) === null || _c === void 0 ? void 0 : _c.length) {
-                pen.calculative.canvas.rotatePen(pen, (pen.calculative.initRect.rotate || 0) - pen.calculative.rotate, pen.calculative.initRect);
+            if (((_c = pen.children) === null || _c === void 0 ? void 0 : _c.length) && !pen.parentId) {
+                pen.calculative.canvas.rotatePen(pen, (pen.calculative.initRect.rotate || 0) - (pen.calculative.rotate || 0), pen.calculative.initRect);
             }
             else {
                 pen.calculative.rotate = pen.calculative.initRect.rotate || 0;
@@ -2801,7 +2935,7 @@ export function setGlobalAlpha(ctx, pen) {
  * @param pen 画笔
  */
 function ctxDrawCanvas(ctx, pen) {
-    var canvasDraw = globalStore.canvasDraws[pen.name];
+    var canvasDraw = drawFuncGenerator(ctx, pen) || globalStore.canvasDraws[pen.name];
     if (canvasDraw) {
         // TODO: 后续考虑优化 save / restore
         ctx.save();
@@ -2810,6 +2944,224 @@ function ctxDrawCanvas(ctx, pen) {
         ctx.restore();
     }
 }
+function drawFuncGenerator(ctx, pen) {
+    // 进行数据的预处理
+    var drawCommand = pen.drawCommand;
+    if (!drawCommand || pen.name === 'line')
+        return;
+    // 单位转换 将其他单位转换为px
+    // 执行自定义绘画函数
+    return function (ctx, pen) {
+        // TODO  绘制命令的转换 （能否兼容多种指令？？）
+        drawCommand.forEach(function (command) {
+            try {
+                command.steps.reduce(function (calculate, step) {
+                    var cs = commandTransfer(step, pen, calculate.x, calculate.y);
+                    // 应当保证顺序的正确
+                    try {
+                        if (cs.c) {
+                            var l = [];
+                            for (var csKey in cs.v) {
+                                l.push(cs.v[csKey]);
+                            }
+                            // ctx.beginPath();
+                            ctx[cs.c].apply(ctx, __spreadArray([], __read(l), false));
+                            ctx.moveTo(cs.startX || cs.v.x, cs.startY || cs.v.y);
+                            // command.prop.NoFill === '0'?ctx.fill():'';
+                            return { x: cs.startX || cs.v.x, y: cs.startY || cs.v.y };
+                        }
+                        return { x: calculate.x, y: calculate.y };
+                    }
+                    catch (e) {
+                        // pass
+                    }
+                }, {});
+            }
+            catch (e) {
+            }
+        });
+        ctx.stroke();
+    };
+}
+function commandTransfer(command, pen, startX, startY) {
+    // TODO 是否支持扩展更多的命令？用于兼容未来的其他解析格式？
+    //1. 进行简单的命令解析
+    // VISIO
+    var map = {
+        'visio': dealWithVisio,
+        'dxf': dealWithDXF
+    };
+    // CAD
+    return map[pen.parseType](command, pen, startX, startY);
+}
+function dealWithDXF(command, pen, startX, startY) {
+    var _a = pen.calculative.worldRect, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+    switch (command.c) {
+        case "moveTo":
+            return {
+                c: 'moveTo',
+                v: {
+                    x: command.v.x * pen.calculative.canvas.store.data.scale,
+                    y: window.innerHeight - (command.v.y * pen.calculative.canvas.store.data.scale)
+                }
+            };
+        case "lineTo":
+            return {
+                c: 'lineTo',
+                v: {
+                    x: command.v.x * pen.calculative.canvas.store.data.scale,
+                    y: window.innerHeight - (command.v.y * pen.calculative.canvas.store.data.scale)
+                }
+            };
+        case "arc":
+            return {
+                c: 'arc',
+                v: {
+                    x: command.v.x * pen.calculative.canvas.store.data.scale,
+                    y: window.innerHeight - (command.v.y * pen.calculative.canvas.store.data.scale),
+                    r: command.v.r * pen.calculative.canvas.store.data.scale,
+                    startAngle: command.v.startAngle,
+                    endAngle: command.v.endAngle
+                }
+            };
+    }
+    return command;
+}
+function dealWithVisio(command, pen, startX, startY) {
+    var _a = pen.calculative.worldRect, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+    var _b = pen.origin, originWidth = _b.width, originHeight = _b.height;
+    switch (command.c) {
+        case "MoveTo":
+            return {
+                c: "moveTo",
+                v: {
+                    x: +command.v.X * (100) * (width / originWidth) + x,
+                    y: +command.v.Y * (100) * (height / originHeight) + y
+                }
+            };
+        case "RelMoveTo":
+            return {
+                c: "moveTo",
+                v: {
+                    x: +command.v.X * originWidth * (width / originWidth) + x,
+                    y: +command.v.Y * originHeight * (height / originHeight) + y
+                }
+            };
+        case "LineTo":
+            return {
+                c: "lineTo",
+                v: {
+                    x: +command.v.X * (100) * (width / originWidth) + x,
+                    y: +command.v.Y * (100) * (height / originHeight) + y
+                }
+            };
+        case "RelLineTo":
+            return {
+                c: "lineTo",
+                v: {
+                    x: +command.v.X * originWidth * (width / originWidth) + x,
+                    y: +command.v.Y * originHeight * (height / originHeight) + y
+                }
+            };
+        case "Ellipse":
+            var centerX1 = command.v.X;
+            var centerY1 = command.v.Y;
+            var longAxis = Math.abs(command.v.A - command.v.C);
+            var shortAxis = Math.abs(command.v.B - command.v.D);
+            return {
+                c: "ellipse",
+                v: {
+                    x: centerX1 * (100) * (width / originWidth) + x,
+                    y: centerY1 * (100) * (height / originHeight) + y,
+                    radiuX: longAxis * (100) * (width / originWidth),
+                    radiuY: shortAxis * (100) * (height / originHeight),
+                    rotation: 0,
+                    startAngle: 0,
+                    endAngle: Math.PI * 2,
+                    anticlockwise: true
+                }
+            };
+        case "EllipticalArcTo":
+            var endX = command.v.X * 100 * (width / originWidth) + x; // 弧上结束顶点的 x 坐标
+            var endY = command.v.Y * 100 * (height / originHeight) + y; // 弧上结束顶点的 y 坐标
+            var ctrlX = command.v.A * 100 * (width / originWidth) + x; // 控制点的 x 坐标
+            var ctrlY = command.v.B * 100 * (height / originHeight) + y; // 控制点的 y 坐标
+            var angleDeg = command.v.C; // 主轴相对于 x 轴的角度 (度)
+            var axisRatio = command.v.D * (width / height) * (originHeight / originWidth); // 长轴和短轴的比率
+            //
+            var params = calculateEllipseParameters(startX, startY, endX, endY, ctrlX, ctrlY, axisRatio);
+            // 开始绘制路径
+            !command.orign && (command.orign = {});
+            !command.orign.startA && (command.orign.startA = calculateAngleInRadians(params.x0, params.y0, startX, startY));
+            !command.orign.endA && (command.orign.endA = calculateAngleInRadians(params.x0, params.y0, endX, endY));
+            return {
+                c: "ellipse",
+                v: {
+                    centerX: params.x0,
+                    centerY: params.y0,
+                    radiuX: params.a,
+                    radiuY: params.b,
+                    // rotation:radiansToDegrees(angleDeg),
+                    rotation: 0,
+                    startAngle: command.orign.startA,
+                    endAngle: command.orign.endA,
+                    // startAngle: 0,
+                    // endAngle: Math.PI * 2,
+                    // anticlockwise: startA > 0 && startA>endA
+                    anticlockwise: +angleDeg < 0
+                    // anticlockwise: Math.abs(endA - startA) < Math.PI
+                },
+                startX: endX,
+                startY: endY,
+            };
+        case "ArcTo":
+            var endX2 = command.v.X * 100 * width / originWidth + x;
+            var endY2 = command.v.Y * 100 * height / originHeight + y;
+            var h = command.v.A * 100 * (width / height) * (originHeight / originWidth);
+            // 计算弦的中点
+            var xm = (startX + endX2) / 2;
+            var ym = (startY + endY2) / 2;
+            // 计算弦的长度
+            var d = Math.sqrt(Math.pow((endX2 - startX), 2) + Math.pow((endY2 - startY), 2));
+            // 计算圆弧的半径
+            var R = (Math.pow(d, 2)) / (8 * h) + h / 2;
+            // 计算单位垂直向量
+            var ux = -(endY2 - startY) / d;
+            var uy = (endX2 - startX) / d;
+            // 计算两个可能的圆心
+            var xc1 = xm + ux * R;
+            var yc1 = ym + uy * R;
+            var xc2 = xm - ux * R;
+            var yc2 = ym - uy * R;
+            // 选择一个圆心
+            var xc = xc1;
+            var yc = yc1;
+            // 计算起点和终点到圆心的角度
+            var startAngle = Math.atan2(startY - yc, startX - xc);
+            var endAngle = Math.atan2(endY2 - yc, endX2 - xc);
+            return {
+                c: 'arc',
+                v: {
+                    x: xc,
+                    y: yc,
+                    radius: R,
+                    startAngle: startAngle,
+                    endAngle: endAngle,
+                    aclockwise: true,
+                }
+            };
+        // case "RelCubBezTo":
+        //   return {
+        //     c:"bezierCurveTo",
+        //     v:{
+        //
+        //     }
+        //   };
+        default:
+            // console.log(command.c);
+            return {};
+    }
+}
 export function setChildValue(pen, data) {
     for (var k in data) {
         if (inheritanceProps.includes(k)) {
@@ -2823,8 +3175,9 @@ export function setChildValue(pen, data) {
             }
         }
     }
-    if (pen.calculative.canvas.parent.isCombine(pen) &&
-        pen.showChild === undefined) {
+    if (pen.calculative.canvas.parent.isCombine(pen)
+    //&& pen.showChild === undefined
+    ) {
         var children = pen.children;
         children === null || children === void 0 ? void 0 : children.forEach(function (childId) {
             var child = pen.calculative.canvas.store.pens[childId];
@@ -2832,4 +3185,31 @@ export function setChildValue(pen, data) {
         });
     }
 }
+function calculateEllipseParameters(x1, y1, x2, y2, x3, y3, D) {
+    // Calculate x₀ using equation ⑥
+    var numeratorX0 = (x1 - x2) * (x1 + x2) * (y2 - y3) - (x2 - x3) * (x2 + x3) * (y1 - y2) + D * D * (y1 - y2) * (y2 - y3) * (y1 - y3);
+    var denominatorX0 = 2 * ((x1 - x2) * (y2 - y3) - (x2 - x3) * (y1 - y2));
+    var x0 = numeratorX0 / denominatorX0;
+    // Calculate y₀ using equation ⑦
+    var numeratorY0 = (x1 - x2) * (x2 - x3) * (x1 - x3) + D * D * ((x2 - x3) * (y1 - y2) * (y1 + y2) - (x1 - x2) * (y2 - y3) * (y2 + y3));
+    var denominatorY0 = 2 * D * D * ((x2 - x3) * (y1 - y2) - (x1 - x2) * (y2 - y3));
+    var y0 = numeratorY0 / denominatorY0;
+    // Calculate 'a' using equation ⑧, substituting x₀ and y₀
+    var a = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(D * (y1 - y0), 2));
+    // Calculate 'b' using equation ⑨
+    var b = a / D;
+    return { x0: x0, y0: y0, a: a, b: b };
+}
+function calculateAngleInRadians(x1, y1, x2, y2) {
+    // 计算两个点的差值
+    var dx = x2 - x1;
+    var dy = y2 - y1;
+    // 使用 atan2 计算角度，结果为弧度
+    var angleRadians = Math.atan2(dy, dx);
+    // 如果角度为负值，加上2π
+    if (angleRadians < 0) {
+        angleRadians += 2 * Math.PI;
+    }
+    return angleRadians;
+}
 //# sourceMappingURL=render.js.map