@eventcatalog/visualiser 3.18.0 → 3.18.1

package/dist/index.js

@@ -5498,6 +5498,7 @@ var AnimatedMessageEdge = (0, import_react53.memo)(
       [lines]
     );
     const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
+    const firstLineDy = `${-((lines.length - 1) * 1.2) / 2}em`;
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         import_react54.BaseEdge,
@@ -5541,7 +5542,7 @@ var AnimatedMessageEdge = (0, import_react53.memo)(
               "tspan",
               {
                 x: labelX,
-                dy: i === 0 ? 0 : "1.2em",
+                dy: i === 0 ? firstLineDy : "1.2em",
                 style: i === 0 ? TSPAN_NORMAL_STYLE : TSPAN_ITALIC_STYLE,
                 children: line
               },
@@ -5586,6 +5587,16 @@ var MultilineEdgeLabel_default = (0, import_react55.memo)(function MultilineEdge
     targetPosition
   });
   const lines = (0, import_react55.useMemo)(() => String(label ?? "").split("\n"), [label]);
+  const firstLineDy = (0, import_react55.useMemo)(
+    () => `${-((lines.length - 1) * 1.2) / 2}em`,
+    [lines.length]
+  );
+  const longestLine = (0, import_react55.useMemo)(
+    () => lines.reduce((a, b) => a.length > b.length ? a : b, ""),
+    [lines]
+  );
+  const labelWidth = Math.max(longestLine.length * 5.5 + 14, 44);
+  const labelHeight = lines.length * 12 + 4;
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "path",
@@ -5598,6 +5609,22 @@ var MultilineEdgeLabel_default = (0, import_react55.memo)(function MultilineEdge
         style
       }
     ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "rect",
+      {
+        x: labelX - labelWidth / 2,
+        y: labelY - labelHeight / 2,
+        width: labelWidth,
+        height: labelHeight,
+        fill: "rgb(var(--ec-card-bg))",
+        fillOpacity: 0.95,
+        stroke: "rgb(var(--ec-page-border))",
+        strokeWidth: 0.75,
+        rx: 5,
+        ry: 5,
+        pointerEvents: "none"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "text",
       {
@@ -5612,7 +5639,7 @@ var MultilineEdgeLabel_default = (0, import_react55.memo)(function MultilineEdge
           "tspan",
           {
             x: labelX,
-            dy: i === 0 ? 0 : "1.2em",
+            dy: i === 0 ? firstLineDy : "1.2em",
             style: i === 0 ? TSPAN_NORMAL_STYLE2 : TSPAN_ITALIC_STYLE2,
             children: line
           },
@@ -10691,7 +10718,7 @@ var NodeGraphBuilder = ({
                       {
                         onClick: handleQuickSaveLayout,
                         disabled: isSavingLayout,
-                        className: "text-xs font-medium text-[rgb(var(--ec-accent-text))] bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle)/0.7)] px-2 py-1 rounded transition-colors disabled:opacity-50",
+                        className: "text-xs font-medium text-white bg-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-hover))] px-2 py-1 rounded transition-colors disabled:opacity-50",
                         children: isSavingLayout ? "Saving..." : "Save"
                       }
                     )