Merge pull request #3863 from freesewing/snippets

Allow `defs` in the `svg` to be overwritten.

packages/core/src/attributes.mjs

@@ -35,7 +35,7 @@ Attributes.prototype.add = function (name, value) {
 }
 
 /**
- * Return a props object for attributes with a fiven prefix (typically used for data-text)
+ * Return a props object for attributes with a given prefix (typically used for data-text)
  *
  * @param {string} prefix - The prefix to filter attributes on
  * @return {object} props - The attributes as props

packages/core/src/defs.mjs

@@ -0,0 +1,93 @@
+//////////////////////////////////////////////
+//               CONSTRUCTOR                //
+//////////////////////////////////////////////
+
+/**
+ * Constructor for Defs
+ *
+ * @constructor
+ * @return {Defs} this - The Defs instance
+ */
+export function Defs() {
+  this.list = {}
+
+  return this
+}
+
+//////////////////////////////////////////////
+//            PUBLIC METHODS                //
+//////////////////////////////////////////////
+
+/**
+ * Return a deep copy of this
+ *
+ * @return {object} this - The Defs instance
+ */
+Defs.prototype.clone = function () {
+  let clone = new Defs()
+  clone.list = JSON.parse(JSON.stringify(this.list))
+
+  return clone
+}
+
+/**
+ * Retrieve a def
+ *
+ * @param {string} name - Name of the def to get
+ * @return value - The value under name
+ */
+Defs.prototype.get = function (name) {
+  if (typeof this.list[name] === 'undefined') return false
+  else return this.list[name]
+}
+
+/**
+ * Remove a def
+ *
+ * @param {string} name - Name of the def to set
+ * @return {object} this - The Defs instance
+ */
+Defs.prototype.remove = function (name) {
+  delete this.list[name]
+
+  return this
+}
+
+/**
+ * Return SVG code for Defs
+ *
+ * @return {string} svg - The SVG code
+ */
+Defs.prototype.render = function () {
+  let svg = ''
+  for (let key in this.list) {
+    svg += ` ${key}="${this.list[key]}"`
+  }
+
+  return svg
+}
+
+/**
+ * Set a def, overwriting existing value
+ *
+ * @param {string} name - Name of the def to set
+ * @param {string} value - Value of the def to set
+ * @return {Defs} this - The Defs instance
+ */
+Defs.prototype.set = function (name, value) {
+  this.list[name] = value
+
+  return this
+}
+
+/**
+ * Sets a def, but only if it's not currently set
+ *
+ * @param {string} name - Name of the def to set
+ * @param {string} value - Value of the def to set
+ * @return {Defs} this - The Defs instance
+ */
+Defs.prototype.setIfUnset = function (name, value) {
+  if (typeof this.list[name] === 'undefined') this.list[name] = value
+  return this
+}

packages/core/src/svg.mjs

@@ -1,4 +1,5 @@
 import { Attributes } from './attributes.mjs'
+import { Defs } from './defs.mjs'
 import { __addNonEnumProp, round } from './utils.mjs'
 import { version } from '../data.mjs'
 
@@ -31,7 +32,7 @@ export function Svg(pattern) {
   this.layout = {}
   this.body = ''
   this.style = ''
-  this.defs = ''
+  this.defs = new Defs()
 }
 
 //////////////////////////////////////////////
