pdf export working
This commit is contained in:
Enoch Riese
parent
922cfd02b9
commit
d8cb8a7783
9 changed files with 313 additions and 273 deletions
|
|
@ -53,7 +53,7 @@ const colors = {
|
|||
* scale: the scale of the markings
|
||||
* stripped: should nested declarations be stripped out? Necessary for svgToPdfkit
|
||||
* */
|
||||
export const buildStylesheet = (scale, stripped) => `
|
||||
export const buildStylesheet = (scale = 1, stripped) => `
|
||||
${!stripped ? '/* Reset */' : ''}
|
||||
${!stripped ? 'svg.freesewing ' : ''}path,
|
||||
${!stripped ? 'svg.freesewing ' : ''}circle,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,16 @@
|
|||
const Circle = (props) => props.point.attributes.getAsArray('data-circle').map((r,i) => {
|
||||
const circleProps = props.point.attributes.asPropsIfPrefixIs('data-circle-')
|
||||
const extraProps = {}
|
||||
for (const prop in circleProps) {
|
||||
const val = props.point.attributes.getAsArray(`data-circle-${(prop === 'className' ? 'class' : prop)}`)
|
||||
if (val.length >= i) extraProps[prop] = val[i]
|
||||
else extraProps[prop] = val.join(' ')
|
||||
}
|
||||
const Circle = (props) =>
|
||||
props.point.attributes.getAsArray('data-circle').map((r, i) => {
|
||||
const circleProps = props.point.attributes.asPropsIfPrefixIs('data-circle-')
|
||||
const extraProps = {}
|
||||
for (const prop in circleProps) {
|
||||
const val = props.point.attributes.getAsArray(
|
||||
`data-circle-${prop === 'className' ? 'class' : prop}`
|
||||
)
|
||||
if (val.length >= i) extraProps[prop] = val[i]
|
||||
else extraProps[prop] = val.join(' ')
|
||||
}
|
||||
|
||||
return (
|
||||
<circle
|
||||
cx={props.point.x}
|
||||
cy={props.point.y}
|
||||
r={r}
|
||||
{...extraProps}
|
||||
/>
|
||||
)
|
||||
})
|
||||
return <circle key={r} cx={props.point.x} cy={props.point.y} r={r} {...extraProps} />
|
||||
})
|
||||
|
||||
export default Circle
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export const handleExport = async (format, gist, design, t, app, onComplete, onE
|
|||
|
||||
// add the strings that are used on the cover page
|
||||
workerArgs.strings = {
|
||||
design: capitalize(gist.design),
|
||||
design: capitalize(pattern.designConfig.data.name.replace('@freesewing/', '')),
|
||||
tagline: t('common:sloganCome') + '. ' + t('common:sloganStay'),
|
||||
url: window.location.href,
|
||||
}
|
||||
|
|
@ -112,13 +112,10 @@ export const handleExport = async (format, gist, design, t, app, onComplete, onE
|
|||
|
||||
// draft and render the pattern
|
||||
pattern.draft()
|
||||
svg = pattern.render()
|
||||
workerArgs.svg = pattern.render()
|
||||
|
||||
// add the svg and pages data to the worker args
|
||||
workerArgs.svg = svg
|
||||
if (pattern.parts.pages) {
|
||||
workerArgs.pages = pattern.parts.pages.pages
|
||||
}
|
||||
workerArgs.pages = pattern.setStores[pattern.activeSet].get('pages')
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
app.stopLoading()
|
||||
|
|
|
|||
|
|
@ -65,8 +65,8 @@ export default class PdfMaker {
|
|||
this.rows = pages.rows
|
||||
|
||||
// calculate the width of the svg in points
|
||||
this.svgWidth = this.columns * pages.width * mmToPoints
|
||||
this.svgHeight = this.rows * pages.height * mmToPoints
|
||||
this.svgWidth = this.columns * this.pageWidth
|
||||
this.svgHeight = this.rows * this.pageHeight
|
||||
}
|
||||
|
||||
/** create the pdf document */
|
||||
|
|
@ -179,7 +179,7 @@ export default class PdfMaker {
|
|||
preserveAspectRatio: 'xMinYMin slice',
|
||||
}
|
||||
|
||||
// everything is offset by half a margin so that it's centered on the page
|
||||
// everything is offset by a margin so that it's centered on the page
|
||||
const startMargin = this.margin
|
||||
for (var h = 0; h < this.rows; h++) {
|
||||
for (var w = 0; w < this.columns; w++) {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Defs from '../../draft/defs'
|
|||
import Stack from './part'
|
||||
import SvgWrapper from '../../draft/svg-wrapper'
|
||||
import { getProps } from '../../draft/utils'
|
||||
import { PartInner } from '../../draft/part'
|
||||
|
||||
const Draft = (props) => {
|
||||
const {
|
||||
|
|
@ -69,8 +70,16 @@ const Draft = (props) => {
|
|||
? `${layout.topLeft.x} ${layout.topLeft.y} ${layout.width} ${layout.height}`
|
||||
: false
|
||||
|
||||
const stacks = []
|
||||
const stacks = [
|
||||
<PartInner
|
||||
{...{ part: patternProps.parts[0][props.layoutPart], partName: props.layoutPart, gist }}
|
||||
key={props.layoutPart}
|
||||
/>,
|
||||
]
|
||||
for (var stackName in patternProps.stacks) {
|
||||
if (stackName === props.layoutPart) {
|
||||
continue
|
||||
}
|
||||
let stack = patternProps.stacks[stackName]
|
||||
|
||||
const stackPart = (
|
||||
|
|
@ -88,7 +97,7 @@ const Draft = (props) => {
|
|||
/>
|
||||
)
|
||||
|
||||
stacks[stack === props.layoutPart ? 'unshift' : 'push'](stackPart)
|
||||
stacks.push(stackPart)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ const PrintLayout = (props) => {
|
|||
// draft the pattern
|
||||
draft.draft()
|
||||
patternProps = draft.getRenderProps()
|
||||
console.log(patternProps)
|
||||
} catch (err) {
|
||||
console.log(err, props.gist)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,32 +50,32 @@ export const pagesPlugin = ({ size = 'a4', ...settings }) => {
|
|||
return basePlugin({ ...settings, sheetWidth, sheetHeight })
|
||||
}
|
||||
|
||||
const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
||||
const doScanForBlanks = (stacks, layout, x, y, w, h) => {
|
||||
let hasContent = false
|
||||
for (var p in parts) {
|
||||
let part = parts[p]
|
||||
// skip the pages part and any that aren't rendered
|
||||
if (part === this || part.render === false || part.isEmpty()) continue
|
||||
for (var s in stacks) {
|
||||
let stack = stacks[s]
|
||||
|
||||
// get the position of the part
|
||||
let partLayout = layout.parts[p]
|
||||
let partMinX = partLayout.tl?.x || partLayout.move.x + part.topLeft.x
|
||||
let partMinY = partLayout.tl?.y || partLayout.move.y + part.topLeft.y
|
||||
let partMaxX = partLayout.br?.x || partMinX + part.width
|
||||
let partMaxY = partLayout.br?.y || partMinY + part.height
|
||||
let stackLayout = layout.stacks[s]
|
||||
if (!stackLayout) continue
|
||||
|
||||
// check if the part overlaps the page extents
|
||||
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 part is further left than the right end of the page
|
||||
partMinX < x + w &&
|
||||
// and the top of the part is above the bottom of the page
|
||||
partMinY < y + h &&
|
||||
// and the right of the part is further right than the left of the page
|
||||
partMaxX > x &&
|
||||
// and the bottom of the part is below the top to the page
|
||||
partMaxY > y
|
||||
// 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 part has content inside the page
|
||||
// the stack has content inside the page
|
||||
hasContent = true
|
||||
// so we stop looking
|
||||
break
|
||||
|
|
@ -107,7 +107,44 @@ const basePlugin = ({
|
|||
name,
|
||||
version,
|
||||
hooks: {
|
||||
preDraft: function (pattern) {
|
||||
preLayout: function (pattern) {
|
||||
// Add part
|
||||
pattern.addPart({
|
||||
name: partName,
|
||||
draft: (shorthand) => {
|
||||
const layoutData = shorthand.store.get('layoutData')
|
||||
if (layoutData) {
|
||||
shorthand.macro('addPages', layoutData, shorthand)
|
||||
shorthand.part.unhide()
|
||||
} else {
|
||||
shorthand.part.hide()
|
||||
}
|
||||
return shorthand.part
|
||||
},
|
||||
})
|
||||
pattern.getConfig()
|
||||
pattern.createPartForSet(partName, pattern.activeSet)
|
||||
},
|
||||
postLayout: function (pattern) {
|
||||
let { height, width, stacks } = pattern
|
||||
if (!responsiveColumns) width = sheetWidth
|
||||
const layout =
|
||||
typeof pattern.settings[0].layout === 'object'
|
||||
? pattern.settings[0].layout
|
||||
: pattern.autoLayout
|
||||
|
||||
if (layout?.topLeft) {
|
||||
height += layout.topLeft.y
|
||||
responsiveColumns && (width += layout.topLeft.x)
|
||||
}
|
||||
|
||||
pattern.setStores[pattern.activeSet].set('layoutData', {
|
||||
size: [sheetHeight, sheetWidth],
|
||||
height,
|
||||
width,
|
||||
layout,
|
||||
stacks,
|
||||
})
|
||||
// But add the part to the autoLayout property
|
||||
// pattern.autoLayout.parts[partName] = {
|
||||
// move: { x: 0, y: 0 }
|
||||
|
|
@ -116,222 +153,209 @@ const basePlugin = ({
|
|||
// TODO migrate this to v3 parts adding
|
||||
// Add pages
|
||||
// const { macro } = pattern.config.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)
|
||||
}
|
||||
pattern.draftPartForSet(partName, pattern.activeSet)
|
||||
|
||||
// Add part
|
||||
pattern.addPart({
|
||||
name: partName,
|
||||
layout: false,
|
||||
draft: (shorthand) => {
|
||||
pluginMacros.addPages(
|
||||
{ size: [sheetHeight, sheetWidth], height, width, layout },
|
||||
shorthand
|
||||
)
|
||||
return shorthand.part
|
||||
},
|
||||
})
|
||||
pattern.getConfig()
|
||||
console.log(pattern.config, pattern.designConfig)
|
||||
|
||||
const layout =
|
||||
typeof pattern.settings.layout === 'object' ? pattern.settings.layout : pattern.autoLayout
|
||||
|
||||
// macro('addPages', { size: [sheetHeight,sheetWidth, ], height, width, layout })
|
||||
|
||||
if (boundary) pattern.parts[partName].boundary()
|
||||
if (setPatternSize) {
|
||||
pattern.width = sheetWidth * pattern.parts[partName].pages.cols
|
||||
pattern.height = sheetHeight * pattern.parts[partName].pages.rows
|
||||
const generatedPageData = pattern.setStores[pattern.activeSet].get('pages')
|
||||
pattern.width = sheetWidth * generatedPageData.cols
|
||||
pattern.height = sheetHeight * generatedPageData.rows
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
macros: {
|
||||
/** 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, macro } = shorthand
|
||||
let count = 0
|
||||
let withContent = {}
|
||||
shorthand.part.topLeft = so.layout.topLeft || { x: 0, y: 0 }
|
||||
|
||||
const pluginMacros = {
|
||||
/** 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, macro } = shorthand
|
||||
let count = 0
|
||||
let withContent = {}
|
||||
// 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(this.context.parts, 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)
|
||||
.attr('data-circle', 56)
|
||||
.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', `${indexStr(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};`
|
||||
// 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(
|
||||
`${indexStr(col + 1)}${row + 1}`,
|
||||
'text-4xl center baseline-center bold muted fill-fabric'
|
||||
)
|
||||
} else {
|
||||
paths[pageName].attr('class', 'interfacing stroke-xs')
|
||||
// add markers and rulers
|
||||
pluginMacros.addPageMarkers({ row, col, pageName, withContent }, shorthand)
|
||||
pluginMacros.addRuler({ xAxis: true, pageName }, shorthand)
|
||||
pluginMacros.addRuler({ xAxis: false, pageName }, shorthand)
|
||||
.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 (col === cols - 1 && row === rows - 1) {
|
||||
const br = points[`${pageName}-br`]
|
||||
shorthand.part.width = br.x
|
||||
shorthand.part.height = br.y
|
||||
shorthand.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.09};`
|
||||
)
|
||||
} else {
|
||||
paths[pageName].attr('class', 'interfacing stroke-xs')
|
||||
// add markers and rulers
|
||||
shorthand.macro('addPageMarkers', { row, col, pageName, withContent }, shorthand)
|
||||
shorthand.macro('addRuler', { xAxis: true, pageName }, shorthand)
|
||||
shorthand.macro('addRuler', { xAxis: false, pageName }, shorthand)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Store page count in part
|
||||
shorthand.part.pages = { 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
|
||||
// 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]
|
||||
// Store page count in part
|
||||
shorthand.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
|
||||
// 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' : '"'))
|
||||
// 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
|
||||
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' : '"'))
|
||||
// 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`)
|
||||
|
||||
// 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
|
||||
// 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')
|
||||
|
||||
// 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
|
||||
)
|
||||
// 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
|
||||
)
|
||||
|
||||
// add the whole set to the ruler path
|
||||
// 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-${d}-end`])
|
||||
.line(points[`${rulerName}-ruler-${d}-tick`])
|
||||
.line(points[`${rulerName}-ruler-${d}-end`])
|
||||
}
|
||||
.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}-tl`], points[`${pageName}-tr`]],
|
||||
label: '' + row,
|
||||
isRow: true,
|
||||
pageName,
|
||||
})
|
||||
if (col !== 0 && withContent[row][col - 1])
|
||||
macro('addPageMarker', {
|
||||
along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
|
||||
label: indexStr(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`
|
||||
|
||||
// add the end
|
||||
paths[`${rulerName}-ruler`]
|
||||
.line(points[`${rulerName}-ruler-end`])
|
||||
.line(points[`${rulerName}-ruler-tick`])
|
||||
// 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)
|
||||
},
|
||||
},
|
||||
/** 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}-tl`], points[`${pageName}-tr`]],
|
||||
label: '' + row,
|
||||
isRow: true,
|
||||
pageName,
|
||||
})
|
||||
if (col !== 0 && withContent[row][col - 1])
|
||||
macro('addPageMarker', {
|
||||
along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
|
||||
label: indexStr(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)
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,24 +6,32 @@ import ClearIcon from 'shared/components/icons/clear'
|
|||
import ExportIcon from 'shared/components/icons/export'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
const PrintLayoutSettings = props => {
|
||||
if (!props.draft?.parts?.pages?.pages) return null
|
||||
const { cols, rows, count } = props.draft.parts.pages.pages
|
||||
const PrintLayoutSettings = (props) => {
|
||||
let pages = props.draft?.setStores[0].get('pages')
|
||||
if (!pages) return null
|
||||
const { cols, rows, count } = pages
|
||||
const { t } = useTranslation(['workbench'])
|
||||
|
||||
const setMargin = (evt) => {
|
||||
props.updateGist(['_state', 'layout', 'forPrinting', 'page', 'margin'], parseInt(evt.target.value))
|
||||
props.updateGist(
|
||||
['_state', 'layout', 'forPrinting', 'page', 'margin'],
|
||||
parseInt(evt.target.value)
|
||||
)
|
||||
}
|
||||
|
||||
const setCoverPage = () => {
|
||||
props.updateGist(['_state', 'layout', 'forPrinting', 'page', 'coverPage'], !props.layoutSettings.coverPage)
|
||||
props.updateGist(
|
||||
['_state', 'layout', 'forPrinting', 'page', 'coverPage'],
|
||||
!props.layoutSettings.coverPage
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div >
|
||||
<div className="flex flex-row justify-between
|
||||
mb-2">
|
||||
<div>
|
||||
<div
|
||||
className="flex flex-row justify-between
|
||||
mb-2"
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
<PageSizePicker {...props} />
|
||||
<OrientationPicker {...props} />
|
||||
|
|
@ -34,15 +42,17 @@ const PrintLayoutSettings = props => {
|
|||
onClick={props.exportIt}
|
||||
className="btn btn-primary btn-outline"
|
||||
disabled={count === 0}
|
||||
aria-disabled={count === 0}>
|
||||
<ExportIcon className="h-6 w-6 mr-2"/>
|
||||
aria-disabled={count === 0}
|
||||
>
|
||||
<ExportIcon className="h-6 w-6 mr-2" />
|
||||
{t('export')}
|
||||
</button>
|
||||
<button
|
||||
key="reset"
|
||||
onClick={() => props.unsetGist(['layouts', 'printingLayout'])}
|
||||
className="btn btn-primary btn-outline">
|
||||
<ClearIcon className="h-6 w-6 mr-2"/>
|
||||
className="btn btn-primary btn-outline"
|
||||
>
|
||||
<ClearIcon className="h-6 w-6 mr-2" />
|
||||
{t('reset')}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -62,22 +72,25 @@ const PrintLayoutSettings = props => {
|
|||
name="pageMargin"
|
||||
/>
|
||||
<div className="text-center">
|
||||
<span className="text-secondary">
|
||||
{props.layoutSettings.margin}mm
|
||||
</span>
|
||||
<span className="text-secondary">{props.layoutSettings.margin}mm</span>
|
||||
</div>
|
||||
<button
|
||||
title={t('reset')}
|
||||
className="btn btn-ghost btn-xs text-accent mx-2"
|
||||
disabled={props.layoutSettings.margin == 10}
|
||||
onClick={() => setMargin({target: {value: 10}})}
|
||||
onClick={() => setMargin({ target: { value: 10 } })}
|
||||
>
|
||||
<ClearIcon />
|
||||
</button>
|
||||
</label>
|
||||
<label htmlFor="coverPage" className="label">
|
||||
<span className="mr-2">{t('coverPage')}</span>
|
||||
<input type="checkbox" className="toggle toggle-primary" checked={props.layoutSettings.coverPage} onChange={setCoverPage}/>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle toggle-primary"
|
||||
checked={props.layoutSettings.coverPage}
|
||||
onChange={setCoverPage}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex flex-row font-bold items-center px-0 text-xl">
|
||||
|
|
@ -87,7 +100,9 @@ const PrintLayoutSettings = props => {
|
|||
<RightIcon />
|
||||
<span className="ml-2">{cols}</span>
|
||||
<span className="mx-6 opacity-50">|</span>
|
||||
<div className="rotate-90"><RightIcon /></div>
|
||||
<div className="rotate-90">
|
||||
<RightIcon />
|
||||
</div>
|
||||
<span className="text-xl ml-2">{rows}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const WorkbenchWrapper = ({ app, design, preload = false, from = false, layout =
|
|||
const layout = gist.layouts?.[gist._state.view] || gist.layout || true
|
||||
// hand it separately to the design
|
||||
draft = new design({ ...gist, layout })
|
||||
console.log({ draft, design })
|
||||
console.log({ draft, design, gist })
|
||||
//draft.__init()
|
||||
|
||||
// add theme to svg renderer
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue