freesewing/sites/shared/components/workbench/layout/print/plugin.js

const name = 'Pages Plugin'
const version = '1.0.0'
export const sizes = {
  a4: [ 210, 297 ],
  a3: [ 297, 420 ],
  a2: [ 420, 594 ],
  a1: [ 594, 841 ],
  a0: [ 841, 1188 ],
  letter: [ 215.9, 279.4 ],
  tabloid: [ 279.4, 431.8 ],
}

/** get a letter to represent an index */
const indexLetter = (i) => String.fromCharCode('A'.charCodeAt(0) + i - 1)

/**
 * A plugin to add printer pages
 * */
export const pagesPlugin = ({size='a4', orientation='portrait', margin=10}, printStyle = false /** should the pages be rendered for printing or for screen viewing? */ ) => {
  const ls = orientation === 'landscape'
  let sheetHeight = sizes[size][ls ? 1 : 0]
  let sheetWidth = sizes[size][ls ? 0 : 1]
  sheetWidth -= margin
  sheetHeight -= margin
  return basePlugin({sheetWidth, sheetHeight, orientation, printStyle})
}

/**
 * The base plugin for adding a layout helper part like pages or fabric
 * sheetWidth: the width of the helper part
 * sheetHeight: the height of the helper part
 * boundary: should the helper part calculate its boundary?
 * responsiveColumns: should the part make more columns if the pattern exceed its width? (for pages you want this, for fabric you don't)
 * printStyle: hould the pages be rendered for printing or for screen viewing?
 * */
