234 lines
9.2 KiB
JavaScript
234 lines
9.2 KiB
JavaScript
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, Point, 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, Point, 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)
|
|
}
|
|
}
|
|
})
|