@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page-canvas/export/psd.ts

@@ -0,0 +1,354 @@
+import type { Layer, Psd } from "ag-psd";
+
+import { parseColor } from "./color";
+import { parseCssGradient } from "../konva-fallback";
+import {
+  documentWidth,
+  pageHeight,
+  selectPages,
+  type ExportDocument,
+  type ExportElement,
+} from "./document-model";
+import {
+  drawBitmap,
+  drawFigure,
+  drawPlaceholder,
+  drawText,
+  normalizeFontWeight,
+  transformText,
+  type DrawableImage,
+  type Raster2D,
+} from "./raster";
+import { cssFont, layoutText, resolveLeading } from "./text-layout";
+import {
+  pdfFontName,
+  type PdfFontSpec,
+} from "./pdf/resources";
+
+/**
+ * Maps a Canvas document JSON to an ag-psd document object: pages become
+ * collapsed layer groups stacked vertically, text elements become editable
+ * PSD text layers (with a raster cache so dumb viewers still render), and
+ * figure/svg/image elements become raster layers.
+ *
+ * This is the browser port of ``exporters/psd_exporter`` in
+ * leviosa-sourcing-server-cafe24 — keep the two in sync when the layer
+ * mapping changes.
+ */
+
+// Photoshop stores files up to 30,000 px per side (PSB would go further, but
+// ag-psd writes classic PSD).
+export const PSD_MAX_DIMENSION = 30000;
+
+const FONT_PS_NAMES: Array<[number, string]> = [
+  [450, "Pretendard-Regular"],
+  [650, "Pretendard-SemiBold"],
+  [750, "Pretendard-Bold"],
+  [Infinity, "Pretendard-ExtraBold"],
+];
+
+/** PostScript name Photoshop should resolve for an editable type layer. */
+export function fontPostScriptName(
+  family: string | undefined,
+  fontWeight: number | string | undefined,
+  italic = false,
+  catalogNames: Array<{ spec: PdfFontSpec; name: string }> = [],
+): string {
+  const w = Number(fontWeight) || 400;
+  const requested = { family: family || "Pretendard", weight: w, italic };
+  const exact = catalogNames.find(
+    ({ spec }) =>
+      spec.family === requested.family &&
+      spec.weight === requested.weight &&
+      spec.italic === requested.italic,
+  );
+  if (exact) return exact.name;
+  const familyNames = catalogNames.filter(
+    ({ spec }) => spec.family === requested.family,
+  );
+  const sameStyle = familyNames.filter(
+    ({ spec }) => spec.italic === requested.italic,
+  );
+  const nearest = (sameStyle.length ? sameStyle : familyNames)
+    .filter(
+      ({ spec }) =>
+        spec.family === requested.family,
+    )
+    .sort(
+      (a, b) =>
+        Math.abs(a.spec.weight - w) - Math.abs(b.spec.weight - w),
+    )[0];
+  if (nearest) return nearest.name;
+
+  if (requested.family !== "Pretendard") return pdfFontName(requested);
+  const found = FONT_PS_NAMES.find(([max]) => w < max);
+  const name = found ? found[1] : "Pretendard-Regular";
+  return italic ? `${name}-Italic` : name;
+}
+
+function justification(align: string | undefined): "left" | "center" | "right" {
+  return align === "center" || align === "right" ? align : "left";
+}
+
+type ExportCanvas = {
+  width: number;
+  height: number;
+  getContext(kind: "2d"): Raster2D | null;
+};
+
+export type BuildPsdOptions = {
+  createCanvas: (width: number, height: number) => ExportCanvas;
+  /** Artifact slot_bindings; used for layer names. */
+  slotBindings?: Record<string, { element_id?: string } | undefined>;
+  /** Resolve image/svg src to a drawable; null renders a placeholder. */
+  loadBitmap?: (el: ExportElement) => Promise<DrawableImage | null>;
+  /** Export only these page ids (document order); default all pages. */
+  pageIds?: string[];
+  /** Real PostScript names parsed from catalog font programs. */
+  fontPostScriptNames?: Array<{ spec: PdfFontSpec; name: string }>;
+};
+
+type BuildEnv = {
+  createCanvas: BuildPsdOptions["createCanvas"];
+  compositeCtx: Raster2D;
+  slotNameByElementId: Record<string, string>;
+  loadBitmap: NonNullable<BuildPsdOptions["loadBitmap"]>;
+  fontPostScriptNames: NonNullable<BuildPsdOptions["fontPostScriptNames"]>;
+};
+
+function num(value: unknown, fallback = 0): number {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+/** Integer pixel bounds for an element, padded so strokes are not clipped. */
+function elementBounds(el: ExportElement, dy: number, extraHeight = 0) {
+  const strokeWidth = num(el.strokeWidth);
+  const pad = strokeWidth > 0 ? Math.ceil(strokeWidth / 2) : 0;
+  const left = Math.floor(num(el.x) - pad);
+  const top = Math.floor(num(el.y) + dy - pad);
+  const right = Math.ceil(num(el.x) + num(el.width) + pad);
+  const bottom = Math.ceil(num(el.y) + dy + Math.max(num(el.height), extraHeight) + pad);
+  return {
+    left,
+    top,
+    width: Math.max(1, right - left),
+    height: Math.max(1, bottom - top),
+  };
+}
+
+/** Build the ag-psd document for a Canvas document (pages stacked). */
+export async function buildPsd(doc: ExportDocument, opts: BuildPsdOptions): Promise<Psd> {
+  const {
+    createCanvas,
+    slotBindings = {},
+    loadBitmap = async () => null,
+    fontPostScriptNames = [],
+  } = opts;
+  const pages = selectPages(doc, opts.pageIds);
+  const width = documentWidth(doc);
+  const pageHeights = pages.map((p) => pageHeight(p, doc));
+  const totalHeight = pageHeights.reduce((a, b) => a + b, 0);
+  if (width > PSD_MAX_DIMENSION || totalHeight > PSD_MAX_DIMENSION) {
+    throw new Error(
+      `document ${width}x${totalHeight} exceeds the PSD limit of ${PSD_MAX_DIMENSION}px; export per page instead`,
+    );
+  }
+
+  const slotNameByElementId: Record<string, string> = {};
+  for (const [slot, binding] of Object.entries(slotBindings)) {
+    if (binding?.element_id) slotNameByElementId[binding.element_id] = slot;
+  }
+
+  const composite = createCanvas(Math.max(1, width), Math.max(1, totalHeight));
+  const compositeCtx = composite.getContext("2d");
+  if (!compositeCtx) throw new Error("canvas 2d context unavailable");
+  const env: BuildEnv = {
+    createCanvas,
+    compositeCtx,
+    slotNameByElementId,
+    loadBitmap,
+    fontPostScriptNames,
+  };
+
+  const children: Layer[] = [];
+  let dy = 0;
+  for (let i = 0; i < pages.length; i++) {
+    const page = pages[i];
+    const currentPageHeight = pageHeights[i];
+    const pageChildren: Layer[] = [];
+
+    // Any non-transparent CSS background paints a layer: 'rgb(…)', named
+    // colors like the stock editor's default 'white', or a gradient string.
+    const bg = page.background;
+    if (typeof bg === "string" && bg && bg !== "transparent") {
+      const canvas = createCanvas(width, currentPageHeight);
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        const gradient = parseCssGradient(bg);
+        if (gradient) {
+          drawFigure(ctx, {
+            type: "figure",
+            x: 0,
+            y: 0,
+            width,
+            height: currentPageHeight,
+            custom: { gradient: bg },
+          });
+        } else {
+          ctx.fillStyle = bg;
+          ctx.fillRect(0, 0, width, currentPageHeight);
+        }
+        compositeCtx.drawImage(canvas as unknown as CanvasImageSource, 0, dy);
+        pageChildren.push({
+          name: "background",
+          left: 0,
+          top: dy,
+          canvas: canvas as unknown as HTMLCanvasElement,
+        });
+      }
+    }
+
+    for (const el of page.children ?? []) {
+      const layer = await elementToLayer(el, dy, env, 1);
+      if (layer) pageChildren.push(layer);
+    }
+
+    children.push({
+      name: `p${String(i + 1).padStart(2, "0")} ${page.name || page.id || ""}`.trim(),
+      opened: false,
+      children: pageChildren,
+    });
+    dy += currentPageHeight;
+  }
+
+  return {
+    width,
+    height: totalHeight,
+    children,
+    canvas: composite as unknown as HTMLCanvasElement,
+  };
+}
+
+function layerName(el: ExportElement, env: BuildEnv): string {
+  return (el.id && env.slotNameByElementId[el.id]) || el.name || el.id || el.type || "layer";
+}
+
+async function elementToLayer(
+  el: ExportElement,
+  dy: number,
+  env: BuildEnv,
+  parentAlpha: number,
+): Promise<Layer | null> {
+  if (el.visible === false) return null;
+  const opacity = num(el.opacity, 1);
+  const effectiveAlpha = parentAlpha * opacity;
+
+  if (el.type === "group") {
+    const children: Layer[] = [];
+    for (const child of el.children ?? []) {
+      const layer = await elementToLayer(child, dy, env, effectiveAlpha);
+      if (layer) children.push(layer);
+    }
+    return { name: layerName(el, env), opened: false, opacity, children };
+  }
+
+  if (el.type === "text") return textLayer(el, dy, env, effectiveAlpha);
+  if (el.type === "figure") return rasterLayer(el, dy, env, effectiveAlpha, drawFigure);
+  if (el.type === "image" || el.type === "svg") {
+    const bitmap = await env.loadBitmap(el).catch(() => null);
+    const draw = bitmap
+      ? (ctx: Raster2D, e: ExportElement, ox: number, oy: number) =>
+          drawBitmap(ctx, e, bitmap, ox, oy)
+      : drawPlaceholder;
+    return rasterLayer(el, dy, env, effectiveAlpha, draw);
+  }
+  return null; // unknown element type: skip, keep the export going
+}
+
+/** Rasterize an element into its own tight canvas and blit it to the composite. */
+function rasterLayer(
+  el: ExportElement,
+  dy: number,
+  env: BuildEnv,
+  effectiveAlpha: number,
+  draw: (ctx: Raster2D, el: ExportElement, ox: number, oy: number) => void,
+  extraHeight = 0,
+): Layer | null {
+  const bounds = elementBounds(el, dy, extraHeight);
+  const canvas = env.createCanvas(bounds.width, bounds.height);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  draw(ctx, el, -bounds.left, dy - bounds.top);
+
+  const composite = env.compositeCtx as Raster2D & { globalAlpha?: number };
+  composite.save();
+  composite.globalAlpha = effectiveAlpha;
+  composite.drawImage(canvas as unknown as CanvasImageSource, bounds.left, bounds.top);
+  composite.restore();
+
+  return {
+    name: layerName(el, env),
+    left: bounds.left,
+    top: bounds.top,
+    opacity: num(el.opacity, 1),
+    canvas: canvas as unknown as HTMLCanvasElement,
+  };
+}
+
+/** Editable PSD text layer carrying the rendered pixels as its raster cache. */
+function textLayer(
+  el: ExportElement,
+  dy: number,
+  env: BuildEnv,
+  effectiveAlpha: number,
+): Layer | null {
+  env.compositeCtx.font = cssFont(el);
+  const { blockHeight, offsetY, scaleX } = layoutText(el, (s) =>
+    env.compositeCtx.measureText(s).width,
+  );
+  const layer = rasterLayer(el, dy, env, effectiveAlpha, drawText, offsetY + blockHeight);
+  if (!layer) return null;
+  const fill = parseColor(el.fill) ?? { r: 0, g: 0, b: 0, a: 1 };
+  const fontSize = num(el.fontSize, 16);
+  const letterSpacing = num(el.letterSpacing);
+  const italic = el.fontStyle === "italic";
+  const catalogFamilyNames = env.fontPostScriptNames.filter(
+    ({ spec }) => spec.family === el.fontFamily,
+  );
+  const hasCatalogItalic = catalogFamilyNames.some(
+    ({ spec }) => spec.italic,
+  );
+
+  layer.text = {
+    text: transformText(el),
+    transform: [1, 0, 0, 1, num(el.x), num(el.y) + dy + offsetY],
+    shapeType: "box",
+    boxBounds: [0, 0, num(el.width), Math.max(num(el.height) - offsetY, blockHeight)],
+    antiAlias: "smooth",
+    style: {
+      font: {
+        name: fontPostScriptName(
+          el.fontFamily,
+          normalizeFontWeight(el),
+          italic,
+          env.fontPostScriptNames,
+        ),
+      },
+      fontSize,
+      fillColor: { r: fill.r, g: fill.g, b: fill.b },
+      autoLeading: false,
+      leading: resolveLeading(el),
+      ...(italic && catalogFamilyNames.length && !hasCatalogItalic
+        ? { fauxItalic: true }
+        : {}),
+      ...(scaleX < 1 ? { horizontalScale: scaleX } : {}),
+      // Photoshop tracking is in 1/1000 em; our letterSpacing is px.
+      ...(letterSpacing ? { tracking: Math.round((letterSpacing / fontSize) * 1000) } : {}),
+      strikethrough: el.textDecoration === "line-through",
+      underline: el.textDecoration === "underline",
+    },
+    paragraphStyle: { justification: justification(el.align) },
+  };
+  return layer;
+}

