@spectratools/graphic-designer-cli 0.8.0 → 0.10.0

package/dist/renderer.js

@@ -473,6 +473,38 @@ function renderFlowNode(ctx, node, bounds, theme) {
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
   }
+  if (node.accentColor) {
+    const barWidth = node.accentBarWidth ?? 3;
+    const effectiveRadius = node.shape === "box" ? 0 : cornerRadius;
+    ctx.save();
+    ctx.beginPath();
+    ctx.roundRect(bounds.x, bounds.y, bounds.width, bounds.height, effectiveRadius);
+    ctx.clip();
+    ctx.fillStyle = node.accentColor;
+    ctx.fillRect(bounds.x, bounds.y, barWidth, bounds.height);
+    ctx.restore();
+  }
+  if (node.glowColor) {
+    const glowW = node.glowWidth ?? 16;
+    const glowOp = node.glowOpacity ?? 0.15;
+    ctx.save();
+    ctx.beginPath();
+    ctx.roundRect(bounds.x, bounds.y, bounds.width, bounds.height, cornerRadius);
+    ctx.clip();
+    const barOffset = node.accentColor ? node.accentBarWidth ?? 3 : 0;
+    const gradient = ctx.createLinearGradient(
+      bounds.x + barOffset,
+      bounds.y,
+      bounds.x + barOffset + glowW,
+      bounds.y
+    );
+    gradient.addColorStop(0, node.glowColor);
+    gradient.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.globalAlpha = glowOp;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    ctx.restore();
+  }
   const headingFont = resolveFont(theme.fonts.heading, "heading");
   const bodyFont = resolveFont(theme.fonts.body, "body");
   const monoFont = resolveFont(theme.fonts.mono, "mono");
@@ -1976,16 +2008,6 @@ function drawBezier(ctx, points, style) {
   ctx.quadraticCurveTo(penultimate.x, penultimate.y, last.x, last.y);
   ctx.stroke();
 }
-function drawOrthogonalPath(ctx, from, to, style) {
-  const midX = (from.x + to.x) / 2;
-  applyLineStyle(ctx, style);
-  ctx.beginPath();
-  ctx.moveTo(from.x, from.y);
-  ctx.lineTo(midX, from.y);
-  ctx.lineTo(midX, to.y);
-  ctx.lineTo(to.x, to.y);
-  ctx.stroke();
-}
 
 // src/renderers/connection.ts
 var ELLIPSE_KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
@@ -2225,11 +2247,36 @@ function pointAlongPolyline(points, t) {
   }
   return points[points.length - 1];
 }
-function drawCubicInterpolatedPath(ctx, points, style) {
+function createConnectionGradient(ctx, start, end, fromColor, baseColor, toColor) {
+  const gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+  gradient.addColorStop(0, fromColor);
+  gradient.addColorStop(0.5, baseColor);
+  gradient.addColorStop(1, toColor);
+  return gradient;
+}
+function resolveConnectionStroke(ctx, start, end, fromColor, baseColor, toColor) {
+  if (!fromColor || !toColor) {
+    return baseColor;
+  }
+  return createConnectionGradient(ctx, start, end, fromColor, baseColor, toColor);
+}
+function drawOrthogonalPathWithStroke(ctx, from, to, style, stroke) {
+  const midX = (from.x + to.x) / 2;
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = style.width;
+  ctx.setLineDash(style.dash ?? []);
+  ctx.beginPath();
+  ctx.moveTo(from.x, from.y);
+  ctx.lineTo(midX, from.y);
+  ctx.lineTo(midX, to.y);
+  ctx.lineTo(to.x, to.y);
+  ctx.stroke();
+}
+function drawCubicInterpolatedPath(ctx, points, style, stroke) {
   if (points.length < 2) {
     return;
   }
-  ctx.strokeStyle = style.color;
+  ctx.strokeStyle = stroke;
   ctx.lineWidth = style.width;
   ctx.setLineDash(style.dash ?? []);
   ctx.beginPath();
@@ -2300,7 +2347,8 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
       conn.fromAnchor,
       conn.toAnchor
     );
-    ctx.strokeStyle = style.color;
+    const stroke = resolveConnectionStroke(ctx, p0, p3, conn.fromColor, style.color, conn.toColor);
+    ctx.strokeStyle = stroke;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
     ctx.beginPath();
@@ -2342,7 +2390,8 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     );
     const [p0, cp1, cp2, pMid] = first;
     const [, cp3, cp4, p3] = second;
