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: [],
-    debug: []
+    insertText: []
   }
 }

packages/core/src/part.js

@@ -32,24 +32,7 @@ Part.prototype.macroClosure = function(args) {
   let self = this
   let method = function (key, args) {
     let macro = utils.macroName(key)
-    if (typeof self[macro] === 'function') {
-      self[macro](args)
-    } else {
-      self.debug({
-        type: 'warning',
-        label: '🚨 Macro not found',
-        msg: `Macro ${key} is not registered`
-      })
-    }
-  }
-
-  return method
-}
-
-Part.prototype.debugClosure = function() {
-  let self = this
-  let method = function(data) {
-    self.debug(data)
+    if (typeof self[macro] === 'function') self[macro](args)
   }
 
   return method
@@ -65,11 +48,6 @@ 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 () {
   this.freeId += 1
@@ -149,7 +127,7 @@ Part.prototype.attr = function(name, value, overwrite = false) {
 
 /** Copies point/path/snippet data from part orig into this */
 Part.prototype.inject = function (orig) {
-  const findBasePoint = p => {
+  const findBasePoint = (p) => {
     for (let i in orig.points) {
       if (orig.points[i] === p) return i
     }
@@ -206,8 +184,7 @@ Part.prototype.shorthand = function() {
     Path: this.Path,
     Snippet: this.Snippet,
     complete,
-    paperless,
-    debug: this.debugClosure()
+    paperless
   }
 }
 

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({
-      type: 'info',
-      label: '🏃🏿‍♀️ Sample run',
-      msg: `Sampling model ${l}`
-    })
-    let className = l === focus ? 'sample-focus' : ''
-    this.sampleRun(parts, anchors, run, runs, className)
+    this.sampleRun(parts, anchors, run, runs)
   }
   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

@@ -41,9 +41,6 @@ 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) {
   this.idPrefix = pattern.settings.idPrefix
@@ -181,9 +178,9 @@ 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}>${
-    this.escapeText(this.text)
-  }</tspan></textPath>`
+  svg += `<textPath xlink:href="#${path.attributes.get(
+    'id'
+  )}" ${offset}><tspan ${attributes}>${this.escapeText(this.text)}</tspan></textPath>`
   this.outdent()
   svg += this.nl() + '</text>'
 
@@ -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)
-    }</tspan>`
+    svg += `<tspan>${this.escapeText(this.text)}</tspan>`
   }
   this.outdent()
   svg += this.nl() + '</text>'

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 {