pdf export working

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,

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 Circle = (props) =>
-  const circleProps = props.point.attributes.asPropsIfPrefixIs('data-circle-')
+  props.point.attributes.getAsArray('data-circle').map((r, i) => {
-  const extraProps = {}
+    const circleProps = props.point.attributes.asPropsIfPrefixIs('data-circle-')
-  for (const prop in circleProps) {
+    const extraProps = {}
-    const val = props.point.attributes.getAsArray(`data-circle-${(prop === 'className' ? 'class' : prop)}`)
+    for (const prop in circleProps) {
-    if (val.length >= i) extraProps[prop] = val[i]
+      const val = props.point.attributes.getAsArray(
-    else extraProps[prop] = val.join(' ')
+        `data-circle-${prop === 'className' ? 'class' : prop}`
-  }
+      )
+      if (val.length >= i) extraProps[prop] = val[i]
+      else extraProps[prop] = val.join(' ')
+    }
 
-  return (
+    return <circle key={r} cx={props.point.x} cy={props.point.y} r={r} {...extraProps} />
-    <circle
+  })
-      cx={props.point.x}
-      cy={props.point.y}
-      r={r}
-      {...extraProps}
-    />
-  )
-})
 
 export default Circle

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
+      workerArgs.pages = pattern.setStores[pattern.activeSet].get('pages')
-      if (pattern.parts.pages) {
-        workerArgs.pages = pattern.parts.pages.pages
-      }
     } catch (err) {
       console.log(err)
       app.stopLoading()

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.svgWidth = this.columns * this.pageWidth
-    this.svgHeight = this.rows * pages.height * mmToPoints
+    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++) {

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 = [
+    <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 (

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)
   }

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) {
+  for (var s in stacks) {
-    let part = parts[p]
+    let stack = stacks[s]
-    // skip the pages part and any that aren't rendered
-    if (part === this || part.render === false || part.isEmpty()) continue
 
     // get the position of the part
-    let partLayout = layout.parts[p]
+    let stackLayout = layout.stacks[s]
-    let partMinX = partLayout.tl?.x || partLayout.move.x + part.topLeft.x
+    if (!stackLayout) continue
-    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
 
-    // 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
+      // if the left of the stack is further left than the right end of the page
-      partMinX < x + w &&
+      stackMinX < x + w &&
-      // and the top of the part is above the bottom of the page
+      // and the top of the stack is above the bottom of the page
-      partMinY < y + h &&
+      stackMinY < y + h &&
-      // and the right of the part is further right than the left of the page
+      // and the right of the stack is further right than the left of the page
-      partMaxX > x &&
+      stackMaxX > x &&
-      // and the bottom of the part is below the top to the page
+      // and the bottom of the stack is below the top to the page
-      partMaxY > y
+      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
+      pattern.draftPartForSet(partName, pattern.activeSet)
-      if (!responsiveColumns) width = sheetWidth
-      if (pattern.settings.layout?.topLeft) {
-        height += pattern.settings.layout.topLeft.y
-        responsiveColumns && (width += pattern.settings.layout.topLeft.x)
-      }
 
-      // 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
+        const generatedPageData = pattern.setStores[pattern.activeSet].get('pages')
-        pattern.height = sheetHeight * pattern.parts[partName].pages.rows
+        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 = {
+      // get the layout from the pattern
-  /** draft the pages */
+      const { layout } = so
-  addPages: function (so, shorthand) {
+      for (let row = 0; row < rows; row++) {
-    const [h, w] = so.size
+        let y = row * h
-    const cols = Math.ceil(so.width / w)
+        withContent[row] = {}
-    const rows = Math.ceil(so.height / h)
+        for (let col = 0; col < cols; col++) {
-    const { points, Point, paths, Path, macro } = shorthand
+          let x = col * w
-    let count = 0
+          let hasContent = true
-    let withContent = {}
+          if (scanForBlanks && layout) {
-    // get the layout from the pattern
+            hasContent = doScanForBlanks(so.stacks, layout, x, y, w, h)
-    const { layout } = so
+          }
-    for (let row = 0; row < rows; row++) {
+          withContent[row][col] = hasContent
-      let y = row * h
+          if (!renderBlanks && !hasContent) continue
-      withContent[row] = {}
+          if (hasContent) count++
-      for (let col = 0; col < cols; col++) {
+          const pageName = `_pages__row${row}-col${col}`
-        let x = col * w
+          points[`${pageName}-tl`] = new Point(x, y)
-        let hasContent = true
+          points[`${pageName}-tr`] = new Point(x + w, y)
-        if (scanForBlanks && layout) {
+          points[`${pageName}-br`] = new Point(x + w, y + h)
-          hasContent = doScanForBlanks(this.context.parts, layout, x, y, w, h)
+          points[`${pageName}-bl`] = new Point(x, y + h)
-        }
+          points[`${pageName}-circle`] = new Point(x + w / 2, y + h / 2)
-        withContent[row][col] = hasContent
+            .setCircle(56, 'stroke-4xl muted fabric')
-        if (!renderBlanks && !hasContent) continue
+            .attr('data-circle-id', `${pageName}-circle`)
-        if (hasContent) count++
+          points[`${pageName}-text`] = new Point(x + w / 2, y + h / 2)
-        const pageName = `_pages__row${row}-col${col}`
+            .setText(
-        points[`${pageName}-tl`] = new Point(x, y)
+              `${indexStr(col + 1)}${row + 1}`,
-        points[`${pageName}-tr`] = new Point(x + w, y)
+              'text-4xl center baseline-center bold muted fill-fabric'
-        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};`
             )
-        } else {
+            .attr('data-text-id', `${pageName}-text`)
-          paths[pageName].attr('class', 'interfacing stroke-xs')
+
-          // add markers and rulers
+          paths[pageName] = new Path()
-          pluginMacros.addPageMarkers({ row, col, pageName, withContent }, shorthand)
+            .attr('id', pageName)
-          pluginMacros.addRuler({ xAxis: true, pageName }, shorthand)
+            .move(points[`${pageName}-tl`])
-          pluginMacros.addRuler({ xAxis: false, pageName }, shorthand)
+            .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
-    // Store page count in part
+      shorthand.store.set(partName, { cols, rows, count, withContent, width: w, height: h })
-    shorthand.part.pages = { cols, rows, count, withContent, width: w, height: h }
+    },
-  },
+    /** add a ruler to the top left corner of the page */
-  /** add a ruler to the top left corner of the page */
+    addRuler({ xAxis, pageName }, shorthand) {
-  addRuler({ xAxis, pageName }, shorthand) {
+      const { points, paths, Path } = shorthand
-    const { points, paths, Path } = shorthand
+      // arbitrary number of units for the ruler
-    // arbitrary number of units for the ruler
+      const rulerLength = 2
-    const rulerLength = 2
+      const isMetric = this.context.settings.units === 'metric'
-    const isMetric = this.context.settings.units === 'metric'
+      // distance to the end of the ruler
-    // distance to the end of the ruler
+      const endPointDist = [(isMetric ? 10 : 25.4) * rulerLength, 0]
-    const endPointDist = [(isMetric ? 10 : 25.4) * rulerLength, 0]
 
-    const axisName = xAxis ? 'x' : 'y'
+      const axisName = xAxis ? 'x' : 'y'
-    const rulerName = `${pageName}-${axisName}`
+      const rulerName = `${pageName}-${axisName}`
-    // start by making an endpoint for the ruler based on the axis
+      // start by making an endpoint for the ruler based on the axis
-    const endPoint = [endPointDist[xAxis ? 0 : 1], endPointDist[xAxis ? 1 : 0]]
+      const endPoint = [endPointDist[xAxis ? 0 : 1], endPointDist[xAxis ? 1 : 0]]
-    points[`${rulerName}-ruler-end`] = points[`${pageName}-tl`].translate(endPoint[0], endPoint[1])
+      points[`${rulerName}-ruler-end`] = points[`${pageName}-tl`].translate(
-    // also make a tick for the end of the ruler
+        endPoint[0],
-    points[`${rulerName}-ruler-tick`] = points[`${rulerName}-ruler-end`]
+        endPoint[1]
-      .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
       )
+      // 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
+      // start the path
-      let tick = 1
+      paths[`${rulerName}-ruler`] = new Path()
-      // if this tick indicates a whole unit, extra long
+        .move(points[`${pageName}-tl`])
-      if (d.toFixed(3) % (1 / rulerLength) === 0) tick = 3
+        // give it an explicit id in case we need to hide it later
-      // if this tick indicates half a unit, long
+        .attr('id', `${rulerName}-ruler`)
-      else if (d.toFixed(3) % (0.5 / rulerLength) === 0) tick = 2
+        .attr('class', 'interfacing stroke-xs')
 
-      // make a point for the end of the tick
+      // get the distance between the smaller ticks on the rule
-      points[`${rulerName}-ruler-${d}-tick`] = points[`${rulerName}-ruler-${d}-end`].translate(
+      const division = (isMetric ? 0.1 : 0.125) / rulerLength
-        xAxis ? 0 : tick,
+      // we're going to go by fraction, so we want to do this up to 1
-        xAxis ? tick : 0
+      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-end`])
-        .line(points[`${rulerName}-ruler-${d}-tick`])
+        .line(points[`${rulerName}-ruler-tick`])
-        .line(points[`${rulerName}-ruler-${d}-end`])
+    },
-    }
+    /** 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
+      // get a point on the center of the appropriate side
-    paths[`${rulerName}-ruler`]
+      points[`${markerName}-center`] = along[0]
-      .line(points[`${rulerName}-ruler-end`])
+        .shiftFractionTowards(along[1], 0.5)
-      .line(points[`${rulerName}-ruler-tick`])
+        // 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)
-  },
-}

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 => {
+const PrintLayoutSettings = (props) => {
-  if (!props.draft?.parts?.pages?.pages) return null
+  let pages = props.draft?.setStores[0].get('pages')
-  const { cols, rows, count } = props.draft.parts.pages.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>
-      <div className="flex flex-row justify-between
+      <div
-      mb-2">
+        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}>
+            aria-disabled={count === 0}
-            <ExportIcon className="h-6 w-6 mr-2"/>
+          >
+            <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">
+            className="btn btn-primary btn-outline"
-            <ClearIcon className="h-6 w-6 mr-2"/>
+          >
+            <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">
+              <span className="text-secondary">{props.layoutSettings.margin}mm</span>
-                {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>

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