@lotics/xlsx 0.1.0

package/src/ooxml_shape.ts

@@ -0,0 +1,355 @@
+// =============================================================================
+// OOXML Shape Parser
+// =============================================================================
+//
+// Parses DrawingML shape geometries for Canvas rendering.
+// Maps Excel preset geometry names to Canvas drawing paths.
+// Supports ~20 common shapes; remaining geometries render as labeled rectangles.
+// Also parses VML drawings (legacy Excel form controls).
+// =============================================================================
+
+import type { ParsedDrawing, DrawingAnchor } from "./ooxml_chart_types";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface ShapePath {
+  /** Canvas path drawing instructions. */
+  draw: (ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number) => void;
+}
+
+// =============================================================================
+// Preset geometry map
+// =============================================================================
+
+const SHAPE_PATHS: Record<string, ShapePath> = {
+  rect: {
+    draw(ctx, x, y, w, h) {
+      ctx.rect(x, y, w, h);
+    },
+  },
+  roundRect: {
+    draw(ctx, x, y, w, h) {
+      const r = Math.min(w, h) * 0.1;
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.arcTo(x + w, y, x + w, y + r, r);
+      ctx.lineTo(x + w, y + h - r);
+      ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+      ctx.lineTo(x + r, y + h);
+      ctx.arcTo(x, y + h, x, y + h - r, r);
+      ctx.lineTo(x, y + r);
+      ctx.arcTo(x, y, x + r, y, r);
+    },
+  },
+  ellipse: {
+    draw(ctx, x, y, w, h) {
+      ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+    },
+  },
+  triangle: {
+    draw(ctx, x, y, w, h) {
+      ctx.moveTo(x + w / 2, y);
+      ctx.lineTo(x + w, y + h);
+      ctx.lineTo(x, y + h);
+      ctx.closePath();
+    },
+  },
+  diamond: {
+    draw(ctx, x, y, w, h) {
+      ctx.moveTo(x + w / 2, y);
+      ctx.lineTo(x + w, y + h / 2);
+      ctx.lineTo(x + w / 2, y + h);
+      ctx.lineTo(x, y + h / 2);
+      ctx.closePath();
+    },
+  },
+  rightArrow: {
+    draw(ctx, x, y, w, h) {
+      const headW = w * 0.4;
+      const bodyH = h * 0.4;
+      const bodyY = y + (h - bodyH) / 2;
+      ctx.moveTo(x, bodyY);
+      ctx.lineTo(x + w - headW, bodyY);
+      ctx.lineTo(x + w - headW, y);
+      ctx.lineTo(x + w, y + h / 2);
+      ctx.lineTo(x + w - headW, y + h);
+      ctx.lineTo(x + w - headW, bodyY + bodyH);
+      ctx.lineTo(x, bodyY + bodyH);
+      ctx.closePath();
+    },
+  },
+  leftArrow: {
+    draw(ctx, x, y, w, h) {
+      const headW = w * 0.4;
+      const bodyH = h * 0.4;
+      const bodyY = y + (h - bodyH) / 2;
+      ctx.moveTo(x + w, bodyY);
+      ctx.lineTo(x + headW, bodyY);
+      ctx.lineTo(x + headW, y);
+      ctx.lineTo(x, y + h / 2);
+      ctx.lineTo(x + headW, y + h);
+      ctx.lineTo(x + headW, bodyY + bodyH);
+      ctx.lineTo(x + w, bodyY + bodyH);
+      ctx.closePath();
+    },
+  },
+  upArrow: {
+    draw(ctx, x, y, w, h) {
+      const headH = h * 0.4;
+      const bodyW = w * 0.4;
+      const bodyX = x + (w - bodyW) / 2;
+      ctx.moveTo(x + w / 2, y);
+      ctx.lineTo(x + w, y + headH);
+      ctx.lineTo(bodyX + bodyW, y + headH);
+      ctx.lineTo(bodyX + bodyW, y + h);
+      ctx.lineTo(bodyX, y + h);
+      ctx.lineTo(bodyX, y + headH);
+      ctx.lineTo(x, y + headH);
+      ctx.closePath();
+    },
+  },
+  downArrow: {
+    draw(ctx, x, y, w, h) {
+      const headH = h * 0.4;
+      const bodyW = w * 0.4;
+      const bodyX = x + (w - bodyW) / 2;
+      ctx.moveTo(bodyX, y);
+      ctx.lineTo(bodyX + bodyW, y);
+      ctx.lineTo(bodyX + bodyW, y + h - headH);
+      ctx.lineTo(x + w, y + h - headH);
+      ctx.lineTo(x + w / 2, y + h);
+      ctx.lineTo(x, y + h - headH);
+      ctx.lineTo(bodyX, y + h - headH);
+      ctx.closePath();
+    },
+  },
+  pentagon: {
+    draw(ctx, x, y, w, h) {
+      const cx = x + w / 2;
+      for (let i = 0; i < 5; i++) {
+        const angle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
+        const px = cx + (w / 2) * Math.cos(angle);
+        const py = y + h / 2 + (h / 2) * Math.sin(angle);
+        if (i === 0) ctx.moveTo(px, py);
+        else ctx.lineTo(px, py);
+      }
+      ctx.closePath();
+    },
+  },
+  hexagon: {
+    draw(ctx, x, y, w, h) {
+      const cx = x + w / 2;
+      for (let i = 0; i < 6; i++) {
+        const angle = (i * 2 * Math.PI) / 6 - Math.PI / 2;
+        const px = cx + (w / 2) * Math.cos(angle);
+        const py = y + h / 2 + (h / 2) * Math.sin(angle);
+        if (i === 0) ctx.moveTo(px, py);
+        else ctx.lineTo(px, py);
+      }
+      ctx.closePath();
+    },
+  },
+  star5: {
+    draw(ctx, x, y, w, h) {
+      drawStar(ctx, x + w / 2, y + h / 2, 5, w / 2, w / 4);
+    },
+  },
+  heart: {
+    draw(ctx, x, y, w, h) {
+      const cx = x + w / 2;
+      ctx.moveTo(cx, y + h);
+      ctx.bezierCurveTo(x - w * 0.1, y + h * 0.5, x, y, cx, y + h * 0.3);
+      ctx.bezierCurveTo(x + w, y, x + w * 1.1, y + h * 0.5, cx, y + h);
+    },
+  },
+  plus: {
+    draw(ctx, x, y, w, h) {
+      const arm = Math.min(w, h) / 3;
+      ctx.moveTo(x + arm, y);
+      ctx.lineTo(x + w - arm, y);
+      ctx.lineTo(x + w - arm, y + arm);
+      ctx.lineTo(x + w, y + arm);
+      ctx.lineTo(x + w, y + h - arm);
+      ctx.lineTo(x + w - arm, y + h - arm);
+      ctx.lineTo(x + w - arm, y + h);
+      ctx.lineTo(x + arm, y + h);
+      ctx.lineTo(x + arm, y + h - arm);
+      ctx.lineTo(x, y + h - arm);
+      ctx.lineTo(x, y + arm);
+      ctx.lineTo(x + arm, y + arm);
+      ctx.closePath();
+    },
+  },
+  flowChartProcess: {
+    draw(ctx, x, y, w, h) {
+      ctx.rect(x, y, w, h);
+    },
+  },
+  flowChartDecision: {
+    draw(ctx, x, y, w, h) {
+      ctx.moveTo(x + w / 2, y);
+      ctx.lineTo(x + w, y + h / 2);
+      ctx.lineTo(x + w / 2, y + h);
+      ctx.lineTo(x, y + h / 2);
+      ctx.closePath();
+    },
+  },
+  flowChartTerminator: {
+    draw(ctx, x, y, w, h) {
+      const r = h / 2;
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.arc(x + w - r, y + r, r, -Math.PI / 2, Math.PI / 2);
+      ctx.lineTo(x + r, y + h);
+      ctx.arc(x + r, y + r, r, Math.PI / 2, -Math.PI / 2);
+    },
+  },
+};
+
+// =============================================================================
+// Public API
+// =============================================================================
+
+/**
+ * Get a shape path for a given preset geometry name.
+ * Returns the rect path as fallback for unknown geometries.
+ */
+export function getShapePath(geometry: string): ShapePath {
+  return SHAPE_PATHS[geometry] ?? SHAPE_PATHS.rect;
+}
+
+/**
+ * List of supported preset geometry names.
+ */
+export const SUPPORTED_GEOMETRIES = Object.keys(SHAPE_PATHS);
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function drawStar(
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  points: number,
+  outerR: number,
+  innerR: number,
+): void {
+  const step = Math.PI / points;
+  ctx.moveTo(cx, cy - outerR);
+  for (let i = 0; i < 2 * points; i++) {
+    const r = i % 2 === 0 ? outerR : innerR;
+    const angle = i * step - Math.PI / 2;
+    ctx.lineTo(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
+  }
+  ctx.closePath();
+}
+
+// =============================================================================
+// VML Drawing Parser (legacy form controls)
+// =============================================================================
+
+/**
+ * ObjectType → drawing geometry and text prefix/suffix mapping.
+ */
+const VML_CONTROL_MAP: Record<string, { geometry: string; type: ParsedDrawing["type"]; prefix?: (checked: boolean) => string; suffix?: string }> = {
+  Button:   { geometry: "rect", type: "shape" },
+  Checkbox: { geometry: "rect", type: "shape", prefix: (checked) => checked ? "\u2611 " : "\u2610 " },
+  Radio:    { geometry: "rect", type: "shape", prefix: (checked) => checked ? "\u25CF " : "\u25CB " },
+  Drop:     { geometry: "rect", type: "shape", suffix: " \u25BC" },
+  List:     { geometry: "rect", type: "shape" },
+  Scroll:   { geometry: "rect", type: "shape" },
+  Spinner:  { geometry: "rect", type: "shape" },
+  GBox:     { geometry: "rect", type: "shape" },
+  Label:    { geometry: "rect", type: "textbox" },
+};
+
+/**
+ * Parse VML drawings (legacy Excel form controls like buttons, checkboxes, etc.).
+ *
+ * VML uses `<v:shape>` elements with `<x:ClientData>` for form control metadata.
+ * The anchor in `<x:Anchor>` has 8 comma-separated values:
+ *   col1, col1Off, row1, row1Off, col2, col2Off, row2, row2Off
+ */
+export function parseVmlDrawing(
+  xml: string,
+  parseXml: (xml: string) => Record<string, unknown>,
+): ParsedDrawing[] {
+  const doc = parseXml(xml);
+  const root = doc["xml"] ?? doc;
+  if (!root || typeof root !== "object") return [];
+
+  const shapes = ensureVmlArray((root as Record<string, unknown>)["v:shape"]);
+  const results: ParsedDrawing[] = [];
+
+  for (const shapeNode of shapes) {
+    if (!shapeNode || typeof shapeNode !== "object") continue;
+    const shape = shapeNode as Record<string, unknown>;
+
+    const clientData = shape["x:ClientData"];
+    if (!clientData || typeof clientData !== "object") continue;
+    const cd = clientData as Record<string, unknown>;
+
+    const objectType = (cd["@_ObjectType"] as string | undefined) ?? "";
+    const controlDef = VML_CONTROL_MAP[objectType];
+    if (!controlDef) continue;
+
+    // Parse anchor: "col1, col1Off, row1, row1Off, col2, col2Off, row2, row2Off"
+    const anchorStr = cd["x:Anchor"];
+    if (typeof anchorStr !== "string") continue;
+    const parts = anchorStr.split(",").map((s) => parseInt(s.trim(), 10));
+    if (parts.length < 8 || parts.some((n) => isNaN(n))) continue;
+
+    const anchor: DrawingAnchor = {
+      from: { col: parts[0], colOffset: parts[1], row: parts[2], rowOffset: parts[3] },
+      to: { col: parts[4], colOffset: parts[5], row: parts[6], rowOffset: parts[7] },
+    };
+
+    // Extract text from <v:textbox><div>text</div>
+    let text = extractVmlText(shape["v:textbox"]);
+
+    // Check state for checkbox/radio
+    const checked = cd["x:Checked"] === "1" || cd["x:Checked"] === 1;
+
+    // Apply prefix/suffix based on control type
+    if (controlDef.prefix) {
+      text = controlDef.prefix(checked) + (text ?? "");
+    }
+    if (controlDef.suffix) {
+      text = (text ?? "") + controlDef.suffix;
+    }
+
+    // GBox uses dashed outline to distinguish from regular shapes
+    const outlineColor = objectType === "GBox" ? "#808080" : undefined;
+
+    results.push({
+      type: controlDef.type,
+      geometry: controlDef.geometry,
+      text: text ?? undefined,
+      outlineColor,
+      anchor,
+    });
+  }
+
+  return results;
+}
+
+/** Extract text content from a VML textbox node. */
+function extractVmlText(textbox: unknown): string | undefined {
+  if (!textbox || typeof textbox !== "object") return undefined;
+  const tb = textbox as Record<string, unknown>;
+  const div = tb["div"] ?? tb["#text"];
+  if (typeof div === "string") return div;
+  if (div && typeof div === "object") {
+    const text = (div as Record<string, unknown>)["#text"];
+    if (typeof text === "string") return text;
+  }
+  return undefined;
+}
+
+function ensureVmlArray(val: unknown): unknown[] {
+  if (val === undefined || val === null) return [];
+  return Array.isArray(val) ? val : [val];
+}