@hirokisakabe/pom 9.1.1 → 10.0.0

package/dist/renderPptx/nodes/flow.js

@@ -1,7 +1,9 @@
-import { pxToIn, pxToPt } from "../units.js";
 import { withContentBounds } from "../utils/contentArea.js";
-import { stripHash } from "../utils/visualStyle.js";
+import { addGlimpseTextBox, createGlimpseParagraphs } from "../utils/glimpseTextBox.js";
+import { addGlimpseShape, createShapeBoundsInput, shapeOutline, solidShapeFill } from "../utils/glimpseShape.js";
+import { addStraightLine } from "../utils/straightLine.js";
 import { measureFlow } from "../../calcYogaLayout/measureCompositeNodes.js";
+import { stripHash } from "../utils/visualStyle.js";
 import { resolveScaledContentArea } from "../utils/scaleToFit.js";
 //#region src/renderPptx/nodes/flow.ts
 function renderFlowNode(node, ctx) {
@@ -30,12 +32,14 @@ function renderFlowNode(node, ctx) {
 			const labelY = (fromLayout.y + fromLayout.height / 2 + toLayout.y + toLayout.height / 2) / 2;
 			const labelW = 60 * scaleFactor;
 			const labelH = 20 * scaleFactor;
-			ctx.slide.addText(conn.label, {
-				x: pxToIn(labelX - labelW / 2),
-				y: pxToIn(labelY - labelH / 2),
-				w: pxToIn(labelW),
-				h: pxToIn(labelH),
-				fontSize: pxToPt(10 * scaleFactor),
+			addGlimpseTextBox(ctx, {
+				x: labelX - labelW / 2,
+				y: labelY - labelH / 2,
+				w: labelW,
+				h: labelH
+			}, {
+				text: conn.label,
+				fontSize: 10 * scaleFactor,
 				fontFace: "Noto Sans JP",
 				color: stripHash(conn.labelColor) ?? stripHash(connectorStyle.labelColor) ?? "64748B",
 				align: "center",
@@ -48,23 +52,34 @@ function renderFlowNode(node, ctx) {
 		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 * scaleFactor)
+		addGlimpseShape(ctx, {
+			geometry: {
+				kind: "preset",
+				preset: item.shape
 			},
-			fontSize: pxToPt(14 * scaleFactor),
-			fontFace: "Noto Sans JP",
-			color: textColor,
-			align: "center",
-			valign: "middle"
-		});
+			...createShapeBoundsInput({
+				x: layout.x,
+				y: layout.y,
+				w: layout.width,
+				h: layout.height
+			}),
+			fill: solidShapeFill(fillColor),
+			outline: shapeOutline({
+				color: "333333",
+				width: 1 * scaleFactor
+			}),
+			body: { anchor: "middle" },
+			paragraphs: createGlimpseParagraphs(item.text, {
+				fontSize: 14 * scaleFactor,
+				fontFace: "Noto Sans JP",
+				color: textColor
+			}, { align: "center" })
+		}, {
+			x: layout.x,
+			y: layout.y,
+			w: layout.width,
+			h: layout.height
+		}, { fillColor });
 	}
 }
 function calculateHorizontalLayout(node, layouts, nodeCount, nodeWidth, nodeHeight, nodeGap, scaleFactor) {
@@ -116,16 +131,15 @@ function drawConnection(ctx, direction, fromLayout, toLayout, lineColor, lineWid
 	}
 	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
-		}
+	if (isHorizontalLine || isVerticalLine) addStraightLine(ctx, {
+		x1: startX,
+		y1: startY,
+		x2: endX,
+		y2: endY
+	}, {
+		color: lineColor,
+		lineWidth,
+		endArrow: { type: arrowType }
 	});
 	else drawLShapedConnection(ctx, direction, startX, startY, endX, endY, lineColor, lineWidth, arrowType);
 }
@@ -133,68 +147,62 @@ function drawLShapedConnection(ctx, direction, startX, startY, endX, endY, lineC
 	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)
-			}
+		addStraightLine(ctx, {
+			x1: startX,
+			y1: startY,
+			x2: midX,
+			y2: startY
+		}, {
+			color: lineColor,
+			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)
-			}
+		addStraightLine(ctx, {
+			x1: midX,
+			y1: startY,
+			x2: midX,
+			y2: endY
+		}, {
+			color: lineColor,
+			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
-			}
+		addStraightLine(ctx, {
+			x1: midX,
+			y1: endY,
+			x2: endX,
+			y2: endY
+		}, {
+			color: lineColor,
+			lineWidth,
+			endArrow: { type: 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)
-			}
+		addStraightLine(ctx, {
+			x1: startX,
+			y1: startY,
+			x2: startX,
+			y2: midY
+		}, {
+			color: lineColor,
+			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)
-			}
+		addStraightLine(ctx, {
+			x1: startX,
+			y1: midY,
+			x2: endX,
+			y2: midY
+		}, {
+			color: lineColor,
+			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
-			}
+		addStraightLine(ctx, {
+			x1: endX,
+			y1: midY,
+			x2: endX,
+			y2: endY
+		}, {
+			color: lineColor,
+			lineWidth,
+			endArrow: { type: arrowType }
 		});
 	}
 }

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

@@ -1 +1 @@
-{"version":3,"file":"flow.js","names":[],"sources":["../../../src/renderPptx/nodes/flow.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 { measureFlow } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport { withContentBounds } from \"../utils/contentArea.ts\";\n\ntype FlowPositionedNode = Extract<PositionedNode, { type: \"flow\" }>;\n\ninterface FlowNodeLayout {\n  id: string;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  item: FlowPositionedNode[\"nodes\"][0];\n}\n\nexport function renderFlowNode(\n  node: FlowPositionedNode,\n  ctx: RenderContext,\n): void {\n  const direction = node.direction ?? \"horizontal\";\n  const nodeWidth = node.nodeWidth ?? 120;\n  const nodeHeight = node.nodeHeight ?? 60;\n  const nodeGap = node.nodeGap ?? 80;\n  const connectorStyle = node.connectorStyle ?? {};\n  const defaultColor = \"1D4ED8\";\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measureFlow(node),\n    ctx,\n  );\n\n  const scaledNodeWidth = nodeWidth * scaleFactor;\n  const scaledNodeHeight = nodeHeight * scaleFactor;\n  const scaledNodeGap = nodeGap * scaleFactor;\n\n  const layouts = new Map<string, FlowNodeLayout>();\n  const nodeCount = node.nodes.length;\n\n  // コンテンツ領域を使用するための仮想ノードを作成\n  const contentNode = withContentBounds(node, content);\n\n  // ノードのレイアウトを計算\n  if (direction === \"horizontal\") {\n    calculateHorizontalLayout(\n      contentNode,\n      layouts,\n      nodeCount,\n      scaledNodeWidth,\n      scaledNodeHeight,\n      scaledNodeGap,\n      scaleFactor,\n    );\n  } else {\n    calculateVerticalLayout(\n      contentNode,\n      layouts,\n      nodeCount,\n      scaledNodeWidth,\n      scaledNodeHeight,\n      scaledNodeGap,\n      scaleFactor,\n    );\n  }\n\n  // 接続線を描画（ノードより先に描画して背面に配置）\n  for (const conn of node.connections) {\n    const fromLayout = layouts.get(conn.from);\n    const toLayout = layouts.get(conn.to);\n\n    if (!fromLayout || !toLayout) continue;\n\n    const lineColor = conn.color ?? connectorStyle.color ?? \"333333\";\n    const lineWidth = (connectorStyle.width ?? 2) * scaleFactor;\n    const arrowType = connectorStyle.arrowType ?? \"triangle\";\n\n    drawConnection(\n      ctx,\n      direction,\n      fromLayout,\n      toLayout,\n      lineColor,\n      lineWidth,\n      arrowType,\n    );\n\n    // ラベルを描画\n    if (conn.label) {\n      const labelX =\n        (fromLayout.x +\n          fromLayout.width / 2 +\n          toLayout.x +\n          toLayout.width / 2) /\n        2;\n      const labelY =\n        (fromLayout.y +\n          fromLayout.height / 2 +\n          toLayout.y +\n          toLayout.height / 2) /\n        2;\n\n      const labelW = 60 * scaleFactor;\n      const labelH = 20 * scaleFactor;\n\n      ctx.slide.addText(conn.label, {\n        x: pxToIn(labelX - labelW / 2),\n        y: pxToIn(labelY - labelH / 2),\n        w: pxToIn(labelW),\n        h: pxToIn(labelH),\n        fontSize: pxToPt(10 * scaleFactor),\n        fontFace: \"Noto Sans JP\",\n        color:\n          stripHash(conn.labelColor) ??\n          stripHash(connectorStyle.labelColor) ??\n          \"64748B\",\n        align: \"center\",\n        valign: \"middle\",\n      });\n    }\n  }\n\n  // ノードを描画\n  for (const item of node.nodes) {\n    const layout = layouts.get(item.id);\n    if (!layout) continue;\n\n    const fillColor = item.color ?? defaultColor;\n    const textColor = item.textColor ?? \"FFFFFF\";\n\n    // 図形を描画\n    ctx.slide.addText(item.text, {\n      x: pxToIn(layout.x),\n      y: pxToIn(layout.y),\n      w: pxToIn(layout.width),\n      h: pxToIn(layout.height),\n      shape: item.shape,\n      fill: { color: fillColor },\n      line: { color: \"333333\", width: pxToPt(1 * scaleFactor) },\n      fontSize: pxToPt(14 * scaleFactor),\n      fontFace: \"Noto Sans JP\",\n      color: textColor,\n      align: \"center\",\n      valign: \"middle\",\n    });\n  }\n}\n\nfunction calculateHorizontalLayout(\n  node: FlowPositionedNode,\n  layouts: Map<string, FlowNodeLayout>,\n  nodeCount: number,\n  nodeWidth: number,\n  nodeHeight: number,\n  nodeGap: number,\n  scaleFactor: number,\n): void {\n  const totalWidth = nodeCount * nodeWidth + (nodeCount - 1) * nodeGap;\n  const startX = node.x + (node.w - totalWidth) / 2;\n  const centerY = node.y + node.h / 2;\n\n  node.nodes.forEach((item, index) => {\n    const w = (item.width ?? nodeWidth / scaleFactor) * scaleFactor;\n    const h = (item.height ?? nodeHeight / scaleFactor) * scaleFactor;\n    layouts.set(item.id, {\n      id: item.id,\n      x: startX + index * (nodeWidth + nodeGap) + (nodeWidth - w) / 2,\n      y: centerY - h / 2,\n      width: w,\n      height: h,\n      item,\n    });\n  });\n}\n\nfunction calculateVerticalLayout(\n  node: FlowPositionedNode,\n  layouts: Map<string, FlowNodeLayout>,\n  nodeCount: number,\n  nodeWidth: number,\n  nodeHeight: number,\n  nodeGap: number,\n  scaleFactor: number,\n): void {\n  const totalHeight = nodeCount * nodeHeight + (nodeCount - 1) * nodeGap;\n  const startY = node.y + (node.h - totalHeight) / 2;\n  const centerX = node.x + node.w / 2;\n\n  node.nodes.forEach((item, index) => {\n    const w = (item.width ?? nodeWidth / scaleFactor) * scaleFactor;\n    const h = (item.height ?? nodeHeight / scaleFactor) * scaleFactor;\n    layouts.set(item.id, {\n      id: item.id,\n      x: centerX - w / 2,\n      y: startY + index * (nodeHeight + nodeGap) + (nodeHeight - h) / 2,\n      width: w,\n      height: h,\n      item,\n    });\n  });\n}\n\nfunction drawConnection(\n  ctx: RenderContext,\n  direction: \"horizontal\" | \"vertical\",\n  fromLayout: FlowNodeLayout,\n  toLayout: FlowNodeLayout,\n  lineColor: string,\n  lineWidth: number,\n  arrowType: \"none\" | \"arrow\" | \"diamond\" | \"oval\" | \"stealth\" | \"triangle\",\n): void {\n  let startX: number, startY: number, endX: number, endY: number;\n\n  if (direction === \"horizontal\") {\n    // 水平: 右端から左端へ\n    startX = fromLayout.x + fromLayout.width;\n    startY = fromLayout.y + fromLayout.height / 2;\n    endX = toLayout.x;\n    endY = toLayout.y + toLayout.height / 2;\n  } else {\n    // 垂直: 下端から上端へ\n    startX = fromLayout.x + fromLayout.width / 2;\n    startY = fromLayout.y + fromLayout.height;\n    endX = toLayout.x + toLayout.width / 2;\n    endY = toLayout.y;\n  }\n\n  // 直線接続（シンプルなケース）\n  const isHorizontalLine = Math.abs(startY - endY) < 1;\n  const isVerticalLine = Math.abs(startX - endX) < 1;\n\n  if (isHorizontalLine || isVerticalLine) {\n    // 直線で描画\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(Math.min(startX, endX)),\n      y: pxToIn(Math.min(startY, endY)),\n      w: pxToIn(Math.abs(endX - startX)),\n      h: pxToIn(Math.abs(endY - startY)),\n      line: {\n        color: lineColor,\n        width: pxToPt(lineWidth),\n        endArrowType: arrowType,\n      },\n    });\n  } else {\n    // L字型接続\n    drawLShapedConnection(\n      ctx,\n      direction,\n      startX,\n      startY,\n      endX,\n      endY,\n      lineColor,\n      lineWidth,\n      arrowType,\n    );\n  }\n}\n\nfunction drawLShapedConnection(\n  ctx: RenderContext,\n  direction: \"horizontal\" | \"vertical\",\n  startX: number,\n  startY: number,\n  endX: number,\n  endY: number,\n  lineColor: string,\n  lineWidth: number,\n  arrowType: \"none\" | \"arrow\" | \"diamond\" | \"oval\" | \"stealth\" | \"triangle\",\n): void {\n  const midX = (startX + endX) / 2;\n  const midY = (startY + endY) / 2;\n\n  if (direction === \"horizontal\") {\n    // 水平→垂直→水平\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(startX),\n      y: pxToIn(startY),\n      w: pxToIn(midX - startX),\n      h: 0,\n      line: { color: lineColor, width: pxToPt(lineWidth) },\n    });\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(midX),\n      y: pxToIn(Math.min(startY, endY)),\n      w: 0,\n      h: pxToIn(Math.abs(endY - startY)),\n      line: { color: lineColor, width: pxToPt(lineWidth) },\n    });\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(midX),\n      y: pxToIn(endY),\n      w: pxToIn(endX - midX),\n      h: 0,\n      line: {\n        color: lineColor,\n        width: pxToPt(lineWidth),\n        endArrowType: arrowType,\n      },\n    });\n  } else {\n    // 垂直→水平→垂直\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(startX),\n      y: pxToIn(startY),\n      w: 0,\n      h: pxToIn(midY - startY),\n      line: { color: lineColor, width: pxToPt(lineWidth) },\n    });\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(Math.min(startX, endX)),\n      y: pxToIn(midY),\n      w: pxToIn(Math.abs(endX - startX)),\n      h: 0,\n      line: { color: lineColor, width: pxToPt(lineWidth) },\n    });\n    ctx.slide.addShape(ctx.pptx.ShapeType.line, {\n      x: pxToIn(endX),\n      y: pxToIn(midY),\n      w: 0,\n      h: pxToIn(endY - midY),\n      line: {\n        color: lineColor,\n        width: pxToPt(lineWidth),\n        endArrowType: arrowType,\n      },\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"flow.js","names":[],"sources":["../../../src/renderPptx/nodes/flow.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { measureFlow } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport { withContentBounds } from \"../utils/contentArea.ts\";\nimport { addStraightLine } from \"../utils/straightLine.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  shapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\nimport {\n  createGlimpseParagraphs,\n  addGlimpseTextBox,\n} from \"../utils/glimpseTextBox.ts\";\n\ntype FlowPositionedNode = Extract<PositionedNode, { type: \"flow\" }>;\n\ninterface FlowNodeLayout {\n  id: string;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  item: FlowPositionedNode[\"nodes\"][0];\n}\n\nexport function renderFlowNode(\n  node: FlowPositionedNode,\n  ctx: RenderContext,\n): void {\n  const direction = node.direction ?? \"horizontal\";\n  const nodeWidth = node.nodeWidth ?? 120;\n  const nodeHeight = node.nodeHeight ?? 60;\n  const nodeGap = node.nodeGap ?? 80;\n  const connectorStyle = node.connectorStyle ?? {};\n  const defaultColor = \"1D4ED8\";\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measureFlow(node),\n    ctx,\n  );\n\n  const scaledNodeWidth = nodeWidth * scaleFactor;\n  const scaledNodeHeight = nodeHeight * scaleFactor;\n  const scaledNodeGap = nodeGap * scaleFactor;\n\n  const layouts = new Map<string, FlowNodeLayout>();\n  const nodeCount = node.nodes.length;\n\n  // コンテンツ領域を使用するための仮想ノードを作成\n  const contentNode = withContentBounds(node, content);\n\n  // ノードのレイアウトを計算\n  if (direction === \"horizontal\") {\n    calculateHorizontalLayout(\n      contentNode,\n      layouts,\n      nodeCount,\n      scaledNodeWidth,\n      scaledNodeHeight,\n      scaledNodeGap,\n      scaleFactor,\n    );\n  } else {\n    calculateVerticalLayout(\n      contentNode,\n      layouts,\n      nodeCount,\n      scaledNodeWidth,\n      scaledNodeHeight,\n      scaledNodeGap,\n      scaleFactor,\n    );\n  }\n\n  // 接続線を描画（ノードより先に描画して背面に配置）\n  for (const conn of node.connections) {\n    const fromLayout = layouts.get(conn.from);\n    const toLayout = layouts.get(conn.to);\n\n    if (!fromLayout || !toLayout) continue;\n\n    const lineColor = conn.color ?? connectorStyle.color ?? \"333333\";\n    const lineWidth = (connectorStyle.width ?? 2) * scaleFactor;\n    const arrowType = connectorStyle.arrowType ?? \"triangle\";\n\n    drawConnection(\n      ctx,\n      direction,\n      fromLayout,\n      toLayout,\n      lineColor,\n      lineWidth,\n      arrowType,\n    );\n\n    // ラベルを描画\n    if (conn.label) {\n      const labelX =\n        (fromLayout.x +\n          fromLayout.width / 2 +\n          toLayout.x +\n          toLayout.width / 2) /\n        2;\n      const labelY =\n        (fromLayout.y +\n          fromLayout.height / 2 +\n          toLayout.y +\n          toLayout.height / 2) /\n        2;\n\n      const labelW = 60 * scaleFactor;\n      const labelH = 20 * scaleFactor;\n\n      addGlimpseTextBox(\n        ctx,\n        {\n          x: labelX - labelW / 2,\n          y: labelY - labelH / 2,\n          w: labelW,\n          h: labelH,\n        },\n        {\n          text: conn.label,\n          fontSize: 10 * scaleFactor,\n          fontFace: \"Noto Sans JP\",\n          color:\n            stripHash(conn.labelColor) ??\n            stripHash(connectorStyle.labelColor) ??\n            \"64748B\",\n          align: \"center\",\n          valign: \"middle\",\n        },\n      );\n    }\n  }\n\n  // ノードを描画\n  for (const item of node.nodes) {\n    const layout = layouts.get(item.id);\n    if (!layout) continue;\n\n    const fillColor = item.color ?? defaultColor;\n    const textColor = item.textColor ?? \"FFFFFF\";\n\n    // 図形を描画\n    addGlimpseShape(\n      ctx,\n      {\n        geometry: { kind: \"preset\", preset: item.shape },\n        ...createShapeBoundsInput({\n          x: layout.x,\n          y: layout.y,\n          w: layout.width,\n          h: layout.height,\n        }),\n        fill: solidShapeFill(fillColor),\n        outline: shapeOutline({ color: \"333333\", width: 1 * scaleFactor }),\n        body: { anchor: \"middle\" },\n        paragraphs: createGlimpseParagraphs(\n          item.text,\n          {\n            fontSize: 14 * scaleFactor,\n            fontFace: \"Noto Sans JP\",\n            color: textColor,\n          },\n          { align: \"center\" },\n        ),\n      },\n      { x: layout.x, y: layout.y, w: layout.width, h: layout.height },\n      { fillColor },\n    );\n  }\n}\n\nfunction calculateHorizontalLayout(\n  node: FlowPositionedNode,\n  layouts: Map<string, FlowNodeLayout>,\n  nodeCount: number,\n  nodeWidth: number,\n  nodeHeight: number,\n  nodeGap: number,\n  scaleFactor: number,\n): void {\n  const totalWidth = nodeCount * nodeWidth + (nodeCount - 1) * nodeGap;\n  const startX = node.x + (node.w - totalWidth) / 2;\n  const centerY = node.y + node.h / 2;\n\n  node.nodes.forEach((item, index) => {\n    const w = (item.width ?? nodeWidth / scaleFactor) * scaleFactor;\n    const h = (item.height ?? nodeHeight / scaleFactor) * scaleFactor;\n    layouts.set(item.id, {\n      id: item.id,\n      x: startX + index * (nodeWidth + nodeGap) + (nodeWidth - w) / 2,\n      y: centerY - h / 2,\n      width: w,\n      height: h,\n      item,\n    });\n  });\n}\n\nfunction calculateVerticalLayout(\n  node: FlowPositionedNode,\n  layouts: Map<string, FlowNodeLayout>,\n  nodeCount: number,\n  nodeWidth: number,\n  nodeHeight: number,\n  nodeGap: number,\n  scaleFactor: number,\n): void {\n  const totalHeight = nodeCount * nodeHeight + (nodeCount - 1) * nodeGap;\n  const startY = node.y + (node.h - totalHeight) / 2;\n  const centerX = node.x + node.w / 2;\n\n  node.nodes.forEach((item, index) => {\n    const w = (item.width ?? nodeWidth / scaleFactor) * scaleFactor;\n    const h = (item.height ?? nodeHeight / scaleFactor) * scaleFactor;\n    layouts.set(item.id, {\n      id: item.id,\n      x: centerX - w / 2,\n      y: startY + index * (nodeHeight + nodeGap) + (nodeHeight - h) / 2,\n      width: w,\n      height: h,\n      item,\n    });\n  });\n}\n\nfunction drawConnection(\n  ctx: RenderContext,\n  direction: \"horizontal\" | \"vertical\",\n  fromLayout: FlowNodeLayout,\n  toLayout: FlowNodeLayout,\n  lineColor: string,\n  lineWidth: number,\n  arrowType: \"none\" | \"arrow\" | \"diamond\" | \"oval\" | \"stealth\" | \"triangle\",\n): void {\n  let startX: number, startY: number, endX: number, endY: number;\n\n  if (direction === \"horizontal\") {\n    // 水平: 右端から左端へ\n    startX = fromLayout.x + fromLayout.width;\n    startY = fromLayout.y + fromLayout.height / 2;\n    endX = toLayout.x;\n    endY = toLayout.y + toLayout.height / 2;\n  } else {\n    // 垂直: 下端から上端へ\n    startX = fromLayout.x + fromLayout.width / 2;\n    startY = fromLayout.y + fromLayout.height;\n    endX = toLayout.x + toLayout.width / 2;\n    endY = toLayout.y;\n  }\n\n  // 直線接続（シンプルなケース）\n  const isHorizontalLine = Math.abs(startY - endY) < 1;\n  const isVerticalLine = Math.abs(startX - endX) < 1;\n\n  if (isHorizontalLine || isVerticalLine) {\n    // 直線で描画\n    addStraightLine(\n      ctx,\n      { x1: startX, y1: startY, x2: endX, y2: endY },\n      { color: lineColor, lineWidth, endArrow: { type: arrowType } },\n    );\n  } else {\n    // L字型接続\n    drawLShapedConnection(\n      ctx,\n      direction,\n      startX,\n      startY,\n      endX,\n      endY,\n      lineColor,\n      lineWidth,\n      arrowType,\n    );\n  }\n}\n\nfunction drawLShapedConnection(\n  ctx: RenderContext,\n  direction: \"horizontal\" | \"vertical\",\n  startX: number,\n  startY: number,\n  endX: number,\n  endY: number,\n  lineColor: string,\n  lineWidth: number,\n  arrowType: \"none\" | \"arrow\" | \"diamond\" | \"oval\" | \"stealth\" | \"triangle\",\n): void {\n  const midX = (startX + endX) / 2;\n  const midY = (startY + endY) / 2;\n\n  if (direction === \"horizontal\") {\n    // 水平→垂直→水平\n    addStraightLine(\n      ctx,\n      { x1: startX, y1: startY, x2: midX, y2: startY },\n      { color: lineColor, lineWidth },\n    );\n    addStraightLine(\n      ctx,\n      { x1: midX, y1: startY, x2: midX, y2: endY },\n      { color: lineColor, lineWidth },\n    );\n    addStraightLine(\n      ctx,\n      { x1: midX, y1: endY, x2: endX, y2: endY },\n      { color: lineColor, lineWidth, endArrow: { type: arrowType } },\n    );\n  } else {\n    // 垂直→水平→垂直\n    addStraightLine(\n      ctx,\n      { x1: startX, y1: startY, x2: startX, y2: midY },\n      { color: lineColor, lineWidth },\n    );\n    addStraightLine(\n      ctx,\n      { x1: startX, y1: midY, x2: endX, y2: midY },\n      { color: lineColor, lineWidth },\n    );\n    addStraightLine(\n      ctx,\n      { x1: endX, y1: midY, x2: endX, y2: endY },\n      { color: lineColor, lineWidth, endArrow: { type: arrowType } },\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/renderPptx/nodes/icon.js

@@ -1,4 +1,8 @@
-import { pxToIn, pxToPt } from "../units.js";
+import { pxToEmu } from "../units.js";
+import { toColorInput } from "../pptxAuthoring.js";
+import { addGlimpsePicture, imageBytesFromSource } from "../utils/glimpsePicture.js";
+import { addGlimpseShape, createShapeBoundsInput, createShapeRotationInput, noShapeOutline, noneShapeFill, shapeOutline, solidShapeFill } from "../utils/glimpseShape.js";
+import { asEmu } from "@pptx-glimpse/document";
 //#region src/renderPptx/nodes/icon.ts
 function renderIconNode(node, ctx) {
 	if (node.variant) {
@@ -7,35 +11,43 @@ function renderIconNode(node, ctx) {
 		const colorValue = (node.bgColor ?? "#E0E0E0").replace(/^#/, "");
 		const variantDefaultLine = isFilled ? void 0 : {
 			color: colorValue,
-			width: 1.5
+			width: 2
 		};
 		const outlineLine = node.outline ? {
 			color: node.outline.color ?? variantDefaultLine?.color ?? "FFFFFF",
-			width: node.outline.size !== void 0 ? pxToPt(node.outline.size) : variantDefaultLine?.width ?? 1
+			width: node.outline.size !== void 0 ? node.outline.size : variantDefaultLine?.width ?? 1
 		} : variantDefaultLine;
-		const glowMarker = node.glow ? ctx.buildContext.glowEffects.register(node.glow) : void 0;
-		const shapeType = isCircle ? "ellipse" : "roundRect";
-		const shapeOptions = {
-			x: pxToIn(node.bgX ?? node.x),
-			y: pxToIn(node.bgY ?? node.y),
-			w: pxToIn(node.bgW ?? node.w),
-			h: pxToIn(node.bgH ?? node.h),
-			fill: isFilled ? { color: colorValue } : { type: "none" },
-			line: outlineLine,
-			rectRadius: isCircle ? void 0 : .1,
-			rotate: node.rotate,
-			objectName: glowMarker
+		const bounds = {
+			x: node.bgX ?? node.x,
+			y: node.bgY ?? node.y,
+			w: node.bgW ?? node.w,
+			h: node.bgH ?? node.h
 		};
-		ctx.slide.addShape(shapeType, shapeOptions);
+		addGlimpseShape(ctx, {
+			geometry: {
+				kind: "preset",
+				preset: isCircle ? "ellipse" : "roundRect"
+			},
+			...createShapeBoundsInput(bounds),
+			rotation: createShapeRotationInput(node.rotate),
+			fill: isFilled ? solidShapeFill(colorValue) : noneShapeFill(),
+			outline: outlineLine ? shapeOutline(outlineLine) : noShapeOutline(),
+			effects: node.glow ? { glow: {
+				radius: asEmu(Math.round(pxToEmu(node.glow.size ?? 8))),
+				color: toColorInput(node.glow.color ?? "FFFFFF")
+			} } : void 0
+		}, bounds, {
+			fillColor: isFilled ? colorValue : void 0,
+			glow: node.glow,
+			rectRadius: isCircle ? void 0 : .1
+		});
 	}
-	ctx.slide.addImage({
-		data: node.iconImageData,
-		x: pxToIn(node.iconX ?? node.x),
-		y: pxToIn(node.iconY ?? node.y),
-		w: pxToIn(node.iconW ?? node.w),
-		h: pxToIn(node.iconH ?? node.h),
-		rotate: node.rotate
-	});
+	addGlimpsePicture(ctx, {
+		x: node.iconX ?? node.x,
+		y: node.iconY ?? node.y,
+		w: node.iconW ?? node.w,
+		h: node.iconH ?? node.h
+	}, imageBytesFromSource("", node.iconImageData), { rotate: node.rotate });
 }
 //#endregion
 export { renderIconNode };

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../src/renderPptx/nodes/icon.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { pxToIn, pxToPt } from \"../units.ts\";\n\ntype IconPositionedNode = Extract<PositionedNode, { type: \"icon\" }>;\n\nexport function renderIconNode(\n  node: IconPositionedNode,\n  ctx: RenderContext,\n): void {\n  // variant 指定時は背景図形を描画\n  if (node.variant) {\n    const isCircle = node.variant.startsWith(\"circle\");\n    const isFilled = node.variant.endsWith(\"-filled\");\n    const bgColor = node.bgColor ?? \"#E0E0E0\";\n    const colorValue = bgColor.replace(/^#/, \"\");\n\n    // 背景図形の line のデフォルト: outlined variant は colorValue / 1.5pt、\n    // filled variant は undefined (枠線なし)。\n    const variantDefaultLine = isFilled\n      ? undefined\n      : { color: colorValue, width: 1.5 };\n    // outline 指定時は variant のデフォルト line とフィールド単位でマージする。\n    // outline 側で省略された属性は variant default の値を引き継ぐので、例えば\n    // outlined variant に `outline.color` だけ指定すると、太さは 1.5pt のまま\n    // 色だけ outline で上書きされる。\n    const outlineLine = node.outline\n      ? {\n          color: node.outline.color ?? variantDefaultLine?.color ?? \"FFFFFF\",\n          width:\n            node.outline.size !== undefined\n              ? pxToPt(node.outline.size)\n              : (variantDefaultLine?.width ?? 1),\n        }\n      : variantDefaultLine;\n\n    const glowMarker = node.glow\n      ? ctx.buildContext.glowEffects.register(node.glow)\n      : undefined;\n\n    const shapeType = isCircle ? \"ellipse\" : \"roundRect\";\n    const shapeOptions: Record<string, unknown> = {\n      x: pxToIn(node.bgX ?? node.x),\n      y: pxToIn(node.bgY ?? node.y),\n      w: pxToIn(node.bgW ?? node.w),\n      h: pxToIn(node.bgH ?? node.h),\n      fill: isFilled ? { color: colorValue } : { type: \"none\" as const },\n      line: outlineLine,\n      rectRadius: isCircle ? undefined : 0.1,\n      rotate: node.rotate,\n      objectName: glowMarker,\n    };\n\n    ctx.slide.addShape(shapeType, shapeOptions);\n  }\n\n  ctx.slide.addImage({\n    data: node.iconImageData,\n    x: pxToIn(node.iconX ?? node.x),\n    y: pxToIn(node.iconY ?? node.y),\n    w: pxToIn(node.iconW ?? node.w),\n    h: pxToIn(node.iconH ?? node.h),\n    rotate: node.rotate,\n  });\n}\n"],"mappings":";;AAMA,SAAgB,eACd,MACA,KACM;CAEN,IAAI,KAAK,SAAS;EAChB,MAAM,WAAW,KAAK,QAAQ,WAAW,QAAQ;EACjD,MAAM,WAAW,KAAK,QAAQ,SAAS,SAAS;EAEhD,MAAM,cADU,KAAK,WAAW,UAAA,CACL,QAAQ,MAAM,EAAE;EAI3C,MAAM,qBAAqB,WACvB,KAAA,IACA;GAAE,OAAO;GAAY,OAAO;EAAI;EAKpC,MAAM,cAAc,KAAK,UACrB;GACE,OAAO,KAAK,QAAQ,SAAS,oBAAoB,SAAS;GAC1D,OACE,KAAK,QAAQ,SAAS,KAAA,IAClB,OAAO,KAAK,QAAQ,IAAI,IACvB,oBAAoB,SAAS;EACtC,IACA;EAEJ,MAAM,aAAa,KAAK,OACpB,IAAI,aAAa,YAAY,SAAS,KAAK,IAAI,IAC/C,KAAA;EAEJ,MAAM,YAAY,WAAW,YAAY;EACzC,MAAM,eAAwC;GAC5C,GAAG,OAAO,KAAK,OAAO,KAAK,CAAC;GAC5B,GAAG,OAAO,KAAK,OAAO,KAAK,CAAC;GAC5B,GAAG,OAAO,KAAK,OAAO,KAAK,CAAC;GAC5B,GAAG,OAAO,KAAK,OAAO,KAAK,CAAC;GAC5B,MAAM,WAAW,EAAE,OAAO,WAAW,IAAI,EAAE,MAAM,OAAgB;GACjE,MAAM;GACN,YAAY,WAAW,KAAA,IAAY;GACnC,QAAQ,KAAK;GACb,YAAY;EACd;EAEA,IAAI,MAAM,SAAS,WAAW,YAAY;CAC5C;CAEA,IAAI,MAAM,SAAS;EACjB,MAAM,KAAK;EACX,GAAG,OAAO,KAAK,SAAS,KAAK,CAAC;EAC9B,GAAG,OAAO,KAAK,SAAS,KAAK,CAAC;EAC9B,GAAG,OAAO,KAAK,SAAS,KAAK,CAAC;EAC9B,GAAG,OAAO,KAAK,SAAS,KAAK,CAAC;EAC9B,QAAQ,KAAK;CACf,CAAC;AACH"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../src/renderPptx/nodes/icon.ts"],"sourcesContent":["import { asEmu } from \"@pptx-glimpse/document\";\nimport type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { toColorInput } from \"../pptxAuthoring.ts\";\nimport { pxToEmu } from \"../units.ts\";\nimport {\n  addGlimpsePicture,\n  imageBytesFromSource,\n} from \"../utils/glimpsePicture.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  createShapeRotationInput,\n  noShapeOutline,\n  noneShapeFill,\n  shapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\n\ntype IconPositionedNode = Extract<PositionedNode, { type: \"icon\" }>;\n\nexport function renderIconNode(\n  node: IconPositionedNode,\n  ctx: RenderContext,\n): void {\n  // variant 指定時は背景図形を描画\n  if (node.variant) {\n    const isCircle = node.variant.startsWith(\"circle\");\n    const isFilled = node.variant.endsWith(\"-filled\");\n    const bgColor = node.bgColor ?? \"#E0E0E0\";\n    const colorValue = bgColor.replace(/^#/, \"\");\n\n    // 背景図形の line のデフォルト: outlined variant は colorValue / 1.5pt 相当 (2px)、\n    // filled variant は undefined (枠線なし)。\n    const variantDefaultLine = isFilled\n      ? undefined\n      : { color: colorValue, width: 2 };\n    // outline 指定時は variant のデフォルト line とフィールド単位でマージする。\n    // outline 側で省略された属性は variant default の値を引き継ぐので、例えば\n    // outlined variant に `outline.color` だけ指定すると、太さは 1.5pt のまま\n    // 色だけ outline で上書きされる。\n    const outlineLine = node.outline\n      ? {\n          color: node.outline.color ?? variantDefaultLine?.color ?? \"FFFFFF\",\n          width:\n            node.outline.size !== undefined\n              ? node.outline.size\n              : (variantDefaultLine?.width ?? 1),\n        }\n      : variantDefaultLine;\n\n    const bounds = {\n      x: node.bgX ?? node.x,\n      y: node.bgY ?? node.y,\n      w: node.bgW ?? node.w,\n      h: node.bgH ?? node.h,\n    };\n    const shapeType = isCircle ? \"ellipse\" : \"roundRect\";\n\n    addGlimpseShape(\n      ctx,\n      {\n        geometry: { kind: \"preset\", preset: shapeType },\n        ...createShapeBoundsInput(bounds),\n        rotation: createShapeRotationInput(node.rotate),\n        fill: isFilled ? solidShapeFill(colorValue) : noneShapeFill(),\n        outline: outlineLine ? shapeOutline(outlineLine) : noShapeOutline(),\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      },\n      bounds,\n      {\n        fillColor: isFilled ? colorValue : undefined,\n        glow: node.glow,\n        rectRadius: isCircle ? undefined : 0.1,\n      },\n    );\n  }\n\n  addGlimpsePicture(\n    ctx,\n    {\n      x: node.iconX ?? node.x,\n      y: node.iconY ?? node.y,\n      w: node.iconW ?? node.w,\n      h: node.iconH ?? node.h,\n    },\n    imageBytesFromSource(\"\", node.iconImageData),\n    { rotate: node.rotate },\n  );\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,eACd,MACA,KACM;CAEN,IAAI,KAAK,SAAS;EAChB,MAAM,WAAW,KAAK,QAAQ,WAAW,QAAQ;EACjD,MAAM,WAAW,KAAK,QAAQ,SAAS,SAAS;EAEhD,MAAM,cADU,KAAK,WAAW,UAAA,CACL,QAAQ,MAAM,EAAE;EAI3C,MAAM,qBAAqB,WACvB,KAAA,IACA;GAAE,OAAO;GAAY,OAAO;EAAE;EAKlC,MAAM,cAAc,KAAK,UACrB;GACE,OAAO,KAAK,QAAQ,SAAS,oBAAoB,SAAS;GAC1D,OACE,KAAK,QAAQ,SAAS,KAAA,IAClB,KAAK,QAAQ,OACZ,oBAAoB,SAAS;EACtC,IACA;EAEJ,MAAM,SAAS;GACb,GAAG,KAAK,OAAO,KAAK;GACpB,GAAG,KAAK,OAAO,KAAK;GACpB,GAAG,KAAK,OAAO,KAAK;GACpB,GAAG,KAAK,OAAO,KAAK;EACtB;EAGA,gBACE,KACA;GACE,UAAU;IAAE,MAAM;IAAU,QALd,WAAW,YAAY;GAKS;GAC9C,GAAG,uBAAuB,MAAM;GAChC,UAAU,yBAAyB,KAAK,MAAM;GAC9C,MAAM,WAAW,eAAe,UAAU,IAAI,cAAc;GAC5D,SAAS,cAAc,aAAa,WAAW,IAAI,eAAe;GAClE,SAAS,KAAK,OACV,EACE,MAAM;IACJ,QAAQ,MAAM,KAAK,MAAM,QAAQ,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;IACtD,OAAO,aAAa,KAAK,KAAK,SAAS,QAAQ;GACjD,EACF,IACA,KAAA;EACN,GACA,QACA;GACE,WAAW,WAAW,aAAa,KAAA;GACnC,MAAM,KAAK;GACX,YAAY,WAAW,KAAA,IAAY;EACrC,CACF;CACF;CAEA,kBACE,KACA;EACE,GAAG,KAAK,SAAS,KAAK;EACtB,GAAG,KAAK,SAAS,KAAK;EACtB,GAAG,KAAK,SAAS,KAAK;EACtB,GAAG,KAAK,SAAS,KAAK;CACxB,GACA,qBAAqB,IAAI,KAAK,aAAa,GAC3C,EAAE,QAAQ,KAAK,OAAO,CACxB;AACF"}

package/dist/renderPptx/nodes/image.js

@@ -1,28 +1,11 @@
-import { pxToIn, rectPxToIn } from "../units.js";
 import { getContentArea } from "../utils/contentArea.js";
-import { convertShadow } from "../utils/visualStyle.js";
+import { addGlimpsePicture, imageBytesFromSource } from "../utils/glimpsePicture.js";
 //#region src/renderPptx/nodes/image.ts
 function renderImageNode(node, ctx) {
-	const content = getContentArea(node);
-	const imageOptions = {
-		...rectPxToIn(content),
-		shadow: convertShadow(node.shadow),
-		rotate: node.rotate
-	};
-	if (node.sizing) imageOptions.sizing = {
-		type: node.sizing.type,
-		w: pxToIn(node.sizing.w ?? content.w),
-		h: pxToIn(node.sizing.h ?? content.h),
-		...node.sizing.x !== void 0 && { x: pxToIn(node.sizing.x) },
-		...node.sizing.y !== void 0 && { y: pxToIn(node.sizing.y) }
-	};
-	if (node.imageData) ctx.slide.addImage({
-		...imageOptions,
-		data: node.imageData
-	});
-	else ctx.slide.addImage({
-		...imageOptions,
-		path: node.src
+	addGlimpsePicture(ctx, getContentArea(node), imageBytesFromSource(node.src, node.imageData), {
+		rotate: node.rotate,
+		sizing: node.sizing,
+		shadow: node.shadow
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":[],"sources":["../../../src/renderPptx/nodes/image.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { pxToIn, rectPxToIn } from \"../units.ts\";\nimport { getContentArea } from \"../utils/contentArea.ts\";\nimport { convertShadow } from \"../utils/visualStyle.ts\";\n\ntype ImagePositionedNode = Extract<PositionedNode, { type: \"image\" }>;\n\nexport function renderImageNode(\n  node: ImagePositionedNode,\n  ctx: RenderContext,\n): void {\n  const content = getContentArea(node);\n  const imageOptions: Record<string, unknown> = {\n    ...rectPxToIn(content),\n    shadow: convertShadow(node.shadow),\n    rotate: node.rotate,\n  };\n\n  if (node.sizing) {\n    imageOptions.sizing = {\n      type: node.sizing.type,\n      w: pxToIn(node.sizing.w ?? content.w),\n      h: pxToIn(node.sizing.h ?? content.h),\n      ...(node.sizing.x !== undefined && { x: pxToIn(node.sizing.x) }),\n      ...(node.sizing.y !== undefined && { y: pxToIn(node.sizing.y) }),\n    };\n  }\n\n  if (node.imageData) {\n    // Base64 データがある場合は data プロパティを使用（リモート画像）\n    ctx.slide.addImage({ ...imageOptions, data: node.imageData });\n  } else {\n    // ローカルパスの場合は path プロパティを使用\n    ctx.slide.addImage({ ...imageOptions, path: node.src });\n  }\n}\n"],"mappings":";;;;AAQA,SAAgB,gBACd,MACA,KACM;CACN,MAAM,UAAU,eAAe,IAAI;CACnC,MAAM,eAAwC;EAC5C,GAAG,WAAW,OAAO;EACrB,QAAQ,cAAc,KAAK,MAAM;EACjC,QAAQ,KAAK;CACf;CAEA,IAAI,KAAK,QACP,aAAa,SAAS;EACpB,MAAM,KAAK,OAAO;EAClB,GAAG,OAAO,KAAK,OAAO,KAAK,QAAQ,CAAC;EACpC,GAAG,OAAO,KAAK,OAAO,KAAK,QAAQ,CAAC;EACpC,GAAI,KAAK,OAAO,MAAM,KAAA,KAAa,EAAE,GAAG,OAAO,KAAK,OAAO,CAAC,EAAE;EAC9D,GAAI,KAAK,OAAO,MAAM,KAAA,KAAa,EAAE,GAAG,OAAO,KAAK,OAAO,CAAC,EAAE;CAChE;CAGF,IAAI,KAAK,WAEP,IAAI,MAAM,SAAS;EAAE,GAAG;EAAc,MAAM,KAAK;CAAU,CAAC;MAG5D,IAAI,MAAM,SAAS;EAAE,GAAG;EAAc,MAAM,KAAK;CAAI,CAAC;AAE1D"}
+{"version":3,"file":"image.js","names":[],"sources":["../../../src/renderPptx/nodes/image.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { getContentArea } from \"../utils/contentArea.ts\";\nimport {\n  addGlimpsePicture,\n  imageBytesFromSource,\n} from \"../utils/glimpsePicture.ts\";\n\ntype ImagePositionedNode = Extract<PositionedNode, { type: \"image\" }>;\n\nexport function renderImageNode(\n  node: ImagePositionedNode,\n  ctx: RenderContext,\n): void {\n  const content = getContentArea(node);\n  addGlimpsePicture(\n    ctx,\n    content,\n    imageBytesFromSource(node.src, node.imageData),\n    {\n      rotate: node.rotate,\n      sizing: node.sizing,\n      shadow: node.shadow,\n    },\n  );\n}\n"],"mappings":";;;AAUA,SAAgB,gBACd,MACA,KACM;CAEN,kBACE,KAFc,eAAe,IAGvB,GACN,qBAAqB,KAAK,KAAK,KAAK,SAAS,GAC7C;EACE,QAAQ,KAAK;EACb,QAAQ,KAAK;EACb,QAAQ,KAAK;CACf,CACF;AACF"}