334 lines
11 KiB
TypeScript
334 lines
11 KiB
TypeScript
import type {
|
|
DetailUiProtocol,
|
|
DetailUiScreenInput,
|
|
DetailUiScreenReviewPatch,
|
|
} from "@/lib/detail-ui-protocol";
|
|
import {
|
|
getUiSurfaceChildren,
|
|
resolveUiSurfaceTextBinding,
|
|
type UiSurfaceSnapshot,
|
|
} from "@/lib/ui-surface-protocol";
|
|
import type { CanvasNode, TextNodeData } from "@/types/canvas";
|
|
|
|
export type DetailTextLayerDraft = Omit<CanvasNode, "id" | "createdAt" | "updatedAt">;
|
|
|
|
export type DetailTypographyTokens = {
|
|
titleFontSize: number;
|
|
titleFontWeight: string;
|
|
subtitleFontSize: number;
|
|
subtitleFontWeight: string;
|
|
bodyFontSize: number;
|
|
bodyFontWeight: string;
|
|
};
|
|
|
|
function createTextNodeDraft(params: {
|
|
parentId: string;
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
content: string;
|
|
fontSize: number;
|
|
fontWeight: string;
|
|
color: string;
|
|
lineHeight: number;
|
|
textAlign: "left" | "center" | "right";
|
|
metadata?: Record<string, unknown>;
|
|
}): DetailTextLayerDraft {
|
|
return {
|
|
type: "text",
|
|
position: { x: params.x, y: params.y },
|
|
size: { width: params.width, height: params.height },
|
|
data: {
|
|
content: params.content,
|
|
fontSize: params.fontSize,
|
|
fontWeight: params.fontWeight,
|
|
color: params.color,
|
|
lineHeight: params.lineHeight,
|
|
textAlign: params.textAlign,
|
|
transparent: true,
|
|
metadata: params.metadata,
|
|
} as TextNodeData & { metadata?: Record<string, unknown> },
|
|
connections: [],
|
|
parentId: params.parentId,
|
|
};
|
|
}
|
|
|
|
function createManagedDetailMetadata(params: {
|
|
screenIndex?: number;
|
|
blockId: string;
|
|
blockType: "title" | "subtitle" | "body";
|
|
}) {
|
|
return {
|
|
detailUiManaged: true,
|
|
detailUiBlockId: params.blockId,
|
|
detailUiBlockType: params.blockType,
|
|
detailUiScreenIndex: params.screenIndex,
|
|
};
|
|
}
|
|
|
|
export function buildDetailTextLayerNodesFromProtocol(params: {
|
|
parentNodeId: string;
|
|
parentPosition: { x: number; y: number };
|
|
parentSize: { width: number; height: number };
|
|
screenSize: { width: number; height: number };
|
|
screenProtocol?: DetailUiProtocol["screens"][number];
|
|
}) {
|
|
const protocolBlocks = params.screenProtocol?.blocks || [];
|
|
if (protocolBlocks.length === 0) return [] as DetailTextLayerDraft[];
|
|
|
|
const scaleX = params.parentSize.width / Math.max(1, params.screenSize.width);
|
|
const scaleY = params.parentSize.height / Math.max(1, params.screenSize.height);
|
|
|
|
return protocolBlocks.map((block) =>
|
|
createTextNodeDraft({
|
|
parentId: params.parentNodeId,
|
|
x: params.parentPosition.x + Math.round(block.frame.x * scaleX),
|
|
y: params.parentPosition.y + Math.round(block.frame.y * scaleY),
|
|
width: Math.max(120, Math.round(block.frame.width * scaleX)),
|
|
height: Math.max(48, Math.round(block.frame.height * scaleY)),
|
|
content: block.content,
|
|
fontSize: Math.max(12, Math.round(block.style.fontSize * Math.min(scaleX, scaleY))),
|
|
fontWeight: block.style.fontWeight,
|
|
color: block.style.color,
|
|
lineHeight: block.style.lineHeight,
|
|
textAlign: block.style.textAlign,
|
|
metadata: createManagedDetailMetadata({
|
|
blockId: block.id,
|
|
blockType: block.type,
|
|
screenIndex: params.screenProtocol?.index,
|
|
}),
|
|
}),
|
|
);
|
|
}
|
|
|
|
export function buildDetailTextLayerNodesFromReviewPatch(params: {
|
|
parentNodeId: string;
|
|
parentPosition: { x: number; y: number };
|
|
parentSize: { width: number; height: number };
|
|
screenSize: { width: number; height: number };
|
|
uiPatch?: DetailUiScreenReviewPatch;
|
|
}) {
|
|
if (!params.uiPatch) return [] as DetailTextLayerDraft[];
|
|
return buildDetailTextLayerNodesFromProtocol({
|
|
parentNodeId: params.parentNodeId,
|
|
parentPosition: params.parentPosition,
|
|
parentSize: params.parentSize,
|
|
screenSize: params.screenSize,
|
|
screenProtocol: params.uiPatch.recommendedScreen,
|
|
});
|
|
}
|
|
|
|
export function buildDetailTextLayerNodesFromSurfaceScreen(params: {
|
|
parentNodeId: string;
|
|
parentPosition: { x: number; y: number };
|
|
parentSize: { width: number; height: number };
|
|
surface: UiSurfaceSnapshot | null | undefined;
|
|
screenIndex: number;
|
|
}) {
|
|
if (!params.surface) return [] as DetailTextLayerDraft[];
|
|
|
|
const screenComponent =
|
|
params.surface.components.find(
|
|
(component) =>
|
|
component.type === "detail_screen" &&
|
|
Number(component.props?.screenIndex || 0) === params.screenIndex,
|
|
) || null;
|
|
if (!screenComponent) return [] as DetailTextLayerDraft[];
|
|
|
|
const textStack = getUiSurfaceChildren(params.surface, screenComponent.id).find(
|
|
(component) => component.type === "detail_text_stack",
|
|
);
|
|
if (!textStack) return [] as DetailTextLayerDraft[];
|
|
|
|
const scaleX = params.parentSize.width / Math.max(1, params.surface.screenSize.width);
|
|
const scaleY = params.parentSize.height / Math.max(1, params.surface.screenSize.height);
|
|
|
|
return getUiSurfaceChildren(params.surface, textStack.id)
|
|
.filter((component) => component.type === "detail_text_block")
|
|
.map((component) => {
|
|
const frame = (component.layout?.frame || {}) as {
|
|
x?: number;
|
|
y?: number;
|
|
width?: number;
|
|
height?: number;
|
|
};
|
|
const style = (component.style || {}) as Record<string, unknown>;
|
|
return createTextNodeDraft({
|
|
parentId: params.parentNodeId,
|
|
x: params.parentPosition.x + Math.round(Number(frame.x || 0) * scaleX),
|
|
y: params.parentPosition.y + Math.round(Number(frame.y || 0) * scaleY),
|
|
width: Math.max(120, Math.round(Number(frame.width || 240) * scaleX)),
|
|
height: Math.max(48, Math.round(Number(frame.height || 60) * scaleY)),
|
|
content: resolveUiSurfaceTextBinding(params.surface, component, "content"),
|
|
fontSize: Math.max(
|
|
12,
|
|
Math.round(Number(style.fontSize || 24) * Math.min(scaleX, scaleY)),
|
|
),
|
|
fontWeight: String(style.fontWeight || "500"),
|
|
color: String(style.color || "#111827"),
|
|
lineHeight: Number(style.lineHeight || 1.3),
|
|
textAlign:
|
|
style.textAlign === "center" || style.textAlign === "right"
|
|
? style.textAlign
|
|
: "left",
|
|
metadata: {
|
|
detailUiManaged: true,
|
|
detailUiBlockId: String(component.metadata?.blockId || component.id),
|
|
detailUiBlockType: String(component.metadata?.blockType || ""),
|
|
detailUiScreenIndex: params.screenIndex,
|
|
detailSurfaceComponentId: component.id,
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
export function buildLegacyDetailTextLayerNodes(params: {
|
|
parentNodeId: string;
|
|
parentPosition: { x: number; y: number };
|
|
parentWidth: number;
|
|
screenIndex: number;
|
|
title?: string;
|
|
subtitle?: string;
|
|
body?: string;
|
|
titleFontSize: number;
|
|
titleFontWeight: string;
|
|
subtitleFontSize: number;
|
|
subtitleFontWeight: string;
|
|
bodyFontSize: number;
|
|
bodyFontWeight: string;
|
|
}) {
|
|
const safeLeft = Math.round(params.parentWidth * 0.07);
|
|
const textWidth = Math.max(240, Math.round(params.parentWidth - safeLeft * 2));
|
|
const drafts: DetailTextLayerDraft[] = [];
|
|
|
|
const titleText = String(params.title || "").trim();
|
|
const subtitleText = String(params.subtitle || "").trim();
|
|
const bodyText = String(params.body || "").trim();
|
|
|
|
if (titleText) {
|
|
drafts.push(
|
|
createTextNodeDraft({
|
|
parentId: params.parentNodeId,
|
|
x: params.parentPosition.x + safeLeft,
|
|
y: params.parentPosition.y + 72,
|
|
width: textWidth,
|
|
height: 140,
|
|
content: titleText,
|
|
fontSize:
|
|
params.screenIndex === 0
|
|
? params.titleFontSize
|
|
: Math.round(params.titleFontSize * 0.86),
|
|
fontWeight: params.titleFontWeight,
|
|
color: "#111827",
|
|
lineHeight: 1.15,
|
|
textAlign: "left",
|
|
metadata: createManagedDetailMetadata({
|
|
blockId: `legacy-screen-${params.screenIndex + 1}-title`,
|
|
blockType: "title",
|
|
screenIndex: params.screenIndex + 1,
|
|
}),
|
|
}),
|
|
);
|
|
}
|
|
|
|
if (subtitleText) {
|
|
drafts.push(
|
|
createTextNodeDraft({
|
|
parentId: params.parentNodeId,
|
|
x: params.parentPosition.x + safeLeft,
|
|
y: params.parentPosition.y + 214,
|
|
width: textWidth,
|
|
height: 120,
|
|
content: subtitleText,
|
|
fontSize: params.subtitleFontSize,
|
|
fontWeight: params.subtitleFontWeight,
|
|
color: "#374151",
|
|
lineHeight: 1.22,
|
|
textAlign: "left",
|
|
metadata: createManagedDetailMetadata({
|
|
blockId: `legacy-screen-${params.screenIndex + 1}-subtitle`,
|
|
blockType: "subtitle",
|
|
screenIndex: params.screenIndex + 1,
|
|
}),
|
|
}),
|
|
);
|
|
}
|
|
|
|
if (bodyText) {
|
|
drafts.push(
|
|
createTextNodeDraft({
|
|
parentId: params.parentNodeId,
|
|
x: params.parentPosition.x + safeLeft,
|
|
y: params.parentPosition.y + 304,
|
|
width: textWidth,
|
|
height: 260,
|
|
content: bodyText,
|
|
fontSize: params.bodyFontSize,
|
|
fontWeight: params.bodyFontWeight,
|
|
color: "#4b5563",
|
|
lineHeight: 1.38,
|
|
textAlign: "left",
|
|
metadata: createManagedDetailMetadata({
|
|
blockId: `legacy-screen-${params.screenIndex + 1}-body`,
|
|
blockType: "body",
|
|
screenIndex: params.screenIndex + 1,
|
|
}),
|
|
}),
|
|
);
|
|
}
|
|
|
|
return drafts;
|
|
}
|
|
|
|
export function buildDetailTextLayerNodes(params: {
|
|
parentNodeId: string;
|
|
parentPosition: { x: number; y: number };
|
|
parentSize: { width: number; height: number };
|
|
screenSize: { width: number; height: number };
|
|
screenIndex: number;
|
|
screen?: Pick<DetailUiScreenInput, "title" | "subtitle" | "copy">;
|
|
screenProtocol?: DetailUiProtocol["screens"][number];
|
|
typography: DetailTypographyTokens;
|
|
}) {
|
|
if (params.screenProtocol) {
|
|
return buildDetailTextLayerNodesFromProtocol({
|
|
parentNodeId: params.parentNodeId,
|
|
parentPosition: params.parentPosition,
|
|
parentSize: params.parentSize,
|
|
screenSize: params.screenSize,
|
|
screenProtocol: params.screenProtocol,
|
|
});
|
|
}
|
|
|
|
return buildLegacyDetailTextLayerNodes({
|
|
parentNodeId: params.parentNodeId,
|
|
parentPosition: params.parentPosition,
|
|
parentWidth: params.parentSize.width,
|
|
screenIndex: params.screenIndex,
|
|
title: params.screen?.title,
|
|
subtitle: params.screen?.subtitle,
|
|
body: params.screen?.copy,
|
|
titleFontSize: params.typography.titleFontSize,
|
|
titleFontWeight: params.typography.titleFontWeight,
|
|
subtitleFontSize: params.typography.subtitleFontSize,
|
|
subtitleFontWeight: params.typography.subtitleFontWeight,
|
|
bodyFontSize: params.typography.bodyFontSize,
|
|
bodyFontWeight: params.typography.bodyFontWeight,
|
|
});
|
|
}
|
|
|
|
export function collectManagedDetailTextLayerNodeIds(
|
|
nodes: CanvasNode[],
|
|
parentNodeId: string,
|
|
) {
|
|
return nodes
|
|
.filter(
|
|
(node) =>
|
|
node.parentId === parentNodeId &&
|
|
node.type === "text" &&
|
|
Boolean((node.data as any)?.metadata?.detailUiManaged),
|
|
)
|
|
.map((node) => node.id);
|
|
}
|