package/lib/detail-page-canvas/export/raster.ts

@@ -0,0 +1,255 @@
+import {
+  linearGradientKonvaProps,
+  parseCssGradient,
+  radialGradientKonvaProps,
+} from "../konva-fallback";
+import type { ExportElement } from "./document-model";
+import { cssFont, layoutText, normalizeFontWeight, transformText } from "./text-layout";
+
+/**
+ * Canvas rasterization for export layers (PSD layer pixels + composite). All
+ * geometry is in document pixels; the caller positions each element canvas.
+ *
+ * A structural 2D-context type keeps this testable in jsdom, where
+ * ``canvas.getContext('2d')`` returns null — tests inject a recording stub.
+ */
+export type Raster2D = Pick<
+  CanvasRenderingContext2D,
+  | "save"
+  | "restore"
+  | "beginPath"
+  | "closePath"
+  | "rect"
+  | "moveTo"
+  | "lineTo"
+  | "arcTo"
+  | "ellipse"
+  | "clip"
+  | "translate"
+  | "scale"
+  | "fill"
+  | "stroke"
+  | "fillRect"
+  | "fillText"
+  | "measureText"
+  | "createLinearGradient"
+  | "createRadialGradient"
+  | "drawImage"
+> & {
+  font: string;
+  fillStyle: string | CanvasGradient | CanvasPattern;
+  strokeStyle: string | CanvasGradient | CanvasPattern;
+  lineWidth: number;
+  textAlign: CanvasTextAlign;
+  textBaseline: CanvasTextBaseline;
+  letterSpacing?: string;
+};
+
+export type DrawableImage = { width: number; height: number };
+
+function num(value: unknown, fallback = 0): number {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+/** Trace the element outline: rounded rect, or ellipse for circle subtypes. */
+export function tracePath(
+  ctx: Raster2D,
+  el: ExportElement,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+): void {
+  ctx.beginPath();
+  if (el.subType === "circle" || el.subType === "ellipse") {
+    ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+    ctx.closePath();
+    return;
+  }
+  const r = Math.max(0, Math.min(num(el.cornerRadius), w / 2, h / 2));
+  if (r === 0) {
+    ctx.rect(x, y, w, h);
+    return;
+  }
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+/**
+ * Gradient fill for an element, if it carries one. The custom-props adapter
+ * promotes ``custom.gradient`` into ``fill`` for the SDK editor, so both spots
+ * are checked.
+ */
+export function elementGradient(el: ExportElement) {
+  return parseCssGradient(el.fill) ?? parseCssGradient(el.custom?.gradient);
+}
+
+/** Canvas gradient matching CSS geometry for a w×h box at local (0,0). */
+function makeCanvasGradient(
+  ctx: Raster2D,
+  gradient: NonNullable<ReturnType<typeof parseCssGradient>>,
+  w: number,
+  h: number,
+): CanvasGradient {
+  if (gradient.type === "radial") {
+    const p = radialGradientKonvaProps(gradient, w, h);
+    const g = ctx.createRadialGradient(
+      p.fillRadialGradientStartPoint.x,
+      p.fillRadialGradientStartPoint.y,
+      p.fillRadialGradientStartRadius,
+      p.fillRadialGradientEndPoint.x,
+      p.fillRadialGradientEndPoint.y,
+      p.fillRadialGradientEndRadius,
+    );
+    for (const stop of gradient.stops) g.addColorStop(clamp01(stop.offset), stop.color);
+    return g;
+  }
+  const p = linearGradientKonvaProps(gradient, w, h);
+  const g = ctx.createLinearGradient(
+    p.fillLinearGradientStartPoint.x,
+    p.fillLinearGradientStartPoint.y,
+    p.fillLinearGradientEndPoint.x,
+    p.fillLinearGradientEndPoint.y,
+  );
+  for (const stop of gradient.stops) g.addColorStop(clamp01(stop.offset), stop.color);
+  return g;
+}
+
+function clamp01(n: number): number {
+  return Math.min(1, Math.max(0, n));
+}
+
+function applyLetterSpacing(ctx: Raster2D, el: ExportElement): void {
+  const spacing = num(el.letterSpacing);
+  if (spacing && "letterSpacing" in ctx) ctx.letterSpacing = `${spacing}px`;
+}
+
+/** Draw a text element onto ctx at (el.x + ox, el.y + oy). */
+export function drawText(ctx: Raster2D, el: ExportElement, ox = 0, oy = 0): void {
+  ctx.font = cssFont(el);
+  applyLetterSpacing(ctx, el);
+  const layout = layoutText(el, (s) => ctx.measureText(s).width);
+  const { lines, leading, offsetY, scaleX } = layout;
+  const fontSize = num(el.fontSize, 16);
+  ctx.save();
+  ctx.scale(scaleX, 1);
+  ctx.font = cssFont(el);
+  applyLetterSpacing(ctx, el);
+  ctx.fillStyle = el.fill || "#000";
+  ctx.textBaseline = "middle";
+  const align = el.align === "center" || el.align === "right" ? el.align : "left";
+  ctx.textAlign = align;
+  // Anchor in unscaled coordinates, mapped into the condensed space.
+  const ax = align === "center" ? num(el.width) / 2 : align === "right" ? num(el.width) : 0;
+  const anchorX = (num(el.x) + ox + ax) / scaleX;
+  lines.forEach((line, i) => {
+    const y = num(el.y) + oy + offsetY + i * leading + leading / 2;
+    ctx.fillText(line, anchorX, y);
+    if (el.textDecoration === "line-through" && line) {
+      const w = ctx.measureText(line).width;
+      const lx = anchorX - (align === "center" ? w / 2 : align === "right" ? w : 0);
+      ctx.save();
+      ctx.strokeStyle = el.fill || "#000";
+      ctx.lineWidth = Math.max(1, fontSize / 14);
+      ctx.beginPath();
+      ctx.moveTo(lx, y);
+      ctx.lineTo(lx + w, y);
+      ctx.stroke();
+      ctx.restore();
+    }
+  });
+  ctx.restore();
+}
+
+/** Draw a figure (rect/ellipse) element onto ctx at (el.x + ox, el.y + oy). */
+export function drawFigure(ctx: Raster2D, el: ExportElement, ox = 0, oy = 0): void {
+  const x = num(el.x) + ox;
+  const y = num(el.y) + oy;
+  const w = num(el.width);
+  const h = num(el.height);
+  ctx.save();
+  tracePath(ctx, el, x, y, w, h);
+  const gradient = elementGradient(el);
+  if (gradient) {
+    ctx.save();
+    ctx.clip();
+    ctx.translate(x, y);
+    ctx.fillStyle = makeCanvasGradient(ctx, gradient, w, h);
+    ctx.fillRect(0, 0, w, h);
+    ctx.restore();
+  } else if (el.fill && el.fill !== "transparent") {
+    ctx.fillStyle = el.fill;
+    ctx.fill();
+  }
+  if (el.stroke && num(el.strokeWidth) > 0) {
+    ctx.strokeStyle = el.stroke;
+    ctx.lineWidth = num(el.strokeWidth);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+/** Draw a pre-decoded image/svg bitmap into the element box (objectFit-aware). */
+export function drawBitmap(
+  ctx: Raster2D,
+  el: ExportElement,
+  image: DrawableImage,
+  ox = 0,
+  oy = 0,
+): void {
+  const x = num(el.x) + ox;
+  const y = num(el.y) + oy;
+  const w = num(el.width);
+  const h = num(el.height);
+  ctx.save();
+  tracePath(ctx, el, x, y, w, h);
+  ctx.clip();
+  const fit = el.custom?.objectFit || "cover";
+  const iw = image.width;
+  const ih = image.height;
+  if (!iw || !ih) {
+    ctx.restore();
+    return;
+  }
+  const source = image as CanvasImageSource;
+  if (fit === "fill") {
+    ctx.drawImage(source, x, y, w, h);
+    ctx.restore();
+    return;
+  }
+  const scale = fit === "contain" ? Math.min(w / iw, h / ih) : Math.max(w / iw, h / ih);
+  const dw = iw * scale;
+  const dh = ih * scale;
+  ctx.drawImage(source, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
+  ctx.restore();
+}
+
+/** Neutral gray placeholder for image slots that have no source yet. */
+export function drawPlaceholder(ctx: Raster2D, el: ExportElement, ox = 0, oy = 0): void {
+  const x = num(el.x) + ox;
+  const y = num(el.y) + oy;
+  const w = num(el.width);
+  const h = num(el.height);
+  ctx.save();
+  tracePath(ctx, el, x, y, w, h);
+  ctx.clip();
+  ctx.fillStyle = String(el.custom?.placeholderBg ?? "#e5e7eb");
+  ctx.fillRect(x, y, w, h);
+  ctx.strokeStyle = "rgba(0, 0, 0, 0.12)";
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x + w, y + h);
+  ctx.moveTo(x + w, y);
+  ctx.lineTo(x, y + h);
+  ctx.stroke();
+  ctx.restore();
+}
+
+/** Re-export used by PSD text styling. */
+export { normalizeFontWeight, transformText };