@hirokisakabe/pom 0.1.12 → 0.3.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/text.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;AAEpE,wBAAgB,cAAc,CAC5B,IAAI,EAAE,kBAAkB,EACxB,GAAG,EAAE,aAAa,GACjB,IAAI,CAGN"}

package/dist/renderPptx/nodes/text.js

@@ -0,0 +1,5 @@
+import { createTextOptions } from "../textOptions";
+export function renderTextNode(node, ctx) {
+    const textOptions = createTextOptions(node);
+    ctx.slide.addText(node.text ?? "", textOptions);
+}

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

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

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

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

package/dist/renderPptx/nodes/timeline.js

@@ -0,0 +1,157 @@
+import { pxToIn, pxToPt } from "../units";
+export function renderTimelineNode(node, ctx) {
+    const direction = node.direction ?? "horizontal";
+    const items = node.items;
+    const itemCount = items.length;
+    if (itemCount === 0)
+        return;
+    const defaultColor = "1D4ED8"; // blue
+    const nodeRadius = 12; // px
+    const lineWidth = 4; // px
+    if (direction === "horizontal") {
+        renderHorizontalTimeline(node, ctx, items, defaultColor, nodeRadius, lineWidth);
+    }
+    else {
+        renderVerticalTimeline(node, ctx, items, defaultColor, nodeRadius, lineWidth);
+    }
+}
+function renderHorizontalTimeline(node, ctx, items, defaultColor, nodeRadius, lineWidth) {
+    const itemCount = items.length;
+    const lineY = node.y + node.h / 2;
+    const startX = node.x + nodeRadius;
+    const endX = node.x + node.w - nodeRadius;
+    const lineLength = endX - startX;
+    // メインの線を描画
+    ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+        x: pxToIn(startX),
+        y: pxToIn(lineY),
+        w: pxToIn(lineLength),
+        h: 0,
+        line: { color: "E2E8F0", width: pxToPt(lineWidth) },
+    });
+    // 各アイテムを描画
+    items.forEach((item, index) => {
+        const progress = itemCount === 1 ? 0.5 : index / (itemCount - 1);
+        const cx = startX + lineLength * progress;
+        const cy = lineY;
+        const color = item.color ?? defaultColor;
+        // ノード（円）を描画
+        ctx.slide.addShape(ctx.pptx.ShapeType.ellipse, {
+            x: pxToIn(cx - nodeRadius),
+            y: pxToIn(cy - nodeRadius),
+            w: pxToIn(nodeRadius * 2),
+            h: pxToIn(nodeRadius * 2),
+            fill: { color },
+            line: { type: "none" },
+        });
+        // 日付を上に表示
+        ctx.slide.addText(item.date, {
+            x: pxToIn(cx - 60),
+            y: pxToIn(cy - nodeRadius - 40),
+            w: pxToIn(120),
+            h: pxToIn(24),
+            fontSize: pxToPt(12),
+            fontFace: "Noto Sans JP",
+            color: "64748B",
+            align: "center",
+            valign: "bottom",
+        });
+        // タイトルを下に表示
+        ctx.slide.addText(item.title, {
+            x: pxToIn(cx - 60),
+            y: pxToIn(cy + nodeRadius + 8),
+            w: pxToIn(120),
+            h: pxToIn(24),
+            fontSize: pxToPt(14),
+            fontFace: "Noto Sans JP",
+            color: "1E293B",
+            bold: true,
+            align: "center",
+            valign: "top",
+        });
+        // 説明を表示
+        if (item.description) {
+            ctx.slide.addText(item.description, {
+                x: pxToIn(cx - 60),
+                y: pxToIn(cy + nodeRadius + 32),
+                w: pxToIn(120),
+                h: pxToIn(32),
+                fontSize: pxToPt(11),
+                fontFace: "Noto Sans JP",
+                color: "64748B",
+                align: "center",
+                valign: "top",
+            });
+        }
+    });
+}
+function renderVerticalTimeline(node, ctx, items, defaultColor, nodeRadius, lineWidth) {
+    const itemCount = items.length;
+    const lineX = node.x + 40;
+    const startY = node.y + nodeRadius;
+    const endY = node.y + node.h - nodeRadius;
+    const lineLength = endY - startY;
+    // メインの線を描画
+    ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+        x: pxToIn(lineX),
+        y: pxToIn(startY),
+        w: 0,
+        h: pxToIn(lineLength),
+        line: { color: "E2E8F0", width: pxToPt(lineWidth) },
+    });
+    // 各アイテムを描画
+    items.forEach((item, index) => {
+        const progress = itemCount === 1 ? 0.5 : index / (itemCount - 1);
+        const cx = lineX;
+        const cy = startY + lineLength * progress;
+        const color = item.color ?? defaultColor;
+        // ノード（円）を描画
+        ctx.slide.addShape(ctx.pptx.ShapeType.ellipse, {
+            x: pxToIn(cx - nodeRadius),
+            y: pxToIn(cy - nodeRadius),
+            w: pxToIn(nodeRadius * 2),
+            h: pxToIn(nodeRadius * 2),
+            fill: { color },
+            line: { type: "none" },
+        });
+        // 日付を左上に表示
+        ctx.slide.addText(item.date, {
+            x: pxToIn(cx + nodeRadius + 16),
+            y: pxToIn(cy - nodeRadius - 4),
+            w: pxToIn(100),
+            h: pxToIn(20),
+            fontSize: pxToPt(12),
+            fontFace: "Noto Sans JP",
+            color: "64748B",
+            align: "left",
+            valign: "bottom",
+        });
+        // タイトルを右に表示
+        ctx.slide.addText(item.title, {
+            x: pxToIn(cx + nodeRadius + 16),
+            y: pxToIn(cy - 4),
+            w: pxToIn(node.w - 80),
+            h: pxToIn(24),
+            fontSize: pxToPt(14),
+            fontFace: "Noto Sans JP",
+            color: "1E293B",
+            bold: true,
+            align: "left",
+            valign: "top",
+        });
+        // 説明を表示
+        if (item.description) {
+            ctx.slide.addText(item.description, {
+                x: pxToIn(cx + nodeRadius + 16),
+                y: pxToIn(cy + 20),
+                w: pxToIn(node.w - 80),
+                h: pxToIn(32),
+                fontSize: pxToPt(11),
+                fontFace: "Noto Sans JP",
+                color: "64748B",
+                align: "left",
+                valign: "top",
+            });
+        }
+    });
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/renderPptx/nodes/tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,aAAa,CAAC;AACrB,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,CAwQN"}

