@pixldocs/canvas-renderer 0.4.6 → 0.4.8

package/dist/index.d.ts

@@ -482,6 +482,8 @@ export declare interface TemplateConfigPage {
     name: string;
     children: CanvasNode[];
     settings?: PageSettings;
+    /** When set, the page is bound to a `repeatablePage` in the form schema and is cloned per entry at render time. */
+    boundRepeatablePageId?: string;
 }
 
 export declare interface ThemeConfig {

package/dist/index.js

@@ -599,6 +599,42 @@ function applyStackReflowToPageTree(children) {
 function constrainChildrenToGroupBounds(_group, _pageChildren) {
   return /* @__PURE__ */ new Map();
 }
+function stripCrossTemplateMetadata(node) {
+  const cleaned = { ...node };
+  if (cleaned.repeatableSection && typeof cleaned.repeatableSection === "object") {
+    const { formDefId: _f, formDefSectionPrefix: _p, ...keep } = cleaned.repeatableSection;
+    cleaned.repeatableSection = keep;
+  }
+  return cleaned;
+}
+function reIdSubtree(nodes) {
+  const idMap = /* @__PURE__ */ new Map();
+  idMap.set(PAGE_BACKGROUND_ELEMENT_ID, PAGE_BACKGROUND_ELEMENT_ID);
+  const cloneOne = (node) => {
+    if (isGroup(node)) {
+      const g = node;
+      const newId2 = generateId("group");
+      idMap.set(g.id, newId2);
+      return {
+        ...stripCrossTemplateMetadata(g),
+        id: newId2,
+        children: (g.children ?? []).map(cloneOne)
+      };
+    }
+    const prefix = node.type === "text" ? "text" : node.type === "image" ? "img" : node.type === "shape" ? "shape" : node.type === "line" ? "line" : "el";
+    const newId = generateId(prefix);
+    idMap.set(node.id, newId);
+    return {
+      ...stripCrossTemplateMetadata(node),
+      id: newId
+    };
+  };
+  return { nodes: nodes.map(cloneOne), idMap };
+}
+function rewriteFieldMappings(mappings, idMap) {
+  if (!(mappings == null ? void 0 : mappings.length)) return [];
+  return mappings.filter((m) => idMap.has(m.elementId)).map((m) => ({ ...m, elementId: idMap.get(m.elementId) }));
+}
 const defaultProjectSettings = {
   showGrid: false,
   snapToGrid: false,
@@ -1953,16 +1989,48 @@ const useEditorStore = create((set, get) => ({
     return { canvas: nextCanvas, ...committed };
   }),
   deletePage: (pageId) => set((state) => {
+    var _a;
     if (state.canvas.pages.length <= 1) return {};
+    const deletedPage = state.canvas.pages.find((p) => p.id === pageId);
     const newPages = state.canvas.pages.filter((p) => p.id !== pageId);
     const currentPageDeleted = state.canvas.currentPageId === pageId;
     const newCurrentPageId = currentPageDeleted ? newPages[0].id : state.canvas.currentPageId;
-    const nextCanvas = {
+    const deletedElementIds = new Set(getAllElementIds((deletedPage == null ? void 0 : deletedPage.children) ?? []));
+    const remainingElementIds = /* @__PURE__ */ new Set();
+    for (const p of newPages) for (const id of getAllElementIds(p.children ?? [])) remainingElementIds.add(id);
+    for (const id of remainingElementIds) deletedElementIds.delete(id);
+    let nextCanvas = {
       ...state.canvas,
       pages: newPages,
       currentPageId: newCurrentPageId,
       selectedIds: currentPageDeleted ? [] : state.canvas.selectedIds
     };
+    if (nextCanvas.themeConfig && deletedElementIds.size > 0) {
+      const remainingProps = nextCanvas.themeConfig.properties.filter((p) => !deletedElementIds.has(p.elementId));
+      if (remainingProps.length !== nextCanvas.themeConfig.properties.length) {
+        const removedPropIds = new Set(
+          nextCanvas.themeConfig.properties.filter((p) => deletedElementIds.has(p.elementId)).map((p) => p.id)
+        );
+        nextCanvas = {
+          ...nextCanvas,
+          themeConfig: {
+            ...nextCanvas.themeConfig,
+            properties: remainingProps,
+            variants: nextCanvas.themeConfig.variants.map((v) => {
+              const values = { ...v.values };
+              for (const pid of removedPropIds) delete values[pid];
+              return { ...v, values };
+            })
+          }
+        };
+      }
+    }
+    if (((_a = nextCanvas.dynamicFields) == null ? void 0 : _a.length) && deletedElementIds.size > 0) {
+      nextCanvas = {
+        ...nextCanvas,
+        dynamicFields: nextCanvas.dynamicFields.map((f) => ({ ...f, mappings: (f.mappings ?? []).filter((m) => !deletedElementIds.has(m.elementId)) })).filter((f) => (f.mappings ?? []).length > 0)
+      };
+    }
     const committed = commitFromState(state, nextCanvas);
     return { canvas: nextCanvas, ...committed };
   }),
@@ -1989,6 +2057,64 @@ const useEditorStore = create((set, get) => ({
     const committed = commitFromState(state, nextCanvas);
     return { canvas: nextCanvas, ...committed };
   }),
+  pastePage: (payload) => {
+    let resultPageId = null;
+    set((state) => {
+      const { nodes: freshChildren, idMap } = reIdSubtree(payload.page.children ?? []);
+      const freshPage = {
+        id: generateId("page"),
+        name: payload.page.name,
+        children: freshChildren,
+        settings: { ...defaultPageSettings, ...payload.page.settings ?? {} }
+      };
+      const carriedFields = (payload.dynamicFields ?? []).map((f) => ({ ...f, mappings: rewriteFieldMappings(f.mappings, idMap) })).filter((f) => f.mappings.length > 0);
+      const carriedTheme = (payload.themeProperties ?? []).filter((t) => idMap.has(t.property.elementId)).map((t) => ({ ...t, property: { ...t.property, elementId: idMap.get(t.property.elementId) } }));
+      const currentIndex = state.canvas.pages.findIndex((p) => p.id === state.canvas.currentPageId);
+      const insertAt = currentIndex >= 0 ? currentIndex + 1 : state.canvas.pages.length;
+      const newPages = [...state.canvas.pages];
+      newPages.splice(insertAt, 0, freshPage);
+      const existingFields = state.canvas.dynamicFields ?? [];
+      const mergedFields = [...existingFields];
+      const taken = new Set(mergedFields.map((f) => f.id));
+      for (const incoming of carriedFields) {
+        let candidate = incoming.id;
+        let n = 2;
+        while (taken.has(candidate)) {
+          candidate = `${incoming.id}_${n++}`;
+        }
+        taken.add(candidate);
+        mergedFields.push({ ...incoming, id: candidate });
+      }
+      let themeConfig = state.canvas.themeConfig;
+      if (carriedTheme.length > 0) {
+        themeConfig = themeConfig ? {
+          properties: [...themeConfig.properties],
+          variants: themeConfig.variants.map((v) => ({ ...v, values: { ...v.values } }))
+        } : createEmptyThemeConfig();
+        for (const carried of carriedTheme) {
+          const newProp = { ...carried.property, id: generateId("themeprop") };
+          themeConfig.properties.push(newProp);
+          if (carried.defaultValue !== void 0) {
+            for (const v of themeConfig.variants) {
+              v.values[newProp.id] = carried.defaultValue;
+            }
+          }
+        }
+      }
+      const nextCanvas = {
+        ...state.canvas,
+        pages: newPages,
+        currentPageId: freshPage.id,
+        selectedIds: [],
+        dynamicFields: mergedFields,
+        themeConfig
+      };
+      resultPageId = freshPage.id;
+      const committed = commitFromState(state, nextCanvas);
+      return { canvas: nextCanvas, ...committed };
+    });
+    return resultPageId;
+  },
   renamePage: (pageId, name) => set((state) => {
     const trimmedName = name.trim();
     if (!trimmedName) return {};
@@ -9915,17 +10041,16 @@ function splitNestedForOverflow(flowStack, stayChildren, overflowChildren, overf
   }
   return { stayChildren: newStay, overflowChildren: newOverflow };
 }
-function applyContentBoundsPagination(config) {
+function paginateSinglePage(sourcePage, pageOffsetIndex) {
   var _a, _b, _c, _d, _e, _f;
-  const pages = config.pages ?? [];
-  if (pages.length === 0) return config;
-  const firstPage = pages[0];
-  const contentTop = (_a = firstPage.settings) == null ? void 0 : _a.contentTop;
-  const contentBottom = (_b = firstPage.settings) == null ? void 0 : _b.contentBottom;
-  if (contentTop == null || contentBottom == null || contentBottom <= contentTop) return config;
-  const pageChildren = firstPage.children ?? [];
+  const contentTop = (_a = sourcePage.settings) == null ? void 0 : _a.contentTop;
+  const contentBottom = (_b = sourcePage.settings) == null ? void 0 : _b.contentBottom;
+  if (contentTop == null || contentBottom == null || contentBottom <= contentTop) {
+    return [sourcePage];
+  }
+  const pageChildren = sourcePage.children ?? [];
   const allFlowStacks = findAllFlowStacks(pageChildren);
-  if (allFlowStacks.length === 0) return config;
+  if (allFlowStacks.length === 0) return [sourcePage];
   const stackResults = [];
   let anyOverflow = false;
   for (const flowStack of allFlowStacks) {
@@ -9942,25 +10067,26 @@ function applyContentBoundsPagination(config) {
     }
     stackResults.push({ flowStack, flowStackIndex, stayChildren, overflowChildren });
   }
-  if (!anyOverflow) return config;
+  if (!anyOverflow) return [sourcePage];
   const flowStackIds = new Set(allFlowStacks.map((s) => s.id));
-  let newFirstRoot = pageChildren.map((node) => {
+  let newSourceRoot = pageChildren.map((node) => {
     if (!flowStackIds.has(node.id)) return node;
     const result = stackResults.find((r) => r.flowStack.id === node.id);
     const newStack = { ...result.flowStack, children: result.stayChildren };
     return applyStackReflowToPageTree([newStack])[0];
   });
-  newFirstRoot = applyStackReflowToPageTree(newFirstRoot);
-  const newFirstPage = {
-    ...firstPage,
-    children: newFirstRoot
+  newSourceRoot = applyStackReflowToPageTree(newSourceRoot);
+  const newSourcePage = {
+    ...sourcePage,
+    children: newSourceRoot
   };
-  const resultPages = [newFirstPage];
+  const resultPages = [newSourcePage];
   let currentOverflows = stackResults.filter((r) => r.overflowChildren.length > 0).map((r) => ({ flowStack: r.flowStack, overflowChildren: r.overflowChildren }));
   let currentPageIndex = 1;
   const MAX_CONTINUATION_PAGES = 50;
   while (currentOverflows.length > 0 && currentPageIndex < MAX_CONTINUATION_PAGES) {
-    const contPage = buildContinuationPage(firstPage, currentOverflows, contentTop, currentPageIndex);
+    const continuationGlobalIndex = pageOffsetIndex * 1e3 + currentPageIndex;
+    const contPage = buildContinuationPage(sourcePage, currentOverflows, contentTop, continuationGlobalIndex);
     resultPages.push(contPage);
     const contChildren = contPage.children ?? [];
     const contFlowStacks = findAllFlowStacks(contChildren);
@@ -10028,6 +10154,20 @@ function applyContentBoundsPagination(config) {
     if (flowChildCount === 0 && !hasContent) resultPages.pop();
     else break;
   }
+  return resultPages;
+}
+function applyContentBoundsPagination(config) {
+  const pages = config.pages ?? [];
+  if (pages.length === 0) return config;
+  const resultPages = [];
+  let mutated = false;
+  for (let i = 0; i < pages.length; i++) {
+    const sourcePage = pages[i];
+    const paginated = paginateSinglePage(sourcePage, i);
+    if (paginated.length !== 1 || paginated[0] !== sourcePage) mutated = true;
+    resultPages.push(...paginated);
+  }
+  if (!mutated) return config;
   return { ...config, pages: resultPages };
 }
 async function fetchRow(supabaseUrl, anonKey, table, id) {
@@ -10081,7 +10221,12 @@ function setInTree(nodes, elementId, targetProperty, value) {
       } else {
         node[targetProperty] = value;
       }
-      if (targetProperty === "text" && node.type === "text") delete node.height;
+      if (targetProperty === "text" && node.type === "text") {
+        const overflowPolicy = String(node.overflowPolicy ?? "grow-and-push");
+        if (overflowPolicy !== "auto-shrink") {
+          delete node.height;
+        }
+      }
       return true;
     }
     if (node.children && Array.isArray(node.children)) {
@@ -10332,9 +10477,9 @@ function normalizeConfigForEC2Parity(config) {
     if (isStack && node.stackSpacing == null) node.stackSpacing = 8;
     if (node.type === "text") {
       const overflowPolicy = String(node.overflowPolicy ?? "grow-and-push");
-      const fontSize = typeof node.fontSize === "number" ? node.fontSize : 16;
-      if (overflowPolicy === "auto-shrink" && fontSize >= 24) node.overflowPolicy = "grow-and-push";
-      delete node.height;
+      if (overflowPolicy !== "auto-shrink") {
+        delete node.height;
+      }
     }
     if (Array.isArray(node.children)) {
       delete node.height;