VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(core): Added support for custom sample styles

Browse source
This commit is contained in:
Joost De Cock 2020-07-11 15:15:02 +02:00
parent e415816f66
commit 7d3815939b
7 changed files with 66 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/components/src/Draft/Defs/index.js
View file

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

1
packages/components/src/Draft/index.js
View file

@ -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) => (

3
packages/core/src/hooks.js
View file

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

53
packages/core/src/part.js
View file

@ -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') {
self[macro](args)
} else {
self.debug({
type: 'warning',
label: '🚨 Macro not found',
msg: `Macro ${key} is not registered`
})
}
if (typeof self[macro] === 'function') self[macro](args)
}
return method
}
Part.prototype.debugClosure = function() {
let self = this
let method = function(data) {
self.debug(data)
}
return method
}
Part.prototype.runHooks = function(hookName, data = false) {
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) {
const findBasePoint = p => {
Part.prototype.inject = function (orig) {
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,
debug: this.debugClosure()
paperless
}
}

54
packages/core/src/pattern.js
View file

@ -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)

58
packages/core/src/svg.js
View file

@ -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}>${
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>'
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)
}</tspan>`
svg += `<tspan>${this.escapeText(this.text)}</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

5
packages/css-theme/src/components/_draft.scss
View file

@ -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 {