package/dist/renderPptx/nodes/tree.js

@@ -0,0 +1,223 @@
+import { pxToIn, pxToPt } from "../units";
+export function renderTreeNode(node, ctx) {
+    const layout = node.layout ?? "vertical";
+    const nodeShape = node.nodeShape ?? "rect";
+    const nodeWidth = node.nodeWidth ?? 120;
+    const nodeHeight = node.nodeHeight ?? 40;
+    const levelGap = node.levelGap ?? 60;
+    const siblingGap = node.siblingGap ?? 20;
+    const connectorStyle = node.connectorStyle ?? {};
+    const defaultColor = "1D4ED8";
+    // サブツリーの幅/高さを計算
+    function calculateSubtreeSize(item) {
+        if (!item.children || item.children.length === 0) {
+            return { width: nodeWidth, height: nodeHeight };
+        }
+        const childSizes = item.children.map(calculateSubtreeSize);
+        if (layout === "vertical") {
+            const childrenWidth = childSizes.reduce((sum, s) => sum + s.width, 0) +
+                siblingGap * (childSizes.length - 1);
+            const childrenHeight = Math.max(...childSizes.map((s) => s.height));
+            return {
+                width: Math.max(nodeWidth, childrenWidth),
+                height: nodeHeight + levelGap + childrenHeight,
+            };
+        }
+        else {
+            const childrenHeight = childSizes.reduce((sum, s) => sum + s.height, 0) +
+                siblingGap * (childSizes.length - 1);
+            const childrenWidth = Math.max(...childSizes.map((s) => s.width));
+            return {
+                width: nodeWidth + levelGap + childrenWidth,
+                height: Math.max(nodeHeight, childrenHeight),
+            };
+        }
+    }
+    // ツリーレイアウトを計算
+    function calculateTreeLayout(item, x, y) {
+        const subtreeSize = calculateSubtreeSize(item);
+        const layoutNode = {
+            item,
+            x: 0,
+            y: 0,
+            width: nodeWidth,
+            height: nodeHeight,
+            children: [],
+        };
+        if (layout === "vertical") {
+            // ノードを中央上部に配置
+            layoutNode.x = x + subtreeSize.width / 2 - nodeWidth / 2;
+            layoutNode.y = y;
+            // 子ノードを配置
+            if (item.children && item.children.length > 0) {
+                const childSizes = item.children.map(calculateSubtreeSize);
+                const totalChildWidth = childSizes.reduce((sum, s) => sum + s.width, 0) +
+                    siblingGap * (childSizes.length - 1);
+                let childX = x + subtreeSize.width / 2 - totalChildWidth / 2;
+                const childY = y + nodeHeight + levelGap;
+                for (let i = 0; i < item.children.length; i++) {
+                    const child = item.children[i];
+                    const childLayout = calculateTreeLayout(child, childX, childY);
+                    layoutNode.children.push(childLayout);
+                    childX += childSizes[i].width + siblingGap;
+                }
+            }
+        }
+        else {
+            // horizontal: ノードを左中央に配置
+            layoutNode.x = x;
+            layoutNode.y = y + subtreeSize.height / 2 - nodeHeight / 2;
+            // 子ノードを配置
+            if (item.children && item.children.length > 0) {
+                const childSizes = item.children.map(calculateSubtreeSize);
+                const totalChildHeight = childSizes.reduce((sum, s) => sum + s.height, 0) +
+                    siblingGap * (childSizes.length - 1);
+                const childX = x + nodeWidth + levelGap;
+                let childY = y + subtreeSize.height / 2 - totalChildHeight / 2;
+                for (let i = 0; i < item.children.length; i++) {
+                    const child = item.children[i];
+                    const childLayout = calculateTreeLayout(child, childX, childY);
+                    layoutNode.children.push(childLayout);
+                    childY += childSizes[i].height + siblingGap;
+                }
+            }
+        }
+        return layoutNode;
+    }
+    // 接続線を描画
+    function drawConnector(parent, child, style) {
+        const lineColor = style.color ?? "333333";
+        const lineWidth = style.width ?? 2;
+        if (layout === "vertical") {
+            // 親の下端中央から子の上端中央へ
+            const parentCenterX = parent.x + parent.width / 2;
+            const parentBottomY = parent.y + parent.height;
+            const childCenterX = child.x + child.width / 2;
+            const childTopY = child.y;
+            const midY = (parentBottomY + childTopY) / 2;
+            // 垂直線（親から中間点まで）
+            ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+                x: pxToIn(parentCenterX),
+                y: pxToIn(parentBottomY),
+                w: 0,
+                h: pxToIn(midY - parentBottomY),
+                line: { color: lineColor, width: pxToPt(lineWidth) },
+            });
+            // 水平線（中間点で）
+            const minX = Math.min(parentCenterX, childCenterX);
+            const maxX = Math.max(parentCenterX, childCenterX);
+            if (maxX > minX) {
+                ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+                    x: pxToIn(minX),
+                    y: pxToIn(midY),
+                    w: pxToIn(maxX - minX),
+                    h: 0,
+                    line: { color: lineColor, width: pxToPt(lineWidth) },
+                });
+            }
+            // 垂直線（中間点から子まで）
+            ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+                x: pxToIn(childCenterX),
+                y: pxToIn(midY),
+                w: 0,
+                h: pxToIn(childTopY - midY),
+                line: { color: lineColor, width: pxToPt(lineWidth) },
+            });
+        }
+        else {
+            // 親の右端中央から子の左端中央へ
+            const parentRightX = parent.x + parent.width;
+            const parentCenterY = parent.y + parent.height / 2;
+            const childLeftX = child.x;
+            const childCenterY = child.y + child.height / 2;
+            const midX = (parentRightX + childLeftX) / 2;
+            // 水平線（親から中間点まで）
+            ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+                x: pxToIn(parentRightX),
+                y: pxToIn(parentCenterY),
+                w: pxToIn(midX - parentRightX),
+                h: 0,
+                line: { color: lineColor, width: pxToPt(lineWidth) },
+            });
+            // 垂直線（中間点で）
+            const minY = Math.min(parentCenterY, childCenterY);
+            const maxY = Math.max(parentCenterY, childCenterY);
+            if (maxY > minY) {
+                ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+                    x: pxToIn(midX),
+                    y: pxToIn(minY),
+                    w: 0,
+                    h: pxToIn(maxY - minY),
+                    line: { color: lineColor, width: pxToPt(lineWidth) },
+                });
+            }
+            // 水平線（中間点から子まで）
+            ctx.slide.addShape(ctx.pptx.ShapeType.line, {
+                x: pxToIn(midX),
+                y: pxToIn(childCenterY),
+                w: pxToIn(childLeftX - midX),
+                h: 0,
+                line: { color: lineColor, width: pxToPt(lineWidth) },
+            });
+        }
+    }
+    // ノードを描画
+    function drawTreeNode(layoutNode, shape, defaultNodeColor) {
+        const color = layoutNode.item.color ?? defaultNodeColor;
+        const shapeType = (() => {
+            switch (shape) {
+                case "rect":
+                    return ctx.pptx.ShapeType.rect;
+                case "roundRect":
+                    return ctx.pptx.ShapeType.roundRect;
+                case "ellipse":
+                    return ctx.pptx.ShapeType.ellipse;
+            }
+        })();
+        // ノードの背景
+        ctx.slide.addShape(shapeType, {
+            x: pxToIn(layoutNode.x),
+            y: pxToIn(layoutNode.y),
+            w: pxToIn(layoutNode.width),
+            h: pxToIn(layoutNode.height),
+            fill: { color },
+            line: { color: "333333", width: pxToPt(1) },
+        });
+        // ノードのラベル
+        ctx.slide.addText(layoutNode.item.label, {
+            x: pxToIn(layoutNode.x),
+            y: pxToIn(layoutNode.y),
+            w: pxToIn(layoutNode.width),
+            h: pxToIn(layoutNode.height),
+            fontSize: pxToPt(12),
+            fontFace: "Noto Sans JP",
+            color: "FFFFFF",
+            align: "center",
+            valign: "middle",
+        });
+    }
+    // すべての接続線を再帰的に描画
+    function drawAllConnectors(layoutNode) {
+        for (const child of layoutNode.children) {
+            drawConnector(layoutNode, child, connectorStyle);
+            drawAllConnectors(child);
+        }
+    }
+    // すべてのノードを再帰的に描画
+    function drawAllNodes(layoutNode) {
+        drawTreeNode(layoutNode, nodeShape, defaultColor);
+        for (const child of layoutNode.children) {
+            drawAllNodes(child);
+        }
+    }
+    // ツリーのサイズを計算
+    const treeSize = calculateSubtreeSize(node.data);
+    // 描画領域内の中央に配置
+    const offsetX = node.x + (node.w - treeSize.width) / 2;
+    const offsetY = node.y + (node.h - treeSize.height) / 2;
+    // レイアウト計算
+    const rootLayout = calculateTreeLayout(node.data, offsetX, offsetY);
+    // 描画（接続線を先に、ノードを後に描画）
+    drawAllConnectors(rootLayout);
+    drawAllNodes(rootLayout);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"renderPptx.d.ts","sourceRoot":"","sources":["../../src/renderPptx/renderPptx.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,WAAW,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,KAAK,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEpD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,OAAO,iBAqOnE"}
+{"version":3,"file":"renderPptx.d.ts","sourceRoot":"","sources":["../../src/renderPptx/renderPptx.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,WAAW,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAiB/C,KAAK,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEpD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,OAAO,iBA8EnE"}

package/dist/renderPptx/renderPptx.js

@@ -1,9 +1,9 @@
 import { createRequire } from "module";
 const require = createRequire(import.meta.url);
 const PptxGenJS = require("pptxgenjs");
-import { resolveColumnWidths, resolveRowHeights } from "../table/utils";
-import { createTextOptions } from "./textOptions";
-import { pxToIn, pxToPt } from "./units";
+import { pxToIn } from "./units";
+import { renderBackgroundAndBorder } from "./utils/backgroundBorder";
+import { renderTextNode, renderImageNode, renderTableNode, renderShapeNode, renderChartNode, renderTimelineNode, renderMatrixNode, renderTreeNode, renderFlowNode, renderProcessArrowNode, } from "./nodes";
 export { createTextOptions } from "./textOptions";
 export { PX_PER_IN, pxToIn, pxToPt } from "./units";
 /**
@@ -19,188 +19,54 @@ export function renderPptx(pages, slidePx) {
     pptx.layout = "custom";
     for (const data of pages) {
         const slide = pptx.addSlide();
-        function renderBackgroundAndBorder(node) {
-            const { backgroundColor, border, borderRadius } = node;
-            const hasBackground = Boolean(backgroundColor);
-            const hasBorder = Boolean(border &&
-                (border.color !== undefined ||
-                    border.width !== undefined ||
-                    border.dashType !== undefined));
-            if (!hasBackground && !hasBorder) {
-                return;
-            }
-            const fill = hasBackground
-                ? { color: backgroundColor }
-                : { type: "none" };
-            const line = hasBorder
-                ? {
-                    color: border?.color ?? "000000",
-                    width: border?.width !== undefined ? pxToPt(border.width) : undefined,
-                    dashType: border?.dashType,
-                }
-                : { type: "none" };
-            // borderRadius がある場合は roundRect を使用し、rectRadius を計算
-            const shapeType = borderRadius
-                ? pptx.ShapeType.roundRect
-                : pptx.ShapeType.rect;
-            // px を 0-1 の正規化値に変換
-            const rectRadius = borderRadius
-                ? Math.min((borderRadius / Math.min(node.w, node.h)) * 2, 1)
-                : undefined;
-            const shapeOptions = {
-                x: pxToIn(node.x),
-                y: pxToIn(node.y),
-                w: pxToIn(node.w),
-                h: pxToIn(node.h),
-                fill,
-                line,
-                rectRadius,
-            };
-            slide.addShape(shapeType, shapeOptions);
-        }
+        const ctx = { slide, pptx };
         /**
          * node をスライドにレンダリングする
          */
         function renderNode(node) {
-            renderBackgroundAndBorder(node);
+            renderBackgroundAndBorder(node, ctx);
             switch (node.type) {
-                case "text": {
-                    const textOptions = createTextOptions(node);
-                    slide.addText(node.text ?? "", textOptions);
+                case "text":
+                    renderTextNode(node, ctx);
                     break;
-                }
-                case "image": {
-                    const imageOptions = {
-                        x: pxToIn(node.x),
-                        y: pxToIn(node.y),
-                        w: pxToIn(node.w),
-                        h: pxToIn(node.h),
-                    };
-                    if (node.imageData) {
-                        // Base64 データがある場合は data プロパティを使用（リモート画像）
-                        slide.addImage({ ...imageOptions, data: node.imageData });
-                    }
-                    else {
-                        // ローカルパスの場合は path プロパティを使用
-                        slide.addImage({ ...imageOptions, path: node.src });
-                    }
+                case "image":
+                    renderImageNode(node, ctx);
                     break;
-                }
-                case "box": {
+                case "box":
                     // 子要素を再帰的に処理
                     renderNode(node.children);
                     break;
-                }
                 case "vstack":
-                case "hstack": {
+                case "hstack":
                     // 子要素を再帰的に処理
                     for (const child of node.children) {
                         renderNode(child);
                     }
                     break;
-                }
-                case "table": {
-                    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,
-                    };
-                    slide.addTable(tableRows, tableOptions);
+                case "table":
+                    renderTableNode(node, ctx);
                     break;
-                }
-                case "shape": {
-                    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を指定
-                        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を使用
-                        slide.addShape(node.shapeType, shapeOptions);
-                    }
+                case "shape":
+                    renderShapeNode(node, ctx);
                     break;
-                }
-                case "chart": {
-                    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;
-                    }
-                    slide.addChart(node.chartType, chartData, chartOptions);
+                case "chart":
+                    renderChartNode(node, ctx);
+                    break;
+                case "timeline":
+                    renderTimelineNode(node, ctx);
+                    break;
+                case "matrix":
+                    renderMatrixNode(node, ctx);
+                    break;
+                case "tree":
+                    renderTreeNode(node, ctx);
+                    break;
+                case "flow":
+                    renderFlowNode(node, ctx);
+                    break;
+                case "processArrow":
+                    renderProcessArrowNode(node, ctx);
                     break;
-                }
             }
         }
         renderNode(data);

package/dist/renderPptx/types.d.ts

@@ -0,0 +1,10 @@
+import type PptxGenJSType from "pptxgenjs";
+import type { PositionedNode } from "../types";
+export type SlideInstance = ReturnType<InstanceType<typeof PptxGenJSType>["addSlide"]>;
+export type PptxInstance = InstanceType<typeof PptxGenJSType>;
+export type RenderContext = {
+    slide: SlideInstance;
+    pptx: PptxInstance;
+};
+export type NodeRenderer<T extends PositionedNode> = (node: T, ctx: RenderContext) => void;
+//# sourceMappingURL=types.d.ts.map