@ngroznykh/papirus 0.3.0 → 0.3.1

package/dist/papirus.js

@@ -8104,6 +8104,7 @@ class SvgExporter {
     const padding = options.padding ?? 20;
     const includeBackground = options.includeBackground ?? true;
     const backgroundColor = options.backgroundColor ?? "#ffffff";
+    const edgeLabelOffset = options.edgeLabelOffset ?? 0;
     const bounds = getContentBounds({
       nodes: this.renderer.nodes.values(),
       edges: this.renderer.edges.values(),
@@ -8123,10 +8124,17 @@ class SvgExporter {
       this.renderer.nodes.values()
     );
     const parts = [];
+    const markerDefs = /* @__PURE__ */ new Map();
+    const renderedEdges = [];
     parts.push(
       `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`
     );
-    parts.push(this.arrowDefs());
+    for (const edge of this.renderer.edges.values()) {
+      if (edge.visible) {
+        renderedEdges.push(this.renderEdge(edge, markerDefs, edgeLabelOffset));
+      }
+    }
+    parts.push(this.buildDefs(markerDefs));
     if (includeBackground) {
       parts.push(`<rect width="100%" height="100%" fill="${backgroundColor}"/>`);
     }
@@ -8136,11 +8144,7 @@ class SvgExporter {
         parts.push(this.renderGroup(group));
       }
     }
-    for (const edge of this.renderer.edges.values()) {
-      if (edge.visible) {
-        parts.push(this.renderEdge(edge));
-      }
-    }
+    parts.push(...renderedEdges);
     for (const node of this.renderer.nodes.values()) {
       if (node.visible) {
         parts.push(this.renderNode(node));
@@ -8218,7 +8222,7 @@ class SvgExporter {
       label
     ].join("");
   }
-  renderEdge(edge) {
+  renderEdge(edge, markerDefs, edgeLabelOffset) {
     const path = edge.path;
     if (path.length < 2) {
       return "";
@@ -8231,11 +8235,59 @@ class SvgExporter {
     const dash = dashValues ? ` stroke-dasharray="${dashValues.join(" ")}"` : "";
     const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
     const d = this.buildPath(edge);
-    const markerEnd = edge.arrowType === "none" ? "" : ` marker-end="url(#arrow)"`;
-    const markerStart = edge.arrowType === "double" ? ` marker-start="url(#arrow)"` : "";
-    const label = edge.label ? this.renderTextLabel(edge.label.text, this.getPathMidpoint(edge), edge.label.style) : "";
+    const startMarkerConfig = this.resolveMarkerConfig(edge, "start");
+    const endMarkerConfig = this.resolveMarkerConfig(edge, "end");
+    const markerStart = startMarkerConfig ? ` marker-start="url(#${this.ensureMarkerDef(markerDefs, startMarkerConfig, "start", stroke)})"` : "";
+    const markerEnd = endMarkerConfig ? ` marker-end="url(#${this.ensureMarkerDef(markerDefs, endMarkerConfig, "end", 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}${markerStart}${markerEnd}/>${label}`;
   }
+  resolveMarkerConfig(edge, side) {
+    const marker = side === "start" ? edge.startMarker : edge.endMarker;
+    if (marker && marker.type !== "none") {
+      return marker;
+    }
+    if (side === "end") {
+      return edge.arrowType === "none" ? null : { type: "arrow" };
+    }
+    return edge.arrowType === "double" ? { type: "arrow" } : null;
+  }
+  ensureMarkerDef(markerDefs, marker, side, stroke) {
+    const size = marker.size ?? 12;
+    const markerStroke = marker.strokeColor ?? stroke;
+    const markerFill = marker.fillColor ?? markerStroke;
+    const fillOpacity = marker.fillOpacity ?? 1;
+    const markerId = this.buildMarkerId(side, marker.type, size, markerFill, markerStroke, fillOpacity);
+    if (!markerDefs.has(markerId)) {
+      const refX = marker.type === "circle" ? 5 : 10;
+      markerDefs.set(
+        markerId,
+        [
+          `<marker id="${markerId}" viewBox="0 0 10 10" refX="${refX}" refY="5" markerWidth="${size}" markerHeight="${size}" orient="auto-start-reverse" markerUnits="userSpaceOnUse">`,
+          this.renderMarkerShape(marker, markerFill, markerStroke, fillOpacity),
+          `</marker>`
+        ].join("")
+      );
+    }
+    return markerId;
+  }
+  buildMarkerId(side, type, size, fill, stroke, fillOpacity) {
+    const token = `${side}-${type}-${size}-${fill}-${stroke}-${fillOpacity}`.toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+    return `marker-${token}`;
+  }
+  renderMarkerShape(marker, fill, stroke, fillOpacity) {
+    switch (marker.type) {
+      case "open":
+        return `<path d="M 10 0 L 0 5 L 10 10" fill="none" stroke="${stroke}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>`;
+      case "diamond":
+        return `<path d="M 10 5 L 5 0 L 0 5 L 5 10 z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+      case "circle":
+        return `<circle cx="5" cy="5" r="4" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+      case "arrow":
+      default:
+        return `<path d="M 0 0 L 10 5 L 0 10 z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+    }
+  }
   buildPath(edge) {
     const path = edge.path;
     if (edge.type === "bezier" && path.length >= 4) {
@@ -8284,6 +8336,13 @@ class SvgExporter {
     }
     return path[0];
   }
+  getEdgeLabelPoint(edge, edgeLabelOffset) {
+    const midpoint = this.getPathMidpoint(edge);
+    return {
+      x: midpoint.x,
+      y: midpoint.y + edgeLabelOffset
+    };
+  }
   renderTextLabel(text, point, style = {}) {
     const fill = style.color ?? "#000000";
     const fontSize = style.fontSize ?? 14;
@@ -8295,14 +8354,11 @@ class SvgExporter {
       text
     )}</text>`;
   }
-  arrowDefs() {
-    return [
-      "<defs>",
-      '<marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">',
-      '<path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor"/>',
-      "</marker>",
-      "</defs>"
-    ].join("");
+  buildDefs(markerDefs) {
+    if (markerDefs.size === 0) {
+      return "<defs></defs>";
+    }
+    return `<defs>${Array.from(markerDefs.values()).join("")}</defs>`;
   }
   createEmptySvg(width, height, backgroundColor, includeBackground) {
     return [