@hirokisakabe/pom 9.1.2 → 10.1.0

package/dist/renderPptx/nodes/chart.js

@@ -1,60 +1,185 @@
-import { getContentAreaIn } from "../utils/contentArea.js";
+import { pxToEmu } from "../units.js";
+import { getContentArea } from "../utils/contentArea.js";
+import { toColorInput } from "../pptxAuthoring.js";
+import { asEmu, asOoxmlPercent, asPt } from "@pptx-glimpse/document";
 //#region src/renderPptx/nodes/chart.ts
+const DEFAULT_BAR_CHART_COLORS = [
+	"C0504D",
+	"4F81BD",
+	"9BBB59",
+	"8064A2",
+	"4BACC6",
+	"F79646",
+	"628FC6",
+	"C86360",
+	"C0504D",
+	"4F81BD",
+	"9BBB59",
+	"8064A2",
+	"4BACC6",
+	"F79646",
+	"628FC6",
+	"C86360"
+];
+const DEFAULT_PIE_CHART_COLORS = [
+	"5DA5DA",
+	"FAA43A",
+	"60BD68",
+	"F17CB0",
+	"B2912F",
+	"B276B2",
+	"DECF3F",
+	"F15854",
+	"A7A7A7",
+	"5DA5DA",
+	"FAA43A",
+	"60BD68",
+	"F17CB0",
+	"B2912F",
+	"B276B2",
+	"DECF3F",
+	"F15854",
+	"A7A7A7"
+];
 function renderChartNode(node, ctx) {
-	const chartData = node.data.map((d) => ({
-		name: d.name,
-		labels: d.labels,
-		values: d.values
-	}));
 	const isSparkline = node.sparkline === true && (node.chartType === "bar" || node.chartType === "line" || node.chartType === "area");
-	const chartOptions = {
-		...getContentAreaIn(node),
+	const content = getContentArea(node);
+	const series = normalizeChartSeries(node.data);
+	const chartColors = node.chartColors ?? (node.chartType === "pie" || node.chartType === "doughnut" ? DEFAULT_PIE_CHART_COLORS : DEFAULT_BAR_CHART_COLORS);
+	const pointColors = chartColors.length > 0 && (node.chartType === "pie" || node.chartType === "doughnut" || node.chartType === "bar" && node.data.length === 1 && node.chartColors !== void 0 && node.chartColors.length > 1) ? node.data[0]?.values.map((_value, index) => chartColors[index % chartColors.length]) : void 0;
+	ctx.buildContext.pptxAuthoring.registerChart({
+		chartType: node.chartType,
+		series: series.map((item, index) => ({
+			name: item.name,
+			categories: item.labels,
+			values: item.values,
+			color: chartColors[index % chartColors.length],
+			dataPoints: index === 0 ? pointColors?.map((color, pointIndex) => ({
+				index: pointIndex,
+				fill: {
+					kind: "solid",
+					color: toColorInput(color)
+				}
+			})) : void 0,
+			marker: node.chartType === "line" || node.chartType === "radar" ? {
+				symbol: "circle",
+				size: 6,
+				fill: {
+					kind: "solid",
+					color: toColorInput(chartColors[index % chartColors.length])
+				}
+			} : void 0
+		})),
+		offsetX: asEmu(Math.round(pxToEmu(content.x))),
+		offsetY: asEmu(Math.round(pxToEmu(content.y))),
+		width: asEmu(Math.round(pxToEmu(Math.max(content.w, 1)))),
+		height: asEmu(Math.round(pxToEmu(Math.max(content.h, 1)))),
+		title: !isSparkline && node.showTitle ? node.title || "Chart Title" : void 0,
+		titleStyle: !isSparkline && node.showTitle ? {
+			fontFace: "Arial",
+			fontSize: asPt(18),
+			color: toColorInput("000000"),
+			bold: false,
+			italic: false
+		} : void 0,
+		displayBlanksAs: "span",
+		roundedCorners: !isSparkline,
+		chartArea: isSparkline ? { fill: {
+			kind: "solid",
+			color: {
+				...toColorInput("FFFFFF"),
+				transforms: [{
+					kind: "alpha",
+					value: asOoxmlPercent(0)
+				}]
+			}
+		} } : {
+			fill: { kind: "none" },
+			outline: { fill: { kind: "none" } }
+		},
+		plotArea: isSparkline ? { fill: {
+			kind: "solid",
+			color: {
+				...toColorInput("FFFFFF"),
+				transforms: [{
+					kind: "alpha",
+					value: asOoxmlPercent(0)
+				}]
+			}
+		} } : {
+			fill: { kind: "none" },
+			outline: { fill: { kind: "none" } }
+		},
 		showLegend: isSparkline ? false : node.showLegend ?? false,
-		showTitle: isSparkline ? false : node.showTitle ?? false,
-		title: isSparkline ? void 0 : node.title,
-		chartColors: node.chartColors
-	};
-	if (node.chartType === "radar" && node.radarStyle) chartOptions.radarStyle = node.radarStyle;
-	if (isSparkline) {
-		chartOptions.catAxisHidden = true;
-		chartOptions.valAxisHidden = true;
-		chartOptions.catAxisLineShow = false;
-		chartOptions.valAxisLineShow = false;
-		chartOptions.showCatAxisTitle = false;
-		chartOptions.showValAxisTitle = false;
-		chartOptions.catGridLine = { style: "none" };
-		chartOptions.valGridLine = { style: "none" };
-		chartOptions.chartArea = {
-			fill: {
-				type: "solid",
-				color: "FFFFFF",
-				transparency: 100
+		radarStyle: node.chartType === "radar" ? node.radarStyle : void 0,
+		categoryAxis: isSparkline ? {
+			hidden: true,
+			lineVisible: false,
+			gridLinesVisible: false
+		} : {
+			majorTickMark: "outside",
+			labelPosition: "low",
+			numberFormat: {
+				formatCode: "General",
+				sourceLinked: true
 			},
-			border: {
-				color: "FFFFFF",
-				pt: 0
+			showMultiLevelLabels: false,
+			textStyle: {
+				fontFace: "Arial",
+				fontSize: asPt(12),
+				color: toColorInput("000000")
+			}
+		},
+		valueAxis: isSparkline ? {
+			hidden: true,
+			lineVisible: false,
+			gridLinesVisible: false
+		} : {
+			majorTickMark: "outside",
+			labelPosition: "nextTo",
+			numberFormat: {
+				formatCode: "General",
+				sourceLinked: false
 			},
-			roundedCorners: false
-		};
-		chartOptions.plotArea = {
-			fill: {
-				type: "solid",
-				color: "FFFFFF",
-				transparency: 100
+			majorGridline: {
+				width: asEmu(12700),
+				fill: {
+					kind: "solid",
+					color: toColorInput("888888")
+				}
 			},
-			border: {
-				color: "FFFFFF",
-				pt: 0
+			textStyle: {
+				fontFace: "Arial",
+				fontSize: asPt(12),
+				color: toColorInput("000000")
 			}
-		};
-		chartOptions.layout = {
+		},
+		plotLayout: isSparkline ? {
+			coordinateMode: "edge",
 			x: 0,
 			y: 0,
-			w: 1,
-			h: 1
-		};
-	}
-	ctx.slide.addChart(node.chartType, chartData, chartOptions);
+			width: 1,
+			height: 1
+		} : void 0
+	});
+}
+/**
+* glimpse の native writer は全系列で同じ category 軸と同じ点数を要求する。
+* 従来受理していた不揃いな入力も生成を継続できるよう、位置ベースで
+* category を共有し、欠けた値を 0 で補う。
+*/
+function normalizeChartSeries(data) {
+	const sourceData = data.length > 0 ? data : [{
+		labels: [],
+		values: []
+	}];
+	const pointCount = Math.max(1, ...sourceData.flatMap((series) => [series.labels.length, series.values.length]));
+	const categories = Array.from({ length: pointCount }, (_, index) => sourceData.find((series) => series.labels[index] !== void 0)?.labels[index] ?? "");
+	return sourceData.map((series) => ({
+		name: series.name,
+		labels: categories,
+		values: Array.from({ length: pointCount }, (_, index) => series.values[index] ?? 0)
+	}));
 }
 //#endregion
 export { renderChartNode };

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

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":[],"sources":["../../../src/renderPptx/nodes/chart.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { getContentAreaIn } from \"../utils/contentArea.ts\";\n\ntype ChartPositionedNode = Extract<PositionedNode, { type: \"chart\" }>;\n\nexport function renderChartNode(\n  node: ChartPositionedNode,\n  ctx: RenderContext,\n): void {\n  const chartData = node.data.map((d) => ({\n    name: d.name,\n    labels: d.labels,\n    values: d.values,\n  }));\n\n  // sparkline モードは bar / line / area のみ対応。pie / doughnut / radar は\n  // 元々凡例 / 軸の概念が異なるため sparkline=true でも通常描画にフォールバックする。\n  const isSparkline =\n    node.sparkline === true &&\n    (node.chartType === \"bar\" ||\n      node.chartType === \"line\" ||\n      node.chartType === \"area\");\n\n  const chartOptions: Record<string, unknown> = {\n    ...getContentAreaIn(node),\n    showLegend: isSparkline ? false : (node.showLegend ?? false),\n    showTitle: isSparkline ? false : (node.showTitle ?? false),\n    title: isSparkline ? undefined : node.title,\n    chartColors: node.chartColors,\n  };\n\n  // radar専用オプション\n  if (node.chartType === \"radar\" && node.radarStyle) {\n    chartOptions.radarStyle = node.radarStyle;\n  }\n\n  // sparkline モード: 凡例 / 軸 / グリッド線 / マージンをすべて非表示にし、\n  // プロット領域をチャート領域いっぱいに広げて小寸法でも視認できるようにする\n  if (isSparkline) {\n    chartOptions.catAxisHidden = true;\n    chartOptions.valAxisHidden = true;\n    chartOptions.catAxisLineShow = false;\n    chartOptions.valAxisLineShow = false;\n    chartOptions.showCatAxisTitle = false;\n    chartOptions.showValAxisTitle = false;\n    chartOptions.catGridLine = { style: \"none\" };\n    chartOptions.valGridLine = { style: \"none\" };\n    chartOptions.chartArea = {\n      fill: { type: \"solid\", color: \"FFFFFF\", transparency: 100 },\n      border: { color: \"FFFFFF\", pt: 0 },\n      roundedCorners: false,\n    };\n    chartOptions.plotArea = {\n      fill: { type: \"solid\", color: \"FFFFFF\", transparency: 100 },\n      border: { color: \"FFFFFF\", pt: 0 },\n    };\n    chartOptions.layout = { x: 0, y: 0, w: 1, h: 1 };\n  }\n\n  ctx.slide.addChart(node.chartType, chartData, chartOptions);\n}\n"],"mappings":";;AAMA,SAAgB,gBACd,MACA,KACM;CACN,MAAM,YAAY,KAAK,KAAK,KAAK,OAAO;EACtC,MAAM,EAAE;EACR,QAAQ,EAAE;EACV,QAAQ,EAAE;CACZ,EAAE;CAIF,MAAM,cACJ,KAAK,cAAc,SAClB,KAAK,cAAc,SAClB,KAAK,cAAc,UACnB,KAAK,cAAc;CAEvB,MAAM,eAAwC;EAC5C,GAAG,iBAAiB,IAAI;EACxB,YAAY,cAAc,QAAS,KAAK,cAAc;EACtD,WAAW,cAAc,QAAS,KAAK,aAAa;EACpD,OAAO,cAAc,KAAA,IAAY,KAAK;EACtC,aAAa,KAAK;CACpB;CAGA,IAAI,KAAK,cAAc,WAAW,KAAK,YACrC,aAAa,aAAa,KAAK;CAKjC,IAAI,aAAa;EACf,aAAa,gBAAgB;EAC7B,aAAa,gBAAgB;EAC7B,aAAa,kBAAkB;EAC/B,aAAa,kBAAkB;EAC/B,aAAa,mBAAmB;EAChC,aAAa,mBAAmB;EAChC,aAAa,cAAc,EAAE,OAAO,OAAO;EAC3C,aAAa,cAAc,EAAE,OAAO,OAAO;EAC3C,aAAa,YAAY;GACvB,MAAM;IAAE,MAAM;IAAS,OAAO;IAAU,cAAc;GAAI;GAC1D,QAAQ;IAAE,OAAO;IAAU,IAAI;GAAE;GACjC,gBAAgB;EAClB;EACA,aAAa,WAAW;GACtB,MAAM;IAAE,MAAM;IAAS,OAAO;IAAU,cAAc;GAAI;GAC1D,QAAQ;IAAE,OAAO;IAAU,IAAI;GAAE;EACnC;EACA,aAAa,SAAS;GAAE,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,GAAG;EAAE;CACjD;CAEA,IAAI,MAAM,SAAS,KAAK,WAAW,WAAW,YAAY;AAC5D"}
+{"version":3,"file":"chart.js","names":[],"sources":["../../../src/renderPptx/nodes/chart.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { asEmu, asOoxmlPercent, asPt } from \"@pptx-glimpse/document\";\nimport { pxToEmu } from \"../units.ts\";\nimport { getContentArea } from \"../utils/contentArea.ts\";\nimport { toColorInput } from \"../pptxAuthoring.ts\";\n\ntype ChartPositionedNode = Extract<PositionedNode, { type: \"chart\" }>;\n\nconst DEFAULT_BAR_CHART_COLORS = [\n  \"C0504D\",\n  \"4F81BD\",\n  \"9BBB59\",\n  \"8064A2\",\n  \"4BACC6\",\n  \"F79646\",\n  \"628FC6\",\n  \"C86360\",\n  \"C0504D\",\n  \"4F81BD\",\n  \"9BBB59\",\n  \"8064A2\",\n  \"4BACC6\",\n  \"F79646\",\n  \"628FC6\",\n  \"C86360\",\n];\nconst DEFAULT_PIE_CHART_COLORS = [\n  \"5DA5DA\",\n  \"FAA43A\",\n  \"60BD68\",\n  \"F17CB0\",\n  \"B2912F\",\n  \"B276B2\",\n  \"DECF3F\",\n  \"F15854\",\n  \"A7A7A7\",\n  \"5DA5DA\",\n  \"FAA43A\",\n  \"60BD68\",\n  \"F17CB0\",\n  \"B2912F\",\n  \"B276B2\",\n  \"DECF3F\",\n  \"F15854\",\n  \"A7A7A7\",\n];\n\nexport function renderChartNode(\n  node: ChartPositionedNode,\n  ctx: RenderContext,\n): void {\n  // sparkline モードは bar / line / area のみ対応。pie / doughnut / radar は\n  // 元々凡例 / 軸の概念が異なるため sparkline=true でも通常描画にフォールバックする。\n  const isSparkline =\n    node.sparkline === true &&\n    (node.chartType === \"bar\" ||\n      node.chartType === \"line\" ||\n      node.chartType === \"area\");\n\n  const content = getContentArea(node);\n  const series = normalizeChartSeries(node.data);\n  const chartColors =\n    node.chartColors ??\n    (node.chartType === \"pie\" || node.chartType === \"doughnut\"\n      ? DEFAULT_PIE_CHART_COLORS\n      : DEFAULT_BAR_CHART_COLORS);\n  const pointColors =\n    chartColors.length > 0 &&\n    (node.chartType === \"pie\" ||\n      node.chartType === \"doughnut\" ||\n      (node.chartType === \"bar\" &&\n        node.data.length === 1 &&\n        node.chartColors !== undefined &&\n        node.chartColors.length > 1))\n      ? node.data[0]?.values.map(\n          (_value, index) => chartColors[index % chartColors.length],\n        )\n      : undefined;\n  ctx.buildContext.pptxAuthoring.registerChart({\n    chartType: node.chartType,\n    series: series.map((item, index) => ({\n      name: item.name,\n      categories: item.labels,\n      values: item.values,\n      color: chartColors[index % chartColors.length],\n      dataPoints:\n        index === 0\n          ? pointColors?.map((color, pointIndex) => ({\n              index: pointIndex,\n              fill: { kind: \"solid\", color: toColorInput(color)! },\n            }))\n          : undefined,\n      marker:\n        node.chartType === \"line\" || node.chartType === \"radar\"\n          ? {\n              symbol: \"circle\",\n              size: 6,\n              fill: {\n                kind: \"solid\",\n                color: toColorInput(chartColors[index % chartColors.length])!,\n              },\n            }\n          : undefined,\n    })),\n    offsetX: asEmu(Math.round(pxToEmu(content.x))),\n    offsetY: asEmu(Math.round(pxToEmu(content.y))),\n    width: asEmu(Math.round(pxToEmu(Math.max(content.w, 1)))),\n    height: asEmu(Math.round(pxToEmu(Math.max(content.h, 1)))),\n    title:\n      !isSparkline && node.showTitle ? node.title || \"Chart Title\" : undefined,\n    titleStyle:\n      !isSparkline && node.showTitle\n        ? {\n            fontFace: \"Arial\",\n            fontSize: asPt(18),\n            color: toColorInput(\"000000\"),\n            bold: false,\n            italic: false,\n          }\n        : undefined,\n    displayBlanksAs: \"span\",\n    roundedCorners: !isSparkline,\n    chartArea: isSparkline\n      ? {\n          fill: {\n            kind: \"solid\",\n            color: {\n              ...toColorInput(\"FFFFFF\")!,\n              transforms: [{ kind: \"alpha\", value: asOoxmlPercent(0) }],\n            },\n          },\n        }\n      : { fill: { kind: \"none\" }, outline: { fill: { kind: \"none\" } } },\n    plotArea: isSparkline\n      ? {\n          fill: {\n            kind: \"solid\",\n            color: {\n              ...toColorInput(\"FFFFFF\")!,\n              transforms: [{ kind: \"alpha\", value: asOoxmlPercent(0) }],\n            },\n          },\n        }\n      : { fill: { kind: \"none\" }, outline: { fill: { kind: \"none\" } } },\n    showLegend: isSparkline ? false : (node.showLegend ?? false),\n    radarStyle: node.chartType === \"radar\" ? node.radarStyle : undefined,\n    categoryAxis: isSparkline\n      ? { hidden: true, lineVisible: false, gridLinesVisible: false }\n      : {\n          majorTickMark: \"outside\",\n          labelPosition: \"low\",\n          numberFormat: { formatCode: \"General\", sourceLinked: true },\n          showMultiLevelLabels: false,\n          textStyle: {\n            fontFace: \"Arial\",\n            fontSize: asPt(12),\n            color: toColorInput(\"000000\"),\n          },\n        },\n    valueAxis: isSparkline\n      ? { hidden: true, lineVisible: false, gridLinesVisible: false }\n      : {\n          majorTickMark: \"outside\",\n          labelPosition: \"nextTo\",\n          numberFormat: { formatCode: \"General\", sourceLinked: false },\n          majorGridline: {\n            width: asEmu(12700),\n            fill: { kind: \"solid\", color: toColorInput(\"888888\")! },\n          },\n          textStyle: {\n            fontFace: \"Arial\",\n            fontSize: asPt(12),\n            color: toColorInput(\"000000\"),\n          },\n        },\n    plotLayout: isSparkline\n      ? { coordinateMode: \"edge\", x: 0, y: 0, width: 1, height: 1 }\n      : undefined,\n  });\n}\n\n/**\n * glimpse の native writer は全系列で同じ category 軸と同じ点数を要求する。\n * 従来受理していた不揃いな入力も生成を継続できるよう、位置ベースで\n * category を共有し、欠けた値を 0 で補う。\n */\nfunction normalizeChartSeries(data: ChartPositionedNode[\"data\"]) {\n  const sourceData = data.length > 0 ? data : [{ labels: [], values: [] }];\n  const pointCount = Math.max(\n    1,\n    ...sourceData.flatMap((series) => [\n      series.labels.length,\n      series.values.length,\n    ]),\n  );\n  const categories = Array.from(\n    { length: pointCount },\n    (_, index) =>\n      sourceData.find((series) => series.labels[index] !== undefined)?.labels[\n        index\n      ] ?? \"\",\n  );\n  return sourceData.map((series) => ({\n    name: series.name,\n    labels: categories,\n    values: Array.from(\n      { length: pointCount },\n      (_, index) => series.values[index] ?? 0,\n    ),\n  }));\n}\n"],"mappings":"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"}

package/dist/renderPptx/nodes/flow.js

@@ -53,7 +53,10 @@ function renderFlowNode(node, ctx) {
 		const fillColor = item.color ?? defaultColor;
 		const textColor = item.textColor ?? "FFFFFF";
 		addGlimpseShape(ctx, {
-			preset: item.shape,
+			geometry: {
+				kind: "preset",
+				preset: item.shape
+			},
 			...createShapeBoundsInput({
 				x: layout.x,
 				y: layout.y,

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 { 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        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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"}
+{"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,5 +1,5 @@
 import { pxToEmu } from "../units.js";
-import { toColorInput } from "../glimpseTextBoxes.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";
@@ -24,7 +24,10 @@ function renderIconNode(node, ctx) {
 			h: node.bgH ?? node.h
 		};
 		addGlimpseShape(ctx, {
-			preset: isCircle ? "ellipse" : "roundRect",
+			geometry: {
+				kind: "preset",
+				preset: isCircle ? "ellipse" : "roundRect"
+			},
 			...createShapeBoundsInput(bounds),
 			rotation: createShapeRotationInput(node.rotate),
 			fill: isFilled ? solidShapeFill(colorValue) : noneShapeFill(),

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

@@ -1 +1 @@
-{"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 \"../glimpseTextBoxes.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        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,QALc,WAAW,YAAY;GAMrC,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"}
+{"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/list.js

@@ -1,6 +1,6 @@
 import { getContentArea } from "../utils/contentArea.js";
 import { resolveSubSup } from "../textOptions.js";
-import { addGlimpseTextBox, createGlimpseRunProperties, listBulletXmlTransform } from "../utils/glimpseTextBox.js";
+import { addGlimpseTextBox, createGlimpseRunProperties } from "../utils/glimpseTextBox.js";
 //#region src/renderPptx/nodes/list.ts
 function resolveStyle(li, parent) {
 	const subSup = resolveSubSup(li, parent);
@@ -98,10 +98,8 @@ function renderUlNode(node, ctx) {
 		highlight: node.highlight,
 		paragraphs,
 		hyperlinks,
-		xmlTransform: listBulletXmlTransform({
-			kind: "bullet",
-			lineHeight: node.lineHeight
-		})
+		lineHeight: node.lineHeight,
+		bullet: { kind: "bullet" }
 	});
 }
 function renderOlNode(node, ctx) {
@@ -125,12 +123,12 @@ function renderOlNode(node, ctx) {
 		highlight: node.highlight,
 		paragraphs,
 		hyperlinks,
-		xmlTransform: listBulletXmlTransform({
+		lineHeight: node.lineHeight,
+		bullet: {
 			kind: "number",
 			scheme: node.numberType,
-			startAt: node.numberStartAt,
-			lineHeight: node.lineHeight
-		})
+			startAt: node.numberStartAt
+		}
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":[],"sources":["../../../src/renderPptx/nodes/list.ts"],"sourcesContent":["import type { PositionedNode, LiNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { resolveSubSup } from \"../textOptions.ts\";\nimport { getContentArea } from \"../utils/contentArea.ts\";\nimport {\n  addGlimpseTextBox,\n  createGlimpseRunProperties,\n  listBulletXmlTransform,\n  type GlimpseTextRunStyle,\n} from \"../utils/glimpseTextBox.ts\";\nimport {\n  type AddTextBoxParagraphInput,\n  type AddTextBoxRunInput,\n} from \"@pptx-glimpse/document\";\n\ntype UlPositionedNode = Extract<PositionedNode, { type: \"ul\" }>;\ntype OlPositionedNode = Extract<PositionedNode, { type: \"ol\" }>;\n\nfunction resolveStyle(li: LiNode, parent: UlPositionedNode | OlPositionedNode) {\n  const subSup = resolveSubSup(li, parent);\n  return {\n    fontSize: li.fontSize ?? parent.fontSize ?? 24,\n    color: li.color ?? parent.color,\n    bold: li.bold ?? parent.bold,\n    italic: li.italic ?? parent.italic,\n    underline: li.underline ?? parent.underline,\n    strike: li.strike ?? parent.strike,\n    subscript: subSup.subscript,\n    superscript: subSup.superscript,\n    highlight: li.highlight ?? parent.highlight,\n    fontFamily: li.fontFamily ?? parent.fontFamily ?? \"Noto Sans JP\",\n  };\n}\n\nfunction paragraphProperties(parent: UlPositionedNode | OlPositionedNode) {\n  return {\n    align: parent.textAlign ?? \"left\",\n  };\n}\n\nfunction toRunStyle(\n  style: ReturnType<typeof resolveStyle>,\n): GlimpseTextRunStyle {\n  return {\n    fontSize: style.fontSize,\n    fontFace: style.fontFamily,\n    color: style.color,\n    bold: style.bold,\n    italic: style.italic,\n    underline: style.underline,\n    strike: style.strike,\n    subscript: style.subscript,\n    superscript: style.superscript,\n    highlight: style.highlight,\n  };\n}\n\nfunction buildListParagraphs(\n  items: LiNode[],\n  parent: UlPositionedNode | OlPositionedNode,\n): {\n  paragraphs: AddTextBoxParagraphInput[];\n  hyperlinks: (string | undefined)[];\n} {\n  const paragraphs: AddTextBoxParagraphInput[] = [];\n  const hyperlinks: (string | undefined)[] = [];\n  for (let i = 0; i < items.length; i++) {\n    const li = items[i];\n    const style = resolveStyle(li, parent);\n    const runs: AddTextBoxRunInput[] = [];\n    if (li.runs && li.runs.length > 0) {\n      for (const run of li.runs) {\n        const runSubSup = resolveSubSup(run, style);\n        runs.push({\n          text: run.text,\n          properties: createGlimpseRunProperties({\n            fontSize: run.fontSize ?? style.fontSize,\n            fontFace: run.fontFamily ?? style.fontFamily,\n            color: run.color ?? style.color,\n            bold: run.bold ?? style.bold,\n            italic: run.italic ?? style.italic,\n            underline: run.underline ?? style.underline,\n            strike: run.strike ?? style.strike,\n            subscript: runSubSup.subscript,\n            superscript: runSubSup.superscript,\n            highlight: run.highlight ?? style.highlight,\n          }),\n        });\n        hyperlinks.push(run.text ? run.href : undefined);\n      }\n    } else {\n      runs.push({\n        text: li.text,\n        properties: createGlimpseRunProperties(toRunStyle(style)),\n      });\n      hyperlinks.push(undefined);\n    }\n    paragraphs.push({\n      properties: paragraphProperties(parent),\n      runs,\n    });\n  }\n  return { paragraphs, hyperlinks };\n}\n\nexport function renderUlNode(node: UlPositionedNode, ctx: RenderContext): void {\n  const fontSizePx = node.fontSize ?? 24;\n  const fontFamily = node.fontFamily ?? \"Noto Sans JP\";\n  const content = getContentArea(node);\n\n  const { paragraphs, hyperlinks } = buildListParagraphs(node.items, node);\n  addGlimpseTextBox(ctx, content, {\n    fontSize: fontSizePx,\n    fontFace: fontFamily,\n    align: node.textAlign ?? \"left\",\n    valign: \"top\",\n    margin: 0,\n    color: node.color,\n    bold: node.bold,\n    italic: node.italic,\n    underline: node.underline,\n    strike: node.strike,\n    subscript: node.subscript,\n    superscript: node.superscript,\n    highlight: node.highlight,\n    paragraphs,\n    hyperlinks,\n    xmlTransform: listBulletXmlTransform({\n      kind: \"bullet\",\n      lineHeight: node.lineHeight,\n    }),\n  });\n}\n\nexport function renderOlNode(node: OlPositionedNode, ctx: RenderContext): void {\n  const fontSizePx = node.fontSize ?? 24;\n  const fontFamily = node.fontFamily ?? \"Noto Sans JP\";\n  const content = getContentArea(node);\n\n  const { paragraphs, hyperlinks } = buildListParagraphs(node.items, node);\n  addGlimpseTextBox(ctx, content, {\n    fontSize: fontSizePx,\n    fontFace: fontFamily,\n    align: node.textAlign ?? \"left\",\n    valign: \"top\",\n    margin: 0,\n    color: node.color,\n    bold: node.bold,\n    italic: node.italic,\n    underline: node.underline,\n    strike: node.strike,\n    subscript: node.subscript,\n    superscript: node.superscript,\n    highlight: node.highlight,\n    paragraphs,\n    hyperlinks,\n    xmlTransform: listBulletXmlTransform({\n      kind: \"number\",\n      scheme: node.numberType,\n      startAt: node.numberStartAt,\n      lineHeight: node.lineHeight,\n    }),\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":[],"sources":["../../../src/renderPptx/nodes/list.ts"],"sourcesContent":["import type { PositionedNode, LiNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { resolveSubSup } from \"../textOptions.ts\";\nimport { getContentArea } from \"../utils/contentArea.ts\";\nimport {\n  addGlimpseTextBox,\n  createGlimpseRunProperties,\n  type GlimpseTextRunStyle,\n} from \"../utils/glimpseTextBox.ts\";\nimport {\n  type AddTextBoxParagraphInput,\n  type AddTextBoxRunInput,\n} from \"@pptx-glimpse/document\";\n\ntype UlPositionedNode = Extract<PositionedNode, { type: \"ul\" }>;\ntype OlPositionedNode = Extract<PositionedNode, { type: \"ol\" }>;\n\nfunction resolveStyle(li: LiNode, parent: UlPositionedNode | OlPositionedNode) {\n  const subSup = resolveSubSup(li, parent);\n  return {\n    fontSize: li.fontSize ?? parent.fontSize ?? 24,\n    color: li.color ?? parent.color,\n    bold: li.bold ?? parent.bold,\n    italic: li.italic ?? parent.italic,\n    underline: li.underline ?? parent.underline,\n    strike: li.strike ?? parent.strike,\n    subscript: subSup.subscript,\n    superscript: subSup.superscript,\n    highlight: li.highlight ?? parent.highlight,\n    fontFamily: li.fontFamily ?? parent.fontFamily ?? \"Noto Sans JP\",\n  };\n}\n\nfunction paragraphProperties(parent: UlPositionedNode | OlPositionedNode) {\n  return {\n    align: parent.textAlign ?? \"left\",\n  };\n}\n\nfunction toRunStyle(\n  style: ReturnType<typeof resolveStyle>,\n): GlimpseTextRunStyle {\n  return {\n    fontSize: style.fontSize,\n    fontFace: style.fontFamily,\n    color: style.color,\n    bold: style.bold,\n    italic: style.italic,\n    underline: style.underline,\n    strike: style.strike,\n    subscript: style.subscript,\n    superscript: style.superscript,\n    highlight: style.highlight,\n  };\n}\n\nfunction buildListParagraphs(\n  items: LiNode[],\n  parent: UlPositionedNode | OlPositionedNode,\n): {\n  paragraphs: AddTextBoxParagraphInput[];\n  hyperlinks: (string | undefined)[];\n} {\n  const paragraphs: AddTextBoxParagraphInput[] = [];\n  const hyperlinks: (string | undefined)[] = [];\n  for (let i = 0; i < items.length; i++) {\n    const li = items[i];\n    const style = resolveStyle(li, parent);\n    const runs: AddTextBoxRunInput[] = [];\n    if (li.runs && li.runs.length > 0) {\n      for (const run of li.runs) {\n        const runSubSup = resolveSubSup(run, style);\n        runs.push({\n          text: run.text,\n          properties: createGlimpseRunProperties({\n            fontSize: run.fontSize ?? style.fontSize,\n            fontFace: run.fontFamily ?? style.fontFamily,\n            color: run.color ?? style.color,\n            bold: run.bold ?? style.bold,\n            italic: run.italic ?? style.italic,\n            underline: run.underline ?? style.underline,\n            strike: run.strike ?? style.strike,\n            subscript: runSubSup.subscript,\n            superscript: runSubSup.superscript,\n            highlight: run.highlight ?? style.highlight,\n          }),\n        });\n        hyperlinks.push(run.text ? run.href : undefined);\n      }\n    } else {\n      runs.push({\n        text: li.text,\n        properties: createGlimpseRunProperties(toRunStyle(style)),\n      });\n      hyperlinks.push(undefined);\n    }\n    paragraphs.push({\n      properties: paragraphProperties(parent),\n      runs,\n    });\n  }\n  return { paragraphs, hyperlinks };\n}\n\nexport function renderUlNode(node: UlPositionedNode, ctx: RenderContext): void {\n  const fontSizePx = node.fontSize ?? 24;\n  const fontFamily = node.fontFamily ?? \"Noto Sans JP\";\n  const content = getContentArea(node);\n\n  const { paragraphs, hyperlinks } = buildListParagraphs(node.items, node);\n  addGlimpseTextBox(ctx, content, {\n    fontSize: fontSizePx,\n    fontFace: fontFamily,\n    align: node.textAlign ?? \"left\",\n    valign: \"top\",\n    margin: 0,\n    color: node.color,\n    bold: node.bold,\n    italic: node.italic,\n    underline: node.underline,\n    strike: node.strike,\n    subscript: node.subscript,\n    superscript: node.superscript,\n    highlight: node.highlight,\n    paragraphs,\n    hyperlinks,\n    lineHeight: node.lineHeight,\n    bullet: {\n      kind: \"bullet\",\n    },\n  });\n}\n\nexport function renderOlNode(node: OlPositionedNode, ctx: RenderContext): void {\n  const fontSizePx = node.fontSize ?? 24;\n  const fontFamily = node.fontFamily ?? \"Noto Sans JP\";\n  const content = getContentArea(node);\n\n  const { paragraphs, hyperlinks } = buildListParagraphs(node.items, node);\n  addGlimpseTextBox(ctx, content, {\n    fontSize: fontSizePx,\n    fontFace: fontFamily,\n    align: node.textAlign ?? \"left\",\n    valign: \"top\",\n    margin: 0,\n    color: node.color,\n    bold: node.bold,\n    italic: node.italic,\n    underline: node.underline,\n    strike: node.strike,\n    subscript: node.subscript,\n    superscript: node.superscript,\n    highlight: node.highlight,\n    paragraphs,\n    hyperlinks,\n    lineHeight: node.lineHeight,\n    bullet: {\n      kind: \"number\",\n      scheme: node.numberType,\n      startAt: node.numberStartAt,\n    },\n  });\n}\n"],"mappings":"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"}

package/dist/renderPptx/nodes/matrix.js

@@ -82,7 +82,10 @@ function renderMatrixNode(node, ctx) {
 		const itemY = areaY + (1 - item.y) * areaH;
 		const itemColor = item.color ?? defaultItemColor;
 		addGlimpseShape(ctx, {
-			preset: "ellipse",
+			geometry: {
+				kind: "preset",
+				preset: "ellipse"
+			},
 			...createShapeBoundsInput({
 				x: itemX - itemSize / 2,
 				y: itemY - itemSize / 2,

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

@@ -1 +1 @@
-{"version":3,"file":"matrix.js","names":[],"sources":["../../../src/renderPptx/nodes/matrix.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { measureMatrix } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport { addStraightLine } from \"../utils/straightLine.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  noShapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\nimport { addGlimpseTextBox } from \"../utils/glimpseTextBox.ts\";\n\ntype MatrixPositionedNode = Extract<PositionedNode, { type: \"matrix\" }>;\n\nexport function renderMatrixNode(\n  node: MatrixPositionedNode,\n  ctx: RenderContext,\n): void {\n  const items = node.items;\n  const axes = node.axes;\n  const quadrants = node.quadrants;\n\n  const defaultItemColor = \"1D4ED8\"; // blue\n  const baseItemSize = 24; // px\n  const baseLineWidth = 2; // px\n  const axisColor = \"E2E8F0\";\n  const axisLabelColor = stripHash(node.axisLabelColor) ?? \"64748B\";\n  const itemLabelColor = stripHash(node.itemLabelColor) ?? \"1E293B\";\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measureMatrix(node),\n    ctx,\n  );\n\n  const itemSize = baseItemSize * scaleFactor;\n  const lineWidth = baseLineWidth * scaleFactor;\n\n  // マトリクスの描画領域（軸ラベル用の余白を考慮）\n  const axisMargin = 60 * scaleFactor; // 軸ラベル用の余白\n  const areaX = content.x + axisMargin;\n  const areaY = content.y + axisMargin;\n  const areaW = content.w - axisMargin * 2;\n  const areaH = content.h - axisMargin * 2;\n\n  // 中心座標\n  const centerX = areaX + areaW / 2;\n  const centerY = areaY + areaH / 2;\n\n  // === 1. 十字線（軸線）を描画 ===\n  // 横線（X軸）\n  addStraightLine(\n    ctx,\n    { x1: areaX, y1: centerY, x2: areaX + areaW, y2: centerY },\n    { color: axisColor, lineWidth },\n  );\n\n  // 縦線（Y軸）\n  addStraightLine(\n    ctx,\n    { x1: centerX, y1: areaY, x2: centerX, y2: areaY + areaH },\n    { color: axisColor, lineWidth },\n  );\n\n  // === 2. 軸ラベルを描画 ===\n  const axisLabelW = 120 * scaleFactor;\n  const axisLabelH = 24 * scaleFactor;\n\n  // X軸ラベル（下部中央）\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: centerX - axisLabelW / 2,\n      y: areaY + areaH + 8 * scaleFactor,\n      w: axisLabelW,\n      h: axisLabelH,\n    },\n    {\n      text: axes.x,\n      fontSize: 12 * scaleFactor,\n      fontFace: \"Noto Sans JP\",\n      color: axisLabelColor,\n      align: \"center\",\n      valign: \"top\",\n    },\n  );\n\n  // Y軸ラベル（左部中央）270° 回転で下から上読み。w が視覚的な高さになるため CJK 5 文字以上も収まる幅を確保\n  const yLabelW = 100 * scaleFactor;\n  const yLabelH = 20 * scaleFactor;\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: content.x + axisMargin / 2 - yLabelW / 2,\n      y: centerY - yLabelH / 2,\n      w: yLabelW,\n      h: yLabelH,\n    },\n    {\n      text: axes.y,\n      fontSize: 12 * scaleFactor,\n      fontFace: \"Noto Sans JP\",\n      color: axisLabelColor,\n      align: \"center\",\n      valign: \"middle\",\n      rotate: 270,\n    },\n  );\n\n  // === 3. 象限ラベルを描画 ===\n  if (quadrants) {\n    renderQuadrantLabels(\n      ctx,\n      quadrants,\n      areaX,\n      areaY,\n      areaW,\n      areaH,\n      centerX,\n      centerY,\n      scaleFactor,\n      stripHash(node.quadrantLabelColor) ?? \"94A3B8\",\n    );\n  }\n\n  // === 4. アイテムをプロット ===\n  const itemLabelW = 100 * scaleFactor;\n  const itemLabelH = 18 * scaleFactor;\n\n  for (const item of items) {\n    // 座標変換: (0,0)=左下, (1,1)=右上\n    // x: 0 -> areaX, 1 -> areaX + areaW\n    // y: 0 -> areaY + areaH, 1 -> areaY (反転)\n    const itemX = areaX + item.x * areaW;\n    const itemY = areaY + (1 - item.y) * areaH; // Y軸反転\n    const itemColor = item.color ?? defaultItemColor;\n\n    // 円を描画\n    addGlimpseShape(\n      ctx,\n      {\n        preset: \"ellipse\",\n        ...createShapeBoundsInput({\n          x: itemX - itemSize / 2,\n          y: itemY - itemSize / 2,\n          w: itemSize,\n          h: itemSize,\n        }),\n        fill: solidShapeFill(itemColor),\n        outline: noShapeOutline(),\n      },\n      {\n        x: itemX - itemSize / 2,\n        y: itemY - itemSize / 2,\n        w: itemSize,\n        h: itemSize,\n      },\n      { fillColor: itemColor },\n    );\n\n    // ラベルを描画（円の上）\n    addGlimpseTextBox(\n      ctx,\n      {\n        x: itemX - itemLabelW / 2,\n        y: itemY - itemSize / 2 - 20 * scaleFactor,\n        w: itemLabelW,\n        h: itemLabelH,\n      },\n      {\n        text: item.label,\n        fontSize: 11 * scaleFactor,\n        fontFace: \"Noto Sans JP\",\n        color: stripHash(item.textColor) ?? itemLabelColor,\n        bold: true,\n        align: \"center\",\n        valign: \"bottom\",\n      },\n    );\n  }\n}\n\nfunction renderQuadrantLabels(\n  ctx: RenderContext,\n  quadrants: NonNullable<MatrixPositionedNode[\"quadrants\"]>,\n  areaX: number,\n  areaY: number,\n  areaW: number,\n  areaH: number,\n  centerX: number,\n  centerY: number,\n  scaleFactor: number,\n  quadrantColor: string,\n): void {\n  const quadrantFontSize = 11 * scaleFactor;\n  const quadrantInset = 10 * scaleFactor;\n  const quadrantW = areaW / 2 - 20 * scaleFactor;\n  const quadrantH = 48 * scaleFactor;\n\n  // 左上\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: areaX + quadrantInset,\n      y: areaY + quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.topLeft,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"left\",\n      valign: \"top\",\n    },\n  );\n\n  // 右上\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: centerX + quadrantInset,\n      y: areaY + quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.topRight,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"right\",\n      valign: \"top\",\n    },\n  );\n\n  // 左下\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: areaX + quadrantInset,\n      y: centerY + areaH / 2 - quadrantH - quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.bottomLeft,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"left\",\n      valign: \"bottom\",\n    },\n  );\n\n  // 右下\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: centerX + quadrantInset,\n      y: centerY + areaH / 2 - quadrantH - quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.bottomRight,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"right\",\n      valign: \"bottom\",\n    },\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"matrix.js","names":[],"sources":["../../../src/renderPptx/nodes/matrix.ts"],"sourcesContent":["import type { PositionedNode } from \"../../types.ts\";\nimport type { RenderContext } from \"../types.ts\";\nimport { stripHash } from \"../utils/visualStyle.ts\";\nimport { measureMatrix } from \"../../calcYogaLayout/measureCompositeNodes.ts\";\nimport { resolveScaledContentArea } from \"../utils/scaleToFit.ts\";\nimport { addStraightLine } from \"../utils/straightLine.ts\";\nimport {\n  addGlimpseShape,\n  createShapeBoundsInput,\n  noShapeOutline,\n  solidShapeFill,\n} from \"../utils/glimpseShape.ts\";\nimport { addGlimpseTextBox } from \"../utils/glimpseTextBox.ts\";\n\ntype MatrixPositionedNode = Extract<PositionedNode, { type: \"matrix\" }>;\n\nexport function renderMatrixNode(\n  node: MatrixPositionedNode,\n  ctx: RenderContext,\n): void {\n  const items = node.items;\n  const axes = node.axes;\n  const quadrants = node.quadrants;\n\n  const defaultItemColor = \"1D4ED8\"; // blue\n  const baseItemSize = 24; // px\n  const baseLineWidth = 2; // px\n  const axisColor = \"E2E8F0\";\n  const axisLabelColor = stripHash(node.axisLabelColor) ?? \"64748B\";\n  const itemLabelColor = stripHash(node.itemLabelColor) ?? \"1E293B\";\n\n  // スケール係数を計算（コンテンツ領域基準）\n  const { content, scaleFactor } = resolveScaledContentArea(\n    node,\n    measureMatrix(node),\n    ctx,\n  );\n\n  const itemSize = baseItemSize * scaleFactor;\n  const lineWidth = baseLineWidth * scaleFactor;\n\n  // マトリクスの描画領域（軸ラベル用の余白を考慮）\n  const axisMargin = 60 * scaleFactor; // 軸ラベル用の余白\n  const areaX = content.x + axisMargin;\n  const areaY = content.y + axisMargin;\n  const areaW = content.w - axisMargin * 2;\n  const areaH = content.h - axisMargin * 2;\n\n  // 中心座標\n  const centerX = areaX + areaW / 2;\n  const centerY = areaY + areaH / 2;\n\n  // === 1. 十字線（軸線）を描画 ===\n  // 横線（X軸）\n  addStraightLine(\n    ctx,\n    { x1: areaX, y1: centerY, x2: areaX + areaW, y2: centerY },\n    { color: axisColor, lineWidth },\n  );\n\n  // 縦線（Y軸）\n  addStraightLine(\n    ctx,\n    { x1: centerX, y1: areaY, x2: centerX, y2: areaY + areaH },\n    { color: axisColor, lineWidth },\n  );\n\n  // === 2. 軸ラベルを描画 ===\n  const axisLabelW = 120 * scaleFactor;\n  const axisLabelH = 24 * scaleFactor;\n\n  // X軸ラベル（下部中央）\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: centerX - axisLabelW / 2,\n      y: areaY + areaH + 8 * scaleFactor,\n      w: axisLabelW,\n      h: axisLabelH,\n    },\n    {\n      text: axes.x,\n      fontSize: 12 * scaleFactor,\n      fontFace: \"Noto Sans JP\",\n      color: axisLabelColor,\n      align: \"center\",\n      valign: \"top\",\n    },\n  );\n\n  // Y軸ラベル（左部中央）270° 回転で下から上読み。w が視覚的な高さになるため CJK 5 文字以上も収まる幅を確保\n  const yLabelW = 100 * scaleFactor;\n  const yLabelH = 20 * scaleFactor;\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: content.x + axisMargin / 2 - yLabelW / 2,\n      y: centerY - yLabelH / 2,\n      w: yLabelW,\n      h: yLabelH,\n    },\n    {\n      text: axes.y,\n      fontSize: 12 * scaleFactor,\n      fontFace: \"Noto Sans JP\",\n      color: axisLabelColor,\n      align: \"center\",\n      valign: \"middle\",\n      rotate: 270,\n    },\n  );\n\n  // === 3. 象限ラベルを描画 ===\n  if (quadrants) {\n    renderQuadrantLabels(\n      ctx,\n      quadrants,\n      areaX,\n      areaY,\n      areaW,\n      areaH,\n      centerX,\n      centerY,\n      scaleFactor,\n      stripHash(node.quadrantLabelColor) ?? \"94A3B8\",\n    );\n  }\n\n  // === 4. アイテムをプロット ===\n  const itemLabelW = 100 * scaleFactor;\n  const itemLabelH = 18 * scaleFactor;\n\n  for (const item of items) {\n    // 座標変換: (0,0)=左下, (1,1)=右上\n    // x: 0 -> areaX, 1 -> areaX + areaW\n    // y: 0 -> areaY + areaH, 1 -> areaY (反転)\n    const itemX = areaX + item.x * areaW;\n    const itemY = areaY + (1 - item.y) * areaH; // Y軸反転\n    const itemColor = item.color ?? defaultItemColor;\n\n    // 円を描画\n    addGlimpseShape(\n      ctx,\n      {\n        geometry: { kind: \"preset\", preset: \"ellipse\" },\n        ...createShapeBoundsInput({\n          x: itemX - itemSize / 2,\n          y: itemY - itemSize / 2,\n          w: itemSize,\n          h: itemSize,\n        }),\n        fill: solidShapeFill(itemColor),\n        outline: noShapeOutline(),\n      },\n      {\n        x: itemX - itemSize / 2,\n        y: itemY - itemSize / 2,\n        w: itemSize,\n        h: itemSize,\n      },\n      { fillColor: itemColor },\n    );\n\n    // ラベルを描画（円の上）\n    addGlimpseTextBox(\n      ctx,\n      {\n        x: itemX - itemLabelW / 2,\n        y: itemY - itemSize / 2 - 20 * scaleFactor,\n        w: itemLabelW,\n        h: itemLabelH,\n      },\n      {\n        text: item.label,\n        fontSize: 11 * scaleFactor,\n        fontFace: \"Noto Sans JP\",\n        color: stripHash(item.textColor) ?? itemLabelColor,\n        bold: true,\n        align: \"center\",\n        valign: \"bottom\",\n      },\n    );\n  }\n}\n\nfunction renderQuadrantLabels(\n  ctx: RenderContext,\n  quadrants: NonNullable<MatrixPositionedNode[\"quadrants\"]>,\n  areaX: number,\n  areaY: number,\n  areaW: number,\n  areaH: number,\n  centerX: number,\n  centerY: number,\n  scaleFactor: number,\n  quadrantColor: string,\n): void {\n  const quadrantFontSize = 11 * scaleFactor;\n  const quadrantInset = 10 * scaleFactor;\n  const quadrantW = areaW / 2 - 20 * scaleFactor;\n  const quadrantH = 48 * scaleFactor;\n\n  // 左上\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: areaX + quadrantInset,\n      y: areaY + quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.topLeft,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"left\",\n      valign: \"top\",\n    },\n  );\n\n  // 右上\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: centerX + quadrantInset,\n      y: areaY + quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.topRight,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"right\",\n      valign: \"top\",\n    },\n  );\n\n  // 左下\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: areaX + quadrantInset,\n      y: centerY + areaH / 2 - quadrantH - quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.bottomLeft,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"left\",\n      valign: \"bottom\",\n    },\n  );\n\n  // 右下\n  addGlimpseTextBox(\n    ctx,\n    {\n      x: centerX + quadrantInset,\n      y: centerY + areaH / 2 - quadrantH - quadrantInset,\n      w: quadrantW,\n      h: quadrantH,\n    },\n    {\n      text: quadrants.bottomRight,\n      fontSize: quadrantFontSize,\n      fontFace: \"Noto Sans JP\",\n      color: quadrantColor,\n      align: \"right\",\n      valign: \"bottom\",\n    },\n  );\n}\n"],"mappings":"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"}

package/dist/renderPptx/nodes/processArrow.js

@@ -87,7 +87,10 @@ function renderHorizontalProcessArrow(node, ctx, steps, stepCount, itemWidth, it
 			{ close: true }
 		];
 		addGlimpseShape(ctx, {
-			preset: "rect",
+			geometry: {
+				kind: "preset",
+				preset: "rect"
+			},
 			...createShapeBoundsInput({
 				x: stepX,
 				y: stepY,
@@ -191,7 +194,10 @@ function renderVerticalProcessArrow(node, ctx, steps, stepCount, itemWidth, item
 			{ close: true }
 		];
 		addGlimpseShape(ctx, {
-			preset: "rect",
+			geometry: {
+				kind: "preset",
+				preset: "rect"
+			},
 			...createShapeBoundsInput({
 				x: stepX,
 				y: stepY,