CSS styling not applied to some boxes with arrows

[mbrannstrom]

When arrows and lines are attached to rectangles, styling is not applied in certain cases.

E.g. arrow left-to-right works, but not the right-to-left. Curved arrows does not work either.

See some examples below, with output at the bottom (using version 0.5.0-alpha.8).

+---------+     +---------+
| Box {a} |---->| Box {b} |
+---------+     +---------+

+---------+     +---------+
| Box {a} |<----| Box {b} |
+---------+     +---------+

+---------+        +---------+
| Box {a} |--. .-->| Box {b} |
+---------+  | |   +---------+
             '-'

+---------+     
| Box {a} |---->
+---------+     

+---------+     
| Box {a} |----
+---------+     

+---------+  +---------+  
| Box {a} |  | Box {a} |
+---------+  +---+-----+
    |            |      
    v            v      
+---------+  +---------+
| Box {b} |  | Box {b} |
+---------+  +---------+

+---------+  +---------+
| Box {a} |  | Box {a} |
+---------+  +---------+
    ^            ^      
    |            |      
+---------+  +---+-----+
| Box {b} |  | Box {b} |
+---------+  +---------+

# Legend:
a = {
  fill: darkred;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
b = {
  fill: salmon;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

[ivanceras]

This is current limitation with the algorithm to endorse a group of drawing fragment into a shape, in this case a rectangle. The code responsible for endorsing 4 lines into a rectangle only succeeds if it is certain that there are only 4 lines touching in a specific way, any additional line that is touching any of the 4 lines will break the endorsement. The best rule of thumb is to put a gap to a line that points to the rectangle.

+---------+     +---------+
| Box {a} | --->| Box {b} |
+---------+     +---------+

+---------+     +---------+
| Box {a} |<--- | Box {b} |
+---------+     +---------+

+---------+        +---------+
| Box {a} | -. .-->| Box {b} |
+---------+  | |   +---------+
             '-'

+---------+     
| Box {a} | --->
+---------+     

+---------+     
| Box {a} | ----
+---------+     

+---------+  +---------+  
| Box {a} |  | Box {a} |
+---------+  +---------+
    |            |      
    v            v      
+---------+  +---------+
| Box {b} |  | Box {b} |
+---------+  +---------+

+---------+  +---------+
| Box {a} |  | Box {a} |
+---------+  +---------+
    ^            ^      
    |            |      
+---------+  +---------+
| Box {b} |  | Box {b} |
+---------+  +---------+

# Legend:
a = {
  fill: darkred;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
b = {
  fill: salmon;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}