First commit

plugins/plugin-annotations/src/bartack.mjs

@@ -58,7 +58,9 @@ function createBartack(so, props) {
   }
   so = { ...defaults, ...so }
 
-  const { Path, paths } = props
+  const { Path, paths, scale } = props
+
+  so.width *= scale
 
   // Handle negative angle
   if (so.angle < 0) so.angle = 360 + (so.angle % -360)

plugins/plugin-annotations/src/buttons.mjs

@@ -2,8 +2,9 @@
 export const buttonsDefs = [
   {
     name: 'button',
-    def: `
+    def: (scale) => `
-<g id="button">
+<g id="button"
+transform="scale(${scale})">
   <circle
     cx="0" cy="0" r="3.4"
     class="mark"
@@ -16,8 +17,9 @@ export const buttonsDefs = [
   },
   {
     name: 'buttonhole',
-    def: `
+    def: (scale) => `
-<g id="buttonhole">
+<g id="buttonhole"
+transform="scale(${scale})">
   <path
     class="mark"
     d="M -1,-5 L 1,-5 L 1,5 L -1,5 z"
@@ -26,8 +28,9 @@ export const buttonsDefs = [
   },
   {
     name: 'buttonhole-start',
-    def: `
+    def: (scale) => `
-<g id="buttonhole-start">
+<g id="buttonhole-start"
+transform="scale(${scale})">
   <path
     class="mark"
     d="M -1,-10 L 1,-10 L 1,0 L -1,0 z"
@@ -36,8 +39,9 @@ export const buttonsDefs = [
   },
   {
     name: 'buttonhole-end',
-    def: `
+    def: (scale) => `
-<g id="buttonhole-end">
+<g id="buttonhole-end"
+transform="scale(${scale})">
   <path
     class="mark"
     d="M -1,0 L 1,0 L 1,10 L -1,10 z"
@@ -46,16 +50,18 @@ export const buttonsDefs = [
   },
   {
     name: 'snap-stud-grad',
-    def: `
+    def: (scale) => `
-<radialGradient id="snap-stud-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+<radialGradient id="snap-stud-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"
+transform="scale(${scale})">
   <stop offset="30%" style="stop-color:rgb(235,235,235); stop-opacity:1"/>
   <stop offset="80%" style="stop-color:rgb(100,100,100);stop-opacity:1" />
 </radialGradient>`,
   },
   {
     name: 'snap-stud',
-    def: `
+    def: (scale) => `
-<g id="snap-stud">
+<g id="snap-stud"
+transform="scale(${scale})">
   <circle id="snap-stud-circle-edge" cx="0" cy="0" r="3.4"
     style="stroke:#666;fill:#dddddd;stroke-width:0.3;"
   />
@@ -70,8 +76,9 @@ export const buttonsDefs = [
   },
   {
     name: 'snap-socket',
-    def: `
+    def: (scale) => `
-<g id="snap-socket">
+<g id="snap-socket"
+transform="scale(${scale})">
   <circle id="snap-socket-circle-edge" cx="0" cy="0" r="3.4"
     style="stroke:#666;fill:#bbbbbb;stroke-width:0.3;"
   />

plugins/plugin-annotations/src/cutonfold.mjs

@@ -2,16 +2,16 @@
 export const cutonfoldDefs = [
   {
     name: 'cutonfoldFrom',
-    def: `
+    def: (scale) => `
-<marker orient="auto" refY="4.0" refX="0.0" id="cutonfoldFrom" style="overflow:visible;" markerWidth="12" markerHeight="8">
+<marker orient="auto" refY="0" refX="0" id="cutonfoldFrom" style="overflow:visible;" markerWidth="12" markerHeight="8" transform="scale(${scale})">
-	<path class="note fill-note" d="M 0,4 L 12,0 C 10,2 10,6  12,8 z" />
+	<path class="note fill-note" d="M 0,0 L 12,-4 C 10,-2 10,2 12,4 z" transform="scale(${scale})"/>
 </marker>`,
   },
   {
     name: 'cutonfoldTo',
-    def: `
+    def: (scale) => `
-<marker orient="auto" refY="4.0" refX="12.0" id="cutonfoldTo" style="overflow:visible;" markerWidth="12" markerHeight="8">
+<marker orient="auto" refY="0" refX="0" id="cutonfoldTo" style="overflow:visible;" markerWidth="12" markerHeight="8" transform="scale(${scale})">
-	<path class="note fill-note" d="M 12,4 L 0,0 C 2,2 2,6  0,8 z" />
+	<path class="note fill-note" d="M 0,0 L -12,-4 C -10,-2 -10,2 -12,4 z" transform="scale(${scale})"/>
 </marker>`,
   },
 ]

plugins/plugin-annotations/src/dimensions.mjs

@@ -2,16 +2,16 @@
 export const dimensionsDefs = [
   {
     name: 'dimensionFrom',
-    def: `
+    def: (scale) => `
-<marker orient="auto" refY="4.0" refX="0.0" id="dimensionFrom" style="overflow:visible;" markerWidth="12" markerHeight="8">
+<marker orient="auto" refY="0" refX="0" id="dimensionFrom" style="overflow:visible;" markerWidth="12" markerHeight="8">
-	<path class="mark fill-mark" d="M 0,4 L 12,0 C 10,2 10,6  12,8 z" />
+	<path class="mark fill-mark" d="M 0,0 L 12,-4 C 10,-2 10,2 12,4 z" transform="scale(${scale})"/>
 </marker>`,
   },
   {
     name: 'dimensionTo',
-    def: `
+    def: (scale) => `
-<marker orient="auto" refY="4.0" refX="12.0" id="dimensionTo" style="overflow:visible;" markerWidth="12" markerHeight="8">
+<marker orient="auto" refY="0" refX="0" id="dimensionTo" style="overflow:visible;" markerWidth="12" markerHeight="8">
-	<path class="mark fill-mark" d="M 12,4 L 0,0 C 2,2 2,6  0,8 z" />
+	<path class="mark fill-mark" d="M 0,0 L -12,-4 C -10,-2 -10,2  -12,4 z" transform="scale(${scale})"/>
 </marker>`,
   },
 ]

plugins/plugin-annotations/src/grainline.mjs

@@ -2,16 +2,16 @@
 export const grainlineDefs = [
   {
     name: 'grainlineFrom',
-    def: `
+    def: (scale) => `
-<marker orient="auto" refY="4.0" refX="10.0" id="grainlineFrom" style="overflow:visible;" markerWidth="12" markerHeight="8">
+<marker orient="auto" refY="0" refX="0" id="grainlineFrom" style="overflow:visible;" markerWidth="12" markerHeight="8">
-	<path class="note fill-note" d="M 0,4 L 12,0 C 10,2 10,6  12,8 z" />
+	<path class="note fill-note" d="M -10,0 L 2,-4 C 0,-2 0,2  2,4 z" transform="scale(${scale})"/>
 </marker>`,
   },
   {
     name: 'grainlineTo',
-    def: `
+    def: (scale) => `
-<marker orient="auto" refY="4.0" refX="2.0" id="grainlineTo" style="overflow:visible;" markerWidth="12" markerHeight="8">
+<marker orient="auto" refY="0" refX="0" id="grainlineTo" style="overflow:visible;" markerWidth="12" markerHeight="8">
-	<path class="note fill-note" d="M 12,4 L 0,0 C 2,2 2,6  0,8 z" />
+	<path class="note fill-note" d="M 10,0 L -2,-4 C 0,-2 -2,2  -2,4 z" transform="scale(${scale})"/>
 </marker>`,
   },
 ]

plugins/plugin-annotations/src/notches.mjs

@@ -2,16 +2,16 @@
 export const notchesDefs = [
   {
     name: 'notch',
-    def: `
+    def: (scale) => `
-<g id="notch">
+<g id="notch" transform="scale(${scale})">
   <circle cy="0" cx="0" r="1.4" class="fill-note" />
   <circle cy="0" cx="0" r="2.8" class="note" />
 </g>`,
   },
   {
     name: 'bnotch',
-    def: `
+    def: (scale) => `
-<g id="bnotch">
+<g id="bnotch" transform="scale(${scale})">
   <path d="M -1.1 -1.1 L 1.1 1.1 M 1.1 -1.1 L -1.1 1.1" class="note" />
   <circle cy="0" cx="0" r="2.8" class="note" />
 </g>`,

plugins/plugin-annotations/src/pleat.mjs

@@ -1,10 +1,10 @@
 // Export defs
 export const pleatDefs = [
   {
-    name: 'notch',
+    name: 'pleatTo',
-    def: `
+    def: (scale) => `
-<marker id="pleatTo" markerWidth="12" markerHeight="8" orient="auto" refY="4" refX="12">
+<marker orient="auto" refY="0" refX="0" id="pleatTo" style="overflow:visible;" markerWidth="12" markerHeight="8">
-  <path class="note fill-note" d="M 12,4 L 0,0 C 2,2 2,6  0,8 z" />
+  <path class="note fill-note" d="M 0,0 L -12,-4 C -10,-2 -12,2  -12,4 z" transform="scale(${scale})"/>
 </marker>
 `,
   },

plugins/plugin-annotations/src/scalebox.mjs

@@ -24,6 +24,12 @@ export const scaleboxMacros = {
       return true
     }
 
+    const transform = function (anchor) {
+      return `translate(${anchor.x}, ${anchor.y}) scale(${scale}) translate(${anchor.x * -1}, ${
+        anchor.y * -1
+      })`
+    }
+
     // Convert scale to a value between 0 and 9, inclusive.
     const scaleIndex = Math.round(10 * Math.max(0.1, Math.min(1, scale))) - 1
 
@@ -99,7 +105,9 @@ export const scaleboxMacros = {
       so.at.y + imperialHeight / 2
     )
     // Text anchor points
-    points.__scaleboxLead = new Point(so.at.x - 45 * scale, so.at.y - 15 * scale)
+    points.__scaleboxLead = points.__scaleboxImperialTopLeft
+      .shift(-90, 7 * scale)
+      .shift(0, 2 * scale)
     points.__scaleboxTitle = points.__scaleboxLead.shift(-90, 10 * scale)
     points.__scaleboxText = points.__scaleboxTitle.shift(-90, 12 * scale)
     points.__scaleboxLink = points.__scaleboxText.shift(-90, 5 * scale)
@@ -148,9 +156,10 @@ export const scaleboxMacros = {
       .line(points.__scaleboxMetricTopRight)
       .close()
     // Lead
-    points.__scaleboxLead = points.__scaleboxLead
+    points.__scaleboxLead
       .attr('data-text', so.lead || 'FreeSewing')
       .attr('data-text-class', 'text-sm')
+      .attr('data-text-transform', transform(points.__scaleboxLead))
     // Title
     if (so.title) points.__scaleboxTitle.attributes.set('data-text', so.title)
     else {
@@ -160,6 +169,7 @@ export const scaleboxMacros = {
         .attr('data-text', name)
         .attr('data-text', 'v' + (store.data?.version || 'No Version'))
     }
+    points.__scaleboxTitle.attr('data-text-transform', transform(points.__scaleboxTitle))
     points.__scaleboxTitle.attributes.add('data-text-class', 'text-lg')
     // Text
     if (typeof so.text === 'string') {
@@ -170,7 +180,11 @@ export const scaleboxMacros = {
         .attr('data-text', 'freesewing.org/patrons/join')
         .attr('data-text-class', 'text-sm fill-note')
     }
-    points.__scaleboxText.attr('data-text-class', 'text-xs').attr('data-text-lineheight', 4)
+    points.__scaleboxLink.attr('data-text-transform', transform(points.__scaleboxLink))
+    points.__scaleboxText
+      .attr('data-text-transform', transform(points.__scaleboxText))
+      .attr('data-text-class', 'text-xs')
+      .attr('data-text-lineheight', 4)
     // Instructions
     points.__scaleboxMetric = points.__scaleboxMetric
       .attr('data-text', 'theWhiteInsideOfThisBoxShouldMeasure')
@@ -178,12 +192,14 @@ export const scaleboxMacros = {
       .attr('data-text', 'x')
       .attr('data-text', `${metricDisplayHeight}`)
       .attr('data-text-class', 'text-xs center')
+      .attr('data-text-transform', transform(points.__scaleboxMetric))
     points.__scaleboxImperial = points.__scaleboxImperial
       .attr('data-text', 'theBlackOutsideOfThisBoxShouldMeasure')
       .attr('data-text', `${imperialDisplayWidth}`)
       .attr('data-text', 'x')
       .attr('data-text', `${imperialDisplayHeight}`)
       .attr('data-text-class', 'text-xs center ')
+      .attr('data-text-transform', transform(points.__scaleboxImperial))
   },
   miniscale(so, { points, paths, scale, Point, Path }) {
     // Passing `false` will remove the miniscale

plugins/plugin-annotations/src/sewtogether.mjs

@@ -2,23 +2,23 @@
 export const sewtogetherDefs = [
   {
     name: 'sewTogetherStart',
-    def: `
+    def: (scale) => `
-<marker id="sewTogetherStart" markerWidth="4" markerHeight="4" orient="auto" refX="0" refY="2">
+<marker id="sewTogetherStart" markerWidth="8" markerHeight="8" style="overflow:visible;" orient="auto" refX="0" refY="0">
-  <path class="note stroke-sm" d="M4,4 L0,2 4,0" />
+  <path class="note stroke-sm" d="M 8,4 L 0,0 8,-4" transform="scale(${scale})"/>
 </marker>`,
   },
   {
     name: 'sewTogetherEnd',
-    def: `
+    def: (scale) => `
-<marker id="sewTogetherEnd" markerWidth="4" markerHeight="4" orient="auto" refX="4" refY="2">
+<marker id="sewTogetherEnd" markerWidth="8" markerHeight="8" style="overflow:visible;" orient="auto" refX="0" refY="0">
-  <path class="note stroke-sm" d="M0,0 L4,2 0,4" />
+  <path class="note stroke-sm" d="M -8,-4 L 0,0 -8,4" transform="scale(${scale})"/>
 </marker>`,
   },
   {
     name: 'sewTogetherCross',
-    def: `
+    def: (scale) => `
-<marker id="sewTogetherCross" markerWidth="4" markerHeight="4" orient="auto" refX="2" refY="2">
+<marker id="sewTogetherCross" markerWidth="8" markerHeight="8" style="overflow:visible;" orient="auto" refX="0" refY="0">
-  <path d="M 0,0 L 4,4 M 4,0 L 0,4" class="note stroke-sm"/>
+  <path d="M -4,-4 L 4,4 M 4,-4 L -4,4" class="note stroke-sm" transform="scale(${scale})"/>
 </marker>`,
   },
 ]

plugins/plugin-annotations/tests/scalebox.test.mjs

@@ -38,14 +38,14 @@ describe('Scalebox Plugin Tests', () => {
     expect(p.__scaleboxImperialBottomLeft.y).to.equal(225.4)
     expect(p.__scaleboxImperialBottomRight.x).to.equal(150.8)
     expect(p.__scaleboxImperialBottomRight.y).to.equal(225.4)
-    expect(p.__scaleboxLead.x).to.equal(55)
+    expect(p.__scaleboxLead.x).to.equal(51.2)
-    expect(p.__scaleboxLead.y).to.equal(185)
+    expect(p.__scaleboxLead.y).to.equal(181.6)
-    expect(p.__scaleboxTitle.x).to.equal(55)
+    expect(p.__scaleboxTitle.x).to.equal(51.2)
-    expect(p.__scaleboxTitle.y).to.equal(195)
+    expect(p.__scaleboxTitle.y).to.equal(191.6)
-    expect(p.__scaleboxText.x).to.equal(55)
+    expect(p.__scaleboxText.x).to.equal(51.2)
-    expect(p.__scaleboxText.y).to.equal(207)
+    expect(p.__scaleboxText.y).to.equal(203.6)
-    expect(p.__scaleboxLink.x).to.equal(55)
+    expect(p.__scaleboxLink.x).to.equal(51.2)
-    expect(p.__scaleboxLink.y).to.equal(212)
+    expect(p.__scaleboxLink.y).to.equal(208.6)
     expect(p.__scaleboxMetric.x).to.equal(100)
     expect(p.__scaleboxMetric.y).to.equal(220)
     expect(p.__scaleboxImperial.x).to.equal(100)
@@ -112,14 +112,14 @@ describe('Scalebox Plugin Tests', () => {
     expect(round(p.__scaleboxImperialBottomLeft.y)).to.equal(250.8)
     expect(round(p.__scaleboxImperialBottomRight.x)).to.equal(125.4)
     expect(round(p.__scaleboxImperialBottomRight.y)).to.equal(149.2)
-    expect(round(p.__scaleboxLead.x)).to.equal(85)
+    expect(round(p.__scaleboxLead.x)).to.equal(81.6)
-    expect(round(p.__scaleboxLead.y)).to.equal(245)
+    expect(round(p.__scaleboxLead.y)).to.equal(248.8)
-    expect(round(p.__scaleboxTitle.x)).to.equal(95)
+    expect(round(p.__scaleboxTitle.x)).to.equal(91.6)
-    expect(round(p.__scaleboxTitle.y)).to.equal(245)
+    expect(round(p.__scaleboxTitle.y)).to.equal(248.8)
-    expect(round(p.__scaleboxText.x)).to.equal(107)
+    expect(round(p.__scaleboxText.x)).to.equal(103.6)
-    expect(round(p.__scaleboxText.y)).to.equal(245)
+    expect(round(p.__scaleboxText.y)).to.equal(248.8)
-    expect(round(p.__scaleboxLink.x)).to.equal(112)
+    expect(round(p.__scaleboxLink.x)).to.equal(108.6)
-    expect(round(p.__scaleboxLink.y)).to.equal(245)
+    expect(round(p.__scaleboxLink.y)).to.equal(248.8)
     expect(round(p.__scaleboxMetric.x)).to.equal(120)
     expect(round(p.__scaleboxMetric.y)).to.equal(200)
     expect(round(p.__scaleboxImperial.x)).to.equal(124)

sites/shared/components/workbench/menu/core-settings/index.mjs

@@ -33,7 +33,7 @@ export const settings = {
   },
   scale: {
     min: 0.1,
-    max: 5,
+    max: 1,
     dflt: 1,
   },
   renderer: {

sites/shared/themes/hax0r.js

@@ -106,7 +106,7 @@ module.exports = {
   '--pattern-text-3xl': '2rem',
   '--pattern-text-4xl': '3rem',
 
-  '--pattern-scale': '1',
+  // '--pattern-scale': '1',
   '--pattern-stroke-xs': '0.2px',
   '--pattern-stroke-sm': '0.4px',
   '--pattern-stroke': '0.7px',

sites/shared/themes/lgbtq.js

@@ -109,7 +109,7 @@ module.exports = {
   '--pattern-text-3xl': '2rem',
   '--pattern-text-4xl': '3rem',
 
-  '--pattern-scale': '1',
+  // '--pattern-scale': '1',
   '--pattern-stroke-xs': '0.2px',
   '--pattern-stroke-sm': '0.4px',
   '--pattern-stroke': '0.7px',

sites/shared/themes/light.js

@@ -241,7 +241,7 @@ module.exports = {
   '--pattern-text-4xl': '3rem',
 
   // Pattern overal scale for strokes and text sizes
-  '--pattern-scale': '1',
+  // '--pattern-scale': '1',
   // Pattern xs stroke width
   '--pattern-stroke-xs': '0.2px',
   // Pattern sm stroke width