@@ -215,7 +216,7 @@ Svg.prototype.__renderCircle = function (point) {
 Svg.prototype.__renderDefs = function () {
   let svg = '<defs>'
   this.__indent()
-  svg += this.__nl() + this.defs
+  svg += this.__nl() + this.defs.render()
   this.__outdent()
   svg += this.__nl() + '</defs>' + this.__nl()
 

packages/core/tests/defs.test.mjs

@@ -0,0 +1,38 @@
+import chai from 'chai'
+import { Defs } from '../src/defs.mjs'
+
+const expect = chai.expect
+
+describe('Defs', () => {
+  let defs = new Defs()
+
+  it('Should set a def', () => {
+    defs.set('test', 'passed')
+    expect(defs.get('test')).to.equal('passed')
+  })
+
+  it('Should remove a def', () => {
+    defs.remove('test')
+    expect(defs.get('test')).to.equal(false)
+  })
+
+  it('Should only set an unset def', () => {
+    defs.setIfUnset('test', 'passed')
+    expect(defs.get('test')).to.equal('passed')
+    defs.setIfUnset('test', 'failed')
+    expect(defs.get('test')).to.equal('passed')
+  })
+
+  it('Should return false when getting an unset def', () => {
+    expect(defs.get('doNotTest')).to.equal(false)
+  })
+
+  it('Should render defs correctly', () => {
+    console.log(defs.render())
+    expect(defs.render()).to.equal(' test="passed"')
+  })
+
+  it('Should be able to clone itself', () => {
+    expect(defs.clone().get('test')).to.equal('passed')
+  })
+})

packages/core/tests/svg.test.mjs

@@ -2,6 +2,7 @@ import chai from 'chai'
 import chaiString from 'chai-string'
 import { Svg } from '../src/svg.mjs'
 import { Design, Attributes } from '../src/index.mjs'
+import { Defs } from '../src/defs.mjs'
 import { version } from '../data.mjs'
 import render from './fixtures/render.mjs'
 
@@ -42,7 +43,7 @@ describe('Svg', () => {
     expect(svg.freeId).to.equal(0)
     expect(svg.body).to.equal('')
     expect(svg.style).to.equal('')
-    expect(svg.defs).to.equal('')
+    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,6 +1,8 @@
-const defs = [
+// Export defs
-  // button
+export const buttonsDefs = [
-  `
+  {
+    name: 'button',
+    def: `
 <g id="button">
   <circle
     cx="0" cy="0" r="3.4"
@@ -11,32 +13,48 @@ const defs = [
   <circle cx="1"  cy="1"  r="0.5" class="no-stroke fill-mark" />
   <circle cx="-1" cy="1"  r="0.5" class="no-stroke fill-mark" />
 </g>`,
-  // buttonhole
+  },
-  `
+  {
+    name: 'buttonhole',
+    def: `
 <g id="buttonhole">
   <path
     class="mark"
     d="M -1,-5 L 1,-5 L 1,5 L -1,5 z"
   />
-</g>
+</g>`,
+  },
+  {
+    name: 'buttonhole-start',
+    def: `
 <g id="buttonhole-start">
   <path
     class="mark"
     d="M -1,-10 L 1,-10 L 1,0 L -1,0 z"
   />
-</g>
+</g>`,
+  },
+  {
+    name: 'buttonhole-end',
+    def: `
 <g id="buttonhole-end">
   <path
     class="mark"
     d="M -1,0 L 1,0 L 1,10 L -1,10 z"
   />
 </g>`,
-  // snaps
+  },
-  `
+  {
+    name: 'snap-stud-grad',
+    def: `
 <radialGradient id="snap-stud-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
   <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>
+</radialGradient>`,
+  },
+  {
+    name: 'snap-stud',
+    def: `
 <g id="snap-stud">
   <circle id="snap-stud-circle-edge" cx="0" cy="0" r="3.4"
     style="stroke:#666;fill:#dddddd;stroke-width:0.3;"
@@ -48,7 +66,11 @@ const defs = [
     id="snap-stud-lines" style="fill:none;stroke:#666; stroke-width:0.2;"
     d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1"
   />
-</g>
+</g>`,
+  },
+  {
+    name: 'snap-socket',
+    def: `
 <g id="snap-socket">
   <circle id="snap-socket-circle-edge" cx="0" cy="0" r="3.4"
     style="stroke:#666;fill:#bbbbbb;stroke-width:0.3;"
@@ -61,15 +83,5 @@ const defs = [
     d="M -1.7,-1 L -1.7,1 M 1.7,-1 L 1.7,1" id="snap-socket-lines"
   />
 </g>`,
-]
-
-// Export hooks
-export const buttonsHooks = {
-  preRender: [
-    function (svg) {
-      for (const def of defs) {
-        if (svg.defs.indexOf(def) === -1) svg.defs += def
-      }
   },
-  ],
+]
-}

plugins/plugin-annotations/src/cutonfold.mjs

@@ -1,20 +1,21 @@
-const markers = `
+// Export defs
+export const cutonfoldDefs = [
+  {
+    name: 'cutonfoldFrom',
+    def: `
 <marker orient="auto" refY="4.0" refX="0.0" id="cutonfoldFrom" 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" />
-</marker>
+</marker>`,
+  },
+  {
+    name: 'cutonfoldTo',
+    def: `
 <marker orient="auto" refY="4.0" refX="12.0" id="cutonfoldTo" 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" />
-</marker>
+</marker>`,
-`
-
-// Export hooks
-export const cutonfoldHooks = {
-  preRender: [
-    function (svg) {
-      if (svg.defs.indexOf(markers) === -1) svg.defs += markers
   },
-  ],
+]
-}
+
 // Export macros
 export const cutonfoldMacros = {
   cutonfold: function (so, { points, paths, Path, complete, store, scale }) {

plugins/plugin-annotations/src/dimensions.mjs

@@ -1,11 +1,21 @@
-const markers = `
+// Export defs
+export const dimensionsDefs = [
+  {
+    name: 'dimensionFrom',
+    def: `
 <marker orient="auto" refY="4.0" refX="0.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" />
-</marker>
+</marker>`,
+  },
+  {
+    name: 'dimensionTo',
+    def: `
 <marker orient="auto" refY="4.0" refX="12.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" />
-</marker>
+</marker>`,
-`
+  },
+]
+
 const prefix = '__paperless'
 
 function drawDimension(from, to, so, { Path, units }) {
@@ -70,14 +80,7 @@ function lleader(so, type, props, id) {
   return point
 }
 
-// Export hooks and macros
+// Export macros
-export const dimensionsHooks = {
-  preRender: [
-    function (svg) {
-      if (svg.defs.indexOf(markers) === -1) svg.defs += markers
-    },
-  ],
-}
 export const dimensionsMacros = {
   // horizontal
   hd: function (so, props) {

plugins/plugin-annotations/src/grainline.mjs

@@ -1,21 +1,24 @@
-const markers = `
+// Export defs
+export const grainlineDefs = [
+  {
+    name: 'grainlineFrom',
+    def: `
 <marker orient="auto" refY="4.0" refX="10.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" />
-</marker>
+</marker>`,
+  },
+  {
+    name: 'grainlineTo',
+    def: `
 <marker orient="auto" refY="4.0" refX="2.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" />
-</marker>`
+</marker>`,
+  },
+]
 
 const dflts = { text: 'grainline' }
 
-// Export hooks and macros
+// Export macros
-export const grainlineHooks = {
-  preRender: [
-    function (svg) {
-      if (svg.defs.indexOf(markers) === -1) svg.defs += markers
-    },
-  ],
-}
 export const grainlineMacros = {
   grainline: function (so = {}, { points, paths, Path, complete, store }) {
     if (so === false) {

plugins/plugin-annotations/src/index.mjs

@@ -1,8 +1,8 @@
 import { name, version } from '../data.mjs'
-// Hooks only
+// Defs only
-import { buttonsHooks } from './buttons.mjs'
+import { buttonsDefs } from './buttons.mjs'
-import { logoHooks } from './logo.mjs'
+import { logoDefs } from './logo.mjs'
-import { notchesHooks } from './notches.mjs'
+import { notchesDefs } from './notches.mjs'
 // Macros only
 import { bannerMacros } from './banner.mjs'
 import { bannerboxMacros } from './bannerbox.mjs'
@@ -11,26 +11,36 @@ import { crossboxMacros } from './crossbox.mjs'
 import { cutlistStores, cutlistHooks } from './cutlist.mjs'
 import { scaleboxMacros } from './scalebox.mjs'
 import { titleMacros } from './title.mjs'
-// Hooks and Macros
+// Defs and Macros
-import { cutonfoldMacros, cutonfoldHooks } from './cutonfold.mjs'
+import { cutonfoldMacros, cutonfoldDefs } from './cutonfold.mjs'
-import { dimensionsMacros, dimensionsHooks } from './dimensions.mjs'
+import { dimensionsMacros, dimensionsDefs } from './dimensions.mjs'
-import { grainlineMacros, grainlineHooks } from './grainline.mjs'
+import { grainlineMacros, grainlineDefs } from './grainline.mjs'
-import { pleatMacros, pleatHooks } from './pleat.mjs'
+import { pleatMacros, pleatDefs } from './pleat.mjs'
-import { sewtogetherMacros, sewtogetherHooks } from './sewtogether.mjs'
+import { sewtogetherMacros, sewtogetherDefs } from './sewtogether.mjs'
 
 export const plugin = {
   name,
   version,
   hooks: {
     preRender: [
-      ...buttonsHooks.preRender,
+      function (svg) {
-      ...logoHooks.preRender,
+        const defs = [
-      ...notchesHooks.preRender,
+          ...buttonsDefs,
-      ...cutonfoldHooks.preRender,
+          ...cutonfoldDefs,
-      ...dimensionsHooks.preRender,
+          ...dimensionsDefs,
-      ...grainlineHooks.preRender,
+          ...grainlineDefs,
-      ...pleatHooks.preRender,
+          ...logoDefs,
-      ...sewtogetherHooks.preRender,
+          ...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
+          )
+        }
+      },
     ],
     prePartDraft: [...cutlistHooks.prePartDraft],
   },

plugins/plugin-annotations/src/notches.mjs

@@ -1,18 +1,19 @@
-const markers = `
+// Export hooks
+export const notchesDefs = [
+  {
+    name: 'notch',
+    def: `
 <g id="notch">
   <circle cy="0" cx="0" r="1.4" class="fill-note" />
   <circle cy="0" cx="0" r="2.8" class="note" />
-</g>
+</g>`,
+  },
+  {
+    name: 'bnotch',
+    def: `
 <g id="bnotch">
   <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>`
+</g>`,
-
-// Export hooks
-export const notchesHooks = {
-  preRender: [
-    function (svg) {
-      if (svg.defs.indexOf(`id="notch"`) === -1) svg.defs += markers
   },
-  ],
+]
-}

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) {
-      if (svg.defs.indexOf(markers) === -1) svg.defs += markers
   },
-  ],
+]
-}
 
 // Export macros
 export const pleatMacros = {

plugins/plugin-annotations/src/sewtogether.mjs

@@ -1,23 +1,27 @@
-const markers = `
+// Export defs
+export const sewtogetherDefs = [
+  {
+    name: 'sewTogetherStart',
+    def: `
 <marker id="sewTogetherStart" markerWidth="4" markerHeight="4" orient="auto" refX="0" refY="2">
   <path class="note stroke-sm" d="M4,4 L0,2 4,0" />
-</marker>
+</marker>`,
+  },
+  {
+    name: 'sewTogetherEnd',
+    def: `
 <marker id="sewTogetherEnd" markerWidth="4" markerHeight="4" orient="auto" refX="4" refY="2">
   <path class="note stroke-sm" d="M0,0 L4,2 0,4" />
-</marker>
+</marker>`,
+  },
+  {
+    name: 'sewTogetherCross',
+    def: `
 <marker id="sewTogetherCross" markerWidth="4" markerHeight="4" orient="auto" refX="2" refY="2">
   <path d="M 0,0 L 4,4 M 4,0 L 0,4" class="note stroke-sm"/>
-</marker>
+</marker>`,
-`
-
-// Export hooks
-export const sewtogetherHooks = {
-  preRender: [
-    function (svg) {
-      if (svg.defs.indexOf(markers) === -1) svg.defs += markers
   },
-  ],
+]
-}
 
 // Export macros
 export const sewtogetherMacros = {

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.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).to.contain(
+    expect(pattern.svg.defs.get('logo')).to.not.equal(false)
-      '<g id="logo" transform="scale(1) translate(-23 -36)"><path class="logo"'
-    )
   })
 })

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`, () => {
+  it(`Should add the bnotch to defs`, () => {
-    expect(pattern.svg.defs).to.contain('<g id="notch">')
+    expect(pattern.svg.defs.get('bnotch')).to.not.equal(false)
   })
-
+  it(`Should add the notch to defs`, () => {
-  it(`Should add the notches snippet to defs`, () => {
+    expect(pattern.svg.defs.get('notch')).to.not.equal(false)
-    expect(pattern.svg.defs.indexOf(`<g id="notch">`)).to.not.equal(-1)
   })
-
   it('Draws a notch on an anchor point', () => {
     const part = {
       name: 'test',

plugins/plugin-theme/src/index.mjs

@@ -37,8 +37,8 @@ export const plugin = {
         }
         if (paperless) {
           svg.pattern.settings[0].units === 'imperial'
-            ? (svg.defs += grid.imperial)
+            ? svg.defs.setIfUnset('grid', grid.imperial)
-            : (svg.defs += grid.metric)
+            : svg.defs.setIfUnset('grid', grid.metric)
           const parts = svg.pattern.parts[svg.pattern.activeSet]
           const skipGrid = data.skipGrid || []
           for (const key in parts) {
@@ -48,9 +48,10 @@ export const plugin = {
               let anchor = new Point(0, 0)
               if (typeof points.gridAnchor !== 'undefined') anchor = part.points.gridAnchor
               else if (typeof points.anchor !== 'undefined') anchor = part.points.anchor
-              svg.defs += `<pattern id="grid_${key}" `
+              svg.defs.setIfUnset(
-              svg.defs += `xlink:href="#grid" x="${anchor.x}" y="${anchor.y}">`
+                'grid_' + key,
-              svg.defs += '</pattern>'
+                `<pattern id="grid_${key}" xlink:href="#grid" x="${anchor.x}" y="${anchor.y}"></pattern>'`
+              )
               paths[getId()] = new Path()
                 .move(part.topLeft)
                 .line(new Point(part.topLeft.x, part.bottomRight.y))

sites/shared/components/workbench/draft/defs.mjs

@@ -49,7 +49,7 @@ const grids = {
 }
 
 export const Defs = (props) => {
-  let defs = props.svg.defs
+  let defs = props.svg.defs.render()
   if (props.settings[0].paperless) {
     defs += grids[props.settings[0].units || 'metric']
     for (let p in props.parts[0]) {