() => is not the same as function() {} smh

Fixed a few of the text rendering issues

src/config.js

@@ -305,28 +305,25 @@ const config = {
      * **Default value 20.
      */
     labelBoxHeight: 20,
-    messageFont: () => {
-      const c = getConfig().sequence;
+    messageFont: function() {
       return {
-        fontFamily: c.messageFontFamily,
-        fontSize: c.messageFontSize,
-        fontWeight: c.messageFontWeight
+        fontFamily: this.messageFontFamily,
+        fontSize: this.messageFontSize,
+        fontWeight: this.messageFontWeight
       };
     },
-    noteFont: () => {
-      const c = getConfig().sequence;
+    noteFont: function() {
       return {
-        fontFamily: c.noteFontFamily,
-        fontSize: c.noteFontSize,
-        fontWeight: c.noteFontWeight
+        fontFamily: this.noteFontFamily,
+        fontSize: this.noteFontSize,
+        fontWeight: this.noteFontWeight
       };
     },
-    actorFont: () => {
-      const c = getConfig().sequence;
+    actorFont: function() {
       return {
-        fontFamily: c.actorFontFamily,
-        fontSize: c.actorFontSize,
-        fontWeight: c.actorFontWeight
+        fontFamily: this.actorFontFamily,
+        fontSize: this.actorFontSize,
+        fontWeight: this.actorFontWeight
       };
     }
   },

src/diagrams/sequence/sequenceRenderer.js

@@ -277,8 +277,9 @@ const drawMessage = function(g, msgModel) {
 
   let textWidth = textDims.width;
 
-  let line;
+  let line, lineStarty;
   if (startx === stopx) {
+    lineStarty = bounds.getVerticalPos() + totalOffset;
     if (conf.rightAngles) {
       line = g
         .append('path')
@@ -292,6 +293,7 @@ const drawMessage = function(g, msgModel) {
     } else {
       totalOffset += conf.boxMargin;
 
+      lineStarty = bounds.getVerticalPos() + totalOffset;
       line = g
         .append('path')
         .attr(
@@ -299,19 +301,19 @@ const drawMessage = function(g, msgModel) {
           'M ' +
             startx +
             ',' +
-            (bounds.getVerticalPos() + totalOffset) +
+            lineStarty +
             ' C ' +
             (startx + 60) +
             ',' +
-            (bounds.getVerticalPos() - 10 + totalOffset) +
+            (lineStarty - 10) +
             ' ' +
             (startx + 60) +
             ',' +
-            (bounds.getVerticalPos() + 30 + totalOffset) +
+            (lineStarty + 30) +
             ' ' +
             startx +
             ',' +
-            (bounds.getVerticalPos() + 20 + totalOffset)
+            (lineStarty + 20)
         );
     }
 
@@ -324,18 +326,14 @@ const drawMessage = function(g, msgModel) {
       bounds.getVerticalPos() + 30 + totalOffset
     );
   } else {
+    lineStarty = bounds.getVerticalPos() + totalOffset;
     totalOffset += conf.boxMargin;
     line = g.append('line');
     line.attr('x1', startx);
-    line.attr('y1', bounds.getVerticalPos() + totalOffset);
+    line.attr('y1', lineStarty);
     line.attr('x2', stopx);
-    line.attr('y2', bounds.getVerticalPos() + totalOffset);
-    bounds.insert(
-      startx,
-      bounds.getVerticalPos() - 10 + totalOffset,
-      stopx,
-      bounds.getVerticalPos() + totalOffset
-    );
+    line.attr('y2', lineStarty);
+    bounds.insert(startx, lineStarty - 10, stopx, lineStarty);
   }
   // Make an SVG Container
   // Draw the line
@@ -363,7 +361,7 @@ const drawMessage = function(g, msgModel) {
   }
 
   line.attr('stroke-width', 2);
-  line.attr('stroke', 'black');
+  line.attr('stroke', 'none'); // handled by theme/css anyway
   line.style('fill', 'none'); // remove any fill colour
   if (type === parser.yy.LINETYPE.SOLID || type === parser.yy.LINETYPE.DOTTED) {
     line.attr('marker-end', 'url(' + url + '#arrowhead)');
@@ -378,7 +376,7 @@ const drawMessage = function(g, msgModel) {
     line.attr('marker-start', 'url(' + url + '#sequencenumber)');
     g.append('text')
       .attr('x', startx)
-      .attr('y', bounds.getVerticalPos() + 4 + totalOffset)
+      .attr('y', lineStarty + 4)
       .attr('font-family', 'sans-serif')
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')

src/utils.js

@@ -499,16 +499,20 @@ export const drawSimpleText = function(elem, textData) {
 };
 
 export const wrapLabel = (label, maxWidth, config) => {
+  if (!wrapLabel.cache) {
+    // until memoize PR
+    wrapLabel.cache = {};
+  }
   if (!label) {
     return label;
   }
   config = Object.assign(
-    { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0, joinWith: '<br/>' },
+    { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '<br/>' },
     config
   );
   const cacheKey = `${label}-${maxWidth}-${JSON.stringify(config)}`;
-  if (wrapLabel[cacheKey]) {
-    return wrapLabel[cacheKey];
+  if (wrapLabel.cache[cacheKey]) {
+    return wrapLabel.cache[cacheKey];
   }
   if (common.lineBreakRegex.test(label)) {
     return label;
@@ -536,15 +540,18 @@ export const wrapLabel = (label, maxWidth, config) => {
     }
   });
   const result = completedLines.filter(line => line !== '').join(config.joinWith);
-  wrapLabel[cacheKey] = result;
+  wrapLabel.cache[cacheKey] = result;
   return result;
 };
 
 const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
-  config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 }, config);
+  if (!breakString.cache) {
+    breakString.cache = {};
+  }
+  config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
   const cacheKey = `${word}-${maxWidth}-${hyphenCharacter}-${JSON.stringify(config)}`;
-  if (breakString[cacheKey]) {
-    return breakString[cacheKey];
+  if (breakString.cache[cacheKey]) {
+    return breakString.cache[cacheKey];
   }
   const characters = word.split('');
   const lines = [];
@@ -563,7 +570,7 @@ const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
     }
   });
   const result = { hyphenatedStrings: lines, remainingWord: currentLine };
-  breakString[cacheKey] = result;
+  breakString.cache[cacheKey] = result;
   return result;
 };
 
@@ -579,10 +586,7 @@ const breakString = (word, maxWidth, hyphenCharacter = '-', config) => {
  * @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
  */
 export const calculateTextHeight = function(text, config) {
-  config = Object.assign(
-    { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
-    config
-  );
+  config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
   return calculateTextDimensions(text, config).height;
 };
 
@@ -594,10 +598,7 @@ export const calculateTextHeight = function(text, config) {
  * @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
  */
 export const calculateTextWidth = function(text, config) {
-  config = Object.assign(
-    { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
-    config
-  );
+  config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
   return calculateTextDimensions(text, config).width;
 };
 
@@ -609,17 +610,17 @@ export const calculateTextWidth = function(text, config) {
  * @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size
  */
 export const calculateTextDimensions = function(text, config) {
-  config = Object.assign(
-    { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
-    config
-  );
+  if (!calculateTextDimensions.cache) {
+    calculateTextDimensions.cache = {};
+  }
+  config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
   const { fontSize, fontFamily, fontWeight } = config;
   if (!text) {
     return { width: 0, height: 0 };
   }
   const cacheKey = `${text}-${JSON.stringify(config)}`;
-  if (calculateTextDimensions[cacheKey]) {
-    return calculateTextDimensions[cacheKey];
+  if (calculateTextDimensions.cache[cacheKey]) {
+    return calculateTextDimensions.cache[cacheKey];
   }
 
   // We can't really know if the user supplied font family will render on the user agent;
@@ -670,7 +671,7 @@ export const calculateTextDimensions = function(text, config) {
       ? 0
       : 1;
   const result = dims[index];
-  calculateTextDimensions[cacheKey] = result;
+  calculateTextDimensions.cache[cacheKey] = result;
   return result;
 };