freesewing/sites/shared/components/workbench/layout/plugin-layout-part.mjs

import { pluginAnnotations } from '@freesewing/plugin-annotations'

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 less than 26*/
const indexLetter = (i) => String.fromCharCode('A'.charCodeAt(0) + i - 1)

/** get a string of letters to represent an index */
const indexStr = (i) => {
  let index = i % 26
  let quotient = i / 26
  let result

  if (i <= 26) {
    return indexLetter(i)
  } //Number is within single digit bounds of our encoding letter alphabet

  if (quotient >= 1) {
    //This number was bigger than the alphabet, recursively perform this function until we're done
    if (index === 0) {
      quotient--
    } //Accounts for the edge case of the last letter in the dictionary string
    result = indexStr(quotient)
  }

  if (index === 0) {
    index = 26
  } //Accounts for the edge case of the final letter; avoids getting an empty string

  return result + indexLetter(index)
}
/**
 * A plugin to add printer pages
 * */
export const pagesPlugin = ({ size = 'a4', ...settings }) => {
  const ls = settings.orientation === 'landscape'
  let sheetHeight = sizes[size][ls ? 0 : 1]
  let sheetWidth = sizes[size][ls ? 1 : 0]
  sheetWidth -= settings.margin * 2
  sheetHeight -= settings.margin * 2

  return basePlugin({ ...settings, sheetWidth, sheetHeight })
}

export const fabricPlugin = (settings) => {
  return basePlugin({
    ...settings,
    partName: 'fabric',
    responsiveColumns: false,
  })
}

/** check if there is anything to render on the given section of the svg so that we can skip empty pages */
const doScanForBlanks = (stacks, layout, x, y, w, h) => {
  let hasContent = false
  for (var s in stacks) {
    let stack = stacks[s]

    // get the position of the part
    let stackLayout = layout.stacks[s]
    if (!stackLayout) continue

    let stackMinX = stackLayout.tl?.x || stackLayout.move.x + stack.topLeft.x
    let stackMinY = stackLayout.tl?.y || stackLayout.move.y + stack.topLeft.y
    let stackMaxX = stackLayout.br?.x || stackMinX + stack.width
    let stackMaxY = stackLayout.br?.y || stackMinY + stack.height

    // check if the stack overlaps the page extents
    if (
      // if the left of the stack is further left than the right end of the page
      stackMinX < x + w &&
      // and the top of the stack is above the bottom of the page
      stackMinY < y + h &&
      // and the right of the stack is further right than the left of the page
      stackMaxX > x &&
      // and the bottom of the stack is below the top to the page
      stackMaxY > y
    ) {
      // the stack has content inside the page
      hasContent = true
      // so we stop looking
      break
    }
  }

  return hasContent
}

export function addToOnly(pattern, partName) {
  const only = pattern.settings[0].only
  if (only && !only.includes(partName)) {
    pattern.settings[0].only = [].concat(only, partName)
  }
}

function removeFromOnly(pattern, partName) {
  const only = pattern.settings[0].only
  if (only && only.includes(partName)) {
    pattern.settings[0].only.splice(only.indexOf(partName), 1)
  }
}
/**
 * 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: should the pages be rendered for printing or for screen viewing?
 * */
