March 8th 2024 : Getting my grubby hands on some input... - momijizukamori/bookbinder-js GitHub Wiki

Get some fucking spine-ordering lines on these fucking signatures

well fuck. where is everything? It's like a fucking air-b-n-b here...

We're drawing lines on the spine in the order that they appear in. drawing.js is where the function will go.

My neighbor drawFoldlines is called from...

import { drawFoldlines, drawCropmarks, drawSpineMarks } from './utils/drawing.js'; (so I've got to import it)

and in draw_block_onto_page

    const foldLines = foldmarks
      ? drawFoldlines(side2flag, this.duplexrotate, papersize, this.per_sheet)
      : [];
    const drawLines = [...cropLines, ...foldLines];

We're returning something - follow up on that. We're conditioning on something - follow up on that.

   * @param {Object} config - object /w the following parameters:
...
   * @param {boolean} config.cropmarks: whether to print cropmarks
...
  draw_block_onto_page(config) {
...
    const foldmarks = config.cropmarks;

Checking on how draw_block_onto_page is called...

  async writepages(config) {
...
      side2flag = this.draw_block_onto_page({
...
        cropmarks: this.cropmarks,
...
      });

I'll be honest, I get the heebie jeebies a bit at the this. ... I've no idea what our scope is there so I'm bailing.

General file search for cropmarks points me towards

    <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>

(?? what's up with the >s ??) anyway-- building out new UI element there

It's here that I settle on sig_order_marks

Next stop is configuration.js

  cropMarks: urlSafe(coercedBoolean).default(false),

Gotta make my own version of that. sigOrderMarks

formUtils.js has

    cropMarks: form.has('cropmarks'),

(am pointedly ignoring that .test.js file like a child not looking at the broccoli on their plate)

and now I make my own.

renderUtils.js has

  if (configuration.cropMarks) {
    document.querySelector("input[name='cropmarks']").checked = true;
  }

and now I make my own.

And now I'm able to arrive at draw_block_onto_page with our real boolean value in hand. (assuming we can just feed sigOrderMarks: this.sigOrderMarks, into writepages

we get to const sigOrderMarkLines = sigOrderMarks ? drawOrderMarks( ) and come to a lurching halt. What are we doing here?

The lines we kick out get added to const drawLines = [...cropLines, ...foldLines, ...sigOrderMarkLines];, which gets fed into currPage.drawLine. That object comes from outPDF.addPage(papersize) so we check out the doc for it (I know outPDF is a PDFDocument) (doc link). The documentation we have to work with results in:

import { rgb } from 'pdf-lib'

page.drawLine({
  start: { x: 25, y: 75 },
  end: { x: 125, y: 175 },
  thickness: 2,
  color: rgb(0.75, 0.2, 0.2),
  opacity: 0.75,
})

So I need the (x,y) coordinates of the bounds of the spine (where top? where bottom?) - I need to know the signature number - I need to know if we're on the right page to draw the marks (outer most folio) - I'd like to not overlap w/ the PDF lines so I need to know where those are too

What do I have on hand? (there, in draw_block_onto_page)

(I had been pattern matching off of cropmarks but now I'm copying pdfEdgeMarks as I know those solve the several of the requirements)

      if (pdfEdgeMarks && (sigDetails[i].isSigStart || sigDetails[i].isSigEnd)) {
        drawLines.push(drawSpineMarks(sigDetails[i], positions[i]));
      }

Great, so we're going push the pdfEdgeMarks check down into the "you're at the beginning/end" check.

I'm now deciding on drawSigOrderMark and importing it/adding it to drawing.js -- only now do I notice * @typedef Line and * @typedef Point at the top of the file. Useful!

/**
 * @param {import("../book.js").PageInfo} sigDetails - page info object
 * @param {import("../book.js").Position} position - position info object
 * @returns {Line}
 */
export function drawSpineMarks(sigDetails, position) {

Does my question of "what signature is this?" belong in either of those objects? ... (maybe position? but I'm pretty sure that's the devil talking) Look at the variable name! It's sigDetails -- that is where it belongs. (yes, it's called PageInfo but what came first? -- if that's where we're getting our signature info, that's where we're getting our signature info)

Hacking on * @property {number} signatureNum - which signature is this page in. 0 based

I just followed where isSigStart was created and snuck in signatureNum: sig_num, after tacking on sig_num to the while (front_start >= 0 && back_end <= pages.length) { loop... assuming those are signatures? 😅

Anyway... I've only just now started touching files- everything up to this point has been mostly "loading into memory" so best to save this page now and do a quick test of the page loading...

So we have everything we need now- which signature it is, the "top" and "bottom" of our line (lifting from prior code...)

position.spineMarkTop;
position.spineMarkTop;

with code on how to appropriately rotate it...

Let's make this nice tho-- I want real clear indicators. Going back to the documentation, I find:

page.drawRectangle({
  x: 25,
  y: 75,
  width: 250,
  height: 75,
  rotate: degrees(-15),
  borderWidth: 5,
  borderColor: grayscale(0.5),
  color: rgb(0.75, 0.2, 0.2),
  opacity: 0.5,
  borderOpacity: 0.75,
})

So the width of the rectangle is drawSpineMarks when isSigStart=1 (👀 I don't like that, that looks like a bug... why is drawSpineMarks plural and we're only returning one line? This can have problems with over painting...? We are drawing them in post... Then we should be more explicate/take a boolean or something.... remove the plural... 🐞 )

The max space I have is distance between position.spineMarkBottom and position.spineMarkTop. Then... am I stair stepping from the top to the bottom? Am I stepping a fixed height? (if so, what?) ((😩 just realized that if I want to do % of total... I need to know the total. ?? How do I do that? )) const it is

😩 just noticed the width: 250, height: 75, in the example for drawRectangle. Relative to what?? How is x,y related to the width and height?? Thank goodness for ✨ the Preview! ✨

Looking at the Preview (too much of a hassle to try and upload/affix image) -- I get the feeling x,y is lower left corner of rectangle. Height/width will need to be rotated occasionally 😩

fucking math. It's 10:53pm and I'm not high enough for this. Calling it a night. Need to pick back up and just render the rectangles correctly... you know, the core element of the feature 😩 .....