@lotics/xlsx 0.1.0

package/src/canvas_shape.ts

@@ -0,0 +1,242 @@
+// =============================================================================
+// Canvas Shape Renderer
+// =============================================================================
+//
+// Draws parsed drawing objects on the canvas:
+// - Shapes (preset geometries from ooxml_shape.ts)
+// - Text boxes (rect with text content)
+// - Connectors (lines with optional arrowheads)
+// - Form controls (checkbox, dropdown, button as simple shapes)
+// =============================================================================
+
+import type { ParsedDrawing, DrawingAnchor } from "./ooxml_chart_types";
+import type { LayoutEngine } from "./canvas_layout";
+import { getShapePath } from "./ooxml_shape";
+import { emuToPixels } from "./canvas_images";
+
+// =============================================================================
+// Main entry
+// =============================================================================
+
+export function drawDrawing(
+  ctx: CanvasRenderingContext2D,
+  drawing: ParsedDrawing,
+  layout: LayoutEngine,
+  scrollX: number,
+  scrollY: number,
+): void {
+  const { x, y, w, h } = anchorToPixels(drawing.anchor, layout, scrollX, scrollY);
+  if (w <= 0 || h <= 0) return;
+
+  switch (drawing.type) {
+    case "shape":
+      drawShape(ctx, drawing, x, y, w, h);
+      break;
+    case "textbox":
+      drawTextBox(ctx, drawing, x, y, w, h);
+      break;
+    case "connector":
+      drawConnector(ctx, drawing, x, y, w, h);
+      break;
+    case "group":
+      // Group children would be drawn recursively, but we handle them flat
+      drawShape(ctx, drawing, x, y, w, h);
+      break;
+    default:
+      drawUnknown(ctx, drawing, x, y, w, h);
+  }
+}
+
+// =============================================================================
+// Shape rendering
+// =============================================================================
+
+function drawShape(
+  ctx: CanvasRenderingContext2D,
+  drawing: ParsedDrawing,
+  x: number, y: number, w: number, h: number,
+): void {
+  const geometry = drawing.geometry ?? "rect";
+  const shapePath = getShapePath(geometry);
+
+  ctx.save();
+
+  // Fill
+  if (drawing.fillColor) {
+    ctx.fillStyle = drawing.fillColor;
+    ctx.beginPath();
+    shapePath.draw(ctx, x, y, w, h);
+    ctx.fill();
+  }
+
+  // Outline
+  ctx.strokeStyle = drawing.outlineColor ?? "#000000";
+  ctx.lineWidth = drawing.outlineWidth ?? 1;
+  ctx.beginPath();
+  shapePath.draw(ctx, x, y, w, h);
+  ctx.stroke();
+
+  // Text label (if shape has text)
+  if (drawing.text) {
+    drawCenteredText(ctx, drawing.text, x, y, w, h);
+  }
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Text box rendering
+// =============================================================================
+
+function drawTextBox(
+  ctx: CanvasRenderingContext2D,
+  drawing: ParsedDrawing,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.save();
+
+  // Background (optional)
+  if (drawing.fillColor) {
+    ctx.fillStyle = drawing.fillColor;
+    ctx.fillRect(x, y, w, h);
+  }
+
+  // Border (optional)
+  if (drawing.outlineColor) {
+    ctx.strokeStyle = drawing.outlineColor;
+    ctx.lineWidth = drawing.outlineWidth ?? 1;
+    ctx.strokeRect(x, y, w, h);
+  }
+
+  // Text content
+  if (drawing.text) {
+    drawWrappedText(ctx, drawing.text, x + 4, y + 4, w - 8, h - 8);
+  }
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Connector rendering
+// =============================================================================
+
+function drawConnector(
+  ctx: CanvasRenderingContext2D,
+  drawing: ParsedDrawing,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.save();
+  ctx.strokeStyle = drawing.outlineColor ?? "#000000";
+  ctx.lineWidth = drawing.outlineWidth ?? 1;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x + w, y + h);
+  ctx.stroke();
+
+  // Arrow head at end
+  const angle = Math.atan2(h, w);
+  const headLen = 8;
+  ctx.beginPath();
+  ctx.moveTo(x + w, y + h);
+  ctx.lineTo(
+    x + w - headLen * Math.cos(angle - Math.PI / 6),
+    y + h - headLen * Math.sin(angle - Math.PI / 6),
+  );
+  ctx.moveTo(x + w, y + h);
+  ctx.lineTo(
+    x + w - headLen * Math.cos(angle + Math.PI / 6),
+    y + h - headLen * Math.sin(angle + Math.PI / 6),
+  );
+  ctx.stroke();
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Unknown type (fallback)
+// =============================================================================
+
+function drawUnknown(
+  ctx: CanvasRenderingContext2D,
+  drawing: ParsedDrawing,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.save();
+  ctx.fillStyle = "#F9FAFB";
+  ctx.strokeStyle = "#D1D5DB";
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 2]);
+  ctx.fillRect(x, y, w, h);
+  ctx.strokeRect(x, y, w, h);
+  ctx.setLineDash([]);
+
+  ctx.fillStyle = "#9CA3AF";
+  ctx.font = "11px -apple-system, sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(`[${drawing.type}]`, x + w / 2, y + h / 2);
+  ctx.restore();
+}
+
+// =============================================================================
+// Text helpers
+// =============================================================================
+
+function drawCenteredText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.fillStyle = "#1F2937";
+  ctx.font = "12px -apple-system, BlinkMacSystemFont, sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, x + w / 2, y + h / 2, w - 8);
+}
+
+function drawWrappedText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.fillStyle = "#1F2937";
+  ctx.font = "12px -apple-system, BlinkMacSystemFont, sans-serif";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "top";
+
+  const lineHeight = 16;
+  const words = text.split(/\s+/);
+  let line = "";
+  let cy = y;
+
+  for (const word of words) {
+    const testLine = line ? `${line} ${word}` : word;
+    if (ctx.measureText(testLine).width > w && line) {
+      ctx.fillText(line, x, cy, w);
+      line = word;
+      cy += lineHeight;
+      if (cy + lineHeight > y + h) return;
+    } else {
+      line = testLine;
+    }
+  }
+  if (line) ctx.fillText(line, x, cy, w);
+}
+
+// =============================================================================
+// Anchor conversion
+// =============================================================================
+
+function anchorToPixels(
+  anchor: DrawingAnchor,
+  layout: LayoutEngine,
+  scrollX: number,
+  scrollY: number,
+): { x: number; y: number; w: number; h: number } {
+  const x1 = (layout.colX[anchor.from.col] ?? 0) + emuToPixels(anchor.from.colOffset ?? 0) - scrollX;
+  const y1 = (layout.rowY[anchor.from.row] ?? 0) + emuToPixels(anchor.from.rowOffset ?? 0) - scrollY;
+  const x2 = (layout.colX[anchor.to.col] ?? 0) + emuToPixels(anchor.to.colOffset ?? 0) - scrollX;
+  const y2 = (layout.rowY[anchor.to.row] ?? 0) + emuToPixels(anchor.to.rowOffset ?? 0) - scrollY;
+
+  return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
+}

