@abyss-project/tools 1.1.1 → 1.2.0

package/src/utils/shape.utils.ts

@@ -1,292 +1,292 @@
-import { ICON_LIBRARY } from './icons.utils';
-import {
-  Id,
-  Point,
-  DrawSize,
-  DrawStyle,
-  DrawShapeType,
-  DrawShapeToJsonResult,
-} from '../types/draw.type';
-
-export type Endpoint = {
-  style: DrawArrowEndpointStyle;
-} & (
-  | { kind: 'free'; x: number; y: number }
-  | { kind: 'anchor'; shapeId: Id; relativeX: number; relativeY: number }
-);
-
-export type DrawArrowEndpointStyle = 'arrow' | 'circle' | 'square' | 'diamond' | 'none';
-
-export type CurvePoint = Point & {
-  type: 'straight' | 'curved'; // type de courbure: angle droit ou arrondi
-};
-
-export const rectangleToSvg = (position: Point, size: DrawSize, style: DrawStyle): string => {
-  const x = position.x - size.width / 2;
-  const y = position.y - size.height / 2;
-  const width = size.width;
-  const height = size.height;
-  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-  const centerX = position.x;
-  const centerY = position.y;
-
-  return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
-    style.strokeWidth
-  }" opacity="${style.opacity}" rx="${style.cornerRadius}" ry="${
-    style.cornerRadius
-  }" stroke-dasharray="${style.lineDash || 'none'}" transform="rotate(${
-    style.rotation
-  } ${centerX} ${centerY})" />`;
-};
-
-export const diamondToSvg = (position: Point, size: DrawSize, style: DrawStyle): string => {
-  const cx = position.x;
-  const cy = position.y;
-  const halfWidth = size.width / 2;
-  const halfHeight = size.height / 2;
-  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-
-  const points = [
-    `${cx},${cy - halfHeight}`, // Top
-    `${cx + halfWidth},${cy}`, // Right
-    `${cx},${cy + halfHeight}`, // Bottom
-    `${cx - halfWidth},${cy}`, // Left
-  ].join(' ');
-
-  return `<polygon points="${points}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
-    style.strokeWidth
-  }" stroke-dasharray="${style.lineDash || 'none'}" opacity="${style.opacity}" transform="rotate(${
-    style.rotation
-  } ${cx} ${cy})" />`;
-};
-
-export const ellipseToSvg = (position: Point, size: DrawSize, style: DrawStyle): string => {
-  const cx = position.x;
-  const cy = position.y;
-  const radiusX = size.width / 2;
-  const radiusY = size.height / 2;
-  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-
-  return `<ellipse cx="${cx}" cy="${cy}" rx="${radiusX}" ry="${radiusY}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
-    style.strokeWidth
-  }" opacity="${style.opacity}" stroke-dasharray="${style.lineDash || 'none'}" transform="rotate(${
-    style.rotation
-  } ${cx} ${cy})" />`;
-};
-
-export const textToSvg = (position: Point, style: DrawStyle, text: string): string => {
-  const x = position.x;
-  const y = position.y;
-  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-
-  return `<text x="${x}" y="${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
-    style.strokeWidth
-  }" opacity="${style.opacity}" font-size="${style.fontSize}" font-family="${style.fontFamily}"
-  stroke-dasharray="${
-    style.lineDash || 'none'
-  }" text-anchor="middle" dominant-baseline="middle" transform="rotate(${
-    style.rotation
-  } ${x} ${y})">${text}</text>`;
-};
-
-export const iconToSvg = (
-  position: Point,
-  size: DrawSize,
-  style: DrawStyle,
-  iconSymbol: string,
-): string => {
-  const x = position.x;
-  const y = position.y;
-  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-  const fontSize = Math.min(size.width, size.height) * 0.8;
-
-  return `<text x="${x}" y="${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" opacity="${style.opacity}" font-size="${fontSize}" font-family="Arial" text-anchor="middle" dominant-baseline="middle" transform="rotate(${style.rotation} ${x} ${y})">${iconSymbol}</text>`;
-};
-
-export const imageToSvg = (
-  position: Point,
-  size: DrawSize,
-  style: DrawStyle,
-  src: string,
-): string => {
-  const x = position.x - size.width / 2;
-  const y = position.y - size.height / 2;
-  const width = size.width;
-  const height = size.height;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-  const centerX = position.x;
-  const centerY = position.y;
-
-  return `<image x="${x}" y="${y}" width="${width}" height="${height}" href="${src}" opacity="${style.opacity}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" rx="${style.cornerRadius}" ry="${style.cornerRadius}" transform="rotate(${style.rotation} ${centerX} ${centerY})" />`;
-};
-
-export const commentToSvg = (
-  position: Point,
-  size: DrawSize,
-  style: DrawStyle,
-  id: string,
-): string => {
-  const cx = position.x;
-  const cy = position.y;
-  const radius = size.width / 2;
-  const fillColor = style.fillColor === 'none' ? 'transparent' : style.fillColor;
-  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
-  const fontSize = size.width * 0.6;
-
-  // Calculate text position to center the "!" character
-  const textX = cx;
-  const textY = cy + fontSize * 0.35; // Adjust for vertical centering
-
-  return `
-    <g opacity="${style.opacity}" transform="rotate(${style.rotation} ${cx} ${cy})">
-      <defs>
-        <filter id="comment-shadow-${id}" x="-50%" y="-50%" width="200%" height="200%">
-          <feDropShadow dx="2" dy="2" stdDeviation="5" flood-color="black" flood-opacity="0.3"/>
-        </filter>
-      </defs>
-      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" filter="url(#comment-shadow-${id})" />
-      <text x="${textX}" y="${textY}" fill="white" font-size="${fontSize}" font-family="Arial" text-anchor="middle" dominant-baseline="middle" font-weight="bold">!</text>
-    </g>`;
-};
-
-const renderEndpointStyleSvg = (
-  x: number,
-  y: number,
-  style: DrawArrowEndpointStyle,
-  angle: number,
-  strokeColor: string,
-  fillColor: string,
-  strokeWidth: number,
-): string => {
-  switch (style) {
-    case 'circle':
-      return `<circle cx="${x}" cy="${y}" r="6" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
-
-    case 'square':
-      const squareX = x - 6;
-      const squareY = y - 6;
-      return `<rect x="${squareX}" y="${squareY}" width="12" height="12" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" transform="rotate(${
-        angle * (180 / Math.PI)
-      } ${x} ${y})" />`;
-
-    case 'diamond':
-      return `<polygon points="${x},${y - 6} ${x + 6},${y} ${x},${y + 6} ${
-        x - 6
-      },${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" transform="rotate(${
-        angle * (180 / Math.PI)
-      } ${x} ${y})" />`;
-
-    case 'arrow':
-      const arrowSize = 8;
-      const x1 = x - arrowSize * Math.cos(angle - Math.PI / 6);
-      const y1 = y - arrowSize * Math.sin(angle - Math.PI / 6);
-      const x2 = x - arrowSize * Math.cos(angle + Math.PI / 6);
-      const y2 = y - arrowSize * Math.sin(angle + Math.PI / 6);
-      return `<polygon points="${x},${y} ${x1},${y1} ${x2},${y2}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
-
-    case 'none':
-    default:
-      return '';
-  }
-};
-
-export const arrowToSvg = (
-  style: DrawStyle,
-  startEndpoint: Endpoint,
-  endEndpoint: Endpoint,
-  fromPos: Point,
-  toPos: Point,
-): string => {
-  const angle = Math.atan2(toPos.y - fromPos.y, toPos.x - fromPos.x);
-
-  let svg = `<g opacity="${style.opacity}">`;
-
-  svg += `<line x1="${fromPos.x}" y1="${fromPos.y}" x2="${toPos.x}" y2="${toPos.y}" stroke="${style.strokeColor}" stroke-width="${style.strokeWidth}" />`;
-
-  svg += renderEndpointStyleSvg(
-    fromPos.x,
-    fromPos.y,
-    startEndpoint.style as DrawArrowEndpointStyle,
-    angle + Math.PI,
-    style.strokeColor,
-    style.fillColor,
-    style.strokeWidth,
-  );
-
-  svg += renderEndpointStyleSvg(
-    toPos.x,
-    toPos.y,
-    endEndpoint.style as DrawArrowEndpointStyle,
-    angle,
-    style.strokeColor,
-    style.fillColor,
-    style.strokeWidth,
-  );
-
-  svg += '</g>';
-
-  return svg;
-};
-
-export const sceneToSVG = (
-  shapes: DrawShapeToJsonResult[],
-  width: number,
-  height: number,
-): string => {
-  const shapeEls = shapes
-    .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0))
-    .map((s) => {
-      switch (s.type) {
-        case DrawShapeType.RECTANGLE:
-          return rectangleToSvg(s.position, s.size, s.style);
-        case DrawShapeType.DIAMOND:
-          return diamondToSvg(s.position, s.size, s.style);
-        case DrawShapeType.ELLIPSE:
-          return ellipseToSvg(s.position, s.size, s.style);
-        case DrawShapeType.TEXT:
-          return textToSvg(s.position, s.style, s.text || '');
-        case DrawShapeType.ICON:
-          const iconSymbol = ICON_LIBRARY[s.iconType] || '';
-          return iconToSvg(s.position, s.size, s.style, iconSymbol);
-        case DrawShapeType.IMAGE:
-          return imageToSvg(s.position, s.size, s.style, s.src);
-        case DrawShapeType.COMMENT:
-          return commentToSvg(s.position, s.size, s.style, s.id);
-        case DrawShapeType.ARROW:
-          if (s.startEndpoint && s.endEndpoint) {
-            const startEp = s.startEndpoint;
-            const endEp = s.endEndpoint;
-            const fromPos =
-              startEp.kind === 'anchor'
-                ? shapes.find((shape) => shape.id === startEp.shapeId)?.position
-                : { x: startEp.x, y: startEp.y };
-            const toPos =
-              endEp.kind === 'anchor'
-                ? shapes.find((shape) => shape.id === endEp.shapeId)?.position
-                : { x: endEp.x, y: endEp.y };
-            if (!fromPos || !toPos) return '';
-            return arrowToSvg(s.style, s.startEndpoint, s.endEndpoint, fromPos, toPos);
-          }
-          return '';
-        default:
-          return '';
-      }
-    });
-
-  const defs = `
-<defs>
-  <marker id="arrow" markerWidth="10" markerHeight="10" refX="10" refY="5" orient="auto-start-reverse">
-    <path d="M0,0 L10,5 L0,10 z" fill="currentColor"/>
-  </marker>
-</defs>`;
-
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-  ${defs}
-  ${shapeEls.join('\n')}
-</svg>`;
-};
+import { ICON_LIBRARY } from './icons.utils';
+import {
+  Id,
+  Point,
+  DrawSize,
+  DrawStyle,
+  DrawShapeType,
+  DrawShapeToJsonResult,
+} from '../types/draw.type';
+
+export type Endpoint = {
+  style: DrawArrowEndpointStyle;
+} & (
+  | { kind: 'free'; x: number; y: number }
+  | { kind: 'anchor'; shapeId: Id; relativeX: number; relativeY: number }
+);
+
+export type DrawArrowEndpointStyle = 'arrow' | 'circle' | 'square' | 'diamond' | 'none';
+
+export type CurvePoint = Point & {
+  type: 'straight' | 'curved'; // type de courbure: angle droit ou arrondi
+};
+
+export const rectangleToSvg = (position: Point, size: DrawSize, style: DrawStyle): string => {
+  const x = position.x - size.width / 2;
+  const y = position.y - size.height / 2;
+  const width = size.width;
+  const height = size.height;
+  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+  const centerX = position.x;
+  const centerY = position.y;
+
+  return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
+    style.strokeWidth
+  }" opacity="${style.opacity}" rx="${style.cornerRadius}" ry="${
+    style.cornerRadius
+  }" stroke-dasharray="${style.lineDash || 'none'}" transform="rotate(${
+    style.rotation
+  } ${centerX} ${centerY})" />`;
+};
+
+export const diamondToSvg = (position: Point, size: DrawSize, style: DrawStyle): string => {
+  const cx = position.x;
+  const cy = position.y;
+  const halfWidth = size.width / 2;
+  const halfHeight = size.height / 2;
+  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+
+  const points = [
+    `${cx},${cy - halfHeight}`, // Top
+    `${cx + halfWidth},${cy}`, // Right
+    `${cx},${cy + halfHeight}`, // Bottom
+    `${cx - halfWidth},${cy}`, // Left
+  ].join(' ');
+
+  return `<polygon points="${points}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
+    style.strokeWidth
+  }" stroke-dasharray="${style.lineDash || 'none'}" opacity="${style.opacity}" transform="rotate(${
+    style.rotation
+  } ${cx} ${cy})" />`;
+};
+
+export const ellipseToSvg = (position: Point, size: DrawSize, style: DrawStyle): string => {
+  const cx = position.x;
+  const cy = position.y;
+  const radiusX = size.width / 2;
+  const radiusY = size.height / 2;
+  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+
+  return `<ellipse cx="${cx}" cy="${cy}" rx="${radiusX}" ry="${radiusY}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
+    style.strokeWidth
+  }" opacity="${style.opacity}" stroke-dasharray="${style.lineDash || 'none'}" transform="rotate(${
+    style.rotation
+  } ${cx} ${cy})" />`;
+};
+
+export const textToSvg = (position: Point, style: DrawStyle, text: string): string => {
+  const x = position.x;
+  const y = position.y;
+  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+
+  return `<text x="${x}" y="${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${
+    style.strokeWidth
+  }" opacity="${style.opacity}" font-size="${style.fontSize}" font-family="${style.fontFamily}"
+  stroke-dasharray="${
+    style.lineDash || 'none'
+  }" text-anchor="middle" dominant-baseline="middle" transform="rotate(${
+    style.rotation
+  } ${x} ${y})">${text}</text>`;
+};
+
+export const iconToSvg = (
+  position: Point,
+  size: DrawSize,
+  style: DrawStyle,
+  iconSymbol: string,
+): string => {
+  const x = position.x;
+  const y = position.y;
+  const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+  const fontSize = Math.min(size.width, size.height) * 0.8;
+
+  return `<text x="${x}" y="${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" opacity="${style.opacity}" font-size="${fontSize}" font-family="Arial" text-anchor="middle" dominant-baseline="middle" transform="rotate(${style.rotation} ${x} ${y})">${iconSymbol}</text>`;
+};
+
+export const imageToSvg = (
+  position: Point,
+  size: DrawSize,
+  style: DrawStyle,
+  src: string,
+): string => {
+  const x = position.x - size.width / 2;
+  const y = position.y - size.height / 2;
+  const width = size.width;
+  const height = size.height;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+  const centerX = position.x;
+  const centerY = position.y;
+
+  return `<image x="${x}" y="${y}" width="${width}" height="${height}" href="${src}" opacity="${style.opacity}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" rx="${style.cornerRadius}" ry="${style.cornerRadius}" transform="rotate(${style.rotation} ${centerX} ${centerY})" />`;
+};
+
+export const commentToSvg = (
+  position: Point,
+  size: DrawSize,
+  style: DrawStyle,
+  id: string,
+): string => {
+  const cx = position.x;
+  const cy = position.y;
+  const radius = size.width / 2;
+  const fillColor = style.fillColor === 'none' ? 'transparent' : style.fillColor;
+  const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+  const fontSize = size.width * 0.6;
+
+  // Calculate text position to center the "!" character
+  const textX = cx;
+  const textY = cy + fontSize * 0.35; // Adjust for vertical centering
+
+  return `
+    <g opacity="${style.opacity}" transform="rotate(${style.rotation} ${cx} ${cy})">
+      <defs>
+        <filter id="comment-shadow-${id}" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="2" dy="2" stdDeviation="5" flood-color="black" flood-opacity="0.3"/>
+        </filter>
+      </defs>
+      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" filter="url(#comment-shadow-${id})" />
+      <text x="${textX}" y="${textY}" fill="white" font-size="${fontSize}" font-family="Arial" text-anchor="middle" dominant-baseline="middle" font-weight="bold">!</text>
+    </g>`;
+};
+
+const renderEndpointStyleSvg = (
+  x: number,
+  y: number,
+  style: DrawArrowEndpointStyle,
+  angle: number,
+  strokeColor: string,
+  fillColor: string,
+  strokeWidth: number,
+): string => {
+  switch (style) {
+    case 'circle':
+      return `<circle cx="${x}" cy="${y}" r="6" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+
+    case 'square':
+      const squareX = x - 6;
+      const squareY = y - 6;
+      return `<rect x="${squareX}" y="${squareY}" width="12" height="12" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" transform="rotate(${
+        angle * (180 / Math.PI)
+      } ${x} ${y})" />`;
+
+    case 'diamond':
+      return `<polygon points="${x},${y - 6} ${x + 6},${y} ${x},${y + 6} ${
+        x - 6
+      },${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" transform="rotate(${
+        angle * (180 / Math.PI)
+      } ${x} ${y})" />`;
+
+    case 'arrow':
+      const arrowSize = 8;
+      const x1 = x - arrowSize * Math.cos(angle - Math.PI / 6);
+      const y1 = y - arrowSize * Math.sin(angle - Math.PI / 6);
+      const x2 = x - arrowSize * Math.cos(angle + Math.PI / 6);
+      const y2 = y - arrowSize * Math.sin(angle + Math.PI / 6);
+      return `<polygon points="${x},${y} ${x1},${y1} ${x2},${y2}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+
+    case 'none':
+    default:
+      return '';
+  }
+};
+
+export const arrowToSvg = (
+  style: DrawStyle,
+  startEndpoint: Endpoint,
+  endEndpoint: Endpoint,
+  fromPos: Point,
+  toPos: Point,
+): string => {
+  const angle = Math.atan2(toPos.y - fromPos.y, toPos.x - fromPos.x);
+
+  let svg = `<g opacity="${style.opacity}">`;
+
+  svg += `<line x1="${fromPos.x}" y1="${fromPos.y}" x2="${toPos.x}" y2="${toPos.y}" stroke="${style.strokeColor}" stroke-width="${style.strokeWidth}" />`;
+
+  svg += renderEndpointStyleSvg(
+    fromPos.x,
+    fromPos.y,
+    startEndpoint.style as DrawArrowEndpointStyle,
+    angle + Math.PI,
+    style.strokeColor,
+    style.fillColor,
+    style.strokeWidth,
+  );
+
+  svg += renderEndpointStyleSvg(
+    toPos.x,
+    toPos.y,
+    endEndpoint.style as DrawArrowEndpointStyle,
+    angle,
+    style.strokeColor,
+    style.fillColor,
+    style.strokeWidth,
+  );
+
+  svg += '</g>';
+
+  return svg;
+};
+
+export const sceneToSVG = (
+  shapes: DrawShapeToJsonResult[],
+  width: number,
+  height: number,
+): string => {
+  const shapeEls = shapes
+    .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0))
+    .map((s) => {
+      switch (s.type) {
+        case DrawShapeType.RECTANGLE:
+          return rectangleToSvg(s.position, s.size, s.style);
+        case DrawShapeType.DIAMOND:
+          return diamondToSvg(s.position, s.size, s.style);
+        case DrawShapeType.ELLIPSE:
+          return ellipseToSvg(s.position, s.size, s.style);
+        case DrawShapeType.TEXT:
+          return textToSvg(s.position, s.style, s.text || '');
+        case DrawShapeType.ICON:
+          const iconSymbol = ICON_LIBRARY[s.iconType] || '';
+          return iconToSvg(s.position, s.size, s.style, iconSymbol);
+        case DrawShapeType.IMAGE:
+          return imageToSvg(s.position, s.size, s.style, s.src);
+        case DrawShapeType.COMMENT:
+          return commentToSvg(s.position, s.size, s.style, s.id);
+        case DrawShapeType.ARROW:
+          if (s.startEndpoint && s.endEndpoint) {
+            const startEp = s.startEndpoint;
+            const endEp = s.endEndpoint;
+            const fromPos =
+              startEp.kind === 'anchor'
+                ? shapes.find((shape) => shape.id === startEp.shapeId)?.position
+                : { x: startEp.x, y: startEp.y };
+            const toPos =
+              endEp.kind === 'anchor'
+                ? shapes.find((shape) => shape.id === endEp.shapeId)?.position
+                : { x: endEp.x, y: endEp.y };
+            if (!fromPos || !toPos) return '';
+            return arrowToSvg(s.style, s.startEndpoint, s.endEndpoint, fromPos, toPos);
+          }
+          return '';
+        default:
+          return '';
+      }
+    });
+
+  const defs = `
+<defs>
+  <marker id="arrow" markerWidth="10" markerHeight="10" refX="10" refY="5" orient="auto-start-reverse">
+    <path d="M0,0 L10,5 L0,10 z" fill="currentColor"/>
+  </marker>
+</defs>`;
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+  ${defs}
+  ${shapeEls.join('\n')}
+</svg>`;
+};