@hirokisakabe/pom 0.1.12 → 0.3.0

package/dist/renderPptx/nodes/chart.js

@@ -0,0 +1,23 @@
+import { pxToIn } from "../units";
+export function renderChartNode(node, ctx) {
+    const chartData = node.data.map((d) => ({
+        name: d.name,
+        labels: d.labels,
+        values: d.values,
+    }));
+    const chartOptions = {
+        x: pxToIn(node.x),
+        y: pxToIn(node.y),
+        w: pxToIn(node.w),
+        h: pxToIn(node.h),
+        showLegend: node.showLegend ?? false,
+        showTitle: node.showTitle ?? false,
+        title: node.title,
+        chartColors: node.chartColors,
+    };
+    // radar専用オプション
+    if (node.chartType === "radar" && node.radarStyle) {
+        chartOptions.radarStyle = node.radarStyle;
+    }
+    ctx.slide.addChart(node.chartType, chartData, chartOptions);
+}

package/dist/renderPptx/nodes/flow.d.ts

@@ -0,0 +1,8 @@
+import type { PositionedNode } from "../../types";
+import type { RenderContext } from "../types";
+type FlowPositionedNode = Extract<PositionedNode, {
+    type: "flow";
+}>;
+export declare function renderFlowNode(node: FlowPositionedNode, ctx: RenderContext): void;
+export {};
+//# sourceMappingURL=flow.d.ts.map

package/dist/renderPptx/nodes/flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/flow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAWpE,wBAAgB,cAAc,CAC5B,IAAI,EAAE,kBAAkB,EACxB,GAAG,EAAE,aAAa,GACjB,IAAI,CA0GN"}

package/dist/renderPptx/nodes/flow.js

