use xes instead of diamonds for print alignment

sites/shared/components/workbench/layout/print/plugin.js

@@ -277,7 +277,7 @@ const basePlugin = ({
       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' : '"'))
+        .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)
@@ -333,49 +333,64 @@ const basePlugin = ({
       // 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`]],
+          along: [points[`${pageName}-tr`], points[`${pageName}-tl`]],
-          label: '' + row,
+          label: [`${row}`, `${row + 1}`],
           isRow: true,
           pageName,
         })
       if (col !== 0 && withContent[row][col - 1])
         macro('addPageMarker', {
           along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
-          label: indexStr(col),
+          label: [indexStr(col), indexStr(col + 1)],
           isRow: false,
           pageName,
         })
     },
-    /** add a page marker for either the row of the column */
+    /** add a page marker for either the row or the column, to aid with alignment and orientation */
     addPageMarker({ along, label, isRow, pageName }) {
-      const { points, paths, Path } = this.shorthand()
+      const { points, paths, Path, scale } = this.shorthand()
       const markerName = `${pageName}-${isRow ? 'row' : 'col'}-marker`
 
-      // get a point on the center of the appropriate side
+      // x and y distances between corners. one will always be 0, which is helpful
-      points[`${markerName}-center`] = along[0]
+      const xDist = along[0].dx(along[1])
-        .shiftFractionTowards(along[1], 0.5)
+      const yDist = along[0].dy(along[1])
-        // 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
+      // size of the x mark should be impacted by the scale setting
-      points[`${markerName}-r`] = points[`${markerName}-center`].translate(-5, 0)
+      const markSize = 4 * scale
-      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
+      // make one at 25% and one at 75%
-      paths[markerName] = new Path()
+      for (var d = 25; d < 100; d += 50) {
-        .move(points[`${markerName}-r`])
+        // get points to make an x at d% along the edge
-        .line(points[`${markerName}-t`])
+        const dName = `${markerName}-${d}`
-        .line(points[`${markerName}-l`])
+        const centerName = `${dName}-center`
-        .line(points[`${markerName}-b`])
+        points[centerName] = along[0].translate((xDist * d) / 100, (yDist * d) / 100)
-        .close()
+        points[`${dName}-tr`] = points[centerName].translate(-markSize, markSize)
-        .attr('class', 'fill-interfacing interfacing')
+        points[`${dName}-tl`] = points[centerName].translate(-markSize, -markSize)
+        points[`${dName}-br`] = points[centerName].translate(markSize, markSize)
+        points[`${dName}-bl`] = points[centerName].translate(markSize, -markSize)
+
+        // make a path for the x
+        paths[`${dName}`] = new Path()
+          .move(points[`${dName}-tr`])
+          .line(points[`${dName}-bl`])
+          .move(points[`${dName}-tl`])
+          .line(points[`${dName}-br`])
+          .attr('class', 'interfacing stroke-xs')
           // give it an explicit ID in case we need to hide it later
-        .attr('id', markerName)
+          .attr('id', dName)
+
+        // add directional labels
+        let angle = along[0].angle(along[1]) - 90
+        for (var i = 0; i < 2; i++) {
+          points[`${dName}-label-${i + 1}`] = points[centerName]
+            .shift(angle, markSize)
+            .setText(label[i], 'text-xs center baseline-center fill-interfacing')
+            // give it an explicit ID in case we need to hide it later
+            .attr('data-text-id', `${dName}-text-${i + 1}`)
+          // rotate for the next one
+          angle += 180
+        }
+      }
     },
   },
 })