@ngroznykh/papirus 0.3.7 → 0.3.9

package/dist/papirus.js

@@ -8635,12 +8635,12 @@ class SvgExporter {
         parts.push(this.renderGroup(group));
       }
     }
-    parts.push(...renderedEdges);
     for (const node of this.renderer.nodes.values()) {
       if (node.visible) {
         parts.push(this.renderNode(node));
       }
     }
+    parts.push(...renderedEdges);
     parts.push(`</g></svg>`);
     return parts.join("");
   }
@@ -8711,7 +8711,7 @@ class SvgExporter {
         shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
       }
     }
-    const label = node.label ? this.renderTextLabel(node.label.text, node.getLabelPosition(), node.label.style) : "";
+    const label = this.renderNodeLabel(node, bounds);
     const icon = this.renderNodeIcon(node, bounds);
     return [
       `${shape} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`,
@@ -8727,14 +8727,72 @@ class SvgExporter {
     const style = edge.style;
     const stroke = style.strokeColor ?? "#666666";
     const strokeWidth = style.strokeWidth ?? 2;
-    const opacity = style.opacity ?? 1;
+    const strokeOpacity = (style.strokeOpacity ?? 1) * (style.opacity ?? 1);
+    const lineCap = style.lineCap ? ` stroke-linecap="${style.lineCap}"` : "";
+    const lineJoin = style.lineJoin ? ` stroke-linejoin="${style.lineJoin}"` : "";
     const dashValues = style.flowDash ?? style.lineDash;
     const dash = dashValues ? ` stroke-dasharray="${dashValues.join(" ")}"` : "";
     const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
     const d = this.buildPath(edge);
     const markerShapes = this.renderEdgeMarkers(edge, stroke);
-    const label = edge.label ? this.renderTextLabel(edge.label.text, this.getEdgeLabelPoint(edge, edgeLabelOffset), edge.label.style) : "";
-    return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" opacity="${opacity}" color="${stroke}"${dash}${dashOffset}/>${markerShapes}${label}`;
+    const label = this.renderEdgeLabel(edge, edgeLabelOffset);
+    return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}" color="${stroke}"${lineCap}${lineJoin}${dash}${dashOffset}/>${markerShapes}${label}`;
+  }
+  renderEdgeLabel(edge, edgeLabelOffset) {
+    if (!edge.label) {
+      return "";
+    }
+    const labelPoint = this.getEdgeLabelPoint(edge, edgeLabelOffset);
+    const text = this.renderTextLabel(edge.label.text, labelPoint, edge.label.style);
+    const bg = this.renderEdgeLabelBackground(edge, labelPoint);
+    return `${bg}${text}`;
+  }
+  renderEdgeLabelBackground(edge, point) {
+    if (!edge.label) {
+      return "";
+    }
+    const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.padding, edge.label.margin);
+    const bgPadding = edge.labelBackground?.padding ?? EDGE_LABEL_BACKGROUND_PADDING;
+    const bgColor = edge.labelBackground?.color ?? "#ffffff";
+    const bgOpacity = edge.labelBackground?.opacity ?? 1;
+    const bgRadius = edge.labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
+    const x = point.x - metrics.width / 2 - bgPadding;
+    const y = point.y - metrics.height / 2 - bgPadding;
+    const width = metrics.width + bgPadding * 2;
+    const height = metrics.height + bgPadding * 2;
+    const radius = Math.max(0, Math.min(bgRadius, width / 2, height / 2));
+    if (radius <= 0) {
+      return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
+    }
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" ry="${radius}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
+  }
+  measureTextLabel(text, style = {}, padding = 8, margin = 0) {
+    const fontSize = style.fontSize ?? 14;
+    const fontFamily = style.fontFamily ?? "sans-serif";
+    const fontWeight = style.fontWeight ?? "normal";
+    const lineHeight = fontSize * 1.2;
+    const lines = text.split("\n");
+    let maxWidth = 0;
+    if (typeof document !== "undefined") {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        for (const line of lines) {
+          maxWidth = Math.max(maxWidth, ctx.measureText(line).width);
+        }
+      }
+    }
+    if (maxWidth === 0) {
+      const longestLine = lines.reduce((max, line) => line.length > max.length ? line : max, "");
+      maxWidth = longestLine.length * fontSize * 0.6;
+    }
+    const resolvedPadding = Math.max(0, padding);
+    const resolvedMargin = Math.max(0, margin);
+    return {
+      width: maxWidth + resolvedPadding * 2 + resolvedMargin * 2,
+      height: lines.length * lineHeight + resolvedPadding * 2 + resolvedMargin * 2
+    };
   }
   resolveMarkerConfig(edge, side) {
     const marker = side === "start" ? edge.startMarker : edge.endMarker;
@@ -8905,9 +8963,55 @@ class SvgExporter {
     const opacity = style.opacity ?? 1;
     const anchor = style.align === "left" ? "start" : style.align === "right" ? "end" : "middle";
     const baseline = style.baseline === "top" ? "text-before-edge" : style.baseline === "bottom" ? "text-after-edge" : "middle";
-    return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}">${this.escapeText(
-      text
-    )}</text>`;
+    const lines = text.split("\n");
+    if (lines.length <= 1) {
+      return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}">${this.escapeText(
+        text
+      )}</text>`;
+    }
+    const lineHeight = fontSize * 1.2;
+    const startY = point.y - (lines.length - 1) * lineHeight / 2;
+    const tspans = lines.map((line, index) => `<tspan x="${point.x}" y="${startY + index * lineHeight}">${this.escapeText(line)}</tspan>`).join("");
+    return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}">${tspans}</text>`;
+  }
+  renderNodeLabel(node, bounds) {
+    const label = node.label;
+    if (!label) {
+      return "";
+    }
+    const style = label.style;
+    const fontSize = style.fontSize ?? 14;
+    const lineHeight = fontSize * 1.2;
+    const lines = label.text.split("\n");
+    const textHeight = Math.max(lineHeight, lines.length * lineHeight);
+    const padding = Math.max(0, label.padding);
+    const margin = Math.max(0, label.margin);
+    const inset = padding + margin;
+    const align = style.align ?? "center";
+    const placement = node.labelPlacement === "auto" ? "center" : node.labelPlacement;
+    const inner = {
+      x: bounds.x + margin,
+      y: bounds.y + margin,
+      width: Math.max(0, bounds.width - margin * 2),
+      height: Math.max(0, bounds.height - margin * 2)
+    };
+    let x = inner.x + inner.width / 2;
+    if (align === "left") {
+      x = inner.x + inset;
+    } else if (align === "right") {
+      x = inner.x + inner.width - inset;
+    }
+    let y = inner.y + inner.height / 2;
+    if (placement === "top") {
+      y = inner.y + inset + textHeight / 2;
+    } else if (placement === "bottom") {
+      y = inner.y + inner.height - inset - textHeight / 2;
+    } else if (placement === "left") {
+      x = inner.x + inset;
+    } else if (placement === "right") {
+      x = inner.x + inner.width - inset;
+    }
+    return this.renderTextLabel(label.text, { x, y }, style);
   }
   getNodeCornerRadius(node, bounds) {
     const rectangleRadius = "cornerRadius" in node && typeof node.cornerRadius === "number" ? node.cornerRadius ?? 0 : node.style.cornerRadius ?? 0;