@@ -0,0 +1,208 @@
+import { pxToIn, pxToPt } from "../units";
+export function renderFlowNode(node, ctx) {
+    const direction = node.direction ?? "horizontal";
+    const nodeWidth = node.nodeWidth ?? 120;
+    const nodeHeight = node.nodeHeight ?? 60;
+    const nodeGap = node.nodeGap ?? 80;
+    const connectorStyle = node.connectorStyle ?? {};
+    const defaultColor = "1D4ED8";
+    const layouts = new Map();
+    const nodeCount = node.nodes.length;
+    // ノードのレイアウトを計算
+    if (direction === "horizontal") {
+        calculateHorizontalLayout(node, layouts, nodeCount, nodeWidth, nodeHeight, nodeGap);
+    }
+    else {
+        calculateVerticalLayout(node, layouts, nodeCount, nodeWidth, nodeHeight, nodeGap);
+    }
+    // 接続線を描画（ノードより先に描画して背面に配置）
+    for (const conn of node.connections) {
+        const fromLayout = layouts.get(conn.from);
+        const toLayout = layouts.get(conn.to);
+        if (!fromLayout || !toLayout)
+            continue;
+        const lineColor = conn.color ?? connectorStyle.color ?? "333333";
+        const lineWidth = connectorStyle.width ?? 2;
+        const arrowType = connectorStyle.arrowType ?? "triangle";
+        drawConnection(ctx, direction, fromLayout, toLayout, lineColor, lineWidth, arrowType);
+        // ラベルを描画
+        if (conn.label) {
+            const labelX = (fromLayout.x +
+                fromLayout.width / 2 +
+                toLayout.x +
+                toLayout.width / 2) /
+                2;
+            const labelY = (fromLayout.y +
+                fromLayout.height / 2 +
+                toLayout.y +
+                toLayout.height / 2) /
+                2;
+            ctx.slide.addText(conn.label, {
+                x: pxToIn(labelX - 30),
+                y: pxToIn(labelY - 10),
+                w: pxToIn(60),
+                h: pxToIn(20),
+                fontSize: pxToPt(10),
+                fontFace: "Noto Sans JP",
+                color: "64748B",
+                align: "center",
+                valign: "middle",
+            });
+        }
+    }
+    // ノードを描画
+    for (const item of node.nodes) {
+        const layout = layouts.get(item.id);
+        if (!layout)
+            continue;
+        const fillColor = item.color ?? defaultColor;
+        const textColor = item.textColor ?? "FFFFFF";
+        // 図形を描画
+        ctx.slide.addText(item.text, {
+            x: pxToIn(layout.x),
+            y: pxToIn(layout.y),
+            w: pxToIn(layout.width),
+            h: pxToIn(layout.height),
+            shape: item.shape,
+            fill: { color: fillColor },
+            line: { color: "333333", width: pxToPt(1) },
+            fontSize: pxToPt(14),
+            fontFace: "Noto Sans JP",
+            color: textColor,
+            align: "center",
+            valign: "middle",
+        });
+    }
+}
+function calculateHorizontalLayout(node, layouts, nodeCount, nodeWidth, nodeHeight, nodeGap) {
+    const totalWidth = nodeCount * nodeWidth + (nodeCount - 1) * nodeGap;
+    const startX = node.x + (node.w - totalWidth) / 2;
+    const centerY = node.y + node.h / 2;
+    node.nodes.forEach((item, index) => {
+        const w = item.width ?? nodeWidth;
+        const h = item.height ?? nodeHeight;
+        layouts.set(item.id, {
+            id: item.id,
+            x: startX + index * (nodeWidth + nodeGap) + (nodeWidth - w) / 2,
+            y: centerY - h / 2,
+            width: w,
+            height: h,
+            item,
+        });
+    });
+}
+function calculateVerticalLayout(node, layouts, nodeCount, nodeWidth, nodeHeight, nodeGap) {
+    const totalHeight = nodeCount * nodeHeight + (nodeCount - 1) * nodeGap;
+    const startY = node.y + (node.h - totalHeight) / 2;
+    const centerX = node.x + node.w / 2;
+    node.nodes.forEach((item, index) => {
+        const w = item.width ?? nodeWidth;
+        const h = item.height ?? nodeHeight;
+        layouts.set(item.id, {
+            id: item.id,
+            x: centerX - w / 2,
+            y: startY + index * (nodeHeight + nodeGap) + (nodeHeight - h) / 2,
+            width: w,
+            height: h,
+            item,
+        });
+    });
+}
+function drawConnection(ctx, direction, fromLayout, toLayout, lineColor, lineWidth, arrowType) {
+    let startX, startY, endX, endY;
+    if (direction === "horizontal") {
+        // 水平: 右端から左端へ
+        startX = fromLayout.x + fromLayout.width;
+        startY = fromLayout.y + fromLayout.height / 2;
+        endX = toLayout.x;
+        endY = toLayout.y + toLayout.height / 2;
+    }
+    else {
+        // 垂直: 下端から上端へ
+        startX = fromLayout.x + fromLayout.width / 2;
+        startY = fromLayout.y + fromLayout.height;
+        endX = toLayout.x + toLayout.width / 2;
+        endY = toLayout.y;
+    }
+    // 直線接続（シンプルなケース）
+    const isHorizontalLine = Math.abs(startY - endY) < 1;
+    const isVerticalLine = Math.abs(startX - endX) < 1;
+    if (isHorizontalLine || isVerticalLine) {
+        // 直線で描画
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(Math.min(startX, endX)),
+            y: pxToIn(Math.min(startY, endY)),
+            w: pxToIn(Math.abs(endX - startX)),
+            h: pxToIn(Math.abs(endY - startY)),
+            line: {
+                color: lineColor,
+                width: pxToPt(lineWidth),
+                endArrowType: arrowType,
+            },
+        });
+    }
+    else {
+        // L字型接続
+        drawLShapedConnection(ctx, direction, startX, startY, endX, endY, lineColor, lineWidth, arrowType);
+    }
+}
+function drawLShapedConnection(ctx, direction, startX, startY, endX, endY, lineColor, lineWidth, arrowType) {
+    const midX = (startX + endX) / 2;
+    const midY = (startY + endY) / 2;
+    if (direction === "horizontal") {
+        // 水平→垂直→水平
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(startX),
+            y: pxToIn(startY),
+            w: pxToIn(midX - startX),
+            h: 0,
+            line: { color: lineColor, width: pxToPt(lineWidth) },
+        });
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(midX),
+            y: pxToIn(Math.min(startY, endY)),
+            w: 0,
+            h: pxToIn(Math.abs(endY - startY)),
+            line: { color: lineColor, width: pxToPt(lineWidth) },
+        });
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(midX),
+            y: pxToIn(endY),
+            w: pxToIn(endX - midX),
+            h: 0,
+            line: {
+                color: lineColor,
+                width: pxToPt(lineWidth),
+                endArrowType: arrowType,
+            },
+        });
+    }
+    else {
+        // 垂直→水平→垂直
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(startX),
+            y: pxToIn(startY),
+            w: 0,
+            h: pxToIn(midY - startY),
+            line: { color: lineColor, width: pxToPt(lineWidth) },
+        });
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(Math.min(startX, endX)),
+            y: pxToIn(midY),
+            w: pxToIn(Math.abs(endX - startX)),
+            h: 0,
+            line: { color: lineColor, width: pxToPt(lineWidth) },
+        });
+        ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+            x: pxToIn(endX),
+            y: pxToIn(midY),
+            w: 0,
+            h: pxToIn(endY - midY),
+            line: {
+                color: lineColor,
+                width: pxToPt(lineWidth),
+                endArrowType: arrowType,
+            },
+        });
+    }
+}

