@hirokisakabe/pom 9.1.0 → 9.1.2

package/dist/renderPptx/nodes/processArrow.js

@@ -1,9 +1,10 @@
-import { pxToIn, pxToPt } from "../units.js";
+import { pxToIn } from "../units.js";
 import { withContentBounds } from "../utils/contentArea.js";
-import { convertStrike, convertUnderline } from "../textOptions.js";
-import { stripHash } from "../utils/visualStyle.js";
+import { addGlimpseTextBox } from "../utils/glimpseTextBox.js";
+import { addGlimpseShape, createShapeBoundsInput, noShapeOutline, solidShapeFill } from "../utils/glimpseShape.js";
 import { ARROW_DEPTH_RATIO } from "../../shared/processArrowConstants.js";
 import { measureProcessArrow } from "../../calcYogaLayout/measureCompositeNodes.js";
+import { stripHash } from "../utils/visualStyle.js";
 import { resolveScaledContentArea } from "../utils/scaleToFit.js";
 //#region src/renderPptx/nodes/processArrow.ts
 function renderProcessArrowNode(node, ctx) {
@@ -85,29 +86,45 @@ function renderHorizontalProcessArrow(node, ctx, steps, stepCount, itemWidth, it
 			},
 			{ close: true }
 		];
-		ctx.slide.addShape("custGeom", {
-			x: pxToIn(stepX),
-			y: pxToIn(stepY),
-			w: pxToIn(itemWidth),
-			h: pxToIn(itemHeight),
-			points,
-			fill: { color: fillColor },
-			line: { type: "none" }
+		addGlimpseShape(ctx, {
+			preset: "rect",
+			...createShapeBoundsInput({
+				x: stepX,
+				y: stepY,
+				w: itemWidth,
+				h: itemHeight
+			}),
+			fill: solidShapeFill(fillColor),
+			outline: noShapeOutline()
+		}, {
+			x: stepX,
+			y: stepY,
+			w: itemWidth,
+			h: itemHeight
+		}, {
+			fillColor,
+			customGeometry: {
+				width: pxToIn(itemWidth),
+				height: pxToIn(itemHeight),
+				points
+			}
 		});
 		const textOffsetLeft = isFirst ? 0 : arrowDepth;
 		const textWidth = Math.max(1, itemWidth - arrowDepth - textOffsetLeft);
-		ctx.slide.addText(step.label, {
-			x: pxToIn(stepX + textOffsetLeft),
-			y: pxToIn(stepY),
-			w: pxToIn(textWidth),
-			h: pxToIn(itemHeight),
-			fontSize: pxToPt((node.fontSize ?? 14) * scaleFactor),
+		addGlimpseTextBox(ctx, {
+			x: stepX + textOffsetLeft,
+			y: stepY,
+			w: textWidth,
+			h: itemHeight
+		}, {
+			text: step.label,
+			fontSize: (node.fontSize ?? 14) * scaleFactor,
 			fontFace: node.fontFamily ?? "Noto Sans JP",
 			color: textColor,
 			bold: node.bold ?? false,
 			italic: node.italic,
-			underline: convertUnderline(node.underline),
-			strike: convertStrike(node.strike),
+			underline: node.underline,
+			strike: node.strike,
 			highlight: node.highlight,
 			align: "center",
 			valign: "middle"
@@ -173,29 +190,45 @@ function renderVerticalProcessArrow(node, ctx, steps, stepCount, itemWidth, item
 			},
 			{ close: true }
 		];
-		ctx.slide.addShape("custGeom", {
-			x: pxToIn(stepX),
-			y: pxToIn(stepY),
-			w: pxToIn(itemWidth),
-			h: pxToIn(itemHeight),
-			points,
-			fill: { color: fillColor },
-			line: { type: "none" }
+		addGlimpseShape(ctx, {
+			preset: "rect",
+			...createShapeBoundsInput({
+				x: stepX,
+				y: stepY,
+				w: itemWidth,
+				h: itemHeight
+			}),
+			fill: solidShapeFill(fillColor),
+			outline: noShapeOutline()
+		}, {
+			x: stepX,
+			y: stepY,
+			w: itemWidth,
+			h: itemHeight
+		}, {
+			fillColor,
+			customGeometry: {
+				width: pxToIn(itemWidth),
+				height: pxToIn(itemHeight),
+				points
+			}
 		});
 		const textOffsetTop = isFirst ? 0 : arrowDepth;
 		const textHeight = Math.max(1, itemHeight - arrowDepth - textOffsetTop);
-		ctx.slide.addText(step.label, {
-			x: pxToIn(stepX),
-			y: pxToIn(stepY + textOffsetTop),
-			w: pxToIn(itemWidth),
-			h: pxToIn(textHeight),
-			fontSize: pxToPt((node.fontSize ?? 14) * scaleFactor),
+		addGlimpseTextBox(ctx, {
+			x: stepX,
+			y: stepY + textOffsetTop,
+			w: itemWidth,
+			h: textHeight
+		}, {
+			text: step.label,
+			fontSize: (node.fontSize ?? 14) * scaleFactor,
 			fontFace: node.fontFamily ?? "Noto Sans JP",
 			color: textColor,
 			bold: node.bold ?? false,
 			italic: node.italic,
-			underline: convertUnderline(node.underline),
-			strike: convertStrike(node.strike),
+			underline: node.underline,
+			strike: node.strike,
 			highlight: node.highlight,
 			align: "center",
 			valign: "middle"

package/dist/renderPptx/nodes/processArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"processArrow.js","names":[],"sources":["../../../src/renderPptx/nodes/processArrow.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { pxToIn, pxToPt } from \"../units.ts\";\nimport { convertUnderline, convertStrike } from \"../textOptions.ts\";\nimport { measureProcessArrow } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport {\n  ARROW_DEPTH_RATIO,\n  DEFAULT_PROCESS_ARROW_ITEM_WIDTH,\n  DEFAULT_PROCESS_ARROW_ITEM_HEIGHT,\n} from \"../../shared/processArrowConstants.ts\";\nimport { withContentBounds } from \"../utils/contentArea.ts\";\n\ntype ProcessArrowPositionedNode = Extract<\n  PositionedNode,\n  { type: \"processArrow\" }\n>;\n\nexport function renderProcessArrowNode(\n  node: ProcessArrowPositionedNode,\n  ctx: RenderContext,\n): void {\n  const direction = node.direction ?? \"horizontal\";\n  const steps = node.steps;\n  const stepCount = steps.length;\n\n  if (stepCount === 0) return;\n\n  const defaultColor = \"4472C4\"; // PowerPoint標準の青\n  const defaultTextColor = \"FFFFFF\";\n  const itemWidth = node.itemWidth ?? DEFAULT_PROCESS_ARROW_ITEM_WIDTH;\n  const itemHeight = node.itemHeight ?? DEFAULT_PROCESS_ARROW_ITEM_HEIGHT;\n  const arrowDepth = itemHeight * ARROW_DEPTH_RATIO;\n  const gap = node.gap ?? -arrowDepth;\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measureProcessArrow(node),\n    ctx,\n  );\n\n  const scaledItemWidth = itemWidth * scaleFactor;\n  const scaledItemHeight = itemHeight * scaleFactor;\n  const scaledGap = gap * scaleFactor;\n  const scaledArrowDepth = arrowDepth * scaleFactor;\n\n  // コンテンツ領域を使用するための仮想ノードを作成\n  const contentNode = withContentBounds(node, content);\n\n  if (direction === \"horizontal\") {\n    renderHorizontalProcessArrow(\n      contentNode,\n      ctx,\n      steps,\n      stepCount,\n      scaledItemWidth,\n      scaledItemHeight,\n      scaledGap,\n      scaledArrowDepth,\n      defaultColor,\n      defaultTextColor,\n      scaleFactor,\n    );\n  } else {\n    renderVerticalProcessArrow(\n      contentNode,\n      ctx,\n      steps,\n      stepCount,\n      scaledItemWidth,\n      scaledItemHeight,\n      scaledGap,\n      scaledArrowDepth,\n      defaultColor,\n      defaultTextColor,\n      scaleFactor,\n    );\n  }\n}\n\nfunction renderHorizontalProcessArrow(\n  node: ProcessArrowPositionedNode,\n  ctx: RenderContext,\n  steps: ProcessArrowPositionedNode[\"steps\"],\n  stepCount: number,\n  itemWidth: number,\n  itemHeight: number,\n  gap: number,\n  arrowDepth: number,\n  defaultColor: string,\n  defaultTextColor: string,\n  scaleFactor: number,\n): void {\n  const totalWidth = stepCount * itemWidth + (stepCount - 1) * gap;\n  const startX = node.x + (node.w - totalWidth) / 2;\n  const centerY = node.y + node.h / 2;\n\n  steps.forEach((step, index) => {\n    const stepX = startX + index * (itemWidth + gap);\n    const stepY = centerY - itemHeight / 2;\n    const fillColor = stripHash(step.color) ?? defaultColor;\n    const textColor = stripHash(step.textColor) ?? defaultTextColor;\n\n    // custGeom でシェブロン形状を描画\n    const isFirst = index === 0;\n    const points = isFirst\n      ? [\n          // homePlate 風: 左辺フラット、右辺が矢印\n          { x: 0, y: 0 },\n          { x: pxToIn(itemWidth - arrowDepth), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight / 2) },\n          { x: pxToIn(itemWidth - arrowDepth), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight) },\n          { close: true as const },\n        ]\n      : [\n          // chevron 風: 左辺に切り欠き、右辺が矢印\n          { x: 0, y: 0 },\n          { x: pxToIn(itemWidth - arrowDepth), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight / 2) },\n          { x: pxToIn(itemWidth - arrowDepth), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight) },\n          { x: pxToIn(arrowDepth), y: pxToIn(itemHeight / 2) },\n          { close: true as const },\n        ];\n\n    ctx.slide.addShape(\"custGeom\" as never, {\n      x: pxToIn(stepX),\n      y: pxToIn(stepY),\n      w: pxToIn(itemWidth),\n      h: pxToIn(itemHeight),\n      points,\n      fill: { color: fillColor },\n      line: { type: \"none\" as const },\n    });\n\n    // テキストを図形の中央（矢印部分を除いた領域）に配置\n    const textOffsetLeft = isFirst ? 0 : arrowDepth;\n    const textWidth = Math.max(1, itemWidth - arrowDepth - textOffsetLeft);\n\n    ctx.slide.addText(step.label, {\n      x: pxToIn(stepX + textOffsetLeft),\n      y: pxToIn(stepY),\n      w: pxToIn(textWidth),\n      h: pxToIn(itemHeight),\n      fontSize: pxToPt((node.fontSize ?? 14) * scaleFactor),\n      fontFace: node.fontFamily ?? \"Noto Sans JP\",\n      color: textColor,\n      bold: node.bold ?? false,\n      italic: node.italic,\n      underline: convertUnderline(node.underline),\n      strike: convertStrike(node.strike),\n      highlight: node.highlight,\n      align: \"center\",\n      valign: \"middle\",\n    });\n  });\n}\n\nfunction renderVerticalProcessArrow(\n  node: ProcessArrowPositionedNode,\n  ctx: RenderContext,\n  steps: ProcessArrowPositionedNode[\"steps\"],\n  stepCount: number,\n  itemWidth: number,\n  itemHeight: number,\n  gap: number,\n  arrowDepth: number,\n  defaultColor: string,\n  defaultTextColor: string,\n  scaleFactor: number,\n): void {\n  const totalHeight = stepCount * itemHeight + (stepCount - 1) * gap;\n  const startY = node.y + (node.h - totalHeight) / 2;\n  const centerX = node.x + node.w / 2;\n\n  steps.forEach((step, index) => {\n    const stepX = centerX - itemWidth / 2;\n    const stepY = startY + index * (itemHeight + gap);\n    const fillColor = stripHash(step.color) ?? defaultColor;\n    const textColor = stripHash(step.textColor) ?? defaultTextColor;\n\n    const isFirst = index === 0;\n    const points = isFirst\n      ? [\n          // rect 風: 上辺フラット、下辺が矢印\n          { x: 0, y: 0 },\n          { x: pxToIn(itemWidth), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight - arrowDepth) },\n          { x: pxToIn(itemWidth / 2), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight - arrowDepth) },\n          { close: true as const },\n        ]\n      : [\n          // pentagon 風: 上辺に切り欠き、下辺が矢印\n          { x: pxToIn(itemWidth / 2), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(arrowDepth) },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight - arrowDepth) },\n          { x: pxToIn(itemWidth / 2), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight - arrowDepth) },\n          { x: 0, y: pxToIn(arrowDepth) },\n          { close: true as const },\n        ];\n\n    ctx.slide.addShape(\"custGeom\" as never, {\n      x: pxToIn(stepX),\n      y: pxToIn(stepY),\n      w: pxToIn(itemWidth),\n      h: pxToIn(itemHeight),\n      points,\n      fill: { color: fillColor },\n      line: { type: \"none\" as const },\n    });\n\n    // テキストを図形の中央（矢印部分を除いた領域）に配置\n    const textOffsetTop = isFirst ? 0 : arrowDepth;\n    const textHeight = Math.max(1, itemHeight - arrowDepth - textOffsetTop);\n\n    ctx.slide.addText(step.label, {\n      x: pxToIn(stepX),\n      y: pxToIn(stepY + textOffsetTop),\n      w: pxToIn(itemWidth),\n      h: pxToIn(textHeight),\n      fontSize: pxToPt((node.fontSize ?? 14) * scaleFactor),\n      fontFace: node.fontFamily ?? \"Noto Sans JP\",\n      color: textColor,\n      bold: node.bold ?? false,\n      italic: node.italic,\n      underline: convertUnderline(node.underline),\n      strike: convertStrike(node.strike),\n      highlight: node.highlight,\n      align: \"center\",\n      valign: \"middle\",\n    });\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"processArrow.js","names":[],"sources":["../../../src/renderPptx/nodes/processArrow.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { pxToIn } from \"../units.ts\";\nimport { measureProcessArrow } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport {\n  ARROW_DEPTH_RATIO,\n  DEFAULT_PROCESS_ARROW_ITEM_WIDTH,\n  DEFAULT_PROCESS_ARROW_ITEM_HEIGHT,\n} from \"../../shared/processArrowConstants.ts\";\nimport { withContentBounds } from \"../utils/contentArea.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  noShapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\nimport { addGlimpseTextBox } from \"../utils/glimpseTextBox.ts\";\n\ntype ProcessArrowPositionedNode = Extract<\n  PositionedNode,\n  { type: \"processArrow\" }\n>;\n\nexport function renderProcessArrowNode(\n  node: ProcessArrowPositionedNode,\n  ctx: RenderContext,\n): void {\n  const direction = node.direction ?? \"horizontal\";\n  const steps = node.steps;\n  const stepCount = steps.length;\n\n  if (stepCount === 0) return;\n\n  const defaultColor = \"4472C4\"; // PowerPoint標準の青\n  const defaultTextColor = \"FFFFFF\";\n  const itemWidth = node.itemWidth ?? DEFAULT_PROCESS_ARROW_ITEM_WIDTH;\n  const itemHeight = node.itemHeight ?? DEFAULT_PROCESS_ARROW_ITEM_HEIGHT;\n  const arrowDepth = itemHeight * ARROW_DEPTH_RATIO;\n  const gap = node.gap ?? -arrowDepth;\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measureProcessArrow(node),\n    ctx,\n  );\n\n  const scaledItemWidth = itemWidth * scaleFactor;\n  const scaledItemHeight = itemHeight * scaleFactor;\n  const scaledGap = gap * scaleFactor;\n  const scaledArrowDepth = arrowDepth * scaleFactor;\n\n  // コンテンツ領域を使用するための仮想ノードを作成\n  const contentNode = withContentBounds(node, content);\n\n  if (direction === \"horizontal\") {\n    renderHorizontalProcessArrow(\n      contentNode,\n      ctx,\n      steps,\n      stepCount,\n      scaledItemWidth,\n      scaledItemHeight,\n      scaledGap,\n      scaledArrowDepth,\n      defaultColor,\n      defaultTextColor,\n      scaleFactor,\n    );\n  } else {\n    renderVerticalProcessArrow(\n      contentNode,\n      ctx,\n      steps,\n      stepCount,\n      scaledItemWidth,\n      scaledItemHeight,\n      scaledGap,\n      scaledArrowDepth,\n      defaultColor,\n      defaultTextColor,\n      scaleFactor,\n    );\n  }\n}\n\nfunction renderHorizontalProcessArrow(\n  node: ProcessArrowPositionedNode,\n  ctx: RenderContext,\n  steps: ProcessArrowPositionedNode[\"steps\"],\n  stepCount: number,\n  itemWidth: number,\n  itemHeight: number,\n  gap: number,\n  arrowDepth: number,\n  defaultColor: string,\n  defaultTextColor: string,\n  scaleFactor: number,\n): void {\n  const totalWidth = stepCount * itemWidth + (stepCount - 1) * gap;\n  const startX = node.x + (node.w - totalWidth) / 2;\n  const centerY = node.y + node.h / 2;\n\n  steps.forEach((step, index) => {\n    const stepX = startX + index * (itemWidth + gap);\n    const stepY = centerY - itemHeight / 2;\n    const fillColor = stripHash(step.color) ?? defaultColor;\n    const textColor = stripHash(step.textColor) ?? defaultTextColor;\n\n    // custGeom でシェブロン形状を描画\n    const isFirst = index === 0;\n    const points = isFirst\n      ? [\n          // homePlate 風: 左辺フラット、右辺が矢印\n          { x: 0, y: 0 },\n          { x: pxToIn(itemWidth - arrowDepth), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight / 2) },\n          { x: pxToIn(itemWidth - arrowDepth), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight) },\n          { close: true as const },\n        ]\n      : [\n          // chevron 風: 左辺に切り欠き、右辺が矢印\n          { x: 0, y: 0 },\n          { x: pxToIn(itemWidth - arrowDepth), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight / 2) },\n          { x: pxToIn(itemWidth - arrowDepth), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight) },\n          { x: pxToIn(arrowDepth), y: pxToIn(itemHeight / 2) },\n          { close: true as const },\n        ];\n\n    addGlimpseShape(\n      ctx,\n      {\n        preset: \"rect\",\n        ...createShapeBoundsInput({\n          x: stepX,\n          y: stepY,\n          w: itemWidth,\n          h: itemHeight,\n        }),\n        fill: solidShapeFill(fillColor),\n        outline: noShapeOutline(),\n      },\n      { x: stepX, y: stepY, w: itemWidth, h: itemHeight },\n      {\n        fillColor,\n        customGeometry: {\n          width: pxToIn(itemWidth),\n          height: pxToIn(itemHeight),\n          points,\n        },\n      },\n    );\n\n    // テキストを図形の中央（矢印部分を除いた領域）に配置\n    const textOffsetLeft = isFirst ? 0 : arrowDepth;\n    const textWidth = Math.max(1, itemWidth - arrowDepth - textOffsetLeft);\n\n    addGlimpseTextBox(\n      ctx,\n      {\n        x: stepX + textOffsetLeft,\n        y: stepY,\n        w: textWidth,\n        h: itemHeight,\n      },\n      {\n        text: step.label,\n        fontSize: (node.fontSize ?? 14) * scaleFactor,\n        fontFace: node.fontFamily ?? \"Noto Sans JP\",\n        color: textColor,\n        bold: node.bold ?? false,\n        italic: node.italic,\n        underline: node.underline,\n        strike: node.strike,\n        highlight: node.highlight,\n        align: \"center\",\n        valign: \"middle\",\n      },\n    );\n  });\n}\n\nfunction renderVerticalProcessArrow(\n  node: ProcessArrowPositionedNode,\n  ctx: RenderContext,\n  steps: ProcessArrowPositionedNode[\"steps\"],\n  stepCount: number,\n  itemWidth: number,\n  itemHeight: number,\n  gap: number,\n  arrowDepth: number,\n  defaultColor: string,\n  defaultTextColor: string,\n  scaleFactor: number,\n): void {\n  const totalHeight = stepCount * itemHeight + (stepCount - 1) * gap;\n  const startY = node.y + (node.h - totalHeight) / 2;\n  const centerX = node.x + node.w / 2;\n\n  steps.forEach((step, index) => {\n    const stepX = centerX - itemWidth / 2;\n    const stepY = startY + index * (itemHeight + gap);\n    const fillColor = stripHash(step.color) ?? defaultColor;\n    const textColor = stripHash(step.textColor) ?? defaultTextColor;\n\n    const isFirst = index === 0;\n    const points = isFirst\n      ? [\n          // rect 風: 上辺フラット、下辺が矢印\n          { x: 0, y: 0 },\n          { x: pxToIn(itemWidth), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight - arrowDepth) },\n          { x: pxToIn(itemWidth / 2), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight - arrowDepth) },\n          { close: true as const },\n        ]\n      : [\n          // pentagon 風: 上辺に切り欠き、下辺が矢印\n          { x: pxToIn(itemWidth / 2), y: 0 },\n          { x: pxToIn(itemWidth), y: pxToIn(arrowDepth) },\n          { x: pxToIn(itemWidth), y: pxToIn(itemHeight - arrowDepth) },\n          { x: pxToIn(itemWidth / 2), y: pxToIn(itemHeight) },\n          { x: 0, y: pxToIn(itemHeight - arrowDepth) },\n          { x: 0, y: pxToIn(arrowDepth) },\n          { close: true as const },\n        ];\n\n    addGlimpseShape(\n      ctx,\n      {\n        preset: \"rect\",\n        ...createShapeBoundsInput({\n          x: stepX,\n          y: stepY,\n          w: itemWidth,\n          h: itemHeight,\n        }),\n        fill: solidShapeFill(fillColor),\n        outline: noShapeOutline(),\n      },\n      { x: stepX, y: stepY, w: itemWidth, h: itemHeight },\n      {\n        fillColor,\n        customGeometry: {\n          width: pxToIn(itemWidth),\n          height: pxToIn(itemHeight),\n          points,\n        },\n      },\n    );\n\n    // テキストを図形の中央（矢印部分を除いた領域）に配置\n    const textOffsetTop = isFirst ? 0 : arrowDepth;\n    const textHeight = Math.max(1, itemHeight - arrowDepth - textOffsetTop);\n\n    addGlimpseTextBox(\n      ctx,\n      {\n        x: stepX,\n        y: stepY + textOffsetTop,\n        w: itemWidth,\n        h: textHeight,\n      },\n      {\n        text: step.label,\n        fontSize: (node.fontSize ?? 14) * scaleFactor,\n        fontFace: node.fontFamily ?? \"Noto Sans JP\",\n        color: textColor,\n        bold: node.bold ?? false,\n        italic: node.italic,\n        underline: node.underline,\n        strike: node.strike,\n        highlight: node.highlight,\n        align: \"center\",\n        valign: \"middle\",\n      },\n    );\n  });\n}\n"],"mappings":"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"}

package/dist/renderPptx/nodes/pyramid.js

@@ -1,6 +1,8 @@
-import { pxToIn, pxToPt } from "../units.js";
-import { stripHash } from "../utils/visualStyle.js";
+import { pxToIn } from "../units.js";
+import { addGlimpseTextBox } from "../utils/glimpseTextBox.js";
+import { addGlimpseShape, createShapeBoundsInput, noShapeOutline, solidShapeFill } from "../utils/glimpseShape.js";
 import { measurePyramid } from "../../calcYogaLayout/measureCompositeNodes.js";
+import { stripHash } from "../utils/visualStyle.js";
 import { resolveScaledContentArea } from "../utils/scaleToFit.js";
 //#region src/renderPptx/nodes/pyramid.ts
 function renderPyramidNode(node, ctx) {
@@ -58,21 +60,37 @@ function renderPyramidNode(node, ctx) {
 			},
 			{ close: true }
 		];
-		ctx.slide.addShape("custGeom", {
-			x: pxToIn(bboxX),
-			y: pxToIn(layerY),
-			w: pxToIn(bboxW),
-			h: pxToIn(layerHeight),
-			points,
-			fill: { color: fillColor },
-			line: { type: "none" }
+		addGlimpseShape(ctx, {
+			preset: "rect",
+			...createShapeBoundsInput({
+				x: bboxX,
+				y: layerY,
+				w: bboxW,
+				h: layerHeight
+			}),
+			fill: solidShapeFill(fillColor),
+			outline: noShapeOutline()
+		}, {
+			x: bboxX,
+			y: layerY,
+			w: bboxW,
+			h: layerHeight
+		}, {
+			fillColor,
+			customGeometry: {
+				width: pxToIn(bboxW),
+				height: pxToIn(layerHeight),
+				points
+			}
 		});
-		ctx.slide.addText(level.label, {
-			x: pxToIn(bboxX),
-			y: pxToIn(layerY),
-			w: pxToIn(bboxW),
-			h: pxToIn(layerHeight),
-			fontSize: pxToPt((node.fontSize ?? 14) * scaleFactor),
+		addGlimpseTextBox(ctx, {
+			x: bboxX,
+			y: layerY,
+			w: bboxW,
+			h: layerHeight
+		}, {
+			text: level.label,
+			fontSize: (node.fontSize ?? 14) * scaleFactor,
 			fontFace: node.fontFamily ?? "Noto Sans JP",
 			color: textColor,
 			bold: node.bold ?? false,

package/dist/renderPptx/nodes/pyramid.js.map

@@ -1 +1 @@
-{"version":3,"file":"pyramid.js","names":[],"sources":["../../../src/renderPptx/nodes/pyramid.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { pxToIn, pxToPt } from \"../units.ts\";\nimport { measurePyramid } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\n\ntype PyramidPositionedNode = Extract<PositionedNode, { type: \"pyramid\" }>;\n\nexport function renderPyramidNode(\n  node: PyramidPositionedNode,\n  ctx: RenderContext,\n): void {\n  const direction = node.direction ?? \"up\";\n  const levels = node.levels;\n  const levelCount = levels.length;\n\n  if (levelCount === 0) return;\n\n  const defaultColor = \"4472C4\";\n  const defaultTextColor = \"FFFFFF\";\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measurePyramid(node),\n    ctx,\n  );\n\n  const baseWidth = 400 * scaleFactor;\n  const layerHeight = 50 * scaleFactor;\n  const gap = 2 * scaleFactor;\n\n  const totalHeight = levelCount * layerHeight + (levelCount - 1) * gap;\n  const startX = content.x + (content.w - baseWidth) / 2;\n  const startY = content.y + (content.h - totalHeight) / 2;\n\n  for (let i = 0; i < levelCount; i++) {\n    const level = levels[i];\n    const fillColor = stripHash(level.color) ?? defaultColor;\n    const textColor = stripHash(level.textColor) ?? defaultTextColor;\n\n    const layerY = startY + i * (layerHeight + gap);\n\n    // direction=\"up\": i=0 が最上段（最も狭い＝三角形）、i=levelCount-1 が最下段（最も広い）\n    // direction=\"down\": i=0 が最上段（最も広い）、i=levelCount-1 が最下段（最も狭い＝三角形）\n    // 頂点層の上辺は幅0（三角形）、それ以外は台形\n    let topWidthRatio: number;\n    let bottomWidthRatio: number;\n\n    if (direction === \"up\") {\n      topWidthRatio = i / levelCount;\n      bottomWidthRatio = (i + 1) / levelCount;\n    } else {\n      topWidthRatio = (levelCount - i) / levelCount;\n      bottomWidthRatio = (levelCount - i - 1) / levelCount;\n    }\n\n    const topWidth = baseWidth * topWidthRatio;\n    const bottomWidth = baseWidth * bottomWidthRatio;\n\n    const topLeftX = startX + (baseWidth - topWidth) / 2;\n    const topRightX = topLeftX + topWidth;\n    const bottomLeftX = startX + (baseWidth - bottomWidth) / 2;\n    const bottomRightX = bottomLeftX + bottomWidth;\n\n    // custGeom のバウンディングボックス\n    const bboxX = Math.min(topLeftX, bottomLeftX);\n    const bboxW = Math.max(topRightX, bottomRightX) - bboxX;\n\n    // points はバウンディングボックス内の相対インチ座標\n    const points = [\n      { x: pxToIn(topLeftX - bboxX), y: 0 },\n      { x: pxToIn(topRightX - bboxX), y: 0 },\n      { x: pxToIn(bottomRightX - bboxX), y: pxToIn(layerHeight) },\n      { x: pxToIn(bottomLeftX - bboxX), y: pxToIn(layerHeight) },\n      { close: true as const },\n    ];\n\n    // 図形を描画（頂点層は三角形、それ以外は台形）\n    ctx.slide.addShape(\"custGeom\" as never, {\n      x: pxToIn(bboxX),\n      y: pxToIn(layerY),\n      w: pxToIn(bboxW),\n      h: pxToIn(layerHeight),\n      points,\n      fill: { color: fillColor },\n      line: { type: \"none\" as const },\n    });\n\n    // テキストを図形の中央に重ねて描画\n    ctx.slide.addText(level.label, {\n      x: pxToIn(bboxX),\n      y: pxToIn(layerY),\n      w: pxToIn(bboxW),\n      h: pxToIn(layerHeight),\n      fontSize: pxToPt((node.fontSize ?? 14) * scaleFactor),\n      fontFace: node.fontFamily ?? \"Noto Sans JP\",\n      color: textColor,\n      bold: node.bold ?? false,\n      align: \"center\",\n      valign: \"middle\",\n      autoFit: true,\n    });\n  }\n}\n"],"mappings":";;;;;AASA,SAAgB,kBACd,MACA,KACM;CACN,MAAM,YAAY,KAAK,aAAa;CACpC,MAAM,SAAS,KAAK;CACpB,MAAM,aAAa,OAAO;CAE1B,IAAI,eAAe,GAAG;CAEtB,MAAM,eAAe;CACrB,MAAM,mBAAmB;CAGzB,MAAM,EAAE,SAAS,gBAAgB,yBAC/B,MACA,eAAe,IAAI,GACnB,GACF;CAEA,MAAM,YAAY,MAAM;CACxB,MAAM,cAAc,KAAK;CACzB,MAAM,MAAM,IAAI;CAEhB,MAAM,cAAc,aAAa,eAAe,aAAa,KAAK;CAClE,MAAM,SAAS,QAAQ,KAAK,QAAQ,IAAI,aAAa;CACrD,MAAM,SAAS,QAAQ,KAAK,QAAQ,IAAI,eAAe;CAEvD,KAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;EACnC,MAAM,QAAQ,OAAO;EACrB,MAAM,YAAY,UAAU,MAAM,KAAK,KAAK;EAC5C,MAAM,YAAY,UAAU,MAAM,SAAS,KAAK;EAEhD,MAAM,SAAS,SAAS,KAAK,cAAc;EAK3C,IAAI;EACJ,IAAI;EAEJ,IAAI,cAAc,MAAM;GACtB,gBAAgB,IAAI;GACpB,oBAAoB,IAAI,KAAK;EAC/B,OAAO;GACL,iBAAiB,aAAa,KAAK;GACnC,oBAAoB,aAAa,IAAI,KAAK;EAC5C;EAEA,MAAM,WAAW,YAAY;EAC7B,MAAM,cAAc,YAAY;EAEhC,MAAM,WAAW,UAAU,YAAY,YAAY;EACnD,MAAM,YAAY,WAAW;EAC7B,MAAM,cAAc,UAAU,YAAY,eAAe;EACzD,MAAM,eAAe,cAAc;EAGnC,MAAM,QAAQ,KAAK,IAAI,UAAU,WAAW;EAC5C,MAAM,QAAQ,KAAK,IAAI,WAAW,YAAY,IAAI;EAGlD,MAAM,SAAS;GACb;IAAE,GAAG,OAAO,WAAW,KAAK;IAAG,GAAG;GAAE;GACpC;IAAE,GAAG,OAAO,YAAY,KAAK;IAAG,GAAG;GAAE;GACrC;IAAE,GAAG,OAAO,eAAe,KAAK;IAAG,GAAG,OAAO,WAAW;GAAE;GAC1D;IAAE,GAAG,OAAO,cAAc,KAAK;IAAG,GAAG,OAAO,WAAW;GAAE;GACzD,EAAE,OAAO,KAAc;EACzB;EAGA,IAAI,MAAM,SAAS,YAAqB;GACtC,GAAG,OAAO,KAAK;GACf,GAAG,OAAO,MAAM;GAChB,GAAG,OAAO,KAAK;GACf,GAAG,OAAO,WAAW;GACrB;GACA,MAAM,EAAE,OAAO,UAAU;GACzB,MAAM,EAAE,MAAM,OAAgB;EAChC,CAAC;EAGD,IAAI,MAAM,QAAQ,MAAM,OAAO;GAC7B,GAAG,OAAO,KAAK;GACf,GAAG,OAAO,MAAM;GAChB,GAAG,OAAO,KAAK;GACf,GAAG,OAAO,WAAW;GACrB,UAAU,QAAQ,KAAK,YAAY,MAAM,WAAW;GACpD,UAAU,KAAK,cAAc;GAC7B,OAAO;GACP,MAAM,KAAK,QAAQ;GACnB,OAAO;GACP,QAAQ;GACR,SAAS;EACX,CAAC;CACH;AACF"}
+{"version":3,"file":"pyramid.js","names":[],"sources":["../../../src/renderPptx/nodes/pyramid.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { pxToIn } from \"../units.ts\";\nimport { measurePyramid } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  noShapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\nimport { addGlimpseTextBox } from \"../utils/glimpseTextBox.ts\";\n\ntype PyramidPositionedNode = Extract<PositionedNode, { type: \"pyramid\" }>;\n\nexport function renderPyramidNode(\n  node: PyramidPositionedNode,\n  ctx: RenderContext,\n): void {\n  const direction = node.direction ?? \"up\";\n  const levels = node.levels;\n  const levelCount = levels.length;\n\n  if (levelCount === 0) return;\n\n  const defaultColor = \"4472C4\";\n  const defaultTextColor = \"FFFFFF\";\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measurePyramid(node),\n    ctx,\n  );\n\n  const baseWidth = 400 * scaleFactor;\n  const layerHeight = 50 * scaleFactor;\n  const gap = 2 * scaleFactor;\n\n  const totalHeight = levelCount * layerHeight + (levelCount - 1) * gap;\n  const startX = content.x + (content.w - baseWidth) / 2;\n  const startY = content.y + (content.h - totalHeight) / 2;\n\n  for (let i = 0; i < levelCount; i++) {\n    const level = levels[i];\n    const fillColor = stripHash(level.color) ?? defaultColor;\n    const textColor = stripHash(level.textColor) ?? defaultTextColor;\n\n    const layerY = startY + i * (layerHeight + gap);\n\n    // direction=\"up\": i=0 が最上段（最も狭い＝三角形）、i=levelCount-1 が最下段（最も広い）\n    // direction=\"down\": i=0 が最上段（最も広い）、i=levelCount-1 が最下段（最も狭い＝三角形）\n    // 頂点層の上辺は幅0（三角形）、それ以外は台形\n    let topWidthRatio: number;\n    let bottomWidthRatio: number;\n\n    if (direction === \"up\") {\n      topWidthRatio = i / levelCount;\n      bottomWidthRatio = (i + 1) / levelCount;\n    } else {\n      topWidthRatio = (levelCount - i) / levelCount;\n      bottomWidthRatio = (levelCount - i - 1) / levelCount;\n    }\n\n    const topWidth = baseWidth * topWidthRatio;\n    const bottomWidth = baseWidth * bottomWidthRatio;\n\n    const topLeftX = startX + (baseWidth - topWidth) / 2;\n    const topRightX = topLeftX + topWidth;\n    const bottomLeftX = startX + (baseWidth - bottomWidth) / 2;\n    const bottomRightX = bottomLeftX + bottomWidth;\n\n    // custGeom のバウンディングボックス\n    const bboxX = Math.min(topLeftX, bottomLeftX);\n    const bboxW = Math.max(topRightX, bottomRightX) - bboxX;\n\n    // points はバウンディングボックス内の相対インチ座標\n    const points = [\n      { x: pxToIn(topLeftX - bboxX), y: 0 },\n      { x: pxToIn(topRightX - bboxX), y: 0 },\n      { x: pxToIn(bottomRightX - bboxX), y: pxToIn(layerHeight) },\n      { x: pxToIn(bottomLeftX - bboxX), y: pxToIn(layerHeight) },\n      { close: true as const },\n    ];\n\n    addGlimpseShape(\n      ctx,\n      {\n        preset: \"rect\",\n        ...createShapeBoundsInput({\n          x: bboxX,\n          y: layerY,\n          w: bboxW,\n          h: layerHeight,\n        }),\n        fill: solidShapeFill(fillColor),\n        outline: noShapeOutline(),\n      },\n      { x: bboxX, y: layerY, w: bboxW, h: layerHeight },\n      {\n        fillColor,\n        customGeometry: {\n          width: pxToIn(bboxW),\n          height: pxToIn(layerHeight),\n          points,\n        },\n      },\n    );\n\n    // テキストを図形の中央に重ねて描画\n    addGlimpseTextBox(\n      ctx,\n      {\n        x: bboxX,\n        y: layerY,\n        w: bboxW,\n        h: layerHeight,\n      },\n      {\n        text: level.label,\n        fontSize: (node.fontSize ?? 14) * scaleFactor,\n        fontFace: node.fontFamily ?? \"Noto Sans JP\",\n        color: textColor,\n        bold: node.bold ?? false,\n        align: \"center\",\n        valign: \"middle\",\n        autoFit: true,\n      },\n    );\n  }\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,kBACd,MACA,KACM;CACN,MAAM,YAAY,KAAK,aAAa;CACpC,MAAM,SAAS,KAAK;CACpB,MAAM,aAAa,OAAO;CAE1B,IAAI,eAAe,GAAG;CAEtB,MAAM,eAAe;CACrB,MAAM,mBAAmB;CAGzB,MAAM,EAAE,SAAS,gBAAgB,yBAC/B,MACA,eAAe,IAAI,GACnB,GACF;CAEA,MAAM,YAAY,MAAM;CACxB,MAAM,cAAc,KAAK;CACzB,MAAM,MAAM,IAAI;CAEhB,MAAM,cAAc,aAAa,eAAe,aAAa,KAAK;CAClE,MAAM,SAAS,QAAQ,KAAK,QAAQ,IAAI,aAAa;CACrD,MAAM,SAAS,QAAQ,KAAK,QAAQ,IAAI,eAAe;CAEvD,KAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;EACnC,MAAM,QAAQ,OAAO;EACrB,MAAM,YAAY,UAAU,MAAM,KAAK,KAAK;EAC5C,MAAM,YAAY,UAAU,MAAM,SAAS,KAAK;EAEhD,MAAM,SAAS,SAAS,KAAK,cAAc;EAK3C,IAAI;EACJ,IAAI;EAEJ,IAAI,cAAc,MAAM;GACtB,gBAAgB,IAAI;GACpB,oBAAoB,IAAI,KAAK;EAC/B,OAAO;GACL,iBAAiB,aAAa,KAAK;GACnC,oBAAoB,aAAa,IAAI,KAAK;EAC5C;EAEA,MAAM,WAAW,YAAY;EAC7B,MAAM,cAAc,YAAY;EAEhC,MAAM,WAAW,UAAU,YAAY,YAAY;EACnD,MAAM,YAAY,WAAW;EAC7B,MAAM,cAAc,UAAU,YAAY,eAAe;EACzD,MAAM,eAAe,cAAc;EAGnC,MAAM,QAAQ,KAAK,IAAI,UAAU,WAAW;EAC5C,MAAM,QAAQ,KAAK,IAAI,WAAW,YAAY,IAAI;EAGlD,MAAM,SAAS;GACb;IAAE,GAAG,OAAO,WAAW,KAAK;IAAG,GAAG;GAAE;GACpC;IAAE,GAAG,OAAO,YAAY,KAAK;IAAG,GAAG;GAAE;GACrC;IAAE,GAAG,OAAO,eAAe,KAAK;IAAG,GAAG,OAAO,WAAW;GAAE;GAC1D;IAAE,GAAG,OAAO,cAAc,KAAK;IAAG,GAAG,OAAO,WAAW;GAAE;GACzD,EAAE,OAAO,KAAc;EACzB;EAEA,gBACE,KACA;GACE,QAAQ;GACR,GAAG,uBAAuB;IACxB,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;GACL,CAAC;GACD,MAAM,eAAe,SAAS;GAC9B,SAAS,eAAe;EAC1B,GACA;GAAE,GAAG;GAAO,GAAG;GAAQ,GAAG;GAAO,GAAG;EAAY,GAChD;GACE;GACA,gBAAgB;IACd,OAAO,OAAO,KAAK;IACnB,QAAQ,OAAO,WAAW;IAC1B;GACF;EACF,CACF;EAGA,kBACE,KACA;GACE,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EACL,GACA;GACE,MAAM,MAAM;GACZ,WAAW,KAAK,YAAY,MAAM;GAClC,UAAU,KAAK,cAAc;GAC7B,OAAO;GACP,MAAM,KAAK,QAAQ;GACnB,OAAO;GACP,QAAQ;GACR,SAAS;EACX,CACF;CACF;AACF"}

package/dist/renderPptx/nodes/shape.js

@@ -1,7 +1,8 @@
-import { pxToPt } from "../units.js";
-import { getContentAreaIn } from "../utils/contentArea.js";
-import { convertStrike, convertUnderline } from "../textOptions.js";
-import { convertBorderLine, convertShadow } from "../utils/visualStyle.js";
+import { pxToEmu, pxToPt } from "../units.js";
+import { getContentArea } from "../utils/contentArea.js";
+import { toColorInput } from "../glimpseTextBoxes.js";
+import { addGlimpseShape, createShapeBoundsInput, createShapeRotationInput, noneShapeFill, shapeOutline, solidShapeFill } from "../utils/glimpseShape.js";
+import { asEmu, asHundredthPt, asPt } from "@pptx-glimpse/document";
 //#region src/renderPptx/nodes/shape.ts
 /**
 * outline (Text と同じ書式の `outline.size` / `outline.color`) と
@@ -22,41 +23,66 @@ function resolveShapeLine(line, outline) {
 		dashType: line?.dashType
 	};
 }
-function renderShapeNode(node, ctx) {
-	const lineSpec = resolveShapeLine(node.line, node.outline);
-	const glowMarker = node.glow ? ctx.buildContext.glowEffects.register(node.glow) : void 0;
-	const shapeOptions = {
-		...getContentAreaIn(node),
-		fill: node.fill ? {
-			color: node.fill.color,
-			transparency: node.fill.transparency
-		} : void 0,
-		line: lineSpec ? convertBorderLine(lineSpec) : void 0,
-		shadow: convertShadow(node.shadow),
-		rotate: node.rotate,
-		objectName: glowMarker
+function toUnderlineInput(underline) {
+	if (underline === void 0 || underline === false) return void 0;
+	if (underline === true) return true;
+	return {
+		style: underline.style,
+		color: toColorInput(underline.color)
+	};
+}
+function buildShapeTextProperties(node) {
+	return {
+		fontFace: node.fontFamily ?? "Noto Sans JP",
+		fontSize: asPt(pxToPt(node.fontSize ?? 24)),
+		color: toColorInput(node.color),
+		bold: node.bold,
+		italic: node.italic,
+		underline: toUnderlineInput(node.underline),
+		strike: node.strike,
+		baseline: node.subscript ? "subscript" : node.superscript ? "superscript" : void 0,
+		highlight: toColorInput(node.highlight)
 	};
-	if (node.text) {
-		const fontSizePx = node.fontSize ?? 24;
-		const lineHeight = node.lineHeight ?? 1.3;
-		ctx.slide.addText(node.text, {
-			...shapeOptions,
-			shape: node.shapeType,
-			fontSize: pxToPt(fontSizePx),
-			fontFace: node.fontFamily ?? "Noto Sans JP",
-			color: node.color,
-			bold: node.bold,
-			italic: node.italic,
-			underline: convertUnderline(node.underline),
-			strike: convertStrike(node.strike),
-			subscript: node.subscript,
-			superscript: node.superscript,
-			highlight: node.highlight,
+}
+function buildShapeParagraphs(node) {
+	if (!node.text) return void 0;
+	const fontSizePx = node.fontSize ?? 24;
+	const lineHeight = node.lineHeight ?? 1.3;
+	const properties = buildShapeTextProperties(node);
+	return node.text.replace(/\r*\n/g, "\n").split("\n").map((text) => ({
+		properties: {
 			align: node.textAlign ?? "center",
-			valign: "middle",
-			lineSpacing: pxToPt(fontSizePx * lineHeight)
-		});
-	} else ctx.slide.addShape(node.shapeType, shapeOptions);
+			lineSpacing: asHundredthPt(Math.round(pxToPt(fontSizePx * lineHeight) * 100))
+		},
+		runs: [{
+			text,
+			properties
+		}]
+	}));
+}
+function renderShapeNode(node, ctx) {
+	const lineSpec = resolveShapeLine(node.line, node.outline);
+	const boundsPx = getContentArea(node);
+	const fillOpacity = node.fill?.transparency !== void 0 ? 1 - node.fill.transparency / 100 : void 0;
+	addGlimpseShape(ctx, {
+		preset: node.shapeType,
+		...createShapeBoundsInput(boundsPx),
+		rotation: createShapeRotationInput(node.rotate),
+		fill: node.fill?.color ? solidShapeFill(node.fill.color) : noneShapeFill(),
+		outline: shapeOutline(lineSpec),
+		effects: node.glow ? { glow: {
+			radius: asEmu(Math.round(pxToEmu(node.glow.size ?? 8))),
+			color: toColorInput(node.glow.color ?? "FFFFFF")
+		} } : void 0,
+		body: node.text ? { anchor: "middle" } : void 0,
+		paragraphs: buildShapeParagraphs(node)
+	}, boundsPx, {
+		fillColor: node.fill?.color,
+		fillOpacity,
+		glow: node.glow,
+		shadow: node.shadow,
+		dashType: lineSpec?.dashType
+	});
 }
 //#endregion
 export { renderShapeNode };

package/dist/renderPptx/nodes/shape.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape.js","names":[],"sources":["../../../src/renderPptx/nodes/shape.ts"],"sourcesContent":["import type { BorderStyle, PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { pxToPt } from \"../units.ts\";\nimport { convertUnderline, convertStrike } from \"../textOptions.ts\";\nimport { getContentAreaIn } from \"../utils/contentArea.ts\";\nimport { convertBorderLine, convertShadow } from \"../utils/visualStyle.ts\";\n\ntype ShapePositionedNode = Extract<PositionedNode, { type: \"shape\" }>;\n\n/**\n * outline (Text と同じ書式の `outline.size` / `outline.color`) と\n * 既存 `line` 属性 (`line.color` / `line.width` / `line.dashType`) を\n * 1 つの BorderStyle にマージする。\n *\n * フィールド単位のマージで、`outline` の指定があるフィールドは `line` を\n * 上書きするが、`outline` 側で省略されたフィールドは `line` の値を引き継ぎ、\n * `line` にも値が無い場合は Text outline と同じ既定値 (`width: 1pt 相当` /\n * `color: FFFFFF`) を採用する。`dashType` は `outline` に対応フィールドが\n * 無いため `line.dashType` をそのまま使う。\n */\nfunction resolveShapeLine(\n  line: BorderStyle | undefined,\n  outline: { size?: number; color?: string } | undefined,\n): BorderStyle | undefined {\n  if (!outline) return line;\n  return {\n    color: outline.color ?? line?.color ?? \"FFFFFF\",\n    width: outline.size ?? line?.width ?? 1,\n    dashType: line?.dashType,\n  };\n}\n\nexport function renderShapeNode(\n  node: ShapePositionedNode,\n  ctx: RenderContext,\n): void {\n  const lineSpec = resolveShapeLine(node.line, node.outline);\n  const glowMarker = node.glow\n    ? ctx.buildContext.glowEffects.register(node.glow)\n    : undefined;\n\n  const shapeOptions = {\n    ...getContentAreaIn(node),\n    fill: node.fill\n      ? {\n          color: node.fill.color,\n          transparency: node.fill.transparency,\n        }\n      : undefined,\n    line: lineSpec ? convertBorderLine(lineSpec) : undefined,\n    shadow: convertShadow(node.shadow),\n    rotate: node.rotate,\n    objectName: glowMarker,\n  };\n\n  if (node.text) {\n    const fontSizePx = node.fontSize ?? 24;\n    const lineHeight = node.lineHeight ?? 1.3;\n    // テキストがある場合：addTextでshapeを指定\n    ctx.slide.addText(node.text, {\n      ...shapeOptions,\n      shape: node.shapeType,\n      fontSize: pxToPt(fontSizePx),\n      fontFace: node.fontFamily ?? \"Noto Sans JP\",\n      color: node.color,\n      bold: node.bold,\n      italic: node.italic,\n      underline: convertUnderline(node.underline),\n      strike: convertStrike(node.strike),\n      subscript: node.subscript,\n      superscript: node.superscript,\n      highlight: node.highlight,\n      align: node.textAlign ?? \"center\",\n      valign: \"middle\" as const,\n      // Text と同じく行送りを固定値 (spcPts) で指定し、計測高さ\n      // (行数 × fontSize × lineHeight) と実描画の行高さを一致させる (#846)。\n      // valign middle のためテキストブロックは枠内中央に配置され、\n      // Text のような描画 y 補正は不要\n      lineSpacing: pxToPt(fontSizePx * lineHeight),\n    });\n  } else {\n    // テキストがない場合：addShapeを使用\n    ctx.slide.addShape(node.shapeType, shapeOptions);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,SAAS,iBACP,MACA,SACyB;CACzB,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO;EACL,OAAO,QAAQ,SAAS,MAAM,SAAS;EACvC,OAAO,QAAQ,QAAQ,MAAM,SAAS;EACtC,UAAU,MAAM;CAClB;AACF;AAEA,SAAgB,gBACd,MACA,KACM;CACN,MAAM,WAAW,iBAAiB,KAAK,MAAM,KAAK,OAAO;CACzD,MAAM,aAAa,KAAK,OACpB,IAAI,aAAa,YAAY,SAAS,KAAK,IAAI,IAC/C,KAAA;CAEJ,MAAM,eAAe;EACnB,GAAG,iBAAiB,IAAI;EACxB,MAAM,KAAK,OACP;GACE,OAAO,KAAK,KAAK;GACjB,cAAc,KAAK,KAAK;EAC1B,IACA,KAAA;EACJ,MAAM,WAAW,kBAAkB,QAAQ,IAAI,KAAA;EAC/C,QAAQ,cAAc,KAAK,MAAM;EACjC,QAAQ,KAAK;EACb,YAAY;CACd;CAEA,IAAI,KAAK,MAAM;EACb,MAAM,aAAa,KAAK,YAAY;EACpC,MAAM,aAAa,KAAK,cAAc;EAEtC,IAAI,MAAM,QAAQ,KAAK,MAAM;GAC3B,GAAG;GACH,OAAO,KAAK;GACZ,UAAU,OAAO,UAAU;GAC3B,UAAU,KAAK,cAAc;GAC7B,OAAO,KAAK;GACZ,MAAM,KAAK;GACX,QAAQ,KAAK;GACb,WAAW,iBAAiB,KAAK,SAAS;GAC1C,QAAQ,cAAc,KAAK,MAAM;GACjC,WAAW,KAAK;GAChB,aAAa,KAAK;GAClB,WAAW,KAAK;GAChB,OAAO,KAAK,aAAa;GACzB,QAAQ;GAKR,aAAa,OAAO,aAAa,UAAU;EAC7C,CAAC;CACH,OAEE,IAAI,MAAM,SAAS,KAAK,WAAW,YAAY;AAEnD"}
+{"version":3,"file":"shape.js","names":[],"sources":["../../../src/renderPptx/nodes/shape.ts"],"sourcesContent":["import {\n  asEmu,\n  asHundredthPt,\n  asPt,\n  type AddShapeParagraphInput,\n  type AddShapeRunPropertiesInput,\n} from \"@pptx-glimpse/document\";\nimport type { BorderStyle, PositionedNode, Underline } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { pxToPt } from \"../units.ts\";\nimport { getContentArea } from \"../utils/contentArea.ts\";\nimport { pxToEmu } from \"../units.ts\";\nimport { toColorInput } from \"../glimpseTextBoxes.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  createShapeRotationInput,\n  noneShapeFill,\n  shapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\n\ntype ShapePositionedNode = Extract<PositionedNode, { type: \"shape\" }>;\n\n/**\n * outline (Text と同じ書式の `outline.size` / `outline.color`) と\n * 既存 `line` 属性 (`line.color` / `line.width` / `line.dashType`) を\n * 1 つの BorderStyle にマージする。\n *\n * フィールド単位のマージで、`outline` の指定があるフィールドは `line` を\n * 上書きするが、`outline` 側で省略されたフィールドは `line` の値を引き継ぎ、\n * `line` にも値が無い場合は Text outline と同じ既定値 (`width: 1pt 相当` /\n * `color: FFFFFF`) を採用する。`dashType` は `outline` に対応フィールドが\n * 無いため `line.dashType` をそのまま使う。\n */\nfunction resolveShapeLine(\n  line: BorderStyle | undefined,\n  outline: { size?: number; color?: string } | undefined,\n): BorderStyle | undefined {\n  if (!outline) return line;\n  return {\n    color: outline.color ?? line?.color ?? \"FFFFFF\",\n    width: outline.size ?? line?.width ?? 1,\n    dashType: line?.dashType,\n  };\n}\n\nfunction toUnderlineInput(underline: Underline | undefined) {\n  if (underline === undefined || underline === false) return undefined;\n  if (underline === true) return true;\n  return {\n    style: underline.style,\n    color: toColorInput(underline.color),\n  };\n}\n\nfunction buildShapeTextProperties(\n  node: ShapePositionedNode,\n): AddShapeRunPropertiesInput {\n  return {\n    fontFace: node.fontFamily ?? \"Noto Sans JP\",\n    fontSize: asPt(pxToPt(node.fontSize ?? 24)),\n    color: toColorInput(node.color),\n    bold: node.bold,\n    italic: node.italic,\n    underline: toUnderlineInput(node.underline),\n    strike: node.strike,\n    baseline: node.subscript\n      ? \"subscript\"\n      : node.superscript\n        ? \"superscript\"\n        : undefined,\n    highlight: toColorInput(node.highlight),\n  };\n}\n\nfunction buildShapeParagraphs(\n  node: ShapePositionedNode,\n): AddShapeParagraphInput[] | undefined {\n  if (!node.text) return undefined;\n  const fontSizePx = node.fontSize ?? 24;\n  const lineHeight = node.lineHeight ?? 1.3;\n  const properties = buildShapeTextProperties(node);\n  return node.text\n    .replace(/\\r*\\n/g, \"\\n\")\n    .split(\"\\n\")\n    .map((text) => ({\n      properties: {\n        align: node.textAlign ?? \"center\",\n        lineSpacing: asHundredthPt(\n          Math.round(pxToPt(fontSizePx * lineHeight) * 100),\n        ),\n      },\n      runs: [{ text, properties }],\n    }));\n}\n\nexport function renderShapeNode(\n  node: ShapePositionedNode,\n  ctx: RenderContext,\n): void {\n  const lineSpec = resolveShapeLine(node.line, node.outline);\n  const boundsPx = getContentArea(node);\n  const fillOpacity =\n    node.fill?.transparency !== undefined\n      ? 1 - node.fill.transparency / 100\n      : undefined;\n\n  addGlimpseShape(\n    ctx,\n    {\n      preset: node.shapeType,\n      ...createShapeBoundsInput(boundsPx),\n      rotation: createShapeRotationInput(node.rotate),\n      fill: node.fill?.color\n        ? solidShapeFill(node.fill.color)\n        : noneShapeFill(),\n      outline: shapeOutline(lineSpec),\n      effects: node.glow\n        ? {\n            glow: {\n              radius: asEmu(Math.round(pxToEmu(node.glow.size ?? 8))),\n              color: toColorInput(node.glow.color ?? \"FFFFFF\")!,\n            },\n          }\n        : undefined,\n      body: node.text\n        ? {\n            anchor: \"middle\",\n          }\n        : undefined,\n      paragraphs: buildShapeParagraphs(node),\n    },\n    boundsPx,\n    {\n      fillColor: node.fill?.color,\n      fillOpacity,\n      glow: node.glow,\n      shadow: node.shadow,\n      dashType: lineSpec?.dashType,\n    },\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,SAAS,iBACP,MACA,SACyB;CACzB,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO;EACL,OAAO,QAAQ,SAAS,MAAM,SAAS;EACvC,OAAO,QAAQ,QAAQ,MAAM,SAAS;EACtC,UAAU,MAAM;CAClB;AACF;AAEA,SAAS,iBAAiB,WAAkC;CAC1D,IAAI,cAAc,KAAA,KAAa,cAAc,OAAO,OAAO,KAAA;CAC3D,IAAI,cAAc,MAAM,OAAO;CAC/B,OAAO;EACL,OAAO,UAAU;EACjB,OAAO,aAAa,UAAU,KAAK;CACrC;AACF;AAEA,SAAS,yBACP,MAC4B;CAC5B,OAAO;EACL,UAAU,KAAK,cAAc;EAC7B,UAAU,KAAK,OAAO,KAAK,YAAY,EAAE,CAAC;EAC1C,OAAO,aAAa,KAAK,KAAK;EAC9B,MAAM,KAAK;EACX,QAAQ,KAAK;EACb,WAAW,iBAAiB,KAAK,SAAS;EAC1C,QAAQ,KAAK;EACb,UAAU,KAAK,YACX,cACA,KAAK,cACH,gBACA,KAAA;EACN,WAAW,aAAa,KAAK,SAAS;CACxC;AACF;AAEA,SAAS,qBACP,MACsC;CACtC,IAAI,CAAC,KAAK,MAAM,OAAO,KAAA;CACvB,MAAM,aAAa,KAAK,YAAY;CACpC,MAAM,aAAa,KAAK,cAAc;CACtC,MAAM,aAAa,yBAAyB,IAAI;CAChD,OAAO,KAAK,KACT,QAAQ,UAAU,IAAI,CAAC,CACvB,MAAM,IAAI,CAAC,CACX,KAAK,UAAU;EACd,YAAY;GACV,OAAO,KAAK,aAAa;GACzB,aAAa,cACX,KAAK,MAAM,OAAO,aAAa,UAAU,IAAI,GAAG,CAClD;EACF;EACA,MAAM,CAAC;GAAE;GAAM;EAAW,CAAC;CAC7B,EAAE;AACN;AAEA,SAAgB,gBACd,MACA,KACM;CACN,MAAM,WAAW,iBAAiB,KAAK,MAAM,KAAK,OAAO;CACzD,MAAM,WAAW,eAAe,IAAI;CACpC,MAAM,cACJ,KAAK,MAAM,iBAAiB,KAAA,IACxB,IAAI,KAAK,KAAK,eAAe,MAC7B,KAAA;CAEN,gBACE,KACA;EACE,QAAQ,KAAK;EACb,GAAG,uBAAuB,QAAQ;EAClC,UAAU,yBAAyB,KAAK,MAAM;EAC9C,MAAM,KAAK,MAAM,QACb,eAAe,KAAK,KAAK,KAAK,IAC9B,cAAc;EAClB,SAAS,aAAa,QAAQ;EAC9B,SAAS,KAAK,OACV,EACE,MAAM;GACJ,QAAQ,MAAM,KAAK,MAAM,QAAQ,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;GACtD,OAAO,aAAa,KAAK,KAAK,SAAS,QAAQ;EACjD,EACF,IACA,KAAA;EACJ,MAAM,KAAK,OACP,EACE,QAAQ,SACV,IACA,KAAA;EACJ,YAAY,qBAAqB,IAAI;CACvC,GACA,UACA;EACE,WAAW,KAAK,MAAM;EACtB;EACA,MAAM,KAAK;EACX,QAAQ,KAAK;EACb,UAAU,UAAU;CACtB,CACF;AACF"}

package/dist/renderPptx/nodes/svg.js

@@ -1,10 +1,7 @@
-import { rectPxToIn } from "../units.js";
+import { addGlimpsePicture, imageBytesFromSource } from "../utils/glimpsePicture.js";
 //#region src/renderPptx/nodes/svg.ts
 function renderSvgNode(node, ctx) {
-	ctx.slide.addImage({
-		data: node.iconImageData,
-		...rectPxToIn(node)
-	});
+	addGlimpsePicture(ctx, node, imageBytesFromSource("", node.iconImageData));
 }
 //#endregion
 export { renderSvgNode };

package/dist/renderPptx/nodes/svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg.js","names":[],"sources":["../../../src/renderPptx/nodes/svg.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { rectPxToIn } from \"../units.ts\";\n\ntype SvgPositionedNode = Extract<PositionedNode, { type: \"svg\" }>;\n\nexport function renderSvgNode(\n  node: SvgPositionedNode,\n  ctx: RenderContext,\n): void {\n  ctx.slide.addImage({\n    data: node.iconImageData,\n    ...rectPxToIn(node),\n  });\n}\n"],"mappings":";;AAMA,SAAgB,cACd,MACA,KACM;CACN,IAAI,MAAM,SAAS;EACjB,MAAM,KAAK;EACX,GAAG,WAAW,IAAI;CACpB,CAAC;AACH"}
+{"version":3,"file":"svg.js","names":[],"sources":["../../../src/renderPptx/nodes/svg.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport {\n  addGlimpsePicture,\n  imageBytesFromSource,\n} from \"../utils/glimpsePicture.ts\";\n\ntype SvgPositionedNode = Extract<PositionedNode, { type: \"svg\" }>;\n\nexport function renderSvgNode(\n  node: SvgPositionedNode,\n  ctx: RenderContext,\n): void {\n  addGlimpsePicture(ctx, node, imageBytesFromSource(\"\", node.iconImageData));\n}\n"],"mappings":";;AASA,SAAgB,cACd,MACA,KACM;CACN,kBAAkB,KAAK,MAAM,qBAAqB,IAAI,KAAK,aAAa,CAAC;AAC3E"}

package/dist/renderPptx/nodes/text.js

@@ -1,51 +1,22 @@
-import { pxToPt } from "../units.js";
-import { convertGlow, convertOutline, convertStrike, convertUnderline, createTextOptions, resolveSubSup } from "../textOptions.js";
-import { registerTextGradient } from "../gradientFills.js";
+import { createTextOptions } from "../textOptions.js";
 //#region src/renderPptx/nodes/text.ts
 function renderTextNode(node, ctx) {
 	const textOptions = createTextOptions(node);
-	const textGradientMarker = node.textGradient ? registerTextGradient(node.textGradient, ctx.buildContext.gradientFills) : void 0;
-	if (node.runs && node.runs.length > 0) {
-		const fontSizePx = node.fontSize ?? 24;
-		const fontFamily = node.fontFamily ?? "Noto Sans JP";
-		const textItems = node.runs.map((run) => {
-			const letterSpacingPx = run.letterSpacing ?? node.letterSpacing;
-			const runFontSizePx = run.fontSize ?? fontSizePx;
-			const subSup = resolveSubSup(run, node);
-			return {
-				text: run.text,
-				options: {
-					fontSize: pxToPt(runFontSizePx),
-					fontFace: run.fontFamily ?? fontFamily,
-					color: textGradientMarker ?? run.color ?? node.color,
-					bold: run.bold ?? node.bold,
-					italic: run.italic ?? node.italic,
-					underline: convertUnderline(run.underline ?? node.underline),
-					strike: convertStrike(run.strike ?? node.strike),
-					subscript: subSup.subscript,
-					superscript: subSup.superscript,
-					highlight: run.highlight ?? node.highlight,
-					glow: convertGlow(node.glow),
-					outline: convertOutline(node.outline),
-					charSpacing: letterSpacingPx !== void 0 ? pxToPt(letterSpacingPx) : void 0,
-					...run.href ? { hyperlink: { url: run.href } } : {}
-				}
-			};
-		});
-		ctx.slide.addText(textItems, {
-			x: textOptions.x,
-			y: textOptions.y,
-			w: textOptions.w,
-			h: textOptions.h,
-			rotate: textOptions.rotate,
-			align: textOptions.align,
-			valign: textOptions.valign,
-			margin: textOptions.margin,
-			lineSpacing: textOptions.lineSpacing
-		});
-	} else ctx.slide.addText(node.text ?? "", {
-		...textOptions,
-		color: textGradientMarker ?? textOptions.color
+	const marker = ctx.buildContext.glimpseTextBoxes.register(node);
+	ctx.slide.addShape(ctx.pptx.ShapeType.rect, {
+		x: textOptions.x,
+		y: textOptions.y,
+		w: textOptions.w,
+		h: textOptions.h,
+		fill: {
+			color: "FFFFFF",
+			transparency: 100
+		},
+		line: {
+			color: "FFFFFF",
+			transparency: 100
+		},
+		objectName: marker
 	});
 }
 //#endregion

package/dist/renderPptx/nodes/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../src/renderPptx/nodes/text.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport {\n  createTextOptions,\n  convertUnderline,\n  convertStrike,\n  convertGlow,\n  convertOutline,\n  resolveSubSup,\n} from \"../textOptions.ts\";\nimport { registerTextGradient } from \"../gradientFills.ts\";\nimport { pxToPt } from \"../units.ts\";\n\ntype TextPositionedNode = Extract<PositionedNode, { type: \"text\" }>;\n\nexport function renderTextNode(\n  node: TextPositionedNode,\n  ctx: RenderContext,\n): void {\n  const textOptions = createTextOptions(node);\n\n  // textGradient はマーカー色で text run color に適用し、\n  // 出力時の後処理で gradFill に置換される (gradientFills.ts 参照)。\n  // node 単位の指定として全 run の color を上書きする (run 単位指定はスコープ外)。\n  const textGradientMarker = node.textGradient\n    ? registerTextGradient(node.textGradient, ctx.buildContext.gradientFills)\n    : undefined;\n\n  if (node.runs && node.runs.length > 0) {\n    const fontSizePx = node.fontSize ?? 24;\n    const fontFamily = node.fontFamily ?? \"Noto Sans JP\";\n    const textItems = node.runs.map((run) => {\n      const letterSpacingPx = run.letterSpacing ?? node.letterSpacing;\n      const runFontSizePx = run.fontSize ?? fontSizePx;\n      const subSup = resolveSubSup(run, node);\n      return {\n        text: run.text,\n        options: {\n          fontSize: pxToPt(runFontSizePx),\n          fontFace: run.fontFamily ?? fontFamily,\n          color: textGradientMarker ?? run.color ?? node.color,\n          bold: run.bold ?? node.bold,\n          italic: run.italic ?? node.italic,\n          underline: convertUnderline(run.underline ?? node.underline),\n          strike: convertStrike(run.strike ?? node.strike),\n          subscript: subSup.subscript,\n          superscript: subSup.superscript,\n          highlight: run.highlight ?? node.highlight,\n          // glow / outline はノード単位指定のみ (run 単位はスコープ外)\n          glow: convertGlow(node.glow),\n          outline: convertOutline(node.outline),\n          charSpacing:\n            letterSpacingPx !== undefined ? pxToPt(letterSpacingPx) : undefined,\n          ...(run.href ? { hyperlink: { url: run.href } } : {}),\n        },\n      };\n    });\n    ctx.slide.addText(textItems, {\n      x: textOptions.x,\n      y: textOptions.y,\n      w: textOptions.w,\n      h: textOptions.h,\n      rotate: textOptions.rotate,\n      align: textOptions.align,\n      valign: textOptions.valign,\n      margin: textOptions.margin,\n      lineSpacing: textOptions.lineSpacing,\n    });\n  } else {\n    ctx.slide.addText(node.text ?? \"\", {\n      ...textOptions,\n      color: textGradientMarker ?? textOptions.color,\n    });\n  }\n}\n"],"mappings":";;;;AAeA,SAAgB,eACd,MACA,KACM;CACN,MAAM,cAAc,kBAAkB,IAAI;CAK1C,MAAM,qBAAqB,KAAK,eAC5B,qBAAqB,KAAK,cAAc,IAAI,aAAa,aAAa,IACtE,KAAA;CAEJ,IAAI,KAAK,QAAQ,KAAK,KAAK,SAAS,GAAG;EACrC,MAAM,aAAa,KAAK,YAAY;EACpC,MAAM,aAAa,KAAK,cAAc;EACtC,MAAM,YAAY,KAAK,KAAK,KAAK,QAAQ;GACvC,MAAM,kBAAkB,IAAI,iBAAiB,KAAK;GAClD,MAAM,gBAAgB,IAAI,YAAY;GACtC,MAAM,SAAS,cAAc,KAAK,IAAI;GACtC,OAAO;IACL,MAAM,IAAI;IACV,SAAS;KACP,UAAU,OAAO,aAAa;KAC9B,UAAU,IAAI,cAAc;KAC5B,OAAO,sBAAsB,IAAI,SAAS,KAAK;KAC/C,MAAM,IAAI,QAAQ,KAAK;KACvB,QAAQ,IAAI,UAAU,KAAK;KAC3B,WAAW,iBAAiB,IAAI,aAAa,KAAK,SAAS;KAC3D,QAAQ,cAAc,IAAI,UAAU,KAAK,MAAM;KAC/C,WAAW,OAAO;KAClB,aAAa,OAAO;KACpB,WAAW,IAAI,aAAa,KAAK;KAEjC,MAAM,YAAY,KAAK,IAAI;KAC3B,SAAS,eAAe,KAAK,OAAO;KACpC,aACE,oBAAoB,KAAA,IAAY,OAAO,eAAe,IAAI,KAAA;KAC5D,GAAI,IAAI,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,KAAK,EAAE,IAAI,CAAC;IACrD;GACF;EACF,CAAC;EACD,IAAI,MAAM,QAAQ,WAAW;GAC3B,GAAG,YAAY;GACf,GAAG,YAAY;GACf,GAAG,YAAY;GACf,GAAG,YAAY;GACf,QAAQ,YAAY;GACpB,OAAO,YAAY;GACnB,QAAQ,YAAY;GACpB,QAAQ,YAAY;GACpB,aAAa,YAAY;EAC3B,CAAC;CACH,OACE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;EACjC,GAAG;EACH,OAAO,sBAAsB,YAAY;CAC3C,CAAC;AAEL"}
+{"version":3,"file":"text.js","names":[],"sources":["../../../src/renderPptx/nodes/text.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { createTextOptions } from \"../textOptions.ts\";\n\ntype TextPositionedNode = Extract<PositionedNode, { type: \"text\" }>;\n\nexport function renderTextNode(\n  node: TextPositionedNode,\n  ctx: RenderContext,\n): void {\n  const textOptions = createTextOptions(node);\n  const marker = ctx.buildContext.glimpseTextBoxes.register(node);\n\n  ctx.slide.addShape(ctx.pptx.ShapeType.rect, {\n    x: textOptions.x,\n    y: textOptions.y,\n    w: textOptions.w,\n    h: textOptions.h,\n    fill: { color: \"FFFFFF\", transparency: 100 },\n    line: { color: \"FFFFFF\", transparency: 100 },\n    objectName: marker,\n  });\n}\n"],"mappings":";;AAMA,SAAgB,eACd,MACA,KACM;CACN,MAAM,cAAc,kBAAkB,IAAI;CAC1C,MAAM,SAAS,IAAI,aAAa,iBAAiB,SAAS,IAAI;CAE9D,IAAI,MAAM,SAAS,IAAI,KAAK,UAAU,MAAM;EAC1C,GAAG,YAAY;EACf,GAAG,YAAY;EACf,GAAG,YAAY;EACf,GAAG,YAAY;EACf,MAAM;GAAE,OAAO;GAAU,cAAc;EAAI;EAC3C,MAAM;GAAE,OAAO;GAAU,cAAc;EAAI;EAC3C,YAAY;CACd,CAAC;AACH"}