@akairos/typeset-studio 0.2.1 → 0.2.3

package/src/web/hooks/useTypeset.ts

@@ -1,8 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
+import { clearCache } from "@chenglou/pretext";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { getDefaultConfig, runTypeset } from "../../core/engine";
 import { computeStageDimensions, getCanvasSpec } from "../../core/geometry";
 import { resolveImagePlacement } from "../../core/image-layout";
-import { applyTemplateImages } from "../../core/template";
+import { applyTemplateImages, validateTemplateAssets } from "../../core/template";
+import { backgroundImageLayout, restoreImageLayout, snapshotImageLayout, type ImageLayout } from "./image-layout";
 import {
   AlgorithmParams,
   AspectRatioType,
@@ -27,9 +29,25 @@ const INITIAL_MARKDOWN = `# 大模型纯算法排版深度剖析
 - 任意画板比例智能自适应
 `;
 
-export function useTypeset() {
-  const [aspectRatio, setAspectRatio] = useState<AspectRatioType>("longform-3-4");
+// 统一预设配图的页内序号计算，手动坐标和自由图层保持原样。
+function resolvePresetImage(
+  image: FlowImage,
+  images: FlowImage[],
+  stageWidth: number,
+  stageHeight: number,
+): FlowImage {
+  if (image.isAbsolute || !image.layoutPreset || image.layoutPreset === "custom") return image;
+  const page = image.pageIndex || 1;
+  const indexOnPage = images.filter((item) => Boolean(item.templateAssetKey) === Boolean(image.templateAssetKey) && (item.pageIndex || 1) === page)
+    .findIndex((item) => item.id === image.id);
+  return resolveImagePlacement(image, indexOnPage, stageWidth, stageHeight);
+}
+
+export function useTypeset(adminKey: string, isVerified: boolean | null) {
+  const [error, setError] = useState<string | null>(null);
+  const [fontVersion, setFontVersion] = useState(0);
   const [config, setConfig] = useState<TypesetConfig>(() => getDefaultConfig("longform-3-4"));
+  const aspectRatio = config.aspectRatio;
   const [markdown, setMarkdown] = useState<string>(INITIAL_MARKDOWN);
   const [images, setImages] = useState<FlowImage[]>([
     {
@@ -46,18 +64,54 @@ export function useTypeset() {
     },
   ]);
   const [highlightWords, setHighlightWords] = useState<string[]>(["算法排版", "确定性", "空间秩序"]);
+  // 上传或应用模板时记录初始布局，背景切换另存一份勾选前的布局。
+  const initialImageLayouts = useRef(new Map(images.map((image) => [image.id, snapshotImageLayout(image)])));
+  const [backgroundLayouts, setBackgroundLayouts] = useState<Record<string, ImageLayout>>({});
 
   // Calculate typeset result synchronously (instant 60fps)
-  const result: TypesetResult = useMemo(() => {
-    return runTypeset({
-      markdown,
-      images,
-      config,
-      highlightWords,
-    });
-  }, [markdown, images, config, highlightWords]);
+  const { result, layoutError } = useMemo(() => {
+    try {
+      return { result: runTypeset({ markdown, images, config, highlightWords }), layoutError: null };
+    } catch (err) {
+      return {
+        result: { pages: [], pageCount: 0, canvasSpec: getCanvasSpec(config.aspectRatio), config } satisfies TypesetResult,
+        layoutError: err instanceof Error ? err.message : "排版失败",
+      };
+    }
+  }, [markdown, images, config, highlightWords, fontVersion]);
+
+  useEffect(() => {
+    let active = true;
+    let refreshTimer: ReturnType<typeof setTimeout> | undefined;
+    const refresh = () => {
+      if (!active) return;
+      clearTimeout(refreshTimer);
+      refreshTimer = setTimeout(() => {
+        clearCache();
+        setFontVersion((version) => version + 1);
+      }, 0);
+    };
+    document.fonts.ready.then(refresh);
+    document.fonts.addEventListener("loadingdone", refresh);
+    window.addEventListener("typeset-fonts-loaded", refresh);
+    return () => {
+      active = false;
+      clearTimeout(refreshTimer);
+      document.fonts.removeEventListener("loadingdone", refresh);
+      window.removeEventListener("typeset-fonts-loaded", refresh);
+    };
+  }, []);
 
   useEffect(() => {
+    if (!isVerified) return;
+    let active = true;
+    const headers = { "x-admin-key": adminKey };
+    const readTemplate = async (url: string) => {
+      const response = await fetch(url, { headers });
+      const data = await response.json();
+      if (!response.ok || !data.ok) throw new Error(data.message || data.error || "加载模板失败");
+      return data;
+    };
     const initFromUrlAndDefaults = async () => {
       try {
         const params = new URLSearchParams(window.location.search);
@@ -76,48 +130,45 @@ export function useTypeset() {
 
         // 1. Handle explicit template loading
         if (urlTemplate) {
-          const res = await fetch(`/api/templates/resolve/${encodeURIComponent(urlTemplate)}`);
-          const data = await res.json();
+          const data = await readTemplate(`/api/templates/resolve/${encodeURIComponent(urlTemplate)}`);
           if (data.ok && data.template) {
-            loadTemplate(data.template);
+            if (active) loadTemplate(data.template);
             return;
           }
         }
 
         // 2. Handle slot loading
         if (urlSlot) {
-          const res = await fetch(`/api/templates/slots?account=${encodeURIComponent(urlAccount)}`);
-          const data = await res.json();
+          const data = await readTemplate(`/api/templates/slots?account=${encodeURIComponent(urlAccount)}`);
           if (data.ok && data.slots?.[urlSlot]?.template) {
-            loadTemplate(data.slots[urlSlot].template);
+            if (active) loadTemplate(data.slots[urlSlot].template);
             return;
           }
         }
 
         // 3. If no template or slot in URL, check slot defaults or global default
-        const res = await fetch(`/api/templates/slots?account=${encodeURIComponent(urlAccount)}`);
-        const data = await res.json();
+        const data = await readTemplate(`/api/templates/slots?account=${encodeURIComponent(urlAccount)}`);
         if (data.ok && data.slots?.newspic_content?.template) {
-          loadTemplate(data.slots.newspic_content.template);
+          if (active) loadTemplate(data.slots.newspic_content.template);
           return;
         }
 
         // 4. Fallback default
-        const defRes = await fetch("/api/templates/default");
-        const defData = await defRes.json();
+        const defData = await readTemplate("/api/templates/default");
         if (defData.ok && defData.template) {
-          loadTemplate(defData.template);
+          if (active) loadTemplate(defData.template);
         }
-      } catch {
-        // ignore
+      } catch (err) {
+        if (active) setError(err instanceof Error ? err.message : "加载模板失败");
       }
     };
 
+    setError(null);
     initFromUrlAndDefaults();
-  }, []);
+    return () => { active = false; };
+  }, [adminKey, isVerified]);
 
   const switchAspectRatio = (ratio: AspectRatioType) => {
-    setAspectRatio(ratio);
     const spec = getCanvasSpec(ratio);
     const nextDefault = getDefaultConfig(ratio);
     const { stageWidth, stageHeight } = computeStageDimensions(
@@ -125,24 +176,7 @@ export function useTypeset() {
       nextDefault.algorithm.safeArea,
       nextDefault.algorithm.contentBottomGap,
     );
-    setImages((prev) =>
-      prev.map((img) => {
-        if (!img.isAbsolute && img.layoutPreset && img.layoutPreset !== "custom") {
-          const page = img.pageIndex || 1;
-          const samePageList = prev.filter((im) => (im.pageIndex || 1) === page);
-          const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === img.id));
-          const resolved = resolveImagePlacement(img, indexOnPage, stageWidth, stageHeight);
-          return {
-            ...img,
-            x: resolved.x,
-            y: resolved.y,
-            width: resolved.width,
-            height: resolved.height,
-          };
-        }
-        return img;
-      }),
-    );
+    setImages((prev) => prev.map((image) => resolvePresetImage(image, prev, stageWidth, stageHeight)));
     setConfig((prev) => {
       return {
         ...prev,
@@ -197,7 +231,7 @@ export function useTypeset() {
       config.algorithm.contentBottomGap,
     );
     const targetPage = image.pageIndex || 1;
-    const samePageImages = images.filter((im) => (im.pageIndex || 1) === targetPage);
+    const samePageImages = images.filter((im) => !im.templateAssetKey && (im.pageIndex || 1) === targetPage);
     const indexOnPage = samePageImages.length;
 
     const temp: FlowImage = {
@@ -212,14 +246,17 @@ export function useTypeset() {
       width: resolved.width,
       height: resolved.height,
     };
+    initialImageLayouts.current.set(newImage.id, snapshotImageLayout(newImage));
     setImages((prev) => [...prev, newImage]);
   };
 
   const updateImage = (id: string, partial: Partial<FlowImage>) => {
+    const previousBackground = partial.isAbsolute === false ? backgroundLayouts[id] : undefined;
+    if (previousBackground) clearBackgroundLayout(id);
     setImages((prev) => {
       const nextImages = prev.map((img) => {
         if (img.id !== id) return img;
-        const merged: FlowImage = { ...img, ...partial };
+        const merged = restoreImageLayout(img, { ...previousBackground, ...partial });
         if (partial.layoutPreset && partial.layoutPreset !== "custom") {
           // Clear stale preset coordinates when switching presets
           delete merged.x;
@@ -235,35 +272,55 @@ export function useTypeset() {
 
       // If non-custom flow preset, recalculate clean coordinates based on its page index
       if (!updatedImg.isAbsolute && updatedImg.layoutPreset && updatedImg.layoutPreset !== "custom") {
-        const page = updatedImg.pageIndex || 1;
-        const samePageList = nextImages.filter((im) => (im.pageIndex || 1) === page);
-        const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === id));
-
         const spec = getCanvasSpec(aspectRatio);
         const { stageWidth, stageHeight } = computeStageDimensions(
           spec,
           config.algorithm.safeArea,
           config.algorithm.contentBottomGap,
         );
-        const resolved = resolveImagePlacement(updatedImg, indexOnPage, stageWidth, stageHeight);
-        return nextImages.map((im) =>
-          im.id === id
-            ? {
-                ...im,
-                x: resolved.x,
-                y: resolved.y,
-                width: resolved.width,
-                height: resolved.height,
-              }
-            : im,
-        );
+        return nextImages.map((image) => image.id === id
+          ? resolvePresetImage(image, nextImages, stageWidth, stageHeight)
+          : image);
       }
 
       return nextImages;
     });
   };
 
+  // 清除背景状态，避免恢复布局后复选框仍处于选中状态。
+  const clearBackgroundLayout = (id: string) => setBackgroundLayouts((prev) => {
+    const next = { ...prev };
+    delete next[id];
+    return next;
+  });
+
+  // 背景复选框只覆盖当前布局，取消时恢复勾选前的快照。
+  const toggleImageBackground = (id: string, enabled: boolean) => {
+    const image = images.find((item) => item.id === id);
+    if (!image) return;
+    if (enabled) {
+      if (backgroundLayouts[id]) return;
+      setBackgroundLayouts((prev) => ({ ...prev, [id]: snapshotImageLayout(image) }));
+      updateImage(id, backgroundImageLayout(config));
+    } else {
+      const layout = backgroundLayouts[id];
+      if (!layout) return;
+      clearBackgroundLayout(id);
+      setImages((prev) => prev.map((item) => item.id === id ? restoreImageLayout(item, layout) : item));
+    }
+  };
+
+  // 重置到本次上传或应用模板时的布局，不改内容和固定素材标识。
+  const resetImageLayout = (id: string) => {
+    const layout = initialImageLayouts.current.get(id);
+    if (!layout) return;
+    clearBackgroundLayout(id);
+    setImages((prev) => prev.map((image) => image.id === id ? restoreImageLayout(image, layout) : image));
+  };
+
   const removeImage = (id: string) => {
+    initialImageLayouts.current.delete(id);
+    clearBackgroundLayout(id);
     setImages((prev) => {
       const remaining = prev.filter((img) => img.id !== id);
       const spec = getCanvasSpec(aspectRatio);
@@ -272,22 +329,7 @@ export function useTypeset() {
         config.algorithm.safeArea,
         config.algorithm.contentBottomGap,
       );
-      return remaining.map((img) => {
-        if (!img.isAbsolute && img.layoutPreset && img.layoutPreset !== "custom") {
-          const page = img.pageIndex || 1;
-          const samePageList = remaining.filter((im) => (im.pageIndex || 1) === page);
-          const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === img.id));
-          const resolved = resolveImagePlacement(img, indexOnPage, stageWidth, stageHeight);
-          return {
-            ...img,
-            x: resolved.x,
-            y: resolved.y,
-            width: resolved.width,
-            height: resolved.height,
-          };
-        }
-        return img;
-      });
+      return remaining.map((image) => resolvePresetImage(image, remaining, stageWidth, stageHeight));
     });
   };
 
@@ -309,30 +351,23 @@ export function useTypeset() {
         config.algorithm.contentBottomGap,
       );
 
-      return next.map((img) => {
-        if (!img.isAbsolute && img.layoutPreset && img.layoutPreset !== "custom") {
-          const page = img.pageIndex || 1;
-          const samePageList = next.filter((im) => (im.pageIndex || 1) === page);
-          const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === img.id));
-          const resolved = resolveImagePlacement(img, indexOnPage, stageWidth, stageHeight);
-          return {
-            ...img,
-            x: resolved.x,
-            y: resolved.y,
-            width: resolved.width,
-            height: resolved.height,
-          };
-        }
-        return img;
-      });
+      return next.map((image) => resolvePresetImage(image, next, stageWidth, stageHeight));
     });
   };
 
   const loadTemplate = (tpl: TypesetConfig) => {
-    setConfig(tpl);
-    setAspectRatio(tpl.aspectRatio);
-    if (tpl.images) {
-      setImages((prev) => applyTemplateImages(prev, tpl.images));
+    try {
+      validateTemplateAssets(tpl.images);
+      setConfig(tpl);
+      setBackgroundLayouts({});
+      setImages((prev) => {
+        const next = applyTemplateImages(prev, tpl.images);
+        initialImageLayouts.current = new Map(next.map((image) => [image.id, snapshotImageLayout(image)]));
+        return next;
+      });
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "模板素材无效");
     }
   };
 
@@ -344,6 +379,7 @@ export function useTypeset() {
   };
 
   return {
+    error: layoutError || error,
     aspectRatio,
     switchAspectRatio,
     config,
@@ -353,6 +389,9 @@ export function useTypeset() {
     images,
     addImage,
     updateImage,
+    toggleImageBackground,
+    resetImageLayout,
+    backgroundImageIds: Object.keys(backgroundLayouts),
     removeImage,
     moveImage,
     highlightWords,

package/data/templates/tpl_1791681833354_iofsk.json

@@ -1,46 +0,0 @@
-{
-  "name": "封面1",
-  "aspectRatio": "wechat-cover-2.35",
-  "algorithm": {
-    "baseFontSize": 56,
-    "scaleRatio": 1.3,
-    "lineHeightMultiplier": 1.45,
-    "obstacleGap": 24,
-    "targetFillRatio": 0.8,
-    "contentBottomGap": 20,
-    "textAlign": "center",
-    "verticalAlign": "center",
-    "safeArea": {
-      "top": 40,
-      "right": 60,
-      "bottom": 40,
-      "left": 60
-    }
-  },
-  "theme": {
-    "bgColor": "#f9fcfa",
-    "textColor": "#22201d",
-    "headingColor": "#0f2e22",
-    "accentColor": "#1d4f39",
-    "quoteColor": "#474038",
-    "captionColor": "#71717a",
-    "watermarkColor": "#52525b",
-    "cardBg": "#ffffff"
-  },
-  "typography": {
-    "headingFont": "PingFang SC",
-    "bodyFont": "SourceHanSansSC, sans-serif"
-  },
-  "footerText": "TECH ENGINEERING INSIGHTS",
-  "watermarkText": "DEV // ARCHITECTURE",
-  "chrome": {
-    "showHeader": false,
-    "showWatermark": true,
-    "showPageNumber": false,
-    "showFooter": true,
-    "showFooterDivider": false,
-    "showFooterText": true,
-    "showFillRatio": false
-  },
-  "id": "tpl_1791681833354_iofsk"
-}

package/data/templates/tpl_1791682603199_875ny.json

@@ -1,66 +0,0 @@
-{
-  "name": "封面2",
-  "aspectRatio": "wechat-cover-2.35",
-  "algorithm": {
-    "baseFontSize": 56,
-    "scaleRatio": 1.25,
-    "lineHeightMultiplier": 1.45,
-    "obstacleGap": 24,
-    "targetFillRatio": 0.8,
-    "contentBottomGap": 20,
-    "textAlign": "center",
-    "verticalAlign": "center",
-    "safeArea": {
-      "top": 40,
-      "right": 60,
-      "bottom": 40,
-      "left": 60
-    }
-  },
-  "theme": {
-    "bgColor": "#ffffff",
-    "textColor": "#171717",
-    "headingColor": "#171717",
-    "accentColor": "#059669",
-    "quoteColor": "#525252",
-    "captionColor": "#737373",
-    "watermarkColor": "#a3a3a3",
-    "cardBg": "#f5f5f5",
-    "borderSubtle": "#e5e5e5"
-  },
-  "typography": {
-    "headingFont": "PingFang SC",
-    "bodyFont": "Songti SC"
-  },
-  "footerText": "Typeset Studio · 纯算法排版",
-  "watermarkText": "@Antigravity",
-  "chrome": {
-    "showHeader": true,
-    "showWatermark": true,
-    "showPageNumber": true,
-    "showFooter": true,
-    "showFooterDivider": false,
-    "showFooterText": true,
-    "showFillRatio": false
-  },
-  "images": [
-    {
-      "id": "img_demo_1",
-      "src": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&auto=format&fit=crop&q=80",
-      "alt": "抽象建筑线条",
-      "caption": "图 1：建筑结构中的空间秩序感",
-      "x": 1276,
-      "y": 170,
-      "width": 700,
-      "height": 590,
-      "captionHeight": 40,
-      "layoutPreset": "custom",
-      "isAbsolute": true,
-      "zIndex": 0,
-      "rotate": -14,
-      "opacity": 0.65,
-      "borderRadius": 136
-    }
-  ],
-  "id": "tpl_1791682603199_875ny"
-}

package/data/templates/tpl_1791682780929_qnuiy.json

@@ -1,66 +0,0 @@
-{
-  "name": "封面2-3",
-  "aspectRatio": "wechat-cover-2.35",
-  "algorithm": {
-    "baseFontSize": 56,
-    "scaleRatio": 1.25,
-    "lineHeightMultiplier": 1.45,
-    "obstacleGap": 24,
-    "targetFillRatio": 0.8,
-    "contentBottomGap": 20,
-    "textAlign": "center",
-    "verticalAlign": "center",
-    "safeArea": {
-      "top": 40,
-      "right": 60,
-      "bottom": 40,
-      "left": 60
-    }
-  },
-  "theme": {
-    "bgColor": "#0a0a0a",
-    "textColor": "#ededed",
-    "headingColor": "#ffffff",
-    "accentColor": "#00e676",
-    "quoteColor": "#a0a0a0",
-    "captionColor": "#737373",
-    "watermarkColor": "#a3a3a3",
-    "cardBg": "#121212",
-    "borderSubtle": "#e5e5e5"
-  },
-  "typography": {
-    "headingFont": "PingFang SC",
-    "bodyFont": "Songti SC"
-  },
-  "footerText": "Typeset Studio · 纯算法排版",
-  "watermarkText": "@Antigravity",
-  "chrome": {
-    "showHeader": true,
-    "showWatermark": true,
-    "showPageNumber": true,
-    "showFooter": true,
-    "showFooterDivider": false,
-    "showFooterText": true,
-    "showFillRatio": false
-  },
-  "images": [
-    {
-      "src": "/uploads/1791682691652_fsgtx6.png",
-      "alt": "头像-捧脸大笑-v4.png",
-      "caption": "",
-      "x": 1276,
-      "y": 170,
-      "width": 700,
-      "height": 590,
-      "captionHeight": 40,
-      "layoutPreset": "custom",
-      "id": "img_1791682691661_1zpg",
-      "isAbsolute": true,
-      "rotate": -14,
-      "opacity": 0.65,
-      "zIndex": 0,
-      "borderRadius": 136
-    }
-  ],
-  "id": "tpl_1791682780929_qnuiy"
-}

package/data/templates/tpl_longform_paper_sage.json

@@ -1,47 +0,0 @@
-{
-  "name": "纸白典雅长图文 (3:4)",
-  "aspectRatio": "longform-3-4",
-  "algorithm": {
-    "baseFontSize": 40,
-    "scaleRatio": 1.25,
-    "lineHeightMultiplier": 1.45,
-    "obstacleGap": 24,
-    "targetFillRatio": 0.8,
-    "contentBottomGap": 20,
-    "textAlign": "left",
-    "verticalAlign": "top",
-    "safeArea": {
-      "top": 96,
-      "right": 88,
-      "bottom": 96,
-      "left": 88
-    }
-  },
-  "theme": {
-    "bgColor": "#fbfcfb",
-    "textColor": "#1c1917",
-    "headingColor": "#0c0a09",
-    "accentColor": "#047857",
-    "quoteColor": "#44403c",
-    "captionColor": "#78716c",
-    "watermarkColor": "#a8a29e",
-    "cardBg": "#ffffff"
-  },
-  "typography": {
-    "headingFont": "Songti SC",
-    "bodyFont": "Songti SC"
-  },
-  "footerText": "Typeset Studio · 纯算法空间排版",
-  "watermarkText": "@ANTIGRAVITY",
-  "chrome": {
-    "showHeader": true,
-    "showWatermark": true,
-    "showPageNumber": true,
-    "showFooter": true,
-    "showFooterDivider": true,
-    "showFooterText": true,
-    "showFillRatio": false
-  },
-  "id": "tpl_longform_paper_sage",
-  "slot": "newspic_content"
-}

package/data/templates/tpl_longform_vintage_news.json

@@ -1,47 +0,0 @@
-{
-  "name": "复古报刊多图 (3:4)",
-  "aspectRatio": "longform-3-4",
-  "algorithm": {
-    "baseFontSize": 38,
-    "scaleRatio": 1.25,
-    "lineHeightMultiplier": 1.45,
-    "obstacleGap": 24,
-    "targetFillRatio": 0.8,
-    "contentBottomGap": 20,
-    "textAlign": "left",
-    "verticalAlign": "top",
-    "safeArea": {
-      "top": 96,
-      "right": 88,
-      "bottom": 96,
-      "left": 88
-    }
-  },
-  "theme": {
-    "bgColor": "#f7f4ee",
-    "textColor": "#262320",
-    "headingColor": "#141210",
-    "accentColor": "#991b1b",
-    "quoteColor": "#57534e",
-    "captionColor": "#78716c",
-    "watermarkColor": "#a8a29e",
-    "cardBg": "#eee9df"
-  },
-  "typography": {
-    "headingFont": "SourceHanSerifSC, serif",
-    "bodyFont": "SourceHanSerifSC, serif"
-  },
-  "footerText": "WEEKLY REPORT · 观察与沉淀",
-  "watermarkText": "VOL. 42 // THE CHRONICLE",
-  "chrome": {
-    "showHeader": true,
-    "showWatermark": true,
-    "showPageNumber": true,
-    "showFooter": true,
-    "showFooterDivider": true,
-    "showFooterText": true,
-    "showFillRatio": false
-  },
-  "id": "tpl_longform_vintage_news",
-  "slot": "newspic_content"
-}