package/dist/renderPptx/nodes/image.d.ts

@@ -0,0 +1,8 @@
+import type { PositionedNode } from "../../types";
+import type { RenderContext } from "../types";
+type ImagePositionedNode = Extract<PositionedNode, {
+    type: "image";
+}>;
+export declare function renderImageNode(node: ImagePositionedNode, ctx: RenderContext): void;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/dist/renderPptx/nodes/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,mBAAmB,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEtE,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,GAAG,EAAE,aAAa,GACjB,IAAI,CAeN"}

package/dist/renderPptx/nodes/image.js

@@ -0,0 +1,17 @@
+import { pxToIn } from "../units";
+export function renderImageNode(node, ctx) {
+    const imageOptions = {
+        x: pxToIn(node.x),
+        y: pxToIn(node.y),
+        w: pxToIn(node.w),
+        h: pxToIn(node.h),
+    };
+    if (node.imageData) {
+        // Base64 データがある場合は data プロパティを使用（リモート画像）
+        ctx.slide.addImage({ ...imageOptions, data: node.imageData });
+    }
+    else {
+        // ローカルパスの場合は path プロパティを使用
+        ctx.slide.addImage({ ...imageOptions, path: node.src });
+    }
+}

package/dist/renderPptx/nodes/index.d.ts

@@ -0,0 +1,11 @@
+export { renderTextNode } from "./text";
+export { renderImageNode } from "./image";
+export { renderTableNode } from "./table";
+export { renderShapeNode } from "./shape";
+export { renderChartNode } from "./chart";
+export { renderTimelineNode } from "./timeline";
+export { renderMatrixNode } from "./matrix";
+export { renderTreeNode } from "./tree";
+export { renderFlowNode } from "./flow";
+export { renderProcessArrowNode } from "./processArrow";
+//# sourceMappingURL=index.d.ts.map

package/dist/renderPptx/nodes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/renderPptx/nodes/index.js

@@ -0,0 +1,10 @@
+export { renderTextNode } from "./text";
+export { renderImageNode } from "./image";
+export { renderTableNode } from "./table";
+export { renderShapeNode } from "./shape";
+export { renderChartNode } from "./chart";
+export { renderTimelineNode } from "./timeline";
+export { renderMatrixNode } from "./matrix";
+export { renderTreeNode } from "./tree";
+export { renderFlowNode } from "./flow";
+export { renderProcessArrowNode } from "./processArrow";