-    ctx.strokeStyle = style.color;
+    const stroke = resolveConnectionStroke(ctx, p0, p3, conn.fromColor, style.color, conn.toColor);
+    ctx.strokeStyle = stroke;
     ctx.lineWidth = style.width;
     ctx.setLineDash(style.dash ?? []);
     ctx.beginPath();
@@ -2385,10 +2434,18 @@ function renderConnection(ctx, conn, fromBounds, toBounds, theme, edgeRoute, opt
     endPoint = linePoints[linePoints.length - 1] ?? linePoints[0];
     startAngle = Math.atan2(startSegment.y - linePoints[0].y, startSegment.x - linePoints[0].x) + Math.PI;
     endAngle = Math.atan2(endPoint.y - endStart.y, endPoint.x - endStart.x);
+    const stroke = resolveConnectionStroke(
+      ctx,
+      startPoint,
+      endPoint,
+      conn.fromColor,
+      style.color,
+      conn.toColor
+    );
     if (useElkRoute) {
-      drawCubicInterpolatedPath(ctx, linePoints, style);
+      drawCubicInterpolatedPath(ctx, linePoints, style, stroke);
     } else {
-      drawOrthogonalPath(ctx, startPoint, endPoint, style);
+      drawOrthogonalPathWithStroke(ctx, startPoint, endPoint, style, stroke);
     }
     labelPoint = pointAlongPolyline(linePoints, labelT);
   }
@@ -2693,6 +2750,9 @@ function measureTextBounds(ctx, options) {
 function angleBetween(from, to) {
   return Math.atan2(to.y - from.y, to.x - from.x);
 }
+function degreesToRadians(angle) {
+  return angle * Math.PI / 180;
+}
 function pathBounds(operations) {
   let minX = Number.POSITIVE_INFINITY;
   let minY = Number.POSITIVE_INFINITY;
@@ -2930,6 +2990,34 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "arc": {
+        const startAngle = degreesToRadians(command.startAngle);
+        const endAngle = degreesToRadians(command.endAngle);
+        withOpacity(ctx, command.opacity, () => {
+          applyDrawShadow(ctx, command.shadow);
+          ctx.beginPath();
+          ctx.setLineDash(command.dash ?? []);
+          ctx.lineWidth = command.width;
+          ctx.strokeStyle = command.color;
+          ctx.arc(command.center.x, command.center.y, command.radius, startAngle, endAngle);
+          ctx.stroke();
+        });
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: expandRect(
+            {
+              x: command.center.x - command.radius,
+              y: command.center.y - command.radius,
+              width: command.radius * 2,
+              height: command.radius * 2
+            },
+            command.width / 2
+          ),
+          foregroundColor: command.color
+        });
+        break;
+      }
       case "bezier": {
         const points = command.points;
         withOpacity(ctx, command.opacity, () => {
@@ -3086,6 +3174,84 @@ function renderDrawCommands(ctx, commands, theme) {
         });
         break;
       }
+      case "text-row": {
+        const segments = command.segments;
+        if (segments.length === 0) break;
+        const resolveSegment = (seg) => ({
+          text: seg.text,
+          fontSize: seg.fontSize ?? command.defaultFontSize,
+          fontWeight: seg.fontWeight ?? command.defaultFontWeight,
+          fontFamily: resolveDrawFont(theme, seg.fontFamily ?? command.defaultFontFamily),
+          color: seg.color ?? command.defaultColor
+        });
+        const measured = [];
+        let totalWidth = 0;
+        let maxAscent = 0;
+        let maxDescent = 0;
+        for (const seg of segments) {
+          const resolved = resolveSegment(seg);
+          applyFont(ctx, {
+            size: resolved.fontSize,
+            weight: resolved.fontWeight,
+            family: resolved.fontFamily
+          });
+          const metrics = ctx.measureText(resolved.text);
+          const width = metrics.width;
+          const ascent = metrics.actualBoundingBoxAscent || 0;
+          const descent = metrics.actualBoundingBoxDescent || 0;
+          totalWidth += width;
+          maxAscent = Math.max(maxAscent, ascent);
+          maxDescent = Math.max(maxDescent, descent);
+          measured.push({ width, resolved });
+        }
+        let cursorX;
+        if (command.align === "center") {
+          cursorX = command.x - totalWidth / 2;
+        } else if (command.align === "right") {
+          cursorX = command.x - totalWidth;
+        } else {
+          cursorX = command.x;
+        }
+        const startX = cursorX;
+        withOpacity(ctx, command.opacity, () => {
+          ctx.textBaseline = command.baseline;
+          for (const { width, resolved } of measured) {
+            applyFont(ctx, {
+              size: resolved.fontSize,
+              weight: resolved.fontWeight,
+              family: resolved.fontFamily
+            });
+            ctx.fillStyle = resolved.color;
+            ctx.textAlign = "left";
+            ctx.fillText(resolved.text, cursorX, command.y);
+            cursorX += width;
+          }
+        });
+        const height = Math.max(1, maxAscent + maxDescent);
+        let topY;
+        if (command.baseline === "top") {
+          topY = command.y;
+        } else if (command.baseline === "middle") {
+          topY = command.y - height / 2;
+        } else if (command.baseline === "bottom") {
+          topY = command.y - height;
+        } else {
+          topY = command.y - maxAscent;
+        }
+        rendered.push({
+          id,
+          kind: "draw",
+          bounds: {
+            x: startX,
+            y: topY,
+            width: Math.max(1, totalWidth),
+            height
+          },
+          foregroundColor: command.defaultColor,
+          backgroundColor: theme.background
+        });
+        break;
+      }
     }
   }
   return rendered;
