);
canvas.requestRenderAll();
saveHistory(pageId);
- setSelectedObject({ ...selectedObject } as fabric.FabricObject);
+ bumpSelection();
},
[getActiveCanvas, selectedObject, saveHistory]
);
diff --git a/src/client/main.tsx b/src/client/main.tsx
index 29c5f7fe..6a5e3394 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -1,5 +1,11 @@
import { render } from "preact";
+import * as fabric from "fabric";
import { App } from "./app";
import "./styles.css";
+// Fabric v6 drops unknown properties on serialize, and `canvas.toJSON()` takes
+// no argument list any more. Registering `fieldName` here is what makes it
+// survive every save and reload, without touching the toJSON call sites.
+fabric.FabricObject.customProperties = ["fieldName"];
+
render(, document.getElementById("app")!);
diff --git a/src/server/fields.test.ts b/src/server/fields.test.ts
new file mode 100644
index 00000000..57da5648
--- /dev/null
+++ b/src/server/fields.test.ts
@@ -0,0 +1,128 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { collectFields, fillPages, type PageJSON } from "./fields.js";
+
+function page(id: string, objects: unknown[]): PageJSON {
+ return { id, canvas_json: JSON.stringify({ version: "6.0.0", objects }) };
+}
+
+const HEADLINE = { type: "textbox", text: "Your inspiring quote goes here", fieldName: "headline" };
+const LOGO = { type: "image", src: "https://example.com/old.png", fieldName: "logo" };
+const UNTAGGED = { type: "textbox", text: "not a field" };
+
+test("collectFields reports name, type and current value", () => {
+ const fields = collectFields([page("p1", [HEADLINE, LOGO, UNTAGGED])]);
+
+ assert.deepEqual(fields, [
+ { name: "headline", type: "text", value: "Your inspiring quote goes here", page_ids: ["p1"] },
+ { name: "logo", type: "image", value: "https://example.com/old.png", page_ids: ["p1"] },
+ ]);
+});
+
+test("a name reused across pages is one field listing every page", () => {
+ const fields = collectFields([page("p1", [LOGO]), page("p2", [LOGO])]);
+
+ assert.equal(fields.length, 1);
+ assert.deepEqual(fields[0].page_ids, ["p1", "p2"]);
+});
+
+test("fields inside groups are found", () => {
+ const fields = collectFields([page("p1", [{ type: "group", objects: [HEADLINE] }])]);
+
+ assert.deepEqual(fields.map((f) => f.name), ["headline"]);
+});
+
+test("Fabric v6's capitalised type names are recognised", () => {
+ // A canvas that has been through the editor serialises as "Textbox"/"Image"/
+ // "Rect", not the lowercase names used in the seed templates. Both must work.
+ const objects = [
+ { type: "Textbox", text: "hi", fieldName: "headline" },
+ { type: "Image", src: "https://example.com/a.png", fieldName: "logo" },
+ { type: "Rect", fill: "#000", fieldName: "backdrop" },
+ ];
+
+ assert.deepEqual(
+ collectFields([page("p1", objects)]).map((f) => [f.name, f.type]),
+ [
+ ["headline", "text"],
+ ["logo", "image"],
+ ]
+ );
+});
+
+test("a tag on an object that is neither text nor image is ignored", () => {
+ assert.deepEqual(collectFields([page("p1", [{ type: "rect", fieldName: "box" }])]), []);
+});
+
+test("blank and non-string field names are ignored", () => {
+ const objects = [
+ { type: "textbox", text: "a", fieldName: " " },
+ { type: "textbox", text: "b", fieldName: 42 },
+ ];
+ assert.deepEqual(collectFields([page("p1", objects)]), []);
+});
+
+test("empty and corrupt canvases are skipped, not thrown on", () => {
+ const pages = [
+ { id: "p1", canvas_json: "{}" },
+ { id: "p2", canvas_json: "not json" },
+ page("p3", [HEADLINE]),
+ ];
+ assert.deepEqual(collectFields(pages).map((f) => f.name), ["headline"]);
+});
+
+test("fill writes text and image by the object's own type", () => {
+ const result = fillPages([page("p1", [HEADLINE, LOGO])], {
+ headline: "Q3 revenue up 40%",
+ logo: "https://example.com/new.png",
+ });
+
+ const objects = JSON.parse(result.pages[0].canvas_json).objects;
+ assert.equal(objects[0].text, "Q3 revenue up 40%");
+ assert.equal(objects[1].src, "https://example.com/new.png");
+ assert.deepEqual(result.filled.sort(), ["headline", "logo"]);
+ assert.deepEqual(result.unmatched, []);
+});
+
+test("one name on two pages fills both", () => {
+ const result = fillPages([page("p1", [LOGO]), page("p2", [LOGO])], {
+ logo: "https://example.com/new.png",
+ });
+
+ for (const filledPage of result.pages) {
+ assert.equal(JSON.parse(filledPage.canvas_json).objects[0].src, "https://example.com/new.png");
+ }
+});
+
+test("an unknown name is reported, not fatal", () => {
+ const result = fillPages([page("p1", [LOGO])], {
+ logo: "https://example.com/new.png",
+ nope: "y",
+ });
+
+ assert.deepEqual(result.filled, ["logo"]);
+ assert.deepEqual(result.unmatched, ["nope"]);
+});
+
+test("fill does not mutate the pages it was given", () => {
+ const original = page("p1", [HEADLINE]);
+ const before = original.canvas_json;
+
+ fillPages([original], { headline: "changed" });
+
+ assert.equal(original.canvas_json, before);
+});
+
+test("untouched pages are returned unchanged", () => {
+ const pages = [page("p1", [HEADLINE]), page("p2", [UNTAGGED])];
+ const result = fillPages(pages, { headline: "changed" });
+
+ assert.equal(result.pages[1].canvas_json, pages[1].canvas_json);
+});
+
+test("filling with an empty string clears the text rather than being skipped", () => {
+ const result = fillPages([page("p1", [HEADLINE])], { headline: "" });
+
+ assert.equal(JSON.parse(result.pages[0].canvas_json).objects[0].text, "");
+ assert.deepEqual(result.filled, ["headline"]);
+});
diff --git a/src/server/fields.ts b/src/server/fields.ts
new file mode 100644
index 00000000..729caa48
--- /dev/null
+++ b/src/server/fields.ts
@@ -0,0 +1,153 @@
+/**
+ * Template fields — named, typed slots on a design.
+ *
+ * Any Fabric object carrying a `fieldName` becomes a fill point: text objects
+ * take a string, image objects take a URL. The name is deliberately not unique.
+ * The same name on several objects, or on several pages, fills all of them —
+ * that is how a logo or a campaign headline repeats across a carousel.
+ *
+ * Everything here is plain JSON walking with no Fabric dependency, so it runs
+ * on the server (Workers have no canvas) as well as in the browser.
+ */
+
+export type FieldType = "text" | "image";
+
+export interface Field {
+ name: string;
+ type: FieldType;
+ /** Current value in the design — the default a caller gets if it fills nothing. */
+ value: string;
+ /** Every page carrying this field, in page order. */
+ page_ids: string[];
+}
+
+export interface PageJSON {
+ id: string;
+ canvas_json: string;
+}
+
+export interface FillResult {
+ /** The input pages with values substituted — every other column preserved. */
+ pages: P[];
+ /** Field names that matched at least one object. */
+ filled: string[];
+ /** Supplied names that matched nothing — a typo, not an error. */
+ unmatched: string[];
+}
+
+/** Fabric serializes text as one of three type names depending on the class. */
+const TEXT_TYPES = new Set(["text", "i-text", "itext", "textbox"]);
+
+type FabricNode = Record;
+
+function fieldTypeOf(obj: FabricNode): FieldType | null {
+ const type = String(obj.type ?? "").toLowerCase();
+ if (TEXT_TYPES.has(type)) return "text";
+ if (type === "image") return "image";
+ return null;
+}
+
+function fieldNameOf(obj: FabricNode): string | null {
+ const raw = obj.fieldName;
+ if (typeof raw !== "string") return null;
+ const name = raw.trim();
+ return name.length > 0 ? name : null;
+}
+
+/**
+ * Visit every object in a parsed canvas, descending into groups.
+ *
+ * Breadth-first over a growing array rather than recursion, so a deeply nested
+ * group can't blow the stack.
+ */
+function eachObject(canvas: FabricNode, visit: (obj: FabricNode) => void): void {
+ const queue: FabricNode[] = Array.isArray(canvas.objects) ? [...(canvas.objects as FabricNode[])] : [];
+ for (let i = 0; i < queue.length; i++) {
+ const obj = queue[i];
+ if (!obj || typeof obj !== "object") continue;
+ visit(obj);
+ if (Array.isArray(obj.objects)) queue.push(...(obj.objects as FabricNode[]));
+ }
+}
+
+/** Parse a stored canvas blob. Returns null for the empty/corrupt cases. */
+function parseCanvas(canvasJson: string): FabricNode | null {
+ try {
+ const parsed = JSON.parse(canvasJson || "{}");
+ return parsed && typeof parsed === "object" ? (parsed as FabricNode) : null;
+ } catch {
+ return null;
+ }
+}
+
+/**
+ * The fill schema for a design: one entry per distinct field name.
+ *
+ * First occurrence wins for `type` and `value`, so a name reused across pages
+ * reports the value the author most likely thinks of as canonical.
+ */
+export function collectFields(pages: PageJSON[]): Field[] {
+ const byName = new Map();
+
+ for (const page of pages) {
+ const canvas = parseCanvas(page.canvas_json);
+ if (!canvas) continue;
+
+ eachObject(canvas, (obj) => {
+ const name = fieldNameOf(obj);
+ const type = name ? fieldTypeOf(obj) : null;
+ if (!name || !type) return;
+
+ const existing = byName.get(name);
+ if (existing) {
+ if (!existing.page_ids.includes(page.id)) existing.page_ids.push(page.id);
+ return;
+ }
+
+ const value = type === "text" ? String(obj.text ?? "") : String(obj.src ?? "");
+ byName.set(name, { name, type, value, page_ids: [page.id] });
+ });
+ }
+
+ return [...byName.values()];
+}
+
+/**
+ * Substitute values into a design's pages without touching the stored copy.
+ *
+ * The object's own type decides what gets written, not the schema — so a name
+ * accidentally shared by a textbox and an image still does the right thing on
+ * each. Swapping an image only replaces `src`; the object keeps its stored box,
+ * so a replacement of a different aspect ratio will be stretched to fit.
+ */
+export function fillPages(pages: P[], values: Record): FillResult {
+ const filled = new Set();
+
+ const out = pages.map((page) => {
+ const canvas = parseCanvas(page.canvas_json);
+ if (!canvas) return page;
+
+ let touched = false;
+ eachObject(canvas, (obj) => {
+ const name = fieldNameOf(obj);
+ if (!name || !Object.prototype.hasOwnProperty.call(values, name)) return;
+
+ const type = fieldTypeOf(obj);
+ if (!type) return;
+
+ if (type === "text") obj.text = values[name];
+ else obj.src = values[name];
+
+ filled.add(name);
+ touched = true;
+ });
+
+ return touched ? { ...page, canvas_json: JSON.stringify(canvas) } : page;
+ });
+
+ return {
+ pages: out,
+ filled: [...filled],
+ unmatched: Object.keys(values).filter((name) => !filled.has(name)),
+ };
+}
diff --git a/src/server/index.ts b/src/server/index.ts
index 030b34af..48c9f27e 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -1,6 +1,7 @@
import { createApp, createRoute, z } from "@clawnify/app";
import { query, get, run } from "./db.js";
import { putUpload, getUpload } from "./uploads.js";
+import { collectFields, fillPages } from "./fields.js";
type Env = { Bindings: { DB: D1Database } };
@@ -177,6 +178,148 @@ app.openapi(deleteDesign, async (c) => {
return c.json({ ok: true }, 200);
});
+// ── Template fields ─────────────────────────────────────────────────
+//
+// A design becomes a template the moment any object carries a `fieldName`.
+// `/fields` publishes the schema so a caller knows what it can fill; `/fill`
+// substitutes values without touching the stored design, or writes the result
+// as a new design when `save` is set. Together they cover "generate N variants
+// from a row of data" without the caller ever parsing canvas JSON.
+
+const FieldSchema = z.object({
+ name: z.string(),
+ type: z.enum(["text", "image"]),
+ value: z.string(),
+ page_ids: z.array(z.string()),
+});
+
+const listFields = createRoute({
+ method: "get",
+ path: "/api/designs/{id}/fields",
+ request: { params: z.object({ id: z.string() }) },
+ responses: {
+ 200: { content: { "application/json": { schema: z.array(FieldSchema) } }, description: "OK" },
+ 404: { content: { "application/json": { schema: ErrorSchema } }, description: "Not found" },
+ },
+});
+
+app.openapi(listFields, async (c) => {
+ const { id } = c.req.valid("param");
+ const design = await get<{ id: string }>("SELECT id FROM designs WHERE id = ?", [id]);
+ if (!design) return c.json({ error: "Not found" }, 404);
+ const pages = await query>(
+ "SELECT * FROM pages WHERE design_id = ? ORDER BY sort_order",
+ [id]
+ );
+ return c.json(collectFields(pages), 200);
+});
+
+// ── Fill a design ───────────────────────────────────────────────────
+
+const FilledPageSchema = z.object({
+ id: z.string(),
+ title: z.string(),
+ sort_order: z.number(),
+ canvas_json: z.string(),
+});
+
+const FillResponseSchema = z.object({
+ design: DesignSchema,
+ pages: z.array(FilledPageSchema),
+ filled: z.array(z.string()),
+ unmatched: z.array(z.string()),
+});
+
+const fillDesign = createRoute({
+ method: "post",
+ path: "/api/designs/{id}/fill",
+ request: {
+ params: z.object({ id: z.string() }),
+ body: {
+ content: {
+ "application/json": {
+ schema: z.object({
+ values: z.record(z.union([z.string(), z.number()])),
+ // Persist the result as a new design instead of only returning it.
+ save: z.boolean().optional(),
+ name: z.string().optional(),
+ }),
+ },
+ },
+ },
+ },
+ responses: {
+ 200: { content: { "application/json": { schema: FillResponseSchema } }, description: "OK" },
+ 404: { content: { "application/json": { schema: ErrorSchema } }, description: "Not found" },
+ },
+});
+
+app.openapi(fillDesign, async (c) => {
+ const { id } = c.req.valid("param");
+ const { values, save, name } = c.req.valid("json");
+
+ const design = await get>("SELECT * FROM designs WHERE id = ?", [id]);
+ if (!design) return c.json({ error: "Not found" }, 404);
+
+ const pages = await query>(
+ "SELECT * FROM pages WHERE design_id = ? ORDER BY sort_order",
+ [id]
+ );
+
+ // Numbers are the common case for stat cards, so accept them and stringify
+ // rather than making every caller do it.
+ const strings = Object.fromEntries(Object.entries(values).map(([k, v]) => [k, String(v)]));
+ const { pages: filledPages, filled, unmatched } = fillPages(pages, strings);
+
+ const body = filledPages.map((p) => ({
+ id: p.id,
+ title: p.title,
+ sort_order: p.sort_order,
+ canvas_json: p.canvas_json,
+ }));
+
+ if (!save) return c.json({ design, pages: body, filled, unmatched }, 200);
+
+ // Ids are generated here rather than by the column default so the new rows
+ // can be linked without a racy "most recently created" lookup.
+ const newDesignId = crypto.randomUUID();
+ await run(
+ "INSERT INTO designs (id, name, canvas_json, width, height) VALUES (?, ?, ?, ?, ?)",
+ [
+ newDesignId,
+ name || `${design.name} (filled)`,
+ // designs.canvas_json mirrors page 1, matching what the editor writes.
+ filledPages[0]?.canvas_json ?? design.canvas_json,
+ design.width,
+ design.height,
+ ]
+ );
+
+ const createdPages = filledPages.map((p) => ({ ...p, id: crypto.randomUUID() }));
+ for (const p of createdPages) {
+ await run(
+ "INSERT INTO pages (id, design_id, title, canvas_json, sort_order) VALUES (?, ?, ?, ?, ?)",
+ [p.id, newDesignId, p.title, p.canvas_json, p.sort_order]
+ );
+ }
+
+ const created = await get>("SELECT * FROM designs WHERE id = ?", [newDesignId]);
+ return c.json(
+ {
+ design: created!,
+ pages: createdPages.map((p) => ({
+ id: p.id,
+ title: p.title,
+ sort_order: p.sort_order,
+ canvas_json: p.canvas_json,
+ })),
+ filled,
+ unmatched,
+ },
+ 200
+ );
+});
+
// ── Add page ───────────────────────────────────────────────────────
const addPage = createRoute({