@markdstage/markdstage 3.4.0 → 3.8.0

package/shared/renderer/scene-graph.mjs

@@ -15,18 +15,28 @@ export const MAX_STRING_LENGTH = 8192;
 
 const SCENE_VERSION = 1;
 const METRIC_PRECISION = 10;
+const DRAWINGML_ANGLE_UNITS_PER_DEGREE = 60000;
+const DRAWINGML_HALF_TURN = 180 * DRAWINGML_ANGLE_UNITS_PER_DEGREE;
+const DRAWINGML_FULL_TURN = 360 * DRAWINGML_ANGLE_UNITS_PER_DEGREE;
 const NODE_KINDS = new Set(["group", "shape", "text", "image", "connector", "fallback"]);
 const SOURCE_KINDS = new Set(["architecture", "mermaid"]);
 const SHAPE_PRESETS = new Set([
   "rect",
   "roundedRect",
+  "topRoundedRect",
   "ellipse",
   "diamond",
   "triangle",
   "hexagon",
+  "quarterHeightHexagon",
   "parallelogram",
+  "reverseParallelogram",
+  "trapezoid",
+  "invertedTrapezoid",
+  "sequenceTab",
 ]);
 const DASH_STYLES = new Set(["", "solid", "dash", "dashDot", "dot"]);
+const LINE_CAPS = new Set(["butt", "round", "square"]);
 const IMAGE_FITS = new Set(["contain", "cover", "fill", "none"]);
 const ARROWS = new Set([null, "none", "triangle", "arrow", "stealth", "diamond", "oval"]);
 const ALIGNMENTS = new Set(["left", "center", "right", "justify"]);