@@ -3435,6 +3601,21 @@ var drawLineSchema = z2.object({
   opacity: z2.number().min(0).max(1).default(1),
   shadow: drawShadowSchema.optional()
 }).strict();
+var drawArcSchema = z2.object({
+  type: z2.literal("arc"),
+  center: z2.object({
+    x: z2.number(),
+    y: z2.number()
+  }).strict(),
+  radius: z2.number().positive(),
+  startAngle: z2.number(),
+  endAngle: z2.number(),
+  color: colorHexSchema2.default("#FFFFFF"),
+  width: z2.number().min(0.5).max(32).default(2),
+  dash: z2.array(z2.number()).max(6).optional(),
+  opacity: z2.number().min(0).max(1).default(1),
+  shadow: drawShadowSchema.optional()
+}).strict();
 var drawPointSchema = z2.object({
   x: z2.number(),
   y: z2.number()
@@ -3519,6 +3700,7 @@ var drawCommandSchema = z2.discriminatedUnion("type", [
   drawCircleSchema,
   drawTextSchema,
   drawLineSchema,
+  drawArcSchema,
   drawBezierSchema,
   drawPathSchema,
   drawBadgeSchema,
@@ -3654,6 +3836,8 @@ var connectionElementSchema = z2.object({
   label: z2.string().min(1).max(200).optional(),
   labelPosition: z2.enum(["start", "middle", "end"]).default("middle"),
   color: colorHexSchema2.optional(),
+  fromColor: colorHexSchema2.optional(),
+  toColor: colorHexSchema2.optional(),
   width: z2.number().min(0.5).max(10).optional(),
   strokeWidth: z2.number().min(0.5).max(10).default(2),
   arrowSize: z2.number().min(4).max(32).optional(),
@@ -4039,6 +4223,18 @@ async function renderDesign(input, options = {}) {
   const specHash = computeSpecHash(spec);
   const generatorVersion = options.generatorVersion ?? DEFAULT_GENERATOR_VERSION;
   const renderedAt = options.renderedAt ?? (/* @__PURE__ */ new Date()).toISOString();
+  const iteration = options.iteration;
+  if (iteration) {
+    if (!Number.isInteger(iteration.iteration) || iteration.iteration <= 0) {
+      throw new Error("Iteration metadata requires iteration to be a positive integer.");
+    }
+    if (iteration.maxIterations != null && (!Number.isInteger(iteration.maxIterations) || iteration.maxIterations <= 0)) {
+      throw new Error("Iteration metadata requires maxIterations to be a positive integer.");
+    }
+    if (iteration.maxIterations != null && iteration.maxIterations < iteration.iteration) {
+      throw new Error("Iteration metadata requires maxIterations to be >= iteration.");
+    }
+  }
   const renderScale = resolveRenderScale(spec);
   const canvas = createCanvas(spec.canvas.width * renderScale, spec.canvas.height * renderScale);
   const ctx = canvas.getContext("2d");
@@ -4279,7 +4475,8 @@ async function renderDesign(input, options = {}) {
     layout: {
       safeFrame,
       elements
-    }
+    },
+    ...iteration ? { iteration } : {}
   };
   return {
     png: pngBuffer,