package/dist/renderPptx/nodes/matrix.d.ts

@@ -0,0 +1,8 @@
+import type { PositionedNode } from "../../types";
+import type { RenderContext } from "../types";
+type MatrixPositionedNode = Extract<PositionedNode, {
+    type: "matrix";
+}>;
+export declare function renderMatrixNode(node: MatrixPositionedNode, ctx: RenderContext): void;
+export {};
+//# sourceMappingURL=matrix.d.ts.map

package/dist/renderPptx/nodes/matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/matrix.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,oBAAoB,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC,CAAC;AAExE,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,oBAAoB,EAC1B,GAAG,EAAE,aAAa,GACjB,IAAI,CAkHN"}

package/dist/renderPptx/nodes/matrix.js

@@ -0,0 +1,150 @@
+import { pxToIn, pxToPt } from "../units";
+export function renderMatrixNode(node, ctx) {
+    const items = node.items;
+    const axes = node.axes;
+    const quadrants = node.quadrants;
+    const defaultItemColor = "1D4ED8"; // blue
+    const itemSize = 24; // px
+    const lineWidth = 2; // px
+    const axisColor = "E2E8F0";
+    // マトリクスの描画領域（パディングを考慮）
+    const padding = 60; // 軸ラベル用の余白
+    const areaX = node.x + padding;
+    const areaY = node.y + padding;
+    const areaW = node.w - padding * 2;
+    const areaH = node.h - padding * 2;
+    // 中心座標
+    const centerX = areaX + areaW / 2;
+    const centerY = areaY + areaH / 2;
+    // === 1. 十字線（軸線）を描画 ===
+    // 横線（X軸）
+    ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+        x: pxToIn(areaX),
+        y: pxToIn(centerY),
+        w: pxToIn(areaW),
+        h: 0,
+        line: { color: axisColor, width: pxToPt(lineWidth) },
+    });
+    // 縦線（Y軸）
+    ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+        x: pxToIn(centerX),
+        y: pxToIn(areaY),
+        w: 0,
+        h: pxToIn(areaH),
+        line: { color: axisColor, width: pxToPt(lineWidth) },
+    });
+    // === 2. 軸ラベルを描画 ===
+    // X軸ラベル（下部中央）
+    ctx.slide.addText(axes.x, {
+        x: pxToIn(centerX - 60),
+        y: pxToIn(areaY + areaH + 8),
+        w: pxToIn(120),
+        h: pxToIn(24),
+        fontSize: pxToPt(12),
+        fontFace: "Noto Sans JP",
+        color: "64748B",
+        align: "center",
+        valign: "top",
+    });
+    // Y軸ラベル（左部中央）
+    ctx.slide.addText(axes.y, {
+        x: pxToIn(node.x + 4),
+        y: pxToIn(centerY - 12),
+        w: pxToIn(48),
+        h: pxToIn(24),
+        fontSize: pxToPt(12),
+        fontFace: "Noto Sans JP",
+        color: "64748B",
+        align: "center",
+        valign: "middle",
+    });
+    // === 3. 象限ラベルを描画 ===
+    if (quadrants) {
+        renderQuadrantLabels(ctx, quadrants, areaX, areaY, areaW, areaH, centerX, centerY);
+    }
+    // === 4. アイテムをプロット ===
+    for (const item of items) {
+        // 座標変換: (0,0)=左下, (1,1)=右上
+        // x: 0 -> areaX, 1 -> areaX + areaW
+        // y: 0 -> areaY + areaH, 1 -> areaY (反転)
+        const itemX = areaX + item.x * areaW;
+        const itemY = areaY + (1 - item.y) * areaH; // Y軸反転
+        const itemColor = item.color ?? defaultItemColor;
+        // 円を描画
+        ctx.slide.addShape(ctx.pptx.ShapeType.ellipse, {
+            x: pxToIn(itemX - itemSize / 2),
+            y: pxToIn(itemY - itemSize / 2),
+            w: pxToIn(itemSize),
+            h: pxToIn(itemSize),
+            fill: { color: itemColor },
+            line: { type: "none" },
+        });
+        // ラベルを描画（円の上）
+        ctx.slide.addText(item.label, {
+            x: pxToIn(itemX - 50),
+            y: pxToIn(itemY - itemSize / 2 - 20),
+            w: pxToIn(100),
+            h: pxToIn(18),
+            fontSize: pxToPt(11),
+            fontFace: "Noto Sans JP",
+            color: "1E293B",
+            bold: true,
+            align: "center",
+            valign: "bottom",
+        });
+    }
+}
+function renderQuadrantLabels(ctx, quadrants, areaX, areaY, areaW, areaH, centerX, centerY) {
+    const quadrantFontSize = 11;
+    const quadrantColor = "94A3B8"; // slate-400
+    const quadrantW = areaW / 2 - 20;
+    const quadrantH = 48;
+    // 左上
+    ctx.slide.addText(quadrants.topLeft, {
+        x: pxToIn(areaX + 10),
+        y: pxToIn(areaY + 10),
+        w: pxToIn(quadrantW),
+        h: pxToIn(quadrantH),
+        fontSize: pxToPt(quadrantFontSize),
+        fontFace: "Noto Sans JP",
+        color: quadrantColor,
+        align: "left",
+        valign: "top",
+    });
+    // 右上
+    ctx.slide.addText(quadrants.topRight, {
+        x: pxToIn(centerX + 10),
+        y: pxToIn(areaY + 10),
+        w: pxToIn(quadrantW),
+        h: pxToIn(quadrantH),
+        fontSize: pxToPt(quadrantFontSize),
+        fontFace: "Noto Sans JP",
+        color: quadrantColor,
+        align: "right",
+        valign: "top",
+    });
+    // 左下
+    ctx.slide.addText(quadrants.bottomLeft, {
+        x: pxToIn(areaX + 10),
+        y: pxToIn(centerY + areaH / 2 - quadrantH - 10),
+        w: pxToIn(quadrantW),
+        h: pxToIn(quadrantH),
+        fontSize: pxToPt(quadrantFontSize),
+        fontFace: "Noto Sans JP",
+        color: quadrantColor,
+        align: "left",
+        valign: "bottom",
+    });
+    // 右下
+    ctx.slide.addText(quadrants.bottomRight, {
+        x: pxToIn(centerX + 10),
+        y: pxToIn(centerY + areaH / 2 - quadrantH - 10),
+        w: pxToIn(quadrantW),
+        h: pxToIn(quadrantH),
+        fontSize: pxToPt(quadrantFontSize),
+        fontFace: "Noto Sans JP",
+        color: quadrantColor,
+        align: "right",
+        valign: "bottom",
+    });
+}

