@ngroznykh/papirus 0.3.1 → 0.3.3

package/dist/papirus.js

@@ -8104,7 +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 edgeLabelOffset = options.edgeLabelOffset;
     const bounds = getContentBounds({
       nodes: this.renderer.nodes.values(),
       edges: this.renderer.edges.values(),
@@ -8124,17 +8124,15 @@ 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}">`
     );
     for (const edge of this.renderer.edges.values()) {
       if (edge.visible) {
-        renderedEdges.push(this.renderEdge(edge, markerDefs, edgeLabelOffset));
+        renderedEdges.push(this.renderEdge(edge, edgeLabelOffset));
       }
     }
-    parts.push(this.buildDefs(markerDefs));
     if (includeBackground) {
       parts.push(`<rect width="100%" height="100%" fill="${backgroundColor}"/>`);
     }
@@ -8222,7 +8220,7 @@ class SvgExporter {
       label
     ].join("");
   }
-  renderEdge(edge, markerDefs, edgeLabelOffset) {
+  renderEdge(edge, edgeLabelOffset) {
     const path = edge.path;
     if (path.length < 2) {
       return "";
@@ -8235,12 +8233,9 @@ 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 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 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}${markerStart}${markerEnd}/>${label}`;
+    return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" opacity="${opacity}" color="${stroke}"${dash}${dashOffset}/>${markerShapes}${label}`;
   }
   resolveMarkerConfig(edge, side) {
     const marker = side === "start" ? edge.startMarker : edge.endMarker;
@@ -8252,40 +8247,99 @@ class SvgExporter {
     }
     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("")
-      );
+  renderEdgeMarkers(edge, edgeStroke) {
+    const startMarker = this.resolveMarkerConfig(edge, "start");
+    const endMarker = this.resolveMarkerConfig(edge, "end");
+    const parts = [];
+    if (endMarker) {
+      const points = this.getMarkerPoints(edge, "end");
+      if (points) {
+        parts.push(this.renderMarkerShape(endMarker, points.from, points.to, edgeStroke));
+      }
+    }
+    if (startMarker) {
+      const points = this.getMarkerPoints(edge, "start");
+      if (points) {
+        parts.push(this.renderMarkerShape(startMarker, points.from, points.to, edgeStroke));
+      }
     }
-    return markerId;
+    return parts.join("");
   }
-  buildMarkerId(side, type, size, fill, stroke, fillOpacity) {
-    const token = `${side}-${type}-${size}-${fill}-${stroke}-${fillOpacity}`.toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
-    return `marker-${token}`;
+  getMarkerPoints(edge, position) {
+    const path = edge.path;
+    if (path.length < 2) {
+      return null;
+    }
+    if (edge.type === "bezier" && path.length >= 4) {
+      const epsilon = 1e-3;
+      const isSame = (a, b) => Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon;
+      if (position === "end") {
+        const endIndex = path.length - 1;
+        const endPoint = path[endIndex];
+        let from = path[endIndex - 1];
+        if (isSame(from, endPoint)) {
+          from = path[endIndex - 2];
+          if (isSame(from, endPoint)) {
+            from = path[0];
+          }
+        }
+        return { from, to: endPoint };
+      }
+      const start = path[0];
+      let next = path[1];
+      if (isSame(next, start)) {
+        next = path[2];
+        if (isSame(next, start)) {
+          next = path[path.length - 1];
+        }
+      }
+      return { from: next, to: start };
+    }
+    if (position === "end") {
+      return { from: path[path.length - 2], to: path[path.length - 1] };
+    }
+    return { from: path[1], to: path[0] };
   }
-  renderMarkerShape(marker, fill, stroke, fillOpacity) {
+  renderMarkerShape(marker, from, to, edgeStroke) {
+    const angle2 = Math.atan2(to.y - from.y, to.x - from.x);
+    const size = marker.size ?? 12;
+    const stroke = marker.strokeColor ?? edgeStroke;
+    const fill = marker.fillColor ?? stroke;
+    const fillOpacity = marker.fillOpacity ?? 1;
     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 "open": {
+        const x1 = to.x - size * Math.cos(angle2 - ARROW_ANGLE);
+        const y1 = to.y - size * Math.sin(angle2 - ARROW_ANGLE);
+        const x2 = to.x - size * Math.cos(angle2 + ARROW_ANGLE);
+        const y2 = to.y - size * Math.sin(angle2 + ARROW_ANGLE);
+        return `<path d="M ${to.x} ${to.y} L ${x1} ${y1} M ${to.x} ${to.y} L ${x2} ${y2}" fill="none" stroke="${stroke}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>`;
+      }
+      case "diamond": {
+        const halfLength = size / 2;
+        const halfWidth = size * 0.3;
+        const cos = Math.cos(angle2);
+        const sin = Math.sin(angle2);
+        const p1x = to.x - halfLength * cos + halfWidth * sin;
+        const p1y = to.y - halfLength * sin - halfWidth * cos;
+        const backX = to.x - size * cos;
+        const backY = to.y - size * sin;
+        const p2x = to.x - halfLength * cos - halfWidth * sin;
+        const p2y = to.y - halfLength * sin + halfWidth * cos;
+        return `<path d="M ${to.x} ${to.y} L ${p1x} ${p1y} L ${backX} ${backY} L ${p2x} ${p2y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+      }
+      case "circle": {
+        const cx = to.x - size * Math.cos(angle2);
+        const cy = to.y - size * Math.sin(angle2);
+        return `<circle cx="${cx}" cy="${cy}" r="${size}" 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"/>`;
+      default: {
+        const x1 = to.x - size * Math.cos(angle2 - ARROW_ANGLE);
+        const y1 = to.y - size * Math.sin(angle2 - ARROW_ANGLE);
+        const x2 = to.x - size * Math.cos(angle2 + ARROW_ANGLE);
+        const y2 = to.y - size * Math.sin(angle2 + ARROW_ANGLE);
+        return `<path d="M ${to.x} ${to.y} L ${x1} ${y1} L ${x2} ${y2} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+      }
     }
   }
   buildPath(edge) {
@@ -8338,9 +8392,10 @@ class SvgExporter {
   }
   getEdgeLabelPoint(edge, edgeLabelOffset) {
     const midpoint = this.getPathMidpoint(edge);
+    const effectiveOffset = edgeLabelOffset ?? edge.labelOffset ?? 0;
     return {
       x: midpoint.x,
-      y: midpoint.y + edgeLabelOffset
+      y: midpoint.y + effectiveOffset
     };
   }
   renderTextLabel(text, point, style = {}) {
@@ -8354,12 +8409,6 @@ class SvgExporter {
       text
     )}</text>`;
   }
-  buildDefs(markerDefs) {
-    if (markerDefs.size === 0) {
-      return "<defs></defs>";
-    }
-    return `<defs>${Array.from(markerDefs.values()).join("")}</defs>`;
-  }
   createEmptySvg(width, height, backgroundColor, includeBackground) {
     return [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,