fix #8

tmtk75 · Jan 20, 2015 · 7045396 · 7045396
1 parent ec9660a
commit 7045396
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 53 deletions.
diff --git a/examples/bundle.html b/examples/bundle.html
@@ -6,13 +6,15 @@
     <script src="../node_modules/jquery/dist/jquery.min.js"></script>
     <script src="../vendor/coffee-script.js"></script>
     <script src="../dist/bundle.lib.js"></script>
+    <style>
+    .participant .name { -font-size: 48px; }
+    </style>
 </head>
 <body>
     <script type='text/jumly+sequence'>
-    @found "Me"
-    </script>
-    <script type="text/jumly+robustness">
-    @actor "User" :-> @view "Browser"
+    @found "supercalifragilisticexpialidocious",->
+      @create "0123456789abcdf0123456789abcdf0123456789abcdf", ->
+        @message "hi", "What"
     </script>
 </body>
 </html>
diff --git a/karma.conf.js b/karma.conf.js
@@ -26,6 +26,7 @@ module.exports = function(config) {
         'spec/SequenceDiagramBuilderSpec.coffee',
         'spec/SequenceDiagramLayoutSpec.coffee',
         'spec/SequenceDiagramSpec.coffee',
+        'spec/SequenceParticipantSpec.coffee',
         'spec/apiSpec.coffee',
         'spec/coreSpec.coffee',
         'spec/issuesSpec.coffee',

diff --git a/lib/css/sequence.styl b/lib/css/sequence.styl
@@ -9,10 +9,6 @@ box-shadow()
 
 border_width = 2px
 obj_inner_width  = 88px
-obj_inner_height = 31px
-obj_hpadding = 4px
-obj_vpadding = 0px
-obj_outer_width = (border_width + obj_hpadding)*2 + obj_inner_width
 occur_width = 12px
 msg_shift_top = -10px
 
@@ -23,19 +19,18 @@ primary-border()
   font-family Tahoma,Verdana
 
   .participant
-    position relative
-    width obj_outer_width
+    display inline-block
     background-color #fff
+    primary-border()
+    min-height 31px
     .name
-      primary-border()
-      text-align center
-      padding obj_vpadding obj_hpadding
+      display inline-block
+      margin 8px 0  // looks vertical centering
+      padding 0px 4px
       min-width obj_inner_width
-      height    obj_inner_height
-      line-height obj_inner_height
-
-    &:not(:first-child)
-      margin-top -(border_width*2 + obj_inner_height)
+      max-width obj_inner_width*2
+      text-align center
+      word-break break-all
 
   .lifeline,
   .lifeline .line,
@@ -220,7 +215,7 @@ primary-border()
   .self .message
     line-height 12px
 
-  .participant .name,
+  .participant,
   .occurrence,
   .ref
     box-shadow()

diff --git a/spec/SequenceDiagramLayoutSpec.coffee b/spec/SequenceDiagramLayoutSpec.coffee
@@ -6,11 +6,6 @@ SequenceDiagram = require "SequenceDiagram.coffee"
 SequenceParticipant = require "SequenceParticipant.coffee"
 SequenceDiagramBuilder = require "SequenceDiagramBuilder.coffee"
 
-_bottom = (e)-> Math.round e.offset().top + e.outerHeight() - 1
-_top = (e)-> Math.round e.offset().top
-_right = (e)-> Math.round e.offset().left + e.outerWidth() - 1
-_left = (e)-> Math.round e.offset().left
-
 describe "SequenceDiagramLayout", ->
 
   div = utils.div this
@@ -83,7 +78,7 @@ describe "SequenceDiagramLayout", ->
         @layout.layout diag
 
       it "is longer than the sum of all ones", ->
-        expect(_bottom @diagram).toBe (_u.max @diagram.find("*"), (e)-> _bottom $(e))
+        expect(utils.bottom @diagram).toBe (_u.max @diagram.find("*"), (e)-> utils.bottom $(e))
 
   describe "width", ->
     beforeEach ->
@@ -119,8 +114,8 @@ describe "SequenceDiagramLayout", ->
 
     describe "height", ->
 
-      it "is 35px", ->
-        expect(@obj1.outerHeight()).toBe 35
+      it "is 36px", ->
+        expect(@obj1.outerHeight()).toBe 36
 
     describe "top", ->
 
@@ -186,7 +181,7 @@ describe "SequenceDiagramLayout", ->
         obj = @diagram.find ".participant:eq(0)"
         line = @diagram.find ".lifeline:eq(0) .line"
         occurr = @diagram.find ".occurrence:eq(0)"
-        y0 = _bottom obj
+        y0 = utils.bottom obj
         y1 = line.offset().top
         y2 = occurr.offset().top
         expect(y1).toBeGreaterThan y0
@@ -207,7 +202,7 @@ describe "SequenceDiagramLayout", ->
       it "is at mostbottom than the others", ->
         lines = @diagram.find ".lifeline"
         occurs = @diagram.find ".occurrence"
-        g = (e)-> _bottom $(e)
+        g = (e)-> utils.bottom $(e)
         a = _u.max lines, g
         b = _u.max occurs, g
         expect(a).toBeGreaterThan b
@@ -223,7 +218,7 @@ describe "SequenceDiagramLayout", ->
           div.append diag
           @layout.layout diag
 
-          expect(_bottom diag.find(".lifeline:eq(0)")).toBeGreaterThan _bottom diag.find("> .interaction:eq(1)")
+          expect(utils.bottom diag.find(".lifeline:eq(0)")).toBeGreaterThan utils.bottom diag.find("> .interaction:eq(1)")
 
   describe "occurrence", ->
 
@@ -396,8 +391,8 @@ describe "SequenceDiagramLayout", ->
           @layout.layout @diagram
 
         it "doesn't overlap with note", ->
-          a = _bottom @diagram.find ".fragment .header .name:eq(0)"
-          b = _top @diagram.find ".note"
+          a = utils.bottom @diagram.find ".fragment .header .name:eq(0)"
+          b = utils.top @diagram.find ".note"
           expect(a).toBeLessThan b
 
   describe "ref", ->
@@ -413,15 +408,15 @@ describe "SequenceDiagramLayout", ->
         @ref = @diagram.find(".ref:eq(0)").data "_self"
 
       it "can be second element", ->
-        y0 = _bottom @obj
-        y1 = _top @ref
+        y0 = utils.bottom @obj
+        y1 = utils.top @ref
         expect(y0).toBeLessThan y1
 
       it "is at left to the left of object", ->
         expect(@ref.offset().left).toBeLessThan @obj.offset().left
 
       it "is at right to the right of object", ->
-        expect(_right @ref).toBeGreaterThan _right @obj
+        expect(utils.right @ref).toBeGreaterThan utils.right @obj
 
     describe "first element", ->
       it "can be first element", ->
@@ -450,8 +445,8 @@ describe "SequenceDiagramLayout", ->
         it "fit to .alt", ->
           alt = @diagram.find ".alt"
           ref = @diagram.find ".ref"
-          expect(_left ref).toBeGreaterThan _left alt
-          expect(_right ref).toBeLessThan _right alt
+          expect(utils.left ref).toBeGreaterThan utils.left alt
+          expect(utils.right ref).toBeLessThan utils.right alt
 
       describe "one object", ->
         beforeEach ->
@@ -469,8 +464,8 @@ describe "SequenceDiagramLayout", ->
           ## NOTE: The spec is undefined
           alt = @diagram.find ".alt"
           ref = @diagram.find ".ref"
-          expect(_left ref).toBeGreaterThan _left alt
-          expect(_right ref).toBeLessThan _right alt
+          expect(utils.left ref).toBeGreaterThan utils.left alt
+          expect(utils.right ref).toBeLessThan utils.right alt
 
     describe "left", ->
       describe "next of .alt", ->
@@ -492,15 +487,11 @@ describe "SequenceDiagramLayout", ->
 
         it "is at right to the left of 1st .occurrence", ->
           occur = @diagram.find ".occurrence:eq(0)"
-          expect(_left occur).toBeLessThan _left @ref
+          expect(utils.left occur).toBeLessThan utils.left @ref
 
         it "is at left to the right of 1st .occurrence", ->
           occur = @diagram.find ".occurrence:eq(0)"
-          expect(_left @ref).toBeLessThan _right occur
-
-        it "is at left to the center of 2rd .participant", ->
-          obj = @diagram.find ".participant:eq(1)"
-          expect(_right @ref).toBeLessThan (_left obj) + obj.outerWidth()/2
+          expect(utils.left @ref).toBeLessThan utils.right occur
 
     describe "width", ->
       describe "initialy", ->
@@ -553,10 +544,10 @@ describe "SequenceDiagramLayout", ->
           obj   = diag.find ".participant:eq(1)"
           occur.css "background-color":"#ff8080"
           obj.css "color":"#ff8080"
-          expect(_left obj).toBeLessThan _right ref
-          expect(_right ref).toBeLessThan _right obj
-          expect(_left occur).toBeLessThan _right ref
-          expect(_right ref).toBeLessThan _right occur
+          expect(utils.left obj).toBeLessThan utils.right ref
+          expect(utils.right ref).toBeLessThan utils.right obj
+          expect(utils.left occur).toBeLessThan utils.right ref
+          expect(utils.right ref).toBeLessThan utils.right occur
 
     describe "index", ->
       it "keeps the position", ->
@@ -621,7 +612,7 @@ describe "SequenceDiagramLayout", ->
         it "doesn't overlap", ->
           a = @diagram.find ".return:eq(0)"
           b = @diagram.find ".message:eq(2)"
-          expect(_bottom a).toBeLessThan _top b
+          expect(utils.bottom a).toBeLessThan utils.top b
 
     describe "returning back to the caller", ->
 
@@ -789,15 +780,15 @@ describe "SequenceDiagramLayout", ->
         it "is at the bottom of its .participant", ->
           a = @diagram.find(".lifeline:eq(0)").data "_self"
           b = @diagram.find(".lifeline:eq(1)").data "_self"
-          expect(_top a).toBeGreaterThan _bottom a._object
-          expect(_top b).toBeGreaterThan _bottom b._object
+          expect(utils.top a).toBeGreaterThan utils.bottom a._object
+          expect(utils.top b).toBeGreaterThan utils.bottom b._object
 
       describe "bottom", ->
 
         it "is at the same", ->
           a = @diagram.find ".lifeline:eq(0)"
           b = @diagram.find ".lifeline:eq(1)"
-          expect(_bottom a).toBe _bottom b
+          expect(utils.bottom a).toBe utils.bottom b
 
   describe "note", ->
     describe "prev message", ->

diff --git a/spec/SequenceParticipantSpec.coffee b/spec/SequenceParticipantSpec.coffee
@@ -0,0 +1,48 @@
+core = require "core.coffee"
+_u = require "jquery.ext.coffee"
+utils = require "./jasmine-utils.coffee"
+SequenceDiagramLayout = require "SequenceDiagramLayout.coffee"
+SequenceDiagramBuilder = require "SequenceDiagramBuilder.coffee"
+
+describe "SequenceParticipant", ->
+
+  div = utils.div this
+
+  beforeEach ->
+    @layout = new SequenceDiagramLayout
+    @builder = new SequenceDiagramBuilder
+
+  describe "one participant", ->
+    beforeEach ->
+      @diagram = @builder.build """
+        @found "a"
+        """
+      div.append @diagram
+      @layout.layout @diagram
+
+    it "is calculated for width", ->
+      p = @diagram.find(".participant:eq(0)")
+      expect(p.outerWidth()).toBe 2 + 0 + 4 + 88 + 4 + 0 + 2
+
+    it "is calculated for height", ->
+      p = @diagram.find(".participant:eq(0)")
+      n = p.find(".name")
+      # 1.2 is from https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+      lh = Math.round(parseInt(n.css("font-size")) * 1.2) # estimated line-height
+
+      expect(p.outerHeight()).toBe 2 + 8 + 0 + lh + 0 + 8 + 2
+
+  describe "two participants", ->
+    beforeEach ->
+      @diagram = @builder.build """
+        @found "0123456789abcdef0123456789abcdef", ->
+          @message "hi", "You"
+        """
+      div.append @diagram
+      @layout.layout @diagram
+
+    it "is aligned at bottom", ->
+      p0 = @diagram.find(".participant:eq(0)")
+      p1 = @diagram.find(".participant:eq(1)")
+
+      expect(utils.bottom p0).toBe utils.bottom p1
diff --git a/spec/entry.js b/spec/entry.js
@@ -5,6 +5,7 @@ require("RobustnessDiagramBuilderSpec.coffee");
 require("SequenceDiagramBuilderSpec.coffee");
 require("SequenceDiagramLayoutSpec.coffee");
 require("SequenceDiagramSpec.coffee");
+require("SequenceParticipantSpec.coffee");
 require("apiSpec.coffee");
 require("coreSpec.coffee");
 require("issuesSpec.coffee");
diff --git a/spec/jasmine-utils.coffee b/spec/jasmine-utils.coffee
@@ -33,4 +33,12 @@ root =
       return opts[e] if $("html").hasClass "ua-#{e}"
     opts["webkit"]
 
+  bottom: (e)-> Math.round e.offset().top + e.outerHeight() - 1
+
+  top: (e)-> Math.round e.offset().top
+
+  right: (e)-> Math.round e.offset().left + e.outerWidth() - 1
+
+  left: (e)-> Math.round e.offset().left
+
 module.exports = root