package/dist/renderPptx/nodes/processArrow.d.ts

@@ -0,0 +1,8 @@
+import type { PositionedNode } from "../../types";
+import type { RenderContext } from "../types";
+type ProcessArrowPositionedNode = Extract<PositionedNode, {
+    type: "processArrow";
+}>;
+export declare function renderProcessArrowNode(node: ProcessArrowPositionedNode, ctx: RenderContext): void;
+export {};
+//# sourceMappingURL=processArrow.d.ts.map

package/dist/renderPptx/nodes/processArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processArrow.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/processArrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,0BAA0B,GAAG,OAAO,CACvC,cAAc,EACd;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,CACzB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,0BAA0B,EAChC,GAAG,EAAE,aAAa,GACjB,IAAI,CAsCN"}

package/dist/renderPptx/nodes/processArrow.js

@@ -0,0 +1,75 @@
+import { pxToIn, pxToPt } from "../units";
+export function renderProcessArrowNode(node, ctx) {
+    const direction = node.direction ?? "horizontal";
+    const steps = node.steps;
+    const stepCount = steps.length;
+    if (stepCount === 0)
+        return;
+    const defaultColor = "4472C4"; // PowerPoint標準の青
+    const defaultTextColor = "FFFFFF";
+    const itemWidth = node.itemWidth ?? 150;
+    const itemHeight = node.itemHeight ?? 60;
+    const gap = node.gap ?? -15; // 負の値でシェブロンを重ねる
+    if (direction === "horizontal") {
+        renderHorizontalProcessArrow(node, ctx, steps, stepCount, itemWidth, itemHeight, gap, defaultColor, defaultTextColor);
+    }
+    else {
+        renderVerticalProcessArrow(node, ctx, steps, stepCount, itemWidth, itemHeight, gap, defaultColor, defaultTextColor);
+    }
+}
+function renderHorizontalProcessArrow(node, ctx, steps, stepCount, itemWidth, itemHeight, gap, defaultColor, defaultTextColor) {
+    const totalWidth = stepCount * itemWidth + (stepCount - 1) * gap;
+    const startX = node.x + (node.w - totalWidth) / 2;
+    const centerY = node.y + node.h / 2;
+    steps.forEach((step, index) => {
+        const stepX = startX + index * (itemWidth + gap);
+        const stepY = centerY - itemHeight / 2;
+        const fillColor = step.color?.replace("#", "") ?? defaultColor;
+        const textColor = step.textColor?.replace("#", "") ?? defaultTextColor;
+        // 最初のステップは homePlate、以降は chevron
+        const shapeType = index === 0 ? ctx.pptx.ShapeType.homePlate : ctx.pptx.ShapeType.chevron;
+        ctx.slide.addText(step.label, {
+            x: pxToIn(stepX),
+            y: pxToIn(stepY),
+            w: pxToIn(itemWidth),
+            h: pxToIn(itemHeight),
+            shape: shapeType,
+            fill: { color: fillColor },
+            line: { type: "none" },
+            fontSize: pxToPt(node.fontPx ?? 14),
+            fontFace: "Noto Sans JP",
+            color: textColor,
+            bold: node.bold ?? false,
+            align: "center",
+            valign: "middle",
+        });
+    });
+}
+function renderVerticalProcessArrow(node, ctx, steps, stepCount, itemWidth, itemHeight, gap, defaultColor, defaultTextColor) {
+    const totalHeight = stepCount * itemHeight + (stepCount - 1) * gap;
+    const startY = node.y + (node.h - totalHeight) / 2;
+    const centerX = node.x + node.w / 2;
+    steps.forEach((step, index) => {
+        const stepX = centerX - itemWidth / 2;
+        const stepY = startY + index * (itemHeight + gap);
+        const fillColor = step.color?.replace("#", "") ?? defaultColor;
+        const textColor = step.textColor?.replace("#", "") ?? defaultTextColor;
+        // 垂直方向では pentagon を使用（下向き矢印風）
+        const shapeType = index === 0 ? ctx.pptx.ShapeType.rect : ctx.pptx.ShapeType.pentagon;
+        ctx.slide.addText(step.label, {
+            x: pxToIn(stepX),
+            y: pxToIn(stepY),
+            w: pxToIn(itemWidth),
+            h: pxToIn(itemHeight),
+            shape: shapeType,
+            fill: { color: fillColor },
+            line: { type: "none" },
+            fontSize: pxToPt(node.fontPx ?? 14),
+            fontFace: "Noto Sans JP",
+            color: textColor,
+            bold: node.bold ?? false,
+            align: "center",
+            valign: "middle",
+        });
+    });
+}