const basePlugin = ({
  sheetWidth,
  sheetHeight,
  // boundary = false,
  partName = 'pages',
  responsiveColumns = true,
  printStyle = false,
  scanForBlanks = true,
  renderBlanks = true,
  setPatternSize = false,
}) => ({
  name,
  version,
  hooks: {
    preDraft: function (pattern) {
      if (!responsiveColumns) {
        pattern.settings[0].maxWidth = sheetWidth
      }

      addToOnly(pattern, partName)
      // Add part
      pattern.addPart({
        name: partName,
        draft: (shorthand) => {
          const layoutData = shorthand.store.get('layoutData')
          // only actually draft the part if layout data has been set
          if (layoutData) {
            shorthand.macro('addPages', layoutData, shorthand)
            shorthand.part.unhide()
          } else {
            shorthand.part.hide()
          }
          return shorthand.part
        },
      })
    },
    postLayout: function (pattern) {
      let { height, width, stacks } = pattern
      if (!responsiveColumns) width = sheetWidth
      // get the layout
      const layout =
        typeof pattern.settings[pattern.activeSet].layout === 'object'
          ? pattern.settings[pattern.activeSet].layout
          : pattern.autoLayout

      // if the layout doesn't start at 0,0 we want to account for that in our height and width
      if (layout?.topLeft) {
        height += layout.topLeft.y
        responsiveColumns && (width += layout.topLeft.x)
      }

      // store the layout data so the part can use it during drafting
      pattern.setStores[pattern.activeSet].set('layoutData', {
        size: [sheetHeight, sheetWidth],
        height,
        width,
        layout,
        stacks,
      })

      // draft the part
      pattern.draftPartForSet(partName, pattern.activeSet)

      // if the pattern size is supposed to be re-set to the full width and height of all pages, do that
      const generatedPageData = pattern.setStores[pattern.activeSet].get(partName)
      if (setPatternSize === true || setPatternSize === 'width')
        pattern.width = Math.max(pattern.width, sheetWidth * generatedPageData.cols)
      if (setPatternSize === true || setPatternSize === 'height')
        pattern.height = Math.max(pattern.height, sheetHeight * generatedPageData.rows)

      removeFromOnly(pattern, partName)
    },
    preRender: function (svg) {
      addToOnly(svg.pattern, partName)
    },
    postRender: function (svg) {
      removeFromOnly(svg.pattern, partName)
    },
  },
  macros: {
    banner: pluginAnnotations.macros.banner,
    /** draft the pages */
    addPages: function (so, shorthand) {
      const [h, w] = so.size
      const cols = Math.ceil(so.width / w)
      const rows = Math.ceil(so.height / h)
      const { points, Point, paths, Path, part, macro, store } = shorthand
      let count = 0
      let withContent = {}
      part.topLeft = so.layout.topLeft || { x: 0, y: 0 }

      // get the layout from the pattern
      const { layout } = so
      for (let row = 0; row < rows; row++) {
        let y = row * h
        withContent[row] = {}
        for (let col = 0; col < cols; col++) {
          let x = col * w
          let hasContent = true
          if (scanForBlanks && layout) {
            hasContent = doScanForBlanks(so.stacks, layout, x, y, w, h)
          }
          withContent[row][col] = hasContent
          if (!renderBlanks && !hasContent) continue
          if (hasContent) 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)
            .setCircle(56, 'stroke-4xl muted fabric')
            .attr('data-circle-id', `${pageName}-circle`)
          points[`${pageName}-text`] = new Point(x + w / 2, y + h / 2)
            .setText(
              `${responsiveColumns ? indexStr(col + 1) : ''}${row + 1}`,
              '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()

          // add an edge warning if it can't expand horizontally
          if (!responsiveColumns) {
            paths[pageName + '_edge'] = new Path()
              .move(points[`${pageName}-tr`])
              .line(points[`${pageName}-br`])
              // .move(points[`${pageName}-br`].translate(20, 0))
              .addClass('help contrast stroke-xl')

            shorthand.macro('banner', {
              path: paths[pageName + '_edge'],
              text: 'plugin:edgeOf' + shorthand.utils.capitalize(partName),
              className: 'text-xl center',
              spaces: 20,
            })
          }

          if (col === cols - 1 && row === rows - 1) {
            const br = points[`${pageName}-br`]
            part.width = br.x
            part.height = br.y
            part.bottomRight = { x: br.x, y: br.y }
          }

          if (!printStyle) {
            paths[pageName]
              .attr('class', 'fill-fabric')
              .attr(
                'style',
                `stroke-opacity: 0; fill-opacity: ${(col + row) % 2 === 0 ? 0.03 : 0.15};`
              )
          } else {
            paths[pageName].attr('class', 'interfacing stroke-xs')
            // add markers and rulers
            macro('addPageMarkers', { row, col, pageName, withContent }, shorthand)
            macro('addRuler', { xAxis: true, pageName }, shorthand)
            macro('addRuler', { xAxis: false, pageName }, shorthand)
          }
        }
      }
      // Store page count in part
      store.set(partName, { cols, rows, count, withContent, width: w, height: h })
    },
    /** add a ruler to the top left corner of the page */
    addRuler({ xAxis, pageName }, shorthand) {
      const { points, paths, Path } = shorthand
      const isMetric = this.context.settings.units === 'metric'
      // not so arbitrary number of units for the ruler
      const rulerLength = isMetric ? 10 : 2
      // 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' : '&quot;'))
        // 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
      // Set up intervals for whole and half units.
      const wholeInterval = isMetric ? 10 : 8
      const halfInterval = isMetric ? 5 : 4
      let tickCounter = 1
      // 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 (tickCounter % wholeInterval === 0) tick = 3
        // if this tick indicates half a unit, long
        else if (tickCounter % halfInterval === 0) tick = 2
        tickCounter++

        // 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, withContent }, shorthand) {
      const { macro, points } = 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 && withContent[row - 1][col])
        macro('addPageMarker', {
          along: [points[`${pageName}-tr`], points[`${pageName}-tl`]],
          label: [`${row}`, `${row + 1}`],
          isRow: true,
          pageName,
        })
      if (col !== 0 && withContent[row][col - 1])
        macro('addPageMarker', {
          along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
          label: [indexStr(col), indexStr(col + 1)],
          isRow: false,
          pageName,
        })
    },
    /** add a page marker for either the row or the column, to aid with alignment and orientation */
    addPageMarker({ along, label, isRow, pageName }) {
      const { points, paths, Path, scale } = this.shorthand()
      const markerName = `${pageName}-${isRow ? 'row' : 'col'}-marker`

      // x and y distances between corners. one will always be 0, which is helpful
      const xDist = along[0].dx(along[1])
      const yDist = along[0].dy(along[1])

      // size of the x mark should be impacted by the scale setting
      const markSize = 4 * scale

      // make one at 25% and one at 75%
      for (var d = 25; d < 100; d += 50) {
        // get points to make an x at d% along the edge
        const dName = `${markerName}-${d}`
        const centerName = `${dName}-center`
        points[centerName] = along[0].translate((xDist * d) / 100, (yDist * d) / 100)
        points[`${dName}-tr`] = points[centerName].translate(-markSize, markSize)
        points[`${dName}-tl`] = points[centerName].translate(-markSize, -markSize)
        points[`${dName}-br`] = points[centerName].translate(markSize, markSize)
        points[`${dName}-bl`] = points[centerName].translate(markSize, -markSize)

        // make a path for the x
        paths[`${dName}`] = new Path()
          .move(points[`${dName}-tr`])
          .line(points[`${dName}-bl`])
          .move(points[`${dName}-tl`])
          .line(points[`${dName}-br`])
          .attr('class', 'interfacing stroke-xs')
          // give it an explicit ID in case we need to hide it later
          .attr('id', dName)

        // add directional labels
        let angle = along[0].angle(along[1]) - 90
        for (var i = 0; i < 2; i++) {
          points[`${dName}-label-${i + 1}`] = points[centerName]
            .shift(angle, markSize)
            .setText(label[i], 'text-xs center baseline-center fill-interfacing')
            // give it an explicit ID in case we need to hide it later
            .attr('data-text-id', `${dName}-text-${i + 1}`)
          // rotate for the next one
          angle += 180
        }
      }
    },
  },
})