Fixed #456 sequenceDiagram: dotted line for alt and empty bracket should be hidden

And draw label with right bottom corner cut

dist/mermaid.js

@@ -57861,17 +57861,16 @@ exports.drawText = function (elem, textData, width) {
 };
 
 exports.drawLabel = function (elem, txtObject) {
-    var rectData = exports.getNoteRect();
+    function genPoints(x, y, width, height, cut) {
-    rectData.x = txtObject.x;
+        return x + "," + y + " " +
-    rectData.y = txtObject.y;
+            (x + width) + "," + y + " " +
-    rectData.width = 50;
+            (x + width) + "," + (y + height - cut) + " " +
-    rectData.height = 20;
+            (x + width - cut * 1.2) + "," + (y + height) + " " +
-    rectData.fill = '#526e52';
+            (x) + "," + (y + height);
-    rectData.stroke = 'none';
+    }
-    rectData['class'] = 'labelBox';
+    var polygon = elem.append("polygon");
-    //rectData.color = 'white';
+    polygon.attr("points" , genPoints(txtObject.x, txtObject.y, 50, 20, 7));
-
+    polygon.attr("style", "fill:#e4db14;stroke:none");
-    exports.drawRect(elem, rectData);
 
     txtObject.y = txtObject.y + txtObject.labelMargin;
     txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin;
@@ -57938,14 +57937,14 @@ exports.drawActivation = function (elem, bounds, verticalPos) {
 exports.drawLoop = function (elem, bounds, labelText, conf) {
     var g = elem.append('g');
     var drawLoopLine = function drawLoopLine(startx, starty, stopx, stopy) {
-        g.append('line').attr('x1', startx).attr('y1', starty).attr('x2', stopx).attr('y2', stopy).attr('stroke-width', 2).attr('stroke', '#526e52').attr('class', 'loopLine');
+        return g.append('line').attr('x1', startx).attr('y1', starty).attr('x2', stopx).attr('y2', stopy).attr('stroke-width', 2).attr('stroke', '#526e52').attr('class', 'loopLine');
     };
     drawLoopLine(bounds.startx, bounds.starty, bounds.stopx, bounds.starty);
     drawLoopLine(bounds.stopx, bounds.starty, bounds.stopx, bounds.stopy);
     drawLoopLine(bounds.startx, bounds.stopy, bounds.stopx, bounds.stopy);
     drawLoopLine(bounds.startx, bounds.starty, bounds.startx, bounds.stopy);
     if (typeof bounds.elsey !== 'undefined') {
-        drawLoopLine(bounds.startx, bounds.elsey, bounds.stopx, bounds.elsey);
+        drawLoopLine(bounds.startx, bounds.elsey, bounds.stopx, bounds.elsey).style('stroke-dasharray', '3, 3');
     }
 
     var txt = exports.getTextObj();
@@ -57967,7 +57966,7 @@ exports.drawLoop = function (elem, bounds, labelText, conf) {
 
     exports.drawText(g, txt);
 
-    if (typeof bounds.elseText !== 'undefined') {
+    if (typeof bounds.elseText !== 'undefined' && bounds.elseText !== "") {
         txt.text = '[ ' + bounds.elseText + ' ]';
         txt.y = bounds.elsey + 1.5 * conf.boxMargin;
         exports.drawText(g, txt);

src/diagrams/sequenceDiagram/svgDraw.js

@@ -59,17 +59,16 @@ exports.drawText = function(elem, textData, width) {
 };
 
 exports.drawLabel = function (elem, txtObject) {
-    var rectData = exports.getNoteRect();
+    function genPoints(x, y, width, height, cut) {
-    rectData.x = txtObject.x;
+        return x + "," + y + " " +
-    rectData.y = txtObject.y;
+            (x + width) + "," + y + " " +
-    rectData.width = 50;
+            (x + width) + "," + (y + height - cut) + " " +
-    rectData.height = 20;
+            (x + width - cut * 1.2) + "," + (y + height) + " " +
-    rectData.fill = '#526e52';
+            (x) + "," + (y + height);
-    rectData.stroke = 'none';
+    }
-    rectData.class = 'labelBox';
+    var polygon = elem.append("polygon");
-    //rectData.color = 'white';
+    polygon.attr("points" , genPoints(txtObject.x, txtObject.y, 50, 20, 7));
-
+    polygon.attr("style", "fill:#e4db14;stroke:none");
-    exports.drawRect(elem, rectData);
 
     txtObject.y = txtObject.y + txtObject.labelMargin;
     txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin;
@@ -145,7 +144,7 @@ exports.drawActivation = function(elem,bounds,verticalPos){
 exports.drawLoop = function(elem,bounds,labelText, conf){
     var g = elem.append('g');
     var drawLoopLine = function(startx,starty,stopx,stopy){
-        g.append('line')
+        return g.append('line')
             .attr('x1', startx)
             .attr('y1', starty)
             .attr('x2', stopx )
@@ -159,7 +158,7 @@ exports.drawLoop = function(elem,bounds,labelText, conf){
     drawLoopLine(bounds.startx, bounds.stopy , bounds.stopx , bounds.stopy );
     drawLoopLine(bounds.startx, bounds.starty, bounds.startx, bounds.stopy );
     if(typeof bounds.elsey !== 'undefined'){
-        drawLoopLine(bounds.startx, bounds.elsey, bounds.stopx, bounds.elsey );
+        drawLoopLine(bounds.startx, bounds.elsey, bounds.stopx, bounds.elsey).style('stroke-dasharray', '3, 3');
     }
 
     var txt = exports.getTextObj();
@@ -181,7 +180,7 @@ exports.drawLoop = function(elem,bounds,labelText, conf){
 
     exports.drawText(g,txt);
 
-    if(typeof bounds.elseText !== 'undefined') {
+    if (typeof bounds.elseText !== 'undefined' && bounds.elseText !== "") {
         txt.text = '[ ' + bounds.elseText + ' ]';
         txt.y = bounds.elsey + 1.5 * conf.boxMargin;
         exports.drawText(g, txt);

test/web.html

@@ -226,6 +226,22 @@ end
 
     </div>
 
+    <div class="mermaid">
+        sequenceDiagram
+        loop Daily query
+            Alice->>Bob: Hello Bob, how are you?
+            alt is sick
+                Bob->>Alice: Not so good :(
+            else
+                Bob->>Alice: Feeling fresh like a daisy
+            end
+        opt Extra response
+        Bob->>Alice: Thanks for asking
+        end
+
+        end
+    </div>
+
     <div  class="mermaid">
 graph LR;
                 A[Start]-->B{a = '1,2'}