package/dist/renderPptx/nodes/shape.d.ts

@@ -0,0 +1,8 @@
+import type { PositionedNode } from "../../types";
+import type { RenderContext } from "../types";
+type ShapePositionedNode = Extract<PositionedNode, {
+    type: "shape";
+}>;
+export declare function renderShapeNode(node: ShapePositionedNode, ctx: RenderContext): void;
+export {};
+//# sourceMappingURL=shape.d.ts.map

package/dist/renderPptx/nodes/shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/shape.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,mBAAmB,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEtE,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,GAAG,EAAE,aAAa,GACjB,IAAI,CAgDN"}

package/dist/renderPptx/nodes/shape.js

@@ -0,0 +1,49 @@
+import { pxToIn, pxToPt } from "../units";
+export function renderShapeNode(node, ctx) {
+    const shapeOptions = {
+        x: pxToIn(node.x),
+        y: pxToIn(node.y),
+        w: pxToIn(node.w),
+        h: pxToIn(node.h),
+        fill: node.fill
+            ? {
+                color: node.fill.color,
+                transparency: node.fill.transparency,
+            }
+            : undefined,
+        line: node.line
+            ? {
+                color: node.line.color,
+                width: node.line.width !== undefined ? pxToPt(node.line.width) : undefined,
+                dashType: node.line.dashType,
+            }
+            : undefined,
+        shadow: node.shadow
+            ? {
+                type: node.shadow.type,
+                opacity: node.shadow.opacity,
+                blur: node.shadow.blur,
+                angle: node.shadow.angle,
+                offset: node.shadow.offset,
+                color: node.shadow.color,
+            }
+            : undefined,
+    };
+    if (node.text) {
+        // テキストがある場合：addTextでshapeを指定
+        ctx.slide.addText(node.text, {
+            ...shapeOptions,
+            shape: node.shapeType,
+            fontSize: pxToPt(node.fontPx ?? 24),
+            fontFace: "Noto Sans JP",
+            color: node.color,
+            align: node.alignText ?? "center",
+            valign: "middle",
+            lineSpacingMultiple: 1.3,
+        });
+    }
+    else {
+        // テキストがない場合：addShapeを使用
+        ctx.slide.addShape(node.shapeType, shapeOptions);
+    }
+}

