Converting uses of Snap.format to use template literals

This commit is contained in:
Jeff Avallone 2014-12-15 21:51:17 -05:00
parent db62743d54
commit d22ab35b68
5 changed files with 38 additions and 58 deletions

View File

@ -78,7 +78,7 @@ export default {
.attr({
style: 'stroke:#000;stroke-dasharray:2,2;;'
});
anchorLine = this.container.path(Snap.format('M{ax},{ay}H{ax2}', box))
anchorLine = this.container.path(`M${box.ax},${box.ay}H${box.ax2}`)
.attr({
style: 'stroke:#f00;stroke-dasharray:2,2;',
'data-type': this.type,

View File

@ -39,10 +39,7 @@ export default _.extend({}, Base, {
var path;
next = this.normalizeBBox(item.getBBox());
path = Snap.format('M{prev.ax2},{prev.ay}H{next.ax}', {
prev,
next
});
path = `M${prev.ax2},${prev.ay}H${next.ax}`;
prev = next;
return path;

View File

@ -17,29 +17,23 @@ export default _.extend({}, Base, {
box = this._content.getBBox();
if (this._repeat.hasSkip()) {
paths.push(Snap.format('M0,{box.ay}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', {
box,
vert: Math.max(0, box.ay - box.y - 10),
horiz: box.width - 10
}));
let vert = Math.max(0, box.ay - box.y - 10),
horiz = box.width - 10;
paths.push(`M0,${box.ay}q10,0 10,-10v${-vert}q0,-10 10,-10h${horiz}q10,0 10,10v${vert}q0,10 10,10`);
if (!this._repeat.greedy()) {
paths.push(Snap.format('M0,{box.ay}m10,-15l5,5m-5,-5l-5,5', {
box
}));
paths.push(`M10,${box.ay - 15}l5,5m-5,-5l-5,5`);
}
}
if (this._repeat.hasLoop()) {
paths.push(Snap.format('M{box.x},{box.ay}q-10,0 -10,10v{vert}q0,10 10,10h{box.width}q10,0 10,-10v-{vert}q0,-10 -10,-10', {
box,
vert: box.y2 - box.ay - 10
}));
let vert = box.y2 - box.ay - 10;
paths.push(`M${box.x},${box.ay}q-10,0 -10,10v${vert}q0,10 10,10h${box.width}q10,0 10,-10v${-vert}q0,-10 -10,-10`);
if (this._repeat.greedy()) {
paths.push(Snap.format('M{box.x2},{box.ay}m10,15l5,-5m-5,5l-5,-5', {
box
}));
paths.push(`M${box.x2 + 10},${box.ay + 15}l5,-5m-5,5l-5,-5`);
}
}

View File

@ -39,10 +39,10 @@ export default _.extend({}, Base, {
matchContainer.prepend(
matchContainer.path(_.map(matches, match => {
return Snap.format('M0,{box.ay}h{box.ax}M{box.ax2},{box.ay}H{container.width}', {
box: match.getBBox(),
container: matchContainer.getBBox()
});
var box = match.getBBox(),
container = matchContainer.getBBox();
return `M0,${box.ay}h${box.ax}M${box.ax2},${box.ay}H${container.width}`;
}).join('')));
}).bind(this));
}
@ -54,14 +54,13 @@ export default _.extend({}, Base, {
distance = Math.abs(box.ay - containerBox.cy);
if (distance >= 15) {
return Snap.format([
'M0,{box.cy}q10,0 10,{shift}V{edge}',
'M{box.width},{box.cy}m40,0q-10,0 -10,{shift}V{edge}'
].join(''), {
box: containerBox,
edge: box.ay - 10 * direction,
shift: 10 * direction
});
let edge = box.ay - 10 * direction,
shift = 10 * direction;
return [
`M0,${containerBox.cy}q10,0 10,${shift}V${edge}`,
`M${containerBox.width + 40},${containerBox.cy}q-10,0 -10,${shift}V${edge}`
].join('');
} else {
return '';
}
@ -70,31 +69,23 @@ export default _.extend({}, Base, {
makeConnectorLine(containerBox, match) {
var box = match.getBBox(),
direction = box.ay > containerBox.cy ? 1 : -1,
distance = Math.abs(box.ay - containerBox.cy),
pathStr;
distance = Math.abs(box.ay - containerBox.cy);
if (distance >= 15) {
pathStr = [
'M10,{box.ay}m0,{shift}q0,{curve} 10,{curve}',
'M{containerBox.width},{box.ay}m30,{shift}q0,{curve} -10,{curve}'
let curve = 10 * direction;
return [
`M10,${box.ay - curve}q0,${curve} 10,${curve}`,
`M${containerBox.width + 30},${box.ay - curve}q0,${curve} -10,${curve}`
].join('');
} else {
pathStr = [
'M0,{containerBox.cy}c10,0 10,{anchor.y} 20,{anchor.y}',
'M{containerBox.width},{containerBox.cy}m40,0c-10,0 -10,{anchor.y} -20,{anchor.y}'
let anchor = box.ay - containerBox.cy;
return [
`M0,${containerBox.cy}c10,0 10,${anchor} 20,${anchor}`,
`M${containerBox.width + 40},${containerBox.cy}c-10,0 -10,${anchor} -20,${anchor}`
].join('');
}
return Snap.format(pathStr, {
containerBox,
box,
shift: -10 * direction,
curve: 10 * direction,
anchor: {
x: box.x + 20,
y: box.ay - containerBox.cy
}
});
},
matches() {

View File

@ -14,22 +14,20 @@ export default _.extend({}, Base, {
return this.regexp.render(this.container.group())
.then((() => {
var contentBox;
var box;
this.regexp.transform(Snap.matrix()
.translate(10, 0));
contentBox = this.regexp.getBBox();
box = this.regexp.getBBox();
this.start.transform(Snap.matrix()
.translate(0, contentBox.ay));
.translate(0, box.ay));
this.end.transform(Snap.matrix()
.translate(contentBox.x2 + 10, contentBox.ay));
.translate(box.x2 + 10, box.ay));
this.container.prepend(
this.container.path(Snap.format('M{box.ax},{box.ay}H0M{box.ax2},{box.ay}H{box.x2}h10', {
box: contentBox
})));
this.container.path(`M${box.ax},${box.ay}H0M${box.ax2},${box.ay}H${box.x2 + 10}`));
}).bind(this));
},