WIP: Preview for #113

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookbinder",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "An app to rearrange PDF pages for printing for bookbinding",
   "type": "module",
   "scripts": {

src/book.js

@@ -10,7 +10,7 @@ import { PAGE_LAYOUTS, PAGE_SIZES } from './constants.js';
 import { updatePageLayoutInfo } from './utils/renderUtils.js';
 import JSZip from 'jszip';
 import { loadConfiguration } from './utils/formUtils.js';
-import { drawFoldlines, drawCropmarks, drawSpineMarks } from './utils/drawing.js';
+import { drawFoldlines, drawCropmarks, drawSpineMarks, drawSewingMarks } from './utils/drawing.js';
 import { calculateDimensions, calculateLayout } from './utils/layout.js';
 import { interleavePages, embedPagesInNewPdf } from './utils/pdf.js';
 
@@ -36,6 +36,15 @@ import { interleavePages, embedPagesInNewPdf } from './utils/pdf.js';
  * @property {boolean} [isLeftPage]: isLeftPage,
  */
 
+/**
+ * @typedef SewingMarks
+ * @type {object}
+ * @property {boolean} isEnabled - specifies if marks should be drawed,
+ * @property {number} amount - amount of places to saw.
+ * @property {number} marginPt - distance from the end of page to a kettle point,
+ * @property {number} tapeWidthPt - distance between two seing points
+ */
+
 export class Book {
   /** @param { import("./models/configuration.js").Configuration } configuration */
   constructor(configuration) {
@@ -80,6 +89,12 @@ export class Book {
     this.page_positioning = configuration.pagePositioning;
     this.flyleafs = configuration.flyleafs;
     this.cropmarks = configuration.cropMarks;
+    this.sewingMarks = {
+      isEnabled: configuration.sewingMarksEnabled,
+      amount: configuration.sewingMarksAmount,
+      marginPt: configuration.sewingMarksMarginPt,
+      tapeWidthPt: configuration.sewingMarksTapeWidthPt,
+    };
     this.pdfEdgeMarks = configuration.pdfEdgeMarks;
     this.cutmarks = configuration.cutMarks;
     this.format = configuration.sigFormat;
@@ -496,6 +511,7 @@ export class Book {
         cutmarks: this.cutmarks,
         alt: config.alt,
         side2flag: side2flag,
+        sewingMarks: this.sewingMarks,
       });
       block_start += offset;
       block_end += offset;
@@ -519,6 +535,7 @@ export class Book {
    * @param {Position[]} config.positions: list of page positions
    * @param {PDFDocument} [config.outPDF]: PDF to write to, in addition to PDF created w/ `outname` (or null)
    * @param {(PDFEmbeddedPage|string)[]} [config.embeddedPages] : pages already embedded in the `destPdf` to assemble in addition (or null)
+   * @param {SewingMarks} config.sewingMarks: config for drawing FrenchMarks
    */
 
   draw_block_onto_page(config) {
@@ -533,6 +550,7 @@ export class Book {
     const cutmarks = config.cutmarks;
     const alt = config.alt;
     let side2flag = config.side2flag;
+    const sewingMarks = config.sewingMarks;
 
     const block = config.embeddedPages.slice(block_start, block_end);
     const currPage = outPDF.addPage(papersize);
@@ -541,6 +559,7 @@ export class Book {
       ? drawFoldlines(side2flag, this.duplexrotate, papersize, this.per_sheet)
       : [];
     const drawLines = [...cropLines, ...foldLines];
+    const drawPoints = [];
 
     block.forEach((page, i) => {
       if (page == 'b' || page === undefined) {
@@ -561,12 +580,26 @@ export class Book {
       if (pdfEdgeMarks && (sigDetails[i].isSigStart || sigDetails[i].isSigEnd)) {
         drawLines.push(drawSpineMarks(sigDetails[i], positions[i]));
       }
+      const sewingMarkPoints = sewingMarks.isEnabled
+        ? drawSewingMarks(
+            sigDetails[i],
+            positions[i],
+            sewingMarks.amount,
+            sewingMarks.marginPt,
+            sewingMarks.tapeWidthPt
+          )
+        : [];
+      drawPoints.push(...sewingMarkPoints);
     });
 
     drawLines.forEach((line) => {
       currPage.drawLine(line);
     });
 
+    drawPoints.forEach((point) => {
+      currPage.drawCircle(point);
+    });
+
     if (alt) {
       side2flag = !side2flag;
     }

src/book.test.js

@@ -44,6 +44,12 @@ describe('Book model', () => {
       fore_edge: 0,
       top: 0,
     },
+    sewingMarks: {
+      amount: 3,
+      isEnabled: false,
+      marginPt: 72,
+      tapeWidthPt: 36,
+    },
     managedDoc: null,
     page_positioning: 'centered',
     page_scaling: 'lockratio',

src/html/page_layout.html

@@ -81,6 +81,45 @@ <h2>Page Layout</h2>
     </select>
   </span>
 
+  <span class="row">
+    <label>Add marks for sewing</label>
+    <input type="checkbox" id="add_sewing_marks_checkbox" name="add_sewing_marks_checkbox" />
+    <details>
+      <summary>Detailed settings for sewing</summary>
+      Look at the image below.
+      <span class="row">
+        <label>(A) Margin (distance where first point should be draw):</label>
+        <input
+          type="number"
+          id="sewing_marks_margin_pt"
+          name="sewing_marks_margin_pt"
+          class="layout_margin_user_input_field"
+        /><sub>pt</sub><br />
+
+        <label>(B) Amount of sewing points:</label>
+        <input
+          type="number"
+          id="sewing_marks_amount"
+          name="sewing_marks_amount"
+          class="layout_margin_user_input_field"
+        /><br />
+
+        <label>(C) Tape width:</label>
+        <input
+          type="number"
+          id="sewing_marks_tape_width_pt"
+          name="sewing_marks_tape_width_pt"
+          class="layout_margin_user_input_field"
+        /><sub>pt</sub><br />
+        <img
+          alt="sewing image"
+          src="/img/sewing_settings_explanation.png"
+          style="height: 100%; width: 100%; object-fit: contain"
+        />
+      </span>
+    </details>
+  </span>
+
   <span class="row">
     <div class="layout_margin_description">
       White Space Manipulation. All values are in points, relative to original document.<br /><br />1

src/models/configuration.js

@@ -94,6 +94,12 @@ export const schema = z.object({
   foreEdgePaddingPt: urlSafe(z.coerce.number()).default(0), // specific to wacky small
   wackySpacing, // specific to wacky small
   flyleafs: urlSafe(z.coerce.number()).default(1),
+
+  sewingMarksEnabled: urlSafe(coercedBoolean).default(false),
+  sewingMarksMarginPt: urlSafe(z.coerce.number()).default(72),
+  sewingMarksAmount: urlSafe(z.coerce.number()).default(3),
+  sewingMarksTapeWidthPt: urlSafe(z.coerce.number()).default(36),
+
   paperSizeCustomWidth: urlSafe(z.coerce.number()).default(0),
   paperSizeCustomHeight: urlSafe(z.coerce.number()).default(0),
 });

src/utils/drawing.js

@@ -1,5 +1,5 @@
 import { LINE_LEN } from '../constants';
-import { rgb } from '@cantoo/pdf-lib';
+import { rgb, grayscale } from '@cantoo/pdf-lib';
 
 /**
  * @typedef Point
@@ -17,6 +17,15 @@ import { rgb } from '@cantoo/pdf-lib';
  * @property {number[]} [dashArray] - sequence of dash and gap lengths to be repeated for a dashed line
  */
 
+/**
+ * @typedef Point
+ * @property {number} x,
+ * @property {number} y,
+ * @property {number} size,
+ * @property {Grayscale|RGB|CMYK} color,
+ *
+ */
+
 /**
  *  @param {boolean} side2flag - whether we're on the back or not.
  * @param {boolean} duplexrotate - if alternate sides are rotated or not
@@ -112,6 +121,72 @@ export function drawCropmarks(papersize, per_sheet) {
   return lines;
 }
 
+/**
+ * @param {@param {import("../book.js").PageInfo}} sigDetails - information about signature where marks will be printed
+ * @param {import("../book.js").Position} position - position info object
+ * @param {number} amount - amount of sewing crosses.
+ * @param {number} marginPt - distance from the end of sheet of paper to kettle mark
+ * @param {number} tapeWidthPt - distance between two points in a single sewwing cross.
+ * @returns {Point[]}
+ */
+export function drawSewingMarks(sigDetails, position, amount, marginPt, tapeWidthPt) {
+  // Here normalize coordinates to always think in x an y like this
+  // | P        |H|    P |
+  // |  A       |E|   A  |
+  // |   G      |I|  G   |
+  // |    E     |G| E    |
+  // |          |T|      |
+  // |-POSITION-| |      |
+
+  // Left pages have spine position on the edge :/
+  if (position.isLeftPage) return [];
+
+  var arePageRotated = Math.abs(position.rotation) === 90;
+  let totalSpineHeight = 0;
+  let spinePosition = 0;
+
+  if (arePageRotated) {
+    totalSpineHeight = Math.abs(position.spineMarkTop[0] - position.spineMarkBottom[0]);
+    spinePosition = position.spineMarkTop[1];
+  } else {
+    totalSpineHeight = Math.abs(position.spineMarkTop[1] - position.spineMarkBottom[1]);
+    spinePosition = position.spineMarkTop[0];
+  }
+
+  const workingWidth = totalSpineHeight - 2 * marginPt;
+  const spaceBetweenPoints = workingWidth / (amount + 1);
+
+  const sewingPoints = [];
+  for (let index = 1; index <= amount; index++) {
+    const halfOfTape = tapeWidthPt / 2;
+    sewingPoints.push(
+      { pointHeight: marginPt + spaceBetweenPoints * index + halfOfTape },
+      { pointHeight: marginPt + spaceBetweenPoints * index - halfOfTape }
+    );
+  }
+
+  const allPoints = [
+    { pointHeight: marginPt },
+    { pointHeight: totalSpineHeight - marginPt },
+    ...sewingPoints,
+  ];
+
+  const commonCircleValues = { size: 1, color: grayscale(0.0) };
+  const drawablePoints = allPoints.map((point) => {
+    point = { ...point, ...commonCircleValues };
+    if (arePageRotated) {
+      point.y = spinePosition;
+      point.x = point.pointHeight + position.spineMarkBottom[0];
+    } else {
+      point.y = point.pointHeight + position.spineMarkBottom[1];
+      point.x = spinePosition;
+    }
+    return point;
+  });
+
+  return drawablePoints;
+}
+
 /**
  * @param {import("../book.js").PageInfo} sigDetails - page info object
  * @param {import("../book.js").Position} position - position info object

src/utils/formUtils.js

@@ -40,6 +40,11 @@ const fromFormToConfiguration = (form) =>
     flyleafs: form.get('flyleafs'),
     paperSizeCustomWidth: form.get('paper_size_custom_width'),
     paperSizeCustomHeight: form.get('paper_size_custom_height'),
+
+    sewingMarksEnabled: form.get('add_sewing_marks_checkbox'),
+    sewingMarksMarginPt: form.get('sewing_marks_margin_pt'),
+    sewingMarksAmount: form.get('sewing_marks_amount'),
+    sewingMarksTapeWidthPt: form.get('sewing_marks_tape_width_pt'),
   });
 
 /**

src/utils/renderUtils.js

@@ -198,6 +198,16 @@ export function renderFormFromSettings(configuration) {
     `input[name="wacky_spacing"][value="${configuration.wackySpacing}"]`
   ).checked = true;
 
+  // Set french link stitches settings
+  document.querySelector('input[name="add_sewing_marks_checkbox"]').checked =
+    configuration.sewingMarksEnabled;
+  document.querySelector('input[name="sewing_marks_margin_pt"]').value =
+    configuration.sewingMarksMarginPt;
+  document.querySelector('input[name="sewing_marks_amount"]').value =
+    configuration.sewingMarksAmount;
+  document.querySelector('input[name="sewing_marks_tape_width_pt"]').value =
+    configuration.sewingMarksTapeWidthPt;
+
   // Set freeform inputs
   document.querySelector('input[name="main_fore_edge_padding_pt"]').value =
     configuration.mainForeEdgePaddingPt;