const basePlugin = ({
  sheetWidth,
  sheetHeight,
  boundary=false,
  partName="pages",
  responsiveColumns=true,
  printStyle=false
}) => ({
  name,
  version,
  hooks: {
    postLayout: function(pattern) {
      // Add part
      pattern.parts[partName] = pattern.Part(partName)
      // Keep part out of layout
      pattern.parts[partName].layout = false
      // But add the part to the autoLayout property
      pattern.autoLayout.parts[partName] = {
        move: { x: 0, y: 0 }
      }
      // Add pages
      const { macro } = pattern.parts[partName].shorthand()
      let { height, width } = pattern
      if (!responsiveColumns) width = sheetWidth;
      if (pattern.settings.layout?.topLeft) {
        height += pattern.settings.layout.topLeft.y
        responsiveColumns && (width += pattern.settings.layout.topLeft.x)
      }

      macro('addPages', { size: [sheetWidth, sheetHeight], height, width })

      if (boundary) pattern.parts[partName].boundary();
    }
  },
  macros: {
    /** draft the pages */
    addPages: function(so) {
      const [h,w] = so.size
      const cols = Math.ceil(so.width / w)
      const rows = Math.ceil(so.height / h)
      const { points, Point, paths, Path, macro } = this.shorthand()
      let x = 0
      let y = 0
      let count = 0
      for (let row=0;row<rows;row++) {
        x=0
        for (let col=0;col<cols;col++) {
          count++
          const pageName = `_pages__row${row}-col${col}`
          points[`${pageName}-tl`] = new Point(x,y)
          points[`${pageName}-tr`] = new Point(x+w,y)
          points[`${pageName}-br`] = new Point(x+w,y+h)
          points[`${pageName}-bl`] = new Point(x,y+h)
          points[`${pageName}-circle`] = new Point(x+w/2,y+h/2)
            .attr('data-circle', 42)
            .attr('data-circle-class', 'stroke-4xl muted fabric')
            .attr('data-circle-id', `${pageName}-circle`)
          points[`${pageName}-text`] = new Point(x+w/2,y+h/2)
            .attr('data-text', `${indexLetter(col + 1)}${row + 1}`)
            .attr('data-text-class', 'text-4xl center baseline-center bold muted fill-fabric')
            .attr('data-text-id', `${pageName}-text`)

          paths[pageName] = new Path()
            .attr('id', pageName)
            .move(points[`${pageName}-tl`])
            .line(points[`${pageName}-bl`])
            .line(points[`${pageName}-br`])
            .line(points[`${pageName}-tr`])
            .close()

          if (!printStyle) {
            paths[pageName].attr('class', 'fill-fabric')
            .attr('style', `stroke-opacity: 0; fill-opacity: ${(col+row)%2===0 ? 0.03 : 0.09};`)
          }
          else {
            paths[pageName].attr('class', 'interfacing stroke-xs')
            // add markers and rulers
            macro('addPageMarkers', {row, col, pageName})
            macro('addRuler', {xAxis: true, pageName})
            macro('addRuler', {xAxis: false, pageName})
          }
          x += w
        }
        y += h
      }
      // Store page count in part
      this.pages = { cols, rows, count: cols*rows }

    },
    /** add a ruler to the top left corner of the page */
    addRuler({xAxis, pageName}) {
      const { points, paths, Path } = this.shorthand()
      // arbitrary number of units for the ruler
      const rulerLength = 2
      const isMetric = this.context.settings.units === 'metric'
      // distance to the end of the ruler
      const endPointDist = [(isMetric ? 10 : 25.4) * rulerLength, 0]

      const axisName = xAxis ? 'x' : 'y'
      const rulerName = `${pageName}-${axisName}`
      // start by making an endpoint for the ruler based on the axis
      const endPoint = [endPointDist[xAxis ? 0 : 1], endPointDist[xAxis ? 1 : 0]]
      points[`${rulerName}-ruler-end`] = points[`${pageName}-tl`].translate(endPoint[0], endPoint[1])
      // also make a tick for the end of the ruler
      points[`${rulerName}-ruler-tick`] = points[`${rulerName}-ruler-end`].translate(xAxis ? 0 : 3, xAxis ? 3 : 0)
        // add a label to it
        .attr('data-text', rulerLength + (isMetric ? 'cm' : 'in'))
        // space the text properly from the end of the line
        .attr('data-text-class', 'fill-interfacing baseline-center' +  (xAxis ? ' center' : ''))
        .attr(`data-text-d${xAxis ? 'y' : 'x'}`, xAxis ? 5 : 3)
        // give the text an explicit id in case we need to hide it later
        .attr('data-text-id', `${rulerName}-ruler-text`)

      // start the path
      paths[`${rulerName}-ruler`] = new Path()
        .move(points[`${pageName}-tl`])
        // give it an explicit id in case we need to hide it later
        .attr('id', `${rulerName}-ruler`)
        .attr('class', 'interfacing stroke-xs')

      // get the distance between the smaller ticks on the rule
      const division = (isMetric ? 0.1 : 0.125) / rulerLength
      // we're going to go by fraction, so we want to do this up to 1
      for (var d = division; d < 1; d+= division) {
        // make a start point
        points[`${rulerName}-ruler-${d}-end`] = points[`${pageName}-tl`].shiftFractionTowards(points[`${rulerName}-ruler-end`], d)

        // base tick size on whether this is a major interval or a minor one
        let tick = 1;
        // if this tick indicates a whole unit, extra long
        if (d.toFixed(3) % (1/rulerLength) === 0) tick = 3
        // if this tick indicates half a unit, long
        else if (d.toFixed(3) % (0.5/rulerLength) === 0) tick = 2

        // make a point for the end of the tick
        points[`${rulerName}-ruler-${d}-tick`] = points[`${rulerName}-ruler-${d}-end`].translate(xAxis ? 0 : tick, xAxis ? tick : 0)

        // add the whole set to the ruler path
        paths[`${rulerName}-ruler`]
          .line(points[`${rulerName}-ruler-${d}-end`])
          .line(points[`${rulerName}-ruler-${d}-tick`])
          .line(points[`${rulerName}-ruler-${d}-end`])
      }

      // add the end
      paths[`${rulerName}-ruler`]
      .line(points[`${rulerName}-ruler-end`])
      .line(points[`${rulerName}-ruler-tick`])
    },
    /** add page markers to the given page */
    addPageMarkers({row, col, pageName}) {
      const {macro, points} = this.shorthand()
      // these markers are placed on the top and left of the page,
      // so skip markers for the top row or leftmost column
      if (row !== 0) macro('addPageMarker', {
        along: [points[`${pageName}-tl`], points[`${pageName}-tr`]],
        label: '' + row,
        isRow: true,
        pageName
      })
      if (col !== 0) macro('addPageMarker', {
        along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
        label: indexLetter(col),
        isRow: false,
        pageName
      })
    },
    /** add a page marker for either the row of the column */
    addPageMarker({along, label, isRow, pageName}) {
      const {points, paths, Path} = this.shorthand()
      const markerName = `${pageName}-${isRow ? 'row' : 'col'}-marker`

      // get a point on the center of the appropriate side
      points[`${markerName}-center`] = along[0].shiftFractionTowards(along[1], 0.5)
        // add the label to it
        .attr('data-text', label)
        .attr('data-text-class', 'text-sm center baseline-center bold')
        // give it an explicit ID in case we need to hide it later
        .attr('data-text-id', markerName + '-text')

      // get points to make a diamond around the center point
      points[`${markerName}-r`] = points[`${markerName}-center`].translate(-5, 0)
      points[`${markerName}-l`] = points[`${markerName}-center`].translate(5, 0)
      points[`${markerName}-t`] = points[`${markerName}-center`].translate(0, -5)
      points[`${markerName}-b`] = points[`${markerName}-center`].translate(0, 5)

      // make a path for the diamond
      paths[markerName] = new Path()
        .move(points[`${markerName}-r`])
        .line(points[`${markerName}-t`])
        .line(points[`${markerName}-l`])
        .line(points[`${markerName}-b`])
        .close()
        .attr('class', 'fill-interfacing interfacing')
        // give it an explicit ID in case we need to hide it later
        .attr('id', markerName)
    }
  }
})