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

@@ -21,6 +21,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
  */
 
@@ -91,6 +92,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,
@@ -231,13 +233,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':
@@ -610,6 +605,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: {
+      sewing_mark_locations: 'all',
       amount: 3,
       isEnabled: false,
       marginPt: 72,

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,8 @@ 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 sewingMarksDetails = document.getElementById('sewing_marks_details');
   const sourceRotationExamples = Array.from(
     document.getElementsByClassName('source_rotation_example')
   );
@@ -53,4 +56,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,32 @@ 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,13 @@ 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 +140,16 @@ 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'),

src/utils/layout.js

@@ -131,7 +131,7 @@ export function calculateDimensions(book) {
     top: padding_pt.top * sy,
   };
 
-  // page_positioning has 2 options: centered, binding_alinged
+  // page_positioning has 2 options: centered, binding_aligned
   const positioning = page_positioning;
 
   const xForeEdgeShiftFunc = function () {

src/utils/renderUtils.js

@@ -3,6 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import { PAGE_SIZES } from '../constants';
+import {handleSewingMarksCheckboxState} from './clickHandlers.js';
 
 export function renderPageCount(book) {
   const pageCount = document.getElementById('page_count');
@@ -203,8 +204,11 @@ export function renderFormFromSettings(configuration) {
   ).checked = true;
 
   // Set french link stitches settings
+  handleSewingMarksCheckboxState(configuration.sewingMarksEnabled)
   document.querySelector('input[name="add_sewing_marks_checkbox"]').checked =
     configuration.sewingMarksEnabled;
+  document.querySelector('select[name="sewing_mark_locations"]').value = 
+    configuration.sewingMarkLocation;
   document.querySelector('input[name="sewing_marks_margin_pt"]').value =
     configuration.sewingMarksMarginPt;
   document.querySelector('input[name="sewing_marks_amount"]').value =