feat(core): Added support for custom sample styles

packages/components/src/Draft/Defs/index.js

@@ -24,6 +24,8 @@ const Defs = (props) => {
       <Snippets />
       <Grid units={props.units} />
       {paperlessGrids}
+      {props.extraDefs || '<!-- no extras -->'}
+      <g></g>
     </defs>
   )
 }

packages/components/src/Draft/index.js

@@ -20,6 +20,7 @@ const Draft = (props) => (
       parts={props.parts}
       paperless={props.settings.paperless}
       design={props.design || false}
+      extraDefs={props.extraDefs}
     />
     <g>
       {Object.keys(props.parts).map((name) => (

packages/core/src/hooks.js

@@ -6,7 +6,6 @@ export default function Hooks() {
     postSample: [],
     preRender: [],
     postRender: [],
-    insertText: [],
+    insertText: []
-    debug: []
   }
 }

packages/core/src/part.js

@@ -28,34 +28,17 @@ function Part() {
   return this
 }
 
-Part.prototype.macroClosure = function(args) {
+Part.prototype.macroClosure = function (args) {
   let self = this
-  let method = function(key, args) {
+  let method = function (key, args) {
     let macro = utils.macroName(key)
-    if (typeof self[macro] === 'function') {
+    if (typeof self[macro] === 'function') self[macro](args)
-      self[macro](args)
-    } else {
-      self.debug({
-        type: 'warning',
-        label: '🚨 Macro not found',
-        msg: `Macro ${key} is not registered`
-      })
-    }
   }
 
   return method
 }
 
-Part.prototype.debugClosure = function() {
+Part.prototype.runHooks = function (hookName, data = false) {
-  let self = this
-  let method = function(data) {
-    self.debug(data)
-  }
-
-  return method
-}
-
-Part.prototype.runHooks = function(hookName, data = false) {
   if (data === false) data = this
   let hooks = this.hooks[hookName]
   if (hooks && hooks.length > 0) {
@@ -65,22 +48,17 @@ Part.prototype.runHooks = function(hookName, data = false) {
   }
 }
 
-/** Debug method */
-Part.prototype.debug = function(data) {
-  this.runHooks('debug', data)
-}
-
 /** Returns an unused ID */
-Part.prototype.getId = function() {
+Part.prototype.getId = function () {
   this.freeId += 1
 
   return '' + this.freeId
 }
 
 /** Returns a value formatted for units provided in settings */
-Part.prototype.unitsClosure = function(value) {
+Part.prototype.unitsClosure = function (value) {
   let self = this
-  let method = function(value) {
+  let method = function (value) {
     return utils.units(value, self.context.settings.units)
   }
 
@@ -88,7 +66,7 @@ Part.prototype.unitsClosure = function(value) {
 }
 
 /** Calculates the part's bounding box and sets it */
-Part.prototype.boundary = function() {
+Part.prototype.boundary = function () {
   if (this.topLeft) return this // Cached
 
   let topLeft = new Point(Infinity, Infinity)
@@ -130,7 +108,7 @@ Part.prototype.boundary = function() {
 }
 
 /** Stacks part so that its top left corner is in (0,0) */
-Part.prototype.stack = function() {
+Part.prototype.stack = function () {
   if (this.topLeft !== false) return this
   else this.boundary()
   if (this.topLeft.x == 0 && this.topLeft.y == 0) return this
@@ -140,7 +118,7 @@ Part.prototype.stack = function() {
 }
 
 /** Adds an attribute. This is here to make this call chainable in assignment */
-Part.prototype.attr = function(name, value, overwrite = false) {
+Part.prototype.attr = function (name, value, overwrite = false) {
   if (overwrite) this.attributes.set(name, value)
   else this.attributes.add(name, value)
 
@@ -148,8 +126,8 @@ Part.prototype.attr = function(name, value, overwrite = false) {
 }
 
 /** Copies point/path/snippet data from part orig into this */
-Part.prototype.inject = function(orig) {
+Part.prototype.inject = function (orig) {
-  const findBasePoint = p => {
+  const findBasePoint = (p) => {
     for (let i in orig.points) {
       if (orig.points[i] === p) return i
     }
@@ -182,12 +160,12 @@ Part.prototype.inject = function(orig) {
   return this
 }
 
-Part.prototype.units = function(input) {
+Part.prototype.units = function (input) {
   return utils.units(input, this.context.settings.units)
 }
 
 /** Returns an object with shorthand access for pattern design */
-Part.prototype.shorthand = function() {
+Part.prototype.shorthand = function () {
   let complete = this.context.settings.complete ? true : false
   let paperless = this.context.settings.paperless === true ? true : false
   let sa = this.context.settings.complete ? this.context.settings.sa || 0 : 0
@@ -206,8 +184,7 @@ Part.prototype.shorthand = function() {
     Path: this.Path,
     Snippet: this.Snippet,
     complete,
-    paperless,
+    paperless
-    debug: this.debugClosure()
   }
 }
 

packages/core/src/pattern.js

@@ -182,7 +182,18 @@ Pattern.prototype.sampleRun = function (parts, anchors, run, runs, extraClass =
     for (let j in this.parts[i].paths) {
       parts[i].paths[j + '_' + run] = this.parts[i].paths[j]
         .clone()
-        .attr('style', sampleStyle(run, runs, this.settings.sample.styles))
+        .attr(
+          'style',
+          extraClass === 'sample-focus'
+            ? this.settings.sample
+              ? this.settings.sample.focusStyle || sampleStyle(run, runs)
+              : sampleStyle(run, runs)
+            : sampleStyle(
+                run,
+                runs,
+                this.settings.sample ? this.settings.sample.styles || false : false
+              )
+        )
         .attr('data-sample-run', run)
         .attr('data-sample-runs', runs)
       if (this.parts[i].points.anchor)
@@ -216,11 +227,6 @@ Pattern.prototype.sampleOption = function (optionName) {
   step = (option.max / factor - val) / 9
   for (let run = 1; run < 11; run++) {
     this.settings.options[optionName] = val
-    this.debug({
-      type: 'info',
-      label: '🏃🏿‍♀️ Sample run',
-      msg: `Sampling option ${optionName} with value ${round(val)}`
-    })
     this.sampleRun(parts, anchors, run, 10)
     val += step
   }
@@ -238,11 +244,6 @@ Pattern.prototype.sampleListOption = function (optionName) {
   let runs = option.list.length
   for (let val of option.list) {
     this.settings.options[optionName] = val
-    this.debug({
-      type: 'info',
-      label: '🏃🏿‍♀️ Sample run',
-      msg: `Sampling option ${optionName} with value ${round(val)}`
-    })
     this.sampleRun(parts, anchors, run, runs)
     run++
   }
@@ -266,11 +267,6 @@ Pattern.prototype.sampleMeasurement = function (measurementName) {
   val = val * 0.9
   for (let run = 1; run < 11; run++) {
     this.settings.measurements[measurementName] = val
-    this.debug({
-      type: 'info',
-      label: '🏃🏿‍♀️ Sample run',
-      msg: `Sampling option ${measurementName} with value ${round(val)}`
-    })
     this.sampleRun(parts, anchors, run, 10)
     val += step
   }
@@ -288,18 +284,18 @@ Pattern.prototype.sampleModels = function (models, focus = false) {
   this.runHooks('preSample')
   let anchors = {}
   let parts = this.sampleParts()
-  let run = 0
+  // If there's a focus, do it first so it's at the bottom of the SVG
+  if (focus) {
+    this.settings.measurements = models[focus]
+    this.sampleRun(parts, anchors, -1, -1, 'sample-focus')
+    delete models[focus]
+  }
+  let run = -1
   let runs = Object.keys(models).length
   for (let l in models) {
     run++
     this.settings.measurements = models[l]
-    this.debug({
+    this.sampleRun(parts, anchors, run, runs)
-      type: 'info',
-      label: '🏃🏿‍♀️ Sample run',
-      msg: `Sampling model ${l}`
-    })
-    let className = l === focus ? 'sample-focus' : ''
-    this.sampleRun(parts, anchors, run, runs, className)
   }
   this.parts = parts
   this.runHooks('postSample')
@@ -307,11 +303,6 @@ Pattern.prototype.sampleModels = function (models, focus = false) {
   return this
 }
 
-/** Debug method, exposes debug hook */
-Pattern.prototype.debug = function (data) {
-  this.runHooks('debug', data)
-}
-
 Pattern.prototype.render = function () {
   this.svg = new Svg(this)
   this.svg.hooks = this.hooks
@@ -324,11 +315,6 @@ Pattern.prototype.on = function (hook, method, data) {
 }
 
 Pattern.prototype.use = function (plugin, data) {
-  this.debug({
-    type: 'success',
-    label: '🔌 Plugin loaded',
-    msg: `${plugin.name} v${plugin.version}`
-  })
   if (plugin.hooks) this.loadPluginHooks(plugin, data)
   if (plugin.macros) this.loadPluginMacros(plugin)
 

packages/core/src/svg.js

@@ -21,7 +21,7 @@ function Svg(pattern) {
   this.attributes.add('freesewing', version)
 }
 
-Svg.prototype.runHooks = function(hookName, data = false) {
+Svg.prototype.runHooks = function (hookName, data = false) {
   if (data === false) data = this
   let hooks = this.hooks[hookName]
   if (hooks.length > 0) {
@@ -32,7 +32,7 @@ Svg.prototype.runHooks = function(hookName, data = false) {
 }
 
 /** Runs insertText hooks */
-Svg.prototype.insertText = function(text) {
+Svg.prototype.insertText = function (text) {
   if (this.hooks.insertText.length > 0) {
     for (let hook of this.hooks.insertText)
       text = hook.method(this.pattern.settings.locale, text, hook.data)
@@ -41,11 +41,8 @@ Svg.prototype.insertText = function(text) {
   return text
 }
 
-/** Debug method, exposes debug hook */
-Svg.prototype.debug = function() {}
-
 /** Renders a draft object as SVG */
-Svg.prototype.render = function(pattern) {
+Svg.prototype.render = function (pattern) {
   this.idPrefix = pattern.settings.idPrefix
   this.runHooks('preRender')
   if (!pattern.settings.embed) {
@@ -77,7 +74,7 @@ Svg.prototype.render = function(pattern) {
 }
 
 /** Renders SVG head section */
-Svg.prototype.renderHead = function() {
+Svg.prototype.renderHead = function () {
   let svg = this.renderStyle()
   svg += this.renderScript()
   svg += this.renderDefs()
@@ -87,7 +84,7 @@ Svg.prototype.renderHead = function() {
 }
 
 /** Renders SVG closing section */
-Svg.prototype.renderTail = function() {
+Svg.prototype.renderTail = function () {
   let svg = ''
   svg += this.closeGroup()
   svg += this.nl() + '</svg>'
@@ -96,7 +93,7 @@ Svg.prototype.renderTail = function() {
 }
 
 /** Returns SVG code for the opening SVG tag */
-Svg.prototype.renderSvgTag = function() {
+Svg.prototype.renderSvgTag = function () {
   let svg = '<svg'
   this.indent()
   svg += this.nl() + this.attributes.render()
@@ -107,7 +104,7 @@ Svg.prototype.renderSvgTag = function() {
 }
 
 /** Returns SVG code for the style block */
-Svg.prototype.renderStyle = function() {
+Svg.prototype.renderStyle = function () {
   let svg = '<style type="text/css"> <![CDATA[ '
   this.indent()
   svg += this.nl() + this.style
@@ -117,7 +114,7 @@ Svg.prototype.renderStyle = function() {
 }
 
 /** Returns SVG code for the script block */
-Svg.prototype.renderScript = function() {
+Svg.prototype.renderScript = function () {
   let svg = '<script type="text/javascript"> <![CDATA['
   this.indent()
   svg += this.nl() + this.script
@@ -128,7 +125,7 @@ Svg.prototype.renderScript = function() {
 }
 
 /** Returns SVG code for the defs block */
-Svg.prototype.renderDefs = function() {
+Svg.prototype.renderDefs = function () {
   let svg = '<defs>'
   this.indent()
   svg += this.nl() + this.defs
@@ -139,7 +136,7 @@ Svg.prototype.renderDefs = function() {
 }
 
 /** Returns SVG code for a Part object */
-Svg.prototype.renderPart = function(part) {
+Svg.prototype.renderPart = function (part) {
   let svg = ''
   for (let key in part.paths) {
     let path = part.paths[key]
@@ -162,14 +159,14 @@ Svg.prototype.renderPart = function(part) {
 }
 
 /** Returns SVG code for a Path object */
-Svg.prototype.renderPath = function(path) {
+Svg.prototype.renderPath = function (path) {
   if (!path.attributes.get('id')) path.attributes.add('id', this.idPrefix + this.getId())
   path.attributes.set('d', path.asPathstring())
 
   return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(path)}`
 }
 
-Svg.prototype.renderPathText = function(path) {
+Svg.prototype.renderPathText = function (path) {
   let text = path.attributes.get('data-text')
   if (!text) return ''
   else this.text = this.insertText(text)
@@ -181,16 +178,16 @@ Svg.prototype.renderPathText = function(path) {
   else if (align && align.indexOf('right') > -1) offset = ' startOffset="100%" '
   let svg = this.nl() + '<text>'
   this.indent()
-  svg += `<textPath xlink:href="#${path.attributes.get('id')}" ${offset}><tspan ${attributes}>${
+  svg += `<textPath xlink:href="#${path.attributes.get(
-    this.escapeText(this.text)
+    'id'
-  }</tspan></textPath>`
+  )}" ${offset}><tspan ${attributes}>${this.escapeText(this.text)}</tspan></textPath>`
   this.outdent()
   svg += this.nl() + '</text>'
 
   return svg
 }
 
-Svg.prototype.renderText = function(point) {
+Svg.prototype.renderText = function (point) {
   let text = point.attributes.getAsArray('data-text')
   if (text !== false) {
     let joint = ''
@@ -214,8 +211,7 @@ Svg.prototype.renderText = function(point) {
       svg += `<tspan x="${point.x}" dy="${lineHeight}">${line}</tspan>`
     }
   } else {
-    svg += `<tspan>${this.escapeText(this.text)
+    svg += `<tspan>${this.escapeText(this.text)}</tspan>`
-    }</tspan>`
   }
   this.outdent()
   svg += this.nl() + '</text>'
@@ -223,18 +219,18 @@ Svg.prototype.renderText = function(point) {
   return svg
 }
 
-Svg.prototype.escapeText = function(text) {
+Svg.prototype.escapeText = function (text) {
   return text.replace('"', '&#8220;')
 }
 
-Svg.prototype.renderCircle = function(point) {
+Svg.prototype.renderCircle = function (point) {
   return `<circle cx="${point.x}" cy="${point.y}" r="${point.attributes.get(
     'data-circle'
   )}" ${point.attributes.renderIfPrefixIs('data-circle-')}></circle>`
 }
 
 /** Returns SVG code for a snippet */
-Svg.prototype.renderSnippet = function(snippet, part) {
+Svg.prototype.renderSnippet = function (snippet, part) {
   let x = snippet.anchor.x
   let y = snippet.anchor.y
   let scale = snippet.attributes.get('data-scale')
@@ -256,7 +252,7 @@ Svg.prototype.renderSnippet = function(snippet, part) {
 }
 
 /** Returns SVG code to open a group */
-Svg.prototype.openGroup = function(id, attributes = false) {
+Svg.prototype.openGroup = function (id, attributes = false) {
   let svg = this.nl() + this.nl()
   svg += `<!-- Start of group #${id} -->`
   svg += this.nl()
@@ -270,19 +266,19 @@ Svg.prototype.openGroup = function(id, attributes = false) {
 }
 
 /** Returns SVG code to close a group */
-Svg.prototype.closeGroup = function() {
+Svg.prototype.closeGroup = function () {
   this.outdent()
 
   return `${this.nl()}</g>${this.nl()}<!-- end of group #${this.openGroups.pop()} -->`
 }
 
 /** Returns a linebreak + identation */
-Svg.prototype.nl = function() {
+Svg.prototype.nl = function () {
   return '\n' + this.tab()
 }
 
 /** Returns indentation */
-Svg.prototype.tab = function() {
+Svg.prototype.tab = function () {
   let space = ''
   for (let i = 0; i < this.tabs; i++) {
     space += '  '
@@ -292,17 +288,17 @@ Svg.prototype.tab = function() {
 }
 
 /** Increases indentation by 1 */
-Svg.prototype.indent = function() {
+Svg.prototype.indent = function () {
   this.tabs += 1
 }
 
 /** Decreases indentation by 1 */
-Svg.prototype.outdent = function() {
+Svg.prototype.outdent = function () {
   this.tabs -= 1
 }
 
 /** Returns an unused ID */
-Svg.prototype.getId = function() {
+Svg.prototype.getId = function () {
   this.freeId += 1
 
   return '' + this.freeId

packages/css-theme/src/components/_draft.scss

@@ -53,11 +53,6 @@ svg.freesewing.draft {
     stroke: none !important;
     fill: none !important;
   }
-  /* sample */
-  path.sample-focus {
-    stroke-width: 0;
-    fill-opacity: 0.2;
-  }
 
   /* Text */
   text {