package/dist/renderPptx/nodes/table.d.ts

@@ -0,0 +1,8 @@
+import type { PositionedNode } from "../../types";
+import type { RenderContext } from "../types";
+type TablePositionedNode = Extract<PositionedNode, {
+    type: "table";
+}>;
+export declare function renderTableNode(node: TablePositionedNode, ctx: RenderContext): void;
+export {};
+//# sourceMappingURL=table.d.ts.map

package/dist/renderPptx/nodes/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAI9C,KAAK,mBAAmB,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEtE,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,GAAG,EAAE,aAAa,GACjB,IAAI,CA+BN"}

package/dist/renderPptx/nodes/table.js

@@ -0,0 +1,29 @@
+import { resolveColumnWidths, resolveRowHeights } from "../../table/utils";
+import { pxToIn, pxToPt } from "../units";
+export function renderTableNode(node, ctx) {
+    const tableRows = node.rows.map((row) => row.cells.map((cell) => {
+        const cellOptions = {
+            fontSize: pxToPt(cell.fontPx ?? 18),
+            color: cell.color,
+            bold: cell.bold,
+            align: cell.alignText ?? "left",
+            fill: cell.backgroundColor
+                ? { color: cell.backgroundColor }
+                : undefined,
+        };
+        return {
+            text: cell.text,
+            options: cellOptions,
+        };
+    }));
+    const tableOptions = {
+        x: pxToIn(node.x),
+        y: pxToIn(node.y),
+        w: pxToIn(node.w),
+        h: pxToIn(node.h),
+        colW: resolveColumnWidths(node, node.w).map((width) => pxToIn(width)),
+        rowH: resolveRowHeights(node).map((height) => pxToIn(height)),
+        margin: 0,
+    };
+    ctx.slide.addTable(tableRows, tableOptions);
+}