Converting uses of Snap.format to use template literals

src/js/parser/javascript/base.js

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

src/js/parser/javascript/match.js

@@ -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}', {
+            path = `M${prev.ax2},${prev.ay}H${next.ax}`;
-              prev,
-              next
-            });
             prev = next;
 
             return path;

src/js/parser/javascript/match_fragment.js

@@ -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', {
+            let vert = Math.max(0, box.ay - box.y - 10),
-              box,
+                horiz = box.width - 10;
-              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', {
+              paths.push(`M10,${box.ay - 15}l5,5m-5,-5l-5,5`);
-                box
-              }));
             }
           }
 
           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', {
+            let vert = box.y2 - box.ay - 10;
-              box,
+
-              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', {
+              paths.push(`M${box.x2 + 10},${box.ay + 15}l5,-5m-5,5l-5,-5`);
-                box
-              }));
             }
           }
 

src/js/parser/javascript/regexp.js

@@ -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}', {
+              var box = match.getBBox(),
-                box: match.getBBox(),
+                  container = matchContainer.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([
+      let edge = box.ay - 10 * direction,
-        'M0,{box.cy}q10,0 10,{shift}V{edge}',
+          shift = 10 * direction;
-        'M{box.width},{box.cy}m40,0q-10,0 -10,{shift}V{edge}'
+
-      ].join(''), {
+      return [
-        box: containerBox,
+        `M0,${containerBox.cy}q10,0 10,${shift}V${edge}`,
-        edge: box.ay - 10 * direction,
+        `M${containerBox.width + 40},${containerBox.cy}q-10,0 -10,${shift}V${edge}`
-        shift: 10 * direction
+      ].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),
+        distance = Math.abs(box.ay - containerBox.cy);
-        pathStr;
 
     if (distance >= 15) {
-      pathStr = [
+      let curve = 10 * direction;
-        'M10,{box.ay}m0,{shift}q0,{curve} 10,{curve}',
+
-        'M{containerBox.width},{box.ay}m30,{shift}q0,{curve} -10,{curve}'
+      return [
+        `M10,${box.ay - curve}q0,${curve} 10,${curve}`,
+        `M${containerBox.width + 30},${box.ay - curve}q0,${curve} -10,${curve}`
       ].join('');
     } else {
-      pathStr = [
+      let anchor = box.ay - containerBox.cy;
-        '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}'
+      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() {

src/js/parser/javascript/root.js

@@ -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', {
+          this.container.path(`M${box.ax},${box.ay}H0M${box.ax2},${box.ay}H${box.x2 + 10}`));
-            box: contentBox
-          })));
       }).bind(this));
   },