@eriese recommendations

packages/core/tests/svg.test.mjs

@@ -43,7 +43,7 @@ describe('Svg', () => {
     expect(svg.freeId).to.equal(0)
     expect(svg.body).to.equal('')
     expect(svg.style).to.equal('')
-    expect(svg.defs instanceof Defs).to.equal(true)
+    expect(svg.defs).to.be.an.instanceof(Defs)
     expect(svg.prefix).to.equal('<?xml version="1.0" encoding="UTF-8" standalone="no"?>')
     expect(svg.attributes.get('xmlns')).to.equal('http://www.w3.org/2000/svg')
     expect(svg.attributes.get('xmlns:svg')).to.equal('http://www.w3.org/2000/svg')

plugins/plugin-annotations/src/buttons.mjs

@@ -1,4 +1,5 @@
-const defs = [
+// Export defs
+export const buttonsDefs = [
   {
     name: 'button',
     def: `
@@ -84,14 +85,3 @@ const defs = [
 </g>`,
   },
 ]
-
-// Export hooks
-export const buttonsHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        svg.defs.setIfUnset(def.name, def.def)
-      }
-    },
-  ],
-}

plugins/plugin-annotations/src/cutonfold.mjs

@@ -1,4 +1,5 @@
-const defs = [
+// Export defs
+export const cutonfoldDefs = [
   {
     name: 'cutonfoldFrom',
     def: `
@@ -15,16 +16,6 @@ const defs = [
   },
 ]
 
-// Export hooks
-export const cutonfoldHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        svg.defs.setIfUnset(def.name, def.def)
-      }
-    },
-  ],
-}
 // Export macros
 export const cutonfoldMacros = {
   cutonfold: function (so, { points, paths, Path, complete, setCutOnFold, setGrain, scale }) {

plugins/plugin-annotations/src/dimensions.mjs

@@ -1,4 +1,5 @@
-const defs = [
+// Export defs
+export const dimensionsDefs = [
   {
     name: 'dimensionFrom',
     def: `
@@ -79,16 +80,7 @@ function lleader(so, type, props, id) {
   return point
 }
 
-// Export hooks and macros
-export const dimensionsHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        svg.defs.setIfUnset(def.name, def.def)
-      }
-    },
-  ],
-}
+// Export macros
 export const dimensionsMacros = {
   // horizontal
   hd: function (so, props) {

plugins/plugin-annotations/src/grainline.mjs

@@ -1,4 +1,5 @@
-const defs = [
+// Export defs
+export const grainlineDefs = [
   {
     name: 'grainlineFrom',
     def: `
@@ -17,16 +18,7 @@ const defs = [
 
 const dflts = { text: 'grainline' }
 
-// Export hooks and macros
-export const grainlineHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        svg.defs.setIfUnset(def.name, def.def)
-      }
-    },
-  ],
-}
+// Export macros
 export const grainlineMacros = {
   grainline: function (so = {}, { points, paths, Path, complete, setGrain }) {
     if (so === false) {

plugins/plugin-annotations/src/index.mjs

@@ -1,8 +1,8 @@
 import { name, version } from '../data.mjs'
-// Hooks only
-import { buttonsHooks } from './buttons.mjs'
-import { logoHooks } from './logo.mjs'
-import { notchesHooks } from './notches.mjs'
+// Defs only
+import { buttonsDefs } from './buttons.mjs'
+import { logoDefs } from './logo.mjs'
+import { notchesDefs } from './notches.mjs'
 // Macros only
 import { bannerMacros } from './banner.mjs'
 import { bannerboxMacros } from './bannerbox.mjs'
@@ -10,26 +10,36 @@ import { bartackMacros } from './bartack.mjs'
 import { crossboxMacros } from './crossbox.mjs'
 import { scaleboxMacros } from './scalebox.mjs'
 import { titleMacros } from './title.mjs'
-// Hooks and Macros
-import { cutonfoldMacros, cutonfoldHooks } from './cutonfold.mjs'
-import { dimensionsMacros, dimensionsHooks } from './dimensions.mjs'
-import { grainlineMacros, grainlineHooks } from './grainline.mjs'
-import { pleatMacros, pleatHooks } from './pleat.mjs'
-import { sewtogetherMacros, sewtogetherHooks } from './sewtogether.mjs'
+// Defs and Macros
+import { cutonfoldMacros, cutonfoldDefs } from './cutonfold.mjs'
+import { dimensionsMacros, dimensionsDefs } from './dimensions.mjs'
+import { grainlineMacros, grainlineDefs } from './grainline.mjs'
+import { pleatMacros, pleatDefs } from './pleat.mjs'
+import { sewtogetherMacros, sewtogetherDefs } from './sewtogether.mjs'
 
 export const plugin = {
   name,
   version,
   hooks: {
     preRender: [
-      ...buttonsHooks.preRender,
-      ...logoHooks.preRender,
-      ...notchesHooks.preRender,
-      ...cutonfoldHooks.preRender,
-      ...dimensionsHooks.preRender,
-      ...grainlineHooks.preRender,
-      ...pleatHooks.preRender,
-      ...sewtogetherHooks.preRender,
+      function (svg) {
+        const defs = [
+          ...buttonsDefs,
+          ...cutonfoldDefs,
+          ...dimensionsDefs,
+          ...grainlineDefs,
+          ...logoDefs,
+          ...notchesDefs,
+          ...pleatDefs,
+          ...sewtogetherDefs,
+        ]
+        for (const def of defs) {
+          svg.defs.setIfUnset(
+            def.name,
+            typeof def.def === 'function' ? def.def(svg.pattern.settings[0].scale) : def.def
+          )
+        }
+      },
     ],
   },
   macros: {

plugins/plugin-annotations/src/notches.mjs

@@ -1,4 +1,5 @@
-const defs = [
+// Export hooks
+export const notchesDefs = [
   {
     name: 'notch',
     def: `
@@ -16,14 +17,3 @@ const defs = [
 </g>`,
   },
 ]
-
-// Export hooks
-export const notchesHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        svg.defs.setIfUnset(def.name, def.def)
-      }
-    },
-  ],
-}

plugins/plugin-annotations/src/pleat.mjs

@@ -1,17 +1,14 @@
-const markers = `
+// Export defs
+export const pleatDefs = [
+  {
+    name: 'notch',
+    def: `
 <marker id="pleatTo" markerWidth="12" markerHeight="8" orient="auto" refY="4" refX="12">
   <path class="note fill-note" d="M 12,4 L 0,0 C 2,2 2,6  0,8 z" />
 </marker>
-`
-
-// Export hooks
-export const pleatHooks = {
-  preRender: [
-    function (svg) {
-      svg.defs.setIfUnset('pleatTo', markers)
+`,
   },
-  ],
-}
+]
 
 // Export macros
 export const pleatMacros = {

plugins/plugin-annotations/src/sewtogether.mjs

@@ -1,4 +1,5 @@
-const defs = [
+// Export defs
+export const sewtogetherDefs = [
   {
     name: 'sewTogetherStart',
     def: `
@@ -22,17 +23,6 @@ const defs = [
   },
 ]
 
-// Export hooks
-export const sewtogetherHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        svg.defs.setIfUnset(def.name, def.def)
-      }
-    },
-  ],
-}
-
 // Export macros
 export const sewtogetherMacros = {
   sewTogether: function (so, { points, paths, Path, complete, sa }) {

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

@@ -11,7 +11,7 @@ pattern.draft().render()
 describe('Buttons Plugin Test', () => {
   for (const snippet of ['button', 'buttonhole', 'snap-stud', 'snap-socket']) {
     it(`Should add the ${snippet} snippet to defs`, () => {
-      expect(pattern.svg.defs.render().indexOf(`<g id="${snippet}">`)).to.not.equal(-1)
+      expect(pattern.svg.defs.get(snippet)).to.not.equal(false)
     })
   }
 

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

@@ -9,8 +9,6 @@ describe('Logo Plugin Tests', () => {
     const Pattern = new Design()
     const pattern = new Pattern().use(annotationsPlugin)
     pattern.draft().render()
-    expect(pattern.svg.defs.render()).to.contain(
-      '<g id="logo" transform="scale(1) translate(-23 -36)"><path class="logo"'
-    )
+    expect(pattern.svg.defs.get('logo')).to.not.equal(false)
   })
 })

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

@@ -16,14 +16,12 @@ const pattern = new Pattern()
 pattern.draft().render()
 
 describe('Notches Plugin Test', () => {
-  it(`Should add the snippets to defs`, () => {
-    expect(pattern.svg.defs.render()).to.contain('<g id="notch">')
+  it(`Should add the bnotch to defs`, () => {
+    expect(pattern.svg.defs.get('bnotch')).to.not.equal(false)
   })
-
-  it(`Should add the notches snippet to defs`, () => {
-    expect(pattern.svg.defs.render().indexOf(`<g id="notch">`)).to.not.equal(-1)
+  it(`Should add the notch to defs`, () => {
+    expect(pattern.svg.defs.get('notch')).to.not.equal(false)
   })
-
   it('Draws a notch on an anchor point', () => {
     const part = {
       name: 'test',