@@ -44,8 +54,8 @@ const COMMON_NODE_KEYS = new Set([
 ]);
 const NODE_KEYS = {
   group: new Set(["children", "style", "text", "textLayout"]),
-  shape: new Set(["preset", "style", "text", "textLayout"]),
-  text: new Set(["text", "textLayout"]),
+  shape: new Set(["preset", "style", "text", "textLayout", "rotation"]),
+  text: new Set(["text", "textLayout", "rotation"]),
   image: new Set(["src", "alt", "fit", "opacity"]),
   connector: new Set(["points", "style", "arrowStart", "arrowEnd", "label"]),
   fallback: new Set(["reason"]),
@@ -63,11 +73,22 @@ function roundedMetric(value) {
   return Math.round(Math.max(0, Number(value) || 0) * METRIC_PRECISION) / METRIC_PRECISION;
 }
 
+function roundedCoordinate(value) {
+  return Math.round((Number(value) || 0) * METRIC_PRECISION) / METRIC_PRECISION;
+}
+
 function roundedExtent(value) {
   const number = Number(value);
   return Number.isFinite(number) && number >= 0 ? roundedMetric(number) : value;
 }
 
+export function normalizeRotationAngle(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  let units = Math.round((((value % 360) + 360) % 360) * DRAWINGML_ANGLE_UNITS_PER_DEGREE);
+  if (units >= DRAWINGML_HALF_TURN) units -= DRAWINGML_FULL_TURN;
+  return units === 0 ? 0 : units / DRAWINGML_ANGLE_UNITS_PER_DEGREE;
+}
+
 function finiteNumber(value, path) {
   if (typeof value !== "number" || !Number.isFinite(value)) {
     fail(`${path} must be a finite number`);
@@ -108,6 +129,14 @@ function exactKeys(value, allowed, path) {
   }
 }
 
+function rejectInheritedKeys(value, allowed, path) {
+  for (const key of allowed) {
+    if (!Object.hasOwn(value, key) && key in value) {
+      fail(`${path}.${key} must be an own property`);
+    }
+  }
+}
+
 function requiredObject(value, path) {
   if (!isPlainObject(value)) fail(`${path} must be an object`);
   return value;
@@ -178,8 +207,8 @@ function normalizeBounds(value, offsetX, offsetY) {
     return null;
   }
   return {
-    x: roundedMetric(offsetX + x),
-    y: roundedMetric(offsetY + y),
+    x: roundedCoordinate(offsetX + x),
+    y: roundedCoordinate(offsetY + y),
     width: roundedMetric(width),
     height: roundedMetric(height),
   };
@@ -191,8 +220,8 @@ function normalizePoint(value, offsetX, offsetY) {
   const y = Number(value.y);
   if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
   return {
-    x: roundedMetric(offsetX + x),
-    y: roundedMetric(offsetY + y),
+    x: roundedCoordinate(offsetX + x),
+    y: roundedCoordinate(offsetY + y),
   };
 }
 
@@ -202,8 +231,8 @@ function boundsFromPoints(points) {
   const left = Math.min(...xs);
   const top = Math.min(...ys);
   return {
-    x: roundedMetric(left),
-    y: roundedMetric(top),
+    x: roundedCoordinate(left),
+    y: roundedCoordinate(top),
     width: roundedMetric(Math.max(...xs) - left),
     height: roundedMetric(Math.max(...ys) - top),
   };
@@ -272,18 +301,34 @@ function validateCapability(value, path) {
 function validateStyle(value, path) {
   if (value === undefined) return;
   requiredObject(value, path);
-  exactKeys(value, new Set(["fill", "stroke", "strokeWidth", "dash", "opacity", "cornerRadius"]), path);
+  const keys = new Set([
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "dash",
+    "lineCap",
+    "opacity",
+    "fillOpacity",
+    "strokeOpacity",
+    "cornerRadius",
+  ]);
+  exactKeys(value, keys, path);
+  rejectInheritedKeys(value, keys, path);
   if (value.fill !== undefined) validateColor(value.fill, `${path}.fill`);
   if (value.stroke !== undefined) validateColor(value.stroke, `${path}.stroke`);
   if (value.strokeWidth !== undefined) nonNegativeNumber(value.strokeWidth, `${path}.strokeWidth`);
   if (value.cornerRadius !== undefined) nonNegativeNumber(value.cornerRadius, `${path}.cornerRadius`);
-  if (value.opacity !== undefined) {
-    const opacity = finiteNumber(value.opacity, `${path}.opacity`);
-    if (opacity < 0 || opacity > 1) fail(`${path}.opacity must be between 0 and 1`);
+  for (const key of ["opacity", "fillOpacity", "strokeOpacity"]) {
+    if (value[key] === undefined) continue;
+    const opacity = finiteNumber(value[key], `${path}.${key}`);
+    if (opacity < 0 || opacity > 1) fail(`${path}.${key} must be between 0 and 1`);
   }
   if (value.dash !== undefined && !DASH_STYLES.has(value.dash)) {
     fail(`${path}.dash must be "", "solid", "dash", "dashDot", or "dot"`);
   }
+  if (value.lineCap !== undefined && !LINE_CAPS.has(value.lineCap)) {
+    fail(`${path}.lineCap must be "butt", "round", or "square"`);
+  }
 }
 
 function validateText(value, path) {
@@ -386,6 +431,16 @@ function validateNode(node, path, state, depth) {
   validateCapability(node.capability, `${path}.capability`);
   validateAccessibility(node.accessibility, `${path}.accessibility`);
   validateMeta(node.meta, `${path}.meta`);
+  if (node.kind === "shape" || node.kind === "text") {
+    rejectInheritedKeys(node, new Set(["rotation"]), path);
+    if (node.rotation !== undefined) {
+      const rotation = finiteNumber(node.rotation, `${path}.rotation`);
+      const normalized = normalizeRotationAngle(rotation);
+      if (normalized !== rotation || Object.is(rotation, -0)) {
+        fail(`${path}.rotation must be normalized to [-180, 180) degrees`);
+      }
+    }
+  }
   if (node.kind === "group") {
     if (!Array.isArray(node.children)) fail(`${path}.children must be an array`);
     validateStyle(node.style, `${path}.style`);
@@ -453,7 +508,9 @@ function normalizeStyle(value) {
   return Object.fromEntries(
     Object.entries(value).map(([key, entry]) => {
       if (key === "strokeWidth" || key === "cornerRadius") return [key, roundedMetric(entry)];
-      if (key === "opacity") return [key, clampOpacity(entry)];
+      if (key === "opacity" || key === "fillOpacity" || key === "strokeOpacity") {
+        return [key, clampOpacity(entry)];
+      }
       return [key, entry];
     }),
   );
@@ -538,6 +595,7 @@ function normalizeKnownNode(node, path, bounds, offsetX, offsetY, diagnostics, d
     };
   }
   if (node.kind === "shape") {
+    const rotation = node.rotation === undefined ? 0 : normalizeRotationAngle(node.rotation);
     if (!SHAPE_PRESETS.has(node.preset)) {
       const reason = `unsupported shape preset: ${String(node.preset)}`;
       unsupported(path, "fallback", reason, diagnostics);
@@ -546,16 +604,19 @@ function normalizeKnownNode(node, path, bounds, offsetX, offsetY, diagnostics, d
     return {
       ...base,
       preset: node.preset,
+      ...(rotation ? { rotation } : {}),
       ...(node.style !== undefined ? { style: normalizeStyle(node.style) } : {}),
       ...(node.text !== undefined ? { text: normalizeText(node.text) } : {}),
       ...(node.textLayout !== undefined ? { textLayout: normalizeTextLayout(node.textLayout) } : {}),
     };
   }
   if (node.kind === "text") {
+    const rotation = node.rotation === undefined ? 0 : normalizeRotationAngle(node.rotation);
     return {
       ...base,
       text: normalizeText(node.text),
       ...(node.textLayout !== undefined ? { textLayout: normalizeTextLayout(node.textLayout) } : {}),
+      ...(rotation ? { rotation } : {}),
     };
   }
   if (node.kind === "image") {
@@ -645,6 +706,15 @@ function normalizeNode(node, path, offsetX, offsetY, depth, output, diagnostics)
     output.push(normalized);
     return;
   }
+  if (["text", "shape"].includes(node.kind) && "rotation" in node &&
+      (!Object.hasOwn(node, "rotation") || normalizeRotationAngle(node.rotation) === null)) {
+    const reason = `${node.kind} rotation is not a finite number`;
+    unsupported(path, "fallback", reason, diagnostics);
+    const normalized = fallbackNode(node, path, reason, bounds);
+    normalized.__sortZ = Number.isFinite(Number(node.z)) ? Number(node.z) : output.length;
+    output.push(normalized);
+    return;
+  }
   const normalized = normalizeKnownNode(node, path, bounds, offsetX, offsetY, diagnostics, depth);
   normalized.__sortZ = Number.isFinite(Number(node.z)) ? Number(node.z) : output.length;
   output.push(normalized);

package/shared/renderer/scene-pptx.mjs

@@ -61,7 +61,15 @@ function copyTextLayout(target, textLayout = {}, keys) {
 
 function styleFields(style = {}) {
   const mapped = {};
-  copyDefined(mapped, style, ["fill", "stroke", "opacity", "cornerRadius"]);
+  copyDefined(mapped, style, [
+    "fill",
+    "stroke",
+    "lineCap",
+    "opacity",
+    "fillOpacity",
+    "strokeOpacity",
+    "cornerRadius",
+  ]);
   if (style.strokeWidth !== undefined && style.strokeWidth > 0) {
     mapped.strokeWidth = style.strokeWidth;
   } else if (style.strokeWidth === 0) {
@@ -153,12 +161,141 @@ function shapeElement(node, index, options, shape) {
     shape,
     ...geometryFields(node),
     ...styleFields(node.style),
+    ...(node.rotation !== undefined ? { rotation: node.rotation } : {}),
   };
   if (node.text !== undefined) element.text = cloneText(node.text);
   copyTextLayout(element, node.textLayout, ["verticalAlignment", "textWrap", "textInsets"]);
   return element;
 }
 
+function sameValue(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function sameMetric(left, right) {
+  return Math.abs(left - right) <= 0.1;
+}
+
+function samePoints(actual, expected) {
+  return Array.isArray(actual) &&
+    actual.length === expected.length &&
+    actual.every((point, index) =>
+      sameMetric(point.x, expected[index].x) &&
+      sameMetric(point.y, expected[index].y));
+}
+
+function stadiumMapping(scene, group, index, options) {
+  if (
+    group.kind !== "group" ||
+    group.meta?.mermaid?.shape !== "stadium" ||
+    typeof group.sourcePath !== "string"
+  ) {
+    return null;
+  }
+  const prefix = `${group.sourcePath}.`;
+  const descendants = scene.nodes.filter((node) =>
+    node.sourcePath?.startsWith(prefix));
+  const part = (partIndex) => descendants.find((node) =>
+    node.sourcePath === `${group.sourcePath}.parts[${partIndex}]`);
+  const left = part(0);
+  const right = part(1);
+  const center = part(2);
+  const top = part(3);
+  const bottom = part(4);
+  const label = descendants.find((node) =>
+    node.sourcePath === `${group.sourcePath}.label`);
+  if (
+    !left ||
+    !right ||
+    !center ||
+    !top ||
+    !bottom ||
+    descendants.length !== (label ? 6 : 5)
+  ) {
+    return null;
+  }
+  const unsupported = [group, ...descendants].find((node) =>
+    node.kind === "fallback" ||
+    node.capability?.pptx === "fallback");
+  if (unsupported) {
+    return {
+      prefix,
+      fallback: fallbackFor(
+        group,
+        index,
+        options,
+        fallbackReason(unsupported, "stadium-rendered-as-artwork"),
+      ),
+    };
+  }
+  if (
+    left.kind !== "shape" ||
+    left.preset !== "ellipse" ||
+    right.kind !== "shape" ||
+    right.preset !== "ellipse" ||
+    center.kind !== "shape" ||
+    center.preset !== "rect" ||
+    top.kind !== "connector" ||
+    bottom.kind !== "connector" ||
+    (label && (label.kind !== "text" || label.rotation !== undefined))
+  ) {
+    return null;
+  }
+  const { x, y, width, height } = group.bounds;
+  const radius = height / 2;
+  const expectedCenterStyle = { ...left.style, stroke: null, strokeWidth: 0 };
+  const expectedOutlineStyle = { ...left.style, fill: null };
+  const expectedGeometry = (
+    sameMetric(left.bounds.x, x) &&
+    sameMetric(left.bounds.y, y) &&
+    sameMetric(left.bounds.width, height) &&
+    sameMetric(left.bounds.height, height) &&
+    sameMetric(right.bounds.x, x + width - height) &&
+    sameMetric(right.bounds.y, y) &&
+    sameMetric(right.bounds.width, height) &&
+    sameMetric(right.bounds.height, height) &&
+    sameMetric(center.bounds.x, x + radius) &&
+    sameMetric(center.bounds.y, y) &&
+    sameMetric(center.bounds.width, width - height) &&
+    sameMetric(center.bounds.height, height) &&
+    samePoints(top.points, [
+      { x: x + radius, y },
+      { x: x + width - radius, y },
+    ]) &&
+    samePoints(bottom.points, [
+      { x: x + radius, y: y + height },
+      { x: x + width - radius, y: y + height },
+    ])
+  );
+  if (
+    !expectedGeometry ||
+    !sameValue(left.style, right.style) ||
+    !sameValue(center.style, expectedCenterStyle) ||
+    !sameValue(top.style, expectedOutlineStyle) ||
+    !sameValue(bottom.style, expectedOutlineStyle) ||
+    top.arrowStart !== "none" ||
+    top.arrowEnd !== "none" ||
+    bottom.arrowStart !== "none" ||
+    bottom.arrowEnd !== "none"
+  ) {
+    return null;
+  }
+  return {
+    prefix,
+    element: shapeElement({
+      ...group,
+      kind: "shape",
+      style: left.style,
+      ...(label
+        ? {
+            text: label.text,
+            textLayout: label.textLayout,
+          }
+        : {}),
+    }, index, options, "stadium"),
+  };
+}
+
 function groupElement(node, index, options) {
   if (!hasVisibleStyle(node.style) && node.text === undefined) return null;
   return shapeElement(node, index, options, options.groupPreset);
@@ -173,6 +310,10 @@ function textElement(node, index, options) {
     paragraphs: text.paragraphs,
   };
   copyDefined(element, node.textLayout || {}, ["textInsets", "textWrap"]);
+  if (node.rotation !== undefined) {
+    element.rotation = node.rotation;
+    copyDefined(element, node.textLayout || {}, ["verticalAlignment"]);
+  }
   return element;
 }
 
@@ -249,7 +390,19 @@ export function sceneToPptxElements(scene, options = {}) {
   const normalizedOptions = normalizeOptions(scene, options);
   const elements = [];
   const fallbacks = [];
+  const collapsedPrefixes = [];
   scene.nodes.forEach((node, index) => {
+    if (collapsedPrefixes.some((prefix) =>
+      node.sourcePath?.startsWith(prefix))) {
+      return;
+    }
+    const stadium = stadiumMapping(scene, node, index, normalizedOptions);
+    if (stadium) {
+      if (stadium.fallback) fallbacks.push(stadium.fallback);
+      else elements.push(stadium.element);
+      collapsedPrefixes.push(stadium.prefix);
+      return;
+    }
     const mapped = mappedNode(node, index, normalizedOptions);
     if (!mapped) return;
     if (mapped.reason !== undefined && !["shape", "text", "image", "connector"].includes(mapped.type)) {