Pulling out PDF Markup into it's own chunk & allowing Sewing Marks on…

… only some folios & some bug fixes (#115)

* now with a PDF Markup section + sewing marks on only some of the folios

index.html

@@ -33,6 +33,7 @@ <h1>Bookbinder JS</h1>
         <load src="src/html/source_manip.html" />
         <load src="src/html/printer.html" />
         <load src="src/html/page_layout.html" />
+        <load src="src/html/crop_box.html" />
         <load src="src/html/sig_format.html" />
         <load src="src/html/flyleaf.html" />
         <load src="src/html/preview.html" />

src/book.js

@@ -27,6 +27,7 @@ import { interleavePages, embedPagesInNewPdf } from './utils/pdf.js';
  * @property {string|number} info - page # or 'b'
  * @property {boolean} isSigStart
  * @property {boolean} isSigEnd
+ * @property {boolean} isSigMiddle
  * @property {number} signatureNum - which signature is this page in. 0 based
  */
 
@@ -97,6 +98,7 @@ export class Book {
     this.flyleafs = configuration.flyleafs;
     this.cropmarks = configuration.cropMarks;
     this.sewingMarks = {
+      sewingMarkLocation: configuration.sewingMarkLocation,
       isEnabled: configuration.sewingMarksEnabled,
       amount: configuration.sewingMarksAmount,
       marginPt: configuration.sewingMarksMarginPt,
@@ -237,13 +239,6 @@ export class Book {
       this.cropbox = newPage.getCropBox();
     }
 
-    console.log(
-      'The updatedDoc doc has : ',
-      this.managedDoc.getPages(),
-      ' vs --- ',
-      this.managedDoc.getPageCount()
-    );
-
     switch (this.format) {
       case 'perfect':
       case 'booklet':
@@ -616,6 +611,7 @@ export class Book {
         ? drawSewingMarks(
             sigDetails[i],
             positions[i],
+            sewingMarks.sewingMarkLocation,
             sewingMarks.amount,
             sewingMarks.marginPt,
             sewingMarks.tapeWidthPt

src/book.test.js

@@ -45,6 +45,7 @@ describe('Book model', () => {
       top: 0,
     },
     sewingMarks: {
+      sewingMarkLocation: 'all',
       amount: 3,
       isEnabled: false,
       marginPt: 72,

src/html/crop_box.html

@@ -0,0 +1,99 @@
+<div class="section">
+  <h2>PDF Markup</h2>
+  <i>(does not currently work with Wacky Small Layouts -- soon!)</i><br />
+  <span class="row">
+    <label
+      >Add Foldlines
+      <span
+        data-balloon-length="medium"
+        aria-label="Adds folding guidelines (ordered thickest to thinnest)"
+        data-balloon-pos="up"
+      >
+        <input type="checkbox" name="cropmarks" />
+      </span>
+    </label>
+  </span>
+
+  <span class="row">
+    <label
+      >Add Cutlines
+      <span data-balloon-length="medium" aria-label="Adds cutting guidelines" data-balloon-pos="up">
+        <input type="checkbox" name="cutmarks"
+      /></span>
+    </label>
+  </span>
+  <span class="row">
+    <label
+      >Add PDF bounds indicators (spine)
+      <span
+        data-balloon-length="medium"
+        aria-label="Puts small marks on the outermost folio of the signatures indicating the top and bottom of the PDF"
+        data-balloon-pos="up"
+      >
+        <input type="checkbox" name="pdf_edge_marks"
+      /></span>
+    </label>
+  </span>
+  <span class="row">
+    <label
+      >Add signature order marks (spine)
+      <span
+        data-balloon-length="medium"
+        aria-label="Puts staggered lines down the different signature spines to indicate order"
+        data-balloon-pos="up"
+      >
+        <input type="checkbox" name="sig_order_marks"
+      /></span>
+    </label>
+  </span>
+  <span class="row">
+    <label>Add marks for sewing</label>
+    <input type="checkbox" id="add_sewing_marks_checkbox" name="add_sewing_marks_checkbox" />
+    <details id="sewing_marks_details">
+      <summary>Detailed settings for sewing</summary>
+      <span class="row">
+        <label
+          >Draw marks on :
+          <select name="sewing_mark_locations" id="sewing_mark_locations">
+            <option value="all" selected="selected">center of every folio</option>
+            <option value="only_out">only on spine</option>
+            <option value="only_in">only in center of signature</option>
+            <option value="in_n_out">both spine and center of signature</option>
+          </select> </label
+        ><br />
+        Look at the image below.<br />
+        <label
+          >(A) Margin (distance where first point should be draw):
+          <input
+            type="number"
+            id="sewing_marks_margin_pt"
+            name="sewing_marks_margin_pt"
+            class="layout_margin_user_input_field" /><sub>pt</sub><br
+        /></label>
+
+        <label
+          >(B) Amount of sewing points:
+          <input
+            type="number"
+            id="sewing_marks_amount"
+            name="sewing_marks_amount"
+            class="layout_margin_user_input_field" /><br
+        /></label>
+
+        <label
+          >(C) Tape width:
+          <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
+        /></label>
+        <img
+          alt="sewing image - use tape width of 0pt to make a single dot (overlapping marks)"
+          src="/img/sewing_settings_explanation.png"
+          style="height: 100%; width: 100%; object-fit: contain"
+        />
+      </span>
+    </details>
+  </span>
+</div>

src/html/page_layout.html

@@ -9,43 +9,6 @@ <h2>Page Layout</h2>
       Sextodecimo - sixteen pages per side of sheet
     </option>
   </select>
-  <div>
-    <label
-      >Add Foldlines
-      <span
-        data-balloon-length="medium"
-        aria-label="Adds folding guidelines (ordered thickest to thinnest)"
-        data-balloon-pos="up"
-      >
-        <input type="checkbox" name="cropmarks" /></span
-    ></label>
-    <span style="display: inline-block; width: 10px"></span>
-    <label
-      >Add Cutlines
-      <span data-balloon-length="medium" aria-label="Adds cutting guidelines" data-balloon-pos="up"
-        ><input type="checkbox" name="cutmarks" /></span
-    ></label>
-    <div>
-      <label
-        >Add PDF bounds indicators (spine)
-        <span
-          data-balloon-length="medium"
-          aria-label="Puts small marks on the outermost folio of the signatures indicating the top and bottom of the PDF"
-          data-balloon-pos="up"
-        >
-          <input type="checkbox" name="pdf_edge_marks" /></span></label
-      ><br />
-      <label
-        >Add signature order marks (spine)
-        <span
-          data-balloon-length="medium"
-          aria-label="Puts staggered lines down the different signature spines to indicate order"
-          data-balloon-pos="up"
-        >
-          <input type="checkbox" name="sig_order_marks" /></span
-      ></label>
-    </div>
-  </div>
   <span class="row">
     <details>
       <summary>Folding instructions for quarto/octavo</summary>
@@ -86,49 +49,9 @@ <h2>Page Layout</h2>
     <label for="page_positioning">Page Positioning</label>
     <select name="page_positioning" id="page_positioning">
       <option value="centered" selected>Centered</option>
-      <option value="binding_alinged">Snug against binding edge</option>
+      <option value="binding_aligned">Snug against binding edge</option>
     </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/main.js

@@ -9,6 +9,7 @@ import {
   handleGenerateClick,
   handlePreviewClick,
   handleResetSettingsClick,
+  handleSewingMarksCheckboxState,
 } from './utils/clickHandlers.js';
 import { renderPaperSelectOptions } from './utils/renderUtils.js';
 
@@ -25,6 +26,7 @@ window.addEventListener('DOMContentLoaded', () => {
   const fileInput = document.getElementById('input_file');
   const inputs = document.querySelectorAll('input, select');
   const sourceRotation = document.getElementById('source_rotation');
+  const sewingMarks = document.getElementById('add_sewing_marks_checkbox');
   const sourceRotationExamples = Array.from(
     document.getElementsByClassName('source_rotation_example')
   );
@@ -53,4 +55,8 @@ window.addEventListener('DOMContentLoaded', () => {
       example.style.display = example.id === selectedValue ? 'block' : 'none';
     });
   });
+  sewingMarks.addEventListener('change', (e) => {
+    const willBeEnabled = e.srcElement.checked;
+    handleSewingMarksCheckboxState(willBeEnabled);
+  });
 });

src/models/configuration.js

@@ -35,6 +35,10 @@ const sourceRotation = urlSafe(
   z.enum(['none', '90cw', '90ccw', 'out_binding', 'in_binding'])
 ).default('none');
 
+const sewingMarkLocation = urlSafe(z.enum(['all', 'only_out', 'only_in', 'in_n_out'])).default(
+  'all'
+);
+
 /** @type { keyof typeof import("../constants").PAGE_SIZES } */
 const availablePaperSizes = Object.keys(PAGE_SIZES);
 
@@ -97,6 +101,7 @@ export const schema = z.object({
   flyleafs: urlSafe(z.coerce.number()).default(1),
 
   sewingMarksEnabled: urlSafe(coercedBoolean).default(false),
+  sewingMarkLocation,
   sewingMarksMarginPt: urlSafe(z.coerce.number()).default(72),
   sewingMarksAmount: urlSafe(z.coerce.number()).default(3),
   sewingMarksTapeWidthPt: urlSafe(z.coerce.number()).default(36),

src/signatures.js

@@ -148,26 +148,40 @@ export class Signatures {
 
       const block = [...front_block, ...back_block];
 
+      console.log(
+        `Looking front_config : block.length ${block.length} : given center ${center}, front_start ${front_start} - front_end ${front_end}, back_start ${back_start} - back_end ${back_end}, pages.length ${pages.length}`
+      );
       front_config.forEach((pnum) => {
         const page = block[pnum - 1]; //page layouts are 1-indexed, not 0-index
         pagelistdetails[0].push({
           info: page,
           isSigStart: front_start == 0 && pnum == 1,
           isSigEnd: front_start == 0 && pnum == block.length,
+          isSigMiddle: front_end == back_start && block.length / 2 + 1 == pnum,
           signatureNum: sig_num,
         });
+        console.log(
+          `  >> ${pnum}  :: ${page}  :: ${front_end == back_start && block.length / 2 + 1 == pnum}`
+        );
       });
 
       const backlist = this.duplex ? 0 : 1;
 
+      console.log(
+        `Looking back_config : given center ${center}, front_start ${front_start} - front_end ${front_end}, back_start ${back_start} - back_end ${back_end}, pages.length ${pages.length}`
+      );
       back_config.forEach((pnum) => {
         const page = block[pnum - 1];
         pagelistdetails[backlist].push({
           info: page,
           isSigStart: front_start == 0 && pnum == 1,
           isSigEnd: front_start == 0 && pnum == block.length,
+          isSigMiddle: front_end == back_start && block.length / 2 + 1 == pnum,
           signatureNum: sig_num,
         });
+        console.log(
+          `  >> ${pnum}  :: ${page}  :: ${front_end == back_start && block.length / 2 + 1 == pnum}`
+        );
       });
 
       // Update all our counters

src/utils/clickHandlers.js

@@ -53,3 +53,12 @@ export function handleResetSettingsClick(book) {
   updateAddOrRemoveCustomPaperOption();
   updatePaperSelectOptionsUnits();
 }
+
+export function handleSewingMarksCheckboxState(sewingMarksEnabled) {
+  const sewingMarkDetailsEl = document.getElementById('sewing_marks_details');
+  if (sewingMarksEnabled) {
+    sewingMarkDetailsEl.setAttribute('open', 0);
+  } else {
+    sewingMarkDetailsEl.removeAttribute('open');
+  }
+}

src/utils/drawing.js

@@ -124,12 +124,20 @@ export function drawCropmarks(papersize, per_sheet) {
 /**
  * @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 sewingMarkLocation - see ./models/configuration.js for possible values
  * @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) {
+export function drawSewingMarks(
+  sigDetails,
+  position,
+  sewingMarkLocation,
+  amount,
+  marginPt,
+  tapeWidthPt
+) {
   // Here normalize coordinates to always think in x an y like this
   // | P        |H|    P |
   // |  A       |E|   A  |
@@ -139,7 +147,17 @@ export function drawSewingMarks(sigDetails, position, amount, marginPt, tapeWidt
   // |-POSITION-| |      |
 
   // Left pages have spine position on the edge :/
+  console.log('try to draw');
   if (position.isLeftPage) return [];
+  console.log('  on right');
+
+  if (sewingMarkLocation == 'only_out' && !sigDetails.isSigStart) return [];
+  console.log('  a');
+  if (sewingMarkLocation == 'only_in' && !sigDetails.isSigMiddle) return [];
+  console.log('  b');
+  if (sewingMarkLocation == 'in_n_out' && !(sigDetails.isSigStart || sigDetails.isSigMiddle))
+    return [];
+  console.log('  c');
 
   var arePageRotated = Math.abs(position.rotation) === 90;
   let totalSpineHeight = 0;

src/utils/formUtils.js

@@ -42,7 +42,8 @@ const fromFormToConfiguration = (form) =>
     paperSizeCustomWidth: form.get('paper_size_custom_width'),
     paperSizeCustomHeight: form.get('paper_size_custom_height'),
 
-    sewingMarksEnabled: form.get('add_sewing_marks_checkbox'),
+    sewingMarksEnabled: form.has('add_sewing_marks_checkbox'),
+    sewingMarkLocation: form.get('sewing_mark_locations'),
     sewingMarksMarginPt: form.get('sewing_marks_margin_pt'),
     sewingMarksAmount: form.get('sewing_marks_amount'),
     sewingMarksTapeWidthPt: form.get('sewing_marks_tape_width_pt'),