@ngroznykh/papirus 0.3.0 → 0.3.2

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,15 @@ class SvgExporter {
       this.renderer.nodes.values()
     );
     const parts = [];
+    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, edgeLabelOffset));
+      }
+    }
     if (includeBackground) {
       parts.push(`<rect width="100%" height="100%" fill="${backgroundColor}"/>`);
     }
@@ -8136,11 +8142,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 +8220,7 @@ class SvgExporter {
       label
     ].join("");
   }
-  renderEdge(edge) {
+  renderEdge(edge, edgeLabelOffset) {
     const path = edge.path;
     if (path.length < 2) {
       return "";
@@ -8231,10 +8233,114 @@ 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) : "";
-    return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" opacity="${opacity}" color="${stroke}"${dash}${dashOffset}${markerStart}${markerEnd}/>${label}`;
+    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}`;
+  }
+  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;
+  }
+  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 parts.join("");
+  }
+  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, 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": {
+        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: {
+        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) {
     const path = edge.path;
@@ -8284,6 +8390,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,15 +8408,6 @@ 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("");
-  }
   createEmptySvg(width, height, backgroundColor, includeBackground) {
     return [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,