diff --git a/plugins/plugin-theme/src/css.mjs b/plugins/plugin-theme/src/css.mjs index 326dd01c47a..9a5c0bb4d8a 100644 --- a/plugins/plugin-theme/src/css.mjs +++ b/plugins/plugin-theme/src/css.mjs @@ -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, diff --git a/sites/shared/components/workbench/draft/circle/index.js b/sites/shared/components/workbench/draft/circle/index.js index 2910eb5163e..1b64d6e3dfa 100644 --- a/sites/shared/components/workbench/draft/circle/index.js +++ b/sites/shared/components/workbench/draft/circle/index.js @@ -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 ( - - ) -}) + return + }) export default Circle diff --git a/sites/shared/components/workbench/exporting/export-handler.js b/sites/shared/components/workbench/exporting/export-handler.js index a4f5c03380c..21cc1bfc1b5 100644 --- a/sites/shared/components/workbench/exporting/export-handler.js +++ b/sites/shared/components/workbench/exporting/export-handler.js @@ -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() diff --git a/sites/shared/components/workbench/exporting/pdf-maker.js b/sites/shared/components/workbench/exporting/pdf-maker.js index cb4ac399a44..c62436d68bd 100644 --- a/sites/shared/components/workbench/exporting/pdf-maker.js +++ b/sites/shared/components/workbench/exporting/pdf-maker.js @@ -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++) { diff --git a/sites/shared/components/workbench/layout/draft/index.js b/sites/shared/components/workbench/layout/draft/index.js index 75c0f0b7f79..d008e813b6c 100644 --- a/sites/shared/components/workbench/layout/draft/index.js +++ b/sites/shared/components/workbench/layout/draft/index.js @@ -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 = [ + , + ] 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 ( diff --git a/sites/shared/components/workbench/layout/print/index.js b/sites/shared/components/workbench/layout/print/index.js index 6d4070a5512..d1309adb4d3 100644 --- a/sites/shared/components/workbench/layout/print/index.js +++ b/sites/shared/components/workbench/layout/print/index.js @@ -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) } diff --git a/sites/shared/components/workbench/layout/print/plugin.js b/sites/shared/components/workbench/layout/print/plugin.js index b513b7c7a4e..61ffacfc617 100644 --- a/sites/shared/components/workbench/layout/print/plugin.js +++ b/sites/shared/components/workbench/layout/print/plugin.js @@ -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) - }, -} +}) diff --git a/sites/shared/components/workbench/layout/print/settings.js b/sites/shared/components/workbench/layout/print/settings.js index 87edde1d436..a76caae58b7 100644 --- a/sites/shared/components/workbench/layout/print/settings.js +++ b/sites/shared/components/workbench/layout/print/settings.js @@ -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 ( -
-
+
+
@@ -34,15 +42,17 @@ const PrintLayoutSettings = props => { onClick={props.exportIt} className="btn btn-primary btn-outline" disabled={count === 0} - aria-disabled={count === 0}> - + aria-disabled={count === 0} + > + {t('export')}
@@ -62,22 +72,25 @@ const PrintLayoutSettings = props => { name="pageMargin" />
- - {props.layoutSettings.margin}mm - + {props.layoutSettings.margin}mm
@@ -87,7 +100,9 @@ const PrintLayoutSettings = props => { {cols} | -
+
+ +
{rows}
diff --git a/sites/shared/components/wrappers/workbench.js b/sites/shared/components/wrappers/workbench.js index 4eef4c30178..3d1cd111ef5 100644 --- a/sites/shared/components/wrappers/workbench.js +++ b/sites/shared/components/wrappers/workbench.js @@ -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