plotlink-ows 1.0.32 → 1.2.94

package/app/web/components/export-cut.ts

@@ -0,0 +1,320 @@
+import {
+  speechTailPoints,
+  balloonOutline,
+  validateOverlaysForExport,
+  bubbleLayoutOptionsForOverlay,
+  balloonRadiusForOverlay,
+  type TailPoints,
+} from "@app-lib/overlays";
+import { textPanelDimensions } from "@app-lib/cuts";
+// Re-exported so existing importers/tests can keep getting it from export-cut.
+export { textPanelDimensions } from "@app-lib/cuts";
+import { layoutBubbleText } from "@app-lib/bubble-text";
+import { compressCanvasToBlob, MAX_IMAGE_BYTES } from "../lib/image-compress";
+
+interface Overlay {
+  id: string;
+  type: "speech" | "narration" | "sfx";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  text: string;
+  speaker?: string;
+  tailAnchor?: { x: number; y: number };
+  textStyle?: {
+    mode?: "auto" | "manual";
+    fontScale?: number;
+    fontWeight?: 400 | 700;
+    lineHeightFactor?: number;
+    speakerScale?: number;
+  };
+  bubbleStyle?: {
+    paddingX?: number;
+    paddingY?: number;
+    cornerRadius?: number;
+  };
+}
+
+// Re-exported for the existing export-size validation + tests; the compression
+// policy now lives in the shared image-compress module so the lettering export
+// and the Codex-image import path (#301) stay in lockstep.
+const MAX_SIZE = MAX_IMAGE_BYTES;
+
+export async function ensureFontsReady(families: string[]): Promise<{ ready: boolean; missing: string[] }> {
+  if (typeof document === "undefined" || !document.fonts || typeof document.fonts.load !== "function") {
+    return { ready: true, missing: [] };
+  }
+
+  const missing: string[] = [];
+  for (const family of families) {
+    try {
+      const loaded = await document.fonts.load(`16px "${family}"`);
+      // load() resolves with the FontFace[] that matched. An empty array means
+      // the family was never registered (e.g. CDN CSS blocked), so check() may
+      // only be matching a system fallback — treat as missing.
+      if (!loaded || loaded.length === 0) {
+        missing.push(family);
+      } else if (!document.fonts.check(`16px "${family}"`)) {
+        missing.push(family);
+      }
+    } catch {
+      missing.push(family);
+    }
+  }
+
+  return { ready: missing.length === 0, missing };
+}
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = url;
+  });
+}
+
+// Webtoon balloon styling (#363). A near-opaque bubble with a strong, clean
+// near-black outline reads as a comic speech balloon rather than a faint UI box
+// (the old rgba(0,0,0,0.3) hairline). Narration is an intentional parchment
+// card with a softer outline; both stroke weights scale with the panel so the
+// look holds at any export resolution.
+const SPEECH_FILL = "rgba(255, 255, 255, 0.95)";
+const SPEECH_STROKE = "#1a1a1a";
+const NARRATION_FILL = "rgba(244, 239, 230, 0.94)";
+const NARRATION_STROKE = "rgba(26, 26, 26, 0.55)";
+
+// Outline weight as a fraction of the rendered panel height, so a balloon keeps
+// the same visual line thickness whether exported small or large (#363).
+function balloonStrokeWidth(renderHeight: number): number {
+  return Math.max(2, renderHeight * 0.004);
+}
+
+// Trace a speech balloon — rounded-rect body plus its pointer tail — as ONE
+// continuous outline, from the SHARED balloonOutline geometry (#341, formerly a
+// duplicate of #317's tracer). Because the editor-preview SVG path and this
+// export canvas now build from the identical command list, the tail is always a
+// detour in the body's perimeter (never a separate stroked shape) and the
+// exported balloon matches the preview with no internal body/tail seam. `tail`
+// is null for a bubble with no (or inside-the-bubble) tail → a rounded rect.
+function traceBalloonPath(
+  ctx: CanvasRenderingContext2D,
+  ox: number,
+  oy: number,
+  ow: number,
+  oh: number,
+  tail: TailPoints | null,
+  radius?: number,
+) {
+  ctx.beginPath();
+  for (const c of balloonOutline(ox, oy, ow, oh, tail, radius)) {
+    if (c.k === "M") ctx.moveTo(c.x, c.y);
+    else if (c.k === "L") ctx.lineTo(c.x, c.y);
+    else ctx.arcTo(c.cornerX, c.cornerY, c.x, c.y, c.r);
+  }
+  ctx.closePath();
+}
+
+export function renderOverlays(
+  ctx: CanvasRenderingContext2D,
+  overlays: Overlay[],
+  width: number,
+  height: number,
+  bodyFont: string,
+  displayFont: string,
+) {
+  for (const overlay of overlays) {
+    const ox = overlay.x * width;
+    const oy = overlay.y * height;
+    const ow = overlay.width * width;
+    const oh = overlay.height * height;
+
+    const strokeW = balloonStrokeWidth(height);
+    if (overlay.type === "speech") {
+      // Trace the body and its tail as a single outline so the exported balloon
+      // has no internal seam between them (#317): one fill, one stroke, with the
+      // tail forming part of the balloon's outline instead of a shape laid over
+      // a fully-stroked body border. A rounded line join keeps the tail/corner
+      // junctions soft and organic (#363).
+      const radius = balloonRadiusForOverlay(overlay, ow, oh);
+      const tail = overlay.tailAnchor ? speechTailPoints(ox, oy, ow, oh, overlay.tailAnchor, radius) : null;
+      traceBalloonPath(ctx, ox, oy, ow, oh, tail, radius);
+      ctx.fillStyle = SPEECH_FILL;
+      ctx.fill();
+      ctx.strokeStyle = SPEECH_STROKE;
+      ctx.lineWidth = strokeW;
+      ctx.lineJoin = "round";
+      ctx.stroke();
+    } else if (overlay.type === "narration") {
+      // Narration stays rectangular but reads as an intentional webtoon caption
+      // card: gently rounded corners + a confident (if softer-than-speech)
+      // outline, instead of a hairline box (#363).
+      const nr = Math.min(ow, oh) * 0.12;
+      ctx.beginPath();
+      ctx.roundRect(ox, oy, ow, oh, nr);
+      ctx.fillStyle = NARRATION_FILL;
+      ctx.fill();
+      ctx.strokeStyle = NARRATION_STROKE;
+      ctx.lineWidth = Math.max(1.5, strokeW * 0.75);
+      ctx.lineJoin = "round";
+      ctx.stroke();
+    }
+
+    const font = overlay.type === "sfx" ? displayFont : bodyFont;
+    const hasSpeaker = overlay.type !== "sfx" && !!overlay.speaker;
+    // Measure with the actual draw font so wrapping matches what is rendered.
+    const measure = (text: string, fontSize: number, fontWeight: 400 | 700 = 400): number => {
+      ctx.font = `${fontWeight} ${fontSize}px ${font}`;
+      return ctx.measureText(text).width;
+    };
+    const layout = layoutBubbleText(
+      measure,
+      overlay.text,
+      ow,
+      oh,
+      bubbleLayoutOptionsForOverlay(overlay, height, ow, oh),
+    );
+
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    const cx = ox + ow / 2;
+    const speakerStrip = hasSpeaker ? layout.speakerFontSize * 1.2 : 0;
+
+    // Draw the speaker label on its own strip at the top of the bubble.
+    if (hasSpeaker) {
+      ctx.fillStyle = "#3a3a3a";
+      ctx.font = `700 ${layout.speakerFontSize}px ${font}`;
+      ctx.fillText(overlay.speaker as string, cx, oy + speakerStrip / 2 + oh * 0.04, ow - 6);
+    }
+
+    // Lay out the wrapped body lines, vertically centered in the remaining box.
+    const bodyTop = oy + speakerStrip;
+    const bodyH = oh - speakerStrip;
+    const totalTextH = layout.lines.length * layout.lineHeight;
+    let lineY = bodyTop + bodyH / 2 - totalTextH / 2 + layout.lineHeight / 2;
+
+    ctx.font = `${overlay.textStyle?.fontWeight ?? 400} ${layout.fontSize}px ${font}`;
+    for (const line of layout.lines) {
+      if (overlay.type === "sfx") {
+        ctx.fillStyle = "#000";
+        ctx.strokeStyle = "#fff";
+        ctx.lineWidth = 3;
+        ctx.strokeText(line, cx, lineY);
+        ctx.fillText(line, cx, lineY);
+      } else {
+        ctx.fillStyle = "#1a1a1a";
+        ctx.fillText(line, cx, lineY);
+      }
+      lineY += layout.lineHeight;
+    }
+  }
+}
+
+interface CutTextContent {
+  narration?: string;
+  dialogue?: { speaker: string; text: string }[];
+}
+
+function renderCutText(
+  ctx: CanvasRenderingContext2D,
+  content: CutTextContent,
+  width: number,
+  height: number,
+  font: string,
+) {
+  const fontSize = Math.max(14, Math.min(height * 0.05, 28));
+  ctx.font = `${fontSize}px ${font}`;
+  ctx.fillStyle = "#1a1a1a";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+
+  const lines: string[] = [];
+  if (content.dialogue) {
+    for (const d of content.dialogue) {
+      lines.push(`${d.speaker}: ${d.text}`);
+    }
+  }
+  if (content.narration) {
+    lines.push(content.narration);
+  }
+
+  const lineHeight = fontSize * 1.6;
+  const startY = height / 2 - ((lines.length - 1) * lineHeight) / 2;
+  for (let i = 0; i < lines.length; i++) {
+    ctx.fillText(lines[i], width / 2, startY + i * lineHeight, width - 40);
+  }
+}
+
+/** Style for a text/interstitial panel exported without a clean image (#351). */
+export interface TextPanelStyle {
+  /** CSS background color for the panel canvas. Defaults to white. */
+  background?: string;
+  /** Aspect ratio "W:H" (e.g. "4:5") sizing the canvas. Defaults to 800×600. */
+  aspectRatio?: string;
+}
+
+export async function exportCut(
+  cleanImageUrl: string | null,
+  overlays: Overlay[],
+  bodyFontFamily: string,
+  displayFontFamily: string,
+  cutText?: CutTextContent,
+  textPanel?: TextPanelStyle,
+): Promise<Blob> {
+  // Refuse to export an image whose overlays have invalid geometry — otherwise
+  // malformed (e.g. semantic-position) overlays render nothing and we silently
+  // produce an unlettered final (#309).
+  const overlayCheck = validateOverlaysForExport(overlays);
+  if (!overlayCheck.valid) {
+    throw new Error(overlayCheck.error ?? "Overlay geometry is invalid");
+  }
+
+  let width = 800;
+  let height = 600;
+  let img: HTMLImageElement | null = null;
+
+  if (cleanImageUrl) {
+    img = await loadImage(cleanImageUrl);
+    width = img.naturalWidth;
+    height = img.naturalHeight;
+  } else if (textPanel) {
+    // Text/interstitial panel: no clean image — render text on a styled canvas
+    // sized by the panel's aspect ratio (#351).
+    const dims = textPanelDimensions(textPanel.aspectRatio);
+    if (dims) {
+      width = dims.width;
+      height = dims.height;
+    }
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d")!;
+
+  if (img) {
+    ctx.drawImage(img, 0, 0, width, height);
+  } else {
+    ctx.fillStyle = textPanel?.background || "#ffffff";
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  renderOverlays(ctx, overlays, width, height, bodyFontFamily, displayFontFamily);
+
+  if (cutText && overlays.length === 0 && !img) {
+    renderCutText(ctx, cutText, width, height, bodyFontFamily);
+  }
+
+  return compressCanvasToBlob(canvas);
+}
+
+export function validateExportSize(blob: Blob): { valid: boolean; error?: string } {
+  if (blob.size > MAX_SIZE) {
+    return { valid: false, error: `Image is ${(blob.size / 1024).toFixed(0)}KB, exceeds 1MB limit` };
+  }
+  return { valid: true };
+}
+
+export { MAX_SIZE };

package/app/web/dist/assets/export-cut-nKQ_n2-J.js

@@ -0,0 +1 @@
+import{M as w,v as O,t as A,c as M,b as R,s as H,l as I,a as B,d as F}from"./index-BAZGwVwj.js";const z=w;async function G(e){if(typeof document>"u"||!document.fonts||typeof document.fonts.load!="function")return{ready:!0,missing:[]};const n=[];for(const s of e)try{const t=await document.fonts.load(`16px "${s}"`);!t||t.length===0?n.push(s):document.fonts.check(`16px "${s}"`)||n.push(s)}catch{n.push(s)}return{ready:n.length===0,missing:n}}function C(e){return new Promise((n,s)=>{const t=new Image;t.crossOrigin="anonymous",t.onload=()=>n(t),t.onerror=()=>s(new Error("Failed to load image")),t.src=e})}const W="rgba(255, 255, 255, 0.95)",_="#1a1a1a",L="rgba(244, 239, 230, 0.94)",N="rgba(26, 26, 26, 0.55)";function Y(e){return Math.max(2,e*.004)}function K(e,n,s,t,c,d,f){e.beginPath();for(const o of F(n,s,t,c,d,f))o.k==="M"?e.moveTo(o.x,o.y):o.k==="L"?e.lineTo(o.x,o.y):e.arcTo(o.cornerX,o.cornerY,o.x,o.y,o.r);e.closePath()}function P(e,n,s,t,c,d){var f;for(const o of n){const l=o.x*s,i=o.y*t,r=o.width*s,a=o.height*t,y=Y(t);if(o.type==="speech"){const u=R(o,r,a),k=o.tailAnchor?H(l,i,r,a,o.tailAnchor,u):null;K(e,l,i,r,a,k,u),e.fillStyle=W,e.fill(),e.strokeStyle=_,e.lineWidth=y,e.lineJoin="round",e.stroke()}else if(o.type==="narration"){const u=Math.min(r,a)*.12;e.beginPath(),e.roundRect(l,i,r,a,u),e.fillStyle=L,e.fill(),e.strokeStyle=N,e.lineWidth=Math.max(1.5,y*.75),e.lineJoin="round",e.stroke()}const g=o.type==="sfx"?d:c,T=o.type!=="sfx"&&!!o.speaker,h=I((u,k,E=400)=>(e.font=`${E} ${k}px ${g}`,e.measureText(u).width),o.text,r,a,B(o,t,r,a));e.textAlign="center",e.textBaseline="middle";const p=l+r/2,S=T?h.speakerFontSize*1.2:0;T&&(e.fillStyle="#3a3a3a",e.font=`700 ${h.speakerFontSize}px ${g}`,e.fillText(o.speaker,p,i+S/2+a*.04,r-6));const v=i+S,b=a-S,$=h.lines.length*h.lineHeight;let m=v+b/2-$/2+h.lineHeight/2;e.font=`${((f=o.textStyle)==null?void 0:f.fontWeight)??400} ${h.fontSize}px ${g}`;for(const u of h.lines)o.type==="sfx"?(e.fillStyle="#000",e.strokeStyle="#fff",e.lineWidth=3,e.strokeText(u,p,m),e.fillText(u,p,m)):(e.fillStyle="#1a1a1a",e.fillText(u,p,m)),m+=h.lineHeight}}function X(e,n,s,t,c){const d=Math.max(14,Math.min(t*.05,28));e.font=`${d}px ${c}`,e.fillStyle="#1a1a1a",e.textAlign="center",e.textBaseline="middle";const f=[];if(n.dialogue)for(const i of n.dialogue)f.push(`${i.speaker}: ${i.text}`);n.narration&&f.push(n.narration);const o=d*1.6,l=t/2-(f.length-1)*o/2;for(let i=0;i<f.length;i++)e.fillText(f[i],s/2,l+i*o,s-40)}async function Z(e,n,s,t,c,d){const f=O(n);if(!f.valid)throw new Error(f.error??"Overlay geometry is invalid");let o=800,l=600,i=null;if(e)i=await C(e),o=i.naturalWidth,l=i.naturalHeight;else if(d){const y=A(d.aspectRatio);y&&(o=y.width,l=y.height)}const r=document.createElement("canvas");r.width=o,r.height=l;const a=r.getContext("2d");return i?a.drawImage(i,0,0,o,l):(a.fillStyle=(d==null?void 0:d.background)||"#ffffff",a.fillRect(0,0,o,l)),P(a,n,o,l,s,t),c&&n.length===0&&!i&&X(a,c,o,l,s),M(r)}function j(e){return e.size>z?{valid:!1,error:`Image is ${(e.size/1024).toFixed(0)}KB, exceeds 1MB limit`}:{valid:!0}}export{z as MAX_SIZE,G as ensureFontsReady,Z as exportCut,P as renderOverlays,A as textPanelDimensions,j as validateExportSize};