better pages UI with scaling

packages/paged/src/pagedjs/chunker/chunker.js

@@ -36,6 +36,11 @@ export default class Chunker {
       previousAtPage.remove()
     }
 
+    const previousRenderArea = renderTo.querySelector('#pagedjs_render_area')
+    if (previousRenderArea) {
+      previousRenderArea.remove()
+    }
+
     const size = this.config.paper.selectedSize
     const paper = this.config.paper.sizes[size]
 
@@ -44,6 +49,12 @@ export default class Chunker {
     this.style.innerHTML = `@page { size: ${size}; margin: 0; padding: 0; }`
     renderTo.appendChild(this.style);
 
+    this.pageRenderArea = document.createElement("div");
+    this.pageRenderArea.id = 'pagedjs_render_area'
+    this.pageRenderArea.style.setProperty('--pagedjs-width', paper.width);
+    this.pageRenderArea.style.setProperty('--pagedjs-height', paper.height);
+    renderTo.appendChild(this.pageRenderArea);
+
     this.pagesArea = document.createElement("div");
     this.pagesArea.classList.add("pagedjs_pages");
     this.pagesArea.style.setProperty('--pagedjs-width', paper.width);
@@ -61,6 +72,8 @@ export default class Chunker {
   afterPageLayout(fragment, page) {
     breaks.afterPageLayout(fragment, page)
     headerFooter.afterPageLayout(fragment, this.config.headerFooter, this.total)
+    this.pageRenderArea.removeChild(fragment)
+    this.pagesArea.append(fragment)
     // fragment.classList.remove('loading')
   }
 
@@ -260,7 +273,7 @@ export default class Chunker {
   addPage(blank) {
     let lastPage = this.pages[this.pages.length - 1];
     // Create a new page from the template
-    let page = new Page(this.pagesArea, this.pageTemplate, blank);
+    let page = new Page(this.pageRenderArea, this.pageTemplate, blank);
 
     this.pages.push(page);
 
@@ -354,6 +367,7 @@ export default class Chunker {
   destroy() {
     this.removePages()
     this.pagesArea.remove()
+    this.pageRenderArea.remove()
     this.style.remove()
   }
 }

packages/paged/src/pagedjs/chunker/page.js

@@ -16,33 +16,21 @@ export default class Page {
 
   create(template, after) {
     let clone = document.importNode(this.pageTemplate.content, true);
+    this.pagesArea.appendChild(clone);
 
-    let page, index;
-    if (after) {
-      this.pagesArea.insertBefore(clone, after.nextElementSibling);
-      index = Array.prototype.indexOf.call(this.pagesArea.children, after.nextElementSibling);
-      page = this.pagesArea.children[index];
-    } else {
-      this.pagesArea.appendChild(clone);
-      page = this.pagesArea.lastChild;
-    }
-
-    let pagebox = page.querySelector(".pagedjs_pagebox");
+    let page = this.pagesArea.lastChild;
     let area = page.querySelector(".pagedjs_page_content");
-    let footnotesArea = page.querySelector(".pagedjs_footnote_area");
     let size = area.getBoundingClientRect();
 
     area.style.columnWidth = Math.round(size.width) + "px";
-    area.style.columnGap = "calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left))";
+    this.area = area;
 
     this.width = Math.round(size.width);
     this.height = Math.round(size.height);
 
     this.element = page;
-    this.pagebox = pagebox;
-    this.area = area;
-    this.footnotesArea = footnotesArea;
-
+    this.pagebox = page.querySelector(".pagedjs_pagebox");
+    this.footnotesArea = page.querySelector(".pagedjs_footnote_area");
     return page;
   }