package/src/canvas_sparkline.ts

@@ -0,0 +1,163 @@
+// =============================================================================
+// Canvas Sparkline Renderer
+// =============================================================================
+//
+// Draws mini charts within a single cell.
+// Three types: line, column, winLoss (stacked).
+// =============================================================================
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface SparklineRenderInput {
+  /** Sparkline type. */
+  type: "line" | "column" | "stacked";
+  /** Data values for this sparkline. */
+  values: number[];
+  /** Series color. */
+  color: string;
+  /** Cell position/size. */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+// =============================================================================
+// Main entry
+// =============================================================================
+
+export function drawSparkline(
+  ctx: CanvasRenderingContext2D,
+  input: SparklineRenderInput,
+): void {
+  const { type, values, color, x, y, w, h } = input;
+  if (values.length === 0) return;
+
+  const padding = 2;
+  const pX = x + padding;
+  const pY = y + padding;
+  const pW = w - padding * 2;
+  const pH = h - padding * 2;
+
+  if (pW <= 0 || pH <= 0) return;
+
+  switch (type) {
+    case "line":
+      drawLineSparkline(ctx, values, color, pX, pY, pW, pH);
+      break;
+    case "column":
+      drawColumnSparkline(ctx, values, color, pX, pY, pW, pH);
+      break;
+    case "stacked":
+      drawWinLossSparkline(ctx, values, color, pX, pY, pW, pH);
+      break;
+  }
+}
+
+// =============================================================================
+// Line sparkline
+// =============================================================================
+
+function drawLineSparkline(
+  ctx: CanvasRenderingContext2D,
+  values: number[],
+  color: string,
+  x: number, y: number, w: number, h: number,
+): void {
+  const min = arrayMin(values);
+  const max = arrayMax(values);
+  const range = max - min || 1;
+
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+
+  for (let i = 0; i < values.length; i++) {
+    const px = x + (i / Math.max(values.length - 1, 1)) * w;
+    const py = y + h - ((values[i] - min) / range) * h;
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  }
+  ctx.stroke();
+}
+
+// =============================================================================
+// Column sparkline
+// =============================================================================
+
+function drawColumnSparkline(
+  ctx: CanvasRenderingContext2D,
+  values: number[],
+  color: string,
+  x: number, y: number, w: number, h: number,
+): void {
+  const min = arrayMin([...values, 0]);
+  const max = arrayMax([...values, 0]);
+  const range = max - min || 1;
+  const zeroY = y + h - ((0 - min) / range) * h;
+
+  const barW = Math.max(1, (w / values.length) * 0.8);
+  const gap = (w / values.length) * 0.2;
+
+  for (let i = 0; i < values.length; i++) {
+    const val = values[i];
+    const barX = x + i * (barW + gap);
+    const barH = Math.abs((val / range) * h);
+
+    ctx.fillStyle = val >= 0 ? color : "#E11D48";
+    if (val >= 0) {
+      ctx.fillRect(barX, zeroY - barH, barW, barH);
+    } else {
+      ctx.fillRect(barX, zeroY, barW, barH);
+    }
+  }
+}
+
+// =============================================================================
+// Win/Loss sparkline
+// =============================================================================
+
+function drawWinLossSparkline(
+  ctx: CanvasRenderingContext2D,
+  values: number[],
+  color: string,
+  x: number, y: number, w: number, h: number,
+): void {
+  const barW = Math.max(1, (w / values.length) * 0.8);
+  const gap = (w / values.length) * 0.2;
+  const halfH = h / 2;
+  const barH = halfH - 1;
+
+  for (let i = 0; i < values.length; i++) {
+    const val = values[i];
+    const barX = x + i * (barW + gap);
+
+    if (val > 0) {
+      ctx.fillStyle = color;
+      ctx.fillRect(barX, y + halfH - barH, barW, barH);
+    } else if (val < 0) {
+      ctx.fillStyle = "#E11D48";
+      ctx.fillRect(barX, y + halfH + 1, barW, barH);
+    }
+    // val === 0: no bar
+  }
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function arrayMin(arr: number[]): number {
+  let min = arr[0] ?? 0;
+  for (let i = 1; i < arr.length; i++) if (arr[i] < min) min = arr[i];
+  return min;
+}
+
+function arrayMax(arr: number[]): number {
+  let max = arr[0] ?? 0;
+  for (let i = 1; i < arr.length; i++) if (arr[i] > max) max = arr[i];
+  return max;
+}